[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" "use client" import type React from "react" import { useState, useCallback, useEffect } from "react" import { Upload, FileText, Download, Eye, RotateCcw, Trash2, Filter, Search, MoreHorizontal, FolderSyncIcon as Sync, Plus, Paperclip, ChevronDown, } from "lucide-react" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import { Progress } from "@/components/ui/progress" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Textarea } from "@/components/ui/textarea" import { Checkbox } from "@/components/ui/checkbox" import { useToast } from "@/hooks/use-toast" import { Toaster } from "@/components/ui/toaster" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu" interface InvoiceFile { id: string fileName: string fileSize: number status: "queued" | "processing" | "completed" | "warning" | "failed" progress: number invoiceNumber?: string vendor?: string amount?: number invoiceDate?: string confidence?: number uploadedAt: Date extractedData?: { invoiceNumber: string vendor: string amount: number invoiceDate: string gstin: string address: string description: string } } const statusConfig = { queued: { color: "bg-gray-100 text-gray-700 border-gray-200", label: "Queued" }, processing: { color: "bg-blue-100 text-blue-700 border-blue-200", label: "Processing" }, completed: { color: "bg-green-100 text-green-700 border-green-200", label: "Completed" }, warning: { color: "bg-yellow-100 text-yellow-700 border-yellow-200", label: "Warning" }, failed: { color: "bg-red-100 text-red-700 border-red-200", label: "Failed" }, } export default function BulkInvoiceUpload() { const [files, setFiles] = useState([]) const [isDragging, setIsDragging] = useState(false) const [selectedFile, setSelectedFile] = useState(null) const [isReviewOpen, setIsReviewOpen] = useState(false) const [selectedFiles, setSelectedFiles] = useState([]) const [searchQuery, setSearchQuery] = useState("") const [showUploadArea, setShowUploadArea] = useState(true) const { toast } = useToast() // Simulate WebSocket updates useEffect(() => { const interval = setInterval(() => { setFiles((prevFiles) => prevFiles.map((file) => { if (file.status === "queued") { return { ...file, status: "processing", progress: 10 } } else if (file.status === "processing" && file.progress < 100) { const newProgress = Math.min(file.progress + Math.random() * 20, 100) if (newProgress >= 100) { const mockData = generateMockExtractedData() return { ...file, status: Math.random() > 0.1 ? "completed" : "warning", progress: 100, invoiceNumber: mockData.invoiceNumber, vendor: mockData.vendor, amount: mockData.amount, invoiceDate: mockData.invoiceDate, confidence: Math.random() * 0.3 + 0.7, extractedData: mockData, } } return { ...file, progress: newProgress } } return file }), ) }, 1000) return () => clearInterval(interval) }, []) const generateMockExtractedData = () => { const vendors = [ "ABHISHEK TRADERS", "DELHI METRO RAIL", "POLICYBAZAAR INSURANCE BROKERS", "TECH SOLUTIONS LTD", "GLOBAL SUPPLIES", ] const invoiceNumbers = ["INV-2024-001", "INV-2024-002", "BILL-2024-003", "REF-2024-A1", "sacdh"] return { invoiceNumber: invoiceNumbers[Math.floor(Math.random() * invoiceNumbers.length)], vendor: vendors[Math.floor(Math.random() * vendors.length)], amount: Math.floor(Math.random() * 100000) + 5000, invoiceDate: new Date(2024, Math.floor(Math.random() * 12), Math.floor(Math.random() * 28) + 1) .toISOString() .split("T")[0], gstin: "29ABCDE1234F1Z5", address: "123 Business Park, Tech City, Karnataka 560001", description: "Professional services and consulting", } } const handleDragOver = useCallback((e: React.DragEvent) => { e.preventDefault() setIsDragging(true) }, []) const handleDragLeave = useCallback((e: React.DragEvent) => { e.preventDefault() setIsDragging(false) }, []) const handleDrop = useCallback((e: React.DragEvent) => { e.preventDefault() setIsDragging(false) const droppedFiles = Array.from(e.dataTransfer.files) processFiles(droppedFiles) }, []) const handleFileSelect = useCallback((e: React.ChangeEvent) => { if (e.target.files) { const selectedFiles = Array.from(e.target.files) processFiles(selectedFiles) } }, []) const processFiles = (fileList: File[]) => { const validFiles = fileList.filter((file) => { const validTypes = ["application/pdf", "image/jpeg", "image/png", "image/tiff"] return validTypes.includes(file.type) && file.size <= 10 * 1024 * 1024 // 10MB limit }) if (validFiles.length !== fileList.length) { toast({ title: "Some files were skipped", description: "Only PDF, JPG, PNG, and TIFF files under 10MB are supported.", variant: "destructive", }) } const newFiles: InvoiceFile[] = validFiles.map((file) => ({ id: Math.random().toString(36).substr(2, 9), fileName: file.name, fileSize: file.size, status: "queued", progress: 0, uploadedAt: new Date(), })) setFiles((prev) => [...prev, ...newFiles]) setShowUploadArea(false) if (newFiles.length > 0) { toast({ title: "Files uploaded successfully", description: `${newFiles.length} file(s) added to processing queue.`, }) } } const handleRetry = (fileId: string) => { setFiles((prev) => prev.map((file) => (file.id === fileId ? { ...file, status: "queued", progress: 0 } : file))) } const handleDelete = (fileId: string) => { setFiles((prev) => prev.filter((file) => file.id !== fileId)) setSelectedFiles((prev) => prev.filter((id) => id !== fileId)) } const handleReview = (file: InvoiceFile) => { setSelectedFile(file) setIsReviewOpen(true) } const handleSaveReview = () => { if (selectedFile) { toast({ title: "Invoice saved", description: "Invoice data has been saved to your accounting system.", }) setIsReviewOpen(false) } } const formatCurrency = (amount: number) => { return new Intl.NumberFormat("en-IN", { style: "currency", currency: "INR", }).format(amount) } const formatDate = (dateString: string) => { return new Date(dateString).toLocaleDateString("en-IN", { day: "numeric", month: "short", year: "numeric", }) } const filteredFiles = files.filter( (file) => file.fileName.toLowerCase().includes(searchQuery.toLowerCase()) || file.vendor?.toLowerCase().includes(searchQuery.toLowerCase()) || file.invoiceNumber?.toLowerCase().includes(searchQuery.toLowerCase()), ) const completedCount = files.filter((f) => f.status === "completed").length const processingCount = files.filter((f) => f.status === "processing").length const failedCount = files.filter((f) => f.status === "failed").length const totalAmount = files .filter((f) => f.status === "completed" && f.amount) .reduce((sum, f) => sum + (f.amount || 0), 0) return (

{/* Header */}

Bulk Invoice Upload

{/* Dashboard Cards */}

Total Processed

{formatCurrency(totalAmount)}

Across all completed invoices

Processing

{processingCount}

Currently being processed

Completed

{completedCount}

Ready for review

Failed

{failedCount}

Require attention

{/* Upload Area */} {showUploadArea && (

Drop your invoice files here

or click to browse • PDF, JPG, PNG, TIFF • Max 200 files, 500MB total

)} {/* Search and Filter */} {files.length > 0 && (

setSearchQuery(e.target.value)} className="pl-10" />

)} {/* Status Table */} {files.length > 0 && ( 0} onCheckedChange={(checked) => { if (checked) { setSelectedFiles(filteredFiles.map((f) => f.id)) } else { setSelectedFiles([]) } }} /> Invoice Number Vendor Upload Date Extracted On Status Amount {filteredFiles.map((file, index) => ( { if (checked) { setSelectedFiles((prev) => [...prev, file.id]) } else { setSelectedFiles((prev) => prev.filter((id) => id !== file.id)) } }} />

{file.invoiceNumber || file.fileName}

{file.vendor || "-"} {formatDate(file.uploadedAt.toISOString())}

{file.status === "completed" && file.invoiceDate && ( <>

{formatDate(file.invoiceDate)}

{file.confidence && file.confidence < 0.8 && (

Low confidence

)} )} {file.status === "processing" && (

{Math.round(file.progress)}%

)}

{file.status === "completed" && ( handleReview(file)}> Review & Edit )} {file.status === "failed" && ( handleRetry(file.id)}> Retry )} handleDelete(file.id)}> Delete {file.amount ? formatCurrency(file.amount) : "-"} Download View Details ))}

)} {/* Review Dialog */}