Spaces:

anuragshas
/

invoice-generator

Sleeping

App Files Files Community

anuragshas commited on Jul 1

Commit

0ea575d

1 Parent(s): 0439da7

fix: indentation issue

Browse files

Files changed (5) hide show

eslint.config.mjs +30 -25
index.html +94 -46
script.js +322 -265
style.css +191 -191
tests/test.js +94 -64

eslint.config.mjs CHANGED Viewed

@@ -10,35 +10,40 @@ const __dirname = path.dirname(__filename);
 const compat = new FlatCompat({
     baseDirectory: __dirname,
     recommendedConfig: js.configs.recommended,
-    allConfig: js.configs.all
 });
-export default defineConfig([{
-    extends: compat.extends("eslint:recommended"),
-    languageOptions: {
-        globals: {
-            ...globals.browser,
-            ...globals.node,
-        },
-        ecmaVersion: 12,
-        sourceType: "module",
-    },
-    rules: {
-        indent: ["error", 2],
-        quotes: ["error", "single"],
-        semi: ["error", "always"],
-        "no-unused-vars": ["error", {
-            args: "all",
-            argsIgnorePattern: "^_",
-            caughtErrors: "all",
-            caughtErrorsIgnorePattern: "^_",
-            destructuredArrayIgnorePattern: "^_",
-            varsIgnorePattern: "^_",
-            ignoreRestSiblings: true,
-        }],
     },
-}]);

 const compat = new FlatCompat({
     baseDirectory: __dirname,
     recommendedConfig: js.configs.recommended,
+    allConfig: js.configs.all,
 });
+export default defineConfig([
+    {
+        extends: compat.extends("eslint:recommended"),
+        languageOptions: {
+            globals: {
+                ...globals.browser,
+                ...globals.node,
+            },
+            ecmaVersion: 12,
+            sourceType: "module",
+        },
+        rules: {
+            indent: ["error", 4],
+            quotes: ["error", "double"],
+            semi: ["error", "always"],
+            "no-unused-vars": [
+                "error",
+                {
+                    args: "all",
+                    argsIgnorePattern: "^_",
+                    caughtErrors: "all",
+                    caughtErrorsIgnorePattern: "^_",
+                    destructuredArrayIgnorePattern: "^_",
+                    varsIgnorePattern: "^_",
+                    ignoreRestSiblings: true,
+                },
+            ],
+        },
     },
+]);

index.html CHANGED Viewed

@@ -1,111 +1,159 @@
-<!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 class="bg-gray-100">
-  <h1 class="text-3xl font-bold text-center my-8" id="top-header">Quotation Generator</h1>
   <div class="flex container mx-auto">
     <div id="form-container" class="w-1/2 pr-4">
       <form id="quotation-form" class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
         <fieldset class="border border-gray-300 p-4 mb-4">
-          <legend class="text-lg font-semibold mb-2">Your Company Details</legend>
           <input type="text" id="company-name" name="company-name" placeholder="Company Name" required
-            class="w-full p-2 border border-gray-300 rounded mb-2">
           <textarea id="company-address" name="company-address" placeholder="Address" required
             class="w-full p-2 border border-gray-300 rounded mb-2"></textarea>
           <input type="text" id="company-phone" name="company-phone" placeholder="Phone"
-            class="w-full p-2 border border-gray-300 rounded mb-2">
           <input type="email" id="company-email" name="company-email" placeholder="Email"
-            class="w-full p-2 border border-gray-300 rounded mb-2">
           <input type="text" id="company-gstin" name="company-gstin" placeholder="GSTIN"
-            class="w-full p-2 border border-gray-300 rounded">
         </fieldset>
         <fieldset class="border border-gray-300 p-4 mb-4">
-          <legend class="text-lg font-semibold mb-2">Customer Company Details</legend>
           <input type="text" id="customer-name" name="customer-name" placeholder="Customer Name" required
-            class="w-full p-2 border border-gray-300 rounded mb-2">
           <textarea id="customer-address" name="customer-address" placeholder="Address" required
             class="w-full p-2 border border-gray-300 rounded mb-2"></textarea>
           <input type="text" id="customer-phone" name="customer-phone" placeholder="Phone"
-            class="w-full p-2 border border-gray-300 rounded mb-2">
           <input type="email" id="customer-email" name="customer-email" placeholder="Email"
-            class="w-full p-2 border border-gray-300 rounded mb-2">
           <input type="text" id="customer-gstin" name="customer-gstin" placeholder="GSTIN"
-            class="w-full p-2 border border-gray-300 rounded">
         </fieldset>
         <fieldset class="border border-gray-300 p-4 mb-4">
-          <legend class="text-lg font-semibold mb-2">Quotation Details</legend>
           <input type="text" id="quotation-number" name="quotation-number" placeholder="Quotation Number" required
-            class="w-full p-2 border border-gray-300 rounded mb-2">
           <input type="date" id="quotation-date" name="quotation-date" required
-            class="w-full p-2 border border-gray-300 rounded">
         </fieldset>
         <fieldset class="border border-gray-300 p-4 mb-4">
-          <legend class="text-lg font-semibold mb-2">Items</legend>
           <div class="bg-blue-50 border border-blue-200 rounded p-3 mb-4 text-sm text-blue-800">
             <strong>💡 Tips:</strong>
             <ul class="list-disc list-inside mt-1 space-y-1">
-              <li>Use <kbd class="bg-gray-200 px-1 rounded">Enter</kbd> to move to the next field or add a new row</li>
-              <li>Use <kbd class="bg-gray-200 px-1 rounded">Ctrl+I</kbd> to quickly add a new item</li>
-              <li>Amounts are calculated automatically as you type</li>
-              <li>At least one item with description is required</li>
             </ul>
           </div>
           <table id="items-table" class="w-full mb-2">
             <thead>
               <tr class="bg-gray-200">
-                <th class="p-2 border border-gray-300">S.No</th>
-                <th class="p-2 border border-gray-300">Description *</th>
-                <th class="p-2 border border-gray-300">HSN Code</th>
-                <th class="p-2 border border-gray-300">Qty *</th>
-                <th class="p-2 border border-gray-300">Unit Price *</th>
-                <th class="p-2 border border-gray-300">Discount (%)</th>
-                <th class="p-2 border border-gray-300">Amount</th>
-                <th class="p-2 border border-gray-300">Action</th>
               </tr>
             </thead>
-            <tbody>
-            </tbody>
           </table>
           <button type="button" id="add-item"
