Update dashboard navigation and dynamic loading

- Changed NavMenu to link to /dashboards instead of /dashboards/default - Refactored Dashboard.razor to list dashboards from API - Dashboard viewer/designer now loads by selected dashboard ID - Mode toggle preserves selected dashboard and mode - Added DashboardApiClient and DashboardInfoDto for API integration - Registered DashboardApiClient for DI and HTTP client setup in Program.cs
Add toggle for Designer/Viewer modes on dashboard page
2026-02-03 17:23:04 +01:00 · 2026-02-03 16:43:16 +01:00 · 2026-02-03 13:43:23 +01:00 · 2026-02-03 12:51:20 +01:00 · 2026-02-03 11:56:26 +01:00 · 2026-02-02 17:03:23 +01:00
48 changed files with 2042 additions and 241 deletions
--- a/DbFirst.API/Controllers/DefaultDashboardController.cs
+++ b/DbFirst.API/Controllers/DefaultDashboardController.cs
@@ -0,0 +1,14 @@
+using DevExpress.DashboardAspNetCore;
+using DevExpress.DashboardWeb;
+using Microsoft.AspNetCore.DataProtection;
+
+namespace BlazorDashboardApp.Server
+{
+    public class DefaultDashboardController : DashboardController
+    {
+        public DefaultDashboardController(DashboardConfigurator configurator, IDataProtectionProvider? dataProtectionProvider = null)
+            : base(configurator, dataProtectionProvider)
+        {
+        }
+    }
+}
--- a/DbFirst.API/Dashboards/SqlDashboardStorage.cs
+++ b/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();
+    }
+}
--- a/DbFirst.API/Data/Dashboards/CatalogsGrid.xml
+++ b/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>
--- a/DbFirst.API/Data/Dashboards/DashboardStorage.sql
+++ b/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
--- a/DbFirst.API/Data/Dashboards/DefaultDashboard.xml
+++ b/DbFirst.API/Data/Dashboards/DefaultDashboard.xml
@@ -0,0 +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>
--- a/DbFirst.API/DbFirst.API.csproj
+++ b/DbFirst.API/DbFirst.API.csproj
@@ -9,6 +9,7 @@
  <ItemGroup>
    <PackageReference Include="AutoMapper" Version="12.0.1" />
    <PackageReference Include="AutoMapper.Extensions.Microsoft.DependencyInjection" Version="12.0.1" />
+    <PackageReference Include="DevExpress.AspNetCore.Dashboard" Version="25.2.3" />
    <PackageReference Include="Microsoft.EntityFrameworkCore" Version="8.0.22" />
    <PackageReference Include="Microsoft.EntityFrameworkCore.SqlServer" Version="8.0.22" />
    <PackageReference Include="Microsoft.EntityFrameworkCore.Tools" Version="8.0.22">
--- a/DbFirst.API/Program.cs
+++ b/DbFirst.API/Program.cs
@@ -1,9 +1,17 @@
 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;
+using DevExpress.DashboardAspNetCore;
+using DevExpress.DashboardCommon;
+using DevExpress.DashboardWeb;
+using DevExpress.DataAccess.Json;
+using System.Xml.Linq;

 var builder = WebApplication.CreateBuilder(args);

@@ -44,6 +52,92 @@ builder.Services.AddApplication();

 builder.Services.AddScoped<ICatalogRepository, CatalogRepository>();

+builder.Services.AddDevExpressControls();
+builder.Services.AddScoped<DashboardConfigurator>((IServiceProvider serviceProvider) => {
+    var dashboardsPath = Path.Combine(builder.Environment.ContentRootPath, "Data", "Dashboards");
+    Directory.CreateDirectory(dashboardsPath);
+
+    var defaultDashboardPath = Path.Combine(dashboardsPath, "DefaultDashboard.xml");
+    if (!File.Exists(defaultDashboardPath))
+    {
+        var defaultDashboard = new Dashboard();
+        defaultDashboard.Title.Text = "Default Dashboard";
+        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();
+
+    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;
+});
+
 var app = builder.Build();

 // Configure the HTTP request pipeline.
@@ -55,10 +149,25 @@ if (app.Environment.IsDevelopment())

 app.UseMiddleware<ExceptionHandlingMiddleware>();

+app.UseDevExpressControls();
 app.UseHttpsRedirection();
 app.UseCors();
 app.UseAuthorization();

+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);
+}
--- a/DbFirst.API/appsettings.json
+++ b/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",
--- a/DbFirst.BlazorWasm/App.razor
+++ b/DbFirst.BlazorWasm/App.razor
@@ -4,7 +4,8 @@
 •	Der Router-Komponent in App.razor entscheidet, welche Blazor-Komponente basierend auf der URL geladen wird.
    kurz: Steuert die Navigation und das Rendering der Blazor-Komponenten.
    *@
-
+@DxResourceManager.RegisterTheme(Themes.Fluent)
+@DxResourceManager.RegisterScripts()
 <Router AppAssembly="@typeof(App).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
--- a/DbFirst.BlazorWasm/Components/CatalogsGrid.razor
+++ b/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;
+    }
+}
--- a/DbFirst.BlazorWasm/DbFirst.BlazorWasm.csproj
+++ b/DbFirst.BlazorWasm/DbFirst.BlazorWasm.csproj
@@ -7,9 +7,12 @@
  </PropertyGroup>

  <ItemGroup>
+    <PackageReference Include="DevExpress.Blazor" Version="25.2.3" />
+    <PackageReference Include="DevExpress.Blazor.Dashboard" Version="25.2.3" />
+    <PackageReference Include="DevExpress.Blazor.Themes" Version="25.2.3" />
+    <PackageReference Include="DevExpress.Blazor.Themes.Fluent" Version="25.2.3" />
    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="8.0.22" />
    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="8.0.22" PrivateAssets="all" />
-    <PackageReference Include="DevExpress.Blazor" Version="24.1.*" />
  </ItemGroup>

  <ItemGroup>
--- a/DbFirst.BlazorWasm/Layout/NavMenu.razor
+++ b/DbFirst.BlazorWasm/Layout/NavMenu.razor
@@ -21,6 +21,11 @@
                <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">
+                <span class="oi oi-list-rich" aria-hidden="true"></span> Dashboards
+            </NavLink>
+        </div>
    </nav>
 </div>

--- a/DbFirst.BlazorWasm/Models/DashboardInfoDto.cs
+++ b/DbFirst.BlazorWasm/Models/DashboardInfoDto.cs
@@ -0,0 +1,7 @@
+namespace DbFirst.BlazorWasm.Models;
+
+public class DashboardInfoDto
+{
+    public string Id { get; set; } = string.Empty;
+    public string Name { get; set; } = string.Empty;
+}
--- a/DbFirst.BlazorWasm/Pages/Catalogs.razor
+++ b/DbFirst.BlazorWasm/Pages/Catalogs.razor
@@ -1,242 +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; }
-</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">
-            <Columns>
-                <DxGridDataColumn FieldName="@nameof(CatalogReadDto.Guid)" Caption="Id" Width="140px" />
-                <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">
-                    <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 />
--- a/DbFirst.BlazorWasm/Pages/Dashboard.razor
+++ b/DbFirst.BlazorWasm/Pages/Dashboard.razor
@@ -0,0 +1,122 @@
+@page "/dashboard"
+@page "/dashboards/{DashboardId?}"
+@inject Microsoft.Extensions.Configuration.IConfiguration Configuration
+@inject NavigationManager Navigation
+@inject DashboardApiClient DashboardApi
+
+<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>
+        @if (dashboards.Count == 0)
+        {
+            <div class="px-3 py-2 text-muted">Keine Dashboards vorhanden.</div>
+        }
+        else
+        {
+            @foreach (var dashboard in dashboards)
+            {
+                <NavLink class="dashboard-nav-link" href="@($"dashboards/{dashboard.Id}")">@dashboard.Name</NavLink>
+            }
+        }
+    </aside>
+    <section class="dashboard-content">
+        <div class="mb-3">
+            <DxButton RenderStyle="ButtonRenderStyle.Primary" Click="@ToggleMode">
+                @(IsDesigner ? "Zum Viewer wechseln" : "Zum Designer wechseln")
+            </DxButton>
+        </div>
+        <DxDashboard @key="DashboardKey" Endpoint="@DashboardEndpoint" InitialDashboardId="@SelectedDashboardId" WorkingMode="@CurrentMode" style="width: 100%; height: 800px;">
+        </DxDashboard>
+    </section>
+</div>
+
+@code {
+    [Parameter] public string? DashboardId { get; set; }
+    [SupplyParameterFromQuery] public string? Mode { get; set; }
+
+    private readonly List<DashboardInfoDto> dashboards = new();
+
+    private bool IsDesigner => !string.Equals(Mode, "viewer", StringComparison.OrdinalIgnoreCase);
+    private WorkingMode CurrentMode => IsDesigner ? WorkingMode.Designer : WorkingMode.ViewerOnly;
+    private string SelectedDashboardId { get; set; } = "";
+    private string DashboardKey => $"{SelectedDashboardId}-{(IsDesigner ? "designer" : "viewer")}";
+
+    private string DashboardEndpoint => $"{Configuration["ApiBaseUrl"]?.TrimEnd('/')}/api/dashboard";
+
+    protected override async Task OnParametersSetAsync()
+    {
+        if (dashboards.Count == 0)
+        {
+            dashboards.AddRange(await DashboardApi.GetAllAsync());
+        }
+
+        var requestedId = string.IsNullOrWhiteSpace(DashboardId) || string.Equals(DashboardId, "default", StringComparison.OrdinalIgnoreCase)
+            ? null
+            : DashboardId;
+
+        var resolved = !string.IsNullOrWhiteSpace(requestedId)
+            ? dashboards.FirstOrDefault(d => string.Equals(d.Id, requestedId, StringComparison.OrdinalIgnoreCase))
+            : dashboards.FirstOrDefault(d => string.Equals(d.Id, "DefaultDashboard", StringComparison.OrdinalIgnoreCase))
+              ?? dashboards.FirstOrDefault();
+
+        if (resolved == null)
+        {
+            return;
+        }
+
+        SelectedDashboardId = resolved.Id;
+
+        if (!string.Equals(DashboardId, resolved.Id, StringComparison.OrdinalIgnoreCase))
+        {
+            Navigation.NavigateTo($"dashboards/{resolved.Id}?mode={(IsDesigner ? "designer" : "viewer")}", replace: true);
+        }
+    }
+
+    private void ToggleMode()
+    {
+        var targetMode = IsDesigner ? "viewer" : "designer";
+        Navigation.NavigateTo($"dashboards/{SelectedDashboardId}?mode={targetMode}", replace: true);
+    }
+}
--- a/DbFirst.BlazorWasm/Program.cs
+++ b/DbFirst.BlazorWasm/Program.cs
@@ -17,5 +17,6 @@ builder.Services.AddDevExpressBlazor();
 var apiBaseUrl = builder.Configuration["ApiBaseUrl"] ?? builder.HostEnvironment.BaseAddress;
 builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(apiBaseUrl) });
 builder.Services.AddScoped<CatalogApiClient>();
+builder.Services.AddScoped<DashboardApiClient>();

 await builder.Build().RunAsync();
--- a/DbFirst.BlazorWasm/Services/DashboardApiClient.cs
+++ b/DbFirst.BlazorWasm/Services/DashboardApiClient.cs
@@ -0,0 +1,21 @@
+using System.Net.Http.Json;
+using DbFirst.BlazorWasm.Models;
+
+namespace DbFirst.BlazorWasm.Services;
+
+public class DashboardApiClient
+{
+    private readonly HttpClient _httpClient;
+    private const string Endpoint = "api/dashboard/dashboards";
+
+    public DashboardApiClient(HttpClient httpClient)
+    {
+        _httpClient = httpClient;
+    }
+
+    public async Task<List<DashboardInfoDto>> GetAllAsync()
+    {
+        var result = await _httpClient.GetFromJsonAsync<List<DashboardInfoDto>>(Endpoint);
+        return result ?? new List<DashboardInfoDto>();
+    }
+}
--- a/DbFirst.BlazorWasm/_Imports.razor
+++ b/DbFirst.BlazorWasm/_Imports.razor
@@ -10,4 +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
--- a/DbFirst.BlazorWasm/wwwroot/index.html
+++ b/DbFirst.BlazorWasm/wwwroot/index.html
@@ -17,12 +17,19 @@
        <base href="/" />

        <!-- Stylesheets für DevExpress und Bootstrap -->
-        <link rel="stylesheet" href="_content/DevExpress.Blazor.Themes/bootstrap-external.bs5.min.css" />
-        <link rel="stylesheet" href="_content/DevExpress.Blazor.Themes/icons.css" />
+
+        <link href="_content/DevExpress.Blazor.Dashboard/ace.css" rel="stylesheet" />
+        <link href="_content/DevExpress.Blazor.Dashboard/ace-theme-dreamweaver.css" rel="stylesheet" />
+        <link href="_content/DevExpress.Blazor.Dashboard/ace-theme-ambiance.css" rel="stylesheet" />
+        <link href="_content/DevExpress.Blazor.Dashboard/dx.light.css" rel="stylesheet" />
+        <link href="_content/DevExpress.Blazor.Dashboard/dx-analytics.common.css" rel="stylesheet" />
+        <link href="_content/DevExpress.Blazor.Dashboard/dx-analytics.light.css" rel="stylesheet" />
+        <link href="_content/DevExpress.Blazor.Dashboard/dx-querybuilder.css" rel="stylesheet" />
+        <link href="_content/DevExpress.Blazor.Dashboard/dx-dashboard.light.min.css" rel="stylesheet" />
+
        <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
        <link rel="stylesheet" href="css/app.css" />

-        <!-- Favicon und App-spezifische Styles -->
        <link rel="icon" type="image/png" href="favicon.png" />
        <link href="DbFirst.BlazorWasm.styles.css" rel="stylesheet" />
    </head>
--- a/DbFirst.BlazorWebApp/Components/App.razor
+++ b/DbFirst.BlazorWebApp/Components/App.razor
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <base href="/" />
+    @DxResourceManager.RegisterTheme(Themes.Fluent)
+    @DxResourceManager.RegisterScripts()
+
+    <link href="_content/DevExpress.Blazor.Dashboard/ace.css" rel="stylesheet" />
+    <link href="_content/DevExpress.Blazor.Dashboard/ace-theme-dreamweaver.css" rel="stylesheet" />
+    <link href="_content/DevExpress.Blazor.Dashboard/ace-theme-ambiance.css" rel="stylesheet" />
+    <link href="_content/DevExpress.Blazor.Dashboard/dx.light.css" rel="stylesheet" />
+    <link href="_content/DevExpress.Blazor.Dashboard/dx-analytics.common.css" rel="stylesheet" />
+    <link href="_content/DevExpress.Blazor.Dashboard/dx-analytics.light.css" rel="stylesheet" />
+    <link href="_content/DevExpress.Blazor.Dashboard/dx-querybuilder.css" rel="stylesheet" />
+    <link href="_content/DevExpress.Blazor.Dashboard/dx-dashboard.light.min.css" rel="stylesheet" />
+
+    <link rel="stylesheet" href="_content/DevExpress.Blazor.Themes/bootstrap-external.bs5.min.css" />
+    <link rel="stylesheet" href="_content/DevExpress.Blazor.Themes.Fluent/core.min.css" />
+    <link rel="stylesheet" href="_content/DevExpress.Blazor.Themes.Fluent/global.min.css" />
+    <link rel="stylesheet" href="_content/DevExpress.Blazor.Themes.Fluent/modes/light.min.css" />
+    <link rel="stylesheet" href="_content/DevExpress.Blazor.Themes.Fluent/accents/blue.min.css" />
+    <link rel="stylesheet" href="_content/DevExpress.Blazor.Themes.Fluent/bootstrap/fluent-light.bs5.min.css" />
+
+    <link rel="stylesheet" href="bootstrap/bootstrap.min.css" />
+    <link rel="stylesheet" href="app.css" />
+    <link rel="stylesheet" href="DbFirst.BlazorWebApp.styles.css" />
+    <link rel="icon" type="image/png" href="favicon.png" />
+    <HeadOutlet />
+</head>
+
+<body>
+    <Routes />
+    <script src="_framework/blazor.web.js"></script>
+</body>
+
+</html>
--- a/DbFirst.BlazorWebApp/Components/CatalogsGrid.razor
+++ b/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;
+    }
+}
--- a/DbFirst.BlazorWebApp/Components/Layout/MainLayout.razor
+++ b/DbFirst.BlazorWebApp/Components/Layout/MainLayout.razor
@@ -0,0 +1,23 @@
+@inherits LayoutComponentBase
+
+<div class="page">
+    <div class="sidebar">
+        <NavMenu />
+    </div>
+
+    <main>
+        <div class="top-row px-4">
+            <a href="https://learn.microsoft.com/aspnet/core/" target="_blank">About</a>
+        </div>
+
+        <article class="content px-4">
+            @Body
+        </article>
+    </main>
+</div>
+
+<div id="blazor-error-ui">
+    An unhandled error has occurred.
+    <a href="" class="reload">Reload</a>
+    <a class="dismiss">🗙</a>
+</div>
--- a/DbFirst.BlazorWebApp/Components/Layout/MainLayout.razor.css
+++ b/DbFirst.BlazorWebApp/Components/Layout/MainLayout.razor.css
@@ -0,0 +1,96 @@
+.page {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+}
+
+main {
+    flex: 1;
+}
+
+.sidebar {
+    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
+}
+
+.top-row {
+    background-color: #f7f7f7;
+    border-bottom: 1px solid #d6d5d5;
+    justify-content: flex-end;
+    height: 3.5rem;
+    display: flex;
+    align-items: center;
+}
+
+    .top-row ::deep a, .top-row ::deep .btn-link {
+        white-space: nowrap;
+        margin-left: 1.5rem;
+        text-decoration: none;
+    }
+
+    .top-row ::deep a:hover, .top-row ::deep .btn-link:hover {
+        text-decoration: underline;
+    }
+
+    .top-row ::deep a:first-child {
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+@media (max-width: 640.98px) {
+    .top-row {
+        justify-content: space-between;
+    }
+
+    .top-row ::deep a, .top-row ::deep .btn-link {
+        margin-left: 0;
+    }
+}
+
+@media (min-width: 641px) {
+    .page {
+        flex-direction: row;
+    }
+
+    .sidebar {
+        width: 250px;
+        height: 100vh;
+        position: sticky;
+        top: 0;
+    }
+
+    .top-row {
+        position: sticky;
+        top: 0;
+        z-index: 1;
+    }
+
+    .top-row.auth ::deep a:first-child {
+        flex: 1;
+        text-align: right;
+        width: 0;
+    }
+
+    .top-row, article {
+        padding-left: 2rem !important;
+        padding-right: 1.5rem !important;
+    }
+}
+
+#blazor-error-ui {
+    background: lightyellow;
+    bottom: 0;
+    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
+    display: none;
+    left: 0;
+    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
+    position: fixed;
+    width: 100%;
+    z-index: 1000;
+}
+
+    #blazor-error-ui .dismiss {
+        cursor: pointer;
+        position: absolute;
+        right: 0.75rem;
+        top: 0.5rem;
+    }
--- a/DbFirst.BlazorWebApp/Components/Layout/NavMenu.razor
+++ b/DbFirst.BlazorWebApp/Components/Layout/NavMenu.razor
@@ -0,0 +1,41 @@
+<div class="top-row ps-3 navbar navbar-dark">
+    <div class="container-fluid">
+        <a class="navbar-brand" href="">DbFirst.BlazorWebApp</a>
+    </div>
+</div>
+
+<input type="checkbox" title="Navigation menu" class="navbar-toggler" />
+
+<div class="nav-scrollable" onclick="document.querySelector('.navbar-toggler').click()">
+    <nav class="flex-column">
+        <div class="nav-item px-3">
+            <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
+                <span class="bi bi-house-door-fill-nav-menu" aria-hidden="true"></span> Home
+            </NavLink>
+        </div>
+
+        <div class="nav-item px-3">
+            <NavLink class="nav-link" href="counter">
+                <span class="bi bi-plus-square-fill-nav-menu" aria-hidden="true"></span> Counter
+            </NavLink>
+        </div>
+
+        <div class="nav-item px-3">
+            <NavLink class="nav-link" href="weather">
+                <span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> Weather
+            </NavLink>
+        </div>
+        <div class="nav-item px-3">
+            <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">
+                <span class="oi oi-list-rich" aria-hidden="true"></span> Dashboards
+            </NavLink>
+        </div>
+    </nav>
+</div>
+
--- a/DbFirst.BlazorWebApp/Components/Layout/NavMenu.razor.css
+++ b/DbFirst.BlazorWebApp/Components/Layout/NavMenu.razor.css
@@ -0,0 +1,105 @@
+.navbar-toggler {
+    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);
+}
+
+.navbar-brand {
+    font-size: 1.1rem;
+}
+
+.bi {
+    display: inline-block;
+    position: relative;
+    width: 1.25rem;
+    height: 1.25rem;
+    margin-right: 0.75rem;
+    top: -1px;
+    background-size: cover;
+}
+
+.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");
+}
+
+.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 {
+    display: block;
+}
+
+@media (min-width: 641px) {
+    .navbar-toggler {
+        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;
+    }
+}
--- a/DbFirst.BlazorWebApp/Components/Pages/Catalogs.razor
+++ b/DbFirst.BlazorWebApp/Components/Pages/Catalogs.razor
@@ -0,0 +1,7 @@
+@page "/catalogs"
+
+<PageTitle>Catalogs</PageTitle>
+
+<h1>Catalogs</h1>
+
+<CatalogsGrid />
--- a/DbFirst.BlazorWebApp/Components/Pages/Counter.razor
+++ b/DbFirst.BlazorWebApp/Components/Pages/Counter.razor
@@ -0,0 +1,19 @@
+@page "/counter"
+@rendermode InteractiveServer
+
+<PageTitle>Counter</PageTitle>
+
+<h1>Counter</h1>
+
+<p role="status">Current count: @currentCount</p>
+
+<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
+
+@code {
+    private int currentCount = 0;
+
+    private void IncrementCount()
+    {
+        currentCount++;
+    }
+}
--- a/DbFirst.BlazorWebApp/Components/Pages/Dashboard.razor
+++ b/DbFirst.BlazorWebApp/Components/Pages/Dashboard.razor
@@ -0,0 +1,122 @@
+@page "/dashboard"
+@page "/dashboards/{DashboardId?}"
+@inject Microsoft.Extensions.Configuration.IConfiguration Configuration
+@inject NavigationManager Navigation
+@inject DashboardApiClient DashboardApi
+
+<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>
+        @if (dashboards.Count == 0)
+        {
+            <div class="px-3 py-2 text-muted">Keine Dashboards vorhanden.</div>
+        }
+        else
+        {
+            @foreach (var dashboard in dashboards)
+            {
+                <NavLink class="dashboard-nav-link" href="@($"dashboards/{dashboard.Id}")">@dashboard.Name</NavLink>
+            }
+        }
+    </aside>
+    <section class="dashboard-content">
+        <div class="mb-3">
+            <DxButton RenderStyle="ButtonRenderStyle.Primary" Click="@ToggleMode">
+                @(IsDesigner ? "Zum Viewer wechseln" : "Zum Designer wechseln")
+            </DxButton>
+        </div>
+        <DxDashboard @key="DashboardKey" Endpoint="@DashboardEndpoint" InitialDashboardId="@SelectedDashboardId" WorkingMode="@CurrentMode" style="width: 100%; height: 800px;">
+        </DxDashboard>
+    </section>
+</div>
+
+@code {
+    [Parameter] public string? DashboardId { get; set; }
+    [SupplyParameterFromQuery] public string? Mode { get; set; }
+
+    private readonly List<DashboardInfoDto> dashboards = new();
+
+    private bool IsDesigner => !string.Equals(Mode, "viewer", StringComparison.OrdinalIgnoreCase);
+    private WorkingMode CurrentMode => IsDesigner ? WorkingMode.Designer : WorkingMode.ViewerOnly;
+    private string SelectedDashboardId { get; set; } = "";
+    private string DashboardKey => $"{SelectedDashboardId}-{(IsDesigner ? "designer" : "viewer")}";
+
+    private string DashboardEndpoint => $"{Configuration["ApiBaseUrl"]?.TrimEnd('/')}/api/dashboard";
+
+    protected override async Task OnParametersSetAsync()
+    {
+        if (dashboards.Count == 0)
+        {
+            dashboards.AddRange(await DashboardApi.GetAllAsync());
+        }
+
+        var requestedId = string.IsNullOrWhiteSpace(DashboardId) || string.Equals(DashboardId, "default", StringComparison.OrdinalIgnoreCase)
+            ? null
+            : DashboardId;
+
+        var resolved = !string.IsNullOrWhiteSpace(requestedId)
+            ? dashboards.FirstOrDefault(d => string.Equals(d.Id, requestedId, StringComparison.OrdinalIgnoreCase))
+            : dashboards.FirstOrDefault(d => string.Equals(d.Id, "DefaultDashboard", StringComparison.OrdinalIgnoreCase))
+              ?? dashboards.FirstOrDefault();
+
+        if (resolved == null)
+        {
+            return;
+        }
+
+        SelectedDashboardId = resolved.Id;
+
+        if (!string.Equals(DashboardId, resolved.Id, StringComparison.OrdinalIgnoreCase))
+        {
+            Navigation.NavigateTo($"dashboards/{resolved.Id}?mode={(IsDesigner ? "designer" : "viewer")}", replace: true);
+        }
+    }
+
+    private void ToggleMode()
+    {
+        var targetMode = IsDesigner ? "viewer" : "designer";
+        Navigation.NavigateTo($"dashboards/{SelectedDashboardId}?mode={targetMode}", replace: true);
+    }
+}
--- a/DbFirst.BlazorWebApp/Components/Pages/Error.razor
+++ b/DbFirst.BlazorWebApp/Components/Pages/Error.razor
@@ -0,0 +1,36 @@
+@page "/Error"
+@using System.Diagnostics
+
+<PageTitle>Error</PageTitle>
+
+<h1 class="text-danger">Error.</h1>
+<h2 class="text-danger">An error occurred while processing your request.</h2>
+
+@if (ShowRequestId)
+{
+    <p>
+        <strong>Request ID:</strong> <code>@RequestId</code>
+    </p>
+}
+
+<h3>Development Mode</h3>
+<p>
+    Swapping to <strong>Development</strong> environment will display more detailed information about the error that occurred.
+</p>
+<p>
+    <strong>The Development environment shouldn't be enabled for deployed applications.</strong>
+    It can result in displaying sensitive information from exceptions to end users.
+    For local debugging, enable the <strong>Development</strong> environment by setting the <strong>ASPNETCORE_ENVIRONMENT</strong> environment variable to <strong>Development</strong>
+    and restarting the app.
+</p>
+
+@code{
+    [CascadingParameter]
+    private HttpContext? HttpContext { get; set; }
+
+    private string? RequestId { get; set; }
+    private bool ShowRequestId => !string.IsNullOrEmpty(RequestId);
+
+    protected override void OnInitialized() =>
+        RequestId = Activity.Current?.Id ?? HttpContext?.TraceIdentifier;
+}
--- a/DbFirst.BlazorWebApp/Components/Pages/Home.razor
+++ b/DbFirst.BlazorWebApp/Components/Pages/Home.razor
@@ -0,0 +1,7 @@
+@page "/"
+
+<PageTitle>Home</PageTitle>
+
+<h1>Hello, world!</h1>
+
+Welcome to your new app.
--- a/DbFirst.BlazorWebApp/Components/Pages/Weather.razor
+++ b/DbFirst.BlazorWebApp/Components/Pages/Weather.razor
@@ -0,0 +1,64 @@
+@page "/weather"
+@attribute [StreamRendering]
+
+<PageTitle>Weather</PageTitle>
+
+<h1>Weather</h1>
+
+<p>This component demonstrates showing data.</p>
+
+@if (forecasts == null)
+{
+    <p><em>Loading...</em></p>
+}
+else
+{
+    <table class="table">
+        <thead>
+            <tr>
+                <th>Date</th>
+                <th>Temp. (C)</th>
+                <th>Temp. (F)</th>
+                <th>Summary</th>
+            </tr>
+        </thead>
+        <tbody>
+            @foreach (var forecast in forecasts)
+            {
+                <tr>
+                    <td>@forecast.Date.ToShortDateString()</td>
+                    <td>@forecast.TemperatureC</td>
+                    <td>@forecast.TemperatureF</td>
+                    <td>@forecast.Summary</td>
+                </tr>
+            }
+        </tbody>
+    </table>
+}
+
+@code {
+    private WeatherForecast[]? forecasts;
+
+    protected override async Task OnInitializedAsync()
+    {
+        // Simulate asynchronous loading to demonstrate streaming rendering
+        await Task.Delay(500);
+
+        var startDate = DateOnly.FromDateTime(DateTime.Now);
+        var summaries = new[] { "Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching" };
+        forecasts = Enumerable.Range(1, 5).Select(index => new WeatherForecast
+        {
+            Date = startDate.AddDays(index),
+            TemperatureC = Random.Shared.Next(-20, 55),
+            Summary = summaries[Random.Shared.Next(summaries.Length)]
+        }).ToArray();
+    }
+
+    private class WeatherForecast
+    {
+        public DateOnly Date { get; set; }
+        public int TemperatureC { get; set; }
+        public string? Summary { get; set; }
+        public int TemperatureF => 32 + (int)(TemperatureC / 0.5556);
+    }
+}
--- a/DbFirst.BlazorWebApp/Components/Routes.razor
+++ b/DbFirst.BlazorWebApp/Components/Routes.razor
@@ -0,0 +1,8 @@
+@rendermode InteractiveServer
+
+<Router AppAssembly="typeof(Program).Assembly">
+    <Found Context="routeData">
+        <RouteView RouteData="routeData" DefaultLayout="typeof(Layout.MainLayout)" />
+        <FocusOnNavigate RouteData="routeData" Selector="h1" />
+    </Found>
+</Router>
--- a/DbFirst.BlazorWebApp/Components/_Imports.razor
+++ b/DbFirst.BlazorWebApp/Components/_Imports.razor
@@ -0,0 +1,16 @@
+@using System.Net.Http
+@using System.Net.Http.Json
+@using Microsoft.AspNetCore.Components.Forms
+@using Microsoft.AspNetCore.Components.Routing
+@using Microsoft.AspNetCore.Components.Web
+@using static Microsoft.AspNetCore.Components.Web.RenderMode
+@using Microsoft.AspNetCore.Components.Web.Virtualization
+@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 DbFirst.BlazorWebApp
--- a/DbFirst.BlazorWebApp/DbFirst.BlazorWebApp.csproj
+++ b/DbFirst.BlazorWebApp/DbFirst.BlazorWebApp.csproj
@@ -0,0 +1,16 @@
+<Project Sdk="Microsoft.NET.Sdk.Web">
+
+  <PropertyGroup>
+    <TargetFramework>net8.0</TargetFramework>
+    <Nullable>enable</Nullable>
+    <ImplicitUsings>enable</ImplicitUsings>
+  </PropertyGroup>
+
+  <ItemGroup>
+    <PackageReference Include="DevExpress.Blazor" Version="25.2.3" />
+    <PackageReference Include="DevExpress.Blazor.Dashboard" Version="25.2.3" />
+    <PackageReference Include="DevExpress.Blazor.Themes" Version="25.2.3" />
+    <PackageReference Include="DevExpress.Blazor.Themes.Fluent" Version="25.2.3" />
+  </ItemGroup>
+
+</Project>
--- a/DbFirst.BlazorWebApp/Models/CatalogReadDto.cs
+++ b/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; }
+}
--- a/DbFirst.BlazorWebApp/Models/CatalogWriteDto.cs
+++ b/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; }
+}
--- a/DbFirst.BlazorWebApp/Models/DashboardInfoDto.cs
+++ b/DbFirst.BlazorWebApp/Models/DashboardInfoDto.cs
@@ -0,0 +1,7 @@
+namespace DbFirst.BlazorWebApp.Models;
+
+public class DashboardInfoDto
+{
+    public string Id { get; set; } = string.Empty;
+    public string Name { get; set; } = string.Empty;
+}
--- a/DbFirst.BlazorWebApp/Program.cs
+++ b/DbFirst.BlazorWebApp/Program.cs
@@ -0,0 +1,49 @@
+using DbFirst.BlazorWebApp.Components;
+using DbFirst.BlazorWebApp.Services;
+using DevExpress.Blazor;
+
+var builder = WebApplication.CreateBuilder(args);
+
+// Add services to the container.
+builder.Services.AddRazorComponents()
+    .AddInteractiveServerComponents();
+
+builder.Services.AddDevExpressBlazor();
+
+var apiBaseUrl = builder.Configuration["ApiBaseUrl"];
+if (!string.IsNullOrWhiteSpace(apiBaseUrl))
+{
+    builder.Services.AddHttpClient<CatalogApiClient>(client =>
+    {
+        client.BaseAddress = new Uri(apiBaseUrl);
+    });
+    builder.Services.AddHttpClient<DashboardApiClient>(client =>
+    {
+        client.BaseAddress = new Uri(apiBaseUrl);
+    });
+}
+else
+{
+    builder.Services.AddHttpClient<CatalogApiClient>();
+    builder.Services.AddHttpClient<DashboardApiClient>();
+}
+
+var app = builder.Build();
+
+// Configure the HTTP request pipeline.
+if (!app.Environment.IsDevelopment())
+{
+    app.UseExceptionHandler("/Error", createScopeForErrors: true);
+    // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
+    app.UseHsts();
+}
+
+app.UseHttpsRedirection();
+
+app.UseStaticFiles();
+app.UseAntiforgery();
+
+app.MapRazorComponents<App>()
+    .AddInteractiveServerRenderMode();
+
+app.Run();
--- a/DbFirst.BlazorWebApp/Properties/launchSettings.json
+++ b/DbFirst.BlazorWebApp/Properties/launchSettings.json
@@ -0,0 +1,38 @@
+{
+  "$schema": "http://json.schemastore.org/launchsettings.json",
+    "iisSettings": {
+      "windowsAuthentication": false,
+      "anonymousAuthentication": true,
+      "iisExpress": {
+        "applicationUrl": "http://localhost:7440",
+        "sslPort": 44343
+      }
+    },
+    "profiles": {
+      "http": {
+        "commandName": "Project",
+        "dotnetRunMessages": true,
+        "launchBrowser": true,
+        "applicationUrl": "http://localhost:5096",
+        "environmentVariables": {
+          "ASPNETCORE_ENVIRONMENT": "Development"
+        }
+      },
+      "https": {
+        "commandName": "Project",
+        "dotnetRunMessages": true,
+        "launchBrowser": true,
+        "applicationUrl": "https://localhost:7191;http://localhost:5096",
+        "environmentVariables": {
+          "ASPNETCORE_ENVIRONMENT": "Development"
+        }
+      },
+      "IIS Express": {
+        "commandName": "IISExpress",
+        "launchBrowser": true,
+        "environmentVariables": {
+          "ASPNETCORE_ENVIRONMENT": "Development"
+        }
+      }
+    }
+  }
--- a/DbFirst.BlazorWebApp/Services/CatalogApiClient.cs
+++ b/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; }
+}
--- a/DbFirst.BlazorWebApp/Services/DashboardApiClient.cs
+++ b/DbFirst.BlazorWebApp/Services/DashboardApiClient.cs
@@ -0,0 +1,21 @@
+using System.Net.Http.Json;
+using DbFirst.BlazorWebApp.Models;
+
+namespace DbFirst.BlazorWebApp.Services;
+
+public class DashboardApiClient
+{
+    private readonly HttpClient _httpClient;
+    private const string Endpoint = "api/dashboard/dashboards";
+
+    public DashboardApiClient(HttpClient httpClient)
+    {
+        _httpClient = httpClient;
+    }
+
+    public async Task<List<DashboardInfoDto>> GetAllAsync()
+    {
+        var result = await _httpClient.GetFromJsonAsync<List<DashboardInfoDto>>(Endpoint);
+        return result ?? new List<DashboardInfoDto>();
+    }
+}
--- a/DbFirst.BlazorWebApp/appsettings.Development.json
+++ b/DbFirst.BlazorWebApp/appsettings.Development.json
@@ -0,0 +1,9 @@
+{
+  "Logging": {
+    "LogLevel": {
+      "Default": "Information",
+      "Microsoft.AspNetCore": "Warning"
+    }
+  },
+  "ApiBaseUrl": "https://localhost:7204/"
+}
--- a/DbFirst.BlazorWebApp/appsettings.json
+++ b/DbFirst.BlazorWebApp/appsettings.json
@@ -0,0 +1,10 @@
+{
+  "Logging": {
+    "LogLevel": {
+      "Default": "Information",
+      "Microsoft.AspNetCore": "Warning"
+    }
+  },
+  "ApiBaseUrl": "https://localhost:7204/",
+  "AllowedHosts": "*"
+}
--- a/DbFirst.BlazorWebApp/wwwroot/app.css
+++ b/DbFirst.BlazorWebApp/wwwroot/app.css
@@ -0,0 +1,51 @@
+html, body {
+    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+}
+
+a, .btn-link {
+    color: #006bb7;
+}
+
+.btn-primary {
+    color: #fff;
+    background-color: #1b6ec2;
+    border-color: #1861ac;
+}
+
+.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
+  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
+}
+
+.content {
+    padding-top: 1.1rem;
+}
+
+h1:focus {
+    outline: none;
+}
+
+.valid.modified:not([type=checkbox]) {
+    outline: 1px solid #26b050;
+}
+
+.invalid {
+    outline: 1px solid #e50000;
+}
+
+.validation-message {
+    color: #e50000;
+}
+
+.blazor-error-boundary {
+    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
+    padding: 1rem 1rem 1rem 3.7rem;
+    color: white;
+}
+
+    .blazor-error-boundary::after {
+        content: "An error has occurred."
+    }
+
+.darker-border-checkbox.form-check-input {
+    border-color: #929292;
+}
--- a/DbFirst.BlazorWebApp/wwwroot/bootstrap/bootstrap.min.css
+++ b/DbFirst.BlazorWebApp/wwwroot/bootstrap/bootstrap.min.css
--- a/DbFirst.BlazorWebApp/wwwroot/bootstrap/bootstrap.min.css.map
+++ b/DbFirst.BlazorWebApp/wwwroot/bootstrap/bootstrap.min.css.map
--- a/DbFirst.BlazorWebApp/wwwroot/favicon.png
+++ b/DbFirst.BlazorWebApp/wwwroot/favicon.png
--- a/DbFirst.sln
+++ b/DbFirst.sln
@@ -13,6 +13,8 @@ Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "DbFirst.Domain", "DbFirst.D
 EndProject
 Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "DbFirst.BlazorWasm", "DbFirst.BlazorWasm\DbFirst.BlazorWasm.csproj", "{666BE786-6D04-4224-9948-FF13597481A0}"
 EndProject
+Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "DbFirst.BlazorWebApp", "DbFirst.BlazorWebApp\DbFirst.BlazorWebApp.csproj", "{FF1D77C4-A13D-43E0-BCE1-C18C01F1767C}"
+EndProject
 Global
 	GlobalSection(SolutionConfigurationPlatforms) = preSolution
 		Debug|Any CPU = Debug|Any CPU
@@ -83,6 +85,18 @@ Global
 		{666BE786-6D04-4224-9948-FF13597481A0}.Release|x64.Build.0 = Release|Any CPU
 		{666BE786-6D04-4224-9948-FF13597481A0}.Release|x86.ActiveCfg = Release|Any CPU
 		{666BE786-6D04-4224-9948-FF13597481A0}.Release|x86.Build.0 = Release|Any CPU
+		{FF1D77C4-A13D-43E0-BCE1-C18C01F1767C}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{FF1D77C4-A13D-43E0-BCE1-C18C01F1767C}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{FF1D77C4-A13D-43E0-BCE1-C18C01F1767C}.Debug|x64.ActiveCfg = Debug|Any CPU
+		{FF1D77C4-A13D-43E0-BCE1-C18C01F1767C}.Debug|x64.Build.0 = Debug|Any CPU
+		{FF1D77C4-A13D-43E0-BCE1-C18C01F1767C}.Debug|x86.ActiveCfg = Debug|Any CPU
+		{FF1D77C4-A13D-43E0-BCE1-C18C01F1767C}.Debug|x86.Build.0 = Debug|Any CPU
+		{FF1D77C4-A13D-43E0-BCE1-C18C01F1767C}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{FF1D77C4-A13D-43E0-BCE1-C18C01F1767C}.Release|Any CPU.Build.0 = Release|Any CPU
+		{FF1D77C4-A13D-43E0-BCE1-C18C01F1767C}.Release|x64.ActiveCfg = Release|Any CPU
+		{FF1D77C4-A13D-43E0-BCE1-C18C01F1767C}.Release|x64.Build.0 = Release|Any CPU
+		{FF1D77C4-A13D-43E0-BCE1-C18C01F1767C}.Release|x86.ActiveCfg = Release|Any CPU
+		{FF1D77C4-A13D-43E0-BCE1-C18C01F1767C}.Release|x86.Build.0 = Release|Any CPU
 	EndGlobalSection
 	GlobalSection(SolutionProperties) = preSolution
 		HideSolutionNode = FALSE
