/* global React, Icon, Button, PickerTrigger, SlidePicker, Field, TextField, RangeCalendar, Overline, ModalLayer */ // Schools.ArtemenkoCRM — Выплата зарплаты (slide-in) // Модель: выплата = неизменяемый снимок занятий. Сервер платит ТОЛЬКО за ещё не оплаченные // занятия периода; ставка берётся на дату занятия. Правая панель — серверная правда (превью). const MON_SH = ['янв', 'фев', 'мар', 'апр', 'мая', 'июн', 'июл', 'авг', 'сен', 'окт', 'ноя', 'дек']; const isoNow = () => window.APP_TODAY_ISO || (() => { const d = new Date(); return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`; })(); const fmtIso = (s) => { if (!s) return '—'; const [y, m, d] = s.split('-'); return `${+d} ${MON_SH[+m - 1]} ${y}`; }; const payHourFmt = (h) => `${String(Math.floor(h)).padStart(2, '0')}:${h % 1 ? '30' : '00'}`; const payRub = (n) => new Intl.NumberFormat('ru-RU').format(n) + ' ₽'; const payLessonTime = (l) => l.time || (l.start != null ? payHourFmt(l.start) + '–' + payHourFmt(l.end) : ''); // Одна строка серверного скелетона (не прыгающий layout). function SkelRow() { const bar = (w, h) => ; return (
{bar(44, 12)}{bar(52, 10)}
{bar('72%', 13)}
{bar(56, 13)}
); } // Правая панель «Занятия за период» — СЕРВЕРНАЯ правда. 4 состояния: idle / loading / empty / list. function PayoutLessonsPanel({ pv }) { const LS = (window.CRM_DATA && window.CRM_DATA.LESSON_STATUS) || {}; const status = pv.status; const data = pv.data; const toPay = data ? data.toPay : []; const total = data ? data.sum : 0; const mixed = new Set(toPay.map(l => l.pay)).size > 1; const allPaid = status === 'ready' && data.totalCount > 0 && toPay.length === 0; // занятия были, но закрыты const noLessons = status === 'ready' && data.totalCount === 0; // занятий не было вовсе return (
Занятия к оплате {status === 'ready' && toPay.length > 0 && {toPay.length}}
{status === 'ready' && toPay.length > 0 && (
К выплате за занятия {payRub(total)}{mixed && · ставки по дате}
)} {status === 'ready' && data.coveredCount > 0 && toPay.length > 0 && (
{data.coveredCount} из {data.totalCount} уже оплачено ранее — в расчёт не входят
)}
{status === 'idle' && (
Выберите период слева —
здесь появятся занятия к оплате.
)} {status === 'loading' && (
Загружаем занятия за период…
)} {noLessons && (
За период занятий не было
)} {allPaid && (
Все занятия за период уже оплачены
{data.totalCount} зан. закрыты предыдущими выплатами
)} {status === 'ready' && toPay.length > 0 && toPay.map((l, i) => { const s = LS[l.status] || {}; return (
{l.dateLabel}
{payLessonTime(l)}
{l.who}{l.group && ГР} {payRub(l.pay)}
); })}
); } function AddPayoutModal({ onClose, onCreate, payout, prefillPeriod }) { const { PAYMENT_METHODS } = window.CRM_DATA; const [shown, setShown] = React.useState(false); const [picker, setPicker] = React.useState(null); const tId = payout ? (payout.teacherId != null ? payout.teacherId : payout.id) : null; const staffObj = (window.CRM_DATA.STAFF || []).find(s => s.id === tId) || null; // Умный дефолт периода: prefillPeriod (из «Доплатить») → последний месяц с неоплаченными. const initialRange = React.useMemo(() => { if (prefillPeriod && prefillPeriod.start && prefillPeriod.end) return prefillPeriod; if (staffObj && window.lastUnpaidPeriod) return window.lastUnpaidPeriod(staffObj); return null; }, []); const [range, setRange] = React.useState(initialRange); // {start,end} ISO const [rangeCal, setRangeCal] = React.useState(false); // Серверное превью периода: { status: idle|loading|ready, data }. const [pv, setPv] = React.useState({ status: 'idle', data: null }); // Корректировка (премия/удержание). const [adjMode, setAdjMode] = React.useState('none'); // none | bonus | deduct const [adjAmount, setAdjAmount] = React.useState(''); const [adjNote, setAdjNote] = React.useState(''); const [when, setWhen] = React.useState('now'); // now | schedule const [payDate, setPayDate] = React.useState(isoNow()); const [dateCal, setDateCal] = React.useState(false); const [method, setMethod] = React.useState(PAYMENT_METHODS[0] || null); const [comment, setComment] = React.useState(''); const rangeRef = React.useRef(null); const dateRef = React.useRef(null); React.useEffect(() => { const t = setTimeout(() => setShown(true), 10); return () => clearTimeout(t); }, []); React.useEffect(() => { const h = (e) => { if (rangeRef.current && !rangeRef.current.contains(e.target)) setRangeCal(false); if (dateRef.current && !dateRef.current.contains(e.target)) setDateCal(false); }; document.addEventListener('mousedown', h); return () => document.removeEventListener('mousedown', h); }, []); const close = () => { setShown(false); setTimeout(onClose, 200); }; // Дергаем серверное превью при каждом изменении периода (debounce 300мс). React.useEffect(() => { if (!range || !range.start || !range.end || tId == null || !window.fetchPayoutPreview) { setPv({ status: 'idle', data: null }); return; } setPv({ status: 'loading', data: null }); let cancelled = false; const t = setTimeout(() => { window.fetchPayoutPreview(tId, range.start, range.end) .then(res => { if (!cancelled) setPv({ status: 'ready', data: res }); }) .catch(() => { if (!cancelled) setPv({ status: 'idle', data: null }); }); }, 300); return () => { cancelled = true; clearTimeout(t); }; }, [range && range.start, range && range.end, tId]); const ready = pv.status === 'ready'; const toPay = ready ? pv.data.toPay : []; const calc = ready ? pv.data.sum : 0; // расчёт по занятиям const rateSet = Array.from(new Set(toPay.map(l => l.pay))); const singleRate = rateSet.length === 1 ? rateSet[0] : null; // Корректировка → знаковая сумма + итог. const adjNum = parseInt((adjAmount || '0').replace(/\D/g, ''), 10) || 0; const signed = adjMode === 'bonus' ? adjNum : adjMode === 'deduct' ? -adjNum : 0; const total = calc + signed; const deductTooBig = adjMode === 'deduct' && adjNum > calc; // итог ушёл бы в минус const reasonMissing = adjMode !== 'none' && adjNum > 0 && !adjNote.trim(); const pureBonus = ready && calc === 0 && adjMode === 'bonus' && adjNum > 0; // выплата только из премии const rangeLabel = range ? `${fmtIso(range.start)} – ${fmtIso(range.end)}` : 'Выберите период'; const canSave = ready && total > 0 && !deductTooBig && !reasonMissing && (calc > 0 || pureBonus); const disabledReason = !ready ? 'Выберите период — дождитесь расчёта занятий' : deductTooBig ? 'Удержание больше расчёта — итог не может быть отрицательным' : reasonMissing ? 'Укажите причину корректировки' : total <= 0 ? 'Нет занятий к оплате и нет премии' : ''; const submit = (attr) => onCreate({ payoutId: payout ? payout.id : null, teacher: payout ? payout.teacher : '', period: range, lessons: toPay.length, rate: singleRate || 0, amount: total, status: when === 'now' ? 'paid' : 'planned', payDate: when === 'schedule' ? payDate : isoNow(), method, comment: comment.trim(), adjustmentRubles: signed, adjustmentNote: signed ? adjNote.trim() : '', expenseAttr: attr || 'period', // Замороженная разбивка: ровно те занятия, за которые платим (toPay), по ставке на дату. lessonsDetail: toPay.map(l => ({ dateISO: l.dateISO, dateLabel: l.dateLabel, time: payLessonTime(l), who: l.who, group: !!l.group, amount: l.pay, status: l.status })), }); const finish = (attr) => { setPicker(null); setShown(false); setTimeout(() => submit(attr), 200); }; // Платим за ПРОШЛЫЙ месяц? → спросим, в каком месяце учесть расход. const [pastWarn, setPastWarn] = React.useState(false); const payISOnow = when === 'schedule' ? payDate : isoNow(); const periodM = (range && range.start) ? (+range.start.slice(5, 7) - 1) : null; const periodY = (range && range.start) ? (+range.start.slice(0, 4)) : null; const payM = +payISOnow.slice(5, 7) - 1, payY = +payISOnow.slice(0, 4); const isPastPeriod = periodM != null && (periodY < payY || (periodY === payY && periodM < payM)); const tryFinish = () => { if (!canSave) return; if (isPastPeriod) setPastWarn(true); else finish('period'); }; const dateBtn = (label, onClick, active) => ( ); // Сегмент-переключатель (общий стиль). const segment = (opts, val, onPick) => (
{opts.map(o => ( ))}
); return (
setPicker(null)} />