Add MgCardView component & refactor MeasuringOut to tabs

Introduced a reusable, responsive MgCardView<TItem> component for displaying data as cards with optional filtering and paging. Refactored the MeasuringOut page to use a tabbed interface: daily tasks are now shown as filterable cards, and measuring details are separated into a dedicated tab. Improved UI clarity, code organization, and maintainability.

FruitBankHybrid.Shared/Pages/MeasuringIn.razor

@@ -10,7 +10,7 @@
 
 <h3>Áru bevételezés</h3>
 
-<div style="margin-top: 50px;">
+<div style="margin-top: 30px;">
 	<DxLoadingPanel @bind-Visible="LoadingPanelVisible"
 					IsContentBlocked="true"
 					ApplyBackgroundShading="true"

FruitBankHybrid.Shared/Pages/MeasuringOut.razor

@@ -7,13 +7,13 @@
 @using FruitBank.Common.SignalRs
 @using FruitBankHybrid.Shared.Components
 @using FruitBankHybrid.Shared.Services
+@using AyCode.Blazor.Components.Components.CardViews
 @using Nop.Core.Domain.Orders
 <h3>Áru kiadás</h3>
 
 <DxDialogProvider />
 
-<div style="margin-top: 50px;">
+<div style="margin-top: 30px;">
-
 	<DxLoadingPanel @bind-Visible="LoadingPanelVisible"
 					IsContentBlocked="true"
 					ApplyBackgroundShading="true"
@@ -22,12 +22,9 @@
 					IndicatorAnimationType="WaitIndicatorAnimationType.Spin"
 					Text="Adatok szinkronizálása folyamatban...">
 
-		<DxFormLayout CaptionPosition="CaptionPosition.Vertical" CssClass="w-100">
+		<DxFormLayout CaptionPosition="CaptionPosition.Vertical" CssClass="w-100 measuring-form-layout">
-			<DxFormLayoutItem Caption="Dátum" ColSpanMd="3"
+			<DxFormLayoutItem Caption="Dátum" ColSpanXs="8" ColSpanSm="8" ColSpanMd="2"
 							  CaptionCssClass="@(SelectedOrder != null && _measuringDates.Where(x => MeasurementService.DaysEqual(x.DateTime, SelectedOrder.DateOfReceiptOrCreated)).All(x => x.IsMeasured) ? "text-success" : "")">
-				<div class="container-fluid p-0">
-					<div class="row">
-						<div class="col-9 p-0">
 				<DxDateEdit DisplayFormat="m"
 							Format="m"
 							Context="ctxOrderDate"
@@ -50,14 +47,47 @@
 						}
 					</DayCellTemplate>
 				</DxDateEdit>
-						</div>
-						<div class="col-3 p-0">
-							<DxSpinEdit T="int" Value="1" Increment="1" MinValue="1" ValueChanged="async i => await RefreshOrdersFromDb(DateTime.Now, i)"></DxSpinEdit>
-						</div>
-					</div>
-				</div>
 			</DxFormLayoutItem>
+			<DxFormLayoutItem Caption="Napok száma" ColSpanXs="4" ColSpanSm="4" ColSpanMd="1">
+				<DxSpinEdit T="int" Value="1" Increment="1" MinValue="1"
+							ValueChanged="async i => await RefreshOrdersFromDb(DateTime.Now, i)" />
+			</DxFormLayoutItem>
+		</DxFormLayout>
 
+		<DxTabs ActiveTabIndex="(int)_activeTab" ActiveTabIndexChanged="i => _activeTab = (MeasuringTab)i" RenderMode="TabsRenderMode.OnDemand" CssClass="measuring-tabs">
+			<DxTabPage Text="Napi feladatok">
+				<div class="p-3">
+					<MgCardView TItem="OrderDto" Data="@FilteredOrders"
+					            ShowFilterPanel="true"
+					            OnCardClick="NavigateToMeasuringTab">
+						<FilterPanel>
+							<DxTagBox Data="@(Enum.GetValues<MeasuringStatus>())"
+									  NullText="Összes státusz"
+									  @bind-Values="_statusFilter"
+									  ClearButtonDisplayMode="DataEditorClearButtonDisplayMode.Auto"
+									  CssClass="cw-480" />
+						</FilterPanel>
+						<CardTemplate>
+							<div class="d-flex justify-content-between align-items-start mb-2">
+								<h6 class="mb-0">#@context.CustomOrderNumber</h6>
+								<span class="badge @GetOrderStatusBadgeCssClass(context.MeasuringStatus)">@GetOrderStatusText(context.MeasuringStatus)</span>
+							</div>
+							<div class="text-muted small mb-2">
+								<strong>@context.DateOfReceiptOrCreated.ToString("H:mm")</strong> — @context.Customer.Company
+							</div>
+							@foreach (var item in context.OrderItemDtos)
+							{
+								<div class="@GetOrderStatusCssClass(item.MeasuringStatus) small">
+									@item.ProductName — @item.TrayQuantity/@item.Quantity rekesz
+								</div>
+							}
+						</CardTemplate>
+					</MgCardView>
+				</div>
+			</DxTabPage>
+			<DxTabPage Text="Mérés">
+				<div class="p-3">
+					<DxFormLayout CaptionPosition="CaptionPosition.Vertical" CssClass="w-100">
 						<DxFormLayoutItem Caption="Átvétel időpontja:" ColSpanMd="5" CaptionCssClass="@(SelectedOrder?.IsMeasured == true ? "text-success" : "")">
 							<DxComboBox Data="@SelectedDayOrders"
 										@bind-Value="@SelectedOrder"
