Spaces:

anuragshas
/

invoice-generator

Sleeping

App Files Files Community

anuragshas commited on Jun 30

Commit

063f5af

1 Parent(s): 9d38c41

add: serial number and linters

Browse files

Files changed (11) hide show

.eslintrc.json +17 -0
.gitignore +3 -0
.htmlhintrc +10 -0
.stylelintrc.json +7 -0
README.md +39 -1
index.html +70 -0
package-lock.json +0 -0
package.json +18 -0
script.js +145 -0
style.css +62 -0
tests/test.js +33 -0

.eslintrc.json ADDED Viewed

	@@ -0,0 +1,17 @@

+{
+  "env": {
+    "browser": true,
+    "es2021": true,
+    "node": true
+  },
+  "extends": "eslint:recommended",
+  "parserOptions": {
+    "ecmaVersion": 12,
+    "sourceType": "module"
+  },
+  "rules": {
+    "indent": ["error", 2],
+    "quotes": ["error", "single"],
+    "semi": ["error", "always"]
+  }
+}

.gitignore ADDED Viewed

	@@ -0,0 +1,3 @@

+.env*
+!.env.example
+node_modules

.htmlhintrc ADDED Viewed

	@@ -0,0 +1,10 @@

+{
+  "tagname-lowercase": true,
+  "attr-lowercase": true,
+  "attr-value-double-quotes": true,
+  "doctype-first": true,
+  "tag-pair": true,
+  "spec-char-escape": true,
+  "id-unique": true,
+  "src-not-empty": true
+}

.stylelintrc.json ADDED Viewed

	@@ -0,0 +1,7 @@

+{
+  "extends": "stylelint-config-standard",
+  "rules": {
+    "rule-empty-line-before": null,
+    "no-descending-specificity": null
+  }
+}

README.md CHANGED Viewed

@@ -7,4 +7,42 @@ sdk: docker
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 pinned: false
 ---
+# Quotation Generator
+This is a simple client-side application to generate quotations.
+Fill in your company details, customer details, itemized list, and additional charges.
+The application calculates totals and allows you to print or save the quotation as PDF.
+## Usage
+1. Open `index.html` in a web browser.
+2. Enter your company and customer information.
+3. Add item rows as needed (auto-generated S.No, description, HSN code, quantity, unit price, discount %).
+4. Specify IGST rate and freight charges.
+5. Fill in bank payment details.
+6. Click **Generate Quotation**.
+7. The formatted quotation appears with the total amount shown in words (Rupees and Paise, using Crore/Lakh notation) above the totals.
+8. Click **Print / Save as PDF** to export.
+## Running Tests
+Ensure you have Node.js installed, then run:
+```
+node tests/test.js
+```
+## Linting
+Install the linting tools:
+```
+npm install
+```
+To run all linters (HTMLHint, Stylelint, ESLint):
+```
+npm run lint
+```
+Or individually:
+- `npm run lint:html`
+- `npm run lint:css`
+- `npm run lint:js`

index.html ADDED Viewed

	@@ -0,0 +1,70 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Quotation Generator</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+  <h1>Quotation Generator</h1>
+  <div id="form-container">
+    <form id="quotation-form">
+      <fieldset>
+        <legend>Your Company Details</legend>
+        <input type="text" id="company-name" name="company-name" placeholder="Company Name" required>
+        <textarea id="company-address" name="company-address" placeholder="Address" required></textarea>
+        <input type="text" id="company-phone" name="company-phone" placeholder="Phone">
+        <input type="email" id="company-email" name="company-email" placeholder="Email">
+      </fieldset>
+      <fieldset>
+        <legend>Customer Company Details</legend>
+        <input type="text" id="customer-name" name="customer-name" placeholder="Customer Name" required>
+        <textarea id="customer-address" name="customer-address" placeholder="Address" required></textarea>
+        <input type="text" id="customer-phone" name="customer-phone" placeholder="Phone">
+        <input type="email" id="customer-email" name="customer-email" placeholder="Email">
+      </fieldset>
+      <fieldset>
+        <legend>Quotation Details</legend>
+        <input type="text" id="quotation-number" name="quotation-number" placeholder="Quotation Number" required>
+        <input type="date" id="quotation-date" name="quotation-date" required>
+      </fieldset>
+      <fieldset>
+        <legend>Items</legend>
+        <table id="items-table">
+          <thead>
+        <tr>
+              <th>S.No</th>
+              <th>Description</th>
+              <th>HSN Code</th>
+              <th>Qty</th>
+              <th>Unit Price</th>
+              <th>Discount (%)</th>
+              <th>Amount</th>
+              <th></th>
+            </tr>
+          </thead>
+          <tbody>
+          </tbody>
+        </table>
+        <button type="button" id="add-item">Add Item</button>
+      </fieldset>
+      <fieldset>
+        <legend>Additional Charges</legend>
+        <label>IGST (%)<input type="number" id="igst-rate" name="igst-rate" value="0" min="0"></label>
+        <label>Freight Charges<input type="number" id="freight-charges" name="freight-charges" value="0" min="0"></label>
+      </fieldset>
+      <fieldset>
+        <legend>Bank Details</legend>
+        <input type="text" id="bank-name" name="bank-name" placeholder="Bank Name" required>
+        <input type="text" id="bank-account" name="bank-account" placeholder="Account Number" required>
+        <input type="text" id="bank-ifsc" name="bank-ifsc" placeholder="IFSC Code" required>
+        <input type="text" id="bank-branch" name="bank-branch" placeholder="Branch" required>
+      </fieldset>
+      <button type="submit">Generate Quotation</button>
+    </form>
+  </div>
+  <div id="quotation-output" style="display:none;"></div>
+  <script src="script.js"></script>
+</body>
+</html>

