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

- 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

src/components/CSVImportModal.tsx

@@ -0,0 +1,303 @@
+import { useState, useRef } from 'react';
+import { api } from '@/lib/api';
+import type { ImportPreview, ImportResult } from '@/types';
+import Modal from '@/components/Modal';
+import LoadingSpinner from '@/components/LoadingSpinner';
+import { Upload, FileSpreadsheet, CheckCircle2, AlertCircle, ArrowRight, X } from 'lucide-react';
+
+const CLIENT_FIELDS = [
+  { value: '', label: '-- Skip --' },
+  { value: 'firstName', label: 'First Name' },
+  { value: 'lastName', label: 'Last Name' },
+  { value: 'email', label: 'Email' },
+  { value: 'phone', label: 'Phone' },
+  { value: 'company', label: 'Company' },
+  { value: 'role', label: 'Role/Title' },
+  { value: 'industry', label: 'Industry' },
+  { value: 'street', label: 'Street' },
+  { value: 'city', label: 'City' },
+  { value: 'state', label: 'State' },
+  { value: 'zip', label: 'ZIP Code' },
+  { value: 'birthday', label: 'Birthday' },
+  { value: 'anniversary', label: 'Anniversary' },
+  { value: 'notes', label: 'Notes' },
+  { value: 'tags', label: 'Tags (comma-separated)' },
+  { value: 'interests', label: 'Interests (comma-separated)' },
+];
+
+interface CSVImportModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onComplete: () => void;
+}
+
+type Step = 'upload' | 'mapping' | 'importing' | 'results';
+
+export default function CSVImportModal({ isOpen, onClose, onComplete }: CSVImportModalProps) {
+  const [step, setStep] = useState<Step>('upload');
+  const [file, setFile] = useState<File | null>(null);
+  const [preview, setPreview] = useState<ImportPreview | null>(null);
+  const [mapping, setMapping] = useState<Record<number, string>>({});
+  const [result, setResult] = useState<ImportResult | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+  const fileRef = useRef<HTMLInputElement>(null);
+
+  const reset = () => {
+    setStep('upload');
+    setFile(null);
+    setPreview(null);
+    setMapping({});
+    setResult(null);
+    setError(null);
+    setLoading(false);
+  };
+
+  const handleClose = () => {
+    reset();
+    onClose();
+  };
+
+  const handleFileSelect = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const f = e.target.files?.[0];
+    if (!f) return;
+    
+    setFile(f);
+    setError(null);
+    setLoading(true);
+
+    try {
+      const previewData = await api.importPreview(f);
+      setPreview(previewData);
+      setMapping(previewData.mapping);
+      setStep('mapping');
+    } catch (err: any) {
+      setError(err.message || 'Failed to parse CSV');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const updateMapping = (colIndex: number, field: string) => {
+    setMapping(prev => {
+      const next = { ...prev };
+      if (field === '') {
+        delete next[colIndex];
+      } else {
+        next[colIndex] = field;
+      }
+      return next;
+    });
+  };
+
+  const hasRequiredFields = () => {
+    const values = Object.values(mapping);
+    return values.includes('firstName') && values.includes('lastName');
+  };
+
+  const handleImport = async () => {
+    if (!file || !hasRequiredFields()) return;
+    
+    setStep('importing');
+    setLoading(true);
+    setError(null);
+
+    try {
+      const importResult = await api.importClients(file, mapping);
+      setResult(importResult);
+      setStep('results');
+      if (importResult.imported > 0) {
+        onComplete();
+      }
+    } catch (err: any) {
+      setError(err.message || 'Import failed');
+      setStep('mapping');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <Modal isOpen={isOpen} onClose={handleClose} title="Import Clients from CSV" size="lg">
+      <div className="space-y-5">
+        {/* Step: Upload */}
+        {step === 'upload' && (
+          <div className="space-y-4">
+            <div
+              onClick={() => fileRef.current?.click()}
+              className="border-2 border-dashed border-slate-300 rounded-xl p-8 text-center cursor-pointer hover:border-blue-400 hover:bg-blue-50/50 transition-all"
+            >
+              <Upload className="w-10 h-10 text-slate-400 mx-auto mb-3" />
+              <p className="text-sm font-medium text-slate-700">
+                Click to select a CSV file
+              </p>
+              <p className="text-xs text-slate-400 mt-1">
+                Must include at least First Name and Last Name columns
+              </p>
+            </div>
+            <input
+              ref={fileRef}
+              type="file"
+              accept=".csv,text/csv"
+              onChange={handleFileSelect}
+              className="hidden"
+            />
+            {loading && (
+              <div className="flex items-center justify-center gap-2 py-4">
+                <LoadingSpinner size="sm" />
+                <span className="text-sm text-slate-500">Parsing CSV...</span>
+              </div>
+            )}
+            {error && (
+              <div className="flex items-center gap-2 p-3 bg-red-50 text-red-700 rounded-lg text-sm">
+                <AlertCircle className="w-4 h-4 flex-shrink-0" />
+                {error}
+              </div>
+            )}
+          </div>
+        )}
+
+        {/* Step: Column Mapping */}
+        {step === 'mapping' && preview && (
+          <div className="space-y-4">
+            <div className="flex items-center gap-2 text-sm text-slate-600">
+              <FileSpreadsheet className="w-4 h-4" />
+              <span><strong>{preview.totalRows}</strong> rows found in <strong>{file?.name}</strong></span>
+            </div>
+
+            {/* Column mapping */}
+            <div className="space-y-2">
+              <h4 className="text-sm font-medium text-slate-700">Map columns to client fields:</h4>
+              <div className="max-h-64 overflow-y-auto space-y-2">
+                {preview.headers.map((header, index) => (
+                  <div key={index} className="flex items-center gap-3">
+                    <span className="text-sm text-slate-600 w-40 truncate flex-shrink-0" title={header}>
+                      {header}
+                    </span>
+                    <ArrowRight className="w-4 h-4 text-slate-300 flex-shrink-0" />
+                    <select
+                      value={mapping[index] || ''}
+                      onChange={(e) => updateMapping(index, e.target.value)}
+                      className="flex-1 px-3 py-1.5 border border-slate-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+                    >
+                      {CLIENT_FIELDS.map((f) => (
+                        <option key={f.value} value={f.value}>{f.label}</option>
+                      ))}
+                    </select>
+                  </div>
+                ))}
+              </div>
+            </div>
+
+            {/* Preview table */}
+            {preview.sampleRows.length > 0 && (
+              <div>
+                <h4 className="text-sm font-medium text-slate-700 mb-2">Preview (first {preview.sampleRows.length} rows):</h4>
+                <div className="overflow-x-auto border border-slate-200 rounded-lg">
+                  <table className="w-full text-xs">
+                    <thead>
+                      <tr className="bg-slate-50">
+                        {preview.headers.map((h, i) => (
+                          <th key={i} className="px-3 py-2 text-left font-medium text-slate-600 whitespace-nowrap">
+                            {mapping[i] ? (
+                              <span className="text-blue-600">{CLIENT_FIELDS.find(f => f.value === mapping[i])?.label || mapping[i]}</span>
+                            ) : (
+                              <span className="text-slate-400 line-through">{h}</span>
+                            )}
+                          </th>
+                        ))}
+                      </tr>
+                    </thead>
+                    <tbody className="divide-y divide-slate-100">
+                      {preview.sampleRows.map((row, ri) => (
+                        <tr key={ri}>
+                          {row.map((cell, ci) => (
+                            <td key={ci} className={`px-3 py-2 whitespace-nowrap ${mapping[ci] ? 'text-slate-700' : 'text-slate-300'}`}>
+                              {cell || '—'}
+                            </td>
+                          ))}
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                </div>
+              </div>
+            )}
+
+            {!hasRequiredFields() && (
+              <div className="flex items-center gap-2 p-3 bg-amber-50 text-amber-700 rounded-lg text-sm">
+                <AlertCircle className="w-4 h-4 flex-shrink-0" />
+                You must map both "First Name" and "Last Name" columns
+              </div>
+            )}
+
+            {error && (
+              <div className="flex items-center gap-2 p-3 bg-red-50 text-red-700 rounded-lg text-sm">
+                <AlertCircle className="w-4 h-4 flex-shrink-0" />
+                {error}
+              </div>
+            )}
+
+            <div className="flex justify-between pt-2">
+              <button onClick={reset} className="px-4 py-2 text-sm text-slate-600 hover:text-slate-800 transition-colors">
+                ← Back
+              </button>
+              <button
+                onClick={handleImport}
+                disabled={!hasRequiredFields()}
+                className="px-5 py-2.5 bg-blue-600 text-white rounded-lg text-sm font-medium hover:bg-blue-700 disabled:opacity-50 transition-colors"
+              >
+                Import {preview.totalRows} Clients
+              </button>
+            </div>
+          </div>
+        )}
+
+        {/* Step: Importing */}
+        {step === 'importing' && (
+          <div className="flex flex-col items-center justify-center py-8 gap-4">
+            <LoadingSpinner size="lg" />
+            <p className="text-sm text-slate-600">Importing clients...</p>
+            <p className="text-xs text-slate-400">This may take a moment for large files</p>
+          </div>
+        )}
+
+        {/* Step: Results */}
+        {step === 'results' && result && (
+          <div className="space-y-4">
+            <div className="flex items-center gap-3 p-4 bg-emerald-50 rounded-lg">
+              <CheckCircle2 className="w-8 h-8 text-emerald-600 flex-shrink-0" />
+              <div>
+                <p className="font-semibold text-emerald-800">Import Complete</p>
+                <p className="text-sm text-emerald-700">
+                  Successfully imported <strong>{result.imported}</strong> client{result.imported !== 1 ? 's' : ''}
+                  {result.skipped > 0 && `, ${result.skipped} skipped`}
+                </p>
+              </div>
+            </div>
+
+            {result.errors.length > 0 && (
+              <div className="space-y-2">
+                <h4 className="text-sm font-medium text-slate-700">Issues ({result.errors.length}):</h4>
+                <div className="max-h-40 overflow-y-auto space-y-1 p-3 bg-slate-50 rounded-lg">
+                  {result.errors.map((err, i) => (
+                    <p key={i} className="text-xs text-slate-600">{err}</p>
+                  ))}
+                </div>
+              </div>
+            )}
+
+            <div className="flex justify-end pt-2">
+              <button
+                onClick={handleClose}
+                className="px-5 py-2.5 bg-blue-600 text-white rounded-lg text-sm font-medium hover:bg-blue-700 transition-colors"
+              >
+                Done
+              </button>
+            </div>
+          </div>
+        )}
+      </div>
+    </Modal>
+  );
+}

src/lib/api.ts

@@ -1,4 +1,4 @@
-import type { Profile, Client, ClientCreate, Event, EventCreate, Email, EmailGenerate, User, Invite } from '@/types';
+import type { Profile, Client, ClientCreate, Event, EventCreate, Email, EmailGenerate, User, Invite, ActivityItem, InsightsData, ImportPreview, ImportResult, NetworkMatch, NetworkStats } from '@/types';
 
 const API_BASE = import.meta.env.PROD
   ? 'https://api.thenetwork.donovankelly.xyz/api'
@@ -157,6 +157,54 @@ class ApiClient {
     return this.fetch(`/clients/${id}/contacted`, { method: 'POST' });
   }
 
+  // CSV Import
+  async importPreview(file: File): Promise<ImportPreview> {
+    const formData = new FormData();
+    formData.append('file', file);
+    const token = this.getToken();
+    const headers: HeadersInit = token ? { Authorization: `Bearer ${token}` } : {};
+    const response = await fetch(`${API_BASE}/clients/import/preview`, {
+      method: 'POST',
+      headers,
+      body: formData,
+      credentials: 'include',
+    });
+    if (!response.ok) {
+      const error = await response.json().catch(() => ({ error: 'Preview failed' }));
+      throw new Error(error.error || 'Preview failed');
+    }
+    return response.json();
+  }
+
+  async importClients(file: File, mapping: Record<number, string>): Promise<ImportResult> {
+    const formData = new FormData();
+    formData.append('file', file);
+    formData.append('mapping', JSON.stringify(mapping));
+    const token = this.getToken();
+    const headers: HeadersInit = token ? { Authorization: `Bearer ${token}` } : {};
+    const response = await fetch(`${API_BASE}/clients/import`, {
+      method: 'POST',
+      headers,
+      body: formData,
+      credentials: 'include',
+    });
+    if (!response.ok) {
+      const error = await response.json().catch(() => ({ error: 'Import failed' }));
+      throw new Error(error.error || 'Import failed');
+    }
+    return response.json();
+  }
+
+  // Activity Timeline
+  async getClientActivity(clientId: string): Promise<ActivityItem[]> {
+    return this.fetch(`/clients/${clientId}/activity`);
+  }
+
+  // Insights
+  async getInsights(): Promise<InsightsData> {
+    return this.fetch('/insights');
+  }
+
   // Events
   async getEvents(params?: { clientId?: string; type?: string; upcoming?: number }): Promise<Event[]> {
     const searchParams = new URLSearchParams();

src/pages/ClientDetailPage.tsx

@@ -2,11 +2,11 @@ import { useEffect, useState } from 'react';
 import { useParams, useNavigate, Link } from 'react-router-dom';
 import { useClientsStore } from '@/stores/clients';
 import { api } from '@/lib/api';
-import type { Event, Email } from '@/types';
+import type { Event, Email, ActivityItem } from '@/types';
 import {
   ArrowLeft, Edit3, Trash2, Phone, Mail, MapPin, Building2,
   Briefcase, Gift, Heart, Star, Users, Calendar, Send,
-  CheckCircle2, Sparkles, Clock,
+  CheckCircle2, Sparkles, Clock, Activity, FileText, UserPlus, RefreshCw,
 } from 'lucide-react';
 import { cn, formatDate, getRelativeTime, getInitials } from '@/lib/utils';
 import Badge, { EventTypeBadge, EmailStatusBadge } from '@/components/Badge';
@@ -21,7 +21,8 @@ export default function ClientDetailPage() {
   const { selectedClient, isLoading, fetchClient, updateClient, deleteClient, markContacted } = useClientsStore();
   const [events, setEvents] = useState<Event[]>([]);
   const [emails, setEmails] = useState<Email[]>([]);
-  const [activeTab, setActiveTab] = useState<'info' | 'events' | 'emails'>('info');
+  const [activities, setActivities] = useState<ActivityItem[]>([]);
+  const [activeTab, setActiveTab] = useState<'info' | 'activity' | 'events' | 'emails'>('info');
   const [showEdit, setShowEdit] = useState(false);
   const [showCompose, setShowCompose] = useState(false);
   const [deleting, setDeleting] = useState(false);
@@ -31,6 +32,7 @@ export default function ClientDetailPage() {
       fetchClient(id);
       api.getEvents({ clientId: id }).then(setEvents).catch(() => {});
       api.getEmails({ clientId: id }).then(setEmails).catch(() => {});
+      api.getClientActivity(id).then(setActivities).catch(() => {});
     }
   }, [id, fetchClient]);
 
@@ -58,8 +60,9 @@ export default function ClientDetailPage() {
     setShowEdit(false);
   };
 
-  const tabs: { key: 'info' | 'events' | 'emails'; label: string; count?: number; icon: typeof Users }[] = [
+  const tabs: { key: 'info' | 'activity' | 'events' | 'emails'; label: string; count?: number; icon: typeof Users }[] = [
     { key: 'info', label: 'Info', icon: Users },
+    { key: 'activity', label: 'Timeline', count: activities.length, icon: Activity },
     { key: 'events', label: 'Events', count: events.length, icon: Calendar },
     { key: 'emails', label: 'Emails', count: emails.length, icon: Mail },
   ];
@@ -228,6 +231,49 @@ export default function ClientDetailPage() {
         </div>
       )}
 
+      {activeTab === 'activity' && (
+        <div className="bg-white border border-slate-200 rounded-xl">
+          {activities.length === 0 ? (
+            <p className="px-5 py-8 text-center text-sm text-slate-400">No activity recorded yet</p>
+          ) : (
+            <div className="relative">
+              {activities.map((item, index) => {
+                const iconMap: Record<string, { icon: typeof Mail; color: string; bg: string }> = {
+                  email_sent: { icon: Send, color: 'text-emerald-600', bg: 'bg-emerald-100' },
+                  email_drafted: { icon: FileText, color: 'text-amber-600', bg: 'bg-amber-100' },
+                  event_created: { icon: Calendar, color: 'text-blue-600', bg: 'bg-blue-100' },
+                  client_contacted: { icon: CheckCircle2, color: 'text-emerald-600', bg: 'bg-emerald-100' },
+                  client_created: { icon: UserPlus, color: 'text-purple-600', bg: 'bg-purple-100' },
+                  client_updated: { icon: RefreshCw, color: 'text-slate-600', bg: 'bg-slate-100' },
+                };
+                const { icon: Icon, color, bg } = iconMap[item.type] || iconMap.client_updated;
+                
+                return (
+                  <div key={item.id} className="flex gap-4 px-5 py-4 relative">
+                    {/* Timeline line */}
+                    {index < activities.length - 1 && (
+                      <div className="absolute left-[2.15rem] top-14 bottom-0 w-px bg-slate-200" />
+                    )}
+                    {/* Icon */}
+                    <div className={`w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0 ${bg} relative z-10`}>
+                      <Icon className={`w-4 h-4 ${color}`} />
+                    </div>
+                    {/* Content */}
+                    <div className="flex-1 min-w-0">
+                      <p className="text-sm font-medium text-slate-900">{item.title}</p>
+                      {item.description && (
+                        <p className="text-xs text-slate-500 mt-0.5 line-clamp-2">{item.description}</p>
+                      )}
+                      <p className="text-xs text-slate-400 mt-1">{formatDate(item.date)}</p>
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          )}
+        </div>
+      )}
+
       {activeTab === 'events' && (
         <div className="bg-white border border-slate-200 rounded-xl divide-y divide-slate-100">
           {events.length === 0 ? (

src/pages/ClientsPage.tsx

@@ -1,18 +1,20 @@
 import { useEffect, useState, useMemo } from 'react';
 import { Link, useLocation } from 'react-router-dom';
 import { useClientsStore } from '@/stores/clients';
-import { Search, Plus, Users, X } from 'lucide-react';
+import { Search, Plus, Users, X, Upload } from 'lucide-react';
 import { cn, getRelativeTime, getInitials } from '@/lib/utils';
 import Badge from '@/components/Badge';
 import EmptyState from '@/components/EmptyState';
 import { PageLoader } from '@/components/LoadingSpinner';
 import Modal from '@/components/Modal';
 import ClientForm from '@/components/ClientForm';
+import CSVImportModal from '@/components/CSVImportModal';
 
 export default function ClientsPage() {
   const location = useLocation();
   const { clients, isLoading, searchQuery, selectedTag, setSearchQuery, setSelectedTag, fetchClients, createClient } = useClientsStore();
   const [showCreate, setShowCreate] = useState(false);
+  const [showImport, setShowImport] = useState(false);
   const [creating, setCreating] = useState(false);
 
   useEffect(() => {
@@ -72,6 +74,14 @@ export default function ClientsPage() {
           <h1 className="text-2xl font-bold text-slate-900">Clients</h1>
           <p className="text-slate-500 text-sm mt-1">{clients.length} contacts in your network</p>
         </div>
+        <div className="flex items-center gap-2">
+          <button
+            onClick={() => setShowImport(true)}
+            className="flex items-center gap-2 px-4 py-2 bg-white border border-slate-200 text-slate-700 rounded-lg text-sm font-medium hover:bg-slate-50 transition-colors"
+          >
+            <Upload className="w-4 h-4" />
+            Import CSV
+          </button>
           <button
             onClick={() => setShowCreate(true)}
             className="flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg text-sm font-medium hover:bg-blue-700 transition-colors"
@@ -80,6 +90,7 @@ export default function ClientsPage() {
             Add Client
           </button>
         </div>
+      </div>
 
       {/* Search + Tags */}
       <div className="space-y-3">
@@ -175,6 +186,13 @@ export default function ClientsPage() {
       <Modal isOpen={showCreate} onClose={() => setShowCreate(false)} title="Add Client" size="lg">
         <ClientForm onSubmit={handleCreate} loading={creating} />
       </Modal>
+
+      {/* Import CSV Modal */}
+      <CSVImportModal
+        isOpen={showImport}
+        onClose={() => setShowImport(false)}
+        onComplete={() => fetchClients()}
+      />
     </div>
   );
 }

src/pages/DashboardPage.tsx

@@ -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">

src/types/index.ts

@@ -131,6 +131,69 @@ export interface NetworkStats {
   topConnectors: { id: string; name: string; matchCount: number }[];
 }
 
+export interface ActivityItem {
+  id: string;
+  type: 'email_sent' | 'email_drafted' | 'event_created' | 'client_contacted' | 'client_created' | 'client_updated';
+  title: string;
+  description?: string;
+  date: string;
+  metadata?: Record<string, any>;
+}
+
+export interface InsightsData {
+  staleClients: {
+    id: string;
+    firstName: string;
+    lastName: string;
+    email?: string | null;
+    company?: string | null;
+    lastContactedAt: string | null;
+    daysSinceContact: number | null;
+  }[];
+  upcomingBirthdays: {
+    id: string;
+    firstName: string;
+    lastName: string;
+    birthday: string;
+    daysUntil: number;
+  }[];
+  suggestedFollowups: {
+    id: string;
+    firstName: string;
+    lastName: string;
+    email?: string | null;
+    company?: string | null;
+    lastContactedAt: string | null;
+    daysSinceContact: number | null;
+  }[];
+  upcomingEvents: {
+    id: string;
+    title: string;
+    type: string;
+    date: string;
+    clientId: string;
+  }[];
+  summary: {
+    totalClients: number;
+    neverContacted: number;
+    staleCount: number;
+    birthdaysThisWeek: number;
+  };
+}
+
+export interface ImportPreview {
+  headers: string[];
+  mapping: Record<number, string>;
+  sampleRows: string[][];
+  totalRows: number;
+}
+
+export interface ImportResult {
+  imported: number;
+  skipped: number;
+  errors: string[];
+}
+
 export interface Invite {
   id: string;
   email: string;