Created
May 16, 2026 04:19
-
-
Save elitezai-cloud/ac2a63c0d5889bbbfe6bf752a73ba774 to your computer and use it in GitHub Desktop.
Elitez Proposal Assistant - No-Secret Preview
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>Elitez Proposal Assistant</title> | |
| <style> | |
| :root { | |
| --bg: #fdf8f1; | |
| --surface: #ffffff; | |
| --surface-soft: #fff5e9; | |
| --text: #1d232d; | |
| --text-subtle: #5a6474; | |
| --line: #eed7be; | |
| --accent: #ff7a2b; | |
| --accent-soft: #ffe8d4; | |
| --accent-dark: #e05f17; | |
| --ok: #16784f; | |
| --review: #ff8f4d; | |
| --blocked: #b84f3d; | |
| --warn-bg: #fff2df; | |
| --radius: 14px; | |
| --shadow: 0 8px 28px rgba(53, 23, 0, 0.08); | |
| } | |
| * { box-sizing: border-box; } | |
| body { margin: 0; font-family: "Avenir Next", "Avenir", "Trebuchet MS", "Segoe UI", sans-serif; color: var(--text); background: radial-gradient(circle at 8% 6%, #fff3de 0%, transparent 28%), radial-gradient(circle at 90% 4%, #ffe6ca 0%, transparent 24%), linear-gradient(180deg, #fff 0%, #fdf6ed 100%); } | |
| .app-bg { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(145deg, rgba(255, 122, 43, 0.12), rgba(255, 193, 132, 0.04)); } | |
| .app-shell { max-width: 1220px; margin: 24px auto; display: grid; grid-template-columns: 280px 1fr; gap: 20px; padding: 0 16px; } | |
| .sidebar, .workspace, .panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); } | |
| .sidebar { padding: 18px; } | |
| .brand { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; } | |
| .brand-mark { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: linear-gradient(180deg, #ff8f46 0%, var(--accent) 100%); color: #fff; font-weight: 700; letter-spacing: 0.03em; } | |
| .brand h1 { margin: 0; font-size: 1rem; } | |
| .brand p { margin: 0; color: var(--text-subtle); font-size: 0.85rem; } | |
| .workflow-rail h2 { margin: 0 0 12px; font-size: 0.9rem; color: var(--text-subtle); } | |
| .workflow-rail ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } | |
| .stage { display: flex; gap: 10px; align-items: center; font-size: 0.92rem; padding: 10px; border-radius: 10px; background: var(--surface-soft); cursor: pointer; transition: background-color 120ms ease; } | |
| .stage span { width: 24px; height: 24px; border-radius: 999px; display: grid; place-items: center; border: 1px solid var(--line); font-size: 0.75rem; color: var(--text-subtle); } | |
| .stage:focus-visible { outline: 2px solid rgba(255, 122, 43, 0.5); outline-offset: 2px; } | |
| .stage.active { background: var(--accent-soft); border: 1px solid #f5b582; } | |
| .stage.active span { background: var(--accent); color: #fff; border-color: var(--accent); } | |
| .workspace { padding: 20px; } | |
| .topbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; } | |
| .topbar h2 { margin: 0; } | |
| .topbar p { margin: 4px 0 0; color: var(--text-subtle); } | |
| .stage-tabs { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; } | |
| .tab { border: 1px solid var(--line); background: var(--surface); color: var(--text-subtle); border-radius: 999px; padding: 8px 12px; font-weight: 600; cursor: pointer; } | |
| .tab:focus-visible { outline: 2px solid rgba(255, 122, 43, 0.35); outline-offset: 2px; } | |
| .tab.active { background: var(--accent-soft); border-color: #f7c9a6; color: #8a4f11; } | |
| .primary-btn, .secondary-btn { border-radius: 10px; padding: 10px 14px; font-weight: 600; cursor: pointer; } | |
| .primary-btn { border: 0; background: linear-gradient(180deg, #ff9e47 0%, var(--accent) 100%); color: #fff; } | |
| .secondary-btn { border: 1px solid var(--line); background: var(--surface); color: var(--text); } | |
| .secondary-btn:hover { border-color: #ffc9a1; } | |
| .stage-content { display: none; margin-top: 14px; } | |
| .stage-content.active { display: block; } | |
| .panel-grid { display: grid; gap: 12px; margin-top: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); } | |
| .panel { padding: 14px; } | |
| .panel h3 { margin: 0 0 10px; } | |
| .panel--soft { background: linear-gradient(180deg, #fffdfb 0%, #fff7ef 100%); } | |
| .form-grid { display: grid; gap: 10px; } | |
| .form-grid label, .field-stack label, .panel label { display: grid; gap: 6px; font-size: 0.9rem; color: var(--text-subtle); } | |
| input, textarea, button { font: inherit; } | |
| input, textarea { border: 1px solid var(--line); border-radius: 8px; padding: 9px 10px; } | |
| .dropzone { border: 1px dashed #f4bf94; border-radius: 10px; padding: 18px; text-align: center; color: var(--text-subtle); background: #fffbf6; margin-bottom: 10px; } | |
| .loading, .note, .source { border-radius: 10px; padding: 10px 12px; } | |
| .loading { background: #ffe5cb; color: #8f4f13; margin-bottom: 10px; } | |
| .note { background: #fff7ee; color: var(--text-subtle); margin-top: 8px; } | |
| .source { margin: 8px 0 0; border-top: 1px solid var(--line); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); border-left: 3px solid #ff9b45; background: #fffcf8; color: #36404e; } | |
| .progress { background: #ffe3ca; border-radius: 999px; height: 8px; overflow: hidden; } | |
| .progress-fill { height: 100%; background: linear-gradient(90deg, #fdbf72, var(--accent)); } | |
| .summary-list, .queue-list, .requirements-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; } | |
| .summary-list li, .queue-list li, .requirements-list li { display: flex; justify-content: space-between; align-items: center; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; } | |
| .summary-list li.warn { display: block; background: #fff0dd; border-color: #f7cfa0; color: #7a4c0d; } | |
| .chip { padding: 4px 8px; border-radius: 999px; font-size: 0.78rem; font-weight: 600; } | |
| .chip.ok { background: #e5f5ec; color: #145638; } | |
| .chip.review { background: #fff3de; color: #8f4f13; } | |
| .chip.blocked { background: #fdeeee; color: #8b2828; } | |
| .field-stack { display: grid; gap: 10px; } | |
| .action-row { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; } | |
| .table-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; } | |
| .table-actions .secondary-btn { padding: 6px 8px; font-size: 0.77rem; } | |
| .preview-canvas { min-height: 220px; border: 1px dashed #efbf95; border-radius: 10px; background: linear-gradient(180deg, #fff 0%, #fff6ee 100%); display: grid; place-items: center; color: var(--text-subtle); } | |
| .preview-stack { width: 100%; display: grid; gap: 8px; } | |
| .preview-stack p { margin: 0; } | |
| .result-banner { margin-top: 10px; border: 1px solid #f7cfa0; border-radius: 10px; background: #fff5e6; color: #8a4b0b; padding: 10px 12px; } | |
| .result-banner p { margin: 0; font-size: 0.9rem; } | |
| .result-banner--error { color: var(--blocked); } | |
| .concepts-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } | |
| .concept-card.selected { border: 1px solid #f5ad68; background: #fff4ea; } | |
| .tags { display: flex; gap: 6px; margin: 8px 0; flex-wrap: wrap; } | |
| .tags span { border-radius: 999px; border: 1px solid #f0c69f; padding: 3px 8px; font-size: 0.78rem; color: #43506a; } | |
| .admin-stats-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } | |
| .admin-quick-actions { display: grid; gap: 12px; grid-template-columns: 2fr 1fr; margin-bottom: 12px; } | |
| .admin-action-panel { background: linear-gradient(180deg, #fff7ed 0%, #ffefd9 100%); border: 1px solid #f0c69b; border-radius: 12px; padding: 12px; } | |
| .admin-state-banner { border: 1px solid #f6c99c; border-radius: 12px; padding: 12px; background: #fff8ee; color: #7a4c0d; } | |
| .admin-state-banner strong { color: #8c4b0b; } | |
| .metric { margin: 0; font-size: 1.8rem; font-weight: 700; } | |
| .admin-panel-wide { grid-column: 1 / -1; } | |
| .admin-headline-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; } | |
| .admin-table { width: 100%; border-collapse: collapse; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; } | |
| .admin-table th, .admin-table td { text-align: left; padding: 10px; border-bottom: 1px solid var(--line); vertical-align: top; font-size: 0.9rem; } | |
| .admin-table th { color: var(--text-subtle); background: #fff2e7; font-weight: 600; } | |
| .admin-table tbody tr:last-child td { border-bottom: 0; } | |
| .version-timeline { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; } | |
| .version-timeline li { display: grid; gap: 4px; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; } | |
| .version-timeline li span:first-child { font-weight: 700; color: #8f4f13; } | |
| .empty-state { border: 1px dashed #c8d4e5; border-radius: 10px; padding: 10px; margin-top: 10px; color: var(--text-subtle); } | |
| .empty-state p { margin: 0 0 8px; } | |
| .governance-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; } | |
| .governance-list li { border: 1px solid var(--line); border-radius: 10px; padding: 10px; display: flex; justify-content: space-between; align-items: center; gap: 10px; } | |
| .governance-list p { margin: 5px 0 0; color: var(--text-subtle); font-size: 0.85rem; } | |
| .pill { display: inline-flex; align-items: center; border: 1px solid #cfd8e7; background: #f8fafc; color: #334155; border-radius: 999px; padding: 3px 8px; font-size: 0.75rem; font-weight: 600; } | |
| .pill + .pill { margin-left: 4px; } | |
| .pill-ok { background: #e8f9ef; border-color: #b6e8c7; color: #145638; } | |
| .pill-alert { background: #fff1db; border-color: #f5c08f; color: #8a4719; } | |
| .pill-stale { background: #fff0e5; border-color: #f5c8aa; color: #8b2828; } | |
| .pill-review { background: #fff3de; border-color: #f6c08c; color: #8f4f13; } | |
| .source-drawer { border: 1px solid #f2bea1; border-left: 4px solid #ff943f; } | |
| .source-drawer h4 { margin: 0 0 8px; } | |
| .source-drawer pre { margin: 6px 0 0; font-size: 0.82rem; line-height: 1.35; white-space: pre-wrap; word-break: break-word; color: #4d5f76; } | |
| .async-state { border: 1px dashed #f8be8a; border-radius: 8px; padding: 8px 10px; background: #fff4ea; color: #8a4a15; display: flex; justify-content: space-between; gap: 10px; align-items: center; } | |
| .audit-trail { border-top: 1px dashed #f4c79b; margin-top: 10px; padding-top: 10px; } | |
| .warn { color: #7a4c0d; } | |
| @media (max-width: 1080px) { .concepts-grid { grid-template-columns: 1fr; } .admin-stats-grid { grid-template-columns: 1fr; } .admin-quick-actions { grid-template-columns: 1fr; } .async-state { flex-direction: column; align-items: flex-start; } } | |
| @media (max-width: 920px) { .app-shell { grid-template-columns: 1fr; } .panel-grid { grid-template-columns: 1fr; } .governance-list li { align-items: flex-start; flex-direction: column; } } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="app-bg"></div> | |
| <main class="app-shell"> | |
| <aside class="sidebar"> | |
| <div class="brand"> | |
| <div class="brand-mark">E</div> | |
| <div> | |
| <h1>Elitez AI</h1> | |
| <p>Proposal Assistant</p> | |
| </div> | |
| </div> | |
| <nav class="workflow-rail" aria-label="Workflow stages"> | |
| <h2>Workflow</h2> | |
| <ol> | |
| <li class="stage active" data-workflow-stage="dashboard" role="button" tabindex="0"><span>1</span>Proposal Dashboard</li> | |
| <li class="stage" data-workflow-stage="intake" role="button" tabindex="0"><span>2</span>Tender Intake</li> | |
| <li class="stage" data-workflow-stage="requirements" role="button" tabindex="0"><span>3</span>Requirement Review</li> | |
| <li class="stage" data-workflow-stage="concepts" role="button" tabindex="0"><span>4</span>Concept Selection</li> | |
| <li class="stage" data-workflow-stage="costing" role="button" tabindex="0"><span>5</span>Costing Builder</li> | |
| <li class="stage" data-workflow-stage="studio" role="button" tabindex="0"><span>6</span>Proposal Studio</li> | |
| <li class="stage" data-workflow-stage="export" role="button" tabindex="0"><span>7</span>Review & Export</li> | |
| <li class="stage" data-workflow-stage="admin" role="button" tabindex="0"><span>8</span>Admin Governance</li> | |
| </ol> | |
| </nav> | |
| </aside> | |
| <section class="workspace"> | |
| <header class="topbar"> | |
| <div> | |
| <h2>Proposal Workspace</h2> | |
| <p>Prepare and approve input before costing and proposal generation</p> | |
| </div> | |
| <button class="primary-btn">+ New Proposal</button> | |
| </header> | |
| <section class="stage-tabs" aria-label="Workflow tabs"> | |
| <button class="tab active" data-stage="dashboard">Dashboard</button> | |
| <button class="tab" data-stage="intake">Tender Intake</button> | |
| <button class="tab" data-stage="requirements">Requirement Review</button> | |
| <button class="tab" data-stage="concepts">Concept Selection</button> | |
| <button class="tab" data-stage="costing">Costing Builder</button> | |
| <button class="tab" data-stage="studio">Proposal Studio</button> | |
| <button class="tab" data-stage="export">Review & Export</button> | |
| <button class="tab" data-stage="admin">Admin Governance</button> | |
| </section> | |
| <section class="stage-content active" data-content="dashboard"> | |
| <div class="panel-grid admin-stats-grid"> | |
| <article class="panel"><h3>Open Proposals</h3><p class="metric">24</p><p class="note">8 in review, 5 awaiting input</p></article> | |
| <article class="panel"><h3>Approval Blockers</h3><p class="metric">6</p><p class="note">Most common: missing budget ceiling</p></article> | |
| <article class="panel"><h3>Today Activity</h3><p class="metric">17 edits</p><p class="note">3 proposals moved to export</p></article> | |
| </div> | |
| <div class="panel-grid"> | |
| <article class="panel panel--soft"> | |
| <h3>Version Trail</h3> | |
| <ul class="version-timeline"> | |
| <li><span>v1.8.4</span><span>Finalized export package for Northstar kickoff (approved)</span></li> | |
| <li><span>v1.8.3</span><span>Resolved budget variance in staging</span></li> | |
| <li><span>v1.8.2</span><span>Added missing-source evidence links</span></li> | |
| </ul> | |
| <div class="action-row"> | |
| <button class="secondary-btn">Diff v1.8.3 → v1.8.4</button> | |
| <button class="secondary-btn">Create Hotfix Candidate</button> | |
| </div> | |
| </article> | |
| <article class="panel panel--soft"> | |
| <div class="admin-headline-row"> | |
| <h3>Proposal Production Version</h3> | |
| <span class="pill pill-ok">v1.8.4</span> | |
| </div> | |
| <p class="note">Published 2026-05-15 at 14:10 UTC</p> | |
| <div class="audit-trail"> | |
| <p><strong>Source evidence pack:</strong> 4 source files validated</p> | |
| <p><strong>Deploy status:</strong> <span class="pill pill-ok">Stable</span> <span class="pill">Edge region healthy</span></p> | |
| <p><strong>Audit:</strong> No policy violations in last 9 proposals</p> | |
| </div> | |
| </article> | |
| </div> | |
| <div class="panel-grid"> | |
| <article class="panel admin-panel-wide"> | |
| <div class="admin-headline-row"><h3>Proposal Queue</h3><button class="secondary-btn">Filter</button></div> | |
| <table class="admin-table"> | |
| <thead><tr><th>Proposal</th><th>Client</th><th>Status</th><th>Next Action</th></tr></thead> | |
| <tbody> | |
| <tr><td>D&D Annual Night 2026</td><td>Dungeons Guild Global</td><td><span class="pill">Requirement Review</span></td><td>Resolve budget ceiling</td></tr> | |
| <tr><td>Enterprise Kickoff Summit</td><td>Northstar Holdings</td><td><span class="pill pill-ok">Concept Approved</span></td><td>Proceed to costing</td></tr> | |
| <tr><td>Regional Product Expo</td><td>Orion Retail</td><td><span class="pill pill-alert">Export Blocked</span></td><td>Await legal approval sign-off</td></tr> | |
| </tbody> | |
| </table> | |
| </article> | |
| </div> | |
| </section> | |
| <section class="stage-content" data-content="intake"> | |
| <div class="panel-grid"> | |
| <article class="panel"> | |
| <h3>Event Metadata</h3> | |
| <form class="form-grid"> | |
| <label>Event Name<input type="text" value="D&D Annual Night 2026" /></label> | |
| <label>Client<input type="text" value="Dungeons Guild Global" /></label> | |
| <label>Event Date<input type="date" value="2026-08-12" /></label> | |
| <label>Owner<input type="text" value="Camila" /></label> | |
| </form> | |
| </article> | |
| <article class="panel"> | |
| <h3>Tender Documents</h3> | |
| <div class="dropzone">Drop files here or browse</div> | |
| <ul class="queue-list"> | |
| <li><strong>Tender_Scope_v4.pdf</strong><span>Parsed</span></li> | |
| <li><strong>FloorPlan_Arena.png</strong><span>Queued</span></li> | |
| <li><strong>Client_Budget_Email.msg</strong><span>Parsed</span></li> | |
| </ul> | |
| </article> | |
| </div> | |
| <div class="panel-grid"> | |
| <article class="panel"> | |
| <h3>Parsing Status</h3> | |
| <div class="loading">Extracting requirements and budget signals...</div> | |
| <div class="progress"><div class="progress-fill" style="width: 72%"></div></div> | |
| <p class="note">72% complete • last update 2m ago</p> | |
| </article> | |
| <article class="panel"> | |
| <h3>Detected Summary</h3> | |
| <ul class="summary-list"> | |
| <li>Attendance target: <strong>1,200 pax</strong></li> | |
| <li>Venue preference: <strong>Arena + breakout halls</strong></li> | |
| <li>Production scope: <strong>Stage, LED, broadcast stream</strong></li> | |
| <li class="warn">Budget range not explicit in tender package</li> | |
| </ul> | |
| <button class="secondary-btn">Request Missing Budget Detail</button> | |
| </article> | |
| <article class="panel async-state panel--soft"> | |
| <div><p><strong>Async status:</strong> upload parse retry needed</p><p class="note" style="margin-top: 6px">FloorPlan_Arena.png had OCR timeout on first attempt.</p></div> | |
| <button class="secondary-btn">Retry Parse</button> | |
| </article> | |
| </div> | |
| </section> | |
| <section class="stage-content" data-content="requirements"> | |
| <div class="panel-grid"> | |
| <article class="panel"> | |
| <h3>Requirement Sections</h3> | |
| <ul class="requirements-list"> | |
| <li><span>Venue & Logistics</span><span class="chip ok">Approved</span></li> | |
| <li><span>Program & Talent</span><span class="chip review">Needs Review</span></li> | |
| <li><span>Technical Production</span><span class="chip review">Needs Review</span></li> | |
| <li><span>Budget & Commercials</span><span class="chip blocked">Missing</span></li> | |
| </ul> | |
| </article> | |
| <article class="panel"> | |
| <h3>Editable Requirements</h3> | |
| <div class="field-stack"> | |
| <label>Technical Rider<textarea rows="4">Main stage with 12m LED wall, confidence 86%</textarea></label> | |
| <label>Streaming Requirement<textarea rows="3">Dual-language stream to client portal and YouTube</textarea></label> | |
| <label>Budget Notes<textarea rows="3" placeholder="No budget extracted. Add constraints."></textarea></label> | |
| </div> | |
| </article> | |
| </div> | |
| <div class="panel-grid"> | |
| <article class="panel"> | |
| <h3>Confidence & Missing Fields</h3> | |
| <ul class="summary-list"> | |
| <li>High confidence fields: <strong>14</strong></li> | |
| <li>Medium confidence fields: <strong>5</strong></li> | |
| <li>Low confidence fields: <strong>3</strong></li> | |
| <li class="warn">Missing: budget ceiling, procurement timeline</li> | |
| </ul> | |
| </article> | |
| <article class="panel"> | |
| <h3>Traceability Drawer</h3> | |
| <p class="note">Source excerpt for "LED wall":</p> | |
| <blockquote class="source">"Main plenary requires immersive visual backdrop minimum 40ft width"</blockquote> | |
| <div class="action-row"> | |
| <button class="secondary-btn">View Source Context</button> | |
| <button class="primary-btn">Approve & Continue</button> | |
| </div> | |
| </article> | |
| <article class="panel source-drawer"> | |
| <h4>Source Evidence Drawer</h4> | |
| <pre>Doc: tender_addendum_2026-05-01.txt\nParagraph: p-14\nConfidence: 0.94</pre> | |
| <p class="note">Linked to Budget / Logistics and Technical sections.</p> | |
| </article> | |
| </div> | |
| </section> | |
| <section class="stage-content" data-content="concepts"> | |
| <div class="panel-grid concepts-grid"> | |
| <article class="panel concept-card selected"> | |
| <h3>Concept A: Future Forge</h3> | |
| <p>Industrial-tech keynote arc with broadcast-first pacing.</p> | |
| <div class="tags"><span>High Fit</span><span>Premium Build</span></div> | |
| <p class="note">KB refs: APAC Summit 2025, Broadcast Kit v3</p> | |
| <button class="secondary-btn">Selected for Costing</button> | |
| </article> | |
| <article class="panel concept-card"> | |
| <h3>Concept B: Community Nexus</h3> | |
| <p>Audience participation and fan-zone emphasis.</p> | |
| <div class="tags"><span>Medium Fit</span><span>Value Build</span></div> | |
| <p class="note">KB refs: Fan Expo 2024, Activations Pack</p> | |
| <button class="secondary-btn">Select Concept</button> | |
| </article> | |
| <article class="panel concept-card"> | |
| <h3>Concept C: Prestige Stagecraft</h3> | |
| <p>Cinematic reveal sequence with elevated scenic design.</p> | |
| <div class="tags"><span>Medium Fit</span><span>High Cost</span></div> | |
| <p class="note">KB refs: Awards Gala 2025, Scenic Library</p> | |
| <button class="secondary-btn">Select Concept</button> | |
| </article> | |
| </div> | |
| <div class="panel-grid"> | |
| <article class="panel"> | |
| <h3>Regenerate Concepts</h3> | |
| <label>Guidance<input type="text" value="Keep concept premium but reduce scenic complexity by 20%" /></label> | |
| <div class="action-row"><button class="secondary-btn">Regenerate with Guidance</button></div> | |
| </article> | |
| <article class="panel"> | |
| <h3>Approval State</h3> | |
| <ul class="summary-list"> | |
| <li>Selected concept: <strong>Future Forge</strong></li> | |
| <li>Reviewer: <strong>Proposal Manager</strong></li> | |
| <li>Status: <strong>Approved for Costing</strong></li> | |
| </ul> | |
| <button class="primary-btn">Proceed to Costing Builder</button> | |
| </article> | |
| </div> | |
| </section> | |
| <section class="stage-content" data-content="costing"> | |
| <div class="panel-grid"> | |
| <article class="panel admin-panel-wide"> | |
| <div class="admin-headline-row"> | |
| <h3>Line-Item Costing</h3> | |
| <div class="action-row"> | |
| <button class="primary-btn" data-costing-add>+ Add Cost Item</button> | |
| <button class="secondary-btn" data-costing-version>Snapshot Costing Version</button> | |
| </div> | |
| </div> | |
| <table class="admin-table"> | |
| <thead><tr><th>Item</th><th>Qty</th><th>Unit Cost</th><th>Total</th><th>Status</th><th>Source / Variance</th><th>Actions</th></tr></thead> | |
| <tbody> | |
| <tr><td>LED Wall 12m</td><td>2 days</td><td>$4,850</td><td>$9,700</td><td><span class="pill pill-ok">Priced</span></td><td><span class="pill pill-ok">Contracted</span> <span class="pill">+2.1% variance</span></td><td class="table-actions"><button class="secondary-btn" data-costing-action="duplicate">Duplicate</button><button class="secondary-btn" data-costing-action="edit">Override</button><button class="secondary-btn" data-costing-action="delete">Remove</button></td></tr> | |
| <tr><td>Broadcast Crew</td><td>1 event</td><td>$7,200</td><td>$7,200</td><td><span class="pill pill-ok">Priced</span></td><td><span class="pill pill-ok">KB Rate</span> <span class="pill">0.0% variance</span></td><td class="table-actions"><button class="secondary-btn" data-costing-action="duplicate">Duplicate</button><button class="secondary-btn" data-costing-action="edit">Override</button><button class="secondary-btn" data-costing-action="delete">Remove</button></td></tr> | |
| <tr><td>Talent Rider Add-ons</td><td>1 package</td><td>Missing</td><td>Missing</td><td><span class="pill pill-alert">Needs Price</span></td><td><span class="pill pill-alert">No source</span> <span class="pill">Missing rate</span></td><td class="table-actions"><button class="secondary-btn" data-costing-action="manual">Manual Entry</button><button class="secondary-btn" data-costing-action="edit">Override</button><button class="secondary-btn" data-costing-action="delete">Remove</button></td></tr> | |
| </tbody> | |
| </table> | |
| <div class="result-banner"><p><strong>Missing item resolution:</strong> Add missing catalog price for "Talent Rider Add-ons" or enable manual override.</p></div> | |
| </article> | |
| </div> | |
| <div class="panel-grid admin-stats-grid"> | |
| <article class="panel"><h3>Subtotal</h3><p class="metric">$43,280</p><p class="note">Based on priced lines only</p></article> | |
| <article class="panel"><h3>Markup</h3><p class="metric">22%</p><p class="note">Target margin: 17.8% • Current gross: $52,800</p></article> | |
| <article class="panel"><h3>Current Version</h3><p class="metric">Costing v3</p><p class="note">Updated 2026-05-15 14:22 UTC</p></article> | |
| </div> | |
| <div class="panel-grid"> | |
| <article class="panel admin-panel-wide"> | |
| <h3>Costing Version History</h3> | |
| <ul class="summary-list"> | |
| <li><span>v3 — Draft Freeze</span><span class="pill pill-ok">Ready for Export</span></li> | |
| <li><span>v2 — Post manual override cleanup</span><span class="pill pill-ok">Ready</span></li> | |
| <li><span>v1 — Initial AI extraction</span><span class="pill pill-stale">Superseded</span></li> | |
| </ul> | |
| <div class="action-row"> | |
| <button class="secondary-btn">Restore v2</button> | |
| <button class="secondary-btn">Export v3 XLSX</button> | |
| <button class="secondary-btn" data-costing-version>Create New Version</button> | |
| </div> | |
| </article> | |
| </div> | |
| </section> | |
| <section class="stage-content" data-content="studio"> | |
| <div class="panel-grid"> | |
| <article class="panel"> | |
| <h3>Slide Outline</h3> | |
| <ul class="requirements-list"> | |
| <li><span>01 Executive Summary</span><span class="chip ok">Static</span></li> | |
| <li><span>02 Event Vision</span><span class="chip review">Dynamic</span></li> | |
| <li><span>03 Experience Design</span><span class="chip review">Generated</span></li> | |
| <li><span>04 Budget & Timeline</span><span class="chip blocked">Pending source</span></li> | |
| </ul> | |
| <div class="action-row" style="margin-top: 10px"> | |
| <button class="secondary-btn">Reorder Slides</button> | |
| <button class="secondary-btn">Remove Slide</button> | |
| <button class="secondary-btn">Add Slide</button> | |
| </div> | |
| </article> | |
| <article class="panel"> | |
| <h3>Preview Canvas</h3> | |
| <div class="preview-canvas"> | |
| <div class="preview-stack"> | |
| <p><strong>03 — Experience Design</strong></p> | |
| <p>Generated with AI. Tone: premium, broadcast-first, immersive.</p> | |
| <p class="note">Source of truth: concept deck + pricing catalog</p> | |
| </div> | |
| </div> | |
| <div class="action-row"> | |
| <button class="secondary-btn">Regenerate Section</button> | |
| <button class="secondary-btn">Regenerate All</button> | |
| <button class="secondary-btn">Remove Selected</button> | |
| </div> | |
| </article> | |
| <article class="panel async-state"> | |
| <div> | |
| <p><strong>Deck render status:</strong> Sync in progress</p> | |
| <p class="note" style="margin-top: 6px">Image optimization retry 1/3; fallback template available.</p> | |
| <p class="warn" style="margin-top: 6px">Render failure observed on slide 04: missing budget input.</p> | |
| </div> | |
| <div class="action-row"> | |
| <button class="secondary-btn">Retry Render</button> | |
| <button class="secondary-btn">Check Render Queue</button> | |
| </div> | |
| </article> | |
| </div> | |
| </section> | |
| <section class="stage-content" data-content="export"> | |
| <div class="panel-grid"> | |
| <article class="panel"> | |
| <h3>Readiness Checklist</h3> | |
| <ul class="summary-list"> | |
| <li>Requirements approved <strong>Yes</strong></li> | |
| <li>Concept approved <strong>Yes</strong></li> | |
| <li>Costing complete <strong>Yes</strong></li> | |
| <li>Final approver selected <strong>Yes</strong></li> | |
| <li class="warn">Blocked reason: talent add-on still missing source file reference</li> | |
| </ul> | |
| </article> | |
| <article class="panel"> | |
| <h3>Final Approval Handoff</h3> | |
| <ul class="summary-list"> | |
| <li>Proposal Manager <strong>Approved</strong></li> | |
| <li>Finance <strong>Approved</strong></li> | |
| <li>Legal <strong>Approved</strong></li> | |
| </ul> | |
| <div class="action-row"> | |
| <button class="secondary-btn">Request Final Approval</button> | |
| <button class="primary-btn">Handoff to Legal QA</button> | |
| </div> | |
| </article> | |
| </div> | |
| <div class="panel-grid"> | |
| <article class="panel admin-panel-wide"> | |
| <h3>Export Package Summary</h3> | |
| <ul class="summary-list"> | |
| <li>Draft ID: <strong>export_20260515_1422</strong></li> | |
| <li>Files: <strong>proposal.pdf, deck.pptx, costing.csv, manifest.json</strong></li> | |
| <li>Size: <strong>19.8 MB</strong></li> | |
| <li>Generated: <strong>2026-05-15 14:22 UTC</strong></li> | |
| <li>State: <strong><span class="pill pill-review">Blocked by source quality</span></strong></li> | |
| </ul> | |
| <div class="action-row"> | |
| <button class="secondary-btn">Download ZIP</button> | |
| <button class="secondary-btn">Open Manifest</button> | |
| <button class="secondary-btn">Retry Blocked Export</button> | |
| </div> | |
| </article> | |
| </div> | |
| </section> | |
| <section class="stage-content" data-content="admin"> | |
| <div class="admin-quick-actions"> | |
| <div class="admin-action-panel"> | |
| <h3>Governance Actions</h3> | |
| <p class="note">Use these checks before publishing edits to users or template packs.</p> | |
| <div class="action-row"> | |
| <button class="secondary-btn" data-action="run-duplicate-audit">Run Duplicate Audit</button> | |
| <button class="secondary-btn" data-action="run-stale-scan">Refresh Stale Scan</button> | |
| <button class="secondary-btn" data-action="publish-template-changes">Publish Template Changes</button> | |
| <button class="secondary-btn" data-action="publish-kb-changes">Publish KB Asset Changes</button> | |
| </div> | |
| <div class="result-banner"><p><strong>Last action result:</strong> duplicate audit completed (4 candidates), stale scan returned 2 stale assets.</p></div> | |
| </div> | |
| <div class="admin-state-banner"> | |
| <p><strong>Guardrail Status:</strong> pricing variance <span class="pill pill-alert">1 active</span> • stale items <span class="pill pill-stale">2 active</span> • inactive templates <span class="pill pill-alert">2 active</span></p> | |
| </div> | |
| </div> | |
| <div class="panel-grid admin-stats-grid"> | |
| <article class="panel"><h3>Pricing Integrity</h3><p class="metric">18 SKUs</p><p class="note">3 stale rates and 1 variance warning</p></article> | |
| <article class="panel"><h3>Knowledge Assets</h3><p class="metric">46 active assets</p><p class="note">4 duplicate candidates detected</p></article> | |
| <article class="panel"><h3>Template Health</h3><p class="metric">12 templates</p><p class="note">2 inactive templates require review</p></article> | |
| </div> | |
| <div class="panel-grid"> | |
| <article class="panel admin-surface" data-admin-surface data-admin-empty-toggle="tbody tr"> | |
| <div class="admin-headline-row"><h3>Pricing Catalog Manager</h3><button class="primary-btn" data-action="pricing-add-line">+ Add Line Item</button></div> | |
| <table class="admin-table"> | |
| <thead><tr><th>Item</th><th>Unit</th><th>Current Price</th><th>Last Updated</th><th>Governance</th></tr></thead> | |
| <tbody> | |
| <tr><td>LED Wall 12m</td><td>per day</td><td>$4,850</td><td>2026-03-02</td><td><span class="pill pill-stale">Stale</span> <span class="pill">tech</span><div class="action-row" style="margin-top: 6px"><button class="secondary-btn" data-action="pricing-refresh">Refresh</button><button class="secondary-btn" data-action="pricing-mark-variance">Mark Variance</button></div></td></tr> | |
| <tr><td>Broadcast Crew</td><td>per event</td><td>$7,200</td><td>2026-05-12</td><td><span class="pill pill-ok">Healthy</span> <span class="pill">production</span><div class="action-row" style="margin-top: 6px"><button class="secondary-btn" data-action="pricing-refresh">Refresh</button></div></td></tr> | |
| <tr><td>Registration App</td><td>license</td><td>$1,900</td><td>2026-01-19</td><td><span class="pill pill-alert">Variance</span> <span class="pill">software</span><div class="action-row" style="margin-top: 6px"><button class="secondary-btn" data-action="pricing-resolve">Resolve</button></div></td></tr> | |
| </tbody> | |
| </table> | |
| <div class="empty-state" hidden><p>No additional pricing line items in this snapshot.</p><button class="secondary-btn">Load Full Pricing Catalog</button></div> | |
| </article> | |
| </div> | |
| <div class="panel-grid"> | |
| <article class="panel admin-surface" data-admin-surface data-admin-empty-toggle="li"> | |
| <div class="admin-headline-row"><h3>Knowledge-Base Asset Library</h3><button class="secondary-btn" data-action="kb-upload-asset">Upload Asset</button></div> | |
| <ul class="governance-list"> | |
| <li><div><strong>APAC Summit 2025 Deck</strong><p>case_study • ownership: Sales Ops • updated 2026-05-13</p></div><div><span class="pill pill-ok">Active</span> <span class="pill">enterprise</span></div><div class="action-row"><button class="secondary-btn" data-action="kb-publish">Publish</button><button class="secondary-btn" data-action="kb-duplicate-check">Run Duplicate Check</button></div></li> | |
| <li><div><strong>Expo Broadcast Playbook (v2)</strong><p>playbook • ownership: Production • updated 2026-04-22</p></div><div><span class="pill pill-alert">Duplicate Candidate</span> <span class="pill">broadcast</span></div><div class="action-row"><button class="secondary-btn" data-action="kb-review-duplicate">Review Duplicate</button><button class="secondary-btn" data-action="kb-archive">Archive</button></div></li> | |
| <li><div><strong>Legacy Procurement Checklist</strong><p>policy • ownership: Finance • updated 2025-11-02</p></div><div><span class="pill pill-stale">Stale</span> <span class="pill">procurement</span></div><div class="action-row"><button class="secondary-btn" data-action="kb-refresh-metadata">Refresh Metadata</button><button class="secondary-btn" data-action="kb-publish">Publish</button></div></li> | |
| </ul> | |
| <div class="empty-state" hidden><p>No additional KB assets pending import.</p><button class="secondary-btn">Check Connector Feed</button></div> | |
| </article> | |
| <article class="panel admin-surface" data-admin-surface data-admin-empty-toggle="li"> | |
| <div class="admin-headline-row"><h3>Template Governance</h3><button class="secondary-btn" data-action="template-create">Create Template</button></div> | |
| <ul class="governance-list"> | |
| <li><div><strong>Premium Pitch v4</strong><p>owner: Proposal Team • usage: 22 proposals</p></div><div><span class="pill pill-ok">Active</span> <span class="pill">premium</span></div><div class="action-row"><button class="secondary-btn" data-action="template-publish">Publish</button><button class="secondary-btn" data-action="template-set-inactive">Set Inactive</button></div></li> | |
| <li><div><strong>Enterprise Minimal</strong><p>owner: Bid Ops • usage: 4 proposals</p></div><div><span class="pill pill-alert">Inactive</span> <span class="pill">enterprise</span></div><div class="action-row"><button class="secondary-btn" data-action="template-review-inactive">Review Inactive</button><button class="secondary-btn" data-action="template-reactivate">Reactivate</button></div></li> | |
| <li><div><strong>Government RFP Layout</strong><p>owner: Compliance • usage: 11 proposals</p></div><div><span class="pill pill-ok">Compliant</span> <span class="pill">public_sector</span></div><div class="action-row"><button class="secondary-btn" data-action="template-audit-history">Audit History</button><button class="secondary-btn" data-action="template-review">Review</button></div></li> | |
| </ul> | |
| <div class="empty-state" hidden><p>No archived templates require action.</p><button class="secondary-btn">Open Template Registry</button></div> | |
| </article> | |
| </div> | |
| </section> | |
| </section> | |
| </main> | |
| <script> | |
| function setActiveStage(stage, tabs, contents, railStages) { | |
| tabs.forEach(t => t.classList.toggle('active', t.dataset.stage === stage)); | |
| contents.forEach(section => section.classList.toggle('active', section.dataset.content === stage)); | |
| railStages.forEach(item => item.classList.toggle('active', item.dataset.workflowStage === stage)); | |
| } | |
| function syncAdminEmptyStates(documentRef) { | |
| documentRef.querySelectorAll('[data-admin-surface]').forEach(surface => { | |
| const selector = surface.dataset.adminEmptyToggle; | |
| const rows = selector ? surface.querySelectorAll(selector) : []; | |
| const emptyState = surface.querySelector('.empty-state'); | |
| if (!emptyState) return; | |
| emptyState.hidden = rows.length > 0; | |
| }); | |
| } | |
| window.ElitezWorkflow = { setActiveStage, syncAdminEmptyStates }; | |
| const tabs = document.querySelectorAll('.tab'); | |
| const contents = document.querySelectorAll('.stage-content'); | |
| const railStages = document.querySelectorAll('[data-workflow-stage]'); | |
| const { setActiveStage: sas, syncAdminEmptyStates: saes } = window.ElitezWorkflow; | |
| const showStatus = message => { | |
| let status = document.getElementById('workflow-status'); | |
| if (!status) { | |
| status = document.createElement('div'); | |
| status.id = 'workflow-status'; | |
| status.className = 'result-banner'; | |
| status.setAttribute('role', 'status'); | |
| status.setAttribute('aria-live', 'polite'); | |
| document.querySelector('.workspace').appendChild(status); | |
| } | |
| status.innerHTML = '<p>' + message + '</p>'; | |
| }; | |
| const actionOutcomeByKey = { | |
| 'run-duplicate-audit': { message: 'Duplicate audit completed: 4 candidates found across pricing and KB assets.', tone: 'ok' }, | |
| 'run-stale-scan': { message: 'Stale scan completed: 2 stale pricing SKUs, 1 stale KB asset need refresh.', tone: 'ok' }, | |
| 'publish-template-changes': { message: 'Template changes published after guardrails passed. Governance snapshot updated.', tone: 'ok' }, | |
| 'publish-kb-changes': { message: 'Publish failed: KB asset changes blocked by pending legal review queue.', tone: 'error' }, | |
| 'pricing-add-line': { message: 'Pricing line item created in staging catalog.', tone: 'ok' }, | |
| 'pricing-refresh': { message: 'Pricing source refreshed; variance flags recalculated.', tone: 'ok' }, | |
| 'pricing-mark-variance': { message: 'Variance record opened with supplier and finance references attached.', tone: 'ok' }, | |
| 'pricing-resolve': { message: 'Variance issue resolved for selected software package.', tone: 'ok' }, | |
| 'kb-upload-asset': { message: 'KB asset uploaded and queued for duplication scan.', tone: 'ok' }, | |
| 'kb-publish': { message: 'KB asset publish attempt blocked: draft requires metadata owner approval.', tone: 'error' }, | |
| 'kb-duplicate-check': { message: 'Duplicate check completed. 1 candidate in KB namespace.', tone: 'ok' }, | |
| 'kb-review-duplicate': { message: 'Duplicate review opened with similarity evidence and source links.', tone: 'ok' }, | |
| 'kb-archive': { message: 'KB asset archived and removed from active proposals.', tone: 'ok' }, | |
| 'kb-refresh-metadata': { message: 'Metadata refreshed from external connector and tags synchronized.', tone: 'ok' }, | |
| 'template-create': { message: 'Template draft created; editor opened in draft mode.', tone: 'ok' }, | |
| 'template-publish': { message: 'Template publish failed: review step required for inactive references.', tone: 'error' }, | |
| 'template-set-inactive': { message: 'Template set to inactive; existing active references were blocked.', tone: 'error' }, | |
| 'template-review-inactive': { message: 'Inactive template review queued for compliance and design review.', tone: 'ok' }, | |
| 'template-reactivate': { message: 'Template reactivation queued after required approvals.', tone: 'ok' }, | |
| 'template-audit-history': { message: 'Template audit history loaded with 3 policy violations resolved.', tone: 'ok' }, | |
| 'template-review': { message: 'Template review requested and added to the approval queue.', tone: 'ok' } | |
| }; | |
| document.querySelectorAll('[data-costing-action], [data-costing-add], [data-costing-version]').forEach(action => { | |
| action.addEventListener('click', () => { | |
| if (action.dataset.costingAction === 'duplicate') showStatus('Costing line duplicated, version state unchanged until snapshot is saved.'); | |
| else if (action.dataset.costingAction === 'delete') showStatus('Costing line marked for deletion. Save to persist changes.'); | |
| else if (action.dataset.costingAction === 'edit' || action.dataset.costingAction === 'manual') showStatus('Manual override applied to the selected line. Recompute totals.'); | |
| else showStatus('Costing version snapshot created. Previous version moved to history.'); | |
| }); | |
| }); | |
| document.querySelectorAll('.admin-action-panel .secondary-btn, .admin-surface .secondary-btn, .stage-content .secondary-btn, .stage-content .primary-btn, .stage-content [data-action]').forEach(button => { | |
| if (button.matches('[data-costing-action], [data-costing-add], [data-costing-version]')) return; | |
| button.addEventListener('click', () => { | |
| const labels = button.textContent.trim(); | |
| const key = button.dataset.action || labels.toLowerCase().replace(/[^a-z0-9]+/g, '-'); | |
| if (labels.includes('Open') || labels.includes('Download') || labels.includes('Check Render Queue')) return; | |
| const actionResult = actionOutcomeByKey[key]; | |
| if (actionResult) { showStatus('<span class="' + (actionResult.tone === 'error' ? 'result-banner--error' : '') + '">' + actionResult.message + '</span>'); return; } | |
| showStatus(labels + ' executed. Check result panel for state.'); | |
| }); | |
| }); | |
| tabs.forEach(tab => { | |
| tab.addEventListener('click', () => { | |
| sas(tab.dataset.stage, tabs, contents, railStages); | |
| saes(document); | |
| }); | |
| }); | |
| railStages.forEach(stageNode => { | |
| const stage = stageNode.dataset.workflowStage; | |
| if (!stage) return; | |
| const activate = () => { sas(stage, tabs, contents, railStages); saes(document); }; | |
| stageNode.addEventListener('click', activate); | |
| stageNode.addEventListener('keydown', event => { if (event.key === 'Enter' || event.key === ' ') { event.preventDefault(); activate(); } }); | |
| }); | |
| sas('dashboard', tabs, contents, railStages); | |
| saes(document); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment