@epcare/esm-report-builder 0.1.1-pre.13

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;
+}

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

@@ -0,0 +1,389 @@
+import React from 'react';
+import {
+  Tabs,
+  Tab,
+  TabList,
+  TabPanels,
+  TabPanel,
+  TextInput,
+  Dropdown,
+  Button,
+  Tile,
+  ComboBox,
+  InlineLoading,
+  InlineNotification,
+  Tag,
+} from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+
+import styles from './IndicatorPropertiesPanel.scss';
+
+type DropdownItem = { id: string; text: string };
+
+export type SelectedNode = {
+  id: string;
+  label?: string;
+  code?: string;
+
+  // Optional “domain” fields you can persist on your indicator node
+  conditionConceptUuid?: string;
+  conditionConceptLabel?: string;
+};
+
+export type ConceptSummary = {
+  uuid: string;
+  display: string;
+
+  // Optional fields if you request v=full (or v=custom)
+  conceptClass?: { display?: string };
+  datatype?: { display?: string };
+  mappings?: Array<{
+    display?: string;
+    conceptReferenceTerm?: { display?: string };
+    conceptMapType?: { display?: string };
+  }>;
+};
+
+type Props = {
+  selected?: SelectedNode | null;
+
+  onChangeSelectedLabel: (value: string) => void;
+  onChangeSelectedCode: (value: string) => void;
+
+  // NEW: concept selection (persist onto selected node in your tree)
+  onChangeSelectedConditionConcept?: (payload: { uuid: string; label: string } | null) => void;
+
+  mappingCategoryOptions: DropdownItem[];
+  mappingAttrOptions: DropdownItem[];
+
+  selectedCoc?: DropdownItem | null;
+  selectedAoc?: DropdownItem | null;
+  onChangeCoc?: (item: DropdownItem) => void;
+  onChangeAoc?: (item: DropdownItem) => void;
+
+  onRemoveOverride?: () => void;
+
+  /**
+   * ✅ API hooks (pass from container)
+   * - searchConcepts: queries OpenMRS concept endpoint (q=..., v=custom/full)
+   * - previewIndicator: optional “test run” endpoint for the selected indicator node
+   */
+  searchConcepts?: (query: string) => Promise<ConceptSummary[]>;
+  previewIndicator?: (nodeId: string) => Promise<{ rows: number; sample?: any[] }>;
+};
+
+function useDebouncedValue<T>(value: T, delayMs: number) {
+  const [debounced, setDebounced] = React.useState(value);
+  React.useEffect(() => {
+    const t = window.setTimeout(() => setDebounced(value), delayMs);
+    return () => window.clearTimeout(t);
+  }, [value, delayMs]);
+  return debounced;
+}
+
+export default function IndicatorPropertiesPanel({
+                                                   selected,
+                                                   onChangeSelectedLabel,
+                                                   onChangeSelectedCode,
+                                                   onChangeSelectedConditionConcept,
+                                                   mappingCategoryOptions,
+                                                   mappingAttrOptions,
+                                                   selectedCoc,
+                                                   selectedAoc,
+                                                   onChangeCoc,
+                                                   onChangeAoc,
+                                                   onRemoveOverride,
+                                                   searchConcepts,
+                                                   previewIndicator,
+                                                 }: Props) {
+  const { t } = useTranslation();
+
+  // ----------------------------
+  // Concept search (API-backed)
+  // ----------------------------
+  const [conceptQuery, setConceptQuery] = React.useState('');
+  const debouncedQuery = useDebouncedValue(conceptQuery, 300);
+
+  const [conceptItems, setConceptItems] = React.useState<ConceptSummary[]>([]);
+  const [conceptLoading, setConceptLoading] = React.useState(false);
+  const [conceptError, setConceptError] = React.useState<string | null>(null);
+
+  const selectedConceptUuid = selected?.conditionConceptUuid ?? '';
+  const selectedConceptLabel = selected?.conditionConceptLabel ?? '';
+
+  // track selected concept object if it exists in list
+  const selectedConceptItem = React.useMemo(() => {
+    if (!selectedConceptUuid) return null;
+    return (
+        conceptItems.find((c) => c.uuid === selectedConceptUuid) ?? {
+          uuid: selectedConceptUuid,
+          display: selectedConceptLabel || selectedConceptUuid,
+        }
+    );
+  }, [conceptItems, selectedConceptUuid, selectedConceptLabel]);
+
+  React.useEffect(() => {
+    let cancelled = false;
+
+    async function run() {
+      if (!searchConcepts) return; // API not wired yet
+      const q = (debouncedQuery ?? '').trim();
+      if (!q || q.length < 2) {
+        setConceptItems([]);
+        setConceptError(null);
+        return;
+      }
+
+      try {
+        setConceptLoading(true);
+        setConceptError(null);
+        const results = await searchConcepts(q);
+        if (!cancelled) setConceptItems(results ?? []);
+      } catch (e: any) {
+        if (!cancelled) setConceptError(e?.message ?? 'Failed to search concepts');
+      } finally {
+        if (!cancelled) setConceptLoading(false);
+      }
+    }
+
+    run();
+    return () => {
+      cancelled = true;
+    };
+  }, [debouncedQuery, searchConcepts]);
+
+  // ----------------------------
+  // Preview / Test (API-backed)
+  // ----------------------------
+  const [previewLoading, setPreviewLoading] = React.useState(false);
+  const [previewError, setPreviewError] = React.useState<string | null>(null);
+  const [previewInfo, setPreviewInfo] = React.useState<{ rows: number; sample?: any[] } | null>(null);
+
+  const runPreview = async () => {
+    if (!previewIndicator || !selected?.id) return;
+    try {
+      setPreviewLoading(true);
+      setPreviewError(null);
+      const res = await previewIndicator(selected.id);
+      setPreviewInfo(res);
+    } catch (e: any) {
+      setPreviewError(e?.message ?? 'Failed to preview indicator');
+      setPreviewInfo(null);
+    } finally {
+      setPreviewLoading(false);
+    }
+  };
+
+  const isEmpty = !selected;
+
+  return (
+      <Tile className={styles.tile}>
+        <div className={styles.tileHeader}>
+          <h3 className={styles.tileTitle}>{t('indicatorProperties', 'Indicator Properties')}</h3>
+          {isEmpty ? (
+              <div className={styles.tileHint}>{t('selectNodeHint', 'Select an indicator/row to edit properties')}</div>
+          ) : null}
+        </div>
+
+        <Tabs>
+          <TabList aria-label={t('propertiesTabs', 'Properties tabs')}>
+            <Tab>{t('details', 'Details')}</Tab>
+            <Tab>{t('disaggregation', 'Disaggregation')}</Tab>
+            <Tab>{t('mapping', 'Mapping')}</Tab>
+            <Tab>{t('api', 'API')}</Tab>
+          </TabList>
+
+          <TabPanels>
+            {/* ---------------- Details ---------------- */}
+            <TabPanel>
+              <div className={styles.formGrid}>
+                <TextInput
+                    id="nodeLabel"
+                    labelText={t('label', 'Label')}
+                    value={selected?.label ?? ''}
+                    onChange={(e) => onChangeSelectedLabel(e.target.value)}
+                    placeholder={t('selectNode', 'Select a node to edit')}
+                    disabled={isEmpty}
+                />
+
+                <TextInput
+                    id="nodeCode"
+                    labelText={t('codeOptional', 'Code (optional for grouping nodes)')}
+                    value={selected?.code ?? ''}
+                    onChange={(e) => onChangeSelectedCode(e.target.value)}
+                    disabled={isEmpty}
+                />
+              </div>
+
+              <div className={styles.note}>
+                {t(
+                    'noteGroups',
+                    'Note: Nodes with children act as groups. Leaf nodes act as indicators and will appear as rows in the output tables.',
+                )}
+              </div>
+            </TabPanel>
+
+            {/* ---------------- Disaggregation ---------------- */}
+            <TabPanel>
+              <div className={styles.placeholder}>
+                {t('disaggPlaceholder', 'Disaggregation settings will go here.')}
+              </div>
+            </TabPanel>
+
+            {/* ---------------- Mapping ---------------- */}
+            <TabPanel>
+              <div className={styles.formGrid}>
+                <TextInput
+                    id="indicatorCode"
+                    labelText={t('code', 'Code')}
+                    value={selected?.code ?? ''}
+                    onChange={(e) => onChangeSelectedCode(e.target.value)}
+                    disabled={isEmpty}
+                />
+
+                <TextInput
+                    id="dataElementId"
+                    labelText={t('dataElementId', 'Data Element ID')}
+                    value={selected?.code ? `${selected.code}_Cases` : ''}
+                    readOnly
+                />
+
+                <Dropdown
+                    id="coc"
+                    label=""
+                    titleText={t('categoryOptionCombo', 'Category Option Combo')}
+                    items={mappingCategoryOptions}
+                    itemToString={(item) => (item ? item.text : '')}
+                    selectedItem={selectedCoc ?? null}
+                    onChange={(e) => onChangeCoc?.(e.selectedItem as DropdownItem)}
+                />
+
+                <Dropdown
+                    id="aoc"
+                    label=""
+                    titleText={t('attributeOptionCombo', 'Attribute Option Combo')}
+                    items={mappingAttrOptions}
+                    itemToString={(item) => (item ? item.text : '')}
+                    selectedItem={selectedAoc ?? null}
+                    onChange={(e) => onChangeAoc?.(e.selectedItem as DropdownItem)}
+                />
+              </div>
+
+              <div className={styles.mappingActions}>
+                <Button size="sm" kind="secondary" onClick={() => onRemoveOverride?.()}>
+                  {t('removeOverride', 'Remove Override')}
+                </Button>
+              </div>
+            </TabPanel>
+
+            {/* ---------------- API ---------------- */}
+            <TabPanel>
+              {!searchConcepts ? (
+                  <InlineNotification
+                      kind="info"
+                      lowContrast
+                      title={t('apiNotWired', 'API not wired yet')}
+                      subtitle={t(
+                          'apiNotWiredHint',
+                          'Pass searchConcepts() from your container using OpenMRS REST (ws/rest/v1/concept?q=...).',
+                      )}
+                  />
+              ) : null}
+
+              <div className={styles.apiBlock}>
+                <ComboBox
+                    id="conceptSearch"
+                    titleText={t('conditionConcept', 'Condition concept')}
+                    placeholder={t('searchConcept', 'Search concept...')}
+                    items={conceptItems}
+                    itemToString={(item) => (item ? item.display : '')}
+                    selectedItem={selectedConceptItem as any}
+                    onInputChange={(text) => setConceptQuery(text ?? '')}
+                    onChange={(e) => {
+                      const item = e.selectedItem as ConceptSummary | null;
+                      if (!onChangeSelectedConditionConcept) return;
+                      if (!item) onChangeSelectedConditionConcept(null);
+                      else onChangeSelectedConditionConcept({ uuid: item.uuid, label: item.display });
+                    }}
+                    disabled={isEmpty}
+                />
+
+                {conceptLoading ? (
+                    <div style={{ marginTop: '0.75rem' }}>
+                      <InlineLoading description={t('searching', 'Searching...')} />
+                    </div>
+                ) : null}
+
+                {conceptError ? (
+                    <div style={{ marginTop: '0.75rem' }}>
+                      <InlineNotification kind="error" lowContrast title={t('error', 'Error')} subtitle={conceptError} />
+                    </div>
+                ) : null}
+
+                {selectedConceptItem ? (
+                    <div className={styles.conceptSummary}>
+                      <div style={{ display: 'flex', gap: '0.5rem', flexWrap: 'wrap', alignItems: 'center' }}>
+                        <strong>{selectedConceptItem.display}</strong>
+                        <Tag size="sm" type="gray">
+                          {selectedConceptItem.uuid}
+                        </Tag>
+                        {selectedConceptItem.conceptClass?.display ? (
+                            <Tag size="sm" type="blue">
+                              {selectedConceptItem.conceptClass.display}
+                            </Tag>
+                        ) : null}
+                        {selectedConceptItem.datatype?.display ? (
+                            <Tag size="sm" type="teal">
+                              {selectedConceptItem.datatype.display}
+                            </Tag>
+                        ) : null}
+                      </div>
+
+                      {selectedConceptItem.mappings?.length ? (
+                          <div style={{ marginTop: '0.5rem', fontSize: '0.875rem', opacity: 0.85 }}>
+                            {t('mappings', 'Mappings')}: {selectedConceptItem.mappings.slice(0, 3).map((m) => m.display).filter(Boolean).join(' • ')}
+                            {selectedConceptItem.mappings.length > 3 ? ' …' : ''}
+                          </div>
+                      ) : null}
+                    </div>
+                ) : null}
+              </div>
+
+              <div className={styles.apiActions}>
+                <Button
+                    size="sm"
+                    kind="primary"
+                    onClick={runPreview}
+                    disabled={!previewIndicator || !selected?.id}
+                >
+                  {t('preview', 'Preview')}
+                </Button>
+
+                {previewLoading ? <InlineLoading description={t('running', 'Running...')} /> : null}
+              </div>
+
+              {previewError ? (
+                  <div style={{ marginTop: '0.75rem' }}>
+                    <InlineNotification kind="error" lowContrast title={t('previewFailed', 'Preview failed')} subtitle={previewError} />
+                  </div>
+              ) : null}
+
+              {previewInfo ? (
+                  <div className={styles.previewSummary}>
+                    <div style={{ fontWeight: 600 }}>{t('previewResult', 'Preview result')}</div>
+                    <div style={{ marginTop: '0.25rem' }}>
+                      {t('rows', 'Rows')}: <strong>{previewInfo.rows}</strong>
+                    </div>
+                    {previewInfo.sample?.length ? (
+                        <pre style={{ marginTop: '0.5rem', overflow: 'auto' }}>
+                    {JSON.stringify(previewInfo.sample.slice(0, 5), null, 2)}
+                  </pre>
+                    ) : null}
+                  </div>
+              ) : null}
+            </TabPanel>
+          </TabPanels>
+        </Tabs>
+      </Tile>
+  );
+}

package/src/components/shared/json-preview-panel/JsonPreviewPanel.scss

@@ -0,0 +1,32 @@
+@use '@carbon/layout';
+
+.headerRow {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: layout.$spacing-03;
+}
+
+.title {
+  margin: 0;
+}
+
+.tools {
+  display: flex;
+  gap: layout.$spacing-02;
+  align-items: center;
+}
+
+.editorContainer {
+  padding: layout.$spacing-03;
+
+  :global(.ace_editor) {
+    border: 1px solid var(--cds-border-subtle, #e0e0e0);
+    border-radius: 4px;
+  }
+}
+
+.maximized {
+  position: relative;
+  z-index: 5;
+}