@openmrs/esm-report-builder 0.1.1-pre.87

package/src/components/linelist/modals/linelist-report-builder-modal.scss

@@ -0,0 +1,164 @@
+.linelist-builder-modal {
+  .cds--modal-container {
+    max-width: 1000px;
+  }
+}
+
+.linelist-builder-content {
+  display: flex;
+  gap: 2rem;
+  min-height: 400px;
+  margin: 2rem 0;
+}
+
+.linelist-builder-side-nav {
+  width: 200px;
+  flex-shrink: 0;
+}
+
+.linelist-builder-panel-content {
+  flex: 1;
+  overflow-y: auto;
+  max-height: 500px;
+  padding-right: 1rem;
+}
+
+.linelist-builder-progress-bar {
+  margin-bottom: 2rem;
+}
+
+.linelist-builder-notification {
+  margin-bottom: 1.5rem;
+}
+
+.linelist-builder-footer {
+  margin-top: 2rem;
+  border-top: 1px solid #e0e0e0;
+  padding: 1rem 2rem;
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.75rem;
+}
+
+.linelist-builder-panel-title {
+  font-size: 1.25rem;
+  font-weight: 600;
+  margin-bottom: 0.5rem;
+}
+
+.linelist-builder-panel-description {
+  font-size: 0.875rem;
+  color: #525252;
+  margin-bottom: 1.5rem;
+}
+
+.linelist-builder-sql-preview {
+  background: #f4f4f4;
+  border-radius: 4px;
+  padding: 1rem;
+
+  h4 {
+    margin: 0 0 1rem 0;
+    font-size: 0.875rem;
+    font-weight: 600;
+  }
+}
+
+.linelist-builder-json-preview {
+  background: #262626;
+  color: #f4f4f4;
+  padding: 1rem;
+  border-radius: 4px;
+  overflow: auto;
+  max-height: 300px;
+  font-size: 0.75rem;
+  line-height: 1.4;
+}
+
+.linelist-builder-review-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 1rem;
+}
+
+.linelist-builder-review-item {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  padding: 0.75rem;
+  background: #f4f4f4;
+  border-radius: 4px;
+}
+
+.linelist-builder-review-label {
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: #525252;
+  text-transform: uppercase;
+}
+
+.linelist-builder-review-value {
+  font-size: 0.875rem;
+  font-weight: 400;
+}
+
+.linelist-builder-preview-toolbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 1rem;
+  padding: 1rem;
+  background: #f4f4f4;
+  border-radius: 4px;
+}
+
+.linelist-builder-preview-status {
+  display: flex;
+  gap: 2rem;
+  padding: 0.75rem 1rem;
+  background: #e0e0e0;
+  border-radius: 4px;
+  font-size: 0.875rem;
+
+  span {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+
+    &:before {
+      content: '•';
+      color: #525252;
+    }
+
+    &:first-child:before {
+      content: none;
+    }
+  }
+}
+
+.linelist-builder-preview-table-container {
+  max-height: 400px;
+  overflow: auto;
+  border: 1px solid #e0e0e0;
+  border-radius: 4px;
+}
+
+.linelist-builder-empty-state {
+  padding: 3rem;
+  text-align: center;
+  background: #f4f4f4;
+  border-radius: 4px;
+  color: #525252;
+}
+
+.linelist-builder-panel-header-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: 1.5rem;
+}
+
+.linelist-builder-category-toggle {
+  margin-top: 0.5rem;
+}

package/src/components/linelist/modals/preview-parameter-modal.component.tsx