package-lock.json ADDED Viewed

The diff for this file is too large to render. See raw diff

package.json ADDED Viewed

	@@ -0,0 +1,18 @@

+{
+  "name": "quotation-generator",
+  "version": "1.0.0",
+  "description": "Client-side quotation generator with linting setup",
+  "scripts": {
+    "lint:js": "eslint script.js tests",
+    "lint:css": "stylelint '**/*.css'",
+    "lint:html": "htmlhint index.html",
+    "lint": "npm-run-all lint:html lint:css lint:js"
+  },
+  "devDependencies": {
+    "eslint": "^8.0.0",
+    "htmlhint": "^0.15.0",
+    "npm-run-all": "^4.1.5",
+    "stylelint": "^15.0.0",
+    "stylelint-config-standard": "^32.0.0"
+  }
+}

script.js ADDED Viewed

	@@ -0,0 +1,145 @@

+// helper: convert number to Indian-notation words (Crore, Lakh, Thousand, Hundred)
+function numberToWords(num) {
+  const small = ['', 'One', 'Two', 'Three', 'Four', 'Five', 'Six', 'Seven', 'Eight', 'Nine',
+    'Ten', 'Eleven', 'Twelve', 'Thirteen', 'Fourteen', 'Fifteen', 'Sixteen', 'Seventeen', 'Eighteen', 'Nineteen'];
+  const tens = ['', '', 'Twenty', 'Thirty', 'Forty', 'Fifty', 'Sixty', 'Seventy', 'Eighty', 'Ninety'];
+  function twoDigit(n) {
+    if (n < 20) return small[n];
+    return tens[Math.floor(n / 10)] + (n % 10 ? ' ' + small[n % 10] : '');
+  }
+  let words = '';
+  const crore = Math.floor(num / 10000000); num %= 10000000;
+  if (crore) words += twoDigit(crore) + ' Crore ';
+  const lakh = Math.floor(num / 100000); num %= 100000;
+  if (lakh) words += twoDigit(lakh) + ' Lakh ';
+  const thousand = Math.floor(num / 1000); num %= 1000;
+  if (thousand) words += twoDigit(thousand) + ' Thousand ';
+  const hundred = Math.floor(num / 100); num %= 100;
+  if (hundred) words += small[hundred] + ' Hundred ';
+  if (num) words += (words ? 'and ' : '') + twoDigit(num) + ' ';
+  return words.trim() || 'Zero';
+}
+if (typeof document !== 'undefined') {
+  document.addEventListener('DOMContentLoaded', function() {
+    const addItemBtn = document.getElementById('add-item');
+    const itemsTableBody = document.querySelector('#items-table tbody');
+    const form = document.getElementById('quotation-form');
+    const output = document.getElementById('quotation-output');
+    function updateSerialNumbers() {
+      itemsTableBody.querySelectorAll('tr').forEach((row, i) => {
+        row.querySelector('.item-slno').textContent = i + 1;
+      });
+    }
+    function addItemRow() {
+      const row = document.createElement('tr');
+      row.innerHTML = `
+        <td class="item-slno"></td>
+        <td><input type="text" class="item-desc" placeholder="Item Description" required></td>
+        <td><input type="text" class="item-hsn" placeholder="HSN Code"></td>
+        <td><input type="number" class="item-qty" value="1" min="0" required></td>
+        <td><input type="number" class="item-price" value="0" min="0" required></td>
+        <td><input type="number" class="item-discount" value="0" min="0" max="100" step="0.01" placeholder="Discount %"></td>
+        <td class="item-amount">0.00</td>
+        <td><button type="button" class="remove-item">Remove</button></td>
+      `;
+      itemsTableBody.appendChild(row);
+      updateSerialNumbers();
+      const inputs = row.querySelectorAll('input');
+      inputs.forEach(input => input.addEventListener('input', updateItemAmount));
+      row.querySelector('.remove-item').addEventListener('click', () => {
+        row.remove();
+        updateSerialNumbers();
+      });
+    }
+    function updateItemAmount(e) {
+      const row = e.target.closest('tr');
+      const qty = parseFloat(row.querySelector('.item-qty').value) || 0;
+      const price = parseFloat(row.querySelector('.item-price').value) || 0;
+      const discountRate = parseFloat(row.querySelector('.item-discount').value) || 0;
+      const discountAmount = qty * price * discountRate / 100;
+      const amount = qty * price - discountAmount;
+      row.querySelector('.item-amount').textContent = amount.toFixed(2);
+    }
+    addItemBtn.addEventListener('click', addItemRow);
+    form.addEventListener('submit', function(e) {
+      e.preventDefault();
+      const data = new FormData(form);
+      const company = {
+        name: data.get('company-name'),
+        address: data.get('company-address'),
+        phone: data.get('company-phone'),
+        email: data.get('company-email')
+      };
+      const customer = {
+        name: data.get('customer-name'),
+        address: data.get('customer-address'),
+        phone: data.get('customer-phone'),
+        email: data.get('customer-email')
+      };
+      const quotationNumber = data.get('quotation-number');
+      const quotationDate = data.get('quotation-date');
+      const igstRate = parseFloat(data.get('igst-rate')) || 0;
+      const freightCharges = parseFloat(data.get('freight-charges')) || 0;
+      const bank = {
+        name: data.get('bank-name'),
+        account: data.get('bank-account'),
+        ifsc: data.get('bank-ifsc'),
+        branch: data.get('bank-branch')
+      };
+      const items = [];
+      itemsTableBody.querySelectorAll('tr').forEach(row => {
+        items.push({
+          description: row.querySelector('.item-desc').value,
+          hsn: row.querySelector('.item-hsn').value,
+          qty: parseFloat(row.querySelector('.item-qty').value) || 0,
+          price: parseFloat(row.querySelector('.item-price').value) || 0,
+          discount: parseFloat(row.querySelector('.item-discount').value) || 0,
+          amount: parseFloat(row.querySelector('.item-amount').textContent) || 0
+        });
+      });
+      const subtotal = items.reduce((sum, i) => sum + i.amount, 0);
+      const igstAmount = (subtotal * igstRate) / 100;
+      const total = subtotal + igstAmount + freightCharges;
+      // convert total to words (Rupees and Paise)
+      const rupeePart = Math.floor(total);
+      const paisePart = Math.round((total - rupeePart) * 100);
+      const rupeeWords = numberToWords(rupeePart);
+      const paiseWords = paisePart > 0 ? numberToWords(paisePart) : '';
+      let html = '<div class="quotation-print">';
+      html += `<div class="section"><strong>From:</strong><br>${company.name}<br>${company.address.replace(/\n/g,'<br>')}<br>Phone: ${company.phone}<br>Email: ${company.email}</div>`;
+      html += `<div class="section"><strong>To:</strong><br>${customer.name}<br>${customer.address.replace(/\n/g,'<br>')}<br>Phone: ${customer.phone}<br>Email: ${customer.email}</div>`;
+      html += `<div class="section quote-meta">Quotation No: ${quotationNumber}<br>Date: ${quotationDate}</div>`;
+      html += '<table class="quotation-table"><thead><tr><th>S.No</th><th>Description</th><th>HSN</th><th>Qty</th><th>Unit Price</th><th>Discount (%)</th><th>Amount</th></tr></thead><tbody>';
+      items.forEach((item, idx) => {
+        html += `<tr><td>${idx + 1}</td><td>${item.description}</td><td>${item.hsn}</td><td>${item.qty}</td><td>${item.price.toFixed(2)}</td><td>${item.discount.toFixed(2)}%</td><td>${item.amount.toFixed(2)}</td></tr>`;
+      });
+      html += '</tbody></table>';
+      html += `<div class="section amount-words"><strong>Amount in Words:</strong> Rupees ${rupeeWords}${paiseWords ? ' and ' + paiseWords + ' Paise' : ''} only</div>`;
+      html += '<div class="totals"><table>';
+      html += `<tr><td>Subtotal:</td><td>${subtotal.toFixed(2)}</td></tr>`;
+      html += `<tr><td>IGST (${igstRate}%):</td><td>${igstAmount.toFixed(2)}</td></tr>`;
+      html += `<tr><td>Freight:</td><td>${freightCharges.toFixed(2)}</td></tr>`;
+      html += `<tr><td><strong>Total:</strong></td><td><strong>${total.toFixed(2)}</strong></td></tr>`;
+      html += '</table></div>';
+      html += `<div class="section"><strong>Bank Details:</strong><br>Bank: ${bank.name}<br>Account: ${bank.account}<br>IFSC: ${bank.ifsc}<br>Branch: ${bank.branch}</div>`;
+      html += '<p class="disclaimer">This quotation is not a contract or a bill. It is our best guess at the total price for the service and goods described above. The customer will be billed after indicating acceptance of this quote. Payment will be due prior to the delivery of service and goods. Please fax or mail the signed quote to the address listed above.</p>';
+      html += '<button onclick="window.print()">Print / Save as PDF</button>';
+      html += '</div>';
+      output.innerHTML = html;
+      output.style.display = 'block';
+      document.getElementById('form-container').style.display = 'none';
+      addItemRow();
+    });
+  });
+}
+// Export for testing (Node.js)
+if (typeof module !== 'undefined' && module.exports) {
+  module.exports = { numberToWords };
+}

