📖 User Guide (English)

← Back to Login

Admin Dashboard & Backoffice User Guide

Welcome to the comprehensive e-commerce management system!

🎯 What is this system?

The Admin Dashboard & Backoffice is a comprehensive platform for managing online stores. Designed to enable store managers and staff to efficiently manage their business with a modern, user-friendly interface and robust security system.

✨ What can this system do?

For Super Admin

  • 📊 Business Overview - Track sales, revenue, and statistics in real-time
  • 📦 Product Management - Add, edit, delete products, set prices, and manage inventory
  • 🛒 Order Management - Track orders, update status, and manage customer data
  • 👥 User Management - Add/remove users, assign permissions, and control access
  • 🔐 Permission Management - Create roles and assign permissions
  • 📝 Form Builder - Design custom forms like surveys and applications
  • 📈 Data Analytics - View sales reports, revenue trends, and best-selling products

    • For Admin

  • 📊 Manage storefront and statistics
  • 📦 Manage products and inventory
  • 🛒 Handle orders
  • 📝 Create and manage forms
  • 👁️ View user information

    • For Regular Users

  • 👀 View products and orders
  • 📝 Fill out and submit forms
  • 📋 Check form submission history

    • 🚀 How to Get Started?

    Step 1: Login

    Open the website and you'll see the Login page. Use test accounts according to the permissions you need:

    🔐 Test Accounts

    🔑 Super Admin Account:

  • Email: superadmin@example.com
  • Password: admin123
  • Permissions: Full system control including role and permission management

    • 🛡️ Admin Account:

  • Email: admin@example.com
  • Password: admin123
  • Permissions: Manage products, orders, and forms (except permission management)

    • 👤 Regular User Account:

  • Email: john.doe@example.com
  • Password: user1234
  • Permissions: View data and fill out forms

    • Step 2: Explore the System

    After logging in, you'll see the left sidebar menu and main Dashboard. Try clicking different menus to explore features according to your permissions.

    📱 System Pages Overview

    🏠 Dashboard

    Purpose: View business overview and key statistics
  • Summary Cards: Display total revenue, orders, users, and products
  • Revenue Chart: View revenue trends for the past 30 days
  • Orders Chart: Track daily order counts
  • Recent List: See latest orders in real-time

    • How to use:

  • Click on cards to see more details
  • Hover over charts to see specific values

    • ---

    📦 Product Management - Products

    Purpose: View and manage all store products

    How to use: 1. View Product List: Scroll through all products in the table 2. Search Products: Type product name in the search box 3. Filter Products: Select "Active" or "Inactive" status 4. Add New Product (Admin only): - Click "+ Add Product" button - Fill in: Name, Description, Price, Stock, Category - Click "Create Product" 5. Edit Product (Admin): Click "Edit" button on the product row 6. Delete Product (Admin): Click "Delete" button and confirm

    ---

    🛒 Order Management - Orders

    Purpose: Track and manage customer orders

    How to use: 1. View Order List: See all orders with status 2. Filter by Status: Select Pending, Processing, Shipped, or Delivered 3. View Details: Click on an order to see items and customer information 4. Update Status (Admin): Change order status according to shipment

    Order Statuses:

  • 🟡 Pending (Awaiting processing)
  • 🔵 Processing (Being prepared)
  • 🟣 Shipped (On delivery)
  • 🟢 Delivered (Received)
  • 🔴 Cancelled (Cancelled)

    • ---

    👥 User Management - Users

    Purpose: View and manage user accounts (Admin and Super Admin only)

    How to use: 1. View User List: See all users with their roles 2. View Details: See order count and status for each user 3. Assign Roles (Super Admin): Change user roles

    ---

    🔐 Role Management - Roles

    Purpose: Create and configure roles with permissions (Super Admin only)

    How to use: 1. View Existing Roles: See Super Admin, Admin, User, and custom roles 2. Create New Role: - Click "+ Create Role" - Name the role (e.g., "Sales Manager", "Warehouse Staff") - Select desired permissions for this role - Save 3. View Permissions: Click on a role to see all its permissions 4. Edit/Delete: Manage custom roles (system roles cannot be deleted)

    Note: System roles (Super Admin, Admin, User) cannot be deleted for security reasons

    ---

    🔑 Permission Management - Permissions

    Purpose: View all system permissions (Super Admin only)

    How to use:

  • View all permissions organized by category
  • Understand which features each permission controls

    • Permission Naming Pattern:

  • product.create - Create products
  • product.read - View products
  • product.update - Edit products
  • product.delete - Delete products
  • menu.dashboard.view - Access Dashboard menu

    • ---

    📝 Form Management - Forms (Admin only)

    Purpose: Create and manage custom forms

    How to use: 1. View Form List: See all forms with status and response count 2. Create New Form: - Click "+ Create Form" - Set form name and description - Add fields (Text, Textarea, Number, Select, Date) - Mark required fields - Click "Create Form" 3. Edit Form: Click "Edit" to modify the form 4. View Responses: Click "View Submissions" to see who responded 5. Toggle Status: Change status to Active/Inactive

    Example Forms:

  • Customer satisfaction survey
  • Job application
  • Contact form
  • Opinion poll

    • ---

    📋 My Forms - My Forms (For everyone)

    Purpose: Fill out and submit forms

    How to use: 1. View Available Forms: See all forms that can be filled out 2. Fill Out Form: - Click "Fill Form" on desired form - Fill in the fields - System will alert if required fields are empty - Click "Submit" when complete 3. View History: See previously submitted forms

    ---

    📈 Reports & Analytics - Analytics

    Purpose: View reports and business insights

    Available Data:

  • 📊 Daily revenue chart (last 30 days)
  • 🛒 Order statistics by status
  • 👥 New customer chart
  • 🏆 Top-selling products
  • 🕐 Recent customer activity

    • How to use:

  • Scroll through charts and tables
  • Hover over charts for details
  • Use data for sales planning and inventory management

    • ---

    💡 Usage Tips

    For New Users

    1. Start with Dashboard: Always check the overview first 2. Try Different Accounts: Login with different accounts to see permission differences 3. Try Form Builder: If you're an Admin, try using the Form Builder 4. Explore Analytics: See how data is presented

    Efficient Usage

  • 🔍 Use Search: Search for products instead of scrolling
  • 🎯 Use Filters: Filter data to see what you need
  • 📊 Check Dashboard Often: Track important statistics
  • 🔐 Test Permissions: Try logging in with different roles to understand RBAC

    • Security

  • 🔒 System uses JWT Authentication
  • 🔐 Passwords encrypted with bcrypt
  • 👮 Strict RBAC permission system
  • ⏱️ Session expires in 8 hours (need to login again)

    • ---

    ❓ Frequently Asked Questions

    Q: How do I change my password? A: This feature is not available in the demo system, but will be included in production

    Q: Why can't I see some menus? A: Your account doesn't have access. Try logging in with Admin or Super Admin account

    Q: Will my changes be saved? A: Data is saved in the database, but this is a demo system and data may be reset

    Q: How do I create a new role? A: You must be a Super Admin. Go to "Roles" menu and click "Create Role"

    Q: Can I edit a form after creating it? A: Yes, go to "Forms" and click "Edit" on the desired form

    Q: Can I recover a deleted product? A: This demo uses hard delete, but production systems should implement soft delete

    ---

    🎮 Try These!

    For Super Admin:

    1. ✅ Login with superadmin@example.com 2. ✅ View Dashboard and statistics 3. ✅ Go to "Roles" and create a new role named "Sales Manager" 4. ✅ Assign permissions related to products and orders 5. ✅ Go to "Products" and add a new product 6. ✅ Go to "Forms" and create a satisfaction survey 7. ✅ Check "Analytics" to analyze data

    For Admin:

    1. ✅ Login with admin@example.com 2. ✅ View all products and try searching 3. ✅ Add a new product named "Test Product" 4. ✅ Edit product price 5. ✅ View orders and their status 6. ✅ Create a contact form 7. ✅ See who has filled out forms

    For User:

    1. ✅ Login with john.doe@example.com 2. ✅ View Dashboard (see only permitted sections) 3. ✅ View all products 4. ✅ Go to "My Forms" and fill out a form 5. ✅ Check your form submission history

    ---

    🌟 Things to Notice

    RBAC System (Role-Based Access Control)

  • Super Admin sees all menus including Roles and Permissions
  • Admin sees almost all menus except permission management
  • User sees limited menus and cannot edit data

    • UI/UX Design

  • 🎨 Beautiful and modern color theme
  • 📱 Responsive design for all screens
  • ⚡ Fast loading and smooth animations
  • 🎯 Easy to use and intuitive

    • Sample Data

  • Over 10 sample products
  • Multiple sample orders with various statuses
  • Multiple test users with different roles
  • 30 days of historical statistics

    • ---

    🎯 Summary

    This system is a complete example of a modern Admin Dashboard, designed to be:

  • ✅ Easy to use, not complicated
  • ✅ Secure with permission control system
  • ✅ Feature-complete for full store management
  • ✅ Scalable and customizable
  • ✅ Beautiful data visualization with charts

    • Get started now by logging in with any of the accounts above and explore features to understand how the system works!

    ---

    📞 Additional Information

    For developers who want to install or continue development:

  • Technology: Next.js 15, TypeScript, Prisma, PostgreSQL
  • UI Library: Tailwind CSS 4, Recharts
  • Authentication: JWT + bcrypt

---

✨ Enjoy exploring the system! ✨