feat(mobile-navigation-improvements): Complete US-208 - Actualizare Router cu noile rute

Implemented by Ralph autonomous loop.
Iteration: 3

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

scripts/ralph/prd.json

@@ -73,8 +73,8 @@
         "Redirect /data-entry/ocr-metrics accesibil din Settings Hub",
         "npm run build passes"
       ],
-      "passes": false,
+      "passes": true,
-      "notes": ""
+      "notes": "Completed in iteration 3"
     },
     {
       "id": "US-206",

scripts/ralph/progress.txt

@@ -16,3 +16,9 @@ User Stories: 14 (US-201 to US-214)
 [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!
+[2026-01-12 12:07:29] Changes committed
+[2026-01-12 12:07:29] Progress: 2/14 stories completed
+[2026-01-12 12:07:31] === Iteration 3/100 ===
+[2026-01-12 12:07:31] Working on story: US-208
+[2026-01-12 12:07:31] Running Claude... (log: /workspace/roa2web/scripts/ralph/logs/iteration_3_US-208.log)
+[2026-01-12 12:09:57] SUCCESS: Story US-208 passed!

src/modules/reports/views/DetailedInvoicesView.vue

@@ -0,0 +1,117 @@
+<template>
+  <!-- Mobile Top Bar -->
+  <MobileTopBar
+    v-if="isMobile"
+    title="Facturi Detaliate"
+    :show-back="true"
+    @back-click="goBack"
+  />
+
+  <main class="main-content" :class="{ 'mobile-layout': isMobile }">
+    <div class="app-container">
+      <!-- Page Header - only on desktop -->
+      <div v-if="!isMobile" class="page-header">
+        <h1 class="page-title">Facturi Detaliate</h1>
+      </div>
+
+      <!-- Placeholder content - to be implemented in US-205 -->
+      <div class="placeholder-content">
+        <i class="pi pi-file-edit placeholder-icon"></i>
+        <h2>Facturi Detaliate</h2>
+        <p>Această pagină va conține tabelul detaliat al facturilor.</p>
+        <p class="placeholder-note">Implementare completă în US-205</p>
+      </div>
+    </div>
+  </main>
+
+  <!-- Mobile Bottom Nav -->
+  <MobileBottomNav v-if="isMobile" :items="mobileNavItems" />
+</template>
+
+<script setup>
+import { ref, computed, onMounted, onUnmounted } from 'vue'
+import { useRouter } from 'vue-router'
+import MobileTopBar from '@shared/components/mobile/MobileTopBar.vue'
+import MobileBottomNav from '@shared/components/mobile/MobileBottomNav.vue'
+
+const router = useRouter()
+
+// Detectare mobile - reactive with resize listener
+const windowWidth = ref(window.innerWidth)
+const isMobile = computed(() => windowWidth.value < 768)
+
+// Handle window resize for mobile detection
+const handleResize = () => {
+  windowWidth.value = window.innerWidth
+}
+
+// Navigation
+const goBack = () => {
+  router.push('/reports/dashboard')
+}
+
+// Mobile navigation items
+const mobileNavItems = computed(() => [
+  { to: '/data-entry', icon: 'pi pi-receipt', label: 'Bonuri' },
+  { icon: 'pi pi-cloud-upload', label: 'Upload' },
+  { to: '/reports/dashboard', icon: 'pi pi-chart-bar', label: 'Rapoarte', active: true },
+  { to: '/settings', icon: 'pi pi-cog', label: 'Setări' }
+])
+
+// Lifecycle
+onMounted(() => {
+  window.addEventListener('resize', handleResize)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('resize', handleResize)
+})
+</script>
+
+<style scoped>
+/* Mobile Layout - Padding for fixed top/bottom bars */
+.main-content.mobile-layout {
+  padding-top: 56px;
+  padding-bottom: 56px;
+}
+
+/* Placeholder content styles */
+.placeholder-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 300px;
+  text-align: center;
+  padding: var(--space-xl);
+  background: var(--surface-card);
+  border-radius: var(--radius-lg);
+  border: 1px dashed var(--surface-border);
+  margin: var(--space-lg);
+}
+
+.placeholder-icon {
+  font-size: 48px;
+  color: var(--primary-color);
+  margin-bottom: var(--space-lg);
+}
+
+.placeholder-content h2 {
+  font-size: var(--text-xl);
+  font-weight: var(--font-semibold);
+  color: var(--text-color);
+  margin: 0 0 var(--space-md) 0;
+}
+
+.placeholder-content p {
+  font-size: var(--text-base);
+  color: var(--text-color-secondary);
+  margin: 0 0 var(--space-sm) 0;
+}
+
+.placeholder-note {
+  font-size: var(--text-sm);
+  color: var(--text-color-secondary);
+  font-style: italic;
+}
+</style>

src/modules/reports/views/MaturityAnalysisView.vue

@@ -0,0 +1,117 @@
+<template>
+  <!-- Mobile Top Bar -->
+  <MobileTopBar
+    v-if="isMobile"
+    title="Analiză Scadențe"
+    :show-back="true"
+    @back-click="goBack"
+  />
+
+  <main class="main-content" :class="{ 'mobile-layout': isMobile }">
+    <div class="app-container">
+      <!-- Page Header - only on desktop -->
+      <div v-if="!isMobile" class="page-header">
+        <h1 class="page-title">Analiză Scadențe</h1>
+      </div>
+
+      <!-- Placeholder content - to be implemented in US-204 -->
+      <div class="placeholder-content">
+        <i class="pi pi-calendar placeholder-icon"></i>
+        <h2>Analiză Scadențe</h2>
+        <p>Această pagină va conține analiza scadențelor clienți/furnizori.</p>
+        <p class="placeholder-note">Implementare completă în US-204</p>
+      </div>
+    </div>
+  </main>
+
+  <!-- Mobile Bottom Nav -->
+  <MobileBottomNav v-if="isMobile" :items="mobileNavItems" />
+</template>
+
+<script setup>
+import { ref, computed, onMounted, onUnmounted } from 'vue'
+import { useRouter } from 'vue-router'
+import MobileTopBar from '@shared/components/mobile/MobileTopBar.vue'
+import MobileBottomNav from '@shared/components/mobile/MobileBottomNav.vue'
+
+const router = useRouter()
+
+// Detectare mobile - reactive with resize listener
+const windowWidth = ref(window.innerWidth)
+const isMobile = computed(() => windowWidth.value < 768)
+
+// Handle window resize for mobile detection
+const handleResize = () => {
+  windowWidth.value = window.innerWidth
+}
+
+// Navigation
+const goBack = () => {
+  router.push('/reports/dashboard')
+}
+
+// Mobile navigation items
+const mobileNavItems = computed(() => [
+  { to: '/data-entry', icon: 'pi pi-receipt', label: 'Bonuri' },
+  { icon: 'pi pi-cloud-upload', label: 'Upload' },
+  { to: '/reports/dashboard', icon: 'pi pi-chart-bar', label: 'Rapoarte', active: true },
+  { to: '/settings', icon: 'pi pi-cog', label: 'Setări' }
+])
+
+// Lifecycle
+onMounted(() => {
+  window.addEventListener('resize', handleResize)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('resize', handleResize)
+})
+</script>
+
+<style scoped>
+/* Mobile Layout - Padding for fixed top/bottom bars */
+.main-content.mobile-layout {
+  padding-top: 56px;
+  padding-bottom: 56px;
+}
+
+/* Placeholder content styles */
+.placeholder-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 300px;
+  text-align: center;
+  padding: var(--space-xl);
+  background: var(--surface-card);
+  border-radius: var(--radius-lg);
+  border: 1px dashed var(--surface-border);
+  margin: var(--space-lg);
+}
+
+.placeholder-icon {
+  font-size: 48px;
+  color: var(--primary-color);
+  margin-bottom: var(--space-lg);
+}
+
+.placeholder-content h2 {
+  font-size: var(--text-xl);
+  font-weight: var(--font-semibold);
+  color: var(--text-color);
+  margin: 0 0 var(--space-md) 0;
+}
+
+.placeholder-content p {
+  font-size: var(--text-base);
+  color: var(--text-color-secondary);
+  margin: 0 0 var(--space-sm) 0;
+}
+
+.placeholder-note {
+  font-size: var(--text-sm);
+  color: var(--text-color-secondary);
+  font-style: italic;
+}
+</style>

