fix: Paginations, Numbering and Serializations

TaskTrackingSystem.WebApp/Components/Pages/AuditLogs.razor

@@ -0,0 +1,215 @@
+@page "/audit-logs"
+@using Microsoft.AspNetCore.Authorization
+@using Microsoft.AspNetCore.Components.Authorization
+@using TaskTrackingSystem.Shared.Models.AuditLog
+@using TaskTrackingSystem.WebApp.Components.Partial
+@rendermode @(new InteractiveServerRenderMode(prerender: false))
+@attribute [Authorize(Roles = "Admin")]
+@inject ApiClientService ApiClient
+@inject IJSRuntime JS
+@inject AuthenticationStateProvider AuthStateProvider
+
+<PageTitle>Admin Audit Logs</PageTitle>
+
+<div class="space-y-6">
+    <!-- Page Header -->
+    <div class="flex items-center justify-between">
+        <div>
+            <h2 class="text-3xl font-bold tracking-tight text-slate-900">System Audit Logs</h2>
+            <p class="text-slate-500 mt-1">Monitor administrator actions and security events.</p>
+        </div>
+    </div>
+
+    <!-- Search Panel -->
+    <div class="rounded-xl border border-slate-200 bg-white p-4 shadow-sm mb-4">
+        <div class="flex items-center gap-3">
+            <div class="relative flex-1 max-w-md">
+                <input @bind="searchInput" @bind:event="oninput" @onkeyup="HandleKeyUp" type="text" placeholder="Search by user, action, module, or details..."
+                       class="w-full rounded-lg border border-slate-200 px-3 py-2 text-sm text-slate-900 placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-violet-600 focus:border-transparent transition-all" />
+            </div>
+            <button @onclick="ApplySearch" class="inline-flex items-center rounded-lg bg-violet-600 px-4 py-2.5 text-sm font-medium text-white hover:bg-violet-700 transition-colors shadow-sm">
+                <i data-lucide="search" class="h-4 w-4 mr-2"></i>
+                Search
+            </button>
+            <button @onclick="ResetSearch" class="inline-flex items-center rounded-lg border border-slate-200 bg-white px-4 py-2.5 text-sm font-medium text-slate-700 hover:bg-slate-50 transition-colors shadow-sm">
+                <i data-lucide="rotate-ccw" class="h-4 w-4 mr-2 text-slate-500"></i>
+                Reset
+            </button>
+        </div>
+    </div>
+
+    @if (isLoading)
+    {
+        <LoadingSpinner Message="Loading audit logs..." />
+    }
+    else
+    {
+        <!-- Logs Table -->
+        <div class="rounded-xl border border-slate-200 bg-white shadow-sm overflow-hidden">
+            <table class="w-full">
+                <thead>
+                    <tr class="border-b border-slate-100 bg-slate-50/60">
+                        <th class="px-6 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">No.</th>
+                        <th class="px-6 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Timestamp</th>
+                        <th class="px-6 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">User</th>
+                        <th class="px-6 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Module</th>
+                        <th class="px-6 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Action</th>
+                        <th class="px-6 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Description</th>
+                        <th class="px-6 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">IP Address</th>
+                    </tr>
+                </thead>
+                <tbody class="divide-y divide-slate-100 font-sans">
+                    @if (PagedLogs.Any())
+                    {
+                        @foreach (var entry in PagedLogs.Select((log, index) => (log, index)))
+                        {
+                            var log = entry.log;
+                            <tr class="hover:bg-slate-50/50 transition-colors">
+                                <td class="px-6 py-4 text-sm font-semibold text-slate-500 align-top">@((currentPage - 1) * pageSize + entry.index + 1)</td>
+                                <td class="px-6 py-4 text-xs font-mono text-slate-500 whitespace-nowrap align-top">
+                                    @log.CreatedAt.ToString("dd-MM-yyyy HH:mm:ss")
+                                </td>
+                                <td class="px-6 py-4 align-top">
+                                    <div class="flex items-center gap-2">
+                                        <span class="flex h-6 w-6 items-center justify-center rounded-full bg-violet-100 text-violet-700 text-[10px] font-bold shrink-0">
+                                            @(log.UserFullName.Length > 0 ? log.UserFullName[0].ToString().ToUpper() : "S")
+                                        </span>
+                                        <div>
+                                            <p class="text-xs font-semibold text-slate-800">@log.UserFullName</p>
+                                            <p class="text-[10px] text-slate-400">@@@log.Username</p>
+                                        </div>
+                                    </div>
+                                </td>
+                                <td class="px-6 py-4 align-top">
+                                    <span class="inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-bold bg-slate-100 text-slate-700 border border-slate-200">
+                                        @log.Module
+                                    </span>
+                                </td>
+                                <td class="px-6 py-4 align-top">
+                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-[10px] font-bold @GetActionBadge(log.Action)">
+                                        @log.Action
+                                    </span>
+                                </td>
+                                <td class="px-6 py-4 text-xs text-slate-700 whitespace-normal break-words align-top">
+                                    @log.Description
+                                </td>
+                                <td class="px-6 py-4 text-xs font-mono text-slate-500 whitespace-nowrap align-top">
+                                    @(string.IsNullOrWhiteSpace(log.IpAddress) ? "N/A" : log.IpAddress)
+                                </td>
+                            </tr>
+                        }
+                    }
+                    else
+                    {
+                        <EmptyState ColSpan="7" Icon="history" Title="No audit logs" Subtitle="No security events or administrator operations were found." />
+                    }
+                </tbody>
+            </table>
+
+            <!-- Pagination -->
+            <Pagination CurrentPage="currentPage"
+                        TotalPages="TotalPages"
+                        PageSize="pageSize"
+                        TotalCount="FilteredLogs.Count()"
+                        OnPageChanged="HandlePageChanged"
+                        OnPageSizeChanged="HandlePageSizeChanged" />
+        </div>
+    }
+</div>
+
+@code {
+    private bool isLoading = true;
+    private List<AuditLogDto> auditLogs = new();
+    private string searchInput = "";
+    private string searchQuery = "";
+
+    // Pagination state
+    private int currentPage = 1;
+    private int pageSize = 15;
+
+    protected override async Task OnInitializedAsync()
+    {
+        await LoadLogs();
+    }
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        await JS.InvokeVoidAsync("initIcons");
+    }
+
+    private async Task LoadLogs()
+    {
+        isLoading = true;
+        var client = ApiClient.CreateClient();
+        try
+        {
+            var url = "AuditLog";
+            if (!string.IsNullOrWhiteSpace(searchQuery))
+            {
+                url += $"?search={Uri.EscapeDataString(searchQuery)}";
+            }
+            auditLogs = await client.GetFromJsonAsync<List<AuditLogDto>>(url, Serialization.CaseInsensitive) ?? new();
+        }
+        catch (Exception ex)
+        {
+            Console.WriteLine($"Load audit logs error: {ex.Message}");
+        }
+        finally
+        {
+            isLoading = false;
+        }
+    }
+
+    private void ApplySearch()
+    {
+        searchQuery = searchInput;
+        currentPage = 1;
+        _ = LoadLogs();
+    }
+
+    private void ResetSearch()
+    {
+        searchInput = "";
+        searchQuery = "";
+        currentPage = 1;
+        _ = LoadLogs();
+    }
+
+    private void HandleKeyUp(KeyboardEventArgs e)
+    {
+        if (e.Key == "Enter")
+        {
+            ApplySearch();
+        }
+    }
+
+    private IEnumerable<AuditLogDto> FilteredLogs => auditLogs.OrderByDescending(l => l.CreatedAt);
+
+    private int TotalPages => (int)Math.Ceiling((double)FilteredLogs.Count() / pageSize);
+
+    private IEnumerable<AuditLogDto> PagedLogs =>
+        FilteredLogs.Skip((currentPage - 1) * pageSize).Take(pageSize);
+
+    private void HandlePageChanged(int page)
+    {
+        currentPage = page;
+    }
+
+    private void HandlePageSizeChanged(int size)
+    {
+        pageSize = size;
+        currentPage = 1;
+    }
+
+    private string GetActionBadge(string action)
+    {
+        return action.ToLower() switch
+        {
+            "create" => "bg-emerald-50 text-emerald-700 border border-emerald-200",
+            "update" => "bg-amber-50 text-amber-700 border border-amber-200",
+            "delete" => "bg-rose-50 text-rose-700 border border-rose-200",
+            "assignaccess" => "bg-violet-50 text-violet-700 border border-violet-200",
+            _ => "bg-blue-50 text-blue-700 border border-blue-200"
+        };
+    }
+}

TaskTrackingSystem.WebApp/Components/Pages/Backlog.razor

