From cc09b46cfb3caddb155ddcecf2cd1a2c8687441c Mon Sep 17 00:00:00 2001
From: Sluijsens <bdslop@gmail.com>
Date: Tue, 4 Aug 2026 11:31:16 +0200
Subject: [PATCH 1/4] Voeg leesbare slug toe aan Offering naast het GUID-ID

Het Offering-ID is een GUID en niet geschikt om aan gebruikers te tonen.
Voeg een op de titel gebaseerde, unieke slug toe die via de public en
admin API wordt meegegeven, zodat de frontend iets leesbaars kan tonen
in plaats van het ruwe ID. Het ID blijft ongewijzigd de echte identifier.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 .../Controllers/OfferingsControllerTests.cs   |  4 +-
 .../Repositories/OfferingRepositoryTests.cs   | 32 +++++++
 .../Services/OfferingsServiceTests.cs         | 52 +++++++++++
 .../Services/SlugifierTests.cs                | 24 +++++
 .../Data/Entities/Offering.cs                 |  1 +
 .../Data/OfferingsDbContext.cs                |  1 +
 ...20260804113000_AddOfferingSlug.Designer.cs | 93 +++++++++++++++++++
 .../20260804113000_AddOfferingSlug.cs         | 39 ++++++++
 .../OfferingsDbContextModelSnapshot.cs        |  5 +
 .../Models/OfferingAdminDto.cs                |  1 +
 .../Models/OfferingDto.cs                     |  1 +
 .../Repositories/IOfferingRepository.cs       |  1 +
 .../Repositories/OfferingRepository.cs        |  3 +
 .../Services/OfferingsService.cs              | 21 +++++
 .../Services/Slugifier.cs                     | 40 ++++++++
 15 files changed, 316 insertions(+), 2 deletions(-)
 create mode 100644 src/SlpModularCms.Modules.Offerings.Tests/Services/SlugifierTests.cs
 create mode 100644 src/SlpModularCms.Modules.Offerings/Migrations/20260804113000_AddOfferingSlug.Designer.cs
 create mode 100644 src/SlpModularCms.Modules.Offerings/Migrations/20260804113000_AddOfferingSlug.cs
 create mode 100644 src/SlpModularCms.Modules.Offerings/Services/Slugifier.cs

diff --git a/src/SlpModularCms.Modules.Offerings.Tests/Controllers/OfferingsControllerTests.cs b/src/SlpModularCms.Modules.Offerings.Tests/Controllers/OfferingsControllerTests.cs
index ba4f5de..bac6d9f 100644
--- a/src/SlpModularCms.Modules.Offerings.Tests/Controllers/OfferingsControllerTests.cs
+++ b/src/SlpModularCms.Modules.Offerings.Tests/Controllers/OfferingsControllerTests.cs
@@ -24,10 +24,10 @@ public class OfferingsControllerTests
     }
 
     private static OfferingDto PublicDto() => new(
-        Guid.NewGuid().ToString(), "Title", "Description", "€ 100", "per month", ["Feature 1"], "Contact", false);
+        Guid.NewGuid().ToString(), "title", "Title", "Description", "€ 100", "per month", ["Feature 1"], "Contact", false);
 
     private static OfferingAdminDto AdminDto(int displayOrder = 0) => new(
-        Guid.NewGuid().ToString(), "Title", "Description", "€ 100", "per month", ["Feature 1"], "Contact", false, displayOrder);
+        Guid.NewGuid().ToString(), "title", "Title", "Description", "€ 100", "per month", ["Feature 1"], "Contact", false, displayOrder);
 
     private static CreateOfferingRequest CreateRequest() => new(
         "Title", "Description", "€ 100", "per month", ["Feature 1"], "Contact");
diff --git a/src/SlpModularCms.Modules.Offerings.Tests/Repositories/OfferingRepositoryTests.cs b/src/SlpModularCms.Modules.Offerings.Tests/Repositories/OfferingRepositoryTests.cs
index c332748..6661169 100644
--- a/src/SlpModularCms.Modules.Offerings.Tests/Repositories/OfferingRepositoryTests.cs
+++ b/src/SlpModularCms.Modules.Offerings.Tests/Repositories/OfferingRepositoryTests.cs
@@ -152,6 +152,37 @@ public class OfferingRepositoryTests : IDisposable
         result.Should().BeNull();
     }
 
