Aller au contenu

Vue · Comptabilité

Balance comptable

Disponible

Grille de la balance générale par compte avec totaux débit/crédit, filtres par période et export. Pour la revue de la balance avant clôture. Combine DataGrid, KpiCard, Select, DatePicker, Badge et Button en un seul NodeSpec → rendu identique en Svelte, React, Vue et Angular.

Balance comptable — Mai 2026 (données mock)

Balance comptable

Total débit

273 210,00 €

Total crédit

597 380,00 €

Comptes actifs

7

Balance équilibréePrêt pour clôture
Voir le code (Svelte) 
<div class="tb-shell">
  <div class="tb-titlebar">
    <h2 class="tb-title">Balance comptable</h2>
    <div class="tb-actions">
      <Button variant="secondary" size="sm">Exporter CSV</Button>
      <Button variant="secondary" size="sm">Imprimer</Button>
    </div>
  </div>
  <div class="tb-filters">
    <Select
      label="Période"
      value="2026-05"
      options={[{"value":"2026-05","label":"Mai 2026"},{"value":"2026-04","label":"Avril 2026"},{"value":"2026-03","label":"Mars 2026"},{"value":"2026-q1","label":"T1 2026"}]}
    />
    <DatePicker label="Date de clôture" value="2026-05-31" />
    <Select
      label="Classe de compte"
      value="all"
      options={[{"value":"all","label":"Toutes les classes"},{"value":"1","label":"Classe 1 — Capitaux"},{"value":"4","label":"Classe 4 — Tiers"},{"value":"6","label":"Classe 6 — Charges"},{"value":"7","label":"Classe 7 — Produits"}]}
    />
  </div>
  <div class="tb-kpis">
    <KpiCard label="Total débit" value="273 210,00 €" trend="neutral" />
    <KpiCard label="Total crédit" value="597 380,00 €" trend="neutral" />
    <KpiCard label="Comptes actifs" value="7" trend="neutral" />
  </div>
  <DataGrid
    caption="Balance générale — Mai 2026"
    columns={[{"key":"compte","label":"N° compte","sortable":true},{"key":"libelle","label":"Libellé","sortable":false},{"key":"debit","label":"Débit","sortable":true,"align":"end"},{"key":"credit","label":"Crédit","sortable":true,"align":"end"},{"key":"solde","label":"Solde","sortable":true,"align":"end"},{"key":"statut","label":"Statut","sortable":false}]}
    rows={[{"id":"1","compte":"101000","libelle":"Capital social","debit":"0,00 €","credit":"250 000,00 €","solde":"-250 000,00 €","statut":"Équilibré"},{"id":"2","compte":"401000","libelle":"Fournisseurs","debit":"18 340,00 €","credit":"52 780,00 €","solde":"-34 440,00 €","statut":"Équilibré"},{"id":"3","compte":"411000","libelle":"Clients","debit":"87 450,00 €","credit":"41 200,00 €","solde":"46 250,00 €","statut":"Équilibré"},{"id":"4","compte":"512000","libelle":"Banque principale","debit":"124 900,00 €","credit":"98 300,00 €","solde":"26 600,00 €","statut":"Équilibré"},{"id":"5","compte":"607000","libelle":"Achats de marchandises","debit":"34 120,00 €","credit":"0,00 €","solde":"34 120,00 €","statut":"Équilibré"},{"id":"6","compte":"613200","libelle":"Locations et charges locatives","debit":"8 400,00 €","credit":"0,00 €","solde":"8 400,00 €","statut":"Équilibré"},{"id":"7","compte":"707000","libelle":"Ventes de marchandises","debit":"0,00 €","credit":"142 600,00 €","solde":"-142 600,00 €","statut":"Équilibré"}]}
    sortable
    pageSize={8}
    size="sm"
  />
  <div class="tb-footer">
    <Badge tone="success">Balance équilibrée</Badge>
    <span class="tb-footer-label">Prêt pour clôture</span>
  </div>
</div>

Composants DS utilisés