feat: add unread notifications feature and enhance notification display

app/components/Header.vue

@@ -26,7 +26,7 @@ onUnmounted(() => {
   }
 })
 
-const { isAuthenticated, user, logout } = useAuth()
+const { isAuthenticated, user, logout, hasUnreadNotifications } = useAuth()
 const panelLabel = computed(() => isAdmin(user.value?.role) ? 'Pannello' : 'Dashboard')
 
 const navLinks = [
@@ -70,8 +70,9 @@ const navLinks = [
 
                   <NuxtLink class="btn btn-primary btn-icon btn-full" to="/profile"
                             data-element="personal-area-dashboard" data-focus-mouse="false">
-                    <span class="rounded-icon" aria-hidden="true">
+                    <span class="rounded-icon profile-icon-wrap" aria-hidden="true">
                       <BIIcon name="it-user" color="black"/>
+                      <span v-if="hasUnreadNotifications" class="notification-dot"></span>
                     </span>
                     <span class="d-none d-lg-block">{{ user?.first_name }}</span>
                   </NuxtLink>
@@ -215,7 +216,7 @@ const navLinks = [
     visibility: visible;
   }
 
-  .navbar-collapsable {
+.navbar-collapsable {
     position: fixed !important;
     top: 0;
     left: 0;
@@ -294,4 +295,19 @@ const navLinks = [
   height: 48px;
   margin-inline: 16px;
 }
+
+.profile-icon-wrap {
+  position: relative;
+}
+
+.notification-dot {
+  position: absolute;
+  top: -2px;
+  right: -2px;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: #d9364f;
+  border: 2px solid #ffffff;
+}
 </style>

app/components/dashboard/AdminDashboard.vue

@@ -4,36 +4,11 @@ const { getOverviewStats } = useAdmin()
 const { data: statsRes, pending } = useAsyncData('admin-stats', () => getOverviewStats())
 
 const adminActions = [
-  {
+  { to: '/admin/reports', icon: 'it-files', label: 'Report', tone: 'primary' },
-    to: '/admin/reports',
+  { to: '/admin/catalog', icon: 'it-list', label: 'Categorie e Team', tone: 'primary' },
-    icon: 'it-files',
+  { to: '/admin/areas', icon: 'it-map-marker', label: 'Aree', tone: 'primary' },
-    label: 'Report',
+  { to: '/admin/users', icon: 'it-user', label: 'Gestione Utenti', tone: 'primary' },
-    tone: 'primary'
+  { to: '/admin/moderation', icon: 'it-warning', label: 'Moderazione Abusi', tone: 'danger' }
-  },
-  {
-    to: '/admin/catalog',
-    icon: 'it-list',
-    label: 'Categorie e Team',
-    tone: 'primary'
-  },
-  {
-    to: '/admin/areas',
-    icon: 'it-map-marker',
-    label: 'Aree',
-    tone: 'primary'
-  },
-  {
-    to: '/admin/users',
-    icon: 'it-user',
-    label: 'Gestione Utenti',
-    tone: 'primary'
-  },
-  {
-    to: '/admin/moderation',
-    icon: 'it-warning',
-    label: 'Moderazione Abusi',
-    tone: 'danger'
-  }
 ]
 </script>
 
@@ -46,78 +21,59 @@ const adminActions = [
       </p>
     </div>
 
-    <div class="row mb-5" v-if="!pending && statsRes?.ok">
+    <div class="row g-3 mb-4" v-if="!pending && statsRes?.ok">
-      <div class="col-6 col-md-3 mb-3">
+      <div class="col-6 col-lg-3">
-        <div class="card-wrapper card-space h-100">
+        <div class="card card-bg dashboard-stat h-100">
-          <div class="card card-bg text-center h-100">
+          <div class="card-body py-3">
-            <div class="card-body">
+            <div class="stat-value">{{ statsRes.total_users || 0 }}</div>
-              <h2 class="text-primary">{{ statsRes.total_users || 0 }}</h2>
+            <div class="small text-muted">Utenti registrati</div>
-              <p class="card-text mb-0">Utenti Registrati</p>
-            </div>
           </div>
         </div>
       </div>
 
-      <div class="col-6 col-md-3 mb-3">
+      <div class="col-6 col-lg-3">
-        <div class="card-wrapper card-space h-100">
+        <div class="card card-bg dashboard-stat h-100">
-          <div class="card card-bg text-center h-100">
+          <div class="card-body py-3">
-            <div class="card-body">
+            <div class="stat-value">
-              <h2 class="text-warning">
+              {{ statsRes.open_reports ?? statsRes.reports_by_status?.find(s => s.status === 'OPEN')?.total ?? 0 }}
-                {{ statsRes.open_reports ?? statsRes.reports_by_status?.find(s => s.status === 'OPEN')?.total ?? 0 }}
-              </h2>
-              <p class="card-text mb-0">Segn. Aperte</p>
             </div>
+            <div class="small text-muted">Segnalazioni aperte</div>
           </div>
         </div>
       </div>
     </div>
 
-    <h3 class="mb-3">Gestione Sistema</h3>
+    <div class="card card-bg">
+      <div class="card-body">
+        <div class="d-flex justify-content-between align-items-center mb-3">
+          <h2 class="h5 card-title mb-0">Gestione sistema</h2>
+          <span class="small text-muted">{{ adminActions.length }} sezioni</span>
+        </div>
 
-    <div class="row">
+        <div class="row g-2">
-      <div
+          <div
-        v-for="action in adminActions"
+            v-for="action in adminActions"
-        :key="action.to"
+            :key="action.to"
-        class="col-12 col-md-6 col-xl-4 mb-3"
+            class="col-12 col-md-6 col-xl-4"
-      >
+          >
-        <NuxtLink
+            <NuxtLink
-          :to="action.to"
+              :to="action.to"
-          class="btn w-100 py-3 px-4 dashboard-action"
+              class="btn btn-sm w-100 d-flex align-items-center justify-content-start gap-2 admin-action"
-          :class="action.tone === 'danger' ? 'btn-outline-danger' : 'btn-outline-primary'"
+              :class="action.tone === 'danger' ? 'btn-outline-danger' : 'btn-outline-primary'"
-        >
+            >
-          <span class="dashboard-action-inner">
+              <BIIcon :name="action.icon" size="sm" :color="action.tone === 'danger' ? 'danger' : 'primary'" />
-            <BIIcon
+              <span>{{ action.label }}</span>
-              :name="action.icon"
+            </NuxtLink>
-              size="sm"
+          </div>
-              :color="action.tone === 'danger' ? 'danger' : 'primary'"
+        </div>
-              class="dashboard-action-icon"
-            />
-            <span>{{ action.label }}</span>
-          </span>
-        </NuxtLink>
       </div>
     </div>
   </div>
 </template>
 
 <style scoped>
-.dashboard-action {
+.admin-action {
-  min-height: 72px;
+  min-height: 44px;
-  display: flex;
+  text-align: left;
-  align-items: center;
-  justify-content: center;
-}
-
-.dashboard-action-inner {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0.75rem;
-  text-align: center;
-  white-space: normal;
-}
-
-.dashboard-action-icon {
-  flex: 0 0 auto;
 }
 </style>

app/composables/useAuth.ts

@@ -29,7 +29,10 @@ export const useAuth = () => {
   type UserContext = CurrentUserResponse['user']
   const user = useState<UserContext | null>('auth_user', () => null)
   const isSyncingUser = useState<boolean>('auth_syncing', () => false)
+  const unreadNotifications = useState<number>('auth_unread_notifications', () => 0)
+  const isRefreshingNotifications = useState<boolean>('auth_refreshing_notifications', () => false)
   const isAuthenticated = computed(() => !!(tokenState.value || token.value))
+  const hasUnreadNotifications = computed(() => unreadNotifications.value > 0)
   const isAuthStatusError = (error: any) => {
     const status = error?.statusCode || error?.status || error?.response?.status
     return status === 401 || status === 403
@@ -39,6 +42,24 @@ export const useAuth = () => {
     tokenState.value = newVal || null
   })
 
+  const refreshUnreadNotifications = async () => {
+    if (!(tokenState.value || token.value) || !user.value || isRefreshingNotifications.value) {
+      unreadNotifications.value = user.value ? unreadNotifications.value : 0
+      return
+    }
+
+    isRefreshingNotifications.value = true
+
+    try {
+      const res = await fetchNotifications({ page: 1, per_page: 20 })
+      unreadNotifications.value = (res.notifications || []).filter(notification => !notification.read_at).length
+    } catch (error) {
+      console.error('[Auth] Failed to refresh notifications:', error)
+    } finally {
+      isRefreshingNotifications.value = false
+    }
+  }
+
   const syncUser = async (options: { redirectOnSuccess?: boolean; currentPath?: string } = {}) => {
     const { redirectOnSuccess = false, currentPath } = options
     const tokenVal = tokenState.value || token.value
@@ -49,6 +70,7 @@ export const useAuth = () => {
       const res = await fetchCurrentUser()
       if (res.ok) {
         user.value = res.user
+        await refreshUnreadNotifications()
         const path = currentPath ?? useNuxtApp().$router.currentRoute.value.path
 
         if (redirectOnSuccess && path.startsWith('/auth')) {
@@ -79,6 +101,7 @@ export const useAuth = () => {
     token.value = null
     tokenState.value = null
     user.value = null
+    unreadNotifications.value = 0
     nuxtApp.runWithContext(() => navigateTo('/auth/login'))
   }
 
@@ -121,6 +144,9 @@ export const useAuth = () => {
     tokenState,
     isSyncingUser,
     isAuthenticated,
+    unreadNotifications,
+    hasUnreadNotifications,
+    refreshUnreadNotifications,
     handleLoginSuccess,
     syncUser,
     logout,

app/pages/admin/reports.vue

@@ -94,7 +94,7 @@ const truncate = (value?: string, max = 120) => {
 </script>
 
 <template>
-  <div class="container my-5 admin-report-overview">
+  <div class="container my-5">
     <div class="d-flex flex-wrap justify-content-between align-items-center gap-3 mb-4">
       <div>
         <h1 class="h3 font-weight-bold mb-1">Overview Segnalazioni</h1>
@@ -110,14 +110,16 @@ const truncate = (value?: string, max = 120) => {
         { label: 'In lavorazione', value: activeReports, tone: 'warning' },
         { label: 'Chiuse/Risolte', value: closedReports, tone: 'success' }
       ]" :key="card.label">
-        <div class="overview-stat-card" :class="`tone-${card.tone}`">
+        <div class="card card-bg dashboard-stat h-100">
-          <span class="overview-stat-label">{{ card.label }}</span>
+          <div class="card-body py-3">
-          <strong class="overview-stat-value">{{ card.value }}</strong>
+            <div class="stat-value">{{ card.value }}</div>
+            <div class="small text-muted">{{ card.label }}</div>
+          </div>
         </div>
       </div>
     </div>
 
-    <div class="card border-0 shadow-sm mb-4">
+    <div class="card card-bg border-0 shadow-sm mb-4">
       <div class="card-body">
         <div class="row g-3 align-items-end">
           <div class="col-12 col-lg-4">
@@ -154,17 +156,31 @@ const truncate = (value?: string, max = 120) => {
     </div>
 
     <template v-else>
-      <div class="card border-0 shadow-sm mb-4">
+      <div class="card card-bg border-0 shadow-sm mb-4">
         <div class="card-body">
           <div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-3">
             <h2 class="h5 mb-0">Distribuzione stati</h2>
             <span class="text-muted small">{{ filteredReports.length }} elementi visibili</span>
           </div>
-          <div class="status-chip-grid">
+          <div class="table-responsive report-table-wrapper">
-            <div v-for="item in reportsByStatus" :key="item.status" class="status-chip" :class="`tone-${item.tone}`">
+            <table class="table table-hover report-table mb-0 align-middle">
-              <span>{{ item.label }}</span>
+              <thead>
-              <strong>{{ item.total }}</strong>
+                <tr>
-            </div>
+                  <th>Stato</th>
+                  <th class="text-end">Totale</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr v-for="item in reportsByStatus" :key="item.status">
+                  <td>
+                    <span class="badge" :class="`bg-${item.tone}`">
+                      {{ item.label }}
+                    </span>
+                  </td>
+                  <td class="text-end">{{ item.total }}</td>
+                </tr>
+              </tbody>
+            </table>
           </div>
         </div>
       </div>
@@ -173,7 +189,7 @@ const truncate = (value?: string, max = 120) => {
         Nessuna segnalazione trovata con filtri correnti.
       </div>
 
-      <div v-else class="card border-0 shadow-sm">
+      <div v-else class="card card-bg border-0 shadow-sm">
         <div class="card-body p-0">
           <div class="table-responsive report-table-wrapper">
             <table class="table table-hover report-table mb-0 align-middle">
@@ -198,7 +214,7 @@ const truncate = (value?: string, max = 120) => {
                   <td>{{ report.address || '-' }}</td>
                   <td>{{ report.area_name || 'Non assegnata' }}</td>
                   <td>
-                    <span class="badge rounded-pill" :class="`text-bg-${statusMeta[report.status].tone}`">
+                    <span class="badge" :class="`bg-${statusMeta[report.status].tone}`">
                       {{ statusMeta[report.status].label }}
                     </span>
                   </td>
@@ -213,78 +229,3 @@ const truncate = (value?: string, max = 120) => {
     </template>
   </div>
 </template>
-
-<style scoped>
-.admin-report-overview {
-  --admin-surface: #ffffff;
-  --admin-border: rgba(31, 48, 78, 0.12);
-  --admin-text-soft: #5b6577;
-}
-
-.overview-stat-card {
-  background:
-    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(246, 248, 252, 0.9)),
-    var(--admin-surface);
-  border: 1px solid var(--admin-border);
-  border-radius: 1rem;
-  padding: 1rem 1.1rem;
-  min-height: 118px;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  box-shadow: 0 14px 34px rgba(31, 48, 78, 0.08);
-}
-
-.overview-stat-card::before {
-  content: '';
-  width: 2.5rem;
-  height: 0.35rem;
-  border-radius: 999px;
-  display: block;
-}
-
-.overview-stat-card.tone-primary::before { background: #0d6efd; }
-.overview-stat-card.tone-danger::before { background: #d9364f; }
-.overview-stat-card.tone-warning::before { background: #c58100; }
-.overview-stat-card.tone-success::before { background: #198754; }
-
-.overview-stat-label {
-  color: var(--admin-text-soft);
-  font-size: 0.9rem;
-}
-
-.overview-stat-value {
-  font-size: clamp(1.8rem, 4vw, 2.5rem);
-  line-height: 1;
-  color: #17324d;
-}
-
-.status-chip-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
-  gap: 0.75rem;
-}
-
-.status-chip {
-  border-radius: 0.9rem;
-  padding: 0.85rem 1rem;
-  border: 1px solid var(--admin-border);
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 1rem;
-  background: #fff;
-}
-
-.status-chip strong {
-  font-size: 1.1rem;
-}
-
-.status-chip.tone-danger { background: rgba(217, 54, 79, 0.08); }
-.status-chip.tone-warning { background: rgba(197, 129, 0, 0.08); }
-.status-chip.tone-info { background: rgba(13, 202, 240, 0.08); }
-.status-chip.tone-primary { background: rgba(13, 110, 253, 0.08); }
-.status-chip.tone-success { background: rgba(25, 135, 84, 0.08); }
-.status-chip.tone-secondary,
-.status-chip.tone-dark { background: rgba(108, 117, 125, 0.08); }
-</style>

app/pages/notifications.vue

@@ -1,11 +1,13 @@
 <script setup lang="ts">
+import type { Notification } from '~/types/api'
+
 definePageMeta({
   middleware: 'auth',
 })
 
 useHead({ title: 'Notifiche - Visione' })
 
-const { fetchNotifications, markNotificationRead } = useAuth()
+const { fetchNotifications, markNotificationRead, refreshUnreadNotifications } = useAuth()
 const router = useRouter()
 
 const page = ref(1)
@@ -13,27 +15,25 @@ const perPage = ref(15)
 
 const { data: notificationsData, refresh: refreshNotifications } = await useAsyncData(
     'notifications',
-    () => fetchNotifications({ page: page.value, per_page: perPage.value })
+    () => fetchNotifications({ page: page.value, per_page: perPage.value }),
+    { watch: [page] }
 )
 
-const notifications = computed(() => notificationsData.value?.notifications || [])
+const notifications = computed<Notification[]>(() => notificationsData.value?.notifications || [])
 const totalNotifications = computed(() => notificationsData.value?.notifications?.length || 0)
-const unreadCount = computed(() => notifications.value.filter((n: any) => !n.read_at).length)
+const unreadCount = computed(() => notifications.value.filter((notification) => !notification.read_at).length)
-
-const handlePageChange = (newPage: number) => {
-  page.value = newPage
-}
 
 const handleMarkAsRead = async (notificationId: number) => {
   try {
     await markNotificationRead(notificationId)
     await refreshNotifications()
+    await refreshUnreadNotifications()
   } catch (error) {
     console.error('Error marking notification as read:', error)
   }
 }
 
-const handleNotificationClick = async (notification: any) => {
+const handleNotificationClick = async (notification: Notification) => {
   if (!notification.read_at) {
     await handleMarkAsRead(notification.id)
   }
@@ -111,73 +111,71 @@ const getNotificationColor = (type: string): string => {
     <div class="container mb-5">
       <div class="row">
         <div class="col-12 col-lg-10 offset-lg-1">
-
+          <div v-if="notifications.length === 0" class="card card-bg border-0 shadow-sm">
-          <div class="d-flex gap-2 mb-4">
+            <div class="card-body py-5 text-center">
-            <button class="btn btn-sm btn-outline-primary active">Tutti</button>
+              <BIIcon name="it-bell" size="lg" color="secondary" class="mb-3 d-block mx-auto" />
-            <button class="btn btn-sm btn-outline-secondary">Solo non letti</button>
+              <h2 class="h5 mb-2">Nessuna notifica</h2>
+              <p class="text-muted mb-3">Quando arriveranno aggiornamenti sulle tue segnalazioni, li troverai qui.</p>
+              <NuxtLink to="/reports" class="btn btn-outline-primary btn-sm">
+                Vai alle segnalazioni
+              </NuxtLink>
+            </div>
           </div>
 
-          <div v-if="notifications.length === 0" class="text-center py-5">
+          <div v-else class="card card-bg border-0 shadow-sm">
-            <BIIcon name="it-bell" size="xl" color="info" class="mb-3 d-block" />
+            <div class="card-body p-0">
-            <h6 class="text-muted">Nessuna notifica</h6>
+              <div
-            <p class="small text-muted">Quando riceverai nuovi aggiornamenti sulle tue segnalazioni, appariranno qui.</p>
+                v-for="notification in notifications"
-          </div>
+                :key="notification.id"
-
+                class="notification-row p-3"
-          <div v-else class="list-group">
+                :class="{ 'notification-row-unread': !notification.read_at }"
-            <button
+              >
-              v-for="notification in notifications"
+                <div class="d-flex align-items-start gap-3">
-              :key="notification.id"
+                  <div class="flex-shrink-0 mt-1">
-              type="button"
+                    <div
-              class="list-group-item list-group-item-action border-0 p-3 mb-3 rounded-2"
+                      class="rounded-circle d-flex align-items-center justify-content-center notification-icon"
-              :class="{
+                      :class="`bg-${getNotificationColor(notification.type)}`"
-                'bg-light': !notification.read_at,
-                'bg-white': notification.read_at,
-              }"
-              @click="handleNotificationClick(notification)"
-            >
-              <div class="d-flex align-items-start gap-3">
-                <div class="flex-shrink-0 mt-1">
-                  <div class="rounded-circle p-2" :class="`bg-${getNotificationColor(notification.type)}`" style="width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;">
-                    <BIIcon :name="getNotificationIcon(notification.type)" size="sm" color="white" />
-                  </div>
-                </div>
-
-                <div class="flex-grow-1">
-                  <div class="d-flex align-items-start justify-content-between">
-                    <div>
-                      <h6 class="mb-1 font-weight-bold" :class="{ 'text-dark': !notification.read_at }">
-                        {{ notification.title }}
-                      </h6>
-                      <p class="mb-1 small" :class="{ 'text-muted': notification.read_at }">
-                        {{ notification.body }}
-                      </p>
-                      <small class="text-muted">
-                        {{ formatDate(notification.created_at) }}
-                      </small>
-                    </div>
-
-                    <div v-if="!notification.read_at" class="flex-shrink-0">
-                      <span class="badge bg-primary rounded-pill">Nuovo</span>
-                    </div>
-                  </div>
-
-                  <div v-if="notification.report_id" class="mt-2 d-flex gap-2">
-                    <NuxtLink :to="`/reports/${notification.report_id}`" class="btn btn-sm btn-outline-primary">
-                      <BIIcon name="it-arrow-right" size="xs" class="me-1" />
-                      Vedi segnalazione
-                    </NuxtLink>
-                    <button
-                      v-if="!notification.read_at"
-                      type="button"
-                      class="btn btn-sm btn-outline-secondary"
-                      @click.stop="handleMarkAsRead(notification.id)"
                     >
-                      Segna come letta
+                      <BIIcon :name="getNotificationIcon(notification.type)" size="sm" color="white" />
-                    </button>
+                    </div>
+                  </div>
+
+                  <div class="flex-grow-1">
+                    <div class="d-flex flex-wrap justify-content-between gap-2">
+                      <div>
+                        <h2 class="h6 mb-1">{{ notification.title }}</h2>
+                        <p class="mb-1 text-muted">{{ notification.body }}</p>
+                        <small class="text-muted">{{ formatDate(notification.created_at) }}</small>
+                      </div>
+                      <div v-if="!notification.read_at" class="flex-shrink-0">
+                        <span class="badge bg-primary">Nuovo</span>
+                      </div>
+                    </div>
+
+                    <div class="mt-3 d-flex flex-wrap gap-2">
+                      <button
+                        type="button"
+                        class="btn btn-outline-primary btn-sm"
+                        @click="handleNotificationClick(notification)"
+                      >
+                        Apri notifica
+                      </button>
+                      <NuxtLink v-if="notification.report_id" :to="`/reports/${notification.report_id}`" class="btn btn-outline-primary btn-sm">
+                        Vedi segnalazione
+                      </NuxtLink>
+                      <button
+                        v-if="!notification.read_at"
+                        type="button"
+                        class="btn btn-outline-secondary btn-sm"
+                        @click.stop="handleMarkAsRead(notification.id)"
+                      >
+                        Segna come letta
+                      </button>
+                    </div>
                   </div>
                 </div>
               </div>
-            </button>
+            </div>
           </div>
 
           <Pagination
@@ -185,7 +183,7 @@ const getNotificationColor = (type: string): string => {
             :current-page="page"
             :per-page="perPage"
             :total-items="totalNotifications"
-            @page-change="handlePageChange"
+            @page-change="page = $event"
           />
 
         </div>
@@ -196,23 +194,17 @@ const getNotificationColor = (type: string): string => {
 </template>
 
 <style scoped>
-.list-group-item {
+.notification-row + .notification-row {
-  border: 1px solid #e9ecef;
+  border-top: 1px solid #e9ecef;
-  transition: all 0.2s ease;
-  cursor: pointer;
-
-  &:hover {
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-    transform: translateY(-1px);
-  }
-
-  &.bg-light {
-    border-left: 4px solid #006f9d;
-  }
 }
 
-.rounded-2 {
+.notification-row-unread {
-  border-radius: 0.5rem;
+  border-left: 4px solid #0066cc;
+  background: #f8fbff;
+}
+
+.notification-icon {
+  width: 40px;
+  height: 40px;
 }
 </style>
-