Выбор периода

Сделай выбор даты отчёта: календарь на месяц и над ним ряд быстрых вариантов «Сегодня», «Вчера», «Неделя назад», при нажатии на которые дата подставляется в календарь. Выбранная дата отдаётся наружу через колбэк onChange.

date-range__docs__claude-code__claude-opus-5__1 · 23.09.2026, 20:19:35 мск

Проверки пройдены
Доки · claude-opus-5 · Claude Code
Контекст до задачи~22 702
Токенов на прогон48 021
Цена$0.265
Ошибок компилятора0

Первый вызов модели получил 47 349 токенов входа, включая системный промпт Claude Code. Контекст до задачи — оценка по длине текста, для русского текста она занижает число токенов в полтора-два раза.

Компилятор

Ошибок нет: все компоненты и пропсы существуют.

Линтер и покрытие

  • inline-styleСтроки 35, 36
    Инлайновые стили вместо классов и токенов библиотеки
Компоненты библиотеки

JxCalendar, JxChip

Ожидались JxCalendar, JxChip · покрытие 100%

Контекст

Доки (llms-full.txt, ~22548)

Вход 2 · выход 672 · из кэша 8 233 · в кэш 39 114 · 8 с

Рендер

Код компонента

tsx53 строки
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
import { useState } from 'react';
import { JxCalendar, JxChip } from '@jinx-ui/react';

interface ReportDatePickerProps {
  defaultValue?: Date | null;
  onChange?: (value: Date | null) => void;
}

const startOfDay = (date: Date) => new Date(date.getFullYear(), date.getMonth(), date.getDate());

const shiftDays = (days: number) => {
  const base = startOfDay(new Date());
  base.setDate(base.getDate() + days);
  return base;
};

const presets = [
  { key: 'today', label: 'Сегодня', offset: 0 },
  { key: 'yesterday', label: 'Вчера', offset: -1 },
  { key: 'weekAgo', label: 'Неделя назад', offset: -7 },
];

export default function ReportDatePicker({ defaultValue = null, onChange }: ReportDatePickerProps) {
  const [date, setDate] = useState<Date | null>(defaultValue);

  const apply = (next: Date | null) => {
    setDate(next);
    onChange?.(next);
  };

  const isSameDay = (a: Date | null, b: Date) =>
    a !== null && startOfDay(a).getTime() === b.getTime();

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
      <div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap' }}>
        {presets.map((preset) => {
          const presetDate = shiftDays(preset.offset);
          return (
            <JxChip
              key={preset.key}
              active={isSameDay(date, presetDate)}
              onClick={() => apply(presetDate)}
            >
              {preset.label}
            </JxChip>
          );
        })}
      </div>
      <JxCalendar locale="ru-RU" value={date} onValueChange={apply} />
    </div>
  );
}