149 lines
6.9 KiB
HTML
149 lines
6.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Order Dashboard</title>
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
<link rel="stylesheet" href="style.css">
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<header>
|
|
<h1><i class="fas fa-chart-line"></i> Order Dashboard</h1>
|
|
<p style="color: #94a3b8;">Real-time order management with filtering and sorting</p>
|
|
</header>
|
|
|
|
<div class="stats" id="stats">
|
|
<div class="stat-card">
|
|
<i class="fas fa-file-invoice-dollar"></i>
|
|
<div class="value" id="totalOrders">0</div>
|
|
<div class="label">Total Orders</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<i class="fas fa-globe-americas"></i>
|
|
<div class="value" id="totalCountries">0</div>
|
|
<div class="label">Countries</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<i class="fas fa-file-alt"></i>
|
|
<div class="value" id="totalVAT">0</div>
|
|
<div class="label">Entries with VAT</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="controls">
|
|
<button class="refresh-btn" onclick="loadData()">
|
|
<i class="fas fa-sync-alt"></i> Refresh Data
|
|
</button>
|
|
<button class="refresh-btn" id="authBtn" onclick="toggleAuth()" style="background: var(--secondary);">
|
|
<i class="fas fa-key"></i> <span id="authBtnText">Enter Credentials</span>
|
|
</button>
|
|
<div class="search-box">
|
|
<i class="fas fa-search"></i>
|
|
<input type="text" id="globalSearch" placeholder="Search orders, countries, VAT numbers..." oninput="handleGlobalSearch(this.value)">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="table-container">
|
|
<div class="table-header">
|
|
<div class="table-info">
|
|
<i class="fas fa-table" style="color: var(--primary);"></i>
|
|
<span id="tableCount">0 orders</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="table-wrapper">
|
|
<table id="dataTable">
|
|
<thead>
|
|
<tr>
|
|
<th>
|
|
Month
|
|
<div class="filter-indicator" onclick="toggleFilter('Month')">
|
|
<i class="fas fa-filter"></i>
|
|
</div>
|
|
<div class="sort-indicator" onclick="sortTable('Month')">
|
|
<i class="fas fa-arrow-up"></i>
|
|
<i class="fas fa-arrow-down"></i>
|
|
</div>
|
|
</th>
|
|
<th>
|
|
Odoo AR Nr
|
|
<div class="filter-indicator" onclick="toggleFilter('Odoo_AR_Nr')">
|
|
<i class="fas fa-filter"></i>
|
|
</div>
|
|
<div class="sort-indicator" onclick="sortTable('Odoo_AR_Nr')">
|
|
<i class="fas fa-arrow-up"></i>
|
|
<i class="fas fa-arrow-down"></i>
|
|
</div>
|
|
</th>
|
|
<th>
|
|
Order ID
|
|
<div class="filter-indicator" onclick="toggleFilter('Order_ID')">
|
|
<i class="fas fa-filter"></i>
|
|
</div>
|
|
<div class="sort-indicator" onclick="sortTable('Order_ID')">
|
|
<i class="fas fa-arrow-up"></i>
|
|
<i class="fas fa-arrow-down"></i>
|
|
</div>
|
|
</th>
|
|
<th>
|
|
Country
|
|
<div class="filter-indicator" onclick="toggleFilter('Country_Name')">
|
|
<i class="fas fa-filter"></i>
|
|
</div>
|
|
<div class="sort-indicator" onclick="sortTable('Country_Name')">
|
|
<i class="fas fa-arrow-up"></i>
|
|
<i class="fas fa-arrow-down"></i>
|
|
</div>
|
|
</th>
|
|
<th>
|
|
VAT
|
|
<div class="filter-indicator" onclick="toggleFilter('VAT')">
|
|
<i class="fas fa-filter"></i>
|
|
</div>
|
|
<div class="sort-indicator" onclick="sortTable('VAT')">
|
|
<i class="fas fa-arrow-up"></i>
|
|
<i class="fas fa-arrow-down"></i>
|
|
</div>
|
|
</th>
|
|
<th>
|
|
Remark
|
|
<div class="filter-indicator" onclick="toggleFilter('Remark')">
|
|
<i class="fas fa-filter"></i>
|
|
</div>
|
|
<div class="sort-indicator" onclick="sortTable('Remark')">
|
|
<i class="fas fa-arrow-up"></i>
|
|
<i class="fas fa-arrow-down"></i>
|
|
</div>
|
|
</th>
|
|
<th>
|
|
Recheck
|
|
<div class="filter-indicator" onclick="toggleFilter('recheck')">
|
|
<i class="fas fa-filter"></i>
|
|
</div>
|
|
<div class="sort-indicator" onclick="sortTable('recheck')">
|
|
<i class="fas fa-arrow-up"></i>
|
|
<i class="fas fa-arrow-down"></i>
|
|
</div>
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="tableBody">
|
|
<tr>
|
|
<td colspan="7" class="loading">
|
|
<div class="spinner"></div>
|
|
<span>Loading data...</span>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="filterContainer"></div>
|
|
<script src="app.js"></script>
|
|
</body>
|
|
</html>
|