feat: replace year/quarter filters with free date range pickers

Dashboard: PeriodPicker replaces year + quarter dropdowns. Defaults to
current month. YoY stat card now compares same range vs previous year.

Comparison: two independent PeriodPicker blocks (Period A and Period B).
Changing Period A auto-updates Period B to same period previous year,
but Period B remains freely editable.

Both pages use filterDataByDateRange; Filters type drops year/quarter.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

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, MultiSelect } from './shared';
+import { EmptyState, FilterControls, MultiSelect, PeriodPicker } from './shared';
 import { ExportableChart } from './ChartExport';
 import { chartColors, createBaseOptions } from '../config/chartConfig';
 import { useLanguage } from '../contexts/LanguageContext';
@@ -14,19 +14,10 @@ import {
   getUniqueChannels,
   getUniqueMuseums,
   getUniqueDistricts,
-  getMuseumsForDistrict,
-  getLatestYear
+  getMuseumsForDistrict
 } from '../services/dataService';
 import type { MuseumRecord, ComparisonProps, DateRangeFilters, Season } from '../types';
 
-interface PresetDateRange {
-  start: string;
-  end: string;
-}
-
-interface PresetDates {
-  [key: string]: PresetDateRange;
-}
 
 interface MetricCardProps {
   title: string;
@@ -40,28 +31,18 @@ interface MetricCardProps {
   currYear: string;
 }
 
-// Generate preset dates for a given year
-const generatePresetDates = (year: number): PresetDates => ({
-  'jan': { start: `${year}-01-01`, end: `${year}-01-31` },
-  'feb': { start: `${year}-02-01`, end: `${year}-02-28` },
-  'mar': { start: `${year}-03-01`, end: `${year}-03-31` },
-  'apr': { start: `${year}-04-01`, end: `${year}-04-30` },
-  'may': { start: `${year}-05-01`, end: `${year}-05-31` },
-  'jun': { start: `${year}-06-01`, end: `${year}-06-30` },
-  'jul': { start: `${year}-07-01`, end: `${year}-07-31` },
-  'aug': { start: `${year}-08-01`, end: `${year}-08-31` },
-  'sep': { start: `${year}-09-01`, end: `${year}-09-30` },
-  'oct': { start: `${year}-10-01`, end: `${year}-10-31` },
-  'nov': { start: `${year}-11-01`, end: `${year}-11-30` },
-  'dec': { start: `${year}-12-01`, end: `${year}-12-31` },
-  'q1': { start: `${year}-01-01`, end: `${year}-03-31` },
-  'q2': { start: `${year}-04-01`, end: `${year}-06-30` },
-  'q3': { start: `${year}-07-01`, end: `${year}-09-30` },
-  'q4': { start: `${year}-10-01`, end: `${year}-12-31` },
-  'h1': { start: `${year}-01-01`, end: `${year}-06-30` },
-  'h2': { start: `${year}-07-01`, end: `${year}-12-31` },
-  'full': { start: `${year}-01-01`, end: `${year}-12-31` }
-});
+function currentMonthRange() {
+  const now = new Date();
+  const y = now.getFullYear();
+  const m = now.getMonth() + 1;
+  const pad = (n: number) => String(n).padStart(2, '0');
+  const lastDay = new Date(y, m, 0).getDate();
+  return { start: `${y}-${pad(m)}-01`, end: `${y}-${pad(m)}-${pad(lastDay)}` };
+}
+
+function shiftYearBack(dateStr: string): string {
+  return dateStr.replace(/^(\d{4})/, (_, y) => String(parseInt(y) - 1));
+}
 
 function Comparison({ data, seasons, showDataLabels, setShowDataLabels, includeVAT, setIncludeVAT, allowedMuseums, allowedChannels }: ComparisonProps) {
   const { t } = useLanguage();
@@ -76,52 +57,25 @@ function Comparison({ data, seasons, showDataLabels, setShowDataLabels, includeV
     return d;
   }, [data, allowedMuseums, allowedChannels]);
 
-  // Get available years from data
-  const latestYear = useMemo(() => parseInt(getLatestYear(permissionFilteredData)), [permissionFilteredData]);
   const availableYears = useMemo((): number[] => {
     const yearsSet = new Set<number>();
     permissionFilteredData.forEach((r: MuseumRecord) => {
-      const d = r.date || (r as any).Date;
-      if (d) yearsSet.add(new Date(d).getFullYear());
+      if (r.date) yearsSet.add(parseInt(r.date.slice(0, 4)));
     });
     const years = Array.from(yearsSet).sort((a, b) => b - a);
     return years.length ? years : [new Date().getFullYear()];
-  }, [data]);
+  }, [permissionFilteredData]);
 
