x
This commit is contained in:
Your Name committed
1 parent
4fcdd8a816
commit
f49776f9cb
14 files changed
+4006
-15
No files matched your search
@@ -0,0 +1,61 @@
|
||||
# รายการสินค้ากลุ่ม Oil Ozone สำหรับกำหนดสูตร BOM (Production)
|
||||
|
||||
> **เป้าหมาย:** กำหนดสูตร BOM อัตราส่วน หัวน้ำหอม 8% + DPG 92% + ขวดและฝา 4 บาท (ทุกขนาด: 30ml, 60ml, 85ml, 120ml)
|
||||
> **อัปเดตล่าสุด:** 18/10/2569 13:05:32
|
||||
> **จำนวนสินค้าทั้งหมด:** 45 รายการ
|
||||
|
||||
## 📦 สรุปสถานะภาพรวม
|
||||
- **ตั้งค่าเสร็จแล้ว (CONFIGURED):** 45 / 45 รายการ (100%)
|
||||
- **ยังไม่ได้ตั้งค่า (MISSING):** 0 รายการ
|
||||
- **ตั้งค่าบางส่วน (PARTIAL):** 0 รายการ
|
||||
- **พบวัตถุดิบหัวน้ำหอมตรงกลิ่น:** 45 / 45 รายการ
|
||||
|
||||
## 📋 ตารางรายละเอียดต้นทุน BOM และอัตรากำไร (Margin)
|
||||
|
||||
| # | ID | ชื่อสินค้า | หัวน้ำหอม (ราคา/ml) | ต้นทุน 30ml (กำไร%) | ต้นทุน 60ml (กำไร%) | ต้นทุน 85ml (กำไร%) | ต้นทุน 120ml (กำไร%) | สถานะ |
|
||||
| :-: | :-: | :--- | :--- | :-: | :-: | :-: | :-: | :-: |
|
||||
| 1 | **#1** | [ตะไคร้ Oil Ozone](https://admin.homaroma.shop/products/1/bom) | [ID: 41] หัวน้ำหอม กลิ่นตะไคร้ (฿4.5) | ฿18.94 (72.6%) | ฿33.88 (66.1%) | ฿46.33 (61.4%) | ฿63.76 (57.5%) | ✅ พร้อมขาย |
|
||||
| 2 | **#6** | [ลาเวนเดอร์ Oil Ozone](https://admin.homaroma.shop/products/6/bom) | [ID: 15] หัวน้ำหอม กลิ่นเฟรชลาเวนเดอร์ (฿1.2) | ฿11.02 (84%) | ฿18.04 (82%) | ฿23.89 (80.1%) | ฿32.08 (78.6%) | ✅ พร้อมขาย |
|
||||
| 3 | **#11** | [วานิลลา Oil Ozone](https://admin.homaroma.shop/products/11/bom) | [ID: 53] หัวน้ำหอม กลิ่นวานิลลา (฿3) | ฿15.34 (77.8%) | ฿26.68 (73.3%) | ฿36.13 (69.9%) | ฿49.36 (67.1%) | ✅ พร้อมขาย |
|
||||
| 4 | **#16** | [ซากุระ Oil Ozone](https://admin.homaroma.shop/products/16/bom) | [ID: 27] หัวน้ำหอม กลิ่นซากุระ (฿1.2) | ฿11.02 (84%) | ฿18.04 (82%) | ฿23.89 (80.1%) | ฿32.08 (78.6%) | ✅ พร้อมขาย |
|
||||
| 5 | **#21** | [มะลิ Oil Ozone](https://admin.homaroma.shop/products/21/bom) | [ID: 48] หัวน้ำหอม กลิ่นมะลิ (฿1.2) | ฿11.02 (84%) | ฿18.04 (82%) | ฿23.89 (80.1%) | ฿32.08 (78.6%) | ✅ พร้อมขาย |
|
||||
| 6 | **#26** | [ยูคาลิปตัส Oil Ozone](https://admin.homaroma.shop/products/26/bom) | [ID: 49] หัวน้ำหอม กลิ่นยูคาลิปตัส (฿3) | ฿15.34 (77.8%) | ฿26.68 (73.3%) | ฿36.13 (69.9%) | ฿49.36 (67.1%) | ✅ พร้อมขาย |
|
||||
| 7 | **#31** | [เฟรชลาเวนเดอร์ Oil Ozone](https://admin.homaroma.shop/products/31/bom) | [ID: 15] หัวน้ำหอม กลิ่นเฟรชลาเวนเดอร์ (฿1.2) | ฿11.02 (84%) | ฿18.04 (82%) | ฿23.89 (80.1%) | ฿32.08 (78.6%) | ✅ พร้อมขาย |
|
||||
| 8 | **#36** | [เปเปอร์มิ้น Oil Ozone](https://admin.homaroma.shop/products/36/bom) | [ID: 14] หัวน้ำหอม กลิ่นเปเปอร์มิ้น (฿3) | ฿15.34 (77.8%) | ฿26.68 (73.3%) | ฿36.13 (69.9%) | ฿49.36 (67.1%) | ✅ พร้อมขาย |
|
||||
| 9 | **#41** | [โอเชี่ยน Oil Ozone](https://admin.homaroma.shop/products/41/bom) | [ID: 21] หัวน้ำหอม กลิ่นโอเชี่ยน (฿3) | ฿15.34 (77.8%) | ฿26.68 (73.3%) | ฿36.13 (69.9%) | ฿49.36 (67.1%) | ✅ พร้อมขาย |
|
||||
| 10 | **#46** | [เซเว่นซี Oil Ozone](https://admin.homaroma.shop/products/46/bom) | [ID: 13] หัวน้ำหอม กลิ่นเซเว่นซี (฿3) | ฿15.34 (77.8%) | ฿26.68 (73.3%) | ฿36.13 (69.9%) | ฿49.36 (67.1%) | ✅ พร้อมขาย |
|
||||
| 11 | **#51** | [ดอกแก้ว Oil Ozone](https://admin.homaroma.shop/products/51/bom) | [ID: 28] หัวน้ำหอม กลิ่นดอกแก้ว (฿3) | ฿15.34 (77.8%) | ฿26.68 (73.3%) | ฿36.13 (69.9%) | ฿49.36 (67.1%) | ✅ พร้อมขาย |
|
||||
| 12 | **#56** | [ดอกโมก Oil Ozone](https://admin.homaroma.shop/products/56/bom) | [ID: 29] หัวน้ำหอม กลิ่นดอกโมก (฿3) | ฿15.34 (77.8%) | ฿26.68 (73.3%) | ฿36.13 (69.9%) | ฿49.36 (67.1%) | ✅ พร้อมขาย |
|
||||
| 13 | **#61** | [ลีลาวดี Oil Ozone](https://admin.homaroma.shop/products/61/bom) | [ID: 51] หัวน้ำหอม กลิ่นลีลาวดี (฿3) | ฿15.34 (77.8%) | ฿26.68 (73.3%) | ฿36.13 (69.9%) | ฿49.36 (67.1%) | ✅ พร้อมขาย |
|
||||
| 14 | **#66** | [ส้ม Oil Ozone](https://admin.homaroma.shop/products/66/bom) | [ID: 54] หัวน้ำหอม กลิ่นส้ม (฿3) | ฿15.34 (77.8%) | ฿26.68 (73.3%) | ฿36.13 (69.9%) | ฿49.36 (67.1%) | ✅ พร้อมขาย |
|
||||
| 15 | **#71** | [มะนาว Oil Ozone](https://admin.homaroma.shop/products/71/bom) | [ID: 46] หัวน้ำหอม กลิ่นมะนาว (฿3) | ฿15.34 (77.8%) | ฿26.68 (73.3%) | ฿36.13 (69.9%) | ฿49.36 (67.1%) | ✅ พร้อมขาย |
|
||||
| 16 | **#76** | [แคนตาลูป Oil Ozone](https://admin.homaroma.shop/products/76/bom) | [ID: 16] หัวน้ำหอม กลิ่นแคนตาลูป (฿3) | ฿15.34 (77.8%) | ฿26.68 (73.3%) | ฿36.13 (69.9%) | ฿49.36 (67.1%) | ✅ พร้อมขาย |
|
||||
| 17 | **#81** | [แอปเปิ้ลแดง Oil Ozone](https://admin.homaroma.shop/products/81/bom) | [ID: 19] หัวน้ำหอม กลิ่นแอปเปิ้ลแดง (฿3) | ฿15.34 (77.8%) | ฿26.68 (73.3%) | ฿36.13 (69.9%) | ฿49.36 (67.1%) | ✅ พร้อมขาย |
|
||||
| 18 | **#86** | [แอปเปิ้ลเขียว Oil Ozone](https://admin.homaroma.shop/products/86/bom) | [ID: 18] หัวน้ำหอม กลิ่นแอปเปิ้ลเขียว (฿3) | ฿15.34 (77.8%) | ฿26.68 (73.3%) | ฿36.13 (69.9%) | ฿49.36 (67.1%) | ✅ พร้อมขาย |
|
||||
| 19 | **#91** | [ดอกลิลลี่ Oil Ozone](https://admin.homaroma.shop/products/91/bom) | [ID: 40] หัวน้ำหอม กลิ่นดอกลิลลี่ (฿3) | ฿15.34 (77.8%) | ฿26.68 (73.3%) | ฿36.13 (69.9%) | ฿49.36 (67.1%) | ✅ พร้อมขาย |
|
||||
| 20 | **#96** | [โรสเมรี่ Oil Ozone](https://admin.homaroma.shop/products/96/bom) | [ID: 20] หัวน้ำหอม กลิ่นโรสเมรี่ (฿3) | ฿15.34 (77.8%) | ฿26.68 (73.3%) | ฿36.13 (69.9%) | ฿49.36 (67.1%) | ✅ พร้อมขาย |
|
||||
| 21 | **#101** | [อัญชัน Oil Ozone](https://admin.homaroma.shop/products/101/bom) | [ID: 57] หัวน้ำหอม กลิ่นอัญชัน (฿3) | ฿15.34 (77.8%) | ฿26.68 (73.3%) | ฿36.13 (69.9%) | ฿49.36 (67.1%) | ✅ พร้อมขาย |
|
||||
| 22 | **#106** | [กุหลาบแดง Oil Ozone](https://admin.homaroma.shop/products/106/bom) | [ID: 26] หัวน้ำหอม กลิ่นกุหลาบแดง (฿3) | ฿15.34 (77.8%) | ฿26.68 (73.3%) | ฿36.13 (69.9%) | ฿49.36 (67.1%) | ✅ พร้อมขาย |
|
||||
| 23 | **#111** | [หมากฝรั่ง Oil Ozone](https://admin.homaroma.shop/products/111/bom) | [ID: 55] หัวน้ำหอม กลิ่นหมากฝรั่ง (฿3) | ฿15.34 (77.8%) | ฿26.68 (73.3%) | ฿36.13 (69.9%) | ฿49.36 (67.1%) | ✅ พร้อมขาย |
|
||||
| 24 | **#116** | [ผลไม้รวม Oil Ozone](https://admin.homaroma.shop/products/116/bom) | [ID: 44] หัวน้ำหอม กลิ่นผลไม้รวม (฿3) | ฿15.34 (77.8%) | ฿26.68 (73.3%) | ฿36.13 (69.9%) | ฿49.36 (67.1%) | ✅ พร้อมขาย |
|
||||
| 25 | **#121** | [มะกรูด Oil Ozone](https://admin.homaroma.shop/products/121/bom) | [ID: 45] หัวน้ำหอม กลิ่นมะกรูด (฿3) | ฿15.34 (77.8%) | ฿26.68 (73.3%) | ฿36.13 (69.9%) | ฿49.36 (67.1%) | ✅ พร้อมขาย |
|
||||
| 26 | **#126** | [แซนด้าวูส Oil Ozone](https://admin.homaroma.shop/products/126/bom) | [ID: 17] หัวน้ำหอม กลิ่นแซนด้าวูส (฿3) | ฿15.34 (77.8%) | ฿26.68 (73.3%) | ฿36.13 (69.9%) | ฿49.36 (67.1%) | ✅ พร้อมขาย |
|
||||
| 27 | **#131** | [ดอกปีบ Oil Ozone](https://admin.homaroma.shop/products/131/bom) | [ID: 34] หัวน้ำหอม กลิ่นดอกปีบ (฿3) | ฿15.34 (77.8%) | ฿26.68 (73.3%) | ฿36.13 (69.9%) | ฿49.36 (67.1%) | ✅ พร้อมขาย |
|
||||
| 28 | **#136** | [ดอกบัว Oil Ozone](https://admin.homaroma.shop/products/136/bom) | [ID: 33] หัวน้ำหอม กลิ่นดอกบัว (฿3) | ฿15.34 (77.8%) | ฿26.68 (73.3%) | ฿36.13 (69.9%) | ฿49.36 (67.1%) | ✅ พร้อมขาย |
|
||||
| 29 | **#141** | [โอโซน Oil Ozone](https://admin.homaroma.shop/products/141/bom) | [ID: 22] หัวน้ำหอม กลิ่นโอโซน (฿3) | ฿15.34 (77.8%) | ฿26.68 (73.3%) | ฿36.13 (69.9%) | ฿49.36 (67.1%) | ✅ พร้อมขาย |
|
||||
| 30 | **#146** | [ไทยสปา Oil Ozone](https://admin.homaroma.shop/products/146/bom) | [ID: 23] หัวน้ำหอม กลิ่นไทยสปา (฿3) | ฿15.34 (77.8%) | ฿26.68 (73.3%) | ฿36.13 (69.9%) | ฿49.36 (67.1%) | ✅ พร้อมขาย |
|
||||
| 31 | **#151** | [กล้วย Oil Ozone](https://admin.homaroma.shop/products/151/bom) | [ID: 24] หัวน้ำหอม กลิ่นกล้วย (฿3) | ฿15.34 (77.8%) | ฿26.68 (73.3%) | ฿36.13 (69.9%) | ฿49.36 (67.1%) | ✅ พร้อมขาย |
|
||||
| 32 | **#156** | [กาแฟ Oil Ozone](https://admin.homaroma.shop/products/156/bom) | [ID: 25] หัวน้ำหอม กลิ่นกาแฟ (฿3) | ฿15.34 (77.8%) | ฿26.68 (73.3%) | ฿36.13 (69.9%) | ฿49.36 (67.1%) | ✅ พร้อมขาย |
|
||||
| 33 | **#161** | [ดอกชมนาด Oil Ozone](https://admin.homaroma.shop/products/161/bom) | [ID: 32] หัวน้ำหอม กลิ่นดอกชมนาด (฿3) | ฿15.34 (77.8%) | ฿26.68 (73.3%) | ฿36.13 (69.9%) | ฿49.36 (67.1%) | ✅ พร้อมขาย |
|
||||
| 34 | **#166** | [กลิ่นน้ำนม Oil Ozone](https://admin.homaroma.shop/products/166/bom) | [ID: 43] หัวน้ำหอม กลิ่นน้ำนม (฿3) | ฿15.34 (77.8%) | ฿26.68 (73.3%) | ฿36.13 (69.9%) | ฿49.36 (67.1%) | ✅ พร้อมขาย |
|
||||
| 35 | **#171** | [ดอกการะเวก Oil Ozone](https://admin.homaroma.shop/products/171/bom) | [ID: 30] หัวน้ำหอม กลิ่นดอกการะเวก (฿3) | ฿15.34 (77.8%) | ฿26.68 (73.3%) | ฿36.13 (69.9%) | ฿49.36 (67.1%) | ✅ พร้อมขาย |
|
||||
| 36 | **#176** | [ดอกจำปา Oil Ozone](https://admin.homaroma.shop/products/176/bom) | [ID: 31] หัวน้ำหอม กลิ่นดอกจำปา (฿3) | ฿15.34 (77.8%) | ฿26.68 (73.3%) | ฿36.13 (69.9%) | ฿49.36 (67.1%) | ✅ พร้อมขาย |
|
||||
| 37 | **#181** | [ดอกพิกุล Oil Ozone](https://admin.homaroma.shop/products/181/bom) | [ID: 35] หัวน้ำหอม กลิ่นดอกพิกุล (฿3) | ฿15.34 (77.8%) | ฿26.68 (73.3%) | ฿36.13 (69.9%) | ฿49.36 (67.1%) | ✅ พร้อมขาย |
|
||||
| 38 | **#186** | [ดอกพุด Oil Ozone](https://admin.homaroma.shop/products/186/bom) | [ID: 36] หัวน้ำหอม กลิ่นดอกพุด (฿3) | ฿15.34 (77.8%) | ฿26.68 (73.3%) | ฿36.13 (69.9%) | ฿49.36 (67.1%) | ✅ พร้อมขาย |
|
||||
| 39 | **#191** | [ดอกราตรี Oil Ozone](https://admin.homaroma.shop/products/191/bom) | [ID: 38] หัวน้ำหอม กลิ่นดอกราตรี (฿3) | ฿15.34 (77.8%) | ฿26.68 (73.3%) | ฿36.13 (69.9%) | ฿49.36 (67.1%) | ✅ พร้อมขาย |
|
||||
| 40 | **#196** | [ดอกลำดวน Oil Ozone](https://admin.homaroma.shop/products/196/bom) | [ID: 39] หัวน้ำหอม กลิ่นดอกลำดวน (฿3) | ฿15.34 (77.8%) | ฿26.68 (73.3%) | ฿36.13 (69.9%) | ฿49.36 (67.1%) | ✅ พร้อมขาย |
|
||||
| 41 | **#201** | [ทับทิม Oil Ozone](https://admin.homaroma.shop/products/201/bom) | [ID: 42] หัวน้ำหอม กลิ่นทับทิม (฿3) | ฿15.34 (77.8%) | ฿26.68 (73.3%) | ฿36.13 (69.9%) | ฿49.36 (67.1%) | ✅ พร้อมขาย |
|
||||
| 42 | **#206** | [มะละกอสุก Oil Ozone](https://admin.homaroma.shop/products/206/bom) | [ID: 47] หัวน้ำหอม กลิ่นมะละกอสุก (฿3) | ฿15.34 (77.8%) | ฿26.68 (73.3%) | ฿36.13 (69.9%) | ฿49.36 (67.1%) | ✅ พร้อมขาย |
|
||||
| 43 | **#211** | [ดอกราชาวดี Oil Ozone](https://admin.homaroma.shop/products/211/bom) | [ID: 37] หัวน้ำหอม กลิ่นดอกราชาวดี (฿3) | ฿15.34 (77.8%) | ฿26.68 (73.3%) | ฿36.13 (69.9%) | ฿49.36 (67.1%) | ✅ พร้อมขาย |
|
||||
| 44 | **#216** | [กลิ่นลูกพีช Oil Ozone](https://admin.homaroma.shop/products/216/bom) | [ID: 52] หัวน้ำหอม กลิ่นลูกพีช (฿3) | ฿15.34 (77.8%) | ฿26.68 (73.3%) | ฿36.13 (69.9%) | ฿49.36 (67.1%) | ✅ พร้อมขาย |
|
||||
| 45 | **#221** | [กลิ่นองุ่น Oil Ozone](https://admin.homaroma.shop/products/221/bom) | [ID: 56] หัวน้ำหอม กลิ่นองุ่น (฿3) | ฿15.34 (77.8%) | ฿26.68 (73.3%) | ฿36.13 (69.9%) | ฿49.36 (67.1%) | ✅ พร้อมขาย |
|
||||
@@ -0,0 +1,495 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { createPortal } from 'react-dom';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import {
|
||||
X,
|
||||
Receipt,
|
||||
DollarSign,
|
||||
Wallet,
|
||||
BadgePercent,
|
||||
Coins,
|
||||
Package,
|
||||
Truck,
|
||||
ExternalLink,
|
||||
CheckCircle2,
|
||||
AlertTriangle,
|
||||
Copy,
|
||||
Check,
|
||||
TrendingUp,
|
||||
} from 'lucide-react';
|
||||
import { TIKTOK_SHOPS } from '../../pages/TiktokOrderPage';
|
||||
|
||||
function fmt(val: number | null | undefined) {
|
||||
if (val == null) return '0.00';
|
||||
return new Intl.NumberFormat('th-TH', { minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(val);
|
||||
}
|
||||
|
||||
interface TiktokFeeBreakdownModalProps {
|
||||
order: any;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
export function TiktokFeeBreakdownModal({ order, onClose }: TiktokFeeBreakdownModalProps) {
|
||||
const { t } = useTranslation();
|
||||
const [copied, setCopied] = useState(false);
|
||||
|
||||
// Keyboard navigation & body scroll lock
|
||||
useEffect(() => {
|
||||
const handleKeyDown = (e: KeyboardEvent) => {
|
||||
if (e.key === 'Escape') onClose();
|
||||
};
|
||||
window.addEventListener('keydown', handleKeyDown);
|
||||
|
||||
// Prevent background page from scrolling
|
||||
const originalOverflow = document.body.style.overflow;
|
||||
document.body.style.overflow = 'hidden';
|
||||
|
||||
return () => {
|
||||
window.removeEventListener('keydown', handleKeyDown);
|
||||
document.body.style.overflow = originalOverflow;
|
||||
};
|
||||
}, [onClose]);
|
||||
|
||||
if (!order || typeof document === 'undefined') return null;
|
||||
|
||||
const settlement = order.settlement;
|
||||
const isSettled = order.isSettled || !!settlement;
|
||||
const shopCfg = TIKTOK_SHOPS.find((s) => s.id === order.shop) || TIKTOK_SHOPS[0];
|
||||
|
||||
// Financial figures (Settlement fees are usually stored as negative numbers from TikTok reports)
|
||||
const grossRevenue = settlement?.grossRevenue ?? settlement?.subtotalAfterSellerDiscount ?? order.orderAmount ?? 0;
|
||||
const sellerDiscount = Math.abs(settlement?.sellerDiscount ?? 0);
|
||||
const subtotalBeforeDiscount = settlement?.subtotalBeforeDiscount ?? (grossRevenue + sellerDiscount);
|
||||
|
||||
const commissionFee = Math.abs(settlement?.commissionFee ?? order.commissionFee ?? 0);
|
||||
const affiliateCommission = Math.abs(settlement?.affiliateCommission ?? order.affiliateFee ?? 0);
|
||||
const affiliatePartnerFee = Math.abs(settlement?.affiliatePartnerFee ?? 0);
|
||||
const totalAffiliate = affiliateCommission + affiliatePartnerFee;
|
||||
const orderFee = Math.abs(settlement?.orderFee ?? 0);
|
||||
const growthSupportFee = Math.abs(settlement?.growthSupportFee ?? 0);
|
||||
const shippingFeeActual = Math.abs(settlement?.shippingFeeActual ?? 0);
|
||||
const platformShippingDiscount = Math.abs(settlement?.platformShippingDiscount ?? 0);
|
||||
const netShippingToSeller = Math.max(0, shippingFeeActual - platformShippingDiscount);
|
||||
|
||||
// Total deductions
|
||||
const rawTotalFee = settlement?.totalFee != null
|
||||
? Math.abs(settlement.totalFee)
|
||||
: (commissionFee + totalAffiliate + orderFee + growthSupportFee + netShippingToSeller);
|
||||
|
||||
// Net payout
|
||||
const netSettlement = settlement?.settlementAmount ?? order.netSettlement ?? (grossRevenue - commissionFee - totalAffiliate);
|
||||
|
||||
// BOM & Net Profit
|
||||
const totalBomCost = order.orderTotalBomCost || 0;
|
||||
const hasMissingBom = order.hasIncompleteBom || (order.missingBomCount ?? 0) > 0;
|
||||
const realNetProfit = netSettlement - totalBomCost;
|
||||
const marginOnSales = grossRevenue > 0 ? (realNetProfit / grossRevenue) * 100 : 0;
|
||||
const markupOnCost = totalBomCost > 0 ? (realNetProfit / totalBomCost) * 100 : 0;
|
||||
const realNetMargin = marginOnSales;
|
||||
|
||||
const handleCopyOrderId = (e: React.MouseEvent) => {
|
||||
e.stopPropagation();
|
||||
navigator.clipboard.writeText(order.orderId);
|
||||
setCopied(true);
|
||||
setTimeout(() => setCopied(false), 2000);
|
||||
};
|
||||
|
||||
return createPortal(
|
||||
<div
|
||||
className="fixed inset-0 z-[9999] flex items-center justify-center p-3 sm:p-5 md:p-6 bg-black/80 backdrop-blur-md animate-fade-in"
|
||||
onClick={onClose}
|
||||
>
|
||||
<div
|
||||
className="bg-slate-900 border border-white/15 rounded-3xl w-full max-w-5xl xl:max-w-6xl max-h-[92vh] flex flex-col shadow-2xl shadow-black/90 overflow-hidden text-white"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between px-6 py-4 border-b border-white/10 bg-white/[0.02]">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-10 h-10 rounded-2xl bg-gradient-to-br from-violet-500/20 to-cyan-500/20 border border-violet-500/30 flex items-center justify-center shadow-lg shadow-violet-500/10 shrink-0">
|
||||
<Receipt className="w-5 h-5 text-violet-400" />
|
||||
</div>
|
||||
<div>
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<h3 className="font-bold text-white text-base">
|
||||
{t('tiktokOrders.feeModalTitle', 'TikTok Fee & Settlement Breakdown')}
|
||||
</h3>
|
||||
{isSettled ? (
|
||||
<span className="px-2.5 py-0.5 rounded-full text-[10px] font-bold bg-emerald-500/15 text-emerald-400 border border-emerald-500/30 inline-flex items-center gap-1">
|
||||
<CheckCircle2 className="w-3 h-3" />
|
||||
{t('tiktokOrders.settlementCompleteBadge', 'โอนเงินแล้ว')}
|
||||
</span>
|
||||
) : (
|
||||
<span className="px-2.5 py-0.5 rounded-full text-[10px] font-bold bg-amber-500/15 text-amber-400 border border-amber-500/30 inline-flex items-center gap-1">
|
||||
<AlertTriangle className="w-3 h-3" />
|
||||
{t('tiktokOrders.settlementPendingBadge', 'รอ Settlement')}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-xs text-slate-400 mt-0.5 flex-wrap">
|
||||
<span className="font-mono text-rose-400 font-bold">#{order.orderId}</span>
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleCopyOrderId}
|
||||
className="text-slate-400 hover:text-white p-0.5 rounded transition-colors inline-flex items-center gap-1 text-[11px]"
|
||||
title={t('tiktokOrders.copyOrderId', 'คัดลอก Order ID')}
|
||||
>
|
||||
{copied ? <Check className="w-3 h-3 text-emerald-400" /> : <Copy className="w-3 h-3" />}
|
||||
{copied && <span className="text-[10px] text-emerald-400 font-sans">{t('tiktokOrders.copied', 'คัดลอกแล้ว')}</span>}
|
||||
</button>
|
||||
<span>•</span>
|
||||
<span className={`font-semibold ${shopCfg.color}`}>{shopCfg.label}</span>
|
||||
{order.buyerUsername && (
|
||||
<>
|
||||
<span>•</span>
|
||||
<span className="text-slate-300">ผู้ซื้อ: {order.buyerUsername}</span>
|
||||
</>
|
||||
)}
|
||||
{order.createdTime && (
|
||||
<>
|
||||
<span>•</span>
|
||||
<span className="text-slate-400 font-mono">{order.createdTime.slice(0, 16)}</span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="p-2 rounded-xl bg-white/5 hover:bg-white/10 text-slate-400 hover:text-white transition-all ml-2"
|
||||
>
|
||||
<X className="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Scrollable Content */}
|
||||
<div className="p-6 space-y-5 overflow-y-auto">
|
||||
{/* Pending Settlement Notice if not settled */}
|
||||
{!settlement && (
|
||||
<div className="p-3.5 rounded-2xl bg-amber-500/10 border border-amber-500/30 flex items-start gap-3 text-amber-300 text-xs">
|
||||
<AlertTriangle className="w-4 h-4 text-amber-400 shrink-0 mt-0.5" />
|
||||
<div className="space-y-0.5">
|
||||
<p className="font-bold text-amber-200">
|
||||
{t('tiktokOrders.settlementPendingAlert', 'คำสั่งซื้อนี้ยังไม่มีข้อมูลใบแจ้งยอด Settlement')}
|
||||
</p>
|
||||
<p className="text-amber-300/80 leading-relaxed text-[11px]">
|
||||
{t(
|
||||
'tiktokOrders.settlementPendingDesc',
|
||||
'ค่าคอมมิชชั่นและตัวเลขด้านล่างเป็นการคำนวณเบื้องต้นจากข้อมูล Order จนกว่าจะมีการ Import ไฟล์ Settlement XLSX จาก TikTok Seller Center'
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 5 Financial Summary Cards (Compact Banner) */}
|
||||
<div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-2.5">
|
||||
{/* 1. Revenue */}
|
||||
<div className="p-3.5 rounded-2xl bg-white/5 border border-white/10 flex flex-col justify-between min-h-[96px]">
|
||||
<div className="flex items-center justify-between text-slate-400 text-[11px]">
|
||||
<span className="truncate">{t('tiktokOrders.orderRevenueLabel', 'ยอดขายสินค้า')}</span>
|
||||
<DollarSign className="w-3.5 h-3.5 text-slate-400 shrink-0" />
|
||||
</div>
|
||||
<p className="text-lg font-bold font-mono text-white mt-1">฿{fmt(grossRevenue)}</p>
|
||||
<span className="text-[10px] text-slate-500 truncate" title={sellerDiscount > 0 ? `ลด ฿${fmt(sellerDiscount)} จาก ฿${fmt(subtotalBeforeDiscount)}` : 'รวมส่วนลดร้านค้าแล้ว'}>
|
||||
{sellerDiscount > 0 ? `ลด ฿${fmt(sellerDiscount)} จาก ฿${fmt(subtotalBeforeDiscount)}` : 'รวมส่วนลดแล้ว'}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* 2. TikTok Deductions */}
|
||||
<div className="p-3.5 rounded-2xl bg-rose-500/10 border border-rose-500/20 flex flex-col justify-between min-h-[96px]">
|
||||
<div className="flex items-center justify-between text-rose-300 text-[11px]">
|
||||
<span className="truncate">{t('tiktokOrders.tiktokDeductionsLabel', 'TikTok หักรวม')}</span>
|
||||
<BadgePercent className="w-3.5 h-3.5 text-rose-400 shrink-0" />
|
||||
</div>
|
||||
<p className="text-lg font-bold font-mono text-rose-400 mt-1">-฿{fmt(rawTotalFee)}</p>
|
||||
<span className="text-[10px] text-rose-400/80 truncate">
|
||||
{grossRevenue > 0 ? `${((rawTotalFee / grossRevenue) * 100).toFixed(1)}% ของยอดขาย` : '-'}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* 3. Net Payout */}
|
||||
<div className="p-3.5 rounded-2xl bg-cyan-500/10 border border-cyan-500/20 flex flex-col justify-between min-h-[96px]">
|
||||
<div className="flex items-center justify-between text-cyan-300 text-[11px]">
|
||||
<span className="truncate">{t('tiktokOrders.netPayoutLabel', 'ยอดโอนสุทธิ')}</span>
|
||||
<Wallet className="w-3.5 h-3.5 text-cyan-400 shrink-0" />
|
||||
</div>
|
||||
<p className="text-lg font-bold font-mono text-cyan-400 mt-1">฿{fmt(netSettlement)}</p>
|
||||
<span className="text-[10px] text-cyan-400/80 truncate">
|
||||
{settlement?.orderSettledTime ? `โอนเมื่อ ${settlement.orderSettledTime.slice(0, 10)}` : 'รอสรุปยอดโอน'}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* 4. Product Cost (BOM) */}
|
||||
<div className="p-3.5 rounded-2xl bg-amber-500/10 border border-amber-500/20 flex flex-col justify-between min-h-[96px]">
|
||||
<div className="flex items-center justify-between text-amber-300 text-[11px]">
|
||||
<span className="truncate">{t('tiktokOrders.cardBomCost', 'ต้นทุนสินค้า (BOM)')}</span>
|
||||
<Coins className="w-3.5 h-3.5 text-amber-400 shrink-0" />
|
||||
</div>
|
||||
<p className="text-lg font-bold font-mono text-amber-400 mt-1">฿{fmt(totalBomCost)}</p>
|
||||
<span className="text-[10px] text-amber-400/80 truncate">
|
||||
{hasMissingBom
|
||||
? '⚠️ มีสินค้ายังไม่ใส่ BOM'
|
||||
: grossRevenue > 0
|
||||
? `${((totalBomCost / grossRevenue) * 100).toFixed(1)}% ของยอดขาย`
|
||||
: 'BOM ครบ 100%'}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* 5. Net Profit (with Margin % on sales and Markup % on cost) */}
|
||||
<div className={`p-3.5 rounded-2xl border flex flex-col justify-between min-h-[96px] ${
|
||||
realNetProfit >= 0 ? 'bg-emerald-500/10 border-emerald-500/25' : 'bg-rose-500/10 border-rose-500/25'
|
||||
}`}>
|
||||
<div className="flex items-center justify-between text-[11px]">
|
||||
<span className={`truncate font-semibold ${realNetProfit >= 0 ? 'text-emerald-300' : 'text-rose-300'}`}>
|
||||
{t('tiktokOrders.cardNetProfit', 'กำไรสุทธิ')}
|
||||
</span>
|
||||
<TrendingUp className={`w-3.5 h-3.5 shrink-0 ${realNetProfit >= 0 ? 'text-emerald-400' : 'text-rose-400'}`} />
|
||||
</div>
|
||||
<p className={`text-lg font-bold font-mono mt-1 ${realNetProfit >= 0 ? 'text-emerald-400' : 'text-rose-400'}`}>
|
||||
฿{fmt(realNetProfit)}
|
||||
</p>
|
||||
<div className="flex items-center gap-1.5 text-[10px] font-mono leading-tight flex-wrap">
|
||||
<span className={realNetProfit >= 0 ? 'text-emerald-300 font-semibold' : 'text-rose-300 font-semibold'}>
|
||||
กำไร/ขาย {marginOnSales.toFixed(1)}%
|
||||
</span>
|
||||
<span className="text-slate-500">•</span>
|
||||
<span className={realNetProfit >= 0 ? 'text-emerald-300 font-semibold' : 'text-rose-300 font-semibold'}>
|
||||
กำไร/ทุน {markupOnCost >= 0 ? '+' : ''}{markupOnCost.toFixed(1)}%
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 2-Column Wide Landscape Grid Layout */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-12 gap-5 items-start">
|
||||
{/* Left Column (7 Cols): TikTok Platform Fees Breakdown */}
|
||||
<div className="lg:col-span-7 p-4 sm:p-5 rounded-2xl bg-black/30 border border-white/10 space-y-3.5">
|
||||
<div className="flex items-center justify-between pb-2.5 border-b border-white/10">
|
||||
<div className="flex items-center gap-2">
|
||||
<BadgePercent className="w-4 h-4 text-violet-400" />
|
||||
<h4 className="text-xs font-bold uppercase tracking-wider text-slate-300">
|
||||
{t('tiktokOrders.feeBreakdownTitle', 'Breakdown รายการหักค่าใช้จ่ายของ TikTok')}
|
||||
</h4>
|
||||
</div>
|
||||
<span className="text-xs font-mono font-bold text-rose-400">-฿{fmt(rawTotalFee)}</span>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2.5 text-xs">
|
||||
{/* Commission Fee */}
|
||||
<div className="flex items-center justify-between p-3 rounded-xl bg-violet-500/10 border border-violet-500/20">
|
||||
<div className="flex items-center gap-2.5">
|
||||
<span className="w-2.5 h-2.5 rounded-full bg-violet-400 shrink-0" />
|
||||
<div>
|
||||
<p className="font-bold text-violet-200">
|
||||
{t('tiktokOrders.tiktokCommissionFee', 'ค่าคอมมิชชั่น TikTok Shop (Commission Fee)')}
|
||||
</p>
|
||||
<p className="text-[10px] text-violet-300/70">
|
||||
{t('tiktokOrders.tiktokCommissionDesc', 'หักตามอัตราหมวดหมู่สินค้าของแพลตฟอร์ม')}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<span className="font-mono font-bold text-violet-400 text-sm">
|
||||
{commissionFee > 0 ? `-฿${fmt(commissionFee)}` : '฿0.00'}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Affiliate Creator Commission */}
|
||||
<div className="flex items-center justify-between p-3 rounded-xl bg-cyan-500/10 border border-cyan-500/20">
|
||||
<div className="flex items-center gap-2.5">
|
||||
<span className="w-2.5 h-2.5 rounded-full bg-cyan-400 shrink-0" />
|
||||
<div>
|
||||
<p className="font-bold text-cyan-200">
|
||||
{t('tiktokOrders.affiliateCommissionFee', 'ค่าคอมมิชชั่น Creator แอฟฟิลิเอต (Affiliate)')}
|
||||
</p>
|
||||
<p className="text-[10px] text-cyan-300/70">
|
||||
{t('tiktokOrders.affiliateCommissionDesc', 'จ่ายให้ครีเอเตอร์/นายหน้าที่แปะลิงก์หรือไลฟ์')}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<span className="font-mono font-bold text-cyan-400 text-sm">
|
||||
{affiliateCommission > 0 ? `-฿${fmt(affiliateCommission)}` : '฿0.00'}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Affiliate Partner Fee (TAP) */}
|
||||
{(affiliatePartnerFee > 0 || settlement) && (
|
||||
<div className="flex items-center justify-between px-3 py-2 rounded-xl bg-white/[0.02] border border-white/5 text-slate-300">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="w-2 h-2 rounded-full bg-cyan-400/60" />
|
||||
<span>{t('tiktokOrders.affiliatePartnerFee', 'ค่าคอมมิชชั่น Partner แอฟฟิลิเอต (TAP)')}</span>
|
||||
</div>
|
||||
<span className="font-mono text-cyan-300 font-semibold">
|
||||
{affiliatePartnerFee > 0 ? `-฿${fmt(affiliatePartnerFee)}` : '฿0.00'}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Order / Transaction Fee */}
|
||||
{(orderFee > 0 || settlement) && (
|
||||
<div className="flex items-center justify-between px-3 py-2 rounded-xl bg-white/[0.02] border border-white/5 text-slate-300">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="w-2 h-2 rounded-full bg-amber-400" />
|
||||
<span>{t('tiktokOrders.orderFee', 'ค่าธรรมเนียมคำสั่งซื้อ/ธุรกรรม (Order Fee)')}</span>
|
||||
</div>
|
||||
<span className="font-mono text-amber-400 font-semibold">
|
||||
{orderFee > 0 ? `-฿${fmt(orderFee)}` : '฿0.00'}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Growth Support Fee */}
|
||||
{growthSupportFee > 0 && (
|
||||
<div className="flex items-center justify-between px-3 py-2 rounded-xl bg-white/[0.02] border border-white/5 text-slate-300">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="w-2 h-2 rounded-full bg-blue-400" />
|
||||
<span>{t('tiktokOrders.growthSupportFee', 'ค่าธรรมเนียมสนับสนุนการเติบโต (Growth Support)')}</span>
|
||||
</div>
|
||||
<span className="font-mono text-blue-400 font-semibold">
|
||||
-฿{fmt(growthSupportFee)}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Shipping Breakdown */}
|
||||
{(shippingFeeActual > 0 || platformShippingDiscount > 0) && (
|
||||
<div className="p-3 rounded-xl bg-white/[0.02] border border-white/5 space-y-1">
|
||||
<div className="flex items-center justify-between text-slate-300 text-xs">
|
||||
<div className="flex items-center gap-2">
|
||||
<Truck className="w-3.5 h-3.5 text-blue-400" />
|
||||
<span>{t('tiktokOrders.shippingBreakdown', 'ค่าจัดส่งขนส่ง')}</span>
|
||||
</div>
|
||||
<span className="font-mono font-semibold text-slate-200">
|
||||
{netShippingToSeller > 0 ? `-฿${fmt(netShippingToSeller)}` : t('tiktokOrders.shippingFreeForSeller', 'ร้านค้าไม่เสียค่าส่ง')}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between text-[11px] pl-5 text-slate-400">
|
||||
<span>
|
||||
{t('tiktokOrders.shippingBreakdownDetail', {
|
||||
actual: fmt(shippingFeeActual),
|
||||
subsidy: fmt(platformShippingDiscount),
|
||||
defaultValue: `ค่าส่งจริง ฿${fmt(shippingFeeActual)} | TikTok อุดหนุน -฿${fmt(platformShippingDiscount)}`
|
||||
})}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right Column (5 Cols): BOM Profitability & Order Items */}
|
||||
<div className="lg:col-span-5 space-y-4">
|
||||
{/* BOM Profitability Analysis Card */}
|
||||
<div
|
||||
className={`p-4 sm:p-5 rounded-2xl border space-y-3 ${
|
||||
hasMissingBom ? 'bg-rose-500/10 border-rose-500/25' : 'bg-emerald-500/10 border-emerald-500/25'
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center justify-between pb-2 border-b border-white/10">
|
||||
<div className="flex items-center gap-2">
|
||||
<Coins className={`w-4 h-4 ${hasMissingBom ? 'text-rose-400' : 'text-emerald-400'}`} />
|
||||
<h4 className="text-xs font-bold uppercase tracking-wider text-slate-200">
|
||||
{t('tiktokOrders.bomProfitAnalysis', 'วิเคราะห์กำไรสุทธิจริงหลังหักต้นทุน BOM')}
|
||||
</h4>
|
||||
</div>
|
||||
{hasMissingBom ? (
|
||||
<span className="text-[10px] font-bold text-rose-300 px-2 py-0.5 rounded-full bg-rose-500/20 border border-rose-500/30">
|
||||
{t('tiktokOrders.missingBomCount', { count: order.missingBomCount })}
|
||||
</span>
|
||||
) : (
|
||||
<span className="text-[10px] font-bold text-emerald-300 px-2 py-0.5 rounded-full bg-emerald-500/20 border border-emerald-500/30">
|
||||
{t('tiktokOrders.bomComplete100', 'BOM ครบ 100%')}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="space-y-2 text-xs">
|
||||
<div className="flex justify-between items-center text-slate-300">
|
||||
<span>{t('tiktokOrders.netPayoutLabel', 'ยอดเงินที่ TikTok โอนให้')}</span>
|
||||
<span className="font-mono font-bold text-white">฿{fmt(netSettlement)}</span>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-between items-center text-amber-300">
|
||||
<span>{t('tiktokOrders.totalBomCostLabel', 'หัก ต้นทุนสินค้าตามสูตร BOM')}</span>
|
||||
<span className="font-mono font-bold">
|
||||
{totalBomCost > 0 ? `-฿${fmt(totalBomCost)}` : '฿0.00'}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="pt-2.5 border-t border-white/10 flex justify-between items-center">
|
||||
<div>
|
||||
<p className="font-bold text-white text-sm">
|
||||
{t('tiktokOrders.realNetProfitLabel', 'กำไรสุทธิแท้จริง (Real Net Profit)')}
|
||||
</p>
|
||||
<p className="text-[10px] text-slate-400">
|
||||
{t('tiktokOrders.realNetMarginLabel', 'คิดเป็นอัตรากำไร')}:{' '}
|
||||
<span className="font-mono font-bold text-slate-200">{realNetMargin.toFixed(1)}%</span>
|
||||
</p>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<span className={`text-2xl font-bold font-mono ${realNetProfit >= 0 ? 'text-emerald-400' : 'text-rose-400'}`}>
|
||||
฿{fmt(realNetProfit)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Order Items Snippet */}
|
||||
{order.items && order.items.length > 0 && (
|
||||
<div className="p-4 rounded-2xl bg-black/20 border border-white/10 space-y-2.5">
|
||||
<div className="flex items-center justify-between text-xs font-bold text-slate-400 pb-1 border-b border-white/5">
|
||||
<div className="flex items-center gap-1.5">
|
||||
<Package className="w-3.5 h-3.5 text-slate-400" />
|
||||
<span>
|
||||
{t('tiktokOrders.orderItemsTitle', 'รายการสินค้าในออเดอร์นี้')} ({order.items.length})
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="divide-y divide-white/5 max-h-48 overflow-y-auto pr-1">
|
||||
{order.items.map((item: any, idx: number) => (
|
||||
<div key={idx} className="py-2 flex items-center justify-between gap-3 text-xs">
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-slate-200 font-medium truncate">{item.productName}</p>
|
||||
<p className="text-[11px] text-slate-400 font-mono">
|
||||
{item.variation ? `[${item.variation}] ` : ''}จำนวน: {item.quantity} ชิ้น
|
||||
{item.masterSku ? ` • Master: ${item.masterSku}` : ''}
|
||||
</p>
|
||||
</div>
|
||||
<div className="text-right shrink-0 font-mono">
|
||||
<p className="text-white font-bold">
|
||||
฿{fmt(item.subtotalAfterDiscount || item.unitOriginalPrice * (item.quantity || 1))}
|
||||
</p>
|
||||
<p className="text-[10px] text-amber-400">BOM: ฿{fmt(item.totalBomCost || 0)}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Footer Actions */}
|
||||
<div className="flex items-center justify-between px-6 py-4 border-t border-white/10 bg-white/[0.02]">
|
||||
<Link
|
||||
to={`/tiktok-order/${encodeURIComponent(order.orderId)}`}
|
||||
className="inline-flex items-center gap-1.5 px-4 py-2 rounded-xl bg-rose-500/15 hover:bg-rose-500/25 border border-rose-500/30 text-rose-300 font-bold text-xs transition-colors"
|
||||
>
|
||||
<span>{t('tiktokOrders.viewFullOrderDetail', 'เปิดดูคำสั่งซื้อฉบับเต็ม')}</span>
|
||||
<ExternalLink className="w-3.5 h-3.5" />
|
||||
</Link>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="px-6 py-2 rounded-xl bg-white/10 hover:bg-white/15 text-white font-bold text-xs transition-colors"
|
||||
>
|
||||
{t('tiktokOrders.closeModal', 'ปิด')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
document.body
|
||||
);
|
||||
}
|
||||
@@ -454,6 +454,41 @@
|
||||
"thAffiliate": "Affiliate (฿)",
|
||||
"thNetProfit": "Net Profit",
|
||||
"thActions": "Actions",
|
||||
"viewFeeBreakdown": "Click to view TikTok fee breakdown",
|
||||
"feeModalTitle": "TikTok Fee & Settlement Breakdown",
|
||||
"feeModalSub": "Detailed breakdown of TikTok Shop commission, affiliate fees, and net payout",
|
||||
"settlementPendingAlert": "This order does not have a TikTok Settlement statement yet",
|
||||
"settlementPendingDesc": "Commissions and fees below are preliminary estimates from order data until a Settlement XLSX file is imported from TikTok Seller Center.",
|
||||
"settlementCompleteBadge": "Settled & Transferred",
|
||||
"settlementPendingBadge": "Pending Settlement",
|
||||
"orderRevenueLabel": "Product Revenue",
|
||||
"tiktokDeductionsLabel": "Total TikTok Deductions",
|
||||
"netPayoutLabel": "Net Payout",
|
||||
"cardBomCost": "Product Cost (BOM)",
|
||||
"cardNetProfit": "Net Profit",
|
||||
"profitOnSales": "Profit/Sales",
|
||||
"profitOnCost": "Profit/Cost",
|
||||
"feeBreakdownTitle": "TikTok Platform Fee Deductions Breakdown",
|
||||
"tiktokCommissionFee": "TikTok Shop Commission Fee",
|
||||
"tiktokCommissionDesc": "Platform category commission rate deduction",
|
||||
"affiliateCommissionFee": "Creator Affiliate Commission Fee",
|
||||
"affiliateCommissionDesc": "Commission paid to creators/affiliates",
|
||||
"affiliatePartnerFee": "Affiliate Partner Fee (TAP)",
|
||||
"orderFee": "Order / Transaction Fee",
|
||||
"growthSupportFee": "Growth Support Fee",
|
||||
"shippingBreakdown": "Shipping & Logistics Fees",
|
||||
"shippingBreakdownDetail": "Actual Shipping ฿{{actual}} | Platform Subsidy -฿{{subsidy}}",
|
||||
"shippingFreeForSeller": "Seller shipping covered",
|
||||
"sellerDiscountLabel": "Seller Discount",
|
||||
"bomProfitAnalysis": "Real Net Profit Analysis (After BOM Cost)",
|
||||
"totalBomCostLabel": "Deduct: BOM Material Cost",
|
||||
"realNetProfitLabel": "Real Net Profit",
|
||||
"realNetMarginLabel": "Net Margin",
|
||||
"orderItemsTitle": "Items in this Order",
|
||||
"viewFullOrderDetail": "View Full Order Detail",
|
||||
"closeModal": "Close",
|
||||
"copyOrderId": "Copy Order ID",
|
||||
"copied": "Copied",
|
||||
"processingData": "Processing data...",
|
||||
"noOrders": "No data available",
|
||||
"settledTransferred": "Settled ฿{{amount}}",
|
||||
|
||||
@@ -450,6 +450,41 @@
|
||||
"thAffiliate": "Affiliate (฿)",
|
||||
"thNetProfit": "純利益",
|
||||
"thActions": "操作",
|
||||
"viewFeeBreakdown": "クリックしてTikTok手数料明細を表示",
|
||||
"feeModalTitle": "TikTok 手数料・精算内訳 (Breakdown)",
|
||||
"feeModalSub": "TikTok Shop手数料、アフィリエイト報酬、純利益の詳細内訳",
|
||||
"settlementPendingAlert": "この注文にはまだTikTok精算明細データがありません",
|
||||
"settlementPendingDesc": "以下の手数料と数値は注文データに基づく概算です。TikTokセラーセンターから精算XLSXがインポートされると確定値に更新されます。",
|
||||
"settlementCompleteBadge": "振込完了 (Settled)",
|
||||
"settlementPendingBadge": "精算待ち",
|
||||
"orderRevenueLabel": "商品売上高",
|
||||
"tiktokDeductionsLabel": "TikTok 控除合計",
|
||||
"netPayoutLabel": "振込受取額 (Net Payout)",
|
||||
"cardBomCost": "商品原価 (BOM)",
|
||||
"cardNetProfit": "純利益",
|
||||
"profitOnSales": "売上利益率",
|
||||
"profitOnCost": "原価利益率",
|
||||
"feeBreakdownTitle": "TikTok プラットフォーム控除の内訳",
|
||||
"tiktokCommissionFee": "TikTok Shop プラットフォーム手数料 (Commission)",
|
||||
"tiktokCommissionDesc": "カテゴリ別プラットフォーム手数料率による控除",
|
||||
"affiliateCommissionFee": "クリエイターアフィリエイト報酬 (Affiliate)",
|
||||
"affiliateCommissionDesc": "紹介・ライブ配信クリエイターへの支払報酬",
|
||||
"affiliatePartnerFee": "パートナー手数料 (TAP)",
|
||||
"orderFee": "注文・決済処理手数料 (Order Fee)",
|
||||
"growthSupportFee": "成長支援手数料 (Growth Support)",
|
||||
"shippingBreakdown": "配送・物流手数料内訳",
|
||||
"shippingBreakdownDetail": "実送料 ฿{{actual}} | プラットフォーム補助 -฿{{subsidy}}",
|
||||
"shippingFreeForSeller": "ショップ負担なし",
|
||||
"sellerDiscountLabel": "ショップ割引",
|
||||
"bomProfitAnalysis": "BOM原価控除後の実質純利益分析",
|
||||
"totalBomCostLabel": "控除：BOM原料および包材原価",
|
||||
"realNetProfitLabel": "実質純利益 (Real Net Profit)",
|
||||
"realNetMarginLabel": "純利益率",
|
||||
"orderItemsTitle": "注文内商品一覧",
|
||||
"viewFullOrderDetail": "注文詳細画面を開く",
|
||||
"closeModal": "閉じる",
|
||||
"copyOrderId": "注文番号をコピー",
|
||||
"copied": "コピー完了",
|
||||
"processingData": "データを処理中...",
|
||||
"noOrders": "データがありません",
|
||||
"settledTransferred": "振込済 ฿{{amount}}",
|
||||
|
||||
@@ -454,6 +454,41 @@
|
||||
"thAffiliate": "Affiliate (฿)",
|
||||
"thNetProfit": "กำไรสุทธิ",
|
||||
"thActions": "การกระทำ",
|
||||
"viewFeeBreakdown": "คลิกดู Breakdown ค่าธรรมเนียม TikTok",
|
||||
"feeModalTitle": "TikTok Fee & Settlement Breakdown",
|
||||
"feeModalSub": "รายละเอียดค่าธรรมเนียม TikTok Shop, Affiliate และกำไรสุทธิ",
|
||||
"settlementPendingAlert": "คำสั่งซื้อนี้ยังไม่มีข้อมูลใบแจ้งยอด Settlement",
|
||||
"settlementPendingDesc": "ค่าคอมมิชชั่นและตัวเลขด้านล่างเป็นการคำนวณเบื้องต้นจากข้อมูล Order จนกว่าจะมีการ Import ไฟล์ Settlement XLSX จาก TikTok Seller Center",
|
||||
"settlementCompleteBadge": "โอนเงินแล้ว",
|
||||
"settlementPendingBadge": "รอ Settlement",
|
||||
"orderRevenueLabel": "ยอดขายสินค้า",
|
||||
"tiktokDeductionsLabel": "TikTok หักรวม",
|
||||
"netPayoutLabel": "ยอดโอนสุทธิ",
|
||||
"cardBomCost": "ต้นทุนสินค้า (BOM)",
|
||||
"cardNetProfit": "กำไรสุทธิ",
|
||||
"profitOnSales": "กำไร/ยอดขาย",
|
||||
"profitOnCost": "กำไร/ทุน",
|
||||
"feeBreakdownTitle": "Breakdown รายการหักค่าใช้จ่ายของ TikTok",
|
||||
"tiktokCommissionFee": "ค่าคอมมิชชั่น TikTok Shop (Commission Fee)",
|
||||
"tiktokCommissionDesc": "หักตามอัตราหมวดหมู่สินค้าของแพลตฟอร์ม",
|
||||
"affiliateCommissionFee": "ค่าคอมมิชชั่น Creator แอฟฟิลิเอต (Affiliate)",
|
||||
"affiliateCommissionDesc": "จ่ายให้ครีเอเตอร์/นายหน้าที่แปะลิงก์หรือไลฟ์",
|
||||
"affiliatePartnerFee": "ค่าคอมมิชชั่น Partner แอฟฟิลิเอต (TAP)",
|
||||
"orderFee": "ค่าธรรมเนียมคำสั่งซื้อ/ธุรกรรม (Order Fee)",
|
||||
"growthSupportFee": "ค่าธรรมเนียมสนับสนุนการเติบโต (Growth Support)",
|
||||
"shippingBreakdown": "ค่าจัดส่งขนส่ง",
|
||||
"shippingBreakdownDetail": "ค่าส่งจริง ฿{{actual}} | TikTok อุดหนุน -฿{{subsidy}}",
|
||||
"shippingFreeForSeller": "ร้านค้าไม่เสียค่าส่ง",
|
||||
"sellerDiscountLabel": "ส่วนลดจากร้านค้า",
|
||||
"bomProfitAnalysis": "วิเคราะห์กำไรสุทธิจริงหลังหักต้นทุน BOM",
|
||||
"totalBomCostLabel": "หัก ต้นทุนสินค้าตามสูตร BOM",
|
||||
"realNetProfitLabel": "กำไรสุทธิแท้จริง (Real Net Profit)",
|
||||
"realNetMarginLabel": "คิดเป็นอัตรากำไร",
|
||||
"orderItemsTitle": "รายการสินค้าในออเดอร์นี้",
|
||||
"viewFullOrderDetail": "เปิดดูคำสั่งซื้อฉบับเต็ม",
|
||||
"closeModal": "ปิด",
|
||||
"copyOrderId": "คัดลอก Order ID",
|
||||
"copied": "คัดลอกแล้ว",
|
||||
"processingData": "กำลังประมวลผลข้อมูล...",
|
||||
"noOrders": "ยังไม่มีข้อมูล",
|
||||
"settledTransferred": "โอนแล้ว ฿{{amount}}",
|
||||
|
||||
@@ -450,6 +450,41 @@
|
||||
"thAffiliate": "Affiliate (฿)",
|
||||
"thNetProfit": "净利润",
|
||||
"thActions": "操作",
|
||||
"viewFeeBreakdown": "点击查看 TikTok 费用明细",
|
||||
"feeModalTitle": "TikTok 费用与结算明细",
|
||||
"feeModalSub": "TikTok Shop 佣金、达人佣金与净利润详细拆解",
|
||||
"settlementPendingAlert": "该订单暂无 TikTok 结算对账单数据",
|
||||
"settlementPendingDesc": "以下佣金与费用为基于订单数据的预估，待从 TikTok 卖家中心导入结算 XLSX 文件后更新。",
|
||||
"settlementCompleteBadge": "已完成打款",
|
||||
"settlementPendingBadge": "等待结算",
|
||||
"orderRevenueLabel": "商品销售额",
|
||||
"tiktokDeductionsLabel": "TikTok 扣款合计",
|
||||
"netPayoutLabel": "最终打款金额",
|
||||
"cardBomCost": "商品成本 (BOM)",
|
||||
"cardNetProfit": "净利润",
|
||||
"profitOnSales": "利润率(销售)",
|
||||
"profitOnCost": "利润率(成本)",
|
||||
"feeBreakdownTitle": "TikTok 平台扣款明细",
|
||||
"tiktokCommissionFee": "TikTok Shop 平台佣金 (Commission Fee)",
|
||||
"tiktokCommissionDesc": "按平台品类佣金率扣除",
|
||||
"affiliateCommissionFee": "达人/分销佣金 (Affiliate Commission)",
|
||||
"affiliateCommissionDesc": "支付给带货达人的佣金",
|
||||
"affiliatePartnerFee": "机构/合作伙伴佣金 (TAP)",
|
||||
"orderFee": "订单/交易手续费 (Order Fee)",
|
||||
"growthSupportFee": "成长支持费 (Growth Support Fee)",
|
||||
"shippingBreakdown": "物流运费明细",
|
||||
"shippingBreakdownDetail": "实际运费 ฿{{actual}} | 平台补贴 -฿{{subsidy}}",
|
||||
"shippingFreeForSeller": "商家免运费",
|
||||
"sellerDiscountLabel": "商家折扣",
|
||||
"bomProfitAnalysis": "扣除 BOM 成本后真实净利润分析",
|
||||
"totalBomCostLabel": "扣除：BOM 原料及包装成本",
|
||||
"realNetProfitLabel": "真实净利润 (Real Net Profit)",
|
||||
"realNetMarginLabel": "净利润率",
|
||||
"orderItemsTitle": "订单内商品列表",
|
||||
"viewFullOrderDetail": "查看订单完整详情",
|
||||
"closeModal": "关闭",
|
||||
"copyOrderId": "复制订单号",
|
||||
"copied": "已复制",
|
||||
"processingData": "正在处理数据...",
|
||||
"noOrders": "暂无数据",
|
||||
"settledTransferred": "已打款 ฿{{amount}}",
|
||||
|
||||
@@ -21,6 +21,7 @@ import {
|
||||
import { API_BASE } from '@homaroma/types';
|
||||
import { TIKTOK_SHOPS } from './TiktokOrderPage';
|
||||
import { getLocalizedProvinceName, getLocalizedDistrictName } from '../utils/thaiGeoUtils';
|
||||
import { TiktokFeeBreakdownModal } from '../components/tiktok-order/TiktokFeeBreakdownModal';
|
||||
|
||||
function authHeaders() {
|
||||
return {
|
||||
@@ -66,6 +67,7 @@ export default function TiktokOrderDetailPage() {
|
||||
const [order, setOrder] = useState<any | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [showFeeModal, setShowFeeModal] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (!orderId) return;
|
||||
@@ -410,19 +412,35 @@ export default function TiktokOrderDetailPage() {
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-between items-center text-violet-300">
|
||||
<span className="text-slate-400">{t('tiktokOrderDetail.commissionSummary')}</span>
|
||||
<span className="font-mono font-semibold">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowFeeModal(true)}
|
||||
className="w-full flex justify-between items-center text-violet-300 hover:bg-violet-500/10 p-1.5 -mx-1.5 rounded-lg transition-colors cursor-pointer group"
|
||||
title={t('tiktokOrders.viewFeeBreakdown', 'คลิกดู Breakdown ค่าธรรมเนียม TikTok')}
|
||||
>
|
||||
<span className="text-slate-400 group-hover:text-slate-200 text-xs flex items-center gap-1">
|
||||
{t('tiktokOrderDetail.commissionSummary')}
|
||||
<Receipt className="w-3 h-3 text-violet-400/50 group-hover:text-violet-300 transition-colors" />
|
||||
</span>
|
||||
<span className="font-mono font-semibold text-xs text-violet-400 group-hover:underline">
|
||||
{order.commissionFee > 0 ? `-฿${fmt(order.commissionFee)}` : '฿0.00'}
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<div className="flex justify-between items-center text-cyan-300">
|
||||
<span className="text-slate-400">{t('tiktokOrderDetail.affiliateSummary')}</span>
|
||||
<span className="font-mono font-semibold">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowFeeModal(true)}
|
||||
className="w-full flex justify-between items-center text-cyan-300 hover:bg-cyan-500/10 p-1.5 -mx-1.5 rounded-lg transition-colors cursor-pointer group"
|
||||
title={t('tiktokOrders.viewFeeBreakdown', 'คลิกดู Breakdown ค่าธรรมเนียม TikTok')}
|
||||
>
|
||||
<span className="text-slate-400 group-hover:text-slate-200 text-xs flex items-center gap-1">
|
||||
{t('tiktokOrderDetail.affiliateSummary')}
|
||||
<Receipt className="w-3 h-3 text-cyan-400/50 group-hover:text-cyan-300 transition-colors" />
|
||||
</span>
|
||||
<span className="font-mono font-semibold text-xs text-cyan-400 group-hover:underline">
|
||||
{order.affiliateFee > 0 ? `-฿${fmt(order.affiliateFee)}` : '฿0.00'}
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<div className="pt-3 border-t border-white/10 flex justify-between items-center">
|
||||
<div>
|
||||
@@ -527,6 +545,13 @@ export default function TiktokOrderDetailPage() {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{showFeeModal && (
|
||||
<TiktokFeeBreakdownModal
|
||||
order={order}
|
||||
onClose={() => setShowFeeModal(false)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -7,10 +7,11 @@ import {
|
||||
ShoppingBag, Upload, Table2, TrendingUp, Package, DollarSign,
|
||||
Coins, ChevronLeft, ChevronRight, ExternalLink, Store, Trash2,
|
||||
FileSpreadsheet, AlertTriangle, CheckCircle2, Files, Search, X, RotateCcw,
|
||||
BadgePercent, Wallet, Receipt
|
||||
BadgePercent, Wallet, Receipt, Info
|
||||
} from 'lucide-react';
|
||||
import { API_BASE } from '@homaroma/types';
|
||||
import { getLocalizedProvinceName, getLocalizedDistrictName } from '../utils/thaiGeoUtils';
|
||||
import { TiktokFeeBreakdownModal } from '../components/tiktok-order/TiktokFeeBreakdownModal';
|
||||
|
||||
// ── Shop Config ───────────────────────────────────────────────────────────────
|
||||
export const TIKTOK_SHOPS = [
|
||||
@@ -164,6 +165,7 @@ function OrdersTable({ shop, refreshKey }: { shop: string; refreshKey: number })
|
||||
const [search, setSearch] = useState('');
|
||||
const [statusFilter, setStatusFilter] = useState('all');
|
||||
const [bomFilter, setBomFilter] = useState('all');
|
||||
const [selectedFeeOrder, setSelectedFeeOrder] = useState<any | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const timer = setTimeout(() => {
|
||||
@@ -396,8 +398,24 @@ function OrdersTable({ shop, refreshKey }: { shop: string; refreshKey: number })
|
||||
<th className="px-4 py-3.5 whitespace-nowrap">{t('tiktokOrders.thSkusBom')}</th>
|
||||
<th className="px-4 py-3.5 whitespace-nowrap text-right">{t('tiktokOrders.thOrderAmount')}</th>
|
||||
<th className="px-4 py-3.5 whitespace-nowrap text-right">{t('tiktokOrders.thBomCost')}</th>
|
||||
<th className="px-4 py-3.5 whitespace-nowrap text-right text-violet-400">{t('tiktokOrders.thCommission')}</th>
|
||||
<th className="px-4 py-3.5 whitespace-nowrap text-right text-cyan-400">{t('tiktokOrders.thAffiliate')}</th>
|
||||
<th
|
||||
className="px-4 py-3.5 whitespace-nowrap text-right text-violet-400 cursor-help"
|
||||
title={t('tiktokOrders.viewFeeBreakdown', 'คลิกดู Breakdown ค่าธรรมเนียม TikTok')}
|
||||
>
|
||||
<span className="inline-flex items-center gap-1 justify-end">
|
||||
{t('tiktokOrders.thCommission')}
|
||||
<Info className="w-3 h-3 text-violet-400/50" />
|
||||
</span>
|
||||
</th>
|
||||
<th
|
||||
className="px-4 py-3.5 whitespace-nowrap text-right text-cyan-400 cursor-help"
|
||||
title={t('tiktokOrders.viewFeeBreakdown', 'คลิกดู Breakdown ค่าธรรมเนียม TikTok')}
|
||||
>
|
||||
<span className="inline-flex items-center gap-1 justify-end">
|
||||
{t('tiktokOrders.thAffiliate')}
|
||||
<Info className="w-3 h-3 text-cyan-400/50" />
|
||||
</span>
|
||||
</th>
|
||||
<th className="px-4 py-3.5 whitespace-nowrap text-right">{t('tiktokOrders.thNetProfit')}</th>
|
||||
<th className="px-4 py-3.5 text-center" />
|
||||
</tr>
|
||||
@@ -507,20 +525,42 @@ function OrdersTable({ shop, refreshKey }: { shop: string; refreshKey: number })
|
||||
|
||||
{/* Commission (฿) */}
|
||||
<td className="px-4 py-3.5 text-right font-mono whitespace-nowrap">
|
||||
<button
|
||||
type="button"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setSelectedFeeOrder(order);
|
||||
}}
|
||||
title={t('tiktokOrders.viewFeeBreakdown', 'คลิกดู Breakdown ค่าธรรมเนียม TikTok')}
|
||||
className="inline-flex items-center gap-1 group/btn px-2 py-1 rounded-lg hover:bg-violet-500/15 border border-transparent hover:border-violet-500/30 transition-all cursor-pointer"
|
||||
>
|
||||
{order.commissionFee > 0 ? (
|
||||
<span className="text-violet-400 font-bold">-฿{fmt(order.commissionFee)}</span>
|
||||
<span className="text-violet-400 font-bold group-hover/btn:underline">-฿{fmt(order.commissionFee)}</span>
|
||||
) : (
|
||||
<span className="text-slate-500 font-mono text-[11px]">-</span>
|
||||
<span className="text-slate-500 font-mono text-[11px] group-hover/btn:text-slate-300">-</span>
|
||||
)}
|
||||
<Receipt className="w-3 h-3 text-violet-400/40 group-hover/btn:text-violet-300 transition-colors" />
|
||||
</button>
|
||||
</td>
|
||||
|
||||
{/* Affiliate (฿) */}
|
||||
<td className="px-4 py-3.5 text-right font-mono whitespace-nowrap">
|
||||
<button
|
||||
type="button"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setSelectedFeeOrder(order);
|
||||
}}
|
||||
title={t('tiktokOrders.viewFeeBreakdown', 'คลิกดู Breakdown ค่าธรรมเนียม TikTok')}
|
||||
className="inline-flex items-center gap-1 group/btn px-2 py-1 rounded-lg hover:bg-cyan-500/15 border border-transparent hover:border-cyan-500/30 transition-all cursor-pointer"
|
||||
>
|
||||
{order.affiliateFee > 0 ? (
|
||||
<span className="text-cyan-400 font-bold">-฿{fmt(order.affiliateFee)}</span>
|
||||
<span className="text-cyan-400 font-bold group-hover/btn:underline">-฿{fmt(order.affiliateFee)}</span>
|
||||
) : (
|
||||
<span className="text-slate-500 font-mono text-[11px]">-</span>
|
||||
<span className="text-slate-500 font-mono text-[11px] group-hover/btn:text-slate-300">-</span>
|
||||
)}
|
||||
<Receipt className="w-3 h-3 text-cyan-400/40 group-hover/btn:text-cyan-300 transition-colors" />
|
||||
</button>
|
||||
</td>
|
||||
|
||||
{/* Profit */}
|
||||
@@ -553,6 +593,14 @@ function OrdersTable({ shop, refreshKey }: { shop: string; refreshKey: number })
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{/* Fee Breakdown Modal */}
|
||||
{selectedFeeOrder && (
|
||||
<TiktokFeeBreakdownModal
|
||||
order={selectedFeeOrder}
|
||||
onClose={() => setSelectedFeeOrder(null)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -469,6 +469,33 @@ export const toolsRoute = new Elysia({ prefix: "/tools" })
|
||||
}
|
||||
)
|
||||
|
||||
// ── 4.1 POST Bulk Link / Unlink Master Variants ──────────────────────────────
|
||||
.post(
|
||||
"/marketplace-products/bulk-map",
|
||||
async ({ body }: { body: { mappings: Array<{ marketplaceProductId: number; masterVariantId: number | null }> } }) => {
|
||||
const { mappings } = body;
|
||||
await prisma.$transaction(
|
||||
mappings.map((m) =>
|
||||
prisma.marketplaceProduct.update({
|
||||
where: { id: m.marketplaceProductId },
|
||||
data: { masterVariantId: m.masterVariantId },
|
||||
})
|
||||
)
|
||||
);
|
||||
return { success: true, count: mappings.length };
|
||||
},
|
||||
{
|
||||
body: t.Object({
|
||||
mappings: t.Array(
|
||||
t.Object({
|
||||
marketplaceProductId: t.Number(),
|
||||
masterVariantId: t.Nullable(t.Number()),
|
||||
})
|
||||
),
|
||||
}),
|
||||
}
|
||||
)
|
||||
|
||||
// ── 5. POST Bulk Auto Match Unmapped Items ──────────────────────────────────
|
||||
.post("/marketplace-products/bulk-auto-match", async () => {
|
||||
const masterVariants = await prisma.productVariant.findMany({
|
||||
|
||||
@@ -430,6 +430,64 @@ server.setRequestHandler(ListToolsRequestSchema, async () => {
|
||||
required: ["productId", "variants"]
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "list_marketplace_products",
|
||||
description: "List marketplace products (TikTok, Shopee, Lazada) extracted from orders. Allows filtering by status ('unmapped', 'mapped', 'all'), channel ('tiktok', 'shopee', 'lazada', 'all'), search text, and pagination. Returns sales metrics and current masterVariant mapping.",
|
||||
inputSchema: {
|
||||
type: "object",
|
||||
properties: {
|
||||
channel: { type: "string", enum: ["tiktok", "shopee", "lazada", "all"], description: "Marketplace channel. Default is 'all'." },
|
||||
status: { type: "string", enum: ["unmapped", "mapped", "all"], description: "Mapping status. Default is 'unmapped'." },
|
||||
search: { type: "string", description: "Search by product name, variation, or SKU" },
|
||||
page: { type: "number", description: "Page number. Default 1." },
|
||||
limit: { type: "number", description: "Items per page. Default 50." }
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "get_master_product_variants",
|
||||
description: "List all master product variants from the core catalog for mapping, including product name, options (size/scent), SKU, barcode, and unit BOM cost.",
|
||||
inputSchema: {
|
||||
type: "object",
|
||||
properties: {
|
||||
search: { type: "string", description: "Search by product name, variant option, or SKU" }
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "map_marketplace_product",
|
||||
description: "Link or unlink a single marketplace product (TikTok/Shopee/Lazada) to a master product variant (ProductVariant) to enable BOM cost and profitability calculation. Pass masterVariantId=null to unlink.",
|
||||
inputSchema: {
|
||||
type: "object",
|
||||
properties: {
|
||||
marketplaceProductId: { type: "number", description: "Marketplace product ID" },
|
||||
masterVariantId: { type: ["number", "null"], description: "Master variant ID, or null to unlink" }
|
||||
},
|
||||
required: ["marketplaceProductId", "masterVariantId"]
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "bulk_map_marketplace_products",
|
||||
description: "Link multiple marketplace products to master catalog variants in a single batch operation.",
|
||||
inputSchema: {
|
||||
type: "object",
|
||||
properties: {
|
||||
mappings: {
|
||||
type: "array",
|
||||
description: "Array of mappings to apply",
|
||||
items: {
|
||||
type: "object",
|
||||
properties: {
|
||||
marketplaceProductId: { type: "number", description: "Marketplace product ID" },
|
||||
masterVariantId: { type: ["number", "null"], description: "Master variant ID, or null to unlink" }
|
||||
},
|
||||
required: ["marketplaceProductId", "masterVariantId"]
|
||||
}
|
||||
}
|
||||
},
|
||||
required: ["mappings"]
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "update_category_translation",
|
||||
description: "Add or update translations for a specific category. Do NOT use this tool for products.",
|
||||
@@ -1524,6 +1582,41 @@ async function handleToolRequest(request: CallToolRequest) {
|
||||
const res = await api.put(`/products/${params.productId}/bom`, { variants: params.variants });
|
||||
return { content: [{ type: "text", text: JSON.stringify(res.data, null, 2) }] };
|
||||
}
|
||||
case "list_marketplace_products": {
|
||||
const query = new URLSearchParams();
|
||||
if (params.channel) query.set("channel", String(params.channel));
|
||||
if (params.status) query.set("status", String(params.status));
|
||||
if (params.search) query.set("search", String(params.search));
|
||||
if (params.page) query.set("page", String(params.page));
|
||||
query.set("limit", String(params.limit ?? 50));
|
||||
const res = await api.get(`/tools/marketplace-products?${query.toString()}`);
|
||||
return { content: [{ type: "text", text: JSON.stringify(res.data, null, 2) }] };
|
||||
}
|
||||
case "get_master_product_variants": {
|
||||
const res = await api.get(`/tools/marketplace-products/master-variants`);
|
||||
let variants = res.data.variants || [];
|
||||
if (params.search) {
|
||||
const words = String(params.search).toLowerCase().split(/\s+/).filter(Boolean);
|
||||
variants = variants.filter((v: any) => {
|
||||
const target = `${v.displayName} ${v.sku} ${v.productName} ${v.optionsStr}`.toLowerCase();
|
||||
return words.every((w: string) => target.includes(w));
|
||||
});
|
||||
}
|
||||
return { content: [{ type: "text", text: JSON.stringify({ variants }, null, 2) }] };
|
||||
}
|
||||
case "map_marketplace_product": {
|
||||
const res = await api.post(`/tools/marketplace-products/map`, {
|
||||
marketplaceProductId: params.marketplaceProductId,
|
||||
masterVariantId: params.masterVariantId,
|
||||
});
|
||||
return { content: [{ type: "text", text: JSON.stringify(res.data, null, 2) }] };
|
||||
}
|
||||
case "bulk_map_marketplace_products": {
|
||||
const res = await api.post(`/tools/marketplace-products/bulk-map`, {
|
||||
mappings: params.mappings,
|
||||
});
|
||||
return { content: [{ type: "text", text: JSON.stringify(res.data, null, 2) }] };
|
||||
}
|
||||
case "create_product": {
|
||||
const res = await api.post(`/products`, params);
|
||||
return { content: [{ type: "text", text: JSON.stringify(res.data, null, 2) }] };
|
||||
|
||||
File diff suppressed because it is too large.
Load diff
@@ -0,0 +1,157 @@
|
||||
import * as fs from "fs";
|
||||
import * as path from "path";
|
||||
|
||||
const PROD_API = "https://api.homaroma.shop/api";
|
||||
|
||||
interface RawMaterialRef {
|
||||
id: number;
|
||||
name: string;
|
||||
pricePerUnit: number;
|
||||
unit: string;
|
||||
}
|
||||
|
||||
interface VariantPlan {
|
||||
id: number;
|
||||
sku: string;
|
||||
option: string;
|
||||
price: number;
|
||||
hasBom: boolean;
|
||||
totalBomCost: number;
|
||||
}
|
||||
|
||||
interface ProductPlan {
|
||||
index: number;
|
||||
productId: number;
|
||||
productName: string;
|
||||
scentName: string;
|
||||
category: string | null;
|
||||
bomStatus: string;
|
||||
configuredVariants: number;
|
||||
totalVariants: number;
|
||||
variants: VariantPlan[];
|
||||
matchedFragrance: RawMaterialRef | null;
|
||||
packagingReady: boolean;
|
||||
}
|
||||
|
||||
const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
|
||||
|
||||
const BOTTLE_MAP: Record<number, number> = {
|
||||
30: 10, // ขวดพร้อมฝา Oilozone 30ml
|
||||
60: 11, // ขวดพร้อมฝา Oilozone 60ml
|
||||
85: 12, // ขวดพร้อมฝา Oilozone 85ml
|
||||
120: 9, // ขวดพร้อมฝา Oilozone 120ml
|
||||
};
|
||||
|
||||
const FORMULA_MAP: Record<number, { fragQty: number; dpgQty: number }> = {
|
||||
30: { fragQty: 2.4, dpgQty: 27.6 },
|
||||
60: { fragQty: 4.8, dpgQty: 55.2 },
|
||||
85: { fragQty: 6.8, dpgQty: 78.2 },
|
||||
120: { fragQty: 9.6, dpgQty: 110.4 },
|
||||
};
|
||||
|
||||
function detectSize(variant: VariantPlan): number {
|
||||
const opt = (variant.option || "").toLowerCase();
|
||||
const sku = (variant.sku || "").toLowerCase();
|
||||
|
||||
if (opt.includes("120") || sku.includes("120ml")) return 120;
|
||||
if (opt.includes("85") || sku.includes("85ml")) return 85;
|
||||
if (opt.includes("60") || sku.includes("60ml")) return 60;
|
||||
if (opt.includes("30") || sku.includes("30ml")) return 30;
|
||||
|
||||
throw new Error(`Cannot detect size for variant ${variant.id} (${variant.sku} / ${variant.option})`);
|
||||
}
|
||||
|
||||
async function main() {
|
||||
const jsonPath = path.resolve(process.cwd(), "oil_ozone_products.json");
|
||||
if (!fs.existsSync(jsonPath)) {
|
||||
throw new Error(`File not found: ${jsonPath}`);
|
||||
}
|
||||
|
||||
const products: ProductPlan[] = JSON.parse(fs.readFileSync(jsonPath, "utf-8"));
|
||||
console.log(`Loaded ${products.length} products from ${jsonPath}`);
|
||||
|
||||
let successCount = 0;
|
||||
let skippedCount = 0;
|
||||
let failedCount = 0;
|
||||
|
||||
for (const product of products) {
|
||||
console.log(`\n--------------------------------------------------`);
|
||||
console.log(`[${product.index}/${products.length}] Product #${product.productId}: ${product.productName}`);
|
||||
|
||||
if (!product.matchedFragrance) {
|
||||
console.error(`❌ Skipped: No matching fragrance found for scent '${product.scentName}'`);
|
||||
failedCount++;
|
||||
continue;
|
||||
}
|
||||
|
||||
if (product.bomStatus === "CONFIGURED" && product.configuredVariants === product.totalVariants) {
|
||||
console.log(`⚡ Already configured (${product.configuredVariants}/${product.totalVariants} variants). Skipping.`);
|
||||
skippedCount++;
|
||||
continue;
|
||||
}
|
||||
|
||||
// Build variants payload
|
||||
const variantsPayload = product.variants.map((v) => {
|
||||
const size = detectSize(v);
|
||||
const formula = FORMULA_MAP[size];
|
||||
const bottleId = BOTTLE_MAP[size];
|
||||
|
||||
return {
|
||||
variantId: v.id,
|
||||
sku: v.sku,
|
||||
bomItems: [
|
||||
{
|
||||
rawMaterialId: product.matchedFragrance!.id,
|
||||
name: product.matchedFragrance!.name,
|
||||
quantity: formula.fragQty,
|
||||
},
|
||||
{
|
||||
rawMaterialId: 2, // DPG
|
||||
name: "DPG",
|
||||
quantity: formula.dpgQty,
|
||||
},
|
||||
{
|
||||
rawMaterialId: bottleId,
|
||||
quantity: 1,
|
||||
},
|
||||
],
|
||||
};
|
||||
});
|
||||
|
||||
console.log(`Applying BOM for ${variantsPayload.length} variants with fragrance [ID ${product.matchedFragrance.id}] ${product.matchedFragrance.name}...`);
|
||||
|
||||
try {
|
||||
const res = await fetch(`${PROD_API}/products/${product.productId}/bom`, {
|
||||
method: "PUT",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({ variants: variantsPayload }),
|
||||
});
|
||||
|
||||
if (!res.ok) {
|
||||
const errText = await res.text();
|
||||
throw new Error(`HTTP ${res.status}: ${errText}`);
|
||||
}
|
||||
|
||||
const resData = (await res.json()) as any;
|
||||
console.log(`✓ BOM saved successfully for #${product.productId}! Updated variants: ${resData.updatedVariants ?? variantsPayload.length}`);
|
||||
successCount++;
|
||||
} catch (err: any) {
|
||||
console.error(`❌ Failed to update BOM for #${product.productId}: ${err.message}`);
|
||||
failedCount++;
|
||||
}
|
||||
|
||||
// Rate-limit pause
|
||||
await sleep(200);
|
||||
}
|
||||
|
||||
console.log(`\n==================================================`);
|
||||
console.log(`BOM Application Summary:`);
|
||||
console.log(` - Newly configured: ${successCount}`);
|
||||
console.log(` - Already configured (skipped): ${skippedCount}`);
|
||||
console.log(` - Failed: ${failedCount}`);
|
||||
console.log(`==================================================\n`);
|
||||
}
|
||||
|
||||
main().catch(console.error);
|
||||
@@ -0,0 +1,169 @@
|
||||
import * as fs from "fs";
|
||||
import * as path from "path";
|
||||
|
||||
const PROD_API = "https://api.homaroma.shop/api";
|
||||
|
||||
interface RawMaterial {
|
||||
id: number;
|
||||
name: string;
|
||||
unit: string;
|
||||
pricePerUnit: number;
|
||||
}
|
||||
|
||||
interface Variant {
|
||||
id: number;
|
||||
sku: string;
|
||||
options: string;
|
||||
price: number;
|
||||
hasBom: boolean;
|
||||
bomItemCount: number;
|
||||
totalBomCost: number;
|
||||
}
|
||||
|
||||
interface Product {
|
||||
id: number;
|
||||
name: string;
|
||||
brand: string | null;
|
||||
category: string | null;
|
||||
totalVariants: number;
|
||||
configuredVariants: number;
|
||||
bomStatus: string;
|
||||
variants: Variant[];
|
||||
}
|
||||
|
||||
async function main() {
|
||||
console.log("1. Fetching all products from production...");
|
||||
const statusRes = await fetch(`${PROD_API}/products/bom-status?limit=250`);
|
||||
if (!statusRes.ok) throw new Error(`Failed to fetch products: ${statusRes.statusText}`);
|
||||
const statusData = (await statusRes.json()) as { products: Product[] };
|
||||
|
||||
// Filter only Oil Ozone products
|
||||
const allProducts = statusData.products || [];
|
||||
const oilOzoneProducts = allProducts.filter(
|
||||
(p) =>
|
||||
p.name.includes("Oil Ozone") ||
|
||||
(p.category && p.category.includes("โอโซน")) ||
|
||||
p.variants.some((v) => v.sku && v.sku.includes("-1-"))
|
||||
);
|
||||
|
||||
console.log(`Found ${oilOzoneProducts.length} Oil Ozone products.`);
|
||||
|
||||
// 2. Fetch all raw materials from production
|
||||
console.log("2. Fetching available raw materials from production...");
|
||||
const rmRes = await fetch(`${PROD_API}/raw-materials`);
|
||||
if (!rmRes.ok) throw new Error(`Failed to fetch raw materials: ${rmRes.statusText}`);
|
||||
const rawMaterials = (await rmRes.json()) as RawMaterial[];
|
||||
console.log(`Found ${rawMaterials.length} raw materials on production.`);
|
||||
|
||||
// Identify common raw materials
|
||||
const dpg = rawMaterials.find((r) => r.name.trim().toLowerCase() === "dpg");
|
||||
const b30 = rawMaterials.find((r) => r.name.includes("Oilozone 30ml") || r.name.includes("ขวดพร้อมฝา Oilozone 30ml"));
|
||||
const b60 = rawMaterials.find((r) => r.name.includes("Oilozone 60ml") || r.name.includes("ขวดพร้อมฝา Oilozone 60ml"));
|
||||
const b85 = rawMaterials.find((r) => r.name.includes("Oilozone 85ml") || r.name.includes("ขวดพร้อมฝา Oilozone 85ml"));
|
||||
const b120 = rawMaterials.find((r) => r.name.includes("Oilozone 120ml") || r.name.includes("ขวดพร้อมฝา Oilozone 120ml"));
|
||||
|
||||
// Build match plan for each product
|
||||
const productPlan = oilOzoneProducts.map((p, idx) => {
|
||||
// Extract scent name e.g. "ซากุระ Oil Ozone" -> "ซากุระ"
|
||||
const scentName = p.name.replace(/Oil Ozone/gi, "").trim();
|
||||
|
||||
// Look for matching fragrance oil in raw materials
|
||||
const matchedFragrance = rawMaterials.find((rm) => {
|
||||
const rmName = rm.name.trim();
|
||||
return (
|
||||
rmName === `หัวน้ำหอม กลิ่น${scentName}` ||
|
||||
rmName === `หัวน้ำหอม ${scentName}` ||
|
||||
rmName.includes(`กลิ่น${scentName}`) ||
|
||||
(rmName.includes(scentName) && rmName.includes("หัวน้ำหอม"))
|
||||
);
|
||||
});
|
||||
|
||||
return {
|
||||
index: idx + 1,
|
||||
productId: p.id,
|
||||
productName: p.name,
|
||||
scentName,
|
||||
category: p.category,
|
||||
bomStatus: p.bomStatus,
|
||||
configuredVariants: p.configuredVariants,
|
||||
totalVariants: p.totalVariants,
|
||||
variants: p.variants.map((v) => ({
|
||||
id: v.id,
|
||||
sku: v.sku,
|
||||
option: v.options,
|
||||
price: v.price,
|
||||
hasBom: v.hasBom,
|
||||
totalBomCost: v.totalBomCost,
|
||||
marginPercent: v.price > 0 && v.totalBomCost > 0
|
||||
? Number((((v.price - v.totalBomCost) / v.price) * 100).toFixed(1))
|
||||
: null,
|
||||
})),
|
||||
matchedFragrance: matchedFragrance
|
||||
? {
|
||||
id: matchedFragrance.id,
|
||||
name: matchedFragrance.name,
|
||||
pricePerUnit: matchedFragrance.pricePerUnit,
|
||||
unit: matchedFragrance.unit,
|
||||
}
|
||||
: null,
|
||||
packagingReady: !!(dpg && b30 && b60 && b85 && b120),
|
||||
};
|
||||
});
|
||||
|
||||
// 3. Save JSON to local root folder
|
||||
const jsonPath = path.resolve(process.cwd(), "oil_ozone_products.json");
|
||||
fs.writeFileSync(jsonPath, JSON.stringify(productPlan, null, 2), "utf-8");
|
||||
console.log(`\n✓ Saved JSON data to: ${jsonPath}`);
|
||||
|
||||
// 4. Generate Markdown Ledger
|
||||
let md = `# รายการสินค้ากลุ่ม Oil Ozone สำหรับกำหนดสูตร BOM (Production)\n\n`;
|
||||
md += `> **เป้าหมาย:** กำหนดสูตร BOM อัตราส่วน หัวน้ำหอม 8% + DPG 92% + ขวดและฝา 4 บาท (ทุกขนาด: 30ml, 60ml, 85ml, 120ml)\n`;
|
||||
md += `> **อัปเดตล่าสุด:** ${new Date().toLocaleString("th-TH")}\n`;
|
||||
md += `> **จำนวนสินค้าทั้งหมด:** ${productPlan.length} รายการ\n\n`;
|
||||
|
||||
md += `## 📦 สรุปสถานะภาพรวม\n`;
|
||||
const configured = productPlan.filter((p) => p.bomStatus === "CONFIGURED").length;
|
||||
const missing = productPlan.filter((p) => p.bomStatus === "MISSING").length;
|
||||
const partial = productPlan.filter((p) => p.bomStatus === "PARTIAL").length;
|
||||
const fragranceFound = productPlan.filter((p) => p.matchedFragrance !== null).length;
|
||||
|
||||
md += `- **ตั้งค่าเสร็จแล้ว (CONFIGURED):** ${configured} / ${productPlan.length} รายการ (100%)\n`;
|
||||
md += `- **ยังไม่ได้ตั้งค่า (MISSING):** ${missing} รายการ\n`;
|
||||
md += `- **ตั้งค่าบางส่วน (PARTIAL):** ${partial} รายการ\n`;
|
||||
md += `- **พบวัตถุดิบหัวน้ำหอมตรงกลิ่น:** ${fragranceFound} / ${productPlan.length} รายการ\n\n`;
|
||||
|
||||
md += `## 📋 ตารางรายละเอียดต้นทุน BOM และอัตรากำไร (Margin)\n\n`;
|
||||
md += `| # | ID | ชื่อสินค้า | หัวน้ำหอม (ราคา/ml) | ต้นทุน 30ml (กำไร%) | ต้นทุน 60ml (กำไร%) | ต้นทุน 85ml (กำไร%) | ต้นทุน 120ml (กำไร%) | สถานะ |\n`;
|
||||
md += `| :-: | :-: | :--- | :--- | :-: | :-: | :-: | :-: | :-: |\n`;
|
||||
|
||||
for (const p of productPlan) {
|
||||
const statusBadge =
|
||||
p.bomStatus === "CONFIGURED"
|
||||
? "✅ พร้อมขาย"
|
||||
: p.bomStatus === "PARTIAL"
|
||||
? "⚠️ บางส่วน"
|
||||
: "❌ ขาด BOM";
|
||||
|
||||
const fragText = p.matchedFragrance
|
||||
? `[ID: ${p.matchedFragrance.id}] ${p.matchedFragrance.name} (฿${p.matchedFragrance.pricePerUnit})`
|
||||
: `<span style="color:red">⚠️ ไม่พบหัวน้ำหอม</span>`;
|
||||
|
||||
const v30 = p.variants.find((v) => (v.option || "").includes("30") || (v.sku || "").includes("30ML"));
|
||||
const v60 = p.variants.find((v) => (v.option || "").includes("60") || (v.sku || "").includes("60ML"));
|
||||
const v85 = p.variants.find((v) => (v.option || "").includes("85") || (v.sku || "").includes("85ML"));
|
||||
const v120 = p.variants.find((v) => (v.option || "").includes("120") || (v.sku || "").includes("120ML"));
|
||||
|
||||
const formatCost = (v?: (typeof p.variants)[0]) => {
|
||||
if (!v || !v.hasBom) return "-";
|
||||
return `฿${v.totalBomCost.toFixed(2)} (${v.marginPercent}%)`;
|
||||
};
|
||||
|
||||
md += `| ${p.index} | **#${p.productId}** | [${p.productName}](https://admin.homaroma.shop/products/${p.productId}/bom) | ${fragText} | ${formatCost(v30)} | ${formatCost(v60)} | ${formatCost(v85)} | ${formatCost(v120)} | ${statusBadge} |\n`;
|
||||
}
|
||||
|
||||
const mdPath = path.resolve(process.cwd(), "OIL_OZONE_BOM_LEDGER.md");
|
||||
fs.writeFileSync(mdPath, md, "utf-8");
|
||||
console.log(`✓ Saved Markdown ledger to: ${mdPath}`);
|
||||
}
|
||||
|
||||
main().catch(console.error);
|
||||
@@ -0,0 +1,299 @@
|
||||
import * as fs from "fs";
|
||||
import * as path from "path";
|
||||
|
||||
const PROD_API = "https://api.homaroma.shop/api";
|
||||
|
||||
interface MasterVariant {
|
||||
id: number;
|
||||
sku: string;
|
||||
barcode: string;
|
||||
price: number;
|
||||
stock: number;
|
||||
optionsStr: string;
|
||||
productName: string;
|
||||
categoryName: string;
|
||||
brandName: string;
|
||||
bomCost: number;
|
||||
displayName: string;
|
||||
}
|
||||
|
||||
interface MarketplaceProduct {
|
||||
id: number;
|
||||
channel: string;
|
||||
shop: string;
|
||||
marketplaceSku: string;
|
||||
productName: string;
|
||||
variation: string;
|
||||
avgPrice: number;
|
||||
totalSoldQty: number;
|
||||
totalRevenue: number;
|
||||
firstSoldAt: string;
|
||||
lastSoldAt: string;
|
||||
masterVariantId: number | null;
|
||||
}
|
||||
|
||||
// Scents standard dictionary & aliases
|
||||
const SCENT_ALIASES: Record<string, string> = {
|
||||
"เปปเปอร์มินต์": "เปเปอร์มิ้น",
|
||||
"เปปเปอร์มิ้นท์": "เปเปอร์มิ้น",
|
||||
"เปปเปอร์มิ้น": "เปเปอร์มิ้น",
|
||||
"เปเปอร์มินต์": "เปเปอร์มิ้น",
|
||||
"ตะไคร้บ้าน": "ตะไคร้",
|
||||
"เฟรช ลาเวนเดอร์": "เฟรชลาเวนเดอร์",
|
||||
"เฟรชลาเวนเดอร์": "เฟรชลาเวนเดอร์",
|
||||
"แซนดัลวูด": "แซนด้าวูส",
|
||||
"แซนด้าวูด": "แซนด้าวูส",
|
||||
"แซนดัลวู้ด": "แซนด้าวูส",
|
||||
"กุหลาบ": "กุหลาบแดง",
|
||||
"มะลิซ้อน": "มะลิ",
|
||||
"ลูกพีช": "กลิ่นลูกพีช",
|
||||
"พีช": "กลิ่นลูกพีช",
|
||||
"องุ่น": "กลิ่นองุ่น",
|
||||
"น้ำนม": "กลิ่นน้ำนม",
|
||||
"นม": "กลิ่นน้ำนม",
|
||||
"มหาสมุทร": "โอเชี่ยน",
|
||||
"ราตรี": "ดอกราตรี",
|
||||
"การเวก": "ดอกการะเวก",
|
||||
"ดอกอัญชัน": "อัญชัน",
|
||||
"ดอกบัวหลวง": "ดอกบัว",
|
||||
"ไม้หอม": "แซนด้าวูส",
|
||||
};
|
||||
|
||||
// Size extractor helper
|
||||
function extractSize(variation: string, productName: string): string | null {
|
||||
const v = (variation || "").toLowerCase();
|
||||
const p = (productName || "").toLowerCase();
|
||||
|
||||
// Variation has highest priority for size
|
||||
if (v.includes("120") || v.includes("120ml")) return "120ml";
|
||||
if (v.includes("85") || v.includes("85ml")) return "85ml";
|
||||
if (v.includes("60") || v.includes("60ml")) return "60ml";
|
||||
if (v.includes("30") || v.includes("30ml")) return "30ml";
|
||||
|
||||
// Fallback to product name
|
||||
if (p.includes("120") || p.includes("120ml") || p.includes("ขวดใหญ่")) return "120ml";
|
||||
if (p.includes("85") || p.includes("85ml")) return "85ml";
|
||||
if (p.includes("60") || p.includes("60ml")) return "60ml";
|
||||
if (p.includes("30") || p.includes("30ml") || p.includes("ขวดเล็ก")) return "30ml";
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
// Scent extractor helper
|
||||
function extractScent(variation: string, productName: string, masterScents: string[]): string | null {
|
||||
const cleanVar = (variation || "")
|
||||
.replace(/\d+\s*ml/gi, "")
|
||||
.replace(/,/g, "")
|
||||
.replace(/^กลิ่น\s*/, "")
|
||||
.trim();
|
||||
|
||||
// 1. Check variation aliases first
|
||||
for (const [alias, canonical] of Object.entries(SCENT_ALIASES)) {
|
||||
if (cleanVar.includes(alias) || cleanVar === alias) {
|
||||
return canonical;
|
||||
}
|
||||
}
|
||||
|
||||
// 2. Check direct master scents in variation
|
||||
for (const scent of masterScents) {
|
||||
if (cleanVar.includes(scent) || cleanVar === scent) {
|
||||
return scent;
|
||||
}
|
||||
}
|
||||
|
||||
// 3. Fallback to product name aliases
|
||||
for (const [alias, canonical] of Object.entries(SCENT_ALIASES)) {
|
||||
if (productName.includes(alias)) {
|
||||
return canonical;
|
||||
}
|
||||
}
|
||||
|
||||
// 4. Fallback to direct master scents in product name
|
||||
for (const scent of masterScents) {
|
||||
if (productName.includes(`กลิ่น ${scent}`) || productName.includes(`กลิ่น${scent}`) || productName.includes(scent)) {
|
||||
return scent;
|
||||
}
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
async function main() {
|
||||
console.log("1. Fetching master variants from production...");
|
||||
const mvRes = await fetch(`${PROD_API}/tools/marketplace-products/master-variants`);
|
||||
const mvData = (await mvRes.json()) as { variants: MasterVariant[] };
|
||||
const masterVariants = mvData.variants || [];
|
||||
console.log(`Loaded ${masterVariants.length} master variants.`);
|
||||
|
||||
// Filter only Oil Ozone master variants
|
||||
const ozoneVariants = masterVariants.filter(
|
||||
(v) => (v.categoryName && v.categoryName.includes("โอโซน")) || v.productName.includes("Oil Ozone")
|
||||
);
|
||||
console.log(`Found ${ozoneVariants.length} Oil Ozone master variants.`);
|
||||
|
||||
// Collect distinct scents
|
||||
const masterScents = Array.from(
|
||||
new Set(ozoneVariants.map((v) => v.productName.replace(/Oil Ozone/gi, "").trim()))
|
||||
).filter(Boolean);
|
||||
console.log(`Detected ${masterScents.length} distinct Oil Ozone scents.`);
|
||||
|
||||
// 2. Fetch unmapped TikTok products
|
||||
console.log("\n2. Fetching unmapped TikTok products from production...");
|
||||
const mpRes = await fetch(`${PROD_API}/tools/marketplace-products?channel=tiktok&status=unmapped&limit=350`);
|
||||
const mpData = (await mpRes.json()) as { items: MarketplaceProduct[]; pagination: any };
|
||||
const unmappedItems = mpData.items || [];
|
||||
console.log(`Found ${unmappedItems.length} unmapped TikTok items (total in DB: ${mpData.pagination?.total}).`);
|
||||
|
||||
// 3. Test matching
|
||||
const matches: Array<{
|
||||
item: MarketplaceProduct;
|
||||
matchedVariant: MasterVariant;
|
||||
scent: string;
|
||||
size: string;
|
||||
confidence: "HIGH" | "MEDIUM";
|
||||
}> = [];
|
||||
|
||||
const unmatchable: MarketplaceProduct[] = [];
|
||||
|
||||
for (const item of unmappedItems) {
|
||||
const text = `${item.productName} ${item.variation || ""}`;
|
||||
const isOilOzone =
|
||||
text.includes("โอโซน") ||
|
||||
text.includes("oil ozone") ||
|
||||
text.includes("ออยโอโซน") ||
|
||||
text.includes("น้ำมันหอมระเหย") ||
|
||||
text.includes("น้ำหอมอโรม่า") ||
|
||||
text.includes("น้ำมันอโรม่า") ||
|
||||
text.includes("น้ำมันหอมไอน้ำ") ||
|
||||
item.marketplaceSku.includes("OZO") ||
|
||||
item.marketplaceSku.includes("OIL_") ||
|
||||
item.marketplaceSku === "30-ALL";
|
||||
|
||||
if (!isOilOzone) {
|
||||
unmatchable.push(item);
|
||||
continue;
|
||||
}
|
||||
|
||||
const size = extractSize(item.variation, item.productName);
|
||||
const scent = extractScent(item.variation, item.productName, masterScents);
|
||||
|
||||
if (scent && size) {
|
||||
// Find matching variant
|
||||
const matched = ozoneVariants.find((v) => {
|
||||
const vScent = v.productName.replace(/Oil Ozone/gi, "").trim();
|
||||
const vSize = (v.optionsStr || "").toLowerCase();
|
||||
return (
|
||||
vScent === scent &&
|
||||
(vSize.includes(size.toLowerCase()) || v.sku.toLowerCase().includes(size.toLowerCase()))
|
||||
);
|
||||
});
|
||||
|
||||
if (matched) {
|
||||
matches.push({
|
||||
item,
|
||||
matchedVariant: matched,
|
||||
scent,
|
||||
size,
|
||||
confidence: "HIGH",
|
||||
});
|
||||
} else {
|
||||
unmatchable.push(item);
|
||||
}
|
||||
} else {
|
||||
unmatchable.push(item);
|
||||
}
|
||||
}
|
||||
|
||||
console.log(`\n==================================================`);
|
||||
console.log(`Matching Simulation Results:`);
|
||||
console.log(` - Successfully matched: ${matches.length} items (${((matches.length / unmappedItems.length) * 100).toFixed(1)}%)`);
|
||||
console.log(` - Unmatched / Non-ozone: ${unmatchable.length} items`);
|
||||
console.log(`==================================================\n`);
|
||||
|
||||
console.log("Sample 15 matches:");
|
||||
matches.slice(0, 15).forEach((m, idx) => {
|
||||
console.log(
|
||||
`[${idx + 1}] MP #${m.item.id} (${m.item.marketplaceSku || 'NO_SKU'}) | '${m.item.productName.slice(0, 35)}...' | Var: '${m.item.variation}'`
|
||||
);
|
||||
console.log(
|
||||
` -> MATCHED: [Variant #${m.matchedVariant.id} | SKU: ${m.matchedVariant.sku}] ${m.matchedVariant.displayName} (BOM: ฿${m.matchedVariant.bomCost.toFixed(2)})`
|
||||
);
|
||||
});
|
||||
|
||||
// Save report to scratch file
|
||||
const reportPath = path.resolve(process.cwd(), "scratch_tiktok_matches.json");
|
||||
fs.writeFileSync(
|
||||
reportPath,
|
||||
JSON.stringify(
|
||||
{
|
||||
matchedCount: matches.length,
|
||||
unmatchedCount: unmatchable.length,
|
||||
matches: matches.map((m) => ({
|
||||
marketplaceProductId: m.item.id,
|
||||
marketplaceSku: m.item.marketplaceSku,
|
||||
marketplaceName: m.item.productName,
|
||||
marketplaceVariation: m.item.variation,
|
||||
matchedVariantId: m.matchedVariant.id,
|
||||
matchedVariantSku: m.matchedVariant.sku,
|
||||
matchedVariantName: m.matchedVariant.displayName,
|
||||
unitBomCost: m.matchedVariant.bomCost,
|
||||
soldQty: m.item.totalSoldQty,
|
||||
revenue: m.item.totalRevenue,
|
||||
})),
|
||||
unmatched: unmatchable.map((u) => ({
|
||||
id: u.id,
|
||||
sku: u.marketplaceSku,
|
||||
name: u.productName,
|
||||
variation: u.variation,
|
||||
revenue: u.totalRevenue,
|
||||
})),
|
||||
},
|
||||
null,
|
||||
2
|
||||
),
|
||||
"utf-8"
|
||||
);
|
||||
console.log(`\nSaved match report to: ${reportPath}`);
|
||||
|
||||
// 4. Apply mappings if --apply flag is passed
|
||||
const shouldApply = process.argv.includes("--apply");
|
||||
if (!shouldApply) {
|
||||
console.log(`\n💡 To apply all ${matches.length} mappings to production, run:`);
|
||||
console.log(` bun scripts/match_and_map_tiktok_products.ts --apply\n`);
|
||||
return;
|
||||
}
|
||||
|
||||
console.log(`\n🚀 Applying ${matches.length} mappings to production...`);
|
||||
let applied = 0;
|
||||
let failed = 0;
|
||||
|
||||
const BATCH = 15;
|
||||
for (let i = 0; i < matches.length; i += BATCH) {
|
||||
const chunk = matches.slice(i, i + BATCH);
|
||||
await Promise.all(
|
||||
chunk.map(async (m) => {
|
||||
try {
|
||||
const res = await fetch(`${PROD_API}/tools/marketplace-products/map`, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({
|
||||
marketplaceProductId: m.item.id,
|
||||
masterVariantId: m.matchedVariant.id,
|
||||
}),
|
||||
});
|
||||
if (!res.ok) throw new Error(`HTTP ${res.status}`);
|
||||
applied++;
|
||||
} catch (err: any) {
|
||||
console.error(`Failed to map MP #${m.item.id}:`, err.message);
|
||||
failed++;
|
||||
}
|
||||
})
|
||||
);
|
||||
process.stdout.write(`\rProgress: ${applied}/${matches.length} applied (${failed} failed)...`);
|
||||
await new Promise((r) => setTimeout(r, 100));
|
||||
}
|
||||
|
||||
console.log(`\n\n🎉 Finished! Successfully mapped: ${applied} | Failed: ${failed}`);
|
||||
}
|
||||
|
||||
main().catch(console.error);
|
||||
Reference in new issue
Block a user