 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 { Workflow, FileText, Clock, DollarSign, Users, Calendar, Bell, CheckCircle, AlertTriangle, ArrowRight, Brain, Zap, Target, TrendingUp, Database, Shield } from 'lucide-react';
interface WorkflowTemplate {
id: string;
name: string;
category: 'litigation' | 'immigration' | 'detention' | 'family' | 'corporate' | 'criminal';
description: string;
estimatedDuration: string;
complexity: 'simple' | 'moderate' | 'complex';
steps: WorkflowStep[];
triggers: string[];
courtRules: string[];
documents: string[];
billingStructure: {
type: 'hourly' | 'flat_fee' | 'contingency';
rate?: number;
estimatedHours?: number;
milestones?: { name: string; percentage: number }[];
};
}
interface WorkflowStep {
id: string;
name: string;
type: 'task' | 'deadline' | 'meeting' | 'document' | 'filing' | 'notification';
description: string;
daysFromStart: number;
assignedTo: string;
dependencies: string[];
isOptional: boolean;
courtRule?: string;
estimatedHours?: number;
documents: string[];
notifications: {
type: 'client' | 'team' | 'court' | 'opposing_counsel';
template: string;
timing: string;
}[];
}
interface ActiveWorkflow {
id: string;
templateId: string;
caseId: string;
caseName: string;
clientName: string;
startDate: string;
currentStep: number;
status: 'active' | 'on_hold' | 'completed' | 'cancelled';
completedSteps: string[];
upcomingDeadlines: {
stepId: string;
deadline: string;
priority: 'low' | 'medium' | 'high' | 'critical';
}[];
billingTracking: {
budgetedHours: number;
actualHours: number;
billedAmount: number;
unbilledHours: number;
};
}
const LegalWorkflowEngine: React.FC = () => {
const [activeTab, setActiveTab] = useState<'dashboard' | 'templates' | 'active' | 'analytics'>('dashboard');
const [workflowTemplates, setWorkflowTemplates] = useState<WorkflowTemplate[]>([]);
const [activeWorkflows, setActiveWorkflows] = useState<ActiveWorkflow[]>([]);
const [selectedTemplate, setSelectedTemplate] = useState<WorkflowTemplate | null>(null);
useEffect(() => {
loadWorkflowTemplates();
loadActiveWorkflows();
}, []);
const loadWorkflowTemplates = () => {
const templates: WorkflowTemplate[] = [
{
id: 'tpl_detention_class_action',
name: 'Detention Conditions Class Action',
category: 'detention',
description: 'Comprehensive workflow for detention center class action lawsuits including evidence gathering, expert testimony, and injunctive relief',
estimatedDuration: '18-24 months',
complexity: 'complex',
triggers: ['new_detention_case', 'class_certification'],
courtRules: ['Rule 23 Class Actions', 'Quebec Class Action Rules', 'Federal Court Rules'],
documents: ['Class Action Petition', 'Expert Reports', 'Evidence Package', 'Motion for Injunction'],
billingStructure: {
type: 'contingency',
milestones: [
{ name: 'Case Filing', percentage: 10 },
{ name: 'Class Certification', percentage: 25 },
{ name: 'Discovery Complete', percentage: 40 },
{ name: 'Settlement/Trial', percentage: 100 }
]
},
steps: [
{
id: 'step_001',
name: 'Initial Case Assessment',
type: 'task',
description: 'Comprehensive assessment of detention conditions and potential plaintiffs',
daysFromStart: 0,
assignedTo: 'lead_counsel',
dependencies: [],
isOptional: false,
estimatedHours: 8,
documents: ['Intake Forms', 'Detention Records', 'Medical Reports'],
notifications: [
{ type: 'client', template: 'case_initiation', timing: 'immediate' },
{ type: 'team', template: 'case_assignment', timing: 'immediate' }
]
},
{
id: 'step_002',
name: 'File Class Action Petition',
type: 'filing',
description: 'Prepare and file comprehensive class action petition with supporting evidence',
daysFromStart: 30,
assignedTo: 'lead_counsel',
dependencies: ['step_001'],
isOptional: false,
courtRule: 'Rule 23(a) Class Action Requirements',
estimatedHours: 24,
documents: ['Class Action Petition', 'Supporting Affidavits', 'Evidence Exhibits'],
notifications: [
{ type: 'court', template: 'filing_notification', timing: 'immediate' },
{ type: 'client', template: 'filing_confirmation', timing: '24h' }
]
},
{
id: 'step_003',
name: 'Motion for Preliminary Injunction',
type: 'filing',
description: 'File emergency motion for preliminary injunction to address immediate conditions',
daysFromStart: 45,
assignedTo: 'lead_counsel',
dependencies: ['step_002'],
isOptional: false,
courtRule: 'Rule 65 Preliminary Injunctions',
estimatedHours: 20,
documents: ['Injunction Motion', 'Emergency Affidavits', 'Proposed Order'],
notifications: [
{ type: 'court', template: 'emergency_motion', timing: 'immediate' },
{ type: 'opposing_counsel', template: 'motion_notice', timing: 'immediate' }
]
}
]
},
{
id: 'tpl_immigration_detention',
name: 'Immigration Detention Defense',
category: 'immigration',
description: 'Standard workflow for immigration detention cases including bond hearings and asylum applications',
estimatedDuration: '6-12 months',
complexity: 'moderate',
triggers: ['immigration_detention', 'asylum_case'],
courtRules: ['Immigration Court Rules', 'IRCA Procedures'],
documents: ['Bond Motion', 'Asylum Application', 'Country Condition Evidence'],
billingStructure: {
type: 'flat_fee',
rate: 3500,
estimatedHours: 40
},
steps: [
{
id: 'imm_001',
name: 'Detention Center Visit',
type: 'meeting',
description: 'Initial client interview at detention facility',
daysFromStart: 1,
assignedTo: 'immigration_counsel',
dependencies: [],
isOptional: false,
estimatedHours: 3,
documents: ['G-28 Form', 'Client Questionnaire'],
notifications: [
{ type: 'client', template: 'visit_scheduled', timing: '24h' }
]
}
]
},
{
id: 'tpl_family_law',
name: 'Family Law Case Management',
category: 'family',
description: 'Comprehensive family law workflow covering custody, support, and property division',
estimatedDuration: '8-15 months',
complexity: 'moderate',
triggers: ['divorce_filing', 'custody_dispute'],
courtRules: ['Family Court Rules', 'Child Support Guidelines'],
documents: ['Divorce Petition', 'Financial Affidavit', 'Parenting Plan'],
billingStructure: {
type: 'hourly',
rate: 450,
estimatedHours: 60
},
steps: [
{
id: 'fam_001',
name: 'Initial Consultation',
type: 'meeting',
description: 'Comprehensive family law consultation and case assessment',
daysFromStart: 0,
assignedTo: 'family_counsel',
dependencies: [],
isOptional: false,
estimatedHours: 2,
documents: ['Intake Form', 'Asset Inventory'],
notifications: [
{ type: 'client', template: 'consultation_confirmation', timing: '24h' }
]
}
]
}
];
setWorkflowTemplates(templates);
};
const loadActiveWorkflows = () => {
const active: ActiveWorkflow[] = [
{
id: 'wf_001',
templateId: 'tpl_detention_class_action',
caseId: 'case_bordeaux_2024',
caseName: 'Bordeaux Detention Center Class Action',
clientName: 'Multiple Detainees',
startDate: '2024-12-01',
currentStep: 2,
status: 'active',
completedSteps: ['step_001', 'step_002'],
upcomingDeadlines: [
{
stepId: 'step_003',
deadline: '2025-03-15',
priority: 'critical'
}
],
billingTracking: {
budgetedHours: 200,
actualHours: 156,
billedAmount: 98400,
unbilledHours: 24
}
},
{
id: 'wf_002',
templateId: 'tpl_immigration_detention',
caseId: 'case_imm_001',
caseName: 'Rodriguez Immigration Case',
clientName: 'Maria Rodriguez',
startDate: '2025-02-15',
currentStep: 1,
status: 'active',
completedSteps: ['imm_001'],
upcomingDeadlines: [
{
stepId: 'imm_002',
deadline: '2025-03-01',
priority: 'high'
}
],
billingTracking: {
budgetedHours: 40,
actualHours: 12,
billedAmount: 0,
unbilledHours: 12
}
}
];
setActiveWorkflows(active);
};
const categoryColors = {
litigation: 'bg-red-100 text-red-800',
immigration: 'bg-blue-100 text-blue-800',
detention: 'bg-purple-100 text-purple-800',
family: 'bg-green-100 text-green-800',
corporate: 'bg-yellow-100 text-yellow-800',
criminal: 'bg-gray-100 text-gray-800'
};
const complexityColors = {
simple: 'bg-green-100 text-green-800',
moderate: 'bg-yellow-100 text-yellow-800',
complex: 'bg-red-100 text-red-800'
};
const priorityColors = {
low: 'bg-green-100 text-green-800',
medium: 'bg-yellow-100 text-yellow-800',
high: 'bg-orange-100 text-orange-800',
critical: 'bg-red-100 text-red-800'
};
return (
<div className="min-h-screen bg-gradient-to-br from-blue-50 via-purple-50 to-indigo-50 p-6">
{/* Header */}
<div className="mb-8">
<div className="flex items-center justify-between">
<div className="flex items-center space-x-4">
<div className="p-3 bg-gradient-to-r from-purple-600 to-blue-600 rounded-xl">
<Workflow className="h-8 w-8 text-white" />
</div>
<div>
<h1 className="text-3xl font-bold bg-gradient-to-r from-purple-600 to-blue-600 bg-clip-text text-transparent">
⚡ LegalFlow Pro Engine
</h1>
<p className="text-gray-600 flex items-center space-x-2">
<Brain className="h-4 w-4" />
<span>AI-Powered Legal Workflow Automation & Case Management</span>
</p>
</div>
</div>
<div className="flex items-center space-x-4">
<button className="flex items-center space-x-2 px-4 py-2 bg-gradient-to-r from-green-600 to-emerald-600 text-white rounded-lg font-medium hover:shadow-lg transition-all">
<Zap className="h-4 w-4" />
<span>Create Workflow</span>
</button>
</div>
</div>
</div>
{/* Navigation Tabs */}
<div className="mb-6">
<div className="flex space-x-1 bg-white rounded-lg p-1 shadow-md">
{[
{ id: 'dashboard', label: 'Dashboard', icon: Target },
{ id: 'templates', label: 'Templates', icon: FileText },
{ id: 'active', label: 'Active Workflows', icon: Workflow },
{ id: 'analytics', label: 'Analytics', icon: TrendingUp }
].map((tab) => {
const IconComponent = tab.icon;
return (
<button
key={tab.id}
onClick={() => setActiveTab(tab.id as any)}
className={
activeTab === tab.id
? 'bg-purple-600 text-white shadow-md'
: 'text-gray-600 hover:text-purple-600 hover:bg-gray-50'
}
>
<IconComponent className="h-4 w-4" />
<span>{tab.label}</span>
</button>
);
})}
</div>
</div>
{/* Dashboard View */}
{activeTab === 'dashboard' && (
<div className="space-y-6">
{/* Key Metrics */}
<div className="grid grid-cols-4 gap-6">
<div className="bg-white rounded-xl p-6 shadow-lg border border-gray-100">
<div className="flex items-center justify-between">
<div>
<p className="text-sm font-medium text-gray-600">Active Workflows</p>
<p className="text-3xl font-bold text-purple-600">12</p>
</div>
<div className="p-3 bg-purple-100 rounded-lg">
<Workflow className="h-6 w-6 text-purple-600" />
</div>
</div>
<div className="mt-4 flex items-center text-sm">
<TrendingUp className="h-4 w-4 text-green-500 mr-1" />
<span className="text-green-600">+3 this month</span>
</div>
</div>
<div className="bg-white rounded-xl p-6 shadow-lg border border-gray-100">
<div className="flex items-center justify-between">
<div>
<p className="text-sm font-medium text-gray-600">Critical Deadlines</p>
<p className="text-3xl font-bold text-red-600">8</p>
</div>
<div className="p-3 bg-red-100 rounded-lg">
<AlertTriangle className="h-6 w-6 text-red-600" />
</div>
</div>
<div className="mt-4 flex items-center text-sm">
<Clock className="h-4 w-4 text-orange-500 mr-1" />
<span className="text-orange-600">5 due this week</span>
</div>
</div>
<div className="bg-white rounded-xl p-6 shadow-lg border border-gray-100">
<div className="flex items-center justify-between">
<div>
<p className="text-sm font-medium text-gray-600">Efficiency Score</p>
<p className="text-3xl font-bold text-green-600">94%</p>
</div>
<div className="p-3 bg-green-100 rounded-lg">
<Target className="h-6 w-6 text-green-600" />
</div>
</div>
<div className="mt-4 flex items-center text-sm">
<TrendingUp className="h-4 w-4 text-green-500 mr-1" />
<span className="text-green-600">+8% vs last month</span>
</div>
</div>
<div className="bg-white rounded-xl p-6 shadow-lg border border-gray-100">
<div className="flex items-center justify-between">
<div>
<p className="text-sm font-medium text-gray-600">Revenue Pipeline</p>
<p className="text-3xl font-bold text-blue-600">$2.4M</p>
</div>
<div className="p-3 bg-blue-100 rounded-lg">
<DollarSign className="h-6 w-6 text-blue-600" />
</div>
</div>
<div className="mt-4 flex items-center text-sm">
<TrendingUp className="h-4 w-4 text-green-500 mr-1" />
<span className="text-green-600">+15% projected</span>
</div>
</div>
</div>
{/* Active Workflows Summary */}
<div className="bg-white rounded-xl shadow-lg border border-gray-100 p-6">
<h2 className="text-xl font-bold text-gray-900 mb-6 flex items-center">
<Workflow className="h-5 w-5 mr-2" />
Active Workflows Overview
</h2>
<div className="space-y-4">
{activeWorkflows.map((workflow) => {
const template = workflowTemplates.find(t => t.id === workflow.templateId);
const progress = (workflow.completedSteps.length / 10) * 100; // Simplified calculation
return (
<div key={workflow.id} className="p-4 bg-gray-50 rounded-lg border border-gray-200">
<div className="flex items-center justify-between mb-3">
<div>
<h3 className="font-semibold text-gray-900">{workflow.caseName}</h3>
<p className="text-sm text-gray-600">{workflow.clientName}</p>
</div>
<div className="flex items-center space-x-3">
{template && (
<span className={`px-2 py-1 rounded-full text-xs font-medium ${categoryColors[template.category]}
{template.category.toUpperCase()}
</span>
)}
<span className={
workflow.status === 'active' ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800'
}
{workflow.status.toUpperCase()}
</span>
</div>
</div>
<div className="grid grid-cols-4 gap-4 mb-3">
<div>
<p className="text-xs text-gray-600">Progress</p>
<div className="flex items-center space-x-2">
<div className="flex-1 bg-gray-200 rounded-full h-2">
<div
className="bg-purple-600 h-2 rounded-full transition-all"
style={{ width: `${progress}%
></div>
</div>
<span className="text-xs font-medium text-gray-900">{Math.round(progress)}%</span>
</div>
</div>
<div>
<p className="text-xs text-gray-600">Hours Tracked</p>
<p className="text-sm font-medium text-gray-900">
{workflow.billingTracking.actualHours} / {workflow.billingTracking.budgetedHours}
</p>
</div>
<div>
<p className="text-xs text-gray-600">Billed Amount</p>
<p className="text-sm font-medium text-green-600">
${workflow.billingTracking.billedAmount.toLocaleString()}
</p>
</div>
<div>
<p className="text-xs text-gray-600">Next Deadline</p>
{workflow.upcomingDeadlines[0] && (
<div className="flex items-center space-x-1">
<span className={
workflow.upcomingDeadlines[0].priority === 'critical' ? 'bg-red-500' : 'bg-yellow-500'
}
<p className="text-sm font-medium text-gray-900">{workflow.upcomingDeadlines[0].deadline}</p>
</div>
)}
</div>
</div>
<div className="flex items-center justify-between">
<div className="flex items-center space-x-2 text-sm text-gray-600">
<Calendar className="h-4 w-4" />
<span>Started {workflow.startDate}</span>
</div>
<button className="flex items-center space-x-1 px-3 py-1 bg-purple-600 text-white rounded-lg text-sm font-medium hover:bg-purple-700 transition-colors">
<span>View Details</span>
<ArrowRight className="h-3 w-3" />
</button>
</div>
</div>
);
})}
</div>
</div>
</div>
)}
{/* Templates View */}
{activeTab === 'templates' && (
<div className="space-y-6">
<div className="flex items-center justify-between">
<h2 className="text-xl font-bold text-gray-900">Workflow Templates</h2>
<div className="flex items-center space-x-4">
<select className="px-3 py-2 border border-gray-300 rounded-lg text-sm">
<option>All Categories</option>
<option>Detention</option>
<option>Immigration</option>
<option>Family Law</option>
<option>Corporate</option>
</select>
<button className="px-4 py-2 bg-purple-600 text-white rounded-lg font-medium hover:bg-purple-700 transition-colors">
Create New Template
</button>
</div>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
{workflowTemplates.map((template) => (
<div
key={template.id}
className="bg-white rounded-xl shadow-lg border border-gray-100 p-6 hover:shadow-xl transition-all cursor-pointer"
onClick={() => setSelectedTemplate(template)}
>
<div className="flex items-center justify-between mb-4">
<h3 className="font-bold text-gray-900">{template.name}</h3>
<span className={`px-2 py-1 rounded-full text-xs font-medium ${categoryColors[template.category]}
{template.category.toUpperCase()}
</span>
</div>
<p className="text-sm text-gray-600 mb-4">{template.description}</p>
<div className="space-y-2 mb-4">
<div className="flex items-center justify-between text-sm">
<span className="text-gray-600">Duration:</span>
<span className="font-medium">{template.estimatedDuration}</span>
</div>
<div className="flex items-center justify-between text-sm">
<span className="text-gray-600">Complexity:</span>
<span className={`px-2 py-1 rounded-full text-xs font-medium ${complexityColors[template.complexity]}
{template.complexity.toUpperCase()}
</span>
</div>
<div className="flex items-center justify-between text-sm">
<span className="text-gray-600">Steps:</span>
<span className="font-medium">{template.steps.length}</span>
</div>
</div>
<div className="flex items-center justify-between">
<div className="flex items-center space-x-2 text-sm text-gray-600">
<FileText className="h-4 w-4" />
<span>{template.documents.length} documents</span>
</div>
<button className="flex items-center space-x-1 px-3 py-1 bg-green-600 text-white rounded-lg text-sm font-medium hover:bg-green-700 transition-colors">
<span>Use Template</span>
<ArrowRight className="h-3 w-3" />
</button>
</div>
</div>
))}
</div>
</div>
)}
{/* Selected Template Modal */}
{selectedTemplate && (
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
<div className="bg-white rounded-xl max-w-4xl w-full max-h-[90vh] overflow-y-auto">
<div className="p-6 border-b border-gray-200">
<div className="flex items-center justify-between">
<h2 className="text-2xl font-bold text-gray-900">{selectedTemplate.name}</h2>
<button
onClick={() => setSelectedTemplate(null)}
className="p-2 hover:bg-gray-100 rounded-lg transition-colors"
>
✕
</button>
</div>
<p className="text-gray-600 mt-2">{selectedTemplate.description}</p>
</div>
<div className="p-6">
<div className="grid grid-cols-2 gap-6 mb-6">
<div>
<h3 className="font-semibold text-gray-900 mb-3">Template Details</h3>
<div className="space-y-2">
<div className="flex justify-between">
<span className="text-gray-600">Category:</span>
<span className={`px-2 py-1 rounded-full text-xs font-medium ${categoryColors[selectedTemplate.category]}
{selectedTemplate.category.toUpperCase()}
</span>
</div>
<div className="flex justify-between">
<span className="text-gray-600">Duration:</span>
<span className="font-medium">{selectedTemplate.estimatedDuration}</span>
</div>
<div className="flex justify-between">
<span className="text-gray-600">Complexity:</span>
<span className={`px-2 py-1 rounded-full text-xs font-medium ${complexityColors[selectedTemplate.complexity]}
{selectedTemplate.complexity.toUpperCase()}
</span>
</div>
</div>
</div>
<div>
<h3 className="font-semibold text-gray-900 mb-3">Billing Structure</h3>
<div className="space-y-2">
<div className="flex justify-between">
<span className="text-gray-600">Type:</span>
<span className="font-medium">{selectedTemplate.billingStructure.type.replace('_', ' ').toUpperCase()}</span>
</div>
{selectedTemplate.billingStructure.rate && (
<div className="flex justify-between">
<span className="text-gray-600">Rate:</span>
<span className="font-medium">${selectedTemplate.billingStructure.rate}</span>
</div>
)}
{selectedTemplate.billingStructure.estimatedHours && (
<div className="flex justify-between">
<span className="text-gray-600">Est. Hours:</span>
<span className="font-medium">{selectedTemplate.billingStructure.estimatedHours}h</span>
</div>
)}
</div>
</div>
</div>
<div className="mb-6">
<h3 className="font-semibold text-gray-900 mb-3">Workflow Steps</h3>
<div className="space-y-3">
{selectedTemplate.steps.map((step, index) => (
<div key={step.id} className="flex items-center space-x-4 p-3 bg-gray-50 rounded-lg">
<div className="flex-shrink-0 w-8 h-8 bg-purple-600 text-white rounded-full flex items-center justify-center text-sm font-medium">
{index + 1}
</div>
<div className="flex-1">
<h4 className="font-medium text-gray-900">{step.name}</h4>
<p className="text-sm text-gray-600">{step.description}</p>
<div className="flex items-center space-x-4 mt-1 text-xs text-gray-500">
<span>Day {step.daysFromStart}</span>
{step.estimatedHours && <span>{step.estimatedHours}h estimated</span>}
<span>{step.documents.length} documents</span>
</div>
</div>
</div>
))}
</div>
</div>
<div className="flex items-center justify-between pt-4 border-t border-gray-200">
<button
onClick={() => setSelectedTemplate(null)}
className="px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition-colors"
>
Close
</button>
<button className="px-6 py-2 bg-gradient-to-r from-purple-600 to-blue-600 text-white rounded-lg font-medium hover:shadow-lg transition-all">
Start Workflow
</button>
</div>
</div>
</div>
</div>
)}
</div>
);
};
export default LegalWorkflowEngine;