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

package/src/features/report-visualizer/components/ReportExplorer/RuntimeParameterForm.tsx

@@ -0,0 +1,259 @@
+/**
+ * Runtime Parameter Form Component
+ *
+ * Renders runtime parameters for the selected report.
+ * Uses existing parameter input components for each parameter type.
+ *
+ * Phase 2.5: Parameter inputs
+ */
+import React, { useState, useMemo } from 'react';
+import { Button, RadioButtonGroup, RadioButton, Select, SelectItem } from '@carbon/react';
+import { Renew } from '@carbon/react/icons';
+
+import type { LinelistParameter } from '../../../../types/linelist-types';
+import {
+  RELATIVE_PERIOD_OPTIONS,
+  type RelativePeriod,
+  resolveRelativePeriod,
+  formatDate,
+} from '../../../../utils/parameter-resolution';
+
+// Import existing parameter input components
+import DateParameterInput from '../../../../components/data-visualizer/parameter-inputs/date-parameter-input.component';
+import NumberParameterInput from '../../../../components/data-visualizer/parameter-inputs/number-parameter-input.component';
+import BooleanParameterInput from '../../../../components/data-visualizer/parameter-inputs/boolean-parameter-input.component';
+import ListParameterInput from '../../../../components/data-visualizer/parameter-inputs/list-parameter-input.component';
+import LocationParameterInput from '../../../../components/data-visualizer/parameter-inputs/location-parameter-input.component';
+import ConceptParameterInput from '../../../../components/data-visualizer/parameter-inputs/concept-parameter-input.component';
+import IdentifierTypeParameterInput from '../../../../components/data-visualizer/parameter-inputs/identifier-type-parameter-input.component';
+import PersonAttributeParameterInput from '../../../../components/data-visualizer/parameter-inputs/person-attribute-parameter-input.component';
+import TextParameterInput from '../../../../components/data-visualizer/parameter-inputs/text-parameter-input.component';
+
+interface RuntimeParameterFormProps {
+  parameters: LinelistParameter[];
+  values: Record<string, any>;
+  errors: Record<string, string>;
+  onChange: (values: Record<string, any>) => void;
+  onReset: () => void;
+  disabled?: boolean;
+}
+
+type DateMode = 'FIXED' | 'RELATIVE';
+
+const RuntimeParameterForm: React.FC<RuntimeParameterFormProps> = ({
+  parameters,
+  values,
+  errors,
+  onChange,
+  onReset,
+  disabled,
+}) => {
+  // Date mode state (FIXED or RELATIVE)
+  const [dateMode, setDateMode] = useState<DateMode>('FIXED');
+  const [relativePeriod, setRelativePeriod] = useState<RelativePeriod | undefined>(undefined);
+
+  // Get date parameters
+  const dateParameters = useMemo(() => {
+    return parameters.filter(p => p.type === 'DATE' || p.type === 'DATETIME');
+  }, [parameters]);
+
+  // Check if report has both startDate and endDate for relative period support
+  const supportsRelativePeriod = useMemo(() => {
+    return dateParameters.some(p =>
+      p.name.toLowerCase() === 'startdate' || p.name.toLowerCase() === 'start_date'
+    ) && dateParameters.some(p =>
+      p.name.toLowerCase() === 'enddate' || p.name.toLowerCase() === 'end_date'
+    );
+  }, [dateParameters]);
+
+  // Handle date mode change
+  const handleDateModeChange = (mode: DateMode) => {
+    setDateMode(mode);
+    if (mode === 'FIXED') {
+      setRelativePeriod(undefined);
+    }
+  };
+
+  // Handle relative period change - resolve to actual dates
+  const handleRelativePeriodChange = (period: RelativePeriod) => {
+    setRelativePeriod(period);
+
+    if (period && supportsRelativePeriod) {
+      // Resolve the relative period to actual dates
+      const { start, end } = resolveRelativePeriod(period);
+
+      // Update the date parameter values
+      const newValues = { ...values };
+      dateParameters.forEach((param, index) => {
+        if (index === 0) {
+          // First date parameter = start date
+          newValues[param.name] = formatDate(start);
+        } else if (index === 1) {
+          // Second date parameter = end date
+          newValues[param.name] = formatDate(end);
+        }
+      });
+
+      onChange(newValues);
+    }
+  };
+
+  // Handle parameter value change
+  const handleValueChange = (paramName: string, newValue: any) => {
+    onChange({
+      ...values,
+      [paramName]: newValue,
+    });
+  };
+
+  // Render the appropriate input component based on parameter type
+  const renderParameterInput = (param: LinelistParameter) => {
+    const value = values[param.name] || '';
+    const error = errors[param.name];
+
+    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} />;
+
+      case 'CONCEPT':
+        return <ConceptParameterInput key={param.name} {...commonProps} />;
+
+      case 'IDENTIFIER_TYPE':
+        return <IdentifierTypeParameterInput key={param.name} {...commonProps} />;
+
+      case 'PERSON_ATTRIBUTE':
+        return <PersonAttributeParameterInput key={param.name} {...commonProps} />;
+
+      case 'PROVIDER':
+      case 'PROGRAM':
+      case 'CODED_VALUE':
+        // For now, treat these as text inputs
+        // TODO: Create dedicated input components for these types
+        return <TextParameterInput key={param.name} {...commonProps} />;
+
+      case 'TEXT':
+      default:
+        return <TextParameterInput key={param.name} {...commonProps} />;
+    }
+  };
+
+  if (parameters.length === 0) {
+    return (
+      <div style={{ padding: '1rem', textAlign: 'center', color: '#999' }}>
+        <p>Select a report to see its parameters</p>
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      {/* Section header with reset button */}
+      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '0.75rem' }}>
+        <h4 style={{ margin: 0, fontSize: '0.875rem', fontWeight: 600, color: '#161616' }}>
+          Available filters
+        </h4>
+        <Button
+          kind="ghost"
+          size="sm"
+          renderIcon={Renew}
+          onClick={onReset}
+          disabled={disabled}
+          hasIconOnly
+          iconDescription="Reset filters"
+        >
+          Reset
+        </Button>
+      </div>
+
+      {/* Date Mode Toggle - shown if report has date parameters */}
+      {dateParameters.length > 0 && (
+        <div style={{ marginBottom: '0.75rem' }}>
+          <label className="cds--label" style={{ fontSize: '0.75rem', fontWeight: 400, color: '#525252' }}>
+            Date Selection Mode
+          </label>
+          <RadioButtonGroup
+            legendText=""
+            name="date-mode"
+            valueSelected={dateMode}
+            onChange={(mode) => handleDateModeChange(mode as DateMode)}
+          >
+            <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: '0.75rem' }}>
+          <Select
+            id="relative-period-select"
+            labelText="Select reporting period"
+            value={relativePeriod}
+            onChange={(e) => handleRelativePeriodChange(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>
+        </div>
+      )}
+
+      {/* Parameter inputs - more compact spacing */}
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
+        {parameters.map((param) => {
+          // Skip start/end date parameters in RELATIVE mode (they're set by relative period selection)
+          if (dateMode === 'RELATIVE' && supportsRelativePeriod) {
+            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; // Hide individual date inputs in RELATIVE mode
+            }
+          }
+
+          return (
+            <div key={param.name} style={{ marginBottom: 0 }}>
+              {renderParameterInput(param)}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
+export default RuntimeParameterForm;

package/src/features/report-visualizer/components/ReportExplorer/index.ts

@@ -0,0 +1,8 @@
+export { default as ReportExplorerPanel } from './ReportExplorerPanel';
+export { default as ReportExplorerRail } from './ReportExplorerRail';
+export { default as ReportSearch } from './ReportSearch';
+export { default as ReportCategoryFilter } from './ReportCategoryFilter';
+export { default as ReportTagFilter } from './ReportTagFilter';
+export { default as ReportList } from './ReportList';
+export { default as RuntimeParameterForm } from './RuntimeParameterForm';
+export { default as RunReportButton } from './RunReportButton';

package/src/features/report-visualizer/components/ReportWorkspace/ReportLayer.tsx

@@ -0,0 +1,33 @@
+/**
+ * Report Layer Component
+ *
+ * Displays the HTML rendered report with theme-aware styling.
+ * Ensures headers, tables, and other elements match the SPA's theme.
+ * Strips inline <style> tags from backend HTML to prevent style conflicts.
+ */
+import React, { useMemo } from 'react';
+import styles from '../../report-visualizer.scss';
+
+interface ReportLayerProps {
+  htmlContent: string;
+  reportName?: string;
+}
+
+const ReportLayer: React.FC<ReportLayerProps> = ({ htmlContent, reportName }) => {
+  // Strip inline <style> tags from backend HTML to prevent them from overriding our theme styles
+  const sanitizedHtml = useMemo(() => {
+    return htmlContent.replace(/<style[^>]*>[\s\S]*?<\/style>/gi, '');
+  }, [htmlContent]);
+
+  return (
+    <div className={styles.reportLayer}>
+      <div
+        className={styles.reportLayerContent}
+        dangerouslySetInnerHTML={{ __html: sanitizedHtml }}
+        data-report-name={reportName}
+      />
+    </div>
+  );
+};
+
+export default ReportLayer;

package/src/features/report-visualizer/components/ReportWorkspace/ReportSummary.tsx

@@ -0,0 +1,88 @@
+/**
+ * Report Summary Component
+ *
+ * Displays report metadata like record count and generation time.
+ * Format: "1,254 records • Generated today 14:31"
+ *
+ * Phase 3.3: Report summary row
+ */
+import React from 'react';
+import { Tag } from '@carbon/react';
+import { Time } from '@carbon/react/icons';
+
+interface ReportSummaryProps {
+  rowCount: number;
+  generatedTime: Date;
+  parameters?: Record<string, any>;
+}
+
+const ReportSummary: React.FC<ReportSummaryProps> = ({
+  rowCount,
+  generatedTime,
+  parameters,
+}) => {
+  const formatNumber = (num: number): string => {
+    return new Intl.NumberFormat().format(num);
+  };
+
+  const formatTime = (date: Date): string => {
+    const now = new Date();
+    const isToday = date.toDateString() === now.toDateString();
+    const time = date.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit', hour12: false });
+
+    if (isToday) {
+      return `today ${time}`;
+    }
+
+    const yesterday = new Date(now);
+    yesterday.setDate(yesterday.getDate() - 1);
+    const isYesterday = date.toDateString() === yesterday.toDateString();
+
+    if (isYesterday) {
+      return `yesterday ${time}`;
+    }
+
+    return `${date.toLocaleDateString()} ${time}`;
+  };
+
+  return (
+    <div style={{ display: 'flex', alignItems: 'center', gap: '1rem', flexWrap: 'wrap' }}>
+      {/* Record count */}
+      <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
+        <span style={{ fontSize: '0.875rem', color: '#333' }}>
+          {formatNumber(rowCount)} {rowCount === 1 ? 'record' : 'records'}
+        </span>
+      </div>
+
+      {/* Separator */}
+      <span style={{ color: '#999' }}>•</span>
+
+      {/* Generation time */}
+      <div style={{ display: 'flex', alignItems: 'center', gap: '0.25rem', fontSize: '0.875rem', color: '#666' }}>
+        <Time size={14} />
+        <span>Generated {formatTime(generatedTime)}</span>
+      </div>
+
+      {/* Optional: Display key parameters */}
+      {parameters && Object.keys(parameters).length > 0 && (
+        <>
+          <span style={{ color: '#999' }}>•</span>
+          <div style={{ display: 'flex', gap: '0.25rem', flexWrap: 'wrap' }}>
+            {Object.entries(parameters).slice(0, 3).map(([key, value]) => (
+              <Tag key={key} size="sm" type="cool-gray">
+                {key}: {String(value)}
+              </Tag>
+            ))}
+            {Object.keys(parameters).length > 3 && (
+              <Tag size="sm" type="cool-gray">
+                +{Object.keys(parameters).length - 3} more
+              </Tag>
+            )}
+          </div>
+        </>
+      )}
+    </div>
+  );
+};
+
+export default ReportSummary;

package/src/features/report-visualizer/components/ReportWorkspace/ReportViewTabs.tsx

@@ -0,0 +1,72 @@
+/**
+ * Report View Tabs Component
+ *
+ * Content switcher for selecting between different view modes.
+ * Shows available views based on report capabilities.
+ *
+ * Phase 3.2: View tabs (Table|Pivot|Chart|Report Layout)
+ */
+import React from 'react';
+import { ContentSwitcher, Switch } from '@carbon/react';
+import {
+  Table as TableIcon,
+  CrossTab,
+  ChartBar as ChartIcon,
+  Document,
+} from '@carbon/react/icons';
+
+import type { ReportCapabilities, ReportViewType } from '../../types';
+
+interface ReportViewTabsProps {
+  capabilities: ReportCapabilities;
+  activeView: ReportViewType;
+  onViewChange: (view: ReportViewType) => void;
+  disabled?: boolean;
+}
+
+const ReportViewTabs: React.FC<ReportViewTabsProps> = ({
+  capabilities,
+  activeView,
+  onViewChange,
+  disabled,
+}) => {
+  // Build available views based on capabilities
+  const views = [
+    ...(capabilities.reportLayout ? [{ label: 'Report Layout', value: 'REPORT_LAYOUT' as ReportViewType, icon: Document }] : []),
+    ...(capabilities.pivot ? [{ label: 'Pivot', value: 'PIVOT' as ReportViewType, icon: CrossTab }] : []),
+    ...(capabilities.chart ? [{ label: 'Chart', value: 'CHART' as ReportViewType, icon: ChartIcon }] : []),
+    ...(capabilities.table ? [{ label: 'Table', value: 'TABLE' as ReportViewType, icon: TableIcon }] : []),
+  ];
+
+  if (views.length === 0) {
+    return null;
+  }
+
+  // Find the current view index
+  const selectedIndex = views.findIndex((v) => v.value === activeView);
+
+  return (
+    <ContentSwitcher
+      selectedIndex={selectedIndex}
+      onChange={(event) => {
+        // event.name is the selected switch's name (which is the view value like 'TABLE')
+        const selectedView = views.find((v) => v.value === event.name);
+        if (selectedView) {
+          onViewChange(selectedView.value);
+        }
+      }}
+      size="sm"
+    >
+      {views.map((view) => (
+        <Switch
+          key={view.value}
+          name={view.value}
+          text={view.label}
+          disabled={disabled}
+        />
+      ))}
+    </ContentSwitcher>
+  );
+};
+
+export default ReportViewTabs;

package/src/features/report-visualizer/components/ReportWorkspace/ReportWorkspaceHeader.tsx

@@ -0,0 +1,92 @@
+/**
+ * Report Workspace Header Component
+ *
+ * Header for the workspace panel with report title, view tabs, and actions.
+ * Integrates ReportViewTabs and ExportMenu.
+ *
+ * Phase 3.1: Workspace header with view tabs and export
+ */
+import React from 'react';
+import { ButtonSet, Button } from '@carbon/react';
+import { SendAlt } from '@carbon/react/icons';
+
+import ReportViewTabs from './ReportViewTabs';
+import { ExportMenu } from '../Export';
+import type { ReportCapabilities, ReportViewType } from '../../types';
+
+interface ReportWorkspaceHeaderProps {
+  reportName: string;
+  reportDescription?: string;
+  capabilities: ReportCapabilities;
+  activeView: ReportViewType;
+  onViewChange: (view: ReportViewType) => void;
+  onExport: (format: 'CSV' | 'XLSX' | 'PDF') => void;
+  onSendToDhis2?: () => void;
+  loading?: boolean;
+  hasResults?: boolean; // Only show action buttons when report has results
+}
+
+const ReportWorkspaceHeader: React.FC<ReportWorkspaceHeaderProps> = ({
+  reportName,
+  reportDescription,
+  capabilities,
+  activeView,
+  onViewChange,
+  onExport,
+  onSendToDhis2,
+  loading,
+  hasResults = false,
+}) => {
+  return (
+    <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: '1rem' }}>
+      {/* Left: Report info */}
+      <div style={{ flex: 1, minWidth: 0 }}>
+        <h3 style={{ margin: 0, fontSize: '1rem', fontWeight: 600, color: '#161616' }}>
+          {reportName}
+        </h3>
+        {reportDescription && (
+          <p style={{ margin: '0.25rem 0 0', fontSize: '0.875rem', color: '#666' }}>
+            {reportDescription}
+          </p>
+        )}
+      </div>
+
+      {/* Center: View tabs */}
+      <div style={{ flex: '0 0 auto' }}>
+        <ReportViewTabs
+          capabilities={capabilities}
+          activeView={activeView}
+          onViewChange={onViewChange}
+          disabled={loading}
+        />
+      </div>
+
+      {/* Right: Actions - only shown when report has results */}
+      {hasResults && (
+        <ButtonSet>
+          {/* Send to DHIS2 - only shown if capability exists */}
+          {onSendToDhis2 && capabilities.sendToDhis2 && (
+            <Button
+              kind="secondary"
+              size="sm"
+              renderIcon={SendAlt}
+              onClick={onSendToDhis2}
+              disabled={loading}
+            >
+              DHIS2
+            </Button>
+          )}
+
+          {/* Export menu */}
+          <ExportMenu
+            onExport={onExport}
+            disabled={loading}
+            loading={loading}
+          />
+        </ButtonSet>
+      )}
+    </div>
+  );
+};
+
+export default ReportWorkspaceHeader;