feat: Reports & Analytics page, CSV export, notification bell in header
- Reports page with overview stats, client growth chart, email activity chart - Engagement breakdown (engaged/warm/cooling/cold) with stacked bar - Industry and tag distribution charts - At-risk client lists (cold + cooling) - CSV export button downloads all clients - Notification bell in top bar: overdue events, upcoming events, stale clients, pending drafts - Dismissable notifications with priority indicators - Added Reports to sidebar nav between Network and Settings
This commit is contained in:
313
src/pages/ReportsPage.tsx
Normal file
313
src/pages/ReportsPage.tsx
Normal file
@@ -0,0 +1,313 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { api } from '@/lib/api';
|
||||
import {
|
||||
BarChart3, Users, Mail, Calendar, TrendingUp, Download,
|
||||
Activity, Tag, Building2, AlertTriangle, Flame, Snowflake, ThermometerSun,
|
||||
} from 'lucide-react';
|
||||
import { PageLoader } from '@/components/LoadingSpinner';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
interface Overview {
|
||||
clients: { total: number; newThisMonth: number; newThisWeek: number; contactedRecently: number; neverContacted: number };
|
||||
emails: { total: number; sent: number; draft: number; sentLast30Days: number };
|
||||
events: { total: number; upcoming30Days: number };
|
||||
}
|
||||
|
||||
interface GrowthData {
|
||||
clientGrowth: { month: string; count: number }[];
|
||||
emailActivity: { month: string; count: number }[];
|
||||
}
|
||||
|
||||
interface IndustryData {
|
||||
industry: string | null;
|
||||
count: number;
|
||||
}
|
||||
|
||||
interface TagData {
|
||||
tag: string;
|
||||
count: number;
|
||||
}
|
||||
|
||||
interface EngagementData {
|
||||
summary: { engaged: number; warm: number; cooling: number; cold: number };
|
||||
coldClients: { id: string; name: string; company: string | null; lastContacted: string | null }[];
|
||||
coolingClients: { id: string; name: string; company: string | null; lastContacted: string | null }[];
|
||||
}
|
||||
|
||||
function StatCard({ icon: Icon, label, value, sub, color }: {
|
||||
icon: typeof Users; label: string; value: number | string; sub?: string; color: string;
|
||||
}) {
|
||||
return (
|
||||
<div className="bg-white rounded-xl border border-slate-200 p-5 flex items-start gap-4">
|
||||
<div className={cn('p-2.5 rounded-xl', color)}>
|
||||
<Icon className="w-5 h-5" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-2xl font-bold text-slate-900">{value}</p>
|
||||
<p className="text-sm text-slate-500">{label}</p>
|
||||
{sub && <p className="text-xs text-slate-400 mt-0.5">{sub}</p>}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function BarChartSimple({ data, label, color }: {
|
||||
data: { label: string; value: number }[];
|
||||
label: string;
|
||||
color: string;
|
||||
}) {
|
||||
const max = Math.max(...data.map(d => d.value), 1);
|
||||
return (
|
||||
<div className="bg-white rounded-xl border border-slate-200 p-5">
|
||||
<h3 className="text-sm font-semibold text-slate-700 mb-4">{label}</h3>
|
||||
<div className="flex items-end gap-1.5 h-32">
|
||||
{data.map((d, i) => (
|
||||
<div key={i} className="flex-1 flex flex-col items-center gap-1">
|
||||
<span className="text-[10px] text-slate-500 font-medium">{d.value || ''}</span>
|
||||
<div
|
||||
className={cn('w-full rounded-t transition-all', color)}
|
||||
style={{ height: `${Math.max((d.value / max) * 100, 2)}%`, minHeight: d.value > 0 ? 4 : 2 }}
|
||||
/>
|
||||
<span className="text-[10px] text-slate-400 truncate w-full text-center">
|
||||
{d.label}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function EngagementRing({ summary }: { summary: EngagementData['summary'] }) {
|
||||
const total = summary.engaged + summary.warm + summary.cooling + summary.cold;
|
||||
if (total === 0) return null;
|
||||
const segments = [
|
||||
{ label: 'Engaged', count: summary.engaged, color: 'bg-emerald-500', textColor: 'text-emerald-600', icon: Flame },
|
||||
{ label: 'Warm', count: summary.warm, color: 'bg-amber-400', textColor: 'text-amber-600', icon: ThermometerSun },
|
||||
{ label: 'Cooling', count: summary.cooling, color: 'bg-blue-400', textColor: 'text-blue-600', icon: Activity },
|
||||
{ label: 'Cold', count: summary.cold, color: 'bg-slate-300', textColor: 'text-slate-500', icon: Snowflake },
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="bg-white rounded-xl border border-slate-200 p-5">
|
||||
<h3 className="text-sm font-semibold text-slate-700 mb-4">Engagement Breakdown</h3>
|
||||
{/* Stacked bar */}
|
||||
<div className="flex rounded-full h-4 overflow-hidden mb-4">
|
||||
{segments.map(s => (
|
||||
s.count > 0 && (
|
||||
<div
|
||||
key={s.label}
|
||||
className={cn(s.color, 'transition-all')}
|
||||
style={{ width: `${(s.count / total) * 100}%` }}
|
||||
title={`${s.label}: ${s.count}`}
|
||||
/>
|
||||
)
|
||||
))}
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
{segments.map(s => (
|
||||
<div key={s.label} className="flex items-center gap-2">
|
||||
<div className={cn('w-3 h-3 rounded-full', s.color)} />
|
||||
<div>
|
||||
<span className={cn('text-sm font-semibold', s.textColor)}>{s.count}</span>
|
||||
<span className="text-xs text-slate-400 ml-1">{s.label}</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<p className="text-xs text-slate-400 mt-3">
|
||||
Engaged = contacted in last 14 days • Warm = 15-30 days • Cooling = 31-60 days • Cold = 60+ days or never
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function TopList({ title, items, icon: Icon }: {
|
||||
title: string;
|
||||
items: { label: string; value: number }[];
|
||||
icon: typeof Tag;
|
||||
}) {
|
||||
const max = Math.max(...items.map(i => i.value), 1);
|
||||
return (
|
||||
<div className="bg-white rounded-xl border border-slate-200 p-5">
|
||||
<div className="flex items-center gap-2 mb-4">
|
||||
<Icon className="w-4 h-4 text-slate-400" />
|
||||
<h3 className="text-sm font-semibold text-slate-700">{title}</h3>
|
||||
</div>
|
||||
{items.length === 0 && (
|
||||
<p className="text-sm text-slate-400">No data yet</p>
|
||||
)}
|
||||
<div className="space-y-2.5">
|
||||
{items.slice(0, 8).map((item, i) => (
|
||||
<div key={i}>
|
||||
<div className="flex justify-between text-sm mb-1">
|
||||
<span className="text-slate-700 truncate">{item.label}</span>
|
||||
<span className="text-slate-500 font-medium ml-2">{item.value}</span>
|
||||
</div>
|
||||
<div className="h-1.5 bg-slate-100 rounded-full overflow-hidden">
|
||||
<div
|
||||
className="h-full bg-blue-500 rounded-full transition-all"
|
||||
style={{ width: `${(item.value / max) * 100}%` }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function AtRiskList({ title, clients: clientList }: {
|
||||
title: string;
|
||||
clients: { id: string; name: string; company: string | null; lastContacted: string | null }[];
|
||||
}) {
|
||||
if (clientList.length === 0) return null;
|
||||
return (
|
||||
<div className="bg-white rounded-xl border border-slate-200 p-5">
|
||||
<div className="flex items-center gap-2 mb-4">
|
||||
<AlertTriangle className="w-4 h-4 text-amber-500" />
|
||||
<h3 className="text-sm font-semibold text-slate-700">{title}</h3>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
{clientList.map(c => (
|
||||
<Link
|
||||
key={c.id}
|
||||
to={`/clients/${c.id}`}
|
||||
className="flex items-center justify-between p-2 rounded-lg hover:bg-slate-50 transition-colors"
|
||||
>
|
||||
<div>
|
||||
<p className="text-sm font-medium text-slate-800">{c.name}</p>
|
||||
{c.company && <p className="text-xs text-slate-400">{c.company}</p>}
|
||||
</div>
|
||||
<span className="text-xs text-slate-400">
|
||||
{c.lastContacted
|
||||
? `${Math.floor((Date.now() - new Date(c.lastContacted).getTime()) / (1000 * 60 * 60 * 24))}d ago`
|
||||
: 'Never'}
|
||||
</span>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Fill in missing months with 0
|
||||
function fillMonths(data: { month: string; count: number }[]): { label: string; value: number }[] {
|
||||
const now = new Date();
|
||||
const months: { label: string; value: number }[] = [];
|
||||
for (let i = 11; i >= 0; i--) {
|
||||
const d = new Date(now.getFullYear(), now.getMonth() - i, 1);
|
||||
const key = `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}`;
|
||||
const label = d.toLocaleString('default', { month: 'short' });
|
||||
const match = data.find(m => m.month === key);
|
||||
months.push({ label, value: match?.count || 0 });
|
||||
}
|
||||
return months;
|
||||
}
|
||||
|
||||
export default function ReportsPage() {
|
||||
const [overview, setOverview] = useState<Overview | null>(null);
|
||||
const [growth, setGrowth] = useState<GrowthData | null>(null);
|
||||
const [industries, setIndustries] = useState<IndustryData[]>([]);
|
||||
const [tags, setTags] = useState<TagData[]>([]);
|
||||
const [engagement, setEngagement] = useState<EngagementData | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [exporting, setExporting] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
Promise.all([
|
||||
api.getReportsOverview().catch(() => null),
|
||||
api.getReportsGrowth().catch(() => null),
|
||||
api.getReportsIndustries().catch(() => []),
|
||||
api.getReportsTags().catch(() => []),
|
||||
api.getReportsEngagement().catch(() => null),
|
||||
]).then(([ov, gr, ind, tg, eng]) => {
|
||||
setOverview(ov as Overview | null);
|
||||
setGrowth(gr as GrowthData | null);
|
||||
setIndustries(ind as IndustryData[]);
|
||||
setTags(tg as TagData[]);
|
||||
setEngagement(eng as EngagementData | null);
|
||||
setLoading(false);
|
||||
});
|
||||
}, []);
|
||||
|
||||
const handleExport = async () => {
|
||||
setExporting(true);
|
||||
try {
|
||||
await api.exportClientsCSV();
|
||||
} finally {
|
||||
setExporting(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (loading) return <PageLoader />;
|
||||
|
||||
return (
|
||||
<div className="max-w-6xl mx-auto space-y-6 animate-fade-in">
|
||||
<div className="flex items-center justify-between flex-wrap gap-3">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-slate-900">Reports & Analytics</h1>
|
||||
<p className="text-sm text-slate-500">Overview of your CRM performance</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={handleExport}
|
||||
disabled={exporting}
|
||||
className="flex items-center gap-2 px-4 py-2 bg-white border border-slate-200 rounded-lg text-sm font-medium text-slate-700 hover:bg-slate-50 transition-colors disabled:opacity-50"
|
||||
>
|
||||
<Download className="w-4 h-4" />
|
||||
{exporting ? 'Exporting…' : 'Export Clients CSV'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Overview Stats */}
|
||||
{overview && (
|
||||
<div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
<StatCard icon={Users} label="Total Clients" value={overview.clients.total}
|
||||
sub={`+${overview.clients.newThisMonth} this month`}
|
||||
color="bg-blue-50 text-blue-600" />
|
||||
<StatCard icon={Mail} label="Emails Sent" value={overview.emails.sent}
|
||||
sub={`${overview.emails.sentLast30Days} last 30 days`}
|
||||
color="bg-emerald-50 text-emerald-600" />
|
||||
<StatCard icon={Calendar} label="Upcoming Events" value={overview.events.upcoming30Days}
|
||||
sub="Next 30 days"
|
||||
color="bg-amber-50 text-amber-600" />
|
||||
<StatCard icon={TrendingUp} label="Contacted Recently" value={overview.clients.contactedRecently}
|
||||
sub={`${overview.clients.neverContacted} never contacted`}
|
||||
color="bg-purple-50 text-purple-600" />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Growth Charts */}
|
||||
{growth && (
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
|
||||
<BarChartSimple
|
||||
data={fillMonths(growth.clientGrowth)}
|
||||
label="Client Growth (Last 12 Months)"
|
||||
color="bg-blue-500"
|
||||
/>
|
||||
<BarChartSimple
|
||||
data={fillMonths(growth.emailActivity)}
|
||||
label="Email Activity (Last 12 Months)"
|
||||
color="bg-emerald-500"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Engagement + Distributions */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
|
||||
{engagement && <EngagementRing summary={engagement.summary} />}
|
||||
<TopList title="Top Industries" items={industries.map(i => ({ label: i.industry || 'Unknown', value: i.count }))} icon={Building2} />
|
||||
<TopList title="Top Tags" items={tags.map(t => ({ label: t.tag, value: t.count }))} icon={Tag} />
|
||||
</div>
|
||||
|
||||
{/* At-risk clients */}
|
||||
{engagement && (
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
|
||||
<AtRiskList title="Cold Clients (60+ days)" clients={engagement.coldClients} />
|
||||
<AtRiskList title="Cooling Clients (31-60 days)" clients={engagement.coolingClients} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user