+    [Fact]
+    public async Task ExistsBySlugAsync_ReturnsTrue_WhenSlugTaken()
+    {
+        await _sut.AddAsync(Offering("Website", displayOrder: 0));
+        await _sut.SaveChangesAsync();
+
+        var result = await _sut.ExistsBySlugAsync("website");
+
+        result.Should().BeTrue();
+    }
+
+    [Fact]
+    public async Task ExistsBySlugAsync_ReturnsFalse_WhenSlugFree()
+    {
+        var result = await _sut.ExistsBySlugAsync("unused-slug");
+
+        result.Should().BeFalse();
+    }
+
+    [Fact]
+    public async Task ExistsBySlugAsync_ExcludesGivenId()
+    {
+        var offering = Offering("Website", displayOrder: 0);
+        await _sut.AddAsync(offering);
+        await _sut.SaveChangesAsync();
+
+        var result = await _sut.ExistsBySlugAsync("website", excludeId: offering.Id);
+
+        result.Should().BeFalse();
+    }
+
     [Fact]
     public async Task Update_PersistsChanges()
     {
@@ -170,6 +201,7 @@ public class OfferingRepositoryTests : IDisposable
     private static Offering Offering(string title, int displayOrder) => new()
     {
         Id = Guid.NewGuid(),
+        Slug = title.ToLowerInvariant(),
         Title = title,
         Description = "Description",
         Price = "€ 100",
diff --git a/src/SlpModularCms.Modules.Offerings.Tests/Services/OfferingsServiceTests.cs b/src/SlpModularCms.Modules.Offerings.Tests/Services/OfferingsServiceTests.cs
index de235c8..91635c2 100644
--- a/src/SlpModularCms.Modules.Offerings.Tests/Services/OfferingsServiceTests.cs
+++ b/src/SlpModularCms.Modules.Offerings.Tests/Services/OfferingsServiceTests.cs
@@ -27,6 +27,7 @@ public class OfferingsServiceTests
     private static Offering ExistingOffering(bool featured = false, int displayOrder = 0) => new()
     {
         Id = Guid.NewGuid(),
+        Slug = "existing",
         Title = "Existing",
         Description = "Description",
         Price = "€ 100",
@@ -91,6 +92,57 @@ public class OfferingsServiceTests
         await _repo.DidNotReceive().BeginTransactionAsync();
     }
 
+    // --- Slug generation ---
+
+    [Fact]
+    public async Task CreateAsync_GeneratesSlugFromTitle()
+    {
+        _repo.GetMaxDisplayOrderAsync().Returns(-1);
+
+        var dto = await CreateSut().CreateAsync(CreateRequest(), Guid.NewGuid());
+
+        dto.Slug.Should().Be("title");
+    }
+
+    [Fact]
+    public async Task CreateAsync_AppendsSuffix_WhenSlugAlreadyTaken()
+    {
+        _repo.GetMaxDisplayOrderAsync().Returns(-1);
+        _repo.ExistsBySlugAsync("title", null).Returns(true);
+        _repo.ExistsBySlugAsync("title-2", null).Returns(true);
+        _repo.ExistsBySlugAsync("title-3", null).Returns(false);
+
+        var dto = await CreateSut().CreateAsync(CreateRequest(), Guid.NewGuid());
+
+        dto.Slug.Should().Be("title-3");
+    }
+
+    [Fact]
+    public async Task UpdateAsync_RegeneratesSlug_WhenTitleChanges()
+    {
+        var target = ExistingOffering();
+        _repo.GetByIdAsync(target.Id).Returns(target);
+        _repo.ExistsBySlugAsync("new-title", target.Id).Returns(false);
+
+        var request = new UpdateOfferingRequest("New Title", "Description", "€ 100", "per month", ["Feature 1"], "Contact");
+        var dto = await CreateSut().UpdateAsync(target.Id, request, Guid.NewGuid());
+
+        dto!.Slug.Should().Be("new-title");
+    }
+
+    [Fact]
+    public async Task UpdateAsync_KeepsExistingSlug_WhenTitleUnchanged()
+    {
+        var target = ExistingOffering();
+        _repo.GetByIdAsync(target.Id).Returns(target);
+
+        var request = new UpdateOfferingRequest(target.Title, "Description", "€ 100", "per month", ["Feature 1"], "Contact");
+        var dto = await CreateSut().UpdateAsync(target.Id, request, Guid.NewGuid());
+
+        dto!.Slug.Should().Be("existing");
+        await _repo.DidNotReceive().ExistsBySlugAsync(Arg.Any<string>(), Arg.Any<Guid?>());
+    }
+
     // --- UpdateAsync ---
 
     [Fact]
diff --git a/src/SlpModularCms.Modules.Offerings.Tests/Services/SlugifierTests.cs b/src/SlpModularCms.Modules.Offerings.Tests/Services/SlugifierTests.cs
new file mode 100644
index 0000000..a417db5
--- /dev/null
+++ b/src/SlpModularCms.Modules.Offerings.Tests/Services/SlugifierTests.cs
@@ -0,0 +1,24 @@
+using FluentAssertions;
+using SlpModularCms.Modules.Offerings.Services;
+
+namespace SlpModularCms.Modules.Offerings.Tests.Services;
+
+public class SlugifierTests
+{
+    [Theory]
+    [InlineData("Landingspagina", "landingspagina")]
+    [InlineData("Website", "website")]
+    [InlineData("Grote Website & Maatwerk", "grote-website-maatwerk")]
+    [InlineData("  Trimmed  Title  ", "trimmed-title")]
+    [InlineData("Café Ontwerp", "cafe-ontwerp")]
+    public void Slugify_ProducesReadableSlug(string title, string expected)
+    {
+        Slugifier.Slugify(title).Should().Be(expected);
+    }
+
+    [Fact]
+    public void Slugify_FallsBackToPakket_WhenTitleHasNoAlphanumerics()
+    {
+        Slugifier.Slugify("---").Should().Be("pakket");
+    }
+}
diff --git a/src/SlpModularCms.Modules.Offerings/Data/Entities/Offering.cs b/src/SlpModularCms.Modules.Offerings/Data/Entities/Offering.cs
index 1878503..0825584 100644
--- a/src/SlpModularCms.Modules.Offerings/Data/Entities/Offering.cs
+++ b/src/SlpModularCms.Modules.Offerings/Data/Entities/Offering.cs
@@ -3,6 +3,7 @@ namespace SlpModularCms.Modules.Offerings.Data.Entities;
 public class Offering
 {
     public Guid Id { get; set; }
+    public string Slug { get; set; } = string.Empty;
     public string Title { get; set; } = string.Empty;
     public string Description { get; set; } = string.Empty;
     public string Price { get; set; } = string.Empty;
diff --git a/src/SlpModularCms.Modules.Offerings/Data/OfferingsDbContext.cs b/src/SlpModularCms.Modules.Offerings/Data/OfferingsDbContext.cs
index edca50d..84444d0 100644
--- a/src/SlpModularCms.Modules.Offerings/Data/OfferingsDbContext.cs
+++ b/src/SlpModularCms.Modules.Offerings/Data/OfferingsDbContext.cs
@@ -17,6 +17,7 @@ public class OfferingsDbContext(DbContextOptions<OfferingsDbContext> options) :
         {
             entity.ToTable("OfferingsOfferings");
             entity.HasKey(e => e.Id);
+            entity.Property(e => e.Slug).IsRequired().HasMaxLength(130);
             entity.Property(e => e.Title).IsRequired().HasMaxLength(100);
             entity.Property(e => e.Description).IsRequired().HasMaxLength(500);
             entity.Property(e => e.Price).IsRequired().HasMaxLength(50);
diff --git a/src/SlpModularCms.Modules.Offerings/Migrations/20260804113000_AddOfferingSlug.Designer.cs b/src/SlpModularCms.Modules.Offerings/Migrations/20260804113000_AddOfferingSlug.Designer.cs
new file mode 100644
index 0000000..d1a6b65
--- /dev/null
+++ b/src/SlpModularCms.Modules.Offerings/Migrations/20260804113000_AddOfferingSlug.Designer.cs
@@ -0,0 +1,93 @@
+// <auto-generated />
+using System;
+using Microsoft.EntityFrameworkCore;
+using Microsoft.EntityFrameworkCore.Infrastructure;
+using Microsoft.EntityFrameworkCore.Migrations;
+using Microsoft.EntityFrameworkCore.Storage.ValueConversion;
+using SlpModularCms.Modules.Offerings.Data;
+
+#nullable disable
+
+namespace SlpModularCms.Modules.Offerings.Migrations
+{
+    [DbContext(typeof(OfferingsDbContext))]
+    [Migration("20260804113000_AddOfferingSlug")]
+    partial class AddOfferingSlug
+    {
+        /// <inheritdoc />
+        protected override void BuildTargetModel(ModelBuilder modelBuilder)
+        {
+#pragma warning disable 612, 618
+            modelBuilder
+                .HasAnnotation("ProductVersion", "10.0.9")
+                .HasAnnotation("Relational:MaxIdentifierLength", 64);
+
+            modelBuilder.Entity("SlpModularCms.Modules.Offerings.Data.Entities.Offering", b =>
+                {
+                    b.Property<Guid>("Id")
+                        .ValueGeneratedOnAdd()
+                        .HasColumnType("char(36)");
+
+                    b.Property<DateTimeOffset>("CreatedAt")
+                        .HasColumnType("datetime");
+
+                    b.Property<string>("CtaLabel")
+                        .IsRequired()
+                        .HasMaxLength(50)
+                        .HasColumnType("varchar(50)");
+
+                    b.Property<DateTimeOffset?>("DeletedAt")
+                        .HasColumnType("datetime");
+
+                    b.Property<string>("Description")
+                        .IsRequired()
+                        .HasMaxLength(500)
+                        .HasColumnType("varchar(500)");
+
+                    b.Property<int>("DisplayOrder")
+                        .HasColumnType("int");
+
+                    b.Property<bool>("Featured")
+                        .HasColumnType("tinyint(1)");
+
+                    b.Property<string>("Features")
+                        .IsRequired()
+                        .HasColumnType("longtext");
+
+                    b.Property<bool>("IsDeleted")
+                        .HasColumnType("tinyint(1)");
+
+                    b.Property<Guid>("LastModifiedByUserId")
+                        .HasColumnType("char(36)");
+
+                    b.Property<string>("Price")
+                        .IsRequired()
+                        .HasMaxLength(50)
+                        .HasColumnType("varchar(50)");
+
+                    b.Property<string>("PriceNote")
+                        .IsRequired()
+                        .HasMaxLength(100)
+                        .HasColumnType("varchar(100)");
+
+                    b.Property<string>("Slug")
+                        .IsRequired()
+                        .HasMaxLength(130)
+                        .HasColumnType("varchar(130)");
+
+                    b.Property<string>("Title")
+                        .IsRequired()
+                        .HasMaxLength(100)
+                        .HasColumnType("varchar(100)");
+
+                    b.Property<DateTimeOffset>("UpdatedAt")
+                        .HasColumnType("datetime");
+
+                    b.HasKey("Id");
+
+                    b.ToTable("OfferingsOfferings", (string)null);
+                });
+#pragma warning restore 612, 618
+        }
+    }
+}
diff --git a/src/SlpModularCms.Modules.Offerings/Migrations/20260804113000_AddOfferingSlug.cs b/src/SlpModularCms.Modules.Offerings/Migrations/20260804113000_AddOfferingSlug.cs
new file mode 100644
index 0000000..846dd65
--- /dev/null
+++ b/src/SlpModularCms.Modules.Offerings/Migrations/20260804113000_AddOfferingSlug.cs
@@ -0,0 +1,39 @@
+using Microsoft.EntityFrameworkCore.Migrations;
+
+#nullable disable
+
+namespace SlpModularCms.Modules.Offerings.Migrations
+{
+    /// <inheritdoc />
+    public partial class AddOfferingSlug : Migration
+    {
+        /// <inheritdoc />
+        protected override void Up(MigrationBuilder migrationBuilder)
+        {
+            migrationBuilder.AddColumn<string>(
+                name: "Slug",
+                table: "OfferingsOfferings",
+                type: "varchar(130)",
+                maxLength: 130,
+                nullable: false,
+                defaultValue: "");
+
+            // Backfill existing rows with a title-derived slug so the NOT NULL column
+            // never holds an empty string for pre-existing data. New/edited rows get
+            // their slug from OfferingsService.GenerateUniqueSlugAsync instead, which
+            // also handles collisions this best-effort SQL backfill doesn't.
+            migrationBuilder.Sql(
+                "UPDATE OfferingsOfferings " +
+                "SET Slug = LOWER(TRIM(BOTH '-' FROM REGEXP_REPLACE(TRIM(Title), '[^a-zA-Z0-9]+', '-'))) " +
+                "WHERE Slug = '';");
+        }
+
+        /// <inheritdoc />
+        protected override void Down(MigrationBuilder migrationBuilder)
+        {
+            migrationBuilder.DropColumn(
+                name: "Slug",
+                table: "OfferingsOfferings");
+        }
+    }
+}
diff --git a/src/SlpModularCms.Modules.Offerings/Migrations/OfferingsDbContextModelSnapshot.cs b/src/SlpModularCms.Modules.Offerings/Migrations/OfferingsDbContextModelSnapshot.cs
index 04b3d30..9484838 100644
--- a/src/SlpModularCms.Modules.Offerings/Migrations/OfferingsDbContextModelSnapshot.cs
+++ b/src/SlpModularCms.Modules.Offerings/Migrations/OfferingsDbContextModelSnapshot.cs
@@ -67,6 +67,11 @@ namespace SlpModularCms.Modules.Offerings.Migrations
                         .HasMaxLength(100)
                         .HasColumnType("varchar(100)");
 
+                    b.Property<string>("Slug")
+                        .IsRequired()
+                        .HasMaxLength(130)
+                        .HasColumnType("varchar(130)");
+
                     b.Property<string>("Title")
                         .IsRequired()
                         .HasMaxLength(100)
diff --git a/src/SlpModularCms.Modules.Offerings/Models/OfferingAdminDto.cs b/src/SlpModularCms.Modules.Offerings/Models/OfferingAdminDto.cs
index 8640696..dc8bc67 100644
--- a/src/SlpModularCms.Modules.Offerings/Models/OfferingAdminDto.cs
+++ b/src/SlpModularCms.Modules.Offerings/Models/OfferingAdminDto.cs
@@ -5,6 +5,7 @@ namespace SlpModularCms.Modules.Offerings.Models;
 [ExcludeFromCodeCoverage]
 public record OfferingAdminDto(
     string Id,
+    string Slug,
     string Title,
     string Description,
     string Price,
diff --git a/src/SlpModularCms.Modules.Offerings/Models/OfferingDto.cs b/src/SlpModularCms.Modules.Offerings/Models/OfferingDto.cs
index 4613b56..ac3a640 100644
--- a/src/SlpModularCms.Modules.Offerings/Models/OfferingDto.cs
+++ b/src/SlpModularCms.Modules.Offerings/Models/OfferingDto.cs
@@ -5,6 +5,7 @@ namespace SlpModularCms.Modules.Offerings.Models;
 [ExcludeFromCodeCoverage]
 public record OfferingDto(
     string Id,
+    string Slug,
     string Title,
     string Description,
     string Price,
diff --git a/src/SlpModularCms.Modules.Offerings/Repositories/IOfferingRepository.cs b/src/SlpModularCms.Modules.Offerings/Repositories/IOfferingRepository.cs
index e392caf..1b636cb 100644
--- a/src/SlpModularCms.Modules.Offerings/Repositories/IOfferingRepository.cs
+++ b/src/SlpModularCms.Modules.Offerings/Repositories/IOfferingRepository.cs
@@ -7,6 +7,7 @@ public interface IOfferingRepository
 {
     Task<IReadOnlyList<Offering>> GetAllAsync();
     Task<Offering?> GetByIdAsync(Guid id);
+    Task<bool> ExistsBySlugAsync(string slug, Guid? excludeId = null);
     Task AddAsync(Offering offering);
     void Update(Offering offering);
     Task<int> GetMaxDisplayOrderAsync();
diff --git a/src/SlpModularCms.Modules.Offerings/Repositories/OfferingRepository.cs b/src/SlpModularCms.Modules.Offerings/Repositories/OfferingRepository.cs
index df58598..7796c2f 100644
--- a/src/SlpModularCms.Modules.Offerings/Repositories/OfferingRepository.cs
+++ b/src/SlpModularCms.Modules.Offerings/Repositories/OfferingRepository.cs
@@ -13,6 +13,9 @@ public class OfferingRepository(OfferingsDbContext context) : IOfferingRepositor
     public async Task<Offering?> GetByIdAsync(Guid id)
         => await context.Offerings.FirstOrDefaultAsync(o => o.Id == id);
 
+    public async Task<bool> ExistsBySlugAsync(string slug, Guid? excludeId = null)
+        => await context.Offerings.AnyAsync(o => o.Slug == slug && o.Id != (excludeId ?? Guid.Empty));
+
     public async Task AddAsync(Offering offering)
         => await context.Offerings.AddAsync(offering);
 
diff --git a/src/SlpModularCms.Modules.Offerings/Services/OfferingsService.cs b/src/SlpModularCms.Modules.Offerings/Services/OfferingsService.cs
index 18920b6..0c77fcd 100644
--- a/src/SlpModularCms.Modules.Offerings/Services/OfferingsService.cs
+++ b/src/SlpModularCms.Modules.Offerings/Services/OfferingsService.cs
@@ -25,6 +25,7 @@ public class OfferingsService(IOfferingRepository repository, ILogger<OfferingsS
         var offering = new Offering
         {
             Id = Guid.NewGuid(),
+            Slug = await GenerateUniqueSlugAsync(request.Title),
             Title = request.Title,
             Description = request.Description,
             Price = request.Price,
@@ -69,6 +70,9 @@ public class OfferingsService(IOfferingRepository repository, ILogger<OfferingsS
         if (offering is null)
             return null;
 
+        if (!string.Equals(offering.Title, request.Title, StringComparison.Ordinal))
+            offering.Slug = await GenerateUniqueSlugAsync(request.Title, excludeId: offering.Id);
+
         offering.Title = request.Title;
         offering.Description = request.Description;
         offering.Price = request.Price;
@@ -202,8 +206,24 @@ public class OfferingsService(IOfferingRepository repository, ILogger<OfferingsS
         repository.Update(current);
     }
 
+    private async Task<string> GenerateUniqueSlugAsync(string title, Guid? excludeId = null)
+    {
+        var baseSlug = Slugifier.Slugify(title);
+        var slug = baseSlug;
+        var suffix = 2;
+
+        while (await repository.ExistsBySlugAsync(slug, excludeId))
+        {
+            slug = $"{baseSlug}-{suffix}";
+            suffix++;
+        }
+
+        return slug;
+    }
+
     private static OfferingDto ToPublicDto(Offering o) => new(
         o.Id.ToString(),
+        o.Slug,
         o.Title,
         o.Description,
         o.Price,
@@ -215,6 +235,7 @@ public class OfferingsService(IOfferingRepository repository, ILogger<OfferingsS
 
     private static OfferingAdminDto ToAdminDto(Offering o) => new(
         o.Id.ToString(),
+        o.Slug,
         o.Title,
         o.Description,
         o.Price,
diff --git a/src/SlpModularCms.Modules.Offerings/Services/Slugifier.cs b/src/SlpModularCms.Modules.Offerings/Services/Slugifier.cs
new file mode 100644
index 0000000..0e1c039
--- /dev/null
+++ b/src/SlpModularCms.Modules.Offerings/Services/Slugifier.cs
@@ -0,0 +1,40 @@
+using System.Text;
+
+namespace SlpModularCms.Modules.Offerings.Services;
+
+/// <summary>
+/// Turns a title into a URL/display-safe slug (lowercase, hyphen-separated, no diacritics).
+/// Pure string transform — uniqueness is handled by the caller.
+/// </summary>
+public static class Slugifier
+{
+    public static string Slugify(string value)
+    {
+        var normalized = value.Normalize(NormalizationForm.FormD);
+        var builder = new StringBuilder(normalized.Length);
+        var lastWasHyphen = false;
+
+        foreach (var c in normalized)
+        {
+            var category = System.Globalization.CharUnicodeInfo.GetUnicodeCategory(c);
+            if (category == System.Globalization.UnicodeCategory.NonSpacingMark)
+                continue;
+
+            if (char.IsLetterOrDigit(c))
+            {
+                builder.Append(char.ToLowerInvariant(c));
+                lastWasHyphen = false;
+            }
+            else if (!lastWasHyphen && builder.Length > 0)
+            {
+                builder.Append('-');
+                lastWasHyphen = true;
+            }
+        }
+
+        if (lastWasHyphen)
+            builder.Length--;
+
+        return builder.Length > 0 ? builder.ToString() : "pakket";
+    }
+}

From 1b974696bf87f281c56d2af2d3eaa370ecbe2a3f Mon Sep 17 00:00:00 2001
From: Sluijsens <bdslop@gmail.com>
Date: Tue, 4 Aug 2026 15:31:10 +0200
Subject: [PATCH 2/4] Maak slug in CMS zichtbaar en inline aanpasbaar
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

De CMS-admin toonde het nieuwe Slug-veld nog niet — dat bestond alleen
in de API-respons. Voegt een read-only slugweergave onder het
titelveld toe met een potlood-icoon om 'm inline te bewerken.

Backend: Create/UpdateOfferingRequest accepteren nu een optionele
Slug-override. Zonder expliciete waarde blijft het bestaande gedrag
(auto-genereren uit titel, regenereren bij titelwijziging). Met een
expliciete waarde wordt die genormaliseerd en op uniekheid
gecontroleerd; een botsing geeft 409 Conflict (RFC 9457 ProblemDetails,
naar het patroon van MasterControlledAvailabilityException).

Frontend: de slug wordt alleen meegestuurd als de admin 'm daadwerkelijk
bewerkt heeft (dirtyFields.slug), zodat een ongemoeide slug bij een
titelwijziging gewoon blijft auto-regenereren.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 .../offerings/components/OfferingForm.tsx     | 86 ++++++++++++++++++-
 .../src/features/offerings/mocks/handlers.ts  | 35 +++++++-
 .../offerings/pages/OfferingFormPage.test.tsx | 43 ++++++++++
 .../offerings/pages/OfferingFormPage.tsx      | 12 ++-
 .../features/offerings/schemas/offering.ts    |  6 ++
 .../src/features/offerings/services/types.ts  |  3 +
 frontend/src/i18n/locales/en/translation.json |  5 ++
 frontend/src/i18n/locales/nl/translation.json |  5 ++
 .../Controllers/OfferingsControllerTests.cs   | 23 +++++
 .../Services/OfferingsServiceTests.cs         | 58 +++++++++++++
 .../Controllers/OfferingsController.cs        | 23 ++++-
 .../Models/CreateOfferingRequest.cs           |  3 +-
 .../Models/UpdateOfferingRequest.cs           |  3 +-
 .../Services/OfferingSlugConflictException.cs | 12 +++
 .../Services/OfferingsService.cs              | 29 ++++++-
 15 files changed, 332 insertions(+), 14 deletions(-)
 create mode 100644 src/SlpModularCms.Modules.Offerings/Services/OfferingSlugConflictException.cs

diff --git a/frontend/src/features/offerings/components/OfferingForm.tsx b/frontend/src/features/offerings/components/OfferingForm.tsx
index 37df333..d5ebd8b 100644
--- a/frontend/src/features/offerings/components/OfferingForm.tsx
+++ b/frontend/src/features/offerings/components/OfferingForm.tsx
@@ -1,7 +1,8 @@
+import { useState } from 'react';
 import { useForm, useWatch } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useTranslation } from 'react-i18next';
-import { Plus, Trash2 } from 'lucide-react';
+import { Check, Pencil, Plus, Trash2, X } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
@@ -23,7 +24,8 @@ export function OfferingForm({ initialValues, onSubmit, isSubmitting }: Offering
         control,
         handleSubmit,
         setValue,
-        formState: { errors },
+        resetField,
+        formState: { errors, dirtyFields },
     } = useForm<OfferingFormData>({
         resolver: zodResolver(offeringFormSchema),
         mode: 'onTouched',
@@ -35,12 +37,35 @@ export function OfferingForm({ initialValues, onSubmit, isSubmitting }: Offering
             features: [''],
             ctaLabel: '',
             featured: false,
+            slug: '',
         },
     });
 
     // useFieldArray requires object-shaped array items — features is a plain string[],
     // so add/remove are handled directly via setValue instead.
     const features = useWatch({ control, name: 'features' });
+    const slug = useWatch({ control, name: 'slug' });
+    const [isEditingSlug, setIsEditingSlug] = useState(false);
+
+    function confirmSlugEdit() {
+        setIsEditingSlug(false);
+    }
+
+    function cancelSlugEdit() {
+        resetField('slug');
+        setIsEditingSlug(false);
+    }
+
+    // Slug is auto-generated from the title server-side unless explicitly overridden here —
+    // only send it along when the admin actually touched this field, so an untouched slug
+    // keeps auto-regenerating when the title changes (see OfferingsService.UpdateAsync).
+    function submitWithSlugPolicy(values: OfferingFormData) {
+        const payload = { ...values };
+        if (!dirtyFields.slug) {
+            delete payload.slug;
+        }
+        onSubmit(payload);
+    }
 
     function addFeature() {
         setValue('features', [...features, ''], { shouldValidate: true });
@@ -51,13 +76,68 @@ export function OfferingForm({ initialValues, onSubmit, isSubmitting }: Offering
     }
 
     return (
-        <form onSubmit={handleSubmit(onSubmit)} noValidate className="space-y-4">
+        <form onSubmit={handleSubmit(submitWithSlugPolicy)} noValidate className="space-y-4">
             <div className="space-y-2">
                 <Label htmlFor="offering-title">{t('offerings.form.titleLabel')}</Label>
                 <Input id="offering-title" data-testid="offering-title" aria-invalid={errors.title !== undefined} {...register('title')} />
                 {errors.title && <FieldError message={errors.title.message} testId="offering-title-error" />}
             </div>
 
+            <div className="space-y-2">
+                <Label htmlFor="offering-slug">{t('offerings.form.slugLabel')}</Label>
+                {isEditingSlug ? (
+                    <div className="flex items-center gap-2">
+                        <Input
+                            id="offering-slug"
+                            data-testid="offering-slug"
+                            autoFocus
+                            aria-invalid={errors.slug !== undefined}
+                            {...register('slug')}
+                        />
+                        <Button
+                            type="button"
+                            variant="ghost"
+                            size="icon"
+                            data-testid="offering-slug-confirm"
+                            aria-label={t('offerings.form.confirmSlugButton')}
+                            onClick={confirmSlugEdit}
+                        >
+                            <Check className="size-4" />
+                        </Button>
+                        <Button
+                            type="button"
+                            variant="ghost"
+                            size="icon"
+                            data-testid="offering-slug-cancel"
+                            aria-label={t('offerings.form.cancelSlugEditButton')}
+                            onClick={cancelSlugEdit}
+                        >
+                            <X className="size-4" />
+                        </Button>
+                    </div>
+                ) : (
+                    <div className="flex items-center gap-2">
+                        <code
+                            data-testid="offering-slug-display"
+                            className="font-mono text-sm text-muted-foreground"
+                        >
+                            {slug && slug.length > 0 ? slug : t('offerings.form.slugAutoHint')}
+                        </code>
+                        <Button
+                            type="button"
+                            variant="ghost"
+                            size="icon"
+                            data-testid="offering-slug-edit"
+                            aria-label={t('offerings.form.editSlugButton')}
+                            onClick={() => setIsEditingSlug(true)}
+                        >
+                            <Pencil className="size-4" />
+                        </Button>
+                    </div>
+                )}
+                {errors.slug && <FieldError message={errors.slug.message} testId="offering-slug-error" />}
+            </div>
+
             <div className="space-y-2">
                 <Label htmlFor="offering-description">{t('offerings.form.descriptionLabel')}</Label>
                 <textarea
diff --git a/frontend/src/features/offerings/mocks/handlers.ts b/frontend/src/features/offerings/mocks/handlers.ts
index e8e4ee5..dcecfb8 100644
--- a/frontend/src/features/offerings/mocks/handlers.ts
+++ b/frontend/src/features/offerings/mocks/handlers.ts
@@ -2,9 +2,19 @@ import { http, HttpResponse } from 'msw';
 import type { OfferingAdminDto, CreateOfferingRequest, UpdateOfferingRequest } from '@/features/offerings/services/types';
 import { API_BASE } from '@/features/auth/mocks/fixtures';
 
+function slugify(value: string): string {
+    return value
+        .toLowerCase()
+        .normalize('NFD')
+        .replace(/[̀-ͯ]/g, '')
+        .replace(/[^a-z0-9]+/g, '-')
+        .replace(/^-+|-+$/g, '');
+}
+
 const seed: OfferingAdminDto[] = [
     {
         id: 'aaaaaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa',
+        slug: 'starter',
         title: 'Starter',
         description: 'A simple website',
         price: '€ 300',
@@ -16,6 +26,7 @@ const seed: OfferingAdminDto[] = [
     },
     {
         id: 'bbbbbbbb-bbbb-bbbb-bbbb-bbbbbbbbbbbb',
+        slug: 'pro',
         title: 'Pro',
         description: 'A full website',
         price: '€ 800',
@@ -44,9 +55,18 @@ export const offeringsHandlers = [
 
     http.post(`${API_BASE}/api/v1/offerings/admin`, async ({ request }) => {
         const body = (await request.json()) as CreateOfferingRequest;
+        const slug = body.slug && body.slug.length > 0 ? slugify(body.slug) : slugify(body.title);
+        if (mockOfferings.some((o) => o.slug === slug)) {
+            return HttpResponse.json(
+                { status: 409, title: `Slug '${slug}' is al in gebruik door een ander aanbod.` },
+                { status: 409 },
+            );
+        }
+
         const newOffering: OfferingAdminDto = {
             id: crypto.randomUUID(),
             ...body,
+            slug,
             displayOrder: mockOfferings.length,
         };
         mockOfferings = [...mockOfferings, newOffering];
@@ -59,7 +79,20 @@ export const offeringsHandlers = [
         const existing = mockOfferings.find((o) => o.id === id);
         if (!existing) return new HttpResponse(null, { status: 404 });
 
-        const updated: OfferingAdminDto = { ...existing, ...body };
+        let slug = existing.slug;
+        if (body.slug && body.slug.length > 0) {
+            slug = slugify(body.slug);
+        } else if (body.title !== existing.title) {
+            slug = slugify(body.title);
+        }
+        if (slug !== existing.slug && mockOfferings.some((o) => o.slug === slug)) {
+            return HttpResponse.json(
+                { status: 409, title: `Slug '${slug}' is al in gebruik door een ander aanbod.` },
+                { status: 409 },
+            );
+        }
+
+        const updated: OfferingAdminDto = { ...existing, ...body, slug };
         mockOfferings = mockOfferings.map((o) => (o.id === id ? updated : o));
         return HttpResponse.json(updated);
     }),
diff --git a/frontend/src/features/offerings/pages/OfferingFormPage.test.tsx b/frontend/src/features/offerings/pages/OfferingFormPage.test.tsx
index 5a91b60..69ca344 100644
--- a/frontend/src/features/offerings/pages/OfferingFormPage.test.tsx
+++ b/frontend/src/features/offerings/pages/OfferingFormPage.test.tsx
@@ -46,5 +46,48 @@ describe('OfferingFormPage', () => {
 
         const titleInput = await screen.findByTestId('offering-title', {}, { timeout: 10000 });
         expect(titleInput).toHaveValue('Starter');
+        expect(screen.getByTestId('offering-slug-display')).toHaveTextContent('starter');
+    });
+
+    it('shows an auto-generate hint for a new offering until the slug is edited via the pencil icon', async () => {
+        mockAuthenticated();
+        renderApp('/offerings/new');
+
+        await screen.findByTestId('offering-form-submit', {}, { timeout: 10000 });
+        expect(screen.getByTestId('offering-slug-display')).toHaveTextContent(/automatisch|auto-generated/i);
+
+        await userEvent.click(screen.getByTestId('offering-slug-edit'));
+        await userEvent.type(screen.getByTestId('offering-slug'), 'custom-slug');
+        await userEvent.click(screen.getByTestId('offering-slug-confirm'));
+
+        expect(screen.getByTestId('offering-slug-display')).toHaveTextContent('custom-slug');
+    });
+
+    it('reverts the slug when the inline edit is cancelled', async () => {
+        mockAuthenticated();
+        renderApp('/offerings/aaaaaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa/edit');
+
+        await screen.findByTestId('offering-title', {}, { timeout: 10000 });
+        await userEvent.click(screen.getByTestId('offering-slug-edit'));
+        await userEvent.clear(screen.getByTestId('offering-slug'));
+        await userEvent.type(screen.getByTestId('offering-slug'), 'something-else');
+        await userEvent.click(screen.getByTestId('offering-slug-cancel'));
+
+        expect(screen.getByTestId('offering-slug-display')).toHaveTextContent('starter');
+    });
+
+    it('shows a conflict error when the chosen slug is already taken', async () => {
+        mockAuthenticated();
+        renderApp('/offerings/aaaaaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa/edit');
+
+        await screen.findByTestId('offering-title', {}, { timeout: 10000 });
+        await userEvent.click(screen.getByTestId('offering-slug-edit'));
+        await userEvent.clear(screen.getByTestId('offering-slug'));
+        await userEvent.type(screen.getByTestId('offering-slug'), 'pro');
+        await userEvent.click(screen.getByTestId('offering-slug-confirm'));
+
+        await userEvent.click(screen.getByTestId('offering-form-submit'));
+
+        expect(await screen.findByText(/pro.*al in gebruik|already.*taken/i)).toBeInTheDocument();
     });
 });
diff --git a/frontend/src/features/offerings/pages/OfferingFormPage.tsx b/frontend/src/features/offerings/pages/OfferingFormPage.tsx
index cbc10e7..b599b8e 100644
--- a/frontend/src/features/offerings/pages/OfferingFormPage.tsx
+++ b/frontend/src/features/offerings/pages/OfferingFormPage.tsx
@@ -7,7 +7,7 @@ import { OfferingForm } from '../components/OfferingForm';
 import { useOffering } from '../services/useOffering';
 import { useCreateOffering } from '../services/useCreateOffering';
 import { useUpdateOffering } from '../services/useUpdateOffering';
-import { NetworkError } from '@/lib/api-client';
+import { NetworkError, ProblemDetailsError } from '@/lib/api-client';
 import type { OfferingFormData } from '../schemas/offering';
 
 export function OfferingFormPage() {
@@ -34,7 +34,15 @@ export function OfferingFormPage() {
             toast.success(t('offerings.form.successToast'));
             navigate({ to: '/offerings' });
         } catch (err) {
-            setServerError(err instanceof NetworkError ? t('errors.network') : t('errors.generic'));
+            if (err instanceof NetworkError) {
+                setServerError(t('errors.network'));
+            } else if (err instanceof ProblemDetailsError && err.status === 409) {
+                // Slug conflict: the backend's message is already a user-facing Dutch/English
+                // sentence naming the taken slug — more actionable than a generic fallback.
+                setServerError(err.message);
+            } else {
+                setServerError(t('errors.generic'));
+            }
         }
     };
 
diff --git a/frontend/src/features/offerings/schemas/offering.ts b/frontend/src/features/offerings/schemas/offering.ts
index b6b90f0..683d11c 100644
--- a/frontend/src/features/offerings/schemas/offering.ts
+++ b/frontend/src/features/offerings/schemas/offering.ts
@@ -17,6 +17,12 @@ export const offeringFormSchema = z.object({
         .max(10, 'At most 10 features are allowed'),
     ctaLabel: z.string().min(1, 'CTA label is required').max(50, 'CTA label must be 50 characters or fewer'),
     featured: z.boolean(),
+    slug: z
+        .string()
+        .max(130, 'Slug must be 130 characters or fewer')
+        .regex(/^[a-z0-9]+(-[a-z0-9]+)*$/, 'Slug may only contain lowercase letters, digits and hyphens')
+        .optional()
+        .or(z.literal('')),
 });
 
 export type OfferingFormData = z.infer<typeof offeringFormSchema>;
diff --git a/frontend/src/features/offerings/services/types.ts b/frontend/src/features/offerings/services/types.ts
index b4e3a0a..00daed0 100644
--- a/frontend/src/features/offerings/services/types.ts
+++ b/frontend/src/features/offerings/services/types.ts
@@ -1,5 +1,6 @@
 export interface OfferingAdminDto {
     id: string;
+    slug: string;
     title: string;
     description: string;
     price: string;
@@ -18,6 +19,8 @@ export interface CreateOfferingRequest {
     features: string[];
     ctaLabel: string;
     featured: boolean;
+    /** Omit to auto-generate from title; set to explicitly override. */
+    slug?: string;
 }
 
 export type UpdateOfferingRequest = CreateOfferingRequest;
diff --git a/frontend/src/i18n/locales/en/translation.json b/frontend/src/i18n/locales/en/translation.json
index a17561a..8b0bb8e 100644
--- a/frontend/src/i18n/locales/en/translation.json
+++ b/frontend/src/i18n/locales/en/translation.json
@@ -263,6 +263,11 @@
             "createTitle": "New Offering",
             "editTitle": "Edit Offering",
             "titleLabel": "Title",
+            "slugLabel": "Slug",
+            "slugAutoHint": "Auto-generated from the title",
+            "editSlugButton": "Edit slug",
+            "confirmSlugButton": "Confirm slug",
+            "cancelSlugEditButton": "Cancel slug edit",
             "descriptionLabel": "Description",
             "priceLabel": "Price",
             "priceNoteLabel": "Price note",
diff --git a/frontend/src/i18n/locales/nl/translation.json b/frontend/src/i18n/locales/nl/translation.json
index aad56f6..149a05e 100644
--- a/frontend/src/i18n/locales/nl/translation.json
+++ b/frontend/src/i18n/locales/nl/translation.json
@@ -263,6 +263,11 @@
             "createTitle": "Nieuwe aanbieding",
             "editTitle": "Aanbieding bewerken",
             "titleLabel": "Titel",
+            "slugLabel": "Slug",
+            "slugAutoHint": "Wordt automatisch gegenereerd uit de titel",
+            "editSlugButton": "Slug aanpassen",
+            "confirmSlugButton": "Slug bevestigen",
+            "cancelSlugEditButton": "Slug-bewerking annuleren",
             "descriptionLabel": "Beschrijving",
             "priceLabel": "Prijs",
             "priceNoteLabel": "Prijsnotitie",
diff --git a/src/SlpModularCms.Modules.Offerings.Tests/Controllers/OfferingsControllerTests.cs b/src/SlpModularCms.Modules.Offerings.Tests/Controllers/OfferingsControllerTests.cs
index bac6d9f..b830e20 100644
--- a/src/SlpModularCms.Modules.Offerings.Tests/Controllers/OfferingsControllerTests.cs
+++ b/src/SlpModularCms.Modules.Offerings.Tests/Controllers/OfferingsControllerTests.cs
@@ -3,6 +3,7 @@ using FluentAssertions;
 using Microsoft.AspNetCore.Http;
 using Microsoft.AspNetCore.Mvc;
 using NSubstitute;
+using NSubstitute.ExceptionExtensions;
 using SlpModularCms.Modules.Offerings.Controllers;
 using SlpModularCms.Modules.Offerings.Models;
 using SlpModularCms.Modules.Offerings.Services;
@@ -71,6 +72,17 @@ public class OfferingsControllerTests
         result.Should().BeOfType<CreatedAtActionResult>().Which.StatusCode.Should().Be(201);
     }
 
+    [Fact]
+    public async Task Create_Returns409_WhenSlugTaken()
+    {
+        _service.CreateAsync(Arg.Any<CreateOfferingRequest>(), Arg.Any<Guid>())
+            .ThrowsAsync(new OfferingSlugConflictException("taken"));
+
+        var result = await CreateSut().Create(CreateRequest());
+
+        result.Should().BeOfType<ConflictObjectResult>().Which.StatusCode.Should().Be(409);
+    }
+
     // --- Update ---
 
     [Fact]
@@ -94,6 +106,17 @@ public class OfferingsControllerTests
         result.Should().BeOfType<NotFoundResult>();
     }
 
+    [Fact]
+    public async Task Update_Returns409_WhenSlugTaken()
+    {
+        _service.UpdateAsync(Arg.Any<Guid>(), Arg.Any<UpdateOfferingRequest>(), Arg.Any<Guid>())
+            .ThrowsAsync(new OfferingSlugConflictException("taken"));
+
+        var result = await CreateSut().Update(Guid.NewGuid(), UpdateRequest());
+
+        result.Should().BeOfType<ConflictObjectResult>().Which.StatusCode.Should().Be(409);
+    }
+
     // --- Delete ---
 
     [Fact]
diff --git a/src/SlpModularCms.Modules.Offerings.Tests/Services/OfferingsServiceTests.cs b/src/SlpModularCms.Modules.Offerings.Tests/Services/OfferingsServiceTests.cs
index 91635c2..aecf8ec 100644
--- a/src/SlpModularCms.Modules.Offerings.Tests/Services/OfferingsServiceTests.cs
+++ b/src/SlpModularCms.Modules.Offerings.Tests/Services/OfferingsServiceTests.cs
@@ -143,6 +143,64 @@ public class OfferingsServiceTests
         await _repo.DidNotReceive().ExistsBySlugAsync(Arg.Any<string>(), Arg.Any<Guid?>());
     }
 
+    // --- Explicit slug override (admin-supplied via CMS) ---
+
+    [Fact]
+    public async Task CreateAsync_NormalizesExplicitSlug()
+    {
+        _repo.GetMaxDisplayOrderAsync().Returns(-1);
+        _repo.ExistsBySlugAsync("my-custom-slug", null).Returns(false);
+
+        var request = new CreateOfferingRequest(
+            "Title", "Description", "€ 100", "per month", ["Feature 1"], "Contact", Slug: "  My Custom Slug!! ");
+        var dto = await CreateSut().CreateAsync(request, Guid.NewGuid());
+
+        dto.Slug.Should().Be("my-custom-slug");
+    }
+
+    [Fact]
+    public async Task CreateAsync_Throws_WhenExplicitSlugAlreadyTaken()
+    {
+        _repo.GetMaxDisplayOrderAsync().Returns(-1);
+        _repo.ExistsBySlugAsync("taken", null).Returns(true);
+
+        var request = new CreateOfferingRequest(
+            "Title", "Description", "€ 100", "per month", ["Feature 1"], "Contact", Slug: "taken");
+
+        var act = () => CreateSut().CreateAsync(request, Guid.NewGuid());
+
+        await act.Should().ThrowAsync<OfferingSlugConflictException>();
+    }
+
+    [Fact]
+    public async Task UpdateAsync_UsesExplicitSlug_EvenWhenTitleUnchanged()
+    {
+        var target = ExistingOffering();
+        _repo.GetByIdAsync(target.Id).Returns(target);
+        _repo.ExistsBySlugAsync("manually-set", target.Id).Returns(false);
+
+        var request = new UpdateOfferingRequest(
+            target.Title, "Description", "€ 100", "per month", ["Feature 1"], "Contact", Slug: "manually-set");
+        var dto = await CreateSut().UpdateAsync(target.Id, request, Guid.NewGuid());
+
+        dto!.Slug.Should().Be("manually-set");
+    }
+
+    [Fact]
+    public async Task UpdateAsync_Throws_WhenExplicitSlugTakenByAnotherOffering()
+    {
+        var target = ExistingOffering();
+        _repo.GetByIdAsync(target.Id).Returns(target);
+        _repo.ExistsBySlugAsync("taken", target.Id).Returns(true);
+
+        var request = new UpdateOfferingRequest(
+            target.Title, "Description", "€ 100", "per month", ["Feature 1"], "Contact", Slug: "taken");
+
+        var act = () => CreateSut().UpdateAsync(target.Id, request, Guid.NewGuid());
+
+        await act.Should().ThrowAsync<OfferingSlugConflictException>();
+    }
+
     // --- UpdateAsync ---
 
     [Fact]
diff --git a/src/SlpModularCms.Modules.Offerings/Controllers/OfferingsController.cs b/src/SlpModularCms.Modules.Offerings/Controllers/OfferingsController.cs
index d194ef5..e6dced8 100644
--- a/src/SlpModularCms.Modules.Offerings/Controllers/OfferingsController.cs
+++ b/src/SlpModularCms.Modules.Offerings/Controllers/OfferingsController.cs
@@ -1,5 +1,6 @@
 using System.Security.Claims;
 using Microsoft.AspNetCore.Authorization;
+using Microsoft.AspNetCore.Http;
 using Microsoft.AspNetCore.Mvc;
 using Microsoft.AspNetCore.RateLimiting;
 using SlpModularCms.Modules.Offerings.Models;
@@ -31,15 +32,29 @@ public class OfferingsController(IOfferingsService service) : ControllerBase
     [HttpPost("admin")]
     public async Task<IActionResult> Create([FromBody] CreateOfferingRequest request)
     {
-        var dto = await service.CreateAsync(request, GetCallerId());
-        return CreatedAtAction(nameof(GetAllForAdmin), null, dto);
+        try
+        {
+            var dto = await service.CreateAsync(request, GetCallerId());
+            return CreatedAtAction(nameof(GetAllForAdmin), null, dto);
+        }
+        catch (OfferingSlugConflictException ex)
+        {
+            return Conflict(new ProblemDetails { Status = StatusCodes.Status409Conflict, Title = ex.Message });
+        }
     }
 
     [HttpPut("admin/{id:guid}")]
     public async Task<IActionResult> Update(Guid id, [FromBody] UpdateOfferingRequest request)
     {
-        var dto = await service.UpdateAsync(id, request, GetCallerId());
-        return dto is null ? NotFound() : Ok(dto);
+        try
+        {
+            var dto = await service.UpdateAsync(id, request, GetCallerId());
+            return dto is null ? NotFound() : Ok(dto);
+        }
+        catch (OfferingSlugConflictException ex)
+        {
+            return Conflict(new ProblemDetails { Status = StatusCodes.Status409Conflict, Title = ex.Message });
+        }
     }
 
     [HttpDelete("admin/{id:guid}")]
diff --git a/src/SlpModularCms.Modules.Offerings/Models/CreateOfferingRequest.cs b/src/SlpModularCms.Modules.Offerings/Models/CreateOfferingRequest.cs
index b3afac8..fcaf2e6 100644
--- a/src/SlpModularCms.Modules.Offerings/Models/CreateOfferingRequest.cs
+++ b/src/SlpModularCms.Modules.Offerings/Models/CreateOfferingRequest.cs
@@ -9,5 +9,6 @@ public record CreateOfferingRequest(
     [Required, MaxLength(100)] string PriceNote,
     [Required, FeaturesValidation] List<string> Features,
     [Required, MaxLength(50)] string CtaLabel,
-    bool Featured = false
+    bool Featured = false,
+    [MaxLength(130)] string? Slug = null
 );
diff --git a/src/SlpModularCms.Modules.Offerings/Models/UpdateOfferingRequest.cs b/src/SlpModularCms.Modules.Offerings/Models/UpdateOfferingRequest.cs
index 8c60070..542d025 100644
--- a/src/SlpModularCms.Modules.Offerings/Models/UpdateOfferingRequest.cs
+++ b/src/SlpModularCms.Modules.Offerings/Models/UpdateOfferingRequest.cs
@@ -9,5 +9,6 @@ public record UpdateOfferingRequest(
     [Required, MaxLength(100)] string PriceNote,
     [Required, FeaturesValidation] List<string> Features,
     [Required, MaxLength(50)] string CtaLabel,
-    bool Featured = false
+    bool Featured = false,
+    [MaxLength(130)] string? Slug = null
 );
diff --git a/src/SlpModularCms.Modules.Offerings/Services/OfferingSlugConflictException.cs b/src/SlpModularCms.Modules.Offerings/Services/OfferingSlugConflictException.cs
new file mode 100644
index 0000000..9cbf32d
--- /dev/null
+++ b/src/SlpModularCms.Modules.Offerings/Services/OfferingSlugConflictException.cs
@@ -0,0 +1,12 @@
+namespace SlpModularCms.Modules.Offerings.Services;
+
+/// <summary>
+/// Thrown when an admin explicitly sets a slug that's already in use by another offering.
+/// Auto-generated slugs never hit this (they get a numeric suffix instead) — this is only
+/// for the CMS's explicit slug override.
+/// </summary>
+public class OfferingSlugConflictException(string slug)
+    : InvalidOperationException($"Slug '{slug}' is al in gebruik door een ander aanbod.")
+{
+    public string Slug { get; } = slug;
+}
diff --git a/src/SlpModularCms.Modules.Offerings/Services/OfferingsService.cs b/src/SlpModularCms.Modules.Offerings/Services/OfferingsService.cs
index 0c77fcd..7d4fb1a 100644
--- a/src/SlpModularCms.Modules.Offerings/Services/OfferingsService.cs
+++ b/src/SlpModularCms.Modules.Offerings/Services/OfferingsService.cs
@@ -25,7 +25,7 @@ public class OfferingsService(IOfferingRepository repository, ILogger<OfferingsS
         var offering = new Offering
         {
             Id = Guid.NewGuid(),
-            Slug = await GenerateUniqueSlugAsync(request.Title),
+            Slug = await ResolveSlugAsync(request.Slug, request.Title),
             Title = request.Title,
             Description = request.Description,
             Price = request.Price,
@@ -70,8 +70,14 @@ public class OfferingsService(IOfferingRepository repository, ILogger<OfferingsS
         if (offering is null)
             return null;
 
-        if (!string.Equals(offering.Title, request.Title, StringComparison.Ordinal))
+        if (!string.IsNullOrWhiteSpace(request.Slug))
+        {
+            offering.Slug = await ResolveExplicitSlugAsync(request.Slug, excludeId: offering.Id);
+        }
+        else if (!string.Equals(offering.Title, request.Title, StringComparison.Ordinal))
+        {
             offering.Slug = await GenerateUniqueSlugAsync(request.Title, excludeId: offering.Id);
+        }
 
         offering.Title = request.Title;
         offering.Description = request.Description;
@@ -206,6 +212,25 @@ public class OfferingsService(IOfferingRepository repository, ILogger<OfferingsS
         repository.Update(current);
     }
 
+    private async Task<string> ResolveSlugAsync(string? explicitSlug, string title)
+        => !string.IsNullOrWhiteSpace(explicitSlug)
+            ? await ResolveExplicitSlugAsync(explicitSlug, excludeId: null)
+            : await GenerateUniqueSlugAsync(title);
+
+    /// <summary>
+    /// Normalizes an admin-supplied slug and enforces uniqueness. Unlike auto-generation,
+    /// a taken slug is rejected outright (OfferingSlugConflictException) rather than
+    /// silently suffixed — the admin picked this value on purpose.
+    /// </summary>
+    private async Task<string> ResolveExplicitSlugAsync(string explicitSlug, Guid? excludeId)
+    {
+        var slug = Slugifier.Slugify(explicitSlug);
+        if (await repository.ExistsBySlugAsync(slug, excludeId))
+            throw new OfferingSlugConflictException(slug);
+
+        return slug;
+    }
+
     private async Task<string> GenerateUniqueSlugAsync(string title, Guid? excludeId = null)
     {
         var baseSlug = Slugifier.Slugify(title);

From d09b3196d89a0babaea7ebee280b314adab3de31 Mon Sep 17 00:00:00 2001
From: Sluijsens <bdslop@gmail.com>
Date: Tue, 4 Aug 2026 15:55:32 +0200
Subject: [PATCH 3/4] Toon live slug-preview inline naast titel in plaats van
 los blok
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Op verzoek: "Slug: gegenereerde-slug [Aanpassen]" direct onder het
titelveld, waarbij de preview meebeweegt met wat je typt in Titel
(client-side mirror van de backend Slugifier) zolang de slug niet
handmatig is overschreven. Zodra de admin 'm expliciet aanpast en
niet leeg laat, stopt het meebewegen met de titel — consistent met
hoe OfferingsService.UpdateAsync de slug al behandelde.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 .../offerings/components/OfferingForm.tsx     | 36 +++++++++++--------
 .../offerings/pages/OfferingFormPage.test.tsx | 29 +++++++++++++++
 frontend/src/i18n/locales/en/translation.json |  2 +-
 frontend/src/i18n/locales/nl/translation.json |  2 +-
 frontend/src/lib/slugify.ts                   | 12 +++++++
 5 files changed, 65 insertions(+), 16 deletions(-)
 create mode 100644 frontend/src/lib/slugify.ts

diff --git a/frontend/src/features/offerings/components/OfferingForm.tsx b/frontend/src/features/offerings/components/OfferingForm.tsx
index d5ebd8b..a017d3b 100644
--- a/frontend/src/features/offerings/components/OfferingForm.tsx
+++ b/frontend/src/features/offerings/components/OfferingForm.tsx
@@ -2,11 +2,12 @@ import { useState } from 'react';
 import { useForm, useWatch } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useTranslation } from 'react-i18next';
-import { Check, Pencil, Plus, Trash2, X } from 'lucide-react';
+import { Check, Plus, Trash2, X } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { FieldError } from '@/components/ui/FieldError';
+import { slugifyPreview } from '@/lib/slugify';
 import { offeringFormSchema, type OfferingFormData } from '../schemas/offering';
 import type { OfferingAdminDto } from '../services/types';
 
@@ -44,9 +45,15 @@ export function OfferingForm({ initialValues, onSubmit, isSubmitting }: Offering
     // useFieldArray requires object-shaped array items — features is a plain string[],
     // so add/remove are handled directly via setValue instead.
     const features = useWatch({ control, name: 'features' });
+    const title = useWatch({ control, name: 'title' });
     const slug = useWatch({ control, name: 'slug' });
     const [isEditingSlug, setIsEditingSlug] = useState(false);
 
+    // Once the admin has manually set a non-empty slug, it stops tracking the title — mirrors
+    // OfferingsService: an explicit Slug always wins, an untouched one keeps auto-regenerating.
+    const isManuallySet = dirtyFields.slug === true && slug !== undefined && slug.length > 0;
+    const displaySlug = isManuallySet ? slug : slugifyPreview(title ?? '');
+
     function confirmSlugEdit() {
         setIsEditingSlug(false);
     }
@@ -61,7 +68,7 @@ export function OfferingForm({ initialValues, onSubmit, isSubmitting }: Offering
     // keeps auto-regenerating when the title changes (see OfferingsService.UpdateAsync).
     function submitWithSlugPolicy(values: OfferingFormData) {
         const payload = { ...values };
-        if (!dirtyFields.slug) {
+        if (!isManuallySet) {
             delete payload.slug;
         }
         onSubmit(payload);
@@ -84,13 +91,16 @@ export function OfferingForm({ initialValues, onSubmit, isSubmitting }: Offering
             </div>
 
             <div className="space-y-2">
-                <Label htmlFor="offering-slug">{t('offerings.form.slugLabel')}</Label>
                 {isEditingSlug ? (
-                    <div className="flex items-center gap-2">
+                    <div className="flex items-center gap-2 text-sm">
+                        <Label htmlFor="offering-slug" className="text-muted-foreground">
+                            {t('offerings.form.slugLabel')}:
+                        </Label>
                         <Input
                             id="offering-slug"
                             data-testid="offering-slug"
                             autoFocus
+                            className="h-8 max-w-xs"
                             aria-invalid={errors.slug !== undefined}
                             {...register('slug')}
                         />
@@ -116,22 +126,20 @@ export function OfferingForm({ initialValues, onSubmit, isSubmitting }: Offering
                         </Button>
                     </div>
                 ) : (
-                    <div className="flex items-center gap-2">
-                        <code
-                            data-testid="offering-slug-display"
-                            className="font-mono text-sm text-muted-foreground"
-                        >
-                            {slug && slug.length > 0 ? slug : t('offerings.form.slugAutoHint')}
+                    <div className="flex items-center gap-2 text-sm">
+                        <span className="text-muted-foreground">{t('offerings.form.slugLabel')}:</span>
+                        <code data-testid="offering-slug-display" className="font-mono">
+                            {displaySlug.length > 0 ? displaySlug : t('offerings.form.slugAutoHint')}
                         </code>
                         <Button
                             type="button"
-                            variant="ghost"
-                            size="icon"
+                            variant="link"
+                            size="sm"
+                            className="h-auto p-0"
                             data-testid="offering-slug-edit"
-                            aria-label={t('offerings.form.editSlugButton')}
                             onClick={() => setIsEditingSlug(true)}
                         >
-                            <Pencil className="size-4" />
+                            {t('offerings.form.editSlugButton')}
                         </Button>
                     </div>
                 )}
diff --git a/frontend/src/features/offerings/pages/OfferingFormPage.test.tsx b/frontend/src/features/offerings/pages/OfferingFormPage.test.tsx
index 69ca344..29fb522 100644
--- a/frontend/src/features/offerings/pages/OfferingFormPage.test.tsx
+++ b/frontend/src/features/offerings/pages/OfferingFormPage.test.tsx
@@ -63,6 +63,35 @@ describe('OfferingFormPage', () => {
         expect(screen.getByTestId('offering-slug-display')).toHaveTextContent('custom-slug');
     });
 
+    it('live-updates the slug preview as the title is typed, until manually overridden', async () => {
+        mockAuthenticated();
+        renderApp('/offerings/new');
+
+        await screen.findByTestId('offering-form-submit', {}, { timeout: 10000 });
+
+        await userEvent.type(screen.getByTestId('offering-title'), 'Mijn Nieuwe Pakket');
+        expect(screen.getByTestId('offering-slug-display')).toHaveTextContent('mijn-nieuwe-pakket');
+
+        await userEvent.type(screen.getByTestId('offering-title'), '!');
+        expect(screen.getByTestId('offering-slug-display')).toHaveTextContent('mijn-nieuwe-pakket');
+    });
+
+    it('stops tracking the title once the slug is manually set, even if the title changes further', async () => {
+        mockAuthenticated();
+        renderApp('/offerings/aaaaaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa/edit');
+
+        await screen.findByTestId('offering-title', {}, { timeout: 10000 });
+        await userEvent.click(screen.getByTestId('offering-slug-edit'));
+        await userEvent.clear(screen.getByTestId('offering-slug'));
+        await userEvent.type(screen.getByTestId('offering-slug'), 'manually-set');
+        await userEvent.click(screen.getByTestId('offering-slug-confirm'));
+
+        await userEvent.clear(screen.getByTestId('offering-title'));
+        await userEvent.type(screen.getByTestId('offering-title'), 'Compleet Andere Titel');
+
+        expect(screen.getByTestId('offering-slug-display')).toHaveTextContent('manually-set');
+    });
+
     it('reverts the slug when the inline edit is cancelled', async () => {
         mockAuthenticated();
         renderApp('/offerings/aaaaaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa/edit');
diff --git a/frontend/src/i18n/locales/en/translation.json b/frontend/src/i18n/locales/en/translation.json
index 8b0bb8e..e6165c0 100644
--- a/frontend/src/i18n/locales/en/translation.json
+++ b/frontend/src/i18n/locales/en/translation.json
@@ -265,7 +265,7 @@
             "titleLabel": "Title",
             "slugLabel": "Slug",
             "slugAutoHint": "Auto-generated from the title",
-            "editSlugButton": "Edit slug",
+            "editSlugButton": "Edit",
             "confirmSlugButton": "Confirm slug",
             "cancelSlugEditButton": "Cancel slug edit",
             "descriptionLabel": "Description",
diff --git a/frontend/src/i18n/locales/nl/translation.json b/frontend/src/i18n/locales/nl/translation.json
index 149a05e..7dc00f6 100644
--- a/frontend/src/i18n/locales/nl/translation.json
+++ b/frontend/src/i18n/locales/nl/translation.json
@@ -265,7 +265,7 @@
             "titleLabel": "Titel",
             "slugLabel": "Slug",
             "slugAutoHint": "Wordt automatisch gegenereerd uit de titel",
-            "editSlugButton": "Slug aanpassen",
+            "editSlugButton": "Aanpassen",
             "confirmSlugButton": "Slug bevestigen",
             "cancelSlugEditButton": "Slug-bewerking annuleren",
             "descriptionLabel": "Beschrijving",
diff --git a/frontend/src/lib/slugify.ts b/frontend/src/lib/slugify.ts
new file mode 100644
index 0000000..88a28a8
--- /dev/null
+++ b/frontend/src/lib/slugify.ts
@@ -0,0 +1,12 @@
+/**
+ * Client-side mirror of the backend's Slugifier (SlpModularCms.Modules.Offerings.Services.Slugifier)
+ * — used only for a live preview while typing. The backend remains the source of truth and
+ * re-normalizes on save, so drift here is a display nit, not a correctness bug.
+ */
+export function slugifyPreview(value: string): string {
+    const withoutDiacritics = value.normalize('NFD').replace(/[̀-ͯ]/g, '');
+    return withoutDiacritics
+        .toLowerCase()
+        .replace(/[^a-z0-9]+/g, '-')
+        .replace(/^-+|-+$/g, '');
+}

From 927957f04fb3f61418871f4d40dc7c94250cc522 Mon Sep 17 00:00:00 2001
From: Sluijsens <bdslop@gmail.com>
Date: Tue, 4 Aug 2026 15:58:55 +0200
Subject: [PATCH 4/4] Herstel potlood-icoon voor de aanpassen-knop bij slug

Consistent met de confirm/cancel-knoppen ernaast (ghost icon buttons)
in plaats van de tekst-linkknop.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 .../src/features/offerings/components/OfferingForm.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/frontend/src/features/offerings/components/OfferingForm.tsx b/frontend/src/features/offerings/components/OfferingForm.tsx
index a017d3b..11d8124 100644
--- a/frontend/src/features/offerings/components/OfferingForm.tsx
+++ b/frontend/src/features/offerings/components/OfferingForm.tsx
@@ -2,7 +2,7 @@ import { useState } from 'react';
 import { useForm, useWatch } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useTranslation } from 'react-i18next';
-import { Check, Plus, Trash2, X } from 'lucide-react';
+import { Check, Pencil, Plus, Trash2, X } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
@@ -133,13 +133,13 @@ export function OfferingForm({ initialValues, onSubmit, isSubmitting }: Offering
                         </code>
                         <Button
                             type="button"
-                            variant="link"
-                            size="sm"
-                            className="h-auto p-0"
+                            variant="ghost"
+                            size="icon"
                             data-testid="offering-slug-edit"
+                            aria-label={t('offerings.form.editSlugButton')}
                             onClick={() => setIsEditingSlug(true)}
                         >
-                            {t('offerings.form.editSlugButton')}
+                            <Pencil className="size-4" />
                         </Button>
                     </div>
                 )}