Refactor measuring UI, centralize status logic

- Reworked MeasuringIn to use tabbed interface with card view and improved form layout
- Unified status badge/text/color logic via new MeasurementService helpers
- Updated MeasuringOut to use centralized status display and improved order note handling
- Added shipping date column to GridShippingDocument
- Improved link styling in MgGridDataColumn
- Removed redundant code and applied minor UI/layout tweaks for consistency and maintainability

AyCode.Blazor.Components/Components/CardViews/MgCardView.razor

@@ -0,0 +1,36 @@
+@typeparam TItem
+
+<div class="mg-card-view-container" style="@ContainerStyle">
+    @if (ShowFilterPanel && FilterPanel is not null)
+    {
+        <div class="mg-card-filter-panel">
+            @FilterPanel
+        </div>
+    }
+
+    @if (Data is { Count: > 0 })
+    {
+        <div class="mg-card-scroll-area">
+            <div class="mg-card-grid @CssClass"
+                 style="--cols-xs: @ColumnCountXs; --cols-sm: @ColumnCountSm; --cols-lg: @ColumnCountLg;">
+                @foreach (var item in PagedItems)
+                {
+                    <div id="@GetCardElementId(item)"
+                         class="mg-card @CardCssClass"
+                         @onclick="() => OnCardClickInternal(item)"
+                         style="@(OnCardClick.HasDelegate ? "cursor: pointer;" : "")">
+                        @CardTemplate(item)
+                    </div>
+                }
+            </div>
+        </div>
+
+        @if (ShowPager && Data.Count > PageSize)
+        {
+            <DxPager PageCount="@((int)Math.Ceiling((double)Data.Count / PageSize))"
+                     ActivePageIndex="_activePageIndex"
+                     ActivePageIndexChanged="OnActivePageIndexChanged"
+                     CssClass="mt-2" />
+        }
+    }
+</div>

AyCode.Blazor.Components/Components/CardViews/MgCardView.razor.cs

@@ -0,0 +1,163 @@
+using Microsoft.AspNetCore.Components;
+using Microsoft.JSInterop;
+
+namespace AyCode.Blazor.Components.Components.CardViews;
+
+/// <summary>
+/// Generic card view component that displays items in a responsive CSS Grid layout
+/// with optional pagination and scroll-to-item support.
+/// </summary>
+/// <typeparam name="TItem">The type of data item displayed in each card.</typeparam>
+public partial class MgCardView<TItem> : ComponentBase
+{
+    [Inject] private IJSRuntime JSRuntime { get; set; } = null!;
+
+    /// <summary>
+    /// The collection of items to display as cards.
+    /// </summary>
+    [Parameter, EditorRequired]
+    public IReadOnlyList<TItem> Data { get; set; } = [];
+
+    /// <summary>
+    /// Template for rendering each card's content.
+    /// </summary>
+    [Parameter, EditorRequired]
+    public RenderFragment<TItem> CardTemplate { get; set; } = null!;
+
+    /// <summary>
+    /// Fired when a card is clicked/tapped.
+    /// </summary>
+    [Parameter]
+    public EventCallback<TItem> OnCardClick { get; set; }
+
+    /// <summary>
+    /// Number of columns on extra-small screens (below 576px). Default: 1.
+    /// </summary>
+    [Parameter]
+    public int ColumnCountXs { get; set; } = 1;
+
+    /// <summary>
+    /// Number of columns on small screens (576–768px). Default: 2.
+    /// </summary>
+    [Parameter]
+    public int ColumnCountSm { get; set; } = 2;
+
+    /// <summary>
+    /// Number of columns on medium+ screens (769px+). Default: 3.
+    /// </summary>
+    [Parameter]
+    public int ColumnCountLg { get; set; } = 3;
+
+    /// <summary>
+    /// Whether to show the pager below the cards. Default: false.
+    /// </summary>
+    [Parameter]
+    public bool ShowPager { get; set; }
+
+    /// <summary>
+    /// Number of items per page when paging is enabled. Default: 12.
+    /// </summary>
+    [Parameter]
+    public int PageSize { get; set; } = 12;
+
+    /// <summary>
+    /// Additional CSS class for the card view container.
+    /// </summary>
+    [Parameter]
+    public string? CssClass { get; set; }
+
+    /// <summary>
+    /// Additional CSS class applied to each individual card wrapper.
+    /// </summary>
+    [Parameter]
+    public string? CardCssClass { get; set; }
+
+    /// <summary>
+    /// Height of the card view container (e.g., "500px", "70vh"). When set, the component uses its own scroll area.
+    /// </summary>
+    [Parameter]
+    public string? Height { get; set; }
+
+    /// <summary>
+    /// Whether to show the filter panel above the cards. Default: false.
+    /// </summary>
+    [Parameter]
+    public bool ShowFilterPanel { get; set; }
+
+    /// <summary>
+    /// Custom content for the filter panel. Rendered above the card grid when ShowFilterPanel is true.
+    /// </summary>
+    [Parameter]
+    public RenderFragment? FilterPanel { get; set; }
+
+    /// <summary>
+    /// Item to scroll into view after render. Set to null to disable.
+    /// </summary>
+    [Parameter]
+    public TItem? ScrollToItem { get; set; }
+
+    /// <summary>
+    /// Key selector for identifying items (e.g., item => item.Id). Required when ScrollToItem is used.
+    /// </summary>
+    [Parameter]
+    public Func<TItem, object>? ItemKeySelector { get; set; }
+
+    private int _activePageIndex;
+    private object? _lastScrolledKey;
+
+    private string? ContainerStyle => Height is not null ? $"height: {Height};" : null;
+
+    private IReadOnlyList<TItem> PagedItems
+    {
+        get
+        {
+            if (!ShowPager)
+                return Data;
+
+            return Data
+                .Skip(_activePageIndex * PageSize)
+                .Take(PageSize)
+                .ToList();
+        }
+    }
+
+    private async Task OnCardClickInternal(TItem item)
+    {
+        if (OnCardClick.HasDelegate)
+            await OnCardClick.InvokeAsync(item);
+    }
+
+    private void OnActivePageIndexChanged(int newPageIndex)
+    {
+        _activePageIndex = newPageIndex;
+    }
+
+    /// <summary>
+    /// Generates a stable DOM element id for a card item using the key selector.
+    /// </summary>
+    private string? GetCardElementId(TItem item)
+    {
+        return ItemKeySelector is null ? null : $"mg-card-{ItemKeySelector(item)}";
+    }
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (ScrollToItem is not null && ItemKeySelector is not null)
+        {
+            var key = ItemKeySelector(ScrollToItem);
+            if (!Equals(key, _lastScrolledKey))
+            {
+                _lastScrolledKey = key;
+                var elementId = $"mg-card-{key}";
+                try
+                {
+                    await JSRuntime.InvokeVoidAsync("MgCardView.scrollToElement", elementId);
+                }
+                catch (JSException)
+                {
+                    // JS might not be loaded yet
+                }
+            }
+        }
+    }
+}

