feat: polished admin UI styles + email channels admin CRUD

- Extract inline styles to wwwroot/css/admin.css - Bootstrap Icons for nav and buttons - Styled page headers, table, empty state, readonly fields - Email Channels admin: list, create, edit, delete - GetAllEmailChannelsQuery + handler - AdminChannelsController with full CRUD - form id + form= attribute pattern for EditorLayout footer buttons Ref: IT-628 Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
2026-05-02 02:43:59 +03:00
parent 855d0862f9
commit c90b07386d
13 changed files with 706 additions and 30 deletions
@@ -4,6 +4,7 @@ namespace HrynCo.NotificationService.DAL.Abstract.Repositories;

 public interface IEmailChannelRepository
 {
+    Task<IReadOnlyList<EmailChannel>> GetAllAsync(CancellationToken ct = default);
    Task<IReadOnlyList<EmailChannel>> GetByServiceAsync(string serviceName, CancellationToken ct = default);
    Task<EmailChannel?> GetByIdAsync(Guid id, CancellationToken ct = default);
    Task AddAsync(EmailChannel channel, CancellationToken ct = default);
@@ -13,6 +13,16 @@ internal sealed class EmailChannelRepository : EfRepository<EmailChannelEntity>,
    {
    }

+    public async Task<IReadOnlyList<EmailChannel>> GetAllAsync(CancellationToken ct = default)
+    {
+        var entities = await DbSet
+            .OrderBy(x => x.ServiceName)
+            .ThenBy(x => x.Priority)
+            .ToListAsync(ct);
+
+        return entities.Select(MapToDomain).ToList();
+    }
+
    public async Task<IReadOnlyList<EmailChannel>> GetByServiceAsync(string serviceName, CancellationToken ct = default)
    {
        var entities = await DbSet
@@ -0,0 +1,30 @@
+using HrynCo.NotificationService.DAL.Abstract;
+using HrynCo.NotificationService.DAL.Abstract.Providers;
+using HrynCo.NotificationService.DAL.Abstract.Repositories;
+using HrynCo.NotificationService.Services.Core;
+using HrynCo.NotificationService.Services.Logging;
+using static HrynCo.NotificationService.Services.Core.ServiceResultHelper;
+
+namespace HrynCo.NotificationService.Services.EmailChannels.GetAll;
+
+internal sealed class GetAllEmailChannelsHandler
+    : RequestHandler<GetAllEmailChannelsQuery, ServiceResult<IReadOnlyList<EmailChannel>>>
+{
+    private readonly IEmailChannelRepository _channels;
+
+    public GetAllEmailChannelsHandler(
+        IContextualSerilogLogger<GetAllEmailChannelsQuery> logger,
+        IUnitOfWork unitOfWork,
+        IEmailChannelRepository channels)
+        : base(logger, unitOfWork)
+    {
+        _channels = channels;
+    }
+
+    protected override async Task<ServiceResult<IReadOnlyList<EmailChannel>>> DoOnHandle(
+        GetAllEmailChannelsQuery request, CancellationToken cancellationToken)
+    {
+        var channels = await _channels.GetAllAsync(cancellationToken);
+        return Success(channels);
+    }
+}
@@ -0,0 +1,7 @@
+using HrynCo.NotificationService.DAL.Abstract.Providers;
+using MediatR;
+using HrynCo.NotificationService.Services.Core;
+
+namespace HrynCo.NotificationService.Services.EmailChannels.GetAll;
+
+public sealed record GetAllEmailChannelsQuery : IRequest<ServiceResult<IReadOnlyList<EmailChannel>>>;
@@ -0,0 +1,153 @@
+using HrynCo.NotificationService.DAL.Abstract.Providers;
+using HrynCo.NotificationService.Services.EmailChannels.Create;
+using HrynCo.NotificationService.Services.EmailChannels.Delete;
+using HrynCo.NotificationService.Services.EmailChannels.Get;
+using HrynCo.NotificationService.Services.EmailChannels.GetAll;
+using HrynCo.NotificationService.Services.EmailChannels.Update;
+using HrynCo.NotificationService.Web.Controllers.Admin.ViewModels;
+using MediatR;
+using Microsoft.AspNetCore.Mvc;
+
+namespace HrynCo.NotificationService.Web.Controllers.Admin;
+
+[Route("admin/channels")]
+public class AdminChannelsController : Controller
+{
+    private readonly IMediator _mediator;
+
+    public AdminChannelsController(IMediator mediator)
+    {
+        _mediator = mediator;
+    }
+
+    // GET /admin/channels
+    [HttpGet("")]
+    public async Task<IActionResult> Index(CancellationToken ct)
+    {
+        var result = await _mediator.Send(new GetAllEmailChannelsQuery(), ct);
+        if (!result.IsSuccess)
+        {
+            ModelState.AddModelError("", result.Error?.Message ?? "Failed to load channels.");
+            return View(Array.Empty<EmailChannel>());
+        }
+
+        return View(result.Result);
+    }
+
+    // GET /admin/channels/create
+    [HttpGet("create")]
+    public IActionResult Create()
+    {
+        return View("Edit", new EmailChannelEditViewModel());
+    }
+
+    // GET /admin/channels/{id}
+    [HttpGet("{id:guid}")]
+    public async Task<IActionResult> Edit(Guid id, CancellationToken ct)
+    {
+        var result = await _mediator.Send(new GetEmailChannelQuery(id), ct);
+        if (!result.IsSuccess || result.Result is null)
+            return NotFound();
+
+        var channel = result.Result;
+        var smtp = channel.Settings as SmtpChannelSettings ?? new SmtpChannelSettings
+        {
+            Host = "", Username = "", Password = "",
+            FromEmail = "", FromName = "", AppDisplayName = "", AppBaseUrl = ""
+        };
+
+        var vm = new EmailChannelEditViewModel
+        {
+            Id = channel.Id,
+            ServiceName = channel.ServiceName,
+            Priority = channel.Priority,
+            EmailChannelType = channel.EmailChannelType,
+            DailyLimit = channel.DailyLimit,
+            MonthlyLimit = channel.MonthlyLimit,
+            WarnThresholdPercent = channel.WarnThresholdPercent,
+            IsActive = channel.IsActive,
+            Host = smtp.Host,
+            Port = smtp.Port,
+            Username = smtp.Username,
+            Password = smtp.Password,
+            UseSsl = smtp.UseSsl,
+            FromEmail = smtp.FromEmail,
+            FromName = smtp.FromName,
+            AppDisplayName = smtp.AppDisplayName,
+            AppBaseUrl = smtp.AppBaseUrl
+        };
+
+        return View(vm);
+    }
+
+    // POST /admin/channels/save
+    [HttpPost("save")]
+    [ValidateAntiForgeryToken]
+    public async Task<IActionResult> Save(EmailChannelEditViewModel model, CancellationToken ct)
+    {
+        if (!ModelState.IsValid)
+            return View("Edit", model);
+
+        var smtpSettings = new SmtpChannelSettings
+        {
+            Host = model.Host,
+            Port = model.Port,
+            Username = model.Username,
+            Password = model.Password,
+            UseSsl = model.UseSsl,
+            FromEmail = model.FromEmail,
+            FromName = model.FromName,
+            AppDisplayName = model.AppDisplayName,
+            AppBaseUrl = model.AppBaseUrl
+        };
+
+        if (model.IsNew)
+        {
+            var command = new CreateEmailChannelCommand(
+                model.ServiceName,
+                model.Priority,
+                EmailChannelType.Smtp,
+                smtpSettings,
+                model.DailyLimit,
+                model.MonthlyLimit,
+                model.WarnThresholdPercent,
+                model.IsActive);
+
+            var result = await _mediator.Send(command, ct);
+            if (!result.IsSuccess)
+            {
+                ModelState.AddModelError("", result.Error?.Message ?? "Failed to create channel.");
+                return View("Edit", model);
+            }
+        }
+        else
+        {
+            var command = new UpdateEmailChannelCommand(
+                model.Id,
+                model.Priority,
+                smtpSettings,
+                model.DailyLimit,
+                model.MonthlyLimit,
+                model.WarnThresholdPercent,
+                model.IsActive);
+
+            var result = await _mediator.Send(command, ct);
+            if (!result.IsSuccess)
+            {
+                ModelState.AddModelError("", result.Error?.Message ?? "Failed to update channel.");
+                return View("Edit", model);
+            }
+        }
+
+        return RedirectToAction(nameof(Index));
+    }
+
+    // POST /admin/channels/{id}/delete
+    [HttpPost("{id:guid}/delete")]
+    [ValidateAntiForgeryToken]
+    public async Task<IActionResult> Delete(Guid id, CancellationToken ct)
+    {
+        await _mediator.Send(new DeleteEmailChannelCommand(id), ct);
+        return RedirectToAction(nameof(Index));
+    }
+}
@@ -0,0 +1,57 @@
+using System.ComponentModel.DataAnnotations;
+using HrynCo.NotificationService.DAL.Abstract.Providers;
+
+namespace HrynCo.NotificationService.Web.Controllers.Admin.ViewModels;
+
+public class EmailChannelEditViewModel
+{
+    public Guid Id { get; set; }
+
+    // ── Channel fields ─────────────────────────────────────────────────
+    [Required]
+    public string ServiceName { get; set; } = "";
+
+    public int Priority { get; set; } = 1;
+
+    public EmailChannelType EmailChannelType { get; set; } = EmailChannelType.Smtp;
+
+    public int? DailyLimit { get; set; }
+
+    public int? MonthlyLimit { get; set; }
+
+    [Range(1, 100)]
+    public int WarnThresholdPercent { get; set; } = 90;
+
+    public bool IsActive { get; set; } = true;
+
+    // ── SMTP Settings ──────────────────────────────────────────────────
+    [Required]
+    public string Host { get; set; } = "";
+
+    [Range(1, 65535)]
+    public int Port { get; set; } = 587;
+
+    [Required]
+    public string Username { get; set; } = "";
+
+    [Required]
+    public string Password { get; set; } = "";
+
+    public bool UseSsl { get; set; } = true;
+
+    [Required, EmailAddress]
+    public string FromEmail { get; set; } = "";
+
+    [Required]
+    public string FromName { get; set; } = "";
+
+    [Required]
+    public string AppDisplayName { get; set; } = "";
+
+    [Required]
+    public string AppBaseUrl { get; set; } = "";
+
+    // ── Computed ───────────────────────────────────────────────────────
+    public bool IsNew => Id == Guid.Empty;
+    public string PageTitle => IsNew ? "Create Channel" : "Edit Channel";
+}
@@ -0,0 +1,141 @@
+@using HrynCo.NotificationService.DAL.Abstract.Providers
+@using HrynCo.NotificationService.Web.Controllers.Admin.ViewModels
+@model EmailChannelEditViewModel
+@{
+    Layout = "~/Views/Shared/_EditorLayout.cshtml";
+    ViewData["Title"] = Model.PageTitle;
+    ViewData["EditorTitle"] = Model.PageTitle;
+}
+
+<form id="channelForm" asp-action="Save" asp-controller="AdminChannels" method="post">
+    @Html.AntiForgeryToken()
+    <input asp-for="Id" type="hidden" />
+
+    @if (!ViewData.ModelState.IsValid)
+    {
+        <div class="alert alert-danger mb-3">
+            @foreach (var error in ViewData.ModelState.Values.SelectMany(v => v.Errors))
+            {
+                <div>@error.ErrorMessage</div>
+            }
+        </div>
+    }
+
+    @* Channel Settings section *@
+    <div class="form-section-title"><i class="bi bi-sliders me-1"></i> Channel Settings</div>
+
+    <div class="mb-4">
+        <label asp-for="ServiceName" class="form-label fw-semibold">Service Name</label>
+        <input asp-for="ServiceName" class="form-control" readonly="@(!Model.IsNew)" />
+        <span asp-validation-for="ServiceName" class="text-danger small"></span>
+    </div>
+
+    <div class="row mb-4">
+        <div class="col-md-4">
+            <label asp-for="Priority" class="form-label fw-semibold">Priority</label>
+            <input asp-for="Priority" class="form-control" type="number" min="1" />
+            <span asp-validation-for="Priority" class="text-danger small"></span>
+        </div>
+        <div class="col-md-4">
+            <label asp-for="EmailChannelType" class="form-label fw-semibold">Channel Type</label>
+            <select asp-for="EmailChannelType" class="form-select"
+                    asp-items="Html.GetEnumSelectList<EmailChannelType>()">
+            </select>
+        </div>
+        <div class="col-md-4 d-flex align-items-end">
+            <div class="form-check mb-2">
+                <input asp-for="IsActive" class="form-check-input" type="checkbox" />
+                <label asp-for="IsActive" class="form-check-label fw-semibold">Active</label>
+            </div>
+        </div>
+    </div>
+
+    <div class="row mb-4">
+        <div class="col-md-4">
+            <label asp-for="DailyLimit" class="form-label fw-semibold">Daily Limit</label>
+            <input asp-for="DailyLimit" class="form-control" type="number" min="0" placeholder="Unlimited" />
+            <span asp-validation-for="DailyLimit" class="text-danger small"></span>
+        </div>
+        <div class="col-md-4">
+            <label asp-for="MonthlyLimit" class="form-label fw-semibold">Monthly Limit</label>
+            <input asp-for="MonthlyLimit" class="form-control" type="number" min="0" placeholder="Unlimited" />
+            <span asp-validation-for="MonthlyLimit" class="text-danger small"></span>
+        </div>
+        <div class="col-md-4">
+            <label asp-for="WarnThresholdPercent" class="form-label fw-semibold">Warn Threshold (%)</label>
+            <input asp-for="WarnThresholdPercent" class="form-control" type="number" min="1" max="100" />
+            <span asp-validation-for="WarnThresholdPercent" class="text-danger small"></span>
+        </div>
+    </div>
+
+    @* SMTP Settings section *@
+    <div class="form-section-title mt-4"><i class="bi bi-envelope-at me-1"></i> SMTP Settings</div>
+
+    <div class="row mb-4">
+        <div class="col-md-9">
+            <label asp-for="Host" class="form-label fw-semibold">Host</label>
+            <input asp-for="Host" class="form-control" placeholder="smtp.example.com" />
+            <span asp-validation-for="Host" class="text-danger small"></span>
+        </div>
+        <div class="col-md-3">
+            <label asp-for="Port" class="form-label fw-semibold">Port</label>
+            <input asp-for="Port" class="form-control" type="number" min="1" max="65535" />
+            <span asp-validation-for="Port" class="text-danger small"></span>
+        </div>
+    </div>
+
+    <div class="row mb-4">
+        <div class="col-md-6">
+            <label asp-for="Username" class="form-label fw-semibold">Username</label>
+            <input asp-for="Username" class="form-control" autocomplete="off" />
+            <span asp-validation-for="Username" class="text-danger small"></span>
+        </div>
+        <div class="col-md-6">
+            <label asp-for="Password" class="form-label fw-semibold">Password</label>
+            <input asp-for="Password" class="form-control" type="password" autocomplete="new-password" />
+            <span asp-validation-for="Password" class="text-danger small"></span>
+        </div>
+    </div>
+
+    <div class="mb-4">
+        <div class="form-check">
+            <input asp-for="UseSsl" class="form-check-input" type="checkbox" />
+            <label asp-for="UseSsl" class="form-check-label fw-semibold">Use SSL/TLS</label>
+        </div>
+    </div>
+
+    <div class="row mb-4">
+        <div class="col-md-6">
+            <label asp-for="FromEmail" class="form-label fw-semibold">From Email</label>
+            <input asp-for="FromEmail" class="form-control" type="email" placeholder="noreply@example.com" />
+            <span asp-validation-for="FromEmail" class="text-danger small"></span>
+        </div>
+        <div class="col-md-6">
+            <label asp-for="FromName" class="form-label fw-semibold">From Name</label>
+            <input asp-for="FromName" class="form-control" placeholder="My Service" />
+            <span asp-validation-for="FromName" class="text-danger small"></span>
+        </div>
+    </div>
+
+    <div class="row mb-4">
+        <div class="col-md-6">
+            <label asp-for="AppDisplayName" class="form-label fw-semibold">App Display Name</label>
+            <input asp-for="AppDisplayName" class="form-control" />
+            <span asp-validation-for="AppDisplayName" class="text-danger small"></span>
+        </div>
+        <div class="col-md-6">
+            <label asp-for="AppBaseUrl" class="form-label fw-semibold">App Base URL</label>
+            <input asp-for="AppBaseUrl" class="form-control" placeholder="https://example.com" />
+            <span asp-validation-for="AppBaseUrl" class="text-danger small"></span>
+        </div>
+    </div>
+
+    @section FormActions {
+        <button type="submit" form="channelForm" class="btn btn-primary">
+            <i class="bi bi-floppy me-1"></i> Save
+        </button>
+        <a href="/admin/channels" class="btn btn-secondary">
+            <i class="bi bi-x-lg me-1"></i> Cancel
+        </a>
+    }
+</form>
@@ -0,0 +1,93 @@
+@using HrynCo.NotificationService.DAL.Abstract.Providers
+@model IReadOnlyList<EmailChannel>
+@{
+    ViewData["Title"] = "Email Channels";
+}
+
+<div class="page-header">
+    <h2><i class="bi bi-broadcast"></i> Email Channels</h2>
+    <a href="/admin/channels/create" class="btn btn-primary btn-sm">
+        <i class="bi bi-plus-lg me-1"></i> Create New Channel
+    </a>
+</div>
+
+@if (!ViewData.ModelState.IsValid)
+{
+    <div class="alert alert-danger">
+        @foreach (var error in ViewData.ModelState.Values.SelectMany(v => v.Errors))
+        {
+            <div>@error.ErrorMessage</div>
+        }
+    </div>
+}
+
+@if (Model is null || Model.Count == 0)
+{
+    <div class="card shadow-sm table-card">
+        <div class="empty-state">
+            <i class="bi bi-broadcast"></i>
+            <p class="mt-2 mb-0">No email channels found.</p>
+            <a href="/admin/channels/create" class="btn btn-primary btn-sm mt-3">
+                <i class="bi bi-plus-lg me-1"></i> Create First Channel
+            </a>
+        </div>
+    </div>
+}
+else
+{
+    <div class="card shadow-sm table-card">
+        <div class="table-responsive">
+            <table class="table table-hover table-sm mb-0">
+                <thead class="table-dark">
+                    <tr>
+                        <th>Service Name</th>
+                        <th>Type</th>
+                        <th>Priority</th>
+                        <th>Status</th>
+                        <th>Daily Limit</th>
+                        <th>Monthly Limit</th>
+                        <th class="text-end">Actions</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    @foreach (var c in Model)
+                    {
+                        <tr>
+                            <td>@c.ServiceName</td>
+                            <td>@c.EmailChannelType</td>
+                            <td>@c.Priority</td>
+                            <td>
+                                @if (c.IsActive)
+                                {
+                                    <span class="badge bg-success">Active</span>
+                                }
+                                else
+                                {
+                                    <span class="badge bg-secondary text-muted">Inactive</span>
+                                }
+                            </td>
+                            <td>@(c.DailyLimit.HasValue ? c.DailyLimit.ToString() : "—")</td>
+                            <td>@(c.MonthlyLimit.HasValue ? c.MonthlyLimit.ToString() : "—")</td>
+                            <td class="text-end">
+                                <a href="/admin/channels/@c.Id"
+                                   class="btn btn-sm btn-outline-primary me-1">
+                                    <i class="bi bi-pencil"></i> Edit
+                                </a>
+                                <form method="post"
+                                      action="/admin/channels/@c.Id/delete"
+                                      class="d-inline">
+                                    @Html.AntiForgeryToken()
+                                    <button type="submit"
+                                            class="btn btn-sm btn-outline-danger"
+                                            onclick="return confirm('Delete this channel?')">
+                                        <i class="bi bi-trash"></i> Delete
+                                    </button>
+                                </form>
+                            </td>
+                        </tr>
+                    }
+                </tbody>
+            </table>
+        </div>
+    </div>
+}
@@ -21,42 +21,42 @@
        </div>
    }

-    <div class="mb-3">
+    <div class="mb-4">
        <label asp-for="ServiceName" class="form-label fw-semibold">Service Name</label>
        <input asp-for="ServiceName" class="form-control" readonly="@(!Model.IsNew)" />
        <span asp-validation-for="ServiceName" class="text-danger small"></span>
    </div>

-    <div class="mb-3">
+    <div class="mb-4">
        <label asp-for="Key" class="form-label fw-semibold">Key</label>
        <input asp-for="Key" class="form-control" readonly="@(!Model.IsNew)" />
        <span asp-validation-for="Key" class="text-danger small"></span>
    </div>

-    <div class="mb-3">
+    <div class="mb-4">
        <label asp-for="LanguageCode" class="form-label fw-semibold">Language Code</label>
        <input asp-for="LanguageCode" class="form-control" readonly="@(!Model.IsNew)" />
        <span asp-validation-for="LanguageCode" class="text-danger small"></span>
    </div>

-    <div class="mb-3">
+    <div class="mb-4">
        <label asp-for="Subject" class="form-label fw-semibold">Subject</label>
        <input asp-for="Subject" class="form-control" />
        <span asp-validation-for="Subject" class="text-danger small"></span>
    </div>

-    <div class="mb-3">
+    <div class="mb-4">
        <label asp-for="HtmlBody" class="form-label fw-semibold">HTML Body</label>
        <textarea asp-for="HtmlBody" class="form-control font-monospace" rows="10"></textarea>
        <span asp-validation-for="HtmlBody" class="text-danger small"></span>
    </div>

-    <div class="mb-3">
+    <div class="mb-4">
        <label asp-for="TextBody" class="form-label fw-semibold">Text Body</label>
        <textarea asp-for="TextBody" class="form-control font-monospace" rows="5"></textarea>
    </div>

-    <div class="mb-3">
+    <div class="mb-4">
        <label asp-for="VariablesJson" class="form-label fw-semibold">Variables (JSON)</label>
        <textarea asp-for="VariablesJson" class="form-control font-monospace" rows="4"
                  placeholder='[{"name":"UserName","required":true}]'></textarea>
@@ -65,7 +65,11 @@
    </div>

    @section FormActions {
-        <button type="submit" form="templateForm" class="btn btn-primary">💾 Save</button>
-        <a href="/admin/templates" class="btn btn-secondary">✖ Cancel</a>
+        <button type="submit" form="templateForm" class="btn btn-primary">
+            <i class="bi bi-floppy me-1"></i> Save
+        </button>
+        <a href="/admin/templates" class="btn btn-secondary">
+            <i class="bi bi-x-lg me-1"></i> Cancel
+        </a>
    }
 </form>
@@ -4,9 +4,11 @@
    ViewData["Title"] = "Email Templates";
 }