src/modules/reports/views/SettingsHubView.vue

@@ -0,0 +1,145 @@
+<template>
+  <!-- Mobile Top Bar -->
+  <MobileTopBar
+    v-if="isMobile"
+    title="Setări"
+    :show-menu="true"
+    @menu-click="handleMenuClick"
+  />
+
+  <main class="main-content" :class="{ 'mobile-layout': isMobile }">
+    <div class="app-container">
+      <!-- Page Header - only on desktop -->
+      <div v-if="!isMobile" class="page-header">
+        <h1 class="page-title">Setări</h1>
+      </div>
+
+      <!-- Placeholder content - to be implemented in US-206 -->
+      <div class="placeholder-content">
+        <i class="pi pi-cog placeholder-icon"></i>
+        <h2>Hub Setări</h2>
+        <p>Această pagină va conține carduri pentru toate opțiunile de setări.</p>
+        <p class="placeholder-note">Implementare completă în US-206</p>
+
+        <!-- Quick link to OCR Metrics (existing page) -->
+        <router-link to="/data-entry/ocr-metrics" class="quick-link">
+          <i class="pi pi-chart-line"></i>
+          <span>OCR Metrics</span>
+          <i class="pi pi-arrow-right"></i>
+        </router-link>
+      </div>
+    </div>
+  </main>
+
+  <!-- Mobile Bottom Nav -->
+  <MobileBottomNav v-if="isMobile" :items="mobileNavItems" />
+</template>
+
+<script setup>
+import { ref, computed, onMounted, onUnmounted } from 'vue'
+import MobileTopBar from '@shared/components/mobile/MobileTopBar.vue'
+import MobileBottomNav from '@shared/components/mobile/MobileBottomNav.vue'
+
+// Detectare mobile - reactive with resize listener
+const windowWidth = ref(window.innerWidth)
+const isMobile = computed(() => windowWidth.value < 768)
+
+// Handle window resize for mobile detection
+const handleResize = () => {
+  windowWidth.value = window.innerWidth
+}
+
+// Handle hamburger menu click
+const handleMenuClick = () => {
+  // TODO: Will be handled by MobileDrawerMenu
+  console.log('Menu clicked - drawer integration pending')
+}
+
+// Mobile navigation items - Settings is active on this page
+const mobileNavItems = computed(() => [
+  { to: '/data-entry', icon: 'pi pi-receipt', label: 'Bonuri' },
+  { icon: 'pi pi-cloud-upload', label: 'Upload' },
+  { to: '/reports/dashboard', icon: 'pi pi-chart-bar', label: 'Rapoarte' },
+  { to: '/settings', icon: 'pi pi-cog', label: 'Setări', active: true }
+])
+
+// Lifecycle
+onMounted(() => {
+  window.addEventListener('resize', handleResize)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('resize', handleResize)
+})
+</script>
+
+<style scoped>
+/* Mobile Layout - Padding for fixed top/bottom bars */
+.main-content.mobile-layout {
+  padding-top: 56px;
+  padding-bottom: 56px;
+}
+
+/* Placeholder content styles */
+.placeholder-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 300px;
+  text-align: center;
+  padding: var(--space-xl);
+  background: var(--surface-card);
+  border-radius: var(--radius-lg);
+  border: 1px dashed var(--surface-border);
+  margin: var(--space-lg);
+}
+
+.placeholder-icon {
+  font-size: 48px;
+  color: var(--primary-color);
+  margin-bottom: var(--space-lg);
+}
+
+.placeholder-content h2 {
+  font-size: var(--text-xl);
+  font-weight: var(--font-semibold);
+  color: var(--text-color);
+  margin: 0 0 var(--space-md) 0;
+}
+
+.placeholder-content p {
+  font-size: var(--text-base);
+  color: var(--text-color-secondary);
+  margin: 0 0 var(--space-sm) 0;
+}
+
+.placeholder-note {
+  font-size: var(--text-sm);
+  color: var(--text-color-secondary);
+  font-style: italic;
+  margin-bottom: var(--space-lg);
+}
+
+/* Quick link to existing OCR Metrics page */
+.quick-link {
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+  padding: var(--space-md) var(--space-lg);
+  background: var(--primary-color);
+  color: var(--primary-color-text);
+  border-radius: var(--radius-md);
+  text-decoration: none;
+  font-weight: var(--font-medium);
+  transition: background-color 0.2s ease;
+}
+
+.quick-link:hover {
+  background: var(--primary-600);
+}
+
+.quick-link i:last-child {
+  margin-left: var(--space-sm);
+}
+</style>

