292 lines
9.0 KiB
Markdown
292 lines
9.0 KiB
Markdown
# 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.
|
|
|