Application Shell & Navigation
Relevant source files
The following files were used as context for generating this wiki page:
The Application Shell and Navigation system in RDM Digital serves as the primary structural framework for the TAMV OS. It provides a consistent interface for managing territorial identity, digital twins, and federated governance modules. The shell acts as a Single Page Application (SPA) wrapper that orchestrates the layout, routing, and state of global navigation elements.
The architecture is designed to support a multi-domain platform, transitioning from legacy paths to a unified /app/* structure. This shell ensures that critical operational views—such as the Command Center, Repository, and Territorial Map—remain accessible while maintaining global components like sidebars and breadcrumbs across different modules.
Sources: README.md:32-34, src/App.tsx:37-51
Core Architecture and Layout
The application utilizes a hierarchical layout where AppShell acts as the primary layout component for authenticated and operational routes. It integrates a sidebar for primary navigation and a command bar for utility actions.
The AppShell Component
The AppShell component defines the global structure, wrapping the Outlet from react-router-dom within a main content area. It includes high-level error handling via an ErrorBoundary and provides a loading state via Suspense for lazy-loaded modules.
The diagram above shows the composition of the AppShell and how it manages the primary UI regions.
Sources: src/app/shell/AppShell.tsx:21-34
Shell Components Summary
| Component | Responsibility | Source |
|---|---|---|
AppShell | Global layout wrapper for /app routes. | src/app/shell/AppShell.tsx |
EnterpriseSidebar | Primary navigation drawer for switching between federated modules. | src/app/shell/AppShell.tsx:23 |
TopCommandBar | Global search and utility actions. | src/app/shell/AppShell.tsx:25 |
Breadcrumbs | Visual path tracking for the user's current location. | src/app/shell/AppShell.tsx:26 |
ErrorBoundary | Catches runtime errors within the content area to prevent total app crashes. | src/app/shell/AppShell.tsx:28 |
Routing and Navigation Logic
The application implements a robust routing system using react-router-dom v6. It features extensive redirection logic to migrate legacy standalone paths (e.g., /dashboard, /map) into the unified /app shell.
Route Mapping
Navigation is divided into four main categories: legacy redirects, authentication, operational shell routes, and public content.
This flowchart illustrates how incoming requests are routed through the application logic.
Sources: src/App.tsx:16-55
Key Operational Routes
The following modules are accessible via the AppShell:
- Dashboard (
/app/dashboard): The central Command Center. - Territory (
/app/territory): Digital twin and mapping interface. - DevOps (
/app/devops): Evolutionary repository management. - Economy (
/app/economy): Sovereign market (MSR/Stripe integration). - Isabella (
/app/isabella): AI HitL multi-agent orchestrator.
Sources: src/App.tsx:38-51
Navigation UI Components
Sidebar System
The sidebar is implemented using a provider-pattern approach (SidebarProvider) that manages the expanded/collapsed state and mobile responsiveness.
- State Management: Uses cookies (
sidebar_state) to persist the user's preference for sidebar visibility across sessions. - Keyboard Shortcuts: Supports
Ctrl/Cmd + Bto toggle the sidebar visibility. - Responsiveness: Automatically switches to a
Sheet(drawer) component on mobile devices.
Sources: src/components/ui/sidebar.tsx:49-62, src/components/ui/sidebar.tsx:82-94
Navigation State and Signals
Specific modules, such as the TourismPlatform, implement their own internal navigation (toolbar) and status signals.
The sequence diagram shows how internal module navigation updates the active view within a platform module.
Sources: src/components/tourism/tourism-platform.tsx:159-173
Technical Implementation Details
Lazy Loading and Suspense
To optimize initial load times, all major page components are imported using React.lazy. The AppShell provides a specific Fallback component that displays a spinning loader with a "Cargando módulo" label during asynchronous transitions.
Sources: src/App.tsx:6-13, src/app/shell/AppShell.tsx:10-18
Redirection Table
The following table highlights the mapping from legacy or shorthand URLs to the primary application shell:
| Input Path | Destination Path | Purpose |
|---|---|---|
/dashboard | /app/dashboard | Unify operational views |
/map | /app/territory | Align with territorial domain |
/mercado | /app/economy | Transition to federated economy |
/repositorio | /app/devops | DevOps integration |
Sources: src/App.tsx:18-28
The application shell and navigation system provide the structural foundation for RDM Digital, ensuring that complex federated modules—from AI governance to territorial mapping—are unified within a consistent, responsive, and resilient user interface.