fix: ui improvements

data-manager.js

@@ -338,9 +338,10 @@ class QuotationDataManager {
         const storageInfoPanel = document.getElementById("storage-info-panel");
 
         if (showStorageInfoButton && storageInfoPanel) {
-            showStorageInfoButton.addEventListener("click", () => {
+            showStorageInfoButton.addEventListener("click", (e) => {
+                e.stopPropagation();
                 this.updateStorageStatus();
-                storageInfoPanel.classList.remove("hidden");
+                storageInfoPanel.classList.toggle("hidden");
             });
         }
 
@@ -349,6 +350,16 @@ class QuotationDataManager {
                 storageInfoPanel.classList.add("hidden");
             });
         }
+
+        // Hide popover when clicking outside
+        document.addEventListener("click", (e) => {
+            if (
+                !storageInfoPanel.contains(e.target) &&
+                e.target !== showStorageInfoButton
+            ) {
+                storageInfoPanel.classList.add("hidden");
+            }
+        });
     }
 
     // Update storage status display

index.html

@@ -11,14 +11,14 @@
         <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">
+        <div class="flex flex-col lg:flex-row container mx-auto gap-4">
+            <div id="form-container" class="w-full lg:w-1/2">
                 <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">
+                    <fieldset class="border border-gray-300 p-4 mb-4 rounded-lg">
+                        <legend class="text-lg font-semibold mb-2 text-gray-700">
                             Your Company Details
                         </legend>
                         <input
@@ -27,39 +27,39 @@
                             name="company-name"
                             placeholder="Company Name"
                             required
-                            class="w-full p-2 border border-gray-300 rounded mb-2"
+                            class="w-full p-2 border border-gray-300 rounded mb-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
                         />
                         <textarea
                             id="company-address"
                             name="company-address"
                             placeholder="Address"
                             required
-                            class="w-full p-2 border border-gray-300 rounded mb-2"
+                            class="w-full p-2 border border-gray-300 rounded mb-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
                         ></textarea>
                         <input
                             type="text"
                             id="company-phone"
                             name="company-phone"
                             placeholder="Phone"
-                            class="w-full p-2 border border-gray-300 rounded mb-2"
+                            class="w-full p-2 border border-gray-300 rounded mb-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
                         />
                         <input
                             type="email"
                             id="company-email"
                             name="company-email"
                             placeholder="Email"
-                            class="w-full p-2 border border-gray-300 rounded mb-2"
+                            class="w-full p-2 border border-gray-300 rounded mb-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
                         />
                         <input
                             type="text"
                             id="company-gstin"
                             name="company-gstin"
                             placeholder="GSTIN"
-                            class="w-full p-2 border border-gray-300 rounded"
+                            class="w-full p-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
                         />
                     </fieldset>
-                    <fieldset class="border border-gray-300 p-4 mb-4">
-                        <legend class="text-lg font-semibold mb-2">
+                    <fieldset class="border border-gray-300 p-4 mb-4 rounded-lg">
+                        <legend class="text-lg font-semibold mb-2 text-gray-700">
                             Customer Company Details
                         </legend>
                         <input
@@ -68,39 +68,39 @@
                             name="customer-name"
                             placeholder="Customer Name"
                             required
-                            class="w-full p-2 border border-gray-300 rounded mb-2"
+                            class="w-full p-2 border border-gray-300 rounded mb-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
                         />
                         <textarea
                             id="customer-address"
                             name="customer-address"
                             placeholder="Address"
                             required
-                            class="w-full p-2 border border-gray-300 rounded mb-2"
+                            class="w-full p-2 border border-gray-300 rounded mb-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
                         ></textarea>
                         <input
                             type="text"
                             id="customer-phone"
                             name="customer-phone"
                             placeholder="Phone"
-                            class="w-full p-2 border border-gray-300 rounded mb-2"
+                            class="w-full p-2 border border-gray-300 rounded mb-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
                         />
                         <input
                             type="email"
                             id="customer-email"
                             name="customer-email"
                             placeholder="Email"
-                            class="w-full p-2 border border-gray-300 rounded mb-2"
+                            class="w-full p-2 border border-gray-300 rounded mb-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
                         />
                         <input
                             type="text"
                             id="customer-gstin"
                             name="customer-gstin"
                             placeholder="GSTIN"
