Sign in

flagon-io/g1t

public

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

323 lines14,397 bytesCodeBlame

Pick any line to see why it is the way it is: the commit, the pull request and issue it came from, and what the agent was thinking.

Stripe webhooks, enterprise invoices, and sudo for both1import { ChevronLeft, ChevronRight, Search } from "lucide-react";
Billing on Stripe's pages, month-end charges, warnings; sudo by workspace2import { 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";
Stripe webhooks, enterprise invoices, and sudo for both12import { PAGE_SIZE, type WorkspaceRow, joinWorkspaces, paginate } from "~/lib/workspaces";
Billing on Stripe's pages, month-end charges, warnings; sudo by workspace13
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
24export async function loader({ request, context }: Route.LoaderArgs) {
25 requireStaff(context);
26 const url = new URL(request.url);
27 const q = (url.searchParams.get("q") ?? "").trim().slice(0, 100);
28 const show = url.searchParams.getAll("show").filter((value): value is Filter => value in FILTERS);
29
Stripe webhooks, enterprise invoices, and sudo for both30 let workspaces = await identity.workspaces(q || undefined);
31 const capped = workspaces.length >= ADMIN_WORKSPACES_LIMIT;
32 // A search for an enterprise's name also finds the workspaces it pays
33 // for, which identity knows nothing about.
34 if (q) {
35 const lower = q.toLowerCase();
36 const members = new Set(
37 (await admin.accounts(q))
38 .filter((row) => row.account.kind === "enterprise" && row.account.name.toLowerCase().includes(lower))
39 .flatMap((row) => row.account.workspaces),
40 );
41 const listed = new Set(workspaces.map((workspace) => workspace.slug));
42 if ([...members].some((slug) => !listed.has(slug))) {
43 const extra = (await identity.workspaces()).filter((workspace) => members.has(workspace.slug) && !listed.has(workspace.slug));
44 workspaces = [...workspaces, ...extra];
45 }
Billing on Stripe's pages, month-end charges, warnings; sudo by workspace46 }
47
Stripe webhooks, enterprise invoices, and sudo for both48 // Billing's figures for exactly this page's workspaces.
49 const { page, pages, items } = paginate(workspaces, url.searchParams.get("page"));
50 const accounts = items.length > 0 ? await admin.accountsFor(items.map((workspace) => workspace.slug)) : [];
51 const onPage = joinWorkspaces(items, accounts);
52 const rows = onPage.filter((row) => show.every((filter) => FILTERS[filter].test(row)));
Billing on Stripe's pages, month-end charges, warnings; sudo by workspace53
Stripe webhooks, enterprise invoices, and sudo for both54 // This page's own figures: a workspace on an enterprise counts its share.
55 const sum = (pick: (row: WorkspaceRow) => number) => onPage.reduce((total, row) => total + pick(row), 0);
Billing on Stripe's pages, month-end charges, warnings; sudo by workspace56 return {
57 q,
58 show,
59 rows,
Stripe webhooks, enterprise invoices, and sudo for both60 page,
61 pages,
62 onPage: onPage.length,
63 total: workspaces.length,
64 capped,
Billing on Stripe's pages, month-end charges, warnings; sudo by workspace65 totals: {
Stripe webhooks, enterprise invoices, and sudo for both66 charged: sum((row) => row.billing.chargedMicros),
67 cost: sum((row) => row.billing.costMicros),
68 onEnterprise: onPage.filter((row) => row.billing.billedTo).length,
69 stopped: onPage.filter((row) => row.billing.limit?.state === "stopped").length,
70 warning: onPage.filter((row) => row.billing.limit?.state === "warning").length,
Billing on Stripe's pages, month-end charges, warnings; sudo by workspace71 },
72 };
73}
74
Stripe webhooks, enterprise invoices, and sudo for both75/** A link to another page of the list, keeping the search and filters. */
76function pageHref(q: string, show: string[], page: number) {
77 const params = new URLSearchParams();
78 if (q) params.set("q", q);
79 for (const filter of show) params.append("show", filter);
80 if (page > 1) params.set("page", String(page));
81 const query = params.toString();
A menu shaped by how g1t works, Soon pages for every promise, and sudo for sales82 return query ? `/workspaces?${query}` : "/workspaces";
Stripe webhooks, enterprise invoices, and sudo for both83}
84
Billing on Stripe's pages, month-end charges, warnings; sudo by workspace85function workspaceHref(row: WorkspaceRow) {
86 return `/workspaces/${encodeURIComponent(row.slug)}`;
87}
88
89export default function Workspaces({ loaderData }: Route.ComponentProps) {
Stripe webhooks, enterprise invoices, and sudo for both90 const { q, show, rows, page, pages, onPage, total, capped, totals } = loaderData;
91 const scope = pages > 1 ? "this page" : null;
Billing on Stripe's pages, month-end charges, warnings; sudo by workspace92 const margin = totals.charged - totals.cost;
93 const filtered = q !== "" || show.length > 0;
94
95 return (
96 <main className="mx-auto max-w-6xl px-4 py-8 sm:py-10">
Packages, with a container registry on g1t.sh; workspaces deleted whole and kept 30 days; Members for every member97 <div className="flex flex-wrap items-start justify-between gap-4">
98 <div>
99 <h1 className="text-2xl font-semibold tracking-tight">Workspaces</h1>
100 <p className="mt-1 text-sm text-muted">Every workspace, who owns it, and how it pays this month.</p>
101 </div>
102 <Link
103 to="/workspaces/deleted"
104 className="rounded-md border border-line px-3 py-1.5 text-sm text-muted hover:border-line-strong hover:text-fg"
105 >
106 Deleted workspaces
107 </Link>
Billing on Stripe's pages, month-end charges, warnings; sudo by workspace108 </div>
109
110 <div className="mt-6 grid grid-cols-2 gap-3 lg:grid-cols-4">
111 <Stat
Stripe webhooks, enterprise invoices, and sudo for both112 label={q ? "Workspaces found" : "Workspaces"}
113 value={`${total}${capped ? "+" : ""}`}
114 hint={`${totals.onEnterprise} on ${scope ?? "the list"} billed to an enterprise`}
115 />
116 <Stat label={scope ? "Charged this month, this page" : "Charged this month"} value={usd(totals.charged)} hint={`Margin ${usd(margin)}`} tone={margin < 0 ? "danger" : undefined} />
117 <Stat label={scope ? "Cost to g1t, this page" : "Cost to g1t"} value={usd(totals.cost)} hint="What their usage cost g1t" />
118 <Stat
119 label={scope ? "Needs attention, this page" : "Needs attention"}
Billing on Stripe's pages, month-end charges, warnings; sudo by workspace120 value={`${totals.stopped} stopped`}
121 hint={`${totals.warning} near the limit`}
122 tone={totals.stopped > 0 ? "danger" : totals.warning > 0 ? "warn" : "mint"}
123 />
124 </div>
125
A menu shaped by how g1t works, Soon pages for every promise, and sudo for sales126 <form method="get" action="/workspaces" role="search" className="mt-6 flex flex-col gap-3 lg:flex-row lg:items-center">
Billing on Stripe's pages, month-end charges, warnings; sudo by workspace127 <div className="relative grow">
128 <Search size={14} className="pointer-events-none absolute top-1/2 left-3 -translate-y-1/2 text-faint" />
129 <input
130 type="search"
131 name="q"
132 defaultValue={q}
133 placeholder="Search by workspace, owner, email or enterprise"
134 aria-label="Search workspaces"
135 autoComplete="off"
136 data-1p-ignore
137 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"
138 />
139 </div>
140 <fieldset className="flex flex-wrap items-center gap-2">
141 <legend className="sr-only">Show only</legend>
142 {(Object.keys(FILTERS) as Filter[]).map((key) => (
143 <label
144 key={key}
145 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"
146 >
147 <input type="checkbox" name="show" value={key} defaultChecked={show.includes(key)} className="size-3.5" />
148 {FILTERS[key].label}
149 </label>
150 ))}
151 <Button type="submit" variant="quiet" className="py-1.5">
152 Apply
153 </Button>
154 {filtered && (
A menu shaped by how g1t works, Soon pages for every promise, and sudo for sales155 <Link to="/workspaces" className="px-1 text-xs text-muted underline-offset-4 hover:text-fg hover:underline">
Billing on Stripe's pages, month-end charges, warnings; sudo by workspace156 Clear
157 </Link>
158 )}
159 </fieldset>
160 </form>
161
162 <p className="mt-4 text-xs text-faint">
Stripe webhooks, enterprise invoices, and sudo for both163 {total} workspace{total === 1 ? "" : "s"}
Billing on Stripe's pages, month-end charges, warnings; sudo by workspace164 {q && (
165 <>
166 {" "}
167 matching <span className="font-mono text-muted">{q}</span>
168 </>
169 )}
Stripe webhooks, enterprise invoices, and sudo for both170 , newest first{pages > 1 && `, ${PAGE_SIZE} a page`}.
171 {show.length > 0 && pages > 1 && ` Filters apply to this page: ${rows.length} of its ${onPage} match.`}
Billing on Stripe's pages, month-end charges, warnings; sudo by workspace172 {capped && ` Only the newest ${ADMIN_WORKSPACES_LIMIT} are listed; search to find older ones.`}
173 </p>
174
175 {rows.length === 0 ? (
176 <div className="mt-3">
Stripe webhooks, enterprise invoices, and sudo for both177 <EmptyState title={filtered ? (pages > 1 ? "None on this page match" : "No workspaces match") : "No workspaces yet"}>
178 {filtered
179 ? pages > 1
180 ? "Filters apply one page at a time. Try the next page, another search, or clear the filters."
181 : "Try another search, or clear the filters."
182 : "Workspaces appear here as people create them."}
Billing on Stripe's pages, month-end charges, warnings; sudo by workspace183 </EmptyState>
184 </div>
185 ) : (
186 <>
187 {/* Phones: one card per workspace. */}
188 <ul className="mt-3 space-y-2 md:hidden">
189 {rows.map((row) => (
190 <li key={row.slug}>
191 <Link to={workspaceHref(row)} className="block rounded-lg border border-line bg-surface p-4 transition-colors hover:border-line-strong">
192 <div className="flex items-start justify-between gap-3">
193 <WorkspaceName row={row} />
194 <ChevronRight size={16} className="mt-0.5 shrink-0 text-faint" />
195 </div>
196 <div className="mt-3 text-xs">
197 <Owners owners={row.owners} compact />
198 </div>
199 <div className="mt-3">
200 <Usage row={row} wide />
201 </div>
202 <dl className="tabular mt-3 grid grid-cols-3 gap-2 text-xs">
203 <Figure label="Charged" value={usd(row.billing.chargedMicros)} />
204 <Figure label="Cost to g1t" value={usd(row.billing.costMicros)} />
205 <Figure label="Members" value={row.memberCount == null ? "—" : String(row.memberCount)} />
206 </dl>
207 </Link>
208 </li>
209 ))}
210 </ul>
211
212 {/* Wider screens: a table. */}
213 <div className="mt-3 hidden overflow-x-auto rounded-lg border border-line md:block">
214 <table className="w-full text-sm">
215 <thead>
216 <tr className="border-b border-line bg-surface text-left text-xs text-muted">
217 <th className="px-4 py-2.5 font-medium">Workspace</th>
218 <th className="px-4 py-2.5 font-medium">Owners</th>
219 <th className="px-4 py-2.5 text-right font-medium">Members</th>
220 <th className="px-4 py-2.5 font-medium">Usage this month / limit</th>
221 <th className="px-4 py-2.5 text-right font-medium">Charged</th>
222 <th className="px-4 py-2.5 text-right font-medium">Cost to g1t</th>
223 </tr>
224 </thead>
225 <tbody>
226 {rows.map((row) => (
227 <tr key={row.slug} className="border-b border-line align-top last:border-0 hover:bg-surface/60">
228 <td className="px-4 py-3">
229 <Link to={workspaceHref(row)} className="group block">
230 <WorkspaceName row={row} />
231 </Link>
232 </td>
233 <td className="max-w-56 px-4 py-3 text-sm">
234 <Owners owners={row.owners} compact />
235 </td>
236 <td className="tabular px-4 py-3 text-right text-muted">{row.memberCount ?? "—"}</td>
237 <td className="px-4 py-3">
238 <Usage row={row} />
239 </td>
240 <td className="tabular px-4 py-3 text-right">{usd(row.billing.chargedMicros)}</td>
241 <td className="tabular px-4 py-3 text-right text-muted">{usd(row.billing.costMicros)}</td>
242 </tr>
243 ))}
244 </tbody>
245 </table>
246 </div>
247 </>
248 )}
Stripe webhooks, enterprise invoices, and sudo for both249
250 {pages > 1 && (
251 <nav aria-label="Pages" className="mt-4 flex items-center justify-between gap-3 text-sm">
252 {page > 1 ? (
253 <Link to={pageHref(q, show, page - 1)} className="inline-flex items-center gap-1 rounded-md border border-line px-3 py-1.5 text-muted hover:border-line-strong hover:text-fg">
254 <ChevronLeft size={14} />
255 Previous
256 </Link>
257 ) : (
258 <span />
259 )}
260 <span className="text-xs text-faint">
261 Page {page} of {pages}
262 </span>
263 {page < pages ? (
264 <Link to={pageHref(q, show, page + 1)} className="inline-flex items-center gap-1 rounded-md border border-line px-3 py-1.5 text-muted hover:border-line-strong hover:text-fg">
265 Next
266 <ChevronRight size={14} />
267 </Link>
268 ) : (
269 <span />
270 )}
271 </nav>
272 )}
Billing on Stripe's pages, month-end charges, warnings; sudo by workspace273 </main>
274 );
275}
276
277function WorkspaceName({ row }: { row: WorkspaceRow }) {
278 const { billing } = row;
279 return (
280 <div className="flex min-w-0 items-start gap-2.5">
281 <span className="mt-0.5">
282 <Avatar name={row.slug} size={22} />
283 </span>
284 <div className="min-w-0">
285 <p className="truncate font-medium group-hover:underline group-hover:underline-offset-4">{row.name}</p>
286 <p className="truncate text-xs text-faint">
287 <span className="font-mono">{row.slug}</span>
288 {row.createdAt && (
289 <>
290 {" · "}created <When at={row.createdAt} />
291 </>
292 )}
293 </p>
294 <div className="mt-1.5 flex flex-wrap gap-1.5">
295 {billing.billedTo && <Badge tone="lavender">Billed to {billing.billedTo.name}</Badge>}
296 <TermsBadge terms={billing.terms} />
297 {billing.limit && billing.terms.kind !== "comped" && <TrustBadge trust={billing.limit.trust} />}
298 </div>
299 </div>
300 </div>
301 );
302}
303
304/** The limit bar; a workspace on an enterprise shares the enterprise's. */
305function Usage({ row, wide = false }: { row: WorkspaceRow; wide?: boolean }) {
306 const { limit, billedTo } = row.billing;
307 if (!limit) return <p className="text-xs text-faint">No usage yet</p>;
308 return (
309 <div>
310 <ExposureBar limit={limit} wide={wide} />
311 {billedTo && <p className="mt-1 text-xs text-faint">via {billedTo.name}</p>}
312 </div>
313 );
314}
315
316function Figure({ label, value }: { label: string; value: string }) {
317 return (
318 <div>
319 <dt className="text-faint">{label}</dt>
320 <dd className="mt-0.5 text-fg-soft">{value}</dd>
321 </div>
322 );
323}