static/js/invoice.js

@@ -1,62 +1,271 @@
-// Subcontractor autocomplete functionality
-    $(document).ready(function () {
-      $("#subcontractor").keyup(function () {
+// $(document).ready(function () {
+//     // ===============================
+//     // FORM / TABLE TOGGLE
+//     // ===============================
+//     if ($('#addForm').length && $('#addTable').length) {
+//         $('#addForm').show();
+//         $('#addTable').hide();
+
+//         $('#addButton').click(function () {
+//             $('#addForm').show();
+//             $('#addTable').hide();
+//         });
+
+//         $('#displayButton').click(function () {
+//             $('#addForm').hide();
+//             $('#addTable').show();
+//         });
+//     }
+
+//     // ===============================
+//     // Subcontractor autocomplete
+//     // ===============================
+//     $("#subcontractor").keyup(function () {
+//         let query = $(this).val();
+//         if (query !== "") {
+//             $.ajax({
+//                 url: "/search_subcontractor",
+//                 method: "POST",
+//                 data: { query: query },
+//                 success: function (data) {
+//                     $("#subcontractor_list").fadeIn().html(data);
+//                 }
+//             });
+//         } else {
+//             $("#subcontractor_list").fadeOut();
+//         }
+//     });
+
+//     $(document).on("click", "li", function () {
+//         $("#subcontractor").val($(this).text());
+//         $("#subcontractor_id").val($(this).attr("data-id"));
+//         $("#subcontractor_list").fadeOut();
+//     });
+
+//     // Focus
+//     if (document.getElementById('subcontractor')) {
+//         document.getElementById('subcontractor').focus();
+//     }
+
+//     // ===============================
+//     // ADD INVOICE
+//     // ===============================
+//     if ($('#invoiceForm').length && window.location.href.includes('add_invoice')) {
+//         $("#invoiceForm").on("submit", function (e) {
+//             e.preventDefault();
+//             let formData = $(this).serialize();
+
+//             $.ajax({
+//                 url: '/add_invoice',
+//                 method: 'POST',
+//                 data: formData,
+//                 dataType: 'json',
+//                 success: function (response) {
+//                     if (response.status === "success") {
+//                         alert(response.message || "Invoice added successfully!");
+//                         $('#invoiceForm')[0].reset(); // clear form
+//                         $('#addForm').hide();
+//                         $('#addTable').show(); // switch to table
+//                         location.reload(); // optional refresh
+//                     } else {
+//                         alert(response.message || "Error adding invoice.");
+//                     }
+//                 },
+//                 error: function (xhr) {
+//                     alert(xhr.responseJSON?.message || "Submission failed. Please try again.");
+//                 }
+//             });
+//         });
+//     }
+// // Example AJAX update function
+// function updateInvoice(invoiceId, formElement) {
+//     const formData = $(formElement).serialize();
+
+//     $.ajax({
+//         url: '/update_invoice/' + invoiceId,
+//         method: 'POST',
+//         data: formData,
+//         dataType: 'json',
+//         success: function(response) {
+//             if(response.status === "success") {
+//                 alert(response.message || "Invoice updated successfully!");
+                
+//                 // ✅ Hide Add Form, Show Table
+//                 $('#addForm').hide();
+//                 $('#addTable').show();
+
+//                 // Optional: reload table or refresh page
+//                 location.reload();
+//             } else {
+//                 alert(response.message || "Update failed. Please try again.");
+//             }
+//         },
+//         error: function(xhr) {
+//             alert(xhr.responseJSON?.message || "Error updating invoice.");
+//         }
+//     });
+// }
+
+// // ===============================
+// // DELETE INVOICE
+// // ===============================
+// function deleteInvoice(invoiceId, element) {
+//     if (!confirm("Are you sure you want to delete this invoice?")) return;
+
+//     $.ajax({
+//         url: '/delete_invoice/' + invoiceId,
+//         method: 'GET',
+//         dataType: 'json',
+//         success: function (response) {
+//             alert(response.message || "Invoice deleted successfully!");
+//             if (element) $(element).closest("tr").remove();
+//         },
+//         error: function (xhr) {
+//             alert(xhr.responseJSON?.message || "Error deleting invoice. Please try again.");
+//         }
+//     });
+// }
+
+$(document).ready(function () {
+    // ===============================
+    // FORM / TABLE TOGGLE
+    // ===============================
+    if ($('#addForm').length && $('#addTable').length) {
+        // Default: show form, hide table
+        $('#addForm').show();
+        $('#addTable').hide();
+
+        // ✅ Check URL hash to show table instead
+        if (window.location.hash === "#addTable") {
+            $('#addForm').hide();
+            $('#addTable').show();
+        }
+
+        $('#addButton').click(function () {
+            $('#addForm').show();
+            $('#addTable').hide();
+        });
+
+        $('#displayButton').click(function () {
+            $('#addForm').hide();
+            $('#addTable').show();
+        });
+    }
+
+    // ===============================
+    // Subcontractor autocomplete
+    // ===============================
+    $("#subcontractor").keyup(function () {
         let query = $(this).val();
         if (query !== "") {
-          $.ajax({
-            url: "/search_subcontractor",
-            method: "POST",
-            data: { query: query },
-            success: function (data) {
-              $("#subcontractor_list").fadeIn().html(data);
-            }
-          });
+            $.ajax({
+                url: "/search_subcontractor",
+                method: "POST",
+                data: { query: query },
+                success: function (data) {
+                    $("#subcontractor_list").fadeIn().html(data);
+                }
+            });
         } else {
-          $("#subcontractor_list").fadeOut();
+            $("#subcontractor_list").fadeOut();
         }
-      });
+    });
 
-      $(document).on("click", "li", function () {
+    $(document).on("click", "li", function () {
         $("#subcontractor").val($(this).text());
         $("#subcontractor_id").val($(this).attr("data-id"));
         $("#subcontractor_list").fadeOut();
-      });
     });
 
-    // Success Alert: show alert and reload after 3 seconds
-    function showSuccessAlert() {
-      const alertBox = document.getElementById("invoiceSuccessAlert");
-      alertBox.classList.add("show");
-      setTimeout(() => {
-        alertBox.classList.remove("show");
-        // Reload page or redirect after alert hides
-        window.location.href = '/add_invoice';
-      }, 3000);
+    // Focus
+    if (document.getElementById('subcontractor')) {
+        document.getElementById('subcontractor').focus();
     }
 
-    // Submit form via AJAX
-    $("#invoiceForm").on("submit", function (e) {
-      e.preventDefault();
-      let formData = $(this).serialize();
-      $.ajax({
-        url: '/add_invoice',
-        method: 'POST',
-        data: formData,
-        success: function (response) {
-          if(response.status === "success") {
-            showSuccessAlert();
-          } else {
-            alert(response.message);
-          }
-        },
-        error: function (xhr, status, error) {
-          alert("Submission failed: " + error);
-        }
-      });
-    });
+    // ===============================
+    // ADD INVOICE
+    // ===============================
+    if ($('#invoiceForm').length && window.location.href.includes('add_invoice')) {
+        $("#invoiceForm").on("submit", function (e) {
+            e.preventDefault();
+            let formData = $(this).serialize();
 
+            $.ajax({
+                url: '/add_invoice',
+                method: 'POST',
+                data: formData,
+                dataType: 'json',
+                success: function (response) {
+                    if (response.status === "success") {
+                        alert(response.message || "Invoice added successfully!");
+                        $('#invoiceForm')[0].reset(); // clear form
+                        $('#addForm').hide();
+                        $('#addTable').show(); // switch to table
+                        location.reload(); // optional refresh
+                    } else {
+                        alert(response.message || "Error adding invoice.");
+                    }
+                },
+                error: function (xhr) {
+                    let msg = xhr.responseJSON?.message || "Submission failed. Please try again.";
+                    alert(msg);
+                }
+            });
+        });
+    }
 
+    // ===============================
+    // UPDATE INVOICE
+    // ===============================
+    function updateInvoice(invoiceId, formElement) {
+        const formData = $(formElement).serialize();
 
-window.onload = function () {
-        document.getElementById('subcontractor').focus();
-    };
+        $.ajax({
+            url: '/update_invoice/' + invoiceId,
+            method: 'POST',
+            data: formData,
+            dataType: 'json',
+            success: function(response) {
+                if(response.status === "success") {
+                    alert(response.message || "Invoice updated successfully!");
+
+                    // Redirect to Add Invoice page's table part
+                    window.location.href = "/add_invoice#addTable";
+                } else {
+                    alert(response.message || "Update failed. Please try again.");
+                }
+            },
+            error: function(xhr) {
+                let msg = xhr.responseJSON?.message || "Error updating invoice.";
+                alert(msg);
+            }
+        });
+    }
+    window.updateInvoice = updateInvoice; // make globally accessible
+
+    // ===============================
+    // DELETE INVOICE
+    // ===============================
+    function deleteInvoice(invoiceId, element) {
+        if (!confirm("Are you sure you want to delete this invoice?")) return;
+
+        $.ajax({
+            url: '/delete_invoice/' + invoiceId,
+            method: 'GET',
+            dataType: 'json',
+            success: function (response) {
+                if (response.status === "success") {
+                    alert(response.message || "Invoice deleted successfully!");
+                    if (element) $(element).closest("tr").remove();
+                } else {
+                    alert(response.message || "Error deleting invoice.");
+                }
+            },
+            error: function (xhr) {
+                let msg = xhr.responseJSON?.message || "Error deleting invoice. Please try again.";
+                alert(msg);
+            }
+        });
+    }
+    window.deleteInvoice = deleteInvoice; // make globally accessible
+});

templates/add_invoice.html

@@ -1,176 +1,322 @@
-{% extends 'base.html' %}
-{% block content %}
+{% extends 'base.html' %} {% block content %}
 <head xmlns="http://www.w3.org/1999/html">
-    <meta charset="UTF-8"/>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
-    <title>Add Invoice</title>
-    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/invoice.css') }}">
-    <script src="{{ url_for('static', filename='js/invoice.js') }}"></script>
-    <script src="{{ url_for('static', filename='js/holdAmount.js') }}"></script>
-    <script src="{{ url_for('static', filename='js/search_on_table.js') }}"></script>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Add Invoice</title>
+  <link
+    rel="stylesheet"
+    type="text/css"
+    href="{{ url_for('static', filename='css/invoice.css') }}"
+  />
+  <script src="{{ url_for('static', filename='js/invoice.js') }}"></script>
+  <script src="{{ url_for('static', filename='js/holdAmount.js') }}"></script>
+  <script src="{{ url_for('static', filename='js/search_on_table.js') }}"></script>
 </head>
 <body>
-{% if success == 'true' %}
-<div class="alert alert-success alert-dismissible fade show mt-3" role="alert">
+  {% if success == 'true' %}
+  <div
+    class="alert alert-success alert-dismissible fade show mt-3"
+    role="alert"
+  >
     ✅ Invoice added successfully!
-    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
-</div>
-{% endif %}
-
-
-<!-- Flash Messages -->
-{% with messages = get_flashed_messages(with_categories=true) %}
-  {% if messages %}
-    <div class="flash-messages">
-      {% for category, message in messages %}
-        <div class="alert {{ category }}">{{ message }}</div>
-      {% endfor %}
-    </div>
+    <button
+      type="button"
+      class="btn-close"
+      data-bs-dismiss="alert"
+      aria-label="Close"
+    ></button>
+  </div>
   {% endif %}
-{% endwith %}
 
-<div class="button-container">
+  <!-- Flash Messages -->
+  {% with messages = get_flashed_messages(with_categories=true) %} {% if
+  messages %}
+  <div class="flash-messages">
+    {% for category, message in messages %}
+    <div class="alert {{ category }}">{{ message }}</div>
+    {% endfor %}
+  </div>
+  {% endif %} {% endwith %}
+
+  <div class="button-container">
     <button id="addButton" class="action-button">Add</button>
     <button id="displayButton" class="action-button">Display</button>
-</div>
+  </div>
 
-<div id="addForm" style="display: none;">
+  <div id="addForm" style="display: none">
     <h2>Add Invoice</h2>
 
-    <form id="invoiceForm" action="{{ url_for('invoice.add_invoice') }}" method="POST">
-        <div class="row1">
-            <div>
-                <label for="subcontractor">Subcontractor Name:</label>
-                <input type="text" id="subcontractor" name="subcontractor" required autocomplete="off"/>
-                <input type="hidden" id="subcontractor_id" name="subcontractor_id"/>
-                <div id="subcontractor_list"></div>
-            </div>
+    <form
+      id="invoiceForm"
+      action="{{ url_for('invoice.add_invoice') }}"
+      method="POST"
+    >
+      <div class="row1">
+        <div>
+          <label for="subcontractor">Subcontractor Name:</label>
+          <input
+            type="text"
+            id="subcontractor"
+            name="subcontractor"
+            required
+            autocomplete="off"
+          />
+          <input type="hidden" id="subcontractor_id" name="subcontractor_id" />
+          <div id="subcontractor_list"></div>
         </div>
+      </div>
 
-        <div class="row2">
-            <div>
-                <label for="village">Village Name:</label>
-                <select id="village" name="village" required>
-                    <option value="">-- Select Village --</option>
-                    {% for village in villages %}
-                        <option value="{{ village.Village_Name }}">{{ village.Village_Name }}</option>
-                    {% endfor %}
-                </select>
-            </div>
-            <div>
-                <label for="pmc_no">PMC No:</label>
-                <input type="text" id="pmc_no" name="pmc_no" required/>
-                <div id="pmc_no_list" class="autocomplete-list"></div>
-            </div>
+      <div class="row2">
+        <div>
+          <label for="village">Village Name:</label>
+          <select id="village" name="village" required>
+            <option value="">-- Select Village --</option>
+            {% for village in villages %}
+            <option value="{{ village.Village_Name }}">
+              {{ village.Village_Name }}
+            </option>
+            {% endfor %}
+          </select>
         </div>
-
-        <div class="row2">
-            <div>
-                <label for="work_type">Work Type:</label>
-                <input type="text" id="work_type" name="work_type" required/>
-            </div>
-            <div>
-                <label for="invoice_details">Invoice Details:</label>
-                <textarea id="invoice_details" name="invoice_details" required></textarea>
-            </div>
+        <div>
+          <label for="pmc_no">PMC No:</label>
+          <input type="text" id="pmc_no" name="pmc_no" required />
+          <div id="pmc_no_list" class="autocomplete-list"></div>
         </div>
+      </div>
 
-        <div class="row2">
-            <div>
-                <label for="invoice_no">Invoice No:</label>
-                <input type="text" id="invoice_no" name="invoice_no" required/>
-            </div>
-            <div>
-                <label for="invoice_date">Invoice Date:</label>
-                <input type="date" id="invoice_date" name="invoice_date" required/>
-            </div>
+      <div class="row2">
+        <div>
+          <label for="work_type">Work Type:</label>
+          <input type="text" id="work_type" name="work_type" required />
         </div>
-
-        <div class="row3">
-    <div>
-        <label for="basic_amount">Basic Amount:</label>
-        <input type="number" step="0.01" id="basic_amount" name="basic_amount" placeholder="₹ - 00.00" required/>
-    </div>
-    <div>
-        <label for="debit_amount">Debit Amount:</label>
-        <input type="number" step="0.01" id="debit_amount" name="debit_amount" placeholder="₹ - 00.00" required/>
-    </div>
-    <div>
-        <label for="after_debit_amount">After Debit Amount:</label>
-        <input type="number" step="0.01" id="after_debit_amount" name="after_debit_amount" placeholder="₹ - 00.00" readonly required/>
-    </div>
-</div>
-
-<div class="row3">
-    <div class="percentage-field">
-        <label for="gst_percentage">GST %:</label>
-        <input type="number" step="0.01" id="gst_percentage" name="gst_percentage" placeholder="%"/>
-        <label for="gst_amount">GST Amount:</label>
-        <input type="number" step="0.01" id="gst_amount" name="gst_amount" placeholder="₹ - 00.00" readonly required/>
-    </div>
-    <div>
-        <label for="amount">Amount:</label>
-        <input type="number" step="0.01" id="amount" name="amount" placeholder="₹ - 00.00" readonly required/>
-    </div>
-    <div class="percentage-field">
-        <label for="tds_percentage">TDS %:</label>
-        <input type="number" step="0.01" id="tds_percentage" name="tds_percentage" placeholder="%"/>
-        <label for="tds_amount">TDS Amount:</label>
-        <input type="number" step="0.01" id="tds_amount" name="tds_amount" placeholder="₹ - 00.00" readonly required/>
-    </div>
-</div>
-
-<div class="row3">
-    <div class="percentage-field">
-        <label for="sd_percentage">SD %:</label>
-        <input type="number" step="0.01" id="sd_percentage" name="sd_percentage" placeholder="%"/>
-        <label for="sd_amount">SD Amount:</label>
-        <input type="number" step="0.01" id="sd_amount" name="sd_amount" placeholder="₹ - 00.00" readonly required>
-    </div>
-    <div class="percentage-field">
-        <label for="commission_percentage">On Commission %:</label>
-        <input type="number" step="0.01" id="commission_percentage" name="commission_percentage" placeholder="%"/>
-        <label for="on_commission">On Commission:</label>
-        <input type="number" step="0.01" id="on_commission" name="on_commission" placeholder="₹ - 00.00" readonly required>
-    </div>
-    <div class="percentage-field">
-        <label for="hydro_percentage">Hydro Testing %:</label>
-        <input type="number" step="0.01" id="hydro_percentage" name="hydro_percentage" placeholder="%"/>
-        <label for="hydro_testing">Hydro Testing:</label>
-        <input type="number" step="0.01" id="hydro_testing" name="hydro_testing" placeholder="₹ - 00.00" readonly required>
-    </div>
-</div>
-        <div class="hold-row">
-            <button type="button" id="add_hold_amount" class="button">+ Add Hold Amount</button>
+        <div>
+          <label for="invoice_details">Invoice Details:</label>
+          <textarea
+            id="invoice_details"
+            name="invoice_details"
+            required
+          ></textarea>
         </div>
+      </div>
 
-        <!-- Dynamically added hold amount fields -->
-        <div id="hold_amount_container"></div>
-
-        <div class="row2">
-            <div>
-                <label for="gst_sd_amount">GST SD Amount:</label>
-                <input type="number" step="0.01" id="gst_sd_amount" name="gst_sd_amount" placeholder="₹ - 00.00" required/>
-            </div>
-            <div>
-                <label for="final_amount">Final Amount:</label>
-                <input type="number" step="0.01" id="final_amount" name="final_amount" placeholder="₹ - 00.00" required/>
-            </div>
+      <div class="row2">
+        <div>
+          <label for="invoice_no">Invoice No:</label>
+          <input type="text" id="invoice_no" name="invoice_no" required />
         </div>
+        <div>
+          <label for="invoice_date">Invoice Date:</label>
+          <input type="date" id="invoice_date" name="invoice_date" required />
+        </div>
+      </div>
 
-        <button type="submit" class="button">Submit</button>
+      <div class="row3">
+        <div>
+          <label for="basic_amount">Basic Amount:</label>
+          <input
+            type="number"
+            step="0.01"
+            id="basic_amount"
+            name="basic_amount"
+            placeholder="₹ - 00.00"
+            required
+          />
+        </div>
+        <div>
+          <label for="debit_amount">Debit Amount:</label>
+          <input
+            type="number"
+            step="0.01"
+            id="debit_amount"
+            name="debit_amount"
+            placeholder="₹ - 00.00"
+            required
+          />
+        </div>
+        <div>
+          <label for="after_debit_amount">After Debit Amount:</label>
+          <input
+            type="number"
+            step="0.01"
+            id="after_debit_amount"
+            name="after_debit_amount"
+            placeholder="₹ - 00.00"
+            readonly
+            required
+          />
+        </div>
+      </div>
+
+      <div class="row3">
+        <div class="percentage-field">
+          <label for="gst_percentage">GST %:</label>
+          <input
+            type="number"
+            step="0.01"
+            id="gst_percentage"
+            name="gst_percentage"
+            placeholder="%"
+          />
+          <label for="gst_amount">GST Amount:</label>
+          <input
+            type="number"
+            step="0.01"
+            id="gst_amount"
+            name="gst_amount"
+            placeholder="₹ - 00.00"
+            readonly
+            required
+          />
+        </div>
+        <div>
+          <label for="amount">Amount:</label>
+          <input
+            type="number"
+            step="0.01"
+            id="amount"
+            name="amount"
+            placeholder="₹ - 00.00"
+            readonly
+            required
+          />
+        </div>
+        <div class="percentage-field">
+          <label for="tds_percentage">TDS %:</label>
+          <input
+            type="number"
+            step="0.01"
+            id="tds_percentage"
+            name="tds_percentage"
+            placeholder="%"
+          />
+          <label for="tds_amount">TDS Amount:</label>
+          <input
+            type="number"
+            step="0.01"
+            id="tds_amount"
+            name="tds_amount"
+            placeholder="₹ - 00.00"
+            readonly
+            required
+          />
+        </div>
+      </div>
+
+      <div class="row3">
+        <div class="percentage-field">
+          <label for="sd_percentage">SD %:</label>
+          <input
+            type="number"
+            step="0.01"
+            id="sd_percentage"
+            name="sd_percentage"
+            placeholder="%"
+          />
+          <label for="sd_amount">SD Amount:</label>
+          <input
+            type="number"
+            step="0.01"
+            id="sd_amount"
+            name="sd_amount"
+            placeholder="₹ - 00.00"
+            readonly
+            required
+          />
+        </div>
+        <div class="percentage-field">
+          <label for="commission_percentage">On Commission %:</label>
+          <input
+            type="number"
+            step="0.01"
+            id="commission_percentage"
+            name="commission_percentage"
+            placeholder="%"
+          />
+          <label for="on_commission">On Commission:</label>
+          <input
+            type="number"
+            step="0.01"
+            id="on_commission"
+            name="on_commission"
+            placeholder="₹ - 00.00"
+            readonly
+            required
+          />
+        </div>
+        <div class="percentage-field">
+          <label for="hydro_percentage">Hydro Testing %:</label>
+          <input
+            type="number"
+            step="0.01"
+            id="hydro_percentage"
+            name="hydro_percentage"
+            placeholder="%"
+          />
+          <label for="hydro_testing">Hydro Testing:</label>
+          <input
+            type="number"
+            step="0.01"
+            id="hydro_testing"
+            name="hydro_testing"
+            placeholder="₹ - 00.00"
+            readonly
+            required
+          />
+        </div>
+      </div>
+      <div class="hold-row">
+        <button type="button" id="add_hold_amount" class="button">
+          + Add Hold Amount
+        </button>
+      </div>
+
+      <!-- Dynamically added hold amount fields -->
+      <div id="hold_amount_container"></div>
+
+      <div class="row2">
+        <div>
+          <label for="gst_sd_amount">GST SD Amount:</label>
+          <input
+            type="number"
+            step="0.01"
+            id="gst_sd_amount"
+            name="gst_sd_amount"
+            placeholder="₹ - 00.00"
+            required
+          />
+        </div>
+        <div>
+          <label for="final_amount">Final Amount:</label>
+          <input
+            type="number"
+            step="0.01"
+            id="final_amount"
+            name="final_amount"
+            placeholder="₹ - 00.00"
+            required
+          />
+        </div>
+      </div>
+
+      <button type="submit" class="button">Submit</button>
     </form>
-</div>
+  </div>
 
-<div id="addTable" style="display: none;">
+  <div id="addTable" style="display: none">
     <!-- Invoice Table Section -->
     <div class="search-container">
-        <h2>Invoice List</h2>
-        <input type="text" id="searchBar" placeholder="Searching..." onkeyup="searchTable()">
-    {% if invoices %}
-    <table class="invoice-table">
+      <h2>Invoice List</h2>
+      <input
+        type="text"
+        id="searchBar"
+        placeholder="Searching..."
+        onkeyup="searchTable()"
+      />
+      {% if invoices %}
+      <table class="invoice-table">
         <thead>
-        <tr>
+          <tr>
             <th>Invoice Id</th>
             <th>SubContractor Name</th>
             <th>PMC No</th>
@@ -192,11 +338,11 @@
             <th>Final Amount</th>
             <th>Update</th>
             <th>Delete</th>
-        </tr>
+          </tr>
         </thead>
         <tbody>
-        {% for invoice in invoices %}
-        <tr>
+          {% for invoice in invoices %}
+          <tr>
             <td>{{ invoice.Invoice_Id }}</td>
             <td>{{ invoice.Contractor_Name }}</td>
             <td>{{ invoice.PMC_No }}</td>
@@ -217,62 +363,77 @@
             <td>{{ invoice.GST_SD_Amount }}</td>
             <td>{{ invoice.Final_Amount }}</td>
             <td>
-           <!-- Edit -->
-              <a href="{{ url_for('invoice.edit_invoice', invoice_id=invoice.Invoice_Id) }}">
-                    <img src="{{ url_for('static', filename='images/icons/pen_blue_icon.png') }}" alt="Edit" class="icon">
-                </a>
+              <!-- Edit -->
+              <a
+                href="{{ url_for('invoice.edit_invoice', invoice_id=invoice.Invoice_Id) }}"
+              >
+                <img
+                  src="{{ url_for('static', filename='images/icons/pen_blue_icon.png') }}"
+                  alt="Edit"
+                  class="icon edit-btn"
+                  data-id="{{ invoice.Invoice_Id }}"
+                />
+              </a>
             </td>
             <td>
-                <!-- Delete -->
-                <a href="{{ url_for('invoice.delete_invoice_route', invoice_id=invoice.Invoice_Id) }}" onclick="return confirm('Are you sure?')">
-                    <img src="{{ url_for('static', filename='images/icons/bin_red_icon.png') }}" alt="Delete" class="icon">
-                </a>
+              <a
+                href="javascript:void(0);"
+                onclick="deleteInvoice({{ invoice.Invoice_Id }}, this)"
+              >
+                <img
+                  src="{{ url_for('static', filename='images/icons/bin_red_icon.png') }}"
+                  alt="Delete"
+                  class="icon"
+                />
+              </a>
             </td>
-        </tr>
-        {% endfor %}
+          </tr>
+          {% endfor %}
         </tbody>
-    </table>
-    {% else %}
-    <p>No invoices found.</p>
-    {% endif %}
-</div>
+      </table>
+      {% else %}
+      <p>No invoices found.</p>
+      {% endif %}
+    </div>
 
     <script>
-document.addEventListener('DOMContentLoaded', function() {
-    // Get all the input fields
-    const basicAmount = document.getElementById('basic_amount');
-    const debitAmount = document.getElementById('debit_amount');
-    const afterDebitAmount = document.getElementById('after_debit_amount');
-    const amount = document.getElementById('amount');
+      document.addEventListener("DOMContentLoaded", function () {
+        // Get all the input fields
+        const basicAmount = document.getElementById("basic_amount");
+        const debitAmount = document.getElementById("debit_amount");
+        const afterDebitAmount = document.getElementById("after_debit_amount");
+        const amount = document.getElementById("amount");
 
-    // Percentage fields
-    const gstPercentage = document.getElementById('gst_percentage');
-    const gstAmount = document.getElementById('gst_amount');
-    const tdsPercentage = document.getElementById('tds_percentage');
-    const tdsAmount = document.getElementById('tds_amount');
-    const sdPercentage = document.getElementById('sd_percentage');
-    const sdAmountInput = document.getElementById('sd_amount');
-    const commissionPercentage = document.getElementById('commission_percentage');
-    const onCommission = document.getElementById('on_commission');
-    const hydroPercentage = document.getElementById('hydro_percentage');
-    const hydroTesting = document.getElementById('hydro_testing');
-    const gstSdAmount = document.getElementById('gst_sd_amount');
-    const finalAmount = document.getElementById('final_amount');
+        // Percentage fields
+        const gstPercentage = document.getElementById("gst_percentage");
+        const gstAmount = document.getElementById("gst_amount");
+        const tdsPercentage = document.getElementById("tds_percentage");
+        const tdsAmount = document.getElementById("tds_amount");
+        const sdPercentage = document.getElementById("sd_percentage");
+        const sdAmountInput = document.getElementById("sd_amount");
+        const commissionPercentage = document.getElementById(
+          "commission_percentage",
+        );
+        const onCommission = document.getElementById("on_commission");
+        const hydroPercentage = document.getElementById("hydro_percentage");
+        const hydroTesting = document.getElementById("hydro_testing");
+        const gstSdAmount = document.getElementById("gst_sd_amount");
+        const finalAmount = document.getElementById("final_amount");
 
-    // Calculate after debit amount when basic or debit amount changes
-    function calculateAfterDebitAmount() {
-        const basic = parseFloat(basicAmount.value) || 0;
-        const debit = parseFloat(debitAmount.value) || 0;
-        const afterDebit = basic - debit;
-        afterDebitAmount.value = afterDebit.toFixed(2);
-        calculateGST();
-    }
+        // Calculate after debit amount when basic or debit amount changes
+        function calculateAfterDebitAmount() {
+          const basic = parseFloat(basicAmount.value) || 0;
+          const debit = parseFloat(debitAmount.value) || 0;
+          const afterDebit = basic - debit;
+          afterDebitAmount.value = afterDebit.toFixed(2);
+          calculateGST();
+        }
 
-    // Calculate GST and Amount
-    function calculateGST() {
-        const baseAmount = parseFloat(afterDebitAmount.value) || 0;
+        // Calculate GST and Amount
+        function calculateGST() {
+          const baseAmount = parseFloat(afterDebitAmount.value) || 0;
 
-        if (gstPercentage.value) {
+          if (gstPercentage.value) {
             const gstPerc = parseFloat(gstPercentage.value) || 0;
             const gstAmt = (baseAmount * gstPerc) / 100;
             gstAmount.value = gstAmt.toFixed(2);
@@ -280,91 +441,96 @@ document.addEventListener('DOMContentLoaded', function() {
 
             // Calculate Amount (After Debit + GST)
             amount.value = (baseAmount + gstAmt).toFixed(2);
-        } else {
+          } else {
             amount.value = baseAmount.toFixed(2);
+          }
+
+          calculateOtherDeductions();
         }
 
-        calculateOtherDeductions();
-    }
+        // Calculate other deductions (TDS, SD, Commission, Hydro)
+        function calculateOtherDeductions() {
+          const baseAmount = parseFloat(afterDebitAmount.value) || 0;
 
-    // Calculate other deductions (TDS, SD, Commission, Hydro)
-    function calculateOtherDeductions() {
-        const baseAmount = parseFloat(afterDebitAmount.value) || 0;
-
-        // Calculate TDS
-        if (tdsPercentage.value) {
+          // Calculate TDS
+          if (tdsPercentage.value) {
             const tdsPerc = parseFloat(tdsPercentage.value) || 0;
             const tdsAmt = (baseAmount * tdsPerc) / 100;
             tdsAmount.value = tdsAmt.toFixed(2);
-        }
+          }
 
-        // Calculate SD
-        if (sdPercentage.value) {
+          // Calculate SD
+          if (sdPercentage.value) {
             const sdPerc = parseFloat(sdPercentage.value) || 0;
             const sdAmt = (baseAmount * sdPerc) / 100;
             sdAmountInput.value = sdAmt.toFixed(2);
-        }
+          }
 
-        // Calculate Commission
-        if (commissionPercentage.value) {
+          // Calculate Commission
+          if (commissionPercentage.value) {
             const commPerc = parseFloat(commissionPercentage.value) || 0;
             const commAmt = (baseAmount * commPerc) / 100;
             onCommission.value = commAmt.toFixed(2);
-        }
+          }
 
-        // Calculate Hydro Testing
-        if (hydroPercentage.value) {
+          // Calculate Hydro Testing
+          if (hydroPercentage.value) {
             const hydroPerc = parseFloat(hydroPercentage.value) || 0;
             const hydroAmt = (baseAmount * hydroPerc) / 100;
             hydroTesting.value = hydroAmt.toFixed(2);
+          }
+
+          calculateFinalAmount();
         }
 
-        calculateFinalAmount();
-    }
+        // Calculate final amount
+        function calculateFinalAmount() {
+          const amt = parseFloat(amount.value) || 0;
+          const tds = parseFloat(tdsAmount.value) || 0;
+          const sd = parseFloat(sdAmountInput.value) || 0;
+          const commission = parseFloat(onCommission.value) || 0;
+          const hydro = parseFloat(hydroTesting.value) || 0;
+          const gstSd = parseFloat(gstSdAmount.value) || 0;
 
-    // Calculate final amount
-    function calculateFinalAmount() {
-        const amt = parseFloat(amount.value) || 0;
-        const tds = parseFloat(tdsAmount.value) || 0;
-        const sd = parseFloat(sdAmountInput.value) || 0;
-        const commission = parseFloat(onCommission.value) || 0;
-        const hydro = parseFloat(hydroTesting.value) || 0;
-        const gstSd = parseFloat(gstSdAmount.value) || 0;
+          // Get hold amounts
+          let totalHold = 0;
+          document
+            .querySelectorAll('input[name="hold_amount[]"]')
+            .forEach((input) => {
+              totalHold += parseFloat(input.value) || 0;
+            });
 
-        // Get hold amounts
-        let totalHold = 0;
-        document.querySelectorAll('input[name="hold_amount[]"]').forEach(input => {
-            totalHold += parseFloat(input.value) || 0;
-        });
+          // Final Amount = Amount - TDS - SD - Commission - Hydro - GST SD - Hold Amounts
+          const final = amt - tds - sd - commission - hydro - gstSd - totalHold;
+          finalAmount.value = final.toFixed(2);
+        }
 
-        // Final Amount = Amount - TDS - SD - Commission - Hydro - GST SD - Hold Amounts
-        const final = amt - tds - sd - commission - hydro - gstSd - totalHold;
-        finalAmount.value = final.toFixed(2);
-    }
+        // Add event listeners
+        basicAmount.addEventListener("input", calculateAfterDebitAmount);
+        debitAmount.addEventListener("input", calculateAfterDebitAmount);
 
-    // Add event listeners
-    basicAmount.addEventListener('input', calculateAfterDebitAmount);
-    debitAmount.addEventListener('input', calculateAfterDebitAmount);
+        // Percentage fields
+        gstPercentage.addEventListener("input", calculateGST);
+        tdsPercentage.addEventListener("input", calculateOtherDeductions);
+        sdPercentage.addEventListener("input", calculateOtherDeductions);
+        commissionPercentage.addEventListener(
+          "input",
+          calculateOtherDeductions,
+        );
+        hydroPercentage.addEventListener("input", calculateOtherDeductions);
 
-    // Percentage fields
-    gstPercentage.addEventListener('input', calculateGST);
-    tdsPercentage.addEventListener('input', calculateOtherDeductions);
-    sdPercentage.addEventListener('input', calculateOtherDeductions);
-    commissionPercentage.addEventListener('input', calculateOtherDeductions);
-    hydroPercentage.addEventListener('input', calculateOtherDeductions);
+        // Listen for changes in hold amounts
+        document.addEventListener("holdAmountChanged", calculateFinalAmount);
+      });
 
-    // Listen for changes in hold amounts
-    document.addEventListener('holdAmountChanged', calculateFinalAmount);
-});
-
-// Optional JS for auto-hiding flash
-setTimeout(() => {
-    document.querySelectorAll('.alert').forEach(el => el.style.display = 'none');
-}, 5000);
-</script>
-
-
-</div>
+      // Optional JS for auto-hiding flash
+      setTimeout(() => {
+        document
+          .querySelectorAll(".alert")
+          .forEach((el) => (el.style.display = "none"));
+      }, 5000);
+    </script>
+  </div>
 </body>
 
 {% endblock %}

templates/edit_invoice.html

@@ -7,6 +7,7 @@
     <title>Edit Invoice</title>
     <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/invoice.css') }}">
     <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/style1.css') }}">
+
     <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
 </head>
 
@@ -62,7 +63,7 @@
         <div class="row2">
             <div>
                 <label for="invoice_no">Invoice No:</label>
-                <input type="text" id="invoice_no" name="invoice_no" value="{{ invoice.Invoice_No }}" required/>
+                <input type="text" id="invoice_no" name="invoice_no" value="{{ invoice.invoice_no }}" required/>
             </div>
             <div>
                 <label for="invoice_date">Invoice Date:</label>
@@ -180,27 +181,29 @@ $(document).ready(function() {
         $(this).closest(".hold-amount-row").remove();
     });
 
-    // Submit form via AJAX
-    $("#invoiceForm").submit(function(e) {
-        e.preventDefault();
+   // Submit form via AJAX
+$("#invoiceForm").submit(function(e) {
+    e.preventDefault();
 
-        $.ajax({
-            type: "POST",
-            url: $(this).attr("action"),
-            data: $(this).serialize(),
-            success: function(response) {
-                if(response.status === "success") {
-                $("#invoiceSuccessAlert").fadeIn().delay(3000).fadeOut();
+    $.ajax({
+        type: "POST",
+        url: $(this).attr("action"),
+        data: $(this).serialize(),
+        dataType: 'json',  // ensure JSON is returned
+        success: function(response) {
+            if(response.status === "success") {
                 alert("Invoice updated successfully!");  // <-- Popup alert
-                }
 
-            },
-            error: function(xhr) {
-                alert("Error: " + xhr.responseJSON.message);
+                // ✅ Redirect to Add Invoice page (table part visible)
+                window.location.href = "{{ url_for('invoice.add_invoice') }}#addTable";
             }
-        });
+        },
+        error: function(xhr) {
+            alert("Error: " + xhr.responseJSON?.message || "Something went wrong!");
+        }
     });
 });
+});
 </script>
 
 </body>