apps/sudo/app/routes/costs-bill.tsx · flagon-io/g1t

1

import { type ReactNode } from "react";

2

3

import type { CostsReport, PriceProposal } from "@g1t/contracts";

4

5

import type { Route } from "./+types/costs-bill";

6

import { CostsHeader } from "~/components/costs-header";

7

import { Badge, Button, EmptyState, Field, Input, Notice, Section, When } from "~/components/ui";

8

import { basisLabel, billReadNote, countLabel, cycleHeadline, driftLabel, percentLabel, proposalOutcome, unitDollars, unpricedMeters, versionCells } from "~/lib/costs";

9

import { type CostsActionResult, costsAction, costsLoader } from "~/lib/costs-route.server";

10

import { dollarsField, usd } from "~/lib/money";

11

12

export const meta: Route.MetaFunction = () => [{ title: "Bill & pricing · sudo" }, { name: "robots", content: "noindex, nofollow" }];

13

14

export const loader = ({ request, context }: Route.LoaderArgs) => costsLoader(request, context);

15

export const action = ({ request, context }: Route.ActionArgs) => costsAction(request, context);

16

17

/**

18

* Cloudflare's bill as read, what does not add up against it, and the

19

* price book: proposals, versions, mappings and the guardrails on them.

20

*/

21

