// comanda-produse.jsx — cele doua foi care ies din fila „Produse" a unei campanii. // // Sunt campanii in care creatorii nu primesc bani, ci produse. Pana acum, cine // facea campania completa produsele o data in Anexa 1 a contractului si apoi tinea // minte pe hartie ce produs merge la cine. Din aceleasi date ies aici doua foi: // // fel="brand" — FISA DE COMANDA. Ce sa ne trimita brandul si cate bucati. // Numele creatorilor apar (sunt oricum in Anexa 1 a contractului), // dar NICIO adresa si NICIUN telefon. // fel="intern" — LISTA DE DISTRIBUTIE. Cine primeste ce pachet, cu adresa si // telefonul, pentru cine ambaleaza la sediu. // // De ce sunt doua si nu una: produsele vin toate la sediul agentiei si le // distribuim noi. Daca brandul ar livra direct la creatori, ar ramane cu adresele // si telefoanele lor si i-ar putea contacta pe viitor fara noi. Impartirea in doua // foi nu e o preferinta de asezare — e motivul pentru care exista fisa. // // Printarea: acelasi mecanism ca la rapoarte (vezi campaign-report.jsx). Foaia se // deseneaza intr-un portal lipit de si refoloseste clasele // .report-print-root / .report-toolbar / .report-sheet, deci regulile de @media // print din styles.css se aplica aproape fara nimic in plus — singura adaugare e // blocul .cp-tabel-lung de la coada lui styles.css, pentru tabelul care poate // depasi o pagina. // // Expune: // window.ComandaProduseFoaie({ campaign, brand, creators, influencers, fel, onClose }) const { useState: useStateCP, useEffect: useEffectCP } = React; function cpFmt(v) { if (v == null || v === '' || Number.isNaN(Number(v))) return '—'; return Number(v).toLocaleString('ro-RO'); } function cpData(d) { if (!d) return '—'; const x = new Date(String(d).length === 10 ? d + 'T00:00:00' : d); return isNaN(x.getTime()) ? '—' : x.toLocaleDateString('ro-RO'); } function cpGol(p) { return !String(p.cod || '').trim() && !String(p.denumire || '').trim(); } // Adresa de livrare, pe linii separate. Un pachet se ambaleaza citind o eticheta, // nu un paragraf, deci nu le lipim cu virgule intr-un singur rand. function cpAdresa(inf) { if (!inf) return []; const oras = [inf.city, inf.county].filter(x => x && String(x).trim()).join(', '); return [inf.address, oras, inf.country].filter(x => x && String(x).trim()); } // „Are adresa" inseamna are STRADA, nu are orice. Aproape toti creatorii au trecut // orasul si tara din formularul de inscriere, deci o verificare pe lista de linii // ar spune ca toata lumea poate primi pachetul — si abia in ziua ambalarii s-ar // vedea ca de fapt nu stim unde sa-l trimitem. function cpAreStrada(inf) { return !!inf && !!String(inf.address || '').trim(); } // Cat se comanda in total din fiecare produs. // // Gruparea se face pe COD, nu pe (cod + denumire). Daca doi colegi scriu acelasi // cod cu denumiri putin diferite — „Ser 30ml" si „Ser hidratant 30 ml" — o grupare // pe amandoua ar scoate doua randuri in comanda si brandul ar trimite dublu. // Cand codul lipseste, cade inapoi pe denumire, ca randul sa nu se piarda. function cpTotaluri(produse) { const dupaCheie = new Map(); produse.forEach(p => { if (cpGol(p)) return; const cod = String(p.cod || '').trim(); const den = String(p.denumire || '').trim(); const cheie = (cod || den).toLowerCase(); if (!dupaCheie.has(cheie)) dupaCheie.set(cheie, { cod: cod, denumiri: new Set(), cantitate: 0, creatori: new Set() }); const x = dupaCheie.get(cheie); x.cantitate += Number(p.cantitate) || 0; x.creatori.add(p.campaign_creator_id); if (!x.cod && cod) x.cod = cod; // TOATE denumirile distincte ale codului, nu doar prima intalnita. Daca brandul // refoloseste un cod pentru doua produse, a doua denumire trebuie sa apara si // ea — altfel produsul dispare din comanda si nu-l mai trimite nimeni. if (den) x.denumiri.add(den); }); return Array.from(dupaCheie.values()) .map(x => Object.assign({}, x, { denumire: Array.from(x.denumiri).join(' / ') })) .sort((a, b) => (a.cod || a.denumire).localeCompare(b.cod || b.denumire, 'ro')); } function ComandaProduseFoaie({ campaign, brand, creators, influencers, fel, onClose }) { const [produse, setProduse] = useStateCP([]); const [seIncarca, setSeIncarca] = useStateCP(true); // „N-am putut citi" si „nu exista produse" sunt lucruri diferite, iar foaia asta // ajunge la un client: nu are voie sa spuna ca nu e nimic de comandat cand de // fapt nu stie. const [eroare, setEroare] = useStateCP(''); const intern = fel === 'intern'; const titlu = intern ? 'Listă de distribuție' : 'Fișă de comandă produse'; // Produsele se citesc din baza, nu din starea filei: foaia asta ajunge pe hartie // la un client, deci trebuie sa arate ce e SALVAT, nu ce e tastat pe ecran. useEffectCP(() => { (async () => { const ids = creators.map(c => c.id); if (ids.length === 0) { setSeIncarca(false); return; } const { data, error } = await window.sb.from('campaign_products') .select('*').in('campaign_creator_id', ids).order('position'); if (error) { setEroare(window.mesajEroare(error)); setSeIncarca(false); return; } setProduse((data || []).filter(p => !cpGol(p))); setSeIncarca(false); })(); }, [campaign.id, fel]); window.useEscape(onClose); const infDupaAlocare = (ccId) => { const cc = creators.find(c => c.id === ccId); return cc ? influencers.find(i => i.id === cc.influencer_id) : null; }; // Doar creatorii care chiar primesc ceva. Cine e alocat pe campanie dar n-are // niciun produs trecut nu are ce cauta intr-o comanda. const grupuri = creators .map(cc => ({ cc: cc, inf: infDupaAlocare(cc.id), randuri: produse.filter(p => p.campaign_creator_id === cc.id) })) .filter(g => g.randuri.length > 0) .sort((a, b) => (a.inf ? a.inf.full_name : '').localeCompare(b.inf ? b.inf.full_name : '', 'ro')); const totaluri = cpTotaluri(produse); const totalBucati = totaluri.reduce((s, t) => s + t.cantitate, 0); const brandName = brand ? (brand.brand || brand.company) : '—'; // Cine n-are adresa in fisa nu poate primi pachetul. Se spune INAINTE de lista, // ca sa se afle la birou si nu in ziua ambalarii. const faraAdresa = intern ? grupuri.filter(g => !cpAreStrada(g.inf)) : []; const accent = intern ? '#B45309' : '#18181b'; return ReactDOM.createPortal(
{eroare ? 'Nu am putut citi produsele: ' + eroare : (seIncarca ? 'Se încarcă produsele...' : (intern ? 'Foaie internă, pentru cine ambalează. Nu se trimite brandului.' : 'Gata de trimis brandului. Alege „Salvează ca PDF" în fereastra de printare.'))}
{/* ── 10: numele fisierului PDF ── Chrome si Edge propun la „Salveaza ca PDF" exact `document.title`, iar in tot panoul acela e mereu „4U Media Admin". Cele doua foi ieseau cu acelasi nume, deci lista interna cu adrese si telefoane putea ajunge atasata la brand dintr-o confuzie de fisiere. Titlul se pune inainte de print si se da inapoi dupa. */}
{/* Antet */}
4U Agency
Agenție de influencer marketing
{titlu}
Generată la {new Date().toLocaleDateString('ro-RO')}
{/* Banda de avertisment, numai pe foaia interna. Cele doua foi ies din aceleasi date si arata asemanator; una are adrese si telefoane, alta nu. Banda exista ca sa nu plece niciodata cea gresita catre brand. */} {intern && (
Document intern. Conține adresele și telefoanele creatorilor. Nu se trimite brandului și nu se atașează la contract. Pentru brand există „Fișa de comandă", care nu are date de contact.
)}

