Overview panel

assets/dashboard.css

@@ -83,22 +83,40 @@ body {
   width: 100%;
 }
 
-@media (max-width: 1300px) {
+.overview-card {
-  .summary-container {
+  background-color: #fff;
-    grid-template-columns: repeat(2, 1fr);
+  box-sizing: border-box;
-  }
+  padding: 1.5rem;
+  border-radius: 10px;
+  width: 650px;
+}
 
-  .overview-container {
+.overview-card h2 {
-    flex-direction: column;
+  margin: 0;
-  }
+  padding: 0;
+  margin-bottom: 20px;
+  display: flex;
+  gap: 7px;
+}
 
-  .dashboard-container {
+.overview-card h2 svg {
-    padding-left: 25px;
+  margin-top: auto;
-  }
+  margin-bottom: auto;
+}
+
+.overview-card div {
+  display: flex;
+  justify-content: space-between;
+}
+
+.overview-card div p {
+  margin-bottom: 8px;
+  font-size: 14px;
 }
 
 .search-container {
   display: flex;
+  flex-wrap: wrap;
   background-color: #fff;
   box-sizing: border-box;
   padding: 1.5rem;
@@ -172,3 +190,48 @@ body {
   padding: 0;
   margin: 0;
 }
+
+@media (max-width: 1300px) {
+  .summary-container {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .overview-container {
+    flex-direction: column;
+  }
+
+  .dashboard-container {
+    padding-left: 25px;
+  }
+
+  .server-container {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .overview-card {
+    width: 100%;
+  }
+}
+
+@media (max-width: 750px) {
+  .server-container {
+    grid-template-columns: repeat(1, 1fr);
+  }
+}
+
+.progress-bar {
+  display: block;
+  width: 100%;
+  height: 10px;
+  background-color: #e0e0e0;
+  border-radius: 10px;
+  overflow: hidden;
+}
+
+.progress {
+  display: block;
+  height: 100%;
+  background-color: #4f46e5;
+  transition: width 0.3s ease;
+  border-radius: 10px;
+}

assets/login.css

@@ -1,3 +1,8 @@
+body {
+  color: white;
+  background-color: black;
+}
+
 #login_wrapper {
   position: relative;
   height: 100vh;

src/components/mod.rs

@@ -151,3 +151,12 @@ pub fn RadialChart(percent: f64) -> Element {
         }
     }
 }
+
+#[component]
+pub fn ProgressBar(percent: u8, id: Option<String>) -> Element {
+    rsx! {
+        span { class: "progress-bar", id: id,
+            span { class: "progress", style: format!("width: {}%; background-color: currentColor;", percent.clamp(0, 100)) }
+        }
+    }
+}

src/dashboard.rs

@@ -1,6 +1,6 @@
 use dioxus::prelude::*;
 
-use crate::components::{sidebar::SideBar, LineChart};
+use crate::components::{sidebar::SideBar, LineChart, ProgressBar};
 use lucide_dioxus;
 
 const DASHBOARD_CSS: Asset = asset!("/assets/dashboard.css");
@@ -53,8 +53,19 @@ pub fn Dashboard() -> Element {
                         LineChart { data: vec![90, 20, 40, 90, 60], max: 100 }
                     }
 
-                    div { class: "performance-card",
+                    div { class: "overview-card",
-                        LineChart { data: vec![90, 20, 40, 90, 60], max: 100 }
+                        h2 {
+                            lucide_dioxus::Activity { size: 22, color: "currentColor" }
+                            "System Overview"
+                        }
+                        div { p { "Average CPU" } p { "10%" } }
+                        ProgressBar { percent: 10, id: "cpu" }
+
+                        div { p { "Average Memory" } p { "24%" } }
+                        ProgressBar { percent: 10, id: "ram" }
+
+                        div { p { "Average Storage" } p { "24%" } }
+                        ProgressBar { percent: 10, id: "issues" }
                     }
                 }