| 1 | import { Building2, ChevronRight } from "lucide-react"; |
| 2 | import { Link } from "react-router"; |
| 3 | |
| 4 | import type { AdminOwner } from "@g1t/contracts"; |
| 5 | |
| 6 | import type { Route } from "./+types/enterprises"; |
| 7 | import { Avatar, ButtonLink, EmptyState, ExposureBar, Stat, StateBadge, TermsBadge, When } from "~/components/ui"; |
| 8 | import { usd } from "~/lib/money"; |
| 9 | import { admin, identity } from "~/lib/services.server"; |
| 10 | import { requireStaff } from "~/lib/staff"; |
| 11 | |
| 12 | export const meta: Route.MetaFunction = () => [{ title: "Enterprises · sudo" }, { name: "robots", content: "noindex, nofollow" }]; |
| 13 | |
| 14 | export async function loader({ context }: Route.LoaderArgs) { |
| 15 | requireStaff(context); |
| 16 | const [accounts, workspaces] = await Promise.all([admin.accounts(), identity.workspaces()]); |
| 17 | const owners = new Map<string, AdminOwner[]>(workspaces.map((workspace) => [workspace.slug, workspace.owners])); |
| 18 | const enterprises = accounts |
| 19 | .filter((row) => row.account.kind === "enterprise") |
| 20 | .sort((a, b) => a.account.name.localeCompare(b.account.name)) |
| 21 | .map((row) => ({ |
| 22 | ...row, |
| 23 | members: row.account.workspaces.map((slug) => ({ slug, owners: owners.get(slug) ?? [] })), |
| 24 | })); |
| 25 | const sum = (pick: (row: (typeof enterprises)[number]) => number) => enterprises.reduce((total, row) => total + pick(row), 0); |
| 26 | return { |
| 27 | enterprises, |
| 28 | totals: { |
| 29 | charged: sum((row) => row.chargedMicros), |
| 30 | cost: sum((row) => row.costMicros), |
| 31 | workspaces: sum((row) => row.account.workspaces.length), |
| 32 | }, |
| 33 | }; |
| 34 | } |
| 35 | |
| 36 | export default function Enterprises({ loaderData }: Route.ComponentProps) { |
| 37 | const { enterprises, totals } = loaderData; |
| 38 | return ( |
| 39 | <main className="mx-auto max-w-6xl px-4 py-8 sm:py-10"> |
| 40 | <div className="flex flex-wrap items-end justify-between gap-4"> |
| 41 | <div> |
| 42 | <h1 className="text-2xl font-semibold tracking-tight">Enterprises</h1> |
| 43 | <p className="mt-1 text-sm text-muted">Each pays for several workspaces: one bill, one limit, one set of terms.</p> |
| 44 | </div> |
| 45 | <ButtonLink to="/enterprises/new" variant="lavender"> |
| 46 | <Building2 size={15} /> |
| 47 | New enterprise |
| 48 | </ButtonLink> |
| 49 | </div> |
| 50 | |
| 51 | <div className="mt-6 grid grid-cols-2 gap-3 lg:grid-cols-3"> |
| 52 | <Stat label="Enterprises" value={String(enterprises.length)} hint={`Paying for ${totals.workspaces} workspace${totals.workspaces === 1 ? "" : "s"}`} /> |
| 53 | <Stat label="Charged this month" value={usd(totals.charged)} /> |
| 54 | <Stat |
| 55 | label="Cost to g1t" |
| 56 | value={usd(totals.cost)} |
| 57 | hint={`Margin ${usd(totals.charged - totals.cost)}`} |
| 58 | tone={totals.charged < totals.cost ? "danger" : undefined} |
| 59 | /> |
| 60 | </div> |
| 61 | |
| 62 | {enterprises.length === 0 ? ( |
| 63 | <div className="mt-6"> |
| 64 | <EmptyState title="No enterprises yet">Create one to bill several workspaces together.</EmptyState> |
| 65 | </div> |
| 66 | ) : ( |
| 67 | <ul className="mt-6 space-y-3"> |
| 68 | {enterprises.map((row) => ( |
| 69 | <li key={row.account.id}> |
| 70 | <Link |
| 71 | to={`/enterprises/${encodeURIComponent(row.account.id)}`} |
| 72 | className="group grid gap-4 rounded-lg border border-line bg-surface p-4 transition-colors hover:border-line-strong md:grid-cols-[minmax(0,2fr)_minmax(0,2fr)_minmax(0,1fr)] md:items-start" |
| 73 | > |
| 74 | <div className="flex min-w-0 items-start gap-2.5"> |
| 75 | <Avatar name={row.account.name} size={28} /> |
| 76 | <div className="min-w-0"> |
| 77 | <p className="truncate font-medium group-hover:underline group-hover:underline-offset-4">{row.account.name}</p> |
| 78 | <p className="truncate text-xs text-faint"> |
| 79 | Since <When at={row.account.createdAt} /> |
| 80 | <span className="font-mono"> · {row.account.id}</span> |
| 81 | </p> |
| 82 | <div className="mt-1.5 flex flex-wrap gap-1.5"> |
| 83 | <TermsBadge terms={row.account.terms} /> |
| 84 | <StateBadge state={row.limit.state} /> |
| 85 | </div> |
| 86 | </div> |
| 87 | </div> |
| 88 | <div className="min-w-0"> |
| 89 | <p className="text-xs text-muted"> |
| 90 | {row.members.length} workspace{row.members.length === 1 ? "" : "s"} |
| 91 | </p> |
| 92 | <ul className="mt-1 space-y-0.5 text-sm"> |
| 93 | {row.members.slice(0, 5).map((member) => ( |
| 94 | <li key={member.slug} className="truncate"> |
| 95 | <span className="font-mono">{member.slug}</span> |
| 96 | {member.owners.length > 0 && <span className="text-xs text-faint"> · {member.owners.map((owner) => owner.username).join(", ")}</span>} |
| 97 | </li> |
| 98 | ))} |
| 99 | {row.members.length > 5 && <li className="text-xs text-faint">and {row.members.length - 5} more</li>} |
| 100 | </ul> |
| 101 | </div> |
| 102 | <div className="flex items-start justify-between gap-3"> |
| 103 | <div className="min-w-0 grow"> |
| 104 | <ExposureBar limit={row.limit} wide /> |
| 105 | <p className="tabular mt-2 text-xs text-faint"> |
| 106 | Charged {usd(row.chargedMicros)} · cost {usd(row.costMicros)} |
| 107 | </p> |
| 108 | </div> |
| 109 | <ChevronRight size={16} className="mt-0.5 shrink-0 text-faint" /> |
| 110 | </div> |
| 111 | </Link> |
| 112 | </li> |
| 113 | ))} |
| 114 | </ul> |
| 115 | )} |
| 116 | </main> |
| 117 | ); |
| 118 | } |