Vue d'ensemble du stock

<div class="so-layout">
  <div class="so-filters">
    <Select
      label="Entrepôt"
      value="all"
      options={[{"value":"all","label":"Tous les entrepôts"},{"value":"lyon","label":"Entrepôt Lyon"},{"value":"paris","label":"Entrepôt Paris"},{"value":"bordeaux","label":"Entrepôt Bordeaux"}]}
    />
    <Select
      label="Catégorie"
      value="all"
      options={[{"value":"all","label":"Toutes catégories"},{"value":"fixation","label":"Fixation"},{"value":"electrique","label":"Électrique"}]}
    />
  </div>
  <div class="so-kpi-row">
    <KpiCard
      label="Valeur du stock"
      value={1842600}
      delta={52400}
      deltaFormat="absolute"
      tone="category1"
      sparkline={[1540000,1612000,1688000,1730000,1790000,1842600]}
    />
    <KpiCard
      label="Ruptures actives"
      value={14}
      delta={-3}
      deltaFormat="absolute"
      tone="category4"
      sparkline={[22,20,18,17,17,14]}
    />
    <KpiCard
      label="Taux de rotation"
      value={4.7}
      delta={0.3}
      deltaFormat="absolute"
      tone="category2"
      sparkline={[3.8,4,4.1,4.4,4.5,4.7]}
    />
    <KpiCard
      label="Articles sous seuil"
      value={38}
      delta={5}
      deltaFormat="absolute"
      tone="category3"
    />
  </div>
  <div class="so-charts-row">
    <div class="so-chart-main">
      <AreaChart
        label="Évolution de la valeur du stock"
        data={[{"x":"Jan","y":1540000},{"x":"Fév","y":1612000},{"x":"Mar","y":1688000},{"x":"Avr","y":1730000},{"x":"Mai","y":1790000},{"x":"Juin","y":1842600}]}
        tone="category1"
        height={220}
      />
    </div>
    <div class="so-chart-side">
      <DonutChart
        centerLabel="Répartition par entrepôt"
        data={[{"label":"Entrepôt Lyon","value":38,"tone":"category1"},{"label":"Entrepôt Paris","value":29,"tone":"category2"},{"label":"Entrepôt Bordeaux","value":21,"tone":"category3"},{"label":"Entrepôt Lille","value":12,"tone":"category4"}]}
      />
    </div>
  </div>
  <div class="so-table-section">
    <div class="so-table-header">
      <h3 class="so-section-title">Articles sous seuil de réapprovisionnement</h3>
      <Badge tone="danger">Action requise</Badge>
    </div>
    <Table
      columns={[{"key":"article","label":"Article"},{"key":"ref","label":"Référence"},{"key":"stock","label":"Stock actuel","align":"end"},{"key":"seuil","label":"Seuil mini","align":"end"},{"key":"statut","label":"Statut","align":"center"}]}
      rows={[{"id":"1","article":"Vis M6×20 inox","ref":"VIS-M6-20","stock":142,"seuil":500,"statut":"Critique"},{"id":"2","article":"Joint torique 15mm","ref":"JTO-015","stock":80,"seuil":300,"statut":"Critique"},{"id":"3","article":"Roulement 6205 ZZ","ref":"RLT-6205","stock":27,"seuil":100,"statut":"Rupture"},{"id":"4","article":"Câble électrique 2,5mm²","ref":"CAB-25","stock":310,"seuil":1000,"statut":"Bas"},{"id":"5","article":"Filtre hydraulique HF6","ref":"FLT-HF6","stock":5,"seuil":50,"statut":"Rupture"}]}
      size="sm"
    />
  </div>
</div>