116 lines
4.1 KiB
TypeScript
116 lines
4.1 KiB
TypeScript
'use client';
|
|
|
|
import { useState } from 'react';
|
|
import { Upload, File, X, CheckCircle } from 'lucide-react';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
|
|
|
export function SecureUpload() {
|
|
const [files, setFiles] = useState<File[]>([]);
|
|
const [isUploading, setIsUploading] = useState(false);
|
|
|
|
const handleFileSelect = (event: React.ChangeEvent<HTMLInputElement>) => {
|
|
const selectedFiles = Array.from(event.target.files || []);
|
|
setFiles(prev => [...prev, ...selectedFiles]);
|
|
};
|
|
|
|
const removeFile = (index: number) => {
|
|
setFiles(prev => prev.filter((_, i) => i !== index));
|
|
};
|
|
|
|
const handleUpload = async () => {
|
|
setIsUploading(true);
|
|
// TODO: Implement actual file upload to S3 or similar service
|
|
// This is a stub implementation
|
|
await new Promise(resolve => setTimeout(resolve, 2000));
|
|
setIsUploading(false);
|
|
setFiles([]);
|
|
};
|
|
|
|
return (
|
|
<Card className="max-w-2xl mx-auto">
|
|
<CardHeader>
|
|
<CardTitle>Secure Document Upload</CardTitle>
|
|
<CardDescription>
|
|
Upload your tax documents securely. All files are encrypted and stored safely.
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="space-y-6">
|
|
<div className="border-2 border-dashed border-slate-300 rounded-lg p-6 text-center">
|
|
<Upload className="mx-auto h-12 w-12 text-slate-400" />
|
|
<div className="mt-4">
|
|
<label htmlFor="file-upload" className="cursor-pointer">
|
|
<span className="text-sm font-medium text-navy hover:text-teal">
|
|
Click to upload
|
|
</span>
|
|
<span className="text-slate-500"> or drag and drop</span>
|
|
</label>
|
|
<input
|
|
id="file-upload"
|
|
name="file-upload"
|
|
type="file"
|
|
multiple
|
|
className="sr-only"
|
|
onChange={handleFileSelect}
|
|
accept=".pdf,.jpg,.jpeg,.png,.doc,.docx"
|
|
/>
|
|
</div>
|
|
<p className="text-xs text-slate-500 mt-2">
|
|
PDF, JPG, PNG, DOC up to 10MB each
|
|
</p>
|
|
</div>
|
|
|
|
{files.length > 0 && (
|
|
<div className="space-y-3">
|
|
<h4 className="font-medium text-ink">Selected Files:</h4>
|
|
{files.map((file, index) => (
|
|
<div key={index} className="flex items-center justify-between p-3 bg-sand rounded-lg">
|
|
<div className="flex items-center space-x-3">
|
|
<File className="h-5 w-5 text-navy" />
|
|
<div>
|
|
<p className="text-sm font-medium text-ink">{file.name}</p>
|
|
<p className="text-xs text-slate">
|
|
{(file.size / 1024 / 1024).toFixed(2)} MB
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<button
|
|
onClick={() => removeFile(index)}
|
|
className="text-slate-400 hover:text-red-500"
|
|
>
|
|
<X className="h-4 w-4" />
|
|
</button>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
<div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
|
|
<div className="flex items-start space-x-3">
|
|
<CheckCircle className="h-5 w-5 text-blue-600 mt-0.5" />
|
|
<div className="text-sm text-blue-800">
|
|
<p className="font-medium">Secure & Private</p>
|
|
<p className="mt-1">
|
|
Your documents are encrypted and stored securely. Only authorized personnel can access your files.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<Button
|
|
onClick={handleUpload}
|
|
disabled={files.length === 0 || isUploading}
|
|
className="w-full"
|
|
size="lg"
|
|
>
|
|
{isUploading ? 'Uploading...' : 'Upload Documents'}
|
|
</Button>
|
|
|
|
<p className="text-xs text-slate-500 text-center">
|
|
Note: This is a demo interface. In production, this would integrate with a secure file storage service.
|
|
</p>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|