[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_26":27,"_28":29,"_30":12,"_31":12,"_32":12,"_33":29,"_34":12,"_35":12,"_36":12,"_37":12,"_38":-5,"_39":40},"routes/canvas.shared.$sharedTextdocId",{"_9":10,"_11":12},"sharedTextdoc",{"_13":14,"_15":-7,"_16":17,"_18":19,"_20":21,"_22":23,"_24":12,"_25":12},"isAuthenticated",false,"sharedTextdocId","68b534bda00081918c87584341894459","versionInt","title","TikTok Commission Calculation","type","code/react","content","import React, { useMemo, useState, useEffect } from \"react\";\nimport { motion } from \"framer-motion\";\nimport { PieChart, Pie, Cell, Tooltip, Legend, ResponsiveContainer } from \"recharts\";\n\nconst fmt = (n: number) => (isFinite(n) ? n.toLocaleString(undefined, { maximumFractionDigits: 2 }) : \"\");\n\n// Rates ตาม TikTok Shop Thailand\nconst TRANSACTION_FEE_RATE = 3.21; // %\nconst PLATFORM_INFRA_FEE = 1.07; // THB fixed\n\nconst Field = ({ label, suffix, value, onChange, highlight }: any) => (\n \n {label}\n

\n onChange(parseFloat(e.target.value || \"0\"))}\n className=\"w-full px-4 py-2 outline-none appearance-none\"\n />\n {suffix && {suffix}}\n

\n \n);\n\nconst Select = ({ label, value, onChange, options }: any) => (\n \n {label}\n onChange(e.target.value)}\n className=\"w-full px-3 py-2 border border-purple-200 rounded-2xl bg-white text-purple-700\"\n >\n {options.map((opt: any) => (\n \n ))}\n \n \n);\n\nconst Card: React.FC<{ title: string; children: React.ReactNode }> = ({ title, children }) => (\n

{title}

\n {children}\n

\n);\n\nconst COLORS = [\"#8b5cf6\", \"#a78bfa\", \"#c4b5fd\", \"#ddd6fe\"];\n\nexport default function App() {\n const [productPrice, setProductPrice] = useState(\"\");\n const [costLabor, setCostLabor] = useState(\"\");\n const [costPackaging, setCostPackaging] = useState(\"\");\n const [costProduction, setCostProduction] = useState(\"\");\n const [costAds, setCostAds] = useState(\"\");\n const [costAffiliate, setCostAffiliate] = useState(\"\");\n const [affiliateMode, setAffiliateMode] = useState(\"THB\"); // \"THB\" or \"%\"\n const [isElectronic, setIsElectronic] = useState(false);\n\n // responsive outerRadius\n const [isMobile, setIsMobile] = useState(false);\n useEffect(() => {\n const onResize = () => setIsMobile(window.innerWidth < 640);\n onResize();\n window.addEventListener(\"resize\", onResize);\n return () => window.removeEventListener(\"resize\", onResize);\n }, []);\n const pieOuterRadius = isMobile ? 80 : 110;\n\n const computed = useMemo(() => {\n const gross = Number(productPrice) || 0;\n const commissionRate = isElectronic ? 5.35 : 6.42;\n const commerceGrowthRate = isElectronic ? 5.35 : 6.42;\n const commission = gross * (commissionRate / 100);\n const transactionFee = gross * (TRANSACTION_FEE_RATE / 100);\n const infraFee = PLATFORM_INFRA_FEE;\n const commerceGrowthFeeRaw = gross * (commerceGrowthRate / 100);\n const commerceGrowthFee = Math.min(commerceGrowthFeeRaw, 199);\n const totalDeductions = commission + transactionFee + infraFee + commerceGrowthFee;\n const net = gross - totalDeductions;\n\n const affiliateCost =\n affiliateMode === \"%\"\n ? gross * ((Number(costAffiliate) || 0) / 100)\n : Number(costAffiliate) || 0;\n\n const totalOtherCosts =\n (Number(costLabor) || 0) +\n (Number(costPackaging) || 0) +\n (Number(costProduction) || 0) +\n (Number(costAds) || 0) +\n affiliateCost;\n\n const totalCosts = totalOtherCosts + totalDeductions;\n const profit = gross - totalCosts;\n\n // ROI ปัจจุบัน = ราคาขาย ÷ ค่าโฆษณา\n const roi = Number(costAds) ? gross / (Number(costAds) || 1) : 0;\n\n // ROI ขั้นต่ำที่ควรตั้ง (Break-even ROI) = ต้นทุนทั้งหมด ÷ ค่าโฆษณา\n const roiTarget = Number(costAds) ? totalCosts / (Number(costAds) || 1) : 0;\n\n return { gross, commission, commissionRate, transactionFee, infraFee, commerceGrowthFee, commerceGrowthRate, totalDeductions, net, totalOtherCosts, totalCosts, profit, affiliateCost, roi, roiTarget };\n }, [productPrice, costLabor, costPackaging, costProduction, costAds, costAffiliate, affiliateMode, isElectronic]);\n\n const rows = [\n [\"Product Price (ราคาสินค้า)\", fmt(Number(productPrice) || 0), \"THB\", \"section\"],\n [\"Commission Fee (ค่าคอมมิชชัน)\", fmt(computed.commission), `คิดจาก ${fmt(computed.gross)} × ${computed.commissionRate}%`, \"fees\"],\n [\"Transaction Fee (ค่าธรรมเนียมการทำธุรกรรม)\", fmt(computed.transactionFee), `คิด 3.21% จากเงินที่ลูกค้าจ่ายจริง`, \"fees\"],\n [\"Platform Infrastructure Fee (ค่าธรรมเนียมโครงสร้างพื้นฐานแพลตฟอร์ม)\", fmt(computed.infraFee), \"หากร้านมีออเดอร์ไม่ถึง 100 ใน 30 วัน จะไม่โดนคิดในเดือนถัดไป\", \"fees\"],\n [\"Commerce Growth Fee (ค่าธรรมเนียมสนับสนุนการเติบโตของร้านค้า)\", fmt(computed.commerceGrowthFee), `คิดจาก ${fmt(computed.gross)} × ${computed.commerceGrowthRate}% (สูงสุด 199 บาท/Item)`, \"fees\"],\n [\"รวมค่าธรรมเนียมทั้งหมด (Total Fees)\", fmt(computed.totalDeductions), \"THB\", \"fees\"],\n [\"Net Payout (ยอดสุทธิหลังหักค่าธรรมเนียม)\", fmt(computed.net), \"THB\", \"section\"],\n [\"— ต้นทุน (Costs) —\", \"\", \"\", \"divider\"],\n [\"ต้นทุนแฝงอื่นๆ - ค่าแรง (Labor)\", fmt(Number(costLabor) || 0), \"THB\", \"costs\"],\n [\"ค่าแพ็คเกจ (Packaging)\", fmt(Number(costPackaging) || 0), \"THB\", \"costs\"],\n [\"การผลิต (Production)\", fmt(Number(costProduction) || 0), \"THB\", \"costs\"],\n [\"โฆษณา (Ads)\", fmt(Number(costAds) || 0), \"THB\", \"costs\"],\n [\"ค่า Affiliate (Affiliate)\", fmt(computed.affiliateCost), affiliateMode === \"%\" ? `จากราคาสินค้า ${fmt(computed.gross)} × ${costAffiliate || 0}%` : \"THB\", \"costs\"],\n [\"รวมต้นทุนสินค้า (Total Product Costs)\", fmt(computed.totalOtherCosts), \"THB\", \"costs\"],\n [\"รวมต้นทุนทั้งหมด (All Costs)\", fmt(computed.totalCosts), \"ต้นทุนสินค้า + ค่าธรรมเนียม TikTok\", \"section\"],\n [\"กำไรสุทธิ (Final Profit)\", fmt(computed.profit), \"THB\", \"section\"],\n ];\n\n const pieData = [\n { name: \"Labor (ค่าแรง)\", value: Number(costLabor) || 0 },\n { name: \"Packaging (แพ็คเกจ)\", value: Number(costPackaging) || 0 },\n { name: \"Production (การผลิต)\", value: Number(costProduction) || 0 },\n { name: \"Ads (โฆษณา)\", value: Number(costAds) || 0 },\n { name: \"Affiliate (ค่า Affiliate)\", value: computed.affiliateCost },\n { name: \"Platform Fees (ค่าธรรมเนียมแพลตฟอร์ม)\", value: computed.totalDeductions },\n ];\n\n return (\n

\n \n ตารางคำนวนต้นทุนสินค้า TikTok Shop\n \n

\n *การคำนวนนี้เป็นการคำนวนเบื้องต้น ไม่รวมส่วนลด ค่าจัดส่ง คูปอง สามารถนำไปใช้เป็นแนวทางตั้งต้นได้\n

\n\n \n

\n \n \n \n \n \n

\n \n \n

\n \n setIsElectronic(e.target.checked)}\n className=\"h-4 w-4\"\n />\n สินค้า Electronic (Commission & Commerce Growth Fee ใช้เรท 5.35%)\n \n

\n \n\n \n

\n \n \n \n \n \n \n \n \n \n {rows.map((r, i) => (\n \n \n \n \n \n ))}\n \n

ค่าธรรมเนียม TikTok	Amount	Detail
{r[0]}	{r[1]}	{r[2]}

\n\n

\n ROI ปัจจุบัน = ราคาขาย ÷ ค่าโฆษณา = {Number(costAds) ? fmt(computed.roi) : \"-\"}\n
\n ROI ขั้นต่ำที่ควรตั้ง (Break-even) = ต้นทุนทั้งหมด ÷ ค่าโฆษณา = {Number(costAds) ? fmt(computed.roiTarget) : \"-\"}\n

\n\n

\n \n \n `${name}: ${fmt(value)} THB`}\n >\n {pieData.map((entry, index) => (\n \n ))}\n \n [`${fmt(value)} THB`, name]} />\n \n \n \n

\n \n

\n );\n}\n","access","public","isModerationBlocked","isAnonifyApiKeyDetected","dd",{"_41":42,"_43":44},"disablePrefetch",true,"shouldPrefetchAccount","shouldPrefetchUser","shouldPrefetchSystemHints","manageRootRouteStylesheet","mobileWebHandoffEnabled","promoteCss","disableSSR","stripModulepreloadImports","paidCampaignAppRedirect","statsigGateEvaluationsPromise",["P",40],"traceId","11038251068705749789","traceTime",1791958641690]