/* ============================================================================= VALIORO OS — operating system + client portal (Phase 1 + Phase 2). EMPLOYEE (role=employee, or local preview): the deliverable-first OS — Deliverables / Frameworks / Methodology / Tools / Operations / Clients / Brand. The Clients view is now LIVE: manage each engagement (IRS, valuation, quarter), drive the deliverable status board, the 00–11 data room, and view intake. CLIENT (role=client): their own portal — Dashboard (IRS + valuation + progress), Data Room (the 00–11 folders we deliver into), Intake (the FW-23 forms). Auth is config-gated (window.VALIORO_AUTH): runs in local preview mode with no login until Supabase keys are added in lib/config.js. In local mode an employee can "open the client portal" for any demo client to preview the full experience. Data: window.VALIORO_PROGRAM + window.VALIORO_ARTIFACTS (static) · window.VALIORO_PORTAL (data-room folders + intake forms) · window.VALIORO_DATA (the async data layer: seed locally, Supabase remote). ========================================================================== */ /* global React, ReactDOM */ const { useState, useEffect, useMemo, useCallback, useRef } = React; const P = window.VALIORO_PROGRAM || {}; const A = window.VALIORO_ARTIFACTS || { frameworks: {}, methodology: [], operations: [], tools: [], brand: [] }; const AUTH = window.VALIORO_AUTH || { enabled: false }; const D = window.VALIORO_DATA || null; const PORTAL = window.VALIORO_PORTAL || { DATAROOM_FOLDERS: [], folderById: {}, INTAKE_FORMS: [], formById: {}, PORTAL_NAV: [] }; const DELIVERABLES = P.DELIVERABLES || []; const FRAMEWORKS = P.FRAMEWORKS || []; const DISCIPLINES = P.DISCIPLINES || {}; const PILLARS = window.VALIORO_PILLARS || P.PILLARS || {}; const FOLDERS = PORTAL.DATAROOM_FOLDERS; const FORMS = PORTAL.INTAKE_FORMS; // the public website is the front door, served at "/" by the platform server // (serve-platform.js → Launch Valioro.cmd). Absolute so it works from any OS view. const SITE_HREF = "https://valioro-website.pages.dev/"; // public marketing site (switch to https://valioro.com.br/ once the custom domain is connected) const EXT_LABEL = { html: "WEB", xlsx: "XLS", docx: "DOC", pptx: "PPT", pdf: "PDF" }; const QUARTERS = [ { key: "1", tag: "Q1", name: "Strategy & Offer", sub: "Months 1–3 · diagnose, position, price" }, { key: "2", tag: "Q2", name: "Financial & Valuation", sub: "Months 4–6 · audit-grade books → defensible value" }, { key: "3", tag: "Q3", name: "Governance & Readiness", sub: "Months 7–9 · make it transactable" }, { key: "4", tag: "Q4", name: "Investor Materials & Capital", sub: "Months 10–12 · tell it, take it to market" }, { key: "all", tag: "Spine", name: "Recurring & cross-quarter", sub: "Every month · the connective tissue" }, ]; const qkey = q => (q === "all" || q == null ? "all" : String(q)); // The 8 operation rooms (the business operations) + the reference views they draw on. // Access model: an operator sees only assigned rooms; owner sees all. In local preview // (no Supabase auth) everything runs as owner, so nothing is hidden yet — the roles / // ownerOnly metadata activates when employee accounts are turned on. Delivery is the only // room with a real surface today (the Clients view); the rest open as shells. Full surface // specs live in Claude Cowork/outputs/company-ops/OS_Employee_Portal_Design.md. const ROOMS = [ { id: "demand", label: "Demand Generation", phase: "C", roles: ["demand"], purpose: "Steady inbound so Sales always has someone to qualify. The hook is the free mini-IRS.", surface: ["Content cadence board — the week's angle: Idea → Drafting → Scheduled → Published, per channel", "Lead inbox — mini-IRS (Typeform) submissions land as captured leads, one-click send to Sales"], carries: "Brand assets, the SMM carousel templates, content-angle prompts.", handoff: "A captured lead → Sales (Lead stage).", today: "Lives in LinkedIn / Typeform today. The OS piece is the lead inbox + a light cadence board." }, { id: "sales", label: "Sales", phase: "A", roles: ["sales"], purpose: "Turn a lead into a signed 12-month client without discounting method or price. The IRS assessment does the selling.", surface: ["Pipeline board: Lead → Qualified → Discovery → Assessment → Proposal → Signed", "Deal cards: company, vertical, revenue, source, ICP check, IRS result, proposal status, price, next action", "Assessment stage launches the IRS portal; the score + range attaches to the deal", "On Signed → creates the client in Onboarding + triggers the first invoice in Finance"], carries: "Pitch deck (FW-19), objection kit (FW-20), the pricing card, the discovery script.", handoff: "Signed → Onboarding + Finance.", today: "Nothing yet — the IRS portal stands alone, not attached to a deal. The deep, build-first room." }, { id: "onboarding", label: "Onboarding", phase: "A", roles: ["onboarding"], purpose: "Take a signed client live within 5 business days. Triggers on contract signed AND first payment cleared.", surface: ["Per-client onboarding checklist (the SOP-03 steps, tracked)", "Create client + 00–11 data room · billing on · send FW-23 intake · schedule cadence · kickoff · assign pod · set QA gates", "Payment-cleared + intake-received gates: delivery can't start until both are green", "Assign the client to one delivery employee (feeds Delivery scoping)"], carries: "FW-23 intake, FW-15 data-room protocol, the kickoff script.", handoff: "→ Delivery, when the checklist is complete.", today: "The end pieces (client create, data room, intake) exist in Delivery; the checklist, payment gate, and assignment do not." }, { id: "delivery", label: "Delivery", phase: "A", roles: ["delivery"], live: true, purpose: "Produce the quarter's deliverables to standard. Scoped — an operator sees only their assigned client(s)." }, { id: "success", label: "Client Success", phase: "A", roles: ["success"], purpose: "One outcome: the client stays, grows, and refers. Runs on a monthly cycle + renewal windows.", surface: ["Relationship cadence — last contact + the 10-day-rule alert, monthly session, check-ins; a who's-overdue list", "MGR delivery — receive the QA'd report from Delivery, add framing, deliver by the 5th, mark sent", "Health — monthly satisfaction / NPS (>8.0), churn-signal flags", "Renewal & expansion — contract dates, 3-month / 30-day windows, step-up off the founder rate", "Advocacy — referrals from month 2, testimonials, case studies → Demand Gen", "Feedback loop — priorities → Delivery; realized outcomes → Product/IP"], carries: "MGR template (FW-21), referral script, renewal script.", handoff: "Referrals → Demand/Sales; realized data → Product/IP.", today: "Only the engagement editor (IRS/valuation) exists. No cadence, health, renewal, or MGR send — second-biggest gap." }, { id: "partners", label: "Partners", phase: "B", roles: ["partners"], purpose: "The referral-partner network — accountants, lawyers, consultants who send qualified leads for a commission. Built: a partner pipeline (potential → onboarding → signed) and per-partner referrals with dates, status, and commission roll-ups." }, { id: "talent", label: "Talent", phase: "C", roles: ["talent"], purpose: "The people who deliver — the 5-per-client moat. Triggers on the cohort funnel (16-week rule) + pod need.", surface: ["Cohort funnel — recruiting pipeline (apply → screen → interview → select 5–7), 16-week countdown", "The visa gate — legality confirmed before any flight; blocks pod assignment until green", "Pods & capacity — who's on which client pod, capacity vs demand", "Training library, intern records, offboarding / alumni"], carries: "Recruiting templates, the training library, the university MOU, the estágio contract.", handoff: "Trained, visa-cleared interns → Delivery.", today: "Nothing. Full build waits (interns ~September); the 16-week countdown + visa-gate checklist are worth a stub sooner." }, { id: "finance", label: "Finance", phase: "B", ownerOnly: true, purpose: "The company's money and its legal standing. Owner-only.", surface: ["Receivables — per-client invoice status (day-5 recurring): issued / paid / late + chase list", "Compliance calendar — DAS, Fator-R watch, ECD/DEFIS, INPI, CNPJ, your CRNM + intern-visa admin", "Contracts store — client, NDA, estágio, partner", "Cash snapshot — position / runway, the R$15–20k buffer flag, cost-to-deliver vs retainer"], carries: "FW-13 Tax & Fator-R, contract templates.", handoff: "Clears payment → unblocks Onboarding / Delivery.", today: "Nothing. Conta Azul stays the book of record — the OS surface is receivables, the compliance board, and contracts." }, { id: "product", label: "Product / IP", phase: "B", ownerOnly: true, purpose: "The asset every client runs on — defensible accuracy, not software. The moat. Owner-guarded.", surface: ["Roadmap / backlog — what to build next, prioritized against accuracy needs", "Comps coverage — library status (40 today), coverage by sector, confidence, stale-comp hygiene", "Recalibration inbox — realized outcomes from Client Success, folded into multiples + score mapping", "The science — methodology, rubric, sectors, engine / portal version status"], carries: "The science: methodology, comps, rubric, the engine repo (FW-01/02/03/11).", handoff: "Supplies the engine + frameworks to Delivery.", today: "The knowledge exists as catalogs (see Reference). No roadmap, comps-coverage, or recalibration surface yet." }, ]; const ROOM_BY_ID = {}; ROOMS.forEach(r => { ROOM_BY_ID[r.id] = r; }); // Existing reference/library views — owner-level for now. The depth phase distributes the // relevant slice of these into the rooms above (no global shelf long-term). const REFERENCE = [ { id: "deliverables", label: "Deliverables" }, { id: "frameworks", label: "Frameworks" }, { id: "methodology", label: "Methodology" }, { id: "tools", label: "Tools" }, { id: "operations", label: "Operations" }, { id: "brand", label: "Brand" }, ]; /* ---------- monoline icon set (replaces emoji — currentColor, 24px grid) --- */ function Icon({ name }) { const p = { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.7, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true" }; switch (name) { case "deliverables": return ; case "frameworks": return ; case "methodology": return ; case "tools": return ; case "operations": return ; case "clients": case "delivery": return ; case "demand": return ; case "sales": return ; case "onboarding": return ; case "success": return ; case "talent": return ; case "finance": return ; case "product": return ; case "partners": return ; case "brand": return ; case "dashboard": return ; case "dataroom": case "folder": return ; case "intake": return ; case "eye": return ; case "doc": return ; case "chevron": return ; case "close": return ; case "check": return ; case "back": return ; default: return null; } } function FileTag({ ext }) { return {EXT_LABEL[ext] || String(ext || "").toUpperCase()}; } // Deliverable status vocabulary (matches db check + os-seed). const DSTATUS = { not_started: { label: "Not started", pt: "Não iniciado", cls: "ns" }, in_progress: { label: "In progress", pt: "Em andamento", cls: "ip" }, review: { label: "In review", pt: "Em revisão", cls: "rv" }, delivered: { label: "Delivered", pt: "Entregue", cls: "dl" }, }; const STATUS_ORDER = ["not_started", "in_progress", "review", "delivered"]; /* ---------- formatting + math helpers ----------------------------------- */ function fmtMoney(n) { if (n == null || isNaN(n)) return "—"; const a = Math.abs(n); if (a >= 1e6) return "R$ " + (n / 1e6).toFixed(1).replace(".", ",") + " mi"; if (a >= 1e3) return "R$ " + Math.round(n / 1e3) + " mil"; return "R$ " + n; } function fmtFull(n) { if (n == null || isNaN(n)) return "—"; try { return "R$ " + Number(n).toLocaleString("pt-BR"); } catch (e) { return "R$ " + n; } } // Readiness factor from doctrine: (IRS/100)^0.55 — the fraction of the fair-max // multiple unlocked at a given readiness score. function readiness(irs) { if (irs == null || isNaN(irs) || irs <= 0) return 0; return Math.pow(irs / 100, 0.55); } function pctDelta(from, to) { if (!from || !to) return null; return Math.round(((to - from) / from) * 100); } /* ---------- async data hook --------------------------------------------- */ function useAsync(fn, deps) { const [state, setState] = useState({ loading: true, data: null, error: null }); const [tick, setTick] = useState(0); useEffect(() => { let alive = true; setState(s => ({ ...s, loading: true })); Promise.resolve().then(fn).then(d => { if (alive) setState({ loading: false, data: d, error: null }); }) .catch(e => { if (alive) setState({ loading: false, data: null, error: e }); }); return () => { alive = false; }; // eslint-disable-next-line }, (deps || []).concat([tick])); const reload = useCallback(() => setTick(t => t + 1), []); return { ...state, reload }; } /* ===================================================================== */ /* PHASE 1 — employee deliverable-first views (unchanged) */ /* ===================================================================== */ function FileIcons({ files }) { if (!files || !files.length) return null; return ( {files.filter(f => f.ext !== "html").map((f, i) => ( {EXT_LABEL[f.ext] || String(f.ext || "").toUpperCase()} ))} ); } function FwChip({ fwId }) { const f = A.frameworks[fwId]; if (!f) return {fwId}; return ( {f.code} {f.name} ); } function DeliverableCard({ d }) { const [open, setOpen] = useState(false); const disc = (DISCIPLINES[d.discipline] && DISCIPLINES[d.discipline].label) || d.discipline; const irs = d.irs && d.irs.max > 0 ? "+" + d.irs.min + "–" + d.irs.max + " IRS" : (d.recurring ? "recurring" : ""); return (
{d.code} {d.name} {disc} {irs ? 0 ? "" : " rec")}>{irs} : null}
{d.tagline ?
{d.tagline}
: null} {d.riskKilled ?
Kills: {d.riskKilled}
: null}
Built with {(d.fw || []).length ? (d.fw || []).map(id => ) : —}
{open ? (
{d.purpose ?

Purpose. {d.purpose}

: null} {d.valuationImpact ?

Valuation impact. {d.valuationImpact}

: null} {d.inputs && d.inputs.length ? (

Inputs (from the client):

    {d.inputs.map((x, i) =>
  • {x}
    • )}
) : null} {d.structure && d.structure.length ? (

Structure:

    {d.structure.map((x, i) =>
  • {x}
    • )}
) : null}

{d.owner ? "Owner: " + d.owner : ""}{d.estHours ? (d.owner ? " · " : "") + "Est. " + d.estHours : ""}{d.founderHours ? " · Founder " + d.founderHours : ""}

{d.qa ?

QA gate: {d.qa}

: null}
) : null}
); } function DeliverablesView() { const [q, setQ] = useState(""); const term = q.trim().toLowerCase(); const match = d => !term || [d.name, d.tagline, d.code, d.discipline, d.purpose].join(" ").toLowerCase().includes(term); return (

Deliverable Library

Everything a client receives, by trimester. Each links to the frameworks that build it.

setQ(e.target.value)} />
{QUARTERS.map(qq => { const ds = DELIVERABLES.filter(d => qkey(d.quarter) === qq.key && match(d)) .sort((a, b) => String(a.code).localeCompare(String(b.code), undefined, { numeric: true })); if (!ds.length) return null; return (
{qq.tag}

{qq.name}

{qq.sub} · {ds.length}
{ds.map(d => )}
); })}
); } function FrameworksView() { const fws = FRAMEWORKS.slice().sort((a, b) => String(a.code).localeCompare(String(b.code), undefined, { numeric: true })); return (

Framework Library

The 25 reusable engines & templates — master build-spec + working files.

{fws.map(fw => { const a = A.frameworks[fw.id] || {}; return (
{fw.code}{fw.name}
{a.master ? Build spec : master only}
); })}
); } function LinkRows({ items }) { if (!items || !items.length) return

Nothing here yet.

; return (
{items.map((m, i) => ( {m.label}{m.note ? — {m.note} : null} ))}
); } function SimpleView({ title, lead, items }) { return (

{title}

{lead ?

{lead}

: null}
); } /* ===================================================================== */ /* SHARED Phase-2 widgets */ /* ===================================================================== */ // Horizontal IRS meter with baseline + current + target markers + readiness. function IrsMeter({ baseline, current, target, lang }) { const cur = current != null ? current : baseline; const rb = Math.round(readiness(baseline) * 100); const rc = Math.round(readiness(cur) * 100); const L = lang === "pt"; const pos = v => Math.max(0, Math.min(100, v || 0)); return (
{cur != null ? cur : "—"}/100 IRS
{L ? "Fator de prontidão" : "Readiness factor"} {rc}% {baseline != null && rc !== rb ? (de {rb}%) : null}
{baseline != null ?
: null} {target != null ?
: null} {cur != null ?
: null}
{L ? "Baseline" : "Baseline"} {baseline != null ? baseline : "—"} {L ? "Hoje" : "Today"} {cur != null ? cur : "—"} {L ? "Meta" : "Target"} {target != null ? target : "—"}
); } // Valuation: baseline → today → target stat cards + comparative bar. function ValuationPanel({ eng, lang }) { const L = lang === "pt"; const vb = eng.valuation_baseline, vc = eng.valuation_current, vt = eng.valuation_target; // scale to the largest high (fall back to base if a range only has a base set, so // a base-only entry can't blow the bar to millions-of-percent) const max = Math.max(vt && (vt.high || vt.base) || 0, vc && (vc.high || vc.base) || 0, vb && (vb.high || vb.base) || 0) || 1; const bar = (v, cls) => v ? (
) :
; const upNow = vb && vc ? pctDelta(vb.base, vc.base) : null; const upTgt = vc && vt ? pctDelta(vc.base, vt.base) : null; const card = (title, v, cls, sub) => (
{title} {v ? fmtMoney(v.base) : "—"} {v ? fmtMoney(v.low) + " – " + fmtMoney(v.high) : ""} {bar(v, cls)} {sub ? {sub} : null}
); return (
{card(L ? "Baseline" : "Baseline", vb, "base", null)} {card(L ? "Hoje" : "Today", vc, "cur", upNow != null ? (upNow >= 0 ? "+" : "") + upNow + (L ? "% vs baseline" : "% vs baseline") : null)} {card(L ? "Meta (12 meses)" : "Target (12 months)", vt, "tgt", upTgt != null ? (upTgt >= 0 ? "+" : "") + upTgt + (L ? "% potencial" : "% potential") : null)}
); } function PillarBars({ baseline, current, lang }) { const L = lang === "pt"; const keys = Object.keys(PILLARS).length ? Object.keys(PILLARS) : Object.keys(current || baseline || {}); const labelOf = k => (DISCIPLINES[k] && DISCIPLINES[k].label) || (k.charAt(0).toUpperCase() + k.slice(1)); return (
{keys.map(k => { const cv = (current && current[k]) || 0; const bv = (baseline && baseline[k]) || 0; return (
{labelOf(k)}{cv}
{bv ?
: null}
); })}
); } function StatusPill({ status, lang }) { const s = DSTATUS[status] || DSTATUS.not_started; return {lang === "pt" ? s.pt : s.label}; } // Deliverable status board grouped by quarter. editable → status dropdowns. function StatusBoard({ statusMap, editable, onChange, lang }) { const L = lang === "pt"; return (
{QUARTERS.map(qq => { const ds = DELIVERABLES.filter(d => qkey(d.quarter) === qq.key) .sort((a, b) => String(a.code).localeCompare(String(b.code), undefined, { numeric: true })); if (!ds.length) return null; const done = ds.filter(d => statusMap[d.id] === "delivered").length; return (
{qq.tag}{qq.name} {done}/{ds.length} {L ? "entregues" : "delivered"}
{ds.map(d => { const st = statusMap[d.id] || "not_started"; return (
{d.code} {d.name} {editable ? ( ) : }
); })}
); })}
); } // The 00–11 data-room browser. Reads documents[]; opens via D.getDownloadUrl. function DataRoom({ clientId, documents, lang, manage, onChanged }) { const L = lang === "pt"; const [folder, setFolder] = useState("00"); const [q, setQ] = useState(""); const countByFolder = useMemo(() => { const m = {}; (documents || []).forEach(d => { m[d.folder] = (m[d.folder] || 0) + 1; }); return m; }, [documents]); const term = q.trim().toLowerCase(); const docs = (documents || []).filter(d => d.folder === folder && (!term || d.name.toLowerCase().includes(term))) .sort((a, b) => (b.date || "").localeCompare(a.date || "")); const open = async (doc) => { const url = await D.getDownloadUrl(doc); if (url) window.open(url, "_blank", "noopener"); else alert(L ? "Arquivo recebido do cliente — pré-visualização indisponível no modo local." : "Client-supplied file — preview unavailable in local preview."); }; const fmeta = PORTAL.folderById[folder] || {}; return (
{FOLDERS.map(f => ( ))}

