Dashboard Layout ​

Anatomie et composition des pages dashboard b.connect.

Composants utilises

BcPageHeader, BcBreadcrumb, BcTabs, BcStepperH, BcCommandBar, BcEmptyState

Anatomie d'une page ​

Une page dashboard suit cette structure :

┌─────────────────────────────────────────┐
│  Topbar (logo, user, notifications)     │
├──────┬──────────────────────────────────┤
│      │  Breadcrumb                      │
│      │  Page Header (titre + actions)   │
│ Side │  ─────────────────────────────   │
│ bar  │  Tabs / Command Bar             │
│      │  ─────────────────────────────   │
│      │                                  │
│      │  Contenu principal               │
│      │  (table, cards, form...)         │
│      │                                  │
└──────┴──────────────────────────────────┘

Navigation contextuelle avec fil d'Ariane.

vue
<BcBreadcrumb :items="[
  { label: 'Accueil', href: '#' },
  { label: 'Financial Services', href: '#' },
  { label: 'Onboarding' },
]" />

La derniere entree (page courante) n'a pas de href et s'affiche en non-cliquable avec font-weight: 600.

Page Header ​

Titre de page avec actions contextuelles.

Onboarding

Financial Services — Corp Alpha SAS

vue
<BcPageHeader title="Onboarding" subtitle="Financial Services — Corp Alpha SAS">
  <template #actions>
    <BcButton label="Exporter" variant="outline" size="sm" />
    <BcButton label="Creer un FS" variant="primary" size="sm" />
  </template>
</BcPageHeader>

Tabs de navigation ​

Navigation par onglets avec compteurs.

vue
<BcTabs v-model="activeTab" :tabs="[
  { id: 'all', label: 'Tous', count: 42 },
  { id: 'ongoing', label: 'En cours', count: 18 },
  { id: 'eligible', label: 'Eligible', count: 12 },
  { id: 'blocked', label: 'Bloque', count: 4 },
]" />

L'onglet actif affiche un trait gradient en bas et un compteur en pill gradient.

Command Bar ​

Barre de recherche avec filtres actifs.

vue
<BcCommandBar placeholder="Rechercher un Financial Service...">
  <template #filters>
    <BcFilterChip label="READY_TO_CONFIGURE" model-value />
    <BcFilterChip label="Etat" />
  </template>
</BcCommandBar>

Stepper horizontal ​

Progression lineaire d'un processus d'onboarding.

  1. Qualification
  2. KYB/KYC
  3. Configuration
  4. Sandbox
  5. Production
vue
<BcStepperH :steps="[
  { id: 'qual', label: 'Qualification', state: 'done' },
  { id: 'kyb', label: 'KYB/KYC', state: 'done' },
  { id: 'config', label: 'Configuration', state: 'active' },
  { id: 'sandbox', label: 'Sandbox', state: 'pending' },
  { id: 'prod', label: 'Production', state: 'pending' },
]" />

Etats : done (vert ✓), active (accent), pending (gris).

Etats vides ​

Quand une liste ne contient aucun element.

Aucun Financial Service

Creez votre premier FS pour commencer l'onboarding.

Notes d'usage ​

  • Breadcrumb : toujours present, 3 niveaux max
  • Page Header : le titre utilise Poppins Display 700, les actions sont alignees a droite
  • Tabs : utiliser des compteurs pour donner une vue d'ensemble immediate
  • Command Bar : combiner recherche textuelle et filter chips pour le tri avance