Normalize dashboard date dimensions, update grid UI

Added normalization for date dimensions in SqlDashboardStorage to ensure consistent grouping for "AddedWhen" and "ChangedWhen" fields. Refactored CatalogsGrid.razor to use custom sort icons and default DxGrid filter row UI, simplifying markup and improving visual consistency. Updated related CSS for sortable headers and filter inputs.

DbFirst.API/Dashboards/SqlDashboardStorage.cs

@@ -0,0 +1,132 @@
+using System.Data;
+using System.Text;
+using System.Xml.Linq;
+using DevExpress.DashboardWeb;
+using Microsoft.Data.SqlClient;
+
+namespace DbFirst.API.Dashboards;
+
+public sealed class SqlDashboardStorage : IEditableDashboardStorage
+{
+    private readonly string _connectionString;
+    private readonly string _tableName;
+    private readonly Func<string?>? _userProvider;
+
+    public SqlDashboardStorage(string connectionString, string tableName = "TBDD_SMF_CONFIG", Func<string?>? userProvider = null)
+    {
+        _connectionString = connectionString;
+        _tableName = tableName;
+        _userProvider = userProvider;
+    }
+
+    public IEnumerable<DashboardInfo> GetAvailableDashboardsInfo()
+    {
+        var dashboards = new List<DashboardInfo>();
+
+        using var connection = new SqlConnection(_connectionString);
+        using var command = new SqlCommand($"SELECT DashboardId, DashboardName FROM dbo.[{_tableName}] WHERE ACTIVE = 1 ORDER BY DashboardName", connection);
+
+        connection.Open();
+        using var reader = command.ExecuteReader();
+        while (reader.Read())
+        {
+            var id = reader.GetString(0);
+            var name = reader.GetString(1);
+            dashboards.Add(new DashboardInfo { ID = id, Name = name });
+        }
+
+        return dashboards;
+    }
+
+    public XDocument LoadDashboard(string dashboardId)
+    {
+        using var connection = new SqlConnection(_connectionString);
+        using var command = new SqlCommand($"SELECT DashboardData FROM dbo.[{_tableName}] WHERE DashboardId = @Id AND ACTIVE = 1", connection);
+        command.Parameters.Add(new SqlParameter("@Id", SqlDbType.NVarChar, 128) { Value = dashboardId });
+
+        connection.Open();
+        var data = command.ExecuteScalar() as byte[];
+        if (data == null)
+        {
+            throw new ArgumentException($"Dashboard '{dashboardId}' not found.");
+        }
+
+        var xml = Encoding.UTF8.GetString(data);
+        var doc = XDocument.Parse(xml);
+        NormalizeCatalogDateDimensions(doc);
+        return doc;
+    }
+
+    private static void NormalizeCatalogDateDimensions(XDocument doc)
+    {
+        var dateMembers = new HashSet<string>(StringComparer.OrdinalIgnoreCase)
+        {
+            "AddedWhen",
+            "ChangedWhen"
+        };
+
+        foreach (var dimension in doc.Descendants("Dimension"))
+        {
+            var member = dimension.Attribute("DataMember")?.Value;
+            if (member == null || !dateMembers.Contains(member))
+            {
+                continue;
+            }
+
+            var interval = dimension.Attribute("DateTimeGroupInterval")?.Value;
+            if (string.IsNullOrWhiteSpace(interval) || string.Equals(interval, "Year", StringComparison.OrdinalIgnoreCase))
+            {
+                dimension.SetAttributeValue("DateTimeGroupInterval", "DayMonthYear");
+            }
+        }
+    }
+
+    public string AddDashboard(XDocument dashboard, string dashboardName)
+    {
+        var id = string.IsNullOrWhiteSpace(dashboardName)
+            ? Guid.NewGuid().ToString("N")
+            : dashboardName;
+        var payload = Encoding.UTF8.GetBytes(dashboard.ToString(SaveOptions.DisableFormatting));
+        var userName = _userProvider?.Invoke();
+
+        using var connection = new SqlConnection(_connectionString);
+        using var command = new SqlCommand($"INSERT INTO dbo.[{_tableName}] (ACTIVE, DashboardId, DashboardName, DashboardData, ADDED_WHO, ADDED_WHEN) VALUES (1, @Id, @Name, @Data, COALESCE(@User, SUSER_SNAME()), SYSUTCDATETIME())", connection);
+        command.Parameters.Add(new SqlParameter("@Id", SqlDbType.NVarChar, 128) { Value = id });
+        command.Parameters.Add(new SqlParameter("@Name", SqlDbType.NVarChar, 256) { Value = string.IsNullOrWhiteSpace(dashboardName) ? id : dashboardName });
+        command.Parameters.Add(new SqlParameter("@Data", SqlDbType.VarBinary, -1) { Value = payload });
+        command.Parameters.Add(new SqlParameter("@User", SqlDbType.NVarChar, 50) { Value = (object?)userName ?? DBNull.Value });
+
+        connection.Open();
+        command.ExecuteNonQuery();
+        return id;
+    }
+
+    public void SaveDashboard(string dashboardId, XDocument dashboard)
+    {
+        var payload = Encoding.UTF8.GetBytes(dashboard.ToString(SaveOptions.DisableFormatting));
+        var userName = _userProvider?.Invoke();
+
+        using var connection = new SqlConnection(_connectionString);
+        using var command = new SqlCommand($"UPDATE dbo.[{_tableName}] SET DashboardData = @Data, CHANGED_WHO = COALESCE(@User, SUSER_SNAME()), CHANGED_WHEN = SYSUTCDATETIME() WHERE DashboardId = @Id", connection);
+        command.Parameters.Add(new SqlParameter("@Id", SqlDbType.NVarChar, 128) { Value = dashboardId });
+        command.Parameters.Add(new SqlParameter("@Data", SqlDbType.VarBinary, -1) { Value = payload });
+        command.Parameters.Add(new SqlParameter("@User", SqlDbType.NVarChar, 50) { Value = (object?)userName ?? DBNull.Value });
+
+        connection.Open();
+        var rows = command.ExecuteNonQuery();
+        if (rows == 0)
+        {
+            throw new ArgumentException($"Dashboard '{dashboardId}' not found.");
+        }
+    }
+
+    public void DeleteDashboard(string dashboardId)
+    {
+        using var connection = new SqlConnection(_connectionString);
+        using var command = new SqlCommand($"DELETE FROM dbo.[{_tableName}] WHERE DashboardId = @Id", connection);
+        command.Parameters.Add(new SqlParameter("@Id", SqlDbType.NVarChar, 128) { Value = dashboardId });
+
+        connection.Open();
+        command.ExecuteNonQuery();
+    }
+}

DbFirst.API/Data/Dashboards/CatalogsGrid.xml

@@ -0,0 +1,52 @@
+<?xml version="1.0" encoding="utf-8"?>
+<Dashboard CurrencyCulture="de-DE" RequestParameters="false">
+  <Title Text="Catalogs (Dashboard Grid)" />
+  <DataSources>
+    <JsonDataSource Name="Catalogs (API)" ComponentName="catalogsDataSource">
+      <Source SourceType="DevExpress.DataAccess.Json.UriJsonSource" Uri="https://localhost:7204/api/catalogs" />
+    </JsonDataSource>
+  </DataSources>
+  <Items>
+    <Grid ComponentName="gridDashboardItem1" Name="Catalogs" DataSource="catalogsDataSource">
+      <DataItems>
+        <Dimension DataMember="Guid" DefaultId="DataItem0" />
+        <Dimension DataMember="CatTitle" DefaultId="DataItem1" />
+        <Dimension DataMember="CatString" DefaultId="DataItem2" />
+        <Dimension DataMember="AddedWho" DefaultId="DataItem3" />
+        <Dimension DataMember="AddedWhen" DefaultId="DataItem4" />
+        <Dimension DataMember="ChangedWho" DefaultId="DataItem5" />
+        <Dimension DataMember="ChangedWhen" DefaultId="DataItem6" />
+      </DataItems>
+      <GridColumns>
+        <GridDimensionColumn Name="Id">
+          <Dimension DefaultId="DataItem0" />
+        </GridDimensionColumn>
+        <GridDimensionColumn Name="Titel">
+          <Dimension DefaultId="DataItem1" />
+        </GridDimensionColumn>
+        <GridDimensionColumn Name="String">
+          <Dimension DefaultId="DataItem2" />
+        </GridDimensionColumn>
+        <GridDimensionColumn Name="Angelegt von">
+          <Dimension DefaultId="DataItem3" />
+        </GridDimensionColumn>
+        <GridDimensionColumn Name="Angelegt am">
+          <Dimension DefaultId="DataItem4" />
+        </GridDimensionColumn>
+        <GridDimensionColumn Name="Geändert von">
+          <Dimension DefaultId="DataItem5" />
+        </GridDimensionColumn>
+        <GridDimensionColumn Name="Geändert am">
+          <Dimension DefaultId="DataItem6" />
+        </GridDimensionColumn>
+      </GridColumns>
+      <GridOptions />
+      <ColumnFilterOptions />
+    </Grid>
+  </Items>
+  <LayoutTree>
+    <LayoutGroup Orientation="Vertical">
+      <LayoutItem DashboardItem="gridDashboardItem1" />
+    </LayoutGroup>
+  </LayoutTree>
+</Dashboard>

