ViettechReport/SuperCms/Views/Home/Index.cshtml

@{
    ViewData["Title"] = "Home Page";
}

@using SuperCms.Controllers;
@using SuperCms.Models;

@model HomeViewModel

@{
    int pageNow = 1;
    if (Model.page != null)
    {
        pageNow = int.Parse(Model.page);
    }


    // calculator
    int newSub = 0, newSubBefore = 0;
    int deactive = 0, deactiveBefore = 0;
    int revenue = 0, revenueBefore = 0;
    int expense = 0, expenseBefore = 0;
    int totalSub = 0, totalSubBefore = 0;

    ConnDatas dataNow = Model.distributedByTimes[0].connDatas;
    dataNow.data.ForEach(x =>
    {
        if (x.expense != null)
        {
            revenue += int.Parse(x.revenue);
        }
    });
    dataNow.data.ForEach(x =>
    {
        if (x.expense != null)
        {
            expense += int.Parse(x.expense);
        }
    });

    dataNow.data.ForEach(x =>
        {
            if (x.expense != null)
            {
                revenue += int.Parse(x.revenue);
            }
        });
    dataNow.data.ForEach(x =>
    {
        if (x.expense != null)
        {
            revenue += int.Parse(x.revenue);
        }
    });
    dataNow.data.ForEach(x =>
    {
        if (x.expense != null)
        {
            revenue += int.Parse(x.revenue);
        }
    });

    ConnDatas dataBefore = Model.distributedByTimes[1].connDatas;
    dataBefore.data.ForEach(x =>
    {
        if (x.expense != null)
        {
            revenueBefore += int.Parse(x.revenue);
        }
    });
    dataBefore.data.ForEach(x =>
    {
        if (x.expense != null)
        {
            expenseBefore += int.Parse(x.expense);
        }
    });
    dataBefore.data.ForEach(x =>
    {
        if (x.expense != null)
        {
            totalSubBefore += int.Parse(x.totalSub);
        }
    });
    dataBefore.data.ForEach(x =>
    {
        if (x.expense != null)
        {
            newSubBefore += int.Parse(x.registerNew);
        }
    });
    dataBefore.data.ForEach(x =>
    {
        if (x.expense != null)
        {
            deactiveBefore += int.Parse(x.deactive);
        }
    });



    // percents
    double newSubP = 0, deactiveP = 0, revenueP = 0, expenseP = 0, totalSubP = 0;
    newSubP = newSub != 0 ? (newSub - newSubBefore) * 100 / newSub : 0;
    deactiveP = deactive != 0 ? (deactive - deactiveBefore) * 100 / deactive : 0;
    revenueP = revenue != 0 ? (revenue - revenueBefore) * 100 / revenue : 0;
    expenseP = expense != 0 ? (expense - expenseBefore) * 100 / expense : 0;
    totalSubP = totalSub != 0 ? (totalSub - totalSubBefore) * 100 / totalSub : 0;


    // get list date within a week
    List<String> listdate = new List<string>();
    for (int i = Model.listDate.Count - 1; i >= 1; i--)
    {
        listdate.Add(Model.listDate[i].ToString("dd/MM"));
    }

    // get all total value within a week
    List<int> listTotalRevenue = new List<int>();
    List<int> listTotalExpense = new List<int>();
    List<int> listTotalSub = new List<int>();
    List<int> listTotalNewRegister = new List<int>();
    List<int> listTotalDeactive = new List<int>();



    for (int i = 0; i < Model.distributedByTimes.Count; i++)
    {
        int newSubT = 0;
        int deactiveT = 0;
        int revenueT = 0;
        int expenseT = 0;
        int totalSubT = 0;

        ConnDatas data = Model.distributedByTimes[i].connDatas;
        data.data.ForEach(x =>
        {
            if (x.expense != null)
            {
                revenueT += int.Parse(x.revenue);
            }
        });
        data.data.ForEach(x =>
        {
            if (x.expense != null)
            {
                expenseT += int.Parse(x.expense);
            }
        });
        data.data.ForEach(x =>
        {
            if (x.expense != null)
            {
                totalSubT += int.Parse(x.totalSub);
            }
        });
        data.data.ForEach(x =>
        {
            if (x.expense != null)
            {
                newSubT += int.Parse(x.registerNew);
            }
        });
        data.data.ForEach(x =>
        {
            if (x.expense != null)
            {
                deactiveT += int.Parse(x.deactive);
            }
        });

        listTotalRevenue.Add(revenueT);
        listTotalExpense.Add(expenseT);
        listTotalSub.Add(totalSubT);
        listTotalNewRegister.Add(newSubT);
        listTotalDeactive.Add(deactiveT);
    }
}

