Congés et présences

<div class="la-layout">
  <div class="la-filters">
    <DatePicker label="Période" value="2026-01-01/2026-06-30" />
    <Button variant="primary" size="sm">Appliquer</Button>
  </div>
  <Alert tone="warning">3 demandes en attente de validation.</Alert>
  <div class="la-kpi-row">
    <KpiCard
      label="Solde moyen (jours)"
      value={14.3}
      delta={1.2}
      deltaFormat="absolute"
      tone="category1"
      sparkline={[11,12,13,13.5,14,14.3]}
    />
    <KpiCard
      label="Taux de présence"
      value={0.94}
      format="percent"
      delta={0.02}
      deltaFormat="percent"
      tone="category2"
      sparkline={[0.91,0.93,0.92,0.95,0.93,0.94]}
    />
    <KpiCard
      label="Absences (jours)"
      value={62}
      delta={-8}
      deltaFormat="absolute"
      tone="category4"
      sparkline={[80,74,70,68,65,62]}
    />
    <KpiCard label="Demandes en attente" value={3} tone="category3" />
  </div>
  <div class="la-charts-row">
    <div class="la-chart-main">
      <AreaChart
        label="Taux de présence mensuel (%)"
        data={[{"x":"Jan","y":94},{"x":"Fév","y":91},{"x":"Mar","y":95},{"x":"Avr","y":89},{"x":"Mai","y":93},{"x":"Juin","y":96}]}
        tone="category2"
        height={220}
      />
    </div>
    <div class="la-chart-side">
      <DonutChart
        centerLabel="Répartition des absences"
        data={[{"label":"Congés payés","value":48,"tone":"category1"},{"label":"Maladie","value":21,"tone":"category2"},{"label":"RTT","value":18,"tone":"category3"},{"label":"Exceptionnel","value":13,"tone":"category4"}]}
      />
    </div>
  </div>
  <div class="la-table-section">
    <div class="la-table-header">
      <h3 class="la-section-title">Demandes récentes</h3>
      <Badge tone="warning">3 en attente</Badge>
    </div>
    <Table
      columns={[{"key":"employee","label":"Employé"},{"key":"type","label":"Type"},{"key":"period","label":"Période"},{"key":"days","label":"Jours","align":"end"},{"key":"status","label":"Statut","align":"center"}]}
      rows={[{"id":"1","employee":"Sophie Martin","type":"Congés payés","period":"23–27 juin 2026","days":"5","status":"pending"},{"id":"2","employee":"Lucas Bernard","type":"Maladie","period":"18–19 juin 2026","days":"2","status":"approved"},{"id":"3","employee":"Amina Diallo","type":"RTT","period":"30 juin 2026","days":"1","status":"pending"},{"id":"4","employee":"Thomas Leclerc","type":"Congés payés","period":"7–18 juil. 2026","days":"10","status":"approved"},{"id":"5","employee":"Chloé Nguyen","type":"Exceptionnel","period":"20 juin 2026","days":"1","status":"rejected"}]}
      size="sm"
    />
  </div>
</div>