@@ -0,0 +1,306 @@
+@page "/tasks/backlog"
+@using Microsoft.AspNetCore.Authorization
+@using Microsoft.AspNetCore.Components.Authorization
+@using TaskTrackingSystem.Shared
+@using TaskTrackingSystem.Shared.Models.Task
+@using TaskTrackingSystem.Shared.Models.Project
+@using TaskTrackingSystem.Shared.Models.User
+@rendermode @(new InteractiveServerRenderMode(prerender: false))
+@attribute [Authorize]
+@inject ApiClientService ApiClient
+@inject NavigationManager Navigation
+@inject IJSRuntime JS
+@inject AuthenticationStateProvider AuthStateProvider
+@inject MenuAuthorizationService MenuAuthorization
+
+<PageTitle>Task Backlog</PageTitle>
+
+<div class="space-y-6">
+    <!-- Page Header -->
+    <div class="flex items-center justify-between">
+        <div>
+            <h2 class="text-3xl font-bold tracking-tight text-slate-900">Task Backlog</h2>
+            <p class="text-slate-500 mt-1">Track backlog tasks, update status, and collaborate inline where allowed.</p>
+        </div>
+    </div>
+
+    @if (isLoading)
+    {
+        <LoadingSpinner Message="Loading backlog..." />
+    }
+    else
+    {
+        <div class="grid grid-cols-1 lg:grid-cols-3 xl:grid-cols-4 gap-6 items-start">
+            <!-- Left Column: Backlog Task List -->
+            <div class="lg:col-span-1 xl:col-span-1 bg-white border border-slate-200 rounded-2xl p-4 shadow-sm flex flex-col h-[700px]">
+                <h3 class="text-sm font-semibold uppercase tracking-wider text-slate-400 mb-3 flex items-center gap-2">
+                    <i data-lucide="layers" class="h-4 w-4"></i> Tasks List
+                </h3>
+
+                <!-- Search & Filters -->
+                <div class="space-y-2.5 mb-4 shrink-0">
+                    <div class="relative">
+                        <input @bind="searchInput" @bind:event="oninput" type="text" placeholder="Search tasks..." 
+                               class="w-full rounded-lg border border-slate-200 pl-8 pr-3 py-1.5 text-xs text-slate-900 placeholder:text-slate-400 focus:outline-none focus:ring-1 focus:ring-violet-600 focus:border-transparent transition-all" />
+                        <i data-lucide="search" class="absolute left-2.5 top-2.5 h-3.5 w-3.5 text-slate-400"></i>
+                    </div>
+
+                    <div class="grid grid-cols-2 gap-2">
+                        <select @bind="filterStatusId" class="rounded-lg border border-slate-200 px-2 py-1.5 text-[11px] text-slate-700 bg-white focus:outline-none focus:ring-1 focus:ring-violet-600 transition-all">
+                            <option value="0">All Status</option>
+                            <option value="1">To Do</option>
+                            <option value="2">In Progress</option>
+                            <option value="3">Done</option>
+                        </select>
+
+                        <select @bind="filterPriorityId" class="rounded-lg border border-slate-200 px-2 py-1.5 text-[11px] text-slate-700 bg-white focus:outline-none focus:ring-1 focus:ring-violet-600 transition-all">
+                            <option value="0">All Priority</option>
+                            <option value="1">Low</option>
+                            <option value="2">Medium</option>
+                            <option value="3">High</option>
+                        </select>
+                    </div>
+
+                    <select @bind="filterProjectId" class="w-full rounded-lg border border-slate-200 px-2 py-1.5 text-[11px] text-slate-700 bg-white focus:outline-none focus:ring-1 focus:ring-violet-600 transition-all">
+                        <option value="0">All Projects</option>
+                        @foreach (var p in projects)
+                        {
+                            <option value="@p.Id">@p.Name</option>
+                        }
+                    </select>
+                </div>
+
+                <!-- Grouped Scrollable Tasks list -->
+                <div class="flex-1 overflow-y-auto space-y-4 pr-1 scrollbar-thin">
+                    @if (projects.Any())
+                    {
+                        var displayedAnyTask = false;
+
+                        @foreach (var proj in projects.Where(p => filterProjectId == 0 || p.Id == filterProjectId))
+                        {
+                            var projTasks = FilteredTasks.Where(t => t.ProjectId == proj.Id).ToList();
+                            @if (projTasks.Any())
+                            {
+                                displayedAnyTask = true;
+                                <div>
+                                    <div class="text-[10px] font-bold text-slate-400 uppercase tracking-wider mb-2 flex items-center justify-between border-b border-slate-100 pb-1">
+                                        <span class="truncate pr-2" title="@proj.Name">@proj.Name</span>
+                                        <span class="px-1.5 py-0.5 rounded-full bg-slate-100 text-slate-500 font-semibold font-sans text-[8px]">@projTasks.Count</span>
+                                    </div>
+                                    <div class="space-y-2">
+                                        @foreach (var task in projTasks)
+                                        {
+                                            <button @onclick="() => SelectTask(task.Id)" 
+                                                    class="w-full text-left p-3 rounded-xl border transition-all flex flex-col gap-1.5 @(selectedTaskId == task.Id ? "bg-violet-50/70 border-violet-200 shadow-sm" : "bg-slate-50/50 border-slate-100 hover:bg-slate-50 hover:border-slate-200")">
+                                                <div class="flex items-center justify-between gap-2">
+                                                    <span class="text-[9px] font-mono text-slate-400">TASK-#@task.Id</span>
+                                                    <span class="inline-flex items-center px-1.5 py-0.5 rounded-full text-[8px] font-semibold @GetPriorityBadge(task.PriorityId)">
+                                                        @GetPriorityLabel(task.PriorityId)
+                                                    </span>
+                                                </div>
+                                                <h4 class="text-xs font-bold text-slate-800 line-clamp-2 @(task.StatusId == 3 ? "line-through text-slate-400" : "")">
+                                                    @task.Title
+                                                </h4>
+                                                <div class="flex items-center justify-between gap-2 mt-0.5">
+                                                    <span class="inline-flex items-center px-1.5 py-0.5 rounded-full text-[8px] font-semibold @GetStatusBadge(task.StatusId)">
+                                                        @GetStatusLabel(task.StatusId)
+                                                    </span>
+                                                    <span class="text-[9px] text-slate-400 shrink-0 font-sans">
+                                                        Due @DisplayFormats.Date(task.DueDate)
+                                                    </span>
+                                                </div>
+                                            </button>
+                                        }
+                                    </div>
+                                </div>
+                            }
+                        }
+
+                        @if (!displayedAnyTask)
+                        {
+                            <div class="text-center py-12 text-slate-400 space-y-2">
+                                <i data-lucide="check-square" class="h-8 w-8 mx-auto text-slate-300"></i>
+                                <p class="text-xs">No tasks match filters.</p>
+                            </div>
+                        }
+                    }
+                    else
+                    {
+                        <div class="text-center py-12 text-slate-400 space-y-2">
+                            <i data-lucide="folder-open" class="h-8 w-8 mx-auto text-slate-300"></i>
+                            <p class="text-xs">No projects found.</p>
+                        </div>
+                    }
+                </div>
+            </div>
+
+            <!-- Right Column: Task Details Panel -->
+            <div class="lg:col-span-2 xl:col-span-3">
+                @if (selectedTaskId.HasValue)
+                {
+                    <div class="bg-white border border-slate-200 rounded-2xl p-6 shadow-sm min-h-[600px]">
+                        <TaskDetails TaskId="selectedTaskId.Value" ViewMode="Embedded" OnTaskUpdated="RefreshTasksList" />
+                    </div>
+                }
+                else
+                {
+                    <div class="bg-white border border-slate-200 rounded-2xl p-12 shadow-sm text-center flex flex-col items-center justify-center min-h-[600px] text-slate-400">
+                        <i data-lucide="layers" class="h-12 w-12 text-slate-300 mb-3 animate-pulse"></i>
+                        <h4 class="text-sm font-bold text-slate-700">Select a task from the backlog</h4>
+                        <p class="text-xs text-slate-400 mt-1 max-w-sm">Click any task on the left list to view details, update status, post comments, or upload file attachments inline.</p>
+                    </div>
+                }
+            </div>
+        </div>
+    }
+</div>
+
+@code {
+    private bool isLoading = true;
+    private bool isAdmin = false;
+    private bool isManager = false;
+    private long currentUserId = 0;
+
+    private List<TaskDto> taskList = new();
+    private List<ProjectDto> projects = new();
+    private long? selectedTaskId;
+
+    // Filters state
+    private string searchInput = "";
+    private string searchQuery => searchInput.Trim().ToLower();
+    private long filterProjectId = 0;
+    private long filterStatusId = 0;
+    private long filterPriorityId = 0;
+
+    protected override async Task OnInitializedAsync()
+    {
+        var authState = await AuthStateProvider.GetAuthenticationStateAsync();
+        var user = authState.User;
+        isAdmin = user.IsInRole("Admin");
+        isManager = user.IsInRole("Manager");
+        var idStr = user.FindFirst(System.Security.Claims.ClaimTypes.NameIdentifier)?.Value;
+        if (idStr != null) long.TryParse(idStr, out currentUserId);
+
+        await LoadData();
+    }
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        await JS.InvokeVoidAsync("initIcons");
+    }
+
+    private async Task LoadData()
+    {
+        isLoading = true;
+        var client = ApiClient.CreateClient();
+        try
+        {
+            var tasksTask = client.GetFromJsonAsync<List<TaskDto>>("Task", Serialization.CaseInsensitive);
+            var projectsTask = client.GetFromJsonAsync<List<ProjectDto>>("Project", Serialization.CaseInsensitive);
+            await System.Threading.Tasks.Task.WhenAll(tasksTask, projectsTask);
+
+            var allTasks = tasksTask.Result ?? new();
+            // Non-admin / non-manager: only show tasks assigned to them
+            taskList = (!(isAdmin || isManager) && currentUserId > 0)
+                ? allTasks.Where(t => t.AssignedTo == currentUserId).ToList()
+                : allTasks;
+
+            projects = projectsTask.Result ?? new();
+
+            // Auto-select first task if list is not empty
+            var filtered = FilteredTasks.ToList();
+            if (filtered.Any())
+            {
+                selectedTaskId = filtered.First().Id;
+            }
+        }
+        catch (Exception ex)
+        {
+            Console.WriteLine($"Backlog load error: {ex.Message}");
+        }
+        finally
+        {
+            isLoading = false;
+        }
+    }
+
+    private async Task RefreshTasksList()
+    {
+        // Re-load tasks from API when updated inline
+        var client = ApiClient.CreateClient();
+        try
+        {
+            var allTasks = await client.GetFromJsonAsync<List<TaskDto>>("Task", Serialization.CaseInsensitive) ?? new();
+            taskList = (!(isAdmin || isManager) && currentUserId > 0)
+                ? allTasks.Where(t => t.AssignedTo == currentUserId).ToList()
+                : allTasks;
+        }
+        catch (Exception ex)
+        {
+            Console.WriteLine($"Refresh tasks error: {ex.Message}");
+        }
+    }
+
+    private void SelectTask(long taskId)
+    {
+        selectedTaskId = taskId;
+    }
+
+    private IEnumerable<TaskDto> FilteredTasks
+    {
+        get
+        {
+            var result = taskList.AsEnumerable();
+            if (!string.IsNullOrWhiteSpace(searchQuery))
+            {
+                result = result.Where(t => t.Title.ToLower().Contains(searchQuery) 
+                    || (t.Description != null && t.Description.ToLower().Contains(searchQuery)));
+            }
+            if (filterProjectId > 0)
+            {
+                result = result.Where(t => t.ProjectId == filterProjectId);
+            }
+            if (filterStatusId > 0)
+            {
+                result = result.Where(t => t.StatusId == filterStatusId);
+            }
+            if (filterPriorityId > 0)
+            {
+                result = result.Where(t => t.PriorityId == filterPriorityId);
+            }
+            return result;
+        }
+    }
+
+    private string GetStatusLabel(long statusId) => statusId switch
+    {
+        1 => "To Do",
+        2 => "In Progress",
+        3 => "Done",
+        _ => "Unknown"
+    };
+
+    private string GetStatusBadge(long statusId) => statusId switch
+    {
+        1 => "bg-slate-100 text-slate-800 border border-slate-200",
+        2 => "bg-blue-50 text-blue-700 border border-blue-100",
+        3 => "bg-emerald-50 text-emerald-700 border border-emerald-100",
+        _ => "bg-slate-50 text-slate-600"
+    };
+
+    private string GetPriorityLabel(long priorityId) => priorityId switch
+    {
+        1 => "Low",
+        2 => "Medium",
+        3 => "High",
+        _ => "Unknown"
+    };
+
+    private string GetPriorityBadge(long priorityId) => priorityId switch
+    {
+        1 => "bg-slate-100 text-slate-600",
+        2 => "bg-amber-50 text-amber-700 border border-amber-100",
+        3 => "bg-rose-50 text-rose-700 border border-rose-100",
+        _ => "bg-slate-50 text-slate-600"
+    };
+}

TaskTrackingSystem.WebApp/Components/Pages/EmployeeReport.razor

@@ -131,6 +131,7 @@
                 <table class="w-full">
                     <thead>
                         <tr class="border-b border-slate-100 bg-slate-50/60">
+                            <th class="px-6 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">No.</th>
                             <th class="px-6 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Employee</th>
                             <th class="px-6 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Total Assigned</th>
                             <th class="px-6 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Completed Tasks</th>
@@ -141,9 +142,11 @@
                     <tbody class="divide-y divide-slate-100">
                         @if (PagedList.Any())
                         {
-                            @foreach (var emp in PagedList)
+                            @foreach (var entry in PagedList.Select((emp, index) => (emp, index)))
                             {
+                                var emp = entry.emp;
                                 <tr class="hover:bg-slate-50/50 transition-colors">
+                                    <td class="px-6 py-4 text-sm font-semibold text-slate-500">@((currentPage - 1) * pageSize + entry.index + 1)</td>
                                     <td class="px-6 py-4">
                                         <div class="flex items-center space-x-3">
                                             <span class="flex h-9 w-9 items-center justify-center rounded-full bg-slate-100 text-slate-700 font-semibold text-xs">
@@ -182,7 +185,7 @@
                         else
                         {
                             <tr>
-                                <td colspan="5" class="px-6 py-12 text-center">
+                                <td colspan="6" class="px-6 py-12 text-center">
                                     <p class="text-sm text-slate-400">No employee data found matching criteria.</p>
                                 </td>
                             </tr>
@@ -361,7 +364,7 @@
             });
         }
 
-        displayList = metrics.OrderByDescending(m => m.Efficiency).ToList();
+        displayList = metrics.OrderBy(m => m.FullName).ToList();
     }
 
     private async Task DownloadExcel()

TaskTrackingSystem.WebApp/Components/Pages/KanbanBoard.razor

@@ -1,5 +1,4 @@
 @page "/projects/{ProjectId:long}/tasks"
-@page "/board"
 @using Microsoft.AspNetCore.Authorization
 @rendermode @(new InteractiveServerRenderMode(prerender: false))
 @attribute [Microsoft.AspNetCore.Authorization.Authorize]
@@ -307,7 +306,7 @@
         }
     }
 
