feat: add district filter (Hiraa/AsSaffiyah) from static mapping

- ETL writes District column to NocoDB DailySales
- Museums mapped: Hiraa (Revelation, Holy Quraan, Trail, Makkah, VIP)
  AsSaffiyah (Creation Story, Best of Creation)
- District filter added to Dashboard and Comparison (cascades to museum)
- District Performance chart added (desktop + mobile)
- Locale keys added for both EN and AR

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

server/src/config/museumMapping.ts

@@ -39,6 +39,21 @@ export function getMuseumsFromProduct(productDescription: string): MuseumMatch {
   return { museums: matched, split: 1 / matched.length };
 }
 
+// Static museum → district mapping
+const MUSEUM_DISTRICT: Record<string, string> = {
+  'Revelation Exhibition': 'Hiraa',
+  'Holy Quraan Museum': 'Hiraa',
+  'Trail To Hira Cave': 'Hiraa',
+  'Makkah Greets Us': 'Hiraa',
+  'VIP Experience': 'Hiraa',
+  'Creation Story Museum': 'AsSaffiyah',
+  'Best of Creation': 'AsSaffiyah',
+};
+
+export function getDistrict(museumName: string): string {
+  return MUSEUM_DISTRICT[museumName] || 'Other';
+}
+
 export const CHANNEL_LABELS: Record<string, string> = {
   'B2C': 'HiHala Website/App',
   'B2B': 'B2B',

server/src/services/etlSync.ts

@@ -1,6 +1,6 @@
 import { fetchSales } from './erpClient';
 import { discoverTableIds, deleteRowsByMonth, deleteAllRows, insertRecords } from './nocodbClient';
-import { getMuseumsFromProduct, getChannelLabel } from '../config/museumMapping';
+import { getMuseumsFromProduct, getChannelLabel, getDistrict } from '../config/museumMapping';
 import type { ERPSaleRecord, AggregatedRecord } from '../types';
 
 function generateMonthBoundaries(startYear: number, startMonth: number): Array<[string, string]> {
@@ -51,12 +51,14 @@ export function aggregateTransactions(sales: ERPSaleRecord[]): AggregatedRecord[
           ? museums.filter(m => m !== museum).join(', ')
           : '';
         const ticketType = isCombo ? 'combo' : 'single';
+        const district = getDistrict(museum);
         const key = `${date}|${museum}|${channel}|${ticketType}`;
 
         let entry = map.get(key);
         if (!entry) {
           entry = {
             Date: date,
+            District: district,
             MuseumName: museum,
             Channel: channel,
             TicketType: ticketType,

server/src/types.ts

@@ -18,6 +18,7 @@ export interface ERPSaleRecord {
 
 export interface AggregatedRecord {
   Date: string;
+  District: string;
   MuseumName: string;
   Channel: string;
   TicketType: 'single' | 'combo';

src/components/Comparison.tsx

@@ -13,6 +13,8 @@ import {
   umrahData,
   getUniqueChannels,
   getUniqueMuseums,
+  getUniqueDistricts,
+  getMuseumsForDistrict,
   getLatestYear
 } from '../services/dataService';
 import type { MuseumRecord, ComparisonProps, DateRangeFilters } from '../types';
@@ -106,6 +108,7 @@ function Comparison({ data, showDataLabels, setShowDataLabels, includeVAT, setIn
     return searchParams.get('to') || `${year}-01-31`;
   });
   const [filters, setFiltersState] = useState(() => ({
+    district: searchParams.get('district') || 'all',
     channel: searchParams.get('channel') || 'all',
     museum: searchParams.get('museum') || 'all'
   }));
@@ -124,6 +127,7 @@ function Comparison({ data, showDataLabels, setShowDataLabels, includeVAT, setIn
       if (newFrom) params.set('from', newFrom);
       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);
     setSearchParams(params, { replace: true });
@@ -219,7 +223,8 @@ function Comparison({ data, showDataLabels, setShowDataLabels, includeVAT, setIn
 
   // Dynamic lists from data
   const channels = useMemo(() => getUniqueChannels(data), [data]);
-  const availableMuseums = useMemo(() => getUniqueMuseums(data), [data]);
+  const districts = useMemo(() => getUniqueDistricts(data), [data]);
+  const availableMuseums = useMemo(() => getMuseumsForDistrict(data, filters.district), [data, filters.district]);
 
   // Year-over-year comparison: same dates, previous year
   const ranges = useMemo(() => ({
@@ -244,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({ channel: 'all', museum: 'all' });
+  const resetFilters = () => setFilters({ district: 'all', channel: 'all', museum: 'all' });
 
   const calcChange = (prev: number, curr: number) => prev === 0 ? (curr > 0 ? Infinity : 0) : ((curr - prev) / prev * 100);
 
@@ -575,6 +580,12 @@ function Comparison({ data, showDataLabels, setShowDataLabels, includeVAT, setIn
               </FilterControls.Group>
             </>
           )}
+          <FilterControls.Group label={t('filters.district')}>
+            <select value={filters.district} onChange={e => setFilters({...filters, district: e.target.value, museum: 'all'})}>
+              <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>

src/components/Dashboard.tsx

@@ -17,18 +17,22 @@ import {
   fetchPilgrimStats,
   getUniqueYears,
   getUniqueChannels,
-  getUniqueMuseums
+  getUniqueMuseums,
+  getUniqueDistricts,
+  getMuseumsForDistrict,
+  groupByDistrict
 } from '../services/dataService';
 import type { DashboardProps, Filters, MuseumRecord } from '../types';
 
 const defaultFilters: Filters = {
   year: 'all',
+  district: 'all',
   channel: 'all',
   museum: 'all',
   quarter: 'all'
 };
 
-const filterKeys: (keyof Filters)[] = ['year', 'channel', 'museum', 'quarter'];
+const filterKeys: (keyof Filters)[] = ['year', 'district', 'channel', 'museum', 'quarter'];
 
 function Dashboard({ data, showDataLabels, setShowDataLabels, includeVAT, setIncludeVAT }: DashboardProps) {
   const { t } = useLanguage();
@@ -84,14 +88,15 @@ 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.captureRate')];
+    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]);
 
   // Dynamic lists from data
   const years = useMemo(() => getUniqueYears(data), [data]);
+  const districts = useMemo(() => getUniqueDistricts(data), [data]);
   const channels = useMemo(() => getUniqueChannels(data), [data]);
-  const availableMuseums = useMemo(() => getUniqueMuseums(data), [data]);
+  const availableMuseums = useMemo(() => getMuseumsForDistrict(data, filters.district), [data, filters.district]);
 
   const yoyChange = useMemo(() => {
     if (filters.year === 'all') return null;
@@ -224,6 +229,20 @@ function Dashboard({ data, showDataLabels, setShowDataLabels, includeVAT, setInc
     };
   }, [filteredData, includeVAT]);
 
+  // District data
+  const districtData = useMemo(() => {
+    const grouped = groupByDistrict(filteredData, includeVAT);
+    const districtNames = Object.keys(grouped);
+    return {
+      labels: districtNames,
+      datasets: [{
+        data: districtNames.map(d => grouped[d].revenue),
+        backgroundColor: [chartColors.primary + 'cc', chartColors.secondary + 'cc', chartColors.tertiary + 'cc', chartColors.muted + 'cc'],
+        borderRadius: 4
+      }]
+    };
+  }, [filteredData, includeVAT]);
+
   // Quarterly YoY
   const quarterlyYoYData = useMemo(() => {
     const revenueField = includeVAT ? 'revenue_gross' : 'revenue_net';
@@ -259,6 +278,7 @@ function Dashboard({ data, showDataLabels, setShowDataLabels, includeVAT, setInc
         const pilgrims = umrahData[year]?.[q];
         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);
         const visitors = qData.reduce((s: number, r: MuseumRecord) => s + parseInt(String(r.visits || 0)), 0);
@@ -323,7 +343,7 @@ function Dashboard({ data, showDataLabels, setShowDataLabels, includeVAT, setInc
         }
       ]
     };
-  }, [data, filters.channel, filters.museum, showDataLabels]);
+  }, [data, filters.district, filters.channel, filters.museum, showDataLabels]);
 
   // Quarterly table
   const quarterlyTable = useMemo(() => {
@@ -333,6 +353,10 @@ function Dashboard({ data, showDataLabels, setShowDataLabels, includeVAT, setInc
     return [1, 2, 3, 4].map(q => {
       let q2024 = d2024.filter((r: MuseumRecord) => r.quarter === String(q));
       let q2025 = d2025.filter((r: MuseumRecord) => r.quarter === String(q));
+      if (filters.district !== 'all') {
+        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);
@@ -351,7 +375,7 @@ function Dashboard({ data, showDataLabels, setShowDataLabels, includeVAT, setInc
       const cap25 = umrahData[2025][q] ? (vis25 / umrahData[2025][q] * 100) : null;
       return { q, rev24, rev25, revChg, vis24, vis25, visChg, cap24, cap25 };
     });
-  }, [data, filters.channel, filters.museum, includeVAT]);
+  }, [data, filters.district, filters.channel, filters.museum, includeVAT]);
 
   const baseOptions = useMemo(() => createBaseOptions(showDataLabels), [showDataLabels]);
 
@@ -388,6 +412,12 @@ function Dashboard({ data, showDataLabels, setShowDataLabels, includeVAT, setInc
               {years.map(y => <option key={y} value={y}>{y}</option>)}
             </select>
           </FilterControls.Group>
+          <FilterControls.Group label={t('filters.district')}>
+            <select value={filters.district} onChange={e => setFilters({...filters, district: e.target.value, museum: 'all'})}>
+              <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>
@@ -534,6 +564,12 @@ function Dashboard({ data, showDataLabels, setShowDataLabels, includeVAT, setInc
           </ExportableChart>
         </div>
 
+        <div className="chart-card half-width">
+          <ExportableChart filename="district-performance" title={t('dashboard.districtPerformance')} className="chart-container">
+            <Bar data={districtData} options={{...baseOptions, indexAxis: 'y'}} />
+          </ExportableChart>
+        </div>
+
         <div className="chart-card full-width">
           <ExportableChart filename="capture-rate" title={t('dashboard.captureRateChart')} className="chart-container">
             <Line data={captureRateData} options={{
@@ -638,6 +674,15 @@ function Dashboard({ data, showDataLabels, setShowDataLabels, includeVAT, setInc
                 </div>
               </div>
 
+              <div className="carousel-slide">
+                <div className="chart-card">
+                  <h2>{t('dashboard.districtPerformance')}</h2>
+                  <div className="chart-container">
+                    <Bar data={districtData} options={{...baseOptions, indexAxis: 'y'}} />
+                  </div>
+                </div>
+              </div>
+
               <div className="carousel-slide">
                 <div className="chart-card">
                   <h2>{t('dashboard.captureRateChart')}</h2>

src/locales/ar.json

@@ -33,10 +33,12 @@
   "filters": {
     "title": "الفلاتر",
     "year": "السنة",
+    "district": "المنطقة",
     "channel": "القناة",
     "museum": "المتحف",
     "quarter": "الربع",
     "allYears": "كل السنوات",
+    "allDistricts": "كل المناطق",
     "allChannels": "جميع القنوات",
     "allMuseums": "كل المتاحف",
     "allQuarters": "كل الأرباع",
@@ -64,6 +66,7 @@
     "visitorsByMuseum": "الزوار حسب المتحف",
     "revenueByMuseum": "الإيرادات حسب المتحف",
     "quarterlyRevenue": "الإيرادات الربعية (سنوي)",
+    "districtPerformance": "أداء المناطق",
     "channelPerformance": "أداء القنوات",
     "captureRateChart": "نسبة الاستقطاب مقابل المعتمرين"
   },
@@ -146,6 +149,7 @@
     "visitors": "الزوار",
     "revenue": "الإيرادات",
     "quarterly": "ربع سنوي",
+    "district": "المنطقة",
     "channel": "القناة",
     "captureRate": "نسبة الاستقطاب"
   },

src/locales/en.json

@@ -33,10 +33,12 @@
   "filters": {
     "title": "Filters",
     "year": "Year",
+    "district": "District",
     "channel": "Channel",
     "museum": "Museum",
     "quarter": "Quarter",
     "allYears": "All Years",
+    "allDistricts": "All Districts",
     "allChannels": "All Channels",
     "allMuseums": "All Museums",
     "allQuarters": "All Quarters",
@@ -64,6 +66,7 @@
     "visitorsByMuseum": "Visitors by Museum",
     "revenueByMuseum": "Revenue by Museum",
     "quarterlyRevenue": "Quarterly Revenue (YoY)",
+    "districtPerformance": "District Performance",
     "channelPerformance": "Channel Performance",
     "captureRateChart": "Capture Rate vs Umrah Pilgrims"
   },
@@ -146,6 +149,7 @@
     "visitors": "Visitors",
     "revenue": "Revenue",
     "quarterly": "Quarterly",
+    "district": "District",
     "channel": "Channel",
     "captureRate": "Capture Rate"
   },

src/services/dataService.ts

@@ -128,6 +128,7 @@ async function fetchFromNocoDB(): Promise<MuseumRecord[]> {
 
     return {
       date,
+      district: row.District,
       museum_name: row.MuseumName,
       channel: row.Channel,
       visits: row.Visits,
@@ -273,6 +274,7 @@ export async function refreshData(): Promise<FetchResult> {
 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.quarter && filters.quarter !== 'all' && row.quarter !== filters.quarter) return false;
@@ -289,6 +291,7 @@ export function filterDataByDateRange(
   return data.filter(row => {
     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;
     return true;
@@ -408,6 +411,28 @@ export function getUniqueYears(data: MuseumRecord[]): string[] {
   return years.sort((a, b) => parseInt(a) - parseInt(b));
 }
 
+export function getUniqueDistricts(data: MuseumRecord[]): string[] {
+  return [...new Set(data.map(r => r.district).filter(Boolean))].sort();
+}
+
+export function groupByDistrict(data: MuseumRecord[], includeVAT: boolean = true): Record<string, GroupedData> {
+  const revenueField = includeVAT ? 'revenue_gross' : 'revenue_net';
+  const grouped: Record<string, GroupedData> = {};
+  data.forEach(row => {
+    if (!row.district) return;
+    if (!grouped[row.district]) grouped[row.district] = { revenue: 0, visitors: 0, tickets: 0 };
+    grouped[row.district].revenue += row[revenueField] || 0;
+    grouped[row.district].visitors += row.visits || 0;
+    grouped[row.district].tickets += row.tickets || 0;
+  });
+  return grouped;
+}
+
+export function getMuseumsForDistrict(data: MuseumRecord[], district: string): string[] {
+  if (district === 'all') return getUniqueMuseums(data);
+  return [...new Set(data.filter(r => r.district === district).map(r => r.museum_name).filter(Boolean))].sort();
+}
+
 export function getUniqueChannels(data: MuseumRecord[]): string[] {
   return [...new Set(data.map(r => r.channel).filter(Boolean))].sort();
 }

src/types/index.ts

@@ -2,6 +2,7 @@
 
 export interface MuseumRecord {
   date: string;
+  district: string;
   museum_name: string;
   channel: string;
   visits: number;
@@ -21,12 +22,14 @@ export interface Metrics {
 
 export interface Filters {
   year: string;
+  district: string;
   channel: string;
   museum: string;
   quarter: string;
 }
 
 export interface DateRangeFilters {
+  district: string;
   channel: string;
   museum: string;
 }
@@ -77,6 +80,7 @@ export interface UmrahData {
 export interface NocoDBDailySale {
   Id: number;
   Date: string;
+  District: string;
   MuseumName: string;
   Channel: string;
   TicketType: string;