Added front end for supplies.

2024-01-16 20:38:54 -07:00
parent 99d5372f25
commit 8af9868d2f
10 changed files with 445 additions and 18 deletions
--- a/Controllers/VehicleController.cs
+++ b/Controllers/VehicleController.cs
@@ -214,7 +214,33 @@ namespace CarCareTracker.Controllers
                    return Json($"/{fileNameToExport}");
                }
            }
-            else if (mode == ImportMode.TaxRecord) {
+            else if (mode == ImportMode.SupplyRecord)
+            {
+                var fileNameToExport = $"temp/{Guid.NewGuid()}.csv";
+                var fullExportFilePath = _fileHelper.GetFullFilePath(fileNameToExport, false);
+                var vehicleRecords = _supplyRecordDataAccess.GetSupplyRecordsByVehicleId(vehicleId);
+                if (vehicleRecords.Any())
+                {
+                    var exportData = vehicleRecords.Select(x => new SupplyRecordExportModel { 
+                        Date = x.Date.ToShortDateString(), 
+                        Description = x.Description, 
+                        Cost = x.Cost.ToString("C"), 
+                        PartNumber = x.PartNumber,
+                        PartQuantity = x.Quantity.ToString(),
+                        PartSupplier = x.PartSupplier,
+                        Notes = x.Notes });
+                    using (var writer = new StreamWriter(fullExportFilePath))
+                    {
+                        using (var csv = new CsvWriter(writer, CultureInfo.InvariantCulture))
+                        {
+                            csv.WriteRecords(exportData);
+                        }
+                    }
+                    return Json($"/{fileNameToExport}");
+                }
+            }
+            else if (mode == ImportMode.TaxRecord)
+            {
                var fileNameToExport = $"temp/{Guid.NewGuid()}.csv";
                var fullExportFilePath = _fileHelper.GetFullFilePath(fileNameToExport, false);
                var vehicleRecords = _taxRecordDataAccess.GetTaxRecordsByVehicleId(vehicleId);
@@ -240,11 +266,12 @@ namespace CarCareTracker.Controllers
                bool useUKMPG = _config.GetUserConfig(User).UseUKMPG;
                vehicleRecords = vehicleRecords.OrderBy(x => x.Date).ThenBy(x => x.Mileage).ToList();
                var convertedRecords = _gasHelper.GetGasRecordViewModels(vehicleRecords, useMPG, useUKMPG);
-                var exportData = convertedRecords.Select(x => new GasRecordExportModel { 
-                    Date = x.Date.ToString(), 
-                    Cost = x.Cost.ToString(), 
-                    FuelConsumed = x.Gallons.ToString(), 
-                    FuelEconomy = x.MilesPerGallon.ToString(), 
+                var exportData = convertedRecords.Select(x => new GasRecordExportModel
+                {
+                    Date = x.Date.ToString(),
+                    Cost = x.Cost.ToString(),
+                    FuelConsumed = x.Gallons.ToString(),
+                    FuelEconomy = x.MilesPerGallon.ToString(),
                    Odometer = x.Mileage.ToString(),
                    IsFillToFull = x.IsFillToFull.ToString(),
                    MissedFuelUp = x.MissedFuelUp.ToString()
@@ -283,7 +310,7 @@ namespace CarCareTracker.Controllers
                    config.PrepareHeaderForMatch = args => { return args.Header.Trim().ToLower(); };
                    using (var csv = new CsvReader(reader, config))
                    {
-                        csv.Context.RegisterClassMap<FuellyMapper>();
+                        csv.Context.RegisterClassMap<ImportMapper>();
                        var records = csv.GetRecords<ImportModel>().ToList();
                        if (records.Any())
                        {
@@ -305,7 +332,8 @@ namespace CarCareTracker.Controllers
                                        //fuelly sometimes exports CSVs without total cost.
                                        var parsedPrice = decimal.Parse(importModel.Price, NumberStyles.Any);
                                        convertedRecord.Cost = convertedRecord.Gallons * parsedPrice;
-                                    } else
+                                    }
+                                    else
                                    {
                                        convertedRecord.Cost = decimal.Parse(importModel.Cost, NumberStyles.Any);
                                    }
@@ -313,7 +341,8 @@ namespace CarCareTracker.Controllers
                                    {
                                        var parsedBool = importModel.PartialFuelUp.Trim() == "1";
                                        convertedRecord.IsFillToFull = !parsedBool;
-                                    } else if (!string.IsNullOrWhiteSpace(importModel.IsFillToFull))
+                                    }
+                                    else if (!string.IsNullOrWhiteSpace(importModel.IsFillToFull))
                                    {
                                        var possibleFillToFullValues = new List<string> { "1", "true", "full" };
                                        var parsedBool = possibleFillToFullValues.Contains(importModel.IsFillToFull.Trim().ToLower());
@@ -370,6 +399,21 @@ namespace CarCareTracker.Controllers
                                    };
                                    _upgradeRecordDataAccess.SaveUpgradeRecordToVehicle(convertedRecord);
                                }
+                                else if (mode == ImportMode.SupplyRecord)
+                                {
+                                    var convertedRecord = new SupplyRecord()
+                                    {
+                                        VehicleId = vehicleId,
+                                        Date = DateTime.Parse(importModel.Date),
+                                        PartNumber = importModel.PartNumber,
+                                        PartSupplier = importModel.PartSupplier,
+                                        Quantity = decimal.Parse(importModel.PartQuantity, NumberStyles.Any),
+                                        Description = importModel.Description,
+                                        Cost = decimal.Parse(importModel.Cost, NumberStyles.Any),
+                                        Notes = importModel.Notes
+                                    };
+                                    _supplyRecordDataAccess.SaveSupplyRecordToVehicle(convertedRecord);
+                                }
                                else if (mode == ImportMode.TaxRecord)
                                {
                                    var convertedRecord = new TaxRecord()
@@ -683,9 +727,9 @@ namespace CarCareTracker.Controllers
            {
                numbersArray.Add(upgradeRecords.Min(x => x.Date.Year));
            }
-            var minYear =  numbersArray.Any() ? numbersArray.Min() : DateTime.Now.AddYears(-5).Year;
+            var minYear = numbersArray.Any() ? numbersArray.Min() : DateTime.Now.AddYears(-5).Year;
            var yearDifference = DateTime.Now.Year - minYear + 1;
-            for(int i = 0; i < yearDifference; i++)
+            for (int i = 0; i < yearDifference; i++)
            {
                viewModel.Years.Add(DateTime.Now.AddYears(i * -1).Year);
            }
@@ -696,16 +740,16 @@ namespace CarCareTracker.Controllers
            var userConfig = _config.GetUserConfig(User);
            var mileageData = _gasHelper.GetGasRecordViewModels(gasRecords, userConfig.UseMPG, userConfig.UseUKMPG);
            mileageData.RemoveAll(x => x.MilesPerGallon == default);
-            var monthlyMileageData = mileageData.GroupBy(x=>x.MonthId).OrderBy(x => x.Key).Select(x => new CostForVehicleByMonth
+            var monthlyMileageData = mileageData.GroupBy(x => x.MonthId).OrderBy(x => x.Key).Select(x => new CostForVehicleByMonth
            {
                MonthName = CultureInfo.CurrentCulture.DateTimeFormat.GetMonthName(x.Key),
-                Cost = x.Average(y=>y.MilesPerGallon)
+                Cost = x.Average(y => y.MilesPerGallon)
            }).ToList();
            viewModel.FuelMileageForVehicleByMonth = monthlyMileageData;
            return PartialView("_Report", viewModel);
        }
        [TypeFilter(typeof(CollaboratorFilter))]
-        [HttpGet] 
+        [HttpGet]
        public IActionResult GetCollaboratorsForVehicle(int vehicleId)
        {
            var result = _userLogic.GetCollaboratorsForVehicle(vehicleId);
@@ -748,7 +792,7 @@ namespace CarCareTracker.Controllers
                GasRecordSum = gasRecords.Sum(x => x.Cost),
                CollisionRecordSum = collisionRecords.Sum(x => x.Cost),
                TaxRecordSum = taxRecords.Sum(x => x.Cost),
-                UpgradeRecordSum = upgradeRecords.Sum(x=>x.Cost)
+                UpgradeRecordSum = upgradeRecords.Sum(x => x.Cost)
            };
            return PartialView("_CostMakeUpReport", viewModel);
        }
@@ -826,7 +870,7 @@ namespace CarCareTracker.Controllers
                Cost = x.Cost,
                DataType = ImportMode.TaxRecord
            }));
-            vehicleHistory.VehicleHistory = reportData.OrderBy(x=>x.Date).ThenBy(x=>x.Odometer).ToList();
+            vehicleHistory.VehicleHistory = reportData.OrderBy(x => x.Date).ThenBy(x => x.Odometer).ToList();
            return PartialView("_VehicleHistory", vehicleHistory);
        }
        [TypeFilter(typeof(CollaboratorFilter))]
