feat: always-visible visitors bar chart, replace doughnut

- Visitors by Event and Revenue by Event are now horizontal bar charts - Both always visible (no longer hidden when events are filtered) - Free attractions (Trail To Hira Cave, Makkah Greets Us) now visible - Removed Doughnut chart and unused import Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
feat: multi-select filters for events and channels
2026-03-31 14:55:06 +03:00 · 2026-03-31 14:53:23 +03:00 · 2026-03-31 14:49:03 +03:00
9 changed files with 266 additions and 99 deletions
--- a/src/App.css
+++ b/src/App.css
@@ -762,6 +762,84 @@ table tbody tr:hover {
  border-color: var(--accent);
 }

+/* Multi-select */
+.multi-select {
+  position: relative;
+}
+
+.multi-select-trigger {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: 12px 16px;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  font-size: 0.9375rem;
+  background: var(--surface);
+  color: var(--text-primary);
+  cursor: pointer;
+  text-align: left;
+}
+
+.multi-select-trigger:focus {
+  outline: 2px solid var(--accent);
+  outline-offset: -1px;
+  border-color: var(--accent);
+}
+
+.multi-select-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 1;
+}
+
+.multi-select-arrow {
+  font-size: 0.65rem;
+  opacity: 0.5;
+  margin-inline-start: 8px;
+}
+
+.multi-select-dropdown {
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 0;
+  right: 0;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+  z-index: 50;
+  max-height: 240px;
+  overflow-y: auto;
+  padding: 4px;
+}
+
+.multi-select-option {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 0.875rem;
+  color: var(--text-primary);
+  text-transform: none;
+  letter-spacing: normal;
+  font-weight: normal;
+}
+
+.multi-select-option:hover {
+  background: var(--hover);
+}
+
+.multi-select-option input[type="checkbox"] {
+  width: 16px;
+  height: 16px;
+  accent-color: var(--accent);
+}
+
 .period-display {
  background: var(--bg);
  padding: 16px;
--- a/src/components/Comparison.tsx
+++ b/src/components/Comparison.tsx
@@ -1,7 +1,7 @@
 import React, { useState, useMemo, useCallback, useRef } from 'react';
 import { useSearchParams } from 'react-router-dom';
 import { Line, Bar } from 'react-chartjs-2';
-import { EmptyState, FilterControls } from './shared';
+import { EmptyState, FilterControls, MultiSelect } from './shared';
 import { ExportableChart } from './ChartExport';
 import { chartColors, createBaseOptions } from '../config/chartConfig';
 import { useLanguage } from '../contexts/LanguageContext';
@@ -109,8 +109,8 @@ function Comparison({ data, showDataLabels, setShowDataLabels, includeVAT, setIn
  });
  const [filters, setFiltersState] = useState(() => ({
    district: searchParams.get('district') || 'all',
-    channel: searchParams.get('channel') || 'all',
-    museum: searchParams.get('museum') || 'all'
+    channel: searchParams.get('channel')?.split(',').filter(Boolean) || [],
+    museum: searchParams.get('museum')?.split(',').filter(Boolean) || []
  }));
  
  const [chartMetric, setChartMetric] = useState('revenue');
@@ -128,8 +128,8 @@ function Comparison({ data, showDataLabels, setShowDataLabels, includeVAT, setIn
      if (newTo) params.set('to', newTo);
    }
    if (newFilters?.district && newFilters.district !== 'all') params.set('district', newFilters.district);
-    if (newFilters?.channel && newFilters.channel !== 'all') params.set('channel', newFilters.channel);
-    if (newFilters?.museum && newFilters.museum !== 'all') params.set('museum', newFilters.museum);
+    if (newFilters?.channel && newFilters.channel.length > 0) params.set('channel', newFilters.channel.join(','));
+    if (newFilters?.museum && newFilters.museum.length > 0) params.set('museum', newFilters.museum.join(','));
    setSearchParams(params, { replace: true });
  }, [setSearchParams, latestYear]);

