Update Dashboard.jsx

ajout du widget qui génère des rapports détaillés du site sur un csv

Front-end/src/pages/Admin/Dashboard.jsx

@@ -4,10 +4,45 @@ import { RadioTower, ArrowRight, BadgePlus, Settings } from "lucide-react";
 import { API_BASE_URL } from "../../config.js";
 import axios from "axios";
 
+const exportCSV = () => {
+  const headers = ["Catégorie", "Valeur"];
+  const rows = [
+    ["Consommation énergétique", "1372 kWh"],
+    ["Taux de connexion", "87%"],
+    ["Service", "Consultation des données météo"],
+    ["Service", "Alertes et suivi de consommation"],
+    ["Service", "Ajout d'objets connectés"],
+  ];
+
+  const csvContent =
+    "\uFEFF" +
+    [headers, ...rows]
+      .map((row) =>
+        row
+          .map((val) => `"${val.replace(/"/g, '""')}"`)
+          .join(",")
+      )
+      .join("\n");
+
+  const blob = new Blob([csvContent], {
+    type: "text/csv;charset=utf-8;",
+  });
+
+  const link = document.createElement("a");
+  link.href = URL.createObjectURL(blob);
+  link.setAttribute("download", "rapport_plateforme.csv");
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+};
+  
+
 const initialWidgets = [
   { id: 1, type: "summary" },
   { id: 2, type: "users" },
-  { id: 3, type: "objects" },
+  { id: 3, type: "reporting" }, 
+  { id: 4, type: "adminobjet" },
+  { id: 5, type: "objects" },
 ];
 
 function Dashboard() {
@@ -16,14 +51,14 @@ function Dashboard() {
   const [logs, setLogs] = useState([
     {
       id: 1,
-      username: "Alice",
+      username: "complexe",
-      action: "User added",
+      action: "Accès attribué",
       timestamp: new Date().toLocaleString(),
     },
     {
       id: 2,
-      username: "Bob",
+      username: "admin",
-      action: "Access assigned",
+      action: "Accès attribué",
       timestamp: new Date().toLocaleString(),
     },
   ]);
@@ -31,6 +66,10 @@ function Dashboard() {
     axios.get(`${API_BASE_URL}/users`).then((response) => {
       setUsers(response.data);
     });
+
+    axios.get(`${API_BASE_URL}/objets`).then((response) => {
+      setAdminObjects(response.data);
+    });
   }, []);
 
   const [adminObjects, setAdminObjects] = useState([
@@ -231,7 +270,7 @@ function Dashboard() {
                           key={obj.id}
                           className="border border-gray-200 p-2 rounded"
                         >
-                          <p className="font-medium">{obj.nom}</p>
+                          <p className="font-medium">{obj.name}</p>
                           <p className="text-sm text-gray-500">{obj.type}</p>
                           <p className="text-sm text-gray-500">{obj.status}</p>
                         </li>
@@ -245,6 +284,42 @@ function Dashboard() {
                     </button>
                   </div>
                 )}
+                {widget.type === "reporting" && (
+                  <div>
+                    <h2 className="text-xl font-semibold mb-4">Rapports et Statistiques</h2>
+
+                    <div className="mb-4">
+                      <p className="text-gray-700 mb-2">Générer des rapports d'utilisation :</p>
+                      <div className="flex gap-4">
+                        <button
+                          className="bg-indigo-600 text-white px-4 py-2 rounded-md hover:bg-indigo-700"
+                          onClick={() => exportCSV()}
+                        >
+                          Exporter en CSV
+                        </button>
+                      </div>
+                    </div>
+
+                    <div className="mt-4 space-y-2">
+                      <div>
+                        <h4 className="text-md font-medium">Consommation énergétique totale</h4>
+                        <p className="text-gray-600">1372 kWh cumulés (estimation)</p>
+                      </div>
+                      <div>
+                        <h4 className="text-md font-medium">Taux de connexion des utilisateurs</h4>
+                        <p className="text-gray-600">87% des utilisateurs actifs ce mois-ci</p>
+                      </div>
+                      <div>
+                        <h4 className="text-md font-medium">Services les plus utilisés</h4>
+                        <ul className="list-disc ml-6 text-gray-600">
+                          <li>Consultation des données météo</li>
+                          <li>Alertes et suivi de consommation</li>
+                          <li>Ajout d'objets connectés</li>
+                        </ul>
+                      </div>
+                    </div>
+                  </div>
+                )}
               </div>
             ))}
 
@@ -291,7 +366,13 @@ function Dashboard() {
                 >
                   Liste des Objets et Outils/Services
                 </button>
-              </div>
+                <button
+                  onClick={() => handleWidgetSelection("reporting")}
+                  className="px-4 py-2 bg-gray-200 hover:bg-gray-300 rounded-md text-left"
+                  >
+                  Rapports et Statistiques
+                </button>
+                </div>
               <button
                 onClick={() => setShowAddWidgetModal(false)}
                 className="mt-4 px-4 py-2 bg-red-500 text-white rounded-md w-full"