" `); win.document.close(); win.focus(); win.print(); }; const handlePrintID = () => { const node = printIDRef.current; if (!node) return; const html = node.outerHTML; const size = designID.orientation==="portrait" ? `${CARD.H}mm ${CARD.W}mm` : `${CARD.W}mm ${CARD.H}mm`; const win = window.open("", "_blank"); win.document.write(`${html}`); win.document.close(); win.focus(); win.print(); }; // Validate const [manualCode, setManualCode] = useState(""); const [scanResult, setScanResult] = useState(""); const validateById = (idOrSerial) => { const found = certs.find(c => c.id === idOrSerial || c.serial === idOrSerial); if (!found) return { ok:false }; return { ok:true, cert:found, trainee:getTrainee(found.traineeId), course:getCourse(found.courseId), trainer:getTrainer(found.trainerId) }; }; /* ---------------- Login UI ---------------- */ if (!session) { return ( ); } /* ---------------- UI ---------------- */ return ( ); } /* ---------------- Components ---------------- */ const Stat = ({ label, value, tone="default" }) => ( ); const Section = ({ title, desc, children }) => ( ); /* ---------- Designer Panel (Admin) ---------- */ function DesignerPanel({ kind, design, onChange, defaultDesign, preview, logo, setLogo, onTemplateUpload }) { const update = (path, value) => { const d = structuredClone(design); const parts = path.split("."); let ref = d; for (let i=0;i Math.max(min, Math.min(max, Number(v||0))); // local UI state for "apply to both" const [applyBoth, setApplyBoth] = useState(false); return (

{kind}

{preview ||

Issue a certificate to preview.

}

Orientation

update("orientation", e.target.value)}>LandscapePortrait

Background

update("bgColor", e.target.value)}/>

Border

update("borderColor", e.target.value)}/>

Font Family

update("textFont", e.target.value)}/>

Watermark

update("watermark", e.target.value==="1")}>ShowHide

Logo

update("showLogo", e.target.value==="1")}>ShowHide

{/* Upload Logo */}

Upload Logo

{ const f=e.target.files?.[0]; if(!f) return; const r=new FileReader(); r.onload=()=>{ setLogo(String(r.result)); }; r.readAsDataURL(f); }}/>

Default logo is preloaded. Upload to replace.

{/* NEW: Upload Template */}

Upload Template (image)

setApplyBoth(e.target.checked)} /> Apply to both designs

{ const f=e.target.files?.[0]; if(!f) return; const r=new FileReader(); r.onload=()=>{ const dataUrl=String(r.result); if(onTemplateUpload) onTemplateUpload(dataUrl, applyBoth); }; r.readAsDataURL(f); }} />

Fit

update("templateFit", e.target.value)}>CoverContain

Opacity

update("templateOpacity", Number(e.target.value))} className="w-full"/>

{(design.templateOpacity ?? 1).toFixed(2)}

{design.bgTemplateDataUrl && (

update("bgTemplateDataUrl","")}>Remove

)}

{/* Positions (existing controls kept as-is) */}

{/* QR */}

QR X

update("qr.x", number(e.target.value,-999,999))}/>

QR Y

update("qr.y", number(e.target.value,-999,999))}/>

QR Size

update("qr.size", number(e.target.value,8,400))}/>

Logo X

update("logo.x", number(e.target.value,-999,999))}/>

Logo Y

update("logo.y", number(e.target.value,-999,999))}/>

Logo W

update("logo.w", number(e.target.value,1,999))}/>

Logo H

update("logo.h", number(e.target.value,1,999))}/>

{/* Photo (ID & A4 both support) */} {"photo" in design && <>

Photo?

update("photo.show", e.target.value==="1")}>ShowHide

Photo X

update("photo.x", number(e.target.value,-999,999))}/>

Photo Y

update("photo.y", number(e.target.value,-999,999))}/>

Photo W

update("photo.w", number(e.target.value,1,999))}/>

Photo H

update("photo.h", number(e.target.value,1,999))}/>

}

{/* Text fields (EN & AR + Notes) */}

{Object.keys(design.fields).map(key=>{ const f = design.fields[key]; return (

{key}

{"text" in f && update(`fields.${key}.text`, e.target.value)} placeholder="Text (supports placeholders)"/>}

X

update(`fields.${key}.x`, number(e.target.value,-999,999))}/>

Y

update(`fields.${key}.y`, number(e.target.value,-999,999))}/>

Size

update(`fields.${key}.size`, number(e.target.value,4,120))}/>

Color

update(`fields.${key}.color`, e.target.value)}/>

Weight

update(`fields.${key}.weight`, Number(e.target.value))}>RegularSemiboldBoldExtra Bold

