feat(mobile-navigation-improvements): Complete US-202 - MobileDrawerMenu Material Design cu Profil

Implemented by Ralph autonomous loop.
Iteration: 2

Co-Authored-By: Claude <noreply@anthropic.com>

scripts/ralph/prd.json

@@ -58,8 +58,8 @@
         "Dark mode support",
         "npm run build passes"
       ],
-      "passes": false,
+      "passes": true,
-      "notes": ""
+      "notes": "Completed in iteration 2"
     },
     {
       "id": "US-208",

scripts/ralph/progress.txt

@@ -10,3 +10,9 @@ User Stories: 14 (US-201 to US-214)
 [2026-01-12 12:03:07] Working on story: US-201
 [2026-01-12 12:03:07] Running Claude... (log: /workspace/roa2web/scripts/ralph/logs/iteration_1_US-201.log)
 [2026-01-12 12:05:02] SUCCESS: Story US-201 passed!
+[2026-01-12 12:05:02] Changes committed
+[2026-01-12 12:05:02] Progress: 1/14 stories completed
+[2026-01-12 12:05:04] === Iteration 2/100 ===
+[2026-01-12 12:05:04] Working on story: US-202
+[2026-01-12 12:05:04] Running Claude... (log: /workspace/roa2web/scripts/ralph/logs/iteration_2_US-202.log)
+[2026-01-12 12:07:29] SUCCESS: Story US-202 passed!

src/shared/components/mobile/MobileDrawerMenu.vue

@@ -0,0 +1,579 @@
+<template>
+  <Teleport to="body">
+    <Transition name="drawer">
+      <div v-if="modelValue" class="drawer-overlay" @click.self="close">
+        <nav class="drawer-menu" ref="drawerRef">
+          <!-- Header with Logo -->
+          <div class="drawer-header">
+            <div class="drawer-logo">
+              <i class="pi pi-building"></i>
+              <span class="logo-text">ROA2WEB</span>
+            </div>
+          </div>
+
+          <!-- Main Navigation Section -->
+          <div class="drawer-section">
+            <ul class="drawer-nav">
+              <li v-for="item in navigationItems" :key="item.to">
+                <router-link
+                  :to="item.to"
+                  class="drawer-link"
+                  :class="{ 'active': isActive(item.to, item.exactMatch) }"
+                  @click="handleNavClick"
+                >
+                  <i :class="['drawer-icon', item.icon]"></i>
+                  <span class="drawer-label">{{ item.label }}</span>
+                </router-link>
+              </li>
+            </ul>
+          </div>
+
+          <!-- Divider -->
+          <div class="drawer-divider"></div>
+
+          <!-- Profile Section (at bottom) -->
+          <div class="drawer-profile">
+            <div class="profile-header">
+              <div class="profile-avatar">
+                <i class="pi pi-user"></i>
+              </div>
+              <div class="profile-info">
+                <span class="profile-name">{{ displayName }}</span>
+                <span class="profile-role">Utilizator</span>
+              </div>
+            </div>
+            <button
+              type="button"
+              class="drawer-link logout-link"
+              @click="handleLogout"
+            >
+              <i class="drawer-icon pi pi-sign-out"></i>
+              <span class="drawer-label">Deconectare</span>
+            </button>
+          </div>
+        </nav>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<script setup>
+import { computed, ref } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+
+/**
+ * MobileDrawerMenu - Material Design 3 inspired navigation drawer for mobile
+ *
+ * Props:
+ * - modelValue (v-model): Controls visibility of the drawer
+ * - user: Optional user object with { username } for profile display
+ * - onLogout: Optional callback function for logout action
+ *
+ * Events:
+ * - update:modelValue: Emitted when visibility changes (for v-model support)
+ * - logout: Emitted when logout is clicked (if no onLogout prop)
+ *
+ * Features:
+ * - Slide-in animation from left
+ * - Header with logo
+ * - Main navigation links (Dashboard, Bonuri, Facturi, Balanță, Trezorerie, Setări)
+ * - Active state highlighting based on current route
+ * - Profile section with user name and logout button
+ * - Close on tap outside or on link click
+ * - Full dark mode support
+ * - Teleported to body to avoid z-index issues
+ */
+
+const props = defineProps({
+  /**
+   * Controls visibility of the drawer (v-model support)
+   */
+  modelValue: {
+    type: Boolean,
+    default: false
+  },
+  /**
+   * User object for profile display
+   * Expected shape: { username: string }
+   */
+  user: {
+    type: Object,
+    default: () => null
+  },
+  /**
+   * Optional callback for logout action
+   * If not provided, 'logout' event is emitted
+   */
+  onLogout: {
+    type: Function,
+    default: null
+  }
+})
+
+const emit = defineEmits(['update:modelValue', 'logout'])
+
+const route = useRoute()
+const router = useRouter()
+const drawerRef = ref(null)
+
+/**
+ * Navigation items for the drawer menu
+ * Based on acceptance criteria: Dashboard, Bonuri, Facturi, Balanță, Trezorerie, Setări
+ */
+const navigationItems = [
+  { to: '/reports/dashboard', icon: 'pi pi-home', label: 'Dashboard', exactMatch: true },
+  { to: '/data-entry', icon: 'pi pi-receipt', label: 'Bonuri', exactMatch: false },
+  { to: '/reports/invoices', icon: 'pi pi-file', label: 'Facturi', exactMatch: true },
+  { to: '/reports/trial-balance', icon: 'pi pi-calculator', label: 'Balanță', exactMatch: true },
+  { to: '/reports/bank-cash', icon: 'pi pi-money-bill', label: 'Trezorerie', exactMatch: true },
+  { to: '/data-entry/ocr-metrics', icon: 'pi pi-cog', label: 'Setări', exactMatch: true }
+]
+
+/**
+ * Display name for profile section
+ * Falls back to 'Utilizator' if no user provided
+ */
+const displayName = computed(() => {
+  return props.user?.username || 'Utilizator'
+})
+
+/**
+ * Check if a navigation item is active based on current route
+ */
+const isActive = (to, exactMatch) => {
+  if (exactMatch) {
+    return route.path === to
+  }
+  // For non-exact match, check if current path starts with the route
+  return route.path.startsWith(to)
+}
+
+/**
+ * Close the drawer menu
+ */
+const close = () => {
+  emit('update:modelValue', false)
+}
+
+/**
+ * Handle navigation link click - close drawer after navigation
+ */
+const handleNavClick = () => {
+  close()
+}
+
+/**
+ * Handle logout action
+ * Calls onLogout prop if provided, otherwise emits 'logout' event
+ */
+const handleLogout = async () => {
+  if (props.onLogout) {
+    await props.onLogout()
+  } else {
+    emit('logout')
+  }
+  close()
+}
+</script>
+
+<style scoped>
+/* ================================================
+   MobileDrawerMenu Component Styles
+   Material Design 3 inspired navigation drawer
+   ================================================ */
+
+/* Overlay background */
+.drawer-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: var(--z-modal-backdrop);
+  display: flex;
+  align-items: stretch;
+  justify-content: flex-start;
+}
+
+/* Main drawer container */
+.drawer-menu {
+  width: 280px;
+  max-width: 85vw;
+  height: 100%;
+  background: var(--surface-card);
+  box-shadow: var(--shadow-xl);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  z-index: var(--z-modal);
+}
+
+/* ================================================
+   Header with Logo
+   ================================================ */
+
+.drawer-header {
+  padding: var(--space-lg) var(--space-md);
+  border-bottom: 1px solid var(--surface-border);
+  background: var(--surface-ground);
+}
+
+.drawer-logo {
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+}
+
+.drawer-logo i {
+  font-size: var(--text-2xl);
+  color: var(--color-primary);
+}
+
+.logo-text {
+  font-size: var(--text-xl);
+  font-weight: var(--font-bold);
+  color: var(--text-color);
+}
+
+/* ================================================
+   Navigation Section
+   ================================================ */
+
+.drawer-section {
+  flex: 1;
+  padding: var(--space-sm) 0;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+.drawer-nav {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.drawer-link {
+  display: flex;
+  align-items: center;
+  gap: var(--space-md);
+  padding: var(--space-md) var(--space-lg);
+  color: var(--text-color);
+  text-decoration: none;
+  font-size: var(--text-base);
+  font-weight: var(--font-medium);
+  min-height: 48px;
+  transition: background var(--transition-fast), color var(--transition-fast);
+  cursor: pointer;
+  border: none;
+  background: none;
+  width: 100%;
+  text-align: left;
+}
+
+.drawer-link:hover {
+  background: var(--surface-hover);
+}
+
+.drawer-link:active {
+  background: var(--surface-hover);
+}
+
+/* Active state */
+.drawer-link.active {
+  background: var(--blue-50);
+  color: var(--color-primary);
+}
+
+.drawer-link.active .drawer-icon {
+  color: var(--color-primary);
+}
+
+.drawer-icon {
+  font-size: var(--text-xl);
+  width: 24px;
+  text-align: center;
+  color: var(--text-color-secondary);
+  flex-shrink: 0;
+}
+
+.drawer-label {
+  flex: 1;
+}
+
+/* ================================================
+   Divider
+   ================================================ */
+
+.drawer-divider {
+  height: 1px;
+  background: var(--surface-border);
+  margin: var(--space-xs) var(--space-md);
+}
+
+/* ================================================
+   Profile Section
+   ================================================ */
+
+.drawer-profile {
+  padding: var(--space-md) 0;
+  border-top: 1px solid var(--surface-border);
+  margin-top: auto;
+}
+
+.profile-header {
+  display: flex;
+  align-items: center;
+  gap: var(--space-md);
+  padding: var(--space-sm) var(--space-lg);
+  margin-bottom: var(--space-xs);
+}
+
+.profile-avatar {
+  width: 40px;
+  height: 40px;
+  border-radius: var(--radius-full);
+  background: var(--blue-100);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.profile-avatar i {
+  font-size: var(--text-lg);
+  color: var(--color-primary);
+}
+
+.profile-info {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.profile-name {
+  font-size: var(--text-base);
+  font-weight: var(--font-semibold);
+  color: var(--text-color);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.profile-role {
+  font-size: var(--text-sm);
+  color: var(--text-color-secondary);
+}
+
+/* Logout link styling */
+.logout-link {
+  color: var(--color-error);
+}
+
+.logout-link .drawer-icon {
+  color: var(--color-error);
+}
+
+.logout-link:hover {
+  background: var(--red-50);
+}
+
+/* ================================================
+   Slide Animation (Vue Transition)
+   ================================================ */
+
+.drawer-enter-active,
+.drawer-leave-active {
+  transition: opacity var(--transition-normal);
+}
+
+.drawer-enter-active .drawer-menu,
+.drawer-leave-active .drawer-menu {
+  transition: transform var(--transition-normal);
+}
+
+/* Initial state: invisible + drawer off-screen to left */
+.drawer-enter-from,
+.drawer-leave-to {
+  opacity: 0;
+}
+
+.drawer-enter-from .drawer-menu,
+.drawer-leave-to .drawer-menu {
+  transform: translateX(-100%);
+}
+
+/* Final state: visible + drawer in place */
+.drawer-enter-to,
+.drawer-leave-from {
+  opacity: 1;
+}
+
+.drawer-enter-to .drawer-menu,
+.drawer-leave-from .drawer-menu {
+  transform: translateX(0);
+}
+
+/* ================================================
+   Dark Mode Support
+   ================================================ */
+
+/* Manual dark mode via data-theme attribute */
+[data-theme="dark"] .drawer-overlay {
+  background: rgba(0, 0, 0, 0.7);
+}
+
+[data-theme="dark"] .drawer-menu {
+  background: var(--surface-card);
+  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.4);
+}
+
+[data-theme="dark"] .drawer-header {
+  background: var(--surface-ground);
+  border-bottom-color: var(--surface-border);
+}
+
+[data-theme="dark"] .drawer-logo i {
+  color: var(--blue-400);
+}
+
+[data-theme="dark"] .logo-text {
+  color: var(--text-color);
+}
+
+[data-theme="dark"] .drawer-link {
+  color: var(--text-color);
+}
+
+[data-theme="dark"] .drawer-link:hover {
+  background: var(--surface-hover);
+}
+
+[data-theme="dark"] .drawer-link.active {
+  background: var(--blue-900);
+  color: var(--blue-400);
+}
+
+[data-theme="dark"] .drawer-link.active .drawer-icon {
+  color: var(--blue-400);
+}
+
+[data-theme="dark"] .drawer-icon {
+  color: var(--text-color-secondary);
+}
+
+[data-theme="dark"] .drawer-divider {
+  background: var(--surface-border);
+}
+
+[data-theme="dark"] .drawer-profile {
+  border-top-color: var(--surface-border);
+}
+
+[data-theme="dark"] .profile-avatar {
+  background: var(--blue-900);
+}
+
+[data-theme="dark"] .profile-avatar i {
+  color: var(--blue-400);
+}
+
+[data-theme="dark"] .profile-name {
+  color: var(--text-color);
+}
+
+[data-theme="dark"] .profile-role {
+  color: var(--text-color-secondary);
+}
+
+[data-theme="dark"] .logout-link {
+  color: var(--red-400);
+}
+
+[data-theme="dark"] .logout-link .drawer-icon {
+  color: var(--red-400);
+}
+
+[data-theme="dark"] .logout-link:hover {
+  background: var(--red-900);
+}
+
+/* Auto dark mode (when no manual theme is set) */
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme]) .drawer-overlay {
+    background: rgba(0, 0, 0, 0.7);
+  }
+
+  :root:not([data-theme]) .drawer-menu {
+    background: var(--surface-card);
+    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.4);
+  }
+
+  :root:not([data-theme]) .drawer-header {
+    background: var(--surface-ground);
+    border-bottom-color: var(--surface-border);
+  }
+
+  :root:not([data-theme]) .drawer-logo i {
+    color: var(--blue-400);
+  }
+
+  :root:not([data-theme]) .logo-text {
+    color: var(--text-color);
+  }
+
+  :root:not([data-theme]) .drawer-link {
+    color: var(--text-color);
+  }
+
+  :root:not([data-theme]) .drawer-link:hover {
+    background: var(--surface-hover);
+  }
+
+  :root:not([data-theme]) .drawer-link.active {
+    background: var(--blue-900);
+    color: var(--blue-400);
+  }
+
+  :root:not([data-theme]) .drawer-link.active .drawer-icon {
+    color: var(--blue-400);
+  }
+
+  :root:not([data-theme]) .drawer-icon {
+    color: var(--text-color-secondary);
+  }
+
+  :root:not([data-theme]) .drawer-divider {
+    background: var(--surface-border);
+  }
+
+  :root:not([data-theme]) .drawer-profile {
+    border-top-color: var(--surface-border);
+  }
+
+  :root:not([data-theme]) .profile-avatar {
+    background: var(--blue-900);
+  }
+
+  :root:not([data-theme]) .profile-avatar i {
+    color: var(--blue-400);
+  }
+
+  :root:not([data-theme]) .profile-name {
+    color: var(--text-color);
+  }
+
+  :root:not([data-theme]) .profile-role {
+    color: var(--text-color-secondary);
+  }
+
+  :root:not([data-theme]) .logout-link {
+    color: var(--red-400);
+  }
+
+  :root:not([data-theme]) .logout-link .drawer-icon {
+    color: var(--red-400);
+  }
+
+  :root:not([data-theme]) .logout-link:hover {
+    background: var(--red-900);
+  }
+}
+</style>