/* FlowZ — shows-app.jsx Shell React (sem build, Babel transpila no navegador) do /shows. Fase 0 da migração pro padrão "React sem build" (ver /root/.claude/plans/humming-mixing-aho.md e CONTEXT.md): prova a mecânica do loader e organiza o app num componente React de verdade, mas o corpo das 3 abas (Shows/Agenda/Perfil) ainda é a MESMA marcação + lógica de antes, injetada tal qual via innerHTML (LegacyAppBridge) — decomposição real em componentes entra na Fase 1 (Perfil) e Fase 2 (Agenda). Toda a lógica (fetch, drag-reorder, swipe, configurações, etc.) mora em /shows-legacy.js, carregado ANTES deste arquivo como script clássico — as funções ficam em `window` de propósito, porque a marcação legada ainda referencia várias delas via onclick="fn()" inline, e o guard de autenticação (redirect pra /login/) já roda sozinho assim que shows-legacy.js carrega, sem precisar de nada daqui. */ const { useEffect, useRef, useState } = React; const PRE_APP_HTML = `

`; const HEADER_HTML = `

Shows

FlowZ

`; const AFTER_SHOWS_HTML = `

Workspace

Configurações

Gerencie sua conta, equipe, acessos e preferências do FlowZ.

⚡

FlowZ Produtor

—

Produtor Geral

Notificações

Permissões

Pedir ao sistema

EM BREVE

Central da IA

Configurar IA

Desativada

Equipe

Membros da equipe

Nomes e funções para hotel e voo

Links

Link da equipe

Logística, hotel e voo

Link do artista

Horários e ponto de encontro

Roteiro Compartilhado

Gerenciar acessos

Tokens individuais · device pinning · geo

Revogar todos os acessos

Invalida todos os links existentes

PWA

Buscar atualização

Forçar download da versão mais recente

Conta

Perfil do produtor

Nome, PINs e ponto de encontro

Redefinir senha

Enviar link para seu e-mail

Sair

Encerrar sessão neste dispositivo

Sobre

Versão

—

Desenvolvedor

Testar onboarding

Abre o wizard de boas-vindas

‹ Voltar Membros da Equipe + Adicionar

‹ Voltar Configurar IA

Status

Central da IA

Desativada

Número de logs

Esse número recebe os avisos quando algo dá errado ou os lembretes do sistema.

Grupos e números do bot

Nenhum grupo ou número selecionado

`; const POST_APP_HTML = ` `; const FLOATING_MODALS_HTML = `

Bem-vindo ao FlowZ!

Vamos começar com o básico. Esses nomes aparecem no app e nas páginas da equipe e do artista.

NOME DO ARTISTA

SEU NOME (PRODUTOR)

Assinatura encerrada

Sua assinatura foi cancelada. Renove para continuar acessando o FlowZ.

Configurações do produtor

Edite seu nome de exibição, os PINs de acesso e o ponto de encontro padrão.

Identificação

Nome do produtor

Nome do artista

PIN da equipe

PIN do artista

Ponto de encontro

Endereço padrão usado em novos shows

`; /* ── Fase 3a: aba Shows em React de verdade ────────────────────────── Tradução direta de render()/buildCard()/setSeg() (antes em shows-legacy.js) pra componentes React. Swipe-to-delete e drag-to-reorder (as duas IIFEs em shows-legacy.js) continuam INTOCADAS — operam no DOM que este componente renderiza, sem conflito, porque o React só re-renderiza a lista quando `shows`/`seg` mudam (evento 'flowz:shows-sync' ou ação local), nunca durante um arrasto. window._seg é mantido em sincronia pra armLP() (drag-reorder) continuar lendo o segmento certo. */ function ShowCard({ show, idx, past, onDelete }) { const d = window.parseLocalDate(show.date); if (!d && past) return null; const dayNum = d ? d.getDate() : '—'; const month = d ? window.MONTHS[d.getMonth()] : ''; const weekday = d ? window.DAYS[d.getDay()] : ''; const delay = Math.min(idx * 0.06 + 0.05, 0.55).toFixed(2); const venueDedup = (show.venue && show.venue.trim() !== (show.name || '').trim()) ? show.venue : null; const meta = [venueDedup, show.city].filter(Boolean).join(' · '); const remDone = (show.reminders || []).filter((r) => r.done).length; const matDone = (show.materials || []).filter((m) => m.checked).length; const done = remDone + matDone; const total = (show.reminders || []).length + (show.materials || []).length; const progress = total > 0 ? done / total : 0; const progColor = progress >= 1 ? '#34D399' : 'var(--purple)'; const meetingChip = !past && show.departureTimeMeetingShow; const showWx = !past && (show.city || show.venueAddress) && show.date; const pending = !show.logisticsFinalized && !past; return (

{ e.stopPropagation(); onDelete(show.id); }} > Apagar

{show.logisticsFinalized ? ( ) : null}

{show.time ? (

{show.time}

) : !past ? (

A definir horário do show

) : null} {meetingChip ? (

Encontro {show.departureTimeMeetingShow}

) : null} {total > 0 ? (

); } function ShowsSkeleton() { const delays = [0.05, 0.13, 0.21, 0.29]; return (

{delays.map((d, i) => (

))}

); } function ShowsEmpty({ isPast }) { return (

{isPast ? 'Nenhum show realizado' : 'Nenhum show agendado'}

{isPast ? 'Shows concluídos aparecem aqui.' : 'Adicione o primeiro show da agenda.'}

{!isPast ? ( ) : null}

); } function ShowsDownBanner() { const html = window.svcDownBannerHtml ? window.svcDownBannerHtml() : ''; return

; } function ShowsScreen() { const [shows, setShows] = useState(null); // null = ainda não carregou (skeleton) const [seg, setSegState] = useState('upcoming'); const [svcDown, setSvcDown] = useState(false); useEffect(() => { function onSync(e) { if (e.detail && e.detail.ok === false) { setSvcDown(true); return; } setSvcDown(false); setShows((window._allShows || []).slice()); } window.addEventListener('flowz:shows-sync', onSync); if (window._allShows && window._allShows.length) setShows(window._allShows.slice()); return () => window.removeEventListener('flowz:shows-sync', onSync); }, []); function setSeg(next) { window._seg = next; // drag-reorder (armLP em shows-legacy.js) lê esse global setSegState(next); } // qcSave() (quick-create, ainda legado até a Fase 3b) troca pra "Próximos" // depois de criar shows — expõe o setter pra ele conseguir chamar. useEffect(() => { window.setSeg = setSeg; return () => { delete window.setSeg; }; }); // Recalculado a cada render (sem useMemo de propósito): o drag-reorder // legado muta show.sortIndex nos MESMOS objetos que `shows` referencia, // sem trocar a referência do array (é assim que ele evita brigar com o // React durante o arrasto — ver Fase 3 do plano de migração). Um // useMemo com dependência [shows] ficaria com a ordenação em cache // desatualizada depois de um drag, e o próximo re-render por qualquer // outro motivo (ex: trocar de segmento) devolvia a lista pra ordem // antiga — o React reconciliava o DOM de volta, desfazendo o arrasto // visualmente mesmo com o servidor já persistido na ordem nova. Sem // memo, cada render já lê o sortIndex atual. Lista não tem // virtualização (não passa de ~100 itens hoje), custo é desprezível. const all = shows || []; const upcoming = all .filter((s) => !s.date || !window._showIsPast(s)) .sort((a, b) => { const da = a.date || '9999', db = b.date || '9999'; if (da !== db) return da < db ? -1 : 1; const sa = window._sortIdx(a), sb = window._sortIdx(b); if (sa !== sb) return sa - sb; return window._timeSortVal(a.time) - window._timeSortVal(b.time); }); const past = all .filter((s) => s.date && window._showIsPast(s)) .sort((a, b) => { if (a.date !== b.date) return a.date < b.date ? 1 : -1; return window._timeSortVal(b.time) - window._timeSortVal(a.time); }); const isPast = seg === 'past'; const list = isPast ? past : upcoming; useEffect(() => { const totalEl = document.getElementById('title-meta'); if (totalEl && shows) totalEl.textContent = shows.length + ' shows · ' + upcoming.length + ' agendados'; }, [shows, upcoming.length]); useEffect(() => { if (!isPast && list.length) window.loadAllWeather(list, 'swx-'); // eslint-disable-next-line }, [list, isPast]); async function handleDelete(id) { if (!window.confirm('Apagar este show?')) return; const token = window.getAuthToken(); const res = await fetch(window.SUPABASE_URL + '/rest/v1/shows?id=eq.' + id, { method: 'DELETE', headers: { apikey: window.SUPABASE_ANON, Authorization: 'Bearer ' + token }, }); if (res.ok) { const filtered = (window._allShows || []).filter((s) => s.id !== id); window._allShows = filtered; setShows(filtered.slice()); } else { window.showToast('Erro ao apagar show', 'danger'); } } let groups = null; if (!isPast) { let currentMonth = null; groups = []; list.forEach((s, i) => { const d = window.parseLocalDate(s.date); if (d) { const mKey = d.getFullYear() + '-' + d.getMonth(); if (mKey !== currentMonth) { currentMonth = mKey; groups.push({ type: 'hdr', key: 'hdr-' + mKey, label: window.MONTHS_FULL[d.getMonth()] + ' ' + d.getFullYear() }); } } groups.push({ type: 'card', key: String(s.id), show: s, idx: i }); }); } return (

Pré-produção

Pré-produção.

Carregando…

{svcDown ? ( ) : shows === null ? ( ) : list.length === 0 ? ( ) : (

{isPast ? (

Realizados

{list.map((s, i) => )} ) : ( groups.map((g) => g.type === 'hdr' ?

{g.label}

: ) )}

)}

); } /* ── Fase 3b: quick-create wizard em React de verdade ──────────────── Tradução de qcOpen/qcClose/qcNav/qcRenderCal/qcToggleDay/qcMaskTime/ qcSync/qcSave (removidos de shows-legacy.js) pra estado local. Sem geometria/gesto — forma pura, risco baixo. Helpers puros (qcUUID/qcYMD/qcHasShow/qcBuildShowData/qcFallbackName) continuam em shows-legacy.js, chamados via window.*. */ function QuickCreateDialog() { const [open, setOpen] = useState(false); const [month, setMonth] = useState(() => { const d = new Date(); return new Date(d.getFullYear(), d.getMonth(), 1); }); const [sel, setSel] = useState(() => new Set()); const [name, setName] = useState(''); const [time, setTime] = useState(''); const [saving, setSaving] = useState(false); const nameRef = useRef(null); useEffect(() => { window.qcOpen = function () { const now = new Date(); setMonth(new Date(now.getFullYear(), now.getMonth(), 1)); setSel(new Set()); setName(''); setTime(''); setSaving(false); setOpen(true); document.body.style.overflow = 'hidden'; setTimeout(() => { if (nameRef.current) nameRef.current.focus(); }, 340); }; return () => { delete window.qcOpen; }; }); function close() { setOpen(false); document.body.style.overflow = ''; } function nav(delta) { const next = new Date(month.getFullYear(), month.getMonth() + delta, 1); const floor = new Date(); floor.setDate(1); floor.setHours(0, 0, 0, 0); if (next < floor) return; setMonth(next); } function toggleDay(ymd) { setSel((prev) => { const next = new Set(prev); if (next.has(ymd)) next.delete(ymd); else next.add(ymd); return next; }); } function maskTime(raw) { let v = raw.replace(/\D/g, '').slice(0, 4); if (v.length >= 3) v = v.slice(0, 2) + ':' + v.slice(2); setTime(v); } async function save() { if (saving) return; const dates = Array.from(sel).sort(); if (!dates.length) return; const timeVal = /^\d{1,2}:\d{2}$/.test(time.trim()) ? time.trim() : ''; const userId = window.getUserId(); if (!userId) { window.showToast('Sessão expirada. Faça login novamente.', 'danger'); return; } setSaving(true); try { const token = (await window.getAuthTokenFresh()) || window.getAuthToken(); const now = new Date().toISOString(); const rows = dates.map((date) => { const id = window.qcUUID(); return { id: id, user_id: userId, data: Object.assign(window.qcBuildShowData(name.trim() || window.qcFallbackName(date), date, timeVal), { id: id, createdAt: now, updatedAt: now }), }; }); const res = await fetch(window.SUPABASE_URL + '/rest/v1/shows', { method: 'POST', headers: { apikey: window.SUPABASE_ANON, Authorization: 'Bearer ' + token, 'Content-Type': 'application/json', Prefer: 'return=minimal' }, body: JSON.stringify(rows), }); if (!res.ok) { let t = ''; try { t = await res.text(); } catch (e2) {} throw new Error('HTTP ' + res.status + (t ? ' — ' + t : '')); } close(); window.setSeg('upcoming'); await window.load(); window.showToast(rows.length > 1 ? rows.length + ' shows criados' : 'Show criado', 'success', name.trim()); } catch (e) { window.showToast('Erro ao criar', 'danger', e.message); } finally { setSaving(false); } } const y = month.getFullYear(), m = month.getMonth(); const startDow = new Date(y, m, 1).getDay(); const daysIn = new Date(y, m + 1, 0).getDate(); const today = new Date(); today.setHours(0, 0, 0, 0); const cells = []; for (let i = 0; i < startDow; i++) cells.push(

); for (let d = 1; d <= daysIn; d++) { const ymd = window.qcYMD(y, m, d); const dt = new Date(y, m, d); const isPast = dt < today; const isToday = dt.getTime() === today.getTime(); const hasShow = window.qcHasShow(ymd); const isSel = sel.has(ymd); let cls = 'qc-day'; if (isPast) cls += ' past'; if (isToday) cls += ' today'; if (hasShow) cls += ' has'; if (isSel) cls += ' sel'; cells.push(

toggleDay(ymd)}>{d}

); } const n = sel.size; const saveLabel = n > 1 ? 'Criar ' + n + ' shows' : 'Criar show'; if (!open) return null; return (

e.stopPropagation()} role="dialog" aria-modal="true" aria-label="Criar shows rápido">

