update: Adjust all chart views on reports

TaskTrackingSystem.WebApp/Components/Pages/Features/Reports/Components/AgingBucketChart.razor

@@ -0,0 +1,32 @@
+<div class="grid grid-cols-2 gap-3 lg:grid-cols-4">
+    @if (!Buckets.Any())
+    {
+        <div class="col-span-full rounded-lg border border-dashed border-slate-200 bg-slate-50 py-10 text-center text-sm text-slate-400">@EmptyText</div>
+    }
+    else
+    {
+        @foreach (var bucket in Buckets)
+        {
+            var height = MaxValue > 0 ? Math.Clamp(bucket.Value / MaxValue * 100, 8, 100) : 8;
+            <div class="rounded-xl border border-slate-100 bg-slate-50 p-3">
+                <div class="flex h-28 items-end rounded-lg bg-white p-2">
+                    <div class="w-full rounded-md" style="height: @height%; background-color: @bucket.Color;"></div>
+                </div>
+                <div class="mt-3 flex items-center justify-between gap-2">
+                    <span class="text-xs font-semibold text-slate-700">@bucket.Label</span>
+                    <span class="text-lg font-bold tabular-nums text-slate-950">@bucket.Value.ToString("0")</span>
+                </div>
+                @if (!string.IsNullOrWhiteSpace(bucket.Detail))
+                {
+                    <p class="mt-1 text-[11px] text-slate-500">@bucket.Detail</p>
+                }
+            </div>
+        }
+    }
+</div>
+
+@code {
+    [Parameter] public IReadOnlyList<ReportChartItem> Buckets { get; set; } = Array.Empty<ReportChartItem>();
+    [Parameter] public string EmptyText { get; set; } = "No aging data available.";
+    private double MaxValue => Math.Max(1, Buckets.Select(bucket => bucket.Value).DefaultIfEmpty(0).Max());
+}

TaskTrackingSystem.WebApp/Components/Pages/Features/Reports/Components/DonutStatusChart.razor

@@ -0,0 +1,64 @@
+<div class="grid gap-4 sm:grid-cols-[180px_minmax(0,1fr)] sm:items-center">
+    @if (Total <= 0)
+    {
+        <div class="col-span-full rounded-lg border border-dashed border-slate-200 bg-slate-50 py-10 text-center text-sm text-slate-400">@EmptyText</div>
+    }
+    else
+    {
+        <div class="relative mx-auto h-40 w-40">
+            <svg viewBox="0 0 180 180" class="h-40 w-40 -rotate-90" role="img" aria-label="@AriaLabel">
+                <circle cx="90" cy="90" r="66" fill="none" stroke="#e2e8f0" stroke-width="22" />
+                @foreach (var slice in Slices)
+                {
+                    <circle cx="90" cy="90" r="66" fill="none" stroke="@slice.Color" stroke-width="22" stroke-dasharray="@slice.DashArray" stroke-dashoffset="@slice.DashOffset" stroke-linecap="round" />
+                }
+            </svg>
+            <div class="absolute inset-0 flex flex-col items-center justify-center text-center">
+                <span class="text-2xl font-bold tabular-nums text-slate-950">@Total.ToString("0")</span>
+                <span class="text-[11px] font-semibold uppercase tracking-wider text-slate-400">@CenterLabel</span>
+            </div>
+        </div>
+        <div class="space-y-2">
+            @foreach (var item in Items)
+            {
+                var pct = Total > 0 ? item.Value / Total * 100 : 0;
+                <div class="flex items-center justify-between gap-3 rounded-lg border border-slate-100 bg-slate-50 px-3 py-2">
+                    <div class="flex min-w-0 items-center gap-2">
+                        <span class="h-2.5 w-2.5 shrink-0 rounded-full" style="background-color: @item.Color"></span>
+                        <span class="truncate text-xs font-medium text-slate-700">@item.Label</span>
+                    </div>
+                    <span class="shrink-0 text-xs font-semibold tabular-nums text-slate-900">@item.Value.ToString("0") · @pct.ToString("0")%</span>
+                </div>
+            }
+        </div>
+    }
+</div>
+
+@code {
+    [Parameter] public IReadOnlyList<ReportChartItem> Items { get; set; } = Array.Empty<ReportChartItem>();
+    [Parameter] public string CenterLabel { get; set; } = "total";
+    [Parameter] public string EmptyText { get; set; } = "No data available.";
+    [Parameter] public string AriaLabel { get; set; } = "Status distribution";
+
+    private double Total => Items.Sum(item => Math.Max(0, item.Value));
+    private IReadOnlyList<Slice> Slices => BuildSlices();
+
+    private IReadOnlyList<Slice> BuildSlices()
+    {
+        const double radius = 66;
+        var circumference = 2 * Math.PI * radius;
+        var offset = 0.0;
+        var slices = new List<Slice>();
+
+        foreach (var item in Items)
+        {
+            var arc = Total > 0 ? circumference * Math.Max(0, item.Value) / Total : 0;
+            slices.Add(new Slice(item.Color, $"{arc:0.##} {(circumference - arc):0.##}", -offset));
+            offset += arc;
+        }
+
+        return slices;
+    }
+
+    private sealed record Slice(string Color, string DashArray, double DashOffset);
+}

TaskTrackingSystem.WebApp/Components/Pages/Features/Reports/Components/FunnelChart.razor

@@ -0,0 +1,64 @@
+<div class="space-y-3">
+    @if (!Items.Any())
+    {
+        <div class="rounded-lg border border-dashed border-slate-200 bg-slate-50 py-10 text-center text-sm text-slate-400">@EmptyText</div>
+    }
+    else
+    {
+        @foreach (var item in Items.Select((value, index) => new { value, index }))
+        {
+            var stage = item.value;
+            var percent = Baseline > 0 ? stage.Value / Baseline * 100 : 0;
+            var width = stage.Value <= 0 ? 0 : Math.Clamp(percent, MinVisiblePercent, 100);
+            <div class="rounded-lg border border-transparent p-2 transition-colors hover:border-slate-100 hover:bg-slate-50" title="@BuildTitle(stage, percent)">
+                <div class="mb-1.5 grid grid-cols-[96px_1fr_72px] items-center gap-3 text-xs">
+                    <span class="truncate font-semibold text-slate-700">@stage.Label</span>
+                    <span class="text-[11px] text-slate-400">@GetStageHelper(stage)</span>
+                    <span class="text-right font-bold tabular-nums text-slate-950">@stage.Value.ToString("0") · @percent.ToString("0")%</span>
+                </div>
+                <div class="h-8 rounded-lg bg-slate-100 p-1">
+                    <div class="@GetFillClass(stage)" style="width: @width%; background-color: @(stage.Value > 0 ? stage.Color : "transparent");">
+                        @if (stage.Value > 0)
+                        {
+                            <span class="truncate px-2">@stage.Label</span>
+                        }
+                    </div>
+                </div>
+            </div>
+        }
+
+        <div class="rounded-lg border border-slate-100 bg-slate-50 px-3 py-2 text-xs text-slate-500">
+            Width is measured against @Items.First().Label.ToLowerInvariant() (@Baseline.ToString("0")). Zero-value stages keep an empty track with no colored fill.
+        </div>
+    }
+</div>
+
+@code {
+    [Parameter] public IReadOnlyList<ReportChartItem> Items { get; set; } = Array.Empty<ReportChartItem>();
+    [Parameter] public string EmptyText { get; set; } = "No funnel data available.";
+    [Parameter] public double MinVisiblePercent { get; set; } = 4;
+
+    private double Baseline => Math.Max(1, Items.FirstOrDefault()?.Value ?? Items.Select(item => item.Value).DefaultIfEmpty(0).Max());
+
+    private static string GetFillClass(ReportChartItem item)
+    {
+        return item.Value > 0
+            ? "flex h-full items-center justify-end rounded-md text-[11px] font-semibold text-white transition-all"
+            : "h-full rounded-md";
+    }
+
+    private static string GetStageHelper(ReportChartItem item)
+    {
+        if (item.Value <= 0)
+        {
+            return $"No {item.Label.ToLowerInvariant()}";
+        }
+
+        return item.Detail ?? string.Empty;
+    }
+
+    private static string BuildTitle(ReportChartItem item, double percent)
+    {
+        return $"{item.Label}: {item.Value:0} ({percent:0}% of baseline)";
+    }
+}

TaskTrackingSystem.WebApp/Components/Pages/Features/Reports/Components/MetricComparisonCard.razor

@@ -0,0 +1,26 @@
+<ReportChartCard Title="@Title" Subtitle="@Subtitle" Value="@PrimaryValue" ValueLabel="@PrimaryLabel" Insight="@Insight">
+    <div class="space-y-4">
+        <div class="grid grid-cols-2 gap-3">
+            <div class="rounded-xl border border-slate-100 bg-slate-50 p-3">
+                <div class="text-[11px] font-semibold uppercase tracking-wider text-slate-400">@PrimaryLabel</div>
+                <div class="mt-1 text-2xl font-bold tabular-nums text-slate-950">@PrimaryValue</div>
+            </div>
+            <div class="rounded-xl border border-slate-100 bg-slate-50 p-3">
+                <div class="text-[11px] font-semibold uppercase tracking-wider text-slate-400">@SecondaryLabel</div>
+                <div class="mt-1 text-2xl font-bold tabular-nums text-slate-950">@SecondaryValue</div>
+            </div>
+        </div>
+        <StackedProgressBar Segments="Segments" EmptyText="No comparison data available." />
+    </div>
+</ReportChartCard>
+
+@code {
+    [Parameter, EditorRequired] public string Title { get; set; } = string.Empty;
+    [Parameter] public string? Subtitle { get; set; }
+    [Parameter] public string PrimaryLabel { get; set; } = "Actual";
+    [Parameter] public string PrimaryValue { get; set; } = "0";
+    [Parameter] public string SecondaryLabel { get; set; } = "Target";
+    [Parameter] public string SecondaryValue { get; set; } = "0";
+    [Parameter] public string? Insight { get; set; }
+    [Parameter] public IReadOnlyList<StackedSegment> Segments { get; set; } = Array.Empty<StackedSegment>();
+}

TaskTrackingSystem.WebApp/Components/Pages/Features/Reports/Components/RadialMetricCard.razor

