mqtt-broker-stack/frontend/src/App.tsx

import { useState } from "react";
import { NavLink, Navigate, Route, Routes, useLocation } from "react-router-dom";
import { useQuery } from "@tanstack/react-query";
import { useAuth } from "./auth";
import { api, type SystemStatus } from "./api";
import { LoginPage } from "./pages/Login";
import { ClientsPage } from "./pages/Clients";
import { RolesPage } from "./pages/Roles";
import { GroupsPage } from "./pages/Groups";
import { BrokerConfigPage } from "./pages/BrokerConfig";
import { CertificatesPage } from "./pages/Certificates";
import { SystemPage } from "./pages/System";
import { StatusPage } from "./pages/Status";
import { TopicExplorerPage } from "./pages/TopicExplorer";

// Navigation structure per spec section 57. Entries with a `to` route are
// implemented; entries without one are planned pages, rendered greyed out
// so the full target information architecture stays visible.
const NAV_SECTIONS: {
  title: string;
  items: { label: string; to?: string; hint?: string }[];
}[] = [
  {
    title: "Broker",
    items: [
      { label: "Status", to: "/broker/status" },
      { label: "Configuration", to: "/broker" },
      { label: "Listeners", to: "/broker#listeners" },
      { label: "Bridges", hint: "Bridge management (post-MVP)" },
      { label: "Revisions", to: "/broker#revisions" },
    ],
  },
  {
    title: "MQTT Security",
    items: [
      { label: "Clients", to: "/clients" },
      { label: "Groups", to: "/groups" },
      { label: "Roles", to: "/roles" },
      { label: "ACL Simulator", hint: "ACL simulator (post-MVP)" },
      { label: "Authentication", hint: "Auth mechanism configuration (Release 2)" },
    ],
  },
  {
    title: "Certificates",
    items: [
      { label: "Authorities", to: "/certificates" },
      { label: "Server Certificates", to: "/certificates" },
      { label: "Client Certificates", to: "/certificates#client-certificates" },
      { label: "CSRs", hint: "CSR signing (Release 2, later)" },
      { label: "Revocations", hint: "CRL management (Release 2, later)" },
    ],
  },
  {
    title: "Tools",
    items: [
      { label: "Topic Explorer", to: "/topics" },
      { label: "Connection Test", hint: "Connectivity tester (post-MVP)" },
      { label: "Client Provisioning", hint: "Provisioning wizard (post-MVP)" },
    ],
  },
  {
    title: "Administration",
    items: [
      { label: "Users", hint: "User management page (Release 3)" },
      { label: "Roles", hint: "Management roles admin (Release 3)" },
      { label: "Audit Log", hint: "Audit viewer (Release 3)" },
      { label: "Backup", hint: "Backup/restore (Release 3)" },
      { label: "System", to: "/system" },
    ],
  },
];

function RestartIndicator() {
  const { data } = useQuery({
    queryKey: ["system-status"],
    queryFn: () => api.get<SystemStatus>("/system/status"),
    refetchInterval: 15000,
  });
  if (!data?.restart_required) return null;
  return (
    <NavLink to="/system" className="restart-needed">
      ⚠ Restart needed — listener changes are pending
    </NavLink>
  );
}

// Hash-aware active matching: an item is active only when BOTH its path
// AND its hash (if any) match the current location. NavLink's default
// prefix matching lights up every /broker* item on /broker/status, and
// hash items (#listeners, #revisions) all match on pathname alone.
function isItemActive(
  to: string,
  location: { pathname: string; hash: string },
): boolean {
  const [path, hash] = to.split("#");
  if (path !== location.pathname) return false;
  return hash ? location.hash === `#${hash}` : location.hash === "";
}

function Layout({ children }: { children: React.ReactNode }) {
  const { session, logout } = useAuth();
  const location = useLocation();
  // Exactly ONE group is open at a time (null = all closed). The group
  // containing the ACTIVE page auto-opens, so navigation (including the
  // restart-needed indicator link) always reveals its section.
  const [openSection, setOpenSection] = useState<string | null>(null);

  const activeSection = NAV_SECTIONS.find((section) =>
    section.items.some(
      (item) => item.to && isItemActive(item.to, location),
    ),
  );

  return (
    <div className="layout">
      <aside className="sidebar">
        <h1>MQTT Management</h1>
        <RestartIndicator />
        <nav>
          {NAV_SECTIONS.map((section) => {
            const isActive = activeSection?.title === section.title;
            const isOpen =
              openSection === section.title ||
              (isActive && openSection === null);
            return (
              <div
                key={section.title}
                className={`nav-section${isOpen ? " open" : ""}`}
              >
                <button
                  onClick={() =>
                    setOpenSection(
                      openSection === section.title ? null : section.title,
                    )
                  }
                  aria-expanded={isOpen}
                >
                  {section.title}
                  <span className="chevron">▸</span>
                </button>
                <div className="nav-items">
                  <div>
                    {section.items.map((item) =>
                      item.to ? (
                        <NavLink
                          key={item.label}
                          to={item.to}
                          end
                          // Full control of the active class: NavLink's
                          // own prefix matching would mark every /broker*
                          // item active on /broker/status.
                          className={() =>
                            isItemActive(item.to!, location)
                              ? "active"
                              : ""
                          }
                        >
                          {item.label}
                        </NavLink>
                      ) : (
                        <button
                          key={item.label}
                          className="nav-disabled"
                          disabled
                          title={item.hint}
                        >
                          {item.label}
                        </button>
                      ),
                    )}
                  </div>
                </div>
              </div>
            );
          })}
        </nav>
        <p style={{ marginTop: "2rem", fontSize: "0.8rem", opacity: 0.7 }}>
          {session?.username} ({session?.role})
        </p>
        <button onClick={() => void logout()}>Sign out</button>
      </aside>
      <main className="content">{children}</main>
    </div>
  );
}

function Protected({ children }: { children: React.ReactNode }) {
  const { session, loading } = useAuth();
  const location = useLocation();
  if (loading) return <p>Loading…</p>;
  if (!session) {
    // Remember the guarded route so Login can return here after sign-in.
    return <Navigate to="/login" replace state={{ from: location.pathname }} />;
  }
  return <Layout>{children}</Layout>;
}

export function App() {
  return (
    <Routes>
      <Route path="/login" element={<LoginPage />} />
      <Route
        path="/clients"
        element={
          <Protected>
            <ClientsPage />
          </Protected>
        }
      />
      <Route
        path="/groups"
        element={
          <Protected>
            <GroupsPage />
          </Protected>
        }
      />
      <Route
        path="/roles"
        element={
          <Protected>
            <RolesPage />
          </Protected>
        }
      />
      <Route
        path="/broker"
        element={
          <Protected>
            <BrokerConfigPage />
          </Protected>
        }
      />
      <Route
        path="/broker/status"
        element={
          <Protected>
            <StatusPage />
          </Protected>
        }
      />
      <Route
        path="/certificates"
        element={
          <Protected>
            <CertificatesPage />
          </Protected>
        }
      />
      <Route
        path="/system"
        element={
          <Protected>
            <SystemPage />
          </Protected>
        }
      />
      <Route
        path="/topics"
        element={
          <Protected>
            <TopicExplorerPage />
          </Protected>
        }
      />
      <Route path="/" element={<Navigate to="/clients" replace />} />
    </Routes>
  );
}