Название set('title', x.target.value)} /> Дата set('date', x.target.value)} /> Время set('time', x.target.value)} /> Формат

Каналы

{C.CHANNELS.map((c) => )}

Текст

set('text', x.target.value)} /></label>
          <label style={{ gridColumn: '1 / -1' }}><span className="lab">Хэштеги</span><input className="pz-in" value={draft.hashtags || ''} placeholder="#ремонт #санузел" disabled={locked} onChange={(x) => set('hashtags', x.target.value)} /></label>
        </div>
        <section className="dz-sec"><div className="t">Медиа · {(draft.mediaRefs || []).length}</div>
          <div className="dz-files">{(draft.mediaRefs || []).map((m) => (
            <span key={m.url} className="mk-thw"><Thumb m={m} />{!locked && <button type="button" className="mk-x" aria-label="Убрать" onClick={() => set('mediaRefs', draft.mediaRefs.filter((x) => x.url !== m.url))}><Ic n="x" s={12} /></button>}</span>))}</div>
          {!locked && <div className="dz-acts">
            {fromShoot.length > 0 && <button type="button" className="btn-k" onClick={() => addMedia(fromShoot)}>Фото со съёмки: {fromShoot.length} — добавить</button>}
            <button type="button" className="btn-l" onClick={() => setLib(!lib)}>{lib ? 'Скрыть медиатеку' : 'Из медиатеки'}</button></div>}
          {lib && !locked && (library.length ? <div className="dz-files">{library.map((m) => <button key={m.url} type="button" className="mk-pick" onClick={() => addMedia([m])} title={(m.taskName || m.name || '') + ' · ' + m.obj}><Thumb m={m} /></button>)}</div>
            : <div className="lab" style={{ marginTop: 8 }}>В медиатеке нет файлов, которые можно публиковать.</div>)}
        </section>
        {post.status === 'ready' && <section className="dz-sec"><div className="t">Ссылки на публикации</div>
          <div className="pz-slot">{post.channels.map((c) => <label key={c}><span className="lab">{chL(c)}</span><input className="pz-in" value={links[c] || ''} placeholder="https://…" onChange={(x) => setLinks(Object.assign({}, links, { [c]: x.target.value }))} /></label>)}</div></section>}
        {post.status === 'published' && <section className="dz-sec"><div className="t">Опубликовано</div>
          <div className="mg-rows">{Object.keys(post.publishedLinks || {}).map((c) => <div key={c} className="r"><span className="tx"><span className="t">{chL(c)}</span><a className="lab" href={post.publishedLinks[c]} target="_blank" rel="noopener noreferrer">{post.publishedLinks[c]}</a></span></div>)}</div></section>}
        {err(e)}{okNote(ok)}
        <div className="dz-acts mk-foot">
          {!locked && dirty && <button type="button" className="btn-k" onClick={() => act(() => C.updatePost(id, patch(), a), 'Сохранено')}>Сохранить</button>}
          {!locked && dirty && <button type="button" className="btn-l" onClick={fresh}>Отменить правки</button>}
          {post.status === 'idea' && <button type="button" className="btn-l" onClick={() => move('shoot', 'Пост — в съёмке')}>В съёмку</button>}
          {(post.status === 'idea' || post.status === 'shoot') && <button type="button" className="btn-l" onClick={() => move('edit', 'Пост — в монтаже')}>В монтаж</button>}
          {post.status === 'edit' && <button type="button" className="btn-l" onClick={() => move('shoot', 'Пост — в съёмке')}>Переснять</button>}
          {post.status === 'edit' && <button type="button" className="btn-k" onClick={() => act(() => { save(); C.submitReview(id, a); }, 'Отправлено руководителю')}>На проверку руководителю</button>}
          {post.status === 'ready' && <button type="button" className="btn-k" onClick={() => act(() => { if (dirty) throw new Error('Есть несохранённые правки: сохраните их (пост вернётся на проверку) или отмените'); C.markPublished(id, links, a); }, 'Пост опубликован')}>Отметить опубликованным</button>}
          {post.status === 'ready' && <button type="button" className="btn-l" onClick={() => move('edit', 'Пост снят с публикации')}>Снять с публикации</button>}
          {(post.status === 'ready' || locked) && <button type="button" className="btn-l" onClick={copyText}>Скопировать текст</button>}
          {!locked && <button type="button" className="btn-l" onClick={() => { if (window.confirm('Удалить пост «' + post.title + '»?') && run(() => C.removePost(id, a))) open('plan'); }}>Удалить</button>}
        </div>
      </Modal>);
  }

