@page "/home" @using Microsoft.AspNetCore.Authorization @using Indotalent.Infrastructure.Authorization.Identity @using Indotalent.Features.Root.Home.Cqrs @using Indotalent.Features.Root.Home @attribute [Authorize(Roles = $"{ApplicationRoles.Admin},{ApplicationRoles.Member}")] @inject HomeService HomeService @inject IJSRuntime JS CRM Dashboard @if (_isLoading) {

Loading dashboard data...

} else {
@* HEADER *@

CRM Dashboard

@* ROW 1: 12-col KPI layout *@
@* Key Metrics Card *@

CRM Overview

Key Metrics

Monthly Revenue

@_data.FormattedMonthlySales

Pipeline Value

@_data.FormattedPipeline

Win Rate

@_data.AvgWinRate%

Total Leads

@_data.FormattedTotalLeads

AR: @_data.FormattedPendingPayments FY @DateTime.Now.Year
@* 8 Small KPI Cards (row 1, cols 6-12) *@

Monthly Revenue

@_data.FormattedMonthlySales

Pipeline Value

@_data.FormattedPipeline

Win Rate

@_data.AvgWinRate%

Total Leads

@_data.FormattedTotalLeads

Avg Deal Size

@_data.FormattedAvgDealSize

CVR

@_data.OverallCvr%

Active Deals

@_data.ActiveDealsCount

AR Balance

@_data.FormattedPendingPayments

@* Metrics Matrix *@

CRM Metrics Matrix

Key indicators across all categories

@{ var mmItems = new[] { new { Title = "Monthly Revenue", Sub = _data.FormattedMonthlySales, ColorClass = "mm-c1" }, new { Title = "Pipeline Value", Sub = _data.FormattedPipeline, ColorClass = "mm-c2" }, new { Title = "Win Rate", Sub = $"{_data.AvgWinRate}%", ColorClass = "mm-c3" }, new { Title = "Total Leads", Sub = _data.FormattedTotalLeads, ColorClass = "mm-c4" }, new { Title = "Avg Deal Size", Sub = _data.FormattedAvgDealSize, ColorClass = "mm-c5" }, new { Title = "CVR", Sub = $"{_data.OverallCvr}%", ColorClass = "mm-c6" }, new { Title = "Active Deals", Sub = _data.ActiveDealsCount.ToString(), ColorClass = "mm-c7" }, new { Title = "AR Balance", Sub = _data.FormattedPendingPayments, ColorClass = "mm-c8" }, new { Title = "Contacts", Sub = _data.TotalContacts.ToString("N0"), ColorClass = "mm-c9" }, new { Title = "Campaigns", Sub = _data.TotalCampaigns.ToString(), ColorClass = "mm-c10" }, new { Title = "Conversion", Sub = $"{_data.OverallCvr}%", ColorClass = "mm-c11" }, new { Title = "Retention", Sub = $"{_data.RetentionRate}%", ColorClass = "mm-c12" }, new { Title = "Won Deals", Sub = _data.WonDealsCount.ToString(), ColorClass = "mm-c13" }, new { Title = "Budget", Sub = _data.FormattedBudget, ColorClass = "mm-c14" }, new { Title = "Expense", Sub = _data.FormattedExpense, ColorClass = "mm-c15" }, new { Title = "Pipeline Total", Sub = _data.FormattedPipeline, ColorClass = "mm-c16" }, new { Title = "SLA", Sub = $"{_data.SlaPercentage}%", ColorClass = "mm-c17" }, new { Title = "NPS", Sub = $"{_data.RetentionRate}", ColorClass = "mm-c18" }, new { Title = "Campaigns", Sub = _data.ActiveCampaigns.ToString(), ColorClass = "mm-c19" }, new { Title = "Enterprise", Sub = $"{_data.EnterprisePercentage}%", ColorClass = "mm-c20" } }; } @foreach (var item in mmItems) {

@item.Title

@item.Sub

}
@* ROW 2: Revenue Trend + Lead Sources *@

Revenue Trend

Monthly revenue vs expense

Revenue Expense

Lead Sources

By category this period

@if (_data.LeadSources.Any()) { @foreach (var src in _data.LeadSources) {
@src.Source @src.Percentage%
} } else {
No lead source data available
}
@* ROW 3: Pipeline Summary + Deal Stages + Sales Activity *@

Pipeline Summary

As of @DateTime.Now.ToString("MMMM dd, yyyy")

@foreach (var ps in _data.PipelineSummary) {

@ps.Label

@(ps.FormattedValue ?? ps.Value.ToString("N0"))

}
Win Rate@_data.AvgWinRate% Deals@_data.WonDealsCount

Deal Stages

Pipeline by stage

@foreach (var ds in _data.DealStages) {

@ds.Stage

@ds.Count

}
CVR: @_data.OverallCvr%Active: @_data.ActiveDealsCount

Sales Activity

Monthly movement

@foreach (var sa in _data.SalesActivities.Take(3)) {
+@sa.Count

@sa.Category

}
@* ROW 4: Recent Deals + CRM Activity *@

Recent Deals

Latest opportunities

@if (_data.RecentDeals.Any()) { @foreach (var deal in _data.RecentDeals) { } } else { }
DateDeal#DescriptionValueStatus
@(deal.Date?.ToString("MMM dd") ?? "-") @deal.DealNumber @deal.Description @deal.Value.ToString("N0") @deal.Status
No recent deals available
Active Deals: @_data.ActiveDealsCount Total Pipeline: @_data.FormattedPipeline

CRM Activity

Real-time updates

Live
@if (_data.ActivityFeeds.Any()) { @foreach (var af in _data.ActivityFeeds) {
@af.AvatarText

@af.Title

@af.Detail

@af.TimeAgo

@af.ChipLabel
} } else {

No recent activity

}
@* ROW 5: Conversion Metrics + Top Performers + Support Metrics *@

Conversion Metrics

@DateTime.Now.Year Performance

@foreach (var cm in _data.ConversionMetrics) {

@cm.Label

@cm.Current / @cm.Target
}
Target CVR: @_data.TargetCvr% @(_data.OverallCvr >= 5 ? "On Track" : "Improving")

Top Performers

This quarter ranking

@if (_data.SalesLeaderboard.Any()) { var perfColors = new[] { "#f97316", "#f59e0b", "#6366f1", "#8b5cf6" }; @for (int i = 0; i < Math.Min(_data.SalesLeaderboard.Count, 4); i++) { var p = _data.SalesLeaderboard[i];

@p.Name

@p.Achievement.ToString("N0")

@p.WinRate.ToString("F0")%
} } else {

No performance data available

}
Top Deals: @_data.WonDealsCountAvg Win: @_data.AvgWinRate%

Support Metrics

Customer service KPIs

Active Deals

Total in progress

@_data.ActiveDealsCount

Total Contacts

Active contacts

@_data.TotalContacts.ToString("N0")

Retention Rate

Customer loyalty

@_data.RetentionRate%

Budget

Total allocated

@_data.FormattedBudget
@* ROW 6: Lead Overview + Upcoming Renewals *@

Lead Overview

As of @DateTime.Now.ToString("MMM dd, yyyy") · Recent leads

@if (_data.RecentLeads.Any()) { @foreach (var lead in _data.RecentLeads) { } } else { }
LeadCompanyAmountStage
@lead.LeadTitle @lead.Company @lead.Amount.ToString("N0") @lead.Stage
No leads available
Total Leads: @_data.FormattedTotalLeads Avg CVR: @_data.OverallCvr%

Overdue Invoices

Pending payments

@if (_data.OverdueInvoices.Any()) { @foreach (var inv in _data.OverdueInvoices) { } } else { }
InvoiceCustomerAmountStatus
@inv.Number @inv.Customer @inv.Amount.ToString("N0") @inv.Status
No overdue invoices
Total AR: @_data.FormattedPendingPayments Count: @_data.OverdueInvoices.Count
} @code { private DashboardCrmResponse _data = new(); private bool _isLoading = true; private bool _chartsInitialized = false; private bool _dataReady = false; protected override async Task OnInitializedAsync() { _isLoading = true; try { var res = await HomeService.GetCrmDashboardStatsAsync(); if (res?.IsSuccess == true && res.Value != null) { _data = res.Value; _dataReady = true; StateHasChanged(); } } finally { _isLoading = false; } } protected override async Task OnAfterRenderAsync(bool firstRender) { if (_dataReady && !_chartsInitialized) { _chartsInitialized = true; await InitCharts(); } } private async Task InitCharts() { var revenueLabels = _data.RevenueTrend.Select(x => x.Label).ToArray(); var revenueData = _data.RevenueTrend.Select(x => x.SalesAmount).ToArray(); var expenseData = _data.RevenueTrend.Select(x => x.PurchaseAmount).ToArray(); var sourceLabels = _data.LeadSources.Select(x => x.Source).ToArray(); var sourceData = _data.LeadSources.Select(x => x.Percentage).Cast().ToArray(); var sourceColors = _data.LeadSources.Select(x => x.Color).ToArray(); var activityLabels = _data.SalesActivities.Take(4).Select(x => x.Category).ToArray(); var activityCounts = _data.SalesActivities.Take(4).Select(x => (double)x.Count).ToArray(); var activityColors = _data.SalesActivities.Take(4).Select(x => x.Color).ToArray(); await JS.InvokeVoidAsync("initDashboardCharts", revenueLabels, revenueData, expenseData, sourceLabels, sourceData, sourceColors, activityLabels, activityCounts, activityColors); } } @* Chart initialization script *@