Criação rápida

Novos shows

1Nome do show

setName(e.target.value)} />

2Datas {n ? n + (n > 1 ? ' datas' : ' data') : ''}

{window.MONTHS_FULL[m] + ' ' + y}

DomSegTerQuaQuiSexSáb

{cells}

3Horário

A definir

Deixe em branco ou informe o horário de todos os shows.

maskTime(e.target.value)} />

); } /* ── Fase 3c: modal de verificar logística em React de verdade ────── Tradução de logiOpen/logiClose/logiFilter/logiPick/logiChange/ logiSetType/logiCheckReady/logiOpenRoute/_logiState/_logiAddr (removidos de shows-legacy.js) pra estado local. Sem geometria/ gesto — forma pura, mesmo risco baixo da Fase 3b. _logiGeocodeCheck continua em shows-legacy.js (helper puro reusado via window.*). */ function logiAddr(entry) { const show = entry.show; if (entry.type === 'hotel') { return { full: show.hotelAddress || show.hotelName || '', fallback: (show.hotelName || '') + (show.city ? ', ' + show.city : '') }; } return { full: show.venueAddress || ((show.venue || '') + (show.city ? ', ' + show.city : '')), fallback: (show.venue || '') + (show.city ? ', ' + show.city : ''), }; } function LogiSlot({ n, label, state, query, touched, onQuery, onFocus, onPick, onChange, onSetType }) { const matches = React.useMemo(() => { const all = window._allShows || []; const q = (query || '').trim().toLowerCase(); const pool = q ? all.filter((s) => { if (!s.date) return false; const hay = [s.name, s.city, s.venue].filter(Boolean).join(' ').toLowerCase(); return hay.indexOf(q) !== -1; }) : all.filter((s) => !!s.date); return pool.sort((a, b) => (a.date < b.date ? -1 : 1)).slice(0, q ? 8 : 20); }, [query, state.show]); if (state.show) { const show = state.show; const d = window.parseLocalDate(show.date); const dLabel = d ? (d.getDate() + ' ' + window.MONTHS[d.getMonth()]) : ''; const hasHotel = !!(show.hasHotel && (show.hotelAddress || show.hotelName)); return (

{(show.name || 'Show') + (dLabel ? ' · ' + dLabel : '')}

); } return (

onQuery(e.target.value)} onFocus={onFocus} /> {touched && ( )}

); } function LogisticsDialog() { const [open, setOpen] = useState(false); const [slots, setSlots] = useState({ 1: { show: null, type: 'venue' }, 2: { show: null, type: 'venue' } }); const [queries, setQueries] = useState({ 1: '', 2: '' }); const [touched, setTouched] = useState({ 1: false, 2: false }); const [checking, setChecking] = useState(false); useEffect(() => { window.logiOpen = function () { setSlots({ 1: { show: null, type: 'venue' }, 2: { show: null, type: 'venue' } }); setQueries({ 1: '', 2: '' }); setTouched({ 1: false, 2: false }); setChecking(false); setOpen(true); document.body.style.overflow = 'hidden'; }; return () => { delete window.logiOpen; }; }); function close() { setOpen(false); document.body.style.overflow = ''; } function pick(n, show) { const hasHotel = !!(show.hasHotel && (show.hotelAddress || show.hotelName)); setSlots((prev) => ({ ...prev, [n]: { show, type: hasHotel ? prev[n].type : 'venue' } })); } function change(n) { setSlots((prev) => ({ ...prev, [n]: { show: null, type: 'venue' } })); setQueries((prev) => ({ ...prev, [n]: '' })); setTouched((prev) => ({ ...prev, [n]: false })); } function setType(n, type) { setSlots((prev) => ({ ...prev, [n]: { ...prev[n], type } })); } async function openRoute() { if (!slots[1].show || !slots[2].show || checking) return; setChecking(true); const a = logiAddr(slots[1]); const b = logiAddr(slots[2]); let origin = a.full, destination = b.full; try { if (a.full && a.fallback && a.full !== a.fallback) { const okA = await window._logiGeocodeCheck(a.full); if (!okA) origin = a.fallback; } if (b.full && b.fallback && b.full !== b.fallback) { const okB = await window._logiGeocodeCheck(b.full); if (!okB) destination = b.fallback; } } catch (e) {} setChecking(false); if (!origin || !destination) { window.showToast('Endereço não encontrado pra um dos pontos', 'danger'); return; } const url = 'https://www.google.com/maps/dir/?api=1&origin=' + encodeURIComponent(origin) + '&destination=' + encodeURIComponent(destination) + '&travelmode=driving'; window.open(url, '_blank'); close(); } if (!open) return null; const ready = !!(slots[1].show && slots[2].show); return (

e.stopPropagation()} role="dialog" aria-modal="true" aria-label="Verificar logística">

Logística

Verificar rota entre shows

1Ponto de partida

setQueries((p) => ({ ...p, 1: v }))} onFocus={() => setTouched((p) => ({ ...p, 1: true }))} onPick={(s) => pick(1, s)} onChange={() => change(1)} onSetType={(t) => setType(1, t)} />

2Destino

setQueries((p) => ({ ...p, 2: v }))} onFocus={() => setTouched((p) => ({ ...p, 2: true }))} onPick={(s) => pick(2, s)} onChange={() => change(2)} onSetType={(t) => setType(2, t)} />

); } function LegacyAppBridge() { const preAppRef = useRef(null); const headerRef = useRef(null); const afterShowsRef = useRef(null); const postAppRef = useRef(null); const modalsRef = useRef(null); const bootedRef = useRef(false); useEffect(() => { if (bootedRef.current) return; // StrictMode/dev double-invoke guard bootedRef.current = true; preAppRef.current.innerHTML = PRE_APP_HTML; headerRef.current.innerHTML = HEADER_HTML; afterShowsRef.current.innerHTML = AFTER_SHOWS_HTML; postAppRef.current.innerHTML = POST_APP_HTML; modalsRef.current.innerHTML = FLOATING_MODALS_HTML; if (document.documentElement.classList.contains('sidebar-collapsed')) { var collapseBtn = document.querySelector('.sb-collapse'); if (collapseBtn) { collapseBtn.setAttribute('aria-label', 'Expandir menu'); collapseBtn.setAttribute('title', 'Expandir menu'); } } // Sequência de bootstrap que antes rodava no fim do