/* ───── медиатека: скачать, выбрать несколько «в пост», «Показать клиенту», «Для сделок»; файлы без превью скрываются ───── */
  const PHASE_L = { '00': '/00 Дизайн', '01': '/01 Подготовка', '02': '/02 Черновые', '03': '/03 Предчистовая', '04': '/04 Чистовая', '05': '/05 Сдача' };
  function DealUse({ m, me, run }) {
    const dd = m.deal || { on: false, steps: [], phase: null, objection: '' };
    const set = (p) => run(() => P.setSmmDealUse(m.pid, m.mediaId, p, actor(me)));
    return (
      <div className="mk-deal">
        <label className="mk-tg" title="Материал попадёт в кабинет клиента до договора: на главную, в окно «Замер» или в смету-КП"><input type="checkbox" checked={!!dd.on} onChange={(x) => set({ on: x.target.checked })} />Для сделок</label>
        {dd.on && <React.Fragment>
          <div className="mk-chips" role="group" aria-label="Шаги клиента">{(P.DEAL_STEPS || []).map((st) => <button key={st} type="button" aria-pressed={dd.steps.includes(st)} className={'mk-chip' + (dd.steps.includes(st) ? ' on' : '')} onClick={() => set({ steps: dd.steps.includes(st) ? dd.steps.filter((x) => x !== st) : dd.steps.concat([st]) })}>{P.DEAL_STEP_L[st]}</button>)}</div>
          {!dd.steps.length && <div className="lab mk-warn">Отметьте хотя бы один шаг, иначе клиент материал не увидит</div>}
          <select className="pz-in mk-sel" value={dd.phase || ''} onChange={(x) => set({ phase: x.target.value || null })} aria-label="Фаза сметы"><option value="">Любая фаза</option>{Object.keys(PHASE_L).map((k) => <option key={k} value={k}>{PHASE_L[k]}</option>)}</select>
          <select className="pz-in mk-sel" value={dd.objection || ''} onChange={(x) => set({ objection: x.target.value })} aria-label="Сомнение клиента"><option value="">Любое сомнение</option>{(P.DEAL_OBJECTIONS || []).map((k) => <option key={k} value={k}>{cap(P.DEAL_OBJECTION_L[k])}</option>)}</select>
        </React.Fragment>}
      </div>);
  }
  const keyOf = (m) => m.pid + '|' + m.url;
  function MediaModal({ me, d, open, close }) {
    const C = window.ContentPlan;
    const [pid, setPid] = React.useState('all');
    const [fmt, setFmt] = React.useState('all');
    const [sel, setSel] = React.useState([]);
    const [bad, setBad] = React.useState([]);
    const [big, setBig] = React.useState(null);
    const [to, setTo] = React.useState('');
    const [upPid, setUpPid] = React.useState('');
    const [upTask, setUpTask] = React.useState('');
    const [busy, setBusy] = React.useState(false);
    const [run, e, ok] = useRun();
    const fileRef = React.useRef(null);
    const rows = MV.media({ pid: pid === 'all' ? undefined : pid, format: fmt === 'all' ? undefined : fmt }).filter((m) => !bad.includes(m.url));
    const picked = rows.filter((m) => sel.includes(keyOf(m)));
    const pub = picked.filter((m) => !m.archiveOnly);
    const open4post = C ? C.list().filter((p) => p.status !== 'published') : [];
    const toggle = (m) => setSel(sel.includes(keyOf(m)) ? sel.filter((k) => k !== keyOf(m)) : sel.concat([keyOf(m)]));
    const refs = (list) => list.map((m) => ({ pid: m.pid, url: m.url, kind: m.kind, name: m.name || '' }));
    const toPost = () => run(() => {
      if (!pub.length) throw new Error('Выбранные файлы — только архив: без согласия клиента публиковать нельзя');
      let p;
      if (to) { const cur = C.get(to); const have = (cur.mediaRefs || []).map((x) => x.url); p = C.updatePost(to, { mediaRefs: (cur.mediaRefs || []).concat(refs(pub).filter((x) => !have.includes(x.url))) }, actor(me)); }
      else p = C.createPost({ title: (pub[0].taskName || 'Новый пост'), date: t0(), channels: ['instagram'], format: 'result', mediaRefs: refs(pub) }, actor(me));
      setSel([]); if (p) open('post=' + p.id);
    });
    const download = () => picked.forEach((m, i) => setTimeout(() => { const a = document.createElement('a'); a.href = m.url; a.download = m.name || ''; a.target = '_blank'; a.rel = 'noopener'; document.body.appendChild(a); a.click(); a.remove(); }, i * 250));
    async function onFiles(ev) {
      const files = Array.from(ev.target.files || []); ev.target.value = '';
      if (!files.length || !upPid || !window.Files) return;
      setBusy(true);
      try {
        const ups = await window.Files.uploadAll(files, { pid: upPid, kind: 'smm' });
        const orients = await Promise.all(files.map(probeOrient));
        const good = ups.map((u, i) => Object.assign({}, u, { orient: orients[i] })).filter((u) => !u.local);
        run(() => {
          if (!good.length) throw new Error('Файлы не загрузились на сервер — проверьте соединение и повторите.');
          good.forEach((u) => P.addSmmMedia(upPid, { url: u.url, name: u.name, kind: u.kind === 'video' ? 'video' : 'image', orient: u.orient, taskId: upTask || null, from: 'upload' }, actor(me)));
        }, 'Загружено: ' + good.length);
      } finally { setBusy(false); }
    }
    const upProj = d.consent.find((p) => p.pid === upPid);
    const upTasks = upProj ? (P.views.smmProjects('marketing').find((p) => p.pid === upPid) || { tasks: [] }).tasks.filter((t) => t.smm) : [];
    return (
      <Modal size="wide" title="Медиатека" sub="съёмки, фото сдачи SMM-работ и медиа из чатов · без согласия клиента — только архив" onClose={close}>
        <div className="pz-row">
          <select className="pz-in mk-sel" value={pid} onChange={(x) => setPid(x.target.value)} aria-label="Объект"><option value="all">Все объекты</option>{d.consent.map((p) => <option key={p.pid} value={p.pid}>{p.obj}</option>)}</select>
          <select className="pz-in mk-sel" value={fmt} onChange={(x) => setFmt(x.target.value)} aria-label="Формат"><option value="all">Все форматы</option>{FORMATS().map((x) => <option key={x.id} value={x.id}>{x.label}</option>)}</select>
          <span className="lab">{rows.length} {plural(rows.length, 'файл', 'файла', 'файлов')}{bad.length ? ' · ' + bad.length + ' без превью скрыто' : ''}</span>
        </div>
        {err(e)}{okNote(ok)}
        {rows.length ? <div className="mk-grid">{rows.map((m) => {
          const on = sel.includes(keyOf(m));
          return (
            <div key={keyOf(m)} className={'mk-m' + (on ? ' on' : '')}>
              <button type="button" className="mk-mph" onClick={() => setBig(m)} aria-label={'Открыть ' + (m.taskName || m.name || 'материал')}>
                {m.kind === 'video' ? <video src={m.url} muted preload="metadata" onError={() => setBad(bad.concat([m.url]))} /> : <img src={m.url} alt={m.name || ''} loading="lazy" onError={() => setBad(bad.concat([m.url]))} />}
                {m.kind === 'video' && <span className="mk-play" aria-hidden="true">▶</span>}
                {m.deal && m.deal.on && m.deal.steps.length > 0 && <span className="mk-flag">Для сделок</span>}
              </button>
              <label className="mk-ck" title="Выбрать"><input type="checkbox" checked={on} onChange={() => toggle(m)} aria-label={'Выбрать ' + (m.taskName || m.name || 'файл')} /></label>
              <div className="mk-mtx">
                <div className="t" title={m.taskName || m.name}>{m.taskName || m.name || 'Без названия'}</div>
                <div className="lab">{short(m.obj)} · {MEDIA_SRC[m.source]}{m.at ? ', ' + dr(m.at) : ''}</div>
                <div className="mk-mrow">{m.archiveOnly ? <span className="pill-d">Только архив</span> : <Cons c={m.consent} />}
                  <a className="cv-arrow-btn" href={m.url} download={m.name || ''} target="_blank" rel="noopener noreferrer">Скачать</a></div>
                {m.mediaId && m.kind === 'video' && <label className="mk-tg" title="Видео появится в ленте «Новое на объекте» у клиента; привязанное к работе — после её приёмки"><input type="checkbox" checked={!!m.clientVisible} onChange={(x) => run(() => P.setSmmClientVisible(m.pid, m.mediaId, x.target.checked, actor(me)))} />Показать клиенту</label>}
                {m.mediaId && !m.archiveOnly && <DealUse m={m} me={me} run={run} />}
              </div>
            </div>);
        })}</div> : <div className="note-s" style={{ marginTop: 18 }}><span>Материалов пока нет — они появятся после съёмок, сдачи работ или загрузки.</span></div>}
        {picked.length > 0 && <div className="pz-bat">
          <span className="t">Выбрано {picked.length}{picked.length > pub.length ? ' · ' + (picked.length - pub.length) + ' только архив — в пост не попадут' : ''}</span>
          <button type="button" className="btn-l" onClick={download}>Скачать выбранные</button>
          {C && <select className="pz-in mk-sel" value={to} onChange={(x) => setTo(x.target.value)} aria-label="Куда добавить"><option value="">В новый пост</option>{open4post.map((p) => <option key={p.id} value={p.id}>В пост «{p.title}»</option>)}</select>}
          {C && <button type="button" className="btn-k" disabled={!pub.length} onClick={toPost}>В пост · {pub.length}</button>}
          <button type="button" className="btn-l" onClick={() => setSel([])}>Снять выбор</button>
        </div>}
        <section className="dz-sec"><div className="t">Загрузить материал</div>
          <div className="pz-row">
            <select className="pz-in mk-sel" value={upPid} onChange={(x) => { setUpPid(x.target.value); setUpTask(''); }} aria-label="Объект загрузки"><option value="">Объект</option>{d.consent.map((p) => <option key={p.pid} value={p.pid}>{p.obj}</option>)}</select>
            <select className="pz-in mk-sel" value={upTask} disabled={!upProj} onChange={(x) => setUpTask(x.target.value)} aria-label="Работа"><option value="">Без привязки к работе</option>{upTasks.map((t) => <option key={t.taskId} value={t.taskId}>{t.name}</option>)}</select>
            <input ref={fileRef} type="file" accept="image/*,video/*" multiple hidden onChange={onFiles} />
            <button type="button" className="btn-k" disabled={!upPid || busy} onClick={() => fileRef.current && fileRef.current.click()}>{busy ? 'Загрузка…' : 'Выбрать файлы'}</button>
          </div></section>
        {big && <div className="mk-lb" role="dialog" aria-label="Просмотр" onClick={() => setBig(null)}>
          {big.kind === 'video' ? <video src={big.url} controls autoPlay onClick={(x) => x.stopPropagation()} /> : <img src={big.url} alt={big.name || ''} />}</div>}
      </Modal>);
  }

