bachir
3552b5a79d
Reprend exactement le pattern des petits multiples déjà en place sur /dashboard/compte (grille figli-year-hbar-grid, variante compacte de h-bar-chart) -- mêmes classes CSS, aucun nouveau style nécessaire. Backend : DashboardStatsController::stats() calcule maintenant aussi total_par_type_par_annee et top_clients_par_annee (top 8, contre 12 en toutes années confondues) à partir des mêmes requêtes SQL déjà en place, sans requête supplémentaire. Frontend : dashboard.js n'a jamais de données ligne par ligne (contraire- ment à dashboard-compte.js qui filtre côté client) -- l'agrégation par année doit donc venir du serveur. Ajout du prop "compact" au HBarChart de dashboard.js (jusqu'ici absent, seule la copie de dashboard-compte.js l'avait).
84 lines
4.3 KiB
Twig
84 lines
4.3 KiB
Twig
{#
|
|
Charts and aggregate totals: solde par compte, chiffre d'affaires par
|
|
année, répartition par type, top clients. The spreadsheet-like
|
|
line-by-line view is the site's home page (figli-compta-home.html.twig).
|
|
|
|
{% verbatim %} below: this is Vue template syntax, not Twig -- both use
|
|
{{ }}, so verbatim tells Twig to leave it alone and let Vue compile it
|
|
in the browser.
|
|
#}
|
|
<nav class="figli-page-nav">
|
|
<a href="{{ path('figli_compta_ledger.home') }}" class="{{ current_route == 'figli_compta_ledger.home' ? 'is-active' : '' }}">Grand livre</a>
|
|
<a href="{{ path('figli_compta_ledger.dashboard') }}" class="{{ current_route == 'figli_compta_ledger.dashboard' ? 'is-active' : '' }}">Dashboard</a>
|
|
<a href="{{ path('figli_compta_ledger.dashboard_compte') }}" class="{{ current_route == 'figli_compta_ledger.dashboard_compte' ? 'is-active' : '' }}">Par compte</a>
|
|
</nav>
|
|
{% verbatim %}
|
|
<div id="figli-dashboard-app">
|
|
<p v-if="loading">Chargement des données…</p>
|
|
<p v-else-if="error" class="figli-error">Erreur de chargement du tableau de bord : {{ error }}</p>
|
|
<template v-else>
|
|
<div class="figli-summary-row">
|
|
<div class="figli-summary-card">
|
|
<div class="figli-summary-label">Chiffre d'affaires total</div>
|
|
<div class="figli-summary-value">{{ formatEurRound(totalCA) }}</div>
|
|
</div>
|
|
<div class="figli-summary-card" v-if="caAnneeEnCours">
|
|
<div class="figli-summary-label">CA {{ caAnneeEnCours.annee }}</div>
|
|
<div class="figli-summary-value">{{ formatEurRound(caAnneeEnCours.value) }}</div>
|
|
</div>
|
|
<div class="figli-summary-card" v-for="item in soldeParCompteItems.slice(0, 1)" :key="'top-' + item.label">
|
|
<div class="figli-summary-label">Meilleur solde</div>
|
|
<div class="figli-summary-value" :class="item.value < 0 ? 'is-negative' : 'is-positive'">{{ item.label }} · {{ formatEurRound(item.value) }}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<section class="figli-chart-section">
|
|
<h2>Chiffre d'affaires par année</h2>
|
|
<p class="figli-note">Total des entrées client (montant HT) facturées chaque année.</p>
|
|
<column-chart :items="caParAnneeItems" :format-value="formatEurRound"></column-chart>
|
|
</section>
|
|
|
|
<section class="figli-chart-section">
|
|
<h2>Solde par compte</h2>
|
|
<p class="figli-note">Solde cumulé de chaque compte depuis l'origine (ouverture comprise) -- vert = créditeur, rouge = débiteur.</p>
|
|
<h-bar-chart :items="soldeParCompteItems" :format-value="formatEurRound"></h-bar-chart>
|
|
</section>
|
|
|
|
<section class="figli-chart-section">
|
|
<h2>Évolution du solde par compte</h2>
|
|
<p class="figli-note">Solde de clôture de chaque compte, année par année.</p>
|
|
<div class="figli-trend-grid">
|
|
<div class="figli-trend-card" v-for="compte in comptesOrdonnes" :key="compte">
|
|
<div class="figli-trend-title">{{ compte }}</div>
|
|
<mini-trend :annees="stats.annees" :values="trendValues(compte)" :format-value="formatEurRound"></mini-trend>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="figli-chart-section">
|
|
<h2>Répartition de l'activité par type</h2>
|
|
<p class="figli-note">Montant total (HT, valeur absolue) par type de ligne, hors ouvertures.</p>
|
|
<h-bar-chart :items="typeItems" :format-value="formatEurRound" :color-for="typeColor"></h-bar-chart>
|
|
<div class="figli-year-hbar-grid">
|
|
<div class="figli-year-hbar-card" v-for="y in typeItemsParAnnee" :key="y.annee">
|
|
<div class="figli-year-hbar-title">{{ y.annee }}</div>
|
|
<h-bar-chart :items="y.items" :format-value="formatEurRound" :color-for="typeColor" compact></h-bar-chart>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="figli-chart-section">
|
|
<h2>Top clients par chiffre d'affaires</h2>
|
|
<p class="figli-note">Les 12 clients ayant généré le plus de chiffre d'affaires, toutes années confondues.</p>
|
|
<h-bar-chart :items="topClientsItems" :format-value="formatEurRound"></h-bar-chart>
|
|
<div class="figli-year-hbar-grid">
|
|
<div class="figli-year-hbar-card" v-for="y in topClientsParAnnee" :key="y.annee">
|
|
<div class="figli-year-hbar-title">{{ y.annee }}</div>
|
|
<h-bar-chart :items="y.items" :format-value="formatEurRound" compact></h-bar-chart>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
</div>
|
|
{% endverbatim %}
|