@@ -0,0 +1,37 @@
+<ReportChartCard Title="@Title" Subtitle="@Subtitle" Value="@Value" ValueLabel="@ValueLabel" Insight="@Insight">
+    <div class="flex items-center justify-center">
+        <div class="relative h-36 w-36">
+            <svg viewBox="0 0 160 160" class="h-36 w-36 -rotate-90" role="img" aria-label="@($"{Title}: {Percent:0}%")">
+                <circle cx="80" cy="80" r="58" fill="none" stroke="#e2e8f0" stroke-width="16" />
+                <circle cx="80" cy="80" r="58" fill="none" stroke="@Color" stroke-width="16" stroke-dasharray="@DashArray" stroke-linecap="round" />
+            </svg>
+            <div class="absolute inset-0 flex flex-col items-center justify-center">
+                <span class="text-3xl font-bold tabular-nums text-slate-950">@ClampedPercent.ToString("0")%</span>
+                <span class="text-[11px] font-semibold uppercase tracking-wider text-slate-400">@CenterLabel</span>
+            </div>
+        </div>
+    </div>
+</ReportChartCard>
+
+@code {
+    [Parameter, EditorRequired] public string Title { get; set; } = string.Empty;
+    [Parameter] public string? Subtitle { get; set; }
+    [Parameter] public string? Value { get; set; }
+    [Parameter] public string? ValueLabel { get; set; }
+    [Parameter] public string? Insight { get; set; }
+    [Parameter] public string CenterLabel { get; set; } = "score";
+    [Parameter] public double Percent { get; set; }
+    [Parameter] public string Color { get; set; } = "#7c3aed";
+
+    private double ClampedPercent => Math.Clamp(Percent, 0, 100);
+    private string DashArray
+    {
+        get
+        {
+            const double radius = 58;
+            var circumference = 2 * Math.PI * radius;
+            var arc = circumference * ClampedPercent / 100;
+            return $"{arc:0.##} {(circumference - arc):0.##}";
+        }
+    }
+}

TaskTrackingSystem.WebApp/Components/Pages/Features/Reports/Components/ReportChartCard.razor

@@ -0,0 +1,43 @@
+<section class="@CardClass">
+    <div class="flex items-start justify-between gap-4">
+        <div class="min-w-0">
+            <h3 class="truncate text-sm font-semibold text-slate-950">@Title</h3>
+            @if (!string.IsNullOrWhiteSpace(Subtitle))
+            {
+                <p class="mt-1 text-xs leading-5 text-slate-500">@Subtitle</p>
+            }
+        </div>
+        @if (!string.IsNullOrWhiteSpace(Value))
+        {
+            <div class="shrink-0 text-right">
+                <div class="text-2xl font-bold tabular-nums text-slate-950">@Value</div>
+                @if (!string.IsNullOrWhiteSpace(ValueLabel))
+                {
+                    <div class="text-[11px] font-semibold uppercase tracking-wider text-slate-400">@ValueLabel</div>
+                }
+            </div>
+        }
+    </div>
+
+    <div class="@BodyClass">
+        @ChildContent
+    </div>
+
+    @if (!string.IsNullOrWhiteSpace(Insight))
+    {
+        <div class="mt-4 rounded-lg border border-slate-100 bg-slate-50 px-3 py-2 text-xs leading-5 text-slate-600">
+            @Insight
+        </div>
+    }
+</section>
+
+@code {
+    [Parameter, EditorRequired] public string Title { get; set; } = string.Empty;
+    [Parameter] public string? Subtitle { get; set; }
+    [Parameter] public string? Value { get; set; }
+    [Parameter] public string? ValueLabel { get; set; }
+    [Parameter] public string? Insight { get; set; }
+    [Parameter] public string CardClass { get; set; } = "rounded-xl border border-slate-200 bg-white p-5 shadow-sm";
+    [Parameter] public string BodyClass { get; set; } = "mt-5";
+    [Parameter] public RenderFragment? ChildContent { get; set; }
+}

TaskTrackingSystem.WebApp/Components/Pages/Features/Reports/Components/ReportChartModels.cs

@@ -0,0 +1,13 @@
+namespace TaskTrackingSystem.WebApp.Components.Pages.Features.Reports.Components;
+
+public sealed record ReportChartItem(string Label, double Value, string Color = "#7c3aed", string? Detail = null);
+
+public sealed record StackedSegment(string Label, double Value, string Color, string? Detail = null);
+
+public sealed record HeatmapCell(string Row, string Column, double Value, string? Detail = null);
+
+public sealed record RiskMatrixPoint(string Label, int Severity, int Urgency, double Value, string Color = "#7c3aed", string? Detail = null);
+
+public sealed record TopRiskItem(string Title, string Meta, double Score, string Badge, string Tone = "slate", string? Detail = null);
+
+public sealed record SparklinePoint(string Label, double Value);

TaskTrackingSystem.WebApp/Components/Pages/Features/Reports/Components/RiskMatrixCard.razor

@@ -0,0 +1,129 @@
+<ReportChartCard Title="@Title" Subtitle="@Subtitle" Insight="@Insight">
+    @if (!Points.Any())
+    {
+        <div class="rounded-lg border border-dashed border-slate-200 bg-slate-50 py-10 text-center text-sm text-slate-400">@EmptyText</div>
+    }
+    else
+    {
+        <div class="space-y-3">
+            <div class="grid grid-cols-[72px_repeat(3,minmax(0,1fr))] items-center gap-2">
+                <div></div>
+                @foreach (var label in UrgencyLabels)
+                {
+                    <div class="rounded-lg bg-slate-50 px-2 py-1.5 text-center text-[11px] font-semibold uppercase tracking-wider text-slate-500">@label</div>
+                }
+            </div>
+
+            <div class="grid grid-cols-[72px_minmax(0,1fr)] gap-2">
+                <div class="flex items-center justify-center rounded-lg bg-slate-50 px-2 text-center text-[11px] font-semibold uppercase tracking-wider text-slate-500 [writing-mode:vertical-rl] rotate-180">
+                    @SeverityAxisLabel
+                </div>
+                <div class="grid min-h-[260px] grid-cols-3 grid-rows-3 gap-2 rounded-xl border border-slate-100 bg-slate-50 p-2" role="img" aria-label="@Title">
+            @for (var y = 3; y >= 1; y--)
+            {
+                @for (var x = 1; x <= 3; x++)
+                {
+                    var points = Points.Where(point => point.Severity == x && point.Urgency == y).ToList();
+                    var total = points.Sum(point => point.Value);
+                            var title = BuildCellTitle(points, x, y, total);
+                    <div class="@GetCellClass(x, y, total)" title="@title">
+                        <span class="@GetCountClass(total)">@total.ToString("0")</span>
+                        <span class="@GetLabelClass(total)">@GetCellLabel(x, y, total)</span>
+                        @if (total > 0)
+                        {
+                            <span class="mt-1 truncate text-[11px] text-slate-500">@BuildCellSummary(points)</span>
+                        }
+                    </div>
+                }
+            }
+                </div>
+            </div>
+
+            <div class="grid grid-cols-[72px_repeat(3,minmax(0,1fr))] items-center gap-2">
+                <div></div>
+                @foreach (var label in SeverityLabels)
+                {
+                    <div class="text-center text-[11px] font-medium text-slate-400">@label</div>
+                }
+            </div>
+
+            <div class="flex flex-wrap items-center gap-x-4 gap-y-2 rounded-lg border border-slate-100 bg-slate-50 px-3 py-2 text-[11px] text-slate-500">
+                <span class="font-semibold uppercase tracking-wider text-slate-400">Legend</span>
+                <span class="flex items-center gap-1.5"><span class="h-2.5 w-2.5 rounded-full bg-emerald-400"></span>Healthy</span>
+                <span class="flex items-center gap-1.5"><span class="h-2.5 w-2.5 rounded-full bg-blue-400"></span>Watch</span>
+                <span class="flex items-center gap-1.5"><span class="h-2.5 w-2.5 rounded-full bg-amber-400"></span>At risk</span>
+                <span class="flex items-center gap-1.5"><span class="h-2.5 w-2.5 rounded-full bg-rose-400"></span>Critical</span>
+            </div>
+        </div>
+    }
+</ReportChartCard>
+
+@code {
+    [Parameter] public string Title { get; set; } = "Risk matrix";
+    [Parameter] public string? Subtitle { get; set; }
+    [Parameter] public string? Insight { get; set; }
+    [Parameter] public IReadOnlyList<RiskMatrixPoint> Points { get; set; } = Array.Empty<RiskMatrixPoint>();
+    [Parameter] public string EmptyText { get; set; } = "No matrix data available.";
+    [Parameter] public string SeverityAxisLabel { get; set; } = "Risk severity";
+    [Parameter] public IReadOnlyList<string> UrgencyLabels { get; set; } = new[] { "Low urgency", "Medium", "High urgency" };
+    [Parameter] public IReadOnlyList<string> SeverityLabels { get; set; } = new[] { "Low risk", "Medium", "High risk" };
+
+    private static string GetCellLabel(int severity, int urgency, double total)
+    {
+        if (total <= 0)
+        {
+            return "No projects";
+        }
+
+        return (severity, urgency) switch
+        {
+            (3, 3) => "Critical",
+            (3, _) or (_, 3) => "At risk",
+            (1, 1) => "Healthy",
+            _ => "Watch"
+        };
+    }
+
+    private static string GetCellClass(int severity, int urgency, double total)
+    {
+        if (total <= 0)
+        {
+            return "flex min-h-[72px] flex-col justify-center rounded-lg border border-slate-100 bg-white p-3 text-center transition-colors hover:border-slate-200";
+        }
+
+        var score = severity * urgency;
+        var tone = score >= 9
+            ? "border-rose-200 bg-rose-50"
+            : score >= 6
+                ? "border-amber-200 bg-amber-50"
+                : score >= 3
+                    ? "border-blue-100 bg-blue-50"
+                    : "border-emerald-100 bg-emerald-50";
+
+        return $"flex min-h-[72px] flex-col justify-center rounded-lg border p-3 text-center transition-colors hover:border-slate-300 hover:bg-white {tone}";
+    }
+
+    private static string GetCountClass(double total) => total > 0
+        ? "text-2xl font-bold tabular-nums text-slate-950"
+        : "text-xl font-bold tabular-nums text-slate-300";
+
+    private static string GetLabelClass(double total) => total > 0
+        ? "mt-1 text-[11px] font-semibold uppercase tracking-wider text-slate-600"
+        : "mt-1 text-[11px] font-medium text-slate-400";
+
+    private static string BuildCellSummary(IReadOnlyList<RiskMatrixPoint> points)
+    {
+        return string.Join(", ", points.OrderByDescending(point => point.Value).Take(2).Select(point => point.Label));
+    }
+
+    private static string BuildCellTitle(IReadOnlyList<RiskMatrixPoint> points, int severity, int urgency, double total)
+    {
+        if (total <= 0)
+        {
+            return $"No projects. Severity {severity}, urgency {urgency}.";
+        }
+
+        var names = string.Join(Environment.NewLine, points.OrderByDescending(point => point.Value).Select(point => $"{point.Label}: {point.Detail ?? $"{point.Value:0} item(s)"}"));
+        return $"{total:0} project(s){Environment.NewLine}{names}";
+    }
+}

TaskTrackingSystem.WebApp/Components/Pages/Features/Reports/Components/StackedProgressBar.razor

