refactor(ui/admin): card grid, search, kebab; LDAP scope-rule chips

LdapMappings: flex header, search filter, per-row Edit + kebab Delete,
@key, dropped Site-Scope-Rules cell in favor of a {n rule(s)} badge.

LdapMappingForm: two stacked cards (Mapping then Site Scope Rules);
scope rules render as removable chips with an inline "Add scope rule"
form; create-mode disables the scope card with an explainer; role
select gets form-text help.

DataConnections: <h4> in flex header, Bulk actions dropdown holding
Expand/Collapse, hover-visible kebab on tree nodes mirroring the
right-click context menu, aria-labels, "No connections match the
filter." inline empty state.

DataConnectionForm: Site rendered as readonly plaintext + lock-after-
creation note in edit mode; parallel Primary endpoint / Backup endpoint
headings; "Optional" badge on Backup when null; form-text on
FailoverRetryCount.

ApiKeys: search filter, Status column dropped (state now lives in the
kebab menu label "Disable"/"Enable"), Edit + kebab actions, @key,
aria-labels.

ApiKeyForm: nested card removed; fixed-text Back header; real
clipboard copy via IJSRuntime + toast confirmation.

Test selector fix in DataConnectionFormTests for the new Site
readonly-plaintext rendering.

src/ScadaLink.CentralUI/Components/Pages/Admin/ApiKeyForm.razor

@@ -6,20 +6,31 @@
 @attribute [Authorize(Policy = AuthorizationPolicies.RequireAdmin)]
 @inject IInboundApiRepository InboundApiRepository
 @inject NavigationManager NavigationManager
+@inject IJSRuntime JS
 
 <div class="container-fluid mt-3">
     <div class="d-flex align-items-center mb-3">
-        @if (_saved)
+        <a href="/admin/api-keys" class="btn btn-outline-secondary btn-sm me-2"
-        {
+           aria-label="Back to API Keys">&larr; Back</a>
-            <a href="/admin/api-keys" class="btn btn-outline-secondary btn-sm me-2">&larr; Back to API Keys</a>
+        <span class="text-muted me-2">·</span>
-        }
+        <h4 class="mb-0">
-        else
+            @if (_saved)
-        {
+            {
-            <a href="/admin/api-keys" class="btn btn-outline-secondary btn-sm me-2">&larr; Back</a>
+                @:API Key Created
-        }
+            }
-        <h4 class="mb-0">@(_saved ? "API Key Created" : (_editingKey != null ? "Edit API Key" : "Add API Key"))</h4>
+            else if (IsEditMode)
+            {
+                @:Edit API Key
+            }
+            else
+            {
+                @:Add API Key
+            }
+        </h4>
     </div>
 
+    <ToastNotification @ref="_toast" />
+
     @if (_loading)
     {
         <LoadingSpinner IsLoading="true" />
@@ -42,21 +53,17 @@
     }
     else
     {
-        <div class="card">
+        <div class="mb-2">
-            <div class="card-body">
+            <label class="form-label small">Name</label>
-                <div class="mb-2">
+            <input type="text" class="form-control form-control-sm" @bind="_formName" />
-                    <label class="form-label small">Name</label>
+        </div>
-                    <input type="text" class="form-control form-control-sm" @bind="_formName" />
+        @if (_formError != null)
-                </div>
+        {
-                @if (_formError != null)
+            <div class="text-danger small mt-2">@_formError</div>
-                {
+        }
-                    <div class="text-danger small mt-2">@_formError</div>
+        <div class="mt-3">
-                }
+            <button class="btn btn-success btn-sm me-1" @onclick="SaveKey">Save</button>
-                <div class="mt-3">
+            <button class="btn btn-outline-secondary btn-sm" @onclick="GoBack">Cancel</button>
-                    <button class="btn btn-success btn-sm me-1" @onclick="SaveKey">Save</button>
-                    <button class="btn btn-outline-secondary btn-sm" @onclick="GoBack">Cancel</button>
-                </div>
-            </div>
         </div>
     }
 </div>