-    private void GoBack() => Navigation.NavigateTo("/projects");
+    private void GoBack() => Navigation.NavigateTo("/projects/all");
 
     private void OpenCreateTaskModal()
     {
@@ -383,7 +382,7 @@
             if (response.IsSuccessStatusCode)
             {
                 CloseTaskModal();
-                Navigation.NavigateTo("/tasks");
+                Navigation.NavigateTo("/tasks/all");
             }
             else
             {

TaskTrackingSystem.WebApp/Components/Pages/OverdueTasksReport.razor

@@ -132,6 +132,7 @@
             <table class="w-full">
                 <thead>
                     <tr class="border-b border-slate-100 bg-slate-50/60">
+                        <th class="px-6 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">No.</th>
                         <th class="px-6 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Task</th>
                         <th class="px-6 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Project</th>
                         <th class="px-6 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Assignee</th>
@@ -145,12 +146,14 @@
                 <tbody class="divide-y divide-slate-100">
                     @if (PagedTasks.Any())
                     {
-                        @foreach (var task in PagedTasks)
+                        @foreach (var entry in PagedTasks.Select((task, index) => (task, index)))
                         {
+                            var task = entry.task;
                             var daysOverdue = (DateTime.Today - task.DueDate).Days;
                             var assignee = allUsers.FirstOrDefault(u => u.Id == task.AssignedTo);
                             var project = allProjects.FirstOrDefault(p => p.Id == task.ProjectId);
                             <tr class="hover:bg-slate-50/50 transition-colors">
+                                <td class="px-6 py-4 text-sm font-semibold text-slate-500 align-top">@((currentPage - 1) * pageSize + entry.index + 1)</td>
                                 <td class="px-6 py-4">
                                     <div>
                                         <p class="text-sm font-semibold text-slate-900">@task.Title</p>
@@ -239,7 +242,7 @@
                     }
                     else
                     {
-                        <EmptyState ColSpan="7" Icon="check-circle" Title="No overdue tasks" Subtitle="Great! No tasks are overdue or at risk based on the current filters." />
+                        <EmptyState ColSpan="8" Icon="check-circle" Title="No overdue tasks" Subtitle="Great! No tasks are overdue or at risk based on the current filters." />
                     }
                 </tbody>
             </table>
@@ -348,7 +351,7 @@
             if (appliedPriority > 0)
                 result = result.Where(t => t.PriorityId == appliedPriority);
 
-            return result.OrderByDescending(t => (DateTime.Today - t.DueDate).Days);
+            return result.OrderBy(t => t.Title).ThenBy(t => t.DueDate);
         }
     }
 

TaskTrackingSystem.WebApp/Components/Pages/ProjectAssign.razor

@@ -432,7 +432,7 @@
                 statusMessage = "Project assignments saved successfully!";
                 successMessage = "Assignment saved successfully!";
                 isError = false;
-                Navigation.NavigateTo("/projects");
+                Navigation.NavigateTo("/projects/all");
             }
             else
             {

TaskTrackingSystem.WebApp/Components/Pages/ProjectProgressReport.razor

@@ -172,6 +172,7 @@
                 <table class="w-full">
                     <thead>
                         <tr class="border-b border-slate-100 bg-slate-50/60">
+                            <th class="px-6 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">No.</th>
                             <th class="px-6 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Project Name</th>
                             <th class="px-6 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Start Date</th>
                             <th class="px-6 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">End Date</th>
@@ -183,9 +184,11 @@
                     <tbody class="divide-y divide-slate-100">
                         @if (PagedList.Any())
                         {
-                            @foreach (var proj in PagedList)
+                            @foreach (var entry in PagedList.Select((proj, index) => (proj, index)))
                             {
+                                var proj = entry.proj;
                                 <tr class="hover:bg-slate-50/50 transition-colors">
+                                    <td class="px-6 py-4 text-sm font-semibold text-slate-500">@((currentPage - 1) * pageSize + entry.index + 1)</td>
                                     <td class="px-6 py-4 text-sm font-semibold text-slate-900">@proj.ProjectName</td>
                                     <td class="px-6 py-4 text-sm text-slate-600">@DisplayFormats.Date(proj.StartDate)</td>
                                     <td class="px-6 py-4 text-sm text-slate-600">@DisplayFormats.Date(proj.EndDate)</td>
@@ -205,7 +208,7 @@
                         else
                         {
                             <tr>
-                                <td colspan="6" class="px-6 py-12 text-center">
+                                <td colspan="7" class="px-6 py-12 text-center">
                                     <p class="text-sm text-slate-400">No project data found matching criteria.</p>
                                 </td>
                             </tr>
@@ -403,7 +406,7 @@
             });
         }
 
-        displayList = metrics.OrderByDescending(m => m.Progress).ToList();
+        displayList = metrics.OrderBy(m => m.ProjectName).ToList();
 
         // Calculate card statistics
         totalActiveProjects = displayList.Count;

TaskTrackingSystem.WebApp/Components/Pages/Projects.razor

@@ -60,6 +60,7 @@
             <table class="w-full">
                 <thead>
                     <tr class="border-b border-slate-100 bg-slate-50/60">
+                        <th class="px-6 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">No.</th>
                         <th class="px-6 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Name</th>
                         <th class="px-6 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Start Date</th>
                         <th class="px-6 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">End Date</th>
@@ -70,9 +71,11 @@
                 <tbody class="divide-y divide-slate-100">
                     @if (PagedProjects.Any())
                     {
-                        @foreach (var project in PagedProjects)
+                        @foreach (var entry in PagedProjects.Select((project, index) => (project, index)))
                         {
+                            var project = entry.project;
                             <tr class="hover:bg-slate-50/50 transition-colors">
+                                <td class="px-6 py-4 text-sm font-semibold text-slate-500">@((currentPage - 1) * pageSize + entry.index + 1)</td>
                                 <td class="px-6 py-4">
                                     <button @onclick="() => NavigateToKanban(project.Id)" class="text-sm font-semibold text-slate-900 hover:text-violet-600 transition-colors">
                                         @project.Name
@@ -118,7 +121,7 @@
                     }
                     else
                     {
-                        <EmptyState ColSpan="5" Icon="folder-kanban" Title="No projects yet" Subtitle="@(canCreateProject ? "Create your first project to get started." : "You have not been assigned to any projects.")" />
+                        <EmptyState ColSpan="6" Icon="folder-kanban" Title="No projects yet" Subtitle="@(canCreateProject ? "Create your first project to get started." : "You have not been assigned to any projects.")" />
                     }
                 </tbody>
             </table>

TaskTrackingSystem.WebApp/Components/Pages/Roles.razor

@@ -59,6 +59,7 @@
             <table class="w-full">
                 <thead>
                     <tr class="border-b border-slate-100 bg-slate-50/60">
+                        <th class="px-6 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">No.</th>
                         <th class="px-6 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Role</th>
                         <th class="px-6 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Description</th>
                         <th class="px-6 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Created</th>
@@ -68,9 +69,11 @@
                 <tbody class="divide-y divide-slate-100">
                     @if (PagedRoles.Any())
                     {
-                        @foreach (var role in PagedRoles)
+                        @foreach (var entry in PagedRoles.Select((role, index) => (role, index)))
                         {
+                            var role = entry.role;
                             <tr class="hover:bg-slate-50/50 transition-colors">
+                                <td class="px-6 py-4 text-sm font-semibold text-slate-500">@((currentPage - 1) * pageSize + entry.index + 1)</td>
                                 <td class="px-6 py-4">
                                     <div class="flex items-center space-x-3">
                                         <span class="flex h-9 w-9 items-center justify-center rounded-lg bg-indigo-50 text-indigo-600">
@@ -111,7 +114,7 @@
                     }
                     else
                     {
-                        <EmptyState ColSpan="4" Icon="shield-check" Title="No roles yet" Subtitle="Create your first role to get started." />
+                        <EmptyState ColSpan="5" Icon="shield-check" Title="No roles yet" Subtitle="Create your first role to get started." />
                     }
                 </tbody>
             </table>

TaskTrackingSystem.WebApp/Components/Pages/TaskAssign.razor

@@ -504,7 +504,7 @@
                 statusMessage = "Task assignee updated successfully!";
                 successMessage = "Assignment saved successfully!";
                 isError = false;
-                Navigation.NavigateTo("/tasks");
+                Navigation.NavigateTo("/tasks/all");
             }
             else
             {

TaskTrackingSystem.WebApp/Components/Pages/TaskDetails.razor

@@ -0,0 +1,934 @@
+@page "/tasks/{TaskId:long}/details"
+@using Microsoft.AspNetCore.Authorization
+@using Microsoft.AspNetCore.Components.Authorization
+@using Microsoft.AspNetCore.Components.Forms
+@using TaskTrackingSystem.Shared
+@using TaskTrackingSystem.Shared.Models.Task
+@using TaskTrackingSystem.Shared.Models.Comment
+@using TaskTrackingSystem.Shared.Models.Attachment
+@using TaskTrackingSystem.Shared.Models.Project
+@using TaskTrackingSystem.Shared.Models.User
+@using TaskTrackingSystem.WebApp.Components.Partial
+@rendermode @(new InteractiveServerRenderMode(prerender: false))
+@attribute [Authorize]
+@inject ApiClientService ApiClient
+@inject IJSRuntime JS
+@inject NavigationManager Navigation
+@inject AuthenticationStateProvider AuthStateProvider
+@inject MenuAuthorizationService MenuAuthorization
+
+<PageTitle>Task Details</PageTitle>
+
+<div class="space-y-6">
+    @if (ViewMode != "Embedded")
+    {
+        <!-- Breadcrumbs & Actions -->
+        <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
+            <div class="flex items-center space-x-2 text-sm text-slate-500">
+                <a href="/dashboard" class="hover:text-violet-600 transition-colors">Workspace</a>
+                <i data-lucide="chevron-right" class="h-3.5 w-3.5"></i>
+                <a href="/tasks" class="hover:text-violet-600 transition-colors">Tasks</a>
+                <i data-lucide="chevron-right" class="h-3.5 w-3.5"></i>
+                <span class="text-slate-800 font-medium">Task Details</span>
+            </div>
+            <a href="/tasks" class="inline-flex items-center rounded-lg border border-slate-200 bg-white px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50 transition-colors shadow-sm">
+                <i data-lucide="arrow-left" class="h-4 w-4 mr-2 text-slate-500"></i>
+                Back to Tasks
+            </a>
+        </div>
+    }
+
+    @if (isLoading)
+    {
+        <LoadingSpinner Message="Loading task details..." />
+    }
+    else if (task == null)
+    {
+        <div class="rounded-2xl border border-slate-200 bg-white p-12 text-center">
+            <i data-lucide="alert-circle" class="h-10 w-10 mx-auto text-red-500 mb-3"></i>
+            <h4 class="text-lg font-bold text-slate-800">Task Not Found</h4>
+            <p class="text-sm text-slate-400 mt-1">The task you are looking for does not exist or has been deleted.</p>
+        </div>
+    }
+    else
+    {
+        <!-- Task Header Card -->
+        <div class="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm">
+            <div class="flex flex-wrap items-start justify-between gap-4">
+                <div class="space-y-2 flex-1 min-w-0">
+                    <div class="flex flex-wrap items-center gap-2">
+                        <span class="text-xs font-bold font-mono text-slate-400">TASK-#@task.Id</span>
+                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold @GetStatusBadge(task.StatusId)">
+                            @GetStatusLabel(task.StatusId)
+                        </span>
+                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold @GetPriorityBadge(task.PriorityId)">
+                            @GetPriorityLabel(task.PriorityId)
+                        </span>
+                        @if (project != null)
+                        {
+                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold bg-violet-50 text-violet-700 border border-violet-100">
+                                <i data-lucide="folder" class="h-3 w-3 mr-1.5"></i>
+                                @project.Name
+                            </span>
+                        }
+                    </div>
+                    @if (isEditingTitle)
+                    {
+                        <div class="flex items-center gap-2 max-w-xl mt-1">
+                            <input @bind="tempTitle" type="text" class="flex-1 rounded-lg border border-slate-200 px-3 py-1 text-lg font-bold text-slate-900 focus:outline-none focus:ring-2 focus:ring-violet-600" />
+                            <button @onclick="CancelEditTitle" class="px-2.5 py-1 text-xs font-medium text-slate-500 hover:bg-slate-100 rounded-lg transition-colors">Cancel</button>
+                            <button @onclick="SaveTitle" disabled="@isSavingTitle" class="px-2.5 py-1 text-xs font-medium text-white bg-violet-600 hover:bg-violet-700 rounded-lg transition-colors shadow-sm">Save</button>
+                        </div>
+                    }
+                    else
+                    {
+                        <h2 class="text-2xl font-bold text-slate-900 leading-tight flex items-center gap-2 group">
+                            @task.Title
+                            @if (hasTaskManagePermission)
+                            {
+                                <button @onclick="StartEditTitle" class="opacity-0 group-hover:opacity-100 p-1 text-slate-400 hover:text-violet-600 transition-all rounded-lg hover:bg-slate-50" title="Edit title">
+                                    <i data-lucide="pencil" class="h-4 w-4"></i>
+                                </button>
+                            }
+                        </h2>
+                    }
+                </div>
+            </div>
+        </div>
+
+        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
+            <!-- Left Grid: Task Details & Description -->
+            <div class="lg:col-span-2 space-y-6">
+                <!-- Description Card -->
+                <div class="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm space-y-4">
+                    <div class="flex items-center justify-between">
+                        <h3 class="text-sm font-semibold uppercase tracking-wider text-slate-400 flex items-center gap-2">
+                            <i data-lucide="align-left" class="h-4 w-4"></i> Description
+                        </h3>
+                        @if (hasTaskManagePermission && !isEditingDescription)
+                        {
+                            <button @onclick="StartEditDescription" class="inline-flex items-center text-xs font-semibold text-violet-600 hover:text-violet-800 transition-colors">
+                                <i data-lucide="pencil" class="h-3 w-3 mr-1"></i> Edit
+                            </button>
+                        }
+                    </div>
+                    @if (isEditingDescription)
+                    {
+                        <div class="space-y-3">
+                            <textarea @bind="tempDescription" rows="4" class="w-full text-sm rounded-xl border border-slate-200 p-3 text-slate-900 focus:outline-none focus:ring-2 focus:ring-violet-600 focus:border-transparent transition-all"></textarea>
+                            <div class="flex items-center gap-2 justify-end">
+                                <button @onclick="CancelEditDescription" class="px-3 py-1.5 text-xs font-medium text-slate-500 hover:bg-slate-100 rounded-lg transition-colors">Cancel</button>
+                                <button @onclick="SaveDescription" disabled="@isSavingDescription" class="px-3 py-1.5 text-xs font-medium text-white bg-violet-600 hover:bg-violet-700 rounded-lg transition-colors shadow-sm">
+                                    @(isSavingDescription ? "Saving..." : "Save")
+                                </button>
+                            </div>
+                        </div>
+                    }
+                    else
+                    {
+                        <div class="text-sm text-slate-700 leading-relaxed min-h-[120px] whitespace-pre-wrap">
+                            @(string.IsNullOrWhiteSpace(task.Description) ? "No description provided for this task." : task.Description)
+                        </div>
+                    }
+                </div>
+
+                <!-- Properties Grid (Pristine grid alignment in uniform 2-column layout) -->
+                <div class="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm">
+                    <h3 class="text-sm font-semibold uppercase tracking-wider text-slate-400 flex items-center gap-2 mb-5">
+                        <i data-lucide="info" class="h-4 w-4"></i> Properties
+                    </h3>
+                    <div class="grid grid-cols-1 md:grid-cols-2 gap-x-8 gap-y-5 text-sm font-sans">
+                        <!-- Status Property (Free for everyone) -->
+                        <div class="flex flex-col gap-1.5">
+                            <span class="text-xs font-bold uppercase tracking-wider text-slate-400">Status</span>
+                            <select value="@task.StatusId" @onchange="OnStatusChanged" class="h-9 rounded-lg border border-slate-200 px-3 text-sm text-slate-800 focus:outline-none focus:ring-2 focus:ring-violet-600 focus:border-transparent bg-white w-full transition-all cursor-pointer shadow-sm">
+                                <option value="1">To Do</option>
+                                <option value="2">In Progress</option>
+                                <option value="3">Done</option>
+                            </select>
+                        </div>
+
+                        <!-- Priority Property -->
+                        <div class="flex flex-col gap-1.5">
+                            <span class="text-xs font-bold uppercase tracking-wider text-slate-400">Priority</span>
+                            @if (hasTaskManagePermission)
+                            {
+                                <select value="@task.PriorityId" @onchange="OnPriorityChanged" class="h-9 rounded-lg border border-slate-200 px-3 text-sm text-slate-800 focus:outline-none focus:ring-2 focus:ring-violet-600 focus:border-transparent bg-white w-full transition-all cursor-pointer shadow-sm">
+                                    <option value="1">Low</option>
+                                    <option value="2">Medium</option>
+                                    <option value="3">High</option>
+                                </select>
+                            }
+                            else
+                            {
+                                <div class="h-9 flex items-center px-1 text-sm text-slate-800 cursor-not-allowed select-none">
+                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold @GetPriorityBadge(task.PriorityId)">
+                                        @GetPriorityLabel(task.PriorityId)
+                                    </span>
+                                </div>
+                            }
+                        </div>
+
+                        <!-- Assignee Property -->
+                        <div class="flex flex-col gap-1.5">
+                            <span class="text-xs font-bold uppercase tracking-wider text-slate-400">Assignee</span>
+                            @if (hasTaskManagePermission)
+                            {
+                                <select value="@(task.AssignedTo ?? 0)" @onchange="OnAssigneeChanged" class="h-9 rounded-lg border border-slate-200 px-3 text-sm text-slate-800 focus:outline-none focus:ring-2 focus:ring-violet-600 focus:border-transparent bg-white w-full transition-all cursor-pointer shadow-sm">
+                                    <option value="0">Unassigned</option>
+                                    @foreach (var u in allUsers)
+                                    {
+                                        <option value="@u.Id">@u.FirstName @u.LastName</option>
+                                    }
+                                </select>
+                            }
+                            else
+                            {
+                                <div class="h-9 flex items-center px-1 text-sm text-slate-800 cursor-not-allowed select-none gap-2">
+                                    @if (assignee != null)
+                                    {
+                                        <span class="flex h-5 w-5 items-center justify-center rounded-full bg-violet-100 text-violet-700 text-[10px] font-bold">
+                                            @(assignee.FirstName.Length > 0 ? assignee.FirstName[0].ToString().ToUpper() : "")
+                                        </span>
+                                        <span class="font-medium text-slate-700">@assignee.FirstName @assignee.LastName</span>
+                                    }
+                                    else
+                                    {
+                                        <span class="text-slate-400 italic">Unassigned</span>
+                                    }
+                                </div>
+                            }
+                        </div>
+
+                        <!-- Due Date Property -->
+                        <div class="flex flex-col gap-1.5">
+                            <span class="text-xs font-bold uppercase tracking-wider text-slate-400">Due Date</span>
+                            @if (hasTaskManagePermission)
+                            {
+                                <input type="date" value="@task.DueDate.ToString("yyyy-MM-dd")" @onchange="OnDueDateChanged" class="h-9 rounded-lg border border-slate-200 px-3 text-sm text-slate-800 focus:outline-none focus:ring-2 focus:ring-violet-600 focus:border-transparent bg-white w-full transition-all cursor-pointer shadow-sm" />
+                            }
+                            else
+                            {
+                                <div class="h-9 flex items-center px-1 text-sm text-slate-800 cursor-not-allowed select-none font-medium text-slate-700">
+                                    <i data-lucide="calendar" class="h-4 w-4 mr-2 text-slate-400"></i>
+                                    @DisplayFormats.Date(task.DueDate)
+                                </div>
+                            }
+                        </div>
+
+                        <!-- Estimated Hours Property -->
+                        <div class="flex flex-col gap-1.5">
+                            <span class="text-xs font-bold uppercase tracking-wider text-slate-400">Estimated Hours</span>
+                            @if (hasTaskManagePermission)
+                            {
+                                <div class="relative flex items-center w-full">
+                                    <input type="number" step="0.5" min="0" max="999" value="@task.EstimatedHours" @onchange="OnEstimatedHoursChanged" placeholder="0.0" class="h-9 rounded-lg border border-slate-200 pl-3 pr-8 text-sm text-slate-800 focus:outline-none focus:ring-2 focus:ring-violet-600 focus:border-transparent bg-white w-full transition-all cursor-pointer shadow-sm" />
+                                    <span class="absolute right-3 text-xs text-slate-400 pointer-events-none">hr</span>
+                                </div>
+                            }
+                            else
+                            {
+                                <div class="h-9 flex items-center px-1 text-sm text-slate-800 cursor-not-allowed select-none font-medium text-slate-700">
+                                    <i data-lucide="clock" class="h-4 w-4 mr-2 text-slate-400"></i>
+                                    @(task.EstimatedHours.HasValue ? $"{task.EstimatedHours} hr" : "Not set")
+                                </div>
+                            }
+                        </div>
+
+                        <!-- Created At Property -->
+                        <div class="flex flex-col gap-1.5">
+                            <span class="text-xs font-bold uppercase tracking-wider text-slate-400">Created At</span>
+                            <div class="h-9 flex items-center px-1 border-b border-transparent text-sm text-slate-800 cursor-default select-none font-medium text-slate-700">
+                                <i data-lucide="calendar-plus" class="h-4 w-4 mr-2 text-slate-400"></i>
+                                @task.CreatedAt.ToString("dd-MM-yyyy HH:mm")
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Right Grid: Collaboration Hub (Comments & Attachments) -->
+            <div class="space-y-6">
+                <div class="rounded-2xl border border-slate-200 bg-white shadow-sm overflow-hidden flex flex-col h-[580px]">
+                    <!-- Hub Tabs -->
+                    <div class="flex border-b border-slate-100 bg-slate-50/50 p-1">
+                        <button @onclick='() => SetTab("comments")' class="flex-1 py-2 rounded-lg text-xs font-bold flex items-center justify-center gap-2 transition-all @(currentTab == "comments" ? "bg-white text-slate-800 shadow-sm" : "text-slate-500 hover:text-slate-800")">
+                            <i data-lucide="message-square" class="h-4 w-4"></i>
+                            <span>Comments (@comments.Count)</span>
+                        </button>
+                        <button @onclick='() => SetTab("files")' class="flex-1 py-2 rounded-lg text-xs font-bold flex items-center justify-center gap-2 transition-all @(currentTab == "files" ? "bg-white text-slate-800 shadow-sm" : "text-slate-500 hover:text-slate-800")">
+                            <i data-lucide="paperclip" class="h-4 w-4"></i>
+                            <span>Files (@attachments.Count)</span>
+                        </button>
+                    </div>
+
+                    <!-- Hub Body -->
+                    <div class="flex-1 overflow-y-auto p-4 min-h-0">
+                        @if (currentTab == "comments")
+                        {
+                            <!-- Comments List -->
+                            <div class="space-y-4 font-sans">
+                                @if (comments.Any())
+                                {
+                                    @foreach (var c in comments)
+                                    {
+                                        <div class="flex items-start gap-3">
+                                            <span class="flex h-7 w-7 items-center justify-center rounded-full bg-violet-100 text-violet-700 text-xs font-bold shrink-0 mt-0.5">
+                                                @(c.UserFullName.Length > 0 ? c.UserFullName[0].ToString().ToUpper() : "U")
+                                            </span>
+                                            <div class="flex-1 min-w-0 bg-slate-50 rounded-xl p-3 border border-slate-100">
+                                                <div class="flex items-center justify-between gap-2">
+                                                    <span class="text-xs font-bold text-slate-800 truncate">@c.UserFullName</span>
+                                                    <span class="text-[9px] text-slate-400 shrink-0 font-sans">@c.CreatedAt.ToString("g")</span>
+                                                </div>
+                                                <p class="text-xs text-slate-400 mt-0.5">@c.UserRoleName</p>
+                                                <div class="text-xs text-slate-700 mt-2 whitespace-pre-wrap break-words">@c.Message</div>
+                                            </div>
+                                            @if (c.UserId == currentUserId || isAdmin)
+                                            {
+                                                <button @onclick="() => ConfirmDeleteComment(c.Id)" class="p-1 text-slate-300 hover:text-rose-500 rounded-lg transition-colors shrink-0" title="Delete comment">
+                                                    <i data-lucide="trash-2" class="h-3.5 w-3.5"></i>
+                                                </button>
+                                            }
+                                        </div>
+                                    }
+                                }
+                                else
+                                {
+                                    <div class="text-center py-12 text-slate-400 space-y-2">
+                                        <i data-lucide="messages-square" class="h-8 w-8 mx-auto text-slate-300"></i>
+                                        <p class="text-xs">No comments posted yet.</p>
+                                        <p class="text-[10px]">Start the conversation below!</p>
+                                    </div>
+                                }
+                            </div>
+                        }
+                        else
+                        {
+                            <!-- Attachments List -->
+                            <div class="space-y-3 font-sans">
+                                @if (attachments.Any())
+                                {
+                                    @foreach (var file in attachments)
+                                    {
+                                        <div class="flex items-center justify-between p-2.5 rounded-xl border border-slate-200 bg-white hover:bg-slate-50/50 transition-colors gap-3">
+                                            <div class="flex items-center gap-2.5 min-w-0">
+                                                <span class="flex h-8 w-8 items-center justify-center rounded-lg bg-slate-100 text-slate-500 shrink-0">
+                                                    <i data-lucide="@GetFileIcon(file.FileType)" class="h-4 w-4"></i>
+                                                </span>
+                                                <div class="min-w-0">
+                                                    <p class="text-xs font-semibold text-slate-800 truncate" title="@file.FileName">@file.FileName</p>
+                                                    <p class="text-[10px] text-slate-400 mt-0.5 font-sans">@FormatBytes(file.FileSizeInBytes) • by @file.CreatedByName</p>
+                                                </div>
+                                            </div>
+                                            <div class="flex items-center gap-1.5 shrink-0">
+                                                <a href="@($"{ApiClient.BaseUrl}/api/TaskDetails/attachments/{file.Id}/download")" target="_blank" class="p-1.5 text-slate-400 hover:text-violet-600 hover:bg-violet-50 rounded-lg transition-all" title="Download">
+                                                    <i data-lucide="download" class="h-4 w-4"></i>
+                                                </a>
+                                                @if (file.CreatedBy == currentUserId || isAdmin)
+                                                {
+                                                    <button @onclick="() => ConfirmDeleteAttachment(file.Id)" class="p-1.5 text-slate-300 hover:text-rose-500 hover:bg-rose-50 rounded-lg transition-all" title="Delete file">
+                                                        <i data-lucide="trash-2" class="h-4 w-4"></i>
+                                                    </button>
+                                                }
+                                            </div>
+                                        </div>
+                                    }
+                                }
+                                else
+                                {
+                                    <div class="text-center py-8 text-slate-400 space-y-2">
+                                        <i data-lucide="file-up" class="h-8 w-8 mx-auto text-slate-300"></i>
+                                        <p class="text-xs">No attachments found.</p>
+                                    </div>
+                                }
+                            </div>
+                        }
+                    </div>
+
+                    <!-- Hub Footer (Inputs) (Free for everyone) -->
+                    <div class="p-4 border-t border-slate-100 bg-slate-50/50">
+                        @if (currentTab == "comments")
+                        {
+                            <div class="flex items-start gap-2">
+                                <div class="flex-1">
+                                    <textarea @bind="newCommentMessage" rows="2" placeholder="Write a comment..." class="w-full rounded-xl border border-slate-200 px-3 py-2 text-xs text-slate-900 placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-violet-600 focus:border-transparent transition-all" disabled="@isSavingComment"></textarea>
+                                    @if (!string.IsNullOrEmpty(commentError))
+                                    {
+                                        <p class="text-[10px] text-red-500 mt-1 font-sans">@commentError</p>
+                                    }
+                                </div>
+                                <button @onclick="PostComment" disabled="@(isSavingComment || string.IsNullOrWhiteSpace(newCommentMessage))" class="rounded-xl bg-violet-600 text-white p-2.5 hover:bg-violet-700 disabled:opacity-50 transition-all shadow-sm shrink-0">
+                                    <i data-lucide="send" class="h-4 w-4"></i>
+                                </button>
+                            </div>
+                        }
+                        else
+                        {
+                            <div>
+                                <InputFile OnChange="OnInputFileChange" class="hidden" id="fileUpload" disabled="@isUploading" />
+                                <label for="fileUpload" class="cursor-pointer flex flex-col items-center justify-center border-2 border-dashed border-slate-200 rounded-xl p-4 hover:border-violet-500 hover:bg-violet-50/20 transition-all">
+                                    @if (isUploading)
+                                    {
+                                        <LoadingSpinner Message="Uploading file..." />
+                                    }
+                                    else
+                                    {
+                                        <i data-lucide="upload-cloud" class="h-7 w-7 text-slate-400 mb-1.5"></i>
+                                        <span class="text-xs font-semibold text-slate-600">Click to upload file</span>
+                                        <span class="text-[9px] text-slate-400 mt-0.5">Maximum size: 10MB</span>
+                                    }
+                                </label>
+                                @if (!string.IsNullOrEmpty(uploadError))
+                                {
+                                    <p class="text-[10px] text-red-500 mt-1.5 font-sans">@uploadError</p>
+                                }
+                            </div>
+                        }
+                    </div>
+                </div>
+            </div>
+        </div>
+    }
+</div>
+
+@* Confirm Actions dialog *@
+<ConfirmDialog IsVisible="showConfirm"
+               Title="@confirmTitle"
+               Message="@confirmMessage"
+               ConfirmText="Yes, Delete"
+               Icon="trash-2"
+               IconBgClass="bg-rose-50"
+               IconTextClass="text-rose-500"
+               ButtonClass="bg-rose-600 hover:bg-rose-700"
+               OnConfirm="ExecuteConfirmAction"
+               OnCancel="CancelConfirm" />
+
+@code {
+    [Parameter] public long TaskId { get; set; }
+    [Parameter] public string? ViewMode { get; set; }
+    [Parameter] public EventCallback OnTaskUpdated { get; set; }
+
+    private bool isLoading = true;
+    private TaskDto? task;
+    private ProjectDto? project;
+    private UserDto? assignee;
+    private List<CommentDto> comments = new();
+    private List<FileAttachmentDto> attachments = new();
+    private List<UserDto> allUsers = new();
+
+    private bool isAdmin = false;
+    private bool canEditTask = false;
+    private bool hasTaskManagePermission = false;
+    private long currentUserId = 0;
+    private string userRoleName = "Employee";
+
+    private List<string> scopes = new();
+
+    private string currentTab = "comments";
+
+    // Comments Form
+    private string newCommentMessage = "";
+    private bool isSavingComment = false;
+    private string? commentError;
+
+    // Attachments Form
+    private bool isUploading = false;
+    private string? uploadError;
+
+    // Confirm dialog
+    private bool showConfirm = false;
+    private string confirmTitle = "";
+    private string confirmMessage = "";
+    private Func<Task>? confirmAction;
+
+    // Inline edit states
+    private bool isEditingDescription = false;
+    private bool isSavingDescription = false;
+    private string tempDescription = "";
+
+    private bool isEditingTitle = false;
+    private bool isSavingTitle = false;
+    private string tempTitle = "";
+
+    private long lastLoadedTaskId = 0;
+
+    protected override async Task OnInitializedAsync()
+    {
+        var authState = await AuthStateProvider.GetAuthenticationStateAsync();
+        var user = authState.User;
+        isAdmin = user.IsInRole("Admin");
+
+        // Task details editing is driven by role permissions so future roles can be granted access.
+        canEditTask = isAdmin || await MenuAuthorization.HasAccessCodeAsync(user, "Tasks_Update");
+        hasTaskManagePermission = canEditTask;
+
+        var roleClaim = user.FindFirst(System.Security.Claims.ClaimTypes.Role)?.Value;
+        userRoleName = roleClaim ?? "Employee";
+
+        var idStr = user.FindFirst(System.Security.Claims.ClaimTypes.NameIdentifier)?.Value;
+        if (idStr != null) long.TryParse(idStr, out currentUserId);
+    }
+
+    protected override async Task OnParametersSetAsync()
+    {
+        if (TaskId > 0 && TaskId != lastLoadedTaskId)
+        {
+            lastLoadedTaskId = TaskId;
+            assignee = null;
+            await LoadAllData();
+        }
+    }
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        await JS.InvokeVoidAsync("initIcons");
+    }
+
+    private void SetTab(string tab)
+    {
+        currentTab = tab;
+        _ = InvokeAsync(async () => {
+            await Task.Delay(50);
+            await JS.InvokeVoidAsync("initIcons");
+        });
+    }
+
+    private async Task LoadAllData()
+    {
+        isLoading = true;
+        var client = ApiClient.CreateClient();
+        try
+        {
+            var taskUrl = $"Task/{TaskId}";
+            var commentsUrl = $"TaskDetails/tasks/{TaskId}/comments";
+            var attachmentsUrl = $"TaskDetails/tasks/{TaskId}/attachments";
+            var usersUrl = "User";
+
+            var taskResponseTask = client.GetAsync(taskUrl);
+            var commentsResponseTask = client.GetAsync(commentsUrl);
+            var attachmentsResponseTask = client.GetAsync(attachmentsUrl);
+            var usersResponseTask = client.GetAsync(usersUrl);
+
+            await Task.WhenAll(taskResponseTask, commentsResponseTask, attachmentsResponseTask, usersResponseTask);
+
+            var taskResponse = taskResponseTask.Result;
+            if (taskResponse.IsSuccessStatusCode)
+            {
+                task = await taskResponse.Content.ReadFromJsonAsync<TaskDto>(Serialization.CaseInsensitive);
+            }
+
+            var commentsResponse = commentsResponseTask.Result;
+            if (commentsResponse.IsSuccessStatusCode)
+            {
+                comments = await commentsResponse.Content.ReadFromJsonAsync<List<CommentDto>>(Serialization.CaseInsensitive) ?? new();
+            }
+
+            var attachmentsResponse = attachmentsResponseTask.Result;
+            if (attachmentsResponse.IsSuccessStatusCode)
+            {
+                attachments = await attachmentsResponse.Content.ReadFromJsonAsync<List<FileAttachmentDto>>(Serialization.CaseInsensitive) ?? new();
+            }
+
+            var usersResponse = usersResponseTask.Result;
+            if (usersResponse.IsSuccessStatusCode)
+            {
+                allUsers = await usersResponse.Content.ReadFromJsonAsync<List<UserDto>>(Serialization.CaseInsensitive) ?? new();
+            }
+
+            if (task != null)
+            {
+                // Fetch project details
+                var projResponse = await client.GetAsync($"Project/{task.ProjectId}");
+                if (projResponse.IsSuccessStatusCode)
+                {
+                    project = await projResponse.Content.ReadFromJsonAsync<ProjectDto>(Serialization.CaseInsensitive);
+                }
+
+                // Set assignee details
+                if (task.AssignedTo.HasValue)
+                {
+                    assignee = allUsers.FirstOrDefault(u => u.Id == task.AssignedTo.Value);
+                }
+
+                CalculateScopes();
+            }
+        }
+        catch (Exception ex)
+        {
+            Console.WriteLine($"Load task details error: {ex.Message}");
+        }
+        finally
+        {
+            isLoading = false;
+        }
+    }
+
+    private void CalculateScopes()
+    {
+        scopes = new List<string>();
+
+        if (task == null) return;
+
+        if (hasTaskManagePermission)
+        {
+            scopes.Add("task:all");
+            scopes.Add("task:write");
+            scopes.Add("comment:write");
+        }
+        else
+        {
+            scopes.Add("task:read");
+            // Comments stay available to everyone who can view the task.
+            scopes.Add("comment:write");
+        }
+    }
+
+    // ─── INLINE MUTATIONS ───────────────────────────────────────────────────
+
+    private async Task OnStatusChanged(ChangeEventArgs e)
+    {
+        if (task == null) return;
+        if (long.TryParse(e.Value?.ToString(), out var newStatusId))
+        {
+            var client = ApiClient.CreateClient();
+            try
+            {
+                var response = await client.PatchAsync($"Task/{task.Id}/status?statusId={newStatusId}", null);
+                if (response.IsSuccessStatusCode)
+                {
+                    task.StatusId = newStatusId;
+                    await OnTaskUpdated.InvokeAsync();
+                    await JS.InvokeVoidAsync("initIcons");
+                }
+            }
+            catch (Exception ex)
+            {
+                Console.WriteLine($"Update status error: {ex.Message}");
+            }
+        }
+    }
+
+    private async Task OnPriorityChanged(ChangeEventArgs e)
+    {
+        if (long.TryParse(e.Value?.ToString(), out var newPriorityId))
+        {
+            await UpdateTaskProperty(dto => dto.PriorityId = newPriorityId);
+        }
+    }
+
+    private async Task OnAssigneeChanged(ChangeEventArgs e)
+    {
+        if (long.TryParse(e.Value?.ToString(), out var assigneeId))
+        {
+            var newAssigneeId = assigneeId > 0 ? (long?)assigneeId : null;
+            await UpdateTaskProperty(dto => dto.AssignedTo = newAssigneeId);
+            assignee = newAssigneeId.HasValue ? allUsers.FirstOrDefault(u => u.Id == newAssigneeId.Value) : null;
+        }
+    }
+
+    private async Task OnDueDateChanged(ChangeEventArgs e)
+    {
+        if (DateTime.TryParse(e.Value?.ToString(), out var newDueDate))
+        {
+            await UpdateTaskProperty(dto => dto.DueDate = newDueDate);
+        }
+    }
+
+    private async Task OnEstimatedHoursChanged(ChangeEventArgs e)
+    {
+        var input = e.Value?.ToString();
+        decimal? newEstimatedHours = null;
+        if (!string.IsNullOrWhiteSpace(input) && decimal.TryParse(input, out var val))
+        {
+            newEstimatedHours = val;
+        }
+        await UpdateTaskProperty(dto => dto.EstimatedHours = newEstimatedHours);
+    }
+
+    private async Task UpdateTaskProperty(Action<UpdateTaskDto> applyChange)
+    {
+        if (task == null) return;
+
+        var dto = new UpdateTaskDto
+        {
+            Title = task.Title,
+            Description = task.Description,
+            StatusId = task.StatusId,
+            PriorityId = task.PriorityId,
+            DueDate = task.DueDate,
+            AssignedTo = task.AssignedTo,
+            AssignedBy = task.AssignedBy,
+            EstimatedHours = task.EstimatedHours
+        };
+
+        applyChange(dto);
+
+        var client = ApiClient.CreateClient();
+        try
+        {
+            var response = await client.PutAsJsonAsync($"Task/{task.Id}", dto);
+            if (response.IsSuccessStatusCode)
+            {
+                task.Title = dto.Title;
+                task.Description = dto.Description;
+                task.StatusId = dto.StatusId;
+                task.PriorityId = dto.PriorityId;
+                task.DueDate = dto.DueDate;
+                task.AssignedTo = dto.AssignedTo;
+                task.EstimatedHours = dto.EstimatedHours;
+
+                await OnTaskUpdated.InvokeAsync();
+                await JS.InvokeVoidAsync("initIcons");
+            }
+        }
+        catch (Exception ex)
+        {
+            Console.WriteLine($"Update task property error: {ex.Message}");
+        }
+    }
+
+    private void StartEditDescription()
+    {
+        if (task == null) return;
+        tempDescription = task.Description ?? "";
+        isEditingDescription = true;
+    }
+
+    private void CancelEditDescription()
+    {
+        isEditingDescription = false;
+    }
+
+    private async Task SaveDescription()
+    {
+        isSavingDescription = true;
+        await UpdateTaskProperty(dto => dto.Description = tempDescription);
+        isEditingDescription = false;
+        isSavingDescription = false;
+    }
+
+    private void StartEditTitle()
+    {
+        if (task == null) return;
+        tempTitle = task.Title;
+        isEditingTitle = true;
+    }
+
+    private void CancelEditTitle()
+    {
+        isEditingTitle = false;
+    }
+
+    private async Task SaveTitle()
+    {
+        if (string.IsNullOrWhiteSpace(tempTitle)) return;
+        isSavingTitle = true;
+        await UpdateTaskProperty(dto => dto.Title = tempTitle.Trim());
+        isEditingTitle = false;
+        isSavingTitle = false;
+    }
+
+    // ─── COMMENTS ACTIONS ───────────────────────────────────────────────────
+
+    private async Task PostComment()
+    {
+        if (string.IsNullOrWhiteSpace(newCommentMessage)) return;
+
+        isSavingComment = true;
+        commentError = null;
+        try
+        {
+            var client = ApiClient.CreateClient();
+            var response = await client.PostAsJsonAsync($"TaskDetails/tasks/{TaskId}/comments", new CreateCommentDto { Message = newCommentMessage });
+            var res = await response.Content.ReadFromJsonAsync<Result<CommentDto>>(Serialization.CaseInsensitive);
+
+            if (response.IsSuccessStatusCode && res != null && res.IsSuccess)
+            {
+                comments.Add(res.Value);
+                newCommentMessage = "";
+                await JS.InvokeVoidAsync("initIcons");
+            }
+            else
+            {
+                commentError = res?.ErrorMessage ?? "Failed to post comment.";
+            }
+        }
+        catch (Exception ex)
+        {
+            commentError = ex.Message;
+        }
+        finally
+        {
+            isSavingComment = false;
+        }
+    }
+
+    private void ConfirmDeleteComment(long commentId)
+    {
+        confirmTitle = "Delete Comment?";
+        confirmMessage = "Are you sure you want to delete this comment? This action cannot be undone.";
+        confirmAction = () => DeleteComment(commentId);
+        showConfirm = true;
+    }
+
+    private async Task DeleteComment(long commentId)
+    {
+        var client = ApiClient.CreateClient();
+        try
+        {
+            var response = await client.DeleteAsync($"TaskDetails/comments/{commentId}");
+            var res = await response.Content.ReadFromJsonAsync<Result>(Serialization.CaseInsensitive);
+            if (response.IsSuccessStatusCode && res != null && res.IsSuccess)
+            {
+                var idx = comments.FindIndex(c => c.Id == commentId);
+                if (idx >= 0) comments.RemoveAt(idx);
+            }
+        }
+        catch (Exception ex)
+        {
+            Console.WriteLine($"Delete comment error: {ex.Message}");
+        }
+    }
+
+    // ─── ATTACHMENTS ACTIONS ────────────────────────────────────────────────
+
+    private async Task OnInputFileChange(InputFileChangeEventArgs e)
+    {
+        var file = e.File;
+        if (file == null) return;
+
+        isUploading = true;
+        uploadError = null;
+
+        try
+        {
+            var content = new MultipartFormDataContent();
+            var fileContent = new StreamContent(file.OpenReadStream(maxAllowedSize: 10 * 1024 * 1024));
+            fileContent.Headers.ContentType = new System.Net.Http.Headers.MediaTypeHeaderValue(file.ContentType);
+            content.Add(fileContent, "file", file.Name);
+
+            var client = ApiClient.CreateClient();
+            var response = await client.PostAsync($"TaskDetails/tasks/{TaskId}/attachments", content);
+            var res = await response.Content.ReadFromJsonAsync<Result<FileAttachmentDto>>(Serialization.CaseInsensitive);
+
+            if (response.IsSuccessStatusCode && res != null && res.IsSuccess)
+            {
+                attachments.Add(res.Value);
+                await JS.InvokeVoidAsync("initIcons");
+            }
+            else
+            {
+                uploadError = res?.ErrorMessage ?? "Failed to upload file.";
+            }
+        }
+        catch (Exception ex)
+        {
+            uploadError = ex.Message;
+        }
+        finally
+        {
+            isUploading = false;
+        }
+    }
+
+    private void ConfirmDeleteAttachment(long attachmentId)
+    {
+        confirmTitle = "Delete File?";
+        confirmMessage = "Are you sure you want to delete this file attachment?";
+        confirmAction = () => DeleteAttachment(attachmentId);
+        showConfirm = true;
+    }
+
+    private async Task DeleteAttachment(long attachmentId)
+    {
+        var client = ApiClient.CreateClient();
+        try
+        {
+            var response = await client.DeleteAsync($"TaskDetails/attachments/{attachmentId}");
+            var res = await response.Content.ReadFromJsonAsync<Result>(Serialization.CaseInsensitive);
+            if (response.IsSuccessStatusCode && res != null && res.IsSuccess)
+            {
+                var idx = attachments.FindIndex(f => f.Id == attachmentId);
+                if (idx >= 0) attachments.RemoveAt(idx);
+            }
+        }
+        catch (Exception ex)
+        {
+            Console.WriteLine($"Delete file error: {ex.Message}");
+        }
+    }
+
+    // ─── CONFIRM DIALOG LOGIC ───────────────────────────────────────────────
+
+    private async Task ExecuteConfirmAction()
+    {
+        showConfirm = false;
+        if (confirmAction != null)
+        {
+            await confirmAction();
+        }
+        confirmAction = null;
+    }
+
+    private void CancelConfirm()
+    {
+        showConfirm = false;
+        confirmAction = null;
+    }
+
+    // ─── DISPLAY UTILITIES ──────────────────────────────────────────────────
+
+    private string GetStatusLabel(long statusId) => statusId switch
+    {
+        1 => "To Do",
+        2 => "In Progress",
+        3 => "Done",
+        _ => "Unknown"
+    };
+
+    private string GetStatusBadge(long statusId) => statusId switch
+    {
+        1 => "bg-slate-100 text-slate-800 border border-slate-200",
+        2 => "bg-blue-50 text-blue-700 border border-blue-100",
+        3 => "bg-emerald-50 text-emerald-700 border border-emerald-100",
+        _ => "bg-slate-50 text-slate-600"
+    };
+
+    private string GetPriorityLabel(long priorityId) => priorityId switch
+    {
+        1 => "Low",
+        2 => "Medium",
+        3 => "High",
+        _ => "Unknown"
+    };
+
+    private string GetPriorityBadge(long priorityId) => priorityId switch
+    {
+        1 => "bg-slate-100 text-slate-600",
+        2 => "bg-amber-50 text-amber-700 border border-amber-100",
+        3 => "bg-rose-50 text-rose-700 border border-rose-100",
+        _ => "bg-slate-50 text-slate-600"
+    };
+
+    private string GetFileIcon(string fileType)
+    {
+        if (fileType.StartsWith("image/", StringComparison.OrdinalIgnoreCase)) return "image";
+        if (fileType.Equals("application/pdf", StringComparison.OrdinalIgnoreCase)) return "file-text";
+        if (fileType.Contains("word") || fileType.Contains("officedocument.wordprocessingml")) return "file-text";
+        if (fileType.Contains("excel") || fileType.Contains("officedocument.spreadsheetml")) return "file-spreadsheet";
+        return "file";
+    }
+
+    private string FormatBytes(long bytes)
+    {
+        string[] suffix = { "B", "KB", "MB", "GB", "TB" };
+        int i;
+        double dblBytes = bytes;
+        for (i = 0; i < suffix.Length && bytes >= 1024; i++, bytes /= 1024)
+        {
+            dblBytes = bytes / 1024.0;
+        }
+        return $"{dblBytes:0.##} {suffix[i]}";
+    }
+}

TaskTrackingSystem.WebApp/Components/Pages/TaskReport.razor

@@ -247,6 +247,7 @@
                 <table class="w-full">
                     <thead>
                         <tr class="border-b border-slate-100 bg-slate-50/60">
+                            <th class="px-6 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">No.</th>
                             <th class="px-6 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Task</th>
                             <th class="px-6 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Project</th>
                             <th class="px-6 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Status</th>
@@ -258,9 +259,11 @@
                     <tbody class="divide-y divide-slate-100">
                         @if (PagedList.Any())
                         {
-                            @foreach (var t in PagedList)
+                            @foreach (var entry in PagedList.Select((t, index) => (t, index)))
                             {
+                                var t = entry.t;
                                 <tr class="hover:bg-slate-50/50 transition-colors">
+                                    <td class="px-6 py-3 text-sm font-semibold text-slate-500">@((currentPage - 1) * pageSize + entry.index + 1)</td>
                                     <td class="px-6 py-3 text-sm font-medium text-slate-900">@t.Title</td>
                                     <td class="px-6 py-3 text-sm text-slate-500">@t.ProjectName</td>
                                     <td class="px-6 py-3">
@@ -277,7 +280,7 @@
                         else
                         {
                             <tr>
-                                <td colspan="6" class="px-6 py-16 text-center bg-slate-50/20">
+                                <td colspan="7" class="px-6 py-16 text-center bg-slate-50/20">
                                     <div class="flex flex-col items-center justify-center space-y-4">
                                         <svg class="w-24 h-24 text-slate-300" viewBox="0 0 120 120" fill="none" xmlns="http://www.w3.org/2000/svg">
                                             <rect x="25" y="15" width="70" height="90" rx="8" stroke="currentColor" stroke-width="3" stroke-dasharray="6 4" />
@@ -366,7 +369,8 @@
     private IEnumerable<TaskReportDto> FilteredList =>
         string.IsNullOrWhiteSpace(searchQuery)
             ? taskReports
-            : taskReports.Where(t => t.Title.Contains(searchQuery, StringComparison.OrdinalIgnoreCase) || t.ProjectName.Contains(searchQuery, StringComparison.OrdinalIgnoreCase));
+            : taskReports.Where(t => t.Title.Contains(searchQuery, StringComparison.OrdinalIgnoreCase) || t.ProjectName.Contains(searchQuery, StringComparison.OrdinalIgnoreCase))
+                .OrderBy(t => t.Title);
 
     private int TotalPages => (int)Math.Ceiling((double)FilteredList.Count() / pageSize);
 

TaskTrackingSystem.WebApp/Components/Pages/Tasks.razor

@@ -22,22 +22,6 @@
             <p class="text-slate-500 mt-1">@(isAdmin ? "View and manage all tasks across projects." : "Your assigned tasks.")</p>
         </div>
         <div class="flex items-center space-x-4">
-            <!-- View Toggle Button Group -->
-            <div class="flex items-center space-x-1 bg-slate-100 p-1 rounded-xl border border-slate-200">
-                <button @onclick='() => SetView("list")' class="px-4 py-1.5 rounded-lg text-xs font-bold transition-all flex items-center space-x-1.5 @(currentView == "list" ? "bg-white text-slate-800 shadow-sm" : "text-slate-500 hover:text-slate-800")">
-                    <i data-lucide="list" class="h-3.5 w-3.5"></i>
-                    <span>List View</span>
-                </button>
-                <button @onclick='() => SetView("backlog")' class="px-4 py-1.5 rounded-lg text-xs font-bold transition-all flex items-center space-x-1.5 @(currentView == "backlog" ? "bg-white text-slate-800 shadow-sm" : "text-slate-500 hover:text-slate-800")">
-                    <i data-lucide="layers" class="h-3.5 w-3.5"></i>
-                    <span>Backlog View</span>
-                </button>
-                <button @onclick='() => SetView("board")' class="px-4 py-1.5 rounded-lg text-xs font-bold transition-all flex items-center space-x-1.5 @(currentView == "board" ? "bg-white text-slate-800 shadow-sm" : "text-slate-500 hover:text-slate-800")">
-                    <i data-lucide="kanban" class="h-3.5 w-3.5"></i>
-                    <span>Board View</span>
-                </button>
-            </div>
-            
             @if (canCreateTask)
             {
                 <button @onclick="OpenCreateModal" class="inline-flex items-center rounded-lg bg-violet-600 px-4 py-2.5 text-sm font-medium text-white hover:bg-violet-700 transition-colors shadow-sm">
@@ -96,249 +80,101 @@
             </div>
         </div>
 
-        @if (currentView == "backlog")
-        {
-            <div class="space-y-6 mt-4">
-                @foreach (var proj in projects.Where(p => filterProjectId == 0 || p.Id == filterProjectId))
-                {
-                    var projTasks = FilteredTasks.Where(t => t.ProjectId == proj.Id).ToList();
-                    @if (projTasks.Any())
+        <!-- Tasks Table (List View) -->
+        <div class="rounded-xl border border-slate-200 bg-white shadow-sm overflow-hidden mt-4">
+            <table class="w-full">
+                <thead>
+                    <tr class="border-b border-slate-100 bg-slate-50/60">
+                        <th class="px-6 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">No.</th>
+                        <th class="px-6 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Title</th>
+                        <th class="px-6 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Status</th>
+                        <th class="px-6 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Priority</th>
+                        <th class="px-6 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Due Date</th>
+                        <th class="px-6 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Project</th>
+                        <th class="px-6 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Assignee</th>
+                        <th class="px-6 py-3 text-right text-xs font-semibold text-slate-500 uppercase tracking-wider">Actions</th>
+                    </tr>
+                </thead>
+                <tbody class="divide-y divide-slate-100">
+                     @if (PagedTasks.Any())
                     {
-                        <div class="rounded-2xl border border-slate-200 bg-white shadow-sm overflow-hidden">
-                            <!-- Project Header Row -->
-                            <div class="flex items-center justify-between px-6 py-4 bg-slate-50 border-b border-slate-100">
-                                <div class="flex items-center space-x-3">
-                                    <span class="flex h-7 w-7 items-center justify-center rounded-lg bg-violet-100 text-violet-600 font-bold text-xs">P</span>
-                                    <h3 class="font-bold text-sm text-slate-800">@proj.Name</h3>
-                                    <span class="px-2.5 py-0.5 rounded-full bg-slate-200/80 text-[10px] text-slate-500 font-semibold font-sans">@projTasks.Count tasks</span>
-                                </div>
-                                @if (canCreateTask)
-                                {
-                                    <button @onclick="() => OpenCreateModalForProject(proj.Id)" class="inline-flex items-center text-xs font-semibold text-emerald-600 hover:text-emerald-800 transition-colors">
-                                        <i data-lucide="plus" class="h-3 w-3 mr-1"></i> Add Task
-                                    </button>
-                                }
-                            </div>
-
-                            <!-- Tasks List (Vertical Backlog rows) -->
-                            <div class="divide-y divide-slate-100">
-                                @foreach (var task in projTasks)
-                                {
-                                    <div class="flex flex-col sm:flex-row sm:items-center justify-between p-4 hover:bg-slate-50/40 transition-colors gap-3">
-                                        <!-- Left section -->
-                                        <div class="flex items-start space-x-3 flex-1 min-w-0">
-                                            <input type="checkbox" checked="@(task.StatusId == 3)" @onchange="() => ToggleTaskStatus(task)" disabled="@(!canUpdateTask)" class="h-4 w-4 rounded border-slate-300 text-violet-600 accent-violet-600 focus:ring-violet-500 mt-1 cursor-pointer shrink-0 disabled:cursor-not-allowed disabled:opacity-50" />
-                                            <div class="min-w-0">
-                                                <div class="flex items-center space-x-2">
-                                                    <span class="text-[10px] font-bold text-slate-400 font-mono tracking-wider font-semibold">TASK-#@task.Id</span>
-                                                    <span class="inline-flex items-center px-2 py-0.5 rounded-full text-[9px] font-semibold @GetStatusBadge(task.StatusId)">
-                                                        @GetStatusLabel(task.StatusId)
-                                                    </span>
-                                                    <span class="inline-flex items-center px-2 py-0.5 rounded-full text-[9px] font-semibold @GetPriorityBadge(task.PriorityId)">
-                                                        @GetPriorityLabel(task.PriorityId)
-                                                    </span>
-                                                </div>
-                                                <h4 class="text-sm font-bold text-slate-800 mt-1 truncate @(task.StatusId == 3 ? "line-through text-slate-400" : "")">@task.Title</h4>
-                                                @if (!string.IsNullOrEmpty(task.Description))
-                                                {
-                                                    <p class="text-xs text-slate-400 mt-0.5 truncate max-w-xl">@task.Description</p>
-                                                }
-                                            </div>
-                                        </div>
-
-                                        <!-- Right section -->
-                                        <div class="flex items-center justify-between sm:justify-end gap-4 shrink-0">
-                                            <span class="text-xs text-slate-400 bg-slate-100 px-2 py-1 rounded-lg">
-                                                Due @DisplayFormats.Date(task.DueDate)
+                        @foreach (var entry in PagedTasks.Select((task, index) => (task, index)))
+                        {
+                            var task = entry.task;
+                            <tr class="hover:bg-slate-50/50 transition-colors">
+                                <td class="px-6 py-4 text-sm font-semibold text-slate-500">@((currentPage - 1) * pageSize + entry.index + 1)</td>
+                                <td class="px-6 py-4">
+                                    <a href="/tasks/@task.Id/details" class="text-sm font-semibold text-slate-900 hover:text-violet-600 transition-colors">@task.Title</a>
+                                    @if (!string.IsNullOrEmpty(task.Description))
+                                    {
+                                        <p class="text-xs text-slate-400 mt-0.5 truncate max-w-xs">@task.Description</p>
+                                    }
+                                </td>
+                                <td class="px-6 py-4">
+                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium @GetStatusBadge(task.StatusId)">
+                                        @GetStatusLabel(task.StatusId)
+                                    </span>
+                                </td>
+                                <td class="px-6 py-4">
+                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium @GetPriorityBadge(task.PriorityId)">
+                                        @GetPriorityLabel(task.PriorityId)
+                                    </span>
+                                </td>
+                                <td class="px-6 py-4 text-sm text-slate-600">@DisplayFormats.Date(task.DueDate)</td>
+                                <td class="px-6 py-4 text-sm text-slate-500">
+                                    @{ var proj = projects.FirstOrDefault(p => p.Id == task.ProjectId); }
+                                    @(proj?.Name ?? $"#{task.ProjectId}")
+                                </td>
+                                <td class="px-6 py-4 text-sm text-slate-500 font-medium">
+                                    @{ var user = allUsers.FirstOrDefault(u => u.Id == task.AssignedTo); }
+                                    @if (user != null)
+                                    {
+                                        <div class="flex items-center gap-2">
+                                            <span class="flex h-6 w-6 items-center justify-center rounded-full bg-violet-100 text-violet-700 text-[10px] font-bold">
+                                                @(user.FirstName.Length > 0 ? user.FirstName[0].ToString().ToUpper() : "")@(user.LastName.Length > 0 ? user.LastName[0].ToString().ToUpper() : "")
                                             </span>
-                                            
-                                            <div class="flex items-center space-x-1">
-                                                @if (canEditTask)
-                                                {
-                                                    <button @onclick="() => OpenEditModal(task)" class="rounded-lg p-1.5 text-slate-400 hover:bg-amber-50 hover:text-amber-600 transition-all" title="Edit">
-                                                        <i data-lucide="pencil" class="h-3.5 w-3.5"></i>
-                                                    </button>
-                                                }
-                                                @if (canDeleteTask)
-                                                {
-                                                    <button @onclick="() => RequestDeleteConfirmation(task.Id)" class="rounded-lg p-1.5 text-slate-400 hover:bg-rose-50 hover:text-rose-600 transition-all" title="Delete">
-                                                        <i data-lucide="trash-2" class="h-3.5 w-3.5"></i>
-                                                    </button>
-                                                }
-                                            </div>
+                                            <span class="text-xs text-slate-700 font-semibold">@user.FirstName @user.LastName</span>
                                         </div>
-                                    </div>
-                                }
-                            </div>
-                        </div>
-                    }
-                }
-                @if (!taskList.Any(t => filterProjectId == 0 || t.ProjectId == filterProjectId))
-                {
-                    <div class="rounded-2xl border border-dashed border-slate-200 bg-white p-12 text-center">
-                        <i data-lucide="check-square" class="h-10 w-10 mx-auto text-slate-300 mb-3"></i>
-                        <h4 class="text-sm font-bold text-slate-800">No tasks in backlog</h4>
-                        <p class="text-xs text-slate-400 mt-1">Select another project or create your first task!</p>
-                    </div>
-                }
-            </div>
-        }
-        else if (currentView == "board")
-        {
-            <!-- Board View: Kanban Column view -->
-            <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mt-4">
-                @foreach (var column in columns)
-                {
-                    var tasksInColumn = FilteredTasks.Where(t => t.StatusId == column.StatusId).ToList();
-                    <div class="flex flex-col rounded-xl border border-slate-200 bg-slate-50/50 overflow-hidden min-h-[450px]">
-                        <!-- Column Header -->
-                        <div class="flex items-center justify-between px-4 py-3 bg-white border-b border-slate-100">
-                            <div class="flex items-center space-x-2">
-                                <span class="h-2.5 w-2.5 rounded-full @column.DotColor"></span>
-                                <h3 class="text-sm font-semibold text-slate-900">@column.Name</h3>
-                            </div>
-                            <span class="flex h-6 w-6 items-center justify-center rounded-full bg-slate-100 text-xs font-semibold text-slate-600">@tasksInColumn.Count</span>
-                        </div>
-
-                        <!-- Cards -->
-                        <div class="flex-1 p-3 space-y-3 overflow-y-auto"
-                             @ondrop="() => HandleDrop(column.StatusId)"
-                             @ondragover="HandleDragOver"
-                             @ondragover:preventDefault="true">
-                            @if (tasksInColumn.Any())
-                            {
-                                @foreach (var task in tasksInColumn)
-                                {
-                                    <div class="rounded-lg border border-slate-200 bg-white p-4 shadow-sm hover:shadow-md transition-all @(canUpdateTask ? "cursor-grab active:cursor-grabbing" : "cursor-default")"
-                                         draggable="@canUpdateTask" 
-                                         @ondragstart="() => HandleDragStart(task)">
-                                        <div class="flex items-start justify-between">
-                                            <h4 class="text-sm font-semibold text-slate-900">@task.Title</h4>
-                                            <span class="text-[10px] px-2 py-0.5 rounded-full font-medium @GetPriorityBadge(task.PriorityId)">@GetPriorityLabel(task.PriorityId)</span>
-                                        </div>
-                                        @if (!string.IsNullOrEmpty(task.Description))
-                                        {
-                                            <p class="text-xs text-slate-505 mt-1.5 line-clamp-2">@task.Description</p>
-                                        }
-                                        <div class="flex items-center justify-between mt-3 pt-3 border-t border-slate-50">
-                                            <span class="text-[10px] text-slate-400">Due @DisplayFormats.Date(task.DueDate)</span>
-                                            @{ var user = allUsers.FirstOrDefault(u => u.Id == task.AssignedTo); }
-                                            @if (user != null)
-                                            {
-                                                <span class="flex h-5 w-5 items-center justify-center rounded-full bg-violet-100 text-violet-700 text-[8px] font-bold" title="@user.FirstName @user.LastName">
-                                                    @(user.FirstName.Length > 0 ? user.FirstName[0].ToString().ToUpper() : "")@(user.LastName.Length > 0 ? user.LastName[0].ToString().ToUpper() : "")
-                                                </span>
-                                            }
-                                        </div>
-                                    </div>
-                                }
-                            }
-                            else
-                            {
-                                <div class="flex items-center justify-center py-8 h-full">
-                                    <p class="text-xs text-slate-400">Drop tasks here</p>
-                                </div>
-                            }
-                        </div>
-                    </div>
-                }
-            </div>
-        }
-        else
-        {
-            <!-- Tasks Table (List View) -->
-            <div class="rounded-xl border border-slate-200 bg-white shadow-sm overflow-hidden mt-4">
-                <table class="w-full">
-                    <thead>
-                        <tr class="border-b border-slate-100 bg-slate-50/60">
-                            <th class="px-6 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Title</th>
-                            <th class="px-6 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Status</th>
-                            <th class="px-6 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Priority</th>
-                            <th class="px-6 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Due Date</th>
-                            <th class="px-6 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Project</th>
-                            <th class="px-6 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Assignee</th>
-                            <th class="px-6 py-3 text-right text-xs font-semibold text-slate-500 uppercase tracking-wider">Actions</th>
-                        </tr>
-                    </thead>
-                    <tbody class="divide-y divide-slate-100">
-                         @if (PagedTasks.Any())
-                        {
-                            @foreach (var task in PagedTasks)
-                            {
-                                <tr class="hover:bg-slate-50/50 transition-colors">
-                                    <td class="px-6 py-4">
-                                        <span class="text-sm font-semibold text-slate-900">@task.Title</span>
-                                        @if (!string.IsNullOrEmpty(task.Description))
-                                        {
-                                            <p class="text-xs text-slate-400 mt-0.5 truncate max-w-xs">@task.Description</p>
-                                        }
-                                    </td>
-                                    <td class="px-6 py-4">
-                                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium @GetStatusBadge(task.StatusId)">
-                                            @GetStatusLabel(task.StatusId)
-                                        </span>
-                                    </td>
-                                    <td class="px-6 py-4">
-                                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium @GetPriorityBadge(task.PriorityId)">
-                                            @GetPriorityLabel(task.PriorityId)
-                                        </span>
-                                    </td>
-                                    <td class="px-6 py-4 text-sm text-slate-600">@DisplayFormats.Date(task.DueDate)</td>
-                                    <td class="px-6 py-4 text-sm text-slate-500">
-                                        @{ var proj = projects.FirstOrDefault(p => p.Id == task.ProjectId); }
-                                        @(proj?.Name ?? $"#{task.ProjectId}")
-                                    </td>
-                                    <td class="px-6 py-4 text-sm text-slate-500 font-medium">
-                                        @{ var user = allUsers.FirstOrDefault(u => u.Id == task.AssignedTo); }
-                                        @if (user != null)
+                                    }
+                                    else
+                                    {
+                                        <span class="text-xs text-slate-400 italic">Unassigned</span>
+                                    }
+                                </td>
+                                <td class="px-6 py-4 text-right">
+                                    <div class="flex items-center justify-end space-x-2">
+                                        @if (canEditTask)
                                         {
-                                            <div class="flex items-center gap-2">
-                                                <span class="flex h-6 w-6 items-center justify-center rounded-full bg-violet-100 text-violet-700 text-[10px] font-bold">
-                                                    @(user.FirstName.Length > 0 ? user.FirstName[0].ToString().ToUpper() : "")@(user.LastName.Length > 0 ? user.LastName[0].ToString().ToUpper() : "")
-                                                </span>
-                                                <span class="text-xs text-slate-700 font-semibold">@user.FirstName @user.LastName</span>
-                                            </div>
+                                            <button @onclick="() => OpenEditModal(task)" class="rounded-lg p-1.5 text-slate-400 hover:bg-amber-50 hover:text-amber-600 transition-all" title="Edit">
+                                                <i data-lucide="pencil" class="h-4 w-4"></i>
+                                            </button>
                                         }
-                                        else
+                                        @if (canDeleteTask)
                                         {
-                                            <span class="text-xs text-slate-400 italic">Unassigned</span>
+                                            <button @onclick="() => RequestDeleteConfirmation(task.Id)" class="rounded-lg p-1.5 text-slate-400 hover:bg-rose-50 hover:text-rose-600 transition-all" title="Delete">
+                                                <i data-lucide="trash-2" class="h-4 w-4"></i>
+                                            </button>
                                         }
-                                    </td>
-                                    <td class="px-6 py-4 text-right">
-                                        <div class="flex items-center justify-end space-x-2">
-                                            @if (canEditTask)
-                                            {
-                                                <button @onclick="() => OpenEditModal(task)" class="rounded-lg p-1.5 text-slate-400 hover:bg-amber-50 hover:text-amber-600 transition-all" title="Edit">
-                                                    <i data-lucide="pencil" class="h-4 w-4"></i>
-                                                </button>
-                                            }
-                                            @if (canDeleteTask)
-                                            {
-                                                <button @onclick="() => RequestDeleteConfirmation(task.Id)" class="rounded-lg p-1.5 text-slate-400 hover:bg-rose-50 hover:text-rose-600 transition-all" title="Delete">
-                                                    <i data-lucide="trash-2" class="h-4 w-4"></i>
-                                                </button>
-                                            }
-                                        </div>
-                                    </td>
-                                </tr>
-                            }
-                        }
-                        else
-                        {
-                            <EmptyState ColSpan="6" Icon="check-square" Title="No tasks yet" Subtitle="Create your first task to get started." />
+                                    </div>
+                                </td>
+                            </tr>
                         }
-                    </tbody>
-                </table>
-
-                <!-- Pagination -->
-                <Pagination CurrentPage="currentPage"
-                            TotalPages="TotalPages"
-                            PageSize="pageSize"
-                            TotalCount="FilteredTasks.Count()"
-                            OnPageChanged="HandlePageChanged"
-                            OnPageSizeChanged="HandlePageSizeChanged" />
-            </div>
-        }
+                    }
+                    else
+                    {
+                        <EmptyState ColSpan="7" Icon="check-square" Title="No tasks yet" Subtitle="Create your first task to get started." />
+                    }
+                </tbody>
+            </table>
+
+            <!-- Pagination -->
+            <Pagination CurrentPage="currentPage"
+                        TotalPages="TotalPages"
+                        PageSize="pageSize"
+                        TotalCount="FilteredTasks.Count()"
+                        OnPageChanged="HandlePageChanged"
+                        OnPageSizeChanged="HandlePageSizeChanged" />
+        </div>
     }
 </div>
 
@@ -497,9 +333,6 @@
     private List<ProjectDto> projects = new();
     private List<UserDto> allUsers = new();
 
-    // Backlog vs List vs Board View state
-    private string currentView = "list";
-
     private string? successMessage;
 
     // Search and Filters state
@@ -516,71 +349,6 @@
     private int currentPage = 1;
     private int pageSize = 10;
 
-    private List<KanbanColumn> columns = new()
-    {
-        new(1, "To Do", "bg-slate-400"),
-        new(2, "In Progress", "bg-blue-500"),
-        new(3, "Done", "bg-emerald-500")
-    };
-
-    private TaskDto? draggedTask;
-
-    private void SetView(string view)
-    {
-        currentView = view;
-        StateHasChanged();
-    }
-
-    private void HandleDragStart(TaskDto task)
-    {
-        draggedTask = task;
-    }
-
-    private void HandleDragOver()
-    {
-        // Allow dropping
-    }
-
-    private async Task HandleDrop(long newStatusId)
-    {
-        if (!canUpdateTask)
-        {
-            draggedTask = null;
-            return;
-        }
-
-        if (draggedTask != null && draggedTask.StatusId != newStatusId)
-        {
-            await MoveTask(draggedTask.Id, newStatusId);
-        }
-        draggedTask = null;
-    }
-
-    private async Task MoveTask(long taskId, long newStatusId)
-    {
-        if (!canUpdateTask)
-        {
-            return;
-        }
-
-        var client = ApiClient.CreateClient();
-        try
-        {
-            var response = await client.PatchAsync($"Task/{taskId}/status?statusId={newStatusId}", null);
-            if (response.IsSuccessStatusCode)
-            {
-                var task = taskList.FirstOrDefault(t => t.Id == taskId);
-                if (task != null) task.StatusId = newStatusId;
-                await LoadTasks();
-                StateHasChanged();
-            }
-        }
-        catch (Exception ex)
-        {
-            Console.WriteLine($"Move task error: {ex.Message}");
-        }
-    }
-
     private void ApplySearch()
     {
         searchQuery = searchInput;
@@ -603,36 +371,6 @@
         currentPage = 1;
     }
 
-    private void OpenCreateModalForProject(long projectId)
-    {
-        OpenCreateModal();
-        formProjectId = projectId;
-    }
-
-    private async Task ToggleTaskStatus(TaskDto task)
-    {
-        if (!canUpdateTask)
-        {
-            return;
-        }
-
-        var newStatusId = task.StatusId == 3 ? 1 : 3;
-        var client = ApiClient.CreateClient();
-        try
-        {
-            var response = await client.PatchAsync($"Task/{task.Id}/status?statusId={newStatusId}", null);
-            if (response.IsSuccessStatusCode)
-            {
-                task.StatusId = newStatusId;
-                await LoadTasks();
-            }
-        }
-        catch (Exception ex)
-        {
-            Console.WriteLine($"Toggle task error: {ex.Message}");
-        }
-    }
-
     private IEnumerable<TaskDto> FilteredTasks
     {
         get
@@ -656,7 +394,9 @@
             {
                 result = result.Where(t => t.PriorityId == filterPriorityId);
             }
-            return result;
+            return result
+                .OrderBy(t => t.Title)
+                .ThenBy(t => t.DueDate);
         }
     }
 
@@ -932,7 +672,6 @@
 
             CloseModal();
             await LoadTasks();
-            currentView = "list";
             successMessage = isEditing ? "Task updated successfully!" : "Task created successfully!";
         }
         catch (Exception ex)
@@ -958,7 +697,6 @@
                 return;
             }
             await LoadTasks();
-            currentView = "list";
             if (currentPage > TotalPages && TotalPages > 0)
                 currentPage = TotalPages;
             successMessage = "Task deleted successfully!";
@@ -1001,5 +739,4 @@
         _ => "—"
     };
 
-    private sealed record KanbanColumn(long StatusId, string Name, string DotColor);
 }

