Component Library

1. Logic Wrappers (The Brains)

These components are not visible "UI" elements but are crucial for the application's functionality.

<LangWrapper /> Location: Defined in App.jsx, the most critical component in the application. It acts as the Data Provider.

• Responsibility: 1. Reads the :lang URL parameter (e.g., /en or /fr). 2. Loads static data from proceduresdata.json. 3. Hydrates user progress from localStorage (STORAGE_KEY). 4. Generates slugs for clean URLs. 5. Context Provided: Passes procedures, handleStatusChange, and lang down to all child routes via Outlet.

<ErrorBoundary />

Location: Defined in App.jsx A safety net that prevents the entire app from crashing (White Screen of Death) if a single component fails.

• Behavior: Catches JavaScript errors in child components and displays a red error box with the debug message.
• Implementation: Uses a Class Component wrapper (ErrorBoundaryWrapper) because React functional components cannot currently handle componentDidCatch.

2. Page Layout Components

<Hero/>

Location: src/components/Hero.jsx, The landing page header.

• scrollToDocs prop: A function reference to handle the "Frontend Documentation Scrolling Functionality" (FDSF). - Feature: Triggers the smooth scroll if user in home page '\' when the Home button is clicked.

<Dashboard/>

Location: src/components/Dashboard.jsx The main view of the application.

• Role: Displays the grid of procedure cards.
• Props: Receives the full procedures list and the onStatusChange handler.
• FDSF Integration: Contains the ref={frontEndDocSection} to act as the scroll target from the Hero.

<ProcedureDetail />

Location: src/components/ProcedureDetail.jsx The individual view for a specific administrative task.

• Routing: Rendered via <ProcedureDetailRoute> which finds the correct procedure based on the URL slug.
• Role: Displays the detailed info, steps, and tips. It is the only component that renders the full text content from the JSON.

3. Global UI Elements

<NavBar />

Location: src/components/NavBar.jsx, The persistent top navigation bar.

• Features: - Contains the Language Switcher (toggles /en <-> /fr in the URL).

<GlowOverlay />

Location: src/components/GlowOverlay.jsx

• Role: Adds the "premium" feel to the UI.
• Tech: Uses direct DOM manipulation to track the mouse cursor and create a localized radial gradient effect without triggering React re-renders.

4. Routing Structure

The application uses React Router 7 (via react-router-dom) with a specific nested strategy:

/ (Redirects to /en)
├── /:lang (LangWrapper - Provides Data)
│   ├── / (Home: Hero + Dashboard)
│   ├── /procedures (List View)
│   ├── /procedures/procedure/:slug (Detail View)
│   └── /contact
└── * (404 Fallback)