87 lines
3.2 KiB
TypeScript
87 lines
3.2 KiB
TypeScript
import { getSessionUser, canMutate, isCustomerOwner } 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 { BackLink } from "@/components/ui/back-link";
|
|
import { TeamList } from "@/components/team/team-list";
|
|
import { InviteForm } from "@/components/team/invite-form";
|
|
import { AccessOverview } from "@/components/team/access-overview";
|
|
|
|
/**
|
|
* /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 async function generateMetadata() {
|
|
const t = await getTranslations("common");
|
|
return { title: t("team") };
|
|
}
|
|
|
|
export default async function TeamPage() {
|
|
const user = await getSessionUser();
|
|
if (!user) redirect("/login");
|
|
if (!canMutate(user)) redirect("/dashboard");
|
|
// Bug 8: personal accounts have no team to manage. The page is
|
|
// structurally meaningless and the invite form would create extra
|
|
// ZITADEL users in a single-user org. Redirect cleanly. The matching
|
|
// API guards in `/api/team` and `/api/team/invite` enforce the same
|
|
// rule on direct calls.
|
|
if (user.isPersonal) 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">
|
|
<BackLink href="/dashboard" label={tDashboard("title")} />
|
|
<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}
|
|
canEditRoles={isCustomerOwner(user)}
|
|
/>
|
|
</section>
|
|
|
|
{/* Access overview — single place to see which member can reach
|
|
which assistant, instead of checking each tenant page. */}
|
|
<section className="mt-8 animate-in animate-in-delay-3">
|
|
<h2 className="text-xs font-semibold uppercase tracking-wider text-text-muted mb-1">
|
|
{t("accessTitle")}
|
|
</h2>
|
|
<p className="text-xs text-text-muted mb-3">{t("accessDescription")}</p>
|
|
<AccessOverview />
|
|
</section>
|
|
</div>
|
|
);
|
|
}
|