 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 { FileText, Brain, Zap, Download, Upload, Eye, Edit, Share, Lock, CheckCircle, AlertTriangle, Clock, Users, Scale, Database, Shield, TrendingUp } from 'lucide-react';
interface DocumentTemplate {
id: string;
name: string;
category: 'pleadings' | 'contracts' | 'forms' | 'correspondence' | 'discovery' | 'motions';
jurisdiction: string;
description: string;
fields: DocumentField[];
aiEnhanced: boolean;
courtApproved: boolean;
lastUpdated: string;
usage: number;
autoFillFields: string[];
requiredFields: string[];
conditionalSections: ConditionalSection[];
}
interface DocumentField {
id: string;
name: string;
type: 'text' | 'date' | 'number' | 'dropdown' | 'checkbox' | 'signature' | 'currency';
label: string;
required: boolean;
defaultValue?: string;
options?: string[];
aiSuggestion?: string;
dataSource?: 'case' | 'client' | 'lawyer' | 'court' | 'external';
}
interface ConditionalSection {
id: string;
condition: string;
content: string;
fields: string[];
}
interface GeneratedDocument {
id: string;
templateId: string;
name: string;
caseId: string;
clientName: string;
status: 'draft' | 'review' | 'approved' | 'filed' | 'served';
createdDate: string;
modifiedDate: string;
generatedBy: string;
fileSize: string;
wordCount: number;
aiConfidence: number;
reviewNotes: string[];
signatures: {
signerId: string;
signerName: string;
signedDate?: string;
status: 'pending' | 'signed' | 'declined';
}[];
}
const SmartDocumentAutomation: React.FC = () => {
const [activeTab, setActiveTab] = useState<'generator' | 'templates' | 'documents' | 'analytics'>('generator');
const [documentTemplates, setDocumentTemplates] = useState<DocumentTemplate[]>([]);
const [generatedDocuments, setGeneratedDocuments] = useState<GeneratedDocument[]>([]);
const [selectedTemplate, setSelectedTemplate] = useState<DocumentTemplate | null>(null);
const [isGenerating, setIsGenerating] = useState(false);
useEffect(() => {
loadDocumentTemplates();
loadGeneratedDocuments();
}, []);
const loadDocumentTemplates = () => {
const templates: DocumentTemplate[] = [
{
id: 'tpl_class_action_petition',
name: 'Class Action Petition - Detention Conditions',
category: 'pleadings',
jurisdiction: 'Quebec Superior Court',
description: 'Comprehensive class action petition template for detention center condition cases with AI-powered fact integration',
aiEnhanced: true,
courtApproved: true,
lastUpdated: '2025-02-15',
usage: 47,
autoFillFields: ['plaintiff_names', 'defendant_names', 'case_number', 'court_jurisdiction', 'filing_date'],
requiredFields: ['class_description', 'factual_allegations', 'legal_claims', 'relief_sought'],
fields: [
{
id: 'field_001',
name: 'class_description',
type: 'text',
label: 'Class Description',
required: true,
aiSuggestion: 'AI will analyze case facts to suggest optimal class definition',
dataSource: 'case'
},
{
id: 'field_002',
name: 'factual_allegations',
type: 'text',
label: 'Factual Allegations',
required: true,
aiSuggestion: 'AI will structure and organize evidence into compelling narrative',
dataSource: 'case'
},
{
id: 'field_003',
name: 'detention_facility',
type: 'dropdown',
label: 'Detention Facility',
required: true,
options: ['Bordeaux Detention Center', 'Rivière-des-Prairies', 'Leclerc Institution'],
dataSource: 'case'
},
{
id: 'field_004',
name: 'violations_alleged',
type: 'checkbox',
label: 'Rights Violations Alleged',
required: true,
options: ['Overcrowding', 'Medical Neglect', 'Inadequate Food', 'Sanitation Issues', 'Violence'],
dataSource: 'case'
}
],
conditionalSections: [
{
id: 'sec_001',
condition: 'medical_neglect_selected',
content: 'Medical Negligence Claims Section',
fields: ['medical_expert_reports', 'health_records', 'treatment_denials']
}
]
},
{
id: 'tpl_emergency_injunction',
name: 'Emergency Preliminary Injunction Motion',
category: 'motions',
jurisdiction: 'Federal/Provincial Courts',
description: 'Urgent motion template for emergency relief in detention cases with expedited filing capabilities',
aiEnhanced: true,
courtApproved: true,
lastUpdated: '2025-02-20',
usage: 23,
autoFillFields: ['court_name', 'case_caption', 'filing_date', 'emergency_basis'],
requiredFields: ['irreparable_harm', 'likelihood_success', 'public_interest', 'proposed_order'],
fields: [
{
id: 'field_101',
name: 'irreparable_harm',
type: 'text',
label: 'Irreparable Harm Analysis',
required: true,
aiSuggestion: 'AI will analyze case evidence to articulate immediate and irreparable harm',
dataSource: 'case'
},
{
id: 'field_102',
name: 'emergency_timeline',
type: 'date',
label: 'Emergency Timeline',
required: true,
aiSuggestion: 'AI will calculate optimal filing timeline based on court rules',
dataSource: 'court'
}
],
conditionalSections: []
},
{
id: 'tpl_client_retainer',
name: 'Class Action Client Retainer Agreement',
category: 'contracts',
jurisdiction: 'Quebec/Federal',
description: 'Comprehensive retainer agreement for class action representation with contingency fee structure',
aiEnhanced: false,
courtApproved: false,
lastUpdated: '2025-01-30',
usage: 156,
autoFillFields: ['client_name', 'lawyer_name', 'firm_name', 'case_description'],
requiredFields: ['fee_structure', 'scope_representation', 'client_obligations'],
fields: [
{
id: 'field_201',
name: 'contingency_percentage',
type: 'number',
label: 'Contingency Fee Percentage',
required: true,
defaultValue: '33.33',
dataSource: 'lawyer'
}
],
conditionalSections: []
}
];
setDocumentTemplates(templates);
};
const loadGeneratedDocuments = () => {
const documents: GeneratedDocument[] = [
{
id: 'doc_001',
templateId: 'tpl_class_action_petition',
name: 'Bordeaux Class Action Petition - FINAL',
caseId: 'case_bordeaux_2024',
clientName: 'Multiple Detainees',
status: 'filed',
createdDate: '2025-02-25',
modifiedDate: '2025-02-28',
generatedBy: 'Justin Wee',
fileSize: '2.4 MB',
wordCount: 8547,
aiConfidence: 94,
reviewNotes: ['Reviewed by senior partner', 'Court filing confirmed'],
signatures: [
{
signerId: 'lawyer_justin',
signerName: 'Justin Wee',
signedDate: '2025-02-28',
status: 'signed'
}
]
},
{
id: 'doc_002',
templateId: 'tpl_emergency_injunction',
name: 'Emergency Injunction Motion - Bordeaux Conditions',
caseId: 'case_bordeaux_2024',
clientName: 'Multiple Detainees',
status: 'review',
createdDate: '2025-03-01',
modifiedDate: '2025-03-02',
generatedBy: 'Audrey Labrecque',
fileSize: '1.8 MB',
wordCount: 6234,
aiConfidence: 97,
reviewNotes: ['Pending senior partner review'],
signatures: [
{
signerId: 'lawyer_audrey',
signerName: 'Audrey Labrecque',
status: 'pending'
}
]
}
];
setGeneratedDocuments(documents);
};
const handleGenerateDocument = async () => {
if (!selectedTemplate) return;
setIsGenerating(true);
// Simulate AI document generation
await new Promise(resolve => setTimeout(resolve, 3000));
const newDocument: GeneratedDocument = {
id: `doc_${Date.now()}
templateId: selectedTemplate.id,
name: `${selectedTemplate.name} - Draft
caseId: 'case_new',
clientName: 'New Client',
status: 'draft',
createdDate: new Date().toISOString().split('T')[0],
modifiedDate: new Date().toISOString().split('T')[0],
generatedBy: 'Current User',
fileSize: '1.2 MB',
wordCount: 3456,
aiConfidence: 92,
reviewNotes: [],
signatures: []
};
setGeneratedDocuments([newDocument, ...generatedDocuments]);
setIsGenerating(false);
setSelectedTemplate(null);
};
const categoryColors = {
pleadings: 'bg-red-100 text-red-800',
contracts: 'bg-blue-100 text-blue-800',
forms: 'bg-green-100 text-green-800',
correspondence: 'bg-yellow-100 text-yellow-800',
discovery: 'bg-purple-100 text-purple-800',
motions: 'bg-orange-100 text-orange-800'
};
const statusColors = {
draft: 'bg-gray-100 text-gray-800',
review: 'bg-yellow-100 text-yellow-800',
approved: 'bg-green-100 text-green-800',
filed: 'bg-blue-100 text-blue-800',
served: 'bg-purple-100 text-purple-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">
<FileText 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">
📄 SmartDoc Pro Generator
</h1>
<p className="text-gray-600 flex items-center space-x-2">
<Brain className="h-4 w-4" />
<span>AI-Powered Legal Document Automation & 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">
<Upload className="h-4 w-4" />
<span>Upload Template</span>
</button>
<button className="flex items-center space-x-2 px-4 py-2 bg-gradient-to-r from-purple-600 to-blue-600 text-white rounded-lg font-medium hover:shadow-lg transition-all">
<Zap className="h-4 w-4" />
<span>AI Generate</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: 'generator', label: 'Document Generator', icon: Zap },
{ id: 'templates', label: 'Templates', icon: FileText },
{ id: 'documents', label: 'Generated Documents', icon: Database },
{ 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>
{/* Document Generator View */}
{activeTab === 'generator' && (
<div className="space-y-6">
{/* Quick Stats */}
<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">Templates Available</p>
<p className="text-3xl font-bold text-purple-600">{documentTemplates.length}</p>
</div>
<div className="p-3 bg-purple-100 rounded-lg">
<FileText className="h-6 w-6 text-purple-600" />
</div>
</div>
<div className="mt-4 flex items-center text-sm">
<Brain className="h-4 w-4 text-blue-500 mr-1" />
<span className="text-blue-600">{documentTemplates.filter(t => t.aiEnhanced).length} AI-Enhanced</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">Documents Generated</p>
<p className="text-3xl font-bold text-green-600">247</p>
</div>
<div className="p-3 bg-green-100 rounded-lg">
<CheckCircle 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">+23 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">AI Accuracy</p>
<p className="text-3xl font-bold text-blue-600">96%</p>
</div>
<div className="p-3 bg-blue-100 rounded-lg">
<Brain className="h-6 w-6 text-blue-600" />
</div>
</div>
<div className="mt-4 flex items-center text-sm">
<Shield className="h-4 w-4 text-blue-500 mr-1" />
<span className="text-blue-600">Court Approved</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">Time Saved</p>
<p className="text-3xl font-bold text-orange-600">382</p>
</div>
<div className="p-3 bg-orange-100 rounded-lg">
<Clock className="h-6 w-6 text-orange-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">Hours saved</span>
</div>
</div>
</div>
{/* Template Selection */}
<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">
<Zap className="h-5 w-5 mr-2" />
Select Template to Generate Document
</h2>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
{documentTemplates.map((template) => (
<div
key={template.id}
className="p-4 border border-gray-200 rounded-lg hover:border-purple-300 hover:shadow-md transition-all cursor-pointer"
onClick={() => setSelectedTemplate(template)}
>
<div className="flex items-center justify-between mb-3">
<h3 className="font-semibold text-gray-900 text-sm">{template.name}</h3>
<div className="flex items-center space-x-1">
{template.aiEnhanced && (
<div className="p-1 bg-blue-100 rounded">
<Brain className="h-3 w-3 text-blue-600" />
</div>
)}
{template.courtApproved && (
<div className="p-1 bg-green-100 rounded">
<CheckCircle className="h-3 w-3 text-green-600" />
</div>
)}
</div>
</div>
<p className="text-xs text-gray-600 mb-3">{template.description}</p>
<div className="flex items-center justify-between">
<span className={`px-2 py-1 rounded-full text-xs font-medium ${categoryColors[template.category]}
{template.category.toUpperCase()}
</span>
<div className="flex items-center space-x-2 text-xs text-gray-500">
<Users className="h-3 w-3" />
<span>{template.usage}</span>
</div>
</div>
</div>
))}
</div>
</div>
</div>
)}
{/* Templates View */}
{activeTab === 'templates' && (
<div className="bg-white rounded-xl shadow-lg border border-gray-100 p-6">
<div className="flex items-center justify-between mb-6">
<h2 className="text-xl font-bold text-gray-900">Document 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>Pleadings</option>
<option>Motions</option>
<option>Contracts</option>
<option>Forms</option>
</select>
<button className="px-4 py-2 bg-purple-600 text-white rounded-lg font-medium hover:bg-purple-700 transition-colors">
Create Template
</button>
</div>
</div>
<div className="overflow-x-auto">
<table className="w-full">
<thead>
<tr className="border-b border-gray-200">
<th className="text-left py-3 px-4 font-medium text-gray-900">Template Name</th>
<th className="text-left py-3 px-4 font-medium text-gray-900">Category</th>
<th className="text-left py-3 px-4 font-medium text-gray-900">Jurisdiction</th>
<th className="text-left py-3 px-4 font-medium text-gray-900">Features</th>
<th className="text-left py-3 px-4 font-medium text-gray-900">Usage</th>
<th className="text-left py-3 px-4 font-medium text-gray-900">Actions</th>
</tr>
</thead>
<tbody>
{documentTemplates.map((template) => (
<tr key={template.id} className="border-b border-gray-100 hover:bg-gray-50">
<td className="py-3 px-4">
<div>
<p className="font-medium text-gray-900">{template.name}</p>
<p className="text-sm text-gray-600">{template.description}</p>
</div>
</td>
<td className="py-3 px-4">
<span className={`px-2 py-1 rounded-full text-xs font-medium ${categoryColors[template.category]}
{template.category.toUpperCase()}
</span>
</td>
<td className="py-3 px-4">
<p className="text-sm text-gray-900">{template.jurisdiction}</p>
</td>
<td className="py-3 px-4">
<div className="flex items-center space-x-2">
{template.aiEnhanced && (
<div className="flex items-center space-x-1 px-2 py-1 bg-blue-100 rounded-full">
<Brain className="h-3 w-3 text-blue-600" />
<span className="text-xs text-blue-600">AI</span>
</div>
)}
{template.courtApproved && (
<div className="flex items-center space-x-1 px-2 py-1 bg-green-100 rounded-full">
<CheckCircle className="h-3 w-3 text-green-600" />
<span className="text-xs text-green-600">Approved</span>
</div>
)}
</div>
</td>
<td className="py-3 px-4">
<p className="text-sm text-gray-900">{template.usage} times</p>
</td>
<td className="py-3 px-4">
<div className="flex items-center space-x-2">
<button className="p-1 hover:bg-gray-200 rounded">
<Eye className="h-4 w-4 text-gray-600" />
</button>
<button className="p-1 hover:bg-gray-200 rounded">
<Edit className="h-4 w-4 text-gray-600" />
</button>
<button className="p-1 hover:bg-gray-200 rounded">
<Share className="h-4 w-4 text-gray-600" />
</button>
</div>
</td>
</tr>
))}
</tbody>
</table>
</div>
</div>
)}
{/* Generated Documents View */}
{activeTab === 'documents' && (
<div className="bg-white rounded-xl shadow-lg border border-gray-100 p-6">
<div className="flex items-center justify-between mb-6">
<h2 className="text-xl font-bold text-gray-900">Generated Documents</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 Status</option>
<option>Draft</option>
<option>Review</option>
<option>Approved</option>
<option>Filed</option>
</select>
</div>
</div>
<div className="space-y-4">
{generatedDocuments.map((document) => (
<div key={document.id} className="p-4 border border-gray-200 rounded-lg hover:shadow-md transition-all">
<div className="flex items-center justify-between mb-3">
<div>
<h3 className="font-semibold text-gray-900">{document.name}</h3>
<p className="text-sm text-gray-600">{document.clientName} • {document.caseId}</p>
</div>
<div className="flex items-center space-x-3">
<span className={`px-2 py-1 rounded-full text-xs font-medium ${statusColors[document.status]}
{document.status.toUpperCase()}
</span>
<div className="flex items-center space-x-1 text-sm text-gray-600">
<Brain className="h-4 w-4" />
<span>{document.aiConfidence}%</span>
</div>
</div>
</div>
<div className="grid grid-cols-4 gap-4 mb-3 text-sm">
<div>
<p className="text-gray-600">Created</p>
<p className="font-medium">{document.createdDate}</p>
</div>
<div>
<p className="text-gray-600">File Size</p>
<p className="font-medium">{document.fileSize}</p>
</div>
<div>
<p className="text-gray-600">Word Count</p>
<p className="font-medium">{document.wordCount.toLocaleString()}</p>
</div>
<div>
<p className="text-gray-600">Generated By</p>
<p className="font-medium">{document.generatedBy}</p>
</div>
</div>
<div className="flex items-center justify-between">
<div className="flex items-center space-x-4">
{document.signatures.map((sig) => (
<div key={sig.signerId} className="flex items-center space-x-2 text-sm">
<div className={
sig.status === 'signed' ? 'bg-green-500' :
sig.status === 'pending' ? 'bg-yellow-500' : 'bg-red-500'
}
<span className="text-gray-600">{sig.signerName}</span>
</div>
))}
</div>
<div className="flex items-center space-x-2">
<button className="flex items-center space-x-1 px-3 py-1 bg-gray-100 text-gray-700 rounded-lg text-sm hover:bg-gray-200 transition-colors">
<Eye className="h-3 w-3" />
<span>Preview</span>
</button>
<button className="flex items-center space-x-1 px-3 py-1 bg-purple-600 text-white rounded-lg text-sm hover:bg-purple-700 transition-colors">
<Download className="h-3 w-3" />
<span>Download</span>
</button>
</div>
</div>
</div>
))}
</div>
</div>
)}
{/* Template Selection 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-2xl 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-xl font-bold text-gray-900">Generate Document</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.name}</p>
</div>
<div className="p-6">
<div className="mb-6">
<h3 className="font-semibold text-gray-900 mb-3">Document Information</h3>
<div className="grid grid-cols-2 gap-4">
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">Case ID</label>
<input
type="text"
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
placeholder="Enter case ID"
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">Client Name</label>
<input
type="text"
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
placeholder="Enter client name"
/>
</div>
</div>
</div>
<div className="mb-6">
<h3 className="font-semibold text-gray-900 mb-3">AI Enhancement Options</h3>
<div className="space-y-3">
<label className="flex items-center space-x-3">
<input type="checkbox" className="rounded border-gray-300 text-purple-600 focus:ring-purple-500" defaultChecked />
<span className="text-sm text-gray-700">Auto-populate case data</span>
</label>
<label className="flex items-center space-x-3">
<input type="checkbox" className="rounded border-gray-300 text-purple-600 focus:ring-purple-500" defaultChecked />
<span className="text-sm text-gray-700">AI fact analysis and organization</span>
</label>
<label className="flex items-center space-x-3">
<input type="checkbox" className="rounded border-gray-300 text-purple-600 focus:ring-purple-500" defaultChecked />
<span className="text-sm text-gray-700">Legal citation verification</span>
</label>
<label className="flex items-center space-x-3">
<input type="checkbox" className="rounded border-gray-300 text-purple-600 focus:ring-purple-500" />
<span className="text-sm text-gray-700">Court rule compliance check</span>
</label>
</div>
</div>
{isGenerating && (
<div className="mb-6 p-4 bg-blue-50 rounded-lg border border-blue-200">
<div className="flex items-center space-x-3">
<div className="animate-spin rounded-full h-4 w-4 border-b-2 border-blue-600"></div>
<span className="text-blue-700 font-medium">AI is generating your document...</span>
</div>
<div className="mt-2 text-sm text-blue-600">
• Analyzing case data and evidence
<br />
• Structuring legal arguments
<br />
• Verifying citations and compliance
</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"
disabled={isGenerating}
>
Cancel
</button>
<button
onClick={handleGenerateDocument}
disabled={isGenerating}
className="flex items-center space-x-2 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 disabled:opacity-50"
>
<Zap className="h-4 w-4" />
<span>{isGenerating ? 'Generating...' : 'Generate Document'}</span>
</button>
</div>
</div>
</div>
</div>
)}
</div>
);
};
export default SmartDocumentAutomation;