@@ -1067,5 +1111,61 @@ namespace CarCareTracker.Controllers
            return Json(result);
        }
        #endregion
+        #region "Supply Records"
+        [TypeFilter(typeof(CollaboratorFilter))]
+        [HttpGet]
+        public IActionResult GetSupplyRecordsByVehicleId(int vehicleId)
+        {
+            var result = _supplyRecordDataAccess.GetSupplyRecordsByVehicleId(vehicleId);
+            if (_useDescending)
+            {
+                result = result.OrderByDescending(x => x.Date).ToList();
+            }
+            else
+            {
+                result = result.OrderBy(x => x.Date).ToList();
+            }
+            return PartialView("_SupplyRecords", result);
+        }
+        [HttpPost]
+        public IActionResult SaveSupplyRecordToVehicleId(SupplyRecordInput supplyRecord)
+        {
+            //move files from temp.
+            supplyRecord.Files = supplyRecord.Files.Select(x => { return new UploadedFiles { Name = x.Name, Location = _fileHelper.MoveFileFromTemp(x.Location, "documents/") }; }).ToList();
+            var result = _supplyRecordDataAccess.SaveSupplyRecordToVehicle(supplyRecord.ToSupplyRecord());
+            return Json(result);
+        }
+        [HttpGet]
+        public IActionResult GetAddSupplyRecordPartialView()
+        {
+            return PartialView("_SupplyRecordModal", new SupplyRecordInput());
+        }
+        [HttpGet]
+        public IActionResult GetSupplyRecordForEditById(int supplyRecordId)
+        {
+            var result = _supplyRecordDataAccess.GetSupplyRecordById(supplyRecordId);
+            //convert to Input object.
+            var convertedResult = new SupplyRecordInput
+            {
+                Id = result.Id,
+                Cost = result.Cost,
+                Date = result.Date.ToShortDateString(),
+                Description = result.Description,
+                PartNumber = result.PartNumber,
+                Quantity = result.Quantity,
+                PartSupplier = result.PartSupplier,
+                Notes = result.Notes,
+                VehicleId = result.VehicleId,
+                Files = result.Files
+            };
+            return PartialView("_SupplyRecordModal", convertedResult);
+        }
+        [HttpPost]
+        public IActionResult DeleteSupplyRecordById(int supplyRecordId)
+        {
+            var result = _supplyRecordDataAccess.DeleteSupplyRecordById(supplyRecordId);
+            return Json(result);
+        }
+        #endregion
    }
 }