TaskTrackingSystem.WebApp/Components/Pages/TimeTrackingReport.razor

@@ -146,6 +146,7 @@
                 <table class="w-full">
                     <thead>
                         <tr class="border-b border-slate-100 bg-slate-50/60 font-sans">
+                            <th class="px-6 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider font-sans">No.</th>
                             <th class="px-6 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider font-sans">Employee</th>
                             <th class="px-6 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider font-sans">Total Tasks</th>
                             <th class="px-6 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider font-sans">Completed</th>
@@ -158,10 +159,12 @@
                     <tbody class="divide-y divide-slate-100">
                         @if (reportData.EmployeeSummary.Any())
                         {
-                            @foreach (var emp in reportData.EmployeeSummary)
+                            @foreach (var entry in PagedEmployeeSummary.Select((emp, index) => (emp, index)))
                             {
+                                var emp = entry.emp;
                                 var pct = emp.CompletionPercentage;
                                 <tr class="hover:bg-slate-50/50 transition-colors">
+                                    <td class="px-6 py-4 text-sm font-semibold text-slate-500 font-sans">@GetRowNo(userPage, entry.index)</td>
                                     <td class="px-6 py-4">
                                         <div class="flex items-center gap-3">
                                             <span class="flex h-9 w-9 items-center justify-center rounded-full bg-violet-100 text-violet-700 text-xs font-bold">
@@ -194,10 +197,16 @@
                         }
                         else
                         {
-                            <EmptyState ColSpan="7" Icon="clock" Title="No timesheet data" Subtitle="No tasks found with the current filters." />
+                            <EmptyState ColSpan="8" Icon="clock" Title="No timesheet data" Subtitle="No tasks found with the current filters." />
                         }
                     </tbody>
                 </table>
+                <Pagination CurrentPage="userPage"
+                            TotalPages="UserTotalPages"
+                            PageSize="pageSize"
+                            TotalCount="reportData.EmployeeSummary.Count"
+                            OnPageChanged="HandleUserPageChanged"
+                            OnPageSizeChanged="HandlePageSizeChanged" />
             </div>
         }
 
