app.tsx

/**
 * dev-pulse SPA root.
 *
 * The dashboard-01 shell (AppShell) renders the sidebar + section
 * sub-nav + header; pages render in the inset body. No hand-rolled
 * subnav strip — the sidebar's `NavMain` sub-items carry the
 * section testids the smoke suite asserts on.
 */

import { useAuth, AuthProvider } from "@nube/starter-ui-core/auth";

import { api } from "./api/client.js";
import { authStrategy } from "./auth/strategy.js";
import { LoginPage } from "./auth/login-page.jsx";
import { ProtectedRoute } from "./auth/protected-route.jsx";
import { ErrorBoundary } from "./components/error-boundary.jsx";
import { NotFoundPage } from "./components/not-found.jsx";
import { AppShell } from "./layout/app-shell.jsx";
import { IdentitiesPage } from "./account/identities-page.jsx";
import { SettingsPage } from "./account/settings-page.jsx";
import { TagsPage } from "./account/tags-page.jsx";
import { AdminUsersPage } from "./admin/users-page.jsx";
import { RefreshPage } from "./admin/refresh-page.jsx";
import { RunsPage } from "./admin/runs-page.jsx";
import { HomeOrgPage } from "./directory/home-org-page.jsx";
import { OrgsPage } from "./directory/orgs-page.jsx";
import { TeamsPage } from "./directory/teams-page.jsx";
import { UsersPage } from "./directory/users-page.jsx";
import { FreshnessPage } from "./reports/freshness-page.jsx";
import { ProjectPortfolioPage } from "./reports/project-portfolio-page.jsx";
import { HomeOrgSplitReportPage } from "./reports/home-org-split-report-page.jsx";
import { LeaderboardPage } from "./reports/leaderboard-page.jsx";
import { OrgReportPage } from "./reports/org-report-page.jsx";
import { RepoActivityPage } from "./reports/repo-activity-page.jsx";
import { TeamReportPage } from "./reports/team-report-page.jsx";
import { UserReportPage } from "./reports/user-report-page.jsx";
import { IssuesPage } from "./workflow/issues-page.jsx";
import { ReposPage } from "./workflow/repos-page.jsx";
import { TriagePage } from "./workflow/triage-page.jsx";
import { ProjectDetailPage } from "./projects/project-detail-page.jsx";
import { ProductListPage } from "./products/product-list.jsx";
import { ProductDetailPage } from "./products/product-detail-page.jsx";
import { PartiesAdminPage } from "./products/parties/parties-admin.jsx";
import { CustomerDetailPage } from "./products/parties/customer-detail.jsx";
import { RunDetail } from "./products/runs/run-detail.jsx";
import { UnitDetailPage } from "./products/unit-detail-page.jsx";
import { RmaListPage } from "./products/rma/rma-list.jsx";
import { RmaDetailPage } from "./products/rma/rma-detail.jsx";
import {
  accountTabOf,
  adminTabOf,
  customerDetailIdOf,
  directoryTabOf,
  isKnownRoute,
  isLoginRoute,
  productDetailIdOf,
  projectDetailIdOf,
  reportTabOf,
  rmaDetailIdOf,
  runDetailIdOf,
  sectionOf,
  unitDetailIdOf,
  useRoute,
  workflowTabOf,
  type AccountTab,
  type AdminTab,
  type DirectoryTab,
  type ReportTab,
  type WorkflowTab,
} from "./routes.js";

export function App(): JSX.Element {
  return (
    <AuthProvider client={api.client} strategy={authStrategy}>
      <Router />
    </AuthProvider>
  );
}

function Router(): JSX.Element {
  const route = useRoute();
  const auth = useAuth();

  if (isLoginRoute(route)) {
    if (auth.status === "authenticated") {
      return (
        <ProtectedRoute>
          <AppShell>
            <ErrorBoundary scope="reports" resetKey={route}>
              <SectionPane section="reports" route={route} />
            </ErrorBoundary>
          </AppShell>
        </ProtectedRoute>
      );
    }
    return <LoginPage />;
  }

  if (!isKnownRoute(route)) {
    return (
      <ProtectedRoute>
        <AppShell>
          <ErrorBoundary scope="this page" resetKey={route}>
            <NotFoundPage />
          </ErrorBoundary>
        </AppShell>
      </ProtectedRoute>
    );
  }

  const section = sectionOf(route);
  const protectedSection = section === "login" ? "reports" : section;

  // Role-tier guard (DOCS/SCOPE-AUTHZ-USERS.md §4.2). The backend
  // already 403s these routes; this redirect is purely UX so a typed
  // URL or stale link doesn't render a permission-denied flash. The
  // tiers mirror the sidebar gating in `app-shell.tsx`.
  const SECTION_MIN_ROLE: Record<typeof protectedSection, "reader" | "writer" | "admin"> = {
    reports: "reader",
    directory: "reader",
    account: "reader",
    projects: "reader",
    products: "reader",
    manufacturing: "reader",
    customers: "reader",
    runs: "reader",
    units: "reader",
    rma: "reader",
    workflow: "writer",
    admin: "admin",
  };
  const ROLE_RANK_ROUTER: Record<"reader" | "writer" | "admin", number> = {
    reader: 0,
    writer: 1,
    admin: 2,
  };
  const userRole = (auth.user?.role ?? "reader") as
    | "reader"
    | "writer"
    | "admin";
  const needed = SECTION_MIN_ROLE[protectedSection];
  if (
    auth.status === "authenticated" &&
    ROLE_RANK_ROUTER[userRole] < ROLE_RANK_ROUTER[needed]
  ) {
    // Redirect to the universal landing — back-end is the authority
    // on every page, so a flash to `#/reports` is enough to keep the
    // shell coherent without rendering an empty 403.
    if (typeof window !== "undefined" && window.location.hash !== "#/reports") {
      window.location.hash = "#/reports";
    }
    return (
      <ProtectedRoute>
        <AppShell>
          <ErrorBoundary scope="reports" resetKey="redirect">
            <SectionPane section="reports" route="#/reports" />
          </ErrorBoundary>
        </AppShell>
      </ProtectedRoute>
    );
  }

  return (
    <ProtectedRoute>
      <AppShell>
        <ErrorBoundary scope={protectedSection} resetKey={route}>
          <SectionPane section={protectedSection} route={route} />
        </ErrorBoundary>
      </AppShell>
    </ProtectedRoute>
  );
}

