update itr and ao from and auto save mat ceadit and utility

static/css/summary.css

@@ -1,153 +1,278 @@
-/* ================= GLOBAL FORM ELEMENTS ================= */
+/* ================= PAGE WRAPPER ================= */
+.main {
+    margin-left: 260px;
+    width: calc(100% - 260px);
+    margin-top: 80px;
+    padding: 20px;
+    transition: all 0.3s ease;
+}
+
+/* ================= CONTAINER ================= */
+.container {
+    width: 100%;
+    max-width: none;
+    margin: 0;
+    padding: 25px 30px;
+    background: #ffffff;
+    border-radius: 12px;
+    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.08);
+}
+
+/* ================= PAGE TITLE ================= */
+.container h2 {
+    text-align: center;
+    color: #007bff;
+    font-size: 22px;
+    font-weight: 700;
+    margin-bottom: 20px;
+}
+
+h3 {
+    text-align: center;
+    margin-top: 10px;
+}
+
+/* ================= FORM ================= */
+form {
+    width: 100%;
+}
+
 form label {
-  display: block;
-  margin-top: 10px;
-  font-weight: bold;
-  color: #333;
+    display: block;
+    margin-top: 10px;
+    font-weight: 600;
+    color: #333;
 }
 
-select {
-  width: 100%;
-  max-width: 300px;
-  /* restrict width on desktop/laptop */
-  padding: 10px 12px;
-  border: 1px solid #ccc;
-  border-radius: 6px;
-  margin-top: 6px;
-  font-size: 15px;
-  background-color: white;
-  cursor: pointer;
-  transition: 0.2s;
+/* ================= INPUTS ================= */
+form input,
+form select {
+    width: 100%;
+    padding: 10px 12px;
+    margin-top: 6px;
+    border: 1px solid #ccc;
+    border-radius: 6px;
+    background-color: #f8f9ff;
+    font-size: 14px;
 }
 
-select:focus {
-  border-color: #007bff;
-  box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
-  outline: none;
+form input:focus,
+form select:focus {
+    outline: none;
+    border-color: #007bff;
+    box-shadow: 0 0 6px rgba(0, 123, 255, 0.35);
+}
+
+/* ================= AUTO FIELDS ================= */
+.auto {
+    background-color: #d5edd7;
+    font-weight: 600;
+}
+
+/* ================= FORM GROUP ================= */
+.form-group {
+    margin-bottom: 16px;
+    display: flex;
+    flex-direction: column;
+    font-weight: 600;
+}
+
+/* Inline two columns */
+.form-group.inline-2 {
+    flex-direction: row;
+    gap: 16px;
+}
+
+.form-group.inline-2 > div {
+    flex: 1;
 }
 
 /* ================= BUTTONS ================= */
 button {
-  margin-top: 20px;
-  padding: 10px 18px;
-  background-color: #007bff;
-  color: white;
-  border: none;
-  cursor: pointer;
-  border-radius: 6px;
-  font-size: 15px;
-  font-weight: 600;
-  transition: 0.3s;
+    display: block;
+    width: 60%;
+    margin: 25px auto 0;
+    padding: 12px 20px;
+    background-color: #28a745;
+    color: #fff;
+    border: none;
+    border-radius: 6px;
+    font-size: 15px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: 0.3s;
 }
 
 button:hover {
-  background-color: #0069d9;
-}
-
-/* ================= MAIN CONTAINER ================= */
-.main {
-  margin-left: 260px;
-  /* sidebar width if exists */
-  padding: 70px 30px 40px 30px;
-  /* top padding for navbar */
-  margin-top: 50px;
-  /* extra top spacing */
-  width: auto;
-  transition: 0.3s;
-}
-
-.container {
-  max-width: 800px;
-  margin: 0 auto;
-  background: #ffffff;
-  padding: 35px 40px;
-  border-radius: 12px;
-  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.08);
+    background-color: #218838;
+    box-shadow: 0 4px 10px rgba(40, 167, 69, 0.35);
 }
 
 /* ================= BACK BUTTON ================= */
 .back-btn {
-  display: inline-block;
-  margin-top: 20px;
-  padding: 10px 18px;
-  background-color: #007bff;
-  color: white;
-  font-size: 15px;
-  font-weight: 600;
-  border-radius: 6px;
-  text-decoration: none;
-  transition: 0.3s;
+    display: inline-block;
+    margin-top: 20px;
+    padding: 10px 18px;
+    background-color: #007bff;
+    color: #fff;
+    font-size: 15px;
+    font-weight: 600;
+    border-radius: 6px;
+    text-decoration: none;
+    transition: 0.3s;
 }
 
 .back-btn:hover {
-  background-color: #006ae6;
+    background-color: #006ae6;
 }
 
-/* ================= MESSAGES ================= */
+/* ================= STICKY FILTER BAR ================= */
+.head {
+    position: sticky;
+    top: 60px;
+    background: #fff;
+    z-index: 1000;
+    padding: 15px 0;
+    border-bottom: 1px solid #ccc;
+}
+
+/* ================= SELECT + DOWNLOAD ================= */
+.select-download-wrapper {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 10px;
+}
+
+.select-download-wrapper select {
+    max-width: 300px;
+}
+
+select {
+    width: 100%;
+    max-width: 300px;
+    padding: 10px 12px;
+    border: 1px solid #ccc;
+    border-radius: 6px;
+    margin-top: 6px;
+    font-size: 15px;
+    background-color: white;
+    cursor: pointer;
+    transition: 0.2s;
+}
+
+select:focus {
+    border-color: #007bff;
+    box-shadow: 0 0 5px rgba(0,123,255,0.5);
+    outline: none;
+}
+
+/* ================= DOWNLOAD BUTTON ================= */
+#downloadBtn {
+    display: none;
+    padding: 10px 20px;
+    font-size: 16px;
+    background-color: #28a745;
+    color: #fff;
+    text-decoration: none;
+    border-radius: 4px;
+    white-space: nowrap;
+    transition: 0.3s;
+}
+
+#downloadBtn:hover {
+    background-color: #218838;
+}
+
+/* ================= TABLE PREVIEW ================= */
+#previewContent {
+    max-height: 60vh;
+    overflow-y: auto;
+    overflow-x: auto;
+    width: 100%;
+    margin-top: 15px;
+}
+
+#previewContent table {
+    width: 100%;
+    min-width: 600px;
+    border-collapse: collapse;
+}
+
+#previewContent th,
+#previewContent td {
+    padding: 10px;
+    border: 1px solid #ccc;
+    white-space: nowrap;
+}
+
+/* Sticky table header */
+#previewContent th {
+    position: sticky;
+    top: 0;
+    background-color: #007bff;
+    color: #fff;
+    z-index: 10;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+}
+
+/* ================= MESSAGE ================= */
 .message {
-  margin-top: 15px;
-  color: #555;
-  font-size: 14px;
+    margin-top: 15px;
+    color: #555;
+    font-size: 14px;
 }
 
 /* ================= RESPONSIVE ================= */
