<!DOCTYPE html>
<html lang="th">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dashboard แสดงข้อมูล</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<h1><span class="material-icons" style="vertical-align: bottom;">dashboard</span> Dashboard</h1>
</header>
<main>
<section id="controls">
<h2><span class="material-icons" style="vertical-align: bottom;">tune</span> Controls</h2>
<div class="control-group">
<label for="datasource-select">Select Data Source:</label>
<select id="datasource-select">
<option value="all" selected>All Sources</option>
<option value="db_sales">Sales Overview (DB)</option>
<option value="api_revenue">Monthly Revenue (API)</option>
<option value="csv_metrics">Key Metrics (CSV)</option>
</select>
</div>
<div class="control-group">
<button id="refresh-button"><span class="material-icons" style="vertical-align: bottom;">refresh</span> Manual Refresh</button>
</div>
<div id="error-message-area" class="error-message" style="display:none;"></div>
</section>
<section id="widgets">
<h2><span class="material-icons" style="vertical-align: bottom;">widgets</span> Data Widgets</h2>
<div class="widget-container" id="cards-container-wrapper">
<h3><span class="material-icons" style="vertical-align: bottom;">credit_card</span> Key Metrics Cards</h3>
<div id="cards-display-area" class="cards-layout">
<!-- Data cards will be displayed here -->
</div>
</div>
<div class="widget-container" id="table-container-wrapper">
<h3><span class="material-icons" style="vertical-align: bottom;">table_chart</span> Data Table</h3>
<div id="table-controls">
<!-- Controls for table customization can be added here -->
</div>
<div class="table-responsive">
<table id="data-table">
<thead></thead>
<tbody></tbody>
</table>
</div>
</div>
<div class="widget-container" id="chart-container-wrapper">
<h3><span class="material-icons" style="vertical-align: bottom;">bar_chart</span> Data Chart</h3>
<div class="chart-controls">
<label for="chart-type-select">Chart Type:</label>
<select id="chart-type-select">
<option value="bar" selected>Bar</option>
<option value="line">Line</option>
<option value="pie">Pie</option>
<option value="doughnut">Doughnut</option>
<option value="polarArea">Polar Area</option>
<option value="radar">Radar</option>
</select>
</div>
<div class="chart-canvas-container">
<canvas id="data-chart"></canvas>
</div>
</div>
</section>
</main>
<footer>
<p>© 2023-2024 Dashboard Project by Jules</p>
</footer>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="js/script.js"></script>
</body>
</html>