Financial summary report

// Multi-section dashboard fixture. Demonstrates a real-world report layout// that paginates cleanly: KPI grid + charts + a long transactions table// with a repeating column header.import {  Bar,  BarChart,  CartesianGrid,  Cell,  Line,  LineChart,  Pie,  PieChart,  Tooltip,  XAxis,  YAxis,} from "recharts";const PALETTE = ["#2563eb", "#10b981", "#f59e0b", "#8b5cf6", "#ef4444", "#06b6d4"];// 12 months of revenue + cost so we can show a stacked-feeling chart.const monthlyPnl = [  { m: "Jul", revenue: 21400, cost: 14600 },  { m: "Aug", revenue: 24800, cost: 16100 },  { m: "Sep", revenue: 27300, cost: 17400 },  { m: "Oct", revenue: 29900, cost: 18800 },  { m: "Nov", revenue: 32400, cost: 19500 },  { m: "Dec", revenue: 36700, cost: 21100 },  { m: "Jan", revenue: 28400, cost: 17800 },  { m: "Feb", revenue: 32100, cost: 19200 },  { m: "Mar", revenue: 29800, cost: 18700 },  { m: "Apr", revenue: 38200, cost: 22400 },  { m: "May", revenue: 45100, cost: 25100 },  { m: "Jun", revenue: 48200, cost: 26300 },];const topProducts = [  { name: "Indie license", sales: 18420 },  { name: "Pro license", sales: 14210 },  { name: "Onboarding", sales: 9180 },  { name: "Enterprise", sales: 7340 },  { name: "Add-ons", sales: 4120 },];const teamShare = [  { name: "Engineering", value: 42 },  { name: "Design", value: 18 },  { name: "Product", value: 14 },  { name: "Sales", value: 16 },  { name: "Support", value: 10 },];// 28 transactions so the table comfortably overflows onto a second page.const txns = Array.from({ length: 28 }, (_, i) => {  const customers = [    "Acme Corp",    "Globex",    "Initech",    "Soylent",    "Umbrella",    "Wayne Ent.",    "Stark Ind.",    "Hooli",    "Pied Piper",    "Wonka",  ];  const types = ["Subscription", "One-time", "Refund", "Upgrade"];  const c = customers[i % customers.length]!;  const t = types[i % types.length]!;  const amount = (Math.round(Math.sin(i * 1.7) * 480) + 720) * (t === "Refund" ? -1 : 1);  const day = (i % 28) + 1;  return {    id: `TXN-${String(2400 + i).padStart(5, "0")}`,    date: `2026-06-${String(day).padStart(2, "0")}`,    customer: c,    type: t,    amount,  };});function Card({  title,  subtitle,  children,}: {  title: string;  subtitle?: string;  children: React.ReactNode;}) {  return (    <div      className="rounded-md border border-gray-200 bg-white p-4"      style={{ breakInside: "avoid" }}    >      <div className="mb-3">        <div className="text-xs font-medium uppercase tracking-wide text-gray-500">{title}</div>        {subtitle && <div className="text-sm text-gray-900">{subtitle}</div>}      </div>      {children}    </div>  );}const tick = { fill: "#6b7280", fontSize: 11 };const grid = { stroke: "#e5e7eb" };export function DashboardFixture() {  return (    <article className="flex flex-col gap-6 p-8 text-gray-900">      <header className="flex items-end justify-between border-b border-gray-200 pb-4">        <div>          <div className="text-xs font-medium uppercase tracking-wide text-gray-500">            Operations dashboard          </div>          <h1 className="mt-1 text-2xl font-semibold">June 2026 — Monthly review</h1>          <p className="mt-1 text-sm text-gray-500">            Prepared for the leadership team · Confidential          </p>        </div>        <div className="text-right text-xs text-gray-500">          Period          <div className="text-sm font-medium text-gray-900">Jun 1 — Jun 30, 2026</div>        </div>      </header>      {/* KPI grid */}      <div className="grid grid-cols-4 gap-4">        {[          { label: "MRR", value: "$48.2k", delta: "+12.4%", color: "text-emerald-600" },          { label: "Net new ARR", value: "$8.1k", delta: "+22.1%", color: "text-emerald-600" },          { label: "Churn rate", value: "1.4%", delta: "−0.3pt", color: "text-emerald-600" },          { label: "NPS", value: "62", delta: "+4", color: "text-emerald-600" },        ].map((k) => (          <div            key={k.label}            className="rounded-md border border-gray-200 bg-white p-4"            style={{ breakInside: "avoid" }}          >            <div className="text-xs font-medium uppercase tracking-wide text-gray-500">              {k.label}            </div>            <div className="mt-1 text-2xl font-semibold tracking-tight">{k.value}</div>            <div className={`mt-1 text-xs font-medium ${k.color}`}>{k.delta} MoM</div>          </div>        ))}      </div>      {/* P&L line */}      <Card title="Revenue vs cost" subtitle="Last 12 months">        <LineChart width={654} height={220} data={monthlyPnl}>          <CartesianGrid strokeDasharray="3 3" {...grid} />          <XAxis dataKey="m" tick={tick} stroke="#9ca3af" />          <YAxis tick={tick} stroke="#9ca3af" tickFormatter={(v) => `$${v / 1000}k`} />          <Tooltip />          <Line            type="monotone"            dataKey="revenue"            stroke={PALETTE[0]}            strokeWidth={2}            dot={{ r: 2 }}            name="Revenue"            isAnimationActive={false}          />          <Line            type="monotone"            dataKey="cost"            stroke={PALETTE[2]}            strokeWidth={2}            dot={{ r: 2 }}            name="Cost"            isAnimationActive={false}          />        </LineChart>        <div className="mt-2 flex gap-4 text-xs text-gray-600">          <span className="inline-flex items-center gap-2">            <span              className="inline-block size-2 rounded-full"              style={{ backgroundColor: PALETTE[0] }}            />            Revenue          </span>          <span className="inline-flex items-center gap-2">            <span              className="inline-block size-2 rounded-full"              style={{ backgroundColor: PALETTE[2] }}            />            Cost          </span>        </div>      </Card>      {/* Two-column: top products + team share */}      <div className="grid grid-cols-2 gap-4">        <Card title="Top products" subtitle="By gross sales, USD">          <BarChart width={304} height={200} data={topProducts} layout="vertical">            <CartesianGrid strokeDasharray="3 3" {...grid} />            <XAxis              type="number"              tick={tick}              stroke="#9ca3af"              tickFormatter={(v) => `$${v / 1000}k`}            />            <YAxis dataKey="name" type="category" tick={tick} stroke="#9ca3af" width={88} />            <Tooltip />            <Bar              dataKey="sales"              fill={PALETTE[1]}              radius={[0, 4, 4, 0]}              isAnimationActive={false}            />          </BarChart>        </Card>        <Card title="Spend by team" subtitle="% of total OpEx">          <div className="flex items-center gap-4">            <PieChart width={180} height={200}>              <Pie                data={teamShare}                dataKey="value"                nameKey="name"                outerRadius={80}                innerRadius={40}                paddingAngle={2}                isAnimationActive={false}              >                {teamShare.map((s, i) => (                  <Cell key={s.name} fill={PALETTE[i % PALETTE.length]} />                ))}              </Pie>            </PieChart>            <ul className="flex-1 space-y-1.5 text-xs">              {teamShare.map((s, i) => (                <li key={s.name} className="flex items-center justify-between gap-3">                  <span className="inline-flex items-center gap-2 text-gray-700 whitespace-nowrap">                    <span                      className="inline-block size-2 rounded-full"                      style={{ backgroundColor: PALETTE[i % PALETTE.length] }}                    />                    {s.name}                  </span>                  <span className="tabular-nums text-gray-500 whitespace-nowrap">{s.value}%</span>                </li>              ))}            </ul>          </div>        </Card>      </div>      {/* Long table — designed to paginate. We deliberately do NOT wrap          the table in a bordered card: that would create a single tall          rect primitive that can't split across page boundaries, leaving          a blank page before the table. The table's own row-level          borders provide enough visual structure. */}      <section>        <div className="mb-3">          <div className="text-xs font-medium uppercase tracking-wide text-gray-500">            Recent transactions          </div>          <div className="text-sm text-gray-900">Last 28 ledger entries</div>        </div>        <table className="w-full text-sm">          <thead data-print-repeat>            <tr className="border-b border-gray-200 text-xs uppercase tracking-wide text-gray-500">              <th className="py-2 text-left font-medium">ID</th>              <th className="py-2 text-left font-medium">Date</th>              <th className="py-2 text-left font-medium">Customer</th>              <th className="py-2 text-left font-medium">Type</th>              <th className="py-2 text-right font-medium">Amount</th>            </tr>          </thead>          <tbody>            {txns.map((t) => (              <tr key={t.id} className="border-b border-gray-100 last:border-b-0">                <td className="py-2 font-mono text-xs text-gray-500">{t.id}</td>                <td className="py-2 text-gray-700">{t.date}</td>                <td className="py-2 text-gray-900">{t.customer}</td>                <td className="py-2 text-gray-700">{t.type}</td>                <td                  className={`py-2 text-right tabular-nums ${                    t.amount < 0 ? "text-red-600" : "text-gray-900"                  }`}                >                  {t.amount < 0 ? "−" : ""}${Math.abs(t.amount).toLocaleString()}                </td>              </tr>            ))}          </tbody>        </table>      </section>      <section className="mt-2 rounded-lg border border-gray-200 bg-white p-4">        <h3 className="text-sm font-semibold text-gray-900">After-table summary</h3>        <p className="mt-2 text-xs leading-5 text-gray-600">          This block sits AFTER the long table. In v0.1 the repeat-band reserve continued past the          table's scope, leaving a phantom 28-pixel-tall gap at the top of every page that contained          this paragraph (or pushed it onto a new page entirely). v0.2 ties the reservation to the          parent <code>&lt;table&gt;</code>'s bottom, so this section can sit flush against the          table on whichever page the table happened to end on.        </p>      </section>      <p className="mt-2 text-xs text-gray-500">        Generated by react-print-pdf. Data shown is illustrative; figures do not reflect any real        company.      </p>    </article>  );}