// Testing Ads — Pipeline kanban (interactif) const { Avatar, StatusPill, FilterPill, Btn, Thumb, PromoCode, Card } = window.WF; const { KillModal, PushMetaModal } = window.TA_MODALS; const { TA_FORMAT, TA_STATUS_META } = window; // ——— En-tête de colonne ——— function ColHeader({ status, count, owner, accent }) { const s = TA_STATUS_META[status]; return (
{s.emoji} {s.label} {count} {owner && {owner}}
); } // ——— Carte vidéo (visuelle, V.B) ——— function VideoCard({ video, onOpen, onAction, onScale, onKill, dispatch, isDragging, setDragId, dragId }) { const inf = window.TA_INFLUENCERS[video.inf]; const stale = TA_FORMAT.isStale(video, 4); const ageLabel = TA_FORMAT.ageShort(video.receivedHours); // Action contextuelle selon statut const renderAction = () => { if (video.status === 'toEdit') { return (
{ e.stopPropagation(); onAction('take', video); }}>Je prends { e.stopPropagation(); onAction('downloadKit', video); }} title="Kit zip">↓
); } if (video.status === 'editing') { return ( { e.stopPropagation(); onAction('upload', video); }}> ↑ Déposer le final ); } if (video.status === 'edited') { return ( { e.stopPropagation(); onAction('push', video); }}> 📡 Pousser en testing ); } if (video.status === 'testing') { return (
{ e.stopPropagation(); onKill(video); }}>✗ Kill { e.stopPropagation(); onScale(video); }}>✓ Scale
); } return null; }; return ( { setDragId(video.id); e.dataTransfer.effectAllowed = 'move'; e.dataTransfer.setData('text/plain', video.id); }} onDragEnd={() => setDragId(null)} onClick={() => onOpen?.(video)} style={{ padding: 8, marginBottom: 10, cursor: 'pointer', borderColor: stale ? '#fda4a4' : 'var(--border)', opacity: isDragging ? 0.4 : 1, transition: 'box-shadow 120ms ease', }} onMouseEnter={(e) => e.currentTarget.style.boxShadow = '0 4px 16px rgba(0,0,0,0.06)'} onMouseLeave={(e) => e.currentTarget.style.boxShadow = 'none'} >
{stale ? ( ⚠ {ageLabel} ) : ( {ageLabel} )}
{video.status === 'editing' && (
Katlyn · {video.takenHoursAgo}h
)}
{inf.handle}
{inf.name}
{video.kpi && ( J{video.daysLive} )}
{video.kpi && (
CTR {video.kpi.ctr} CPA {video.kpi.cpa} ROAS {video.kpi.roas}
)} {video.status === 'editing' && (
🎬 katlyn-{inf.code}-v2.mp4
)} {video.status === 'edited' && video.finalFile && (
✓ {video.finalFile} {video.finalSize}
)} {renderAction() &&
{renderAction()}
}
); } // ——— État vide d'une colonne ——— function EmptyColumn({ status }) { const s = TA_STATUS_META[status]; return (
{s.emoji}
Aucune vidéo {s.label.toLowerCase()}
{s.description}
); } // ——— Bandeau ENTRANTS (Source + Kit, auto) ——— function IncomingStrip({ videos }) { const sourceV = videos.filter(v => v.status === 'source'); const kitV = videos.filter(v => v.status === 'kit'); const all = [...sourceV, ...kitV]; return (
Entrants · auto transcription + extraction hooks
{all.length === 0 ? (
Aucune vidéo entrante · prochaine arrivée hebdo estimée vendredi
) : all.map((v) => { const inf = window.TA_INFLUENCERS[v.inf]; const isKit = v.status === 'kit'; return (
{isKit && (
)}
{inf.handle}
{isKit ? `⚙️ kit · ${Math.round(v.kitProgress * 100)}%` : '📥 reçue · à l\'instant'}
); })}
dernière entrée · il y a 12 min ); } // ——— Pipeline (kanban) ——— function PipelinePage({ state, dispatch, onOpenVideo, onOpenInfluencer }) { const [dragId, setDragId] = React.useState(null); const [hoverCol, setHoverCol] = React.useState(null); const [killTarget, setKillTarget] = React.useState(null); const [pushTarget, setPushTarget] = React.useState(null); // {video, mode} const fileInputRef = React.useRef(null); const [uploadingFor, setUploadingFor] = React.useState(null); const [uploadProgress, setUploadProgress] = React.useState(0); // — Filtre statut courant (chips top) const [filter, setFilter] = React.useState('all'); const visible = state.videos.filter(v => filter === 'all' || v.status === filter); // — Mouvement d'une carte const handleDrop = (newStatus, e) => { e.preventDefault(); setHoverCol(null); const id = e.dataTransfer.getData('text/plain') || dragId; if (!id) return; const v = state.videos.find(x => x.id === id); if (!v || v.status === newStatus) return; // Drop sur verdict → ouvre modale appropriée if (newStatus === 'killed') return setKillTarget(v); if (newStatus === 'scaled') return setPushTarget({ video: v, mode: 'scale' }); if (newStatus === 'testing' && v.status === 'edited') return setPushTarget({ video: v, mode: 'push' }); dispatch({ type: 'moveTo', id, status: newStatus }); }; // — Action contextuelle déclenchée par bouton const handleAction = (action, video) => { if (action === 'take') dispatch({ type: 'moveTo', id: video.id, status: 'editing', extra: { takenBy: 'Katlyn', takenHoursAgo: 0 } }); if (action === 'downloadKit') alert('Téléchargement du kit ' + video.id + ' (.zip · 47Mo) — simulé'); if (action === 'upload') { setUploadingFor(video.id); fileInputRef.current?.click(); } if (action === 'push') setPushTarget({ video, mode: 'push' }); }; // Simule upload progressif const handleFile = (e) => { const f = e.target.files?.[0]; if (!f || !uploadingFor) return; setUploadProgress(0); const tick = setInterval(() => { setUploadProgress(p => { const n = Math.min(1, p + 0.12); if (n >= 1) { clearInterval(tick); dispatch({ type: 'moveTo', id: uploadingFor, status: 'edited', extra: { finalFile: f.name, finalSize: (f.size / 1024 / 1024).toFixed(0) + 'Mo' } }); setUploadingFor(null); } return n; }); }, 180); e.target.value = ''; }; const columns = ['toEdit', 'editing', 'edited', 'testing']; const counts = Object.fromEntries(window.TA_PIPELINE_ORDER.map(s => [s, state.videos.filter(v => v.status === s).length])); return ( <> {/* Filtres en pills (top) */}
!['scaled','killed'].includes(v.status)).length}> setFilter('all')}>Toutes {['source','kit','toEdit','editing','edited','testing','scaled','killed'].map(s => { const m = TA_STATUS_META[s]; return ( setFilter(s)}> {m.short} ); })}
{/* Bandeau entrants */} {/* Upload en cours overlay */} {uploadingFor && uploadProgress > 0 && (
↑ Upload en cours…
{Math.round(uploadProgress * 100)}%
)} {/* Hidden input pour drop final */} {/* 4 colonnes humaines */}
{columns.map(status => { const items = state.videos.filter(v => v.status === status); const ownerLabel = { toEdit: '🪡 Katlyn', editing: '✂ WIP', edited: '🚀 Benjamin', testing: '📡 Live Meta' }[status]; return (
{ e.preventDefault(); setHoverCol(status); }} onDragLeave={() => setHoverCol(h => h === status ? null : h)} onDrop={(e) => handleDrop(status, e)} className={hoverCol === status ? 'drop-target-active' : ''} style={{ background: 'var(--paper-2)', borderRadius: 10, padding: '12px 10px', minHeight: 200, display: 'flex', flexDirection: 'column', }}>
{items.length === 0 ? : items.map(v => ( setPushTarget({ video, mode: 'scale' })} onKill={(video) => setKillTarget(video)} isDragging={dragId === v.id} setDragId={setDragId} dragId={dragId} /> )) }
); })}
{/* Verdict scoreboard */}
e.preventDefault()} onDrop={(e) => { // Sur le scoreboard, on déduit selon X position : moitié gauche = scale, droite = kill const rect = e.currentTarget.getBoundingClientRect(); const isKill = (e.clientX - rect.left) > rect.width / 2; handleDrop(isKill ? 'killed' : 'scaled', e); }} style={{ marginTop: 14 }} > Verdict · 7j
{counts.scaled + 11} scalées 🚀
{counts.killed + 27} killées ❌
scale rate 30% astuce · glisse une ad ici pour scaler (gauche) ou killer (droite)
{/* Modales */} setKillTarget(null)} onConfirm={({ reason, comment }) => { dispatch({ type: 'moveTo', id: killTarget.id, status: 'killed', extra: { killReason: reason, killNote: comment } }); setKillTarget(null); }} /> setPushTarget(null)} onConfirm={() => { if (pushTarget.mode === 'push') { dispatch({ type: 'moveTo', id: pushTarget.video.id, status: 'testing', extra: { metaCampaign: '6543' + Math.floor(Math.random()*1000), daysLive: 0, kpi: { ctr: '—', cpa: '—', roas: '—', spend: '0€', impressions: '0' } } }); } else { dispatch({ type: 'moveTo', id: pushTarget.video.id, status: 'scaled' }); } setPushTarget(null); }} /> ); } window.TA_PIPELINE = { PipelinePage, VideoCard };