modification ui changes base pages,login, manus and from chnages and adding filds. V2 commit

.idea/.gitignore

@@ -1,3 +0,0 @@
-# Default ignored files
-/shelf/
-/workspace.xml

.idea/New folder.iml

@@ -1,8 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<module type="PYTHON_MODULE" version="4">
-  <component name="NewModuleRootManager">
-    <content url="file://$MODULE_DIR$" />
-    <orderEntry type="inheritedJdk" />
-    <orderEntry type="sourceFolder" forTests="false" />
-  </component>
-</module>

.idea/inspectionProfiles/Project_Default.xml

@@ -1,14 +0,0 @@
-<component name="InspectionProjectProfileManager">
-  <profile version="1.0">
-    <option name="myName" value="Project Default" />
-    <inspection_tool class="PyPackageRequirementsInspection" enabled="true" level="WARNING" enabled_by_default="true">
-      <option name="ignoredPackages">
-        <value>
-          <list size="1">
-            <item index="0" class="java.lang.String" itemvalue="pandas" />
-          </list>
-        </value>
-      </option>
-    </inspection_tool>
-  </profile>
-</component>

.idea/inspectionProfiles/profiles_settings.xml

@@ -1,6 +0,0 @@
-<component name="InspectionProjectProfileManager">
-  <settings>
-    <option name="USE_PROJECT_PROFILE" value="false" />
-    <version value="1.0" />
-  </settings>
-</component>

.idea/misc.xml

@@ -1,7 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="Black">
-    <option name="sdkName" value="Python 3.13 (New folder)" />
-  </component>
-  <component name="ProjectRootManager" version="2" project-jdk-name="Python 3.13 (New folder)" project-jdk-type="Python SDK" />
-</project>

.idea/modules.xml

@@ -1,8 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="ProjectModuleManager">
-    <modules>
-      <module fileurl="file://$PROJECT_DIR$/.idea/New folder.iml" filepath="$PROJECT_DIR$/.idea/New folder.iml" />
-    </modules>
-  </component>
-</project>

AppCode/AOHandler.py

@@ -54,7 +54,7 @@ class AOHandler:
                 "net_taxable_income", "tax_30_percent", "tax_book_profit_18_5",
                 "surcharge_12", "edu_cess_3", "total_tax_payable", "mat_credit",
                 "interest_234c", "total_tax", "advance_tax", "tds", "tcs",
-                "tax_on_assessment", "refund"
+                "tax_on_assessment", "refund","Remarks"
             ]
 
             values = [data.get(f, 0) for f in fields]
@@ -73,7 +73,7 @@ class AOHandler:
             "net_taxable_income", "tax_30_percent", "tax_book_profit_18_5",
             "surcharge_12", "edu_cess_3", "total_tax_payable", "mat_credit",
             "interest_234c", "total_tax", "advance_tax", "tds", "tcs",
-            "tax_on_assessment", "refund"
+            "tax_on_assessment", "refund","Remarks"
         ]
 
         values = [id] + [data.get(f, 0) for f in fields]

AppCode/CITHandler.py

@@ -41,7 +41,7 @@ class CITHandler:
             "year", "gross_total_income", "deduction_80ia_business", "deduction_sec37_disallowance",
             "deduction_80g", "net_taxable_income", "tax_30_percent", "tax_book_profit_18_5",
             "tax_payable", "surcharge_12", "edu_cess_3", "total_tax_payable", "mat_credit",
-            "interest_234c", "total_tax", "advance_tax", "tds", "tcs", "tax_on_assessment", "refund"
+            "interest_234c", "total_tax", "advance_tax", "tds", "tcs", "tax_on_assessment", "refund","Remarks"
         ]
 
         values = [data.get(col, 0) for col in columns]
@@ -60,7 +60,7 @@ class CITHandler:
             "tax_payable", "surcharge_12", "edu_cess_3",
             "total_tax_payable", "mat_credit", "interest_234c",
             "total_tax", "advance_tax", "tds", "tcs",
-            "tax_on_assessment", "refund"
+            "tax_on_assessment", "refund","Remarks"
         ]
 
         values = [id] + [data.get(col, 0) for col in columns]

AppCode/Config.py

@@ -1,12 +1,12 @@
 import mysql.connector
 import os
 
+# Database Config 
 class DBConfig:
-    # Database credentials (can also be read from environment variables)
     MYSQL_HOST = os.getenv("MYSQL_HOST", "127.0.0.1")
     MYSQL_USER = os.getenv("MYSQL_USER", "root")
     MYSQL_PASSWORD = os.getenv("MYSQL_PASSWORD", "root")
-    MYSQL_DB = os.getenv("MYSQL_DB", "income_tax")
+    MYSQL_DB = os.getenv("MYSQL_DB", "test_income_taxdb")
 
     @staticmethod
     def get_db_connection():

AppCode/ITRHandler.py

@@ -1,10 +1,18 @@
+from AppCode.Config import DBConfig
 import mysql.connector
+from AppCode.YearGet import YearGet
+
 import pandas as pd
 import pymysql
 import io
-from flask import send_file, render_template, request
+
+# new
 from AppCode.Config import DBConfig
-from AppCode.YearGet import YearGet
+import mysql.connector
+import pandas as pd
+import io
+from flask import send_file, render_template, request
+
 
 
 class ITRHandler:
@@ -36,23 +44,25 @@ class ITRHandler:
         for result in self.cursor.stored_results():
             records = result.fetchall()
 
-        # return single record
         if records:
             print(records[0])
-            return records[0]  
+            return records[0]  # return single record
            
         return None
 
 
+
+
     # INSERT ITR RECORD using procedure "add_itr"
     def add_itr(self, data):
+
         columns = [
             'year', 'gross_total_income', 'disallowance_14a', 'disallowance_37',
             'deduction_80ia_business', 'deduction_80ia_misc', 'deduction_80ia_other',
             'deduction_sec37_disallowance', 'deduction_80g', 'net_taxable_income',
             'tax_30_percent', 'tax_book_profit_18_5', 'tax_payable', 'surcharge_12',
             'edu_cess_3', 'total_tax_payable', 'mat_credit', 'interest_234c',
-            'total_tax', 'advance_tax', 'tds', 'tcs', 'tax_on_assessment', 'refund'
+            'total_tax', 'advance_tax', 'tds', 'tcs', 'tax_on_assessment', 'refund', 'Remarks'
         ]
 
         values = [data.get(col, 0) for col in columns]
@@ -62,7 +72,6 @@ class ITRHandler:
         self.conn.commit()
 
     
-
     def update(self, id, data):
         columns = [
             'year', 'gross_total_income', 'disallowance_14a', 'disallowance_37',
@@ -70,7 +79,7 @@ class ITRHandler:
             'deduction_sec37_disallowance', 'deduction_80g', 'net_taxable_income',
             'tax_30_percent', 'tax_book_profit_18_5', 'tax_payable', 'surcharge_12',
             'edu_cess_3', 'total_tax_payable', 'mat_credit', 'interest_234c',
-            'total_tax', 'advance_tax', 'tds', 'tcs', 'tax_on_assessment', 'refund'
+            'total_tax', 'advance_tax', 'tds', 'tcs', 'tax_on_assessment', 'refund','Remarks'
         ]
 
         values = [id] + [data.get(col, 0) for col in columns]  
@@ -88,7 +97,7 @@ class ITRHandler:
         self.conn.commit()
 
 
-    # dowanload itr report by year 
+
     def itr_report_download(self, selected_year):
 
             try:
@@ -104,10 +113,14 @@ class ITRHandler:
 
                 # Convert SQL rows to DataFrame
                 df = pd.DataFrame(rows)
+
                 # Transpose
                 df_transposed = df.transpose()
                 df_transposed.insert(0, 'Field', df_transposed.index)
 
+                print("df-->",df_transposed)
+            
+
                 record_cols = {
                     i: f"Record {i}"
                     for i in df_transposed.columns if isinstance(i, int)

AppCode/Login.py

@@ -0,0 +1 @@
+

AppCode/LoginAuth.py

@@ -0,0 +1,44 @@
+from flask import Blueprint, render_template, request, redirect, url_for, flash, session
+from flask import flash,redirect,url_for
+from functools import wraps
+from flask import session
+
+class LoginAuth:
+    def __init__(self):
+        self.bp = Blueprint("auth", __name__)
+
+        # LOGIN ROUTE
+        @self.bp.route('/login', methods=['GET', 'POST'])
+        def login():
+            if request.method == 'POST':
+                username = request.form.get("username")
+                password = request.form.get("password")
+
+                # Dummy validation — REPLACE with DB check later
+                if username == "admin" and password == "admin123":
+                    session['user'] = username
+                    flash("Login successful!", "success")
+                    return redirect(url_for('welcome'))
+                else:
+                    flash("Invalid username or password!", "danger")
+
+            return render_template("login.html")
+
+        # LOGOUT ROUTE
+        @self.bp.route('/logout')
+        def logout():
+            session.clear()
+            flash("Logged out successfully!", "success")
+            return redirect(url_for('auth.login'))
+        
+        # ===================================================
+    #       LOGIN REQUIRED DECORATOR INSIDE CLASS
+    # ===================================================
+    def login_required(self, f):
+        @wraps(f)
+        def wrapper(*args, **kwargs):
+            if "user" not in session:
+                flash("Please login first!", "danger")
+                return redirect(url_for("auth.login"))
+            return f(*args, **kwargs)
+        return wrapper

AppCode/YearGet.py

@@ -11,11 +11,13 @@ class YearGet:
     def get_year_by_model(self, proc_name):
         try:
             self.cursor.callproc(proc_name)
+
             years = []
             for result in self.cursor.stored_results():
                     rows = result.fetchall()
                     years = [row["year"] for row in rows]
 
+            print("-- years get --",years)
             return years
         
         except mysql.connector.Error as e:

main.py

@@ -6,6 +6,7 @@ import io
 import mysql.connector
 from werkzeug.utils import secure_filename
 
+
 from AppCode.Config import DBConfig
 from AppCode.FileHandler import FileHandler
 from AppCode.DocumentHandler import DocumentHandler
@@ -14,20 +15,26 @@ from AppCode.AOHandler import AOHandler
 from AppCode.CITHandler import CITHandler
 from AppCode.ITATHandler import ITATHandler
 from AppCode.YearGet import YearGet
+from AppCode.LoginAuth import LoginAuth
 
 
-
+# Server
 app = Flask(__name__)
 app.secret_key="secret1234"
 app.config['UPLOAD_FOLDER'] = FileHandler.UPLOAD_FOLDER
+auth = LoginAuth()
+app.register_blueprint(auth.bp)
+
 
 # welcome page
 @app.route('/')
+@auth.login_required
 def welcome():
-    return render_template('welcome.html')
+    return render_template('index.html')
  
 # Dashboard page
 @app.route('/dashboard')
+@auth.login_required
 def index():
     return render_template('index.html')  
 
@@ -97,7 +104,6 @@ def display_itr():
 @app.route('/itr/add', methods=['GET', 'POST'])
 def add_itr():
     if request.method == 'POST':
-       
         itr = ITRHandler()
         itr.add_itr(request.form)
         itr.close()
@@ -121,8 +127,6 @@ def update_itr(id):
 
     if request.method == 'POST':
         data = {k: request.form.get(k, 0) for k in request.form}
-        print("itr data-->",data)
-
         itr.update(id, data=data)
         itr.close()
         return redirect(url_for('display_itr'))
@@ -132,23 +136,6 @@ def update_itr(id):
     return render_template('update_itr.html', record=record)
 
 
-# new new -- check year in table existe or not by using ajax calling.
-@app.route('/check_year', methods=['POST'])
-def check_year():
-    table_name = request.json.get("table")
-    year = request.json.get("year")
-
-    conn = DBConfig.get_db_connection()
-    cursor = conn.cursor()
-
-    query = f"SELECT COUNT(*) FROM {table_name} WHERE year = %s"
-    cursor.execute(query, (year,))
-    result = cursor.fetchone()[0]
-
-    cursor.close()
-    conn.close()
-
-    return {"exists": result > 0}
 
 
 ## ===============================================
@@ -210,7 +197,7 @@ def delete_ao(id):
 ## CIT (Commissioner of Income Tax) Routes
 ## =======================================================
 
-# DISPLAY all CIT records
+# 1 DISPLAY all CIT records
 @app.route('/cit_records')
 def display_cit():
     cit = CITHandler()
@@ -218,6 +205,7 @@ def display_cit():
     cit.close()
     return render_template('display_cit.html', cit_records=cit_records)
 
+# 2 new CIT records add
 @app.route('/cit/add', methods=['GET', 'POST'])
 def add_cit():
     if request.method == 'POST':
@@ -229,7 +217,7 @@ def add_cit():
 
     return render_template('add_cit.html')
 
-
+# 3 delete CIT records by id
 @app.route('/cit/delete/<int:id>', methods=['POST'])
 def delete_cit(id):
     cit = CITHandler()
@@ -238,7 +226,7 @@ def delete_cit(id):
     flash("CIT record deleted successfully!", "success")
     return redirect(url_for('display_cit'))
 
-
+# 4 update CIT records by id
 @app.route('/cit/update/<int:id>', methods=['GET', 'POST'])
 def update_cit(id):
     cit = CITHandler()
@@ -262,7 +250,7 @@ def update_cit(id):
 ## ITAT (Income Tax Appellate Tribunal) Routes
 ## =======================================================
 
-# DISPLAY all ITAT records
+# 1.DISPLAY all ITAT records
 @app.route('/itat_records')
 def display_itat():
     itat = ITATHandler()
@@ -270,16 +258,22 @@ def display_itat():
     itat.close()
     return render_template('display_itat.html', records=records)
 
-
-@app.route('/itat/delete/<int:id>', methods=['POST'])
-def delete_itat(id):
+# 2.Add new ITAT records
+@app.route('/itat/add', methods=['GET', 'POST'])
+def add_itat():
     itat = ITATHandler()
-    itat.delete_itat_by_id(id)
+
+    if request.method == 'POST':
+        data = {k: request.form.get(k, 0) for k in request.form}
+        itat.add_itat(data)
         itat.close()
-    flash("ITAT Record Deleted!", "success")
+        flash("ITAT record added successfully!", "success")
         return redirect(url_for('display_itat'))
 
+    itat.close()
+    return render_template('add_itat.html')
 
+# 3.Update ITAT records by id
 @app.route('/itat/update/<int:id>', methods=['GET', 'POST'])
 def update_itat(id):
     itat = ITATHandler()
@@ -306,28 +300,26 @@ def update_itat(id):
     itat.close()
     return render_template('update_itat.html', record=record)
 
-
-@app.route('/itat/add', methods=['GET', 'POST'])
-def add_itat():
+# 3.delete ITAT records by id
+@app.route('/itat/delete/<int:id>', methods=['POST'])
+def delete_itat(id):
     itat = ITATHandler()
-
-    if request.method == 'POST':
-        data = {k: request.form.get(k, 0) for k in request.form}
-        itat.add_itat(data)
+    itat.delete_itat_by_id(id)
     itat.close()
-        flash("ITAT record added successfully!", "success")
+    flash("ITAT Record Deleted!", "success")
     return redirect(url_for('display_itat'))
 
-    itat.close()
-    return render_template('add_itat.html')
 
 
-# report form
+
+## =======================================================
+## All Report Routes
+## =======================================================
+# report page
 @app.route('/reports')
 def reports():
     return render_template("reports.html")
 
-
 # Itr report download by year
 @app.route('/itr_report', methods=['GET'])
 def itr_report():
@@ -437,13 +429,33 @@ def itat_report():
 
         return render_template("itat_reports.html", years=years)
 
-
+# summary report
 @app.route('/summary_report', methods=['GET'])
 def summary_report():
     docHandler = DocumentHandler()
     return docHandler.Summary_report(request=request)
 
 
+# new new -- check year in table existe or not by using ajax calling.
+@app.route('/check_year', methods=['POST'])
+def check_year():
+    table_name = request.json.get("table")
+    year = request.json.get("year")
+
+    conn = DBConfig.get_db_connection()
+    cursor = conn.cursor()
+
+    query = f"SELECT COUNT(*) FROM {table_name} WHERE year = %s"
+    cursor.execute(query, (year,))
+    result = cursor.fetchone()[0]
+
+    cursor.close()
+    conn.close()
+
+    return {"exists": result > 0}
+
+
+# run 
 if __name__ == '__main__':
       app.run(host='0.0.0.0', port=5003, debug=True)
  

static/css/add_ao.css

@@ -1,130 +1,297 @@
- /* Reset and base styles */
- * {
+/* ================= GLOBAL ================= */
+* {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
- }
+    font-family: "Segoe UI", sans-serif;
+}
 
- body {
-     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-     background-color: #f5f7fa;
-     color: #333;
-     padding: 30px 0;
- }
+body {
+    background-color: #f0f4ff;
+    /* very light blue background */
+    display: flex;
+}
 
- .container {
-     width: 90%;
-     max-width: 700px;
-     margin: auto;
-     background-color: #fff;
-     padding: 40px;
-     border-radius: 12px;
-     box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
- }
+a {
+    text-decoration: none !important;
 
- h2 {
-     text-align: center;
-     margin-bottom: 30px;
-     font-size: 28px;
-     color: #2c3e50;
- }
+}
 
- form {
+/* ================= NAVBAR ================= */
+.navbar {
+    width: 100%;
+    height: 60px;
+    background-color: #007bff;
+    /* primary blue */
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 20px;
+    position: fixed;
+    top: 0;
+    left: 0;
+    color: white;
+    z-index: 1000;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+    gap: 10px;
+}
+
+.nav-left {
+    display: flex;
+    align-items: center;
+    gap: 15px;
+}
+
+.nav-logo {
+    height: 80px;
+    filter: brightness(0) invert(1);
+}
+
+.toggle-btn {
+    font-size: 26px;
+    cursor: pointer;
+}
+
+/* ================= SIDEBAR ================= */
+.sidebar {
+    width: 250px;
+    background: #ffffff;
+    height: calc(100vh - 60px);
+    position: fixed;
+    top: 60px;
+    left: 0;
+    padding-top: 20px;
+    overflow-y: auto;
+    border-right: 1px solid #e0e0e0;
     display: flex;
     flex-direction: column;
- }
+    z-index: 0;
+    transition: 0.3s;
+}
 
- label {
-     margin-top: 15px;
-     margin-bottom: 6px;
-     font-weight: bold;
-     color: #333;
- }
+.sidebar.hide {
+    left: -250px;
+}
 
- input[type="number"] {
-     padding: 10px 12px;
-     border: 1px solid #ccc;
-     border-radius: 6px;
-     font-size: 16px;
-     transition: border-color 0.3s ease;
- }
-
- input[type="number"]:focus {
-     border-color: #007BFF;
-     outline: none;
- }
-
- button[type="submit"] {
-     margin-top: 30px;
-     padding: 12px;
-     background-color: #007BFF;
-     border: none;
-     border-radius: 6px;
-     color: white;
-     font-size: 18px;
-     cursor: pointer;
-     transition: background-color 0.3s ease;
- }
-
- button[type="submit"]:hover {
-     background-color: #0056b3;
- }
-
- /* Back button styling */
- .back-btn {
-     display: inline-block;
+.sidebar h2 {
+    color: #007bff;
+    text-align: center;
     margin-bottom: 20px;
-     padding: 10px 18px;
-     background: #6c757d;
-     color: white;
-     font-size: 15px;
-     font-weight: 600;
+    font-size: 22px;
+}
+
+.menu-btn {
+    padding: 14px 20px;
+    font-size: 17px;
+    color: #007bff;
+    cursor: pointer;
+    border-bottom: 1px solid #e0e0e0;
+    transition: 0.2s;
+}
+
+.menu-btn:hover {
+    background: #cce5ff;
+    color: #0056b3;
+}
+
+.submenu {
+    display: none;
+    background: #f0f8ff;
+}
+
+.submenu a {
+    display: block;
+    padding: 12px 35px;
+    color: #007bff;
+    border-bottom: 1px solid #e0e0e0;
+    transition: 0.2s;
+}
+
+.submenu a:hover {
+    background: #cce5ff;
+    color: #004085;
+}
+
+.sidebar-logout {
+    margin-top: auto;
+    padding: 10px 16px;
+    background: #007bff;
+    display: flex;
+    justify-content: center;
+    align-items: center;
     border-radius: 6px;
     text-decoration: none;
-     transition: background 0.3s ease;
- }
+    color: white;
+}
 
- .back-btn:hover {
-     background: #5a6268;
- }
+.sidebar-logout:hover {
+    background: #a2cdfa;
+}
 
- .form-group select {
-     width: 100%;
-     padding: 10px 12px;
-     border: 1px solid #cbd3da;
+
+.logout-icon {
+    width: 22px;
+    height: 22px;
+}
+
+/* ================= MAIN CONTENT ================= */
+.main {
+    margin-left: 260px;
+    width: calc(100% - 260px);
+    padding: 30px;
+    margin-top: 80px;
+    transition: 0.3s;
+}
+
+/* ================= CONTAINER ================= */
+.container {
+    background: white;
+    padding: 30px;
+    width: 95%;
+    margin: auto;
     border-radius: 8px;
-     font-size: 16px;
-     background-color: #fdfdfd;
-     height: 40px;
-     cursor: pointer;
-     transition: all 0.25s ease-in-out;
- }
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
 
- .form-group select:focus {
-     border-color: #007BFF;
-     background: #ffffff;
-     box-shadow: 0 0 8px rgba(0, 123, 255, 0.25);
+/* ================= BACK BUTTON ================= */
+.back-btn {
+    background: #007bff;
+    padding: 10px 16px;
+    color: white;
+    display: inline-block;
+    border-radius: 6px;
+    margin-bottom: 20px;
+    transition: background 0.3s ease;
+}
+
+.back-btn:hover {
+    background: #0056b3;
+}
+
+/* ================= FORM ================= */
+.form-group {
+    margin-bottom: 15px;
+    font-weight: bold;
+}
+
+form input,
+form select {
+    padding: 10px;
+    width: 100%;
+    margin-top: 5px;
+    border: 1px solid #ccc;
+    border-radius: 6px;
+    background-color: #f8f9ff;
+    /* subtle input background */
     outline: none;
- }
+
+}
 
 
+input:focus,
+select:focus {
+    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
+    /* blue glow on focus */
+}
 
-
-
- @media (max-width: 600px) {
-     .container {
-         padding: 20px;
-     }
-
-     h2 {
-         font-size: 22px;
-     }
-
-     input[type="number"] {
+.auto {
+    padding: 10px 12px;
+    border: 1px solid #ccd1d9;
+    border-radius: 6px;
     font-size: 15px;
-     }
+    background-color: #d5edd7;
+    transition: all 0.25s ease-in-out;
+}
 
-     button[type="submit"] {
-         font-size: 16px;
-     }
- }
+
+/* ================= SUBMIT BUTTON (GREEN) ================= */
+button {
+    width: 60%;
+    margin-top: 20px;
+    margin-left: 20%;
+    padding: 12px 20px;
+    background-color: #28a745;
+    /* Bootstrap green */
+    color: #ffffff;
+    border: none;
+    cursor: pointer;
+    border-radius: 6px;
+    font-weight: 600;
+    font-size: 15px;
+    transition: background-color 0.3s ease, box-shadow 0.3s ease;
+}
+
+button:hover {
+    background-color: #218838;
+    /* Darker green on hover */
+    box-shadow: 0 4px 10px rgba(40, 167, 69, 0.35);
+}
+
+button:active {
+    background-color: #1e7e34;
+}
+
+button:focus {
+    outline: none;
+    box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.35);
+}
+
+
+/* ================= TABLE ================= */
+.table-wrapper {
+    overflow-x: auto;
+}
+
+table {
+    width: 100%;
+    border-collapse: collapse;
+    margin-top: 20px;
+}
+
+th,
+td {
+    padding: 12px;
+    border: 1px solid #dee2e6;
+    text-align: right;
+    white-space: nowrap;
+}
+
+th {
+    background-color: #007bff;
+    color: white;
+    text-align: center;
+}
+
+tr:nth-child(even) {
+    background-color: #f0f8ff;
+}
+
+td:first-child,
+th:first-child {
+    text-align: left;
+}
+
+.action-cell form {
+    display: inline-block;
+    margin-left: 5px;
+}
+
+/* Full width rows (span 2 columns) */
+.form-group {
+    display: flex;
+    flex-direction: column;
+}
+
+.form-group.full-width {
+    grid-column: span 2;
+}
+
+/* Special case: two inputs inside one form-group */
+.form-group.inline-2 {
+    flex-direction: row;
+    gap: 15px;
+}
+
+.form-group.inline-2>div {
+    flex: 1;
+}

static/css/add_cit.css

@@ -1,126 +1,155 @@
-/* ...existing styles... (no changes needed) */
+/* ================= RESET ================= */
 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
+    font-family: "Segoe UI", sans-serif;
 }
 
 body {
-    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-    background-color: #f5f7fa;
-    color: #333;
-    padding: 30px 0;
+    background-color: #f0f4ff;
+    /* very light blue background */
 }
 
