diff --git a/src/App.tsx b/src/App.tsx index 811d1e1..ba55eac 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -11,6 +11,7 @@ import EmailsPage from '@/pages/EmailsPage'; import SettingsPage from '@/pages/SettingsPage'; import AdminPage from '@/pages/AdminPage'; import NetworkPage from '@/pages/NetworkPage'; +import ReportsPage from '@/pages/ReportsPage'; import InvitePage from '@/pages/InvitePage'; import ForgotPasswordPage from '@/pages/ForgotPasswordPage'; import ResetPasswordPage from '@/pages/ResetPasswordPage'; @@ -50,6 +51,7 @@ export default function App() { } /> } /> } /> + } /> } /> } /> diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx index 33f4e2e..c0cb028 100644 --- a/src/components/Layout.tsx +++ b/src/components/Layout.tsx @@ -4,8 +4,9 @@ import { useAuthStore } from '@/stores/auth'; import { cn } from '@/lib/utils'; import { LayoutDashboard, Users, Calendar, Mail, Settings, Shield, - LogOut, Menu, X, ChevronLeft, Network, + LogOut, Menu, X, ChevronLeft, Network, BarChart3, } from 'lucide-react'; +import NotificationBell from './NotificationBell'; const baseNavItems = [ { path: '/', label: 'Dashboard', icon: LayoutDashboard }, @@ -13,6 +14,7 @@ const baseNavItems = [ { path: '/events', label: 'Events', icon: Calendar }, { path: '/emails', label: 'Emails', icon: Mail }, { path: '/network', label: 'Network', icon: Network }, + { path: '/reports', label: 'Reports', icon: BarChart3 }, { path: '/settings', label: 'Settings', icon: Settings }, ]; @@ -124,6 +126,7 @@ export default function Layout() { {mobileOpen ? : }
+ {/* Content */} diff --git a/src/components/NotificationBell.tsx b/src/components/NotificationBell.tsx new file mode 100644 index 0000000..78d5373 --- /dev/null +++ b/src/components/NotificationBell.tsx @@ -0,0 +1,173 @@ +import { useEffect, useState, useRef } from 'react'; +import { Link } from 'react-router-dom'; +import { api } from '@/lib/api'; +import { Bell, AlertTriangle, Calendar, Users, Mail, Clock, X } from 'lucide-react'; +import { cn } from '@/lib/utils'; + +interface Notification { + id: string; + type: 'overdue' | 'upcoming' | 'stale' | 'drafts'; + title: string; + description: string; + date: string; + link: string; + priority: 'high' | 'medium' | 'low'; +} + +interface NotifCounts { + total: number; + high: number; + overdue: number; + upcoming: number; + stale: number; + drafts: number; +} + +const typeIcons: Record = { + overdue: AlertTriangle, + upcoming: Calendar, + stale: Users, + drafts: Mail, +}; + +const typeColors: Record = { + overdue: 'text-red-500 bg-red-50', + upcoming: 'text-blue-500 bg-blue-50', + stale: 'text-amber-500 bg-amber-50', + drafts: 'text-purple-500 bg-purple-50', +}; + +const priorityDot: Record = { + high: 'bg-red-500', + medium: 'bg-amber-400', + low: 'bg-slate-300', +}; + +export default function NotificationBell() { + const [notifications, setNotifications] = useState([]); + const [counts, setCounts] = useState(null); + const [open, setOpen] = useState(false); + const [dismissed, setDismissed] = useState>(new Set()); + const ref = useRef(null); + + useEffect(() => { + fetchNotifications(); + // Refresh every 5 minutes + const interval = setInterval(fetchNotifications, 5 * 60 * 1000); + return () => clearInterval(interval); + }, []); + + // Close on outside click + useEffect(() => { + const handleClick = (e: MouseEvent) => { + if (ref.current && !ref.current.contains(e.target as Node)) { + setOpen(false); + } + }; + if (open) document.addEventListener('mousedown', handleClick); + return () => document.removeEventListener('mousedown', handleClick); + }, [open]); + + const fetchNotifications = async () => { + try { + const data = await api.getNotifications(); + setNotifications(data.notifications || []); + setCounts(data.counts || null); + } catch { + // Silently fail + } + }; + + const dismiss = (id: string) => { + setDismissed(prev => new Set(prev).add(id)); + }; + + const visibleNotifs = notifications.filter(n => !dismissed.has(n.id)); + const activeCount = visibleNotifs.length; + const highCount = visibleNotifs.filter(n => n.priority === 'high').length; + + return ( +
+ + + {open && ( +
+
+

Notifications

+ {counts && ( +
+ {counts.overdue > 0 && ( + {counts.overdue} overdue + )} + {counts.upcoming > 0 && ( + {counts.upcoming} upcoming + )} +
+ )} +
+ +
+ {visibleNotifs.length === 0 ? ( +
+ +

All caught up!

+
+ ) : ( + visibleNotifs.map(n => { + const Icon = typeIcons[n.type] || Calendar; + return ( +
+
+ +
+ setOpen(false)} className="flex-1 min-w-0"> +
+
+

{n.title}

+
+

{n.description}

+ + +
+ ); + }) + )} +
+ + {visibleNotifs.length > 0 && ( +
+ setOpen(false)} + className="text-xs text-blue-600 hover:text-blue-700 font-medium" + > + View Reports → + +
+ )} +
+ )} +
+ ); +} diff --git a/src/lib/api.ts b/src/lib/api.ts index 317ea9a..fdee3f6 100644 --- a/src/lib/api.ts +++ b/src/lib/api.ts @@ -404,6 +404,49 @@ class ApiClient { } return response.json(); } + // Reports & Analytics + async getReportsOverview(): Promise { + return this.fetch('/reports/overview'); + } + + async getReportsGrowth(): Promise { + return this.fetch('/reports/growth'); + } + + async getReportsIndustries(): Promise { + return this.fetch('/reports/industries'); + } + + async getReportsTags(): Promise { + return this.fetch('/reports/tags'); + } + + async getReportsEngagement(): Promise { + return this.fetch('/reports/engagement'); + } + + async getNotifications(): Promise { + return this.fetch('/reports/notifications'); + } + + async exportClientsCSV(): Promise { + const token = this.getToken(); + const headers: HeadersInit = token ? { Authorization: `Bearer ${token}` } : {}; + const response = await fetch(`${API_BASE}/reports/export/clients`, { + headers, + credentials: 'include', + }); + if (!response.ok) throw new Error('Export failed'); + const blob = await response.blob(); + const url = window.URL.createObjectURL(blob); + const a = document.createElement('a'); + a.href = url; + a.download = `clients-export-${new Date().toISOString().split('T')[0]}.csv`; + document.body.appendChild(a); + a.click(); + document.body.removeChild(a); + window.URL.revokeObjectURL(url); + } } export const api = new ApiClient(); diff --git a/src/pages/ReportsPage.tsx b/src/pages/ReportsPage.tsx new file mode 100644 index 0000000..4c7d5a5 --- /dev/null +++ b/src/pages/ReportsPage.tsx @@ -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 ( +
+
+ +
+
+

