Skip to content

Commit

Permalink
Update Dashboard.razor
Browse files Browse the repository at this point in the history
  • Loading branch information
@neozhu
neozhu committed Nov 13, 2024
1 parent a2308b6 commit 5a72f5b
Showing 1 changed file with 148 additions and 0 deletions.
148 changes: 148 additions & 0 deletions src/Server.UI/Pages/Dashboard/Dashboard.razor
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down

0 comments on commit 5a72f5b

Please sign in to comment.