add data to localstorage

data-manager.js

@@ -0,0 +1,425 @@
+class QuotationDataManager {
+    constructor() {
+        this.keys = {
+            company: "companyDetails",
+            bank: "bankDetails",
+            customer: "customerDetails",
+        };
+    }
+
+    // Save company details to localStorage
+    saveCompanyDetails(formData) {
+        const companyData = {
+            name: formData["company-name"] || "",
+            address: formData["company-address"] || "",
+            phone: formData["company-phone"] || "",
+            email: formData["company-email"] || "",
+            gstin: formData["company-gstin"] || "",
+        };
+
+        try {
+            localStorage.setItem(
+                this.keys.company,
+                JSON.stringify(companyData),
+            );
+        } catch (error) {
+            console.error("Error saving company details:", error);
+        }
+    }
+
+    // Save bank details to localStorage
+    saveBankDetails(formData) {
+        const bankData = {
+            name: formData["bank-name"] || "",
+            account: formData["bank-account"] || "",
+            ifsc: formData["bank-ifsc"] || "",
+            branch: formData["bank-branch"] || "",
+        };
+
+        try {
+            localStorage.setItem(this.keys.bank, JSON.stringify(bankData));
+        } catch (error) {
+            console.error("Error saving bank details:", error);
+        }
+    }
+
+    // Save customer details to sessionStorage (temporary)
+    saveCustomerDetails(formData) {
+        const customerData = {
+            name: formData["customer-name"] || "",
+            address: formData["customer-address"] || "",
+            phone: formData["customer-phone"] || "",
+            email: formData["customer-email"] || "",
+            gstin: formData["customer-gstin"] || "",
+        };
+
+        try {
+            sessionStorage.setItem(
+                this.keys.customer,
+                JSON.stringify(customerData),
+            );
+        } catch (error) {
+            console.error("Error saving customer details:", error);
+        }
+    }
+
+    // Load company details from localStorage
+    loadCompanyDetails() {
+        try {
+            const data = localStorage.getItem(this.keys.company);
+            return data ? JSON.parse(data) : null;
+        } catch (error) {
+            console.error("Error loading company details:", error);
+            return null;
+        }
+    }
+
+    // Load bank details from localStorage
+    loadBankDetails() {
+        try {
+            const data = localStorage.getItem(this.keys.bank);
+            return data ? JSON.parse(data) : null;
+        } catch (error) {
+            console.error("Error loading bank details:", error);
+            return null;
+        }
+    }
+
+    // Load customer details from sessionStorage
+    loadCustomerDetails() {
+        try {
+            const data = sessionStorage.getItem(this.keys.customer);
+            return data ? JSON.parse(data) : null;
+        } catch (error) {
+            console.error("Error loading customer details:", error);
+            return null;
+        }
+    }
+
+    // Clear all stored data
+    clearAllData() {
+        try {
+            localStorage.removeItem(this.keys.company);
+            localStorage.removeItem(this.keys.bank);
+            sessionStorage.removeItem(this.keys.customer);
+        } catch (error) {
+            console.error("Error clearing data:", error);
+        }
+    }
+
+    // Clear only customer data
+    clearCustomerData() {
+        try {
+            sessionStorage.removeItem(this.keys.customer);
+        } catch (error) {
+            console.error("Error clearing customer data:", error);
+        }
+    }
+
+    // Load all saved form data into the form
+    loadFormData() {
+        // Load company details
+        const companyData = this.loadCompanyDetails();
+        if (companyData) {
+            document.getElementById("company-name").value =
+                companyData.name || "";
+            document.getElementById("company-address").value =
+                companyData.address || "";
+            document.getElementById("company-phone").value =
+                companyData.phone || "";
+            document.getElementById("company-email").value =
+                companyData.email || "";
+            document.getElementById("company-gstin").value =
+                companyData.gstin || "";
+        }
+
+        // Load bank details
+        const bankData = this.loadBankDetails();
+        if (bankData) {
+            document.getElementById("bank-name").value = bankData.name || "";
+            document.getElementById("bank-account").value =
+                bankData.account || "";
+            document.getElementById("bank-ifsc").value = bankData.ifsc || "";
+            document.getElementById("bank-branch").value =
+                bankData.branch || "";
+        }
+
+        // Load customer details
+        const customerData = this.loadCustomerDetails();
+        if (customerData) {
+            document.getElementById("customer-name").value =
+                customerData.name || "";
+            document.getElementById("customer-address").value =
+                customerData.address || "";
+            document.getElementById("customer-phone").value =
+                customerData.phone || "";
+            document.getElementById("customer-email").value =
+                customerData.email || "";
+            document.getElementById("customer-gstin").value =
+                customerData.gstin || "";
+        }
+    }
+
+    // Get form data as object
+    getFormData() {
+        const formData = new FormData(
+            document.getElementById("quotation-form"),
+        );
+        const data = {};
+        for (let [key, value] of formData.entries()) {
+            data[key] = value;
+        }
+        return data;
+    }
+
+    // Setup auto-save functionality
+    setupAutoSave() {
+        // Company fields auto-save
+        const companyFields = [
+            "company-name",
+            "company-address",
+            "company-phone",
+            "company-email",
+            "company-gstin",
+        ];
+        companyFields.forEach((fieldId) => {
+            const field = document.getElementById(fieldId);
+            if (field) {
+                field.addEventListener("blur", () => {
+                    const formData = this.getFormData();
+                    this.saveCompanyDetails(formData);
+                    this.updateStorageStatus();
+                });
+            }
+        });
+
+        // Bank fields auto-save
+        const bankFields = [
+            "bank-name",
+            "bank-account",
+            "bank-ifsc",
+            "bank-branch",
+        ];
+        bankFields.forEach((fieldId) => {
+            const field = document.getElementById(fieldId);
+            if (field) {
+                field.addEventListener("blur", () => {
+                    const formData = this.getFormData();
+                    this.saveBankDetails(formData);
+                    this.updateStorageStatus();
+                });
+            }
+        });
+
+        // Customer fields auto-save (to sessionStorage)
+        const customerFields = [
+            "customer-name",
+            "customer-address",
+            "customer-phone",
+            "customer-email",
+            "customer-gstin",
+        ];
+        customerFields.forEach((fieldId) => {
+            const field = document.getElementById(fieldId);
+            if (field) {
+                field.addEventListener("blur", () => {
+                    const formData = this.getFormData();
+                    this.saveCustomerDetails(formData);
+                    this.updateStorageStatus();
+                });
+            }
+        });
+    }
+
+    // Check if localStorage is available
+    isLocalStorageAvailable() {
+        try {
+            const test = "__localStorage_test__";
+            localStorage.setItem(test, test);
+            localStorage.removeItem(test);
+            return true;
+        } catch (_error) {
+            return false;
+        }
+    }
+
+    // Show status modal
+    showModal(message, type = "info") {
+        const modal = document.getElementById("status-modal");
+        const modalMessage = document.getElementById("modal-message");
+
+        modalMessage.innerHTML = `<p class="text-${type === "error" ? "red" : "green"}-600">${message}</p>`;
+        modal.classList.remove("hidden");
+        modal.classList.add("flex");
+    }
+
+    // Hide status modal
+    hideModal() {
+        const modal = document.getElementById("status-modal");
+        modal.classList.add("hidden");
+        modal.classList.remove("flex");
+    }
+
+    // Setup event handlers for data management buttons
+    setupDataManagementHandlers() {
+        // Save data button
+        const saveButton = document.getElementById("save-data");
+        if (saveButton) {
+            saveButton.addEventListener("click", () => {
+                try {
+                    const formData = this.getFormData();
+                    this.saveCompanyDetails(formData);
+                    this.saveBankDetails(formData);
+                    this.saveCustomerDetails(formData);
+                    this.updateStorageStatus();
+                    this.showModal("✅ Data saved successfully!", "success");
+                } catch (error) {
+                    console.error("Error saving data:", error);
+                    this.showModal(
+                        "❌ Error saving data. Please try again.",
+                        "error",
+                    );
+                }
+            });
+        }
+
+        // Clear data button
+        const clearButton = document.getElementById("clear-data");
+        if (clearButton) {
+            clearButton.addEventListener("click", () => {
+                if (
+                    confirm(
+                        "Are you sure you want to clear all saved data? This cannot be undone.",
+                    )
+                ) {
+                    try {
+                        this.clearAllData();
+                        // Clear form fields
+                        document.getElementById("quotation-form").reset();
+                        this.updateStorageStatus();
+                        this.showModal(
+                            "🗑️ All saved data cleared successfully!",
+                            "success",
+                        );
+                    } catch (error) {
+                        console.error("Error clearing data:", error);
+                        this.showModal(
+                            "❌ Error clearing data. Please try again.",
+                            "error",
+                        );
+                    }
+                }
+            });
+        }
+
+        // Modal close button
+        const modalCloseButton = document.getElementById("modal-close");
+        if (modalCloseButton) {
+            modalCloseButton.addEventListener("click", () => {
+                this.hideModal();
+            });
+        }
+
+        // Close modal when clicking outside
+        const modal = document.getElementById("status-modal");
+        if (modal) {
+            modal.addEventListener("click", (e) => {
+                if (e.target === modal) {
+                    this.hideModal();
+                }
+            });
+        }
+
+        // Storage info panel handlers
+        const showStorageInfoButton =
+            document.getElementById("show-storage-info");
+        const hideStorageInfoButton =
+            document.getElementById("hide-storage-info");
+        const storageInfoPanel = document.getElementById("storage-info-panel");
+
+        if (showStorageInfoButton && storageInfoPanel) {
+            showStorageInfoButton.addEventListener("click", () => {
+                this.updateStorageStatus();
+                storageInfoPanel.classList.remove("hidden");
+            });
+        }
+
+        if (hideStorageInfoButton && storageInfoPanel) {
+            hideStorageInfoButton.addEventListener("click", () => {
+                storageInfoPanel.classList.add("hidden");
+            });
+        }
+    }
+
+    // Update storage status display
+    updateStorageStatus() {
+        const companyData = this.loadCompanyDetails();
+        const bankData = this.loadBankDetails();
+        const customerData = this.loadCustomerDetails();
+
+        // Update company status
+        const companyStatus = document.getElementById("company-storage-status");
+        if (companyStatus) {
+            if (companyData && companyData.name) {
+                companyStatus.textContent = `✅ Saved (${companyData.name})`;
+                companyStatus.className = "text-blue-600";
+            } else {
+                companyStatus.textContent = "❌ Not saved";
+                companyStatus.className = "text-gray-600";
+            }
+        }
+
+        // Update bank status
+        const bankStatus = document.getElementById("bank-storage-status");
+        if (bankStatus) {
+            if (bankData && bankData.name) {
+                bankStatus.textContent = `✅ Saved (${bankData.name})`;
+                bankStatus.className = "text-green-600";
+            } else {
+                bankStatus.textContent = "❌ Not saved";
+                bankStatus.className = "text-gray-600";
+            }
+        }
+
+        // Update customer status
+        const customerStatus = document.getElementById(
+            "customer-storage-status",
+        );
+        if (customerStatus) {
+            if (customerData && customerData.name) {
+                customerStatus.textContent = `✅ Saved in session (${customerData.name})`;
+                customerStatus.className = "text-yellow-600";
+            } else {
+                customerStatus.textContent = "❌ Not saved (Session only)";
+                customerStatus.className = "text-gray-600";
+            }
+        }
+    }
+
+    // Initialize data manager
+    init() {
+        if (!this.isLocalStorageAvailable()) {
+            console.warn(
+                "localStorage is not available. Data will not be saved.",
+            );
+            return;
+        }
+
+        // Load existing data when page loads
+        document.addEventListener("DOMContentLoaded", () => {
+            this.loadFormData();
+            this.setupAutoSave();
+            this.setupDataManagementHandlers();
+            this.updateStorageStatus();
+        });
+
+        // Clear customer data when page unloads (optional)
+        window.addEventListener("beforeunload", () => {
+            this.clearCustomerData();
+        });
+    }
+}
+
+// Initialize the data manager
+const dataManager = new QuotationDataManager();
+dataManager.init();

