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

package/src/components/shared/template-structure-panel/template-structure-panel.component.tsx

@@ -0,0 +1,296 @@
+import React, { useRef } from 'react';
+import { Button, Tile, TreeView, TreeNode } from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+import { nanoid } from 'nanoid';
+
+import styles from './template-structure-panel.scss';
+
+export type IndicatorNode = {
+  id: string;
+  label: string;
+  code?: string;
+  type?: 'group' | 'indicator';
+  children?: IndicatorNode[];
+};
+
+export type SelectedNode = {
+  id: string;
+  label?: string;
+  code?: string;
+  hasChildren?: boolean;
+};
+
+type Props = {
+  tree: IndicatorNode[];
+  selected?: SelectedNode | null;
+  onSelectNode: (node: IndicatorNode) => void;
+  onChangeTree: (updater: (prevTree: IndicatorNode[]) => IndicatorNode[]) => void;
+
+  // ✅ NEW: refresh JSON from template draft
+  onRefreshJson: () => void;
+};
+
+type IndexPath = number[];
+
+function findIndexPath(nodes: IndicatorNode[], id: string): IndexPath | null {
+  for (let i = 0; i < nodes.length; i++) {
+    const n = nodes[i];
+    if (n.id === id) return [i];
+    if (n.children?.length) {
+      const childPath = findIndexPath(n.children, id);
+      if (childPath) return [i, ...childPath];
+    }
+  }
+  return null;
+}
+
+function getNodeAtPath(root: IndicatorNode[], path: IndexPath): IndicatorNode {
+  let node = root[path[0]];
+  for (let i = 1; i < path.length; i++) node = (node.children ?? [])[path[i]];
+  return node;
+}
+
+function getSiblingsAtPath(root: IndicatorNode[], path: IndexPath): { siblings: IndicatorNode[]; index: number } {
+  let siblings = root;
+  for (let depth = 0; depth < path.length - 1; depth++) {
+    const idx = path[depth];
+    siblings = siblings[idx].children ?? (siblings[idx].children = []);
+  }
+  return { siblings, index: path[path.length - 1] };
+}
+
+function getSiblingsAtDepth(root: IndicatorNode[], pathToLevel: number[]): IndicatorNode[] {
+  let siblings = root;
+  for (let i = 0; i < pathToLevel.length; i++) {
+    const idx = pathToLevel[i];
+    siblings = siblings[idx].children ?? [];
+  }
+  return siblings;
+}
+
+function containsId(node: IndicatorNode, id: string): boolean {
+  if (node.id === id) return true;
+  for (const c of node.children ?? []) {
+    if (containsId(c, id)) return true;
+  }
+  return false;
+}
+
+function removeNodeById(nodes: IndicatorNode[], id: string): IndicatorNode | null {
+  for (let i = 0; i < nodes.length; i++) {
+    const n = nodes[i];
+    if (n.id === id) return nodes.splice(i, 1)[0];
+
+    if (n.children?.length) {
+      const removed = removeNodeById(n.children, id);
+      if (removed) {
+        if (n.children.length === 0) delete n.children;
+        return removed;
+      }
+    }
+  }
+  return null;
+}
+
+export default function TemplateStructurePanel({ tree, selected, onSelectNode, onChangeTree, onRefreshJson }: Props) {
+  const { t } = useTranslation();
+  const draggingIdRef = useRef<string | null>(null);
+
+  const addNode = () => {
+    onChangeTree((prevTree) => {
+      const root = structuredClone(prevTree);
+
+      const newNode: IndicatorNode = {
+        id: nanoid(),
+        label: t('newNode', 'New node'),
+        code: '',
+      };
+
+      if (!selected?.id) {
+        root.push(newNode);
+        onSelectNode(newNode);
+        return root;
+      }
+
+      const path = findIndexPath(root, selected.id);
+      if (!path) return root;
+
+      const selNode = getNodeAtPath(root, path);
+      const isGroup = Boolean(selNode.children?.length) || selNode.type === 'group';
+
+      if (isGroup) {
+        selNode.children = selNode.children ?? [];
+        selNode.children.push(newNode);
+      } else {
+        const { siblings, index } = getSiblingsAtPath(root, path);
+        siblings.splice(index + 1, 0, newNode);
+      }
+
+      onSelectNode(newNode);
+      return root;
+    });
+  };
+
+  const moveUp = () => {
+    if (!selected?.id) return;
+
+    onChangeTree((prevTree) => {
+      const root = structuredClone(prevTree);
+      const path = findIndexPath(root, selected.id);
+      if (!path) return root;
+
+      const { siblings, index } = getSiblingsAtPath(root, path);
+      if (index <= 0) return root;
+
+      [siblings[index - 1], siblings[index]] = [siblings[index], siblings[index - 1]];
+      return root;
+    });
+  };
+
+  const moveDown = () => {
+    if (!selected?.id) return;
+
+    onChangeTree((prevTree) => {
+      const root = structuredClone(prevTree);
+      const path = findIndexPath(root, selected.id);
+      if (!path) return root;
+
+      const { siblings, index } = getSiblingsAtPath(root, path);
+      if (index >= siblings.length - 1) return root;
+
+      [siblings[index + 1], siblings[index]] = [siblings[index], siblings[index + 1]];
+      return root;
+    });
+  };
+
+  const outdent = () => {
+    if (!selected?.id) return;
+
+    onChangeTree((prevTree) => {
+      const root = structuredClone(prevTree);
+      const path = findIndexPath(root, selected.id);
+      if (!path || path.length < 2) return root;
+
+      const { siblings: currentSiblings, index: currentIndex } = getSiblingsAtPath(root, path);
+      const movedNode = currentSiblings.splice(currentIndex, 1)[0];
+
+      const parentPath = path.slice(0, -1);
+      const parentIndexInGrand = parentPath[parentPath.length - 1];
+
+      const grandParentPath = path.slice(0, -2);
+      const grandSiblings = grandParentPath.length ? getSiblingsAtDepth(root, grandParentPath) : root;
+
+      grandSiblings.splice(parentIndexInGrand + 1, 0, movedNode);
+
+      const parentNode = getNodeAtPath(root, parentPath);
+      if (parentNode.children && parentNode.children.length === 0) delete parentNode.children;
+
+      return root;
+    });
+  };
+
+  const onDragStart = (id: string) => (e: React.DragEvent) => {
+    draggingIdRef.current = id;
+    e.dataTransfer.setData('application/x-indicator-node-id', id);
+    e.dataTransfer.effectAllowed = 'move';
+  };
+
+  const onDragOver = (e: React.DragEvent) => {
+    e.preventDefault();
+    e.dataTransfer.dropEffect = 'move';
+  };
+
+  const onDropIndent = (targetId: string) => (e: React.DragEvent) => {
+    e.preventDefault();
+
+    const draggedId = e.dataTransfer.getData('application/x-indicator-node-id') || draggingIdRef.current;
+    if (!draggedId || draggedId === targetId) return;
+
+    onChangeTree((prevTree) => {
+      const root = structuredClone(prevTree);
+
+      const draggedNode = removeNodeById(root, draggedId);
+      if (!draggedNode) return root;
+
+      if (containsId(draggedNode, targetId)) {
+        root.push(draggedNode);
+        return root;
+      }
+
+      const targetPath = findIndexPath(root, targetId);
+      if (!targetPath) {
+        root.push(draggedNode);
+        return root;
+      }
+
+      const targetNode = getNodeAtPath(root, targetPath);
+      targetNode.children = targetNode.children ?? [];
+      targetNode.children.push(draggedNode);
+
+      return root;
+    });
+  };
+
+  const renderTree = (nodes: IndicatorNode[]) =>
+    nodes.map((node) => (
+      <TreeNode
+        key={node.id}
+        id={node.id}
+        label={
+          <div
+            className={styles.draggableLabel}
+            draggable
+            onDragStart={onDragStart(node.id)}
+            onDragOver={onDragOver}
+            onDrop={onDropIndent(node.id)}
+            onClick={() => onSelectNode(node)}
+            role="button"
+            tabIndex={0}
+          >
+            <span className={styles.nodeText}>{node.label}</span>
+            {node.code ? <span className={styles.nodeCode}>{node.code}</span> : null}
+          </div>
+        }
+      >
+        {node.children?.length ? renderTree(node.children) : null}
+      </TreeNode>
+    ));
+
+  return (
+    <div className={styles.root}>
+      <Tile className={styles.tile}>
+        <div className={styles.tileHeaderRow}>
+          <h3 className={styles.tileTitle}>{t('templateStructure', 'Template Structure')}</h3>
+
+          <Button size="sm" kind="ghost" onClick={onRefreshJson}>
+            {t('refreshJson', 'Refresh JSON')}
+          </Button>
+        </div>
+
+        <div className={styles.treeWrap}>
+          <TreeView label={t('templateStructure', 'Template Structure')} hideLabel selected={selected?.id ? [selected.id] : []}>
+            {renderTree(tree)}
+          </TreeView>
+        </div>
+
+        <div className={styles.structureActions}>
+          <Button size="sm" kind="primary" onClick={addNode}>
+            {t('addNode', 'Add Node')}
+          </Button>
+
+          <Button size="sm" kind="secondary" onClick={moveUp} disabled={!selected?.id}>
+            {t('moveUp', 'Move Up')}
+          </Button>
+
+          <Button size="sm" kind="secondary" onClick={moveDown} disabled={!selected?.id}>
+            {t('moveDown', 'Move Down')}
+          </Button>
+
+          <Button size="sm" kind="tertiary" onClick={outdent} disabled={!selected?.id}>
+            {t('outdent', 'Outdent')}
+          </Button>
+        </div>
+      </Tile>
+    </div>
+  );
+}

