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

package/src/components/import-export/import-package-modal.component.tsx

@@ -0,0 +1,401 @@
+import React from 'react';
+import {
+  InlineNotification,
+  Modal,
+  ModalBody,
+  ProgressBar,
+  Tag,
+  TextInput,
+  Toggle,
+  RadioButtonGroup,
+  RadioButton,
+} from '@carbon/react';
+import { Checkmark, Error as ErrorIcon, Package as PackageIcon, Information } from '@carbon/react/icons';
+
+import { importReports, type ImportRequest, type ImportResult } from '../../resources/report-import-export/import-export-api';
+
+import styles from './import-export.styles.scss';
+
+interface ImportPackageModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onSuccess?: () => void;
+  preselectedPath?: string | null;
+}
+
+type ProgressStep = {
+  key: string;
+  label: string;
+  status: 'pending' | 'in-progress' | 'complete' | 'error';
+};
+
+const ARTIFACTS_IMPORT_PROGRESS_STEPS: ProgressStep[] = [
+  { key: 'validate', label: 'Validating package...', status: 'pending' },
+  { key: 'categories', label: 'Report Categories...', status: 'pending' },
+  { key: 'ageCategories', label: 'Age Categories...', status: 'pending' },
+  { key: 'ageGroups', label: 'Age Groups...', status: 'pending' },
+  { key: 'themes', label: 'Data Themes...', status: 'pending' },
+  { key: 'indicators', label: 'Indicators...', status: 'pending' },
+  { key: 'sections', label: 'Sections...', status: 'pending' },
+  { key: 'library', label: 'Report Library...', status: 'pending' },
+  { key: 'complete', label: 'Complete!', status: 'pending' },
+];
+
+const COMPILED_REPORTS_IMPORT_PROGRESS_STEPS: ProgressStep[] = [
+  { key: 'validate', label: 'Validating package...', status: 'pending' },
+  { key: 'reports', label: 'Compiled Reports...', status: 'pending' },
+  { key: 'complete', label: 'Complete!', status: 'pending' },
+];
+
+type ImportScope = 'compiledReports' | 'artifacts';
+
+const ImportPackageModal: React.FC<ImportPackageModalProps> = ({ isOpen, onClose, onSuccess}) => {
+
+  // Import state
+  const [isImporting, setIsImporting] = React.useState(false);
+  const [currentStep, setCurrentStep] = React.useState(0);
+  const [importScope, setImportScope] = React.useState<ImportScope>('artifacts');
+  const [progressSteps, setProgressSteps] = React.useState<ProgressStep[]>(ARTIFACTS_IMPORT_PROGRESS_STEPS);
+  const [importResult, setImportResult] = React.useState<ImportResult | null>(null);
+  const [error, setError] = React.useState<string | null>(null);
+
+  // Form state
+  const [useCustomPath, setUseCustomPath] = React.useState(false);
+  const [customPath, setCustomPath] = React.useState('');
+  const [pathError, setPathError] = React.useState<string | null>(null);
+
+  // Reset state when modal opens
+  React.useEffect(() => {
+    if (isOpen) {
+      resetState();
+    }
+  }, [isOpen]);
+
+  const resetState = () => {
+    setIsImporting(false);
+    setCurrentStep(0);
+    setImportScope('artifacts');
+    setProgressSteps(ARTIFACTS_IMPORT_PROGRESS_STEPS);
+    setImportResult(null);
+    setError(null);
+    setUseCustomPath(false);
+    setCustomPath('');
+    setPathError(null);
+  };
+
+  // Update progress steps when import scope changes
+  React.useEffect(() => {
+    if (importScope === 'artifacts') {
+      setProgressSteps(ARTIFACTS_IMPORT_PROGRESS_STEPS);
+    } else {
+      setProgressSteps(COMPILED_REPORTS_IMPORT_PROGRESS_STEPS);
+    }
+  }, [importScope]);
+
+  const validateCustomPath = (path: string): string | null => {
+    if (!path || path.trim() === '') {
+      return 'Custom path cannot be empty when enabled';
+    }
+    return null;
+  };
+
+  const startImport = async () => {
+    // Validate custom path if enabled
+    if (useCustomPath) {
+      const validationError = validateCustomPath(customPath);
+      if (validationError) {
+        setPathError(validationError);
+        return;
+      }
+    }
+
+    setIsImporting(true);
+    setError(null);
+    setPathError(null);
+
+    try {
+      // Simulate progress steps
+      for (let i = 0; i < progressSteps.length - 1; i++) {
+        await updateProgressStep(i, 'in-progress');
+        await sleep(400);
+        await updateProgressStep(i, 'complete');
+      }
+
+      // Call the actual import API with type-based routing
+      const request: ImportRequest = {
+        type: importScope,
+        ...(useCustomPath ? { sourceDirectory: customPath.trim() } : {}),
+      };
+
+      const result = await importReports(request);
+      await updateProgressStep(progressSteps.length - 1, 'complete');
+      setImportResult(result);
+
+      if (result.success) {
+        onSuccess?.();
+      } else {
+        setError(result.errorMessage || 'Initialization failed. Please try again.');
+      }
+    } catch (err: any) {
+      setError(err.message || 'An unexpected error occurred during initialization.');
+      setProgressSteps((steps) =>
+        steps.map((step, i) => (i === currentStep ? { ...step, status: 'error' } : step)),
+      );
+    } finally {
+      setIsImporting(false);
+    }
+  };
+
+  const updateProgressStep = async (index: number, status: ProgressStep['status']) => {
+    if (index >= 0 && index < progressSteps.length) {
+      setCurrentStep(index + 1);
+      setProgressSteps((steps) =>
+        steps.map((step, i) => (i === index ? { ...step, status } : step)),
+      );
+    }
+    await sleep(100);
+  };
+
+  const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
+
+  const getProgressPercentage = () => {
+    return Math.round((currentStep / progressSteps.length) * 100);
+  };
+
+  const isValid = !useCustomPath || (useCustomPath && !pathError && customPath.trim() !== '');
+  const isFormStage = !isImporting && !importResult;
+
+  return (
+    <Modal
+      open={isOpen}
+      onRequestClose={onClose}
+      modalHeading="Initialize Report Builder"
+      modalLabel="Report Builder"
+      primaryButtonText={isFormStage ? 'Initialize' : importResult?.success ? 'Done' : 'Close'}
+      primaryButtonDisabled={isFormStage && (!isValid || isImporting)}
+      onRequestSubmit={isFormStage ? startImport : onClose}
+      secondaryButtonText={isFormStage ? 'Cancel' : undefined}
+      size="md"
+    >
+      <ModalBody>
+        {!isImporting && !importResult && (
+          <div className={styles.formContainer}>
+            {/* Import Scope Selection */}
+            <div className={styles.formField}>
+              <label className={styles.label}>Import Scope</label>
+              <RadioButtonGroup
+                name="importScope"
+                valueSelected={importScope}
+                onChange={(value) => setImportScope(value as ImportScope)}
+                orientation="vertical"
+              >
+                <RadioButton
+                  value="artifacts"
+                  id="scope-artifacts"
+                  labelText="Report Builder Artifacts (Categories, Indicators, Themes, Sections, etc.)"
+                  disabled={false}
+                />
+                <RadioButton
+                  value="compiledReports"
+                  id="scope-compiled-reports"
+                  labelText="Compiled Reports"
+                  disabled={false}
+                />
+              </RadioButtonGroup>
+            </div>
+
+            {/* Info Box */}
+            <div className={styles.infoBox}>
+              <Information size={20} className={styles.infoIcon} />
+              <div>
+                <p style={{ margin: '0 0 0.5rem 0', fontSize: '0.875rem', fontWeight: 500 }}>
+                  Quick Initialization
+                </p>
+                <p style={{ margin: 0, fontSize: '0.875rem', color: 'var(--cds-text-02)' }}>
+                  {importScope === 'artifacts'
+                    ? 'Loads all Report Builder artifacts (categories, indicators, themes, sections, library, etc.) from the default OpenMRS configuration directory.'
+                    : 'Loads all compiled reports from the default OpenMRS configuration directory.'}
+                </p>
+              </div>
+            </div>
+
+            {/* What will be loaded */}
+            <div className={styles.loadedItemsBox}>
+              <h5 style={{ fontSize: '0.875rem', fontWeight: 500, margin: '0 0 0.75rem 0' }}>
+                What will be loaded:
+              </h5>
+              {importScope === 'artifacts' ? (
+                <div className={styles.itemsGrid}>
+                  <span className={styles.itemTag}>Report Categories</span>
+                  <span className={styles.itemTag}>Age Categories & Groups</span>
+                  <span className={styles.itemTag}>Data Themes</span>
+                  <span className={styles.itemTag}>Indicators</span>
+                  <span className={styles.itemTag}>Sections</span>
+                  <span className={styles.itemTag}>Report Library</span>
+                  <span className={styles.itemTag}>ETL Sources & Tasks</span>
+                </div>
+              ) : (
+                <div className={styles.itemsGrid}>
+                  <span className={styles.itemTag}>Compiled Reports</span>
+                </div>
+              )}
+            </div>
+
+            {/* Advanced Options */}
+            <div className={styles.advancedSection}>
+              <Toggle
+                id="use-custom-path-toggle"
+                labelText="Use custom directory path"
+                toggled={useCustomPath}
+                onChange={(event: any) => {
+                  setUseCustomPath(event.target.checked);
+                  setPathError(null);
+                }}
+                labelA="Default"
+                labelB="Custom"
+              />
+            </div>
+
+            {useCustomPath && (
+              <div className={styles.customPathSection}>
+                <TextInput
+                  id="custom-path-input"
+                  labelText="Custom directory path"
+                  placeholder="/path/to/distribution/package"
+                  value={customPath}
+                  onChange={(event) => {
+                    setCustomPath(event.target.value);
+                    if (pathError) {
+                      setPathError(validateCustomPath(event.target.value));
+                    }
+                  }}
+                  invalid={!!pathError}
+                  invalidText={pathError || ''}
+                />
+                <p className={styles.hintText}>
+                  Enter the full path to the directory containing the exported report package.
+                </p>
+              </div>
+            )}
+
+            {error && (
+              <InlineNotification
+                kind="error"
+                title="Error"
+                subtitle={error}
+                hideCloseButton
+                lowContrast
+                style={{ marginTop: '1rem' }}
+              />
+            )}
+          </div>
+        )}
+
+        {/* Progress View */}
+        {isImporting && (
+          <div className={styles.progressContainer}>
+            <div className={styles.progressInfo}>
+              <h4>Initializing Report Builder...</h4>
+              <p style={{ fontSize: '0.875rem', color: 'var(--cds-text-02)' }}>
+                {importScope === 'artifacts'
+                  ? 'Loading and configuring Report Builder artifacts'
+                  : 'Loading and configuring compiled reports'} from {useCustomPath ? 'custom directory' : 'default location'}.
+              </p>
+            </div>
+
+            <ProgressBar
+              value={getProgressPercentage()}
+              label={progressSteps[currentStep]?.label || 'Initializing...'}
+              className={styles.progressBar}
+            />
+
+            <div className={styles.progressSteps} style={{ maxHeight: '200px' }}>
+              {progressSteps.map((step) => (
+                <div key={step.key} className={styles.progressStep}>
+                  <span className={styles.stepIcon}>
+                    {step.status === 'complete' && <Checkmark size={16} className={styles.success} />}
+                    {step.status === 'error' && <ErrorIcon size={16} className={styles.error} />}
+                    {step.status === 'in-progress' && <PackageIcon size={16} className={styles.inProgress} />}
+                  </span>
+                  <span
+                    className={`${styles.stepLabel} ${
+                      step.status === 'complete' ? styles.complete :
+                      step.status === 'error' ? styles.error :
+                      step.status === 'in-progress' ? styles.inProgress : ''
+                    }`}
+                  >
+                    {step.label}
+                  </span>
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {/* Success View */}
+        {importResult && importResult.success && (
+          <div className={styles.successContainer}>
+            <div className={styles.successHeader}>
+              <Checkmark size={32} className={styles.successIcon} />
+              <h4>Initialization completed</h4>
+            </div>
+
+            <div className={styles.resultInfo}>
+              <p className={styles.summary}>{importResult.summary}</p>
+              <div className={styles.statsRow}>
+                <div className={styles.stat}>
+                  <span className={styles.statValue}>{importResult.successCount}</span>
+                  <span className={styles.statLabel}>Processed</span>
+                </div>
+                {importResult.errorCount !== undefined && importResult.errorCount > 0 && (
+                  <div className={styles.stat}>
+                    <span className={styles.statValue} style={{ color: '#da1e28' }}>
+                      {importResult.errorCount}
+                    </span>
+                    <span className={styles.statLabel}>Errors</span>
+                  </div>
+                )}
+              </div>
+            </div>
+
+            {importResult.successes && importResult.successes.length > 0 && (
+              <div className={styles.importDetails}>
+                <h5>Successfully Loaded:</h5>
+                <div className={styles.itemList}>
+                  {importResult.successes.slice(0, 10).map((item, index) => (
+                    <div key={index} className={styles.item}>
+                      <Tag type="green">{item.type}</Tag>
+                      <span>{item.filename}</span>
+                    </div>
+                  ))}
+                  {importResult.successes.length > 10 && (
+                    <div style={{ fontSize: '0.75rem', color: 'var(--cds-text-02)', padding: '0.25rem 0' }}>
+                      ... and {importResult.successes.length - 10} more
+                    </div>
+                  )}
+                </div>
+              </div>
+            )}
+
+            {importResult.errors && importResult.errors.length > 0 && (
+              <div className={styles.importDetails}>
+                <h5 style={{ color: '#da1e28' }}>Errors:</h5>
+                <div className={styles.itemList}>
+                  {importResult.errors.map((item, index) => (
+                    <div key={index} className={`${styles.item} ${styles.errorItem}`}>
+                      <Tag type="red">{item.type}</Tag>
+                      <span>{item.filename}</span>
+                      {item.error && <span className={styles.errorMessage}>: {item.error}</span>}
+                    </div>
+                  ))}
+                </div>
+              </div>
+            )}
+          </div>
+        )}
+      </ModalBody>
+    </Modal>
+  );
+};
+
+export default ImportPackageModal;

package/src/components/import-export/index.ts

@@ -0,0 +1,3 @@
+export { default as ImportExportPage } from './import-export-page.component';
+export { default as ExportReportModal } from './export-report-modal.component';
+export { default as ImportPackageModal } from './import-package-modal.component';

package/src/components/indicators/README.md

@@ -0,0 +1,24 @@
+Indicator Feature Replacement (Clean)
+
+This zip contains a cleaned indicator feature implementation:
+
+- `indicators/`  -> place under: `src/report-builder/components/indicators/`
+- `services/`    -> place under: `src/report-builder/resources/`
+
+Key changes
+- Create Base Indicator modal is broken into small components:
+  - `base-indicator-basic-fields.component.tsx`
+  - `base-indicator-theme-unit-fields.component.tsx`
+  - `diagnosis-filters-form.component.tsx`
+  - `sql-preview.component.tsx`
+- Diagnosis concept selection now supports:
+  - search OpenMRS concepts (REST)
+  - add one or more concepts
+  - renders selected concepts as removable pills (tags)
+  - SQL builder uses `=` for 1 concept and `IN (...)` for 2+ concepts
+- OpenMRS concept search response is expected to be `{ "results": [...] }` and we parse `CIEL: <number>` mappings
+  to derive the numeric concept_id used in warehouse (`diagnosis_coded`).
+
+Notes
+- REST base URL resolver is in: `services/concepts/openmrs-rest-base.ts`
+  - Optionally set `window.OPENMRS_BASE_URL = 'http://host:port/openmrs'` (no trailing slash)

package/src/components/indicators/base-indicator-basic-fields.component.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { TextInput } from '@carbon/react';
+
+type Props = {
+  code: string;
+  name: string;
+  onChangeCode: (next: string) => void;
+  onChangeName: (next: string) => void;
+};
+
+export default function BaseIndicatorBasicFields({ code, name, onChangeCode, onChangeName }: Props) {
+  return (
+    <div style={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: '0.75rem' }}>
+      <TextInput id="base-code" labelText="Code" value={code} onChange={(e) => onChangeCode((e.target as HTMLInputElement).value)} />
+      <TextInput id="base-name" labelText="Name" value={name} onChange={(e) => onChangeName((e.target as HTMLInputElement).value)} />
+    </div>
+  );
+}

package/src/components/indicators/base-indicator-basics.section.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import { Select, SelectItem, TextArea, TextInput, Stack } from '@carbon/react';
+
+import type { CreateBaseIndicatorPayload } from './types/base-indicator-form.types';
+import { THEME_OPTIONS, THEME_LABELS } from './types/base-indicator-theme.constants';
+
+type Props = {
+    state: CreateBaseIndicatorPayload;
+    onChange: (patch: Partial<CreateBaseIndicatorPayload>) => void;
+};
+
+const BaseIndicatorBasicsSection: React.FC<Props> = ({ state, onChange }) => {
+    return (
+        <Stack gap={5}>
+            <Select
+                id="theme"
+                labelText="Theme"
+                value={state.theme}
+                onChange={(e) => onChange({ theme: (e.target as HTMLSelectElement).value })}
+            >
+                {THEME_OPTIONS.map((key) => (
+                    <SelectItem key={key} value={key} text={THEME_LABELS[key]} />
+                ))}
+            </Select>
+
+            <TextInput
+                id="code"
+                labelText="Code"
+                helperText="Short unique code used in reports (e.g. MAL_PREG)"
+                value={state.code}
+                onChange={(e) => onChange({ code: (e.target as HTMLInputElement).value })}
+                placeholder="e.g. MAL_PREG"
+            />
+
+            <TextInput
+                id="name"
+                labelText="Indicator"
+                value={state.indicatorName}
+                onChange={(e) => onChange({ indicatorName: (e.target as HTMLInputElement).value })}
+                placeholder="e.g. Pregnant Women with Malaria"
+            />
+
+            <TextArea
+                id="desc"
+                labelText="Description"
+                value={state.description}
+                onChange={(e) => onChange({ description: (e.target as HTMLTextAreaElement).value })}
+                placeholder="Short description of what this indicator represents"
+            />
+        </Stack>
+    );
+};
+
+export default BaseIndicatorBasicsSection;

package/src/components/indicators/base-indicator-countby.section.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { RadioButtonGroup, RadioButton } from '@carbon/react';
+
+import type { CreateBaseIndicatorPayload } from './types/base-indicator-form.types';
+
+type Props = {
+    state: CreateBaseIndicatorPayload;
+    onChange: (patch: Partial<CreateBaseIndicatorPayload>) => void;
+};
+
+const BaseIndicatorCountBySection: React.FC<Props> = ({ state, onChange }) => {
+    return (
+        <RadioButtonGroup
+            legendText="Count By"
+            name="countBy"
+            valueSelected={state.countBy}
+            onChange={(val) => onChange({ countBy: val as 'Patients' | 'Encounters' })}
+        >
+            <RadioButton id="cb-patients" labelText="Patients" value="Patients" />
+            <RadioButton id="cb-encounters" labelText="Encounters" value="Encounters" />
+        </RadioButtonGroup>
+    );
+};
+
+export default BaseIndicatorCountBySection;

package/src/components/indicators/base-indicator-criteria.section.tsx

@@ -0,0 +1,83 @@
+import React from 'react';
+import { Stack, Search, InlineLoading, FilterableMultiSelect, Select, SelectItem } from '@carbon/react';
+
+import { useConceptSearch } from '../../resources/concepts/useConceptSearch';
+import type { ConceptSummary } from '../../resources/concepts/concept-types';
+import type { CreateBaseIndicatorPayload } from './types/base-indicator-form.types';
+
+type Props = {
+    open: boolean; // to reset when modal opens
+    state: CreateBaseIndicatorPayload;
+    onChange: (patch: Partial<CreateBaseIndicatorPayload>) => void;
+};
+
+const BaseIndicatorCriteriaSection: React.FC<Props> = ({ open, state, onChange }) => {
+    const [conceptQuery, setConceptQuery] = React.useState('');
+    const { loading, results, error } = useConceptSearch(conceptQuery);
+
+    // Force-reset Carbon internal selected state on open
+    const [multiKey, setMultiKey] = React.useState(0);
+
+    React.useEffect(() => {
+        if (!open) return;
+        setConceptQuery('');
+        setMultiKey((k) => k + 1);
+        onChange({ conditionConceptUuids: [], conditionConceptLabels: [] });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [open]);
+
+    const itemToString = React.useCallback((item: ConceptSummary | null) => (item ? item.display : ''), []);
+
+    const onSelectedItems = (selectedItems: ConceptSummary[]) => {
+        onChange({
+            conditionConceptUuids: selectedItems.map((x) => x.uuid),
+            conditionConceptLabels: selectedItems.map((x) => x.display),
+        });
+    };
+
+    return (
+        <div>
+            <div style={{ fontWeight: 600, marginBottom: '0.5rem' }}>Criteria</div>
+
+            <Stack gap={4}>
+                <Search
+                    id="concept-search"
+                    labelText="Search concepts"
+                    placeholder="Type to search concepts..."
+                    value={conceptQuery}
+                    onChange={(e) => setConceptQuery((e.target as HTMLInputElement).value)}
+                    size="lg"
+                />
+
+                {loading ? <InlineLoading description="Searching…" /> : null}
+                {error ? (
+                    <div style={{ fontSize: '0.875rem', color: 'var(--cds-text-error, #da1e28)' }}>{error}</div>
+                ) : null}
+
+                <FilterableMultiSelect
+                    key={multiKey}
+                    id="conditionConcepts"
+                    titleText="Condition concept(s)"
+                    items={results}
+                    itemToString={itemToString}
+                    placeholder={results.length ? 'Select concept(s)…' : 'No results'}
+                    helperText="Select 1 concept for '=' filtering, select 2+ for 'IN (...)' filtering"
+                    onChange={(e: any) => onSelectedItems((e.selectedItems ?? []) as ConceptSummary[])}
+                />
+
+                <Select
+                    id="preg"
+                    labelText="Pregnancy Status"
+                    value={state.pregnancyStatus}
+                    onChange={(e) => onChange({ pregnancyStatus: (e.target as HTMLSelectElement).value })}
+                >
+                    {['Pregnant', 'Not pregnant'].map((x) => (
+                        <SelectItem key={x} value={x} text={x} />
+                    ))}
+                </Select>
+            </Stack>
+        </div>
+    );
+};
+
+export default BaseIndicatorCriteriaSection;