index.html

@@ -251,12 +251,30 @@
                             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>
+                    <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"
+                        >
+                            Generate Quotation
+                        </button>
+                        <div class="space-x-2">
+                            <button
+                                type="button"
+                                id="clear-data"
+                                class="bg-red-500 hover:bg-red-600 text-white font-bold py-2 px-4 rounded"
+                            >
+                                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"
+                            >
+                                Storage Info
+                            </button>
+                        </div>
+                    </div>
                 </form>
             </div>
             <div id="preview-container" class="w-1/2 pl-4">
@@ -269,9 +287,89 @@
                     </h2>
                     <div id="preview-content"></div>
                 </div>
+
+                <!-- Storage Information Panel -->
+                <div
+                    id="storage-info-panel"
+                    class="bg-white shadow-md rounded px-6 pt-4 pb-6 mb-4 hidden"
+                >
+                    <h3 class="text-lg font-bold mb-3">
+                        💾 Storage Information
+                    </h3>
+                    <div class="text-sm space-y-2">
+                        <div class="bg-blue-50 p-3 rounded">
+                            <h4 class="font-semibold text-blue-800">
+                                Company Details
+                            </h4>
+                            <p
+                                id="company-storage-status"
+                                class="text-blue-600"
+                            >
+                                Not saved
+                            </p>
+                        </div>
+                        <div class="bg-green-50 p-3 rounded">
+                            <h4 class="font-semibold text-green-800">
+                                Bank Details
+                            </h4>
+                            <p id="bank-storage-status" class="text-green-600">
+                                Not saved
+                            </p>
+                        </div>
+                        <div class="bg-yellow-50 p-3 rounded">
+                            <h4 class="font-semibold text-yellow-800">
+                                Customer Details
+                            </h4>
+                            <p
+                                id="customer-storage-status"
+                                class="text-yellow-600"
+                            >
+                                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
+                            </h4>
+                            <p class="text-gray-600 text-xs">
+                                Data is stored in your browser's localStorage.
+                                For maximum security:
+                                <br />• Use private/incognito browsing <br />•
+                                Clear data when done <br />• Don't use on shared
+                                computers
+                            </p>
+                        </div>
+                    </div>
+                    <button
+                        id="hide-storage-info"
+                        class="mt-4 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"
+                    >
+                        Hide
+                    </button>
+                </div>
             </div>
         </div>
         <div id="quotation-output" style="display: none"></div>
+
+        <!-- Data Management Status Modal -->
+        <div
+            id="status-modal"
+            class="fixed inset-0 bg-gray-600 bg-opacity-50 hidden items-center justify-center"
+        >
+            <div class="bg-white p-6 rounded-lg shadow-lg max-w-sm mx-auto">
+                <div id="modal-content" class="text-center">
+                    <div id="modal-message" class="mb-4"></div>
+                    <button
+                        id="modal-close"
+                        class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded-lg shadow-md transition-all duration-200 ease-in-out transform hover:scale-105"
+                    >
+                        OK
+                    </button>
+                </div>
+            </div>
+        </div>
+
+        <script src="data-manager.js"></script>
         <script src="script.js"></script>
     </body>
 </html>