@@ -0,0 +1,361 @@
+/**
+ * Preview Parameter Modal
+ *
+ * Allows users to set parameter values before running a linelist preview.
+ * Supports various parameter types including:
+ * - Date parameters with FIXED/RELATIVE mode toggle (global for all dates)
+ * - Text and number inputs
+ * - Boolean toggles
+ * - Configurable lists (dropdowns)
+ * - OpenMRS reference types (Location, Concept, Identifier Type, Person Attribute)
+ */
+
+import React, { useState, useEffect, useCallback } from 'react';
+import {
+  Modal,
+  ModalBody,
+  InlineNotification,
+  Stack,
+  Select,
+  SelectItem,
+  RadioButton,
+  RadioButtonGroup,
+} from '@carbon/react';
+
+import type { LinelistParameter } from '../../../types/linelist-types';
+import {
+  RELATIVE_PERIOD_OPTIONS,
+  type RelativePeriod,
+  resolveRelativePeriod,
+  formatDate,
+} from '../../../utils/parameter-resolution';
+
+// Import parameter input components from data-visualizer (reuse)
+import DateParameterInput from '../../data-visualizer/parameter-inputs/date-parameter-input.component';
+import NumberParameterInput from '../../data-visualizer/parameter-inputs/number-parameter-input.component';
+import BooleanParameterInput from '../../data-visualizer/parameter-inputs/boolean-parameter-input.component';
+import ListParameterInput from '../../data-visualizer/parameter-inputs/list-parameter-input.component';
+import LocationParameterInput from '../../data-visualizer/parameter-inputs/location-parameter-input.component';
+import ConceptParameterInput from '../../data-visualizer/parameter-inputs/concept-parameter-input.component';
+import IdentifierTypeParameterInput from '../../data-visualizer/parameter-inputs/identifier-type-parameter-input.component';
+import PersonAttributeParameterInput from '../../data-visualizer/parameter-inputs/person-attribute-parameter-input.component';
+import TextParameterInput from '../../data-visualizer/parameter-inputs/text-parameter-input.component';
+
+type Props = {
+  open: boolean;
+  onClose: () => void;
+  onRun: (parameterValues: Record<string, any>) => void;
+  parameters: LinelistParameter[];
+  initialValues?: Record<string, any>;
+  loading?: boolean;
+};
+
+type DateMode = 'FIXED' | 'RELATIVE';
+
+const PreviewParameterModal: React.FC<Props> = ({
+  open,
+  onClose,
+  onRun,
+  parameters = [],
+  initialValues = {},
+  loading = false,
+}) => {
+  // State for parameter values
+  const [values, setValues] = useState<Record<string, any>>({});
+  const [errors, setErrors] = useState<Record<string, string>>({});
+
+  // State for search queries (for searchable reference types)
+  const [searchQueries, setSearchQueries] = useState<Record<string, string>>({});
+
+  // State for date mode (FIXED or RELATIVE)
+  const [dateMode, setDateMode] = useState<DateMode>('FIXED');
+
+  // State for relative period selection
+  const [relativePeriod, setRelativePeriod] = useState<RelativePeriod | ''>('');
+
+  // Check if there are any date parameters
+  const hasDateParameters = parameters.some(p => p.type === 'DATE' || p.type === 'DATETIME');
+
+  // Get date parameter names
+  const dateParameters = parameters.filter(p => p.type === 'DATE' || p.type === 'DATETIME');
+
+  // Check if report has both startDate and endDate for relative period support
+  const hasStartAndEndDateParams =
+    dateParameters.some(p => p.name.toLowerCase() === 'startdate' || p.name.toLowerCase() === 'start_date') &&
+    dateParameters.some(p => p.name.toLowerCase() === 'enddate' || p.name.toLowerCase() === 'end_date');
+
+  // Only show FIXED/RELATIVE toggle if both start and end date params exist
+  const supportsRelativePeriod = hasStartAndEndDateParams;
+
+  // Initialize values from defaults or previously set values - only when modal opens
+  useEffect(() => {
+    if (!open) return;
+
+    const initialValuesFromParams: Record<string, any> = {};
+
+    for (const param of parameters) {
+      // Use explicit value if provided, otherwise use default
+      const paramValue = initialValues[param.name] || param.defaultValue || '';
+      initialValuesFromParams[param.name] = paramValue;
+    }
+
+    setValues(initialValuesFromParams);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open]); // Only run when modal opens, not when parameters/initialValues change
+
+  // Reset errors and other state when modal opens
+  useEffect(() => {
+    if (open) {
+      setErrors({});
+      setSearchQueries({});
+      setRelativePeriod('');
+      setDateMode('FIXED');
+    }
+  }, [open]);
+
+  const validate = (): boolean => {
+    const newErrors: Record<string, string> = {};
+
+    for (const param of parameters) {
+      const value = values[param.name];
+
+      // Skip validation for parameters not shown in RELATIVE mode
+      if ((param.type === 'DATE' || param.type === 'DATETIME') && dateMode === 'RELATIVE') {
+        continue;
+      }
+
+      // Check required parameters
+      if (param.required && (!value || value.toString().trim() === '')) {
+        newErrors[param.name] = `${param.label} is required`;
+      }
+    }
+
+    setErrors(newErrors);
+    return Object.keys(newErrors).length === 0;
+  };
+
+  const handleRun = () => {
+    // Clear previous errors
+    setErrors({});
+
+    // If in RELATIVE mode but no period selected, show error
+    if (dateMode === 'RELATIVE' && hasDateParameters && !relativePeriod) {
+      setErrors({ relativePeriod: 'Please select a reporting period' });
+      return;
+    }
+
+    // If in RELATIVE mode with period selected, resolve and run
+    if (dateMode === 'RELATIVE' && relativePeriod) {
+      const resolvedValues = { ...values };
+      const { start, end } = resolveRelativePeriod(relativePeriod);
+
+      // Map resolved dates to date parameters
+      dateParameters.forEach((param, index) => {
+        if (index === 0) {
+          resolvedValues[param.name] = formatDate(start);
+        } else if (index === 1) {
+          resolvedValues[param.name] = formatDate(end);
+        }
+      });
+
+      onRun(resolvedValues);
+      return;
+    }
+
+    // For FIXED mode, validate before running
+    if (!validate()) {
+      return;
+    }
+
+    onRun(values);
+  };
+
+  const handleValueChange = useCallback((paramName: string, value: any) => {
+    setValues((prev) => ({ ...prev, [paramName]: value }));
+    // Clear error for this parameter
+    if (errors[paramName]) {
+      setErrors((prev) => ({ ...prev, [paramName]: '' }));
+    }
+  }, [errors]);
+
+  const handleErrorChange = useCallback((paramName: string, error: string | undefined) => {
+    setErrors((prev) => {
+      if (error) {
+        return { ...prev, [paramName]: error };
+      }
+      const newErrors = { ...prev };
+      delete newErrors[paramName];
+      return newErrors;
+    });
+  }, []);
+
+  const handleSearchQueryChange = useCallback((paramName: string, query: string) => {
+    setSearchQueries((prev) => ({ ...prev, [paramName]: query }));
+  }, []);
+
+  // Render a single parameter input using the appropriate component
+  const renderParameterInput = (param: LinelistParameter) => {
+    const value = values[param.name] || '';
+    const error = errors[param.name];
+
+    // Skip start/end date parameters in RELATIVE mode - they're handled by the global relative period selector
+    if (supportsRelativePeriod && dateMode === 'RELATIVE') {
+      const isStartDate = param.name.toLowerCase() === 'startdate' || param.name.toLowerCase() === 'start_date';
+      const isEndDate = param.name.toLowerCase() === 'enddate' || param.name.toLowerCase() === 'end_date';
+      if ((param.type === 'DATE' || param.type === 'DATETIME') && (isStartDate || isEndDate)) {
+        return null;
+      }
+    }
+
+    const commonProps = {
+      parameter: param,
+      value,
+      error,
+      onChange: (newValue: any) => handleValueChange(param.name, newValue),
+    };
+
+    switch (param.type) {
+      case 'DATE':
+      case 'DATETIME':
+        return <DateParameterInput key={param.name} {...commonProps} />;
+
+      case 'NUMBER':
+        return <NumberParameterInput key={param.name} {...commonProps} />;
+
+      case 'BOOLEAN':
+        return <BooleanParameterInput key={param.name} {...commonProps} />;
+
+      case 'LIST':
+        return <ListParameterInput key={param.name} {...commonProps} />;
+
+      case 'LOCATION':
+        return (
+          <LocationParameterInput
+            key={param.name}
+            {...commonProps}
+            onSearchQueryChange={(query) => handleSearchQueryChange(param.name, query)}
+          />
+        );
+
+      case 'CONCEPT':
+        return (
+          <ConceptParameterInput
+            key={param.name}
+            {...commonProps}
+            searchQuery={searchQueries[param.name] || ''}
+            onSearchQueryChange={(query) => handleSearchQueryChange(param.name, query)}
+          />
+        );
+
+      case 'IDENTIFIER_TYPE':
+        return <IdentifierTypeParameterInput key={param.name} {...commonProps} />;
+
+      case 'PERSON_ATTRIBUTE':
+        return <PersonAttributeParameterInput key={param.name} {...commonProps} />;
+
+      case 'TEXT':
+      default:
+        return (
+          <TextParameterInput
+            key={param.name}
+            {...commonProps}
+            onError={(error) => handleErrorChange(param.name, error)}
+          />
+        );
+    }
+  };
+
+  return (
+    <Modal
+      open={open}
+      onRequestClose={onClose}
+      modalHeading="Preview Parameters"
+      modalLabel="Linelist Preview"
+      preventCloseOnClickOutside
+      size="sm"
+      primaryButtonText="Run Preview"
+      primaryButtonDisabled={loading}
+      onRequestSubmit={handleRun}
+      secondaryButtonText="Cancel"
+      loadingStatus={loading ? 'active' : 'inactive'}
+      loadingDescription="Running..."
+    >
+      <ModalBody>
+        {parameters.length === 0 ? (
+          <InlineNotification
+            kind="info"
+            title="No Parameters"
+            subtitle="This report has no parameters defined. Click Run to use default values."
+            lowContrast
+          />
+        ) : (
+          <Stack gap={5}>
+            {/* Date Mode Toggle - shown ONLY if report has both startDate AND endDate */}
+            {supportsRelativePeriod && (
+              <div style={{ marginBottom: '1rem' }}>
+                <label className="cds--label">Date Selection Mode</label>
+                <RadioButtonGroup
+                  legendText=""
+                  name="date-mode"
+                  valueSelected={dateMode}
+                  onChange={(mode) => {
+                    setDateMode(mode as DateMode);
+                    // Clear relative period when switching to FIXED
+                    if (mode === 'FIXED') {
+                      setRelativePeriod('');
+                    }
+                  }}
+                >
+                  <RadioButton
+                    id="date-mode-fixed"
+                    labelText="Specific dates"
+                    value="FIXED"
+                  />
+                  <RadioButton
+                    id="date-mode-relative"
+                    labelText="Relative period"
+                    value="RELATIVE"
+                  />
+                </RadioButtonGroup>
+              </div>
+            )}
+
+            {/* Relative Period Selector - shown in RELATIVE mode */}
+            {dateMode === 'RELATIVE' && supportsRelativePeriod && (
+              <div style={{ marginBottom: '1rem' }}>
+                <Select
+                  id="relative-period-select"
+                  labelText="Select reporting period"
+                  value={relativePeriod}
+                  onChange={(e) => {
+                    setRelativePeriod(e.target.value as RelativePeriod);
+                  }}
+                  size="sm"
+                >
+                  <SelectItem value="" text="Select period" />
+                  {RELATIVE_PERIOD_OPTIONS.map((option) => (
+                    <SelectItem
+                      key={option.value}
+                      value={option.value}
+                      text={option.label}
+                    />
+                  ))}
+                </Select>
+                {errors.relativePeriod && (
+                  <div style={{ color: '#da1e28', fontSize: '0.875rem', marginTop: '0.5rem' }}>
+                    {errors.relativePeriod}
+                  </div>
+                )}
+              </div>
+            )}
+
+            {/* Parameter Inputs */}
+            {parameters.map((param) => renderParameterInput(param))}
+          </Stack>
+        )}
+      </ModalBody>
+    </Modal>
+  );
+};
+
+export default PreviewParameterModal;

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

