feat(dashboard): Complete dashboard desktop cleanup and improvements

User Stories Completed:
- US-001: Eliminare SolduriCompactCard de pe Desktop
- US-002: Eliminare Icoane din Header-ul CollapsibleCard
- US-003: Reorganizare TreasuryDualCard - Text Înainte de Grafice
- US-004: Reorganizare ClientiBalanceCard - Text Înainte de Grafice
- US-005: Reorganizare FurnizoriBalanceCard - Text Înainte de Grafice
- US-006: Grafice Colapsabile în TreasuryDualCard
- US-007: Grafice Colapsabile în ClientiBalanceCard
- US-008: Grafice Colapsabile în FurnizoriBalanceCard
- US-009: Grafice Colapsabile în CashFlowMetricCard

Additional Improvements:
- Add cache metadata display (CacheFooter component) for all dashboard cards
- Add @cached decorators to get_monthly_flows and get_indicators_with_sparklines
- Fix financial indicators calculations and sparkline sync
- Add state reset on company change to prevent stale data
- New shared components: CacheFooter.vue, authRedirect.js
- Enhanced FinancialIndicatorsCard with sparklines and period selection

Squashed from branch: ralph/dashboard-desktop-cleanup (11 commits)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Claude Agent
2026-01-22 07:27:27 +00:00
parent 69683b2d65
commit 1b9ebf1d8f
23 changed files with 4034 additions and 1396 deletions

View File

@@ -22,8 +22,22 @@
</div>
</div>
<!-- Dual sparkline charts - stacked vertical -->
<div class="sparkline-dual-container" v-if="hasSparklineData">
<!-- Charts toggle header -->
<div
v-if="hasSparklineData"
class="charts-toggle-header"
@click="toggleChartsExpanded"
>
<span>Grafice evoluție</span>
<i
class="pi pi-chevron-right"
:class="{ expanded: chartsExpanded }"
></i>
</div>
<!-- Dual sparkline charts - stacked vertical (collapsible) -->
<div v-show="chartsExpanded" class="charts-content">
<div class="sparkline-dual-container" v-if="hasSparklineData">
<!-- Grafic Încasări -->
<div class="sparkline-wrapper">
<div class="sparkline-title text-success">Încasări</div>
@@ -40,6 +54,14 @@
</div>
</div>
</div>
</div>
<!-- Cache Footer -->
<CacheFooter
:cache-hit="cacheInfo?.hit"
:response-time-ms="cacheInfo?.time"
:cache-source="cacheInfo?.source"
/>
</div>
</template>
@@ -53,6 +75,7 @@ import {
nextTick,
} from "vue";
import { Chart, registerables } from "chart.js";
import CacheFooter from "@/shared/components/CacheFooter.vue";
Chart.register(...registerables);
@@ -97,6 +120,10 @@ const props = defineProps({
type: Array,
default: () => [],
},
cacheInfo: {
type: Object,
default: () => ({ hit: false, time: 0, source: null }),
},
});
// Refs pentru 2 canvas-uri separate
@@ -105,6 +132,13 @@ const outflowsCanvas = ref(null);
let inflowsChartInstance = null;
let outflowsChartInstance = null;
// Charts collapsible state
const chartsExpanded = ref(false);
const toggleChartsExpanded = () => {
chartsExpanded.value = !chartsExpanded.value;
};
// Format currency
const formatCurrency = (amount) => {
if (!amount && amount !== 0) return "0 RON";
@@ -607,6 +641,39 @@ onBeforeUnmount(() => {
min-height: 60px;
}
/* Charts toggle header */
.charts-toggle-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--space-sm) var(--space-md);
margin-top: var(--space-sm);
background: var(--surface-hover);
border-radius: var(--radius-sm);
cursor: pointer;
font-size: var(--text-sm);
font-weight: var(--font-medium);
color: var(--color-text-secondary);
transition: background-color var(--transition-fast);
}
.charts-toggle-header:hover {
background: var(--surface-border);
}
.charts-toggle-header i {
transition: transform var(--transition-fast);
}
.charts-toggle-header i.expanded {
transform: rotate(90deg);
}
/* Charts content wrapper */
.charts-content {
margin-top: var(--space-sm);
}
/* Dual sparkline container (unique to this card) */
.sparkline-dual-container {
width: 100%;