# Fidelity gap report — Laravel vs React (Budgets Smart Money)

This document records known differences between the reference React app (`bugets-smart-money`) and the Laravel + Livewire implementation (`Budgets-Laravel`), per the migration plan.

## Motion (Framer Motion)

- **React:** `framer-motion` on landing, onboarding, import, drawers, dashboard chrome, `MotionConfig` + user preference `appearance.reducedMotion`.
- **Laravel:** No Framer Motion. Transitions use Tailwind `animate-*`, Alpine `x-transition`, and CSS variables. Micro-timing, stagger, and `AnimatePresence` exit animations are **not** matched pixel-for-pixel.
- **Parity:** Partial. Reduced motion is still honored for theme script (`data-reduced-motion`) and global CSS; not every component-level motion port exists.

## Radix / shadcn primitives

- **React:** Radix-backed focus traps, typeahead, positioning, and ARIA for `Select`, `Tabs`, `Dialog`, etc.
- **Laravel:** Native controls, Alpine toggles, and Livewire re-renders. Search and notifications use lightweight overlays without full cmdk-style command palette behavior.
- **Parity:** Functional shell only. Keyboard behavior and focus management will differ from Radix defaults.

## SPA navigation

- **React:** `react-router-dom` — layout persists, instant URL and query updates (`?create=`, `?search=1`).
- **Laravel:** `wire:navigate` on internal links where applicable. Full parity with a client-side router is **not** guaranteed without Turbo or wider Livewire navigate coverage.
- **Parity:** Good for primary navigation; subtle differences in scroll restoration and transition timing may remain.

## Data layer

- **React:** TanStack Query + `mock-data` / optional Supabase (`live-data.ts`).
- **Laravel:** Demo entities live in `config/budgets_demo.php`. Preferences, landing flag, optional session override for transactions via `FinanceDemoRepository` + `PreferencesStore`. **No Supabase client** and **no Eloquent migrations** in this pass — server session is the persistence boundary for the demo.
- **Parity:** Behavioral demo parity for read-heavy screens; optional Supabase semantics are **intentionally cut** unless a later phase adds server sync.

## Toasts

- **React:** Radix toaster + Sonner (`useTheme` loosely coupled).
- **Laravel:** Session flash toasts (`session('toast')`) with Alpine hide timer; styling aligned to popover tokens.
- **Parity:** Stacking, swipe-to-dismiss, and Sonner timing are **not** replicated.

## Landing page

- **React:** Full section set (How it works, Trust, Feature overviews, Pricing, etc.).
- **Laravel:** Hero-centric marketing view with key nav anchors; not every subsection is ported line-for-line.

## Onboarding

- **React:** Seven-step wizard with rich UI.
- **Laravel:** Step indicator with placeholder copy; completes preferences and redirects like the React flow. Full step content parity is **not** implemented.

## Entity pages (transactions, budgets, goals, subscriptions, debts)

- **React:** Drawers, forms, `CategoryPicker`, recurring flows, etc.
- **Laravel:** Lists from demo config + query-string banners for `?create=*` and `?search=1`. Drawers and CRUD forms are **stubs** for a later iteration.

## AI Advisor

- **React:** Interactive advisor UI.
- **Laravel:** Static shell with disabled input — backend wiring deferred.

---

## Responsive QA matrix (manual)

| Width | Routes to spot-check |
|-------|----------------------|
| 375px | Landing, dashboard edit + bottom nav + quick-create sheet, transactions `?search=1` |
| 768px | Sidebar collapse, insights layout |
| 1024px | Mobile nav hidden, desktop sidebar width 68 vs 240 |
| 1280px+ | Dashboard grid, admin table |

---

## Can exact parity still be achieved?

| Area | Exact parity? | Fallback |
|------|----------------|----------|
| Framer timings | Unlikely without a JS motion bundle | CSS + Alpine |
| Radix keyboard | Possible with high-effort custom JS or React islands | Native + Alpine |
| True SPA | Possible with Turbo Drive / more client JS | `wire:navigate` |
| Supabase client writes | Different architecture | Eloquent or REST later |