Costing Sheet - Copy this React, Tailwind Component to your project
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF 8"> <meta name="viewport" content="width=device width, initial scale=1.0"> <title>Minimal Costing Sheet</title> <style> body { font family: Arial, sans serif; margin: 20px; color: #333; } h1, h2 { margin bottom: 10px; font weight: normal; } .form section { margin bottom: 20px; } .entry { display: flex; gap: 5px; margin bottom: 5px; align items: center; } label { width: 100px; } .amount display { font weight: bold; } .button { padding: 5px 10px; border: none; background color: #333; color: #fff; cursor: pointer; } .remove button { color: red; cursor: pointer; margin left: 5px; } </style> <! Add jsPDF Library > <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script> </head> <body> <h1>Minimal Costing Sheet</h1> <div class="form section"> <label>Item Name: <input type="text" id="item_name" style="width: 150px;"></label><br> <label>Quantity: <input type="number" id="quantity" value="80000" style="width: 100px;"></label><br><br> </div> <! Material Cost Section > <h2>Material Cost</h2> <div id="materials"> <div class="entry"> <label>Material:</label> <input type="text" class="material name" placeholder="Enter material" style="width: 120px;"> <label>Qty:</label> <input type="number" class="material qty" oninput="updateCosts()" style="width: 60px;"> <label>Rate:</label> <input type="number" class="material rate" oninput="updateCosts()" style="width: 60px;"> <span class="material amount amount display">0.00</span> <span class="remove button" onclick="removeEntry(this)">✖</span> </div> </div> <button class="button" onclick="addMaterial()">Add Material</button> <! Machinery Cost Section > <h2>Machinery Cost</h2> <div id="machinery"> <div class="entry"> <label>Machine:</label> <input type="text" class="machine name" placeholder="Enter machine" style="width: 120px;"> <label>Qty:</label> <input type="number" class="machine qty" oninput="updateCosts()" style="width: 60px;"> <label>Rate:</label> <input type="number" class="machine rate" oninput="updateCosts()" style="width: 60px;"> <span class="machine amount amount display">0.00</span> <span class="remove button" onclick="removeEntry(this)">✖</span> </div> </div> <button class="button" onclick="addMachine()">Add Machine</button> <! Labour Cost Section > <h2>Labour Cost</h2> <div id="labour"> <div class="entry"> <label>Fabrication:</label> <input type="text" class="fabrication name" placeholder="Enter task" style="width: 120px;"> <label>Qty:</label> <input type="number" class="fabrication qty" oninput="updateCosts()" style="width: 60px;"> <label>Rate:</label> <input type="number" class="fabrication rate" oninput="updateCosts()" style="width: 60px;"> <span class="fabrication amount amount display">0.00</span> <span class="remove button" onclick="removeEntry(this)">✖</span> </div> </div> <button class="button" onclick="addFabrication()">Add Fabrication</button> <button class="button" onclick="resetForm()">Refresh Form</button> <h2>Cost Summary</h2> <div id="results"> <p><strong>Material + Fabrication Costs:</strong> <span id="material total">0.00</span> AED</p> <p><strong>Fixed Costs:</strong></p> <ul> <li><strong>Utility Charges:</strong> 1600.00 AED</li> <li><strong>Finance Charges:</strong> 2120.00 AED</li> <li><strong>Fuel Costs:</strong> 120.00 AED</li> </ul> <p><strong>Total Cost (Material + Fixed):</strong> <span id="total cost">0.00</span> AED</p> <p><strong>Additional Costs:</strong></p> <ul> <li><strong>Transportation (3% of Total Cost):</strong> <span id="transportation">0.00</span> AED</li> <li><strong>Wastage (2% of Total Cost):</strong> <span id="wastage">0.00</span> AED</li> <li><strong>Margin (5% of Total Cost):</strong> <span id="margin">0.00</span> AED</li> <li><strong>Corporate Tax (9% of Total Cost):</strong> <span id="corporate tax">0.00</span> AED</li> </ul> <p><strong>Total Cost with All Additions:</strong> <span id="total inclusive">0.00</span> AED</p> <! New section for 18% calculation > <p><strong>18% of Total Material + Fabrication Cost:</strong> <span id="eighteen percent">0.00</span> AED</p> <p><strong>Unit Cost for 18% of Total Material + Fabrication:</strong> <span id="unit cost eighteen percent">0.00</span> AED</p> <p><strong>Per Unit Cost:</strong> <span id="per unit cost">0.00</span> AED</p> </div> <! Download Button > <button class="button" onclick="downloadPDF()">Download as PDF</button> <script> function addMaterial() { const materialsDiv = document.getElementById('materials'); const entry = document.createElement('div'); entry.className = 'entry'; entry.innerHTML = `<label>Material:</label> <input type="text" class="material name" placeholder="Enter material" style="width: 120px;"> <label>Qty:</label> <input type="number" class="material qty" oninput="updateCosts()" style="width: 60px;"> <label>Rate:</label> <input type="number" class="material rate" oninput="updateCosts()" style="width: 60px;"> <span class="material amount amount display">0.00</span> <span class="remove button" onclick="removeEntry(this)">✖</span>`; materialsDiv.appendChild(entry); } function addMachine() { const machineryDiv = document.getElementById('machinery'); const entry = document.createElement('div'); entry.className = 'entry'; entry.innerHTML = `<label>Machine:</label> <input type="text" class="machine name" placeholder="Enter machine" style="width: 120px;"> <label>Qty:</label> <input type="number" class="machine qty" oninput="updateCosts()" style="width: 60px;"> <label>Rate:</label> <input type="number" class="machine rate" oninput="updateCosts()" style="width: 60px;"> <span class="machine amount amount display">0.00</span> <span class="remove button" onclick="removeEntry(this)">✖</span>`; machineryDiv.appendChild(entry); } function addFabrication() { const labourDiv = document.getElementById('labour'); const entry = document.createElement('div'); entry.className = 'entry'; entry.innerHTML = `<label>Fabrication:</label> <input type="text" class="fabrication name" placeholder="Enter task" style="width: 120px;"> <label>Qty:</label> <input type="number" class="fabrication qty" oninput="updateCosts()" style="width: 60px;"> <label>Rate:</label> <input type="number" class="fabrication rate" oninput="updateCosts()" style="width: 60px;"> <span class="fabrication amount amount display">0.00</span> <span class="remove button" onclick="removeEntry(this)">✖</span>`; labourDiv.appendChild(entry); } function removeEntry(button) { button.parentElement.remove(); updateCosts(); } function resetForm() { document.getElementById('materials').innerHTML = ''; document.getElementById('machinery').innerHTML = ''; document.getElementById('labour').innerHTML = ''; updateCosts(); } function updateCosts() { const calculateTotal = (selector) => Array.from(document.querySelectorAll(selector)) .reduce((sum, el) => { const qty = parseFloat(el.parentNode.querySelector('[class*=" qty"]').value) || 0; const rate = parseFloat(el.parentNode.querySelector('[class*=" rate"]').value) || 0; const amount = qty * rate; el.textContent = amount.toFixed(2); return sum + amount; }, 0); const totalMaterial = calculateTotal('.material amount'); const totalMachine = calculateTotal('.machine amount'); const totalLabour = calculateTotal('.fabrication amount'); const totalMaterialFabrication = totalMaterial + totalMachine + totalLabour; document.getElementById('material total').textContent = totalMaterialFabrication.toFixed(2); // Fixed Costs const utility = 1600, finance = 2120, fuel = 120; const baseTotal = totalMaterialFabrication + utility + finance + fuel; document.getElementById('total cost').textContent = baseTotal.toFixed(2); // Additional Costs const transportation = baseTotal * 0.03; const wastage = baseTotal * 0.02; const margin = baseTotal * 0.05; const corporateTax = baseTotal * 0.09; document.getElementById('transportation').textContent = transportation.toFixed(2); document.getElementById('wastage').textContent = wastage.toFixed(2); document.getElementById('margin').textContent = margin.toFixed(2); document.getElementById('corporate tax').textContent = corporateTax.toFixed(2); // Total Inclusive const totalInclusive = baseTotal + transportation + wastage + margin + corporateTax; document.getElementById('total inclusive').textContent = totalInclusive.toFixed(2); // Per Unit Cost const quantity = parseFloat(document.getElementById('quantity').value) || 1; const perUnitCost = totalInclusive / quantity; document.getElementById('per unit cost').textContent = perUnitCost.toFixed(2); // New 18% Calculation const eighteenPercent = totalMaterialFabrication * 0.18; document.getElementById('eighteen percent').textContent = eighteenPercent.toFixed(2); const unitCostForEighteenPercent = eighteenPercent / quantity; document.getElementById('unit cost eighteen percent').textContent = unitCostForEighteenPercent.toFixed(2); } // Download as PDF function function downloadPDF() { const { jsPDF } = window.jspdf; const doc = new jsPDF(); doc.text('Minimal Costing Sheet', 20, 20); doc.text('Item Name: ' + document.getElementById('item_name').value, 20, 30); doc.text('Quantity: ' + document.getElementById('quantity').value, 20, 40); doc.text('Material + Fabrication Costs: ' + document.getElementById('material total').textContent + ' AED', 20, 50); doc.text('Fixed Costs:', 20, 60); doc.text('Utility Charges: 1600.00 AED', 20, 70); doc.text('Finance Charges: 2120.00 AED', 20, 80); doc.text('Fuel Costs: 120.00 AED', 20, 90); doc.text('Total Cost (Material + Fixed): ' + document.getElementById('total cost').textContent + ' AED', 20, 100); doc.text('Additional Costs:', 20, 110); doc.text('Transportation: ' + document.getElementById('transportation').textContent + ' AED', 20, 120); doc.text('Wastage: ' + document.getElementById('wastage').textContent + ' AED', 20, 130); doc.text('Margin: ' + document.getElementById('margin').textContent + ' AED', 20, 140); doc.text('Corporate Tax: ' + document.getElementById('corporate tax').textContent + ' AED', 20, 150); doc.text('Total Cost with All Additions: ' + document.getElementById('total inclusive').textContent + ' AED', 20, 160); doc.text('18% of Total Material + Fabrication Cost: ' + document.getElementById('eighteen percent').textContent + ' AED', 20, 170); doc.text('Unit Cost for 18%: ' + document.getElementById('unit cost eighteen percent').textContent + ' AED', 20, 180); doc.text('Per Unit Cost: ' + document.getElementById('per unit cost').textContent + ' AED', 20, 190); doc.save('cost summary.pdf'); } // Initializing default calculation updateCosts(); </script> </body> </html>