DbFirst.API/Data/Dashboards/DashboardStorage.sql

@@ -0,0 +1,17 @@
+CREATE TABLE dbo.TBDD_SMF_CONFIG (
+    [GUID] [bigint] IDENTITY(1,1) NOT NULL,
+    [ACTIVE] [bit] NOT NULL,
+    DashboardId NVARCHAR(128) NOT NULL,
+    DashboardName NVARCHAR(256) NOT NULL,
+    DashboardData VARBINARY(MAX) NOT NULL,
+    --- INSERT YOUR COLUMNS HERE ---
+    [ADDED_WHO] [nvarchar](50) NOT NULL,
+    [ADDED_WHEN] [datetime] NOT NULL,
+    [CHANGED_WHO] [nvarchar](50) NULL,
+    [CHANGED_WHEN] [datetime] NULL,
+ CONSTRAINT [PK_TBDD_SMF_CONFIG_DashboardStorage] PRIMARY KEY CLUSTERED 
+(
+    [GUID] ASC
+)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = ON, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON, FILLFACTOR = 80) ON [PRIMARY]
+) ON [PRIMARY]
+GO

DbFirst.API/Data/Dashboards/DefaultDashboard.xml

@@ -1,4 +1,55 @@
 <?xml version="1.0" encoding="utf-8"?>
 <Dashboard CurrencyCulture="de-DE" RequestParameters="false">
   <Title Text="Default Dashboard" />
+  <DataSources>
+    <JsonDataSource Name="JSON Data Source (URL)" RootElement="Customers" ComponentName="jsonDataSource1">
+      <Source SourceType="DevExpress.DataAccess.Json.UriJsonSource" Uri="https://raw.githubusercontent.com/DevExpress-Examples/DataSources/master/JSON/customers.json" />
+    </JsonDataSource>
+    <JsonDataSource Name="Catalogs (API)" ComponentName="catalogsDataSource">
+      <Source SourceType="DevExpress.DataAccess.Json.UriJsonSource" Uri="https://localhost:7204/api/catalogs" />
+    </JsonDataSource>
+  </DataSources>
+  <Items>
+    <Grid ComponentName="gridDashboardItem2" Name="Grid 2" DataSource="catalogsDataSource">
+      <DataItems>
+        <Measure DataMember="guid" DefaultId="DataItem0" />
+        <Dimension DataMember="catTitle" DefaultId="DataItem1" />
+        <Dimension DataMember="catString" DefaultId="DataItem2" />
+        <Dimension DataMember="addedWhen" DefaultId="DataItem3" />
+        <Dimension DataMember="addedWho" DefaultId="DataItem4" />
+        <Dimension DataMember="changedWhen" DefaultId="DataItem5" />
+        <Dimension DataMember="changedWho" DefaultId="DataItem6" />
+      </DataItems>
+      <GridColumns>
+        <GridMeasureColumn>
+          <Measure DefaultId="DataItem0" />
+        </GridMeasureColumn>
+        <GridDimensionColumn>
+          <Dimension DefaultId="DataItem1" />
+        </GridDimensionColumn>
+        <GridDimensionColumn>
+          <Dimension DefaultId="DataItem2" />
+        </GridDimensionColumn>
+        <GridDimensionColumn>
+          <Dimension DefaultId="DataItem3" />
+        </GridDimensionColumn>
+        <GridDimensionColumn>
+          <Dimension DefaultId="DataItem4" />
+        </GridDimensionColumn>
+        <GridDimensionColumn>
+          <Dimension DefaultId="DataItem5" />
+        </GridDimensionColumn>
+        <GridDimensionColumn>
+          <Dimension DefaultId="DataItem6" />
+        </GridDimensionColumn>
+      </GridColumns>
+      <GridOptions />
+      <ColumnFilterOptions />
+    </Grid>
+  </Items>
+  <LayoutTree>
+    <LayoutGroup>
+      <LayoutItem DashboardItem="gridDashboardItem2" />
+    </LayoutGroup>
+  </LayoutTree>
 </Dashboard>

DbFirst.API/DbFirst.API.csproj

@@ -26,8 +26,4 @@
     <ProjectReference Include="..\DbFirst.Infrastructure\DbFirst.Infrastructure.csproj" />
   </ItemGroup>
 
-  <ItemGroup>
-    <Folder Include="Data\Dashboards\" />
-  </ItemGroup>
-
 </Project>

DbFirst.API/Program.cs

@@ -1,7 +1,9 @@
 using DbFirst.API.Middleware;
+using DbFirst.API.Dashboards;
 using DbFirst.Application;
 using DbFirst.Application.Repositories;
 using DbFirst.Domain;
+using DbFirst.Domain.Entities;
 using DbFirst.Infrastructure;
 using DbFirst.Infrastructure.Repositories;
 using DevExpress.AspNetCore;
@@ -9,6 +11,7 @@ using DevExpress.DashboardAspNetCore;
 using DevExpress.DashboardCommon;
 using DevExpress.DashboardWeb;
 using DevExpress.DataAccess.Json;
+using System.Xml.Linq;
 
 var builder = WebApplication.CreateBuilder(args);
 
@@ -62,17 +65,76 @@ builder.Services.AddScoped<DashboardConfigurator>((IServiceProvider serviceProvi
         defaultDashboard.SaveToXml(defaultDashboardPath);
     }
 
+    var dashboardBaseUrl = builder.Configuration["Dashboard:BaseUrl"]
+        ?? builder.Configuration["ApiBaseUrl"]
+        ?? builder.Configuration["ASPNETCORE_URLS"]?.Split(';', StringSplitOptions.RemoveEmptyEntries).FirstOrDefault()
+        ?? "https://localhost:7204";
+
+    dashboardBaseUrl = dashboardBaseUrl.TrimEnd('/');
+
+    var catalogsGridDashboardPath = Path.Combine(dashboardsPath, "CatalogsGrid.xml");
+    if (!File.Exists(catalogsGridDashboardPath))
+    {
+        var dashboard = new Dashboard();
+        dashboard.Title.Text = "Catalogs (Dashboard Grid)";
+
+        var catalogDataSource = new DashboardJsonDataSource("Catalogs (API)")
+        {
+            ComponentName = "catalogsDataSource",
+            JsonSource = new UriJsonSource(new Uri($"{dashboardBaseUrl}/api/catalogs"))
+        };
+
+        dashboard.DataSources.Add(catalogDataSource);
+
+        var grid = new GridDashboardItem
+        {
+            DataSource = catalogDataSource,
+            Name = "Catalogs"
+        };
+
+        grid.Columns.Add(new GridDimensionColumn(new Dimension(nameof(VwmyCatalog.Guid))) { Name = "Id" });
+        grid.Columns.Add(new GridDimensionColumn(new Dimension(nameof(VwmyCatalog.CatTitle))) { Name = "Titel" });
+        grid.Columns.Add(new GridDimensionColumn(new Dimension(nameof(VwmyCatalog.CatString))) { Name = "String" });
+        grid.Columns.Add(new GridDimensionColumn(new Dimension(nameof(VwmyCatalog.AddedWho))) { Name = "Angelegt von" });
+        grid.Columns.Add(new GridDimensionColumn(new Dimension(nameof(VwmyCatalog.AddedWhen))) { Name = "Angelegt am" });
+        grid.Columns.Add(new GridDimensionColumn(new Dimension(nameof(VwmyCatalog.ChangedWho))) { Name = "Geändert von" });
+        grid.Columns.Add(new GridDimensionColumn(new Dimension(nameof(VwmyCatalog.ChangedWhen))) { Name = "Geändert am" });
+
+        dashboard.Items.Add(grid);
+
+        var layoutGroup = new DashboardLayoutGroup { Orientation = DashboardLayoutGroupOrientation.Vertical };
+        layoutGroup.ChildNodes.Add(new DashboardLayoutItem(grid));
+        dashboard.LayoutRoot = layoutGroup;
+
+        dashboard.SaveToXml(catalogsGridDashboardPath);
+    }
+
     DashboardConfigurator configurator = new DashboardConfigurator();
-    // Register Dashboard Storage
-    configurator.SetDashboardStorage(new DashboardFileStorage(dashboardsPath));
-    // Create a sample JSON data source
+
+    var connectionString = builder.Configuration.GetConnectionString("DefaultConnection") ?? string.Empty;
+    var dashboardStorage = new SqlDashboardStorage(connectionString, "TBDD_SMF_CONFIG");
+    configurator.SetDashboardStorage(dashboardStorage);
+
     DataSourceInMemoryStorage dataSourceStorage = new DataSourceInMemoryStorage();
     DashboardJsonDataSource jsonDataSourceUrl = new DashboardJsonDataSource("JSON Data Source (URL)");
     jsonDataSourceUrl.JsonSource = new UriJsonSource(
             new Uri("https://raw.githubusercontent.com/DevExpress-Examples/DataSources/master/JSON/customers.json"));
     jsonDataSourceUrl.RootElement = "Customers";
     dataSourceStorage.RegisterDataSource("jsonDataSourceUrl", jsonDataSourceUrl.SaveToXml());
+
+    var catalogsJsonDataSource = new DashboardJsonDataSource("Catalogs (API)")
+    {
+        ComponentName = "catalogsDataSource",
+        JsonSource = new UriJsonSource(new Uri($"{dashboardBaseUrl}/api/catalogs"))
+    };
+    dataSourceStorage.RegisterDataSource(catalogsJsonDataSource.ComponentName, catalogsJsonDataSource.SaveToXml());
+    dataSourceStorage.RegisterDataSource(catalogsJsonDataSource.Name, catalogsJsonDataSource.SaveToXml());
+
     configurator.SetDataSourceStorage(dataSourceStorage);
+
+    EnsureDashboardInStorage(dashboardStorage, "DefaultDashboard", defaultDashboardPath);
+    EnsureDashboardInStorage(dashboardStorage, "CatalogsGrid", catalogsGridDashboardPath);
+
     return configurator;
 });
 
