From 85a0f984ebf9c9c885c36a1da1e43565afa34e65 Mon Sep 17 00:00:00 2001 From: Your Name Date: Sun, 9 Aug 2026 01:49:11 -0400 Subject: [PATCH] x --- apps/admin/src/App.tsx | 2 + apps/admin/src/components/Sidebar.tsx | 2 + .../src/pages/TiktokPriceSimulatorPage.tsx | 447 --------------- apps/admin/src/pages/TiktokShopCasePage.tsx | 542 ++++++++++++++++++ 4 files changed, 546 insertions(+), 447 deletions(-) create mode 100644 apps/admin/src/pages/TiktokShopCasePage.tsx diff --git a/apps/admin/src/App.tsx b/apps/admin/src/App.tsx index 59eb4bc..94e0a83 100644 --- a/apps/admin/src/App.tsx +++ b/apps/admin/src/App.tsx @@ -45,6 +45,7 @@ import MediaLibraryPage from './pages/MediaLibraryPage' import ContactMessagesPage from './pages/ContactMessagesPage' import ProductAttributesPage from './pages/ProductAttributesPage' import TiktokPriceSimulatorPage from './pages/TiktokPriceSimulatorPage' +import TiktokShopCasePage from './pages/TiktokShopCasePage' function App() { return ( @@ -90,6 +91,7 @@ function App() { } /> } /> } /> + } /> } /> } /> } /> diff --git a/apps/admin/src/components/Sidebar.tsx b/apps/admin/src/components/Sidebar.tsx index 94b090b..8068b85 100644 --- a/apps/admin/src/components/Sidebar.tsx +++ b/apps/admin/src/components/Sidebar.tsx @@ -28,6 +28,7 @@ import { ChevronDown, Sparkles, Calculator, + Info, } from 'lucide-react' const MAIN_MENU = [ @@ -53,6 +54,7 @@ const MAIN_MENU = [ { icon: BarChart3, label: 'TikTok Analytics', to: '/tiktok-analytics' }, { icon: Layers, label: 'TikTok ทุกร้าน', to: '/tiktok-overview' }, { icon: Calculator, label: 'TikTok Price Simulator', to: '/tiktok-price-simulator' }, + { icon: Info, label: 'TikTok Shop Case', to: '/tiktok-shop-case' }, { icon: ShoppingCart, label: 'Lazada Orders', to: '/lazada-order' }, { icon: BarChart3, label: 'Lazada Analytics', to: '/lazada-analytics' }, { icon: Layers, label: 'Lazada ทุกร้าน', to: '/lazada-overview' }, diff --git a/apps/admin/src/pages/TiktokPriceSimulatorPage.tsx b/apps/admin/src/pages/TiktokPriceSimulatorPage.tsx index 47e43fc..0ec2603 100644 --- a/apps/admin/src/pages/TiktokPriceSimulatorPage.tsx +++ b/apps/admin/src/pages/TiktokPriceSimulatorPage.tsx @@ -837,97 +837,6 @@ function BreakEvenAlert() { export default function TiktokPriceSimulatorPage() { const [resetKey, setResetKey] = useState(0) - const [selectedCase, setSelectedCase] = useState<'case1' | 'case2' | 'case3'>('case1') - - const [simBeforeDiscount, setSimBeforeDiscount] = useState(79.00) - const [simDiscountType, setSimDiscountType] = useState<'pct' | 'amount'>('amount') - const [simDiscountVal, setSimDiscountVal] = useState(17.90) - const [simCost, setSimCost] = useState(30.00) - - const [simTransPct, setSimTransPct] = useState(3.21) - const [simCommPct, setSimCommPct] = useState(10.70) - const [simGrowthPct, setSimGrowthPct] = useState(7.50) - const [simAffiliatePct, setSimAffiliatePct] = useState(0) - - const caseData = { - case1: { - beforeDiscount: 79.00, - shopDiscount: -17.90, - baseAmt: 61.10, - origTrans: -1.96, - origComm: -6.54, - origGrowth: -4.58, - origAffiliate: 0, - origTotalFees: -13.08, - originalPayout: 48.02, - defaultCost: 30.00, - label: 'เคสที่ 1: บิลสินค้า ฿79 (สุทธิ ฿48.02)', - }, - case2: { - beforeDiscount: 190.00, - shopDiscount: -20.90, - baseAmt: 169.10, - origTrans: -5.43, - origComm: -18.09, - origGrowth: -12.67, - origAffiliate: 0, - origTotalFees: -36.19, - originalPayout: 132.91, - defaultCost: 80.00, - label: 'เคสที่ 2: บิลสินค้า ฿190 (สุทธิ ฿132.91)', - }, - case3: { - beforeDiscount: 190.00, - shopDiscount: -37.81, - baseAmt: 152.19, - origTrans: -4.89, - origComm: -16.28, - origGrowth: -11.40, - origAffiliate: -7.61, - origTotalFees: -40.18, - originalPayout: 112.01, - defaultCost: 70.00, - label: 'เคสที่ 3: บิลสินค้า ฿190 + Affiliate (สุทธิ ฿112.01)', - } - } - - const activeCase = caseData[selectedCase] - - useEffect(() => { - setSimBeforeDiscount(activeCase.beforeDiscount) - setSimDiscountType('amount') - setSimDiscountVal(Math.abs(activeCase.shopDiscount)) - setSimCost(activeCase.defaultCost) - setSimTransPct(3.21) - setSimCommPct(10.70) - setSimGrowthPct(7.50) - setSimAffiliatePct(selectedCase === 'case3' ? 5.00 : 0) - }, [selectedCase]) - - // Simulated calculations - const simDiscountAmount = simDiscountType === 'pct' ? simBeforeDiscount * (simDiscountVal / 100) : simDiscountVal - const baseAmt = Math.max(0, simBeforeDiscount - simDiscountAmount) - - const simTransAmt = baseAmt * (simTransPct / 100) - const simCommAmt = baseAmt * (simCommPct / 100) - const simGrowthAmt = baseAmt * (simGrowthPct / 100) - const simAffiliateAmt = baseAmt * (simAffiliatePct / 100) - const simTotalAmt = simTransAmt + simCommAmt + simGrowthAmt + simAffiliateAmt - const simTotalPct = simTransPct + simCommPct + simGrowthPct + simAffiliatePct - const simPayout = baseAmt - simTotalAmt - - const originalPayout = activeCase.originalPayout - const diffVal = simPayout - originalPayout - const diffPct = originalPayout > 0 ? (diffVal / originalPayout) * 100 : 0 - - // Profit/Margin/ROI Calculations - const origProfit = originalPayout - simCost - const origProfitMargin = activeCase.baseAmt > 0 ? (origProfit / activeCase.baseAmt) * 100 : 0 - const origROI = simCost > 0 ? (origProfit / simCost) * 100 : 0 - - const simProfit = simPayout - simCost - const simProfitMargin = baseAmt > 0 ? (simProfit / baseAmt) * 100 : 0 - const simROI = simCost > 0 ? (simProfit / simCost) * 100 : 0 return (
@@ -948,10 +857,6 @@ export default function TiktokPriceSimulatorPage() {
- - {/* Real Payout Case Study Example */} -
-
-
- -

กรณีศึกษา & เครื่องมือจำลองค่าธรรมเนียมจริง (TikTok Shop)

-
-
-
- - - -
- -
-
- -

- รายละเอียดบิลจริงดั้งเดิมของ {selectedCase === 'case1' ? 'ตัวอย่างที่ 1' : selectedCase === 'case2' ? 'ตัวอย่างที่ 2' : 'ตัวอย่างที่ 3'}: -

-
-
- ยอดรวมสินค้าก่อนลด - {fmt(activeCase.beforeDiscount)} -
-
- ส่วนลดจากร้านค้า (ลดไป %) - - {fmt(activeCase.shopDiscount)} (-{((Math.abs(activeCase.shopDiscount) / activeCase.beforeDiscount) * 100).toFixed(1)}%) - -
-
- ยอดรวมหลังหักส่วนลด (ฐานคิดค่าคอม) - {fmt(activeCase.baseAmt)} -
-
- - {/* Simulator controls - Price & Discounts */} -

1. จำลองการตั้งราคา ส่วนลด และต้นทุนสินค้า (ปรับแต่งเองได้):

-
-
- -
- setSimBeforeDiscount(parseFloat(e.target.value) || 0)} - className="admin-input w-full text-xs" - /> - ฿ -
-
-
- -
-
- - -
- setSimDiscountVal(parseFloat(e.target.value) || 0)} - className="admin-input w-full text-xs" - /> - {simDiscountType === 'pct' ? '%' : '฿'} -
-
-
- -
- setSimCost(parseFloat(e.target.value) || 0)} - className="admin-input w-full text-xs" - /> - ฿ -
-
-
- - {/* Simulator controls - Fees */} -

2. จำลองการปรับเปลี่ยนอัตราค่าธรรมเนียม (%):

-
-
- -
- setSimTransPct(parseFloat(e.target.value) || 0)} - className="admin-input w-full text-xs" - /> - % -
-
-
- -
- setSimCommPct(parseFloat(e.target.value) || 0)} - className="admin-input w-full text-xs" - /> - % -
-
-
- -
- setSimGrowthPct(parseFloat(e.target.value) || 0)} - className="admin-input w-full text-xs" - /> - % -
-
-
- -
- setSimAffiliatePct(parseFloat(e.target.value) || 0)} - className="admin-input w-full text-xs" - /> - % -
-
-
- - {/* Side-by-side comparison tables */} -
- {/* ก่อนปรับ (ค่าธรรมเนียมจากบิลตัวอย่างจริง) */} -
-

