Compose reporting layouts

The building blocks below take plain props (a week list, or a timezone plus year and month) and do no fetching, so you wire your own data layer (RTK Query, TanStack, fixtures) around them.

Shared building blocks

These power the week selector inside TimeframeControls, shared across the financial reporting surfaces.

TimeframeWeekFlatContent

Flat list of selectable week items for the TimeframeControls week selector. Shared building block of the reporting timeframe controls.

import { TimeframeWeekFlatContent } from '@tetherto/mdk-react-devkit/domain'

Takes visibleWeeks, the week list weeksOfMonth(year, month, timezone) returns. month is 0-based (0 is January).

TimeframeWeekTreeContent

Hierarchical year to month to week tree for the TimeframeControls week selector. Shared building block of the reporting timeframe controls.

import { TimeframeWeekTreeContent } from '@tetherto/mdk-react-devkit/domain'

Takes timezone, selectedYear and selectedMonth (0-based), and builds the weeks itself. It lists the last three years, with the selected year and month expanded.

Compose a week selector

Both building blocks render SelectItem options, so they go inside the devkit's Select > SelectContent, as they do in TimeframeControls. With the flat list, the selected value is the week's start time in milliseconds, as a string:

import { useState } from 'react'
import { Select, SelectContent, SelectTrigger, SelectValue } from '@tetherto/mdk-react-devkit/primitives'
import { TimeframeWeekFlatContent, weeksOfMonth } from '@tetherto/mdk-react-devkit/domain'

type WeekPickerProps = { year: number; month: number; timezone: string }

export const WeekPicker = ({ year, month, timezone }: WeekPickerProps) => {
  const [weekStart, setWeekStart] = useState<string>()

  return (
    <Select value={weekStart} onValueChange={setWeekStart}>
      <SelectTrigger aria-label="Week">
        <SelectValue placeholder="Week" />
      </SelectTrigger>
      <SelectContent>
        <TimeframeWeekFlatContent visibleWeeks={weeksOfMonth(year, month, timezone)} />
      </SelectContent>
    </Select>
  )
}

For the tree, swap the content. Its option values are year|month|start tokens; decode one with parseWeekTreeToken, also exported from /domain, which returns { year, month, startTs }:

<SelectContent>
  <TimeframeWeekTreeContent timezone={timezone} selectedYear={year} selectedMonth={month} />
</SelectContent>