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;
 }
-</style>
+
+.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/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'
-  }
+  { to: '/admin/reports', icon: 'it-files', label: 'Report', tone: 'primary' },
+  { 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="col-6 col-md-3 mb-3">
-        <div class="card-wrapper card-space h-100">
-          <div class="card card-bg text-center h-100">
-            <div class="card-body">
-              <h2 class="text-primary">{{ statsRes.total_users || 0 }}</h2>
-              <p class="card-text mb-0">Utenti Registrati</p>
-            </div>
+    <div class="row g-3 mb-4" v-if="!pending && statsRes?.ok">
+      <div class="col-6 col-lg-3">
+        <div class="card card-bg dashboard-stat h-100">
+          <div class="card-body py-3">
+            <div class="stat-value">{{ statsRes.total_users || 0 }}</div>
+            <div class="small text-muted">Utenti registrati</div>
           </div>
         </div>
       </div>
 
-      <div class="col-6 col-md-3 mb-3">
-        <div class="card-wrapper card-space h-100">
-          <div class="card card-bg text-center h-100">
-            <div class="card-body">
-              <h2 class="text-warning">
-                {{ 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 class="col-6 col-lg-3">
+        <div class="card card-bg dashboard-stat h-100">
+          <div class="card-body py-3">
+            <div class="stat-value">
+              {{ statsRes.open_reports ?? statsRes.reports_by_status?.find(s => s.status === 'OPEN')?.total ?? 0 }}
             </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
-        v-for="action in adminActions"
-        :key="action.to"
-        class="col-12 col-md-6 col-xl-4 mb-3"
-      >
-        <NuxtLink
-          :to="action.to"
-          class="btn w-100 py-3 px-4 dashboard-action"
-          :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'"
-              class="dashboard-action-icon"
-            />
-            <span>{{ action.label }}</span>
-          </span>
-        </NuxtLink>
+        <div class="row g-2">
+          <div
+            v-for="action in adminActions"
+            :key="action.to"
+            class="col-12 col-md-6 col-xl-4"
+          >
+            <NuxtLink
+              :to="action.to"
+              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'"
+            >
+              <BIIcon :name="action.icon" size="sm" :color="action.tone === 'danger' ? 'danger' : 'primary'" />
+              <span>{{ action.label }}</span>
+            </NuxtLink>
+          </div>
+        </div>
       </div>
     </div>
   </div>
 </template>
 
 <style scoped>
-.dashboard-action {
-  min-height: 72px;
-  display: flex;
-  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;
+.admin-action {
+  min-height: 44px;
+  text-align: left;
 }
 </style>