style.css ADDED Viewed

	@@ -0,0 +1,62 @@

+body {
+  font-family: Arial, sans-serif;
+  margin: 20px;
+}
+fieldset {
+  margin-bottom: 15px;
+  border: 1px solid #ccc;
+  padding: 10px;
+}
+legend {
+  font-weight: bold;
+}
+input, textarea {
+  width: 100%;
+  padding: 5px;
+  margin: 5px 0;
+  box-sizing: border-box;
+}
+#items-table, .quotation-table {
+  width: 100%;
+  border-collapse: collapse;
+  margin-bottom: 10px;
+}
+#items-table th, #items-table td,
+.quotation-table th, .quotation-table td {
+  border: 1px solid #ccc;
+  padding: 5px;
+  text-align: left;
+}
+button {
+  padding: 8px 12px;
+  margin: 5px;
+}
+.quotation-print {
+  max-width: 800px;
+  margin: auto;
+}
+.quotation-print h2 {
+  text-align: center;
+  margin-bottom: 20px;
+}
+.quotation-print .section {
+  margin-bottom: 15px;
+}
+.totals table {
+  float: right;
+  border: none;
+}
+.totals td {
+  padding: 4px 8px;
+  border: none;
+}
+.disclaimer {
+  font-size: 0.9em;
+  color: #555;
+  margin-top: 20px;
+}
+.quote-meta {
+  text-align: right;
+}