-                            class="w-full p-2 border border-gray-300 rounded"
+                            class="w-full p-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
                         />
                     </fieldset>
-                    <fieldset class="border border-gray-300 p-4 mb-4">
-                        <legend class="text-lg font-semibold mb-2">
+                    <fieldset class="border border-gray-300 p-4 mb-4 rounded-lg">
+                        <legend class="text-lg font-semibold mb-2 text-gray-700">
                             Quotation Details
                         </legend>
                         <input
@@ -109,18 +109,18 @@
                             name="quotation-number"
                             placeholder="Quotation Number"
                             required
-                            class="w-full p-2 border border-gray-300 rounded mb-2"
+                            class="w-full p-2 border border-gray-300 rounded mb-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
                         />
                         <input
                             type="date"
                             id="quotation-date"
                             name="quotation-date"
                             required
-                            class="w-full p-2 border border-gray-300 rounded"
+                            class="w-full p-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
                         />
                     </fieldset>
-                    <fieldset class="border border-gray-300 p-4 mb-4">
-                        <legend class="text-lg font-semibold mb-2">
+                    <fieldset class="border border-gray-300 p-4 mb-4 rounded-lg">
+                        <legend class="text-lg font-semibold mb-2 text-gray-700">
                             Items
                         </legend>
                         <div
@@ -152,47 +152,73 @@
                                 </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>
+                        <div class="overflow-x-auto">
+                            <table
+                                id="items-table"
+                                class="w-full mb-2 border-collapse"
+                            >
+                                <thead class="hidden lg:table-header-group">
+                                    <tr class="bg-gray-200">
+                                        <th
+                                            class="p-2 border border-gray-300 text-left text-sm font-semibold text-gray-700 w-16"
+                                        >
+                                            S.No
+                                        </th>
+                                        <th
+                                            class="p-2 border border-gray-300 text-left text-sm font-semibold text-gray-700 w-2/5"
+                                        >
+                                            Description *
+                                        </th>
+                                        <th
+                                            class="p-2 border border-gray-300 text-left text-sm font-semibold text-gray-700 w-24"
+                                        >
+                                            HSN Code
+                                        </th>
+                                        <th
+                                            class="p-2 border border-gray-300 text-left text-sm font-semibold text-gray-700 w-20"
+                                        >
+                                            Qty *
+                                        </th>
+                                        <th
+                                            class="p-2 border border-gray-300 text-left text-sm font-semibold text-gray-700 w-32"
+                                        >
+                                            Unit Price *
+                                        </th>
+                                        <th
+                                            class="p-2 border border-gray-300 text-left text-sm font-semibold text-gray-700 w-28"
+                                        >
+                                            Discount (%)
+                                        </th>
+                                        <th
+                                            class="p-2 border border-gray-300 text-left text-sm font-semibold text-gray-700 w-32"
+                                        >
+                                            Amount
+                                        </th>
+                                        <th
+                                            class="p-2 border border-gray-300 text-left text-sm font-semibold text-gray-700 w-24"
+                                        >
+                                            Action
+                                        </th>
+                                    </tr>
+                                </thead>
+                                <tbody
+                                    class="divide-y divide-gray-200 lg:table-row-group"
+                                ></tbody>
+                            </table>
+                        </div>
                         <button
                             type="button"
                             id="add-item"
-                            class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
+                            class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded flex items-center gap-2 mt-2"
                         >
+                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+                                <path fill-rule="evenodd" d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z" clip-rule="evenodd" />
+                            </svg>
                             Add Another Item
                         </button>
                     </fieldset>
-                    <fieldset class="border border-gray-300 p-4 mb-4">
-                        <legend class="text-lg font-semibold mb-2">
+                    <fieldset class="border border-gray-300 p-4 mb-4 rounded-lg">
+                        <legend class="text-lg font-semibold mb-2 text-gray-700">
                             Additional Charges
                         </legend>
                         <label class="block mb-2"
@@ -202,7 +228,7 @@
                                 name="igst-rate"
                                 value="0"
                                 min="0"
-                                class="w-full p-2 border border-gray-300 rounded"
+                                class="w-full p-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
                         /></label>
                         <label class="block"
                             >Freight Charges<input
