<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Admin Dashboard</title>
<script>
// Check for saved theme preference
if (localStorage.getItem('darkMode') === 'true') {
document.documentElement.classList.add('dark');
}
</script>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script src="https://unpkg.com/feather-icons"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
<style>
.sidebar-link:hover .sidebar-icon {
transform: translateX(5px);
}
.content-section {
display: none;
}
.content-section.active {
display: block;
}
.form-control:focus {
border-color: #6366f1;
box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.25);
}
.table-row:hover {
background-color: #f8fafc;
}
</style>
</head>
<body class="bg-gray-50">
<!-- App Container -->
<div class="flex h-screen overflow-hidden">
<!-- Sidebar -->
<div class="hidden md:flex md:flex-shrink-0">
<div class="flex flex-col w-64 bg-indigo-700 text-white">
<div class="flex items-center justify-center h-16 px-4 border-b border-indigo-600">
<div class="flex items-center">
<i data-feather="shield" class="w-6 h-6 mr-2"></i>
<span class="text-xl font-bold">AdminHub</span>
</div>
</div>
<div class="flex flex-col flex-grow overflow-y-auto">
<div class="px-4 py-4">
<div class="flex items-center px-4 py-3 bg-indigo-800 rounded-lg">
<img class="w-10 h-10 rounded-full" src="http://static.photos/people/200x200/42" alt="User">
<div class="ml-3">
<p class="text-sm font-medium">John Doe</p>
<p class="text-xs text-indigo-200">Admin</p>
</div>
</div>
</div>
<nav class="px-2 space-y-1">
<a href="#" class="sidebar-link flex items-center px-4 py-3 text-sm font-medium rounded-lg text-indigo-200 hover:text-white hover:bg-indigo-800 transition-all duration-200" onclick="showSection('dashboard')">
<i data-feather="home" class="sidebar-icon w-5 h-5 mr-3 transition-all duration-200"></i>
Dashboard
</a>
<a href="#" class="sidebar-link flex items-center px-4 py-3 text-sm font-medium rounded-lg text-indigo-200 hover:text-white hover:bg-indigo-800 transition-all duration-200" onclick="showSection('users')">
<i data-feather="users" class="sidebar-icon w-5 h-5 mr-3 transition-all duration-200"></i>
User Management
</a>
<a href="#" class="sidebar-link flex items-center px-4 py-3 text-sm font-medium rounded-lg text-indigo-200 hover:text-white hover:bg-indigo-800 transition-all duration-200" onclick="showSection('products')">
<i data-feather="shopping-bag" class="sidebar-icon w-5 h-5 mr-3 transition-all duration-200"></i>
Products
</a>
<a href="#" class="sidebar-link flex items-center px-4 py-3 text-sm font-medium rounded-lg text-indigo-200 hover:text-white hover:bg-indigo-800 transition-all duration-200" onclick="showSection('orders')">
<i data-feather="package" class="sidebar-icon w-5 h-5 mr-3 transition-all duration-200"></i>
Orders
</a>
<a href="#" class="sidebar-link flex items-center px-4 py-3 text-sm font-medium rounded-lg text-indigo-200 hover:text-white hover:bg-indigo-800 transition-all duration-200" onclick="showSection('analytics')">
<i data-feather="bar-chart-2" class="sidebar-icon w-5 h-5 mr-3 transition-all duration-200"></i>
Analytics
</a>
<a href="#" class="sidebar-link flex items-center px-4 py-3 text-sm font-medium rounded-lg text-indigo-200 hover:text-white hover:bg-indigo-800 transition-all duration-200" onclick="showSection('settings')">
<i data-feather="settings" class="sidebar-icon w-5 h-5 mr-3 transition-all duration-200"></i>
Settings
</a>
</nav>
</div>
<div class="px-4 py-4 border-t border-indigo-600">
<button class="flex items-center w-full px-4 py-2 text-sm font-medium text-left text-indigo-200 hover:text-white rounded-lg hover:bg-indigo-800 transition-all duration-200">
<i data-feather="log-out" class="w-5 h-5 mr-3"></i>
Sign Out
</button>
</div>
</div>
</div>
<!-- Mobile sidebar -->
<div class="md:hidden fixed inset-0 z-40" id="mobile-sidebar" style="display: none;">
<div class="fixed inset-0 bg-gray-600 bg-opacity-75"></div>
<div class="relative flex flex-col w-full max-w-xs h-full bg-indigo-700 text-white">
<div class="flex items-center justify-between h-16 px-4 border-b border-indigo-600">
<div class="flex items-center">
<i data-feather="shield" class="w-6 h-6 mr-2"></i>
<span class="text-xl font-bold">AdminHub</span>
</div>
<button class="text-white" onclick="toggleMobileSidebar()">
<i data-feather="x" class="w-6 h-6"></i>
</button>
</div>
<div class="flex flex-col flex-grow overflow-y-auto">
<div class="px-4 py-4">
<div class="flex items-center px-4 py-3 bg-indigo-800 rounded-lg">
<img class="w-10 h-10 rounded-full" src="http://static.photos/people/200x200/42" alt="User">
<div class="ml-3">
<p class="text-sm font-medium">John Doe</p>
<p class="text-xs text-indigo-200">Admin</p>
</div>
</div>
</div>
<nav class="px-2 space-y-1">
<a href="#" class="sidebar-link flex items-center px-4 py-3 text-sm font-medium rounded-lg text-indigo-200 hover:text-white hover:bg-indigo-800 transition-all duration-200">
<i data-feather="home" class="sidebar-icon w-5 h-5 mr-3 transition-all duration-200"></i>
Dashboard
</a>
<a href="#" class="sidebar-link flex items-center px-4 py-3 text-sm font-medium rounded-lg text-indigo-200 hover:text-white hover:bg-indigo-800 transition-all duration-200">
<i data-feather="users" class="sidebar-icon w-5 h-5 mr-3 transition-all duration-200"></i>
User Management
</a>
<a href="#" class="sidebar-link flex items-center px-4 py-3 text-sm font-medium rounded-lg text-indigo-200 hover:text-white hover:bg-indigo-800 transition-all duration-200">
<i data-feather="shopping-bag" class="sidebar-icon w-5 h-5 mr-3 transition-all duration-200"></i>
Products
</a>
<a href="#" class="sidebar-link flex items-center px-4 py-3 text-sm font-medium rounded-lg text-indigo-200 hover:text-white hover:bg-indigo-800 transition-all duration-200">
<i data-feather="package" class="sidebar-icon w-5 h-5 mr-3 transition-all duration-200"></i>
Orders
</a>
<a href="#" class="sidebar-link flex items-center px-4 py-3 text-sm font-medium rounded-lg text-indigo-200 hover:text-white hover:bg-indigo-800 transition-all duration-200">
<i data-feather="bar-chart-2" class="sidebar-icon w-5 h-5 mr-3 transition-all duration-200"></i>
Analytics
</a>
<a href="#" class="sidebar-link flex items-center px-4 py-3 text-sm font-medium rounded-lg text-indigo-200 hover:text-white hover:bg-indigo-800 transition-all duration-200">
<i data-feather="settings" class="sidebar-icon w-5 h-5 mr-3 transition-all duration-200"></i>
Settings
</a>
</nav>
</div>
<div class="px-4 py-4 border-t border-indigo-600">
<button class="flex items-center w-full px-4 py-2 text-sm font-medium text-left text-indigo-200 hover:text-white rounded-lg hover:bg-indigo-800 transition-all duration-200">
<i data-feather="log-out" class="w-5 h-5 mr-3"></i>
Sign Out
</button>
</div>
</div>
</div>
<!-- Main Content -->
<div class="flex flex-col flex-1 overflow-hidden">
<!-- Top Navigation -->
<div class="flex items-center justify-between h-16 px-4 bg-white border-b border-gray-200">
<div class="flex items-center">
<button class="md:hidden text-gray-500" onclick="toggleMobileSidebar()">
<i data-feather="menu" class="w-6 h-6"></i>
</button>
<div class="ml-2 md:ml-4">
<h1 class="text-lg font-semibold text-gray-900" id="page-title">Dashboard</h1>
</div>
</div>
<div class="flex items-center space-x-4">
<button class="relative p-1 text-gray-500 rounded-full hover:bg-gray-100">
<i data-feather="bell" class="w-5 h-5"></i>
<span class="absolute top-0 right-0 w-2 h-2 bg-red-500 rounded-full"></span>
</button>
<button class="relative p-1 text-gray-500 rounded-full hover:bg-gray-100">
<i data-feather="message-square" class="w-5 h-5"></i>
<span class="absolute top-0 right-0 w-2 h-2 bg-blue-500 rounded-full"></span>
</button>
<div class="flex items-center">
<img class="w-8 h-8 rounded-full" src="http://static.photos/people/200x200/42" alt="User">
<span class="ml-2 text-sm font-medium text-gray-700 hidden md:inline">John Doe</span>
</div>
</div>
</div>
<!-- Content Area -->
<div class="flex-1 overflow-y-auto p-4 bg-gray-50">
<!-- Dashboard Section -->
<div class="content-section active" id="dashboard-section">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
<div class="bg-white rounded-lg shadow p-6" data-aos="fade-up">
<div class="flex items-center justify-between">
<div>
<p class="text-sm font-medium text-gray-500">Total Users</p>
<h3 class="text-2xl font-bold text-gray-900">1,254</h3>
<p class="text-sm text-green-500 flex items-center">
<i data-feather="arrow-up" class="w-4 h-4 mr-1"></i>
<span>12.5% from last month</span>
</p>
</div>
<div class="p-3 bg-indigo-100 rounded-full">
<i data-feather="users" class="w-6 h-6 text-indigo-600"></i>
</div>
</div>
</div>
<div class="bg-white rounded-lg shadow p-6" data-aos="fade-up" data-aos-delay="100">
<div class="flex items-center justify-between">
<div>
<p class="text-sm font-medium text-gray-500">Total Products</p>
<h3 class="text-2xl font-bold text-gray-900">524</h3>
<p class="text-sm text-green-500 flex items-center">
<i data-feather="arrow-up" class="w-4 h-4 mr-1"></i>
<span>8.2% from last month</span>
</p>
</div>
<div class="p-3 bg-green-100 rounded-full">
<i data-feather="shopping-bag" class="w-6 h-6 text-green-600"></i>
</div>
</div>
</div>
<div class="bg-white rounded-lg shadow p-6" data-aos="fade-up" data-aos-delay="200">
<div class="flex items-center justify-between">
<div>
<p class="text-sm font-medium text-gray-500">Total Orders</p>
<h3 class="text-2xl font-bold text-gray-900">1,864</h3>
<p class="text-sm text-red-500 flex items-center">
<i data-feather="arrow-down" class="w-4 h-4 mr-1"></i>
<span>3.4% from last month</span>
</p>
</div>
<div class="p-3 bg-blue-100 rounded-full">
<i data-feather="package" class="w-6 h-6 text-blue-600"></i>
</div>
</div>
</div>
<div class="bg-white rounded-lg shadow p-6" data-aos="fade-up" data-aos-delay="300">
<div class="flex items-center justify-between">
<div>
<p class="text-sm font-medium text-gray-500">Revenue</p>
<h3 class="text-2xl font-bold text-gray-900">$24,573</h3>
<p class="text-sm text-green-500 flex items-center">
<i data-feather="arrow-up" class="w-4 h-4 mr-1"></i>
<span>18.7% from last month</span>
</p>
</div>
<div class="p-3 bg-purple-100 rounded-full">
<i data-feather="dollar-sign" class="w-6 h-6 text-purple-600"></i>
</div>
</div>
</div>
</div>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
<div class="lg:col-span-2 bg-white rounded-lg shadow p-6" data-aos="fade-right">
<div class="flex items-center justify-between mb-6">
<h3 class="text-lg font-semibold text-gray-900">Sales Overview</h3>
<div class="flex items-center space-x-2">
<button class="px-3 py-1 text-xs bg-indigo-600 text-white rounded-full">Weekly</button>
<button class="px-3 py-1 text-xs bg-white text-gray-700 border border-gray-300 rounded-full">Monthly</button>
<button class="px-3 py-1 text-xs bg-white text-gray-700 border border-gray-300 rounded-full">Yearly</button>
</div>
</div>
<canvas id="salesChart" height="300"></canvas>
</div>
<div class="bg-white rounded-lg shadow p-6" data-aos="fade-left">
<div class="flex items-center justify-between mb-6">
<h3 class="text-lg font-semibold text-gray-900">Recent Activity</h3>
<button class="text-indigo-600 text-sm font-medium">View All</button>
</div>
<div class="space-y-4">
<div class="flex items-start space-x-3">
<div class="flex-shrink-0">
<img class="w-8 h-8 rounded-full" src="http://static.photos/people/200x200/1" alt="User">
</div>
<div>
<p class="text-sm font-medium text-gray-900">Sarah Johnson <span class="text-gray-500 font-normal">- New order #4231</span></p>
<p class="text-xs text-gray-500">2 mins ago</p>
</div>
</div>
<div class="flex items-start space-x-3">
<div class="flex-shrink-0">
<img class="w-8 h-8 rounded-full" src="http://static.photos/people/200x200/2" alt="User">
</div>
<div>
<p class="text-sm font-medium text-gray-900">Michael Brown <span class="text-gray-500 font-normal">- Updated profile</span></p>
<p class="text-xs text-gray-500">15 mins ago</p>
</div>
</div>
<div class="flex items-start space-x-3">
<div class="flex-shrink-0">
<img class="w-8 h-8 rounded-full" src="http://static.photos/people/200x200/3" alt="User">
</div>
<div>
<p class="text-sm font-medium text-gray-900">Jessica Wilson <span class="text-gray-500 font-normal">- Submitted review</span></p>
<p class="text-xs text-gray-500">32 mins ago</p>
</div>
</div>
<div class="flex items-start space-x-3">
<div class="flex-shrink-0">
<img class="w-8 h-8 rounded-full" src="http://static.photos/people/200x200/4" alt="User">
</div>
<div>
<p class="text-sm font-medium text-gray-900">Robert Davis <span class="text-gray-500 font-normal">- Paid invoice</span></p>
<p class="text-xs text-gray-500">1 hour ago</p>
</div>
</div>
</div>
</div>
</div>
<div class="bg-white rounded-lg shadow overflow-hidden" data-aos="fade-up">
<div class="px-6 py-4 border-b border-gray-200">
<div class="flex items-center justify-between">
<h3 class="text-lg font-semibold text-gray-900">Recent Orders</h3>
<button class="text-indigo-600 text-sm font-medium">View All</button>
</div>
</div>
<div class="overflow-x-auto">
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-50">
<tr>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Order ID
</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Customer
</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Date
</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Amount
</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Status
</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Action
</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200">
<tr class="table-row">
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
#4231
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="flex-shrink-0 h-10 w-10">
<img class="h-10 w-10 rounded-full" src="http://static.photos/people/200x200/1" alt="">
</div>
<div class="ml-4">
<div class="text-sm font-medium text-gray-900">Sarah Johnson</div>
<div class="text-sm text-gray-500">sarah@example.com</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
May 12, 2023
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
$321.98
</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
Completed
</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
<a href="#" class="text-indigo-600 hover:text-indigo-900 mr-3">View</a>
<a href="#" class="text-red-600 hover:text-red-900">Delete</a>
</td>
</tr>
<tr class="table-row">
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
#4230
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="flex-shrink-0 h-10 w-10">
<img class="h-10 w-10 rounded-full" src="http://static.photos/people/200x200/2" alt="">
</div>
<div class="ml-4">
<div class="text-sm font-medium text-gray-900">Michael Brown</div>
<div class="text-sm text-gray-500">michael@example.com</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
May 12, 2023
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
$158.43
</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">
Processing
</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
<a href="#" class="text-indigo-600 hover:text-indigo-900 mr-3">View</a>
<a href="#" class="text-red-600 hover:text-red-900">Delete</a>
</td>
</tr>
<tr class="table-row">
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
#4229
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="flex-shrink-0 h-10 w-10">
<img class="h-10 w-10 rounded-full" src="http://static.photos/people/200x200/3" alt="">
</div>
<div class="ml-4">
<div class="text-sm font-medium text-gray-900">Jessica Wilson</div>
<div class="text-sm text-gray-500">jessica@example.com</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
May 11, 2023
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
$456.12
</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
Completed
</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
<a href="#" class="text-indigo-600 hover:text-indigo-900 mr-3">View</a>
<a href="#" class="text-red-600 hover:text-red-900">Delete</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- Users Section -->
<div class="content-section" id="users-section">
<div class="flex items-center justify-between mb-6">
<h2 class="text-2xl font-bold text-gray-900">User Management</h2>
<button class="flex items-center px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-all duration-200" onclick="showAddUserModal()">
<i data-feather="plus" class="w-4 h-4 mr-2"></i>
Add User
</button>
</div>
<div class="bg-white rounded-lg shadow overflow-hidden" data-aos="fade-up">
<div class="px-6 py-4 border-b border-gray-200">
<div class="flex items-center justify-between">
<div class="flex items-center space-x-4">
<div class="relative">
<i data-feather="search" class="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400"></i>
<input type="text" placeholder="Search users..." class="pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
</div>
<select class="border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
<option>All Roles</option>
<option>Admin</option>
<option>Editor</option>
<option>Viewer</option>
</select>
</div>
<div>
<button class="flex items-center px-3 py-2 text-gray-700 border border-gray-300 rounded-lg hover:bg-gray-50">
<i data-feather="filter" class="w-4 h-4 mr-2"></i>
Filter
</button>
</div>
</div>
</div>
<div class="overflow-x-auto">
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-50">
<tr>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Name
</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Email
</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Role
</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Status
</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Last Active
</th>
<th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
Action
</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200">
<tr class="table-row">
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="flex-shrink-0 h-10 w-10">
<img class="h-10 w-10 rounded-full" src="http://static.photos/people/200x200/1" alt="">
</div>
<div class="ml-4">
<div class="text-sm font-medium text-gray-900">Sarah Johnson</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
sarah@example.com
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
Admin
</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
Active
</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
2 hours ago
</td>
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
<button class="text-indigo-600 hover:text-indigo-900 mr-4" onclick="showEditUserModal()">Edit</button>
<button class="text-red-600 hover:text-red-900">Delete</button>
</td>
</tr>
<tr class="table-row">
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="flex-shrink-0 h-10 w-10">
<img class="h-10 w-10 rounded-full" src="http://static.photos/people/200x200/2" alt="">
</div>
<div class="ml-4">
<div class="text-sm font-medium text-gray-900">Michael Brown</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
michael@example.com
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
Editor
</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
Active
</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
1 day ago
</td>
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
<button class="text-indigo-600 hover:text-indigo-900 mr-4">Edit</button>
<button class="text-red-600 hover:text-red-900">Delete</button>
</td>
</tr>
<tr class="table-row">
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="flex-shrink-0 h-10 w-10">
<img class="h-10 w-10 rounded-full" src="http://static.photos/people/200x200/3" alt="">
</div>
<div class="ml-4">
<div class="text-sm font-medium text-gray-900">Jessica Wilson</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
jessica@example.com
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
Viewer
</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">
Pending
</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
3 days ago
</td>
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
<button class="text-indigo-600 hover:text-indigo-900 mr-4">Edit</button>
<button class="text-red-600 hover:text-red-900">Delete</button>
</td>
</tr>
<tr class="table-row">
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="flex-shrink-0 h-10 w-10">
<img class="h-10 w-10 rounded-full" src="http://static.photos/people/200x200/4" alt="">
</div>
<div class="ml-4">
<div class="text-sm font-medium text-gray-900">Robert Davis</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
robert@example.com
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
Editor
</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
Active
</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
30 mins ago
</td>
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
<button class="text-indigo-600 hover:text-indigo-900 mr-4">Edit</button>
<button class="text-red-600 hover:text-red-900">Delete</button>
</td>
</tr>
</tbody>
</table>
</div>
<div class="px-6 py-4 border-t border-gray-200">
<div class="flex items-center justify-between">
<div class="text-sm text-gray-500">
Showing <span class="font-medium">1</span> to <span class="font-medium">4</span> of <span class="font-medium">24</span> users
</div>
<div class="flex space-x-2">
<button class="px-3 py-1 border border-gray-300 rounded-md text-gray-700 bg-white text-sm font-medium hover:bg-gray-50">
Previous
</button>
<button class="px-3 py-1 border border-gray-300 rounded-md text-white bg-indigo-600 text-sm font-medium hover:bg-indigo-700">
1
</button>
<button class="px-3 py-1 border border-gray-300 rounded-md text-gray-700 bg-white text-sm font-medium hover:bg-gray-50">
2
</button>
<button class="px-3 py-1 border border-gray-300 rounded-md text-gray-700 bg-white text-sm font-medium hover:bg-gray-50">
3
</button>
<button class="px-3 py-1 border border-gray-300 rounded-md text-gray-700 bg-white text-sm font-medium hover:bg-gray-50">
Next
</button>
</div>
</div>
</div>
</div>
</div>
<!-- Orders Section -->
<div class="content-section" id="orders-section">
<div class="flex items-center justify-between mb-6">
<h2 class="text-2xl font-bold text-gray-900 dark:text-white">Order Management</h2>
<div class="flex items-center space-x-4">
<button class="flex items-center px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-all duration-200">
<i data-feather="plus" class="w-4 h-4 mr-2"></i>
Create Order
</button>
<button class="flex items-center px-4 py-2 text-indigo-600 border border-indigo-600 rounded-lg hover:bg-indigo-50 transition-all duration-200 dark:border-indigo-400 dark:text-indigo-400 dark:hover:bg-indigo-900">
<i data-feather="download" class="w-4 h-4 mr-2"></i>
Export
</button>
</div>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow overflow-hidden" data-aos="fade-up">
<div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
<div class="flex items-center justify-between">
<div class="flex items-center space-x-4">
<div class="relative">
<i data-feather="search" class="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400"></i>
<input type="text" placeholder="Search orders..." class="pl-10 pr-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 dark:bg-gray-700 dark:text-white">
</div>
<select class="border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-2 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 dark:bg-gray-700 dark:text-white">
<option>All Status</option>
<option>Pending</option>
<option>Processing</option>
<option>Shipped</option>
<option>Delivered</option>
<option>Cancelled</option>
</select>
</div>
</div>
</div>
<div class="overflow-x-auto">
<table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
<thead class="bg-gray-50 dark:bg-gray-700">
<tr>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
Order ID
</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
Customer
</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
Date
</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
Amount
</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
Status
</th>
<th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">
Actions
</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200 dark:bg-gray-800 dark:divide-gray-700">
<tr class="table-row hover:bg-gray-50 dark:hover:bg-gray-700">
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white">#5678</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<img class="h-8 w-8 rounded-full" src="http://static.photos/people/200x200/5" alt="">
<div class="ml-4">
<div class="text-sm font-medium text-gray-900 dark:text-white">Alex Morgan</div>
<div class="text-sm text-gray-500 dark:text-gray-400">alex@example.com</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">Jun 12, 2023</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white">$245.50</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200">
Completed
</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
<button class="text-indigo-600 hover:text-indigo-900 dark:text-indigo-400 dark:hover:text-indigo-300 mr-3">View</button>
<button class="text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-300">Edit</button>
</td>
</tr>
<tr class="table-row hover:bg-gray-50 dark:hover:bg-gray-700">
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white">#5677</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<img class="h-8 w-8 rounded-full" src="http://static.photos/people/200x200/6" alt="">
<div class="ml-4">
<div class="text-sm font-medium text-gray-900 dark:text-white">Jamie Smith</div>
<div class="text-sm text-gray-500 dark:text-gray-400">jamie@example.com</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">Jun 11, 2023</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white">$189.99</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200">
Shipped
</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
<button class="text-indigo-600 hover:text-indigo-900 dark:text-indigo-400 dark:hover:text-indigo-300 mr-3">View</button>
<button class="text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-300">Edit</button>
</td>
</tr>
<tr class="table-row hover:bg-gray-50 dark:hover:bg-gray-700">
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white">#5676</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<img class="h-8 w-8 rounded-full" src="http://static.photos/people/200x200/7" alt="">
<div class="ml-4">
<div class="text-sm font-medium text-gray-900 dark:text-white">Taylor Wilson</div>
<div class="text-sm text-gray-500 dark:text-gray-400">taylor@example.com</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">Jun 10, 2023</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white">$365.75</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200">
Processing
</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
<button class="text-indigo-600 hover:text-indigo-900 dark:text-indigo-400 dark:hover:text-indigo-300 mr-3">View</button>
<button class="text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-300">Edit</button>
</td>
</tr>
<tr class="table-row hover:bg-gray-50 dark:hover:bg-gray-700">
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white">#5675</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<img class="h-8 w-8 rounded-full" src="http://static.photos/people/200x200/8" alt="">
<div class="ml-4">
<div class="text-sm font-medium text-gray-900 dark:text-white">Casey Johnson</div>
<div class="text-sm text-gray-500 dark:text-gray-400">casey@example.com</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">Jun 9, 2023</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-white">$120.25</td>
<td class="px-6 py-4 whitespace-nowrap">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200">
Cancelled
</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
<button class="text-indigo-600 hover:text-indigo-900 dark:text-indigo-400 dark:hover:text-indigo-300 mr-3">View</button>
<button class="text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-300">Edit</button>
</td>
</tr>
</tbody>
</table>
</div>
<div class="px-6 py-4 border-t border-gray-200 dark:border-gray-700">
<div class="flex items-center justify-between">
<div class="text-sm text-gray-500 dark:text-gray-400">
Showing <span class="font-medium">1</span> to <span class="font-medium">4</span> of <span class="font-medium">24</span> orders
</div>
<div class="flex space-x-2">
<button class="px-3 py-1 border border-gray-300 dark:border-gray-600 rounded-md text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 text-sm font-medium hover:bg-gray-50 dark:hover:bg-gray-600">
Previous
</button>
<button class="px-3 py-1 border border-gray-300 dark:border-gray-600 rounded-md text-white bg-indigo-600 text-sm font-medium hover:bg-indigo-700">
1
</button>
<button class="px-3 py-1 border border-gray-300 dark:border-gray-600 rounded-md text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 text-sm font-medium hover:bg-gray-50 dark:hover:bg-gray-600">
2
</button>
<button class="px-3 py-1 border border-gray-300 dark:border-gray-600 rounded-md text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 text-sm font-medium hover:bg-gray-50 dark:hover:bg-gray-600">
3
</button>
<button class="px-3 py-1 border border-gray-300 dark:border-gray-600 rounded-md text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 text-sm font-medium hover:bg-gray-50 dark:hover:bg-gray-600">
Next
</button>
</div>
</div>
</div>
</div>
</div>
<!-- Settings Section -->
<div class="content-section" id="settings-section">
<div class="flex items-center justify-between mb-6">
<h2 class="text-2xl font-bold text-gray-900 dark:text-white">Settings</h2>
</div>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6 lg:col-span-2">
<h3 class="text-lg font-semibold mb-4 text-gray-900 dark:text-white">General Settings</h3>
<div class="space-y-4">
<div class="flex items-center justify-between">
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Dark Mode</label>
<p class="text-xs text-gray-500 dark:text-gray-400">Toggle dark/light mode</p>
</div>
<button id="dark-mode-toggle" class="relative inline-flex h-6 w-11 items-center rounded-full bg-gray-200 dark:bg-indigo-600 transition-colors duration-200">
<span class="sr-only">Dark Mode</span>
<span class="inline-block h-4 w-4 transform rounded-full bg-white dark:translate-x-5 transition-transform duration-200"></span>
</button>
</div>
<div>
<label for="language" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Language</label>
<select id="language" class="mt-1 block w-full border border-gray-300 dark:border-gray-600 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 dark:bg-gray-700 dark:text-white">
<option>English</option>
<option>Spanish</option>
<option>French</option>
<option>German</option>
<option>Chinese</option>
</select>
</div>
<div>
<label for="timezone" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Timezone</label>
<select id="timezone" class="mt-1 block w-full border border-gray-300 dark:border-gray-600 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 dark:bg-gray-700 dark:text-white">
<option>(UTC-12:00) International Date Line West</option>
<option>(UTC-08:00) Pacific Time (US & Canada)</option>
<option>(UTC-05:00) Eastern Time (US & Canada)</option>
<option>(UTC+00:00) Greenwich Mean Time</option>
<option>(UTC+08:00) Beijing, Singapore</option>
</select>
</div>
</div>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
<h3 class="text-lg font-semibold mb-4 text-gray-900 dark:text-white">Notifications</h3>
<div class="space-y-4">
<div class="flex items-start">
<div class="flex items-center h-5">
<input id="email-notifications" type="checkbox" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded dark:border-gray-600">
</div>
<div class="ml-3 text-sm">
<label for="email-notifications" class="font-medium text-gray-700 dark:text-gray-300">Email notifications</label>
<p class="text-gray-500 dark:text-gray-400">Receive email notifications</p>
</div>
</div>
<div class="flex items-start">
<div class="flex items-center h-5">
<input id="push-notifications" type="checkbox" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded dark:border-gray-600" checked>
</div>
<div class="ml-3 text-sm">
<label for="push-notifications" class="font-medium text-gray-700 dark:text-gray-300">Push notifications</label>
<p class="text-gray-500 dark:text-gray-400">Receive push notifications</p>
</div>
</div>
<div class="flex items-start">
<div class="flex items-center h-5">
<input id="sms-notifications" type="checkbox" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded dark:border-gray-600">
</div>
<div class="ml-3 text-sm">
<label for="sms-notifications" class="font-medium text-gray-700 dark:text-gray-300">SMS notifications</label>
<p class="text-gray-500 dark:text-gray-400">Receive SMS notifications</p>
</div>
</div>
</div>
</div>
</div>
<div class="mt-6 bg-white dark:bg-gray-800 rounded-lg shadow p-6">
<h3 class="text-lg font-semibold mb-4 text-gray-900 dark:text-white">Security</h3>
<div class="space-y-4">
<div class="flex items-center justify-between">
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Two-Factor Authentication</label>
<p class="text-xs text-gray-500 dark:text-gray-400">Add an extra layer of security</p>
</div>
<button class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-all duration-200">
Enable
</button>
</div>
<div class="flex items-center justify-between">
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Password</label>
<p class="text-xs text-gray-500 dark:text-gray-400">Last changed 3 days ago</p>
</div>
<button class="px-4 py-2 text-indigo-600 border border-indigo-600 rounded-lg hover:bg-indigo-50 transition-all duration-200 dark:border-indigo-400 dark:text-indigo-400 dark:hover:bg-indigo-900">
Change
</button>
</div>
<div class="flex items-center justify-between">
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Logout All Devices</label>
<p class="text-xs text-gray-500 dark:text-gray-400">This will log you out from all active sessions</p>
</div>
<button class="px-4 py-2 text-red-600 border border-red-600 rounded-lg hover:bg-red-50 transition-all duration-200 dark:border-red-400 dark:text-red-400 dark:hover:bg-red-900">
Logout All
</button>
</div>
</div>
</div>
<div class="mt-6 flex justify-end">
<button class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-all duration-200">
Save Changes
</button>
</div>
</div>
<!-- Analytics Section -->
<div class="content-section" id="analytics-section">
<div class="flex items-center justify-between mb-6">
<h2 class="text-2xl font-bold text-gray-900 dark:text-white">Analytics Dashboard</h2>
<div class="flex space-x-4">
<button class="px-3 py-2 text-sm bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-all duration-200">
<i data-feather="download" class="w-4 h-4 mr-2"></i>
Export Data
</button>
<select class="border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-2 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 dark:bg-gray-700 dark:text-white text-sm">
<option>Last 7 Days</option>
<option>Last 30 Days</option>
<option>Last 90 Days</option>
<option>This Year</option>
</select>
</div>
</div>
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6" data-aos="fade-up">
<h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Traffic Overview</h3>
<canvas id="trafficChart" height="250"></canvas>
</div>
<div class="lg:col-span-2 bg-white dark:bg-gray-800 rounded-lg shadow p-6" data-aos="fade-up" data-aos-delay="100">
<h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Revenue Performance</h3>
<canvas id="revenueChart" height="250"></canvas>
</div>
</div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6" data-aos="fade-up">
<h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Top Products</h3>
<canvas id="topProductsChart" height="300"></canvas>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6" data-aos="fade-up" data-aos-delay="100">
<h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">Customer Acquisition</h3>
<canvas id="acquisitionChart" height="300"></canvas>
</div>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow overflow-hidden" data-aos="fade-up">
<div class="px-6 py-4 border-b border-gray-200 dark:border-gray-700">
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">Key Metrics</h3>
</div>
<div class="grid grid-cols-2 md:grid-cols-4 gap-6 p-6">
<div class="text-center">
<p class="text-sm text-gray-500 dark:text-gray-400 mb-1">Avg. Session Duration</p>
<p class="text-2xl font-bold text-gray-900 dark:text-white">2m 47s</p>
<p class="text-xs text-green-500 flex items-center justify-center">
<i data-feather="arrow-up" class="w-3 h-3 mr-1"></i>
12.5% from last week
</p>
</div>
<div class="text-center">
<p class="text-sm text-gray-500 dark:text-gray-400 mb-1">Conversion Rate</p>
<p class="text-2xl font-bold text-gray-900 dark:text-white">3.2%</p>
<p class="text-xs text-green-500 flex items-center justify-center">
<i data-feather="arrow-up" class="w-3 h-3 mr-1"></i>
8.2% from last week
</p>
</div>
<div class="text-center">
<p class="text-sm text-gray-500 dark:text-gray-400 mb-1">Bounce Rate</p>
<p class="text-2xl font-bold text-gray-900 dark:text-white">42.5%</p>
<p class="text-xs text-red-500 flex items-center justify-center">
<i data-feather="arrow-down" class="w-3 h-3 mr-1"></i>
3.4% from last week
</p>
</div>
<div class="text-center">
<p class="text-sm text-gray-500 dark:text-gray-400 mb-1">Pages per Visit</p>
<p class="text-2xl font-bold text-gray-900 dark:text-white">3.8</p>
<p class="text-xs text-green-500 flex items-center justify-center">
<i data-feather="arrow-up" class="w-3 h-3 mr-1"></i>
1.7% from last week
</p>
</div>
</div>
</div>
</div>
<!-- Products Section -->
<div class="content-section" id="products-section">
<div class="flex items-center justify-between mb-6">
<h2 class="text-2xl font-bold text-gray-900">Product Management</h2>
<button class="flex items-center px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-all duration-200" onclick="showAddProductModal()">
<i data-feather="plus" class="w-4 h-4 mr-2"></i>
Add Product
</button>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-6">
<div class="bg-white rounded-lg shadow overflow-hidden" data-aos="fade-up">
<div class="relative">
<img class="w-full h-48 object-cover" src="http://static.photos/technology/640x360/1" alt="Product">
<div class="absolute top-2 left-2 bg-green-500 text-white text-xs px-2 py-1 rounded-full">
In Stock
</div>
</div>
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-900">Wireless Headphones</h3>
<p class="text-sm text-gray-500 mt-1">Premium sound with noise cancellation</p>
<div class="flex items-center justify-between mt-4">
<span class="text-lg font-bold text-gray-900">$199.99</span>
<div class="flex space-x-2">
<button class="p-2 text-indigo-600 hover:bg-indigo-50 rounded-full">
<i data-feather="edit" class="w-4 h-4"></i>
</button>
<button class="p-2 text-red-600 hover:bg-red-50 rounded-full">
<i data-feather="trash-2" class="w-4 h-4"></i>
</button>
</div>
</div>
</div>
</div>
<div class="bg-white rounded-lg shadow overflow-hidden" data-aos="fade-up" data-aos-delay="100">
<div class="relative">
<img class="w-full h-48 object-cover" src="http://static.photos/technology/640x360/2" alt="Product">
<div class="absolute top-2 left-2 bg-red-500 text-white text-xs px-2 py-1 rounded-full">
Out of Stock
</div>
</div>
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-900">Smart Watch</h3>
<p class="text-sm text-gray-500 mt-1">Track fitness and stay connected</p>
<div class="flex items-center justify-between mt-4">
<span class="text-lg font-bold text-gray-900">$249.99</span>
<div class="flex space-x-2">
<button class="p-2 text-indigo-600 hover:bg-indigo-50 rounded-full">
<i data-feather="edit" class="w-4 h-4"></i>
</button>
<button class="p-2 text-red-600 hover:bg-red-50 rounded-full">
<i data-feather="trash-2" class="w-4 h-4"></i>
</button>
</div>
</div>
</div>
</div>
<div class="bg-white rounded-lg shadow overflow-hidden" data-aos="fade-up" data-aos-delay="200">
<div class="relative">
<img class="w-full h-48 object-cover" src="http://static.photos/technology/640x360/3" alt="Product">
<div class="absolute top-2 left-2 bg-green-500 text-white text-xs px-2 py-1 rounded-full">
In Stock
</div>
</div>
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-900">Bluetooth Speaker</h3>
<p class="text-sm text-gray-500 mt-1">Portable with 20hr battery life</p>
<div class="flex items-center justify-between mt-4">
<span class="text-lg font-bold text-gray-900">$79.99</span>
<div class="flex space-x-2">
<button class="p-2 text-indigo-600 hover:bg-indigo-50 rounded-full">
<i data-feather="edit" class="w-4 h-4"></i>
</button>
<button class="p-2 text-red-600 hover:bg-red-50 rounded-full">
<i data-feather="trash-2" class="w-4 h-4"></i>
</button>
</div>
</div>
</div>
</div>
<div class="bg-white rounded-lg shadow overflow-hidden" data-aos="fade-up" data-aos-delay="300">
<div class="relative">
<img class="w-full h-48 object-cover" src="http://static.photos/technology/640x360/4" alt="Product">
<div class="absolute top-2 left-2 bg-yellow-500 text-white text-xs px-2 py-1 rounded-full">
Low Stock
</div>
</div>
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-900">Wireless Charger</h3>
<p class="text-sm text-gray-500 mt-1">Fast charging for all devices</p>
<div class="flex items-center justify-between mt-4">
<span class="text-lg font-bold text-gray-900">$49.99</span>
<div class="flex space-x-2">
<button class="p-2 text-indigo-600 hover:bg-indigo-50 rounded-full">
<i data-feather="edit" class="w-4 h-4"></i>
</button>
<button class="p-2 text-red-600 hover:bg-red-50 rounded-full">
<i data-feather="trash-2" class="w-4 h-4"></i>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Add User Modal -->
<div class="fixed inset-0 overflow-y-auto z-50" id="add-user-modal" style="display: none;">
<div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center">
<div class="fixed inset-0 transition-opacity" aria-hidden="true">
<div class="absolute inset-0 bg-gray-500 dark:bg-gray-900 opacity-75"></div>
</div>
<span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">​</span>
<div class="inline-block align-bottom bg-white dark:bg-gray-800 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full" role="dialog" aria-modal="true" aria-labelledby="modal-headline">
<div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
<div class="flex items-start justify-between">
<h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-white" id="modal-headline">
Add New User
</h3>
<button class="text-gray-400 hover:text-gray-500" onclick="hideAddUserModal()">
<i data-feather="x" class="w-6 h-6"></i>
</button>
</div>
<div class="mt-6 space-y-4">
<div>
<label for="name" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Full Name</label>
<input type="text" id="name" name="name" class="mt-1 block w-full border border-gray-300 dark:border-gray-600 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 dark:bg-gray-700 dark:text-white">
</div>
<div>
<label for="email" class="block text-sm font-medium text-gray-700">Email Address</label>
<input type="email" id="email" name="email" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
</div>
<div>
<label for="role" class="block text-sm font-medium text-gray-700">Role</label>
<select id="role" name="role" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
<option>Admin</option>
<option>Editor</option>
<option>Viewer</option>
</select>
</div>
<div>
<label for="password" class="block text-sm font-medium text-gray-700">Password</label>
<input type="password" id="password" name="password" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
</div>
</div>
</div>
<div class="bg-gray-50 dark:bg-gray-700 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
<button type="button" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-indigo-600 text-base font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:ml-3 sm:w-auto sm:text-sm">
Add User
</button>
<button type="button" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm" onclick="hideAddUserModal()">
Cancel
</button>
</div>
</div>
</div>
</div>
<!-- Add Product Modal -->
<div class="fixed inset-0 overflow-y-auto z-50" id="add-product-modal" style="display: none;">
<div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center">
<div class="fixed inset-0 transition-opacity" aria-hidden="true">
<div class="absolute inset-0 bg-gray-500 opacity-75"></div>
</div>
<span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">​</span>
<div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full" role="dialog" aria-modal="true" aria-labelledby="modal-headline">
<div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
<div class="flex items-start justify-between">
<h3 class="text-lg leading-6 font-medium text-gray-900" id="modal-headline">
Add New Product
</h3>
<button class="text-gray-400 hover:text-gray-500" onclick="hideAddProductModal()">
<i data-feather="x" class="w-6 h-6"></i>
</button>
</div>
<div class="mt-6 space-y-4">
<div>
<label for="product-name" class="block text-sm font-medium text-gray-700">Product Name</label>
<input type="text" id="product-name" name="product-name" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
</div>
<div>
<label for="product-description" class="block text-sm font-medium text-gray-700">Description</label>
<textarea id="product-description" name="product-description" rows="3" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"></textarea>
</div>
<div>
<label for="product-price" class="block text-sm font-medium text-gray-700">Price</label>
<input type="text" id="product-price" name="product-price" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
</div>
<div>
<label for="product-stock" class="block text-sm font-medium text-gray-700">Stock Quantity</label>
<input type="number" id="product-stock" name="product-stock" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
</div>
<div>
<label for="product-category" class="block text-sm font-medium text-gray-700">Category</label>
<select id="product-category" name="product-category" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500">
<option>Electronics</option>
<option>Clothing</option>
<option>Home & Garden</option>
<option>Beauty</option>
<option>Sports</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-gray-700">Product Image</label>
<div class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-md">
<div class="space-y-1 text-center">
<div class="flex text-sm text-gray-600">
<label for="product-image" class="relative cursor-pointer bg-white rounded-md font-medium text-indigo-600 hover:text-indigo-500 focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-indigo-500">
<span>Upload a file</span>
<input id="product-image" name="product-image" type="file" class="sr-only">
</label>
</div>
<p class="text-xs text-gray-500">
PNG, JPG, GIF up to 10MB
</p>
</div>
</div>
</div>
</div>
</div>
<div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
<button type="button" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-indigo-600 text-base font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:ml-3 sm:w-auto sm:text-sm">
Add Product
</button>
<button type="button" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm" onclick="hideAddProductModal()">
Cancel
</button>
</div>
</div>
</div>
</div>
<script>
// Initialize AOS
AOS.init({
duration: 800,
easing: 'ease-in-out',
once: true
});
// Initialize Feather Icons
feather.replace();
// Toggle mobile sidebar
function toggleMobileSidebar() {
const mobileSidebar = document.getElementById('mobile-sidebar');
mobileSidebar.style.display = mobileSidebar.style.display === 'none' ? 'block' : 'none';
}
// Show/hide sections
function showSection(section) {
// Hide all sections
document.querySelectorAll('.content-section').forEach(s => s.classList.remove('active'));
// Show selected section
document.getElementById(`${section}-section`).classList.add('active');
// Update page title
let title = 'Dashboard';
switch (section) {
case 'users': title = 'User Management'; break;
case 'products': title = 'Products'; break;
case 'orders': title = 'Orders'; break;
case 'analytics': title = 'Analytics'; break;
case 'settings': title = 'Settings'; break;
}
document.getElementById('page-title').textContent = title;
// Close mobile sidebar if open
if (window.innerWidth < 768) {
toggleMobileSidebar();
}
}
// User modal functions
function showAddUserModal() {
document.getElementById('add-user-modal').style.display = 'block';
}
function hideAddUserModal() {
document.getElementById('add-user-modal').style.display = 'none';
}
function showEditUserModal() {
// Would be similar to showAddUserModal but with prefilled data
alert('Edit user modal would open here');
}
// Product modal functions
function showAddProductModal() {
document.getElementById('add-product-modal').style.display = 'block';
}
function hideAddProductModal() {
document.getElementById('add-product-modal').style.display = 'none';
}
// Dark Mode Toggle
document.getElementById('dark-mode-toggle').addEventListener('click', function() {
const isDark = localStorage.getItem('darkMode') === 'true';
localStorage.setItem('darkMode', !isDark);
document.documentElement.classList.toggle('dark');
});
// Initialize Chart.js
document.addEventListener('DOMContentLoaded', function() {
// Dashboard sales chart
const ctx = document.getElementById('salesChart').getContext('2d');
const salesChart = new Chart(ctx, {
type: 'line',
data: {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
datasets: [{
label: 'Sales',
data: [12000, 19000, 15000, 20000, 24000, 28000, 32000],
backgroundColor: 'rgba(99, 102, 241, 0.1)',
borderColor: 'rgba(99, 102, 241, 1)',
borderWidth: 2,
tension: 0.4,
pointBackgroundColor: 'rgba(99, 102, 241, 1)',
pointBorderColor: '#fff',
pointRadius: 4,
pointHoverRadius: 6
}]
},
options: {
responsive: true,
plugins: {
legend: {
display: false
},
tooltip: {
backgroundColor: '#1e293b',
titleFont: {size: 14, weight: 'bold'},
bodyFont: {size: 12},
padding: 12,
cornerRadius: 8,
intersect: false,
mode: 'index'
}
},
scales: {
y: {
beginAtZero: true,
grid: {
drawBorder: false
},
ticks: {
callback: function(value) {
return '$' + value.toLocaleString();
}
}
},
x: {
grid: {
display: false,
drawBorder: false
}
}
}
}
});
// Analytics traffic chart
const trafficCtx = document.getElementById('trafficChart').getContext('2d');
new Chart(trafficCtx, {
type: 'doughnut',
data: {
labels: ['Direct', 'Organic Search', 'Social', 'Referral', 'Email'],
datasets: [{
data: [25, 40, 15, 12, 8],
backgroundColor: [
'rgba(99, 102, 241, 0.8)',
'rgba(16, 185, 129, 0.8)',
'rgba(59, 130, 246, 0.8)',
'rgba(245, 158, 11, 0.8)',
'rgba(219, 39, 119, 0.8)'
],
borderWidth: 0
}]
},
options: {
responsive: true,
cutout: '70%',
plugins: {
legend: {
position: 'right',
}
}
}
});
// Analytics revenue chart
const revenueCtx = document.getElementById('revenueChart').getContext('2d');
new Chart(revenueCtx, {
type: 'bar',
data: {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
datasets: [{
label: 'Revenue',
data: [12000, 19000, 15000, 20000, 24000, 28000, 32000],
backgroundColor: 'rgba(99, 102, 241, 0.8)',
borderRadius: 4
}]
},
options: {
responsive: true,
plugins: {
legend: {
display: false
}
},
scales: {
y: {
beginAtZero: true,
grid: {
drawBorder: false
}
},
x: {
grid: {
display: false,
drawBorder: false
}
}
}
}
});
// Analytics top products chart
const topProductsCtx = document.getElementById('topProductsChart').getContext('2d');
new Chart(topProductsCtx, {
type: 'bar',
data: {
labels: ['Wireless Headphones', 'Smart Watch', 'Bluetooth Speaker', 'Wireless Charger', 'Laptop Backpack'],
datasets: [{
label: 'Units Sold',
data: [1250, 980, 750, 620, 480],
backgroundColor: 'rgba(16, 185, 129, 0.8)',
borderRadius: 4
}]
},
options: {
indexAxis: 'y',
responsive: true,
plugins: {
legend: {
display: false
}
},
scales: {
x: {
beginAtZero: true,
grid: {
drawBorder: false
}
},
y: {
grid: {
display: false,
drawBorder: false
}
}
}
}
});
// Analytics acquisition chart
const acquisitionCtx = document.getElementById('acquisitionChart').getContext('2d');
new Chart(acquisitionCtx, {
type: 'radar',
data: {
labels: ['Organic Search', 'Direct', 'Social', 'Email', 'Referral', 'Paid Ads'],
datasets: [{
label: 'New Customers',
data: [65, 59, 90, 81, 56, 40],
backgroundColor: 'rgba(99, 102, 241, 0.2)',
borderColor: 'rgba(99, 102, 241, 1)',
borderWidth: 2,
pointBackgroundColor: 'rgba(99, 102, 241, 1)'
}, {
label: 'Returning Customers',
data: [28, 48, 40, 19, 96, 27],
backgroundColor: 'rgba(16, 185, 129, 0.2)',
borderColor: 'rgba(16, 185, 129, 1)',
borderWidth: 2,
pointBackgroundColor: 'rgba(16, 185, 129, 1)'
}]
},
options: {
responsive: true,
plugins: {
legend: {
position: 'top',
}
}
}
});
});
</script>
</body>
</html>