Нативный <input type=\"date\"> рендерил американский MM/DD/YYYY и
тонкий браузерный popup, выглядел криво рядом с другими полями.
Используем готовый react-datepicker (10M downloads/week) — никакой
кастомизации, всё из коробки:
- dateFormat=\"dd.MM.yyyy\" + locale=\"ru\" → «25.04.2026», русские
Январь/Понедельник
- showMonthDropdown + showYearDropdown + dropdownMode=\"select\" →
быстрый прыжок на любой месяц/год
- todayButton=\"Сегодня\" → кнопка под календарём
- isClearable → крестик в input для очистки
- popperClassName z-[100] чтобы попап не резался z-стеком
ISO YYYY-MM-DD внутрь/наружу собираем вручную из локальных Y/M/D —
не toISOString(), чтобы вечерние даты в часовом поясе KZ (UTC+5)
не сдвигались на день назад.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Кастомный DateField на react-day-picker оказался хрупким (стрелки
навигации не реагировали, dropdown лет вылазил за popover). В проекте
нет shadcn/ui-обёртки над day-picker, а пилить её с нуля под одно
поле — overkill.
Откатил на нативный <input type=\"date\"> с max-w-[180px], чтобы
поле не растягивалось на всю колонку. Браузер сам подтягивает
локаль из ОС/настроек — у пользователя с RU-локалью календарь
будет на русском, формат DD.MM.YYYY (как в его референс-скриншоте).
- Удалён components/DateField.tsx.
- В SupplyEditPage возвращён <TextInput type=\"date\"> с
className=\"max-w-[180px]\".
- Сняты зависимости react-day-picker и date-fns.
Если когда-нибудь вернёмся к кастомному picker'у — будем ставить
shadcn/ui calendar+popover целиком, не вручную.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Новый компонент <DateField/>:
- Ширина зафиксирована (по умолчанию w-40 = 160px) — раньше нативный
<input type="date"> растягивался на всю колонку, хотя содержимое
всегда 10 символов.
- Ввод в формате DD.MM.YYYY с авто-вставкой точек после dd и mm,
inputMode=numeric для мобилы. Хранит/отдаёт ISO YYYY-MM-DD —
API-контракт не меняется.
- Иконка календаря справа открывает попап (через portal в body,
position fixed) с react-day-picker: locale=ru, weekStartsOn=1,
ISOWeek; caption_label/weekday с capitalize CSS — «Апр 2026»,
«Пн Вт Ср …». Outside-click закрывает.
Подключено в SupplyEditPage (поле «Дата»). Ставка на единый
компонент DateField — все будущие даты в системе через него.
Зависимости: + react-day-picker ^9, + date-fns ^4.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
API: GET /api/sales/retail/stats?days=30 — возвращает:
- revenueToday + transactionsToday
- revenueThisMonth + transactionsThisMonth + avgTicketThisMonth
- revenuePrevMonth (для сравнения месяц-к-месяцу)
- series — массив дневных точек {bucket, revenue, transactions} с заполнением
пустых дней нулями (чтобы линия графика была непрерывной)
- считает только проведённые чеки (Status == Posted)
Web:
- recharts добавлен (3.8.1)
- SalesChart компонент: AreaChart с градиент-заливкой брендового зелёного,
ось X — дни (DD.MM), ось Y — выручка, tooltip с числами и валютой
- DashboardPage пересобран под продажи как первичную инфу:
- 4 KPI-карточки сверху: выручка сегодня, выручка за месяц (с дельтой
к прошлому месяцу), средний чек, прошлый месяц
- график за 30 дней с empty-state когда чеков нет
- Каталог теперь второстепенный (мелкие карточки внизу)
Empty-state: если за 30 дней не было ни одной продажи — показываем
"График появится когда появятся первые продажи" вместо плоской линии.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
