PowderCoatingLogix/features/progress-style-bar.md

Add a dashboard progress widget for post-onboarding activation.

Context: This is a powder coating shop management app. We recently shortened the setup wizard and added a guided activation flow. Some setup items are intentionally deferred so users can evaluate the system quickly before fully configuring everything.

Goal: Create a dashboard widget that helps users “get the most out of their shop” without making it feel like unfinished homework.

Do NOT call it “Complete setup.”

Recommended title: “Get the most out of your shop”

Purpose: Show progress based on real usage/configuration milestones and give users clear next actions.

Requirements:

1. Inspect existing dashboard structure

• Locate the dashboard controller/view/components.
• Reuse existing card, alert, progress bar, and button styles.
• Follow existing UI conventions.

2. Widget visibility Show the widget for companies that:

• Have completed the setup wizard
• Are not yet meaningfully activated OR still have recommended setup tasks incomplete

It is okay to keep showing it until all tasks are complete.

3. Progress calculation Create a checklist of 5–6 items max.

Suggested items:

A. Create your first quote or job Complete when:

• company has at least one quote OR at least one job

CTA:

• “Create quote/job” or “Start workflow”

B. Move a job through your workflow Complete when:

• at least one job has had a status/stage change
• If there is no existing way to detect this, use the closest available activity/history/status timestamp

CTA:

• “Open daily board”

C. Create your first invoice Complete when:

• company has at least one invoice

CTA:

• “Create invoice”

D. Invite your team Complete when:

• company has more than one active user/team member

CTA:

• “Invite team”

E. Customize pricing Complete when:

• company has configured pricing tiers/custom pricing settings beyond defaults
• If this is hard to detect reliably, make this optional or use a simple existing flag/count

CTA:

• “Customize pricing”

F. Review payment terms Complete when:

• company has customized payment terms from default
• If this is hard to detect reliably, make this optional or use a simple existing flag/value comparison

CTA:

• “Review terms”

4. UX copy Use friendly, value-focused language.

Widget title: “Get the most out of your shop”

Subtitle: “Complete a few quick steps to unlock the full workflow.”

Progress text: “X of Y complete”

Avoid wording like:

• “Incomplete setup”
• “Missing configuration”
• “Required steps”

5. Visual design

• Use a card-style widget near the top of the dashboard.
• Include a progress bar.
• Show checklist rows with completed and incomplete states.
• Completed items should feel rewarding.
• Incomplete items should have one clear CTA.
• Keep it compact and non-annoying.

6. Behavior

• Each checklist item should link to the most relevant existing page or action.
• Do not build new duplicate workflows.
• Reuse existing guided activation route for “Create your first quote or job” if available.
• If a task cannot be detected reliably yet, implement it conservatively or leave a TODO comment explaining why.

7. Data/query logic

• Prefer calculating progress server-side in the dashboard view model.
• Avoid expensive queries.
• Reuse existing repositories/services if available.
• Keep the logic readable and testable.

8. Dismissal behavior Add optional dismissal if easy:

• Let user collapse or dismiss the widget.
• If dismissed, do not permanently hide it forever unless all tasks are complete.
• Prefer “collapse” over full dismissal.
• Store dismissal/collapse state only if there is already a simple place to store dashboard preferences.

9. Important product guidance This widget should guide users from evaluation into real adoption.

The emotional framing should be: “You’re already making progress — here are the next valuable things to try.”

Not: “You failed to finish setup.”

10. Implementation style Before coding:

• Inspect relevant dashboard, setup wizard, guided activation, company preference, quote, job, invoice, user/team, pricing, and payment term structures.
• Propose a concise implementation plan.
• Then implement incrementally.

After coding:

• Summarize changed files.
• Explain how progress is calculated.
• Provide manual QA steps.

Manual QA scenarios:

• Brand new company after setup wizard
• Company with first quote/job created
• Company with moved job/status change
• Company with invoice created
• Company with invited team member
• Company with all tasks complete