| 556 | 556 | | } |
| 557 | 557 | | |
| 558 | 558 | | /** |
| 559 | | − | * Your spend this month in the top bar: what agents did for you against |
| 560 | | − | * your budget, or, for owners and billing managers who switch it, what the |
| 561 | | − | * workspace was charged against its spend limit. A click opens where it |
| 562 | | − | * went. Read after the page draws, so it adds nothing to the page's time. |
| 559 | + | * Your spend this month in the top bar: what agents did for you, at price, |
| 560 | + | * against your budget, or, for owners and billing managers who switch it, |
| 561 | + | * everything the workspace used at price, with what it was charged against |
| 562 | + | * its spend limit underneath. Both tabs count the same way, at price, so |
| 563 | + | * the numbers add up across them. A click opens where it went. Read after |
| 564 | + | * the page draws, so it adds nothing to the page's time. |
| 563 | 565 | | */ |
| 564 | 566 | | export function SpendPill({ slug, mayWorkspace }: { slug: string; mayWorkspace: boolean }) { |
| 565 | 567 | | const pill = useFetcher<PillData>({ key: `spend-pill:${slug}` }); |
| ⋯ |
| 585 | 587 | | const data = pill.data; |
| 586 | 588 | | const ws = scope === "workspace" ? data?.workspace : null; |
| 587 | 589 | | const spent = ws ? ws.spentMicros : (data?.me?.spentMicros ?? null); |
| 590 | + | // The limit governs what is charged, so the meter measures that. |
| 591 | + | const against = ws ? ws.chargedMicros : (data?.me?.spentMicros ?? null); |
| 588 | 592 | | const budget = ws ? ws.limitMicros : (data?.me?.budgetMicros ?? null); |
| 589 | | − | const share = spent != null ? shareOfBudget(spent, budget) : null; |
| 593 | + | const share = against != null ? shareOfBudget(against, budget) : null; |
| 590 | 594 | | const label = spent == null ? (data ? "Spend" : "") : money(spent); |
| 591 | 595 | | return ( |
| 592 | 596 | | <Popover open={open} onOpenChange={setOpen}> |
| ⋯ |
| 601 | 605 | | {data ? <span>{label}</span> : <Skeleton className="h-3 w-10" />} |
| 602 | 606 | | {share != null && ( |
| 603 | 607 | | <span className="hidden w-9 lg:block"> |
| 604 | | − | <Meter spent={spent!} cap={budget} label="Spent of the budget" size="sm" /> |
| 608 | + | <Meter spent={against!} cap={budget} label={ws ? "Charged of the spend limit" : "Spent of your budget"} size="sm" /> |
| 605 | 609 | | </span> |
| 606 | 610 | | )} |
| 607 | 611 | | </Button> |
| ⋯ |
| 661 | 665 | | </div> |
| 662 | 666 | | ) : ws ? ( |
| 663 | 667 | | <div className="p-4"> |
| 664 | | − | <p className="text-xs text-muted">The workspace · {month}, charged</p> |
| 665 | | − | <p className="mt-1 text-xl font-semibold tabular-nums"> |
| 666 | | − | {ws.spentMicros != null ? money(ws.spentMicros) : "—"} |
| 667 | | − | {ws.limitMicros != null && <span className="ml-1.5 text-sm font-normal text-muted">of {money(ws.limitMicros)}</span>} |
| 668 | | − | </p> |
| 669 | | − | {ws.spentMicros != null && ws.limitMicros != null && <Meter spent={ws.spentMicros} cap={ws.limitMicros} label="Charged of the spend limit" size="sm" className="mt-2" />} |
| 670 | | − | <p className="mt-3 text-xs text-muted">Agents this month{ws.agentsMicros != null ? `: ${money(ws.agentsMicros)}` : ""}</p> |
| 668 | + | <p className="text-xs text-muted">The workspace · {month}, everything it used, at price</p> |
| 669 | + | <p className="mt-1 text-xl font-semibold tabular-nums">{ws.spentMicros != null ? money(ws.spentMicros) : "—"}</p> |
| 670 | + | {ws.chargedMicros != null && ( |
| 671 | + | <p className="mt-1 text-xs text-muted"> |
| 672 | + | Charged after its plan and credit: <span className="text-fg tabular-nums">{money(ws.chargedMicros)}</span> |
| 673 | + | {ws.limitMicros != null ? ` of a ${money(ws.limitMicros)} spend limit` : " · no spend limit set"} |
| 674 | + | </p> |
| 675 | + | )} |
| 676 | + | {ws.chargedMicros != null && ws.limitMicros != null && <Meter spent={ws.chargedMicros} cap={ws.limitMicros} label="Charged of the spend limit" size="sm" className="mt-2" />} |
| 677 | + | <p className="mt-3 text-xs text-muted">Of that, agents{ws.agentsMicros != null ? `: ${money(ws.agentsMicros)}` : ""}</p> |
| 671 | 678 | | <PopoverSlices slices={ws.byAgent} /> |
| 672 | 679 | | </div> |
| 673 | 680 | | ) : data.me ? ( |
| 674 | 681 | | <div className="p-4"> |
| 675 | | − | <p className="text-xs text-muted">You · {month}, agents working for you included</p> |
| 682 | + | <p className="text-xs text-muted">You · {month}, what agents did for you, at price</p> |
| 676 | 683 | | <p className="mt-1 text-xl font-semibold tabular-nums"> |
| 677 | 684 | | {money(data.me.spentMicros)} |
| 678 | 685 | | {data.me.budgetMicros != null && <span className="ml-1.5 text-sm font-normal text-muted">of {money(data.me.budgetMicros)}</span>} |
