// ============================================================================ // DayOff.jsx — «Вихідні» (дизайн handoff_dayoffs, інтегровано в CRM). // function DayOff({ isMobile }) → window.DayOff // Десктоп і мобілка в одному файлі. Дані — GET /api/dayoffs; кожна дія повертає // свіжий знімок (сервер — джерело правди, оптимізму немає). Іконка — глобальний . // Наші правила: субота/неділя робочі й доступні; закритий лише понеділок. Власник // (isOwner) керує будь-яким днем будь-кого (у т.ч. минулим цього тижня — allowPast). // ============================================================================ (function () { const { useState, useEffect, useRef } = React; const Icon = window.Icon; // глобальна перф-іконка CRM ({name,size,color,style}) // keyframes + утиліти (один раз). Скоуповано під .do-root, щоб не чіпати інші екрани. if (typeof document !== "undefined" && !document.getElementById("dayoff-style")) { const st = document.createElement("style"); st.id = "dayoff-style"; st.textContent = "@keyframes popIn{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:scale(1)}}" + "@keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes fade{from{opacity:0}to{opacity:1}}" + "@keyframes sheetUp{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%,0)}}" + "@keyframes msheetUp{from{transform:translateY(100%)}to{transform:translateY(0)}}" + "@keyframes toastInM{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%,0)}}" + "@keyframes doBlink{0%,100%{opacity:1}50%{opacity:.35}}" + ".do-root .label{font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--fg-muted)}" + ".do-root .pulse-dot{width:8px;height:8px;border-radius:50%;background:var(--warning);animation:doBlink 1.2s infinite;flex-shrink:0}" + ".do-root .no-bar{scrollbar-width:none}.do-root .no-bar::-webkit-scrollbar{display:none}"; document.head.appendChild(st); } // ── дати (локальний час) ──────────────────────────────────────────────────── const WEEKDAYS = ["Пн", "Вт", "Ср", "Чт", "Пт", "Сб", "Нд"]; const pad = n => String(n).padStart(2, "0"); const ymd = d => `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`; const dd = iso => String(+iso.slice(8, 10)); const mon = iso => ["січ", "лют", "бер", "кві", "тра", "чер", "лип", "сер", "вер", "жов", "лис", "гру"][+iso.slice(5, 7) - 1]; const fmtDate = iso => `${dd(iso)} ${mon(iso)}`; const TODAY = ymd(new Date()); // ── примітиви ──────────────────────────────────────────────────────────────── function Button({ variant = "primary", size = "md", children, onClick, style, leftIcon, disabled }) { const base = { display: "inline-flex", alignItems: "center", justifyContent: "center", gap: 8, border: 0, borderRadius: 8, fontFamily: "inherit", fontWeight: 500, cursor: disabled ? "default" : "pointer", whiteSpace: "nowrap", transition: "all 150ms cubic-bezier(.2,0,0,1)", opacity: disabled ? 0.5 : 1 }; const sizes = { sm: { height: 28, padding: "0 10px", fontSize: 12, borderRadius: 6 }, md: { height: 36, padding: "0 16px", fontSize: 13 } }; const variants = { primary: { background: "var(--accent)", color: "#fff" }, secondary: { background: "var(--bg-raised)", color: "var(--fg-primary)", border: "1px solid var(--border-default)" }, ghost: { background: "transparent", color: "var(--fg-secondary)" }, danger: { background: "rgba(244,63,94,.14)", color: "var(--danger)", border: "1px solid rgba(244,63,94,.3)" }, success: { background: "rgba(16,185,129,.14)", color: "var(--success)", border: "1px solid rgba(16,185,129,.3)" }, }; return ; } function Avatar({ name, size = 28, ring }) { const initials = (name || "?").split(" ").map(s => s[0]).slice(0, 2).join(""); return
{initials}
; } // ── візуал стану дня ────────────────────────────────────────────────────────── function dayVisual(d) { if (d.ownerFixed) return { key: "fixed", fg: "var(--accent)", bg: "var(--accent-soft)", bd: "var(--accent)", icon: "lock", title: d.isPast ? "Був відгул" : "Закріплено" }; if (d.pending) return { key: "pending", fg: "var(--warning)", bg: "rgba(245,158,11,.10)", bd: "rgba(245,158,11,.55)", icon: "hourglass", title: "На розгляді" }; if (d.booked) return { key: "booked", fg: "var(--accent)", bg: "var(--accent-soft)", bd: "var(--accent)", icon: "check", title: d.isPast ? "Був відгул" : "Відгул" }; if (!d.bookable) return { key: "blocked", fg: "var(--fg-muted)", bg: "transparent", bd: "var(--border-subtle)", icon: null, title: d.reason }; return { key: "free", fg: "var(--fg-secondary)", bg: "transparent", bd: "var(--border-default)", icon: "plus", title: "Взяти відгул" }; } // ── клітинка дня (десктоп) ─────────────────────────────────────────────────── function DayCell({ d, onBook, onRelease, onRequest, owner }) { const [hover, setHover] = useState(false); const v = dayVisual(d); const dim = d.isPast && !owner; // Логіка кліку: власник керує будь-яким днем (крім понеділка/на розгляді); менеджер — за правилами. let clickable = false, act = null, hoverLabel = null; if (owner) { if (!d.isMonday && !d.pending) { if (d.booked) { clickable = true; act = () => onRelease(d); hoverLabel = "Зняти"; } else { clickable = true; act = () => onBook(d); hoverLabel = "Відмітити"; } } } else { if (v.key === "free") { clickable = true; act = () => onBook(d); hoverLabel = "Взяти"; } else if (v.key === "booked" && !d.isPast) { clickable = true; act = () => onRelease(d); hoverLabel = "Зняти"; } else if (v.key === "fixed" && !d.isPast) { clickable = true; act = () => onRequest(d, "move"); hoverLabel = "Перенести"; } else if (v.key === "pending") { clickable = true; act = () => onRequest(d, "view"); hoverLabel = "Деталі"; } } // Для власника вільний/заблокований день показуємо як «+ Відмітити». const ownerFree = owner && !d.booked && !d.isMonday && !d.pending; const showIcon = ownerFree ? "plus" : v.icon; const suggest = v.key === "free" && d.rec === "suggest"; let bodyLabel = ownerFree ? "Відмітити" : v.title; if (hover && clickable && hoverLabel) bodyLabel = hoverLabel; const releaseHover = hover && clickable && d.booked && v.key !== "fixed"; return ( ); } function QuotaMeter({ taken, quota, pending }) { return ( {Array.from({ length: quota }).map((_, i) => ( ))} {taken}/{quota} ); } function Legend() { const items = [ { c: "var(--accent)", fill: true, label: "Мій відгул" }, { c: "var(--accent)", icon: "lock", label: "Закріплено власником" }, { c: "var(--warning)", dashed: true, label: "На розгляді" }, { c: "var(--fg-disabled)", label: "Недоступно (понеділок/минуле)" }, ]; return (
{items.map((it, i) => ( {it.icon && } {it.label} ))}
); } // ── оглядова матриця команди ───────────────────────────────────────────────── function coverageTone(off, total) { const present = total - off; if (present <= 2) return { fg: "var(--danger)", bg: "var(--status-cancelled-soft)" }; if (present <= 3) return { fg: "var(--warning)", bg: "var(--status-preparing-soft)" }; return { fg: "var(--success)", bg: "transparent" }; } function TeamMatrix({ team, meUsername }) { if (!team || !team.length) return null; const total = team.length; const flat = t => [...t.weeks[0].days, ...t.weeks[1].days]; const ALL = flat(team[0]).map(d => d.date); const coverage = ALL.map((iso, ci) => team.reduce((n, t) => n + (flat(t)[ci].booked ? 1 : 0), 0)); const cell = (d) => { if (d.ownerFixed) return { bg: "var(--accent-soft)", dot: "var(--accent)", icon: "lock" }; if (d.pending) return { bg: "rgba(245,158,11,.12)", dot: "var(--warning)", ring: true }; if (d.booked) return { bg: "var(--accent-soft)", dot: "var(--accent)" }; return { bg: "transparent", dot: null }; }; const col = 34, nameW = 176; return (
{["Цей тиждень", "Наступний тиждень"].map((lbl, wi) => (
{lbl}
))}
Співробітник
{ALL.map((iso, i) => (
{WEEKDAYS[i % 7]}
{dd(iso)}
))}
{team.map(t => { const days = flat(t); const isMe = t.username === meUsername; return (
{t.name}{isMe && · ви}
{days.map((d, i) => { const c = cell(d); return (
{c.icon ? : c.dot ? : (d.isPast ? : null)}
); })}
); })}
На зміні
{ALL.map((iso, i) => { const off = coverage[i]; const present = total - off; const tone = coverageTone(off, total); return (
{present}
); })}
); } // ── заявки ──────────────────────────────────────────────────────────────────── function ActionBadge({ action }) { const m = action === "cancel" ? { label: "Скасувати", icon: "x-circle", c: "var(--danger)", bg: "var(--status-cancelled-soft)" } : { label: "Перенести", icon: "arrow-right-left", c: "var(--info)", bg: "var(--status-confirmed-soft)" }; return {m.label}; } function RequestCard({ r, onResolve }) { return (
{r.name}
@{r.username}
{fmtDate(r.fromDate)} {r.action === "move" && <>{fmtDate(r.toDate)}}
{r.note &&
«{r.note}»
}
); } function MyRequestRow({ r, onCancel }) { return (
{fmtDate(r.fromDate)}{r.action === "move" && <>{fmtDate(r.toDate)}} {r.note} На розгляді {onCancel && }
); } // ── актор-світчер (власник діє за співробітника) ───────────────────────────── function ActorSwitcher({ team, me, actor, onPick }) { const [open, setOpen] = useState(false); const wrap = useRef(null); useEffect(() => { const h = e => { if (wrap.current && !wrap.current.contains(e.target)) setOpen(false); }; document.addEventListener("mousedown", h); return () => document.removeEventListener("mousedown", h); }, []); const current = actor ? team.find(t => t.username === actor) : null; const first = n => (n || "").split(" ")[0]; return (
{open && (
{team.filter(t => !me || t.username !== me.username).map(t => ( ))}
)}
); } const rowStyle = on => ({ display: "flex", alignItems: "center", gap: 10, width: "100%", height: 40, padding: "0 8px", borderRadius: 8, border: 0, background: on ? "var(--accent-soft)" : "transparent", color: "var(--fg-primary)", fontSize: 13, fontWeight: 500, cursor: "pointer", fontFamily: "inherit" }); // ── модалка заявки (десктоп) ───────────────────────────────────────────────── function RequestModal({ day, freeDays, onClose, onSubmit }) { const [action, setAction] = useState("move"); const [target, setTarget] = useState(freeDays[0]?.date || ""); const [note, setNote] = useState(""); return (
Закріплений відгул · {fmtDate(day.date)}
Змінити можна лише через заявку власнику
{[{ k: "move", label: "Перенести", icon: "arrow-right-left" }, { k: "cancel", label: "Скасувати", icon: "x-circle" }].map(o => ( ))}
{action === "move" && (
Новий день
{freeDays.map(d => ( ))} {!freeDays.length && Немає вільних днів для перенесення.}
)}
Коментар для власника {action === "cancel" && · необовʼязково}