Phase2.5: Skill SetUp Process

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

@@ -2,6 +2,7 @@ import { getSessionUser } from "@/lib/session";
 import { getTranslations } from "next-intl/server";
 import { redirect } from "next/navigation";
 import { listTenants } from "@/lib/k8s";
+import { countPendingSkillActivationRequests } from "@/lib/db";
 import { AdminPanel } from "@/components/admin/admin-panel";
 
 export default async function AdminPage() {
@@ -19,6 +20,12 @@ export default async function AdminPage() {
   }
 
   const tenants = await listTenants();
+  // Phase 2.5: badge counter for the skill-activation admin queue.
+  // Cheap COUNT(*) on a partial-indexed status='pending' column —
+  // bounded by request volume and never expected to be high.
+  const pendingSkillCount = await countPendingSkillActivationRequests().catch(
+    () => 0
+  );
 
   return (
     <div>
@@ -33,6 +40,21 @@ export default async function AdminPage() {
             than nav-shell entries — these are platform-team utilities,
             not main navigation. */}
         <div className="flex items-center gap-2">
+          <a
+            href="/admin/skills/pending"
+            className={`text-sm px-4 py-2 rounded-lg border transition-colors flex items-center gap-2 ${
+              pendingSkillCount > 0
+                ? "border-warning text-warning hover:bg-warning/10"
+                : "border-border text-text-secondary hover:text-text-primary hover:border-text-secondary"
+            }`}
+          >
+            <span>{t("skillsQueueTool")}</span>
+            {pendingSkillCount > 0 && (
+              <span className="text-xs px-1.5 py-0.5 rounded bg-warning text-surface-0 font-semibold">
+                {pendingSkillCount}
+              </span>
+            )}
+          </a>
           <a
             href="/admin/billing"
             className="text-sm px-4 py-2 rounded-lg border border-border text-text-secondary hover:text-text-primary hover:border-text-secondary transition-colors"

src/app/[locale]/admin/skills/pending/page.tsx

@@ -0,0 +1,59 @@
+import { redirect } from "next/navigation";
+import { getTranslations } from "next-intl/server";
+import { getSessionUser } from "@/lib/session";
+import { listPendingSkillActivationRequests, getOrgBilling } from "@/lib/db";
+import { getPackageDef } from "@/lib/packages";
+import { BackLink } from "@/components/ui/back-link";
+import { PendingSkillRequests } from "@/components/admin/skills/pending-skill-requests";
+
+/**
+ * /admin/skills/pending — admin queue for manual-setup skill
+ * activation requests. Each row shows tenant, skill, requester
+ * info, and offers Approve / Reject actions.
+ *
+ * Server-renders the initial list. Approval/rejection trigger a
+ * client-side fetch + router.refresh() so the row disappears and
+ * the count updates without a hard reload.
+ */
+export default async function AdminPendingSkillRequestsPage() {
+  const user = await getSessionUser();
+  if (!user) redirect("/login");
+  if (!user.isPlatform) redirect("/dashboard");
+  const t = await getTranslations("adminSkills");
+
+  const pending = await listPendingSkillActivationRequests();
+
+  // Hydrate display fields: skill name from catalog, org company name
+  // from billing. Skill name fallback to skillId for off-catalog
+  // entries (shouldn't happen but defensive). Company name is
+  // looked up lazily per row; dedup'd via a Map so we don't issue
+  // duplicate getOrgBilling calls for the same org.
+  const seenOrg = new Map<string, string | null>();
+  const rows = await Promise.all(
+    pending.map(async (r) => {
+      if (!seenOrg.has(r.zitadelOrgId)) {
+        const billing = await getOrgBilling(r.zitadelOrgId).catch(() => null);
+        seenOrg.set(r.zitadelOrgId, billing?.companyName ?? null);
+      }
+      const def = getPackageDef(r.skillId);
+      return {
+        ...r,
+        skillName: def?.name ?? r.skillId,
+        companyName: seenOrg.get(r.zitadelOrgId) ?? null,
+      };
+    })
+  );
+
+  return (
+    <main className="max-w-5xl mx-auto px-6 py-8">
+      <BackLink href="/admin" label={t("backToAdmin")} />
+      <div className="mb-8 animate-in">
+        <h1 className="font-display text-2xl font-semibold accent-rule">
+          {t("title")}
+        </h1>
+        <p className="text-sm text-text-secondary mt-3">{t("subtitle")}</p>
+      </div>
+      <PendingSkillRequests initialRows={rows} />
+    </main>
+  );
+}