romfast/roa2web-service-auto
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(mobile-navigation-improvements): Complete US-203 - Dashboard KPIs Only View

Browse Source 
Implemented by Ralph autonomous loop.
Iteration: 7

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Claude Agent
2026-01-12 12:23:00 +00:00
parent 701cabb8a4
commit 921826fc87
3 changed files with 129 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

123
src/modules/reports/views/DashboardView.vue
View File

@@ -122,8 +122,36 @@
/>
</div>
<!-- Rând 2: Analiză comparativă și Date Detaliate (combinat) -->
<div class="comparison-row">
<!-- Mobile: Quick Links to dedicated pages -->
<div v-if="isMobile" class="mobile-quick-links">
<div class="quick-link-card" @click="router.push('/reports/maturity-analysis')">
<div class="quick-link-icon">
<i class="pi pi-chart-pie"></i>
</div>
<div class="quick-link-content">
<span class="quick-link-title">Analiză Scadențe</span>
<span class="quick-link-subtitle">Clienți și furnizori</span>
</div>
<div class="quick-link-arrow">
<i class="pi pi-chevron-right"></i>
</div>
</div>
<div class="quick-link-card" @click="router.push('/reports/detailed-invoices')">
<div class="quick-link-icon">
<i class="pi pi-file-edit"></i>
</div>
<div class="quick-link-content">
<span class="quick-link-title">Facturi Detaliate</span>
<span class="quick-link-subtitle">Listă completă documente</span>
</div>
<div class="quick-link-arrow">
<i class="pi pi-chevron-right"></i>
</div>
</div>
</div>
<!-- Desktop: Rând 2: Analiză comparativă și Date Detaliate (combinat) -->
<div v-if="!isMobile" class="comparison-row">
<MaturityAndDetailsCard
:companyId="companyStore.selectedCompany?.id_firma"
@periodChanged="handleMaturityPeriodChange"
@@ -150,6 +178,7 @@
<script setup>
import { ref, computed, onMounted, onUnmounted, watch } from "vue";
import { useRouter } from "vue-router";
import { useToast } from "primevue/usetoast";
// Import componente noi
import MetricCard from "@reports/components/dashboard/cards/MetricCard.vue";
@@ -173,6 +202,7 @@ import {
} from "@reports/utils/exportUtils";
const toast = useToast();
const router = useRouter();
const companyStore = useCompanyStore();
const dashboardStore = useDashboardStore();
const periodStore = useAccountingPeriodStore();
@@ -1316,4 +1346,93 @@ onUnmounted(() => {
.mobile-kpi-carousel {
margin-bottom: var(--space-lg);
}
/* Mobile Quick Links Section */
.mobile-quick-links {
display: flex;
flex-direction: column;
gap: var(--space-sm);
padding: 0 var(--space-sm);
margin-top: var(--space-md);
}
.quick-link-card {
display: flex;
align-items: center;
gap: var(--space-md);
padding: var(--space-md);
background: var(--surface-card);
border: 1px solid var(--surface-border);
border-radius: var(--radius-md);
cursor: pointer;
transition: all var(--transition-fast);
min-height: 48px; /* MD3 touch target minimum */
}
.quick-link-card:hover {
background: var(--surface-hover);
border-color: var(--color-primary);
}
.quick-link-card:active {
transform: scale(0.98);
}
.quick-link-icon {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background: var(--md-sys-color-primary-container, var(--primary-100));
border-radius: var(--radius-md);
flex-shrink: 0;
}
.quick-link-icon i {
font-size: var(--text-lg);
color: var(--md-sys-color-on-primary-container, var(--primary-700));
}
.quick-link-content {
display: flex;
flex-direction: column;
gap: var(--space-xs);
flex: 1;
min-width: 0;
}
.quick-link-title {
font-size: var(--text-base);
font-weight: var(--font-semibold);
color: var(--color-text);
line-height: var(--leading-tight);
}
.quick-link-subtitle {
font-size: var(--text-sm);
color: var(--color-text-secondary);
line-height: var(--leading-tight);
}
.quick-link-arrow {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.quick-link-arrow i {
font-size: var(--text-base);
color: var(--color-text-secondary);
}
/* Dark mode support for quick links */
[data-theme="dark"] .quick-link-icon {
background: var(--md-sys-color-primary-container, var(--primary-800));
}
[data-theme="dark"] .quick-link-icon i {
color: var(--md-sys-color-on-primary-container, var(--primary-200));
}
</style>