whisper-money/resources/js/components
Víctor Falcón c433088806
User Onboarding Flow (#23)
## Summary

Implements a complete user onboarding flow that guides new users through
setting up their account after registration.

## Features

- **Step-by-step wizard UI** with progress indicator and smooth
animations
- **E2E Encryption setup** with password strength indicator and
explanation of how encryption works
- **Account creation** supporting all account types (checking, savings,
credit card, investment, pension)
- **Category customization** with explanation of category types
(expenses, income, transfer)
- **Smart rules explanation** covering why there is no AI
auto-categorization (privacy & E2EE)
- **Transaction/balance import** based on account type
- **Sync integration** to ensure data consistency with backend

## Flow Diagram

```mermaid
flowchart TD
    A[User Registration] --> B[Welcome]

    B --> E[Encryption Explained]
    
    E --> C{Has encryption key?}

    C -->|No|F[Encryption Setup]
    C -->|Yes|G{Has Existing Accounts?}
    G -->|Yes| H[Show Existing Accounts]
    G -->|No| I[Create First Account]
    
    H --> J[Continue]
    I --> K{Account Type?}
    
    K -->|Checking/Savings/Credit Card| L[Import Transactions]
    K -->|Investment/Pension| M[Import Balances]
    
    J --> N[Category Types Explanation]
    L --> N
    M --> N
    
    N --> O[Customize Categories]
    O --> P[Smart Rules Explanation]
    P --> Q[More Accounts?]
    
    Q -->|Add More| I
    Q -->|Finish| R[Complete]
    
    R --> S[Redirect to Dashboard]
    S --> T{Subscribed?}
    T -->|No| U[Subscribe Page]
    T -->|Yes| V[Dashboard]
```

## Technical Changes

### Backend
- Added `onboarded_at` field to users table with migration
- Created `EnsureOnboardingComplete` middleware for redirect logic
- Created `OnboardingController` with index and complete actions
- Custom `RegisterResponse` to redirect new users to onboarding
- Updated `AccountController::store` to return JSON for fetch requests

### Frontend
- `OnboardingLayout` - fullscreen layout with step progress
- `useOnboardingState` hook - manages step navigation and state
- 12 step components for each onboarding screen
- Backend sync after account creation and imports

### Tests
- Feature tests for onboarding middleware
- Updated existing tests to use `onboarded()` factory state
2025-12-12 13:06:08 +01:00
..
accounts User Onboarding Flow (#23) 2025-12-12 13:06:08 +01:00
automation-rules Quick Categorization Wizard (#21) 2025-12-09 14:38:39 +01:00
categories Add category type field support (#2) 2025-12-01 20:19:47 +01:00
dashboard Add tooltipSide prop to trend indicators to prevent overlap with balance button 2025-12-10 13:11:22 +01:00
icons Subscriptions (#15) 2025-12-06 19:09:56 +01:00
onboarding User Onboarding Flow (#23) 2025-12-12 13:06:08 +01:00
partials Improve header responsive behavior and refactor class names with cn utility 2025-12-06 20:44:37 +01:00
shared Transactions table rows clickable 2025-12-08 16:13:29 +01:00
transactions User Onboarding Flow (#23) 2025-12-12 13:06:08 +01:00
ui Refactor transaction UI components for better responsive layout and consistency 2025-12-10 13:28:45 +01:00
alert-error.tsx Set up a fresh Laravel app 2025-11-07 12:01:36 +00:00
app-content.tsx Set up a fresh Laravel app 2025-11-07 12:01:36 +00:00
app-logo-icon.tsx Add animated logo icon that transitions based on encryption key state 2025-12-12 11:24:42 +01:00
app-logo.tsx Add animated logo icon that transitions based on encryption key state 2025-12-12 11:24:42 +01:00
app-mobile-nav.tsx Mobile design (#17) 2025-12-08 15:43:09 +01:00
app-shell.tsx Set up a fresh Laravel app 2025-11-07 12:01:36 +00:00
app-sidebar-header.tsx Format + Open transactions on row click 2025-12-08 15:58:50 +01:00
app-sidebar.tsx Format + Open transactions on row click 2025-12-08 15:58:50 +01:00
appearance-dropdown.tsx Set up a fresh Laravel app 2025-11-07 12:01:36 +00:00
appearance-tabs.tsx Set up a fresh Laravel app 2025-11-07 12:01:36 +00:00
breadcrumbs.tsx Set up a fresh Laravel app 2025-11-07 12:01:36 +00:00
delete-user.tsx Set up a fresh Laravel app 2025-11-07 12:01:36 +00:00
encrypted-text.tsx fix: make encryption key storage SSR-safe to prevent 502 errors 2025-12-08 17:13:45 +01:00
encryption-key-button.tsx feat: Update encryption key button icon based on state 2025-11-07 20:20:09 +00:00
heading-small.tsx Set up a fresh Laravel app 2025-11-07 12:01:36 +00:00
heading.tsx Set up a fresh Laravel app 2025-11-07 12:01:36 +00:00
icon.tsx Set up a fresh Laravel app 2025-11-07 12:01:36 +00:00
input-error.tsx Set up a fresh Laravel app 2025-11-07 12:01:36 +00:00
nav-footer.tsx Subscriptions (#15) 2025-12-06 19:09:56 +01:00
nav-main.tsx Set up a fresh Laravel app 2025-11-07 12:01:36 +00:00
nav-user.tsx Format + Open transactions on row click 2025-12-08 15:58:50 +01:00
pending-operations-dialog.tsx Add pending operations dialog and improve sync status UI (#16) 2025-12-06 21:54:11 +01:00
sync-status-button.tsx Add pending operations dialog and improve sync status UI (#16) 2025-12-06 21:54:11 +01:00
text-link.tsx Set up a fresh Laravel app 2025-11-07 12:01:36 +00:00
two-factor-recovery-codes.tsx Set up a fresh Laravel app 2025-11-07 12:01:36 +00:00
two-factor-setup-modal.tsx Set up a fresh Laravel app 2025-11-07 12:01:36 +00:00
unlock-message-dialog.tsx Add encryption key management features 2025-11-07 16:10:56 +00:00
user-info.tsx Format + Open transactions on row click 2025-12-08 15:58:50 +01:00
user-menu-content.tsx Accounts: Allow users to create custom banks with his own logo, and name (#12) 2025-12-04 15:24:04 +01:00