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

package/src/components/report-sections/section-utils.ts

@@ -0,0 +1,50 @@
+import type { IndicatorDto } from '../../resources/indicator/indicators.api';
+import type { FinalIndicatorAuthoringV1 } from '../indicators/utils/final-indicator-sql.utils';
+
+export function safeTrim(s: any) {
+    const v = (s ?? '').toString().trim();
+    return v.length ? v : '';
+}
+
+export function makeDisaggKey(ageGroupLabel: string, gender: string) {
+    return `${ageGroupLabel}__${gender}`;
+}
+
+export function safeParseJson(s?: string) {
+    try {
+        return s ? JSON.parse(s) : null;
+    } catch {
+        return null;
+    }
+}
+
+export function normalizeCompiledSql(sql: string) {
+    if (!sql) return sql;
+
+    let out = sql
+        .replace(/&/g, '&')
+        .replace(/&lt;/g, '<')
+        .replace(/&gt;/g, '>')
+        .replace(/&quot;/g, '"')
+        .replace(/&#39;/g, "'");
+
+    // Handle escaped newlines - convert literal \n to actual newlines
+    // This can happen when SQL is serialized through JSON in the backend
+    out = out.replace(/\\n/g, '\n');
+
+    // convert quoted placeholders into named params
+    out = out.replace(/':startDate'/g, ':startDate').replace(/':endDate'/g, ':endDate');
+
+    return out;
+}
+
+export function parseFinalAuthoring(ind: IndicatorDto): FinalIndicatorAuthoringV1 | null {
+    try {
+        if (!ind?.configJson) return null;
+        const obj = JSON.parse(ind.configJson);
+        if (obj && obj.version === 1 && (obj.ageCategoryCode || obj.ageGroupSetCode)) return obj as FinalIndicatorAuthoringV1;
+        return null;
+    } catch {
+        return null;
+    }
+}

package/src/components/report-sections/sections-page.scss

@@ -0,0 +1,79 @@
+.page {
+  width: 100%;
+  margin: 0 auto;
+  padding: 1.5rem 0 2rem;
+}
+
+.sectionsPage {
+  width: 100%;
+}
+
+.headerRow {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: 1rem;
+
+  padding: 1rem 1.5rem;
+  border-bottom: 1px solid var(--cds-border-subtle, #e0e0e0);
+  background: var(--cds-layer, #ffffff);
+}
+
+.title {
+  font-size: 1.5rem;
+  font-weight: 600;
+  line-height: 1.2;
+  margin: 0;
+}
+
+.surface {
+  margin: 0 1.5rem 1.5rem;
+  background: var(--cds-layer, #ffffff);
+  border: 1px solid var(--cds-border-subtle, #e0e0e0);
+  border-radius: 0.25rem;
+  overflow: hidden;
+}
+
+.toolbarRow {
+  padding: 0.75rem;
+  border-bottom: 1px solid var(--cds-border-subtle, #e0e0e0);
+}
+
+.footerRow {
+  padding: 0.75rem;
+  border-top: 1px solid var(--cds-border-subtle, #e0e0e0);
+  background: var(--cds-layer-accent, #f4f4f4);
+}
+
+.footerText {
+  opacity: 0.85;
+}
+
+.rowIconWrap {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.rowIndexTag {
+  margin-left: 0.25rem;
+}
+
+.nameCell {
+  display: flex;
+  align-items: center;
+}
+
+.nameText {
+  font-weight: 600;
+}
+
+.countCell {
+  font-weight: 600;
+  opacity: 0.85;
+}
+
+.actionsCell {
+  display: flex;
+  justify-content: flex-end;
+}

package/src/components/run-reports/run-reports-page.component.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import DataVisualizer from '../data-visualizer/data-visualizer.component';
+
+const RunReportsPage: React.FC = () => {
+  return <DataVisualizer />;
+};
+
+export default RunReportsPage;

package/src/components/security/access-denied-page.component.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Button, InlineNotification, Tag } from '@carbon/react';
+import { useNavigate } from 'react-router-dom';
+
+import { rbDisplay, RB } from '../../constants/privileges';
+import { useReportBuilderPrivileges } from '../../hooks/use-report-builder-privileges';
+import styles from './access-denied-page.scss';
+
+interface AccessDeniedPageProps {
+    /** Full privilege names, e.g. `Task: reportbuilder.report.edit`. */
+    requiredPrivileges?: string[];
+}
+
+const AccessDeniedPage: React.FC<AccessDeniedPageProps> = ({ requiredPrivileges }) => {
+    const { t } = useTranslation();
+    const navigate = useNavigate();
+    const { has } = useReportBuilderPrivileges();
+    const privileges = requiredPrivileges ?? [];
+
+    return (
+        <div className={styles.container}>
+            <InlineNotification
+                lowContrast
+                kind="error"
+                title={t('accessDenied', 'Access denied')}
+                subtitle={t(
+                    'accessDeniedSubtitle',
+                    'Your account does not have permission to open this page.',
+                )}
+                hideCloseButton
+            />
+
+            {privileges.length > 0 && (
+                <div className={styles.section}>
+                    <p className={styles.label}>
+                        {t('requiredPrivileges', 'Required privilege(s):')}
+                    </p>
+                    <div className={styles.tags}>
+                        {privileges.map((privilege) => (
+                            <Tag key={privilege} type="red">
+                                {rbDisplay(privilege)}
+                            </Tag>
+                        ))}
+                    </div>
+                    <p className={styles.hint}>
+                        {t(
+                            'accessDeniedHint',
+                            'Ask your administrator to grant you the report builder role carrying these privileges.',
+                        )}
+                    </p>
+                </div>
+            )}
+
+            <div className={styles.actions}>
+                {has(RB.REPORT_VIEW) && (
+                    <Button kind="primary" onClick={() => navigate('/')}>
+                        {t('goToHome', 'Go to Home')}
+                    </Button>
+                )}
+                <Button kind="secondary" onClick={() => navigate(-1)}>
+                    {t('goBack', 'Go back')}
+                </Button>
+            </div>
+        </div>
+    );
+};
+
+export default AccessDeniedPage;

package/src/components/security/access-denied-page.scss

@@ -0,0 +1,39 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/type' as type;
+
+.container {
+  display: flex;
+  flex-direction: column;
+  gap: spacing.$spacing-06;
+  max-width: 40rem;
+  padding: spacing.$spacing-07 spacing.$spacing-06;
+}
+
+.section {
+  display: flex;
+  flex-direction: column;
+  gap: spacing.$spacing-03;
+}
+
+.label {
+  @include type.type-style('body-01');
+
+  color: var(--cds-text-secondary);
+}
+
+.tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: spacing.$spacing-02;
+}
+
+.hint {
+  @include type.type-style('body-01');
+
+  color: var(--cds-text-secondary);
+}
+
+.actions {
+  display: flex;
+  gap: spacing.$spacing-03;
+}

package/src/components/security/privilege-route.component.test.tsx

@@ -0,0 +1,79 @@
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import { act } from 'react-dom/test-utils';
+import { MemoryRouter } from 'react-router-dom';
+
+jest.mock('@openmrs/esm-framework', () => ({
+    useSession: jest.fn(),
+}));
+
+import { useSession } from '@openmrs/esm-framework';
+import { RB } from '../../constants/privileges';
+import PrivilegeRoute from './privilege-route.component';
+
+(globalThis as any).IS_REACT_ACT_ENVIRONMENT = true;
+
+function sessionWith(privileges: string[], authenticated = true) {
+    return {
+        authenticated,
+        user: {
+            uuid: 'u-1',
+            display: 'User',
+            privileges: privileges.map((name) => ({ uuid: name, name, display: name })),
+            roles: [],
+        },
+    } as any;
+}
+
+function renderAt(route: string, ui: React.ReactElement): { text: () => string; unmount: () => void } {
+    const container = document.createElement('div');
+    document.body.appendChild(container);
+    const root = createRoot(container);
+    act(() => {
+        root.render(<MemoryRouter initialEntries={[route]}>{ui}</MemoryRouter>);
+    });
+    return {
+        text: () => container.textContent ?? '',
+        unmount: () => act(() => root.unmount()),
+    };
+}
+
+describe('PrivilegeRoute', () => {
+    it('renders children when a required privilege is held (any-of)', () => {
+        (useSession as unknown as jest.Mock).mockReturnValue(sessionWith([RB.PACKAGE_EXPORT]));
+        const view = renderAt(
+            '/import-export',
+            <PrivilegeRoute required={[RB.PACKAGE_IMPORT, RB.PACKAGE_EXPORT]}>
+                <div>secret content</div>
+            </PrivilegeRoute>,
+        );
+        expect(view.text()).toContain('secret content');
+        view.unmount();
+    });
+
+    it('renders the access denied page naming the privilege when unauthorised', () => {
+        (useSession as unknown as jest.Mock).mockReturnValue(sessionWith([RB.REPORT_VIEW]));
+        const view = renderAt(
+            '/run',
+            <PrivilegeRoute required={[RB.REPORT_RUN]}>
+                <div>secret content</div>
+            </PrivilegeRoute>,
+        );
+        expect(view.text()).not.toContain('secret content');
+        expect(view.text()).toContain('Access denied');
+        expect(view.text()).toContain('report.run');
+        view.unmount();
+    });
+
+    it('renders nothing and does not crash for an unauthenticated visitor', () => {
+        (useSession as unknown as jest.Mock).mockReturnValue(sessionWith([], false));
+        const view = renderAt(
+            '/',
+            <PrivilegeRoute required={[RB.REPORT_VIEW]}>
+                <div>secret content</div>
+            </PrivilegeRoute>,
+        );
+        expect(view.text()).toBe('');
+        view.unmount();
+    });
+});

package/src/components/security/privilege-route.component.tsx

@@ -0,0 +1,39 @@
+import React, { useEffect } from 'react';
+
+import { useReportBuilderPrivileges } from '../../hooks/use-report-builder-privileges';
+import { redirectToLogin } from '../../utils/api-error.utils';
+import AccessDeniedPage from './access-denied-page.component';
+
+interface PrivilegeRouteProps {
+    /** Privileges granting access; any-of semantics, matching the backend's @Authorized. */
+    required: string[];
+    children: React.ReactNode;
+}
+
+/**
+ * Route guard: renders children only when the signed-in user holds at least one
+ * of the required privileges; otherwise renders the friendly access denied page.
+ * Unauthenticated visitors are sent to the login page instead (401 vs 403).
+ * This is UX only — the backend remains the security boundary.
+ */
+const PrivilegeRoute: React.FC<PrivilegeRouteProps> = ({ required, children }) => {
+    const { has, isAuthenticated } = useReportBuilderPrivileges();
+
+    useEffect(() => {
+        if (!isAuthenticated) {
+            redirectToLogin();
+        }
+    }, [isAuthenticated]);
+
+    if (!isAuthenticated) {
+        return null;
+    }
+
+    if (!has(...required)) {
+        return <AccessDeniedPage requiredPrivileges={required} />;
+    }
+
+    return <>{children}</>;
+};
+
+export default PrivilegeRoute;

package/src/components/shared/compile-setup-modal.component.tsx

@@ -0,0 +1,182 @@
+/**
+ * Compile Setup Modal
+ *
+ * A reusable modal for selecting report category and theme before compiling.
+ * This modal appears when the user clicks "Compile" but the report is missing
+ * category or theme information.
+ *
+ * Features:
+ * - Category selection (required for compile)
+ * - Theme selection (optional, for organization)
+ * - Description for both selections explaining their purpose
+ * - Confirm/Cancel actions
+ */
+
+import React, { useState, useEffect } from 'react';
+import {
+  Modal,
+  ModalHeader,
+  ModalBody,
+  ModalFooter,
+  Button,
+  ButtonSet,
+  Dropdown,
+  InlineNotification,
+  Stack,
+  Tile,
+} from '@carbon/react';
+import { Information } from '@carbon/react/icons';
+
+import { listReportCategories, type ReportCategoryDto } from '../../resources/report-category/report-category.api';
+
+export type CompileSetupResult = {
+  categoryUuid: string;
+};
+
+type Props = {
+  /** Whether the modal is open */
+  open: boolean;
+  /** Current category UUID (if any) */
+  currentCategoryUuid?: string;
+  /** Callback when user confirms selection */
+  onConfirm: (result: CompileSetupResult) => void;
+  /** Callback when user cancels */
+  onClose: () => void;
+  /** Whether the report is a linelist report (affects messaging) */
+  reportType?: 'linelist' | 'aggregate';
+};
+
+const CompileSetupModal: React.FC<Props> = ({
+  open,
+  currentCategoryUuid = '',
+  onConfirm,
+  onClose,
+  reportType = 'linelist',
+}) => {
+  const [categories, setCategories] = useState<ReportCategoryDto[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [loadError, setLoadError] = useState<string | null>(null);
+
+  // Selected value
+  const [selectedCategory, setSelectedCategory] = useState<ReportCategoryDto | null>(null);
+
+  // Load categories when modal opens
+  useEffect(() => {
+    if (open) {
+      setLoading(true);
+      setLoadError(null);
+
+      listReportCategories()
+        .then((cats) => {
+          setCategories(cats);
+
+          // Set current selection
+          if (currentCategoryUuid) {
+            const currentCat = cats.find(c => c.uuid === currentCategoryUuid);
+            if (currentCat) setSelectedCategory(currentCat);
+          }
+        })
+        .catch((err) => {
+          setLoadError(err?.message || 'Failed to load categories');
+        })
+        .finally(() => {
+          setLoading(false);
+        });
+    }
+  }, [open, currentCategoryUuid]);
+
+  const handleConfirm = () => {
+    if (!selectedCategory?.uuid) {
+      return; // Category is required
+    }
+    onConfirm({
+      categoryUuid: selectedCategory.uuid,
+    });
+  };
+
+  const canConfirm = Boolean(selectedCategory?.uuid);
+
+  return (
+    <Modal
+      open={open}
+      onRequestClose={ onClose}
+      size="sm"
+      modalHeading="Setup Report Before Compile"
+      modalLabel="Report Organization"
+      passiveModal
+    >
+      <ModalHeader />
+      <ModalBody>
+        <Stack gap={6}>
+          {/* Information notification */}
+          <Tile>
+            <div style={{ display: 'flex', gap: '0.75rem', alignItems: 'flex-start' }}>
+              <Information size={20} />
+              <div>
+                <p style={{ margin: 0, fontWeight: 500 }}>
+                  Before compiling, please organize your report.
+                </p>
+                <p style={{ margin: '0.5rem 0 0 0', fontSize: '0.875rem', opacity: 0.9 }}>
+                  Select a category to help organize and publish your report in the system.
+                </p>
+              </div>
+            </div>
+          </Tile>
+
+          {/* Load error */}
+          {loadError && (
+            <InlineNotification
+              kind="error"
+              title="Error"
+              subtitle={loadError}
+              hideCloseButton
+            />
+          )}
+
+          {/* Category Selection (Required) */}
+          <div>
+            <Dropdown
+              id="category-select"
+              titleText="Category *"
+              label="Select a category"
+              items={categories}
+              itemToString={(item: ReportCategoryDto) => item?.name || ''}
+              selectedItem={selectedCategory}
+              onChange={({ selectedItem }) => setSelectedCategory(selectedItem as ReportCategoryDto)}
+              disabled={loading}
+            />
+            <p style={{ fontSize: '0.875rem', marginTop: '0.5rem', opacity: 0.8 }}>
+              Required. The category determines where this report appears in the report library.
+            </p>
+          </div>
+
+          {/* Report type specific guidance */}
+          {reportType === 'linelist' && (
+            <Tile style={{ background: 'var(--cds-layer-01, #f4f4f4)' }}>
+              <p style={{ margin: 0, fontSize: '0.875rem' }}>
+                <strong>Linelist Reports:</strong> These reports display patient-level data in rows.
+                Categorizing helps users find linelist reports for specific use cases.
+              </p>
+            </Tile>
+          )}
+        </Stack>
+      </ModalBody>
+      <ModalFooter>
+        <ButtonSet>
+          <Button kind="secondary" onClick={onClose}>
+            Cancel
+          </Button>
+          <Button
+            kind="primary"
+            onClick={handleConfirm}
+            disabled={!canConfirm || loading}
+          >
+            Save & Compile
+          </Button>
+        </ButtonSet>
+      </ModalFooter>
+    </Modal>
+  );
+};
+
+export default CompileSetupModal;