From b8f82399e195a02bc9bace23bb8ec7fd2ee4db06 Mon Sep 17 00:00:00 2001 From: Leo dev Date: Fri, 11 Jul 2025 13:10:33 +0200 Subject: [PATCH] Overview panel --- assets/dashboard.css | 83 ++++++++++++++++++++++++++++---- assets/login.css | 107 ++++++++++++++++++++++-------------------- src/components/mod.rs | 9 ++++ src/dashboard.rs | 17 +++++-- 4 files changed, 152 insertions(+), 64 deletions(-) diff --git a/assets/dashboard.css b/assets/dashboard.css index 3459e27..b41fdf5 100644 --- a/assets/dashboard.css +++ b/assets/dashboard.css @@ -83,22 +83,40 @@ body { width: 100%; } -@media (max-width: 1300px) { - .summary-container { - grid-template-columns: repeat(2, 1fr); - } +.overview-card { + background-color: #fff; + box-sizing: border-box; + padding: 1.5rem; + border-radius: 10px; + width: 650px; +} - .overview-container { - flex-direction: column; - } +.overview-card h2 { + margin: 0; + padding: 0; + margin-bottom: 20px; + display: flex; + gap: 7px; +} - .dashboard-container { - padding-left: 25px; - } +.overview-card h2 svg { + 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; +} diff --git a/assets/login.css b/assets/login.css index d5cc283..9b8432b 100644 --- a/assets/login.css +++ b/assets/login.css @@ -1,73 +1,78 @@ +body { + color: white; + background-color: black; +} + #login_wrapper { - position: relative; - height: 100vh; - width: 100vw; - display: flex; - justify-content: center; - align-items: center; - overflow: hidden; + position: relative; + height: 100vh; + width: 100vw; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; } #background_img { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - object-fit: cover; - z-index: -1; - user-select: none; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + object-fit: cover; + z-index: -1; + user-select: none; } #login_container { - background-color: rgba(138, 138, 138, 0.143); - border-radius: 20px; - backdrop-filter: blur(20px); - padding: 38px; - margin: auto; - width: max-content; - height: max-content; - z-index: 1; + background-color: rgba(138, 138, 138, 0.143); + border-radius: 20px; + backdrop-filter: blur(20px); + padding: 38px; + margin: auto; + width: max-content; + height: max-content; + z-index: 1; } .field { - background-color: rgba(138, 138, 138, 0.353); - border: none; - border-radius: 10px; - height: 40px; - width: 350px; - color: white; - padding-left: 10px; - padding-right: 10px; + background-color: rgba(138, 138, 138, 0.353); + border: none; + border-radius: 10px; + height: 40px; + width: 350px; + color: white; + padding-left: 10px; + padding-right: 10px; } .field:focus { - border: none; - outline: 1px solid white; + border: none; + outline: 1px solid white; } body { - margin: 0; - padding: 0; + margin: 0; + padding: 0; } h1 { - width: max-content; - margin-left: auto; - margin-right: auto; + width: max-content; + margin-left: auto; + margin-right: auto; } button { - border: none; - outline: none; - background-color: white; - display: block; - margin-top: 20px; - margin-left: auto; - margin-right: auto; - width: max-content; - padding: 10px; - padding-left: 20px; - padding-right: 20px; - border-radius: 8px; -} \ No newline at end of file + border: none; + outline: none; + background-color: white; + display: block; + margin-top: 20px; + margin-left: auto; + margin-right: auto; + width: max-content; + padding: 10px; + padding-left: 20px; + padding-right: 20px; + border-radius: 8px; +} diff --git a/src/components/mod.rs b/src/components/mod.rs index 6f3f8b2..a279e21 100644 --- a/src/components/mod.rs +++ b/src/components/mod.rs @@ -151,3 +151,12 @@ pub fn RadialChart(percent: f64) -> Element { } } } + +#[component] +pub fn ProgressBar(percent: u8, id: Option) -> Element { + rsx! { + span { class: "progress-bar", id: id, + span { class: "progress", style: format!("width: {}%; background-color: currentColor;", percent.clamp(0, 100)) } + } + } +} diff --git a/src/dashboard.rs b/src/dashboard.rs index 7fe82b4..feeb64d 100644 --- a/src/dashboard.rs +++ b/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", - LineChart { data: vec![90, 20, 40, 90, 60], max: 100 } + div { class: "overview-card", + 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" } } }