@@ -0,0 +1,36 @@
+<div class="space-y-3">
+    @if (!Segments.Any() || Total <= 0)
+    {
+        <div class="rounded-lg border border-dashed border-slate-200 bg-slate-50 py-8 text-center text-sm text-slate-400">@EmptyText</div>
+    }
+    else
+    {
+        <div class="flex h-4 overflow-hidden rounded-full bg-slate-100" role="img" aria-label="@AriaLabel">
+            @foreach (var segment in Segments)
+            {
+                var width = segment.Value / Total * 100;
+                <div title="@($"{segment.Label}: {segment.Value:0}")" class="h-full" style="width: @width%; background-color: @segment.Color;"></div>
+            }
+        </div>
+        <div class="grid grid-cols-1 gap-2 sm:grid-cols-2">
+            @foreach (var segment in Segments)
+            {
+                var pct = segment.Value / Total * 100;
+                <div class="flex items-center justify-between rounded-lg border border-slate-100 bg-slate-50 px-3 py-2">
+                    <span class="flex min-w-0 items-center gap-2 text-xs font-medium text-slate-700">
+                        <span class="h-2.5 w-2.5 shrink-0 rounded-full" style="background-color: @segment.Color"></span>
+                        <span class="truncate">@segment.Label</span>
+                    </span>
+                    <span class="text-xs font-semibold tabular-nums text-slate-900">@segment.Value.ToString("0.#") · @pct.ToString("0")%</span>
+                </div>
+            }
+        </div>
+    }
+</div>
+
+@code {
+    [Parameter] public IReadOnlyList<StackedSegment> Segments { get; set; } = Array.Empty<StackedSegment>();
+    [Parameter] public string EmptyText { get; set; } = "No data available.";
+    [Parameter] public string AriaLabel { get; set; } = "Stacked progress";
+    private double Total => Segments.Sum(segment => Math.Max(0, segment.Value));
+}

TaskTrackingSystem.WebApp/Components/Pages/Features/Reports/Components/TopRiskList.razor

@@ -0,0 +1,52 @@
+<div class="space-y-3">
+    @if (!Items.Any())
+    {
+        <div class="rounded-lg border border-dashed border-slate-200 bg-slate-50 py-10 text-center text-sm text-slate-400">@EmptyText</div>
+    }
+    else
+    {
+        @foreach (var item in Items.Take(Limit))
+        {
+            <div class="rounded-xl border border-slate-100 bg-slate-50 px-4 py-3">
+                <div class="flex items-start justify-between gap-3">
+                    <div class="min-w-0">
+                        <div class="truncate text-sm font-semibold text-slate-950">@item.Title</div>
+                        <div class="mt-1 text-xs text-slate-500">@item.Meta</div>
+                    </div>
+                    <div class="shrink-0 rounded-full px-2.5 py-1 text-[11px] font-bold @GetBadgeClass(item.Tone)">@item.Badge</div>
+                </div>
+                <div class="mt-3 h-2 overflow-hidden rounded-full bg-white">
+                    <div class="h-full rounded-full @GetBarClass(item.Tone)" style="width: @Math.Clamp(item.Score, 0, 100)%"></div>
+                </div>
+                @if (!string.IsNullOrWhiteSpace(item.Detail))
+                {
+                    <p class="mt-2 text-xs text-slate-500">@item.Detail</p>
+                }
+            </div>
+        }
+    }
+</div>
+
+@code {
+    [Parameter] public IReadOnlyList<TopRiskItem> Items { get; set; } = Array.Empty<TopRiskItem>();
+    [Parameter] public int Limit { get; set; } = 5;
+    [Parameter] public string EmptyText { get; set; } = "No risk items to show.";
+
+    private static string GetBadgeClass(string tone) => tone switch
+    {
+        "rose" => "bg-rose-50 text-rose-700",
+        "amber" => "bg-amber-50 text-amber-700",
+        "emerald" => "bg-emerald-50 text-emerald-700",
+        "blue" => "bg-blue-50 text-blue-700",
+        _ => "bg-slate-100 text-slate-700"
+    };
+
+    private static string GetBarClass(string tone) => tone switch
+    {
+        "rose" => "bg-rose-500",
+        "amber" => "bg-amber-500",
+        "emerald" => "bg-emerald-500",
+        "blue" => "bg-blue-500",
+        _ => "bg-violet-600"
+    };
+}

TaskTrackingSystem.WebApp/Components/Pages/Features/Reports/Components/TrendSparklineCard.razor

@@ -0,0 +1,50 @@
+<ReportChartCard Title="@Title" Subtitle="@Subtitle" Value="@Value" ValueLabel="@ValueLabel" Insight="@Insight">
+    @if (Points.Count < 2)
+    {
+        <div class="rounded-lg border border-dashed border-slate-200 bg-slate-50 py-10 text-center text-sm text-slate-400">@EmptyText</div>
+    }
+    else
+    {
+        <svg viewBox="0 0 320 120" class="h-28 w-full" role="img" aria-label="@Title">
+            <path d="@AreaPath" fill="@Color" opacity="0.12" />
+            <path d="@LinePath" fill="none" stroke="@Color" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
+            @foreach (var point in SvgPoints)
+            {
+                <circle cx="@point.X" cy="@point.Y" r="4" fill="white" stroke="@Color" stroke-width="3" />
+            }
+        </svg>
+        <div class="mt-2 flex justify-between text-[11px] font-medium text-slate-400">
+            <span>@Points.First().Label</span>
+            <span>@Points.Last().Label</span>
+        </div>
+    }
+</ReportChartCard>
+
+@code {
+    [Parameter, EditorRequired] public string Title { get; set; } = string.Empty;
+    [Parameter] public string? Subtitle { get; set; }
+    [Parameter] public string? Value { get; set; }
+    [Parameter] public string? ValueLabel { get; set; }
+    [Parameter] public string? Insight { get; set; }
+    [Parameter] public IReadOnlyList<SparklinePoint> Points { get; set; } = Array.Empty<SparklinePoint>();
+    [Parameter] public string Color { get; set; } = "#7c3aed";
+    [Parameter] public string EmptyText { get; set; } = "Not enough data for a trend yet.";
+
+    private IReadOnlyList<(double X, double Y)> SvgPoints => BuildSvgPoints();
+    private string LinePath => SvgPoints.Any() ? $"M {string.Join(" L ", SvgPoints.Select(p => $"{p.X:0},{p.Y:0}"))}" : string.Empty;
+    private string AreaPath => SvgPoints.Any() ? $"{LinePath} L {SvgPoints.Last().X:0},112 L {SvgPoints.First().X:0},112 Z" : string.Empty;
+
+    private IReadOnlyList<(double X, double Y)> BuildSvgPoints()
+    {
+        var max = Math.Max(1, Points.Max(point => point.Value));
+        var min = Math.Min(0, Points.Min(point => point.Value));
+        var range = Math.Max(1, max - min);
+
+        return Points.Select((point, index) =>
+        {
+            var x = 16 + index * (288d / Math.Max(1, Points.Count - 1));
+            var y = 104 - ((point.Value - min) / range * 88);
+            return (x, y);
+        }).ToList();
+    }
+}

TaskTrackingSystem.WebApp/Components/Pages/Features/Reports/Components/WorkloadHeatmap.razor

@@ -0,0 +1,55 @@
+<ReportChartCard Title="@Title" Subtitle="@Subtitle" Insight="@Insight">
+    @if (!Rows.Any() || !Columns.Any())
+    {
+        <div class="rounded-lg border border-dashed border-slate-200 bg-slate-50 py-10 text-center text-sm text-slate-400">@EmptyText</div>
+    }
+    else
+    {
+        <div class="overflow-x-auto">
+            <div class="min-w-[520px]">
+                <div class="grid gap-2" style="grid-template-columns: 150px repeat(@Columns.Count, minmax(72px, 1fr));">
+                    <div></div>
+                    @foreach (var column in Columns)
+                    {
+                        <div class="text-center text-[11px] font-semibold uppercase tracking-wider text-slate-400">@column</div>
+                    }
+                    @foreach (var row in Rows)
+                    {
+                        <div class="truncate py-2 text-xs font-semibold text-slate-700">@row</div>
+                        @foreach (var column in Columns)
+                        {
+                            var cell = Cells.FirstOrDefault(item => item.Row == row && item.Column == column);
+                            var value = cell?.Value ?? 0;
+                            <div class="@GetCellClass(value)" title="@cell?.Detail">
+                                <span class="text-sm font-bold tabular-nums">@value.ToString("0.#")</span>
+                            </div>
+                        }
+                    }
+                </div>
+            </div>
+        </div>
+    }
+</ReportChartCard>
+
+@code {
+    [Parameter] public string Title { get; set; } = "Workload heatmap";
+    [Parameter] public string? Subtitle { get; set; }
+    [Parameter] public string? Insight { get; set; }
+    [Parameter] public IReadOnlyList<string> Rows { get; set; } = Array.Empty<string>();
+    [Parameter] public IReadOnlyList<string> Columns { get; set; } = Array.Empty<string>();
+    [Parameter] public IReadOnlyList<HeatmapCell> Cells { get; set; } = Array.Empty<HeatmapCell>();
+    [Parameter] public string EmptyText { get; set; } = "No workload data available.";
+
+    private static string GetCellClass(double value)
+    {
+        var tone = value >= 75
+            ? "border-rose-200 bg-rose-50 text-rose-700"
+            : value >= 45
+                ? "border-amber-200 bg-amber-50 text-amber-700"
+                : value > 0
+                    ? "border-blue-100 bg-blue-50 text-blue-700"
+                    : "border-slate-100 bg-white text-slate-300";
+
+        return $"flex h-12 items-center justify-center rounded-lg border text-center {tone}";
+    }
+}

TaskTrackingSystem.WebApp/Components/Pages/Features/Reports/EmployeeReport.razor