- ก่อนปรับ (บิลดั้งเดิม) - รวม {((Math.abs(activeCase.origTotalFees) / activeCase.baseAmt) * 100).toFixed(2)}% -

-
-
- ยอดรวมสินค้าก่อนลด - {fmt(activeCase.beforeDiscount)} -
-
- ส่วนลดจากร้านค้า - {fmt(activeCase.shopDiscount)} -
-
- ยอดสินค้าสุทธิ (ฐานคิดคอม) - {fmt(activeCase.baseAmt)} -
-
- - ค่าคำสั่งซื้อ (Transaction 3.21%) - {fmt(activeCase.origTrans)} -
-
- - ค่าคอม TikTok Shop (10.70%) - {fmt(activeCase.origComm)} -
-
- - ค่าสนับสนุนการเติบโต (7.50%) - {fmt(activeCase.origGrowth)} -
- {activeCase.origAffiliate !== 0 && ( -
- - ค่าคอมแอฟฟิลิเอต (5.00%) - {fmt(activeCase.origAffiliate)} -
- )} -
- รวมค่าธรรมเนียมโดนหัก - {fmt(activeCase.origTotalFees)} -
-
- ยอดเงินโอนเข้าบัญชีสุทธิ - {fmt(activeCase.originalPayout)} -
-
- - ต้นทุนสินค้า (Cost) - ฿-{simCost.toFixed(2)} -
-
- กำไรสุทธิ (Net Profit) - = 0 ? 'text-green-400' : 'text-rose-400'}`}> - {origProfit >= 0 ? '' : '-'}฿{Math.abs(origProfit).toFixed(2)} - -
-
- กำไรต่อยอดขาย (Margin %) - = 0 ? 'text-green-400' : 'text-rose-400'}`}> - {origProfitMargin.toFixed(1)}% - -
-
- กำไรต่อทุน (ROI %) - = 0 ? 'text-green-400' : 'text-rose-400'}`}> - {origROI.toFixed(1)}% - -
-
-
- - {/* หลังปรับ (จำลองการปรับค่าธรรมเนียม) */} -
-

- หลังปรับ (ผลการจำลองใหม่) - รวม {simTotalPct.toFixed(2)}% -

-
-
- ยอดรวมสินค้าก่อนลด - {fmt(simBeforeDiscount)} -
-
- ส่วนลดจากร้านค้า - - -{fmt(simDiscountAmount)} {simDiscountType === 'pct' && `(${simDiscountVal}%)`} - -
-
- ยอดสินค้าสุทธิ (ฐานคิดคอม) - {fmt(baseAmt)} -
-
- - ค่าคำสั่งซื้อ ({simTransPct.toFixed(2)}%) - ฿-{simTransAmt.toFixed(2)} -
-
- - ค่าคอม TikTok Shop ({simCommPct.toFixed(2)}%) - ฿-{simCommAmt.toFixed(2)} -
-
- - ค่าสนับสนุนการเติบโต ({simGrowthPct.toFixed(2)}%) - ฿-{simGrowthAmt.toFixed(2)} -
- {simAffiliatePct > 0 && ( -
- - ค่าคอมคอมแอฟฟิลิเอต ({simAffiliatePct.toFixed(2)}%) - ฿-{simAffiliateAmt.toFixed(2)} -
- )} -
- รวมค่าธรรมเนียมโดนหัก - ฿-{simTotalAmt.toFixed(2)} -
-
- ยอดเงินโอนเข้าบัญชีสุทธิ - ฿{simPayout.toFixed(2)} -
-
- - ต้นทุนสินค้า (Cost) - ฿-{simCost.toFixed(2)} -
-
- กำไรสุทธิ (Net Profit) - = 0 ? 'text-green-400' : 'text-rose-400'}`}> - {simProfit >= 0 ? '' : '-'}฿{Math.abs(simProfit).toFixed(2)} - -
-
- กำไรต่อยอดขาย (Margin %) - = 0 ? 'text-green-400' : 'text-rose-400'}`}> - {simProfitMargin.toFixed(1)}% - -
-
- กำไรต่อทุน (ROI %) - = 0 ? 'text-green-400' : 'text-rose-400'}`}> - {simROI.toFixed(1)}% - -
-
-
-
- - {/* Difference comparison status card */} -
= 0 ? 'bg-green-500/10 border-green-500/30 text-green-400' : 'bg-rose-500/10 border-rose-500/30 text-rose-400'}`}> -
- - - {diffVal >= 0 - ? `ยอดรับเงินเพิ่มขึ้น ฿${diffVal.toFixed(2)} จากโครงสร้างธรรมเนียมใหม่` - : `ยอดเงินโอนเข้าบัญชีสุทธิจะต่างไป ฿${diffVal.toFixed(2)} (${diffVal >= 0 ? '+' : ''}${diffPct.toFixed(1)}%) เมื่อเทียบกับบิลจริงดั้งเดิม`} - -
- {diffVal >= 0 ? '+' : ''}฿{diffVal.toFixed(2)} -
-
) } diff --git a/apps/admin/src/pages/TiktokShopCasePage.tsx b/apps/admin/src/pages/TiktokShopCasePage.tsx new file mode 100644 index 0000000..179b462 --- /dev/null +++ b/apps/admin/src/pages/TiktokShopCasePage.tsx @@ -0,0 +1,542 @@ +import { useState, useEffect } from 'react' +import { + Calculator, + Info, + RefreshCw +} from 'lucide-react' + +function fmt(val: number) { + return '฿' + val.toLocaleString('th-TH', { minimumFractionDigits: 2, maximumFractionDigits: 2 }) +} + +export default function TiktokShopCasePage() { + const [resetKey, setResetKey] = useState(0) + const [selectedCase, setSelectedCase] = useState<'case1' | 'case2' | 'case3'>('case1') + + const [simBeforeDiscount, setSimBeforeDiscount] = useState(79.00) + const [discounts, setDiscounts] = useState>([ + { type: 'amount', value: 17.90 }, + { type: 'amount', value: 0 }, + { type: 'amount', value: 0 }, + ]) + const [simCost, setSimCost] = useState(30.00) + + const [simTransPct, setSimTransPct] = useState(3.21) + const [simCommPct, setSimCommPct] = useState(10.70) + const [simGrowthPct, setSimGrowthPct] = useState(7.50) + const [simAffiliatePct, setSimAffiliatePct] = useState(0) + + const caseData = { + case1: { + beforeDiscount: 79.00, + shopDiscount: -17.90, + baseAmt: 61.10, + origTrans: -1.96, + origComm: -6.54, + origGrowth: -4.58, + origAffiliate: 0, + origTotalFees: -13.08, + originalPayout: 48.02, + defaultCost: 30.00, + label: 'เคสที่ 1: บิลสินค้า ฿79 (สุทธิ ฿48.02)', + }, + case2: { + beforeDiscount: 190.00, + shopDiscount: -20.90, + baseAmt: 169.10, + origTrans: -5.43, + origComm: -18.09, + origGrowth: -12.67, + origAffiliate: 0, + origTotalFees: -36.19, + originalPayout: 132.91, + defaultCost: 80.00, + label: 'เคสที่ 2: บิลสินค้า ฿190 (สุทธิ ฿132.91)', + }, + case3: { + beforeDiscount: 190.00, + shopDiscount: -37.81, + baseAmt: 152.19, + origTrans: -4.89, + origComm: -16.28, + origGrowth: -11.40, + origAffiliate: -7.61, + origTotalFees: -40.18, + originalPayout: 112.01, + defaultCost: 70.00, + label: 'เคสที่ 3: บิลสินค้า ฿190 + Affiliate (สุทธิ ฿112.01)', + } + } + + const activeCase = caseData[selectedCase] + + useEffect(() => { + setSimBeforeDiscount(activeCase.beforeDiscount) + setDiscounts([ + { type: 'amount', value: Math.abs(activeCase.shopDiscount) }, + { type: 'amount', value: 0 }, + { type: 'amount', value: 0 }, + ]) + setSimCost(activeCase.defaultCost) + setSimTransPct(3.21) + setSimCommPct(10.70) + setSimGrowthPct(7.50) + setSimAffiliatePct(selectedCase === 'case3' ? 5.00 : 0) + }, [selectedCase]) + + // Simulated calculations + // Deduct discounts. Let's make it cumulative based on the original list price: + const simDiscountAmount = discounts.reduce((sum, d) => { + const amt = d.type === 'pct' ? simBeforeDiscount * (d.value / 100) : d.value + return sum + amt + }, 0) + const baseAmt = Math.max(0, simBeforeDiscount - simDiscountAmount) + + const simTransAmt = baseAmt * (simTransPct / 100) + const simCommAmt = baseAmt * (simCommPct / 100) + const simGrowthAmt = baseAmt * (simGrowthPct / 100) + const simAffiliateAmt = baseAmt * (simAffiliatePct / 100) + const simTotalAmt = simTransAmt + simCommAmt + simGrowthAmt + simAffiliateAmt + const simTotalPct = simTransPct + simCommPct + simGrowthPct + simAffiliatePct + const simPayout = baseAmt - simTotalAmt + + const originalPayout = activeCase.originalPayout + const diffVal = simPayout - originalPayout + const diffPct = originalPayout > 0 ? (diffVal / originalPayout) * 100 : 0 + + // Profit/Margin/ROI Calculations + const origProfit = originalPayout - simCost + const origProfitMargin = activeCase.baseAmt > 0 ? (origProfit / activeCase.baseAmt) * 100 : 0 + const origROI = simCost > 0 ? (origProfit / simCost) * 100 : 0 + + const simProfit = simPayout - simCost + const simProfitMargin = baseAmt > 0 ? (simProfit / baseAmt) * 100 : 0 + const simROI = simCost > 0 ? (simProfit / simCost) * 100 : 0 + + return ( +
+ {/* Page header */} +
+
+
+
+ +
+

TikTok Shop Case

+
+

+ ศึกษาโครงสร้างบิลรับเงินจริงจากระบบ TikTok Shop พร้อมทั้งจำลองคำนวณราคาขาย, คูปองส่วนลดร้านค้า, ต้นทุน และประเมินสถิติกำไร & ROI ก่อนขายจริง +

+
+ +
+ + {/* Real Payout Case Study Example */} +
+
+
+ +

กรณีศึกษา & เครื่องมือจำลองค่าธรรมเนียมจริง

+
+
+
+ + + +
+ +
+
+ +

+ รายละเอียดบิลจริงดั้งเดิมของ {selectedCase === 'case1' ? 'ตัวอย่างที่ 1' : selectedCase === 'case2' ? 'ตัวอย่างที่ 2' : 'ตัวอย่างที่ 3'}: +

+
+
+ ยอดรวมสินค้าก่อนลด + {fmt(activeCase.beforeDiscount)} +
+
+ ส่วนลดจากร้านค้า (ลดไป %) + + {fmt(activeCase.shopDiscount)} (-{((Math.abs(activeCase.shopDiscount) / activeCase.beforeDiscount) * 100).toFixed(1)}%) + +
+
+ ยอดรวมหลังหักส่วนลด (ฐานคิดค่าคอม) + {fmt(activeCase.baseAmt)} +
+
+ + {/* Simulator controls - Price & Discounts */} +

1. จำลองการตั้งราคา ส่วนลด และต้นทุนสินค้า (ปรับแต่งเองได้):

+
+
+
+ +
+ setSimBeforeDiscount(parseFloat(e.target.value) || 0)} + className="admin-input w-full text-xs" + /> + ฿ +
+
+
+ +
+ setSimCost(parseFloat(e.target.value) || 0)} + className="admin-input w-full text-xs" + /> + ฿ +
+
+ {[20, 45, 50].map(val => ( + + ))} +
+
+
+ +
+ +
+ {discounts.map((discount, index) => ( +
+ คูปองที่ #{index + 1} +
+
+ + +
+ { + const updated = [...discounts] + updated[index] = { ...updated[index], value: parseFloat(e.target.value) || 0 } + setDiscounts(updated) + }} + placeholder="0" + className="admin-input w-full text-xs p-1" + /> +
+
+ ))} +
+
+
+ + {/* Simulator controls - Fees */} +

2. จำลองการปรับเปลี่ยนอัตราค่าธรรมเนียม (%):

+
+
+ +
+ setSimTransPct(parseFloat(e.target.value) || 0)} + className="admin-input w-full text-xs" + /> + % +
+
+
+ +
+ setSimCommPct(parseFloat(e.target.value) || 0)} + className="admin-input w-full text-xs" + /> + % +
+
+
+ +
+ setSimGrowthPct(parseFloat(e.target.value) || 0)} + className="admin-input w-full text-xs" + /> + % +
+
+
+ +
+ setSimAffiliatePct(parseFloat(e.target.value) || 0)} + className="admin-input w-full text-xs" + /> + % +
+
+
+ + {/* Side-by-side comparison tables */} +
+ {/* ก่อนปรับ (ค่าธรรมเนียมจากบิลตัวอย่างจริง) */} +
+

+ ก่อนปรับ (บิลดั้งเดิม) + รวม {((Math.abs(activeCase.origTotalFees) / activeCase.baseAmt) * 100).toFixed(2)}% +

+
+
+ ยอดรวมสินค้าก่อนลด + {fmt(activeCase.beforeDiscount)} +
+
+ ส่วนลดจากร้านค้า + {fmt(activeCase.shopDiscount)} +
+
+ ยอดสินค้าสุทธิ (ฐานคิดคอม) + {fmt(activeCase.baseAmt)} +
+
+ - ค่าคำสั่งซื้อ (Transaction 3.21%) + {fmt(activeCase.origTrans)} +
+
+ - ค่าคอม TikTok Shop (10.70%) + {fmt(activeCase.origComm)} +
+
+ - ค่าสนับสนุนการเติบโต (7.50%) + {fmt(activeCase.origGrowth)} +
+ {activeCase.origAffiliate !== 0 && ( +
+ - ค่าคอมแอฟฟิลิเอต (5.00%) + {fmt(activeCase.origAffiliate)} +
+ )} +
+ รวมค่าธรรมเนียมโดนหัก + {fmt(activeCase.origTotalFees)} +
+
+ ยอดเงินโอนเข้าบัญชีสุทธิ + {fmt(activeCase.originalPayout)} +
+
+ - ต้นทุนสินค้า (Cost) + ฿-{simCost.toFixed(2)} +
+
+ กำไรสุทธิ (Net Profit) + = 0 ? 'text-green-400' : 'text-rose-400'}`}> + {origProfit >= 0 ? '' : '-'}฿{Math.abs(origProfit).toFixed(2)} + +
+
+ กำไรต่อยอดขาย (Margin %) + = 0 ? 'text-green-400' : 'text-rose-400'}`}> + {origProfitMargin.toFixed(1)}% + +
+
+ กำไรต่อทุน (ROI %) + = 0 ? 'text-green-400' : 'text-rose-400'}`}> + {origROI.toFixed(1)}% + +
+
+
+ + {/* หลังปรับ (จำลองการปรับค่าธรรมเนียม) */} +
+

