Grids and tabs and horror

Nop.Plugin.Misc.AIPlugin/Areas/Admin/Components/PartnersGridComponent.cs

@@ -0,0 +1,16 @@
+using Microsoft.AspNetCore.Mvc;
+using Nop.Plugin.Misc.FruitBankPlugin.Areas.Admin.Models;
+
+namespace Nop.Plugin.Misc.FruitBankPlugin.Areas.Admin.Components
+{
+    [ViewComponent(Name = "PartnersGridComponent")]
+    public class PartnersGridComponent : ViewComponent
+    {
+        public async Task<IViewComponentResult> InvokeAsync(TestGridModel model)
+        {
+            // Here you can fetch data for this grid if needed
+            // For demo, just pass the model
+            return View(model.ViewComponentName +".cshtml", model);
+        }
+    }
+}

Nop.Plugin.Misc.AIPlugin/Areas/Admin/Components/ShippingDocumentGridComponent.cs

@@ -0,0 +1,16 @@
+using Microsoft.AspNetCore.Mvc;
+using Nop.Plugin.Misc.FruitBankPlugin.Areas.Admin.Models;
+
+namespace Nop.Plugin.Misc.FruitBankPlugin.Areas.Admin.Components
+{
+    [ViewComponent(Name = "ShippingDocumentGridComponent")]
+    public class ShippingDocumentGridComponent : ViewComponent
+    {
+        public async Task<IViewComponentResult> InvokeAsync(TestGridModel model)
+        {
+            // Here you can fetch data for this grid if needed
+            // For demo, just pass the model
+            return View(model.ViewComponentName +".cshtml", model);
+        }
+    }
+}

Nop.Plugin.Misc.AIPlugin/Areas/Admin/Components/ShippingGridComponent.cs

@@ -0,0 +1,16 @@
+using Microsoft.AspNetCore.Mvc;
+using Nop.Plugin.Misc.FruitBankPlugin.Areas.Admin.Models;
+
+namespace Nop.Plugin.Misc.FruitBankPlugin.Areas.Admin.Components
+{
+    [ViewComponent(Name = "ShippingGridComponent")]
+    public class ShippingGridComponent : ViewComponent
+    {
+        public async Task<IViewComponentResult> InvokeAsync(TestGridModel model)
+        {
+            // Here you can fetch data for this grid if needed
+            // For demo, just pass the model
+            return View(model.ViewComponentName +".cshtml", model);
+        }
+    }
+}

Nop.Plugin.Misc.AIPlugin/Areas/Admin/Controllers/ManagementPageController.cs

@@ -0,0 +1,105 @@
+using FruitBank.Common.Entities;
+using Microsoft.AspNetCore.Mvc;
+using Microsoft.EntityFrameworkCore;
+using Microsoft.Extensions.Azure;
+using Nop.Plugin.Misc.FruitBankPlugin.Areas.Admin.Models;
+using Nop.Plugin.Misc.FruitBankPlugin.Domains.DataLayer;
+using Nop.Services.Security;
+using Nop.Web.Areas.Admin.Controllers;
+using Nop.Web.Framework;
+using Nop.Web.Framework.Mvc.Filters;
+
+namespace Nop.Plugin.Misc.FruitBankPlugin.Areas.Admin.Controllers
+{
+    [Area(AreaNames.ADMIN)]
+    [AuthorizeAdmin]  
+    public class ManagementPageController : BaseAdminController
+    {
+        private readonly IPermissionService _permissionService;
+        protected readonly FruitBankDbContext _dbContext;
+
+        public ManagementPageController(IPermissionService permissionService, FruitBankDbContext fruitBankDbContext)
+        {
+            _permissionService = permissionService;
+            _dbContext = fruitBankDbContext;
+        }
+
+        public async Task<IActionResult> Test()
+        {
+            if (!await _permissionService.AuthorizeAsync(StandardPermission.Security.ACCESS_ADMIN_PANEL))
+                return AccessDeniedView();
+            var testPageModel = new TestPageModel();
+            testPageModel.Grids = new List<TestGridModel>();
+
+            var testGridModel2 = new TestGridModel();
+            testGridModel2.GridName = "Orders";
+            testGridModel2.ViewComponentName = "ShippingDocumentGridComponent";
+            testPageModel.Grids.Add(testGridModel2);
+            
+            var testGridModel = new TestGridModel();
+            testGridModel.GridName = "Shipping";
+            testGridModel.ViewComponentName = "ShippingGridComponent";
+            testPageModel.Grids.Add(testGridModel);
+
+            var testGridModel3 = new TestGridModel();
+            testGridModel3.GridName = "Partners";
+            testGridModel3.ViewComponentName = "PartnersGridComponent";
+            testPageModel.Grids.Add(testGridModel3);
+
+            //testGridModel.ViewComponentLocation = "~/Plugins/Misc.FruitBankPlugin/Areas/Admin/Components/Views/_ShippingGridComponent.cshtml";
+            return View("~/Plugins/Misc.FruitBankPlugin/Areas/Admin/Views/Order/Test.cshtml", testPageModel);
+        }
+
+        [HttpGet]
+        public async Task<IActionResult> GetShippings()
+        {
+            if (!await _permissionService.AuthorizeAsync(StandardPermission.Security.ACCESS_ADMIN_PANEL))
+                return AccessDeniedView();
+           
+            // Mock data for now
+            var model = _dbContext.Shippings.GetAll(true).OrderByDescending(s => s.Created).ToList();
+            var valami = model;
+            //model. = await _dbContext.GetShippingDocumentsByShippingIdAsync(shippingId);
+            return Json(model);
+        }
+
+        [HttpGet]
+        public async Task<IActionResult> GetShippingDocuments()
+        {
+            if (!await _permissionService.AuthorizeAsync(StandardPermission.Security.ACCESS_ADMIN_PANEL))
+                return AccessDeniedView();
+
+            // Mock data for now
+            var model = await _dbContext.ShippingDocuments.GetAll(true).OrderByDescending(sd => sd.Created).ToListAsync();
+            var valami = model;
+            //model. = await _dbContext.GetShippingDocumentsByShippingIdAsync(shippingId);
+            return Json(model);
+        }
+
+        [HttpPost]
+        public async Task<IActionResult> ShippingDocumentList(int shippingId)
+        {
+            if (!await _permissionService.AuthorizeAsync(StandardPermission.Security.ACCESS_ADMIN_PANEL))
+                return AccessDeniedView();
+
+            // Apply filters to mock data
+            var model = await _dbContext.GetShippingDocumentsByShippingIdAsync(shippingId);
+
+            return Json(model);
+        }
+        
+        [HttpGet]
+        public async Task<IActionResult> GetPartners()
+        {
+            if (!await _permissionService.AuthorizeAsync(StandardPermission.Security.ACCESS_ADMIN_PANEL))
+                return AccessDeniedView();
+
+            // Mock data for now
+            var model = await _dbContext.Partners.GetAll().OrderByDescending(p => p.Created).ToListAsync();
+            var valami = model;
+            //model. = await _dbContext.GetShippingDocumentsByShippingIdAsync(shippingId);
+            return Json(model);
+        }
+
+    }
+}

