Aller au contenu

RH

Fiche employé

Disponible

Fiche détaillée d'un employé : en-tête avatar et identité, cartes KPI (ancienneté, solde de congés), onglets Informations / Contrat / Documents avec champs et historique. Pour consulter et éditer un dossier individuel.

Rendu multi-framework

Fiche employé : Claire Bernard (données mock)

Claire Bernard

Ingénieure logicielle senior · Produit & Ingénierie

Actif

Ancienneté

7 ans

Solde congés

18 j

Jours travaillés

142

Informations générales

ChampValeur
PosteIngénieure logicielle senior
DépartementProduit & Ingénierie
SiteParis, France
ManagerFrédéric Moreau
Email[email protected]
Téléphone+33 1 42 68 90 12

Contrat

ChampValeur
Type de contratCDI
Date d'entrée2019-03-18
Temps de travailTemps plein (39 h)
Convention collectiveSYNTEC
Salaire brut annuel68 400 €

Documents

DocumentDateStatut
Contrat de travail2019-03-18Signé
Avenant télétravail2022-09-01Signé
Entretien annuel 20252025-11-15Validé
Attestation employeur2026-04-02Disponible
Voir le code (Svelte) 
<div class="ep-shell">
  <div class="ep-header">
    <div class="ep-identity">
      <Avatar name="Claire Bernard" size="xl" tone="category2" />
      <div class="ep-identity-text">
        <h2 class="ep-name">Claire Bernard</h2>
        <p class="ep-role">Ingénieure logicielle senior · Produit & Ingénierie</p>
        <Badge tone="success">Actif</Badge>
      </div>
    </div>
    <div class="ep-header-actions">
      <Button variant="secondary" size="sm">Modifier</Button>
      <Button variant="primary" size="sm">Nouvelle demande</Button>
    </div>
  </div>
  <div class="ep-kpis">
    <KpiCard label="Ancienneté" value={7} unit=" ans" tone="category1" />
    <KpiCard label="Solde congés" value={18} unit=" j" tone="category2" />
    <KpiCard label="Jours travaillés" value={142} tone="category3" />
  </div>
  <Tabs
    items={[{"value":"info","label":"Informations"},{"value":"contract","label":"Contrat"},{"value":"documents","label":"Documents"}]}
    label="Sections de la fiche"
  />
  <FieldCard label="Informations générales" variant="bordered">
    <Table
      columns={[{"key":"label","label":"Champ"},{"key":"value","label":"Valeur"}]}
      rows={[{"id":"0","label":"Poste","value":"Ingénieure logicielle senior"},{"id":"1","label":"Département","value":"Produit & Ingénierie"},{"id":"2","label":"Site","value":"Paris, France"},{"id":"3","label":"Manager","value":"Frédéric Moreau"},{"id":"4","label":"Email","value":"[email protected]"},{"id":"5","label":"Téléphone","value":"+33 1 42 68 90 12"}]}
      size="sm"
    />
  </FieldCard>
  <FieldCard label="Contrat" variant="bordered">
    <Table
      columns={[{"key":"label","label":"Champ"},{"key":"value","label":"Valeur"}]}
      rows={[{"id":"0","label":"Type de contrat","value":"CDI"},{"id":"1","label":"Date d'entrée","value":"2019-03-18"},{"id":"2","label":"Temps de travail","value":"Temps plein (39 h)"},{"id":"3","label":"Convention collective","value":"SYNTEC"},{"id":"4","label":"Salaire brut annuel","value":"68 400 €"}]}
      size="sm"
    />
  </FieldCard>
  <FieldCard label="Documents" variant="bordered">
    <Table
      columns={[{"key":"nom","label":"Document","sortable":true},{"key":"date","label":"Date","sortable":true},{"key":"statut","label":"Statut","sortable":false}]}
      rows={[{"id":"1","nom":"Contrat de travail","date":"2019-03-18","statut":"Signé"},{"id":"2","nom":"Avenant télétravail","date":"2022-09-01","statut":"Signé"},{"id":"3","nom":"Entretien annuel 2025","date":"2025-11-15","statut":"Validé"},{"id":"4","nom":"Attestation employeur","date":"2026-04-02","statut":"Disponible"}]}
      sortable
      size="sm"
    />
  </FieldCard>
</div>

Composants DS utilisés