Skip to content
Sign in

flagon-io/g1t

public
0

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

324 lines14,448 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";
Billing: credits with a kind and expiry, discounts instead of comped, and safer charging12import { fullDiscount } from "~/lib/terms";
Stripe webhooks, enterprise invoices, and sudo for both13import { PAGE_SIZE, type WorkspaceRow, joinWorkspaces, paginate } from "~/lib/workspaces";
Billing on Stripe's pages, month-end charges, warnings; sudo by workspace14
15export const meta: Route.MetaFunction = () => [{ title: "Workspaces · sudo" }, { name: "robots", content: "noindex, nofollow" }];
16
17const FILTERS = {
18 attention: { label: "Stopped or warning", test: (row: WorkspaceRow) => row.billing.limit != null && row.billing.limit.state !== "ok" },
Billing: credits with a kind and expiry, discounts instead of comped, and safer charging19 terms: { label: "A discount or custom terms", test: (row: WorkspaceRow) => row.billing.terms.kind !== "standard" },
Billing on Stripe's pages, month-end charges, warnings; sudo by workspace20 enterprise: { label: "On an enterprise", test: (row: WorkspaceRow) => row.billing.billedTo != null },
21} as const;
22
23type Filter = keyof typeof FILTERS;
24
25export async function loader({ request, context }: Route.LoaderArgs) {
26 requireStaff(context);
27 const url = new URL(request.url);
28 const q = (url.searchParams.get("q") ?? "").trim().slice(0, 100);
29 const show = url.searchParams.getAll("show").filter((value): value is Filter => value in FILTERS);
30
Stripe webhooks, enterprise invoices, and sudo for both31 let workspaces = await identity.workspaces(q || undefined);
32 const capped = workspaces.length >= ADMIN_WORKSPACES_LIMIT;
33 // A search for an enterprise's name also finds the workspaces it pays
34 // for, which identity knows nothing about.
35 if (q) {
36 const lower = q.toLowerCase();
37 const members = new Set(
38 (await admin.accounts(q))
39 .filter((row) => row.account.kind === "enterprise" && row.account.name.toLowerCase().includes(lower))
40 .flatMap((row) => row.account.workspaces),
41 );
42 const listed = new Set(workspaces.map((workspace) => workspace.slug));
43 if ([...members].some((slug) => !listed.has(slug))) {
44 const extra = (await identity.workspaces()).filter((workspace) => members.has(workspace.slug) && !listed.has(workspace.slug));
45 workspaces = [...workspaces, ...extra];
46 }
Billing on Stripe's pages, month-end charges, warnings; sudo by workspace47 }
48
Stripe webhooks, enterprise invoices, and sudo for both49 // Billing's figures for exactly this page's workspaces.
50 const { page, pages, items } = paginate(workspaces, url.searchParams.get("page"));
51 const accounts = items.length > 0 ? await admin.accountsFor(items.map((workspace) => workspace.slug)) : [];
52 const onPage = joinWorkspaces(items, accounts);
53 const rows = onPage.filter((row) => show.every((filter) => FILTERS[filter].test(row)));
Billing on Stripe's pages, month-end charges, warnings; sudo by workspace54
Stripe webhooks, enterprise invoices, and sudo for both55 // This page's own figures: a workspace on an enterprise counts its share.
56 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 workspace57 return {
58 q,
59 show,
60 rows,
Stripe webhooks, enterprise invoices, and sudo for both61 page,
62 pages,
63 onPage: onPage.length,
64 total: workspaces.length,
65 capped,
Billing on Stripe's pages, month-end charges, warnings; sudo by workspace66 totals: {
Stripe webhooks, enterprise invoices, and sudo for both67 charged: sum((row) => row.billing.chargedMicros),
68 cost: sum((row) => row.billing.costMicros),
69 onEnterprise: onPage.filter((row) => row.billing.billedTo).length,
70 stopped: onPage.filter((row) => row.billing.limit?.state === "stopped").length,
71 warning: onPage.filter((row) => row.billing.limit?.state === "warning").length,
Billing on Stripe's pages, month-end charges, warnings; sudo by workspace72 },
73 };
74}
75
Stripe webhooks, enterprise invoices, and sudo for both76/** A link to another page of the list, keeping the search and filters. */
77function pageHref(q: string, show: string[], page: number) {
78 const params = new URLSearchParams();
79 if (q) params.set("q", q);
80 for (const filter of show) params.append("show", filter);
81 if (page > 1) params.set("page", String(page));
82 const query = params.toString();
A menu shaped by how g1t works, Soon pages for every promise, and sudo for sales83 return query ? `/workspaces?${query}` : "/workspaces";
Stripe webhooks, enterprise invoices, and sudo for both84}
85
Billing on Stripe's pages, month-end charges, warnings; sudo by workspace86function workspaceHref(row: WorkspaceRow) {
87 return `/workspaces/${encodeURIComponent(row.slug)}`;
88}
89
90export default function Workspaces({ loaderData }: Route.ComponentProps) {
Stripe webhooks, enterprise invoices, and sudo for both91 const { q, show, rows, page, pages, onPage, total, capped, totals } = loaderData;
92 const scope = pages > 1 ? "this page" : null;
Billing on Stripe's pages, month-end charges, warnings; sudo by workspace93 const margin = totals.charged - totals.cost;
94 const filtered = q !== "" || show.length > 0;
95
96 return (
97 <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 member98 <div className="flex flex-wrap items-start justify-between gap-4">
99 <div>
100 <h1 className="text-2xl font-semibold tracking-tight">Workspaces</h1>
101 <p className="mt-1 text-sm text-muted">Every workspace, who owns it, and how it pays this month.</p>
102 </div>
103 <Link
104 to="/workspaces/deleted"
105 className="rounded-md border border-line px-3 py-1.5 text-sm text-muted hover:border-line-strong hover:text-fg"
106 >
107 Deleted workspaces
108 </Link>
Billing on Stripe's pages, month-end charges, warnings; sudo by workspace109 </div>
110
111 <div className="mt-6 grid grid-cols-2 gap-3 lg:grid-cols-4">
112 <Stat
Stripe webhooks, enterprise invoices, and sudo for both113 label={q ? "Workspaces found" : "Workspaces"}
114 value={`${total}${capped ? "+" : ""}`}
115 hint={`${totals.onEnterprise} on ${scope ?? "the list"} billed to an enterprise`}
116 />
117 <Stat label={scope ? "Charged this month, this page" : "Charged this month"} value={usd(totals.charged)} hint={`Margin ${usd(margin)}`} tone={margin < 0 ? "danger" : undefined} />
118 <Stat label={scope ? "Cost to g1t, this page" : "Cost to g1t"} value={usd(totals.cost)} hint="What their usage cost g1t" />
119 <Stat
120 label={scope ? "Needs attention, this page" : "Needs attention"}
Billing on Stripe's pages, month-end charges, warnings; sudo by workspace121 value={`${totals.stopped} stopped`}
122 hint={`${totals.warning} near the limit`}
123 tone={totals.stopped > 0 ? "danger" : totals.warning > 0 ? "warn" : "mint"}
124 />
125 </div>
126
A menu shaped by how g1t works, Soon pages for every promise, and sudo for sales127 <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 workspace128 <div className="relative grow">
129 <Search size={14} className="pointer-events-none absolute top-1/2 left-3 -translate-y-1/2 text-faint" />
130 <input
131 type="search"
132 name="q"
133 defaultValue={q}
134 placeholder="Search by workspace, owner, email or enterprise"
135 aria-label="Search workspaces"
136 autoComplete="off"
137 data-1p-ignore
138 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"
139 />
140 </div>
141 <fieldset className="flex flex-wrap items-center gap-2">
142 <legend className="sr-only">Show only</legend>
143 {(Object.keys(FILTERS) as Filter[]).map((key) => (
144 <label
145 key={key}
146 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"
147 >
148 <input type="checkbox" name="show" value={key} defaultChecked={show.includes(key)} className="size-3.5" />
149 {FILTERS[key].label}
150 </label>
151 ))}
152 <Button type="submit" variant="quiet" className="py-1.5">
153 Apply
154 </Button>
155 {filtered && (
A menu shaped by how g1t works, Soon pages for every promise, and sudo for sales156 <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 workspace157 Clear
158 </Link>
159 )}
160 </fieldset>
161 </form>
162
163 <p className="mt-4 text-xs text-faint">
Stripe webhooks, enterprise invoices, and sudo for both164 {total} workspace{total === 1 ? "" : "s"}
Billing on Stripe's pages, month-end charges, warnings; sudo by workspace165 {q && (
166 <>
167 {" "}
168 matching <span className="font-mono text-muted">{q}</span>
169 </>
170 )}
Stripe webhooks, enterprise invoices, and sudo for both171 , newest first{pages > 1 && `, ${PAGE_SIZE} a page`}.
172 {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 workspace173 {capped && ` Only the newest ${ADMIN_WORKSPACES_LIMIT} are listed; search to find older ones.`}
174 </p>
175
176 {rows.length === 0 ? (
177 <div className="mt-3">
Stripe webhooks, enterprise invoices, and sudo for both178 <EmptyState title={filtered ? (pages > 1 ? "None on this page match" : "No workspaces match") : "No workspaces yet"}>
179 {filtered
180 ? pages > 1
181 ? "Filters apply one page at a time. Try the next page, another search, or clear the filters."
182 : "Try another search, or clear the filters."
183 : "Workspaces appear here as people create them."}
Billing on Stripe's pages, month-end charges, warnings; sudo by workspace184 </EmptyState>
185 </div>
186 ) : (
187 <>
188 {/* Phones: one card per workspace. */}
189 <ul className="mt-3 space-y-2 md:hidden">
190 {rows.map((row) => (
191 <li key={row.slug}>
192 <Link to={workspaceHref(row)} className="block rounded-lg border border-line bg-surface p-4 transition-colors hover:border-line-strong">
193 <div className="flex items-start justify-between gap-3">
194 <WorkspaceName row={row} />
195 <ChevronRight size={16} className="mt-0.5 shrink-0 text-faint" />
196 </div>
197 <div className="mt-3 text-xs">
198 <Owners owners={row.owners} compact />
199 </div>
200 <div className="mt-3">
201 <Usage row={row} wide />
202 </div>
203 <dl className="tabular mt-3 grid grid-cols-3 gap-2 text-xs">
204 <Figure label="Charged" value={usd(row.billing.chargedMicros)} />
205 <Figure label="Cost to g1t" value={usd(row.billing.costMicros)} />
206 <Figure label="Members" value={row.memberCount == null ? "—" : String(row.memberCount)} />
207 </dl>
208 </Link>
209 </li>
210 ))}
211 </ul>
212
213 {/* Wider screens: a table. */}
214 <div className="mt-3 hidden overflow-x-auto rounded-lg border border-line md:block">
215 <table className="w-full text-sm">
216 <thead>
217 <tr className="border-b border-line bg-surface text-left text-xs text-muted">
218 <th className="px-4 py-2.5 font-medium">Workspace</th>
219 <th className="px-4 py-2.5 font-medium">Owners</th>
220 <th className="px-4 py-2.5 text-right font-medium">Members</th>
221 <th className="px-4 py-2.5 font-medium">Usage this month / limit</th>
222 <th className="px-4 py-2.5 text-right font-medium">Charged</th>
223 <th className="px-4 py-2.5 text-right font-medium">Cost to g1t</th>
224 </tr>
225 </thead>
226 <tbody>
227 {rows.map((row) => (
228 <tr key={row.slug} className="border-b border-line align-top last:border-0 hover:bg-surface/60">
229 <td className="px-4 py-3">
230 <Link to={workspaceHref(row)} className="group block">
231 <WorkspaceName row={row} />
232 </Link>
233 </td>
234 <td className="max-w-56 px-4 py-3 text-sm">
235 <Owners owners={row.owners} compact />
236 </td>
237 <td className="tabular px-4 py-3 text-right text-muted">{row.memberCount ?? "—"}</td>
238 <td className="px-4 py-3">
239 <Usage row={row} />
240 </td>
241 <td className="tabular px-4 py-3 text-right">{usd(row.billing.chargedMicros)}</td>
242 <td className="tabular px-4 py-3 text-right text-muted">{usd(row.billing.costMicros)}</td>
243 </tr>
244 ))}
245 </tbody>
246 </table>
247 </div>
248 </>
249 )}
Stripe webhooks, enterprise invoices, and sudo for both250
251 {pages > 1 && (
252 <nav aria-label="Pages" className="mt-4 flex items-center justify-between gap-3 text-sm">
253 {page > 1 ? (
254 <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">
255 <ChevronLeft size={14} />
256 Previous
257 </Link>
258 ) : (
259 <span />
260 )}
261 <span className="text-xs text-faint">
262 Page {page} of {pages}
263 </span>
264 {page < pages ? (
265 <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">
266 Next
267 <ChevronRight size={14} />
268 </Link>
269 ) : (
270 <span />
271 )}
272 </nav>
273 )}
Billing on Stripe's pages, month-end charges, warnings; sudo by workspace274 </main>
275 );
276}
277
278function WorkspaceName({ row }: { row: WorkspaceRow }) {
279 const { billing } = row;
280 return (
281 <div className="flex min-w-0 items-start gap-2.5">
282 <span className="mt-0.5">
283 <Avatar name={row.slug} size={22} />
284 </span>
285 <div className="min-w-0">
286 <p className="truncate font-medium group-hover:underline group-hover:underline-offset-4">{row.name}</p>
287 <p className="truncate text-xs text-faint">
288 <span className="font-mono">{row.slug}</span>
289 {row.createdAt && (
290 <>
291 {" · "}created <When at={row.createdAt} />
292 </>
293 )}
294 </p>
295 <div className="mt-1.5 flex flex-wrap gap-1.5">
296 {billing.billedTo && <Badge tone="lavender">Billed to {billing.billedTo.name}</Badge>}
297 <TermsBadge terms={billing.terms} />
Billing: credits with a kind and expiry, discounts instead of comped, and safer charging298 {billing.limit && !fullDiscount(billing.terms) && <TrustBadge trust={billing.limit.trust} />}
Billing on Stripe's pages, month-end charges, warnings; sudo by workspace299 </div>
300 </div>
301 </div>
302 );
303}
304
305/** The limit bar; a workspace on an enterprise shares the enterprise's. */
306function Usage({ row, wide = false }: { row: WorkspaceRow; wide?: boolean }) {
307 const { limit, billedTo } = row.billing;
308 if (!limit) return <p className="text-xs text-faint">No usage yet</p>;
309 return (
310 <div>
311 <ExposureBar limit={limit} wide={wide} />
312 {billedTo && <p className="mt-1 text-xs text-faint">via {billedTo.name}</p>}
313 </div>
314 );
315}
316
317function Figure({ label, value }: { label: string; value: string }) {
318 return (
319 <div>
320 <dt className="text-faint">{label}</dt>
321 <dd className="mt-0.5 text-fg-soft">{value}</dd>
322 </div>
323 );
324}