feat(mobile-fixes-phase3): Complete US-302 - Footer Nav pe toate Paginile de Setări

Implemented by Ralph autonomous loop.
Iteration: 4

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

src/modules/data-entry/views/OCRMetricsView.vue

@@ -1,6 +1,17 @@
 <template>
-  <div class="ocr-metrics-view">
-    <div class="page-header">
+  <div class="ocr-metrics-view" :class="{ 'mobile-layout': isMobile }">
+    <!-- US-302: Mobile Material Design Top Bar -->
+    <MobileTopBar
+      v-if="isMobile"
+      title="Metrici OCR"
+      :show-back="true"
+      :actions="mobileTopBarActions"
+      @back-click="router.push('/settings')"
+      @action-click="handleTopBarAction"
+    />
+
+    <!-- Desktop Header -->
+    <div class="page-header" v-if="!isMobile">
       <h1>Metrici OCR</h1>
     </div>
 
@@ -365,6 +376,9 @@
         </div>
       </div>
     </div>
+
+    <!-- US-302: Mobile Bottom Navigation -->
+    <MobileBottomNav v-if="isMobile" />
   </div>
 </template>
 
@@ -390,6 +404,10 @@ import {
 } from 'chart.js'
 import { useOCRSettingsStore } from '@data-entry/stores/ocrSettingsStore'
 import { exportToExcel, exportToPDF } from '@reports/utils/exportUtils'
+import { useRouter } from 'vue-router'
+// US-302: Mobile Material Design components
+import MobileTopBar from '@shared/components/mobile/MobileTopBar.vue'
+import MobileBottomNav from '@shared/components/mobile/MobileBottomNav.vue'
 
 // Register Chart.js components
 Chart.register(
@@ -404,6 +422,23 @@ Chart.register(
 
 const ocrStore = useOCRSettingsStore()
 const toast = useToast()
+const router = useRouter()
+
+// US-302: Mobile TopBar actions
+const mobileTopBarActions = computed(() => [
+  {
+    icon: 'pi pi-refresh',
+    label: 'Actualizează',
+    tooltip: 'Actualizează metricile'
+  }
+])
+
+// US-302: Handle top bar action clicks
+const handleTopBarAction = (action) => {
+  if (action.icon === 'pi pi-refresh') {
+    loadAllMetrics()
+  }
+}
 
 // State
 const selectedDays = ref(30)
@@ -811,6 +846,13 @@ onBeforeUnmount(() => {
   margin: 0 auto;
 }
 
+/* US-302: Mobile Layout - Padding for fixed top/bottom bars */
+.ocr-metrics-view.mobile-layout {
+  padding: var(--space-sm);
+  padding-top: 56px; /* MobileTopBar height */
+  padding-bottom: 56px; /* MobileBottomNav height */
+}
+
 .page-header {
   display: flex;
   justify-content: space-between;