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>
2026-01-12 12:09:57 +00:00
parent 1e459cc7fe
commit 9d97d72d4d
6 changed files with 413 additions and 2 deletions
--- a/src/modules/reports/views/DetailedInvoicesView.vue
+++ b/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>