From 21e3fa1287e60e95c0ddd815798462f591c74fc2 Mon Sep 17 00:00:00 2001
From: yoganandhank <yogalinking@gmail.com>
Date: Sat, 18 Jul 2026 17:49:09 +0530
Subject: [PATCH] UI and apis changes in payment tracker and toner management
 project

---
 .../controller/TonerController.java           |  159 +-
 .../service/TonerService.java                 |  186 +-
 .../gccservicepaymenttracker/dashboard.html   |  749 ++++++--
 .../templates/gcctonermanagement/upload.html  | 1683 +++++++++++++----
 4 files changed, 2169 insertions(+), 608 deletions(-)

diff --git a/src/main/java/com/gcc_manpower/gcctonermanagement/controller/TonerController.java b/src/main/java/com/gcc_manpower/gcctonermanagement/controller/TonerController.java
index dc527ed..4751d63 100644
--- a/src/main/java/com/gcc_manpower/gcctonermanagement/controller/TonerController.java
+++ b/src/main/java/com/gcc_manpower/gcctonermanagement/controller/TonerController.java
@@ -110,16 +110,14 @@ public class TonerController {
         return tonerService.getActiveTonersByPrinter(pid);
     }
 
-    @PostMapping("/api/upload")
+    @PostMapping("/api/inward")
     @ResponseBody
