feat: build Admin Team Dashboard with scoreboard, funnel, SLA, ROI, and integration health

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-05-18 20:08:19 +00:00 · 2026-03-16 18:28:00 +05:30
parent 26c352e2cc
commit e9ac6e598a
6 changed files with 533 additions and 5 deletions
--- a/src/components/admin/team-scoreboard.tsx
+++ b/src/components/admin/team-scoreboard.tsx
@@ -0,0 +1,109 @@
+import { useMemo } from 'react';
+
+import { Avatar } from '@/components/base/avatar/avatar';
+import { BadgeWithDot } from '@/components/base/badges/badges';
+import { cx } from '@/utils/cx';
+import type { Lead, Call, Agent } from '@/types/entities';
+
+interface TeamScoreboardProps {
+    leads: Lead[];
+    calls: Call[];
+    agents: Agent[];
+}
+
+type AgentStats = {
+    agent: Agent;
+    leadsProcessed: number;
+    callsMade: number;
+    appointmentsBooked: number;
+};
+
+export const TeamScoreboard = ({ leads, calls, agents }: TeamScoreboardProps) => {
+    const agentStats = useMemo((): AgentStats[] => {
+        return agents.map((agent) => {
+            const agentName = agent.name;
+            const leadsProcessed = leads.filter((lead) => lead.assignedAgent === agentName).length;
+            const agentCalls = calls.filter((call) => call.agentName === agentName);
+            const callsMade = agentCalls.length;
+            const appointmentsBooked = agentCalls.filter(
+                (call) => call.disposition === 'APPOINTMENT_BOOKED',
+            ).length;
+
+            return { agent, leadsProcessed, callsMade, appointmentsBooked };
+        });
+    }, [leads, calls, agents]);
+
+    const bestPerformerId = useMemo(() => {
+        let bestId = '';
+        let maxAppointments = -1;
+
+        for (const stat of agentStats) {
+            if (stat.appointmentsBooked > maxAppointments) {
+                maxAppointments = stat.appointmentsBooked;
+                bestId = stat.agent.id;
+            }
+        }
+
+        return bestId;
+    }, [agentStats]);
+
+    return (
+        <div className="flex gap-4 overflow-x-auto">
+            {agentStats.map(({ agent, leadsProcessed, callsMade, appointmentsBooked }) => {
+                const isBest = agent.id === bestPerformerId;
+
+                return (
+                    <div
+                        key={agent.id}
+                        className={cx(
+                            'flex min-w-[260px] flex-1 flex-col gap-4 rounded-2xl border border-secondary bg-primary p-5',
+                            isBest && 'ring-2 ring-success-600',
+                        )}
+                    >
+                        <div className="flex items-center gap-3">
+                            <Avatar
+                                initials={agent.initials ?? undefined}
+                                size="md"
+                                status={agent.isOnShift ? 'online' : 'offline'}
+                            />
+                            <div className="flex flex-1 flex-col">
+                                <span className="text-sm font-semibold text-primary">{agent.name}</span>
+                                <BadgeWithDot
+                                    size="sm"
+                                    type="pill-color"
+                                    color={agent.isOnShift ? 'success' : 'gray'}
+                                >
+                                    {agent.isOnShift ? 'On Shift' : 'Off Shift'}
+                                </BadgeWithDot>
+                            </div>
+                            {isBest && (
+                                <span className="text-xs font-medium text-success-primary">Top</span>
+                            )}
+                        </div>
+
+                        <div className="grid grid-cols-2 gap-3">
+                            <div className="flex flex-col">
+                                <span className="text-xs text-tertiary">Leads</span>
+                                <span className="text-lg font-bold text-primary">{leadsProcessed}</span>
+                            </div>
+                            <div className="flex flex-col">
+                                <span className="text-xs text-tertiary">Calls</span>
+                                <span className="text-lg font-bold text-primary">{callsMade}</span>
+                            </div>
+                            <div className="flex flex-col">
+                                <span className="text-xs text-tertiary">Appointments</span>
+                                <span className="text-lg font-bold text-primary">{appointmentsBooked}</span>
+                            </div>
+                            <div className="flex flex-col">
+                                <span className="text-xs text-tertiary">Avg Response</span>
+                                <span className="text-lg font-bold text-primary">
+                                    {agent.avgResponseHours ?? '—'}h
+                                </span>
+                            </div>
+                        </div>
+                    </div>
+                );
+            })}
+        </div>
+    );
+};