Replace fabricated figures with real data on Home and Members
The Home budget card invented a cap of 4x the allocated total and listed agent counts under a money heading; the Members table hardcoded every human's department as Executive with a blank budget. Source the cap from the real per-department monthly budget envelope (hiring policies), show real allocated dollars per provider, and render humans (which carry no department or budget) as not-applicable instead of a fabricated department.
This commit is contained in:
1 parent
91145fd923
commit
f2a1e71af7
2 files changed
+18
-8
No files matched your search
@@ -25,6 +25,13 @@ export function HomePage({ snapshot, actions }: PageProps) {
|
||||
() => snapshot.providers.filter((provider) => provider.orgId === orgId),
|
||||
[snapshot.providers, orgId],
|
||||
);
|
||||
const budgetCapCents = useMemo(
|
||||
() =>
|
||||
snapshot.hiringPolicies
|
||||
.filter((policy) => policy.orgId === orgId)
|
||||
.reduce((sum, policy) => sum + policy.monthlyBudgetLimitCents, 0),
|
||||
[snapshot.hiringPolicies, orgId],
|
||||
);
|
||||
const [newTaskOpen, setNewTaskOpen] = useState(false);
|
||||
|
||||
const pendingApprovals = approvals.filter((approval) => approval.state === "pending");
|
||||
@@ -60,7 +67,7 @@ export function HomePage({ snapshot, actions }: PageProps) {
|
||||
decidedByEmployeeId: employee.id,
|
||||
}))}
|
||||
/>
|
||||
<SpendCard providers={providers} totalBudgetCents={totalBudgetCents} agents={agents} />
|
||||
<SpendCard providers={providers} totalBudgetCents={totalBudgetCents} capCents={budgetCapCents} agents={agents} />
|
||||
</div>
|
||||
|
||||
<div style={{ display: "grid", gridTemplateColumns: "minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr)", gap: 12 }}>
|
||||
@@ -158,33 +165,36 @@ function WaitingCard({
|
||||
function SpendCard({
|
||||
providers,
|
||||
totalBudgetCents,
|
||||
capCents,
|
||||
agents,
|
||||
}: {
|
||||
providers: ProviderRecord[];
|
||||
totalBudgetCents: number;
|
||||
capCents: number;
|
||||
agents: AgentRecord[];
|
||||
}) {
|
||||
const connected = providers.filter((provider) => provider.enabled);
|
||||
const cap = totalBudgetCents > 0 ? totalBudgetCents * 4 : 0;
|
||||
const fillPct = cap > 0 ? Math.min(100, Math.round((totalBudgetCents / cap) * 100)) : 0;
|
||||
const fillPct = capCents > 0 ? Math.min(100, Math.round((totalBudgetCents / capCents) * 100)) : 0;
|
||||
return (
|
||||
<section className="card" style={{ padding: 18 }}>
|
||||
<div className="card-label" style={{ marginBottom: 14 }}>This month</div>
|
||||
<div className="card-label" style={{ marginBottom: 14 }}>Monthly budget</div>
|
||||
<div className="row" style={{ alignItems: "baseline", gap: 6 }}>
|
||||
<span className="num" style={{ fontSize: 28, fontWeight: 600, letterSpacing: "-0.02em" }}>{money(totalBudgetCents)}</span>
|
||||
<span style={{ fontSize: 12, color: "var(--text-3)" }}>{cap > 0 ? `/ ${money(cap)}` : "allocated"}</span>
|
||||
<span style={{ fontSize: 12, color: "var(--text-3)" }}>{capCents > 0 ? `/ ${money(capCents)}` : "allocated"}</span>
|
||||
</div>
|
||||
<div style={{ marginTop: 14, height: 4, background: "var(--panel-3)", borderRadius: 2, overflow: "hidden" }}>
|
||||
<div style={{ width: `${fillPct}%`, height: "100%", background: "var(--text-1)" }} />
|
||||
</div>
|
||||
<div style={{ marginTop: 14, display: "flex", flexDirection: "column", gap: 8 }}>
|
||||
{connected.slice(0, 3).map((provider) => {
|
||||
const usingAgents = agents.filter((agent) => agent.modelProviderId === provider.id).length;
|
||||
const allocatedCents = agents
|
||||
.filter((agent) => agent.modelProviderId === provider.id)
|
||||
.reduce((sum, agent) => sum + agent.budgetCents, 0);
|
||||
return (
|
||||
<div key={provider.id} className="row" style={{ fontSize: 12 }}>
|
||||
<span style={{ color: "var(--text-2)" }}>{provider.label}</span>
|
||||
<span className="num mono" style={{ marginLeft: "auto", color: "var(--text-1)", fontWeight: 500 }}>
|
||||
{usingAgents} {usingAgents === 1 ? "agent" : "agents"}
|
||||
{money(allocatedCents)}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -43,7 +43,7 @@ export function MembersPanel({
|
||||
</div>
|
||||
</div>
|
||||
<div><Pill>Human</Pill></div>
|
||||
<div style={{ color: "var(--text-2)" }}>Executive</div>
|
||||
<div style={{ color: "var(--text-4)" }}>—</div>
|
||||
<div style={{ color: "var(--text-4)" }}>—</div>
|
||||
</div>
|
||||
))}
|
||||
|
||||
Reference in new issue
Block a user