// rev-parts.jsx — Revenue tab section components const { HelpIcon } = window.OV2_UI; const REV_T = { ru: { sec1: 'Snapshot', sec1sub: '10 главных метрик за 30 дней', sec2: 'Структура выручки', sec2sub: 'Откуда приходят деньги', sec3: 'Расходы', sec3sub: 'Куда уходят деньги — P&L по группам', sec4: 'Прибыльность', sec4sub: 'GOP × Загрузка по 5 домикам', sec5: 'Прогноз и What-if', sec5sub: 'Сценарии на 4 недели вперёд', snap: { gross: 'Валовая выручка', net: 'Чистая выручка', cogs: 'COGS', grossPr: 'Валовая прибыль', opex: 'OPEX', ebitda: 'EBITDA', ebMargin: 'EBITDA маржа', tax: 'Налоги', net2: 'Чистая прибыль', cash: 'Cash on hand', }, mixWeeks: 'Динамика по неделям', mixDonut: 'Доли', sources: 'Источники выручки', th: { source: 'Источник', rev: 'Выручка', share: 'Доля', mom: 'Δ MoM' }, plTitle: 'P&L по группам расходов', plDonut: 'Структура расходов', plTotal: 'Итого расходов', cabinAxisX: 'Загрузка →', cabinAxisY: 'GOP маржа ↑', qHigh: 'Топ', qLow: 'Слабые', qOcc: 'Загружены, но мало маржи', qMargin: 'Высокая маржа, но мало гостей', fcTitle: 'Прогноз выручки', fcSub: 'Факт + сценарии Low / Base / High', fcLegend: { actual: 'Факт', base: 'Базовый', low: 'Low', high: 'High' }, whatif: 'What-if калькулятор', whatifBeta: 'beta', wPrice: 'Цена за ночь', wOcc: 'Загрузка', wADR: 'Доп. услуги на гостя', wResult: 'Результат на месяц', wRev: 'Выручка', wOpex: 'OPEX (фикс)', wGop: 'GOP', wMargin: 'Маржа', src: { 'Размещение (5 домиков)': 'Размещение (5 домиков)', 'СПА и процедуры': 'СПА и процедуры', 'Завтраки и кейтеринг': 'Завтраки и кейтеринг', 'Сувениры и доп. услуги': 'Сувениры и доп. услуги', 'Аренда залов и события': 'Аренда залов и события', }, pl: { 'Персонал': 'Персонал', 'Продукты и F&B': 'Продукты и F&B', 'Коммуналка': 'Коммуналка', 'Маркетинг': 'Маркетинг', 'Содержание объекта': 'Содержание объекта', 'Админ. и сервисы': 'Админ. и сервисы', }, }, en: { sec1: 'Snapshot', sec1sub: '10 key metrics for the last 30 days', sec2: 'Revenue mix', sec2sub: 'Where the money comes from', sec3: 'Expenses', sec3sub: 'Where the money goes — P&L by group', sec4: 'Profitability', sec4sub: 'GOP × Occupancy across 5 cabins', sec5: 'Forecast & What-if', sec5sub: 'Scenarios for the next 4 weeks', snap: { gross: 'Gross revenue', net: 'Net revenue', cogs: 'COGS', grossPr: 'Gross profit', opex: 'OPEX', ebitda: 'EBITDA', ebMargin: 'EBITDA margin', tax: 'Tax', net2: 'Net profit', cash: 'Cash on hand', }, mixWeeks: 'Weekly trend', mixDonut: 'Shares', sources: 'Revenue sources', th: { source: 'Source', rev: 'Revenue', share: 'Share', mom: 'Δ MoM' }, plTitle: 'P&L by expense group', plDonut: 'Expense breakdown', plTotal: 'Total expenses', cabinAxisX: 'Occupancy →', cabinAxisY: 'GOP margin ↑', qHigh: 'Stars', qLow: 'Weak', qOcc: 'Full but low margin', qMargin: 'High margin, low occupancy', fcTitle: 'Revenue forecast', fcSub: 'Actual + Low / Base / High scenarios', fcLegend: { actual: 'Actual', base: 'Base', low: 'Low', high: 'High' }, whatif: 'What-if calculator', whatifBeta: 'beta', wPrice: 'Nightly price', wOcc: 'Occupancy', wADR: 'Add-ons per guest', wResult: 'Result for the month', wRev: 'Revenue', wOpex: 'OPEX (fixed)', wGop: 'GOP', wMargin: 'Margin', src: { 'Размещение (5 домиков)': 'Lodging (5 cabins)', 'СПА и процедуры': 'Spa & treatments', 'Завтраки и кейтеринг': 'Breakfast & catering', 'Сувениры и доп. услуги': 'Add-ons & retail', 'Аренда залов и события': 'Events & venue rent', }, pl: { 'Персонал': 'Staff', 'Продукты и F&B': 'F&B supplies', 'Коммуналка': 'Utilities', 'Маркетинг': 'Marketing', 'Содержание объекта': 'Property maintenance', 'Админ. и сервисы': 'Admin & services', }, }, }; // ---------- Section 1: Snapshot strip (10 cards, EBITDA featured) ---------- function RevSnapshot({ state, lang }) { const t = REV_T[lang]; const data = REV.snapshot[state] || REV.snapshot.default; const help = REV_HELP[lang]; const ord = ['gross', 'net', 'cogs', 'grossPr', 'opex', 'ebitda', 'ebMargin', 'tax', 'net2', 'cash']; return (
{t.sec1}
{t.sec1sub}
{ord.map((k) => { const d = data[k]; const featured = k === 'ebitda'; return (
{t.snap[k]}
{d.value}
{d.delta}
); })}
); } // ---------- Section 2: Revenue mix ---------- function StackedAreaChart({ data, width = 520, height = 200 }) { const { weeks, lodging, spa, fnb, other } = data; const totals = weeks.map((_, i) => lodging[i] + spa[i] + fnb[i] + other[i]); const max = Math.max(...totals); const w = width, h = height, pad = { l: 32, r: 8, t: 8, b: 22 }; const cw = w - pad.l - pad.r; const ch = h - pad.t - pad.b; const xs = (i) => pad.l + (i / (weeks.length - 1)) * cw; const ys = (v) => pad.t + ch - (v / max) * ch; const layers = [ { key: 'lodging', vals: lodging, color: 'var(--chart-1)' }, { key: 'spa', vals: spa, color: 'var(--chart-2)' }, { key: 'fnb', vals: fnb, color: 'var(--chart-3)' }, { key: 'other', vals: other, color: 'var(--chart-4)' }, ]; const stacks = []; let acc = weeks.map(() => 0); layers.forEach(L => { const top = acc.map((a, i) => a + L.vals[i]); const path = [ ...top.map((v, i) => `${i === 0 ? 'M' : 'L'}${xs(i)},${ys(v)}`), ...acc.slice().reverse().map((v, i) => `L${xs(weeks.length - 1 - i)},${ys(v)}`), 'Z', ].join(' '); stacks.push({ ...L, path }); acc = top; }); const yTicks = [0, max * 0.5, max].map(v => ({ v, y: ys(v) })); return ( {yTicks.map((t, i) => ( €{Math.round(t.v / 1000)}k ))} {stacks.map(s => )} {weeks.map((wk, i) => i % 2 === 0 && ( {wk} ))} ); } function Donut({ slices, size = 120, thickness = 18 }) { const total = slices.reduce((s, x) => s + x.value, 0); const r = (size - thickness) / 2; const c = size / 2; const C = 2 * Math.PI * r; let off = 0; return ( {slices.map((s, i) => { const len = (s.value / total) * C; const dash = `${len} ${C - len}`; const el = ( ); off += len; return el; })} ); } function RevMix({ state, lang }) { const t = REV_T[lang]; const help = REV_HELP[lang]; const sources = REV.sources[state] || REV.sources.default; const totals = REV.mixSeries.weeks.map((_, i) => REV.mixSeries.lodging[i] + REV.mixSeries.spa[i] + REV.mixSeries.fnb[i] + REV.mixSeries.other[i] ); const totalSum = totals.reduce((s, v) => s + v, 0); const colors = ['var(--chart-1)', 'var(--chart-2)', 'var(--chart-3)', 'var(--chart-4)', 'var(--chart-5)']; const donutSlices = sources.map((s, i) => ({ value: parseInt(s.rev.replace(/[^\d]/g, ''), 10), color: colors[i % colors.length], })); const donutTotal = donutSlices.reduce((s, x) => s + x.value, 0); return (
{t.sec2}
{t.sec2sub}
{t.mixWeeks}
{t.src['Размещение (5 домиков)']} {t.src['СПА и процедуры']} {t.src['Завтраки и кейтеринг']} {t.src['Сувениры и доп. услуги']}
{t.mixDonut}
€{Math.round(donutTotal / 1000)}k
{sources.map((s, i) => (
{t.src[s.name] || s.name} {s.share}%
))}
{t.sources}
{sources.map((s, i) => ( ))}
{t.th.source} {t.th.rev} {t.th.share} {t.th.mom}
{t.src[s.name] || s.name} {s.rev}
{s.share}%
{s.mom}
); } // ---------- Section 3: Expenses (P&L + donut) ---------- function RevExpenses({ state, lang }) { const t = REV_T[lang]; const help = REV_HELP[lang]; const pl = REV.pl[state] || REV.pl.default; const [open, setOpen] = React.useState({ staff: true }); const colors = ['var(--chart-1)', 'var(--chart-2)', 'var(--chart-3)', 'var(--chart-4)', 'var(--chart-5)', '#9CA3AF']; const totalSum = pl.reduce((s, g) => s + parseInt(g.total.replace(/[^\d]/g, ''), 10), 0); const donutSlices = pl.map((g, i) => ({ value: parseInt(g.total.replace(/[^\d]/g, ''), 10), color: colors[i % colors.length], })); const toggle = (id) => setOpen((o) => ({ ...o, [id]: !o[id] })); return (
{t.sec3}
{t.sec3sub}
{t.plTitle}
{t.plTotal}: €{totalSum.toLocaleString('en-US')}
{pl.map((g, gi) => { const isOpen = !!open[g.id]; const isAlert = g.items.some((it) => it.alert); return (
toggle(g.id)}>
▶ {t.pl[g.label] || g.label}
{g.total}
{isOpen && g.items.map((it, ii) => (
{it.label}
{it.value} {it.delta}
))} ); })}
{t.plDonut}
€{Math.round(totalSum / 1000)}k
{pl.map((g, i) => (
{t.pl[g.label] || g.label} {g.share}%
))}
); } // ---------- Section 4: Profitability 2x2 ---------- function RevProfitability({ state, lang }) { const t = REV_T[lang]; const help = REV_HELP[lang]; const cabins = REV.cabins[state] || REV.cabins.default; const xMin = 40, xMax = 95; const yMin = 0, yMax = 45; const px = (occ) => ((occ - xMin) / (xMax - xMin)) * 100; const py = (gop) => 100 - ((gop - yMin) / (yMax - yMin)) * 100; return (
{t.sec4}
{t.sec4sub}
{t.qHigh}
{t.qLow}
{t.qMargin}
{t.qOcc}
{cabins.map((c) => (
{c.name} {c.gop}%
))}
{t.cabinAxisX}
{t.cabinAxisY}
); } // ---------- Section 5: Forecast + What-if ---------- function ForecastChart({ data, lang }) { const t = REV_T[lang].fcLegend; const { weeks, actual, forecast, low, high } = data; const all = [...actual, ...forecast, ...low, ...high].filter(v => v !== null); const max = Math.max(...all) * 1.05; const min = 0; const w = 560, h = 220, pad = { l: 36, r: 12, t: 12, b: 26 }; const cw = w - pad.l - pad.r, ch = h - pad.t - pad.b; const xs = (i) => pad.l + (i / (weeks.length - 1)) * cw; const ys = (v) => pad.t + ch - ((v - min) / (max - min)) * ch; const buildPath = (arr) => { let started = false; return arr.map((v, i) => { if (v === null) return ''; const cmd = !started ? 'M' : 'L'; started = true; return `${cmd}${xs(i)},${ys(v)}`; }).filter(Boolean).join(' '); }; // Confidence band const bandPath = (() => { const top = high.map((v, i) => v !== null ? `${xs(i)},${ys(v)}` : null).filter(Boolean); const bot = low.map((v, i) => v !== null ? `${xs(i)},${ys(v)}` : null).filter(Boolean).reverse(); if (!top.length) return ''; return `M${top.join(' L')} L${bot.join(' L')} Z`; })(); const yTicks = [0, max * 0.5, max].map(v => ({ v, y: ys(v) })); return ( {yTicks.map((tk, i) => ( €{Math.round(tk.v / 1000)}k ))} {weeks.map((wk, i) => i % 2 === 0 && ( {wk} ))} ); } function WhatIf({ lang }) { const t = REV_T[lang]; const help = REV_HELP[lang]; const [price, setPrice] = React.useState(280); const [occ, setOcc] = React.useState(78); const [addons, setAddons] = React.useState(85); const nights = 30 * 5; // 30 days × 5 cabins const occNights = Math.round(nights * occ / 100); const lodging = price * occNights; const guestsApprox = Math.round(occNights * 2.2); const addonsRev = addons * guestsApprox; const revenue = lodging + addonsRev; const opex = 15203; const gop = revenue - opex; const margin = revenue > 0 ? Math.round((gop / revenue) * 100) : 0; const fmt = (v) => '€' + Math.round(v).toLocaleString('en-US'); return (
{t.whatif} {t.whatifBeta}
setPrice(+e.target.value)} />
setOcc(+e.target.value)} />
setAddons(+e.target.value)} />
{t.wRev}{fmt(revenue)}
{t.wOpex}−{fmt(opex)}
{t.wGop} · {margin}%= 0 ? 'var(--pos)' : 'var(--neg)' }}>{fmt(gop)}
); } function RevForecast({ state, lang }) { const t = REV_T[lang]; const help = REV_HELP[lang]; return (
{t.sec5}
{t.sec5sub}
{t.fcTitle}
{t.fcLegend.actual} {t.fcLegend.base} {t.fcLegend.low} / {t.fcLegend.high}
{t.fcSub}
); } window.RevSnapshot = RevSnapshot; window.RevMix = RevMix; window.RevExpenses = RevExpenses; window.RevProfitability = RevProfitability; window.RevForecast = RevForecast;