feat: command palette (Ctrl+K), dark mode, pinned clients
- Global Command Palette: Ctrl+K search across clients, pages, and actions - Arrow key navigation, grouped results (Pages/Clients/Actions) - Keyboard hints in footer - Dark mode: full theme toggle (light/dark/system) with localStorage - Theme toggle in header bar - Dark mode applied to Layout, Dashboard, Clients, ClientDetail, Login, Modal - Tailwind v4 @custom-variant for class-based dark mode - Pinned/Favorite clients: star clients for quick dashboard access - Pin button on client detail page and dashboard recent clients - Pinned clients grid on dashboard - Uses localStorage (no backend changes needed) - Search bar trigger in header with ⌘K shortcut hint
This commit is contained in:
@@ -6,8 +6,9 @@ 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, Activity, FileText, UserPlus, RefreshCw,
|
||||
CheckCircle2, Sparkles, Clock, Activity, FileText, UserPlus, RefreshCw, Pin,
|
||||
} from 'lucide-react';
|
||||
import { usePinnedClients } from '@/hooks/usePinnedClients';
|
||||
import { cn, formatDate, getRelativeTime, getInitials } from '@/lib/utils';
|
||||
import Badge, { EventTypeBadge, EmailStatusBadge } from '@/components/Badge';
|
||||
import { PageLoader } from '@/components/LoadingSpinner';
|
||||
@@ -26,6 +27,7 @@ export default function ClientDetailPage() {
|
||||
const [showEdit, setShowEdit] = useState(false);
|
||||
const [showCompose, setShowCompose] = useState(false);
|
||||
const [deleting, setDeleting] = useState(false);
|
||||
const { togglePin, isPinned } = usePinnedClients();
|
||||
|
||||
useEffect(() => {
|
||||
if (id) {
|
||||
@@ -71,7 +73,7 @@ export default function ClientDetailPage() {
|
||||
<div className="max-w-4xl mx-auto space-y-6 animate-fade-in">
|
||||
{/* Header */}
|
||||
<div className="flex flex-col sm:flex-row items-start gap-4">
|
||||
<button onClick={() => navigate('/clients')} className="mt-1 p-2 rounded-lg text-slate-400 hover:bg-slate-100 hover:text-slate-600 transition-colors">
|
||||
<button onClick={() => navigate('/clients')} className="mt-1 p-2 rounded-lg text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-700 hover:text-slate-600 dark:hover:text-slate-300 transition-colors">
|
||||
<ArrowLeft className="w-5 h-5" />
|
||||
</button>
|
||||
<div className="flex-1 min-w-0">
|
||||
@@ -80,11 +82,11 @@ export default function ClientDetailPage() {
|
||||
{getInitials(client.firstName, client.lastName)}
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<h1 className="text-2xl font-bold text-slate-900">
|
||||
<h1 className="text-2xl font-bold text-slate-900 dark:text-slate-100">
|
||||
{client.firstName} {client.lastName}
|
||||
</h1>
|
||||
{client.company && (
|
||||
<p className="text-slate-500">
|
||||
<p className="text-slate-500 dark:text-slate-400">
|
||||
{client.role ? `${client.role} at ` : ''}{client.company}
|
||||
</p>
|
||||
)}
|
||||
@@ -105,7 +107,14 @@ export default function ClientDetailPage() {
|
||||
<Sparkles className="w-4 h-4" />
|
||||
<span className="hidden sm:inline">Generate Email</span>
|
||||
</button>
|
||||
<button onClick={() => setShowEdit(true)} className="p-2 rounded-lg text-slate-400 hover:bg-slate-100 hover:text-slate-600 transition-colors">
|
||||
<button
|
||||
onClick={() => togglePin(client.id)}
|
||||
className={`p-2 rounded-lg transition-colors ${isPinned(client.id) ? 'text-amber-500 bg-amber-50 dark:bg-amber-900/30' : 'text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-700 hover:text-amber-500'}`}
|
||||
title={isPinned(client.id) ? 'Unpin from dashboard' : 'Pin to dashboard'}
|
||||
>
|
||||
<Star className={`w-4 h-4 ${isPinned(client.id) ? 'fill-amber-500' : ''}`} />
|
||||
</button>
|
||||
<button onClick={() => setShowEdit(true)} className="p-2 rounded-lg text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-700 hover:text-slate-600 dark:hover:text-slate-300 transition-colors">
|
||||
<Edit3 className="w-4 h-4" />
|
||||
</button>
|
||||
<button onClick={handleDelete} disabled={deleting} className="p-2 rounded-lg text-slate-400 hover:bg-red-50 hover:text-red-600 transition-colors">
|
||||
@@ -115,7 +124,7 @@ export default function ClientDetailPage() {
|
||||
</div>
|
||||
|
||||
{/* Tabs */}
|
||||
<div className="border-b border-slate-200">
|
||||
<div className="border-b border-slate-200 dark:border-slate-700">
|
||||
<div className="flex gap-6">
|
||||
{tabs.map(({ key, label, count, icon: Icon }) => (
|
||||
<button
|
||||
@@ -124,14 +133,14 @@ export default function ClientDetailPage() {
|
||||
className={cn(
|
||||
'flex items-center gap-2 pb-3 border-b-2 text-sm font-medium transition-colors',
|
||||
activeTab === key
|
||||
? 'border-blue-600 text-blue-600'
|
||||
: 'border-transparent text-slate-500 hover:text-slate-700'
|
||||
? 'border-blue-600 text-blue-600 dark:text-blue-400 dark:border-blue-400'
|
||||
: 'border-transparent text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-300'
|
||||
)}
|
||||
>
|
||||
<Icon className="w-4 h-4" />
|
||||
{label}
|
||||
{count !== undefined && count > 0 && (
|
||||
<span className="px-1.5 py-0.5 bg-slate-100 text-slate-600 rounded-full text-xs">{count}</span>
|
||||
<span className="px-1.5 py-0.5 bg-slate-100 dark:bg-slate-700 text-slate-600 dark:text-slate-300 rounded-full text-xs">{count}</span>
|
||||
)}
|
||||
</button>
|
||||
))}
|
||||
@@ -142,8 +151,8 @@ export default function ClientDetailPage() {
|
||||
{activeTab === 'info' && (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
{/* Contact Info */}
|
||||
<div className="bg-white border border-slate-200 rounded-xl p-5 space-y-4">
|
||||
<h3 className="font-semibold text-slate-900">Contact Information</h3>
|
||||
<div className="bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl p-5 space-y-4">
|
||||
<h3 className="font-semibold text-slate-900 dark:text-slate-100">Contact Information</h3>
|
||||
{client.email && (
|
||||
<div className="flex items-center gap-3 text-sm">
|
||||
<Mail className="w-4 h-4 text-slate-400" />
|
||||
@@ -183,8 +192,8 @@ export default function ClientDetailPage() {
|
||||
</div>
|
||||
|
||||
{/* Personal */}
|
||||
<div className="bg-white border border-slate-200 rounded-xl p-5 space-y-4">
|
||||
<h3 className="font-semibold text-slate-900">Personal Details</h3>
|
||||
<div className="bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl p-5 space-y-4">
|
||||
<h3 className="font-semibold text-slate-900 dark:text-slate-100">Personal Details</h3>
|
||||
{client.birthday && (
|
||||
<div className="flex items-center gap-3 text-sm">
|
||||
<Gift className="w-4 h-4 text-pink-500" />
|
||||
@@ -223,16 +232,16 @@ export default function ClientDetailPage() {
|
||||
|
||||
{/* Notes */}
|
||||
{client.notes && (
|
||||
<div className="bg-white border border-slate-200 rounded-xl p-5 md:col-span-2">
|
||||
<h3 className="font-semibold text-slate-900 mb-2">Notes</h3>
|
||||
<p className="text-sm text-slate-700 whitespace-pre-wrap">{client.notes}</p>
|
||||
<div className="bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl p-5 md:col-span-2">
|
||||
<h3 className="font-semibold text-slate-900 dark:text-slate-100 mb-2">Notes</h3>
|
||||
<p className="text-sm text-slate-700 dark:text-slate-300 whitespace-pre-wrap">{client.notes}</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{activeTab === 'activity' && (
|
||||
<div className="bg-white border border-slate-200 rounded-xl">
|
||||
<div className="bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl">
|
||||
{activities.length === 0 ? (
|
||||
<p className="px-5 py-8 text-center text-sm text-slate-400">No activity recorded yet</p>
|
||||
) : (
|
||||
@@ -275,7 +284,7 @@ export default function ClientDetailPage() {
|
||||
)}
|
||||
|
||||
{activeTab === 'events' && (
|
||||
<div className="bg-white border border-slate-200 rounded-xl divide-y divide-slate-100">
|
||||
<div className="bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl divide-y divide-slate-100 dark:divide-slate-700">
|
||||
{events.length === 0 ? (
|
||||
<p className="px-5 py-8 text-center text-sm text-slate-400">No events for this client</p>
|
||||
) : (
|
||||
@@ -293,7 +302,7 @@ export default function ClientDetailPage() {
|
||||
)}
|
||||
|
||||
{activeTab === 'emails' && (
|
||||
<div className="bg-white border border-slate-200 rounded-xl divide-y divide-slate-100">
|
||||
<div className="bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl divide-y divide-slate-100 dark:divide-slate-700">
|
||||
{emails.length === 0 ? (
|
||||
<p className="px-5 py-8 text-center text-sm text-slate-400">No emails for this client</p>
|
||||
) : (
|
||||
|
||||
@@ -71,13 +71,13 @@ export default function ClientsPage() {
|
||||
<div className="max-w-6xl mx-auto space-y-5 animate-fade-in">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<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>
|
||||
<h1 className="text-2xl font-bold text-slate-900 dark:text-slate-100">Clients</h1>
|
||||
<p className="text-slate-500 dark:text-slate-400 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"
|
||||
className="flex items-center gap-2 px-4 py-2 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 text-slate-700 dark:text-slate-300 rounded-lg text-sm font-medium hover:bg-slate-50 dark:hover:bg-slate-700 transition-colors"
|
||||
>
|
||||
<Upload className="w-4 h-4" />
|
||||
Import CSV
|
||||
@@ -101,7 +101,7 @@ export default function ClientsPage() {
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
placeholder="Search clients..."
|
||||
className="w-full pl-10 pr-4 py-2.5 bg-white border border-slate-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
className="w-full pl-10 pr-4 py-2.5 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-lg text-sm text-slate-900 dark:text-slate-100 placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||||
/>
|
||||
{searchQuery && (
|
||||
<button onClick={() => setSearchQuery('')} className="absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 hover:text-slate-600">
|
||||
@@ -145,18 +145,18 @@ export default function ClientsPage() {
|
||||
<Link
|
||||
key={client.id}
|
||||
to={`/clients/${client.id}`}
|
||||
className="bg-white border border-slate-200 rounded-xl p-5 hover:shadow-md hover:border-slate-300 transition-all group"
|
||||
className="bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl p-5 hover:shadow-md dark:hover:shadow-slate-900/50 hover:border-slate-300 dark:hover:border-slate-600 transition-all group"
|
||||
>
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="w-11 h-11 bg-blue-100 text-blue-700 rounded-full flex items-center justify-center text-sm font-bold flex-shrink-0 group-hover:bg-blue-200 transition-colors">
|
||||
<div className="w-11 h-11 bg-blue-100 dark:bg-blue-900/50 text-blue-700 dark:text-blue-300 rounded-full flex items-center justify-center text-sm font-bold flex-shrink-0 group-hover:bg-blue-200 dark:group-hover:bg-blue-900 transition-colors">
|
||||
{getInitials(client.firstName, client.lastName)}
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<h3 className="font-semibold text-slate-900 truncate">
|
||||
<h3 className="font-semibold text-slate-900 dark:text-slate-100 truncate">
|
||||
{client.firstName} {client.lastName}
|
||||
</h3>
|
||||
{client.company && (
|
||||
<p className="text-sm text-slate-500 truncate">{client.role ? `${client.role} at ` : ''}{client.company}</p>
|
||||
<p className="text-sm text-slate-500 dark:text-slate-400 truncate">{client.role ? `${client.role} at ` : ''}{client.company}</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
@@ -164,7 +164,7 @@ export default function ClientsPage() {
|
||||
{client.tags && client.tags.length > 0 && (
|
||||
<div className="flex flex-wrap gap-1.5 mt-3">
|
||||
{client.tags.slice(0, 3).map((tag) => (
|
||||
<span key={tag} className="px-2 py-0.5 bg-slate-100 text-slate-600 rounded-full text-xs">
|
||||
<span key={tag} className="px-2 py-0.5 bg-slate-100 dark:bg-slate-700 text-slate-600 dark:text-slate-300 rounded-full text-xs">
|
||||
{tag}
|
||||
</span>
|
||||
))}
|
||||
@@ -174,7 +174,7 @@ export default function ClientsPage() {
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="mt-3 pt-3 border-t border-slate-100 text-xs text-slate-400">
|
||||
<div className="mt-3 pt-3 border-t border-slate-100 dark:border-slate-700 text-xs text-slate-400">
|
||||
Last contacted: {getRelativeTime(client.lastContacted)}
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
@@ -2,10 +2,11 @@ import { useEffect, useState } from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { api } from '@/lib/api';
|
||||
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 { Users, Calendar, Mail, Plus, ArrowRight, Gift, Heart, Clock, AlertTriangle, Sparkles, UserCheck, PhoneForwarded, Star } from 'lucide-react';
|
||||
import { formatDate, getDaysUntil, getInitials } from '@/lib/utils';
|
||||
import { EventTypeBadge } from '@/components/Badge';
|
||||
import { PageLoader } from '@/components/LoadingSpinner';
|
||||
import { usePinnedClients } from '@/hooks/usePinnedClients';
|
||||
|
||||
export default function DashboardPage() {
|
||||
const [clients, setClients] = useState<Client[]>([]);
|
||||
@@ -13,6 +14,7 @@ export default function DashboardPage() {
|
||||
const [emails, setEmails] = useState<Email[]>([]);
|
||||
const [insights, setInsights] = useState<InsightsData | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const { pinnedIds, togglePin, isPinned } = usePinnedClients();
|
||||
|
||||
useEffect(() => {
|
||||
Promise.all([
|
||||
@@ -31,10 +33,12 @@ export default function DashboardPage() {
|
||||
|
||||
if (loading) return <PageLoader />;
|
||||
|
||||
const pinnedClients = clients.filter((c) => pinnedIds.includes(c.id));
|
||||
|
||||
const stats = [
|
||||
{ label: 'Total Clients', value: clients.length, icon: Users, color: 'bg-blue-50 text-blue-600', link: '/clients' },
|
||||
{ label: 'Upcoming Events', value: events.length, icon: Calendar, color: 'bg-emerald-50 text-emerald-600', link: '/events' },
|
||||
{ label: 'Pending Drafts', value: emails.length, icon: Mail, color: 'bg-amber-50 text-amber-600', link: '/emails' },
|
||||
{ label: 'Total Clients', value: clients.length, icon: Users, color: 'bg-blue-50 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400', link: '/clients' },
|
||||
{ label: 'Upcoming Events', value: events.length, icon: Calendar, color: 'bg-emerald-50 dark:bg-emerald-900/30 text-emerald-600 dark:text-emerald-400', link: '/events' },
|
||||
{ label: 'Pending Drafts', value: emails.length, icon: Mail, color: 'bg-amber-50 dark:bg-amber-900/30 text-amber-600 dark:text-amber-400', link: '/emails' },
|
||||
];
|
||||
|
||||
const eventIcon = (type: string) => {
|
||||
@@ -47,8 +51,8 @@ export default function DashboardPage() {
|
||||
<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">Dashboard</h1>
|
||||
<p className="text-slate-500 text-sm mt-1">Welcome back. Here's your overview.</p>
|
||||
<h1 className="text-2xl font-bold text-slate-900 dark:text-slate-100">Dashboard</h1>
|
||||
<p className="text-slate-500 dark:text-slate-400 text-sm mt-1">Welcome back. Here's your overview.</p>
|
||||
</div>
|
||||
<Link
|
||||
to="/clients"
|
||||
@@ -66,49 +70,79 @@ export default function DashboardPage() {
|
||||
<Link
|
||||
key={stat.label}
|
||||
to={stat.link}
|
||||
className="bg-white border border-slate-200 rounded-xl p-5 hover:shadow-md transition-shadow"
|
||||
className="bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl p-5 hover:shadow-md dark:hover:shadow-slate-900/50 transition-shadow"
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className={`w-10 h-10 rounded-lg flex items-center justify-center ${stat.color}`}>
|
||||
<stat.icon className="w-5 h-5" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-2xl font-bold text-slate-900">{stat.value}</p>
|
||||
<p className="text-sm text-slate-500">{stat.label}</p>
|
||||
<p className="text-2xl font-bold text-slate-900 dark:text-slate-100">{stat.value}</p>
|
||||
<p className="text-sm text-slate-500 dark:text-slate-400">{stat.label}</p>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Pinned Clients */}
|
||||
{pinnedClients.length > 0 && (
|
||||
<div className="bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl">
|
||||
<div className="flex items-center gap-2 px-5 py-4 border-b border-slate-100 dark:border-slate-700">
|
||||
<Star className="w-4 h-4 text-amber-500 fill-amber-500" />
|
||||
<h2 className="font-semibold text-slate-900 dark:text-slate-100">Pinned Clients</h2>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-3 p-4">
|
||||
{pinnedClients.map((client) => (
|
||||
<Link
|
||||
key={client.id}
|
||||
to={`/clients/${client.id}`}
|
||||
className="flex items-center gap-3 p-3 rounded-lg bg-slate-50 dark:bg-slate-700/50 hover:bg-slate-100 dark:hover:bg-slate-700 transition-colors group"
|
||||
>
|
||||
<div className="w-9 h-9 bg-blue-100 dark:bg-blue-900/50 text-blue-700 dark:text-blue-300 rounded-full flex items-center justify-center text-sm font-semibold flex-shrink-0">
|
||||
{getInitials(client.firstName, client.lastName)}
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm font-medium text-slate-900 dark:text-slate-100 truncate">
|
||||
{client.firstName} {client.lastName}
|
||||
</p>
|
||||
<p className="text-xs text-slate-500 dark:text-slate-400 truncate">
|
||||
{client.company || 'No company'}
|
||||
</p>
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</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="bg-gradient-to-br from-indigo-50 to-purple-50 dark:from-indigo-900/20 dark:to-purple-900/20 border border-indigo-200 dark:border-indigo-800 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>
|
||||
<Sparkles className="w-5 h-5 text-indigo-600 dark:text-indigo-400" />
|
||||
<h2 className="font-semibold text-indigo-900 dark:text-indigo-200">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">
|
||||
<div className="bg-white/80 dark:bg-slate-800/80 rounded-lg p-4 space-y-3">
|
||||
<div className="flex items-center gap-2 text-sm font-medium text-red-700 dark:text-red-400">
|
||||
<AlertTriangle className="w-4 h-4" />
|
||||
Needs Attention
|
||||
</div>
|
||||
<p className="text-xs text-slate-500">
|
||||
<p className="text-xs text-slate-500 dark:text-slate-400">
|
||||
{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">
|
||||
<div className="w-6 h-6 bg-red-100 dark:bg-red-900/50 text-red-700 dark:text-red-300 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">
|
||||
<p className="text-xs font-medium text-slate-700 dark:text-slate-300 truncate group-hover:text-blue-600 dark:group-hover:text-blue-400">
|
||||
{c.firstName} {c.lastName}
|
||||
</p>
|
||||
<p className="text-xs text-slate-400">
|
||||
@@ -118,7 +152,7 @@ export default function DashboardPage() {
|
||||
</Link>
|
||||
))}
|
||||
{insights.staleClients.length > 3 && (
|
||||
<Link to="/clients" className="text-xs text-indigo-600 hover:text-indigo-700">
|
||||
<Link to="/clients" className="text-xs text-indigo-600 dark:text-indigo-400 hover:text-indigo-700">
|
||||
+{insights.staleClients.length - 3} more
|
||||
</Link>
|
||||
)}
|
||||
@@ -126,21 +160,20 @@ export default function DashboardPage() {
|
||||
</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">
|
||||
<div className="bg-white/80 dark:bg-slate-800/80 rounded-lg p-4 space-y-3">
|
||||
<div className="flex items-center gap-2 text-sm font-medium text-pink-700 dark:text-pink-400">
|
||||
<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 className="w-6 h-6 bg-pink-100 dark:bg-pink-900/50 text-pink-700 dark:text-pink-300 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">
|
||||
<p className="text-xs font-medium text-slate-700 dark:text-slate-300 truncate group-hover:text-blue-600 dark:group-hover:text-blue-400">
|
||||
{c.firstName} {c.lastName}
|
||||
</p>
|
||||
<p className="text-xs text-slate-400">
|
||||
@@ -153,24 +186,23 @@ export default function DashboardPage() {
|
||||
</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">
|
||||
<div className="bg-white/80 dark:bg-slate-800/80 rounded-lg p-4 space-y-3">
|
||||
<div className="flex items-center gap-2 text-sm font-medium text-amber-700 dark:text-amber-400">
|
||||
<PhoneForwarded className="w-4 h-4" />
|
||||
Suggested Follow-ups
|
||||
</div>
|
||||
<p className="text-xs text-slate-500">
|
||||
<p className="text-xs text-slate-500 dark:text-slate-400">
|
||||
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">
|
||||
<div className="w-6 h-6 bg-amber-100 dark:bg-amber-900/50 text-amber-700 dark:text-amber-300 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">
|
||||
<p className="text-xs font-medium text-slate-700 dark:text-slate-300 truncate group-hover:text-blue-600 dark:group-hover:text-blue-400">
|
||||
{c.firstName} {c.lastName}
|
||||
</p>
|
||||
<p className="text-xs text-slate-400">
|
||||
@@ -188,14 +220,14 @@ export default function DashboardPage() {
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
{/* Upcoming Events */}
|
||||
<div className="bg-white border border-slate-200 rounded-xl">
|
||||
<div className="flex items-center justify-between px-5 py-4 border-b border-slate-100">
|
||||
<h2 className="font-semibold text-slate-900">Upcoming Events</h2>
|
||||
<Link to="/events" className="text-sm text-blue-600 hover:text-blue-700 flex items-center gap-1">
|
||||
<div className="bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl">
|
||||
<div className="flex items-center justify-between px-5 py-4 border-b border-slate-100 dark:border-slate-700">
|
||||
<h2 className="font-semibold text-slate-900 dark:text-slate-100">Upcoming Events</h2>
|
||||
<Link to="/events" className="text-sm text-blue-600 dark:text-blue-400 hover:text-blue-700 flex items-center gap-1">
|
||||
View all <ArrowRight className="w-3.5 h-3.5" />
|
||||
</Link>
|
||||
</div>
|
||||
<div className="divide-y divide-slate-100">
|
||||
<div className="divide-y divide-slate-100 dark:divide-slate-700">
|
||||
{events.length === 0 ? (
|
||||
<p className="px-5 py-8 text-center text-sm text-slate-400">No upcoming events</p>
|
||||
) : (
|
||||
@@ -203,8 +235,8 @@ export default function DashboardPage() {
|
||||
<div key={event.id} className="flex items-center gap-3 px-5 py-3">
|
||||
{eventIcon(event.type)}
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm font-medium text-slate-900 truncate">{event.title}</p>
|
||||
<p className="text-xs text-slate-500">{formatDate(event.date)}</p>
|
||||
<p className="text-sm font-medium text-slate-900 dark:text-slate-100 truncate">{event.title}</p>
|
||||
<p className="text-xs text-slate-500 dark:text-slate-400">{formatDate(event.date)}</p>
|
||||
</div>
|
||||
<EventTypeBadge type={event.type} />
|
||||
<span className="text-xs text-slate-400 whitespace-nowrap">
|
||||
@@ -217,14 +249,14 @@ export default function DashboardPage() {
|
||||
</div>
|
||||
|
||||
{/* Recent Clients */}
|
||||
<div className="bg-white border border-slate-200 rounded-xl">
|
||||
<div className="flex items-center justify-between px-5 py-4 border-b border-slate-100">
|
||||
<h2 className="font-semibold text-slate-900">Recent Clients</h2>
|
||||
<Link to="/clients" className="text-sm text-blue-600 hover:text-blue-700 flex items-center gap-1">
|
||||
<div className="bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl">
|
||||
<div className="flex items-center justify-between px-5 py-4 border-b border-slate-100 dark:border-slate-700">
|
||||
<h2 className="font-semibold text-slate-900 dark:text-slate-100">Recent Clients</h2>
|
||||
<Link to="/clients" className="text-sm text-blue-600 dark:text-blue-400 hover:text-blue-700 flex items-center gap-1">
|
||||
View all <ArrowRight className="w-3.5 h-3.5" />
|
||||
</Link>
|
||||
</div>
|
||||
<div className="divide-y divide-slate-100">
|
||||
<div className="divide-y divide-slate-100 dark:divide-slate-700">
|
||||
{clients.length === 0 ? (
|
||||
<p className="px-5 py-8 text-center text-sm text-slate-400">No clients yet</p>
|
||||
) : (
|
||||
@@ -235,19 +267,30 @@ export default function DashboardPage() {
|
||||
<Link
|
||||
key={client.id}
|
||||
to={`/clients/${client.id}`}
|
||||
className="flex items-center gap-3 px-5 py-3 hover:bg-slate-50 transition-colors"
|
||||
className="flex items-center gap-3 px-5 py-3 hover:bg-slate-50 dark:hover:bg-slate-700/50 transition-colors"
|
||||
>
|
||||
<div className="w-9 h-9 bg-blue-100 text-blue-700 rounded-full flex items-center justify-center text-sm font-semibold flex-shrink-0">
|
||||
<div className="w-9 h-9 bg-blue-100 dark:bg-blue-900/50 text-blue-700 dark:text-blue-300 rounded-full flex items-center justify-center text-sm font-semibold flex-shrink-0">
|
||||
{client.firstName[0]}{client.lastName[0]}
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm font-medium text-slate-900 truncate">
|
||||
<p className="text-sm font-medium text-slate-900 dark:text-slate-100 truncate">
|
||||
{client.firstName} {client.lastName}
|
||||
</p>
|
||||
<p className="text-xs text-slate-500 truncate">
|
||||
<p className="text-xs text-slate-500 dark:text-slate-400 truncate">
|
||||
{client.company || client.email || 'No details'}
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
togglePin(client.id);
|
||||
}}
|
||||
className="p-1 rounded text-slate-300 hover:text-amber-500 transition-colors"
|
||||
title={isPinned(client.id) ? 'Unpin' : 'Pin to dashboard'}
|
||||
>
|
||||
<Star className={`w-4 h-4 ${isPinned(client.id) ? 'text-amber-500 fill-amber-500' : ''}`} />
|
||||
</button>
|
||||
</Link>
|
||||
))
|
||||
)}
|
||||
|
||||
@@ -28,41 +28,41 @@ export default function LoginPage() {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-blue-50 via-white to-slate-50 flex items-center justify-center p-4">
|
||||
<div className="min-h-screen bg-gradient-to-br from-blue-50 via-white to-slate-50 dark:from-slate-900 dark:via-slate-900 dark:to-slate-800 flex items-center justify-center p-4">
|
||||
<div className="w-full max-w-md">
|
||||
{/* Logo */}
|
||||
<div className="text-center mb-8">
|
||||
<div className="inline-flex items-center justify-center w-14 h-14 bg-blue-600 rounded-2xl mb-4">
|
||||
<Network className="w-8 h-8 text-white" />
|
||||
</div>
|
||||
<h1 className="text-2xl font-bold text-slate-900">NetworkCRM</h1>
|
||||
<p className="text-slate-500 mt-1">Sign in to manage your network</p>
|
||||
<h1 className="text-2xl font-bold text-slate-900 dark:text-slate-100">NetworkCRM</h1>
|
||||
<p className="text-slate-500 dark:text-slate-400 mt-1">Sign in to manage your network</p>
|
||||
</div>
|
||||
|
||||
{/* Card */}
|
||||
<div className="bg-white rounded-2xl shadow-sm border border-slate-200 p-8">
|
||||
<div className="bg-white dark:bg-slate-800 rounded-2xl shadow-sm border border-slate-200 dark:border-slate-700 p-8">
|
||||
<form onSubmit={handleSubmit} className="space-y-5">
|
||||
{error && (
|
||||
<div className="p-3 bg-red-50 border border-red-200 text-red-700 text-sm rounded-lg">
|
||||
<div className="p-3 bg-red-50 dark:bg-red-900/30 border border-red-200 dark:border-red-800 text-red-700 dark:text-red-300 text-sm rounded-lg">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-700 mb-1.5">Email</label>
|
||||
<label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1.5">Email</label>
|
||||
<input
|
||||
type="email"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
required
|
||||
className="w-full px-3.5 py-2.5 border border-slate-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-shadow"
|
||||
className="w-full px-3.5 py-2.5 border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-700 text-slate-900 dark:text-slate-100 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-shadow"
|
||||
placeholder="you@example.com"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div className="flex items-center justify-between mb-1.5">
|
||||
<label className="block text-sm font-medium text-slate-700">Password</label>
|
||||
<label className="block text-sm font-medium text-slate-700 dark:text-slate-300">Password</label>
|
||||
<Link
|
||||
to="/forgot-password"
|
||||
className="text-xs text-blue-600 hover:text-blue-700"
|
||||
@@ -76,7 +76,7 @@ export default function LoginPage() {
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
required
|
||||
className="w-full px-3.5 py-2.5 pr-10 border border-slate-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-shadow"
|
||||
className="w-full px-3.5 py-2.5 pr-10 border border-slate-300 dark:border-slate-600 bg-white dark:bg-slate-700 text-slate-900 dark:text-slate-100 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-shadow"
|
||||
placeholder="••••••••"
|
||||
/>
|
||||
<button
|
||||
|
||||
Reference in New Issue
Block a user