Team UI

src/app/[locale]/team/page.tsx

@@ -0,0 +1,65 @@
+import { getSessionUser, canMutate } from "@/lib/session";
+import { getTranslations } from "next-intl/server";
+import { redirect } from "next/navigation";
+import { getOrgMembers } from "@/lib/team";
+import { Card } from "@/components/ui/card";
+import { TeamList } from "@/components/team/team-list";
+import { InviteForm } from "@/components/team/invite-form";
+import Link from "next/link";
+
+/**
+ * /team — manage org members.
+ *
+ * Visible to owners and platform users only (`canMutate`). User-role
+ * members are redirected away — they shouldn't browse the roster.
+ *
+ * The page loads members server-side for the initial render. The
+ * `<TeamList>` and `<InviteForm>` client components handle live
+ * updates after invites and refreshes.
+ */
+export default async function TeamPage() {
+  const user = await getSessionUser();
+  if (!user) redirect("/login");
+  if (!canMutate(user)) redirect("/dashboard");
+
+  const t = await getTranslations("team");
+  const tDashboard = await getTranslations("dashboard");
+
+  const members = await getOrgMembers(user.orgId);
+
+  return (
+    <div>
+      <div className="mb-8 animate-in">
+        <Link
+          href="/dashboard"
+          className="inline-flex items-center gap-1.5 mb-4 text-xs font-medium text-text-muted hover:text-text-primary transition-colors"
+        >
+          <span>←</span> {tDashboard("title")}
+        </Link>
+        <h1 className="font-display text-2xl font-semibold accent-rule mb-2">
+          {t("title")}
+        </h1>
+        <p className="text-text-secondary text-sm mt-4">{t("description")}</p>
+      </div>
+
+      <section className="mb-8 animate-in animate-in-delay-1">
+        <h2 className="text-xs font-semibold uppercase tracking-wider text-text-muted mb-3">
+          {t("inviteSectionTitle")}
+        </h2>
+        <Card>
+          <InviteForm />
+        </Card>
+      </section>
+
+      <section className="animate-in animate-in-delay-2">
+        <h2 className="text-xs font-semibold uppercase tracking-wider text-text-muted mb-3">
+          {t("membersSectionTitle")}{" "}
+          <span className="text-text-muted/60 tabular-nums">
+            ({members.length})
+          </span>
+        </h2>
+        <TeamList initialMembers={members} currentUserId={user.id} />
+      </section>
+    </div>
+  );
+}

src/app/[locale]/tenants/[name]/page.tsx

@@ -8,6 +8,7 @@ import { UsageDisplay } from "@/components/dashboard/usage-display";
 import { PackageList } from "@/components/packages/package-list";
 import { WorkspaceEditor } from "@/components/packages/workspace-editor";
 import { ChannelUsers } from "@/components/channel-users/channel-users";
+import { AssignedUsersPanel } from "@/components/tenants/assigned-users-panel";
 import { formatDateTime, formatRelative } from "@/lib/format";
 
 const CHANNEL_PACKAGES = ["telegram", "discord", "email"];
@@ -128,6 +129,16 @@ export default async function TenantDetailPage({
         </h2>
         <WorkspaceEditor tenantName={name} files={workspaceFiles} canEdit={canEdit} />
       </section>
+
+      {/* Slice 7: Assigned users — visible to anyone who can see the
+          tenant, editable only by owners/platform users. The component
+          fetches its own data so the page doesn't need to await. */}
+      <section className="mt-8 animate-in animate-in-delay-4">
+        <h2 className="text-xs font-semibold uppercase tracking-wider text-text-muted mb-3">
+          {t("assignedUsers")}
+        </h2>
+        <AssignedUsersPanel tenantName={name} canEdit={canEdit} />
+      </section>
     </div>
   );
 }