# Shared UI Components

## Blade Components (Reusable)

### 1. `x-action-message`
**Path:** `resources/views/components/action-message.blade.php`

Displays a temporary status message that auto-hides after 2 seconds using Alpine.js.

**Props:**
- `on`: Event name to listen for (Livewire event)

**Features:**
- Transition animation with fade-out
- Auto-hide timeout (2000ms)
- Default text: "Saved."

```blade
@props([
    'on',
])

<div
    x-data="{ shown: false, timeout: null }"
    x-init="@this.on('{{ $on }}', () => { clearTimeout(timeout); shown = true; timeout = setTimeout(() => { shown = false }, 2000); })"
    x-show.transition.out.opacity.duration.1500ms="shown"
    x-transition:leave.opacity.duration.1500ms
    style="display: none"
    {{ $attributes->merge(['class' => 'text-sm']) }}
>
    {{ $slot->isEmpty() ? __('Saved.') : $slot }}
</div>
```

---

### 2. `x-app-logo`
**Path:** `resources/views/components/app-logo.blade.php`

Main app branding component. Renders as `flux:brand` (header) or `flux:sidebar.brand` (sidebar variant).

**Props:**
- `sidebar` (bool): If true, renders sidebar variant
- Inherits Flux component attributes

**Features:**
- Dynamic logo rendering based on context (header vs sidebar)
- Uses `x-app-logo-icon` for icon
- Passes through attributes to Flux components

```blade
@props([
    'sidebar' => false,
])

@if($sidebar)
    <flux:sidebar.brand name="Laravel Starter Kit" {{ $attributes }}>
        <x-slot name="logo" class="flex aspect-square size-8 items-center justify-center rounded-md bg-accent-content text-accent-foreground">
            <x-app-logo-icon class="size-5 fill-current text-white dark:text-black" />
        </x-slot>
    </flux:sidebar.brand>
@else
    <flux:brand name="Laravel Starter Kit" {{ $attributes }}>
        <x-slot name="logo" class="flex aspect-square size-8 items-center justify-center rounded-md bg-accent-content text-accent-foreground">
            <x-app-logo-icon class="size-5 fill-current text-white dark:text-black" />
        </x-slot>
    </flux:brand>
@endif
```

---

### 3. `x-app-logo-icon`
**Path:** `resources/views/components/app-logo-icon.blade.php`

SVG icon for the application logo. Geometric design with fills.

**Features:**
- Scalable SVG
- Uses `currentColor` for dynamic styling
- Can be sized with Tailwind classes

```blade
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 42" {{ $attributes }}>
    <path 
        fill="currentColor" 
        fill-rule="evenodd" 
        clip-rule="evenodd"
        d="M17.2 5.633 8.6.855 0 5.633v26.51l16.2 9 16.2-9v-8.442l7.6-4.223V9.856l-8.6-4.777-8.6 4.777V18.3l-5.6 3.111V5.633ZM38 18.301l-5.6 3.11v-6.157l5.6-3.11V18.3Zm-1.06-7.856-5.54 3.078-5.54-3.079 5.54-3.078 5.54 3.079ZM24.8 18.3v-6.157l5.6 3.111v6.158L24.8 18.3Zm-1 1.732 5.54 3.078-13.14 7.302-5.54-3.078 13.14-7.3v-.002Zm-16.2 7.89 7.6 4.222V38.3L2 30.966V7.92l5.6 3.111v16.892ZM8.6 9.3 3.06 6.222 8.6 3.143l5.54 3.08L8.6 9.3Zm21.8 15.51-13.2 7.334V38.3l13.2-7.334v-6.156ZM9.6 11.034l5.6-3.11v14.6l-5.6 3.11v-14.6Z"
    />
</svg>
```

---

### 4. `x-auth-header`
**Path:** `resources/views/components/auth-header.blade.php`

Centered header for authentication pages with title and description.

**Props:**
- `title`: Main heading text
- `description`: Subheading/description text

**Features:**
- Centered layout
- Uses Flux typography components

```blade
@props([
    'title',
    'description',
])

<div class="flex w-full flex-col text-center">
    <flux:heading size="xl">{{ $title }}</flux:heading>
    <flux:subheading>{{ $description }}</flux:subheading>
</div>
```

---

### 5. `x-auth-session-status`
**Path:** `resources/views/components/auth-session-status.blade.php`

Displays session status messages (typically success messages after redirect).

**Props:**
- `status`: Status message text (if present)
- Passes through attributes

