Sign in

flagon-io/g1t

public

Where people and agents ship software together. The open-source git platform for the whole job: issues, agents, checks and deploys to the edge.

gitagentscloudflarerustforgemcp

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

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