{campaign.name}

Brand: {brandName} {campaign.produse_contract_nr && · Anexă la contractul nr. {campaign.produse_contract_nr}} {campaign.produse_contract_data && din {cpData(campaign.produse_contract_data)}}
{/* Unde se livreaza. Numai pe foaia catre brand: e singurul lucru pe care il cerem de la ei si singura regula care nu se negociaza. */} {!intern && (
Termen și loc de livrare
{campaign.produse_termen_livrare || 'La sediul 4U Agency (de completat)'}
Toate produsele se livrează la adresa de mai sus. Distribuția către creatori se face de către agenție, pe baza listei interne de distribuție.
{campaign.produse_contact_client && (
Persoană de contact din partea clientului: {campaign.produse_contact_client}
)}
)} {eroare ? (
Nu am putut citi produsele campaniei: {eroare}
Foaia nu se poate genera acum. Închide, verifică internetul și încearcă din nou.
) : seIncarca ? (
Se încarcă produsele...
) : produse.length === 0 ? (
Niciun produs trecut pe campania asta. Completează tabelul din fila „Produse" și generează foaia din nou.
) : intern ? ( {faraAdresa.length > 0 && (
Nu se poate expedia încă: {faraAdresa.length === 1 ? 'un creator nu are stradă și număr' : faraAdresa.length + ' creatori nu au stradă și număr'} în fișă — {' '}{faraAdresa.map(g => (g.inf ? g.inf.full_name : 'creator șters')).join(', ')}. {' '}Completează adresa în fișa creatorului, apoi generează lista din nou.
)} Pachete de pregătit ({grupuri.length}) {grupuri.map((g, i) => { const linii = cpAdresa(g.inf); return (
{/* Numarul pachetului: ca sa se poata striga „lipsește 7", nu „lipsește al lui Cristian, sau Cătălin, nu mai știu". */}
{i + 1}
{g.inf ? g.inf.full_name : 'Creator șters'} {g.inf && g.inf.tiktok_handle && @{g.inf.tiktok_handle}}
{g.inf && g.inf.phone ?
Telefon: {g.inf.phone}
:
Fără telefon în fișă
} {linii.map((l, k) =>
{l}
)} {!cpAreStrada(g.inf) && (
Fără stradă și număr în fișă — pachetul nu poate fi expediat
)}
[p.cod || '—', p.denumire || '—', cpFmt(p.cantitate)])} />
{/* Doua casete si un rand de scris: foaia asta se tine in mana langa cutii, deci are nevoie de loc pentru pix. */}
ambalat expediat
AWB
); })} ) : ( {/* Ce comanda brandul. Prima, pentru ca e singurul tabel de care are nevoie ca sa pregateasca marfa. */} De comandat — total pe produs [t.cod || '—', t.denumire || '—', cpFmt(t.cantitate), String(t.creatori.size)])} subsol={['', 'Total', cpFmt(totalBucati) + ' buc.', String(grupuri.length)]} />
{/* Desfasurarea pe creator. Nu e pentru livrare — brandul nu trimite la creatori — e ca sa se vada ca ce se comanda si ce s-a semnat in Anexa 1 sunt acelasi lucru. De aceea are nume, dar nici adrese, nici telefoane. */} Desfășurare pe creator ({grupuri.length}) g.randuri.map((p, k) => [ // Numele o singura data pe grup: repetat pe fiecare rand, tabelul // se citeste ca o lista de produse, nu de oameni. k === 0 ? (g.inf ? g.inf.full_name : 'Creator șters') : '', p.cod || '—', p.denumire || '—', cpFmt(p.cantitate), ]))} />
Numele creatorilor sunt cele din Anexa 1 a contractului. Datele lor de contact nu fac obiectul acestei fișe: produsele se livrează la sediul agenției, iar distribuția o face agenția.
)}
{intern ? 'Listă generată automat din panoul intern 4U Agency. Document intern — nu se transmite în afara agenției.' : 'Fișă generată automat din panoul intern 4U Agency, pe baza produselor înregistrate la data generării.'}
, document.body ); } function CpTitluSectiune({ children }) { return (

{children}

); } // Tabelul foilor. `lung` marcheaza tabelul care poate trece de o pagina: acela are // nevoie de capul de tabel repetat la fiecare pagina si de voie sa se rupa, altfel // regula generala din @media print („tabelele nu se taie") l-ar arunca intreg pe // pagina urmatoare si ar ramane o foaie aproape goala. function CpTabel({ cap, randuri, grupuri, aliniere, subsol, lung }) { const al = (j) => (aliniere && aliniere[j]) || (j === 0 ? 'left' : 'right'); const celule = (r, i) => ( {r.map((cell, j) => ( {cell} ))} ); return ( {cap.map((h, j) => ( ))} {/* Cate un pe creator cand primim grupuri: numele lui se scrie o singura data, pe primul rand, deci randurile de sub el n-au voie sa ajunga singure pe pagina urmatoare. Fara grupuri, un singur tbody, ca inainte. */} {grupuri ? grupuri.map((g, gi) => {g.map((r, i) => celule(r, i))}) : {randuri.map((r, i) => celule(r, i))}} {subsol && ( {subsol.map((cell, j) => ( ))} )}
{h}
{cell}
); } // Anexa 1 din contract se semneaza de amandoua partile, deci si fisa care o // insoteste are unde. Cele doua blocuri se tin impreuna la printare: doua nume pe // o pagina si doua linii goale pe urmatoarea nu inseamna nimic. function CpSemnaturi({ contactClient }) { const bloc = (titlu, subtitlu) => (
{titlu}
{subtitlu || 'Nume, semnătură, dată'}
); return (
{bloc('Din partea agenției')} {bloc('Din partea clientului', contactClient ? contactClient + ' — semnătură, dată' : null)}
); } window.ComandaProduseFoaie = ComandaProduseFoaie;