fix: Notification auto delete in 30 days, dashboard fixes

TaskTrackingSystem.WebApi/Features/Notification/NotificationCleanupHostedService.cs

@@ -0,0 +1,58 @@
+using Microsoft.EntityFrameworkCore;
+using Microsoft.Extensions.DependencyInjection;
+using TaskTrackingSystem.Database.AppDbContextModels;
+
+namespace TaskTrackingSystem.WebApi.Features.Notification;
+
+public class NotificationCleanupHostedService : BackgroundService
+{
+    private static readonly TimeSpan RunInterval = TimeSpan.FromHours(24);
+    private static readonly TimeSpan RetentionWindow = TimeSpan.FromDays(30);
+
+    private readonly IServiceScopeFactory _scopeFactory;
+    private readonly ILogger<NotificationCleanupHostedService> _logger;
+
+    public NotificationCleanupHostedService(IServiceScopeFactory scopeFactory, ILogger<NotificationCleanupHostedService> logger)
+    {
+        _scopeFactory = scopeFactory;
+        _logger = logger;
+    }
+
+    protected override async System.Threading.Tasks.Task ExecuteAsync(CancellationToken stoppingToken)
+    {
+        using var timer = new PeriodicTimer(RunInterval);
+
+        await CleanupOnceAsync(stoppingToken);
+
+        while (await timer.WaitForNextTickAsync(stoppingToken))
+        {
+            await CleanupOnceAsync(stoppingToken);
+        }
+    }
+
+    private async System.Threading.Tasks.Task CleanupOnceAsync(CancellationToken cancellationToken)
+    {
+        try
+        {
+            using var scope = _scopeFactory.CreateScope();
+            var db = scope.ServiceProvider.GetRequiredService<AppDbContext>();
+            var cutoffUtc = DateTime.UtcNow.Subtract(RetentionWindow);
+
+            var deletedCount = await db.Notifications
+                .Where(n => n.IsRead && (!n.CreatedAt.HasValue || n.CreatedAt < cutoffUtc))
+                .ExecuteDeleteAsync(cancellationToken);
+
+            if (deletedCount > 0)
+            {
+                _logger.LogInformation("Notification cleanup removed {DeletedCount} read notifications older than {CutoffUtc}.", deletedCount, cutoffUtc);
+            }
+        }
+        catch (OperationCanceledException)
+        {
+        }
+        catch (Exception ex)
+        {
+            _logger.LogError(ex, "Notification cleanup failed.");
+        }
+    }
+}

TaskTrackingSystem.WebApi/Features/Notification/NotificationController.cs

@@ -55,4 +55,17 @@ public class NotificationController : ControllerBase
         var result = await _notificationService.MarkReadAsync(userId, id);
         return StatusCode(result.StatusCode, result);
     }
+
+    [HttpDelete("read")]
+    public async Task<ActionResult<Result<int>>> DeleteRead([FromQuery] DateTime? before = null)
+    {
+        var userId = User.GetUserId();
+        if (userId <= 0)
+        {
+            return Unauthorized(Result.Failure("User is not authenticated.", 401));
+        }
+
+        var deletedCount = await _notificationService.DeleteReadNotificationsAsync(userId, before);
+        return Ok(Result<int>.Success(deletedCount));
+    }
 }

TaskTrackingSystem.WebApi/Features/Notification/NotificationService.cs

@@ -76,4 +76,17 @@ public class NotificationService
 
         return Result.Success();
     }
+
+    public async Task<int> DeleteReadNotificationsAsync(long userId, DateTime? olderThanUtc = null)
+    {
+        var query = _db.Notifications.Where(n => n.RecipientId == userId && n.IsRead);
+
+        if (olderThanUtc.HasValue)
+        {
+            var cutoff = olderThanUtc.Value;
+            query = query.Where(n => !n.CreatedAt.HasValue || n.CreatedAt < cutoff);
+        }
+
+        return await query.ExecuteDeleteAsync();
+    }
 }

TaskTrackingSystem.WebApi/Program.cs

@@ -40,6 +40,7 @@ builder.Services.AddScoped<TaskTrackingSystem.WebApi.Features.UserDevice.UserDev
 builder.Services.AddScoped<TaskTrackingSystem.WebApi.Features.Notification.FirebaseNotificationService>();
 builder.Services.AddScoped<TaskTrackingSystem.WebApi.Features.Notification.NotificationRealtimeService>();
 builder.Services.AddScoped<TaskTrackingSystem.WebApi.Features.Notification.NotificationService>();
+builder.Services.AddHostedService<TaskTrackingSystem.WebApi.Features.Notification.NotificationCleanupHostedService>();
 builder.Services.AddScoped<TaskTrackingSystem.WebApi.Infrastructure.PermissionAuthorizationService>();
 builder.Services.AddScoped<IPasswordHasher<TaskTrackingSystem.Database.AppDbContextModels.User>, PasswordHasher<TaskTrackingSystem.Database.AppDbContextModels.User>>();
 // Learn more about configuring Swagger/OpenAPI at https://aka.ms/aspnetcore/swashbuckle

TaskTrackingSystem.WebApp/Components/App.razor

@@ -345,15 +345,22 @@
             });
         };
 
