From 5a72f5bde786e6b0d46ebdc88bb85e5a324d646d Mon Sep 17 00:00:00 2001
From: "hualin.zhu" <neo.js.cn@gmail.com>
Date: Wed, 13 Nov 2024 21:26:11 +0800
Subject: [PATCH] Update Dashboard.razor

---
 src/Server.UI/Pages/Dashboard/Dashboard.razor | 148 ++++++++++++++++++
 1 file changed, 148 insertions(+)

diff --git a/src/Server.UI/Pages/Dashboard/Dashboard.razor b/src/Server.UI/Pages/Dashboard/Dashboard.razor
index b18816f63..b6ac400b7 100644
--- a/src/Server.UI/Pages/Dashboard/Dashboard.razor
+++ b/src/Server.UI/Pages/Dashboard/Dashboard.razor
@@ -6,7 +6,155 @@
 
 <MudContainer MaxWidth="MaxWidth.Large">
     <div class="@ContentClassNames">
+        <MudPaper Class="pa-4 mb-3">
+            <style>
+               
+                .circle {
+                    width: 0.5rem;
+                    height: 0.5rem;
+                    display: inline-block;
+                }
+
+                .rounded-circle{
+                    border-radius: 50%;
+                }
+                .bg-success {
+                    background-color: #28a745 !important;
+                }
+                .bg-warning {
+                    background-color: #ffc107 !important;
+                }
+
+                .bg-primary {
+                    background-color: #0d6efd !important;
+                }
+
+                .bg-danger {
+                    background-color: #dc3545 !important;
+                }
+
+                .bg-secondary {
+                    background-color: #6c757d !important;
+                }
+
+                .bg-dark {
+                    background-color: #343a40 !important;
+                }
+
+                .bar-label {
+                    font-size: .625rem;
+                    color: #6c757d;
+                }
+
+                .text-nowrap {
+                    white-space: nowrap;
+                }
+
+                .fw-semibold {
+                    font-weight: 600;
+                }
+
+                .small, small {
+                    font-size: .875em;
+                }
+
+                .progress {
+                    background-color: #e9ecef;
+                    border-radius: 0.25rem;
+                    overflow: hidden;
+                    height: 8px;
+                    display: flex;
+                }
+
+                .progress-bar {
+                    height: 100%;
+                    transition: width 0.6s ease;
+                }
+                @@media (max-width: 850px) {
+                    .flex-row
+
+                {
+                    flex-wrap: wrap;
+                }
+
+                }
+
+                .fw-bold {
+                    font-weight: 700 !important;
+                }
+
+                .fs-5 {
+                    font-size: 1.25rem !important;
+                }
+            </style>
+            <div class="d-flex flex-row gap-3">
+                <div class="d-flex flex-column">
+                    <div class="text-muted text-nowrap small">Invoiced amount</div>
+                    <div class="fs-5 fw-bold text-nowrap">1,167,986 EUR</div>
+                </div>
+                <div class="d-flex flex-column flex-grow-1 gap-3">
+                    <div class="d-flex flex-row flex-grow-1">
+                        <div class="d-flex flex-column justify-content-between align-center mt-2 flex-grow-1">
+                            <div class="d-flex align-center gap-2">
+                                <div class="circle bg-success rounded-circle" ></div>
+                                <span class="bar-label text-nowrap">Paid in full</span>
+                            </div>
+                            <div class="text-nowrap fw-semibold small">789,238 EUR</div>
+                        </div>
+                        <div class="d-flex flex-column justify-content-between align-center mt-2 flex-grow-1">
+                            <div class="d-flex align-center gap-2">
+                                <div class="circle bg-primary rounded-circle" ></div>
+                                <span class="bar-label text-nowrap">Awaiting payment</span>
+                            </div>
+                            <div class="text-nowrap fw-semibold small">244,900 EUR</div>
+                        </div>
+                        <div class="d-flex flex-column justify-content-between align-center mt-2 flex-grow-1">
+                            <div class="d-flex align-center gap-2">
+                                <div class="circle bg-warning rounded-circle" ></div>
+                                <span class="bar-label text-nowrap">Overdue 1-6 days</span>
+                            </div>
+                            <div class="text-nowrap fw-semibold small">74,808 EUR</div>
+                        </div>
+                        <div class="d-flex flex-column justify-content-between align-center mt-2 flex-grow-1">
+                            <div class="d-flex align-center gap-2">
+                                <div class="circle bg-danger rounded-circle" ></div>
+                                <span class="bar-label text-nowrap">Overdue 7-13 days</span>
+                            </div>
+                            <div class="text-nowrap fw-semibold small">32,221 EUR</div>
+                        </div>
+                        <div class="d-flex flex-column justify-content-between align-center mt-2 flex-grow-1">
+                            <div class="d-flex align-center gap-2">
+                                <div class="circle bg-secondary rounded-circle" ></div>
+                                <span class="bar-label text-nowrap">Overdue 14-29 days</span>
+                            </div>
+                            <div class="text-nowrap fw-semibold small">17,338 EUR</div>
+                        </div>
+                        <div class="d-flex flex-column justify-content-between align-center mt-2 flex-grow-1">
+                            <div class="d-flex align-center gap-2">
+                                <div class="circle bg-dark rounded-circle" ></div>
+                                <span class="bar-label text-nowrap">Overdue 30 days or more</span>
+                            </div>
+                            <div class="text-nowrap fw-semibold small">9,481 EUR</div>
+                        </div>
+                    </div>
+                    <div class="progress bg-body mb-2" style="height: 8px;">
+                        <div class="progress-bar bg-success" role="progressbar" style="width: 68%;" aria-valuenow="68" aria-valuemin="0" aria-valuemax="100"></div>
+                        <div class="progress-bar bg-primary" role="progressbar" style="width: 21%;" aria-valuenow="21" aria-valuemin="0" aria-valuemax="100"></div>
+                        <div class="progress-bar bg-warning" role="progressbar" style="width: 6%;" aria-valuenow="6" aria-valuemin="0" aria-valuemax="100"></div>
+                        <div class="progress-bar bg-danger" role="progressbar" style="width: 3%;" aria-valuenow="3" aria-valuemin="0" aria-valuemax="100"></div>
+                        <div class="progress-bar bg-secondary" role="progressbar" style="width: 1%;" aria-valuenow="1" aria-valuemin="0" aria-valuemax="100"></div>
+                        <div class="progress-bar bg-dark" role="progressbar" style="width: 1%;" aria-valuenow="1" aria-valuemin="0" aria-valuemax="100"></div>
+                    </div>
+                </div>
+               
+            </div>
+   
+     
+   
+</MudPaper>
         <div class="lp-app-grid">
+            
+
             <MudPaper Class="py-4 px-6 rounded-lg d-flex align-center">
                 <div class="flex-grow-1">
                     <MudText Typo="Typo.h6">@L["Graphite on roof"]</MudText>