Multitenantperorg enabling

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

@@ -2,11 +2,11 @@ import { getSessionUser } from "@/lib/session";
 import { getTranslations, getFormatter } from "next-intl/server";
 import { redirect } from "next/navigation";
 import { listTenants } from "@/lib/k8s";
-import { getTenantRequestByOrgId } from "@/lib/db";
+import { listActiveTenantRequestsByOrgId } from "@/lib/db";
 import { Card, CardHeader } from "@/components/ui/card";
 import { StatusBadge } from "@/components/ui/status-badge";
-import { UsageDisplay } from "@/components/dashboard/usage-display";
 import { OnboardingFlow } from "@/components/onboarding/onboarding-flow";
+import { ProvisioningStatus } from "@/components/onboarding/provisioning-status";
 import { formatDateTime } from "@/lib/format";
 import Link from "next/link";
 
@@ -20,7 +20,7 @@ export default async function DashboardPage() {
 
   const allTenants = await listTenants();
 
-  // Platform users see overview of all tenants
+  // Platform users see overview of all tenants — unchanged from pre-Slice-3.
   if (user.isPlatform) {
     const phaseCount = allTenants.reduce<Record<string, number>>((acc, t) => {
       const phase = t.status?.phase ?? "Pending";
@@ -133,20 +133,24 @@ export default async function DashboardPage() {
     );
   }
 
-  // Regular user: find their tenant
-  const myTenant = allTenants.find(
+  // ---------------------------------------------------------------------
+  // Customer view (Slice 3 multi-tenant)
+  // ---------------------------------------------------------------------
+
+  const orgTenants = allTenants.filter(
     (t) => t.metadata.labels?.["pieced.ch/zitadel-org-id"] === user.orgId
   );
+  const orgRequests = await listActiveTenantRequestsByOrgId(user.orgId);
 
-  // No tenant → check for existing request, show onboarding flow
-  if (!myTenant) {
-    const existingRequest = await getTenantRequestByOrgId(user.orgId);
-    // Treat "deleted" as no request — customer can re-onboard
-    const initialState =
-      !existingRequest || existingRequest.status === "deleted"
-        ? "no_request"
-        : existingRequest.status;
+  // Pending/in-flight requests that don't yet have a tenant CR. Once the
+  // CR exists, the tenant card carries the live phase, so a separate
+  // "request" card would just duplicate it.
+  const inflightRequests = orgRequests.filter(
+    (r) => !r.tenantName || !orgTenants.some((t) => t.metadata.name === r.tenantName)
+  );
 
+  // First-time user: empty company. Show the onboarding wizard inline.
+  if (orgTenants.length === 0 && inflightRequests.length === 0) {
     return (
       <div>
         <div className="mb-8 animate-in">
@@ -159,70 +163,107 @@ export default async function DashboardPage() {
         </div>
 
         <div className="animate-in animate-in-delay-1">
-          <OnboardingFlow
-            orgName={user.orgName}
-            initialState={initialState as any}
-          />
+          <OnboardingFlow orgName={user.orgName} />
         </div>
       </div>
     );
   }
 
-  const tenantName = myTenant.metadata.name;
-
+  // Returning customer: list of tenants + in-flight requests, plus
+  // a button to add another instance.
   return (
     <div>
-      <div className="mb-8 animate-in">
-        <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("welcome", { name: user.name || user.email })}
-        </p>
+      <div className="mb-8 animate-in flex items-start justify-between gap-4">
+        <div>
+          <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("welcome", { name: user.name || user.email })}
+          </p>
+        </div>
+
+        <Link
+          href="/dashboard/new"
+          className="shrink-0 inline-flex items-center gap-1.5 py-2 px-4 bg-accent text-white text-xs font-medium rounded-lg hover:bg-accent-dim transition-colors"
+        >
+          <span>+</span> {t("createInstance")}
+        </Link>
       </div>
 
-      {/* Instance status card */}
-      <div className="mb-6 animate-in animate-in-delay-1">
-        <Card>
-          <CardHeader>{t("instanceStatus")}</CardHeader>
-          <div className="flex items-center gap-4">
-            <StatusBadge phase={myTenant.status?.phase ?? "Pending"} />
-            {myTenant.spec.agentName && (
-              <span className="text-sm text-text-secondary">
-                {myTenant.spec.agentName}
-              </span>
-            )}
+      {/* In-flight (pending/approved/provisioning/rejected) requests */}
+      {inflightRequests.length > 0 && (
+        <div className="mb-8 animate-in animate-in-delay-1">
+          <h2 className="text-xs font-semibold uppercase tracking-wider text-text-muted mb-3">
+            {t("inflightRequests")}
+          </h2>
+          <div className="space-y-3">
+            {inflightRequests.map((r) => (
+              <ProvisioningStatus key={r.id} requestId={r.id} />
+            ))}
           </div>
-          {myTenant.spec.packages && myTenant.spec.packages.length > 0 && (
-            <div className="flex flex-wrap gap-2 mt-3">
-              {myTenant.spec.packages.map((pkg) => (
-                <span
-                  key={pkg}
-                  className="text-xs font-mono bg-accent/10 text-accent border border-accent/20 rounded-full px-2.5 py-0.5"
-                >
-                  {pkg}
-                </span>
-              ))}
-            </div>
-          )}
-        </Card>
-      </div>
+        </div>
+      )}
 
-      {/* Usage — no teamId passed, backend resolves from session */}
-      <div className="mb-6 animate-in animate-in-delay-2">
-        <h2 className="text-xs font-semibold uppercase tracking-wider text-text-muted mb-3">
-          {t("usage")}
-        </h2>
-        <UsageDisplay />
-      </div>
+      {/* Active tenants */}
+      {orgTenants.length > 0 && (
+        <div className="animate-in animate-in-delay-2">
+          <h2 className="text-xs font-semibold uppercase tracking-wider text-text-muted mb-3">
+            {t("instances")}
+          </h2>
+          <div className="grid gap-4 md:grid-cols-2">
+            {orgTenants.map((tenant) => (
+              <Link
+                key={tenant.metadata.name}
+                href={`/tenants/${tenant.metadata.name}`}
+                className="block group"
+              >
+                <Card className="h-full hover:border-accent/40 transition-colors">
+                  <div className="flex items-start justify-between gap-3 mb-3">
+                    <div className="min-w-0">
+                      <div className="text-sm font-semibold text-text-primary truncate">
+                        {tenant.spec.displayName || tenant.metadata.name}
+                      </div>
+                      <div className="font-mono text-xs text-text-muted truncate mt-0.5">
+                        {tenant.metadata.name}
+                      </div>
+                    </div>
+                    <StatusBadge phase={tenant.status?.phase ?? "Pending"} />
+                  </div>
 
-      {/* Link to tenant detail */}
-      <Link
-        href={`/tenants/${tenantName}`}
-        className="inline-flex items-center gap-1.5 text-xs font-medium text-accent hover:text-accent-dim transition-colors animate-in animate-in-delay-3"
-      >
-        <span>→</span> {t("manage")}
-      </Link>
+                  {tenant.spec.agentName && (
+                    <div className="text-xs text-text-secondary mb-2">
+                      {tenant.spec.agentName}
+                    </div>
+                  )}
+
+                  {tenant.spec.packages && tenant.spec.packages.length > 0 && (
+                    <div className="flex flex-wrap gap-1.5 mb-3">
+                      {tenant.spec.packages.slice(0, 4).map((pkg) => (
+                        <span
+                          key={pkg}
+                          className="text-xs font-mono bg-accent/10 text-accent border border-accent/20 rounded-full px-2 py-0.5"
+                        >
+                          {pkg}
+                        </span>
+                      ))}
+                      {tenant.spec.packages.length > 4 && (
+                        <span className="text-xs text-text-muted">
+                          +{tenant.spec.packages.length - 4}
+                        </span>
+                      )}
+                    </div>
+                  )}
+
+                  <div className="text-xs font-medium text-accent group-hover:text-accent-dim transition-colors">
+                    {t("manage")} →
+                  </div>
+                </Card>
+              </Link>
+            ))}
+          </div>
+        </div>
+      )}
     </div>
   );
 }