diff --git a/src/components/sales-stats/PeriodSelector.tsx b/src/components/sales-stats/PeriodSelector.tsx index 35eff18..c55874a 100644 --- a/src/components/sales-stats/PeriodSelector.tsx +++ b/src/components/sales-stats/PeriodSelector.tsx @@ -2,6 +2,7 @@ import { useState } from 'react'; import { useTranslation } from 'react-i18next'; import { SALES_STATS } from '../../constants/salesStats'; +import { getMonthToDateRange, isMonthToDate } from '../../utils/period'; interface PeriodSelectorProps { value: { days?: number; startDate?: string; endDate?: string }; @@ -24,46 +25,44 @@ export function PeriodSelector({ value, onChange }: PeriodSelectorProps) { onChange({ days }); }; - const handleCustomToggle = () => { - setShowCustom((prev) => !prev); + const handleThisMonth = () => { + setShowCustom(false); + onChange({ days: undefined, ...getMonthToDateRange() }); }; + const handleCustomToggle = () => setShowCustom((prev) => !prev); + const handleDateChange = (field: 'startDate' | 'endDate', dateStr: string) => { - onChange({ - ...value, - days: undefined, - [field]: dateStr, - }); + onChange({ ...value, days: undefined, [field]: dateStr }); }; - const isPresetActive = (days: number) => !showCustom && value.days === days; + const buttonClass = (active: boolean) => + `rounded-lg px-3 py-1.5 text-sm font-medium transition-colors ${ + active + ? 'bg-accent-500/20 text-accent-400' + : 'bg-dark-800/50 text-dark-400 hover:bg-dark-700/50 hover:text-dark-300' + }`; + + const mtdActive = !showCustom && isMonthToDate(value); return (
+ + {SALES_STATS.PERIOD_PRESETS.map((days) => ( ))} - @@ -75,7 +74,7 @@ export function PeriodSelector({ value, onChange }: PeriodSelectorProps) { onChange={(e) => handleDateChange('startDate', e.target.value)} className="rounded-lg border border-dark-600 bg-dark-800 px-2 py-1 text-sm text-dark-200" /> - {'\u2014'} + {'—'} ({ days: SALES_STATS.DEFAULT_PERIOD }); + }>(() => getMonthToDateRange()); const params: SalesStatsParams = useMemo( () => ({ diff --git a/src/utils/period.ts b/src/utils/period.ts new file mode 100644 index 0000000..7032556 --- /dev/null +++ b/src/utils/period.ts @@ -0,0 +1,22 @@ +/** First day of the current month → today, as local YYYY-MM-DD strings. + * Used as the default sales-stats window ("this month so far"). */ +export function getMonthToDateRange(): { startDate: string; endDate: string } { + const now = new Date(); + const toLocalISODate = (d: Date) => + `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`; + return { + startDate: toLocalISODate(new Date(now.getFullYear(), now.getMonth(), 1)), + endDate: toLocalISODate(now), + }; +} + +/** True when the period is exactly "from the 1st of the current month to today". */ +export function isMonthToDate(period: { + days?: number; + startDate?: string; + endDate?: string; +}): boolean { + if (period.days !== undefined) return false; + const mtd = getMonthToDateRange(); + return period.startDate === mtd.startDate && period.endDate === mtd.endDate; +}