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

package/src/components/data-visualizer/parameter-inputs/person-attribute-parameter-input.component.tsx

@@ -0,0 +1,71 @@
+/**
+ * Person Attribute Parameter Input Component
+ *
+ * Handles PERSON_ATTRIBUTE parameter inputs with ComboBox using usePersonAttributeTypes hook.
+ */
+
+import React, { useCallback } from 'react';
+import { ComboBox } from '@carbon/react';
+
+import type { LinelistParameter } from '../../../types/linelist-types';
+import { usePersonAttributeTypes } from '../../../hooks/openmrs-reference-data';
+
+type Props = {
+  parameter: LinelistParameter;
+  value: string;
+  error?: string;
+  onChange: (value: string) => void;
+};
+
+type SelectedItem = {
+  uuid?: string;
+  label: string;
+};
+
+const PersonAttributeParameterInput: React.FC<Props> = ({
+  parameter,
+  value,
+  error,
+  onChange
+}) => {
+  const config = parameter.config as any;
+  const format = config?.format;
+  const { attributeTypes } = usePersonAttributeTypes(false, format);
+
+  const items = attributeTypes.map((attrType) => ({
+    uuid: attrType.uuid,
+    label: attrType.display || attrType.name || attrType.uuid,
+  }));
+
+  const selectedItemSelected: SelectedItem | undefined = items.find((item) => item.uuid === value);
+
+  const handleChange = useCallback(({ selectedItem }: { selectedItem?: SelectedItem }) => {
+    if (selectedItem) {
+      onChange(selectedItem.uuid || '');
+    } else {
+      onChange('');
+    }
+  }, [onChange]);
+
+  return (
+    <div>
+      <label htmlFor={`report-param-${parameter.name}`} className="cds--label">
+        {parameter.label}
+      </label>
+      <ComboBox
+        id={`report-param-${parameter.name}`}
+        titleText={parameter.label}
+        items={items}
+        itemToString={(item: any) => item?.label || ''}
+        initialSelectedItem={selectedItemSelected}
+        onChange={handleChange}
+        invalid={!!error}
+        invalidText={error}
+        placeholder={parameter.label}
+        size="sm"
+      />
+    </div>
+  );
+};
+
+export default PersonAttributeParameterInput;

package/src/components/data-visualizer/parameter-inputs/text-parameter-input.component.tsx

@@ -0,0 +1,52 @@
+/**
+ * Text Parameter Input Component
+ *
+ * Handles TEXT parameter inputs with TextInput.
+ */
+
+import React, { useCallback } from 'react';
+import { TextInput } from '@carbon/react';
+
+import type { LinelistParameter } from '../../../types/linelist-types';
+
+type Props = {
+  parameter: LinelistParameter;
+  value: string;
+  error?: string;
+  onChange: (value: string) => void;
+  onError?: (error: string | undefined) => void;
+};
+
+const TextParameterInput: React.FC<Props> = ({ parameter, value, error, onChange, onError }) => {
+  const config = parameter.config as any;
+
+  const handleChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    const newValue = e.target.value;
+    // Validate min/max length if configured
+    if (config?.minLength && newValue.length < config.minLength) {
+      onError?.(`Minimum ${config.minLength} characters required`);
+    } else if (config?.maxLength && newValue.length > config.maxLength) {
+      onError?.(`Maximum ${config.maxLength} characters allowed`);
+    } else if (config?.pattern && !new RegExp(config.pattern).test(newValue)) {
+      onError?.('Invalid format');
+    } else {
+      onError?.(undefined);
+      onChange(newValue);
+    }
+  }, [config, onChange, onError]);
+
+  return (
+    <TextInput
+      id={`report-param-${parameter.name}`}
+      labelText={parameter.label}
+      value={value}
+      onChange={handleChange}
+      invalid={!!error}
+      invalidText={error}
+      placeholder={parameter.label}
+      size="sm"
+    />
+  );
+};
+
+export default TextParameterInput;