@@ -111,14 +111,29 @@
     {
         @if (isChartView)
         {
-            <!-- Chart View: SVG Horizontal Bar Chart showing Efficiency -->
-            <ChartCard Title="Workload by Employee" TitleClass="font-semibold text-slate-900 mb-4 font-sans text-md" BodyClass="mt-0">
-                <ChildContent>
-                    <div class="max-w-2xl">
-                        <ProgressListChart Items="EmployeeWorkloadItems" MaxValue="EmployeeWorkloadMax" EmptyText="No data available." />
-                    </div>
-                </ChildContent>
-            </ChartCard>
+            <div class="grid grid-cols-1 gap-5 xl:grid-cols-12">
+                <div class="xl:col-span-7">
+                    <WorkloadHeatmap Title="Workload heatmap" Subtitle="Capacity signals across assigned work, open issues, overdue issues, and hours." Rows="EmployeeHeatmapRows" Columns="EmployeeHeatmapColumns" Cells="EmployeeHeatmapCells" Insight="Darker cells mean someone may need support or scope adjustment." />
+                </div>
+                <div class="xl:col-span-5">
+                    <ReportChartCard Title="Capacity support list" Subtitle="Highest support signals, phrased as capacity risk." Insight="Use this to route help and remove blockers, not to rank people negatively.">
+                        <TopRiskList Items="EmployeeCapacityRiskItems" EmptyText="No capacity risks in the current filter." />
+                    </ReportChartCard>
+                </div>
+                <div class="xl:col-span-5">
+                    <ReportChartCard Title="Completed vs open issues" Subtitle="Team execution balance by issue state." Value="@CompletedIssueTotal.ToString()" ValueLabel="completed tasks">
+                        <StackedProgressBar Segments="EmployeeCompletionSegments" AriaLabel="Completed versus open employee workload" />
+                    </ReportChartCard>
+                </div>
+                <div class="xl:col-span-4">
+                    <ReportChartCard Title="Overdue support" Subtitle="Employees with overdue issue load." Insight="Treat overdue counts as support requests.">
+                        <TopRiskList Items="EmployeeOverdueItems" EmptyText="No overdue support needs found." />
+                    </ReportChartCard>
+                </div>
+                <div class="xl:col-span-3">
+                    <TrendSparklineCard Title="Completion pattern" Subtitle="Completion rate across visible employees." Value="@($"{AverageCompletionRate:0}%")" ValueLabel="avg rate" Points="EmployeeCompletionSparkline" Color="#3b82f6" Insight="A quick view of whether completion is clustered or balanced." />
+                </div>
+            </div>
         }
         else
         {
@@ -201,15 +216,52 @@
     private bool filterAssignToMe = false;
     private bool filterAssignToMyTeam = false;
 
-    private List<ProgressListChartItem> EmployeeWorkloadItems => allEmployees
-        .Select(emp => new ProgressListChartItem(
-            $"{emp.FullName} ({emp.Username})",
-            Math.Min(emp.OpenIssues * 10, 100),
-            $"{emp.OpenIssues} open, {emp.OverdueIssues} overdue, {emp.ActualHours:N1} hrs",
-            "#7c3aed"))
+    private List<string> EmployeeHeatmapRows => allEmployees.Take(6).Select(emp => emp.FullName).ToList();
+    private List<string> EmployeeHeatmapColumns => new() { "Assigned", "Open", "Overdue", "Hours" };
+    private int CompletedIssueTotal => allEmployees.Sum(emp => emp.CompletedCount);
+    private double AverageCompletionRate => allEmployees.Any() ? allEmployees.Average(emp => emp.CompletionRate) : 0;
+
+    private List<HeatmapCell> EmployeeHeatmapCells => allEmployees.Take(6)
+        .SelectMany(emp => new[]
+        {
+            new HeatmapCell(emp.FullName, "Assigned", Math.Min(100, emp.AssignedCount * 8), $"{emp.AssignedCount} assigned tasks"),
+            new HeatmapCell(emp.FullName, "Open", Math.Min(100, emp.OpenIssues * 12), $"{emp.OpenIssues} open issues"),
+            new HeatmapCell(emp.FullName, "Overdue", Math.Min(100, emp.OverdueIssues * 20), $"{emp.OverdueIssues} overdue issues"),
+            new HeatmapCell(emp.FullName, "Hours", Math.Min(100, (double)emp.ActualHours * 5), $"{emp.ActualHours:N1} actual hours")
+        })
+        .ToList();
+
+    private List<TopRiskItem> EmployeeCapacityRiskItems => allEmployees
+        .Select(emp =>
+        {
+            var score = Math.Min(100, (emp.OpenIssues * 14) + (emp.OverdueIssues * 24) + (emp.AssignedCount * 4) + (double)emp.ActualHours);
+            var tone = score >= 70 ? "rose" : score >= 45 ? "amber" : "blue";
+            return new TopRiskItem(emp.FullName, $"{emp.WorkloadLevel} · {emp.ActualHours:N1}h tracked", score, "needs support", tone, $"{emp.OpenIssues} open · {emp.OverdueIssues} overdue");
+        })
+        .OrderByDescending(item => item.Score)
+        .Take(5)
+        .ToList();
+
+    private List<StackedSegment> EmployeeCompletionSegments => new()
+    {
+        new("Completed tasks", allEmployees.Sum(emp => emp.CompletedCount), "#10b981"),
+        new("Assigned tasks", allEmployees.Sum(emp => Math.Max(0, emp.AssignedCount - emp.CompletedCount)), "#3b82f6"),
+        new("Open issues", allEmployees.Sum(emp => emp.OpenIssues), "#f59e0b")
+    };
+
+    private List<TopRiskItem> EmployeeOverdueItems => allEmployees
+        .Where(emp => emp.OverdueIssues > 0)
+        .OrderByDescending(emp => emp.OverdueIssues)
+        .Take(5)
+        .Select(emp => new TopRiskItem(emp.FullName, $"{emp.OpenIssues} open issues", Math.Min(100, emp.OverdueIssues * 25), $"{emp.OverdueIssues} overdue", "rose", "Capacity risk"))
         .ToList();
 
-    private double EmployeeWorkloadMax => Math.Max(100, EmployeeWorkloadItems.Select(item => item.Value).DefaultIfEmpty(0).Max());
+    private List<SparklinePoint> EmployeeCompletionSparkline => allEmployees
+        .OrderByDescending(emp => emp.AssignedCount)
+        .Take(8)
+        .Select(emp => new SparklinePoint(BuildShortName(emp.FullName), emp.CompletionRate))
+        .DefaultIfEmpty(new SparklinePoint("No data", 0))
+        .ToList();
 
     // Search and Pagination
     private string searchInput = "";
@@ -419,4 +471,10 @@
         "Declining" => "bg-rose-50 text-rose-700",
         _ => "bg-blue-50 text-blue-700"
     };
+
+    private static string BuildShortName(string fullName)
+    {
+        var parts = fullName.Split(' ', StringSplitOptions.RemoveEmptyEntries);
+        return parts.Length == 0 ? "User" : parts.Length == 1 ? parts[0] : $"{parts[0]} {parts[^1][0]}.";
+    }
 }

TaskTrackingSystem.WebApp/Components/Pages/Features/Reports/IssueReport.razor

@@ -98,11 +98,35 @@
         <div class="rounded-xl border border-slate-200 bg-white p-5 shadow-sm">
                 @if (isChartView)
                 {
-                    <div class="grid grid-cols-1 gap-5 md:grid-cols-2">
-                        @BarChart("Issues by Status", StatusChart)
-                        @BarChart("Issues by Priority", PriorityChart)
-                        @BarChart("Issues by Employee", EmployeeChart)
-                        @BarChart("Issues by Project", ProjectChart)
+                    <div class="grid grid-cols-1 gap-5 xl:grid-cols-12">
+                        <div class="xl:col-span-5">
+                            <ReportChartCard Title="Issue lifecycle funnel" Subtitle="How issues move from backlog to resolution." Insight="A large in-progress or blocked band is a daily execution signal.">
+                                <FunnelChart Items="IssueFunnelItems" />
+                            </ReportChartCard>
+                        </div>
+                        <div class="xl:col-span-4">
+                            <ReportChartCard Title="Issue status donut" Subtitle="Current status distribution, including overdue pressure." Insight="@IssueStatusInsight">
+                                <DonutStatusChart Items="IssueStatusItems" CenterLabel="issues" />
+                            </ReportChartCard>
+                        </div>
+                        <div class="xl:col-span-3">
+                            <RadialMetricCard Title="Blocked / overdue" Subtitle="Execution risk in the filtered issue set." Percent="@BlockedOverduePercent" Value="@((BlockedIssues + OverdueIssues).ToString())" ValueLabel="risk issues" CenterLabel="risk" Color="#ef4444" Insight="Focus standup discussion here first." />
+                        </div>
+                        <div class="xl:col-span-4">
+                            <ReportChartCard Title="Issues by project" Subtitle="Where issue volume is concentrated." Insight="Useful for project-level triage and planning health.">
+                                <TopRiskList Items="IssueProjectItems" EmptyText="No project issues found." />
+                            </ReportChartCard>
+                        </div>
+                        <div class="xl:col-span-4">
+                            <ReportChartCard Title="Issues by assignee" Subtitle="Support needs by assignee." Insight="Use as a support signal, especially when overdue or blocked items cluster.">
+                                <TopRiskList Items="IssueAssigneeItems" EmptyText="No assignee issues found." />
+                            </ReportChartCard>
+                        </div>
+                        <div class="xl:col-span-4">
+                            <ReportChartCard Title="Resolution aging" Subtitle="How close issues are to or past due date." Insight="Older overdue buckets should be cleared before new scope expands.">
+                                <AgingBucketChart Buckets="IssueAgingBuckets" />
+                            </ReportChartCard>
+                        </div>
                     </div>
                 }
                 else
@@ -283,27 +307,67 @@
     private IReadOnlyList<(string Label, int Value)> EmployeeChart => FilteredIssues.GroupBy(i => i.AssignedToName ?? "Unassigned").OrderByDescending(g => g.Count()).Take(5).Select(g => (g.Key, g.Count())).ToList();
     private IReadOnlyList<(string Label, int Value)> ProjectChart => FilteredIssues.GroupBy(i => i.ProjectName).OrderByDescending(g => g.Count()).Take(5).Select(g => (g.Key, g.Count())).ToList();
     private IEnumerable<string> Insights => new[] { $"{OverdueIssues} overdue issues need attention.", $"{BlockedIssues} issues are blocked.", $"Actual hours are {FilteredIssues.Sum(i => i.ActualHours ?? 0):N1} against {FilteredIssues.Sum(i => i.EstimatedHours ?? 0):N1} estimated." };
+    private double BlockedOverduePercent => FilteredIssues.Any() ? (BlockedIssues + OverdueIssues) / (double)FilteredIssues.Count() * 100 : 0;
+    private string IssueStatusInsight => OpenIssues > FilteredIssues.Count(i => i.StatusId == AppTaskStatus.Done)
+        ? $"{OpenIssues} issues are still open across the selected scope."
+        : "Resolved issues are leading this filtered set.";
 
-    private RenderFragment MetricCard(string label, string value, string icon, string color) => builder =>
+    private List<ReportChartItem> IssueFunnelItems => new()
     {
-        builder.OpenElement(0, "div");
-        builder.AddAttribute(1, "class", $"rounded-xl border border-{color}-100 bg-{color}-50 p-5 shadow-sm");
-        builder.AddMarkupContent(2, $"<div class=\"flex items-center justify-between\"><div><p class=\"text-xs font-semibold uppercase tracking-wider text-{color}-600\">{label}</p><p class=\"mt-1 text-3xl font-bold text-{color}-700\">{value}</p></div><span class=\"flex h-11 w-11 items-center justify-center rounded-xl bg-white/70\"><i data-lucide=\"{icon}\" class=\"h-6 w-6 text-{color}-600\"></i></span></div>");
-        builder.CloseElement();
+        new("Created", FilteredIssues.Count(), "#7c3aed", "All reported issues"),
+        new("Open", OpenIssues, "#3b82f6", "Unresolved issues"),
+        new("In Progress", FilteredIssues.Count(i => i.StatusId == AppTaskStatus.InProgress), "#06b6d4", "Currently being worked"),
+        new("Blocked", BlockedIssues, "#f59e0b", "Needs unblock review"),
+        new("Resolved", FilteredIssues.Count(i => i.StatusId == AppTaskStatus.Done), "#10b981", "Completed issues")
     };
 
