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

package/src/features/report-visualizer/components/ReportExplorer/QuickFilters.tsx

@@ -0,0 +1,152 @@
+/**
+ * Quick Filters Component
+ *
+ * Common filter presets for fast navigation through reports.
+ * Provides one-click access to frequently used filter combinations.
+ *
+ * Presets:
+ * - All Reports: Clear all filters
+ * - Recent: Show recently used reports (placeholder for future)
+ * - Favorites: Show favorited reports (placeholder for future)
+ * - My Reports: Show user's reports (placeholder for future)
+ *
+ * Phase 2.5: Quick filter presets
+ */
+import React from 'react';
+import { Button, Tag } from '@carbon/react';
+import {
+  Renew,
+  Star,
+  User,
+  Time,
+} from '@carbon/react/icons';
+
+interface QuickFiltersProps {
+  onClearAll: () => void;
+  disabled?: boolean;
+  hasActiveFilters?: boolean;
+}
+
+interface QuickFilter {
+  id: string;
+  label: string;
+  icon: React.ElementType;
+  action: 'clear' | 'recent' | 'favorites' | 'mine';
+  disabled?: boolean;
+}
+
+const QUICK_FILTERS: QuickFilter[] = [
+  {
+    id: 'all',
+    label: 'All Reports',
+    icon: Renew,
+    action: 'clear',
+  },
+  {
+    id: 'recent',
+    label: 'Recent',
+    icon: Time,
+    action: 'recent',
+    disabled: true, // Placeholder for future feature
+  },
+  {
+    id: 'favorites',
+    label: 'Favorites',
+    icon: Star,
+    action: 'favorites',
+    disabled: true, // Placeholder for future feature
+  },
+  {
+    id: 'mine',
+    label: 'My Reports',
+    icon: User,
+    action: 'mine',
+    disabled: true, // Placeholder for future feature
+  },
+];
+
+const QuickFilters: React.FC<QuickFiltersProps> = ({
+  onClearAll,
+  disabled,
+  hasActiveFilters = false,
+}) => {
+  const handleFilterClick = (filter: QuickFilter) => {
+    if (filter.disabled || disabled) return;
+
+    switch (filter.action) {
+      case 'clear':
+        onClearAll();
+        break;
+      // Other actions are placeholders for future features
+      default:
+        break;
+    }
+  };
+
+  return (
+    <div style={{ marginBottom: '0.75rem' }}>
+      <div
+        style={{
+          display: 'flex',
+          gap: '0.5rem',
+          flexWrap: 'wrap',
+        }}
+      >
+        {QUICK_FILTERS.map((filter) => {
+          const Icon = filter.icon;
+          const isClearAction = filter.action === 'clear';
+          const isActive = isClearAction && hasActiveFilters;
+
+          return (
+            <Button
+              key={filter.id}
+              kind={isActive ? 'secondary' : 'ghost'}
+              size="sm"
+              disabled={disabled || filter.disabled}
+              onClick={() => handleFilterClick(filter)}
+              style={{
+                minWidth: 'auto',
+                padding: '0.375rem 0.625rem',
+                fontSize: '0.75rem',
+                height: '28px',
+                display: 'flex',
+                alignItems: 'center',
+                gap: '0.375rem',
+              }}
+            >
+              <Icon size={14} />
+              {filter.label}
+              {filter.disabled && (
+                <Tag
+                  size="sm"
+                  type="cool-gray"
+                  style={{
+                    marginLeft: '0.25rem',
+                    fontSize: '0.625rem',
+                    padding: '0 4px',
+                  }}
+                >
+                  Soon
+                </Tag>
+              )}
+            </Button>
+          );
+        })}
+      </div>
+      {hasActiveFilters && (
+        <div
+          style={{
+            fontSize: '0.7rem',
+            color: '#666',
+            marginTop: '0.375rem',
+            fontStyle: 'italic',
+          }}
+        >
+          Active filters applied • Click "All Reports" to clear
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default QuickFilters;

package/src/features/report-visualizer/components/ReportExplorer/ReportCategoryFilter.tsx

@@ -0,0 +1,54 @@
+/**
+ * Report Category Filter Component
+ *
+ * Dropdown filter for selecting report categories.
+ * First option is "All report categories" to show all reports.
+ *
+ * Phase 2.2: Category filtering
+ */
+import React from 'react';
+import { Select, SelectItem } from '@carbon/react';
+
+import type { ReportCategoryDto } from '../../types';
+
+interface ReportCategoryFilterProps {
+  categories: ReportCategoryDto[];
+  selectedCategory?: string;
+  onSelect: (category: string | undefined) => void;
+  disabled?: boolean;
+}
+
+const ReportCategoryFilter: React.FC<ReportCategoryFilterProps> = ({
+  categories,
+  selectedCategory,
+  onSelect,
+  disabled,
+}) => {
+  const handleCategoryChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    const value = event.target.value;
+    // If "All" is selected, pass undefined to clear filter
+    onSelect(value === 'all' ? undefined : value);
+  };
+
+  return (
+    <Select
+      id="report-category-filter"
+      labelText="Category"
+      value={selectedCategory || 'all'}
+      onChange={handleCategoryChange}
+      disabled={disabled}
+      size="sm"
+    >
+      <SelectItem value="all" text="All report categories" />
+      {categories.map((category) => (
+        <SelectItem
+          key={category.uuid}
+          value={category.uuid}
+          text={category.display || category.name}
+        />
+      ))}
+    </Select>
+  );
+};
+
+export default ReportCategoryFilter;

package/src/features/report-visualizer/components/ReportExplorer/ReportExplorerPanel.tsx

@@ -0,0 +1,201 @@
+/**
+ * Report Explorer Panel - Left Panel
+ *
+ * Collapsible left panel for report discovery and parameter configuration.
+ * Integrates all Phase 2 components: search, category filter, tag filter, report list, parameters, run button.
+ * Shows icon rail when collapsed (Phase 4).
+ *
+ * Adapts collapse pattern from linelist-builder-workspace.component.tsx (lines 1448-1514)
+ */
+import React from 'react';
+import { Button } from '@carbon/react';
+import { ChevronLeft } from '@carbon/react/icons';
+import styles from '../../report-visualizer.scss';
+
+import ReportSearch from './ReportSearch';
+import ReportCategoryFilter from './ReportCategoryFilter';
+import ReportTagFilter from './ReportTagFilter';
+import ReportList from './ReportList';
+import RuntimeParameterForm from './RuntimeParameterForm';
+import RunReportButton from './RunReportButton';
+import ReportExplorerRail from './ReportExplorerRail';
+
+import type { ReportLibraryItem, ReportCategoryDto } from '../../types';
+import type { LinelistParameter } from '../../../../types/linelist-types';
+
+interface ReportExplorerPanelProps {
+  collapsed: boolean;
+  width: number;
+  onCollapse: () => void;
+  onExpand: () => void;
+  // Report data
+  categories: ReportCategoryDto[];
+  availableTags: string[];
+  reports: ReportLibraryItem[];
+  // Current state
+  searchQuery: string;
+  selectedCategory?: string;
+  selectedTags: string[];
+  selectedReportUuid?: string;
+  // Parameters
+  reportParameters: LinelistParameter[];
+  parameterValues: Record<string, any>;
+  parameterErrors: Record<string, string>;
+  // Handlers
+  onSearchChange: (value: string) => void;
+  onCategoryChange: (category?: string) => void;
+  onTagsChange: (tags: string[]) => void;
+  onReportSelect: (report: ReportLibraryItem) => void;
+  onParameterChange: (values: Record<string, any>) => void;
+  onParametersReset: () => void;
+  onRunReport: () => void;
+  // UI state
+  loading?: boolean;
+  runningReport?: boolean;
+}
+
+const ReportExplorerPanel: React.FC<ReportExplorerPanelProps> = ({
+  collapsed,
+  width,
+  onCollapse,
+  onExpand,
+  categories,
+  availableTags,
+  reports,
+  searchQuery,
+  selectedCategory,
+  selectedTags,
+  selectedReportUuid,
+  reportParameters,
+  parameterValues,
+  parameterErrors,
+  onSearchChange,
+  onCategoryChange,
+  onTagsChange,
+  onReportSelect,
+  onParameterChange,
+  onParametersReset,
+  onRunReport,
+  loading,
+  runningReport,
+}) => {
+  // Determine badge counts for rail
+  const searchActive = searchQuery.trim().length > 0;
+  const categoryCount = categories.length;
+  const selectedTagCount = selectedTags.length;
+  const matchingReportCount = reports.length;
+
+  // Check parameter types for rail icons
+  const hasDateParams = reportParameters.some(p => p.type === 'DATE' || p.type === 'DATETIME');
+  const hasLocationParams = reportParameters.some(p => p.type === 'LOCATION');
+  const hasOtherParams = reportParameters.some(p =>
+    !['DATE', 'DATETIME', 'LOCATION'].includes(p.type)
+  );
+  const hasSelectedReport = !!selectedReportUuid;
+
+  // Show rail when collapsed
+  if (collapsed) {
+    return (
+      <ReportExplorerRail
+        onExpand={onExpand}
+        onRunReport={onRunReport}
+        searchActive={searchActive}
+        categoryCount={categoryCount}
+        selectedTagCount={selectedTagCount}
+        matchingReportCount={matchingReportCount}
+        hasDateParams={hasDateParams}
+        hasLocationParams={hasLocationParams}
+        hasOtherParams={hasOtherParams}
+        hasSelectedReport={hasSelectedReport}
+      />
+    );
+  }
+
+  return (
+    <aside
+      className={`${styles.explorerPanel}`}
+      style={{ width }}
+    >
+      {/* Panel Header - adapted from linelist-builder-workspace */}
+      <div className={styles.panelHeader}>
+        <h3 className={styles.panelTitle}>Report Explorer</h3>
+        <Button
+          kind="ghost"
+          size="sm"
+          hasIconOnly
+          renderIcon={ChevronLeft}
+          iconDescription="Hide report explorer"
+          onClick={onCollapse}
+        />
+      </div>
+
+      {/* Panel Content - Phase 2 components */}
+      <div className={styles.panelContent}>
+        {/* Compact Filter Section - fixed at top */}
+        <div className={styles.filterSection} style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem', paddingBottom: '0.75rem', borderBottom: '1px solid #e0e0e0' }}>
+          {/* Search */}
+          <ReportSearch
+            value={searchQuery}
+            onChange={onSearchChange}
+            disabled={loading}
+          />
+
+          {/* Category Filter */}
+          <ReportCategoryFilter
+            categories={categories}
+            selectedCategory={selectedCategory}
+            onSelect={onCategoryChange}
+            disabled={loading}
+          />
+
+          {/* Tag Filter */}
+          {availableTags.length > 0 && (
+            <ReportTagFilter
+              availableTags={availableTags}
+              selectedTags={selectedTags}
+              onChange={onTagsChange}
+              disabled={loading}
+            />
+          )}
+        </div>
+
+        {/* Parameters Section - shown when report is selected */}
+        {selectedReportUuid && reportParameters.length > 0 && (
+          <div className={styles.parameterSection} style={{ padding: '0.75rem 0', borderBottom: '1px solid #e0e0e0' }}>
+            <RuntimeParameterForm
+              parameters={reportParameters}
+              values={parameterValues}
+              errors={parameterErrors}
+              onChange={onParameterChange}
+              onReset={onParametersReset}
+              disabled={runningReport}
+            />
+            {/* Run Report Button */}
+            <div style={{ marginTop: '0.75rem' }}>
+              <RunReportButton
+                reportSelected={!!selectedReportUuid}
+                loading={runningReport}
+                onClick={onRunReport}
+              />
+            </div>
+          </div>
+        )}
+
+        {/* Report List - takes remaining space and scrolls independently */}
+        <div className={styles.reportsListWrapper} style={{ flex: 1, overflow: 'auto', paddingTop: '0.75rem' }}>
+          <h4 style={{ margin: '0 0 0.5rem 0', fontSize: '0.875rem', fontWeight: 600, color: '#161616' }}>
+            Reports {reports.length > 0 && `(${reports.length})`}
+          </h4>
+          <ReportList
+            reports={reports}
+            selectedReportUuid={selectedReportUuid}
+            onSelect={onReportSelect}
+            loading={loading}
+          />
+        </div>
+      </div>
+    </aside>
+  );
+};
+
+export default ReportExplorerPanel;

package/src/features/report-visualizer/components/ReportExplorer/ReportExplorerRail.tsx

@@ -0,0 +1,202 @@
+/**
+ * Report Explorer Rail Component
+ *
+ * Icon rail shown when explorer panel is collapsed.
+ * Displays icons with badges and tooltips for quick access.
+ *
+ * Phase 4: Collapsed rail state
+ */
+import React from 'react';
+import {
+  Button,
+  Tooltip,
+  Tag,
+} from '@carbon/react';
+import {
+  ChevronRight,
+  Search,
+  Folder,
+  Tag as TagIcon,
+  Document,
+  Calendar,
+  Location,
+  Filter,
+  Play,
+} from '@carbon/react/icons';
+import styles from '../../report-visualizer.scss';
+
+interface ReportExplorerRailProps {
+  onExpand: () => void;
+  onRunReport?: () => void;
+  // State for badges
+  searchActive?: boolean;
+  categoryCount?: number;
+  selectedTagCount?: number;
+  matchingReportCount?: number;
+  hasDateParams?: boolean;
+  hasLocationParams?: boolean;
+  hasOtherParams?: boolean;
+  hasSelectedReport?: boolean;
+}
+
+const RailIcon: React.FC<{
+  icon: React.ElementType;
+  label: string;
+  badge?: number | boolean;
+  disabled?: boolean;
+  onClick?: () => void;
+  isPrimaryAction?: boolean;
+}> = ({ icon: Icon, label, badge, disabled, onClick, isPrimaryAction }) => {
+  const button = (
+    <Button
+      kind={isPrimaryAction ? 'primary' : 'ghost'}
+      size="sm"
+      hasIconOnly
+      renderIcon={Icon}
+      iconDescription={label}
+      onClick={onClick}
+      disabled={disabled}
+      style={{ margin: '0.25rem 0' }}
+    />
+  );
+
+  // Show badge if number or if boolean is true
+  const showBadge = typeof badge === 'number' ? badge > 0 : badge;
+
+  return (
+    <div style={{ position: 'relative', display: 'inline-block' }}>
+      {button}
+      {showBadge && (
+        <Tag
+          size="sm"
+          type={isPrimaryAction ? 'green' : 'blue'}
+          style={{
+            position: 'absolute',
+            top: '-2px',
+            right: '-2px',
+            padding: '0 4px',
+            minHeight: '16px',
+            fontSize: '0.625rem',
+            fontWeight: 600,
+          }}
+        >
+          {typeof badge === 'number' ? badge : ''}
+        </Tag>
+      )}
+    </div>
+  );
+};
+
+const ReportExplorerRail: React.FC<ReportExplorerRailProps> = ({
+  onExpand,
+  onRunReport,
+  searchActive,
+  categoryCount,
+  selectedTagCount,
+  matchingReportCount,
+  hasDateParams,
+  hasLocationParams,
+  hasOtherParams,
+  hasSelectedReport,
+}) => {
+  return (
+    <aside
+      className={`${styles.explorerPanel} ${styles.collapsed}`}
+      style={{ width: 48, alignItems: 'center', padding: '0.5rem 0' }}
+    >
+      {/* Expand button - always at top */}
+      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '0.5rem', width: '100%' }}>
+        <Tooltip align="right" direction="right" label="Show report explorer">
+          <RailIcon icon={ChevronRight} label="Show report explorer" onClick={onExpand} />
+        </Tooltip>
+
+        {/* Search icon - with badge if active */}
+        {searchActive !== undefined && (
+          <Tooltip
+            align="right"
+            direction="right"
+            label={searchActive ? 'Search active' : 'Search reports'}
+          >
+            <RailIcon icon={Search} label="Search" badge={searchActive} />
+          </Tooltip>
+        )}
+
+        {/* Category icon - with badge for count */}
+        {categoryCount !== undefined && (
+          <Tooltip
+            align="right"
+            direction="right"
+            label={`Category${categoryCount === 1 ? '' : 'ies'}: ${categoryCount}`}
+          >
+            <RailIcon icon={Folder} label="Category filter" badge={categoryCount} />
+          </Tooltip>
+        )}
+
+        {/* Tag icon - with badge for selected count */}
+        {selectedTagCount !== undefined && selectedTagCount > 0 && (
+          <Tooltip
+            align="right"
+            direction="right"
+            label={`${selectedTagCount} tag${selectedTagCount === 1 ? '' : 's'} selected`}
+          >
+            <RailIcon icon={TagIcon} label="Tag filter" badge={selectedTagCount} />
+          </Tooltip>
+        )}
+
+        {/* Report icon - with badge for matching count */}
+        {matchingReportCount !== undefined && (
+          <Tooltip
+            align="right"
+            direction="right"
+            label={`${matchingReportCount} report${matchingReportCount === 1 ? '' : 's'} found`}
+          >
+            <RailIcon icon={Document} label="Reports" badge={matchingReportCount} />
+          </Tooltip>
+        )}
+
+        {/* Date params icon - only show if report has date parameters */}
+        {hasDateParams && (
+          <Tooltip align="right" direction="right" label="Date parameters">
+            <RailIcon icon={Calendar} label="Date parameters" badge={true} />
+          </Tooltip>
+        )}
+
+        {/* Location params icon - only show if report has location parameters */}
+        {hasLocationParams && (
+          <Tooltip align="right" direction="right" label="Location parameters">
+            <RailIcon icon={Location} label="Location parameters" badge={true} />
+          </Tooltip>
+        )}
+
+        {/* Other params icon - only show if report has other parameters */}
+        {hasOtherParams && (
+          <Tooltip align="right" direction="right" label="Other parameters">
+            <RailIcon icon={Filter} label="Parameters" badge={true} />
+          </Tooltip>
+        )}
+
+        {/* Spacer before run button */}
+        <div style={{ flex: 1 }} />
+
+        {/* Run report button - at bottom */}
+        {onRunReport && (
+          <Tooltip
+            align="right"
+            direction="right"
+            label={hasSelectedReport ? 'Run report' : 'Select a report first'}
+          >
+            <RailIcon
+              icon={Play}
+              label={hasSelectedReport ? 'Run report' : 'Select a report'}
+              onClick={onRunReport}
+              disabled={!hasSelectedReport}
+              isPrimaryAction
+            />
+          </Tooltip>
+        )}
+      </div>
+    </aside>
+  );
+};
+
+export default ReportExplorerRail;