<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dashboard - POS System</title>
<link rel="stylesheet" href="../assets/css/fonts.css">
<link rel="stylesheet" href="../assets/css/styles.css">
</head>
<body>
<div class="app-container">
<aside class="sidebar">
<div class="sidebar-header">
<a href="index.html" class="sidebar-brand">
<i class="icon-cart"></i>
<span>POS System</span>
</a>
</div>
<ul class="sidebar-menu">
<li>
<a href="index.html" class="active">
<i class="icon-dashboard"></i>
<span>Dashboard</span>
</a>
</li>
<li>
<a href="inventory.html">
<i class="icon-product"></i>
<span>Inventory</span>
</a>
</li>
<li>
<a href="../pos/index.html">
<i class="icon-cart"></i>
<span>POS</span>
</a>
</li>
<li>
<a href="sales.html">
<i class="icon-stats"></i>
<span>Sales</span>
</a>
</li>
<li>
<a href="reports.html">
<i class="icon-report"></i>
<span>Reports</span>
</a>
</li>
<li>
<a href="users.html">
<i class="icon-users"></i>
<span>Users</span>
</a>
</li>
<li>
<a href="settings.html">
<i class="icon-settings"></i>
<span>Settings</span>
</a>
</li>
</ul>
</aside>
<main class="content-area">
<div class="topbar">
<button class="toggle-sidebar">
<i class="icon-bars"></i>
</button>
<div class="user-dropdown">
<button class="user-dropdown-toggle">
<div class="user-avatar">
<i class="icon-user"></i>
</div>
<span class="user-name">Admin</span>
<i class="icon-down"></i>
</button>
<div class="user-dropdown-menu">
<a href="#"><i class="icon-user"></i> Profile</a>
<a href="../admin/settings.html"><i class="icon-settings"></i> Settings</a>
<a href="#" id="logoutBtn"><i class="icon-signout"></i> Logout</a>
</div>
</div>
</div>
<div class="page-header">
<h1>Dashboard</h1>
<p>Overview of your business performance</p>
</div>
<div class="stats-grid">
<div class="stat-card">
<div class="stat-icon">
<i class="icon-money"></i>
</div>
<div class="stat-details">
<div class="stat-title">Today's Sales</div>
<div class="stat-value" id="todaySales">฿0.00</div>
</div>
</div>
<div class="stat-card">
<div class="stat-icon">
<i class="icon-cart"></i>
</div>
<div class="stat-details">
<div class="stat-title">Today's Orders</div>
<div class="stat-value" id="todayOrders">0</div>
</div>
</div>
<div class="stat-card">
<div class="stat-icon">
<i class="icon-product"></i>
</div>
<div class="stat-details">
<div class="stat-title">Low Stock Items</div>
<div class="stat-value" id="lowStockItems">0</div>
</div>
</div>
<div class="stat-card">
<div class="stat-icon">
<i class="icon-users"></i>
</div>
<div class="stat-details">
<div class="stat-title">Total Customers</div>
<div class="stat-value" id="totalCustomers">0</div>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="card">
<div class="card-header">
<h2 class="card-title">Sales Overview</h2>
<div class="card-tools">
<select id="salesPeriod">
<option value="week">Last 7 days</option>
<option value="month">This Month</option>
<option value="year">This Year</option>
</select>
</div>
</div>
<div class="card-body">
<div class="chart-container" id="salesChart">
<!-- Chart will be rendered here -->
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="card">
<div class="card-header">
<h2 class="card-title">Recent Sales</h2>
<a href="sales.html" class="btn btn-sm btn-primary">View All</a>
</div>
<div class="card-body">
<div class="table-container">
<table class="data-table" id="recentSalesTable">
<thead>
<tr>
<th>Reference</th>
<th>Date</th>
<th>Customer</th>
<th>Items</th>
<th>Amount</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<!-- Sales data will be populated here -->
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="card">
<div class="card-header">
<h2 class="card-title">Low Stock Items</h2>
<a href="inventory.html" class="btn btn-sm btn-primary">View All</a>
</div>
<div class="card-body">
<div class="table-container">
<table class="data-table" id="lowStockTable">
<thead>
<tr>
<th>SKU</th>
<th>Product</th>
<th>Category</th>
<th>Current Stock</th>
<th>Threshold</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<!-- Low stock data will be populated here -->
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</main>
</div>
<div id="notification-container"></div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="../assets/js/config.js"></script>
<script src="../assets/js/common.js"></script>
<script src="../assets/js/dashboard.js"></script>
</body>
</html>