Usage forecastPro

• Actual vs projected with confidence band
• Budget crossing marker
• Alert thresholds

• Usage-billed products: cloud, AI tokens, API calls.

• Flat-priced plans.

Import it from @/components/blocks/usage-forecast after installing. It ships with sample data, so it renders straight away; swap in your own data when you're ready.

import { UsageForecast } from "@/components/blocks/usage-forecast";

export default function Page() {
  return (
    <main className="mx-auto max-w-6xl p-6">
      <UsageForecast />
    </main>
  );
}

• The chart has role="img" with a text summary of the projection.
• Threshold checkboxes are labelled with their amounts.

• Projection and band fade in after the actual line.

• Thresholds stack under the chart on phones.

• Sample data is plain arrays at the top of the file. Replace them with your API data and keep the shapes.
• The projection is a simple linear fit computed once per render.

• Replace the linear projection with your own model if you have one.