-            class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Add Another Item</button>
         </fieldset>
         <fieldset class="border border-gray-300 p-4 mb-4">
-          <legend class="text-lg font-semibold mb-2">Additional Charges</legend>
           <label class="block mb-2">IGST (%)<input type="number" id="igst-rate" name="igst-rate" value="0" min="0"
-              class="w-full p-2 border border-gray-300 rounded"></label>
           <label class="block">Freight Charges<input type="number" id="freight-charges" name="freight-charges" value="0"
-              min="0" class="w-full p-2 border border-gray-300 rounded"></label>
         </fieldset>
         <fieldset class="border border-gray-300 p-4 mb-4">
-          <legend class="text-lg font-semibold mb-2">Bank Details</legend>
           <input type="text" id="bank-name" name="bank-name" placeholder="Bank Name" required
-            class="w-full p-2 border border-gray-300 rounded mb-2">
           <input type="text" id="bank-account" name="bank-account" placeholder="Account Number" required
-            class="w-full p-2 border border-gray-300 rounded mb-2">
           <input type="text" id="bank-ifsc" name="bank-ifsc" placeholder="IFSC Code" required
-            class="w-full p-2 border border-gray-300 rounded mb-2">
           <input type="text" id="bank-branch" name="bank-branch" placeholder="Branch" required
-            class="w-full p-2 border border-gray-300 rounded">
         </fieldset>
-        <button type="submit" class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded">Generate
-          Quotation</button>
       </form>
     </div>
     <div id="preview-container" class="w-1/2 pl-4">
       <div id="quotation-preview" class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
-        <h2 class="text-2xl font-bold text-center mb-4">Quotation Preview</h2>
         <div id="preview-content"></div>
       </div>
     </div>
   </div>
-  <div id="quotation-output" style="display:none;"></div>
   <script src="script.js"></script>
 </body>

+<!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 class="bg-gray-100">
+  <h1 class="text-3xl font-bold text-center my-8" id="top-header">
+    Quotation Generator
+  </h1>
   <div class="flex container mx-auto">
     <div id="form-container" class="w-1/2 pr-4">
       <form id="quotation-form" class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
         <fieldset class="border border-gray-300 p-4 mb-4">
+          <legend class="text-lg font-semibold mb-2">
+            Your Company Details
+          </legend>
           <input type="text" id="company-name" name="company-name" placeholder="Company Name" required
+            class="w-full p-2 border border-gray-300 rounded mb-2" />
           <textarea id="company-address" name="company-address" placeholder="Address" required
             class="w-full p-2 border border-gray-300 rounded mb-2"></textarea>
           <input type="text" id="company-phone" name="company-phone" placeholder="Phone"
+            class="w-full p-2 border border-gray-300 rounded mb-2" />
           <input type="email" id="company-email" name="company-email" placeholder="Email"
+            class="w-full p-2 border border-gray-300 rounded mb-2" />
           <input type="text" id="company-gstin" name="company-gstin" placeholder="GSTIN"
+            class="w-full p-2 border border-gray-300 rounded" />
         </fieldset>
         <fieldset class="border border-gray-300 p-4 mb-4">
+          <legend class="text-lg font-semibold mb-2">
+            Customer Company Details
+          </legend>
           <input type="text" id="customer-name" name="customer-name" placeholder="Customer Name" required
+            class="w-full p-2 border border-gray-300 rounded mb-2" />
           <textarea id="customer-address" name="customer-address" placeholder="Address" required
             class="w-full p-2 border border-gray-300 rounded mb-2"></textarea>
           <input type="text" id="customer-phone" name="customer-phone" placeholder="Phone"
+            class="w-full p-2 border border-gray-300 rounded mb-2" />
           <input type="email" id="customer-email" name="customer-email" placeholder="Email"
+            class="w-full p-2 border border-gray-300 rounded mb-2" />
           <input type="text" id="customer-gstin" name="customer-gstin" placeholder="GSTIN"
+            class="w-full p-2 border border-gray-300 rounded" />
         </fieldset>
         <fieldset class="border border-gray-300 p-4 mb-4">
+          <legend class="text-lg font-semibold mb-2">
+            Quotation Details
+          </legend>
           <input type="text" id="quotation-number" name="quotation-number" placeholder="Quotation Number" required
+            class="w-full p-2 border border-gray-300 rounded mb-2" />
           <input type="date" id="quotation-date" name="quotation-date" required
+            class="w-full p-2 border border-gray-300 rounded" />
         </fieldset>
         <fieldset class="border border-gray-300 p-4 mb-4">
+          <legend class="text-lg font-semibold mb-2">
+            Items
+          </legend>
           <div class="bg-blue-50 border border-blue-200 rounded p-3 mb-4 text-sm text-blue-800">
             <strong>💡 Tips:</strong>
             <ul class="list-disc list-inside mt-1 space-y-1">
+              <li>
+                Use
+                <kbd class="bg-gray-200 px-1 rounded">Enter</kbd>
+                to move to the next field or add a new row
+              </li>
+              <li>
+                Use
+                <kbd class="bg-gray-200 px-1 rounded">Ctrl+I</kbd>
+                to quickly add a new item
+              </li>
+              <li>
+                Amounts are calculated automatically as you
+                type
+              </li>
+              <li>
+                At least one item with description is
+                required
+              </li>
             </ul>
           </div>
           <table id="items-table" class="w-full mb-2">
             <thead>
               <tr class="bg-gray-200">
+                <th class="p-2 border border-gray-300">
+                  S.No
+                </th>
+                <th class="p-2 border border-gray-300">
+                  Description *
+                </th>
+                <th class="p-2 border border-gray-300">
+                  HSN Code
+                </th>
+                <th class="p-2 border border-gray-300">
+                  Qty *
+                </th>
+                <th class="p-2 border border-gray-300">
+                  Unit Price *
+                </th>
+                <th class="p-2 border border-gray-300">
+                  Discount (%)
+                </th>
+                <th class="p-2 border border-gray-300">
+                  Amount
+                </th>
+                <th class="p-2 border border-gray-300">
+                  Action
+                </th>
               </tr>
             </thead>
+            <tbody></tbody>
           </table>
           <button type="button" id="add-item"
+            class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
+            Add Another Item
+          </button>
         </fieldset>
         <fieldset class="border border-gray-300 p-4 mb-4">
+          <legend class="text-lg font-semibold mb-2">
+            Additional Charges
+          </legend>
           <label class="block mb-2">IGST (%)<input type="number" id="igst-rate" name="igst-rate" value="0" min="0"
