From 438f84e284e7fc22747d6c888a8f56429e1b16a1 Mon Sep 17 00:00:00 2001
From: pjpatil12 <pankajjpatil2001@gmail.com>
Date: Sat, 31 Jan 2026 11:45:26 +0530
Subject: [PATCH] changes of ui in dropwon select opptions and bottun colours
 add

---
 .../__pycache__/ITRHandler.cpython-313.pyc    | Bin 7857 -> 7857 bytes
 static/css/index.css                          | 118 +++++------------
 static/css/mat_credit.css                     | 121 +++++++++++++++---
 static/js/toggle.js                           |  12 +-
 static/js/year_dropdown.js                    |  49 ++++---
 templates/add_ao.html                         |  11 +-
 templates/add_cit.html                        |   8 +-
 templates/add_itat.html                       |   8 +-
 templates/add_itr.html                        |   8 +-
 templates/base.html                           |  50 +++++---
 templates/index.html                          |   2 +-
 templates/mat_credit.html                     | 107 ++++++++--------
 12 files changed, 288 insertions(+), 206 deletions(-)

diff --git a/AppCode/__pycache__/ITRHandler.cpython-313.pyc b/AppCode/__pycache__/ITRHandler.cpython-313.pyc
index 4b0a1982ed8063a83dd9baa2f28d21c44d7d6287..351f0f8be539f7e9bf44799eb4bbf24a09960355 100644
GIT binary patch
delta 20
acmdmJyU~{WGcPX}0}y=ZsoluEOb!4<N(OiU

delta 20
acmdmJyU~{WGcPX}0}$*DtKP`HOb!4+mj(?0

diff --git a/static/css/index.css b/static/css/index.css
index af479d2..67ec219 100644
--- a/static/css/index.css
+++ b/static/css/index.css
@@ -1,4 +1,4 @@
-/* RESET */
+/* ================= RESET ================= */
 * {
     margin: 0;
     padding: 0;
@@ -11,13 +11,12 @@ body {
     display: flex;
 }
 
-/* NAVBAR */
+/* ================= NAVBAR ================= */
 .navbar {
     width: 100%;
     height: 60px;
     background-color: #007bff;
     display: flex;
-    justify-content: space-between;
     align-items: center;
     padding: 0 20px;
     position: fixed;
@@ -26,18 +25,6 @@ body {
     color: white;
     z-index: 1000;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
-    gap: 10px;
-}
-
-.nav-logo {
-    height: 80px;
-    width: auto;
-    filter: brightness(0) invert(1);
-}
-
-.toggle-btn {
-    font-size: 26px;
-    cursor: pointer;
 }
 
 .nav-left {
@@ -46,7 +33,19 @@ body {
     gap: 15px;
 }
 
-/* SIDEBAR */
+.nav-logo {
+    height: 46px;
+    filter: brightness(0) invert(1);
+}
+
+.toggle-btn {
+    font-size: 26px;
+    cursor: pointer;
+    display: none;
+    /* hidden on desktop */
+}
+
+/* ================= SIDEBAR ================= */
 .sidebar {
     width: 250px;
     background: #ffffff;
@@ -58,15 +57,10 @@ body {
     overflow-y: auto;
     border-right: 1px solid #e5d1be;
     transition: 0.3s;
-
     display: flex;
     flex-direction: column;
 }
 
-.sidebar.hide {
-    left: -250px;
-}
-
 .sidebar h2 {
     color: #007bff;
     text-align: center;
@@ -88,6 +82,7 @@ body {
     background: #88ccfa;
 }
 
+/* Submenu */
 .submenu {
     display: none;
     background: #ffffff;
@@ -104,19 +99,16 @@ body {
 
 .submenu a:hover {
     background: #b3dbf7;
-    color: #007bff;
 }
 
 /* Logout */
 .sidebar-logout {
     margin-top: auto;
-    padding: 10px 16px;
+    padding: 12px;
     background: #007bff;
     display: flex;
     justify-content: center;
-    align-items: center;
     border-radius: 6px;
-    text-decoration: none;
 }
 
 .sidebar-logout:hover {
@@ -128,18 +120,12 @@ body {
     height: 22px;
 }
 
-/* MAIN CONTENT */
+/* ================= MAIN ================= */
 .main {
-    margin-left: 260px;
+    margin-left: 250px;
+    margin-top: 60px;
     padding: 30px;
-    width: calc(100% - 260px);
-    margin-top: 80px;
-    transition: 0.3s;
-}
-
-.main.collapsed {
-    margin-left: 20px;
-    width: calc(100% - 40px);
+    width: calc(100% - 250px);
 }
 
 /* Container */
@@ -147,62 +133,46 @@ body {
     background: white;
     padding: 40px;
     border-radius: 12px;
-    max-width: 800px;
+    max-width: 900px;
     margin: auto;
     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.07);
 }
 
-.header {
-    font-size: 32px;
-    color: #2c3e50;
-    text-align: center;
-    margin-bottom: 20px;
-    font-weight: 600;
-}
-
-a {
-    text-decoration: none;
-}
-
-
-/* ---------------- RESPONSIVE ---------------- */
-
-/* Tablets */
+/* ================= TABLET ================= */
 @media (max-width: 992px) {
     .nav-left h3 {
         font-size: 16px;
+        max-width: 200px;
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
-        max-width: 200px;
     }
 
     .nav-logo {
-        height: 45px;
+        height: 40px;
     }
 
+    /* sidebar still visible */
     .sidebar {
         width: 220px;
     }
 
     .main {
-        margin-left: 0;
-        width: 100%;
-        padding: 20px;
+        margin-left: 220px;
+        width: calc(100% - 220px);
     }
 }
 
-/* Mobile */
+/* ================= MOBILE ================= */
 @media (max-width: 768px) {
 
     body {
         display: block;
     }
 
-    /* Navbar */
-    .navbar {
-        height: 56px;
-        padding: 0 12px;
+    /* Show toggle only on mobile */
+    .toggle-btn {
+        display: block;
     }
 
     .nav-left h3 {
@@ -211,21 +181,14 @@ a {
     }
 
     .nav-logo {
-        height: 38px;
-    }
-
-    .toggle-btn {
-        font-size: 24px;
+        height: 36px;
     }
 
     /* Sidebar as drawer */
     .sidebar {
-        position: fixed;
-        top: 56px;
         left: -100%;
         width: 85%;
         max-width: 280px;
-        height: calc(100vh - 56px);
         z-index: 2000;
         box-shadow: 4px 0 15px rgba(0, 0, 0, 0.2);
     }
@@ -234,10 +197,6 @@ a {
         left: 0;
     }
 
-    .sidebar.hide {
-        left: -100%;
-    }
-
     /* Main content full width */
     .main {
         margin-left: 0;
@@ -250,20 +209,11 @@ a {
         padding: 20px;
         width: 100%;
     }
-
-    .header {
-        font-size: 22px;
-    }
 }
 
-/* Very small phones */
+/* ================= VERY SMALL PHONES ================= */
 @media (max-width: 480px) {
     .nav-left h3 {
         display: none;
-        /* hide long company name */
-    }
-
-    .header {
-        font-size: 20px;
     }
 }
\ No newline at end of file
diff --git a/static/css/mat_credit.css b/static/css/mat_credit.css
index 296a55c..df5d370 100644
--- a/static/css/mat_credit.css
+++ b/static/css/mat_credit.css
@@ -1,5 +1,7 @@
-/* ===== CONTAINER ===== */
-.container {
+/* =========================
+   CONTAINER
+========================= */
+.mat-container {
     max-width: 1200px;
     margin: 30px auto;
     padding: 25px;
@@ -8,47 +10,91 @@
     box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);
 }
 
-/* ===== TABLE WRAPPER (FOR SCROLL) ===== */
+.page-title {
+    text-align: center;
+    margin-bottom: 20px;
+    font-weight: 600;
+}
+
+/* =========================
+   YEAR CONTROLS
+========================= */
+.year-controls {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    margin-bottom: 15px;
+}
+
+.year-controls select {
+    padding: 8px 10px;
+    font-size: 14px;
+    border-radius: 6px;
+    border: 1px solid #ced4da;
+}
+
+.year-controls button {
+    padding: 8px 14px;
+    font-size: 14px;
+    border-radius: 6px;
+    border: none;
+    cursor: pointer;
+    background-color: #0d6efd;
+    color: #ffffff;
+}
+
+.year-controls button:hover {
+    background-color: #0b5ed7;
+}
+
+/* =========================
+   TABLE WRAPPER
+========================= */
 .table-wrapper {
     width: 100%;
     overflow-x: auto;
     -webkit-overflow-scrolling: touch;
 }
 
-/* ===== TABLE ===== */
+/* =========================
+   TABLE
+========================= */
 #matTable {
     width: 100%;
     min-width: 900px;
-    /* IMPORTANT for horizontal scroll */
     border-collapse: collapse;
     font-size: 14px;
     text-align: center;
 }
 
-/* ===== HEADER ===== */
+/* =========================
+   HEADER
+========================= */
 #matTable thead th {
     background: linear-gradient(135deg, #0d6efd, #0a58ca);
     color: #ffffff;
     padding: 12px 8px;
     border: 1px solid #0a58ca;
-    font-weight: 600;
     white-space: nowrap;
 }
 
-/* ===== BODY CELLS ===== */
+/* =========================
+   BODY CELLS
+========================= */
 #matTable tbody td {
     padding: 8px;
     border: 1px solid #dcdcdc;
     background-color: #ffffff;
 }
 
-/* ===== FY COLUMN ===== */
 #matTable tbody td:first-child {
     font-weight: 600;
     background-color: #f5f8ff;
 }
 
-/* ===== INPUT FIELDS ===== */
+/* =========================
+   INPUTS
+========================= */
 #matTable input {
     width: 100%;
     padding: 6px;
@@ -65,7 +111,9 @@
     outline: none;
 }
 
-/* ===== ACTION BUTTON ===== */
+/* =========================
+   BUTTONS
+========================= */
 #matTable button {
     background-color: #198754;
     border: none;
@@ -80,7 +128,22 @@
     background-color: #157347;
 }
 
-/* ===== ROW STATES ===== */
+.add-row-btn {
+    background-color: #0d6efd;
+    color: #fff;
+    border: none;
+    padding: 8px 18px;
+    border-radius: 6px;
+    cursor: pointer;
+}
+
+.add-row-btn:hover {
+    background-color: #0b5ed7;
+}
+
+/* =========================
+   ROW STATES
+========================= */
 #matTable tbody tr:hover {
     background-color: #f1f6ff;
 }
@@ -94,23 +157,40 @@
     background-color: #e9f7ef !important;
 }
 
-/* ===== MOBILE RESPONSIVE (TABLE FORMAT + INTERNAL SCROLL) ===== */
+/* =========================
+   ACTION FOOTER
+========================= */
+.action-footer {
+    margin-top: 15px;
+}
+
+/* =========================
+   MOBILE ONLY FIXES
+   (DOES NOT AFFECT DESKTOP)
+========================= */
 @media (max-width: 768px) {
 
-    .container {
+    .mat-container {
         margin: 10px;
         padding: 15px;
     }
 
-    .table-wrapper {
-        overflow-x: auto;
-        border-radius: 8px;
+    /* YEAR CONTROLS STACKED */
+    .year-controls {
+        flex-direction: column;
+        align-items: stretch;
     }
 
+    .year-controls select,
+    .year-controls button {
+        width: 100%;
+        font-size: 14px;
+    }
+
+    /* TABLE */
     #matTable {
         font-size: 12px;
         min-width: 800px;
-        /* keeps table structure */
     }
 
     #matTable input {
@@ -121,4 +201,9 @@
         font-size: 12px;
         padding: 5px 10px;
     }
+
+    /* ADD ROW BUTTON FULL WIDTH */
+    .add-row-btn {
+        width: 50%;
+    }
 }
\ No newline at end of file
diff --git a/static/js/toggle.js b/static/js/toggle.js
index ceb266c..ae8451a 100644
--- a/static/js/toggle.js
+++ b/static/js/toggle.js
@@ -1,10 +1,14 @@
 function toggleSidebar() {
-  const sidebar = document.getElementById("sidebar");
-  sidebar.classList.toggle("show");
-  sidebar.classList.toggle("hide");
+  // Toggle ONLY on mobile
+  if (window.innerWidth <= 768) {
+    document.getElementById("sidebar").classList.toggle("show");
+  }
 }
 
 function toggleMenu(id) {
   const menu = document.getElementById(id);
-  menu.style.display = menu.style.display === "block" ? "none" : "block";
+  menu.style.display = (menu.style.display === "block") ? "none" : "block";
 }
+
+
+
diff --git a/static/js/year_dropdown.js b/static/js/year_dropdown.js
index eec638e..855daa8 100644
--- a/static/js/year_dropdown.js
+++ b/static/js/year_dropdown.js
@@ -1,36 +1,41 @@
 document.addEventListener("DOMContentLoaded", function () {
   const yearDropdown = document.getElementById("year");
   const errorDiv = document.getElementById("yearError");
+  const form = document.querySelector("form");
 
-  // Get the form dynamically
-  const form = document.querySelector("form"); // get from id as table name
-
-  // Dynamic table name = form id
-  const tableName = form.id.toLowerCase();
+  const tableName = form.id.toLowerCase(); // ao, cit, etc.
 
   const currentYear = new Date().getFullYear();
   const startYear = 1990;
 
-  // Fill Year dropdown
+  /* ---------- Fill Year Dropdown ---------- */
   for (let y = currentYear; y >= startYear; y--) {
     let nextYear = y + 1;
 
     let option = document.createElement("option");
-    option.value = y;
+    option.value = y;                       // IMPORTANT
     option.textContent = `AY ${y}-${nextYear}`;
 
     yearDropdown.appendChild(option);
   }
 
-  // Validate selected year
+  /* ---------- Validate on Change ---------- */
   yearDropdown.addEventListener("change", function () {
-    let selectedYear = parseInt(this.value);
+    const selectedYear = this.value;
+
+    // If empty → block submit
+    if (!selectedYear) {
+      errorDiv.style.display = "block";
+      errorDiv.innerText = "Please select an Assessment Year.";
+      form.onsubmit = () => false;
+      return;
+    }
 
     fetch("/check_year", {
       method: "POST",
       headers: { "Content-Type": "application/json" },
       body: JSON.stringify({
-        table: tableName,  // dynamic table name
+        table: tableName,
         year: selectedYear
       })
     })
@@ -38,15 +43,27 @@ document.addEventListener("DOMContentLoaded", function () {
       .then(data => {
         if (data.exists) {
           errorDiv.style.display = "block";
-          errorDiv.innerText = `Year ${selectedYear}-${selectedYear + 1} already exists!`;
-
-          // Block submission
-          form.onsubmit = function () { return false; };
+          errorDiv.innerText = `AY ${selectedYear}-${parseInt(selectedYear) + 1} already exists!`;
+          form.onsubmit = () => false;
         } else {
           errorDiv.style.display = "none";
-          form.onsubmit = null; // Allow submit
+          errorDiv.innerText = "";
+          form.onsubmit = null; // allow submit
         }
+      })
+      .catch(() => {
+        errorDiv.style.display = "block";
+        errorDiv.innerText = "Error validating year. Please try again.";
+        form.onsubmit = () => false;
       });
   });
-});
 
+  /* ---------- Final Safety Check on Submit ---------- */
+  form.addEventListener("submit", function (e) {
+    if (!yearDropdown.value) {
+      e.preventDefault();
+      errorDiv.style.display = "block";
+      errorDiv.innerText = "Assessment Year is required.";
+    }
+  });
+});
diff --git a/templates/add_ao.html b/templates/add_ao.html
index 74756e1..0ca4943 100644
--- a/templates/add_ao.html
+++ b/templates/add_ao.html
@@ -13,8 +13,15 @@
     <form id="ao" method="POST">
         <div class="form-group full-width inline-2">
             <div>
-                <label>Year:</label>
-                <select id="year" name="year" required></select>
+                <label>Assessment Year:</label>
+                <select id="year" name="year" required>
+                    <option value="" disabled selected>
+                        -- Please select Assessment Year --
+                    </option>
+                </select>
+
+
+
                 <div id="yearError" style="color:red; display:none; margin-bottom:10px;"></div>
             </div>
         </div>
diff --git a/templates/add_cit.html b/templates/add_cit.html
index 5d1630d..ad7c933 100644
--- a/templates/add_cit.html
+++ b/templates/add_cit.html
@@ -12,8 +12,12 @@
     <form id="cit" method="POST">
         <div class="form-group full-width inline-2">
             <div>
-                <label>Year:</label>
-                <select id="year" name="year" required></select>
+                <label>Assessment Year:</label>
+                <select id="year" name="year" required>
+                    <option value="" disabled selected>
+                        -- Please select Assessment Year --
+                    </option>
+                </select>
                 <div id="yearError" style="color:red; display:none; margin-bottom:10px;"></div>
             </div>
         </div>
diff --git a/templates/add_itat.html b/templates/add_itat.html
index 8d32c71..346fa27 100644
--- a/templates/add_itat.html
+++ b/templates/add_itat.html
@@ -14,8 +14,12 @@
 
         <div class="form-group full-width inline-2">
             <div>
-                <label>Year:</label>
-                <select id="year" name="year" required></select>
+                <label>Assessment Year:</label>
+                <select id="year" name="year" required>
+                    <option value="" disabled selected>
+                        -- Please select Assessment Year --
+                    </option>
+                </select>
                 <div id="yearError" style="color:red; display:none; margin-bottom:10px;"></div>
             </div>
         </div>
diff --git a/templates/add_itr.html b/templates/add_itr.html
index 267e5e6..54f1378 100644
--- a/templates/add_itr.html
+++ b/templates/add_itr.html
@@ -13,8 +13,12 @@
     <form id="itr" method="POST">
         <div class="form-group full-width inline-2">
             <div>
-                <label>Year:</label>
-                <select id="year" name="year" required></select>
+                <label>Assessment Year:</label>
+                <select id="year" name="year" required>
+                    <option value="" disabled selected>
+                        -- Please select Assessment Year --
+                    </option>
+                </select>
                 <div id="yearError" style="color:red; display:none; margin-bottom:10px;"></div>
             </div>
         </div>
diff --git a/templates/base.html b/templates/base.html
index cec7f06..0531bd6 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -5,59 +5,69 @@
     <meta charset="UTF-8" />
     <title>{% block title %}Income Tax Utilities{% endblock %}</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <!-- Shared CSS -->
+
+    <!-- Main CSS -->
     <link rel="stylesheet" href="{{ url_for('static', filename='css/index.css') }}">
 
-    <!-- Extra CSS for child pages -->
     {% block extra_css %}{% endblock %}
 </head>
 
 <body>
-    <!-- NAVBAR -->
+
+    <!-- ================= NAVBAR ================= -->
     <div class="navbar">
         <div class="nav-left">
+            <!-- ☰ visible ONLY on mobile via CSS -->
             <span class="toggle-btn" onclick="toggleSidebar()">☰</span>
-            <img src="{{ url_for('static', filename='images/lcepllogo.png') }}" class="nav-logo" alt="Logo" />
+
+            <img src="{{ url_for('static', filename='images/lcepllogo.png') }}" class="nav-logo" alt="LCEPL Logo">
+
             <h3>LAXMI CIVIL ENGINEERING SERVICES PVT. LTD.</h3>
         </div>
     </div>
 
-    <!-- SIDEBAR -->
-    <div class="sidebar hide" id="sidebar">
+    <!-- ================= SIDEBAR ================= -->
+    <div class="sidebar" id="sidebar">
+
         <a href="{{ url_for('index') }}">
             <h2>Dashboard</h2>
         </a>
-        <!-- ITR model -->
+
+        <!-- ITR -->
         <div class="menu-btn" onclick="toggleMenu('itrMenu')">ITR ▼</div>
         <div class="submenu" id="itrMenu">
             <a href="{{ url_for('add_itr') }}">➕ Add ITR</a>
             <a href="{{ url_for('display_itr') }}">🧾 ITR Records</a>
         </div>
-        <!-- AO model -->
+
+        <!-- AO -->
         <div class="menu-btn" onclick="toggleMenu('aoMenu')">AO ▼</div>
         <div class="submenu" id="aoMenu">
             <a href="{{ url_for('add_ao') }}">➕ Add AO</a>
             <a href="{{ url_for('display_ao') }}">🧾 AO Records</a>
         </div>
-        <!-- CIT model -->
+
+        <!-- CIT -->
         <div class="menu-btn" onclick="toggleMenu('citMenu')">CIT ▼</div>
         <div class="submenu" id="citMenu">
             <a href="{{ url_for('add_cit') }}">➕ Add CIT</a>
             <a href="{{ url_for('display_cit') }}">🧾 CIT Records</a>
         </div>
-        <!-- ITAT model -->
+
+        <!-- ITAT -->
         <div class="menu-btn" onclick="toggleMenu('itatMenu')">ITAT ▼</div>
         <div class="submenu" id="itatMenu">
             <a href="{{ url_for('add_itat') }}">➕ Add ITAT</a>
             <a href="{{ url_for('display_itat') }}">🧾 ITAT Records</a>
         </div>
-        <!-- MAT credit model -->
-        <div class="menu-btn" onclick="toggleMenu('matCredit')">Mat Credit ▼</div>
-        <div class="submenu" id="matCredit">
-            <a href="{{ url_for('mat_credit') }}">📄 Mat Credit from</a>
+
+        <!-- MAT CREDIT -->
+        <div class="menu-btn" onclick="toggleMenu('matMenu')">MAT Credit ▼</div>
+        <div class="submenu" id="matMenu">
+            <a href="{{ url_for('mat_credit') }}">📄 MAT Credit Form</a>
         </div>
 
-        <!-- Documents & Reports -->
+        <!-- DOCUMENTS -->
         <div class="menu-btn" onclick="toggleMenu('docMenu')">Documents & Reports ▼</div>
         <div class="submenu" id="docMenu">
             <a href="{{ url_for('upload_file') }}">📂 Upload</a>
@@ -66,21 +76,21 @@
             <a href="{{ url_for('summary_report') }}">📝 Summary Report</a>
         </div>
 
-        <!-- Logout at bottom -->
+        <!-- LOGOUT -->
         <a href="{{ url_for('auth.logout') }}" class="sidebar-logout">
-            <img src="{{ url_for('static', filename='images/logout_icon.png') }}" class="logout-icon" alt="Logout" />
+            <img src="{{ url_for('static', filename='images/logout_icon.png') }}" class="logout-icon" alt="Logout">
         </a>
+
     </div>
 
-    <!-- MAIN CONTENT -->
+    <!-- ================= MAIN CONTENT ================= -->
     <div class="main" id="main">
         {% block content %}{% endblock %}
     </div>
 
-    <!-- Shared JS -->
+    <!-- JS -->
     <script src="{{ url_for('static', filename='js/toggle.js') }}"></script>
 
-    <!-- Extra JS for child pages -->
     {% block extra_js %}{% endblock %}
 </body>
 
diff --git a/templates/index.html b/templates/index.html
index 0b06567..8ce759b 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -5,7 +5,7 @@
 {% block content %}
 <div class="container">
     <h2 class="header">Dashboard 🏛️</h2>
-    <p style="text-align: center; font-size: 20px;">
+    <p>
         Welcome to Income Tax Utilities Dashboard
     </p>
 </div>
diff --git a/templates/mat_credit.html b/templates/mat_credit.html
index 92b0e9f..7552245 100644
--- a/templates/mat_credit.html
+++ b/templates/mat_credit.html
@@ -7,68 +7,65 @@
 {% endblock %}
 
 {% block content %}
-<div class="container">
-    <div class="container">
-        <h2 style="text-align:center;">MAT Credit and Utilization Records</h2>
-        <!-- YEAR ADD CONTROLS -->
-        <div class="year-controls">
-            <select id="yearSelect">
-                <option value="">-- Select AY --</option>
-                {% for y in range(2001, 2026) %}
-                <option value="{{ y }}-{{ y+1 }}">{{ y }}-{{ y+1 }}</option>
-                {% endfor %}
-            </select>
-            <button onclick="addYearColumn()">➕ Add Year</button>
-        </div>
+<div class="container mat-container">
 
-        <!-- SCROLL WRAPPER -->
-        <div class="table-wrapper">
-            <table id="matTable">
-                <thead>
-                    <tr id="tableHeader">
-                        <th>AY</th>
-                        <th>MAT Credit</th>
-
-                        {% for y in added_years %}
-                        <th>Utilized {{ y }}</th>
-                        {% endfor %}
-
-                        <th>Balance</th>
-                        <th>Action</th>
-                    </tr>
-                </thead>
-
-                <tbody>
-                    {% for row in mat_rows %}
-                    <tr>
-                        <td contenteditable="true">{{ row.financial_year }}</td>
-                        <td><input value="{{ row.mat_credit }}"></td>
-
-                        {% for y in added_years %}
-                        <td>
-                            <input value="{{ utilization_map.get(row.id, {}).get(y, '') }}">
-                        </td>
-                        {% endfor %}
-
-                        <td><input value="{{ row.balance }}"></td>
-                        <td><button onclick="saveRow(this)">Save</button></td>
-                    </tr>
-                    {% endfor %}
-
-                </tbody>
-            </table>
-        </div>
-
-        <br>
-        <button onclick="addRow()">➕ Add Row</button>
-        <!-- <button onclick="saveAll()">💾 Save All</button> -->
+    <h2 class="page-title">MAT Credit and Utilization Records</h2>
 
+    <!-- YEAR ADD CONTROLS -->
+    <div class="year-controls">
+        <select id="yearSelect">
+            <option value="">-- Select AY --</option>
+            {% for y in range(2001, 2026) %}
+            <option value="{{ y }}-{{ y+1 }}">{{ y }}-{{ y+1 }}</option>
+            {% endfor %}
+        </select>
+        <button onclick="addYearColumn()">➕ Add Utilized Year</button>
     </div>
 
+    <!-- TABLE WRAPPER -->
+    <div class="table-wrapper">
+        <table id="matTable">
+            <thead>
+                <tr id="tableHeader">
+                    <th>AY</th>
+                    <th>MAT Credit</th>
+
+                    {% for y in added_years %}
+                    <th>Utilized {{ y }}</th>
+                    {% endfor %}
+
+                    <th>Balance</th>
+                    <th>Action</th>
+                </tr>
+            </thead>
+
+            <tbody>
+                {% for row in mat_rows %}
+                <tr>
+                    <td contenteditable="true">{{ row.financial_year }}</td>
+                    <td><input value="{{ row.mat_credit }}"></td>
+
+                    {% for y in added_years %}
+                    <td>
+                        <input value="{{ utilization_map.get(row.id, {}).get(y, '') }}">
+                    </td>
+                    {% endfor %}
+
+                    <td><input value="{{ row.balance }}"></td>
+                    <td><button onclick="saveRow(this)">Save</button></td>
+                </tr>
+                {% endfor %}
+            </tbody>
+        </table>
+    </div>
+
+    <div class="action-footer">
+        <button class="add-row-btn" onclick="addRow()">➕ Add New Row</button>
+    </div>
 
 </div>
+{% endblock %}
 
 {% block extra_js %}
 <script src="{{ url_for('static', filename='js/mat_credit.js') }}"></script>
-{% endblock %}
 {% endblock %}
\ No newline at end of file