-    private RenderFragment BarChart(string title, IReadOnlyList<(string Label, int Value)> rows) => builder =>
+    private List<ReportChartItem> IssueStatusItems => new()
     {
-        var max = Math.Max(1, rows.Select(r => r.Value).DefaultIfEmpty(0).Max());
-        builder.OpenElement(0, "div");
-        builder.AddAttribute(1, "class", "rounded-xl border border-slate-100 bg-slate-50 p-4");
-        builder.AddMarkupContent(2, $"<h3 class=\"mb-4 text-sm font-semibold text-slate-900\">{title}</h3>");
-        var seq = 3;
-        foreach (var row in rows)
+        new("To Do", FilteredIssues.Count(i => i.StatusId == AppTaskStatus.Todo), "#94a3b8"),
+        new("In Progress", FilteredIssues.Count(i => i.StatusId == AppTaskStatus.InProgress), "#3b82f6"),
+        new("Done", FilteredIssues.Count(i => i.StatusId == AppTaskStatus.Done), "#10b981"),
+        new("Overdue", OverdueIssues, "#ef4444")
+    };
+
+    private List<TopRiskItem> IssueProjectItems => FilteredIssues
+        .GroupBy(i => i.ProjectName)
+        .Select(g =>
         {
-            var width = row.Value * 100 / max;
-            builder.AddMarkupContent(seq++, $"<div class=\"mb-3\"><div class=\"mb-1 flex justify-between text-xs font-semibold text-slate-600\"><span>{row.Label}</span><span>{row.Value}</span></div><div class=\"h-2.5 rounded-full bg-white\"><div class=\"h-full rounded-full bg-violet-600\" style=\"width:{width}%\"></div></div></div>");
-        }
+            var blocked = g.Count(i => i.IsBlocked);
+            var overdue = g.Count(IsOverdue);
+            var score = Math.Min(100, (g.Count() * 10) + (blocked * 25) + (overdue * 20));
+            return new TopRiskItem(g.Key, $"{g.Count()} issues · {blocked} blocked", score, overdue > 0 ? $"{overdue} overdue" : $"{g.Count()} issues", overdue > 0 || blocked > 0 ? "rose" : "blue");
+        })
+        .OrderByDescending(item => item.Score)
+        .Take(5)
+        .ToList();
+
+    private List<TopRiskItem> IssueAssigneeItems => FilteredIssues
+        .GroupBy(i => i.AssignedToName ?? "Unassigned")
+        .Select(g =>
+        {
+            var blocked = g.Count(i => i.IsBlocked);
+            var overdue = g.Count(IsOverdue);
+            var score = Math.Min(100, (g.Count() * 12) + (blocked * 22) + (overdue * 18));
+            return new TopRiskItem(g.Key, $"{g.Count()} assigned issues", score, blocked > 0 ? $"{blocked} blocked" : $"{overdue} overdue", blocked > 0 || overdue > 0 ? "amber" : "blue", "Support signal");
+        })
+        .OrderByDescending(item => item.Score)
+        .Take(5)
+        .ToList();
+
+    private List<ReportChartItem> IssueAgingBuckets => new()
+    {
+        new("Due later", FilteredIssues.Count(i => !IsOverdue(i) && i.DueDate.Date > DateTime.Today.AddDays(3)), "#3b82f6"),
+        new("Due soon", FilteredIssues.Count(i => !IsOverdue(i) && i.DueDate.Date <= DateTime.Today.AddDays(3)), "#f59e0b"),
+        new("1-7d late", FilteredIssues.Count(i => IsOverdue(i) && (DateTime.Today - i.DueDate.Date).Days <= 7), "#fb7185"),
+        new("8d+ late", FilteredIssues.Count(i => IsOverdue(i) && (DateTime.Today - i.DueDate.Date).Days > 7), "#ef4444")
+    };
+
+    private RenderFragment MetricCard(string label, string value, string icon, string color) => builder =>
+    {
+        builder.OpenElement(0, "div");
+        builder.AddAttribute(1, "class", $"rounded-xl border border-{color}-100 bg-{color}-50 p-5 shadow-sm");
+        builder.AddMarkupContent(2, $"<div class=\"flex items-center justify-between\"><div><p class=\"text-xs font-semibold uppercase tracking-wider text-{color}-600\">{label}</p><p class=\"mt-1 text-3xl font-bold text-{color}-700\">{value}</p></div><span class=\"flex h-11 w-11 items-center justify-center rounded-xl bg-white/70\"><i data-lucide=\"{icon}\" class=\"h-6 w-6 text-{color}-600\"></i></span></div>");
         builder.CloseElement();
     };
 

TaskTrackingSystem.WebApp/Components/Pages/Features/Reports/OverdueTasksReport.razor

@@ -23,7 +23,15 @@
             <h2 class="text-3xl font-bold tracking-tight text-slate-900">Overdue &amp; Delayed Tasks</h2>
             <p class="text-slate-500 mt-1">Track tasks that have passed their due date or are at risk of delay.</p>
         </div>
-        <div class="flex items-center space-x-3">
+        <div class="flex flex-wrap items-center gap-3">
+            <div class="inline-flex rounded-lg border border-slate-200 bg-white p-0.5 shadow-sm">
+                <button @onclick="() => SetView(false)" class="inline-flex items-center rounded-md px-3 py-1.5 text-xs font-semibold @(!isChartView ? "bg-violet-600 text-white" : "text-slate-600 hover:text-slate-900") transition-colors">
+                    <i data-lucide="list" class="h-3.5 w-3.5 mr-1"></i> List View
+                </button>
+                <button @onclick="() => SetView(true)" class="inline-flex items-center rounded-md px-3 py-1.5 text-xs font-semibold @(isChartView ? "bg-violet-600 text-white" : "text-slate-600 hover:text-slate-900") transition-colors">
+                    <i data-lucide="bar-chart-3" class="h-3.5 w-3.5 mr-1"></i> Chart View
+                </button>
+            </div>
             <button @onclick="DownloadExcel" 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="download" class="h-4 w-4 mr-2"></i> Export Excel
             </button>
@@ -135,7 +143,34 @@
     }
     else
     {
-        <!-- Results Table -->
+        @if (isChartView)
+        {
+            <div class="grid grid-cols-1 gap-5 xl:grid-cols-12">
+                <div class="xl:col-span-7">
+                    <ReportChartCard Title="Aging buckets" Subtitle="How long delayed work has been waiting." Insight="@AgingInsight">
+                        <AgingBucketChart Buckets="AgingBuckets" />
+                    </ReportChartCard>
+                </div>
+                <div class="xl:col-span-5">
+                    <RadialMetricCard Title="High-priority overdue" Subtitle="Critical work that needs immediate support." Percent="@HighPriorityOverduePercent" Value="@criticalCount.ToString()" ValueLabel="high priority" CenterLabel="critical" Color="#ef4444" Insight="Phrase these as capacity risks so teams can unblock work, not assign blame." />
+                </div>
+                <div class="xl:col-span-6">
+                    <ReportChartCard Title="Delays by project" Subtitle="Project areas where delay concentration is highest." Insight="Use this to rebalance planning pressure across projects.">
+                        <TopRiskList Items="DelayProjectItems" EmptyText="No project delay concentration found." />
+                    </ReportChartCard>
+                </div>
+                <div class="xl:col-span-6">
+                    <ReportChartCard Title="Delays by assignee" Subtitle="People who may need support or scope adjustment." Insight="Support signal only: high counts should trigger help, not blame.">
+                        <TopRiskList Items="DelayAssigneeItems" EmptyText="No assignee delay concentration found." />
+                    </ReportChartCard>
+                </div>
+                <div class="xl:col-span-12">
+                    <RiskMatrixCard Title="Severity vs days overdue" Subtitle="High priority and older delays sit in the upper-right risk zone." Points="OverdueRiskMatrix" Insight="The matrix combines priority severity with age of delay to show triage order." />
+                </div>
+            </div>
+        }
+        else
+        {
         <div class="rounded-xl border border-slate-200 bg-white shadow-sm overflow-hidden">
             <div class="px-6 py-4 border-b border-slate-100 flex items-center justify-between">
                 <h3 class="text-sm font-semibold text-slate-700">
@@ -240,11 +275,13 @@
                         OnPageChanged="HandlePageChanged"
                         OnPageSizeChanged="HandlePageSizeChanged" />
         </div>
+        }
     }
 </div>
 
 @code {
     private bool isLoading = true;
+    private bool isChartView = false;
     private List<OverdueCriticalTaskDto> allOverdue = new();
     private List<OverdueCriticalTaskDto> overdueReportTasks = new();
     private PagedResult<OverdueCriticalTaskDto>? overdueReportPage;
@@ -271,6 +308,48 @@
     private bool canUpdateTask = false;
 
     private int TotalPages => overdueReportPage?.TotalPages ?? 0;
+    private double HighPriorityOverduePercent => overdueCount > 0 ? criticalCount / (double)overdueCount * 100 : 0;
+    private string AgingInsight => avgDaysOverdue > 7
+        ? $"Average delay is {avgDaysOverdue} days; focus on older buckets first."
+        : "Most delayed work is still in a manageable window.";
+
+    private List<ReportChartItem> AgingBuckets => new()
+    {
+        new("Due soon", allOverdue.Count(t => t.DaysOverdue <= 0), "#f59e0b", "not overdue yet"),
+        new("1-3d", allOverdue.Count(t => t.DaysOverdue >= 1 && t.DaysOverdue <= 3), "#3b82f6", "early delay"),
+        new("4-7d", allOverdue.Count(t => t.DaysOverdue >= 4 && t.DaysOverdue <= 7), "#f59e0b", "needs action"),
+        new("8d+", allOverdue.Count(t => t.DaysOverdue >= 8), "#ef4444", "high risk")
+    };
+
+    private List<TopRiskItem> DelayProjectItems => allOverdue
+        .GroupBy(t => t.ProjectName)
+        .Select(g =>
+        {
+            var overdue = g.Count(t => t.DaysOverdue > 0);
+            var high = g.Count(t => t.PriorityName == "High");
+            var score = Math.Min(100, (overdue * 18) + (high * 15) + g.Sum(t => Math.Max(0, t.DaysOverdue)));
+            return new TopRiskItem(g.Key, $"{overdue} overdue · {high} high priority", score, $"{g.Count()} tasks", score >= 70 ? "rose" : "amber", $"{g.Sum(t => t.OverdueIssues)} overdue issues");
+        })
+        .OrderByDescending(item => item.Score)
+        .Take(5)
+        .ToList();
+
+    private List<TopRiskItem> DelayAssigneeItems => allOverdue
+        .GroupBy(t => string.IsNullOrWhiteSpace(t.AssignedTo) ? "Unassigned" : t.AssignedTo!)
+        .Select(g =>
+        {
+            var overdue = g.Count(t => t.DaysOverdue > 0);
+            var score = Math.Min(100, (overdue * 20) + g.Sum(t => Math.Max(0, t.DaysOverdue)));
+            return new TopRiskItem(g.Key, $"{overdue} overdue tasks", score, $"{score:0} risk", score >= 70 ? "rose" : "amber", "Capacity support may be needed");
+        })
+        .OrderByDescending(item => item.Score)
+        .Take(5)
+        .ToList();
+
+    private List<RiskMatrixPoint> OverdueRiskMatrix => allOverdue
+        .GroupBy(t => new { Severity = GetPrioritySeverity(t.PriorityName), Urgency = GetOverdueUrgency(t.DaysOverdue), t.ProjectName })
+        .Select(g => new RiskMatrixPoint(g.Key.ProjectName, g.Key.Severity, g.Key.Urgency, g.Count(), g.Key.Severity * g.Key.Urgency >= 9 ? "#ef4444" : "#f59e0b", $"{g.Count()} delayed task(s)"))
+        .ToList();
 
     protected override async Task OnInitializedAsync()
     {
@@ -357,6 +436,11 @@
         await LoadOverdueReport();
     }
 
+    private void SetView(bool chartView)
+    {
+        isChartView = chartView;
+    }
+
     private async Task HandlePageChanged(int page)
     {
         currentPage = page;
@@ -438,4 +522,13 @@
         3 => "Manager",
         _ => "None"
     };
+
+    private static int GetPrioritySeverity(string priorityName) => priorityName switch
+    {
+        "High" => 3,
+        "Medium" => 2,
+        _ => 1
+    };
+
+    private static int GetOverdueUrgency(int daysOverdue) => daysOverdue >= 8 ? 3 : daysOverdue >= 4 ? 2 : 1;
 }

