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

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

@@ -0,0 +1,110 @@
+/**
+ * Date Parameter Input Component
+ *
+ * Handles DATE and DATETIME parameter inputs with DatePicker.
+ */
+
+import React, { useState, useEffect, useMemo, useRef } from 'react';
+import { DatePicker, DatePickerInput } from '@carbon/react';
+
+import type { LinelistParameter } from '../../../types/linelist-types';
+
+type Props = {
+  parameter: LinelistParameter;
+  value: string;
+  error?: string;
+  onChange: (value: string) => void;
+};
+
+const DateParameterInput: React.FC<Props> = ({ parameter, value, error, onChange }) => {
+  const config = parameter.config as any;
+  const [internalValue, setInternalValue] = useState<Date | null>(null);
+  const isUpdatingFromRef = useRef(false);
+
+  // Parse the date value for the DatePicker - memoized to prevent re-render loops
+  const parsedDate = useMemo((): Date | null => {
+    if (!value) return null;
+    // Parse the date string (YYYY-MM-DD format) as local time, not UTC
+    const parts = value.split('-');
+    if (parts.length === 3) {
+      const [year, month, day] = parts.map(Number);
+      if (year && month !== undefined && day !== undefined && !isNaN(year) && !isNaN(month) && !isNaN(day)) {
+        const date = new Date(year, month - 1, day);
+        if (!isNaN(date.getTime())) {
+          return date;
+        }
+      }
+    }
+    return null;
+  }, [value]);
+
+  // Sync internal value with prop value when it changes from outside
+  useEffect(() => {
+    console.log('DateParameterInput useEffect - syncing from parent:', {
+      parameterName: parameter.name,
+      parsedDate,
+      internalValue,
+      isUpdatingFromRef: isUpdatingFromRef.current,
+      value
+    });
+
+    if (!isUpdatingFromRef.current) {
+      setInternalValue(parsedDate);
+    }
+    isUpdatingFromRef.current = false;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [parsedDate]); // Only sync when parsedDate changes
+
+  const handleDateChange = (date: Date | Array<Date>) => {
+    console.log('DateParameterInput handleDateChange called:', {
+      date,
+      parameterName: parameter.name,
+      currentValue: value,
+      internalValue,
+      isUpdatingFromRef: isUpdatingFromRef.current
+    });
+
+    if (!date) {
+      isUpdatingFromRef.current = true;
+      setInternalValue(null);
+      onChange('');
+      return;
+    }
+
+    const dateObj = Array.isArray(date) ? date[0] : date;
+    if (dateObj && !isNaN(dateObj.getTime())) {
+      isUpdatingFromRef.current = true;
+      setInternalValue(dateObj);
+
+      // Format as YYYY-MM-DD using local time (not UTC)
+      const year = dateObj.getFullYear();
+      const month = String(dateObj.getMonth() + 1).padStart(2, '0');
+      const day = String(dateObj.getDate()).padStart(2, '0');
+      const dateStr = `${year}-${month}-${day}`;
+      console.log('Calling onChange with:', dateStr);
+      onChange(dateStr);
+    }
+  };
+
+  return (
+    <DatePicker
+      dateFormat="Y-m-d"
+      datePickerType="single"
+      minDate={config?.minDate ? new Date(config.minDate) : undefined}
+      maxDate={config?.maxDate ? new Date(config.maxDate) : undefined}
+      value={internalValue}
+      onChange={handleDateChange}
+    >
+      <DatePickerInput
+        id={`${parameter.name}-input`}
+        labelText={parameter.label}
+        placeholder={parameter.label}
+        invalid={!!error}
+        invalidText={error}
+        size="sm"
+      />
+    </DatePicker>
+  );
+};
+
+export default DateParameterInput;

package/src/components/data-visualizer/parameter-inputs/date-range-input.component.scss

@@ -0,0 +1,47 @@
+/**
+ * Date Range Input Component Styles
+ */
+
+.date-range-input {
+  width: 100%;
+
+  .cds--label {
+    font-size: 0.875rem;
+    font-weight: 400;
+    line-height: 1.5;
+    margin-bottom: 0.5rem;
+    color: var(--cds-text-01);
+  }
+
+  .cds--radio-button-group {
+    margin-bottom: 1rem;
+  }
+
+  .cds--radio-button-wrapper {
+    margin-right: 1rem;
+  }
+
+  .cds--date-picker,
+  .cds--select {
+    width: 100%;
+  }
+
+  .resolved-date-display {
+    font-size: 0.75rem;
+    color: var(--cds-text-02);
+    margin-top: 0.25rem;
+    font-style: italic;
+  }
+
+  .cds--inline-notification {
+    margin-top: 0.5rem;
+    min-width: 100%;
+  }
+
+  // Validation state
+  &.invalid {
+    .cds--label {
+      color: var(--cds-text-01);
+    }
+  }
+}

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

@@ -0,0 +1,228 @@
+/**
+ * Date Range Input Component
+ *
+ * Allows users to select a date using either:
+ * - FIXED mode: A specific date from a date picker
+ * - RELATIVE mode: A predefined relative period (Today, This Month, etc.)
+ */
+
+import React, { useEffect, useState } from 'react';
+import {
+  DatePicker,
+  DatePickerInput,
+  Select,
+  SelectItem,
+  RadioButtonGroup,
+  RadioButton,
+  InlineNotification,
+} from '@carbon/react';
+
+import type { RelativePeriod } from '../../../utils/parameter-resolution';
+import {
+  RELATIVE_PERIOD_OPTIONS,
+  formatDate,
+  formatDisplayDate,
+  parseDate,
+  resolveRelativePeriod,
+} from '../../../utils/parameter-resolution';
+import './date-range-input.component.scss';
+
+export type DateRangeValue = {
+  mode: 'FIXED' | 'RELATIVE';
+  fixedDate?: string;        // YYYY-MM-DD format for FIXED mode
+  relativePeriod?: RelativePeriod;  // Period identifier for RELATIVE mode
+};
+
+type Props = {
+  id?: string;
+  label: string;
+  value?: DateRangeValue;
+  onChange: (value: DateRangeValue) => void;
+  required?: boolean;
+  disabled?: boolean;
+  minDate?: string;  // Minimum allowed date (YYYY-MM-DD)
+  maxDate?: string;  // Maximum allowed date (YYYY-MM-DD)
+  includeTime?: boolean;  // Whether to include time component
+  invalid?: boolean;
+  invalidText?: string;
+  hideLabel?: boolean;
+  showResolvedDate?: boolean;  // Show the resolved date for relative periods
+};
+
+const DateRangeInput: React.FC<Props> = ({
+  id,
+  label,
+  value,
+  onChange,
+  required = false,
+  disabled = false,
+  minDate,
+  maxDate,
+  includeTime = false,
+  invalid = false,
+  invalidText,
+  hideLabel = false,
+  showResolvedDate = true,
+}) => {
+  // Internal state for mode toggle
+  const [mode, setMode] = useState<'FIXED' | 'RELATIVE'>(
+    value?.mode || 'FIXED'
+  );
+
+  // Sync internal mode with value changes
+  useEffect(() => {
+    if (value?.mode) {
+      setMode(value.mode);
+    }
+  }, [value?.mode]);
+
+  const handleModeChange = (newMode: 'FIXED' | 'RELATIVE') => {
+    setMode(newMode);
+
+    // Clear the value when switching modes
+    if (newMode === 'FIXED') {
+      onChange({ mode: 'FIXED', fixedDate: undefined });
+    } else {
+      onChange({ mode: 'RELATIVE', relativePeriod: undefined });
+    }
+  };
+
+  const handleFixedDateChange = (date: Array<Date>) => {
+    if (date && date.length > 0) {
+      const dateValue = date[0];
+      const formattedDate = formatDate(dateValue);
+      onChange({ mode: 'FIXED', fixedDate: formattedDate });
+    }
+  };
+
+  const handleRelativePeriodChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    const period = e.target.value as RelativePeriod;
+    onChange({ mode: 'RELATIVE', relativePeriod: period });
+  };
+
+  // Calculate the resolved date for relative periods (for display)
+  const getResolvedDateDisplay = (): string => {
+    if (value?.mode === 'RELATIVE' && value.relativePeriod) {
+      try {
+        const { start, end } = resolveRelativePeriod(value.relativePeriod);
+        const startDate = formatDisplayDate(start);
+        const endDate = formatDisplayDate(end);
+
+        if (startDate === endDate) {
+          return `(${startDate})`;
+        }
+        return `(${startDate} - ${endDate})`;
+      } catch {
+        return '(Invalid period)';
+      }
+    }
+    return '';
+  };
+
+  // Parse the fixed date for the DatePicker
+  const getFixedDateValue = (): Date | null => {
+    if (value?.mode === 'FIXED' && value.fixedDate) {
+      return parseDate(value.fixedDate);
+    }
+    return null;
+  };
+
+  const requiredText = required ? ' *' : '';
+  const resolvedDateDisplay = getResolvedDateDisplay();
+
+  return (
+    <div className="date-range-input">
+      {/* Label */}
+      {!hideLabel && (
+        <label className="cds--label">
+          {label}{requiredText}
+        </label>
+      )}
+
+      {/* Mode Toggle */}
+      <RadioButtonGroup
+        legendText=""
+        name={`${id}-mode`}
+        valueSelected={mode}
+        onChange={(newMode) => handleModeChange(newMode as 'FIXED' | 'RELATIVE')}
+        disabled={disabled}
+      >
+        <RadioButton
+          id={`${id}-fixed`}
+          labelText="Specific date"
+          value="FIXED"
+        />
+        <RadioButton
+          id={`${id}-relative`}
+          labelText="Relative period"
+          value="RELATIVE"
+        />
+      </RadioButtonGroup>
+
+      {/* Fixed Date Picker */}
+      {mode === 'FIXED' && (
+        <DatePicker
+          datePickerType="single"
+          value={getFixedDateValue()}
+          onChange={handleFixedDateChange}
+          minDate={minDate ? parseDate(minDate) || undefined : undefined}
+          maxDate={maxDate ? parseDate(maxDate) || undefined : undefined}
+        >
+          <DatePickerInput
+            id={`${id}-date-input`}
+            placeholder={includeTime ? 'dd/mm/yyyy hh:mm' : 'dd/mm/yyyy'}
+            labelText=""
+            invalid={invalid}
+            invalidText={invalidText}
+            disabled={disabled}
+          />
+        </DatePicker>
+      )}
+
+      {/* Relative Period Selector */}
+      {mode === 'RELATIVE' && (
+        <Select
+          id={`${id}-period-select`}
+          value={value?.relativePeriod || ''}
+          onChange={handleRelativePeriodChange}
+          invalid={invalid}
+          invalidText={invalidText}
+          disabled={disabled}
+        >
+          <SelectItem value="" text="Select period" />
+          {RELATIVE_PERIOD_OPTIONS.map((option) => (
+            <SelectItem
+              key={option.value}
+              value={option.value}
+              text={option.label}
+            />
+          ))}
+        </Select>
+      )}
+
+      {/* Resolved Date Display (for relative periods) */}
+      {showResolvedDate && mode === 'RELATIVE' && resolvedDateDisplay && (
+        <div style={{
+          fontSize: '12px',
+          color: '#666',
+          marginTop: '4px',
+          fontStyle: 'italic'
+        }}>
+          Resolves to: {resolvedDateDisplay}
+        </div>
+      )}
+
+      {/* Validation Notification */}
+      {invalid && invalidText && (
+        <InlineNotification
+          kind="error"
+          title="Invalid date"
+          subtitle={invalidText}
+          lowContrast
+        />
+      )}
+    </div>
+  );
+};
+
+export default DateRangeInput;

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