{"labelEn" in f &&

update(`fields.${key}.labelEn`, e.target.value)} placeholder="Label EN"/> update(`fields.${key}.labelAr`, e.target.value)} placeholder="التسمية AR"/>

}

); })}

onChange({...defaultDesign, logoDataUrl: design.logoDataUrl || DEFAULT_LOGO_DATAURL})}>Reset Template alert("Design saved. (Stored locally)")}>Save

Placeholders available in text fields: {"{nameEn}, {nameAr}, {courseEn}, {courseAr}, {trainerEn}, {trainerAr}, {issuedOn}, {expiresOn}, {serial}"}.

); } /* ---------- Certificate (A4) Renderer ---------- */ function CertificateA4({ design, cert, trainee, course, trainer, logo }) { if (!cert || !trainee || !course) return

Issue a certificate to preview.

; // helpers const boxStyle = { width: design.orientation==="portrait" ? "210mm" : "297mm", height:design.orientation==="portrait" ? "297mm" : "210mm", background: design.bgColor, border: `1mm solid ${design.borderColor}`, position:"relative", borderRadius:"3mm", fontFamily: design.textFont, overflow:"hidden", }; const payload = { id: cert.id, serial: cert.serial, trainee: trainee.nameEn || trainee.nameAr, course: course.code, expiresOn: cert.expiresOn }; const sub = (txt) => (txt || "") .replaceAll("{nameEn}", trainee.nameEn || "") .replaceAll("{nameAr}", trainee.nameAr || "") .replaceAll("{courseEn}", course.titleEn || "") .replaceAll("{courseAr}", course.titleAr || "") .replaceAll("{trainerEn}", (trainer?.nameEn || "")) .replaceAll("{trainerAr}", (trainer?.nameAr || "")) .replaceAll("{issuedOn}", cert.issuedOn) .replaceAll("{expiresOn}", cert.expiresOn) .replaceAll("{serial}", cert.serial); return (

{/* NEW: Template background */} {design.bgTemplateDataUrl && ( )} {/* Watermark */} {design.watermark && ( )} {/* Title EN */}

{design.fields.titleEn.text}

{/* Title AR */}

{design.fields.titleAr.text}

{/* Notes EN */}

{sub(design.fields.notesEn.text)}

{/* Notes AR */}

{sub(design.fields.notesAr.text)}

{/* Dates + Serial */}

Issued: {cert.issuedOn} • Expires: {cert.expiresOn}

Serial: {cert.serial}

{/* Trainee Photo (optional) */} {"photo" in design && design.photo.show && trainee.photoDataUrl && ( )} {/* Logo */} {design.showLogo && (design.logoDataUrl || logo) && ( )} {/* QR */}

{QRCodeCanvas ? :

QR

}

); } /* ---------- ID Card Renderer (CR80 in mm) ---------- */ function IDCard({ design, cert, trainee, course, trainer, logo }) { if (!cert || !trainee || !course) return

Issue a certificate to preview.

; const mm = (v)=> `${v}mm`; const boxStyle = { width: design.orientation==="portrait" ? `${CARD.H}mm` : `${CARD.W}mm`, height:design.orientation==="portrait" ? `${CARD.W}mm` : `${CARD.H}mm`, background: design.bgColor, border: `0.6mm solid ${design.borderColor}`, position:"relative", borderRadius:"2mm", fontFamily: design.textFont, overflow:"hidden", }; const payload = { id: cert.id, serial: cert.serial, trainee: trainee.nameEn || trainee.nameAr, course: course.code, expiresOn: cert.expiresOn }; const nameLine = (trainee.nameEn || "") + (trainee.nameAr ? ` / ${trainee.nameAr}` : ""); const courseLine = (course.titleEn || "") + (course.titleAr ? ` / ${course.titleAr}` : ""); return (

{/* NEW: Template background */} {design.bgTemplateDataUrl && ( )} {/* Watermark */} {design.watermark && ( )} {/* Titles */}

{design.fields.titleEn.text}

{design.fields.titleAr.text}

{/* Name */}

{design.fields.name.labelEn} {nameLine}

{/* Course */}

{design.fields.course.labelEn} {courseLine} ({course.code})

{/* Dates */}

Issued: {cert.issuedOn} • Exp: {cert.expiresOn}

{/* Trainee Photo */} {"photo" in design && design.photo.show && trainee.photoDataUrl && ( )} {/* Logo */} {design.showLogo && (design.logoDataUrl || logo) && ( )} {/* QR */}

{QRCodeCanvas ? :

QR

}

); } ReactDOM.createRoot(document.getElementById("dayim-training-app")).render(); "