Update help docs and AI knowledge base for onboarding overhaul

GettingStarted.cshtml: updated Setup Wizard description from 10-step to
5-step, revised time estimate (5–10 min), added new "After the Wizard"
section explaining the guided activation first-workflow flow and the
progress widget (what it tracks, how the highlight works, when it
disappears, Admin-only visibility).

HelpKnowledgeBase.cs (AI assistant): updated Setup Wizard entry to 5 steps,
replaced old step list (removed steps 5–8, 10), updated new company
quick-start checklist to reference the 5-step wizard and the post-wizard
progress widget. Added new GUIDED ACTIVATION section covering the two
onboarding paths (Quote First / Job First), the Daily Board intro experience,
and how the banner auto-dismisses. Updated Common Workflows to reflect the
new onboarding order. Dashboard section now describes the progress widget
and its six tracked steps.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-04-28 21:10:59 -04:00
parent 8aae30765f
commit b1337d3b61
2 changed files with 72 additions and 27 deletions
@@ -247,8 +247,9 @@
<i class="bi bi-magic flex-shrink-0 mt-1"></i>
<div>
<strong>New to the system?</strong> Use the <a href="/SetupWizard">Setup Wizard</a> to
configure your company, operating costs, named ovens, and initial inventory in a guided
10-step walkthrough. The wizard is the fastest way to get your shop configured and ready.
configure your company profile, operating costs, named ovens, and notifications in a guided
5-step walkthrough — takes about 510 minutes. After the wizard, the Dashboard will show
a progress checklist to guide you through your first live workflow.
</div>
</div>
<p>
@@ -327,6 +328,57 @@
</div>
</section>
<section id="after-the-wizard" class="mb-5">
<h2 class="h4 fw-bold border-bottom pb-2 mb-3">
<i class="bi bi-rocket-takeoff text-primary me-2"></i>After the Wizard — Your First Workflow
</h2>
<p>
Once the Setup Wizard is complete, two things appear on your Dashboard to guide you through your
first live workflow:
</p>
<h5 class="fw-semibold">Guided Activation</h5>
<p>
A banner prompts you to run a short first-workflow walkthrough. Choose a starting path — either
<strong>Quote First</strong> (create a quote, get it approved, convert it to a job) or
<strong>Job First</strong> (create a job directly). The system creates a sample customer
record for you to use during the walkthrough.
</p>
<p>
After the job is created you are taken to the <strong>Daily Board</strong> — your shop in real
time. Every active job appears on the board by stage. The new job is highlighted so you can
find it easily. Drag it to its next stage to see how your workflow updates live. Once you have
moved the job, the board prompts you to create the invoice when the work is done.
</p>
<h5 class="fw-semibold">Progress Widget</h5>
<p>
Below the guided activation banner you will see a <strong>"Get the most out of your shop"</strong>
widget. It tracks six steps that unlock the full day-to-day workflow:
</p>
<ol>
<li>Create your first job or quote</li>
<li>Move a job through your workflow</li>
<li>Send your first invoice</li>
<li>Bring your crew in (invite team members)</li>
<li>Customize your workflow labels (job stages, priorities, prep services)</li>
<li>Set how you get paid (payment terms and quote defaults)</li>
</ol>
<p>
Each incomplete step shows a description and a button that takes you directly to the right place.
The next recommended step is highlighted. The widget disappears once all six steps are done.
You can collapse it using the chevron button — the collapsed state is saved in your browser.
</p>
<div class="alert alert-permanent alert-info d-flex gap-2 mb-0" role="alert">
<i class="bi bi-info-circle-fill flex-shrink-0 mt-1"></i>
<div>
The progress widget and guided activation banner are visible to <strong>Company Admins only</strong>.
Other roles land directly on the standard Dashboard.
</div>
</div>
</section>
</div>
<div class="col-lg-3 d-none d-lg-block">
@@ -340,6 +392,7 @@
<a class="nav-link py-1 px-3 small text-body" href="#navigating">Navigating the System</a>
<a class="nav-link py-1 px-3 small text-body" href="#roles-and-permissions">Roles and Permissions</a>
<a class="nav-link py-1 px-3 small text-body" href="#your-first-steps">Your First Steps</a>
<a class="nav-link py-1 px-3 small text-body" href="#after-the-wizard">After the Wizard</a>
</nav>
</div>
</div>