Nop.Plugin.Misc.AIPlugin/Areas/Admin/Controllers/ShippingController.cs

@@ -1,4 +1,6 @@
-using FruitBank.Common.Entities;
+using DevExtreme.AspNet.Data;
+using DevExtreme.AspNet.Mvc;
+using FruitBank.Common.Entities;
 using Microsoft.AspNetCore.Http;
 using Microsoft.AspNetCore.Mvc;
 using Nop.Plugin.Misc.FruitBankPlugin.Areas.Admin.Models;
@@ -81,13 +83,13 @@ namespace Nop.Plugin.Misc.FruitBankPlugin.Areas.Admin.Controllers
                 return AccessDeniedView();
 
             // Create model and load data
-            var model = _shippingDocumentDbTable.GetAll().ToList();
+            //var model = _shippingDocumentDbTable.GetAll().ToList();
-
+            var model = _dbContext.ShippingDocuments.GetAll(true).ToList();
             // TODO: Replace with your actual service call
             // model.ShippingList = await _shippingService.GetAllShippingsAsync();
 
             // Mock data for now
-            
+
 
             return View("~/Plugins/Misc.FruitBankPlugin/Areas/Admin/Views/Shipping/List.cshtml", model);
         }
@@ -104,6 +106,36 @@ namespace Nop.Plugin.Misc.FruitBankPlugin.Areas.Admin.Controllers
             return View("~/Plugins/Misc.FruitBankPlugin/Areas/Admin/Views/Shipping/List.cshtml", model);
         }
 
