All the channel approval

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

@@ -6,6 +6,9 @@ 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";
+import { ChannelUsers } from "@/components/channel-users/channel-users";
+
+const CHANNEL_PACKAGES = ["telegram", "discord", "email"];
 
 export default async function TenantDetailPage({
   params,
@@ -20,7 +23,6 @@ export default async function TenantDetailPage({
 
   const tenant = await getTenant(name);
   if (!tenant) notFound();
-  console.log("tenant spec:", JSON.stringify(tenant.spec));
 
   // Scope check
   if (
@@ -32,6 +34,10 @@ export default async function TenantDetailPage({
 
   const enabledPackages = tenant.spec.packages || [];
   const workspaceFiles = tenant.spec.workspaceFiles || {};
+  const enabledChannels = enabledPackages.filter((pkg) =>
+    CHANNEL_PACKAGES.includes(pkg)
+  );
+  const channelUsers = tenant.spec.channelUsers || {};
 
   return (
     <div>
@@ -70,8 +76,19 @@ export default async function TenantDetailPage({
         />
       </section>
 
+      {/* Channel Users (authorized users per channel) */}
+      {enabledChannels.length > 0 && (
+        <section className="mb-8 animate-in animate-in-delay-3">
+          <ChannelUsers
+            tenantName={name}
+            enabledChannels={enabledChannels}
+            initialChannelUsers={channelUsers}
+          />
+        </section>
+      )}
+
       {/* Workspace files */}
-      <section className="animate-in animate-in-delay-3">
+      <section className="animate-in animate-in-delay-4">
         <h2 className="text-xs font-semibold uppercase tracking-wider text-text-muted mb-3">
           {t("workspaceFiles")}
         </h2>
@@ -79,4 +96,4 @@ export default async function TenantDetailPage({
       </section>
     </div>
   );
-}
+}