 Server : Apache/2 System : Linux server-15-235-50-60 5.15.0-164-generic #174-Ubuntu SMP Fri Nov 14 20:25:16 UTC 2025 x86_64 User : gositeme ( 1004) PHP Version : 8.2.29 Disable Function : exec,system,passthru,shell_exec,proc_close,proc_open,dl,popen,show_source,posix_kill,posix_mkfifo,posix_getpwuid,posix_setpgid,posix_setsid,posix_setuid,posix_setgid,posix_seteuid,posix_setegid,posix_uname Directory : /home/gositeme/backups/lavocat.quebec/backup-20250730-021618/src/pages/notary/ |
import React, { useState, useEffect } from 'react';
import { useRouter } from 'next/router';
import { useSession } from 'next-auth/react';
import {
Stamp,
User,
FileText,
CheckCircle,
AlertCircle,
Calendar,
Users,
Shield,
TrendingUp,
Plus,
Search,
Filter,
Download,
Upload,
MessageSquare,
Phone,
Mail,
Settings,
BarChart3,
ClipboardList,
CalendarDays,
UserCheck,
FileCheck,
HelpCircle,
Zap,
Target,
Award,
Star,
Activity,
Bell,
ChevronRight,
ExternalLink,
MoreHorizontal,
Clock,
} from 'lucide-react';
interface NotarialService {
id: string;
title: string;
description: string;
status: 'pending' | 'in-progress' | 'completed' | 'cancelled';
clientName: string;
serviceType: string;
scheduledDate: string;
priority: 'low' | 'medium' | 'high' | 'urgent';
}
interface Document {
id: string;
title: string;
type: string;
status: 'pending' | 'authenticated' | 'rejected' | 'archived';
clientName: string;
submissionDate: string;
authenticationDate?: string;
}
interface RecentActivity {
id: string;
type: 'service' | 'document' | 'compliance' | 'appointment';
title: string;
description: string;
timestamp: string;
status: string;
}
interface TodaySchedule {
id: string;
time: string;
title: string;
type: 'appointment' | 'service' | 'compliance' | 'training';
status: 'upcoming' | 'in-progress' | 'completed';
clientName: string;
}
const NotaryDashboard: React.FC = () => {
const { data: session, status } = useSession();
const router = useRouter();
const [isLoading, setIsLoading] = useState(true);
// Mock data - replace with actual API calls
const [stats] = useState({
totalServices: 156,
completedServices: 142,
pendingServices: 14,
documentsAuthenticated: 89,
complianceScore: 98,
clientSatisfaction: 96,
appointmentsToday: 8,
revenueThisMonth: 12450
});
const [services] = useState<NotarialService[]>([
{
id: '1',
title: 'Power of Attorney Authentication',
description: 'Notarization of power of attorney document for estate planning',
status: 'in-progress',
clientName: 'John Smith',
serviceType: 'Document Authentication',
scheduledDate: '2025-01-27',
priority: 'high'
},
{
id: '2',
title: 'Contract Notarization',
description: 'Business contract notarization for real estate transaction',
status: 'pending',
clientName: 'Sarah Johnson',
serviceType: 'Contract Notarization',
scheduledDate: '2025-01-28',
priority: 'medium'
},
{
id: '3',
title: 'Affidavit Authentication',
description: 'Sworn statement authentication for legal proceedings',
status: 'completed',
clientName: 'Michael Brown',
serviceType: 'Affidavit',
scheduledDate: '2025-01-26',
priority: 'low'
}
]);
const [documents] = useState<Document[]>([
{
id: '1',
title: 'Power of Attorney Document',
type: 'Legal Document',
status: 'authenticated',
clientName: 'John Smith',
submissionDate: '2025-01-27',
authenticationDate: '2025-01-27'
},
{
id: '2',
title: 'Business Contract',
type: 'Contract',
status: 'pending',
clientName: 'Sarah Johnson',
submissionDate: '2025-01-27'
},
{
id: '3',
title: 'Affidavit Statement',
type: 'Affidavit',
status: 'authenticated',
clientName: 'Michael Brown',
submissionDate: '2025-01-26',
authenticationDate: '2025-01-26'
}
]);
const [recentActivity] = useState<RecentActivity[]>([
{
id: '1',
type: 'service',
title: 'Completed Power of Attorney Authentication',
description: 'Successfully authenticated power of attorney document',
timestamp: '2 hours ago',
status: 'completed'
},
{
id: '2',
type: 'document',
title: 'New Document Submission',
description: 'Received business contract for authentication',
timestamp: '4 hours ago',
status: 'pending'
},
{
id: '3',
type: 'compliance',
title: 'Compliance Review Completed',
description: 'Monthly compliance audit completed successfully',
timestamp: '1 day ago',
status: 'completed'
}
]);
const [todaySchedule] = useState<TodaySchedule[]>([
{
id: '1',
time: '09:00',
title: 'Power of Attorney Authentication',
type: 'service',
status: 'completed',
clientName: 'John Smith'
},
{
id: '2',
time: '11:00',
title: 'Contract Notarization',
type: 'service',
status: 'in-progress',
clientName: 'Sarah Johnson'
},
{
id: '3',
time: '14:00',
title: 'Compliance Training',
type: 'training',
status: 'upcoming',
clientName: 'N/A'
},
{
id: '4',
time: '16:00',
title: 'Document Review',
type: 'service',
status: 'upcoming',
clientName: 'Michael Brown'
}
]);
useEffect(() => {
if (status === 'loading') return;
if (!session) {
router.push('/auth/login');
return;
}
// Check if user has notary role
if (session.user?.role !== 'NOTARY') {
router.push('/unauthorized');
return;
}
setIsLoading(false);
}, [session, status, router]);
const getStatusColor = (status: string) => {
switch (status) {
case 'completed': return 'text-green-600 bg-green-50';
case 'in-progress': return 'text-blue-600 bg-blue-50';
case 'pending': return 'text-yellow-600 bg-yellow-50';
case 'cancelled': return 'text-red-600 bg-red-50';
case 'authenticated': return 'text-green-600 bg-green-50';
case 'rejected': return 'text-red-600 bg-red-50';
case 'archived': return 'text-gray-600 bg-gray-50';
default: return 'text-gray-600 bg-gray-50';
}
};
const getPriorityColor = (priority: string) => {
switch (priority) {
case 'urgent': return 'text-red-600 bg-red-50';
case 'high': return 'text-orange-600 bg-orange-50';
case 'medium': return 'text-yellow-600 bg-yellow-50';
case 'low': return 'text-green-600 bg-green-50';
default: return 'text-gray-600 bg-gray-50';
}
};
const getScheduleStatusColor = (status: string) => {
switch (status) {
case 'completed': return 'text-green-600';
case 'in-progress': return 'text-blue-600';
case 'upcoming': return 'text-gray-600';
default: return 'text-gray-600';
}
};
const getScheduleTypeIcon = (type: string) => {
switch (type) {
case 'appointment': return <Calendar className="w-4 h-4" />;
case 'service': return <Stamp className="w-4 h-4" />;
case 'compliance': return <Shield className="w-4 h-4" />;
case 'training': return <Award className="w-4 h-4" />;
default: return <Calendar className="w-4 h-4" />;
}
};
if (isLoading) {
return (
<div className="min-h-screen bg-gray-50 flex items-center justify-center">
<div className="text-center">
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto"></div>
<p className="mt-4 text-gray-600">Loading your dashboard...</p>
</div>
</div>
);
}
return (
<div className="min-h-screen bg-gray-50">
{/* Header */}
<div className="bg-white shadow-sm border-b">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="flex justify-between items-center py-6">
<div>
<h1 className="text-3xl font-bold text-gray-900">Notary Dashboard</h1>
<p className="mt-1 text-sm text-gray-500">
Welcome back, {session?.user?.name || 'Notary'}. Here's your notarial services overview.
</p>
</div>
<div className="flex items-center space-x-4">
<button className="p-2 text-gray-400 hover:text-gray-600">
<Bell className="w-5 h-5" />
</button>
<div className="w-8 h-8 bg-blue-600 rounded-full flex items-center justify-center">
<span className="text-white text-sm font-medium">
{session?.user?.name?.charAt(0) || 'N'}
</span>
</div>
</div>
</div>
</div>
</div>
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
{/* Welcome Section */}
<div className="bg-gradient-to-r from-blue-600 to-green-600 rounded-lg shadow-lg p-6 mb-8">
<div className="flex items-center justify-between">
<div className="text-white">
<h2 className="text-2xl font-bold mb-2">Notarial Excellence</h2>
<p className="text-blue-100">
Your compliance score is {stats.complianceScore}% - Maintaining the highest standards of notarial practice!
</p>
</div>
<div className="hidden md:block">
<div className="w-16 h-16 bg-white bg-opacity-20 rounded-full flex items-center justify-center">
<Stamp className="w-8 h-8 text-white" />
</div>
</div>
</div>
</div>
{/* Stats Grid */}
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
<div className="bg-white rounded-lg shadow p-6">
<div className="flex items-center">
<div className="p-2 bg-blue-100 rounded-lg">
<Stamp className="w-6 h-6 text-blue-600" />
</div>
<div className="ml-4">
<p className="text-sm font-medium text-gray-600">Total Services</p>
<p className="text-2xl font-bold text-gray-900">{stats.totalServices}</p>
</div>
</div>
</div>
<div className="bg-white rounded-lg shadow p-6">
<div className="flex items-center">
<div className="p-2 bg-green-100 rounded-lg">
<CheckCircle className="w-6 h-6 text-green-600" />
</div>
<div className="ml-4">
<p className="text-sm font-medium text-gray-600">Completed</p>
<p className="text-2xl font-bold text-gray-900">{stats.completedServices}</p>
</div>
</div>
</div>
<div className="bg-white rounded-lg shadow p-6">
<div className="flex items-center">
<div className="p-2 bg-orange-100 rounded-lg">
<FileText className="w-6 h-6 text-orange-600" />
</div>
<div className="ml-4">
<p className="text-sm font-medium text-gray-600">Documents Authenticated</p>
<p className="text-2xl font-bold text-gray-900">{stats.documentsAuthenticated}</p>
</div>
</div>
</div>
<div className="bg-white rounded-lg shadow p-6">
<div className="flex items-center">
<div className="p-2 bg-purple-100 rounded-lg">
<Shield className="w-6 h-6 text-purple-600" />
</div>
<div className="ml-4">
<p className="text-sm font-medium text-gray-600">Compliance Score</p>
<p className="text-2xl font-bold text-gray-900">{stats.complianceScore}%</p>
</div>
</div>
</div>
</div>
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
{/* Quick Actions */}
<div className="lg:col-span-1">
<div className="bg-white rounded-lg shadow p-6">
<h3 className="text-lg font-semibold text-gray-900 mb-4">Quick Actions</h3>
<div className="space-y-3">
<button className="w-full flex items-center justify-between p-3 text-left bg-blue-50 hover:bg-blue-100 rounded-lg transition-colors">
<div className="flex items-center">
<Plus className="w-5 h-5 text-blue-600 mr-3" />
<span className="font-medium text-gray-900">Schedule Service</span>
</div>
<ChevronRight className="w-4 h-4 text-gray-400" />
</button>
<button className="w-full flex items-center justify-between p-3 text-left bg-green-50 hover:bg-green-100 rounded-lg transition-colors">
<div className="flex items-center">
<FileText className="w-5 h-5 text-green-600 mr-3" />
<span className="font-medium text-gray-900">Authenticate Document</span>
</div>
<ChevronRight className="w-4 h-4 text-gray-400" />
</button>
<button className="w-full flex items-center justify-between p-3 text-left bg-purple-50 hover:bg-purple-100 rounded-lg transition-colors">
<div className="flex items-center">
<Shield className="w-5 h-5 text-purple-600 mr-3" />
<span className="font-medium text-gray-900">Compliance Review</span>
</div>
<ChevronRight className="w-4 h-4 text-gray-400" />
</button>
<button className="w-full flex items-center justify-between p-3 text-left bg-orange-50 hover:bg-orange-100 rounded-lg transition-colors">
<div className="flex items-center">
<Calendar className="w-5 h-5 text-orange-600 mr-3" />
<span className="font-medium text-gray-900">Manage Appointments</span>
</div>
<ChevronRight className="w-4 h-4 text-gray-400" />
</button>
</div>
</div>
{/* Navigation Cards */}
<div className="bg-white rounded-lg shadow p-6 mt-6">
<h3 className="text-lg font-semibold text-gray-900 mb-4">Quick Navigation</h3>
<div className="grid grid-cols-2 gap-3">
<button
onClick={() => router.push('/notary/profile')}
className="p-3 text-center bg-gray-50 hover:bg-gray-100 rounded-lg transition-colors"
>
<User className="w-6 h-6 text-blue-600 mx-auto mb-2" />
<span className="text-sm font-medium text-gray-900">Profile</span>
</button>
<button className="p-3 text-center bg-gray-50 hover:bg-gray-100 rounded-lg transition-colors">
<Stamp className="w-6 h-6 text-green-600 mx-auto mb-2" />
<span className="text-sm font-medium text-gray-900">Services</span>
</button>
<button className="p-3 text-center bg-gray-50 hover:bg-gray-100 rounded-lg transition-colors">
<FileText className="w-6 h-6 text-purple-600 mx-auto mb-2" />
<span className="text-sm font-medium text-gray-900">Documents</span>
</button>
<button className="p-3 text-center bg-gray-50 hover:bg-gray-100 rounded-lg transition-colors">
<Shield className="w-6 h-6 text-orange-600 mx-auto mb-2" />
<span className="text-sm font-medium text-gray-900">Compliance</span>
</button>
<button className="p-3 text-center bg-gray-50 hover:bg-gray-100 rounded-lg transition-colors">
<Calendar className="w-6 h-6 text-gray-600 mx-auto mb-2" />
<span className="text-sm font-medium text-gray-900">Appointments</span>
</button>
<button className="p-3 text-center bg-gray-50 hover:bg-gray-100 rounded-lg transition-colors">
<BarChart3 className="w-6 h-6 text-gray-600 mx-auto mb-2" />
<span className="text-sm font-medium text-gray-900">Reports</span>
</button>
<button className="p-3 text-center bg-gray-50 hover:bg-gray-100 rounded-lg transition-colors">
<Settings className="w-6 h-6 text-gray-600 mx-auto mb-2" />
<span className="text-sm font-medium text-gray-900">Settings</span>
</button>
</div>
</div>
</div>
{/* Main Content */}
<div className="lg:col-span-2 space-y-6">
{/* Recent Services */}
<div className="bg-white rounded-lg shadow">
<div className="p-6 border-b border-gray-200">
<div className="flex items-center justify-between">
<h3 className="text-lg font-semibold text-gray-900">Recent Services</h3>
<button className="text-blue-600 hover:text-blue-700 text-sm font-medium">
View All
</button>
</div>
</div>
<div className="p-6">
<div className="space-y-4">
{services.map((service) => (
<div key={service.id} className="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
<div className="flex-1">
<div className="flex items-center space-x-3">
<h4 className="font-medium text-gray-900">{service.title}</h4>
<span className={`px-2 py-1 text-xs font-medium rounded-full ${getStatusColor(service.status)}`}>
{service.status}
</span>
<span className={`px-2 py-1 text-xs font-medium rounded-full ${getPriorityColor(service.priority)}`}>
{service.priority}
</span>
</div>
<p className="text-sm text-gray-600 mt-1">{service.description}</p>
<div className="flex items-center space-x-4 mt-2 text-xs text-gray-500">
<span>Client: {service.clientName}</span>
<span>Type: {service.serviceType}</span>
<span>Scheduled: {service.scheduledDate}</span>
</div>
</div>
<button className="p-2 text-gray-400 hover:text-gray-600">
<MoreHorizontal className="w-4 h-4" />
</button>
</div>
))}
</div>
</div>
</div>
{/* Today's Schedule */}
<div className="bg-white rounded-lg shadow">
<div className="p-6 border-b border-gray-200">
<h3 className="text-lg font-semibold text-gray-900">Today's Schedule</h3>
</div>
<div className="p-6">
<div className="space-y-4">
{todaySchedule.map((item) => (
<div key={item.id} className="flex items-center space-x-4">
<div className={`w-12 text-center ${getScheduleStatusColor(item.status)}`}>
<span className="text-sm font-medium">{item.time}</span>
</div>
<div className={`p-2 rounded-lg ${getScheduleStatusColor(item.status)} bg-opacity-10`}>
{getScheduleTypeIcon(item.type)}
</div>
<div className="flex-1">
<h4 className="font-medium text-gray-900">{item.title}</h4>
<p className={`text-sm ${getScheduleStatusColor(item.status)}`}>
{item.status.charAt(0).toUpperCase() + item.status.slice(1)}
</p>
{item.clientName !== 'N/A' && (
<p className="text-xs text-gray-500">Client: {item.clientName}</p>
)}
</div>
</div>
))}
</div>
</div>
</div>
{/* Recent Activity */}
<div className="bg-white rounded-lg shadow">
<div className="p-6 border-b border-gray-200">
<h3 className="text-lg font-semibold text-gray-900">Recent Activity</h3>
</div>
<div className="p-6">
<div className="space-y-4">
{recentActivity.map((activity) => (
<div key={activity.id} className="flex items-start space-x-3">
<div className="p-2 bg-blue-100 rounded-lg">
{activity.type === 'service' && <Stamp className="w-4 h-4 text-blue-600" />}
{activity.type === 'document' && <FileText className="w-4 h-4 text-green-600" />}
{activity.type === 'compliance' && <Shield className="w-4 h-4 text-purple-600" />}
{activity.type === 'appointment' && <Calendar className="w-4 h-4 text-orange-600" />}
</div>
<div className="flex-1">
<h4 className="font-medium text-gray-900">{activity.title}</h4>
<p className="text-sm text-gray-600">{activity.description}</p>
<p className="text-xs text-gray-500 mt-1">{activity.timestamp}</p>
</div>
</div>
))}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
);
};
export default NotaryDashboard;