@@ -73,7 +103,7 @@
 										ClearButtonDisplayMode="DataEditorClearButtonDisplayMode.Auto"
 										DropDownTriggerMode="DropDownTriggerMode.Click"
 										ListRenderMode="ListRenderMode.Entire"
-							ShowDropDownButton="false"
+										ShowDropDownButton="true"
 										SelectedDataItemChanged="@((SelectedDataItemChangedEventArgs<OrderDto> args) => OnSelectedOrderChanged(args))"
 										InputId="cbOrders">
 								<ItemDisplayTemplate>
@@ -88,7 +118,11 @@
 
 						@if (SelectedOrder == null)
 						{
-				<DxFormLayoutItem ColSpanMd="2" />
+							<DxFormLayoutItem ColSpanMd="5">
+								<div class="alert alert-info mt-2" role="alert">
+									<i class="me-1">ℹ</i> Válasszon ki egy rendelést a mérés indításához.
+								</div>
+							</DxFormLayoutItem>
 						}
 						else
 						{
@@ -109,7 +143,6 @@
 							}
 						}
 
-			@* <DxFormLayoutItem ColSpanMd="1"></DxFormLayoutItem> *@
 						@if (SelectedOrder != null && LoggedInModel.IsRevisor)
 						{
 							var isCompleteOrder = SelectedOrder.IsComplete;
@@ -127,8 +160,8 @@
 					}
 					else if (!HasMeasuringAccess)
 					{
-			<div style="margin-top: 30px;">
+						<div class="alert alert-warning mt-4" role="alert">
-				<H3>Mások végzik a mérést!</H3>
+							<strong>⚠ Figyelem!</strong> Jelenleg más felhasználó végzi a mérést ennél a rendelésnél.
 						</div>
 					}
 					else
@@ -136,13 +169,13 @@
 						string? orderNote;
 						if (!(orderNote = SelectedOrder?.OrderNotes.LastOrDefault(x => x.Note.StartsWith('*'))?.Note).IsNullOrWhiteSpace())
 						{
-				<div class="container-fluid p-0" style="margin-top: 20px">
+							<div class="alert alert-info mt-3" role="alert">
-					<b> Megjegyzés: </b><span>@(orderNote) </span>
+								<strong>📝 Megjegyzés:</strong> @(orderNote)
 							</div>
 						}
 
-			<div style="margin-top: 30px;">
+						<div class="mt-5">
-				<h4 style="margin-bottom: 30px;" class="@(SelectedOrder?.IsMeasured == true ? "text-success" : "")">
+							<h4 class="mb-1 @(SelectedOrder?.IsMeasured == true ? "text-success" : "")">
 								Rendelés azonosító: #@(SelectedOrder?.CustomOrderNumber)
 							</h4>
 
@@ -152,7 +185,6 @@
 										 AnimationType="LayoutAnimationType.Slide">
 								<DataMappings>
 									<DxAccordionDataMapping Text=ProductName></DxAccordionDataMapping>
-						@* <DxAccordionDataMapping Text="OrderItemId" Level="1"></DxAccordionDataMapping> *@
 								</DataMappings>
 								<ItemHeaderTextTemplate>
 									@{
@@ -235,18 +267,22 @@
 												@if (!_errorText.IsNullOrWhiteSpace())
 												{
 													<DxFormLayoutItem Context="ctxFromLayoutItemError" ColSpanMd="12" BeginRow="true">
-											<text>HIBA! @_errorText</text>
+														<div class="alert alert-danger" role="alert">
+															<strong>⚠ Hiba:</strong> @_errorText
+														</div>
 													</DxFormLayoutItem>
-										//_errorText = string.Empty;
 												}
 											</DxFormLayout>
-								<div style="margin-bottom: 20px;"></div>
+											<div class="mb-3"></div>
 										}
 									}
 								</ItemContentTemplate>
 							</DxAccordion>
 						</div>
 					}