@@ -64,6 +71,8 @@
 @code {
     [Parameter] public int? Id { get; set; }
 
+    private bool IsEditMode => _editingKey != null;
+
     private ApiKey? _editingKey;
     private string _formName = string.Empty;
     private string? _formError;
@@ -72,6 +81,8 @@
     private bool _loading = true;
     private bool _saved;
 
+    private ToastNotification _toast = default!;
+
     protected override async Task OnInitializedAsync()
     {
         try
@@ -128,10 +139,18 @@
 
     private void GoBack() => NavigationManager.NavigateTo("/admin/api-keys");
 
-    private void CopyKeyToClipboard()
+    private async Task CopyKeyToClipboard()
     {
-        // Note: JS interop for clipboard would be needed for actual copy.
+        if (_newlyCreatedKeyValue == null) return;
-        // For now the key is displayed for manual copy.
+        try
+        {
+            await JS.InvokeVoidAsync("navigator.clipboard.writeText", _newlyCreatedKeyValue);
+            _toast.ShowSuccess("Copied to clipboard.");
+        }
+        catch
+        {
+            _toast.ShowError("Copy failed.");
+        }
     }
 
     private static string GenerateApiKey()

src/ScadaLink.CentralUI/Components/Pages/Admin/ApiKeys.razor

@@ -13,7 +13,7 @@
     </div>
 
     <ToastNotification @ref="_toast" />
-    <ConfirmDialog @ref="_confirmDialog" />
+    <ConfirmDialog @ref="_confirmDialog" ConfirmButtonClass="btn-danger" />
 
     @if (_loading)
     {
@@ -25,59 +25,75 @@
     }
     else
     {
-        <table class="table table-sm table-striped table-hover">
+        <div class="mb-3" style="max-width: 320px;">
-            <thead class="table-dark">
+            <input class="form-control form-control-sm"
-                <tr>
+                   placeholder="Filter by name…"
-                    <th>ID</th>
+                   @bind="_search" @bind:event="oninput" />
-                    <th>Name</th>
+        </div>
-                    <th>Key Value</th>
+
-                    <th>Status</th>
+        @if (_keys.Count == 0)
-                    <th style="width: 240px;">Actions</th>
+        {
-                </tr>
+            <p class="text-muted text-center">No API keys configured.</p>
-            </thead>
+        }
-            <tbody>
+        else if (!FilteredKeys.Any())
-                @if (_keys.Count == 0)
+        {
-                {
+            <p class="text-muted small">No API keys match the filter.</p>
+        }
+        else
+        {
+            <table class="table table-sm table-striped table-hover">
+                <thead class="table-dark">
                     <tr>
-                        <td colspan="5" class="text-muted text-center">No API keys configured.</td>
+                        <th>ID</th>
+                        <th>Name</th>
+                        <th>Key Value</th>
+                        <th style="width: 160px;">Actions</th>
                     </tr>
-                }
+                </thead>
-                @foreach (var key in _keys)
+                <tbody>
-                {
+                    @foreach (var key in FilteredKeys)
-                    <tr>
+                    {
-                        <td>@key.Id</td>
+                        <tr @key="key.Id">
-                        <td>@key.Name</td>
+                            <td>@key.Id</td>
-                        <td><code>@MaskKeyValue(key.KeyValue)</code></td>
+                            <td>
-                        <td>
+                                @key.Name
-                            @if (key.IsEnabled)
+                                @if (!key.IsEnabled)
-                            {
+                                {
-                                <span class="badge bg-success">Enabled</span>
+                                    <span class="badge bg-secondary ms-1">Disabled</span>
-                            }
+                                }
-                            else
+                            </td>
-                            {
+                            <td><code>@MaskKeyValue(key.KeyValue)</code></td>
-                                <span class="badge bg-secondary">Disabled</span>
+                            <td>
-                            }
+                                <div class="d-flex gap-1">
-                        </td>
+                                    <button class="btn btn-outline-primary btn-sm py-0 px-2"
-                        <td>
+                                            @onclick='() => NavigationManager.NavigateTo($"/admin/api-keys/{key.Id}/edit")'>Edit</button>
-                            <button class="btn btn-outline-primary btn-sm py-0 px-1 me-1"
+                                    <div class="dropdown">
-                                    @onclick='() => NavigationManager.NavigateTo($"/admin/api-keys/{key.Id}/edit")'>Edit</button>
+                                        <button class="btn btn-outline-secondary btn-sm py-0 px-2"
-                            @if (key.IsEnabled)
+                                                data-bs-toggle="dropdown"
-                            {
+                                                aria-label="@($"More actions for {key.Name}")">⋮</button>
-                                <button class="btn btn-outline-warning btn-sm py-0 px-1 me-1"
+                                        <ul class="dropdown-menu dropdown-menu-end">
-                                        @onclick="() => ToggleKey(key)">Disable</button>
+                                            <li>
-                            }
+                                                <button class="dropdown-item"
-                            else
+                                                        @onclick="() => ToggleKey(key)">
-                            {
+                                                    @(key.IsEnabled ? "Disable" : "Enable")
-                                <button class="btn btn-outline-success btn-sm py-0 px-1 me-1"
+                                                </button>
-                                        @onclick="() => ToggleKey(key)">Enable</button>
+                                            </li>
-                            }
+                                            <li><hr class="dropdown-divider" /></li>
-                            <button class="btn btn-outline-danger btn-sm py-0 px-1"
+                                            <li>
-                                    @onclick="() => DeleteKey(key)">Delete</button>
+                                                <button class="dropdown-item text-danger"
-                        </td>
+                                                        @onclick="() => DeleteKey(key)">
-                    </tr>
+                                                    Delete
-                }
+                                                </button>
-            </tbody>
+                                            </li>
-        </table>
+                                        </ul>
+                                    </div>
+                                </div>
+                            </td>
+                        </tr>
+                    }
+                </tbody>
+            </table>
+        }
     }
 </div>
 
@@ -85,10 +101,17 @@
     private List<ApiKey> _keys = new();
     private bool _loading = true;
     private string? _errorMessage;
+    private string _search = string.Empty;
 
     private ToastNotification _toast = default!;
     private ConfirmDialog _confirmDialog = default!;
 
+    private IEnumerable<ApiKey> FilteredKeys =>
+        string.IsNullOrWhiteSpace(_search)
+            ? _keys
+            : _keys.Where(k =>
+                k.Name?.Contains(_search, StringComparison.OrdinalIgnoreCase) ?? false);
+
     protected override async Task OnInitializedAsync()
     {
         await LoadDataAsync();

src/ScadaLink.CentralUI/Components/Pages/Admin/DataConnectionForm.razor

@@ -32,9 +32,11 @@
                     <label class="form-label small">Site</label>
                     @if (_siteLocked)
                     {
-                        <select class="form-select form-select-sm" disabled>
+                        <input type="text"
-                            <option>@_siteName</option>
+                               class="form-control form-control-plaintext form-control-sm"
-                        </select>
+                               readonly
+                               value="@_siteName" />
+                        <div class="form-text">Site is locked after creation.</div>
                     }
                     else
                     {
@@ -52,13 +54,20 @@
                     <input type="text" class="form-control form-control-sm" @bind="_formName" />
                 </div>
 
+                <h6 class="text-muted mt-3">Primary endpoint</h6>
                 <OpcUaEndpointEditor Title="Primary Endpoint"
                                      IdPrefix="primary"
                                      Config="_primaryConfig"
                                      IsLegacy="_primaryIsLegacy"
                                      Errors="_primaryErrors" />
 
-                <h6 class="text-muted border-bottom pb-1 mt-3">Backup Endpoint</h6>
+                <h6 class="text-muted mt-3">
+                    Backup endpoint
+                    @if (!_showBackup)
+                    {
+                        <span class="badge bg-light text-muted border ms-2">Optional</span>
+                    }
+                </h6>
                 @if (!_showBackup)
                 {
                     <div class="mb-3">
@@ -77,7 +86,7 @@
                         <label class="form-label small">Failover Retry Count</label>
                         <input type="number" class="form-control form-control-sm" style="max-width: 120px;"
                                min="1" max="20" @bind="_formFailoverRetryCount" />
-                        <div class="form-text">Retries on active endpoint before switching to backup (default: 3)</div>
+                        <div class="form-text">Retries before failing over to backup endpoint.</div>
                     </div>
                     <div class="mb-3">
                         <button type="button" class="btn btn-outline-danger btn-sm"

src/ScadaLink.CentralUI/Components/Pages/Admin/DataConnections.razor

@@ -8,8 +8,35 @@
 @inject NavigationManager NavigationManager
 
 <div class="container-fluid mt-3">
+    <div class="d-flex justify-content-between align-items-center mb-3">
+        <h4 class="mb-0">Connections</h4>
+        <div class="d-flex gap-2">
+            <div class="dropdown">
+                <button class="btn btn-outline-secondary btn-sm dropdown-toggle"
+                        data-bs-toggle="dropdown">
+                    Bulk actions
+                </button>
+                <ul class="dropdown-menu dropdown-menu-end">
+                    <li>
+                        <button class="dropdown-item" @onclick="() => _tree?.ExpandAll()">
+                            Expand all
+                        </button>
+                    </li>
+                    <li>
+                        <button class="dropdown-item" @onclick="() => _tree?.CollapseAll()">
+                            Collapse all
+                        </button>
+                    </li>
+                </ul>
+            </div>
+            <button class="btn btn-primary btn-sm"
+                    disabled="@(!HasSiteSelected)"
+                    @onclick="OnAddConnectionClicked">+ Connection</button>
+        </div>
+    </div>
+
     <ToastNotification @ref="_toast" />
-    <ConfirmDialog @ref="_confirmDialog" />
+    <ConfirmDialog @ref="_confirmDialog" ConfirmButtonClass="btn-danger" />
 
     @if (_loading)
     {
@@ -21,21 +48,17 @@
     }
     else
     {
-        <h6 class="mb-2">Connections</h6>
+        <div class="mb-3" style="max-width: 320px;">
-        <div class="d-flex align-items-center mb-2 gap-2">
+            <input type="text" class="form-control form-control-sm"
-            <input type="text" class="form-control form-control-sm" style="max-width: 320px;"
                    placeholder="Search sites or connections..."
                    @bind="_searchText" @bind:event="oninput" @bind:after="OnSearchChanged" />
-            <div class="btn-group btn-group-sm">
-                <button class="btn btn-outline-secondary"
-                        disabled="@(!HasSiteSelected)"
-                        @onclick="OnAddConnectionClicked">+ Connection</button>
-                <button class="btn btn-outline-secondary" @onclick="LoadDataAsync">Refresh</button>
-                <button class="btn btn-outline-secondary" @onclick="() => _tree?.ExpandAll()">Expand</button>
-                <button class="btn btn-outline-secondary" @onclick="() => _tree?.CollapseAll()">Collapse</button>
-            </div>
         </div>
 
+        @if (!string.IsNullOrWhiteSpace(_searchText) && _matchKeys.Count == 0 && _treeRoots.Count > 0)
+        {
+            <p class="text-muted small">No connections match the filter.</p>
+        }
+
         <TreeView @ref="_tree" TItem="DcTreeNode" Items="_treeRoots"
                   ChildrenSelector="n => n.Children"
                   HasChildrenSelector="n => n.Children.Count > 0"
@@ -58,6 +81,41 @@
                     <span class="tv-label" style="@labelStyle">@node.Label</span>
                     <span class="badge bg-info ms-2">@node.Connection!.Protocol</span>
                 }
+                <span class="tv-meta">
+                    <div class="dropdown dc-node-actions" @onclick:stopPropagation="true">
+                        <button type="button"
+                                class="btn btn-link btn-sm p-0 dc-kebab"
+                                data-bs-toggle="dropdown"
+                                aria-label="@($"More actions for {node.Label}")">⋮</button>
+                        <ul class="dropdown-menu dropdown-menu-end">
+                            @if (node.Kind == DcNodeKind.Site)
+                            {
+                                <li>
+                                    <button class="dropdown-item"
+                                            @onclick="() => AddConnectionForSite(node.SiteId!.Value)">
+                                        Add Connection here
+                                    </button>
+                                </li>
+                            }
+                            else
+                            {
+                                <li>
+                                    <button class="dropdown-item"
+                                            @onclick='() => NavigationManager.NavigateTo($"/admin/connections/{node.Connection!.Id}/edit")'>
+                                        Edit
+                                    </button>
+                                </li>
+                                <li><hr class="dropdown-divider" /></li>
+                                <li>
+                                    <button class="dropdown-item text-danger"
+                                            @onclick="() => DeleteConnection(node.Connection!)">
+                                        Delete
+                                    </button>
+                                </li>
+                            }
+                        </ul>
+                    </div>
+                </span>
             </NodeContent>
             <ContextMenu Context="node">
                 @if (node.Kind == DcNodeKind.Site)
@@ -91,6 +149,24 @@
     }
 </div>
 
+<style>
+    /* Kebab visible-on-hover for tree nodes; always visible at small sizes for touch. */
+    .dc-node-actions .dc-kebab {
+        opacity: 0;
+        line-height: 1;
+        padding: 0 0.25rem !important;
+        color: var(--bs-secondary-color);
+    }
+    .tv-row:hover .dc-node-actions .dc-kebab,
+    .dc-node-actions.show .dc-kebab,
+    .dc-node-actions .dc-kebab:focus {
+        opacity: 1;
+    }
+    @@media (max-width: 768px) {
+        .dc-node-actions .dc-kebab { opacity: 1; }
+    }
+</style>
+
 @code {
     record DcTreeNode(string Key, string Label, DcNodeKind Kind, List<DcTreeNode> Children,
         int? SiteId = null, DataConnection? Connection = null);

src/ScadaLink.CentralUI/Components/Pages/Admin/LdapMappingForm.razor

@@ -1,24 +1,28 @@
 @page "/admin/ldap-mappings/create"
 @page "/admin/ldap-mappings/{Id:int}/edit"
 @using ScadaLink.Commons.Entities.Security
+@using ScadaLink.Commons.Entities.Sites
 @using ScadaLink.Commons.Interfaces.Repositories
 @using ScadaLink.Security
 @attribute [Authorize(Policy = AuthorizationPolicies.RequireAdmin)]
 @inject ISecurityRepository SecurityRepository
+@inject ISiteRepository SiteRepository
 @inject NavigationManager NavigationManager
 
 <div class="container-fluid mt-3">
     <div class="mb-3">
-        <button class="btn btn-outline-secondary btn-sm" @onclick="GoBack">
+        <button class="btn btn-outline-secondary btn-sm"
+                aria-label="Back to LDAP mappings"
+                @onclick="GoBack">
             &larr; Back
         </button>
     </div>
 
-    <ConfirmDialog @ref="_confirmDialog" />
+    <ConfirmDialog @ref="_confirmDialog" ConfirmButtonClass="btn-danger" />
 
     <div class="card mb-3">
         <div class="card-body">
-            <h6 class="card-title">@(IsEditMode ? "Edit LDAP Mapping" : "Add LDAP Mapping")</h6>
+            <h5 class="card-title">Mapping</h5>
             <div class="mb-2">
                 <label class="form-label small">LDAP Group Name</label>
                 <input type="text" class="form-control form-control-sm" @bind="_formGroupName" />
@@ -31,6 +35,7 @@
                     <option value="Design">Design</option>
                     <option value="Deployment">Deployment</option>
                 </select>
+                <div class="form-text">Deployment role: configure site scope below after saving.</div>
             </div>
             @if (_formError != null)
             {
@@ -43,56 +48,60 @@
         </div>
     </div>
 
-    @if (IsEditMode && _formRole.Equals("Deployment", StringComparison.OrdinalIgnoreCase))
+    <div class="card mb-3">
-    {
+        <div class="card-body">
-        <div class="card mb-3">
+            <h5 class="card-title">Site Scope Rules</h5>
-            <div class="card-body">
-                <h6 class="card-title">Site Scope Rules</h6>
 
+            @if (!IsEditMode)
+            {
+                <p class="text-muted small mb-0">Save the mapping first to configure site scope.</p>
+            }
+            else
+            {
                 @if (_scopeRules.Count > 0)
                 {
-                    <table class="table table-sm table-striped table-hover mb-3">
+                    <div class="d-flex flex-wrap gap-2 mb-3">
-                        <thead class="table-dark">
+                        @foreach (var rule in _scopeRules)
-                            <tr>
+                        {
-                                <th>ID</th>
+                            var siteName = _siteLookup.GetValueOrDefault(rule.SiteId)?.Name ?? $"Site {rule.SiteId}";
-                                <th>Site ID</th>
+                            <span class="badge bg-info text-dark d-inline-flex align-items-center">
-                                <th style="width: 120px;">Actions</th>
+                                @siteName
-                            </tr>
+                                <button type="button"
-                        </thead>
+                                        class="btn-close btn-close-white ms-2"
-                        <tbody>
+                                        style="font-size: 0.6rem;"
-                            @foreach (var rule in _scopeRules)
+                                        aria-label="@($"Remove scope rule for {siteName}")"
-                            {
+                                        @onclick="() => DeleteScopeRule(rule)"></button>
-                                <tr>
+                            </span>
-                                    <td>@rule.Id</td>
+                        }
-                                    <td>@rule.SiteId</td>
+                    </div>
-                                    <td>
-                                        <button class="btn btn-outline-danger btn-sm py-0 px-1"
-                                                @onclick="() => DeleteScopeRule(rule)">Delete</button>
-                                    </td>
-                                </tr>
-                            }
-                        </tbody>
-                    </table>
                 }
                 else
                 {
                     <p class="text-muted small mb-3">All sites (no restrictions)</p>
                 }
 
-                <div class="mb-2">
+                <div class="row g-2 align-items-end">
-                    <label class="form-label small">Site ID</label>
+                    <div class="col-auto">
-                    <input type="number" class="form-control form-control-sm" @bind="_scopeRuleSiteId" />
+                        <label class="form-label small">Site</label>
+                        <select class="form-select form-select-sm" @bind="_scopeRuleSiteId">
+                            <option value="0">Select site...</option>
+                            @foreach (var site in _sites)
+                            {
+                                <option value="@site.Id">@site.Name</option>
+                            }
+                        </select>
+                    </div>
+                    <div class="col-auto">
+                        <button class="btn btn-success btn-sm" @onclick="AddScopeRule">Add scope rule</button>
+                    </div>
                 </div>
                 @if (_scopeRuleError != null)
                 {
                     <div class="text-danger small mt-2">@_scopeRuleError</div>
                 }
-                <div class="mt-3">
+            }
-                    <button class="btn btn-success btn-sm" @onclick="AddScopeRule">Add</button>
-                </div>
-            </div>
         </div>
-    }
+    </div>
 </div>
 
 @code {
@@ -106,6 +115,8 @@
     private string? _formError;
 
     private List<SiteScopeRule> _scopeRules = new();
+    private List<Site> _sites = new();
+    private Dictionary<int, Site> _siteLookup = new();
     private int _scopeRuleSiteId;
     private string? _scopeRuleError;
 
@@ -113,6 +124,9 @@
 
     protected override async Task OnInitializedAsync()
     {
+        _sites = (await SiteRepository.GetAllSitesAsync()).ToList();
+        _siteLookup = _sites.ToDictionary(s => s.Id);
+
         if (Id.HasValue)
         {
             _editingMapping = await SecurityRepository.GetMappingByIdAsync(Id.Value);
@@ -174,7 +188,7 @@
 
         if (_scopeRuleSiteId <= 0)
         {
-            _scopeRuleError = "Site ID must be a positive number.";
+            _scopeRuleError = "Select a site to add a scope rule.";
             return;
         }
 
@@ -194,9 +208,10 @@
 
     private async Task DeleteScopeRule(SiteScopeRule rule)
     {
+        var siteName = _siteLookup.GetValueOrDefault(rule.SiteId)?.Name ?? $"Site {rule.SiteId}";
         var confirmed = await _confirmDialog.ShowAsync(
-            $"Delete scope rule for Site {rule.SiteId}? This cannot be undone.",
+            $"Remove scope rule for '{siteName}'?",
-            "Delete Scope Rule");
+            "Remove Scope Rule");
         if (!confirmed) return;
 
         try

src/ScadaLink.CentralUI/Components/Pages/Admin/LdapMappings.razor

@@ -22,61 +22,75 @@
     }
     else
     {
-        @* Mappings table *@
+        <div class="mb-3" style="max-width: 320px;">
-        <table class="table table-sm table-striped table-hover">
+            <input class="form-control form-control-sm"
-            <thead class="table-dark">
+                   placeholder="Filter by name, LDAP group, or role…"
-                <tr>
+                   @bind="_search" @bind:event="oninput" />
-                    <th>ID</th>
+        </div>
-                    <th>LDAP Group Name</th>
-                    <th>Role</th>
-                    <th>Site Scope Rules</th>
-                    <th style="width: 200px;">Actions</th>
-                </tr>
-            </thead>
-            <tbody>
-                @if (_mappings.Count == 0)
-                {
-                    <tr>
-                        <td colspan="5" class="text-muted text-center">No mappings configured.</td>
-                    </tr>
-                }
-                @foreach (var mapping in _mappings)
-                {
-                    <tr>
-                        <td>@mapping.Id</td>
-                        <td>@mapping.LdapGroupName</td>
-                        <td><span class="badge bg-secondary">@mapping.Role</span></td>
-                        <td>
-                            @{
-                                var rules = _scopeRules.GetValueOrDefault(mapping.Id);
-                            }
-                            @if (rules != null && rules.Count > 0)
-                            {
-                                @foreach (var rule in rules)
-                                {
-                                    <span class="badge bg-info text-dark me-1">Site @rule.SiteId</span>
-                                }
-                            }
-                            else
-                            {
-                                <span class="text-muted small">All sites</span>
-                            }
-                            @if (mapping.Role.Equals("Deployment", StringComparison.OrdinalIgnoreCase))
-                            {
-                                <span class="text-muted small ms-2">(manage on edit page)</span>
-                            }
-                        </td>
-                        <td>
-                            <button class="btn btn-outline-primary btn-sm py-0 px-1 me-1"
-                                    @onclick='() => NavigationManager.NavigateTo($"/admin/ldap-mappings/{mapping.Id}/edit")'>Edit</button>
-                            <button class="btn btn-outline-danger btn-sm py-0 px-1"
-                                    @onclick="() => DeleteMapping(mapping.Id)">Delete</button>
-                        </td>
-                    </tr>
-                }
-            </tbody>
-        </table>
 
+        @if (_mappings.Count == 0)
+        {
+            <p class="text-muted text-center">No mappings configured.</p>
+        }
+        else if (!FilteredMappings.Any())
+        {
+            <p class="text-muted small">No mappings match the filter.</p>
+        }
+        else
+        {
+            <table class="table table-sm table-striped table-hover">
+                <thead class="table-dark">
+                    <tr>
+                        <th>ID</th>
+                        <th>LDAP Group Name</th>
+                        <th>Role</th>
+                        <th>Site Scope</th>
+                        <th style="width: 160px;">Actions</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    @foreach (var mapping in FilteredMappings)
+                    {
+                        var rules = _scopeRules.GetValueOrDefault(mapping.Id);
+                        var ruleCount = rules?.Count ?? 0;
+                        <tr @key="mapping.Id">
+                            <td>@mapping.Id</td>
+                            <td>@mapping.LdapGroupName</td>
+                            <td><span class="badge bg-secondary">@mapping.Role</span></td>
+                            <td>
+                                @if (ruleCount > 0)
+                                {
+                                    <span class="badge bg-info text-dark">@ruleCount rule(s)</span>
+                                }
+                                else
+                                {
+                                    <span class="text-muted small">All sites</span>
+                                }
+                            </td>
+                            <td>
+                                <div class="d-flex gap-1">
+                                    <button class="btn btn-outline-primary btn-sm py-0 px-2"
+                                            @onclick='() => NavigationManager.NavigateTo($"/admin/ldap-mappings/{mapping.Id}/edit")'>Edit</button>
+                                    <div class="dropdown">
+                                        <button class="btn btn-outline-secondary btn-sm py-0 px-2"
+                                                data-bs-toggle="dropdown"
+                                                aria-label="@($"More actions for {mapping.LdapGroupName}")">⋮</button>
+                                        <ul class="dropdown-menu dropdown-menu-end">
+                                            <li>
+                                                <button class="dropdown-item text-danger"
+                                                        @onclick="() => DeleteMapping(mapping.Id)">
+                                                    Delete
+                                                </button>
+                                            </li>
+                                        </ul>
+                                    </div>
+                                </div>
+                            </td>
+                        </tr>
+                    }
+                </tbody>
+            </table>
+        }
     }
 </div>
 
@@ -85,6 +99,14 @@
     private Dictionary<int, List<SiteScopeRule>> _scopeRules = new();
     private bool _loading = true;
     private string? _errorMessage;
+    private string _search = string.Empty;
+
+    private IEnumerable<LdapGroupMapping> FilteredMappings =>
+        string.IsNullOrWhiteSpace(_search)
+            ? _mappings
+            : _mappings.Where(m =>
+                (m.LdapGroupName?.Contains(_search, StringComparison.OrdinalIgnoreCase) ?? false) ||
+                (m.Role?.Contains(_search, StringComparison.OrdinalIgnoreCase) ?? false));
 
     protected override async Task OnInitializedAsync()
     {

tests/ScadaLink.CentralUI.Tests/DataConnectionFormTests.cs

@@ -60,10 +60,12 @@ public class DataConnectionFormTests : BunitContext
            .First(i => i.GetAttribute("placeholder")?.StartsWith("opc.tcp") == true)
            .Change("not-a-url");
 
-        // Name field (the first text input that is NOT the OPC URL)
+        // Name field (the first editable text input that is NOT the OPC URL).
+        // Site renders as a readonly plaintext input when locked — skip it.
         cut.FindAll("input[type='text']")
-           .First(i => i.GetAttribute("placeholder") is null
+           .First(i => !i.HasAttribute("readonly")
-                       || !i.GetAttribute("placeholder")!.StartsWith("opc.tcp"))
+                       && (i.GetAttribute("placeholder") is null
+                           || !i.GetAttribute("placeholder")!.StartsWith("opc.tcp")))
            .Change("My Connection");
 
         await cut.FindAll("button")
@@ -82,10 +84,11 @@ public class DataConnectionFormTests : BunitContext
 
         var cut = RenderForCreateSite(1);
 
-        // Name
+        // Name (skip readonly Site plaintext input)
         cut.FindAll("input[type='text']")
-           .First(i => i.GetAttribute("placeholder") is null
+           .First(i => !i.HasAttribute("readonly")
-                       || !i.GetAttribute("placeholder")!.StartsWith("opc.tcp"))
+                       && (i.GetAttribute("placeholder") is null
+                           || !i.GetAttribute("placeholder")!.StartsWith("opc.tcp")))
            .Change("PLC-1");
         // Endpoint URL
         cut.FindAll("input[type='text']")