+
+        //TODO IMPLEMENT DEVEXTREME FILETRING AND LOADING 
+        //[HttpGet]
+        //public async Task<IActionResult> GetDocumentByShippingId(int shippingId, DataSourceLoadOptions loadOptions)
+        //{
+        //    // 1. Get the IQueryable from your service.
+        //    // This is the key step. It's more efficient to work with IQueryable
+        //    // so that filtering, sorting, and paging are done by the database.
+        //    var documentQuery = await _dbContext.GetShippingDocumentsByShippingIdAsync(shippingId);
+
+        //    // 2. Process the data using DevExtreme.AspNet.Data.
+        //    // This is where all the magic happens. The Load method takes care of
+        //    // applying all the grid's client-side settings (sorting, filtering,
+        //    // grouping, paging) to your data query.
+        //    var loadResult = DataSourceLoader.Load(documentQuery, loadOptions);
+
+        //    // 3. Return the result in the format DevExtreme expects.
+        //    return Json(loadResult);
+        //}
+
+        [HttpGet]
+        public async Task<IActionResult> GetShippingDocumentsByShippingId(int shippingId)
+        {
+
+            var result = await _dbContext.GetShippingDocumentsByShippingIdAsync(shippingId);          
+
+            // 3. Return the result in the format DevExtreme expects.
+            return Json(result);
+        }
+
         [HttpPost]
         public async Task<IActionResult> Delete(int id)
         {

Nop.Plugin.Misc.AIPlugin/Areas/Admin/Models/GridBaseViewModel.cs

@@ -0,0 +1,13 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+
+namespace Nop.Plugin.Misc.FruitBankPlugin.Areas.Admin.Models
+{
+    public class GridBaseViewModel
+    {
+        public int? ContextId { get; set; }
+    }
+}

Nop.Plugin.Misc.AIPlugin/Areas/Admin/Models/ShippingGridPartialViewModel.cs

@@ -0,0 +1,11 @@
+//using Nop.Web.Framework.Models;
+//using Nop.Web.Framework.Mvc.ModelBinding;
+//using System.ComponentModel.DataAnnotations;
+
+namespace Nop.Plugin.Misc.FruitBankPlugin.Areas.Admin.Models
+{
+    public class ShippingGridPartialViewModel : GridBaseViewModel
+    {
+        
+    }
+}

Nop.Plugin.Misc.AIPlugin/Areas/Admin/Models/TestGridModel.cs

@@ -0,0 +1,18 @@
+//using Nop.Web.Framework.Models;
+//using Nop.Web.Framework.Mvc.ModelBinding;
+//using System.ComponentModel.DataAnnotations;
+
+namespace Nop.Plugin.Misc.FruitBankPlugin.Areas.Admin.Models
+{
+    public class TestGridModel
+    {
+        public Guid Id = Guid.NewGuid();
+        public string GridName { get; set; }
+        //public string GridControllerName { get; set; }
+        //public string GridEndpointName { get; set; }
+        public string ViewComponentName { get; set; }
+        public string ViewComponentLocation { get; set; }
+
+        public int? ParentRowId { get; set; }
+    }
+}

Nop.Plugin.Misc.AIPlugin/Areas/Admin/Models/TestPageModel.cs

@@ -0,0 +1,11 @@
+//using Nop.Web.Framework.Models;
+//using Nop.Web.Framework.Mvc.ModelBinding;
+//using System.ComponentModel.DataAnnotations;
+
+namespace Nop.Plugin.Misc.FruitBankPlugin.Areas.Admin.Models
+{
+    public class TestPageModel
+    {
+        public List<TestGridModel> Grids { get; set; }
+    }
+}

Nop.Plugin.Misc.AIPlugin/Areas/Admin/Views/Order/PartnersGridComponent.cshtml

@@ -0,0 +1,116 @@
+@model Nop.Plugin.Misc.FruitBankPlugin.Areas.Admin.Models.TestGridModel
+@using DevExtreme.AspNet.Mvc
+
+@{
+    var contextId = Model;
+    // var gridId = $"dataGrid_{Guid.NewGuid():N}";
+}
+
+<div>
+    @(Html.DevExtreme().DataGrid()
+    .ID(Model.Id.ToString())
+    .ShowBorders(true)
+    .DataSource(ds => ds.Mvc()
+                    .Controller("ManagementPage")
+                    .LoadAction("GetPartners"))
+    .KeyExpr("Id")
+    .SearchPanel(sp => sp.Visible(true))
+    .HeaderFilter(hf => hf.Visible(true))
+    .Paging(p => p.PageSize(15))
+    .Pager(p => p.Visible(true))
+    .OnRowExpanded("onRowExpanded")
+    .Editing(editing => {
+        editing.Mode(GridEditMode.Cell);
+        editing.AllowUpdating(true);
+        editing.AllowAdding(true);
+        editing.AllowDeleting(true);
+    })
+    .Columns(c => {
+        c.Add().DataField("Id").AllowEditing(false);
+        c.Add().DataField("Name");
+        c.Add().DataField("TaxId");
+        c.Add().DataField("Country");        
+    })
+    .Toolbar(toolbar => {
+            toolbar.Items(items => {
+                items.Add()
+                    .Name("addRowButton")
+                    .ShowText(ToolbarItemShowTextMode.Always);
+
+                items.Add()
+                    .Location(ToolbarItemLocation.After)
+                    .Widget(w =>
+                        w.Button()
+                            .Text("Delete Selected Records")
+                            .Icon("trash")
+                            .Disabled(true)
+                            .OnClick("onDeleteBtnClick")
+                    );
+            });
+        })
+        .MasterDetail(md => {
+        md.Enabled(true);
+        md.Template(@<text>
+            <div class="master-detail-caption"><%- data.ShippingDate %> <%- data.LicencePlate %>'s shippingdocuments:</div>
+            
+        <div id="@(new JS("'shippingDocumentGridContainer-' + data.ID"))"></div>
+            @(Html.DevExtreme().DataGrid<FruitBank.Common.Entities.ShippingDocument>()
+                .ColumnAutoWidth(true)
+                .ShowBorders(true)
+                .ID(new JS("'shippingDocumentGridContainer-' + data.Id"))
+                .Columns(columns => {
+                    columns.AddFor(m => m.Id).AllowEditing(false);
+
+                    columns.AddFor(m => m.Country);
+
+                    columns.AddFor(m => m.Created);
+
+                    columns.AddFor(m => m.PartnerId);
+
+                    columns.Add()
+                        .Caption("Completed")
+                        .DataType(GridColumnDataType.Boolean)
+                        .CalculateCellValue("calculateCellValue");
+                })
+                .DataSource(ds => ds.Mvc()
+                    .Controller("Shipping")
+                    .LoadAction("GetShippingDocumentsByShippingId")
+                    .LoadParams(new { shippingId = new JS("data.Id") })
+                    .Key("Id")
+                )
+            )
+        </text>);
+    })
+)
+</div>
+
+
+<script>
+    function onDeleteBtnClick(){
+        let dataGrid = $("#gridContainer").dxDataGrid("instance");
+        $.when.apply($, dataGrid.getSelectedRowsData().map(function(data) {
+            return dataGrid.getDataSource().store().remove(data.ID);
+        })).done(function() {
+            dataGrid.refresh();
+        });
+    }
+
+    function calculateFilterExpression(filterValue, selectedFilterOperation, target) {
+        if(target === "search" && typeof(filterValue) === "string") {
+            return [this.dataField, "contains", filterValue]
+        }
+        return function(data) {
+            return (data.AssignedEmployee || []).indexOf(filterValue) !== -1
+        }
+    }
+
+    function onSelectionChanged(data) {
+        let dataGrid = $("#gridContainer").dxDataGrid("instance");
+        dataGrid.option("toolbar.items[1].options.disabled", !data.selectedRowsData.length);
+    }
+
+    function onRowExpanded(e) {
+        e.component.dxDataGrid("getDataSource").reload();
+    }
+</script>
+                   

Nop.Plugin.Misc.AIPlugin/Areas/Admin/Views/Order/ShippingDocumentGridComponent.cshtml

@@ -0,0 +1,281 @@
+@model Nop.Plugin.Misc.FruitBankPlugin.Areas.Admin.Models.TestGridModel
+@using DevExtreme.AspNet.Mvc
+
+@{
+    var contextId = Model;
+    // var gridId = $"dataGrid_{Guid.NewGuid():N}";
+}
+
+<div>
+    @(Html.DevExtreme().DataGrid()
+    .ID(Model.Id.ToString())
+    .ShowBorders(true)
+    .DataSource(ds => ds.Mvc()
+                    .Controller("ManagementPage")
+                    .LoadAction("GetShippingDocuments"))
+    .KeyExpr("Id")
+    .SearchPanel(sp => sp.Visible(true))
+    .HeaderFilter(hf => hf.Visible(true))
+    .Paging(p => p.PageSize(15))
+    .Pager(p => p.Visible(true))
+    .OnRowExpanded("onRowExpanded")
+    .Editing(editing => {
+        editing.Mode(GridEditMode.Cell);
+        editing.AllowUpdating(true);
+        editing.AllowAdding(true);
+        editing.AllowDeleting(true);
+    })
+    .Columns(c => {
+                    
+                    c.Add().DataField("Id").AllowEditing(false);
+                    c.Add().DataField("PartnerId");
+                    c.Add().DataField("DocumentIdNumber");
+                    c.Add().DataField("IsAllMeasured");                    
+                    @* c.AddFor(m => m.Partner.Name); *@
+
+                    c.Add()
+                        .Caption("Completed")
+                        .DataType(GridColumnDataType.Boolean)
+                        .CalculateCellValue("calculateCellValue");
+                })
+    .Toolbar(toolbar => {
+            toolbar.Items(items => {
+                items.Add()
+                    .Name("addRowButton")
+                    .ShowText(ToolbarItemShowTextMode.Always);
+
+                items.Add()
+                    .Location(ToolbarItemLocation.After)
+                    .Widget(w =>
+                        w.Button()
+                            .Text("Delete Selected Records")
+                            .Icon("trash")
+                            .Disabled(true)
+                            .OnClick("onDeleteBtnClick")
+                    );
+            });
+        })
+        .MasterDetail(md => {
+        md.Enabled(true);
+        md.Template(@<text>
+            <div class="master-detail-caption"><%- data.ShippingDate %> <%- data.LicencePlate %>'s shippingdocuments:</div>
+            <div id="fileuploader">
+    <div class="widget-container">
+
+        <section id="tabs" class="project-tab">
+            
+                <div class="row">
+                    <div class="col-md-12">
+                        <nav>
+                            <div class="nav nav-tabs nav-fill" id="nav-tab" role="tablist">
+                                <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Partner info</a>
+                                <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Products</a>
+                                <a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Files</a>
+                            </div>
+                        </nav>
+                        <div class="tab-content" id="nav-tabContent">
+                            <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
+                                <table class="table" cellspacing="0">
+                                    <thead>
+                                        <tr>
+                                            <th>Project Name</th>
+                                            <th>Employer</th>
+                                            <th>Awards</th>
+                                        </tr>
+                                    </thead>
+                                    <tbody>
+                                        <tr>
+                                            <td><a href="#">Work 1</a></td>
+                                            <td>Doe</td>
+                                            <td>john@example.com</td>
+                                        </tr>
+                                        <tr>
+                                            <td><a href="#">Work 2</a></td>
+                                            <td>Moe</td>
+                                            <td>mary@example.com</td>
+                                        </tr>
+                                        <tr>
+                                            <td><a href="#">Work 3</a></td>
+                                            <td>Dooley</td>
+                                            <td>july@example.com</td>
+                                        </tr>
+                                    </tbody>
+                                </table>
+                            </div>
+                            <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">
+                                <table class="table" cellspacing="0">
+                                    <thead>
+                                        <tr>
+                                            <th>Project Name</th>
+                                            <th>Employer</th>
+                                            <th>Time</th>
+                                        </tr>
+                                    </thead>
+                                    <tbody>
+                                        <tr>
+                                            <td><a href="#">Work 1</a></td>
+                                            <td>Doe</td>
+                                            <td>john@example.com</td>
+                                        </tr>
+                                        <tr>
+                                            <td><a href="#">Work 2</a></td>
+                                            <td>Moe</td>
+                                            <td>mary@example.com</td>
+                                        </tr>
+                                        <tr>
+                                            <td><a href="#">Work 3</a></td>
+                                            <td>Dooley</td>
+                                            <td>july@example.com</td>
+                                        </tr>
+                                    </tbody>
+                                </table>
+                            </div>
+                            <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">
+                                @(Html.DevExtreme().FileUploader()
+            .ID(new JS("'shippingDocumentUploader-' + data.Id"))
+            .Name("myFile")
+            .Multiple(true)
+            .Accept("application/pdf")
+            .UploadMode(FileUploadMode.Instantly)
+            .UploadUrl(Url.Action("UploadFile", "Shipping"))
+            .OnValueChanged("fileUploader_valueChanged")
+            .OnUploaded("fileUploader_fileUploaded")
+        )
+        <div class="content" id="selected-files">
+            <div>
+                <h4>Selected Files</h4>
+            </div>
+        </div>
+        
+        @* <div id="@(new JS("'shippingDocumentGridContainer-' + data.ID"))"></div>
+            @(Html.DevExtreme().DataGrid<FruitBank.Common.Entities.ShippingDocument>()
+                .ColumnAutoWidth(true)
+                .ShowBorders(true)
+                .ID(new JS("'shippingDocumentGridContainer-' + data.Id"))
+                .Columns(columns => {
+                    columns.AddFor(m => m.Id).AllowEditing(false);
+
+                    columns.AddFor(m => m.Country);
+
+                    columns.AddFor(m => m.Created);
+
+                    columns.AddFor(m => m.PartnerId);
+
+                    columns.Add()
+                        .Caption("Completed")
+                        .DataType(GridColumnDataType.Boolean)
+                        .CalculateCellValue("calculateCellValue");
+                })
+                .DataSource(ds => ds.Mvc()
+                    .Controller("Shipping")
+                    .LoadAction("GetShippingDocumentsByShippingId")
+                    .LoadParams(new { shippingId = new JS("data.Id") })
+                    .Key("Id")
+                )
+            ) *@
+                            </div>
+                        </div>
+                    </div>
+                </div>
+           
+        </section>
+        </div>
+        </div>
+
+        </text>);
+    })
+)
+</div>
+
+
+<script>
+    function calculateCellValue(rowData) {
+        return rowData.Status === "Completed";
+    }
+</script>
+
+<script>
+    function onDeleteBtnClick(){
+        let dataGrid = $("#gridContainer").dxDataGrid("instance");
+        $.when.apply($, dataGrid.getSelectedRowsData().map(function(data) {
+            return dataGrid.getDataSource().store().remove(data.ID);
+        })).done(function() {
+            dataGrid.refresh();
+        });
+    }
+
+    function calculateFilterExpression(filterValue, selectedFilterOperation, target) {
+        if(target === "search" && typeof(filterValue) === "string") {
+            return [this.dataField, "contains", filterValue]
+        }
+        return function(data) {
+            return (data.AssignedEmployee || []).indexOf(filterValue) !== -1
+        }
+    }
+
+    function onSelectionChanged(data) {
+        let dataGrid = $("#gridContainer").dxDataGrid("instance");
+        dataGrid.option("toolbar.items[1].options.disabled", !data.selectedRowsData.length);
+    }
+
+    function onRowExpanded(e) {
+        e.component.dxDataGrid("getDataSource").reload();
+    }
+</script>
+
+<script>
+
+    function fileUploader_valueChanged(e) {
+        var files = e.value;
+        if(files.length > 0) {
+            $("#selected-files .selected-item").remove();
+
+            $.each(files, function(i, file) {
+                var $selectedItem = $("<div />").addClass("selected-item");
+                $selectedItem.append(
+                    $("<span />").html("Name: " + file.name + "<br/>"),
+                    $("<span />").html("Size " + file.size + " bytes" + "<br/>"),
+                    $("<span />").html("Type " + file.type + "<br/>"),
+                    $("<span />").html("Last Modified Date: " + file.lastModifiedDate)
+                );
+                $selectedItem.appendTo($("#selected-files"));
+            });
+            $("#selected-files").show();
+        }
+        else
+            $("#selected-files").hide();
+    }
+
+    function getGridInstance() {
+        return $("#shippingDocumentUploader").dxFileUploader("instance");
+    }
+    
+    function fileUploader_fileUploaded(e) {
+        const fileUploaderId = e.component.element().attr('id');
+
+    // 2. Extract the number from the ID
+    const match = fileUploaderId.match(/\d+$/);
+
+    if (match) {
+        const uniqueId = match[0];
+        const gridId = `shippingDocumentGridContainer-${uniqueId}`;
+
+        // 3. Get the DevExtreme grid instance and refresh it
+        const grid = $(`#${gridId}`).dxDataGrid('instance');
+        
+        if (grid) {
+            grid.dxDataGrid("getDataSource").reload();
+            // Optional: Show a success notification
+            DevExpress.ui.notify("Documents updated successfully!", "success", 2000);
+        } else {
+            console.error(`DevExtreme grid with ID "${gridId}" not found.`);
+        }
+    } else {
+        console.error("Could not find a unique ID number from the file uploader.");
+    }
+        // shippingDocumentGridContainer
+        //$("#shippingDocumentGridContainer" + e.component.ID).dxDataGrid("getDataSource").reload();
+    }
+
+</script>
+                   

Nop.Plugin.Misc.AIPlugin/Areas/Admin/Views/Order/ShippingGridComponent.cshtml

@@ -0,0 +1,116 @@
+@model Nop.Plugin.Misc.FruitBankPlugin.Areas.Admin.Models.TestGridModel
+@using DevExtreme.AspNet.Mvc
+
+@{
+    var contextId = Model;
+    // var gridId = $"dataGrid_{Guid.NewGuid():N}";
+}
+
+<div>
+    @(Html.DevExtreme().DataGrid()
+    .ID(Model.Id.ToString())
+    .ShowBorders(true)
+    .DataSource(ds => ds.Mvc()
+                    .Controller("ManagementPage")
+                    .LoadAction("GetShippings"))
+    .KeyExpr("Id")
+    .SearchPanel(sp => sp.Visible(true))
+    .HeaderFilter(hf => hf.Visible(true))
+    .Paging(p => p.PageSize(15))
+    .Pager(p => p.Visible(true))
+    .OnRowExpanded("onRowExpanded")
+    .Editing(editing => {
+        editing.Mode(GridEditMode.Cell);
+        editing.AllowUpdating(true);
+        editing.AllowAdding(true);
+        editing.AllowDeleting(true);
+    })
+    .Columns(c => {
+        c.Add().DataField("Id").AllowEditing(false);
+        c.Add().DataField("ShippingDate");
+        c.Add().DataField("LicencePlate");
+        c.Add().DataField("IsAllMeasured");        
+    })
+    .Toolbar(toolbar => {
+            toolbar.Items(items => {
+                items.Add()
+                    .Name("addRowButton")
+                    .ShowText(ToolbarItemShowTextMode.Always);
+
+                items.Add()
+                    .Location(ToolbarItemLocation.After)
+                    .Widget(w =>
+                        w.Button()
+                            .Text("Delete Selected Records")
+                            .Icon("trash")
+                            .Disabled(true)
+                            .OnClick("onDeleteBtnClick")
+                    );
+            });
+        })
+        .MasterDetail(md => {
+        md.Enabled(true);
+        md.Template(@<text>
+            <div class="master-detail-caption"><%- data.ShippingDate %> <%- data.LicencePlate %>'s shippingdocuments:</div>
+            
+        <div id="@(new JS("'shippingDocumentGridContainer-' + data.ID"))"></div>
+            @(Html.DevExtreme().DataGrid<FruitBank.Common.Entities.ShippingDocument>()
+                .ColumnAutoWidth(true)
+                .ShowBorders(true)
+                .ID(new JS("'shippingDocumentGridContainer-' + data.Id"))
+                .Columns(columns => {
+                    columns.AddFor(m => m.Id).AllowEditing(false);
+
+                    columns.AddFor(m => m.Country);
+
+                    columns.AddFor(m => m.Created);
+
+                    columns.AddFor(m => m.PartnerId);
+
+                    columns.Add()
+                        .Caption("Completed")
+                        .DataType(GridColumnDataType.Boolean)
+                        .CalculateCellValue("calculateCellValue");
+                })
+                .DataSource(ds => ds.Mvc()
+                    .Controller("Shipping")
+                    .LoadAction("GetShippingDocumentsByShippingId")
+                    .LoadParams(new { shippingId = new JS("data.Id") })
+                    .Key("Id")
+                )
+            )
+        </text>);
+    })
+)
+</div>
+
+
+<script>
+    function onDeleteBtnClick(){
+        let dataGrid = $("#gridContainer").dxDataGrid("instance");
+        $.when.apply($, dataGrid.getSelectedRowsData().map(function(data) {
+            return dataGrid.getDataSource().store().remove(data.ID);
+        })).done(function() {
+            dataGrid.refresh();
+        });
+    }
+
+    function calculateFilterExpression(filterValue, selectedFilterOperation, target) {
+        if(target === "search" && typeof(filterValue) === "string") {
+            return [this.dataField, "contains", filterValue]
+        }
+        return function(data) {
+            return (data.AssignedEmployee || []).indexOf(filterValue) !== -1
+        }
+    }
+
+    function onSelectionChanged(data) {
+        let dataGrid = $("#gridContainer").dxDataGrid("instance");
+        dataGrid.option("toolbar.items[1].options.disabled", !data.selectedRowsData.length);
+    }
+
+    function onRowExpanded(e) {
+        e.component.dxDataGrid("getDataSource").reload();
+    }
+</script>
+                   

Nop.Plugin.Misc.AIPlugin/Areas/Admin/Views/Order/Test.cshtml

@@ -1,4 +1,43 @@
-@{
+@model Nop.Plugin.Misc.FruitBankPlugin.Areas.Admin.Models.TestPageModel
-    Layout = "_AdminLayout";
+
+@{
+    ViewData["Title"] = "Simple Tabs Example";
 }
-<h1>TEST VIEW FROM PLUGIN</h1>
+
+<h2>@ViewData["Title"]</h2>
+<section id="tabs" class="project-tab">
+    <div class="container-fluid">
+<ul class="nav nav-tabs" id="gridTabs" role="tablist">
+    @for (int i = 0; i < Model.Grids.Count; i++)
+    {
+        var grid = Model.Grids[i];
+        <li class="nav-item">
+            <a class="nav-link @(i == 0 ? "active" : "")"
+               id="tab-@grid.Id.ToString()"
+               data-toggle="tab"
+               href="#content-@grid.Id.ToString()"
+               role="tab">
+                @grid.GridName
+            </a>
+        </li>
+    }
+</ul>
+
+<div class="tab-content mt-3" id="gridTabContent">
+    @for (int i = 0; i < Model.Grids.Count; i++)
+    {
+        var grid = Model.Grids[i];
+        <div class="tab-pane fade @(i == 0 ? "show active" : "")"
+             id="content-@grid.Id.ToString()"
+             role="tabpanel">
+            @await Component.InvokeAsync(grid.ViewComponentName, new { model = grid })
+        </div>
+    }
+</div>
+
+</div>
+</section>
+
+
+
+

Nop.Plugin.Misc.AIPlugin/Areas/Admin/Views/Shipping/List.cshtml

@@ -93,6 +93,7 @@
     .HeaderFilter(hf => hf.Visible(true))
     .Paging(p => p.PageSize(15))
     .Pager(p => p.Visible(true))
+    .OnRowExpanded("onRowExpanded")
     .Editing(editing => {
         editing.Mode(GridEditMode.Cell);
         editing.AllowUpdating(true);
@@ -129,7 +130,7 @@
             div id="fileuploader">
     <div class="widget-container">
         @(Html.DevExtreme().FileUploader()
-            .ID($"file-uploader-{new JS("data.Id")}")
+            .ID(new JS("'shippingDocumentUploader-' + data.Id"))
             .Name("myFile")
             .Multiple(true)
             .Accept("application/pdf")
@@ -144,11 +145,11 @@
             </div>
         </div>
         </div>
-        <div id="@($"shippingDocumentGridDiv-{new JS("data.Id")}")"></div>
+        <div id="@(new JS("'shippingDocumentGridContainer-' + data.ID"))"></div>
             @(Html.DevExtreme().DataGrid<FruitBank.Common.Entities.ShippingDocument>()
                 .ColumnAutoWidth(true)
                 .ShowBorders(true)
-                .ID($"shippingDocumentGridContainer-{new JS("data.Id")}")
+                .ID(new JS("'shippingDocumentGridContainer-' + data.Id"))
                 .Columns(columns => {
                     columns.AddFor(m => m.Id).AllowEditing(false);
 
@@ -163,7 +164,12 @@
                         .DataType(GridColumnDataType.Boolean)
                         .CalculateCellValue("calculateCellValue");
                 })
-                .DataSource(new JS("data.ShippingDocuments"))
+                .DataSource(ds => ds.Mvc()
+                    .Controller("Shipping")
+                    .LoadAction("GetShippingDocumentsByShippingId")
+                    .LoadParams(new { shippingId = new JS("data.Id") })
+                    .Key("Id")
+                )
             )
         </text>);
     })
@@ -203,6 +209,10 @@
         let dataGrid = $("#gridContainer").dxDataGrid("instance");
         dataGrid.option("toolbar.items[1].options.disabled", !data.selectedRowsData.length);
     }
+
+    function onRowExpanded(e) {
+        e.component.dxDataGrid("getDataSource").reload();
+    }
 </script>
 
 <script>
@@ -229,7 +239,7 @@
     }
 
     function getGridInstance() {
-        return $("#file-uploader").dxFileUploader("instance");
+        return $("#shippingDocumentUploader").dxFileUploader("instance");
     }
     
     function fileUploader_fileUploaded(e) {

Nop.Plugin.Misc.AIPlugin/Areas/Admin/Views/_AdminScripts.cshtml

@@ -62,7 +62,7 @@ else
 <script src="~/lib_npm/admin-lte/js/adminlte.min.js"></script>
 <script src="~/lib_npm/overlayscrollbars/browser/overlayscrollbars.browser.es6.min.js"></script>
 <script src="~/lib_npm/bootstrap-touchspin/jquery.bootstrap-touchspin.min.js"></script>
-<script src="~/lib_npm/bootstrap/js/bootstrap.bundle.min.js"></script>
+@* <script src="~/lib_npm/bootstrap/js/bootstrap.bundle.min.js"></script> *@
 <script src="~/lib_npm/jquery-validation/jquery.validate.min.js"></script>
 <script src="~/lib_npm/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script>
 <script src="~/lib_npm/admin-lte/plugins/select2/js/select2.full.min.js"></script>
@@ -116,7 +116,7 @@ else
 
 @NopHtml.GenerateScripts(ResourceLocation.Head)
 @NopHtml.GenerateInlineScripts(ResourceLocation.Head)
-
+<script src="~/lib_npm/bootstrap/js/bootstrap.bundle.min.js"></script>
 <script src="~/Plugins/Misc.FruitBankPlugin/js/devextreme/dx.web.js"></script>
 <script src="~/Plugins/Misc.FruitBankPlugin/js/devextreme/aspnet/dx.aspnet.mvc.js"></script>
 <script src="~/Plugins/Misc.FruitBankPlugin/js/devextreme/aspnet/dx.aspnet.data.js"></script>

Nop.Plugin.Misc.AIPlugin/Infrastructure/RouteProvider.cs

@@ -86,6 +86,31 @@ public class RouteProvider : IRouteProvider
             name: "Plugin.FruitBank.Admin.Shipping.ReloadPartialView",
             pattern: "Admin/Shipping/ReloadPartialView",
             defaults: new { controller = "Shipping", action = "ReloadPartialView", area = AreaNames.ADMIN });
