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

package/src/components/shared/concept-selector.component.tsx

@@ -0,0 +1,245 @@
+/**
+ * Concept Selector Component
+ *
+ * Allows users to search and select OpenMRS concepts
+ * Uses the same pattern as base indicator creation (Search + FilterableMultiSelect)
+ *
+ * Used for:
+ * - Observations (selecting concepts to observe)
+ * - Encounter Diagnoses (selecting diagnosis concepts)
+ */
+
+import React, { useState, useCallback, useEffect } from 'react';
+import {
+  Search,
+  FilterableMultiSelect,
+  InlineLoading,
+  Tag,
+  Stack,
+  InlineNotification,
+  Button,
+} from '@carbon/react';
+import { Close, Information } from '@carbon/react/icons';
+import { useConceptSearch } from '../../resources/concepts/useConceptSearch';
+import type { ConceptSummary } from '../../resources/concepts/concept-types';
+import styles from './concept-selector.scss';
+
+type Props = {
+  /** Currently selected concept */
+  selectedConcept?: ConceptSummary;
+  /** Callback when a concept is selected */
+  onSelect: (concept: ConceptSummary) => void;
+  /** Callback when selection is cleared */
+  onClear?: () => void;
+  /** Disable the component */
+  disabled?: boolean;
+  /** Optional placeholder text for search */
+  placeholder?: string;
+  /** Optional label for the search input */
+  label?: string;
+  /** Filter concepts by class UUID */
+  conceptClassUuid?: string;
+  /** Show advanced options */
+  showAdvanced?: boolean;
+  /** Key to force reset of component state */
+  openKey?: number;
+};
+
+const ConceptSelector: React.FC<Props> = ({
+  selectedConcept,
+  onSelect,
+  onClear,
+  disabled = false,
+  placeholder = 'Type to search concepts...',
+  label = 'Search concepts',
+  showAdvanced = false,
+  openKey = 0,
+}) => {
+  const [conceptQuery, setConceptQuery] = useState('');
+  const [multiKey, setMultiKey] = useState(0);
+
+  // Force-reset state when modal opens (openKey changes)
+  useEffect(() => {
+    setConceptQuery('');
+    setMultiKey((k) => k + 1);
+  }, [openKey]);
+
+  const { loading, results, error } = useConceptSearch(conceptQuery);
+
+  /**
+   * Combine search results with the currently selected concept
+   * This ensures the selected concept appears in the list even if not in search results
+   */
+  const items = React.useMemo(() => {
+    const combined = [...results];
+    // If there's a selected concept and it's not already in the results, add it
+    if (selectedConcept) {
+      const exists = results.some(r => r.uuid === selectedConcept.uuid);
+      if (!exists) {
+        combined.unshift(selectedConcept); // Add at the beginning
+      }
+    }
+    return combined;
+  }, [results, selectedConcept]);
+
+  /**
+   * Handle search input change
+   */
+  const handleSearchChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    setConceptQuery(e.target.value);
+  }, []);
+
+  /**
+   * Handle concept selection
+   */
+  const handleSelect = useCallback((selectedItems: ConceptSummary[]) => {
+    if (selectedItems.length > 0) {
+      onSelect(selectedItems[0]);
+    }
+  }, [onSelect]);
+
+  /**
+   * Handle clearing selection
+   */
+  const handleClearSelection = useCallback(() => {
+    onClear?.();
+    setConceptQuery('');
+  }, [onClear]);
+
+  /**
+   * Format concept for display
+   */
+  const itemToString = useCallback((item: ConceptSummary | null) => {
+    if (!item) return '';
+    const className = item.conceptClass?.name || '';
+    return className ? `${item.display} (${className})` : item.display;
+  }, []);
+
+  return (
+    <div className={styles.container}>
+      <Stack gap={4}>
+        {/* Header */}
+        {showAdvanced && (
+          <div className={styles.header}>
+            <div className={styles.headerTitle}>
+              <Information size={16} />
+              <h4>Select Concept</h4>
+            </div>
+            <p className={styles.headerDescription}>
+              Search for an OpenMRS concept to use for this column. Concepts define what data to observe or diagnose.
+            </p>
+          </div>
+        )}
+
+        {/* Selected Concept Display */}
+        {selectedConcept && (
+          <div className={styles.selectedDisplay}>
+            <div className={styles.selectedInfo}>
+              <span className={styles.selectedLabel}>Selected:</span>
+              <Tag type="blue" size="sm">
+                {selectedConcept.display}
+              </Tag>
+              <span className={styles.selectedMeta}>
+                {selectedConcept.conceptClass?.name}
+              </span>
+            </div>
+            <Button
+              kind="ghost"
+              size="sm"
+              hasIconOnly
+              renderIcon={Close}
+              iconDescription="Clear selection"
+              onClick={handleClearSelection}
+              disabled={disabled}
+            />
+          </div>
+        )}
+
+        {/* Concept Search - using base indicator pattern */}
+        <div className={styles.searchSection}>
+          <Search
+            id="concept-search"
+            labelText={label}
+            placeholder={placeholder}
+            value={conceptQuery}
+            onChange={handleSearchChange}
+            size="lg"
+            disabled={disabled}
+          />
+
+          {loading ? <InlineLoading description="Searching…" /> : null}
+          {error ? (
+            <InlineNotification
+              kind="error"
+              title="Error"
+              subtitle={error}
+              lowContrast
+              hideCloseButton
+            />
+          ) : null}
+
+          <FilterableMultiSelect
+            key={multiKey}
+            id="concept-select"
+            titleText="Select concept"
+            items={items}
+            itemToString={itemToString}
+            placeholder={items.length ? 'Select a concept…' : 'No results'}
+            helperText={selectedConcept ? 'Click to change selection' : 'Type at least 2 characters to search'}
+            onChange={(e: any) => handleSelect((e.selectedItems ?? []) as ConceptSummary[])}
+            disabled={disabled}
+            selectionFeedback="top"
+            initialSelectedItems={selectedConcept ? [selectedConcept] : []}
+          />
+
+          {/* Helper Text */}
+          {!selectedConcept && !loading && !error && (
+            <div className={styles.helperText}>
+              <p>
+                Type at least 2 characters to search for concepts. You can search by concept name or UUID.
+              </p>
+              <p className={styles.hint}>
+                <strong>Tip:</strong> Use specific terms like "Weight", "HIV Status", or "Diagnosis" for better results.
+              </p>
+            </div>
+          )}
+        </div>
+
+        {/* Advanced Options */}
+        {showAdvanced && selectedConcept && (
+          <div className={styles.advancedOptions}>
+            <h5 className={styles.advancedTitle}>Concept Details</h5>
+            <Stack gap={2}>
+              <div className={styles.detailRow}>
+                <span className={styles.detailLabel}>UUID:</span>
+                <span className={styles.detailValue}>{selectedConcept.uuid}</span>
+              </div>
+              <div className={styles.detailRow}>
+                <span className={styles.detailLabel}>Data Type:</span>
+                <span className={styles.detailValue}>{selectedConcept.datatype?.name}</span>
+              </div>
+              <div className={styles.detailRow}>
+                <span className={styles.detailLabel}>Class:</span>
+                <span className={styles.detailValue}>{selectedConcept.conceptClass?.name}</span>
+              </div>
+              {selectedConcept.answers && selectedConcept.answers.length > 0 && (
+                <div className={styles.detailRow}>
+                  <span className={styles.detailLabel}>Answers:</span>
+                  <div className={styles.detailValue}>
+                    {selectedConcept.answers.map(answer => (
+                      <Tag key={answer.uuid} type="gray" size="sm">
+                        {answer.display}
+                      </Tag>
+                    ))}
+                  </div>
+                </div>
+              )}
+            </Stack>
+          </div>
+        )}
+      </Stack>
+    </div>
+  );
+};
+
+export default ConceptSelector;