package/src/components/shared/template-structure-panel/template-structure-panel.scss

@@ -0,0 +1,81 @@
+.root {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+}
+
+.tile {
+  flex: 1;
+  min-height: 0;
+  padding: 1rem;
+  border-radius: 0.5rem;
+
+  display: flex;
+  flex-direction: column;
+}
+
+.tileHeaderRow {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  margin-bottom: 0.75rem;
+  flex-shrink: 0;
+}
+
+.tileTitle {
+  margin: 0;
+  font-weight: 600;
+}
+
+.treeWrap {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+
+  border: 1px solid var(--cds-border-subtle, #e0e0e0);
+  border-radius: 0.375rem;
+  padding: 0.5rem;
+  background: var(--cds-layer-01, #fff);
+}
+
+.structureActions {
+  display: flex;
+  gap: 0.5rem;
+  margin-top: 0.75rem;
+  flex-wrap: wrap;
+  flex-shrink: 0;
+}
+
+.draggableLabel {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  width: 100%;
+  cursor: grab;
+  padding: 0.125rem 0.25rem;
+  border-radius: 0.25rem;
+}
+
+.draggableLabel:active {
+  cursor: grabbing;
+}
+
+.draggableLabel:hover {
+  background: var(--cds-layer-hover-01, #f4f4f4);
+}
+
+.nodeText {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.nodeCode {
+  font-size: 0.75rem;
+  opacity: 0.75;
+  border: 1px solid var(--cds-border-subtle, #e0e0e0);
+  padding: 0.1rem 0.35rem;
+  border-radius: 0.375rem;
+}

package/src/config-schema.ts

@@ -0,0 +1,23 @@
+import { Type } from '@openmrs/esm-framework';
+
+export const configSchema = {
+  defaultMapping: {
+    _description: 'Defaults used by the report builder.',
+    keyPattern: {
+      _default: '{code}_{age}_{sex}',
+      _description: 'Default key pattern for flat values.',
+      _type: Type.String,
+    },
+    defaultDimensions: {
+      _description: 'Default dimension names used in templates.',
+      age: {
+        _default: 'age',
+        _type: Type.String,
+      },
+      sex: {
+        _default: 'sex',
+        _type: Type.String,
+      },
+    },
+  },
+};

package/src/globals.d.ts

@@ -0,0 +1,14 @@
+declare module '*.scss' {
+  const content: { [className: string]: string };
+  export default content;
+}
+
+declare module '*.module.scss' {
+  const classes: { [className: string]: string };
+  export default classes;
+}
+
+// Webpack-specific typing used by OpenMRS translations loading
+interface Require {
+  context(directory: string, useSubdirectories: boolean, regExp: RegExp, mode?: string): any;
+}

package/src/hooks/theme/useDataThemes.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+import type { DataTheme } from '../../types/theme/data-theme.types';
+import { listThemes } from '../../resources/theme/data-theme.api';
+
+export function useDataThemes(query: string) {
+    const [loading, setLoading] = React.useState(false);
+    const [error, setError] = React.useState<string | null>(null);
+    const [themes, setThemes] = React.useState<DataTheme[]>([]);
+
+    const reload = React.useCallback(async () => {
+        setLoading(true);
+        setError(null);
+        try {
+            const data = await listThemes(query?.trim() || undefined);
+            setThemes(data);
+        } catch (e: any) {
+            setError(e?.message ?? String(e));
+        } finally {
+            setLoading(false);
+        }
+    }, [query]);
+
+    React.useEffect(() => {
+        reload();
+    }, [reload]);
+
+    return { themes, loading, error, reload, setThemes };
+}

package/src/hooks/theme/useMambaTableMeta.ts

@@ -0,0 +1,34 @@
+import React from 'react';
+import { getMambaTableMeta } from '../../resources/theme/mamba-table-meta.api';
+import type { TableColumn } from '../../resources/theme/mamba-table-meta.api';
+
+export function useMambaTableMeta(table?: string, enabled: boolean = true) {
+    const [columns, setColumns] = React.useState<TableColumn[]>([]);
+    const [loading, setLoading] = React.useState(false);
+    const [error, setError] = React.useState<string | null>(null);
+
+    React.useEffect(() => {
+        // ✅ don’t load until enabled AND a table is selected
+        if (!enabled || !table) {
+            setColumns([]);
+            setLoading(false);
+            setError(null);
+            return;
+        }
+
+        const ac = new AbortController();
+        setLoading(true);
+        setError(null);
+
+        getMambaTableMeta(table, ac.signal)
+            .then((cols) => setColumns(Array.isArray(cols) ? cols : []))
+            .catch((e) => {
+                if (e?.name !== 'AbortError') setError(e?.message ?? 'Failed to load columns');
+            })
+            .finally(() => setLoading(false));
+
+        return () => ac.abort();
+    }, [table, enabled]);
+
+    return { columns, loading, error };
+}

package/src/hooks/theme/useMambaTables.ts

@@ -0,0 +1,63 @@
+import React from 'react';
+import { getSchemaTables, type SchemaTable } from '../../resources/theme/mamba-schema.api';
+
+function toTableName(t: SchemaTable | any): string {
+    // Try common backend shapes
+    return (
+        t?.name ??
+        t?.table ??
+        t?.tableName ??
+        t?.view ??
+        t?.value ?? // fallback (some APIs)
+        ''
+    );
+}
+
+export function useMambaTables(enabled: boolean) {
+    const [tables, setTables] = React.useState<string[]>([]);
+    const [loading, setLoading] = React.useState(false);
+    const [error, setError] = React.useState<string | null>(null);
+
+    React.useEffect(() => {
+        if (!enabled) {
+            setTables([]);
+            setLoading(false);
+            setError(null);
+            return;
+        }
+
+        const ac = new AbortController();
+        setLoading(true);
+        setError(null);
+
+        getSchemaTables(ac.signal).then((data) => {
+                // data is expected to be SchemaTable[] or something close
+
+            console.log("I am here trying to see if data is loaded")
+                const names = (data ?? [])
+                    .map((t) => toTableName(t))
+                    .map((x) => x.trim())
+                    .filter(Boolean);
+
+                // de-dupe while preserving order
+                const uniq: string[] = [];
+                const seen = new Set<string>();
+                for (const n of names) {
+                    if (!seen.has(n)) {
+                        seen.add(n);
+                        uniq.push(n);
+                    }
+                }
+
+                setTables(uniq);
+            })
+            .catch((e) => {
+                if (e?.name !== 'AbortError') setError(e?.message ?? 'Failed to load tables');
+            })
+            .finally(() => setLoading(false));
+
+        return () => ac.abort();
+    }, [enabled]);
+
+    return { tables, loading, error };
+}

package/src/index.ts

@@ -0,0 +1,23 @@
+import { defineConfigSchema, getAsyncLifecycle } from '@openmrs/esm-framework';
+import { configSchema } from './config-schema';
+
+const moduleName = '@epcare/esm-report-builder';
+
+const options = {
+  featureName: 'report-builder',
+  moduleName,
+};
+
+export const reportBuilderAdminLink = getAsyncLifecycle(
+  () => import('./admin-card-link.extension'),
+  options,
+);
+
+// Optional but recommended if you add translations folder
+export const importTranslation = require.context('../translations', true, /.json$/, 'lazy');
+
+export const root = getAsyncLifecycle(() => import('./root.component'), options);
+
+export function startupApp() {
+  defineConfigSchema(moduleName, configSchema);
+}

package/src/resources/agegroup/agegroups.api.ts

@@ -0,0 +1,58 @@
+import { omrsGet } from '../openmrs-api';
+
+type RestList<T> = { results?: T[] };
+
+export type AgeGroupRef = {
+    id: number;
+    display: string;
+    code?: string;
+    label: string;
+    minAgeDays: number;
+    maxAgeDays: number;
+    sortOrder: number;
+    active: boolean;
+};
+
+export type AgeCategoryDto = {
+    uuid: string;
+    display: string;
+    name: string;
+    description?: string;
+    code: string;
+    version?: string;
+    effectiveFrom?: string;
+    effectiveTo?: string | null;
+    active: boolean;
+    ageGroups?: AgeGroupRef[];
+    retired?: boolean;
+};
+
+export type AgeCategoryOption = {
+    uuid: string;
+    code: string;
+    label: string; // what we show in dropdown
+    name: string;
+    description?: string;
+    ageGroups: AgeGroupRef[];
+};
+
+export async function listAgeCategoriesWithGroups(signal?: AbortSignal): Promise<AgeCategoryOption[]> {
+    // ✅ categories endpoint
+    const data = await omrsGet<RestList<AgeCategoryDto>>('/reportbuilder/agecategory?v=full', signal);
+
+    const results = Array.isArray(data?.results) ? data.results : [];
+
+    return results
+        .filter((c) => !c.retired)
+        .map((c) => ({
+            uuid: c.uuid,
+            code: c.code,
+            name: c.name ?? c.display ?? c.code,
+            description: c.description,
+            label: `${c.name ?? c.display ?? c.code} (${c.code})`,
+            ageGroups: Array.isArray(c.ageGroups)
+                ? c.ageGroups.slice().sort((a, b) => (a.sortOrder ?? 0) - (b.sortOrder ?? 0))
+                : [],
+        }))
+        .sort((a, b) => a.label.localeCompare(b.label));
+}

package/src/resources/concepts/concept-mapper.ts

@@ -0,0 +1,21 @@
+export type ConceptMappingSummary = {
+    source: string;   // e.g. "CIEL", "ICD-10-WHO", "SNOMED CT"
+    code: string;     // e.g. "116128", "B54", "61462000"
+    mapType?: string; // e.g. "SAME-AS"
+    display: string;  // original display string e.g. "CIEL: 116128"
+};
+
+export type ConceptSummary = {
+    uuid: string;
+    display: string;
+
+    conceptClass?: string; // e.g. "Diagnosis"
+    datatype?: string;     // e.g. "Coded", "Numeric", "N/A"
+
+    // “best effort” external codes for showing + decisioning
+    mappings: ConceptMappingSummary[];
+
+    // convenience fields
+    cielCode?: string;     // if present
+    icd10Code?: string;    // if present
+};

package/src/resources/concepts/concept-types.ts

@@ -0,0 +1,31 @@
+export type ConceptMapping = {
+    display: string;
+    uuid: string;
+    conceptMapType?: {
+        display?: string;
+    };
+};
+
+export type ConceptSummary = {
+    id: number;
+    uuid: string;
+    display: string;
+
+    datatype?: {
+        uuid: string;
+        name: string;
+    };
+
+    conceptClass?: {
+        uuid: string;
+        name: string;
+    };
+
+    answers?: Array<{
+        id: number;
+        uuid: string;
+        display: string;
+    }>;
+
+    mappings?: ConceptMapping[];
+};