@@ -211,11 +237,11 @@
                                 name="freight-charges"
                                 value="0"
                                 min="0"
-                                class="w-full p-2 border border-gray-300 rounded"
+                                class="w-full p-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
                         /></label>
                     </fieldset>
-                    <fieldset class="border border-gray-300 p-4 mb-4">
-                        <legend class="text-lg font-semibold mb-2">
+                    <fieldset class="border border-gray-300 p-4 mb-4 rounded-lg">
+                        <legend class="text-lg font-semibold mb-2 text-gray-700">
                             Bank Details
                         </legend>
                         <input
@@ -224,7 +250,7 @@
                             name="bank-name"
                             placeholder="Bank Name"
                             required
-                            class="w-full p-2 border border-gray-300 rounded mb-2"
+                            class="w-full p-2 border border-gray-300 rounded mb-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
                         />
                         <input
                             type="text"
@@ -232,7 +258,7 @@
                             name="bank-account"
                             placeholder="Account Number"
                             required
-                            class="w-full p-2 border border-gray-300 rounded mb-2"
+                            class="w-full p-2 border border-gray-300 rounded mb-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
                         />
                         <input
                             type="text"
@@ -240,7 +266,7 @@
                             name="bank-ifsc"
                             placeholder="IFSC Code"
                             required
-                            class="w-full p-2 border border-gray-300 rounded mb-2"
+                            class="w-full p-2 border border-gray-300 rounded mb-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
                         />
                         <input
                             type="text"
@@ -248,13 +274,13 @@
                             name="bank-branch"
                             placeholder="Branch"
                             required
-                            class="w-full p-2 border border-gray-300 rounded"
+                            class="w-full p-2 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
                         />
                     </fieldset>
                     <div class="flex justify-between items-center">
                         <button
                             type="submit"
-                            class="bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded"
+                            class="bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded-lg shadow-md transition-all duration-200 ease-in-out transform hover:scale-105"
                         >
                             Generate Quotation
                         </button>
@@ -262,14 +288,14 @@
                             <button
                                 type="button"
                                 id="clear-data"
-                                class="bg-red-500 hover:bg-red-600 text-white font-bold py-2 px-4 rounded"
+                                class="bg-red-500 hover:bg-red-600 text-white font-bold py-2 px-4 rounded-lg shadow-md transition-all duration-200 ease-in-out transform hover:scale-105"
                             >
                                 Clear Saved Data
                             </button>
                             <button
                                 type="button"
                                 id="show-storage-info"
-                                class="bg-gray-500 hover:bg-gray-600 text-white font-bold py-2 px-4 rounded"
+                                class="bg-gray-500 hover:bg-gray-600 text-white font-bold py-2 px-4 rounded-lg shadow-md transition-all duration-200 ease-in-out transform hover:scale-105"
                             >
                                 Storage Info
                             </button>
@@ -277,7 +303,7 @@
                     </div>
                 </form>
             </div>
-            <div id="preview-container" class="w-1/2 pl-4">
+            <div id="preview-container" class="w-full lg:w-1/2">
                 <div
                     id="quotation-preview"
                     class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4"
@@ -291,13 +317,17 @@
                 <!-- Storage Information Panel -->
                 <div
                     id="storage-info-panel"
-                    class="bg-white shadow-md rounded px-6 pt-4 pb-6 mb-4 hidden"
+                    class="absolute z-10 bg-white shadow-lg rounded-lg px-6 pt-4 pb-6 mb-4 hidden w-full max-w-md"
+                    style="top: 50px; right: 0;"
                 >
-                    <h3 class="text-lg font-bold mb-3">
-                        💾 Storage Information
+                    <h3 class="text-lg font-bold mb-3 flex items-center gap-2">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.57-.588-3.756z" />
+                        </svg>
+                        Storage Information
                     </h3>
                     <div class="text-sm space-y-2">
-                        <div class="bg-blue-50 p-3 rounded">
+                        <div class="bg-blue-50 p-3 rounded-lg">
                             <h4 class="font-semibold text-blue-800">
                                 Company Details
                             </h4>
@@ -308,7 +338,7 @@
                                 Not saved
                             </p>
                         </div>
