🚀 Quick Tour — 6 หน้าหลัก
คลิกที่ card เพื่อเปิดดูหน้านั้นแบบสดๆ ใน popup (มี API key ส่งให้อัตโนมัติ)
1 🚀 เริ่มต้นใช้งาน
Dashboard นี้ทำงานบนเว็บเบราเซอร์ — ไม่ต้องติดตั้งอะไร เปิดได้จากทุก device
1.1 URL หลัก
# Production
https://dashboard.namnan.co.th/
├── /index.html 💰 รายรับ
├── /expenses.html 💸 รายจ่าย (3 แถบ)
├── /financial.html 📊 การเงิน (P&L)
├── /hia-nuad.html 👨 เฮียหนวด channel
├── /fb-ads.html 📊 FB Ads (CPC/CPM/ROAS)
├── /history.html 📜 ประวัติเดือนที่แล้ว
└── /guide.html 📖 หน้านี้ (คู่มือ)
1.2 เดือนที่แสดง (default = ก.ค. 2026)
ทุกหน้ามี 📅 เดือน filter ที่มุมซ้ายบน — เปลี่ยนได้ตามต้องการ:
- ค่า default: 2026-07 (เดือนปัจจุบัน)
- คลิกที่ช่อง 📅 เดือน เพื่อเลือกเดือนอื่น
- ระบบจะ auto-reload ข้อมูลทันที
1.3 ธีมมืด/สว่าง
คลิกปุ่ม 🌓 ธีม ที่มุมขวาบน หรือกด Ctrl+Shift+D
💡
Tip: ทุกหน้าจำค่าธีมไว้ใน localStorage — refresh แล้วไม่ reset
2 💰 หน้ารายรับ (Revenue)
ภาพรวมยอดขาย เดือนที่เลือก พร้อม เฮียหนวด highlight
2.1 Hero Box (บนสุด)
แสดงตัวเลขสรุป:
- 💰 รายรับรวม — total revenue
- 💵 เงินสด — payment_status = "ชำระเงินแล้ว"
- ⏳ ค้างชำระ (AR) — payment_status = "รอชำระเงิน"
- 📦 Avg/order — รายรับ ÷ orders
2.2 เฮียหนวด Box (orange gradient)
แสดงยอดขาย เฉพาะ TSM (ไฟตุ้ม 250W) — ทุก channel รวมกัน
🎯
ใช้ดูว่า "เพจเฮียหนวด" ยิงแอดแล้วทำยอดได้จริงเท่าไหร่
2.3 Channel cards
แสดงทุก channel ที่มียอดขายในเดือนนั้น — card ที่มี 👨 คือเฮียหนวด
2.4 Top Products table
10 อันดับ product ที่ทำยอดสูงสุด เรียงตาม revenue (sets/lights = จำนวนดวง)
2.5 วิธีใช้งานจริง
Step 2: ดู Hero Box — ถ้า Cash น้อยกว่า AR แสดงว่าลูกค้าค้างเยอะ
Step 3: ดู เฮียหนวด Box — เทียบกับตัวเลขใน FB Ads
Step 4: คลิก chart ดูรายวัน
3 💸 หน้ารายจ่าย — ค่าแอด (Facebook Ads)
รายจ่ายค่าโฆษณา — auto-sync จาก adsfb.namnan.co.th ทุกคืน 23:30
3.1 วิธีเปิดแถบค่าแอด
Step 2: คลิกที่ card 💸 ค่าแอด (สีชมพู) ที่ด้านบน
Step 3: ดู KPI + ตาราง bills (1 invoice ต่อวัน, มาจาก FB-ADS-YYYY-MM-DD)
3.2 KPI ที่แสดง
- 💸 ยอดรวม — total spend ในเดือน
- ✅ จ่ายแล้ว — paid (Facebook Ads auto-marked)
- ⏳ ค้างจ่าย — pending
- 📅 เฉลี่ย/วัน — total ÷ bills
3.3 ตาราง — คอลัมน์
วันที่ | Invoice (FB-ADS-YYYY-MM-DD) | ผู้ขาย | จำนวนเงิน | รายละเอียด | สถานะ
3.4 Sync ใหม่ด้วยตัวเอง (optional)
ถ้าอยาก sync ทันที (ไม่รอ 23:30) — ใช้ API:
# Sync 2 วันล่าสุด
curl -X POST "https://dashboard.namnan.co.th/api/sync/facebook-ads?days=2&dry_run=false" \
-H "X-API-Key: $API_KEY"
⚠️
ถ้ายอด spend รายวันมากกว่า ฿500 ควรตรวจสอบ — อาจมี campaign ที่ ROAS ต่ำ
4 📦 หน้ารายจ่าย — ค่ากล่อง (Shipping + Packing)
ค่าขนส่ง + ค่าจ้างแพ็ค — รวมเป็น "ค่ากล่อง" ในการคำนวณต้นทุน
4.1 หมวดหมู่ที่รวมอยู่
- ค่าขนส่ง — Kerry Express, ไปรษณีย์ไทย, J&T
- ค่าจ้าง — ค่าแพ็คของ (พนักงาน)
4.2 วิธีดู
Step 2: ดู KPI: ยอดรวม / จ่ายแล้ว / จำนวน supplier
Step 3: ตารางจะแสดงทุก bill ของ Kerry/ไปรษณีย์/พนักงาน
4.3 เพิ่ม bill ใหม่
ผ่าน API:
curl -X POST "https://dashboard.namnan.co.th/api/expenses" \
-H "X-API-Key: $API_KEY" \
-H "Content-Type: application/json" \
-d '{
"date": "2026-07-20",
"category": "ค่าขนส่ง",
"amount": 450,
"vendor": "Kerry Express",
"description": "ส่ง Kerry 5 ชิ้น",
"invoice_no": "KR-2026-07-20",
"status": "pending"
}'
5 🛒 หน้ารายจ่าย — ค่าสินค้า (Product cost)
ต้นทุนสินค้า (COGS) แยกตาม เจ้าที่สั่ง (Supplier) — คลิก supplier เพื่อดู bills ย่อย
5.1 ตาราง Suppliers
แต่ละ row คือ supplier 1 ราย — คลิก ▶ เพื่อขยายดู bills:
▶ บริษัท ไทยซันยูนไลท์ เทรดดิ้ง จำกัด | 2 bills | ฿23,574 | - | ฿23,574
└─ 2026-07-08 | ORVC69070018 | TSM-625 LED 250W × 24 ชิ้น | ฿11,787
└─ 2026-07-16 | ORVC69070025 | TSM-625 LED 250W × 24 ชิ้น | ฿11,787
▶ บริษัท ทองรัศมีอิเลคทริคเวิรคส์ จำกัด | 2 bills | ฿17,250 | - | ฿17,250
└─ 2026-07-08 | BA-M (3SF60) × 5 + BA-L (3SF120) × 5 | ฿6,250
└─ 2026-07-14 | BA-M (3SF60) × 20 | ฿11,000
5.2 Suppliers ปัจจุบัน (ก.ค. 2026)
- ไทยซันยูนไลท์ — TSM-625 LED 250W (ไฟตุ้ม)
- ทองรัศมีอิเลคทริคเวิรคส์ — BA-M, BA-L (โคมไฟหัวเสา)
- อัศวกรไฟฟ้ากรุ๊ป — หลอด LED 200W, แผงโซล่าเซลล์
- Supplier A — BA-M, BA-S (ต้นทุนทั่วไป)
5.3 วิธีใช้งาน
Step 2: ดู KPI: ยอดรวม / จ่ายแล้ว / ค้างจ่าย / จำนวน bills
Step 3: คลิก ▶ หน้า supplier เพื่อขยาย bills
Step 4: คลิก 📥 CSV เพื่อ export
💎
Insight: ถ้าค้างจ่าย supplier เยอะ → ต่อรอง cash flow ได้ ดูได้จากช่อง "ค้างจ่าย"
5.4 ตัวกรอง
- 📅 เดือน — เลือกเดือนที่ต้องการ
- 📦 รวมยอดเก่า — เปิด = รวม expenses_history (เดือนก่อนหน้า), ปิด = เฉพาะ expenses (เดือนปัจจุบัน)
6 📊 หน้าการเงิน (P&L)
สรุปกำไร-ขาดทุน — รายรับ - รายจ่าย = กำไรสุทธิ
6.1 สูตร
กำไรสุทธิ = รายรับ (cash + AR) - รายจ่าย (paid + pending)
6.2 ตัวชี้วัดสำคัญ
- Cash Flow จริง = Cash - Paid expenses
- กำไร (ถ้าเก็บ AR ได้) = (Cash + AR) - (Paid + Pending)
- Margin = กำไร ÷ รายรับ × 100%
6.3 ดูยอดแยกตาม TSM (เฮียหนวด)
ในหน้านี้มี section TSM (ไฟตุ้ม 250W) — กำไรเฉพาะ product นี้:
- Revenue: ฿31,990
- COGS (ค่าสินค้า): ฿20,627
- Ad spend: ฿1,714
- กำไรสุทธิ: ฿11,363 (35.5%)
7 👨 หน้าเฮียหนวด (Channel Analysis)
วิเคราะห์ channel "เฮียหนวด" แยก — ดูว่า FB ads ทำยอดขายเท่าไหร่ (Ad-attribution)
7.1 Channel ID
- Channel ID: 8
- Name: เฮียหนวด
- ครอบคลุม: orders ที่มาจาก "เพจเฮียหนวด" (ทั้ง TSM และ non-TSM)
7.2 KPI
- 💰 Revenue — total revenue ของ channel
- 📦 Orders — จำนวน orders
- 📊 Ad-attributed — orders ที่มาจาก ads (มี ad_id)
- 🌱 Organic — orders ที่ไม่ได้มาจาก ads
- 📈 ROI — revenue ÷ ad_spend
7.3 ตัวกรอง
- 📅 เดือน
- 🎯 TSM only (toggle) — เฉพาะ product ไฟตุ้ม หรือทั้งหมด
8 📊 หน้า FB Ads Dashboard
วิเคราะห์ Facebook Ads แบบเต็ม — CPC, CPM, CTR, ROAS + drill down ราย campaign
8.1 3 ฟีเจอร์หลัก
1. Drill down ราย Campaign — คลิก row ในตาราง "Campaign Comparison" เพื่อ filter เฉพาะ campaign นั้น
2. Date range filter — เลือก since/until เพื่อดูช่วงเวลา (เช่น 7/6-7/16 vs 7/17-7/27)
3. ทุก metrics — Spend, Impressions, Clicks, CTR, CPC, CPM, Purchases, CPA, FB Rev, ROAS
8.2 TSM filter (default)
Default = "TSM (ไฟตุ้ม 250W)" — exclude campaigns "หัวเสา" กับ "หัสเสา"
# Include TSM
"tsm" in name.lower() OR "TSM" in name OR "ไฟตุ้ม" in name
# Exclude
NOT ("หัวเสา" in name OR "หัสเสา" in name)
8.3 ดาวน์โหลด CSV
คลิก 📥 CSV — จะได้ไฟล์ที่มี TSM total + campaigns + daily rows
9 🔌 API Reference (สำหรับ dev)
Backend: FastAPI ที่ https://dashboard.namnan.co.th/api/*
9.1 Authentication
ทุก endpoint ต้องส่ง API key (ยกเว้น /health):
# 3 วิธี:
1. Header: -H "X-API-Key: $API_KEY"
2. Query: ?key=$API_KEY
3. localStorage: localStorage.setItem("ds_api_key", "...")
4. URL: ?api_key=$API_KEY
9.2 Endpoints หลัก
# Revenue / Orders
GET /orders?month=2026-07&limit=100
GET /orders/count?month=2026-07
GET /financial/summary?month=2026-07
GET /financial/daily?month=2026-07
GET /financial/by-product?month=2026-07
GET /financial/by-supplier?month=2026-07
GET /channels/breakdown?month=2026-07
# Expenses
GET /expenses?month=2026-07&category=ค่าโฆษณา&include_history=true
GET /expenses/by-category?month=2026-07
GET /expenses/by-supplier?month=2026-07&category=ค่าสินค้า
POST /expenses # create new bill
POST /expenses/{id}/mark-paid
# Channels
GET /hia-nuad?month=2026-07 # เฮียหนวด detail
# FB Ads
GET /fb-dashboard?since=2026-07-01&until=2026-07-27&tsm_only=true
POST /sync/facebook-ads?days=2&dry_run=false
# Admin
POST /admin/rebuild-summary?month=2026-07
GET /admin/health-detailed
GET /health # public, no auth
9.3 ตัวอย่าง: ดึงยอดขาย ก.ค. 2026
# bash + curl + jq
curl -s -H "X-API-Key: $API_KEY" \
"https://dashboard.namnan.co.th/api/financial/summary?month=2026-07" | jq
# ผลลัพธ์
{
"month": "2026-07",
"cash": 48504,
"ar": 24642,
"total_revenue": 73146,
"orders": 61,
"total_exp": 24718.61,
"net_cash": 23785.39
}
10 ⌨️ คีย์ลัด & Tips
10.1 คีย์ลัด
Ctrl + Shift + D # สลับธีม (มืด/สว่าง)
10.2 Tips การใช้งาน
💡
เร็ว: กด F5 รีเฟรชหน้า = ดึงข้อมูลล่าสุด (cache 30s)
💡
เปรียบเทียบ: เปิด 2 tabs (1 tab ก.ค., 1 tab มิ.ย.) เทียบกัน
💡
Export: ทุกหน้ามีปุ่ม 📥 CSV — กดแล้วได้ไฟล์ .csv พร้อม BOM (Excel อ่านภาษาไทยได้)
⚠️
URL แชร์: ถ้าแชร์ link ให้คนอื่น ใส่ ?api_key=... ต่อท้าย — เค้าจะเห็นข้อมูลเหมือนกัน
10.3 Troubleshooting
❌
"API 401" = API key ผิด → ตรวจ localStorage หรือ URL ?api_key=
🔄
ข้อมูลไม่อัปเดต → FB ads sync ตอน 23:30 น. ทุกคืน (cron) — หรือเรียก POST /sync/facebook-ads เอง