@@ -211,6 +220,7 @@
                 <table class="w-full">
                     <thead>
                         <tr class="border-b border-slate-100 bg-slate-50/60">
+                            <th class="px-6 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider font-sans">No.</th>
                             <th class="px-6 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider font-sans">Project</th>
                             <th class="px-6 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider font-sans">Total Tasks</th>
                             <th class="px-6 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider font-sans">Completed</th>
@@ -222,10 +232,12 @@
                     <tbody class="divide-y divide-slate-100">
                         @if (reportData.ProjectSummary.Any())
                         {
-                            @foreach (var proj in reportData.ProjectSummary)
+                            @foreach (var entry in PagedProjectSummary.Select((proj, index) => (proj, index)))
                             {
+                                var proj = entry.proj;
                                 var pct = proj.CompletionPercentage;
                                 <tr class="hover:bg-slate-50/50 transition-colors">
+                                    <td class="px-6 py-4 text-sm font-semibold text-slate-500 font-sans">@GetRowNo(projectPage, entry.index)</td>
                                     <td class="px-6 py-4">
                                         <div class="flex items-center gap-2">
                                             <i data-lucide="folder-kanban" class="h-4 w-4 text-violet-500"></i>
@@ -250,10 +262,16 @@
                         }
                         else
                         {
-                            <EmptyState ColSpan="6" Icon="folder-kanban" Title="No project data" Subtitle="No tasks found with the current filters." />
+                            <EmptyState ColSpan="7" Icon="folder-kanban" Title="No project data" Subtitle="No tasks found with the current filters." />
                         }
                     </tbody>
                 </table>
+                <Pagination CurrentPage="projectPage"
+                            TotalPages="ProjectTotalPages"
+                            PageSize="pageSize"
+                            TotalCount="reportData.ProjectSummary.Count"
+                            OnPageChanged="HandleProjectPageChanged"
+                            OnPageSizeChanged="HandlePageSizeChanged" />
             </div>
         }
 