@@ -97,3 +159,15 @@ app.MapDashboardRoute("api/dashboard", "DefaultDashboard");
 app.MapControllers();
 
 app.Run();
+
+static void EnsureDashboardInStorage(IEditableDashboardStorage storage, string id, string filePath)
+{
+    var exists = storage.GetAvailableDashboardsInfo().Any(info => string.Equals(info.ID, id, StringComparison.OrdinalIgnoreCase));
+    if (exists || !File.Exists(filePath))
+    {
+        return;
+    }
+
+    var doc = XDocument.Load(filePath);
+    storage.AddDashboard(doc, id);
+}

DbFirst.API/appsettings.json

@@ -2,6 +2,9 @@
   "ConnectionStrings": {
     "DefaultConnection": "Server=SDD-VMP04-SQL17\\DD_DEVELOP01;Database=DD_ECM;User Id=sa;Password=dd;TrustServerCertificate=True;"
   },
+  "Dashboard": {
+    "BaseUrl": "https://localhost:7204"
+  },
   "Cors": {
     "AllowedOrigins": [
       "https://localhost:7276",

DbFirst.BlazorWasm/Components/CatalogsGrid.razor

@@ -0,0 +1,296 @@
+@inject CatalogApiClient Api
+
+<style>
+    .action-panel { margin-bottom: 16px; }
+    .grid-section { margin-top: 12px; }
+    .catalog-grid .dxbl-grid-sort-asc,
+    .catalog-grid .dxbl-grid-sort-desc {
+        display: none;
+    }
+    .catalog-grid th.dxbl-grid-header-sortable {
+        position: relative;
+        padding-right: 1.5rem;
+    }
+    .catalog-grid th.dxbl-grid-header-sortable::before,
+    .catalog-grid th.dxbl-grid-header-sortable::after {
+        content: "";
+        position: absolute;
+        right: 0.45rem;
+        width: 0.7rem;
+        height: 0.7rem;
+        background-repeat: no-repeat;
+        background-size: 0.7rem 0.7rem;
+        opacity: 0.35;
+        pointer-events: none;
+    }
+    .catalog-grid th.dxbl-grid-header-sortable::before {
+        top: 38%;
+        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.957 10.999a1 1 0 0 1-.821-1.571l2.633-3.785a1.5 1.5 0 0 1 2.462 0l2.633 3.785a1 1 0 0 1-.821 1.57H4.957Z' fill='%23888888'/%3E%3C/svg%3E");
+    }
+    .catalog-grid th.dxbl-grid-header-sortable::after {
+        top: 58%;
+        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.957 5a1 1 0 0 0-.821 1.571l2.633 3.784a1.5 1.5 0 0 0 2.462 0l2.633-3.784A1 1 0 0 0 11.043 5H4.957Z' fill='%23888888'/%3E%3C/svg%3E");
+    }
+    .catalog-grid th.dxbl-grid-header-sortable[aria-sort="ascending"]::after {
+        opacity: 0;
+    }
+    .catalog-grid th.dxbl-grid-header-sortable[aria-sort="descending"]::before {
+        opacity: 0;
+    }
+    .catalog-grid .filter-search-input input {
+        padding-right: 1.75rem;
+        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M9.309 10.016a4.5 4.5 0 1 1 .707-.707l3.838 3.837a.5.5 0 0 1-.708.708L9.31 10.016ZM10 6.5a3.5 3.5 0 1 0-7 0 3.5 3.5 0 0 0 7 0Z' fill='%23666666'/%3E%3C/svg%3E");
+        background-repeat: no-repeat;
+        background-position: right 0.5rem center;
+        background-size: 0.9rem;
+    }
+</style>
+
+@if (!string.IsNullOrWhiteSpace(errorMessage))
+{
+    <div class="alert alert-danger" role="alert">@errorMessage</div>
+}
+else if (!string.IsNullOrWhiteSpace(infoMessage))
+{
+    <div class="alert alert-success" role="alert">@infoMessage</div>
+}
+
+<div class="mb-3">
+    <DxButton RenderStyle="ButtonRenderStyle.Primary" Click="@StartCreate">Neuen Eintrag anlegen</DxButton>
+</div>
+
+@if (showForm)
+{
+    <div class="action-panel">
+        <EditForm Model="formModel" OnValidSubmit="HandleSubmit" Context="editCtx">
+            <DxFormLayout ColCount="2">
+                <DxFormLayoutItem Caption="Titel" Context="itemCtx">
+                    <DxTextBox @bind-Text="formModel.CatTitle" Enabled="@(isEditing ? formModel.UpdateProcedure != 0 : true)" />
+                </DxFormLayoutItem>
+                <DxFormLayoutItem Caption="Kennung" Context="itemCtx">
+                    <DxTextBox @bind-Text="formModel.CatString" />
+                </DxFormLayoutItem>
+                @if (isEditing)
+                {
+                    <DxFormLayoutItem Caption="Update-Prozedur" Context="itemCtx">
+                        <DxComboBox Data="@procedureOptions"
+                                    TextFieldName="Text"
+                                    ValueFieldName="Value"
+                                    @bind-Value="formModel.UpdateProcedure" />
+                    </DxFormLayoutItem>
+                }
+                <DxFormLayoutItem Caption=" " Context="itemCtx">
+                    <DxStack Orientation="Orientation.Horizontal" Spacing="8">
+                        <DxButton RenderStyle="ButtonRenderStyle.Success" ButtonType="ButtonType.Submit" SubmitFormOnClick="true" Context="btnCtx">@((isEditing ? "Speichern" : "Anlegen"))</DxButton>
+                        <DxButton RenderStyle="ButtonRenderStyle.Secondary" Click="@CancelEdit" Context="btnCtx">Abbrechen</DxButton>
+                    </DxStack>
+                </DxFormLayoutItem>
+            </DxFormLayout>
+        </EditForm>
+    </div>
+}
+
+@if (isLoading)
+{
+    <p><em>Lade Daten...</em></p>
+}
+else if (items.Count == 0)
+{
+    <p>Keine Einträge vorhanden.</p>
+}
+else
+{
+    <div class="grid-section">
+        <DxGrid Data="@items" TItem="CatalogReadDto" KeyFieldName="@nameof(CatalogReadDto.Guid)" ShowFilterRow="true" PageSize="10" CssClass="mb-4 catalog-grid">
+            <Columns>
+                <DxGridDataColumn FieldName="@nameof(CatalogReadDto.Guid)" Caption="Id" Width="140px" SortIndex="0" SortOrder="GridColumnSortOrder.Ascending">
+                    <FilterRowCellTemplate Context="filter">
+                        <DxTextBox Text="@(filter.FilterRowValue?.ToString())"
+                                   TextChanged="@(value => filter.FilterRowValue = value)"
+                                   CssClass="filter-search-input" />
+                    </FilterRowCellTemplate>
+                </DxGridDataColumn>
+                <DxGridDataColumn FieldName="@nameof(CatalogReadDto.CatTitle)" Caption="Titel">
+                    <FilterRowCellTemplate Context="filter">
+                        <DxTextBox Text="@(filter.FilterRowValue as string)"
+                                   TextChanged="@(value => filter.FilterRowValue = value)"
+                                   CssClass="filter-search-input" />
+                    </FilterRowCellTemplate>
+                </DxGridDataColumn>
+                <DxGridDataColumn FieldName="@nameof(CatalogReadDto.CatString)" Caption="String">
+                    <FilterRowCellTemplate Context="filter">
+                        <DxTextBox Text="@(filter.FilterRowValue as string)"
+                                   TextChanged="@(value => filter.FilterRowValue = value)"
+                                   CssClass="filter-search-input" />
+                    </FilterRowCellTemplate>
+                </DxGridDataColumn>
+                <DxGridDataColumn FieldName="@nameof(CatalogReadDto.AddedWho)" Caption="Angelegt von">
+                    <FilterRowCellTemplate Context="filter">
+                        <DxTextBox Text="@(filter.FilterRowValue as string)"
+                                   TextChanged="@(value => filter.FilterRowValue = value)"
+                                   CssClass="filter-search-input" />
+                    </FilterRowCellTemplate>
+                </DxGridDataColumn>
+                <DxGridDataColumn FieldName="@nameof(CatalogReadDto.AddedWhen)" Caption="Angelegt am" />
+                <DxGridDataColumn FieldName="@nameof(CatalogReadDto.ChangedWho)" Caption="Geändert von">
+                    <FilterRowCellTemplate Context="filter">
+                        <DxTextBox Text="@(filter.FilterRowValue as string)"
+                                   TextChanged="@(value => filter.FilterRowValue = value)"
+                                   CssClass="filter-search-input" />
+                    </FilterRowCellTemplate>
+                </DxGridDataColumn>
+                <DxGridDataColumn FieldName="@nameof(CatalogReadDto.ChangedWhen)" Caption="Geändert am" />
+                <DxGridDataColumn Caption="" Width="220px" AllowSort="false">
+                    <CellDisplayTemplate Context="cell">
+                        @{ var item = (CatalogReadDto)cell.DataItem; }
+                        <div style="white-space: nowrap;">
+                            <DxButton RenderStyle="ButtonRenderStyle.Secondary" Size="ButtonSize.Small" Click="@(() => StartEdit(item))">Bearbeiten</DxButton>
+                            <DxButton RenderStyle="ButtonRenderStyle.Danger" Size="ButtonSize.Small" Click="@(() => DeleteCatalog(item.Guid))">Löschen</DxButton>
+                        </div>
+                    </CellDisplayTemplate>
+                </DxGridDataColumn>
+            </Columns>
+        </DxGrid>
+    </div>
+}
+
+@code {
+    private List<CatalogReadDto> items = new();
+    private CatalogWriteDto formModel = new();
+    private int editingId;
+    private bool isLoading;
+    private bool isEditing;
+    private bool showForm;
+    private string? errorMessage;
+    private string? infoMessage;
+
+    private readonly List<ProcedureOption> procedureOptions = new()
+    {
+        new() { Value = 0, Text = "PRTBMY_CATALOG_UPDATE" },
+        new() { Value = 1, Text = "PRTBMY_CATALOG_SAVE" }
+    };
+
+    protected override async Task OnInitializedAsync()
+    {
+        await LoadCatalogs();
+    }
+
+    private async Task LoadCatalogs()
+    {
+        isLoading = true;
+        errorMessage = null;
+        try
+        {
+            items = await Api.GetAllAsync();
+        }
+        catch (Exception ex)
+        {
+            errorMessage = $"Kataloge konnten nicht geladen werden: {ex.Message}";
+        }
+        finally
+        {
+            isLoading = false;
+            StateHasChanged();
+        }
+    }
+
+    private void StartCreate()
+    {
+        formModel = new CatalogWriteDto();
+        editingId = 0;
+        isEditing = false;
+        showForm = true;
+        infoMessage = null;
+        errorMessage = null;
+    }
+
+    private void StartEdit(CatalogReadDto item)
+    {
+        formModel = new CatalogWriteDto
+        {
+            CatTitle = item.CatTitle,
+            CatString = item.CatString,
+            UpdateProcedure = 0
+        };
+        editingId = item.Guid;
+        isEditing = true;
+        showForm = true;
+        infoMessage = null;
+        errorMessage = null;
+    }
+
+    private async Task HandleSubmit()
+    {
+        errorMessage = null;
+        infoMessage = null;
+
+        try
+        {
+            if (isEditing)
+            {
+                var updated = await Api.UpdateAsync(editingId, formModel);
+                if (!updated.Success)
+                {
+                    errorMessage = updated.Error ?? "Aktualisierung fehlgeschlagen.";
+                    return;
+                }
+
+                infoMessage = "Katalog aktualisiert.";
+            }
+            else
+            {
+                var created = await Api.CreateAsync(formModel);
+                if (!created.Success || created.Value == null)
+                {
+                    errorMessage = created.Error ?? "Anlegen fehlgeschlagen.";
+                    return;
+                }
+
+                infoMessage = "Katalog angelegt.";
+            }
+
+            showForm = false;
+            await LoadCatalogs();
+        }
+        catch (Exception ex)
+        {
+            errorMessage = $"Fehler beim Speichern: {ex.Message}";
+        }
+    }
+
+    private void CancelEdit()
+    {
+        showForm = false;
+        infoMessage = null;
+        errorMessage = null;
+    }
+
+    private async Task DeleteCatalog(int id)
+    {
+        errorMessage = null;
+        infoMessage = null;
+
+        try
+        {
+            var deleted = await Api.DeleteAsync(id);
+            if (!deleted.Success)
+            {
+                errorMessage = deleted.Error ?? "Löschen fehlgeschlagen.";
+                return;
+            }
+
+            infoMessage = "Katalog gelöscht.";
+            await LoadCatalogs();
+        }
+        catch (Exception ex)
+        {
+            errorMessage = $"Fehler beim Löschen: {ex.Message}";
+        }
+    }
+
+    private sealed class ProcedureOption
+    {
+        public int Value { get; set; }
+        public string Text { get; set; } = string.Empty;
+    }
+}

DbFirst.BlazorWasm/Layout/NavMenu.razor

@@ -22,8 +22,8 @@
             </NavLink>
         </div>
         <div class="nav-item px-3">
-            <NavLink class="nav-link" href="dashboard">
-                <span class="oi oi-list-rich" aria-hidden="true"></span> Web Dashboard
+            <NavLink class="nav-link" href="dashboards/default">
+                <span class="oi oi-list-rich" aria-hidden="true"></span> Dashboards
             </NavLink>
         </div>
     </nav>

DbFirst.BlazorWasm/Pages/Catalogs.razor

@@ -1,303 +1,7 @@
-@* Stellt die Catalog-Verwaltung bereit.
-   Nutzt CatalogApiClient für API-Interaktionen und DevExpress-Komponenten für die Benutzeroberfläche. *@
-
 @page "/catalogs"
-@inject CatalogApiClient Api
-
-<style>
-    .action-panel { margin-bottom: 16px; }
-    .grid-section { margin-top: 12px; }
-    .catalog-grid th.dxbl-grid-header-sortable {
-        position: relative;
-        padding-right: 1.5rem;
-    }
-    .catalog-grid th.dxbl-grid-header-sortable:not(:has(.dxbl-grid-sort-asc)):not(:has(.dxbl-grid-sort-desc))::before,
-    .catalog-grid th.dxbl-grid-header-sortable:not(:has(.dxbl-grid-sort-asc)):not(:has(.dxbl-grid-sort-desc))::after {
-        content: "";
-        position: absolute;
-        right: 0.45rem;
-        width: 0.7rem;
-        height: 0.7rem;
-        background-repeat: no-repeat;
-        background-size: 0.7rem 0.7rem;
-        opacity: 0.35;
-        pointer-events: none;
-    }
-    .catalog-grid th.dxbl-grid-header-sortable:not(:has(.dxbl-grid-sort-asc)):not(:has(.dxbl-grid-sort-desc))::before {
-        top: 38%;
-        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.957 10.999a1 1 0 0 1-.821-1.571l2.633-3.785a1.5 1.5 0 0 1 2.462 0l2.633 3.785a1 1 0 0 1-.821 1.57H4.957Z' fill='%23888888'/%3E%3C/svg%3E");
-    }
-    .catalog-grid th.dxbl-grid-header-sortable:not(:has(.dxbl-grid-sort-asc)):not(:has(.dxbl-grid-sort-desc))::after {
-        top: 58%;
-        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.957 5a1 1 0 0 0-.821 1.571l2.633 3.784a1.5 1.5 0 0 0 2.462 0l2.633-3.784A1 1 0 0 0 11.043 5H4.957Z' fill='%23888888'/%3E%3C/svg%3E");
-    }
-    .catalog-grid .filter-search-input input {
-        padding-right: 1.75rem;
-        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M9.309 10.016a4.5 4.5 0 1 1 .707-.707l3.838 3.837a.5.5 0 0 1-.708.708L9.31 10.016ZM10 6.5a3.5 3.5 0 1 0-7 0 3.5 3.5 0 0 0 7 0Z' fill='%23666666'/%3E%3C/svg%3E");
-        background-repeat: no-repeat;
-        background-position: right 0.5rem center;
-        background-size: 0.9rem;
-    }
-</style>
 
 <PageTitle>Catalogs</PageTitle>
 
 <h1>Catalogs</h1>
 
-@if (!string.IsNullOrWhiteSpace(errorMessage))
-{
-    <div class="alert alert-danger" role="alert">@errorMessage</div>
-}
-else if (!string.IsNullOrWhiteSpace(infoMessage))
-{
-    <div class="alert alert-success" role="alert">@infoMessage</div>
-}
-
-<div class="mb-3">
-    <DxButton RenderStyle="ButtonRenderStyle.Primary" Click="@StartCreate">Neuen Eintrag anlegen</DxButton>
-</div>
-
-@if (showForm)
-{
-    <div class="action-panel">
-        <EditForm Model="formModel" OnValidSubmit="HandleSubmit" Context="editCtx">
-            <DxFormLayout ColCount="2">
-                <DxFormLayoutItem Caption="Titel" Context="itemCtx">
-                    <DxTextBox @bind-Text="formModel.CatTitle" Enabled="@(isEditing ? formModel.UpdateProcedure != 0 : true)" />
-                </DxFormLayoutItem>
-                <DxFormLayoutItem Caption="Kennung" Context="itemCtx">
-                    <DxTextBox @bind-Text="formModel.CatString" />
-                </DxFormLayoutItem>
-                @if (isEditing)
-                {
-                    <DxFormLayoutItem Caption="Update-Prozedur" Context="itemCtx">
-                        <DxComboBox Data="@procedureOptions"
-                                    TextFieldName="Text"
-                                    ValueFieldName="Value"
-                                    @bind-Value="formModel.UpdateProcedure" />
-                    </DxFormLayoutItem>
-                }
-                <DxFormLayoutItem Caption=" " Context="itemCtx">
-                    <DxStack Orientation="Orientation.Horizontal" Spacing="8">
-                        <DxButton RenderStyle="ButtonRenderStyle.Success" ButtonType="ButtonType.Submit" SubmitFormOnClick="true" Context="btnCtx">@((isEditing ? "Speichern" : "Anlegen"))</DxButton>
-                        <DxButton RenderStyle="ButtonRenderStyle.Secondary" Click="@CancelEdit" Context="btnCtx">Abbrechen</DxButton>
-                    </DxStack>
-                </DxFormLayoutItem>
-            </DxFormLayout>
-        </EditForm>
-    </div>
-}
-
-@if (isLoading)
-{
-    <p><em>Lade Daten...</em></p>
-}
-else if (items.Count == 0)
-{
-    <p>Keine Einträge vorhanden.</p>
-}
-else
-{
-    <div class="grid-section">
-        <DxGrid Data="@items" TItem="CatalogReadDto" KeyFieldName="@nameof(CatalogReadDto.Guid)" ShowFilterRow="true" PageSize="10" CssClass="mb-4 catalog-grid">
-            <Columns>
-                <DxGridDataColumn FieldName="@nameof(CatalogReadDto.Guid)" Caption="Id" Width="140px" SortIndex="0" SortOrder="GridColumnSortOrder.Ascending">
-                    <FilterRowCellTemplate Context="filter">
-                        <DxTextBox Text="@(filter.FilterRowValue?.ToString())"
-                                   TextChanged="@(value => filter.FilterRowValue = value)"
-                                   CssClass="filter-search-input" />
-                    </FilterRowCellTemplate>
-                </DxGridDataColumn>
-                <DxGridDataColumn FieldName="@nameof(CatalogReadDto.CatTitle)" Caption="Titel">
-                    <FilterRowCellTemplate Context="filter">
-                        <DxTextBox Text="@(filter.FilterRowValue as string)"
-                                   TextChanged="@(value => filter.FilterRowValue = value)"
-                                   CssClass="filter-search-input" />
-                    </FilterRowCellTemplate>
-                </DxGridDataColumn>
-                <DxGridDataColumn FieldName="@nameof(CatalogReadDto.CatString)" Caption="String">
-                    <FilterRowCellTemplate Context="filter">
-                        <DxTextBox Text="@(filter.FilterRowValue as string)"
-                                   TextChanged="@(value => filter.FilterRowValue = value)"
-                                   CssClass="filter-search-input" />
-                    </FilterRowCellTemplate>
-                </DxGridDataColumn>
-                <DxGridDataColumn FieldName="@nameof(CatalogReadDto.AddedWho)" Caption="Angelegt von">
-                    <FilterRowCellTemplate Context="filter">
-                        <DxTextBox Text="@(filter.FilterRowValue as string)"
-                                   TextChanged="@(value => filter.FilterRowValue = value)"
-                                   CssClass="filter-search-input" />
-                    </FilterRowCellTemplate>
-                </DxGridDataColumn>
-                <DxGridDataColumn FieldName="@nameof(CatalogReadDto.AddedWhen)" Caption="Angelegt am" />
-                <DxGridDataColumn FieldName="@nameof(CatalogReadDto.ChangedWho)" Caption="Geändert von">
-                    <FilterRowCellTemplate Context="filter">
-                        <DxTextBox Text="@(filter.FilterRowValue as string)"
-                                   TextChanged="@(value => filter.FilterRowValue = value)"
-                                   CssClass="filter-search-input" />
-                    </FilterRowCellTemplate>
-                </DxGridDataColumn>
-                <DxGridDataColumn FieldName="@nameof(CatalogReadDto.ChangedWhen)" Caption="Geändert am" />
-                <DxGridDataColumn Caption="" Width="220px" AllowSort="false">
-                    <CellDisplayTemplate Context="cell">
-                        @{ var item = (CatalogReadDto)cell.DataItem; }
-                        <div style="white-space: nowrap;">
-                            <DxButton RenderStyle="ButtonRenderStyle.Secondary" Size="ButtonSize.Small" Click="@(() => StartEdit(item))">Bearbeiten</DxButton>
-                            <DxButton RenderStyle="ButtonRenderStyle.Danger" Size="ButtonSize.Small" Click="@(() => DeleteCatalog(item.Guid))">Löschen</DxButton>
-                        </div>
-                    </CellDisplayTemplate>
-                </DxGridDataColumn>
-            </Columns>
-        </DxGrid>
-    </div>
-}
-
-@code {
-    private List<CatalogReadDto> items = new();
-    private CatalogWriteDto formModel = new();
-    private int editingId;
-    private bool isLoading;
-    private bool isEditing;
-    private bool showForm;
-    private string? errorMessage;
-    private string? infoMessage;
-
-    private readonly List<ProcedureOption> procedureOptions = new()
-    {
-        new() { Value = 0, Text = "PRTBMY_CATALOG_UPDATE" },
-        new() { Value = 1, Text = "PRTBMY_CATALOG_SAVE" }
-    };
-
-    protected override async Task OnInitializedAsync()
-    {
-        await LoadCatalogs();
-    }
-
-    private async Task LoadCatalogs()
-    {
-        // Lädt die Liste der Kataloge aus der API.
-        // Setzt Ladezustand und behandelt Fehler.
-
-        isLoading = true;
-        errorMessage = null;
-        try
-        {
-            items = await Api.GetAllAsync();
-        }
-        catch (Exception ex)
-        {
-            errorMessage = $"Kataloge konnten nicht geladen werden: {ex.Message}";
-        }
-        finally
-        {
-            isLoading = false;
-            StateHasChanged();
-        }
-    }
-
-    private void StartCreate()
-    {
-        formModel = new CatalogWriteDto();
-        editingId = 0;
-        isEditing = false;
-        showForm = true;
-        infoMessage = null;
-        errorMessage = null;
-    }
-
-    private void StartEdit(CatalogReadDto item)
-    {
-        formModel = new CatalogWriteDto
-        {
-            CatTitle = item.CatTitle,
-            CatString = item.CatString,
-            UpdateProcedure = 0
-        };
-        editingId = item.Guid;
-        isEditing = true;
-        showForm = true;
-        infoMessage = null;
-        errorMessage = null;
-    }
-
-    private async Task HandleSubmit()
-    {
-        // Behandelt das Absenden des Formulars.
-        // Führt entweder eine Aktualisierung oder das Anlegen eines neuen Eintrags durch.
-
-        errorMessage = null;
-        infoMessage = null;
-
-        try
-        {
-            if (isEditing)
-            {
-                var updated = await Api.UpdateAsync(editingId, formModel);
-                if (!updated.Success)
-                {
-                    errorMessage = updated.Error ?? "Aktualisierung fehlgeschlagen.";
-                    return;
-                }
-
-                infoMessage = "Katalog aktualisiert.";
-            }
-            else
-            {
-                var created = await Api.CreateAsync(formModel);
-                if (!created.Success || created.Value == null)
-                {
-                    errorMessage = created.Error ?? "Anlegen fehlgeschlagen.";
-                    return;
-                }
-
-                infoMessage = "Katalog angelegt.";
-            }
-
-            showForm = false;
-            await LoadCatalogs();
-        }
-        catch (Exception ex)
-        {
-            errorMessage = $"Fehler beim Speichern: {ex.Message}";
-        }
-    }
-
-    private void CancelEdit()
-    {
-        showForm = false;
-        infoMessage = null;
-        errorMessage = null;
-    }
-
-    private async Task DeleteCatalog(int id)
-    {
-        // Löscht einen Katalogeintrag basierend auf der ID.
-        // Aktualisiert die Liste nach erfolgreichem Löschen.
-
-        errorMessage = null;
-        infoMessage = null;
-
-        try
-        {
-            var deleted = await Api.DeleteAsync(id);
-            if (!deleted.Success)
-            {
-                errorMessage = deleted.Error ?? "Löschen fehlgeschlagen.";
-                return;
-            }
-
-            infoMessage = "Katalog gelöscht.";
-            await LoadCatalogs();
-        }
-        catch (Exception ex)
-        {
-            errorMessage = $"Fehler beim Löschen: {ex.Message}";
-        }
-    }
-
-    private sealed class ProcedureOption
-    {
-        public int Value { get; set; }
-        public string Text { get; set; } = string.Empty;
-    }
-}
+<CatalogsGrid />

DbFirst.BlazorWasm/Pages/Dashboard.razor

@@ -1,12 +1,71 @@
 @page "/dashboard"
+@page "/dashboards/{DashboardId?}"
 @inject Microsoft.Extensions.Configuration.IConfiguration Configuration
+@inject NavigationManager Navigation
 
-<DxDashboard Endpoint="@DashboardEndpoint" style="width: 100%; height: 800px;">
-</DxDashboard>
+<style>
+    .dashboard-shell {
+        display: flex;
+        gap: 0;
+        min-height: 800px;
+        border: 1px solid #e6e6e6;
+        border-radius: 6px;
+        overflow: hidden;
+        background: #fff;
+    }
+    .dashboard-nav {
+        width: 220px;
+        border-right: 1px solid #e6e6e6;
+        background: #fafafa;
+    }
+    .dashboard-nav-title {
+        padding: 0.75rem 1rem 0.5rem;
+        font-size: 0.7rem;
+        text-transform: uppercase;
+        letter-spacing: 0.08em;
+        color: #6c757d;
+        font-weight: 600;
+    }
+    .dashboard-nav-link {
+        display: block;
+        padding: 0.55rem 1rem;
+        color: inherit;
+        text-decoration: none;
+    }
+    .dashboard-nav-link.active {
+        background: #e9ecef;
+        font-weight: 600;
+    }
+    .dashboard-content {
+        flex: 1;
+        min-width: 0;
+        padding: 1rem;
+    }
+</style>
+
+<PageTitle>Dashboards</PageTitle>
+
+<div class="dashboard-shell">
+    <aside class="dashboard-nav">
+        <div class="dashboard-nav-title">Dashboards</div>
+        <NavLink class="dashboard-nav-link" href="dashboards/default">Default Dashboard (Designer)</NavLink>
+    </aside>
+    <section class="dashboard-content">
+        <DxDashboard Endpoint="@DashboardEndpoint" InitialDashboardId="DefaultDashboard" WorkingMode="WorkingMode.Designer" style="width: 100%; height: 800px;">
+        </DxDashboard>
+    </section>
+</div>
 
 @code {
-    private string DashboardEndpoint => $"{Configuration["ApiBaseUrl"]?.TrimEnd('/')}/api/dashboard";
-}
+    [Parameter] public string? DashboardId { get; set; }
 
-@* <DxDashboard Endpoint="api/dashboard" WorkingMode="WorkingMode.ViewerOnly" style="width: 100%; height: 800px;">
-</DxDashboard> *@
+    private string DashboardEndpoint => $"{Configuration["ApiBaseUrl"]?.TrimEnd('/')}/api/dashboard";
+
+    protected override void OnParametersSet()
+    {
+        if (!string.Equals(DashboardId, "default", StringComparison.OrdinalIgnoreCase))
+        {
+            Navigation.NavigateTo("dashboards/default", replace: true);
+        }
+    }
+}

DbFirst.BlazorWasm/_Imports.razor

@@ -10,6 +10,7 @@
 @using DbFirst.BlazorWasm.Layout
 @using DbFirst.BlazorWasm.Models
 @using DbFirst.BlazorWasm.Services
+@using DbFirst.BlazorWasm.Components
 @using DevExpress.Blazor
 @using DevExpress.DashboardBlazor
 @using DevExpress.DashboardWeb

DbFirst.BlazorWebApp/Components/CatalogsGrid.razor

@@ -0,0 +1,225 @@
+@inject CatalogApiClient Api
+
+<style>
+    .action-panel { margin-bottom: 16px; }
+    .grid-section { margin-top: 12px; }
+</style>
+
+@if (!string.IsNullOrWhiteSpace(errorMessage))
+{
+    <div class="alert alert-danger" role="alert">@errorMessage</div>
+}
+else if (!string.IsNullOrWhiteSpace(infoMessage))
+{
+    <div class="alert alert-success" role="alert">@infoMessage</div>
+}
+
+<div class="mb-3">
+    <DxButton RenderStyle="ButtonRenderStyle.Primary" Click="@StartCreate">Neuen Eintrag anlegen</DxButton>
+</div>
+
+@if (showForm)
+{
+    <div class="action-panel">
+        <EditForm Model="formModel" OnValidSubmit="HandleSubmit" Context="editCtx">
+            <DxFormLayout ColCount="2">
+                <DxFormLayoutItem Caption="Titel" Context="itemCtx">
+                    <DxTextBox @bind-Text="formModel.CatTitle" Enabled="@(isEditing ? formModel.UpdateProcedure != 0 : true)" />
+                </DxFormLayoutItem>
+                <DxFormLayoutItem Caption="Kennung" Context="itemCtx">
+                    <DxTextBox @bind-Text="formModel.CatString" />
+                </DxFormLayoutItem>
+                @if (isEditing)
+                {
+                    <DxFormLayoutItem Caption="Update-Prozedur" Context="itemCtx">
+                        <DxComboBox Data="@procedureOptions"
+                                    TextFieldName="Text"
+                                    ValueFieldName="Value"
+                                    @bind-Value="formModel.UpdateProcedure" />
+                    </DxFormLayoutItem>
+                }
+                <DxFormLayoutItem Caption=" " Context="itemCtx">
+                    <DxStack Orientation="Orientation.Horizontal" Spacing="8">
+                        <DxButton RenderStyle="ButtonRenderStyle.Success" ButtonType="ButtonType.Submit" SubmitFormOnClick="true" Context="btnCtx">@((isEditing ? "Speichern" : "Anlegen"))</DxButton>
+                        <DxButton RenderStyle="ButtonRenderStyle.Secondary" Click="@CancelEdit" Context="btnCtx">Abbrechen</DxButton>
+                    </DxStack>
+                </DxFormLayoutItem>
+            </DxFormLayout>
+        </EditForm>
+    </div>
+}
+
+@if (isLoading)
+{
+    <p><em>Lade Daten...</em></p>
+}
+else if (items.Count == 0)
+{
+    <p>Keine Einträge vorhanden.</p>
+}
+else
+{
+    <div class="grid-section">
+        <DxGrid Data="@items" TItem="CatalogReadDto" KeyFieldName="@nameof(CatalogReadDto.Guid)" ShowFilterRow="true" PageSize="10" CssClass="mb-4 catalog-grid">
+            <Columns>
+                <DxGridDataColumn FieldName="@nameof(CatalogReadDto.Guid)" Caption="Id" Width="140px" SortIndex="0" SortOrder="GridColumnSortOrder.Ascending" />
+                <DxGridDataColumn FieldName="@nameof(CatalogReadDto.CatTitle)" Caption="Titel" />
+                <DxGridDataColumn FieldName="@nameof(CatalogReadDto.CatString)" Caption="String" />
+                <DxGridDataColumn FieldName="@nameof(CatalogReadDto.AddedWho)" Caption="Angelegt von" />
+                <DxGridDataColumn FieldName="@nameof(CatalogReadDto.AddedWhen)" Caption="Angelegt am" />
+                <DxGridDataColumn FieldName="@nameof(CatalogReadDto.ChangedWho)" Caption="Geändert von" />
+                <DxGridDataColumn FieldName="@nameof(CatalogReadDto.ChangedWhen)" Caption="Geändert am" />
+                <DxGridDataColumn Caption="" Width="220px" AllowSort="false">
+                    <CellDisplayTemplate Context="cell">
+                        @{ var item = (CatalogReadDto)cell.DataItem; }
+                        <div style="white-space: nowrap;">
+                            <DxButton RenderStyle="ButtonRenderStyle.Secondary" Size="ButtonSize.Small" Click="@(() => StartEdit(item))">Bearbeiten</DxButton>
+                            <DxButton RenderStyle="ButtonRenderStyle.Danger" Size="ButtonSize.Small" Click="@(() => DeleteCatalog(item.Guid))">Löschen</DxButton>
+                        </div>
+                    </CellDisplayTemplate>
+                </DxGridDataColumn>
+            </Columns>
+        </DxGrid>
+    </div>
+}
+
+@code {
+    private List<CatalogReadDto> items = new();
+    private CatalogWriteDto formModel = new();
+    private int editingId;
+    private bool isLoading;
+    private bool isEditing;
+    private bool showForm;
+    private string? errorMessage;
+    private string? infoMessage;
+
+    private readonly List<ProcedureOption> procedureOptions = new()
+    {
+        new() { Value = 0, Text = "PRTBMY_CATALOG_UPDATE" },
+        new() { Value = 1, Text = "PRTBMY_CATALOG_SAVE" }
+    };
+
+    protected override async Task OnInitializedAsync()
+    {
+        await LoadCatalogs();
+    }
+
+    private async Task LoadCatalogs()
+    {
+        isLoading = true;
+        errorMessage = null;
+        try
+        {
+            items = await Api.GetAllAsync();
+        }
+        catch (Exception ex)
+        {
+            errorMessage = $"Kataloge konnten nicht geladen werden: {ex.Message}";
+        }
+        finally
+        {
+            isLoading = false;
+            StateHasChanged();
+        }
+    }
+
+    private void StartCreate()
+    {
+        formModel = new CatalogWriteDto();
+        editingId = 0;
+        isEditing = false;
+        showForm = true;
+        infoMessage = null;
+        errorMessage = null;
+    }
+
+    private void StartEdit(CatalogReadDto item)
+    {
+        formModel = new CatalogWriteDto
+        {
+            CatTitle = item.CatTitle,
+            CatString = item.CatString,
+            UpdateProcedure = 0
+        };
+        editingId = item.Guid;
+        isEditing = true;
+        showForm = true;
+        infoMessage = null;
+        errorMessage = null;
+    }
+
+    private async Task HandleSubmit()
+    {
+        errorMessage = null;
+        infoMessage = null;
+
+        try
+        {
+            if (isEditing)
+            {
+                var updated = await Api.UpdateAsync(editingId, formModel);
+                if (!updated.Success)
+                {
+                    errorMessage = updated.Error ?? "Aktualisierung fehlgeschlagen.";
+                    return;
+                }
+
+                infoMessage = "Katalog aktualisiert.";
+            }
+            else
+            {
+                var created = await Api.CreateAsync(formModel);
+                if (!created.Success || created.Value == null)
+                {
+                    errorMessage = created.Error ?? "Anlegen fehlgeschlagen.";
+                    return;
+                }
+
+                infoMessage = "Katalog angelegt.";
+            }
+
+            showForm = false;
+            await LoadCatalogs();
+        }
+        catch (Exception ex)
+        {
+            errorMessage = $"Fehler beim Speichern: {ex.Message}";
+        }
+    }
+
+    private void CancelEdit()
+    {
+        showForm = false;
+        infoMessage = null;
+        errorMessage = null;
+    }
+
+    private async Task DeleteCatalog(int id)
+    {
+        errorMessage = null;
+        infoMessage = null;
+
+        try
+        {
+            var deleted = await Api.DeleteAsync(id);
+            if (!deleted.Success)
+            {
+                errorMessage = deleted.Error ?? "Löschen fehlgeschlagen.";
+                return;
+            }
+
+            infoMessage = "Katalog gelöscht.";
+            await LoadCatalogs();
+        }
+        catch (Exception ex)
+        {
+            errorMessage = $"Fehler beim Löschen: {ex.Message}";
+        }
+    }
+
+    private sealed class ProcedureOption
+    {
+        public int Value { get; set; }
+        public string Text { get; set; } = string.Empty;
+    }
+}

DbFirst.BlazorWebApp/Components/Layout/NavMenu.razor

@@ -26,8 +26,14 @@
             </NavLink>
         </div>
         <div class="nav-item px-3">
-            <NavLink class="nav-link" href="dashboard">
-                <span class="oi oi-list-rich" aria-hidden="true"></span> Web Dashboard
+            <NavLink class="nav-link" href="catalogs">
+                <span class="bi bi-collection-nav-menu" aria-hidden="true"></span> Catalogs
+            </NavLink>
+        </div>
+
+        <div class="nav-item px-3">
+            <NavLink class="nav-link" href="dashboards/default">
+                <span class="oi oi-list-rich" aria-hidden="true"></span> Dashboards
             </NavLink>
         </div>
     </nav>

DbFirst.BlazorWebApp/Components/Pages/Catalogs.razor

@@ -0,0 +1,7 @@
+@page "/catalogs"
+
+<PageTitle>Catalogs</PageTitle>
+
+<h1>Catalogs</h1>
+
+<CatalogsGrid />

DbFirst.BlazorWebApp/Components/Pages/Dashboard.razor

@@ -1,12 +1,71 @@
 @page "/dashboard"
+@page "/dashboards/{DashboardId?}"
 @inject Microsoft.Extensions.Configuration.IConfiguration Configuration
+@inject NavigationManager Navigation
 
-<DxDashboard Endpoint="@DashboardEndpoint" style="width: 100%; height: 800px;">
-</DxDashboard>
+<style>
+    .dashboard-shell {
+        display: flex;
+        gap: 0;
+        min-height: 800px;
+        border: 1px solid #e6e6e6;
+        border-radius: 6px;
+        overflow: hidden;
+        background: #fff;
+    }
+    .dashboard-nav {
+        width: 220px;
+        border-right: 1px solid #e6e6e6;
+        background: #fafafa;
+    }
+    .dashboard-nav-title {
+        padding: 0.75rem 1rem 0.5rem;
+        font-size: 0.7rem;
+        text-transform: uppercase;
+        letter-spacing: 0.08em;
+        color: #6c757d;
+        font-weight: 600;
+    }
+    .dashboard-nav-link {
+        display: block;
+        padding: 0.55rem 1rem;
+        color: inherit;
+        text-decoration: none;
+    }
+    .dashboard-nav-link.active {
+        background: #e9ecef;
+        font-weight: 600;
+    }
+    .dashboard-content {
+        flex: 1;
+        min-width: 0;
+        padding: 1rem;
+    }
+</style>
+
+<PageTitle>Dashboards</PageTitle>
+
+<div class="dashboard-shell">
+    <aside class="dashboard-nav">
+        <div class="dashboard-nav-title">Dashboards</div>
+        <NavLink class="dashboard-nav-link" href="dashboards/default">Default Dashboard (Designer)</NavLink>
+    </aside>
+    <section class="dashboard-content">
+        <DxDashboard Endpoint="@DashboardEndpoint" InitialDashboardId="DefaultDashboard" WorkingMode="WorkingMode.Designer" style="width: 100%; height: 800px;">
+        </DxDashboard>
+    </section>
+</div>
 
 @code {
-    private string DashboardEndpoint => $"{Configuration["ApiBaseUrl"]?.TrimEnd('/')}/api/dashboard";
-}
+    [Parameter] public string? DashboardId { get; set; }
 
-@* <DxDashboard Endpoint="api/dashboard" WorkingMode="WorkingMode.ViewerOnly" style="width: 100%; height: 800px;">
-</DxDashboard> *@
+    private string DashboardEndpoint => $"{Configuration["ApiBaseUrl"]?.TrimEnd('/')}/api/dashboard";
+
+    protected override void OnParametersSet()
+    {
+        if (!string.Equals(DashboardId, "default", StringComparison.OrdinalIgnoreCase))
+        {
+            Navigation.NavigateTo("dashboards/default", replace: true);
+        }
+    }
+}

