Sign in

flagon-io/g1t

public

g1t/apps/sudo/app/routes/workspaces.tsx

276 lines12,307 bytesCodeBlame
1import { ChevronRight, Search } from "lucide-react";
2import { Link } from "react-router";
3
4import { ADMIN_WORKSPACES_LIMIT } from "@g1t/contracts";
5
6import type { Route } from "./+types/workspaces";
7import { Owners } from "~/components/billing";
8import { Avatar, Badge, Button, EmptyState, ExposureBar, Stat, TermsBadge, TrustBadge, When } from "~/components/ui";
9import { usd } from "~/lib/money";
10import { admin, identity } from "~/lib/services.server";
11import { requireStaff } from "~/lib/staff";
12import { type WorkspaceRow, joinWorkspaces, matchesQuery } from "~/lib/workspaces";
13
14export const meta: Route.MetaFunction = () => [{ title: "Workspaces · sudo" }, { name: "robots", content: "noindex, nofollow" }];
15
16const FILTERS = {
17 attention: { label: "Stopped or warning", test: (row: WorkspaceRow) => row.billing.limit != null && row.billing.limit.state !== "ok" },
18 terms: { label: "Comped or custom", test: (row: WorkspaceRow) => row.billing.terms.kind !== "standard" },
19 enterprise: { label: "On an enterprise", test: (row: WorkspaceRow) => row.billing.billedTo != null },
20} as const;
21
22type Filter = keyof typeof FILTERS;
23
24const SEVERITY = { stopped: 0, warning: 1, ok: 2 } as const;
25
26export async function loader({ request, context }: Route.LoaderArgs) {
27 requireStaff(context);
28 const url = new URL(request.url);
29 const q = (url.searchParams.get("q") ?? "").trim().slice(0, 100);
30 const show = url.searchParams.getAll("show").filter((value): value is Filter => value in FILTERS);
31
32 const [found, accounts] = await Promise.all([identity.workspaces(q || undefined), admin.accounts()]);
33 let workspaces = found;
34 // A search for an enterprise's name finds the workspaces it pays for,
35 // which identity knows nothing about.
36 const lower = q.toLowerCase();
37 const enterpriseMembers = new Set(
38 q
39 ? accounts
40 .filter((row) => row.account.kind === "enterprise" && row.account.name.toLowerCase().includes(lower))
41 .flatMap((row) => row.account.workspaces)
42 : [],
43 );
44 if (enterpriseMembers.size > 0) {
45 const listed = new Set(found.map((workspace) => workspace.slug));
46 const extra = (await identity.workspaces()).filter((workspace) => enterpriseMembers.has(workspace.slug) && !listed.has(workspace.slug));
47 workspaces = [...found, ...extra];
48 }
49
50 const all = joinWorkspaces(workspaces, accounts).filter((row) => matchesQuery(row, q));
51 const rows = all
52 .filter((row) => show.every((filter) => FILTERS[filter].test(row)))
53 .sort(
54 (a, b) =>
55 SEVERITY[a.billing.limit?.state ?? "ok"] - SEVERITY[b.billing.limit?.state ?? "ok"] ||
56 (b.createdAt ?? "").localeCompare(a.createdAt ?? ""),
57 );
58
59 // Money is summed over billing's accounts, so an enterprise is counted once.
60 const sum = (pick: (row: (typeof accounts)[number]) => number) => accounts.reduce((total, row) => total + pick(row), 0);
61 return {
62 q,
63 show,
64 rows,
65 total: all.length,
66 capped: found.length >= ADMIN_WORKSPACES_LIMIT,
67 totals: {
68 charged: sum((row) => row.chargedMicros),
69 cost: sum((row) => row.costMicros),
70 paid: sum((row) => row.paidMicros),
71 exposure: sum((row) => row.limit.exposureMicros),
72 onEnterprise: all.filter((row) => row.billing.billedTo).length,
73 stopped: accounts.filter((row) => row.limit.state === "stopped").length,
74 warning: accounts.filter((row) => row.limit.state === "warning").length,
75 },
76 };
77}
78
79function workspaceHref(row: WorkspaceRow) {
80 return `/workspaces/${encodeURIComponent(row.slug)}`;
81}
82
83export default function Workspaces({ loaderData }: Route.ComponentProps) {
84 const { q, show, rows, total, capped, totals } = loaderData;
85 const margin = totals.charged - totals.cost;
86 const filtered = q !== "" || show.length > 0;
87
88 return (
89 <main className="mx-auto max-w-6xl px-4 py-8 sm:py-10">
90 <div>
91 <h1 className="text-2xl font-semibold tracking-tight">Workspaces</h1>
92 <p className="mt-1 text-sm text-muted">Every workspace, who owns it, and how it pays this month.</p>
93 </div>
94
95 <div className="mt-6 grid grid-cols-2 gap-3 lg:grid-cols-4">
96 <Stat label="Workspaces" value={String(total)} hint={`${totals.onEnterprise} billed to an enterprise`} />
97 <Stat label="Charged this month" value={usd(totals.charged)} hint={`Cost to g1t ${usd(totals.cost)} · margin ${usd(margin)}`} tone={margin < 0 ? "danger" : undefined} />
98 <Stat label="Unpaid usage this month" value={usd(totals.exposure)} hint={`Paid ever ${usd(totals.paid)}`} />
99 <Stat
100 label="Needs attention"
101 value={`${totals.stopped} stopped`}
102 hint={`${totals.warning} near the limit`}
103 tone={totals.stopped > 0 ? "danger" : totals.warning > 0 ? "warn" : "mint"}
104 />
105 </div>
106
107 <form method="get" action="/" role="search" className="mt-6 flex flex-col gap-3 lg:flex-row lg:items-center">
108 <div className="relative grow">
109 <Search size={14} className="pointer-events-none absolute top-1/2 left-3 -translate-y-1/2 text-faint" />
110 <input
111 type="search"
112 name="q"
113 defaultValue={q}
114 placeholder="Search by workspace, owner, email or enterprise"
115 aria-label="Search workspaces"
116 autoComplete="off"
117 data-1p-ignore
118 className="w-full rounded-md border border-line bg-bg py-2 pr-3 pl-8 text-sm outline-none transition-colors placeholder:text-faint hover:border-line-strong focus:border-merged/60"
119 />
120 </div>
121 <fieldset className="flex flex-wrap items-center gap-2">
122 <legend className="sr-only">Show only</legend>
123 {(Object.keys(FILTERS) as Filter[]).map((key) => (
124 <label
125 key={key}
126 className="inline-flex cursor-pointer items-center gap-2 rounded-full border border-line px-3 py-1.5 text-xs text-muted transition-colors select-none hover:border-line-strong has-checked:border-merged/50 has-checked:bg-merged/10 has-checked:text-merged"
127 >
128 <input type="checkbox" name="show" value={key} defaultChecked={show.includes(key)} className="size-3.5" />
129 {FILTERS[key].label}
130 </label>
131 ))}
132 <Button type="submit" variant="quiet" className="py-1.5">
133 Apply
134 </Button>
135 {filtered && (
136 <Link to="/" className="px-1 text-xs text-muted underline-offset-4 hover:text-fg hover:underline">
137 Clear
138 </Link>
139 )}
140 </fieldset>
141 </form>
142
143 <p className="mt-4 text-xs text-faint">
144 {rows.length === total ? `${total} workspaces` : `${rows.length} of ${total} workspaces`}
145 {q && (
146 <>
147 {" "}
148 matching <span className="font-mono text-muted">{q}</span>
149 </>
150 )}
151 . Stopped and warning first, then newest.
152 {capped && ` Only the newest ${ADMIN_WORKSPACES_LIMIT} are listed; search to find older ones.`}
153 </p>
154
155 {rows.length === 0 ? (
156 <div className="mt-3">
157 <EmptyState title={filtered ? "No workspaces match" : "No workspaces yet"}>
158 {filtered ? "Try another search, or clear the filters." : "Workspaces appear here as people create them."}
159 </EmptyState>
160 </div>
161 ) : (
162 <>
163 {/* Phones: one card per workspace. */}
164 <ul className="mt-3 space-y-2 md:hidden">
165 {rows.map((row) => (
166 <li key={row.slug}>
167 <Link to={workspaceHref(row)} className="block rounded-lg border border-line bg-surface p-4 transition-colors hover:border-line-strong">
168 <div className="flex items-start justify-between gap-3">
169 <WorkspaceName row={row} />
170 <ChevronRight size={16} className="mt-0.5 shrink-0 text-faint" />
171 </div>
172 <div className="mt-3 text-xs">
173 <Owners owners={row.owners} compact />
174 </div>
175 <div className="mt-3">
176 <Usage row={row} wide />
177 </div>
178 <dl className="tabular mt-3 grid grid-cols-3 gap-2 text-xs">
179 <Figure label="Charged" value={usd(row.billing.chargedMicros)} />
180 <Figure label="Cost to g1t" value={usd(row.billing.costMicros)} />
181 <Figure label="Members" value={row.memberCount == null ? "—" : String(row.memberCount)} />
182 </dl>
183 </Link>
184 </li>
185 ))}
186 </ul>
187
188 {/* Wider screens: a table. */}
189 <div className="mt-3 hidden overflow-x-auto rounded-lg border border-line md:block">
190 <table className="w-full text-sm">
191 <thead>
192 <tr className="border-b border-line bg-surface text-left text-xs text-muted">
193 <th className="px-4 py-2.5 font-medium">Workspace</th>
194 <th className="px-4 py-2.5 font-medium">Owners</th>
195 <th className="px-4 py-2.5 text-right font-medium">Members</th>
196 <th className="px-4 py-2.5 font-medium">Usage this month / limit</th>
197 <th className="px-4 py-2.5 text-right font-medium">Charged</th>
198 <th className="px-4 py-2.5 text-right font-medium">Cost to g1t</th>
199 </tr>
200 </thead>
201 <tbody>
202 {rows.map((row) => (
203 <tr key={row.slug} className="border-b border-line align-top last:border-0 hover:bg-surface/60">
204 <td className="px-4 py-3">
205 <Link to={workspaceHref(row)} className="group block">
206 <WorkspaceName row={row} />
207 </Link>
208 </td>
209 <td className="max-w-56 px-4 py-3 text-sm">
210 <Owners owners={row.owners} compact />
211 </td>
212 <td className="tabular px-4 py-3 text-right text-muted">{row.memberCount ?? "—"}</td>
213 <td className="px-4 py-3">
214 <Usage row={row} />
215 </td>
216 <td className="tabular px-4 py-3 text-right">{usd(row.billing.chargedMicros)}</td>
217 <td className="tabular px-4 py-3 text-right text-muted">{usd(row.billing.costMicros)}</td>
218 </tr>
219 ))}
220 </tbody>
221 </table>
222 </div>
223 </>
224 )}
225 </main>
226 );
227}
228
229function WorkspaceName({ row }: { row: WorkspaceRow }) {
230 const { billing } = row;
231 return (
232 <div className="flex min-w-0 items-start gap-2.5">
233 <span className="mt-0.5">
234 <Avatar name={row.slug} size={22} />
235 </span>
236 <div className="min-w-0">
237 <p className="truncate font-medium group-hover:underline group-hover:underline-offset-4">{row.name}</p>
238 <p className="truncate text-xs text-faint">
239 <span className="font-mono">{row.slug}</span>
240 {row.createdAt && (
241 <>
242 {" · "}created <When at={row.createdAt} />
243 </>
244 )}
245 </p>
246 <div className="mt-1.5 flex flex-wrap gap-1.5">
247 {billing.billedTo && <Badge tone="lavender">Billed to {billing.billedTo.name}</Badge>}
248 <TermsBadge terms={billing.terms} />
249 {billing.limit && billing.terms.kind !== "comped" && <TrustBadge trust={billing.limit.trust} />}
250 {!row.known && <Badge tone="warn">Billing only</Badge>}
251 </div>
252 </div>
253 </div>
254 );
255}
256
257/** The limit bar; a workspace on an enterprise shares the enterprise's. */
258function Usage({ row, wide = false }: { row: WorkspaceRow; wide?: boolean }) {
259 const { limit, billedTo } = row.billing;
260 if (!limit) return <p className="text-xs text-faint">No usage yet</p>;
261 return (
262 <div>
263 <ExposureBar limit={limit} wide={wide} />
264 {billedTo && <p className="mt-1 text-xs text-faint">via {billedTo.name}</p>}
265 </div>
266 );
267}
268
269function Figure({ label, value }: { label: string; value: string }) {
270 return (
271 <div>
272 <dt className="text-faint">{label}</dt>
273 <dd className="mt-0.5 text-fg-soft">{value}</dd>
274 </div>
275 );
276}