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/BankCashRegisterView.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="app-container" :class="{ 'mobile-layout': isMobile }">
-    <!-- US-109: Mobile Material Design Top Bar -->
+    <!-- US-501: Mobile Material Design Top Bar -->
     <MobileTopBar
       v-if="isMobile"
       title="Trezorerie"
@@ -10,6 +10,9 @@
       @action-click="handleTopBarAction"
     />
 
+    <!-- US-501: Export Menu (for mobile export dropdown) -->
+    <Menu ref="exportMenu" :model="exportMenuItems" :popup="true" />
+
     <!-- Mobile Drawer Menu (replaces old Sidebar) -->
     <MobileDrawerMenu
       v-model="showDrawer"
@@ -177,7 +180,7 @@
               </div>
             </div>
 
-            <!-- Desktop: Action buttons -->
+            <!-- US-501: Desktop Action buttons with Export dropdown -->
             <div v-if="!isMobile" class="form-actions">
               <Button
                 icon="pi pi-filter-slash"
@@ -185,18 +188,12 @@
                 class="p-button-outlined p-button-secondary"
                 @click="resetFilters"
               />
-              <Button
-                icon="pi pi-file-excel"
-                label="Export Excel"
-                class="p-button-outlined p-button-success"
-                @click="exportExcel"
-                :disabled="!hasData"
-              />
-              <Button
-                icon="pi pi-file-pdf"
-                label="Export PDF"
-                class="p-button-outlined p-button-danger"
+              <SplitButton
+                label="Export"
+                icon="pi pi-download"
+                :model="desktopExportItems"
                 @click="exportPDF"
+                class="p-button-outlined"
                 :disabled="!hasData"
               />
               <Button
@@ -395,11 +392,13 @@ import { useAccountingPeriodStore } from "@reports/stores/sharedStores";
 import { format } from "date-fns";
 import { exportToExcel, exportBankCashRegisterPDF } from "@reports/utils/exportUtils";
 
-// US-109: Mobile Material Design components
+// US-501: Mobile Material Design components
 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 MobileDrawerMenu from "@shared/components/mobile/MobileDrawerMenu.vue";
+import Menu from "primevue/menu";
+import SplitButton from "primevue/splitbutton";
 import { useRouter } from "vue-router";
 
 const toast = useToast();
@@ -424,7 +423,7 @@ const handleLogout = async () => {
   router.push('/login');
 };
 
-// US-109: Mobile TopBar actions (filter, refresh, export)
+// US-501: Mobile TopBar actions (filter, reset, export dropdown)
 const mobileTopBarActions = computed(() => [
   {
     icon: "pi pi-filter",
@@ -433,25 +432,54 @@ const mobileTopBarActions = computed(() => [
     active: hasActiveFilters.value
   },
   {
-    icon: "pi pi-refresh",
-    label: "Actualizează",
-    tooltip: "Actualizează"
+    icon: "pi pi-filter-slash",
+    label: "Resetează",
+    tooltip: "Resetează Filtrele"
   },
   {
     icon: "pi pi-download",
     label: "Export",
-    tooltip: "Export Excel"
+    tooltip: "Export"
   }
 ]);
 
-// US-109: Handle top bar action clicks
-const handleTopBarAction = (action) => {
+// 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()
+  }
+]);
+
+// US-501: Handle top bar action clicks
+const handleTopBarAction = (action, event) => {
   if (action.icon === "pi pi-filter") {
     showFilters.value = !showFilters.value;
-  } else if (action.icon === "pi pi-refresh") {
-    refreshData();
+  } else if (action.icon === "pi pi-filter-slash") {
+    resetFilters();
   } else if (action.icon === "pi pi-download") {
-    exportExcel();
+    exportMenu.value.toggle(event);
   }
 };
 

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)
   }
 }
 

src/modules/reports/views/MaturityAnalysisView.vue

@@ -1,5 +1,5 @@
 <template>
-  <!-- Mobile Top Bar - US-306: Added Export and Filter actions -->
+  <!-- US-501: Mobile Top Bar with unified header actions -->
   <MobileTopBar
     v-if="isMobile"
     title="Scadențe"
@@ -9,6 +9,9 @@
     @action-click="handleTopBarAction"
   />
 
+  <!-- US-501: Export Menu (for mobile export dropdown) -->
+  <Menu ref="exportMenu" :model="exportMenuItems" :popup="true" />
+
   <!-- US-306: Filter BottomSheet for mobile -->
   <BottomSheet v-model="showFilters">
     <h3 class="bottom-sheet-title">Filtre</h3>
@@ -124,6 +127,7 @@ import Dropdown from 'primevue/dropdown'
 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 MaturityAndDetailsCard from '@reports/components/dashboard/cards/MaturityAndDetailsCard.vue'
 import { useCompanyStore } from '@reports/stores/sharedStores'
 
@@ -167,7 +171,7 @@ const hasActiveFilters = computed(() => {
   return filterPeriod.value !== '1m' || filterType.value !== 'clients'
 })
 