tests/test.js ADDED Viewed

	@@ -0,0 +1,33 @@

+const assert = require('assert');
+const { numberToWords } = require('../script.js');
+// Test cases for Indian number-to-words conversion (Crore/Lakh system)
+const cases = [
+  { num: 0, expected: 'Zero' },
+  { num: 5, expected: 'Five' },
+  { num: 15, expected: 'Fifteen' },
+  { num: 75, expected: 'Seventy Five' },
+  { num: 100, expected: 'One Hundred' },
+  { num: 569, expected: 'Five Hundred and Sixty Nine' },
+  { num: 1000, expected: 'One Thousand' },
+  { num: 1100, expected: 'One Thousand One Hundred' },
+  { num: 1234, expected: 'One Thousand Two Hundred and Thirty Four' },
+  { num: 10000, expected: 'Ten Thousand' },
+  { num: 54000, expected: 'Fifty Four Thousand' },
+  { num: 100000, expected: 'One Lakh' },
+  { num: 510000, expected: 'Five Lakh Ten Thousand' },
+  { num: 9999999, expected: 'Ninety Nine Lakh Ninety Nine Thousand Nine Hundred and Ninety Nine' },
+  { num: 10000000, expected: 'One Crore' },
+  { num: 12500000, expected: 'One Crore Twenty Five Lakh' },
+];
+cases.forEach(({ num, expected }) => {
+  const actual = numberToWords(num);
+  assert.strictEqual(
+    actual,
+    expected,
+    `${num} => "${actual}" (expected "${expected}")`
+  );
+});
+console.log('✅ All numberToWords tests passed');