--- a/MapProfile/ImportMappers.cs
+++ b/MapProfile/ImportMappers.cs
@@ -3,9 +3,9 @@ using CsvHelper.Configuration;

 namespace CarCareTracker.MapProfile
 {
-    public class FuellyMapper: ClassMap<ImportModel>
+    public class ImportMapper: ClassMap<ImportModel>
    {
-        public FuellyMapper()
+        public ImportMapper()
        {
            Map(m => m.Date).Name(["date", "fuelup_date"]);
            Map(m => m.Odometer).Name(["odometer"]);
@@ -17,6 +17,9 @@ namespace CarCareTracker.MapProfile
            Map(m => m.IsFillToFull).Name(["isfilltofull", "filled up"]);
            Map(m => m.Description).Name(["description"]);
            Map(m => m.MissedFuelUp).Name(["missed_fuelup", "missedfuelup"]);
+            Map(m => m.PartSupplier).Name(["partsupplier"]);
+            Map(m => m.PartQuantity).Name(["partquantity"]);
+            Map(m => m.PartNumber).Name(["partnumber"]);
        }
    }
 }
--- a/Models/ImportModel.cs
+++ b/Models/ImportModel.cs
@@ -15,6 +15,20 @@
        public string PartialFuelUp { get; set; }
        public string IsFillToFull { get; set; }
        public string MissedFuelUp { get; set; }
