From 212805b4afaeeaf1051a26f3fffec506893ce8fd Mon Sep 17 00:00:00 2001
From: Chang CL <changcl@workjs.home.arpa>
Date: Tue, 12 Aug 2025 16:21:42 +0800
Subject: [PATCH] first commit

---
 src/pages/invoice.astro | 381 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 381 insertions(+)
 create mode 100644 src/pages/invoice.astro
diff --git a/src/pages/invoice.astro b/src/pages/invoice.astro
new file mode 100644
index 0000000..78e9ba8
--- /dev/null
+++ b/src/pages/invoice.astro
@@ -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>
