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,73 +1,78 @@
+body {
+  color: white;
+  background-color: black;
+}
+
 #login_wrapper {
-    position: relative;
+  position: relative;
-    height: 100vh;
+  height: 100vh;
-    width: 100vw;
+  width: 100vw;
-    display: flex;
+  display: flex;
-    justify-content: center;
+  justify-content: center;
-    align-items: center;
+  align-items: center;
-    overflow: hidden;
+  overflow: hidden;
 }
 
 #background_img {
-    position: absolute;
+  position: absolute;
-    top: 0;
+  top: 0;
-    left: 0;
+  left: 0;
-    width: 100%;
+  width: 100%;
-    height: 100%;
+  height: 100%;
-    object-fit: cover;
+  object-fit: cover;
-    z-index: -1;
+  z-index: -1;
-    user-select: none;
+  user-select: none;
 }
 
 #login_container {
-    background-color: rgba(138, 138, 138, 0.143);
+  background-color: rgba(138, 138, 138, 0.143);
-    border-radius: 20px;
+  border-radius: 20px;
-    backdrop-filter: blur(20px);
+  backdrop-filter: blur(20px);
-    padding: 38px;
+  padding: 38px;
-    margin: auto;
+  margin: auto;
-    width: max-content;
+  width: max-content;
-    height: max-content;
+  height: max-content;
-    z-index: 1;
+  z-index: 1;
 }
 
 .field {
-    background-color: rgba(138, 138, 138, 0.353);
+  background-color: rgba(138, 138, 138, 0.353);
-    border: none;
+  border: none;
-    border-radius: 10px;
+  border-radius: 10px;
-    height: 40px;
+  height: 40px;
-    width: 350px;
+  width: 350px;
-    color: white;
+  color: white;
-    padding-left: 10px;
+  padding-left: 10px;
-    padding-right: 10px;
+  padding-right: 10px;
 }
 
 .field:focus {
-    border: none;
+  border: none;
-    outline: 1px solid white;
+  outline: 1px solid white;
 }
 
 body {
-    margin: 0;
+  margin: 0;
-    padding: 0;
+  padding: 0;
 }
 
 h1 {
-    width: max-content;
+  width: max-content;
-    margin-left: auto;
+  margin-left: auto;
-    margin-right: auto;
+  margin-right: auto;
 }
 
 button {
-    border: none;
+  border: none;
-    outline: none;
+  outline: none;
-    background-color: white;
+  background-color: white;
-    display: block;
+  display: block;
-    margin-top: 20px;
+  margin-top: 20px;
-    margin-left: auto;
+  margin-left: auto;
-    margin-right: auto;
+  margin-right: auto;
-    width: max-content;
+  width: max-content;
-    padding: 10px;
+  padding: 10px;
-    padding-left: 20px;
+  padding-left: 20px;
-    padding-right: 20px;
+  padding-right: 20px;
-    border-radius: 8px;
+  border-radius: 8px;
-}
+}

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" }
                     }
                 }