feat: Implement unified sidebar with Nuxt UI across all dashboard pages

- Install @nuxt/ui and integrate with existing Vuetify
- Create new layouts/dashboard-unified.vue with modern sidebar design
- Features: clean white design, collapsible sidebar, role-based navigation
- Remove old layouts/dashboard.vue to eliminate dual-sidebar confusion
- Update all dashboard pages to use dashboard-unified layout
- Add demo page showcasing new sidebar features
- Fix auth error handler to ignore external service 401 errors
- Ensure consistent navigation experience across entire platform

pages/dashboard/admin/audit-logs.vue

@@ -238,6 +238,7 @@ import { formatDate, formatTime, formatDateTime } from '@/utils/dateUtils'
 
 definePageMeta({
   middleware: ['authentication', 'authorization'],
+  layout: 'dashboard-unified',
   auth: {
     roles: ['admin']
   }

pages/dashboard/admin/system-logs.vue

@@ -230,6 +230,7 @@ import { formatTime, formatDateTime } from '@/utils/dateUtils'
 
 definePageMeta({
   middleware: ['authentication', 'authorization'],
+  layout: 'dashboard-unified',
   auth: {
     roles: ['admin']
   }

pages/dashboard/auth-test.vue

@@ -122,6 +122,10 @@
 </template>
 
 <script setup lang="ts">
+definePageMeta({
+  layout: 'dashboard-unified'
+});
+
 const { user, isAuthenticated, authSource, isAdmin, logout } = useUnifiedAuth();
 const router = useRouter();
 

pages/dashboard/expenses.vue

@@ -347,7 +347,7 @@ const ExpenseCreateModal = defineAsyncComponent(() => import('@/components/Expen
 // Page meta
 definePageMeta({
   middleware: ['authentication', 'authorization'],
-  layout: 'dashboard',
+  layout: 'dashboard-unified',
   roles: ['sales', 'admin']
 });
 

pages/dashboard/file-browser.vue

@@ -336,6 +336,10 @@
 </template>
 
 <script setup lang="ts">
+definePageMeta({
+  layout: 'dashboard-unified'
+});
+
 import { ref, computed, onMounted, watch } from 'vue';
 import FileUploader from '~/components/FileUploader.vue';
 import FilePreviewModal from '~/components/FilePreviewModal.vue';

pages/dashboard/sidebar-demo.vue

@@ -0,0 +1,67 @@
+<template>
+  <div>
+    <v-card>
+      <v-card-title class="text-h4">
+        New Unified Sidebar Demo
+      </v-card-title>
+      
+      <v-card-text>
+        <v-alert type="success" variant="tonal" class="mb-6">
+          <div class="text-h6 mb-2">✨ Modern Sidebar Features</div>
+          <ul class="pl-4">
+            <li>Clean white design with subtle borders</li>
+            <li>Collapsible sidebar with smooth animations</li>
+            <li>Icons that change color when active</li>
+            <li>User info with avatar at the bottom</li>
+            <li>Role badges (Admin/Sales)</li>
+            <li>Responsive - becomes a drawer on mobile</li>
+            <li>Page title in the top navbar</li>
+          </ul>
+        </v-alert>
+
+        <v-row>
+          <v-col cols="12" md="6">
+            <v-card variant="outlined">
+              <v-card-title>How to Use</v-card-title>
+              <v-card-text>
+                <p class="mb-3">Click the chevron icon in the sidebar header to collapse/expand it.</p>
+                <p class="mb-3">On mobile devices, use the hamburger menu to toggle the sidebar.</p>
+                <p>The sidebar automatically adjusts based on your role permissions.</p>
+              </v-card-text>
+            </v-card>
+          </v-col>
+          
+          <v-col cols="12" md="6">
+            <v-card variant="outlined">
+              <v-card-title>Navigation Items</v-card-title>
+              <v-card-text>
+                <p class="mb-3">The sidebar shows different menu items based on your role:</p>
+                <ul class="pl-4">
+                  <li><strong>All users:</strong> Dashboard, Analytics, Berth List, Interest List, File Browser</li>
+                  <li><strong>Sales/Admin:</strong> + Expenses, Interest Emails</li>
+                  <li><strong>Admin only:</strong> + Admin Console</li>
+                </ul>
+              </v-card-text>
+            </v-card>
+          </v-col>
+        </v-row>
+
+        <v-alert type="info" variant="tonal" class="mt-6">
+          <div class="text-subtitle-1 font-weight-medium mb-2">Technical Details</div>
+          <p class="text-body-2">This sidebar uses Nuxt UI's <code>UDashboardSidebar</code> component with custom styling to match your brand colors and maintain a clean, professional look.</p>
+        </v-alert>
+      </v-card-text>
+    </v-card>
+  </div>
+</template>
+
+<script setup>
+definePageMeta({
+  middleware: ['authentication'],
+  layout: 'dashboard-unified'
+});
+
+useHead({
+  title: 'Sidebar Demo'
+});
+</script>