first commit
This commit is contained in:
Chang CL
381
src/pages/invoice.astro
Normal file
381
src/pages/invoice.astro
Normal file
@@ -0,0 +1,381 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Invoice Form</title>
|
||||
<style>
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
line-height: 1.6;
|
||||
margin: 0;
|
||||
padding: 20px;
|
||||
color: #333;
|
||||
}
|
||||
.container {
|
||||
max-width: 1000px;
|
||||
margin: 0 auto;
|
||||
background: #f9f9f9;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 0 10px rgba(0,0,0,0.1);
|
||||
}
|
||||
h1, h2 {
|
||||
color: #2c3e50;
|
||||
}
|
||||
.section {
|
||||
margin-bottom: 20px;
|
||||
padding: 15px;
|
||||
background: white;
|
||||
border-radius: 5px;
|
||||
border-left: 4px solid #3498db;
|
||||
}
|
||||
.form-group {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
label {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
font-weight: bold;
|
||||
}
|
||||
input, select, textarea {
|
||||
width: 100%;
|
||||
padding: 8px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.address-fields {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 15px;
|
||||
}
|
||||
.item-row {
|
||||
border: 1px solid #eee;
|
||||
padding: 15px;
|
||||
margin-bottom: 15px;
|
||||
border-radius: 5px;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
.item-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.btn {
|
||||
background: #3498db;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 10px 15px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
}
|
||||
.btn:hover {
|
||||
background: #2980b9;
|
||||
}
|
||||
.btn-danger {
|
||||
background: #e74c3c;
|
||||
}
|
||||
.btn-danger:hover {
|
||||
background: #c0392b;
|
||||
}
|
||||
.totals-section {
|
||||
background: #e8f4fc;
|
||||
padding: 15px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.totals-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 10px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>Invoice Form</h1>
|
||||
|
||||
<div class="section">
|
||||
<h2>Metadata</h2>
|
||||
<div class="form-group">
|
||||
<label for="version">Version</label>
|
||||
<input type="text" id="version" name="version" value="1.1" readonly>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="format">Format</label>
|
||||
<input type="text" id="format" name="format" value="JSON" readonly>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<h2>Header Information</h2>
|
||||
<div class="form-group">
|
||||
<label for="invoiceNumber">Invoice Number</label>
|
||||
<input type="text" id="invoiceNumber" name="invoiceNumber" value="INV-2023-0001">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="issueDate">Issue Date</label>
|
||||
<input type="date" id="issueDate" name="issueDate" value="2023-05-15">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="dueDate">Due Date</label>
|
||||
<input type="date" id="dueDate" name="dueDate" value="2023-06-15">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="invoiceType">Invoice Type</label>
|
||||
<select id="invoiceType" name="invoiceType">
|
||||
<option value="STANDARD" selected>STANDARD</option>
|
||||
<option value="CREDIT">CREDIT</option>
|
||||
<option value="DEBIT">DEBIT</option>
|
||||
<option value="PROFORMA">PROFORMA</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="currency">Currency</label>
|
||||
<input type="text" id="currency" name="currency" value="MYR">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<h2>Seller Information</h2>
|
||||
<div class="form-group">
|
||||
<label for="sellerTin">TIN</label>
|
||||
<input type="text" id="sellerTin" name="sellerTin" value="123456789012">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="sellerName">Name</label>
|
||||
<input type="text" id="sellerName" name="sellerName" value="ABC Company Sdn Bhd">
|
||||
</div>
|
||||
<h3>Address</h3>
|
||||
<div class="address-fields">
|
||||
<div class="form-group">
|
||||
<label for="sellerLine1">Line 1</label>
|
||||
<input type="text" id="sellerLine1" name="sellerLine1" value="123 Jalan Bukit Bintang">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="sellerCity">City</label>
|
||||
<input type="text" id="sellerCity" name="sellerCity" value="Kuala Lumpur">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="sellerPostalCode">Postal Code</label>
|
||||
<input type="text" id="sellerPostalCode" name="sellerPostalCode" value="50200">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="sellerState">State</label>
|
||||
<input type="text" id="sellerState" name="sellerState" value="WP Kuala Lumpur">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="sellerCountry">Country</label>
|
||||
<input type="text" id="sellerCountry" name="sellerCountry" value="MY">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<h2>Buyer Information</h2>
|
||||
<div class="form-group">
|
||||
<label for="buyerTin">TIN</label>
|
||||
<input type="text" id="buyerTin" name="buyerTin" value="987654321098">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="buyerName">Name</label>
|
||||
<input type="text" id="buyerName" name="buyerName" value="XYZ Enterprise Sdn Bhd">
|
||||
</div>
|
||||
<h3>Address</h3>
|
||||
<div class="address-fields">
|
||||
<div class="form-group">
|
||||
<label for="buyerLine1">Line 1</label>
|
||||
<input type="text" id="buyerLine1" name="buyerLine1" value="456 Jalan Ampang">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="buyerCity">City</label>
|
||||
<input type="text" id="buyerCity" name="buyerCity" value="Kuala Lumpur">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="buyerPostalCode">Postal Code</label>
|
||||
<input type="text" id="buyerPostalCode" name="buyerPostalCode" value="50450">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="buyerState">State</label>
|
||||
<input type="text" id="buyerState" name="buyerState" value="WP Kuala Lumpur">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="buyerCountry">Country</label>
|
||||
<input type="text" id="buyerCountry" name="buyerCountry" value="MY">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<h2>Items</h2>
|
||||
<div id="items-container">
|
||||
<div class="item-row">
|
||||
<div class="item-header">
|
||||
<h3>Item #1</h3>
|
||||
<button type="button" class="btn btn-danger" onclick="removeItem(this)">Remove</button>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="item1LineNumber">Line Number</label>
|
||||
<input type="number" id="item1LineNumber" name="items[0][lineNumber]" value="1">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="item1Description">Description</label>
|
||||
<input type="text" id="item1Description" name="items[0][description]" value="Office Chair">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="item1Quantity">Quantity</label>
|
||||
<input type="number" step="0.01" id="item1Quantity" name="items[0][quantity]" value="1">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="item1UnitOfMeasure">Unit of Measure</label>
|
||||
<input type="text" id="item1UnitOfMeasure" name="items[0][unitOfMeasure]" value="UNIT">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="item1UnitPrice">Unit Price</label>
|
||||
<input type="number" step="0.01" id="item1UnitPrice" name="items[0][unitPrice]" value="500.00">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="item1NetAmount">Net Amount</label>
|
||||
<input type="number" step="0.01" id="item1NetAmount" name="items[0][netAmount]" value="500.00">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="item1TaxAmount">Tax Amount</label>
|
||||
<input type="number" step="0.01" id="item1TaxAmount" name="items[0][taxAmount]" value="0.00">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="item1GrossAmount">Gross Amount</label>
|
||||
<input type="number" step="0.01" id="item1GrossAmount" name="items[0][grossAmount]" value="500.00">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Tax Details</label>
|
||||
<div id="item1TaxDetails">
|
||||
<p>No tax details</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button type="button" class="btn" onclick="addItem()">Add Item</button>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<h2>Tax Summary</h2>
|
||||
<div id="tax-summary-container">
|
||||
<p>No tax summary items</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section totals-section">
|
||||
<h2>Totals</h2>
|
||||
<div class="totals-grid">
|
||||
<div class="form-group">
|
||||
<label for="netAmount">Net Amount</label>
|
||||
<input type="number" step="0.01" id="netAmount" name="netAmount" value="500.00">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="taxAmount">Tax Amount</label>
|
||||
<input type="number" step="0.01" id="taxAmount" name="taxAmount" value="0.00">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="grossAmount">Gross Amount</label>
|
||||
<input type="number" step="0.01" id="grossAmount" name="grossAmount" value="500.00">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="payableAmount">Payable Amount</label>
|
||||
<input type="number" step="0.01" id="payableAmount" name="payableAmount" value="500.00">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<h2>Signature</h2>
|
||||
<div class="form-group">
|
||||
<label for="signatureValue">Signature Value</label>
|
||||
<input type="text" id="signatureValue" name="signatureValue" value="base64_encoded_signature">
|
||||
</div>
|
||||
<h3>Certificate Information</h3>
|
||||
<div class="form-group">
|
||||
<label for="certIssuer">Issuer</label>
|
||||
<input type="text" id="certIssuer" name="certIssuer" value="Certificate Authority Name">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="certSerialNumber">Serial Number</label>
|
||||
<input type="text" id="certSerialNumber" name="certSerialNumber" value="certificate_serial_number">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="certSubject">Subject</label>
|
||||
<input type="text" id="certSubject" name="certSubject" value="CN=ABC Company Sdn Bhd,O=ABC Company,C=MY">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group" style="margin-top: 20px;">
|
||||
<button type="submit" class="btn">Submit Invoice</button>
|
||||
<button type="reset" class="btn btn-danger">Reset Form</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
let itemCounter = 1;
|
||||
|
||||
function addItem() {
|
||||
itemCounter++;
|
||||
const itemsContainer = document.getElementById('items-container');
|
||||
|
||||
const newItem = document.createElement('div');
|
||||
newItem.className = 'item-row';
|
||||
newItem.innerHTML = `
|
||||
<div class="item-header">
|
||||
<h3>Item #${itemCounter}</h3>
|
||||
<button type="button" class="btn btn-danger" onclick="removeItem(this)">Remove</button>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="item${itemCounter}LineNumber">Line Number</label>
|
||||
<input type="number" id="item${itemCounter}LineNumber" name="items[${itemCounter-1}][lineNumber]" value="${itemCounter}">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="item${itemCounter}Description">Description</label>
|
||||
<input type="text" id="item${itemCounter}Description" name="items[${itemCounter-1}][description]" placeholder="Item description">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="item${itemCounter}Quantity">Quantity</label>
|
||||
<input type="number" step="0.01" id="item${itemCounter}Quantity" name="items[${itemCounter-1}][quantity]" value="1">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="item${itemCounter}UnitOfMeasure">Unit of Measure</label>
|
||||
<input type="text" id="item${itemCounter}UnitOfMeasure" name="items[${itemCounter-1}][unitOfMeasure]" value="UNIT">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="item${itemCounter}UnitPrice">Unit Price</label>
|
||||
<input type="number" step="0.01" id="item${itemCounter}UnitPrice" name="items[${itemCounter-1}][unitPrice]" value="0.00">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="item${itemCounter}NetAmount">Net Amount</label>
|
||||
<input type="number" step="0.01" id="item${itemCounter}NetAmount" name="items[${itemCounter-1}][netAmount]" value="0.00">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="item${itemCounter}TaxAmount">Tax Amount</label>
|
||||
<input type="number" step="0.01" id="item${itemCounter}TaxAmount" name="items[${itemCounter-1}][taxAmount]" value="0.00">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="item${itemCounter}GrossAmount">Gross Amount</label>
|
||||
<input type="number" step="0.01" id="item${itemCounter}GrossAmount" name="items[${itemCounter-1}][grossAmount]" value="0.00">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Tax Details</label>
|
||||
<div id="item${itemCounter}TaxDetails">
|
||||
<p>No tax details</p>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
itemsContainer.appendChild(newItem);
|
||||
}
|
||||
|
||||
function removeItem(button) {
|
||||
const itemRow = button.closest('.item-row');
|
||||
itemRow.remove();
|
||||
// Update item numbers if needed
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user