@@ -269,6 +287,7 @@
                 <table class="w-full">
                     <thead>
                         <tr class="border-b border-slate-100 bg-slate-50/60">
+                            <th class="px-6 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider font-sans">No.</th>
                             <th class="px-6 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider font-sans">Task</th>
                             <th class="px-6 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider font-sans">Project</th>
                             <th class="px-6 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider font-sans">Assignee</th>
@@ -281,14 +300,16 @@
                     <tbody class="divide-y divide-slate-100">
                         @if (PagedDetailTasks.Any())
                         {
-                            @foreach (var task in PagedDetailTasks)
+                            @foreach (var entry in PagedDetailTasks.Select((task, index) => (task, index)))
                             {
+                                var task = entry.task;
                                 var (statusLabel, statusClass) = task.StatusId switch {
                                     2 => ("In Progress", "bg-blue-50 text-blue-700"),
                                     3 => ("Done", "bg-emerald-50 text-emerald-700"),
                                     _ => ("To Do", "bg-slate-100 text-slate-600")
                                 };
                                 <tr class="hover:bg-slate-50/50 transition-colors">
+                                    <td class="px-6 py-4 text-sm font-semibold text-slate-500 font-sans">@GetRowNo(detailPage, entry.index)</td>
                                     <td class="px-6 py-4">
                                         <p class="text-sm font-semibold text-slate-900">@task.Title</p>
                                     </td>
@@ -327,7 +348,7 @@
                         }
                         else
                         {
-                            <EmptyState ColSpan="7" Icon="clock" Title="No tasks found" Subtitle="Try adjusting your filters." />
+                            <EmptyState ColSpan="8" Icon="clock" Title="No tasks found" Subtitle="Try adjusting your filters." />
                         }
                     </tbody>
                 </table>
@@ -360,13 +381,23 @@
     private long filterStatusId = 0;
     private long appliedStatusId = 0;
 
+    // Pagination (all list views)
+    private int userPage = 1;
+    private int projectPage = 1;
     // Pagination (detail view)
     private int detailPage = 1;
     private int pageSize = 10;
 
-    private IEnumerable<TaskTimeDetailDto> FilteredDetailTasks => reportData.TaskDetail;
+    private IEnumerable<TaskTimeDetailDto> FilteredDetailTasks =>
+        reportData.TaskDetail.OrderBy(t => t.Title);
+    private IEnumerable<EmployeeTimeSummaryDto> PagedEmployeeSummary =>
+        reportData.EmployeeSummary.OrderBy(x => x.FullName).Skip((userPage - 1) * pageSize).Take(pageSize);
+    private IEnumerable<ProjectTimeSummaryDto> PagedProjectSummary =>
+        reportData.ProjectSummary.OrderBy(x => x.ProjectName).Skip((projectPage - 1) * pageSize).Take(pageSize);
     private int DetailTotalPages => (int)Math.Ceiling((double)FilteredDetailTasks.Count() / pageSize);
     private IEnumerable<TaskTimeDetailDto> PagedDetailTasks => FilteredDetailTasks.Skip((detailPage - 1) * pageSize).Take(pageSize);
+    private int UserTotalPages => (int)Math.Ceiling((double)reportData.EmployeeSummary.Count() / pageSize);
+    private int ProjectTotalPages => (int)Math.Ceiling((double)reportData.ProjectSummary.Count() / pageSize);
 
     protected override async Task OnInitializedAsync()
     {
@@ -421,6 +452,8 @@
         appliedSearch    = searchInput;
         appliedProjectId = filterProjectId;
         appliedStatusId  = filterStatusId;
+        userPage = 1;
+        projectPage = 1;
         detailPage = 1;
         await LoadTimeTrackingData();
     }
@@ -430,12 +463,23 @@
         searchInput = "";      appliedSearch    = "";
         filterProjectId = 0;   appliedProjectId = 0;
         filterStatusId = 0;    appliedStatusId  = 0;
+        userPage = 1;
+        projectPage = 1;
         detailPage = 1;
         await LoadTimeTrackingData();
     }
 
