Working version 6.2

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

@@ -1,5 +1,82 @@
-import TenantDetailClient from "@/components/tenants/TenantDetailClient";
+import { getSessionUser } from "@/lib/session";
+import { getTranslations } from "next-intl/server";
+import { redirect, notFound } from "next/navigation";
+import { getTenant } from "@/lib/k8s";
+import { StatusBadge } from "@/components/ui/status-badge";
+import { UsageDisplay } from "@/components/dashboard/usage-display";
+import { PackageList } from "@/components/packages/package-list";
+import { WorkspaceEditor } from "@/components/packages/workspace-editor";
 
-export default function TenantDetailPage() {
-  return <TenantDetailClient />;
+export default async function TenantDetailPage({
+  params,
+}: {
+  params: Promise<{ name: string; locale: string }>;
+}) {
+  const user = await getSessionUser();
+  if (!user) redirect("/login");
+
+  const { name } = await params;
+  const t = await getTranslations("tenantDetail");
+
+  const tenant = await getTenant(name);
+  if (!tenant) notFound();
+  console.log("tenant spec:", JSON.stringify(tenant.spec));
+
+  // Scope check
+  if (
+    !user.isPlatform &&
+    tenant.metadata.labels?.["pieced.ch/zitadel-org-id"] !== user.orgId
+  ) {
+    notFound();
+  }
+
+  const enabledPackages = tenant.spec.packages || [];
+  const workspaceFiles = tenant.spec.workspaceFiles || {};
+
+  return (
+    <div>
+      {/* Header */}
+      <div className="mb-8 animate-in">
+        <div className="flex items-center gap-4">
+          <h1 className="font-display text-2xl font-semibold accent-rule">
+            {tenant.spec.displayName || name}
+          </h1>
+          <StatusBadge phase={tenant.status?.phase ?? "Pending"} />
+        </div>
+        {tenant.spec.agentName && (
+          <p className="text-sm text-text-secondary mt-3">
+            {t("agent")}: {tenant.spec.agentName}
+          </p>
+        )}
+      </div>
+
+      {/* Usage */}
+      <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("usage")}
+        </h2>
+        <UsageDisplay teamId={tenant.status?.litellmTeamId || name} />
+      </section>
+
+      {/* Packages */}
+      <section className="mb-8 animate-in animate-in-delay-2">
+        <h2 className="text-xs font-semibold uppercase tracking-wider text-text-muted mb-3">
+          {t("packages")}
+        </h2>
+        <PackageList
+          tenantName={name}
+          enabledPackages={enabledPackages}
+          conditions={tenant.status?.conditions}
+        />
+      </section>
+
+      {/* Workspace files */}
+      <section className="animate-in animate-in-delay-3">
+        <h2 className="text-xs font-semibold uppercase tracking-wider text-text-muted mb-3">
+          {t("workspaceFiles")}
+        </h2>
+        <WorkspaceEditor tenantName={name} files={workspaceFiles} />
+      </section>
+    </div>
+  );
 }