+              class="w-full p-2 border border-gray-300 rounded" /></label>
           <label class="block">Freight Charges<input type="number" id="freight-charges" name="freight-charges" value="0"
+              min="0" class="w-full p-2 border border-gray-300 rounded" /></label>
         </fieldset>
         <fieldset class="border border-gray-300 p-4 mb-4">
+          <legend class="text-lg font-semibold mb-2">
+            Bank Details
+          </legend>
           <input type="text" id="bank-name" name="bank-name" placeholder="Bank Name" required
+            class="w-full p-2 border border-gray-300 rounded mb-2" />
           <input type="text" id="bank-account" name="bank-account" placeholder="Account Number" required
+            class="w-full p-2 border border-gray-300 rounded mb-2" />
           <input type="text" id="bank-ifsc" name="bank-ifsc" placeholder="IFSC Code" required
+            class="w-full p-2 border border-gray-300 rounded mb-2" />
           <input type="text" id="bank-branch" name="bank-branch" placeholder="Branch" required
+            class="w-full p-2 border border-gray-300 rounded" />
         </fieldset>
+        <button type="submit" class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded">
+          Generate Quotation
+        </button>
       </form>
     </div>
     <div id="preview-container" class="w-1/2 pl-4">
       <div id="quotation-preview" class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
+        <h2 class="text-2xl font-bold text-center mb-4">
+          Quotation Preview
+        </h2>
         <div id="preview-content"></div>
       </div>
     </div>
   </div>
+  <div id="quotation-output" style="display: none"></div>
   <script src="script.js"></script>
 </body>

script.js CHANGED Viewed

@@ -1,96 +1,137 @@
 // 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');
-    const previewContent = document.getElementById('preview-content');
-    // Add initial empty row
-    addItemRow();
-    function generateQuotationHTML(form) {
-      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'),
-        gstin: data.get('company-gstin')
-      };
-      const customer = {
-        name: data.get('customer-name'),
-        address: data.get('customer-address'),
-        phone: data.get('customer-phone'),
-        email: data.get('customer-email'),
-        gstin: data.get('customer-gstin')
-      };
-      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 => {
-        const desc = row.querySelector('.item-desc').value.trim();
-        if (desc) { // Only include rows with description
-          items.push({
-            description: desc,
-            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
-          });
-        }
-      });
-      if (items.length === 0) {
-        return '<div class="text-center text-gray-500 p-8">Please add items to generate quotation</div>';
-      }
-      const { subtotal, igstAmount, _total, rOff, finalTotal } = calculateQuotation(items, igstRate, freightCharges);
-      // convert total to words (Rupees and Paise)
-      const rupeePart = Math.floor(finalTotal);
-      const paisePart = Math.round((finalTotal - rupeePart) * 100);
-      const rupeeWords = numberToWords(rupeePart);
-      const paiseWords = paisePart > 0 ? numberToWords(paisePart) : '';
-      let html = `
         <div class="quotation-print">
           <div class="header">
             <div class="company-details">
               <h1>${company.name}</h1>
               {{address}}<br>
-              GST NO. : ${company.gstin || ''}<br>
               CONTACT NO : ${company.phone} ${company.email}
             </div>
             <div class="quotation-title">
@@ -112,7 +153,7 @@ if (typeof document !== 'undefined') {
             <strong>CUSTOMER INFO</strong><br>
             ${customer.name}<br>
             {{cutomer_address}}<br>
-            GST NO. : ${customer.gstin || ''}<br>
             CONTACT NO : ${customer.phone} ${customer.email}
           </div>
@@ -130,8 +171,8 @@ if (typeof document !== 'undefined') {
             </thead>
             <tbody>
       `;
-      items.forEach((item, idx) => {
-        html += `
               <tr>
                 <td>${idx + 1}</td>
                 <td>${item.description}</td>
@@ -142,13 +183,14 @@ if (typeof document !== 'undefined') {
                 <td>${item.amount.toFixed(2)}</td>
               </tr>
         `;
-      });
-      // Add empty rows to fill the page
-      for (let i = items.length; i < 7; i++) {
-        html += '<tr><td>&nbsp;</td><td></td><td></td><td></td><td></td><td></td><td></td></tr>';
-      }
-      html += `
             </tbody>
           </table>
@@ -157,7 +199,7 @@ if (typeof document !== 'undefined') {
               <div class="notes">
                 SPECIAL NOTES:<br><br>
                 AMOUNT IN WORDS:<br>
-                <strong>Rupees ${rupeeWords}${paiseWords ? ' and ' + paiseWords + ' Paise' : ''} only</strong><br><br>
                 Delivery : 7 to 10 working days after receiving PO<br><br>
                 BANK DETAILS FOR RTGS/ NEFT<br>
                 BANK:${bank.name}<br>
@@ -200,81 +242,91 @@ if (typeof document !== 'undefined') {
           <button onclick="window.print()">Print / Save as PDF</button>
         </div>
       `;