@@ -0,0 +1,186 @@
+import React from 'react';
+import {
+  Button,
+  Checkbox,
+  DataTable,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableHeader,
+  TableRow,
+  TableToolbar,
+  TableToolbarContent,
+  TableToolbarSearch,
+} from '@carbon/react';
+import { Add } from '@carbon/icons-react';
+import { useTranslation } from 'react-i18next';
+
+export type ReportSummary = {
+  id: string;
+  name: string;
+  status: string;
+  updatedAt: string;
+};
+
+type HeaderDef = {
+  key: string;
+  header: string;
+};
+
+type Props = {
+  reports: ReportSummary[];
+  headers: HeaderDef[];
+  onRowClick: (reportId: string) => void;
+  searchValue: string;
+  onSearchChange: (value: string) => void;
+  onCreateReport: () => void;
+  // Selection props
+  selectedReports?: Set<string>;
+  onSelectReport?: (reportId: string) => void;
+  onSelectAll?: () => void;
+  showSelection?: boolean;
+};
+
+const ReportsTable: React.FC<Props> = ({
+  reports,
+  headers,
+  onRowClick,
+  searchValue,
+  onSearchChange,
+  onCreateReport,
+  selectedReports = new Set(),
+  onSelectReport,
+  onSelectAll,
+  showSelection = false,
+}) => {
+  const { t } = useTranslation();
+
+  // Debug logging
+  console.log('ReportsTable props:', { showSelection, reportsCount: reports.length });
+
+  // Build headers with selection column when needed
+  const tableHeaders = React.useMemo(() => {
+    if (showSelection) {
+      return [{ key: 'select', header: 'Select' }, ...headers];
+    }
+    return headers;
+  }, [headers, showSelection]);
+
+  console.log('tableHeaders:', tableHeaders);
+
+  const rows = React.useMemo(
+    () =>
+      reports.map((r) => {
+        const row: any = {
+          id: r.id,
+        };
+        // Add all fields in the order they appear in tableHeaders
+        tableHeaders.forEach((h) => {
+          if (h.key === 'select') {
+            row.select = r.id;
+          } else {
+            row[h.key] = (r as any)[h.key];
+          }
+        });
+        return row;
+      }),
+    [reports, tableHeaders],
+  );
+
+  return (
+      <DataTable rows={rows} headers={tableHeaders} useZebraStyles>
+        {({ rows, headers, getHeaderProps, getRowProps, getTableProps }) => (
+            <TableContainer
+                data-testid="reports-table"
+                style={{
+                  background: 'var(--cds-layer, #ffffff)',
+                  borderTop: '1px solid var(--cds-border-subtle, #e0e0e0)',
+                }}
+            >
+              <TableToolbar>
+                <TableToolbarContent
+                    style={{
+                      display: 'flex',
+                      justifyContent: 'space-between',
+                      gap: '0.75rem',
+                    }}
+                >
+                  <TableToolbarSearch
+                      expanded
+                      value={searchValue}
+                      onChange={(e: React.ChangeEvent<HTMLInputElement>) => onSearchChange(e.target.value)}
+                      placeholder={t('searchThisList', 'Search this list')}
+                  />
+
+                  <Button
+                      kind="primary"
+                      renderIcon={() => <Add size={16} />}
+                      size="sm"
+                      onClick={onCreateReport}
+                  >
+                    {t('createReport', 'Create report')}
+                  </Button>
+                </TableToolbarContent>
+              </TableToolbar>
+
+              <Table {...getTableProps()}>
+                <TableHead>
+                  <TableRow>
+                    {headers.map((header) => (
+                        <TableHeader
+                            {...getHeaderProps({ header })}
+                            key={header.key}
+                        >
+                          {header.key === 'select' ? (
+                            <Checkbox
+                              id="select-all-reports"
+                              checked={selectedReports.size === reports.length && reports.length > 0}
+                              indeterminate={selectedReports.size > 0 && selectedReports.size < reports.length}
+                              onChange={onSelectAll}
+                              labelText=""
+                            />
+                          ) : (
+                            header.header
+                          )}
+                        </TableHeader>
+                    ))}
+                  </TableRow>
+                </TableHead>
+
+                <TableBody>
+                  {rows.map((row) => (
+                    <TableRow
+                      {...getRowProps({ row })}
+                      key={row.id}
+                      onClick={() => !showSelection && onRowClick(row.id)}
+                    >
+                      {row.cells.map((cell, cellIndex) => {
+                        const isFirstCell = showSelection && cellIndex === 0;
+                        return (
+                          <TableCell key={cell.id}>
+                            {isFirstCell ? (
+                              <Checkbox
+                                id={`select-report-${row.id}`}
+                                checked={selectedReports.has(row.id)}
+                                onChange={() => onSelectReport?.(row.id)}
+                                labelText=""
+                              />
+                            ) : (
+                              cell.value
+                            )}
+                          </TableCell>
+                        );
+                      })}
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </TableContainer>
+        )}
+      </DataTable>
+  );
+};
+
+export default ReportsTable;