konnosDashboard
page.tsx122 lines · main
1import Link from 'next/link';
2
3import { apiJson } from '../../../../lib/api';
4
5interface Org {
6 id: string;
7 slug: string;
8 name: string;
9 personal: boolean;
10 createdAt: string | Date;
11}
12
13interface SubscriptionSummary {
14 tier: 'free' | 'pro' | 'team';
15}
16
17export const dynamic = 'force-dynamic';
18export const metadata = { title: 'teams' };
19
20function formatDate(t: string | Date): string {
21 const d = typeof t === 'string' ? new Date(t) : t;
22 if (!Number.isFinite(d.getTime())) return '';
23 return d.toISOString().slice(0, 10);
24}
25
26export default async function TeamsPage() {
27 const [{ orgs }, subscription] = await Promise.all([
28 apiJson<{ orgs: Org[] }>('/v1/me/orgs'),
29 apiJson<SubscriptionSummary>('/v1/billing/subscription').catch(() => ({
30 tier: 'free' as const,
31 })),
32 ]);
33 const personal = orgs.find((o) => o.personal);
34 const teams = orgs.filter((o) => !o.personal);
35 const canCreateTeam = subscription.tier !== 'free';
36
37 return (
38 <section className="flex flex-col gap-6">
39 <header className="flex items-start justify-between">
40 <div>
41 <h1 className="font-mono text-xl tracking-tight">teams</h1>
42 <p className="mt-1 font-mono text-sm text-[var(--color-text-muted)]">
43 an org owns projects, billing, and membership. you always have a personal org;
44 create teams to share projects with collaborators.
45 </p>
46 </div>
47 {canCreateTeam ? (
48 <Link
49 href="/dashboard/teams/new"
50 className="rounded-md bg-[var(--color-primary)] px-4 py-2 font-mono text-sm font-medium text-[var(--color-text-inverse)] transition hover:bg-[var(--color-primary-hover)]"
51 >
52 new team
53 </Link>
54 ) : (
55 <Link
56 href="/dashboard/billing"
57 className="rounded-md border border-[var(--color-primary)] px-4 py-2 font-mono text-sm font-medium text-[var(--color-primary)] transition hover:bg-[var(--color-surface)]"
58 >
59 upgrade to create teams
60 </Link>
61 )}
62 </header>
63
64 {personal ? (
65 <section>
66 <h2 className="mb-3 font-mono text-sm text-[var(--color-text-muted)]">personal</h2>
67 <OrgCard org={personal} />
68 <p className="mt-2 font-mono text-[11px] text-[var(--color-text-subtle)]">
69 your personal org is auto-created on first sign-in and can&apos;t be deleted. it&apos;s
70 where your own solo projects live.
71 </p>
72 </section>
73 ) : null}
74
75 <section>
76 <h2 className="mb-3 font-mono text-sm text-[var(--color-text-muted)]">teams</h2>
77 {teams.length === 0 ? (
78 <div className="rounded-md border border-dashed border-[var(--color-border)] p-6 font-mono text-sm text-[var(--color-text-muted)]">
79 {canCreateTeam ? (
80 <>
81 no teams yet. create one to share projects, billing, and audit logs with
82 collaborators.
83 </>
84 ) : (
85 <>
86 team workspaces are a paid feature. on the free tier you get one personal org;
87 upgrade to pro or team to spin up unlimited shared workspaces.
88 </>
89 )}
90 </div>
91 ) : (
92 <ul className="flex flex-col gap-2">
93 {teams.map((o) => (
94 <li key={o.id}>
95 <OrgCard org={o} />
96 </li>
97 ))}
98 </ul>
99 )}
100 </section>
101 </section>
102 );
103}
104
105function OrgCard({ org }: { org: Org }) {
106 return (
107 <Link
108 href={`/dashboard/teams/${org.id}`}
109 className="flex items-center justify-between rounded-md border border-[var(--color-border-subtle)] bg-[var(--color-surface)] p-4 transition hover:border-[var(--color-border)]"
110 >
111 <div className="min-w-0">
112 <p className="font-mono text-sm text-[var(--color-text)]">{org.name}</p>
113 <p className="mt-0.5 font-mono text-xs text-[var(--color-text-subtle)]">
114 {org.slug} · created {formatDate(org.createdAt)}
115 </p>
116 </div>
117 <span className="rounded-md bg-[var(--color-surface-raised)] px-2 py-0.5 font-mono text-[10px] text-[var(--color-text-muted)]">
118 {org.personal ? 'personal' : 'team'}
119 </span>
120 </Link>
121 );
122}