import React, { useState, useEffect } from 'react'; import { LineChart, Line, BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer, ReferenceLine, ReferenceDot, Cell, PieChart, Pie } from 'recharts'; import { Calculator, TrendingUp, AlertTriangle, DollarSign, Info, Plus, Trash2, Target, Calendar, Edit, Save, X, Settings, Wallet, CreditCard, Truck, Percent } from 'lucide-react'; const BepCalculator = () => { // --- STATE: SETTINGS & PLAN --- const [activeTab, setActiveTab] = useState('plan'); // 'plan' or 'track' // Базовые параметры const [fixedCosts, setFixedCosts] = useState(145000000); const [avgCheckBase, setAvgCheckBase] = useState(120000); // Юнит-экономика (ПРОЦЕНТЫ) const [foodCostPct, setFoodCostPct] = useState(46); const [royaltyPct, setRoyaltyPct] = useState(3); const [marketingPct, setMarketingPct] = useState(5); // КАНАЛЫ ПРОДАЖ (Агрегаторы и Эквайринг) const [channels, setChannels] = useState([ { id: 'cash', name: 'Наличные', percent: 0, type: 'payment', active: true }, { id: 'terminal', name: 'Терминал (Humo/Uzcard)', percent: 1, type: 'payment', active: true }, { id: 'click', name: 'Payme / Click', percent: 2, type: 'payment', active: true }, { id: 'yandex', name: 'Yandex Eats', percent: 22, type: 'aggregator', active: true }, { id: 'uzum', name: 'Uzum Tezkor', percent: 20, type: 'aggregator', active: true }, { id: 'wolt', name: 'Wolt', percent: 25, type: 'aggregator', active: true }, ]); // Параметры Акции (Скидка) const [discount, setDiscount] = useState(0); // --- STATE: TRACKING (FACT) --- const [daysInMonth, setDaysInMonth] = useState(30); // Статистика (пример данных) const [dailyStats, setDailyStats] = useState([ { day: 1, orders: 35, revenue: 3850000, marketing: 192500, commissions: 150000, breakdown: { cash: 1000000, yandex: 2850000 } }, ]); // INPUT STATE const [newDayOrders, setNewDayOrders] = useState(''); const [newDayMarketing, setNewDayMarketing] = useState(''); const [autoMarketing, setAutoMarketing] = useState(true); // State для ввода выручки по каналам const [channelInputs, setChannelInputs] = useState({}); // State for Editing const [editingIndex, setEditingIndex] = useState(null); // --- CALCULATIONS --- const [planData, setPlanData] = useState(null); const [chartData, setChartData] = useState([]); const [factData, setFactData] = useState(null); // Helper: Sum current revenue from breakdown inputs const currentTotalRevenue = Object.values(channelInputs).reduce((sum, val) => sum + (Number(val) || 0), 0); // Helper: Calculate total commissions based on breakdown inputs and rates const currentTotalCommissions = channels.reduce((sum, ch) => { const val = Number(channelInputs[ch.id]) || 0; return sum + (val * (ch.percent / 100)); }, 0); // EFFECT: Auto-calculate Marketing based on Total Revenue input useEffect(() => { if (autoMarketing) { const calculatedMarketing = Math.round(currentTotalRevenue * (marketingPct / 100)); setNewDayMarketing(calculatedMarketing); } }, [currentTotalRevenue, autoMarketing, marketingPct]); useEffect(() => { calculatePlan(); }, [fixedCosts, avgCheckBase, foodCostPct, royaltyPct, marketingPct, discount, channels]); useEffect(() => { if (planData) { calculateFact(); } }, [dailyStats, planData, fixedCosts]); // --- LOGIC: UPDATE CHANNEL SETTINGS --- const updateChannel = (id, field, value) => { setChannels(channels.map(ch => ch.id === id ? { ...ch, [field]: value } : ch)); }; // 1. РАСЧЕТ ПЛАНА (ТЕОРИЯ) const calculatePlan = () => { const effectivePrice = avgCheckBase * (1 - discount / 100); // Юнит-экономика const foodCostMoney = avgCheckBase * (foodCostPct / 100); const royaltyMoney = effectivePrice * (royaltyPct / 100); const marketingMoney = effectivePrice * (marketingPct / 100); // Эквайринг/Комиссии (ДЛЯ ПЛАНА берем усредненно 10%, или можно усложнить) const avgCommPct = 10; const commissionMoney = effectivePrice * (avgCommPct / 100); const totalVariableCost = foodCostMoney + royaltyMoney + marketingMoney + commissionMoney; const marginPerUnit = effectivePrice - totalVariableCost; const totalFixedCosts = fixedCosts; let bepOrders = Infinity; let bepRevenue = Infinity; if (marginPerUnit > 0) { bepOrders = Math.ceil(totalFixedCosts / marginPerUnit); bepRevenue = bepOrders * effectivePrice; } // Chart Data const data = []; const maxOrders = bepOrders === Infinity ? 4000 : Math.max(bepOrders * 1.5, 1500); const step = maxOrders / 20; for (let i = 0; i <= maxOrders; i += step) { const orders = Math.round(i); const revenue = orders * effectivePrice; const totalCosts = totalFixedCosts + (orders * totalVariableCost); data.push({ orders: orders, revenue: revenue, totalCosts: totalCosts, profit: revenue - totalCosts, }); } setPlanData({ effectivePrice, foodCostMoney, royaltyMoney, marketingMoney, commissionMoney, marginPerUnit, bepOrders, bepRevenue, totalFixedCosts, marginPercent: effectivePrice > 0 ? (marginPerUnit / effectivePrice) * 100 : 0 }); setChartData(data); }; // 2. РАСЧЕТ ФАКТА const calculateFact = () => { if (!planData) return; const totalRevenue = dailyStats.reduce((sum, d) => sum + d.revenue, 0); const totalOrders = dailyStats.reduce((sum, d) => sum + d.orders, 0); const totalMarketingFact = dailyStats.reduce((sum, d) => sum + d.marketing, 0); const totalCommissionsFact = dailyStats.reduce((sum, d) => sum + (d.commissions || 0), 0); const daysPassed = dailyStats.length; const fixedCostsToDate = (fixedCosts / daysInMonth) * daysPassed; const foodCostPerOne = avgCheckBase * (foodCostPct / 100); const totalFoodCost = totalOrders * foodCostPerOne; const totalRoyalty = totalRevenue * (royaltyPct / 100); const totalCostsToDate = fixedCostsToDate + totalMarketingFact + totalCommissionsFact + totalFoodCost + totalRoyalty; const currentProfit = totalRevenue - totalCostsToDate; // ПРОГНОЗ let projectedProfit = 0; if (daysPassed > 0) { const avgDailyRev = totalRevenue / daysPassed; const avgDailyOrders = totalOrders / daysPassed; const avgDailyMarketing = totalMarketingFact / daysPassed; const avgDailyComm = totalCommissionsFact / daysPassed; const projectedRevenue = avgDailyRev * daysInMonth; const projectedCosts = fixedCosts + (avgDailyMarketing * daysInMonth) + (avgDailyComm * daysInMonth) + (avgDailyOrders * daysInMonth * foodCostPerOne) + (projectedRevenue * (royaltyPct/100)); projectedProfit = projectedRevenue - projectedCosts; } setFactData({ totalRevenue, totalOrders, totalMarketingFact, totalCommissionsFact, currentProfit, projectedProfit, marketingShare: totalRevenue > 0 ? (totalMarketingFact / totalRevenue) * 100 : 0, commissionShare: totalRevenue > 0 ? (totalCommissionsFact / totalRevenue) * 100 : 0, }); }; // --- HANDLERS --- const saveEntry = () => { if (!newDayOrders || currentTotalRevenue === 0) return; const entry = { day: editingIndex !== null ? dailyStats[editingIndex].day : dailyStats.length + 1, orders: Number(newDayOrders), revenue: currentTotalRevenue, marketing: Number(newDayMarketing) || 0, commissions: currentTotalCommissions, breakdown: { ...channelInputs } }; if (editingIndex !== null) { const updatedStats = [...dailyStats]; updatedStats[editingIndex] = entry; setDailyStats(updatedStats); setEditingIndex(null); } else { setDailyStats([...dailyStats, entry]); } setNewDayOrders(''); setNewDayMarketing(''); setChannelInputs({}); }; const startEdit = (index) => { const entry = dailyStats[index]; setNewDayOrders(entry.orders); setNewDayMarketing(entry.marketing); setChannelInputs(entry.breakdown || {}); setEditingIndex(index); }; const cancelEdit = () => { setNewDayOrders(''); setNewDayMarketing(''); setChannelInputs({}); setEditingIndex(null); }; const removeEntry = (index) => { if (editingIndex === index) cancelEdit(); const newStats = dailyStats.filter((_, i) => i !== index); const reindexed = newStats.map((stat, i) => ({ ...stat, day: i + 1 })); setDailyStats(reindexed); }; const formatMoney = (val) => { if (val === undefined || val === null) return "0"; return new Intl.NumberFormat('ru-RU', { style: 'currency', currency: 'UZS', maximumFractionDigits: 0 }).format(val); }; const formatNumber = (val) => new Intl.NumberFormat('ru-RU').format(val); return ( ); }; export default BepCalculator;