-<div class="d-flex justify-content-between align-items-center mb-4">
-    <h2 class="mb-0">📋 Email Templates</h2>
-    <a href="/admin/templates/create" class="btn btn-primary">+ Create New Template</a>
+<div class="page-header">
+    <h2><i class="bi bi-envelope-paper"></i> Email Templates</h2>
+    <a href="/admin/templates/create" class="btn btn-primary btn-sm">
+        <i class="bi bi-plus-lg me-1"></i> Create New Template
+    </a>
 </div>

@if (!ViewData.ModelState.IsValid)
@@ -21,13 +23,21 @@

@if (Model is null || Model.Count == 0)
 {
-    <div class="alert alert-info">No email templates found.</div>
+    <div class="card shadow-sm table-card">
+        <div class="empty-state">
+            <i class="bi bi-envelope-paper"></i>
+            <p class="mt-2 mb-0">No email templates found.</p>
+            <a href="/admin/templates/create" class="btn btn-primary btn-sm mt-3">
+                <i class="bi bi-plus-lg me-1"></i> Create First Template
+            </a>
+        </div>
+    </div>
 }
 else
 {
-    <div class="card shadow-sm">
+    <div class="card shadow-sm table-card">
        <div class="table-responsive">
-            <table class="table table-hover mb-0">
+            <table class="table table-hover table-sm mb-0">
                <thead class="table-dark">
                    <tr>
                        <th>Service Name</th>
@@ -47,7 +57,9 @@ else
                            <td>@t.Subject</td>
                            <td class="text-end">
                                <a href="/admin/templates/@t.ServiceName/@t.Key/@t.LanguageCode"
-                                   class="btn btn-sm btn-outline-primary me-1">✏️ Edit</a>
+                                   class="btn btn-sm btn-outline-primary me-1">
+                                    <i class="bi bi-pencil"></i> Edit
+                                </a>
                                <form method="post"
                                      action="/admin/templates/@t.ServiceName/@t.Key/@t.LanguageCode/delete"
                                      class="d-inline">
@@ -55,7 +67,7 @@ else
                                    <button type="submit"
                                            class="btn btn-sm btn-outline-danger"
                                            onclick="return confirm('Delete this template?')">
-                                        🗑️ Delete
+                                        <i class="bi bi-trash"></i> Delete
                                    </button>
                                </form>
                            </td>
@@ -3,7 +3,10 @@
 }
 <div class="card shadow-sm">
    <div class="card-header bg-primary text-white">