-  // Initialize state from URL or defaults
-  const [selectedYear, setSelectedYearState] = useState<number>(() => {
-    const urlYear = searchParams.get('year');
-    return urlYear ? parseInt(urlYear) : latestYear;
-  });
-  const presetDates = useMemo(() => generatePresetDates(selectedYear), [selectedYear]);
+  const defaultCurr = currentMonthRange();
+
+  // Period A (current) — user selects freely
+  const [currStart, setCurrStartState] = useState(() => searchParams.get('aStart') || defaultCurr.start);
+  const [currEnd, setCurrEndState] = useState(() => searchParams.get('aEnd') || defaultCurr.end);
+
+  // Period B (comparison) — defaults to same period previous year, freely editable
+  const [prevStart, setPrevStartState] = useState(() => searchParams.get('bStart') || shiftYearBack(defaultCurr.start));
+  const [prevEnd, setPrevEndState] = useState(() => searchParams.get('bEnd') || shiftYearBack(defaultCurr.end));
 
-  const [preset, setPresetState] = useState(() => searchParams.get('preset') || 'jan');
-  const [startDate, setStartDateState] = useState(() => {
-    const urlPreset = searchParams.get('preset');
-    const yearParam = searchParams.get('year');
-    const year = yearParam ? parseInt(yearParam) : latestYear;
-    const dates = generatePresetDates(year);
-    if (urlPreset && urlPreset !== 'custom' && dates[urlPreset]) {
-      return dates[urlPreset].start;
-    }
-    // Season presets store from/to in URL
-    const fromParam = searchParams.get('from');
-    if (fromParam) return fromParam;
-    return `${year}-01-01`;
-  });
-  const [endDate, setEndDateState] = useState(() => {
-    const urlPreset = searchParams.get('preset');
-    const yearParam = searchParams.get('year');
-    const year = yearParam ? parseInt(yearParam) : latestYear;
-    const dates = generatePresetDates(year);
-    if (urlPreset && urlPreset !== 'custom' && dates[urlPreset]) {
-      return dates[urlPreset].end;
-    }
-    // Season presets store from/to in URL
-    const toParam = searchParams.get('to');
-    if (toParam) return toParam;
-    return `${year}-01-31`;
-  });
   const [filters, setFiltersState] = useState(() => ({
     district: searchParams.get('district') || 'all',
     channel: searchParams.get('channel')?.split(',').filter(Boolean) || [],
@@ -133,64 +87,39 @@ function Comparison({ data, seasons, showDataLabels, setShowDataLabels, includeV
   const [activeChart, setActiveChart] = useState(0);
   const [activeCard, setActiveCard] = useState(0);
 
-  // Update URL with current state
-  const updateUrl = useCallback((newPreset: string, newFrom: string | null, newTo: string | null, newFilters: DateRangeFilters | null, newYear: number) => {
+  const updateUrl = useCallback((aStart: string, aEnd: string, bStart: string, bEnd: string, f: DateRangeFilters) => {
     const params = new URLSearchParams();
-    if (newPreset && newPreset !== 'jan') params.set('preset', newPreset);
-    if (newYear && newYear !== latestYear) params.set('year', newYear.toString());
-    if (newPreset === 'custom' || newPreset.startsWith('season-')) {
-      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.length > 0) params.set('channel', newFilters.channel.join(','));
-    if (newFilters?.museum && newFilters.museum.length > 0) params.set('museum', newFilters.museum.join(','));
+    params.set('aStart', aStart);
+    params.set('aEnd', aEnd);
+    params.set('bStart', bStart);
+    params.set('bEnd', bEnd);
+    if (f.district !== 'all') params.set('district', f.district);
+    if (f.channel.length > 0) params.set('channel', f.channel.join(','));
+    if (f.museum.length > 0) params.set('museum', f.museum.join(','));
     setSearchParams(params, { replace: true });
-  }, [setSearchParams, latestYear]);
+  }, [setSearchParams]);
 
-  const setSelectedYear = (year: number) => {
-    setSelectedYearState(year);
-    const newDates = generatePresetDates(year);
-    if (preset !== 'custom' && !preset.startsWith('season-') && newDates[preset]) {
-      setStartDateState(newDates[preset].start);
-      setEndDateState(newDates[preset].end);
-    }
-    updateUrl(preset, null, null, filters, year);
+  // When Period A changes, auto-update Period B to same period previous year
+  const handleCurrChange = (start: string, end: string) => {
+    const newPrevStart = shiftYearBack(start);
+    const newPrevEnd = shiftYearBack(end);
+    setCurrStartState(start);
+    setCurrEndState(end);
+    setPrevStartState(newPrevStart);
+    setPrevEndState(newPrevEnd);
+    updateUrl(start, end, newPrevStart, newPrevEnd, filters);
   };
 
-  const setPreset = (value: string) => {
-    setPresetState(value);
-    if (value.startsWith('season-')) {
-      const seasonId = parseInt(value.replace('season-', ''));
-      const season = seasons.find(s => s.Id === seasonId);
-      if (season) {
-        setStartDateState(season.StartDate);
-        setEndDateState(season.EndDate);
-        updateUrl(value, season.StartDate, season.EndDate, filters, selectedYear);
-      }
-    } else if (value !== 'custom' && presetDates[value]) {
-      setStartDateState(presetDates[value].start);
-      setEndDateState(presetDates[value].end);
-      updateUrl(value, null, null, filters, selectedYear);
-    }
-  };
-
-  const setStartDate = (value: string) => {
-    setStartDateState(value);
-    setPresetState('custom');
-    updateUrl('custom', value, endDate, filters, selectedYear);
-  };
-
-  const setEndDate = (value: string) => {
-    setEndDateState(value);
-    setPresetState('custom');
-    updateUrl('custom', startDate, value, filters, selectedYear);
+  const handlePrevChange = (start: string, end: string) => {
+    setPrevStartState(start);
+    setPrevEndState(end);
+    updateUrl(currStart, currEnd, start, end, filters);
   };
 
   const setFilters = (newFilters: DateRangeFilters | ((prev: DateRangeFilters) => DateRangeFilters)) => {
     const updated = typeof newFilters === 'function' ? newFilters(filters) : newFilters;
     setFiltersState(updated);
-    updateUrl(preset, startDate, endDate, updated, selectedYear);
+    updateUrl(currStart, currEnd, prevStart, prevEnd, updated);
   };
   
   const charts = [
@@ -249,39 +178,19 @@ function Comparison({ data, seasons, showDataLabels, setShowDataLabels, includeV
   const districts = useMemo(() => getUniqueDistricts(permissionFilteredData), [permissionFilteredData]);
   const availableMuseums = useMemo(() => getMuseumsForDistrict(permissionFilteredData, filters.district), [permissionFilteredData, filters.district]);
 
-  // Year-over-year comparison: same dates, previous year
-  // For season presets, try to find the same season name from the previous hijri year
-  const ranges = useMemo(() => {
-    const curr = { start: startDate, end: endDate };
-    let prev = {
-      start: startDate.replace(/^(\d{4})/, (_: string, y: string) => String(parseInt(y) - 1)),
-      end: endDate.replace(/^(\d{4})/, (_: string, y: string) => String(parseInt(y) - 1))
-    };
-
-    if (preset.startsWith('season-')) {
-      const seasonId = parseInt(preset.replace('season-', ''));
-      const currentSeason = seasons.find(s => s.Id === seasonId);
-      if (currentSeason) {
-        const prevSeason = seasons.find(
-          s => s.Name === currentSeason.Name && s.HijriYear === currentSeason.HijriYear - 1
-        );
-        if (prevSeason) {
-          prev = { start: prevSeason.StartDate, end: prevSeason.EndDate };
-        }
-      }
-    }
-
-    return { curr, prev };
-  }, [startDate, endDate, preset, seasons]);
+  const ranges = useMemo(() => ({
+    curr: { start: currStart, end: currEnd },
+    prev: { start: prevStart, end: prevEnd },
+  }), [currStart, currEnd, prevStart, prevEnd]);
 
   const prevData = useMemo(() =>
-    filterDataByDateRange(permissionFilteredData, ranges.prev.start, ranges.prev.end, filters),
-    [permissionFilteredData, ranges.prev, filters]
+    filterDataByDateRange(permissionFilteredData, prevStart, prevEnd, filters),
+    [permissionFilteredData, prevStart, prevEnd, filters]
   );
 
   const currData = useMemo(() =>
-    filterDataByDateRange(permissionFilteredData, ranges.curr.start, ranges.curr.end, filters),
-    [permissionFilteredData, ranges.curr, filters]
+    filterDataByDateRange(permissionFilteredData, currStart, currEnd, filters),
+    [permissionFilteredData, currStart, currEnd, filters]
   );
 
   const prevMetrics = useMemo(() => calculateMetrics(prevData, includeVAT), [prevData, includeVAT]);
@@ -616,60 +525,15 @@ function Comparison({ data, seasons, showDataLabels, setShowDataLabels, includeV
         </div>
       </div>
 
-      <FilterControls title={t('comparison.selectPeriod')} onReset={resetFilters}>
+      <FilterControls title={t('comparison.currentPeriod')} onReset={null}>
         <FilterControls.Row>
-          <FilterControls.Group label={t('comparison.period')}>
-            <select value={preset} onChange={e => setPreset(e.target.value)}>
-              <option value="custom">{t('comparison.custom')}</option>
-              <option value="jan">{t('months.january')}</option>
-              <option value="feb">{t('months.february')}</option>
-              <option value="mar">{t('months.march')}</option>
-              <option value="apr">{t('months.april')}</option>
-              <option value="may">{t('months.may')}</option>
-              <option value="jun">{t('months.june')}</option>
-              <option value="jul">{t('months.july')}</option>
-              <option value="aug">{t('months.august')}</option>
-              <option value="sep">{t('months.september')}</option>
-              <option value="oct">{t('months.october')}</option>
-              <option value="nov">{t('months.november')}</option>
-              <option value="dec">{t('months.december')}</option>
-              <option value="q1">{t('time.q1')}</option>
-              <option value="q2">{t('time.q2')}</option>
-              <option value="q3">{t('time.q3')}</option>
-              <option value="q4">{t('time.q4')}</option>
-              <option value="h1">{t('time.h1')}</option>
-              <option value="h2">{t('time.h2')}</option>
-              <option value="full">{t('time.fullYear')}</option>
-              {seasons.length > 0 && (
-                <optgroup label={t('comparison.seasons') || 'Seasons'}>
-                  {seasons.map(s => (
-                    <option key={s.Id} value={`season-${s.Id}`}>
-                      {s.Name} {s.HijriYear}
-                    </option>
-                  ))}
-                </optgroup>
-              )}
-            </select>
-          </FilterControls.Group>
-          {preset !== 'custom' && !preset.startsWith('season-') && (
-            <FilterControls.Group label={t('filters.year')}>
-              <select value={selectedYear} onChange={e => setSelectedYear(parseInt(e.target.value))}>
-                {availableYears.map(y => (
-                  <option key={y} value={y}>{y}</option>
-                ))}
-              </select>
-            </FilterControls.Group>
-          )}
-          {(preset === 'custom' || preset.startsWith('season-')) && (
-            <>
-              <FilterControls.Group label={t('comparison.from')}>
-                <input type="date" value={startDate} onChange={e => setStartDate(e.target.value)} />
-              </FilterControls.Group>
-              <FilterControls.Group label={t('comparison.to')}>
-                <input type="date" value={endDate} onChange={e => setEndDate(e.target.value)} />
-              </FilterControls.Group>
-            </>
-          )}
+          <PeriodPicker
+            startDate={currStart}
+            endDate={currEnd}
+            onChange={handleCurrChange}
+            availableYears={availableYears}
+            seasons={seasons}
+          />
           <FilterControls.Group label={t('filters.district')}>
             <select value={filters.district} onChange={e => setFilters({...filters, district: e.target.value, museum: []})}>
               <option value="all">{t('filters.allDistricts')}</option>
@@ -695,6 +559,18 @@ function Comparison({ data, seasons, showDataLabels, setShowDataLabels, includeV
         </FilterControls.Row>
       </FilterControls>
 
+      <FilterControls title={t('comparison.previousPeriod')} onReset={null}>
+        <FilterControls.Row>
+          <PeriodPicker
+            startDate={prevStart}
+            endDate={prevEnd}
+            onChange={handlePrevChange}
+            availableYears={availableYears}
+            seasons={seasons}
+          />
+        </FilterControls.Row>
+      </FilterControls>
+
       <div className="period-display-banner" id="comparison-period">
         <div className="period-box prev">
           <div className="period-label">{t('comparison.previousPeriod')}</div>

src/components/Dashboard.tsx

@@ -1,12 +1,12 @@
 import React, { useState, useMemo, useEffect } from 'react';
 import { useSearchParams, Link } from 'react-router-dom';
 import { Line, Bar, Pie } from 'react-chartjs-2';
-import { Carousel, EmptyState, FilterControls, MultiSelect, StatCard } from './shared';
+import { Carousel, EmptyState, FilterControls, MultiSelect, PeriodPicker, StatCard } from './shared';
 import { ExportableChart } from './ChartExport';
 import { chartColors, chartPalette, createBaseOptions } from '../config/chartConfig';
 import { useLanguage } from '../contexts/LanguageContext';
 import {
-  filterData,
+  filterDataByDateRange,
   calculateMetrics,
   formatCurrency,
   formatNumber,
@@ -24,16 +24,22 @@ import {
 } from '../services/dataService';
 import type { DashboardProps, Filters, MuseumRecord, Season } from '../types';
 
+function currentMonthRange(): { startDate: string; endDate: string } {
+  const now = new Date();
+  const y = now.getFullYear();
+  const m = now.getMonth() + 1;
+  const pad = (n: number) => String(n).padStart(2, '0');
+  const lastDay = new Date(y, m, 0).getDate();
+  return { startDate: `${y}-${pad(m)}-01`, endDate: `${y}-${pad(m)}-${pad(lastDay)}` };
+}
+
 const defaultFilters: Filters = {
-  year: 'all',
+  ...currentMonthRange(),
   district: 'all',
   channel: [],
   museum: [],
-  quarter: 'all'
 };
 
-const filterKeys: (keyof Filters)[] = ['year', 'district', 'quarter'];
-
 function Dashboard({ data, seasons, userRole, showDataLabels, setShowDataLabels, includeVAT, setIncludeVAT, allowedMuseums, allowedChannels }: DashboardProps) {
   const { t } = useLanguage();
   const [searchParams, setSearchParams] = useSearchParams();
@@ -46,30 +52,24 @@ function Dashboard({ data, seasons, userRole, showDataLabels, setShowDataLabels,
   
   // Initialize filters from URL or defaults
   const [filters, setFiltersState] = useState<Filters>(() => {
-    const initial: Filters = { ...defaultFilters };
-    filterKeys.forEach(key => {
-      const value = searchParams.get(key);
-      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;
+    const def = defaultFilters;
+    return {
+      startDate: searchParams.get('start') || def.startDate,
+      endDate: searchParams.get('end') || def.endDate,
+      district: searchParams.get('district') || 'all',
+      museum: searchParams.get('museum')?.split(',').filter(Boolean) || [],
+      channel: searchParams.get('channel')?.split(',').filter(Boolean) || [],
+    };
   });
 
   // Update both state and URL
   const setFilters = (newFilters: Filters | ((prev: Filters) => Filters)) => {
     const updated = typeof newFilters === 'function' ? newFilters(filters) : newFilters;
     setFiltersState(updated);
-    
     const params = new URLSearchParams();
-    filterKeys.forEach(key => {
-      const val = (updated as Record<string, unknown>)[key] as string;
-      if (val && val !== 'all') {
-        params.set(key, val);
-      }
-    });
+    params.set('start', updated.startDate);
+    params.set('end', updated.endDate);
+    if (updated.district !== 'all') params.set('district', updated.district);
     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 });
@@ -97,7 +97,10 @@ function Dashboard({ data, seasons, userRole, showDataLabels, setShowDataLabels,
     return d;
   }, [data, allowedMuseums, allowedChannels]);
 
-  const filteredData = useMemo(() => filterData(permissionFilteredData, filters), [permissionFilteredData, filters]);
+  const filteredData = useMemo(
+    () => filterDataByDateRange(permissionFilteredData, filters.startDate, filters.endDate, filters),
+    [permissionFilteredData, filters]
+  );
 
   const seasonFilteredData = useMemo(() => {
     if (!selectedSeason) return filteredData;
@@ -134,13 +137,13 @@ function Dashboard({ data, seasons, userRole, showDataLabels, setShowDataLabels,
   const availableMuseums = useMemo(() => getMuseumsForDistrict(permissionFilteredData, filters.district), [permissionFilteredData, filters.district]);
 
   const yoyChange = useMemo(() => {
-    if (filters.year === 'all') return null;
-    const prevYear = String(parseInt(filters.year) - 1);
-    const prevData = permissionFilteredData.filter((row: MuseumRecord) => row.year === prevYear);
+    const prevStart = filters.startDate.replace(/^(\d{4})/, (_, y) => String(parseInt(y) - 1));
+    const prevEnd = filters.endDate.replace(/^(\d{4})/, (_, y) => String(parseInt(y) - 1));
+    const prevData = filterDataByDateRange(permissionFilteredData, prevStart, prevEnd, filters);
     if (prevData.length === 0) return null;
     const prevMetrics = calculateMetrics(prevData, includeVAT);
     return prevMetrics.revenue > 0 ? ((metrics.revenue - prevMetrics.revenue) / prevMetrics.revenue * 100) : null;
-  }, [permissionFilteredData, filters.year, metrics.revenue, includeVAT]);
+  }, [permissionFilteredData, filters, metrics.revenue, includeVAT]);
 
   // Revenue trend data (weekly or daily)
   const trendData = useMemo(() => {
@@ -514,12 +517,13 @@ function Dashboard({ data, seasons, userRole, showDataLabels, setShowDataLabels,
 
       <FilterControls title={t('filters.title')} onReset={resetFilters}>
         <FilterControls.Row>
-          <FilterControls.Group label={t('filters.year')}>
-            <select value={filters.year} onChange={e => setFilters({...filters, year: e.target.value})}>
-              <option value="all">{t('filters.allYears')}</option>
-              {years.map(y => <option key={y} value={y}>{y}</option>)}
-            </select>
-          </FilterControls.Group>
+          <PeriodPicker
+            startDate={filters.startDate}
+            endDate={filters.endDate}
+            onChange={(start, end) => setFilters({ ...filters, startDate: start, endDate: end })}
+            availableYears={years.map(Number)}
+            seasons={seasons}
+          />
           <FilterControls.Group label={t('filters.district')}>
             <select value={filters.district} onChange={e => setFilters({...filters, district: e.target.value, museum: []})}>
               <option value="all">{t('filters.allDistricts')}</option>
@@ -542,15 +546,6 @@ function Dashboard({ data, seasons, userRole, showDataLabels, setShowDataLabels,
               allLabel={t('filters.allMuseums')}
             />
           </FilterControls.Group>
-          <FilterControls.Group label={t('filters.quarter')}>
-            <select value={filters.quarter} onChange={e => setFilters({...filters, quarter: e.target.value})}>
-              <option value="all">{t('filters.allQuarters')}</option>
-              <option value="1">{t('time.q1')}</option>
-              <option value="2">{t('time.q2')}</option>
-              <option value="3">{t('time.q3')}</option>
-              <option value="4">{t('time.q4')}</option>
-            </select>
-          </FilterControls.Group>
           <FilterControls.Group label={t('filters.season')}>
             <select value={selectedSeason} onChange={e => setSelectedSeason(e.target.value)}>
               <option value="">{t('filters.allSeasons')}</option>

src/components/Slides.tsx

@@ -391,8 +391,8 @@ function SlidePreview({ slide, data, channels, museums, metrics }: SlidePreviewP
   const { t } = useLanguage();
   const filteredData = useMemo(() =>
     filterDataByDateRange(data, slide.startDate, slide.endDate, {
-      channel: slide.channel,
-      museum: slide.museum
+      channel: slide.channel ? [slide.channel] : [],
+      museum: slide.museum ? [slide.museum] : []
     }),
     [data, slide.startDate, slide.endDate, slide.channel, slide.museum]
   );
@@ -544,8 +544,8 @@ function generateSlideHTML(slide: SlideConfig, index: number, data: MuseumRecord
 
 function generateKPIHTML(slide: SlideConfig, data: MuseumRecord[]): string {
   const filtered = filterDataByDateRange(data, slide.startDate, slide.endDate, {
-    channel: slide.channel,
-    museum: slide.museum
+    channel: slide.channel ? [slide.channel] : [],
+    museum: slide.museum ? [slide.museum] : []
   });
   const metrics = calculateMetrics(filtered);
 
@@ -571,8 +571,8 @@ function generateChartScripts(slides: SlideConfig[], data: MuseumRecord[]): stri
     if (slide.chartType === 'kpi-cards') return '';
 
     const filtered = filterDataByDateRange(data, slide.startDate, slide.endDate, {
-      channel: slide.channel,
-      museum: slide.museum
+      channel: slide.channel ? [slide.channel] : [],
+      museum: slide.museum ? [slide.museum] : []
     });
 
     const chartConfig = generateChartConfig(slide, filtered);

src/components/shared/PeriodPicker.tsx

@@ -0,0 +1,147 @@
+import React, { useState, useEffect } from 'react';
+import { useLanguage } from '../../contexts/LanguageContext';
+import type { Season } from '../../types';
+
+interface Props {
+  startDate: string;
+  endDate: string;
+  onChange: (start: string, end: string) => void;
+  availableYears: number[];
+  seasons?: Season[];
+}
+
+const PRESETS: Record<string, (year: number) => { start: string; end: string }> = {
+  jan: y => ({ start: `${y}-01-01`, end: `${y}-01-31` }),
+  feb: y => ({ start: `${y}-02-01`, end: `${y}-02-28` }),
+  mar: y => ({ start: `${y}-03-01`, end: `${y}-03-31` }),
+  apr: y => ({ start: `${y}-04-01`, end: `${y}-04-30` }),
+  may: y => ({ start: `${y}-05-01`, end: `${y}-05-31` }),
+  jun: y => ({ start: `${y}-06-01`, end: `${y}-06-30` }),
+  jul: y => ({ start: `${y}-07-01`, end: `${y}-07-31` }),
+  aug: y => ({ start: `${y}-08-01`, end: `${y}-08-31` }),
+  sep: y => ({ start: `${y}-09-01`, end: `${y}-09-30` }),
+  oct: y => ({ start: `${y}-10-01`, end: `${y}-10-31` }),
+  nov: y => ({ start: `${y}-11-01`, end: `${y}-11-30` }),
+  dec: y => ({ start: `${y}-12-01`, end: `${y}-12-31` }),
+  q1:   y => ({ start: `${y}-01-01`, end: `${y}-03-31` }),
+  q2:   y => ({ start: `${y}-04-01`, end: `${y}-06-30` }),
+  q3:   y => ({ start: `${y}-07-01`, end: `${y}-09-30` }),
+  q4:   y => ({ start: `${y}-10-01`, end: `${y}-12-31` }),
+  h1:   y => ({ start: `${y}-01-01`, end: `${y}-06-30` }),
+  h2:   y => ({ start: `${y}-07-01`, end: `${y}-12-31` }),
+  full: y => ({ start: `${y}-01-01`, end: `${y}-12-31` }),
+};
+
+function guessPreset(start: string, end: string): { preset: string; year: number } {
+  const year = parseInt(start.slice(0, 4));
+  for (const [key, fn] of Object.entries(PRESETS)) {
+    const p = fn(year);
+    if (p.start === start && p.end === end) return { preset: key, year };
+  }
+  return { preset: 'custom', year };
+}
+
+export default function PeriodPicker({ startDate, endDate, onChange, availableYears, seasons = [] }: Props) {
+  const { t } = useLanguage();
+
+  const [year, setYear] = useState<number>(() => guessPreset(startDate, endDate).year || new Date().getFullYear());
+  const [preset, setPreset] = useState<string>(() => guessPreset(startDate, endDate).preset);
+
+  // When parent updates dates externally (e.g. auto-fill from Period A), sync internal state
+  useEffect(() => {
+    const { preset: p, year: y } = guessPreset(startDate, endDate);
+    setPreset(p);
+    if (p !== 'custom') setYear(y);
+  }, [startDate, endDate]);
+
+  const handlePreset = (value: string) => {
+    setPreset(value);
+    if (value === 'custom') return;
+    if (value.startsWith('season-')) {
+      const season = seasons.find(s => String(s.Id) === value.replace('season-', ''));
+      if (season) onChange(season.StartDate, season.EndDate);
+      return;
+    }
+    const range = PRESETS[value]?.(year);
+    if (range) onChange(range.start, range.end);
+  };
+
+  const handleYear = (newYear: number) => {
+    setYear(newYear);
+    if (preset !== 'custom' && !preset.startsWith('season-')) {
+      const range = PRESETS[preset]?.(newYear);
+      if (range) onChange(range.start, range.end);
+    }
+  };
+
+  const handleStart = (value: string) => {
+    setPreset('custom');
+    onChange(value, endDate);
+  };
+
+  const handleEnd = (value: string) => {
+    setPreset('custom');
+    onChange(startDate, value);
+  };
+
+  return (
+    <div style={{ display: 'contents' }}>
+      <div className="control-group">
+        <label>{t('comparison.period')}</label>
+        <select value={preset} onChange={e => handlePreset(e.target.value)}>
+          <option value="custom">{t('comparison.custom')}</option>
+          <option value="jan">{t('months.january')}</option>
+          <option value="feb">{t('months.february')}</option>
+          <option value="mar">{t('months.march')}</option>
+          <option value="apr">{t('months.april')}</option>
+          <option value="may">{t('months.may')}</option>
+          <option value="jun">{t('months.june')}</option>
+          <option value="jul">{t('months.july')}</option>
+          <option value="aug">{t('months.august')}</option>
+          <option value="sep">{t('months.september')}</option>
+          <option value="oct">{t('months.october')}</option>
+          <option value="nov">{t('months.november')}</option>
+          <option value="dec">{t('months.december')}</option>
+          <option value="q1">{t('time.q1')}</option>
+          <option value="q2">{t('time.q2')}</option>
+          <option value="q3">{t('time.q3')}</option>
+          <option value="q4">{t('time.q4')}</option>
+          <option value="h1">{t('time.h1')}</option>
+          <option value="h2">{t('time.h2')}</option>
+          <option value="full">{t('time.fullYear')}</option>
+          {seasons.length > 0 && (
+            <optgroup label={t('comparison.seasons') || 'Seasons'}>
+              {seasons.map(s => (
+                <option key={s.Id} value={`season-${s.Id}`}>
+                  {s.Name} {s.HijriYear}
+                </option>
+              ))}
+            </optgroup>
+          )}
+        </select>
+      </div>
+
+      {preset !== 'custom' && !preset.startsWith('season-') && availableYears.length > 0 && (
+        <div className="control-group">
+          <label>{t('filters.year')}</label>
+          <select value={year} onChange={e => handleYear(parseInt(e.target.value))}>
+            {availableYears.map(y => <option key={y} value={y}>{y}</option>)}
+          </select>
+        </div>
+      )}
+
+      {(preset === 'custom' || preset.startsWith('season-')) && (
+        <>
+          <div className="control-group">
+            <label>{t('comparison.from')}</label>
+            <input type="date" value={startDate} onChange={e => handleStart(e.target.value)} />
+          </div>
+          <div className="control-group">
+            <label>{t('comparison.to')}</label>
+            <input type="date" value={endDate} onChange={e => handleEnd(e.target.value)} />
+          </div>
+        </>
+      )}
+    </div>
+  );
+}

src/components/shared/index.tsx

@@ -5,3 +5,4 @@ export { default as FilterControls } from './FilterControls';
 export { default as MultiSelect } from './MultiSelect';
 export { default as StatCard } from './StatCard';
 export { default as ToggleSwitch } from './ToggleSwitch';
+export { default as PeriodPicker } from './PeriodPicker';

src/services/dataService.ts

@@ -273,11 +273,9 @@ 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.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;
   });
 }

src/types/index.ts

@@ -21,11 +21,11 @@ export interface Metrics {
 }
 
 export interface Filters {
-  year: string;
+  startDate: string;
+  endDate: string;
   district: string;
   channel: string[];
   museum: string[];
-  quarter: string;
 }
 
 export interface DateRangeFilters {