@@ -249,7 +249,7 @@ function Comparison({ data, showDataLabels, setShowDataLabels, includeVAT, setIn
  const currMetrics = useMemo(() => calculateMetrics(currData, includeVAT), [currData, includeVAT]);
  
  const hasData = prevData.length > 0 || currData.length > 0;
-  const resetFilters = () => setFilters({ district: 'all', channel: 'all', museum: 'all' });
+  const resetFilters = () => setFilters({ district: 'all', channel: [], museum: [] });

  const calcChange = (prev: number, curr: number) => prev === 0 ? (curr > 0 ? Infinity : 0) : ((curr - prev) / prev * 100);

@@ -581,22 +581,26 @@ function Comparison({ data, showDataLabels, setShowDataLabels, includeVAT, setIn
            </>
          )}
          <FilterControls.Group label={t('filters.district')}>
-            <select value={filters.district} onChange={e => setFilters({...filters, district: e.target.value, museum: 'all'})}>
+            <select value={filters.district} onChange={e => setFilters({...filters, district: e.target.value, museum: []})}>
              <option value="all">{t('filters.allDistricts')}</option>
              {districts.map(d => <option key={d} value={d}>{d}</option>)}
            </select>
          </FilterControls.Group>
          <FilterControls.Group label={t('filters.channel')}>
-            <select value={filters.channel} onChange={e => setFilters({...filters, channel: e.target.value})}>
-              <option value="all">{t('filters.allChannels')}</option>
-              {channels.map(c => <option key={c} value={c}>{c}</option>)}
-            </select>
+            <MultiSelect
+              options={channels}
+              selected={filters.channel}
+              onChange={selected => setFilters({...filters, channel: selected})}
+              allLabel={t('filters.allChannels')}
+            />
          </FilterControls.Group>
          <FilterControls.Group label={t('filters.museum')}>
-            <select value={filters.museum} onChange={e => setFilters({...filters, museum: e.target.value})}>
-              <option value="all">{t('filters.allMuseums')}</option>
-              {availableMuseums.map(m => <option key={m} value={m}>{m}</option>)}
-            </select>
+            <MultiSelect
+              options={availableMuseums}
+              selected={filters.museum}
+              onChange={selected => setFilters({...filters, museum: selected})}
+              allLabel={t('filters.allMuseums')}
+            />
          </FilterControls.Group>
        </FilterControls.Row>
      </FilterControls>
--- a/src/components/Dashboard.tsx
+++ b/src/components/Dashboard.tsx
@@ -1,7 +1,7 @@
 import React, { useState, useMemo, useEffect } from 'react';
 import { useSearchParams } from 'react-router-dom';
-import { Line, Doughnut, Bar } from 'react-chartjs-2';
-import { Carousel, EmptyState, FilterControls, StatCard } from './shared';
+import { Line, Bar } from 'react-chartjs-2';
+import { Carousel, EmptyState, FilterControls, MultiSelect, StatCard } from './shared';
 import { ExportableChart } from './ChartExport';
 import { chartColors, createBaseOptions } from '../config/chartConfig';
 import { useLanguage } from '../contexts/LanguageContext';
@@ -27,12 +27,12 @@ import type { DashboardProps, Filters, MuseumRecord } from '../types';
 const defaultFilters: Filters = {
  year: 'all',
  district: 'all',
-  channel: 'all',
-  museum: 'all',
+  channel: [],
+  museum: [],
  quarter: 'all'
 };

-const filterKeys: (keyof Filters)[] = ['year', 'district', 'channel', 'museum', 'quarter'];
+const filterKeys: (keyof Filters)[] = ['year', 'district', 'quarter'];

 function Dashboard({ data, showDataLabels, setShowDataLabels, includeVAT, setIncludeVAT }: DashboardProps) {
  const { t } = useLanguage();
@@ -45,12 +45,16 @@ function Dashboard({ data, showDataLabels, setShowDataLabels, includeVAT, setInc
  }, []);
  
  // Initialize filters from URL or defaults
-  const [filters, setFiltersState] = useState(() => {
-    const initial = { ...defaultFilters };
+  const [filters, setFiltersState] = useState<Filters>(() => {
+    const initial: Filters = { ...defaultFilters };
    filterKeys.forEach(key => {
      const value = searchParams.get(key);
-      if (value) initial[key] = value;
+      if (value) (initial as Record<string, unknown>)[key] = value;
    });
+    const museumParam = searchParams.get('museum');
+    if (museumParam) initial.museum = museumParam.split(',').filter(Boolean);
+    const channelParam = searchParams.get('channel');
+    if (channelParam) initial.channel = channelParam.split(',').filter(Boolean);
    return initial;
  });

@@ -61,10 +65,13 @@ function Dashboard({ data, showDataLabels, setShowDataLabels, includeVAT, setInc
    
    const params = new URLSearchParams();
    filterKeys.forEach(key => {
-      if (updated[key] && updated[key] !== 'all') {
-        params.set(key, updated[key]);
+      const val = (updated as Record<string, unknown>)[key] as string;
+      if (val && val !== 'all') {
+        params.set(key, val);
      }
    });
+    if (updated.museum.length > 0) params.set('museum', updated.museum.join(','));
+    if (updated.channel.length > 0) params.set('channel', updated.channel.join(','));
    setSearchParams(params, { replace: true });
  };

@@ -88,9 +95,8 @@ function Dashboard({ data, showDataLabels, setShowDataLabels, includeVAT, setInc

  // Chart carousel labels
  const chartLabels = useMemo(() => {
-    const labels = [t('charts.revenueTrend'), t('charts.visitors'), t('charts.revenue'), t('charts.quarterly'), t('charts.channel'), t('charts.district'), t('charts.captureRate')];
-    return filters.museum === 'all' ? labels : labels.filter((_, i) => i !== 1 && i !== 2);
-  }, [filters.museum, t]);
+    return [t('charts.revenueTrend'), t('charts.visitors'), t('charts.revenue'), t('charts.quarterly'), t('charts.channel'), t('charts.district'), t('charts.captureRate')];
+  }, [t]);

  // Dynamic lists from data
  const years = useMemo(() => getUniqueYears(data), [data]);
@@ -279,8 +285,8 @@ function Dashboard({ data, showDataLabels, setShowDataLabels, includeVAT, setInc
        if (!pilgrims) return;
        let qData = data.filter((r: MuseumRecord) => r.year === String(year) && r.quarter === String(q));
        if (filters.district !== 'all') qData = qData.filter((r: MuseumRecord) => r.district === filters.district);
-        if (filters.channel !== 'all') qData = qData.filter((r: MuseumRecord) => r.channel === filters.channel);
-        if (filters.museum !== 'all') qData = qData.filter((r: MuseumRecord) => r.museum_name === filters.museum);
+        if (filters.channel.length > 0) qData = qData.filter((r: MuseumRecord) => filters.channel.includes(r.channel));
+        if (filters.museum.length > 0) qData = qData.filter((r: MuseumRecord) => filters.museum.includes(r.museum_name));
        const visitors = qData.reduce((s: number, r: MuseumRecord) => s + parseInt(String(r.visits || 0)), 0);
        labels.push(`Q${q} ${year}`);
        rates.push((visitors / pilgrims * 100));
@@ -357,13 +363,13 @@ function Dashboard({ data, showDataLabels, setShowDataLabels, includeVAT, setInc
        q2024 = q2024.filter((r: MuseumRecord) => r.district === filters.district);
        q2025 = q2025.filter((r: MuseumRecord) => r.district === filters.district);
      }
-      if (filters.channel !== 'all') {
-        q2024 = q2024.filter((r: MuseumRecord) => r.channel === filters.channel);
-        q2025 = q2025.filter((r: MuseumRecord) => r.channel === filters.channel);
+      if (filters.channel.length > 0) {
+        q2024 = q2024.filter((r: MuseumRecord) => filters.channel.includes(r.channel));
+        q2025 = q2025.filter((r: MuseumRecord) => filters.channel.includes(r.channel));
      }
-      if (filters.museum !== 'all') {
-        q2024 = q2024.filter((r: MuseumRecord) => r.museum_name === filters.museum);
-        q2025 = q2025.filter((r: MuseumRecord) => r.museum_name === filters.museum);
+      if (filters.museum.length > 0) {
+        q2024 = q2024.filter((r: MuseumRecord) => filters.museum.includes(r.museum_name));
+        q2025 = q2025.filter((r: MuseumRecord) => filters.museum.includes(r.museum_name));
      }
      const rev24 = q2024.reduce((s: number, r: MuseumRecord) => s + parseFloat(String(r[revenueField as keyof MuseumRecord] || 0)), 0);
      const rev25 = q2025.reduce((s: number, r: MuseumRecord) => s + parseFloat(String(r[revenueField as keyof MuseumRecord] || 0)), 0);
@@ -413,22 +419,26 @@ function Dashboard({ data, showDataLabels, setShowDataLabels, includeVAT, setInc
            </select>
          </FilterControls.Group>
          <FilterControls.Group label={t('filters.district')}>
-            <select value={filters.district} onChange={e => setFilters({...filters, district: e.target.value, museum: 'all'})}>
+            <select value={filters.district} onChange={e => setFilters({...filters, district: e.target.value, museum: []})}>
              <option value="all">{t('filters.allDistricts')}</option>
              {districts.map(d => <option key={d} value={d}>{d}</option>)}
            </select>
          </FilterControls.Group>
          <FilterControls.Group label={t('filters.channel')}>
-            <select value={filters.channel} onChange={e => setFilters({...filters, channel: e.target.value})}>
-              <option value="all">{t('filters.allChannels')}</option>
-              {channels.map(c => <option key={c} value={c}>{c}</option>)}
-            </select>
+            <MultiSelect
+              options={channels}
+              selected={filters.channel}
+              onChange={channel => setFilters({...filters, channel})}
+              allLabel={t('filters.allChannels')}
+            />
          </FilterControls.Group>
          <FilterControls.Group label={t('filters.museum')}>
-            <select value={filters.museum} onChange={e => setFilters({...filters, museum: e.target.value})}>
-              <option value="all">{t('filters.allMuseums')}</option>
-              {availableMuseums.map(m => <option key={m} value={m}>{m}</option>)}
-            </select>
+            <MultiSelect
+              options={availableMuseums}
+              selected={filters.museum}
+              onChange={museum => setFilters({...filters, museum})}
+              allLabel={t('filters.allMuseums')}
+            />
          </FilterControls.Group>
          <FilterControls.Group label={t('filters.quarter')}>
            <select value={filters.quarter} onChange={e => setFilters({...filters, quarter: e.target.value})}>
@@ -536,21 +546,17 @@ function Dashboard({ data, showDataLabels, setShowDataLabels, includeVAT, setInc
          </ExportableChart>
        </div>

-        {filters.museum === 'all' && (
-          <div className="chart-card half-width">
-            <ExportableChart filename="visitors-by-museum" title={t('dashboard.visitorsByMuseum')} className="chart-container">
-              <Doughnut data={museumData.visitors} options={{...baseOptions, plugins: {...baseOptions.plugins, legend: {display: true, position: 'bottom', labels: {boxWidth: 12, padding: 16, font: {size: 13}}}}}} />
-            </ExportableChart>
-          </div>
-        )}
+        <div className="chart-card half-width">
+          <ExportableChart filename="visitors-by-event" title={t('dashboard.visitorsByMuseum')} className="chart-container">
+            <Bar data={museumData.visitors} options={{...baseOptions, indexAxis: 'y'}} />
+          </ExportableChart>
+        </div>

-        {filters.museum === 'all' && (
-          <div className="chart-card half-width">
-            <ExportableChart filename="revenue-by-museum" title={t('dashboard.revenueByMuseum')} className="chart-container">
-              <Bar data={museumData.revenue} options={baseOptions} />
-            </ExportableChart>
-          </div>
-        )}
+        <div className="chart-card half-width">
+          <ExportableChart filename="revenue-by-event" title={t('dashboard.revenueByMuseum')} className="chart-container">
+            <Bar data={museumData.revenue} options={{...baseOptions, indexAxis: 'y'}} />
+          </ExportableChart>
+        </div>

        <div className="chart-card half-width">
          <ExportableChart filename="quarterly-yoy" title={t('dashboard.quarterlyRevenue')} className="chart-container">
@@ -634,27 +640,23 @@ function Dashboard({ data, showDataLabels, setShowDataLabels, includeVAT, setInc
                </div>
              </div>

-              {filters.museum === 'all' && (
-                <div className="carousel-slide">
-                  <div className="chart-card">
-                    <h2>{t('dashboard.visitorsByMuseum')}</h2>
-                    <div className="chart-container">
-                      <Doughnut data={museumData.visitors} options={{...baseOptions, plugins: {...baseOptions.plugins, legend: {display: true, position: 'bottom', labels: {boxWidth: 12, padding: 12, font: {size: 12}}}}}} />
-                    </div>
+              <div className="carousel-slide">
+                <div className="chart-card">
+                  <h2>{t('dashboard.visitorsByMuseum')}</h2>
+                  <div className="chart-container">
+                    <Bar data={museumData.visitors} options={{...baseOptions, indexAxis: 'y'}} />
                  </div>
                </div>
-              )}
+              </div>

-              {filters.museum === 'all' && (
-                <div className="carousel-slide">
-                  <div className="chart-card">
-                    <h2>{t('dashboard.revenueByMuseum')}</h2>
-                    <div className="chart-container">
-                      <Bar data={museumData.revenue} options={baseOptions} />
-                    </div>
+              <div className="carousel-slide">
+                <div className="chart-card">
+                  <h2>{t('dashboard.revenueByMuseum')}</h2>
+                  <div className="chart-container">
+                    <Bar data={museumData.revenue} options={{...baseOptions, indexAxis: 'y'}} />
                  </div>
                </div>
-              )}
+              </div>

              <div className="carousel-slide">
                <div className="chart-card">
--- a/src/components/shared/MultiSelect.tsx
+++ b/src/components/shared/MultiSelect.tsx
@@ -0,0 +1,82 @@
+import React, { useState, useRef, useEffect } from 'react';
+
+interface MultiSelectProps {
+  options: string[];
+  selected: string[];
+  onChange: (selected: string[]) => void;
+  allLabel: string;
+  placeholder?: string;
+}
+
+function MultiSelect({ options, selected, onChange, allLabel, placeholder }: MultiSelectProps) {
+  const [open, setOpen] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+
+  // Close on outside click
+  useEffect(() => {
+    const handleClick = (e: MouseEvent) => {
+      if (ref.current && !ref.current.contains(e.target as Node)) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener('mousedown', handleClick);
+    return () => document.removeEventListener('mousedown', handleClick);
+  }, []);
+
+  const isAll = selected.length === 0;
+
+  const toggle = (value: string) => {
+    if (selected.includes(value)) {
+      onChange(selected.filter(v => v !== value));
+    } else {
+      onChange([...selected, value]);
+    }
+  };
+
+  const selectAll = () => onChange([]);
+
+  const displayText = isAll
+    ? allLabel
+    : selected.length === 1
+      ? selected[0]
+      : `${selected.length} selected`;
+
+  return (
+    <div className="multi-select" ref={ref}>
+      <button
+        type="button"
+        className="multi-select-trigger"
+        onClick={() => setOpen(!open)}
+        aria-expanded={open}
+      >
+        <span className="multi-select-text">{displayText}</span>
+        <span className="multi-select-arrow">{open ? '▲' : '▼'}</span>
+      </button>
+
+      {open && (
+        <div className="multi-select-dropdown">
+          <label className="multi-select-option">
+            <input
+              type="checkbox"
+              checked={isAll}
+              onChange={selectAll}
+            />
+            <span>{allLabel}</span>
+          </label>
+          {options.map(opt => (
+            <label key={opt} className="multi-select-option">
+              <input
+                type="checkbox"
+                checked={selected.includes(opt)}
+                onChange={() => toggle(opt)}
+              />
+              <span>{opt}</span>
+            </label>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default MultiSelect;
--- a/src/components/shared/index.tsx
+++ b/src/components/shared/index.tsx
@@ -2,5 +2,6 @@ export { default as Carousel } from './Carousel';
 export { default as ChartCard } from './ChartCard';
 export { default as EmptyState } from './EmptyState';
 export { default as FilterControls } from './FilterControls';
+export { default as MultiSelect } from './MultiSelect';
 export { default as StatCard } from './StatCard';
 export { default as ToggleSwitch } from './ToggleSwitch';
--- a/src/locales/ar.json
+++ b/src/locales/ar.json
@@ -25,7 +25,7 @@
    "excl": "بدون"
  },
  "dataSources": {
-    "museums": "المتاحف",
+    "museums": "الفعاليات",
    "coffees": "المقاهي",
    "ecommerce": "التجارة الإلكترونية",
    "soon": "قريباً"
@@ -35,12 +35,12 @@
    "year": "السنة",
    "district": "المنطقة",
    "channel": "القناة",
-    "museum": "المتحف",
+    "museum": "الفعالية",
    "quarter": "الربع",
    "allYears": "كل السنوات",
    "allDistricts": "كل المناطق",
    "allChannels": "جميع القنوات",
-    "allMuseums": "كل المتاحف",
+    "allMuseums": "كل الفعاليات",
    "allQuarters": "كل الأرباع",
    "reset": "إعادة تعيين الفلاتر"
  },
@@ -58,13 +58,13 @@
  },
  "dashboard": {
    "title": "لوحة التحكم",
-    "subtitle": "تحليلات المتاحف من نظام Hono ERP",
+    "subtitle": "تحليلات الفعاليات من نظام ERP",
    "noData": "لا توجد بيانات",
    "noDataMessage": "لا توجد سجلات تطابق الفلاتر الحالية. حاول تعديل اختيارك.",
    "quarterlyComparison": "مقارنة ربع سنوية: 2024 مقابل 2025",
    "revenueTrends": "اتجاهات الإيرادات",
-    "visitorsByMuseum": "الزوار حسب المتحف",
-    "revenueByMuseum": "الإيرادات حسب المتحف",
+    "visitorsByMuseum": "الزوار حسب الفعالية",
+    "revenueByMuseum": "الإيرادات حسب الفعالية",
    "quarterlyRevenue": "الإيرادات الربعية (سنوي)",
    "districtPerformance": "أداء المناطق",
    "channelPerformance": "أداء القنوات",
@@ -120,7 +120,7 @@
    "noData": "لا توجد بيانات لهذه الفترة",
    "noDataMessage": "لم يتم العثور على سجلات للنطاق الزمني والفلاتر المحددة.",
    "trend": "الاتجاه",
-    "byMuseum": "حسب المتحف",
+    "byMuseum": "حسب الفعالية",
    "pendingData": "البيانات لم تُنشر بعد"
  },
  "slides": {
@@ -140,7 +140,7 @@
    "showYoY": "إظهار مقارنة سنة بسنة",
    "exit": "خروج",
    "revenueTrend": "اتجاه الإيرادات",
-    "byMuseum": "حسب المتحف",
+    "byMuseum": "حسب الفعالية",
    "kpiSummary": "ملخص مؤشرات الأداء",
    "yoyComparison": "مقارنة سنوية"
  },
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -25,7 +25,7 @@
    "excl": "Excl"
  },
  "dataSources": {
-    "museums": "Museums",
+    "museums": "Events",
    "coffees": "Coffees",
    "ecommerce": "eCommerce",
    "soon": "soon"
@@ -35,12 +35,12 @@
    "year": "Year",
    "district": "District",
    "channel": "Channel",
-    "museum": "Museum",
+    "museum": "Event",
    "quarter": "Quarter",
    "allYears": "All Years",
    "allDistricts": "All Districts",
    "allChannels": "All Channels",
-    "allMuseums": "All Museums",
+    "allMuseums": "All Events",
    "allQuarters": "All Quarters",
    "reset": "Reset Filters"
  },
@@ -58,13 +58,13 @@
  },
  "dashboard": {
    "title": "Dashboard",
-    "subtitle": "Museum analytics from Hono ERP",
+    "subtitle": "Event analytics from ERP",
    "noData": "No data found",
    "noDataMessage": "No records match your current filters. Try adjusting your selection.",
    "quarterlyComparison": "Quarterly Comparison: 2024 vs 2025",
    "revenueTrends": "Revenue Trends",
-    "visitorsByMuseum": "Visitors by Museum",
-    "revenueByMuseum": "Revenue by Museum",
+    "visitorsByMuseum": "Visitors by Event",
+    "revenueByMuseum": "Revenue by Event",
    "quarterlyRevenue": "Quarterly Revenue (YoY)",
    "districtPerformance": "District Performance",
    "channelPerformance": "Channel Performance",
@@ -120,7 +120,7 @@
    "noData": "No data for this period",
    "noDataMessage": "No records found for the selected date range and filters.",
    "trend": "Trend",
-    "byMuseum": "By Museum",
+    "byMuseum": "By Event",
    "pendingData": "Data not published yet"
  },
  "slides": {
@@ -140,7 +140,7 @@
    "showYoY": "Show Year-over-Year Comparison",
    "exit": "Exit",
    "revenueTrend": "Revenue Trend",
-    "byMuseum": "By Museum",
+    "byMuseum": "By Event",
    "kpiSummary": "KPI Summary",
    "yoyComparison": "YoY Comparison"
  },
--- a/src/services/dataService.ts
+++ b/src/services/dataService.ts
@@ -275,8 +275,8 @@ export function filterData(data: MuseumRecord[], filters: Filters): MuseumRecord
  return data.filter(row => {
    if (filters.year && filters.year !== 'all' && row.year !== filters.year) return false;
    if (filters.district && filters.district !== 'all' && row.district !== filters.district) return false;
-    if (filters.channel && filters.channel !== 'all' && row.channel !== filters.channel) return false;
-    if (filters.museum && filters.museum !== 'all' && row.museum_name !== filters.museum) return false;
+    if (filters.channel.length > 0 && !filters.channel.includes(row.channel)) return false;
+    if (filters.museum.length > 0 && !filters.museum.includes(row.museum_name)) return false;
    if (filters.quarter && filters.quarter !== 'all' && row.quarter !== filters.quarter) return false;
    return true;
  });
@@ -292,8 +292,8 @@ export function filterDataByDateRange(
    if (!row.date) return false;
    if (row.date < startDate || row.date > endDate) return false;
    if (filters.district && filters.district !== 'all' && row.district !== filters.district) return false;
-    if (filters.channel && filters.channel !== 'all' && row.channel !== filters.channel) return false;
-    if (filters.museum && filters.museum !== 'all' && row.museum_name !== filters.museum) return false;
+    if (filters.channel && filters.channel.length > 0 && !filters.channel.includes(row.channel)) return false;
+    if (filters.museum && filters.museum.length > 0 && !filters.museum.includes(row.museum_name)) return false;
    return true;
  });
 }
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -23,15 +23,15 @@ export interface Metrics {
 export interface Filters {
  year: string;
  district: string;
-  channel: string;
-  museum: string;
+  channel: string[];
+  museum: string[];
  quarter: string;
 }

 export interface DateRangeFilters {
  district: string;
-  channel: string;
-  museum: string;
+  channel: string[];
+  museum: string[];
 }

 export interface CacheStatus {