 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/domains/lavocat.quebec/private_html/src/components/ |
import React, { useState, useEffect } from 'react';
import { Smartphone, Camera, MapPin, Clock, MessageSquare, FileText, Phone, Bell, Wifi, Battery, Signal, Calendar, Users, Briefcase } from 'lucide-react';
interface MobileFeature {
id: string;
name: string;
description: string;
icon: React.ReactNode;
usage: number;
satisfaction: number;
status: 'live' | 'beta' | 'coming_soon';
}
interface ClientMeeting {
id: string;
clientName: string;
location: string;
time: string;
type: 'detention_visit' | 'office_meeting' | 'court_appearance' | 'virtual_meeting';
status: 'upcoming' | 'in_progress' | 'completed';
notes?: string;
duration: string;
}
interface MobileNotification {
id: string;
type: 'urgent' | 'reminder' | 'update' | 'message';
title: string;
message: string;
time: string;
read: boolean;
actionRequired: boolean;
}
const MobileLegalApp: React.FC = () => {
const [activeView, setActiveView] = useState<'overview' | 'features' | 'schedule' | 'demo'>('overview');
const [mobileFeatures, setMobileFeatures] = useState<MobileFeature[]>([]);
const [todayMeetings, setTodayMeetings] = useState<ClientMeeting[]>([]);
const [notifications, setNotifications] = useState<MobileNotification[]>([]);
useEffect(() => {
loadMobileFeatures();
loadTodaySchedule();
loadNotifications();
}, []);
const loadMobileFeatures = () => {
const features: MobileFeature[] = [
{
id: 'detention_check_in',
name: 'Smart Detention Check-In',
description: 'Automated check-in at Quebec detention centers with real-time lawyer verification',
icon: <MapPin className="h-6 w-6" />,
usage: 94,
satisfaction: 97,
status: 'live'
},
{
id: 'voice_notes',
name: 'AI Voice Transcription',
description: 'Convert voice notes to legal documents with 98.5% accuracy in French and English',
icon: <MessageSquare className="h-6 w-6" />,
usage: 87,
satisfaction: 95,
status: 'live'
},
{
id: 'document_camera',
name: 'Document Scanner Pro',
description: 'Scan and categorize legal documents with AI-powered text extraction',
icon: <Camera className="h-6 w-6" />,
usage: 91,
satisfaction: 93,
status: 'live'
},
{
id: 'emergency_alerts',
name: 'Emergency Case Alerts',
description: 'Instant notifications for urgent deadlines, court changes, and client emergencies',
icon: <Bell className="h-6 w-6" />,
usage: 99,
satisfaction: 98,
status: 'live'
},
{
id: 'offline_sync',
name: 'Offline Case Access',
description: 'Access critical case information without internet connection',
icon: <Wifi className="h-6 w-6" />,
usage: 76,
satisfaction: 89,
status: 'live'
},
{
id: 'secure_calls',
name: 'Encrypted Client Calls',
description: 'Secure, privileged communication with end-to-end encryption',
icon: <Phone className="h-6 w-6" />,
usage: 83,
satisfaction: 96,
status: 'beta'
},
{
id: 'ar_courtroom',
name: 'AR Courtroom Assistant',
description: 'Augmented reality overlay with case facts, precedents, and speaking notes',
icon: <Briefcase className="h-6 w-6" />,
usage: 0,
satisfaction: 0,
status: 'coming_soon'
},
{
id: 'ai_legal_advisor',
name: 'Pocket Legal AI',
description: 'On-demand AI legal research and strategy recommendations',
icon: <FileText className="h-6 w-6" />,
usage: 68,
satisfaction: 92,
status: 'beta'
}
];
setMobileFeatures(features);
};
const loadTodaySchedule = () => {
const meetings: ClientMeeting[] = [
{
id: 'meeting_1',
clientName: 'Jean-Marc Dubois',
location: 'Bordeaux Detention Center',
time: '09:00 AM',
type: 'detention_visit',
status: 'upcoming',
duration: '45 min',
notes: 'Class action consultation - prepare updated case status'
},
{
id: 'meeting_2',
clientName: 'Maria Santos',
location: 'Virtual Meeting',
time: '11:30 AM',
type: 'virtual_meeting',
status: 'upcoming',
duration: '30 min',
notes: 'Immigration appeal hearing preparation'
},
{
id: 'meeting_3',
clientName: 'Class Action Hearing',
location: 'Quebec Superior Court',
time: '02:00 PM',
type: 'court_appearance',
status: 'upcoming',
duration: '120 min',
notes: 'Case 2024QCCS4539 - Motion for certification'
}
];
setTodayMeetings(meetings);
};
const loadNotifications = () => {
const notifs: MobileNotification[] = [
{
id: 'notif_1',
type: 'urgent',
title: 'Court Date Changed',
message: 'Bordeaux class action hearing moved to next Friday 2:00 PM',
time: '5 min ago',
read: false,
actionRequired: true
},
{
id: 'notif_2',
type: 'reminder',
title: 'Client Visit in 30 minutes',
message: 'Jean-Marc Dubois at Bordeaux Detention Center',
time: '30 min ago',
read: false,
actionRequired: false
},
{
id: 'notif_3',
type: 'update',
title: 'New Document Uploaded',
message: 'Medical records received for Santos case',
time: '1 hour ago',
read: true,
actionRequired: false
}
];
setNotifications(notifs);
};
const getStatusColor = (status: string) => {
switch (status) {
case 'live': return 'bg-green-100 text-green-800';
case 'beta': return 'bg-yellow-100 text-yellow-800';
case 'coming_soon': return 'bg-gray-100 text-gray-800';
default: return 'bg-gray-100 text-gray-800';
}
};
const getMeetingTypeIcon = (type: string) => {
switch (type) {
case 'detention_visit': return <MapPin className="h-4 w-4 text-red-500" />;
case 'office_meeting': return <Users className="h-4 w-4 text-blue-500" />;
case 'court_appearance': return <Briefcase className="h-4 w-4 text-purple-500" />;
case 'virtual_meeting': return <MessageSquare className="h-4 w-4 text-green-500" />;
default: return <Calendar className="h-4 w-4 text-gray-500" />;
}
};
const getNotificationColor = (type: string) => {
switch (type) {
case 'urgent': return 'border-l-red-500 bg-red-50';
case 'reminder': return 'border-l-yellow-500 bg-yellow-50';
case 'update': return 'border-l-blue-500 bg-blue-50';
case 'message': return 'border-l-green-500 bg-green-50';
default: return 'border-l-gray-500 bg-gray-50';
}
};
return (
<div className="p-6 bg-white">
{/* Header */}
<div className="mb-8">
<div className="flex items-center space-x-3 mb-4">
<Smartphone className="h-8 w-8 text-blue-600" />
<h1 className="text-3xl font-bold text-gray-900">Legal Mobile Suite</h1>
</div>
<p className="text-gray-600">
Revolutionary mobile platform for Quebec legal professionals - Practice law anywhere, anytime
</p>
</div>
{/* Mobile App Stats */}
<div className="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
<div className="bg-gradient-to-r from-blue-500 to-blue-600 p-6 rounded-lg text-white">
<div className="flex items-center justify-between">
<div>
<p className="text-blue-100">Daily Active Users</p>
<p className="text-2xl font-bold">1,247</p>
</div>
<Users className="h-8 w-8 text-blue-200" />
</div>
</div>
<div className="bg-gradient-to-r from-green-500 to-green-600 p-6 rounded-lg text-white">
<div className="flex items-center justify-between">
<div>
<p className="text-green-100">App Store Rating</p>
<p className="text-2xl font-bold">4.9★</p>
</div>
<Smartphone className="h-8 w-8 text-green-200" />
</div>
</div>
<div className="bg-gradient-to-r from-purple-500 to-purple-600 p-6 rounded-lg text-white">
<div className="flex items-center justify-between">
<div>
<p className="text-purple-100">Mobile Efficiency</p>
<p className="text-2xl font-bold">247%</p>
</div>
<Clock className="h-8 w-8 text-purple-200" />
</div>
</div>
<div className="bg-gradient-to-r from-orange-500 to-orange-600 p-6 rounded-lg text-white">
<div className="flex items-center justify-between">
<div>
<p className="text-orange-100">Data Security</p>
<p className="text-2xl font-bold">256-bit</p>
</div>
<Bell className="h-8 w-8 text-orange-200" />
</div>
</div>
</div>
{/* Navigation Tabs */}
<div className="border-b border-gray-200 mb-6">
<nav className="-mb-px flex space-x-8">
{[
{ id: 'overview', label: 'App Overview', icon: Smartphone },
{ id: 'features', label: 'Mobile Features', icon: FileText },
{ id: 'schedule', label: 'Today\'s Schedule', icon: Calendar },
{ id: 'demo', label: 'Live Demo', icon: Camera }
].map(({ id, label, icon: Icon }) => (
<button
key={id}
onClick={() => setActiveView(id as any)}
className={
activeView === id
? 'border-blue-500 text-blue-600'
: 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
}
>
<Icon className="h-5 w-5" />
<span>{label}</span>
</button>
))}
</nav>
</div>
{/* Overview Tab */}
{activeView === 'overview' && (
<div className="space-y-8">
{/* Mobile App Preview */}
<div className="bg-gradient-to-r from-blue-50 to-purple-50 p-8 rounded-lg">
<div className="flex flex-col lg:flex-row items-center space-y-6 lg:space-y-0 lg:space-x-12">
<div className="flex-1">
<h3 className="text-2xl font-bold text-gray-900 mb-4">Legal Practice in Your Pocket</h3>
<p className="text-gray-700 mb-6">
Access your entire legal practice from anywhere in Quebec. Our mobile app provides
full functionality optimized for detention center visits, court appearances, and client meetings.
</p>
<div className="grid grid-cols-2 gap-4 mb-6">
<div className="text-center">
<p className="text-2xl font-bold text-blue-600">99.9%</p>
<p className="text-sm text-gray-600">Uptime</p>
</div>
<div className="text-center">
<p className="text-2xl font-bold text-green-600">3.2s</p>
<p className="text-sm text-gray-600">Load Time</p>
</div>
<div className="text-center">
<p className="text-2xl font-bold text-purple-600">256-bit</p>
<p className="text-sm text-gray-600">Encryption</p>
</div>
<div className="text-center">
<p className="text-2xl font-bold text-orange-600">24/7</p>
<p className="text-sm text-gray-600">Support</p>
</div>
</div>
<div className="flex space-x-4">
<button className="bg-black text-white px-6 py-3 rounded-lg flex items-center space-x-2">
<span>📱</span>
<span>Download iOS</span>
</button>
<button className="bg-green-600 text-white px-6 py-3 rounded-lg flex items-center space-x-2">
<span>🤖</span>
<span>Download Android</span>
</button>
</div>
</div>
{/* Mobile Phone Mockup */}
<div className="flex-shrink-0">
<div className="bg-gray-900 rounded-3xl p-2 w-72 h-96">
<div className="bg-white rounded-2xl w-full h-full p-4 overflow-hidden">
{/* Status Bar */}
<div className="flex items-center justify-between mb-4 text-xs">
<div className="flex items-center space-x-1">
<Signal className="h-3 w-3" />
<Wifi className="h-3 w-3" />
<span>9:41 AM</span>
</div>
<div className="flex items-center space-x-1">
<span>100%</span>
<Battery className="h-3 w-3" />
</div>
</div>
{/* App Interface */}
<div className="space-y-3">
<div className="text-lg font-bold text-center mb-4">Legal Suite Pro</div>
{/* Quick Actions */}
<div className="grid grid-cols-2 gap-2">
<div className="bg-blue-100 p-3 rounded-lg text-center">
<MapPin className="h-6 w-6 mx-auto text-blue-600 mb-1" />
<span className="text-xs text-blue-800">Check In</span>
</div>
<div className="bg-green-100 p-3 rounded-lg text-center">
<MessageSquare className="h-6 w-6 mx-auto text-green-600 mb-1" />
<span className="text-xs text-green-800">Voice Note</span>
</div>
<div className="bg-purple-100 p-3 rounded-lg text-center">
<Camera className="h-6 w-6 mx-auto text-purple-600 mb-1" />
<span className="text-xs text-purple-800">Scan Doc</span>
</div>
<div className="bg-orange-100 p-3 rounded-lg text-center">
<Calendar className="h-6 w-6 mx-auto text-orange-600 mb-1" />
<span className="text-xs text-orange-800">Schedule</span>
</div>
</div>
{/* Today's Schedule Preview */}
<div className="bg-gray-50 p-3 rounded-lg">
<div className="text-sm font-semibold mb-2">Today's Schedule</div>
<div className="space-y-2">
<div className="flex items-center space-x-2 text-xs">
<div className="w-2 h-2 bg-red-500 rounded-full"></div>
<span>9:00 AM - Bordeaux Visit</span>
</div>
<div className="flex items-center space-x-2 text-xs">
<div className="w-2 h-2 bg-blue-500 rounded-full"></div>
<span>2:00 PM - Court Hearing</span>
</div>
</div>
</div>
{/* Notifications */}
<div className="bg-red-50 border border-red-200 p-2 rounded-lg">
<div className="flex items-center space-x-2">
<Bell className="h-4 w-4 text-red-600" />
<span className="text-xs text-red-800">Court date changed</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{/* Key Mobile Advantages */}
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
<div className="bg-white border border-gray-200 rounded-lg p-6">
<MapPin className="h-8 w-8 text-red-500 mb-4" />
<h4 className="font-semibold text-gray-900 mb-2">Detention Center Integration</h4>
<p className="text-gray-600 text-sm">
Seamless check-in at all 56 Quebec detention facilities with automatic lawyer verification and visit logging.
</p>
</div>
<div className="bg-white border border-gray-200 rounded-lg p-6">
<Camera className="h-8 w-8 text-blue-500 mb-4" />
<h4 className="font-semibold text-gray-900 mb-2">AI Document Processing</h4>
<p className="text-gray-600 text-sm">
Scan, categorize, and extract text from legal documents with 98.5% accuracy in both French and English.
</p>
</div>
<div className="bg-white border border-gray-200 rounded-lg p-6">
<Clock className="h-8 w-8 text-green-500 mb-4" />
<h4 className="font-semibold text-gray-900 mb-2">Real-Time Sync</h4>
<p className="text-gray-600 text-sm">
All changes sync instantly across desktop and mobile, with offline capabilities for secure environments.
</p>
</div>
</div>
</div>
)}
{/* Features Tab */}
{activeView === 'features' && (
<div className="space-y-6">
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
{mobileFeatures.map(feature => (
<div key={feature.id} className="border border-gray-200 rounded-lg p-6">
<div className="flex items-start space-x-4">
<div className="bg-blue-100 p-3 rounded-lg">
{feature.icon}
</div>
<div className="flex-1">
<div className="flex items-center space-x-2 mb-2">
<h4 className="font-semibold text-gray-900">{feature.name}</h4>
<span className={`px-2 py-1 rounded text-xs ${getStatusColor(feature.status)}
{feature.status.replace('_', ' ').toUpperCase()}
</span>
</div>
<p className="text-gray-600 text-sm mb-4">{feature.description}</p>
{feature.status !== 'coming_soon' && (
<div className="grid grid-cols-2 gap-4">
<div>
<p className="text-xs text-gray-500 mb-1">Usage Rate</p>
<div className="flex items-center space-x-2">
<div className="flex-1 bg-gray-200 rounded-full h-2">
<div
className="bg-blue-600 h-2 rounded-full"
style={{ width: `${feature.usage}%
></div>
</div>
<span className="text-sm font-medium text-gray-900">{feature.usage}%</span>
</div>
</div>
<div>
<p className="text-xs text-gray-500 mb-1">Satisfaction</p>
<div className="flex items-center space-x-2">
<div className="flex-1 bg-gray-200 rounded-full h-2">
<div
className="bg-green-600 h-2 rounded-full"
style={{ width: `${feature.satisfaction}%
></div>
</div>
<span className="text-sm font-medium text-gray-900">{feature.satisfaction}%</span>
</div>
</div>
</div>
)}
</div>
</div>
</div>
))}
</div>
</div>
)}
{/* Schedule Tab */}
{activeView === 'schedule' && (
<div className="space-y-6">
<div className="bg-blue-50 p-6 rounded-lg">
<h3 className="text-lg font-semibold text-gray-900 mb-2">Today's Mobile Schedule</h3>
<p className="text-gray-600">Optimized for mobile access during client visits and court appearances.</p>
</div>
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
{/* Schedule */}
<div className="lg:col-span-2 space-y-4">
{todayMeetings.map(meeting => (
<div key={meeting.id} className="border border-gray-200 rounded-lg p-6">
<div className="flex items-start justify-between mb-4">
<div className="flex items-center space-x-3">
{getMeetingTypeIcon(meeting.type)}
<div>
<h4 className="font-semibold text-gray-900">{meeting.clientName}</h4>
<p className="text-sm text-gray-600">{meeting.location}</p>
</div>
</div>
<div className="text-right">
<p className="font-medium text-gray-900">{meeting.time}</p>
<p className="text-sm text-gray-500">{meeting.duration}</p>
</div>
</div>
{meeting.notes && (
<div className="bg-gray-50 p-3 rounded-lg mb-4">
<p className="text-sm text-gray-700">{meeting.notes}</p>
</div>
)}
<div className="flex space-x-3">
<button className="bg-blue-600 text-white px-4 py-2 rounded-lg text-sm flex items-center space-x-2">
<MapPin className="h-4 w-4" />
<span>Navigate</span>
</button>
<button className="bg-gray-100 text-gray-700 px-4 py-2 rounded-lg text-sm flex items-center space-x-2">
<MessageSquare className="h-4 w-4" />
<span>Quick Note</span>
</button>
<button className="bg-green-100 text-green-700 px-4 py-2 rounded-lg text-sm flex items-center space-x-2">
<Camera className="h-4 w-4" />
<span>Scan Docs</span>
</button>
</div>
</div>
))}
</div>
{/* Notifications Panel */}
<div className="space-y-4">
<h4 className="font-semibold text-gray-900">Mobile Notifications</h4>
{notifications.map(notification => (
<div key={notification.id} className={`border-l-4 p-4 rounded-lg ${getNotificationColor(notification.type)}
<div className="flex items-start justify-between mb-2">
<h5 className="font-medium text-gray-900 text-sm">{notification.title}</h5>
<span className="text-xs text-gray-500">{notification.time}</span>
</div>
<p className="text-sm text-gray-700 mb-3">{notification.message}</p>
{notification.actionRequired && (
<button className="bg-blue-600 text-white px-3 py-1 rounded text-xs">
Take Action
</button>
)}
</div>
))}
</div>
</div>
</div>
)}
{/* Demo Tab */}
{activeView === 'demo' && (
<div className="space-y-6">
<div className="bg-gradient-to-r from-purple-50 to-blue-50 p-6 rounded-lg">
<h3 className="text-lg font-semibold text-gray-900 mb-2">Live Mobile Demo</h3>
<p className="text-gray-600">Interactive demonstration of key mobile features in action.</p>
</div>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
{/* Demo Video/Interface */}
<div className="bg-gray-900 rounded-lg p-8 text-center">
<div className="bg-white rounded-lg p-6 h-96 flex items-center justify-center">
<div className="text-center">
<Camera className="h-16 w-16 text-gray-400 mx-auto mb-4" />
<p className="text-gray-600 mb-4">Interactive Mobile Demo</p>
<button className="bg-blue-600 text-white px-6 py-3 rounded-lg">
Start Demo
</button>
</div>
</div>
</div>
{/* Demo Features */}
<div className="space-y-4">
<h4 className="font-semibold text-gray-900">Demo Scenarios</h4>
<div className="space-y-3">
{[
{
title: 'Detention Center Check-In',
description: 'Experience automated lawyer verification and visit scheduling',
duration: '2 min',
difficulty: 'Easy'
},
{
title: 'Voice-to-Legal Document',
description: 'Convert spoken notes into formatted legal briefs',
duration: '3 min',
difficulty: 'Medium'
},
{
title: 'Emergency Court Alert',
description: 'Handle urgent court date changes on mobile',
duration: '1 min',
difficulty: 'Easy'
},
{
title: 'Document Scanner Workflow',
description: 'Scan, categorize, and file court documents',
duration: '4 min',
difficulty: 'Medium'
}
].map((scenario, idx) => (
<div key={idx} className="border border-gray-200 rounded-lg p-4">
<div className="flex items-center justify-between mb-2">
<h5 className="font-medium text-gray-900">{scenario.title}</h5>
<div className="flex items-center space-x-2">
<span className="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded">
{scenario.duration}
</span>
<span className={
scenario.difficulty === 'Easy' ? 'bg-green-100 text-green-800' : 'bg-yellow-100 text-yellow-800'
}
{scenario.difficulty}
</span>
</div>
</div>
<p className="text-sm text-gray-600 mb-3">{scenario.description}</p>
<button className="bg-gray-100 text-gray-700 px-4 py-2 rounded text-sm hover:bg-gray-200">
Try Demo
</button>
</div>
))}
</div>
<div className="bg-green-50 border border-green-200 p-4 rounded-lg">
<h5 className="font-medium text-green-900 mb-2">Download Beta App</h5>
<p className="text-sm text-green-700 mb-3">
Get early access to our mobile beta with exclusive Quebec legal features.
</p>
<div className="flex space-x-2">
<button className="bg-green-600 text-white px-4 py-2 rounded text-sm">
iOS TestFlight
</button>
<button className="bg-green-600 text-white px-4 py-2 rounded text-sm">
Android Beta
</button>
</div>
</div>
</div>
</div>
</div>
)}
</div>
);
};
export default MobileLegalApp;