-                        <div class="bg-green-50 p-3 rounded">
+                        <div class="bg-green-50 p-3 rounded-lg">
                             <h4 class="font-semibold text-green-800">
                                 Bank Details
                             </h4>
@@ -316,7 +346,7 @@
                                 Not saved
                             </p>
                         </div>
-                        <div class="bg-yellow-50 p-3 rounded">
+                        <div class="bg-yellow-50 p-3 rounded-lg">
                             <h4 class="font-semibold text-yellow-800">
                                 Customer Details
                             </h4>
@@ -327,11 +357,14 @@
                                 Not saved (Session only)
                             </p>
                         </div>
-                        <div class="bg-gray-50 p-3 rounded mt-3">
-                            <h4 class="font-semibold text-gray-800">
-                                ⚠️ Security Notice
+                        <div class="bg-gray-100 p-3 rounded-lg mt-3">
+                            <h4 class="font-semibold text-gray-800 flex items-center gap-1">
+                                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
+                                    <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 3.001-1.742 3.001H4.42c-1.53 0-2.493-1.667-1.743-3.001l5.58-9.92zM10 13a1 1 0 110-2 1 1 0 010 2zm-1-8a1 1 0 00-1 1v3a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
+                                </svg>
+                                Security Notice
                             </h4>
-                            <p class="text-gray-600 text-xs">
+                            <p class="text-gray-600 text-xs mt-1">
                                 Data is stored in your browser's localStorage.
                                 For maximum security:
                                 <br />• Use private/incognito browsing <br />•
@@ -349,12 +382,23 @@
                 </div>
             </div>
         </div>
-        <div id="quotation-output" style="display: none"></div>
+        <div id="quotation-output" class="hidden fixed inset-0 bg-gray-900 bg-opacity-75 z-50 overflow-y-auto">
+            <div class="flex items-center justify-center min-h-screen">
+                <div class="bg-white p-8 rounded-lg shadow-2xl max-w-4xl w-full mx-auto my-8 relative">
+                    <button id="close-quotation" class="absolute top-4 right-4 text-gray-500 hover:text-gray-800">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+                        </svg>
+                    </button>
+                    <div id="quotation-content"></div>
+                </div>
+            </div>
+        </div>
 
         <!-- Data Management Status Modal -->
         <div
             id="status-modal"
-            class="fixed inset-0 bg-gray-600 bg-opacity-50 hidden items-center justify-center"
+            class="fixed inset-0 bg-gray-600 bg-opacity-50 hidden items-center justify-center z-50"
         >
             <div class="bg-white p-6 rounded-lg shadow-lg max-w-sm mx-auto">
                 <div id="modal-content" class="text-center">

script.js

