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:
@@ -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%;
|
||||
|
||||
Reference in New Issue
Block a user