// CTox EAD — recreations of the real CTox screens, in Synvia green. // Each screen is a pure component; BeatScreen animates cursor + annotations. // Conferido contra a plataforma real (ctox.io) em 06/08/2026 — ver telas-reais-ctox/. // ── Wizard stepper (Laboratório → Amostra) — igual ao real com treinamento OK (7 etapas). // Obs.: conta SEM treinamento de aptidão concluído vê um wizard reduzido de 5 etapas. const WIZ = ['Laboratório', 'Coletor', 'Finalidade', 'Doador', 'Pagamento', 'Testemunha', 'Amostra']; function WizardStepper({ active = 3 }) { return (
{WIZ.map((label, i) => { const n = i + 1; const done = n < active, cur = n === active; return (
{done ? ( ) : {n}}
{label}
{i < WIZ.length - 1 && (
)} ); })}
); } // ── Circular option button (Finalidade / Pagamento) ─────────────────────── function CircleOption({ icon, label, selected, pulse }) { return (
{icon}
{label}
); } const SCR_I = { car: ( ), case: ( ), dots: ( ), doc: ( ), card: ( ), barcode: ( ), cash: ( ), pix: ( ), dots3v: ( ), }; // ── Status chip ──────────────────────────────────────────────────────────── const STATUS_COLORS = { 'Aguardando Envio': { bg: '#FFF1CC', fg: '#7A5A05' }, 'Aguardando Recebimento': { bg: '#E4EEF7', fg: '#1D4E76' }, 'Em Triagem': { bg: '#E7F1EC', fg: '#1C4137' }, 'Amostra Recebida': { bg: '#EDE9F7', fg: '#40307A' }, 'Aguardando Confirmatório':{ bg: '#FFE6D4', fg: '#8A4212' }, 'Em Confirmatório': { bg: '#FFDCC2', fg: '#7A3A0C' }, 'Finalizado': { bg: '#DFF3E4', fg: '#14672F' }, 'Recoleta': { bg: '#FBDDDD', fg: '#8C1D1D' }, 'Aguardando envio': { bg: '#FFF1CC', fg: '#7A5A05' }, 'Enviado': { bg: '#E1EBFA', fg: '#1D4E76' }, 'Recebido': { bg: '#D9F2DE', fg: '#1F7A38' }, }; function StatusChip({ s }) { const c = STATUS_COLORS[s] || { bg: '#EEE', fg: '#444' }; return ( {s} ); } // ════════════════════════════════════════════════════════════════════════════ // SCREEN: Lista de Coletas // ════════════════════════════════════════════════════════════════════════════ // Formato real: código numérico de 8 dígitos, sem prefixo (ex.: 76536298). // Colunas reais: Código, Situação, Laboratório, Coletor, Doador, Data da coleta, Recebido Em, Ações. const COLETAS_ROWS = [ ['76536291', 'Finalizado', 'LAB EXEMPLO - COTIA', 'Marcos R. Lima', 'Ana Paula Ferreira', '29/04/2026 - 15:43', '30/04/2026 - 09:12'], ['76536292', 'Em Confirmatório', 'LAB EXEMPLO - COTIA', 'Marcos R. Lima', 'Bruno Carvalho', '29/04/2026 - 15:43', '30/04/2026 - 09:12'], ['76536293', 'Aguardando Confirmatório', 'LAB EXEMPLO - COTIA', 'Juliana Prado', 'Carla Menezes', '29/04/2026 - 14:10', '30/04/2026 - 09:12'], ['76536294', 'Em Triagem', 'LAB EXEMPLO - COTIA', 'Juliana Prado', 'Diego Nascimento', '29/04/2026 - 11:22', '30/04/2026 - 09:12'], ['76536295', 'Aguardando Recebimento', 'LAB EXEMPLO - COTIA', 'Marcos R. Lima', 'Eduardo Batista', '28/04/2026 - 17:05', '-'], ['76536296', 'Aguardando Envio', 'LAB EXEMPLO - COTIA', 'Juliana Prado', 'Fernanda Rocha', '28/04/2026 - 16:48', '-'], ]; function ScreenColetas({ tab = 'Coletas', revealRows = 6, highlightRow = -1 }) { return (
{I.bell}
}> {/* Tabs */}
{['Coletas', 'Recoletas'].map((tb) => (
{tb}
))}
Lista de Coletas
{/* Filters */}
{[['Filtro', 'Código Amostra'], ['', 'Código da amostra'], ['Coletor', 'Todos'], ['Finalidade', 'Todas']].map((f, i) => (
{f[0] &&
{f[0]}
}
{i === 1 && {I.search}} {f[1]}
))}
{/* Table — na tela real a Situação aparece como texto simples, sem chip colorido */}
{['Código da amostra', 'Situação da Análise', 'Laboratório', 'Coletor', 'Doador', 'Data da coleta', 'Recebido Em', 'Ações'].map((h) => (
{h}
))} {COLETAS_ROWS.slice(0, revealRows).map((r, ri) => ( {[ {r[0]}, r[1], r[2], r[3], r[4], {r[5]}, {r[6]}, {SCR_I.dots3v}, ].map((cell, ci) => (
{cell}
))} ))}
); } // ════════════════════════════════════════════════════════════════════════════ // SCREEN: Nova Coleta — Finalidade (etapa 3 do wizard real) // ════════════════════════════════════════════════════════════════════════════ function ScreenFinalidade({ selected = null, resp = '', typing = false, voucher = 'Não' }) { const opts = [ { id: 'CNH', icon: SCR_I.car }, { id: 'CLT', icon: SCR_I.case }, { id: 'CLT + CNH', icon: SCR_I.car }, { id: 'Outro', icon: SCR_I.dots }, { id: 'Concurso', icon: SCR_I.doc }, ]; return (
Finalidade
Data e Hora do atendimento *
29/04/2026 15:56
Profissional responsável pelo atendimento
{resp} {typing && }
O condutor possui vale-exame?
{['Sim', 'Não'].map((o) => (
{voucher === o && } {o}
))}
{opts.map((o) => )}
); } // ════════════════════════════════════════════════════════════════════════════ // SCREEN: Nova Coleta — Pagamento (etapa 5 do wizard real) // ════════════════════════════════════════════════════════════════════════════ function ScreenPagamento({ selected = null }) { const opts = [ { id: 'Cartão', icon: SCR_I.card }, { id: 'Boleto', icon: SCR_I.barcode }, { id: 'Dinheiro', icon: SCR_I.cash }, { id: 'Pix', icon: SCR_I.pix }, ]; return (
Pagamento
Valor Total**
R$ 249,90
**Valor máximo: R$350,00
Forma de Pagamento
{opts.map((o) => )}
{['VOLTAR', 'PRÓXIMO'].map((b, i) => (
{b}
))}
); } // ════════════════════════════════════════════════════════════════════════════ // SCREEN: Dashboard / Acompanhamento de Coletas // ════════════════════════════════════════════════════════════════════════════ function ScreenDashboard({ range = 'MÊS', grow = 1 }) { // Tela real: gráfico de LINHA/ÁREA com pontos e valores (não barras); anos de 2018 a 2026. const vals = [38, 52, 47, 61, 74, 58, 66, 82, 71, 90, 78, 64]; const months = ['Jan','Fev','Mar','Abr','Mai','Jun','Jul','Ago','Set','Out','Nov','Dez']; const W = 1240, H = 300, PADX = 34, TOP = 34, BASE = H - 40; const maxV = 90; const pts = vals.map((v, i) => ({ x: PADX + (i * (W - 2 * PADX)) / (vals.length - 1), y: BASE - (v / maxV) * (BASE - TOP) * grow, })); const line = pts.map((p, i) => `${i ? 'L' : 'M'}${p.x},${p.y}`).join(' '); const area = `${line} L${pts[pts.length - 1].x},${BASE} L${pts[0].x},${BASE} Z`; return ( {I.bell}}>
Resumo
{['2018','2019','2020','2021','2022','2023','2024','2025','2026'].map((y, i, arr) => (
{y}
))}
{[['Total','781'],['Máximo','90'],['Mínimo','38'],['Média','65']].map(([l, v]) => (
{l}
{v}
))}
{['ANO','MÊS','SEMANA','DIA'].map((r) => (
{r}
))}
{[0.25, 0.5, 0.75, 1].map((f) => ( ))} {pts.map((p, i) => ( ))} {grow > 0.85 && pts.map((p, i) => ( {vals[i]} ))} {pts.map((p, i) => ( {months[i]} ))}
); } // ════════════════════════════════════════════════════════════════════════════ // SCREEN: Pacotes Enviados (logística) // ════════════════════════════════════════════════════════════════════════════ // Formato real: código alfanumérico (BAG física, ex.: LP35FBZJ) ou numérico ("sem BAG"). // Colunas reais: Pacote, Status, Enviado em, Recebido em, Amostras Verificadas, Enviado Por, Sem pacote, Ações. const PACOTES = [ ['LP35FBZJ', 'Aguardando envio', '-', '-', '3 amostras', 'Juliana Prado', 'NÃO'], ['28R4D6BF', 'Aguardando envio', '-', '-', '4 amostras', 'Juliana Prado', 'NÃO'], ['47174673', 'Enviado', '29/04/2026 - 16:33', '-', '1 amostras', 'Marcos R. Lima', 'SIM'], ['UGHCI5LI', 'Recebido', '29/04/2026 - 10:38', '29/04/2026 - 10:38', '3 amostras', 'Marcos R. Lima', 'NÃO'], ['J2SELR27', 'Recebido', '28/04/2026 - 13:58', '28/04/2026 - 13:59', '5 amostras', 'Juliana Prado', 'NÃO'], ]; function ScreenPacotes({ highlightRow = -1 }) { return ( }>
Pacotes Enviados
{['Pesquisar por Pacote ou número de amostra', 'Situação do Pacote'].map((p) => (
{p}
))}
{['Pacote', 'Status', 'Enviado em', 'Recebido em', 'Amostras Verificadas', 'Enviado Por', 'Sem pacote', 'Ações'].map((h) => (
{h}
))} {PACOTES.map((r, ri) => ( {[ {r[0]}, , {r[2]}, {r[3]}, r[4], r[5], {r[6]}, {SCR_I.dots3v}, ].map((cell, ci) => (
{cell}
))} ))}
); } // ════════════════════════════════════════════════════════════════════════════ // BEAT: screen walkthrough (screen + cursor + caption) // ════════════════════════════════════════════════════════════════════════════ const SCREENS = { coletas: ScreenColetas, finalidade: ScreenFinalidade, pagamento: ScreenPagamento, dashboard: ScreenDashboard, pacotes: ScreenPacotes, }; function BeatScreen({ beat }) { const { localTime, duration } = useSprite(); const { opacity } = kitFade(localTime, duration, 0.35, 0.4); const Screen = SCREENS[beat.screen]; const props = typeof beat.props === 'function' ? beat.props(localTime) : (beat.props || {}); const cur = kitCursor(localTime, beat.cursor); return (
{beat.caption && ( )} {cur && }
); } Object.assign(window, { WizardStepper, CircleOption, SCR_I, StatusChip, SCREENS, BeatScreen, ScreenColetas, ScreenFinalidade, ScreenPagamento, ScreenDashboard, ScreenPacotes, });