-      html = html.replace('{{address}}', company.address.replace(/\n/g, '<br>'));
-      html = html.replace('{{cutomer_address}}', customer.address.replace(/\n/g, '<br>'));
-      return html;
-    }
-    function updatePreview() {
-      const html = generateQuotationHTML(form);
-      previewContent.innerHTML = html;
-    }
-    function updateSerialNumbers() {
-      itemsTableBody.querySelectorAll('tr').forEach((row, i) => {
-        row.querySelector('.item-slno').textContent = i + 1;
-      });
-    }
-    function validateItemInput(input) {
-      const value = input.value;
-      const type = input.type;
-      input.classList.remove('input-error', 'input-success');
-      if (type === 'number' && value !== '') {
-        const num = parseFloat(value);
-        if (isNaN(num) || num < 0) {
-          input.classList.add('input-error');
-          return false;
-        } else {
-          input.classList.add('input-success');
         }
-      } else if (type === 'text' && input.hasAttribute('required') && value.trim() === '') {
-        input.classList.add('input-error');
-        return false;
-      }
-      return true;
-    }
-    function handleKeyNavigation(event) {
-      if (event.key === 'Tab' || event.key === 'Enter') {
-        const currentRow = event.target.closest('tr');
-        const inputs = Array.from(currentRow.querySelectorAll('input'));
-        const currentIndex = inputs.indexOf(event.target);
-        if (event.key === 'Enter') {
-          event.preventDefault();
-          // If we're at the last input in the row and it's the last row, add a new row
-          if (currentIndex === inputs.length - 1) {
-            const allRows = Array.from(itemsTableBody.querySelectorAll('tr'));
-            const currentRowIndex = allRows.indexOf(currentRow);
-            if (currentRowIndex === allRows.length - 1) {
-              // Last row - add new row and focus first input
-              addItemRow();
-              setTimeout(() => {
-                const newRow = itemsTableBody.lastElementChild;
-                newRow.querySelector('.item-desc').focus();
-              }, 50);
-            } else {
-              // Not last row - focus next row's first input
-              const nextRow = allRows[currentRowIndex + 1];
-              nextRow.querySelector('.item-desc').focus();
             }
-          } else {
-            // Move to next input in same row
-            inputs[currentIndex + 1].focus();
-          }
         }
-      }
-    }
-    function addItemRow() {
-      const row = document.createElement('tr');
-      row.innerHTML = `
         <td class="item-slno" data-label="S.No"></td>
         <td data-label="Description">
           <div class="tooltip">
@@ -314,134 +366,139 @@ if (typeof document !== 'undefined') {
         </td>
       `;
-      itemsTableBody.appendChild(row);
-      updateSerialNumbers();
-      // Add event listeners to inputs
-      const inputs = row.querySelectorAll('input');
-      inputs.forEach(input => {
-        input.addEventListener('input', (event) => {
-          validateItemInput(event.target);
-          updateItemAmount(event);
-          updatePreview();
-        });
-        input.addEventListener('keydown', handleKeyNavigation);
-        input.addEventListener('blur', (event) => {
-          validateItemInput(event.target);
-        });
-      });
-      // Add remove button listener
-      row.querySelector('.remove-item').addEventListener('click', (_event) => {
-        if (itemsTableBody.children.length > 1) {
-          row.remove();
-          updateSerialNumbers();
-          updatePreview();
-        } else {
-          // If it's the last row, just clear it instead of removing
-          inputs.forEach(input => {
-            if (input.type === 'number') {
-              input.value = input.classList.contains('item-qty') ? '1' : '0';
-            } else {
-              input.value = '';
-            }
-            input.classList.remove('input-error', 'input-success');
-          });
-          row.querySelector('.item-amount').textContent = '0.00';
-          updatePreview();
         }
-      });
-      // Auto-calculate initial amount
-      updateItemAmount({ target: row.querySelector('.item-qty') });
-    }
-    function updateItemAmount(event) {
-      const row = event.target.closest('tr');
-      if (!row) return;
-      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);
-      // Add visual feedback for calculated amount
-      const amountCell = row.querySelector('.item-amount');
-      amountCell.style.backgroundColor = amount > 0 ? '#f0fdf4' : '#fef2f2';
-    }
-    // Enhanced Add Item button
-    addItemBtn.addEventListener('click', () => {
-      addItemRow();
-      updatePreview();
-      // Focus the new row's first input
-      setTimeout(() => {
-        const newRow = itemsTableBody.lastElementChild;
-        newRow.querySelector('.item-desc').focus();
-      }, 50);
-    });
-    // Add keyboard shortcut for adding items (Ctrl+I)
-    document.addEventListener('keydown', (event) => {
-      if (event.ctrlKey && event.key === 'i') {
-        event.preventDefault();
-        addItemBtn.click();
-      }
-    });
-    form.addEventListener('input', updatePreview);
-    form.addEventListener('submit', function (event) {
-      event.preventDefault();
-      // Validate that we have at least one item with description
-      const hasValidItems = Array.from(itemsTableBody.querySelectorAll('tr')).some(row => {
-        return row.querySelector('.item-desc').value.trim() !== '';
-      });
-      if (!hasValidItems) {
-        alert('Please add at least one item with a description before generating the quotation.');
-        return;
-      }
-      const html = generateQuotationHTML(form);
-      output.innerHTML = html;
-      output.style.display = 'block';
-      document.getElementById('form-container').style.display = 'none';
-      document.getElementById('preview-container').style.display = 'none';
-      document.getElementById('top-header').style.display = 'none';
     });
-    // Initial preview
-    updatePreview();
-  });
 }
 function calculateQuotation(items, igstRate, freightCharges) {
-  const subtotal = items.reduce((sum, i) => sum + i.amount, 0);
-  const igstAmount = (subtotal * igstRate) / 100;
-  const total = subtotal + igstAmount + freightCharges;
-  const totalBeforeRoundOff = total;
-  const finalTotal = Math.round(totalBeforeRoundOff);
-  const rOff = totalBeforeRoundOff - finalTotal;
-  return {
-    subtotal,
-    igstAmount,
-    total,
-    rOff,
-    finalTotal
-  };
 }
 // Export for testing (Node.js)
-if (typeof module !== 'undefined' && module.exports) {
-  module.exports = { numberToWords, calculateQuotation };
 }

 // 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");
+        const previewContent = document.getElementById("preview-content");
+        // Add initial empty row
+        addItemRow();
+        function generateQuotationHTML(form) {
+            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"),
+                gstin: data.get("company-gstin"),
+            };
+            const customer = {
+                name: data.get("customer-name"),
+                address: data.get("customer-address"),
+                phone: data.get("customer-phone"),
+                email: data.get("customer-email"),
+                gstin: data.get("customer-gstin"),
+            };
+            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) => {
+                const desc = row.querySelector(".item-desc").value.trim();
+                if (desc) {
+                    // Only include rows with description
+                    items.push({
+                        description: desc,
+                        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,
+                    });
+                }
+            });
+            if (items.length === 0) {
+                return `
+                <div class="text-center text-gray-500 p-8">Please add items to generate quotation</div>
+                `;
+            }
+            const { subtotal, igstAmount, _total, rOff, finalTotal } =
+                calculateQuotation(items, igstRate, freightCharges);
+            // convert total to words (Rupees and Paise)
+            const rupeePart = Math.floor(finalTotal);
+            const paisePart = Math.round((finalTotal - rupeePart) * 100);
+            const rupeeWords = numberToWords(rupeePart);
+            const paiseWords = paisePart > 0 ? numberToWords(paisePart) : "";
+            let html = `
         <div class="quotation-print">
           <div class="header">
             <div class="company-details">
               <h1>${company.name}</h1>
               {{address}}<br>
+              GST NO. : ${company.gstin || ""}<br>
               CONTACT NO : ${company.phone} ${company.email}
             </div>
             <div class="quotation-title">
             <strong>CUSTOMER INFO</strong><br>
             ${customer.name}<br>
             {{cutomer_address}}<br>
+            GST NO. : ${customer.gstin || ""}<br>
             CONTACT NO : ${customer.phone} ${customer.email}
           </div>
             </thead>
             <tbody>
       `;