<div class="app-content content">
    <div class="content-overlay"></div>
    <div class="content-wrapper">
        <div class="content-header row">
        </div>
        <div class="content-body">
            <!-- Stats -->
            <div class="row">
                <div class="col-xl-3 col-lg-6 col-12">
                    <div class="card card-btn">
                        <div class="card-content">
                            <div class="media align-items-stretch">
                                <div class="p-2 text-center bg-primary bg-darken-2">
                                    <i class="icon-camera font-large-2 white"></i>
                                </div>
                                <div class="p-2 bg-gradient-x-primary white media-body">
                                    <h5>Services</h5>
                                    <h5 class="text-bold-400 mb-0"> @Model.totalServices.data.Count</h5>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-3 col-lg-6 col-12">
                    <div class="card">
                        <div class="card-content">
                            <div class="media align-items-stretch">
                                <div class="p-2 text-center bg-danger bg-darken-2">
                                    <i class="icon-user font-large-2 white"></i>
                                </div>
                                <div class="p-2 bg-gradient-x-danger white media-body">
                                    <h5>New subs</h5>
                                    <h5 class="text-bold-400 mb-0">
                                        @string.Format("{0:#,0}", newSub)
                                        <span class="float-right"><i class="feather icon-arrow-down "></i> @(string.Format("{0:#,0}", newSub - newSubBefore)) (@newSubP%) </span>
                                    </h5>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-3 col-lg-6 col-12">
                    <div class="card">
                        <div class="card-content">
                            <div class="media align-items-stretch">
                                <div class="p-2 text-center bg-warning bg-darken-2">
                                    <i class="icon-basket-loaded font-large-2 white"></i>
                                </div>
                                <div class="p-2 bg-gradient-x-warning white media-body">
                                    <h5>Total subs</h5>
                                    <h5 class="text-bold-400 mb-0">
                                        @string.Format("{0:#,0}", totalSub)
                                        <span class="float-right"><i class="feather icon-arrow-down "></i> @(string.Format("{0:#,0}", totalSub - totalSubBefore)) (@totalSubP%) </span>
                                    </h5>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-3 col-lg-6 col-12">
                    <div class="card">
                        <div class="card-content">
                            <div class="media align-items-stretch">
                                <div class="p-2 text-center bg-success bg-darken-2">
                                    <i class="icon-wallet font-large-2 white"></i>
                                </div>
                                <div class="p-2 bg-gradient-x-success white media-body">
                                    <h5>Total Deactive</h5>
                                    <h5 class="text-bold-400 mb-0">
                                        @string.Format("{0:#,0}", deactive)
                                        <span class="float-right"><i class="feather icon-arrow-down "></i> @(string.Format("{0:#,0}", deactive - deactiveBefore)) (@deactiveP%) </span>
                                    </h5>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--/ Stats -->
            <!--Product sale & buyers -->
            <div class="row match-height">
                <div class="col-xl-12 col-lg-12">
                    <div class="card" style="height: 460px;">
                        <div class="card-header">
                            <h4 class="card-title">Total revenue</h4>
                            <a class="heading-elements-toggle"><i class="fa fa-ellipsis-v font-medium-3"></i></a>
                            <div class="heading-elements">
                                <ul class="list-inline mb-0">
                                    <li><a data-action="reload"><i class="feather icon-rotate-cw"></i></a></li>
                                    <li><a data-action="expand"><i class="feather icon-maximize"></i></a></li>
                                </ul>
                            </div>
                        </div>
                        <div class="card-content">
                            <div class="card-body height-400">
                                <div class="chartjs-size-monitor"><div class="chartjs-size-monitor-expand"><div class=""></div></div><div class="chartjs-size-monitor-shrink"><div class=""></div></div></div>
                                <canvas id="chart-weekly-report" style="display: block; width: 839px; height: 358px;" width="839" height="358" class="chartjs-render-monitor"></canvas>
                            </div>
                        </div>
                    </div>
                </div>
                @*<div class="col-xl-4 col-lg-12">
                <div class="card" style="height: 460px;">
                <div class="card-content">
                <div class="card-body sales-growth-chart height-350">
                <div class="chartjs-size-monitor"><div class="chartjs-size-monitor-expand"><div class=""></div></div><div class="chartjs-size-monitor-shrink"><div class=""></div></div></div>
                <canvas id="chart-hourly-revenue" width="384" height="308" class="chartjs-render-monitor" style="display: block; width: 384px; height: 308px;"></canvas>
                </div>
                </div>
                <div class="card-footer">
                <div class="chart-title mb-1 text-center">
                <h6>Hourly revenue.</h6>
                </div>
                </div>
                </div>
                </div>*@
            </div>
            <!--Recent Orders & Monthly Salse -->
            <div class="row match-height">
                <div class="col-xl-12 col-lg-12">
                    <div class="card">
                        <div class="card-header">
                            <h4 class="card-title">Yesterday Report @Model.distributedByTimes[0].time</h4>
                            <a class="heading-elements-toggle"><i class="fa fa-ellipsis-v font-medium-3"></i></a>
                            <div class="heading-elements">
                                <ul class="list-inline mb-0">
                                    <li><a data-action="reload"><i class="feather icon-rotate-cw"></i></a></li>
                                    <li><a data-action="expand"><i class="feather icon-maximize"></i></a></li>
                                </ul>
                            </div>
                        </div>
                        <div class="card-content">

                            <div class="table-responsive">
                                <table id="db-table-detail-report" class="table table-hover mb-0 ps-container ps-theme-default">
                                    <thead>
                                        <tr>
                                            <th>No.</th>
                                            <th>Service</th>
                                            <th>Revenue</th>
                                            <th>Paid money</th>
                                            <th>Count sub</th>
                                            <th>Register new</th>
                                            <th>Deactive</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @{
                                            for (int s = 0; s < Model.distributedDatas.Count; s++)
                                            {
                                                ConnConfig service = Model.distributedDatas[s].service;
                                                ConnData data = Model.connDatasNow.data.Find(x => x.configID == service.id);
                                                if (data != null)
                                                {
                                                    <tr>
                                                        <td class="text-truncate">@(s + 1 + (pageNow - 1) * int.Parse(UtilsController.Constant.NUMBER_ROW_ON_PAGE))</td>
                                                        <td class="text-truncate"><a href="/Report/Admin/Report?serviceId=237">@service.serviceName</a></td>
                                                        <td class="text-truncate">@data.revenue</td>
                                                        <td class="text-truncate">@data.expense</td>
                                                        <td class="text-truncate">@data.totalSub</td>
                                                        <td class="text-truncate">@data.registerNew</td>
                                                        <td class="text-truncate">@data.deactive</td>
                                                    </tr>
                                                }
                                                else
                                                {
                                                    <tr>
                                                        <td class="text-truncate">@(s + 1)</td>
                                                        <td class="text-truncate"><a href="/Report/Admin/Report?serviceId=237">@service.serviceName</a></td>
                                                        <td class="text-truncate">0</td>
                                                        <td class="text-truncate">0</td>
                                                        <td class="text-truncate">0</td>
                                                        <td class="text-truncate">0</td>
                                                        <td class="text-truncate">0</td>
                                                    </tr>
                                                }

                                            }
                                        }
                                    </tbody>
                                </table>

                                <style>
                                    .pagination-style {
                                        max-width: 1200px;
                                        margin: auto;
                                        position: relative;
                                        padding: 0;
                                        float: none;
                                        padding-right: 0;
                                        text-align: center;
                                    }

                                    .pagination-active {
                                        background: #337ab7 !important;
                                        color: white !important;
                                    }

                                    .pagination-disable {
                                        pointer-events: none;
                                    }
                                </style>

                                @{
                                    int totalPage = Model.totalPage != null ? int.Parse(Model.totalPage) : 1;

                                    <div class="category-post-pagination col-xs-12 pagination-style">
                                        @{
                                            <ul class="pagination clearfix pagination-ul">
                                                <li class="pagination-prev">
                                                    <a href="/Home?page=1">‹‹</a>
                                                </li>
                                                <li class="pagination-prev @(pageNow == 1 ? "disabled pagination-disable" : "")">
                                                    <a href="/Home?page=@(pageNow-1)">‹</a>
                                                </li>
                                                @{
                                                    if (totalPage <= 4)
                                                    {
                                                        for (int k = 1; k <= totalPage; k++)
                                                        {
                                                            <li class="@(pageNow == k ? "current" : "")">
                                                                <a class="@(pageNow == k ? "pagination-active" : "")" href="/Home?page=@k">@k</a>
                                                            </li>
                                                        }
                                                    }
                                                    else if (pageNow <= totalPage - 4)
                                                    {
                                                        for (int k = pageNow; (k <= pageNow + 4 && k <= totalPage); k++)
                                                        {
                                                            <li class="@(pageNow == k ? "current" : "")">
                                                                <a class="@(pageNow == k ? "pagination-active" : "")" href="/Home?page=@k">@k</a>
                                                            </li>
                                                        }
                                                    }
                                                    else
                                                    {
                                                        for (int k = totalPage - 4; k <= totalPage; k++)
                                                        {
                                                            <li class="@(pageNow == k ? "current" : "")">
                                                                <a class="@(pageNow == k ? "pagination-active" : "")" href="/Home?page=@k">@k</a>

                                                            </li>
                                                        }
                                                    }
                                                }
                                                <li class="pagination-next @(pageNow == totalPage ? "disabled pagination-disable" : "")">
                                                    <a href="/Home?page=@(pageNow+1)">›</a>
                                                </li>
                                                <li class="pagination-next ">
                                                    <a href="/Home?page=@totalPage">››</a>
                                                </li>
                                            </ul>
                                        }
                                    </div>
                                }

                            </div>
                        </div>
                    </div>
                </div>
                @*<div class="col-xl-4 col-lg-12">
                </div>*@
            </div>
        </div>
    </div>
