fuel-price/resources/js/components/StationList.vue

<template>
    <div class="space-y-3">
        <!-- Sort tabs -->
        <div class="flex flex-wrap items-center gap-2 md:gap-2.5 py-3 border-b border-zinc-200">
            <span class="hidden md:inline text-xs font-mono uppercase tracking-widest text-zinc-400 mr-1">
                Sort
            </span>
            <button
                v-for="option in sortOptions"
                :key="option.value"
                :class="[
                    'inline-flex items-center gap-2 h-10 px-3 rounded-full border transition-colors cursor-pointer',
                    currentSort === option.value
                        ? 'bg-primary/10 border-primary text-primary'
                        : 'bg-white border-zinc-200 text-zinc-700 hover:border-zinc-300',
                ]"
                @click="emit('sort', option.value)"
                type="button"
            >
                <iconify-icon :icon="option.icon" class="text-sm opacity-70"></iconify-icon>
                <span class="text-sm font-medium">{{ option.label }}</span>
            </button>

            <!-- Brand filter -->
            <label
                v-if="brands.length > 1"
                :class="[
                    'relative group inline-flex items-center gap-2 h-10 pl-3 pr-2 rounded-full border transition-colors cursor-pointer',
                    brandFilter
                        ? 'bg-primary/10 border-primary text-primary'
                        : 'bg-white border-zinc-200 text-zinc-700 hover:border-zinc-300',
                ]"
            >
                <iconify-icon class="text-sm opacity-70" icon="lucide:tag"></iconify-icon>
                <span class="text-sm font-medium">{{ brandFilter || 'All brands' }}</span>
                <iconify-icon class="text-sm opacity-50 group-hover:opacity-100" icon="lucide:chevron-down"></iconify-icon>
                <select
                    :value="brandFilter"
                    aria-label="Filter by brand"
                    class="absolute inset-0 opacity-0 cursor-pointer"
                    @change="emit('update:brandFilter', $event.target.value)"
                >
                    <option value="">All brands</option>
                    <option v-for="brand in brands" :key="brand" :value="brand">{{ brand }}</option>
                </select>
            </label>

            <span class="ml-auto text-sm text-zinc-500 font-medium">
                {{ stations.length }} station{{ stations.length !== 1 ? 's' : '' }} found
            </span>
        </div>

        <!-- 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"
                    :avg-pence="avgPence"
                    :lowest-price="lowestPrice"
                    :origin="origin"
                    :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"
                        :avg-pence="avgPence"
                        :lowest-price="lowestPrice"
                        :origin="origin"
                        :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"
                        :avg-pence="avgPence"
                        :lowest-price="lowestPrice"
                        :origin="origin"
                        :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"
                :avg-pence="avgPence"
                :lowest-price="lowestPrice"
                :origin="origin"
                :station="station"
            />
        </div>
    </div>
</template>

<script setup>
import { computed } from 'vue'
import StationCard from './StationCard.vue'

const props = defineProps({
    stations: { type: Array, required: true },
    currentSort: { type: String, default: 'reliable' },
    origin: { type: Object, default: null },
    brands: { type: Array, default: () => [] },
    brandFilter: { type: String, default: '' },
})

const emit = defineEmits(['sort', 'update:brandFilter'])

const sortOptions = [
    { label: 'Reliable', value: 'reliable', icon: 'lucide:shield-check' },
    { label: 'Price', value: 'price', icon: 'lucide:pound-sterling' },
    { label: 'Distance', value: 'distance', icon: 'lucide:map-pin' },
    { label: 'Updated', value: 'updated', icon: 'lucide:clock' },
]

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 (!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))
})

const avgPence = computed(() => {
    const prices = props.stations.map(s => s.price_pence).filter(p => typeof p === 'number')
    if (!prices.length) return null
    return prices.reduce((a, b) => a + b, 0) / prices.length
})
</script>