portal/src/app/[slug]/settings/page.tsx

import { canSee } from "@/lib/session";
import { getPortalSession } from "@/lib/get-session";
import { loadTenantForShell } from "@/lib/portal-data";
import { Panel } from "@/components/portal/Panel";
import { Monogram } from "@/components/portal/Monogram";
import { NotAllowed } from "@/components/portal/NotAllowed";

// "Organization" — IT_ADMIN only.
export default async function OrganizationPage({
  params,
}: {
  params: Promise<{ slug: string }>;
}) {
  const { slug } = await params;
  const session = await getPortalSession();
  if (!canSee(session, "settings")) return <NotAllowed need="IT_ADMIN" />;
  const t = await loadTenantForShell(slug);
  if (!t) return null;

  const subscribed = t.products.filter((p) => t.entitled.includes(p.id));
  const trialing = t.products.filter((p) => t.trialing.includes(p.id));
  const seatsLeft = t.seats.total - t.seats.used;
  const pct = t.seats.total > 0 ? (t.seats.used / t.seats.total) * 100 : 0;

  return (
    <div className="content-inner" style={{ maxWidth: 1080 }}>
      <div className="page-head">
        <div>
          <div className="page-title">Organization</div>
          <div className="page-sub">
            Tenant profile, entitlements & primary contact
          </div>
        </div>
        <div className="ph-actions">
          <button type="button" className="btn">Export profile</button>
          <button type="button" className="btn btn-primary">Edit details</button>
        </div>
      </div>

      <div className="grid g-12">
        <div className="span-7 col" style={{ gap: 12 }}>
          <Panel title="Legal entity" bracket>
            <dl className="dl">
              <dt>Legal name</dt><dd>{t.name}</dd>
              <dt>Form</dt><dd className="mono">{t.legalType}</dd>
              <dt>Registered</dt><dd>{t.city} · {t.country}</dd>
              <dt>VAT ID</dt><dd className="mono">{t.vat}</dd>
              <dt>Tenant ID</dt><dd className="mono">{t.id}</dd>
              <dt>Customer since</dt><dd className="mono">{t.since}</dd>
            </dl>
          </Panel>

          <Panel title="Primary contact">
            <div className="row" style={{ gap: 12 }}>
              <span className="avatar" style={{ width: 38, height: 38, fontSize: 13 }}>
                {t.contact.split(" ").map((s) => s[0]).join("")}
              </span>
              <div>
                <div style={{ fontWeight: 600 }}>{t.contact}</div>
                <div className="mono muted" style={{ fontSize: 12 }}>{t.contactEmail}</div>
              </div>
              <span className="spacer" />
              <span className="tag"><span className="dot accent" /> ADMIN OWNER</span>
            </div>
          </Panel>
        </div>

        <div className="span-5 col" style={{ gap: 12 }}>
          <Panel title="Plan & seats">
            <div className="row between" style={{ alignItems: "flex-start", marginBottom: 14 }}>
              <div>
                <div className="eyebrow">PLAN</div>
                <div style={{ fontSize: 17, fontWeight: 600, marginTop: 3 }}>{t.plan}</div>
                <div className="mono muted" style={{ fontSize: 11 }}>{t.planCode}</div>
              </div>
              <div style={{ textAlign: "right" }}>
                <div className="eyebrow">RENEWS</div>
                <div className="mono" style={{ fontSize: 14, marginTop: 3, color: t.renewal === "overdue" ? "var(--danger)" : "inherit" }}>{t.renewal}</div>
              </div>
            </div>
            <div className="row between" style={{ marginBottom: 6 }}>
              <span className="label-micro">SEATS</span>
              <span className="mono" style={{ fontSize: 12 }}>{t.seats.used} / {t.seats.total}</span>
            </div>
            <div className="meter"><span style={{ width: `${pct}%` }} /></div>
            <div className="muted mono" style={{ fontSize: 10.5, marginTop: 6 }}>{seatsLeft} seats available</div>
          </Panel>

          <Panel title="Products subscribed" tail={<span className="label-micro">{subscribed.length} active</span>} pad={false}>
            <div className="kv-list" style={{ padding: "2px 14px" }}>
              {subscribed.map((p) => (
                <div className="kv" key={p.id}>
                  <span className="row" style={{ gap: 9 }}>
                    <Monogram text={p.mono} size={24} />
                    <span className="kvk" style={{ fontWeight: 500, color: "var(--ink)", whiteSpace: "nowrap" }}>{p.name}</span>
                  </span>
                  <span className="tag"><span className="dot ok" /> ENTITLED</span>
                </div>
              ))}
              {trialing.map((p) => (
                <div className="kv" key={p.id}>
                  <span className="row" style={{ gap: 9 }}>
                    <Monogram text={p.mono} size={24} />
                    <span className="kvk" style={{ fontWeight: 500, color: "var(--ink)" }}>{p.name}</span>
                  </span>
                  <span className="tag"><span className="dot warn" /> TRIALING</span>
                </div>
              ))}
              {subscribed.length === 0 && trialing.length === 0 ? (
                <div className="muted" style={{ padding: "12px 0", fontSize: 12 }}>No active products.</div>
              ) : null}
            </div>
          </Panel>
        </div>
      </div>
    </div>
  );
}