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>
2026-01-12 22:16:53 +00:00
parent 3a11fcd81c
commit 94d215d6ae
8 changed files with 1074 additions and 206 deletions
--- a/src/modules/reports/views/BankCashRegisterView.vue
+++ b/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);
  }
 };

--- a/src/modules/reports/views/DetailedInvoicesView.vue
+++ b/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)
  }
 }

--- a/src/modules/reports/views/MaturityAnalysisView.vue
+++ b/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)
  }
 }

--- a/src/modules/reports/views/TrialBalanceView.vue
+++ b/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);
  }
 };