Compose reporting layouts

Overview

This page shows how to build a week selector from the timeframe building blocks in @tetherto/mdk-react-devkit/domain.

The building blocks 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.

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.

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>

Next steps

• Filter components: the full TimeframeControls picker and every week-content prop