Remove obsolete Livewire fuel search components and consolidate pricing tiers

- Delete unused Livewire Search test and fuel type select Blade component
- Move subscription webhook listener from EventServiceProvider to AppServiceProvider
- Add FUEL_TYPES global config to app layout for client-side use
- Add Billable trait to User model and include email_verified_at in fillable
- Implement monthly/annual cadence toggle with pricing display and smart CTA routing on homepage
- Update VerifyApiKeyMiddlewareTest to use e10 instead of petrol
- Refactor PollFuelPrices to auto-refresh stale stations based on last_seen_at
- Add incremental polling with cached timestamp and effective-start-timestamp param to FuelPriceService
- Normalize amenities/fuel_types from API objects to flat arrays, skip stations missing required fields
- Log response body on API failures in ApiLogger
- Default homepage sort to 'reliable' instead of 'price'

resources/js/components/SearchBar.vue

@@ -41,12 +41,9 @@
                 aria-label="Fuel type"
                 class="min-w-0 h-10 px-2 bg-white border border-zinc-300 rounded-xl text-sm font-medium text-zinc-700 focus:outline-none focus:ring-2 focus:ring-accent truncate"
             >
-                <option value="e10">Petrol (E10)</option>
-                <option value="e5">Premium (E5)</option>
-                <option value="b7_standard">Diesel (B7)</option>
-                <option value="b7_premium">Prem Diesel</option>
-                <option value="b10">Diesel (B10)</option>
-                <option value="hvo">HVO</option>
+                <option v-for="fuel in FUEL_TYPES" :key="fuel.value" :value="fuel.value">
+                    {{ fuel.label }}
+                </option>
             </select>
             <select
                 v-model="radius"
@@ -63,11 +60,11 @@
                 aria-label="Sort by"
                 class="min-w-0 h-10 px-2 bg-white border border-zinc-300 rounded-xl text-sm font-medium text-zinc-700 focus:outline-none focus:ring-2 focus:ring-accent"
             >
+                <option value="reliable">Reliable</option>
                 <option value="price">Price</option>
                 <option value="distance">Distance</option>
                 <option value="updated">Updated</option>
                 <option value="brand">Brand</option>
-                <option value="reliable">Reliable</option>
             </select>
         </div>
     </div>
@@ -75,13 +72,14 @@
 
 <script setup>
 import { ref } from 'vue'
+import { FUEL_TYPES } from '../constants/fuelTypes.js'
 
 const emit = defineEmits(['search'])
 
 const postcode = ref('')
 const fuelType = ref('e10')
 const radius = ref(10)
-const sort = ref('price')
+const sort = ref('reliable')
 const locating = ref(false)
 
 function useMyLocation() {

resources/js/components/StationList.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="space-y-3">
         <!-- Sort tabs -->
-        <div class="flex gap-2">
+        <div class="flex gap-2 flex-wrap">
             <button
                 v-for="option in sortOptions"
                 :key="option.value"
@@ -22,8 +22,59 @@
             {{ stations.length }} station{{ stations.length !== 1 ? 's' : '' }} found
         </p>
 
-        <!-- Results -->
-        <div class="space-y-2">
+        <!-- Grouped results when sorting by reliability -->
+        <template v-if="currentSort === 'reliable'">
+            <section v-if="reliable.length" class="space-y-2">
+                <header class="flex items-center gap-2 pt-2">
+                    <iconify-icon class="text-status-good text-lg" icon="lucide:shield-check"></iconify-icon>
+                    <h3 class="font-black text-zinc-800">Reliable</h3>
+                    <span class="text-xs text-zinc-500 font-medium">Updated in the last 3 days</span>
+                </header>
+                <StationCard
+                    v-for="station in reliable"
+                    :key="station.station_id"
+                    :lowest-price="lowestPrice"
+                    :station="station"
+                />
+            </section>
+
+            <section v-if="stale.length" class="space-y-2 pt-4">
+                <header class="flex items-center gap-2">
+                    <iconify-icon class="text-status-warn text-lg" icon="lucide:clock"></iconify-icon>
+                    <h3 class="font-black text-zinc-800">Older prices</h3>
+                    <span class="text-xs text-zinc-500 font-medium">3–7 days old — verify before driving</span>
+                </header>
+                <div class="opacity-80">
+                    <StationCard
+                        v-for="station in stale"
+                        :key="station.station_id"
+                        :lowest-price="lowestPrice"
+                        :station="station"
+                        class="mb-2"
+                    />
+                </div>
+            </section>
+
+            <section v-if="outdated.length" class="space-y-2 pt-4">
+                <header class="flex items-center gap-2">
+                    <iconify-icon class="text-status-bad text-lg" icon="lucide:triangle-alert"></iconify-icon>
+                    <h3 class="font-black text-zinc-800">Outdated</h3>
+                    <span class="text-xs text-zinc-500 font-medium">Over 7 days old — likely inaccurate</span>
+                </header>
+                <div class="opacity-60">
+                    <StationCard
+                        v-for="station in outdated"
+                        :key="station.station_id"
+                        :lowest-price="lowestPrice"
+                        :station="station"
+                        class="mb-2"
+                    />
+                </div>
+            </section>
+        </template>
+
+        <!-- Flat list for other sort modes -->
+        <div v-else class="space-y-2">
             <StationCard
                 v-for="station in stations"
                 :key="station.station_id"
@@ -40,21 +91,26 @@ import StationCard from './StationCard.vue'
 
 const props = defineProps({
     stations: { type: Array, required: true },
-    currentSort: { type: String, default: 'price' },
+    currentSort: { type: String, default: 'reliable' },
 })
 
 const emit = defineEmits(['sort'])
 
 const sortOptions = [
+    { label: 'Reliable', value: 'reliable' },
     { label: 'Price', value: 'price' },
     { label: 'Distance', value: 'distance' },
     { label: 'Updated', value: 'updated' },
     { label: 'Brand', value: 'brand' },
-    { label: 'Reliable', value: 'reliable' },
 ]
 
+const reliable = computed(() => props.stations.filter(s => s.reliability === 'reliable'))
+const stale = computed(() => props.stations.filter(s => s.reliability === 'stale'))
+const outdated = computed(() => props.stations.filter(s => s.reliability === 'outdated'))
+
 const lowestPrice = computed(() => {
-    if (!props.stations.length) return null
-    return Math.min(...props.stations.map(s => s.price_pence))
+    if (!reliable.value.length && !props.stations.length) return null
+    const pool = reliable.value.length ? reliable.value : props.stations
+    return Math.min(...pool.map(s => s.price_pence))
 })
 </script>