From c33e8f26781d3fb4e3c7d17362218e7d82bf99d2 Mon Sep 17 00:00:00 2001
From: "Samuele E. Locatelli" <samuele.locatelli@egalware.com>
Date: Sat, 6 Sep 2025 07:10:14 +0000
Subject: [PATCH] Modifica visualizzazione statistiche/elenco modelli

---
 frontend/src/ChatLayout.jsx    |   6 +-
 frontend/src/ModelOverview.jsx | 124 +++++++++++++++++++--------------
 2 files changed, 71 insertions(+), 59 deletions(-)

diff --git a/frontend/src/ChatLayout.jsx b/frontend/src/ChatLayout.jsx
index 60a271b..805db2a 100644
--- a/frontend/src/ChatLayout.jsx
+++ b/frontend/src/ChatLayout.jsx
@@ -6,7 +6,6 @@ import ChatInput from "./ChatInput";
 import SessionTable from "./SessionTable";
 import NoSessionBox from "./NoSessionBox";
 import ModelOverview from "./ModelOverview";
-import LmStats from "./LmStats";
 
 export default function ChatLayout({
   theme,
@@ -76,10 +75,7 @@ export default function ChatLayout({
 
       <div className="flex-grow-1 overflow-auto" style={{ minHeight: 0 }}>
         {showModelPage ? (
-          <div>
-            <LmStats />
-            <ModelOverview onBackToChat={() => setShowModelPage(false)} />
-          </div>
+          <ModelOverview onBackToChat={() => setShowModelPage(false)} />
         ) : (
                 /* AREA SCROLLABILE */
             <ChatWindow messages={messages} loading={loading} theme={theme} />
diff --git a/frontend/src/ModelOverview.jsx b/frontend/src/ModelOverview.jsx
index 9728c8d..7aaade1 100644
--- a/frontend/src/ModelOverview.jsx
+++ b/frontend/src/ModelOverview.jsx
@@ -1,12 +1,14 @@
 // src/ModelOverview.jsx
 
 import React, { useEffect, useState } from "react";
+import LmStats from "./LmStats";
 
 export default function ModelOverview({ onBackToChat }) {
   const [defaultModel, setDefaultModel] = useState("");
   const [modelInfo, setModelInfo] = useState([]);
   const [searchTerm, setSearchTerm] = useState("");
   const [loading, setLoading] = useState(false);
+  const [showStats, setShowStats] = useState(false); // 👈 nuovo stato toggle
 
   const fetchModelData = async () => {
     setLoading(true);
@@ -58,63 +60,77 @@ export default function ModelOverview({ onBackToChat }) {
         </p>
       </div>
 
-      <div className="d-flex justify-content-between mb-3">
-        <button className="btn btn-outline-primary" onClick={onBackToChat}>
-          ⬅ Torna alla chat
-        </button>
-        <button className="btn btn-outline-success" onClick={updateModelData}>
-          🔄 Aggiorna dati modelli
-        </button>
+      <div className="d-flex justify-content-between align-items-center mb-3">
+        <div className="btn-group">
+          <button className="btn btn-outline-primary" onClick={onBackToChat}>
+            ⬅ Torna alla chat
+          </button>
+          <button className="btn btn-outline-success" onClick={updateModelData}>
+            🔄 Aggiorna dati modelli
+          </button>
+        </div>
+        <div>
+          <button
+            className={`btn ${showStats ? "btn-secondary" : "btn-outline-secondary"}`}
+            onClick={() => setShowStats(prev => !prev)}
+          >
+            {showStats ? "📋 Mostra elenco modelli" : "📊 Mostra statistiche"}
+          </button>
+        </div>
       </div>
 
-      <div className="mb-3">
-        <input
-          type="text"
-          className="form-control"
-          placeholder="🔍 Cerca modello per nome..."
-          value={searchTerm}
-          onChange={(e) => setSearchTerm(e.target.value)}
-        />
-      </div>
+      {showStats ? (
+        <LmStats />
+      ) : (
+        <>
+          <div className="mb-3">
+            <input
+              type="text"
+              className="form-control"
+              placeholder="🔍 Cerca modello per nome..."
+              value={searchTerm}
+              onChange={(e) => setSearchTerm(e.target.value)}
+            />
+          </div>
 
-      <div className="table-responsive">
-        <table className="table table-bordered table-hover align-middle">
-          <thead className="table-light">
-            <tr>
-              <th>Nome</th>
-              <th>Descrizione</th>
-	      {/*<th>Anno</th>*/}
-              <th>Caratteristiche</th>
-            </tr>
-          </thead>
-          <tbody>
-            {loading && (
-              <tr>
-                <td colSpan="4" className="text-center">Caricamento…</td>
-              </tr>
-            )}
-            {!loading && filteredModels.length === 0 && (
-              <tr>
-                <td colSpan="4" className="text-center">Nessun modello trovato</td>
-              </tr>
-            )}
-            {!loading && filteredModels.map((model) => (
-              <tr key={model.name}>
-                <td>{model.name}</td>
-                <td>{model.description || "—"}</td>
-		{/*<td>{model.year || "—"}</td>*/}
-                <td>
-                  <ul className="mb-0 small">
-                    {Array.isArray(model.features) && model.features.length > 0
-                      ? model.features.map((f, i) => <li key={i}>{f}</li>)
-                      : <li>—</li>}
-                  </ul>
-                </td>
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      </div>
+          <div className="table-responsive">
+            <table className="table table-bordered table-hover align-middle">
+              <thead className="table-light">
+                <tr>
+                  <th>Nome</th>
+                  <th>Descrizione</th>
+                  <th>Caratteristiche</th>
+                </tr>
+              </thead>
+              <tbody>
+                {loading && (
+                  <tr>
+                    <td colSpan="3" className="text-center">Caricamento…</td>
+                  </tr>
+                )}
+                {!loading && filteredModels.length === 0 && (
+                  <tr>
+                    <td colSpan="3" className="text-center">Nessun modello trovato</td>
+                  </tr>
+                )}
+                {!loading && filteredModels.map((model) => (
+                  <tr key={model.name}>
+                    <td>{model.name}</td>
+                    <td>{model.description || "—"}</td>
+                    <td>
+                      <ul className="mb-0 small">
+                        {Array.isArray(model.features) && model.features.length > 0
+                          ? model.features.map((f, i) => <li key={i}>{f}</li>)
+                          : <li>—</li>}
+                      </ul>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </>
+      )}
     </div>
   );
 }