export default function CostsBill({ loaderData, actionData }: Route.ComponentProps) {

22

const { range, report, error, done } = loaderData;

23

const failed = actionData && "error" in actionData ? (actionData as CostsActionResult) : null;

24

const description =

25

"Cloudflare's bill as read, line by line, what does not add up against g1t's own counts and price book, and the prices themselves: proposals waiting for a decision, every version, the mappings and the guardrails.";

if (!report) {

return (

<Notice tone="warn">Billing did not answer for costs: {error}</Notice>

</div>

</main>

);

}

return (

<Section

className="mt-6"

id="drift"

title="Drift"

description="Over the last 7 days: counts g1t and Cloudflare disagree on past a mapping's threshold, a bill far from the price book's cost of the same usage, and leaks (cost nothing charges for, or a Cloudflare meter no one mapped)."

47

>

48

{report.drift.length === 0 ? (

49

<p className="text-sm text-muted">Nothing has drifted.</p>

) : (

<thead>

<th className="px-4 py-2 font-medium sm:px-5">Product</th>

56

57

58

<th className="px-4 py-2 text-right font-medium">Cloudflare</th>

59

<th className="px-4 py-2 text-right font-medium sm:pr-5">Delta</th>

</tr>

</thead>

<tbody>

{report.drift.map((d) => {

64

const money = d.kind !== "count";

return (

{d.title}

<span className="mt-0.5 block max-w-md text-xs text-faint">{d.detail.replace(`${d.title}: `, "")}</span>

70

</td>

71

72

<Badge tone={d.kind === "leak" ? "danger" : "warn"}>{driftLabel(d.kind)}</Badge>

73

</td>

74

<td className="tabular px-4 py-2.5 text-right">{money ? usd(d.ours) : countLabel(d.ours)}</td>

75

<td className="tabular px-4 py-2.5 text-right">{money ? usd(d.cloudflare) : countLabel(d.cloudflare)}</td>

76

<td className="tabular px-4 py-2.5 text-right sm:pr-5">{percentLabel(d.deltaPercent, { signed: true })}</td>

</tr>

);

})}

</tbody>

</table>

</div>

)}

</Section>

<Section

className="mt-6"

id="proposals"

title="Price proposals"

90

description={`What the keeper and the reconciler measured. Moves within ${report.settings.autoApplyPercent}% apply themselves${report.settings.autoApply ? "" : " (off now)"}; larger ones wait here. A fall applies at once; a rise after ${report.settings.noticeDays} days' notice, and a monthly meter's from the start of the next month.`}

91

>

92

{report.proposals.length === 0 ? (

93

<p className="text-sm text-muted">No proposals yet.</p>

94

) : (

95

96

{report.proposals.map((p) => (

))}

</ul>

)}

</Section>

<thead>

<th className="px-4 py-2 font-medium sm:px-5">Meter</th>

109

110

<th className="px-4 py-2 text-right font-medium">Price</th>

</tr>

</thead>

<tbody>

{report.versions.map((v) => {

117

const cells = versionCells(v);

return (

<span className="font-mono text-xs">{v.meter}</span> <span className="text-faint">v{v.version}</span>

122

{!v.appliedAt && (

123

124

<Badge tone="info">Coming</Badge>

125

</span>

126

)}

127

{cells.note && <span className="block text-xs text-faint">{cells.note}</span>}

128

</td>

129

<td className="tabular px-4 py-2.5 text-right">{cells.cost === "—" ? <span className="text-faint">—</span> : cells.cost}</td>

130

<td className="tabular px-4 py-2.5 text-right">{cells.price}</td>

</td>

{v.reason} · {v.createdBy}

</td>

</tr>

);

})}

</tbody>

</table>

</div>

</Section>

<Section

className="mt-6"

title="Cloudflare's lines"

148

description="Every meter Cloudflare billed or counted in the range, as it named it, and which of g1t's products it is a cost of. Not mapped means no one decided what pays for it."

149

>

150

{report.lines.length === 0 ? (

151

<EmptyState title="No lines yet">The bill is read once a day at 04:17 UTC, or now with “Run the analysis now”.</EmptyState>

) : (

<thead>

<th className="px-4 py-2 font-medium sm:px-5">Product / meter</th>

158

<th className="px-4 py-2 text-right font-medium">Quantity</th>

</tr>

</thead>

<tbody>

{report.lines.map((l) => (

{l.product} / {l.meter}

</span>

{l.rawName}

{l.source === "artifacts_events" ? " (Artifacts' own count)" : ""}

</span>

</td>

{countLabel(l.quantity)} <span className="text-xs text-faint">{l.unit}</span>

177

</td>

178

<td className="tabular px-4 py-2.5 text-right">{usd(l.costMicros)}</td>

179

<td className="px-4 py-2.5 sm:pr-5">{l.bucket ? <span className="text-fg-soft">{l.bucket}</span> : <Badge tone="danger">Not mapped</Badge>}</td>

</tr>

))}

</tbody>

</table>

</div>

)}

</Section>

<Section

className="mt-6"

id="mappings"

title="Mappings"

description="Which of g1t's products each Cloudflare meter is a cost of. The longest matching meter prefix wins; * is the rest of the product. A price meter is measured from it; an own meter is g1t's count to compare; scaling prices one of g1t's units at as many of Cloudflare's as it took."

>

</Field>

</Field>

</Field>

</Field>

</Field>

</Field>

</Field>

<input type="checkbox" name="scaleToOwn" className="accent-[var(--g1t-accent)]" /> Scale to g1t's count

221

</label>

222

223

<Button type="submit">Save mapping</Button>

Remove

</Button>

</div>

</div>

{failed?.section === "mapping" && (

230

231

<Notice tone="error">{failed.error}</Notice>

</div>

)}

</form>

</Section>

<input type="checkbox" name="autoApply" defaultChecked={report.settings.autoApply} className="accent-[var(--g1t-accent)]" /> On

</label>

</Field>

</Field>

</Field>

</Field>

</Field>

</Field>

</Field>

</Field>

<input type="checkbox" name="cardFee" defaultChecked={report.settings.cardFee ?? true} className="accent-[var(--g1t-accent)]" /> Its own line; never on invoiced billing or bank transfers

</label>

</Field>

{failed?.section === "settings" && (

273

274

<Notice tone="error">{failed.error}</Notice>

275

</div>

276

)}

277

<Button type="submit">Save guardrails</Button>

</div>

</form>

</Section>

</main>

);

}

function ProposalRow({ proposal: p, error }: { proposal: PriceProposal; error: string | null }) {

286

const rise = p.proposedCostMicros > p.currentCostMicros;

287

const outcome = proposalOutcome(p);

288

const statusTone = p.status === "open" ? "warn" : p.status === "rejected" || p.status === "superseded" ? "plain" : "mint";

return (

<span className="font-medium">{p.title}</span> <span className="font-mono text-xs text-faint">{p.meter}</span>

294

</div>

295

296

{p.suspect && <Badge tone="danger">Far off: look first</Badge>}

297

<Badge tone={statusTone}>{p.status}</Badge>

</div>

</div>

Cost {unitDollars(p.currentCostMicros)} → <span className={rise ? "text-warn" : "text-success"}>{unitDollars(p.proposedCostMicros)}</span> per {p.unit || "unit"}{" "}

302

<span className="text-faint">({percentLabel(p.changePercent, { signed: true })})</span>

303

</p>

304

<p className="mt-1 text-xs text-muted">{p.reason}</p>

305

306

From the {p.source}, <When at={p.createdAt} time />

307

{outcome ? ` · ${outcome}` : ""}

308

{p.effectiveAt && p.status !== "superseded" ? (

309

<>

310

{" "}

311

· in force from <When at={p.effectiveAt} time />

312

</>

313

) : null}

314

{p.note ? ` · “${p.note}”` : ""}

315

</p>

316

{p.status === "open" && (

Approve

</Button>

Reject

</Button>

</div>

</form>

)}

{error && (

<Notice tone="error">{error}</Notice>

</div>

)}

</li>

);

}

