Aller au contenu

Vue · Comptabilité

Rapprochement bancaire

Disponible

Vue en deux volets confrontant les lignes du relevé bancaire aux écritures comptables, avec suggestions de correspondance et solde résiduel. Pour lettrer et rapprocher les opérations. Combine Table, KpiCard, Tabs, Badge et Button en un seul NodeSpec → rendu identique en Svelte, React, Vue et Angular.

Rendu multi-framework

Rapprochement bancaire — Juin 2026 (données mock)

Rapprochement — Juin 2026

Solde relevé

11 900,60 €

Solde comptable

6 220,60 €

Écart résiduel

5 680,00 €

Lignes non lettrées

1

Rapprochement incomplet1 ligne bancaire non lettrée — chèque 004521 (5 680,00 €)
Voir le code (Svelte) 
<div class="rb-shell">
  <div class="rb-titlebar">
    <h2 class="rb-title">Rapprochement — Juin 2026</h2>
    <div class="rb-actions">
      <Button variant="secondary" size="sm">Exporter</Button>
      <Button variant="primary" size="sm">Valider le rapprochement</Button>
    </div>
  </div>
  <div class="rb-kpis">
    <KpiCard label="Solde relevé" value="11 900,60 €" trend="neutral" />
    <KpiCard label="Solde comptable" value="6 220,60 €" trend="neutral" />
    <KpiCard label="Écart résiduel" value="5 680,00 €" trend="down" />
    <KpiCard label="Lignes non lettrées" value="1" trend="neutral" />
  </div>
  <Tabs
    items={[{"value":"bank","label":"Relevé bancaire"},{"value":"ledger","label":"Écritures comptables"}]}
    value="bank"
  >
    <div data-tab="bank" class="rb-pane">
      <div class="rb-pane-header">
        <span class="rb-pane-label">6 opérations · BNP Paribas — IBAN FR76 3000 4028 3700 0100 7232 847</span>
        <Badge tone="warning">1 non lettré</Badge>
      </div>
      <Table
        caption="Lignes du relevé bancaire"
        columns={[{"key":"date","label":"Date","sortable":true},{"key":"libelle","label":"Libellé relevé","sortable":false},{"key":"montant","label":"Montant","sortable":true,"align":"end"},{"key":"statut","label":"Statut","sortable":false}]}
        rows={[{"id":"b1","date":"2026-06-02","libelle":"Virement client Dupont SA","montant":"12 400,00 €","statut":"Rapproché"},{"id":"b2","date":"2026-06-05","libelle":"Prélèvement loyer bureaux","montant":"-3 200,00 €","statut":"Rapproché"},{"id":"b3","date":"2026-06-08","libelle":"CB carburant TOTAL 0612","montant":"-187,40 €","statut":"Suggéré"},{"id":"b4","date":"2026-06-10","libelle":"Virement fournisseur ImprimCo","montant":"-2 750,00 €","statut":"Rapproché"},{"id":"b5","date":"2026-06-14","libelle":"Encaissement chèque 004521","montant":"5 680,00 €","statut":"Non lettré"},{"id":"b6","date":"2026-06-17","libelle":"Frais bancaires juin","montant":"-42,00 €","statut":"Suggéré"}]}
        size="sm"
      />
    </div>
    <div data-tab="ledger" class="rb-pane">
      <div class="rb-pane-header">
        <span class="rb-pane-label">5 écritures · Compte 512000 Banque principale</span>
        <Badge tone="success">2 suggérés</Badge>
      </div>
      <Table
        caption="Écritures comptables"
        columns={[{"key":"date","label":"Date","sortable":true},{"key":"compte","label":"Compte","sortable":false},{"key":"libelle","label":"Libellé écriture","sortable":false},{"key":"montant","label":"Montant","sortable":true,"align":"end"},{"key":"statut","label":"Statut","sortable":false}]}
        rows={[{"id":"l1","date":"2026-06-02","compte":"411000","libelle":"Règlement Dupont SA FAC-0512","montant":"12 400,00 €","statut":"Rapproché"},{"id":"l2","date":"2026-06-05","compte":"613200","libelle":"Loyer juin — bail 2024-08","montant":"-3 200,00 €","statut":"Rapproché"},{"id":"l3","date":"2026-06-08","compte":"624100","libelle":"Carburant véhicule commercial","montant":"-187,40 €","statut":"Suggéré"},{"id":"l4","date":"2026-06-10","compte":"401000","libelle":"Règlement ImprimCo FC-2206","montant":"-2 750,00 €","statut":"Rapproché"},{"id":"l5","date":"2026-06-17","compte":"627000","libelle":"Frais de tenue de compte","montant":"-42,00 €","statut":"Suggéré"}]}
        size="sm"
      />
    </div>
  </Tabs>
  <div class="rb-footer">
    <Badge tone="danger">Rapprochement incomplet</Badge>
    <span class="rb-footer-label">1 ligne bancaire non lettrée — chèque 004521 (5 680,00 €)</span>
  </div>
</div>

Composants DS utilisés