# Pages & Full-Page Components ## Page Dependency Trees Pages are organized by their view location and dependencies. Livewire components with full-page routes are documented here. --- ## 1. StationSearch (Public Livewire Component) **Route:** `/stations` **Component:** `App\Livewire\Public\StationSearch` **View:** `resources/views/livewire/public/station-search.blade.php` ### Dependency Tree ``` StationSearch (Livewire Component) ├── resources/views/livewire/public/station-search.blade.php │ ├── flux:heading (component) │ ├── flux:subheading (component) │ ├── form > flux:input (Fuel location input) │ ├── form > flux:select (Fuel type selector) │ │ └── Options: Petrol, E5, Diesel, Premium Diesel, B10, HVO │ ├── form > flux:select (Radius selector) │ │ └── Options: 1, 2, 5, 10, 20 miles │ ├── form > flux:select (Sort selector) │ │ └── Options: Price, Distance, Updated, Brand, Reliable │ ├── form > flux:button (Search button) │ ├── Error display (conditional) │ ├── Results meta (count, cheapest, average) │ ├── x-data="stationMap(...)" (Alpine.js map) │ │ └── resources/js/maps/station-map.js │ │ ├── Leaflet map initialization │ │ ├── OpenStreetMap tiles │ │ └── Circle markers (station data) │ ├── Legend (color codes for data age) │ └── Results list │ └── Station cards (name, address, price, distance, age classification) │ └── flux:badge (Supermarket tag, conditional) ``` ### Data Flow 1. **PHP Class** (`App\Livewire\Public\StationSearch`): - Properties: `$search`, `$fuelType`, `$radius`, `$sort` - Properties: `$results[]`, `$meta[]`, `$apiError` - Methods: - `updatedFuelType()`: Refetch on fuel type change - `updatedRadius()`: Refetch on radius change - `updatedSort()`: Refetch on sort change - `findStations()`: HTTP request to `/api/stations` - `render()`: Returns view 2. **View Interactions**: - `wire:model` on search input (two-way binding) - `wire:model.live` on selectors (reactive updates) - `wire:submit="findStations"` on form submit - `wire:loading` for button state - `wire:target="findStations"` for loading indicator - `@entangle('results')` for Alpine.js map data 3. **JavaScript**: - `stationMap(results)` Alpine data object - Watches for `results` property changes - Renders/updates Leaflet markers dynamically --- ## 2. Dashboard **Route:** `/dashboard` **View:** `resources/views/dashboard.blade.php` **Middleware:** `auth`, `verified` ### Dependency Tree ``` dashboard.blade.php ├── Layout: x-layouts::app (authenticated layout) │ └── layouts/app.blade.php │ └── x-layouts::app.sidebar (sidebar layout) │ └── layouts/app/sidebar.blade.php │ ├── partials/head.blade.php │ ├── flux:header (navigation) │ │ ├── x-app-logo │ │ ├── flux:navbar with Dashboard link │ │ ├── Secondary icons (Search, Repo, Docs) │ │ └── x-desktop-user-menu │ └── flux:sidebar (mobile navigation) │ ├── flux:main (page content wrapper) │ └── Content: Grid of placeholder cards └── x-placeholder-pattern (diagonal line SVG pattern) └── 3 aspect-video cards (top row) └── 1 flex-1 card (bottom, full height) ``` ### Features - Placeholder cards for future dashboard widgets - Responsive grid: 3 columns on desktop, stacked on mobile - Dark mode support with adjusted stroke colors --- ## 3. Welcome/Home Page **Route:** `/` **View:** `resources/views/welcome.blade.php` ### Note The welcome view is large (>15KB) and contains: - Full HTML with embedded Tailwind CSS - Hero section with Fuel Price branding - CTA buttons (Search Stations, View Source) - Feature cards - Dark mode support - No layout wrapper (standalone) (Full content available in actual file due to size) --- ## 4. Settings Pages **Route:** `/settings/*` **Layout:** `x-layouts::app` → `layouts/app/sidebar.blade.php` ### 4.1 Profile Settings **Route:** `/settings/profile` **Livewire Component:** `pages::settings.profile` ### Dependency Tree ``` settings/profile (Livewire Component) ├── Layout: x-layouts::app │ └── layouts/app/sidebar.blade.php │ ├── partials/settings-heading.blade.php │ ├── flux:heading ("Settings") │ ├── flux:subheading ("Manage your profile...") │ └── flux:separator │ ├── pages/settings/layout.blade.php (settings sidebar layout) │ ├── flux:navlist (navigation) │ │ ├── flux:navlist.item (Profile - current) │ │ ├── flux:navlist.item (Security) │ │ └── flux:navlist.item (Appearance) │ │ │ └── Slot content (form fields) │ └── Profile edit form (Livewire form) │ ├── flux:input (Name) │ ├── flux:input (Email) │ ├── flux:button (Save) │ └── Action messages on update ``` ### 4.2 Security Settings **Route:** `/settings/security` **Livewire Component:** `pages::settings.security` - Two-factor authentication setup/management - Recovery codes display - Password confirmation (optional middleware) ### 4.3 Appearance Settings **Route:** `/settings/appearance` **Livewire Component:** `pages::settings.appearance` - Theme selection (light/dark mode) - Preference persistence --- ## 5. Authentication Pages **Layout:** `x-layouts::auth` → Various auth layouts ### 5.1 Login **Route:** `/login` **View:** `resources/views/pages/auth/login.blade.php` **Layout:** `layouts/auth/simple.blade.php` ### Dependency Tree ``` login.blade.php ├── Layout: x-layouts::auth │ └── layouts/auth/simple.blade.php │ ├── partials/head.blade.php │ └── Centered login form │ ├── x-auth-header (title + description) ├── x-auth-session-status (success message display) ├── form (POST to login.store) │ ├── csrf token │ ├── flux:input (Email) │ ├── flux:input (Password, viewable) │ │ └── flux:link to password.request (forgot password) │ ├── flux:checkbox (Remember me) │ └── flux:button (Log in, primary) │ └── Sign up link (flux:link to register) ``` ### 5.2 Register **Route:** `/register` **View:** `resources/views/pages/auth/register.blade.php` **Layout:** `layouts/auth/simple.blade.php` ``` register.blade.php ├── Layout: layouts/auth/simple.blade.php ├── x-auth-header ├── x-auth-session-status ├── form (POST to register.store) │ ├── flux:input (Name) │ ├── flux:input (Email) │ ├── flux:input (Password, viewable) │ ├── flux:input (Password Confirmation, viewable) │ └── flux:button (Create account, primary) └── Log in link ``` ### 5.3 Password Reset **Route:** `/forgot-password` and `/reset-password/{token}` **Views:** `pages/auth/forgot-password.blade.php`, `pages/auth/reset-password.blade.php` **Layout:** `layouts/auth/simple.blade.php` ### 5.4 Email Verification **Route:** `/verify-email` **View:** `pages/auth/verify-email.blade.php` **Layout:** `layouts/auth/simple.blade.php` ### 5.5 Two-Factor Challenge **Route:** `/two-factor-challenge` **View:** `pages/auth/two-factor-challenge.blade.php` **Layout:** `layouts/auth/simple.blade.php` --- ## Component Include Hierarchy ### Layout Chain (All Authenticated Pages) ``` Page View └── x-layouts::app (wrapper) └── x-layouts::app.sidebar (main layout) ├── partials/head (in ) │ ├── CSS imports (Vite) │ ├── @fluxAppearance │ └── Font preload │ ├── flux:header (desktop navigation) │ ├── x-app-logo │ ├── x-desktop-user-menu │ └── flux:navbar / flux:tooltip components │ ├── flux:sidebar (mobile navigation) │ ├── x-app-logo (:sidebar="true") │ └── Navigation items │ └── flux:main (page content slot) └── Page-specific content ``` ### Layout Chain (Auth Pages) ``` Auth Page View └── x-layouts::auth (wrapper) └── x-layouts::auth.simple (centered layout) ├── partials/head (in ) └── Centered card with form ├── x-app-logo-icon └── x-auth-header or form content ``` --- ## Page Transitions All pages use `wire:navigate` for Livewire navigation (no full page reload). Example: - `wire:navigate` on `` links - `wire:navigate` on `` components - `wire:navigate` on navigation items This enables seamless SPA-like experience.