feat(mobile-navigation-improvements): Complete US-201 - MobileBottomNav activ pe Dashboard

Implemented by Ralph autonomous loop.
Iteration: 1

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Claude Agent
2026-01-12 12:05:02 +00:00
parent 9ea8dd22ac
commit 1084314db9
5 changed files with 941 additions and 833 deletions

View File

@@ -1,8 +1,16 @@
<template>
<main class="main-content">
<!-- Mobile Top Bar -->
<MobileTopBar
v-if="isMobile"
title="Dashboard"
:show-menu="true"
@menu-click="handleMenuClick"
/>
<main class="main-content" :class="{ 'mobile-layout': isMobile }">
<div class="app-container">
<!-- Dashboard Header -->
<div class="page-header">
<!-- Dashboard Header - only on desktop -->
<div v-if="!isMobile" class="page-header">
<h1 class="page-title">Dashboard</h1>
</div>
@@ -135,6 +143,9 @@
</div>
</div>
</main>
<!-- Mobile Bottom Nav -->
<MobileBottomNav v-if="isMobile" :items="mobileNavItems" />
</template>
<script setup>
@@ -147,8 +158,10 @@ import MaturityAndDetailsCard from "@reports/components/dashboard/cards/Maturity
import ClientiBalanceCard from "@reports/components/dashboard/cards/ClientiBalanceCard.vue";
import FurnizoriBalanceCard from "@reports/components/dashboard/cards/FurnizoriBalanceCard.vue";
import TreasuryDualCard from "@reports/components/dashboard/cards/TreasuryDualCard.vue";
// Mobile carousel component
// Mobile components
import SwipeableCards from "@shared/components/mobile/SwipeableCards.vue";
import MobileTopBar from "@shared/components/mobile/MobileTopBar.vue";
import MobileBottomNav from "@shared/components/mobile/MobileBottomNav.vue";
import { useCompanyStore } from "@reports/stores/sharedStores";
import { useDashboardStore } from "@reports/stores/dashboard";
import { useAccountingPeriodStore } from "@reports/stores/sharedStores";
@@ -486,6 +499,20 @@ const handleResize = () => {
windowWidth.value = window.innerWidth;
};
// Mobile navigation items with 'Rapoarte' active (since Dashboard is /reports/dashboard)
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: '/data-entry/ocr-metrics', icon: 'pi pi-cog', label: 'Setări' }
]);
// Handle hamburger menu click
const handleMenuClick = () => {
// TODO: Will be handled by MobileDrawerMenu in US-202
console.log('Menu clicked - drawer will be implemented in US-202');
};
// Computed property pentru luna curentă - folosește perioada din period selector
const currentMonthLabel = computed(() => {
// Prioritate: period selector > dashboard current period > loading
@@ -948,6 +975,12 @@ onUnmounted(() => {
<style scoped>
/* Dashboard Styles - Using Global Patterns */
/* Mobile Layout - Padding for fixed top/bottom bars */
.main-content.mobile-layout {
padding-top: 56px; /* MobileTopBar height */
padding-bottom: 56px; /* MobileBottomNav height */
}
/* Company Selection */
.company-selection {
max-width: 500px;