+/* ================= CONTAINER ================= */
 .container {
-    width: 90%;
-    max-width: 700px;
-    margin: auto;
-    background-color: #fff;
-    padding: 40px;
-    border-radius: 12px;
-    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
+    max-width: 90%;
+    margin: 20px 20px 20px 20px;
+    /* top margin to clear navbar */
+    background: white;
+    padding: 10%;
+    border-radius: 8px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
 }
 
-h2 {
+.no-record {
     text-align: center;
-    margin-bottom: 30px;
-    font-size: 28px;
-    color: #2c3e50;
+    font-size: 18px;
+    margin-top: 20px;
+    color: #555;
+    padding: 15px;
+    background: #f9f9f9;
+    border-radius: 8px;
+    border: 1px solid #e0e0e0;
 }
 
-form {
+
+/* ================= FORM ================= */
+form label {
+    display: block;
+    margin-top: 10px;
+    font-weight: bold;
+    color: #000000;
+    /* dark blue text */
+}
+
+form input,
+form select {
+    width: 100%;
+    padding: 10px;
+    margin-top: 6px;
+    border: 1px solid #ccc;
+    border-radius: 6px;
+    outline: none;
+}
+
+form input:focus,
+form select:focus {
+    border-color: #0056b3;
+    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
+}
+
+.auto {
+    padding: 10px 12px;
+    border: 1px solid #ccd1d9;
+    border-radius: 6px;
+    font-size: 15px;
+    background-color: #d5edd7;
+    transition: all 0.25s ease-in-out;
+}
+
+/* ================= SUBMIT BUTTON (GREEN) ================= */
+button {
+    width: 60%;
+    margin-top: 20px;
+    margin-left: 20%;
+    padding: 12px 20px;
+    background-color: #28a745;
+    /* Bootstrap green */
+    color: #ffffff;
+    border: none;
+    cursor: pointer;
+    border-radius: 6px;
+    font-weight: 600;
+    font-size: 15px;
+    transition: background-color 0.3s ease, box-shadow 0.3s ease;
+}
+
+button:hover {
+    background-color: #218838;
+    /* Darker green on hover */
+    box-shadow: 0 4px 10px rgba(40, 167, 69, 0.35);
+}
+
+button:active {
+    background-color: #1e7e34;
+}
+
+button:focus {
+    outline: none;
+    box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.35);
+}
+
+/* ================= TABLE (if used in this page) ================= */
+.table-wrapper {
+    overflow-x: auto;
+}
+
+table {
+    width: 100%;
+    border-collapse: collapse;
+    margin-top: 20px;
+}
+
+th,
+td {
+    padding: 12px;
+    border: 1px solid #dee2e6;
+    text-align: right;
+    white-space: nowrap;
+}
+
+th {
+    background-color: #007bff;
+    color: white;
+    text-align: center;
+}
+
+tr:nth-child(even) {
+    background-color: #f0f8ff;
+}
+
+td:first-child,
+th:first-child {
+    text-align: left;
+}
+
+/* Full width rows (span 2 columns) */
+.form-group {
     display: flex;
     flex-direction: column;
 }
 
-label {
-    margin-top: 15px;
-    margin-bottom: 6px;
-    font-weight: 600;
-    color: #333;
+.form-group.full-width {
+    grid-column: span 2;
 }
 
-input[type="number"] {
-    padding: 10px 12px;
-    border: 1px solid #ccc;
-    border-radius: 6px;
-    font-size: 16px;
+/* Special case: two inputs inside one form-group */
+.form-group.inline-2 {
+    flex-direction: row;
+    gap: 15px;
 }
 
-input[type="number"]:focus {
-    border-color: #007BFF;
-    outline: none;
-}
-
-button[type="submit"] {
-    margin-top: 30px;
-    padding: 12px;
-    background-color: #007BFF;
-    border: none;
-    border-radius: 6px;
-    color: white;
-    font-size: 18px;
-    cursor: pointer;
-}
-
-button[type="submit"]:hover {
-    background-color: #0056b3;
-}
-
-/* Back button styling */
-.back-btn {
-    display: inline-block;
-    margin-bottom: 20px;
-    padding: 10px 18px;
-    background: #6c757d;
-    color: white;
-    font-size: 15px;
-    font-weight: 600;
-    border-radius: 6px;
-    text-decoration: none;
-    transition: background 0.3s ease;
-}
-
-.back-btn:hover {
-    background: #5a6268;
-}
-
-.form-group select {
-    width: 100%;
-    padding: 10px 12px;
-    border: 1px solid #cbd3da;
-    border-radius: 8px;
-    font-size: 16px;
-    background-color: #fdfdfd;
-    height: 40px;
-    cursor: pointer;
-    transition: all 0.25s ease-in-out;
-}
-
-.form-group select:focus {
-    border-color: #007BFF;
-    background: #ffffff;
-    box-shadow: 0 0 8px rgba(0, 123, 255, 0.25);
-    outline: none;
-}
-
-
-
-@media (max-width: 600px) {
-    .container {
-        padding: 20px;
-    }
-
-    h2 {
-        font-size: 22px;
-    }
-
-    input[type="number"] {
-        font-size: 15px;
-    }
-
-    button[type="submit"] {
-        font-size: 16px;
-    }
+.form-group.inline-2>div {
+    flex: 1;
 }

static/css/add_itat.css

@@ -1,105 +1,214 @@
- /* Same styling for layout */
- * {
+/* ================= GLOBAL ================= */
+* {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
- }
+    font-family: "Segoe UI", sans-serif;
+}
 
- body {
-     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-     background-color: #f5f7fa;
-     color: #333;
-     padding: 30px 0;
- }
+body {
+    background-color: #f0f4ff;
+    /* very light blue background */
+    display: flex;
+}
 
- .container {
-     width: 90%;
-     max-width: 700px;
-     margin: auto;
-     background-color: #fff;
-     padding: 40px;
-     border-radius: 12px;
-     box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
- }
+a {
+    text-decoration: none !important;
+}
 
- h2 {
-     text-align: center;
-     margin-bottom: 30px;
-     font-size: 28px;
-     color: #2c3e50;
- }
+/* ================= NAVBAR ================= */
+.navbar {
+    width: 100%;
+    height: 60px;
+    background-color: #007bff;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 20px;
+    position: fixed;
+    top: 0;
+    left: 0;
+    color: white;
+    z-index: 1000;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+    gap: 10px;
+}
 
- form {
+.nav-left {
+    display: flex;
+    align-items: center;
+    gap: 15px;
+}
+
+.nav-logo {
+    height: 80px;
+    filter: brightness(0) invert(1);
+}
+
+.toggle-btn {
+    font-size: 26px;
+    cursor: pointer;
+}
+
+/* ================= SIDEBAR ================= */
+.sidebar {
+    width: 250px;
+    background: #ffffff;
+    height: calc(100vh - 60px);
+    position: fixed;
+    top: 60px;
+    left: 0;
+    padding-top: 20px;
+    overflow-y: auto;
+    border-right: 1px solid #e0e0e0;
     display: flex;
     flex-direction: column;
- }
+    z-index: 0;
+    transition: 0.3s;
+}
 
- label {
-     margin-top: 15px;
-     margin-bottom: 6px;
-     font-weight: 600;
-     color: #333;
- }
+.sidebar.hide {
+    left: -250px;
+}
 
- input[type="number"] {
-     padding: 10px 12px;
-     border: 1px solid #ccc;
-     border-radius: 6px;
-     font-size: 16px;
- }
-
- input[type="number"]:focus {
-     border-color: #007BFF;
-     outline: none;
- }
-
- button[type="submit"] {
-     margin-top: 30px;
-     padding: 12px;
-     background-color: #007BFF;
-     border: none;
-     border-radius: 6px;
-     color: white;
-     font-size: 18px;
-     cursor: pointer;
- }
-
- button[type="submit"]:hover {
-     background-color: #0056b3;
- }
-
- /* Back button styling */
- .back-btn {
-     display: inline-block;
+.sidebar h2 {
+    color: #007bff;
+    text-align: center;
     margin-bottom: 20px;
-     padding: 10px 18px;
-     background: #6c757d;
-     color: white;
-     font-size: 15px;
-     font-weight: 600;
+    font-size: 22px;
+}
+
+.menu-btn {
+    padding: 14px 20px;
+    font-size: 17px;
+    color: #007bff;
+    cursor: pointer;
+    border-bottom: 1px solid #e0e0e0;
+    transition: 0.2s;
+}
+
+.menu-btn:hover {
+    background: #cce5ff;
+    color: #0056b3;
+}
+
+.submenu {
+    display: none;
+    background: #f0f8ff;
+}
+
+.submenu a {
+    display: block;
+    padding: 12px 35px;
+    color: #007bff;
+    border-bottom: 1px solid #e0e0e0;
+    transition: 0.2s;
+}
+
+.submenu a:hover {
+    background: #cce5ff;
+    color: #004085;
+}
+
+/* ================= LOGOUT ================= */
+.sidebar-logout {
+    margin-top: auto;
+    padding: 10px 16px;
+    background: #007bff;
+    display: flex;
+    justify-content: center;
+    align-items: center;
     border-radius: 6px;
     text-decoration: none;
-     transition: background 0.3s ease;
- }
+    color: white;
+}
 
- .back-btn:hover {
-     background: #5a6268;
- }
+.sidebar-logout:hover {
+    background: #a2cdfa;
+}
 
- @media (max-width: 600px) {
-     .container {
-         padding: 20px;
-     }
+.logout-icon {
+    width: 22px;
+    height: 22px;
+}
 
-     h2 {
-         font-size: 22px;
-     }
+/* ================= MAIN CONTENT ================= */
+.main {
+    margin-left: 260px;
+    width: calc(100% - 260px);
+    padding: 30px;
+    margin-top: 80px;
+    transition: 0.3s;
+}
 
-     input[type="number"] {
+/* ================= CONTAINER ================= */
+.container {
+    background: white;
+    padding: 30px;
+    width: 95%;
+    max-width: 700px;
+    margin: auto;
+    border-radius: 10px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+
+/* ================= FORM ================= */
+.form-group {
+    margin-bottom: 15px;
+}
+
+form label {
+    display: block;
+    margin-bottom: 6px;
+    font-weight: bold;
+}
+
+form input,
+form select {
+    padding: 10px;
+    width: 100%;
+    border: 1px solid #ccc;
+    border-radius: 6px;
+    background-color: #f8f9ff;
+    outline: none;
+    transition: border-color 0.3s ease, box-shadow 0.3s ease;
+}
+
+input:focus,
+select:focus {
+    border-color: #007bff;
+    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
+}
+
+/* ================= SUBMIT BUTTON (GREEN) ================= */
+button {
+    width: 60%;
+    margin-top: 20px;
+    margin-left: 20%;
+    padding: 12px 20px;
+    background-color: #28a745;
+    /* Bootstrap green */
+    color: #ffffff;
+    border: none;
+    cursor: pointer;
+    border-radius: 6px;
+    font-weight: 600;
     font-size: 15px;
-     }
+    transition: background-color 0.3s ease, box-shadow 0.3s ease;
+}
 
-     button[type="submit"] {
-         font-size: 16px;
-     }
- }
+button:hover {
+    background-color: #218838;
+    /* Darker green on hover */
+    box-shadow: 0 4px 10px rgba(40, 167, 69, 0.35);
+}
+
+button:active {
+    background-color: #1e7e34;
+}
+
+button:focus {
+    outline: none;
+    box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.35);
+}

static/css/add_itr.css

@@ -1,135 +1,155 @@
-body {
-    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
-    background: #eef2f7;
+/* ================= RESET ================= */
+* {
     margin: 0;
-    padding: 40px;
-    color: #333;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: "Segoe UI", sans-serif;
 }
 
+body {
+    background-color: #f0f4ff;
+    /* very light blue background */
+}
+
+/* ================= CONTAINER ================= */
 .container {
-    max-width: 900px;
-    margin: auto;
-    background: #fff;
-    padding: 40px 50px;
-    border-radius: 12px;
-    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.1);
-    transition: box-shadow 0.3s ease;
+    max-width: 90%;
+    margin: 20px 20px 20px 20px;
+    /* top margin to clear navbar */
+    background: white;
+    padding: 10%;
+    border-radius: 8px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
 }
 
-.container:hover {
-    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.15);
-}
-
-h2 {
+.no-record {
     text-align: center;
-    margin-bottom: 35px;
-    font-size: 30px;
-    color: #2c3e50;
-    font-weight: 700;
-    letter-spacing: 0.5px;
+    font-size: 18px;
+    margin-top: 20px;
+    color: #555;
+    padding: 15px;
+    background: #f9f9f9;
+    border-radius: 8px;
+    border: 1px solid #e0e0e0;
 }
 
-form {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 20px 30px;
+
+/* ================= FORM ================= */
+form label {
+    display: block;
+    margin-top: 10px;
+    font-weight: bold;
+    color: #000000;
+    /* dark blue text */
 }
 
+form input,
+form select {
+    width: 100%;
+    padding: 10px;
+    margin-top: 6px;
+    border: 1px solid #ccc;
+    border-radius: 6px;
+    outline: none;
+}
+
+form input:focus,
+form select:focus {
+    border-color: #0056b3;
+    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
+}
+
+.auto {
+    padding: 10px 12px;
+    border: 1px solid #ccd1d9;
+    border-radius: 6px;
+    font-size: 15px;
+    background-color: #d5edd7;
+    transition: all 0.25s ease-in-out;
+}
+
+/* ================= SUBMIT BUTTON (GREEN) ================= */
+button {
+    width: 60%;
+    margin-top: 20px;
+    margin-left: 20%;
+    padding: 12px 20px;
+    background-color: #28a745;
+    /* Bootstrap green */
+    color: #ffffff;
+    border: none;
+    cursor: pointer;
+    border-radius: 6px;
+    font-weight: 600;
+    font-size: 15px;
+    transition: background-color 0.3s ease, box-shadow 0.3s ease;
+}
+
+button:hover {
+    background-color: #218838;
+    /* Darker green on hover */
+    box-shadow: 0 4px 10px rgba(40, 167, 69, 0.35);
+}
+
+button:active {
+    background-color: #1e7e34;
+}
+
+button:focus {
+    outline: none;
+    box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.35);
+}
+
+/* ================= TABLE (if used in this page) ================= */
+.table-wrapper {
+    overflow-x: auto;
+}
+
+table {
+    width: 100%;
+    border-collapse: collapse;
+    margin-top: 20px;
+}
+
+th,
+td {
+    padding: 12px;
+    border: 1px solid #dee2e6;
+    text-align: right;
+    white-space: nowrap;
+}
+
+th {
+    background-color: #007bff;
+    color: white;
+    text-align: center;
+}
+
+tr:nth-child(even) {
+    background-color: #f0f8ff;
+}
+
+td:first-child,
+th:first-child {
+    text-align: left;
+}
+
+/* Full width rows (span 2 columns) */
 .form-group {
     display: flex;
     flex-direction: column;
 }
 
-label {
-    font-weight: 600;
-    margin-bottom: 8px;
-    color: #555;
-    font-size: 14px;
-    font-weight: bold;
-}
-
-input[type="number"] {
-    padding: 10px 12px;
-    border: 1px solid #ccd1d9;
-    border-radius: 6px;
-    font-size: 15px;
-    background-color: #fafafa;
-    transition: all 0.25s ease-in-out;
-}
-
-input[type="number"]:focus {
-    border-color: #007BFF;
-    background: #fff;
-    box-shadow: 0 0 8px rgba(0, 123, 255, 0.25);
-    outline: none;
-}
-
-button[type="submit"] {
+.form-group.full-width {
     grid-column: span 2;
-    margin-top: 25px;
-    padding: 15px;
-    background: linear-gradient(135deg, #007BFF, #0056b3);
-    border: none;
-    border-radius: 8px;
-    color: #fff;
-    font-size: 18px;
-    font-weight: 600;
-    cursor: pointer;
-    transition: transform 0.2s, background 0.3s;
 }
 
-button[type="submit"]:hover {
-    background: linear-gradient(135deg, #0056b3, #00408f);
-    transform: translateY(-2px);
+/* Special case: two inputs inside one form-group */
+.form-group.inline-2 {
+    flex-direction: row;
+    gap: 15px;
 }
 
-/* Back button styling */
-.back-btn {
-    display: inline-block;
-    margin-bottom: 20px;
-    padding: 10px 18px;
-    background: #6c757d;
-    color: white;
-    font-size: 15px;
-    font-weight: 600;
-    border-radius: 6px;
-    text-decoration: none;
-    transition: background 0.3s ease;
-}
-
-.back-btn:hover {
-    background: #5a6268;
-}
-
-
-/* Style for Year Dropdown */
-select {
-    padding: 10px 5px;
-    border: 1px solid #ccd1d9;
-    border-radius: 6px;
-    font-size: 15px;
-    background-color: #fafafa;
-    transition: all 0.25s ease-in-out;
-    cursor: pointer;
-    height: 40px;
-}
-
-select:focus {
-    border-color: #007BFF;
-    background: #fff;
-    box-shadow: 0 0 8px rgba(0, 123, 255, 0.25);
-    outline: none;
-}
-
-
-
-/* Responsive */
-@media (max-width: 768px) {
-    form {
-        grid-template-columns: 1fr;
-    }
-
-    h2 {
-        font-size: 24px;
-    }
+.form-group.inline-2>div {
+    flex: 1;
 }

static/css/ao_report.css

@@ -0,0 +1,207 @@
+/* ================= GLOBAL ================= */
+body {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  background-color: #f4f7f9;
+  margin: 0;
+  padding: 0;
+  display: flex;
+}
+
+a {
+  text-decoration: none !important;
+  color: #007bff;
+}
+
+/* ================= NAVBAR ================= */
+.navbar {
+  width: 100%;
+  height: 60px;
+  background-color: #007bff;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 20px;
+  position: fixed;
+  top: 0;
+  left: 0;
+  color: white;
+  z-index: 1000;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+}
+
+.nav-left {
+  display: flex;
+  align-items: center;
+  gap: 15px;
+}
+
+.nav-logo {
+  height: 80px;
+  filter: brightness(0) invert(1);
+}
+
+.toggle-btn {
+  font-size: 26px;
+  cursor: pointer;
+}
+
+/* ================= SIDEBAR ================= */
+.sidebar {
+  width: 250px;
+  background: white;
+  height: calc(100vh - 60px);
+  position: fixed;
+  top: 60px;
+  left: 0;
+  padding-top: 20px;
+  overflow-y: auto;
+  border-right: 1px solid #d6d6d6;
+  display: flex;
+  flex-direction: column;
+}
+
+.sidebar.hide {
+  left: -250px;
+}
+
+.menu-items {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  padding-bottom: 20px;
+}
+
+.menu-btn {
+  padding: 14px 20px;
+  font-size: 17px;
+  color: #007bff;
+  cursor: pointer;
+  border-bottom: 1px solid #e5e5e5;
+  transition: 0.2s;
+  font-weight: 600;
+}
+
+.menu-btn:hover {
+  background: #e9f3ff;
+}
+
+.submenu {
+  display: none;
+  background: #f4faff;
+}
+
+.submenu a {
+  display: block;
+  padding: 12px 35px;
+  color: #0056b3;
+  border-bottom: 1px solid #e2eaff;
+  transition: 0.2s;
+}
+
+.submenu a:hover {
+  background: #e9f3ff;
+}
+
+.sidebar-logout {
+  margin-top: auto;
+  padding: 10px 16px;
+  background: #007bff;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 6px;
+  color: white;
+  cursor: pointer;
+  transition: 0.2s;
+}
+
+.sidebar-logout:hover {
+  background: #006ae6;
+}
+
+.logout-icon {
+  width: 22px;
+  height: 22px;
+}
+
+/* ================= MAIN ================= */
+.main {
+  margin-left: 260px;
+  margin-top: 80px;
+  padding: 30px;
+  width: calc(100% - 260px);
+}
+
+.container {
+  max-width: 600px;
+  margin: auto;
+  background: #fff;
+  padding: 35px 40px;
+  border-radius: 10px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  text-align: center;
+}
+
+h2 {
+  color: #2c3e50;
+  margin-bottom: 25px;
+  font-weight: 600;
+}
+
+/* ================= FORM ELEMENTS ================= */
+label {
+  font-weight: 600;
+  display: block;
+  margin-top: 10px;
+  color: #333;
+}
+
+select {
+  padding: 10px 14px;
+  border: 1px solid #ccc;
+  border-radius: 6px;
+  width: 100%;
+  max-width: 250px;
+  margin-top: 8px;
+  font-size: 16px;
+  color: #333;
+  cursor: pointer;
+  transition: 0.2s;
+}
+
+select:focus {
+  border-color: #007bff;
+  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.2);
+  outline: none;
+}
+
+/* ================= BUTTONS ================= */
+button {
+  margin-top: 25px;
+  padding: 12px 25px;
+  background-color: #007bff;
+  color: white;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 16px;
+  font-weight: 600;
+  transition: 0.2s;
+}
+
+button:hover {
+  background-color: #0069d9;
+}
+
+/* Optional: responsive adjustments */
+@media (max-width: 768px) {
+  .main {
+    margin-left: 0;
+    width: 100%;
+    padding: 20px;
+  }
+
+  select {
+    max-width: 100%;
+  }
+}

static/css/cit_report.css

@@ -0,0 +1,207 @@
+/* ================= GLOBAL ================= */
+body {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  background-color: #f4f7f9;
+  margin: 0;
+  padding: 0;
+  display: flex;
+}
+
+a {
+  text-decoration: none !important;
+  color: #007bff;
+}
+
+/* ================= NAVBAR ================= */
+.navbar {
+  width: 100%;
+  height: 60px;
+  background-color: #007bff;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 20px;
+  position: fixed;
+  top: 0;
+  left: 0;
+  color: white;
+  z-index: 1000;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+}
+
+.nav-left {
+  display: flex;
+  align-items: center;
+  gap: 15px;
+}
+
+.nav-logo {
+  height: 80px;
+  filter: brightness(0) invert(1);
+}
+
+.toggle-btn {
+  font-size: 26px;
+  cursor: pointer;
+}
+
+/* ================= SIDEBAR ================= */
+.sidebar {
+  width: 250px;
+  background: white;
+  height: calc(100vh - 60px);
+  position: fixed;
+  top: 60px;
+  left: 0;
+  padding-top: 20px;
+  overflow-y: auto;
+  border-right: 1px solid #d6d6d6;
+  display: flex;
+  flex-direction: column;
+}
+
+.sidebar.hide {
+  left: -250px;
+}
+
+.menu-items {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  padding-bottom: 20px;
+}
+
+.menu-btn {
+  padding: 14px 20px;
+  font-size: 17px;
+  color: #007bff;
+  cursor: pointer;
+  border-bottom: 1px solid #e5e5e5;
+  transition: 0.2s;
+  font-weight: 600;
+}
+
+.menu-btn:hover {
+  background: #e9f3ff;
+}
+
+.submenu {
+  display: none;
+  background: #f4faff;
+}
+
+.submenu a {
+  display: block;
+  padding: 12px 35px;
+  color: #0056b3;
+  border-bottom: 1px solid #e2eaff;
+  transition: 0.2s;
+}
+
+.submenu a:hover {
+  background: #e9f3ff;
+}
+
+.sidebar-logout {
+  margin-top: auto;
+  padding: 10px 16px;
+  background: #007bff;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 6px;
+  color: white;
+  cursor: pointer;
+  transition: 0.2s;
+}
+
+.sidebar-logout:hover {
+  background: #006ae6;
+}
+
+.logout-icon {
+  width: 22px;
+  height: 22px;
+}
+
+/* ================= MAIN ================= */
+.main {
+  margin-left: 260px;
+  margin-top: 80px;
+  padding: 30px;
+  width: calc(100% - 260px);
+}
+
+.container {
+  max-width: 600px;
+  margin: auto;
+  background: #fff;
+  padding: 35px 40px;
+  border-radius: 10px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  text-align: center;
+}
+
+h2 {
+  color: #2c3e50;
+  margin-bottom: 25px;
+  font-weight: 600;
+}
+
+/* ================= FORM ELEMENTS ================= */
+label {
+  font-weight: 600;
+  display: block;
+  margin-top: 10px;
+  color: #333;
+}
+
+select {
+  padding: 10px 14px;
+  border: 1px solid #ccc;
+  border-radius: 6px;
+  width: 100%;
+  max-width: 250px;
+  margin-top: 8px;
+  font-size: 16px;
+  color: #333;
+  cursor: pointer;
+  transition: 0.2s;
+}
+
+select:focus {
+  border-color: #007bff;
+  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.2);
+  outline: none;
+}
+
+/* ================= BUTTONS ================= */
+button {
+  margin-top: 25px;
+  padding: 12px 25px;
+  background-color: #007bff;
+  color: white;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 16px;
+  font-weight: 600;
+  transition: 0.2s;
+}
+
+button:hover {
+  background-color: #0069d9;
+}
+
+/* Optional: responsive adjustments */
+@media (max-width: 768px) {
+  .main {
+    margin-left: 0;
+    width: 100%;
+    padding: 20px;
+  }
+
+  select {
+    max-width: 100%;
+  }
+}

static/css/display_ao.css

@@ -0,0 +1,255 @@
+  /* ================= RESET ================= */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: "Segoe UI", sans-serif;
+}
+
+body {
+    background-color: #f4f7f6;
+    display: flex;
+}
+
+/* ================= NAVBAR ================= */
+.navbar {
+    width: 100%;
+    height: 60px;
+    background-color: #007bff; /* primary blue */
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 20px;
+    position: fixed;
+    top: 0;
+    left: 0;
+    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 {
+    display: flex;
+    align-items: center;
+    gap: 15px;
+}
+
+/* ================= SIDEBAR ================= */
+.sidebar {
+    width: 250px;
+    background: #ffffff;
+    height: calc(100vh - 60px);
+    position: fixed;
+    top: 60px;
+    left: 0;
+    padding-top: 20px;
+    overflow-y: auto;
+    border-right: 1px solid #e0e0e0;
+    display: flex;
+    flex-direction: column;
+    z-index: 0;
+    transition: 0.3s;
+}
+
+.sidebar.hide {
+    left: -250px;
+}
+
+.sidebar h2 {
+    color: #007bff;
+    text-align: center;
+    margin-bottom: 20px;
+    font-size: 22px;
+}
+
+/* ================= MENU BUTTONS ================= */
+.menu-btn {
+    padding: 14px 20px;
+    font-size: 17px;
+    color: #007bff;
+    cursor: pointer;
+    border-bottom: 1px solid #e0e0e0;
+    transition: 0.2s;
+}
+
+.menu-btn:hover {
+    background: #cce5ff;
+    color: #0056b3;
+}
+
+.submenu {
+    display: none;
+    background: #f0f8ff;
+}
+
+.submenu a {
+    display: block;
+    padding: 12px 35px;
+    color: #007bff;
+    text-decoration: none;
+    border-bottom: 1px solid #e0e0e0;
+    transition: 0.2s;
+}
+
+.submenu a:hover {
+    background: #cce5ff;
+    color: #004085;
+}
+.no-record {
+    text-align: center;
+    font-size: 18px;
+    margin-top: 20px;
+    color: #555;
+    padding: 15px;
+    background: #f9f9f9;
+    border-radius: 8px;
+    border: 1px solid #e0e0e0;
+}
+
+
+/* ================= LOGOUT ================= */
+.sidebar-logout {
+    margin-top: auto;
+    padding: 10px 16px;
+    background: #007bff;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 6px;
+    text-decoration: none;
+    color: white;
+}
+
+.sidebar-logout:hover {
+    background: #a2cdfa;
+}
+
+.logout-icon {
+    width: 22px;
+    height: 22px;
+}
+
+/* ================= MAIN CONTENT ================= */
+.main {
+    margin-left: 260px;
+    padding: 30px;
+    width: calc(100% - 260px);
+    margin-top: 80px;
+    position: relative;
+    z-index: 1;
+    transition: 0.3s;
+}
+
+a {
+    text-decoration: none;
+}
+
+/* ================= CONTAINER ================= */
+.container {
+    max-width: 95%;
+    margin: auto;
+    background: white;
+    padding: 30px;
+    border-radius: 8px;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+    position: relative;
+    z-index: 2;
+}
+
+/* ================= BUTTONS ================= */
+.btn {
+    padding: 8px 15px;
+    border-radius: 5px;
+    text-decoration: none;
+    color: white;
+    border: none;
+    cursor: pointer;
+    font-size: 14px;
+
+}
+
+.btn-add {
+    background-color: #28a745;
+    display: inline-block;
+    margin-bottom: 20px;
+    position: absolute;      /* Pins button to the right side */
+    right: 0;
+
+}
+
+.btn-update {
+    background-color: #007bff;
+}
+
+.btn-delete {
+    background-color: #dc3545;
+}
+
+/* ================= TABLE ================= */
+.table-wrapper {
+    overflow-x: auto;
+}
+
+table {
+    width: 100%;
+    border-collapse: collapse;
+    margin-top: 20px;
+}
+
+th,
+td {
+    padding: 12px;
+    border: 1px solid #dee2e6;
+    text-align: right;
+    white-space: nowrap;
+}
+
+th {
+    background-color: #007bff;
+    color: white;
+    text-align: center;
+}
+
+tr:nth-child(even) {
+    background-color: #f0f8ff;
+}
+
+td:first-child,
+th:first-child {
+    text-align: left;
+}
+
+.action-cell form {
+    display: inline-block;
+    margin-left: 5px;
+}
+
+/* ================= BACK BUTTON ================= */
+.back-btn {
+    display: inline-block;
+    margin-bottom: 20px;
+    padding: 10px 18px;
+    background: #007bff;
+    color: white;
+    font-size: 15px;
+    font-weight: 600;
+    border-radius: 6px;
+    text-decoration: none;
+    transition: background 0.3s ease;
+}
+
+.back-btn:hover {
+    background: #0056b3;
+}

static/css/display_cit.css

@@ -0,0 +1,251 @@
+  /* ================= RESET ================= */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: "Segoe UI", sans-serif;
+}
+
+body {
+    background-color: #f4f7f6;
+    display: flex;
+}
+
+/* ================= NAVBAR ================= */
+.navbar {
+    width: 100%;
+    height: 60px;
+    background-color: #007bff; /* primary blue */
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 20px;
+    position: fixed;
+    top: 0;
+    left: 0;
+    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 {
+    display: flex;
+    align-items: center;
+    gap: 15px;
+}
+
+/* ================= SIDEBAR ================= */
+.sidebar {
+    width: 250px;
+    background: #ffffff;
+    height: calc(100vh - 60px);
+    position: fixed;
+    top: 60px;
+    left: 0;
+    padding-top: 20px;
+    overflow-y: auto;
+    border-right: 1px solid #e0e0e0;
+    display: flex;
+    flex-direction: column;
+    z-index: 0;
+    transition: 0.3s;
+}
+
+.sidebar.hide {
+    left: -250px;
+}
+
+.sidebar h2 {
+    color: #007bff;
+    text-align: center;
+    margin-bottom: 20px;
+    font-size: 22px;
+}
+
+/* ================= MENU BUTTONS ================= */
+.menu-btn {
+    padding: 14px 20px;
+    font-size: 17px;
+    color: #007bff;
+    cursor: pointer;
+    border-bottom: 1px solid #e0e0e0;
+    transition: 0.2s;
+}
+
+.menu-btn:hover {
+    background: #cce5ff;
+    color: #0056b3;
+}
+
+.submenu {
+    display: none;
+    background: #f0f8ff;
+}
+
+.submenu a {
+    display: block;
+    padding: 12px 35px;
+    color: #007bff;
+    text-decoration: none;
+    border-bottom: 1px solid #e0e0e0;
+    transition: 0.2s;
+}
+
+.submenu a:hover {
+    background: #cce5ff;
+    color: #004085;
+}
+.no-record {
+    text-align: center;
+    font-size: 18px;
+    margin-top: 20px;
+    color: #555;
+    padding: 15px;
+    background: #f9f9f9;
+    border-radius: 8px;
+    border: 1px solid #e0e0e0;
+}
+
+
+/* ================= LOGOUT ================= */
+.sidebar-logout {
+    margin-top: auto;
+    padding: 10px 16px;
+    background: #007bff;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 6px;
+    text-decoration: none;
+    color: white;
+}
+
+.sidebar-logout:hover {
+    background: #a2cdfa;
+}
+
+.logout-icon {
+    width: 22px;
+    height: 22px;
+}
+
+/* ================= MAIN CONTENT ================= */
+.main {
+    margin-left: 20px;
+    padding: 8px;
+    width: calc(100% - 50px);
+    margin-top: 50px;
+    position: relative;
+    z-index: 5;
+    transition: 0.3s;
+}
+
+a {
+    text-decoration: none;
+}
+
+/* ================= CONTAINER ================= */
+.container {
+    max-width: 95%;
+    margin: auto;
+    background: white;
+    padding: 8px;
+    border-radius: 8px;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+    position: relative;
+    z-index: 2;
+}
+
+/* ================= BUTTONS ================= */
+.btn {
+    padding: 8px 15px;
+    border-radius: 5px;
+    text-decoration: none;
+    color: white;
+    border: none;
+    cursor: pointer;
+    font-size: 14px;
+}
+
+.btn-add {
+    background-color: #28a745;
+    display: inline-block;
+    margin-bottom: 20px;
+}
+
+.btn-update {
+    background-color: #007bff;
+}
+
+.btn-delete {
+    background-color: #dc3545;
+}
+
+/* ================= TABLE ================= */
+.table-wrapper {
+    overflow-x: auto;
+}
+
+table {
+    width: 100%;
+    border-collapse: collapse;
+    margin-top: 20px;
+}
+
+th,
+td {
+    padding: 12px;
+    border: 1px solid #dee2e6;
+    text-align: right;
+    white-space: nowrap;
+}
+
+th {
+    background-color: #007bff;
+    color: white;
+    text-align: center;
+}
+
+tr:nth-child(even) {
+    background-color: #f0f8ff;
+}
+
+td:first-child,
+th:first-child {
+    text-align: left;
+}
+
+.action-cell form {
+    display: inline-block;
+    margin-left: 5px;
+}
+
+/* ================= BACK BUTTON ================= */
+.back-btn {
+    display: inline-block;
+    margin-bottom: 20px;
+    padding: 10px 18px;
+    background: #007bff;
+    color: white;
+    font-size: 15px;
+    font-weight: 600;
+    border-radius: 6px;
+    text-decoration: none;
+    transition: background 0.3s ease;
+}
+
+.back-btn:hover {
+    background: #0056b3;
+}

static/css/display_itat.css

@@ -0,0 +1,254 @@
+  /* ================= RESET ================= */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: "Segoe UI", sans-serif;
+}
+
+body {
+    background-color: #f4f7f6;
+    display: flex;
+}
+
+/* ================= NAVBAR ================= */
+.navbar {
+    width: 100%;
+    height: 60px;
+    background-color: #007bff; /* primary blue */
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 20px;
+    position: fixed;
+    top: 0;
+    left: 0;
+    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 {
+    display: flex;
+    align-items: center;
+    gap: 15px;
+}
+
+/* ================= SIDEBAR ================= */
+.sidebar {
+    width: 250px;
+    background: #ffffff;
+    height: calc(100vh - 60px);
+    position: fixed;
+    top: 60px;
+    left: 0;
+    padding-top: 20px;
+    overflow-y: auto;
+    border-right: 1px solid #e0e0e0;
+    display: flex;
+    flex-direction: column;
+    z-index: 0;
+    transition: 0.3s;
+}
+
+.sidebar.hide {
+    left: -250px;
+}
+
+.sidebar h2 {
+    color: #007bff;
+    text-align: center;
+    margin-bottom: 20px;
+    font-size: 22px;
+}
+
+/* ================= MENU BUTTONS ================= */
+.menu-btn {
+    padding: 14px 20px;
+    font-size: 17px;
+    color: #007bff;
+    cursor: pointer;
+    border-bottom: 1px solid #e0e0e0;
+    transition: 0.2s;
+
+}
+
+.menu-btn:hover {
+    background: #cce5ff;
+    color: #0056b3;
+}
+
+.submenu {
+    display: none;
+    background: #f0f8ff;
+}
+
+.submenu a {
+    display: block;
+    padding: 12px 35px;
+    color: #007bff;
+    text-decoration: none;
+    border-bottom: 1px solid #e0e0e0;
+    transition: 0.2s;
+}
+
+.submenu a:hover {
+    background: #cce5ff;
+    color: #004085;
+}
+.no-record {
+    text-align: center;
+    font-size: 18px;
+    margin-top: 20px;
+    color: #555;
+    padding: 15px;
+    background: #f9f9f9;
+    border-radius: 8px;
+    border: 1px solid #e0e0e0;
+}
+
+
+/* ================= LOGOUT ================= */
+.sidebar-logout {
+    margin-top: auto;
+    padding: 10px 16px;
+    background: #007bff;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 6px;
+    text-decoration: none;
+    color: white;
+}
+
+.sidebar-logout:hover {
+    background: #a2cdfa;
+}
+
+.logout-icon {
+    width: 22px;
+    height: 22px;
+}
+
+/* ================= MAIN CONTENT ================= */
+.main {
+    margin-left: 20px;
+    padding: 8px;
+    width: calc(100% - 50px);
+    margin-top: 50px;
+    position: relative;
+    z-index: 5;
+    transition: 0.3s;
+}
+
+a {
+    text-decoration: none;
+}
+
+/* ================= CONTAINER ================= */
+.container {
+    max-width: 95%;
+    margin: auto;
+    background: white ;
+    padding: 30px;
+    border-radius: 8px;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+    position: relative;
+    z-index: 2;
+
+
+}
+
+/* ================= BUTTONS ================= */
+.btn {
+    padding: 8px 15px;
+    border-radius: 5px;
+    text-decoration: none;
+    color: white;
+    border: none;
+    cursor: pointer;
+    font-size: 14px;
+}
+
+.btn-add {
+    background-color: #28a745;
+    display: inline-block;
+    margin-bottom: 20px;
+}
+
+.btn-update {
+    background-color: #007bff;
+}
+
+.btn-delete {
+    background-color: #dc3545;
+}
+
+/* ================= TABLE ================= */
+.table-wrapper {
+    overflow-x: auto;
+}
+
+table {
+    width: 100%;
+    border-collapse: collapse;
+    margin-top: 20px;
+}
+
+th,
+td {
+    padding: 12px;
+    border: 1px solid #dee2e6;
+    text-align: right;
+    white-space: nowrap;
+}
+
+th {
+    background-color: #007bff;
+    color: white;
+    text-align: center;
+}
+
+tr:nth-child(even) {
+    background-color: #f0f8ff;
+}
+
+td:first-child,
+th:first-child {
+    text-align: left;
+}
+
+.action-cell form {
+    display: inline-block;
+    margin-left: 5px;
+}
+
+/* ================= BACK BUTTON ================= */
+.back-btn {
+    display: inline-block;
+    margin-bottom: 20px;
+    padding: 10px 18px;
+    background: #007bff;
+    color: white;
+    font-size: 15px;
+    font-weight: 600;
+    border-radius: 6px;
+    text-decoration: none;
+    transition: background 0.3s ease;
+}
+
+.back-btn:hover {
+    background: #0056b3;
+}

static/css/display_itr.css

@@ -0,0 +1,251 @@
+  /* ================= RESET ================= */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: "Segoe UI", sans-serif;
+}
+
+body {
+    background-color: #f4f7f6;
+    display: flex;
+}
+
+/* ================= NAVBAR ================= */
+.navbar {
+    width: 100%;
+    height: 60px;
+    background-color: #007bff; /* primary blue */
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 20px;
+    position: fixed;
+    top: 0;
+    left: 0;
+    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 {
+    display: flex;
+    align-items: center;
+    gap: 15px;
+}
+
+/* ================= SIDEBAR ================= */
+.sidebar {
+    width: 250px;
+    background: #ffffff;
+    height: calc(100vh - 60px);
+    position: fixed;
+    top: 60px;
+    left: 0;
+    padding-top: 20px;
+    overflow-y: auto;
+    border-right: 1px solid #e0e0e0;
+    display: flex;
+    flex-direction: column;
+    z-index: 0;
+    transition: 0.3s;
+}
+
+.sidebar.hide {
+    left: -250px;
+}
+
+.sidebar h2 {
+    color: #007bff;
+    text-align: center;
+    margin-bottom: 20px;
+    font-size: 22px;
+}
+
+/* ================= MENU BUTTONS ================= */
+.menu-btn {
+    padding: 14px 20px;
+    font-size: 17px;
+    color: #007bff;
+    cursor: pointer;
+    border-bottom: 1px solid #e0e0e0;
+    transition: 0.2s;
+}
+
+.menu-btn:hover {
+    background: #cce5ff;
+    color: #0056b3;
+}
+
+.submenu {
+    display: none;
+    background: #f0f8ff;
+}
+
+.submenu a {
+    display: block;
+    padding: 12px 35px;
+    color: #007bff;
+    text-decoration: none;
+    border-bottom: 1px solid #e0e0e0;
+    transition: 0.2s;
+}
+
+.submenu a:hover {
+    background: #cce5ff;
+    color: #004085;
+}
+.no-record {
+    text-align: center;
+    font-size: 18px;
+    margin-top: 20px;
+    color: #555;
+    padding: 15px;
+    background: #f9f9f9;
+    border-radius: 8px;
+    border: 1px solid #e0e0e0;
+}
+
+
+/* ================= LOGOUT ================= */
+.sidebar-logout {
+    margin-top: auto;
+    padding: 10px 16px;
+    background: #007bff;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 6px;
+    text-decoration: none;
+    color: white;
+}
+
+.sidebar-logout:hover {
+    background: #a2cdfa;
+}
+
+.logout-icon {
+    width: 22px;
+    height: 22px;
+}
+
+/* ================= MAIN CONTENT ================= */
+.main {
+    margin-left: 260px;
+    padding: 30px;
+    width: calc(100% - 260px);
+    margin-top: 80px;
+    position: relative;
+    z-index: 1;
+    transition: 0.3s;
+}
+
+a {
+    text-decoration: none;
+}
+
+/* ================= CONTAINER ================= */
+.container {
+    max-width: 95%;
+    margin: auto;
+    background: white;
+    padding: 30px;
+    border-radius: 8px;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+    position: relative;
+    z-index: 2;
+}
+
+/* ================= BUTTONS ================= */
+.btn {
+    padding: 8px 15px;
+    border-radius: 5px;
+    text-decoration: none;
+    color: white;
+    border: none;
+    cursor: pointer;
+    font-size: 14px;
+}
+
+.btn-add {
+    background-color: #28a745;
+    display: inline-block;
+    margin-bottom: 20px;
+}
+
+.btn-update {
+    background-color: #007bff;
+}
+
+.btn-delete {
+    background-color: #dc3545;
+}
+
+/* ================= TABLE ================= */
+.table-wrapper {
+    overflow-x: auto;
+}
+
+table {
+    width: 100%;
+    border-collapse: collapse;
+    margin-top: 20px;
+}
+
+th,
+td {
+    padding: 12px;
+    border: 1px solid #dee2e6;
+    text-align: right;
+    white-space: nowrap;
+}
+
+th {
+    background-color: #007bff;
+    color: white;
+    text-align: center;
+}
+
+tr:nth-child(even) {
+    background-color: #f0f8ff;
+}
+
+td:first-child,
+th:first-child {
+    text-align: left;
+}
+
+.action-cell form {
+    display: inline-block;
+    margin-left: 5px;
+}
+
+/* ================= BACK BUTTON ================= */
+.back-btn {
+    display: inline-block;
+    margin-bottom: 20px;
+    padding: 10px 18px;
+    background: #007bff;
+    color: white;
+    font-size: 15px;
+    font-weight: 600;
+    border-radius: 6px;
+    text-decoration: none;
+    transition: background 0.3s ease;
+}
+
+.back-btn:hover {
+    background: #0056b3;
+}

static/css/documents.css

@@ -0,0 +1,147 @@
+/* ================= GLOBAL ================= */
+body {
+  background-color: #f4f6f9;
+  font-family: "Segoe UI", Arial, sans-serif;
+}
+
+/* ================= MAIN CONTENT FIX ================= */
+/* base.html usually gives sidebar width ~250px */
+.main {
+  margin-left: 260px;
+  padding: 40px 30px;
+}
+
+/* ================= CARD / CONTAINER ================= */
+.container {
+  max-width: 1100px;
+  margin: 0 auto;
+  background: #ffffff;
+  padding: 35px 40px;
+  border-radius: 12px;
+  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.08);
+}
+
+/* ================= HEADING ================= */
+.container h2 {
+  text-align: center;
+  color: #0d6efd;
+  font-size: 26px;
+  margin-bottom: 30px;
+}
+
+/* ================= FILTER FORM ================= */
+form {
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  gap: 18px;
+  flex-wrap: wrap;
+  margin-bottom: 30px;
+}
+
+form label {
+  font-size: 14px;
+  font-weight: 500;
+}
+
+form select {
+  width: 220px;
+  padding: 10px;
+  border-radius: 6px;
+  border: 1px solid #ced4da;
+  font-size: 14px;
+}
+
+/* APPLY BUTTON (GREEN) */
+form button {
+  background-color: #28a745;
+  color: #ffffff;
+  border: none;
+  padding: 11px 28px;
+  border-radius: 6px;
+  font-size: 15px;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+form button:hover {
+  background-color: #218838;
+}
+
+/* ================= TABLE ================= */
+table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 14px;
+}
+
+thead {
+  background-color: #0d6efd;
+  color: #ffffff;
+}
+
+thead th {
+  padding: 14px 12px;
+  text-align: center;
+  font-weight: 600;
+}
+
+tbody td {
+  padding: 12px;
+  text-align: center;
+  border-bottom: 1px solid #e3e6ea;
+}
+
+tbody tr:nth-child(even) {
+  background-color: #f8f9fa;
+}
+
+tbody tr:hover {
+  background-color: #eef4ff;
+}
+
+/* ================= ACTION LINKS ================= */
+table a {
+  text-decoration: none;
+  color: #ffffff;
+  padding: 7px 16px;
+  border-radius: 6px;
+  font-size: 13px;
+  display: inline-block;
+}
+
+/* Download button */
+table a[href*="download"] {
+  background-color: #17a2b8;
+}
+
+table a[href*="download"]:hover {
+  background-color: #138496;
+}
+
+/* View button */
+table a[href*="view"] {
+  background-color: #20c997;
+}
+
+table a[href*="view"]:hover {
+  background-color: #17a589;
+}
+
+/* ================= RESPONSIVE ================= */
+@media (max-width: 992px) {
+  .main {
+    margin-left: 0;
+    padding: 20px;
+  }
+
+  form {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  form select,
+  form button {
+    width: 100%;
+  }
+}

static/css/index.css

@@ -0,0 +1,165 @@
+/* RESET */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: "Segoe UI", sans-serif;
+}
+
+body {
+    background-color: #f4f7f6;
+    display: flex;
+}
+
+/* NAVBAR */
+.navbar {
+    width: 100%;
+    height: 60px;
+    background-color: #007bff;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 20px;
+    position: fixed;
+    top: 0;
+    left: 0;
+    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 {
+    display: flex;
+    align-items: center;
+    gap: 15px;
+}
+
+/* SIDEBAR */
+.sidebar {
+    width: 250px;
+    background: #ffffff;
+    height: calc(100vh - 60px);
+    position: fixed;
+    top: 60px;
+    left: 0;
+    padding-top: 20px;
+    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;
+    margin-bottom: 20px;
+    font-size: 22px;
+}
+
+/* Menu buttons */
+.menu-btn {
+    padding: 14px 20px;
+    font-size: 17px;
+    color: #007bff;
+    cursor: pointer;
+    border-bottom: 1px solid #f0d6c6;
+    transition: 0.2s;
+}
+
+.menu-btn:hover {
+    background: #88ccfa;
+}
+
+.submenu {
+    display: none;
+    background: #ffffff;
+}
+
+.submenu a {
+    display: block;
+    padding: 12px 35px;
+    color: #007bff;
+    text-decoration: none;
+    border-bottom: 1px solid #f3cab1;
+    transition: 0.2s;
+}
+
+.submenu a:hover {
+    background: #b3dbf7;
+    color: #007bff;
+}
+
+/* Logout */
+.sidebar-logout {
+    margin-top: auto;
+    padding: 10px 16px;
+    background: #007bff;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 6px;
+    text-decoration: none;
+}
+
+.sidebar-logout:hover {
+    background: #a8d8f8;
+}
+
+.logout-icon {
+    width: 22px;
+    height: 22px;
+}
+
+/* MAIN CONTENT */
+.main {
+    margin-left: 260px;
+    padding: 30px;
+    width: calc(100% - 260px);
+    margin-top: 80px;
+    transition: 0.3s;
+}
+
+.main.collapsed {
+    margin-left: 20px;
+    width: calc(100% - 40px);
+}
+
+/* Container */
+.container {
+    background: white;
+    padding: 40px;
+    border-radius: 12px;
+    max-width: 800px;
+    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;
+}

static/css/itat_report.css

@@ -0,0 +1,207 @@
+/* ================= GLOBAL ================= */
+body {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  background-color: #f4f7f9;
+  margin: 0;
+  padding: 0;
+  display: flex;
+}
+
+a {
+  text-decoration: none !important;
+  color: #007bff;
+}
+
+/* ================= NAVBAR ================= */
+.navbar {
+  width: 100%;
+  height: 60px;
+  background-color: #007bff;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 20px;
+  position: fixed;
+  top: 0;
+  left: 0;
+  color: white;
+  z-index: 1000;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+}
+
+.nav-left {
+  display: flex;
+  align-items: center;
+  gap: 15px;
+}
+
+.nav-logo {
+  height: 80px;
+  filter: brightness(0) invert(1);
+}
+
+.toggle-btn {
+  font-size: 26px;
+  cursor: pointer;
+}
+
+/* ================= SIDEBAR ================= */
+.sidebar {
+  width: 250px;
+  background: white;
+  height: calc(100vh - 60px);
+  position: fixed;
+  top: 60px;
+  left: 0;
+  padding-top: 20px;
+  overflow-y: auto;
+  border-right: 1px solid #d6d6d6;
+  display: flex;
+  flex-direction: column;
+}
+
+.sidebar.hide {
+  left: -250px;
+}
+
+.menu-items {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  padding-bottom: 20px;
+}
+
+.menu-btn {
+  padding: 14px 20px;
+  font-size: 17px;
+  color: #007bff;
+  cursor: pointer;
+  border-bottom: 1px solid #e5e5e5;
+  transition: 0.2s;
+  font-weight: 600;
+}
+
+.menu-btn:hover {
+  background: #e9f3ff;
+}
+
+.submenu {
+  display: none;
+  background: #f4faff;
+}
+
+.submenu a {
+  display: block;
+  padding: 12px 35px;
+  color: #0056b3;
+  border-bottom: 1px solid #e2eaff;
+  transition: 0.2s;
+}
+
+.submenu a:hover {
+  background: #e9f3ff;
+}
+
+.sidebar-logout {
+  margin-top: auto;
+  padding: 10px 16px;
+  background: #007bff;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 6px;
+  color: white;
+  cursor: pointer;
+  transition: 0.2s;
+}
+
+.sidebar-logout:hover {
+  background: #006ae6;
+}
+
+.logout-icon {
+  width: 22px;
+  height: 22px;
+}
+
+/* ================= MAIN ================= */
+.main {
+  margin-left: 260px;
+  margin-top: 80px;
+  padding: 30px;
+  width: calc(100% - 260px);
+}
+
+.container {
+  max-width: 600px;
+  margin: auto;
+  background: #fff;
+  padding: 35px 40px;
+  border-radius: 10px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  text-align: center;
+}
+
+h2 {
+  color: #2c3e50;
+  margin-bottom: 25px;
+  font-weight: 600;
+}
+
+/* ================= FORM ELEMENTS ================= */
+label {
+  font-weight: 600;
+  display: block;
+  margin-top: 10px;
+  color: #333;
+}
+
+select {
+  padding: 10px 14px;
+  border: 1px solid #ccc;
+  border-radius: 6px;
+  width: 100%;
+  max-width: 250px;
+  margin-top: 8px;
+  font-size: 16px;
+  color: #333;
+  cursor: pointer;
+  transition: 0.2s;
+}
+
+select:focus {
+  border-color: #007bff;
+  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.2);
+  outline: none;
+}
+
+/* ================= BUTTONS ================= */
+button {
+  margin-top: 25px;
+  padding: 12px 25px;
+  background-color: #007bff;
+  color: white;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 16px;
+  font-weight: 600;
+  transition: 0.2s;
+}
+
+button:hover {
+  background-color: #0069d9;
+}
+
+/* Optional: responsive adjustments */
+@media (max-width: 768px) {
+  .main {
+    margin-left: 0;
+    width: 100%;
+    padding: 20px;
+  }
+
+  select {
+    max-width: 100%;
+  }
+}

static/css/itr_report.css

@@ -0,0 +1,207 @@
+/* ================= GLOBAL ================= */
+body {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  background-color: #f4f7f9;
+  margin: 0;
+  padding: 0;
+  display: flex;
+}
+
+a {
+  text-decoration: none !important;
+  color: #007bff;
+}
+
+/* ================= NAVBAR ================= */
+.navbar {
+  width: 100%;
+  height: 60px;
+  background-color: #007bff;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 20px;
+  position: fixed;
+  top: 0;
+  left: 0;
+  color: white;
+  z-index: 1000;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+}
+
+.nav-left {
+  display: flex;
+  align-items: center;
+  gap: 15px;
+}
+
+.nav-logo {
+  height: 80px;
+  filter: brightness(0) invert(1);
+}
+
+.toggle-btn {
+  font-size: 26px;
+  cursor: pointer;
+}
+
+/* ================= SIDEBAR ================= */
+.sidebar {
+  width: 250px;
+  background: white;
+  height: calc(100vh - 60px);
+  position: fixed;
+  top: 60px;
+  left: 0;
+  padding-top: 20px;
+  overflow-y: auto;
+  border-right: 1px solid #d6d6d6;
+  display: flex;
+  flex-direction: column;
+}
+
+.sidebar.hide {
+  left: -250px;
+}
+
+.menu-items {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  padding-bottom: 20px;
+}
+
+.menu-btn {
+  padding: 14px 20px;
+  font-size: 17px;
+  color: #007bff;
+  cursor: pointer;
+  border-bottom: 1px solid #e5e5e5;
+  transition: 0.2s;
+  font-weight: 600;
+}
+
+.menu-btn:hover {
+  background: #e9f3ff;
+}
+
+.submenu {
+  display: none;
+  background: #f4faff;
+}
+
+.submenu a {
+  display: block;
+  padding: 12px 35px;
+  color: #0056b3;
+  border-bottom: 1px solid #e2eaff;
+  transition: 0.2s;
+}
+
+.submenu a:hover {
+  background: #e9f3ff;
+}
+
+.sidebar-logout {
+  margin-top: auto;
+  padding: 10px 16px;
+  background: #007bff;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 6px;
+  color: white;
+  cursor: pointer;
+  transition: 0.2s;
+}
+
+.sidebar-logout:hover {
+  background: #006ae6;
+}
+
+.logout-icon {
+  width: 22px;
+  height: 22px;
+}
+
+/* ================= MAIN ================= */
+.main {
+  margin-left: 260px;
+  margin-top: 80px;
+  padding: 30px;
+  width: calc(100% - 260px);
+}
+
+.container {
+  max-width: 600px;
+  margin: auto;
+  background: #fff;
+  padding: 35px 40px;
+  border-radius: 10px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  text-align: center;
+}
+
+h2 {
+  color: #2c3e50;
+  margin-bottom: 25px;
+  font-weight: 600;
+}
+
+/* ================= FORM ELEMENTS ================= */
+label {
+  font-weight: 600;
+  display: block;
+  margin-top: 10px;
+  color: #333;
+}
+
+select {
+  padding: 10px 14px;
+  border: 1px solid #ccc;
+  border-radius: 6px;
+  width: 100%;
+  max-width: 250px;
+  margin-top: 8px;
+  font-size: 16px;
+  color: #333;
+  cursor: pointer;
+  transition: 0.2s;
+}
+
+select:focus {
+  border-color: #007bff;
+  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.2);
+  outline: none;
+}
+
+/* ================= BUTTONS ================= */
+button {
+  margin-top: 25px;
+  padding: 12px 25px;
+  background-color: #007bff;
+  color: white;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 16px;
+  font-weight: 600;
+  transition: 0.2s;
+}
+
+button:hover {
+  background-color: #0069d9;
+}
+
+/* Optional: responsive adjustments */
+@media (max-width: 768px) {
+  .main {
+    margin-left: 0;
+    width: 100%;
+    padding: 20px;
+  }
+
+  select {
+    max-width: 100%;
+  }
+}

static/css/report.css

@@ -0,0 +1,76 @@
+/* ================= GLOBAL ================= */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: "Segoe UI", sans-serif;
+}
+
+body {
+  background: #f4f7f6;
+  display: flex;
+}
+
+a {
+  text-decoration: none !important;
+  color: #007bff;
+}
+
+/* ================= MAIN CONTENT ================= */
+.main {
+    margin-left: 20px;
+    padding: 8px;
+    width: calc(100% - 50px);
+    margin-top: 50px;
+    position: relative;
+    z-index: 5;
+    transition: 0.3s;
+}
+
+.container {
+  background: white;
+  padding: 30px;
+  width: 95%;
+  margin: auto;
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+h2 {
+  text-align: center;
+  margin-bottom: 20px;
+  color: #007bff;
+}
+
+ul {
+    list-style: none;
+    padding-left: 0;
+    margin-top: 20px;
+    text-align: center;
+}
+
+ul li {
+    margin: 14px 0;
+}
+
+ul li a {
+    color: #007bff;
+    font-size: 18px;
+    font-weight: 600;
+    transition: 0.2s;
+}
+
+ul li a:hover {
+    color: #0056b3;
+    text-decoration: underline;
+}
+
+
+/* ================= RESPONSIVE ================= */
+@media (max-width: 768px) {
+  .main {
+    margin-left: 0;
+    width: 100%;
+    padding: 20px;
+  }
+}

static/css/summary.css

@@ -0,0 +1,72 @@
+/* ================= FORM ELEMENTS ================= */
+form label {
+  display: block;
+  margin-top: 10px;
+  font-weight: bold;
+  color: #333;
+}
+
+select {
+  width: 100%;
+  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;
+}
+
+/* ================= 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;
+}
+
+button:hover {
+  background-color: #0069d9;
+}
+
+
+.main {
+    margin-left: 20px;
+    padding: 8px;
+    width: calc(100% - 50px);
+    margin-top: 50px;
+    position: relative;
+    z-index: 5;
+    transition: 0.3s;
+}
+
+/* ================= BACK BUTTON ================= */
+.back-btn {
+  display: inline-block;
+  margin-bottom: 20px;
+  padding: 10px 18px;
+  background-color: #007bff;
+  color: white;
+  font-size: 15px;
+  font-weight: 600;
+  border-radius: 6px;
+  text-decoration: none;
+  transition: 0.3s;
+}
+
+.back-btn:hover {
+  background-color: #006ae6;
+}

static/css/upload.css

@@ -0,0 +1,202 @@
+/* ================= GLOBAL ================= */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: "Segoe UI", sans-serif;
+}
+
+body {
+  background: #f4f7f6;
+  display: flex;
+}
+
+a {
+  text-decoration: none !important;
+}
+
+/* ================= NAVBAR ================= */
+.navbar {
+  width: 100%;
+  height: 60px;
+  background-color: #007bff;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 20px;
+  position: fixed;
+  top: 0;
+  left: 0;
+  color: white;
+  z-index: 1000;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+}
+
+.nav-left {
+  display: flex;
+  align-items: center;
+  gap: 15px;
+}
+
+.nav-logo {
+  height: 80px;
+  filter: brightness(0) invert(1);
+}
+
+.toggle-btn {
+  font-size: 26px;
+  cursor: pointer;
+}
+
+/* ================= SIDEBAR ================= */
+.sidebar {
+  width: 250px;
+  background: white; /* ← clean white sidebar */
+  height: calc(100vh - 60px);
+  position: fixed;
+  top: 60px;
+  left: 0;
+  padding-top: 20px;
+  overflow-y: auto;
+  border-right: 1px solid #d6d6d6;
+  display: flex;
+  flex-direction: column;
+  z-index: 0;
+}
+
+.sidebar.hide {
+  left: -250px;
+}
+
+.menu-items {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  padding-bottom: 20px;
+}
+
+.menu-btn {
+  padding: 14px 20px;
+  font-size: 17px;
+  color: #007bff; /* blue text */
+  cursor: pointer;
+  border-bottom: 1px solid #e5e5e5;
+  transition: 0.2s;
+  font-weight: 600;
+}
+
+.menu-btn:hover {
+  background: #e9f3ff; /* light blue hover */
+}
+
+.submenu {
+  display: none;
+  background: #f4faff; /* very light blue */
+}
+
+.submenu a {
+  display: block;
+  padding: 12px 35px;
+  color: #0056b3;
+  border-bottom: 1px solid #e2eaff;
+  transition: 0.2s;
+}
+
+.submenu a:hover {
+  background: #e9f3ff;
+}
+
+.sidebar-logout {
+  margin-top: auto;
+  padding: 10px 16px;
+  background: #007bff;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 6px;
+  color: white;
+}
+
+.sidebar-logout:hover {
+  background: #006ae6;
+}
+
+.logout-icon {
+  width: 22px;
+  height: 22px;
+}
+
+/* ================= MAIN CONTENT ================= */
+.main {
+    margin-left: 20px;
+    padding: 8px;
+    width: calc(100% - 50px);
+    margin-top: 50px;
+    position: relative;
+    z-index: 5;
+    transition: 0.3s;
+}
+
+/* ================= FORM CONTAINER ================= */
+.container {
+  background: white;
+  padding: 30px;
+  width: 95%;
+  margin: auto;
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+h2 {
+  text-align: center;
+  margin-bottom: 20px;
+  color: #007bff; /* blue heading */
+}
+
+form label {
+  display: block;
+  margin-top: 10px;
+  font-weight: bold;
+  color: #333;
+}
+
+form input,
+select {
+  width: 100%;
+  padding: 10px;
+  margin-top: 6px;
+  border: 1px solid #ccc;
+  border-radius: 6px;
+}
+
+/* ================= BUTTONS ================= */
+button {
+  margin-top: 20px;
+  padding: 10px 18px;
+  background-color: #007bff;
+  color: white;
+  border: none;
+  cursor: pointer;
+  border-radius: 6px;
+  font-size: 15px;
+}
+
+button:hover {
+  background-color: #0069d9;
+}
+
+.back-btn {
+  display: inline-block;
+  margin-bottom: 20px;
+  padding: 10px 18px;
+  background: #007bff;
+  color: white;
+  font-size: 15px;
+  font-weight: 600;
+  border-radius: 6px;
+  transition: 0.3s;
+}
+
+.back-btn:hover {
+  background: #006ae6;
+}

static/js/ao_calc.js

@@ -1,69 +1,81 @@
 document.addEventListener("DOMContentLoaded", function () {
 
-    function getVal(id) {
-        return parseFloat(document.getElementsByName(id)[0].value) || 0;
+    function getValue(id) {
+        var el = document.getElementsByName(id)[0];
+        return el ? parseFloat(el.value) || 0 : 0;
     }
 
-    function setVal(id, value) {
-        document.getElementsByName(id)[0].value = Number(value).toFixed(2);
+    function setValue(id, val) {
+        var el = document.getElementsByName(id)[0];
+        if (el) el.value = Number(val).toFixed(2);
     }
 
     window.calculate = function () {
 
-        // Base Values
-        let gross_total_income = getVal("gross_total_income");
-        let disallowance_14a = getVal("disallowance_14a");
-        let disallowance_37 = getVal("disallowance_37");
+        // --- BASIC INPUTS ---
+        var gross_total_income = getValue("gross_total_income");
+        var disallowance_14a = getValue("disallowance_14a");
+        var disallowance_37 = getValue("disallowance_37");
 
-        // Deductions
-        let d80_business = getVal("deduction_80ia_business");
-        let deduction_sec37 = getVal("deduction_sec37_disallowance");
-        let deduction_80g = getVal("deduction_80g");
+        // // Auto-calculations (your logic)
+        // setValue("gross_total_income", disallowance_37 + gross_total_income);
+        // setValue("disallowance_37", disallowance_14a + disallowance_37);
 
-        // Total Deduction
-        let total_deductions = d80_business + deduction_sec37;
+        var gross_total = gross_total_income + disallowance_37 + disallowance_14a
+        console.log("gross_total income:: " + gross_total)
 
-        // Net Taxable Income
-        let net_taxable_income =
-            (gross_total_income + disallowance_14a + disallowance_37)
-            - total_deductions
-            - deduction_80g;
+        // --- DEDUCTIONS ---
+        var d80_business = getValue("deduction_80ia_business");
+        var d80_misc = getValue("deduction_80ia_misc");
+        var d80_other = getValue("deduction_80ia_other");
 
-        setVal("net_taxable_income", net_taxable_income);
+        var deduction_sec37 = d80_business + d80_misc + d80_other;
+        setValue("deduction_sec37_disallowance", deduction_sec37);
 
-        // Tax @ 30%
-        let tax_30_percent = net_taxable_income * 0.30;
-        setVal("tax_30_percent", tax_30_percent);
+        var deduction_80g = getValue("deduction_80g");
 
-        // Surcharge @ 12%
-        let surcharge_12 = tax_30_percent * 0.12;
-        setVal("surcharge_12", surcharge_12);
+        // --- NET TAXABLE INCOME ---
+        var net_taxable_income = gross_total - deduction_sec37 - deduction_80g;
+        setValue("net_taxable_income", net_taxable_income);
 
-        // Education Cess @ 3%
-        let edu_cess_3 = (tax_30_percent + surcharge_12) * 0.03;
-        setVal("edu_cess_3", edu_cess_3);
+        // --- TAX 30% ---
+        var tax30 = net_taxable_income * 0.30;
+        setValue("tax_30_percent", tax30);
 
-        // Total Tax Payable
-        let total_tax_payable = tax_30_percent + surcharge_12 + edu_cess_3;
-        setVal("total_tax_payable", total_tax_payable);
+        // --- TAX PAYABLE (18.5%) ---
+        var tax185 = getValue("tax_book_profit_18_5");
 
-        // MAT, Interest
-        let mat_credit = getVal("mat_credit");
-        let interest_234c = getVal("interest_234c");
+        var tax_payable = (tax30 > tax185) ? tax30 : tax185;
+        setValue("tax_payable", tax_payable);
 
-        let total_tax = total_tax_payable + mat_credit + interest_234c;
-        setVal("total_tax", total_tax);
+        // --- SURCHARGE ---
+        var percent = getValue("persentage");
+        var surcharge = tax_payable * (percent / 100);
+        setValue("surcharge_12", surcharge);
 
-        // Advance, TDS, TCS
-        let advance_tax = getVal("advance_tax");
-        let tds = getVal("tds");
-        let tcs = getVal("tcs");
+        var edu_cess = (tax_payable + surcharge) * 0.03;
+        setValue("edu_cess_3", edu_cess);
 
-        let tax_on_assessment = advance_tax + tds + tcs;
-        setVal("tax_on_assessment", tax_on_assessment);
+        // --- total tax payable ---
+        var total_tax_payable = tax_payable + surcharge + edu_cess;
+        setValue("total_tax_payable", total_tax_payable);
 
-        // Refund / Payablesss
-        let refund = total_tax - tax_on_assessment;
-        setVal("refund", refund);
+        // --- FINAL TAX ---
+        var mat_credit = getValue("mat_credit");
+        var interest_234c = getValue("interest_234c");
+
+        var total_tax = total_tax_payable + mat_credit + interest_234c;
+        setValue("total_tax", total_tax);
+
+        // --- ASSESSMENT ---
+        var adv_tax = getValue("advance_tax");
+        var tds = getValue("tds");
+        var tcs = getValue("tcs");
+
+        var tax_on_assessment = adv_tax + tds + tcs;
+        setValue("tax_on_assessment", tax_on_assessment);
+
+        var refund = total_tax - tax_on_assessment;
+        setValue("refund", refund);
     };
 });

static/js/cit_calc.js

@@ -1,74 +1,89 @@
 document.addEventListener("DOMContentLoaded", function () {
 
+    const fields = [
+        "gross_total_income", "disallowance_14a", "disallowance_37",
+        "deduction_80ia_business", "deduction_sec37_disallowance", "deduction_80g",
+        "net_taxable_income", "tax_30_percent", "tax_book_profit_18_5",
+        "tax_payable", "surcharge_12", "edu_cess_3", "total_tax_payable",
+        "mat_credit", "interest_234c", "total_tax",
+        "advance_tax", "tds", "tcs", "tax_on_assessment", "refund"
+    ];
+
     function getVal(id) {
-        var el = document.getElementsByName(id)[0];
+        let el = document.getElementsByName(id)[0];
         return el ? parseFloat(el.value) || 0 : 0;
     }
 
     function setVal(id, value) {
-        var el = document.getElementsByName(id)[0];
+        let el = document.getElementsByName(id)[0];
         if (el) el.value = Number(value).toFixed(2);
     }
 
-    // MAIN CALC FUNCTION
-    window.calculate = function () {
+    function calculate() {
 
-        // BASIC VALUES
-        var gross_total_income = getVal("gross_total_income");
-        var disallowance_14a = getVal("disallowance_14a");
-        var disallowance_37 = getVal("disallowance_37");
+        // Base values
+        let gross_total_income = getVal("gross_total_income");
+        let disallowance_14a = getVal("disallowance_14a");
+        let disallowance_37 = getVal("disallowance_37");
 
-        var d80_business = getVal("deduction_80ia_business");
-        var deduction_sec37 = getVal("deduction_sec37_disallowance");
-        var deduction_80g = getVal("deduction_80g");
+        // Deductions
+        let d80_business = getVal("deduction_80ia_business");
+        let deduction_sec37 = getVal("deduction_sec37_disallowance");
+        let deduction_80g = getVal("deduction_80g");
 
-        // NET TAXABLE INCOME
-        var net_taxable_income =
+        // Net Taxable Income
+        let net_taxable_income =
             (gross_total_income + disallowance_14a + disallowance_37)
             - (d80_business + deduction_sec37)
             - deduction_80g;
 
         setVal("net_taxable_income", net_taxable_income);
 
-        // TAX @ 30%
-        var tax_30_percent = net_taxable_income * 0.30;
+        // 30% tax
+        let tax_30_percent = net_taxable_income * 0.30;
         setVal("tax_30_percent", tax_30_percent);
 
-        // TAX PAYABLE = 18.5% BOOK PROFIT (user enters)
-        var tax_payable = getVal("tax_book_profit_18_5");
+        // Book profit tax (user input)
+        let tax_payable = getVal("tax_book_profit_18_5");
         setVal("tax_payable", tax_payable);
 
-        // SURCHARGE
-        var surcharge_12 = tax_payable * 0.12;
+        // Surcharge 12%
+        let surcharge_12 = tax_payable * 0.12;
         setVal("surcharge_12", surcharge_12);
 
-        // CESS
-        var edu_cess_3 = (tax_payable + surcharge_12) * 0.03;
+        // Education Cess 3%
+        let edu_cess_3 = (tax_payable + surcharge_12) * 0.03;
         setVal("edu_cess_3", edu_cess_3);
 
-        // TOTAL TAX PAYABLE
-        var total_tax_payable = tax_payable + surcharge_12 + edu_cess_3;
+        // Total Tax Payable
+        let total_tax_payable = tax_payable + surcharge_12 + edu_cess_3;
         setVal("total_tax_payable", total_tax_payable);
 
-        // OTHER VALUES
-        var mat_credit = getVal("mat_credit");
-        var interest_234c = getVal("interest_234c");
+        // MAT + Interest
+        let mat_credit = getVal("mat_credit");
+        let interest_234c = getVal("interest_234c");
 
-        // FINAL TAX
-        var total_tax = total_tax_payable + mat_credit + interest_234c;
+        // Total Tax
+        let total_tax = total_tax_payable + mat_credit + interest_234c;
         setVal("total_tax", total_tax);
 
-        // PAYMENTS
-        var advance_tax = getVal("advance_tax");
-        var tds = getVal("tds");
-        var tcs = getVal("tcs");
+        // Assessment → Advance Tax + TDS + TCS
+        let advance_tax = getVal("advance_tax");
+        let tds = getVal("tds");
+        let tcs = getVal("tcs");
 
-        var tax_on_assessment = advance_tax + tds + tcs;
+        let tax_on_assessment = advance_tax + tds + tcs;
         setVal("tax_on_assessment", tax_on_assessment);
 
-        // REFUND
-        var refund = total_tax - tax_on_assessment;
+        // Refund (or payable)
+        let refund = total_tax - tax_on_assessment;
         setVal("refund", refund);
-    };
+    }
+
+    // Attach listeners
+    fields.forEach(id => {
+        let el = document.getElementsByName(id)[0];
+        if (el) el.addEventListener("input", calculate);
+    });
 
 });

static/js/itr_calc.js

@@ -18,8 +18,11 @@ document.addEventListener("DOMContentLoaded", function () {
         var disallowance_37 = getValue("disallowance_37");
 
         // // Auto-calculations (your logic)
-        setValue("gross_total_income", disallowance_37 + gross_total_income);
-        setValue("disallowance_37", disallowance_14a + disallowance_37);
+        // setValue("gross_total_income", disallowance_37 + gross_total_income);
+        // setValue("disallowance_37", disallowance_14a + disallowance_37);
+
+        var gross_total = gross_total_income + disallowance_37 + disallowance_14a
+        console.log("gross_total income:: " + gross_total)
 
         // --- DEDUCTIONS ---
         var d80_business = getValue("deduction_80ia_business");
@@ -32,23 +35,29 @@ document.addEventListener("DOMContentLoaded", function () {
         var deduction_80g = getValue("deduction_80g");
 
         // --- NET TAXABLE INCOME ---
-        var net_taxable_income = gross_total_income - deduction_sec37 - deduction_80g;
+        var net_taxable_income = gross_total - deduction_sec37 - deduction_80g;
         setValue("net_taxable_income", net_taxable_income);
 
         // --- TAX 30% ---
-        setValue("tax_30_percent", net_taxable_income * 0.30);
+        var tax30 = net_taxable_income * 0.30;
+        setValue("tax_30_percent", tax30);
 
         // --- TAX PAYABLE (18.5%) ---
-        var tax_book = getValue("tax_book_profit_18_5");
-        setValue("tax_payable", tax_book);
+        var tax185 = getValue("tax_book_profit_18_5");
 
-        var surcharge = tax_book * 0.12;
+        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_12", surcharge);
 
-        var edu_cess = (tax_book + surcharge) * 0.03;
+        var edu_cess = (tax_payable + surcharge) * 0.03;
         setValue("edu_cess_3", edu_cess);
 
-        var total_tax_payable = tax_book + surcharge + edu_cess;
+        // --- total tax payable ---
+        var total_tax_payable = tax_payable + surcharge + edu_cess;
         setValue("total_tax_payable", total_tax_payable);
 
         // --- FINAL TAX ---

static/js/toggle.js

@@ -0,0 +1,61 @@
+const sidebar = document.getElementById("sidebar");
+const main = document.getElementById("main");
+
+// Track toggle manually
+let isSidebarOpen = true;
+
+// Toggle sidebar normally
+function toggleSidebar() {
+  isSidebarOpen = !isSidebarOpen;
+
+  sidebar.classList.toggle("hide", !isSidebarOpen);
+
+  // Add temporary transition only during toggle
+  main.style.transition = "margin-left 0.3s ease";
+  sidebar.style.transition = "left 0.3s ease";
+
+  // Adjust main margin
+  main.style.marginLeft = isSidebarOpen ? "260px" : "20px";
+
+  // Remove transitions after animation to avoid disturbance
+  setTimeout(() => {
+    main.style.transition = "none";
+    sidebar.style.transition = "none";
+  }, 300);
+}
+
+// Toggle submenu — also force sidebar to open if it is hidden
+function toggleMenu(id) {
+  const menu = document.getElementById(id);
+  if (!menu) return;
+
+  // 👉 If sidebar is collapsed, open it automatically
+  if (!isSidebarOpen) {
+    isSidebarOpen = true;
+    sidebar.classList.remove("hide");
+    main.style.marginLeft = "260px";
+  }
+
+  // Close all other submenus
+  document.querySelectorAll(".submenu").forEach(sm => {
+    if (sm !== menu) sm.style.display = "none";
+  });
+
+  // Toggle the clicked submenu instantly
+  menu.style.display = menu.style.display === "block" ? "none" : "block";
+}
+
+// Remove transition when clicking submenu links
+document.querySelectorAll(".submenu a").forEach(link => {
+  link.addEventListener("click", () => {
+    main.style.transition = "none";
+    sidebar.style.transition = "none";
+  });
+});
+
+// Initialize sidebar as open when page loads
+window.addEventListener("DOMContentLoaded", () => {
+  sidebar.classList.remove("hide");
+  main.style.marginLeft = "260px";
+  isSidebarOpen = true;
+});

static/js/year_dropdown.js

@@ -38,7 +38,7 @@ document.addEventListener("DOMContentLoaded", function () {
       .then(data => {
         if (data.exists) {
           errorDiv.style.display = "block";
-          errorDiv.innerText = `Year ${selectedYear} already exists!`;
+          errorDiv.innerText = `Year ${selectedYear}-${selectedYear + 1} already exists!`;
 
           // Block submission
           form.onsubmit = function () { return false; };
@@ -49,3 +49,4 @@ document.addEventListener("DOMContentLoaded", function () {
       });
   });
 });
+

templates/add_ao.html

@@ -1,58 +1,166 @@
-<!DOCTYPE html>
-<html>
+{% extends "base.html" %}
 
-<head>
-    <title>Add New AO Record </title>
-    <link rel="stylesheet" href="{{ url_for('static', filename='css/add_ao.css') }}">
-    <script src="/static/js/ao_calc.js"></script>
-    <script src="/static/js/year_dropdown.js"></script>
+{% block title %}Add New AO Record{% endblock %}
+{% block extra_css %}
+<!-- Child page CSS -->
+<link rel="stylesheet" href="{{ url_for('static', filename='css/add_ao.css') }}">
+{% endblock %}
 
-</head>
-
-<body>
-    <div class="container">
-        <!-- Back to Dashboard Button -->
-        <a href="{{ url_for('index') }}" class="back-btn">← Back to Dashboard</a>
-
-        <h2>AO Form Entry</h2>
-        <form id="ao" method="POST" onsubmit="return showSuccessMessage()">
-            <!-- <label>Year:</label>
-            <input type="number" name="year" required> -->
+{% block content %}
+<div class="container">
 
+    <h2 style="text-align:center;">New Assessing Officer Form</h2>
+    <form id="ao" method="POST">
         <div class="form-group">
             <label>Year:</label>
-                <select id="year" name="year" required>
-                    <option>---- Select Years ----</option>
-                </select>
+            <select id="year" name="year" required></select>
+        </div>
+        <div id="yearError" style="color:red; display:none; margin-bottom:10px;"></div>
+
+        <div class="form-group">
+            <label>Gross Total Income:</label>
+            <input type="number" name="gross_total_income" step="any" value="0.00" oninput="calculate()" required>
         </div>
 
-
-            <div id="yearError" style="color:red; display:none; margin-bottom:10px;">
+        <div class="form-group full-width inline-2">
+            <div>
+                <label>Add :Disallowance u/s 14A:</label>
+                <input type="number" name="disallowance_14a" step="any" value="0.00" oninput="calculate()" required>
+            </div>
+            <div>
+                <label>Add :Disallowance u/s 37:</label>
+                <input type="number" name="disallowance_37" step="any" value="0.00" oninput="calculate()" required>
+            </div>
+        </div>
+
+        <div class="form-group">
+            <label>Deduction 80IA Business Income:</label>
+            <input type="number" name="deduction_80ia_business" step="any" value="0.00" oninput="calculate()" required>
+        </div>
+
+        <div class="form-group">
+            <label>Deduction 80IA Misc:</label>
+            <input type="number" name="deduction_80ia_misc" step="any" value="0.00" oninput="calculate()" required>
+        </div>
+
+        <div class="form-group">
+            <label>Deduction 80IA Other Operating Revenue:</label>
+            <input type="number" name="deduction_80ia_other" step="any" value="0.00" oninput="calculate()" required>
+        </div>
+
+        <div class="form-group">
+            <label>Deduction Sec 37 Disallowance:</label>
+            <input type="number" name="deduction_sec37_disallowance" step="any" value="0.00" oninput="calculate()"
+                required>
+        </div>
+
+        <div class="form-group">
+            <label>Less: Deduction 80G: </label>
+            <input type="number" name="deduction_80g" step="any" value="0.00" oninput="calculate()" required>
+        </div>
+
+        <div class="form-group">
+            <label>Net Taxable Income:</label>
+            <input type="number" name="net_taxable_income" class="auto" step="any" value="0.00" readonly>
+        </div>
+
+        <div class="form-group full-width inline-2">
+            <div>
+                <label>Tax @ 30% (A):</label>
+                <input type="number" name="tax_30_percent" step="any" value="0.00" oninput="calculate()" required>
+            </div>
+            <div>
+                <label>Tax @ 18.5% on Book Profit (B):</label>
+                <input type="number" name="tax_book_profit_18_5" step="any" value="0.00" oninput="calculate()" required>
+            </div>
+        </div>
+
+        <div class="form-group">
+            <label>Tax Payable (Higher of A or B):</label>
+            <input type="number" name="tax_payable" step="any" class="auto" value="0.00" readonly>
+        </div>
+
+        <div class="form-group full-width inline-2">
+            <div>
+                <label>Enter Percentage (%) Surcharge:</label>
+                <input type="number" name="persentage" step="any" value="0.00" oninput="calculate()">
+            </div>
+            <div>
+                <label>Surcharge:</label>
+                <input type="number" name="surcharge_12" class="auto" value="0.00" readonly>
+            </div>
+        </div>
+
+        <div class="form-group">
+            <label>Education Cess @ 3%:</label>
+            <input type="number" name="edu_cess_3" step="any" value="0.00" oninput="calculate()" required>
+        </div>
+
+        <div class="form-group">
+            <label>Total tax Payable:</label>
+            <input type="number" name="total_tax_payable" step="any" value="0.00" oninput="calculate()" required>
+        </div>
+
+        <div class="form-group">
+            <label>Mat Credit:</label>
+            <input type="number" name="mat_credit" step="any" value="0.00" oninput="calculate()" required>
+        </div>
+
+        <div class="form-group">
+            <label>Add :Interest 234c:</label>
+            <input type="number" name="interest_234c" step="any" value="0.00" oninput="calculate()" required>
+        </div>
+
+        <div class="form-group">
+            <label>Total Tax:</label>
+            <input type="number" name="total_tax" class="auto" step="any" value="0.00" readonly>
+        </div>
+
+        <div class="form-group">
+            <label>Advance Tax:</label>
+            <input type="number" name="advance_tax" step="any" value="0.00" oninput="calculate()" required>
+        </div>
+
+        <div class="form-group full-width inline-2">
+            <div>
+                <label>TDS :</label>
+                <input type="number" name="tds" step="any" value="0.00" oninput="calculate()" required>
+            </div>
+            <div>
+                <label>TCS :</label>
+                <input type="number" name="tcs" step="any" value="0.00" oninput="calculate()" required>
+            </div>
+        </div>
+
+        <div class="form-group">
+            <label>Tax on Regular Assessment:</label>
+            <input type="number" name="tax_on_assessment" class="auto" step="any" value="0.00" readonly>
+        </div>
+
+        <div class="form-group">
+            <label>Refund:</label>
+            <input type="number" name="refund" class="auto" step="any" value="0.00" readonly>
+        </div>
+        <div class="form-group">
+            <label>Remarks:</label>
+            <input type="text" name="Remarks">
         </div>
 
-            {% for field in [
-            "gross_total_income", "disallowance_14a", "disallowance_37",
-            "deduction_80ia_business", "deduction_sec37_disallowance", "deduction_80g",
-            "net_taxable_income", "tax_30_percent", "tax_book_profit_18_5",
-            "surcharge_12", "edu_cess_3", "total_tax_payable", "mat_credit",
-            "interest_234c", "total_tax", "advance_tax", "tds", "tcs",
-            "tax_on_assessment", "refund"
-            ] %}
-            <label for="{{ field }}">{{ field.replace("_", " ").title() }}:</label>
-            <input type="number" name="{{ field }}" step="0.01" oninput="calculate()" required>
-            <!-- <input type="number" name="{{ field }}" step="0.01" oninput="calculate()" required> -->
-            {% endfor %}
         <button type="submit">Submit</button>
     </form>
-    </div>
+</div>
 
-    <!-- JavaScript Alert -->
-    <script>
+{% block extra_js %}
+<script src="{{ url_for('static', filename='js/toggle.js') }}"></script>
+<script src="{{ url_for('static', filename='js/ao_calc.js') }}"></script>
+<script src="{{ url_for('static', filename='js/year_dropdown.js') }}"></script>
+{% endblock %}
+
+
+<script>
     function showSuccessMessage() {
         alert("Form submitted successfully!");
-            return true; // allow form to submit after showing alert
+        return true;
     }
-    </script>
-</body>
-
-</html>
+</script>
+{% endblock %}

templates/add_cit.html

@@ -1,54 +1,159 @@
-<!DOCTYPE html>
-<html>
+{% extends "base.html" %}
 
-<head>
-    <title>CIT Form Entry</title>
-    <link rel="stylesheet" href="{{ url_for('static', filename='css/add_cit.css') }}">
-    <script src="/static/js/cit_calc.js"></script>
-    <script src="/static/js/year_dropdown.js"></script>
+{% block title %}CIT Form Entry{% endblock %}
 
-</head>
+{% block extra_css %}
+<!-- Child page CSS -->
+<link rel="stylesheet" href="{{ url_for('static', filename='css/add_cit.css') }}">
+{% endblock %}
+{% block content %}
+<div class="container">
 
-<body>
-    <div class="container">
-        <!-- Back to Dashboard Button -->
-        <a href="{{ url_for('index') }}" class="back-btn">← Back to Dashboard</a>
-
-        <h2>CIT Form Entry</h2>
+    <h2 style="text-align:center;">New CIT Form </h2>
     <form id="cit" method="POST">
-            <!-- <label>Year:</label>
-            <input type="number" name="year" required value="{{ record.year if record else '' }}"> -->
+        <div class="form-group">
+            <label>Year:</label>
+            <select id="year" name="year" required></select>
+        </div>
+        <div id="yearError" style="color:red; display:none; margin-bottom:10px;"></div>
 
         <div class="form-group">
-                <label> Year:</label>
-                <select id="year" name="year" required>
-                    <option>---- Select Years ----</option>
-                </select>
+            <label>Gross Total Income:</label>
+            <input type="number" name="gross_total_income" step="any" value="0.00" oninput="calculate()" required>
+        </div>
+        <div class="form-group full-width inline-2">
+            <div>
+                <label>Add :Disallowance u/s 14A:</label>
+                <input type="number" name="disallowance_14a" step="any" value="0.00" oninput="calculate()" required>
+            </div>
+            <div>
+                <label>Add :Disallowance u/s 37:</label>
+                <input type="number" name="disallowance_37" step="any" value="0.00" oninput="calculate()" required>
+            </div>
+        </div>
+
+        <div class="form-group">
+            <label>Deduction 80IA Business Income:</label>
+            <input type="number" name="deduction_80ia_business" step="any" value="0.00" oninput="calculate()" required>
+        </div>
+
+        <div class="form-group">
+            <label>Deduction 80IA Misc:</label>
+            <input type="number" name="deduction_80ia_misc" step="any" value="0.00" oninput="calculate()" required>
+        </div>
+
+        <div class="form-group">
+            <label>Deduction 80IA Other Operating Revenue:</label>
+            <input type="number" name="deduction_80ia_other" step="any" value="0.00" oninput="calculate()" required>
+        </div>
+
+        <div class="form-group">
+            <label>Deduction Sec 37 Disallowance:</label>
+            <input type="number" name="deduction_sec37_disallowance" step="any" value="0.00" oninput="calculate()"
+                required>
+        </div>
+
+        <div class="form-group">
+            <label>Less: Deduction 80G: </label>
+            <input type="number" name="deduction_80g" step="any" value="0.00" oninput="calculate()" required>
+        </div>
+
+        <div class="form-group">
+            <label>Net Taxable Income:</label>
+            <input type="number" name="net_taxable_income" class="auto" step="any" value="0.00" readonly>
+        </div>
+
+        <div class="form-group full-width inline-2">
+            <div>
+                <label>Tax @ 30% (A):</label>
+                <input type="number" name="tax_30_percent" step="any" value="0.00" oninput="calculate()" required>
+            </div>
+            <div>
+                <label>Tax @ 18.5% on Book Profit (B):</label>
+                <input type="number" name="tax_book_profit_18_5" step="any" value="0.00" oninput="calculate()" required>
+            </div>
+        </div>
+
+        <div class="form-group">
+            <label>Tax Payable (Higher of A or B):</label>
+            <input type="number" name="tax_payable" class="auto" step="any" value="0.00" readonly>
+        </div>
+
+        <div class="form-group full-width inline-2">
+            <div>
+                <label>Enter Percentage (%) Surcharge:</label>
+                <input type="number" name="persentage" step="any" value="0.00" oninput="calculate()">
+            </div>
+            <div>
+                <label>Surcharge:</label>
+                <input type="number" name="surcharge_12" class="auto" value="0.00" readonly>
             </div>
-            <div id="yearError" style="color:red; display:none; margin-bottom:10px;">
         </div>
 
 
-            {% for field in [
-            "gross_total_income", "deduction_80ia_business", "deduction_sec37_disallowance",
-            "deduction_80g", "net_taxable_income", "tax_30_percent", "tax_book_profit_18_5",
-            "tax_payable", "surcharge_12", "edu_cess_3", "total_tax_payable", "mat_credit",
-            "interest_234c", "total_tax", "advance_tax", "tds", "tcs", "tax_on_assessment", "refund"
-            ] %}
-            <label for="{{ field }}">{{ field.replace("_", " ").title() }}:</label>
-            <input type="number" name="{{ field }}" step="0.01" oninput="calculate()" required>
-            {% endfor %}
-            <button type="submit">Submit </button>
+        <div class="form-group">
+            <label>Education Cess @ 3%:</label>
+            <input type="number" name="edu_cess_3" step="any" value="0.00" oninput="calculate()" required>
+        </div>
+
+        <div class="form-group">
+            <label>Total tax Payable:</label>
+            <input type="number" name="total_tax_payable" class="auto" step="any" value="0.00" readonly>
+        </div>
+
+        <div class="form-group">
+            <label>Mat Credit:</label>
+            <input type="number" name="mat_credit" step="any" value="0.00" oninput="calculate()" required>
+        </div>
+
+        <div class="form-group">
+            <label>Add :Interest 234c:</label>
+            <input type="number" name="interest_234c" step="any" value="0.00" oninput="calculate()" required>
+        </div>
+
+        <div class="form-group">
+            <label>Total Tax:</label>
+            <input type="number" name="total_tax" step="any" value="0.00" readonly>
+        </div>
+
+        <div class="form-group">
+            <label>Advance Tax:</label>
+            <input type="number" name="advance_tax" step="any" value="0.00" oninput="calculate()" required>
+        </div>
+
+        <div class="form-group full-width inline-2">
+            <div>
+                <label>TDS :</label>
+                <input type="number" name="tds" step="any" value="0.00" oninput="calculate()" required>
+            </div>
+            <div>
+                <label>TCS :</label>
+                <input type="number" name="tcs" step="any" value="0.00" oninput="calculate()" required>
+            </div>
+        </div>
+
+        <div class="form-group">
+            <label>Tax on Regular Assessment:</label>
+            <input type="number" name="tax_on_assessment" class="auto" step="any" value="0.00" readonly>
+        </div>
+
+        <div class="form-group">
+            <label>Refund:</label>
+            <input type="number" name="refund" class="auto" step="any" value="0.00" readonly>
+        </div>
+
+        <div class="form-group">
+            <label>Remarks:</label>
+            <input type="text" name="Remarks">
+        </div>
+
+        <button type="submit">{{ 'Update' if record else 'Submit' }}</button>
     </form>
+</div>
+{% endblock %}
 
-    </div>
-
-    <script>
-        function showSuccessMessage() {
-            alert("Form submitted successfully!");
-            return true; // continue with form submission
-        }
-    </script>
-</body>
-
-</html>
+{% block extra_js %}
+<script src="{{ url_for('static', filename='js/toggle.js') }}"></script>
+<script src="{{ url_for('static', filename='js/cit_calc.js') }}"></script>
+<script src="{{ url_for('static', filename='js/year_dropdown.js') }}"></script>
+{% endblock %}

templates/add_itat.html

@@ -1,55 +1,49 @@
-<!DOCTYPE html>
-<html>
+{% extends "base.html" %}
 
-<head>
-    <title>Add New ITAT Record</title>
-    <link rel="stylesheet" href="{{ url_for('static', filename='css/add_ao.css') }}">
-    <script src="/static/js/year_dropdown.js"></script>
+{% block title %}Add New ITAT Record{% endblock %}
 
-</head>
+{% block extra_css %}
+<!-- Child page CSS -->
+<link rel="stylesheet" href="{{ url_for('static', filename='css/add_itat.css') }}">
+{% endblock %}
 
-<body>
-    <div class="container">
-        <!-- Back to Dashboard Button -->
-        <a href="{{ url_for('index') }}" class="back-btn">← Back to Dashboard</a>
+{% block content %}
+<div class="container">
+
+    <h2 style="text-align:center;">New Income Tax Appellate Tribunal Form</h2>
 
-        <h2>ITAT Form Entry</h2>
     <form id="itat" method="POST" onsubmit="return showSuccessMessage()">
-            <!-- <label>Year:</label>
-            <input type="number" name="year" step="0.01" required> -->
 
-            <div class="form-group">
-                <label> Year:</label>
-                <select id="year" name="year" required>
-                    <option>---- Select Years ----</option>
-                </select>
-            </div>
-
-            <div id="yearError" style="color:red; display:none; margin-bottom:10px;">
-            </div>
+        <label>Year:</label>
+        <select id="year" name="year" required></select>
+        <div id="yearError" style="color:red; display:none; margin-bottom:10px;"></div>
 
         <label>MAT Tax Credit:</label>
-            <input type="number" name="mat_tax_credit" step="0.01" required>
+        <input type="number" name="mat_tax_credit" step="0.01" required />
 
         <label>Surcharge:</label>
-            <input type="number" name="surcharge" step="0.01" required>
+        <input type="number" name="surcharge" step="0.01" required />
 
         <label>Cess:</label>
-            <input type="number" name="cess" step="0.01" required>
+        <input type="number" name="cess" step="0.01" required />
 
         <label>Total Credit:</label>
-            <input type="number" name="total_credit" step="0.01" required>
+        <input type="number" name="total_credit" step="0.01" required />
 
         <button type="submit">Submit</button>
     </form>
-    </div>
+</div>
+{% endblock %}
 
-    <script>
+{% block extra_js %}
+<script src="{{ url_for('static', filename='js/toggle.js') }}"></script>
+<script src="{{ url_for('static', filename='js/cit_calc.js') }}"></script>
+<script src="{{ url_for('static', filename='js/year_dropdown.js') }}"></script>
+{% endblock %}
+
+<script>
     function showSuccessMessage() {
         alert("Form submitted successfully!");
         return true;
     }
-    </script>
-</body>
-
-</html>
+</script>

templates/add_itr.html

@@ -1,56 +1,158 @@
-<!DOCTYPE html>
-<html lang="en">
+{% extends "base.html" %}
 
-<head>
-  <meta charset="UTF-8">
-  <title>Add New Income Tax Return Record</title>
-  <link rel="stylesheet" href="{{ url_for('static', filename='css/add_itr.css') }}">
-  <script src="/static/js/itr_calc.js"></script>
-  <script src="/static/js/year_dropdown.js"></script>
+{% block title %}Add New Income Tax Return Record{% endblock %}
 
-</head>
+{% block extra_css %}
+<!-- Child page CSS -->
+<link rel="stylesheet" href="{{ url_for('static', filename='css/add_itr.css') }}">
+{% endblock %}
 
-<body>
-  <div class="container">
-    <!-- Back to Dashboard Button -->
-    <a href="{{ url_for('index') }}" class="back-btn">← Back to Dashboard</a>
+{% block content %}
+<div class="container">
+    <h2 style="text-align:center;">New Income Tax Return Form</h2>
 
-
-    <h2>Add New Income Tax Return Record</h2>
-    <form id="itr" method="POST" action="{{ url_for('add_itr') }}">
-      <!-- <div class="form-group">
+    <form id="itr" method="POST">
+        <div class="form-group">
             <label>Year:</label>
-        <input type="number" name="year" required>
-      </div> -->
+            <select id="year" name="year" required></select>
+        </div>
+        <div id="yearError" style="color:red; display:none; margin-bottom:10px;"></div>
 
         <div class="form-group">
-        <label> Year:</label>
-        <select id="year" name="year" required>
-          <option>---- Select Years ----</option>
-        </select>
+            <label>Gross Total Income:</label>
+            <input type="number" name="gross_total_income" step="any" value="0.00" oninput="calculate()" required>
+        </div>
+        <div class="form-group full-width inline-2">
+            <div>
+                <label>Add :Disallowance u/s 14A:</label>
+                <input type="number" name="disallowance_14a" step="any" value="0.00" oninput="calculate()" required>
+            </div>
+            <div>
+                <label>Add :Disallowance u/s 37:</label>
+                <input type="number" name="disallowance_37" step="any" value="0.00" oninput="calculate()" required>
             </div>
-       <div id="yearError" style="color:red; display:none; margin-bottom:10px;">
         </div>
 
-      {% for field in [
-      "gross_total_income", "disallowance_14a", "disallowance_37",
-      "deduction_80ia_business", "deduction_80ia_misc", "deduction_80ia_other",
-      "deduction_sec37_disallowance", "deduction_80g", "net_taxable_income",
-      "tax_30_percent", "tax_book_profit_18_5", "tax_payable", "surcharge_12",
-      "edu_cess_3", "total_tax_payable", "mat_credit", "interest_234c",
-      "total_tax", "advance_tax", "tds", "tcs", "tax_on_assessment", "refund"
-      ] %}
+        <div class="form-group">
+            <label>Deduction 80IA Business Income:</label>
+            <input type="number" name="deduction_80ia_business" step="any" value="0.00" oninput="calculate()" required>
+        </div>
+
+        <div class="form-group">
+            <label>Deduction 80IA Misc:</label>
+            <input type="number" name="deduction_80ia_misc" step="any" value="0.00" oninput="calculate()" required>
+        </div>
+
+        <div class="form-group">
+            <label>Deduction 80IA Other Operating Revenue:</label>
+            <input type="number" name="deduction_80ia_other" step="any" value="0.00" oninput="calculate()" required>
+        </div>
+
+        <div class="form-group">
+            <label>Deduction Sec 37 Disallowance:</label>
+            <input type="number" name="deduction_sec37_disallowance" step="any" value="0.00" oninput="calculate()"
+                required>
+        </div>
+
+        <div class="form-group">
+            <label>Less: Deduction 80G: </label>
+            <input type="number" name="deduction_80g" step="any" value="0.00" oninput="calculate()" required>
+        </div>
+
+        <div class="form-group">
+            <label>Net Taxable Income:</label>
+            <input type="number" name="net_taxable_income" class="auto" step="any" value="0.00" readonly>
+        </div>
+
+        <div class="form-group full-width inline-2">
+            <div>
+                <label>Tax @ 30% (A):</label>
+                <input type="number" name="tax_30_percent" step="any" value="0.00" oninput="calculate()" required>
+            </div>
+            <div>
+                <label>Tax @ 18.5% on Book Profit (B):</label>
+                <input type="number" name="tax_book_profit_18_5" step="any" value="0.00" oninput="calculate()" required>
+            </div>
+        </div>
+
+        <div class="form-group">
+            <label>Tax Payable (Higher of A or B):</label>
+            <input type="number" name="tax_payable" class="auto" step="any" value="0.00" readonly>
+        </div>
+
+        <div class="form-group full-width inline-2">
+            <div>
+                <label>Enter Percentage (%) Surcharge:</label>
+                <input type="number" name="persentage" step="any" value="0.00" oninput="calculate()">
+            </div>
+            <div>
+                <label>Surcharge:</label>
+                <input type="number" name="surcharge_12" class="auto" value="0.00" readonly>
+            </div>
+        </div>
 
 
         <div class="form-group">
-        <label>{{ field.replace("_", " ").title() }}:</label>
-        <input type="number" name="{{ field }}" step="any" value="0.00" oninput="calculate()" required>
+            <label>Education Cess @ 3%:</label>
+            <input type="number" name="edu_cess_3" step="any" value="0.00" oninput="calculate()" required>
+        </div>
+
+        <div class="form-group">
+            <label>Total tax Payable:</label>
+            <input type="number" name="total_tax_payable" class="auto" step="any" value="0.00" readonly>
+        </div>
+
+        <div class="form-group">
+            <label>Mat Credit:</label>
+            <input type="number" name="mat_credit" step="any" value="0.00" oninput="calculate()" required>
+        </div>
+
+        <div class="form-group">
+            <label>Add :Interest 234c:</label>
+            <input type="number" name="interest_234c" step="any" value="0.00" oninput="calculate()" required>
+        </div>
+
+        <div class="form-group">
+            <label>Total Tax:</label>
+            <input type="number" name="total_tax" step="any" value="0.00" readonly>
+        </div>
+
+        <div class="form-group">
+            <label>Advance Tax:</label>
+            <input type="number" name="advance_tax" step="any" value="0.00" oninput="calculate()" required>
+        </div>
+
+        <div class="form-group full-width inline-2">
+            <div>
+                <label>TDS :</label>
+                <input type="number" name="tds" step="any" value="0.00" oninput="calculate()" required>
+            </div>
+            <div>
+                <label>TCS :</label>
+                <input type="number" name="tcs" step="any" value="0.00" oninput="calculate()" required>
+            </div>
+        </div>
+        <div class="form-group">
+            <label>Tax on Regular Assessment:</label>
+            <input type="number" name="tax_on_assessment" class="auto" step="any" value="0.00" readonly>
+        </div>
+
+        <div class="form-group">
+            <label>Refund:</label>
+            <input type="number" name="refund" class="auto" step="any" value="0.00" readonly>
+        </div>
+
+        <div class="form-group">
+            <label>Remarks:</label>
+            <input type="text" name="Remarks">
         </div>
-      {% endfor %}
 
         <button type="submit">Submit</button>
     </form>
-  </div>
-</body>
+</div>
+{% endblock %}
 
-</html
+{% block extra_js %}
+<script src="{{ url_for('static', filename='js/itr_calc.js') }}"></script>
+<script src="{{ url_for('static', filename='js/year_dropdown.js') }}"></script>
+{% endblock %}

templates/ao_reports.html

@@ -1,81 +1,41 @@
-<!DOCTYPE html>
-<html>
+{% extends "base.html" %}
 
-<head>
-    <title>Download AO Reports</title>
-    <link rel="stylesheet" href="{{ url_for('static', filename='index.css') }}">
-    <style>
-        body {
-            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-            background-color: #f4f7f9;
-            margin: 0;
-            padding: 0;
-        }
+{% block title %}Download AO Report{% endblock %}
 
-        .container {
-            max-width: 600px;
-            margin: 60px auto;
-            padding: 30px;
-            background-color: white;
-            border-radius: 10px;
-            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
-            text-align: center;
-        }
+{% block extra_css %}
+<link rel="stylesheet" href="{{ url_for('static', filename='css/ao_report.css') }}">
+{% endblock %}
 
-        h2 {
-            color: #333;
-            margin-bottom: 30px;
-        }
-
-        label {
-            font-weight: 600;
-            margin-right: 10px;
-        }
-
-        select {
-            padding: 8px 12px;
-            border: 1px solid #ccc;
-            border-radius: 5px;
-            margin-bottom: 20px;
-            min-width: 200px;
-        }
-
-        button {
-            padding: 10px 20px;
-            background-color: #007bff;
-            color: white;
-            border: none;
-            border-radius: 5px;
-            cursor: pointer;
-        }
-
-        button:hover {
-            background-color: #0056b3;
-        }
-    </style>
-</head>
-
-<body>
+{% block content %}
+<div class="main">
     <div class="container">
-        <!-- Back to Dashboard Button -->
-        <a href="{{ url_for('index') }}" class="back-btn">← Back to Dashboard</a>
 
         <h2>Download AO Report</h2>
+
         <form method="GET" action="{{ url_for('ao_report') }}" target="_blank">
 
-            <label for="year">Select Year:</label>
-            <br>
+            <label for="year">Select Year:</label><br>
+
             <select name="year" id="year" required>
                 <option value="">-- Select Year --</option>
                 {% for y in years %}
-                <!-- <option value="{{ y }}">{{ y }}</option> -->
-                <option value="{{ y }}">AY {{ y }}-{{y +1 }}</option>
+                <option value="{{ y }}">AY {{ y }} - {{ y + 1 }}</option>
                 {% endfor %}
             </select>
-            <br><br>
-            <button type="submit">Download Excel</button>
-        </form>
-    </div>
-</body>
 
-</html>
+            <br>
+
+            <button type="submit">Download Excel</button>
+
+        </form>
+
+    </div>
+</div>
+{% block scripts %}
+<script src="{{ url_for('static', filename='js/year_dropdown.js') }}"></script>
+<script src="{{ url_for('static', filename='js/toggle.js') }}"></script>
+{% endblock %}
+
+{% block extra_js %}  <script src="{{ url_for('static', filename='js/year_dropdown.js') }}"></script>
+{% endblock %}
+{% endblock %}

templates/base.html

@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8" />
+    <title>{% block title %}Income Tax Utilities{% endblock %}</title>
+
+    <!-- Shared CSS -->
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/index.css') }}">
+
+    <!-- Extra CSS for child pages -->
+    {% block extra_css %}{% endblock %}
+</head>
+
+<body>
+    <!-- NAVBAR -->
+    <div class="navbar">
+        <div class="nav-left">
+            <span class="toggle-btn" onclick="toggleSidebar()">☰</span>
+            <img src="{{ url_for('static', filename='images/lcepllogo.png') }}" class="nav-logo" alt="Logo" />
+            <h3>LAXMI CIVIL ENGINEERING SERVICES PVT. LTD.</h3>
+        </div>
+    </div>
+
+    <!-- SIDEBAR -->
+    <div class="sidebar hide" id="sidebar">
+        <a href="{{ url_for('index') }}"><h2>Dashboard</h2></a>
+
+        <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>
+
+        <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>
+
+        <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>
+
+        <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>
+
+        <div class="menu-btn" onclick="toggleMenu('docMenu')">Documents & Reports ▼</div>
+        <div class="submenu" id="docMenu">
+            <a href="{{ url_for('upload_file') }}">📂 Upload</a>
+            <a href="{{ url_for('view_documents') }}">📄 Documents</a>
+            <a href="{{ url_for('reports') }}">📊 Reports</a>
+            <a href="{{ url_for('summary_report') }}">📝 Summary Report</a>
+        </div>
+
+        <!-- Logout at bottom -->
+        <a href="{{ url_for('auth.logout') }}" class="sidebar-logout">
+            <img src="{{ url_for('static', filename='images/logout_icon.png') }}" class="logout-icon" alt="Logout" />
+        </a>
+    </div>
+
+    <!-- MAIN CONTENT -->
+    <div class="main" id="main">
+        {% block content %}{% endblock %}
+    </div>
+
+    <!-- Shared JS -->
+    <script src="{{ url_for('static', filename='js/toggle.js') }}"></script>
+
+    <!-- Extra JS for child pages -->
+    {% block extra_js %}{% endblock %}
+</body>
+</html>

templates/cit_reports.html

@@ -1,81 +1,41 @@
-<!DOCTYPE html>
-<html>
+{% extends "base.html" %}
 
-<head>
-    <title>Download CIT Reports</title>
-    <link rel="stylesheet" href="{{ url_for('static', filename='index.css') }}">
-    <style>
-        body {
-            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-            background-color: #f4f7f9;
-            margin: 0;
-            padding: 0;
-        }
+{% block title %}Download CIT Report{% endblock %}
 
-        .container {
-            max-width: 600px;
-            margin: 60px auto;
-            padding: 30px;
-            background-color: white;
-            border-radius: 10px;
-            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
-            text-align: center;
-        }
+{% block extra_css %}
+<link rel="stylesheet" href="{{ url_for('static', filename='css/cit_report.css') }}">
+{% endblock %}
 
-        h2 {
-            color: #333;
-            margin-bottom: 30px;
-        }
-
-        label {
-            font-weight: 600;
-            margin-right: 10px;
-        }
-
-        select {
-            padding: 8px 12px;
-            border: 1px solid #ccc;
-            border-radius: 5px;
-            margin-bottom: 20px;
-            min-width: 200px;
-        }
-
-        button {
-            padding: 10px 20px;
-            background-color: #007bff;
-            color: white;
-            border: none;
-            border-radius: 5px;
-            cursor: pointer;
-        }
-
-        button:hover {
-            background-color: #0056b3;
-        }
-    </style>
-</head>
-
-<body>
+{% block content %}
+<div class="main">
     <div class="container">
-        <!-- Back to Dashboard Button -->
-        <a href="{{ url_for('index') }}" class="back-btn">← Back to Dashboard</a>
 
         <h2>Download CIT Report</h2>
+
         <form method="GET" action="{{ url_for('cit_report') }}" target="_blank">
 
-            <label for="year">Select Year:</label>
-            <br>
+            <label for="year">Select Year:</label><br>
+
             <select name="year" id="year" required>
                 <option value="">-- Select Year --</option>
                 {% for y in years %}
-                <!-- <option value="{{ y }}">{{ y }}</option> -->
-                <option value="{{ y }}">AY {{ y }}-{{y +1 }}</option>
+                <option value="{{ y }}">AY {{ y }} - {{ y + 1 }}</option>
                 {% endfor %}
             </select>
-            <br><br>
-            <button type="submit">Download Excel</button>
-        </form>
-    </div>
-</body>
 
-</html>
+            <br>
+            <button type="submit">Download Excel</button>
+
+        </form>
+
+    </div>
+</div>
+{% block scripts %}
+<script src="{{ url_for('static', filename='js/year_dropdown.js') }}"></script>
+<script src="{{ url_for('static', filename='js/toggle.js') }}"></script>
+{% endblock %}
+
+{% block extra_js %}  <script src="{{ url_for('static', filename='js/year_dropdown.js') }}"></script>
+{% endblock %}
+{% endblock %}
+

templates/display_ao.html

@@ -1,159 +1,25 @@
-<!DOCTYPE html>
-<html lang="en">
+{% extends "base.html" %}
 
-<head>
-  <meta charset="UTF-8">
-  <!-- Back to Dashboard Button -->
-  <a href="{{ url_for('index') }}" class="back-btn">← Back to Dashboard</a>
+{% block title %}AO Records{% endblock %}
 
-  <title>AO Records</title>
-  <style>
-    body {
-      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-      background-color: #f8f9fa;
-      padding: 20px;
-      color: #333;
-    }
+{% block content %}
 
-    .container {
-      max-width: 95%;
-      margin: auto;
-      background: white;
-      padding: 30px;
-      border-radius: 8px;
-      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-    }
+<!-- Load only display_itr CSS -->
+<link rel="stylesheet" href="{{ url_for('static', filename='css/display_itr.css') }}">
+<div class="container">
 
-    h2 {
-      text-align: center;
-      margin-bottom: 20px;
-    }
-
-    .btn {
-      padding: 8px 15px;
-      border-radius: 5px;
-      text-decoration: none;
-      color: white;
-      border: none;
-      cursor: pointer;
-      font-size: 14px;
-    }
-
-    .btn-add {
-      background-color: #28a745;
-      display: inline-block;
-      margin-bottom: 20px;
-    }
-
-    .btn-update {
-      background-color: #007bff;
-    }
-
-    .btn-delete {
-      background-color: #dc3545;
-    }
-
-    .action-cell form {
-      display: inline-block;
-      margin-left: 5px;
-    }
-
-    .table-wrapper {
-      overflow-x: auto;
-    }
-
-    table {
-      width: 100%;
-      border-collapse: collapse;
-      margin-top: 20px;
-    }
-
-    th,
-    td {
-      padding: 12px;
-      border: 1px solid #dee2e6;
-      text-align: right;
-      white-space: nowrap;
-    }
-
-    th {
-      background-color: #343a40;
-      color: white;
-      text-align: center;
-    }
-
-    tr:nth-child(even) {
-      background-color: #f2f2f2;
-    }
-
-    td:first-child,
-    th:first-child {
-      text-align: left;
-    }
-
-    .alert {
-      padding: 10px 15px;
-      margin-bottom: 20px;
-      border-radius: 5px;
-    }
-
-    .alert-success {
-      background-color: #d4edda;
-      color: #155724;
-      border: 1px solid #c3e6cb;
-    }
-
-    .alert-danger {
-      background-color: #f8d7da;
-      color: #721c24;
-      border: 1px solid #f5c6cb;
-    }
-
-    /* Back button styling */
-    .back-btn {
-      display: inline-block;
-      margin-bottom: 20px;
-      padding: 10px 18px;
-      background: #6c757d;
-      color: white;
-      font-size: 15px;
-      font-weight: 600;
-      border-radius: 6px;
-      text-decoration: none;
-      transition: background 0.3s ease;
-    }
-
-    .back-btn:hover {
-      background: #5a6268;
-    }
-  </style>
-</head>
-
-<body>
-  <div class="container">
-    <!-- Back to Dashboard Button -->
-    <!-- <a href="{{ url_for('index') }}" class="back-btn">← Back to Dashboard</a> -->
-
-
-    <h2>Assessing Officer Records 👨‍💼</h2>
-
-    <!-- Flash Messages -->
-    {% with messages = get_flashed_messages(with_categories=true) %}
-    {% if messages %}
-    {% for category, message in messages %}
-    <div class="alert alert-{{ category }}">{{ message }}</div>
-    {% endfor %}
-    {% endif %}
-    {% endwith %}
+    <h2 style="text-align: center;">Assessing Officer Records 👨‍💼</h2>
 
+    <!-- Add AO Record Button -->
+    <div style="text-align: right; margin-bottom: 10px;">
         <a href="{{ url_for('add_ao') }}" class="btn btn-add">➕ Add AO Record</a>
+    </div>
 
     {% if ao_records %}
     <div class="table-wrapper">
         <table>
             <thead>
                 <tr>
-            <th>ID</th>
                     <th>Year</th>
                     <th>Gross Total Income</th>
                     <th>Net Taxable Income</th>
@@ -164,16 +30,15 @@
             <tbody>
                 {% for ao in ao_records %}
                 <tr>
-            <td>{{ ao.id }}</td>
-            <td>{{ ao.year }}</td>
+                    <td>AY {{ ao.year }}-{{ ao.year+1 }}</td>
                     <td>{{ ao.gross_total_income }}</td>
                     <td>{{ ao.net_taxable_income }}</td>
                     <td>{{ ao.total_tax }}</td>
-            <td class="action-cell">
+                    <td>
                         <a href="{{ url_for('update_ao', id=ao.id) }}" class="btn btn-update">Edit</a>
-              <form action="{{ url_for('delete_ao', id=ao.id) }}" method="POST" style="display:inline;">
-                <button type="submit" class="btn btn-delete"
-                  onclick="return confirm('Are you sure you want to delete this AO?');">Delete</button>
+
+                        <form action="{{ url_for('delete_ao', id=ao.id) }}" method="POST" style="display:inline">
+                            <button class="btn btn-delete" onclick="return confirm('Are you sure?');">Delete</button>
                         </form>
                     </td>
                 </tr>
@@ -182,9 +47,7 @@
         </table>
     </div>
     {% else %}
-    <p style="text-align: center; margin-top: 20px;">No AO records found. Add one above!</p>
+    <p style="text-align: center; margin-top: 20px;" class="no-record">No AO records found.</p>
     {% endif %}
-  </div>
-</body>
-
-</html>
+</div>
+{% endblock %}

templates/display_cit.html

@@ -1,122 +1,18 @@
-<!DOCTYPE html>
-<html lang="en">
+{% extends "base.html" %}
 
-<head>
-    <meta charset="UTF-8">
-    <title>CIT Records</title>
-    <style>
-        body {
-            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-            background-color: #f8f9fa;
-            padding: 20px;
-            color: #333;
-        }
+{% block title %}CIT Records{% endblock %}
 
-        .container {
-            max-width: 95%;
-            margin: auto;
-            background: white;
-            padding: 30px;
-            border-radius: 8px;
-            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-        }
 
-        h2 {
-            text-align: center;
-            margin-bottom: 20px;
-        }
-
-        .btn {
-            padding: 8px 15px;
-            border-radius: 5px;
-            text-decoration: none;
-            color: white;
-            border: none;
-            cursor: pointer;
-            font-size: 14px;
-        }
-
-        .btn-add {
-            background-color: #28a745;
-            display: inline-block;
-            margin-bottom: 20px;
-        }
-
-        .btn-update {
-            background-color: #007bff;
-        }
-
-        .btn-delete {
-            background-color: #dc3545;
-        }
-
-        .action-cell form {
-            display: inline-block;
-            margin-left: 5px;
-        }
-
-        .table-wrapper {
-            overflow-x: auto;
-        }
-
-        table {
-            width: 100%;
-            border-collapse: collapse;
-            margin-top: 20px;
-        }
-
-        th,
-        td {
-            padding: 12px;
-            border: 1px solid #dee2e6;
-            text-align: right;
-            white-space: nowrap;
-        }
-
-        th {
-            background-color: #343a40;
-            color: white;
-            text-align: center;
-        }
-
-        tr:nth-child(even) {
-            background-color: #f2f2f2;
-        }
-
-        td:first-child,
-        th:first-child {
-            text-align: left;
-        }
-
-        /* Back button styling */
-        .back-btn {
-            display: inline-block;
-            margin-bottom: 20px;
-            padding: 10px 18px;
-            background: #6c757d;
-            color: white;
-            font-size: 15px;
-            font-weight: 600;
-            border-radius: 6px;
-            text-decoration: none;
-            transition: background 0.3s ease;
-        }
-
-        .back-btn:hover {
-            background: #5a6268;
-        }
-    </style>
-</head>
-
-<body>
+{% block content %}
+<!-- Load only display_itr CSS -->
+<link rel="stylesheet" href="{{ url_for('static', filename='css/display_cit.css') }}">
+<div class="main">
     <div class="container">
-        <!-- Back to Dashboard Button -->
-        <a href="{{ url_for('index') }}" class="back-btn">← Back to Dashboard</a>
 
-
-        <h2>CIT Records 🧾</h2>
+        <h2 style="text-align: center;">CIT Records🧾</h2>
+        <div style="text-align: right; margin-bottom: 10px;">
             <a href="{{ url_for('add_cit') }}" class="btn btn-add">➕ Add New Record</a>
-
+        </div>
         {% if cit_records %}
         <div class="table-wrapper">
             <table>
@@ -133,14 +29,13 @@
                 <tbody>
                     {% for record in cit_records %}
                     <tr>
-                        <td>{{ record.year }}</td>
+                        <td>AY {{ record.year }}-{{ record.year+1 }}</td>
                         <td>{{ "{:,.2f}".format(record.gross_total_income) }}</td>
                         <td>{{ "{:,.2f}".format(record.net_taxable_income) }}</td>
                         <td>{{ "{:,.2f}".format(record.total_tax_payable) }}</td>
                         <td>{{ "{:,.2f}".format(record.refund) }}</td>
                         <td class="action-cell">
                             <a href="{{ url_for('update_cit', id=record.id) }}" class="btn btn-update">Edit</a>
-
                             <form action="{{ url_for('delete_cit', id=record.id) }}" method="post"
                                 onsubmit="return confirm('Are you sure you want to delete this record?');">
                                 <button type="submit" class="btn btn-delete">Delete</button>
@@ -151,10 +46,16 @@
                 </tbody>
             </table>
         </div>
+
         {% else %}
-        <p style="text-align: center; margin-top: 20px;">No records found. Click the button above to add one!</p>
+        <p style="text-align: center; margin-top: 20px;" class="no-record">
+            No records found. Click the button above to add one!
+        </p>
         {% endif %}
     </div>
-</body>
+</div>
+{% endblock %}
 
-</html>
+{% block scripts %}
+<script src="{{ url_for('static', filename='js/toggle.js') }}"></script>
+{% endblock %}

templates/display_itat.html

@@ -1,122 +1,22 @@
-<!DOCTYPE html>
-<html lang="en">
+{% extends "base.html" %}
 
-<head>
-    <meta charset="UTF-8">
-    <title>ITAT Records</title>
-    <style>
-        body {
-            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-            background-color: #f8f9fa;
-            padding: 20px;
-            color: #333;
-        }
+{% block title %}ITAT Records{% endblock %}
 
-        .container {
-            max-width: 95%;
-            margin: auto;
-            background: white;
-            padding: 30px;
-            border-radius: 8px;
-            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-        }
+<!-- Load page-specific CSS -->
+{% block extra_css %}
+<link rel="stylesheet" href="{{ url_for('static', filename='css/display_itat.css') }}">
+{% endblock %}
 
-        h2 {
-            text-align: center;
-            margin-bottom: 20px;
-        }
-
-        .btn {
-            padding: 8px 15px;
-            border-radius: 5px;
-            text-decoration: none;
-            color: white;
-            border: none;
-            cursor: pointer;
-            font-size: 14px;
-        }
-
-        .btn-add {
-            background-color: #28a745;
-            display: inline-block;
-            margin-bottom: 20px;
-        }
-
-        .btn-update {
-            background-color: #007bff;
-        }
-
-        .btn-delete {
-            background-color: #dc3545;
-        }
-
-        .action-cell form {
-            display: inline-block;
-            margin-left: 5px;
-        }
-
-        .table-wrapper {
-            overflow-x: auto;
-        }
-
-        table {
-            width: 100%;
-            border-collapse: collapse;
-            margin-top: 20px;
-        }
-
-        th,
-        td {
-            padding: 12px;
-            border: 1px solid #dee2e6;
-            text-align: right;
-            white-space: nowrap;
-        }
-
-        th {
-            background-color: #343a40;
-            color: white;
-            text-align: center;
-        }
-
-        tr:nth-child(even) {
-            background-color: #f2f2f2;
-        }
-
-        td:first-child,
-        th:first-child {
-            text-align: left;
-        }
-
-        /* Back button styling */
-        .back-btn {
-            display: inline-block;
-            margin-bottom: 20px;
-            padding: 10px 18px;
-            background: #6c757d;
-            color: white;
-            font-size: 15px;
-            font-weight: 600;
-            border-radius: 6px;
-            text-decoration: none;
-            transition: background 0.3s ease;
-        }
-
-        .back-btn:hover {
-            background: #5a6268;
-        }
-    </style>
-</head>
-
-<body>
+{% block content %}
+<div class="main">
     <div class="container">
 
-        <!-- Back to Dashboard Button -->
-        <a href="{{ url_for('index') }}" class="back-btn">← Back to Dashboard</a>
+        <h2 style="text-align: center;">Income Tax Appellate Tribunal Records 📄</h2>
+        <div style="text-align: right; margin-bottom: 10px;">
 
-        <h2>ITAT Records 📄</h2>
             <a href="{{ url_for('add_itat') }}" class="btn btn-add">➕ Add New Record</a>
 
+            <!-- FLASH MESSAGES -->
             {% with messages = get_flashed_messages(with_categories=true) %}
             {% if messages %}
             {% for category, message in messages %}
@@ -125,6 +25,7 @@
             {% endif %}
             {% endwith %}
 
+            <!-- TABLE -->
             {% if records %}
             <div class="table-wrapper">
                 <table>
@@ -141,15 +42,15 @@
                     <tbody>
                         {% for record in records %}
                         <tr>
-                        <td>{{ record.year }}</td>
+                            <td>AY {{ record.year }}-{{ record.year+1 }}</td>
                             <td>{{ "{:,.2f}".format(record.mat_tax_credit) }}</td>
                             <td>{{ "{:,.2f}".format(record.surcharge) }}</td>
                             <td>{{ "{:,.2f}".format(record.cess) }}</td>
                             <td>{{ "{:,.2f}".format(record.total_credit) }}</td>
+
                             <td class="action-cell">
                                 <a href="{{ url_for('update_itat', id=record.id) }}" class="btn btn-update">Edit</a>
 
-
                                 <form action="{{ url_for('delete_itat', id=record.id) }}" method="post"
                                     onsubmit="return confirm('Are you sure you want to delete this record?');">
                                     <button type="submit" class="btn btn-delete">Delete</button>
@@ -160,10 +61,15 @@
                     </tbody>
                 </table>
             </div>
-        {% else %}
-        <p style="text-align: center; margin-top: 20px;">No ITAT records found. Click the button above to add one!</p>
-        {% endif %}
-    </div>
-</body>
 
-</html>
+            {% else %}
+            <p class="no-record">No ITAT records found. Click the button above to add one!</p>
+            {% endif %}
+
+        </div>
+    </div>
+    {% endblock %}
+
+    {% block scripts %}
+    <script src="{{ url_for('static', filename='js/toggle.js') }}"></script>
+    {% endblock %}

templates/display_itr.html

@@ -1,120 +1,18 @@
-<!DOCTYPE html>
-<html lang="en">
+{% extends "base.html" %}
 
-<head>
-    <meta charset="UTF-8">
-    <title>ITR Records</title>
-    <style>
-        body {
-            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-            background-color: #f8f9fa;
-            padding: 20px;
-            color: #333;
-        }
+{% block title %}ITR Records{% endblock %}
 
-        .container {
-            max-width: 95%;
-            margin: auto;
-            background: white;
-            padding: 30px;
-            border-radius: 8px;
-            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-        }
+{% block content %}
+<!-- Load only display_itr CSS -->
+<link rel="stylesheet" href="{{ url_for('static', filename='css/display_itr.css') }}">
 
-        h2 {
-            text-align: center;
-            margin-bottom: 20px;
-        }
 
-        .btn {
-            padding: 8px 15px;
-            border-radius: 5px;
-            text-decoration: none;
-            color: white;
-            border: none;
-            cursor: pointer;
-            font-size: 14px;
-        }
-
-        .btn-add {
-            background-color: #28a745;
-            display: inline-block;
-            margin-bottom: 20px;
-        }
-
-        .btn-update {
-            background-color: #007bff;
-        }
-
-        .btn-delete {
-            background-color: #dc3545;
-        }
-
-        .action-cell form {
-            display: inline-block;
-            margin-left: 5px;
-        }
-
-        .table-wrapper {
-            overflow-x: auto;
-        }
-
-        table {
-            width: 100%;
-            border-collapse: collapse;
-            margin-top: 20px;
-        }
-
-        th,
-        td {
-            padding: 12px;
-            border: 1px solid #dee2e6;
-            text-align: right;
-            white-space: nowrap;
-        }
-
-        th {
-            background-color: #343a40;
-            color: white;
-            text-align: center;
-        }
-
-        tr:nth-child(even) {
-            background-color: #f2f2f2;
-        }
-
-        td:first-child,
-        th:first-child {
-            text-align: left;
-        }
-
-        /* Back button styling */
-        .back-btn {
-            display: inline-block;
-            margin-bottom: 20px;
-            padding: 10px 18px;
-            background: #6c757d;
-            color: white;
-            font-size: 15px;
-            font-weight: 600;
-            border-radius: 6px;
-            text-decoration: none;
-            transition: background 0.3s ease;
-        }
-
-        .back-btn:hover {
-            background: #5a6268;
-        }
-    </style>
-</head>
-
-<body>
-    <div class="container">
-        <!-- Back to Dashboard Button -->
-        <a href="{{ url_for('index') }}" class="back-btn">← Back to Dashboard</a>
+<div class="container">
 
     <h2>Income Tax Return Records 🧾</h2>
+    <div style="text-align: right; margin-bottom: 10px;">
         <a href="{{ url_for('add_itr') }}" class="btn btn-add">➕ Add New Record</a>
+    </div>
 
     {% if records %}
     <div class="table-wrapper">
@@ -132,14 +30,13 @@
             <tbody>
                 {% for record in records %}
                 <tr>
-                        <td>{{ record.year }}</td>
+                    <td>AY {{ record.year }}-{{record.year+1}}</td>
                     <td>{{ "{:,.2f}".format(record.gross_total_income) }}</td>
                     <td>{{ "{:,.2f}".format(record.net_taxable_income) }}</td>
                     <td>{{ "{:,.2f}".format(record.total_tax_payable) }}</td>
                     <td>{{ "{:,.2f}".format(record.refund) }}</td>
                     <td class="action-cell">
                         <a href="{{ url_for('update_itr', id=record.id) }}" class="btn btn-update">Edit</a>
-
                         <form action="{{ url_for('delete_itr', id=record.id) }}" method="post"
                             onsubmit="return confirm('Are you sure you want to delete this record?');">
                             <button type="submit" class="btn btn-delete">Delete</button>
@@ -151,9 +48,9 @@
         </table>
     </div>
     {% else %}
-        <p style="text-align: center; margin-top: 20px;">No records found. Click the button above to add one!</p>
+    <p style="text-align: center; margin-top: 20px" class="no-record">
+        No records found. Click the button above to add one!
+    </p>
     {% endif %}
-    </div>
-</body>
-
-</html>
+</div>
+{% endblock %}

templates/index.html

@@ -1,146 +1,12 @@
-<!DOCTYPE html>
-<html lang="en">
+{% extends "base.html" %}
 
-<head>
-    <meta charset="UTF-8">
-    <title>Dashboard | Income Tax Utilities</title>
-    <link rel="stylesheet" href="{{ url_for('static', filename='index.css') }}">
-    <style>
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
+{% block title %}Dashboard | Income Tax Utilities{% endblock %}
 
-        body {
-            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-            background-color: #f4f7f6;
-            color: #333;
-            line-height: 1.6;
-        }
-
-        .container {
-            max-width: 750px;
-            margin: 50px auto;
-            padding: 40px;
-            background-color: #fff;
-            border-radius: 12px;
-            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
-        }
-
-        .header {
-            text-align: center;
-            margin-bottom: 40px;
-            font-size: 32px;
-            color: #2c3e50;
-            font-weight: 600;
-        }
-
-        .section {
-            margin-bottom: 35px;
-        }
-
-        .section h3 {
-            font-size: 22px;
-            color: #0056b3;
-            margin-bottom: 15px;
-            padding-bottom: 10px;
-            border-bottom: 2px solid #e9ecef;
-        }
-
-        ul {
-            list-style: none;
-            padding-left: 5px;
-        }
-
-        li {
-            margin: 15px 0;
-        }
-
-        a {
-            display: block;
-            text-decoration: none;
-            background-color: #007BFF;
-            color: white;
-            padding: 14px 20px;
-            border-radius: 8px;
-            font-size: 17px;
-            transition: all 0.3s ease;
-            box-shadow: 0 4px 6px rgba(0, 123, 255, 0.1);
-        }
-
-        a:hover {
-            background-color: #0056b3;
-            transform: translateY(-2px) scale(1.01);
-            box-shadow: 0 6px 12px rgba(0, 91, 179, 0.2);
-        }
-
-
-
-        /* Responsive */
-        @media (max-width: 600px) {
-            .container {
-                margin: 20px;
-                padding: 25px;
-            }
-
-            .header {
-                font-size: 26px;
-            }
-
-            a {
-                font-size: 16px;
-            }
-        }
-    </style>
-</head>
-
-<body>
-    <div class="container">
+{% block content %}
+<div class="container">
     <h2 class="header">Dashboard 🏛️</h2>
-
-        <div class="section">
-            <h3>ITR (Income Tax Return)</h3>
-            <ul>
-                <li><a href="{{ url_for('add_itr') }}">➕ Add New ITR Record</a></li>
-                <li><a href="{{ url_for('display_itr') }}">🧾 View & Manage ITR Records</a></li>
-            </ul>
-        </div>
-
-        <div class="section">
-            <h3>AO (Assessing Officer)</h3>
-            <ul>
-                <li><a href="{{ url_for('add_ao') }}">➕ Add New AO Record</a></li>
-                <li><a href="{{ url_for('display_ao') }}">🧾 View & Manage AO Records</a></li>
-            </ul>
-        </div>
-
-        <div class="section">
-            <h3>CIT (Commissioner of Income Tax)</h3>
-            <ul>
-                <li><a href="{{ url_for('add_cit') }}">➕ Add New CIT Record</a></li>
-                <li><a href="{{ url_for('display_cit') }}">🧾 View & Manage CIT Records</a></li>
-            </ul>
-        </div>
-
-        <div class="section">
-            <h3>ITAT (Income Tax Appellate Tribunal)</h3>
-            <ul>
-                <li><a href="{{ url_for('add_itat') }}">➕ Add New ITAT Record</a></li>
-                <li><a href="{{ url_for('display_itat') }}">🧾 View & Manage ITAT Records</a></li>
-            </ul>
-        </div>
-
-        <div class="section">
-            <h3>Documents & Reports 📂</h3>
-            <ul>
-                <li><a href="/upload">→ Upload Documents</a></li>
-                <li><a href="/documents">→ View Documents</a></li>
-                <li><a href="/reports">→ Generate Reports</a></li>
-                <li><a href="/summary_report">→ Generate Summary Reports</a></li>
-            </ul>
-        </div>
-    </div>
-</body>
-
-</html>
+    <p style="text-align: center; font-size: 20px;">
+        Welcome to Income Tax Utilities Dashboard
+    </p>
+</div>
+{% endblock %}

templates/itat_reports.html

@@ -1,83 +1,41 @@
-<!DOCTYPE html>
-<html>
+{% extends "base.html" %}
 
-<head>
-    <title>Download ITAT Reports</title>
-    <link rel="stylesheet" href="{{ url_for('static', filename='index.css') }}">
-    <style>
-        body {
-            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-            background-color: #f4f7f9;
-            margin: 0;
-            padding: 0;
-        }
+{% block title %}Download ITAT Report{% endblock %}
 
-        .container {
-            max-width: 600px;
-            margin: 60px auto;
-            padding: 30px;
-            background-color: white;
-            border-radius: 10px;
-            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
-            text-align: center;
-        }
+{% block extra_css %}
+<link rel="stylesheet" href="{{ url_for('static', filename='css/itat_report.css') }}">
+{% endblock %}
 
-        h2 {
-            color: #333;
-            margin-bottom: 30px;
-        }
-
-        label {
-            font-weight: 600;
-            margin-right: 10px;
-        }
-
-        select {
-            padding: 8px 12px;
-            border: 1px solid #ccc;
-            border-radius: 5px;
-            margin-bottom: 20px;
-            min-width: 200px;
-        }
-
-        button {
-            padding: 10px 20px;
-            background-color: #007bff;
-            color: white;
-            border: none;
-            border-radius: 5px;
-            cursor: pointer;
-        }
-
-        button:hover {
-            background-color: #0056b3;
-        }
-    </style>
-
-</head>
-
-<body>
+{% block content %}
+<div class="main">
     <div class="container">
-        <!-- Back to Dashboard Button -->
-        <a href="{{ url_for('index') }}" class="back-btn">← Back to Dashboard</a>
-
 
         <h2>Download ITAT Report</h2>
+
         <form method="GET" action="{{ url_for('itat_report') }}" target="_blank">
 
-            <label for="year">Select Year:</label>
-            <br>
+            <label for="year">Select Year:</label><br>
+
             <select name="year" id="year" required>
                 <option value="">-- Select Year --</option>
                 {% for y in years %}
-                <!-- <option value="{{ y }}">{{ y }}</option> -->
-                <option value="{{ y }}">AY {{ y }}-{{y +1 }}</option>
+                <option value="{{ y }}">AY {{ y }} - {{ y + 1 }}</option>
                 {% endfor %}
             </select>
-            <br><br>
-            <button type="submit">Download Excel</button>
-        </form>
-    </div>
-</body>
 
-</html>
+            <br>
+
+            <button type="submit">Download Excel</button>
+
+        </form>
+
+    </div>
+</div>
+{% block scripts %}
+<script src="{{ url_for('static', filename='js/year_dropdown.js') }}"></script>
+<script src="{{ url_for('static', filename='js/toggle.js') }}"></script>
+{% endblock %}
+
+{% block extra_js %}  <script src="{{ url_for('static', filename='js/year_dropdown.js') }}"></script>
+{% endblock %}
+{% endblock %}

templates/itr_reports.html

@@ -1,82 +1,42 @@
-<!DOCTYPE html>
-<html>
+{% extends "base.html" %}
 
-<head>
-    <title>Download ITR Reports</title>
-    <link rel="stylesheet" href="{{ url_for('static', filename='index.css') }}">
-    <style>
-        body {
-            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-            background-color: #f4f7f9;
-            margin: 0;
-            padding: 0;
-        }
+{% block title %}Download ITR Report{% endblock %}
 
-        .container {
-            max-width: 600px;
-            margin: 60px auto;
-            padding: 30px;
-            background-color: white;
-            border-radius: 10px;
-            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
-            text-align: center;
-        }
+{% block extra_css %}
+<link rel="stylesheet" href="{{ url_for('static', filename='css/itr_report.css') }}">
+{% endblock %}
 
-        h2 {
-            color: #333;
-            margin-bottom: 30px;
-        }
-
-        label {
-            font-weight: 600;
-            margin-right: 10px;
-        }
-
-        select {
-            padding: 8px 12px;
-            border: 1px solid #ccc;
-            border-radius: 5px;
-            margin-bottom: 20px;
-            min-width: 200px;
-        }
-
-        button {
-            padding: 10px 20px;
-            background-color: #007bff;
-            color: white;
-            border: none;
-            border-radius: 5px;
-            cursor: pointer;
-        }
-
-        button:hover {
-            background-color: #0056b3;
-        }
-    </style>
-</head>
-
-<body>
+{% block content %}
+<div class="main">
     <div class="container">
 
-        <!-- Back to Dashboard Button -->
-        <a href="{{ url_for('index') }}" class="back-btn">← Back to Dashboard</a>
-
         <h2>Download ITR Report</h2>
+
         <form method="GET" action="{{ url_for('itr_report') }}" target="_blank">
 
-            <label for="year">Select Year:</label>
-            <br>
+            <label for="year">Select Year:</label><br>
             <select name="year" id="year" required>
                 <option value="">-- Select Year --</option>
                 {% for y in years %}
-                <!-- <option value="{{ y }}">{{ y }}</option> -->
-                <option value="{{ y }}">AY {{ y }}-{{y +1 }}</option>
+                <option value="{{ y }}">AY {{ y }} - {{ y + 1 }}</option>
                 {% endfor %}
             </select>
-            <br><br>
-            <button type="submit">Download Excel</button>
-        </form>
-    </div>
-</body>
 
-</html>
+            <br>
+
+            <button type="submit">
+                Download Excel
+            </button>
+
+        </form>
+
+    </div>
+</div>
+{% block scripts %}
+<script src="{{ url_for('static', filename='js/year_dropdown.js') }}"></script>
+<script src="{{ url_for('static', filename='js/toggle.js') }}"></script>
+{% endblock %}
+
+{% block extra_js %}  <script src="{{ url_for('static', filename='js/year_dropdown.js') }}"></script>
+{% endblock %}
+{% endblock %}

templates/login.html

@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>LCEPL Income Tax</title>
+    <style>
+      body {
+        font-family: Arial, sans-serif;
+        background: #f3f3f3;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 100vh;
+      }
+
+      .login-container {
+        background: white;
+        padding: 2rem;
+        border-radius: 10px;
+        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
+        width: 300px;
+      }
+
+      h2 {
+        text-align: center;
+        margin-bottom: 1.5rem;
+      }
+
+      input[type="text"],
+      input[type="password"] {
+        width: 100%;
+        padding: 0.5rem;
+        margin-bottom: 1rem;
+        border: 1px solid #ccc;
+        border-radius: 5px;
+      }
+
+      button {
+        width: 100%;
+        padding: 0.5rem;
+        background: #007bff;
+        color: white;
+        border: none;
+        border-radius: 5px;
+        cursor: pointer;
+      }
+
+      .flash {
+        color: red;
+        text-align: center;
+        margin-bottom: 1rem;
+      }
+      .title {
+        text-align: center;
+        color: #007bff;
+      }
+
+      .subtitle {
+        text-align: center;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="login-container">
+      <h1 class="title">Laxmi Civil Engineering Services</h1>
+      <h4 class="subtitle">LOGIN</h4>
+
+      {% with messages = get_flashed_messages(with_categories=true) %} {% if
+      messages %} {% for category, message in messages %}
+      <div class="flash flash-{{ category }}">{{ message }}</div>
+      {% endfor %} {% endif %} {% endwith %}
+
+      <form method="post">
+        <input type="text" name="username" placeholder="Username" required />
+        <input
+          type="password"
+          name="password"
+          placeholder="Password"
+          required
+        />
+        <button type="submit">Login</button>
+      </form>
+    </div>
+  </body>
+</html>

templates/reports.html

@@ -1,154 +1,19 @@
-<!DOCTYPE html>
-<html>
+{% extends "base.html" %}
 
-<head>
-    <title>Reports Of Stages</title>
-    <link rel="stylesheet" href="{{ url_for('static', filename='index.css') }}">
-    <style>
-        body {
-            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-            background-color: #f4f7f9;
-            margin: 0;
-            padding: 0;
-        }
-
-        .container {
-            max-width: 900px;
-            margin: 40px auto;
-            padding: 30px;
-            background-color: white;
-            border-radius: 10px;
-            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
-        }
-
-        h2 {
-            color: #333;
-            text-align: center;
-            margin-bottom: 30px;
-        }
-
-        form {
-            display: flex;
-            justify-content: center;
-            gap: 20px;
-            margin-bottom: 30px;
-            flex-wrap: wrap;
-        }
-
-        label {
-            font-weight: 600;
-            margin-right: 5px;
-        }
-
-        select {
-            padding: 6px 10px;
-            border: 1px solid #ccc;
-            border-radius: 4px;
-        }
-
-        button {
-            padding: 6px 14px;
-            background-color: #007bff;
-            color: white;
-            border: none;
-            border-radius: 4px;
-            cursor: pointer;
-            transition: background-color 0.3s ease;
-        }
-
-        button:hover {
-            background-color: #0056b3;
-        }
-
-        table {
-            width: 100%;
-            border-collapse: collapse;
-            margin-top: 20px;
-        }
-
-        table,
-        th,
-        td {
-            border: 1px solid #ccc;
-        }
-
-        th {
-            background-color: #007bff;
-            color: white;
-            padding: 10px;
-            text-align: left;
-        }
-
-        td {
-            padding: 10px;
-            background-color: #f9f9f9;
-        }
-
-        tr:nth-child(even) td {
-            background-color: #eef3f7;
-        }
-
-        p {
-            text-align: center;
-            color: #777;
-        }
-
-        ul {
-            margin-top: 30px;
-            list-style: none;
-            padding-left: 0;
-            text-align: center;
-        }
-
-        ul li {
-            margin: 10px 0;
-        }
-
-        ul li a {
-            color: #007bff;
-            font-weight: 500;
-            text-decoration: none;
-        }
-
-        ul li a:hover {
-            text-decoration: none;
-        }
-
-
-        .back-btn {
-            display: inline-block;
-            margin-bottom: 20px;
-            padding: 10px 18px;
-            background: #6c757d;
-            color: white;
-            font-size: 15px;
-            font-weight: 600;
-            border-radius: 6px;
-            text-decoration: none;
-            transition: background 0.3s ease;
-        }
-
-        .back-btn:hover {
-            background: #5a6268;
-        }
-    </style>
-</head>
-
-<body>
+{% block title %}Reports Of Stages{% endblock %}
+{% block extra_css %}
+<link rel="stylesheet" href="{{ url_for('static', filename='css/report.css') }}">
+{% endblock %}
+{% block content %}
+<div class="main">
     <div class="container">
-        <!-- Back to Dashboard Button -->
-        <a href="{{ url_for('index') }}" class="back-btn">← Back to Dashboard</a>
-
         <h2>Reports</h2>
-
         <ul>
-            <li><a href="/itr_report">→ View ITR Reports</a></li>
-            <li><a href="/ao_report">→ View AO Reports</a></li>
-            <li><a href="/cit_report">→ View CIT Reports</a></li>
-            <li><a href="/itat_report">→ View ITAT Reports</a></li>
+            <li><a href="{{ url_for('itr_report') }}">→ View ITR Reports</a></li>
+            <li><a href="{{ url_for('ao_report') }}">→ View AO Reports</a></li>
+            <li><a href="{{ url_for('cit_report') }}">→ View CIT Reports</a></li>
+            <li><a href="{{ url_for('itat_report') }}">→ View ITAT Reports</a></li>
         </ul>
-
     </div>
-</body>
-
-</html>
+</div>
+{% endblock %}

templates/stage_reports.html

@@ -128,7 +128,7 @@
 <body>
     <div class="container">
         <!-- Back to Dashboard Button -->
-        <a href="{{ url_for('index') }}" class="back-btn">← Back to Dashboard</a>
+<!--        <a href="{{ url_for('index') }}" class="back-btn">← Back to Dashboard</a>-->
 
         <h2>{{ stage }} Reports</h2>
 

templates/summary_reports.html

@@ -1,90 +1,17 @@
-<!DOCTYPE html>
-<html>
+{% extends "base.html" %}
 
-<head>
-    <title>Download Summary Report</title>
-    <style>
-        body {
-            font-family: Arial, sans-serif;
-            background-color: #f4f4f4;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            height: 100vh;
-        }
+{% block title %}Download Summary Report{% endblock %}
 
-        .container {
-            background-color: white;
-            padding: 30px 40px;
-            border-radius: 10px;
-            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
-            text-align: center;
-        }
+{% block extra_css %}
+<!-- Optional: Add page-specific CSS -->
+<link rel="stylesheet" href="{{ url_for('static', filename='css/summary.css') }}">
+{% endblock %}
 
-        h2 {
-            margin-bottom: 20px;
-            color: #333;
-        }
-
-        form {
-            margin-top: 20px;
-        }
-
-        label {
-            font-weight: bold;
-            margin-right: 10px;
-        }
-
-        select {
-            padding: 8px 12px;
-            border: 1px solid #ccc;
-            border-radius: 5px;
-            margin-right: 10px;
-        }
-
-        button {
-            padding: 10px 16px;
-            background-color: #007bff;
-            color: white;
-            border: none;
-            border-radius: 5px;
-            cursor: pointer;
-        }
-
-        button:hover {
-            background-color: #0056b3;
-        }
-
-        .message {
-            color: rgb(0, 0, 0);
-            margin-top: 15px;
-        }
-
-
-        /* Back button styling */
-        .back-btn {
-            display: inline-block;
-            margin-bottom: 20px;
-            padding: 10px 18px;
-            background: #6c757d;
-            color: white;
-            font-size: 15px;
-            font-weight: 600;
-            border-radius: 6px;
-            text-decoration: none;
-            transition: background 0.3s ease;
-        }
-
-        .back-btn:hover {
-            background: #5a6268;
-        }
-    </style>
-</head>
-
-<body>
+{% block content %}
+<div class="main">
     <div class="container">
-        <!-- Back to Dashboard Button -->
-        <a href="{{ url_for('index') }}" class="back-btn">← Back to Dashboard</a>
+
+<!--        <a href="{{ url_for('index') }}" class="back-btn">← Back to Dashboard</a>-->
 
         <h2>Download Year-wise Summary Report</h2>
 
@@ -93,18 +20,24 @@
         {% endif %}
 
         <form method="GET" action="{{ url_for('summary_report') }}">
-            <label for="year">Select Year:</label>
+            <label>Select Year:</label>
             <select name="year" id="year" required>
                 <option value="">-- Select Year --</option>
                 {% for year in years %}
-                <!-- <option value="{{ year }}">{{ year }}</option> -->
-                <option value="{{ year }}">AY {{ year }}-{{year +1 }}</option>
-
+                <option value="{{ year }}">AY {{ year }}-{{ year + 1 }}</option>
                 {% endfor %}
             </select>
+
             <button type="submit">Download Summary Report</button>
         </form>
-    </div>
-</body>
 
-</html>
+    </div>
+</div>
+{% block scripts %}
+<script src="{{ url_for('static', filename='js/year_dropdown.js') }}"></script>
+<script src="{{ url_for('static', filename='js/toggle.js') }}"></script>
+{% endblock %}
+
+{% block extra_js %}  <script src="{{ url_for('static', filename='js/year_dropdown.js') }}"></script>
+{% endblock %}
+{% endblock %}

templates/update_ao.html

@@ -1,28 +1,48 @@
-<!DOCTYPE html>
-<html lang="en">
+{% extends "base.html" %}
 
-<head>
-    <meta charset="UTF-8">
-    <title>Update AO Record</title>
-    <link rel="stylesheet" href="{{ url_for('static', filename='index.css') }}">
+{% block title %}Update AO Record{% endblock %}
 
-</head>
+{% block extra_css %}
+<link rel="stylesheet" href="{{ url_for('static', filename='css/add_ao.css') }}">
+{% endblock %}
 
-<body>
+{% block content %}
+<div class="main">
     <div class="container">
-        <!-- Back to Dashboard Button -->
-        <a href="{{ url_for('index') }}" class="back-btn">← Back to Dashboard</a>
 
         <h2>Update AO Record for Year {{ record.year }}</h2>
+
         <form method="POST" action="{{ url_for('update_ao', id=record.id) }}">
-            {% for field in record.keys() if field != 'id' %}
-            <label>{{ field.replace("_", " ").title() }}:</label>
-            <input type="number" step="any" name="{{ field }}" value="{{ record[field] }}" required>
+
+            <label for="year">Year:</label>
+            <input type="text" id="year" name="year" value="{{ record.year }}" readonly class="readonly-field">
+
+            {% for field in record.keys() if field not in ['id', 'year'] %}
+            <label for="{{ field }}">{{ field.replace("_", " ").title() }}:</label>
+            <input type="number" id="{{ field }}" name="{{ field }}" step="any" value="{{ record[field] }}" required>
             {% endfor %}
+
+            <!--            {% for field in record.keys() if field != 'id' %}-->
+            <!--            <label for="{{ field }}">{{ field.replace("_", " ").title() }}:</label>-->
+            <!--            <input -->
+            <!--                type="number" -->
+            <!--                id="{{ field }}" -->
+            <!--                name="{{ field }}" -->
+            <!--                step="any" -->
+            <!--                value="{{ record[field] }}" -->
+            <!--                required>-->
+            <!--            {% endfor %}-->
+
             <button type="submit">Update Record</button>
+
         </form>
 
     </div>
-</body>
+</div>
+{% endblock %}
 
-</html>
+{% block extra_js %}
+<script src="{{ url_for('static', filename='js/toggle.js') }}"></script>
+<script src="{{ url_for('static', filename='js/cit_calc.js') }}"></script>
+<script src="{{ url_for('static', filename='js/year_dropdown.js') }}"></script>
+{% endblock %}

templates/update_cit.html

@@ -1,26 +1,49 @@
-<!DOCTYPE html>
-<html lang="en">
+{% extends "base.html" %}
 
-<head>
-    <meta charset="UTF-8">
-    <title>Update CIT Record</title>
-    <link rel="stylesheet" href="{{ url_for('static', filename='index.css') }}">
-</head>
+{% block title %}Update CIT Record{% endblock %}
 
-<body>
-    <div class="container">
-        <!-- Back to Dashboard Button -->
-        <a href="{{ url_for('index') }}" class="back-btn">← Back to Dashboard</a>
+{% block extra_css %}
+<link rel="stylesheet" href="{{ url_for('static', filename='css/add_cit.css') }}">
+{% endblock %}
+
+{% block content %}
+
+<div class="container">
+
+    <h2>Update CIT Record for AY {{ record.year }}</h2>
 
-        <h2>Update CIT Record for Year {{ record.year }}</h2>
     <form method="POST" action="{{ url_for('update_cit', id=record.id) }}">
-            {% for field in record.keys() if field != 'id' %}
-            <label>{{ field.replace("_", " ").title() }}:</label>
-            <input type="number" name="{{ field }}" step="0.01" value="{{ record[field] }}" required>
-            {% endfor %}
-            <button type="submit">Update Record</button>
-        </form>
-    </div>
-</body>
 
-</html>
+        <label for="year">Year:</label>
+        <input type="text" id="year" name="year" value="{{ record.year }}" readonly class="readonly-field">
+
+        {% for field in record.keys() if field not in ['id', 'year'] %}
+        <label for="{{ field }}">{{ field.replace("_", " ").title() }}:</label>
+        <input type="number" id="{{ field }}" name="{{ field }}" step="any" value="{{ record[field] }}" required>
+        {% endfor %}
+
+        <!--        {% for field in record.keys() if field != 'id' %}-->
+        <!--        <label for="{{ field }}">{{ field.replace('_', ' ').title() }}:</label>-->
+        <!--        <input -->
+        <!--            type="number" -->
+        <!--            step="0.01" -->
+        <!--            id="{{ field }}" -->
+        <!--            name="{{ field }}" -->
+        <!--            value="{{ record[field] }}" -->
+        <!--            required -->
+        <!--        />-->
+        <!--        {% endfor %}-->
+
+        <button type="submit">Update Record</button>
+
+    </form>
+
+</div>
+
+{% endblock %}
+
+{% block extra_js %}
+<script src="{{ url_for('static', filename='js/toggle.js') }}"></script>
+<script src="{{ url_for('static', filename='js/cit_calc.js') }}"></script>
+<script src="{{ url_for('static', filename='js/year_dropdown.js') }}"></script>
+{% endblock %}

templates/update_itat.html

@@ -1,20 +1,19 @@
-<!DOCTYPE html>
-<html>
+{% extends "base.html" %}
+{% block title %}Update ITAT Record{% endblock %}
+{% block extra_css %}
+<!-- Child page CSS -->
+<link rel="stylesheet" href="{{ url_for('static', filename='css/add_itat.css') }}">
+{% endblock %}
+{% block content %}
 
-<head>
-    <title>Update ITAT Record</title>
-    <link rel="stylesheet" href="{{ url_for('static', filename='index.css') }}">
-</head>
-
-<body>
-    <div class="container">
-        <!-- Back to Dashboard Button -->
-        <a href="{{ url_for('index') }}" class="back-btn">← Back to Dashboard</a>
+<div class="container">
 
     <h2>Update ITAT Record for Year {{ record.year }}</h2>
+
     <form method="POST" action="{{ url_for('update_itat', id=record.id) }}">
+
         <label>Year:</label>
-            <input type="number" name="year" step="1" value="{{ record.year }}" required>
+        <input type="number" name="year" step="1" value="{{ record.year }}" readonly>
 
         <label>MAT Tax Credit:</label>
         <input type="number" name="mat_tax_credit" step="0.01" value="{{ record.mat_tax_credit }}" required>
@@ -30,7 +29,13 @@
 
         <button type="submit">Update Record</button>
     </form>
-    </div>
-</body>
 
-</html>
+</div>
+
+{% endblock %}
+
+{% block extra_js %}
+<script src="{{ url_for('static', filename='js/toggle.js') }}"></script>
+<script src="{{ url_for('static', filename='js/cit_calc.js') }}"></script>
+<script src="{{ url_for('static', filename='js/year_dropdown.js') }}"></script>
+{% endblock %}

templates/update_itr.html

@@ -1,26 +1,48 @@
-<!DOCTYPE html>
-<html lang="en">
+{% extends "base.html" %}
 
-<head>
-    <meta charset="UTF-8">
-    <title>Update ITR Record</title>
-    <link rel="stylesheet" href="{{ url_for('static', filename='index.css') }}">
+{% block title %}Update ITR Record{% endblock %}
 
-</head>
+{% block extra_css %}
+<link rel="stylesheet" href="{{ url_for('static', filename='css/add_itr.css') }}">
+{% endblock %}
 
-<body>
+{% block content %}
+<div class="main">
     <div class="container">
-        <!-- Back to Dashboard Button -->
-        <a href="{{ url_for('index') }}" class="back-btn">← Back to Dashboard</a>
-        <h2>Update ITR Record for Year {{ record.year }}</h2>
-        <form method="POST" action="{{ url_for('update_itr', id=record.id) }}">
-            {% for field in record.keys() if field != 'id' %}
-            <label>{{ field.replace("_", " ").title() }}:</label>
-            <input type="number" name="{{ field }}" step="any" value="{{ record[field] }}" required>
-            {% endfor %}
-            <button type="submit">Update Record</button>
-        </form>
-    </div>
-</body>
 
-</html>
+        <h2>Update ITR Record for Year {{ record.year }}</h2>
+
+        <form method="POST" action="{{ url_for('update_itr', id=record.id) }}">
+
+            <label for="year">Year:</label>
+            <input type="text" id="year" name="year" value="{{ record.year }}" readonly class="readonly-field">
+
+            {% for field in record.keys() if field not in ['id', 'year'] %}
+            <label for="{{ field }}">{{ field.replace("_", " ").title() }}:</label>
+            <input type="number" id="{{ field }}" name="{{ field }}" step="any" value="{{ record[field] }}" required>
+            {% endfor %}
+
+            <!--            {% for field in record.keys() if field != 'id' %}-->
+            <!--            <label for="{{ field }}">{{ field.replace("_", " ").title() }}:</label>-->
+            <!--            <input -->
+            <!--                type="number" -->
+            <!--                id="{{ field }}" -->
+            <!--                name="{{ field }}" -->
+            <!--                step="any" -->
+            <!--                value="{{ record[field] }}" -->
+            <!--                required>-->
+            <!--            {% endfor %}-->
+
+            <button type="submit">Update Record</button>
+
+        </form>
+
+    </div>
+</div>
+{% endblock %}
+
+{% block extra_js %}
+<script src="{{ url_for('static', filename='js/toggle.js') }}"></script>
+<script src="{{ url_for('static', filename='js/cit_calc.js') }}"></script>
+<script src="{{ url_for('static', filename='js/year_dropdown.js') }}"></script>
+{% endblock %}

templates/upload.html

@@ -1,42 +1,47 @@
-<!DOCTYPE html>
-<html>
+{% extends "base.html" %}
 
-<head>
-    <title>Upload Documents</title>
-    <link rel="stylesheet" href="{{ url_for('static', filename='index.css') }}">
-    <script src="/static/js/year_dropdown.js"></script>
-</head>
+{% block title %}Upload Documents{% endblock %}
 
-<body>
+{% block extra_css %}
+<link rel="stylesheet" href="{{ url_for('static', filename='css/upload.css') }}">
+{% endblock %}
+
+{% block content %}
+<div class="main">
     <div class="container">
 
-        <!-- Back to Dashboard Button -->
-        <a href="{{ url_for('index') }}" class="back-btn">← Back to Dashboard</a>
-
         <h2>Upload Income Tax Documents</h2>
-        <form method="POST" enctype="multipart/form-data">
-            <!-- <label for="year">Year:</label>
-            <input type="number" name="year" required> -->
 
-            <div class="form-group">
+        <form id="income_tax_documents" method="POST" enctype="multipart/form-data">
+
             <label>Year:</label>
             <select id="year" name="year" required></select>
-            </div>
-            <div class="form-group">
-                <label for="stage">Stage:</label>
+
+            <div id="yearError" style="color: red; display: none; margin-bottom: 10px;"></div>
+
+            <label>Stage:</label>
             <select name="stage" required>
                 <option value="ITR">ITR</option>
                 <option value="AO">AO</option>
                 <option value="CIT">CIT</option>
                 <option value="ITAT">ITAT</option>
             </select>
-            </div>
-            <label for="documents">Select Documents:</label>
+
+            <label>Select Documents:</label>
             <input type="file" name="documents" multiple required>
 
             <button type="submit">Upload</button>
         </form>
-    </div>
-</body>
 
-</html>
+    </div>
+</div>
+{% endblock %}
+
+{% block scripts %}
+<script src="{{ url_for('static', filename='js/year_dropdown.js') }}"></script>
+<script src="{{ url_for('static', filename='js/toggle.js') }}"></script>
+{% endblock %}
+
+{% block extra_js %}
+<script src="{{ url_for('static', filename='js/year_dropdown.js') }}"></script>
+{% endblock %}

templates/view_docs.html

@@ -1,148 +1,25 @@
-<!DOCTYPE html>
-<html>
+{% extends "base.html" %}
 
-<head>
-    <title>View Documents</title>
-    <style>
-        body {
-            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-            background-color: #f4f7f9;
-            margin: 0;
-            padding: 0;
-        }
+{% block title %}Document Records{% endblock %}
 
-        .container {
-            max-width: 1200px;
-            margin: 40px auto;
-            background: #fff;
-            padding: 30px 40px;
-            border-radius: 10px;
-            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-        }
+{% block extra_css %}
+<link rel="stylesheet" href="{{ url_for('static', filename='css/documents.css') }}">
+{% endblock %}
 
-        h2 {
-            text-align: center;
-            color: #2c3e50;
-            margin-bottom: 30px;
-        }
+{% block content %}
 
-        form {
-            display: flex;
-            justify-content: center;
-            gap: 20px;
-            flex-wrap: wrap;
-            margin-bottom: 30px;
-        }
-
-        label {
-            font-weight: 600;
-            color: #34495e;
-        }
-
-        select {
-            padding: 8px 12px;
-            border: 1px solid #ccc;
-            border-radius: 5px;
-            font-size: 14px;
-            background-color: #fff;
-        }
-
-        button {
-            padding: 10px 20px;
-            background-color: #3498db;
-            color: white;
-            border: none;
-            border-radius: 5px;
-            font-weight: bold;
-            cursor: pointer;
-            transition: background-color 0.3s ease;
-        }
-
-        button:hover {
-            background-color: #2980b9;
-        }
-
-        table {
-            width: 100%;
-            border-collapse: collapse;
-            margin-top: 10px;
-        }
-
-        thead {
-            background-color: #2c3e50;
-            color: white;
-        }
-
-        th,
-        td {
-            padding: 12px 15px;
-            border: 1px solid #ddd;
-            text-align: center;
-        }
-
-        tbody tr:nth-child(even) {
-            background-color: #f9f9f9;
-        }
-
-        tbody tr:hover {
-            background-color: #f1f1f1;
-        }
-
-        a {
-            color: #2980b9;
-            text-decoration: none;
-            font-weight: 600;
-        }
-
-        a:hover {
-            text-decoration: underline;
-        }
-
-        /* Back button styling */
-        .back-btn {
-            display: inline-block;
-            margin-bottom: 20px;
-            padding: 10px 18px;
-            background: #6c757d;
-            color: white;
-            font-size: 15px;
-            font-weight: 600;
-            border-radius: 6px;
-            text-decoration: none;
-            transition: background 0.3s ease;
-        }
-
-        .back-btn:hover {
-            background: #5a6268;
-        }
-
-        @media (max-width: 768px) {
-            form {
-                flex-direction: column;
-                align-items: center;
-            }
-
-            .container {
-                padding: 20px;
-            }
-        }
-    </style>
-</head>
-
-<body>
+<div class="main">
     <div class="container">
 
-        <!-- Back to Dashboard Button -->
-        <a href="{{ url_for('index') }}" class="back-btn">← Back to Dashboard</a>
-
         <h2>Document Records</h2>
 
+        <!-- FILTER FORM -->
         <form method="GET">
             <label for="year">Filter by Year:</label>
             <select name="year">
                 <option value="">All</option>
                 {% for y in years %}
-                <option value="{{ y }}">{{ y }}</option>
+                <option value="{{ y }}">AY {{ y }}-{{ y+1 }}</option>
                 {% endfor %}
             </select>
 
@@ -158,6 +35,7 @@
             <button type="submit">Apply</button>
         </form>
 
+        <!-- DOCUMENT TABLE -->
         <table>
             <thead>
                 <tr>
@@ -170,22 +48,33 @@
                     <th>View</th>
                 </tr>
             </thead>
+
             <tbody>
                 {% for doc in documents %}
                 <tr>
                     <td>{{ doc.filename }}</td>
                     <td>{{ doc.filetype }}</td>
                     <td>{{ doc.stage }}</td>
-                    <td>{{ doc.year }}</td>
+                    <td>AY {{ doc.year }}-{{ doc.year +1 }}</td>
                     <td>{{ doc.uploaded_at }}</td>
-                    <td><a href="{{ url_for('uploaded_file', filename=doc.filename) }}?mode=download">Download</a></td>
-                    <td><a href="{{ url_for('uploaded_file', filename=doc.filename) }}?mode=view"
-                            target="_blank">View</a></td>
+
+                    <td>
+                        <a href="{{ url_for('uploaded_file', filename=doc.filename) }}?mode=download">
+                            Download
+                        </a>
+                    </td>
+
+                    <td>
+                        <a href="{{ url_for('uploaded_file', filename=doc.filename) }}?mode=view" target="_blank">
+                            View
+                        </a>
+                    </td>
                 </tr>
                 {% endfor %}
             </tbody>
         </table>
-    </div>
-</body>
 
-</html>
+    </div>
+</div>
+
+{% endblock %}