+    private int GetRowNo(int page, int index) => ((page - 1) * pageSize) + index + 1;
+    private void HandleUserPageChanged(int page) => userPage = page;
+    private void HandleProjectPageChanged(int page) => projectPage = page;
     private void HandleDetailPageChanged(int page) => detailPage = page;
-    private void HandlePageSizeChanged(int size) { pageSize = size; detailPage = 1; }
+    private void HandlePageSizeChanged(int size)
+    {
+        pageSize = size;
+        userPage = 1;
+        projectPage = 1;
+        detailPage = 1;
+    }
 
     private async Task DownloadExcel()
     {

TaskTrackingSystem.WebApp/Components/Pages/Users.razor

@@ -75,6 +75,7 @@
             <table class="w-full">
                 <thead>
                     <tr class="border-b border-slate-100 bg-slate-50/60">
+                        <th class="px-6 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">No.</th>
                         <th class="px-6 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">User</th>
                         <th class="px-6 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Email</th>
                         <th class="px-6 py-3 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Phone</th>
@@ -86,9 +87,11 @@
                 <tbody class="divide-y divide-slate-100">
                     @if (PagedUsers.Any())
                     {
-                        @foreach (var user in PagedUsers)
+                        @foreach (var entry in PagedUsers.Select((user, index) => (user, index)))
                         {
+                            var user = entry.user;
                             <tr class="hover:bg-slate-50/50 transition-colors">
+                                <td class="px-6 py-4 text-sm font-semibold text-slate-500">@((currentPage - 1) * pageSize + entry.index + 1)</td>
                                 <td class="px-6 py-4">
                                     <div class="flex items-center space-x-3">
                                         <span class="flex h-9 w-9 items-center justify-center rounded-full bg-slate-100 text-slate-700 font-semibold text-xs">
@@ -134,7 +137,7 @@
                     }
                     else
                     {
-                        <EmptyState ColSpan="6" Icon="users" Title="No users found" Subtitle="Try adjusting your search or create a new user." />
+                        <EmptyState ColSpan="7" Icon="users" Title="No users found" Subtitle="Try adjusting your search or create a new user." />
                     }
                 </tbody>
             </table>
@@ -361,7 +364,10 @@
             else if (filterStatus == "inactive")
                 result = result.Where(u => !u.IsActive);
 
-            return result;
+            return result
+                .OrderBy(u => u.FirstName)
+                .ThenBy(u => u.LastName)
+                .ThenBy(u => u.Username);
         }
     }
 

