Skip to main content

[Backoffice] Navigation System

Overview​

The backoffice navigation system provides a comprehensive layout for administrators to manage text-to-audio requests. The system features a fixed header, collapsible sidebar navigation, and a main content area.

Key Components:

  • Header: Branding, user info, and top-level navigation
  • Sidebar: Navigation menu tree with status indicators
  • Main Content: Dynamic content area for different sections
  • Footer: System information and quick links

Live Preview​

●Admin Backoffice

Dashboard Overview

Welcome to the MicDots admin dashboard. Monitor and manage all text-to-audio requests from this central hub.

Total Requests

342

↑ 12% from last week

Pending

5

Requires attention

Processing

3

In progress

Completed Today

12

↑ 8% from yesterday

Recent Activity

REQ-001234 - Request created by john@example.com 2 hours ago

REQ-001233 - Status updated to Processing 3 hours ago

REQ-001232 - Audio file uploaded successfully 5 hours ago

REQ-001231 - Request completed 6 hours ago

MD

MicDots Admin

© 2025 MicDots. All rights reserved.

System Operational

API Endpoints​

This page uses the following API endpoint:

Get Current User Profile​

Endpoint: GET /api/v1/me

Authentication: Required (Bearer token)

Role Required: admin role for accessing the backoffice

Description: Retrieves current admin user profile (email, name, roles, account details) displayed in the header.

Hierarchy​

The navigation tree follows a simple structure:

Dashboard (Active)
Requests
Users
Analytics
Settings

Active State: Highlighted with gradient background to indicate current page.

Hover State: Slight background color change with smooth transition.

Component Breakdown​

Header Component​

Sticky header displaying admin information, user email, and logout controls. Branding with logo and title; all navigation is handled through the sidebar menu.

Responsive sidebar with navigation tree and system status indicator.

Sections (top to bottom):

  1. Navigation Tree - Primary navigation with hierarchy
  2. System Status - Service health indicator (sticky at bottom)

Content Area​

Responsive main content area displaying page headers, stats cards, data tables, and action buttons.

Footer displaying branding, copyright notice, and system operational status indicator.

Active State Management: Only one navigation item is active at a time, reflecting the current page. Active state persists during navigation.