Author	SHA1	Message	Date
OlgunR	dc2cccac1f	Update dashboard navigation and dynamic loading - Changed NavMenu to link to /dashboards instead of /dashboards/default - Refactored Dashboard.razor to list dashboards from API - Dashboard viewer/designer now loads by selected dashboard ID - Mode toggle preserves selected dashboard and mode - Added DashboardApiClient and DashboardInfoDto for API integration - Registered DashboardApiClient for DI and HTTP client setup in Program.cs	2026-02-03 17:23:04 +01:00
OlgunR	32b6d30ba1	Add toggle for Designer/Viewer modes on dashboard page Added a button to switch between Designer and Viewer modes for the dashboard. The mode is controlled via a query parameter and updates the dashboard's WorkingMode accordingly. The dashboard component is re-rendered when the mode changes. Also updated the navigation link label to remove the "(Designer)" suffix.	2026-02-03 16:43:16 +01:00
OlgunR	940df826f7	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.	2026-02-03 13:43:23 +01:00
OlgunR	7ca37dbfca	Add Catalogs page and simplify dashboard navigation - Added a new Catalogs.razor page with a CatalogsGrid component and navigation link. - Simplified Dashboard.razor to only show the default dashboard in designer mode; removed catalog grid options. - Updated dashboard parameter logic to always redirect to "dashboards/default" unless already selected.	2026-02-03 12:51:20 +01:00
OlgunR	9db55fd2fd	Switch dashboard storage to SQL Server Replaced file-based dashboard storage with SQL Server-backed storage using the new SqlDashboardStorage class and TBDD_SMF_CONFIG table. Updated Program.cs to use the new storage and ensure default dashboards are loaded into the database. Simplified DefaultDashboard.xml to remove old items. Added SQL script for the dashboard storage table. Cleaned up unused folder references in the project file. This centralizes dashboard management and supports multi-instance scenarios.	2026-02-03 11:56:26 +01:00
OlgunR	70e5cbc19f	Refactor dashboard navigation, catalog grid, and API client - Add sidebar dashboard navigation and support multiple dashboards - Extract catalog grid/form logic to reusable CatalogsGrid component - Add CatalogApiClient and DTOs for catalog CRUD operations - Define dashboards with JSON data sources (Default, CatalogsGrid) - Update configuration for dashboard and API endpoints - Improve styling and imports for modularity and maintainability	2026-02-02 17:03:23 +01:00
OlgunR	1667788558	Enhance Catalogs grid UI and filter row experience Added custom CSS for sortable headers and search inputs. Replaced default filter row inputs with styled DxTextBox components. Set default sort on "Id" column and disabled sorting for action column. Updated grid to use new catalog-grid styles.	2026-02-02 13:38:44 +01:00
OlgunR	b09ee6dc8d	Remove DevExpress Fluent and external theme CSS files Removed several DevExpress Blazor Fluent theme stylesheets and the bootstrap-external.bs5.min.css from index.html. Retained only default Bootstrap, app-specific, and DevExpress Dashboard styles to simplify and standardize application theming.	2026-02-02 12:54:08 +01:00
OlgunR	0213834858	Update to DevExpress Fluent theme and enable SSR Switched from old DevExpress Blazor theme and icons to Fluent theme stylesheets in index.html and App.razor. Added @rendermode InteractiveServer to Routes.razor to enable interactive server-side rendering.	2026-02-02 10:04:50 +01:00
OlgunR	38baf9f749	Integrate DevExpress Web Dashboard into API and Blazor Added DevExpress Dashboard to ASP.NET Core API and both Blazor WASM/Server frontends. Configured dashboard storage, sample data source, and API endpoint. Updated Blazor projects with dashboard packages, styles, and a new dashboard page. Navigation and configuration updated to support dashboard integration.	2026-02-02 09:01:08 +01:00
OlgunR	0532cbb329	Add DevExpress.Blazor package reference Added DevExpress.Blazor v25.1.3 to the project file to enable usage of DevExpress Blazor UI components in the application.	2026-01-30 11:16:06 +01:00
OlgunR	f9a6341b41	Add BlazorWebApp project and Bootstrap source map Added new Blazor Server project `DbFirst.BlazorWebApp` with core UI components, pages, and static assets. Updated solution file to include the project. Also added `bootstrap.min.css.map` to support CSS debugging in browser developer tools.	2026-01-30 11:12:55 +01:00