/* global React */ // Schools.ArtemenkoCRM — primitives (Icon, Button, Pill, Avatar, Card, Money, Input) // Custom brand icons (inline so currentColor inherits the button text color). const CUSTOM_ICONS = { 'add-student': '', 'remove-record': '', 'close-tile': '', }; function Icon({ name, size = 18, strokeWidth = 1.75, style }) { const ref = React.useRef(null); if (CUSTOM_ICONS[name]) { return ( ); } React.useEffect(() => { const host = ref.current; if (!host || !window.lucide) return; host.innerHTML = ''; const i = document.createElement('i'); i.setAttribute('data-lucide', name); i.setAttribute('width', size); i.setAttribute('height', size); i.setAttribute('stroke-width', strokeWidth); host.appendChild(i); window.lucide.createIcons(); }, [name, size, strokeWidth]); return ; } // Minted-coin buttons: subtle darkened bottom edge that depresses on press. function Button({ variant = 'primary', icon, children, onClick, style, full, size = 'md' }) { const [press, setPress] = React.useState(false); const [hover, setHover] = React.useState(false); const pad = size === 'sm' ? '7px 13px' : '10px 17px'; const fs = size === 'sm' ? 13 : 14; const base = { display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 8, fontFamily: 'var(--font-sans)', fontSize: fs, fontWeight: 600, lineHeight: 1, borderRadius: 5, padding: pad, border: '1px solid transparent', cursor: 'pointer', transition: 'background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease)', width: full ? '100%' : 'auto', whiteSpace: 'nowrap', transform: press ? 'translateY(1px)' : 'none', }; const variants = { primary: { background: hover ? 'var(--brand-hover)' : 'var(--brand)', color: '#fff', boxShadow: press ? 'inset 0 1px 2px rgba(13,22,52,0.45)' : 'inset 0 -2px 0 rgba(13,22,52,0.30)', }, secondary: { background: hover ? 'var(--bg-soft)' : 'var(--bg-card)', color: 'var(--brand-ink)', borderColor: 'var(--border-strong)', boxShadow: press ? 'none' : 'inset 0 -2px 0 rgba(28,34,51,0.05)', }, ghost: { background: 'transparent', color: 'var(--brand-ink)', textDecoration: hover ? 'underline' : 'none', textUnderlineOffset: 3 }, danger: { background: hover ? 'var(--coral-bg)' : 'var(--bg-card)', color: 'var(--coral)', borderColor: '#E6C9C4' }, }; return ( ); } // Status = quiet colored dot + label (ledger style). Funnel: new→call→trial→payment→active; refusal exits. // `ring: true` renders a hollow dot (used for «Пробное» to distinguish from filled «Активный»). const PILL = { new: { dot: '#1E3A8A', fg: '#234381', label: 'Новая' }, call: { dot: '#9A7B33', fg: '#6A5320', label: 'Созвон' }, trial: { dot: '#2F6B4F', fg: '#214E39', label: 'Пробное', ring: true }, payment: { dot: '#93702F', fg: '#5E461E', label: 'Оплата' }, active: { dot: '#2F6B4F', fg: '#214E39', label: 'Активный' }, refusal: { dot: '#A8443B', fg: '#79302A', label: 'Отказ' }, draft: { dot: '#A6A296', fg: '#7E8595', label: 'Черновик' }, vip: { dot: '#93702F', fg: '#5E461E', label: 'VIP' }, // Счета и финансы paid: { dot: '#2F6B4F', fg: '#214E39', label: 'Оплачен' }, pending: { dot: '#9A7B33', fg: '#6A5320', label: 'Ожидает' }, overdue: { dot: '#A8443B', fg: '#79302A', label: 'Просрочен' }, cancelled: { dot: '#A6A296', fg: '#7E8595', label: 'Отменён' }, refund: { dot: '#234381', fg: '#234381', label: 'Возврат', ring: true }, }; function Pill({ kind, children }) { if (kind === 'vip') { return ( {children || 'VIP'} ); } const p = PILL[kind] || PILL.draft; return ( {children || p.label} ); } // Quiet bordered chip for subjects/directions (Python, C++, Вышмат…). function DirChip({ children }) { if (!children) return —; return ( {children} ); } // Avatars = white animal silhouettes (Phosphor fill SVG) on the segment-tone ground. const AV_COLORS = { navy: 'var(--brand)', green: 'var(--green)', gold: 'var(--gold)' }; function Avatar({ animal = 'paw-print', tone = 'navy', size = 32 }) { return ( ); } function Card({ children, style, className, pad = 22, onClick, hover }) { const [h, setH] = React.useState(false); return (
setH(true)} onMouseLeave={() => setH(false)} style={{ background: 'var(--bg-card)', border: '1px solid ' + (hover && h ? 'var(--border-strong)' : 'var(--border)'), borderRadius: 'var(--radius-lg)', padding: pad, boxShadow: hover && h ? 'var(--shadow-md)' : 'var(--shadow-sm)', cursor: onClick ? 'pointer' : 'default', transition: 'box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease)', ...style, }}> {children}
); } // Анимация числа 0→value (easeOutCubic). format(v) — как отрисовать целое (₽, %, шт.). // Уважает prefers-reduced-motion (сразу конечное значение). RAF в фоновой вкладке throttl-ится — норм. function CountUp({ to, duration = 900, format }) { const target = Number(to) || 0; const [n, setN] = React.useState(target); React.useEffect(() => { const reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches; if (reduce || duration <= 0) { setN(target); return; } let raf, start = null; const step = (t) => { if (start == null) start = t; const p = Math.min(1, (t - start) / duration); const eased = 1 - Math.pow(1 - p, 3); setN(target * eased); if (p < 1) raf = requestAnimationFrame(step); else setN(target); }; setN(0); raf = requestAnimationFrame(step); return () => { if (raf) cancelAnimationFrame(raf); }; }, [target, duration]); const v = Math.round(n); return {format ? format(v) : v}; } function Money({ value, style }) { const formatted = new Intl.NumberFormat('ru-RU').format(value); return {formatted} ₽; } function Overline({ children, style }) { return
{children}
; } function Input({ label, value, onChange, placeholder, hint, error, prefix }) { const [focus, setFocus] = React.useState(false); return (
{label && }
{prefix && } onChange && onChange(e.target.value)} placeholder={placeholder} onFocus={() => setFocus(true)} onBlur={() => setFocus(false)} style={{ flex: 1, width: '100%', boxSizing: 'border-box', border: 'none', outline: 'none', background: 'transparent', fontFamily: 'var(--font-sans)', fontSize: 14, color: 'var(--text)', padding: '10px 12px', }} />
{hint && !error &&
{hint}
} {error &&
{error}
}
); } // Balance — mono, green when positive, dim at zero. function Balance({ value }) { const formatted = new Intl.NumberFormat('ru-RU').format(value); const color = value > 0 ? 'var(--green)' : value < 0 ? 'var(--coral)' : 'var(--text-dim)'; const weight = value !== 0 ? 600 : 500; return {formatted} ₽; } // Dropdown filter — styled trigger + popover list. The menu is rendered with // position:fixed (computed from the trigger rect) so it escapes table/overflow // clipping and sits above everything. Search auto-enables for longer lists. function Dropdown({ value, options, onChange, placeholder, width, searchable, multi }) { const [open, setOpen] = React.useState(false); const [q, setQ] = React.useState(''); const [rect, setRect] = React.useState(null); const ref = React.useRef(null); const menuRef = React.useRef(null); const withSearch = searchable != null ? searchable : options.length > 5; const place = React.useCallback(() => { if (ref.current) setRect(ref.current.getBoundingClientRect()); }, []); React.useEffect(() => { if (!open) return; place(); const onDoc = (e) => { if (ref.current && !ref.current.contains(e.target) && menuRef.current && !menuRef.current.contains(e.target)) setOpen(false); }; const onScroll = () => setOpen(false); document.addEventListener('mousedown', onDoc); window.addEventListener('scroll', onScroll, true); window.addEventListener('resize', onScroll); return () => { document.removeEventListener('mousedown', onDoc); window.removeEventListener('scroll', onScroll, true); window.removeEventListener('resize', onScroll); }; }, [open, place]); React.useEffect(() => { if (!open) setQ(''); }, [open]); const sel = multi ? (Array.isArray(value) ? value : []) : null; const label = multi ? (sel.length === 0 ? placeholder : sel.length === 1 ? ((options.find(o => o.value === sel[0]) || {}).label || placeholder) : `${placeholder}: ${sel.length}`) : (value == null ? placeholder : (options.find(o => o.value === value) || {}).label || placeholder); const isDefault = multi ? sel.length === 0 : value == null; // В мультирежиме не показываем псевдо-опцию «Все …» (value:null) — пустой выбор = все. const baseOpts = multi ? options.filter(o => o.value != null) : options; const filtered = withSearch && q ? baseOpts.filter(o => o.label.toLowerCase().includes(q.trim().toLowerCase())) : baseOpts; const filteredVals = filtered.map(o => o.value); const allFilteredOn = multi && filteredVals.length > 0 && filteredVals.every(v => sel.includes(v)); const toggleMulti = (v) => { const set = sel.includes(v) ? sel.filter(x => x !== v) : [...sel, v]; onChange(set); }; const selectFiltered = () => onChange(Array.from(new Set([...sel, ...filteredVals]))); const clearFiltered = () => onChange(sel.filter(v => !filteredVals.includes(v))); const menuW = rect ? Math.max(rect.width, 200) : 200; const belowRoom = rect ? window.innerHeight - rect.bottom : 999; const flipUp = belowRoom < 280 && rect && rect.top > belowRoom; const left = rect ? Math.min(rect.left, window.innerWidth - menuW - 8) : 0; return (
{open && rect && ReactDOM.createPortal(
{withSearch && (
setQ(e.target.value)} placeholder="Поиск…" style={{ border: 'none', outline: 'none', background: 'transparent', flex: 1, minWidth: 0, fontFamily: 'var(--font-sans)', fontSize: 13, color: 'var(--text)' }} />
)} {multi && searchable && (
)}
{filtered.map(o => { const on = multi ? sel.includes(o.value) : o.value === value; return ( ); })} {filtered.length === 0 &&
Ничего не найдено
}
, document.body )}
); } // Picker trigger — looks like a dropdown, but opens a left-sliding SlidePicker. function PickerTrigger({ label, placeholder, onClick, width }) { const isDefault = !label; return ( ); } // SlidePicker — fixed-size panel that slides out to the LEFT of a modal, with // search + scroll, selected check, and optional free-text ("Другое — своё"). // Render as a sibling of the modal card inside a position:relative wrapper. function SlidePicker({ cfg, onClose, closeReq }) { const [shown, setShown] = React.useState(false); const [qInput, setQInput] = React.useState(''); const [q, setQ] = React.useState(''); const [custom, setCustom] = React.useState(''); const [customMode, setCustomMode] = React.useState(false); const panelRef = React.useRef(null); React.useEffect(() => { setShown(false); setQInput(''); setQ(''); setCustom(''); setCustomMode(false); // Force the off-screen start frame to paint before flipping, so the slide-in actually animates. let raf1, raf2; if (panelRef.current) void panelRef.current.offsetWidth; // force reflow raf1 = requestAnimationFrame(() => { raf2 = requestAnimationFrame(() => setShown(true)); }); return () => { cancelAnimationFrame(raf1); cancelAnimationFrame(raf2); }; }, [cfg]); React.useEffect(() => { const t = setTimeout(() => setQ(qInput), 200); return () => clearTimeout(t); }, [qInput]); const close = () => { setShown(false); setTimeout(onClose, 280); }; React.useEffect(() => { if (closeReq) close(); }, [closeReq]); React.useEffect(() => { if (!cfg) return; const onDown = (e) => { if (panelRef.current && !panelRef.current.contains(e.target)) close(); }; document.addEventListener('mousedown', onDown, true); return () => document.removeEventListener('mousedown', onDown, true); }, [cfg]); if (!cfg) return null; const pick = (v) => { cfg.onPick(v); close(); }; const options = cfg.options || []; const filtered = options.filter(o => o.label.toLowerCase().includes(q.trim().toLowerCase())); const isOther = (o) => cfg.allowCustom && (o.value === 'other' || o.label === 'Другое'); return (
{customMode && ( )}

