088fd11058
Consolidate prediction functionality by merging /api/prediction endpoint into /api/stations response. Move prediction logic from PredictionController into StationController, returning prediction data alongside station results. Replace usePrediction composable with unified useStations that returns {stations, meta, prediction}. Remove PredictionRequest, related tests, and unused Vue components (FuelFinderTest, MapTest, RecommendationTest, StationListTest). Add PredictionFull component and UpsellBanner. Extend NationalFuelPredictionService to include weekly_summary (7-day series, yesterday/today averages, cheapest/priciest days) and oil signal from price_predictions table. Update Home.vue to consume prediction from stations response. Add Plan::resolveCadenceForUser helper and configure Cashier to use custom Subscription model.
89 lines
4.1 KiB
Vue
89 lines
4.1 KiB
Vue
<template>
|
|
<div class="space-y-6">
|
|
<div>
|
|
<h1 class="text-2xl font-black text-zinc-800">Welcome back{{ user ? ', ' + user.name : '' }}</h1>
|
|
<p class="text-zinc-500 mt-1">Your FuelAlert dashboard.</p>
|
|
</div>
|
|
|
|
<div class="grid sm:grid-cols-3 gap-4">
|
|
<RouterLink
|
|
v-for="item in quickLinks"
|
|
:key="item.to"
|
|
:to="item.to"
|
|
class="p-6 bg-white rounded-2xl border border-zinc-300 hover:border-accent transition-colors space-y-3"
|
|
>
|
|
<iconify-icon :icon="item.icon" class="text-accent text-2xl"></iconify-icon>
|
|
<p class="font-bold text-zinc-800">{{ item.label }}</p>
|
|
<p class="text-sm text-zinc-500">{{ item.description }}</p>
|
|
</RouterLink>
|
|
</div>
|
|
|
|
<div class="p-6 bg-white rounded-2xl border border-zinc-300 space-y-2">
|
|
<p class="font-mono text-[10px] uppercase tracking-widest text-zinc-500 mb-1 truncate">Your plan</p>
|
|
<p class="text-xl font-black text-zinc-800 capitalize">{{ userTier }}</p>
|
|
<a v-if="userTier === 'free'" class="inline-block text-sm font-bold text-accent hover:underline" href="/pricing">
|
|
Upgrade for alerts + predictions →
|
|
</a>
|
|
<dl v-if="isPaidTier" class="grid grid-cols-1 sm:grid-cols-3 gap-4 pt-3 mt-3 border-t border-zinc-200">
|
|
<div v-if="subscribedAt">
|
|
<dt class="font-mono text-[10px] uppercase tracking-widest text-zinc-500 mb-1 truncate">Subscribed</dt>
|
|
<dd class="text-sm font-semibold text-zinc-800 mt-0.5">{{ formatDate(subscribedAt) }}</dd>
|
|
</div>
|
|
<div v-if="subscriptionCadence">
|
|
<dt class="font-mono text-[10px] uppercase tracking-widest text-zinc-500 mb-1 truncate">Billed</dt>
|
|
<dd class="text-sm font-semibold text-zinc-800 mt-0.5 capitalize">{{ subscriptionCadence }}</dd>
|
|
</div>
|
|
<div v-if="subscriptionExpiresAt">
|
|
<dt class="font-mono text-[10px] uppercase tracking-widest text-zinc-500 mb-1 truncate">
|
|
{{ subscriptionCancelled ? 'Ends on' : 'Renews on' }}
|
|
</dt>
|
|
<dd class="text-sm font-semibold text-zinc-800 mt-0.5">{{ formatDate(subscriptionExpiresAt) }}</dd>
|
|
</div>
|
|
</dl>
|
|
<div v-if="isPaidTier && !subscriptionCancelled" class="pt-3 mt-3 border-t border-zinc-200">
|
|
<a
|
|
class="inline-flex items-center gap-1.5 text-sm font-semibold text-mauve hover:text-zinc-800 transition-colors"
|
|
href="/billing/portal"
|
|
>
|
|
<iconify-icon class="text-base" icon="lucide:circle-x"></iconify-icon>
|
|
Cancel subscription
|
|
</a>
|
|
<p class="text-xs text-zinc-500 mt-1">
|
|
You'll keep your features until the end of the billing period.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { RouterLink } from 'vue-router'
|
|
import { useAuth } from '../../composables/useAuth.js'
|
|
|
|
const {
|
|
user,
|
|
userTier,
|
|
isPaidTier,
|
|
subscriptionCancelled,
|
|
subscriptionCadence,
|
|
subscribedAt,
|
|
subscriptionExpiresAt,
|
|
} = useAuth()
|
|
|
|
const dateFormatter = new Intl.DateTimeFormat('en-GB', { day: 'numeric', month: 'short', year: 'numeric' })
|
|
|
|
function formatDate(value) {
|
|
if (!value) {
|
|
return ''
|
|
}
|
|
const date = new Date(value)
|
|
return Number.isNaN(date.getTime()) ? '' : dateFormatter.format(date)
|
|
}
|
|
|
|
const quickLinks = [
|
|
{ to: '/dashboard/saved-stations', label: 'Saved Stations', icon: 'lucide:bookmark', description: 'Stations you\'ve bookmarked for quick access.' },
|
|
{ to: '/dashboard/preferences', label: 'Preferences', icon: 'lucide:settings', description: 'Set your default fuel type and postcode.' },
|
|
{ to: '/', label: 'Find Fuel', icon: 'lucide:search', description: 'Search live prices near you.' },
|
|
]
|
|
</script>
|