src/router/index.js

@@ -53,6 +53,18 @@ const routes = [
         name: 'ServerLogs',
         component: () => import('@reports/views/ServerLogsView.vue'),
         meta: { requiresAuth: true, title: 'Server Logs - ROA2WEB' }
+      },
+      {
+        path: 'maturity-analysis',
+        name: 'MaturityAnalysis',
+        component: () => import('@reports/views/MaturityAnalysisView.vue'),
+        meta: { requiresAuth: true, title: 'Analiză Scadențe - ROA2WEB' }
+      },
+      {
+        path: 'detailed-invoices',
+        name: 'DetailedInvoices',
+        component: () => import('@reports/views/DetailedInvoicesView.vue'),
+        meta: { requiresAuth: true, title: 'Facturi Detaliate - ROA2WEB' }
       }
     ]
   },
@@ -104,6 +116,20 @@ const routes = [
       }
     ]
   },
+  {
+    path: '/settings',
+    name: 'SettingsHub',
+    component: () => import('@/modules/reports/ReportsLayout.vue'),
+    meta: { requiresAuth: true },
+    children: [
+      {
+        path: '',
+        name: 'Settings',
+        component: () => import('@reports/views/SettingsHubView.vue'),
+        meta: { requiresAuth: true, title: 'Setări - ROA2WEB' }
+      }
+    ]
+  },
   {
     path: '/',
     redirect: '/reports/dashboard'