-        window.renderGanttChart = function (containerId, data) {
+        window.renderGanttChart = function (containerId, data, options) {
+            options = options || {};
             const container = document.getElementById(containerId);
             if (!container) return;
+            const minWidth = options.minWidth || 1200;
+            const chartHeight = Math.max(options.height || 420, 120 + (data.length * 44));
             Highcharts.ganttChart(containerId, {
                 chart: {
                     backgroundColor: 'transparent',
-                    height: 250,
+                    height: chartHeight,
                     style: {
                         fontFamily: 'Inter, sans-serif'
+                    },
+                    scrollablePlotArea: {
+                        minWidth: minWidth,
+                        scrollPositionX: 0
                     }
                 },
                 title: {
@@ -366,7 +373,7 @@
                     enabled: false
                 },
                 scrollbar: {
-                    enabled: false
+                    enabled: true
                 },
                 rangeSelector: {
                     enabled: false
@@ -394,11 +401,15 @@
                     }
                 },
                 xAxis: [{
+                    type: 'datetime',
+                    min: options.xAxisMin,
+                    max: options.xAxisMax,
                     gridLineWidth: 1,
                     gridLineColor: '#f1f5f9',
                     lineColor: '#e2e8f0',
                     tickColor: '#e2e8f0',
                     labels: {
+                        format: '{value:%b %Y}',
                         style: {
                             color: '#64748b',
                             fontSize: '11px'

TaskTrackingSystem.WebApp/Components/Pages/EmployeeDashboard.razor

@@ -87,7 +87,7 @@
                             <span class="rounded-full bg-slate-100 px-3 py-1 text-sm font-semibold text-slate-600">@InProgressTasks.Count</span>
                         </div>
 
-                        <div class="divide-y divide-slate-100">
+                        <div class="max-h-[420px] divide-y divide-slate-100 overflow-y-auto">
                             @if (InProgressTasks.Any())
                             {
                                 @foreach (var task in InProgressTasks)
@@ -126,7 +126,7 @@
                             <span class="rounded-full bg-slate-100 px-3 py-1 text-sm font-semibold text-slate-600">@TodoUpcomingTasks.Count</span>
                         </div>
 
-                        <div class="divide-y divide-slate-100">
+                        <div class="max-h-[420px] divide-y divide-slate-100 overflow-y-auto">
                             @if (TodoUpcomingTasks.Any())
                             {
                                 @foreach (var task in TodoUpcomingTasks)
@@ -165,7 +165,7 @@
                             <span class="rounded-full bg-rose-50 px-3 py-1 text-sm font-semibold text-rose-600">@OverdueTasks.Count</span>
                         </div>
 
-                        <div class="divide-y divide-rose-100">
+                        <div class="max-h-[320px] divide-y divide-rose-100 overflow-y-auto">
                             @if (OverdueTasks.Any())
                             {
                                 @foreach (var task in OverdueTasks)
@@ -311,19 +311,16 @@
     private List<TaskDto> InProgressTasks => tasks
         .Where(task => task.StatusId == AppTaskStatus.InProgress)
         .OrderBy(task => task.DueDate)
-        .Take(3)
         .ToList();
 
     private List<TaskDto> TodoUpcomingTasks => tasks
         .Where(task => task.StatusId == AppTaskStatus.Todo || (task.StatusId != AppTaskStatus.Done && task.DueDate.Date >= DateTime.Today))
         .OrderBy(task => task.DueDate)
-        .Take(3)
         .ToList();
 
     private List<TaskDto> OverdueTasks => tasks
         .Where(task => task.DueDate.Date < DateTime.Today && task.StatusId != AppTaskStatus.Done)
         .OrderBy(task => task.DueDate)
-        .Take(3)
         .ToList();
 
     private List<SummaryMetricViewModel> SummaryMetrics => BuildSummaryMetrics();

TaskTrackingSystem.WebApp/Components/Pages/Home.razor

@@ -183,22 +183,41 @@
 
     <div class="grid grid-cols-1 gap-5 xl:grid-cols-[minmax(0,1.25fr)_minmax(340px,0.75fr)]">
         <div class="rounded-[28px] border border-slate-200 bg-white p-6 shadow-sm shadow-slate-200/60">
-            <!-- Header -->
-            <div class="flex items-center justify-between gap-4 mb-5">
-                <h3 class="text-2xl font-bold text-slate-900">Project Timeline</h3>
-                <div class="text-sm font-medium text-slate-500">@TimelineRangeLabel</div>
+            <div class="flex items-center justify-between gap-4">
+                <div>
+                    <h3 class="text-2xl font-bold text-slate-900">All Projects</h3>
+                    <p class="mt-1 text-sm text-slate-500">A quick snapshot of the current project list.</p>
+                </div>
+                <a href="/projects/all" class="inline-flex items-center rounded-2xl border border-slate-200 bg-white px-4 py-2.5 text-sm font-semibold text-violet-700 shadow-sm transition-colors hover:bg-violet-50">
+                    View all
+                </a>
             </div>
 
-            @if (projectsList.Count > 0)
-            {
-                <div class="mt-4">
-                    <div id="project-timeline-chart" class="w-full"></div>
-                </div>
-            }
-            else
-            {
-                <div class="flex items-center justify-center py-16 text-slate-400 text-sm">No projects to display.</div>
-            }
+            <div class="mt-5 max-h-[560px] space-y-3 overflow-y-auto pr-1">
+                @foreach (var project in ProjectListItems)
+                {
+                    var progress = GetProjectProgress(project.Id);
+                    <div class="rounded-2xl border border-slate-200 bg-slate-50 px-4 py-4">
+                        <div class="flex items-start justify-between gap-4">
+                            <div class="min-w-0">
+                                <div class="flex flex-wrap items-center gap-2">
+                                    <p class="truncate text-sm font-semibold text-slate-900">@project.Name</p>
+                                    <span class="@GetProjectBadgeClasses(project)">@GetProjectBadgeLabel(project)</span>
+                                </div>
+                                <p class="mt-1 text-xs text-slate-500">@DisplayFormats.Date(project.StartDate) to @DisplayFormats.Date(project.EndDate)</p>
+                            </div>
+                            <div class="text-right">
+                                <div class="text-sm font-semibold text-slate-900">@progress.CompletedTasksCount/@progress.TotalTasksCount tasks</div>
+                                <div class="text-xs text-slate-500">@progress.CompletionPercentage%</div>
+                            </div>
+                        </div>
+
+                        <div class="mt-3 h-2 overflow-hidden rounded-full bg-slate-200">
+                            <div class="h-full rounded-full bg-violet-600" style="width: @progress.CompletionPercentage%"></div>
+                        </div>
+                    </div>
+                }
+            </div>
         </div>
 
         <div class="rounded-[28px] border border-slate-200 bg-white p-6 text-slate-900 shadow-sm shadow-slate-200/60">
@@ -236,7 +255,7 @@
                 }
             </div>
 
-            <div class="mt-6 space-y-3">
+            <div class="mt-6 max-h-[360px] space-y-3 overflow-y-auto pr-1">
                 <div class="text-xs font-semibold uppercase tracking-wider text-slate-400">Events</div>
                 @foreach (var item in UpcomingProjectStarts)
                 {
@@ -252,42 +271,47 @@
         </div>
     </div>
 
-    <div class="rounded-[28px] border border-slate-200 bg-white p-6 text-slate-900 shadow-sm shadow-slate-200/60">
-        <div class="flex items-center justify-between gap-4">
+    <div class="rounded-[28px] border border-slate-200 bg-white p-5 text-slate-900 shadow-sm shadow-slate-200/60">
+        <div class="flex flex-col gap-3 lg:flex-row lg:items-end lg:justify-between">
             <div>
-                <h3 class="text-2xl font-bold text-slate-900">All Projects</h3>
-                <p class="mt-1 text-sm text-slate-500">A quick snapshot of the current project list.</p>
+                <h3 class="text-2xl font-bold text-slate-900">Project Timeline</h3>
+                <p class="mt-1 text-sm text-slate-500">Browse every project in a gantt view and adjust the month window below.</p>
             </div>
             <a href="/projects/all" class="inline-flex items-center rounded-2xl border border-slate-200 bg-white px-4 py-2.5 text-sm font-semibold text-violet-700 shadow-sm transition-colors hover:bg-violet-50">
                 View all
             </a>
         </div>
 
-        <div class="mt-5 space-y-3">
-            @foreach (var project in FeaturedProjects)
-            {
-                var progress = GetProjectProgress(project.Id);
-                <div class="rounded-2xl border border-slate-200 bg-slate-50 px-4 py-4">
-                    <div class="flex items-start justify-between gap-4">
-                        <div class="min-w-0">
-                            <div class="flex flex-wrap items-center gap-2">
-                                <p class="truncate text-sm font-semibold text-slate-900">@project.Name</p>
-                                <span class="@GetProjectBadgeClasses(project)" >@GetProjectBadgeLabel(project)</span>
-                            </div>
-                            <p class="mt-1 text-xs text-slate-500">@DisplayFormats.Date(project.StartDate) to @DisplayFormats.Date(project.EndDate)</p>
-                        </div>
-                        <div class="text-right">
-                            <div class="text-sm font-semibold text-slate-900">@progress.CompletedTasksCount/@progress.TotalTasksCount tasks</div>
-                            <div class="text-xs text-slate-500">@progress.CompletionPercentage%</div>
-                        </div>
-                    </div>
-
-                    <div class="mt-3 h-2 overflow-hidden rounded-full bg-slate-200">
-                        <div class="h-full rounded-full bg-violet-600" style="width: @progress.CompletionPercentage%"></div>
-                    </div>
-                </div>
-            }
+        <div class="mt-4 flex flex-wrap items-end gap-3 rounded-3xl border border-slate-200 bg-slate-50 px-3 py-3">
+            <div class="flex flex-col gap-1">
+                <label class="text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-400">From</label>
+                <input type="month"
+                       class="rounded-2xl border border-slate-200 bg-white px-4 py-2 text-sm font-medium text-slate-700 shadow-sm outline-none transition-colors focus:border-violet-400 focus:ring-2 focus:ring-violet-100"
+                       value="@timelineStartMonthValue"
+                       @onchange="OnTimelineStartMonthChanged" />
+            </div>
+            <div class="flex flex-col gap-1">
+                <label class="text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-400">To</label>
+                <input type="month"
+                       class="rounded-2xl border border-slate-200 bg-white px-4 py-2 text-sm font-medium text-slate-700 shadow-sm outline-none transition-colors focus:border-violet-400 focus:ring-2 focus:ring-violet-100"
+                       value="@timelineEndMonthValue"
+                       @onchange="OnTimelineEndMonthChanged" />
+            </div>
+            <div class="pb-1 text-sm font-medium text-slate-500">
+                @TimelineRangeLabel
+            </div>
         </div>
+
+        @if (TimelineProjects.Count > 0)
+        {
+            <div class="mt-4 max-h-[620px] overflow-auto pr-1">
+                <div id="project-timeline-chart" class="min-w-[1100px] w-full"></div>
+            </div>
+        }
+        else
+        {
+            <div class="flex items-center justify-center py-16 text-slate-400 text-sm">No projects to display.</div>
+        }
     </div>
 </div>
 
@@ -301,6 +325,8 @@
     private string currentUserName = "User";
     private string currentUserFullName = "User";
     private bool canCreateTask = false;
+    private string timelineStartMonthValue = string.Empty;
+    private string timelineEndMonthValue = string.Empty;
 
     private bool _dataLoaded = false;
     private bool _shouldRenderCharts = false;
@@ -329,13 +355,11 @@
     private string CalendarMonthLabel => DateTime.Today.ToString("MMMM yyyy");
     private List<CalendarCell> CalendarCells => BuildCalendarCells();
     private List<CalendarEventItem> UpcomingProjectStarts => BuildUpcomingProjectStarts();
-    private List<ProjectDto> FeaturedProjects => projectsList.OrderBy(p => p.StartDate).ThenByDescending(p => p.CreatedAt).Take(5).ToList();
-    private List<TimelineRow> TimelineRows => BuildTimelineRows();
+    private List<ProjectDto> FeaturedProjects => TimelineProjects.Take(5).ToList();
+    private List<ProjectDto> ProjectListItems => projectsList.OrderBy(p => p.StartDate).ThenByDescending(p => p.CreatedAt).ToList();
+    private List<ProjectDto> TimelineProjects => projectsList.OrderBy(p => p.StartDate).ThenByDescending(p => p.CreatedAt).ToList();
     private List<DateTime> TimelineMonths => BuildTimelineMonths();
-    private string TimelineRangeLabel => TimelineMonths.Count > 0 ? $"{TimelineMonths.First():MMM yyyy} - {TimelineMonths.Last():MMM yyyy}" : string.Empty;
-    private string TimelineColumnsStyle => $"grid-template-columns: 180px repeat({TimelineMonths.Count}, minmax(44px, 1fr));";
-    private string TimelineRowSpanStyle => $"grid-column: 2 / span {TimelineMonths.Count};";
-    private string TodayMarkerLeft => GetTimelineTodayMarkerLeft();
+    private string TimelineRangeLabel => TryGetTimelineRange(out var range) ? $"{range.Start:MMM yyyy} - {range.End:MMM yyyy}" : string.Empty;
 
     protected override async Task OnInitializedAsync()
     {
@@ -374,6 +398,7 @@
             taskList = await client.GetFromJsonAsync<List<TaskDto>>("Task", Serialization.CaseInsensitive) ?? new();
             usersList = await client.GetFromJsonAsync<List<UserDto>>("User", Serialization.CaseInsensitive) ?? new();
             projectsList = await client.GetFromJsonAsync<List<ProjectDto>>("Project", Serialization.CaseInsensitive) ?? new();
+            InitializeTimelineRange();
 
             currentUserFullName = ResolveCurrentUserFullName();
             _dataLoaded = true;
@@ -413,7 +438,7 @@
                 new { name = "Overdue", y = overdueCount, color = "#ef4444" }
             };
 
-            var ganttData = FeaturedProjects.Select(p => {
+            var ganttData = TimelineProjects.Select(p => {
                 var progress = GetProjectProgress(p.Id);
                 return new {
                     id = p.Id.ToString(),
@@ -426,7 +451,16 @@
             }).ToList();
 
             await JS.InvokeVoidAsync("renderPieChart", "task-distribution-chart", pieData);
-            await JS.InvokeVoidAsync("renderGanttChart", "project-timeline-chart", ganttData);
+            if (ganttData.Count > 0 && TryGetTimelineRange(out var timelineRange))
+            {
+                await JS.InvokeVoidAsync("renderGanttChart", "project-timeline-chart", ganttData, new
+                {
+                    height = 420,
+                    minWidth = Math.Max(900, GetTimelineMonthSpan(timelineRange.Start, timelineRange.End) * 110),
+                    xAxisMin = ToUnixMilliseconds(timelineRange.Start),
+                    xAxisMax = ToUnixMilliseconds(timelineRange.End)
+                });
+            }
         }
         catch (Exception ex)
         {
@@ -656,7 +690,6 @@
         return projectsList
             .Where(project => project.StartDate.Date >= DateTime.Today)
             .OrderBy(project => project.StartDate)
-            .Take(4)
             .Select(project => new CalendarEventItem(project.Name, project.StartDate.ToString("MMM d"), GetProjectColor(project.Id)))
             .ToList();
     }
@@ -735,6 +768,100 @@
         return $"{((monthIndex + dayFraction) / n * 100):0.##}%";
     }
 
+    private void InitializeTimelineRange()
+    {
+        if (TimelineProjects.Count == 0)
+        {
+            var currentMonth = new DateTime(DateTime.Today.Year, DateTime.Today.Month, 1);
+            timelineStartMonthValue = currentMonth.ToString("yyyy-MM");
+            timelineEndMonthValue = currentMonth.ToString("yyyy-MM");
+            return;
+        }
+
+        var start = new DateTime(TimelineProjects.Min(p => p.StartDate).Year, TimelineProjects.Min(p => p.StartDate).Month, 1);
+        var end = new DateTime(TimelineProjects.Max(p => p.EndDate).Year, TimelineProjects.Max(p => p.EndDate).Month, 1);
+        timelineStartMonthValue = start.ToString("yyyy-MM");
+        timelineEndMonthValue = end.ToString("yyyy-MM");
+    }
+
+    private Task OnTimelineStartMonthChanged(ChangeEventArgs args)
+    {
+        timelineStartMonthValue = args.Value?.ToString() ?? timelineStartMonthValue;
+        NormalizeTimelineRange();
+        _shouldRenderCharts = true;
+        StateHasChanged();
+        return Task.CompletedTask;
+    }
+
+    private Task OnTimelineEndMonthChanged(ChangeEventArgs args)
+    {
+        timelineEndMonthValue = args.Value?.ToString() ?? timelineEndMonthValue;
+        NormalizeTimelineRange();
+        _shouldRenderCharts = true;
+        StateHasChanged();
+        return Task.CompletedTask;
+    }
+
+    private void NormalizeTimelineRange()
+    {
+        if (!TryParseMonthValue(timelineStartMonthValue, out var start) ||
+            !TryParseMonthValue(timelineEndMonthValue, out var end))
+        {
+            return;
+        }
+
+        if (start > end)
+        {
+            (start, end) = (end, start);
+        }
+
+        timelineStartMonthValue = start.ToString("yyyy-MM");
+        timelineEndMonthValue = end.ToString("yyyy-MM");
+    }
+
+    private bool TryGetTimelineRange(out (DateTime Start, DateTime End) range)
+    {
+        if (!TryParseMonthValue(timelineStartMonthValue, out var start) ||
+            !TryParseMonthValue(timelineEndMonthValue, out var end))
+        {
+            range = default;
+            return false;
+        }
+
+        if (start > end)
+        {
+            (start, end) = (end, start);
+        }
+
+        var startOfMonth = new DateTime(start.Year, start.Month, 1);
+        var endOfMonth = new DateTime(end.Year, end.Month, DateTime.DaysInMonth(end.Year, end.Month));
+        range = (startOfMonth, endOfMonth);
+        return true;
+    }
+
+    private static bool TryParseMonthValue(string? value, out DateTime month)
+    {
+        month = default;
+        if (string.IsNullOrWhiteSpace(value))
+        {
+            return false;
+        }
+
+        return DateTime.TryParseExact($"{value}-01", "yyyy-MM-dd", System.Globalization.CultureInfo.InvariantCulture, System.Globalization.DateTimeStyles.None, out month);
+    }
+
+    private static long ToUnixMilliseconds(DateTime value)
+    {
+        var utc = DateTime.SpecifyKind(value.Date, DateTimeKind.Utc);
+        return new DateTimeOffset(utc).ToUnixTimeMilliseconds();
+    }
+
+    private static int GetTimelineMonthSpan(DateTime start, DateTime end)
+    {
+        var span = ((end.Year - start.Year) * 12) + end.Month - start.Month + 1;
+        return Math.Max(span, 1);
+    }
+
     private ProjectProgressDto GetProjectProgress(long projectId)
     {
         return projectProgress.FirstOrDefault(item => item.ProjectId == projectId)

TaskTrackingSystem.WebApp/Components/Pages/ManagerDashboard.razor

@@ -143,7 +143,7 @@
                     <h3 class="text-2xl font-bold text-slate-950">Team Progress</h3>
                     <p class="mt-1 text-sm text-slate-500">Members with active workload</p>
 
-                    <div class="mt-6 space-y-4">
+                    <div class="mt-6 max-h-[460px] space-y-4 overflow-y-auto pr-1">
                         @if (TeamProgress.Any())
                         {
                             @foreach (var member in TeamProgress)
@@ -218,7 +218,7 @@
                     <h3 class="text-2xl font-bold text-slate-950">Upcoming Deadlines</h3>
                     <p class="mt-1 text-sm text-slate-500">Projects ending soon</p>
 
-                    <div class="mt-6 space-y-3">
+                    <div class="mt-6 max-h-[460px] space-y-3 overflow-y-auto pr-1">
                         @if (UpcomingDeadlines.Any())
                         {
                             @foreach (var item in UpcomingDeadlines)
@@ -254,7 +254,7 @@
                     </a>
                 </div>
 
-                <div class="divide-y divide-slate-100">
+                <div class="max-h-[760px] divide-y divide-slate-100 overflow-y-auto">
                     @if (ProjectCards.Any())
                     {
                         @foreach (var project in ProjectCards)
@@ -454,7 +454,6 @@
         return projects
             .OrderByDescending(project => progressByProject.TryGetValue(project.Id, out var progress) ? progress.CompletionPercentage : 0)
             .ThenBy(project => project.EndDate)
-            .Take(4)
             .Select((project, index) =>
             {
                 progressByProject.TryGetValue(project.Id, out var progress);
@@ -526,7 +525,6 @@
             .Cast<TeamProgressViewModel>()
             .OrderByDescending(item => item.Total)
             .ThenBy(item => item.FullName)
-            .Take(5)
             .ToList();
     }
 
@@ -561,7 +559,6 @@
         return projects
             .Where(project => project.EndDate.Date >= DateTime.Today)
             .OrderBy(project => project.EndDate)
-            .Take(5)
             .Select(project =>
             {
                 var daysLeft = (project.EndDate.Date - DateTime.Today).Days;

TaskTrackingSystem.WebApp/Components/Pages/Tasks.razor

@@ -211,7 +211,7 @@
                 <div class="grid grid-cols-2 gap-4">
                     <div>
                         <label class="block text-sm font-medium text-slate-700 mb-1.5">Project <span class="text-red-500">*</span></label>
-                        <select @bind="formProjectId" class="w-full rounded-lg border @(isProjectError ? "border-red-500 focus:ring-red-500" : "border-slate-200 focus:ring-slate-900") px-3 py-2 text-sm text-slate-900 focus:outline-none focus:ring-2 focus:border-transparent transition-all">
+                        <select value="@formProjectId" @onchange="OnFormProjectChanged" class="w-full rounded-lg border @(isProjectError ? "border-red-500 focus:ring-red-500" : "border-slate-200 focus:ring-slate-900") px-3 py-2 text-sm text-slate-900 focus:outline-none focus:ring-2 focus:border-transparent transition-all">
                             <option value="0">Select project...</option>
                             @foreach (var p in projects)
                             {
@@ -249,13 +249,81 @@
                 <div class="grid grid-cols-2 gap-4">
                     <div>
                         <label class="block text-sm font-medium text-slate-700 mb-1.5">Assignee</label>
-                        <select @bind="formAssignedTo" class="w-full rounded-lg border border-slate-200 px-3 py-2 text-sm text-slate-900 focus:outline-none focus:ring-2 focus:ring-slate-900 focus:border-transparent transition-all">
-                            <option value="">Unassigned</option>
-                            @foreach (var u in allUsers)
+                        <div class="relative">
+                            <button type="button"
+                                    @onclick="ToggleAssigneeDropdown"
+                                    class="flex h-11 w-full items-center justify-between rounded-lg border border-slate-200 bg-white px-3 text-left text-sm text-slate-900 shadow-sm transition-colors hover:border-violet-300 hover:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-slate-900">
+                                <span class="truncate @(formAssignedTo.HasValue ? "font-medium text-slate-900" : "text-slate-400")">@SelectedAssigneeLabel</span>
+                                <i data-lucide="chevron-down" class="ml-3 h-4 w-4 shrink-0 text-slate-400"></i>
+                            </button>
+
+                            @if (isAssigneeDropdownOpen)
                             {
-                                <option value="@u.Id">@u.FirstName @u.LastName (@@@u.Username)</option>
+                                <div class="absolute bottom-full left-0 z-30 mb-2 w-full rounded-2xl border border-slate-200 bg-white p-3 shadow-[0_18px_40px_rgba(15,23,42,0.16)]">
+                                    <div class="flex items-center justify-end">
+                                        <button type="button"
+                                                @onclick="CloseAssigneeDropdown"
+                                                class="inline-flex h-7 w-7 items-center justify-center rounded-lg text-slate-400 transition-colors hover:bg-slate-100 hover:text-slate-600"
+                                                aria-label="Close assignee dropdown">
+                                            <i data-lucide="x" class="h-4 w-4"></i>
+                                        </button>
+                                    </div>
+                                    <div class="relative">
+                                        <input @bind="assigneeSearchInput"
+                                               @onfocus="EnsureAssigneeDropdownOpen"
+                                               type="text"
+                                               placeholder="Search project members..."
+                                               class="w-full rounded-xl border border-slate-200 bg-white py-2 pl-9 pr-3 text-sm text-slate-900 placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-violet-600 focus:border-transparent" />
+                                        <i data-lucide="search" class="absolute left-3 top-2.5 h-4 w-4 text-slate-400"></i>
+                                    </div>
+
+                                    @if (isLoadingProjectMembers)
+                                    {
+                                        <div class="mt-3 rounded-xl border border-dashed border-slate-200 bg-slate-50 px-3 py-4 text-center text-xs text-slate-500">
+                                            Loading project members...
+                                        </div>
+                                    }
+                                    else
+                                    {
+                                        <div class="mt-3 max-h-56 overflow-y-auto space-y-2 pr-1">
+                                            <button type="button"
+                                                    @onclick="() => SetFormAssignee(null)"
+                                                    class="flex w-full items-center gap-3 rounded-xl border px-3 py-3 text-left transition-colors @(formAssignedTo.HasValue ? "border-slate-200 bg-white hover:bg-slate-50" : "border-violet-600 bg-violet-50/40")">
+                                                <span class="flex h-9 w-9 items-center justify-center rounded-full bg-slate-100 text-slate-500 text-xs font-bold shrink-0">
+                                                    <i data-lucide="user-minus" class="h-4 w-4"></i>
+                                                </span>
+                                                <div class="min-w-0 flex-1">
+                                                    <p class="text-sm font-semibold text-slate-900">Unassigned</p>
+                                                </div>
+                                            </button>
+
+                                            @foreach (var user in FilteredProjectMembers)
+                                            {
+                                                var isSelected = formAssignedTo == user.Id;
+                                                <button type="button"
+                                                        @onclick="() => SetFormAssignee(user.Id)"
+                                                        class="flex w-full items-center gap-3 rounded-xl border px-3 py-3 text-left transition-colors @(isSelected ? "border-violet-600 bg-violet-50/40" : "border-slate-100 bg-white hover:border-slate-200 hover:bg-slate-50")">
+                                                    <span class="flex h-9 w-9 items-center justify-center rounded-full bg-violet-100 text-violet-700 text-xs font-bold shrink-0">
+                                                        @(user.FirstName.Length > 0 ? user.FirstName[0].ToString().ToUpper() : "")@(user.LastName.Length > 0 ? user.LastName[0].ToString().ToUpper() : "")
+                                                    </span>
+                                                    <div class="min-w-0 flex-1">
+                                                        <p class="truncate text-sm font-semibold text-slate-900">@user.FirstName @user.LastName</p>
+                                                        <p class="truncate text-xs text-slate-500">@@@user.Username</p>
+                                                    </div>
+                                                </button>
+                                            }
+
+                                            @if (!FilteredProjectMembers.Any())
+                                            {
+                                                <div class="rounded-xl border border-dashed border-slate-200 bg-slate-50 px-3 py-4 text-center text-xs text-slate-500">
+                                                    No members match the current search.
+                                                </div>
+                                            }
+                                        </div>
+                                    }
+                                </div>
                             }
-                        </select>
+                        </div>
                     </div>
                     <div>
                         <label class="block text-sm font-medium text-slate-700 mb-1.5">Estimated Hours</label>
@@ -315,6 +383,7 @@
     private bool showModal = false;
     private bool isEditing = false;
     private bool isSaving = false;
+    private bool isAssigneeDropdownOpen = false;
     private string? errorMessage;
 
     // Per-field validation
@@ -336,6 +405,7 @@
     private List<TaskDto> taskList = new();
     private List<ProjectDto> projects = new();
     private List<UserDto> allUsers = new();
+    private List<UserDto> projectMembers = new();
 
     private string? successMessage;
 
@@ -363,8 +433,10 @@
     private TaskPriority formPriorityId = TaskPriority.Medium;
     private DateTime formDueDate = DateTime.Today.AddDays(7);
     private long? formAssignedTo;
+    private string assigneeSearchInput = "";
     private decimal? formEstimatedHours;
     private decimal? formActualHours;
+    private bool isLoadingProjectMembers;
 
     protected override async Task OnInitializedAsync()
     {
@@ -530,7 +602,149 @@
         canUpdateTask = canEditTask;
     }
 
-    private void OpenCreateModal()
+    private IEnumerable<UserDto> FilteredProjectMembers
+    {
+        get
+        {
+            var result = projectMembers.Where(u => u.IsActive);
+
+            if (!string.IsNullOrWhiteSpace(assigneeSearchInput))
+            {
+                var search = assigneeSearchInput.Trim();
+                result = result.Where(u =>
+                    $"{u.FirstName} {u.LastName}".Contains(search, StringComparison.OrdinalIgnoreCase) ||
+                    (!string.IsNullOrWhiteSpace(u.Username) && u.Username.Contains(search, StringComparison.OrdinalIgnoreCase)) ||
+                    (!string.IsNullOrWhiteSpace(u.Email) && u.Email.Contains(search, StringComparison.OrdinalIgnoreCase)));
+            }
+
+            return result
+                .OrderBy(u => u.FirstName)
+                .ThenBy(u => u.LastName)
+                .ToList();
+        }
+    }
+
+    private string SelectedAssigneeLabel
+    {
+        get
+        {
+            if (!formAssignedTo.HasValue)
+            {
+                return "Unassigned";
+            }
+
+            var selectedUser = projectMembers.FirstOrDefault(u => u.Id == formAssignedTo.Value);
+            return selectedUser == null
+                ? "Selected member"
+                : $"{selectedUser.FirstName} {selectedUser.LastName}".Trim();
+        }
+    }
+
+    private async Task OnFormProjectChanged(ChangeEventArgs e)
+    {
+        if (long.TryParse(e.Value?.ToString(), out var projectId))
+        {
+            formProjectId = projectId;
+        }
+        else
+        {
+            formProjectId = 0;
+        }
+
+        formAssignedTo = null;
+        assigneeSearchInput = "";
+        await LoadProjectMembersAsync(formProjectId);
+    }
+
+    private void SetFormAssignee(long? userId)
+    {
+        formAssignedTo = userId;
+        errorMessage = null;
+        isAssigneeDropdownOpen = false;
+    }
+
+    private void OpenAssigneeDropdown()
+    {
+        if (formProjectId <= 0)
+        {
+            return;
+        }
+
+        isAssigneeDropdownOpen = true;
+    }
+
+    private void ToggleAssigneeDropdown()
+    {
+        if (isAssigneeDropdownOpen)
+        {
+            CloseAssigneeDropdown();
+            return;
+        }
+
+        OpenAssigneeDropdown();
+    }
+
+    private void EnsureAssigneeDropdownOpen()
+    {
+        if (formProjectId <= 0)
+        {
+            return;
+        }
+
+        isAssigneeDropdownOpen = true;
+    }
+
+    private void CloseAssigneeDropdown()
+    {
+        isAssigneeDropdownOpen = false;
+    }
+
+    private async Task LoadProjectMembersAsync(long projectId)
+    {
+        projectMembers.Clear();
+        isLoadingProjectMembers = true;
+
+        try
+        {
+            if (projectId <= 0)
+            {
+                return;
+            }
+
+            var client = ApiClient.CreateClient();
+            var membersResult = await client.GetFromJsonAsync<Result<IEnumerable<UserDto>>>($"Project/{projectId}/members", Serialization.CaseInsensitive);
+            if (membersResult?.IsSuccess == true && membersResult.Value != null)
+            {
+                projectMembers = membersResult.Value
+                    .Where(user => user.IsActive)
+                    .OrderBy(user => user.FirstName)
+                    .ThenBy(user => user.LastName)
+                    .ToList();
+
+                if (formAssignedTo.HasValue && !projectMembers.Any(user => user.Id == formAssignedTo.Value))
+                {
+                    formAssignedTo = null;
+                }
+            }
+            else
+            {
+                formAssignedTo = null;
+            }
+        }
+        catch (Exception ex)
+        {
+            Console.WriteLine($"Failed to load project members for task form: {ex.Message}");
+            formAssignedTo = null;
+        }
+        finally
+        {
+            isLoadingProjectMembers = false;
+            await InvokeAsync(StateHasChanged);
+            await JS.InvokeVoidAsync("initIcons");
+        }
+    }
+
+    private async Task OpenCreateModal()
     {
         isEditing = false;
         editingId = 0;
@@ -541,15 +755,18 @@
         formPriorityId = TaskPriority.Medium;
         formDueDate = DateTime.Today.AddDays(7);
         formAssignedTo = null;
+        assigneeSearchInput = "";
         formEstimatedHours = null;
         formActualHours = null;
         errorMessage = null;
         isTitleError = false; titleErrorMessage = "";
         isProjectError = false; projectErrorMessage = "";
         showModal = true;
+
+        await LoadProjectMembersAsync(formProjectId);
     }
 
-    private void OpenEditModal(TaskDto task)
+    private async Task OpenEditModal(TaskDto task)
     {
         isEditing = true;
         editingId = task.Id;
@@ -560,12 +777,15 @@
         formPriorityId = task.PriorityId;
         formDueDate = task.DueDate;
         formAssignedTo = task.AssignedTo;
+        assigneeSearchInput = "";
         formEstimatedHours = task.EstimatedHours;
         formActualHours = task.ActualHours;
         errorMessage = null;
         isTitleError = false; titleErrorMessage = "";
         isProjectError = false; projectErrorMessage = "";
         showModal = true;
+
+        await LoadProjectMembersAsync(formProjectId);
     }
 
     private void CloseModal()
@@ -574,6 +794,10 @@
         errorMessage = null;
         isTitleError = false; titleErrorMessage = "";
         isProjectError = false; projectErrorMessage = "";
+        assigneeSearchInput = "";
+        isAssigneeDropdownOpen = false;
+        projectMembers.Clear();
+        isLoadingProjectMembers = false;
     }
 
     private void RequestSaveConfirmation()

TaskTrackingSystem.WebApp/Components/Partial/NotificationBell.razor

@@ -27,6 +27,12 @@
                     <p class="text-xs text-slate-500">@UnreadCount unread</p>
                 </div>
                 <div class="flex items-center gap-2">
+                    @if (Notifications.Any(item => item.IsRead))
+                    {
+                        <button type="button" class="text-xs font-semibold text-rose-600 hover:text-rose-700" @onclick="RequestCleanupConfirmation">
+                            Clear read
+                        </button>
+                    }
                     <button type="button" class="text-xs font-semibold text-violet-600 hover:text-violet-700" @onclick="RefreshAsync">
                         Refresh
                     </button>
@@ -85,11 +91,20 @@
     }
 </div>
 
+<ConfirmDialog IsVisible="showCleanupConfirmDialog"
+               Title="Clear read notifications?"
+               Message="This will permanently remove all read notifications from your list."
+               ConfirmText="Clear"
+               Icon="trash-2"
+               OnConfirm="ConfirmCleanupAsync"
+               OnCancel="CloseCleanupConfirmDialog" />
+
 @code {
     private HubConnection? _hubConnection;
     private bool _hubHandlersRegistered;
     private bool IsOpen;
     private bool IsLoading;
+    private bool showCleanupConfirmDialog;
     private int UnreadCount;
     private List<NotificationDto> Notifications = new();
 
@@ -246,6 +261,45 @@
         }
     }
 
+    private void RequestCleanupConfirmation()
+    {
+        showCleanupConfirmDialog = true;
+    }
+
+    private void CloseCleanupConfirmDialog()
+    {
+        showCleanupConfirmDialog = false;
+    }
+
+    private async Task ConfirmCleanupAsync()
+    {
+        showCleanupConfirmDialog = false;
+        await ClearReadNotificationsAsync();
+    }
+
+    private async Task ClearReadNotificationsAsync()
+    {
+        try
+        {
+            var authState = await AuthStateProvider.GetAuthenticationStateAsync();
+            if (authState.User.Identity?.IsAuthenticated != true)
+            {
+                return;
+            }
+
+            var client = ApiClient.CreateClient(authState.User);
+            var response = await client.DeleteAsync("Notification/read");
+            if (response.IsSuccessStatusCode)
+            {
+                await RefreshAsync();
+            }
+        }
+        catch (Exception ex)
+        {
+            Console.WriteLine($"[DEBUG NotificationBell] Clear read notifications failed: {ex.Message}");
+        }
+    }
+
     private async Task MarkReadAsync(NotificationDto item)
     {
         if (item.IsRead)

TaskTrackingSystem.WebApp/wwwroot/app.css

@@ -23,6 +23,38 @@ html, body {
     font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
     background-color: var(--app-bg);
     color: var(--text-primary);
+    scrollbar-gutter: stable;
+}
+
+* {
+    scrollbar-width: thin;
+    scrollbar-color: rgba(100, 116, 139, 0.72) transparent;
+}
+
+*::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+}
+
+*::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+*::-webkit-scrollbar-thumb {
+    background-color: rgba(100, 116, 139, 0.72);
+    border: 2px solid transparent;
+    border-radius: 999px;
+    background-clip: content-box;
+    min-height: 40px;
+}
+
+*::-webkit-scrollbar-thumb:hover {
+    background-color: rgba(71, 85, 105, 0.92);
+    background-clip: content-box;
+}
+
+*::-webkit-scrollbar-corner {
+    background: transparent;
 }
 
 a, .btn-link {
@@ -82,6 +114,19 @@ html.dark,
 html.dark body {
     background-color: var(--app-bg);
     color: var(--text-primary);
+    scrollbar-color: rgba(148, 163, 184, 0.82) rgba(15, 23, 42, 0.9);
+}
+
+html.dark *::-webkit-scrollbar-track {
+    background: rgba(15, 23, 42, 0.9);
+}
+
+html.dark *::-webkit-scrollbar-thumb {
+    background-color: rgba(148, 163, 184, 0.82);
+}
+
+html.dark *::-webkit-scrollbar-thumb:hover {
+    background-color: rgba(226, 232, 240, 0.9);
 }
 
 html.dark .bg-white,