<!DOCTYPE html>
<html lang="th">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Business Performance Infographic | July 2025</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Kanit:wght@400;700&display=swap" rel="stylesheet">
<style>
:root {
--bg-color: #F8F9FA;
--card-bg: #FFFFFF;
--text-color: #343A40;
--header-color: #212529;
--accent-color-1: #FF6384; /* Playful Pink/Red */
--accent-color-2: #36A2EB; /* Playful Blue */
--accent-color-3: #FFCE56; /* Playful Yellow */
--profit-color: #4BC0C0; /* Teal for Profit */
--revenue-color: #9966FF; /* Purple for Revenue */
--margin-color: #F79F1F; /* Orange for Margin */
--shadow: 0 4px 12px rgba(0,0,0,0.08);
--border-radius: 12px;
}
body {
font-family: 'Kanit', sans-serif;
background-color: var(--bg-color);
color: var(--text-color);
margin: 0;
padding: 20px;
display: flex;
justify-content: center;
}
.container {
max-width: 1200px;
width: 100%;
display: grid;
gap: 25px;
}
.card {
background-color: var(--card-bg);
border-radius: var(--border-radius);
padding: 25px;
box-shadow: var(--shadow);
border: 1px solid #E9ECEF;
}
header {
text-align: center;
padding: 20px;
background: linear-gradient(135deg, var(--accent-color-1), var(--accent-color-2));
color: white;
border-radius: var(--border-radius);
}
header h1 {
margin: 0;
font-size: 2.5rem;
}
header p {
margin: 5px 0 0;
font-size: 1.2rem;
opacity: 0.9;
}
.kpi-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
}
.kpi-card {
text-align: center;
padding: 20px;
border-radius: var(--border-radius);
color: white;
transition: transform 0.2s;
}
.kpi-card:hover {
transform: translateY(-5px);
}
.kpi-card .value {
font-size: 2.2rem;
font-weight: 700;
}
.kpi-card .label {
font-size: 1rem;
opacity: 0.9;
}
.bg-revenue { background-color: var(--revenue-color); }
.bg-profit { background-color: var(--profit-color); }
.bg-margin { background-color: var(--margin-color); }
.charts-container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 25px;
align-items: center;
}
.chart-wrapper {
height: 350px;
}
.tabs {
display: flex;
gap: 10px;
margin-bottom: 20px;
border-bottom: 2px solid #DEE2E6;
}
.tab-button {
padding: 10px 20px;
cursor: pointer;
border: none;
background-color: transparent;
font-family: 'Kanit', sans-serif;
font-size: 1.1rem;
font-weight: 700;
color: #868E96;
border-bottom: 3px solid transparent;
transition: all 0.2s;
}
.tab-button.active {
color: var(--accent-color-2);
border-bottom-color: var(--accent-color-2);
}
.tab-content {
display: none;
}
.tab-content.active {
display: block;
}
.top-menu-list {
list-style: none;
padding: 0;
margin: 0;
}
.top-menu-item {
display: flex;
align-items: center;
padding: 15px;
border-bottom: 1px solid #F1F3F5;
transition: background-color 0.2s;
}
.top-menu-item:last-child {
border-bottom: none;
}
.top-menu-item:hover {
background-color: #F8F9FA;
}
.rank {
font-size: 1.5rem;
font-weight: 700;
color: var(--accent-color-3);
margin-right: 20px;
width: 30px;
text-align: center;
}
.menu-details {
flex-grow: 1;
}
.menu-name {
font-weight: 700;
font-size: 1.1rem;
}
.menu-profit {
color: var(--profit-color);
font-weight: 700;
}
.menu-margin {
font-size: 0.9rem;
color: var(--text-color);
opacity: 0.7;
}
.recommendations {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
}
.rec-card {
text-align: center;
}
.rec-card h3 {
color: var(--header-color);
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.rec-card .icon {
font-size: 2rem;
}
.rec-card ul {
text-align: left;
padding-left: 20px;
font-size: 0.95rem;
}
.rec-hot { color: var(--accent-color-1); }
.rec-cold { color: var(--accent-color-2); }
.rec-bev { color: var(--profit-color); }
footer {
text-align: center;
margin-top: 20px;
font-size: 0.9rem;
color: #6C757D;
}
h2 {
text-align: center;
color: var(--header-color);
font-size: 1.8rem;
margin-bottom: 30px;
}
/* Responsive */
@media (max-width: 992px) {
.charts-container {
grid-template-columns: 1fr;
}
}
@media (max-width: 768px) {
body { padding: 10px; }
.container { gap: 15px; }
header h1 { font-size: 2rem; }
.card { padding: 20px; }
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>Business Performance Review</h1>
<p>ผลการดำเนินงานเชิงลึก | กรกฎาคม 2025</p>
</header>
<div class="card">
<h2>The Big Picture: ภาพรวมผลประกอบการ</h2>
<div class="kpi-container">
<div class="kpi-card bg-revenue">
<div class="value">฿1,187,125</div>
<div class="label">รายได้รวม (Total Revenue)</div>
</div>
<div class="kpi-card bg-profit">
<div class="value">฿690,582</div>
<div class="label">กำไรขั้นต้น (Gross Profit)</div>
</div>
<div class="kpi-card bg-margin">
<div class="value">58.17%</div>
<div class="label">อัตรากำไรขั้นต้น (Gross Margin)</div>
</div>
</div>
</div>
<div class="card">
<h2>Profit Breakdown: กำไรมาจากไหน?</h2>
<div class="charts-container">
<div class="chart-wrapper">
<canvas id="profitContributionChart"></canvas>
</div>
<div class="chart-wrapper">
<canvas id="marginByCategoryChart"></canvas>
</div>
</div>
</div>
<div class="card">
<h2>The Profit Champions: 5 อันดับเมนูทำกำไรสูงสุด</h2>
<div class="tabs">
<button class="tab-button active" onclick="openTab(event, 'hot-kitchen')">ครัวร้อน 🔥</button>
<button class="tab-button" onclick="openTab(event, 'cold-kitchen')">ครัวเย็น ❄️</button>
<button class="tab-button" onclick="openTab(event, 'beverages')">เครื่องดื่ม 🍹</button>
</div>
<div id="hot-kitchen" class="tab-content active">
<ol class="top-menu-list">
<li class="top-menu-item"><span class="rank">1</span><div class="menu-details"><div class="menu-name">ข้าวหน้าแฮมเบิร์กเนื้อวากิว</div><div><span class="menu-profit">฿33,007</span> | <span class="menu-margin">Margin: 80.1%</span></div></div></li>
<li class="top-menu-item"><span class="rank">2</span><div class="menu-details"><div class="menu-name">ข้าวหน้าหมูคุโรบูตะ ไข่แดงดอง</div><div><span class="menu-profit">฿13,457</span> | <span class="menu-margin">Margin: 77.0%</span></div></div></li>
<li class="top-menu-item"><span class="rank">3</span><div class="menu-details"><div class="menu-name">ข้าวหน้าเนื้อวากิว ไข่แดงดอง</div><div><span class="menu-profit">฿12,985</span> | <span class="menu-margin">Margin: 63.1%</span></div></div></li>
<li class="top-menu-item"><span class="rank">4</span><div class="menu-details"><div class="menu-name">ปลาแซลมอนย่างซีอิ้ว</div><div><span class="menu-profit">฿9,825</span> | <span class="menu-margin">Margin: 57.7%</span></div></div></li>
<li class="top-menu-item"><span class="rank">5</span><div class="menu-details"><div class="menu-name">ไก่คาราเกะ</div><div><span class="menu-profit">฿9,009</span> | <span class="menu-margin">Margin: 79.4%</span></div></div></li>
</ol>
</div>
<div id="cold-kitchen" class="tab-content">
<ol class="top-menu-list">
<li class="top-menu-item"><span class="rank">1</span><div class="menu-details"><div class="menu-name">มันปูย่าง</div><div><span class="menu-profit">฿22,973</span> | <span class="menu-margin">Margin: 54.2%</span></div></div></li>
<li class="top-menu-item"><span class="rank">2</span><div class="menu-details"><div class="menu-name">ชาบู หมูคุโรบูตะ</div><div><span class="menu-profit">฿16,663</span> | <span class="menu-margin">Margin: 61.2%</span></div></div></li>
<li class="top-menu-item"><span class="rank">3</span><div class="menu-details"><div class="menu-name">แซลมอน ซาชิมิ</div><div><span class="menu-profit">฿14,933</span> | <span class="menu-margin">Margin: 48.1%</span></div></div></li>
<li class="top-menu-item"><span class="rank">4</span><div class="menu-details"><div class="menu-name">ชาบู เนื้อวากิว</div><div><span class="menu-profit">฿13,808</span> | <span class="menu-margin">Margin: 59.9%</span></div></div></li>
<li class="top-menu-item"><span class="rank">5</span><div class="menu-details"><div class="menu-name">แตงกวาน้ำมันพริกรายุ</div><div><span class="menu-profit">฿11,777</span> | <span class="menu-margin">Margin: 88.1%</span></div></div></li>
</ol>
</div>
<div id="beverages" class="tab-content">
<ol class="top-menu-list">
<li class="top-menu-item"><span class="rank">1</span><div class="menu-details"><div class="menu-name">อาซาฮีทาวน์ : 3 ลิตร</div><div><span class="menu-profit">฿30,415</span> | <span class="menu-margin">Margin: 42.1%</span></div></div></li>
<li class="top-menu-item"><span class="rank">2</span><div class="menu-details"><div class="menu-name">เบียร์สิงห์</div><div><span class="menu-profit">฿29,673</span> | <span class="menu-margin">Margin: 42.4%</span></div></div></li>
<li class="top-menu-item"><span class="rank">3</span><div class="menu-details"><div class="menu-name">อาซาฮีสด M : 350ml</div><div><span class="menu-profit">฿15,961</span> | <span class="menu-margin">Margin: 50.1%</span></div></div></li>
<li class="top-menu-item"><span class="rank">4</span><div class="menu-details"><div class="menu-name">อาซาฮี ขวดใหญ่</div><div><span class="menu-profit">฿15,814</span> | <span class="menu-margin">Margin: 35.7%</span></div></div></li>
<li class="top-menu-item"><span class="rank">5</span><div class="menu-details"><div class="menu-name">น้ำดื่ม</div><div><span class="menu-profit">฿15,068</span> | <span class="menu-margin">Margin: 87.5%</span></div></div></li>
</ol>
</div>
</div>
<div class="card">
<h2>Strategic Recommendations: ข้อเสนอแนะเชิงกลยุทธ์</h2>
<div class="recommendations">
<div class="rec-card">
<h3><span class="icon rec-hot">⭐</span> โปรโมท The Stars</h3>
<p>ปกป้องและผลักดันเมนูกำไรสูงที่ขายดีอยู่แล้ว</p>
<ul>
<li>ทำสัญลักษณ์ "Must Try" บนเมนู</li>
<li>เน้นโปรโมทบน Social Media</li>
<li>ตัวอย่าง: ข้าวหน้าแฮมเบิร์ก, มันปูย่าง</li>
</ul>
</div>
<div class="rec-card">
<h3><span class="icon rec-cold">⚙️</span> ปรับปรุง The Workhorses</h3>
<p>เพิ่มกำไรจากเมนูขายดีแต่ Margin ไม่สูงมาก</p>
<ul>
<li>พิจารณาปรับราคาขึ้นเล็กน้อย (3-5%)</li>
<li>เจรจาต้นทุนกับ Supplier</li>
<li>ตัวอย่าง: เบียร์สิงห์, แซลมอน ซาชิมิ</li>
</ul>
</div>
<div class="rec-card">
<h3><span class="icon rec-bev">💎</span> ใช้ประโยชน์ The Superstars</h3>
<p>สร้างกำไรสูงสุดจากเมนู Margin สูงลิ่ว</p>
<ul>
<li>อบรมพนักงานให้เสนอขายเชิงรุก</li>
<li>ห้ามนำไปจัดโปรโมชั่นลดราคา</li>
<li>ตัวอย่าง: น้ำดื่ม, แตงกวาน้ำมันพริกรายุ</li>
</ul>
</div>
</div>
</div>
<footer>
<p>Analysis by Mars | Your Strategic Partner</p>
</footer>
</div>
<script>
// Chart.js - Profit Contribution
const ctx1 = document.getElementById('profitContributionChart').getContext('2d');
new Chart(ctx1, {
type: 'doughnut',
data: {
labels: ['ครัวร้อน', 'ครัวเย็น', 'เครื่องดื่ม', 'ไม่มีหมวดหมู่'],
datasets: [{
label: 'สัดส่วนกำไร',
data: [274985.49, 216650.80, 181074.83, 17870.40],
backgroundColor: [
'#FF6384', // Hot Kitchen
'#36A2EB', // Cold Kitchen
'#4BC0C0', // Beverages
'#FFCE56' // Uncategorized
],
borderColor: '#FFFFFF',
borderWidth: 3
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
title: {
display: true,
text: 'สัดส่วนกำไรตามหมวดหมู่ (Profit Contribution)',
font: { size: 16, family: 'Kanit' }
},
legend: {
position: 'bottom',
}
}
}
});
// Chart.js - Margin by Category
const ctx2 = document.getElementById('marginByCategoryChart').getContext('2d');
new Chart(ctx2, {
type: 'bar',
data: {
labels: ['ไม่มีหมวดหมู่', 'ครัวร้อน', 'ครัวเย็น', 'เครื่องดื่ม'],
datasets: [{
label: 'อัตรากำไรขั้นต้น (%)',
data: [100.0, 67.65, 55.18, 48.92],
backgroundColor: [
'#FFCE56',
'#FF6384',
'#36A2EB',
'#4BC0C0'
],
borderRadius: 5
}]
},
options: {
indexAxis: 'y',
responsive: true,
maintainAspectRatio: false,
plugins: {
title: {
display: true,
text: 'ประสิทธิภาพการทำกำไร (Profit Margin %)',
font: { size: 16, family: 'Kanit' }
},
legend: {
display: false
}
},
scales: {
x: {
beginAtZero: true,
max: 100,
ticks: {
callback: function(value) {
return value + '%'
}
}
}
}
}
});
// Tabs functionality
function openTab(evt, tabName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tab-content");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tab-button");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(tabName).style.display = "block";
evt.currentTarget.className += " active";
}
</script>
</body>
</html>