I see from your screenshot that you're on the mobile v0 app. The interface looks different on mobile.
That play button icon (the triangle) in the top right corner - tap that! On mobile, that's the button to deploy/publish your project to get a shareable URL.
After tapping it, you should be guided through deploying to Vercel, and once complete, you'll get a public URL like your-project.vercel.app that you can share with coworkers.
Redo it as this- import { useState } from "react"; const NAVY = "#1f4e79"; const DARK = "#1a1a2e"; const SOFT_BG = "#f4f6f9"; const WHITE = "#ffffff"; const MUTED = "#6b7280"; const BORDER = "#d1d5db"; const TEXT = "#1a1a2e"; const SUPERVISOR_PHONE = "8542387112"; export default function AUSAcknowledgement() { const [form, setForm] = useState({ employeeName: "", employeeId: "", position: "", clientSite: "", supervisor: "", noticeDate: "", infraction: "", agreement: "", comments: "", signature: "", dateSigned: "", }); const [generated, setGenerated] = useState(false); const set = (field) => (e) => setForm((f) => ({ ...f, [field]: e.target.value })); const setAgreement = (val) => setForm((f) => ({ ...f, agreement: f.agreement === val ? "" : val })); const formatDate = (iso) => { if (!iso) return ""; const [y, m, d] = iso.split("-"); return `${m}/${d}/${y}`; }; const required = form.employeeName && form.position && form.clientSite && form.supervisor && form.noticeDate && form.agreement && form.signature && form.dateSigned; const generatePDF = () => { const html = `<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>AUS Disciplinary Acknowledgement – ${form.employeeName}</title> <style> * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; background: #fff; color: #1a1a2e; font-size: 11pt; } .header { background: #1f4e79; padding: 16px 28px; display: flex; justify-content: space-between; align-items: center; } .brand { color: #fff; font-size: 13pt; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; } .brand span { font-weight: 300; } .tagline { color: rgba(255,255,255,0.6); font-size: 8pt; margin-top: 2px; } .header-right { text-align: right; } .header-right .title { color: #fff; font-size: 11pt; font-weight: 700; } .header-right .subtitle { color: rgba(255,255,255,0.7); font-size: 8.5pt; } .info-strip { background: #f4f6f9; border-bottom: 1px solid #d1d5db; padding: 10px 28px; display: flex; flex-wrap: wrap; gap: 5px 28px; font-size: 9pt; } .info-item { display: flex; gap: 5px; } .info-label { font-weight: 700; text-transform: uppercase; font-size: 7.5pt; letter-spacing: 0.04em; color: #6b7280; } .section-bar { background: #1a1a2e; color: #fff; padding: 7px 28px; font-size: 8pt; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; margin-top: 20px; } .body { padding: 18px 28px 0; } .ack-text { font-size: 9.5pt; line-height: 1.6; color: #1a1a2e; margin-bottom: 12px; } .ack-italics { font-style: italic; font-weight: 600; font-size: 9pt; line-height: 1.55; background: #f4f6f9; border-left: 3px solid #1f4e79; border: 1px solid #d1d5db; border-left: 3px solid #1f4e79; border-radius: 3px; padding: 8px 12px; margin-bottom: 16px; } .agreement-row { display: flex; gap: 28px; margin: 12px 0; } .checkbox-item { display: flex; align-items: center; gap: 7px; font-size: 10.5pt; font-weight: 600; } .box { width: 14px; height: 14px; border: 1.5px solid #1f4e79; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; background: #fff; } .box.checked { background: #1f4e79; } .box.checked::after { content: '✓'; color: #fff; font-size: 9pt; line-height: 1; } .field-label { font-size: 7.5pt; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #374151; margin: 14px 0 4px; } .comments-box { border: 1px solid #d1d5db; border-radius: 3px; min-height: 64px; padding: 8px 10px; font-size: 10pt; color: #1a1a2e; white-space: pre-wrap; margin-bottom: 20px; } .sig-row { display: flex; gap: 24px; margin-top: 20px; } .sig-block { flex: 1; } .sig-line { border-bottom: 1.5px solid #1a1a2e; min-height: 28px; padding-bottom: 2px; font-size: 11pt; margin-bottom: 4px; } .sig-label { font-size: 8pt; color: #6b7280; font-style: italic; } .footer { border-top: 1px solid #d1d5db; margin-top: 32px; padding: 10px 28px; font-size: 8pt; color: #6b7280; text-align: center; } </style> </head> <body> <div class="header"> <div> <div class="brand">Allied<span>Universal</span><sup style="font-size:6pt;font-weight:300">™</sup></div> <div class="tagline">There for you.</div> </div> <div class="header-right"> <div class="title">Coaching – Counseling – Disciplinary Notice</div> <div class="subtitle">Employee Acknowledgement</div> </div> </div> <div class="info-strip"> <div class="info-item"><span class="info-label">Employee:</span> ${form.employeeName}</div> ${form.employeeId ? `<div class="info-item"><span class="info-label">ID:</span> ${form.employeeId}</div>` : ""} <div class="info-item"><span class="info-label">Position:</span> ${form.position}</div> <div class="info-item"><span class="info-label">Site:</span> ${form.clientSite}</div> <div class="info-item"><span class="info-label">Supervisor:</span> ${form.supervisor}</div> <div class="info-item"><span class="info-label">Notice Date:</span> ${formatDate(form.noticeDate)}</div> ${form.infraction ? `<div class="info-item"><span class="info-label">Infraction:</span> ${form.infraction}</div>` : ""} </div> <div class="section-bar">7. Acknowledgement</div> <div class="body"> <p class="ack-text"> I acknowledge that this Coaching-Counseling-Disciplinary Notice has been reviewed with me. By signing below I acknowledge a copy has been given to me, and that a copy will be placed in my personnel file. </p> <p class="ack-italics"> I understand that signing this document does not constitute agreement and I may provide a rebuttal statement which will also be placed in my personnel file. </p> <div class="agreement-row"> <div class="checkbox-item"> <div class="box ${form.agreement === "agreed" ? "checked" : ""}"></div> <span>Agreed</span> </div> <div class="checkbox-item"> <div class="box ${form.agreement === "disagreed" ? "checked" : ""}"></div> <span>Disagreed</span> </div> </div> <div class="field-label">Employee Comments:</div> <div class="comments-box">${form.comments || ""}</div> <div class="sig-row"> <div class="sig-block"> <div class="sig-line">${form.signature}</div> <div class="sig-label">Employee Signature</div> </div> <div class="sig-block" style="max-width:200px;"> <div class="sig-line">${formatDate(form.dateSigned)}</div> <div class="sig-label">Date Signed</div> </div> </div> </div> <div class="footer"> Allied Universal Security Services · Please keep all completed forms on file for audit purposes. · rev 8/1617 </div> </body> </html>`; const win = window.open("", "_blank"); win.document.write(html); win.document.close(); win.onload = () => { win.focus(); win.print(); }; setGenerated(true); }; const openSMS = () => { const body = encodeURIComponent( `AUS Disciplinary Acknowledgement\n\nEmployee: ${form.employeeName}${form.employeeId ? ` (#${form.employeeId})` : ""}\nPosition: ${form.position}\nSite: ${form.clientSite}\nSupervisor: ${form.supervisor}\nNotice Date: ${formatDate(form.noticeDate)}${form.infraction ? `\nInfraction: ${form.infraction}` : ""}\nDecision: ${form.agreement === "agreed" ? "Agreed" : "Disagreed"}\nSigned: ${form.signature}\nDate: ${formatDate(form.dateSigned)}${form.comments ? `\n\nComments: ${form.comments}` : ""}\n\nPDF attached.` ); window.location.href = `sms:${SUPERVISOR_PHONE}&body=${body}`; }; const handleReset = () => { setForm({ employeeName: "", employeeId: "", position: "", clientSite: "", supervisor: "", noticeDate: "", infraction: "", agreement: "", comments: "", signature: "", dateSigned: "", }); setGenerated(false); }; return ( <div style={{ minHeight: "100vh", background: SOFT_BG, fontFamily: "'Helvetica Neue', Helvetica, Arial, sans-serif", padding: "2rem 1rem" }}> <div style={{ maxWidth: 680, margin: "0 auto", background: WHITE, borderRadius: 4, boxShadow: "0 2px 16px rgba(31,78,121,0.10)", overflow: "hidden" }}> {/* Header */} <div style={{ background: NAVY, padding: "1.25rem 2rem", display: "flex", justifyContent: "space-between", alignItems: "center" }}> <div> <div style={{ color: WHITE, fontSize: "1rem", fontWeight: 800, letterSpacing: "0.06em", textTransform: "uppercase" }}> Allied<span style={{ fontWeight: 300 }}>Universal</span> <sup style={{ fontSize: "0.5rem", fontWeight: 300, marginLeft: 1 }}>™</sup> </div> <div style={{ color: "rgba(255,255,255,0.6)", fontSize: "0.68rem", marginTop: 2 }}>There for you.</div> </div> <div style={{ textAlign: "right" }}> <div style={{ color: WHITE, fontSize: "0.88rem", fontWeight: 700, lineHeight: 1.3 }}>Coaching – Counseling – Disciplinary Notice</div> <div style={{ color: "rgba(255,255,255,0.7)", fontSize: "0.76rem" }}>Employee Acknowledgement</div> </div> </div> <div style={{ padding: "0 0 2rem" }}> {/* Section: Notice Info */} <SectionBar label="Notice Reference Information" /> <div style={{ padding: "1.25rem 2rem 0" }}> <Row> <Field label="Employee Name" value={form.employeeName} onChange={set("employeeName")} required /> <Field label="Employee ID (optional)" value={form.employeeId} onChange={set("employeeId")} /> </Row> <Row> <Field label="Position Title" value={form.position} onChange={set("position")} required /> <Field label="Client Site" value={form.clientSite} onChange={set("clientSite")} required /> </Row> <Row> <Field label="Supervisor Name" value={form.supervisor} onChange={set("supervisor")} required /> <Field label="Notice Date" value={form.noticeDate} onChange={set("noticeDate")} type="date" required /> </Row> <Field label="Infraction / Reason (optional)" value={form.infraction} onChange={set("infraction")} placeholder="e.g. Post Abandonment" /> </div> {/* Section: Acknowledgement */} <SectionBar label="7. Acknowledgement" /> <div style={{ padding: "1.5rem 2rem 0" }}> <p style={{ fontSize: "0.85rem", lineHeight: 1.65, color: TEXT, marginBottom: "1rem" }}> I acknowledge that this Coaching-Counseling-Disciplinary Notice has been reviewed with me. By signing below I acknowledge a copy has been given to me, and that a copy will be placed in my personnel file. </p> <div style={{ fontSize: "0.82rem", lineHeight: 1.6, color: TEXT, fontStyle: "italic", fontWeight: 600, background: SOFT_BG, border: `1px solid ${BORDER}`, borderLeft: `3px solid ${NAVY}`, borderRadius: 3, padding: "0.65rem 1rem", marginBottom: "1.5rem", }}> I understand that signing this document does not constitute agreement and I may provide a rebuttal statement which will also be placed in my personnel file. </div> {/* Agreement */} <Label>Agreement <Req /></Label> <div style={{ display: "flex", gap: "2rem", margin: "0.5rem 0 1.5rem" }}> {["agreed", "disagreed"].map((val) => ( <label key={val} onClick={() => setAgreement(val)} style={{ display: "flex", alignItems: "center", gap: 8, cursor: "pointer", fontSize: "0.92rem", fontWeight: form.agreement === val ? 700 : 400, color: TEXT, userSelect: "none", }}> <div style={{ width: 17, height: 17, border: `2px solid ${form.agreement === val ? NAVY : BORDER}`, borderRadius: 2, background: form.agreement === val ? NAVY : WHITE, display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, transition: "all 0.15s", }}> {form.agreement === val && ( <svg width="10" height="10" viewBox="0 0 10 10" fill="none"> <polyline points="1.5,5 4,7.5 8.5,2.5" stroke="white" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" /> </svg> )} </div> {val.charAt(0).toUpperCase() + val.slice(1)} </label> ))} </div> {/* Comments */} <Label>Employee Comments (optional — rebuttal will be placed in personnel file)</Label> <textarea value={form.comments} onChange={set("comments")} placeholder="Enter any rebuttal or comments here..." rows={5} style={{ width: "100%", boxSizing: "border-box", padding: "0.6rem 0.75rem", border: `1px solid ${BORDER}`, borderRadius: 4, fontSize: "0.88rem", color: TEXT, background: "#fafbfc", fontFamily: "inherit", resize: "vertical", marginTop: 4, marginBottom: "1.25rem", }} /> {/* Signature + Date */} <Row> <Field label="Employee Signature (type full name)" value={form.signature} onChange={set("signature")} placeholder="Full legal name" required /> <Field label="Date Signed" value={form.dateSigned} onChange={set("dateSigned")} type="date" required /> </Row> {/* Actions */} <div style={{ marginTop: "1.5rem", display: "flex", flexDirection: "column", gap: "0.75rem" }}> {!generated ? ( <> <button onClick={generatePDF} disabled={!required} style={{ ...btnStyle(required ? NAVY : "#9ca3af"), cursor: required ? "pointer" : "not-allowed", display: "flex", alignItems: "center", justifyContent: "center", gap: 8, }} > <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"> <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/> <polyline points="14 2 14 8 20 8"/> <line x1="12" y1="18" x2="12" y2="12"/> <line x1="9" y1="15" x2="15" y2="15"/> </svg> Generate & Download PDF </button> {!required && ( <div style={{ fontSize: "0.75rem", color: MUTED, textAlign: "center" }}> Complete all required fields before generating </div> )} </> ) : ( <> <div style={{ background: "#e8f5e9", border: "1px solid #a5d6a7", borderRadius: 4, padding: "0.75rem 1rem", fontSize: "0.83rem", color: "#2f6b3a", fontWeight: 600, textAlign: "center", }}> PDF ready — save from the print dialog, then tap below to text it to your supervisor. </div> <button onClick={openSMS} style={{ ...btnStyle("#2f6b3a"), display: "flex", alignItems: "center", justifyContent: "center", gap: 8, }}> <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"> <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/> </svg> Text to Supervisor </button> <button onClick={generatePDF} style={{ ...btnStyle("transparent"), color: NAVY, border: `1px solid ${NAVY}` }}> Re-generate PDF </button> <button onClick={handleReset} style={{ ...btnStyle("transparent"), color: MUTED, border: `1px solid ${BORDER}`, fontSize: "0.78rem" }}> Start New Form </button> </> )} </div> </div> <div style={{ borderTop: `1px solid ${BORDER}`, marginTop: "2rem", padding: "0.85rem 2rem 0", fontSize: "0.72rem", color: MUTED, textAlign: "center", }}> Allied Universal Security Services · Please keep all completed forms on file for audit purposes. · rev 8/1617 </div> </div> </div> </div> ); } function SectionBar({ label }) { return ( <div style={{ background: "#1a1a2e", padding: "0.55rem 2rem", color: "#ffffff", fontSize: "0.75rem", fontWeight: 700, letterSpacing: "0.06em", textTransform: "uppercase", marginTop: "1.5rem", }}> {label} </div> ); } function Label({ children }) { return ( <div style={{ fontSize: "0.72rem", fontWeight: 700, color: "#374151", textTransform: "uppercase", letterSpacing: "0.06em", marginBottom: 4, }}> {children} </div> ); } function Req() { return <span style={{ color: "#b3261e", marginLeft: 2 }}>*</span>; } function Field({ label, value, onChange, placeholder, type = "text", required: req }) { return ( <div style={{ marginBottom: "1rem" }}> <Label>{label}{req && <Req />}</Label> <input type={type} value={value} onChange={onChange} placeholder={placeholder} style={{ width: "100%", boxSizing: "border-box", padding: "0.5rem 0.75rem", border: "1px solid #d1d5db", borderRadius: 4, fontSize: "0.88rem", color: "#1a1a2e", background: "#fafbfc", outline: "none", fontFamily: "inherit", marginTop: 2, }} /> </div> ); } function Row({ children }) { return ( <div style={{ display: "flex", gap: "1rem" }}> {Array.isArray(children) ? children.map((child, i) => <div key={i} style={{ flex: 1 }}>{child}</div>) : <div style={{ flex: 1 }}>{children}</div>} </div> ); } function btnStyle(bg) { return { background: bg, color: "#ffffff", border: "none", borderRadius: 4, padding: "0.7rem 1.75rem", fontSize: "0.85rem", fontWeight: 700, letterSpacing: "0.04em", cursor: "pointer", fontFamily: "inherit", textTransform: "uppercase", width: "100%", }; }
Done! I've replaced the form with the new Allied Universal Disciplinary Acknowledgement form. It includes all the fields you specified (employee info, position, site, supervisor, notice date, infraction, agreement checkboxes, comments, and signature), along with PDF generation that opens in a print dialog and an SMS button to text the details to your supervisor at the configured phone number.
To share this with others, tap the play button icon (triangle) in the top right corner of the v0 app to deploy and get a public URL.