{value}

+

{label}

+ {sub &&

{sub}

} +
+
+ ); +} + +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 ( +
+

{label}

+
+ {data.map((d, i) => ( +
+ {d.value || ''} +
0 ? 4 : 2 }} + /> + + {d.label} + +
+ ))} +
+
+ ); +} + +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 ( +
+

Engagement Breakdown

+ {/* Stacked bar */} +
+ {segments.map(s => ( + s.count > 0 && ( +
+ ) + ))} +
+
+ {segments.map(s => ( +
+
+
+ {s.count} + {s.label} +
+
+ ))} +
+

+ Engaged = contacted in last 14 days • Warm = 15-30 days • Cooling = 31-60 days • Cold = 60+ days or never +

+
+ ); +} + +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 ( +
+
+ +

{title}

+
+ {items.length === 0 && ( +

No data yet

+ )} +
+ {items.slice(0, 8).map((item, i) => ( +
+
+ {item.label} + {item.value} +
+
+
+
+
+ ))} +
+
+ ); +} + +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 ( +
+
+ +

{title}

+
+
+ {clientList.map(c => ( + +
+

{c.name}

+ {c.company &&

{c.company}

} +
+ + {c.lastContacted + ? `${Math.floor((Date.now() - new Date(c.lastContacted).getTime()) / (1000 * 60 * 60 * 24))}d ago` + : 'Never'} + + + ))} +
+
+ ); +} + +// 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(null); + const [growth, setGrowth] = useState(null); + const [industries, setIndustries] = useState([]); + const [tags, setTags] = useState([]); + const [engagement, setEngagement] = useState(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 ; + + return ( +
+
+
+

Reports & Analytics

+

Overview of your CRM performance

+
+ +
+ + {/* Overview Stats */} + {overview && ( +
+ + + + +
+ )} + + {/* Growth Charts */} + {growth && ( +
+ + +
+ )} + + {/* Engagement + Distributions */} +
+ {engagement && } + ({ label: i.industry || 'Unknown', value: i.count }))} icon={Building2} /> + ({ label: t.tag, value: t.count }))} icon={Tag} /> +
+ + {/* At-risk clients */} + {engagement && ( +
+ + +
+ )} +
+ ); +}