{fmeta.id} {fmeta.name}

{fmeta.desc}

setQ(e.target.value)} />
{manage ? : null} {docs.length ? (
{docs.map(doc => (
{doc.name} {doc.source === "delivered" ? (L ? "Entregue" : "Delivered") : (L ? "Recebido" : "Received")} {doc.date} {doc.source === "delivered" ? : {L ? "Sem prévia" : "No preview"}} {manage ? : null}
))}
) :

{L ? "Nenhum arquivo nesta pasta ainda." : "No files in this folder yet."}

}
); } function AddDocForm({ clientId, folder, lang, onAdded }) { const L = lang === "pt"; const [name, setName] = useState(""); const [fwRef, setFwRef] = useState(""); const [busy, setBusy] = useState(false); const add = async () => { if (!name.trim()) return; setBusy(true); try { await D.addDocument(clientId, { folder, name: name.trim(), fwRef: fwRef || undefined, ext: (name.split(".").pop() || "").toLowerCase(), source: "delivered" }); setName(""); setFwRef(""); onAdded && onAdded(); } catch (e) { alert((e && e.message) || "Error"); } setBusy(false); }; return (
setName(e.target.value)} />
); } /* ---------- intake form rendering --------------------------------------- */ function IntakeFieldInput({ item, value, onChange, lang }) { const L = lang === "pt"; const label = item.label ? (L ? item.label.pt : item.label.en) : item.id; const help = item.help ? (L ? item.help.pt : item.help.en) : null; const t = item.type; let control; if (t === "file") { control = (
onChange(e.target.files && e.target.files[0] ? { file: e.target.files[0], name: e.target.files[0].name } : null)} /> {value && (value.name || typeof value === "string") ? {value.name || value} : null}
); } else if (t === "textarea") { control =