+            items.forEach((item, idx) => {
+                html += `
               <tr>
                 <td>${idx + 1}</td>
                 <td>${item.description}</td>
                 <td>${item.amount.toFixed(2)}</td>
               </tr>
         `;
+            });
+            // Add empty rows to fill the page
+            for (let i = items.length; i < 7; i++) {
+                html +=
+                    "<tr><td>&nbsp;</td><td></td><td></td><td></td><td></td><td></td><td></td></tr>";
+            }
+            html += `
             </tbody>
           </table>
               <div class="notes">
                 SPECIAL NOTES:<br><br>
                 AMOUNT IN WORDS:<br>
+                <strong>Rupees ${rupeeWords}${paiseWords ? " and " + paiseWords + " Paise" : ""} only</strong><br><br>
                 Delivery : 7 to 10 working days after receiving PO<br><br>
                 BANK DETAILS FOR RTGS/ NEFT<br>
                 BANK:${bank.name}<br>
           <button onclick="window.print()">Print / Save as PDF</button>
         </div>
       `;
+            html = html.replace(
+                "{{address}}",
+                company.address.replace(/\n/g, "<br>"),
+            );
+            html = html.replace(
+                "{{cutomer_address}}",
+                customer.address.replace(/\n/g, "<br>"),
+            );
+            return html;
         }
+        function updatePreview() {
+            const html = generateQuotationHTML(form);
+            previewContent.innerHTML = html;
+        }
+        function updateSerialNumbers() {
+            itemsTableBody.querySelectorAll("tr").forEach((row, i) => {
+                row.querySelector(".item-slno").textContent = i + 1;
+            });
+        }
+        function validateItemInput(input) {
+            const value = input.value;
+            const type = input.type;
+            input.classList.remove("input-error", "input-success");
+            if (type === "number" && value !== "") {
+                const num = parseFloat(value);
+                if (isNaN(num) || num < 0) {
+                    input.classList.add("input-error");
+                    return false;
+                } else {
+                    input.classList.add("input-success");
+                }
+            } else if (
+                type === "text" &&
+                input.hasAttribute("required") &&
+                value.trim() === ""
+            ) {
+                input.classList.add("input-error");
+                return false;
+            }
+            return true;
+        }
+        function handleKeyNavigation(event) {
+            if (event.key === "Tab" || event.key === "Enter") {
+                const currentRow = event.target.closest("tr");
+                const inputs = Array.from(currentRow.querySelectorAll("input"));
+                const currentIndex = inputs.indexOf(event.target);
+                if (event.key === "Enter") {
+                    event.preventDefault();
+                    // If we're at the last input in the row and it's the last row, add a new row
+                    if (currentIndex === inputs.length - 1) {
+                        const allRows = Array.from(itemsTableBody.querySelectorAll("tr"));
+                        const currentRowIndex = allRows.indexOf(currentRow);
+                        if (currentRowIndex === allRows.length - 1) {
+                            // Last row - add new row and focus first input
+                            addItemRow();
+                            setTimeout(() => {
+                                const newRow = itemsTableBody.lastElementChild;
+                                newRow.querySelector(".item-desc").focus();
+                            }, 50);
+                        } else {
+                            // Not last row - focus next row's first input
+                            const nextRow = allRows[currentRowIndex + 1];
+                            nextRow.querySelector(".item-desc").focus();
+                        }
+                    } else {
+                        // Move to next input in same row
+                        inputs[currentIndex + 1].focus();
+                    }
+                }
             }
         }
+        function addItemRow() {
+            const row = document.createElement("tr");
+            row.innerHTML = `
         <td class="item-slno" data-label="S.No"></td>
         <td data-label="Description">
           <div class="tooltip">
         </td>
       `;
+            itemsTableBody.appendChild(row);
+            updateSerialNumbers();
+            // Add event listeners to inputs
+            const inputs = row.querySelectorAll("input");
+            inputs.forEach((input) => {
+                input.addEventListener("input", (event) => {
+                    validateItemInput(event.target);
+                    updateItemAmount(event);
+                    updatePreview();
+                });
+                input.addEventListener("keydown", handleKeyNavigation);
+                input.addEventListener("blur", (event) => {
+                    validateItemInput(event.target);
+                });
+            });
+            // Add remove button listener
+            row.querySelector(".remove-item").addEventListener("click", (_event) => {
+                if (itemsTableBody.children.length > 1) {
+                    row.remove();
+                    updateSerialNumbers();
+                    updatePreview();
+                } else {
+                    // If it's the last row, just clear it instead of removing
+                    inputs.forEach((input) => {
+                        if (input.type === "number") {
+                            input.value = input.classList.contains("item-qty") ? "1" : "0";
+                        } else {
+                            input.value = "";
+                        }
+                        input.classList.remove("input-error", "input-success");
+                    });
+                    row.querySelector(".item-amount").textContent = "0.00";
+                    updatePreview();
+                }
+            });
+            // Auto-calculate initial amount
+            updateItemAmount({ target: row.querySelector(".item-qty") });
         }
+        function updateItemAmount(event) {
+            const row = event.target.closest("tr");
+            if (!row) return;
+            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);
+            // Add visual feedback for calculated amount
+            const amountCell = row.querySelector(".item-amount");
+            amountCell.style.backgroundColor = amount > 0 ? "#f0fdf4" : "#fef2f2";
+        }
+        // Enhanced Add Item button
+        addItemBtn.addEventListener("click", () => {
+            addItemRow();
+            updatePreview();
+            // Focus the new row's first input
+            setTimeout(() => {
+                const newRow = itemsTableBody.lastElementChild;
+                newRow.querySelector(".item-desc").focus();
+            }, 50);
+        });
+        // Add keyboard shortcut for adding items (Ctrl+I)
+        document.addEventListener("keydown", (event) => {
+            if (event.ctrlKey && event.key === "i") {
+                event.preventDefault();
+                addItemBtn.click();
+            }
+        });
+        form.addEventListener("input", updatePreview);
+        form.addEventListener("submit", function (event) {
+            event.preventDefault();
+            // Validate that we have at least one item with description
+            const hasValidItems = Array.from(
+                itemsTableBody.querySelectorAll("tr"),
+            ).some((row) => {
+                return row.querySelector(".item-desc").value.trim() !== "";
+            });
+            if (!hasValidItems) {
+                alert(
+                    "Please add at least one item with a description before generating the quotation.",
+                );
+                return;
+            }
+            const html = generateQuotationHTML(form);
+            output.innerHTML = html;
+            output.style.display = "block";
+            document.getElementById("form-container").style.display = "none";
+            document.getElementById("preview-container").style.display = "none";
+            document.getElementById("top-header").style.display = "none";
+        });
+        // Initial preview
+        updatePreview();
     });
 }
 function calculateQuotation(items, igstRate, freightCharges) {
+    const subtotal = items.reduce((sum, i) => sum + i.amount, 0);
+    const igstAmount = (subtotal * igstRate) / 100;
+    const total = subtotal + igstAmount + freightCharges;
+    const totalBeforeRoundOff = total;
+    const finalTotal = Math.round(totalBeforeRoundOff);
+    const rOff = totalBeforeRoundOff - finalTotal;
+    return {
+        subtotal,
+        igstAmount,
+        total,
+        rOff,
+        finalTotal,
+    };
 }
 // Export for testing (Node.js)