TaskTrackingSystem.WebApp/Components/Pages/Features/Reports/ProjectProgressReport.razor

@@ -152,14 +152,87 @@
 
         @if (isChartView)
         {
-            <!-- Chart View: SVG Project Progress Bars -->
-            <ChartCard Title="Project Health Chart" TitleClass="font-semibold text-slate-900 mb-4 font-sans text-md" BodyClass="mt-0">
-                <ChildContent>
-                    <div class="max-w-2xl">
-                        <ProgressListChart Items="ProjectHealthItems" MaxValue="ProjectHealthMax" EmptyText="No data available." />
-                    </div>
-                </ChildContent>
-            </ChartCard>
+            <div class="grid grid-cols-1 gap-5 xl:grid-cols-12">
+                <div class="xl:col-span-6">
+                    <RiskMatrixCard Title="Project health matrix" Subtitle="Progress health against issue risk." Points="ProjectHealthMatrix" Insight="Projects in the upper-right combine low progress with active issue pressure." />
+                </div>
+                <div class="xl:col-span-6">
+                    <ReportChartCard Title="Completion vs risk" Subtitle="Each project plotted by completion and issue pressure." Insight="Lower completion with higher issue pressure should be reviewed first.">
+                        @if (!ProjectQuadrantPoints.Any())
+                        {
+                            <div class="rounded-lg border border-dashed border-slate-200 bg-slate-50 py-10 text-center text-sm text-slate-400">No project risk data available.</div>
+                        }
+                        else
+                        {
+                            <div class="space-y-3">
+                                <div class="grid grid-cols-[44px_minmax(0,1fr)] gap-2">
+                                    <div class="flex items-center justify-center rounded-lg bg-slate-50 text-center text-[11px] font-semibold uppercase tracking-wider text-slate-500 [writing-mode:vertical-rl] rotate-180">
+                                        Risk
+                                    </div>
+                                    <div class="relative h-[280px] overflow-hidden rounded-xl border border-slate-200 bg-white">
+                                        <div class="absolute inset-0 grid grid-cols-2 grid-rows-2">
+                                            <div class="border-b border-r border-slate-200 bg-rose-50/50 p-3">
+                                                <div class="text-xs font-bold text-rose-700">Review now</div>
+                                                <div class="text-[11px] text-rose-600">Low completion · high risk</div>
+                                            </div>
+                                            <div class="border-b border-slate-200 bg-amber-50/50 p-3">
+                                                <div class="text-xs font-bold text-amber-700">Watch closely</div>
+                                                <div class="text-[11px] text-amber-600">High completion · high risk</div>
+                                            </div>
+                                            <div class="border-r border-slate-200 bg-blue-50/50 p-3">
+                                                <div class="text-xs font-bold text-blue-700">Recover plan</div>
+                                                <div class="text-[11px] text-blue-600">Low completion · low risk</div>
+                                            </div>
+                                            <div class="bg-emerald-50/50 p-3">
+                                                <div class="text-xs font-bold text-emerald-700">On track</div>
+                                                <div class="text-[11px] text-emerald-600">High completion · low risk</div>
+                                            </div>
+                                        </div>
+
+                                        @foreach (var point in ProjectQuadrantPoints)
+                                        {
+                                            <div class="absolute -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white shadow-sm transition-transform hover:scale-110"
+                                                 title="@point.Tooltip"
+                                                 style="left: @point.Left%; top: @point.Top%; width: 14px; height: 14px; background-color: @point.Color;">
+                                            </div>
+                                        }
+                                    </div>
+                                </div>
+                                <div class="grid grid-cols-[44px_minmax(0,1fr)] gap-2">
+                                    <div></div>
+                                    <div class="flex items-center justify-between text-[11px] font-semibold text-slate-400">
+                                        <span>0% complete</span>
+                                        <span>Completion</span>
+                                        <span>100%</span>
+                                    </div>
+                                </div>
+                                <div class="flex flex-wrap items-center gap-x-4 gap-y-2 rounded-lg border border-slate-100 bg-slate-50 px-3 py-2 text-[11px] text-slate-500">
+                                    <span class="font-semibold uppercase tracking-wider text-slate-400">Color</span>
+                                    <span class="flex items-center gap-1.5"><span class="h-2.5 w-2.5 rounded-full bg-emerald-500"></span>Healthy</span>
+                                    <span class="flex items-center gap-1.5"><span class="h-2.5 w-2.5 rounded-full bg-blue-500"></span>Watch</span>
+                                    <span class="flex items-center gap-1.5"><span class="h-2.5 w-2.5 rounded-full bg-amber-500"></span>At risk</span>
+                                    <span class="flex items-center gap-1.5"><span class="h-2.5 w-2.5 rounded-full bg-rose-500"></span>Critical</span>
+                                </div>
+                            </div>
+                        }
+                    </ReportChartCard>
+                </div>
+                <div class="xl:col-span-5">
+                    <ReportChartCard Title="Top at-risk projects" Subtitle="Projects needing planning attention first." Insight="Risk blends overdue, blocked, open issues, and project health.">
+                        <TopRiskList Items="AtRiskProjectItems" EmptyText="No at-risk projects in the current filter." />
+                    </ReportChartCard>
+                </div>
+                <div class="xl:col-span-7">
+                    <ReportChartCard Title="Timeline summary" Subtitle="Project schedule window with completion overlay." Insight="This gives the planning horizon without leaving the report.">
+                        <TimelineChart Items="ProjectTimelineItems" WrapperClass="max-h-[340px] overflow-auto" />
+                    </ReportChartCard>
+                </div>
+                <div class="xl:col-span-12">
+                    <ReportChartCard Title="Open, overdue, and blocking issues by project" Subtitle="Issue composition across the project portfolio." Insight="Open work is normal; overdue and blocked work are the triage signal.">
+                        <StackedProgressBar Segments="ProjectIssueSegments" AriaLabel="Project issue summary" />
+                    </ReportChartCard>
+                </div>
+            </div>
         }
         else
         {
@@ -234,21 +307,57 @@
     private bool filterAssignToMe = false;
     private bool filterAssignToMyTeam = false;
 
-    private List<ProgressListChartItem> ProjectHealthItems => allProjects
-        .Select(proj =>
+    private List<RiskMatrixPoint> ProjectHealthMatrix => allProjects
+        .Select(project => new RiskMatrixPoint(
+            project.ProjectName,
+            GetProjectSeverity(project),
+            GetProjectUrgency(project),
+            1,
+            project.ProjectHealth == "Critical" ? "#ef4444" : project.IsAtRisk ? "#f59e0b" : "#3b82f6",
+            $"{project.Progress:0}% complete, {project.BlockedIssues} blocked, {project.OverdueIssues} overdue"))
+        .ToList();
+
+    private List<ProjectQuadrantPoint> ProjectQuadrantPoints => allProjects
+        .OrderByDescending(project => GetProjectRiskScore(project))
+        .Take(10)
+        .Select(project =>
         {
-            var value = Math.Min(Math.Max(proj.OpenIssues + proj.OverdueIssues + proj.BlockedIssues, 1) * 10, 100);
-            var color = proj.ProjectHealth == "Critical" ? "#f43f5e" : proj.ProjectHealth == "At Risk" ? "#f59e0b" : "#10b981";
-
-            return new ProgressListChartItem(
-                proj.ProjectName,
-                value,
-                $"{proj.OpenIssues} open, {proj.OverdueIssues} overdue, {proj.BlockedIssues} blocked",
-                color);
+            var risk = GetProjectRiskScore(project);
+            var left = Math.Clamp(project.Progress, 2, 98);
+            var top = Math.Clamp(100 - risk, 2, 98);
+            var color = project.ProjectHealth == "Critical"
+                ? "#ef4444"
+                : project.IsAtRisk
+                    ? "#f59e0b"
+                    : risk > 35 ? "#3b82f6" : "#10b981";
+            var tooltip = $"{project.ProjectName}\n{project.Progress:0}% complete\nRisk score: {risk:0}\n{project.BlockedIssues} blocked, {project.OverdueIssues} overdue, {project.OpenIssues} open";
+            return new ProjectQuadrantPoint(project.ProjectName, left, top, color, tooltip);
         })
         .ToList();
 
-    private double ProjectHealthMax => Math.Max(100, ProjectHealthItems.Select(item => item.Value).DefaultIfEmpty(0).Max());
+    private List<TopRiskItem> AtRiskProjectItems => allProjects
+        .Select(project =>
+        {
+            var score = GetProjectRiskScore(project);
+            var tone = project.ProjectHealth == "Critical" || project.BlockedIssues > 0 ? "rose" : project.IsAtRisk ? "amber" : "blue";
+            return new TopRiskItem(project.ProjectName, $"{project.Progress:0}% complete · {project.OpenIssues} open issues", score, project.ProjectHealth, tone, $"{project.OverdueIssues} overdue · {project.BlockedIssues} blocked");
+        })
+        .OrderByDescending(item => item.Score)
+        .Take(5)
+        .ToList();
+
+    private List<TimelineChartItem> ProjectTimelineItems => allProjects
+        .OrderBy(project => project.StartDate)
+        .Take(8)
+        .Select(project => new TimelineChartItem(project.ProjectName, project.StartDate, project.EndDate, project.Progress, project.IsAtRisk ? "#f59e0b" : "#3b82f6"))
+        .ToList();
+
+    private List<StackedSegment> ProjectIssueSegments => new()
+    {
+        new("Open issues", allProjects.Sum(project => project.OpenIssues), "#3b82f6"),
+        new("Overdue issues", allProjects.Sum(project => project.OverdueIssues), "#ef4444"),
+        new("Blocked issues", allProjects.Sum(project => project.BlockedIssues), "#f59e0b")
+    };
 
     // Search and Pagination
     private string searchInput = "";
@@ -460,4 +569,34 @@
         "At Risk" => "bg-amber-50 text-amber-700",
         _ => "bg-emerald-50 text-emerald-700"
     };
+
+    private static double GetProjectRiskScore(ProjectProgressReportDto project)
+    {
+        var issueRisk = (project.OpenIssues * 8) + (project.OverdueIssues * 16) + (project.BlockedIssues * 22);
+        var progressRisk = Math.Max(0, 65 - project.Progress) * 0.45;
+        var healthRisk = project.ProjectHealth == "Critical" ? 25 : project.IsAtRisk ? 15 : 0;
+        return Math.Min(100, issueRisk + progressRisk + healthRisk);
+    }
+
+    private static int GetProjectSeverity(ProjectProgressReportDto project)
+    {
+        if (project.ProjectHealth == "Critical" || project.BlockedIssues > 0)
+        {
+            return 3;
+        }
+
+        return project.IsAtRisk || project.OverdueIssues > 0 ? 2 : 1;
+    }
+
+    private static int GetProjectUrgency(ProjectProgressReportDto project)
+    {
+        if (project.Progress < 35 || project.OverdueIssues > 2)
+        {
+            return 3;
+        }
+
+        return project.Progress < 70 || project.OpenIssues > 0 ? 2 : 1;
+    }
+
+    private sealed record ProjectQuadrantPoint(string Label, double Left, double Top, string Color, string Tooltip);
 }

