Admin3 Dashboard - Documentation

Table of Contents

1. Overview
2. Features
3. Installation
4. Usage
5. Customization
6. Theme System
7. Components
8. API Integration
9. Deployment
10. Contributing
11. License

Overview

Admin3 is a modern, responsive admin dashboard template developed by LeonXlab. Designed for developers and businesses, it provides a clean, professional interface for building admin panels, CMS systems, and back-office applications.

Key Benefits:

• 🚀 Production-ready template
• 🎨 Customizable design system
• 🌓 Built-in dark/light mode
• 📱 Fully responsive layout
• ⚡ Optimized performance

Features

Core Features

• Modern UI/UX Design

  • Clean, minimalist interface
  • Responsive layout (desktop, tablet, mobile)
  • Accessibility compliant (WCAG 2.1)

• Theme System

  • Light/dark mode toggle
  • System preference detection
  • Persistent theme settings

• Pre-built Pages

  • Dashboard
  • User management
  • Analytics
  • Settings
  • Login/Register

Technical Features

• Frontend Architecture

  • Modular component structure
  • CSS variables for theming
  • Vanilla JavaScript (no framework dependency)
  • Chart.js integration

• Performance

  • Optimized asset loading
  • Minimal dependencies
  • Efficient DOM operations

New Features

• Scouts Section

  • Display scouts in a grid layout with rectangular cards.
  • Each scout card contains details about the scout.

• User Profile Page

  • Separate page for user profile with detailed information.
  • Includes profile picture, contact information, and action buttons.

Installation

Prerequisites

• Node.js (v14+ recommended)
• npm/yarn
• Modern browser (Chrome, Firefox, Edge, Safari)

Installation Steps

1. Clone the repository

   git clone https://github.com/leonxlab/admin3-dashboard.git
   cd admin3-dashboard

2. Install dependencies

   npm install
   # or
   yarn install

3. Development server

   npm run dev
   # or
   yarn dev

4. Production build

   npm run build
   # or
   yarn build

Usage

Basic Structure

admin3-dashboard/
├── assets/          # Static assets
├── css/            # Stylesheets
├── js/             # JavaScript modules
├── pages/          # Application pages
├── index.html      # Main entry point
└── README.md       # Documentation

Starting the Dashboard

1. After installation, open index.html in your browser
2. Default login credentials (for demo):

   Email: admin@example.com
   Password: admin123
   

Navigation

• Sidebar: Main navigation menu
• Topbar: Quick actions and user menu
• Breadcrumbs: Contextual navigation

Customization

Theme Colors

Modify CSS variables in css/theme.css:

:root {
  --primary-color: #3498db;
  --secondary-color: #2ecc71;
  --danger-color: #e74c3c;
  /* ... */
}

Layout Configuration

Edit js/config.js:

const config = {
  sidebar: {
    collapsedWidth: '70px',
    expandedWidth: '250px'
  },
  theme: {
    default: 'system' // 'light' | 'dark' | 'system'
  }
};

Theme System

How it Works

1. Checks for saved user preference in localStorage
2. Falls back to system preference
3. Defaults to light theme

API

// Get current theme
const currentTheme = document.documentElement.getAttribute('data-theme');

// Toggle theme
document.getElementById('themeToggle').click();

// Listen for theme changes
document.addEventListener('themeChanged', (e) => {
  console.log('Theme changed to:', e.detail.theme);
});

Components

Available Components

1. Cards

   • Stat cards
   • Profile cards
   • Graph cards

2. Charts

   • Line charts
   • Bar charts
   • Pie charts

3. Forms

   • Input fields
   • Select dropdowns
   • Checkboxes/radios

4. Tables

   • Sortable columns
   • Pagination
   • Row selection

Component Usage

Example card implementation:

<div class="stat-card">
  <div class="stat-header">
    <span class="stat-title">Total Users</span>
    <div class="stat-icon">
      <i class="fas fa-users"></i>
    </div>
  </div>
  <div class="stat-value">1,024</div>
  <div class="stat-trend trend-up">
    <i class="fas fa-arrow-up"></i>
    <span>12.5% increase</span>
  </div>
</div>

API Integration

Authentication

Example login implementation:

async function login(email, password) {
  const response = await fetch('/api/auth/login', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({ email, password })
  });
  
  if (!response.ok) throw new Error('Login failed');
  return response.json();
}

Data Fetching

Example dashboard data:

async function loadDashboardData() {
  const [users, sales, activities] = await Promise.all([
    fetch('/api/users'),
    fetch('/api/sales'),
    fetch('/api/activities')
  ]);
  
  return {
    users: await users.json(),
    sales: await sales.json(),
    activities: await activities.json()
  };
}

Deployment

Static Hosting

1. Build the project:

   npm run build

2. Deploy the dist/ folder to:

   • Netlify
   • Vercel
   • AWS S3
   • GitHub Pages

Docker Deployment

1. Build the Docker image:

   docker build -t admin3-dashboard .

2. Run the container:

   docker run -p 8080:80 admin3-dashboard

Contributing

We welcome contributions! Please follow these steps:

1. Fork the repository
2. Create a feature branch (git checkout -b feature/your-feature)
3. Commit your changes (git commit -m 'Add some feature')
4. Push to the branch (git push origin feature/your-feature)
5. Open a Pull Request

Coding Standards

• Follow existing code style
• Write meaningful commit messages
• Include documentation for new features
• Test your changes thoroughly

---

LeonXlab
GitHub | Contact