TaskTrackingSystem.WebApp/Components/Partial/Pagination.razor

@@ -10,7 +10,7 @@
         {
             var from = (CurrentPage - 1) * PageSize + 1;
             var to = Math.Min(CurrentPage * PageSize, TotalCount);
-            <span>Showing <span class="font-semibold text-slate-700">@from–@to</span> of <span class="font-semibold text-slate-700">@TotalCount</span> results</span>
+            <span>Showing <span class="font-semibold text-slate-700">@from-@to</span> of <span class="font-semibold text-slate-700">@TotalCount</span> results</span>
         }
     </div>
 
@@ -46,7 +46,7 @@
             {
                 if (p == -1)
                 {
-                    <span class="inline-flex h-7 w-7 items-center justify-center text-xs text-slate-400">…</span>
+                    <span class="inline-flex h-7 w-7 items-center justify-center text-xs text-slate-400">...</span>
                 }
                 else
                 {

TaskTrackingSystem.WebApp/MenuAuthorizationService.cs

@@ -64,6 +64,12 @@ public class MenuAuthorizationService
             return true;
         }
 
+        var cleanRelative = relativePath.Split('?')[0].Trim('/');
+        if (cleanRelative.Equals("audit-logs", StringComparison.OrdinalIgnoreCase))
+        {
+            return user.IsInRole("Admin");
+        }
+
         var roleKey = GetRoleCacheKey(user);
 
         if (_sessionState.CachedAccessRoleId == roleKey && _sessionState.CachedAccessItems != null)
@@ -84,7 +90,28 @@ public class MenuAuthorizationService
             return true;
         }
 
-        // Special case for Kanban Board page route parameter wildcard since MenuUrl is /board
+        // Special case for Task Details page route parameter wildcard
+        if (cleanRelative.StartsWith("tasks/", StringComparison.OrdinalIgnoreCase) && 
+            cleanRelative.EndsWith("/details", StringComparison.OrdinalIgnoreCase))
+        {
+            var segments = cleanRelative.Split('/');
+            if (segments.Length == 3 && long.TryParse(segments[1], out _))
+            {
+                var hasTasksAccess = accessItems.Any(m => 
+                    m.MenuCode.Equals("TASKS_LIST", StringComparison.OrdinalIgnoreCase) ||
+                    m.MenuCode.Equals("TASKS_BOARD", StringComparison.OrdinalIgnoreCase) ||
+                    m.MenuCode.Equals("TASKS_BACKLOG", StringComparison.OrdinalIgnoreCase) ||
+                    m.SubMenus.Any(sm => sm.MenuCode.Equals("TASKS_LIST", StringComparison.OrdinalIgnoreCase) ||
+                                         sm.MenuCode.Equals("TASKS_BOARD", StringComparison.OrdinalIgnoreCase) ||
+                                         sm.MenuCode.Equals("TASKS_BACKLOG", StringComparison.OrdinalIgnoreCase)));
+                if (hasTasksAccess)
+                {
+                    return true;
+                }
+            }
+        }
+
+        // Special case for project-specific Kanban board
         if (cleanRelative.StartsWith("projects/", StringComparison.OrdinalIgnoreCase) && 
             cleanRelative.EndsWith("/tasks", StringComparison.OrdinalIgnoreCase))
         {
@@ -101,6 +128,24 @@ public class MenuAuthorizationService
             }
         }
 
+        // Special case for Task Backlog split-screen page
+        if (cleanRelative.Equals("tasks/backlog", StringComparison.OrdinalIgnoreCase))
+        {
+            var hasTasksAccess = accessItems.Any(m => 
+                m.MenuCode.Equals("TASKS_BACKLOG", StringComparison.OrdinalIgnoreCase) ||
+                m.SubMenus.Any(sm => sm.MenuCode.Equals("TASKS_BACKLOG", StringComparison.OrdinalIgnoreCase)));
+            if (hasTasksAccess)
+            {
+                return true;
+            }
+        }
+
+        // Disable global board access
+        if (cleanRelative.Equals("board", StringComparison.OrdinalIgnoreCase))
+        {
+            return false;
+        }
+
         if (string.IsNullOrEmpty(cleanRelative) || 
             cleanRelative.Equals("dashboard", StringComparison.OrdinalIgnoreCase) ||
             cleanRelative.Equals("home", StringComparison.OrdinalIgnoreCase))