-        <h5 class="mb-0">@ViewData["EditorTitle"]</h5>
+        <h5 class="mb-0 editor-card-header">
+            <i class="bi bi-pencil-square"></i>
+            @ViewData["EditorTitle"]
+        </h5>
    </div>
    <div class="card-body">
        @RenderBody()
@@ -13,32 +13,30 @@
          rel="stylesheet"
          integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
          crossorigin="anonymous" />
-    <style>
-        body { background-color: #f8f9fa; }
-        .sidebar { min-height: calc(100vh - 56px); background-color: #212529; padding-top: 1rem; }
-        .sidebar .nav-link { color: #adb5bd; border-radius: .375rem; margin-bottom: .25rem; }
-        .sidebar .nav-link:hover { color: #fff; background-color: #343a40; }
-        .sidebar .nav-link.active { color: #fff; background-color: #0d6efd; }
-        .main-content { padding: 2rem; }
-    </style>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"
+          rel="stylesheet" />
+    <link href="/css/admin.css" rel="stylesheet" />
 </head>
 <body>
-    <nav class="navbar navbar-dark bg-dark px-3">
-        <a class="navbar-brand fw-bold" href="/">📧 Notification Service</a>
+    <nav class="navbar navbar-dark bg-dark px-3 admin-navbar">
+        <a class="navbar-brand fw-bold" href="/">
+            <i class="bi bi-bell-fill me-1"></i> Notification Service
+        </a>
    </nav>

    <div class="container-fluid">
        <div class="row">
            <nav class="col-md-2 d-none d-md-block sidebar py-3">
+                <div class="sidebar-section-label">Management</div>
                <ul class="nav flex-column px-2">
                    <li class="nav-item">
                        <a class="nav-link @(isTemplates ? "active" : "")" href="/admin/templates">
-                            📋 Email Templates
+                            <i class="bi bi-envelope-paper"></i> Email Templates
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link @(isChannels ? "active" : "")" href="/admin/channels">
-                            📡 Email Channels
+                            <i class="bi bi-broadcast"></i> Email Channels
                        </a>
                    </li>
                </ul>
@@ -0,0 +1,167 @@
+/* ========================================================
+   Notification Service — Admin Panel Styles
+   ======================================================== */
+
+:root {
+    --sidebar-bg: #1a1d23;
+    --sidebar-width: 220px;
+    --sidebar-active: #0d6efd;
+    --sidebar-muted: #6c757d;
+    --navbar-border: rgba(255, 255, 255, 0.08);
+}
+
+/* ── Body ─────────────────────────────────────────────── */
+body {
+    background-color: #f0f2f5;
+}
+
+/* ── Navbar ───────────────────────────────────────────── */
+.admin-navbar {
+    border-bottom: 1px solid var(--navbar-border);
+    box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
+}
+
+.admin-navbar .navbar-brand {
+    font-size: 1rem;
+    letter-spacing: .02em;
+}
+
+/* ── Sidebar ──────────────────────────────────────────── */
+.sidebar {
+    min-height: calc(100vh - 56px);
+    background-color: var(--sidebar-bg);
+    padding-top: 1.25rem;
+    border-right: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+.sidebar-section-label {
+    font-size: .65rem;
+    font-weight: 700;
+    letter-spacing: .12em;
+    text-transform: uppercase;
+    color: var(--sidebar-muted);
+    padding: .5rem 1rem .25rem;
+    margin-bottom: .1rem;
+}
+
+.sidebar .nav-link {
+    color: #adb5bd;
+    border-radius: .375rem;
+    margin-bottom: .2rem;
+    padding: .5rem .75rem;
+    font-size: .875rem;
+    display: flex;
+    align-items: center;
+    gap: .5rem;
+    border-left: 3px solid transparent;
+    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
+}
+
+.sidebar .nav-link:hover {
+    color: #fff;
+    background-color: rgba(255, 255, 255, 0.07);
+    border-left-color: rgba(255, 255, 255, 0.2);
+}
+
+.sidebar .nav-link.active {
+    color: #fff;
+    background-color: rgba(13, 110, 253, 0.18);
+    border-left-color: var(--sidebar-active);
+    font-weight: 600;
+}
+
+.sidebar .nav-link .bi {
+    font-size: 1rem;
+    flex-shrink: 0;
+}
+
+/* ── Main content ─────────────────────────────────────── */
+.main-content {
+    padding: 1.5rem 2rem;
+}
+
+/* ── Page header ──────────────────────────────────────── */
+.page-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding-bottom: .875rem;
+    margin-bottom: 1.5rem;
+    border-bottom: 2px solid #dee2e6;
+}
+
+.page-header h2 {
+    margin: 0;
+    font-size: 1.4rem;
+    font-weight: 700;
+    color: #212529;
+    display: flex;
+    align-items: center;
+    gap: .5rem;
+}
+
+/* ── Table ────────────────────────────────────────────── */
+.table-card {
+    border-radius: .5rem;
+    overflow: hidden;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
+}
+
+.table tbody tr td {
+    vertical-align: middle;
+}
+
+/* ── Empty state ──────────────────────────────────────── */
+.empty-state {
+    text-align: center;
+    padding: 3rem 2rem;
+    color: var(--sidebar-muted);
+}
+
+.empty-state .bi {
+    font-size: 3rem;
+    opacity: .4;
+    display: block;
+    margin-bottom: 1rem;
+}
+
+.empty-state p {
+    font-size: .95rem;
+    margin-bottom: 0;
+}
+
+/* ── Editor card ──────────────────────────────────────── */
+.editor-card-header {
+    display: flex;
+    align-items: center;
+    gap: .5rem;
+}
+
+.editor-card-header .bi {
+    font-size: 1.1rem;
+    opacity: .85;
+}
+
+/* ── Form fields ──────────────────────────────────────── */
+.form-control[readonly] {
+    background-color: #f8f9fa;
+    border-color: #dee2e6;
+    color: #6c757d;
+    cursor: not-allowed;
+}
+
+textarea.form-control {
+    resize: vertical;
+}
+
+/* ── Section divider inside editor card ──────────────── */
+.form-section-title {
+    font-size: .7rem;
+    font-weight: 700;
+    letter-spacing: .1em;
+    text-transform: uppercase;
+    color: var(--sidebar-muted);
+    padding-bottom: .4rem;
+    margin-bottom: 1rem;
+    border-bottom: 1px solid #dee2e6;
+}