package/src/components/data-visualizer/report-parameter-modal.component.tsx

@@ -0,0 +1,383 @@
+/**
+ * Report Parameter Modal
+ *
+ * Allows users to set parameter values before running a report from the report library.
+ * 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,
+  ModalHeader,
+  ModalBody,
+  ModalFooter,
+  Button,
+  ButtonSet,
+  InlineNotification,
+  Stack,
+  Select,
+  SelectItem,
+  RadioButton,
+  RadioButtonGroup,
+  InlineLoading,
+} 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
+import DateParameterInput from './parameter-inputs/date-parameter-input.component';
+import NumberParameterInput from './parameter-inputs/number-parameter-input.component';
+import BooleanParameterInput from './parameter-inputs/boolean-parameter-input.component';
+import ListParameterInput from './parameter-inputs/list-parameter-input.component';
+import LocationParameterInput from './parameter-inputs/location-parameter-input.component';
+import ConceptParameterInput from './parameter-inputs/concept-parameter-input.component';
+import IdentifierTypeParameterInput from './parameter-inputs/identifier-type-parameter-input.component';
+import PersonAttributeParameterInput from './parameter-inputs/person-attribute-parameter-input.component';
+import TextParameterInput from './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 ReportParameterModal: 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
+  useEffect(() => {
+    console.log('=== ReportParameterModal: initializing values ===');
+    console.log('Received parameters:', parameters);
+    console.log('Received initialValues:', initialValues);
+
+    const initialValuesFromParams: Record<string, any> = {};
+
+    for (const param of parameters) {
+      console.log(`  Processing param: ${param.name}, type: ${param.type}`);
+      if (param.config) {
+        console.log(`    config:`, param.config);
+      }
+      // Use explicit value if provided, otherwise use default
+      const paramValue = initialValues[param.name] || param.defaultValue || '';
+      initialValuesFromParams[param.name] = paramValue;
+    }
+
+    setValues(initialValuesFromParams);
+  }, [parameters, initialValues]);
+
+  // Reset errors 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="Report Parameters"
+      modalLabel="Data Visualizer"
+      preventCloseOnClickOutside
+      size="sm"
+    >
+      <ModalHeader />
+      <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>
+      <ModalFooter>
+        <ButtonSet>
+          <Button kind="secondary" onClick={onClose} disabled={loading}>
+            Cancel
+          </Button>
+          <Button kind="primary" onClick={handleRun} disabled={loading}>
+            {loading ? (
+              <>
+                Running...
+                <InlineLoading style={{ marginLeft: '8px' }} />
+              </>
+            ) : (
+              'Run Report'
+            )}
+          </Button>
+        </ButtonSet>
+      </ModalFooter>
+    </Modal>
+  );
+};
+
+export default ReportParameterModal;

package/src/components/data-visualizer/types.ts

@@ -0,0 +1,206 @@
+export const spaBasePath = `${window.spaBase}/home`;
+
+export enum SearchTypes {
+  BASIC = "basic",
+  ADVANCED = "advanced",
+  SEARCH_RESULTS = "search_results",
+  SCHEDULED_VISITS = "scheduled-visits",
+  VISIT_FORM = "visit_form",
+  QUEUE_SERVICE_FORM = "queue_service_form",
+  QUEUE_ROOM_FORM = "queue_room_form",
+}
+
+// Data Visualizer Types
+export type Item = {
+  id: string;
+  label: string;
+};
+
+export type ReportProps = {
+  categoryName: string;
+  reports: Array<Item>;
+};
+
+export type Indicator = {
+  id: string;
+  label: string;
+  type?: string;
+  modifier?: number;
+  showModifierPanel?: boolean;
+  extras?: Array<string>;
+  attributes?: Array<IndicatorItem>;
+};
+
+export type IndicatorItem = {
+  id: string;
+  label: string;
+  type?: string;
+};
+
+export type ReportParamItem = {
+  label: string;
+  type?: string;
+  expression: string;
+  modifier?: number;
+  extras?: Array<string>;
+  showModifierPanel?: boolean;
+};
+
+export type savedReport = {
+  id: string;
+  label: string;
+  description: string;
+  type: string;
+  columns: string;
+  rows: string;
+  aggregator: string;
+  report_request_object: string;
+};
+
+export type ReportCategory = "facility" | "national" | "cqi" | "donor" | "integration";
+
+export type RenderType = "list" | "json" | "html";
+export type ReportType = "fixed" | "dynamic";
+
+export type ReportingPeriod = "today" | "week" | "month" | "quarter" | "lastQuarter";
+
+export type CQIReportItem = {
+  ART_No: string;
+  nationality: string;
+  gender: string;
+  date_of_birth: string;
+  age: string;
+  age_group: string;
+  pos_status_children: string;
+  vl_coverage: string;
+  hepatitis_b_status: string;
+  ovc_screening: string;
+  nutrition_support_flag: string;
+  cacx_screening: string;
+  sample_type: string;
+  tb_status: string;
+  side_effects: string;
+  family_planning_status: string;
+  repeat_vl_collection_date: string;
+  prescription_duration: string;
+  syphilis_flag: string;
+  next_vl_date: string;
+  current_vl: string;
+  HIVDR_tat: string;
+  known_status_spouse: string;
+  art_start_date: string;
+  syphillis_status: string;
+  HIVDR_sampling: string;
+  tb_lam_crag_results: string;
+  switched: string;
+  hep_b_flag: string;
+  child_Tested_flag: string;
+  index_children_tested: string;
+  index_spouse_tested: string;
+  iacs_no: string;
+  next_appointment_date: string;
+  po_status_spouse: string;
+  date_dr_results_received: string;
+  iac: string;
+  family_planning_flag: string;
+  current_arv_regimen_start_date: string;
+  repeat_vl_results_after_iacs: string;
+  tpt_flag: string;
+  pss: string;
+  current_regimen: string;
+  advanced_disease: string;
+  cacx_flag: string;
+  last_visit_date: string;
+  adv_disease_flag: string;
+  special_category: string;
+  regimen_line: string;
+  decision: string;
+  tpt_status: string;
+  vl_tat: string;
+  adherence: string;
+  vl_bleeding: string;
+  vl_result_sample_date: string;
+  hivdrt_results: string;
+  nutrition_status: string;
+  vl_profiling: string;
+  new_vl_sample_date: string;
+  spouses_Tested_flag: string;
+  followup: string;
+  mmd_flag: string;
+  marital_status: string;
+  duration_on_art: string;
+  ovc_flag: string;
+  client_status: string;
+  who_stage: string;
+  vl_updated: string;
+  known_status_children: string;
+};
+
+export interface WaitTime {
+  metric: string;
+  averageWaitTime: string;
+}
+
+export interface RegionsResponse {
+  message: string;
+  status: boolean;
+  data: Data;
+}
+
+export interface Data {
+  resourceType: string;
+  id: string;
+  meta: Meta;
+  type: string;
+  total: number;
+  link: Link[];
+  entry: Entry[];
+}
+
+export interface Meta {
+  lastUpdated: string;
+}
+
+export interface Link {
+  relation: string;
+  url: string;
+}
+
+export interface Entry {
+  fullUrl: string;
+  resource: Resource;
+  search: Search;
+}
+
+export interface Resource {
+  resourceType: string;
+  id: string;
+  meta: Meta2;
+  extension: Extension[];
+  status: string;
+  name: string;
+  type: Type[];
+}
+
+export interface Meta2 {
+  versionId: string;
+  lastUpdated: string;
+  source: string;
+}
+
+export interface Extension {
+  url: string;
+  valueString: string;
+}
+
+export interface Type {
+  coding: Coding[];
+}
+
+export interface Coding {
+  code: string;
+}
+
+export interface Search {
+  mode: string;
+}