/* ───── согласие клиентов ───── */
  function ConsentModal({ me, d, close }) {
    const [run, e, ok] = useRun();
    const rows = d.consent.slice().sort((a, b) => (b.open - a.open) || a.obj.localeCompare(b.obj));
    return (
      <Modal size="wide" title="Согласие клиентов" sub="что можно публиковать · уровень выбирает клиент в своём кабинете" onClose={close}>
        <div className="pz-meta">{['public', 'anonymous', 'none'].map((l) => <div key={l}><dt>{MV.CONSENT_L[l]}</dt><dd>{d.f.consent[l] || 0}</dd></div>)}<div><dt>Запрошено, ждём ответа</dt><dd>{d.f.asked}</dd></div></div>
        {err(e)}{okNote(ok)}
        {rows.length ? <div className="mg-rows" style={{ marginTop: 12 }}>{rows.map((p) => (
          <div key={p.pid} className="r"><span className="tx"><span className="t">{p.obj}</span>
            <span className="lab">{p.smm} SMM-{plural(p.smm, 'работа', 'работы', 'работ')}{p.open ? ' · ' + p.open + ' ещё можно снять' : ''}{p.asked ? ' · запрошено ' + dr(p.askedAt) : p.answeredAt ? ' · ответил ' + dr(p.answeredAt) : ''}</span></span>
            <Cons c={p.consent} />
            {p.consent !== 'public' && (p.canAsk ? <button type="button" className="btn-k" onClick={() => run(() => P.requestMarketingConsent(p.pid, actor(me)), 'Запрос отправлен клиенту: «' + p.obj + '»')}>Запросить согласие</button>
              : <span className="lab">ждём ответа</span>)}
          </div>))}</div> : <div className="note-s" style={{ marginTop: 18 }}><span>Проектов пока нет.</span></div>}
        <div className="lab" style={{ marginTop: 12 }}>Проекты без согласия видны как архив: окна и выезды планировать можно, публиковать — нельзя. Повторный запрос — не раньше чем через 7 дней.</div>
      </Modal>);
  }

