cost makeup report

Controllers/VehicleController.cs

@@ -384,7 +384,7 @@ namespace CarCareTracker.Controllers
         [HttpGet]
         public IActionResult GetReportPartialView()
         {
-            return PartialView("_CostMakeUpReport");
+            return PartialView("_Report");
         }
         [HttpGet]
         public IActionResult GetCostMakeUpForVehicle(int vehicleId, string startDate = "", string endDate = "")
@@ -399,13 +399,21 @@ namespace CarCareTracker.Controllers
                 DateTime.TryParse(endDate, out DateTime parsedEndDate)
                 )
             {
+                parsedEndDate = parsedEndDate.AddDays(1).AddSeconds(-1);
                 //if start and end dates are provided then we need to filter the data down.
                 serviceRecords.RemoveAll(x => x.Date < parsedStartDate || x.Date > parsedEndDate);
                 gasRecords.RemoveAll(x => x.Date < parsedStartDate || x.Date > parsedEndDate);
                 collisionRecords.RemoveAll(x => x.Date < parsedStartDate || x.Date > parsedEndDate);
                 taxRecords.RemoveAll(x => x.Date < parsedStartDate || x.Date > parsedEndDate);
             }
-            return Json(true);
+            var viewModel = new CostMakeUpForVehicle
+            {
+                ServiceRecordSum = serviceRecords.Sum(x => x.Cost),
+                GasRecordSum = gasRecords.Sum(x => x.Cost),
+                CollisionRecordSum = collisionRecords.Sum(x => x.Cost),
+                TaxRecordSum = taxRecords.Sum(x => x.Cost)
+            };
+            return PartialView("_CostMakeUpReport", viewModel);
         }
         //public IActionResult GetFuelCostByMonthByVehicle(int vehicleId)
         //{

Properties/launchSettings.json

@@ -7,7 +7,7 @@
         "ASPNETCORE_ENVIRONMENT": "Development"
       },
       "dotnetRunMessages": true,
-      "applicationUrl": "http://10.10.2.60:5011"
+      "applicationUrl": "http://10.10.2.61:5011"
     },
     "IIS Express": {
       "commandName": "IISExpress",

Views/Vehicle/Index.cshtml

@@ -8,7 +8,7 @@
     <script src="~/js/gasrecord.js" asp-append-version="true"></script>
     <script src="~/js/collisionrecord.js" asp-append-version="true"></script>
     <script src="~/js/taxrecord.js" asp-append-version="true"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
+    <script src="~/lib/chart-js/chart.umd.js"></script>
 }
 <div class="container">
     <div class="row">
@@ -35,6 +35,9 @@
         <li class="nav-item" role="presentation">
             <button class="nav-link" id="notes-tab" data-bs-toggle="tab" data-bs-target="#notes-tab-pane" type="button" role="tab" aria-selected="false"><i class="bi bi-journal-bookmark me-2"></i>Notes</button>
         </li>
+        <li class="nav-item" role="presentation">
+            <button class="nav-link" id="report-tab" data-bs-toggle="tab" data-bs-target="#report-tab-pane" type="button" role="tab" aria-selected="false"><i class="bi bi-file-bar-graph me-2"></i>Reports</button>
+        </li>
         <li class="nav-item dropdown ms-auto" role="presentation">
             <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">Manage Vehicle</a>
             <ul class="dropdown-menu">
@@ -45,7 +48,7 @@
     <div class="tab-content" id="vehicleTabContent">
         <div class="tab-pane fade show active" id="servicerecord-tab-pane" role="tabpanel" tabindex="0"></div>
         <div class="tab-pane fade" id="gas-tab-pane" role="tabpanel" tabindex="0"></div>
-        <div class="tab-pane fade" id="tax-tab-pane" role="tabpanel" tabindex="0">222</div>
+        <div class="tab-pane fade" id="tax-tab-pane" role="tabpanel" tabindex="0"></div>
         <div class="tab-pane fade" id="notes-tab-pane" role="tabpanel" tabindex="0">
             <div class="row">
                 <div class="col-12">
@@ -62,6 +65,7 @@
             </div>
         </div>
         <div class="tab-pane fade" id="accident-tab-pane" role="tabpanel" tabindex="0"></div>
