Refactor API clients to use primary constructor for HttpClient

Refactored CatalogApiClient, DashboardApiClient, LayoutApiClient, and MassDataApiClient to use C# primary constructor syntax for injecting HttpClient. Removed private _httpClient fields and updated all usages to reference the constructor parameter directly. This change simplifies the code and modernizes dependency injection without altering any API logic.

DbFirst.BlazorWebApp/Components/App.razor

@@ -24,6 +24,14 @@
     <link rel="stylesheet" href="DbFirst.BlazorWebApp.styles.css" />
     <link rel="icon" type="image/png" href="favicon.png" />
     <script src="js/size-manager.js"></script>
+    <script>
+        window.setDxDarkOverride = function (enabled) {
+            if (enabled)
+                document.documentElement.classList.add('dx-dark');
+            else
+                document.documentElement.classList.remove('dx-dark');
+        };
+    </script>
     <HeadOutlet />
 </head>
 

DbFirst.BlazorWebApp/Components/BandGridBase.cs

@@ -1,6 +1,7 @@
 using DbFirst.BlazorWebApp.Models.Grid;
 using DbFirst.BlazorWebApp.Services;
 using DevExpress.Blazor;
+using DevExpress.Data.Filtering;
 using Microsoft.AspNetCore.Components;
 using Microsoft.AspNetCore.Components.Forms;
 using Microsoft.AspNetCore.Components.Rendering;
@@ -24,6 +25,16 @@ public abstract class BandGridBase<TItem> : ComponentBase
     protected bool gridLayoutApplied;
     protected IGrid? gridRef;
 
+    // --- Datumsfilter-Zustand ---
+    private readonly Dictionary<string, DateTime?> _filterFrom = new(StringComparer.OrdinalIgnoreCase);
+    private readonly Dictionary<string, DateTime?> _filterTo = new(StringComparer.OrdinalIgnoreCase);
+
+    // Stabile Referenzen: werden einmal pro FieldName erstellt und wiederverwendet
+    private readonly Dictionary<string, EventCallback<DateTime?>> _fromCallbacks = new(StringComparer.OrdinalIgnoreCase);
+    private readonly Dictionary<string, EventCallback<DateTime?>> _toCallbacks = new(StringComparer.OrdinalIgnoreCase);
+    private readonly Dictionary<string, RenderFragment<GridDataColumnFilterMenuTemplateContext>> _dateFilterTemplates = new(StringComparer.OrdinalIgnoreCase);
+    private readonly Dictionary<string, GridDataColumnFilterMenuTemplateContext> _filterContexts = new(StringComparer.OrdinalIgnoreCase);
+
     // --- SizeMode ---
     protected SizeMode _sizeMode = SizeMode.Medium;
     protected static readonly List<SizeMode> _sizeModes = Enum.GetValues<SizeMode>().ToList();
@@ -121,13 +132,13 @@ public abstract class BandGridBase<TItem> : ComponentBase
         UpdateBandOptions();
     }
 
-    protected void RemoveBand(BandDefinition band)
+    protected async Task RemoveBand(BandDefinition band)
     {
         bandLayout.Bands.Remove(band);
         foreach (var key in columnBandAssignments.Where(p => p.Value == band.Id).Select(p => p.Key).ToList())
             columnBandAssignments.Remove(key);
         UpdateBandOptions();
-        SyncBandsFromAssignments();
+        await SyncBandsFromAssignments();
     }
 
     protected void UpdateBandCaption(BandDefinition band, string value)
@@ -136,19 +147,19 @@ public abstract class BandGridBase<TItem> : ComponentBase
         UpdateBandOptions();
     }
 
-    protected void UpdateColumnBand(string fieldName, string? bandId)
+    protected async Task UpdateColumnBand(string fieldName, string? bandId)
     {
         if (string.IsNullOrWhiteSpace(bandId))
             columnBandAssignments.Remove(fieldName);
         else
             columnBandAssignments[fieldName] = bandId;
-        SyncBandsFromAssignments();
+        await SyncBandsFromAssignments();
     }
 
     protected string GetColumnBand(string fieldName)
         => columnBandAssignments.TryGetValue(fieldName, out var bandId) ? bandId : string.Empty;
 
-    protected void SyncBandsFromAssignments()
+    protected async Task SyncBandsFromAssignments()
     {
         foreach (var band in bandLayout.Bands)
         {
@@ -157,7 +168,7 @@ public abstract class BandGridBase<TItem> : ComponentBase
                 .Select(c => c.FieldName)
                 .ToList();
         }
-        _ = InvokeAsync(StateHasChanged);
+        await InvokeAsync(StateHasChanged);
     }
 
     protected void UpdateBandOptions()
@@ -224,9 +235,134 @@ public abstract class BandGridBase<TItem> : ComponentBase
             builder.AddAttribute(seq++, "DisplayFormat", column.DisplayFormat);
         if (column.ReadOnly)
             builder.AddAttribute(seq++, "ReadOnly", true);
+        if (column.FilterType == ColumnFilterType.Date)
+            builder.AddAttribute(seq++, "FilterMenuTemplate", GetOrCreateDateFilterTemplate(column.FieldName));
         builder.CloseComponent();
     }
 
