fuel-price/.superdesign/init/pages.md

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.