Remove prediction API endpoint and integrate into stations search

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.

resources/js/views/dashboard/Overview.vue

@@ -19,11 +19,39 @@
         </div>
 
         <div class="p-6 bg-white rounded-2xl border border-zinc-300 space-y-2">
-            <p class="text-sm font-bold uppercase tracking-widest text-zinc-500">Your plan</p>
+            <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>
@@ -32,7 +60,25 @@
 import { RouterLink } from 'vue-router'
 import { useAuth } from '../../composables/useAuth.js'
 
-const { user, userTier } = useAuth()
+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.' },

resources/js/views/dashboard/settings/Security.vue

@@ -76,7 +76,7 @@
                     <!-- eslint-disable-next-line vue/no-v-html -->
                     <div v-html="setupData.svg" class="[&_svg]:w-40 [&_svg]:h-40"></div>
                     <div class="space-y-1">
-                        <p class="text-xs font-bold text-zinc-500 uppercase tracking-widest">Or enter setup key manually</p>
+                        <p class="font-mono text-[10px] uppercase tracking-widest text-zinc-500 mb-1 truncate">Or enter setup key manually</p>
                         <code class="text-xs bg-zinc-50 px-3 py-2 rounded-lg font-mono text-zinc-800 break-all block">{{ setupData.secretKey }}</code>
                     </div>
                 </div>