+				</div>
+			</DxTabPage>
+		</DxTabs>
 	</DxLoadingPanel>
 </div>
 

FruitBankHybrid.Shared/Pages/MeasuringOut.razor.cs

@@ -4,6 +4,7 @@ using AyCode.Services.SignalRs;
 using DevExpress.Blazor;
 using FruitBank.Common.Dtos;
 using FruitBank.Common.Entities;
+using FruitBank.Common.Enums;
 using FruitBank.Common.Models;
 using FruitBank.Common.SignalRs;
 using FruitBankHybrid.Shared.Extensions;
@@ -30,8 +31,16 @@ namespace FruitBankHybrid.Shared.Pages
         private LoggerClient _logger = null!;
         private string _errorText;
 
+        private enum MeasuringTab
+        {
+            DailyTasks = 0,
+            Measuring = 1
+        }
+
         private bool _enablePalletItems = true;
         private int _lastDaysCount = 1;
+        private MeasuringTab _activeTab = MeasuringTab.DailyTasks;
+        private IEnumerable<MeasuringStatus> _statusFilter = [MeasuringStatus.NotStarted, MeasuringStatus.Started, MeasuringStatus.Finnished];
         public bool HasMeasuringAccess;
         public bool LoadingPanelVisible { get; set; } = true;
         public bool IsAllOrderItemPalletAudited => SelectedOrder?.IsAllOrderItemAudited ?? false;
@@ -42,6 +51,12 @@ namespace FruitBankHybrid.Shared.Pages
 
         private List<MeasuringDateSelectorModel> _measuringDates = null!;
 
+        private IReadOnlyList<OrderDto> FilteredOrders => SelectedDayOrders is null
+            ? []
+            : _statusFilter.Any()
+                ? SelectedDayOrders.Where(o => _statusFilter.Contains(o.MeasuringStatus)).ToList()
+                : SelectedDayOrders;
+
         protected override async Task OnInitializedAsync()
         {
             LoadingPanelVisible = true;
@@ -187,7 +202,7 @@ namespace FruitBankHybrid.Shared.Pages
                 SelectedOrder ??= SelectedDayOrders.FirstOrDefault();
             }
 
-            LoadingPanelVisible = SelectedOrder != null; //Lefut a change és ott lesz false! - J.
+            LoadingPanelVisible = false;
         }
 
         private async Task OnMeasuringDateChanged(DateTime selectedDateTime) => await RefreshOrdersFromDb(selectedDateTime, _lastDaysCount);
@@ -206,42 +221,11 @@ namespace FruitBankHybrid.Shared.Pages
 
         private async Task OnSelectedOrderChanged(SelectedDataItemChangedEventArgs<OrderDto> eventArgs)
         {
-            //var orderDtosFromDb = await FruitBankSignalRClient.GetPendingOrderDtos();
-            //if (orderDtosFromDb != null) RefreshOrderGenericAttributes(orderDtosFromDb, SelectedDayOrders);
-            //else MessageBox.ShowMessageBox("Hiba", "Az adatok letöltése sikertelen!", MessageBoxRenderStyle.Danger);
-
             var orderDto = eventArgs.DataItem;
             if (orderDto != null && !LoadingPanelVisible)
-            {
+                await RefreshOrderStatusFromDbAsync(orderDto);
-                //LoadingPanelVisible = true;
-                var orderFromDb = await FruitBankSignalRClient.GetOrderDtoById(orderDto.Id);
 
-                if (orderFromDb != null)
+            await ApplyMeasuringAccessAsync(orderDto);
-                {
-                    orderDto.OrderStatus = orderFromDb.OrderStatus;
-                    orderDto.GenericAttributes.UpdateBaseEntityCollection(orderFromDb.GenericAttributes, false);
-
-                    //if (LoggedInModel.IsRevisor)
-                    //{
-                    //    orderDto.OrderItemDtos.UpdateCollection(orderFromDb.OrderItemDtos, false);
-
-                    //    var orderItemPalletsByOrderId = orderFromDb.OrderItemDtos.Where(o => o.OrderItemPallets.Count > 0).ToDictionary(k => k.Id, v => v.OrderItemPallets);
-                    //    foreach (var orderItemDto in orderDto.OrderItemDtos)
-                    //    {
-                    //        if (orderItemPalletsByOrderId.TryGetValue(orderDto.Id, out var orderItemPallets))
-                    //            orderItemDto.OrderItemPallets.UpdateCollection(orderItemPallets, false);
-                    //    }
-                    //}
-                }
-            }
-
-            LoadingPanelVisible = false;
-            HasMeasuringAccess = orderDto?.HasMeasuringAccess(LoggedInModel.CustomerDto?.Id, LoggedInModel.IsRevisor) ?? false;
-
-            StateHasChanged();
-
-            if (!HasMeasuringAccess && orderDto != null)
-                await DialogService.ShowMessageBoxAsync("Információ", "A mérés már folyamatban, válasszon másik rendelést!", MessageBoxRenderStyle.Info);
         }
 
         private Task OnOrderItemPalletValueChanged(OrderItemPallet orderItemPallet, OrderItemDto selectedOrderItemDto)
