From 1bfcb84402d71a5ad1fc11da4f712327f42ee4f3 Mon Sep 17 00:00:00 2001
From: Ovidiu U <nonreal@gmail.com>
Date: Fri, 10 Apr 2026 18:09:31 +0100
Subject: [PATCH] feat: add dashboard Overview, SavedStations, and Preferences
 views

---
 resources/js/views/dashboard/Overview.vue     | 43 ++++++++++-
 resources/js/views/dashboard/Preferences.vue  | 72 ++++++++++++++++++-
 .../js/views/dashboard/SavedStations.vue      | 44 +++++++++++-
 3 files changed, 156 insertions(+), 3 deletions(-)

diff --git a/resources/js/views/dashboard/Overview.vue b/resources/js/views/dashboard/Overview.vue
index b6cf723..b1f51bc 100644
--- a/resources/js/views/dashboard/Overview.vue
+++ b/resources/js/views/dashboard/Overview.vue
@@ -1 +1,42 @@
-<template><div class="p-8 font-bold text-[#bb5b3e]">Dashboard Overview (coming soon)</div></template>
+<template>
+    <div class="space-y-6">
+        <div>
+            <h1 class="text-2xl font-black text-[#4a3f3b]">Welcome back{{ user ? ', ' + user.name : '' }}</h1>
+            <p class="text-[#89726c] 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-[#e5ded7] hover:border-[#bb5b3e] transition-colors space-y-3"
+            >
+                <iconify-icon :icon="item.icon" class="text-[#bb5b3e] text-2xl"></iconify-icon>
+                <p class="font-bold text-[#4a3f3b]">{{ item.label }}</p>
+                <p class="text-sm text-[#89726c]">{{ item.description }}</p>
+            </RouterLink>
+        </div>
+
+        <div class="p-6 bg-white rounded-2xl border border-[#e5ded7] space-y-2">
+            <p class="text-sm font-bold uppercase tracking-widest text-[#89726c]">Your plan</p>
+            <p class="text-xl font-black text-[#4a3f3b] capitalize">{{ userTier }}</p>
+            <a v-if="userTier === 'free'" href="/pricing" class="inline-block text-sm font-bold text-[#bb5b3e] hover:underline">
+                Upgrade for alerts + predictions →
+            </a>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { RouterLink } from 'vue-router'
+import { useAuth } from '../../composables/useAuth.js'
+
+const { user, userTier } = useAuth()
+
+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>
diff --git a/resources/js/views/dashboard/Preferences.vue b/resources/js/views/dashboard/Preferences.vue
index 25bed4b..e005041 100644
--- a/resources/js/views/dashboard/Preferences.vue
+++ b/resources/js/views/dashboard/Preferences.vue
@@ -1 +1,71 @@
-<template><div class="p-8 font-bold text-[#bb5b3e]">Preferences (coming soon)</div></template>
+<template>
+    <div class="space-y-6 max-w-lg">
+        <h1 class="text-2xl font-black text-[#4a3f3b]">Preferences</h1>
+
+        <form @submit.prevent="save" class="space-y-5 p-6 bg-white rounded-2xl border border-[#e5ded7]">
+            <div class="space-y-2">
+                <label class="text-sm font-bold text-[#4a3f3b]">Default fuel type</label>
+                <select
+                    v-model="form.preferred_fuel_type"
+                    class="w-full h-12 px-4 bg-[#faf6f3] border border-[#e5ded7] rounded-xl font-medium text-[#4a3f3b] focus:outline-none focus:ring-2 focus:ring-[#bb5b3e]"
+                >
+                    <option value="petrol">Petrol (E10)</option>
+                    <option value="diesel">Diesel (B7)</option>
+                    <option value="e5">Premium Unleaded (E5)</option>
+                    <option value="b7_premium">Premium Diesel</option>
+                    <option value="b10">B10 Biodiesel</option>
+                    <option value="hvo">HVO</option>
+                </select>
+            </div>
+
+            <div class="space-y-2">
+                <label class="text-sm font-bold text-[#4a3f3b]">Home postcode</label>
+                <input
+                    v-model="form.postcode"
+                    type="text"
+                    placeholder="e.g. SW1A 1AA"
+                    maxlength="8"
+                    class="w-full h-12 px-4 bg-[#faf6f3] border border-[#e5ded7] rounded-xl font-medium text-[#4a3f3b] focus:outline-none focus:ring-2 focus:ring-[#bb5b3e]"
+                />
+            </div>
+
+            <div class="flex items-center gap-4">
+                <button
+                    type="submit"
+                    :disabled="saving"
+                    class="px-8 py-3 bg-[#bb5b3e] text-white rounded-xl font-bold hover:bg-[#a34a31] transition-all disabled:opacity-50"
+                >
+                    {{ saving ? 'Saving…' : 'Save preferences' }}
+                </button>
+                <p v-if="saved" class="text-sm font-bold text-green-600">Saved!</p>
+            </div>
+        </form>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import api from '../../axios.js'
+
+const form = ref({ preferred_fuel_type: 'petrol', postcode: '' })
+const saving = ref(false)
+const saved = ref(false)
+
+onMounted(async () => {
+    const response = await api.get('/user/preferences')
+    form.value.preferred_fuel_type = response.data.preferred_fuel_type ?? 'petrol'
+    form.value.postcode = response.data.postcode ?? ''
+})
+
+async function save() {
+    saving.value = true
+    saved.value = false
+    try {
+        await api.put('/user/preferences', form.value)
+        saved.value = true
+        setTimeout(() => { saved.value = false }, 3000)
+    } finally {
+        saving.value = false
+    }
+}
+</script>
diff --git a/resources/js/views/dashboard/SavedStations.vue b/resources/js/views/dashboard/SavedStations.vue
index f84d4cc..cfd646b 100644
--- a/resources/js/views/dashboard/SavedStations.vue
+++ b/resources/js/views/dashboard/SavedStations.vue
@@ -1 +1,43 @@
-<template><div class="p-8 font-bold text-[#bb5b3e]">Saved Stations (coming soon)</div></template>
+<template>
+    <div class="space-y-6">
+        <h1 class="text-2xl font-black text-[#4a3f3b]">Saved Stations</h1>
+
+        <div v-if="loading" class="space-y-2">
+            <div v-for="i in 3" :key="i" class="h-16 bg-white rounded-xl animate-pulse border border-[#e5ded7]"></div>
+        </div>
+
+        <div v-else-if="savedStations.length === 0" class="p-8 bg-white rounded-2xl border border-[#e5ded7] text-center text-[#89726c]">
+            <iconify-icon icon="lucide:bookmark" class="text-3xl mb-2"></iconify-icon>
+            <p class="font-medium">No saved stations yet.</p>
+            <p class="text-sm mt-1">Search for fuel and bookmark stations to see them here.</p>
+        </div>
+
+        <div v-else class="space-y-2">
+            <div
+                v-for="station in savedStations"
+                :key="station.station_id"
+                class="flex items-center justify-between p-4 bg-white rounded-xl border border-[#e5ded7]"
+            >
+                <div>
+                    <p class="font-bold text-[#4a3f3b]">{{ station.name }}</p>
+                    <p class="text-sm text-[#89726c]">{{ station.postcode }}</p>
+                </div>
+                <button
+                    @click="remove(station.station_id)"
+                    class="text-sm font-bold text-red-400 hover:text-red-600 transition-colors"
+                >
+                    Remove
+                </button>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { onMounted } from 'vue'
+import { useSavedStations } from '../../composables/useSavedStations.js'
+
+const { savedStations, loading, fetch, remove } = useSavedStations()
+
+onMounted(fetch)
+</script>