Global Layout & Navigation
Relevant source files
The following files were used as context for generating this wiki page:
The Recoup Admin platform utilizes a centralized layout and navigation system built on Next.js 16 and the App Router. The architecture ensures that shared UI elements, such as headers and provider contexts, are consistently applied across all administrative views while restricting access based on authentication and authorization status.
The navigation system is primarily driven by an administrative dashboard that provides direct access to various modules including sandbox management, login auditing, and AI agent monitoring. Breadcrumb components are used throughout the application to maintain user context and facilitate hierarchical navigation within specific account details and module pages.
Root Layout Architecture
The foundation of the application is the RootLayout, which wraps all pages within a consistent structure. It manages global fonts (Geist Sans and Geist Mono), metadata, and the core DOM structure.
The application shell uses a vertical flexbox layout where the AppHeader remains at the top, and the <main> element expands to fill the remaining screen real estate.
Sources: app/layout.tsx:32-55, README.md:14-25
Global Providers and Styling
The layout incorporates a Providers component to handle shared state and authentication contexts. Styling is managed via Tailwind CSS 4, with global variables defined for both light and dark modes.
Sources: app/layout.tsx:39-41, app/globals.css:3-33
Navigation Systems
Dashboard Navigation
The AdminDashboard serves as the primary navigation hub for authenticated administrators. It utilizes NavButton components to route users to specific functional areas.
| Route | Label | Description |
|---|---|---|
/sandboxes | View Sandboxes | Overview of platform sandboxes and usage. |
/sandboxes/orgs | View Org Commits | Tracking of commits per organization sub-module. |
/privy | View Privy Logins | Audit logs of user sign-ins via Privy. |
/coding | Coding Agent Tags | Monitoring Slack mentions for the Coding Agent. |
/content | View Content Agent | Usage statistics for the Content Agent. |
Sources: components/Home/AdminDashboard.tsx:9-17, components/Home/HomeContent.tsx:36-36
Contextual Breadcrumbs
The platform implements a modular breadcrumb system using Radix UI primitives. This allows for deep navigation tracking, particularly useful in detail views like account task runs.
- BreadcrumbList: An ordered list container for navigation links.
- BreadcrumbItem: Individual nodes within the trail.
- BreadcrumbPage: Represents the current active page (non-clickable).
- BreadcrumbSeparator: Visual divider (defaulting to
ChevronRight).
Sources: components/ui/breadcrumb.tsx:7-80, components/AccountDetail/AccountDetailPage.tsx:29-29
Access Control Flow
Navigation and layout visibility are gated by authentication (via Privy) and authorization (admin role check).
Page-Level Layout Structure
Individual pages follow a standardized layout pattern to ensure visual consistency. This typically includes a maximum width container, a header section with breadcrumbs and titles, and a content section (often containing tables or charts).
- Container:
mx-auto max-w-6xl px-4 py-10is the standard for main content areas. - Header Section: Uses a flex layout to space titles/descriptions against action links (like
ApiDocsLink). - Data Visualization: Charts (via Recharts) and tables (via TanStack Table) are standard for administrative modules.
Sources: components/CodingAgentSlackTags/CodingAgentSlackTagsPage.tsx:28-41, components/PrivyLogins/PrivyLoginsPage.tsx:20-33, components/AccountDetail/AccountDetailPage.tsx:27-35
Summary
The Global Layout & Navigation system provides a secure, consistent environment for platform administration. By combining a centralized RootLayout with dynamic dashboard navigation and contextual breadcrumbs, the system ensures that administrators can efficiently move between high-level overviews and detailed account data while maintaining consistent access control.
Sources: app/layout.tsx, components/Home/AdminDashboard.tsx, README.md