cameleer-saas/ui/src/components/Layout.tsx

import { Outlet, useNavigate, useLocation } from 'react-router';
import {
  AppShell,
  Sidebar,
  TopBar,
} from '@cameleer/design-system';
import { LayoutDashboard, ShieldCheck, Server, Users, Settings, KeyRound, Building } from 'lucide-react';
import { useAuth } from '../auth/useAuth';
import { useScopes } from '../auth/useScopes';
import { useOrgStore } from '../auth/useOrganization';
import cameleerLogo from '@cameleer/design-system/assets/cameleer3-logo.svg';

function CameleerLogo() {
  return (
    <img
      src={cameleerLogo}
      alt=""
      width="24"
      height="24"
      aria-hidden="true"
    />
  );
}

function isActive(location: ReturnType<typeof useLocation>, path: string) {
  return location.pathname === path || location.pathname.startsWith(path + '/');
}

export function Layout() {
  const navigate = useNavigate();
  const location = useLocation();
  const { logout } = useAuth();
  const scopes = useScopes();
  const { username, organizations, currentOrgId } = useOrgStore();

  const isVendor = scopes.has('platform:admin');

  // Determine current org slug for server dashboard link
  const currentOrg = organizations.find((o) => o.id === currentOrgId);
  const serverDashboardHref = currentOrg?.slug ? `/t/${currentOrg.slug}/` : '/server/';

  // Build breadcrumbs from path
  const segments = location.pathname.replace(/^\//, '').split('/').filter(Boolean);
  const breadcrumb = segments.map((seg, i) => {
    const label = seg.charAt(0).toUpperCase() + seg.slice(1).replace(/-/g, ' ');
    return { label };
  });

  const sidebar = (
    <Sidebar collapsed={false} onCollapseToggle={() => {}}>
      <Sidebar.Header
        logo={<CameleerLogo />}
        title="Cameleer SaaS"
        onClick={() => navigate(isVendor ? '/vendor/tenants' : '/tenant')}
      />

      {/* Vendor console — only visible to platform:admin */}
      {isVendor && (
        <Sidebar.Section
          icon={<Building size={16} />}
          label="Tenants"
          open={false}
          active={isActive(location, '/vendor/tenants')}
          onToggle={() => navigate('/vendor/tenants')}
        >
          {null}
        </Sidebar.Section>
      )}

      {/* Tenant portal */}
      <Sidebar.Section
        icon={<LayoutDashboard size={16} />}
        label="Dashboard"
        open={false}
        active={location.pathname === '/tenant'}
        onToggle={() => navigate('/tenant')}
      >
        {null}
      </Sidebar.Section>

      <Sidebar.Section
        icon={<ShieldCheck size={16} />}
        label="License"
        open={false}
        active={isActive(location, '/tenant/license')}
        onToggle={() => navigate('/tenant/license')}
      >
        {null}
      </Sidebar.Section>

      <Sidebar.Section
        icon={<KeyRound size={16} />}
        label="OIDC"
        open={false}
        active={isActive(location, '/tenant/oidc')}
        onToggle={() => navigate('/tenant/oidc')}
      >
        {null}
      </Sidebar.Section>

      <Sidebar.Section
        icon={<Users size={16} />}
        label="Team"
        open={false}
        active={isActive(location, '/tenant/team')}
        onToggle={() => navigate('/tenant/team')}
      >
        {null}
      </Sidebar.Section>

      <Sidebar.Section
        icon={<Settings size={16} />}
        label="Settings"
        open={false}
        active={isActive(location, '/tenant/settings')}
        onToggle={() => navigate('/tenant/settings')}
      >
        {null}
      </Sidebar.Section>

      <Sidebar.Footer>
        <Sidebar.FooterLink
          icon={<Server size={16} />}
          label="Open Server Dashboard"
          onClick={() => window.open(serverDashboardHref, '_blank', 'noopener')}
        />
      </Sidebar.Footer>
    </Sidebar>
  );

  return (
    <AppShell sidebar={sidebar}>
      <TopBar
        breadcrumb={breadcrumb}
        user={username ? { name: username } : undefined}
        onLogout={logout}
      />
      <Outlet />
    </AppShell>
  );
}