Aller au contenu

Vue · Comptabilité

Facture client

Disponible

Déclinaison du patron page objet pour une fiche facture : Breadcrumb + en-tête (n° de facture + Badge de statut + Button d'actions) + StructuredList (client, dates, conditions) + DataTable des lignes + StructuredList des totaux (HT / TVA / TTC). Un seul NodeSpec → rendu identique en Svelte, React, Vue et Angular.

Rendu multi-framework

Utilisez les onglets pour basculer entre Svelte, React, Vue et Angular. Le rendu et le code copié reflètent le framework sélectionné.

Facture client : INV/2026/0142 (données mock)

INV/2026/0142

Payée

Informations

Client
Airbus Group SE
Adresse de facturation
2 rond-point Émile Dewoitine, 31700 Blagnac
Date de facturation
2026-06-01
Date d'échéance
2026-07-01
Conditions de paiement
30 jours net
Référence client
PO-AIR-88421

Lignes de facture

Détail des lignes facturées
DésignationQtéPrix unitaireTotal HT
Licence Design System : abonnement annuel101 200 €12 000 €
Atelier de conception (jours)81 500 €12 000 €
Audit d'accessibilité19 800 €9 800 €
Support premium (trimestre)18 500 €8 500 €
Total HT
42 300 €
TVA (20 %)
8 460 €
Total TTC
50 760 €
Voir le code (Svelte) 
<div class="fc-shell">
  <Breadcrumb items={[{"label":"Comptabilité","href":"#"},{"label":"Factures clients","href":"#"},{"label":"INV/2026/0142","current":true}]} />
  <div class="fc-header">
    <div class="fc-header-id">
      <h2 class="fc-title">INV/2026/0142</h2>
      <Badge tone="success">Payée</Badge>
    </div>
    <div class="fc-header-actions">
      <Button variant="secondary" size="sm">Imprimer</Button>
      <Button variant="secondary" size="sm">Envoyer</Button>
      <Button variant="primary" size="sm">Enregistrer un paiement</Button>
    </div>
  </div>
  <div class="fc-section">
    <h3 class="fc-section-title">Informations</h3>
    <StructuredList
      bordered
      items={[{"key":"Client","term":"Client","value":"Airbus Group SE"},{"key":"Adresse de facturation","term":"Adresse de facturation","value":"2 rond-point Émile Dewoitine, 31700 Blagnac"},{"key":"Date de facturation","term":"Date de facturation","value":"2026-06-01"},{"key":"Date d'échéance","term":"Date d'échéance","value":"2026-07-01"},{"key":"Conditions de paiement","term":"Conditions de paiement","value":"30 jours net"},{"key":"Référence client","term":"Référence client","value":"PO-AIR-88421"}]}
    />
  </div>
  <div class="fc-section">
    <h3 class="fc-section-title">Lignes de facture</h3>
    <DataTable
      caption="Détail des lignes facturées"
      columns={[{"key":"designation","label":"Désignation","sortable":false},{"key":"qte","label":"Qté","sortable":false,"align":"end"},{"key":"pu","label":"Prix unitaire","sortable":false,"align":"end"},{"key":"total","label":"Total HT","sortable":false,"align":"end"}]}
      rows={[{"id":"1","designation":"Licence Design System : abonnement annuel","qte":"10","pu":"1 200 €","total":"12 000 €"},{"id":"2","designation":"Atelier de conception (jours)","qte":"8","pu":"1 500 €","total":"12 000 €"},{"id":"3","designation":"Audit d'accessibilité","qte":"1","pu":"9 800 €","total":"9 800 €"},{"id":"4","designation":"Support premium (trimestre)","qte":"1","pu":"8 500 €","total":"8 500 €"}]}
      size="sm"
    />
  </div>
  <div class="fc-totals">
    <StructuredList
      bordered
      items={[{"key":"Total HT","term":"Total HT","value":"42 300 €"},{"key":"TVA (20 %)","term":"TVA (20 %)","value":"8 460 €"},{"key":"Total TTC","term":"Total TTC","value":"50 760 €"}]}
    />
  </div>
</div>

Composants DS utilisés