TaskTrackingSystem.WebApp/Components/Pages/Features/Reports/TaskReport.razor

@@ -177,112 +177,30 @@
 
         @if (isChartView)
         {
-            <!-- Chart View -->
-            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-                <!-- SVG Status Chart Card -->
-                <div class="rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
-                    <h3 class="font-semibold text-slate-900 mb-4">Tasks by Status</h3>
-                    <div class="flex items-center justify-center h-64">
-                        @if (!FilteredList.Any())
-                        {
-                            <span class="text-sm text-slate-400">No data available</span>
-                        }
-                        else
-                        {
-                            var todo = FilteredList.Count(t => t.StatusId == AppTaskStatus.Todo);
-                            var inProgress = FilteredList.Count(t => t.StatusId == AppTaskStatus.InProgress);
-                            var done = FilteredList.Count(t => t.StatusId == AppTaskStatus.Done);
-                            var max = Math.Max(1, Math.Max(todo, Math.Max(inProgress, done)));
-                            var hTodo = (todo * 160) / max;
-                            var hInProgress = (inProgress * 160) / max;
-                            var hDone = (done * 160) / max;
-
-                            <svg class="w-full max-w-[320px]" height="220" viewBox="0 0 320 220">
-                                <g transform="translate(0, 180)">
-                                    <!-- Axes -->
-                                    <line x1="40" y1="0" x2="280" y2="0" stroke="#E5E7EB" stroke-width="2" />
-                                    <!-- To Do Bar -->
-                                    <rect x="60" y="-@hTodo" width="40" height="@hTodo" rx="4" fill="#E5E7EB" />
-                                    <text x="80" y="20" font-size="12" fill="#6B7280" text-anchor="middle">To Do</text>
-                                    <text x="80" y="-@(hTodo + 10)" font-size="12" font-weight="bold" fill="#111827" text-anchor="middle">@todo</text>
-
-                                    <!-- In Progress Bar -->
-                                    <rect x="140" y="-@hInProgress" width="40" height="@hInProgress" rx="4" fill="#06B6D4" />
-                                    <text x="160" y="20" font-size="12" fill="#6B7280" text-anchor="middle">In Progress</text>
-                                    <text x="160" y="-@(hInProgress + 10)" font-size="12" font-weight="bold" fill="#111827" text-anchor="middle">@inProgress</text>
-
-                                    <!-- Done Bar -->
-                                    <rect x="220" y="-@hDone" width="40" height="@hDone" rx="4" fill="#10B981" />
-                                    <text x="240" y="20" font-size="12" fill="#6B7280" text-anchor="middle">Done</text>
-                                    <text x="240" y="-@(hDone + 10)" font-size="12" font-weight="bold" fill="#111827" text-anchor="middle">@done</text>
-                                </g>
-                            </svg>
-                        }
-                    </div>
+            <div class="grid grid-cols-1 gap-5 xl:grid-cols-12">
+                <div class="xl:col-span-5">
+                    <ReportChartCard Title="Task status mix" Subtitle="Where execution currently sits across the task lifecycle." Insight="@TaskStatusInsight">
+                        <DonutStatusChart Items="TaskStatusItems" CenterLabel="tasks" />
+                    </ReportChartCard>
                 </div>
-
-                <!-- SVG Priority Chart Card -->
-                <div class="rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
-                    <h3 class="font-semibold text-slate-900 mb-4">Tasks by Priority</h3>
-                    <div class="flex items-center justify-center h-64">
-                        @if (!FilteredList.Any())
-                        {
-                            <span class="text-sm text-slate-400">No data available</span>
-                        }
-                        else
-                        {
-                            var low = FilteredList.Count(t => t.PriorityId == TaskPriority.Low);
-                            var med = FilteredList.Count(t => t.PriorityId == TaskPriority.Medium);
-                            var high = FilteredList.Count(t => t.PriorityId == TaskPriority.High);
-                            var total = Math.Max(1, low + med + high);
-                            var pctLow = (low * 100) / total;
-                            var pctMed = (med * 100) / total;
-                            var pctHigh = (high * 100) / total;
-
-                            <div class="w-full space-y-4 max-w-[320px]">
-                                <div>
-                                    <div class="flex justify-between text-xs font-semibold text-slate-600 mb-1">
-                                        <span>High Priority</span>
-                                        <span>@high tasks (@pctHigh%)</span>
-                                    </div>
-                                    <div class="h-3 rounded-full bg-slate-100 overflow-hidden">
-                                        <div class="h-full bg-violet-600 rounded-full" style="width: @pctHigh%"></div>
-                                    </div>
-                                </div>
-                                <div>
-                                    <div class="flex justify-between text-xs font-semibold text-slate-600 mb-1">
-                                        <span>Medium Priority</span>
-                                        <span>@med tasks (@pctMed%)</span>
-                                    </div>
-                                    <div class="h-3 rounded-full bg-slate-100 overflow-hidden">
-                                        <div class="h-full bg-violet-400 rounded-full" style="width: @pctMed%"></div>
-                                    </div>
-                                </div>
-                                <div>
-                                    <div class="flex justify-between text-xs font-semibold text-slate-600 mb-1">
-                                        <span>Low Priority</span>
-                                        <span>@low tasks (@pctLow%)</span>
-                                    </div>
-                                    <div class="h-3 rounded-full bg-slate-100 overflow-hidden">
-                                        <div class="h-full bg-violet-200 rounded-full" style="width: @pctLow%"></div>
-                                    </div>
-                                </div>
-                            </div>
-                        }
-                    </div>
+                <div class="xl:col-span-4">
+                    <ReportChartCard Title="Priority distribution" Subtitle="Planning pressure by task priority." Value="@HighPriorityCount.ToString()" ValueLabel="high priority" Insight="@PriorityInsight">
+                        <StackedProgressBar Segments="PrioritySegments" AriaLabel="Task priority distribution" />
+                    </ReportChartCard>
+                </div>
+                <div class="xl:col-span-3">
+                    <TrendSparklineCard Title="Completion movement" Subtitle="Recently completed tasks by creation month." Value="@($"{CompletionRate:0}%")" ValueLabel="completion" Points="CompletionSparkline" Color="#10b981" Insight="@CompletionInsight" />
+                </div>
+                <div class="xl:col-span-6">
+                    <ReportChartCard Title="Top project risk" Subtitle="Projects with the highest task and issue pressure." Insight="Score combines task volume, open issues, overdue issues, and critical task health.">
+                        <TopRiskList Items="ProjectRiskItems" EmptyText="No project risk in this filtered set." />
+                    </ReportChartCard>
+                </div>
+                <div class="xl:col-span-6">
+                    <ReportChartCard Title="Tasks with most open issues" Subtitle="Execution blockers that may need issue cleanup before progress moves." Insight="Use this to decide where issue triage creates the fastest task movement.">
+                        <TopRiskList Items="TaskIssueRiskItems" EmptyText="No open issue pressure in this filtered set." />
+                    </ReportChartCard>
                 </div>
-
-                <ChartCard Title="Tasks by Project" TitleClass="font-semibold text-slate-900 mb-4" BodyClass="mt-0">
-                    <ChildContent>
-                        <ProgressListChart Items="TasksByProjectItems" MaxValue="TasksByProjectMax" WrapperClass="space-y-3" />
-                    </ChildContent>
-                </ChartCard>
-
-                <ChartCard Title="Tasks with Most Issues" TitleClass="font-semibold text-slate-900 mb-4" BodyClass="mt-0">
-                    <ChildContent>
-                        <ProgressListChart Items="TasksWithMostIssuesItems" MaxValue="TasksWithMostIssuesMax" WrapperClass="space-y-3" />
-                    </ChildContent>
-                </ChartCard>
             </div>
         }
         else
@@ -458,6 +376,85 @@
         $"{FilteredList.Count(t => t.OverdueIssues > 0)} tasks have overdue issues."
     };
 