+    private RenderFragment<GridDataColumnFilterMenuTemplateContext> GetOrCreateDateFilterTemplate(string fieldName)
+    {
+        if (!_dateFilterTemplates.TryGetValue(fieldName, out var template))
+        {
+            // EventCallbacks einmalig erstellen – stabile Referenzen über alle Renders
+            _fromCallbacks[fieldName] = EventCallback.Factory.Create<DateTime?>(this, async (DateTime? v) => await OnFilterFromChanged(fieldName, v));
+            _toCallbacks[fieldName] = EventCallback.Factory.Create<DateTime?>(this, async (DateTime? v) => await OnFilterToChanged(fieldName, v));
+            template = BuildDateFilterTemplate(fieldName);
+            _dateFilterTemplates[fieldName] = template;
+        }
+        return template;
+    }
+
+    private RenderFragment<GridDataColumnFilterMenuTemplateContext> BuildDateFilterTemplate(string fieldName) =>
+        ctx => b =>
+        {
+            _filterContexts[fieldName] = ctx;
+            SyncDateFilterFromContext(fieldName, ctx.FilterCriteria);
+            int s = 0;
+            b.OpenElement(s++, "div");
+            b.AddAttribute(s++, "class", "date-filter-menu p-2");
+
+            // Ab Datum
+            b.OpenElement(s++, "div");
+            b.AddAttribute(s++, "class", "mb-2");
+            b.OpenElement(s++, "label");
+            b.AddAttribute(s++, "class", "form-label small fw-semibold");
+            b.AddContent(s++, "Ab Datum");
+            b.CloseElement();
+            b.OpenComponent<DxDateEdit<DateTime?>>(s++);
+            b.AddAttribute(s++, "Date", _filterFrom.GetValueOrDefault(fieldName));
+            b.AddAttribute(s++, "DateChanged", _fromCallbacks[fieldName]);
+            b.AddAttribute(s++, "ClearButtonDisplayMode", DataEditorClearButtonDisplayMode.Auto);
+            b.AddAttribute(s++, "NullText", "Kein Startdatum");
+            b.AddAttribute(s++, "Width", "100%");
+            b.CloseComponent();
+            b.CloseElement();
+
+            // Bis Datum
+            b.OpenElement(s++, "div");
+            b.AddAttribute(s++, "class", "mb-0");
+            b.OpenElement(s++, "label");
+            b.AddAttribute(s++, "class", "form-label small fw-semibold");
+            b.AddContent(s++, "Bis Datum");
+            b.CloseElement();
+            b.OpenComponent<DxDateEdit<DateTime?>>(s++);
+            b.AddAttribute(s++, "Date", _filterTo.GetValueOrDefault(fieldName));
+            b.AddAttribute(s++, "DateChanged", _toCallbacks[fieldName]);
+            b.AddAttribute(s++, "ClearButtonDisplayMode", DataEditorClearButtonDisplayMode.Auto);
+            b.AddAttribute(s++, "NullText", "Kein Enddatum");
+            b.AddAttribute(s++, "Width", "100%");
+            b.CloseComponent();
+            b.CloseElement();
+
+            b.CloseElement();
+        };
+
+    private void SyncDateFilterFromContext(string fieldName, CriteriaOperator? criteria)
+    {
+        if (criteria == null)
+        {
+            _filterFrom[fieldName] = null;
+            _filterTo[fieldName] = null;
+            return;
+        }
+
+        DateTime? from = null;
+        DateTime? to = null;
+
+        if (criteria is GroupOperator group)
+        {
+            foreach (var op in group.Operands.OfType<BinaryOperator>())
+                ParseDateOperand(op, ref from, ref to);
+        }
+        else if (criteria is BinaryOperator binary)
+        {
+            ParseDateOperand(binary, ref from, ref to);
+        }
+
+        _filterFrom[fieldName] = from;
+        _filterTo[fieldName] = to;
+    }
+
+    private static void ParseDateOperand(BinaryOperator op, ref DateTime? from, ref DateTime? to)
+    {
+        if (op.RightOperand is not OperandValue val || val.Value is not DateTime dt) return;
+        if (op.OperatorType == BinaryOperatorType.GreaterOrEqual) from = dt;
+        else if (op.OperatorType == BinaryOperatorType.Less) to = dt.AddDays(-1);
+    }
+
+    private async Task OnFilterFromChanged(string fieldName, DateTime? value)
+    {
+        _filterFrom[fieldName] = value;
+        await ApplyDateFilter(fieldName);
+    }
+
+    private async Task OnFilterToChanged(string fieldName, DateTime? value)
+    {
+        _filterTo[fieldName] = value;
+        await ApplyDateFilter(fieldName);
+    }
+
+    private async Task ApplyDateFilter(string fieldName)
+    {
+        var ops = new List<CriteriaOperator>();
+        if (_filterFrom.TryGetValue(fieldName, out var from) && from.HasValue)
+            ops.Add(new BinaryOperator(fieldName, from.Value.Date, BinaryOperatorType.GreaterOrEqual));
+        if (_filterTo.TryGetValue(fieldName, out var to) && to.HasValue)
+            ops.Add(new BinaryOperator(fieldName, to.Value.Date.AddDays(1), BinaryOperatorType.Less));
+
+        CriteriaOperator? criteria = ops.Count switch
+        {
+            0 => null,
+            1 => ops[0],
+            _ => new GroupOperator(GroupOperatorType.And, ops)
+        };
+
+        gridRef?.SetFieldFilterCriteria(fieldName, criteria);
+        if (_filterContexts.TryGetValue(fieldName, out var ctx))
+            ctx.FilterCriteria = criteria;
+        await InvokeAsync(StateHasChanged);
+    }
+
     protected void SetEditContext(EditContext context)
     {
         if (editContext == context) return;

DbFirst.BlazorWebApp/Components/CatalogsGrid.razor

@@ -87,7 +87,7 @@ else
                                       Click="DeleteFocusedRow" />
                         </Template>
                     </DxToolbarItem>
-                    <DxToolbarItem Alignment="ToolbarItemAlignment.Right">
+                    <DxToolbarItem Alignment="ToolbarItemAlignment.Right" CssClass="me-2">
                         <Template Context="_">
                             <DxButton Text="Spalten"
                                       RenderStyle="ButtonRenderStyle.Secondary"
@@ -117,7 +117,8 @@ else
             </Columns>
             <EditFormTemplate Context="editFormContext">
                 @{
-                    SetEditContext(editFormContext.EditContext); var editModel = (CatalogEditModel)editFormContext.EditModel; SetPopupHeaderText(editModel.IsNew);
+                    SetEditContext(editFormContext.EditContext);
+                    var editModel = (CatalogEditModel)editFormContext.EditModel;
                 }
                 <DxFormLayout ColCount="2">
                     <DxFormLayoutItem Caption="Titel">
@@ -173,12 +174,16 @@ else
 
     protected override async Task OnInitializedAsync()
     {
-        await InitializeBandLayoutAsync();
         await LoadCatalogs();
     }
 
     protected override async Task OnAfterRenderAsync(bool firstRender)
     {
+        if (firstRender)
+        {
+            await InitializeBandLayoutAsync();
+            StateHasChanged();
+        }
         await ApplyGridLayoutAfterRenderAsync();
     }
 

DbFirst.BlazorWebApp/Components/Layout/MainLayout.razor

@@ -1,8 +1,9 @@
 @inherits LayoutComponentBase
 @implements IDisposable
 @inject ThemeState ThemeState
+@inject IJSRuntime JS
 
-<div class="page @(ThemeState.IsDarkMode ? "app-dark" : "app-light")">
+<div class="page @(ThemeState.IsDarkMode ? "app-dark" : "app-light") @(ThemeState.IsNativeDarkTheme ? "native-dark" : "")">
     <div class="sidebar">
         <NavMenu />
     </div>
@@ -33,9 +34,44 @@
 </div>
 
 @code {
+    private bool _isInteractive;
+
     protected override void OnInitialized()
     {
-        ThemeState.OnChange += StateHasChanged;
+        ThemeState.OnChange += OnThemeChanged;
+    }
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender)
+        {
+            _isInteractive = true;
+        }
+        await ApplyDxDarkOverrideAsync();
+    }
+
+    private void OnThemeChanged()
+    {
+        InvokeAsync(async () =>
+        {
+            StateHasChanged();
+            if (_isInteractive)
+             await ApplyDxDarkOverrideAsync();
+        });
+    }
+
+    private async Task ApplyDxDarkOverrideAsync()
+    {
+        if (!_isInteractive) return;
+        try
+        {
+            bool needsOverride = ThemeState.IsDarkMode && !ThemeState.IsNativeDarkTheme;
+            await JS.InvokeVoidAsync("setDxDarkOverride", needsOverride);
+        }
+        catch (JSException)
+        {
+            // JS-Funktion noch nicht verfügbar – kein Circuit-Crash
+        }
     }
 
     private void ToggleTheme()
