// screen-payments.jsx — оплаты за день (аналог виджетов оплат в десктоп-CRM). // Показывает все оплаты за выбранный день с фильтром Чемпион / Импульс / Аренда / // Все. Все оплаты (и абонементы, и аренда) лежат в одной таблице transactions: // Чемпион = branch_id 2, Импульс = branch_id 1, Аренда = type='rental_payment'. // Делаем ОДНУ выборку за день (date_from=date_to, limit 1000) и фильтруем вкладки // на клиенте — переключение мгновенное, без сети; суммы считаем тут же, как виджеты. (() => { const { useState, useMemo, useEffect } = React; const { fmtMoney } = window.M; // Выбранный день и фильтр храним в sessionStorage: при открытии карточки клиента // Shell размонтирует экран (рендерит карточку вместо вкладок), и при возврате // экран монтируется заново — без этого день сбрасывался бы на сегодня. const DAY_KEY = 'pay_day', FILTER_KEY = 'pay_filter'; // Локальный календарный день YYYY-MM-DD (без UTC-сдвига toISOString). function todayISO() { const d = new Date(); return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`; } function shiftDay(iso, delta) { const [y, m, d] = iso.split('-').map(Number); const dt = new Date(y, m - 1, d + delta); return `${dt.getFullYear()}-${String(dt.getMonth() + 1).padStart(2, '0')}-${String(dt.getDate()).padStart(2, '0')}`; } function fmtTime(iso) { if (!iso) return ''; const d = new Date(iso); if (isNaN(d)) return ''; return d.toLocaleTimeString('ru-RU', { hour: '2-digit', minute: '2-digit' }); } function dayLabel(iso) { if (iso === todayISO()) return 'Сегодня'; if (iso === shiftDay(todayISO(), -1)) return 'Вчера'; const d = new Date(iso + 'T00:00:00'); if (isNaN(d)) return iso; return d.toLocaleDateString('ru-RU', { day: '2-digit', month: 'long' }); } function plural(n, one, few, many) { const m10 = n % 10, m100 = n % 100; if (m10 === 1 && m100 !== 11) return one; if (m10 >= 2 && m10 <= 4 && (m100 < 10 || m100 >= 20)) return few; return many; } // [значение фильтра, подпись]. Порядок как в виджетах: Чемпион (branch 2), // Импульс (branch 1), Аренда (rental_payment). const FILTERS = [ ['all', 'Все'], ['2', 'Чемпион'], ['1', 'Импульс'], ['rental', 'Аренда'], ]; // Имя в строке: для абонемента — клиент, для аренды — арендатор (тренер). function rowName(s) { const cn = (s.client_name || '').trim(); if (cn) return cn; if (s.teacher_name) return s.teacher_name; return 'Оплата'; } // UTC-форматирование даты периода счёта (period_from/to приходят как полночь // UTC — берём календарный день в UTC, чтобы не съезжать на ±1 в локальной TZ). function fmtUTCDate(iso) { if (!iso) return ''; const d = new Date(iso); if (isNaN(d)) return ''; return d.toLocaleDateString('ru-RU', { day: '2-digit', month: 'short', timeZone: 'UTC' }); } // Подпись строки аренды: счёт за период (рус.), напр. «Аренда · 01 июн. – 15 июн.». // Период приходит из джойна transactions→rental_invoices (rental_period_from/to); // фолбэк на annotation (у старых записей дата там по-английски — потому и джойн). function rentalSub(s) { const f = fmtUTCDate(s.rental_period_from); const t = fmtUTCDate(s.rental_period_to); const period = f ? (t && t !== f ? `${f} – ${t}` : f) : ''; if (period) return `Аренда · ${period}`; return s.annotation && !/[A-Za-z]/.test(s.annotation) ? s.annotation : 'Оплата аренды'; } // Чип способа оплаты внутри плитки. id: 1 нал, 2 карта, 3 СБП, 4 эквайринг, // 5 депозит, 6 расчётный счёт, null — способ не указан. Цвет — badge-вариант. function payInfo(s) { const id = Number(s.payment_method_id); if (id === 1) return { label: 'Наличные', cls: 'ok' }; if (id === 2) return { label: 'Карта', cls: 'info' }; if (id === 4) return { label: 'Эквайринг', cls: 'info' }; if (id === 3) return { label: 'СБП', cls: 'accent' }; if (id === 6) return { label: 'Расчётный счёт', cls: '' }; if (id === 5) return { label: 'Депозит', cls: '' }; return { label: s.payment_method_name || 'Способ не указан', cls: '' }; } window.PaymentsScreen = function PaymentsScreen({ onOpenClient }) { const [day, setDay] = useState(() => { const s = sessionStorage.getItem(DAY_KEY); return (/^\d{4}-\d{2}-\d{2}$/.test(s) && s <= todayISO()) ? s : todayISO(); }); const [filter, setFilter] = useState(() => sessionStorage.getItem(FILTER_KEY) || 'all'); useEffect(() => { sessionStorage.setItem(DAY_KEY, day); }, [day]); useEffect(() => { sessionStorage.setItem(FILTER_KEY, filter); }, [filter]); const st = window.useAsync( () => window.api.transactions.list({ date_from: day, date_to: day, limit: 1000 }), [day] ); const { data, loading, error, reload } = st; const all = useMemo(() => { if (Array.isArray(data)) return data; return (data && data.items) || []; }, [data]); const rows = useMemo(() => { if (filter === 'all') return all; if (filter === 'rental') return all.filter((s) => s.type === 'rental_payment'); // Чемпион/Импульс — по филиалу, аренду из них исключаем (у неё branch пустой, // но на всякий случай — чтобы branch-вкладки были чисто абонементными). return all.filter((s) => String(s.branch_id) === filter && s.type !== 'rental_payment'); }, [all, filter]); const total = rows.reduce((sum, s) => sum + Number(s.amount || 0), 0); const count = rows.length; const isFuture = day >= todayISO(); return (
{/* Переключатель дня: ‹ день ›, тап по центру — нативный date-picker */}
{FILTERS.map(([k, label]) => ( ))}
{loading ? '…' : fmtMoney(total)}
{count} {plural(count, 'оплата', 'оплаты', 'оплат')}
{loading &&
} {error && !loading && (
⚠️{error}
)} {!loading && !error && count === 0 && (
💳Оплат за день нет
)} {!loading && !error && rows.map((s) => { const rental = s.type === 'rental_payment'; const name = rowName(s); const sub = rental ? rentalSub(s) : (s.sub_type_name || ''); const refunded = !!s.refund_at; const pay = payInfo(s); const canOpen = !rental && onOpenClient && s.client_id; return (
canOpen && onOpenClient(s.client_id)}>
{name}
{sub || '—'}
{fmtMoney(s.amount)}
{fmtTime(s.created_at)}
{pay.label} {refunded && Возврат}
); })}
); }; })();