spouliot/PowderCoatingLogix
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Onboarding overhaul: slim wizard, progress widget, guided activation UX

Browse Source 
Setup Wizard: reduced from 10 steps to 5 (Company Info → QB Migration →
Pricing Defaults → Named Ovens → Notifications). Removed Doc Numbering,
Job Settings, Payment Terms, Pricing Tiers, and Team Members steps — these
all have sensible defaults and are accessible any time in Company Settings.
Wizard now completes in ~5 minutes instead of 15–20.

Dashboard progress widget (new): "Get the most out of your shop" checklist
appears for Company Admins after wizard completion. Tracks six post-setup
activation tasks with dynamic progress badge, motivating subtitle copy,
collapsed-state persistence via localStorage, and a full completion state
("Your shop is fully set up 🎉") that replaces the checklist at 100%.
The next recommended step is highlighted with a solid CTA button and a
subtle blue row tint. Completed steps show encouraging green subtext instead
of just "Done". Widget disappears from controller when AllDone would have
caused a silent vanish — now renders the completion state instead.

Guided activation (Daily Board): rewrote the BoardIntroStep callout to lead
with "This is your shop in real time" and a plain-English description of the
board's purpose. Added a separate InstructionText field to
GuidedActivationCalloutViewModel so the "Move this job to the next stage"
action prompt renders as a distinct bold line with an arrow icon rather than
being buried in the body copy. After the stage change, the confirmation
callout now reads "Nice — your workflow just updated" to reinforce what just
happened before prompting the invoice step.

All copy passes the "shop owner, not SaaS" test: no technical jargon,
benefit-driven descriptions, natural language throughout.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Scott Pouliot
2026-04-28 21:10:47 -04:00
parent 4d27a378ac
commit 8aae30765f
30 changed files with 10870 additions and 333 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/PowderCoating.Web/Views/GuidedActivation/Select.cshtml
+113
View File
@@ -0,0 +1,113 @@
@model PowderCoating.Web.ViewModels.GuidedActivation.GuidedActivationSelectionViewModel
@using PowderCoating.Shared.Constants
@{
ViewData["Title"] = "Start Your First Workflow";
}
@section Styles {
<style>
.ga-shell {
min-height: calc(100vh - 12rem);
display: flex;
align-items: center;
justify-content: center;
}
.ga-card {
width: min(920px, 100%);
border: 0;
border-radius: 1.25rem;
overflow: hidden;
box-shadow: 0 24px 70px rgba(15, 23, 42, 0.14);
}
.ga-hero {
background: linear-gradient(145deg, #0f172a 0%, #1d4ed8 100%);
color: white;
padding: 2.5rem;
}
.ga-option {
border: 1px solid var(--bs-border-color);
border-radius: 1rem;
padding: 1.25rem;
height: 100%;
cursor: pointer;
transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.ga-option:hover {
border-color: #2563eb;
transform: translateY(-2px);
box-shadow: 0 12px 24px rgba(37, 99, 235, 0.10);
}
.ga-option input {
margin-top: 0.2rem;
}
</style>
}
<div class="ga-shell">
<div class="card ga-card">
<div class="ga-hero">
<div class="text-uppercase small fw-semibold mb-2" style="letter-spacing:0.12em;opacity:0.8;">Guided Activation</div>
<h1 class="h2 fw-bold mb-2">Your shop is set up. Let's run your first workflow.</h1>
<p class="mb-0" style="max-width:42rem;color:rgba(255,255,255,0.82);">
Choose how jobs usually start for your shop and we'll guide you through it with real quotes, jobs, and invoices.
</p>
</div>
<div class="card-body p-4 p-lg-5">
<form asp-action="Select" method="post">
@Html.AntiForgeryToken()
<div asp-validation-summary="ModelOnly" class="text-danger mb-3"></div>
<p class="text-muted fw-semibold mb-3">How do jobs usually start for your shop?</p>
<div class="row g-3 mb-4">
<div class="col-md-6">
<label class="ga-option d-flex gap-3" for="pathQuoteFirst">
<input asp-for="OnboardingPath" id="pathQuoteFirst" type="radio"
value="@AppConstants.GuidedActivation.QuoteFirstPath" class="form-check-input" />
<span>
<span class="d-block fw-bold fs-5 text-dark">I send a quote first</span>
<span class="d-block text-muted mt-2">
Create a quote, convert it to a job, then invoice when work is complete.
</span>
</span>
</label>
</div>
<div class="col-md-6">
<label class="ga-option d-flex gap-3" for="pathJobFirst">
<input asp-for="OnboardingPath" id="pathJobFirst" type="radio"
value="@AppConstants.GuidedActivation.JobFirstPath" class="form-check-input" />
<span>
<span class="d-block fw-bold fs-5 text-dark">I start with a job</span>
<span class="d-block text-muted mt-2">
For walk-ins or approved work where you start immediately.
</span>
</span>
</label>
</div>
</div>
<div class="d-flex flex-wrap gap-2">
<button type="submit" class="btn btn-primary btn-lg px-4">
Continue
</button>
</div>
</form>
<form asp-action="Skip" method="post" class="mt-3">
@Html.AntiForgeryToken()
<button type="submit" class="btn btn-link text-muted px-0">Skip for now</button>
</form>
</div>
</div>
</div>
@section Scripts {
@{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}