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>Costing-Sheet-for-Box</title>-<style>-body-{-font-family:-Arial,-sans-serif;-margin:-20px;-}-h1,-h2-{-color:-#333;-}-.form-section,-.cost-section-{-margin-bottom:-20px;-}-.entry-{-display:-flex;-gap:-10px;-margin-bottom:-5px;-align-items:-center;-}-label-{-display:-inline-block;-width:-120px;-}-.amount-display-{-font-weight:-bold;-margin-left:-10px;-}-#results-{-border-top:-1px-solid-#ccc;-padding-top:-10px;-}-#results-p-{-margin:-5px-0;-}-button-{-margin-top:-10px;-}-</style>-</head>-<body>-<h1>Costing-Sheet-for-Box</h1>-<div-class="form-section">-<label>Item-Name:-<input-type="text"-id="item_name"></label><br>-<label>Quantity:-<input-type="number"-id="quantity"-value="80000"></label><br><br>-</div>-<!---Material-Cost-Section--->-<h2>Material-Cost</h2>-<div-id="materials"-class="cost-section"></div>-<button-onclick="addEntry('materials',-'Material-Name')">Add-Material</button>-<!---Machinery-Cost-Section--->-<h2>Machinery-Cost</h2>-<div-id="machinery"-class="cost-section"></div>-<button-onclick="addEntry('machinery',-'Machine-Name')">Add-Machine</button>-<!---Labour-Cost-Section--->-<h2>Labour-Cost</h2>-<div-id="labour"-class="cost-section"></div>-<button-onclick="addEntry('labour',-'Fabrication-Task')">Add-Fabrication</button>-<button-onclick="calculateCosts()">Calculate</button>-<h2>Cost-Summary</h2>-<div-id="results">-<p>Total-Material-+-Fabrication:-<span-id="material-total">0.00</span>-AED</p>-<p>Unit-Cost-of-Material-+-Fabrication:-<span-id="unit-cost-material-fab">0.00</span>-AED</p>-<p>Unit-Cost-for-18%:-<span-id="unit-cost-18">0.00</span>-AED</p>-<p>Utility-Charges:-<span-id="utility-charges">1600.00</span>-AED</p>-<p>Finance-Charges:-<span-id="finance-charges">2120.00</span>-AED</p>-<p>Fuel-Cost:-<span-id="fuel-cost">120.00</span>-AED</p>-<p>Total-Cost:-<span-id="total-cost">0.00</span>-AED</p>-<p>Transportation-(3%-of-Total-Cost):-<span-id="transportation">0.00</span>-AED</p>-<p>Wastage-(2%-of-Total-Cost):-<span-id="wastage">0.00</span>-AED</p>-<p>Margin-(5%-of-Total-Cost):-<span-id="margin">0.00</span>-AED</p>-<p>Corporate-Tax-(9%-of-Total-Cost):-<span-id="corporate-tax">0.00</span>-AED</p>-<p>Total-Cost-+-All-Include:-<span-id="total-inclusive">0.00</span>-AED</p>-<p>Per-Unit-Cost:-<span-id="per-unit-cost">0.00</span>-AED</p>-<p>Final-Unit-Price-for-Customer:-<span-id="final-unit-price">[to-be-filled]</span></p>-</div>-<script>-function-addEntry(containerId,-labelText)-{-const-container-=-document.getElementById(containerId);-const-entry-=-document.createElement('div');-entry.className-=-'entry';-entry.innerHTML-=-`-<label>${labelText}:</label>-<input-type="text"-class="${containerId}-name"-placeholder="Enter-${labelText.toLowerCase()}">-<label>Qty:</label>-<input-type="number"-class="${containerId}-qty"-oninput="updateAmount(this)">-<label>Rate:</label>-<input-type="number"-class="${containerId}-rate"-oninput="updateAmount(this)">-<span-class="${containerId}-amount-amount-display">0.00</span>-`;-container.appendChild(entry);-}-function-updateAmount(element)-{-const-entry-=-element.closest('.entry');-const-qty-=-parseFloat(entry.querySelector('[class*="-qty"]').value)-||-0;-const-rate-=-parseFloat(entry.querySelector('[class*="-rate"]').value)-||-0;-const-amount-=-qty-*-rate;-entry.querySelector('[class*="-amount"]').textContent-=-amount.toFixed(2);-}-function-calculateCosts()-{-const-sumAmounts-=-(selector)-=>-Array.from(document.querySelectorAll(selector))-.reduce((total,-el)-=>-total-+-parseFloat(el.textContent),-0);-const-materialTotal-=-sumAmounts('.materials-amount');-const-machineryTotal-=-sumAmounts('.machinery-amount');-const-labourTotal-=-sumAmounts('.labour-amount');-const-totalMaterialFabrication-=-materialTotal-+-machineryTotal-+-labourTotal;-document.getElementById('material-total').textContent-=-totalMaterialFabrication.toFixed(2);-const-quantity-=-parseFloat(document.getElementById('quantity').value)-||-1;-//-Calculate-Unit-Cost-of-Material-+-Fabrication-const-unitCostMaterialFab-=-totalMaterialFabrication-/-quantity;-document.getElementById('unit-cost-material-fab').textContent-=-unitCostMaterialFab.toFixed(2);-//-Calculate-Unit-Cost-for-18%-const-unitCost18-=-totalMaterialFabrication-*-0.18;-document.getElementById('unit-cost-18').textContent-=-unitCost18.toFixed(2);-const-utilityCharges-=-parseFloat(document.getElementById('utility-charges').textContent);-const-financeCharges-=-parseFloat(document.getElementById('finance-charges').textContent);-const-fuelCost-=-parseFloat(document.getElementById('fuel-cost').textContent);-const-baseTotal-=-totalMaterialFabrication-+-utilityCharges-+-financeCharges-+-fuelCost;-document.getElementById('total-cost').textContent-=-baseTotal.toFixed(2);-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);-const-totalInclusive-=-baseTotal-+-transportation-+-wastage-+-margin-+-corporateTax;-document.getElementById('total-inclusive').textContent-=-totalInclusive.toFixed(2);-const-perUnitCost-=-totalInclusive-/-quantity;-document.getElementById('per-unit-cost').textContent-=-perUnitCost.toFixed(2);-const-customerMarkup-=-1.2;-//-Assuming-a-20%-markup-as-example-const-finalUnitPrice-=-perUnitCost-*-customerMarkup;-document.getElementById('final-unit-price').textContent-=-finalUnitPrice.toFixed(2);-}-</script>-</body>-</html>