+if (typeof module !== "undefined" && module.exports) {
+    module.exports = { numberToWords, calculateQuotation };
 }

style.css CHANGED Viewed

@@ -2,362 +2,362 @@
 /* Enhanced Items Table Styling */
 #items-table {
-  border-collapse: collapse;
-  margin-bottom: 1rem;
 }
 #items-table th {
-  background-color: #f8fafc;
-  font-weight: 600;
-  font-size: 0.875rem;
-  color: #374151;
-  border: 1px solid #d1d5db;
-  padding: 0.75rem 0.5rem;
-  text-align: left;
 }
 #items-table td {
-  border: 1px solid #d1d5db;
-  padding: 0.25rem;
-  vertical-align: middle;
 }
 #items-table input {
-  width: 100%;
-  padding: 0.5rem;
-  border: 1px solid #d1d5db;
-  border-radius: 0.375rem;
-  font-size: 0.875rem;
-  transition:
-    border-color 0.2s,
-    box-shadow 0.2s;
 }
 #items-table input:focus {
-  outline: none;
-  border-color: #3b82f6;
-  box-shadow: 0 0 0 3px rgb(59 130 246 / 10%);
 }
 #items-table input:invalid {
-  border-color: #ef4444;
 }
 #items-table .item-slno {
-  text-align: center;
-  font-weight: 600;
-  color: #6b7280;
-  background-color: #f9fafb;
-  width: 3rem;
 }
 #items-table .item-amount {
-  text-align: right;
-  font-weight: 600;
-  color: #059669;
-  background-color: #f0fdf4;
-  font-family: "Courier New", monospace;
-  padding: 0.5rem;
-  border: 2px solid #d1fae5;
 }
 #items-table .remove-item {
-  background-color: #ef4444;
-  color: white;
-  border: none;
-  padding: 0.375rem 0.75rem;
-  border-radius: 0.375rem;
-  font-size: 0.75rem;
-  cursor: pointer;
-  transition: background-color 0.2s;
-  display: flex;
-  align-items: center;
-  gap: 0.25rem;
 }
 #items-table .remove-item:hover {
-  background-color: #dc2626;
 }
 #items-table .remove-item:focus {
-  outline: none;
-  box-shadow: 0 0 0 2px rgb(239 68 68 / 50%);
 }
 /* Column widths for better UX */
 #items-table th:nth-child(1) {
-  width: 4rem;
 }
 /* S.No */
 #items-table th:nth-child(2) {
-  width: 30%;
 }
 /* Description */
 #items-table th:nth-child(3) {
-  width: 8rem;
 }
 /* HSN Code */
 #items-table th:nth-child(4) {
-  width: 5rem;
 }
 /* Qty */
 #items-table th:nth-child(5) {
-  width: 8rem;
 }
 /* Unit Price */
 #items-table th:nth-child(6) {
-  width: 7rem;
 }
 /* Discount */
 #items-table th:nth-child(7) {
-  width: 8rem;
 }
 /* Amount */
 #items-table th:nth-child(8) {
-  width: 6rem;
 }
 /* Action */
 /* Add Item Button Enhancement */
 #add-item {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  margin-top: 0.5rem;
 }
 #add-item::before {
-  content: "+";
-  font-size: 1.25rem;
-  font-weight: bold;
 }
 /* Empty state styling */
 .items-empty-state {
-  text-align: center;
-  color: #6b7280;
-  font-style: italic;
-  padding: 2rem;
-  background-color: #f9fafb;
-  border: 2px dashed #d1d5db;
-  margin-bottom: 1rem;
 }
 /* Row highlighting on hover */
 #items-table tbody tr:hover {