-
-/* Tablets (<= 992px) */
 @media (max-width: 992px) {
-  .main {
-    margin-left: 0;
-    /* remove sidebar spacing */
-    padding: 50px 20px 20px 20px;
-  }
+    .main {
+        margin-left: 0;
+        width: 100%;
+        padding: 20px;
+    }
 
-  .container {
-    padding: 25px 20px;
-  }
-
-  select {
-    max-width: 100%;
-    /* full width */
-  }
-
-  button {
-    width: 100%;
-    /* full width */
-    padding: 12px 0;
-  }
+    button {
+        width: 100%;
+    }
+}
+
+@media (max-width: 768px) {
+    .container {
+        padding: 18px;
+    }
+
+    .container h2 {
+        font-size: 18px;
+    }
+
+    .form-group.inline-2 {
+        flex-direction: column;
+        gap: 10px;
+    }
 }
 
-/* Mobile (<= 576px) */
 @media (max-width: 576px) {
-  .main {
-    padding: 40px 15px 15px 15px;
-  }
+    .main {
+        padding: 15px;
+        margin-top: 70px;
+    }
 
-  .container {
-    padding: 20px;
-  }
+    #previewContent table {
+        min-width: 500px;
+    }
 
-  h2 {
-    font-size: 22px;
-    text-align: center;
-  }
+    #previewContent th,
+    #previewContent td {
+        font-size: 13px;
+        padding: 8px;
+    }
+}
 
-  select {
-    font-size: 14px;
-    padding: 10px;
-  }
-
-  button {
-    font-size: 14px;
-    padding: 12px 0;
-  }
-
-  .back-btn {
-    width: 100%;
-    text-align: center;
-    padding: 12px 0;
-  }
-
-  .message {
-    font-size: 13px;
-  }
-}
+@media (max-width: 420px) {
+    form input,
+    form select {
+        font-size: 13px;
+        padding: 9px;
+    }
+}

static/js/ao_calc.js

