# 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 <head>)
        │   ├── 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 <head>)
        └── 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 `<flux:brand>` links
- `wire:navigate` on `<flux:link>` components
- `wire:navigate` on navigation items

This enables seamless SPA-like experience.

