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>

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;

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',
+    channel: searchParams.get('channel')?.split(',').filter(Boolean) || [],
-    museum: searchParams.get('museum') || 'all'
+    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?.channel && newFilters.channel.length > 0) params.set('channel', newFilters.channel.join(','));
-    if (newFilters?.museum && newFilters.museum !== 'all') params.set('museum', newFilters.museum);
+    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})}>
+            <MultiSelect
-              <option value="all">{t('filters.allChannels')}</option>
+              options={channels}
-              {channels.map(c => <option key={c} value={c}>{c}</option>)}
+              selected={filters.channel}
-            </select>
+              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})}>
+            <MultiSelect
-              <option value="all">{t('filters.allMuseums')}</option>
+              options={availableMuseums}
-              {availableMuseums.map(m => <option key={m} value={m}>{m}</option>)}
+              selected={filters.museum}
-            </select>
+              onChange={selected => setFilters({...filters, museum: selected})}
+              allLabel={t('filters.allMuseums')}
+            />
           </FilterControls.Group>
         </FilterControls.Row>
       </FilterControls>

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 { Line, Bar } from 'react-chartjs-2';
-import { Carousel, EmptyState, FilterControls, StatCard } from './shared';
+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',
+  channel: [],
-  museum: 'all',
+  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 [filters, setFiltersState] = useState<Filters>(() => {
-    const initial = { ...defaultFilters };
+    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') {
+      const val = (updated as Record<string, unknown>)[key] as string;
-        params.set(key, updated[key]);
+      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 [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);
+  }, [t]);
-  }, [filters.museum, 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.channel.length > 0) qData = qData.filter((r: MuseumRecord) => filters.channel.includes(r.channel));
-        if (filters.museum !== 'all') qData = qData.filter((r: MuseumRecord) => r.museum_name === filters.museum);
+        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') {
+      if (filters.channel.length > 0) {
-        q2024 = q2024.filter((r: MuseumRecord) => r.channel === filters.channel);
+        q2024 = q2024.filter((r: MuseumRecord) => filters.channel.includes(r.channel));
-        q2025 = q2025.filter((r: MuseumRecord) => r.channel === filters.channel);
+        q2025 = q2025.filter((r: MuseumRecord) => filters.channel.includes(r.channel));
       }
-      if (filters.museum !== 'all') {
+      if (filters.museum.length > 0) {
-        q2024 = q2024.filter((r: MuseumRecord) => r.museum_name === filters.museum);
+        q2024 = q2024.filter((r: MuseumRecord) => filters.museum.includes(r.museum_name));
-        q2025 = q2025.filter((r: MuseumRecord) => r.museum_name === filters.museum);
+        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})}>
+            <MultiSelect
-              <option value="all">{t('filters.allChannels')}</option>
+              options={channels}
-              {channels.map(c => <option key={c} value={c}>{c}</option>)}
+              selected={filters.channel}
-            </select>
+              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})}>
+            <MultiSelect
-              <option value="all">{t('filters.allMuseums')}</option>
+              options={availableMuseums}
-              {availableMuseums.map(m => <option key={m} value={m}>{m}</option>)}
+              selected={filters.museum}
-            </select>
+              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">
-          <div className="chart-card half-width">
+          <ExportableChart filename="visitors-by-event" title={t('dashboard.visitorsByMuseum')} className="chart-container">
-            <ExportableChart filename="visitors-by-museum" title={t('dashboard.visitorsByMuseum')} className="chart-container">
+            <Bar data={museumData.visitors} options={{...baseOptions, indexAxis: 'y'}} />
-              <Doughnut data={museumData.visitors} options={{...baseOptions, plugins: {...baseOptions.plugins, legend: {display: true, position: 'bottom', labels: {boxWidth: 12, padding: 16, font: {size: 13}}}}}} />
+          </ExportableChart>
-            </ExportableChart>
+        </div>
-          </div>
-        )}
 
-        {filters.museum === 'all' && (
+        <div className="chart-card half-width">
-          <div className="chart-card half-width">
+          <ExportableChart filename="revenue-by-event" title={t('dashboard.revenueByMuseum')} className="chart-container">
-            <ExportableChart filename="revenue-by-museum" title={t('dashboard.revenueByMuseum')} className="chart-container">
+            <Bar data={museumData.revenue} options={{...baseOptions, indexAxis: 'y'}} />
-              <Bar data={museumData.revenue} options={baseOptions} />
+          </ExportableChart>
-            </ExportableChart>
+        </div>
-          </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="carousel-slide">
+                <div className="chart-card">
-                  <div className="chart-card">
+                  <h2>{t('dashboard.visitorsByMuseum')}</h2>
-                    <h2>{t('dashboard.visitorsByMuseum')}</h2>
+                  <div className="chart-container">
-                    <div className="chart-container">
+                    <Bar data={museumData.visitors} options={{...baseOptions, indexAxis: 'y'}} />
-                      <Doughnut data={museumData.visitors} options={{...baseOptions, plugins: {...baseOptions.plugins, legend: {display: true, position: 'bottom', labels: {boxWidth: 12, padding: 12, font: {size: 12}}}}}} />
-                    </div>
                   </div>
                 </div>
-              )}
+              </div>
 
-              {filters.museum === 'all' && (
+              <div className="carousel-slide">
-                <div className="carousel-slide">
+                <div className="chart-card">
-                  <div className="chart-card">
+                  <h2>{t('dashboard.revenueByMuseum')}</h2>
-                    <h2>{t('dashboard.revenueByMuseum')}</h2>
+                  <div className="chart-container">
-                    <div className="chart-container">
+                    <Bar data={museumData.revenue} options={{...baseOptions, indexAxis: 'y'}} />
-                      <Bar data={museumData.revenue} options={baseOptions} />
-                    </div>
                   </div>
                 </div>
-              )}
+              </div>
 
               <div className="carousel-slide">
                 <div className="chart-card">

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;

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';

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": "الزوار حسب المتحف",
+    "visitorsByMuseum": "الزوار حسب الفعالية",
-    "revenueByMuseum": "الإيرادات حسب المتحف",
+    "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": "مقارنة سنوية"
   },

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",
+    "visitorsByMuseum": "Visitors by Event",
-    "revenueByMuseum": "Revenue by Museum",
+    "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"
   },

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.channel.length > 0 && !filters.channel.includes(row.channel)) return false;
-    if (filters.museum && filters.museum !== 'all' && row.museum_name !== filters.museum) 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.channel && filters.channel.length > 0 && !filters.channel.includes(row.channel)) return false;
-    if (filters.museum && filters.museum !== 'all' && row.museum_name !== filters.museum) return false;
+    if (filters.museum && filters.museum.length > 0 && !filters.museum.includes(row.museum_name)) return false;
     return true;
   });
 }

src/types/index.ts

@@ -23,15 +23,15 @@ export interface Metrics {
 export interface Filters {
   year: string;
   district: string;
-  channel: string;
+  channel: string[];
-  museum: string;
+  museum: string[];
   quarter: string;
 }
 
 export interface DateRangeFilters {
   district: string;
-  channel: string;
+  channel: string[];
-  museum: string;
+  museum: string[];
 }
 
 export interface CacheStatus {