INIT GITEA

src/WorkFlowCheck.API/Controllers/CheckListController.cs

@@ -2,6 +2,7 @@
 using Serilog;
 using WorkFlowCheck.BL.Services;
 using WorkFlowCheck.BL.Services.Interfaces;
+using WorkFlowCheck.Common.DataTables;
 using WorkFlowCheck.Common.DTO;
 
 namespace WorkFlowCheck.API.Controllers
@@ -39,6 +40,28 @@ namespace WorkFlowCheck.API.Controllers
 
             return retVal;
         }
+        [HttpPost("GetFilteredCheckListHeader")]
+        public async Task<ApiResponseListDTO<List<CheckListHeaderDTO>>> GetFilteredCheckListHeader([FromBody] DataTablesRequest dataTablesRequest)
+        {
+            var retVal = new ApiResponseListDTO<List<CheckListHeaderDTO>>()
+            {
+                IsSuccess = true
+            };
+
+            try
+            {
+                var result = await _checkListService.GetFilteredCheckListHeaderAsync(dataTablesRequest);
+                retVal.Data = result.Data;
+                retVal.Total = result.Total;
+                retVal.Filtered = result.Filtered;
+            }
+            catch (Exception ex)
+            {
+                retVal.IsSuccess = false;
+                Log.Error(ex.Message);
+            }
+            return retVal;
+        }
         [HttpGet("CreatePDF/{id}")]
         public async Task<ApiResponseDTO<byte[]>> CreatePDF(int id)
         {

src/WorkFlowCheck.API/appsettings.Development.json

@@ -2,7 +2,7 @@
   "ConnectionStrings": {
     //"DefaultConnection": "Data Source=NSINB-37\\WFC;Initial Catalog=WFC;Integrated Security=True;Connect Timeout=30;Encrypt=False;Trust Server Certificate=False;Application Intent=ReadWrite;Multi Subnet Failover=False"
     //"DefaultConnection": "Data Source=WS2016DC\\SQLEXPRESS;Initial Catalog=WFC;Integrated Security=True;Connect Timeout=30;Encrypt=False;Trust Server Certificate=False;Application Intent=ReadWrite;Multi Subnet Failover=False",
-    "DefaultConnection": "Data Source=WS2016DC\\SQLEXPRESS;Initial Catalog=WFCUAT;Integrated Security=True;Connect Timeout=30;Encrypt=False;Trust Server Certificate=False;Application Intent=ReadWrite;Multi Subnet Failover=False"
+    "DefaultConnection": "Data Source=MASERVER;Initial Catalog=WFCUAT;Integrated Security=True;Connect Timeout=30;Encrypt=False;Trust Server Certificate=False;Application Intent=ReadWrite;Multi Subnet Failover=False"
   },
   "Logging": {
     "LogLevel": {

src/WorkFlowCheck.API/appsettings.json

@@ -1,6 +1,6 @@
 {
   "ConnectionStrings": {
-    "DefaultConnection": "Data Source=WS2016DC\\SQLEXPRESS;Initial Catalog=WFCUAT;Integrated Security=True;Connect Timeout=30;Encrypt=False;Trust Server Certificate=False;Application Intent=ReadWrite;Multi Subnet Failover=False"
+    "DefaultConnection": "Data Source=MASERVER;Initial Catalog=WFCUAT;Integrated Security=True;Connect Timeout=30;Encrypt=False;Trust Server Certificate=False;Application Intent=ReadWrite;Multi Subnet Failover=False"
   },
   "ApiKey": "RUJeLSpSMzVASUdaRCEzUyYxRSE0VyFISFRSJC0zRzhLM1hCSDU=",
   "Jwt": {

src/WorkFlowCheck.BL/Services/CheckListService.cs

@@ -15,6 +15,7 @@ using System.Text;
 using System.Threading.Tasks;
 using WorkFlowCheck.BL.DocumentGenerator;
 using WorkFlowCheck.BL.Services.Interfaces;
+using WorkFlowCheck.Common.DataTables;
 using WorkFlowCheck.Common.DTO;
 using WorkFlowCheck.Common.Enums;
 using WorkFlowCheck.DL;
@@ -81,6 +82,69 @@ namespace WorkFlowCheck.BL.Services
 
             return retVal;
         }
+        public async Task<ApiResponseListDTO<List<CheckListHeaderDTO>>> GetFilteredCheckListHeaderAsync(DataTablesRequest req)
+        {
+            var retVal = new ApiResponseListDTO<List<CheckListHeaderDTO>>();
+
+            try
+            {
+                var baseQuery = _dbContext.CheckListHeaders
+                                .AsNoTracking()
+                                .Where(x => !x.IsDeleted);
+
+                // MODE szűrés (csak WHERE, ORDER BY nélkül)
+                
+                IQueryable<CheckListHeader> modeQuery = req.Mode switch
+                {
+                    0 => baseQuery.Where(w => w.CheckStatus == CheckStatus.InProgress || w.CheckStatus == CheckStatus.Open),
+                    1 => baseQuery.Where(w => w.CheckStatus == CheckStatus.Sent),
+                    2 => baseQuery.Where(w => w.CheckStatus == CheckStatus.Closed),
+                    3 => baseQuery.Where(w => w.CheckStatus == CheckStatus.Signed),
+                    _ => baseQuery
+                };
+
+                // Total = mode szűrés után, keresés előtt
+                retVal.Total = await modeQuery.CountAsync();
+
+                // Search
+                var search = req.Search?.Value?.Trim();
+                IQueryable<CheckListHeader> filteredQuery = modeQuery;
+
+                if (!string.IsNullOrWhiteSpace(search))
+                {
+                    filteredQuery = filteredQuery.Where(x =>
+                        x.DocumentNumber.Contains(search) ||
+                        (x.ShortName != null && x.ShortName.Contains(search)) ||
+                        (x.Description != null && x.Description.Contains(search)) ||
+                        (x.CreatedBy != null && x.CreatedBy.Contains(search)) ||
+                        (x.AcceptUser != null && x.AcceptUser.UserName.Contains(search))
+                    );
+                }
+
+                retVal.Filtered = await filteredQuery.CountAsync();
+
+                // Ordering (itt már jöhet)
+                filteredQuery = filteredQuery.OrderByDescending(o => o.CreatedAt);
+
+                // Paging
+                var list = await filteredQuery
+                    .Include(x => x.CheckListRows)
+                    .Include(x => x.User)
+                    .Include(x => x.AcceptUser)
+                    .AsSplitQuery()
+                    .Skip(req.Start)
+                    .Take(req.Length)
+                    .ToListAsync();
+
+                retVal.Data = _mapper.Map<List<CheckListHeaderDTO>>(list);
+            }
+            catch (Exception ex)
+            {
+                Log.Error(ex, "GetFilteredCheckListHeaderAsync failed");
+            }
+
+            return retVal;
+        }
         public async Task<List<CheckListHeaderDTO>> GetAllCheckListHeaderAsync(int mode = 0)
         {
             var retVal = new List<CheckListHeaderDTO>();

src/WorkFlowCheck.BL/Services/Interfaces/ICheckListService.cs

@@ -1,4 +1,5 @@
 using Microsoft.AspNetCore.Mvc.Rendering;
+using WorkFlowCheck.Common.DataTables;
 using WorkFlowCheck.Common.DTO;
 
 namespace WorkFlowCheck.BL.Services.Interfaces
@@ -6,6 +7,7 @@ namespace WorkFlowCheck.BL.Services.Interfaces
     public interface ICheckListService
     {
         Task<CheckListHeaderDTO> GetCheckListHeaderAsync(int Id);
+        Task<ApiResponseListDTO<List<CheckListHeaderDTO>>> GetFilteredCheckListHeaderAsync(DataTablesRequest dataTablesRequest);
         Task<List<CheckListHeaderDTO>> GetAllCheckListHeaderAsync(int mode = 0);
         Task<CheckListHeaderDTO> UpdateCheckListHeaderAsync(CheckListHeaderDTO checkListHeaderDTO);
         Task<bool> AcceptCheckListHeaderAsync(int id, int userid);

src/WorkFlowCheck.Common/DTO/ApiResponseDTO.cs

@@ -35,9 +35,11 @@ namespace WorkFlowCheck.Common.DTO
     {
         public T Data { get; set; }
     }
+    
     public class ApiResponseListDTO<T> : ApiResponseBaseDTO
     {
-        public T[] Data { get; set; }
+        public T Data { get; set; }
         public int Total { get; set; }
+        public int Filtered { get; set; }
     }
 }

src/WorkFlowCheck.Common/DataTables/DataTablesRequest.cs

@@ -0,0 +1,22 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+
+namespace WorkFlowCheck.Common.DataTables
+{
+    public class DataTablesRequest
+    {
+        public int Mode { get; set; }
+        public int Draw { get; set; }
+        public int Start { get; set; }
+        public int Length { get; set; }
+        public DataTablesSearch Search { get; set; } = new();
+        public List<DataTablesOrder> Order { get; set; } = new();
+        public List<DataTablesColumn> Columns { get; set; } = new();
+    }
+    public class DataTablesSearch { public string? Value { get; set; } }
+    public class DataTablesOrder { public int Column { get; set; } public string? Dir { get; set; } }
+    public class DataTablesColumn { public string? Data { get; set; } public bool Searchable { get; set; } public bool Orderable { get; set; } }
+}

src/WorkFlowCheck.Web/Pages/Account/ChangePassword.cshtml

@@ -15,15 +15,175 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>@ViewData["Title"]</title>
+    <link rel="icon" type="image/svg+xml" href="~/images/favicon/favicon.svg" />
+    <link rel="icon" type="image/png" sizes="32x32" href="~/images/favicon/favicon-32.png" />
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
+    <style>
+        :root {
+            --wfc-navy-950: #071629;
+            --wfc-navy-900: #0b1f3a;
+            --wfc-navy-700: #123c69;
+            --wfc-blue-500: #38bdf8;
+            --wfc-blue-200: #bae6fd;
+            --wfc-border: #d7e2ee;
+            --wfc-text: #10243e;
+            --wfc-muted: #64748b;
+        }
+
+        body.wfc-account-page {
+            min-height: 100vh;
+            color: var(--wfc-text);
+            background:
+                radial-gradient(circle at 12% 18%, rgb(56 189 248 / 14%), transparent 27rem),
+                radial-gradient(circle at 88% 82%, rgb(18 60 105 / 12%), transparent 30rem),
+                linear-gradient(145deg, #f8fbff, #eaf3fb);
+            font-family: Inter, "Segoe UI", Arial, sans-serif;
+        }
+
+        .wfc-account-main {
+            padding: 2rem 1rem;
+        }
+
+        .wfc-account-card {
+            position: relative;
+            width: 100%;
+            max-width: 460px;
+            overflow: hidden;
+            border: 1px solid rgb(215 226 238 / 85%);
+            border-radius: 1rem;
+            background: #fff;
+            box-shadow: 0 24px 65px rgb(11 31 58 / 18%);
+        }
+
+        .wfc-account-brand {
+            display: flex;
+            min-height: 120px;
+            align-items: center;
+            justify-content: center;
+            padding: 1.55rem 2rem;
+            background:
+                radial-gradient(circle at 82% 12%, rgb(56 189 248 / 25%), transparent 12rem),
+                linear-gradient(135deg, var(--wfc-navy-900), var(--wfc-navy-950));
+        }
+
+        .wfc-account-logo {
+            display: block;
+            width: 100%;
+            max-width: 335px;
+            height: auto;
+        }
+
+        .wfc-account-body {
+            padding: 1.8rem 2.1rem 2.05rem;
+        }
+
+        .wfc-account-title {
+            margin: 0;
+            color: var(--wfc-navy-900);
+            font-size: 1.55rem;
+            font-weight: 750;
+            letter-spacing: -.02em;
+        }
+
+        .wfc-account-subtitle {
+            margin: .4rem 0 1.5rem;
+            color: var(--wfc-muted);
+            font-size: .92rem;
+        }
+
+        .wfc-account-card .form-label {
+            margin-bottom: .4rem;
+            color: var(--wfc-navy-900);
+            font-size: .87rem;
+            font-weight: 650;
+        }
+
+        .wfc-account-card .form-control {
+            min-height: 45px;
+            border-color: var(--wfc-border);
+            border-radius: .6rem;
+            color: var(--wfc-text);
+            background: #fbfdff;
+        }
+
+        .wfc-account-card .form-control:disabled,
+        .wfc-account-card .form-control[readonly] {
+            color: var(--wfc-muted);
+            background: #edf3f8;
+        }
+
+        .wfc-account-card .form-control:focus {
+            border-color: var(--wfc-blue-500);
+            background: #fff;
+            box-shadow: 0 0 0 .22rem rgb(56 189 248 / 20%);
+        }
+
+        .wfc-account-card .btn-primary,
+        .modal .btn-primary {
+            min-height: 45px;
+            border-color: var(--wfc-navy-700);
+            border-radius: .6rem;
+            background: linear-gradient(135deg, var(--wfc-navy-700), var(--wfc-navy-900));
+            font-weight: 700;
+            box-shadow: 0 8px 18px rgb(18 60 105 / 20%);
+        }
+
+        .wfc-account-card .btn-primary:hover,
+        .wfc-account-card .btn-primary:focus,
+        .modal .btn-primary:hover,
+        .modal .btn-primary:focus {
+            border-color: var(--wfc-navy-950);
+            background: linear-gradient(135deg, #174c82, var(--wfc-navy-900));
+        }
+
+        .wfc-account-card .spinner-border {
+            color: var(--wfc-navy-700);
+        }
+
+        .wfc-account-loading {
+            z-index: 10;
+            border-radius: 1rem;
+            background: rgb(255 255 255 / 84%);
+            backdrop-filter: blur(3px);
+        }
+
+        .wfc-account-footer {
+            padding: 1rem;
+            color: var(--wfc-muted);
+            font-size: .82rem;
+            text-align: center;
+        }
+
+        @@media (max-width: 575.98px) {
+            .wfc-account-main {
+                align-items: flex-start !important;
+                padding-top: 1rem;
+            }
+
+            .wfc-account-brand {
+                min-height: 104px;
+                padding: 1.25rem 1.5rem;
+            }
+
+            .wfc-account-body {
+                padding: 1.45rem 1.35rem 1.65rem;
+            }
+        }
+    </style>
 </head>
-<body class="bg-light d-flex justify-content-center align-items-center vh-100">
+<body class="wfc-account-page d-flex flex-column">
-    <div class="card shadow p-4" style="min-width: 350px; max-width: 400px; width: 100%;">
+    <main class="wfc-account-main flex-grow-1 d-flex justify-content-center align-items-center">
-        <h2 class="mb-4 text-center">Jelszó módosítása</h2>
+        <section class="wfc-account-card" aria-labelledby="changePasswordTitle">
+            <div class="wfc-account-brand">
+                <img src="~/images/logo/workflow-check-logo-dark.svg" alt="Workflow Check" class="wfc-account-logo" />
+            </div>
+
+            <div class="wfc-account-body">
+                <h1 class="wfc-account-title" id="changePasswordTitle">Jelszó módosítása</h1>
+                <p class="wfc-account-subtitle">Add meg a jelenlegi és az új jelszavadat.</p>
 
         <!-- Loading overlay -->
-        <div id="formLoading" class="position-absolute top-0 start-0 w-100 h-100 d-none align-items-center justify-content-center"
+        <div id="formLoading" class="wfc-account-loading position-absolute top-0 start-0 w-100 h-100 d-none align-items-center justify-content-center">
-             style="background: rgba(255,255,255,.75); z-index: 10; border-radius: .375rem;">
             <div class="text-center">
                 <div class="spinner-border" role="status" aria-hidden="true"></div>
                 <div class="mt-2 small text-muted">Kérlek várj…</div>
@@ -44,25 +204,25 @@
 
             <div class="mb-3">
                 <label asp-for="UserChangePassword2FADTO.OldPassword" class="form-label"></label>
-                <input asp-for="UserChangePassword2FADTO.OldPassword" type="password" class="form-control" />
+                <input asp-for="UserChangePassword2FADTO.OldPassword" type="password" class="form-control" autocomplete="current-password" autofocus />
                 <span asp-validation-for="UserChangePassword2FADTO.OldPassword" class="text-danger small"></span>
             </div>
             <div class="mb-3">
                 <label asp-for="UserChangePassword2FADTO.NewPassword1" class="form-label"></label>
-                <input asp-for="UserChangePassword2FADTO.NewPassword1" type="password" class="form-control" />
+                <input asp-for="UserChangePassword2FADTO.NewPassword1" type="password" class="form-control" autocomplete="new-password" />
                 <span asp-validation-for="UserChangePassword2FADTO.NewPassword1" class="text-danger small"></span>
             </div>
             <div class="mb-3">
                 <label asp-for="UserChangePassword2FADTO.NewPassword2" class="form-label"></label>
-                <input asp-for="UserChangePassword2FADTO.NewPassword2" type="password" class="form-control" />
+                <input asp-for="UserChangePassword2FADTO.NewPassword2" type="password" class="form-control" autocomplete="new-password" />
                 <span asp-validation-for="UserChangePassword2FADTO.NewPassword2" class="text-danger small"></span>
             </div>
             <div id="VerificationCode" class="mb-3">
                 <label asp-for="UserChangePassword2FADTO.Code" class="form-label"></label>
-                <input asp-for="UserChangePassword2FADTO.Code" class="form-control" />
+                <input asp-for="UserChangePassword2FADTO.Code" class="form-control" autocomplete="one-time-code" inputmode="numeric" />
                 <span asp-validation-for="UserChangePassword2FADTO.Code" class="text-danger small"></span>
             </div>
-            <hr class="mt-4 mb-3 border-secondary">
+            <hr class="mt-4 mb-3">
             <div id="login2F1" class="d-grid">
                 <button id="Login2F1Btn" type="button" class="btn btn-primary">Ellenőrzés</button>
             </div>
@@ -71,6 +231,12 @@
             </div>
         </form>
             </div>
+        </section>
+    </main>
+
+    <footer class="wfc-account-footer">
+        &copy; @(DateTime.Now.Year) Workflow Check App &nbsp;•&nbsp; Version @(SystemHelper.ProgramVersion)
+    </footer>
 
     <!-- Message Modal -->
     <div class="modal fade" id="messageModal" tabindex="-1" aria-labelledby="messageModalLabel" aria-hidden="true">
@@ -90,11 +256,11 @@
         </div>
     </div>
 
-    <script src="~/js/site.js" asp-append-version="true"></script>
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
     <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.5/dist/jquery.validate.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/jquery-validation-unobtrusive@4.0.0/dist/jquery.validate.unobtrusive.min.js"></script>
+    <script src="~/js/site.js" asp-append-version="true"></script>
 
     <script>
         function setLoading(isLoading) {

src/WorkFlowCheck.Web/Pages/Account/Login.cshtml

@@ -14,17 +14,167 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>@ViewData["Title"]</title>
+    <link rel="icon" type="image/svg+xml" href="~/images/favicon/favicon.svg" />
+    <link rel="icon" type="image/png" sizes="32x32" href="~/images/favicon/favicon-32.png" />
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
+    <style>
+        :root {
+            --wfc-navy-950: #071629;
+            --wfc-navy-900: #0b1f3a;
+            --wfc-navy-700: #123c69;
+            --wfc-blue-500: #38bdf8;
+            --wfc-blue-200: #bae6fd;
+            --wfc-surface: #f5f8fc;
+            --wfc-border: #d7e2ee;
+            --wfc-text: #10243e;
+            --wfc-muted: #64748b;
+        }
+
+        body.wfc-login-page {
+            min-height: 100vh;
+            color: var(--wfc-text);
+            background:
+                radial-gradient(circle at 12% 18%, rgb(56 189 248 / 14%), transparent 27rem),
+                radial-gradient(circle at 88% 82%, rgb(18 60 105 / 12%), transparent 30rem),
+                linear-gradient(145deg, #f8fbff, #eaf3fb);
+            font-family: Inter, "Segoe UI", Arial, sans-serif;
+        }
+
+        .wfc-login-main {
+            padding: 2rem 1rem;
+        }
+
+        .wfc-login-card {
+            position: relative;
+            width: 100%;
+            max-width: 430px;
+            overflow: hidden;
+            border: 1px solid rgb(215 226 238 / 85%);
+            border-radius: 1rem;
+            background: #fff;
+            box-shadow: 0 24px 65px rgb(11 31 58 / 18%);
+        }
+
+        .wfc-login-brand {
+            display: flex;
+            min-height: 128px;
+            align-items: center;
+            justify-content: center;
+            padding: 1.7rem 2rem;
+            background:
+                radial-gradient(circle at 82% 12%, rgb(56 189 248 / 25%), transparent 12rem),
+                linear-gradient(135deg, var(--wfc-navy-900), var(--wfc-navy-950));
+        }
+
+        .wfc-login-logo {
+            display: block;
+            width: 100%;
+            max-width: 335px;
+            height: auto;
+        }
+
+        .wfc-login-body {
+            padding: 2rem 2.1rem 2.15rem;
+        }
+
+        .wfc-login-title {
+            margin: 0;
+            color: var(--wfc-navy-900);
+            font-size: 1.55rem;
+            font-weight: 750;
+            letter-spacing: -.02em;
+        }
+
+        .wfc-login-subtitle {
+            margin: .4rem 0 1.65rem;
+            color: var(--wfc-muted);
+            font-size: .92rem;
+        }
+
+        .wfc-login-card .form-label {
+            margin-bottom: .42rem;
+            color: var(--wfc-navy-900);
+            font-size: .88rem;
+            font-weight: 650;
+        }
+
+        .wfc-login-card .form-control {
+            min-height: 46px;
+            border-color: var(--wfc-border);
+            border-radius: .6rem;
+            color: var(--wfc-text);
+            background: #fbfdff;
+        }
+
+        .wfc-login-card .form-control:focus {
+            border-color: var(--wfc-blue-500);
+            background: #fff;
+            box-shadow: 0 0 0 .22rem rgb(56 189 248 / 20%);
+        }
+
+        .wfc-login-card .btn-primary {
+            min-height: 46px;
+            border-color: var(--wfc-navy-700);
+            border-radius: .6rem;
+            background: linear-gradient(135deg, var(--wfc-navy-700), var(--wfc-navy-900));
+            font-weight: 700;
+            box-shadow: 0 8px 18px rgb(18 60 105 / 20%);
+        }
+
+        .wfc-login-card .btn-primary:hover,
+        .wfc-login-card .btn-primary:focus {
+            border-color: var(--wfc-navy-950);
+            background: linear-gradient(135deg, #174c82, var(--wfc-navy-900));
+        }
+
+        .wfc-login-card .spinner-border {
+            color: var(--wfc-navy-700);
+        }
+
+        .wfc-login-loading {
+            z-index: 10;
+            border-radius: 1rem;
+            background: rgb(255 255 255 / 84%);
+            backdrop-filter: blur(3px);
+        }
+
+        .wfc-login-footer {
+            padding: 1rem;
+            color: var(--wfc-muted);
+            font-size: .82rem;
+            text-align: center;
+        }
+
+        @@media (max-width: 575.98px) {
+            .wfc-login-main {
+                align-items: flex-start !important;
+                padding-top: 1rem;
+            }
+
+            .wfc-login-brand {
+                min-height: 108px;
+                padding: 1.35rem 1.5rem;
+            }
+
+            .wfc-login-body {
+                padding: 1.55rem 1.35rem 1.7rem;
+            }
+        }
+    </style>
 </head>
-@* <body class="bg-light d-flex justify-content-center align-items-center vh-100"> *@
+<body class="wfc-login-page d-flex flex-column">
-<body class="bg-light d-flex flex-column min-vh-100">
+    <main class="wfc-login-main flex-grow-1 d-flex justify-content-center align-items-center">
-    <main class="flex-grow-1 d-flex justify-content-center align-items-center">
+        <section class="wfc-login-card" aria-labelledby="loginTitle">
-        <div class="card shadow p-4" style="min-width: 350px; max-width: 400px; width: 100%;">
+            <div class="wfc-login-brand">
-            <h2 class="mb-4 text-center">Bejelentkezés</h2>
+                <img src="~/images/logo/workflow-check-logo-dark.svg" alt="Workflow Check" class="wfc-login-logo" />
+            </div>
+
+            <div class="wfc-login-body">
+                <h1 class="wfc-login-title" id="loginTitle">Bejelentkezés</h1>
+                <p class="wfc-login-subtitle">Lépj be a Workflow Check adminisztrációs felületére.</p>
 
             <!-- Loading overlay -->
-            <div id="formLoading" class="position-absolute top-0 start-0 w-100 h-100 d-none align-items-center justify-content-center"
+            <div id="formLoading" class="wfc-login-loading position-absolute top-0 start-0 w-100 h-100 d-none align-items-center justify-content-center">
-                 style="background: rgba(255,255,255,.75); z-index: 10; border-radius: .375rem;">
                 <div class="text-center">
                     <div class="spinner-border" role="status" aria-hidden="true"></div>
                     <div class="mt-2 small text-muted">Kérlek várj…</div>
@@ -38,21 +188,21 @@
                 <input type="hidden" asp-for="User2FADTO.Token2FA" />
                 <div class="mb-3">
                     <label asp-for="User2FADTO.UserName" class="form-label">Felhasználónév</label>
-                    <input asp-for="User2FADTO.UserName" class="form-control" />
+                    <input asp-for="User2FADTO.UserName" class="form-control" autocomplete="username" autofocus />
                     <span asp-validation-for="User2FADTO.UserName" class="text-danger small"></span>
                 </div>
 
                 <div class="mb-3">
                     <label asp-for="User2FADTO.Password" class="form-label">Jelszó</label>
-                    <input asp-for="User2FADTO.Password" type="password" class="form-control" />
+                    <input asp-for="User2FADTO.Password" type="password" class="form-control" autocomplete="current-password" />
                     <span asp-validation-for="User2FADTO.Password" class="text-danger small"></span>
                 </div>
                 <div id="VerificationCode" class="mb-3">
                     <label asp-for="User2FADTO.Code" class="form-label">Megerősítő kód</label>
-                    <input asp-for="User2FADTO.Code" class="form-control" />
+                    <input asp-for="User2FADTO.Code" class="form-control" autocomplete="one-time-code" inputmode="numeric" />
                     <span asp-validation-for="User2FADTO.Code" class="text-danger small"></span>
                 </div>
-                <hr class="mt-4 mb-3 border-secondary">
+                <hr class="mt-4 mb-3">
                 <div id="login2F1" class="d-grid">
                     <button id="Login2F1Btn" type="button" class="btn btn-primary">Bejelentkezés</button>
                 </div>
@@ -61,11 +211,10 @@
                 </div>
             </form>
             </div>
+        </section>
     </main>
-    <footer class="border-top footer text-muted">
+    <footer class="wfc-login-footer">
-        <div class="container">
+        &copy; @(DateTime.Now.Year) Workflow Check App &nbsp;•&nbsp; Version @(SystemHelper.ProgramVersion)
-            &copy; @(DateTime.Now.Year) - Workflow Check App - Version @(SystemHelper.ProgramVersion)
-        </div>
     </footer>
 
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>

src/WorkFlowCheck.Web/Pages/CheckList/CheckListHeader/CheckListHeaderPage.cshtml

@@ -58,11 +58,12 @@
     <script>
         let currentMode = @Model.Mode;
         const table = new DataTable('#tbCheckListHeadersPage', {
+                serverSide: true,
                 ordering: true,
                 order: [],
                 ajax: {
                         url: "@Url.Page("./CheckListHeaderPage", "LoadCheckListHeaders")",
-                        type: "GET",
+                        type: "POST",
                         data: function (d) {
                             d.mode = currentMode;
                         },

src/WorkFlowCheck.Web/Pages/CheckList/CheckListHeader/CheckListHeaderPage.cshtml.cs

@@ -1,4 +1,4 @@
-using Microsoft.AspNetCore.Mvc;
+using Microsoft.AspNetCore.Mvc;
 using Microsoft.AspNetCore.Mvc.RazorPages;
 using Microsoft.AspNetCore.Mvc.Rendering;
 using System.ComponentModel.DataAnnotations;
@@ -9,6 +9,7 @@ using System.Security.Claims;
 using WorkFlowCheck.Common.DTO;
 namespace WorkFlowCheck.Web.Pages.CheckList.CheckListHeader
 {
+    [IgnoreAntiforgeryToken]
     public class CheckListHeaderPageModel : PageModel
     {
         private readonly ILogger<IndexModel> _logger;
@@ -28,10 +29,50 @@ namespace WorkFlowCheck.Web.Pages.CheckList.CheckListHeader
         }
 
 
-        public async Task<JsonResult> OnGetLoadCheckListHeaders(int mode = 0)
+        public async Task<JsonResult> OnPostLoadCheckListHeadersAsync()
         {
-            var results = await _checkListService.GetAllCheckListHeaderAsync(mode);
+            var mode = int.Parse(Request.Form["mode"]);
-            return new JsonResult(new { data = results });
+
+            var draw = int.Parse(Request.Form["draw"]);
+            var start = int.Parse(Request.Form["start"]);
+            var length = int.Parse(Request.Form["length"]);
+            var search = Request.Form["search[value]"].ToString();
+
+            var orderColIndexStr = Request.Query["order[0][column]"].ToString();
+            var orderDir = Request.Query["order[0][dir]"].ToString(); // "asc" / "desc"
+            int? orderColIndex = int.TryParse(orderColIndexStr, out var idx) ? idx : null;
+
+            // columns[x][data] alapján tudod, melyik mezőt rendezi
+            string? orderColData = null;
+            if (orderColIndex.HasValue)
+                orderColData = Request.Query[$"columns[{orderColIndex.Value}][data]"].ToString();
+
+            //var results = await _checkListService.GetAllCheckListHeaderAsync(mode);
+
+            var dataTablesRequest = new Common.DataTables.DataTablesRequest()
+            {
+                Mode = mode,
+                Length = length,
+                Start = start,
+                Draw = draw,
+            };
+            dataTablesRequest.Search.Value = search;
+
+            var results = await _checkListService.GetFilteredCheckListHeaderAsync(dataTablesRequest);
+
+            return new JsonResult(new
+            {
+                draw = draw,
+                recordsTotal = results.Total,
+                recordsFiltered = results.Filtered,
+                data = results.Data
+            });
+            //var results = await _checkListService.GetAllCheckListHeaderAsync(mode);
+            //return new JsonResult(new
+            //{
+            //    draw = draw,
+            //    data = results
+            //});
         }
 
         public async Task<IActionResult> OnGetCreatePDF(int id)

src/WorkFlowCheck.Web/Pages/Index.cshtml

@@ -1,10 +1,112 @@
-@page
+@page
 @model IndexModel
+@using System.Text.Json
 @{
-    ViewData["Title"] = "Home page";
+    ViewData["Title"] = "Áttekintés";
+    var jsonOptions = new JsonSerializerOptions { PropertyNamingPolicy = JsonNamingPolicy.CamelCase };
 }
 
-<div class="text-center">
+@section Styles {
-    <h1 class="display-4">Üdvözlöm!</h1>
+<style>
-    <p>WorkFlowCheck Tablet & WEB & API rendszer</a>.</p>
+    .dashboard-page { --navy:#0b1f3a; --blue:#123c69; --sky:#38bdf8; --border:#d7e2ee; --muted:#64748b; --green:#16875b; --orange:#e28a17; }
+    .dashboard-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; margin-bottom:1.25rem; }
+    .dashboard-heading h1 { margin:0; color:var(--navy); font-size:clamp(1.45rem,2vw,1.9rem); font-weight:800; letter-spacing:-.025em; }
+    .dashboard-heading p { margin:.3rem 0 0; color:var(--muted); font-size:.9rem; }
+    .demo-badge { display:inline-flex; flex:0 0 auto; align-items:center; gap:.4rem; padding:.45rem .7rem; border:1px solid #bae6fd; border-radius:999px; color:#075985; background:#f0f9ff; font-size:.75rem; font-weight:750; }
+    .kpi-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; margin-bottom:1rem; }
+    .kpi-card,.dashboard-card { min-width:0; overflow:hidden; border:1px solid var(--border); border-radius:.85rem; background:#fff; box-shadow:0 8px 24px rgb(11 31 58 / 8%); }
+    .kpi-card { position:relative; padding:1.15rem 1.2rem; }
+    .kpi-card::after { position:absolute; top:0; right:0; width:72px; height:72px; border-radius:0 0 0 100%; content:""; background:rgb(56 189 248 / 9%); }
+    .kpi-topline { display:flex; align-items:center; justify-content:space-between; gap:.7rem; }
+    .kpi-icon { display:inline-flex; width:40px; height:40px; align-items:center; justify-content:center; border-radius:.65rem; color:var(--blue); background:#e8f7fe; font-size:1.15rem; }
+    .kpi-trend { color:var(--green); font-size:.76rem; font-weight:750; white-space:nowrap; }
+    .kpi-trend.warning { color:var(--orange); } .kpi-trend.neutral { color:var(--muted); }
+    .kpi-value { margin-top:.75rem; color:var(--navy); font-size:1.85rem; font-weight:820; line-height:1; }
+    .kpi-value small { font-size:.9rem; font-weight:700; }
+    .kpi-label { margin-top:.42rem; overflow:hidden; color:var(--muted); font-size:.83rem; text-overflow:ellipsis; white-space:nowrap; }
+    .dashboard-grid { display:grid; grid-template-columns:minmax(0,1.7fr) minmax(300px,.8fr); gap:1rem; margin-bottom:1rem; }
+    .dashboard-grid.equal { grid-template-columns:repeat(2,minmax(0,1fr)); }
+    .dashboard-card-header { display:flex; min-height:64px; align-items:center; justify-content:space-between; gap:1rem; padding:.95rem 1.15rem; border-bottom:1px solid #e3ebf3; }
+    .dashboard-card-title { margin:0; color:var(--navy); font-size:1rem; font-weight:780; }
+    .dashboard-card-subtitle { margin:.18rem 0 0; color:var(--muted); font-size:.76rem; }
+    .dashboard-card-body { padding:1rem 1.15rem 1.15rem; }
+    .chart-container { position:relative; width:100%; height:285px; } .chart-container.compact { height:250px; }
+    .status-summary { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.6rem; margin-top:.6rem; }
+    .status-item { display:flex; align-items:center; gap:.48rem; color:#475569; font-size:.76rem; }
+    .status-dot { width:8px; height:8px; flex:0 0 8px; border-radius:50%; } .status-item strong { margin-left:auto; color:var(--navy); }
+    .attention-list { display:flex; flex-direction:column; gap:.7rem; }
+    .attention-item { display:flex; align-items:flex-start; gap:.75rem; padding:.78rem; border:1px solid #e4ebf3; border-radius:.7rem; background:#fbfdff; }
+    .attention-icon { display:inline-flex; width:34px; height:34px; flex:0 0 34px; align-items:center; justify-content:center; border-radius:.55rem; color:#9a5a00; background:#fff3d6; }
+    .attention-item.danger .attention-icon { color:#a61b1b; background:#feecec; }
+    .attention-title { color:var(--navy); font-size:.84rem; font-weight:720; } .attention-meta { margin-top:.15rem; color:var(--muted); font-size:.73rem; }
+    .dashboard-table { margin:0; }
+    .dashboard-table thead th { padding:.72rem 1rem; border-bottom-color:var(--border); color:var(--muted); background:#f8fafc; font-size:.71rem; font-weight:750; letter-spacing:.035em; text-transform:uppercase; white-space:nowrap; }
+    .dashboard-table tbody td { padding:.78rem 1rem; border-bottom-color:#edf2f7; color:#334155; font-size:.82rem; vertical-align:middle; }
+    .inspection-code { color:var(--blue); font-weight:750; }
+    .status-badge { display:inline-flex; align-items:center; gap:.3rem; padding:.3rem .52rem; border-radius:999px; font-size:.7rem; font-weight:720; white-space:nowrap; }
+    .status-approved { color:#0d6b47; background:#dcf5e9; } .status-submitted { color:#075985; background:#e0f2fe; }
+    .status-progress { color:#945500; background:#fff1d2; } .status-closed { color:#475569; background:#e9eef4; }
+    @@media(max-width:1199.98px){.kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
+    @@media(max-width:991.98px){.dashboard-grid,.dashboard-grid.equal{grid-template-columns:1fr;}}
+    @@media(max-width:575.98px){.dashboard-heading{align-items:stretch;flex-direction:column}.demo-badge{align-self:flex-start}.kpi-grid{grid-template-columns:1fr}.chart-container{height:245px}.dashboard-card-header{align-items:flex-start;flex-direction:column}.dashboard-table{min-width:720px}}
+</style>
+}
+
+<div class="dashboard-page">
+    <div class="dashboard-heading">
+        <div><h1>Gyártási ellenőrzések áttekintése</h1><p>@Model.PeriodLabel · Frissítve: @Model.GeneratedAt.ToString("yyyy. MM. dd. HH:mm")</p></div>
+        <span class="demo-badge"><i class="bi bi-stars"></i> Mintaadatokkal</span>
     </div>
+
+    <section class="kpi-grid" aria-label="Fő mutatók">
+        <article class="kpi-card"><div class="kpi-topline"><span class="kpi-icon"><i class="bi bi-clipboard2-check"></i></span><span class="kpi-trend"><i class="bi bi-arrow-up-right"></i> @Model.MonthlyChangePercent.ToString("0.0")%</span></div><div class="kpi-value">@Model.InspectionsThisMonth</div><div class="kpi-label">Ellenőrzés ebben a hónapban</div></article>
+        <article class="kpi-card"><div class="kpi-topline"><span class="kpi-icon"><i class="bi bi-hourglass-split"></i></span><span class="kpi-trend warning">@Model.AwaitingApproval jóváhagyásra vár</span></div><div class="kpi-value">@Model.InProgress</div><div class="kpi-label">Folyamatban lévő ellenőrzés</div></article>
+        <article class="kpi-card"><div class="kpi-topline"><span class="kpi-icon"><i class="bi bi-patch-check"></i></span><span class="kpi-trend">@Model.ApprovalRate.ToString("0.0")% arány</span></div><div class="kpi-value">@Model.ApprovedThisMonth</div><div class="kpi-label">Jóváhagyás ebben a hónapban</div></article>
+        <article class="kpi-card"><div class="kpi-topline"><span class="kpi-icon"><i class="bi bi-stopwatch"></i></span><span class="kpi-trend neutral">átlagos idő</span></div><div class="kpi-value">@Model.AverageDurationMinutes.ToString("0.0") <small>perc</small></div><div class="kpi-label">Egy ellenőrzés végrehajtása</div></article>
+    </section>
+
+    <section class="dashboard-grid">
+        <article class="dashboard-card">
+            <header class="dashboard-card-header"><div><h2 class="dashboard-card-title">Ellenőrzések az utolsó 6 hónapban</h2><p class="dashboard-card-subtitle">Összes ellenőrzés és jóváhagyott tételek havi bontásban</p></div></header>
+            <div class="dashboard-card-body"><div class="chart-container"><canvas id="monthlyInspectionsChart"></canvas></div></div>
+        </article>
+        <article class="dashboard-card">
+            <header class="dashboard-card-header"><div><h2 class="dashboard-card-title">Aktuális állapotok</h2><p class="dashboard-card-subtitle">Az e havi ellenőrzések megoszlása</p></div></header>
+            <div class="dashboard-card-body"><div class="chart-container compact"><canvas id="statusChart"></canvas></div><div class="status-summary">@foreach(var status in Model.Statuses){<div class="status-item"><span class="status-dot" style="background:@status.Color"></span><span>@status.Name</span><strong>@status.Count</strong></div>}</div></div>
+        </article>
+    </section>
+
+    <section class="dashboard-grid equal">
+        <article class="dashboard-card">
+            <header class="dashboard-card-header"><div><h2 class="dashboard-card-title">Jóváhagyások személyenként</h2><p class="dashboard-card-subtitle">Aktuális hónap · jóváhagyott ellenőrzések száma</p></div></header>
+            <div class="dashboard-card-body"><div class="chart-container compact"><canvas id="approversChart"></canvas></div></div>
+        </article>
+        <article class="dashboard-card">
+            <header class="dashboard-card-header"><div><h2 class="dashboard-card-title">Figyelmet igényel</h2><p class="dashboard-card-subtitle">Elakadt vagy határidős tételek</p></div><span class="badge rounded-pill text-bg-danger">@Model.AttentionItems.Count</span></header>
+            <div class="dashboard-card-body"><div class="attention-list">@foreach(var item in Model.AttentionItems){<div class="attention-item @(item.IsCritical ? "danger" : "")"><span class="attention-icon"><i class="bi @(item.IsCritical ? "bi-exclamation-triangle" : "bi-clock-history")"></i></span><div><div class="attention-title">@item.Title</div><div class="attention-meta">@item.Description</div></div></div>}</div></div>
+        </article>
+    </section>
+
+    <section class="dashboard-card">
+        <header class="dashboard-card-header"><div><h2 class="dashboard-card-title">Legutóbbi ellenőrzések</h2><p class="dashboard-card-subtitle">A rendszerben legutóbb módosított tételek</p></div><a asp-page="/CheckList/CheckListHeader/CheckListHeaderPage" asp-route-mode="4" class="btn btn-sm btn-outline-primary">Összes megtekintése <i class="bi bi-arrow-right ms-1"></i></a></header>
+        <div class="table-responsive"><table class="table dashboard-table"><thead><tr><th>Azonosító</th><th>Ellenőrzés</th><th>Lokáció</th><th>Felelős</th><th>Módosítva</th><th>Állapot</th></tr></thead><tbody>
+        @foreach(var item in Model.RecentInspections){<tr><td><span class="inspection-code">@item.Code</span></td><td>@item.Name</td><td>@item.Location</td><td>@item.Responsible</td><td>@item.ModifiedAt.ToString("yyyy. MM. dd. HH:mm")</td><td><span class="status-badge @item.StatusCss"><i class="bi @item.StatusIcon"></i>@item.Status</span></td></tr>}
+        </tbody></table></div>
+    </section>
+</div>
+
+@section Scripts {
+<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.7/dist/chart.umd.min.js"></script>
+<script>
+(() => {
+    const monthly = @Html.Raw(JsonSerializer.Serialize(Model.MonthlyInspections, jsonOptions));
+    const statuses = @Html.Raw(JsonSerializer.Serialize(Model.Statuses, jsonOptions));
+    const approvers = @Html.Raw(JsonSerializer.Serialize(Model.Approvers, jsonOptions));
+    const gridColor = 'rgba(100,116,139,.14)';
+    Chart.defaults.font.family = 'Inter, "Segoe UI", Arial, sans-serif'; Chart.defaults.color = '#64748b';
+    new Chart(document.getElementById('monthlyInspectionsChart'),{type:'line',data:{labels:monthly.map(x=>x.month),datasets:[{label:'Összes ellenőrzés',data:monthly.map(x=>x.total),borderColor:'#123c69',backgroundColor:'rgba(56,189,248,.13)',borderWidth:3,pointBackgroundColor:'#123c69',pointRadius:4,fill:true,tension:.36},{label:'Jóváhagyott',data:monthly.map(x=>x.approved),borderColor:'#38bdf8',backgroundColor:'#38bdf8',borderWidth:2,pointRadius:3,borderDash:[6,4],tension:.36}]},options:{responsive:true,maintainAspectRatio:false,interaction:{mode:'index',intersect:false},plugins:{legend:{position:'bottom',labels:{usePointStyle:true,boxWidth:8,padding:18}}},scales:{x:{grid:{display:false}},y:{beginAtZero:true,grid:{color:gridColor},ticks:{precision:0}}}}});
+    new Chart(document.getElementById('statusChart'),{type:'doughnut',data:{labels:statuses.map(x=>x.name),datasets:[{data:statuses.map(x=>x.count),backgroundColor:statuses.map(x=>x.color),borderColor:'#fff',borderWidth:4,hoverOffset:5}]},options:{responsive:true,maintainAspectRatio:false,cutout:'68%',plugins:{legend:{display:false}}}});
+    new Chart(document.getElementById('approversChart'),{type:'bar',data:{labels:approvers.map(x=>x.name),datasets:[{label:'Jóváhagyás',data:approvers.map(x=>x.count),backgroundColor:['#123c69','#1c5c91','#2687bd','#38bdf8','#7dd3fc'],borderRadius:7,borderSkipped:false,barThickness:24}]},options:{indexAxis:'y',responsive:true,maintainAspectRatio:false,plugins:{legend:{display:false}},scales:{x:{beginAtZero:true,grid:{color:gridColor},ticks:{precision:0}},y:{grid:{display:false}}}}});
+})();
+</script>
+}

src/WorkFlowCheck.Web/Pages/Index.cshtml.cs

@@ -1,22 +1,76 @@
-using Microsoft.AspNetCore.Authorization;
-using Microsoft.AspNetCore.Mvc;
 using Microsoft.AspNetCore.Mvc.RazorPages;
+using System.Globalization;
 
 namespace WorkFlowCheck.Web.Pages
 {
-    //[Authorize]
     public class IndexModel : PageModel
     {
         private readonly ILogger<IndexModel> _logger;
 
-        public IndexModel(ILogger<IndexModel> logger)
+        public DateTime GeneratedAt { get; private set; }
-        {
+        public string PeriodLabel { get; private set; } = string.Empty;
-            _logger = logger;
+        public int InspectionsThisMonth { get; private set; }
-        }
+        public decimal MonthlyChangePercent { get; private set; }
+        public int InProgress { get; private set; }
+        public int AwaitingApproval { get; private set; }
+        public int ApprovedThisMonth { get; private set; }
+        public decimal ApprovalRate { get; private set; }
+        public decimal AverageDurationMinutes { get; private set; }
+        public List<MonthlyInspectionPoint> MonthlyInspections { get; private set; } = [];
+        public List<DashboardStatus> Statuses { get; private set; } = [];
+        public List<ApproverStatistic> Approvers { get; private set; } = [];
+        public List<AttentionItem> AttentionItems { get; private set; } = [];
+        public List<RecentInspection> RecentInspections { get; private set; } = [];
+
+        public IndexModel(ILogger<IndexModel> logger) => _logger = logger;
 
         public void OnGet()
         {
+            // TODO: A következő körben ezt az egy blokkot cseréljük IDashboardService hívásra.
+            LoadDemoData();
+        }
 
-        }
+        private void LoadDemoData()
+        {
+            GeneratedAt = DateTime.Now;
+            PeriodLabel = GeneratedAt.ToString("yyyy. MMMM", CultureInfo.GetCultureInfo("hu-HU"));
+            InspectionsThisMonth = 128;
+            MonthlyChangePercent = 18.5m;
+            InProgress = 17;
+            AwaitingApproval = 9;
+            ApprovedThisMonth = 96;
+            ApprovalRate = 75.0m;
+            AverageDurationMinutes = 14.2m;
+
+            var totals = new[] { 76, 89, 84, 105, 112, 128 };
+            var approved = new[] { 55, 63, 61, 79, 86, 96 };
+            var firstMonth = new DateTime(GeneratedAt.Year, GeneratedAt.Month, 1).AddMonths(-5);
+            var culture = CultureInfo.GetCultureInfo("hu-HU");
+            MonthlyInspections = Enumerable.Range(0, 6).Select(i => new MonthlyInspectionPoint(firstMonth.AddMonths(i).ToString("MMM", culture).TrimEnd('.'), totals[i], approved[i])).ToList();
+
+            Statuses = [new("Jóváhagyott",96,"#16875b"),new("Beküldött",9,"#38bdf8"),new("Folyamatban",17,"#e28a17"),new("Lezárt",6,"#94a3b8")];
+            Approvers = [new("Kovács Péter",28),new("Nagy Anna",24),new("Tóth Gábor",19),new("Szabó Éva",15),new("Varga Tamás",10)];
+            AttentionItems =
+            [
+                new("3 ellenőrzés több mint 48 órája beküldve", "Jóváhagyásra várnak a C2 gyártócsarnokban.", true),
+                new("Kalibrálás hamarosan lejár", "A CNC–04 berendezés következő határideje 3 nap.", false),
+                new("Hiányzó fényképes dokumentáció", "2 folyamatban lévő ellenőrzésnél nincs csatolmány.", true),
+                new("Heti ellenőrzési terv", "A tervezett 34 ellenőrzésből még 7 nem kezdődött el.", false)
+            ];
+            RecentInspections =
+            [
+                new("WFC-260912-018","Műszakindító gépellenőrzés","C2 gyártócsarnok","Kiss Dániel",GeneratedAt.AddMinutes(-18),"Jóváhagyott","status-approved","bi-check-circle"),
+                new("WFC-260912-017","Hegesztőcella biztonsági ellenőrzés","A1 csarnok","Farkas András",GeneratedAt.AddMinutes(-42),"Beküldött","status-submitted","bi-send-check"),
+                new("WFC-260912-016","Csomagolósor minőségellenőrzés","B3 csomagoló","Molnár Rita",GeneratedAt.AddHours(-1.4),"Folyamatban","status-progress","bi-hourglass-split"),
+                new("WFC-260912-015","Napi karbantartási ellenőrzés","CNC terület","Kiss Dániel",GeneratedAt.AddHours(-2.1),"Lezárt","status-closed","bi-lock"),
+                new("WFC-260912-014","Beérkező alapanyag vizsgálata","Központi raktár","Nagy Júlia",GeneratedAt.AddHours(-3.3),"Jóváhagyott","status-approved","bi-check-circle")
+            ];
+        }
+
+        public sealed record MonthlyInspectionPoint(string Month, int Total, int Approved);
+        public sealed record DashboardStatus(string Name, int Count, string Color);
+        public sealed record ApproverStatistic(string Name, int Count);
+        public sealed record AttentionItem(string Title, string Description, bool IsCritical);
+        public sealed record RecentInspection(string Code, string Name, string Location, string Responsible, DateTime ModifiedAt, string Status, string StatusCss, string StatusIcon);
     }
 }

src/WorkFlowCheck.Web/Pages/Shared/_Layout.cshtml

@@ -1,228 +1,320 @@
-
-
 <!DOCTYPE html>
 <html lang="hu">
 <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>@ViewData["Title"] - WorkFlowCheck.Web</title>
+    <title>@ViewData["Title"] - Workflow Check</title>
+
+    <link rel="icon" type="image/svg+xml" href="~/images/favicon/favicon.svg" />
+    <link rel="icon" type="image/png" sizes="32x32" href="~/images/favicon/favicon-32.png" />
     <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
     <link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
+    <link rel="stylesheet" href="~/css/workflow-check.css" asp-append-version="true" />
     <link rel="stylesheet" href="~/WorkFlowCheck.Web.styles.css" asp-append-version="true" />
-    <link href="https://cdn.datatables.net/v/bs5/jq-3.7.0/jszip-3.10.1/dt-2.2.2/af-2.7.0/b-3.2.2/b-colvis-3.2.2/b-html5-3.2.2/b-print-3.2.2/cr-2.0.4/date-1.5.5/fc-5.0.4/fh-4.0.1/kt-2.12.1/r-3.0.4/rg-1.5.1/rr-1.5.0/sc-2.4.3/sb-1.8.2/sp-2.3.3/sl-3.0.0/sr-1.4.1/datatables.min.css" rel="stylesheet" integrity="sha384-6gM1RUmcWWtU9mNI98EhVNlLX1LDErxSDu2o/YRIeXq34o77tQYTXLzJ/JLBNkNV" crossorigin="anonymous">
+    <link rel="stylesheet" href="https://cdn.datatables.net/v/bs5/jq-3.7.0/jszip-3.10.1/dt-2.2.2/af-2.7.0/b-3.2.2/b-colvis-3.2.2/b-html5-3.2.2/b-print-3.2.2/cr-2.0.4/date-1.5.5/fc-5.0.4/fh-4.0.1/kt-2.12.1/r-3.0.4/rg-1.5.1/rr-1.5.0/sc-2.4.3/sb-1.8.2/sp-2.3.3/sl-3.0.0/sr-1.4.1/datatables.min.css" />
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" />
-    @* <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"> *@
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" />
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
+
+    <script>
+        document.documentElement.classList.add('wfc-sidebar-initializing');
+        try {
+            if (localStorage.getItem('wfc.sidebar.collapsed') === 'true') {
+                document.documentElement.classList.add('wfc-sidebar-collapsed');
+            }
+
+            const savedWidth = Number(localStorage.getItem('wfc.sidebar.expandedWidth'));
+            if (savedWidth >= 260 && savedWidth <= 360) {
+                document.documentElement.style.setProperty('--wfc-sidebar-expanded-width', `${savedWidth}px`);
+            }
+        } catch { }
+
+        window.setTimeout(() => {
+            document.documentElement.classList.remove('wfc-sidebar-initializing');
+        }, 1500);
+    </script>
+
+    @await RenderSectionAsync("Styles", required: false)
 </head>
 <body>
-    <header>
+    <div class="wfc-shell">
-        <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
+        <aside class="wfc-sidebar" id="wfcSidebar">
-            <div class="container">
+            <div class="wfc-sidebar-brand">
-                <a class="navbar-brand" asp-area="" asp-page="/Index">Workflow Check Admin Site</a>
+                <a asp-area="" asp-page="/Index" aria-label="Workflow Check kezdőlap">
-                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".navbar-collapse" aria-controls="navbarSupportedContent"
+                    <img src="~/images/logo/workflow-check-logo-dark.svg" alt="Workflow Check" class="wfc-sidebar-logo" />
-                        aria-expanded="false" aria-label="Toggle navigation">
+                </a>
-                    <span class="navbar-toggler-icon"></span>
+                <button type="button" class="wfc-sidebar-close d-lg-none" id="wfcSidebarClose" aria-label="Menü bezárása">
+                    <i class="bi bi-x-lg"></i>
                 </button>
-                <div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
-                    <ul class="navbar-nav flex-grow-1">
-                        @* <li class="nav-item">
-                            <a class="nav-link text-dark" asp-area="" asp-page="/Index">Home</a>
-                        </li> *@
-                        <li class="nav-item dropdown">
-                            <a class="nav-link dropdown-toggle text-dark" href="#" id="baseStockDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
-                                Törzsadatok
-                            </a>
-                            <ul class="dropdown-menu" aria-labelledby="baseStockDropdown">
-                                <li><a class="dropdown-item" asp-area="" asp-page="/BaseStock/CheckPoints/CheckPointsPage">Ellenőrzési pontok</a></li>
-                                <li><a class="dropdown-item" asp-area="" asp-page="/BaseStock/Equipments/EquipmentsPage">Berendezések</a></li>
-                                <li><a class="dropdown-item" asp-area="" asp-page="/BaseStock/Locations/LocationsPage">Lokációk</a></li>
-                                <li><hr class="dropdown-divider"></li> <!-- EZ AZ ELVÁLASZTÓ VONAL -->
-                                <li><a class="dropdown-item" asp-area="" asp-page="/BaseStock/ImageFiles/ImageFilesPage">Fényképek</a></li>
-                                <li><a class="dropdown-item" asp-area="" asp-page="/BaseStock/PDFFiles/PDFFilesPage">PDF állomány</a></li>
-                                <li><hr class="dropdown-divider"></li> <!-- EZ AZ ELVÁLASZTÓ VONAL -->
-                                <li><a class="dropdown-item" asp-area="" asp-page="/BaseStock/Logs/Audit/AuditFilesPage">Audit események</a></li>
-                                <li><a class="dropdown-item" asp-area="" asp-page="/BaseStock/Logs/Business/BusinessFilesPage">Folyamat események</a></li>
-                            </ul>
-                        </li>
-                        <li class="nav-item dropdown">
-                            <a class="nav-link dropdown-toggle text-dark" href="#" id="checkListDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
-                                Ellenőrzési adatok
-                            </a>
-                            <ul class="dropdown-menu" aria-labelledby="checkListDropdown">
-                                <li>
-                                    <a class="dropdown-item" asp-area="" asp-page="/CheckList/CheckListHeader/CheckListHeaderPage"
-                                       asp-route-mode="0">Ellenőrzések (folyamatban)</a>
-                                </li>
-                                <li>
-                                    <a class="dropdown-item" asp-area="" asp-page="/CheckList/CheckListHeader/CheckListHeaderPage"
-                                       asp-route-mode="1">Ellenőrzések (beküldött)</a>
-                                </li>
-                                <li>
-                                    <a class="dropdown-item" asp-area="" asp-page="/CheckList/CheckListHeader/CheckListHeaderPage"
-                                       asp-route-mode="3">Ellenőrzések (jóváhagyott)</a>
-                                </li>
-                                <li>
-                                    <a class="dropdown-item" asp-area="" asp-page="/CheckList/CheckListHeader/CheckListHeaderPage"
-                                       asp-route-mode="2">Ellenőrzések (lezárt)</a>
-                                </li>
-                                <li>
-                                    <a class="dropdown-item" asp-area="" asp-page="/CheckList/CheckListHeader/CheckListHeaderPage"
-                                       asp-route-mode="4">Ellenőrzések (összes)</a>
-                                </li>
-                                <li><hr class="dropdown-divider"></li> <!-- EZ AZ ELVÁLASZTÓ VONAL -->
-                                <li><a class="dropdown-item" asp-area="" asp-page="/CheckListTemplate/CheckListTemplateHeader/CheckListTemplateHeaderPage">Ellenőrzési sablonok</a></li>
-                            </ul>
-                        </li>
-                        <li class="nav-item dropdown">
-                            <a class="nav-link dropdown-toggle text-dark" href="#" id="adminDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
-                                Felhasználók - szabályok
-                            </a>
-                            <ul class="dropdown-menu" aria-labelledby="adminDropdown">
-                                <li><a class="dropdown-item" asp-area="" asp-page="/UserAndRole/UserPage">Felhasználók</a></li>
-                                <li><a class="dropdown-item" asp-area="" asp-page="/UserAndRole/RolePage">Szabályok</a></li>
-                                <li><hr class="dropdown-divider"></li> <!-- EZ AZ ELVÁLASZTÓ VONAL -->
-                                <li><a class="dropdown-item" asp-area="" asp-page="/UserAndRole/UserRolePage">Felhasználók - szabályok</a></li>
-                                <li><a class="dropdown-item" asp-area="" asp-page="/UserAndRole/RoleCheckListTemplateHeadersPage">Szabályok - Ellenőrzési sablonok</a></li>
-                                <li><a class="dropdown-item" asp-area="" asp-page="/UserAndRole/RoleCheckPointsPage">Szabályok - Ellenőrzési pontok</a></li>
-                            </ul>
-                        </li>
-
-                    </ul>
-                    <ul class="navbar-nav">
-                        <li class="nav-item dropdown">
-                            <a class="nav-link dropdown-toggle text-dark" href="#" id="accountDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
-                                Adataim
-                            </a>
-                            <ul class="dropdown-menu" aria-labelledby="accountDropdown">
-                                <li class="dropdown-item">
-                                    <a class="nav-link text-dark" href="#" data-bs-toggle="modal" data-bs-target="#logoutModal">
-                                        <i class="bi bi-box-arrow-right"></i>Logout (@User.Identity.Name)
-                                    </a>
-                                </li>
-                                <li>
-                                    <a class="dropdown-item" asp-area="" asp-page="/Account/ChangePassword">
-                                        Jelszó módosítása
-                                    </a>
-                                </li>
-                                <li><hr class="dropdown-divider"></li> <!-- EZ AZ ELVÁLASZTÓ VONAL -->
-                                <li class="dropdown-item">
-                                    <a class="nav-link text-dark" asp-area="" asp-page="/Privacy">Adatvédelmi tájékoztatás</a>
-                                </li>
-                            </ul>
-                        </li>
-
-                    </ul>
             </div>
+
+            <nav class="wfc-sidebar-nav" aria-label="Főmenü">
+                <a class="wfc-sidebar-link @(Context.Request.Path == "/" ? "active" : "")" asp-area="" asp-page="/Index">
+                    <i class="bi bi-speedometer2"></i><span>Áttekintés</span>
+                </a>
+
+                <div class="wfc-sidebar-section">ELLENŐRZÉSEK</div>
+                <button class="wfc-sidebar-link wfc-collapse-toggle" type="button" data-bs-toggle="collapse" data-bs-target="#checkListMenu" aria-expanded="false">
+                    <i class="bi bi-clipboard2-check"></i><span>Ellenőrzési adatok</span><i class="bi bi-chevron-down ms-auto wfc-toggle-chevron"></i>
+                </button>
+                <div class="collapse wfc-sidebar-submenu" id="checkListMenu">
+                    <a class="wfc-sidebar-link" asp-area="" asp-page="/CheckList/CheckListHeader/CheckListHeaderPage" asp-route-mode="0">
+                        <i class="bi bi-play-circle"></i><span>Folyamatban</span>
+                    </a>
+                    <a class="wfc-sidebar-link" asp-area="" asp-page="/CheckList/CheckListHeader/CheckListHeaderPage" asp-route-mode="1">
+                        <i class="bi bi-send-check"></i><span>Beküldött</span>
+                    </a>
+                    <a class="wfc-sidebar-link" asp-area="" asp-page="/CheckList/CheckListHeader/CheckListHeaderPage" asp-route-mode="3">
+                        <i class="bi bi-hand-thumbs-up"></i><span>Jóváhagyott</span>
+                    </a>
+                    <a class="wfc-sidebar-link" asp-area="" asp-page="/CheckList/CheckListHeader/CheckListHeaderPage" asp-route-mode="2">
+                        <i class="bi bi-lock"></i><span>Lezárt</span>
+                    </a>
+                    <a class="wfc-sidebar-link" asp-area="" asp-page="/CheckList/CheckListHeader/CheckListHeaderPage" asp-route-mode="4">
+                        <i class="bi bi-list-check"></i><span>Összes ellenőrzés</span>
+                    </a>
+                    <hr class="wfc-sidebar-divider" />
+                    <a class="wfc-sidebar-link" asp-area="" asp-page="/CheckListTemplate/CheckListTemplateHeader/CheckListTemplateHeaderPage">
+                        <i class="bi bi-clipboard-data"></i><span>Ellenőrzési sablonok</span>
+                    </a>
+                </div>
+
+                <div class="wfc-sidebar-section">TÖRZSADATOK</div>
+                <button class="wfc-sidebar-link wfc-collapse-toggle" type="button" data-bs-toggle="collapse" data-bs-target="#masterDataMenu" aria-expanded="false">
+                    <i class="bi bi-database-gear"></i><span>Gyártási törzsadatok</span><i class="bi bi-chevron-down ms-auto wfc-toggle-chevron"></i>
+                </button>
+                <div class="collapse wfc-sidebar-submenu" id="masterDataMenu">
+                    <a class="wfc-sidebar-link" asp-area="" asp-page="/BaseStock/CheckPoints/CheckPointsPage"><i class="bi bi-check2-circle"></i><span>Ellenőrzési pontok</span></a>
+                    <a class="wfc-sidebar-link" asp-area="" asp-page="/BaseStock/Equipments/EquipmentsPage"><i class="bi bi-gear-wide-connected"></i><span>Berendezések</span></a>
+                    <a class="wfc-sidebar-link" asp-area="" asp-page="/BaseStock/Locations/LocationsPage"><i class="bi bi-geo-alt"></i><span>Lokációk</span></a>
+                    <hr class="wfc-sidebar-divider" />
+                    <a class="wfc-sidebar-link" asp-area="" asp-page="/BaseStock/ImageFiles/ImageFilesPage"><i class="bi bi-images"></i><span>Fényképek</span></a>
+                    <a class="wfc-sidebar-link" asp-area="" asp-page="/BaseStock/PDFFiles/PDFFilesPage"><i class="bi bi-file-earmark-pdf"></i><span>PDF állományok</span></a>
+                    <hr class="wfc-sidebar-divider" />
+                    <a class="wfc-sidebar-link" asp-area="" asp-page="/BaseStock/Logs/Audit/AuditFilesPage"><i class="bi bi-shield-check"></i><span>Audit események</span></a>
+                    <a class="wfc-sidebar-link" asp-area="" asp-page="/BaseStock/Logs/Business/BusinessFilesPage"><i class="bi bi-activity"></i><span>Folyamat események</span></a>
+                </div>
+
+                <div class="wfc-sidebar-section">RENDSZER</div>
+                <button class="wfc-sidebar-link wfc-collapse-toggle" type="button" data-bs-toggle="collapse" data-bs-target="#usersAndRolesMenu" aria-expanded="false">
+                    <i class="bi bi-people"></i><span>Felhasználók és szabályok</span><i class="bi bi-chevron-down ms-auto wfc-toggle-chevron"></i>
+                </button>
+                <div class="collapse wfc-sidebar-submenu" id="usersAndRolesMenu">
+                    <a class="wfc-sidebar-link" asp-area="" asp-page="/UserAndRole/UserPage"><i class="bi bi-person-gear"></i><span>Felhasználók</span></a>
+                    <a class="wfc-sidebar-link" asp-area="" asp-page="/UserAndRole/RolePage"><i class="bi bi-shield-lock"></i><span>Szabályok</span></a>
+                    <hr class="wfc-sidebar-divider" />
+                    <a class="wfc-sidebar-link" asp-area="" asp-page="/UserAndRole/UserRolePage"><i class="bi bi-person-check"></i><span>Felhasználók – szabályok</span></a>
+                    <a class="wfc-sidebar-link" asp-area="" asp-page="/UserAndRole/RoleCheckListTemplateHeadersPage"><i class="bi bi-ui-checks-grid"></i><span>Szabályok – sablonok</span></a>
+                    <a class="wfc-sidebar-link" asp-area="" asp-page="/UserAndRole/RoleCheckPointsPage"><i class="bi bi-check2-square"></i><span>Szabályok – ellenőrzési pontok</span></a>
                 </div>
             </nav>
+
+            <div class="wfc-sidebar-account">
+                <div class="wfc-sidebar-user"><i class="bi bi-person-circle"></i><span>@(User.Identity?.Name ?? "Felhasználó")</span></div>
+                <a asp-area="" asp-page="/Account/ChangePassword"><i class="bi bi-key"></i><span>Jelszó módosítása</span></a>
+                <a href="#" data-bs-toggle="modal" data-bs-target="#logoutModal"><i class="bi bi-box-arrow-right"></i><span>Kijelentkezés</span></a>
+            </div>
+        </aside>
+
+        <div class="wfc-sidebar-backdrop" id="wfcSidebarBackdrop"></div>
+
+        <div class="wfc-content">
+            <header class="wfc-topbar">
+                <button type="button" class="wfc-sidebar-open d-lg-none" id="wfcSidebarOpen" aria-label="Menü megnyitása"><i class="bi bi-list"></i></button>
+                <button type="button" class="wfc-sidebar-toggle d-none d-lg-inline-flex" id="wfcSidebarToggle" aria-controls="wfcSidebar" aria-expanded="true" title="Oldalsáv összecsukása">
+                    <i class="bi bi-layout-sidebar-inset"></i>
+                </button>
+                <div class="wfc-topbar-title">@ViewData["Title"]</div>
             </header>
-    <div class="container">
+
-        <main role="main" class="pb-3">
+            <main role="main" class="wfc-main">
                 @RenderBody()
             </main>
+
+            <footer class="wfc-footer">
+                <div class="wfc-footer-content">
+                    <span>&copy; @(DateTime.Now.Year) Workflow Check App</span>
+                    <span class="wfc-footer-separator">•</span>
+                    <span>Version @(SystemHelper.ProgramVersion)</span>
+                    <span class="wfc-footer-separator">•</span>
+                    <span>@SystemHelper.DatabaseName</span>
+                    <a asp-area="" asp-page="/Privacy">Adatvédelmi tájékoztatás</a>
+                </div>
+            </footer>
+        </div>
     </div>
 
-    <!-- Logout Modal -->
     <div class="modal fade" id="logoutModal" tabindex="-1" aria-labelledby="logoutModalLabel" aria-hidden="true">
         <div class="modal-dialog modal-dialog-centered">
             <div class="modal-content">
-                <div class="modal-header">
+                <div class="modal-header"><h5 class="modal-title" id="logoutModalLabel">Kijelentkezés</h5><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Bezárás"></button></div>
-                    <h5 class="modal-title" id="logoutModalLabel">Kijelentkezés</h5>
+                <div class="modal-body">Biztosan ki akarsz lépni?</div>
-                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Bezárás"></button>
+                <div class="modal-footer"><button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Nem</button><a href="/Account/Logout" class="btn btn-primary">Igen</a></div>
-                </div>
-                <div class="modal-body">
-                    Biztosan ki akarsz lépni?
-                </div>
-                <div class="modal-footer">
-                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Nem</button>
-                    <a href="/Account/Logout" class="btn btn-primary">Igen</a>
-                </div>
             </div>
         </div>
     </div>
 
-    <!-- Confirm Modal -->
     <div class="modal fade" id="confirmModal" tabindex="-1" aria-labelledby="confirmModalLabel" aria-hidden="true">
         <div class="modal-dialog modal-dialog-centered">
             <div class="modal-content">
-                <div class="modal-header">
+                <div class="modal-header"><h5 class="modal-title" id="confirmModalLabel">Megerősítés</h5><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Bezárás"></button></div>
-                    <h5 class="modal-title" id="confirmModalLabel">Megerősítés</h5>
+                <div class="modal-body" id="confirmModalBody">Biztos vagy benne?</div>
-                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Bezárás"></button>
+                <div class="modal-footer"><button type="button" class="btn btn-secondary" id="confirmModalCancelBtn" data-bs-dismiss="modal">Mégsem</button><button type="button" class="btn btn-primary" id="confirmModalOkBtn">Igen</button></div>
-                </div>
-                <div class="modal-body" id="confirmModalBody">
-                    Biztos vagy benne?
-                </div>
-                <div class="modal-footer">
-                    <button type="button" class="btn btn-secondary" id="confirmModalCancelBtn" data-bs-dismiss="modal">Mégsem</button>
-                    <button type="button" class="btn btn-primary" id="confirmModalOkBtn">Igen</button>
-                </div>
             </div>
         </div>
     </div>
 
-    <!-- Confirm Modal With Message-->
+    <div class="modal fade" id="confirmModalWithMessage" tabindex="-1" aria-labelledby="confirmModalWithMessageLabel" aria-hidden="true">
-    <div class="modal fade" id="confirmModalWithMessage" tabindex="-1" aria-labelledby="confirmModalLabel" aria-hidden="true">
         <div class="modal-dialog modal-dialog-centered">
             <div class="modal-content">
-                <div class="modal-header">
+                <div class="modal-header"><h5 class="modal-title" id="confirmModalWithMessageLabel">Megerősítés</h5><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Bezárás"></button></div>
-                    <h5 class="modal-title" id="confirmModalLabel">Megerősítés</h5>
+                <div class="modal-body">
-                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Bezárás"></button>
-                </div>
-                <div class="modal-body" id="confirmModalBody">
                     <label for="confirmModalTextarea" class="form-label">Írd le a megjegyzést vagy indoklást:</label>
                     <textarea class="form-control" id="confirmModalTextarea" rows="4" placeholder="Írd ide..."></textarea>
-                    <div class="invalid-feedback">
+                    <div class="invalid-feedback">A mező kitöltése kötelező.</div>
-                        A mező kitöltése kötelező.
-                    </div>
-                </div>
-                <div class="modal-footer">
-                    <button type="button" class="btn btn-secondary" id="confirmModalCancelBtn" data-bs-dismiss="modal">Mégsem</button>
-                    <button type="button" class="btn btn-primary" id="confirmModalOkBtn">Igen</button>
                 </div>
+                <div class="modal-footer"><button type="button" class="btn btn-secondary" id="confirmModalCancelBtn" data-bs-dismiss="modal">Mégsem</button><button type="button" class="btn btn-primary" id="confirmModalOkBtn">Igen</button></div>
             </div>
         </div>
     </div>
 
-    <!-- Message Modal -->
     <div class="modal fade" id="messageModal" tabindex="-1" aria-labelledby="messageModalLabel" aria-hidden="true">
         <div class="modal-dialog modal-dialog-centered">
             <div class="modal-content">
-                <div class="modal-header">
+                <div class="modal-header"><h5 class="modal-title" id="messageModalLabel">Üzenet</h5><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Bezárás"></button></div>
-                    <h5 class="modal-title" id="messageModalLabel">Üzenet</h5>
+                <div class="modal-body" id="messageModalBody">Ez egy információs üzenet.</div>
-                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Bezárás"></button>
+                <div class="modal-footer"><button type="button" class="btn btn-primary" id="messageModalOkBtn" data-bs-dismiss="modal">OK</button></div>
-                </div>
-                <div class="modal-body" id="messageModalBody">
-                    Ez egy információs üzenet.
-                </div>
-                <div class="modal-footer">
-                    <button type="button" class="btn btn-primary" id="messageModalOkBtn" data-bs-dismiss="modal">OK</button>
             </div>
         </div>
     </div>
-    </div>
-
-    <footer class="border-top footer text-muted">
-        <div class="container">
-            &copy; @(DateTime.Now.Year) - Workflow Check App - Version @(SystemHelper.ProgramVersion) (@(SystemHelper.DatabaseName))<a asp-area="" asp-page="/Privacy"> Adatvédelmi tájékoztatás</a>
-        </div>
-    </footer>
 
     <script src="~/lib/jquery/dist/jquery.min.js"></script>
     <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
-    <script src="~/js/site.js" asp-append-version="true"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/pdfmake.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/pdfmake.min.js" integrity="sha384-VFQrHzqBh5qiJIU0uGU5CIW3+OWpdGGJM9LBnGbuIH2mkICcFZ7lPd/AAtI7SNf7" crossorigin="anonymous"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/vfs_fonts.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/vfs_fonts.js" integrity="sha384-/RlQG9uf0M2vcTw3CX7fbqgbj/h8wKxw7C3zu9/GxcBPRKOEcESxaxufwRXqzq6n" crossorigin="anonymous"></script>
+    <script src="https://cdn.datatables.net/v/bs5/jszip-3.10.1/dt-2.2.2/af-2.7.0/b-3.2.2/b-colvis-3.2.2/b-html5-3.2.2/b-print-3.2.2/cr-2.0.4/date-1.5.5/fc-5.0.4/fh-4.0.1/kt-2.12.1/r-3.0.4/rg-1.5.1/rr-1.5.0/sc-2.4.3/sb-1.8.2/sp-2.3.3/sl-3.0.0/sr-1.4.1/datatables.min.js"></script>
-    <script src="https://cdn.datatables.net/v/bs5/jq-3.7.0/jszip-3.10.1/dt-2.2.2/af-2.7.0/b-3.2.2/b-colvis-3.2.2/b-html5-3.2.2/b-print-3.2.2/cr-2.0.4/date-1.5.5/fc-5.0.4/fh-4.0.1/kt-2.12.1/r-3.0.4/rg-1.5.1/rr-1.5.0/sc-2.4.3/sb-1.8.2/sp-2.3.3/sl-3.0.0/sr-1.4.1/datatables.min.js" integrity="sha384-10kTwhFyUU637a6/7q0kLBdo8jQWjxteg63DT/K8Sdq/nCDaDAkH+Nq/MIrsp8wc" crossorigin="anonymous"></script>
-    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.5/dist/jquery.validate.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/jquery-validation-unobtrusive@4.0.0/dist/jquery.validate.unobtrusive.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/dayjs@1/dayjs.min.js"></script>
+    <script src="~/js/site.js" asp-append-version="true"></script>
 
     @await RenderSectionAsync("Scripts", required: false)
     <partial name="_ValidationScriptsPartial" />
+
     <script>
         $(function () {
             $('[data-bs-toggle="tooltip"]').tooltip();
+
+            const openMenusStorageKey = 'wfc.sidebar.openMenus';
+            let savedOpenMenuIds = [];
+            try {
+                savedOpenMenuIds = JSON.parse(localStorage.getItem(openMenusStorageKey) || '[]');
+            } catch { }
+            if (!Array.isArray(savedOpenMenuIds)) savedOpenMenuIds = [];
+
+            const openMenuIds = new Set(savedOpenMenuIds);
+            const currentUrl = new URL(window.location.href);
+            let bestMatch = null;
+            let bestScore = -1;
+
+            document.querySelectorAll('.wfc-sidebar-nav a[href]').forEach(link => {
+                const href = link.getAttribute('href');
+                if (!href) return;
+
+                const linkUrl = new URL(href, window.location.origin);
+                const samePath = currentUrl.pathname.toLowerCase() === linkUrl.pathname.toLowerCase();
+                const childPath = linkUrl.pathname !== '/' && currentUrl.pathname.toLowerCase().startsWith(`${linkUrl.pathname.toLowerCase()}/`);
+                const queryMatches = Array.from(linkUrl.searchParams.entries()).every(([key, value]) => currentUrl.searchParams.get(key) === value);
+                if ((!samePath && !childPath) || !queryMatches) return;
+
+                const score = linkUrl.pathname.length + linkUrl.search.length * 10;
+                if (score > bestScore) {
+                    bestMatch = link;
+                    bestScore = score;
+                }
+            });
+
+            if (bestMatch) {
+                document.querySelectorAll('.wfc-sidebar-link.active').forEach(link => link.classList.remove('active'));
+                bestMatch.classList.add('active');
+                const parentMenuId = bestMatch.closest('.collapse')?.id;
+                if (parentMenuId) openMenuIds.add(parentMenuId);
+            }
+
+            const saveOpenMenus = () => {
+                const ids = Array.from(document.querySelectorAll('.wfc-sidebar-submenu.collapse.show'), menu => menu.id).filter(Boolean);
+                try { localStorage.setItem(openMenusStorageKey, JSON.stringify(ids)); } catch { }
+            };
+
+            document.querySelectorAll('.wfc-sidebar-submenu.collapse').forEach(menu => {
+                const toggle = document.querySelector(`[data-bs-target="#${menu.id}"]`);
+                if (openMenuIds.has(menu.id)) {
+                    menu.classList.add('show');
+                    toggle?.setAttribute('aria-expanded', 'true');
+                }
+                menu.addEventListener('shown.bs.collapse', saveOpenMenus);
+                menu.addEventListener('hidden.bs.collapse', saveOpenMenus);
+            });
+            saveOpenMenus();
+
+            const sidebar = document.getElementById('wfcSidebar');
+            const backdrop = document.getElementById('wfcSidebarBackdrop');
+            const sidebarToggle = document.getElementById('wfcSidebarToggle');
+
+            const updateExpandedSidebarWidth = () => {
+                if (!sidebar || window.innerWidth < 992) return;
+                const textElements = sidebar.querySelectorAll('.wfc-sidebar-link > span, .wfc-sidebar-section, .wfc-sidebar-user > span, .wfc-sidebar-account > a > span');
+                const measureContext = document.createElement('canvas').getContext('2d');
+                const widestText = Math.max(0, ...Array.from(textElements, element => {
+                    const style = window.getComputedStyle(element);
+                    if (measureContext) measureContext.font = `${style.fontStyle} ${style.fontWeight} ${style.fontSize} ${style.fontFamily}`;
+                    return Math.max(element.scrollWidth, measureContext?.measureText(element.textContent?.trim() || '').width ?? 0);
+                }));
+                const logoWidth = sidebar.querySelector('.wfc-sidebar-logo')?.scrollWidth ?? 0;
+                const expandedWidth = Math.min(360, Math.max(260, widestText + 94, logoWidth + 40));
+                document.documentElement.style.setProperty('--wfc-sidebar-expanded-width', `${expandedWidth}px`);
+                try { localStorage.setItem('wfc.sidebar.expandedWidth', String(expandedWidth)); } catch { }
+            };
+
+            const setMobileSidebar = open => {
+                sidebar?.classList.toggle('open', open);
+                backdrop?.classList.toggle('show', open);
+                document.body.classList.toggle('wfc-sidebar-open', open);
+            };
+
+            document.getElementById('wfcSidebarOpen')?.addEventListener('click', () => setMobileSidebar(true));
+            document.getElementById('wfcSidebarClose')?.addEventListener('click', () => setMobileSidebar(false));
+            backdrop?.addEventListener('click', () => setMobileSidebar(false));
+
+            updateExpandedSidebarWidth();
+
+            const setDesktopSidebar = collapsed => {
+                document.documentElement.classList.toggle('wfc-sidebar-collapsed', collapsed);
+                if (sidebarToggle) {
+                    sidebarToggle.setAttribute('aria-expanded', String(!collapsed));
+                    sidebarToggle.title = collapsed ? 'Oldalsáv kinyitása' : 'Oldalsáv összecsukása';
+                    const icon = sidebarToggle.querySelector('i');
+                    icon?.classList.toggle('bi-layout-sidebar-inset', !collapsed);
+                    icon?.classList.toggle('bi-layout-sidebar-inset-reverse', collapsed);
+                }
+                try { localStorage.setItem('wfc.sidebar.collapsed', String(collapsed)); } catch { }
+            };
+
+            setDesktopSidebar(document.documentElement.classList.contains('wfc-sidebar-collapsed'));
+            sidebarToggle?.addEventListener('click', () => setDesktopSidebar(!document.documentElement.classList.contains('wfc-sidebar-collapsed')));
+
+            document.querySelectorAll('.wfc-collapse-toggle').forEach(toggle => {
+                toggle.addEventListener('click', event => {
+                    if (window.innerWidth < 992 || !document.documentElement.classList.contains('wfc-sidebar-collapsed')) return;
+                    event.preventDefault();
+                    event.stopPropagation();
+                    const target = toggle.getAttribute('data-bs-target');
+                    const targetMenu = target ? document.querySelector(target) : null;
+                    setDesktopSidebar(false);
+                    if (targetMenu) bootstrap.Collapse.getOrCreateInstance(targetMenu, { toggle: false }).show();
+                });
+            });
+
+            requestAnimationFrame(() => document.documentElement.classList.remove('wfc-sidebar-initializing'));
         });
     </script>
 </body>

src/WorkFlowCheck.Web/Pages/Shared/_Layout.cshtml.css

@@ -1,48 +1,12 @@
-/* Please see documentation at https://learn.microsoft.com/aspnet/core/client-side/bundling-and-minification
+/* A teljes oldalsáv és a Workflow Check arculat a wwwroot/css/workflow-check.css fájlban van. */
-for details on configuring this project to bundle and minify static web assets. */
 
-a.navbar-brand {
+/* Ez a fájl szándékosan csak a Layout Razor-specifikus finomhangolását tartalmazza. */
-  white-space: normal;
+.modal-header,
-  text-align: center;
+.modal-footer {
-  word-break: break-all;
+    border-color: #d7e2ee;
 }
 
-a {
+.modal-title {
-  color: #0077cc;
+    color: #0b1f3a;
-}
+    font-weight: 700;
-
-.btn-primary {
-  color: #fff;
-  background-color: #1b6ec2;
-  border-color: #1861ac;
-}
-
-.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
-  color: #fff;
-  background-color: #1b6ec2;
-  border-color: #1861ac;
-}
-
-.border-top {
-  border-top: 1px solid #e5e5e5;
-}
-.border-bottom {
-  border-bottom: 1px solid #e5e5e5;
-}
-
-.box-shadow {
-  box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
-}
-
-button.accept-policy {
-  font-size: 1rem;
-  line-height: inherit;
-}
-
-.footer {
-  position: absolute;
-  bottom: 0;
-  width: 100%;
-  white-space: nowrap;
-  line-height: 60px;
 }

src/WorkFlowCheck.Web/Pages/UserAndRole/UserRolePage.cshtml

@@ -20,14 +20,6 @@
                 <th class="text-center">Action</th>
             </tr>
         </thead>
-        <tfoot class="table-light">
-            <tr>
-                <th>ID</th>
-                <th>User Name</th>
-                <th>Role Name</th>
-                <th>Action</th>
-            </tr>
-        </tfoot>
     </table>
 </div>
 

src/WorkFlowCheck.Web/Services/CheckListService.cs

@@ -4,6 +4,7 @@ using Serilog;
 using System.ComponentModel.DataAnnotations;
 using System.Net.Http;
 using System.Reflection;
+using WorkFlowCheck.Common.DataTables;
 using WorkFlowCheck.Common.DTO;
 using WorkFlowCheck.Common.Enums;
 using WorkFlowCheck.Web.Services.Interfaces;
@@ -15,7 +16,34 @@ namespace WorkFlowCheck.Web.Services
         public CheckListService(HttpClient httpClient, IConfiguration configuration, IHttpContextAccessor httpContextAccessor) : base(httpClient, configuration, httpContextAccessor)
         {
         }
+        public async Task<ApiResponseListDTO<List<CheckListHeaderDTO>>> GetFilteredCheckListHeaderAsync(DataTablesRequest dataTablesRequest)
+        {
+            try
+            {
+                string endpoint = $"{_httpClient.BaseAddress}api/CheckList/GetFilteredCheckListHeader";
 
+                using (HttpResponseMessage httpResponseMessage = await _httpClient.PostAsJsonAsync(endpoint, dataTablesRequest))
+                {
+                    httpResponseMessage.EnsureSuccessStatusCode();
+
+                    var jsonString = await httpResponseMessage.Content.ReadAsStringAsync();
+                    var response = JsonConvert.DeserializeObject<ApiResponseListDTO<List<CheckListHeaderDTO>>>(jsonString);
+
+                    return response ?? new ApiResponseListDTO<List<CheckListHeaderDTO>>
+                    {
+                        IsSuccess = false,
+                    };
+                }
+            }
+            catch (Exception ex)
+            {
+                // Hiba visszaadása
+                return new ApiResponseListDTO<List<CheckListHeaderDTO>>
+                {
+                    IsSuccess = false
+                };
+            }
+        }
         public async Task<List<CheckListHeaderDTO>> GetAllCheckListHeaderAsync(int mode = 0)
         {
             var endpoint = $"{_httpClient.BaseAddress}api/CheckList/GetAllCheckListHeaders/{mode}";

src/WorkFlowCheck.Web/Services/Interfaces/ICheckListService.cs

@@ -1,4 +1,5 @@
 using Microsoft.AspNetCore.Mvc.Rendering;
+using WorkFlowCheck.Common.DataTables;
 using WorkFlowCheck.Common.DTO;
 
 namespace WorkFlowCheck.Web.Services.Interfaces
@@ -6,6 +7,7 @@ namespace WorkFlowCheck.Web.Services.Interfaces
     public interface ICheckListService
     {
         Task<CheckListHeaderDTO> GetCheckListHeader(int id);
+        Task<ApiResponseListDTO<List<CheckListHeaderDTO>>> GetFilteredCheckListHeaderAsync(DataTablesRequest dataTablesRequest);
         Task<List<CheckListHeaderDTO>> GetAllCheckListHeaderAsync(int mode = 0);
         Task<ApiResponseDTO<CheckListHeaderDTO>> UpdateCheckListHeader(CheckListHeaderDTO checkListHeaderDTO);
         Task<ApiResponseDTO<byte[]>> CreatePDF(int id);

src/WorkFlowCheck.Web/wwwroot/css/wfc-buttons.css

@@ -0,0 +1,2 @@
+body {
+}

src/WorkFlowCheck.Web/wwwroot/css/wfc-datatables.css

@@ -0,0 +1,2 @@
+body {
+}

src/WorkFlowCheck.Web/wwwroot/css/wfc-forms.css

@@ -0,0 +1,2 @@
+body {
+}

src/WorkFlowCheck.Web/wwwroot/css/wfc.css

@@ -0,0 +1,16 @@
+@import url("wfc-datatables.css");
+@import url("wfc-form.css");
+@import url("wfc-buttons.css");
+
+.sidebar-brand {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    min-height: 90px;
+    padding: 12px 16px;
+}
+
+    .sidebar-brand > a {
+        display: block;
+        flex: 1;
+    }

src/WorkFlowCheck.Web/wwwroot/css/workflow-check.css

@@ -0,0 +1,481 @@
+:root {
+    --wfc-navy-950: #071629;
+    --wfc-navy-900: #0b1f3a;
+    --wfc-navy-800: #0e2c4f;
+    --wfc-navy-700: #123c69;
+    --wfc-blue-500: #38bdf8;
+    --wfc-blue-300: #7dd3fc;
+    --wfc-blue-200: #bae6fd;
+    --wfc-white: #fff;
+    --wfc-surface: #f5f8fc;
+    --wfc-border: #d7e2ee;
+    --wfc-text: #10243e;
+    --wfc-muted: #64748b;
+    --wfc-sidebar-expanded-width: 292px;
+    --wfc-sidebar-collapsed-width: 76px;
+    --wfc-topbar-height: 64px;
+    --wfc-radius: .625rem;
+    --wfc-shadow: 0 8px 24px rgb(11 31 58 / 10%);
+}
+
+html,
+body {
+    width: 100%;
+    height: 100%;
+}
+
+body {
+    margin: 0;
+    overflow: hidden;
+    color: var(--wfc-text);
+    background: var(--wfc-surface);
+    font-family: Inter, "Segoe UI", Arial, sans-serif;
+}
+
+body.wfc-sidebar-open {
+    overflow: hidden;
+}
+
+a {
+    color: var(--wfc-navy-700);
+}
+
+.wfc-shell {
+    display: flex;
+    height: 100vh;
+    min-height: 0;
+}
+
+.wfc-sidebar {
+    position: fixed;
+    inset: 0 auto 0 0;
+    z-index: 1045;
+    display: flex;
+    width: var(--wfc-sidebar-expanded-width);
+    min-width: 0;
+    flex-direction: column;
+    overflow: hidden;
+    color: var(--wfc-white);
+    background: linear-gradient(180deg, var(--wfc-navy-900), var(--wfc-navy-950));
+    box-shadow: 8px 0 24px rgb(7 22 41 / 16%);
+    transition: width .22s ease, transform .22s ease;
+}
+
+.wfc-sidebar-brand {
+    display: flex;
+    min-height: 78px;
+    flex: 0 0 78px;
+    align-items: center;
+    justify-content: space-between;
+    padding: 1rem 1.1rem;
+    border-bottom: 1px solid rgb(255 255 255 / 12%);
+}
+
+.wfc-sidebar-brand > a {
+    display: flex;
+    min-width: 0;
+    align-items: center;
+}
+
+.wfc-sidebar-logo {
+    display: block;
+    width: 100%;
+    max-width: 245px;
+    height: 46px;
+    object-fit: contain;
+    object-position: left center;
+    transition: opacity .14s ease;
+}
+
+.wfc-sidebar-close,
+.wfc-sidebar-open,
+.wfc-sidebar-toggle {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border: 0;
+    border-radius: .5rem;
+}
+
+.wfc-sidebar-close {
+    width: 38px;
+    height: 38px;
+    flex: 0 0 38px;
+    color: var(--wfc-white);
+    background: rgb(255 255 255 / 10%);
+}
+
+.wfc-sidebar-nav {
+    flex: 1 1 auto;
+    padding: .85rem .7rem 1rem;
+    overflow-x: hidden;
+    overflow-y: auto;
+    scrollbar-color: rgb(186 230 253 / 35%) transparent;
+    scrollbar-width: thin;
+}
+
+.wfc-sidebar-section {
+    margin: 1.1rem .75rem .45rem;
+    overflow: hidden;
+    color: var(--wfc-blue-300);
+    font-size: .69rem;
+    font-weight: 800;
+    letter-spacing: .095em;
+    white-space: nowrap;
+}
+
+.wfc-sidebar-link,
+.wfc-sidebar-account a {
+    display: flex;
+    width: 100%;
+    min-width: 0;
+    align-items: center;
+    gap: .75rem;
+    margin: .16rem 0;
+    padding: .7rem .8rem;
+    overflow: hidden;
+    border: 0;
+    border-radius: .52rem;
+    color: #dcebfa;
+    background: transparent;
+    font-size: .92rem;
+    font-weight: 600;
+    line-height: 1.25;
+    text-align: left;
+    text-decoration: none;
+    white-space: nowrap;
+    transition: color .16s ease, background-color .16s ease, box-shadow .16s ease;
+}
+
+.wfc-sidebar-link > i:first-child,
+.wfc-sidebar-account a > i,
+.wfc-sidebar-user > i {
+    width: 1.35rem;
+    flex: 0 0 1.35rem;
+    font-size: 1.1rem;
+    text-align: center;
+}
+
+.wfc-sidebar-link > span,
+.wfc-sidebar-account a > span,
+.wfc-sidebar-user > span {
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.wfc-sidebar-link:hover,
+.wfc-sidebar-account a:hover {
+    color: var(--wfc-white);
+    background: rgb(56 189 248 / 14%);
+}
+
+.wfc-sidebar-link.active {
+    color: var(--wfc-navy-950);
+    background: linear-gradient(90deg, var(--wfc-blue-200), #e5f7ff);
+    box-shadow: inset 4px 0 0 var(--wfc-blue-500), 0 4px 14px rgb(0 0 0 / 12%);
+}
+
+.wfc-collapse-toggle[aria-expanded="true"] .wfc-toggle-chevron {
+    transform: rotate(180deg);
+}
+
+.wfc-toggle-chevron {
+    font-size: .8rem;
+    transition: transform .18s ease;
+}
+
+.wfc-sidebar-submenu {
+    margin: .12rem 0 .42rem;
+    padding-left: .7rem;
+}
+
+.wfc-sidebar-submenu .wfc-sidebar-link {
+    padding-top: .58rem;
+    padding-bottom: .58rem;
+    padding-left: 1rem;
+    color: #c9def2;
+    font-size: .86rem;
+}
+
+/* Az almenü általános világos színe nem írhatja felül az aktív elem kontrasztját. */
+.wfc-sidebar-submenu .wfc-sidebar-link.active,
+.wfc-sidebar-submenu .wfc-sidebar-link.active:hover,
+.wfc-sidebar-submenu .wfc-sidebar-link.active:focus {
+    color: var(--wfc-navy-950);
+    background: linear-gradient(90deg, var(--wfc-blue-200), #f0faff);
+}
+
+.wfc-sidebar-submenu .wfc-sidebar-link.active i {
+    color: var(--wfc-navy-700);
+}
+
+.wfc-sidebar-submenu .wfc-sidebar-link > i:first-child {
+    font-size: .95rem;
+}
+
+.wfc-sidebar-divider {
+    margin: .45rem .8rem;
+    border-color: rgb(255 255 255 / 14%);
+    opacity: 1;
+}
+
+.wfc-sidebar-account {
+    flex: 0 0 auto;
+    padding: .75rem;
+    border-top: 1px solid rgb(255 255 255 / 12%);
+    background: rgb(0 0 0 / 9%);
+}
+
+.wfc-sidebar-user {
+    display: flex;
+    min-width: 0;
+    align-items: center;
+    gap: .75rem;
+    padding: .55rem .8rem .7rem;
+    overflow: hidden;
+    color: var(--wfc-blue-200);
+    font-size: .88rem;
+    font-weight: 700;
+    white-space: nowrap;
+}
+
+.wfc-content {
+    display: flex;
+    width: calc(100% - var(--wfc-sidebar-expanded-width));
+    height: 100vh;
+    min-height: 0;
+    flex-direction: column;
+    margin-left: var(--wfc-sidebar-expanded-width);
+    overflow: hidden;
+    transition: width .22s ease, margin-left .22s ease;
+}
+
+.wfc-topbar {
+    position: sticky;
+    top: 0;
+    z-index: 1030;
+    display: flex;
+    min-height: var(--wfc-topbar-height);
+    align-items: center;
+    gap: .8rem;
+    padding: 0 1.35rem;
+    border-bottom: 1px solid var(--wfc-border);
+    background: rgb(255 255 255 / 94%);
+    box-shadow: 0 3px 16px rgb(11 31 58 / 6%);
+    backdrop-filter: blur(10px);
+}
+
+.wfc-sidebar-open,
+.wfc-sidebar-toggle {
+    width: 40px;
+    height: 40px;
+    flex: 0 0 40px;
+    color: var(--wfc-navy-700);
+    background: #eef6fc;
+    font-size: 1.25rem;
+}
+
+.wfc-sidebar-open:hover,
+.wfc-sidebar-toggle:hover {
+    color: var(--wfc-navy-900);
+    background: var(--wfc-blue-200);
+}
+
+.wfc-topbar-title {
+    overflow: hidden;
+    color: var(--wfc-navy-900);
+    font-size: 1.15rem;
+    font-weight: 750;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.wfc-main {
+    width: 100%;
+    max-width: 100%;
+    min-height: 0;
+    flex: 1 1 auto;
+    padding: 1.5rem;
+    overflow-x: hidden;
+    overflow-y: auto;
+    scrollbar-color: rgb(18 60 105 / 45%) transparent;
+    scrollbar-width: thin;
+}
+
+.wfc-footer {
+    position: relative;
+    z-index: 2;
+    flex: 0 0 auto;
+    min-height: 48px;
+    padding: .78rem 1.5rem;
+    border-top: 1px solid rgb(186 230 253 / 24%);
+    color: #dcebfa;
+    background:
+        radial-gradient(circle at 88% 10%, rgb(56 189 248 / 16%), transparent 20rem),
+        linear-gradient(90deg, var(--wfc-navy-900), var(--wfc-navy-950));
+    box-shadow: 0 -5px 18px rgb(7 22 41 / 12%);
+    font-size: .82rem;
+}
+
+.wfc-footer-content {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: .45rem;
+}
+
+.wfc-footer-content a {
+    margin-left: auto;
+    color: var(--wfc-blue-200);
+    text-decoration: none;
+}
+
+.wfc-footer-content a:hover {
+    color: var(--wfc-white);
+}
+
+.wfc-footer-separator {
+    color: var(--wfc-blue-500);
+}
+
+.wfc-sidebar-backdrop {
+    position: fixed;
+    inset: 0;
+    z-index: 1040;
+    visibility: hidden;
+    background: rgb(7 22 41 / 58%);
+    opacity: 0;
+    transition: visibility .2s ease, opacity .2s ease;
+}
+
+.wfc-sidebar-backdrop.show {
+    visibility: visible;
+    opacity: 1;
+}
+
+.btn-primary {
+    border-color: var(--wfc-navy-700);
+    background-color: var(--wfc-navy-700);
+}
+
+.btn-primary:hover,
+.btn-primary:focus {
+    border-color: var(--wfc-navy-900);
+    background-color: var(--wfc-navy-900);
+}
+
+.card {
+    border-color: var(--wfc-border);
+    border-radius: var(--wfc-radius);
+    box-shadow: var(--wfc-shadow);
+}
+
+html.wfc-sidebar-collapsed .wfc-sidebar {
+    width: var(--wfc-sidebar-collapsed-width);
+}
+
+html.wfc-sidebar-collapsed .wfc-content {
+    width: calc(100% - var(--wfc-sidebar-collapsed-width));
+    margin-left: var(--wfc-sidebar-collapsed-width);
+}
+
+html.wfc-sidebar-collapsed .wfc-sidebar-logo,
+html.wfc-sidebar-collapsed .wfc-sidebar-section,
+html.wfc-sidebar-collapsed .wfc-sidebar-link > span,
+html.wfc-sidebar-collapsed .wfc-sidebar-link > .wfc-toggle-chevron,
+html.wfc-sidebar-collapsed .wfc-sidebar-account span,
+html.wfc-sidebar-collapsed .wfc-sidebar-divider,
+html.wfc-sidebar-collapsed .wfc-sidebar-submenu {
+    display: none;
+}
+
+html.wfc-sidebar-collapsed .wfc-sidebar-brand {
+    justify-content: center;
+    padding-right: .7rem;
+    padding-left: .7rem;
+}
+
+html.wfc-sidebar-collapsed .wfc-sidebar-brand::before {
+    width: 42px;
+    height: 42px;
+    content: "";
+    background: url("../images/favicon/favicon.svg") center / contain no-repeat;
+}
+
+html.wfc-sidebar-collapsed .wfc-sidebar-link,
+html.wfc-sidebar-collapsed .wfc-sidebar-account a,
+html.wfc-sidebar-collapsed .wfc-sidebar-user {
+    justify-content: center;
+    gap: 0;
+    padding-right: .75rem;
+    padding-left: .75rem;
+}
+
+html.wfc-sidebar-initializing .wfc-sidebar,
+html.wfc-sidebar-initializing .wfc-content {
+    transition: none !important;
+}
+
+@media (max-width: 991.98px) {
+    html,
+    body {
+        height: auto;
+        min-height: 100%;
+    }
+
+    body {
+        overflow-x: hidden;
+        overflow-y: auto;
+    }
+
+    body.wfc-sidebar-open {
+        overflow: hidden;
+    }
+
+    .wfc-shell {
+        height: auto;
+        min-height: 100vh;
+    }
+
+    .wfc-sidebar {
+        width: min(88vw, 320px);
+        transform: translateX(-102%);
+    }
+
+    .wfc-sidebar.open {
+        transform: translateX(0);
+    }
+
+    .wfc-content,
+    html.wfc-sidebar-collapsed .wfc-content {
+        width: 100%;
+        height: auto;
+        min-height: 100vh;
+        margin-left: 0;
+        overflow: visible;
+    }
+
+    .wfc-main {
+        min-height: auto;
+        flex: 1 0 auto;
+        padding: 1rem;
+        overflow: visible;
+    }
+
+    .wfc-topbar {
+        padding: 0 .85rem;
+    }
+
+    .wfc-footer {
+        display: none;
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .wfc-sidebar,
+    .wfc-content,
+    .wfc-sidebar-backdrop,
+    .wfc-toggle-chevron {
+        transition: none !important;
+    }
+}

src/WorkFlowCheck.Web/wwwroot/images/favicon/favicon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect width="64" height="64" rx="14" fill="#0B1F3A"/><path d="M13 33h8c4 0 4 7 8 7h7c5 0 5-8 10-8" fill="none" stroke="#BAE6FD" stroke-width="5" stroke-linecap="round"/><circle cx="12" cy="33" r="5" fill="#0B1F3A" stroke="#fff" stroke-width="4"/><circle cx="30" cy="40" r="6" fill="#0B1F3A" stroke="#BAE6FD" stroke-width="4"/><circle cx="47" cy="27" r="8" fill="#0B1F3A" stroke="#38BDF8" stroke-width="4"/><path d="m43 27 3 3 8-9" fill="none" stroke="#38BDF8" stroke-width="4"/></svg>

src/WorkFlowCheck.Web/wwwroot/images/logo/workflow-check-logo-dark.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1080 260" role="img" aria-labelledby="title">
+  <title id="title">Workflow Check – dark background</title>
+  <defs><linearGradient id="flow" x1="35" y1="95" x2="410" y2="95" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#FFFFFF"/><stop offset="1" stop-color="#38BDF8"/></linearGradient></defs>
+  <g transform="translate(5 10) scale(.78)"><path d="M96 128h42c24 0 22 40 46 40h55c28 0 28-40 56-40h63c28 0 28-42 28-68" fill="none" stroke="url(#flow)" stroke-width="22" stroke-linecap="round"/><circle cx="70" cy="128" r="30" fill="#0B1F3A" stroke="#fff" stroke-width="18"/><circle cx="245" cy="168" r="34" fill="#0B1F3A" stroke="#BAE6FD" stroke-width="18"/><circle cx="394" cy="83" r="43" fill="#0B1F3A" stroke="#38BDF8" stroke-width="18"/><path d="m373 82 17 17 43-48" fill="none" stroke="#38BDF8" stroke-width="18"/></g>
+  <text x="385" y="157" fill="#FFFFFF" font-family="Inter,Segoe UI,Arial,sans-serif" font-size="94" font-weight="750" letter-spacing="-3">Workflow</text><text x="816" y="157" fill="#BAE6FD" font-family="Inter,Segoe UI,Arial,sans-serif" font-size="94" font-weight="450" letter-spacing="-3">Check</text>
+</svg>

workflow-check-brand/README.md

@@ -0,0 +1,36 @@
+# Workflow Check arculati csomag
+
+Az **A jel** a webes arculat fő eleme: gyártási folyamat, ellenőrzési pontok és sikeres lezárás. A **B jel** a mobilalkalmazás ikonja.
+
+## Színek
+
+| Név | HEX | Használat |
+|---|---:|---|
+| Deep Navy | `#0B1F3A` | oldalsáv, fő szöveg, elsődleges felület |
+| Process Blue | `#123C69` | gombok, linkek, köztes állapot |
+| Check Blue | `#38BDF8` | aktív elem, pipa, fókusz |
+| Light Blue | `#BAE6FD` | aktív menü, táblázatfejléc |
+| White | `#FFFFFF` | tartalom és kontraszt |
+
+## Webes bekötés
+
+Másold az `assets` és `css` könyvtárat a webprojekt `wwwroot` mappájába, majd a layout `<head>` részében:
+
+```html
+<link rel="icon" href="~/assets/favicon/favicon.ico" sizes="any">
+<link rel="icon" href="~/assets/favicon/favicon.svg" type="image/svg+xml">
+<link rel="apple-touch-icon" href="~/assets/favicon/apple-touch-icon.png">
+<link rel="stylesheet" href="~/css/workflow-check.css" asp-append-version="true">
+```
+
+A `workflow-check.css` a többi fájlt importálja, ezért ezt kell utolsó saját CSS-ként betölteni. A csomag Bootstrap 5 és DataTables felülírásokat is tartalmaz.
+
+## Fájlhasználat
+
+- `workflow-check-logo.svg`: világos hátterű fejléc, belépőoldal, dokumentum.
+- `workflow-check-logo-dark.svg`: sötét oldalsáv vagy sötét fejléc.
+- `workflow-check-symbol.svg`: kompakt webes jel.
+- `workflow-check-app-icon.svg/png`: mobilalkalmazás forrásikon.
+- `favicon.*`: böngésző és kezdőképernyő ikonok.
+
+Az SVG a szerkeszthető mester. A PNG és ICO változatokat ebből kell származtatni.

workflow-check-brand/assets/app-icon/workflow-check-app-icon.svg

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" role="img" aria-labelledby="title">
+  <title id="title">Workflow Check mobile application icon</title>
+  <defs><linearGradient id="bg" x1="130" y1="80" x2="900" y2="960" gradientUnits="userSpaceOnUse"><stop stop-color="#0B1F3A"/><stop offset="1" stop-color="#123C69"/></linearGradient><linearGradient id="accent" x1="512" y1="250" x2="512" y2="820" gradientUnits="userSpaceOnUse"><stop stop-color="#BAE6FD"/><stop offset="1" stop-color="#38BDF8"/></linearGradient></defs>
+  <rect x="32" y="32" width="960" height="960" rx="220" fill="url(#bg)"/>
+  <rect x="286" y="142" width="452" height="740" rx="72" fill="none" stroke="#fff" stroke-width="38"/>
+  <path d="M452 211h120M468 816h88" stroke="#fff" stroke-width="30" stroke-linecap="round"/>
+  <path d="M512 350v132M512 550v72" stroke="url(#accent)" stroke-width="30" stroke-linecap="round"/>
+  <circle cx="512" cy="314" r="62" fill="#0B1F3A" stroke="#fff" stroke-width="30"/><circle cx="512" cy="514" r="62" fill="#0B1F3A" stroke="#BAE6FD" stroke-width="30"/><circle cx="512" cy="690" r="76" fill="#0B1F3A" stroke="#38BDF8" stroke-width="30"/>
+  <path d="m476 688 35 35 83-93" fill="none" stroke="#38BDF8" stroke-width="34" stroke-linecap="square"/>
+</svg>

workflow-check-brand/assets/favicon/favicon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect width="64" height="64" rx="14" fill="#0B1F3A"/><path d="M13 33h8c4 0 4 7 8 7h7c5 0 5-8 10-8" fill="none" stroke="#BAE6FD" stroke-width="5" stroke-linecap="round"/><circle cx="12" cy="33" r="5" fill="#0B1F3A" stroke="#fff" stroke-width="4"/><circle cx="30" cy="40" r="6" fill="#0B1F3A" stroke="#BAE6FD" stroke-width="4"/><circle cx="47" cy="27" r="8" fill="#0B1F3A" stroke="#38BDF8" stroke-width="4"/><path d="m43 27 3 3 8-9" fill="none" stroke="#38BDF8" stroke-width="4"/></svg>

workflow-check-brand/assets/logo/workflow-check-logo-dark.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1080 260" role="img" aria-labelledby="title">
+  <title id="title">Workflow Check – dark background</title>
+  <defs><linearGradient id="flow" x1="35" y1="95" x2="410" y2="95" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#FFFFFF"/><stop offset="1" stop-color="#38BDF8"/></linearGradient></defs>
+  <g transform="translate(5 10) scale(.78)"><path d="M96 128h42c24 0 22 40 46 40h55c28 0 28-40 56-40h63c28 0 28-42 28-68" fill="none" stroke="url(#flow)" stroke-width="22" stroke-linecap="round"/><circle cx="70" cy="128" r="30" fill="#0B1F3A" stroke="#fff" stroke-width="18"/><circle cx="245" cy="168" r="34" fill="#0B1F3A" stroke="#BAE6FD" stroke-width="18"/><circle cx="394" cy="83" r="43" fill="#0B1F3A" stroke="#38BDF8" stroke-width="18"/><path d="m373 82 17 17 43-48" fill="none" stroke="#38BDF8" stroke-width="18"/></g>
+  <text x="385" y="157" fill="#FFFFFF" font-family="Inter,Segoe UI,Arial,sans-serif" font-size="94" font-weight="750" letter-spacing="-3">Workflow</text><text x="816" y="157" fill="#BAE6FD" font-family="Inter,Segoe UI,Arial,sans-serif" font-size="94" font-weight="450" letter-spacing="-3">Check</text>
+</svg>

workflow-check-brand/assets/logo/workflow-check-logo.svg

@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1080 260" role="img" aria-labelledby="title desc">
+  <title id="title">Workflow Check</title>
+  <desc id="desc">Workflow Check primary horizontal logo.</desc>
+  <defs>
+    <linearGradient id="flow" x1="35" y1="95" x2="410" y2="95" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#0B1F3A"/><stop offset=".52" stop-color="#123C69"/><stop offset="1" stop-color="#38BDF8"/>
+    </linearGradient>
+  </defs>
+  <g transform="translate(5 10) scale(.78)">
+    <path d="M96 128h42c24 0 22 40 46 40h55c28 0 28-40 56-40h63c28 0 28-42 28-68" fill="none" stroke="url(#flow)" stroke-width="22" stroke-linecap="round" stroke-linejoin="round"/>
+    <circle cx="70" cy="128" r="30" fill="#fff" stroke="#0B1F3A" stroke-width="18"/>
+    <circle cx="245" cy="168" r="34" fill="#fff" stroke="#123C69" stroke-width="18"/>
+    <circle cx="394" cy="83" r="43" fill="#fff" stroke="#38BDF8" stroke-width="18"/>
+    <path d="m373 82 17 17 43-48" fill="none" stroke="#38BDF8" stroke-width="18"/>
+  </g>
+  <text x="385" y="157" fill="#0B1F3A" font-family="Inter,Segoe UI,Arial,sans-serif" font-size="94" font-weight="750" letter-spacing="-3">Workflow</text>
+  <text x="816" y="157" fill="#123C69" font-family="Inter,Segoe UI,Arial,sans-serif" font-size="94" font-weight="450" letter-spacing="-3">Check</text>
+</svg>

workflow-check-brand/assets/logo/workflow-check-symbol.svg

@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 256" role="img" aria-labelledby="title desc">
+  <title id="title">Workflow Check web symbol</title>
+  <desc id="desc">A three-stage manufacturing workflow ending in a check mark.</desc>
+  <defs>
+    <linearGradient id="flow" x1="55" y1="128" x2="452" y2="128" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#0B1F3A"/><stop offset=".52" stop-color="#123C69"/><stop offset="1" stop-color="#38BDF8"/>
+    </linearGradient>
+  </defs>
+  <path d="M96 128h42c24 0 22 40 46 40h55c28 0 28-40 56-40h63c28 0 28-42 28-68" fill="none" stroke="url(#flow)" stroke-width="22" stroke-linecap="round" stroke-linejoin="round"/>
+  <circle cx="70" cy="128" r="30" fill="#fff" stroke="#0B1F3A" stroke-width="18"/>
+  <circle cx="245" cy="168" r="34" fill="#fff" stroke="#123C69" stroke-width="18"/>
+  <circle cx="394" cy="83" r="43" fill="#fff" stroke="#38BDF8" stroke-width="18"/>
+  <path d="m373 82 17 17 43-48" fill="none" stroke="#38BDF8" stroke-width="18" stroke-linecap="square" stroke-linejoin="miter"/>
+</svg>

workflow-check-brand/css/workflow-check-base.css

@@ -0,0 +1,10 @@
+@import url("workflow-check-variables.css");
+html { font-size: 16px; }
+body { margin: 0; background: var(--wfc-surface); color: var(--wfc-text); font-family: Inter, "Segoe UI", Arial, sans-serif; }
+a { color: var(--wfc-navy-700); text-decoration: none; }
+a:hover { color: var(--wfc-blue-500); }
+.wfc-page-title { margin: 0 0 1.25rem; color: var(--wfc-navy-900); font-size: 1.75rem; font-weight: 700; }
+.wfc-card, .card { border: 1px solid var(--wfc-border); border-radius: var(--wfc-radius); background: var(--wfc-white); box-shadow: var(--wfc-shadow); }
+.wfc-card-header, .card-header { border-bottom: 1px solid var(--wfc-border); background: var(--wfc-white); color: var(--wfc-navy-900); font-weight: 700; }
+.badge.bg-primary { background-color: var(--wfc-navy-700) !important; }
+.text-primary { color: var(--wfc-navy-700) !important; }

workflow-check-brand/css/workflow-check-buttons.css

@@ -0,0 +1,11 @@
+.btn { border-radius: .5rem; font-weight: 650; transition: transform .12s ease,box-shadow .12s ease,background-color .12s ease; }
+.btn:focus-visible { box-shadow: var(--wfc-focus); }
+.btn-primary { border-color: var(--wfc-navy-700); background: var(--wfc-navy-700); color: #fff; }
+.btn-primary:hover,.btn-primary:focus { border-color: var(--wfc-navy-900); background: var(--wfc-navy-900); color: #fff; }
+.btn-info { border-color: var(--wfc-blue-500); background: var(--wfc-blue-500); color: var(--wfc-navy-950); }
+.btn-info:hover { border-color: #159FDC; background: #159FDC; color: var(--wfc-navy-950); }
+.btn-outline-primary { border-color: var(--wfc-navy-700); color: var(--wfc-navy-700); }
+.btn-outline-primary:hover { background: var(--wfc-navy-700); color: #fff; }
+.btn-success { border-color: var(--wfc-success); background: var(--wfc-success); }
+.btn-danger { border-color: var(--wfc-danger); background: var(--wfc-danger); }
+.btn:active { transform: translateY(1px); }

workflow-check-brand/css/workflow-check-datatables.css

@@ -0,0 +1,9 @@
+table.dataTable { border-color: var(--wfc-border); background: #fff; }
+table.dataTable thead th,.table-primary th { border-color: #8ED4F5 !important; background: var(--wfc-blue-200) !important; color: var(--wfc-navy-900) !important; font-weight: 700; }
+table.dataTable tbody tr:hover { background: #EFF9FE !important; }
+.dataTables_wrapper .dataTables_filter input,.dataTables_wrapper .dataTables_length select { border: 1px solid var(--wfc-border); border-radius: .45rem; }
+.dataTables_wrapper .dataTables_filter input:focus,.dataTables_wrapper .dataTables_length select:focus { border-color: var(--wfc-blue-500); outline: 0; box-shadow: var(--wfc-focus); }
+.page-item.active .page-link { border-color: var(--wfc-navy-700); background: var(--wfc-navy-700); }
+.page-link { color: var(--wfc-navy-700); }
+.page-link:focus { box-shadow: var(--wfc-focus); }
+div.dt-processing,.dataTables_processing { border: 1px solid var(--wfc-blue-200) !important; border-radius: .6rem !important; background: var(--wfc-navy-900) !important; color: var(--wfc-white) !important; box-shadow: var(--wfc-shadow); }

workflow-check-brand/css/workflow-check-forms.css

@@ -0,0 +1,7 @@
+.form-label { color: var(--wfc-navy-900); font-weight: 650; }
+.form-control,.form-select { min-height: 42px; border-color: var(--wfc-border); border-radius: .5rem; color: var(--wfc-text); }
+.form-control:focus,.form-select:focus { border-color: var(--wfc-blue-500); box-shadow: var(--wfc-focus); }
+.form-check-input:checked { border-color: var(--wfc-navy-700); background-color: var(--wfc-navy-700); }
+.form-check-input:focus { border-color: var(--wfc-blue-500); box-shadow: var(--wfc-focus); }
+.input-group-text { border-color: var(--wfc-border); background: #EDF4FA; color: var(--wfc-navy-700); }
+.validation-summary-errors,.field-validation-error { color: var(--wfc-danger); }

workflow-check-brand/css/workflow-check-layout.css

@@ -0,0 +1,12 @@
+.wfc-shell { min-height: 100vh; }
+.wfc-sidebar { position: fixed; inset: 0 auto 0 0; z-index: 1040; width: var(--wfc-sidebar-width); overflow-y: auto; color: var(--wfc-white); background: linear-gradient(180deg,var(--wfc-navy-900),var(--wfc-navy-950)); transition: transform .22s ease; }
+.wfc-brand { display: flex; align-items: center; min-height: 78px; padding: 1rem 1.25rem; border-bottom: 1px solid rgb(255 255 255 / 12%); }
+.wfc-brand img { width: 100%; max-height: 46px; object-fit: contain; object-position: left center; }
+.wfc-nav { padding: 1rem .75rem; }
+.wfc-nav-link { display: flex; gap: .75rem; align-items: center; margin: .2rem 0; padding: .72rem .85rem; border-radius: .5rem; color: #DCEBFA; font-weight: 550; }
+.wfc-nav-link:hover { color: var(--wfc-white); background: rgb(56 189 248 / 13%); }
+.wfc-nav-link.active { color: var(--wfc-navy-900); background: var(--wfc-blue-200); box-shadow: inset 4px 0 0 var(--wfc-blue-500); }
+.wfc-content { min-height: 100vh; margin-left: var(--wfc-sidebar-width); }
+.wfc-topbar { position: sticky; top: 0; z-index: 1030; min-height: 64px; border-bottom: 1px solid var(--wfc-border); background: rgb(255 255 255 / 94%); backdrop-filter: blur(10px); }
+.wfc-main { padding: 1.5rem; }
+@media (max-width: 991.98px) { .wfc-sidebar { transform: translateX(-100%); } .wfc-sidebar.is-open { transform: translateX(0); } .wfc-content { margin-left: 0; } .wfc-main { padding: 1rem; } }

workflow-check-brand/css/workflow-check-variables.css

@@ -0,0 +1,19 @@
+:root {
+  --wfc-navy-950: #071629;
+  --wfc-navy-900: #0B1F3A;
+  --wfc-navy-700: #123C69;
+  --wfc-blue-500: #38BDF8;
+  --wfc-blue-200: #BAE6FD;
+  --wfc-white: #FFFFFF;
+  --wfc-surface: #F5F8FC;
+  --wfc-border: #D7E2EE;
+  --wfc-text: #10243E;
+  --wfc-muted: #64748B;
+  --wfc-success: #16875B;
+  --wfc-warning: #E28A17;
+  --wfc-danger: #D64545;
+  --wfc-sidebar-width: 264px;
+  --wfc-radius: .625rem;
+  --wfc-shadow: 0 8px 24px rgb(11 31 58 / 10%);
+  --wfc-focus: 0 0 0 .2rem rgb(56 189 248 / 25%);
+}

workflow-check-brand/css/workflow-check.css

@@ -0,0 +1,6 @@
+@import url("workflow-check-variables.css");
+@import url("workflow-check-base.css");
+@import url("workflow-check-layout.css");
+@import url("workflow-check-buttons.css");
+@import url("workflow-check-forms.css");
+@import url("workflow-check-datatables.css");