feat(unified-mobile-desktop-ui): Complete US-501 - Header Actions Bar Unificat - Rapoarte

Implemented by Ralph autonomous loop.
Iteration: 1

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

src/modules/reports/views/DetailedInvoicesView.vue

@@ -1,5 +1,5 @@
 <template>
-  <!-- Mobile Top Bar -->
+  <!-- US-501: Mobile Top Bar -->
   <MobileTopBar
     v-if="isMobile"
     title="Facturi Detaliate"
@@ -9,6 +9,9 @@
     @action-click="handleTopBarAction"
   />
 
+  <!-- US-501: Export Menu (for mobile export dropdown) -->
+  <Menu ref="exportMenu" :model="exportMenuItems" :popup="true" />
+
   <main class="main-content" :class="{ 'mobile-layout': isMobile }">
     <div class="app-container">
       <!-- Page Header - only on desktop -->
@@ -71,6 +74,7 @@
               />
             </div>
           </div>
+          <!-- US-501: Desktop Action buttons with Export dropdown -->
           <div class="filters-actions">
             <Button
               icon="pi pi-filter-slash"
@@ -79,20 +83,12 @@
               outlined
               @click="resetFilters"
             />
-            <Button
-              icon="pi pi-file-excel"
-              label="Export Excel"
-              severity="success"
-              outlined
-              @click="exportExcel"
-              :disabled="filteredData.length === 0"
-            />
-            <Button
-              icon="pi pi-file-pdf"
-              label="Export PDF"
-              severity="danger"
-              outlined
+            <SplitButton
+              label="Export"
+              icon="pi pi-download"
+              :model="desktopExportItems"
               @click="exportPDF"
+              outlined
               :disabled="filteredData.length === 0"
             />
             <Button
@@ -424,6 +420,8 @@ import { useToast } from 'primevue/usetoast'
 import MobileTopBar from '@shared/components/mobile/MobileTopBar.vue'
 import MobileBottomNav from '@shared/components/mobile/MobileBottomNav.vue'
 import BottomSheet from '@shared/components/mobile/BottomSheet.vue'
+import Menu from 'primevue/menu'
+import SplitButton from 'primevue/splitbutton'
 import { useDashboardStore } from '@reports/stores/dashboard'
 import { useCompanyStore, useAccountingPeriodStore } from '@reports/stores/sharedStores'
 import * as XLSX from 'xlsx'
@@ -472,13 +470,59 @@ const periodOptions = [
   { label: '12 luni', value: '12m' }
 ]
 
-// Top bar actions for mobile
+// US-501: Check if filters have non-default values
+const hasActiveFilters = computed(() => {
+  return searchTerm.value !== '' ||
+    selectedPeriod.value !== 'all' ||
+    selectedType.value !== 'clients'
+})
+
+// US-501: Mobile TopBar actions (filter, reset, export dropdown)
 const topBarActions = computed(() => [
   {
     icon: 'pi pi-filter',
     label: 'Filtre',
     tooltip: 'Deschide filtre',
-    active: searchTerm.value || selectedPeriod.value !== 'all'
+    active: hasActiveFilters.value
+  },
+  {
+    icon: 'pi pi-filter-slash',
+    label: 'Resetează',
+    tooltip: 'Resetează Filtrele'
+  },
+  {
+    icon: 'pi pi-download',
+    label: 'Export',
+    tooltip: 'Export'
+  }
+])
+
+// US-501: Export menu ref for mobile
+const exportMenu = ref(null)
+const exportMenuItems = ref([
+  {
+    label: 'Export PDF',
+    icon: 'pi pi-file-pdf',
+    command: () => exportPDF()
+  },
+  {
+    label: 'Export XLSX',
+    icon: 'pi pi-file-excel',
+    command: () => exportExcel()
+  }
+])
+
+// US-501: Desktop export dropdown items (SplitButton)
+const desktopExportItems = ref([
+  {
+    label: 'Export PDF',
+    icon: 'pi pi-file-pdf',
+    command: () => exportPDF()
+  },
+  {
+    label: 'Export XLSX',
+    icon: 'pi pi-file-excel',
+    command: () => exportExcel()
   }
 ])
 
@@ -598,10 +642,14 @@ const goBack = () => {
   router.push('/reports/dashboard')
 }
 
-// Top bar action handler
-const handleTopBarAction = (action) => {
+// US-501: Top bar action handler
+const handleTopBarAction = (action, event) => {
   if (action.icon === 'pi pi-filter') {
     openFilters()
+  } else if (action.icon === 'pi pi-filter-slash') {
+    resetFilters()
+  } else if (action.icon === 'pi pi-download') {
+    exportMenu.value.toggle(event)
   }
 }