Usage report email

import * as React from "react";
import { Bars, Btn, Eyebrow, H1, H2, KV, P, Shell, Stats, nameOf, type TemplateProps } from "../components";

export type UsageReportProps = TemplateProps & {
  month?: string;
  workspace?: string;
  dashboardUrl?: string;
};

export default function UsageReport({
  style,
  brand,
  month = "September 2026",
  workspace = "Northbeam",
  dashboardUrl = "https://fieldnote.app/usage",
}: UsageReportProps) {
  return (
    <Shell style={style} brand={brand} label="Usage report" preview={`${workspace} transcribed 214 hours in ${month} — 18% more than August.`}>
      <Eyebrow>{month} · {workspace}</Eyebrow>
      <H1>Your monthly usage report</H1>
      <P>A summary of how your workspace used {nameOf(brand)} last month.</P>
      <Stats