Skip to content
Sign in

flagon-io/g1t

public
0

g1t/apps/sudo/app/components/billing.tsx

929 lines42,113 bytesCodeBlame
1/**
2 * The billing sections shared by a workspace's page and an enterprise's:
3 * confirmations, terms, plan, pools and caps, credit, bank transfers, the
4 * Stripe billing link, the ledger and the audit log. Plain forms; sudo ships no JavaScript.
5 */
6import { CreditCard, Gift, Landmark, RotateCcw, ScrollText, UserRound } from "lucide-react";
7import type { ReactNode } from "react";
8import { Link } from "react-router";
9
10import type { AdminAction, AdminOwner, Allowances, BillingLink, CreditGrant, Credits, LedgerEntry, Terms } from "@g1t/contracts";
11
12import { Avatar, Badge, Button, EmptyState, Field, Input, Notice, Section, Select, Textarea, When } from "~/components/ui";
13import { CREDIT_KINDS, CREDIT_PRESETS, EXPIRIES, kindLabel } from "~/lib/credits";
14import { DISCOUNT_PRESETS, fullDiscount, percentOff, termsLabel } from "~/lib/terms";
15import { actionLabel } from "~/lib/ledgers";
16import { dollarsField, usd } from "~/lib/money";
17import { givenParts } from "~/lib/pricing";
18import type { Review, SectionError } from "~/lib/review";
19
20export function Hidden({ values }: { values: Record<string, string> }) {
21 return (
22 <>
23 {Object.entries(values).map(([name, value]) => (
24 <input key={name} type="hidden" name={name} value={value} />
25 ))}
26 </>
27 );
28}
29
30export function Figure({ label, value, hint }: { label: string; value: string; hint?: ReactNode }) {
31 return (
32 <div className="rounded-lg border border-line bg-surface px-4 py-3">
33 <p className="text-xs text-muted">{label}</p>
34 <p className="tabular mt-1 text-lg font-semibold tracking-tight">{value}</p>
35 {hint && <p className="mt-0.5 text-xs text-faint">{hint}</p>}
36 </div>
37 );
38}
39
40/** Owners' usernames, each with their email beneath (and on hover). */
41export function Owners({ owners, compact = false }: { owners: AdminOwner[]; compact?: boolean }) {
42 if (owners.length === 0) return <span className="text-faint">No owner</span>;
43 if (compact) {
44 return (
45 <span className="flex flex-col gap-0.5">
46 {owners.map((owner) => (
47 <span key={owner.username} title={owner.email ?? "No email"} className="min-w-0 truncate">
48 <span className="font-mono text-fg-soft">{owner.username}</span>
49 {owner.email && <span className="block truncate text-xs text-faint">{owner.email}</span>}
50 </span>
51 ))}
52 </span>
53 );
54 }
55 return (
56 <ul className="flex flex-wrap gap-2">
57 {owners.map((owner) => (
58 <li key={owner.username} title={owner.email ?? "No email"} className="inline-flex items-center gap-1.5 rounded-md border border-line bg-bg px-2 py-1 text-xs">
59 <Avatar name={owner.username} size={14} square={false} />
60 <span className="font-mono">{owner.username}</span>
61 {owner.email && <span className="text-faint">{owner.email}</span>}
62 </li>
63 ))}
64 </ul>
65 );
66}
67
68// --- Confirmation ------------------------------------------------------------
69
70function describeTerms(terms: Terms): [string, string][] {
71 return [
72 ["Terms", termsLabel(terms)],
73 ["Discount", `${percentOff(terms)}%`],
74 [
75 "Limit",
76 fullDiscount(terms)
77 ? terms.ceilingMicros == null
78 ? "The default monthly budget, at cost"
79 : `${usd(terms.ceilingMicros)} a month, at cost`
80 : terms.ceilingMicros == null
81 ? "By trust"
82 : usd(terms.ceilingMicros),
83 ],
84 ["Until", terms.until ? terms.until.slice(0, 10) : "No end"],
85 ["Note", terms.note || "—"],
86 ];
87}
88
89/** Where a confirmed change lands, when its result is shown in place. */
90const RESULT_ANCHOR: Partial<Record<Review["intent"], string>> = { "billing-link": "billing-link", invoice: "invoices" };
91
92export function ReviewPanel({ review, pathname }: { review: Review; pathname: string }) {
93 let title: string;
94 let body: ReactNode;
95 let danger = false;
96 let confirm = "Confirm";
97 if (review.intent === "terms") {
98 const before = describeTerms(review.before);
99 const after = describeTerms(review.after);
100 title = "Confirm the new terms";
101 danger = fullDiscount(review.after);
102 body = (
103 <>
104 <div className="overflow-x-auto">
105 <table className="w-full text-sm">
106 <thead>
107 <tr className="text-left text-xs text-muted">
108 <th className="py-1.5 pr-4 font-medium" />
109 <th className="py-1.5 pr-4 font-medium">Now</th>
110 <th className="py-1.5 font-medium">After</th>
111 </tr>
112 </thead>
113 <tbody>
114 {after.map(([label, value], index) => (
115 <tr key={label} className="border-t border-line align-top">
116 <td className="py-1.5 pr-4 text-muted">{label}</td>
117 <td className="py-1.5 pr-4 break-words text-faint">{before[index][1]}</td>
118 <td className={`py-1.5 break-words ${value !== before[index][1] ? "font-medium text-fg" : "text-muted"}`}>{value}</td>
119 </tr>
120 ))}
121 </tbody>
122 </table>
123 </div>
124 {fullDiscount(review.after) && (
125 <p className="mt-3 text-sm text-warn">
126 A 100% discount: nothing will be charged{review.after.until ? ` until ${review.after.until.slice(0, 10)}` : ""}. The workspace's
127 statement still shows its usage at price, with the discount beside it.
128 </p>
129 )}
130 </>
131 );
132 } else if (review.intent === "attach") {
133 title = `Bill ${review.workspace} to ${review.targetName}?`;
134 body = (
135 <p className="text-sm text-muted">
136 From now on <span className="font-mono text-fg">{review.workspace}</span>'s usage is billed to{" "}
137 <span className="text-fg">{review.targetName}</span> and counts against its limit and terms, not its own.
138 </p>
139 );
140 } else if (review.intent === "detach") {
141 title = `Move ${review.workspace} off ${review.from}?`;
142 danger = true;
143 body = (
144 <p className="text-sm text-muted">
145 <span className="font-mono text-fg">{review.workspace}</span> goes back to paying for itself, on its own terms and the limit
146 its trust gives it. It may stop at once if its own limit is lower than what it owes.
147 </p>
148 );
149 } else if (review.intent === "billing-email") {
150 title = `Send ${review.name}'s invoices to ${review.after}?`;
151 body = (
152 <p className="text-sm text-muted">
153 Stripe emails its invoices to <span className="font-mono text-fg">{review.after}</span>
154 {review.before ? (
155 <>
156 {" "}
157 instead of <span className="font-mono">{review.before}</span>
158 </>
159 ) : null}
160 , from the next invoice on.{!review.before && " This also sets the enterprise up as a customer on Stripe."}
161 </p>
162 );
163 } else if (review.intent === "invoice") {
164 title = `Invoice ${review.name} now?`;
165 confirm = "Send the invoice";
166 body = (
167 <ul className="list-disc space-y-1 pl-5 text-sm text-muted">
168 <li>Makes one Stripe invoice, with a line for each of its {review.workspaces} workspace{review.workspaces === 1 ? "" : "s"} for what it owes now.</li>
169 <li>Net 30: due in 30 days.</li>
170 <li>
171 Stripe emails it to <span className="font-mono text-fg">{review.email ?? "the invoice email (none set yet)"}</span>, with a link to
172 pay on Stripe's page.
173 </li>
174 </ul>
175 );
176 } else {
177 title = `Make a Stripe billing link for ${review.workspace}?`;
178 confirm = "Make the link";
179 body = (
180 <p className="text-sm text-muted">
181 Opens a one-time session on Stripe's billing page for <span className="font-mono text-fg">{review.workspace}</span>'s
182 customer, where they update their card and see their invoices. Anyone with the link can use it until it expires, so send it
183 only to the workspace's owner. Making it is recorded with your email.
184 </p>
185 );
186 }
187 return (
188 <section id="review" className={`scroll-mt-20 rounded-lg border p-4 sm:p-5 ${danger ? "border-warn/40 bg-warn/5" : "border-accent/40 bg-accent/5"}`}>
189 <h2 className="font-semibold tracking-tight">{title}</h2>
190 <div className="mt-3">{body}</div>
191 <form method="post" action={`${pathname}#${RESULT_ANCHOR[review.intent] ?? "top"}`} className="mt-4 flex flex-wrap items-center gap-2">
192 <Hidden values={review.fields} />
193 <input type="hidden" name="intent" value={review.intent} />
194 <input type="hidden" name="confirm" value="yes" />
195 <Button type="submit" variant={danger ? "danger" : "lavender"}>
196 {confirm}
197 </Button>
198 <Link to={pathname} className="px-2 text-sm text-muted hover:text-fg">
199 Cancel
200 </Link>
201 </form>
202 </section>
203 );
204}
205
206// --- Terms -------------------------------------------------------------------
207
208/**
209 * The account's terms: a discount (0, 25, 50, 100% or a custom percent),
210 * a limit, an end date and why. A 100% discount charges nothing; the
211 * workspace's statement still shows its usage at price. The custom percent
212 * shows only for Custom, by CSS alone (`.terms-form` in app.css).
213 */
214export function TermsForm({ terms, pathname, error }: { terms: Terms; pathname: string; error: SectionError }) {
215 const values = error?.values;
216 const current = percentOff(terms);
217 const preset = values?.preset ?? ((DISCOUNT_PRESETS as readonly number[]).includes(current) ? String(current) : "custom");
218 return (
219 <Section
220 id="terms"
221 title="Terms"
222 description={
223 terms.setBy ? (
224 <>
225 Set by <span className="font-mono">{terms.setBy}</span> on <When at={terms.setAt} />
226 {terms.note && <> · “{terms.note}”</>}
227 </>
228 ) : (
229 "Standard, as everyone starts."
230 )
231 }
232 >
233 <form method="post" action={`${pathname}#review`} className="terms-form space-y-4">
234 <input type="hidden" name="intent" value="terms" />
235 {error && <Notice tone="error">{error.error}</Notice>}
236 <fieldset>
237 <legend className="mb-1.5 text-sm font-medium text-muted">Discount</legend>
238 <div className="flex flex-wrap overflow-hidden rounded-md border border-line bg-bg">
239 {DISCOUNT_PRESETS.map((percent) => (
240 <Segment key={percent} name="preset" value={String(percent)} checked={preset === String(percent)}>
241 {percent === 0 ? "None" : `${percent}%`}
242 </Segment>
243 ))}
244 <Segment name="preset" value="custom" checked={preset === "custom"}>
245 Custom
246 </Segment>
247 </div>
248 <p className="mt-1.5 text-xs text-faint">Off every usage charge. 100%: nothing is charged, and the statement shows usage at price with the discount beside it.</p>
249 </fieldset>
250 <div className="when-custom">
251 <Field label="Custom discount %" hint="A whole percent, 1 to 100.">
252 <Input name="discount" inputMode="numeric" pattern="\d{1,3}" placeholder="30" defaultValue={values?.discount ?? (preset === "custom" ? String(current) : "")} />
253 </Field>
254 </div>
255 <div className="grid gap-4 sm:grid-cols-2">
256 <Field label="Limit $" hint="Unpaid usage allowed; blank: trust decides. At 100%: g1t's monthly budget for it, at cost; blank: the default ($150).">
257 <Input name="ceiling" inputMode="decimal" placeholder="By trust" defaultValue={values?.ceiling ?? dollarsField(terms.ceilingMicros)} />
258 </Field>
259 <Field label="Until" hint="Blank: no end. UTC.">
260 <Input type="date" name="until" defaultValue={values?.until ?? (terms.until ? terms.until.slice(0, 10) : "")} />
261 </Field>
262 </div>
263 <Field label="Reason" hint="Required. Why, for whoever looks next; at 100%, shown as the reason for the discount.">
264 <Textarea name="note" rows={2} required maxLength={500} defaultValue={values?.note ?? ""} placeholder="e.g. g1t's own workspace" />
265 </Field>
266 <div className="flex justify-end">
267 <Button type="submit">Review terms</Button>
268 </div>
269 </form>
270 </Section>
271 );
272}
273
274// --- Plan, pools and caps -------------------------------------------------------
275
276/** What staff have set beyond the terms, one line each; defaults left out. */
277export function allowanceLines(allowances: Allowances | undefined, comped: boolean): string[] {
278 const lines: string[] = [];
279 if (comped) lines.push("The g1t plan, without its price (100% discount)");
280 else if (allowances?.plan) lines.push("The g1t plan, without its price");
281 if (!allowances) return lines;
282 if (allowances.ossRepoMicros != null) lines.push(`Open-source pool: ${usd(allowances.ossRepoMicros)} a month for each public repository`);
283 if (allowances.trialMicros != null) lines.push(`Trial: ${usd(allowances.trialMicros)}, outside the monthly pool`);
284 if (allowances.maxConcurrentAgents != null) {
285 lines.push(`${allowances.maxConcurrentAgents} agent${allowances.maxConcurrentAgents === 1 ? "" : "s"} at once`);
286 }
287 if (allowances.runCapMicros != null) lines.push(`Run cap: ${usd(allowances.runCapMicros)} a run`);
288 if (allowances.issueCapMicros != null) lines.push(`Issue cap: ${usd(allowances.issueCapMicros)} an issue`);
289 if (allowances.auditRetentionDays != null) lines.push(`Audit log: ${allowances.auditRetentionDays} days, in place of the plan's`);
290 if (allowances.hold) lines.push(`Held: ${allowances.hold}`);
291 return lines;
292}
293
294/**
295 * The g1t plan without its price, the account's share of g1t's pools, and
296 * staff's overrides of what owners set: agents at once, the run and issue
297 * caps, the days of audit log kept (such as for an organization that pays
298 * for longer), and a hold on new compute. Accounts on a 100% discount have the plan
299 * anyway.
300 */
301export function AllowancesForm({
302 allowances,
303 comped,
304 pathname,
305 error,
306}: {
307 allowances: Allowances | undefined;
308 comped: boolean;
309 pathname: string;
310 error: SectionError;
311}) {
312 const values = error?.values;
313 const current: Allowances = allowances ?? { plan: false, ossRepoMicros: null, trialMicros: null };
314 const lines = allowanceLines(allowances, comped);
315 return (
316 <Section
317 id="allowances"
318 title="Plan, pools and caps"
319 description={
320 comped
321 ? "A 100% discount: the g1t plan is on without its price whatever is set here. The pools and caps still apply."
322 : "The g1t plan without its price, this account's share of g1t's pools, and overrides of what owners set."
323 }
324 >
325 <div className="mb-4 rounded-md border border-line bg-bg px-3.5 py-2.5 text-sm">
326 <p className="text-xs text-faint">Set now</p>
327 {lines.length === 0 ? (
328 <p className="mt-0.5 text-muted">Nothing: the defaults.</p>
329 ) : (
330 <ul className="mt-1 space-y-0.5">
331 {lines.map((line) => (
332 <li key={line} className={line.startsWith("Held:") ? "text-danger" : "text-fg-soft"}>
333 {line}
334 </li>
335 ))}
336 </ul>
337 )}
338 </div>
339 <form method="post" action={`${pathname}#allowances`} className="space-y-4">
340 <input type="hidden" name="intent" value="allowances" />
341 {error && <Notice tone="error">{error.error}</Notice>}
342 <label className="flex cursor-pointer items-start gap-2.5 text-sm">
343 <input type="checkbox" name="plan" defaultChecked={values ? values.plan === "on" : current.plan} className="mt-0.5" />
344 <span>
345 <span className="block font-medium">The g1t plan, without its price</span>
346 <span className="block text-xs text-muted">
347 Its included usage, storage and caps, with no $20 a month. Usage past it is charged as usual.
348 </span>
349 </span>
350 </label>
351 <div className="grid gap-4 sm:grid-cols-2">
352 <Field label="Open-source share $" hint="Each public repository, a month. Blank: the default ($2).">
353 <Input name="oss" inputMode="decimal" placeholder="Default" defaultValue={values?.oss ?? dollarsField(current.ossRepoMicros)} />
354 </Field>
355 <Field label="Trial $" hint="Each workspace, outside the monthly pool. Blank: the default ($5).">
356 <Input name="trial" inputMode="decimal" placeholder="Default" defaultValue={values?.trial ?? dollarsField(current.trialMicros)} />
357 </Field>
358 <Field label="Agents at once" hint="Blank: the plan's (2 in the first month or on the trial, then 10).">
359 <Input
360 name="agents"
361 inputMode="numeric"
362 pattern="\d{1,3}"
363 placeholder="Default"
364 defaultValue={values?.agents ?? (current.maxConcurrentAgents != null ? String(current.maxConcurrentAgents) : "")}
365 />
366 </Field>
367 <Field label="Run cap $" hint="One run's spend, over the owners'. Blank: theirs, or $2.">
368 <Input name="runCap" inputMode="decimal" placeholder="Owners'" defaultValue={values?.runCap ?? dollarsField(current.runCapMicros)} />
369 </Field>
370 <Field label="Issue cap $" hint="One issue's agents in all, over the owners'. Blank: theirs, or $10.">
371 <Input name="issueCap" inputMode="decimal" placeholder="Owners'" defaultValue={values?.issueCap ?? dollarsField(current.issueCapMicros)} />
372 </Field>
373 <Field label="Audit log days" hint="Kept, in place of the plan's, longer or shorter, up to 400. Blank: the plan's (7 free, 90 on the plan).">
374 <Input
375 name="auditDays"
376 inputMode="numeric"
377 pattern="\d{1,3}"
378 placeholder="Plan's"
379 defaultValue={values?.auditDays ?? (current.auditRetentionDays != null ? String(current.auditRetentionDays) : "")}
380 />
381 </Field>
382 <Field label="Hold" hint="Pauses new compute and tells the owners why. Blank: no hold.">
383 <Input name="hold" maxLength={200} placeholder="No hold" defaultValue={values?.hold ?? current.hold ?? ""} />
384 </Field>
385 </div>
386 <Field label="Note" hint="Required. Why, for whoever looks next.">
387 <Textarea
388 name="note"
389 rows={2}
390 required
391 maxLength={500}
392 defaultValue={values?.note ?? ""}
393 placeholder="e.g. Open-source foundation, larger share through 2027"
394 />
395 </Field>
396 <div className="flex justify-end">
397 <Button type="submit">Save plan, pools and caps</Button>
398 </div>
399 </form>
400 </Section>
401 );
402}
403
404// --- Bank transfer ---------------------------------------------------------------
405
406/**
407 * Money that reached g1t outside Stripe's page, such as a bank transfer
408 * for a $1,000+ prepayment, entered as a payment.
409 */
410export function PaymentForm({ workspace, pathname, error }: { workspace: string; pathname: string; error: SectionError }) {
411 const values = error?.values;
412 return (
413 <Section
414 id="payment"
415 title="Record a bank transfer"
416 description="Money that reached g1t's bank without Stripe's page, such as a $1,000+ prepayment. It goes on the statement as a payment and counts toward the limit at once."
417 >
418 <form method="post" action={`${pathname}#payment`} className="space-y-4">
419 <input type="hidden" name="intent" value="payment" />
420 {error && <Notice tone="error">{error.error}</Notice>}
421 <div className="grid gap-4 sm:grid-cols-2">
422 <Field label="Amount $" hint="As it arrived, up to $100,000.">
423 <Input name="amount" inputMode="decimal" required placeholder="1,500.00" defaultValue={values?.amount ?? ""} />
424 </Field>
425 <Field label="Reference" hint="As the bank shows it. Each is recorded once.">
426 <Input name="reference" required maxLength={100} className="font-mono" defaultValue={values?.reference ?? ""} />
427 </Field>
428 </div>
429 <Field label="Note" hint="Required. Shown on the statement after “Paid by bank transfer”.">
430 <Textarea
431 name="note"
432 rows={2}
433 required
434 maxLength={500}
435 placeholder="e.g. Prepayment for October, invoice INV-0042"
436 defaultValue={values?.note ?? ""}
437 />
438 </Field>
439 <Field
440 label="Confirm"
441 hint={
442 <>
443 Type the workspace's slug (<span className="font-mono text-muted">{workspace}</span>) to record it.
444 </>
445 }
446 >
447 <Input name="confirmation" required placeholder={workspace} className="font-mono" />
448 </Field>
449 <div className="flex justify-end">
450 <Button type="submit" variant="lavender">
451 <Landmark size={14} />
452 Record the payment
453 </Button>
454 </div>
455 </form>
456 </Section>
457 );
458}
459
460// --- Credit -------------------------------------------------------------------
461
462/** A radio drawn as one button of a segmented row; still a plain radio without CSS. */
463function Segment({ name, value, checked, children }: { name: string; value: string; checked: boolean; children: ReactNode }) {
464 return (
465 <label className="flex-1 cursor-pointer border-r border-line px-3 py-1.5 text-center text-sm whitespace-nowrap text-muted transition-colors last:border-r-0 hover:bg-raised hover:text-fg has-checked:bg-accent has-checked:font-medium has-checked:text-bg has-focus-visible:outline-2 has-focus-visible:-outline-offset-2 has-focus-visible:outline-accent">
466 <input type="radio" name={name} value={value} defaultChecked={checked} className="sr-only" />
467 {children}
468 </label>
469 );
470}
471
472/**
473 * Credit for a workspace: a preset amount or a custom one, a kind, an
474 * expiry, and a note. Fields that belong to one choice (the custom amount,
475 * a refund's details, an expiry date) show only for it, by CSS alone
476 * (`.credit-form` in app.css); without `:has()` every field shows and the
477 * ones that do not apply are ignored. Over $100 the slug is typed out too.
478 */
479export function CreditForm({ workspaces, pathname, error }: { workspaces: string[]; pathname: string; error: SectionError }) {
480 const values = error?.values;
481 const single = workspaces.length === 1 ? workspaces[0] : null;
482 const preset = values?.preset ?? "25";
483 const kind = values?.kind ?? "promotional";
484 const expires = values?.expires ?? "none";
485 return (
486 <Section
487 id="credit"
488 title="Give credit"
489 description="Added to the balance at once and spent before anything paid in advance. The owners are emailed."
490 >
491 {workspaces.length === 0 ? (
492 <p className="text-sm text-muted">Add a workspace first: credit goes to a workspace.</p>
493 ) : (
494 <form method="post" action={`${pathname}#credit`} className="credit-form space-y-4">
495 <input type="hidden" name="intent" value="credit" />
496 {error && <Notice tone="error">{error.error}</Notice>}
497 {single ? (
498 <input type="hidden" name="workspace" value={single} />
499 ) : (
500 <Field label="Workspace">
501 <Select name="workspace" required defaultValue={values?.workspace ?? ""}>
502 <option value="" disabled>
503 Choose a workspace
504 </option>
505 {workspaces.map((slug) => (
506 <option key={slug} value={slug}>
507 {slug}
508 </option>
509 ))}
510 </Select>
511 </Field>
512 )}
513 <fieldset>
514 <legend className="mb-1.5 text-sm font-medium text-muted">Amount</legend>
515 <div className="flex flex-wrap overflow-hidden rounded-md border border-line bg-bg">
516 {CREDIT_PRESETS.map((dollars) => (
517 <Segment key={dollars} name="preset" value={String(dollars)} checked={preset === String(dollars)}>
518 ${dollars}
519 </Segment>
520 ))}
521 <Segment name="preset" value="custom" checked={preset === "custom"}>
522 Custom
523 </Segment>
524 </div>
525 </fieldset>
526 <div className="when-custom space-y-4">
527 <Field label="Custom amount $" hint="Up to $10,000 at a time.">
528 <Input name="amount" inputMode="decimal" placeholder="15.00" defaultValue={values?.amount ?? ""} />
529 </Field>
530 </div>
531 <fieldset>
532 <legend className="mb-1.5 text-sm font-medium text-muted">Kind</legend>
533 <div className="grid gap-2">
534 {CREDIT_KINDS.map((option) => (
535 <label
536 key={option.value}
537 className="flex cursor-pointer gap-2.5 rounded-md border border-line bg-bg px-3 py-2.5 transition-colors hover:border-line-strong has-checked:border-accent/60 has-checked:bg-accent/8"
538 >
539 <input type="radio" name="kind" value={option.value} defaultChecked={kind === option.value} className="mt-0.5" required />
540 <span>
541 <span className="block text-sm font-medium">{option.title}</span>
542 <span className="mt-0.5 block text-xs text-muted">{option.text}</span>
543 </span>
544 </label>
545 ))}
546 </div>
547 </fieldset>
548 <div className="when-refund">
549 <div className="grid gap-4 sm:grid-cols-[minmax(0,2fr)_minmax(0,1fr)]">
550 <Field label="Refund for" hint="Refunds only. On the statement and in the email.">
551 <Input name="refundFor" maxLength={200} placeholder="the failed runs on Oct 2" defaultValue={values?.refundFor ?? ""} />
552 </Field>
553 <Field label="Day refunded" hint="Comes off what was paid that day. Blank: today.">
554 <Input type="date" name="refundDay" defaultValue={values?.refundDay ?? ""} />
555 </Field>
556 </div>
557 </div>
558 <fieldset className="when-not-refund">
559 <legend className="mb-1.5 text-sm font-medium text-muted">Expires</legend>
560 <div className="flex flex-wrap overflow-hidden rounded-md border border-line bg-bg">
561 {EXPIRIES.map((option) => (
562 <Segment key={option.value} name="expires" value={option.value} checked={expires === option.value}>
563 {option.label}
564 </Segment>
565 ))}
566 </div>
567 <p className="mt-1.5 text-xs text-faint">Unused credit stops counting then. A refund never expires.</p>
568 </fieldset>
569 <div className="when-date when-not-refund">
570 <Field label="Expires on" hint="At the end of the day, UTC.">
571 <Input type="date" name="expiresOn" defaultValue={values?.expiresOn ?? ""} />
572 </Field>
573 </div>
574 <Field label="Note" hint="Required. On the workspace's statement and in the owners' email.">
575 <Textarea name="note" rows={2} required maxLength={500} placeholder="e.g. Welcome to g1t" defaultValue={values?.note ?? ""} />
576 </Field>
577 <div className="when-custom">
578 <Field
579 label="Confirm"
580 hint={
581 <>
582 Over $100 only: type the workspace's slug{single && <> (<span className="font-mono text-muted">{single}</span>)</>}.
583 </>
584 }
585 >
586 <Input name="confirmation" placeholder={single ?? "workspace-slug"} className="font-mono" />
587 </Field>
588 </div>
589 <div className="flex justify-end">
590 <Button type="submit" variant="lavender">
591 <Gift size={14} />
592 Give credit
593 </Button>
594 </div>
595 </form>
596 )}
597 </Section>
598 );
599}
600
601const GRANT_STATE: Record<CreditGrant["state"], { label: string; tone: "mint" | "plain" | "warn" | "danger" }> = {
602 open: { label: "Open", tone: "mint" },
603 used: { label: "Used", tone: "plain" },
604 expired: { label: "Expired", tone: "warn" },
605 revoked: { label: "Revoked", tone: "danger" },
606};
607
608/**
609 * Credits g1t gave, newest first: amount, kind, note, who, when, used,
610 * left and expiry, and on an open one a form to take back what is left.
611 */
612export function CreditList({
613 grants,
614 pathname,
615 error,
616 showWorkspace = false,
617}: {
618 grants: CreditGrant[];
619 pathname: string;
620 error?: SectionError;
621 showWorkspace?: boolean;
622}) {
623 if (grants.length === 0) return <EmptyState title="No credits given">Credit given from sudo shows here, with what is left of it.</EmptyState>;
624 return (
625 <ul className="-my-1 divide-y divide-line">
626 {grants.map((grant) => {
627 const state = GRANT_STATE[grant.state];
628 const failed = error && error.values?.id === grant.id ? error.error : null;
629 return (
630 <li key={grant.id} id={`grant-${grant.id}`} className="scroll-mt-20 py-3">
631 <div className="flex flex-wrap items-center gap-x-2 gap-y-1">
632 <span className="tabular font-semibold">{usd(grant.amountMicros, { cents: true })}</span>
633 <Badge tone="lavender">{kindLabel(grant.kind)}</Badge>
634 <Badge tone={state.tone}>{state.label}</Badge>
635 {showWorkspace && (
636 <Link to={`/workspaces/${encodeURIComponent(grant.workspace)}#credits`} className="font-mono text-xs text-accent hover:underline">
637 {grant.workspace}
638 </Link>
639 )}
640 </div>
641 <p className="tabular mt-1 text-sm text-fg-soft">
642 Used {usd(grant.usedMicros, { cents: true })} · left {usd(grant.leftMicros, { cents: true })}
643 {grant.expiresAt ? (
644 <>
645 {" "}
646 · {grant.state === "expired" ? "expired" : "expires"} <When at={grant.expiresAt} />
647 </>
648 ) : grant.kind === "refund" ? (
649 " · never expires"
650 ) : (
651 " · no expiry"
652 )}
653 </p>
654 <p className="mt-0.5 text-sm break-words">
655 {grant.kind === "refund" && grant.refundFor && <span className="text-muted">For {grant.refundFor}{grant.refundDay ? ` (${grant.refundDay})` : ""}: </span>}
656 {grant.note}
657 </p>
658 <p className="mt-0.5 flex flex-wrap items-center gap-x-1 font-mono text-xs text-faint">
659 <UserRound size={11} />
660 {grant.createdBy} · <When at={grant.createdAt} time />
661 </p>
662 {grant.closedAt && grant.state === "revoked" && (
663 <p className="mt-1 text-xs text-muted">
664 {usd(grant.closedMicros ?? 0, { cents: true })} taken back by {grant.closedBy} on <When at={grant.closedAt} />
665 {grant.closedNote ? `: “${grant.closedNote}”` : ""}
666 </p>
667 )}
668 {grant.closedAt && grant.state === "expired" && (grant.closedMicros ?? 0) > 0 && (
669 <p className="mt-1 text-xs text-muted">{usd(grant.closedMicros ?? 0, { cents: true })} unused when it expired.</p>
670 )}
671 {grant.state === "open" && (
672 <details className="mt-2" open={failed != null}>
673 <summary className="cursor-pointer text-xs text-danger hover:underline">Revoke unused</summary>
674 <form method="post" action={`${pathname}#grant-${grant.id}`} className="mt-2 flex flex-col gap-2 sm:flex-row sm:items-end">
675 <input type="hidden" name="intent" value="revoke-credit" />
676 <input type="hidden" name="id" value={grant.id} />
677 {showWorkspace && <input type="hidden" name="workspace" value={grant.workspace} />}
678 <Field label="Why" hint={`Takes ${usd(grant.leftMicros, { cents: true })} off the balance. Kept in the audit log.`} className="flex-1">
679 <Input name="reason" required maxLength={500} placeholder="e.g. Given to the wrong workspace" defaultValue={failed ? (error?.values?.reason ?? "") : ""} />
680 </Field>
681 <Button type="submit" variant="danger" className="shrink-0">
682 Revoke {usd(grant.leftMicros, { cents: true })}
683 </Button>
684 </form>
685 {failed && (
686 <div className="mt-2">
687 <Notice tone="error">{failed}</Notice>
688 </div>
689 )}
690 </details>
691 )}
692 </li>
693 );
694 })}
695 </ul>
696 );
697}
698
699/** A workspace's credits from g1t: what is left to spend, and each grant. */
700export function CreditsSection({
701 credits,
702 unavailable,
703 pathname,
704 error,
705}: {
706 credits: Credits | null;
707 unavailable: string | null;
708 pathname: string;
709 error: SectionError;
710}) {
711 return (
712 <Section
713 id="credits"
714 title="Credits"
715 description={
716 credits
717 ? `${usd(credits.leftMicros, { cents: true })} left to spend. Spent before anything paid in advance, the soonest-expiring first.`
718 : "Credits from g1t, with what is left of each."
719 }
720 >
721 {unavailable ? <Notice tone="warn">Billing did not answer for credits: {unavailable}</Notice> : <CreditList grants={credits?.grants ?? []} pathname={pathname} error={error} />}
722 </Section>
723 );
724}
725
726// --- Reset (testing) -----------------------------------------------------------
727
728/**
729 * Wipes a test workspace's billing so it starts again as a new customer.
730 * Only while billing runs on Stripe's test key; billing refuses 100% discounts and
731 * enterprise workspaces. The workspace, its members and repositories stay.
732 */
733export function ResetBillingForm({ workspace, pathname, error }: { workspace: string; pathname: string; error: SectionError }) {
734 const values = error?.values;
735 return (
736 <Section
737 id="reset"
738 title="Reset billing (testing)"
739 description="Wipes this workspace's billing: its ledger and balance, plan, limits, trial, invoices, holds, signals and cost rows. The workspace, its members and its repositories stay. Only while billing is on Stripe's test key."
740 >
741 <form method="post" action={`${pathname}#reset`} className="space-y-4">
742 <input type="hidden" name="intent" value="reset" />
743 {error && <Notice tone="error">{error.error}</Notice>}
744 <Field label="Why" hint="Required. Kept in the audit log.">
745 <Textarea name="note" rows={2} required maxLength={500} placeholder="e.g. Test workspace, starting the customer walk-through again" defaultValue={values?.note ?? ""} />
746 </Field>
747 <Field
748 label="Confirm"
749 hint={
750 <>
751 Type the workspace's slug (<span className="font-mono text-muted">{workspace}</span>) to wipe its billing. It cannot be undone.
752 </>
753 }
754 >
755 <Input name="confirmation" required placeholder={workspace} className="font-mono" />
756 </Field>
757 <div className="flex justify-end">
758 <Button type="submit" variant="danger">
759 <RotateCcw size={14} />
760 Reset billing
761 </Button>
762 </div>
763 </form>
764 </Section>
765 );
766}
767
768// --- Stripe billing link -----------------------------------------------------
769
770/**
771 * Card details, invoices and receipts live on Stripe's own billing page.
772 * sudo never shows a card field: staff send the customer a link instead.
773 */
774export function BillingLinkSection({
775 link,
776 pathname,
777 error,
778}: {
779 link: BillingLink | null;
780 pathname: string;
781 error: SectionError;
782}) {
783 return (
784 <Section
785 id="billing-link"
786 title="Stripe billing page"
787 description="Where the customer updates their card and sees invoices. g1t never takes card numbers."
788 >
789 {error && (
790 <div className="mb-4">
791 <Notice tone="error">{error.error}</Notice>
792 </div>
793 )}
794 {link ? (
795 <div className="space-y-4">
796 <Notice tone="info">Send this to the customer. g1t never takes card numbers; they enter them on Stripe.</Notice>
797 <Field label="One-time link" hint={link.expiresNote}>
798 <Input readOnly value={link.portalUrl} className="font-mono text-xs" aria-label="One-time Stripe billing link" />
799 </Field>
800 {link.loginUrl && (
801 <Field label="Permanent sign-in page" hint={`The customer signs in with ${link.customerEmail ?? "the email Stripe has for them"}.`}>
802 <Input readOnly value={link.loginUrl} className="font-mono text-xs" aria-label="Stripe billing sign-in page" />
803 </Field>
804 )}
805 {!link.loginUrl && link.customerEmail && <p className="text-xs text-faint">Stripe has {link.customerEmail} for this customer.</p>}
806 </div>
807 ) : (
808 <form method="post" action={`${pathname}#review`} className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
809 <input type="hidden" name="intent" value="billing-link" />
810 <p className="text-sm text-muted">
811 Never take card details over the phone or by email. Make a link to Stripe's billing page and send it to the owner.
812 </p>
813 <Button type="submit" variant="quiet" className="shrink-0">
814 <CreditCard size={14} />
815 Make a link
816 </Button>
817 </form>
818 )}
819 </Section>
820 );
821}
822
823// --- Ledger and audit ---------------------------------------------------------
824
825const ENTRY_KIND: Record<string, string> = { top_up: "Top-up", usage: "Usage", credit: "Credit" };
826
827export function LedgerSection({
828 ledger,
829 showWorkspace = false,
830 description = "Recent lines of the statement, newest first.",
831}: {
832 ledger: LedgerEntry[];
833 showWorkspace?: boolean;
834 description?: ReactNode;
835}) {
836 return (
837 <Section title="Ledger" description={description}>
838 {ledger.length === 0 ? (
839 <EmptyState title="Nothing yet" />
840 ) : (
841 <div className="-mx-4 -my-4 overflow-x-auto sm:-mx-5 sm:-my-5">
842 <table className="w-full min-w-[36rem] text-sm">
843 <thead>
844 <tr className="border-b border-line text-left text-xs text-muted">
845 <th className="px-4 py-2 font-medium sm:pl-5">When</th>
846 <th className="px-4 py-2 font-medium">What</th>
847 <th className="px-4 py-2 text-right font-medium sm:pr-5">Amount</th>
848 </tr>
849 </thead>
850 <tbody>
851 {ledger.map((entry) => (
852 <tr key={entry.id} className="border-b border-line align-top last:border-0">
853 <td className="px-4 py-2.5 text-xs whitespace-nowrap text-muted sm:pl-5">
854 <When at={entry.createdAt} time />
855 </td>
856 <td className="px-4 py-2.5">
857 <div className="flex flex-wrap items-center gap-1.5">
858 <Badge tone={entry.creditKind ? "lavender" : entry.amountMicros > 0 ? "mint" : "plain"}>
859 {entry.creditKind ? `Credit · ${kindLabel(entry.creditKind)}` : (ENTRY_KIND[entry.kind] ?? entry.kind)}
860 </Badge>
861 {showWorkspace && entry.workspace && (
862 <Link to={`/workspaces/${encodeURIComponent(entry.workspace)}`} className="font-mono text-xs text-accent hover:underline">
863 {entry.workspace}
864 </Link>
865 )}
866 <span className="break-words">{entry.description}</span>
867 {givenParts(entry).map((part) => (
868 <Badge key={part.label} tone="lavender">
869 Given · {part.label} {usd(part.micros)}
870 </Badge>
871 ))}
872 </div>
873 <p className="mt-0.5 font-mono text-xs text-faint">
874 {[
875 entry.repo && (entry.number != null ? `${entry.repo}#${entry.number}` : entry.repo),
876 entry.task,
877 entry.model,
878 entry.billedTo === "workspace" ? "own provider" : null,
879 entry.createdBy && `by ${entry.createdBy}`,
880 ]
881 .filter(Boolean)
882 .join(" · ")}
883 </p>
884 </td>
885 <td className={`tabular px-4 py-2.5 text-right whitespace-nowrap sm:pr-5 ${entry.amountMicros > 0 ? "text-success" : "text-fg-soft"}`}>
886 {usd(entry.amountMicros, { signed: true })}
887 </td>
888 </tr>
889 ))}
890 </tbody>
891 </table>
892 </div>
893 )}
894 </Section>
895 );
896}
897
898
899
900export function AuditSection({ audit, description = "Every change made in sudo, and by whom." }: { audit: AdminAction[]; description?: ReactNode }) {
901 return (
902 <Section title="Audit log" description={description}>
903 {audit.length === 0 ? (
904 <p className="flex items-center gap-2 text-sm text-muted">
905 <ScrollText size={14} />
906 No changes yet.
907 </p>
908 ) : (
909 <ol className="space-y-3">
910 {audit.map((entry) => (
911 <li key={entry.id} className="border-l-2 border-accent/40 pl-3">
912 <p className="flex flex-wrap items-center gap-x-2 text-sm">
913 <span className="font-medium text-accent">{actionLabel(entry.action)}</span>
914 <span className="text-xs text-faint">
915 <When at={entry.createdAt} time />
916 </span>
917 </p>
918 {entry.detail && <p className="mt-0.5 text-sm break-words text-fg-soft">{entry.detail}</p>}
919 <p className="mt-0.5 flex items-center gap-1 font-mono text-xs text-faint">
920 <UserRound size={11} />
921 {entry.by}
922 </p>
923 </li>
924 ))}
925 </ol>
926 )}
927 </Section>
928 );
929}