DbFirst.BlazorWebApp/Components/_Imports.razor

@@ -8,6 +8,9 @@
 @using Microsoft.JSInterop
 @using DbFirst.BlazorWebApp
 @using DbFirst.BlazorWebApp.Components
+@using DbFirst.BlazorWebApp.Models
+@using DbFirst.BlazorWebApp.Services
 @using DevExpress.Blazor
 @using DevExpress.DashboardBlazor
-@using DevExpress.DashboardWeb
+@using DevExpress.DashboardWeb
+@using DbFirst.BlazorWebApp

DbFirst.BlazorWebApp/Models/CatalogReadDto.cs

@@ -0,0 +1,12 @@
+namespace DbFirst.BlazorWebApp.Models;
+
+public class CatalogReadDto
+{
+    public int Guid { get; set; }
+    public string CatTitle { get; set; } = null!;
+    public string CatString { get; set; } = null!;
+    public string AddedWho { get; set; } = null!;
+    public DateTime AddedWhen { get; set; }
+    public string? ChangedWho { get; set; }
+    public DateTime? ChangedWhen { get; set; }
+}

DbFirst.BlazorWebApp/Models/CatalogWriteDto.cs

@@ -0,0 +1,8 @@
+namespace DbFirst.BlazorWebApp.Models;
+
+public class CatalogWriteDto
+{
+    public string CatTitle { get; set; } = string.Empty;
+    public string CatString { get; set; } = string.Empty;
+    public int UpdateProcedure { get; set; }
+}

