| Linux premium274.web-hosting.com 4.18.0-553.45.1.lve.el8.x86_64 #1 SMP Wed Mar 26 12:08:09 UTC 2025 x86_64 Path : /home/whagcoha/mos.mwagalwaservices.com/ |
| Current File : /home/whagcoha/mos.mwagalwaservices.com/invoice.php |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Invoice Generator</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<style>
.logo-preview{
max-height:80px;
margin-bottom:10px;
}
</style>
</head>
<body class="bg-light">
<div class="container mt-4">
<h3>Invoice / Receipt Generator</h3>
<div class="card p-3 mb-3">
<div class="row">
<div class="col-md-4">
<label>Upload Logo</label>
<input type="file" class="form-control" id="logoUpload">
<img id="logoPreview" class="logo-preview">
</div>
<div class="col-md-4">
<label>Invoice Number</label>
<input type="text" class="form-control" id="invoiceNumber">
</div>
<div class="col-md-4">
<label>Date</label>
<input type="date" class="form-control" id="invoiceDate">
</div>
</div>
<br>
<div class="row">
<div class="col-md-6">
<label>Your Business Name</label>
<input type="text" class="form-control" id="businessName">
</div>
<div class="col-md-6">
<label>Client Name</label>
<input type="text" class="form-control" id="clientName">
</div>
</div>
<br>
<div class="row">
<div class="col-md-6">
<label>Business Address</label>
<textarea class="form-control" id="businessAddress"></textarea>
</div>
<div class="col-md-6">
<label>Client Address</label>
<textarea class="form-control" id="clientAddress"></textarea>
</div>
</div>
<br>
<div class="row">
<div class="col-md-3">
<label>Currency</label>
<select class="form-control" id="currency">
<option value="UGX">UGX</option>
<option value="USD">USD</option>
</select>
</div>
</div>
</div>
<div class="card p-3 mb-3">
<h5>Items</h5>
<div class="row">
<div class="col-md-4">
<input type="text" class="form-control" id="itemDesc" placeholder="Description">
</div>
<div class="col-md-2">
<input type="number" class="form-control" id="itemQty" placeholder="Qty">
</div>
<div class="col-md-3">
<input type="number" class="form-control" id="itemPrice" placeholder="Unit Price">
</div>
<div class="col-md-3">
<button class="btn btn-success w-100" onclick="addItem()">Add Item</button>
</div>
</div>
<br>
<table class="table table-bordered">
<thead>
<tr>
<th>Description</th>
<th>Qty</th>
<th>Price</th>
<th>Total</th>
</tr>
</thead>
<tbody id="itemTable"></tbody>
</table>
<h5 class="text-end">Total: <span id="grandTotal">0</span></h5>
</div>
<div class="card p-3 mb-3">
<label>Notes / Terms</label>
<textarea class="form-control" id="notes"></textarea>
</div>
<button class="btn btn-dark w-100" onclick="generatePDF()">Download Invoice PDF</button>
</div>
<script>
let items = [];
let total = 0;
document.getElementById("logoUpload").addEventListener("change",function(){
let reader = new FileReader();
reader.onload = function(e){
document.getElementById("logoPreview").src = e.target.result;
}
reader.readAsDataURL(this.files[0]);
});
function addItem(){
let desc = document.getElementById("itemDesc").value;
let qty = Number(document.getElementById("itemQty").value);
let price = Number(document.getElementById("itemPrice").value);
let itemTotal = qty * price;
items.push({desc,qty,price,itemTotal});
renderItems();
}
function renderItems(){
let table = document.getElementById("itemTable");
table.innerHTML="";
total = 0;
items.forEach(i=>{
total += i.itemTotal;
table.innerHTML += `
<tr>
<td>${i.desc}</td>
<td>${i.qty}</td>
<td>${i.price}</td>
<td>${i.itemTotal}</td>
</tr>
`;
});
document.getElementById("grandTotal").innerText = total;
}
async function generatePDF(){
const { jsPDF } = window.jspdf;
let doc = new jsPDF();
let currency = document.getElementById("currency").value;
let business = document.getElementById("businessName").value;
let client = document.getElementById("clientName").value;
let invoice = document.getElementById("invoiceNumber").value;
let date = document.getElementById("invoiceDate").value;
let notes = document.getElementById("notes").value;
let y = 20;
doc.text("INVOICE",150,20);
doc.text("Invoice #: "+invoice,20,20);
doc.text("Date: "+date,20,28);
doc.text("From:",20,40);
doc.text(business,20,48);
doc.text("Bill To:",120,40);
doc.text(client,120,48);
y = 70;
doc.text("Description",20,y);
doc.text("Qty",100,y);
doc.text("Price",120,y);
doc.text("Total",160,y);
y +=10;
items.forEach(i=>{
doc.text(i.desc,20,y);
doc.text(String(i.qty),100,y);
doc.text(currency+" "+i.price,120,y);
doc.text(currency+" "+i.itemTotal,160,y);
y+=10;
});
y+=10;
doc.text("Grand Total: "+currency+" "+total,120,y);
y+=20;
doc.text("Notes:",20,y);
y+=8;
doc.text(notes,20,y);
doc.save("invoice.pdf");
}
</script>
</body>
</html>