@@ -277,22 +277,26 @@ if (typeof document !== "undefined") {
             const value = input.value;
             const type = input.type;
 
-            input.classList.remove("input-error", "input-success");
+            input.classList.remove(
+                "border-red-500",
+                "bg-red-100",
+                "border-green-500",
+            );
 
             if (type === "number" && value !== "") {
                 const num = parseFloat(value);
                 if (isNaN(num) || num < 0) {
-                    input.classList.add("input-error");
+                    input.classList.add("border-red-500", "bg-red-100");
                     return false;
                 } else {
-                    input.classList.add("input-success");
+                    input.classList.add("border-green-500");
                 }
             } else if (
                 type === "text" &&
                 input.hasAttribute("required") &&
                 value.trim() === ""
             ) {
-                input.classList.add("input-error");
+                input.classList.add("border-red-500", "bg-red-100");
                 return false;
             }
 
@@ -337,41 +341,43 @@ if (typeof document !== "undefined") {
 
         function addItemRow() {
             const row = document.createElement("tr");
+            row.className =
+                "block lg:table-row border-b-2 lg:border-b-0 lg:border-gray-200";
             row.innerHTML = `
-        <td class="item-slno" data-label="S.No"></td>
-        <td data-label="Description">
+        <td class="item-slno p-2 border border-gray-300 text-center font-semibold text-gray-600 bg-gray-50 w-16 hidden lg:table-cell" data-label="S.No"></td>
+        <td class="p-2 border border-gray-300 block lg:table-cell" data-label="Description">
           <div class="tooltip">
-            <input type="text" class="item-desc" placeholder="Enter item description" required>
+            <input type="text" class="item-desc w-full p-2 border border-gray-300 rounded text-sm focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="Enter item description" required>
             <span class="tooltiptext">Describe the item or service being quoted</span>
           </div>
         </td>
-        <td data-label="HSN Code">
+        <td class="p-2 border border-gray-300 block lg:table-cell" data-label="HSN Code">
           <div class="tooltip">
-            <input type="text" class="item-hsn" placeholder="HSN Code">
+            <input type="text" class="item-hsn w-full p-2 border border-gray-300 rounded text-sm focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="HSN Code">
             <span class="tooltiptext">Harmonized System of Nomenclature code for tax purposes</span>
           </div>
         </td>
-        <td data-label="Qty">
+        <td class="p-2 border border-gray-300 block lg:table-cell" data-label="Qty">
           <div class="tooltip">
-            <input type="number" class="item-qty" value="1" min="0" step="0.01" required>
+            <input type="number" class="item-qty w-full p-2 border border-gray-300 rounded text-sm focus:outline-none focus:ring-2 focus:ring-blue-500" value="1" min="0" step="0.01" required>
             <span class="tooltiptext">Quantity of items</span>
           </div>
         </td>
-        <td data-label="Unit Price">
+        <td class="p-2 border border-gray-300 block lg:table-cell" data-label="Unit Price">
           <div class="tooltip">
-            <input type="number" class="item-price" value="0" min="0" step="0.01" required>
+            <input type="number" class="item-price w-full p-2 border border-gray-300 rounded text-sm focus:outline-none focus:ring-2 focus:ring-blue-500" value="0" min="0" step="0.01" required>
             <span class="tooltiptext">Price per unit before discount</span>
           </div>
         </td>
-        <td data-label="Discount (%)">
+        <td class="p-2 border border-gray-300 block lg:table-cell" data-label="Discount (%)">
           <div class="tooltip">
-            <input type="number" class="item-discount" value="0" min="0" max="100" step="0.01" placeholder="0">
+            <input type="number" class="item-discount w-full p-2 border border-gray-300 rounded text-sm focus:outline-none focus:ring-2 focus:ring-blue-500" 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" title="Remove this item">
+        <td class="item-amount p-2 border border-gray-300 text-right font-semibold text-green-700 bg-green-50 font-mono block lg:table-cell" data-label="Amount">0.00</td>
+        <td class="p-2 border border-gray-300 block lg:table-cell" data-label="Action">
+          <button type="button" class="remove-item bg-red-500 hover:bg-red-600 text-white text-xs font-bold py-1 px-2 rounded flex items-center gap-1" title="Remove this item">
             <span>×</span> Remove
           </button>
         </td>
@@ -448,8 +454,10 @@ if (typeof document !== "undefined") {
 
             // Add visual feedback for calculated amount
             const amountCell = row.querySelector(".item-amount");
-            amountCell.style.backgroundColor =
-                amount > 0 ? "#f0fdf4" : "#fef2f2";
+            amountCell.classList.toggle("bg-green-50", amount > 0);
+            amountCell.classList.toggle("text-green-700", amount > 0);
+            amountCell.classList.toggle("bg-red-50", amount <= 0);
+            amountCell.classList.toggle("text-red-700", amount <= 0);
         }
 
         // Enhanced Add Item button
@@ -458,10 +466,11 @@ if (typeof document !== "undefined") {
             updatePreview();
 
             // Focus the new row's first input
+            const newRow = itemsTableBody.lastElementChild;
+            newRow.scrollIntoView({ behavior: "smooth", block: "center" });
             setTimeout(() => {
-                const newRow = itemsTableBody.lastElementChild;
                 newRow.querySelector(".item-desc").focus();
-            }, 50);
+            }, 100);
         });
 
         // Add keyboard shortcut for adding items (Ctrl+I)
@@ -491,12 +500,14 @@ if (typeof document !== "undefined") {
                 return;
             }
 
+            const quotationContent = document.getElementById("quotation-content");
             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";
+            quotationContent.innerHTML = html;
+            output.classList.remove("hidden");
+        });
+
+        document.getElementById("close-quotation").addEventListener("click", () => {
+            output.classList.add("hidden");
         });
 
         // Initial preview

style.css

@@ -1,171 +1,5 @@
 @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;