Home Admin Dashboard UI/UX MCT Admin Dashboard Using HTML, CSS & Js – Dark...

MCT Admin Dashboard Using HTML, CSS & Js – Dark UI

Share

Create a modern and professional MCT Admin Dashboard using HTML, CSS, and JavaScript. This responsive admin dashboard features a beautiful dark theme, clean layout, interactive navigation, analytics cards, revenue charts, recent activity, and order management.

The dashboard is designed for developers who want to build modern admin panels, management systems, and business analytics interfaces.

Dashboard Preview

The MCT Admin Dashboard features a professional dark UI with a modern purple accent color, responsive sidebar, and organized content sections.

Main Features

  • Modern Dark UI: Clean dark background with stylish purple accents.
  • Responsive Sidebar: Navigation menu for desktop, tablet, and mobile devices.
  • Dashboard Overview: Display important business statistics.
  • Statistics Cards: Total customers, products, orders, and revenue.
  • Management Shortcuts: Quick access to customers, products, orders, and analytics.
  • Revenue Overview: Visualize monthly revenue using chart-style bars.
  • Recent Activity: Display recent orders, customer registrations, and payments.
  • Recent Orders: Show order IDs, customer names, dates, amounts, and statuses.
  • Messages & Notifications: Display notification counts and updates.
  • Profile Dropdown: Access administrator profile options.
  • Responsive Design: Adapt the dashboard layout to different screen sizes.

Full Code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MCT Admin Dashboard Code By Mycodingtutorial</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">

