Merge pull request #144 from Riyad-Murad/staging

Staging

Author: Riyad-Murad

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>

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;