← back to Watches
src/components/affiliate/OmegaCommissionCalc.jsx
221 lines
/**
* OMEGA Commission Calculator
* Calculate earnings from affiliate sales and arbitrage plays
*/
import React, { useState } from 'react';
const dealerPresets = [
{ name: 'WatchBox', rate: 5, min: 3, max: 6 },
{ name: 'Chrono24', rate: 4, min: 3, max: 5 },
{ name: 'Jomashop', rate: 8, min: 4, max: 12 },
{ name: 'Luxury Bazaar', rate: 7.5, min: 5, max: 10 },
{ name: 'Bob\'s Watches', rate: 6, min: 4, max: 8 },
{ name: 'Custom', rate: 5, min: 0, max: 100 }
];
export default function OmegaCommissionCalc() {
const [salePrice, setSalePrice] = useState(5000);
const [selectedDealer, setSelectedDealer] = useState(dealerPresets[0]);
const [customRate, setCustomRate] = useState(5);
const [costBasis, setCostBasis] = useState(0);
const [showArbitrage, setShowArbitrage] = useState(false);
const commissionRate = selectedDealer.name === 'Custom' ? customRate : selectedDealer.rate;
const commission = (salePrice * commissionRate) / 100;
const netAfterCommission = salePrice - commission;
const arbitrageProfit = salePrice - costBasis - commission;
const arbitrageMargin = costBasis > 0 ? ((arbitrageProfit / costBasis) * 100) : 0;
return (
<div className="max-w-2xl mx-auto p-6 bg-gradient-to-br from-slate-900 to-slate-800 rounded-xl shadow-2xl border border-slate-700">
<div className="mb-6">
<h2 className="text-2xl font-bold text-amber-400 mb-2">
💰 OMEGA Commission Calculator
</h2>
<p className="text-slate-400 text-sm">
Calculate affiliate earnings and arbitrage profits
</p>
</div>
{/* Mode Toggle */}
<div className="mb-6 flex gap-2">
<button
onClick={() => setShowArbitrage(false)}
className={`flex-1 py-2 px-4 rounded-lg font-semibold transition ${
!showArbitrage
? 'bg-amber-500 text-black'
: 'bg-slate-700 text-slate-300 hover:bg-slate-600'
}`}
>
Affiliate Commission
</button>
<button
onClick={() => setShowArbitrage(true)}
className={`flex-1 py-2 px-4 rounded-lg font-semibold transition ${
showArbitrage
? 'bg-amber-500 text-black'
: 'bg-slate-700 text-slate-300 hover:bg-slate-600'
}`}
>
Arbitrage Profit
</button>
</div>
<div className="space-y-4">
{/* Dealer Selection */}
<div>
<label className="block text-sm font-semibold text-slate-300 mb-2">
Dealer / Platform
</label>
<select
value={selectedDealer.name}
onChange={(e) => setSelectedDealer(dealerPresets.find(d => d.name === e.target.value))}
className="w-full bg-slate-700 text-white p-3 rounded-lg border border-slate-600 focus:border-amber-500 focus:outline-none"
>
{dealerPresets.map(dealer => (
<option key={dealer.name} value={dealer.name}>
{dealer.name} ({dealer.min}-{dealer.max}%)
</option>
))}
</select>
</div>
{/* Custom Rate (if Custom selected) */}
{selectedDealer.name === 'Custom' && (
<div>
<label className="block text-sm font-semibold text-slate-300 mb-2">
Custom Commission Rate (%)
</label>
<input
type="number"
value={customRate}
onChange={(e) => setCustomRate(parseFloat(e.target.value) || 0)}
min="0"
max="100"
step="0.5"
className="w-full bg-slate-700 text-white p-3 rounded-lg border border-slate-600 focus:border-amber-500 focus:outline-none"
/>
</div>
)}
{/* Sale Price */}
<div>
<label className="block text-sm font-semibold text-slate-300 mb-2">
Sale Price (USD)
</label>
<div className="relative">
<span className="absolute left-3 top-3 text-slate-400">$</span>
<input
type="number"
value={salePrice}
onChange={(e) => setSalePrice(parseFloat(e.target.value) || 0)}
min="0"
step="100"
className="w-full bg-slate-700 text-white p-3 pl-8 rounded-lg border border-slate-600 focus:border-amber-500 focus:outline-none"
placeholder="5000"
/>
</div>
</div>
{/* Cost Basis (Arbitrage Mode) */}
{showArbitrage && (
<div>
<label className="block text-sm font-semibold text-slate-300 mb-2">
Cost Basis (What you paid)
</label>
<div className="relative">
<span className="absolute left-3 top-3 text-slate-400">$</span>
<input
type="number"
value={costBasis}
onChange={(e) => setCostBasis(parseFloat(e.target.value) || 0)}
min="0"
step="100"
className="w-full bg-slate-700 text-white p-3 pl-8 rounded-lg border border-slate-600 focus:border-amber-500 focus:outline-none"
placeholder="3900"
/>
</div>
<p className="text-xs text-slate-400 mt-1">
Example: Japan purchase price + shipping + fees
</p>
</div>
)}
</div>
{/* Results */}
<div className="mt-6 p-5 bg-slate-800 rounded-lg border border-slate-600 space-y-3">
<h3 className="text-lg font-bold text-white mb-3">
{showArbitrage ? 'Arbitrage Analysis' : 'Commission Breakdown'}
</h3>
<div className="space-y-2 text-sm">
<div className="flex justify-between items-center">
<span className="text-slate-400">Sale Price:</span>
<span className="text-white font-bold text-lg">
${salePrice.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
</span>
</div>
{showArbitrage && (
<div className="flex justify-between items-center">
<span className="text-slate-400">Cost Basis:</span>
<span className="text-red-400 font-semibold">
-${costBasis.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
</span>
</div>
)}
<div className="flex justify-between items-center">
<span className="text-slate-400">Commission ({commissionRate}%):</span>
<span className="text-amber-400 font-semibold">
${commission.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
</span>
</div>
<div className="border-t border-slate-700 pt-2 mt-2">
{showArbitrage ? (
<>
<div className="flex justify-between items-center">
<span className="text-slate-300 font-bold">Net Profit:</span>
<span className={`font-bold text-xl ${arbitrageProfit >= 0 ? 'text-green-400' : 'text-red-400'}`}>
${arbitrageProfit.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
</span>
</div>
{costBasis > 0 && (
<div className="flex justify-between items-center mt-1">
<span className="text-slate-400 text-xs">Profit Margin:</span>
<span className={`text-xs font-semibold ${arbitrageMargin >= 20 ? 'text-green-400' : 'text-yellow-400'}`}>
{arbitrageMargin.toFixed(1)}%
</span>
</div>
)}
</>
) : (
<div className="flex justify-between items-center">
<span className="text-slate-300 font-bold">Your Earnings:</span>
<span className="text-green-400 font-bold text-xl">
${commission.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
</span>
</div>
)}
</div>
</div>
</div>
{/* Quick Examples */}
<div className="mt-4 grid grid-cols-3 gap-2">
{[2500, 5000, 10000].map(price => (
<button
key={price}
onClick={() => setSalePrice(price)}
className="py-2 px-3 bg-slate-700 hover:bg-slate-600 text-slate-300 text-xs rounded-lg transition"
>
${(price/1000)}K
</button>
))}
</div>
</div>
);
}