/**

* Cloudflare's current billing cycle, the way its Billable usage page shows

342

* it: each meter's use, what the cycle includes, what is past it and what

343

* that costs, with the total so far and the projection.

344

*/

345

function CycleSection({ report }: { report: CostsReport }) {

346

const cycle = report.cycle;

347

const read = report.billRead ? billReadNote(report.billRead) : null;

348

const unpriced = cycle ? unpricedMeters(cycle.meters) : [];

349

const headline = cycle ? cycleHeadline(cycle) : null;

return (

<Section

className="mt-5"

id="cycle"

title="This billing cycle"

355

description="Cloudflare's usage bill for the cycle so far, meter by meter. Each meter's included amount is the account's, once a cycle; the cost is Cloudflare's own where its lines carry one, else the list price past the included amount (per-million meters in whole millions), on the days the cycle's total passed it. Subscriptions are apart."

356

>

357

{!cycle || !headline ? (

358

<EmptyState title="No cycle read yet">The bill is read once a day at 04:17 UTC, or now with “Run the analysis now”.</EmptyState>

) : (

<>

<span className="font-medium text-fg">{headline.title}</span>

363

<span className="block text-muted">{headline.detail}.</span>

364

</p>

365

{unpriced.length > 0 && (

366

367

368

Used with no list price, so counted at $0 until Cloudflare puts a cost on it or a price is added (src/cycle.rs):{" "}

369

{unpriced.map((m) => `${m.product} / ${m.meter}`).join(", ")}.

</Notice>

</div>

)}

<thead>

<th className="px-4 py-2 font-medium sm:px-5">Meter</th>

378

379

<th className="px-4 py-2 text-right font-medium">Included</th>

380

<th className="px-4 py-2 text-right font-medium">Billable</th>

</tr>

</thead>

<tbody>

{cycle.meters.map((m) => (

{m.rawName}

<span className="block text-xs text-faint">{basisLabel(m.basis)}</span>

390

</td>

391

392

{countLabel(m.quantity)} <span className="text-xs text-faint">{m.unit}</span>

393

</td>

394

<td className="tabular px-4 py-2.5 text-right text-muted">{m.included == null ? "—" : countLabel(m.included)}</td>

395

<td className="tabular px-4 py-2.5 text-right">{countLabel(m.billableQuantity)}</td>

396

<td className="tabular px-4 py-2.5 text-right sm:pr-5">{usd(m.costMicros)}</td>

</tr>

))}

<tr>

Usage so far

</td>

<td className="tabular px-4 py-2.5 text-right font-medium sm:pr-5">{usd(cycle.usageMicros, { cents: true })}</td>

</tr>

</tbody>

</table>

</div>

</>

)}

{read && (

Last read <When at={report.billRead?.readAt ?? null} time />: {read.text}

</p>

)}

</Section>

);

}

function MappingsTable({ report }: { report: CostsReport }) {

return (

<thead>

<th className="px-4 py-2 font-medium sm:px-5">Cloudflare</th>

426

<th className="px-4 py-2 font-medium">g1t product</th>

427

<th className="px-4 py-2 font-medium">Price meter</th>

428

<th className="px-4 py-2 font-medium">Own meter</th>

429

<th className="px-4 py-2 text-right font-medium sm:pr-5">Drift at</th>

</tr>

</thead>

<tbody>

{report.mappings.map((m) => (

{m.product} / {m.meter}

438

</span>

439

{m.note && <span className="block text-xs text-faint">{m.note}</span>}

440

</td>

441

<td className="px-4 py-2 text-fg-soft">{m.bucket}</td>

442

<td className="px-4 py-2 font-mono text-xs text-muted">{m.priceMeter ?? "—"}</td>

443

444

{m.ownMeter ?? "—"}

445

{m.scaleToOwn && <span className="block font-sans text-faint">scaled</span>}

446

</td>

447

<td className="tabular px-4 py-2 text-right text-muted sm:pr-5">{m.driftPercent}%</td>

</tr>

))}

</tbody>

</table>

</div>

);

}