@@ -46,16 +46,6 @@ document.addEventListener("DOMContentLoaded", function () {
         var tax_payable = (tax30 > tax185) ? tax30 : tax185;
         setValue("tax_payable", tax_payable);
 
-        // // --- SURCHARGE ---
-        // var percent = getValue("persentage");
-        // var surcharge = tax_payable * (percent / 100);
-        // setValue("surcharge", surcharge);
-
-        // // --- edu_cess ---
-        // var per_cess = getValue("persentage_cess")
-        // var edu_cess = (tax_payable + surcharge) * (per_cess / 100);
-        // setValue("edu_cess", edu_cess);
-
         // --- SURCHARGE ---
         var percent = getValue("persentage");
         var surcharge = tax_payable * (percent / 100);
@@ -70,11 +60,37 @@ document.addEventListener("DOMContentLoaded", function () {
         var total_tax_payable = tax_payable + surcharge + edu_cess;
         setValue("total_tax_payable", total_tax_payable);
 
+        // // --- mat_credit_created --- new
+        // setValue("mat_credit_created", Math.max(tax185 - total_tax_payable, 0));
+        // // --- mat credit_utilized --- new
+        // setValue("mat_credit_utilized", Math.max(total_tax_payable - tax185, 0));
+
+        // --- MAT credit and utilized ---
+        var a = tax185
+        var b = total_tax_payable
+        var result = 0
+        if (a > b) {
+            result = a - b
+            setValue("mat_credit_created", result);
+        }
+        else {
+            setValue("mat_credit_created", result);
+        }
+
+        if (b > a) {
+            result = b - a
+            setValue("mat_credit_utilized", result);
+        }
+        else {
+            setValue("mat_credit_utilized", result);
+        }
+
         // --- FINAL TAX ---
         var mat_credit = getValue("mat_credit_utilized");
         var interest_234c = getValue("interest_234c");
 
-        var total_tax = total_tax_payable + mat_credit + interest_234c;
+        // var total_tax = total_tax_payable + mat_credit + interest_234c;
+        var total_tax = total_tax_payable - mat_credit + interest_234c;
         setValue("total_tax", total_tax);
 
         // --- ASSESSMENT ---

static/js/itr_calc.js

@@ -61,16 +61,36 @@ document.addEventListener("DOMContentLoaded", function () {
         setValue("total_tax_payable", total_tax_payable);
 
         // --- mat_credit_created --- new
-        setValue("mat_credit_created", Math.max(tax185 - total_tax_payable, 0));
-        // --- mat credit_utilized --- new
-        setValue("mat_credit_utilized", Math.max(total_tax_payable - tax185, 0));
+        // setValue("mat_credit_created", Math.max(tax185 - total_tax_payable, 0));
+        // // --- mat credit_utilized --- new
+        // setValue("mat_credit_utilized", Math.max(total_tax_payable - tax185, 0));
+
+        // --- mat credit_utilized ---
+        var a = tax185
+        var b = total_tax_payable
+        var result = 0
+        if (a > b) {
+            result = a - b
+            setValue("mat_credit_created", result);
+        }
+        else {
+            setValue("mat_credit_created", result);
+        }
+
+        if (b > a) {
+            result = b - a
+            setValue("mat_credit_utilized", result);
+        }
+        else {
+            setValue("mat_credit_utilized", result);
+        }
 
         // --- FINAL TAX ---
         var mat_credit = getValue("mat_credit_utilized");
         var interest_234c = getValue("interest_234c");
 
         // var total_tax = total_tax_payable + mat_credit + interest_234c;
-        var total_tax = total_tax_payable + mat_credit + interest_234c;
+        var total_tax = total_tax_payable + interest_234c;
         setValue("total_tax", total_tax);
 
         // --- ASSESSMENT ---

static/js/summary_preview.js

@@ -0,0 +1,55 @@
+document.getElementById("year").addEventListener("change", function () {
+    const year = this.value;
+
+    const downloadBtn = document.getElementById("downloadBtn");
+    const previewDiv = document.getElementById("preview");
+    const contentDiv = document.getElementById("previewContent");
+
+    if (!year) {
+        downloadBtn.style.display = "none";
+        previewDiv.style.display = "none";
+        contentDiv.innerHTML = "";
+        return;
+    }
+
+    downloadBtn.href = `/summary/download?year=${year}`;
+    downloadBtn.style.display = "inline-block";
+
+    fetch(`/summary/preview?year=${year}`)
+        .then(res => res.json())
+        .then(data => {
+            let html = `<table>
+                            <thead>
+                                <tr>
+                                    <th>Particular</th>
+                                    <th>ITR</th>
+                                    <th>AO</th>
+                                    <th>CIT</th>
+                                    <th>ITAT</th>
+                                </tr>
+                            </thead>
+                            <tbody>`;
+
+            data.forEach(row => {
+                html += `<tr>
+                            <td>${row.Particular}</td>
+                            <td>${row.ITR}</td>
+                            <td>${row.AO}</td>
+                            <td>${row.CIT}</td>
+                            <td>${row.ITAT}</td>
+                         </tr>`;
+            });
+
+            html += `</tbody></table>`;
+            contentDiv.innerHTML = html;
+
+            // Show preview
+            previewDiv.style.display = "block";
+
+           
+
+            
+
+        })
+        .catch(err => console.error("Preview load error:", err));
+});