@@ -0,0 +1,69 @@
+/**
+ * Identifier Type Parameter Input Component
+ *
+ * Handles IDENTIFIER_TYPE parameter inputs with ComboBox using usePatientIdentifierTypes hook.
+ */
+
+import React, { useCallback } from 'react';
+import { ComboBox } from '@carbon/react';
+
+import type { LinelistParameter } from '../../../types/linelist-types';
+import { usePatientIdentifierTypes } from '../../../hooks/openmrs-reference-data';
+
+type Props = {
+  parameter: LinelistParameter;
+  value: string;
+  error?: string;
+  onChange: (value: string) => void;
+};
+
+type SelectedItem = {
+  uuid?: string;
+  label: string;
+};
+
+const IdentifierTypeParameterInput: React.FC<Props> = ({
+  parameter,
+  value,
+  error,
+  onChange
+}) => {
+  const { identifierTypes } = usePatientIdentifierTypes(true);
+
+  const items = identifierTypes.map((idType) => ({
+    uuid: idType.uuid,
+    label: idType.display || idType.name || idType.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 IdentifierTypeParameterInput;

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

@@ -0,0 +1,73 @@
+/**
+ * List Parameter Input Component
+ *
+ * Handles LIST parameter inputs with Select or ComboBox.
+ */
+
+import React from 'react';
+import { Select, SelectItem, ComboBox } from '@carbon/react';
+
+import type { LinelistParameter } from '../../../types/linelist-types';
+
+type Props = {
+  parameter: LinelistParameter;
+  value: string;
+  error?: string;
+  onChange: (value: string) => void;
+};
+
+const ListParameterInput: React.FC<Props> = ({ parameter, value, error, onChange }) => {
+  const config = parameter.config as any;
+  const options = config?.options || [];
+
+  if (options.length <= 5) {
+    // Use Select for small lists
+    return (
+      <Select
+        id={`report-param-${parameter.name}`}
+        labelText={parameter.label}
+        value={value}
+        onChange={(e) => {
+          const selectedValue = (e.target as HTMLSelectElement).value;
+          onChange(selectedValue);
+        }}
+        invalid={!!error}
+        invalidText={error}
+        size="sm"
+      >
+        <SelectItem value="" text={`Select ${parameter.label}`} />
+        {options.map((opt: any) => (
+          <SelectItem key={opt.value} value={opt.value} text={opt.label} />
+        ))}
+      </Select>
+    );
+  }
+
+  // Use ComboBox for larger lists
+  return (
+    <div>
+      <label htmlFor={`report-param-${parameter.name}`} className="cds--label">
+        {parameter.label}
+      </label>
+      <ComboBox
+        id={`report-param-${parameter.name}`}
+        titleText={parameter.label}
+        items={options}
+        itemToString={(item: any) => item?.label || ''}
+        initialSelectedItem={options.find((opt: any) => opt.value === value)}
+        onChange={({ selectedItem }) => {
+          if (selectedItem) {
+            onChange((selectedItem as any).value);
+          } else {
+            onChange('');
+          }
+        }}
+        invalid={!!error}
+        invalidText={error}
+        size="sm"
+      />
+    </div>
+  );
+};
+
+export default ListParameterInput;

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

@@ -0,0 +1,81 @@
+/**
+ * Location Parameter Input Component
+ *
+ * Handles LOCATION parameter inputs with ComboBox using useLocations hook.
+ */
+
+import React, { useCallback } from 'react';
+import { ComboBox } from '@carbon/react';
+
+import type { LinelistParameter } from '../../../types/linelist-types';
+import { useLocations } from '../../../hooks/openmrs-reference-data';
+
+type Props = {
+  parameter: LinelistParameter;
+  value: string;
+  error?: string;
+  onChange: (value: string) => void;
+  // searchQuery: string; // TODO: Implement location search filtering
+  onSearchQueryChange?: (query: string) => void;
+};
+
+type SelectedItem = {
+  uuid?: string;
+  label: string;
+};
+
+const LocationParameterInput: React.FC<Props> = ({
+  parameter,
+  value,
+  error,
+  onChange,
+  onSearchQueryChange
+}) => {
+  const config = parameter.config as any;
+  const tagUuid = config?.tagUuid;
+
+  // Load all locations
+  const { locations } = useLocations(tagUuid);
+
+  const items = locations.map((loc) => ({
+    uuid: loc.uuid,
+    label: loc.display || loc.name,
+  }));
+
+  const selectedItemSelected: SelectedItem | undefined = items.find((item) => item.uuid === value);
+
+  const handleInputChange = useCallback((input: string) => {
+    onSearchQueryChange?.(input);
+  }, [onSearchQueryChange]);
+
+  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}
+        onInputChange={handleInputChange}
+        onChange={handleChange}
+        invalid={!!error}
+        invalidText={error}
+        placeholder={parameter.label}
+        size="sm"
+      />
+    </div>
+  );
+};
+
+export default LocationParameterInput;

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

@@ -0,0 +1,40 @@
+/**
+ * Number Parameter Input Component
+ *
+ * Handles NUMBER parameter inputs with NumberInput.
+ */
+
+import React from 'react';
+import { NumberInput } from '@carbon/react';
+
+import type { LinelistParameter } from '../../../types/linelist-types';
+
+type Props = {
+  parameter: LinelistParameter;
+  value: string;
+  error?: string;
+  onChange: (value: string) => void;
+};
+
+const NumberParameterInput: React.FC<Props> = ({ parameter, value, error, onChange }) => {
+  const config = parameter.config as any;
+
+  return (
+    <NumberInput
+      id={`report-param-${parameter.name}`}
+      label={parameter.label}
+      value={value}
+      onChange={(event) => {
+        onChange((event.target as HTMLInputElement).value);
+      }}
+      invalid={!!error}
+      invalidText={error}
+      min={config?.min}
+      max={config?.max}
+      step={config?.step}
+      size="sm"
+    />
+  );
+};
+
+export default NumberParameterInput;