+        public string PartNumber { get; set; }
+        public string PartSupplier { get; set; }
+        public string PartQuantity { get; set; }
+    }
+
+    public class SupplyRecordExportModel
+    {
+        public string Date { get; set; }
+        public string PartNumber { get; set; }
+        public string PartSupplier { get; set; }
+        public string PartQuantity { get; set; }
+        public string Description { get; set; }
+        public string Cost { get; set; }
+        public string Notes { get; set; }
    }

    public class ServiceRecordExportModel
--- a/Views/Vehicle/Index.cshtml
+++ b/Views/Vehicle/Index.cshtml
@@ -17,6 +17,7 @@
    <script src="~/js/upgraderecord.js" asp-append-version="true"></script>
    <script src="~/js/note.js" asp-append-version="true"></script>
    <script src="~/js/reports.js" asp-append-version="true"></script>
+    <script src="~/js/supplyrecord.js" asp-append-version="true"></script>
    <script src="~/lib/chart-js/chart.umd.js"></script>
 }
 <div class="lubelogger-mobile-nav" onclick="hideMobileNav()">
--- a/Views/Vehicle/_BulkDataImporter.cshtml
+++ b/Views/Vehicle/_BulkDataImporter.cshtml
@@ -25,6 +25,9 @@
                    } else if (Model == ImportMode.TaxRecord)
                    {
                        <a class="btn btn-link" href="/defaults/taxrecordsample.csv" target="_blank">Download Sample</a>
+                    } else if (Model == ImportMode.SupplyRecord)
+                    {
+                        <a class="btn btn-link" href="/defaults/supplysample.csv" target="_blank">Download Sample</a>
                    }
                </div>
            </div>
