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

package/src/features/report-visualizer/types/index.ts

@@ -0,0 +1 @@
+export * from './report-visualizer.types';

package/src/features/report-visualizer/types/report-visualizer.types.ts

@@ -0,0 +1,104 @@
+/**
+ * Report Visualizer Types
+ *
+ * Shared types for the report visualizer feature.
+ */
+
+/**
+ * Report library item from the API
+ * Re-exported from data-visualizer.resource.ts for convenience
+ */
+export interface ReportLibraryItem {
+  uuid: string;
+  display?: string;
+  name: string;
+  description?: string;
+  code?: string;
+  sourceType?: string;
+  reportDefinitionUuid?: string;
+  reportBuilderReportUuid?: string;
+  reportType?: string;
+  migrated?: boolean;
+  retired?: boolean;
+  category?: ReportLibraryCategoryRef;
+  metaJson?: string;
+}
+
+/**
+ * Report category reference
+ */
+export interface ReportLibraryCategoryRef {
+  uuid?: string;
+  display?: string;
+  name?: string;
+  description?: string;
+}
+
+/**
+ * Report category DTO
+ */
+export interface ReportCategoryDto {
+  uuid: string;
+  display?: string;
+  name: string;
+  description?: string;
+  retired?: boolean;
+}
+
+/**
+ * Report explorer state
+ */
+export interface ReportExplorerState {
+  explorerExpanded: boolean;           // Panel expanded/collapsed
+  explorerWidth: number;               // Current panel width (resizable)
+  reportSearch: string;                // Search query text
+  selectedCategory?: string;           // Selected category UUID
+  selectedTags: string[];              // Selected tag names
+  selectedReportUuid?: string;         // Currently selected report
+  parameterValues: Record<string, unknown>; // Runtime parameter values
+  activeView: "TABLE" | "PIVOT" | "CHART" | "REPORT_LAYOUT";
+  hasRun: boolean;                     // Whether report has been run
+  isDirtySinceRun: boolean;            // Whether params changed since run
+}
+
+/**
+ * Report capabilities (Phase 3+)
+ */
+export interface ReportCapabilities {
+  table: boolean;          // Can show as table
+  pivot: boolean;          // Can pivot (linelists only)
+  chart: boolean;          // Can chart
+  reportLayout: boolean;   // Has fixed layout (aggregate reports)
+  export: boolean;         // Can export
+  sendToDhis2: boolean;    // Can send to DHIS2
+}
+
+/**
+ * Report visualizer preferences (localStorage)
+ */
+export interface ReportVisualizerPreferences {
+  explorerExpanded: boolean;
+  explorerWidth: number;
+  rowsPerPage: number;
+  lastActiveView?: string;
+}
+
+/**
+ * Report view type enum
+ */
+export type ReportViewType = "TABLE" | "PIVOT" | "CHART" | "REPORT_LAYOUT";
+
+/**
+ * Report option (for dropdowns/lists)
+ */
+export interface ReportOption {
+  id: string;
+  uuid: string;
+  label: string;
+  name: string;
+  sourceType?: string;
+  reportType?: string;
+  code?: string;
+  category?: string;
+  metaJson?: string;
+}

package/src/features/report-visualizer/utils/status-colors.ts

