const Dashboard = () => {

• const COLORS = ['#0088FE', '#00C49F', '#FFBB28', '#FF8042'];
• const totalMoisDisponibles = 1000;
• const data = [
  • {
    • beneficiaire: 'Client A',
    • moisAlloues: 250,
    • moisConsommes: {
      • 'Jan': 30,
      • 'Fév': 28,
      • 'Mar': 35
    • }
  • },
  • {
    • beneficiaire: 'Client B',
    • moisAlloues: 250,
    • moisConsommes: {
      • 'Jan': 25,
      • 'Fév': 32,
      • 'Mar': 28
    • }
  • },
  • {
    • beneficiaire: 'Client C',
    • moisAlloues: 250,
    • moisConsommes: {
      • 'Jan': 35,
      • 'Fév': 30,
      • 'Mar': 33
    • }
  • },
  • {
    • beneficiaire: 'Client D',
    • moisAlloues: 250,
    • moisConsommes: {
      • 'Jan': 28,
      • 'Fév': 31,
      • 'Mar': 29
    • }
  • }
• ];

• const clientsRestants = data.map(client => {
  • const consomme = Object.values(client.moisConsommes).reduce((a, b) => a + b, 0);
  • return {
    • ...client,
    • restant: client.moisAlloues - consomme
  • };
• });

• return (
  • <div className="space-y-4 p-4">
    • <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
      • {clientsRestants.map((client, index) => (
        • <Alert key={client.beneficiaire}>
          • <AlertTitle className="flex justify-between">
            • <span>{client.beneficiaire}</span>
            • <span className={client.restant < 50 ? 'text-red-500' : 'text-green-500'}>
              • {client.restant} mois restants
            • </span>
          • </AlertTitle>
        • </Alert>
      • ))}
    • </div>

• <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
  • <Card>
    • <CardHeader>
      • <CardTitle>Répartition Initiale (1000 mois)</CardTitle>
    • </CardHeader>
    • <CardContent>
      • <div className="h-64">
        • <ResponsiveContainer>
          • <PieChart>
            • <Pie
              • data={data}
              • dataKey="moisAlloues"
              • nameKey="beneficiaire"
              • label={({ name, value }) => ${name}: ${value}}
            • >
              • {data.map((entry, index) => (
                • <Cell key={entry.beneficiaire} fill={COLORS[index % COLORS.length]} />
              • ))}
            • </Pie>
            • <Tooltip />
          • </PieChart>
        • </ResponsiveContainer>
      • </div>
    • </CardContent>
  • </Card>

• <Card>
  • <CardHeader>
    • <CardTitle>Consommation Mensuelle</CardTitle>
  • </CardHeader>
  • <CardContent>
    • <div className="h-64">
      • <ResponsiveContainer>
        • <BarChart
          • data={['Jan', 'Fév', 'Mar'].map(mois => ({
            • mois,
            • ...data.reduce((acc, client) => ({
              • ...acc,
              • [client.beneficiaire]: client.moisConsommes[mois]
            • }), {})
          • }))}
        • >
          • <CartesianGrid strokeDasharray="3 3" />
          • <XAxis dataKey="mois" />
          • <YAxis />
          • <Tooltip />
          • <Legend />
          • {data.map((client, index) => (
            • <Bar
              • key={client.beneficiaire}
              • dataKey={client.beneficiaire}
              • fill={COLORS[index % COLORS.length]}
            • />
          • ))}
        • </BarChart>
      • </ResponsiveContainer>
    • </div>
  • </CardContent>
• </Card>
• </div>

• <Card>
  • <CardHeader>
    • <CardTitle>Suivi Détaillé</CardTitle>
  • </CardHeader>
  • <CardContent>
    • <table className="w-full">
      • <thead>
        • <tr>
          • <th className="border p-2">Bénéficiaire</th>
          • <th className="border p-2">Mois Alloués</th>
          • <th className="border p-2">Consommés</th>
          • <th className="border p-2">Restants</th>
          • <th className="border p-2">% Utilisé</th>
        • </tr>
      • </thead>
      • <tbody>
        • {clientsRestants.map((item) => {
          • const totalConsomme = Object.values(item.moisConsommes)
            • .reduce((a, b) => a + b, 0);
          • const pourcentageUtilise = ((totalConsomme / item.moisAlloues) * 100).toFixed(1);
          • return (
            • <tr key={item.beneficiaire}>
              • <td className="border p-2">{item.beneficiaire}</td>
              • <td className="border p-2">{item.moisAlloues}</td>
              • <td className="border p-2">{totalConsomme}</td>
              • <td className="border p-2">{item.restant}</td>
              • <td className="border p-2">{pourcentageUtilise}%</td>
            • </tr>
          • );
        • })}
      • </tbody>
    • </table>
  • </CardContent>
• </Card>
• </div>
• );

};

---