feat(ui-fixes-phase6): Fix SpeedDial Bulk Upload și Mobile Spacing

- SpeedDial: Redus la 2 opțiuni (Bon Nou + Bulk Upload) - SpeedDial: Eliminat masca gri (:mask="false") - Bulk Upload: Acum deschide file picker direct (openBulkFileInput) - Mobile spacing: Eliminat margin-top excesiv pe .mobile-layout - MaturityAnalysisCard: Redus padding/margin pe mobil - MaturityAnalysisView: Redus gap pe mobil Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-14 16:25:44 +00:00
parent 0868fc4ea3
commit eedc2bca67
5 changed files with 261 additions and 216 deletions
--- a/src/modules/data-entry/views/receipts/ReceiptsListView.vue
+++ b/src/modules/data-entry/views/receipts/ReceiptsListView.vue
@@ -655,39 +655,8 @@
          />
        </div>

-        <!-- US-103: Mobile Selection Bottom Bar (using shared component) -->
-        <MobileSelectionFooter
-          :visible="mobileSelectionMode && selectedReceipts.length > 0"
-          :actions="mobileSelectionActions"
-        />
      </div>

-      <!-- US-608: Mobile FAB SpeedDial with animated options -->
-      <SpeedDial
-        v-if="isMobile && !mobileSelectionMode && fabVisible"
-        :model="speedDialItems"
-        :radius="80"
-        direction="up"
-        type="linear"
-        showIcon="pi pi-plus"
-        hideIcon="pi pi-times"
-        :mask="true"
-        class="mobile-speed-dial"
-        :transitionDelay="40"
-        :pt="{
-          root: { class: 'mobile-speed-dial-root' },
-          button: { class: 'mobile-speed-dial-button' },
-          menu: { class: 'mobile-speed-dial-menu' },
-          menuitem: { class: 'mobile-speed-dial-item' },
-          action: { class: 'mobile-speed-dial-action' },
-          mask: { class: 'mobile-speed-dial-mask' }
-        }"
-      />
-
-      <!-- US-103: Mobile Bottom Navigation (using shared component) -->
-      <!-- US-307: Using default nav items (Dashboard, Bonuri, Facturi, Setări) -->
-      <MobileBottomNav v-if="isMobile && !mobileSelectionMode" />
-
      <!-- Desktop: Compact Data Table with Batch Grouping (US-002) -->
      <!-- US-104: Explicit !isMobile check (not v-else) to ensure bulk-actions-bar only shows on desktop -->
      <div v-if="!isMobile && !loading && unifiedItems.length" class="data-table-container">
@@ -1070,6 +1039,40 @@
      <!-- Shared Context Menu (for both mobile and desktop) - US-516: MD3 styled -->
      <Menu ref="menuRef" :model="menuItems" popup class="receipt-action-menu" />
    </div>
+
+    <!-- FIXED: Mobile components moved OUTSIDE .roa-card to fix position:fixed -->
+    <!-- US-103: Mobile Selection Bottom Bar (using shared component) -->
+    <MobileSelectionFooter
+      :visible="mobileSelectionMode && selectedReceipts.length > 0"
+      :actions="mobileSelectionActions"
+    />
+
+    <!-- US-608: Mobile FAB SpeedDial with animated options -->
+    <!-- US-706: mask="false" to avoid gray overlay when opening -->
+    <SpeedDial
+      v-if="isMobile && !mobileSelectionMode && fabVisible"
+      :model="speedDialItems"
+      :radius="80"
+      direction="up"
+      type="linear"
+      showIcon="pi pi-plus"
+      hideIcon="pi pi-times"
+      :mask="false"
+      class="mobile-speed-dial"
+      :transitionDelay="40"
+      :pt="{
+        root: { class: 'mobile-speed-dial-root' },
+        button: { class: 'mobile-speed-dial-button' },
+        menu: { class: 'mobile-speed-dial-menu' },
+        menuitem: { class: 'mobile-speed-dial-item' },
+        action: { class: 'mobile-speed-dial-action' },
+        mask: { class: 'mobile-speed-dial-mask' }
+      }"
+    />
+
+    <!-- US-103: Mobile Bottom Navigation (using shared component) -->
+    <!-- US-307: Using default nav items (Dashboard, Bonuri, Facturi, Setări) -->
+    <MobileBottomNav v-if="isMobile && !mobileSelectionMode" />
  </div>
 </template>