</div>

@{
    <script>
        var ar = @Html.Raw(Json.Serialize(listdate));
        var revenue = @Html.Raw(Json.Serialize(listTotalRevenue));
        var expense = @Html.Raw(Json.Serialize(listTotalExpense));
        var totalSub = @Html.Raw(Json.Serialize(listTotalSub));
        var registerNew = @Html.Raw(Json.Serialize(listTotalNewRegister));
        var deactive = @Html.Raw(Json.Serialize(listTotalDeactive));

        $(document).ready(function () {
            LoadTest(
                ar, revenue, expense, totalSub, registerNew, deactive);
        });
    </script>

}
<script>

    //$(document).ready(function () {
    //    LoadTest(
    //        ["08/11", "09/11", "10/11", "11/11", "12/11", "13/11", "14/11", "15/11", "16/11", "17/11"],
    //        [148698, 168854, 166536, 173255, 176405, 176500, 171198, 167173, 184392, 187501],
    //        [5528, 11408, 17125, 14227, 16971, 20312, 22559, 28793, 15976, 4895],
    //        [824809, 857774, 859151, 859781, 859589, 859211, 859074, 859062, 858962, 858698],
    //        [169, 23539, 27837, 29162, 31528, 36531, 51711, 63034, 47594, 2330],
    //        [2423, 21655, 26451, 28518, 31706, 36881, 51818, 63028, 47650, 2560]);

    //    load_chart_hourly(
    //        ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23"],
    //        [25433, 24415, 30803, 15025, 2844, 1913, 1790, 3785, 4628, 4023, 2767, 3143, 4808, 5043, 7470, 4662, 1636, 11195, 15209, 10586, 3374, 1785, 1026, 113]);
    //});
</script>