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) => (
))}
-