<style>
:root{
--bg:#080b14;
--side:#0c101c;
--panel:#111827;
--panel2:#151e30;
--border:#222d40;
--text:#f1f5ff;
--muted:#8995aa;
--primary:#8b5cf6;
--blue:#438cff;
--green:#20c997;
--red:#ff637d;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:Inter,sans-serif;background:var(--bg);color:var(--text)}
button,input,select{font:inherit}
button{cursor:pointer}
.sidebar{
position:fixed;top:0;left:0;width:255px;height:100vh;
background:var(--side);border-right:1px solid var(--border);
padding:24px 16px;overflow-y:auto;z-index:1000;transition:.3s
}
.logo{display:flex;align-items:center;gap:12px;padding:0 10px 30px;font-size:21px;font-weight:800}
.logo-icon{width:39px;height:39px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg,#8b5cf6,#438cff)}
.menu-label{color:#64748b;font-size:10px;font-weight:800;letter-spacing:1.3px;padding:17px 12px 10px}
.nav-link{
width:100%;display:flex;align-items:center;gap:13px;padding:13px 14px;
border:0;border-radius:9px;background:transparent;color:#9aa8bd;
font-size:13px;font-weight:600;text-align:left;margin-bottom:5px;transition:.2s
}
.nav-link i{width:19px}
.nav-link:hover,.nav-link.active{color:white;background:linear-gradient(100deg,#703eea35,#438cff20)}
.nav-link.active{border-left:3px solid var(--primary)}
.count{margin-left:auto;background:#713ef0;padding:3px 7px;border-radius:20px;font-size:10px;color:white}
.sidebar-bottom{margin-top:25px;padding-top:18px;border-top:1px solid var(--border)}
.main{margin-left:255px;min-height:100vh;padding:0 30px 35px}
.topbar{height:85px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);gap:15px}
.top-left{display:flex;align-items:center;gap:15px}
.mobile-toggle{display:none;border:0;background:var(--panel);color:white;font-size:19px;padding:10px;border-radius:8px}
.page-heading{font-size:20px;font-weight:700}
.breadcrumb{font-size:11px;color:var(--muted);margin-top:5px}
.top-actions{display:flex;align-items:center;gap:12px}
.top-icon{position:relative;width:39px;height:39px;border-radius:10px;background:var(--panel);border:1px solid var(--border);color:#b6c1d3}
.dot{position:absolute;top:7px;right:8px;width:7px;height:7px;border-radius:50%;background:var(--red)}
.profile{position:relative}
.profile-btn{display:flex;align-items:center;gap:10px;background:transparent;border:0;color:white}
.avatar{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,#8b5cf6,#438cff);display:grid;place-items:center;font-weight:700}
.profile-name{font-size:12px;font-weight:700}
.profile-name small{display:block;color:var(--muted);margin-top:4px;font-size:10px}
.dropdown{display:none;position:absolute;right:0;top:50px;width:185px;background:#151e30;border:1px solid var(--border);border-radius:10px;padding:8px;z-index:20;box-shadow:0 15px 35px #0008}
.dropdown.show{display:block}
.dropdown button{width:100%;padding:11px;border:0;background:transparent;color:#cbd5e1;text-align:left;border-radius:6px;font-size:12px}
.dropdown button:hover{background:#26334a}
.page{display:none;padding-top:30px;animation:fade .25s ease}
.page.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
.welcome{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:25px}
.welcome h2{font-size:23px;margin-bottom:8px}
.welcome p{color:var(--muted);font-size:13px}
.primary-btn,.secondary-btn,.danger-btn{border:0;padding:11px 16px;border-radius:8px;font-size:12px;font-weight:700;color:white}
.primary-btn{background:linear-gradient(110deg,#8b5cf6,#526df6)}
.secondary-btn{background:#26334a}
.danger-btn{background:#d9435c}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:17px;margin-bottom:22px}
.stat-card,.panel{background:var(--panel);border:1px solid var(--border);border-radius:12px}
.stat-card{padding:20px}
.stat-top{display:flex;align-items:center;justify-content:space-between}
.stat-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:10px;font-size:17px}
.purple{background:#8b5cf625;color:#a78bfa}
.blue{background:#438cff25;color:#60a5fa}
.green{background:#20c99725;color:#34d399}
.orange{background:#f59e0b25;color:#fbbf24}
.stat-card h3{font-size:25px;margin:18px 0 7px}
.stat-card p{font-size:12px;color:var(--muted)}
.stat-change{font-size:11px;color:#34d399;margin-top:12px}
.content-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:18px;margin-bottom:20px}
.panel{padding:20px;min-width:0}
.panel-header{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:20px}
.panel-header h3{font-size:14px}
.panel-header span{color:var(--muted);font-size:11px}
.chart{height:220px;display:flex;align-items:end;gap:12px;border-bottom:1px solid var(--border);padding:15px 5px 0}
.chart-col{flex:1;height:100%;display:flex;align-items:end;justify-content:center;position:relative}
.bar{width:65%;max-width:36px;border-radius:5px 5px 0 0;background:linear-gradient(180deg,#8b5cf6,#438cff55);min-height:8px}
.chart-labels{display:flex;justify-content:space-around;color:var(--muted);font-size:10px;padding-top:12px}
.activity{display:flex;gap:12px;padding:13px 0;border-bottom:1px solid var(--border)}
.activity:last-child{border:0}
.activity-icon{width:35px;height:35px;border-radius:9px;display:grid;place-items:center;background:#8b5cf625;color:#a78bfa;flex-shrink:0}
.activity strong{font-size:12px;display:block;margin-bottom:5px}
.activity small{font-size:10px;color:var(--muted)}
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;min-width:600px}
th{text-align:left;font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:#8795aa;background:#151e30;padding:14px 12px}
td{font-size:12px;padding:15px 12px;border-bottom:1px solid var(--border);color:#cbd5e1}
tr:last-child td{border-bottom:0}
.status{padding:5px 9px;border-radius:20px;font-size:10px;font-weight:700}
.completed{background:#20c99720;color:#34d399}
.pending{background:#f59e0b20;color:#fbbf24}
.cancelled{background:#ff637d20;color:#ff8296}
.table-user{display:flex;align-items:center;gap:9px}
.small-avatar{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#293b62;color:#a9c4ff;font-size:11px;font-weight:700}
.search-box{background:var(--panel2);border:1px solid var(--border);border-radius:8px;padding:10px 12px;color:var(--text);font-size:12px;outline:none;width:230px}
.search-box:focus,input:focus,select:focus{border-color:var(--primary)}
.toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:18px;flex-wrap:wrap}
.toolbar-left,.toolbar-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
select,input,.form-control{background:var(--panel2);border:1px solid var(--border);border-radius:8px;padding:11px 12px;color:var(--text);font-size:12px;outline:none}
select option{background:#151e30;color:white}
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:17px}
.form-group{display:flex;flex-direction:column;gap:8px}
.form-group label{font-size:12px;color:#b8c4d6}
.form-group input,.form-group select{width:100%}
.form-group.full{grid-column:1/-1}
.form-group textarea{min-height:100px;resize:vertical;background:var(--panel2);border:1px solid var(--border);border-radius:8px;padding:12px;color:white;outline:none;font:inherit;font-size:12px}
.profile-card{display:flex;align-items:center;gap:20px;padding:20px;background:var(--panel2);border:1px solid var(--border);border-radius:10px;margin-bottom:20px}
.profile-big{width:70px;height:70px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#8b5cf6,#438cff);font-size:25px;font-weight:800}
.profile-card h3{font-size:16px;margin-bottom:6px}
.profile-card p{font-size:12px;color:var(--muted)}
.message-item{display:flex;gap:13px;padding:16px 0;border-bottom:1px solid var(--border)}
.message-item:last-child{border:0}
.message-item h4{font-size:13px;margin-bottom:6px}
.message-item p{font-size:12px;color:var(--muted);line-height:1.6}
.message-item small{font-size:10px;color:#718096}
.notification{display:flex;align-items:flex-start;gap:13px;padding:16px 0;border-bottom:1px solid var(--border)}
.notification:last-child{border:0}
.notification p{font-size:12px;color:#b9c5d7;line-height:1.7}
.notification small{display:block;color:var(--muted);margin-top:6px;font-size:10px}
.settings-row{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:17px 0;border-bottom:1px solid var(--border)}
.settings-row strong{font-size:12px}
.settings-row p{font-size:11px;color:var(--muted);margin-top:5px}
.toggle{appearance:none;width:38px;height:21px;background:#334155;border-radius:20px;position:relative;cursor:pointer;flex-shrink:0}
.toggle:checked{background:var(--primary)}
.toggle:before{content:"";position:absolute;width:15px;height:15px;background:white;border-radius:50%;top:3px;left:3px;transition:.2s}
.toggle:checked:before{left:20px}
.quick-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;margin-bottom:22px}
.quick-card{padding:19px;background:var(--panel);border:1px solid var(--border);border-radius:11px;color:white;text-align:left;transition:.2s}
.quick-card:hover{border-color:var(--primary);transform:translateY(-3px)}
.quick-card i{font-size:21px;color:#a78bfa;margin-bottom:15px}
.quick-card strong{display:block;font-size:12px;margin-bottom:5px}
.quick-card small{font-size:10px;color:var(--muted)}
.overlay{display:none;position:fixed;inset:0;background:#0009;z-index:900}
.overlay.show{display:block}
.toast{position:fixed;bottom:25px;right:25px;background:#18253a;border:1px solid #33445e;color:white;padding:14px 20px;border-radius:9px;font-size:12px;z-index:2000;display:none}
.toast.show{display:block}
@media(max-width:1100px){.stats-grid{grid-template-columns:repeat(2,1fr)}.quick-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:800px){
.sidebar{transform:translateX(-100%)}
.sidebar.open{transform:translateX(0)}
.main{margin-left:0;padding:0 20px 30px}
.mobile-toggle{display:block}
.content-grid{grid-template-columns:1fr}
.topbar{height:75px}
}
@media(max-width:550px){
.main{padding:0 13px 25px}
.topbar{height:70px}
.profile-name,.profile-btn>i{display:none}
.top-actions{gap:7px}
.top-icon{width:35px;height:35px}
.page-heading{font-size:16px}
.welcome{align-items:flex-start;flex-direction:column}
.welcome h2{font-size:20px}
.stats-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.stat-card{padding:14px}
.stat-card h3{font-size:21px}
.quick-grid{grid-template-columns:repeat(2,1fr);gap:10px}
.panel{padding:14px}
.search-box{width:100%}
.toolbar{align-items:stretch}
.toolbar-left,.toolbar-right{width:100%}
.toolbar-right input{width:100%}
.form-grid{grid-template-columns:1fr}
.form-group.full{grid-column:auto}
.profile-card{gap:13px}
.profile-big{width:55px;height:55px}
}
</style>
</head>

<body>

<div class="overlay" id="overlay" onclick="closeSidebar()"></div>

<!-- SIDEBAR -->
<aside class="sidebar" id="sidebar">
    <div class="logo">
        <div class="logo-icon"><i class="fa-solid fa-layer-group"></i></div>
        <span>MCT<span style="color:#a78bfa">Admin</span></span>
    </div>

    <div class="menu-label">MAIN MENU</div>

    <button class="nav-link active" data-page="dashboard"><i class="fa-solid fa-house"></i> Dashboard</button>
    <button class="nav-link" data-page="profile"><i class="fa-solid fa-user"></i> My Profile</button>
    <button class="nav-link" data-page="messages"><i class="fa-solid fa-envelope"></i> Messages <span class="count">5</span></button>
    <button class="nav-link" data-page="notifications"><i class="fa-solid fa-bell"></i> Notifications <span class="count">3</span></button>

    <div class="menu-label">MANAGEMENT</div>

    <button class="nav-link" data-page="customers"><i class="fa-solid fa-users"></i> Customers</button>
    <button class="nav-link" data-page="products"><i class="fa-solid fa-box"></i> Products</button>
    <button class="nav-link" data-page="orders"><i class="fa-solid fa-cart-shopping"></i> Orders</button>
    <button class="nav-link" data-page="analytics"><i class="fa-solid fa-chart-line"></i> Analytics</button>
    <button class="nav-link" data-page="settings"><i class="fa-solid fa-gear"></i> Settings</button>

    <div class="sidebar-bottom">
        <button class="nav-link" onclick="showToast('Help center opened')"><i class="fa-solid fa-circle-question"></i> Help Center</button>
        <button class="nav-link" onclick="showToast('You have been logged out')"><i class="fa-solid fa-right-from-bracket"></i> Logout</button>
    </div>
</aside>

<!-- MAIN -->
<main class="main">

<header class="topbar">
    <div class="top-left">
        <button class="mobile-toggle" onclick="toggleSidebar()"><i class="fa-solid fa-bars"></i></button>
        <div>
            <div class="page-heading" id="headerTitle">Dashboard</div>
            <div class="breadcrumb">Home / <span id="breadcrumb">Dashboard</span></div>
        </div>
    </div>

    <div class="top-actions">
        <button class="top-icon" onclick="navigate('messages')" title="Messages"><i class="fa-regular fa-envelope"></i><span class="dot"></span></button>
        <button class="top-icon" onclick="navigate('notifications')" title="Notifications"><i class="fa-regular fa-bell"></i><span class="dot"></span></button>

        <div class="profile">
            <button class="profile-btn" onclick="toggleDropdown()">
                <div class="avatar">M</div>
                <span class="profile-name">Admin User<small>Administrator</small></span>
                <i class="fa-solid fa-chevron-down"></i>
            </button>
            <div class="dropdown" id="profileDropdown">
                <button onclick="navigate('profile')"><i class="fa-regular fa-user"></i>   My Profile</button>
                <button onclick="navigate('settings')"><i class="fa-solid fa-gear"></i>   Settings</button>
                <button onclick="showToast('You have been logged out')"><i class="fa-solid fa-right-from-bracket"></i>   Logout</button>
            </div>
        </div>
    </div>
</header>

<!-- DASHBOARD -->
<section class="page active" id="dashboard">
    <div class="welcome">
        <div>
            <h2>Welcome Back, Admin! 👋</h2>
            <p>Here's what's happening with your store today.</p>
        </div>
        <button class="primary-btn" onclick="showToast('Report downloaded')"><i class="fa-solid fa-download"></i> Download Report</button>
    </div>

    <div class="stats-grid">
        <div class="stat-card">
            <div class="stat-top"><span class="stat-icon purple"><i class="fa-solid fa-users"></i></span><span style="color:#34d399;font-size:11px">+12.5%</span></div>
            <h3>2,845</h3><p>Total Customers</p><div class="stat-change">↑ 12.5% this month</div>
        </div>
        <div class="stat-card">
            <div class="stat-top"><span class="stat-icon blue"><i class="fa-solid fa-box"></i></span><span style="color:#34d399;font-size:11px">+8.2%</span></div>
            <h3>1,284</h3><p>Total Products</p><div class="stat-change">↑ 8.2% this month</div>
        </div>
        <div class="stat-card">
            <div class="stat-top"><span class="stat-icon green"><i class="fa-solid fa-cart-shopping"></i></span><span style="color:#34d399;font-size:11px">+15.3%</span></div>
            <h3>3,592</h3><p>Total Orders</p><div class="stat-change">↑ 15.3% this month</div>
        </div>
        <div class="stat-card">
            <div class="stat-top"><span class="stat-icon orange"><i class="fa-solid fa-wallet"></i></span><span style="color:#34d399;font-size:11px">+18.7%</span></div>
            <h3>₹84,250</h3><p>Total Revenue</p><div class="stat-change">↑ 18.7% this month</div>
        </div>
    </div>

    <div class="quick-grid">
        <button class="quick-card" onclick="navigate('customers')"><i class="fa-solid fa-user-plus"></i><strong>Customers</strong><small>Manage customers</small></button>
        <button class="quick-card" onclick="navigate('products')"><i class="fa-solid fa-cube"></i><strong>Products</strong><small>Manage products</small></button>
        <button class="quick-card" onclick="navigate('orders')"><i class="fa-solid fa-bag-shopping"></i><strong>Orders</strong><small>Track all orders</small></button>
        <button class="quick-card" onclick="navigate('analytics')"><i class="fa-solid fa-chart-pie"></i><strong>Analytics</strong><small>View performance</small></button>
    </div>

    <div class="content-grid">
        <div class="panel">
            <div class="panel-header"><h3>Revenue Overview</h3><span>Last 7 months</span></div>
            <div class="chart">
                <div class="chart-col"><div class="bar" style="height:35%"></div></div>
                <div class="chart-col"><div class="bar" style="height:55%"></div></div>
                <div class="chart-col"><div class="bar" style="height:45%"></div></div>
                <div class="chart-col"><div class="bar" style="height:75%"></div></div>
                <div class="chart-col"><div class="bar" style="height:60%"></div></div>
                <div class="chart-col"><div class="bar" style="height:90%"></div></div>
                <div class="chart-col"><div class="bar" style="height:100%"></div></div>
            </div>
            <div class="chart-labels"><span>May</span><span>Jun</span><span>Jul</span><span>Aug</span><span>Sep</span><span>Oct</span><span>Nov</span></div>
        </div>

        <div class="panel">
            <div class="panel-header"><h3>Recent Activity</h3><span>View all</span></div>
            <div class="activity"><div class="activity-icon"><i class="fa-solid fa-cart-shopping"></i></div><div><strong>New order received</strong><small>Order #ORD-1025 · 5 min ago</small></div></div>
            <div class="activity"><div class="activity-icon"><i class="fa-solid fa-user-plus"></i></div><div><strong>New customer registered</strong><small>John Smith · 20 min ago</small></div></div>
            <div class="activity"><div class="activity-icon"><i class="fa-solid fa-box"></i></div><div><strong>Product added</strong><small>Wireless Headphones · 1 hour ago</small></div></div>
            <div class="activity"><div class="activity-icon"><i class="fa-solid fa-wallet"></i></div><div><strong>Payment received</strong><small>₹2,500 · 2 hours ago</small></div></div>
        </div>
    </div>

    <div class="panel">
        <div class="panel-header"><h3>Recent Orders</h3><button class="secondary-btn" onclick="navigate('orders')">View All</button></div>
        <div class="table-wrap">
        <table>
            <thead><tr><th>Order ID</th><th>Customer</th><th>Date</th><th>Amount</th><th>Status</th></tr></thead>
            <tbody>
            <tr><td>#ORD-1025</td><td>John Smith</td><td>Nov 09, 2026</td><td>₹2,500</td><td><span class="status completed">Completed</span></td></tr>
            <tr><td>#ORD-1024</td><td>Sarah Wilson</td><td>Nov 08, 2026</td><td>₹1,850</td><td><span class="status pending">Pending</span></td></tr>
            <tr><td>#ORD-1023</td><td>David Miller</td><td>Nov 08, 2026</td><td>₹3,200</td><td><span class="status completed">Completed</span></td></tr>
            <tr><td>#ORD-1022</td><td>Emma Brown</td><td>Nov 07, 2026</td><td>₹950</td><td><span class="status cancelled">Cancelled</span></td></tr>
            </tbody>
        </table>
        </div>
    </div>
</section>

<!-- PROFILE -->
<section class="page" id="profile">
    <div class="welcome"><div><h2>My Profile</h2><p>Manage your personal information.</p></div><button class="primary-btn" onclick="showToast('Profile saved')">Save Changes</button></div>
    <div class="panel">
        <div class="profile-card"><div class="profile-big">M</div><div><h3>Admin User</h3><p>Administrator · admin@example.com</p></div></div>
        <div class="form-grid">
            <div class="form-group"><label>First Name</label><input value="Admin"></div>
            <div class="form-group"><label>Last Name</label><input value="User"></div>
            <div class="form-group"><label>Email Address</label><input type="email" value="admin@example.com"></div>
            <div class="form-group"><label>Phone Number</label><input value="+91 9876543210"></div>
            <div class="form-group"><label>Username</label><input value="admin"></div>
            <div class="form-group"><label>Role</label><input value="Administrator" disabled></div>
            <div class="form-group full"><label>Bio</label><textarea class="form-control">Administrator of MCT Admin Dashboard.</textarea></div>
        </div>
    </div>
</section>

<!-- MESSAGES -->
<section class="page" id="messages">
    <div class="welcome"><div><h2>Messages</h2><p>Manage your conversations and messages.</p></div><button class="primary-btn" onclick="showToast('New message form opened')"><i class="fa-solid fa-plus"></i> New Message</button></div>
    <div class="panel">
        <div class="toolbar"><div class="toolbar-left"><h3>All Messages</h3></div><div class="toolbar-right"><input class="search-box" placeholder="Search messages..." oninput="filterRows(this,'messageList')"></div></div>
        <div id="messageList">
            <div class="message-item"><div class="avatar">JS</div><div><h4>John Smith</h4><p>Hello, I would like to know more about my recent order. Can you please help me?</p><small>5 minutes ago · <span style="color:#a78bfa">New</span></small></div></div>
            <div class="message-item"><div class="avatar">SW</div><div><h4>Sarah Wilson</h4><p>Thank you for your quick response. I received my product today.</p><small>1 hour ago</small></div></div>
            <div class="message-item"><div class="avatar">DM</div><div><h4>David Miller</h4><p>Is this product available in another color?</p><small>Yesterday</small></div></div>
            <div class="message-item"><div class="avatar">EB</div><div><h4>Emma Brown</h4><p>I need assistance with my account details.</p><small>2 days ago</small></div></div>
        </div>
    </div>
</section>

<!-- NOTIFICATIONS -->
<section class="page" id="notifications">
    <div class="welcome"><div><h2>Notifications</h2><p>Stay updated with your latest activities.</p></div><button class="secondary-btn" onclick="showToast('All notifications marked as read')">Mark All Read</button></div>
    <div class="panel">
        <div class="notification"><div class="activity-icon"><i class="fa-solid fa-cart-shopping"></i></div><div><p><strong>New Order Received</strong> — A new order #ORD-1025 has been placed successfully.</p><small>5 minutes ago</small></div></div>
        <div class="notification"><div class="activity-icon"><i class="fa-solid fa-user-plus"></i></div><div><p><strong>New Customer</strong> — John Smith has registered an account.</p><small>30 minutes ago</small></div></div>
        <div class="notification"><div class="activity-icon"><i class="fa-solid fa-wallet"></i></div><div><p><strong>Payment Successful</strong> — Payment of ₹2,500 received.</p><small>2 hours ago</small></div></div>
        <div class="notification"><div class="activity-icon"><i class="fa-solid fa-box"></i></div><div><p><strong>Low Stock Alert</strong> — Wireless Headphones stock is running low.</p><small>Yesterday</small></div></div>
    </div>
</section>

<!-- CUSTOMERS -->
<section class="page" id="customers">
    <div class="welcome"><div><h2>Customers Management</h2><p>Manage and monitor all your customers.</p></div><button class="primary-btn" onclick="openAdd('customer')"><i class="fa-solid fa-plus"></i> Add Customer</button></div>
    <div class="stats-grid">
        <div class="stat-card"><span class="stat-icon purple"><i class="fa-solid fa-users"></i></span><h3 id="customerTotal">2,845</h3><p>Total Customers</p></div>
        <div class="stat-card"><span class="stat-icon green"><i class="fa-solid fa-user-check"></i></span><h3>2,410</h3><p>Active Customers</p></div>
        <div class="stat-card"><span class="stat-icon orange"><i class="fa-solid fa-user-clock"></i></span><h3>435</h3><p>Inactive Customers</p></div>
        <div class="stat-card"><span class="stat-icon blue"><i class="fa-solid fa-user-plus"></i></span><h3>128</h3><p>New This Month</p></div>
    </div>
    <div class="panel">
        <div class="toolbar"><div class="toolbar-left"><h3>All Customers</h3></div><div class="toolbar-right"><input class="search-box" placeholder="Search customers..." oninput="filterRows(this,'customerTable')"></div></div>
        <div class="table-wrap"><table id="customerTable"><thead><tr><th>Customer</th><th>Email</th><th>Phone</th><th>Joined</th><th>Status</th><th>Action</th></tr></thead><tbody>
        <tr><td><div class="table-user"><div class="small-avatar">JS</div>John Smith</div></td><td>john@example.com</td><td>9876543210</td><td>Nov 02, 2026</td><td><span class="status completed">Active</span></td><td><button class="secondary-btn" onclick="showToast('Customer details opened')"><i class="fa-solid fa-eye"></i></button></td></tr>
        <tr><td><div class="table-user"><div class="small-avatar">SW</div>Sarah Wilson</div></td><td>sarah@example.com</td><td>9876543211</td><td>Oct 28, 2026</td><td><span class="status completed">Active</span></td><td><button class="secondary-btn" onclick="showToast('Customer details opened')"><i class="fa-solid fa-eye"></i></button></td></tr>
        <tr><td><div class="table-user"><div class="small-avatar">DM</div>David Miller</div></td><td>david@example.com</td><td>9876543212</td><td>Oct 15, 2026</td><td><span class="status pending">Inactive</span></td><td><button class="secondary-btn" onclick="showToast('Customer details opened')"><i class="fa-solid fa-eye"></i></button></td></tr>
        </tbody></table></div>
    </div>
</section>

<!-- PRODUCTS -->
<section class="page" id="products">
    <div class="welcome"><div><h2>Products Management</h2><p>Manage your store products and inventory.</p></div><button class="primary-btn" onclick="openAdd('product')"><i class="fa-solid fa-plus"></i> Add Product</button></div>
    <div class="stats-grid">
        <div class="stat-card"><span class="stat-icon purple"><i class="fa-solid fa-box"></i></span><h3 id="productTotal">1,284</h3><p>Total Products</p></div>
        <div class="stat-card"><span class="stat-icon green"><i class="fa-solid fa-circle-check"></i></span><h3>1,150</h3><p>In Stock</p></div>
        <div class="stat-card"><span class="stat-icon orange"><i class="fa-solid fa-triangle-exclamation"></i></span><h3>84</h3><p>Low Stock</p></div>
        <div class="stat-card"><span class="stat-icon blue"><i class="fa-solid fa-ban"></i></span><h3>50</h3><p>Out of Stock</p></div>
    </div>
    <div class="panel">
        <div class="toolbar"><div class="toolbar-left"><h3>All Products</h3></div><div class="toolbar-right"><input class="search-box" placeholder="Search products..." oninput="filterRows(this,'productTable')"></div></div>
        <div class="table-wrap"><table id="productTable"><thead><tr><th>Product</th><th>SKU</th><th>Category</th><th>Price</th><th>Stock</th><th>Status</th><th>Action</th></tr></thead><tbody>
        <tr><td>Wireless Headphones</td><td>WH-001</td><td>Electronics</td><td>₹2,500</td><td>120</td><td><span class="status completed">Available</span></td><td><button class="secondary-btn" onclick="showToast('Product edit opened')"><i class="fa-solid fa-pen"></i></button></td></tr>
        <tr><td>Smart Watch</td><td>SW-002</td><td>Electronics</td><td>₹3,200</td><td>15</td><td><span class="status pending">Low Stock</span></td><td><button class="secondary-btn" onclick="showToast('Product edit opened')"><i class="fa-solid fa-pen"></i></button></td></tr>
        <tr><td>Sports Shoes</td><td>SS-003</td><td>Fashion</td><td>₹1,850</td><td>0</td><td><span class="status cancelled">Out of Stock</span></td><td><button class="secondary-btn" onclick="showToast('Product edit opened')"><i class="fa-solid fa-pen"></i></button></td></tr>
        <tr><td>Backpack</td><td>BP-004</td><td>Accessories</td><td>₹950</td><td>80</td><td><span class="status completed">Available</span></td><td><button class="secondary-btn" onclick="showToast('Product edit opened')"><i class="fa-solid fa-pen"></i></button></td></tr>
        </tbody></table></div>
    </div>
</section>

<!-- ORDERS -->
<section class="page" id="orders">
    <div class="welcome"><div><h2>Orders Management</h2><p>Manage, track and process customer orders.</p></div><button class="primary-btn" onclick="showToast('Create order form opened')"><i class="fa-solid fa-plus"></i> Create Order</button></div>
    <div class="stats-grid">
        <div class="stat-card"><span class="stat-icon purple"><i class="fa-solid fa-cart-shopping"></i></span><h3>3,592</h3><p>Total Orders</p></div>
        <div class="stat-card"><span class="stat-icon green"><i class="fa-solid fa-check"></i></span><h3>2,850</h3><p>Completed</p></div>
        <div class="stat-card"><span class="stat-icon orange"><i class="fa-solid fa-clock"></i></span><h3>542</h3><p>Pending</p></div>
        <div class="stat-card"><span class="stat-icon blue"><i class="fa-solid fa-xmark"></i></span><h3>200</h3><p>Cancelled</p></div>
    </div>
    <div class="panel">
        <div class="toolbar"><div class="toolbar-left"><h3>All Orders</h3><select onchange="filterStatus(this,'orderTable')"><option value="">All Status</option><option>Completed</option><option>Pending</option><option>Cancelled</option></select></div><div class="toolbar-right"><input class="search-box" placeholder="Search orders..." oninput="filterRows(this,'orderTable')"></div></div>
        <div class="table-wrap"><table id="orderTable"><thead><tr><th>Order ID</th><th>Customer</th><th>Date</th><th>Amount</th><th>Payment</th><th>Status</th><th>Action</th></tr></thead><tbody>
        <tr><td>#ORD-1025</td><td>John Smith</td><td>Nov 09, 2026</td><td>₹2,500</td><td>Paid</td><td><span class="status completed">Completed</span></td><td><button class="secondary-btn" onclick="showToast('Order details opened')"><i class="fa-solid fa-eye"></i></button></td></tr>
        <tr><td>#ORD-1024</td><td>Sarah Wilson</td><td>Nov 08, 2026</td><td>₹1,850</td><td>Pending</td><td><span class="status pending">Pending</span></td><td><button class="secondary-btn" onclick="showToast('Order details opened')"><i class="fa-solid fa-eye"></i></button></td></tr>
        <tr><td>#ORD-1023</td><td>David Miller</td><td>Nov 08, 2026</td><td>₹3,200</td><td>Paid</td><td><span class="status completed">Completed</span></td><td><button class="secondary-btn" onclick="showToast('Order details opened')"><i class="fa-solid fa-eye"></i></button></td></tr>
        <tr><td>#ORD-1022</td><td>Emma Brown</td><td>Nov 07, 2026</td><td>₹950</td><td>Refunded</td><td><span class="status cancelled">Cancelled</span></td><td><button class="secondary-btn" onclick="showToast('Order details opened')"><i class="fa-solid fa-eye"></i></button></td></tr>
        </tbody></table></div>
    </div>
</section>

<!-- ANALYTICS -->
<section class="page" id="analytics">
    <div class="welcome"><div><h2>Analytics & Reports</h2><p>Monitor your business performance.</p></div><button class="primary-btn" onclick="showToast('Analytics report exported')"><i class="fa-solid fa-download"></i> Export Report</button></div>
    <div class="stats-grid">
        <div class="stat-card"><span class="stat-icon purple"><i class="fa-solid fa-indian-rupee-sign"></i></span><h3>₹84,250</h3><p>Total Revenue</p></div>
        <div class="stat-card"><span class="stat-icon blue"><i class="fa-solid fa-chart-line"></i></span><h3>18.7%</h3><p>Growth Rate</p></div>
        <div class="stat-card"><span class="stat-icon green"><i class="fa-solid fa-bag-shopping"></i></span><h3>3,592</h3><p>Total Sales</p></div>
        <div class="stat-card"><span class="stat-icon orange"><i class="fa-solid fa-users"></i></span><h3>2,845</h3><p>Customers</p></div>
    </div>
    <div class="content-grid">
        <div class="panel"><div class="panel-header"><h3>Monthly Revenue</h3><span>2026</span></div>
            <div class="chart">
                <div class="chart-col"><div class="bar" style="height:35%"></div></div>
                <div class="chart-col"><div class="bar" style="height:55%"></div></div>
                <div class="chart-col"><div class="bar" style="height:45%"></div></div>
                <div class="chart-col"><div class="bar" style="height:75%"></div></div>
                <div class="chart-col"><div class="bar" style="height:60%"></div></div>
                <div class="chart-col"><div class="bar" style="height:90%"></div></div>
                <div class="chart-col"><div class="bar" style="height:100%"></div></div>
            </div><div class="chart-labels"><span>May</span><span>Jun</span><span>Jul</span><span>Aug</span><span>Sep</span><span>Oct</span><span>Nov</span></div>
        </div>
        <div class="panel"><div class="panel-header"><h3>Top Categories</h3></div>
            <div class="activity"><div class="activity-icon"><i class="fa-solid fa-shirt"></i></div><div style="flex:1"><strong>Fashion</strong><small>42% of sales</small></div></div>
            <div class="activity"><div class="activity-icon"><i class="fa-solid fa-mobile-screen"></i></div><div style="flex:1"><strong>Electronics</strong><small>30% of sales</small></div></div>
            <div class="activity"><div class="activity-icon"><i class="fa-solid fa-house"></i></div><div style="flex:1"><strong>Home & Living</strong><small>18% of sales</small></div></div>
            <div class="activity"><div class="activity-icon"><i class="fa-solid fa-bag-shopping"></i></div><div style="flex:1"><strong>Accessories</strong><small>10% of sales</small></div></div>
        </div>
    </div>
</section>

<!-- SETTINGS -->
<section class="page" id="settings">
    <div class="welcome"><div><h2>Settings</h2><p>Manage dashboard and account preferences.</p></div><button class="primary-btn" onclick="showToast('Settings saved successfully')">Save Settings</button></div>
    <div class="panel" style="margin-bottom:18px">
        <div class="panel-header"><h3><i class="fa-solid fa-sliders"></i> General Settings</h3></div>
        <div class="form-grid">
            <div class="form-group"><label>Website Name</label><input value="MCT Admin"></div>
            <div class="form-group"><label>Website Email</label><input value="admin@example.com"></div>
            <div class="form-group"><label>Currency</label><select><option>INR - Indian Rupee</option><option>USD - US Dollar</option><option>EUR - Euro</option></select></div>
            <div class="form-group"><label>Timezone</label><select><option>Asia/Kolkata</option><option>UTC</option></select></div>
        </div>
    </div>
    <div class="panel">
        <div class="panel-header"><h3><i class="fa-solid fa-bell"></i> Notification Settings</h3></div>
        <div class="settings-row"><div><strong>Email Notifications</strong><p>Receive updates by email.</p></div><input type="checkbox" class="toggle" checked></div>
        <div class="settings-row"><div><strong>New Order Alerts</strong><p>Get notified when an order is placed.</p></div><input type="checkbox" class="toggle" checked></div>
        <div class="settings-row"><div><strong>Customer Registration</strong><p>Receive new customer registration alerts.</p></div><input type="checkbox" class="toggle" checked></div>
        <div class="settings-row"><div><strong>Low Stock Alerts</strong><p>Get notified when inventory is low.</p></div><input type="checkbox" class="toggle"></div>
    </div>
    <div class="panel" style="margin-top:18px">
        <div class="panel-header"><h3><i class="fa-solid fa-shield-halved"></i> Security</h3></div>
        <div class="settings-row"><div><strong>Two-Factor Authentication</strong><p>Extra protection for your account.</p></div><input type="checkbox" class="toggle" checked></div>
        <div class="settings-row"><div><strong>Login Notifications</strong><p>Receive alerts for new login activity.</p></div><input type="checkbox" class="toggle" checked></div>
        <button class="secondary-btn" style="margin-top:18px" onclick="showToast('Password change form opened')">Change Password</button>
    </div>
</section>

<!-- ADD ITEM MODAL -->
<div id="addModal" style="display:none;position:fixed;inset:0;background:#000b;z-index:1500;align-items:center;justify-content:center;padding:15px">
    <div class="panel" style="width:100%;max-width:480px">
        <div class="panel-header"><h3 id="modalTitle">Add New</h3><button class="secondary-btn" onclick="closeAdd()"><i class="fa-solid fa-xmark"></i></button></div>
        <form id="addForm">
            <div class="form-grid" id="modalFields"></div>
            <div style="display:flex;justify-content:flex-end;gap:10px;margin-top:20px">
                <button type="button" class="secondary-btn" onclick="closeAdd()">Cancel</button>
                <button type="submit" class="primary-btn">Save Record</button>
            </div>
        </form>
    </div>
</div>

</main>

<div class="toast" id="toast"></div>

<script>
const pageTitles = {
 dashboard:'Dashboard',
 profile:'My Profile',
 messages:'Messages',
 notifications:'Notifications',
 customers:'Customers',
 products:'Products',
 orders:'Orders',
 analytics:'Analytics',
 settings:'Settings'
};

function navigate(page){
 document.querySelectorAll('.page').forEach(p=>p.classList.remove('active'));
 document.querySelectorAll('.nav-link[data-page]').forEach(b=>b.classList.remove('active'));
 const target=document.getElementById(page);
 if(!target)return;
 target.classList.add('active');
 document.querySelectorAll(`[data-page="${page}"]`).forEach(b=>b.classList.add('active'));
 document.getElementById('headerTitle').textContent=pageTitles[page];
 document.getElementById('breadcrumb').textContent=pageTitles[page];
 document.getElementById('profileDropdown').classList.remove('show');
 closeSidebar();
 window.scrollTo({top:0,behavior:'smooth'});
}

document.querySelectorAll('.nav-link[data-page]').forEach(btn=>{
 btn.addEventListener('click',()=>navigate(btn.dataset.page));
});

function toggleSidebar(){
 document.getElementById('sidebar').classList.toggle('open');
 document.getElementById('overlay').classList.toggle('show');
}
function closeSidebar(){
 document.getElementById('sidebar').classList.remove('open');
 document.getElementById('overlay').classList.remove('show');
}
function toggleDropdown(){
 document.getElementById('profileDropdown').classList.toggle('show');
}
document.addEventListener('click',e=>{
 if(!e.target.closest('.profile')){
 document.getElementById('profileDropdown').classList.remove('show');
 }
});

let toastTimer;
function showToast(message){
 const toast=document.getElementById('toast');
 toast.textContent=message;
 toast.classList.add('show');
 clearTimeout(toastTimer);
 toastTimer=setTimeout(()=>toast.classList.remove('show'),2500);
}

function filterRows(input,id){
 const query=input.value.toLowerCase();
 const table=document.getElementById(id);
 table.querySelectorAll('tbody tr').forEach(row=>{
 row.style.display=row.textContent.toLowerCase().includes(query)?'':'none';
 });
}
function filterStatus(select,id){
 const value=select.value.toLowerCase();
 document.querySelectorAll(`#${id} tbody tr`).forEach(row=>{
 const status=row.querySelector('.status')?.textContent.toLowerCase()||'';
 row.style.display=!value||status===value?'':'none';
 });
}

let currentType='';
function openAdd(type){
 currentType=type;
 const modal=document.getElementById('addModal');
 const fields=document.getElementById('modalFields');
 const isCustomer=type==='customer';
 document.getElementById('modalTitle').textContent=isCustomer?'Add New Customer':'Add New Product';
 fields.innerHTML=isCustomer?`
 <div class="form-group"><label>Full Name</label><input name="name" required placeholder="Customer name"></div>
 <div class="form-group"><label>Email Address</label><input name="email" type="email" required placeholder="Email"></div>
 <div class="form-group"><label>Phone Number</label><input name="phone" placeholder="Phone number"></div>
 <div class="form-group"><label>Status</label><select name="status"><option>Active</option><option>Inactive</option></select></div>
 `:`
 <div class="form-group full"><label>Product Name</label><input name="name" required placeholder="Product name"></div>
 <div class="form-group"><label>SKU</label><input name="sku" required placeholder="Product SKU"></div>
 <div class="form-group"><label>Category</label><select name="category"><option>Electronics</option><option>Fashion</option><option>Accessories</option><option>Home & Living</option></select></div>
 <div class="form-group"><label>Price (₹)</label><input name="price" type="number" min="0" required></div>
 <div class="form-group"><label>Stock</label><input name="stock" type="number" min="0" required></div>`;
 modal.style.display='flex';
}
function closeAdd(){
 document.getElementById('addModal').style.display='none';
 document.getElementById('addForm').reset();
}
document.getElementById('addForm').addEventListener('submit',e=>{
 e.preventDefault();
 const data=new FormData(e.target);
 const tr=document.createElement('tr');
 if(currentType==='customer'){
 const name=data.get('name');
 const initials=name.split(' ').map(x=>x[0]).join('').substring(0,2).toUpperCase();
 tr.innerHTML=`<td><div class="table-user"><div class="small-avatar">${initials}</div>${escapeHTML(name)}</div></td><td>${escapeHTML(data.get('email'))}</td><td>${escapeHTML(data.get('phone'))}</td><td>Today</td><td><span class="status ${data.get('status')==='Active'?'completed':'pending'}">${escapeHTML(data.get('status'))}</span></td><td><button class="secondary-btn" onclick="showToast('Customer details opened')"><i class="fa-solid fa-eye"></i></button></td>`;
 document.querySelector('#customerTable tbody').prepend(tr);
 document.getElementById('customerTotal').textContent='2,846';
 }else{
 tr.innerHTML=`<td>${escapeHTML(data.get('name'))}</td><td>${escapeHTML(data.get('sku'))}</td><td>${escapeHTML(data.get('category'))}</td><td>₹${Number(data.get('price')).toLocaleString('en-IN')}</td><td>${escapeHTML(data.get('stock'))}</td><td><span class="status ${Number(data.get('stock'))>0?'completed':'cancelled'}">${Number(data.get('stock'))>0?'Available':'Out of Stock'}</span></td><td><button class="secondary-btn" onclick="showToast('Product edit opened')"><i class="fa-solid fa-pen"></i></button></td>`;
 document.querySelector('#productTable tbody').prepend(tr);
 }
 closeAdd();
 showToast(currentType==='customer'?'Customer added successfully':'Product added successfully');
});
function escapeHTML(value){
 return String(value).replace(/[&<>"']/g,c=>({'&':'&','<':'<','>':'>','"':'"',"'":'''}[c]));
}
</script>
</body>
</html>

Dashboard Layout

The dashboard includes a sidebar navigation, top navigation bar, welcome banner, statistics cards, analytics section, recent activity panel, and recent orders table. Each section is organized to provide a clean and user-friendly administration experience.

Conclusion

The MCT Admin Dashboard is a modern, responsive, and feature-rich dashboard UI built with HTML, CSS, and JavaScript. Its dark theme, analytics cards, management sections, and clean layout make it a useful starting point for your next web development project.

Explore the design, customize the components, and use it as inspiration for building your own admin management system.

Note: This is a front-end dashboard template. Real authentication, database operations, and live business analytics require back-end integration such as PHP and MySQL.

Post Rating
6.4 / 10
User rating: 6.4 / 10
Rate this post
Click a number to rate this article.
Mycodingtutorial

Web Designer & Developer

Hello, I’m Mohit, is a PHP Developer and Web Designer skilled in PHP, HTML, CSS, JavaScript, MySQL, and WordPress. He creates responsive, modern, and user-friendly websites with a focus on clean UI/UX design.

-->