+        <div class="tab-pane fade" id="report-tab-pane" role="tabpanel" tabindex="0"></div>
     </div>
 </div>
 <div class="modal fade" id="editVehicleModal" tabindex="-1" role="dialog">

Views/Vehicle/_CostMakeUpReport.cshtml

@@ -1,35 +1,39 @@
-<div class="row">
-    <canvas id="pie-chart"></canvas>
-</div>
+@model CostMakeUpForVehicle
+<canvas id="pie-chart" class="vehicleDetailTabContainer"></canvas>
 <script>
+    renderChart();
     function renderChart() {
         new Chart($("#pie-chart"), {
-            type: 'bar',
+            type: 'pie',
             data: {
-                labels: ["North America", "Latin America", "Europe", "Asia", "Africa"],
+                labels: ["Planned Maintenance(Service Records)", "Unplanned Maintenance", "Tax", "Fuel"],
                 datasets: [
                     {
-                        label: "Number of developers (millions)",
-                        backgroundColor: ["red", "blue", "yellow", "green", "pink"],
-                        data: [7, 4, 6, 9, 3]
+                        label: "Expenses by Category",
+                        backgroundColor: ["#003f5c", "#58508d", "#bc5090", "#ff6361"],
+                        data: [
+                            @Model.ServiceRecordSum, 
+                            @Model.CollisionRecordSum, 
+                            @Model.TaxRecordSum,
+                            @Model.GasRecordSum
+                        ]
                     }
                 ]
             },
             options: {
-                legend: { display: false },
-                title: {
-                    display: true,
-                    text: 'Number of Developers in Every Continent'
-                },
-
-                scales: {
-                    yAxes: [{
-                        ticks: {
-                            beginAtZero: true
+                plugins: {
+                    legend: {
+                        position: "bottom",
+                        labels: {
+                            color: "#fff"
                         }
-                    }]
+                    },
+                    title: {
+                        display: true,
+                        text: "Expenses by Type",
+                        color: "#fff"
+                    },
                 }
-
             }
         });
     }

Views/Vehicle/_Report.cshtml

@@ -0,0 +1,30 @@
+<div class="row">
+    <div class="col-6">
+        <div class="row">
+            <div class="col-12">
+
+            </div>
+        </div>
+        <div class="row">
+            <div class="col-12" id="costMakeUpReportContent">
+
+            </div>
+        </div>
+    </div>
+    <div class="col-6">
+        <div class="row">
+            <div class="col-12">
+
+            </div>
+        </div>
+    </div>
+</div>
+<script>
+    initiateChart();
+    function initiateChart() {
+        var vehicleId = GetVehicleId().vehicleId;
+        $.get(`/Vehicle/GetCostMakeUpForVehicle?vehicleId=${vehicleId}`, function (data) {
+            $("#costMakeUpReportContent").html(data);
+        })
+    }
+</script>

wwwroot/js/vehicle.js

@@ -31,6 +31,9 @@ $(document).ready(function () {
             case "tax-tab":
                 getVehicleTaxRecords(vehicleId);
                 break;
+            case "report-tab":
+                getVehicleReport();
+                break;
         }
         switch (e.relatedTarget.id) { //clear out previous tabs with grids in them to help with performance
             case "servicerecord-tab":
@@ -85,6 +88,13 @@ function getVehicleTaxRecords(vehicleId) {
         }
     });
 }
+function getVehicleReport() {
+    $.get(`/Vehicle/GetReportPartialView`, function (data) {
+        if (data) {
+            $("#report-tab-pane").html(data);
+        }
+    })
+}
 function editVehicle(vehicleId) {
     $.get(`/Vehicle/GetEditVehiclePartialViewById?vehicleId=${vehicleId}`, function (data) {
         if (data) {
@@ -145,12 +155,4 @@ function uploadVehicleFilesAsync(event) {
             }
         }
     });
-}
-function getVehicleReport() {
-    $.get(`/Vehicle/GetReportPartialView`, function (data) {
-        if (data) {
-            $("#bulkImportModalContent").html(data);
-            $("#bulkImportModal").modal('show');
-        }
-    })
 }