@@ -0,0 +1,117 @@
+/**
+ * Status Color Coding Utilities
+ *
+ * Maps status values to Carbon Tag colors for consistent visual feedback.
+ *
+ * Phase 7.1: Status color coding
+ */
+
+export type StatusColorType = 'green' | 'red' | 'gray' | 'blue' | 'cool-gray' | 'warm-gray' | 'high-contrast' | 'cyan' | 'purple' | 'teal' | 'magenta' | 'outline';
+
+/**
+ * Common status values and their color mappings
+ * Extend this map as needed for specific reports
+ */
+const STATUS_COLOR_MAP: Record<string, StatusColorType> = {
+  // Positive/Success statuses
+  'completed': 'green',
+  'complete': 'green',
+  'done': 'green',
+  'finished': 'green',
+  'success': 'green',
+  'active': 'green',
+  'open': 'green',
+  'admitted': 'green',
+  'started': 'green',
+  'scheduled': 'blue',
+  'pending': 'blue',
+
+  // Negative/Error statuses
+  'missed': 'red',
+  'missed appointment': 'red',
+  'failed': 'red',
+  'error': 'red',
+  'cancelled': 'gray',
+  'canceled': 'gray',
+  'closed': 'gray',
+  'inactive': 'gray',
+  'lost to follow-up': 'red',
+  'lftu': 'red',
+  'dead': 'gray',
+  'deceased': 'gray',
+  'died': 'gray',
+
+  // Warning statuses - use warm-gray for warnings
+  'rescheduled': 'warm-gray',
+  'deferred': 'warm-gray',
+  'on hold': 'warm-gray',
+  'warning': 'red',
+
+  // Default for unknown statuses
+  'unknown': 'cool-gray',
+};
+
+/**
+ * Get the color type for a status value
+ * @param status - The status value to color
+ * @returns Carbon Tag color type
+ */
+export function getStatusColor(status: string | undefined | null): StatusColorType {
+  if (!status) return 'cool-gray';
+
+  // Check exact match (case-insensitive)
+  const normalizedStatus = status.toLowerCase().trim();
+  if (STATUS_COLOR_MAP[normalizedStatus]) {
+    return STATUS_COLOR_MAP[normalizedStatus];
+  }
+
+  // Check for partial matches
+  if (normalizedStatus.includes('complet') || normalizedStatus.includes('success')) {
+    return 'green';
+  }
+  if (normalizedStatus.includes('miss') || normalizedStatus.includes('fail')) {
+    return 'red';
+  }
+  if (normalizedStatus.includes('resched') || normalizedStatus.includes('defer')) {
+    return 'warm-gray';
+  }
+  if (normalizedStatus.includes('cancel') || normalizedStatus.includes('close')) {
+    return 'gray';
+  }
+  if (normalizedStatus.includes('pend') || normalizedStatus.includes('sched')) {
+    return 'blue';
+  }
+
+  // Default color
+  return 'cool-gray';
+}
+
+/**
+ * Check if a column name likely contains status values
+ * @param columnName - The column name to check
+ * @returns True if the column likely contains status values
+ */
+export function isStatusColumn(columnName: string): boolean {
+  const statusKeywords = [
+    'status',
+    'state',
+    'result',
+    'outcome',
+    'condition',
+    'appointment',
+    'visit',
+  ];
+  const lowerColumn = columnName.toLowerCase();
+  return statusKeywords.some(keyword => lowerColumn.includes(keyword));
+}
+
+/**
+ * Render a status value as a colored tag
+ * @param status - The status value
+ * @returns Object with color type for Carbon Tag
+ */
+export function getStatusTagColor(status: string | undefined | null): {
+  type: StatusColorType;
+} {
+  return { type: getStatusColor(status) };
+}

package/src/globals.d.ts

@@ -0,0 +1,9 @@
+declare module '*.scss' {
+  const content: { [className: string]: string };
+  export default content;
+}
+
+declare module '*.module.scss' {
+  const classes: { [className: string]: string };
+  export default classes;
+}

package/src/hooks/address-template.ts

@@ -0,0 +1,86 @@
+/**
+ * React hook for address template
+ *
+ * Provides address field mappings from the OpenMRS system setting.
+ */
+
+import { useState, useEffect } from 'react';
+import type { FilterFieldType } from '../types/linelist-types';
+import {
+  getAddressTemplate,
+  type AddressTemplate,
+} from '../resources/address-template/address-template.api';
+
+/**
+ * Hook to fetch and use the address template
+ */
+export function useAddressTemplate(): {
+  template: AddressTemplate | null;
+  loading: boolean;
+  error: Error | null;
+  refresh: () => Promise<void>;
+} {
+  const [template, setTemplate] = useState<AddressTemplate | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<Error | null>(null);
+
+  const fetchTemplate = async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const data = await getAddressTemplate();
+      setTemplate(data);
+    } catch (err) {
+      setError(err instanceof Error ? err : new Error('Failed to fetch address template'));
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchTemplate();
+  }, []);
+
+  return {
+    template,
+    loading,
+    error,
+    refresh: fetchTemplate,
+  };
+}
+
+/**
+ * Hook to get address fields for the data catalogue
+ * Returns an array of catalogue fields based on the address template
+ */
+export function useAddressFields(): {
+  addressFields: Array<{
+    id: string;
+    name: string;
+    label: string;
+    type: FilterFieldType;
+    source: 'CORE';
+    table: string;
+    isRepeated: boolean;
+    description: string;
+  }>;
+  loading: boolean;
+} {
+  const { template, loading } = useAddressTemplate();
+
+  const addressFields = template?.nameMappings.map((mapping) => ({
+    id: `openmrs.person_address.${mapping.field}`,
+    name: mapping.field,
+    label: mapping.display,
+    type: 'TEXT' as FilterFieldType,
+    source: 'CORE' as const,
+    table: 'person_address',
+    isRepeated: false,
+    description: mapping.label,
+  })) || [];
+
+  return {
+    addressFields,
+    loading,
+  };
+}

