hammer/network-app-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add CSV import, activity timeline, and AI insights widget

Browse Source 
- CSV Import: modal with file picker, auto column mapping, preview table, import progress
- Activity Timeline: new tab on client detail showing all communications, events, status changes
- AI Insights Widget: dashboard card showing stale clients, upcoming birthdays, suggested follow-ups
- Import button on Clients page header
This commit is contained in:
Hammer
2026-01-29 12:43:30 +00:00
parent 0b7bddb81c
commit e7c2e396c0
6 changed files with 602 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

114
src/pages/DashboardPage.tsx
View File

@@ -1,8 +1,8 @@
import { useEffect, useState } from 'react';
import { Link } from 'react-router-dom';
import { api } from '@/lib/api';
import type { Client, Event, Email } from '@/types';
import { Users, Calendar, Mail, Plus, ArrowRight, Gift, Heart, Clock } from 'lucide-react';
import type { Client, Event, Email, InsightsData } from '@/types';
import { Users, Calendar, Mail, Plus, ArrowRight, Gift, Heart, Clock, AlertTriangle, Sparkles, UserCheck, PhoneForwarded } from 'lucide-react';
import { formatDate, getDaysUntil } from '@/lib/utils';
import { EventTypeBadge } from '@/components/Badge';
import { PageLoader } from '@/components/LoadingSpinner';
@@ -11,6 +11,7 @@ export default function DashboardPage() {
const [clients, setClients] = useState<Client[]>([]);
const [events, setEvents] = useState<Event[]>([]);
const [emails, setEmails] = useState<Email[]>([]);
const [insights, setInsights] = useState<InsightsData | null>(null);
const [loading, setLoading] = useState(true);
useEffect(() => {
@@ -18,10 +19,12 @@ export default function DashboardPage() {
api.getClients().catch(() => []),
api.getEvents({ upcoming: 7 }).catch(() => []),
api.getEmails({ status: 'draft' }).catch(() => []),
]).then(([c, e, em]) => {
api.getInsights().catch(() => null),
]).then(([c, e, em, ins]) => {
setClients(c);
setEvents(e);
setEmails(em);
setInsights(ins as InsightsData | null);
setLoading(false);
});
}, []);
@@ -78,6 +81,111 @@ export default function DashboardPage() {
))}
</div>
{/* AI Insights */}
{insights && (insights.staleClients.length > 0 || insights.upcomingBirthdays.length > 0 || insights.suggestedFollowups.length > 0) && (
<div className="bg-gradient-to-br from-indigo-50 to-purple-50 border border-indigo-200 rounded-xl p-5 space-y-4">
<div className="flex items-center gap-2">
<Sparkles className="w-5 h-5 text-indigo-600" />
<h2 className="font-semibold text-indigo-900">AI Insights</h2>
</div>
<div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
{/* Needs Attention */}
{insights.staleClients.length > 0 && (
<div className="bg-white/80 rounded-lg p-4 space-y-3">
<div className="flex items-center gap-2 text-sm font-medium text-red-700">
<AlertTriangle className="w-4 h-4" />
Needs Attention
</div>
<p className="text-xs text-slate-500">
{insights.summary.staleCount} client{insights.summary.staleCount !== 1 ? 's' : ''} not contacted in 30+ days
{insights.summary.neverContacted > 0 && `, ${insights.summary.neverContacted} never contacted`}
</p>
<div className="space-y-2">
{insights.staleClients.slice(0, 3).map(c => (
<Link key={c.id} to={`/clients/${c.id}`} className="flex items-center gap-2 group">
<div className="w-6 h-6 bg-red-100 text-red-700 rounded-full flex items-center justify-center text-xs font-bold flex-shrink-0">
{c.firstName[0]}{c.lastName[0]}
</div>
<div className="min-w-0">
<p className="text-xs font-medium text-slate-700 truncate group-hover:text-blue-600">
{c.firstName} {c.lastName}
</p>
<p className="text-xs text-slate-400">
{c.daysSinceContact ? `${c.daysSinceContact}d ago` : 'Never contacted'}
</p>
</div>
</Link>
))}
{insights.staleClients.length > 3 && (
<Link to="/clients" className="text-xs text-indigo-600 hover:text-indigo-700">
+{insights.staleClients.length - 3} more
</Link>
)}
</div>
</div>
)}
{/* Upcoming Birthdays */}
{insights.upcomingBirthdays.length > 0 && (
<div className="bg-white/80 rounded-lg p-4 space-y-3">
<div className="flex items-center gap-2 text-sm font-medium text-pink-700">
<Gift className="w-4 h-4" />
Birthdays This Week
</div>
<div className="space-y-2">
{insights.upcomingBirthdays.map(c => (
<Link key={c.id} to={`/clients/${c.id}`} className="flex items-center gap-2 group">
<div className="w-6 h-6 bg-pink-100 text-pink-700 rounded-full flex items-center justify-center text-xs font-bold flex-shrink-0">
🎂
</div>
<div className="min-w-0">
<p className="text-xs font-medium text-slate-700 truncate group-hover:text-blue-600">
{c.firstName} {c.lastName}
</p>
<p className="text-xs text-slate-400">
{c.daysUntil === 0 ? 'Today!' : c.daysUntil === 1 ? 'Tomorrow' : `In ${c.daysUntil} days`}
</p>
</div>
</Link>
))}
</div>
</div>
)}
{/* Suggested Follow-ups */}
{insights.suggestedFollowups.length > 0 && (
<div className="bg-white/80 rounded-lg p-4 space-y-3">
<div className="flex items-center gap-2 text-sm font-medium text-amber-700">
<PhoneForwarded className="w-4 h-4" />
Suggested Follow-ups
</div>
<p className="text-xs text-slate-500">
Contacted 14-30 days ago — good time to reach out
</p>
<div className="space-y-2">
{insights.suggestedFollowups.slice(0, 3).map(c => (
<Link key={c.id} to={`/clients/${c.id}`} className="flex items-center gap-2 group">
<div className="w-6 h-6 bg-amber-100 text-amber-700 rounded-full flex items-center justify-center text-xs font-bold flex-shrink-0">
{c.firstName[0]}{c.lastName[0]}
</div>
<div className="min-w-0">
<p className="text-xs font-medium text-slate-700 truncate group-hover:text-blue-600">
{c.firstName} {c.lastName}
</p>
<p className="text-xs text-slate-400">
{c.daysSinceContact}d since last contact
</p>
</div>
</Link>
))}
</div>
</div>
)}
</div>
</div>
)}
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
{/* Upcoming Events */}
<div className="bg-white border border-slate-200 rounded-xl">