-  background-color: #f8fafc;
 }
 /* Input error states */
 .input-error {
-  border-color: #ef4444 !important;
-  background-color: #fef2f2;
 }
 .input-success {
-  border-color: #10b981 !important;
 }
 /* Tooltips */
 .tooltip {
-  position: relative;
-  display: inline-block;
 }
 .tooltip .tooltiptext {
-  visibility: hidden;
-  width: 200px;
-  background-color: #374151;
-  color: white;
-  text-align: center;
-  border-radius: 6px;
-  padding: 5px;
-  position: absolute;
-  z-index: 1;
-  bottom: 125%;
-  left: 50%;
-  margin-left: -100px;
-  opacity: 0;
-  transition: opacity 0.3s;
-  font-size: 0.75rem;
 }
 .tooltip:hover .tooltiptext {
-  visibility: visible;
-  opacity: 1;
 }
 .quotation-print {
-  max-width: 800px;
-  margin: auto;
-  border: 1px solid #000;
-  padding: 20px;
 }
 .quotation-print h2 {
-  text-align: center;
-  margin-bottom: 20px;
 }
 .quotation-print .section {
-  margin-bottom: 15px;
 }
 .totals table {
-  float: right;
-  border: none;
-  width: 100%;
-  border-collapse: collapse;
 }
 .totals td {
-  border: 1px solid #000;
-  padding: 8px;
 }
 .disclaimer {
-  color: #555;
-  margin-top: 20px;
-  font-size: 10px;
-  text-align: justify;
-  border-top: 1px solid #000;
-  padding-top: 10px;
 }
 .quote-meta {
-  text-align: right;
 }
 .header {
-  display: flex;
-  justify-content: space-between;
-  margin-bottom: 20px;
 }
 .company-details h1 {
-  margin: 0;
-  font-size: 24px;
-  color: #036;
-  font-family: Arial, Helvetica, sans-serif;
 }
 .quotation-title h1 {
-  margin: 0;
-  font-size: 24px;
-  color: #036;
-  text-align: right;
 }
 .quote-meta table {
-  border-collapse: collapse;
-  width: 100%;
 }
 .quote-meta td {
-  border: 1px solid #000;
-  padding: 5px;
 }
 .customer-info {
-  border: 1px solid #000;
-  padding: 10px;
-  margin-bottom: 20px;
 }
 .items-table-print {
-  width: 100%;
-  border-collapse: collapse;
-  margin-bottom: 20px;
 }
 .items-table-print th,
 .items-table-print td {
-  border: 1px solid #000;
-  padding: 8px;
-  text-align: left;
 }
 .items-table-print thead th {
-  background-color: #e0f2f7;
 }
 .footer {
-  margin-top: 20px;
 }
 .notes-and-total {
-  display: flex;
-  justify-content: space-between;
 }
 .notes {
-  width: 60%;
-  font-size: 12px;
 }
 .totals {
-  width: 35%;
 }
 .totals td:first-child {
-  text-align: right;
 }
 .thank-you {
-  text-align: center;
-  margin-top: 20px;
-  font-weight: bold;
 }
 @media print {
-  html,
-  body {
-    height: 100%;
-    margin: 0;
-    padding: 0;
-  }
-  @page {
-    size: a4;
-    margin: 10mm;
-  }
-  body {
-    font-size: 12pt;
-  }
-  .quotation-print {
-    max-width: 100%;
-    padding: 20px;
-    margin: auto;
-    border: 1px solid #000;
-  }
-  .items-table-print,
-  .items-table-print tr,
-  .items-table-print td {
-    page-break-inside: avoid !important;
-  }
-  .header,
-  .customer-info,
-  .footer,
-  .notes-and-total,
-  .disclaimer,
-  .thank-you {
-    page-break-inside: avoid !important;
-  }
-  button {
-    display: none;
-  }
 }

 /* Enhanced Items Table Styling */
 #items-table {
+    border-collapse: collapse;
+    margin-bottom: 1rem;
 }
 #items-table th {
+    background-color: #f8fafc;
+    font-weight: 600;
+    font-size: 0.875rem;
+    color: #374151;
+    border: 1px solid #d1d5db;
+    padding: 0.75rem 0.5rem;
+    text-align: left;
 }
 #items-table td {
+    border: 1px solid #d1d5db;
+    padding: 0.25rem;
+    vertical-align: middle;
 }
 #items-table input {
+    width: 100%;
+    padding: 0.5rem;
+    border: 1px solid #d1d5db;
+    border-radius: 0.375rem;
+    font-size: 0.875rem;
+    transition:
+        border-color 0.2s,
+        box-shadow 0.2s;
 }
 #items-table input:focus {
+    outline: none;
+    border-color: #3b82f6;
+    box-shadow: 0 0 0 3px rgb(59 130 246 / 10%);
 }
 #items-table input:invalid {
+    border-color: #ef4444;
 }
 #items-table .item-slno {
+    text-align: center;
+    font-weight: 600;
+    color: #6b7280;
+    background-color: #f9fafb;
+    width: 3rem;
 }
 #items-table .item-amount {
+    text-align: right;
+    font-weight: 600;
+    color: #059669;
+    background-color: #f0fdf4;
+    font-family: "Courier New", monospace;
+    padding: 0.5rem;
+    border: 2px solid #d1fae5;
 }
 #items-table .remove-item {
+    background-color: #ef4444;
+    color: white;
+    border: none;
+    padding: 0.375rem 0.75rem;
+    border-radius: 0.375rem;
+    font-size: 0.75rem;
+    cursor: pointer;
+    transition: background-color 0.2s;
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
 }
 #items-table .remove-item:hover {
+    background-color: #dc2626;
 }
 #items-table .remove-item:focus {
+    outline: none;
+    box-shadow: 0 0 0 2px rgb(239 68 68 / 50%);
 }
 /* Column widths for better UX */
 #items-table th:nth-child(1) {
+    width: 4rem;
 }
 /* S.No */
 #items-table th:nth-child(2) {
+    width: 30%;
 }
 /* Description */
 #items-table th:nth-child(3) {
+    width: 8rem;
 }
 /* HSN Code */
 #items-table th:nth-child(4) {
+    width: 5rem;
 }
 /* Qty */
 #items-table th:nth-child(5) {
+    width: 8rem;
 }
 /* Unit Price */
 #items-table th:nth-child(6) {
+    width: 7rem;
 }
 /* Discount */
 #items-table th:nth-child(7) {
+    width: 8rem;
 }
 /* Amount */
 #items-table th:nth-child(8) {
+    width: 6rem;
 }
 /* Action */
 /* Add Item Button Enhancement */
 #add-item {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    margin-top: 0.5rem;
 }
 #add-item::before {
+    content: "+";
+    font-size: 1.25rem;
+    font-weight: bold;
 }
 /* Empty state styling */
 .items-empty-state {
+    text-align: center;
+    color: #6b7280;
+    font-style: italic;
+    padding: 2rem;
+    background-color: #f9fafb;
+    border: 2px dashed #d1d5db;
+    margin-bottom: 1rem;
 }
 /* Row highlighting on hover */
 #items-table tbody tr:hover {
