setOpen((o) => !o)} /> {open && (

setOpen(false)} style={{ position: 'fixed', inset: 0, zIndex: 40 }} />

{items.map((it) => (

{ it.onClick && it.onClick(); setOpen(false); }} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '10px 16px', cursor: 'pointer', fontSize: 14.5, color: it.danger ? 'var(--ip-danger)' : 'var(--fg-1)', whiteSpace: 'nowrap' }} onMouseEnter={(e) => (e.currentTarget.style.background = 'var(--bg-app)')} onMouseLeave={(e) => (e.currentTarget.style.background = 'transparent')}> {it.icon && }{it.label}

))}

)}

); } /* ═══════════ ЗНАЧЕНИЯ В ЯЧЕЙКАХ ═══════════ */ function Money({ amount, status, note }) { return (

{amount}

{status &&

{status.label}

} {note &&

{note}

}

); } function Progress({ done, total, unit = 'ч.' }) { const pct = total ? Math.min(100, Math.round(done / total * 100)) : 0; return (

{done} / {total} {unit}

); } function Chips({ items = [] }) { return (

{items.map((t) => {t})}

); } function Contact({ phone, email, tg }) { const row = (icon, value, href) => value ? ( {value} ) : null; return (

{row('phone', phone, 'tel:' + phone)} {row('mail', email, 'mailto:' + email)} {row('telegram', tg, '#')}

); } function Stepper({ steps = [] }) { const cur = steps.find((s) => s.state === 'current'); return (

{steps.map((s, i) => { const done = s.state === 'done'; const current = s.state === 'current'; const dotBg = done ? 'var(--accent)' : '#fff'; const ring = current ? 'var(--accent)' : 'var(--border-strong)'; return ( {i > 0 && } {done ? : current ? : null} ); })}

{cur &&

{cur.label}

}

); } /* ═══════════ СОСТОЯНИЯ ТАБЛИЦЫ ═══════════ */ function Skeleton({ rows = 3, cols = 4 }) { return (

{Array.from({ length: cols }).map((_, i) => )}

{Array.from({ length: rows }).map((_, r) => (

))}

); } function ErrorState({ onRetry }) { return (

Не удалось загрузить данные

Проверьте соединение и попробуйте ещё раз.

{onRetry && ( )}

); } // раскрывающаяся строка (строка → детали) function Disclosure({ summary, children, defaultOpen }) { const [open, setOpen] = React.useState(!!defaultOpen); return (

{open &&

{children}

}

); } /* ═══════════ ФИЛЬТРЫ ═══════════ */ // Выпадающий фильтр (single-select) с выбранным значением в чипе function FilterDropdown({ label, value, options = [], onChange, placeholder = 'Любой', multi = false }) { const [open, setOpen] = React.useState(false); const arr = multi ? (Array.isArray(value) ? value : (value ? [value] : [])) : []; const active = multi ? arr.length > 0 : (value != null && value !== ''); const current = multi ? null : options.find((o) => o.value === value); const selChips = multi ? options.filter((o) => arr.includes(o.value)) : []; const toggleMulti = (v) => { const next = arr.includes(v) ? arr.filter((x) => x !== v) : [...arr, v]; onChange && onChange(next); }; return (

{open && (

setOpen(false)} style={{ position: 'fixed', inset: 0, zIndex: 40 }} />

{multi ? ( {arr.length > 0 &&

onChange && onChange([])} style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '9px 16px', cursor: 'pointer', fontSize: 13.5, fontWeight: 600, color: 'var(--fg-3)', borderBottom: '1px solid var(--border-soft)' }}>Сбросить ({arr.length})

} {options.map((o) => { const sel = arr.includes(o.value); return (

toggleMulti(o.value)} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '10px 16px', cursor: 'pointer', fontSize: 14.5, fontWeight: sel ? 600 : 400, color: 'var(--fg-1)', background: sel ? 'var(--ip-brand-green-100)' : 'transparent' }} onMouseEnter={(e) => { if (!sel) e.currentTarget.style.background = 'var(--bg-app)'; }} onMouseLeave={(e) => { if (!sel) e.currentTarget.style.background = 'transparent'; }}> {sel && } {o.label}

); })} ) : ( [{ value: '', label: placeholder }, ...options].map((o) => { const sel = o.value === (value == null ? '' : value); return (

{ onChange && onChange(sel ? '' : o.value); setOpen(false); }} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, padding: '10px 16px', cursor: 'pointer', fontSize: 14.5, fontWeight: sel ? 700 : 400, color: sel ? 'var(--accent)' : 'var(--fg-1)', background: sel ? 'var(--ip-brand-green-100)' : 'transparent' }} onMouseEnter={(e) => { if (!sel) e.currentTarget.style.background = 'var(--bg-app)'; }} onMouseLeave={(e) => { if (!sel) e.currentTarget.style.background = 'transparent'; }}> {o.label}{sel && }

); }) )}

)}

); } // Переключатель (switch) function Switch({ checked, onChange, label }) { return ( ); } // Радио-группа function RadioGroup({ options = [], value, onChange, inline }) { return (

{options.map((o) => { const sel = value === o.value; return ( ); })}

); } // Чек-лист (множественный выбор) function CheckList({ options = [], value = [], onChange, inline }) { const toggle = (v) => onChange(value.includes(v) ? value.filter((x) => x !== v) : [...value, v]); return (

