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