feat: update experience for adding items

index.html

@@ -48,24 +48,33 @@
         </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">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">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"></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 Item</button>
+            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>

script.js

@@ -28,6 +28,9 @@ if (typeof document !== 'undefined') {
     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 = {
@@ -56,15 +59,23 @@ if (typeof document !== 'undefined') {
       };
       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 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)
@@ -205,52 +216,201 @@ if (typeof document !== 'undefined') {
       });
     }
 
+    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"><input type="text" class="item-desc" placeholder="Item Description" required></td>
-        <td data-label="HSN Code"><input type="text" class="item-hsn" placeholder="HSN Code"></td>
-        <td data-label="Qty"><input type="number" class="item-qty" value="1" min="0" required></td>
-        <td data-label="Unit Price"><input type="number" class="item-price" value="0" min="0" required></td>
-        <td data-label="Discount (%)"><input type="number" class="item-discount" value="0" min="0" max="100" step="0.01" placeholder="Discount %"></td>
+        <td data-label="Description">
+          <div class="tooltip">
+            <input type="text" class="item-desc" placeholder="Enter item description" required>
+            <span class="tooltiptext">Describe the item or service being quoted</span>
+          </div>
+        </td>
+        <td data-label="HSN Code">
+          <div class="tooltip">
+            <input type="text" class="item-hsn" placeholder="HSN Code">
+            <span class="tooltiptext">Harmonized System of Nomenclature code for tax purposes</span>
+          </div>
+        </td>
+        <td data-label="Qty">
+          <div class="tooltip">
+            <input type="number" class="item-qty" value="1" min="0" step="0.01" required>
+            <span class="tooltiptext">Quantity of items</span>
+          </div>
+        </td>
+        <td data-label="Unit Price">
+          <div class="tooltip">
+            <input type="number" class="item-price" value="0" min="0" step="0.01" required>
+            <span class="tooltiptext">Price per unit before discount</span>
+          </div>
+        </td>
+        <td data-label="Discount (%)">
+          <div class="tooltip">
+            <input type="number" class="item-discount" value="0" min="0" max="100" step="0.01" placeholder="0">
+            <span class="tooltiptext">Discount percentage (0-100)</span>
+          </div>
+        </td>
         <td class="item-amount" data-label="Amount">0.00</td>
-        <td data-label="Action"><button type="button" class="remove-item">Remove</button></td>
+        <td data-label="Action">
+          <button type="button" class="remove-item" title="Remove this item">
+            <span>×</span> Remove
+          </button>
+        </td>
       `;
+
       itemsTableBody.appendChild(row);
       updateSerialNumbers();
+
+      // Add event listeners to inputs
       const inputs = row.querySelectorAll('input');
-      inputs.forEach(input => input.addEventListener('input', () => {
-        updateItemAmount(event);
-        updatePreview();
-      }));
-      row.querySelector('.remove-item').addEventListener('click', () => {
-        row.remove();
-        updateSerialNumbers();
-        updatePreview();
+      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(e) {
-      const row = e.target.closest('tr');
+    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 (e) {
-      e.preventDefault();
+    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';

style.css

@@ -1,7 +1,198 @@
 @import "tailwindcss";
 
+/* 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 {