+    background-color: #f8fafc;
 }
 /* Input error states */
 .input-error {
+    border-color: #ef4444 !important;
+    background-color: #fef2f2;
 }
 .input-success {
+    border-color: #10b981 !important;
 }
 /* Tooltips */
 .tooltip {
+    position: relative;
+    display: inline-block;
 }
 .tooltip .tooltiptext {
+    visibility: hidden;
+    width: 200px;
+    background-color: #374151;
+    color: white;
+    text-align: center;
+    border-radius: 6px;
+    padding: 5px;
+    position: absolute;
+    z-index: 1;
+    bottom: 125%;
+    left: 50%;
+    margin-left: -100px;
+    opacity: 0;
+    transition: opacity 0.3s;
+    font-size: 0.75rem;
 }
 .tooltip:hover .tooltiptext {
+    visibility: visible;
+    opacity: 1;
 }
 .quotation-print {
+    max-width: 800px;
+    margin: auto;
+    border: 1px solid #000;
+    padding: 20px;
 }
 .quotation-print h2 {
+    text-align: center;
+    margin-bottom: 20px;
 }
 .quotation-print .section {
+    margin-bottom: 15px;
 }
 .totals table {
+    float: right;
+    border: none;
+    width: 100%;
+    border-collapse: collapse;
 }
 .totals td {
+    border: 1px solid #000;
+    padding: 8px;
 }
 .disclaimer {
+    color: #555;
+    margin-top: 20px;
+    font-size: 10px;
+    text-align: justify;
+    border-top: 1px solid #000;
+    padding-top: 10px;
 }
 .quote-meta {
+    text-align: right;
 }
 .header {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 20px;
 }
 .company-details h1 {
+    margin: 0;
+    font-size: 24px;
+    color: #036;
+    font-family: Arial, Helvetica, sans-serif;
 }
 .quotation-title h1 {
+    margin: 0;
+    font-size: 24px;
+    color: #036;
+    text-align: right;
 }
 .quote-meta table {
+    border-collapse: collapse;
+    width: 100%;
 }
 .quote-meta td {
+    border: 1px solid #000;
+    padding: 5px;
 }
 .customer-info {
+    border: 1px solid #000;
+    padding: 10px;
+    margin-bottom: 20px;
 }
 .items-table-print {
+    width: 100%;
+    border-collapse: collapse;
+    margin-bottom: 20px;
 }
 .items-table-print th,
 .items-table-print td {
+    border: 1px solid #000;
+    padding: 8px;
+    text-align: left;
 }
 .items-table-print thead th {
+    background-color: #e0f2f7;
 }
 .footer {
+    margin-top: 20px;
 }
 .notes-and-total {
+    display: flex;
+    justify-content: space-between;
 }
 .notes {
+    width: 60%;
+    font-size: 12px;
 }
 .totals {
+    width: 35%;
 }
 .totals td:first-child {
+    text-align: right;
 }
 .thank-you {
+    text-align: center;
+    margin-top: 20px;
+    font-weight: bold;
 }
 @media print {
+    html,
+    body {
+        height: 100%;
+        margin: 0;
+        padding: 0;
+    }
+    @page {
+        size: a4;
+        margin: 10mm;
+    }
+    body {
+        font-size: 12pt;
+    }
+    .quotation-print {
+        max-width: 100%;
+        padding: 20px;
+        margin: auto;
+        border: 1px solid #000;
+    }
+    .items-table-print,
+    .items-table-print tr,
+    .items-table-print td {
+        page-break-inside: avoid !important;
+    }
+    .header,
+    .customer-info,
+    .footer,
+    .notes-and-total,
+    .disclaimer,
+    .thank-you {
+        page-break-inside: avoid !important;
+    }
+    button {
+        display: none;
+    }
 }

tests/test.js CHANGED Viewed

@@ -1,79 +1,109 @@
-const assert = require('assert');
-const { numberToWords, calculateQuotation } = 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');
 // --- Tests for calculateQuotation ---
 const calculationCases = [
-  {
-    name: 'Basic case with one item',
-    items: [{ amount: 100 }],
-    igstRate: 18,
-    freightCharges: 50,
-    expected: { subtotal: 100, igstAmount: 18, total: 168, finalTotal: 168, rOff: 0 }
-  },
-  {
-    name: 'Multiple items',
-    items: [{ amount: 100 }, { amount: 250.50 }],
-    igstRate: 18,
-    freightCharges: 50,
-    expected: { subtotal: 350.50, igstAmount: 63.09, total: 463.59, finalTotal: 464, rOff: -0.41 }
-  },
-  {
-    name: 'No IGST or freight',
-    items: [{ amount: 500 }],
-    igstRate: 0,
-    freightCharges: 0,
-    expected: { subtotal: 500, igstAmount: 0, total: 500, finalTotal: 500, rOff: 0 }
-  },
-  {
-    name: 'Rounding down',
-    items: [{ amount: 99.20 }],
-    igstRate: 10, // 9.92
-    freightCharges: 0, // total = 109.12
-    expected: { subtotal: 99.20, igstAmount: 9.92, total: 109.12, finalTotal: 109, rOff: 0.12 }
-  }
 ];
-calculationCases.forEach(({ name, items, igstRate, freightCharges, expected }) => {
-  const actual = calculateQuotation(items, igstRate, freightCharges);
-  // Need to compare floating point numbers with a tolerance
-  Object.keys(expected).forEach(key => {
-    assert(
-      Math.abs(actual[key] - expected[key]) < 0.001,
-      `[${name}] ${key} => ${actual[key]} (expected ${expected[key]})`
-    );
-  });
-});
-console.log('✅ All calculateQuotation tests passed');

+const assert = require("assert");
+const { numberToWords, calculateQuotation } = 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");
 // --- Tests for calculateQuotation ---
 const calculationCases = [
+    {
+        name: "Basic case with one item",
+        items: [{ amount: 100 }],
+        igstRate: 18,
+        freightCharges: 50,
+        expected: {
+            subtotal: 100,
+            igstAmount: 18,
+            total: 168,
+            finalTotal: 168,
+            rOff: 0,
+        },
+    },
+    {
+        name: "Multiple items",
+        items: [{ amount: 100 }, { amount: 250.5 }],
+        igstRate: 18,
+        freightCharges: 50,
+        expected: {
+            subtotal: 350.5,
+            igstAmount: 63.09,
+            total: 463.59,
+            finalTotal: 464,
+            rOff: -0.41,
+        },
+    },
+    {
+        name: "No IGST or freight",
+        items: [{ amount: 500 }],
+        igstRate: 0,
+        freightCharges: 0,
+        expected: {
+            subtotal: 500,
+            igstAmount: 0,
+            total: 500,
+            finalTotal: 500,
+            rOff: 0,
+        },
+    },
+    {
+        name: "Rounding down",
+        items: [{ amount: 99.2 }],
+        igstRate: 10, // 9.92
+        freightCharges: 0, // total = 109.12
+        expected: {
+            subtotal: 99.2,
+            igstAmount: 9.92,
+            total: 109.12,
+            finalTotal: 109,
+            rOff: 0.12,
+        },
+    },
 ];
+calculationCases.forEach(
+    ({ name, items, igstRate, freightCharges, expected }) => {
+        const actual = calculateQuotation(items, igstRate, freightCharges);
+        // Need to compare floating point numbers with a tolerance
+        Object.keys(expected).forEach((key) => {
+            assert(
+                Math.abs(actual[key] - expected[key]) < 0.001,
+                `[${name}] ${key} => ${actual[key]} (expected ${expected[key]})`,
+            );
+        });
+    },
+);
+console.log("✅ All calculateQuotation tests passed");