package/src/hooks/concept.ts

@@ -0,0 +1,112 @@
+/**
+ * Concept Hook
+ *
+ * Custom hook for fetching and searching OpenMRS concepts
+ * Used in observations and encounter diagnoses for linelist reports
+ */
+
+import { useState, useCallback } from 'react';
+import { searchConcepts, getConceptsByUuids, type ConceptDto } from '../resources/concept/concept.api';
+
+type UseConceptsOptions = {
+  enabled?: boolean;
+  debounceMs?: number;
+};
+
+/**
+ * Hook for searching concepts
+ */
+export function useConcepts(options: UseConceptsOptions = {}) {
+  const { enabled = true } = options;
+
+  const [concepts, setConcepts] = useState<ConceptDto[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const searchConceptsCallback = useCallback(
+    async (query: string) => {
+      if (!enabled) {
+        setConcepts([]);
+        return;
+      }
+
+      if (!query?.trim()) {
+        setConcepts([]);
+        return;
+      }
+
+      setLoading(true);
+      setError(null);
+
+      try {
+        const results = await searchConcepts(query);
+        setConcepts(results);
+      } catch (err) {
+        const errorMessage = err instanceof Error ? err.message : 'Failed to search concepts';
+        setError(errorMessage);
+        setConcepts([]);
+      } finally {
+        setLoading(false);
+      }
+    },
+    [enabled]
+  );
+
+  const getConceptsByUuidsCallback = useCallback(
+    async (uuids: string[]) => {
+      if (!uuids || uuids.length === 0) {
+        return [];
+      }
+
+      setLoading(true);
+      setError(null);
+
+      try {
+        const results = await getConceptsByUuids(uuids);
+        setConcepts(results);
+        return results;
+      } catch (err) {
+        const errorMessage = err instanceof Error ? err.message : 'Failed to fetch concepts';
+        setError(errorMessage);
+        setConcepts([]);
+        return [];
+      } finally {
+        setLoading(false);
+      }
+    },
+    []
+  );
+
+  return {
+    concepts,
+    loading,
+    error,
+    searchConcepts: searchConceptsCallback,
+    getConceptsByUuids: getConceptsByUuidsCallback,
+  };
+}
+
+/**
+ * Hook for managing a single concept selection
+ */
+export function useConceptSelection(initialConcept?: ConceptDto) {
+  const [selectedConcept, setSelectedConcept] = useState<ConceptDto | undefined>(initialConcept);
+  const [isOpen, setIsOpen] = useState(false);
+
+  const handleSelect = useCallback((concept: ConceptDto) => {
+    setSelectedConcept(concept);
+    setIsOpen(false);
+  }, []);
+
+  const handleClear = useCallback(() => {
+    setSelectedConcept(undefined);
+  }, []);
+
+  return {
+    selectedConcept,
+    isOpen,
+    setIsOpen,
+    handleSelect,
+    handleClear,
+  };
+}

package/src/hooks/indicator/index.ts

@@ -0,0 +1 @@
+export { useIndicatorsByTheme } from './useIndicatorsByTheme';

package/src/hooks/indicator/useIndicatorsByTheme.ts

@@ -0,0 +1,41 @@
+/**
+ * Hook to fetch indicators by theme
+ */
+
+import { useEffect, useState } from 'react';
+import { listIndicators } from '../../resources/indicator/indicators.api';
+import type { IndicatorDto } from '../../resources/indicator/indicators.api';
+
+type Result = {
+  indicators: IndicatorDto[];
+  loading: boolean;
+  error: string | null;
+};
+
+export function useIndicatorsByTheme(themeUuid?: string | null): Result {
+  const [indicators, setIndicators] = useState<IndicatorDto[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    setLoading(true);
+    setError(null);
+
+    // Fetch all indicators for population selection - independent of data theme
+    listIndicators({ v: 'full', includeRetired: false })
+      .then((data) => {
+        // For population selection, use all indicators regardless of theme
+        // Indicators define their own patient cohort and should be available independently
+        setIndicators(data);
+      })
+      .catch((err) => {
+        setError(err instanceof Error ? err.message : 'Failed to fetch indicators');
+        setIndicators([]);
+      })
+      .finally(() => {
+        setLoading(false);
+      });
+  }, [themeUuid]); // Keep themeUuid in deps, but don't filter by it
+
+  return { indicators, loading, error };
+}