**Features:**
- Conditional rendering (only shows if status exists)
- Green success styling

```blade
@props([
    'status',
])

@if ($status)
    <div {{ $attributes->merge(['class' => 'font-medium text-sm text-green-600']) }}>
        {{ $status }}
    </div>
@endif
```

---

### 6. `x-desktop-user-menu`
**Path:** `resources/views/components/desktop-user-menu.blade.php`

User profile dropdown menu with settings and logout options. Uses Flux components.

**Features:**
- Sidebar profile with dropdown
- Shows user avatar, name, and email
- Menu items: Settings (cog icon), Logout (arrow icon)
- Logout form with CSRF protection
- Data test attributes for testing

```blade
<flux:dropdown position="bottom" align="start">
    <flux:sidebar.profile
        :name="auth()->user()->name"
        :initials="auth()->user()->initials()"
        icon:trailing="chevrons-up-down"
        data-test="sidebar-menu-button"
    />

    <flux:menu>
        <div class="flex items-center gap-2 px-1 py-1.5 text-start text-sm">
            <flux:avatar
                :name="auth()->user()->name"
                :initials="auth()->user()->initials()"
            />
            <div class="grid flex-1 text-start text-sm leading-tight">
                <flux:heading class="truncate">{{ auth()->user()->name }}</flux:heading>
                <flux:text class="truncate">{{ auth()->user()->email }}</flux:text>
            </div>
        </div>
        <flux:menu.separator />
        <flux:menu.radio.group>
            <flux:menu.item :href="route('profile.edit')" icon="cog" wire:navigate>
                {{ __('Settings') }}
            </flux:menu.item>
            <form method="POST" action="{{ route('logout') }}" class="w-full">
                @csrf
                <flux:menu.item
                    as="button"
                    type="submit"
                    icon="arrow-right-start-on-rectangle"
                    class="w-full cursor-pointer"
                    data-test="logout-button"
                >
                    {{ __('Log out') }}
                </flux:menu.item>
            </form>
        </flux:menu.radio.group>
    </flux:menu>
</flux:dropdown>
```

---

### 7. `x-placeholder-pattern`
**Path:** `resources/views/components/placeholder-pattern.blade.php`

SVG placeholder pattern for skeleton/loading states. Diagonal line pattern.

**Props:**
- `id`: Unique pattern ID (auto-generated)

**Features:**
- Reusable SVG pattern definition
- Can be styled with Tailwind stroke classes
- Used in dashboard placeholder cards

```blade
@props([
    'id' => uniqid(),
])

<svg {{ $attributes }} fill="none">
    <defs>
        <pattern id="pattern-{{ $id }}" x="0" y="0" width="8" height="8" patternUnits="userSpaceOnUse">
            <path d="M-1 5L5 -1M3 9L8.5 3.5" stroke-width="0.5"></path>
        </pattern>
    </defs>
    <rect stroke="none" fill="url(#pattern-{{ $id }})" width="100%" height="100%"></rect>
</svg>
```

---

## Flux UI Components Used

Flux v2 components extensively used throughout the application:

- **Layout:** `flux:header`, `flux:sidebar`, `flux:main`, `flux:spacer`
- **Navigation:** `flux:navbar`, `flux:navbar.item`, `flux:sidebar.nav`, `flux:sidebar.item`, `flux:sidebar.group`
- **Forms:** `flux:input`, `flux:select`, `flux:checkbox`, `flux:button`
- **Typography:** `flux:heading`, `flux:subheading`, `flux:text`
- **Dropdowns/Menus:** `flux:dropdown`, `flux:menu`, `flux:menu.item`, `flux:menu.separator`
- **UI Elements:** `flux:badge`, `flux:avatar`, `flux:brand`, `flux:profile`
- **Other:** `flux:tooltip`, `flux:separator`, `flux:link`

---

## Flux Custom Icons

Located in `resources/views/flux/icon/`:
- `layout-grid.blade.php`
- `folder-git-2.blade.php`
- `chevrons-up-down.blade.php`
- `book-open-text.blade.php`

These extend Flux's default icon library.

---

## Alpine.js Data Objects

### `stationMap`
**Path:** `resources/js/maps/station-map.js`

Leaflet map integration for displaying fuel stations:
- Initializes map centered on UK
- Plots colored circle markers for stations
- Color coding: green (current), slate (recent), amber (stale), red (outdated)
- Popup display with station details
- Responsive bounds fitting
- Watches for data changes via Alpine