AyCode.Blazor.Components/Components/CardViews/MgCardView.razor.css

@@ -0,0 +1,52 @@
+.mg-card-view-container {
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+}
+
+.mg-card-scroll-area {
+    flex: 1;
+    overflow-y: auto;
+    padding-right: 4px;
+}
+
+.mg-card-grid {
+    display: grid;
+    gap: 1rem;
+    grid-template-columns: repeat(var(--cols-xs, 1), 1fr);
+}
+
+@media (min-width: 576px) {
+    .mg-card-grid {
+        grid-template-columns: repeat(var(--cols-sm, 2), 1fr);
+    }
+}
+
+@media (min-width: 769px) {
+    .mg-card-grid {
+        grid-template-columns: repeat(var(--cols-lg, 3), 1fr);
+    }
+}
+
+.mg-card {
+    border: 1px solid #dee2e6;
+    border-radius: 8px;
+    padding: 16px;
+    background-color: #fff;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+    transition: box-shadow 0.2s ease, transform 0.15s ease;
+    height: 100%;
+}
+
+.mg-card:hover {
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    transform: translateY(-2px);
+}
+
+.mg-card-filter-panel {
+    margin-bottom: 12px;
+    padding: 12px 16px;
+    background-color: #f8f9fa;
+    border: 1px solid #dee2e6;
+    border-radius: 8px;
+}

AyCode.Blazor.Components/Components/Grids/MgGridDataColumn.cs

@@ -64,7 +64,7 @@ public class MgGridDataColumn : DxGridDataColumn
                 builder.OpenElement(0, "a");
                 builder.AddAttribute(1, "href", url);
                 builder.AddAttribute(2, "target", "_blank");
-                builder.AddAttribute(3, "style", "text-decoration: none;");
+                builder.AddAttribute(3, "style", "text-decoration: underline; color: inherit;");
                 builder.AddContent(4, context.DisplayText);
                 builder.CloseElement();
             };

AyCode.Blazor.Components/Components/Grids/MgGridWithInfoPanel.razor

@@ -187,7 +187,7 @@
                     <DxSplitterPane>
                         @GridContent
                     </DxSplitterPane>
-                    <DxSplitterPane Size="@_currentInfoPanelSize" MinSize="0px" MaxSize="100%" AllowCollapse="false" CssClass="mg-info-panel-pane"
+                    <DxSplitterPane Size="@_currentInfoPanelSize" MinSize="0px" MaxSize="100%" AllowCollapse="true" CssClass="mg-info-panel-pane"
                                     SizeChanged="OnInfoPanelSizeChanged">
                         @if (ChildContent != null)
                         {

AyCode.Blazor.Components/wwwroot/js/mgCardView.js

@@ -0,0 +1,18 @@
+// MgCardView - Scroll handling
+window.MgCardView = {
+    scrollToElement: function (elementId) {
+        const element = document.getElementById(elementId);
+        if (!element) return;
+
+        // Find the closest scroll container
+        const scrollArea = element.closest('.mg-card-scroll-area');
+        if (scrollArea) {
+            const containerRect = scrollArea.getBoundingClientRect();
+            const elementRect = element.getBoundingClientRect();
+            const offset = elementRect.top - containerRect.top - (containerRect.height - elementRect.height) / 2;
+            scrollArea.scrollBy({ top: offset, behavior: 'smooth' });
+        } else {
+            element.scrollIntoView({ behavior: 'smooth', block: 'center' });
+        }
+    }
+};