feat(sales-stats): пресет «Этот месяц» (с 1-го числа) и он же по умолчанию

Статистика по умолчанию открывается за текущий месяц с 1-го числа до сегодня
(month-to-date), а не за фиксированные 30 дней. Добавлена кнопка «Этот месяц»
в селектор периода; util getMonthToDateRange/isMonthToDate.

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 (
     <div className="flex flex-wrap items-center gap-2">
+      <button type="button" onClick={handleThisMonth} className={buttonClass(mtdActive)}>
+        {t('admin.salesStats.period.thisMonth')}
+      </button>
+
       {SALES_STATS.PERIOD_PRESETS.map((days) => (
         <button
           key={days}
           type="button"
           onClick={() => handlePreset(days)}
-          className={`rounded-lg px-3 py-1.5 text-sm font-medium transition-colors ${
-            isPresetActive(days)
-              ? 'bg-accent-500/20 text-accent-400'
-              : 'bg-dark-800/50 text-dark-400 hover:bg-dark-700/50 hover:text-dark-300'
-          }`}
+          className={buttonClass(!showCustom && value.days === days)}
         >
           {presetLabels[days]}
         </button>
       ))}
 
-      <button
-        type="button"
-        onClick={handleCustomToggle}
-        className={`rounded-lg px-3 py-1.5 text-sm font-medium transition-colors ${
-          showCustom
-            ? 'bg-accent-500/20 text-accent-400'
-            : 'bg-dark-800/50 text-dark-400 hover:bg-dark-700/50 hover:text-dark-300'
-        }`}
-      >
+      <button type="button" onClick={handleCustomToggle} className={buttonClass(showCustom)}>
         {t('admin.salesStats.period.custom')}
       </button>
 
@@ -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"
           />
-          <span className="text-dark-500">{'\u2014'}</span>
+          <span className="text-dark-500">{'—'}</span>
           <input
             type="date"
             value={value.endDate || ''}