From f6bcc84b486cbf33f8dcb89a83180ad6dfb87863 Mon Sep 17 00:00:00 2001
From: Riyad Murad <riyadmurad01@gmail.com>
Date: Sun, 18 May 2025 03:29:22 +0300
Subject: [PATCH 1/2] provider_dashboard_fix: Modified All metrics chart to be
 scrollable

---
 .../ProviderDashboard/ProviderDashboard.jsx   | 38 ++++++++++++++++++-
 1 file changed, 37 insertions(+), 1 deletion(-)

diff --git a/amp-client/src/Pages/ProviderPages/ProviderDashboard/ProviderDashboard.jsx b/amp-client/src/Pages/ProviderPages/ProviderDashboard/ProviderDashboard.jsx
index 2d539fd..6590348 100644
--- a/amp-client/src/Pages/ProviderPages/ProviderDashboard/ProviderDashboard.jsx
+++ b/amp-client/src/Pages/ProviderPages/ProviderDashboard/ProviderDashboard.jsx
@@ -498,6 +498,42 @@ const ProviderDashboard = () => {
             </div>
 
             <div className="chart-widget all-metrics-widget">
+              <h3>All Metrics</h3>
+              {allMetrics && Object.keys(allMetrics).length > 0 ? (
+                <div className="scrollable-table">
+                  <table>
+                    <thead>
+                      <tr>
+                        <th>ID</th>
+                        <th>Voltage</th>
+                        <th>Current</th>
+                        <th>Power</th>
+                        <th>Energy</th>
+                        <th>Timestamp</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {allMetrics.map((metric) => (
+                        <tr key={metric.id}>
+                          <td>{metric.id}</td>
+                          <td>{metric.voltage}</td>
+                          <td>{metric.current}</td>
+                          <td>{metric.power}</td>
+                          <td>{metric.energy}</td>
+                          <td>
+                            {new Date(metric.created_at).toLocaleString()}
+                          </td>
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                </div>
+              ) : (
+                <p>No detailed metrics data available.</p>
+              )}
+            </div>
+
+            {/* <div className="chart-widget all-metrics-widget">
               <h3>All Metrics</h3>
               {allMetrics && Object.keys(allMetrics).length > 0 ? (
                 <table>
@@ -527,7 +563,7 @@ const ProviderDashboard = () => {
               ) : (
                 <p>No detailed metrics data available.</p>
               )}
-            </div>
+            </div> */}
           </div>
         )}
       </div>

From ab35fbbd427d371e21e62afb2080a304f59908c8 Mon Sep 17 00:00:00 2001
From: Riyad Murad <riyadmurad01@gmail.com>
Date: Sun, 18 May 2025 03:29:34 +0300
Subject: [PATCH 2/2] provider_dashboard_fix: Added stylings for All metrics
 chart to be scrollable

---
 .../ProviderDashboard/styles.css              | 23 +++++++++++++++++++
 1 file changed, 23 insertions(+)

diff --git a/amp-client/src/Pages/ProviderPages/ProviderDashboard/styles.css b/amp-client/src/Pages/ProviderPages/ProviderDashboard/styles.css
index 0b5d616..cf34789 100644
--- a/amp-client/src/Pages/ProviderPages/ProviderDashboard/styles.css
+++ b/amp-client/src/Pages/ProviderPages/ProviderDashboard/styles.css
@@ -79,6 +79,29 @@
   max-height: 450px;
 }
 
+.chart-widget.all-metrics-widget {
+  max-height: 450px;
+  overflow: hidden;
+}
+
+.scrollable-table {
+  max-height: 450px;
+  overflow-y: auto;
+  border: 1px solid #ccc;
+}
+
+.scrollable-table table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+.scrollable-table th,
+.scrollable-table td {
+  padding: 8px;
+  text-align: left;
+  border-bottom: 1px solid #eee;
+}
+
 .metric-card {
   flex: 1;
   min-width: 150px;