@@ -45,6 +81,6 @@
 
     public void Dispose()
     {
-        ThemeState.OnChange -= StateHasChanged;
+        ThemeState.OnChange -= OnThemeChanged;
     }
 }

DbFirst.BlazorWebApp/Components/Layout/MainLayout.razor.css

@@ -18,11 +18,13 @@ main {
 }
 
 .sidebar {
-    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
+    background-color: var(--dx-color-surface-container, #f4f4f4);
+    border-right: 1px solid var(--dx-color-outline-variant, #e0e0e0);
 }
 
 .page.app-dark .sidebar {
-    background-image: linear-gradient(180deg, #171717 0%, #0f2a46 70%);
+    background-color: var(--dx-color-surface-container, #1e1e1e);
+    border-right-color: var(--dx-color-outline-variant, #333);
 }
 
 .top-row {

DbFirst.BlazorWebApp/Components/Layout/NavMenu.razor

@@ -1,36 +1,24 @@
-<div class="top-row ps-3 navbar navbar-dark">
+<div class="nav-brand-row">
-    <div class="container-fluid">
+    <a class="nav-brand-link" href="">DbFirst</a>
-        <a class="navbar-brand" href="">DbFirst.BlazorWebApp</a>
+    <button class="nav-toggle-btn" @onclick="ToggleMenu" title="Navigation menu">&#9776;</button>
-    </div>
 </div>
 
-<input type="checkbox" title="Navigation menu" class="navbar-toggler" />
+<div class="nav-scrollable @(menuOpen ? "nav-open" : "")">
-
+    <DxTreeView CssClass="sidebar-tree">
-<div class="nav-scrollable" onclick="document.querySelector('.navbar-toggler').click()">
+        <Nodes>
-    <nav class="flex-column">
+            <DxTreeViewNode Text="Home" NavigateUrl="/" IconCssClass="dxi dxi-home" />
-        <div class="nav-item px-3">
+            <DxTreeViewNode Text="Data Management" Expanded="true">
-            <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
+                <Nodes>
-                <span class="bi bi-house-door-fill-nav-menu" aria-hidden="true"></span> Home
+                    <DxTreeViewNode Text="Catalogs" NavigateUrl="/catalogs" IconCssClass="dxi dxi-folder" />
-            </NavLink>
+                    <DxTreeViewNode Text="Dashboards" NavigateUrl="/dashboards" IconCssClass="dxi dxi-chart-bar" />
-        </div>
+                    <DxTreeViewNode Text="Mass Data" NavigateUrl="/massdata" IconCssClass="dxi dxi-table" />
-
+                </Nodes>
-        <div class="nav-item px-3">
+            </DxTreeViewNode>
-            <NavLink class="nav-link" href="catalogs">
+        </Nodes>
-                <span class="bi bi-collection-nav-menu" aria-hidden="true"></span> Catalogs
+    </DxTreeView>
-            </NavLink>
-        </div>
-
-        <div class="nav-item px-3">
-            <NavLink class="nav-link" href="dashboards">
-                <span class="bi bi-speedometer-nav-menu" aria-hidden="true"></span> Dashboards
-            </NavLink>
-        </div>
-
-        <div class="nav-item px-3">
-            <NavLink class="nav-link" href="massdata">
-                <span class="bi bi-table-nav-menu" aria-hidden="true"></span> MassData
-            </NavLink>
-        </div>
-    </nav>
 </div>
 
+@code {
+    private bool menuOpen = false;
+    private void ToggleMenu() => menuOpen = !menuOpen;
+}

DbFirst.BlazorWebApp/Components/Layout/NavMenu.razor.css

@@ -1,117 +1,52 @@
-.navbar-toggler {
+.nav-brand-row {
-    appearance: none;
-    cursor: pointer;
-    width: 3.5rem;
-    height: 2.5rem;
-    color: white;
-    position: absolute;
-    top: 0.5rem;
-    right: 1rem;
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
-}
-
-.navbar-toggler:checked {
-    background-color: rgba(255, 255, 255, 0.5);
-}
-
-.top-row {
     height: 3.5rem;
-    background-color: rgba(0,0,0,0.4);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 1rem;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
 }
 
-.navbar-brand {
+.nav-brand-link {
-    font-size: 1.1rem;
+    font-size: 1.05rem;
+    font-weight: 600;
+    text-decoration: none;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
 
-.bi {
+.nav-toggle-btn {
-    display: inline-block;
+    display: block;
-    position: relative;
+    background: none;
-    width: 1.25rem;
+    border: none;
-    height: 1.25rem;
+    font-size: 1.4rem;
-    margin-right: 0.75rem;
+    cursor: pointer;
-    top: -1px;
+    padding: 0.25rem 0.5rem;
-    background-size: cover;
+    line-height: 1;
-}
-
-.bi-house-door-fill-nav-menu {
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
-}
-
-.bi-plus-square-fill-nav-menu {
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
-}
-
-.bi-list-nested-nav-menu {
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
-}
-
-.bi-collection-nav-menu {
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M2 3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 .5.5v1H2V3z'/%3E%3Cpath d='M2 5h12v8a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5z'/%3E%3C/svg%3E");
-}
-
-.bi-speedometer-nav-menu {
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M1 11a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V7a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v4zm5 0a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1v8zm5 0a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V9a1 1 0 0 0-1-1h-2a1 1 0 0 0-1 1v2z'/%3E%3C/svg%3E");
-}
-
-.bi-table-nav-menu {
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M1 2a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2zm1 1v2h12V3H2zm12 3H2v2h12V6zm0 3H2v2h12V9zm0 3H2v1h12v-1z'/%3E%3C/svg%3E");
-}
-
-.nav-item {
-    font-size: 0.9rem;
-    padding-bottom: 0.5rem;
-}
-
-    .nav-item:first-of-type {
-        padding-top: 1rem;
-    }
-
-    .nav-item:last-of-type {
-        padding-bottom: 1rem;
-    }
-
-    .nav-item ::deep .nav-link {
-        color: #d7d7d7;
-        background: none;
-        border: none;
-        border-radius: 4px;
-        height: 3rem;
-        display: flex;
-        align-items: center;
-        line-height: 3rem;
-        width: 100%;
-    }
-
-.nav-item ::deep a.active {
-    background-color: rgba(255,255,255,0.37);
-    color: white;
-}
-
-.nav-item ::deep .nav-link:hover {
-    background-color: rgba(255,255,255,0.1);
-    color: white;
 }
 
 .nav-scrollable {
     display: none;
 }
 
-.navbar-toggler:checked ~ .nav-scrollable {
+    .nav-scrollable.nav-open {
-    display: block;
+        display: block;
+    }
+
+.sidebar-tree {
+    width: 100%;
 }
 
 @media (min-width: 641px) {
-    .navbar-toggler {
+    .nav-toggle-btn {
         display: none;
     }
 
     .nav-scrollable {
-        /* Never collapse the sidebar for wide screens */
         display: block;
-
-        /* Allow sidebar to scroll for tall menus */
         height: calc(100vh - 3.5rem);
         overflow-y: auto;
     }
 }
+

DbFirst.BlazorWebApp/Components/MassDataGrid.razor

@@ -137,7 +137,7 @@ else
                         <DxTextBox @bind-Text="editModel.CustomerName" Width="100%" />
                     </DxFormLayoutItem>
                     <DxFormLayoutItem Caption="Amount">
-                        <DxTextBox @bind-Text="editModel.AmountText" Width="100%" />
+                        <DxSpinEdit @bind-Value="editModel.Amount" MinValue="0" DisplayFormat="c2" Width="100%" />
                     </DxFormLayoutItem>
                     <DxFormLayoutItem Caption="Category">
                         <DxTextBox @bind-Text="editModel.Category" Width="100%" ReadOnly="@(!editModel.IsNew)" />
@@ -210,12 +210,16 @@ else
 
     protected override async Task OnInitializedAsync()
     {
-        await InitializeBandLayoutAsync();
         await LoadPage(0);
     }
 
     protected override async Task OnAfterRenderAsync(bool firstRender)
     {
+        if (firstRender)
+        {
+            await InitializeBandLayoutAsync();
+            StateHasChanged();
+        }
         await ApplyGridLayoutAfterRenderAsync();
     }
 
@@ -281,7 +285,7 @@ else
         {
             Id = item.Id,
             CustomerName = item.CustomerName,
-            AmountText = item.Amount.ToString("0.00"),
+            Amount = item.Amount,
             Category = item.Category,
             StatusFlag = item.StatusFlag,
             UpdateProcedure = procedureOptions[0].Value,
@@ -298,12 +302,6 @@ else
         validationMessageStore?.Clear();
         editContext?.NotifyValidationStateChanged();
         var editModel = (MassDataEditModel)e.EditModel;
-        if (!decimal.TryParse(editModel.AmountText, out var amount))
-        {
-            AddValidationError(editModel, nameof(MassDataEditModel.AmountText), "Amount ist ungültig.");
-            e.Cancel = true;
-            return;
-        }
         if (editModel.IsNew)
         {
             var existing = await Api.GetByCustomerNameAsync(editModel.CustomerName);
@@ -317,7 +315,7 @@ else
         var dto = new MassDataWriteDto
         {
             CustomerName = editModel.CustomerName,
-            Amount = amount,
+            Amount = editModel.Amount,
             Category = editModel.Category,
             StatusFlag = editModel.StatusFlag
         };
@@ -353,7 +351,7 @@ else
     {
         public int Id { get; set; }
         public string CustomerName { get; set; } = string.Empty;
-        public string AmountText { get; set; } = string.Empty;
+        public decimal Amount { get; set; }
         public string Category { get; set; } = string.Empty;
         public bool StatusFlag { get; set; }
         public int UpdateProcedure { get; set; }

DbFirst.BlazorWebApp/Components/Routes.razor

@@ -1,4 +1,5 @@
-@rendermode InteractiveServer
+@rendermode @(new InteractiveServerRenderMode(prerender: false))
+
 
 <Router AppAssembly="typeof(Program).Assembly">
     <Found Context="routeData">

DbFirst.BlazorWebApp/Program.cs

@@ -13,12 +13,12 @@ builder.Services.AddDevExpressBlazor(options => options.BootstrapVersion = Boots
 builder.Services.AddScoped<ThemeState>();
 builder.Services.AddScoped<BandLayoutService>();
 
-var apiBaseUrl = builder.Configuration["ApiBaseUrl"];
 builder.Services.Configure<AppSettings>(builder.Configuration);
+var appSettings = builder.Configuration.Get<AppSettings>() ?? new AppSettings();
 void ConfigureClient(HttpClient client)
 {
-    if (!string.IsNullOrWhiteSpace(apiBaseUrl))
+    if (!string.IsNullOrWhiteSpace(appSettings.ApiBaseUrl))
-        client.BaseAddress = new Uri(apiBaseUrl);
+        client.BaseAddress = new Uri(appSettings.ApiBaseUrl);
 }
 
 builder.Services.AddHttpClient<ICatalogApiClient, CatalogApiClient>(ConfigureClient);

DbFirst.BlazorWebApp/Services/ApiClientHelper.cs

@@ -1,4 +1,5 @@
 using System.Net;
+using System.Text.Json;
 
 namespace DbFirst.BlazorWebApp.Services;
 
@@ -25,7 +26,14 @@ internal static class ApiClientHelper
                 problemDetail = problem.Detail ?? problem.Type;
             }
         }
-        catch { }
+        catch (JsonException)
+        {
+            // Ignoriere Fehler beim Lesen der Problem-Details, da sie optional sind
+        }
+        catch (NotSupportedException)
+        {
+            // Ignoriere Fehler beim Lesen der Problem-Details, da sie optional sind
+        }
 
         var status = response.StatusCode;
         var reason = response.ReasonPhrase;

DbFirst.BlazorWebApp/Services/CatalogApiClient.cs

@@ -3,30 +3,24 @@ using DbFirst.Contracts.Catalogs;
 
 namespace DbFirst.BlazorWebApp.Services;
 
-public class CatalogApiClient : ICatalogApiClient
+public class CatalogApiClient(HttpClient httpClient) : ICatalogApiClient
 {
-    private readonly HttpClient _httpClient;
     private const string Endpoint = "api/catalogs";
 
-    public CatalogApiClient(HttpClient httpClient)
-    {
-        _httpClient = httpClient;
-    }
-
     public async Task<List<CatalogReadDto>> GetAllAsync(CancellationToken ct = default)
     {
-        var result = await _httpClient.GetFromJsonAsync<List<CatalogReadDto>>(Endpoint, ct);
+        var result = await httpClient.GetFromJsonAsync<List<CatalogReadDto>>(Endpoint, ct);
         return result ?? [];
     }
 
     public async Task<CatalogReadDto?> GetByIdAsync(int id, CancellationToken ct = default)
     {
-        return await _httpClient.GetFromJsonAsync<CatalogReadDto>($"{Endpoint}/{id}", ct);
+        return await httpClient.GetFromJsonAsync<CatalogReadDto>($"{Endpoint}/{id}", ct);
     }
 
     public async Task<ApiResult<CatalogReadDto?>> CreateAsync(CatalogWriteDto dto, CancellationToken ct = default)
     {
-        var response = await _httpClient.PostAsJsonAsync(Endpoint, dto, ct);
+        var response = await httpClient.PostAsJsonAsync(Endpoint, dto, ct);
         if (response.IsSuccessStatusCode)
         {
             var payload = await response.Content.ReadFromJsonAsync<CatalogReadDto>();
@@ -39,7 +33,7 @@ public class CatalogApiClient : ICatalogApiClient
 
     public async Task<ApiResult<bool>> UpdateAsync(int id, CatalogWriteDto dto, CancellationToken ct = default)
     {
-        var response = await _httpClient.PutAsJsonAsync($"{Endpoint}/{id}", dto, ct);
+        var response = await httpClient.PutAsJsonAsync($"{Endpoint}/{id}", dto, ct);
         if (response.IsSuccessStatusCode)
         {
             return ApiResult<bool>.Ok(true);
@@ -51,7 +45,7 @@ public class CatalogApiClient : ICatalogApiClient
 
     public async Task<ApiResult<bool>> DeleteAsync(int id, CancellationToken ct = default)
     {
-        var response = await _httpClient.DeleteAsync($"{Endpoint}/{id}", ct);
+        var response = await httpClient.DeleteAsync($"{Endpoint}/{id}", ct);
         if (response.IsSuccessStatusCode)
         {
             return ApiResult<bool>.Ok(true);

DbFirst.BlazorWebApp/Services/DashboardApiClient.cs

@@ -2,19 +2,13 @@ using DbFirst.Contracts.Dashboards;
 
 namespace DbFirst.BlazorWebApp.Services;
 
-public class DashboardApiClient : IDashboardApiClient
+public class DashboardApiClient(HttpClient httpClient) : IDashboardApiClient
 {
-    private readonly HttpClient _httpClient;
     private const string Endpoint = "api/dashboard/dashboards";
 
-    public DashboardApiClient(HttpClient httpClient)
-    {
-        _httpClient = httpClient;
-    }
-
     public async Task<List<DashboardInfoDto>> GetAllAsync(CancellationToken ct = default)
     {
-        var result = await _httpClient.GetFromJsonAsync<List<DashboardInfoDto>>(Endpoint, ct);
+        var result = await httpClient.GetFromJsonAsync<List<DashboardInfoDto>>(Endpoint, ct);
         return result ?? [];
     }
 }

DbFirst.BlazorWebApp/Services/LayoutApiClient.cs

@@ -2,20 +2,14 @@ using DbFirst.Contracts.Layouts;
 
 namespace DbFirst.BlazorWebApp.Services;
 
-public class LayoutApiClient : ILayoutApiClient
+public class LayoutApiClient(HttpClient httpClient) : ILayoutApiClient
 {
-    private readonly HttpClient _httpClient;
     private const string Endpoint = "api/layouts";
 
-    public LayoutApiClient(HttpClient httpClient)
-    {
-        _httpClient = httpClient;
-    }
-
     public async Task<LayoutDto?> GetAsync(string layoutType, string layoutKey, string userName, CancellationToken ct = default)
     {
         var url = $"{Endpoint}?layoutType={Uri.EscapeDataString(layoutType)}&layoutKey={Uri.EscapeDataString(layoutKey)}&userName={Uri.EscapeDataString(userName)}";
-        var response = await _httpClient.GetAsync(url, ct);
+        var response = await httpClient.GetAsync(url, ct);
         if (response.StatusCode == System.Net.HttpStatusCode.NotFound)
         {
             return null;
@@ -27,7 +21,7 @@ public class LayoutApiClient : ILayoutApiClient
 
     public async Task<LayoutDto> UpsertAsync(LayoutDto dto, CancellationToken ct = default)
     {
-        var response = await _httpClient.PostAsJsonAsync(Endpoint, dto, ct);
+        var response = await httpClient.PostAsJsonAsync(Endpoint, dto, ct);
         if (!response.IsSuccessStatusCode)
         {
             var detail = await ApiClientHelper.ReadErrorAsync(response);
@@ -41,7 +35,7 @@ public class LayoutApiClient : ILayoutApiClient
     public async Task DeleteAsync(string layoutType, string layoutKey, string userName, CancellationToken ct = default)
     {
         var url = $"{Endpoint}?layoutType={Uri.EscapeDataString(layoutType)}&layoutKey={Uri.EscapeDataString(layoutKey)}&userName={Uri.EscapeDataString(userName)}";
-        var response = await _httpClient.DeleteAsync(url, ct);
+        var response = await httpClient.DeleteAsync(url, ct);
         if (response.StatusCode == System.Net.HttpStatusCode.NotFound)
         {
             return;

DbFirst.BlazorWebApp/Services/MassDataApiClient.cs

@@ -1,44 +1,33 @@
 using DbFirst.BlazorWebApp.Models;
 using DbFirst.Contracts.MassData;
+using Microsoft.AspNetCore.WebUtilities;
 
 namespace DbFirst.BlazorWebApp.Services;
 
-public class MassDataApiClient : IMassDataApiClient
+public class MassDataApiClient(HttpClient httpClient) : IMassDataApiClient
 {
-    private readonly HttpClient _httpClient;
     private const string Endpoint = "api/massdata";
 
-    public MassDataApiClient(HttpClient httpClient)
-    {
-        _httpClient = httpClient;
-    }
-
     public async Task<int> GetCountAsync(CancellationToken ct = default)
     {
-        var result = await _httpClient.GetFromJsonAsync<int?>("api/massdata/count", ct);
+        var result = await httpClient.GetFromJsonAsync<int?>("api/massdata/count", ct);
         return result ?? 0;
     }
 
     public async Task<List<MassDataReadDto>> GetAllAsync(int? skip, int? take, CancellationToken ct = default)
     {
-        var query = new List<string>();
+        var query = new Dictionary<string, string?>();
-        if (skip.HasValue)
+        if (skip.HasValue) query["skip"] = skip.Value.ToString();
-        {
+        if (take.HasValue) query["take"] = take.Value.ToString();
-            query.Add($"skip={skip.Value}");
-        }
-        if (take.HasValue)
-        {
-            query.Add($"take={take.Value}");
-        }
 
-        var url = query.Count == 0 ? Endpoint : $"{Endpoint}?{string.Join("&", query)}";
+        var url = QueryHelpers.AddQueryString(Endpoint, query);
-        var result = await _httpClient.GetFromJsonAsync<List<MassDataReadDto>>(url, ct);
+        var result = await httpClient.GetFromJsonAsync<List<MassDataReadDto>>(url, ct);
         return result ?? [];
     }
 
     public async Task<ApiResult<MassDataReadDto?>> UpsertAsync(MassDataWriteDto dto, CancellationToken ct = default)
     {
-        var response = await _httpClient.PostAsJsonAsync($"{Endpoint}/upsert", dto, ct);
+        var response = await httpClient.PostAsJsonAsync($"{Endpoint}/upsert", dto, ct);
         if (response.IsSuccessStatusCode)
         {
             var payload = await response.Content.ReadFromJsonAsync<MassDataReadDto>();
@@ -56,7 +45,7 @@ public class MassDataApiClient : IMassDataApiClient
             return null;
         }
 
-        var response = await _httpClient.GetAsync($"{Endpoint}/{Uri.EscapeDataString(customerName)}", ct);
+        var response = await httpClient.GetAsync($"{Endpoint}/{Uri.EscapeDataString(customerName)}", ct);
         if (response.StatusCode == System.Net.HttpStatusCode.NotFound)
         {
             return null;

DbFirst.BlazorWebApp/Services/ThemeState.cs

@@ -14,6 +14,16 @@ public class ThemeState
     public bool IsDarkMode { get; private set; }
     public string CurrentThemeName { get; private set; } = "Fluent";
 
+    /// <summary>
+    /// Themes die eine native DevExpress Dark-Variante besitzen:
+    ///   - Fluent  ? Themes.Fluent.Clone(ThemeMode.Dark), verwendet --DS-* Token-System
+    ///   - BlazingBerry ? Themes.BlazingDark
+    /// Alle anderen Themes (Purple, OfficeWhite, BootstrapExternal) haben keine offizielle
+    /// Dark-Variante; dort übernehmen CSS-Overrides auf --dxbl-grid-* Variablen die Arbeit.
+    /// </summary>
+    public bool IsNativeDarkTheme => IsDarkMode &&
+        (CurrentThemeName == "Fluent" || CurrentThemeName == "BlazingBerry");
+
     public static readonly List<string> AvailableThemes = ["Fluent", "BlazingBerry", "Purple", "OfficeWhite", "BootstrapExternal"];
 
     public event Action? OnChange;
@@ -45,13 +55,11 @@ public class ThemeState
             });
             themeChangeService.SetTheme(theme);
         }
-        else if (CurrentThemeName == "BlazingBerry")  themeChangeService.SetTheme(Themes.BlazingBerry);
+        else if (CurrentThemeName == "BlazingBerry") themeChangeService.SetTheme(IsDarkMode ? Themes.BlazingDark : Themes.BlazingBerry);
-        else if (CurrentThemeName == "Purple")         themeChangeService.SetTheme(Themes.Purple);
+        else if (CurrentThemeName == "Purple")           themeChangeService.SetTheme(Themes.Purple);
-        else if (CurrentThemeName == "OfficeWhite")    themeChangeService.SetTheme(Themes.OfficeWhite);
+        else if (CurrentThemeName == "OfficeWhite")      themeChangeService.SetTheme(Themes.OfficeWhite);
         else if (CurrentThemeName == "BootstrapExternal") themeChangeService.SetTheme(Themes.BootstrapExternal);
         else
             themeChangeService.SetTheme(Themes.Fluent);
-
-        OnChange?.Invoke();
     }
 }

DbFirst.BlazorWebApp/appsettings.Development.json

@@ -5,5 +5,11 @@
       "Microsoft.AspNetCore": "Warning"
     }
   },
-  "ApiBaseUrl": "https://localhost:7204/"
+  "ApiBaseUrl": "https://localhost:7204/",
+  "BrowserLink": {
+    "Enabled": false
+  },
+  "DetailedErrors": true
 }
+
+

DbFirst.BlazorWebApp/wwwroot/app.css

@@ -148,6 +148,112 @@ dxbl-grid tbody tr:nth-child(even) td {
     background-color: var(--grid-stripe-bg) !important;
 }
 
+/* ?? Dark-Mode-Overrides für nicht-native Themes ?????????????????????????????
+   Strategie: CSS-Custom-Properties werden von DevExpress DIREKT auf den
+   Komponenten-Elementen definiert (z. B. --dxbl-popup-bg:#fff auf .dxbl-modal).
+   Eine geerbte Variable aus html.dx-dark würde durch die direkte Zuweisung
+   überschrieben. Deshalb targeten wir exakt dieselben Elemente, aber mit einem
+   zusätzlichen Vorfahren-Selektor (html.dx-dark) für höhere Spezifizität:
+     html.dx-dark .dxbl-modal = (0,2,1)  >  .dxbl-modal = (0,1,0)  ?
+   html.dx-dark wird per JS gesetzt, wenn IsDarkMode && !IsNativeDarkTheme.
+?? */
+
+/* Popup / Modal (CRUD-Dialoge) – Variablen-Quelle: .dxbl-modal */
+html.dx-dark .dxbl-modal {
+    --dxbl-popup-bg: #2d2d2d;
+    --dxbl-popup-color: #e8e8e8;
+    --dxbl-popup-border-color: #555;
+    --dxbl-popup-header-bg: #333;
+    --dxbl-popup-header-color: #e8e8e8;
+    --dxbl-popup-footer-bg: #333;
+    --dxbl-popup-footer-color: #e8e8e8;
+}
+
+/* Flyout (Column Chooser, Filter-Panel) – Variablen-Quelle: .dxbl-flyout */
+html.dx-dark .dxbl-flyout {
+    --dxbl-flyout-bg: #2d2d2d;
+    --dxbl-flyout-color: #e8e8e8;
+    --dxbl-flyout-border-color: #555;
+    --dxbl-flyout-header-bg: #333;
+    --dxbl-flyout-header-color: #e8e8e8;
+    --dxbl-flyout-footer-bg: #333;
+}
+
+/* Dropdown (ComboBox-Klappliste, Band-Dropdowns) – Quelle: .dxbl-dropdown */
+html.dx-dark .dxbl-dropdown,
+html.dx-dark .dxbl-itemlist-dropdown {
+    --dxbl-dropdown-bg: #2d2d2d;
+    --dxbl-dropdown-color: #e8e8e8;
+    --dxbl-dropdown-border-color: #555;
+    --dxbl-dropdown-header-bg: #333;
+    --dxbl-dropdown-footer-bg: #333;
+}
+
+/* Edit-Dropdown (ComboBox-Popup wenn als Modal gerendert) – Quelle: .dxbl-edit-dropdown */
+html.dx-dark .dxbl-edit-dropdown {
+    --dxbl-edit-dropdown-bg: #2d2d2d;
+    --dxbl-edit-dropdown-color: #e8e8e8;
+    --dxbl-edit-dropdown-border-color: #555;
+}
+
+/* ListBox (Einträge in Dropdowns) – Quelle: .dxbl-list-box */
+html.dx-dark .dxbl-list-box,
+html.dx-dark .dxbl-list-box-render-container {
+    --dxbl-list-box-bg: #2d2d2d;
+    --dxbl-list-box-color: #e8e8e8;
+    --dxbl-list-box-border-color: #555;
+    --dxbl-list-box-item-hover-bg: #3a3a3a;
+    --dxbl-list-box-item-hover-color: #e8e8e8;
+}
+
+/* TextEdit / ComboBox – Eingabefeld – Quelle: .dxbl-text-edit */
+html.dx-dark .dxbl-text-edit {
+    --dxbl-text-edit-bg: #2d2d2d;
+    --dxbl-text-edit-color: #e8e8e8;
+    --dxbl-text-edit-border-color: #555;
+    --dxbl-text-edit-btn-bg: #3a3a3a;
+    --dxbl-text-edit-btn-color: #e8e8e8;
+    --dxbl-text-edit-btn-hover-bg: #444;
+    --dxbl-text-edit-btn-hover-color: #e8e8e8;
+}
+
+/* Button-Dropdown-Items (Sizemode-Dropdown, Band-Dropdowns) – Quelle: .dxbl-btn-dropdown-popup */
+html.dx-dark .dxbl-btn-dropdown-popup {
+    --dxbl-btn-dropdown-btn-color: #e8e8e8;
+    --dxbl-btn-dropdown-btn-hover-color: #e8e8e8;
+    --dxbl-btn-dropdown-btn-active-color: #e8e8e8;
+}
+
+/* Buttons */
+html.dx-dark .dxbl-btn {
+    --dxbl-btn-color: #e8e8e8;
+    --dxbl-btn-bg: #3a3a3a;
+    --dxbl-btn-border-color: #555;
+    --dxbl-btn-hover-bg: #444;
+    --dxbl-btn-hover-color: #e8e8e8;
+    --dxbl-btn-hover-border-color: #666;
+}
+
+/* FormLayout */
+html.dx-dark .dxbl-fl {
+    --dxbl-fl-caption-color: #bbb;
+    --dxbl-fl-group-bg: #242424;
+    --dxbl-fl-group-color: #e8e8e8;
+}
+
+/* Grid */
+html.dx-dark .dxbl-grid {
+    background-color: #242424;
+    color: #e8e8e8;
+    border-color: #444;
+}
+
+html.dx-dark .dxbl-grid > .dxbl-scroll-viewer,
+html.dx-dark .dxbl-grid > .dxbl-grid-top-panel {
+    background-color: #242424;
+    color: #e8e8e8;
+}
+
 /* MassData-spezifisch */
 .page-size-selector {
     display: flex;

DbFirst.BlazorWebApp/wwwroot/js/size-manager.js

@@ -1,3 +1,4 @@
 window.setSize = function (fontSize) {
     document.documentElement.style.setProperty('--global-size', fontSize);
 };
+