function SectionPane({
  section,
  route,
}: {
  section:
    | "reports"
    | "directory"
    | "admin"
    | "workflow"
    | "projects"
    | "products"
    | "manufacturing"
    | "customers"
    | "runs"
    | "units"
    | "rma"
    | "account";
  route: string;
}): JSX.Element {
  switch (section) {
    case "reports":
      return <ReportsPane tab={reportTabOf(route)} />;
    case "directory":
      return <DirectoryPane tab={directoryTabOf(route)} />;
    case "admin":
      return <AdminPane tab={adminTabOf(route)} />;
    case "workflow":
      return <WorkflowPane tab={workflowTabOf(route)} />;
    case "projects": {
      // `#/projects` now lands on the Portfolio report — the
      // standalone `ProjectsPage` list was retired (see
      // `linear-projects-v2.md` §6.1; the four sidebar sub-items
      // already drive `?status=` filters against the same page).
      const id = projectDetailIdOf(route);
      return id ? <ProjectDetailPage projectId={id} /> : <ProjectPortfolioPage />;
    }
    case "products": {
      const id = productDetailIdOf(route);
      return id ? <ProductDetailPage productId={id} /> : <ProductListPage />;
    }
    case "manufacturing":
      // P1 ships a single manufacturing surface: the parties admin.
      return <PartiesAdminPage />;
    case "customers": {
      const id = customerDetailIdOf(route);
      // A bare `#/customers` with no id falls back to the parties
      // admin (customers tab) — the canonical list surface.
      return id ? (
        <CustomerDetailPage customerId={id} />
      ) : (
        <PartiesAdminPage />
      );
    }
    case "runs": {
      const id = runDetailIdOf(route);
      // A bare `#/runs` with no id has no list surface of its own
      // (runs are reached from the product detail Runs tab) — fall
      // back to the products hub.
      return id ? <RunDetail runId={id} /> : <ProductListPage />;
    }
    case "units": {
      const id = unitDetailIdOf(route);
      return id ? <UnitDetailPage unitId={id} /> : <ProductListPage />;
    }
    case "rma": {
      const id = rmaDetailIdOf(route);
      return id ? <RmaDetailPage rmaId={id} /> : <RmaListPage />;
    }
    case "account":
      return <AccountPane tab={accountTabOf(route)} />;
  }
}

function AccountPane({ tab }: { tab: AccountTab }): JSX.Element {
  switch (tab) {
    case "identities":
      return <IdentitiesPage />;
    case "settings":
      return <SettingsPage />;
    case "tags":
      return <TagsPage />;
  }
}

function WorkflowPane({ tab }: { tab: WorkflowTab }): JSX.Element {
  switch (tab) {
    case "triage":
      return <TriagePage />;
    case "repos":
      return <ReposPage />;
    case "issues":
      return <IssuesPage />;
  }
}

function ReportsPane({ tab }: { tab: ReportTab }): JSX.Element {
  switch (tab) {
    case "user":
      return <UserReportPage />;
    case "team":
      return <TeamReportPage />;
    case "org":
      return <OrgReportPage />;
    case "home-org-split":
      return <HomeOrgSplitReportPage />;
    case "leaderboard":
      return <LeaderboardPage />;
    case "repo-activity":
      return <RepoActivityPage />;
    case "freshness":
      return <FreshnessPage />;
    case "projects":
      return <ProjectPortfolioPage />;
  }
}

function DirectoryPane({ tab }: { tab: DirectoryTab }): JSX.Element {
  switch (tab) {
    case "users":
      return <UsersPage />;
    case "orgs":
      return <OrgsPage />;
    case "teams":
      return <TeamsPage />;
    case "home-org":
      return <HomeOrgPage />;
  }
}

function AdminPane({ tab }: { tab: AdminTab }): JSX.Element {
  switch (tab) {
    case "runs":
      return <RunsPage />;
    case "refresh":
      return <RefreshPage />;
    case "users":
      return <AdminUsersPage />;
  }
}