package/src/components/shared/concept-selector.scss

@@ -0,0 +1,121 @@
+/**
+ * Concept Selector Component Styles
+ */
+
+.container {
+  width: 100%;
+}
+
+.header {
+  margin-bottom: 1rem;
+}
+
+.headerTitle {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 0.5rem;
+
+  h4 {
+    margin: 0;
+    font-size: 0.925rem;
+    font-weight: 600;
+    color: #161616;
+  }
+}
+
+.headerDescription {
+  font-size: 0.75rem;
+  color: #6f6f6f;
+  margin: 0;
+}
+
+.selectedDisplay {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.75rem;
+  background-color: #f0f0f0;
+  border-radius: 4px;
+  margin-bottom: 0.75rem;
+}
+
+.selectedInfo {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+
+.selectedLabel {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: #333;
+}
+
+.selectedMeta {
+  font-size: 0.75rem;
+  color: #666;
+}
+
+.searchSection {
+  margin-bottom: 1rem;
+}
+
+.helperText {
+  margin-top: 0.5rem;
+
+  p {
+    font-size: 0.75rem;
+    color: #6f6f6f;
+    margin: 0.25rem 0;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  .hint {
+    color: #00665A;
+  }
+}
+
+.advancedOptions {
+  padding: 1rem;
+  background-color: #fafafa;
+  border-radius: 4px;
+  margin-top: 1rem;
+}
+
+.advancedTitle {
+  margin: 0 0 0.75rem 0;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: #333;
+}
+
+.detailRow {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.5rem;
+  margin-bottom: 0.5rem;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.detailLabel {
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: #666;
+  min-width: 80px;
+}
+
+.detailValue {
+  font-size: 0.75rem;
+  color: #333;
+  display: flex;
+  gap: 0.25rem;
+  flex-wrap: wrap;
+}

package/src/components/shared/header/builder-header-actions.component.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import {Button, ButtonSet} from '@carbon/react';
+import {Download, Save, View} from '@carbon/icons-react';
+import {useTranslation} from 'react-i18next';
+
+type Props = {
+    onSave?: () => void;
+    onPreview?: () => void;
+    onExport?: () => void;
+    saving?: boolean;
+    disabled?: boolean;
+};
+
+export default function BuilderHeaderActions({
+                                                 onSave,
+                                                 onPreview,
+                                                 onExport,
+                                                 saving = false,
+                                                 disabled = false,
+                                             }: Props) {
+    const {t} = useTranslation();
+
+    return (
+        <ButtonSet>
+            <Button kind="secondary" size="md" renderIcon={Save} onClick={onSave} disabled={disabled || saving}>
+                {saving ? t('saving', 'Saving…') : t('save', 'Save')}
+            </Button>
+
+            <Button kind="secondary" size="md" renderIcon={View} onClick={onPreview} disabled={disabled}>
+                {t('preview', 'Preview')}
+            </Button>
+
+            <Button kind="primary" size="md" renderIcon={Download} onClick={onExport} disabled={disabled}>
+                {t('export', 'Export')}
+            </Button>
+        </ButtonSet>
+    );
+}

package/src/components/shared/header/header.component.tsx

@@ -0,0 +1,85 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Calendar, ChevronDown, Location, UserFollow } from '@carbon/react/icons';
+import { formatDate, useSession } from '@openmrs/esm-framework';
+
+import Illustration from './illustration.component';
+import styles from './header.scss';
+import AiAssistButton from '../../ai-support/ai-assist-button.component';
+
+export interface HeaderStatus {
+    label: string;
+    kind?: 'neutral' | 'info' | 'success' | 'warning'; // kept for future, not styled as pill in this design
+}
+
+export interface HeaderProps {
+    title: string;
+    subtitle?: string;
+    status?: HeaderStatus;
+    actions?: React.ReactNode;
+
+    showAiAssist?: boolean; // NEW
+}
+
+const Header: React.FC<HeaderProps> = ({ title, subtitle, status, actions, showAiAssist = true }) => {
+    const { t } = useTranslation();
+    const session = useSession();
+    const location = session?.sessionLocation?.display;
+
+    const metaLeft = status?.label;
+    const metaRight = subtitle;
+
+    return (
+        <div className={styles.header}>
+            {/* LEFT */}
+            <div className={styles.left}>
+                <div className={styles.illustrationWrap}>
+                    <Illustration />
+                </div>
+
+                <div className={styles.pageLabels}>
+                    <div className={styles.appName}>{t('reportBuilder', 'Report builder')}</div>
+                    <div className={styles.pageTitle}>{title}</div>
+
+                    {(metaLeft || metaRight) && (
+                        <div className={styles.metaLine}>
+                            {metaLeft ? <span className={styles.metaItem}>{metaLeft}</span> : null}
+                            {metaLeft && metaRight ? <span className={styles.metaDot}>•</span> : null}
+                            {metaRight ? <span className={styles.metaItem}>{metaRight}</span> : null}
+                        </div>
+                    )}
+                </div>
+            </div>
+
+            {/* RIGHT */}
+            <div className={styles.right}>
+                <div className={styles.rightTop}>
+                    <div className={styles.userRow}>
+                        <span className={styles.userName}>{session?.user?.person?.display}</span>
+                        <UserFollow size={18} className={styles.userIcon} />
+                    </div>
+
+                    <div className={styles.contextRow}>
+                        <Location size={16} />
+                        <span className={styles.value}>{location}</span>
+                        <span className={styles.metaDot}>•</span>
+                        <Calendar size={16} />
+                        <span className={styles.value}>{formatDate(new Date(), { mode: 'standard' })}</span>
+                        <ChevronDown size={16} className={styles.chevron} />
+                    </div>
+                </div>
+
+                {showAiAssist || actions ? (
+                    <div className={styles.actions}>
+                        {showAiAssist ? <AiAssistButton context={{ page: title }} /> : null}
+                        {actions}
+                    </div>
+                ) : null}
+            </div>
+
+
+        </div>
+    );
+};
+
+export default Header;

package/src/components/shared/header/header.scss

@@ -0,0 +1,150 @@
+@use '@carbon/layout' as layout;
+@use '@carbon/type' as type;
+
+.page {
+  width: 100%;
+  margin: 0 auto;
+  padding: 1.5rem 0 2rem;
+}
+
+.header {
+  background: var(--cds-layer-01, #ffffff);
+  border-bottom: 1px solid var(--cds-border-subtle, #e0e0e0);
+  padding: layout.$spacing-06 layout.$spacing-06;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: layout.$spacing-07;
+}
+
+.left {
+  display: flex;
+  align-items: flex-start;
+  gap: layout.$spacing-06;
+  min-width: 0;
+}
+
+.illustrationWrap {
+  flex: 0 0 auto;
+}
+
+.pageLabels {
+  display: flex;
+  flex-direction: column;
+  gap: layout.$spacing-03;
+  min-width: 0;
+}
+
+.appName {
+  @include type.type-style('body-compact-02');
+  color: var(--cds-text-secondary, #525252);
+}
+
+.pageTitle {
+  @include type.type-style('heading-05');
+  color: var(--cds-text-primary, #161616);
+  line-height: 1.15;
+}
+
+.metaLine {
+  @include type.type-style('body-compact-02');
+  color: var(--cds-text-secondary, #525252);
+  display: flex;
+  align-items: center;
+  gap: layout.$spacing-03;
+}
+
+.metaItem {
+  white-space: nowrap;
+}
+
+.metaDot {
+  opacity: 0.7;
+}
+
+.right {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: layout.$spacing-05;
+}
+
+.rightTop {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: layout.$spacing-03;
+}
+
+.userRow {
+  display: flex;
+  align-items: center;
+  gap: layout.$spacing-03;
+}
+
+.userName {
+  @include type.type-style('body-compact-02');
+  color: var(--cds-text-primary, #161616);
+}
+
+.userIcon {
+  color: var(--cds-text-secondary, #525252);
+}
+
+.contextRow {
+  @include type.type-style('body-compact-02');
+  color: var(--cds-text-secondary, #525252);
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: layout.$spacing-03;
+}
+
+.value {
+  margin-left: layout.$spacing-02;
+  white-space: nowrap;
+}
+
+.chevron {
+  opacity: 0.7;
+}
+
+.actions {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+
+.illustration {
+  position: relative;
+  width: 44px;
+  height: 44px;
+  flex: 0 0 auto;
+}
+
+.sheetBack,
+.sheetMid,
+.sheetFront {
+  position: absolute;
+  inset: 0;
+  border-radius: 2px;
+  background: #a7d6d4; /* example */
+  border: 1px solid rgba(0, 0, 0, 0.08);
+}
+
+/* ✅ overlap should trail LEFT */
+.sheetBack {
+  transform: translateX(-8px) translateY(2px);
+  opacity: 0.6;
+}
+
+.sheetMid {
+  transform: translateX(-4px) translateY(1px);
+  opacity: 0.8;
+}
+
+.sheetFront {
+  transform: translateX(0) translateY(0);
+  opacity: 1;
+}

package/src/components/shared/header/illustration.component.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+
+const Illustration: React.FC = () => {
+  return (
+    <svg
+      height="64"
+      width="64"
+      viewBox="0 0 32 32"
+      xmlns="http://www.w3.org/2000/svg"
+      xmlSpace="preserve"
+      fillRule="evenodd"
+      clipRule="evenodd"
+      strokeLinejoin="round"
+      strokeMiterlimit="2"
+    >
+      <path
+        d="M27 31.36H8a.36.36 0 0 1-.36-.36v-1.64H6a.36.36 0 0 1-.36-.36v-1.64H5a.36.36 0 0 1-.36-.36V3A.36.36 0 0 1 5 2.64h4.64V2a.36.36 0 0 1 .36-.36h1.64V1A.36.36 0 0 1 12 .64h4a.36.36 0 0 1 .36.36v.64H18a.36.36 0 0 1 .36.36v.64H23a.36.36 0 0 1 .36.36v1.64H25a.36.36 0 0 1 .36.36v1.64H27a.36.36 0 0 1 .36.36v24a.36.36 0 0 1-.36.36Z"
+        fill="#d2e5e5"
+      />
+      <path d="M8.36 30.64h18.28V7.36h-1.28V29a.36.36 0 0 1-.36.36H8.36v1.28Z" fill="#8abab8" />
+      <path
+        d="M5.36 26.64h17.28V3.36h-4.28V4a.36.36 0 0 1-.36.36h-8A.36.36 0 0 1 9.64 4v-.64H5.36v23.28Z"
+        fill="#8abab8"
+      />
+      <path fill="#fff" d="M7.5 12.64h13v.72h-13zM7.5 8.64h13v.72h-13zM7.5 20.64h13v.72h-13zM7.5 16.64h13v.72h-13z" />
+      <path
+        d="M10.36 3.64h7.28V2.36H16a.36.36 0 0 1-.36-.36v-.64h-3.28V2a.36.36 0 0 1-.36.36h-1.64v1.28ZM6.36 28.64h18.28V5.36h-1.28V27a.36.36 0 0 1-.36.36H6.36v1.28Z"
+        fill="#8abab8"
+      />
+    </svg>
+  );
+};
+
+export default Illustration;

package/src/components/shared/indicator-properties-panel/IndicatorPropertiesPanel.scss

@@ -0,0 +1,33 @@
+.tileHeader {
+  margin-bottom: 0.75rem;
+}
+
+.tileTitle {
+  margin: 0;
+  font-weight: 600;
+}
+
+.formGrid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 0.75rem;
+  margin-top: 0.75rem;
+}
+
+.note {
+  margin-top: 0.75rem;
+  padding: 0.75rem;
+  border-left: 4px solid var(--cds-support-info, #0f62fe);
+  background: var(--cds-layer-accent-01, #edf5ff);
+  border-radius: 0.25rem;
+  font-size: 0.875rem;
+}
+
+.mappingActions {
+  margin-top: 0.75rem;
+}
+
+.placeholder {
+  padding: 1rem 0;
+  opacity: 0.8;
+}