@@ -383,6 +367,73 @@ namespace FruitBankHybrid.Shared.Pages
             }
         }
 
+        /// <summary>
+        /// Navigates from a card click (Napi feladatok tab) to the Mérés tab with the selected order.
+        /// Loads the full order from DB and switches the active tab.
+        /// </summary>
+        private async Task NavigateToMeasuringTab(OrderDto order)
+        {
+            LoadingPanelVisible = true;
+            SelectedOrder = order;
+
+            await RefreshOrderStatusFromDbAsync(order);
+
+            _activeTab = MeasuringTab.Measuring;
+
+            await ApplyMeasuringAccessAsync(order);
+        }
+
+        /// <summary>
+        /// Fetches the latest order data from DB and updates status and generic attributes.
+        /// </summary>
+        private async Task RefreshOrderStatusFromDbAsync(OrderDto order)
+        {
+            var orderFromDb = await FruitBankSignalRClient.GetOrderDtoById(order.Id);
+            if (orderFromDb != null)
+            {
+                order.OrderStatus = orderFromDb.OrderStatus;
+                order.GenericAttributes.UpdateBaseEntityCollection(orderFromDb.GenericAttributes, false);
+            }
+        }
+
+        /// <summary>
+        /// Sets measuring access, hides loading panel, refreshes UI, and shows info dialog if access is denied.
+        /// </summary>
+        private async Task ApplyMeasuringAccessAsync(OrderDto? order)
+        {
+            HasMeasuringAccess = order?.HasMeasuringAccess(LoggedInModel.CustomerDto?.Id, LoggedInModel.IsRevisor) ?? false;
+            LoadingPanelVisible = false;
+
+            StateHasChanged();
+
+            if (!HasMeasuringAccess && order != null)
+                await DialogService.ShowMessageBoxAsync("Információ", "A mérés már folyamatban, válasszon másik rendelést!", MessageBoxRenderStyle.Info);
+        }
+
+        private static string GetOrderStatusCssClass(MeasuringStatus status) => status switch
+        {
+            MeasuringStatus.Audited => "text-success",
+            MeasuringStatus.Finnished => "text-primary",
+            MeasuringStatus.Started => "text-warning",
+            _ => "text-muted"
+        };
+
+        private static string GetOrderStatusBadgeCssClass(MeasuringStatus status) => status switch
+        {
+            MeasuringStatus.Audited => "bg-success",
+            MeasuringStatus.Finnished => "bg-primary",
+            MeasuringStatus.Started => "bg-warning text-dark",
+            _ => "bg-secondary"
+        };
+
+        private static string GetOrderStatusText(MeasuringStatus status) => status switch
+        {
+            MeasuringStatus.Audited => "Lezárva",
+            MeasuringStatus.Finnished => "Kész",
+            MeasuringStatus.Started => "Folyamatban",
+            _ => "Nem kezdett"
+        };
+
         public void Dispose()
         {
             FruitBankSignalRClient.OnMessageReceived -= SignalRClientOnMessageReceived;

FruitBankHybrid.Shared/wwwroot/app.css

@@ -79,12 +79,19 @@ h1:focus {
 
 .measuring-form-layout {
 	margin-top: 15px;
-	margin-bottom: 25px;
+	margin-bottom: 10px;
 	padding: 8px;
-	background-color: lightgrey;
+	background-color: #e9eff5;
+	border: 1px solid #d5dde6;
 	border-radius: 8px;
 }
 
+.measuring-tabs {
+	border: 1px solid #d5dde6;
+	border-radius: 8px;
+	padding: 0;
+}
+
 .dd-body-class,
 .dd-body-class .dxbl-list-box-render-container {
 	max-height: 600px !important;