+
+        endpointRouteBuilder.MapControllerRoute(
+            name: "Plugin.FruitBank.Admin.Shipping.GetShippingDocumentsByShippingId",
+            pattern: "Admin/Shipping/GetShippingDocumentsByShippingId",
+            defaults: new { controller = "Shipping", action = "GetShippingDocumentsByShippingId", area = AreaNames.ADMIN });
+
+        endpointRouteBuilder.MapControllerRoute(
+            name: "Plugin.FruitBank.Admin.ManagementPage.Test",
+            pattern: "Admin/ManagementPage/Test",
+            defaults: new { controller = "ManagementPage", action = "Test", area = AreaNames.ADMIN });
+
+        endpointRouteBuilder.MapControllerRoute(
+            name: "Plugin.FruitBank.Admin.ManagementPage.GetShippings",
+            pattern: "Admin/ManagementPage/GetShippings",
+            defaults: new { controller = "ManagementPage", action = "GetShippings", area = AreaNames.ADMIN });
+
+        endpointRouteBuilder.MapControllerRoute(
+            name: "Plugin.FruitBank.Admin.ManagementPage.LoadPartial",
+            pattern: "Admin/ManagementPage/LoadPartial",
+            defaults: new { controller = "ManagementPage", action = "LoadPartial", area = AreaNames.ADMIN });
+
+        endpointRouteBuilder.MapControllerRoute(
+            name: "Plugin.FruitBank.Admin.ManagementPage.GetPartners",
+            pattern: "Admin/ManagementPage/GetPartners",
+            defaults: new { controller = "ManagementPage", action = "GetPartners", area = AreaNames.ADMIN });
     }
 
     /// <summary>

Nop.Plugin.Misc.AIPlugin/Nop.Plugin.Misc.FruitBankPlugin.csproj

@@ -149,6 +149,15 @@
     <None Update="Areas\Admin\Components\_DocumentsGridPartial.cshtml">
       <CopyToOutputDirectory>Always</CopyToOutputDirectory>
     </None>
+    <None Update="Areas\Admin\Views\Order\ShippingDocumentGridComponent.cshtml">
+      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
+    </None>
+    <None Update="Areas\Admin\Views\Order\PartnersGridComponent.cshtml">
+      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
+    </None>
+    <None Update="Areas\Admin\Views\Order\ShippingGridComponent.cshtml">
+      <CopyToOutputDirectory>Always</CopyToOutputDirectory>
+    </None>
     <None Update="Areas\Admin\Components\_WelcomeMessage.cshtml">
       <CopyToOutputDirectory>Always</CopyToOutputDirectory>
     </None>