/* ───── чаты ───── */
  function Media({ m }) {
    const kind = m.kind || (/\.(mp4|mov|webm)(\?|$)/i.test(m.url) ? 'video' : /\.(png|jpe?g|gif|webp|avif)(\?|$)/i.test(m.url) || /^data:image/.test(m.url) ? 'image' : 'file');
    if (kind === 'video') return <video src={m.url} controls preload="metadata" playsInline style={{ maxWidth: '100%', borderRadius: 12 }} />;
    if (kind === 'image' || kind === 'photo') return <img src={m.url} alt={m.name || ''} />;
    return <a className="pill-n" href={m.url} target="_blank" rel="noreferrer">{m.name || 'Вложение'}</a>;
  }
  function ChatModal({ d, sel, open, close, me }) {
    const [src0, pid0, tid0] = (sel || '').split(':');
    const cur = d.chats.find((c) => (!src0 || c.src === src0) && c.pid === pid0 && (!tid0 || c.id === tid0)) || d.chats[0] || null;
    const [txt, setTxt] = React.useState('');
    const DC = window.DealChat;
    const thread = !cur ? null : cur.src === 'deal' ? (DC ? DC.load(cur.pid).threads.find((t) => t.id === cur.id) : null) : ((P.get(cur.pid) || {}).chat || { threads: [] }).threads.find((t) => t.id === cur.id);
    React.useEffect(() => { if (cur && cur.src === 'deal' && DC && DC.markRead && cur.isNew) DC.markRead(cur.pid, cur.id, 'marketing'); }, [cur && cur.pid, cur && cur.id]);
    const send = () => {
      if (!txt.trim() || !thread) return;
      if (cur.src === 'deal') DC.send(cur.pid, thread.id, { from: 'marketing', name: me.name, t: txt.trim() }); else P.chatSend(cur.pid, thread.id, { from: 'marketing', t: txt.trim() });
      setTxt('');
    };
    return (
      <Modal size="wide" title="Чаты" sub="треды по SMM-работам и сделкам: маркетолог, прораб, исполнитель, менеджер" onClose={close}>
        <div className="lw-chat">
          <div className="lw-chl">{d.chats.map((c) => (
            <button type="button" key={c.src + c.pid + c.id} className={'lw-chr' + (cur && c.src === cur.src && c.pid === cur.pid && c.id === cur.id ? ' on' : '') + (c.isNew ? ' is-new' : '')} onClick={() => open('chat=' + c.src + ':' + c.pid + ':' + c.id)}>
              <span className="t">{short(c.obj)}<span className="lab"> · {c.title}</span></span><span className="lab">{c.who ? c.who + ': ' : ''}{c.text}</span><span className="tm lab">{when(c.at)}</span></button>))}</div>
          <div className="lw-chv">{thread ? <React.Fragment>
            <div className="lw-chh"><b>{cur.obj}</b><span className="lab">{thread.members.filter((m) => m !== 'marketing').map((m) => MV.RU[m] || m).join(', ')}</span></div>
            <div className="lw-msgs cv-scroll">{thread.msgs.map((m) => (
              <div key={m.id} className={'lw-msg' + (m.from === 'marketing' ? ' mine' : '')}><span className="lab">{MV.RU[m.from] || m.from} · {when(m.at)}</span>
                {m.t ? <span className="b">{m.t}</span> : null}{m.media && m.media.url ? <Media m={m.media} /> : null}</div>))}</div>
            <div className="lw-send"><input value={txt} onChange={(e) => setTxt(e.target.value)} placeholder="Написать" aria-label="Сообщение" onKeyDown={(e) => { if (e.key === 'Enter') send(); }} /><button type="button" className="lw-btn-k" disabled={!txt.trim()} onClick={send}>Отправить</button></div>
          </React.Fragment> : <div className="empty">Переписки пока нет. Нажмите «Обсудить» у работы или выезда — откроется тред с прорабом.</div>}</div>
        </div>
      </Modal>);
  }