{customMode ? 'Своё значение' : cfg.title}

{customMode ? (
{cfg.customPlaceholder || 'Введите своё значение'}
setCustom(e.target.value)} placeholder={cfg.customPlaceholder || 'Введите вручную'} onKeyDown={e => { if (e.key === 'Enter' && custom.trim()) pick(custom.trim()); }} style={{ width: '100%', boxSizing: 'border-box', border: '1px solid var(--brand)', boxShadow: 'var(--shadow-focus)', borderRadius: 'var(--radius-sm)', padding: '10px 12px', fontFamily: 'var(--font-sans)', fontSize: 14, color: 'var(--text)', outline: 'none', background: 'var(--bg-card)' }} />
) : (
setQInput(e.target.value)} placeholder="Поиск…" style={{ border: 'none', outline: 'none', background: 'transparent', flex: 1, fontFamily: 'var(--font-sans)', fontSize: 13.5, color: 'var(--text)' }} />
{cfg.note &&
{cfg.note}
} {filtered.map(o => { const on = o.value === cfg.value; const other = isOther(o); if (o.disabled) { return (
{o.label}
{o.sub &&
{o.sub}
}
); } return ( ); })} {filtered.length === 0 &&
Ничего не найдено
}
)}
); } // Слой для НЕполноэкранных модалок (подтверждения, предупреждения, маленькие диалоги). // Рисуется ПОРТАЛОМ в с position:fixed → всегда по центру ЭКРАНА, где бы пользователь ни // прокрутил страницу. Без портала такие диалоги центрировались внутри своей панели (а у панели // карточки ученика ещё и transform, из-за которого даже fixed липнет к панели, а не к экрану). function ModalLayer({ z = 95, pad = 20, children }) { return ReactDOM.createPortal(
{children}
, document.body ); } Object.assign(window, { Icon, Button, Pill, DirChip, Avatar, Card, Money, Balance, Dropdown, PickerTrigger, SlidePicker, Overline, Input, PILL, CountUp, ModalLayer });