# Back Office — Calendar

1:1 build of **back-office-components-spec.md §3**. 4 sub-components on one canvas.

- **A · DateFilterBar** — segment track (`#F2F4F7` r10 h44 pad2), tabs h32 r8 (idle 13/400 `#666`, active 13/600 `#1D1D1D` white + shadow): **Dünən · Bugün · Həftəlik · Aylıq**. Date display h40, border `#E5E5EA` r8, calendar icon + 13/500 text. 6 states: Bugün `5 Nov`, Dünən `4 Nov`, Həftəlik `29 Oct - 5 Nov`, Aylıq `5 Oct - 5 Nov`, else `7 Sep - 5 Nov`.
- **B · PresetSidebar** — border `#F2F2F7` r8, presets h32 (idle 14/400 `#1D1D1D`, active 14/500 `#2684FF`): Bugün · Dünən · Son 7 gün · Son 30 gün · **Bu ay** *(active)* · Sonuncu ay.
- **C · CalendarGrid** — box border `#F2F2F7` r8, header (chevrons + `SEP 2024` uppercase 13/500 `#999`), Su–Sa headers, day cells 32×32 13/400. Selected single = `#2684FF` circle r50% white; range = `#2684FF` circle ends + `#DFEFFF` square middle. 3 states: No selection · Single (15) · Range (7 → 22). Sep 2024, Sunday-start (Sep 1 = Su).
- **D · DateRangePicker** — DateFilterBar on top + popover (PresetSidebar left + CalendarGrid right, with «7 Sep - 5 Oct» title) + **OK button inside the popover, bottom-right** — design-system Button `.btn-xs` (h32, 13/500, r8, pad 0 12, min-width 96) `.btn-default` primary `#2684FF`.

## Interaction
DateFilterBar tabs switch active + update the date display text per state.

## Notes
- Colours/radii/type are the exact spec §0 tokens.