Invoice

 

"use client"; import { useState, useRef, ChangeEvent } from "react"; import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; import { Label } from "@/components/ui/label"; import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; import { Search, Upload, Download, FileText, User, Phone, Package } from "lucide-react"; interface Invoice { id: string; fileName: string; fileSize: string; uploadDate: string; customerName: string; mobileNumber: string; awbNumber: string; file: File; } export default function InvoicesApp() { const [invoices, setInvoices] = useState([]); const [searchTerm, setSearchTerm] = useState(""); const [uploading, setUploading] = useState(false); const [uploadError, setUploadError] = useState(""); const fileInputRef = useRef(null); const [newInvoice, setNewInvoice] = useState({ customerName: "", mobileNumber: "", awbNumber: "" }); const handleFileChange = (e: ChangeEvent) => { const files = e.target.files; if (!files || files.length === 0) return; const file = files[0]; // Validate file type if (!file.type.includes("pdf") && !file.type.includes("image")) { setUploadError("Only PDF and image files are allowed"); return; } // Validate file size (max 5MB) if (file.size > 5 * 1024 * 1024) { setUploadError("File size must be less than 5MB"); return; } setUploadError(""); // Create invoice object const newInvoiceObj: Invoice = { id: Date.now().toString(), fileName: file.name, fileSize: formatFileSize(file.size), uploadDate: new Date().toLocaleDateString(), customerName: newInvoice.customerName, mobileNumber: newInvoice.mobileNumber, awbNumber: newInvoice.awbNumber, file: file }; setInvoices(prev => [newInvoiceObj, ...prev]); // Reset form setNewInvoice({ customerName: "", mobileNumber: "", awbNumber: "" }); if (fileInputRef.current) { fileInputRef.current.value = ""; } }; const formatFileSize = (bytes: number): string => { if (bytes < 1024) return bytes + " bytes"; else if (bytes < 1048576) return (bytes / 1024).toFixed(1) + " KB"; else return (bytes / 1048576).toFixed(1) + " MB"; }; const handleDownload = (invoice: Invoice) => { // In a real app, this would download from a server // For this demo, we'll create a temporary URL const url = URL.createObjectURL(invoice.file); const a = document.createElement("a"); a.href = url; a.download = invoice.fileName; document.body.appendChild(a); a.click(); document.body.removeChild(a); URL.revokeObjectURL(url); }; const filteredInvoices = invoices.filter(invoice => invoice.fileName.toLowerCase().includes(searchTerm.toLowerCase()) || invoice.customerName.toLowerCase().includes(searchTerm.toLowerCase()) || invoice.mobileNumber.includes(searchTerm) || invoice.awbNumber.includes(searchTerm) ); return (

Invoice Management System

Upload, search, and download invoices

{/* Upload Section */}

Upload Invoice

Customer Name

setNewInvoice({...newInvoice, customerName: e.target.value})} />

Mobile Number

setNewInvoice({...newInvoice, mobileNumber: e.target.value})} />

AWB Number

setNewInvoice({...newInvoice, awbNumber: e.target.value})} />

Invoice File

PDF, JPG, PNG files only (max 5MB)

{uploadError && (

{uploadError}

)}

{/* Search and Results Section */}

Search Invoices

setSearchTerm(e.target.value)} />

{filteredInvoices.length === 0 ? (

No invoices found

{invoices.length === 0 ? "Upload your first invoice to get started" : "Try adjusting your search terms"}

) : ( filteredInvoices.map((invoice) => (

{invoice.fileName}

{invoice.fileSize} • {invoice.uploadDate}

{invoice.customerName}

{invoice.mobileNumber}

{invoice.awbNumber}

)) )}

Upload invoices to share with customers and team members

); }