{options.map((o) => ( toggle(o.value)} style={{ cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: 10 }}> toggle(o.value)} /> {o.label} ))}

); } // ── Календарь (выбор даты) ── const TK_WD = ['Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб', 'Вс']; const TK_MONTHS = ['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь']; const TK_TODAY = { y: 2026, m: 5, d: 24 }; function tkFmt(y, m, d) { return String(d).padStart(2, '0') + '.' + String(m + 1).padStart(2, '0') + '.' + y; } function tkParseDate(v) { const mtch = /^(\d{2})\.(\d{2})\.(\d{4})$/.exec((v || '').trim()); if (!mtch) return null; const d = +mtch[1], m = +mtch[2] - 1, y = +mtch[3]; if (m < 0 || m > 11 || d < 1 || d > 31) return null; return { y, m, d }; } function Calendar({ year, month, selected, onSelect }) { const init = selected || { y: year != null ? year : TK_TODAY.y, m: month != null ? month : TK_TODAY.m }; const [y, setY] = React.useState(init.y); const [m, setM] = React.useState(init.m); const firstW = (new Date(y, m, 1).getDay() + 6) % 7; const dim = new Date(y, m + 1, 0).getDate(); const cells = []; for (let i = 0; i < firstW; i++) cells.push(null); for (let d = 1; d <= dim; d++) cells.push(d); const stepMonth = (dir) => { let nm = m + dir, ny = y; if (nm < 0) { nm = 11; ny--; } if (nm > 11) { nm = 0; ny++; } setM(nm); setY(ny); }; const nav = (dir, onClick, dbl, title) => ( ); return (

{nav(-1, () => setY(y - 1), true, 'Предыдущий год')}{nav(-1, () => stepMonth(-1), false, 'Предыдущий месяц')}

{TK_MONTHS[m]} {y}

{nav(1, () => stepMonth(1), false, 'Следующий месяц')}{nav(1, () => setY(y + 1), true, 'Следующий год')}

{TK_WD.map((w) =>

{w}

)}

{cells.map((d, i) => { if (d == null) return

; const sel = selected && selected.y === y && selected.m === m && selected.d === d; const today = TK_TODAY.y === y && TK_TODAY.m === m && TK_TODAY.d === d; return ( ); })}

); } // Поле даты: ввод с клавиатуры (маска дд.мм.гггг) + выпадающий календарь function DateField({ label, value, onChange, width = 180, height = 54 }) { const [open, setOpen] = React.useState(false); const [val, setVal] = React.useState(value || ''); const commit = (v) => { setVal(v); onChange && onChange(v); }; const onType = (e) => { let s = e.target.value.replace(/[^\d.]/g, ''); // авто-точки после дня и месяца const digits = s.replace(/\D/g, '').slice(0, 8); let out = digits.slice(0, 2); if (digits.length > 2) out += '.' + digits.slice(2, 4); if (digits.length > 4) out += '.' + digits.slice(4, 8); commit(out); }; const parsed = tkParseDate(val); return (

{label && {label}}

{open && (

setOpen(false)} style={{ position: 'fixed', inset: 0, zIndex: 40 }} />

{ commit(tkFmt(p.y, p.m, p.d)); setOpen(false); }} />

)}

); } // Период (диапазон дат) — два поля с календарём function DateRange({ label = 'Период' }) { const [from, setFrom] = React.useState(''); const [to, setTo] = React.useState(''); return (

{label && {label}} —

); } // Строка активных фильтров function ActiveFilters({ items = [], onRemove, onClear }) { if (!items.length) return null; return (

Фильтры: {items.map((it) => ( {it.label} onRemove && onRemove(it.key)} style={{ width: 18, height: 18, borderRadius: '50%', background: 'rgba(15,152,111,.16)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer' }}> ))} {onClear && }

); } // Сегмент-контрол (переключатель 2–4 опций) — единый для форм. // options: массив строк или { value, label, icon }. full — растянуть на ширину. function SegmentedControl({ value, onChange, options = [], full = false }) { return (

{options.map((o) => { const opt = typeof o === 'string' ? { value: o, label: o } : o; const a = String(opt.value) === String(value); return ( ); })}

); } // Числовой степпер (−/+) — единый для форм. unit — подпись после числа (напр. «ч.»). function NumberStepper({ value, onChange, min = 0, max = 99, unit }) { const v = parseInt(value, 10) || 0; const set = (n) => onChange(Math.max(min, Math.min(max, n))); const btn = { width: 44, height: 46, border: 'none', cursor: 'pointer', borderRadius: 'var(--radius-md)', background: 'var(--ip-brand-green-100)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }; return (

{v}{unit ? ' ' + unit : ''}

); } Object.assign(window, { Checkbox, BulkBar, IconButton, RowMenu, Money, Progress, Chips, Contact, Stepper, Skeleton, ErrorState, Disclosure, FilterDropdown, Switch, RadioGroup, CheckList, DateRange, ActiveFilters, Calendar, DateField, Button, SegmentedControl, NumberStepper, // Tk*-алиасы для совместимости со старыми экранами TkSkeleton: Skeleton, TkErrorState: ErrorState, TkMoney: Money, TkProgress: Progress, TkChips: Chips, TkContact: Contact, TkButton: Button, TkCheckbox: Checkbox, TkDateField: DateField, TkFilterDropdown: FilterDropdown, });