feat: Onboarding / Auth Flow Frontend by tars919 · Pull Request #184 · GenerateNU/selfserve

tars919 · 2026-03-17T18:57:43Z

Description

Type of Change

Bug fix (non-breaking change that fixes an issue)
New feature (non-breaking change that adds functionality)
Breaking change (fix or feature that would cause existing functionality to not work as expected)
Refactoring (code improvement without changing functionality)
Documentation update
Configuration/infrastructure change
Performance improvement
Test coverage improvement

Related Issue(s)

Closes #131

What Changed?

full onboarding flow with 5 steps
Shared LeftPanel component reused across all steps to keep layout consistent
All steps use mock/local data for now, no backend integration yet

Testing & Validation

How this was tested

Ran the web dev server locally
Clicked through the Employee flow and manager flow

Screenshots/Recordings

Unfinished Work & Known Issues

[x ] None, this PR is complete and production-ready
The following items are intentionally deferred:

Notes & Nuances

Pre-Merge Checklist

Code Quality

[x ] Code follows the project's style guidelines and conventions
[ x] Self-review completed (I've reviewed my own code for obvious issues)
[x ] No debugging code, console logs, or commented-out code left behind
[x ] No merge conflicts with the base branch
[x ] Meaningful commit messages that explain the "why"

Testing & CI

[x ] All CI checks are passing
[x ] All new and existing tests pass locally
[x ] Test coverage hasn't decreased (or decrease is justified)
[ x] Linting passes without errors

Documentation

[x ] Code is self-documenting or includes helpful comments for complex logic
[x ] API documentation updated (if backend endpoints changed)
[x ] Type definitions are accurate and up-to-date

Reviewer Notes

Areas needing extra attention: ...
Questions for reviewers: ...

codecov · 2026-03-17T19:00:07Z

Codecov Report

❌ Patch coverage is 0.22727% with 439 lines in your changes missing coverage. Please review.
✅ Project coverage is 9.09%. Comparing base (1b14b08) to head (552f821).

Files with missing lines	Patch %	Lines
.../src/components/onboarding/PropertyDetailsStep.tsx	0.00%	90 Missing ⚠️
...s/web/src/components/onboarding/OnboardingPage.tsx	0.00%	65 Missing ⚠️
clients/web/src/routeTree.gen.ts	0.00%	61 Missing ⚠️
...s/web/src/components/onboarding/InviteTeamStep.tsx	0.00%	56 Missing ⚠️
...eb/src/components/onboarding/RoleSelectionStep.tsx	0.00%	43 Missing ⚠️
...web/src/components/onboarding/EmployeeRoleStep.tsx	0.00%	37 Missing ⚠️
...s/web/src/components/onboarding/onboardingMocks.ts	0.00%	29 Missing ⚠️
...ents/web/src/components/onboarding/WelcomeStep.tsx	0.00%	24 Missing ⚠️
clients/web/src/components/onboarding/RoleCard.tsx	5.00%	19 Missing ⚠️
...lients/web/src/components/onboarding/LeftPanel.tsx	0.00%	11 Missing ⚠️
... and 1 more

Additional details and impacted files

@@           Coverage Diff            @@
##            main    #184      +/-   ##
========================================
- Coverage   9.77%   9.09%   -0.68%     
========================================
  Files        126     136      +10     
  Lines       5024    5410     +386     
  Branches      24      24              
========================================
+ Hits         491     492       +1     
- Misses      4522    4907     +385     
  Partials      11      11

Flag	Coverage Δ
backend	`20.49% <ø> (ø)`
mobile	`84.00% <ø> (ø)`
web	`0.64% <0.22%> (-0.06%)`	⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

Files with missing lines	Coverage Δ
clients/web/src/routes/onboarding.tsx	`0.00% <0.00%> (ø)`
...lients/web/src/components/onboarding/LeftPanel.tsx	`0.00% <0.00%> (ø)`
clients/web/src/components/onboarding/RoleCard.tsx	`5.00% <5.00%> (ø)`
...ents/web/src/components/onboarding/WelcomeStep.tsx	`0.00% <0.00%> (ø)`
...s/web/src/components/onboarding/onboardingMocks.ts	`0.00% <0.00%> (ø)`
...web/src/components/onboarding/EmployeeRoleStep.tsx	`0.00% <0.00%> (ø)`
...eb/src/components/onboarding/RoleSelectionStep.tsx	`0.00% <0.00%> (ø)`
...s/web/src/components/onboarding/InviteTeamStep.tsx	`0.00% <0.00%> (ø)`
clients/web/src/routeTree.gen.ts	`0.00% <0.00%> (ø)`
...s/web/src/components/onboarding/OnboardingPage.tsx	`0.00% <0.00%> (ø)`
... and 1 more

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

danctila

just a couple things I noticed with the responsiveness:

we probably only really have to worry about getting down to around tablet size but either way its good to be more flexible than not

SelfServe text here is fixed:

CleanShot.2026-03-24.at.14.19.27.mp4

The outer container just shrinks width wise too much - it shouldn't be hardcoded but we ideally don't want it to stretch/shrink with each step that has different content inside:

CleanShot.2026-03-24.at.14.22.13.mp4

other things

all the components should use named exports instead of default exports
- 5 step componetns + left panel + role card + onboarding page should change
change interface Xprops to type Xprops = {...} for consitency
change the inline style={{}} props to Tailwind
- RoleCard.tsx does this correctly / uses Tailwind but isn't rendered anywhere. I think RoleSelectionStep and EmployeeRoleStep use inline styles to define this card
change the hardcoded colors to use our design tokens in styles.css

.github/workflows/BackendCI.yaml

backend/docs/swagger.yaml

backend/README.md

clients/shared/src/api/client.ts

clients/shared/src/api/config.ts

clients/package.json

clients/package-lock.json

package-lock.json

clients/shared/src/api/orval-mutator.ts

clients/web/src/components/onboarding/EmployeeRoleStep.tsx

clients/web/src/components/onboarding/WelcomeStep.tsx

clients/web/src/components/onboarding/EmployeeRoleStep.tsx

clients/web/src/components/onboarding/OnboardingPage.tsx

…, responsiveness fixes, revert prettier

danctila

🐐 ed job implementing the changes requested 🔥

the only thing I see left is the inline styles - if you could convert them to tailwind classes that would be the last thing then this is G2G

…nboarding-lofi :wq# the commit.

danctila

LGTM - I would just double check with @Dao-Ho on visuals to make sure things look / feel the same as before the style replacements 👍

Dao-Ho

For sizing, use tailwind rem sizing instead of hard pixels

For colors, never use taliwind defaults or hex codes, use color variables defind in our figma and styles.css if missing, add the new colors

Dao-Ho · 2026-03-18T00:01:20Z

backend/README.md

 ┌──────────────▼──────────────────────────┐
 │       Storage Layer                     │
 │  (internal/service/storage/postgres/)   │
-│  The Database itself                    │    


Did you mean to delete this?

Dao-Ho · 2026-03-19T15:56:26Z

.github/workflows/BackendCI.yaml

          name: selfserve-binary
          path: backend/bin/selfserve
-          retention-days: 7
+          retention-days: 7


This file shouldn't have been updated

same cmt, make sure your prettier config is setup properly. Lots of unrelated changes here

Dao-Ho · 2026-03-19T15:57:00Z

backend/README.md

@@ -190,4 +194,3 @@ The application reads configuration from environment variables (loaded from `con
 - `LLM_TIMEOUT`: Response timeout in seconds (default: 60)
 - `LLM_MAX_OUTPUT_TOKENS`: Max tokens for generation; lower values reduce latency (default: 1024)
 - `LLM_TEMPERATURE`: Sampling temperature 0–1; lower is more deterministic and often faster for extraction


There was no tangible change in this file - there shouldn't be changes here either

clients/web/src/components/onboarding/EmployeeRoleStep.tsx

Dao-Ho

seems like your diffs are back, your prettier might not be using the config or these changes are left over from previous diffs.

Dao-Ho · 2026-04-04T18:29:23Z

.github/workflows/BackendCI.yaml

          name: selfserve-binary
          path: backend/bin/selfserve
-          retention-days: 7
+          retention-days: 7


same cmt, make sure your prettier config is setup properly. Lots of unrelated changes here

clients/web/src/styles.css

clients/web/src/components/onboarding/PropertyDetailsStep.tsx

feat: auth lo fi screens

68016cd

tars919 and others added 6 commits March 17, 2026 15:01

fix: use import type for OnboardingFormData

fcda7f2

fix: run prettier on onboarding components

385e2c2

fix: remove broken requests.list route blocking CI

2cd6706

fix: prettier formatting

9282a6e

fix: prettier formatting

d8b9786

Merge branch 'main' into onboarding-lofi

75e2d36

vercel bot deployed to Preview March 18, 2026 00:12 View deployment

fix: prettier formatting

323c7e9

vercel bot deployed to Preview March 18, 2026 00:31 View deployment

final fix

86d33a8

vercel bot deployed to Preview March 18, 2026 00:36 View deployment

fixed the responsive view on the pages

93a60bc

GenerateNU deleted a comment from vercel bot Mar 24, 2026

danctila assigned tars919 Mar 24, 2026

danctila requested changes Mar 24, 2026

View reviewed changes

danctila reviewed Mar 24, 2026

View reviewed changes

clients/web/src/components/onboarding/WelcomeStep.tsx Outdated Show resolved Hide resolved

danctila reviewed Mar 24, 2026

View reviewed changes

clients/web/src/components/onboarding/EmployeeRoleStep.tsx Outdated Show resolved Hide resolved

danctila reviewed Mar 24, 2026

View reviewed changes

clients/web/src/components/onboarding/EmployeeRoleStep.tsx Show resolved Hide resolved

danctila reviewed Mar 24, 2026

View reviewed changes

clients/web/src/components/onboarding/OnboardingPage.tsx Outdated Show resolved Hide resolved

danctila added the changes requested label Mar 24, 2026

tars919 added 2 commits March 24, 2026 21:43

address PR review: named exports, type props, design tokens, RoleCard…

12ce85a

…, responsiveness fixes, revert prettier

resolve merge conflict in swagger.yaml

04c8a61

tars919 force-pushed the onboarding-lofi branch from 1081e2b to 04c8a61 Compare March 25, 2026 01:53

tars919 added 2 commits March 24, 2026 21:58

fix import order lint errors

1d58f7d

fix prettier formatting

5faba0d

danctila requested changes Mar 27, 2026

View reviewed changes

danctila changed the title ~~feat: auth lo fi screens~~ feat: web onboarding Apr 1, 2026

danctila changed the title ~~feat: web onboarding~~ feat: web onboarding FE Apr 1, 2026

danctila linked an issue Apr 1, 2026 that may be closed by this pull request

feat: Onboarding / Auth Flow Frontend #131

Open

danctila changed the title ~~feat: web onboarding FE~~ feat: Onboarding / Auth Flow Frontend Apr 1, 2026

tars919 added 2 commits April 4, 2026 12:25

Merge branch 'main' of https://github.com/GenerateNU/selfserve into o…

8a94275

…nboarding-lofi :wq# the commit.

fix: convert inline styles to Tailwind

b39c32f

tars919 requested a review from danctila April 4, 2026 17:02

danctila previously approved these changes Apr 4, 2026

View reviewed changes

Dao-Ho requested changes Apr 4, 2026

View reviewed changes

fix: restore prettier config and finalize onboarding styles

23947dc

tars919 dismissed danctila’s stale review via 23947dc April 4, 2026 18:09

fix: prettier formatting

28a12d6

tars919 requested a review from Dao-Ho April 4, 2026 18:19

Dao-Ho reviewed Apr 4, 2026

View reviewed changes

tars919 and others added 5 commits April 4, 2026 14:38

fix: revert unintended changes to CI and README

a4c68ff

fix: remove var() syntax and use Tailwind token shorthand

59e2cd2

Merge branch 'main' into onboarding-lofi

930c85c

Merge branch 'main' into onboarding-lofi

bd064cd

Merge branch 'main' into onboarding-lofi

552f821

Conversation

tars919 commented Mar 17, 2026 • edited by danctila Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Type of Change

Related Issue(s)

What Changed?

Testing & Validation

How this was tested

Screenshots/Recordings

Unfinished Work & Known Issues

Notes & Nuances

Pre-Merge Checklist

Code Quality

Testing & CI

Documentation

Reviewer Notes

Uh oh!

codecov bot commented Mar 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

danctila left a comment • edited by tars919 Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

just a couple things I noticed with the responsiveness:

SelfServe text here is fixed:

The outer container just shrinks width wise too much - it shouldn't be hardcoded but we ideally don't want it to stretch/shrink with each step that has different content inside:

other things

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

danctila left a comment

Choose a reason for hiding this comment

Uh oh!

danctila left a comment

Choose a reason for hiding this comment

Uh oh!

Dao-Ho left a comment

Choose a reason for hiding this comment

Uh oh!

Dao-Ho Mar 18, 2026

Choose a reason for hiding this comment

Uh oh!

Dao-Ho Mar 19, 2026

Choose a reason for hiding this comment

Uh oh!

Dao-Ho Apr 4, 2026

Choose a reason for hiding this comment

Uh oh!

Dao-Ho Mar 19, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Dao-Ho left a comment

Choose a reason for hiding this comment

Uh oh!

Dao-Ho Apr 4, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

tars919 commented Mar 17, 2026 •

edited by danctila

Loading

codecov bot commented Mar 17, 2026 •

edited

Loading

danctila left a comment •

edited by tars919

Loading