/* ───── данные и маршрутизация окон ───── */
  function collect() {
    const windows = MV.windows();
    const d = { windows, shoots: MV.shoots(), posts: MV.posts(), consent: MV.consent(windows), media: MV.media(), chats: MV.chats() };
    d.f = MV.facts(d);
    return d;
  }
  function App() {
    useStore();
    const me = useMe();
    const [modal, open, close] = useHash();
    // выезд завершён → пост из «съёмки» в «монтаж» (как прежний контент-план): при открытии и после каждого изменения проектов
    React.useEffect(() => {
      const rec = () => { try { if (window.ContentPlan) window.ContentPlan.reconcile(); } catch (e) { /* план пуст */ } };
      rec();
      return P && P.subscribe ? P.subscribe(rec) : undefined;
    }, []);
    if (!MV) return <div className="cv-page"><div className="empty">Кабинет не загрузился. Обновите страницу.</div></div>;
    if (me.deny) return <W.Denied why={me.deny} />;
    const d = collect();
    const arg = (k) => (modal.indexOf(k + '=') === 0 ? modal.slice(k.length + 1) : null);
    const has = (k) => modal === k || arg(k) != null;
    const zone = has('windows') || has('win') ? 'wins' : has('shoots') || has('shoot') ? 'shoots' : has('plan') || has('post') ? 'plan' : has('media') ? 'media' : has('chat') ? 'chat' : has('consent') ? 'home' : '';
    const NAMES = { wins: 'Раздел «Окна съёмок»', shoots: 'Раздел «Выезды»', plan: 'Раздел «Контент-план»', media: 'Раздел «Медиатека»', chat: 'Раздел «Чаты»', home: 'Согласие клиентов' };
    const ok = zone ? me[zone] : true;
    return (
      <React.Fragment>
        {me.home ? <Home me={me} d={d} open={open} /> : <W.Denied title="Главная закрыта" why="Главная кабинета не входит в выданный доступ — открытые вам разделы работают по своим ссылкам." />}
        {zone && !ok && <W.Closed what={NAMES[zone]} onClose={close} />}
        {ok && has('windows') && <WindowsModal key={modal} me={me} d={d} sel={arg('windows')} open={open} close={close} />}
        {ok && arg('win') && <WindowsModal key={modal} me={me} d={d} one={arg('win')} open={open} close={close} />}
        {ok && modal === 'shoots' && <ShootsModal me={me} d={d} open={open} close={close} />}
        {ok && arg('shoot') && <ShootModal key={arg('shoot')} me={me} d={d} arg={arg('shoot')} open={open} close={close} />}
        {ok && has('plan') && <PlanModal key={modal} me={me} d={d} sel={arg('plan')} open={open} close={close} />}
        {ok && arg('post') && <PostModal key={arg('post')} me={me} id={arg('post')} open={open} close={close} />}
        {ok && modal === 'media' && <MediaModal me={me} d={d} open={open} close={close} />}
        {ok && modal === 'consent' && <ConsentModal me={me} d={d} close={close} />}
        {ok && has('chat') && <ChatModal d={d} sel={arg('chat')} open={open} close={close} me={me} />}
      </React.Fragment>);
  }

window.MarketingV2 = { App, collect, myInbox };
  if (!window.__MARKETING_V2_NO_MOUNT) ReactDOM.createRoot(document.getElementById('root')).render(<App />);
})();

{greeting()}{first ? ', ' + first : ''}

Свежие материалы