+ หลังปรับ (ผลการจำลองใหม่) + รวม {simTotalPct.toFixed(2)}% +

+
+
+ ยอดรวมสินค้าก่อนลด + {fmt(simBeforeDiscount)} +
+
+ ส่วนลดจากร้านค้า (รวม) + + -{fmt(simDiscountAmount)} + +
+ {discounts.map((d, i) => d.value > 0 ? ( +
+ - คูปอง #{i + 1} ({d.type === 'pct' ? `${d.value}%` : `฿${d.value}`}) + + -{fmt(d.type === 'pct' ? simBeforeDiscount * (d.value / 100) : d.value)} + +
+ ) : null)} +
+ ยอดสินค้าสุทธิ (ฐานคิดคอม) + {fmt(baseAmt)} +
+
+ - ค่าคำสั่งซื้อ ({simTransPct.toFixed(2)}%) + ฿-{simTransAmt.toFixed(2)} +
+
+ - ค่าคอม TikTok Shop ({simCommPct.toFixed(2)}%) + ฿-{simCommAmt.toFixed(2)} +
+
+ - ค่าสนับสนุนการเติบโต ({simGrowthPct.toFixed(2)}%) + ฿-{simGrowthAmt.toFixed(2)} +
+ {simAffiliatePct > 0 && ( +
+ - ค่าคอมคอมแอฟฟิลิเอต ({simAffiliatePct.toFixed(2)}%) + ฿-{simAffiliateAmt.toFixed(2)} +
+ )} +
+ รวมค่าธรรมเนียมโดนหัก + ฿-{simTotalAmt.toFixed(2)} +
+
+ ยอดเงินโอนเข้าบัญชีสุทธิ + ฿{simPayout.toFixed(2)} +
+
+ - ต้นทุนสินค้า (Cost) + ฿-{simCost.toFixed(2)} +
+
+ กำไรสุทธิ (Net Profit) + = 0 ? 'text-green-400' : 'text-rose-400'}`}> + {simProfit >= 0 ? '' : '-'}฿{Math.abs(simProfit).toFixed(2)} + +
+
+ กำไรต่อยอดขาย (Margin %) + = 0 ? 'text-green-400' : 'text-rose-400'}`}> + {simProfitMargin.toFixed(1)}% + +
+
+ กำไรต่อทุน (ROI %) + = 0 ? 'text-green-400' : 'text-rose-400'}`}> + {simROI.toFixed(1)}% + +
+
+
+
+ + {/* Difference comparison status card */} +
= 0 ? 'bg-green-500/10 border-green-500/30 text-green-400' : 'bg-rose-500/10 border-rose-500/30 text-rose-400'}`}> +
+ + + {diffVal >= 0 + ? `ยอดรับเงินเพิ่มขึ้น ฿${diffVal.toFixed(2)} จากโครงสร้างธรรมเนียมใหม่` + : `ยอดเงินโอนเข้าบัญชีสุทธิจะต่างไป ฿${diffVal.toFixed(2)} (${diffVal >= 0 ? '+' : ''}${diffPct.toFixed(1)}%) เมื่อเทียบกับบิลจริงดั้งเดิม`} + +
+ {diffVal >= 0 ? '+' : ''}฿{diffVal.toFixed(2)} +
+
+
+ ) +}