whatsapp-inbox-platform/app/super-admin/tenants/[tenantId]/page.tsx

import Link from "next/link";
import { redirect } from "next/navigation";

import { SectionCard } from "@/components/ui";
import { ShellPage } from "@/components/page-templates";
import { getSession } from "@/lib/auth";
import { prisma } from "@/lib/prisma";

function formatDate(value: Date | null | undefined) {
  if (!value) {
    return "-";
  }

  return new Intl.DateTimeFormat("id-ID", {
    day: "2-digit",
    month: "short",
    year: "numeric",
    hour: "2-digit",
    minute: "2-digit"
  }).format(value);
}

function formatMoney(value: number) {
  return new Intl.NumberFormat("id-ID", {
    style: "currency",
    currency: "IDR",
    maximumFractionDigits: 0
  }).format(value);
}

export default async function TenantDetailPage({ params }: { params: Promise<{ tenantId: string }> }) {
  const session = await getSession();
  if (!session || session.role !== "super_admin") {
    redirect("/unauthorized");
  }

  const { tenantId } = await params;

  const tenant = await prisma.tenant.findUnique({
    where: { id: tenantId },
    include: {
      plan: true,
      channels: {
        orderBy: { createdAt: "desc" },
        include: {
          _count: {
            select: { conversations: true }
          }
        }
      },
      users: {
        orderBy: { fullName: "asc" }
      },
      contacts: {
        select: { id: true }
      },
      billingInvoices: {
        include: { plan: true },
        orderBy: { dueDate: "desc" },
        take: 5
      }
    }
  });

  if (!tenant) {
    redirect("/super-admin/tenants?error=tenant_not_found");
  }

  const [openConversationCount, invoiceTotal, unresolvedWebhook] = await Promise.all([
    prisma.conversation.count({ where: { tenantId, status: { in: ["OPEN", "PENDING"] } } }),
    prisma.billingInvoice.aggregate({
      where: { tenantId },
      _sum: { totalAmount: true }
    }),
    prisma.webhookEvent.count({ where: { tenantId, processStatus: "failed" } })
  ]);

  return (
    <ShellPage shell="super-admin" title="Tenant Detail" description="Company profile, plan, channel status, usage summary, dan seat usage.">
      <div className="grid gap-6 xl:grid-cols-2">
        <SectionCard title="Tenant summary">
          <p className="text-sm text-on-surface-variant">Name: {tenant.name}</p>
          <p className="text-sm text-on-surface-variant">Company: {tenant.companyName}</p>
          <p className="text-sm text-on-surface-variant">Slug: {tenant.slug}</p>
          <p className="text-sm text-on-surface-variant">Status: {tenant.status}</p>
          <p className="text-sm text-on-surface-variant">Timezone: {tenant.timezone}</p>
          <p className="text-sm text-on-surface-variant">Plan: {tenant.plan.name}</p>
          <p className="text-sm text-on-surface-variant">Seats: {tenant.users.length}/{tenant.plan.seatQuota}</p>
          <p className="text-sm text-on-surface-variant">Contacts: {tenant.contacts.length}</p>
          <p className="mt-3 space-y-1 text-sm text-on-surface">
            Open/Pending conversations: {openConversationCount}
            <br />
            Unresolved webhook events: {unresolvedWebhook}
            <br />
            Outstanding invoices: {tenant.billingInvoices.filter((invoice) => invoice.paymentStatus !== "PAID").length}
          </p>
          <div className="mt-4 flex flex-wrap gap-3">
            <Link href={`/super-admin/tenants/${tenant.id}/edit`} className="text-brand hover:underline">
              Edit tenant
            </Link>
            <Link href={`/super-admin/tenants/${tenant.id}/channels/new`} className="text-brand hover:underline">
              Connect channel
            </Link>
          </div>
        </SectionCard>

        <SectionCard title="Channels">
          {tenant.channels.length === 0 ? <p className="text-sm text-outline">No channels connected.</p> : null}
          <ul className="space-y-2">
            {tenant.channels.map((channel) => (
              <li key={channel.id} className="rounded-xl border border-line bg-surface-container p-3">
                <p className="font-medium text-ink">{channel.channelName}</p>
                <p className="text-sm text-on-surface-variant">{channel.displayPhoneNumber || "No number"}</p>
                <p className="text-sm text-outline">Status: {channel.status}</p>
                <p className="text-xs text-outline">Conversations: {channel._count.conversations}</p>
                <Link href={`/super-admin/channels/${channel.id}`} className="text-xs text-brand hover:underline">
                  Open detail
                </Link>
              </li>
            ))}
          </ul>
        </SectionCard>

        <SectionCard title="Recent invoices">
          {tenant.billingInvoices.length === 0 ? <p className="text-sm text-on-surface-variant">No invoices found.</p> : null}
          <ul className="space-y-2">
            {tenant.billingInvoices.map((invoice) => (
              <li key={invoice.id} className="rounded-xl border border-line bg-surface-container p-3 text-sm">
                <p className="font-medium text-ink">{invoice.invoiceNumber}</p>
                <p className="text-on-surface-variant">
                  {invoice.plan.name} • {formatMoney(invoice.totalAmount)} • {invoice.paymentStatus}
                </p>
                <p className="text-xs text-outline">Due: {formatDate(invoice.dueDate)}</p>
                <Link href={`/super-admin/billing/invoices/${invoice.id}`} className="text-xs text-brand hover:underline">
                  View
                </Link>
              </li>
            ))}
          </ul>
        </SectionCard>

        <SectionCard title="Recent team members">
          {tenant.users.length === 0 ? <p className="text-sm text-on-surface-variant">No users.</p> : null}
          <ul className="space-y-2">
            {tenant.users.map((user) => (
              <li key={user.id} className="rounded-xl border border-line bg-surface-container p-3 text-sm">
                <p className="font-medium text-ink">{user.fullName}</p>
                <p className="text-on-surface-variant">{user.email}</p>
              </li>
            ))}
          </ul>
        </SectionCard>
      </div>

      <SectionCard title="Tenant finance totals">
        <p className="text-sm text-on-surface-variant">Total invoice amount: {formatMoney(invoiceTotal._sum.totalAmount ?? 0)}</p>
      </SectionCard>
    </ShellPage>
  );
}