Skip to content
Sign in

flagon-io/g1t

public
0
332 linesCodeBlameRaw
1import { ChevronLeft, 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 { fullDiscount } from "~/lib/terms";
13import { PAGE_SIZE, type WorkspaceRow, joinWorkspaces, paginate } from "~/lib/workspaces";
14
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" },
19 terms: { label: "A discount or custom terms", test: (row: WorkspaceRow) => row.billing.terms.kind !== "standard" },
20 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
31 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 }
47 }
48
49 // 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)));
54
55 // 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);
57 return {
58 q,
59 show,
60 rows,
61 page,
62 pages,
63 onPage: onPage.length,
64 total: workspaces.length,
65 capped,
66 totals: {
67 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,
72 },
73 };
74}
75
76/** 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();
83 return query ? `/workspaces?${query}` : "/workspaces";
84}
85
86function workspaceHref(row: WorkspaceRow) {
87 return `/workspaces/${encodeURIComponent(row.slug)}`;
88}
89
90export default function Workspaces({ loaderData }: Route.ComponentProps) {
91 const { q, show, rows, page, pages, onPage, total, capped, totals } = loaderData;
92 const scope = pages > 1 ? "this page" : null;
93 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">
98 <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 <div className="flex flex-wrap gap-2">
104 <Link
105 to="/workspaces/deleted"
106 className="rounded-md border border-line px-3 py-1.5 text-sm text-muted hover:border-line-strong hover:text-fg"
107 >
108 Deleted workspaces
109 </Link>
110 <Link
111 to="/users/deleted"
112 className="rounded-md border border-line px-3 py-1.5 text-sm text-muted hover:border-line-strong hover:text-fg"
113 >
114 Deleted accounts
115 </Link>
116 </div>
117 </div>
118
119 <div className="mt-6 grid grid-cols-2 gap-3 lg:grid-cols-4">
120 <Stat
121 label={q ? "Workspaces found" : "Workspaces"}
122 value={`${total}${capped ? "+" : ""}`}
123 hint={`${totals.onEnterprise} on ${scope ?? "the list"} billed to an enterprise`}
124 />
125 <Stat label={scope ? "Charged this month, this page" : "Charged this month"} value={usd(totals.charged)} hint={`Margin ${usd(margin)}`} tone={margin < 0 ? "danger" : undefined} />
126 <Stat label={scope ? "Cost to g1t, this page" : "Cost to g1t"} value={usd(totals.cost)} hint="What their usage cost g1t" />
127 <Stat
128 label={scope ? "Needs attention, this page" : "Needs attention"}
129 value={`${totals.stopped} stopped`}
130 hint={`${totals.warning} near the limit`}
131 tone={totals.stopped > 0 ? "danger" : totals.warning > 0 ? "warn" : "mint"}
132 />
133 </div>
134
135 <form method="get" action="/workspaces" role="search" className="mt-6 flex flex-col gap-3 lg:flex-row lg:items-center">
136 <div className="relative grow">
137 <Search size={14} className="pointer-events-none absolute top-1/2 left-3 -translate-y-1/2 text-faint" />
138 <input
139 type="search"
140 name="q"
141 defaultValue={q}
142 placeholder="Search by workspace, owner, email or enterprise"
143 aria-label="Search workspaces"
144 autoComplete="off"
145 data-1p-ignore
146 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-accent/60"
147 />
148 </div>
149 <fieldset className="flex flex-wrap items-center gap-2">
150 <legend className="sr-only">Show only</legend>
151 {(Object.keys(FILTERS) as Filter[]).map((key) => (
152 <label
153 key={key}
154 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-accent/50 has-checked:bg-accent/10 has-checked:text-accent"
155 >
156 <input type="checkbox" name="show" value={key} defaultChecked={show.includes(key)} className="size-3.5" />
157 {FILTERS[key].label}
158 </label>
159 ))}
160 <Button type="submit" variant="quiet" className="py-1.5">
161 Apply
162 </Button>
163 {filtered && (
164 <Link to="/workspaces" className="px-1 text-xs text-muted underline-offset-4 hover:text-fg hover:underline">
165 Clear
166 </Link>
167 )}
168 </fieldset>
169 </form>
170
171 <p className="mt-4 text-xs text-faint">
172 {total} workspace{total === 1 ? "" : "s"}
173 {q && (
174 <>
175 {" "}
176 matching <span className="font-mono text-muted">{q}</span>
177 </>
178 )}
179 , newest first{pages > 1 && `, ${PAGE_SIZE} a page`}.
180 {show.length > 0 && pages > 1 && ` Filters apply to this page: ${rows.length} of its ${onPage} match.`}
181 {capped && ` Only the newest ${ADMIN_WORKSPACES_LIMIT} are listed; search to find older ones.`}
182 </p>
183
184 {rows.length === 0 ? (
185 <div className="mt-3">
186 <EmptyState title={filtered ? (pages > 1 ? "None on this page match" : "No workspaces match") : "No workspaces yet"}>
187 {filtered
188 ? pages > 1
189 ? "Filters apply one page at a time. Try the next page, another search, or clear the filters."
190 : "Try another search, or clear the filters."
191 : "Workspaces appear here as people create them."}
192 </EmptyState>
193 </div>
194 ) : (
195 <>
196 {/* Phones: one card per workspace. */}
197 <ul className="mt-3 space-y-2 md:hidden">
198 {rows.map((row) => (
199 <li key={row.slug}>
200 <Link to={workspaceHref(row)} className="block rounded-lg border border-line bg-surface p-4 transition-colors hover:border-line-strong">
201 <div className="flex items-start justify-between gap-3">
202 <WorkspaceName row={row} />
203 <ChevronRight size={16} className="mt-0.5 shrink-0 text-faint" />
204 </div>
205 <div className="mt-3 text-xs">
206 <Owners owners={row.owners} compact />
207 </div>
208 <div className="mt-3">
209 <Usage row={row} wide />
210 </div>
211 <dl className="tabular mt-3 grid grid-cols-3 gap-2 text-xs">
212 <Figure label="Charged" value={usd(row.billing.chargedMicros)} />
213 <Figure label="Cost to g1t" value={usd(row.billing.costMicros)} />
214 <Figure label="Members" value={row.memberCount == null ? "—" : String(row.memberCount)} />
215 </dl>
216 </Link>
217 </li>
218 ))}
219 </ul>
220
221 {/* Wider screens: a table. */}
222 <div className="mt-3 hidden overflow-x-auto rounded-lg border border-line md:block">
223 <table className="w-full text-sm">
224 <thead>
225 <tr className="border-b border-line bg-surface text-left text-xs text-muted">
226 <th className="px-4 py-2.5 font-medium">Workspace</th>
227 <th className="px-4 py-2.5 font-medium">Owners</th>
228 <th className="px-4 py-2.5 text-right font-medium">Members</th>
229 <th className="px-4 py-2.5 font-medium">Usage this month / limit</th>
230 <th className="px-4 py-2.5 text-right font-medium">Charged</th>
231 <th className="px-4 py-2.5 text-right font-medium">Cost to g1t</th>
232 </tr>
233 </thead>
234 <tbody>
235 {rows.map((row) => (
236 <tr key={row.slug} className="border-b border-line align-top last:border-0 hover:bg-surface/60">
237 <td className="px-4 py-3">
238 <Link to={workspaceHref(row)} className="group block">
239 <WorkspaceName row={row} />
240 </Link>
241 </td>
242 <td className="max-w-56 px-4 py-3 text-sm">
243 <Owners owners={row.owners} compact />
244 </td>
245 <td className="tabular px-4 py-3 text-right text-muted">{row.memberCount ?? "—"}</td>
246 <td className="px-4 py-3">
247 <Usage row={row} />
248 </td>
249 <td className="tabular px-4 py-3 text-right">{usd(row.billing.chargedMicros)}</td>
250 <td className="tabular px-4 py-3 text-right text-muted">{usd(row.billing.costMicros)}</td>
251 </tr>
252 ))}
253 </tbody>
254 </table>
255 </div>
256 </>
257 )}
258
259 {pages > 1 && (
260 <nav aria-label="Pages" className="mt-4 flex items-center justify-between gap-3 text-sm">
261 {page > 1 ? (
262 <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">
263 <ChevronLeft size={14} />
264 Previous
265 </Link>
266 ) : (
267 <span />
268 )}
269 <span className="text-xs text-faint">
270 Page {page} of {pages}
271 </span>
272 {page < pages ? (
273 <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">
274 Next
275 <ChevronRight size={14} />
276 </Link>
277 ) : (
278 <span />
279 )}
280 </nav>
281 )}
282 </main>
283 );
284}
285
286function WorkspaceName({ row }: { row: WorkspaceRow }) {
287 const { billing } = row;
288 return (
289 <div className="flex min-w-0 items-start gap-2.5">
290 <span className="mt-0.5">
291 <Avatar name={row.slug} size={22} />
292 </span>
293 <div className="min-w-0">
294 <p className="truncate font-medium group-hover:underline group-hover:underline-offset-4">{row.name}</p>
295 <p className="truncate text-xs text-faint">
296 <span className="font-mono">{row.slug}</span>
297 {row.createdAt && (
298 <>
299 {" · "}created <When at={row.createdAt} />
300 </>
301 )}
302 </p>
303 <div className="mt-1.5 flex flex-wrap gap-1.5">
304 {billing.billedTo && <Badge tone="lavender">Billed to {billing.billedTo.name}</Badge>}
305 <TermsBadge terms={billing.terms} />
306 {billing.limit && !fullDiscount(billing.terms) && <TrustBadge trust={billing.limit.trust} />}
307 </div>
308 </div>
309 </div>
310 );
311}
312
313/** The limit bar; a workspace on an enterprise shares the enterprise's. */
314function Usage({ row, wide = false }: { row: WorkspaceRow; wide?: boolean }) {
315 const { limit, billedTo } = row.billing;
316 if (!limit) return <p className="text-xs text-faint">No usage yet</p>;
317 return (
318 <div>
319 <ExposureBar limit={limit} wide={wide} />
320 {billedTo && <p className="mt-1 text-xs text-faint">via {billedTo.name}</p>}
321 </div>
322 );
323}
324
325function Figure({ label, value }: { label: string; value: string }) {
326 return (
327 <div>
328 <dt className="text-faint">{label}</dt>
329 <dd className="mt-0.5 text-fg-soft">{value}</dd>
330 </div>
331 );
332}