-    public Map<String, Object> uploadToner(
+    public Map<String, Object> uploadInward(
             @RequestParam("companyName") String companyName,
             @RequestParam("pid") int pid,
             @RequestParam("tid") int tid,
             @RequestParam("qty") String qty,
             @RequestParam(value = "dcFile", required = false) MultipartFile dcFile,
-            @RequestParam(value = "userRequestFile", required = false) MultipartFile userRequestFile,
-            @RequestParam(value = "finalDeliveredFile", required = false) MultipartFile finalDeliveredFile,
             HttpSession session) {
 
         Map<String, Object> response = new HashMap<>();
@@ -130,17 +128,108 @@ public class TonerController {
             return response;
         }
 
-        // Validate PDF extension on non-empty files
         if (dcFile != null && !dcFile.isEmpty() && !isPdfFile(dcFile)) {
             response.put("success", false);
             response.put("error", "Delivery Challan file must be a PDF.");
             return response;
         }
+
+        try {
+            File uploadDir = new File(tonerUploadPathConfig).getAbsoluteFile();
+            if (!uploadDir.exists()) {
+                uploadDir.mkdirs();
+            }
+
+            String dcPath = saveUploadedFile(dcFile, "dc", uploadDir);
+
+            boolean saved = tonerService.saveInwardRegister(
+                    companyName.trim(), pid, tid, qty.trim(), dcPath, username);
+
+            if (saved) {
+                response.put("success", true);
+                response.put("message", "Inward stock registered successfully.");
+            } else {
+                deleteFileIfExists(dcPath, uploadDir);
+                response.put("success", false);
+                response.put("error", "Failed to save inward details in the database.");
+            }
+        } catch (Exception e) {
+            response.put("success", false);
+            response.put("error", "An error occurred: " + e.getMessage());
+            e.printStackTrace();
+        }
+        return response;
+    }
+
+    @PostMapping("/api/request")
+    @ResponseBody
+    public Map<String, Object> uploadRequest(
+            @RequestParam("itcellRefNo") String itcellRefNo,
+            @RequestParam("deptId") String deptId,
+            @RequestParam("pid") int pid,
+            @RequestParam("tid") int tid,
+            @RequestParam("qtyRequested") String qtyRequested,
+            @RequestParam(value = "userRequestFile", required = false) MultipartFile userRequestFile,
+            HttpSession session) {
+
+        Map<String, Object> response = new HashMap<>();
+        String username = (String) session.getAttribute("toner_usrName");
+        if (username == null) {
+            response.put("success", false);
+            response.put("error", "Unauthorized access. Please log in.");
+            return response;
+        }
+
         if (userRequestFile != null && !userRequestFile.isEmpty() && !isPdfFile(userRequestFile)) {
             response.put("success", false);
             response.put("error", "User Request file must be a PDF.");
             return response;
         }
+
+        try {
+            File uploadDir = new File(tonerUploadPathConfig).getAbsoluteFile();
+            if (!uploadDir.exists()) {
+                uploadDir.mkdirs();
+            }
+
+            String urPath = saveUploadedFile(userRequestFile, "user_request", uploadDir);
+
+            String reqNo = tonerService.saveUserRequest(
+                    itcellRefNo.trim(), deptId.trim(), pid, tid, qtyRequested.trim(), urPath, username);
+
+            if (reqNo != null) {
+                response.put("success", true);
+                response.put("reqNo", reqNo);
+                response.put("message", "User request saved successfully.");
+            } else {
+                deleteFileIfExists(urPath, uploadDir);
+                response.put("success", false);
+                response.put("error", "Failed to save request details in the database.");
+            }
+        } catch (Exception e) {
+            response.put("success", false);
+            response.put("error", "An error occurred: " + e.getMessage());
+            e.printStackTrace();
+        }
+        return response;
+    }
+
+    @PostMapping("/api/outward")
+    @ResponseBody
+    public Map<String, Object> uploadOutward(
+            @RequestParam("id") int id,
+            @RequestParam("qtyIssued") String qtyIssued,
+            @RequestParam(value = "finalDeliveredFile", required = false) MultipartFile finalDeliveredFile,
+            HttpSession session) {
+
+        Map<String, Object> response = new HashMap<>();
+        String username = (String) session.getAttribute("toner_usrName");
+        if (username == null) {
+            response.put("success", false);
+            response.put("error", "Unauthorized access. Please log in.");
+            return response;
+        }
+
         if (finalDeliveredFile != null && !finalDeliveredFile.isEmpty() && !isPdfFile(finalDeliveredFile)) {
             response.put("success", false);
             response.put("error", "Final Delivered file must be a PDF.");
@@ -153,41 +242,59 @@ public class TonerController {
                 uploadDir.mkdirs();
             }
 
-            // Save files
-            String dcPath = saveUploadedFile(dcFile, "dc", uploadDir);
-            String userRequestPath = saveUploadedFile(userRequestFile, "user_request", uploadDir);
-            String finalDeliveredPath = saveUploadedFile(finalDeliveredFile, "final_delivered", uploadDir);
-
-            boolean saved = tonerService.saveInventoryDetails(
-                    companyName.trim(),
-                    pid,
-                    tid,
-                    qty.trim(),
-                    dcPath,
-                    userRequestPath,
-                    finalDeliveredPath,
-                    username);
+            String fdPath = saveUploadedFile(finalDeliveredFile, "final_delivered", uploadDir);
+
+            boolean saved = tonerService.saveOutwardRegister(
+                    id, qtyIssued.trim(), fdPath, username);
 
             if (saved) {
                 response.put("success", true);
-                response.put("message", "Toner details saved successfully.");
+                response.put("message", "Outward delivery recorded successfully.");
             } else {
-                // Delete newly saved files on DB insert failure
-                deleteFileIfExists(dcPath, uploadDir);
-                deleteFileIfExists(userRequestPath, uploadDir);
-                deleteFileIfExists(finalDeliveredPath, uploadDir);
+                deleteFileIfExists(fdPath, uploadDir);
                 response.put("success", false);
-                response.put("error", "Failed to save registration details in the database.");
+                response.put("error", "Failed to update outward details in the database.");
             }
         } catch (Exception e) {
             response.put("success", false);
-            response.put("error", "An error occurred during saving: " + e.getMessage());
+            response.put("error", "An error occurred: " + e.getMessage());
             e.printStackTrace();
         }
+        return response;
+    }
 
+    @GetMapping("/api/report")
+    @ResponseBody
+    public Map<String, Object> getReportData(HttpSession session) {
+        Map<String, Object> response = new HashMap<>();
+        if (session.getAttribute("toner_usrName") == null) {
+            response.put("success", false);
+            return response;
+        }
+        response.put("success", true);
+        response.put("metrics", tonerService.getDashboardMetrics());
+        response.put("summary", tonerService.getInventorySummary());
         return response;
     }
 
+    @GetMapping("/api/requests/pending")
+    @ResponseBody
+    public List<Map<String, Object>> getPendingRequestsData(HttpSession session) {
+        if (session.getAttribute("toner_usrName") == null) {
+            return java.util.Collections.emptyList();
+        }
+        return tonerService.getPendingRequests();
+    }
+
+    @GetMapping("/api/outward/list")
+    @ResponseBody
+    public List<Map<String, Object>> getOutwardListData(HttpSession session) {
+        if (session.getAttribute("toner_usrName") == null) {
+            return java.util.Collections.emptyList();
+        }
+        return tonerService.getOutwardHistory();
+    }
+
     private boolean isPdfFile(MultipartFile file) {
         String originalFilename = file.getOriginalFilename();
         if (originalFilename == null)
diff --git a/src/main/java/com/gcc_manpower/gcctonermanagement/service/TonerService.java b/src/main/java/com/gcc_manpower/gcctonermanagement/service/TonerService.java
index 76a783f..548616b 100644
--- a/src/main/java/com/gcc_manpower/gcctonermanagement/service/TonerService.java
+++ b/src/main/java/com/gcc_manpower/gcctonermanagement/service/TonerService.java
@@ -1,6 +1,7 @@
 package com.gcc_manpower.gcctonermanagement.service;
 
 import java.util.ArrayList;
+import java.util.HashMap;
 import java.util.List;
 import java.util.Map;
 
@@ -21,6 +22,50 @@ public class TonerService {
         this.jdbcTemplate = new JdbcTemplate(dataSource);
     }
 
+    @jakarta.annotation.PostConstruct
+    public void initTables() {
+        try {
+            jdbcTemplate.execute("CREATE TABLE IF NOT EXISTS stock_register_details (" +
+                    "id INT AUTO_INCREMENT PRIMARY KEY, " +
+                    "company_name VARCHAR(30), " +
+                    "pid VARCHAR(20), " +
+                    "tid VARCHAR(30), " +
+                    "qty_registered VARCHAR(30), " +
+                    "dc_upload VARCHAR(250), " +
+                    "cdate TIMESTAMP DEFAULT CURRENT_TIMESTAMP, " +
+                    "updated_date TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP, " +
+                    "order_by VARCHAR(45), " +
+                    "is_active TINYINT DEFAULT 1, " +
+                    "is_delete TINYINT DEFAULT 0" +
+                    ")");
+
+            jdbcTemplate.execute("CREATE TABLE IF NOT EXISTS department_requested_details (" +
+                    "id INT AUTO_INCREMENT PRIMARY KEY, " +
+                    "req_no VARCHAR(70), " +
+                    "company_name VARCHAR(30), " +
+                    "itcell_ref_no VARCHAR(45), " +
+                    "dept_id VARCHAR(30), " +
+                    "pid VARCHAR(20), " +
+                    "tid VARCHAR(30), " +
+                    "qty_registered VARCHAR(30), " +
+                    "qty_requested VARCHAR(30), " +
+                    "qty_delivered VARCHAR(30), " +
+                    "dc_upload VARCHAR(250), " +
+                    "user_request_upload VARCHAR(250), " +
+                    "final_delivered_upload VARCHAR(250), " +
+                    "cdate TIMESTAMP DEFAULT CURRENT_TIMESTAMP, " +
+                    "updated_date TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP, " +
+                    "updated_by VARCHAR(45), " +
+                    "order_by VARCHAR(45), " +
+                    "is_active TINYINT DEFAULT 1, " +
+                    "is_delete TINYINT DEFAULT 0" +
+                    ")");
+        } catch (Exception e) {
+            System.err.println("Error initializing tables: " + e.getMessage());
+            e.printStackTrace();
+        }
+    }
+
     public List<Map<String, Object>> getActivePrinters() {
         String sql = "SELECT id, printer_name FROM printer_model_list where is_active = 1 AND is_delete = 0 ";
         try {
@@ -51,47 +96,148 @@ public class TonerService {
         }
     }
 
-    public int getMaxInventoryId() {
-        String sql = "SELECT COALESCE(MAX(id), 0) FROM inventory_registered_details";
+    public boolean saveInwardRegister(String companyName, int pid, int tid, String qty, String dcUpload, String username) {
+        String sql = "INSERT INTO stock_register_details " +
+                "(company_name, pid, tid, qty_registered, dc_upload, cdate, updated_date, order_by, is_active, is_delete) " +
+                "VALUES (?, ?, ?, ?, ?, ?, ?, ?, 1, 0)";
+        java.sql.Timestamp now = new java.sql.Timestamp(System.currentTimeMillis());
+        try {
+            int rows = jdbcTemplate.update(sql, companyName, String.valueOf(pid), String.valueOf(tid), qty, dcUpload, now, now, username);
+            return rows > 0;
+        } catch (Exception e) {
+            System.err.println("Error saving inward register: " + e.getMessage());
+            e.printStackTrace();
+            return false;
+        }
+    }
+
+    public int getMaxRequestId() {
+        String sql = "SELECT COALESCE(MAX(id), 0) FROM department_requested_details";
         try {
             return jdbcTemplate.queryForObject(sql, Integer.class);
         } catch (Exception e) {
-            System.err.println("Error fetching max id from inventory_registered_details: " + e.getMessage());
+            System.err.println("Error fetching max id from department_requested_details: " + e.getMessage());
             return 0;
         }
     }
 
-    public boolean saveInventoryDetails(String companyName, int pid, int tid, String qty, String dcUpload,
-            String userRequestUpload, String finalDeliveredUpload, String username) {
-        // 1. Get toner model name
+    public String saveUserRequest(String itCellRefNo, String deptId, int pid, int tid, String qtyRequested, String userRequestUpload, String username) {
         String tonerModel = getTonerModelName(tid);
         String cleanModel = tonerModel.trim().replaceAll("\\s+", "-").replaceAll("[^a-zA-Z0-9-]", "");
-
-        // 2. Get next sequential number
-        int maxId = getMaxInventoryId();
+        int maxId = getMaxRequestId();
         int seqNum = 1000 + maxId + 1;
-
-        // 3. Get current year
         int year = java.util.Calendar.getInstance().get(java.util.Calendar.YEAR);
-
-        // 4. Construct request number
         String reqNo = String.format("%s-%d-%04d", cleanModel, year, seqNum);
 
-        // 5. Insert row
         String sql = "INSERT INTO department_requested_details " +
-                "(req_no, company_name, pid, tid, qty_registered, dc_upload, user_request_upload, final_delivered_upload, cdate, updated_date, updated_by, is_active, is_delete) "
-                +
-                "VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, 1, 0)";
+                "(req_no, itcell_ref_no, dept_id, pid, tid, qty_requested, qty_delivered, user_request_upload, cdate, updated_date, updated_by, is_active, is_delete) " +
+                "VALUES (?, ?, ?, ?, ?, ?, '0', ?, ?, ?, ?, 1, 0)";
+        java.sql.Timestamp now = new java.sql.Timestamp(System.currentTimeMillis());
+        try {
+            int rows = jdbcTemplate.update(sql, reqNo, itCellRefNo, deptId, String.valueOf(pid), String.valueOf(tid), qtyRequested, userRequestUpload, now, now, username);
+            return rows > 0 ? reqNo : null;
+        } catch (Exception e) {
+            System.err.println("Error saving user request: " + e.getMessage());
+            e.printStackTrace();
+            return null;
+        }
+    }
+
+    public List<Map<String, Object>> getPendingRequests() {
+        String sql = "SELECT r.id, r.req_no, r.dept_id, r.pid, r.tid, r.qty_requested, r.qty_delivered, " +
+                "p.printer_name, t.model_name " +
+                "FROM department_requested_details r " +
+                "LEFT JOIN printer_model_list p ON r.pid = p.id " +
+                "LEFT JOIN toner_model_list t ON r.tid = t.id " +
+                "WHERE r.is_active = 1 AND r.is_delete = 0 " +
+                "AND (r.qty_delivered IS NULL OR CAST(r.qty_delivered AS SIGNED) < CAST(r.qty_requested AS SIGNED)) " +
+                "ORDER BY r.id DESC";
+        try {
+            return jdbcTemplate.queryForList(sql);
+        } catch (Exception e) {
+            System.err.println("Error fetching pending requests: " + e.getMessage());
+            return new ArrayList<>();
+        }
+    }
 
+    public boolean saveOutwardRegister(int id, String qtyIssued, String finalDeliveredUpload, String username) {
+        String sql = "UPDATE department_requested_details " +
+                "SET qty_delivered = ?, final_delivered_upload = ?, updated_date = ?, updated_by = ? " +
+                "WHERE id = ?";
         java.sql.Timestamp now = new java.sql.Timestamp(System.currentTimeMillis());
         try {
-            int rows = jdbcTemplate.update(sql, reqNo, companyName, String.valueOf(pid), String.valueOf(tid), qty,
-                    dcUpload, userRequestUpload, finalDeliveredUpload, now, now, username);
+            int rows = jdbcTemplate.update(sql, qtyIssued, finalDeliveredUpload, now, username, id);
             return rows > 0;
         } catch (Exception e) {
-            System.err.println("Error saving inventory details: " + e.getMessage());
+            System.err.println("Error updating outward register: " + e.getMessage());
             e.printStackTrace();
             return false;
         }
     }
+
+    public Map<String, Object> getDashboardMetrics() {
+        Map<String, Object> metrics = new HashMap<>();
+
+        String sqlRaised = "SELECT COALESCE(SUM(CAST(qty_requested AS SIGNED)), 0) FROM department_requested_details WHERE is_active = 1 AND is_delete = 0";
+        String sqlDistributed = "SELECT COALESCE(SUM(CAST(qty_delivered AS SIGNED)), 0) FROM department_requested_details WHERE is_active = 1 AND is_delete = 0";
+        String sqlInward = "SELECT COALESCE(SUM(CAST(qty_registered AS SIGNED)), 0) FROM stock_register_details WHERE is_active = 1 AND is_delete = 0";
+
+        try {
+            int totalRaised = jdbcTemplate.queryForObject(sqlRaised, Integer.class);
+            int totalDistributed = jdbcTemplate.queryForObject(sqlDistributed, Integer.class);
+            int inwardStock = jdbcTemplate.queryForObject(sqlInward, Integer.class);
+            int availableStock = inwardStock - totalDistributed;
+
+            metrics.put("totalRaised", totalRaised);
+            metrics.put("totalDistributed", totalDistributed);
+            metrics.put("availableStock", availableStock);
+        } catch (Exception e) {
+            System.err.println("Error computing dashboard metrics: " + e.getMessage());
+            metrics.put("totalRaised", 0);
+            metrics.put("totalDistributed", 0);
+            metrics.put("availableStock", 0);
+        }
+        return metrics;
+    }
+
+    public List<Map<String, Object>> getInventorySummary() {
+        String safeSql = "SELECT p.printer_name, t.model_name, " +
+                "COALESCE((SELECT SUM(CAST(sr.qty_registered AS SIGNED)) FROM stock_register_details sr WHERE CAST(sr.pid AS SIGNED) = t.pid AND CAST(sr.tid AS SIGNED) = t.id AND sr.is_active = 1 AND sr.is_delete = 0), 0) AS inward_qty, " +
+                "COALESCE((SELECT SUM(CAST(dr.qty_delivered AS SIGNED)) FROM department_requested_details dr WHERE CAST(dr.pid AS SIGNED) = t.pid AND CAST(dr.tid AS SIGNED) = t.id AND dr.is_active = 1 AND dr.is_delete = 0), 0) AS outward_qty " +
+                "FROM toner_model_list t " +
+                "JOIN printer_model_list p ON t.pid = p.id " +
+                "WHERE t.is_active = 1 AND t.is_delete = 0 " +
+                "ORDER BY p.printer_name, t.model_name";
+        try {
+            List<Map<String, Object>> list = jdbcTemplate.queryForList(safeSql);
+            for (Map<String, Object> map : list) {
+                Number inward = (Number) map.get("inward_qty");
+                Number outward = (Number) map.get("outward_qty");
+                long avail = (inward != null ? inward.longValue() : 0) - (outward != null ? outward.longValue() : 0);
+                map.put("available_qty", avail);
+            }
+            return list;
+        } catch (Exception e) {
+            System.err.println("Error fetching inventory summary: " + e.getMessage());
+            e.printStackTrace();
+            return new ArrayList<>();
+        }
+    }
+
+    public List<Map<String, Object>> getOutwardHistory() {
+        String sql = "SELECT r.id, r.req_no, r.itcell_ref_no, r.dept_id, r.qty_requested, r.qty_delivered, r.final_delivered_upload, r.updated_date, " +
+                "p.printer_name, t.model_name " +
+                "FROM department_requested_details r " +
+                "LEFT JOIN printer_model_list p ON r.pid = p.id " +
+                "LEFT JOIN toner_model_list t ON r.tid = t.id " +
+                "WHERE r.is_active = 1 AND r.is_delete = 0 " +
+                "AND r.qty_delivered IS NOT NULL AND CAST(r.qty_delivered AS SIGNED) > 0 " +
+                "ORDER BY r.updated_date DESC";
+        try {
+            return jdbcTemplate.queryForList(sql);
+        } catch (Exception e) {
+            System.err.println("Error fetching outward history: " + e.getMessage());
+            return new ArrayList<>();
+        }
+    }
 }
diff --git a/src/main/resources/templates/gccservicepaymenttracker/dashboard.html b/src/main/resources/templates/gccservicepaymenttracker/dashboard.html
index eba731f..b35a7aa 100644
--- a/src/main/resources/templates/gccservicepaymenttracker/dashboard.html
+++ b/src/main/resources/templates/gccservicepaymenttracker/dashboard.html
@@ -47,6 +47,16 @@
             font-weight: 600;
         }
 
+        .text-success-dark {
+            color: #166534 !important;
+            font-weight: bold;
+        }
+
+        .text-danger-dark {
+            color: #991b1b !important;
+            font-weight: bold;
+        }
+
         body {
             background-color: #f4f7f6;
             font-family: 'Poppins', sans-serif;
@@ -250,7 +260,7 @@
             background-color: #fdf2f8;
         }
 
-        /* Total No of Files Card Accent */
+        /* Total No of Bills Card Accent */
         .category-card.card-total::before {
             background-color: #2563eb;
         }
@@ -265,19 +275,34 @@
             color: #2563eb;
         }
 
-        /* Type Not Updated Files Card Accent */
-        .category-card.card-status-not-updated::before {
-            background-color: #475569;
+        /* Completed Card Accent */
+        .category-card.card-completed::before {
+            background-color: #166534;
         }
 
-        .category-card.card-status-not-updated.active {
-            border-color: #475569;
-            box-shadow: 0 10px 25px rgba(71, 85, 105, 0.15);
-            background-color: #f8fafc;
+        .category-card.card-completed.active {
+            border-color: #166534;
+            box-shadow: 0 10px 25px rgba(22, 101, 52, 0.15);
+            background-color: #f0fdf4;
         }
 
-        .card-status-not-updated .card-icon {
-            color: #475569;
+        .card-completed .card-icon {
+            color: #166534;
+        }
+
+        /* Pending Card Accent */
+        .category-card.card-pending::before {
+            background-color: #991b1b;
+        }
+
+        .category-card.card-pending.active {
+            border-color: #991b1b;
+            box-shadow: 0 10px 25px rgba(153, 27, 27, 0.15);
+            background-color: #fef2f2;
+        }
+
+        .card-pending .card-icon {
+            color: #991b1b;
         }
 
         .category-card:hover {
@@ -1011,92 +1036,36 @@
 
     <div class="main-container">
 
-        <!-- Category Grid (7 Cards) -->
+        <!-- Category Grid (3 Cards) -->
         <div class="category-grid">
 
-            <!-- Total No of Files -->
-            <div class="category-card card-total" onclick="openModalForCount('total', null, 'Total No of Files')">
+            <!-- Total No of Bills -->
+            <div class="category-card card-total" onclick="openModalForCount('total', null, 'Total No of Bills')">
                 <div class="card-left">
-                    <h3 class="card-title">Total No of Files</h3>
+                    <h3 class="card-title">Total No of Bills</h3>
                     <p class="card-value" id="count-total">0</p>
                 </div>
                 <i class="fa-solid fa-folder-open card-icon"></i>
             </div>
 
-            <!-- Type Not Updated Files Files -->
-            <div class="category-card card-status-not-updated"
-                onclick="openModalForCount('category', 'status_not_updated', 'Type Not Updated Files Files')">
-                <div class="card-left">
-                    <h3 class="card-title">Type Not Updated Files</h3>
-                    <p class="card-value" id="count-status-not-updated">0</p>
-                </div>
-                <i class="fa-solid fa-circle-question card-icon"></i>
-            </div>
-
-            <!-- Security Deposit -->
-            <div class="category-card card-sd" onclick="openModalForCount('category', 'sd', 'Security Deposit')">
+            <!-- Completed Bills -->
+            <div class="category-card card-completed"
+                onclick="openModalForCount('completed_custom', null, 'Completed Bills')">
                 <div class="card-left">
-                    <h3 class="card-title">Security Deposit</h3>
-                    <p class="card-value" id="count-sd">0</p>
+                    <h3 class="card-title">Completed Bills</h3>
+                    <p class="card-value" id="count-completed">0</p>
                 </div>
-                <i class="fa-solid fa-wallet card-icon"></i>
+                <i class="fa-solid fa-circle-check card-icon"></i>
             </div>
 
-            <!-- Tax Invoice -->
-            <div class="category-card card-invoice"
-                onclick="openModalForCount('category', 'tax invoice', 'Tax Invoice')">
+            <!-- Pending Bills -->
+            <div class="category-card card-pending"
+                onclick="openModalForCount('pending_custom', null, 'Pending Bills')">
                 <div class="card-left">
-                    <h3 class="card-title">Tax Invoice</h3>
-                    <p class="card-value" id="count-invoice">0</p>
+                    <h3 class="card-title">Pending Bills</h3>
+                    <p class="card-value" id="count-pending">0</p>
                 </div>
-                <i class="fa-solid fa-file-invoice-dollar card-icon"></i>
-            </div>
-
-            <!-- EMD -->
-            <div class="category-card card-emd" onclick="openModalForCount('category', 'emd', 'EMD')">
-                <div class="card-left">
-                    <h3 class="card-title">EMD</h3>
-                    <p class="card-value" id="count-emd">0</p>
-                </div>
-                <i class="fa-solid fa-file-signature card-icon"></i>
-            </div>
-
-            <!-- Bank Guarantee commented out
-            <div class="category-card card-bg" onclick="openModalForCount('category', 'bank guarantee', 'Bank Guarantee')">
-                <div class="card-left">
-                    <h3 class="card-title">Bank Guarantee</h3>
-                    <p class="card-value" id="count-bg">0</p>
-                </div>
-                <i class="fa-solid fa-shield-halved card-icon"></i>
-            </div>
-            -->
-
-            <!-- Delivery Chellan commented out
-            <div class="category-card card-dc" onclick="openModalForCount('category', 'delivery chellan', 'Delivery Chellan')">
-                <div class="card-left">
-                    <h3 class="card-title">Delivery Chellan</h3>
-                    <p class="card-value" id="count-dc">0</p>
-                </div>
-                <i class="fa-solid fa-truck-ramp-box card-icon"></i>
-            </div>
-            -->
-
-            <!-- ASD -->
-            <div class="category-card card-asd" onclick="openModalForCount('category', 'asd', 'ASD')">
-                <div class="card-left">
-                    <h3 class="card-title">ASD</h3>
-                    <p class="card-value" id="count-asd">0</p>
-                </div>
-                <i class="fa-solid fa-vault card-icon"></i>
-            </div>
-
-            <!-- Agreement -->
-            <div class="category-card card-agreement" onclick="openModalForCount('category', 'agreement', 'Agreement')">
-                <div class="card-left">
-                    <h3 class="card-title">Agreement</h3>
-                    <p class="card-value" id="count-agreement">0</p>
-                </div>
-                <i class="fa-solid fa-file-contract card-icon"></i>
+                <i class="fa-solid fa-clock card-icon"></i>
             </div>
 
         </div>
@@ -1109,7 +1078,8 @@
                     <div class="card-header bg-white py-3 border-0">
                         <h4 class="card-title mb-0 fw-bold"
                             style="font-family: 'Outfit', sans-serif; color: #09303d; font-size: 1.15rem;">
-                            <i class="fa-solid fa-chart-line me-2 text-primary"></i>Total Files in No of days wise count
+                            <i class="fa-solid fa-chart-line me-2 text-primary"></i>Total No of Pedning Bills days wise
+                            count
                         </h4>
                     </div>
                     <div class="card-body p-3">
@@ -1118,7 +1088,7 @@
                                 style="font-size: 0.82rem; border-color: #e2e8f0;">
                                 <thead class="table-light text-secondary fw-bold" style="font-size: 0.75rem;">
                                     <tr id="summary-thead-tr">
-                                        <th style="background-color: #f8fafc; color: #475569;">Total No of files</th>
+                                        <th style="background-color: #f8fafc; color: #475569;">Total No of Bills</th>
                                         <th style="background-color: #f0fdf4; color: #166534;">Completed Files</th>
                                         <th style="background-color: #fef2f2; color: #991b1b;">Pending Files</th>
                                         <th style="background-color: #fafaf9; color: #44403c;">1 to 15 Days</th>
@@ -1133,7 +1103,7 @@
                                     <tr class="fw-bold" style="font-size: 1rem; color: #1e293b;" id="summary-tbody-tr">
                                         <td id="summary-total" class="cursor-pointer text-primary"
                                             style="background-color: #f8fafc;"
-                                            onclick="openModalForCount('total', null, 'Total No of files')">0</td>
+                                            onclick="openModalForCount('total', null, 'Total No of Bills')">0</td>
                                         <td id="summary-completed" class="cursor-pointer text-success"
                                             onclick="openModalForCount('completed_custom', null, 'Completed Files')">0
                                         </td>
@@ -1170,7 +1140,7 @@
                     <div class="card-header bg-white py-3 border-0">
                         <h4 class="card-title mb-0 fw-bold"
                             style="font-family: 'Outfit', sans-serif; color: #09303d; font-size: 1.15rem;">
-                            <i class="fa-solid fa-chart-pie me-2 text-primary"></i>Invoices Status Distribution
+                            <i class="fa-solid fa-chart-pie me-2 text-primary"></i>Total Bills in Percentage
                         </h4>
                     </div>
                     <div class="card-body d-flex align-items-center justify-content-center p-2"
@@ -1187,7 +1157,7 @@
                 class="card-header bg-white py-3 border-0 d-flex justify-content-between align-items-center flex-wrap gap-2">
                 <h4 class="card-title mb-0 fw-bold"
                     style="font-family: 'Outfit', sans-serif; color: #09303d; font-size: 1.15rem;">
-                    <i class="fa-solid fa-users-viewfinder me-2 text-primary"></i>Vendor Breakdown Details (Invoices)
+                    <i class="fa-solid fa-users-viewfinder me-2 text-primary"></i>Vendor Breakdown Details
                 </h4>
                 <div style="font-size: 0.8rem; color: #64748b;">
                     <input type="text" id="vendor-breakdown-search" class="form-control form-control-sm"
@@ -1203,17 +1173,17 @@
                             style="font-size: 0.72rem; z-index: 10;">
                             <tr id="vendor-breakdown-thead-tr">
                                 <th style="text-align: left; background-color: #f8fafc;">Vendor Name</th>
-                                <th style="background-color: #f8fafc;">Total No of files</th>
+                                <th style="background-color: #f8fafc;">Total No of Bills</th>
                                 <th style="background-color: #f0fdf4;">Completed Files</th>
                                 <th style="background-color: #fffbeb;">Awaiting Details</th>
                                 <th style="background-color: #f0f9ff;">Pending with Dept</th>
                                 <th style="background-color: #fef2f2;">Pending</th>
-                                <th style="background-color: #fafaf9;">1 to 15 Days</th>
-                                <th style="background-color: #fafaf9;">16 to 30 Days</th>
-                                <th style="background-color: #fafaf9;">31 to 60 Days</th>
-                                <th style="background-color: #fafaf9;">61 to 90 Days</th>
-                                <th style="background-color: #fafaf9;">91 to 120 Days</th>
-                                <th style="background-color: #fafaf9;">Over 120 Days</th>
+                                <th class="age-col d-none" style="background-color: #fafaf9;">1 to 15 Days</th>
+                                <th class="age-col d-none" style="background-color: #fafaf9;">16 to 30 Days</th>
+                                <th class="age-col d-none" style="background-color: #fafaf9;">31 to 60 Days</th>
+                                <th class="age-col d-none" style="background-color: #fafaf9;">61 to 90 Days</th>
+                                <th class="age-col d-none" style="background-color: #fafaf9;">91 to 120 Days</th>
+                                <th class="age-col d-none" style="background-color: #fafaf9;">Over 120 Days</th>
                             </tr>
                         </thead>
                         <tbody id="vendor-breakdown-tbody">
@@ -1361,8 +1331,12 @@
                     <thead>
                         <tr>
                             <th class="text-center" style="width: 50px;">Sr. No.</th>
-                            <th>Received Date</th>
-                            <th>Invoice Date</th>
+                            <th onclick="sortMainTable('received_date')" style="cursor: pointer; user-select: none;">
+                                Received Date <span id="main-sort-received_date-icon"><i class="fa-solid fa-sort ms-1"
+                                        style="opacity: 0.4;"></i></span></th>
+                            <th onclick="sortMainTable('invoice_date')" style="cursor: pointer; user-select: none;">
+                                Invoice Date <span id="main-sort-invoice_date-icon"><i class="fa-solid fa-sort ms-1"
+                                        style="opacity: 0.4;"></i></span></th>
                             <th>Physical File No.</th>
                             <th>eFile No./ Receipt No.</th>
                             <th>Subject</th>
@@ -1370,9 +1344,11 @@
                             <th>Vendor Name</th>
                             <th>Amount</th>
                             <th>Age of Bill (Days)</th>
-                            <th>Status (Pending / Completed)</th>
+                            <th>Status</th>
                             <th>Remarks</th>
-                            <th>Last Updated At</th>
+                            <th onclick="sortMainTable('updated_date')" style="cursor: pointer; user-select: none;">Last
+                                Updated At <span id="main-sort-updated_date-icon"><i class="fa-solid fa-sort ms-1"
+                                        style="opacity: 0.4;"></i></span></th>
                             <th>Last Updated By</th>
                             <th class="text-center" style="width: 120px;">Actions</th>
                         </tr>
@@ -1675,23 +1651,34 @@
                 <div class="modal-body" style="padding: 1.5rem;">
                     <!-- Filters Row Inside Modal -->
                     <div class="row g-3 mb-4 p-3 bg-light rounded border align-items-end">
-                        <div class="col-md-3">
-                            <label for="modal-filter-type" class="form-label fw-bold text-secondary text-uppercase"
-                                style="font-size: 0.75rem; letter-spacing: 0.5px;">Type Filter</label>
-                            <select id="modal-filter-type" class="form-select form-select-sm"
-                                onchange="applyModalFilters()">
+                        <!-- Quick Type Filters Under Type Filter Label -->
+                        <div class="col-12 mb-2">
+                            <label class="form-label fw-bold text-secondary text-uppercase"
+                                style="font-size: 0.75rem; letter-spacing: 0.5px; display: block; margin-bottom: 8px;">Type
+                                Filter</label>
+                            <div id="modal-type-badges" class="d-flex flex-wrap gap-2">
+                                <!-- Populated dynamically via JS -->
+                            </div>
+                            <!-- Hidden select element to preserve compatibility with existing JS -->
+                            <select id="modal-filter-type" class="d-none">
                                 <option value="all">- All Types -</option>
                             </select>
                         </div>
-                        <div class="col-md-3">
-                            <label for="modal-filter-status" class="form-label fw-bold text-secondary text-uppercase"
-                                style="font-size: 0.75rem; letter-spacing: 0.5px;">Status Filter</label>
-                            <select id="modal-filter-status" class="form-select form-select-sm"
-                                onchange="applyModalFilters()">
+                        <!-- Quick Status Filters Under Status Filter Label -->
+                        <div class="col-12 mb-2">
+                            <label class="form-label fw-bold text-secondary text-uppercase"
+                                style="font-size: 0.75rem; letter-spacing: 0.5px; display: block; margin-bottom: 8px;">Status
+                                Filter</label>
+                            <div id="modal-status-badges" class="d-flex flex-wrap gap-2">
+                                <!-- Populated dynamically via JS -->
+                            </div>
+                            <!-- Hidden select element to preserve compatibility with existing JS -->
+                            <select id="modal-filter-status" class="d-none">
                                 <option value="all">- All Statuses -</option>
                             </select>
                         </div>
-                        <div class="col-md-3">
+
+                        <div class="col-md-4">
                             <label for="modal-filter-vendor" class="form-label fw-bold text-secondary text-uppercase"
                                 style="font-size: 0.75rem; letter-spacing: 0.5px;">Vendor Filter</label>
                             <select id="modal-filter-vendor" class="form-select form-select-sm"
@@ -1700,14 +1687,14 @@
                             </select>
                         </div>
 
-                        <div class="col-md-3">
+                        <div class="col-md-4">
                             <label class="form-label fw-bold text-secondary text-uppercase"
                                 style="font-size: 0.75rem; letter-spacing: 0.5px;">Search:</label>
                             <input type="text" id="modal-table-search" class="form-control form-control-sm"
                                 placeholder="Search in this table..." oninput="applyModalFilters()">
                         </div>
 
-                        <div class="col-md-3">
+                        <div class="col-md-4">
                             <button
                                 class="btn btn-sm btn-success fw-bold px-3 d-inline-flex align-items-center gap-2 w-100 justify-content-center"
                                 style="border-radius: 8px; height: 31px;" onclick="exportModalTableToExcel()">
@@ -1724,8 +1711,14 @@
                             <thead class="table-light">
                                 <tr>
                                     <th class="text-center" style="width: 50px;">Sr. No.</th>
-                                    <th>Received Date</th>
-                                    <th>Invoice Date</th>
+                                    <th onclick="sortModalTable('received_date')"
+                                        style="cursor: pointer; user-select: none;">Received Date <span
+                                            id="modal-sort-received_date-icon"><i class="fa-solid fa-sort ms-1"
+                                                style="opacity: 0.4;"></i></span></th>
+                                    <th onclick="sortModalTable('invoice_date')"
+                                        style="cursor: pointer; user-select: none;">Invoice Date <span
+                                            id="modal-sort-invoice_date-icon"><i class="fa-solid fa-sort ms-1"
+                                                style="opacity: 0.4;"></i></span></th>
                                     <th>Physical File No.</th>
                                     <th>eFile No./ Receipt No.</th>
                                     <th>Subject</th>
@@ -1733,9 +1726,12 @@
                                     <th>Vendor Name</th>
                                     <th>Amount</th>
                                     <th>Age of Bill (Days)</th>
-                                    <th>Status (Pending / Completed)</th>
+                                    <th>Status</th>
                                     <th>Remarks</th>
-                                    <th>Last Updated Date</th>
+                                    <th onclick="sortModalTable('updated_date')"
+                                        style="cursor: pointer; user-select: none;">Last Updated Date <span
+                                            id="modal-sort-updated_date-icon"><i class="fa-solid fa-sort ms-1"
+                                                style="opacity: 0.4;"></i></span></th>
                                     <th>Last Updated By</th>
                                     <th class="text-center" style="width: 120px;">Actions</th>
                                 </tr>
@@ -1828,6 +1824,7 @@
         let activeClickFilter = null;
         let statusChartInstance = null;
         let vendorBreakdownData = [];
+        let showVendorAgeBreakdown = false;
 
         // Dynamic lists for types, vendors, and statuses
         let activeTypes = [];
@@ -1878,16 +1875,36 @@
                 ]);
                 activeTypes = await typesRes.json();
                 activeVendors = await vendorsRes.json();
-                const fetchedStatus = await statusRes.json();
+                const allFetched = await statusRes.json();
+                const fetchedStatus = allFetched.filter(s => {
+                    const name = String(s.status_name).toLowerCase().trim();
+                    return !name.includes('duplicate') && !name.includes('no action') && !name.includes('action required');
+                });
 
-                // Sort activeStatus to have completed first, then pending, then others
+                // Sort activeStatus to have completed first, then non-completed in a custom logical order
                 const completedStatuses = fetchedStatus.filter(s => getStatusKey(s.status_name) === 'completed');
-                const pendingStatuses = fetchedStatus.filter(s => getStatusKey(s.status_name) === 'pending');
-                const otherStatuses = fetchedStatus.filter(s =>
-                    getStatusKey(s.status_name) !== 'completed' &&
-                    getStatusKey(s.status_name) !== 'pending'
-                );
-                activeStatus = [...completedStatuses, ...pendingStatuses, ...otherStatuses];
+                const nonCompletedStatuses = fetchedStatus.filter(s => getStatusKey(s.status_name) !== 'completed');
+
+                function getNonCompletedOrderScore(statusName) {
+                    const name = String(statusName).toLowerCase();
+                    if (name.includes('awaiting') || name.includes('details')) return 0;
+                    if (name.includes('initiated') || name.includes('to be')) return 1;
+                    if (name.includes('eoffice') || name.includes('e-office')) return 2;
+                    if (name.includes('uac')) return 3;
+                    if (name.includes('fm unit') || name.includes('fmunit') || name.includes('fm_unit')) return 4;
+                    return 99;
+                }
+
+                nonCompletedStatuses.sort((a, b) => {
+                    const scoreA = getNonCompletedOrderScore(a.status_name);
+                    const scoreB = getNonCompletedOrderScore(b.status_name);
+                    if (scoreA !== scoreB) {
+                        return scoreA - scoreB;
+                    }
+                    return a.status_name.localeCompare(b.status_name);
+                });
+
+                activeStatus = [...completedStatuses, ...nonCompletedStatuses];
 
                 populateDropdowns();
             } catch (err) {
@@ -1917,15 +1934,15 @@
         }
 
         const statusColors = {
-            'completed': { bg: '#f0fdf4', text: '#166534', badgeClass: 'text-success' },
+            'completed': { bg: '#f0fdf4', text: '#166534', badgeClass: 'text-success-dark' },
             'awaiting details': { bg: '#fffbeb', text: '#92400e', badgeClass: 'text-warning-dark' },
             'pending with dept': { bg: '#f0f9ff', text: '#075985', badgeClass: 'text-info-dark' },
-            'pending': { bg: '#fef2f2', text: '#991b1b', badgeClass: 'text-danger' },
+            'pending': { bg: '#fef2f2', text: '#991b1b', badgeClass: 'text-danger-dark' },
             'no action': { bg: '#fafaf9', text: '#44403c', badgeClass: 'text-secondary' },
             'processed': { bg: '#dbeafe', text: '#1e40af', badgeClass: 'text-primary' },
-            'approved': { bg: '#d1fae5', text: '#065f46', badgeClass: 'text-success' },
-            'paid': { bg: '#dcfce7', text: '#166534', badgeClass: 'text-success' },
-            'rejected': { bg: '#fee2e2', text: '#991b1b', badgeClass: 'text-danger' }
+            'approved': { bg: '#d1fae5', text: '#065f46', badgeClass: 'text-success-dark' },
+            'paid': { bg: '#dcfce7', text: '#166534', badgeClass: 'text-success-dark' },
+            'rejected': { bg: '#fee2e2', text: '#991b1b', badgeClass: 'text-danger-dark' }
         };
 
         function getStatusStyle(statusName) {
@@ -2009,7 +2026,7 @@
             const summaryTheadTr = document.getElementById('summary-thead-tr');
             if (summaryTheadTr) {
                 let summaryHeadHtml = `
-                    <th style="background-color: #f8fafc; color: #475569;">Total No of files</th>
+                    <th style="background-color: #f8fafc; color: #475569;">Total No of Bills</th>
                     <th style="background-color: #f0fdf4; color: #166534;">Completed Files</th>
                     <th style="background-color: #fef2f2; color: #991b1b;">Pending Files</th>
                 `;
@@ -2032,32 +2049,46 @@
 
                 let vendorHeadHtml = `
                     <th style="text-align: left; background-color: #f8fafc;">Vendor Name</th>
-                    <th style="background-color: #f8fafc;">Total No of files</th>
+                    <th style="background-color: #f8fafc;">Total No of Bills</th>
                 `;
                 completedStatuses.forEach(s => {
                     const style = getStatusStyle(s.status_name);
                     vendorHeadHtml += `<th style="background-color: ${style.bg}; color: ${style.text};">${escapeHtml(s.status_name)}</th>`;
                 });
 
-                // Custom Pending column header
-                vendorHeadHtml += `<th style="background-color: #fef2f2; color: #991b1b;">Pending files</th>`;
+                // Custom Pending column header - with toggle icon
+                const toggleIcon = showVendorAgeBreakdown ? 'fa-angles-left' : 'fa-angles-right';
+                const titleText = showVendorAgeBreakdown ? 'Click to hide days-wise count breakdown' : 'Click to show days-wise count breakdown';
+                vendorHeadHtml += `
+                    <th class="cursor-pointer" style="background-color: #fef2f2; color: #991b1b; cursor: pointer;" onclick="toggleVendorAgeCols()" title="${titleText}">
+                        Pending files <i class="fa-solid ${toggleIcon} ms-1 text-muted" style="transition: transform 0.2s;"></i>
+                    </th>
+                `;
 
                 nonCompletedStatuses.forEach(s => {
                     const style = getStatusStyle(s.status_name);
                     vendorHeadHtml += `<th style="background-color: ${style.bg}; color: ${style.text};">${escapeHtml(s.status_name)}</th>`;
                 });
+
+                const ageDNone = showVendorAgeBreakdown ? '' : 'd-none';
                 vendorHeadHtml += `
-                    <th style="background-color: #fafaf9;">1 to 15 Days</th>
-                    <th style="background-color: #fafaf9;">16 to 30 Days</th>
-                    <th style="background-color: #fafaf9;">31 to 60 Days</th>
-                    <th style="background-color: #fafaf9;">61 to 90 Days</th>
-                    <th style="background-color: #fafaf9;">91 to 120 Days</th>
-                    <th style="background-color: #fafaf9;">Over 120 Days</th>
+                    <th class="age-col ${ageDNone}" style="background-color: #fafaf9;">1 to 15 Days</th>
+                    <th class="age-col ${ageDNone}" style="background-color: #fafaf9;">16 to 30 Days</th>
+                    <th class="age-col ${ageDNone}" style="background-color: #fafaf9;">31 to 60 Days</th>
+                    <th class="age-col ${ageDNone}" style="background-color: #fafaf9;">61 to 90 Days</th>
+                    <th class="age-col ${ageDNone}" style="background-color: #fafaf9;">91 to 120 Days</th>
+                    <th class="age-col ${ageDNone}" style="background-color: #fafaf9;">Over 120 Days</th>
                 `;
                 vendorBreakdownTheadTr.innerHTML = vendorHeadHtml;
             }
         }
 
+        function toggleVendorAgeCols() {
+            showVendorAgeBreakdown = !showVendorAgeBreakdown;
+            populateDropdowns();
+            renderVendorBreakdown();
+        }
+
         // Helper to get status name by ID or fallback to status value
         function getStatusName(statusVal) {
             if (statusVal === null || statusVal === undefined || String(statusVal).trim() === '') {
@@ -2099,25 +2130,60 @@
             fetch(contextPath + 'gccservicepaymenttracker/api/counts?_=' + new Date().getTime())
                 .then(response => response.json())
                 .then(data => {
-                    document.getElementById('count-sd').textContent = data.sd || 0;
-                    document.getElementById('count-invoice').textContent = data['tax invoice'] || 0;
-                    document.getElementById('count-emd').textContent = data.emd || 0;
-                    const bgEl = document.getElementById('count-bg');
-                    if (bgEl) bgEl.textContent = data['bank guarantee'] || 0;
-                    const dcEl = document.getElementById('count-dc');
-                    if (dcEl) dcEl.textContent = data['delivery chellan'] || 0;
-                    document.getElementById('count-asd').textContent = data.asd || 0;
-                    document.getElementById('count-agreement').textContent = data.agreement || 0;
-
-                    // Set total and Type Not Updated Files counts
                     const totalEl = document.getElementById('count-total');
                     if (totalEl) totalEl.textContent = data.total || 0;
-                    const missingTypeEl = document.getElementById('count-status-not-updated');
-                    if (missingTypeEl) missingTypeEl.textContent = data.status_not_updated || 0;
                 })
                 .catch(err => console.error("Error loading category counts:", err));
         }
 
+        // Sorting States and Logic
+        let mainSortCol = '';
+        let mainSortAsc = true;
+        let modalSortCol = '';
+        let modalSortAsc = true;
+
+        function sortMainTable(colName) {
+            if (mainSortCol === colName) {
+                mainSortAsc = !mainSortAsc;
+            } else {
+                mainSortCol = colName;
+                mainSortAsc = true;
+            }
+            updateSortHeaders('main');
+            renderTable();
+        }
+
+        function sortModalTable(colName) {
+            if (modalSortCol === colName) {
+                modalSortAsc = !modalSortAsc;
+            } else {
+                modalSortCol = colName;
+                modalSortAsc = true;
+            }
+            updateSortHeaders('modal');
+            applyModalFilters();
+        }
+
+        function updateSortHeaders(type) {
+            const cols = ['received_date', 'invoice_date', 'updated_date'];
+            cols.forEach(col => {
+                const elementId = `${type}-sort-${col}-icon`;
+                const el = document.getElementById(elementId);
+                if (!el) return;
+
+                const activeCol = (type === 'main') ? mainSortCol : modalSortCol;
+                const activeAsc = (type === 'main') ? mainSortAsc : modalSortAsc;
+
+                if (activeCol === col) {
+                    el.innerHTML = activeAsc
+                        ? `<i class="fa-solid fa-sort-up ms-1 text-primary"></i>`
+                        : `<i class="fa-solid fa-sort-down ms-1 text-primary"></i>`;
+                } else {
+                    el.innerHTML = `<i class="fa-solid fa-sort ms-1" style="opacity: 0.4;"></i>`;
+                }
+            });
+        }
+
         // Handles select change of card
         function selectCategory(category, cardElement) {
             const isActive = cardElement.classList.contains('active');
@@ -2281,6 +2347,24 @@
                 );
             });
 
+            // Sort main table dataset
+            if (mainSortCol) {
+                filtered.sort((a, b) => {
+                    let valA = a[mainSortCol] || '';
+                    let valB = b[mainSortCol] || '';
+
+                    let timeA = valA ? new Date(valA).getTime() : 0;
+                    let timeB = valB ? new Date(valB).getTime() : 0;
+                    if (isNaN(timeA)) timeA = 0;
+                    if (isNaN(timeB)) timeB = 0;
+
+                    if (timeA !== timeB) {
+                        return mainSortAsc ? timeA - timeB : timeB - timeA;
+                    }
+                    return mainSortAsc ? String(valA).localeCompare(String(valB)) : String(valB).localeCompare(String(valA));
+                });
+            }
+
             currentFilteredRecords = filtered;
 
             showLoader(false);
@@ -3059,10 +3143,18 @@
 
             const pendingTotal = total - completedTotal;
 
+            // Set top dashboard cards counts dynamically
+            const cardTotalEl = document.getElementById('count-total');
+            if (cardTotalEl) cardTotalEl.textContent = total;
+            const cardCompletedEl = document.getElementById('count-completed');
+            if (cardCompletedEl) cardCompletedEl.textContent = completedTotal;
+            const cardPendingEl = document.getElementById('count-pending');
+            if (cardPendingEl) cardPendingEl.textContent = pendingTotal;
+
             let summaryBodyHtml = `
-                <td id="summary-total" class="cursor-pointer text-primary" style="background-color: #f8fafc;" onclick="openModalForCount('total', null, 'Total No of files')">${total}</td>
-                <td id="summary-completed" class="cursor-pointer text-success" onclick="openModalForCount('completed_custom', null, 'Completed Files')">${completedTotal}</td>
-                <td id="summary-pending" class="cursor-pointer text-danger" style="color: #991b1b; font-weight: bold;" onclick="openModalForCount('pending_custom', null, 'Pending Files')">${pendingTotal}</td>
+                <td id="summary-total" class="cursor-pointer text-primary" style="background-color: #f8fafc;" onclick="openModalForCount('total', null, 'Total No of Bills')">${total}</td>
+                <td id="summary-completed" class="cursor-pointer text-success-dark" onclick="openModalForCount('completed_custom', null, 'Completed Files')">${completedTotal}</td>
+                <td id="summary-pending" class="cursor-pointer text-danger-dark" onclick="openModalForCount('pending_custom', null, 'Pending Files')">${pendingTotal}</td>
             `;
             summaryBodyHtml += `
                 <td id="summary-1-15" class="cursor-pointer" onclick="openModalForCount('age', [1, 15], 'Age: 1 to 15 Days')">${age_1_15}</td>
@@ -3103,6 +3195,8 @@
                 statusChartInstance.destroy();
             }
 
+            const totalSum = data.reduce((a, b) => a + b, 0);
+
             statusChartInstance = new Chart(ctx, {
                 type: 'pie',
                 data: {
@@ -3125,9 +3219,48 @@
                                 font: {
                                     size: 10,
                                     family: 'Poppins'
+                                },
+                                generateLabels: function (chart) {
+                                    const data = chart.data;
+                                    if (data.labels.length && data.datasets.length) {
+                                        return data.labels.map((label, i) => {
+                                            const value = data.datasets[0].data[i];
+                                            const percentage = totalSum > 0 ? ((value / totalSum) * 100).toFixed(1) : 0;
+                                            const color = data.datasets[0].backgroundColor[i];
+                                            return {
+                                                text: `${label}: ${value} (${percentage}%)`,
+                                                fillStyle: color,
+                                                strokeStyle: color,
+                                                lineWidth: 0,
+                                                hidden: isNaN(data.datasets[0].data[i]) || chart.getDatasetMeta(0).data[i].hidden,
+                                                index: i
+                                            };
+                                        });
+                                    }
+                                    return [];
+                                }
+                            }
+                        },
+                        tooltip: {
+                            callbacks: {
+                                label: function (context) {
+                                    const label = context.label || '';
+                                    const value = context.raw || 0;
+                                    const percentage = totalSum > 0 ? ((value / totalSum) * 100).toFixed(1) : 0;
+                                    return ` ${label}: ${value} (${percentage}%)`;
                                 }
                             }
                         }
+                    },
+                    onClick: (event, activeElements) => {
+                        if (activeElements && activeElements.length > 0) {
+                            const index = activeElements[0].index;
+                            const statusName = labels[index];
+                            const statusObj = activeStatus.find(s => s.status_name === statusName);
+                            if (statusObj) {
+                                openModalForCount('status', statusObj.id, 'Status: ' + statusObj.status_name);
+                            }
+                        }
                     }
                 }
             });
@@ -3196,7 +3329,7 @@
 
                 // 2. Custom "Pending" column
                 const pendingCount = v.total - totalCompleted;
-                trHtml += `<td class="cursor-pointer text-danger fw-bold" onclick="openModalForCount('vendor_pending_custom', null, 'Vendor: ' + this.getAttribute('data-vendor') + ' (Pending)', this.getAttribute('data-vendor'))" data-vendor="${escapeHtml(v.vendorName)}">${pendingCount}</td>`;
+                trHtml += `<td class="cursor-pointer text-danger-dark" onclick="openModalForCount('vendor_pending_custom', null, 'Vendor: ' + this.getAttribute('data-vendor') + ' (Pending)', this.getAttribute('data-vendor'))" data-vendor="${escapeHtml(v.vendorName)}">${pendingCount}</td>`;
 
                 // 3. Non-completed statuses
                 nonCompletedStatuses.forEach(s => {
@@ -3205,13 +3338,14 @@
                     trHtml += `<td class="cursor-pointer ${style.badgeClass}" onclick="openModalForCount('vendor_status', '${s.id}', 'Vendor: ' + this.getAttribute('data-vendor') + ' (${escapeHtml(s.status_name)})', this.getAttribute('data-vendor'), '${s.id}')" data-vendor="${escapeHtml(v.vendorName)}">${count}</td>`;
                 });
 
+                const ageDNone = showVendorAgeBreakdown ? '' : 'd-none';
                 trHtml += `
-                    <td class="cursor-pointer" onclick="openModalForCount('vendor_age', [1, 15], 'Vendor: ' + this.getAttribute('data-vendor') + ' (1-15 Days)', this.getAttribute('data-vendor'), 'age_1_15')" data-vendor="${escapeHtml(v.vendorName)}">${v.age_1_15}</td>
-                    <td class="cursor-pointer" onclick="openModalForCount('vendor_age', [16, 30], 'Vendor: ' + this.getAttribute('data-vendor') + ' (16-30 Days)', this.getAttribute('data-vendor'), 'age_16_30')" data-vendor="${escapeHtml(v.vendorName)}">${v.age_16_30}</td>
-                    <td class="cursor-pointer" onclick="openModalForCount('vendor_age', [31, 60], 'Vendor: ' + this.getAttribute('data-vendor') + ' (31-60 Days)', this.getAttribute('data-vendor'), 'age_31_60')" data-vendor="${escapeHtml(v.vendorName)}">${v.age_31_60}</td>
-                    <td class="cursor-pointer" onclick="openModalForCount('vendor_age', [61, 90], 'Vendor: ' + this.getAttribute('data-vendor') + ' (61-90 Days)', this.getAttribute('data-vendor'), 'age_61_90')" data-vendor="${escapeHtml(v.vendorName)}">${v.age_61_90}</td>
-                    <td class="cursor-pointer" onclick="openModalForCount('vendor_age', [91, 120], 'Vendor: ' + this.getAttribute('data-vendor') + ' (91-120 Days)', this.getAttribute('data-vendor'), 'age_91_120')" data-vendor="${escapeHtml(v.vendorName)}">${v.age_91_120}</td>
-                    <td class="cursor-pointer text-danger" onclick="openModalForCount('vendor_age', [121, null], 'Vendor: ' + this.getAttribute('data-vendor') + ' (Over 120 Days)', this.getAttribute('data-vendor'), 'age_over_120')" data-vendor="${escapeHtml(v.vendorName)}">${v.age_over_120}</td>
+                    <td class="cursor-pointer age-col ${ageDNone}" onclick="openModalForCount('vendor_age', [1, 15], 'Vendor: ' + this.getAttribute('data-vendor') + ' (1-15 Days)', this.getAttribute('data-vendor'), 'age_1_15')" data-vendor="${escapeHtml(v.vendorName)}">${v.age_1_15}</td>
+                    <td class="cursor-pointer age-col ${ageDNone}" onclick="openModalForCount('vendor_age', [16, 30], 'Vendor: ' + this.getAttribute('data-vendor') + ' (16-30 Days)', this.getAttribute('data-vendor'), 'age_16_30')" data-vendor="${escapeHtml(v.vendorName)}">${v.age_16_30}</td>
+                    <td class="cursor-pointer age-col ${ageDNone}" onclick="openModalForCount('vendor_age', [31, 60], 'Vendor: ' + this.getAttribute('data-vendor') + ' (31-60 Days)', this.getAttribute('data-vendor'), 'age_31_60')" data-vendor="${escapeHtml(v.vendorName)}">${v.age_31_60}</td>
+                    <td class="cursor-pointer age-col ${ageDNone}" onclick="openModalForCount('vendor_age', [61, 90], 'Vendor: ' + this.getAttribute('data-vendor') + ' (61-90 Days)', this.getAttribute('data-vendor'), 'age_61_90')" data-vendor="${escapeHtml(v.vendorName)}">${v.age_61_90}</td>
+                    <td class="cursor-pointer age-col ${ageDNone}" onclick="openModalForCount('vendor_age', [91, 120], 'Vendor: ' + this.getAttribute('data-vendor') + ' (91-120 Days)', this.getAttribute('data-vendor'), 'age_91_120')" data-vendor="${escapeHtml(v.vendorName)}">${v.age_91_120}</td>
+                    <td class="cursor-pointer text-danger age-col ${ageDNone}" onclick="openModalForCount('vendor_age', [121, null], 'Vendor: ' + this.getAttribute('data-vendor') + ' (Over 120 Days)', this.getAttribute('data-vendor'), 'age_over_120')" data-vendor="${escapeHtml(v.vendorName)}">${v.age_over_120}</td>
                 `;
 
                 tr.innerHTML = trHtml;
@@ -3225,7 +3359,7 @@
 
             let totalTrHtml = `
                 <td class="text-start">TOTAL</td>
-                <td class="cursor-pointer text-primary fw-bold" onclick="openModalForCount('total', null, 'Total No of Files')">${sumTotal}</td>
+                <td class="cursor-pointer text-primary fw-bold" onclick="openModalForCount('total', null, 'Total No of Bills')">${sumTotal}</td>
             `;
 
             // 1. Completed statuses
@@ -3238,21 +3372,22 @@
 
             // 2. Custom "Pending" column
             const sumPending = sumTotal - sumCompleted;
-            totalTrHtml += `<td class="cursor-pointer text-danger fw-bold" onclick="openModalForCount('pending_custom', null, 'Pending Files')">${sumPending}</td>`;
+            totalTrHtml += `<td class="cursor-pointer text-danger-dark" onclick="openModalForCount('pending_custom', null, 'Pending Files')">${sumPending}</td>`;
 
-            // 3. Non-completed statuses
+            // 3. Non-completed statuses 
             nonCompletedStatuses.forEach(s => {
                 const style = getStatusStyle(s.status_name);
                 totalTrHtml += `<td class="cursor-pointer ${style.badgeClass}" onclick="openModalForCount('status', '${s.id}', 'Status: ' + this.getAttribute('data-status-name'))" data-status-name="${escapeHtml(s.status_name)}">${sumStatuses[s.id]}</td>`;
             });
 
+            const ageDNone = showVendorAgeBreakdown ? '' : 'd-none';
             totalTrHtml += `
-                <td class="cursor-pointer" onclick="openModalForCount('age', [1, 15], 'Age: 1-15 Days')">${sumAge1_15}</td>
-                <td class="cursor-pointer" onclick="openModalForCount('age', [16, 30], 'Age: 16-30 Days')">${sumAge16_30}</td>
-                <td class="cursor-pointer" onclick="openModalForCount('age', [31, 60], 'Age: 31-60 Days')">${sumAge31_60}</td>
-                <td class="cursor-pointer" onclick="openModalForCount('age', [61, 90], 'Age: 61-90 Days')">${sumAge61_90}</td>
-                <td class="cursor-pointer" onclick="openModalForCount('age', [91, 120], 'Age: 91-120 Days')">${sumAge91_120}</td>
-                <td class="cursor-pointer text-danger" onclick="openModalForCount('age', [121, null], 'Age: Over 120 Days')">${sumAgeOver120}</td>
+                <td class="cursor-pointer age-col ${ageDNone}" onclick="openModalForCount('age', [1, 15], 'Age: 1-15 Days')">${sumAge1_15}</td>
+                <td class="cursor-pointer age-col ${ageDNone}" onclick="openModalForCount('age', [16, 30], 'Age: 16-30 Days')">${sumAge16_30}</td>
+                <td class="cursor-pointer age-col ${ageDNone}" onclick="openModalForCount('age', [31, 60], 'Age: 31-60 Days')">${sumAge31_60}</td>
+                <td class="cursor-pointer age-col ${ageDNone}" onclick="openModalForCount('age', [61, 90], 'Age: 61-90 Days')">${sumAge61_90}</td>
+                <td class="cursor-pointer age-col ${ageDNone}" onclick="openModalForCount('age', [91, 120], 'Age: 91-120 Days')">${sumAge91_120}</td>
+                <td class="cursor-pointer text-danger age-col ${ageDNone}" onclick="openModalForCount('age', [121, null], 'Age: Over 120 Days')">${sumAgeOver120}</td>
             `;
             totalTr.innerHTML = totalTrHtml;
             tbody.appendChild(totalTr);
@@ -3293,10 +3428,26 @@
         // --- COUNT DETAILS MODAL LOGIC ---
         let modalClickFilter = null; // Stores { clickType, clickValue, displayName, vendorName, col }
         let countDetailsModalObj = null;
+        let activeModalQuickType = 'all';
+        let activeModalQuickStatus = 'all';
 
         function openModalForCount(clickType, clickValue, displayName, vendorName = null, col = null) {
             modalClickFilter = { clickType, clickValue, displayName, vendorName, col };
 
+            if (clickType === 'category' && clickValue) {
+                activeModalQuickType = clickValue;
+            } else {
+                activeModalQuickType = 'all';
+            }
+
+            if (clickType === 'status' && clickValue) {
+                activeModalQuickStatus = String(clickValue);
+            } else if (clickType === 'vendor_status' && col) {
+                activeModalQuickStatus = String(col);
+            } else {
+                activeModalQuickStatus = 'all';
+            }
+
             // Set modal title
             document.getElementById('countDetailsModalLabel').innerHTML = `<i class="fa-solid fa-list-check me-2"></i>Count Details: ${escapeHtml(displayName)}`;
 
@@ -3389,6 +3540,163 @@
             }
         }
 
+        function updateModalQuickFilters(clickFilteredRecords) {
+            const container = document.getElementById('modal-type-badges');
+            if (!container) return;
+
+            // Calculate count for each category in clickFilteredRecords
+            const counts = {
+                all: clickFilteredRecords.length,
+                'tax invoice': 0,
+                'sd': 0,
+                'emd': 0,
+                'asd': 0,
+                'agreement': 0,
+                'status_not_updated': 0
+            };
+
+            clickFilteredRecords.forEach(row => {
+                const cat = getCategoryCode(row.resolved_type || row.type);
+                if (cat in counts) {
+                    counts[cat]++;
+                } else {
+                    counts['status_not_updated']++;
+                }
+            });
+
+            const quickTypes = [
+                { key: 'all', label: 'All Bills', color: '#0f5c78', textLight: '#e0f2fe', bgLight: '#f0f9ff' },
+                { key: 'tax invoice', label: 'Tax Invoice', color: '#166534', textLight: '#dcfce7', bgLight: '#f0fdf4' },
+                { key: 'sd', label: 'Security Deposit', color: '#1e40af', textLight: '#dbeafe', bgLight: '#eff6ff' },
+                { key: 'emd', label: 'EMD', color: '#6b21a8', textLight: '#f3e8ff', bgLight: '#faf5ff' },
+                { key: 'asd', label: 'ASD', color: '#9a3412', textLight: '#ffedd5', bgLight: '#fff7ed' },
+                { key: 'agreement', label: 'Agreement', color: '#9d174d', textLight: '#fce7f3', bgLight: '#fdf2f8' },
+                { key: 'status_not_updated', label: 'Type Not Updated', color: '#374151', textLight: '#f3f4f6', bgLight: '#f9fafb' }
+            ];
+
+            let html = '';
+            quickTypes.forEach(t => {
+                const count = counts[t.key] || 0;
+                const isActive = activeModalQuickType === t.key;
+
+                let badgeStyle, countStyle;
+                if (isActive) {
+                    badgeStyle = `background-color: ${t.color}; color: white; border-color: ${t.color}; font-weight: 600; font-size: 0.95rem; padding: 8px 18px; box-shadow: 0 3px 10px rgba(0,0,0,0.1);`;
+                    countStyle = `background-color: ${t.textLight}; color: ${t.color}; font-size: 0.85rem; font-weight: 800; padding: 3px 9px; border-radius: 12px;`;
+                } else {
+                    badgeStyle = `background-color: white; color: #334155; border-color: #cbd5e1; font-weight: 500; font-size: 0.95rem; padding: 8px 18px;`;
+                    countStyle = `background-color: ${t.bgLight}; color: ${t.color}; font-size: 0.85rem; font-weight: 800; padding: 3px 9px; border-radius: 12px;`;
+                }
+
+                html += `
+                    <span class="badge cursor-pointer border rounded-pill d-inline-flex align-items-center gap-2" 
+                          style="${badgeStyle} cursor: pointer; transition: all 0.2s;" 
+                          onclick="setModalQuickType('${t.key}')">
+                        ${escapeHtml(t.label)}
+                        <span style="${countStyle}">${count}</span>
+                    </span>
+                `;
+            });
+
+            container.innerHTML = html;
+        }
+
+        function updateModalStatusBadges(typeFiltered) {
+            const container = document.getElementById('modal-status-badges');
+            if (!container) return;
+
+            // Calculate count for each status in typeFiltered
+            const counts = { all: typeFiltered.length };
+            typeFiltered.forEach(row => {
+                const statusVal = String(row.status || '').trim();
+                const statusName = String(row.resolved_status || getStatusName(row.status) || '').trim();
+
+                const matched = activeStatus.find(s =>
+                    String(s.id) === statusVal ||
+                    s.status_name.toLowerCase().trim() === statusName.toLowerCase().trim()
+                );
+                if (matched) {
+                    counts[matched.id] = (counts[matched.id] || 0) + 1;
+                }
+            });
+
+            // Render status filter badges
+            let html = '';
+
+            // 'All Statuses' badge
+            const isAllActive = activeModalQuickStatus === 'all';
+            const allStyle = isAllActive
+                ? `background-color: #0f5c78; color: white; border-color: #0f5c78; font-weight: 600; font-size: 0.95rem; padding: 8px 18px; box-shadow: 0 3px 10px rgba(0,0,0,0.1);`
+                : `background-color: white; color: #334155; border-color: #cbd5e1; font-weight: 500; font-size: 0.95rem; padding: 8px 18px;`;
+            const allCountStyle = isAllActive
+                ? `background-color: #e0f2fe; color: #0f5c78; font-size: 0.85rem; font-weight: 800; padding: 3px 9px; border-radius: 12px;`
+                : `background-color: #f0f9ff; color: #0f5c78; font-size: 0.85rem; font-weight: 800; padding: 3px 9px; border-radius: 12px;`;
+
+            html += `
+                <span class="badge cursor-pointer border rounded-pill d-inline-flex align-items-center gap-2" 
+                      style="${allStyle} cursor: pointer; transition: all 0.2s;" 
+                      onclick="setModalQuickStatus('all')">
+                    All Statuses
+                    <span style="${allCountStyle}">${counts.all}</span>
+                </span>
+            `;
+
+            activeStatus.forEach(s => {
+                const count = counts[s.id] || 0;
+                const isActive = activeModalQuickStatus === String(s.id);
+
+                const colorInfo = getStatusStyle(s.status_name);
+                const primaryColor = colorInfo.text || '#475569';
+                const bgLight = colorInfo.bg || '#f1f5f9';
+
+                let badgeStyle, countStyle;
+                if (isActive) {
+                    badgeStyle = `background-color: ${primaryColor}; color: white; border-color: ${primaryColor}; font-weight: 600; font-size: 0.95rem; padding: 8px 18px; box-shadow: 0 3px 10px rgba(0,0,0,0.1);`;
+                    countStyle = `background-color: white; color: ${primaryColor}; font-size: 0.85rem; font-weight: 800; padding: 3px 9px; border-radius: 12px;`;
+                } else {
+                    badgeStyle = `background-color: white; color: #334155; border-color: #cbd5e1; font-weight: 500; font-size: 0.95rem; padding: 8px 18px;`;
+                    countStyle = `background-color: ${bgLight}; color: ${primaryColor}; font-size: 0.85rem; font-weight: 800; padding: 3px 9px; border-radius: 12px;`;
+                }
+
+                html += `
+                    <span class="badge cursor-pointer border rounded-pill d-inline-flex align-items-center gap-2" 
+                          style="${badgeStyle} cursor: pointer; transition: all 0.2s;" 
+                          onclick="setModalQuickStatus('${s.id}')">
+                        ${escapeHtml(s.status_name)}
+                        <span style="${countStyle}">${count}</span>
+                    </span>
+                `;
+            });
+
+            container.innerHTML = html;
+        }
+
+        function setModalQuickStatus(statusId) {
+            activeModalQuickStatus = statusId;
+            const modalStatusSelect = document.getElementById('modal-filter-status');
+            if (modalStatusSelect) modalStatusSelect.value = statusId;
+
+            if (statusId !== 'all') {
+                activeModalQuickType = 'all';
+                const modalTypeSelect = document.getElementById('modal-filter-type');
+                if (modalTypeSelect) modalTypeSelect.value = 'all';
+            }
+            applyModalFilters();
+        }
+
+        function setModalQuickType(key) {
+            activeModalQuickType = key;
+            const modalTypeSelect = document.getElementById('modal-filter-type');
+            if (modalTypeSelect) modalTypeSelect.value = key;
+
+            if (key !== 'all') {
+                activeModalQuickStatus = 'all';
+                const modalStatusSelect = document.getElementById('modal-filter-status');
+                if (modalStatusSelect) modalStatusSelect.value = 'all';
+            }
+            applyModalFilters();
+        }
+
         function applyModalFilters() {
             if (!modalClickFilter) return;
 
@@ -3400,8 +3708,8 @@
 
             const { clickType, clickValue, vendorName, col } = modalClickFilter;
 
-            let filtered = allRecords.filter(row => {
-                // 1. Apply the original click filters from the cell / card
+            // Step 1: Filter by click context
+            let clickFiltered = allRecords.filter(row => {
                 let age = parseInt(calculateAgeOfBill(row.received_date), 10);
 
                 if (clickType === 'category') {
@@ -3551,38 +3859,80 @@
                     if (row.updated_date !== clickValue) return false;
                 }
 
-                // 2. Apply the modal dropdown filters
-                if (selectedType !== 'all') {
+                return true;
+            });
+
+            // Step 2: Render type quick filter badges using clickFiltered dataset
+            updateModalQuickFilters(clickFiltered);
+
+            // Step 3: Apply activeModalQuickType filter
+            let filtered = clickFiltered;
+            if (activeModalQuickType !== 'all') {
+                filtered = filtered.filter(row => {
+                    const cat = getCategoryCode(row.resolved_type || row.type);
+                    if (activeModalQuickType === 'status_not_updated') {
+                        return cat === 'status_not_updated';
+                    }
+                    return cat === activeModalQuickType;
+                });
+            }
+
+            // Step 3.5: Dynamically calculate and update status counts and render status filter badges
+            updateModalStatusBadges(filtered);
+
+            // Step 3.6: Apply activeModalQuickStatus filter
+            if (activeModalQuickStatus !== 'all') {
+                filtered = filtered.filter(row => {
+                    const statusVal = String(row.status || '').trim();
+                    const statusName = String(row.resolved_status || getStatusName(row.status) || '').trim();
+
+                    const matched = activeStatus.find(s => String(s.id) === activeModalQuickStatus);
+                    if (matched) {
+                        return statusVal === String(matched.id) ||
+                            statusName.toLowerCase().trim() === matched.status_name.toLowerCase().trim();
+                    }
+                    return true;
+                });
+            }
+
+            // Step 4: Apply other modal dropdowns and search query
+            if (selectedType !== 'all') {
+                filtered = filtered.filter(row => {
                     if (selectedType === 'status_not_updated') {
                         const rowType = String(row.type || '').trim();
-                        if (rowType !== '') return false;
+                        return rowType === '';
                     } else {
                         const rowCategory = getCategoryCode(row.resolved_type || row.type);
-                        if (rowCategory !== selectedType) return false;
+                        return rowCategory === selectedType;
                     }
-                }
+                });
+            }
 
-                if (selectedStatus !== 'all') {
+            if (selectedStatus !== 'all') {
+                filtered = filtered.filter(row => {
                     const rowStatusStr = String(row.status || '').trim();
                     const matched = activeStatus.find(s => String(s.id) === selectedStatus);
                     if (matched) {
-                        const matches = rowStatusStr === String(matched.id) ||
+                        return rowStatusStr === String(matched.id) ||
                             rowStatusStr.toLowerCase() === matched.status_name.toLowerCase().trim();
-                        if (!matches) return false;
                     }
-                }
+                    return true;
+                });
+            }
 
-                if (selectedVendor !== 'all') {
+            if (selectedVendor !== 'all') {
+                filtered = filtered.filter(row => {
                     const rowVendor = String(row.resolved_vendor || row.vendor_name || '').trim();
-                    if (rowVendor.toLowerCase() !== selectedVendor.toLowerCase()) return false;
-                }
+                    return rowVendor.toLowerCase() === selectedVendor.toLowerCase();
+                });
+            }
 
-                // 3. Apply the modal search keyword
-                if (query) {
+            if (query) {
+                filtered = filtered.filter(row => {
                     const vName = String(row.resolved_vendor || row.vendor_name || '').toLowerCase();
                     const tName = String(row.resolved_type || row.type || '').toLowerCase();
                     const statusName = String(row.resolved_status || getStatusName(row.status) || '').toLowerCase();
-                    const matchesSearch = (
+                    return (
                         vName.includes(query) ||
                         tName.includes(query) ||
                         (row.subject && String(row.subject).toLowerCase().includes(query)) ||
@@ -3594,11 +3944,26 @@
                         (row.tat && String(row.tat).toLowerCase().includes(query)) ||
                         statusName.includes(query)
                     );
-                    if (!matchesSearch) return false;
-                }
+                });
+            }
 
-                return true;
-            });
+            // Sort modal dataset
+            if (modalSortCol) {
+                filtered.sort((a, b) => {
+                    let valA = a[modalSortCol] || '';
+                    let valB = b[modalSortCol] || '';
+
+                    let timeA = valA ? new Date(valA).getTime() : 0;
+                    let timeB = valB ? new Date(valB).getTime() : 0;
+                    if (isNaN(timeA)) timeA = 0;
+                    if (isNaN(timeB)) timeB = 0;
+
+                    if (timeA !== timeB) {
+                        return modalSortAsc ? timeA - timeB : timeB - timeA;
+                    }
+                    return modalSortAsc ? String(valA).localeCompare(String(valB)) : String(valB).localeCompare(String(valA));
+                });
+            }
 
             renderModalTable(filtered);
         }
@@ -3887,7 +4252,7 @@
                     <th>Vendor Name</th>
                     <th>Amount</th>
                     <th>Age of Bill (Days)</th>
-                    <th>Status (Pending / Completed)</th>
+                    <th>Status</th>
                     <th>Remarks</th>
                     <th>Last Updated At</th>
                     <th>Last Updated By</th>
diff --git a/src/main/resources/templates/gcctonermanagement/upload.html b/src/main/resources/templates/gcctonermanagement/upload.html
index 62668c3..05ebf17 100644
--- a/src/main/resources/templates/gcctonermanagement/upload.html
+++ b/src/main/resources/templates/gcctonermanagement/upload.html
@@ -12,82 +12,289 @@
     </script>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>GCC Toner Upload Portal</title>
+    <title>GCC Toner Management System</title>
 
     <!-- CSRF Tokens -->
     <meta th:if="${_csrf != null}" name="_csrf" th:content="${_csrf.token}" />
     <meta th:if="${_csrf != null}" name="_csrf_header" th:content="${_csrf.headerName}" />
 
-    <!-- Header Fragment -->
-    <th:block th:replace="~{fragments/tonerheader :: tonerheader}"></th:block>
-
     <!-- Google Fonts -->
     <link
         href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=Poppins:wght@300;400;500;600;700&display=swap"
         rel="stylesheet">
 
+    <!-- Bootstrap & FontAwesome -->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">
+    <link rel="stylesheet" th:href="@{/assets/font-awesome-6.5.2/css/all.min.css}" type="text/css">
+
+    <!-- SweetAlert2 -->
+    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
+
+    <!-- jsPDF & AutoTable -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.5.31/jspdf.plugin.autotable.min.js"></script>
+
     <!-- Styles -->
     <style>
         body {
-            background-color: #f4f7f6;
+            background-color: #f1f5f9;
             font-family: 'Poppins', sans-serif;
-            color: #333;
+            color: #334155;
+            min-height: 100vh;
         }
 
-        .main-container {
-            max-width: 800px;
-            margin: 40px auto;
-            padding: 0 20px;
+        .header {
+            background: linear-gradient(135deg, #09303d, #0f5c78);
+            color: #fff;
+            padding: 15px 30px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
         }
 
-        .page-header {
+        .logo-left {
             display: flex;
-            justify-content: space-between;
             align-items: center;
-            margin-bottom: 30px;
+            gap: 15px;
         }
 
-        .page-title {
+        .logo-left img {
+            width: 50px;
+            height: 50px;
+        }
+
+        .logo-text h2 {
             font-family: 'Outfit', sans-serif;
-            font-size: 2rem;
+            font-size: 1.15rem;
             font-weight: 700;
-            color: #0f5c78;
             margin: 0;
+            line-height: 1.2;
+            letter-spacing: 0.5px;
+        }
+
+        .logo-text p {
+            font-size: 0.72rem;
+            margin: 0;
+            color: #aed6f1;
+        }
+
+        .user-badge {
+            background: rgba(255, 255, 255, 0.15);
+            padding: 8px 16px;
+            border-radius: 20px;
+            font-size: 0.85rem;
+            font-weight: 600;
             display: flex;
             align-items: center;
-            gap: 12px;
+            gap: 8px;
         }
 
-        .btn-back {
-            background-color: #ffffff;
-            color: #475569;
+        .btn-logout {
+            background: #ef4444;
+            color: #fff;
+            border: none;
+            padding: 8px 16px;
+            border-radius: 20px;
+            font-size: 0.85rem;
             font-weight: 600;
-            border: 1.5px solid #cbd5e1;
-            padding: 10px 20px;
-            border-radius: 30px;
-            transition: all 0.3s ease;
+            cursor: pointer;
+            transition: all 0.3s;
             text-decoration: none;
             display: inline-flex;
             align-items: center;
-            gap: 8px;
+            gap: 6px;
         }
 
-        .btn-back:hover {
-            background-color: #f1f5f9;
+        .btn-logout:hover {
+            background: #dc2626;
+            color: #fff;
+            transform: translateY(-1px);
+        }
+
+        /* SPA Layout */
+        .app-container {
+            display: flex;
+            min-height: calc(100vh - 80px);
+        }
+
+        /* Sidebar styling */
+        .sidebar {
+            width: 260px;
+            background-color: #0f242d;
+            padding: 25px 15px;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            border-right: 1px solid rgba(255, 255, 255, 0.05);
+            flex-shrink: 0;
+        }
+
+        .sidebar-title {
+            color: #94a3b8;
+            font-size: 0.75rem;
+            font-weight: 700;
+            text-transform: uppercase;
+            letter-spacing: 1px;
+            padding-left: 12px;
+            margin-bottom: 15px;
+        }
+
+        .nav-tab {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            padding: 12px 18px;
+            color: #cbd5e1;
+            font-size: 0.92rem;
+            font-weight: 600;
+            border-radius: 12px;
+            text-decoration: none;
+            transition: all 0.3s ease;
+            cursor: pointer;
+        }
+
+        .nav-tab i {
+            font-size: 1.1rem;
+            width: 20px;
+            text-align: center;
+        }
+
+        .nav-tab:hover {
+            background-color: rgba(255, 255, 255, 0.05);
+            color: #ffffff;
+        }
+
+        .nav-tab.active {
+            background: linear-gradient(135deg, #0f5c78, #1781a6);
+            color: #ffffff;
+            box-shadow: 0 4px 12px rgba(15, 92, 120, 0.3);
+        }
+
+        /* Main Content wrapper */
+        .main-content {
+            flex-grow: 1;
+            padding: 40px;
+            overflow-y: auto;
+        }
+
+        .view-panel {
+            display: none;
+            animation: fadeIn 0.4s ease forwards;
+        }
+
+        .view-panel.active {
+            display: block;
+        }
+
+        @keyframes fadeIn {
+            from {
+                opacity: 0;
+                transform: translateY(10px);
+            }
+
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+
+        .section-header {
+            margin-bottom: 30px;
+        }
+
+        .section-title {
+            font-family: 'Outfit', sans-serif;
+            font-size: 1.75rem;
+            font-weight: 700;
             color: #0f5c78;
-            border-color: #0f5c78;
+            margin: 0;
+            display: flex;
+            align-items: center;
+            gap: 12px;
         }
 
-        .upload-card {
+        /* Report Metrics Cards */
+        .metrics-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+            gap: 20px;
+            margin-bottom: 35px;
+        }
+
+        .metric-card {
+            background: #ffffff;
+            border-radius: 16px;
+            padding: 24px;
+            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
+            border: 1px solid rgba(15, 92, 120, 0.05);
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            position: relative;
+            overflow: hidden;
+        }
+
+        .metric-card::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 5px;
+            height: 100%;
+        }
+
+        .card-blue::before {
+            background-color: #2563eb;
+        }
+
+        .card-green::before {
+            background-color: #10b981;
+        }
+
+        .card-amber::before {
+            background-color: #f59e0b;
+        }
+
+        .metric-info {
+            display: flex;
+            flex-direction: column;
+            gap: 5px;
+        }
+
+        .metric-label {
+            font-size: 0.85rem;
+            font-weight: 700;
+            color: #64748b;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+        }
+
+        .metric-value {
+            font-family: 'Outfit', sans-serif;
+            font-size: 1.85rem;
+            font-weight: 800;
+            color: #1e293b;
+        }
+
+        .metric-icon {
+            font-size: 2.2rem;
+            opacity: 0.15;
+            color: #0f5c78;
+        }
+
+        /* Tables & Forms Card */
+        .card-custom {
             background: #ffffff;
             border-radius: 20px;
-            border: 1px solid rgba(15, 92, 120, 0.08);
-            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.04);
-            padding: 40px;
+            box-shadow: 0 4px 25px rgba(0, 0, 0, 0.03);
+            border: 1px solid rgba(15, 92, 120, 0.05);
+            padding: 35px;
+            margin-bottom: 30px;
         }
 
         .form-label {
-            font-size: 0.9rem;
+            font-size: 0.88rem;
             font-weight: 600;
             color: #475569;
             margin-bottom: 8px;
@@ -113,126 +320,62 @@
             box-shadow: 0 0 0 3px rgba(15, 92, 120, 0.15);
         }
 
-        .form-group {
-            margin-bottom: 24px;
-        }
-
-        .category-select-group {
-            display: flex;
-            flex-direction: column;
-            gap: 12px;
+        .form-control-custom:disabled {
+            background-color: #e2e8f0;
+            cursor: not-allowed;
         }
 
-        /* Drag & Drop Zone */
-        .dropzone-container {
+        /* File Upload Zone */
+        .file-upload-card {
             border: 2px dashed #cbd5e1;
-            border-radius: 16px;
-            padding: 40px 20px;
-            text-align: center;
             background-color: #f8fafc;
+            border-radius: 12px;
+            padding: 20px 10px;
+            text-align: center;
             cursor: pointer;
             transition: all 0.3s ease;
-            position: relative;
-            margin-bottom: 24px;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            gap: 8px;
+            height: 120px;
         }
 
-        .dropzone-container:hover,
-        .dropzone-container.dragover {
+        .file-upload-card:hover {
             border-color: #0f5c78;
             background-color: rgba(15, 92, 120, 0.03);
+            transform: translateY(-2px);
         }
 
-        .dropzone-icon {
-            font-size: 3rem;
-            color: #94a3b8;
-            margin-bottom: 16px;
-            transition: color 0.3s ease;
-        }
-
-        .dropzone-container:hover .dropzone-icon {
-            color: #0f5c78;
-        }
-
-        .dropzone-text {
-            font-size: 1rem;
-            color: #475569;
-            font-weight: 500;
-            margin-bottom: 8px;
+        .file-upload-card.file-selected {
+            border-color: #166534;
+            background-color: #f0fdf4;
         }
 
-        .dropzone-hint {
-            font-size: 0.8rem;
+        .upload-card-icon {
+            font-size: 1.8rem;
             color: #94a3b8;
         }
 
-        .file-input-hidden {
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            opacity: 0;
-            cursor: pointer;
-        }
-
-        .selected-file-banner {
-            background-color: #f0fdf4;
-            border: 1px solid #bbf7d0;
-            border-radius: 10px;
-            padding: 12px 18px;
-            margin-bottom: 24px;
-            display: none;
-            align-items: center;
-            justify-content: space-between;
-        }
-
-        .selected-file-details {
-            display: flex;
-            align-items: center;
-            gap: 12px;
+        .file-upload-card.file-selected .upload-card-icon {
             color: #166534;
-            font-size: 0.9rem;
-            font-weight: 500;
         }
 
-        .btn-remove-file {
-            background: none;
-            border: none;
-            color: #b91c1c;
-            font-size: 1.1rem;
-            cursor: pointer;
-        }
-
-        /* Progress Bar */
-        .progress-container {
-            display: none;
-            margin-bottom: 24px;
-        }
-
-        .progress-bar-wrapper {
-            background-color: #e2e8f0;
-            height: 8px;
-            border-radius: 10px;
-            overflow: hidden;
-        }
-
-        .progress-bar-fill {
-            background: linear-gradient(90deg, #0f5c78, #1781a6);
-            height: 100%;
-            width: 0%;
-            transition: width 0.1s ease;
+        .upload-card-text {
+            font-size: 0.85rem;
+            font-weight: 500;
+            color: #64748b;
+            word-break: break-all;
+            max-width: 100%;
         }
 
-        .progress-text {
-            display: flex;
-            justify-content: space-between;
-            font-size: 0.85rem;
+        .file-upload-card.file-selected .upload-card-text {
+            color: #166534;
             font-weight: 600;
-            color: #64748b;
-            margin-bottom: 6px;
         }
 
-        .btn-submit-upload {
+        .btn-submit {
             width: 100%;
             height: 50px;
             border-radius: 12px;
@@ -250,13 +393,13 @@
             gap: 8px;
         }
 
-        .btn-submit-upload:hover {
+        .btn-submit:hover {
             background: linear-gradient(135deg, #1781a6, #0f5c78);
             transform: translateY(-2px);
             box-shadow: 0 6px 20px rgba(15, 92, 120, 0.3);
         }
 
-        .btn-submit-upload:disabled {
+        .btn-submit:disabled {
             background: #cbd5e1;
             color: #94a3b8;
             box-shadow: none;
@@ -264,234 +407,566 @@
             transform: none;
         }
 
-        .file-upload-card {
-            border: 2px dashed #cbd5e1;
+        /* Custom Data Grid Table */
+        .grid-table {
+            font-size: 0.85rem;
+            width: 100%;
+        }
+
+        .grid-table th {
+            background-color: #f1f5f9 !important;
+            color: #475569 !important;
+            font-weight: 700;
+            text-transform: uppercase;
+            font-size: 0.75rem;
+            letter-spacing: 0.5px;
+            padding: 14px 10px;
+            border-bottom: 2px solid #cbd5e1 !important;
+        }
+
+        .grid-table td {
+            padding: 12px 10px;
+            vertical-align: middle;
+            border-bottom: 1px solid #e2e8f0;
+        }
+
+        .grid-table tbody tr:hover {
             background-color: #f8fafc;
-            border-radius: 12px;
-            padding: 20px 10px;
-            text-align: center;
-            cursor: pointer;
-            transition: all 0.3s ease;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            justify-content: center;
-            gap: 8px;
-            height: 120px;
         }
 
-        .file-upload-card:hover {
-            border-color: #0f5c78;
-            background-color: rgba(15, 92, 120, 0.03);
-            transform: translateY(-2px);
+        /* Progress Bar */
+        .progress-container {
+            display: none;
+            margin-top: 15px;
         }
 
-        .file-upload-card.file-selected {
-            border-color: #166534;
-            background-color: #f0fdf4;
+        .progress-bar-wrapper {
+            background-color: #e2e8f0;
+            height: 8px;
+            border-radius: 10px;
+            overflow: hidden;
+        }
+
+        .progress-bar-fill {
+            background: linear-gradient(90deg, #0f5c78, #1781a6);
+            height: 100%;
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+
+        .progress-text {
+            display: flex;
+            justify-content: space-between;
+            font-size: 0.8rem;
+            font-weight: 600;
+            color: #64748b;
+            margin-bottom: 6px;
         }
 
-        .upload-card-icon {
-            font-size: 1.8rem;
-            color: #94a3b8;
-            transition: color 0.3s ease;
+        .btn-action {
+            padding: 5px 12px;
+            font-size: 0.8rem;
+            font-weight: 600;
+            border-radius: 6px;
+            text-decoration: none;
+            display: inline-flex;
+            align-items: center;
+            gap: 5px;
+            transition: all 0.2s;
         }
 
-        .file-upload-card:hover .upload-card-icon {
-            color: #0f5c78;
+        .btn-pdf {
+            background-color: #fef2f2;
+            color: #b91c1c;
+            border: 1px solid #fee2e2;
         }
 
-        .file-upload-card.file-selected .upload-card-icon {
-            color: #166534;
+        .btn-pdf:hover {
+            background-color: #b91c1c;
+            color: #ffffff;
         }
 
-        .upload-card-text {
-            font-size: 0.85rem;
-            font-weight: 500;
-            color: #64748b;
-            word-break: break-all;
-            max-width: 100%;
-            padding: 0 4px;
+        .btn-view-doc {
+            background-color: #eff6ff;
+            color: #1d4ed8;
+            border: 1px solid #dbeafe;
         }
 
-        .file-upload-card.file-selected .upload-card-text {
-            color: #166534;
-            font-weight: 600;
+        .btn-view-doc:hover {
+            background-color: #1d4ed8;
+            color: #ffffff;
         }
     </style>
-    <!-- SweetAlert2 -->
-    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
 </head>
 
 <body>
 
-    <div class="main-container">
-
-        <!-- Header -->
-        <div class="page-header">
-            <h1 class="page-title">
-                <i class="fa-solid fa-cloud-arrow-up text-primary"></i>
-                Inward Register 
-            </h1>
-            <div class="header-actions" style="display: flex; align-items: center; gap: 16px; flex-wrap: wrap;">
-                <!-- User welcome badge -->
-                <div th:if="${isLoggedIn}" class="user-badge"
-                    style="background-color: #e2e8f0; padding: 8px 16px; border-radius: 20px; font-size: 0.9rem; font-weight: 600; color: #475569; display: flex; align-items: center; gap: 8px;">
-                    <i class="fa-solid fa-circle-user" style="color: #0f5c78; font-size: 1.1rem;"></i>
-                    <span th:text="${usrName}">User</span>
+    <!-- Header -->
+    <div class="header">
+        <div class="logo-left">
+            <img th:src="@{/assets/header-images/gcc1.png}" alt="GCC Logo">
+            <div class="logo-text">
+                <h2>GREATER CHENNAI CORPORATION</h2>
+                <p>IT Cell - Toner Management Portal</p>
+            </div>
+        </div>
+        <div class="d-flex align-items-center gap-3">
+            <div th:if="${isLoggedIn}" class="user-badge">
+                <i class="fa-solid fa-circle-user text-white"></i>
+                <span th:text="${usrName}">User</span>
+            </div>
+            <a th:if="${isLoggedIn}" th:href="@{/gcctonermanagement/logout}" class="btn-logout">
+                <i class="fa-solid fa-right-from-bracket"></i> Logout
+            </a>
+        </div>
+    </div>
+
+    <!-- Application Layout -->
+    <div class="app-container">
+        <!-- Sidebar Navigation -->
+        <div class="sidebar">
+            <div class="sidebar-title">Menu Options</div>
+            <a class="nav-tab active" onclick="switchView('report')">
+                <i class="fa-solid fa-chart-column"></i>
+                Report Page
+            </a>
+            <a class="nav-tab" onclick="switchView('inward')">
+                <i class="fa-solid fa-cloud-arrow-up"></i>
+                Inward Register
+            </a>
+            <a class="nav-tab" onclick="switchView('request')">
+                <i class="fa-solid fa-file-invoice"></i>
+                User Request Details
+            </a>
+            <a class="nav-tab" onclick="switchView('outward')">
+                <i class="fa-solid fa-truck-ramp-box"></i>
+                Outward Register
+            </a>
+        </div>
+
+        <!-- Main Content Area -->
+        <div class="main-content">
+
+            <!-- ================= REPORT PANEL ================= -->
+            <div id="panel-report" class="view-panel active">
+                <div class="section-header">
+                    <h1 class="section-title">
+                        <i class="fa-solid fa-chart-pie"></i>
+                        Toner Inventory Dashboard
+                    </h1>
+                </div>
+
+                <!-- Stats Cards -->
+                <div class="metrics-grid">
+                    <div class="metric-card card-blue">
+                        <div class="metric-info">
+                            <span class="metric-label">Total Raised</span>
+                            <span class="metric-value" id="stats-raised">0</span>
+                        </div>
+                        <i class="fa-solid fa-file-lines metric-icon"></i>
+                    </div>
+                    <div class="metric-card card-green">
+                        <div class="metric-info">
+                            <span class="metric-label">Total Distributed</span>
+                            <span class="metric-value" id="stats-distributed">0</span>
+                        </div>
+                        <i class="fa-solid fa-truck-fast metric-icon"></i>
+                    </div>
+                    <div class="metric-card card-amber">
+                        <div class="metric-info">
+                            <span class="metric-label">Available Stock</span>
+                            <span class="metric-value" id="stats-stock">0</span>
+                        </div>
+                        <i class="fa-solid fa-warehouse metric-icon"></i>
+                    </div>
                 </div>
 
-                <a th:href="@{/gcctonermanagement/view}" class="btn-back">
-                    <i class="fa-solid fa-arrow-left"></i>
-                    Back to View Report
-                </a>
-
-                <!-- Logout link -->
-                <a th:if="${isLoggedIn}" th:href="@{/gcctonermanagement/logout}" class="btn-logout-link"
-                    style="color: #ef4444; font-weight: 600; font-size: 0.95rem; text-decoration: none; display: flex; align-items: center; gap: 6px; transition: color 0.2s ease;"
-                    onmouseover="this.style.color='#b91c1c'" onmouseout="this.style.color='#ef4444'">
-                    <i class="fa-solid fa-right-from-bracket"></i>
-                    Logout
-                </a>
+                <!-- Inventory Balance Table -->
+                <div class="card-custom">
+                    <h5 class="fw-bold mb-4" style="color: #0f5c78;">
+                        <i class="fa-solid fa-warehouse me-2"></i>Current Stock Summary
+                    </h5>
+                    <div class="table-responsive">
+                        <table class="table grid-table align-middle">
+                            <thead>
+                                <tr>
+                                    <th>Sr. No.</th>
+                                    <th>Printer Model</th>
+                                    <th>Toner Model</th>
+                                    <th class="text-center">Total Inward</th>
+                                    <th class="text-center">Total Outward</th>
+                                    <th class="text-center">Available Stock</th>
+                                </tr>
+                            </thead>
+                            <tbody id="report-table-body">
+                                <tr>
+                                    <td colspan="6" class="text-center text-muted py-4">Loading report details...</td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
             </div>
-        </div>
 
-        <!-- Upload Card -->
-        <div class="upload-card">
-            <form id="upload-form" onsubmit="handleUpload(event)">
-
-                <!-- Company Name -->
-                <div class="form-group mb-4">
-                    <label class="form-label" for="company-name-input">
-                        <i class="fa-solid fa-building me-1 text-primary"></i> Company Name *
-                    </label>
-                    <input type="text" id="company-name-input" required class="form-control-custom"
-                        placeholder="Enter company name" maxlength="30">
+            <!-- ================= INWARD REGISTER PANEL ================= -->
+            <div id="panel-inward" class="view-panel">
+                <div class="section-header">
+                    <h1 class="section-title">
+                        <i class="fa-solid fa-cart-flatbed-suitcases"></i>
+                        Inward Register (Add Stock)
+                    </h1>
+                </div>
+
+                <div class="card-custom" style="max-width: 700px;">
+                    <form id="inward-form" onsubmit="submitInward(event)">
+                        <!-- Company Name -->
+                        <div class="mb-4">
+                            <label class="form-label" for="inward-company-name">
+                                <i class="fa-solid fa-building text-primary me-1"></i> Company Name *
+                            </label>
+                            <input type="text" id="inward-company-name" required class="form-control-custom"
+                                placeholder="Enter company name" maxlength="30">
+                        </div>
+
+                        <!-- Printer Model Dropdown -->
+                        <div class="mb-4">
+                            <label class="form-label" for="inward-printer-select">
+                                <i class="fa-solid fa-print text-primary me-1"></i> Printer Model *
+                            </label>
+                            <select id="inward-printer-select" required class="form-control-custom"
+                                onchange="loadToners('inward')">
+                                <option value="">-- Select Printer Model --</option>
+                            </select>
+                        </div>
+
+                        <!-- Toner Model Dropdown -->
+                        <div class="mb-4">
+                            <label class="form-label" for="inward-toner-select">
+                                <i class="fa-solid fa-droplet text-primary me-1"></i> Toner Model *
+                            </label>
+                            <select id="inward-toner-select" required class="form-control-custom" disabled>
+                                <option value="">-- Select Toner Model --</option>
+                            </select>
+                        </div>
+
+                        <!-- Quantity Registered -->
+                        <div class="mb-4">
+                            <label class="form-label" for="inward-qty">
+                                <i class="fa-solid fa-hashtag text-primary me-1"></i> Quantity Inward *
+                            </label>
+                            <input type="number" id="inward-qty" required class="form-control-custom"
+                                placeholder="Enter quantity" min="1" step="1">
+                        </div>
+
+                        <!-- Delivery Challan DC Upload -->
+                        <div class="mb-4">
+                            <label class="form-label">
+                                <i class="fa-solid fa-file-pdf text-danger me-1"></i> Delivery Challan (DC) Upload
+                            </label>
+                            <div class="file-upload-card" onclick="document.getElementById('inward-dc-file').click()">
+                                <i class="fa-solid fa-cloud-arrow-up upload-card-icon"></i>
+                                <span class="upload-card-text" id="inward-dc-label">Choose PDF File</span>
+                                <input type="file" id="inward-dc-file" accept=".pdf" class="d-none"
+                                    onchange="handleFileSelection(this, 'inward-dc-label')">
+                            </div>
+                        </div>
+
+                        <!-- Progress Bar -->
+                        <div class="progress-container" id="inward-progress-container">
+                            <div class="progress-text">
+                                <span>Uploading...</span>
+                                <span id="inward-progress-percent">0%</span>
+                            </div>
+                            <div class="progress-bar-wrapper">
+                                <div class="progress-bar-fill" id="inward-progress-fill"></div>
+                            </div>
+                        </div>
+
+                        <button type="submit" class="btn-submit mt-3" id="inward-submit-btn">
+                            <i class="fa-solid fa-circle-plus"></i> Save Inward Record
+                        </button>
+                    </form>
                 </div>
+            </div>
 
-                <!-- Printer Model Dropdown -->
-                <div class="form-group mb-4">
-                    <label class="form-label" for="printer-select">
-                        <i class="fa-solid fa-print me-1 text-primary"></i> Printer Model *
-                    </label>
-                    <select id="printer-select" required class="form-control-custom" onchange="onPrinterChange()">
-                        <option value="">-- Select Printer Model --</option>
-                    </select>
+            <!-- ================= USER REQUEST PANEL ================= -->
+            <div id="panel-request" class="view-panel">
+                <div class="section-header">
+                    <h1 class="section-title">
+                        <i class="fa-solid fa-file-signature"></i>
+                        User Request Details (Log Request)
+                    </h1>
                 </div>
 
-                <!-- Toner Model Dropdown -->
-                <div class="form-group mb-4">
-                    <label class="form-label" for="toner-select">
-                        <i class="fa-solid fa-droplet me-1 text-primary"></i> Toner Model *
-                    </label>
-                    <select id="toner-select" required class="form-control-custom" disabled>
-                        <option value="">-- Select Toner Model --</option>
-                    </select>
+                <div class="card-custom" style="max-width: 700px;">
+                    <form id="request-form" onsubmit="submitRequest(event)">
+                        <!-- IT Cell Ref No -->
+                        <div class="mb-4">
+                            <label class="form-label" for="request-itcell">
+                                <i class="fa-solid fa-stamp text-primary me-1"></i> IT Cell Reference No. *
+                            </label>
+                            <input type="text" id="request-itcell" required class="form-control-custom"
+                                placeholder="e.g. IT/2026/001" maxlength="45">
+                        </div>
+
+                        <!-- Department Name -->
+                        <div class="mb-4">
+                            <label class="form-label" for="request-dept">
+                                <i class="fa-solid fa-landmark text-primary me-1"></i> Department / Office Name *
+                            </label>
+                            <input type="text" id="request-dept" required class="form-control-custom"
+                                placeholder="Enter department name" maxlength="30">
+                        </div>
+
+                        <!-- Printer Model Dropdown -->
+                        <div class="mb-4">
+                            <label class="form-label" for="request-printer-select">
+                                <i class="fa-solid fa-print text-primary me-1"></i> Printer Model *
+                            </label>
+                            <select id="request-printer-select" required class="form-control-custom"
+                                onchange="loadToners('request')">
+                                <option value="">-- Select Printer Model --</option>
+                            </select>
+                        </div>
+
+                        <!-- Toner Model Dropdown -->
+                        <div class="mb-4">
+                            <label class="form-label" for="request-toner-select">
+                                <i class="fa-solid fa-droplet text-primary me-1"></i> Toner Model *
+                            </label>
+                            <select id="request-toner-select" required class="form-control-custom" disabled>
+                                <option value="">-- Select Toner Model --</option>
+                            </select>
+                        </div>
+
+                        <!-- Quantity Requested -->
+                        <div class="mb-4">
+                            <label class="form-label" for="request-qty">
+                                <i class="fa-solid fa-hashtag text-primary me-1"></i> Quantity Requested *
+                            </label>
+                            <input type="number" id="request-qty" required class="form-control-custom"
+                                placeholder="Enter requested quantity" min="1" step="1">
+                        </div>
+
+                        <!-- User Request File Upload -->
+                        <div class="mb-4">
+                            <label class="form-label">
+                                <i class="fa-solid fa-file-pdf text-danger me-1"></i> User Request Letter Upload
+                            </label>
+                            <div class="file-upload-card"
+                                onclick="document.getElementById('request-user-file').click()">
+                                <i class="fa-solid fa-cloud-arrow-up upload-card-icon"></i>
+                                <span class="upload-card-text" id="request-user-label">Choose PDF File</span>
+                                <input type="file" id="request-user-file" accept=".pdf" class="d-none"
+                                    onchange="handleFileSelection(this, 'request-user-label')">
+                            </div>
+                        </div>
+
+                        <!-- Progress Bar -->
+                        <div class="progress-container" id="request-progress-container">
+                            <div class="progress-text">
+                                <span>Uploading...</span>
+                                <span id="request-progress-percent">0%</span>
+                            </div>
+                            <div class="progress-bar-wrapper">
+                                <div class="progress-bar-fill" id="request-progress-fill"></div>
+                            </div>
+                        </div>
+
+                        <button type="submit" class="btn-submit mt-3" id="request-submit-btn">
+                            <i class="fa-solid fa-paper-plane"></i> Save User Request
+                        </button>
+                    </form>
                 </div>
+            </div>
 
-                <!-- Quantity -->
-                <div class="form-group mb-4">
-                    <label class="form-label" for="qty-input">
-                        <i class="fa-solid fa-list-ol me-1 text-primary"></i> Quantity *
-                    </label>
-                    <input type="number" id="qty-input" required class="form-control-custom"
-                        placeholder="Enter quantity" min="1" step="1">
+            <!-- ================= OUTWARD REGISTER PANEL ================= -->
+            <div id="panel-outward" class="view-panel">
+                <div class="section-header">
+                    <h1 class="section-title">
+                        <i class="fa-solid fa-truck-moving"></i>
+                        Outward Register (Issue Toner)
+                    </h1>
                 </div>
 
-                <!-- File Upload Options (DC, User Request, Final Delivered) -->
-                <div class="row">
-                    <!-- DC Upload -->
-                    <div class="col-md-4 form-group mb-4">
-                        <label class="form-label">
-                            <i class="fa-solid fa-file-pdf me-1 text-danger"></i> Delivery Challan (DC)
-                        </label>
-                        <div class="file-upload-card" onclick="document.getElementById('dc-file').click()">
-                            <i class="fa-solid fa-cloud-arrow-up upload-card-icon"></i>
-                            <span class="upload-card-text" id="dc-file-label">Choose PDF</span>
-                            <input type="file" id="dc-file" accept=".pdf" class="d-none"
-                                onchange="handleFileSelect(this, 'dc-file-label')">
+                <!-- Outward Delivery form -->
+                <div class="card-custom" style="max-width: 700px;">
+                    <form id="outward-form" onsubmit="submitOutward(event)">
+                        <!-- Request No Selection -->
+                        <div class="mb-4">
+                            <label class="form-label" for="outward-request-select">
+                                <i class="fa-solid fa-list-check text-primary me-1"></i> Select Active Request *
+                            </label>
+                            <select id="outward-request-select" required class="form-control-custom"
+                                onchange="onOutwardRequestSelection()">
+                                <option value="">-- Select Pending Request --</option>
+                            </select>
+                        </div>
+
+                        <!-- Read only info details -->
+                        <div class="row">
+                            <div class="col-md-6 mb-3">
+                                <label class="form-label">Department / Office</label>
+                                <input type="text" id="outward-dept-disp" class="form-control-custom" disabled>
+                            </div>
+                            <div class="col-md-6 mb-3">
+                                <label class="form-label">Printer Model</label>
+                                <input type="text" id="outward-printer-disp" class="form-control-custom" disabled>
+                            </div>
+                            <div class="col-md-6 mb-3">
+                                <label class="form-label">Toner Model</label>
+                                <input type="text" id="outward-toner-disp" class="form-control-custom" disabled>
+                            </div>
+                            <div class="col-md-6 mb-3">
+                                <label class="form-label">Quantity Requested</label>
+                                <input type="text" id="outward-qty-req-disp" class="form-control-custom" disabled>
+                            </div>
+                        </div>
+
+                        <!-- Quantity Issued -->
+                        <div class="mb-4 mt-3">
+                            <label class="form-label" for="outward-qty-delivered">
+                                <i class="fa-solid fa-hashtag text-primary me-1"></i> Quantity Issued *
+                            </label>
+                            <input type="number" id="outward-qty-delivered" required class="form-control-custom"
+                                placeholder="Enter quantity to issue" min="1" step="1">
                         </div>
-                    </div>
 
-                    <!-- User Request Upload -->
-                    <!-- <div class="col-md-4 form-group mb-4">
-                        <label class="form-label">
-                            <i class="fa-solid fa-file-pdf me-1 text-danger"></i> User Request
-                        </label>
-                        <div class="file-upload-card" onclick="document.getElementById('ur-file').click()">
-                            <i class="fa-solid fa-cloud-arrow-up upload-card-icon"></i>
-                            <span class="upload-card-text" id="ur-file-label">Choose PDF</span>
-                            <input type="file" id="ur-file" accept=".pdf" class="d-none"
-                                onchange="handleFileSelect(this, 'ur-file-label')">
+                        <!-- Delivery Ack File Upload -->
+                        <div class="mb-4">
+                            <label class="form-label">
+                                <i class="fa-solid fa-file-pdf text-danger me-1"></i> Delivery Confirmation Upload
+                            </label>
+                            <div class="file-upload-card"
+                                onclick="document.getElementById('outward-final-file').click()">
+                                <i class="fa-solid fa-cloud-arrow-up upload-card-icon"></i>
+                                <span class="upload-card-text" id="outward-final-label">Choose PDF File</span>
+                                <input type="file" id="outward-final-file" accept=".pdf" class="d-none"
+                                    onchange="handleFileSelection(this, 'outward-final-label')">
+                            </div>
                         </div>
-                    </div> -->
-
-                    <!-- Final Delivered Upload -->
-                    <!-- <div class="col-md-4 form-group mb-4">
-                        <label class="form-label">
-                            <i class="fa-solid fa-file-pdf me-1 text-danger"></i> Final Delivered Document
-                        </label>
-                        <div class="file-upload-card" onclick="document.getElementById('fd-file').click()">
-                            <i class="fa-solid fa-cloud-arrow-up upload-card-icon"></i>
-                            <span class="upload-card-text" id="fd-file-label">Choose PDF</span>
-                            <input type="file" id="fd-file" accept=".pdf" class="d-none"
-                                onchange="handleFileSelect(this, 'fd-file-label')">
+
+                        <!-- Progress Bar -->
+                        <div class="progress-container" id="outward-progress-container">
+                            <div class="progress-text">
+                                <span>Uploading...</span>
+                                <span id="outward-progress-percent">0%</span>
+                            </div>
+                            <div class="progress-bar-wrapper">
+                                <div class="progress-bar-fill" id="outward-progress-fill"></div>
+                            </div>
                         </div>
-                    </div> -->
+
+                        <button type="submit" class="btn-submit mt-3" id="outward-submit-btn">
+                            <i class="fa-solid fa-circle-check"></i> Record Delivery & Download Acknowledgement
+                        </button>
+                    </form>
                 </div>
 
-                <!-- Progress Bar -->
-                <div class="progress-container mb-4" id="progress-container">
-                    <div class="progress-text">
-                        <span id="upload-status">Saving details...</span>
-                        <span id="progress-percent">0%</span>
-                    </div>
-                    <div class="progress-bar-wrapper">
-                        <div class="progress-bar-fill" id="progress-fill"></div>
+                <!-- Outward Delivery History table -->
+                <div class="card-custom">
+                    <h5 class="fw-bold mb-4" style="color: #0f5c78;">
+                        <i class="fa-solid fa-clock-rotate-left me-2"></i>Outward Distribution History
+                    </h5>
+                    <div class="table-responsive">
+                        <table class="table grid-table align-middle">
+                            <thead>
+                                <tr>
+                                    <th>Req. No</th>
+                                    <th>Department</th>
+                                    <th>Printer Model</th>
+                                    <th>Toner Model</th>
+                                    <th class="text-center">Qty Req</th>
+                                    <th class="text-center">Qty Issued</th>
+                                    <th>Issued Date</th>
+                                    <th class="text-center">Action</th>
+                                </tr>
+                            </thead>
+                            <tbody id="outward-history-table-body">
+                                <tr>
+                                    <td colspan="8" class="text-center text-muted py-4">No outward records found.</td>
+                                </tr>
+                            </tbody>
+                        </table>
                     </div>
                 </div>
+            </div>
 
-                <!-- Submit Button -->
-                <button type="submit" class="btn-submit-upload mt-3" id="submit-btn">
-                    <i class="fa-solid fa-paper-plane"></i> Save & Upload Details
-                </button>
-            </form>
         </div>
-
     </div>
 
     <!-- Footer Fragment -->
     <th:block th:replace="~{fragments/footer :: footer}"></th:block>
 
+    <!-- App Logic Script -->
     <script th:inline="javascript">
         const contextPath = /*[[@{/}]]*/ '';
 
+        // Cache printers list
+        let printersCached = [];
+        // Cache pending requests in Outward Register
+        let pendingRequestsCached = [];
+
         document.addEventListener('DOMContentLoaded', () => {
-            loadPrinters();
+            // Load base list of printers on startup
+            fetchPrinters();
+            // Default to Report View Data
+            loadReportPage();
         });
 
-        function loadPrinters() {
+        // Toggle dynamic views
+        function switchView(panelName) {
+            document.querySelectorAll('.nav-tab').forEach(el => el.classList.remove('active'));
+            document.querySelectorAll('.view-panel').forEach(el => el.classList.remove('active'));
+
+            const tab = document.querySelector(`.nav-tab[onclick="switchView('${panelName}')"]`);
+            if (tab) tab.classList.add('active');
+
+            const panel = document.getElementById(`panel-${panelName}`);
+            if (panel) panel.classList.add('active');
+
+            // Trigger data fetches on tab switch
+            if (panelName === 'report') {
+                loadReportPage();
+            } else if (panelName === 'inward') {
+                resetForm('inward');
+                populatePrintersDropdown('inward');
+            } else if (panelName === 'request') {
+                resetForm('request');
+                populatePrintersDropdown('request');
+            } else if (panelName === 'outward') {
+                resetForm('outward');
+                fetchPendingRequests();
+                fetchOutwardHistory();
+            }
+        }
+
+        // --- COMMON DROP-DOWN LOGICS ---
+        function fetchPrinters() {
             fetch(contextPath + 'gcctonermanagement/api/printers')
                 .then(res => res.json())
-                .then(printers => {
-                    const select = document.getElementById('printer-select');
-                    select.innerHTML = '<option value="">-- Select Printer Model --</option>';
-                    printers.forEach(p => {
-                        const opt = document.createElement('option');
-                        opt.value = p.id;
-                        opt.textContent = p.printer_name;
-                        select.appendChild(opt);
-                    });
+                .then(data => {
+                    printersCached = data;
                 })
-                .catch(err => {
-                    console.error("Error loading printers:", err);
-                    showNotification('error', 'Error', 'Failed to load printers.');
-                });
+                .catch(err => console.error("Error fetching printers: ", err));
+        }
+
+        function populatePrintersDropdown(prefix) {
+            const select = document.getElementById(`${prefix}-printer-select`);
+            if (!select) return;
+            select.innerHTML = '<option value="">-- Select Printer Model --</option>';
+            printersCached.forEach(p => {
+                const opt = document.createElement('option');
+                opt.value = p.id;
+                opt.textContent = p.printer_name;
+                select.appendChild(opt);
+            });
         }
 
-        function onPrinterChange() {
-            const pid = document.getElementById('printer-select').value;
-            const tonerSelect = document.getElementById('toner-select');
+        function loadToners(prefix) {
+            const pid = document.getElementById(`${prefix}-printer-select`).value;
+            const tonerSelect = document.getElementById(`${prefix}-toner-select`);
+            if (!tonerSelect) return;
 
             tonerSelect.innerHTML = '<option value="">-- Select Toner Model --</option>';
             tonerSelect.disabled = true;
@@ -522,7 +997,8 @@
                 });
         }
 
-        function handleFileSelect(input, labelId) {
+        // File styling toggles
+        function handleFileSelection(input, labelId) {
             const label = document.getElementById(labelId);
             const card = input.parentElement;
 
@@ -532,73 +1008,222 @@
                     showNotification('warning', 'Invalid File Type', 'Please select a PDF file.');
                     input.value = '';
                     card.classList.remove('file-selected');
-                    label.textContent = 'Choose PDF';
+                    label.textContent = 'Choose PDF File';
                     return;
                 }
                 card.classList.add('file-selected');
                 label.textContent = file.name;
             } else {
                 card.classList.remove('file-selected');
-                label.textContent = 'Choose PDF';
+                label.textContent = 'Choose PDF File';
             }
         }
 
-        function showNotification(icon, title, text) {
-            if (typeof Swal !== 'undefined') {
-                Swal.fire({
-                    icon: icon,
-                    title: title,
-                    text: text,
-                    confirmButtonColor: '#0f5c78'
+        function resetForm(prefix) {
+            const form = document.getElementById(`${prefix}-form`);
+            if (form) form.reset();
+
+            // Reset custom files labels
+            const labels = {
+                'inward': ['inward-dc-label'],
+                'request': ['request-user-label'],
+                'outward': ['outward-final-label']
+            };
+            if (labels[prefix]) {
+                labels[prefix].forEach(lblId => {
+                    const label = document.getElementById(lblId);
+                    if (label) label.textContent = 'Choose PDF File';
+                    const card = label?.parentElement;
+                    if (card) card.classList.remove('file-selected');
                 });
-            } else {
-                alert(title + ": " + text);
+            }
+
+            // Disable sub selects
+            const tonerSelect = document.getElementById(`${prefix}-toner-select`);
+            if (tonerSelect) tonerSelect.disabled = true;
+
+            // Reset outward descriptions
+            if (prefix === 'outward') {
+                document.getElementById('outward-dept-disp').value = '';
+                document.getElementById('outward-printer-disp').value = '';
+                document.getElementById('outward-toner-disp').value = '';
+                document.getElementById('outward-qty-req-disp').value = '';
             }
         }
 
-        function handleUpload(event) {
-            event.preventDefault();
+        function showNotification(icon, title, text) {
+            Swal.fire({
+                icon: icon,
+                title: title,
+                text: text,
+                confirmButtonColor: '#0f5c78'
+            });
+        }
+
+        // CSRF Headers Helper
+        function getCsrfMeta() {
+            const csrfMeta = document.querySelector('meta[name="_csrf"]');
+            const csrfHeaderMeta = document.querySelector('meta[name="_csrf_header"]');
+            return {
+                token: csrfMeta ? csrfMeta.content : '',
+                header: csrfHeaderMeta ? csrfHeaderMeta.content : ''
+            };
+        }
 
-            const companyName = document.getElementById('company-name-input').value.trim();
-            const pid = document.getElementById('printer-select').value;
-            const tid = document.getElementById('toner-select').value;
-            const qty = document.getElementById('qty-input').value.trim();
 
-            if (!companyName || !pid || !tid || !qty) {
-                showNotification('warning', 'Incomplete Form', 'Please fill in all required fields.');
-                return;
-            }
+        // ================= REPORT VIEW API =================
+        function loadReportPage() {
+            fetch(contextPath + 'gcctonermanagement/api/report')
+                .then(res => res.json())
+                .then(data => {
+                    if (data.success) {
+                        // Populate metric cards
+                        document.getElementById('stats-raised').textContent = data.metrics.totalRaised || 0;
+                        document.getElementById('stats-distributed').textContent = data.metrics.totalDistributed || 0;
+                        document.getElementById('stats-stock').textContent = data.metrics.availableStock || 0;
+
+                        // Populate inventory summary table
+                        const tbody = document.getElementById('report-table-body');
+                        tbody.innerHTML = '';
+                        if (data.summary.length === 0) {
+                            tbody.innerHTML = `<tr><td colspan="6" class="text-center text-muted py-4">No toner records found.</td></tr>`;
+                            return;
+                        }
+
+                        data.summary.forEach((item, index) => {
+                            const tr = document.createElement('tr');
+                            tr.innerHTML = `
+                                <td class="fw-semibold text-secondary">${index + 1}</td>
+                                <td class="fw-semibold text-dark">${escapeHtml(item.printer_name)}</td>
+                                <td><span class="badge bg-secondary p-2 font-monospace">${escapeHtml(item.model_name)}</span></td>
+                                <td class="text-center text-primary fw-bold">${item.inward_qty}</td>
+                                <td class="text-center text-success fw-bold">${item.outward_qty}</td>
+                                <td class="text-center fw-bold ${item.available_qty <= 2 ? 'text-danger animate-pulse' : 'text-dark'}">${item.available_qty}</td>
+                            `;
+                            tbody.appendChild(tr);
+                        });
+                    }
+                })
+                .catch(err => {
+                    console.error("Error loading report page:", err);
+                    document.getElementById('report-table-body').innerHTML = `<tr><td colspan="6" class="text-center text-danger py-4">Error loading report data.</td></tr>`;
+                });
+        }
+
 
-            const dcInput = document.getElementById('dc-file');
-            const urInput = document.getElementById('ur-file');
-            const fdInput = document.getElementById('fd-file');
+        // ================= INWARD UPLOAD API =================
+        function submitInward(event) {
+            event.preventDefault();
+
+            const companyName = document.getElementById('inward-company-name').value.trim();
+            const pid = document.getElementById('inward-printer-select').value;
+            const tid = document.getElementById('inward-toner-select').value;
+            const qty = document.getElementById('inward-qty').value.trim();
+            const dcInput = document.getElementById('inward-dc-file');
 
             const formData = new FormData();
             formData.append('companyName', companyName);
             formData.append('pid', pid);
             formData.append('tid', tid);
             formData.append('qty', qty);
+            if (dcInput.files.length > 0) {
+                formData.append('dcFile', dcInput.files[0]);
+            }
+
+            const xhr = new XMLHttpRequest();
+            xhr.open('POST', contextPath + 'gcctonermanagement/api/inward', true);
 
-            if (dcInput.files.length > 0) formData.append('dcFile', dcInput.files[0]);
-            if (urInput.files.length > 0) formData.append('userRequestFile', urInput.files[0]);
-            if (fdInput.files.length > 0) formData.append('finalDeliveredFile', fdInput.files[0]);
+            const csrf = getCsrfMeta();
+            if (csrf.token && csrf.header) {
+                xhr.setRequestHeader(csrf.header, csrf.token);
+            }
 
-            // CSRF security token
-            const csrfMeta = document.querySelector('meta[name="_csrf"]');
-            const csrfHeaderMeta = document.querySelector('meta[name="_csrf_header"]');
+            const progressContainer = document.getElementById('inward-progress-container');
+            const progressFill = document.getElementById('inward-progress-fill');
+            const progressPercent = document.getElementById('inward-progress-percent');
+            const submitBtn = document.getElementById('inward-submit-btn');
+
+            progressContainer.style.display = 'block';
+            submitBtn.disabled = true;
+
+            xhr.upload.addEventListener('progress', (e) => {
+                if (e.lengthComputable) {
+                    const percent = Math.round((e.loaded / e.total) * 100);
+                    progressFill.style.width = percent + '%';
+                    progressPercent.textContent = percent + '%';
+                }
+            });
+
+            xhr.onload = function () {
+                progressContainer.style.display = 'none';
+                submitBtn.disabled = false;
+
+                if (xhr.status === 200) {
+                    try {
+                        const res = JSON.parse(xhr.responseText);
+                        if (res.success) {
+                            Swal.fire({
+                                icon: 'success',
+                                title: 'Success!',
+                                text: res.message || 'Inward stock added successfully!',
+                                confirmButtonColor: '#0f5c78'
+                            }).then(() => {
+                                switchView('report');
+                            });
+                        } else {
+                            showNotification('error', 'Error', res.error || 'Failed to save inward stock details.');
+                        }
+                    } catch (e) {
+                        showNotification('error', 'Error', 'Failed to parse server response.');
+                    }
+                } else {
+                    showNotification('error', 'Error', 'Server returned HTTP ' + xhr.status);
+                }
+            };
+
+            xhr.onerror = () => {
+                progressContainer.style.display = 'none';
+                submitBtn.disabled = false;
+                showNotification('error', 'Connection Error', 'Failed to connect to the server.');
+            };
+
+            xhr.send(formData);
+        }
+
+
+        // ================= USER REQUEST UPLOAD API =================
+        function submitRequest(event) {
+            event.preventDefault();
+
+            const itcellRefNo = document.getElementById('request-itcell').value.trim();
+            const deptId = document.getElementById('request-dept').value.trim();
+            const pid = document.getElementById('request-printer-select').value;
+            const tid = document.getElementById('request-toner-select').value;
+            const qtyRequested = document.getElementById('request-qty').value.trim();
+            const urInput = document.getElementById('request-user-file');
+
+            const formData = new FormData();
+            formData.append('itcellRefNo', itcellRefNo);
+            formData.append('deptId', deptId);
+            formData.append('pid', pid);
+            formData.append('tid', tid);
+            formData.append('qtyRequested', qtyRequested);
+            if (urInput.files.length > 0) {
+                formData.append('userRequestFile', urInput.files[0]);
+            }
 
             const xhr = new XMLHttpRequest();
-            xhr.open('POST', contextPath + 'gcctonermanagement/api/upload', true);
+            xhr.open('POST', contextPath + 'gcctonermanagement/api/request', true);
 
-            if (csrfMeta && csrfHeaderMeta) {
-                xhr.setRequestHeader(csrfHeaderMeta.content, csrfMeta.content);
+            const csrf = getCsrfMeta();
+            if (csrf.token && csrf.header) {
+                xhr.setRequestHeader(csrf.header, csrf.token);
             }
 
-            // Show progress elements
-            const progressContainer = document.getElementById('progress-container');
-            const progressFill = document.getElementById('progress-fill');
-            const progressPercent = document.getElementById('progress-percent');
-            const submitBtn = document.getElementById('submit-btn');
+            const progressContainer = document.getElementById('request-progress-container');
+            const progressFill = document.getElementById('request-progress-fill');
+            const progressPercent = document.getElementById('request-progress-percent');
+            const submitBtn = document.getElementById('request-submit-btn');
 
             progressContainer.style.display = 'block';
             submitBtn.disabled = true;
@@ -612,57 +1237,375 @@
             });
 
             xhr.onload = function () {
+                progressContainer.style.display = 'none';
+                submitBtn.disabled = false;
+
                 if (xhr.status === 200) {
                     try {
-                        const response = JSON.parse(xhr.responseText);
-                        if (response.success) {
-                            if (typeof Swal !== 'undefined') {
-                                Swal.fire({
-                                    title: 'Success!',
-                                    text: response.message || "Details saved successfully!",
-                                    icon: 'success',
-                                    confirmButtonColor: '#0f5c78'
-                                }).then(() => {
-                                    document.getElementById('upload-form').reset();
-                                    resetFileCards();
-                                });
-                            } else {
-                                alert("Success: " + (response.message || "Details saved successfully!"));
-                                document.getElementById('upload-form').reset();
-                                resetFileCards();
-                            }
+                        const res = JSON.parse(xhr.responseText);
+                        if (res.success) {
+                            Swal.fire({
+                                icon: 'success',
+                                title: 'Request Logged!',
+                                html: `Department request saved successfully!<br><br><strong>Request No:</strong> <span style="font-size: 1.25rem; color: #0f5c78; font-family: monospace;">${res.reqNo}</span>`,
+                                confirmButtonColor: '#0f5c78'
+                            }).then(() => {
+                                switchView('report');
+                            });
                         } else {
-                            showNotification('error', 'Upload Failed', response.error || "Failed to record toner details.");
+                            showNotification('error', 'Error', res.error || 'Failed to save department request.');
                         }
                     } catch (e) {
-                        showNotification('error', 'Error', 'Failed to parse response: ' + e.message);
+                        showNotification('error', 'Error', 'Failed to parse response details.');
                     }
                 } else {
-                    showNotification('error', 'Error', "An error occurred. HTTP Code: " + xhr.status);
+                    showNotification('error', 'Error', 'Server returned HTTP ' + xhr.status);
+                }
+            };
+
+            xhr.onerror = () => {
+                progressContainer.style.display = 'none';
+                submitBtn.disabled = false;
+                showNotification('error', 'Connection Error', 'Failed to submit request.');
+            };
+
+            xhr.send(formData);
+        }
+
+
+        // ================= OUTWARD DELIVERIES LOGIC =================
+        function fetchPendingRequests() {
+            fetch(contextPath + 'gcctonermanagement/api/requests/pending')
+                .then(res => res.json())
+                .then(data => {
+                    pendingRequestsCached = data;
+                    const select = document.getElementById('outward-request-select');
+                    select.innerHTML = '<option value="">-- Select Pending Request --</option>';
+                    data.forEach(req => {
+                        const opt = document.createElement('option');
+                        opt.value = req.id;
+                        opt.textContent = `${req.req_no} - Dept: ${req.dept_id}`;
+                        select.appendChild(opt);
+                    });
+                })
+                .catch(err => console.error("Error loading pending requests:", err));
+        }
+
+        // Handle active pending selection to display details
+        function onOutwardRequestSelection() {
+            const id = document.getElementById('outward-request-select').value;
+            const deptDisp = document.getElementById('outward-dept-disp');
+            const printerDisp = document.getElementById('outward-printer-disp');
+            const tonerDisp = document.getElementById('outward-toner-disp');
+            const qtyReqDisp = document.getElementById('outward-qty-req-disp');
+
+            // Reset
+            deptDisp.value = '';
+            printerDisp.value = '';
+            tonerDisp.value = '';
+            qtyReqDisp.value = '';
+
+            if (!id) return;
+
+            const selected = pendingRequestsCached.find(r => String(r.id) === String(id));
+            if (selected) {
+                deptDisp.value = selected.dept_id || '-';
+                printerDisp.value = selected.printer_name || '-';
+                tonerDisp.value = selected.model_name || '-';
+                qtyReqDisp.value = (selected.qty_requested || '0') + ` (Already Issued: ${selected.qty_delivered || 0})`;
+                document.getElementById('outward-qty-delivered').value = (selected.qty_requested - (selected.qty_delivered || 0));
+                document.getElementById('outward-qty-delivered').max = (selected.qty_requested - (selected.qty_delivered || 0));
+            }
+        }
+
+        function fetchOutwardHistory() {
+            fetch(contextPath + 'gcctonermanagement/api/outward/list')
+                .then(res => res.json())
+                .then(data => {
+                    const tbody = document.getElementById('outward-history-table-body');
+                    tbody.innerHTML = '';
+                    if (data.length === 0) {
+                        tbody.innerHTML = `<tr><td colspan="8" class="text-center text-muted py-4">No outward records found.</td></tr>`;
+                        return;
+                    }
+
+                    data.forEach(item => {
+                        const tr = document.createElement('tr');
+                        const dateFormatted = formatTimestamp(item.updated_date);
+                        let docBtn = '';
+                        if (item.final_delivered_upload) {
+                            docBtn = `<a href="${contextPath + item.final_delivered_upload.substring(1)}" target="_blank" class="btn-action btn-view-doc me-1"><i class="fa-solid fa-file-pdf"></i> View Doc</a>`;
+                        }
+                        const pdfBtn = `<button type="button" class="btn-action btn-pdf" onclick='downloadPdfAcknowledgement(${JSON.stringify(item)})'><i class="fa-solid fa-file-arrow-down"></i> PDF Ack</button>`;
+
+                        tr.innerHTML = `
+                            <td class="fw-bold text-dark">${escapeHtml(item.req_no)}</td>
+                            <td>${escapeHtml(item.dept_id)}</td>
+                            <td>${escapeHtml(item.printer_name)}</td>
+                            <td><span class="badge bg-secondary p-1">${escapeHtml(item.model_name)}</span></td>
+                            <td class="text-center font-monospace">${item.qty_requested}</td>
+                            <td class="text-center text-success fw-bold font-monospace">${item.qty_delivered}</td>
+                            <td><small class="text-muted">${dateFormatted}</small></td>
+                            <td class="text-center">${docBtn}${pdfBtn}</td>
+                        `;
+                        tbody.appendChild(tr);
+                    });
+                })
+                .catch(err => {
+                    console.error("Error loading outward history:", err);
+                    document.getElementById('outward-history-table-body').innerHTML = `<tr><td colspan="8" class="text-center text-danger py-4">Error loading outward deliveries.</td></tr>`;
+                });
+        }
+
+        function submitOutward(event) {
+            event.preventDefault();
+
+            const id = document.getElementById('outward-request-select').value;
+            const qtyIssued = document.getElementById('outward-qty-delivered').value.trim();
+            const fdInput = document.getElementById('outward-final-file');
+
+            if (!id || !qtyIssued) {
+                showNotification('warning', 'Missing Fields', 'Please select request and specify quantity issued.');
+                return;
+            }
+
+            const formData = new FormData();
+            formData.append('id', id);
+            formData.append('qtyIssued', qtyIssued);
+            if (fdInput.files.length > 0) {
+                formData.append('finalDeliveredFile', fdInput.files[0]);
+            }
+
+            const xhr = new XMLHttpRequest();
+            xhr.open('POST', contextPath + 'gcctonermanagement/api/outward', true);
+
+            const csrf = getCsrfMeta();
+            if (csrf.token && csrf.header) {
+                xhr.setRequestHeader(csrf.header, csrf.token);
+            }
+
+            const progressContainer = document.getElementById('outward-progress-container');
+            const progressFill = document.getElementById('outward-progress-fill');
+            const progressPercent = document.getElementById('outward-progress-percent');
+            const submitBtn = document.getElementById('outward-submit-btn');
+
+            progressContainer.style.display = 'block';
+            submitBtn.disabled = true;
+
+            xhr.upload.addEventListener('progress', (e) => {
+                if (e.lengthComputable) {
+                    const percent = Math.round((e.loaded / e.total) * 100);
+                    progressFill.style.width = percent + '%';
+                    progressPercent.textContent = percent + '%';
                 }
+            });
+
+            xhr.onload = function () {
                 progressContainer.style.display = 'none';
                 submitBtn.disabled = false;
+
+                if (xhr.status === 200) {
+                    try {
+                        const res = JSON.parse(xhr.responseText);
+                        if (res.success) {
+                            // Find request details for generating PDF immediately
+                            const selected = pendingRequestsCached.find(r => String(r.id) === String(id));
+                            const pdfItem = {
+                                req_no: selected.req_no,
+                                dept_id: selected.dept_id,
+                                printer_name: selected.printer_name,
+                                model_name: selected.model_name,
+                                qty_requested: selected.qty_requested,
+                                qty_delivered: qtyIssued
+                            };
+
+                            Swal.fire({
+                                icon: 'success',
+                                title: 'Delivered!',
+                                text: res.message || 'Outward register recorded successfully! Downloading PDF acknowledgement...',
+                                confirmButtonColor: '#0f5c78'
+                            }).then(() => {
+                                // Trigger automatic PDF download immediately
+                                downloadPdfAcknowledgement(pdfItem);
+                                switchView('outward');
+                            });
+                        } else {
+                            showNotification('error', 'Error', res.error || 'Failed to record outward delivery.');
+                        }
+                    } catch (e) {
+                        showNotification('error', 'Error', 'Failed to parse delivery response.');
+                    }
+                } else {
+                    showNotification('error', 'Error', 'Server returned HTTP ' + xhr.status);
+                }
             };
 
-            xhr.onerror = function () {
-                showNotification('error', 'Error', "Connection error occurred during submission.");
+            xhr.onerror = () => {
                 progressContainer.style.display = 'none';
                 submitBtn.disabled = false;
+                showNotification('error', 'Connection Error', 'Failed to submit delivery.');
             };
 
             xhr.send(formData);
         }
 
-        function resetFileCards() {
-            const labels = ['dc-file-label', 'ur-file-label', 'fd-file-label'];
-            labels.forEach(lblId => {
-                document.getElementById(lblId).textContent = 'Choose PDF';
-            });
-            const cards = document.querySelectorAll('.file-upload-card');
-            cards.forEach(card => {
-                card.classList.remove('file-selected');
-            });
-            document.getElementById('toner-select').disabled = true;
+        // ================= PDF ACKNOWLEDGEMENT GENERATION LOGIC =================
+        function downloadPdfAcknowledgement(item) {
+            const { jsPDF } = window.jspdf;
+            const doc = new jsPDF('p', 'mm', 'a4');
+
+            // Draw border
+            doc.setDrawColor(15, 92, 120);
+            doc.setLineWidth(0.5);
+            doc.rect(5, 5, 200, 287);
+
+            // Center Logo logic
+            const logoImg = new Image();
+            logoImg.src = contextPath + 'assets/header-images/gcc1.png';
+
+            logoImg.onload = function () {
+                // Background watermarked logo in the center (transparent effect)
+                doc.saveGraphicsState();
+                doc.setGState(new doc.GState({ opacity: 0.08 }));
+                doc.addImage(logoImg, 'PNG', 55, 100, 100, 100);
+                doc.restoreGraphicsState();
+
+                // Header Logo
+                doc.addImage(logoImg, 'PNG', 12, 12, 22, 22);
+
+                // Header Texts
+                doc.setFont('Helvetica', 'bold');
+                doc.setFontSize(15);
+                doc.setTextColor(15, 92, 120);
+                doc.text("GREATER CHENNAI CORPORATION", 40, 18);
+
+                doc.setFontSize(10);
+                doc.setTextColor(71, 85, 105);
+                doc.setFont('Helvetica', 'normal');
+                doc.text("Information Technology Cell (IT Cell)", 40, 23);
+                doc.text("Ripon Building, Chennai - 600003", 40, 27);
+
+                // Draw divider line below header
+                doc.setDrawColor(226, 232, 240);
+                doc.setLineWidth(1);
+                doc.line(10, 38, 200, 38);
+
+                // Document Title
+                doc.setFont('Helvetica', 'bold');
+                doc.setFontSize(12);
+                doc.setTextColor(15, 92, 120);
+                doc.text("TONER DELIVERY ACKNOWLEDGEMENT", 105, 48, null, null, "center");
+
+                // Content details
+                doc.setFontSize(10);
+                doc.setFont('Helvetica', 'normal');
+                doc.setTextColor(51, 65, 85);
+
+                const currentDateTimeStr = new Date().toLocaleDateString('en-GB') + ' ' + new Date().toLocaleTimeString('en-GB', { hour: '2-digit', minute: '2-digit' });
+
+                // Draw Table containing toner delivery details
+                const tableData = [
+                    ["Request Number", item.req_no || '-'],
+                    ["Department / Office", item.dept_id || '-'],
+                    ["Printer Model", item.printer_name || '-'],
+                    ["Toner Model", item.model_name || '-'],
+                    ["Quantity Requested", item.qty_requested || '-'],
+                    ["Quantity Issued", item.qty_delivered || '-'],
+                    ["Delivery / Print Date", currentDateTimeStr]
+                ];
+
+                doc.autoTable({
+                    startY: 55,
+                    margin: { left: 15, right: 15 },
+                    body: tableData,
+                    theme: 'striped',
+                    styles: {
+                        fontSize: 10,
+                        cellPadding: 4,
+                        textColor: [51, 65, 85],
+                        lineColor: [226, 232, 240],
+                        lineWidth: 0.1
+                    },
+                    columnStyles: {
+                        0: { fontStyle: 'bold', width: 60, textColor: [15, 92, 120] }
+                    }
+                });
+
+                // Acknowledgement Declaration
+                const finalY = doc.lastAutoTable.finalY + 15;
+                doc.setFontSize(10);
+                doc.setFont('Helvetica', 'bold');
+                doc.text("Declaration / Undertaking:", 15, finalY);
+
+                doc.setFont('Helvetica', 'normal');
+                doc.setFontSize(9);
+                doc.setTextColor(100, 116, 139);
+                const declarationText = "We hereby acknowledge that the above-mentioned quantity of printer toner cartridges has been successfully delivered in proper operating condition. The items will be utilized exclusively for office administrative services.";
+                const splitText = doc.splitTextToSize(declarationText, 180);
+                doc.text(splitText, 15, finalY + 5);
+
+                // Signatures row
+                const sigY = finalY + 45;
+                doc.setDrawColor(203, 213, 225);
+                doc.setLineWidth(0.25);
+                doc.line(15, sigY, 65, sigY);
+                doc.line(145, sigY, 195, sigY);
+
+                doc.setFont('Helvetica', 'bold');
+                doc.setFontSize(9);
+                doc.setTextColor(71, 85, 105);
+                doc.text("Receiver's Signature", 40, sigY + 5, null, null, "center");
+                doc.text("Authorized Issuer (IT Cell)", 170, sigY + 5, null, null, "center");
+
+                doc.setFont('Helvetica', 'normal');
+                doc.setFontSize(8);
+                doc.text("(Seal & Date)", 40, sigY + 9, null, null, "center");
+                doc.text("Greater Chennai Corporation", 170, sigY + 9, null, null, "center");
+
+                // Save/Download PDF
+                doc.save(`Toner_Ack_${item.req_no || 'Receipt'}.pdf`);
+            };
+
+            // Fallback if image fails to load
+            logoImg.onerror = function () {
+                doc.setFontSize(14);
+                doc.text("GREATER CHENNAI CORPORATION", 15, 20);
+                doc.text("TONER DELIVERY ACKNOWLEDGEMENT", 15, 30);
+                doc.setFontSize(10);
+                doc.text(`Request Number: ${item.req_no}`, 15, 45);
+                doc.text(`Department: ${item.dept_id}`, 15, 55);
+                doc.text(`Toner Model: ${item.model_name}`, 15, 65);
+                doc.text(`Qty Issued: ${item.qty_delivered}`, 15, 75);
+                doc.save(`Toner_Ack_${item.req_no || 'Receipt'}.pdf`);
+            };
+        }
+
+
+        // --- HELPERS ---
+        function escapeHtml(text) {
+            if (!text) return '';
+            return String(text)
+                .replace(/&/g, "&amp;")
+                .replace(/</g, "&lt;")
+                .replace(/>/g, "&gt;")
+                .replace(/"/g, "&quot;")
+                .replace(/'/g, "&#039;");
+        }
+
+        function formatTimestamp(ts) {
+            if (!ts) return '-';
+            try {
+                const date = new Date(ts);
+                if (isNaN(date.getTime())) return ts;
+                const dd = String(date.getDate()).padStart(2, '0');
+                const mm = String(date.getMonth() + 1).padStart(2, '0');
+                const yyyy = date.getFullYear();
+                const hh = String(date.getHours()).padStart(2, '0');
+                const min = String(date.getMinutes()).padStart(2, '0');
+                return `${dd}/${mm}/${yyyy} ${hh}:${min}`;
+            } catch (e) {
+                return ts;
+            }
         }
     </script>
 </body>