-// US-306: Mobile TopBar actions (Export + Filter)
+// US-501: Mobile TopBar actions (filter, reset, export dropdown)
 const mobileTopBarActions = computed(() => [
   {
     icon: 'pi pi-filter',
@@ -175,15 +179,43 @@ const mobileTopBarActions = computed(() => [
     tooltip: 'Filtre',
     active: hasActiveFilters.value
   },
+  {
+    icon: 'pi pi-filter-slash',
+    label: 'Resetează',
+    tooltip: 'Resetează Filtrele'
+  },
   {
     icon: 'pi pi-download',
     label: 'Export',
-    tooltip: 'Export Excel'
+    tooltip: 'Export'
   }
 ])
 
-// US-306: Handle top bar action clicks
-const handleTopBarAction = (action) => {
+// US-501: Export menu ref for mobile
+const exportMenu = ref(null)
+const exportMenuItems = ref([
+  {
+    label: 'Export PDF',
+    icon: 'pi pi-file-pdf',
+    command: () => {
+      if (maturityCardRef.value) {
+        maturityCardRef.value.exportPDF()
+      }
+    }
+  },
+  {
+    label: 'Export XLSX',
+    icon: 'pi pi-file-excel',
+    command: () => {
+      if (maturityCardRef.value) {
+        maturityCardRef.value.exportExcel()
+      }
+    }
+  }
+])
+
+// US-501: Handle top bar action clicks
+const handleTopBarAction = (action, event) => {
   if (action.icon === 'pi pi-filter') {
     // Sync current values from child component before opening
     if (maturityCardRef.value) {
@@ -191,11 +223,10 @@ const handleTopBarAction = (action) => {
       filterType.value = maturityCardRef.value.selectedType
     }
     showFilters.value = !showFilters.value
+  } else if (action.icon === 'pi pi-filter-slash') {
+    resetFilters()
   } else if (action.icon === 'pi pi-download') {
-    // Trigger export from child component
-    if (maturityCardRef.value) {
-      maturityCardRef.value.exportExcel()
-    }
+    exportMenu.value.toggle(event)
   }
 }
 

src/modules/reports/views/TrialBalanceView.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="app-container" :class="{ 'mobile-layout': isMobile }">
-    <!-- US-108: Mobile Material Design Top Bar -->
+    <!-- US-501: Mobile Material Design Top Bar -->
     <MobileTopBar
       v-if="isMobile"
       title="Balanță de Verificare"
@@ -10,6 +10,9 @@
       @action-click="handleTopBarAction"
     />
 
+    <!-- US-501: Export Menu (for mobile export dropdown) -->
+    <Menu ref="exportMenu" :model="exportMenuItems" :popup="true" />
+
     <!-- Mobile Drawer Menu (replaces old Sidebar) -->
     <MobileDrawerMenu
       v-model="showDrawer"
@@ -137,7 +140,7 @@
               </div>
             </div>
 
-            <!-- Desktop: Action buttons -->
+            <!-- US-501: Desktop Action buttons with Export dropdown -->
             <div v-if="!isMobile" class="form-actions">
               <Button
                 icon="pi pi-filter-slash"
@@ -145,18 +148,12 @@
                 class="p-button-outlined p-button-secondary"
                 @click="clearFilters"
               />
-              <Button
-                icon="pi pi-file-excel"
-                label="Export Excel"
-                class="p-button-outlined p-button-success"
-                @click="exportExcel"
-                :disabled="!trialBalanceStore.hasData"
-              />
-              <Button
-                icon="pi pi-file-pdf"
-                label="Export PDF"
-                class="p-button-outlined p-button-danger"
+              <SplitButton
+                label="Export"
+                icon="pi pi-download"
+                :model="desktopExportItems"
                 @click="exportPDF"
+                class="p-button-outlined"
                 :disabled="!trialBalanceStore.hasData"
               />
               <Button
@@ -373,11 +370,13 @@ import { useTrialBalanceStore } from "@reports/stores/trialBalance";
 import { useAccountingPeriodStore } from "@reports/stores/sharedStores";
 import { exportToExcel, exportToPDF } from "@reports/utils/exportUtils";
 
-// US-108: Mobile Material Design components
+// US-501: Mobile Material Design components
 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 MobileDrawerMenu from "@shared/components/mobile/MobileDrawerMenu.vue";
+import Menu from "primevue/menu";
+import SplitButton from "primevue/splitbutton";
 import { useRouter } from "vue-router";
 
 const toast = useToast();
@@ -402,7 +401,7 @@ const handleLogout = async () => {
   router.push('/login');
 };
 
-// US-108: Mobile TopBar actions (filter + export)
+// US-501: Mobile TopBar actions (filter, reset, export dropdown handled via menu)
 const mobileTopBarActions = computed(() => [
   {
     icon: "pi pi-filter",
@@ -410,19 +409,55 @@ const mobileTopBarActions = computed(() => [
     tooltip: "Filtre",
     active: hasActiveFilters.value
   },
+  {
+    icon: "pi pi-filter-slash",
+    label: "Resetează",
+    tooltip: "Resetează Filtrele"
+  },
   {
     icon: "pi pi-download",
     label: "Export",
-    tooltip: "Export Excel"
+    tooltip: "Export"
   }
 ]);
 
-// US-108: Handle top bar action clicks
-const handleTopBarAction = (action) => {
+// 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()
+  }
+]);
+
+// US-501: Handle top bar action clicks
+const handleTopBarAction = (action, event) => {
   if (action.icon === "pi pi-filter") {
     showFilters.value = !showFilters.value;
+  } else if (action.icon === "pi pi-filter-slash") {
+    clearFilters();
   } else if (action.icon === "pi pi-download") {
-    exportExcel();
+    exportMenu.value.toggle(event);
   }
 };
 

src/shared/components/mobile/MobileTopBar.vue

@@ -35,7 +35,7 @@
         rounded
         class="top-bar-btn"
         :class="{ 'active': action.active }"
-        @click="$emit('action-click', action)"
+        @click="(e) => $emit('action-click', action, e)"
         :aria-label="action.label || action.icon"
         v-tooltip.bottom="action.tooltip"
       />