@@ -1229,20 +1232,15 @@ const exportMenuItems = computed(() => [
  }
 ])

-// US-608: SpeedDial Items - Bon Nou Manual, Scanare Bon OCR, Upload în Masă
+// US-706: SpeedDial Items - simplified to 2 options: Bon Nou + Bulk Upload
 const speedDialItems = [
  {
-    label: 'Bon Nou Manual',
+    label: 'Bon Nou',
    icon: 'pi pi-pencil',
    command: () => goToCreate()
  },
  {
-    label: 'Scanare Bon OCR',
-    icon: 'pi pi-camera',
-    command: () => goToOCRScan()
-  },
-  {
-    label: 'Upload în Masă',
+    label: 'Bulk Upload',
    icon: 'pi pi-upload',
    command: () => openBulkFileInput()
  }
@@ -4806,91 +4804,7 @@ const cleanupCompletedBatches = (storedBatchIds) => {
 }

 /* US-103: Mobile Bottom Navigation styles now in MobileBottomNav.vue */
-
-/* US-608: Mobile SpeedDial - Floating Action Button with animated options */
-.mobile-speed-dial {
-  position: fixed !important;
-  bottom: 72px; /* 56px bottom nav + 16px spacing */
-  right: var(--space-md);
-  z-index: 999;
-}
-
-/* SpeedDial main button styling */
-.mobile-speed-dial .p-speeddial-button {
-  width: 56px !important;
-  height: 56px !important;
-  border-radius: 50% !important;
-  background: var(--color-primary) !important;
-  border: none !important;
-  box-shadow: var(--shadow-lg) !important;
-  transition: all var(--transition-fast) !important;
-}
-
-.mobile-speed-dial .p-speeddial-button:hover,
-.mobile-speed-dial .p-speeddial-button:focus {
-  background: var(--color-primary-dark) !important;
-  box-shadow: var(--shadow-xl) !important;
-}
-
-.mobile-speed-dial .p-speeddial-button:active {
-  transform: scale(0.95) !important;
-}
-
-.mobile-speed-dial .p-speeddial-button .p-button-icon {
-  font-size: var(--text-2xl) !important;
-  color: var(--color-text-inverse) !important;
-}
-
-/* SpeedDial action buttons styling */
-.mobile-speed-dial .p-speeddial-action {
-  width: 48px !important;
-  height: 48px !important;
-  background: var(--surface-card) !important;
-  border: 1px solid var(--surface-border) !important;
-  box-shadow: var(--shadow-md) !important;
-  transition: all var(--transition-fast) !important;
-}
-
-.mobile-speed-dial .p-speeddial-action:hover,
-.mobile-speed-dial .p-speeddial-action:focus {
-  background: var(--surface-hover) !important;
-  transform: scale(1.1) !important;
-}
-
-.mobile-speed-dial .p-speeddial-action .p-speeddial-action-icon {
-  color: var(--color-primary) !important;
-  font-size: var(--text-lg) !important;
-}
-
-/* SpeedDial mask overlay (background when open) */
-.mobile-speed-dial .p-speeddial-mask {
-  background: rgba(0, 0, 0, 0.4) !important;
-}
-
-/* SpeedDial tooltip labels */
-.mobile-speed-dial .p-speeddial-action::before {
-  content: attr(aria-label);
-  position: absolute;
-  right: 60px;
-  white-space: nowrap;
-  background: var(--surface-card);
-  color: var(--text-color);
-  padding: var(--space-xs) var(--space-sm);
-  border-radius: var(--radius-sm);
-  font-size: var(--text-sm);
-  font-weight: var(--font-medium);
-  box-shadow: var(--shadow-sm);
-  border: 1px solid var(--surface-border);
-  opacity: 0;
-  transform: translateX(10px);
-  transition: all var(--transition-fast);
-  pointer-events: none;
-}
-
-.mobile-speed-dial.p-speeddial-opened .p-speeddial-action::before {
-  opacity: 1;
-  transform: translateX(0);
-}
+/* US-608: SpeedDial styles moved to non-scoped section below */

 /* Mobile Sidebar (Hamburger Menu) */
 .mobile-sidebar {
@@ -4991,37 +4905,7 @@ const cleanupCompletedBatches = (storedBatchIds) => {
 }

 /* US-103: Dark mode for MobileBottomNav now in component */
-
-/* US-608: Dark mode for SpeedDial */
-[data-theme="dark"] .mobile-speed-dial .p-speeddial-button {
-  background: var(--blue-600) !important;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
-}
-
-[data-theme="dark"] .mobile-speed-dial .p-speeddial-button:hover,
-[data-theme="dark"] .mobile-speed-dial .p-speeddial-button:focus {
-  background: var(--blue-700) !important;
-}
-
-[data-theme="dark"] .mobile-speed-dial .p-speeddial-action {
-  background: var(--surface-card) !important;
-  border-color: var(--surface-border) !important;
-}
-
-[data-theme="dark"] .mobile-speed-dial .p-speeddial-action:hover,
-[data-theme="dark"] .mobile-speed-dial .p-speeddial-action:focus {
-  background: var(--surface-hover) !important;
-}
-
-[data-theme="dark"] .mobile-speed-dial .p-speeddial-action .p-speeddial-action-icon {
-  color: var(--blue-400) !important;
-}
-
-[data-theme="dark"] .mobile-speed-dial .p-speeddial-action::before {
-  background: var(--surface-card);
-  color: var(--text-color);
-  border-color: var(--surface-border);
-}
+/* US-608: Dark mode for SpeedDial moved to non-scoped section */

 [data-theme="dark"] .sidebar-item.active,
 [data-theme="dark"] .sidebar-item.router-link-active {
@@ -5062,37 +4946,7 @@ const cleanupCompletedBatches = (storedBatchIds) => {
  }

  /* US-103: Auto dark mode for MobileBottomNav now in component */
-
-  /* US-608: Auto dark mode for SpeedDial */
-  :root:not([data-theme]) .mobile-speed-dial .p-speeddial-button {
-    background: var(--blue-600) !important;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
-  }
-
-  :root:not([data-theme]) .mobile-speed-dial .p-speeddial-button:hover,
-  :root:not([data-theme]) .mobile-speed-dial .p-speeddial-button:focus {
-    background: var(--blue-700) !important;
-  }
-
-  :root:not([data-theme]) .mobile-speed-dial .p-speeddial-action {
-    background: var(--surface-card) !important;
-    border-color: var(--surface-border) !important;
-  }
-
-  :root:not([data-theme]) .mobile-speed-dial .p-speeddial-action:hover,
-  :root:not([data-theme]) .mobile-speed-dial .p-speeddial-action:focus {
-    background: var(--surface-hover) !important;
-  }
-
-  :root:not([data-theme]) .mobile-speed-dial .p-speeddial-action .p-speeddial-action-icon {
-    color: var(--blue-400) !important;
-  }
-
-  :root:not([data-theme]) .mobile-speed-dial .p-speeddial-action::before {
-    background: var(--surface-card);
-    color: var(--text-color);
-    border-color: var(--surface-border);
-  }
+  /* US-608: Auto dark mode for SpeedDial moved to non-scoped section */

  :root:not([data-theme]) .sidebar-item.active,
  :root:not([data-theme]) .sidebar-item.router-link-active {
@@ -5134,9 +4988,91 @@ const cleanupCompletedBatches = (storedBatchIds) => {
 }
 </style>

-<!-- US-608: Non-scoped styles for SpeedDial mask (appended to body) -->
+<!-- US-608: Non-scoped styles for SpeedDial (PrimeVue generates internal DOM) -->
 <style>
+/* US-608: Mobile SpeedDial - Floating Action Button with animated options */
+/* MUST be non-scoped because PrimeVue SpeedDial generates its own DOM structure */
+.mobile-speed-dial {
+  position: fixed !important;
+  bottom: 72px !important; /* 56px bottom nav + 16px spacing */
+  right: var(--space-md) !important;
+  z-index: 999 !important;
+}
+
+/* SpeedDial main button styling */
+.mobile-speed-dial .p-speeddial-button {
+  width: 56px !important;
+  height: 56px !important;
+  border-radius: 50% !important;
+  background: var(--color-primary) !important;
+  border: none !important;
+  box-shadow: var(--shadow-lg) !important;
+  transition: all var(--transition-fast) !important;
+}
+
+.mobile-speed-dial .p-speeddial-button:hover,
+.mobile-speed-dial .p-speeddial-button:focus {
+  background: var(--color-primary-dark) !important;
+  box-shadow: var(--shadow-xl) !important;
+}
+
+.mobile-speed-dial .p-speeddial-button:active {
+  transform: scale(0.95) !important;
+}
+
+.mobile-speed-dial .p-speeddial-button .p-button-icon {
+  font-size: var(--text-2xl) !important;
+  color: var(--color-text-inverse) !important;
+}
+
+/* SpeedDial action buttons styling */
+.mobile-speed-dial .p-speeddial-action {
+  width: 48px !important;
+  height: 48px !important;
+  background: var(--surface-card) !important;
+  border: 1px solid var(--surface-border) !important;
+  box-shadow: var(--shadow-md) !important;
+  transition: all var(--transition-fast) !important;
+}
+
+.mobile-speed-dial .p-speeddial-action:hover,
+.mobile-speed-dial .p-speeddial-action:focus {
+  background: var(--surface-hover) !important;
+  transform: scale(1.1) !important;
+}
+
+.mobile-speed-dial .p-speeddial-action .p-speeddial-action-icon {
+  color: var(--color-primary) !important;
+  font-size: var(--text-lg) !important;
+}
+
+/* SpeedDial tooltip labels */
+.mobile-speed-dial .p-speeddial-action::before {
+  content: attr(aria-label);
+  position: absolute;
+  right: 60px;
+  white-space: nowrap;
+  background: var(--surface-card);
+  color: var(--text-color);
+  padding: var(--space-xs) var(--space-sm);
+  border-radius: var(--radius-sm);
+  font-size: var(--text-sm);
+  font-weight: var(--font-medium);
+  box-shadow: var(--shadow-sm);
+  border: 1px solid var(--surface-border);
+  opacity: 0;
+  transform: translateX(10px);
+  transition: all var(--transition-fast);
+  pointer-events: none;
+}
+
+.mobile-speed-dial.p-speeddial-opened .p-speeddial-action::before {
+  opacity: 1;
+  transform: translateX(0);
+}
+
 /* US-608: SpeedDial mask overlay - appears when SpeedDial is open */
+/* CRITICAL: pointer-events: none by default to not block clicks when closed */
 .p-speeddial-mask.mobile-speed-dial-mask {
  position: fixed !important;
  top: 0 !important;
@@ -5145,6 +5081,13 @@ const cleanupCompletedBatches = (storedBatchIds) => {
  height: 100% !important;
  background: rgba(0, 0, 0, 0.5) !important;
  z-index: 998 !important;
+  pointer-events: none !important; /* Don't block clicks when mask is invisible */
+}
+
+/* Enable pointer events only when SpeedDial is actually open */
+.p-speeddial-opened ~ .p-speeddial-mask.mobile-speed-dial-mask,
+.mobile-speed-dial.p-speeddial-opened ~ .p-speeddial-mask.mobile-speed-dial-mask {
+  pointer-events: auto !important;
  animation: fadeIn 200ms ease-out !important;
 }

@@ -5153,12 +5096,74 @@ const cleanupCompletedBatches = (storedBatchIds) => {
  to { opacity: 1; }
 }

+/* Dark mode for SpeedDial button and actions */
+[data-theme="dark"] .mobile-speed-dial .p-speeddial-button {
+  background: var(--blue-600) !important;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
+}
+
+[data-theme="dark"] .mobile-speed-dial .p-speeddial-button:hover,
+[data-theme="dark"] .mobile-speed-dial .p-speeddial-button:focus {
+  background: var(--blue-700) !important;
+}
+
+[data-theme="dark"] .mobile-speed-dial .p-speeddial-action {
+  background: var(--surface-card) !important;
+  border-color: var(--surface-border) !important;
+}
+
+[data-theme="dark"] .mobile-speed-dial .p-speeddial-action:hover,
+[data-theme="dark"] .mobile-speed-dial .p-speeddial-action:focus {
+  background: var(--surface-hover) !important;
+}
+
+[data-theme="dark"] .mobile-speed-dial .p-speeddial-action .p-speeddial-action-icon {
+  color: var(--blue-400) !important;
+}
+
+[data-theme="dark"] .mobile-speed-dial .p-speeddial-action::before {
+  background: var(--surface-card);
+  color: var(--text-color);
+  border-color: var(--surface-border);
+}
+
 /* Dark mode mask */
 [data-theme="dark"] .p-speeddial-mask.mobile-speed-dial-mask {
  background: rgba(0, 0, 0, 0.7) !important;
 }

+/* Auto dark mode (prefers-color-scheme) for SpeedDial */
@media (prefers-color-scheme: dark) {
+  :root:not([data-theme]) .mobile-speed-dial .p-speeddial-button {
+    background: var(--blue-600) !important;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
+  }
+
+  :root:not([data-theme]) .mobile-speed-dial .p-speeddial-button:hover,
+  :root:not([data-theme]) .mobile-speed-dial .p-speeddial-button:focus {
+    background: var(--blue-700) !important;
+  }
+
+  :root:not([data-theme]) .mobile-speed-dial .p-speeddial-action {
+    background: var(--surface-card) !important;
+    border-color: var(--surface-border) !important;
+  }
+
+  :root:not([data-theme]) .mobile-speed-dial .p-speeddial-action:hover,
+  :root:not([data-theme]) .mobile-speed-dial .p-speeddial-action:focus {
+    background: var(--surface-hover) !important;
+  }
+
+  :root:not([data-theme]) .mobile-speed-dial .p-speeddial-action .p-speeddial-action-icon {
+    color: var(--blue-400) !important;
+  }
+
+  :root:not([data-theme]) .mobile-speed-dial .p-speeddial-action::before {
+    background: var(--surface-card);
+    color: var(--text-color);
+    border-color: var(--surface-border);
+  }
+
  :root:not([data-theme]) .p-speeddial-mask.mobile-speed-dial-mask {
    background: rgba(0, 0, 0, 0.7) !important;
  }
--- a/src/modules/reports/components/dashboard/cards/MaturityAnalysisCard.vue
+++ b/src/modules/reports/components/dashboard/cards/MaturityAnalysisCard.vue
@@ -353,6 +353,7 @@ onMounted(() => {
 }

 /* Card Controls (period selector) */
+/* US-706: Reduced padding/margin on mobile for less top spacing */
 .card-controls {
  display: flex;
  justify-content: flex-end;
@@ -362,6 +363,15 @@ onMounted(() => {
  margin-bottom: var(--space-md);
 }

+@media (max-width: 768px) {
+  .card-controls {
+    padding: var(--space-xs) var(--space-sm);
+    margin-bottom: 0;
+    background: transparent;
+    border-radius: 0;
+  }
+}
+
 .period-selector {
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--surface-border);
@@ -390,6 +400,7 @@ onMounted(() => {
 }

 /* Loading and Error States */
+/* US-706: Reduced padding on mobile */
 .loading-state,
 .error-state {
  display: flex;
@@ -400,6 +411,13 @@ onMounted(() => {
  text-align: center;
 }

+@media (max-width: 768px) {
+  .loading-state,
+  .error-state {
+    padding: var(--space-md, 1rem);
+  }
+}
+
 .loading-spinner {
  width: 32px;
  height: 32px;
@@ -431,6 +449,7 @@ onMounted(() => {
 }

 /* Tab content */
+/* US-706: Reduced min-height and padding on mobile */
 .tab-content {
  padding: var(--space-md);
  min-height: 200px;
@@ -438,6 +457,13 @@ onMounted(() => {
  flex-direction: column;
 }

+@media (max-width: 768px) {
+  .tab-content {
+    padding: var(--space-sm);
+    min-height: 100px;
+  }
+}
+
 /* Tab summary */
 .tab-summary {
  display: flex;
@@ -484,27 +510,12 @@ onMounted(() => {
 }

 /* Maturity Lists */
+/* US-706: Removed max-height and overflow-y to integrate list into page scroll
+   (no separate scrollable container - matches Facturi Detaliate pattern) */
 .maturity-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm, 0.5rem);
-  max-height: 400px;
-  overflow-y: auto;
-  padding-right: var(--space-xs, 0.25rem);
-}
-
-.maturity-list::-webkit-scrollbar {
-  width: 4px;
-}
-
-.maturity-list::-webkit-scrollbar-track {
-  background: var(--color-bg-secondary, #f8f9fa);
-  border-radius: 2px;
-}
-
-.maturity-list::-webkit-scrollbar-thumb {
-  background: var(--color-border);
-  border-radius: 2px;
 }

 /* Maturity Items */
@@ -749,10 +760,7 @@ onMounted(() => {
    width: 100%;
  }

-  /* US-704: Increased max-height for more visible rows */
-  .maturity-list {
-    max-height: 350px;
-  }
+  /* US-706: Removed max-height - list integrates into page scroll */

  /* US-608: Mobile tab adjustments */
  .tab-content {
@@ -785,9 +793,7 @@ onMounted(() => {
 }

@media (max-width: 480px) {
-  .maturity-list {
-    max-height: 350px;
-  }
+  /* US-706: Removed max-height - list integrates into page scroll */

  .balance-indicator,
  .card-footer {
--- a/src/modules/reports/views/MaturityAnalysisView.vue
+++ b/src/modules/reports/views/MaturityAnalysisView.vue
@@ -193,7 +193,9 @@ onUnmounted(() => {

 <style scoped>
 /* Mobile Layout - Padding for fixed top/bottom bars */
+/* US-706: Override margin-top from containers.css to eliminate gap between tabs and content */
 .main-content.mobile-layout {
+  margin-top: 0 !important;
  padding-top: 56px;
  padding-bottom: 56px;
 }
@@ -204,15 +206,17 @@ onUnmounted(() => {
 }

 /* App container */
+/* US-705: Reduced padding for less top spacing - sm (8px) instead of lg (24px) */
 .app-container {
  max-width: 1400px;
  margin: 0 auto;
-  padding: var(--space-lg);
+  padding: var(--space-sm) var(--space-lg);
 }

@media (max-width: 768px) {
  .app-container {
-    padding: var(--space-md);
+    /* US-706: Minimal vertical padding on mobile - content starts immediately after tabs */
+    padding: var(--space-xs) var(--space-md);
  }
 }

@@ -344,6 +348,12 @@ onUnmounted(() => {
  gap: var(--space-lg);
 }

+@media (max-width: 768px) {
+  .maturity-content {
+    gap: var(--space-sm);
+  }
+}
+
 /* Empty state styles */
 .empty-state {
  display: flex;