DbFirst.BlazorWebApp/Program.cs

@@ -1,4 +1,5 @@
 using DbFirst.BlazorWebApp.Components;
+using DbFirst.BlazorWebApp.Services;
 using DevExpress.Blazor;
 
 var builder = WebApplication.CreateBuilder(args);
@@ -9,6 +10,19 @@ builder.Services.AddRazorComponents()
 
 builder.Services.AddDevExpressBlazor();
 
+var apiBaseUrl = builder.Configuration["ApiBaseUrl"];
+if (!string.IsNullOrWhiteSpace(apiBaseUrl))
+{
+    builder.Services.AddHttpClient<CatalogApiClient>(client =>
+    {
+        client.BaseAddress = new Uri(apiBaseUrl);
+    });
+}
+else
+{
+    builder.Services.AddHttpClient<CatalogApiClient>();
+}
+
 var app = builder.Build();
 
 // Configure the HTTP request pipeline.

DbFirst.BlazorWebApp/Services/CatalogApiClient.cs

@@ -0,0 +1,136 @@
+using System.Net;
+using System.Net.Http.Json;
+using DbFirst.BlazorWebApp.Models;
+
+namespace DbFirst.BlazorWebApp.Services;
+
+public class CatalogApiClient
+{
+    private readonly HttpClient _httpClient;
+    private const string Endpoint = "api/catalogs";
+
+    public CatalogApiClient(HttpClient httpClient)
+    {
+        _httpClient = httpClient;
+    }
+
+    public async Task<List<CatalogReadDto>> GetAllAsync()
+    {
+        var result = await _httpClient.GetFromJsonAsync<List<CatalogReadDto>>(Endpoint);
+        return result ?? new List<CatalogReadDto>();
+    }
+
+    public async Task<CatalogReadDto?> GetByIdAsync(int id)
+    {
+        return await _httpClient.GetFromJsonAsync<CatalogReadDto>($"{Endpoint}/{id}");
+    }
+
+    public async Task<ApiResult<CatalogReadDto?>> CreateAsync(CatalogWriteDto dto)
+    {
+        var response = await _httpClient.PostAsJsonAsync(Endpoint, dto);
+        if (response.IsSuccessStatusCode)
+        {
+            var payload = await response.Content.ReadFromJsonAsync<CatalogReadDto>();
+            return ApiResult<CatalogReadDto?>.Ok(payload);
+        }
+
+        var error = await ReadErrorAsync(response);
+        return ApiResult<CatalogReadDto?>.Fail(error);
+    }
+
+    public async Task<ApiResult<bool>> UpdateAsync(int id, CatalogWriteDto dto)
+    {
+        var response = await _httpClient.PutAsJsonAsync($"{Endpoint}/{id}", dto);
+        if (response.IsSuccessStatusCode)
+        {
+            return ApiResult<bool>.Ok(true);
+        }
+
+        var error = await ReadErrorAsync(response);
+        return ApiResult<bool>.Fail(error);
+    }
+
+    public async Task<ApiResult<bool>> DeleteAsync(int id)
+    {
+        var response = await _httpClient.DeleteAsync($"{Endpoint}/{id}");
+        if (response.IsSuccessStatusCode)
+        {
+            return ApiResult<bool>.Ok(true);
+        }
+
+        var error = await ReadErrorAsync(response);
+        return ApiResult<bool>.Fail(error);
+    }
+
+    private static async Task<string> ReadErrorAsync(HttpResponseMessage response)
+    {
+        string? problemTitle = null;
+        string? problemDetail = null;
+
+        try
+        {
+            var problem = await response.Content.ReadFromJsonAsync<ProblemDetailsDto>();
+            if (problem != null)
+            {
+                problemTitle = problem.Title;
+                problemDetail = problem.Detail ?? problem.Type;
+            }
+        }
+        catch
+        {
+        }
+
+        var status = response.StatusCode;
+        var reason = response.ReasonPhrase;
+        var body = await response.Content.ReadAsStringAsync();
+
+        string? detail = problemDetail;
+        if (string.IsNullOrWhiteSpace(detail) && !string.IsNullOrWhiteSpace(body))
+        {
+            detail = body;
+        }
+
+        if (status == HttpStatusCode.Conflict)
+        {
+            return "Datensatz existiert bereits. Bitte wählen Sie einen anderen Titel.";
+        }
+        if (status == HttpStatusCode.BadRequest && (detail?.Contains("CatTitle cannot be changed", StringComparison.OrdinalIgnoreCase) ?? false))
+        {
+            return "Titel kann nicht geändert werden.";
+        }
+
+        return status switch
+        {
+            HttpStatusCode.BadRequest => $"Eingabe ungültig{FormatSuffix(problemTitle, detail, reason)}",
+            HttpStatusCode.NotFound => $"Nicht gefunden{FormatSuffix(problemTitle, detail, reason)}",
+            HttpStatusCode.Conflict => $"Konflikt{FormatSuffix(problemTitle, detail, reason)}",
+            HttpStatusCode.Unauthorized => $"Nicht autorisiert{FormatSuffix(problemTitle, detail, reason)}",
+            HttpStatusCode.Forbidden => $"Nicht erlaubt{FormatSuffix(problemTitle, detail, reason)}",
+            HttpStatusCode.InternalServerError => $"Serverfehler{FormatSuffix(problemTitle, detail, reason)}",
+            _ => $"Fehler {(int)status} {reason ?? string.Empty}{FormatSuffix(problemTitle, detail, reason)}"
+        };
+    }
+
+    private static string FormatSuffix(string? title, string? detail, string? reason)
+    {
+        var parts = new List<string>();
+        if (!string.IsNullOrWhiteSpace(title)) parts.Add(title);
+        if (!string.IsNullOrWhiteSpace(detail)) parts.Add(detail);
+        if (parts.Count == 0 && !string.IsNullOrWhiteSpace(reason)) parts.Add(reason);
+        if (parts.Count == 0) return string.Empty;
+        return ": " + string.Join(" | ", parts);
+    }
+}
+
+public record ApiResult<T>(bool Success, T? Value, string? Error)
+{
+    public static ApiResult<T> Ok(T? value) => new(true, value, null);
+    public static ApiResult<T> Fail(string? error) => new(false, default, error);
+}
+
+internal sealed class ProblemDetailsDto
+{
+    public string? Type { get; set; }
+    public string? Title { get; set; }
+    public string? Detail { get; set; }
+}