@@ -62,6 +65,8 @@
                    getVehicleTaxRecords(vehicleId);
                } else if (mode == "UpgradeRecord") {
                    getVehicleUpgradeRecords(vehicleId);
+                } else if (mode == "SupplyRecord") {
+                    getVehicleSupplyRecords(vehicleId);
                }
            } else {
                errorToast("An error has occurred, please double check the data and try again.");
--- a/Views/Vehicle/_SupplyRecordModal.cshtml
+++ b/Views/Vehicle/_SupplyRecordModal.cshtml
@@ -0,0 +1,85 @@
+@model SupplyRecordInput
+@{
+    var isNew = Model.Id == 0;
+}
+<div class="modal-header">
+    <h5 class="modal-title">@(isNew ? "Add New Supply Record" : "Edit Supply Record")</h5>
+    <button type="button" class="btn-close" onclick="hideAddSupplyRecordModal()" aria-label="Close"></button>
+</div>
+<div class="modal-body">
+    <form>
+        <div class="form-group">
+            <div class="row">
+                <div class="col-md-6 col-12">
+                    <input type="text" id="workAroundInput" style="height:0px; width:0px; display:none;">
+                    <label for="supplyRecordDate">Date</label>
+                    <div class="input-group">
+                        <input type="text" id="supplyRecordDate" class="form-control" placeholder="Date purchased" value="@Model.Date">
+                        <span class="input-group-text"><i class="bi bi-calendar-event"></i></span>
+                    </div>
+                    <label for="supplyRecordPartNumber">Part Number</label>
+                    <input type="text" id="supplyRecordPartNumber" class="form-control" placeholder="Part #/Model #/SKU #" value="@(isNew ? "" : Model.PartNumber)">
+                    <label for="supplyRecordDescription">Description</label>
+                    <input type="text" id="supplyRecordDescription" class="form-control" placeholder="Description of the Part/Supplies" value="@Model.Description">
+                    <label for="supplyRecordSupplier">Supplier/Vendor</label>
+                    <input type="text" id="supplyRecordSupplier" class="form-control" placeholder="Part Supplier" value="@Model.PartSupplier">
+                    <div class="row">
+                        <div class="col-md-6 col-12">
+                            <label for="supplyRecordQuantity">Quantity</label>
+                            <input type="text" id="supplyRecordQuantity" class="form-control" placeholder="Quantity" value="@(isNew ? "1" : Model.Quantity)">
+                        </div>
+                        <div class="col-md-6 col-12">
+                            <label for="supplyRecordCost">Cost</label>
+                            <input type="text" id="supplyRecordCost" class="form-control" placeholder="Cost" value="@(isNew ? "" : Model.Cost)">
+                        </div>
+                    </div>
+                </div>
+                <div class="col-md-6 col-12">
+                    <label for="supplyRecordNotes">Notes(optional)</label>
+                    <textarea id="supplyRecordNotes" class="form-control" rows="5">@Model.Notes</textarea>
+                    @if (Model.Files.Any())
+                    {
+                        <div>
+                            @await Html.PartialAsync("_UploadedFiles", Model.Files)
+                            <label for="supplyRecordFiles">Upload more documents</label>
+                            <input onChange="uploadVehicleFilesAsync(this)" type="file" multiple accept=".png,.jpg,.jpeg,.pdf,.xls,.xlsx,.docx" class="form-control-file" id="supplyRecordFiles">
+                        </div>
+                    }
+                    else
+                    {
+                        <label for="supplyRecordFiles">Upload documents(optional)</label>
+                        <input onChange="uploadVehicleFilesAsync(this)" type="file" multiple accept=".png,.jpg,.jpeg,.pdf,.xls,.xlsx,.docx" class="form-control-file" id="supplyRecordFiles">
+                    }
+                </div>
+            </div>
+        </div>
+    </form>
+</div>
+<div class="modal-footer">
+    @if (!isNew)
+    {
+        <button type="button" class="btn btn-danger" onclick="deleteSupplyRecord(@Model.Id)" style="margin-right:auto;">Delete</button>
+    }
+    <button type="button" class="btn btn-secondary" onclick="hideAddSupplyRecordModal()">Cancel</button>
+    @if (isNew)
+    {
+        <button type="button" class="btn btn-primary" onclick="saveSupplyRecordToVehicle()">Add New Supply Record</button>
+    }
+    else if (!isNew)
+    {
+        <button type="button" class="btn btn-primary" onclick="saveSupplyRecordToVehicle(true)">Edit Supply Record</button>
+    }
+</div>
+<script>
+    var uploadedFiles = [];
+    getUploadedFilesFromModel();
+    function getUploadedFilesFromModel() {
+    @foreach (UploadedFiles filesUploaded in Model.Files)
+    {
+        @:uploadedFiles.push({ name: "@filesUploaded.Name", location: "@filesUploaded.Location" });
+    }
+        }
+    function getSupplyRecordModelData() {
+        return { id: @Model.Id}
+    }
+</script>
--- a/Views/Vehicle/_SupplyRecords.cshtml
+++ b/Views/Vehicle/_SupplyRecords.cshtml
@@ -0,0 +1,78 @@
+@using CarCareTracker.Helper
+@inject IConfigHelper config
+@{
+    var enableCsvImports = config.GetUserConfig(User).EnableCsvImports;
+    var hideZero = config.GetUserConfig(User).HideZero;
+}
+@model List<SupplyRecord>
+<div class="row">
+    <div class="d-flex justify-content-between">
+        <div class="d-flex align-items-center flex-wrap">
+            <span class="ms-2 badge bg-success">@($"# of Supply Records: {Model.Count()}")</span>
+            <span class="ms-2 badge bg-primary">@($"Total: {Model.Sum(x => x.Cost).ToString("C")}")</span>
+        </div>
+        <div>
+            @if (enableCsvImports)
+            {
+                <div class="btn-group">
+                    <button onclick="showAddSupplyRecordModal()" class="btn btn-primary btn-md mt-1 mb-1"><i class="bi bi-pencil-square me-2"></i>Add Supply Record</button>
+                    <button type="button" class="btn btn-md btn-primary btn-md mt-1 mb-1 dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
+                        <span class="visually-hidden">Toggle Dropdown</span>
+                    </button>
+                    <ul class="dropdown-menu">
+                        <li><a class="dropdown-item" href="#" onclick="showBulkImportModal('SupplyRecord')">Import via CSV</a></li>
+                        <li><a class="dropdown-item" href="#" onclick="exportVehicleData('SupplyRecord')">Export to CSV</a></li>
+                    </ul>
+                </div>
+            }
+            else
+            {
+                <button onclick="showAddSupplyRecordModal()" class="btn btn-primary btn-md mt-1 mb-1"><i class="bi bi-pencil-square me-2"></i>Add Supply Record</button>
+            }
+        </div>
+    </div>
+</div>
+<div class="row vehicleDetailTabContainer">
+    <div class="col-12">
+        <div class="row mt-2 showOnPrint">
+            <div class="d-flex">
+                <img src="/defaults/lubelogger_logo.png" />
+            </div>
+        </div>
+        <table class="table table-hover">
+            <thead class="sticky-top">
+                <tr class="d-flex">
+                    <th scope="col" class="col-1">Date</th>
+                    <th scope="col" class="col-2">Part #</th>
+                    <th scope="col" class="col-2">Supplier</th>
+                    <th scope="col" class="col-3">Description</th>
+                    <th scope="col" class="col-1">Quantity</th>
+                    <th scope="col" class="col-1">Cost</th>
+                    <th scope="col" class="col-2">Notes</th>
+                </tr>
+            </thead>
+            <tbody>
+                @foreach (SupplyRecord supplyRecord in Model)
+                {
+                    <tr class="d-flex" style="cursor:pointer;" onclick="showEditSupplyRecordModal(@supplyRecord.Id)">
+                        <td class="col-1">@supplyRecord.Date.ToShortDateString()</td>
+                        <td class="col-2">@supplyRecord.PartNumber</td>
+                        <td class="col-2">@supplyRecord.PartSupplier</td>
+                        <td class="col-3">@supplyRecord.Description</td>
+                        <td class="col-1">@supplyRecord.Quantity</td>
+                        <td class="col-1">@((hideZero && supplyRecord.Cost == default) ? "---" : supplyRecord.Cost.ToString("C"))</td>
+                        <td class="col-2 text-truncate">@CarCareTracker.Helper.StaticHelper.TruncateStrings(supplyRecord.Notes)</td>
+                    </tr>
+                }
+            </tbody>
+        </table>
+    </div>
+</div>
+
+
+<div class="modal fade" data-bs-focus="false" id="supplyRecordModal" tabindex="-1" role="dialog" aria-hidden="true">
+    <div class="modal-dialog modal-lg" role="document">
+        <div class="modal-content" id="supplyRecordModalContent">
+        </div>
+    </div>
+</div>
--- a/wwwroot/defaults/supplysample.csv
+++ b/wwwroot/defaults/supplysample.csv
@@ -0,0 +1,2 @@
+Date,PartNumber,PartSupplier,PartQuantity,Description,Cost,Notes
+1/16/2024,‎EVA17872045551,Evan Fischer,1,Front Bumper,$95.14,Altima Activities
--- a/wwwroot/js/supplyrecord.js
+++ b/wwwroot/js/supplyrecord.js
@@ -0,0 +1,121 @@
+function showAddSupplyRecordModal() {
+    $.get('/Vehicle/GetAddSupplyRecordPartialView', function (data) {
+        if (data) {
+            $("#supplyRecordModalContent").html(data);
+            //initiate datepicker
+            initDatePicker($('#supplyRecordDate'));
+            $('#supplyRecordModal').modal('show');
+        }
+    });
+}
+function showEditSupplyRecordModal(supplyRecordId) {
+    $.get(`/Vehicle/GetSupplyRecordForEditById?supplyRecordId=${supplyRecordId}`, function (data) {
+        if (data) {
+            $("#supplyRecordModalContent").html(data);
+            //initiate datepicker
+            initDatePicker($('#supplyRecordDate'));
+            $('#supplyRecordModal').modal('show');
+        }
+    });
+}
+function hideAddSupplyRecordModal() {
+    $('#supplyRecordModal').modal('hide');
+}
+function deleteSupplyRecord(supplyRecordId) {
+    $("#workAroundInput").show();
+    Swal.fire({
+        title: "Confirm Deletion?",
+        text: "Deleted Supply Records cannot be restored.",
+        showCancelButton: true,
+        confirmButtonText: "Delete",
+        confirmButtonColor: "#dc3545"
+    }).then((result) => {
+        if (result.isConfirmed) {
+            $.post(`/Vehicle/DeleteSupplyRecordById?supplyRecordId=${supplyRecordId}`, function (data) {
+                if (data) {
+                    hideAddSupplyRecordModal();
+                    successToast("Supply Record Deleted");
+                    var vehicleId = GetVehicleId().vehicleId;
+                    getVehicleSupplyRecords(vehicleId);
+                } else {
+                    errorToast("An error has occurred, please try again later.");
+                }
+            });
+        } else {
+            $("#workAroundInput").hide();
+        }
+    });
+}
+function saveSupplyRecordToVehicle(isEdit) {
+    //get values
+    var formValues = getAndValidateSupplyRecordValues();
+    //validate
+    if (formValues.hasError) {
+        errorToast("Please check the form data");
+        return;
+    }
+    //save to db.
+    $.post('/Vehicle/SaveSupplyRecordToVehicleId', { supplyRecord: formValues }, function (data) {
+        if (data) {
+            successToast(isEdit ? "Supply Record Updated" : "Supply Record Added.");
+            hideAddSupplyRecordModal();
+            saveScrollPosition();
+            getVehicleSupplyRecords(formValues.vehicleId);
+            if (formValues.addReminderRecord) {
+                setTimeout(function () { showAddReminderModal(formValues); }, 500);
+            }
+        } else {
+            errorToast("An error has occurred, please try again later.");
+        }
+    })
+}
+function getAndValidateSupplyRecordValues() {
+    var supplyDate = $("#supplyRecordDate").val();
+    var supplyPartNumber = $("#supplyRecordPartNumber").val();
+    var supplyDescription = $("#supplyRecordDescription").val();
+    var supplySupplier = $("#supplyRecordSupplier").val();
+    var supplyQuantity = $("#supplyRecordQuantity").val();
+    var supplyCost = $("#supplyRecordCost").val();
+    var supplyNotes = $("#supplyRecordNotes").val();
+    var vehicleId = GetVehicleId().vehicleId;
+    var supplyRecordId = getSupplyRecordModelData().id;
+    //validation
+    var hasError = false;
+    if (supplyDate.trim() == '') { //eliminates whitespace.
+        hasError = true;
+        $("#supplyRecordDate").addClass("is-invalid");
+    } else {
+        $("#supplyRecordDate").removeClass("is-invalid");
+    }
+    if (supplyDescription.trim() == '') {
+        hasError = true;
+        $("#supplyRecordDescription").addClass("is-invalid");
+    } else {
+        $("#supplyRecordDescription").removeClass("is-invalid");
+    }
+    if (supplyQuantity.trim() == '' || !isValidMoney(supplyQuantity)) {
+        hasError = true;
+        $("#supplyRecordQuantity").addClass("is-invalid");
+    } else {
+        $("#supplyRecordQuantity").removeClass("is-invalid");
+    }
+    if (supplyCost.trim() == '' || !isValidMoney(supplyCost)) {
+        hasError = true;
+        $("#supplyRecordCost").addClass("is-invalid");
+    } else {
+        $("#supplyRecordCost").removeClass("is-invalid");
+    }
+    return {
+        id: supplyRecordId,
+        hasError: hasError,
+        vehicleId: vehicleId,
+        date: supplyDate,
+        partNumber: supplyPartNumber,
+        partSupplier: supplySupplier,
+        description: supplyDescription,
+        cost: supplyCost,
+        notes: supplyNotes,
+        quantity: supplyQuantity,
+        files: uploadedFiles
+    }
+}
--- a/wwwroot/js/vehicle.js
+++ b/wwwroot/js/vehicle.js
@@ -30,6 +30,9 @@ $(document).ready(function () {
            case "upgrade-tab":
                getVehicleUpgradeRecords(vehicleId);
                break;
+            case "supply-tab":
+                getVehicleSupplyRecords(vehicleId);
+                break;
        }
        switch (e.relatedTarget.id) { //clear out previous tabs with grids in them to help with performance
            case "servicerecord-tab":
@@ -56,6 +59,9 @@ $(document).ready(function () {
            case "notes-tab":
                $("#notes-tab-pane").html("");
                break;
+            case "supply-tab":
+                $("#supply-tab-pane").html("");
+                break;
        }
    });
    var defaultTab = GetDefaultTab().tab;
@@ -84,6 +90,9 @@ $(document).ready(function () {
        case "UpgradeRecord":
            getVehicleUpgradeRecords(vehicleId);
            break;
+        case "SupplyRecord":
+            getVehicleSupplyRecords(vehicleId);
+            break;
    }
 });

@@ -104,6 +113,15 @@ function getVehicleServiceRecords(vehicleId) {
        }
    });
 }
+function getVehicleSupplyRecords(vehicleId) {
+    $.get(`/Vehicle/GetSupplyRecordsByVehicleId?vehicleId=${vehicleId}`, function (data) {
+        if (data) {
+            $("#supply-tab-pane").html(data);
+            restoreScrollPosition();
+            getVehicleHaveImportantReminders(vehicleId);
+        }
+    });
+}
 function getVehicleUpgradeRecords(vehicleId) {
    $.get(`/Vehicle/GetUpgradeRecordsByVehicleId?vehicleId=${vehicleId}`, function (data) {
        if (data) {