Vue · Patron de fiche

Page objet

Disponible

Patron de toutes les fiches (client, produit, facture…). Fil d'Ariane + en-tête d'entité (titre + Badge de statut + actions) + onglets + rangée de KpiCard + liste structurée des champs + table de lignes liées. 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é.

Page objet : fiche client (données mock)

Airbus Group SE

Client actif

Chiffre d'affaires

€1,240,000.00

Factures ouvertes

Encours

€84,200.00

Délai paiement moyen

28 j

Informations générales de l'entité.

Informations générales

Raison sociale: Airbus Group SE
Numéro client: C-001042
SIREN: 383 474 814
Secteur: Aéronautique & Défense
Contact principal: Marie Lefebvre
Email: [email protected]
Téléphone: +33 5 61 93 33 33
Pays: France

Factures liées

Factures du client

INV/2026/0142	2026-06-01	42 300 €	Payée
INV/2026/0128	2026-04-18	37 100 €	Payée
INV/2026/0119	2026-03-22	29 800 €	En attente
INV/2026/0103	2026-02-09	18 900 €	En retard

Voir le code (Svelte)

<div class="op-shell">
  <Breadcrumb items={[{"label":"Accueil","href":"#"},{"label":"Clients","href":"#"},{"label":"Airbus Group SE","current":true}]} />
  <div class="op-header">
    <div class="op-header-id">
      <h2 class="op-title">Airbus Group SE</h2>
      <Badge tone="success">Client actif</Badge>
    </div>
    <div class="op-header-actions">
      <Button variant="secondary" size="sm">Modifier</Button>
      <Button variant="primary" size="sm">Nouvelle facture</Button>
    </div>
  </div>
  <div class="op-kpi-row">
    <KpiCard
      label="Chiffre d'affaires"
      value={1240000}
      format="currency"
      delta={0.124}
      deltaFormat="percent"
      tone="category1"
    />
    <KpiCard
      label="Factures ouvertes"
      value={7}
      delta={-2}
      deltaFormat="absolute"
      tone="category2"
    />
    <KpiCard
      label="Encours"
      value={84200}
      format="currency"
      delta={0.03}
      deltaFormat="percent"
      tone="category3"
    />
    <KpiCard
      label="Délai paiement moyen"
      value={28}
      unit=" j"
      delta={-3}
      deltaFormat="absolute"
      tone="category4"
    />
  </div>
  <Tabs items={[{"id":"details","label":"Détails","content":"Informations générales de l'entité."},{"id":"invoices","label":"Factures","content":"Historique des factures liées."},{"id":"activity","label":"Activité","content":"Journal d'activité récent."}]} />
  <div class="op-section">
    <h3 class="op-section-title">Informations générales</h3>
    <StructuredList
      bordered
      items={[{"key":"Raison sociale","term":"Raison sociale","value":"Airbus Group SE"},{"key":"Numéro client","term":"Numéro client","value":"C-001042"},{"key":"SIREN","term":"SIREN","value":"383 474 814"},{"key":"Secteur","term":"Secteur","value":"Aéronautique & Défense"},{"key":"Contact principal","term":"Contact principal","value":"Marie Lefebvre"},{"key":"Email","term":"Email","value":"[email protected]"},{"key":"Téléphone","term":"Téléphone","value":"+33 5 61 93 33 33"},{"key":"Pays","term":"Pays","value":"France"}]}
    />
  </div>
  <div class="op-section">
    <h3 class="op-section-title">Factures liées</h3>
    <DataTable
      caption="Factures du client"
      columns={[{"key":"ref","label":"Référence","sortable":true},{"key":"date","label":"Date","sortable":true},{"key":"montant","label":"Montant","sortable":true,"align":"end"},{"key":"statut","label":"Statut","sortable":true}]}
      rows={[{"id":"1","ref":"INV/2026/0142","date":"2026-06-01","montant":"42 300 €","statut":"Payée"},{"id":"2","ref":"INV/2026/0128","date":"2026-04-18","montant":"37 100 €","statut":"Payée"},{"id":"3","ref":"INV/2026/0119","date":"2026-03-22","montant":"29 800 €","statut":"En attente"},{"id":"4","ref":"INV/2026/0103","date":"2026-02-09","montant":"18 900 €","statut":"En retard"}]}
      sortable
      size="sm"
    />
  </div>
</div>