+    private int FilteredTaskCount => FilteredList.Count();
+    private int CompletedTaskCount => FilteredList.Count(t => t.StatusId == AppTaskStatus.Done);
+    private int OpenTaskCount => FilteredTaskCount - CompletedTaskCount;
+    private int HighPriorityCount => FilteredList.Count(t => t.PriorityId == TaskPriority.High);
+    private double CompletionRate => FilteredTaskCount > 0 ? CompletedTaskCount / (double)FilteredTaskCount * 100 : 0;
+
+    private string TaskStatusInsight => OpenTaskCount > CompletedTaskCount
+        ? $"{OpenTaskCount} tasks are still moving through execution."
+        : "Completed work is leading the current filtered set.";
+
+    private string PriorityInsight => HighPriorityCount > 0
+        ? $"{HighPriorityCount} high-priority tasks should stay visible during planning review."
+        : "No high-priority tasks in the current filter.";
+
+    private string CompletionInsight => CompletionRate >= 70
+        ? "Completion is healthy for the current filter."
+        : "Completion has room to improve; inspect open issues and overdue work.";
+
+    private List<ReportChartItem> TaskStatusItems => new()
+    {
+        new("To Do", FilteredList.Count(t => t.StatusId == AppTaskStatus.Todo), "#94a3b8"),
+        new("In Progress", FilteredList.Count(t => t.StatusId == AppTaskStatus.InProgress), "#3b82f6"),
+        new("Done", CompletedTaskCount, "#10b981"),
+        new("Overdue", FilteredList.Count(t => t.DueDate.Date < DateTime.Today && t.StatusId != AppTaskStatus.Done), "#ef4444")
+    };
+
+    private List<StackedSegment> PrioritySegments => new()
+    {
+        new("High", HighPriorityCount, "#ef4444"),
+        new("Medium", FilteredList.Count(t => t.PriorityId == TaskPriority.Medium), "#f59e0b"),
+        new("Low", FilteredList.Count(t => t.PriorityId == TaskPriority.Low), "#3b82f6")
+    };
+
+    private List<SparklinePoint> CompletionSparkline => FilteredList
+        .GroupBy(t => new DateTime(t.CreatedAt.Year, t.CreatedAt.Month, 1))
+        .OrderBy(g => g.Key)
+        .TakeLast(8)
+        .Select(g => new SparklinePoint(g.Key.ToString("MMM"), g.Count(t => t.StatusId == AppTaskStatus.Done)))
+        .DefaultIfEmpty(new SparklinePoint(DateTime.Today.ToString("MMM"), CompletedTaskCount))
+        .ToList();
+
+    private List<TopRiskItem> ProjectRiskItems => FilteredList
+        .GroupBy(t => t.ProjectName)
+        .Select(g =>
+        {
+            var score = Math.Min(100, (g.Count() * 8) + (g.Sum(t => t.OpenIssues) * 12) + (g.Sum(t => t.OverdueIssues) * 18) + (g.Count(t => t.TaskHealth == "Critical") * 20));
+            var overdue = g.Sum(t => t.OverdueIssues);
+            var tone = overdue > 0 ? "rose" : score >= 45 ? "amber" : "blue";
+
+            return new TopRiskItem(
+                g.Key,
+                $"{g.Count()} tasks · {g.Sum(t => t.OpenIssues)} open issues",
+                score,
+                overdue > 0 ? $"{overdue} overdue" : $"{score:0} risk",
+                tone,
+                $"{g.Count(t => t.PriorityId == TaskPriority.High)} high-priority tasks");
+        })
+        .OrderByDescending(item => item.Score)
+        .Take(5)
+        .ToList();
+
+    private List<TopRiskItem> TaskIssueRiskItems => FilteredList
+        .OrderByDescending(t => (t.OpenIssues * 2) + (t.OverdueIssues * 3))
+        .Take(5)
+        .Select(t =>
+        {
+            var score = Math.Min(100, (t.OpenIssues * 20) + (t.OverdueIssues * 30));
+            var tone = t.OverdueIssues > 0 ? "rose" : t.OpenIssues > 0 ? "amber" : "emerald";
+
+            return new TopRiskItem(
+                t.Title,
+                t.ProjectName,
+                score,
+                $"{t.OpenIssues + t.OverdueIssues} issues",
+                tone,
+                $"{t.StatusName} · {t.PriorityName}");
+        })
+        .ToList();
+
     private List<ProgressListChartItem> TasksByProjectItems => FilteredList
         .GroupBy(t => t.ProjectName)
         .OrderByDescending(g => g.Count())

TaskTrackingSystem.WebApp/Components/Pages/Features/Reports/TimeTrackingReport.razor

@@ -147,27 +147,42 @@
     {
         @if (isChartView)
         {
-            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-                <ChartCard Title="Estimated vs Actual" TitleClass="mb-4 text-sm font-semibold text-slate-900" BodyClass="mt-0">
-                    <ChildContent>
-                        <ProgressListChart Items="EstimatedVsActualItems" MaxValue="EstimatedVsActualMax" WrapperClass="space-y-3" />
-                    </ChildContent>
-                </ChartCard>
-                <ChartCard Title="Effort by Project" TitleClass="mb-4 text-sm font-semibold text-slate-900" BodyClass="mt-0">
-                    <ChildContent>
-                        <ProgressListChart Items="EffortByProjectItems" MaxValue="EffortByProjectMax" WrapperClass="space-y-3" />
-                    </ChildContent>
-                </ChartCard>
-                <ChartCard Title="Effort by Employee" TitleClass="mb-4 text-sm font-semibold text-slate-900" BodyClass="mt-0">
-                    <ChildContent>
-                        <ProgressListChart Items="EffortByEmployeeItems" MaxValue="EffortByEmployeeMax" WrapperClass="space-y-3" />
-                    </ChildContent>
-                </ChartCard>
-                <ChartCard Title="Estimate Accuracy" TitleClass="mb-4 text-sm font-semibold text-slate-900" BodyClass="mt-0">
-                    <ChildContent>
-                        <ProgressListChart Items="EstimateAccuracyItems" MaxValue="EstimateAccuracyMax" WrapperClass="space-y-3" />
-                    </ChildContent>
-                </ChartCard>
+            <div class="grid grid-cols-1 gap-5 xl:grid-cols-12">
+                <div class="xl:col-span-5">
+                    <MetricComparisonCard Title="Estimated vs actual effort"
+                                          Subtitle="Are plans matching delivery effort?"
+                                          PrimaryLabel="Actual"
+                                          PrimaryValue="@($"{actualHours:N1}h")"
+                                          SecondaryLabel="Estimated"
+                                          SecondaryValue="@($"{totalHours:N1}h")"
+                                          Segments="EffortComparisonSegments"
+                                          Insight="@EffortVarianceInsight" />
+                </div>
+                <div class="xl:col-span-3">
+                    <RadialMetricCard Title="Utilization gauge"
+                                      Subtitle="Actual hours as a share of estimated effort."
+                                      Percent="@utilizationPercent"
+                                      Value="@($"{varianceHours:N1}h")"
+                                      ValueLabel="variance"
+                                      CenterLabel="used"
+                                      Color="@UtilizationColor"
+                                      Insight="@UtilizationInsight" />
+                </div>
+                <div class="xl:col-span-4">
+                    <ReportChartCard Title="Estimate accuracy" Subtitle="How many items stayed within estimate?" Value="@OnOrUnderEstimateCount.ToString()" ValueLabel="on / under" Insight="@EstimateAccuracyInsight">
+                        <DonutStatusChart Items="EstimateAccuracyDonutItems" CenterLabel="issues" />
+                    </ReportChartCard>
+                </div>
+                <div class="xl:col-span-7">
+                    <ReportChartCard Title="Effort by project" Subtitle="Actual hours distributed across active projects." Insight="Use this to spot projects consuming more delivery capacity than expected.">
+                        <StackedProgressBar Segments="ProjectEffortSegments" AriaLabel="Effort by project" />
+                    </ReportChartCard>
+                </div>
+                <div class="xl:col-span-5">
+                    <ReportChartCard Title="Effort leaderboard" Subtitle="People carrying the most tracked effort." Insight="Names highlight capacity allocation, not performance judgement.">
+                        <TopRiskList Items="EmployeeEffortLeaders" EmptyText="No employee effort data available." />
+                    </ReportChartCard>
+                </div>
             </div>
         }
         else
@@ -411,6 +426,61 @@
 
     private static decimal GetVariance(IssueDto issue) => (issue.ActualHours ?? 0) - (issue.EstimatedHours ?? 0);
 
+    private int OnOrUnderEstimateCount => FilteredIssues.Count(i => (i.ActualHours ?? 0) <= (i.EstimatedHours ?? 0));
+    private int OverEstimateCount => FilteredIssues.Count(i => (i.ActualHours ?? 0) > (i.EstimatedHours ?? 0));
+    private string UtilizationColor => utilizationPercent > 115 ? "#ef4444" : utilizationPercent > 95 ? "#f59e0b" : "#10b981";
+    private string EffortVarianceInsight => varianceHours > 0
+        ? $"Actual effort is {varianceHours:N1}h above estimate."
+        : $"Actual effort is {Math.Abs(varianceHours):N1}h under estimate.";
+    private string UtilizationInsight => utilizationPercent > 115
+        ? "Utilization is above plan; review estimates and blockers."
+        : utilizationPercent < 70 ? "Tracked actual effort is below plan; confirm work is being logged." : "Utilization is close to the planning range.";
+    private string EstimateAccuracyInsight => OverEstimateCount > OnOrUnderEstimateCount
+        ? "More issues are exceeding estimate than staying within it."
+        : "Most issues are within or under their estimates.";
+
+    private List<StackedSegment> EffortComparisonSegments => new()
+    {
+        new("Actual", (double)Math.Max(0, actualHours), "#3b82f6"),
+        new("Remaining estimate", (double)Math.Max(0, totalHours - actualHours), "#dbeafe")
+    };
+
+    private List<ReportChartItem> EstimateAccuracyDonutItems => new()
+    {
+        new("On / Under", OnOrUnderEstimateCount, "#10b981"),
+        new("Over", OverEstimateCount, "#ef4444")
+    };
+
+    private List<StackedSegment> ProjectEffortSegments => FilteredIssues
+        .GroupBy(i => i.ProjectName)
+        .OrderByDescending(g => g.Sum(i => i.ActualHours ?? 0))
+        .Take(6)
+        .Select((g, index) => new StackedSegment(g.Key, (double)g.Sum(i => i.ActualHours ?? 0), ChartPalette[index % ChartPalette.Length]))
+        .ToList();
+
+    private List<TopRiskItem> EmployeeEffortLeaders => FilteredIssues
+        .GroupBy(i => i.AssignedToName ?? "Unassigned")
+        .Select(g =>
+        {
+            var actual = g.Sum(i => i.ActualHours ?? 0);
+            var estimated = g.Sum(i => i.EstimatedHours ?? 0);
+            var score = estimated > 0 ? Math.Min(100, (double)(actual / estimated) * 100) : Math.Min(100, (double)actual * 10);
+            var tone = score > 115 ? "rose" : score > 90 ? "amber" : "blue";
+
+            return new TopRiskItem(
+                g.Key,
+                $"{actual:N1}h actual · {estimated:N1}h estimated",
+                score,
+                $"{g.Count()} issues",
+                tone,
+                $"{g.Count(i => (i.ActualHours ?? 0) > (i.EstimatedHours ?? 0))} over estimate");
+        })
+        .OrderByDescending(item => item.Score)
+        .Take(5)
+        .ToList();
+
+    private static readonly string[] ChartPalette = ["#7c3aed", "#3b82f6", "#06b6d4", "#10b981", "#f59e0b", "#ef4444"];
+
     private List<ProgressListChartItem> EstimatedVsActualItems => new[]
     {
         new ProgressListChartItem("Estimated", (double)totalHours, $"{totalHours:N1}", "#7c3aed"),