How to show pending, process, completed, cancelled orders status on dashboard

Hi,

In Admin Dashboard under common statistics currently Orders, return request, no. of customers and low qty products showing.
How to display the order status like
No. of pending orders
No. of process orders
No of Completed orders
No. of cancelled orders

can you please help me out in this.

1. add new properties here src\Presentation\Nop.Web\Areas\Admin\Models\Common\CommonStatisticsModel.cs

namespace Nop.Web.Areas.Admin.Models.Common
{
    public partial record CommonStatisticsModel : BaseNopModel
    {
        public int NumberOfOrders { get; set; }

        public int NumberOfCustomers { get; set; }

        public int NumberOfPendingReturnRequests { get; set; }

        public int NumberOfLowStockProducts { get; set; }

        public int NumberOfPendingOrder { get; set; }

        public int NumberOfProcessOrder { get; set; }

        public int NumberOfCompletedOrder { get; set; }

        public int NumberOfCancelledOrder { get; set; }
    }
}

2. add more code at here src\Presentation\Nop.Web\Areas\Admin\Factories\CommonModelFactory.cs

/// <summary>
        /// Prepare common statistics model
        /// </summary>
        /// <returns>
        /// A task that represents the asynchronous operation
        /// The task result contains the common statistics model
        /// </returns>
        public virtual async Task<CommonStatisticsModel> PrepareCommonStatisticsModelAsync()
        {
            var model = new CommonStatisticsModel
            {
                NumberOfOrders = (await _orderService.SearchOrdersAsync(pageIndex: 0, pageSize: 1, getOnlyTotalCount: true)).TotalCount,
                NumberOfPendingOrder = (await _orderService.SearchOrdersAsync(pageIndex: 0, pageSize: 1, getOnlyTotalCount: true, osIds:new List<int>() { (int)OrderStatus.Pending})).TotalCount,
                NumberOfProcessOrder = (await _orderService.SearchOrdersAsync(pageIndex: 0, pageSize: 1, getOnlyTotalCount: true, osIds:new List<int>() { (int)OrderStatus.Processing})).TotalCount,
                NumberOfCompletedOrder = (await _orderService.SearchOrdersAsync(pageIndex: 0, pageSize: 1, getOnlyTotalCount: true, osIds:new List<int>() { (int)OrderStatus.Complete})).TotalCount,
                NumberOfCancelledOrder = (await _orderService.SearchOrdersAsync(pageIndex: 0, pageSize: 1, getOnlyTotalCount: true, osIds:new List<int>() { (int)OrderStatus.Cancelled})).TotalCount
            };
...

3.  add those below of NumberOfLowStockProducts section after line no 91 here src\Presentation\Nop.Web\Areas\Admin\Views\Shared\Components\CommonStatistics\Deafult.cshtml

                <div class="col-lg-3 col-6">
                    <div class="small-box bg-yellow">
                        <div class="inner">
                            <h3>@Model.NumberOfPendingOrder</h3>
                            <p>@T("Admin.Dashboard.NumberOfPendingOrder")</p>
                        </div>
                        <div class="icon">
                            <i class="ion ion-pie-graph"></i>
                        </div>
                        <a asp-controller="Order" asp-action="List" class="small-box-footer">
                            @T("Admin.Dashboard.MoreInfo")
                            <i class="fas fa-arrow-circle-right"></i>
                        </a>
                    </div>
                </div>
                <div class="col-lg-3 col-6">
                    <div class="small-box bg-blue">
                        <div class="inner">
                            <h3>@Model.NumberOfProcessOrder</h3>
                            <p>@T("Admin.Dashboard.NumberOfProcessOrder")</p>
                        </div>
                        <div class="icon">
                            <i class="ion ion-pie-graph"></i>
                        </div>
                        <a asp-controller="Order" asp-action="List" class="small-box-footer">
                            @T("Admin.Dashboard.MoreInfo")
                            <i class="fas fa-arrow-circle-right"></i>
                        </a>
                    </div>
                </div>
                <div class="col-lg-3 col-6">
                    <div class="small-box bg-green">
                        <div class="inner">
                            <h3>@Model.NumberOfCompletedOrder</h3>
                            <p>@T("Admin.Dashboard.NumberOfCompletedOrder")</p>
                        </div>
                        <div class="icon">
                            <i class="ion ion-pie-graph"></i>
                        </div>
                        <a asp-controller="Order" asp-action="List" class="small-box-footer">
                            @T("Admin.Dashboard.MoreInfo")
                            <i class="fas fa-arrow-circle-right"></i>
                        </a>
                    </div>
                </div>
                <div class="col-lg-3 col-6">
                    <div class="small-box bg-red">
                        <div class="inner">
                            <h3>@Model.NumberOfCancelledOrder</h3>
                            <p>@T("Admin.Dashboard.NumberOfCancelledOrder")</p>
                        </div>
                        <div class="icon">
                            <i class="ion ion-pie-graph"></i>
                        </div>
                        <a asp-controller="Order" asp-action="List" class="small-box-footer">
                            @T("Admin.Dashboard.MoreInfo")
                            <i class="fas fa-arrow-circle-right"></i>
                        </a>
                    </div>
                </div>

Thank you so much...

Hi,

Thank you for sharing, its working fine now. I have one more thing please see this below.

Under dashboard below common statistics we have  orders & New customer chart, their we can see Year/Month/Week  on the top right corner of the chart. How can he have the same in the common statistics and here I need Year/Month/Week/Today  option.