این صفحه ادمینه منه و من میخوام چندتا بخش بهش اضافه کنم میشه اینو برام یه طور خیلی شیک و مدرن طراحی کنی 
میخوام این تغییراتو انجام بدی:

1-اول اینکه زیر قسمت کار ها با یه طراحی خیلی مدرن و شیک یه نمودار باشه که فروش ماهانه نمایش بده و کنارش یه بخش برای نوتیف هایی باشه که چه فروشنده هایی ثبت نام کردن

2-بعدش سه تا کارد زیبا باشه که فکر میکنی سه تا چیز دیگه نیازه هم باشه داخلش

3-زیر این بخش ها پر فروش ترین محصولات با یه جدول و ساختار زیبا و مدرن باشه 

همه اینا میخوام با انمیشن  و طراحی جذاب و یوزرفرندلی باشه

@page "/admin/dashboard"
@using AsetcoMarket.Components.Admin.Shared
@using AsetcoMarket.Features.Dashboard
@inherits AdminPageBase
@inject IMediator Mediator

<MudGrid Justify="Justify.SpaceBetween" Class="mb-3">
    <MudItem xs="6" Class="text-end">
        <MudText Typo="Typo.h5">داشبورد مدیریتی</MudText>
    </MudItem>
    <MudItem xs="6" Style="justify-items: left;">
        <MudBreadcrumbs Items="_items"></MudBreadcrumbs>
    </MudItem>
</MudGrid>

@if (_statistics == null)
{
    <div class="d-flex justify-center mt-10">
        <MudProgressCircular Color="Color.Primary" Indeterminate="true" />
    </div>
}
else
{
    <MudGrid Class="mt-6" Spacing="4">
        <!-- باکس تعداد محصولات -->
        <MudItem xs="12" sm="3">
            <MudPaper Class="pa-6 rounded-lg" Elevation="10" Style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">
                <div class="d-flex align-center">
                    <MudIcon Icon="@Icons.Material.Filled.ShoppingBasket" Size="Size.Large" Class="ml-3" Style="color: white;" />
                    <div>
                        <MudText Typo="Typo.subtitle2" Style="color: white; opacity: 0.9;">تعداد محصولات</MudText>
                        <MudText Typo="Typo.h6" Style="color: white; font-weight: 700;">@_statistics.TotalProducts.ToString("N0")</MudText>
                    </div>
                </div>
                <MudText Class="mt-2" Style="color: white; opacity: 0.8; font-size: 0.8rem;">
                    <MudIcon Icon="@Icons.Material.Filled.TrendingUp" Size="Size.Small" Class="ml-1" />
                    @_productsGrowth این ماه
                </MudText>
            </MudPaper>
        </MudItem>

        <!-- باکس مقدار فروش -->
        <MudItem xs="12" sm="3">
            <MudPaper Class="pa-6 rounded-lg" Elevation="10" Style="background: linear-gradient(135deg, #a18cd1 0%, #fbc2eb 100%);">
                <div class="d-flex align-center">
                    <MudIcon Icon="@Icons.Material.Filled.AttachMoney" Size="Size.Large" Class="ml-3" Style="color: white;" />
                    <div>
                        <MudText Typo="Typo.subtitle2" Style="color: white; opacity: 0.9;">فروش کل</MudText>
                        <MudText Typo="Typo.h6" Style="color: white; font-weight: 700;">@_statistics.TotalSales.ToString("N0") تومان</MudText>
                    </div>
                </div>
                <MudText Class="mt-2" Style="color: white; opacity: 0.8; font-size: 0.8rem;">
                    <MudIcon Icon="@Icons.Material.Filled.TrendingUp" Size="Size.Small" Class="ml-1" />
                    @_salesGrowth رشد نسبت به ماه گذشته
                </MudText>
            </MudPaper>
        </MudItem>

        <!-- باکس کارمزد سایت -->
        <MudItem xs="12" sm="3">
            <MudPaper Class="pa-6 rounded-lg" Elevation="10" Style="background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%);">
                <div class="d-flex align-center">
                    <MudIcon Icon="@Icons.Material.Filled.Payment" Size="Size.Large" Class="ml-3" Style="color: white;" />
                    <div>
                        <MudText Typo="Typo.subtitle2" Style="color: white; opacity: 0.9;">کارمزد سایت</MudText>
                        <MudText Typo="Typo.h6" Style="color: white; font-weight: 700;">@_statistics.TotalCommission.ToString("N0") تومان</MudText>
                    </div>
                </div>
                <MudText Class="mt-2" Style="color: white; opacity: 0.8; font-size: 0.8rem;">
                    <MudIcon Icon="@Icons.Material.Filled.Info" Size="Size.Small" Class="ml-1" />
                    @_commissionPercentage درصد از مبلغ فروش
                </MudText>
            </MudPaper>
        </MudItem>

        <!-- باکس تعداد فروشندگان -->
        <MudItem xs="12" sm="3">
            <MudPaper Class="pa-6 rounded-lg" Elevation="10" Style="background: linear-gradient(135deg, #84fab0 0%, #8fd3f4 100%);">
                <div class="d-flex align-center">
                    <MudIcon Icon="@Icons.Material.Filled.Groups" Size="Size.Large" Class="ml-3" Style="color: white;" />
                    <div>
                        <MudText Typo="Typo.subtitle2" Style="color: white; opacity: 0.9;">تعداد فروشندگان</MudText>
                        <MudText Typo="Typo.h6" Style="color: white; font-weight: 700;">@_statistics.TotalSellers.ToString("N0")</MudText>
                    </div>
                </div>
                <MudText Class="mt-2" Style="color: white; opacity: 0.8; font-size: 0.8rem;">
                    <MudIcon Icon="@Icons.Material.Filled.PersonAdd" Size="Size.Small" Class="ml-1" />
                    @_newSellers فروشنده جدید این ماه
                </MudText>
            </MudPaper>
        </MudItem>
    </MudGrid>
}

@code {
    private List<BreadcrumbItem> _items = new()
    {
        new("پنل مدیریت", href: "/admin/dashboard", icon: Icons.Material.Filled.Home)
    };

    private AdminDashboardStatisticsModel _statistics;
    private string _productsGrowth = "در حال محاسبه...";
    private string _salesGrowth = "در حال محاسبه...";
    private string _commissionPercentage = "در حال محاسبه...";
    private string _newSellers = "در حال محاسبه...";

    protected override async Task OnInitializedAsync()
    {
        await LoadDashboardStatistics();
    }

    private async Task LoadDashboardStatistics()
    {
        var result = await Mediator.Send(new GetAdminDashboardStatisticsQuery());
        if (result != null)
        {
            _statistics = result;

            // محاسبه درصدها و رشدها (می‌توانید این بخش را با داده‌های واقعی پر کنید)
            _commissionPercentage = _statistics.TotalSales > 0
                ? ((_statistics.TotalCommission / _statistics.TotalSales) * 100).ToString("F1")
                : "0";

            // در اینجا می‌توانید مقادیر رشد را از دیتابیس محاسبه کنید
            _productsGrowth = "۱۲ مورد جدید";
            _salesGrowth = "۱۵٪";
            _newSellers = "۳ فروشنده";
        }
    }
}