diff --git a/pom.xml b/pom.xml
index 4bd30e2..aa8247d 100644
--- a/pom.xml
+++ b/pom.xml
@@ -43,8 +43,8 @@
 			<artifactId>spring-boot-starter-jdbc</artifactId>
 		</dependency>
 		<dependency>
-			<groupId>org.springframework.security</groupId>
-			<artifactId>spring-security-crypto</artifactId>
+			<groupId>org.springframework.boot</groupId>
+			<artifactId>spring-boot-starter-security</artifactId>
 		</dependency>
 
 		<dependency>
diff --git a/src/main/java/com/gcc_manpower/config/AppUserDetailsService.java b/src/main/java/com/gcc_manpower/config/AppUserDetailsService.java
new file mode 100644
index 0000000..ab5b5b3
--- /dev/null
+++ b/src/main/java/com/gcc_manpower/config/AppUserDetailsService.java
@@ -0,0 +1,66 @@
+package com.gcc_manpower.config;
+
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.beans.factory.annotation.Qualifier;
+import org.springframework.jdbc.core.JdbcTemplate;
+import org.springframework.security.core.userdetails.User;
+import org.springframework.security.core.userdetails.UserDetails;
+import org.springframework.security.core.userdetails.UserDetailsService;
+import org.springframework.security.core.userdetails.UsernameNotFoundException;
+import org.springframework.stereotype.Service;
+
+import javax.sql.DataSource;
+import java.util.List;
+import java.util.Map;
+
+@Service
+public class AppUserDetailsService implements UserDetailsService {
+
+    private JdbcTemplate jdbcTemplate;
+
+    @Autowired
+    public void setDataSource(@Qualifier("mysqlManpowerDataSource") DataSource dataSource) {
+        this.jdbcTemplate = new JdbcTemplate(dataSource);
+    }
+
+    @Override
+    public UserDetails loadUserByUsername(String username) throws UsernameNotFoundException {
+        String sql = "SELECT usr_name, usr_pass, usr_role, is_active FROM app_user WHERE usr_name = ?";
+        List<Map<String, Object>> users;
+        try {
+            users = jdbcTemplate.queryForList(sql, username);
+        } catch (Exception e) {
+            throw new UsernameNotFoundException("Database error during user retrieval", e);
+        }
+
+        if (users == null || users.isEmpty()) {
+            throw new UsernameNotFoundException("Invalid username or password!");
+        }
+
+        Map<String, Object> user = users.get(0);
+
+        // Check if user is active
+        int isActive = 1;
+        Object activeObj = user.get("is_active");
+        if (activeObj instanceof Number) {
+            isActive = ((Number) activeObj).intValue();
+        } else if (activeObj instanceof Boolean) {
+            isActive = (Boolean) activeObj ? 1 : 0;
+        }
+
+        if (isActive == 0) {
+            throw new UsernameNotFoundException("User account is inactive!");
+        }
+
+        String password = (String) user.get("usr_pass");
+        String role = (String) user.get("usr_role");
+        if (role == null) {
+            role = "USER";
+        }
+
+        return User.withUsername(username)
+                .password(password != null ? password : "")
+                .roles(role.toUpperCase()) // Will be loaded as authority ROLE_ROLE
+                .build();
+    }
+}
diff --git a/src/main/java/com/gcc_manpower/config/SecurityConfig.java b/src/main/java/com/gcc_manpower/config/SecurityConfig.java
new file mode 100644
index 0000000..c60cceb
--- /dev/null
+++ b/src/main/java/com/gcc_manpower/config/SecurityConfig.java
@@ -0,0 +1,123 @@
+package com.gcc_manpower.config;
+
+import org.springframework.context.annotation.Bean;
+import org.springframework.context.annotation.Configuration;
+import org.springframework.security.authentication.AuthenticationManager;
+import org.springframework.security.config.annotation.authentication.configuration.AuthenticationConfiguration;
+import org.springframework.security.config.annotation.web.builders.HttpSecurity;
+import org.springframework.security.config.annotation.web.configuration.EnableWebSecurity;
+import org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder;
+import org.springframework.security.crypto.password.PasswordEncoder;
+import org.springframework.security.web.SecurityFilterChain;
+import org.springframework.security.web.header.writers.XXssProtectionHeaderWriter;
+
+@Configuration
+@EnableWebSecurity
+public class SecurityConfig {
+
+    @Bean
+    public PasswordEncoder passwordEncoder() {
+        return new PasswordEncoder() {
+            private final BCryptPasswordEncoder bcrypt = new BCryptPasswordEncoder();
+
+            @Override
+            public String encode(CharSequence rawPassword) {
+                return bcrypt.encode(rawPassword);
+            }
+
+            @Override
+            public boolean matches(CharSequence rawPassword, String dbPassword) {
+                if (dbPassword != null && dbPassword.startsWith("$2a$")) {
+                    return bcrypt.matches(rawPassword, dbPassword);
+                }
+                return rawPassword.toString().equals(dbPassword);
+            }
+        };
+    }
+
+    @Bean
+    public AuthenticationManager authenticationManager(AuthenticationConfiguration config) throws Exception {
+        return config.getAuthenticationManager();
+    }
+
+    @Bean
+    public SecurityFilterChain filterChain(HttpSecurity http) throws Exception {
+        http
+                // Configure headers for clickjacking and XSS protection
+                .headers(headers -> headers
+                        .frameOptions(frame -> frame.sameOrigin())
+                        .xssProtection(
+                                xss -> xss.headerValue(XXssProtectionHeaderWriter.HeaderValue.ENABLED_MODE_BLOCK)))
+                // Configure URL authorization
+                .authorizeHttpRequests(auth -> auth
+                        // Allow static resources
+                        .requestMatchers(
+                                "/assets/**",
+                                "/css/**",
+                                "/js/**",
+                                "/images/**",
+                                "/favicon.ico",
+                                "/error")
+                        .permitAll()
+                        // Allow login pages and login API endpoints
+                        .requestMatchers(
+                                "/login",
+                                "/api/val-app-usr-login",
+                                "/gcctonermanagement/login",
+                                "/gcctonermanagement/api/login",
+                                "/gccservicepaymenttracker/login",
+                                "/gccservicepaymenttracker/api/login",
+                                "/gccservicedocuments/login",
+                                "/gccservicedocuments/api/login")
+                        .permitAll()
+                        // Allow logout endpoints
+                        .requestMatchers(
+                                "/usr-logout",
+                                "/gcctonermanagement/logout",
+                                "/gccservicepaymenttracker/logout",
+                                "/gccservicedocuments/logout")
+                        .permitAll()
+                        // Require authentication for all other requests
+                        .anyRequest().authenticated())
+                // Configure CSRF protection (ignore CSRF on the login endpoints only)
+                .csrf(csrf -> csrf
+                        .ignoringRequestMatchers(
+                                "/api/val-app-usr-login",
+                                "/gcctonermanagement/api/login",
+                                "/gccservicepaymenttracker/api/login",
+                                "/gccservicedocuments/api/login"))
+                // Session management configuration with module-aware invalid session
+                // redirection
+                .sessionManagement(session -> session
+                        .invalidSessionStrategy((request, response) -> {
+                            // Create a fresh session so requestedSessionIdValid won't cause endless loop
+                            request.getSession(true);
+                            String requestURI = request.getRequestURI();
+                            if (requestURI.contains("/gccservicepaymenttracker")) {
+                                response.sendRedirect(request.getContextPath() + "/gccservicepaymenttracker/login");
+                            } else if (requestURI.contains("/gcctonermanagement")) {
+                                response.sendRedirect(request.getContextPath() + "/gcctonermanagement/login");
+                            } else if (requestURI.contains("/gccservicedocuments")) {
+                                response.sendRedirect(request.getContextPath() + "/gccservicedocuments/login");
+                            } else {
+                                response.sendRedirect(request.getContextPath() + "/login");
+                            }
+                        }))
+                // Exception handling for unauthenticated requests with module-aware redirection
+                .exceptionHandling(exceptions -> exceptions
+                        .authenticationEntryPoint((request, response, authException) -> {
+                            String requestURI = request.getRequestURI();
+                            if (requestURI.contains("/gccservicepaymenttracker")) {
+                                response.sendRedirect(request.getContextPath() + "/gccservicepaymenttracker/login");
+                            } else if (requestURI.contains("/gcctonermanagement")) {
+                                response.sendRedirect(request.getContextPath() + "/gcctonermanagement/login");
+                            } else if (requestURI.contains("/gccservicedocuments")) {
+                                response.sendRedirect(request.getContextPath() + "/gccservicedocuments/login");
+                            } else {
+                                response.sendRedirect(request.getContextPath() + "/login");
+                            }
+                        }));
+
+        return http.build();
+    }
+}
diff --git a/src/main/java/com/gcc_manpower/controller/HomeController.java b/src/main/java/com/gcc_manpower/controller/HomeController.java
index ad4e435..67f0ae1 100644
--- a/src/main/java/com/gcc_manpower/controller/HomeController.java
+++ b/src/main/java/com/gcc_manpower/controller/HomeController.java
@@ -19,6 +19,13 @@ import org.springframework.beans.factory.annotation.Value;
 import org.springframework.web.multipart.MultipartFile;
 import java.io.File;
 
+import org.springframework.security.authentication.AuthenticationManager;
+import org.springframework.security.authentication.UsernamePasswordAuthenticationToken;
+import org.springframework.security.core.Authentication;
+import org.springframework.security.core.AuthenticationException;
+import org.springframework.security.core.context.SecurityContextHolder;
+import org.springframework.security.web.context.HttpSessionSecurityContextRepository;
+
 @Controller
 @RequestMapping("/")
 public class HomeController {
@@ -26,6 +33,9 @@ public class HomeController {
     @Autowired
     private AppUserService appUserService;
 
+    @Autowired
+    private AuthenticationManager authenticationManager;
+
     @Value("${upload.path:gcc_manpower_uploads}")
     private String uploadPathConfig;
 
@@ -93,18 +103,29 @@ public class HomeController {
             @RequestParam("usrPass") String usrPass,
             HttpSession session) {
 
-        Map<String, Object> authResult = appUserService.authenticate(usrName, usrPass);
         Map<String, Object> response = new HashMap<>();
 
-        if (Boolean.TRUE.equals(authResult.get("success"))) {
-            session.setAttribute("usrName", authResult.get("usrName"));
-            session.setAttribute("usrRole", authResult.get("usrRole"));
+        try {
+            UsernamePasswordAuthenticationToken authenticationToken =
+                    new UsernamePasswordAuthenticationToken(usrName, usrPass);
+            Authentication authentication = authenticationManager.authenticate(authenticationToken);
+
+            SecurityContextHolder.getContext().setAuthentication(authentication);
+            session.setAttribute(HttpSessionSecurityContextRepository.SPRING_SECURITY_CONTEXT_KEY, SecurityContextHolder.getContext());
+
+            String role = authentication.getAuthorities().stream()
+                    .map(auth -> auth.getAuthority().replace("ROLE_", ""))
+                    .findFirst()
+                    .orElse("USER");
+
+            session.setAttribute("usrName", usrName);
+            session.setAttribute("usrRole", role);
             session.setMaxInactiveInterval(600); // 10 minutes session timeout
             response.put("result", true);
-            response.put("usrName", authResult.get("usrName"));
-        } else {
+            response.put("usrName", usrName);
+        } catch (AuthenticationException e) {
             response.put("result", false);
-            response.put("error", authResult.get("error"));
+            response.put("error", e.getMessage() != null ? e.getMessage() : "Invalid username or password!");
         }
 
         return response;
@@ -634,6 +655,7 @@ public class HomeController {
 
     @PostMapping("/usr-logout")
     public String logout(HttpSession session) {
+        SecurityContextHolder.clearContext();
         session.invalidate();
         return "redirect:/login";
     }
diff --git a/src/main/java/com/gcc_manpower/gccservicedocuments/controller/GccServiceDocumentsController.java b/src/main/java/com/gcc_manpower/gccservicedocuments/controller/GccServiceDocumentsController.java
index 5ddd71f..dc150a0 100644
--- a/src/main/java/com/gcc_manpower/gccservicedocuments/controller/GccServiceDocumentsController.java
+++ b/src/main/java/com/gcc_manpower/gccservicedocuments/controller/GccServiceDocumentsController.java
@@ -10,11 +10,19 @@ import org.springframework.ui.Model;
 import org.springframework.web.bind.annotation.*;
 import org.springframework.web.multipart.MultipartFile;
 import jakarta.servlet.http.HttpSession;
+import jakarta.servlet.http.HttpServletRequest;
 import java.io.File;
 import java.util.HashMap;
 import java.util.List;
 import java.util.Map;
 
+import org.springframework.security.authentication.AuthenticationManager;
+import org.springframework.security.authentication.UsernamePasswordAuthenticationToken;
+import org.springframework.security.core.Authentication;
+import org.springframework.security.core.AuthenticationException;
+import org.springframework.security.core.context.SecurityContextHolder;
+import org.springframework.security.web.context.HttpSessionSecurityContextRepository;
+
 @Controller
 @RequestMapping("/gccservicedocuments")
 public class GccServiceDocumentsController {
@@ -28,6 +36,9 @@ public class GccServiceDocumentsController {
     @Autowired
     private AppUserService appUserService;
 
+    @Autowired
+    private AuthenticationManager authenticationManager;
+
     @Value("${document.upload.path:gccservicedocuments}")
     private String documentUploadPathConfig;
 
@@ -81,27 +92,45 @@ public class GccServiceDocumentsController {
             @RequestParam("usrPass") String usrPass,
             HttpSession session) {
 
-        Map<String, Object> authResult = appUserService.authenticate(usrName, usrPass);
         Map<String, Object> response = new HashMap<>();
 
-        if (Boolean.TRUE.equals(authResult.get("success"))) {
-            session.setAttribute("doc_usrName", authResult.get("usrName"));
-            session.setAttribute("doc_usrRole", authResult.get("usrRole"));
+        try {
+            UsernamePasswordAuthenticationToken authenticationToken = new UsernamePasswordAuthenticationToken(usrName,
+                    usrPass);
+            Authentication authentication = authenticationManager.authenticate(authenticationToken);
+
+            SecurityContextHolder.getContext().setAuthentication(authentication);
+            session.setAttribute(HttpSessionSecurityContextRepository.SPRING_SECURITY_CONTEXT_KEY,
+                    SecurityContextHolder.getContext());
+
+            String role = authentication.getAuthorities().stream()
+                    .map(auth -> auth.getAuthority().replace("ROLE_", ""))
+                    .findFirst()
+                    .orElse("USER");
+
+            session.setAttribute("doc_usrName", usrName);
+            session.setAttribute("doc_docRole", role); // keep backward compatibility
+            session.setAttribute("doc_usrRole", role);
             session.setMaxInactiveInterval(1800); // 30 minutes session timeout
             response.put("result", true);
-            response.put("usrName", authResult.get("usrName"));
-        } else {
+            response.put("usrName", usrName);
+        } catch (AuthenticationException e) {
             response.put("result", false);
-            response.put("error", authResult.get("error"));
+            response.put("error", e.getMessage() != null ? e.getMessage() : "Invalid username or password!");
         }
 
         return response;
     }
 
     @GetMapping("/logout")
-    public String logout(HttpSession session) {
-        session.removeAttribute("doc_usrName");
-        session.removeAttribute("doc_usrRole");
+    public String logout(HttpSession session, HttpServletRequest request) {
+        SecurityContextHolder.clearContext();
+        if (session != null) {
+            session.removeAttribute("doc_usrName");
+            session.removeAttribute("doc_usrRole");
+            session.invalidate();
+        }
+        request.getSession(true);
         return "redirect:/gccservicedocuments/login";
     }
 
diff --git a/src/main/java/com/gcc_manpower/gccservicepaymenttracker/controller/GccServicePaymentTrackerController.java b/src/main/java/com/gcc_manpower/gccservicepaymenttracker/controller/GccServicePaymentTrackerController.java
index fb23830..5945854 100644
--- a/src/main/java/com/gcc_manpower/gccservicepaymenttracker/controller/GccServicePaymentTrackerController.java
+++ b/src/main/java/com/gcc_manpower/gccservicepaymenttracker/controller/GccServicePaymentTrackerController.java
@@ -9,6 +9,7 @@ import org.springframework.ui.Model;
 import org.springframework.web.bind.annotation.*;
 import org.springframework.web.multipart.MultipartFile;
 import jakarta.servlet.http.HttpSession;
+import jakarta.servlet.http.HttpServletRequest;
 import org.springframework.http.CacheControl;
 import org.springframework.http.ResponseEntity;
 import java.io.File;
@@ -16,6 +17,13 @@ import java.util.HashMap;
 import java.util.List;
 import java.util.Map;
 
+import org.springframework.security.authentication.AuthenticationManager;
+import org.springframework.security.authentication.UsernamePasswordAuthenticationToken;
+import org.springframework.security.core.Authentication;
+import org.springframework.security.core.AuthenticationException;
+import org.springframework.security.core.context.SecurityContextHolder;
+import org.springframework.security.web.context.HttpSessionSecurityContextRepository;
+
 @Controller
 @RequestMapping("/gccservicepaymenttracker")
 public class GccServicePaymentTrackerController {
@@ -26,6 +34,9 @@ public class GccServicePaymentTrackerController {
     @Autowired
     private AppUserService appUserService;
 
+    @Autowired
+    private AuthenticationManager authenticationManager;
+
     @Value("${payment.tracker.upload.path:gccpaymenttrackerfiles}")
     private String paymentTrackerUploadPathConfig;
 
@@ -50,6 +61,23 @@ public class GccServicePaymentTrackerController {
         return "gccservicepaymenttracker/dashboard";
     }
 
+    @GetMapping("/details")
+    public String viewDetails(HttpSession session, Model model) {
+        String username = (String) session.getAttribute("pay_usrName");
+        if (username == null) {
+            return "redirect:/gccservicepaymenttracker/login";
+        }
+        String usrRole = (String) session.getAttribute("pay_usrRole");
+        boolean isAdmin = "ADMIN".equalsIgnoreCase(usrRole);
+
+        model.addAttribute("isLoggedIn", true);
+        model.addAttribute("isAdmin", isAdmin);
+        model.addAttribute("usrName", username);
+        model.addAttribute("curPage", "gccservicepaymenttracker");
+
+        return "gccservicepaymenttracker/details";
+    }
+
     @GetMapping("/login")
     public String login(HttpSession session) {
         return "gccservicepaymenttracker/login";
@@ -62,34 +90,55 @@ public class GccServicePaymentTrackerController {
             @RequestParam("usrPass") String usrPass,
             HttpSession session) {
 
-        Map<String, Object> authResult = appUserService.authenticate(usrName, usrPass);
         Map<String, Object> response = new HashMap<>();
 
-        if (Boolean.TRUE.equals(authResult.get("success"))) {
-            session.setAttribute("pay_usrName", authResult.get("usrName"));
-            session.setAttribute("pay_usrRole", authResult.get("usrRole"));
+        try {
+            UsernamePasswordAuthenticationToken authenticationToken =
+                    new UsernamePasswordAuthenticationToken(usrName, usrPass);
+            Authentication authentication = authenticationManager.authenticate(authenticationToken);
+
+            SecurityContextHolder.getContext().setAuthentication(authentication);
+            session.setAttribute(HttpSessionSecurityContextRepository.SPRING_SECURITY_CONTEXT_KEY, SecurityContextHolder.getContext());
+
+            String role = authentication.getAuthorities().stream()
+                    .map(auth -> auth.getAuthority().replace("ROLE_", ""))
+                    .findFirst()
+                    .orElse("USER");
+
+            session.setAttribute("pay_usrName", usrName);
+            session.setAttribute("pay_usrRole", role);
             session.setMaxInactiveInterval(1800); // 30 minutes session timeout
             response.put("result", true);
-            response.put("usrName", authResult.get("usrName"));
-        } else {
+            response.put("usrName", usrName);
+        } catch (AuthenticationException e) {
             response.put("result", false);
-            response.put("error", authResult.get("error"));
+            response.put("error", e.getMessage() != null ? e.getMessage() : "Invalid username or password!");
         }
 
         return response;
     }
 
     @PostMapping("/logout")
-    public String logout(HttpSession session) {
-        session.removeAttribute("pay_usrName");
-        session.removeAttribute("pay_usrRole");
+    public String logout(HttpSession session, HttpServletRequest request) {
+        SecurityContextHolder.clearContext();
+        if (session != null) {
+            session.removeAttribute("pay_usrName");
+            session.removeAttribute("pay_usrRole");
+            session.invalidate();
+        }
+        request.getSession(true);
         return "redirect:/gccservicepaymenttracker/login";
     }
 
     @GetMapping("/logout")
-    public String logoutGet(HttpSession session) {
-        session.removeAttribute("pay_usrName");
-        session.removeAttribute("pay_usrRole");
+    public String logoutGet(HttpSession session, HttpServletRequest request) {
+        SecurityContextHolder.clearContext();
+        if (session != null) {
+            session.removeAttribute("pay_usrName");
+            session.removeAttribute("pay_usrRole");
+            session.invalidate();
+        }
+        request.getSession(true);
         return "redirect:/gccservicepaymenttracker/login";
     }
 
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 4751d63..699f342 100644
--- a/src/main/java/com/gcc_manpower/gcctonermanagement/controller/TonerController.java
+++ b/src/main/java/com/gcc_manpower/gcctonermanagement/controller/TonerController.java
@@ -18,8 +18,15 @@ import org.springframework.web.multipart.MultipartFile;
 import java.io.File;
 import com.gcc_manpower.gcctonermanagement.service.TonerService;
 import com.gcc_manpower.service.AppUserService;
-
 import jakarta.servlet.http.HttpSession;
+import jakarta.servlet.http.HttpServletRequest;
+
+import org.springframework.security.authentication.AuthenticationManager;
+import org.springframework.security.authentication.UsernamePasswordAuthenticationToken;
+import org.springframework.security.core.Authentication;
+import org.springframework.security.core.AuthenticationException;
+import org.springframework.security.core.context.SecurityContextHolder;
+import org.springframework.security.web.context.HttpSessionSecurityContextRepository;
 
 @Controller
 @RequestMapping("/gcctonermanagement")
@@ -31,6 +38,9 @@ public class TonerController {
     @Autowired
     private TonerService tonerService;
 
+    @Autowired
+    private AuthenticationManager authenticationManager;
+
     @Value("${toner.upload.path:gcctonermanagementfiles}")
     private String tonerUploadPathConfig;
 
@@ -68,27 +78,44 @@ public class TonerController {
             @RequestParam("usrPass") String usrPass,
             HttpSession session) {
 
-        Map<String, Object> authResult = appUserService.authenticate(usrName, usrPass);
         Map<String, Object> response = new HashMap<>();
 
-        if (Boolean.TRUE.equals(authResult.get("success"))) {
-            session.setAttribute("toner_usrName", authResult.get("usrName"));
-            session.setAttribute("toner_usrRole", authResult.get("usrRole"));
+        try {
+            UsernamePasswordAuthenticationToken authenticationToken = new UsernamePasswordAuthenticationToken(usrName,
+                    usrPass);
+            Authentication authentication = authenticationManager.authenticate(authenticationToken);
+
+            SecurityContextHolder.getContext().setAuthentication(authentication);
+            session.setAttribute(HttpSessionSecurityContextRepository.SPRING_SECURITY_CONTEXT_KEY,
+                    SecurityContextHolder.getContext());
+
+            String role = authentication.getAuthorities().stream()
+                    .map(auth -> auth.getAuthority().replace("ROLE_", ""))
+                    .findFirst()
+                    .orElse("USER");
+
+            session.setAttribute("toner_usrName", usrName);
+            session.setAttribute("toner_usrRole", role);
             session.setMaxInactiveInterval(1800); // 30 minutes session timeout
             response.put("result", true);
-            response.put("usrName", authResult.get("usrName"));
-        } else {
+            response.put("usrName", usrName);
+        } catch (AuthenticationException e) {
             response.put("result", false);
-            response.put("error", authResult.get("error"));
+            response.put("error", e.getMessage() != null ? e.getMessage() : "Invalid username or password!");
         }
 
         return response;
     }
 
     @GetMapping("/logout")
-    public String logoutGet(HttpSession session) {
-        session.removeAttribute("toner_usrName");
-        session.removeAttribute("toner_usrRole");
+    public String logoutGet(HttpSession session, HttpServletRequest request) {
+        SecurityContextHolder.clearContext();
+        if (session != null) {
+            session.removeAttribute("toner_usrName");
+            session.removeAttribute("toner_usrRole");
+            session.invalidate();
+        }
+        request.getSession(true);
         return "redirect:/gcctonermanagement/login";
     }
 
@@ -286,6 +313,24 @@ public class TonerController {
         return tonerService.getPendingRequests();
     }
 
+    @GetMapping("/api/inward/list")
+    @ResponseBody
+    public List<Map<String, Object>> getInwardListData(HttpSession session) {
+        if (session.getAttribute("toner_usrName") == null) {
+            return java.util.Collections.emptyList();
+        }
+        return tonerService.getInwardHistory();
+    }
+
+    @GetMapping("/api/requests/list")
+    @ResponseBody
+    public List<Map<String, Object>> getUserRequestsListData(HttpSession session) {
+        if (session.getAttribute("toner_usrName") == null) {
+            return java.util.Collections.emptyList();
+        }
+        return tonerService.getAllUserRequests();
+    }
+
     @GetMapping("/api/outward/list")
     @ResponseBody
     public List<Map<String, Object>> getOutwardListData(HttpSession session) {
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 548616b..fda9cd5 100644
--- a/src/main/java/com/gcc_manpower/gcctonermanagement/service/TonerService.java
+++ b/src/main/java/com/gcc_manpower/gcctonermanagement/service/TonerService.java
@@ -224,12 +224,45 @@ public class TonerService {
         }
     }
 
+    public List<Map<String, Object>> getInwardHistory() {
+        String sql = "SELECT s.id, s.company_name, s.qty_registered, s.dc_upload, s.cdate, s.order_by, " +
+                "p.printer_name, t.model_name " +
+                "FROM stock_register_details s " +
+                "LEFT JOIN printer_model_list p ON CAST(s.pid AS SIGNED) = p.id " +
+                "LEFT JOIN toner_model_list t ON CAST(s.tid AS SIGNED) = t.id " +
+                "WHERE s.is_active = 1 AND s.is_delete = 0 " +
+                "ORDER BY s.id DESC";
+        try {
+            return jdbcTemplate.queryForList(sql);
+        } catch (Exception e) {
+            System.err.println("Error fetching inward history: " + e.getMessage());
+            return new ArrayList<>();
+        }
+    }
+
+    public List<Map<String, Object>> getAllUserRequests() {
+        String sql = "SELECT r.id, r.req_no, r.itcell_ref_no, r.dept_id, r.qty_requested, r.qty_delivered, " +
+                "r.user_request_upload, r.cdate, r.updated_date, r.updated_by, " +
+                "p.printer_name, t.model_name " +
+                "FROM department_requested_details r " +
+                "LEFT JOIN printer_model_list p ON CAST(r.pid AS SIGNED) = p.id " +
+                "LEFT JOIN toner_model_list t ON CAST(r.tid AS SIGNED) = t.id " +
+                "WHERE r.is_active = 1 AND r.is_delete = 0 " +
+                "ORDER BY r.id DESC";
+        try {
+            return jdbcTemplate.queryForList(sql);
+        } catch (Exception e) {
+            System.err.println("Error fetching user requests: " + e.getMessage());
+            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, " +
+        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.user_request_upload, r.cdate, 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 " +
+                "LEFT JOIN printer_model_list p ON CAST(r.pid AS SIGNED) = p.id " +
+                "LEFT JOIN toner_model_list t ON CAST(r.tid AS SIGNED) = 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";
@@ -241,3 +274,4 @@ public class TonerService {
         }
     }
 }
+
diff --git a/src/main/resources/templates/gccservicepaymenttracker/dashboard.html b/src/main/resources/templates/gccservicepaymenttracker/dashboard.html
index b35a7aa..047177b 100644
--- a/src/main/resources/templates/gccservicepaymenttracker/dashboard.html
+++ b/src/main/resources/templates/gccservicepaymenttracker/dashboard.html
@@ -1632,11 +1632,7 @@
                     <button type="button" class="btn btn-sm btn-danger px-3" onclick="submitDeleteRecord()">Delete
                         Record</button>
                 </div>
-            </div>
-        </div>
-    </div>
-
-    <!-- Count Details Modal -->
+                <!-- OLD IN-PAGE MODAL (COMMENTED OUT FOR REFERENCE - ALL COUNT METRICS NOW OPEN IN A NEW TAB)
     <div class="modal fade" id="countDetailsModal" tabindex="-1" aria-labelledby="countDetailsModalLabel"
         aria-hidden="true">
         <div class="modal-dialog modal-xl modal-dialog-centered">
@@ -1649,100 +1645,81 @@
                         aria-label="Close"></button>
                 </div>
                 <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">
-                        <!-- 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">
+                    <div class="mb-3">
+                        <div class="d-flex align-items-center mb-2">
+                            <span class="text-uppercase fw-bold text-muted me-2" style="font-size: 0.75rem; letter-spacing: 0.5px;">Type Filter</span>
+                        </div>
+                        <div id="modal-type-badges" class="d-inline-flex flex-wrap gap-2 align-middle">
+                        </div>
+                    </div>
+                    <div class="mb-4">
+                        <div class="d-flex align-items-center mb-2">
+                            <span class="text-uppercase fw-bold text-muted me-2" style="font-size: 0.75rem; letter-spacing: 0.5px;">Status Filter</span>
+                        </div>
+                        <div id="modal-status-badges" class="d-inline-flex flex-wrap gap-2 align-middle">
+                        </div> 
+                    </div>
+                    <div class="row g-3 align-items-end mb-4 p-3 rounded-3" style="background-color: #f8fafc; border: 1px solid #e2e8f0;">
+                        <div class="col-md-3">
+                            <label class="form-label fw-bold text-secondary" style="font-size: 0.82rem;">Type of Bill</label>
+                            <select id="modal-filter-type" class="filter-input" onchange="applyModalFilters()">
                                 <option value="all">- All Types -</option>
                             </select>
                         </div>
-                        <!-- 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">
+                        <div class="col-md-3">
+                            <label class="form-label fw-bold text-secondary" style="font-size: 0.82rem;">Status</label>
+                            <select id="modal-filter-status" class="filter-input" onchange="applyModalFilters()">
                                 <option value="all">- All Statuses -</option>
                             </select>
                         </div>
-
-                        <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"
-                                onchange="applyModalFilters()">
+                        <div class="col-md-3">
+                            <label class="form-label fw-bold text-secondary" style="font-size: 0.82rem;">Vendor</label>
+                            <select id="modal-filter-vendor" class="filter-input" onchange="applyModalFilters()">
                                 <option value="all">- All Vendors -</option>
                             </select>
                         </div>
-
-                        <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 class="col-md-3">
+                            <label class="form-label fw-bold text-secondary" style="font-size: 0.82rem;">Search Table</label>
+                            <input type="text" id="modal-table-search" class="filter-input" placeholder="Search bill, vendor, dept..." oninput="applyModalFilters()">
                         </div>
-
-                        <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()">
-                                <i class="fa-solid fa-file-excel"></i> Export to Excel
+                    </div>
+                    <div class="d-flex justify-content-between align-items-center mb-3 px-1">
+                        <div class="d-flex align-items-center gap-2">
+                            <span class="badge bg-secondary px-3 py-2" id="modal-records-count" style="font-size: 0.85rem; font-weight: 600;">0 Records</span>
+                        </div>
+                        <div class="d-flex align-items-center gap-2">
+                            <button class="btn btn-sm btn-success fw-bold px-3 d-flex align-items-center gap-1" style="border-radius: 6px; font-size: 0.82rem;" onclick="exportModalTableToExcel()">
+                                <i class="fa-solid fa-file-excel"></i> Export Excel
                             </button>
                         </div>
                     </div>
-
-                    <!-- Responsive Table Inside Modal -->
-                    <div class="table-responsive"
-                        style="max-height: 400px; overflow-y: auto; border: 1px solid #eef2f6;">
-                        <table class="table grid-table table-striped table-hover align-middle mb-0"
-                            id="modal-tracking-table">
+                    <div class="table-responsive" style="max-height: 450px; overflow-y: auto; border: 1px solid #eef2f6;">
+                        <table class="table grid-table table-striped table-hover align-middle mb-0" id="modal-tracking-table">
                             <thead class="table-light">
                                 <tr>
                                     <th class="text-center" style="width: 50px;">Sr. No.</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>
-                                    <th>Type of File</th>
-                                    <th>Vendor Name</th>
-                                    <th>Amount</th>
-                                    <th>Age of Bill (Days)</th>
-                                    <th>Status</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('bill_date')" style="cursor: pointer; user-select: none;">Invoice Date <span id="modal-sort-bill_date-icon"><i class="fa-solid fa-sort ms-1" style="opacity: 0.4;"></i></span></th>
+                                    <th onclick="sortModalTable('department_name')" style="cursor: pointer; user-select: none;">Department <span id="modal-sort-department_name-icon"><i class="fa-solid fa-sort ms-1" style="opacity: 0.4;"></i></span></th>
+                                    <th onclick="sortModalTable('file_no')" style="cursor: pointer; user-select: none;">Physical File No. <span id="modal-sort-file_no-icon"><i class="fa-solid fa-sort ms-1" style="opacity: 0.4;"></i></span></th>
+                                    <th onclick="sortModalTable('bill_no')" style="cursor: pointer; user-select: none;">eFile No./ Receipt No. <span id="modal-sort-bill_no-icon"><i class="fa-solid fa-sort ms-1" style="opacity: 0.4;"></i></span></th>
+                                    <th onclick="sortModalTable('subject')" style="cursor: pointer; user-select: none;">Subject <span id="modal-sort-subject-icon"><i class="fa-solid fa-sort ms-1" style="opacity: 0.4;"></i></span></th>
+                                    <th onclick="sortModalTable('resolved_type')" style="cursor: pointer; user-select: none;">Type of File <span id="modal-sort-resolved_type-icon"><i class="fa-solid fa-sort ms-1" style="opacity: 0.4;"></i></span></th>
+                                    <th onclick="sortModalTable('vendor_name')" style="cursor: pointer; user-select: none;">Vendor Name <span id="modal-sort-vendor_name-icon"><i class="fa-solid fa-sort ms-1" style="opacity: 0.4;"></i></span></th>
+                                    <th onclick="sortModalTable('amount')" style="cursor: pointer; user-select: none;">Amount <span id="modal-sort-amount-icon"><i class="fa-solid fa-sort ms-1" style="opacity: 0.4;"></i></span></th>
+                                    <th onclick="sortModalTable('age')" style="cursor: pointer; user-select: none;">Age of Bill (Days) <span id="modal-sort-age-icon"><i class="fa-solid fa-sort ms-1" style="opacity: 0.4;"></i></span></th>
+                                    <th onclick="sortModalTable('resolved_status')" style="cursor: pointer; user-select: none;">Status <span id="modal-sort-resolved_status-icon"><i class="fa-solid fa-sort ms-1" style="opacity: 0.4;"></i></span></th>
                                     <th>Remarks</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 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>
                             </thead>
                             <tbody id="modal-tracking-tbody">
-                                <!-- Populated dynamically via JS -->
                             </tbody>
                         </table>
                         <div id="modal-no-records-found" class="empty-state text-center py-5" style="display: none;">
-                            <i class="fa-solid fa-folder-open empty-icon"
-                                style="font-size: 2.5rem; color: #cbd5e1; margin-bottom: 10px;"></i>
+                            <i class="fa-solid fa-folder-open empty-icon" style="font-size: 2.5rem; color: #cbd5e1; margin-bottom: 10px;"></i>
                             <h5>No Records Found</h5>
                             <p>No payment tracking records match the active criteria.</p>
                         </div>
@@ -1751,6 +1728,10 @@
             </div>
         </div>
     </div>
+    -->
+            </div>
+        </div>
+    </div>
 
     <!-- Deleted Records Modal -->
     <div class="modal fade" id="deletedRecordsModal" tabindex="-1" aria-labelledby="deletedRecordsModalLabel"
@@ -3432,6 +3413,8 @@
         let activeModalQuickStatus = 'all';
 
         function openModalForCount(clickType, clickValue, displayName, vendorName = null, col = null) {
+            /* 
+            // ================= OLD IN-PAGE MODAL CODE (COMMENTED OUT FOR REFERENCE) =================
             modalClickFilter = { clickType, clickValue, displayName, vendorName, col };
 
             if (clickType === 'category' && clickValue) {
@@ -3480,7 +3463,6 @@
 
             // If click was vendor-based
             if (vendorName) {
-                // Find matching option or set value
                 for (let opt of modalVendorSelect.options) {
                     if (opt.textContent.trim().toLowerCase() === vendorName.trim().toLowerCase() || opt.value === vendorName) {
                         modalVendorSelect.value = opt.value;
@@ -3497,6 +3479,18 @@
                 countDetailsModalObj = new bootstrap.Modal(document.getElementById('countDetailsModal'));
             }
             countDetailsModalObj.show();
+            // =======================================================================================
+            */
+
+            // NEW: Open Details View in New Browser Tab
+            const params = new URLSearchParams();
+            if (clickType) params.append('clickType', clickType);
+            if (clickValue) params.append('clickValue', Array.isArray(clickValue) ? clickValue.join(',') : clickValue);
+            if (displayName) params.append('title', displayName);
+            if (vendorName) params.append('vendor', vendorName);
+            if (col) params.append('col', col);
+
+            window.open(contextPath + 'gccservicepaymenttracker/details?' + params.toString(), '_blank');
         }
 
         function populateModalDropdowns() {
@@ -3551,16 +3545,13 @@
                 'sd': 0,
                 'emd': 0,
                 'asd': 0,
-                'agreement': 0,
-                'status_not_updated': 0
+                'agreement': 0
             };
 
             clickFilteredRecords.forEach(row => {
                 const cat = getCategoryCode(row.resolved_type || row.type);
                 if (cat in counts) {
                     counts[cat]++;
-                } else {
-                    counts['status_not_updated']++;
                 }
             });
 
@@ -3570,8 +3561,7 @@
                 { 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' }
+                { key: 'agreement', label: 'Agreement', color: '#9d174d', textLight: '#fce7f3', bgLight: '#fdf2f8' }
             ];
 
             let html = '';
diff --git a/src/main/resources/templates/gccservicepaymenttracker/details.html b/src/main/resources/templates/gccservicepaymenttracker/details.html
new file mode 100644
index 0000000..b750192
--- /dev/null
+++ b/src/main/resources/templates/gccservicepaymenttracker/details.html
@@ -0,0 +1,2239 @@
+<!DOCTYPE html>
+<html xmlns:th="http://www.thymeleaf.org" lang="en">
+
+<head>
+    <script th:inline="javascript">
+        (function () {
+            const currentUser = /*[[${session.pay_usrName}]]*/ null;
+            if (currentUser && sessionStorage.getItem("pay_usrName") !== currentUser) {
+                window.location.replace(/*[[@{/gccservicepaymenttracker/login}]]*/ '/gccservicepaymenttracker/login');
+            }
+        })();
+    </script>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Count Details - GCC Service Payment Tracker</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}" />
+
+    <!-- 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 CSS -->
+    <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">
+
+    <!-- JS Libraries: Bootstrap JS, SweetAlert2 & SheetJS -->
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
+    <script src="https://cdn.jsdelivr.net/npm/xlsx@0.18.5/dist/xlsx.full.min.js"></script>
+
+    <style>
+        body {
+            background-color: #f1f5f9;
+            font-family: 'Poppins', sans-serif;
+            color: #334155;
+            min-height: 100vh;
+        }
+
+        .navbar-custom {
+            background: linear-gradient(135deg, #0f5c78 0%, #083b4e 100%);
+            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
+            padding: 12px 24px;
+        }
+
+        .navbar-brand {
+            font-family: 'Outfit', sans-serif;
+            font-weight: 700;
+            font-size: 1.35rem;
+            color: #ffffff !important;
+            letter-spacing: 0.5px;
+        }
+
+        .card-custom {
+            background: #ffffff;
+            border-radius: 14px;
+            border: 1px solid #e2e8f0;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
+            padding: 24px;
+            margin-bottom: 24px;
+        }
+
+        .form-control-custom {
+            border-radius: 8px;
+            border: 1px solid #cbd5e1;
+            padding: 9px 14px;
+            font-size: 0.9rem;
+            transition: all 0.2s;
+            width: 100%;
+        }
+
+        .form-control-custom:focus {
+            border-color: #0f5c78;
+            box-shadow: 0 0 0 3px rgba(15, 92, 120, 0.15);
+            outline: none;
+        }
+
+        /* Grid Table Styling */
+        .grid-table {
+            font-size: 0.83rem;
+            border-collapse: separate;
+            border-spacing: 0;
+            width: 100%;
+        }
+
+        .grid-table th {
+            background-color: #f1f5f9 !important;
+            color: #475569 !important;
+            font-weight: 700;
+            text-transform: uppercase;
+            font-size: 0.72rem;
+            letter-spacing: 0.3px;
+            padding: 10px 8px;
+            border-bottom: 2px solid #cbd5e1 !important;
+            vertical-align: middle;
+            white-space: normal;
+            word-wrap: break-word;
+            line-height: 1.25;
+            user-select: none;
+        }
+
+        .grid-table td {
+            padding: 10px 8px;
+            vertical-align: middle;
+            border-bottom: 1px solid #e2e8f0;
+            white-space: normal;
+            word-wrap: break-word;
+            line-height: 1.35;
+        }
+
+        .grid-table tbody tr:hover {
+            background-color: #f8fafc;
+        }
+
+        /* 2x2 Actions Grid */
+        .actions-grid {
+            display: grid;
+            grid-template-columns: repeat(2, 28px);
+            gap: 4px;
+            justify-content: center;
+            align-items: center;
+            margin: 0 auto;
+            width: 60px;
+        }
+
+        /* Type Badges */
+        .type-badge {
+            font-size: 0.7rem;
+            font-weight: 700;
+            padding: 4px 8px;
+            border-radius: 10px;
+            text-transform: uppercase;
+            display: inline-block;
+            white-space: normal;
+            line-height: 1.25;
+            text-align: center;
+        }
+
+        .type-sd {
+            background-color: #f0f7f9;
+            color: #0f5c78;
+            border: 1px solid rgba(15, 92, 120, 0.25);
+        }
+
+        .type-tax-invoice {
+            background-color: #f1fbf4;
+            color: #27ae60;
+            border: 1px solid rgba(39, 174, 96, 0.25);
+        }
+
+        .type-emd {
+            background-color: #f9f2fc;
+            color: #8e44ad;
+            border: 1px solid rgba(142, 68, 173, 0.25);
+        }
+
+        .type-bank-guarantee {
+            background-color: #eff6ff;
+            color: #1e40af;
+            border: 1px solid rgba(30, 64, 175, 0.25);
+        }
+
+        .type-delivery-chellan {
+            background-color: #fef2f2;
+            color: #b91c1c;
+            border: 1px solid rgba(185, 28, 28, 0.25);
+        }
+
+        .type-asd {
+            background-color: #fdf5e6;
+            color: #d35400;
+            border: 1px solid rgba(211, 84, 0, 0.25);
+        }
+
+        .type-agreement {
+            background-color: #fdf2f8;
+            color: #db2777;
+            border: 1px solid rgba(219, 39, 119, 0.25);
+        }
+
+        /* Status Badges */
+        .status-badge {
+            font-size: 0.7rem;
+            font-weight: 700;
+            padding: 4px 8px;
+            border-radius: 10px;
+            text-transform: uppercase;
+            display: inline-block;
+            white-space: normal;
+            line-height: 1.25;
+            text-align: center;
+        }
+
+        /* Action Buttons */
+        .btn-grid-action {
+            width: 28px;
+            height: 28px;
+            border-radius: 6px;
+            border: none;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 0.75rem;
+            cursor: pointer;
+            transition: all 0.2s;
+        }
+
+        .btn-grid-edit {
+            background-color: #e0f2fe;
+            color: #0369a1;
+        }
+
+        .btn-grid-edit:hover {
+            background-color: #0369a1;
+            color: #ffffff;
+            transform: scale(1.08);
+        }
+
+        .btn-grid-delete {
+            background-color: #fee2e2;
+            color: #b91c1c;
+        }
+
+        .btn-grid-delete:hover {
+            background-color: #b91c1c;
+            color: #ffffff;
+            transform: scale(1.08);
+        }
+
+        .btn-grid-pdf {
+            background-color: #fef2f2;
+            color: #b91c1c;
+            border: 1px solid rgba(185, 28, 28, 0.15) !important;
+        }
+
+        .btn-grid-pdf:hover {
+            background-color: #b91c1c;
+            color: #ffffff;
+            transform: scale(1.08);
+        }
+
+        .btn-back {
+            background-color: rgba(255, 255, 255, 0.15);
+            color: white;
+            border: 1px solid rgba(255, 255, 255, 0.3);
+            border-radius: 8px;
+            padding: 6px 14px;
+            font-size: 0.88rem;
+            font-weight: 500;
+            text-decoration: none;
+            transition: all 0.2s;
+        }
+
+        .btn-back:hover {
+            background-color: rgba(255, 255, 255, 0.25);
+            color: white;
+        }
+
+        .cursor-pointer {
+            cursor: pointer;
+        }
+
+        .sort-icon {
+            opacity: 0.4;
+            margin-left: 3px;
+        }
+
+        .sort-icon.active {
+            opacity: 1;
+            color: #0f5c78;
+        }
+
+        /* Modal Styles */
+        .modal-custom-header {
+            background: linear-gradient(135deg, #0f5c78, #1781a6);
+            color: #ffffff;
+            padding: 16px 24px;
+            border-bottom: none;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+
+        .modal-custom-title {
+            font-family: 'Outfit', sans-serif;
+            font-size: 1.15rem;
+            font-weight: 700;
+            margin: 0;
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+
+        .active-filter-badge {
+            background-color: #e2e8f0;
+            color: #475569;
+            font-size: 0.78rem;
+            font-weight: 700;
+            padding: 5px 12px;
+            border-radius: 20px;
+            text-transform: uppercase;
+        }
+    </style>
+</head>
+
+<body>
+    <!-- Navbar Header -->
+    <nav class="navbar navbar-expand-lg navbar-custom mb-4">
+        <div class="container-fluid">
+            <a class="navbar-brand d-flex align-items-center gap-2" th:href="@{/gccservicepaymenttracker/dashboard}">
+                <i class="fa-solid fa-file-invoice-dollar text-warning fs-4"></i>
+                <span>GCC Service Payment Tracker - Details View</span>
+            </a>
+            <div class="d-flex align-items-center gap-3">
+                <a th:href="@{/gccservicepaymenttracker/dashboard}" class="btn-back d-flex align-items-center gap-2">
+                    <i class="fa-solid fa-arrow-left"></i> Back to Dashboard
+                </a>
+            </div>
+        </div>
+    </nav>
+
+    <!-- Main Content Container -->
+    <div class="container-fluid px-4 pb-5">
+        <!-- Page Title & Header Actions Card -->
+        <div class="card-custom">
+            <div class="d-flex justify-content-between align-items-center flex-wrap gap-2 mb-3">
+                <h4 class="fw-bold m-0 d-flex align-items-center gap-2" style="color: #0f5c78;" id="details-page-title">
+                    <i class="fa-solid fa-list-check"></i>
+                    <span>Count Details</span>
+                    <span class="active-filter-badge ms-2" id="details-filter-context-badge">TYPE: ALL TYPES</span>
+                </h4>
+                <div class="d-flex align-items-center gap-2 flex-wrap">
+                    <button type="button"
+                        class="btn btn-success fw-bold px-3 py-2 d-inline-flex align-items-center gap-1 shadow-sm"
+                        onclick="exportDetailsToExcel()">
+                        <i class="fa-solid fa-file-excel me-1"></i> Export to Excel
+                    </button>
+                    <button type="button"
+                        class="btn btn-danger fw-bold px-3 py-2 d-inline-flex align-items-center gap-1 shadow-sm"
+                        onclick="openDeletedRecordsModal()">
+                        <i class="fa-solid fa-trash-can me-1"></i> Deleted Records
+                    </button>
+                    <button th:if="${isAdmin}" type="button"
+                        class="btn btn-primary fw-bold px-3 py-2 d-inline-flex align-items-center gap-1 shadow-sm"
+                        style="background-color: #0f5c78; border-color: #0f5c78;" onclick="openAddModal()">
+                        <i class="fa-solid fa-plus me-1"></i> Add Payment Tracking Record
+                    </button>
+                </div>
+            </div>
+
+            <!-- Entries & Quick Search Toolbar -->
+            <div class="d-flex justify-content-between align-items-center flex-wrap gap-2 pt-2 border-top">
+                <div class="d-flex align-items-center gap-2">
+                    <span class="text-secondary fw-semibold" style="font-size: 0.85rem;">Show</span>
+                    <select id="entries-per-page-select" class="form-select form-select-sm" style="width: 90px;"
+                        onchange="changePageSize(this.value)">
+                        <option value="15" selected>15</option>
+                        <option value="20">20</option>
+                        <option value="50">50</option>
+                        <option value="100">100</option>
+                        <option value="all">All</option>
+                    </select>
+                    <span class="text-secondary fw-semibold" style="font-size: 0.85rem;">entries</span>
+                </div>
+                <div class="d-flex align-items-center gap-2">
+                    <span class="text-secondary fw-semibold" style="font-size: 0.85rem;">Search:</span>
+                    <input type="text" id="details-search-input" class="form-control form-control-sm"
+                        style="width: 250px;" placeholder="Search in this table..." oninput="applyDetailsFilters()">
+                </div>
+            </div>
+        </div>
+
+        <!-- Filter Badges Card -->
+        <div class="card-custom">
+            <!-- TYPE FILTER BADGES -->
+            <div class="mb-3">
+                <span class="text-uppercase fw-bold text-muted me-2"
+                    style="font-size: 0.75rem; letter-spacing: 0.5px;">Type Filter</span>
+                <div id="details-type-badges" class="d-inline-flex flex-wrap gap-2 align-middle">
+                    <!-- Dynamic Type Badges -->
+                </div>
+            </div>
+
+            <!-- STATUS FILTER BADGES -->
+            <div>
+                <span class="text-uppercase fw-bold text-muted me-2"
+                    style="font-size: 0.75rem; letter-spacing: 0.5px;">Status Filter</span>
+                <div id="details-status-badges" class="d-inline-flex flex-wrap gap-2 align-middle">
+                    <!-- Dynamic Status Badges -->
+                </div>
+            </div>
+        </div>
+
+        <!-- Dropdowns Control Card -->
+        <div class="card-custom mb-4">
+            <div class="row g-3 align-items-end">
+                <div class="col-md-4">
+                    <label class="form-label fw-bold text-secondary" style="font-size: 0.82rem;">Type of Bill</label>
+                    <select id="details-filter-type" class="form-control-custom" onchange="onTypeDropdownChange()">
+                        <option value="all">- All Types -</option>
+                    </select>
+                </div>
+                <div class="col-md-4">
+                    <label class="form-label fw-bold text-secondary" style="font-size: 0.82rem;">Status</label>
+                    <select id="details-filter-status" class="form-control-custom" onchange="onStatusDropdownChange()">
+                        <option value="all">- All Statuses -</option>
+                    </select>
+                </div>
+                <div class="col-md-4">
+                    <label class="form-label fw-bold text-secondary" style="font-size: 0.82rem;">Vendor</label>
+                    <select id="details-filter-vendor" class="form-control-custom" onchange="applyDetailsFilters()">
+                        <option value="all">- All Vendors -</option>
+                    </select>
+                </div>
+            </div>
+        </div>
+
+        <!-- Datatable Card -->
+        <div class="card-custom">
+            <div class="table-responsive" style="max-height: 550px; overflow-y: auto;">
+                <table class="table grid-table table-striped table-hover align-middle mb-0" id="details-datatable">
+                    <thead>
+                        <tr>
+                            <th class="text-center" style="width: 45px;">SR.<br>NO.</th>
+                            <th onclick="sortTable('received_date')" class="cursor-pointer" style="max-width: 80px;">
+                                RECEIVED<br>DATE <span id="sort-received_date-icon" class="sort-icon"><i
+                                        class="fa-solid fa-sort"></i></span></th>
+                            <th onclick="sortTable('invoice_date')" class="cursor-pointer" style="max-width: 75px;">
+                                INVOICE<br>DATE <span id="sort-invoice_date-icon" class="sort-icon"><i
+                                        class="fa-solid fa-sort"></i></span></th>
+                            <th style="max-width: 85px;">PHYSICAL<br>FILE NO.</th>
+                            <th style="max-width: 110px;">EFILE NO./<br>RECEIPT NO.</th>
+                            <th style="min-width: 140px; max-width: 200px;">SUBJECT</th>
+                            <th class="text-center" style="max-width: 80px;">TYPE OF<br>FILE</th>
+                            <th style="max-width: 110px;">VENDOR<br>NAME</th>
+                            <th onclick="sortTable('amount')" class="cursor-pointer text-end" style="max-width: 90px;">
+                                AMOUNT <span id="sort-amount-icon" class="sort-icon"><i
+                                        class="fa-solid fa-sort"></i></span></th>
+                            <th onclick="sortTable('age')" class="cursor-pointer text-center" style="max-width: 75px;">
+                                AGE OF<br>BILL<br>(DAYS) <span id="sort-age-icon" class="sort-icon"><i
+                                        class="fa-solid fa-sort"></i></span></th>
+                            <th onclick="sortTable('resolved_status')" class="cursor-pointer text-center"
+                                style="max-width: 90px;">STATUS <span id="sort-resolved_status-icon"
+                                    class="sort-icon"><i class="fa-solid fa-sort"></i></span></th>
+                            <th style="min-width: 150px; max-width: 220px;">REMARKS</th>
+                            <th onclick="sortTable('updated_date')" class="cursor-pointer" style="max-width: 90px;">
+                                LAST<br>UPDATED AT <span id="sort-updated_date-icon" class="sort-icon"><i
+                                        class="fa-solid fa-sort"></i></span></th>
+                            <th style="max-width: 90px;">LAST UPDATED<br>BY</th>
+                            <th class="text-center" style="width: 70px;">ACTIONS</th>
+                        </tr>
+                    </thead>
+                    <tbody id="details-table-body">
+                        <tr>
+                            <td colspan="15" class="text-center text-muted py-4">Loading details data...</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+
+            <!-- Pagination Bar -->
+            <div class="d-flex justify-content-between align-items-center mt-4 flex-wrap gap-2">
+                <div class="text-muted fw-semibold" style="font-size: 0.85rem;" id="details-pagination-info">
+                    Showing 0 to 0 of 0 entries
+                </div>
+                <div class="d-flex align-items-center gap-2">
+                    <button type="button" class="btn btn-sm btn-outline-secondary" id="btn-prev-page"
+                        onclick="changePage(-1)">Previous</button>
+                    <span class="fw-bold px-2" style="font-size: 0.85rem;" id="page-num-display">Page 1</span>
+                    <button type="button" class="btn btn-sm btn-outline-secondary" id="btn-next-page"
+                        onclick="changePage(1)">Next</button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Modals -->
+
+    <!-- Add/Edit Record Modal -->
+    <div class="modal fade" id="recordModal" tabindex="-1" aria-labelledby="recordModalLabel" aria-hidden="true">
+        <div class="modal-dialog modal-lg modal-dialog-centered">
+            <div class="modal-content">
+                <div class="modal-custom-header">
+                    <h5 class="modal-custom-title" id="recordModalLabel">
+                        <i class="fa-solid fa-file-invoice-dollar"></i> Add/Edit Record
+                    </h5>
+                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
+                        aria-label="Close"></button>
+                </div>
+                <div class="modal-body">
+                    <form id="recordForm" onsubmit="saveRecord(event)">
+                        <input type="hidden" id="form-id" name="id">
+
+                        <div class="row g-3">
+                            <div class="col-md-6">
+                                <label for="form-received-date" class="form-label fw-semibold text-secondary">Received
+                                    Date <span class="text-danger">*</span></label>
+                                <input type="date" class="form-control" id="form-received-date" required
+                                    onclick="this.showPicker()">
+                            </div>
+
+                            <div class="col-md-6">
+                                <label for="form-type" class="form-label fw-semibold text-secondary">Type <span
+                                        class="text-danger">*</span></label>
+                                <select class="form-select" id="form-type" required></select>
+                            </div>
+
+                            <div class="col-md-6">
+                                <label for="form-vendor-select" class="form-label fw-semibold text-secondary">Vendor
+                                    Name <span class="text-danger">*</span></label>
+                                <select class="form-select mb-2" id="form-vendor-select"
+                                    onchange="toggleCustomVendor()">
+                                    <option value="">-- Select Vendor --</option>
+                                    <option value="__custom__">-- Write-in custom vendor --</option>
+                                </select>
+                                <input type="text" class="form-control" id="form-vendor-custom"
+                                    placeholder="Enter Custom Vendor Name" style="display: none;">
+                            </div>
+
+                            <div class="col-md-6">
+                                <label for="form-subject" class="form-label fw-semibold text-secondary">Subject <span
+                                        class="text-danger">*</span></label>
+                                <input type="text" class="form-control" id="form-subject"
+                                    placeholder="Enter subject/matter" required>
+                            </div>
+
+                            <div class="col-md-6">
+                                <label for="form-amount" class="form-label fw-semibold text-secondary">Amount <span
+                                        class="text-danger">*</span></label>
+                                <input type="text" class="form-control" id="form-amount"
+                                    placeholder="Enter amount (e.g. 50,000)" required>
+                            </div>
+
+                            <div class="col-md-6">
+                                <label for="form-invoice-no" class="form-label fw-semibold text-secondary">Invoice
+                                    No</label>
+                                <input type="text" class="form-control" id="form-invoice-no"
+                                    placeholder="Enter invoice number">
+                            </div>
+
+                            <div class="col-md-6">
+                                <label for="form-receiptno" class="form-label fw-semibold text-secondary">Receipt
+                                    No</label>
+                                <input type="text" class="form-control" id="form-receiptno"
+                                    placeholder="Enter Receipt No">
+                            </div>
+
+                            <div class="col-md-6">
+                                <label for="form-invoice-date" class="form-label fw-semibold text-secondary">Invoice
+                                    Date</label>
+                                <input type="date" class="form-control" id="form-invoice-date"
+                                    onclick="this.showPicker()">
+                            </div>
+
+                            <div class="col-md-6">
+                                <label for="form-physical-file-no"
+                                    class="form-label fw-semibold text-secondary">Physical File No</label>
+                                <input type="text" class="form-control" id="form-physical-file-no"
+                                    placeholder="Enter physical file reference number">
+                            </div>
+
+                            <div class="col-md-6">
+                                <label for="form-status" class="form-label fw-semibold text-secondary">Status <span
+                                        class="text-danger">*</span></label>
+                                <select class="form-select" id="form-status" required></select>
+                            </div>
+
+                            <div class="col-md-12">
+                                <label for="form-pdf" class="form-label fw-semibold text-secondary">PDF Attachment
+                                    (Optional)</label>
+                                <input type="file" class="form-control" id="form-pdf" accept="application/pdf">
+                                <div id="form-existing-pdf-container" class="mt-2" style="display: none;">
+                                    <span class="text-secondary fw-semibold">Current Document:</span>
+                                    <a id="form-existing-pdf-link" href="#" target="_blank"
+                                        class="ms-1 text-primary fw-bold text-decoration-none">
+                                        <i class="fa-solid fa-file-pdf"></i> View PDF
+                                    </a>
+                                </div>
+                            </div>
+
+                            <div class="col-12">
+                                <label for="form-remarks" class="form-label fw-semibold text-secondary">Remarks</label>
+                                <textarea class="form-control" id="form-remarks" rows="2"
+                                    placeholder="Additional remarks..."></textarea>
+                            </div>
+                        </div>
+
+                        <div class="d-flex justify-content-end gap-2 mt-4">
+                            <button type="button" class="btn btn-secondary px-4" data-bs-dismiss="modal">Cancel</button>
+                            <button type="submit" class="btn btn-primary px-4"
+                                style="background-color: #0f5c78; border-color: #0f5c78;">
+                                <i class="fa-solid fa-save"></i> Save Record
+                            </button>
+                        </div>
+                    </form>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Update History Modal -->
+    <div class="modal fade" id="historyModal" tabindex="-1" aria-labelledby="historyModalLabel" aria-hidden="true">
+        <div class="modal-dialog modal-xl modal-dialog-centered">
+            <div class="modal-content">
+                <div class="modal-custom-header" style="background-color: #2c3e50;">
+                    <h5 class="modal-custom-title" id="historyModalLabel">
+                        <i class="fa-solid fa-clock-rotate-left"></i> Payment Record Update History
+                    </h5>
+                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
+                        aria-label="Close"></button>
+                </div>
+                <div class="modal-body">
+                    <div class="table-responsive" style="max-height: 400px; border: 1px solid #eef2f6;">
+                        <table class="table table-hover modal-table grid-table" id="history-table">
+                            <thead>
+                                <tr>
+                                    <th style="width: 45px; white-space: nowrap;" class="text-center">S.NO</th>
+                                    <th style="white-space: nowrap;">RECEIVED<br>DATE</th>
+                                    <th style="white-space: nowrap;">INVOICE<br>DATE</th>
+                                    <th style="min-width: 140px; max-width: 200px;">SUBJECT</th>
+                                    <th style="white-space: nowrap;">TYPE</th>
+                                    <th style="min-width: 110px; max-width: 160px;">VENDOR<br>NAME</th>
+                                    <th style="white-space: nowrap;">AMOUNT</th>
+                                    <th style="white-space: nowrap;">STATUS</th>
+                                    <th style="min-width: 140px; max-width: 220px;">REMARKS</th>
+                                    <th style="white-space: nowrap;">LAST<br>UPDATED AT</th>
+                                    <th style="white-space: nowrap;">LAST UPDATED<br>BY</th>
+                                    <th class="text-center" style="width: 70px;">ACTIONS</th>
+                                </tr>
+                            </thead>
+                            <tbody id="history-tbody">
+                                <!-- Populated dynamically -->
+                            </tbody>
+                        </table>
+                        <div id="no-history-found" class="text-center text-muted py-5" style="display: none;">
+                            <i class="fa-solid fa-history fs-1 mb-3 text-secondary" style="opacity: 0.5;"></i>
+                            <p class="fw-bold mb-0">No update history found for this record.</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Delete Confirmation Modal -->
+    <div class="modal fade" id="deleteConfirmModal" tabindex="-1" aria-labelledby="deleteConfirmModalLabel"
+        aria-hidden="true" style="z-index: 1070;">
+        <div class="modal-dialog modal-dialog-centered">
+            <div class="modal-content">
+                <div class="modal-custom-header" style="background-color: #dc3545; color: white;">
+                    <h5 class="modal-custom-title" id="deleteConfirmModalLabel">
+                        <i class="fa-solid fa-triangle-exclamation"></i> Confirm Delete
+                    </h5>
+                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
+                        aria-label="Close"></button>
+                </div>
+                <div class="modal-body">
+                    <p class="text-dark fw-semibold">Are you sure you want to delete this payment tracking record?</p>
+                    <div class="mb-3">
+                        <label for="delete-remarks" class="form-label fw-bold text-secondary text-uppercase"
+                            style="font-size: 0.75rem;">Remarks / Reason for Deletion <span
+                                class="text-danger">*</span></label>
+                        <textarea id="delete-remarks" class="form-control" rows="3"
+                            placeholder="Enter remarks for deleting this record..." required></textarea>
+                    </div>
+                </div>
+                <div class="modal-footer bg-light p-2">
+                    <button type="button" class="btn btn-sm btn-secondary px-3" data-bs-dismiss="modal">Cancel</button>
+                    <button type="button" class="btn btn-sm btn-danger px-3" onclick="submitDeleteRecord()">Delete
+                        Record</button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Deleted Records Modal -->
+    <div class="modal fade" id="deletedRecordsModal" tabindex="-1" aria-labelledby="deletedRecordsModalLabel"
+        aria-hidden="true">
+        <div class="modal-dialog modal-xl modal-dialog-centered">
+            <div class="modal-content">
+                <div class="modal-custom-header" style="background-color: #dc3545;">
+                    <h5 class="modal-custom-title" id="deletedRecordsModalLabel">
+                        <i class="fa-solid fa-trash-can"></i> Deleted Payment Records
+                    </h5>
+                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
+                        aria-label="Close"></button>
+                </div>
+                <div class="modal-body" style="padding: 1.5rem;">
+                    <div class="table-responsive"
+                        style="max-height: 450px; overflow-y: auto; border: 1px solid #eef2f6;">
+                        <table class="table grid-table table-striped table-hover align-middle mb-0"
+                            id="deleted-tracking-table">
+                            <thead class="table-light">
+                                <tr>
+                                    <th class="text-center" style="width: 45px;">SR.<br>NO.</th>
+                                    <th>RECEIVED<br>DATE</th>
+                                    <th>INVOICE<br>DATE</th>
+                                    <th>PHYSICAL<br>FILE NO.</th>
+                                    <th>EFILE NO./<br>RECEIPT NO.</th>
+                                    <th style="min-width: 140px; max-width: 200px;">SUBJECT</th>
+                                    <th class="text-center">TYPE OF<br>FILE</th>
+                                    <th style="min-width: 110px; max-width: 160px;">VENDOR<br>NAME</th>
+                                    <th class="text-end">AMOUNT</th>
+                                    <th class="text-center">AGE OF<br>BILL<br>(DAYS)</th>
+                                    <th class="text-center">STATUS</th>
+                                    <th style="min-width: 140px; max-width: 220px;">DELETION<br>REMARKS</th>
+                                    <th>DELETED<br>DATE</th>
+                                    <th>DELETED<br>BY</th>
+                                    <th class="text-center" style="width: 70px;">ACTIONS</th>
+                                </tr>
+                            </thead>
+                            <tbody id="deleted-tracking-tbody">
+                                <!-- Populated dynamically via JS -->
+                            </tbody>
+                        </table>
+                        <div id="deleted-no-records-found" class="empty-state text-center py-5" style="display: none;">
+                            <i class="fa-solid fa-trash-arrow-up empty-icon"
+                                style="font-size: 2.5rem; color: #cbd5e1; margin-bottom: 10px;"></i>
+                            <h5>No Deleted Records</h5>
+                            <p>No deleted payment tracking records found in the database.</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Script Logic -->
+    <script th:inline="javascript">
+        const contextPath = /*[[@{/}]]*/ '';
+        const isAdmin = /*[[${isAdmin}]]*/ false;
+
+        // Data Caches
+        let allRecords = [];
+        let clickFilteredRecords = [];
+        let filteredRecords = [];
+        let activeTypes = [];
+        let activeStatus = [];
+        let activeVendors = [];
+
+        // Initial URL Filters
+        let urlClickType = null;
+        let urlClickValue = null;
+        let urlTitle = null;
+        let urlVendor = null;
+        let urlCol = null;
+
+        // Current Active Sub-Filters
+        let activeQuickType = 'all';
+        let activeQuickStatus = 'all';
+
+        // Sorting State
+        let sortCol = null;
+        let sortAsc = true;
+
+        // Pagination State
+        let currentPage = 1;
+        let pageSize = 15;
+
+        // Modal Instances
+        let recordModalObj = null;
+        let historyModalObj = null;
+        let deleteConfirmModalObj = null;
+        let deletedRecordsModalObj = null;
+        let recordIdToDelete = null;
+
+        document.addEventListener('DOMContentLoaded', () => {
+            if (typeof bootstrap !== 'undefined') {
+                const recEl = document.getElementById('recordModal');
+                if (recEl) recordModalObj = new bootstrap.Modal(recEl);
+                const histEl = document.getElementById('historyModal');
+                if (histEl) historyModalObj = new bootstrap.Modal(histEl);
+                const delConfEl = document.getElementById('deleteConfirmModal');
+                if (delConfEl) deleteConfirmModalObj = new bootstrap.Modal(delConfEl);
+                const delRecEl = document.getElementById('deletedRecordsModal');
+                if (delRecEl) deletedRecordsModalObj = new bootstrap.Modal(delRecEl);
+            }
+
+            parseUrlParameters();
+            fetchInitialData();
+        });
+
+        function getCsrfHeaders() {
+            const csrfToken = document.querySelector("meta[name='_csrf']")?.getAttribute("content");
+            const csrfHeader = document.querySelector("meta[name='_csrf_header']")?.getAttribute("content");
+            if (csrfToken && csrfHeader) {
+                return { [csrfHeader]: csrfToken };
+            }
+            return {};
+        }
+
+        function parseUrlParameters() {
+            const params = new URLSearchParams(window.location.search);
+            urlClickType = params.get('clickType');
+            urlClickValue = params.get('clickValue');
+            urlTitle = params.get('title');
+            urlVendor = params.get('vendor');
+            urlCol = params.get('col');
+
+            if (urlTitle) {
+                const titleEl = document.getElementById('details-page-title');
+                if (titleEl) {
+                    titleEl.innerHTML = `<i class="fa-solid fa-list-check me-2"></i>Count Details: ${escapeHtml(urlTitle)}`;
+                }
+                const badgeEl = document.getElementById('details-filter-context-badge');
+                if (badgeEl) {
+                    badgeEl.textContent = `TYPE: ${urlTitle.toUpperCase()}`;
+                }
+                document.title = `Count Details: ${urlTitle} - GCC Service Payment Tracker`;
+            }
+        }
+
+        async function fetchInitialData() {
+            try {
+                const ts = new Date().getTime();
+                const [listRes, statusRes, typesRes, vendorsRes] = await Promise.all([
+                    fetch(contextPath + 'gccservicepaymenttracker/api/list?_=' + ts),
+                    fetch(contextPath + 'gccservicepaymenttracker/api/statuslist?_=' + ts),
+                    fetch(contextPath + 'gccservicepaymenttracker/api/types?_=' + ts),
+                    fetch(contextPath + 'gccservicepaymenttracker/api/vendors?_=' + ts)
+                ]);
+
+                allRecords = await listRes.json() || [];
+                const allFetchedStatus = await statusRes.json() || [];
+                activeTypes = await typesRes.json() || [];
+                activeVendors = await vendorsRes.json() || [];
+
+                // Filter & Sort Statuses matching dashboard.html
+                const fetchedStatus = allFetchedStatus.filter(s => {
+                    const name = String(s.status_name).toLowerCase().trim();
+                    return !name.includes('duplicate') && !name.includes('no action') && !name.includes('action required');
+                });
+
+                const completedStatuses = fetchedStatus.filter(s => getStatusKey(s.status_name) === 'completed');
+                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];
+
+                populateDropdownOptions();
+                evaluateClickFilter();
+            } catch (err) {
+                console.error("Error loading details data:", err);
+                const tbody = document.getElementById('details-table-body');
+                if (tbody) {
+                    tbody.innerHTML = `<tr><td colspan="15" class="text-center text-danger py-4">Failed to load bill details.</td></tr>`;
+                }
+            }
+        }
+
+        function populateDropdownOptions() {
+            const typeSelect = document.getElementById('details-filter-type');
+            const statusSelect = document.getElementById('details-filter-status');
+            const vendorSelect = document.getElementById('details-filter-vendor');
+
+            if (typeSelect) {
+                typeSelect.innerHTML = '<option value="all">- All Types -</option>';
+                activeTypes.forEach(t => {
+                    const opt = document.createElement('option');
+                    opt.value = getCategoryCode(t.type_name);
+                    opt.textContent = t.type_name;
+                    typeSelect.appendChild(opt);
+                });
+            }
+
+            if (statusSelect) {
+                statusSelect.innerHTML = '<option value="all">- All Statuses -</option>';
+                activeStatus.forEach(s => {
+                    const opt = document.createElement('option');
+                    opt.value = s.id;
+                    opt.textContent = s.status_name;
+                    statusSelect.appendChild(opt);
+                });
+            }
+
+            if (vendorSelect) {
+                vendorSelect.innerHTML = '<option value="all">- All Vendors -</option>';
+                activeVendors.forEach(v => {
+                    const opt = document.createElement('option');
+                    opt.value = String(v.vendor_name).trim();
+                    opt.textContent = v.vendor_name;
+                    vendorSelect.appendChild(opt);
+                });
+            }
+
+            // Populate Form Dropdowns for Modal Form
+            const formType = document.getElementById('form-type');
+            if (formType) {
+                formType.innerHTML = '<option value="">-- Select Type --</option>';
+                activeTypes.forEach(t => {
+                    const opt = document.createElement('option');
+                    opt.value = t.id;
+                    opt.textContent = t.type_name;
+                    formType.appendChild(opt);
+                });
+            }
+
+            const formStatus = document.getElementById('form-status');
+            if (formStatus) {
+                formStatus.innerHTML = '<option value="">-- Select Status --</option>';
+                activeStatus.forEach(s => {
+                    const opt = document.createElement('option');
+                    opt.value = s.id;
+                    opt.textContent = s.status_name;
+                    formStatus.appendChild(opt);
+                });
+            }
+
+            const formVendorSelect = document.getElementById('form-vendor-select');
+            if (formVendorSelect) {
+                formVendorSelect.innerHTML = '<option value="">-- Select Vendor --</option>';
+                activeVendors.forEach(v => {
+                    const opt = document.createElement('option');
+                    opt.value = v.id;
+                    opt.textContent = v.vendor_name;
+                    formVendorSelect.appendChild(opt);
+                });
+                const customOpt = document.createElement('option');
+                customOpt.value = '__custom__';
+                customOpt.textContent = '-- Write-in custom vendor --';
+                formVendorSelect.appendChild(customOpt);
+            }
+        }
+
+        function calculateAgeOfBill(receivedDateStr) {
+            if (!receivedDateStr) return 0;
+            try {
+                let recDate;
+                if (typeof receivedDateStr === 'string' && receivedDateStr.includes('/')) {
+                    const parts = receivedDateStr.split('/');
+                    if (parts.length === 3) {
+                        // DD/MM/YYYY
+                        recDate = new Date(parseInt(parts[2], 10), parseInt(parts[1], 10) - 1, parseInt(parts[0], 10));
+                    } else {
+                        recDate = new Date(receivedDateStr);
+                    }
+                } else {
+                    recDate = new Date(receivedDateStr);
+                }
+
+                if (isNaN(recDate.getTime())) return 0;
+                recDate.setHours(0, 0, 0, 0);
+
+                const today = new Date();
+                today.setHours(0, 0, 0, 0);
+
+                if (today <= recDate) {
+                    return 0;
+                } else {
+                    const diffTime = today.getTime() - recDate.getTime();
+                    return Math.max(0, Math.floor(diffTime / (1000 * 60 * 60 * 24)));
+                }
+            } catch (e) {
+                console.error("Error calculating age of bill:", e);
+                return 0;
+            }
+        }
+
+        function evaluateClickFilter() {
+            let parsedClickValue = urlClickValue;
+            if (urlClickType === 'age' || urlClickType === 'vendor_age' || urlClickType === 'completed_age' || urlClickType === 'vendor_completed_age') {
+                if (urlClickValue) {
+                    parsedClickValue = urlClickValue.split(',').map(p => p === 'null' || p === '' ? null : parseInt(p, 10));
+                }
+            }
+
+            const cleanStr = val => (val === null || val === undefined || String(val).trim() === '') ? '' : String(val).trim().toLowerCase();
+
+            clickFilteredRecords = allRecords.filter(row => {
+                let age = parseInt(calculateAgeOfBill(row.received_date), 10);
+                const rowVendor = cleanStr(row.resolved_vendor || row.vendor_name || 'Unknown');
+                const rowStatusStr = cleanStr(row.status);
+                const rowStatusName = cleanStr(row.resolved_status || getStatusName(row.status));
+
+                const matchedStatus = activeStatus.find(s =>
+                    cleanStr(s.id) === rowStatusStr ||
+                    cleanStr(s.status_name) === rowStatusStr ||
+                    cleanStr(s.status_name) === rowStatusName
+                );
+
+                const isCompleted = matchedStatus && getStatusKey(matchedStatus.status_name) === 'completed';
+
+                if (urlClickType === 'category') {
+                    const rowCategory = getCategoryCode(row.resolved_type || row.type);
+                    if (rowCategory !== parsedClickValue) return false;
+                }
+
+                if (urlClickType === 'age') {
+                    if (isCompleted) return false;
+                    if (Array.isArray(parsedClickValue)) {
+                        const [min, max] = parsedClickValue;
+                        if (max !== null) {
+                            if (age < min || age > max) return false;
+                        } else {
+                            if (age < min) return false;
+                        }
+                    }
+                }
+
+                if (urlClickType === 'completed_custom') {
+                    if (!isCompleted) return false;
+                }
+
+                if (urlClickType === 'pending_custom') {
+                    if (isCompleted) return false;
+                }
+
+                if (urlClickType === 'status') {
+                    const targetVal = cleanStr(parsedClickValue);
+                    const matchedTarget = activeStatus.find(s => cleanStr(s.id) === targetVal || cleanStr(s.status_name) === targetVal);
+                    if (matchedTarget) {
+                        const matches = rowStatusStr === cleanStr(matchedTarget.id) ||
+                            rowStatusStr === cleanStr(matchedTarget.status_name) ||
+                            rowStatusName === cleanStr(matchedTarget.status_name);
+                        if (!matches) return false;
+                    }
+                }
+
+                if (urlClickType === 'vendor_total') {
+                    if (rowVendor !== cleanStr(urlVendor)) return false;
+                }
+
+                if (urlClickType === 'vendor_pending_custom') {
+                    if (rowVendor !== cleanStr(urlVendor)) return false;
+                    if (isCompleted) return false;
+                }
+
+                if (urlClickType === 'vendor_status') {
+                    if (rowVendor !== cleanStr(urlVendor)) return false;
+                    const targetVal = cleanStr(urlCol || parsedClickValue);
+                    const matchedTarget = activeStatus.find(s => cleanStr(s.id) === targetVal || cleanStr(s.status_name) === targetVal);
+                    if (matchedTarget) {
+                        const matches = rowStatusStr === cleanStr(matchedTarget.id) ||
+                            rowStatusStr === cleanStr(matchedTarget.status_name) ||
+                            rowStatusName === cleanStr(matchedTarget.status_name);
+                        if (!matches) return false;
+                    }
+                }
+
+                if (urlClickType === 'vendor_age') {
+                    if (rowVendor !== cleanStr(urlVendor)) return false;
+                    if (isCompleted) return false;
+
+                    if (Array.isArray(parsedClickValue)) {
+                        const [min, max] = parsedClickValue;
+                        if (max !== null) {
+                            if (age < min || age > max) return false;
+                        } else {
+                            if (age < min) return false;
+                        }
+                    }
+                }
+
+                if (urlClickType === 'vendor_completed_age') {
+                    if (rowVendor !== cleanStr(urlVendor)) return false;
+                    if (!isCompleted) return false;
+
+                    if (Array.isArray(parsedClickValue)) {
+                        const [min, max] = parsedClickValue;
+                        if (max !== null) {
+                            if (age < min || age > max) return false;
+                        } else {
+                            if (age < min) return false;
+                        }
+                    }
+                }
+
+                if (urlClickType === 'latest_updates') {
+                    if (cleanStr(row.updated_date) !== cleanStr(parsedClickValue)) return false;
+                }
+
+                return true;
+            });
+
+            // Initial selections for dropdowns
+            if (urlClickType === 'category' && parsedClickValue) {
+                activeQuickType = parsedClickValue;
+                const typeSelect = document.getElementById('details-filter-type');
+                if (typeSelect) typeSelect.value = parsedClickValue;
+            }
+            if (urlClickType === 'status' && parsedClickValue) {
+                const targetVal = cleanStr(parsedClickValue);
+                const matchedTarget = activeStatus.find(s => cleanStr(s.id) === targetVal || cleanStr(s.status_name) === targetVal);
+                if (matchedTarget) {
+                    activeQuickStatus = String(matchedTarget.id);
+                    const statusSelect = document.getElementById('details-filter-status');
+                    if (statusSelect) statusSelect.value = String(matchedTarget.id);
+                }
+            }
+            if (urlVendor) {
+                const vendorSelect = document.getElementById('details-filter-vendor');
+                if (vendorSelect) {
+                    for (let opt of vendorSelect.options) {
+                        if (cleanStr(opt.textContent) === cleanStr(urlVendor) || cleanStr(opt.value) === cleanStr(urlVendor)) {
+                            vendorSelect.value = opt.value;
+                            break;
+                        }
+                    }
+                }
+            }
+
+            applyDetailsFilters();
+        }
+
+        function renderTypeBadges(records) {
+            const container = document.getElementById('details-type-badges');
+            if (!container) return;
+
+            const counts = {
+                all: records.length,
+                'tax invoice': 0,
+                'sd': 0,
+                'emd': 0,
+                'asd': 0,
+                'agreement': 0
+            };
+
+            records.forEach(r => {
+                const cat = getCategoryCode(r.resolved_type || r.type);
+                if (cat in counts) counts[cat]++;
+            });
+
+            const quickTypes = [
+                { key: 'all', label: 'All Bills', color: '#0f5c78', bgLight: '#f0f9ff', textLight: '#e0f2fe' },
+                { key: 'tax invoice', label: 'Tax Invoice', color: '#166534', bgLight: '#f0fdf4', textLight: '#dcfce7' },
+                { key: 'sd', label: 'Security Deposit', color: '#1e40af', bgLight: '#eff6ff', textLight: '#dbeafe' },
+                { key: 'emd', label: 'EMD', color: '#6b21a8', bgLight: '#faf5ff', textLight: '#f3e8ff' },
+                { key: 'asd', label: 'ASD', color: '#9a3412', bgLight: '#fff7ed', textLight: '#ffedd5' },
+                { key: 'agreement', label: 'Agreement', color: '#9d174d', bgLight: '#fdf2f8', textLight: '#fce7f3' }
+            ];
+
+            let html = '';
+            quickTypes.forEach(t => {
+                const cnt = counts[t.key] || 0;
+                const isActive = activeQuickType === t.key;
+
+                let badgeStyle = isActive
+                    ? `background-color: ${t.color}; color: white; border-color: ${t.color}; font-weight: 600; font-size: 0.9rem; padding: 6px 14px;`
+                    : `background-color: white; color: #334155; border-color: #cbd5e1; font-weight: 500; font-size: 0.9rem; padding: 6px 14px;`;
+                let countStyle = isActive
+                    ? `background-color: ${t.textLight}; color: ${t.color}; font-size: 0.8rem; font-weight: 800; padding: 2px 8px; border-radius: 10px;`
+                    : `background-color: ${t.bgLight}; color: ${t.color}; font-size: 0.8rem; font-weight: 800; padding: 2px 8px; border-radius: 10px;`;
+
+                html += `<span class="badge cursor-pointer border rounded-pill d-inline-flex align-items-center gap-2" style="${badgeStyle}" onclick="selectQuickType('${t.key}')">${escapeHtml(t.label)} <span style="${countStyle}">${cnt}</span></span>`;
+            });
+            container.innerHTML = html;
+        }
+
+        function onTypeDropdownChange() {
+            const typeEl = document.getElementById('details-filter-type');
+            const val = typeEl ? typeEl.value : 'all';
+            selectQuickType(val);
+        }
+
+        function selectQuickType(key) {
+            activeQuickType = key;
+            const typeEl = document.getElementById('details-filter-type');
+            if (typeEl) typeEl.value = key;
+            if (key !== 'all') {
+                activeQuickStatus = 'all';
+                const statusEl = document.getElementById('details-filter-status');
+                if (statusEl) statusEl.value = 'all';
+            }
+            applyDetailsFilters();
+        }
+
+        function renderStatusBadges(typeFilteredRecords) {
+            const container = document.getElementById('details-status-badges');
+            if (!container) return;
+
+            const counts = { all: typeFilteredRecords.length };
+            typeFilteredRecords.forEach(r => {
+                const statusVal = String(r.status || '').trim();
+                const statusName = String(r.resolved_status || getStatusName(r.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;
+                }
+            });
+
+            const isAllActive = activeQuickStatus === 'all';
+            let allBadgeStyle = isAllActive
+                ? `background-color: #0f5c78; color: white; border-color: #0f5c78; font-weight: 600; font-size: 0.9rem; padding: 6px 14px;`
+                : `background-color: white; color: #334155; border-color: #cbd5e1; font-weight: 500; font-size: 0.9rem; padding: 6px 14px;`;
+
+            let html = `<span class="badge cursor-pointer border rounded-pill d-inline-flex align-items-center gap-2" style="${allBadgeStyle}" onclick="selectQuickStatus('all')">All Statuses <span style="background-color: #e0f2fe; color: #0f5c78; font-size: 0.8rem; font-weight: 800; padding: 2px 8px; border-radius: 10px;">${counts.all}</span></span>`;
+
+            activeStatus.forEach(s => {
+                const cnt = counts[s.id] || 0;
+                const isActive = activeQuickStatus === String(s.id);
+                const colorInfo = getStatusStyle(s.status_name);
+                const primaryColor = colorInfo.text || '#475569';
+
+                let badgeStyle = isActive
+                    ? `background-color: ${primaryColor}; color: white; border-color: ${primaryColor}; font-weight: 600; font-size: 0.9rem; padding: 6px 14px;`
+                    : `background-color: white; color: #334155; border-color: #cbd5e1; font-weight: 500; font-size: 0.9rem; padding: 6px 14px;`;
+
+                html += `<span class="badge cursor-pointer border rounded-pill d-inline-flex align-items-center gap-2" style="${badgeStyle}" onclick="selectQuickStatus('${s.id}')">${escapeHtml(s.status_name)} <span style="background-color: ${colorInfo.bg}; color: ${primaryColor}; font-size: 0.8rem; font-weight: 800; padding: 2px 8px; border-radius: 10px;">${cnt}</span></span>`;
+            });
+            container.innerHTML = html;
+        }
+
+        function onStatusDropdownChange() {
+            const statusEl = document.getElementById('details-filter-status');
+            const val = statusEl ? statusEl.value : 'all';
+            selectQuickStatus(val);
+        }
+
+        function selectQuickStatus(key) {
+            activeQuickStatus = String(key);
+            const statusEl = document.getElementById('details-filter-status');
+            if (statusEl) statusEl.value = String(key);
+            applyDetailsFilters();
+        }
+
+        function applyDetailsFilters() {
+            const typeEl = document.getElementById('details-filter-type');
+            const statusEl = document.getElementById('details-filter-status');
+            const vendorEl = document.getElementById('details-filter-vendor');
+            const searchEl = document.getElementById('details-search-input');
+
+            const selectedType = typeEl ? typeEl.value : 'all';
+            const selectedStatus = statusEl ? statusEl.value : 'all';
+            const selectedVendor = vendorEl ? vendorEl.value : 'all';
+            const searchVal = (searchEl ? searchEl.value : '').trim().toLowerCase();
+
+            activeQuickType = selectedType;
+            activeQuickStatus = selectedStatus;
+
+            // 1. Re-render Type Badges
+            renderTypeBadges(clickFilteredRecords);
+
+            // 2. Filter by Type
+            let typeFiltered = [...clickFilteredRecords];
+            if (selectedType !== 'all') {
+                typeFiltered = typeFiltered.filter(row => getCategoryCode(row.resolved_type || row.type) === selectedType);
+            }
+
+            // 3. Re-render Status Badges with typeFiltered dataset
+            renderStatusBadges(typeFiltered);
+
+            // 4. Filter by Status
+            let statusFiltered = typeFiltered;
+            if (selectedStatus !== 'all') {
+                statusFiltered = statusFiltered.filter(row => {
+                    const rowStatusStr = String(row.status || '').trim();
+                    const matched = activeStatus.find(s => String(s.id) === String(selectedStatus));
+                    if (matched) {
+                        return rowStatusStr === String(matched.id) ||
+                            rowStatusStr.toLowerCase() === matched.status_name.toLowerCase().trim();
+                    }
+                    return false;
+                });
+            }
+
+            // 5. Filter by Vendor
+            let vendorFiltered = statusFiltered;
+            if (selectedVendor !== 'all') {
+                vendorFiltered = vendorFiltered.filter(row => {
+                    const rowVendor = String(row.resolved_vendor || row.vendor_name || 'Unknown').trim();
+                    return rowVendor.toLowerCase() === selectedVendor.toLowerCase();
+                });
+            }
+
+            // 6. Filter by Search Query
+            if (searchVal) {
+                vendorFiltered = vendorFiltered.filter(row => {
+                    const str = `${row.bill_no || ''} ${row.department_name || ''} ${row.vendor_name || ''} ${row.resolved_vendor || ''} ${row.resolved_type || row.type || ''} ${row.subject || ''} ${row.physical_file_no || ''} ${row.remarks || ''}`.toLowerCase();
+                    return str.includes(searchVal);
+                });
+            }
+
+            // 7. Sort dataset if sortCol is set
+            if (sortCol) {
+                vendorFiltered.sort((a, b) => {
+                    let valA = a[sortCol] || '';
+                    let valB = b[sortCol] || '';
+
+                    if (sortCol === 'received_date' || sortCol === 'invoice_date' || sortCol === 'updated_date') {
+                        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;
+                        return sortAsc ? timeA - timeB : timeB - timeA;
+                    }
+
+                    if (sortCol === 'amount') {
+                        let numA = parseFloat(String(valA).replace(/[^0-9.-]+/g, "")) || 0;
+                        let numB = parseFloat(String(valB).replace(/[^0-9.-]+/g, "")) || 0;
+                        return sortAsc ? numA - numB : numB - numA;
+                    }
+
+                    if (sortCol === 'age') {
+                        let ageA = calculateAgeOfBill(a.received_date);
+                        let ageB = calculateAgeOfBill(b.received_date);
+                        return sortAsc ? ageA - ageB : ageB - ageA;
+                    }
+
+                    return sortAsc ? String(valA).localeCompare(String(valB)) : String(valB).localeCompare(String(valA));
+                });
+            }
+
+            filteredRecords = vendorFiltered;
+            currentPage = 1;
+            renderTablePage();
+        }
+
+        function sortTable(colName) {
+            if (sortCol === colName) {
+                sortAsc = !sortAsc;
+            } else {
+                sortCol = colName;
+                sortAsc = true;
+            }
+
+            // Update UI sort icons
+            document.querySelectorAll('.sort-icon').forEach(icon => {
+                icon.classList.remove('active');
+                icon.innerHTML = '<i class="fa-solid fa-sort"></i>';
+            });
+
+            const activeIcon = document.getElementById(`sort-${colName}-icon`);
+            if (activeIcon) {
+                activeIcon.classList.add('active');
+                activeIcon.innerHTML = sortAsc ? '<i class="fa-solid fa-sort-up"></i>' : '<i class="fa-solid fa-sort-down"></i>';
+            }
+
+            applyDetailsFilters();
+        }
+
+        function changePageSize(val) {
+            if (val === 'all') {
+                pageSize = (filteredRecords && filteredRecords.length > 0) ? filteredRecords.length : 999999;
+            } else {
+                pageSize = parseInt(val, 10) || 15;
+            }
+            currentPage = 1;
+            renderTablePage();
+        }
+
+        function renderTablePage() {
+            const tbody = document.getElementById('details-table-body');
+            if (!tbody) return;
+            tbody.innerHTML = '';
+
+            const total = filteredRecords.length;
+            if (total === 0) {
+                tbody.innerHTML = `<tr><td colspan="15" class="text-center text-muted py-4">No matching records found.</td></tr>`;
+                const infoEl = document.getElementById('details-pagination-info');
+                if (infoEl) infoEl.textContent = 'Showing 0 to 0 of 0 entries';
+                const pageEl = document.getElementById('page-num-display');
+                if (pageEl) pageEl.textContent = 'Page 1 of 1';
+                return;
+            }
+
+            const totalPages = Math.ceil(total / pageSize);
+            if (currentPage > totalPages) currentPage = totalPages;
+            if (currentPage < 1) currentPage = 1;
+
+            const startIdx = (currentPage - 1) * pageSize;
+            const endIdx = Math.min(startIdx + pageSize, total);
+            const pageData = filteredRecords.slice(startIdx, endIdx);
+
+            const text = val => (val === null || val === undefined || String(val).trim() === '') ? '-' : val;
+
+            pageData.forEach((row, idx) => {
+                const tr = document.createElement('tr');
+                const sno = startIdx + idx + 1;
+
+                // Format Amount without NaN
+                let amtStr = '-';
+                if (row.amount !== null && row.amount !== undefined && String(row.amount).trim() !== '') {
+                    const parsedNum = parseFloat(String(row.amount).replace(/,/g, ''));
+                    amtStr = !isNaN(parsedNum) ? '₹ ' + parsedNum.toLocaleString('en-IN', { minimumFractionDigits: 2, maximumFractionDigits: 2 }) : String(row.amount);
+                }
+
+                const recDateStr = formatDate(row.received_date);
+                const invoiceDateStr = formatDate(row.invoice_date);
+                const updatedSplit = formatDateTimeSplit(row.updated_date || row.created_date);
+                const ageDays = calculateAgeOfBill(row.received_date);
+
+                const statusName = row.resolved_status || getStatusName(row.status) || 'Pending';
+                const colorInfo = getStatusStyle(statusName);
+                const statusBadge = `<span class="status-badge status-${statusName.toLowerCase().replace(/\s+/g, '-')}" style="background-color: ${colorInfo.bg}; color: ${colorInfo.text};">${escapeHtml(statusName)}</span>`;
+
+                const typeBadge = getTypeBadge(row.resolved_type || row.type, row.file_path);
+
+                // Build Actions Cell (2x2 Grid)
+                const tdActions = document.createElement('td');
+                tdActions.className = 'text-center';
+                tdActions.style.width = '70px';
+
+                const actionsGrid = document.createElement('div');
+                actionsGrid.className = 'actions-grid';
+
+                // PDF Button
+                if (row.file_path) {
+                    const btnPdf = document.createElement('button');
+                    btnPdf.className = 'btn-grid-action btn-grid-pdf';
+                    btnPdf.innerHTML = '<i class="fa-solid fa-file-pdf"></i>';
+                    btnPdf.title = 'View PDF Document';
+                    btnPdf.onclick = () => openPdfFile(row.file_path);
+                    actionsGrid.appendChild(btnPdf);
+                }
+
+                // History Button
+                const btnHistory = document.createElement('button');
+                btnHistory.className = 'btn-grid-action btn-outline-secondary';
+                btnHistory.style.border = '1px solid #cbd5e1';
+                btnHistory.innerHTML = '<i class="fa-solid fa-clock-rotate-left"></i>';
+                btnHistory.title = 'View Update History';
+                btnHistory.onclick = () => showHistoryModal(row.id);
+                actionsGrid.appendChild(btnHistory);
+
+                // Edit & Delete Buttons (for Admin)
+                if (isAdmin) {
+                    const btnEdit = document.createElement('button');
+                    btnEdit.className = 'btn-grid-action btn-grid-edit';
+                    btnEdit.innerHTML = '<i class="fa-solid fa-pen-to-square"></i>';
+                    btnEdit.title = 'Edit Record';
+                    btnEdit.onclick = () => openEditModal(row);
+
+                    const btnDelete = document.createElement('button');
+                    btnDelete.className = 'btn-grid-action btn-grid-delete';
+                    btnDelete.innerHTML = '<i class="fa-solid fa-trash-can"></i>';
+                    btnDelete.title = 'Delete Record';
+                    btnDelete.onclick = () => deleteRecord(row.id);
+
+                    actionsGrid.appendChild(btnEdit);
+                    actionsGrid.appendChild(btnDelete);
+                }
+
+                tdActions.appendChild(actionsGrid);
+
+                tr.innerHTML = `
+                    <td class="text-center fw-semibold text-secondary" style="width: 45px; white-space: nowrap;">${sno}</td>
+                    <td style="width: 80px; white-space: nowrap;">${recDateStr}</td>
+                    <td style="width: 80px; white-space: nowrap;">${invoiceDateStr}</td>
+                    <td style="max-width: 85px; word-break: break-word;">${escapeHtml(text(row.physical_file_no))}</td>
+                    <td class="fw-bold text-dark font-monospace" style="max-width: 110px; word-break: break-word;">${escapeHtml(text(row.receiptno || row.bill_no))}</td>
+                    <td style="min-width: 140px; max-width: 200px; word-break: break-word; line-height: 1.35;" title="${escapeHtml(text(row.subject))}">${escapeHtml(text(row.subject))}</td>
+                    <td class="text-center" style="max-width: 80px;">${typeBadge}</td>
+                    <td class="fw-semibold text-secondary" style="max-width: 110px; word-break: break-word; line-height: 1.35;" title="${escapeHtml(text(row.resolved_vendor || row.vendor_name))}">${escapeHtml(text(row.resolved_vendor || row.vendor_name))}</td>
+                    <td class="text-end fw-bold font-monospace" style="max-width: 90px; white-space: nowrap;">${amtStr}</td>
+                    <td class="text-center fw-bold ${ageDays > 60 ? 'text-danger' : 'text-dark'}" style="max-width: 50px; white-space: nowrap;">${ageDays}</td>
+                    <td class="text-center" style="max-width: 95px;">${statusBadge}</td>
+                    <td style="min-width: 150px; max-width: 220px; word-break: break-word; line-height: 1.35;" title="${escapeHtml(text(row.remarks))}"><small class="text-muted">${escapeHtml(text(row.remarks))}</small></td>
+                    <td style="max-width: 90px; white-space: nowrap;">${updatedSplit}</td>
+                    <td class="fw-semibold text-secondary" style="max-width: 90px; word-break: break-word;">${escapeHtml(text(row.updated_by_name || row.updated_by))}</td>
+                `;
+                tr.appendChild(tdActions);
+                tbody.appendChild(tr);
+            });
+
+            const infoEl = document.getElementById('details-pagination-info');
+            if (infoEl) infoEl.textContent = `Showing ${startIdx + 1} to ${endIdx} of ${total} entries`;
+            const pageEl = document.getElementById('page-num-display');
+            if (pageEl) pageEl.textContent = `Page ${currentPage} of ${totalPages}`;
+            const btnPrev = document.getElementById('btn-prev-page');
+            if (btnPrev) btnPrev.disabled = (currentPage === 1);
+            const btnNext = document.getElementById('btn-next-page');
+            if (btnNext) btnNext.disabled = (currentPage === totalPages);
+        }
+
+        function changePage(delta) {
+            currentPage += delta;
+            renderTablePage();
+        }
+
+        function openPdfFile(filePath) {
+            if (filePath) {
+                let pdfUrl = filePath;
+                if (contextPath && contextPath.endsWith('/') && pdfUrl.startsWith('/')) {
+                    pdfUrl = contextPath + pdfUrl.substring(1);
+                } else {
+                    pdfUrl = contextPath + pdfUrl;
+                }
+                window.open(pdfUrl, '_blank');
+            } else {
+                alert('pdf file not uploaded');
+            }
+        }
+
+        // Type Badge styling matching dashboard.html
+        function getTypeBadge(typeVal, filePath) {
+            const cleanType = String(typeVal || '').trim().toLowerCase();
+            let label = cleanType;
+            let badgeClass = 'type-sd';
+
+            if (cleanType === 'asd' || cleanType.includes('asd') || cleanType.includes('additional security')) {
+                label = 'ASD';
+                badgeClass = 'type-asd';
+            } else if (cleanType.includes('agreement')) {
+                label = 'Agreement';
+                badgeClass = 'type-agreement';
+            } else if (cleanType === 'sd' || (cleanType.includes('security') && !cleanType.includes('additional') && !cleanType.includes('asd'))) {
+                label = 'Security Deposit';
+                badgeClass = 'type-sd';
+            } else if (cleanType.includes('invoice') || cleanType.includes('bill')) {
+                label = 'Tax Invoice';
+                badgeClass = 'type-tax-invoice';
+            } else if (cleanType === 'emd' || cleanType.includes('earnest')) {
+                label = 'EMD';
+                badgeClass = 'type-emd';
+            } else if (cleanType.includes('guarantee') || cleanType === 'bg') {
+                label = 'Bank Guarantee';
+                badgeClass = 'type-bank-guarantee';
+            } else if (cleanType.includes('chellan') || cleanType.includes('challan') || cleanType === 'dc') {
+                label = 'Delivery Chellan';
+                badgeClass = 'type-delivery-chellan';
+            } else {
+                label = typeVal || '-';
+                badgeClass = 'type-sd';
+            }
+
+            const onClickAttr = filePath ? `onclick="openPdfFile('${escapeHtml(filePath)}')"` : `onclick="alert('pdf file not uploaded')"`;
+
+            return `<span class="type-badge ${badgeClass} cursor-pointer" ${onClickAttr} title="${filePath ? 'Click to view PDF' : 'PDF not uploaded'}">${escapeHtml(label)}</span>`;
+        }
+
+        // Modal Functions: Add / Edit Record
+        function openAddModal() {
+            if (!recordModalObj && typeof bootstrap !== 'undefined') {
+                const recEl = document.getElementById('recordModal');
+                if (recEl) recordModalObj = new bootstrap.Modal(recEl);
+            }
+            const labelEl = document.getElementById('recordModalLabel');
+            if (labelEl) labelEl.innerHTML = '<i class="fa-solid fa-file-invoice-dollar"></i> Add Payment Tracking Record';
+            const formEl = document.getElementById('recordForm');
+            if (formEl) formEl.reset();
+            const idEl = document.getElementById('form-id');
+            if (idEl) idEl.value = '';
+
+            const pendingObj = activeStatus.find(s => s.status_name.toLowerCase().trim() === 'pending');
+            const statusFormEl = document.getElementById('form-status');
+            if (statusFormEl) statusFormEl.value = pendingObj ? String(pendingObj.id) : '';
+
+            const customVendorEl = document.getElementById('form-vendor-custom');
+            if (customVendorEl) {
+                customVendorEl.style.display = 'none';
+                customVendorEl.required = false;
+            }
+
+            const pdfEl = document.getElementById('form-pdf');
+            if (pdfEl) pdfEl.value = '';
+            const existingPdfContainer = document.getElementById('form-existing-pdf-container');
+            if (existingPdfContainer) existingPdfContainer.style.display = 'none';
+
+            if (recordModalObj) recordModalObj.show();
+        }
+
+        function openEditModal(row) {
+            if (!recordModalObj && typeof bootstrap !== 'undefined') {
+                const recEl = document.getElementById('recordModal');
+                if (recEl) recordModalObj = new bootstrap.Modal(recEl);
+            }
+            const labelEl = document.getElementById('recordModalLabel');
+            if (labelEl) labelEl.innerHTML = '<i class="fa-solid fa-file-signature"></i> Edit Payment Tracking Record';
+            const formEl = document.getElementById('recordForm');
+            if (formEl) formEl.reset();
+
+            const idEl = document.getElementById('form-id');
+            if (idEl) idEl.value = row.id;
+            const recDateEl = document.getElementById('form-received-date');
+            if (recDateEl) recDateEl.value = row.received_date || '';
+
+            const typeSelect = document.getElementById('form-type');
+            if (typeSelect) {
+                const rowType = String(row.type || '').trim().toLowerCase();
+                typeSelect.value = '';
+
+                let found = false;
+                for (let option of typeSelect.options) {
+                    if (option.value && String(option.value) === String(row.type)) {
+                        typeSelect.value = option.value;
+                        found = true;
+                        break;
+                    }
+                }
+
+                if (!found && rowType) {
+                    const legacyCategory = getCategoryCode(rowType);
+                    for (let option of typeSelect.options) {
+                        if (option.value) {
+                            const typeObj = activeTypes.find(t => String(t.id) === String(option.value));
+                            if (typeObj) {
+                                const optCategory = getCategoryCode(typeObj.type_name);
+                                if (optCategory === legacyCategory) {
+                                    typeSelect.value = option.value;
+                                    found = true;
+                                    break;
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+
+            const subjEl = document.getElementById('form-subject');
+            if (subjEl) subjEl.value = row.subject || '';
+            const amtEl = document.getElementById('form-amount');
+            if (amtEl) amtEl.value = row.amount || '';
+            const invNoEl = document.getElementById('form-invoice-no');
+            if (invNoEl) invNoEl.value = row.invoice_no || '';
+            const rcptNoEl = document.getElementById('form-receiptno');
+            if (rcptNoEl) rcptNoEl.value = row.receiptno || '';
+            const invDateEl = document.getElementById('form-invoice-date');
+            if (invDateEl) invDateEl.value = row.invoice_date || '';
+            const physFileEl = document.getElementById('form-physical-file-no');
+            if (physFileEl) physFileEl.value = row.physical_file_no || '';
+
+            const statusSelect = document.getElementById('form-status');
+            if (statusSelect) {
+                const rowStatus = String(row.status || '').trim();
+                statusSelect.value = '';
+
+                let statusFound = false;
+                for (let option of statusSelect.options) {
+                    if (option.value && String(option.value).toLowerCase() === rowStatus.toLowerCase()) {
+                        statusSelect.value = option.value;
+                        statusFound = true;
+                        break;
+                    }
+                }
+
+                if (!statusFound && rowStatus) {
+                    for (let option of statusSelect.options) {
+                        if (option.text && option.text.toLowerCase().trim() === rowStatus.toLowerCase().trim()) {
+                            statusSelect.value = option.value;
+                            statusFound = true;
+                            break;
+                        }
+                    }
+                }
+
+                if (!statusFound) {
+                    const pendingObj = activeStatus.find(s => s.status_name.toLowerCase().trim() === 'pending');
+                    statusSelect.value = pendingObj ? String(pendingObj.id) : '';
+                }
+            }
+
+            const remEl = document.getElementById('form-remarks');
+            if (remEl) remEl.value = row.remarks || '';
+
+            // Set Vendor Select
+            const select = document.getElementById('form-vendor-select');
+            if (select) {
+                const vendorVal = String(row.vendor_name || '').trim();
+                select.value = '';
+                const customInput = document.getElementById('form-vendor-custom');
+                if (customInput) {
+                    customInput.style.display = 'none';
+                    customInput.required = false;
+                    customInput.value = '';
+                }
+
+                if (vendorVal) {
+                    let optionFound = false;
+                    for (let option of select.options) {
+                        if (option.value && option.value !== '__custom__' && String(option.value) === vendorVal) {
+                            select.value = option.value;
+                            optionFound = true;
+                            break;
+                        }
+                    }
+
+                    if (!optionFound) {
+                        const matchedVendor = activeVendors.find(v => String(v.vendor_name).toLowerCase().trim() === vendorVal.toLowerCase());
+                        if (matchedVendor) {
+                            select.value = String(matchedVendor.id);
+                            optionFound = true;
+                        }
+                    }
+
+                    if (!optionFound) {
+                        select.value = '__custom__';
+                        if (customInput) {
+                            customInput.style.display = 'block';
+                            customInput.required = true;
+                            customInput.value = row.vendor_name;
+                        }
+                    }
+                }
+            }
+
+            // PDF attachment preview
+            const pdfEl = document.getElementById('form-pdf');
+            if (pdfEl) pdfEl.value = '';
+            const existingPdfContainer = document.getElementById('form-existing-pdf-container');
+            const existingPdfLink = document.getElementById('form-existing-pdf-link');
+            if (row.file_path && existingPdfContainer && existingPdfLink) {
+                existingPdfContainer.style.display = 'block';
+                let pdfUrl = row.file_path;
+                if (contextPath && contextPath.endsWith('/') && pdfUrl.startsWith('/')) {
+                    pdfUrl = contextPath + pdfUrl.substring(1);
+                } else {
+                    pdfUrl = contextPath + pdfUrl;
+                }
+                existingPdfLink.href = pdfUrl;
+            } else if (existingPdfContainer) {
+                existingPdfContainer.style.display = 'none';
+            }
+
+            if (recordModalObj) recordModalObj.show();
+        }
+
+        function toggleCustomVendor() {
+            const select = document.getElementById('form-vendor-select');
+            const customInput = document.getElementById('form-vendor-custom');
+            if (select && customInput) {
+                if (select.value === '__custom__') {
+                    customInput.style.display = 'block';
+                    customInput.required = true;
+                    customInput.focus();
+                } else {
+                    customInput.style.display = 'none';
+                    customInput.required = false;
+                    customInput.value = '';
+                }
+            }
+        }
+
+        async function saveRecord(event) {
+            event.preventDefault();
+
+            const id = document.getElementById('form-id')?.value;
+            const received_date = document.getElementById('form-received-date')?.value;
+            const type = document.getElementById('form-type')?.value;
+            const subject = document.getElementById('form-subject')?.value;
+            const amount = document.getElementById('form-amount')?.value;
+            const invoice_no = document.getElementById('form-invoice-no')?.value;
+            const receiptno = document.getElementById('form-receiptno')?.value;
+            const invoice_date = document.getElementById('form-invoice-date')?.value;
+            const physical_file_no = document.getElementById('form-physical-file-no')?.value;
+            const status = document.getElementById('form-status')?.value;
+            const remarks = document.getElementById('form-remarks')?.value;
+
+            let originalRecord = id ? allRecords.find(r => String(r.id) === String(id)) : null;
+
+            const vendorSelect = document.getElementById('form-vendor-select')?.value;
+            const vendorName = vendorSelect === '__custom__' ? document.getElementById('form-vendor-custom')?.value : vendorSelect;
+
+            if (!vendorName) {
+                alert('Please select or specify a vendor.');
+                return;
+            }
+
+            let filePath = originalRecord ? originalRecord.file_path : null;
+            const pdfInput = document.getElementById('form-pdf');
+            if (pdfInput && pdfInput.files && pdfInput.files.length > 0) {
+                const formData = new FormData();
+                formData.append('file', pdfInput.files[0]);
+
+                const csrfHeaders = getCsrfHeaders();
+                try {
+                    const uploadResponse = await fetch(contextPath + 'gccservicepaymenttracker/api/upload-pdf', {
+                        method: 'POST',
+                        headers: { ...csrfHeaders },
+                        body: formData
+                    });
+                    const uploadResult = await uploadResponse.json();
+                    if (uploadResult.success) {
+                        filePath = uploadResult.filePath;
+                    } else {
+                        alert(uploadResult.error || 'Failed to upload PDF file.');
+                        return;
+                    }
+                } catch (err) {
+                    console.error("Upload error:", err);
+                    alert("Failed to upload PDF due to connection error.");
+                    return;
+                }
+            }
+
+            const payload = {
+                id, received_date, type, vendor_name: vendorName, subject, amount, invoice_no,
+                receiptno, invoice_date, physical_file_no, status, remarks, file_path: filePath
+            };
+
+            const csrfHeaders = getCsrfHeaders();
+            const headers = {
+                'Content-Type': 'application/json',
+                ...csrfHeaders
+            };
+
+            try {
+                const response = await fetch(contextPath + 'gccservicepaymenttracker/api/save', {
+                    method: 'POST',
+                    headers: headers,
+                    body: JSON.stringify(payload)
+                });
+                const data = await response.json();
+                if (data.success) {
+                    if (recordModalObj) recordModalObj.hide();
+                    fetchInitialData();
+                } else {
+                    alert(data.error || 'Failed to save record.');
+                }
+            } catch (err) {
+                console.error("Save Error:", err);
+                alert("Failed to save record due to connection error.");
+            }
+        }
+
+        // Show update history for a payment tracking record
+        function showHistoryModal(id) {
+            if (!historyModalObj && typeof bootstrap !== 'undefined') {
+                const histEl = document.getElementById('historyModal');
+                if (histEl) historyModalObj = new bootstrap.Modal(histEl);
+            }
+            const tbody = document.getElementById('history-tbody');
+            const noHistoryFound = document.getElementById('no-history-found');
+
+            if (tbody) tbody.innerHTML = '';
+            if (noHistoryFound) noHistoryFound.style.display = 'none';
+
+            if (historyModalObj) historyModalObj.show();
+
+            const text = val => (val === null || val === undefined || String(val).trim() === '') ? '-' : val;
+
+            fetch(contextPath + 'gccservicepaymenttracker/api/history?id=' + id)
+                .then(response => response.json())
+                .then(historyList => {
+                    if (!tbody) return;
+                    if (!historyList || historyList.length === 0) {
+                        if (noHistoryFound) noHistoryFound.style.display = 'block';
+                        return;
+                    }
+
+                    historyList.forEach((item, index) => {
+                        const tr = document.createElement('tr');
+                        const dispStatus = String(item.resolved_status || getStatusName(item.status) || '').trim();
+
+                        let docBtnHtml = '-';
+                        if (item.file_path) {
+                            let pdfUrl = item.file_path;
+                            if (contextPath && contextPath.endsWith('/') && pdfUrl.startsWith('/')) {
+                                pdfUrl = contextPath + pdfUrl.substring(1);
+                            } else {
+                                pdfUrl = contextPath + pdfUrl;
+                            }
+                            docBtnHtml = `<a href="${pdfUrl}" target="_blank" class="btn-grid-action btn-grid-pdf"><i class="fa-solid fa-file-pdf"></i></a>`;
+                        }
+
+                        let typeHtml = getTypeBadge(item.type, item.file_path);
+                        let resolvedVendor = item.resolved_vendor || item.vendor_name || '-';
+                        let colorInfo = getStatusStyle(dispStatus);
+
+                        tr.innerHTML = `
+                            <td class="text-center fw-semibold text-secondary" style="width: 45px; white-space: nowrap;">${index + 1}</td>
+                            <td style="white-space: nowrap;">${formatDate(item.received_date)}</td>
+                            <td style="white-space: nowrap;">${formatDate(item.invoice_date)}</td>
+                            <td style="min-width: 140px; max-width: 200px; word-break: break-word; line-height: 1.35;">${text(item.subject)}</td>
+                            <td class="text-center">${typeHtml}</td>
+                            <td class="fw-semibold text-secondary" style="max-width: 110px; word-break: break-word; line-height: 1.35;">${text(resolvedVendor)}</td>
+                            <td class="fw-semibold text-dark" style="white-space: nowrap;">&#8377; ${text(item.amount)}</td>
+                            <td class="text-center"><span class="status-badge status-${dispStatus.toLowerCase().replace(/\s+/g, '-')}" style="background-color: ${colorInfo.bg}; color: ${colorInfo.text};">${escapeHtml(dispStatus)}</span></td>
+                            <td style="min-width: 140px; max-width: 220px; word-break: break-word; line-height: 1.35;"><small class="text-muted">${text(item.remarks)}</small></td>
+                            <td style="white-space: nowrap;">${formatDateTimeSplit(item.updated_at)}</td>
+                            <td class="fw-semibold text-secondary" style="max-width: 90px; word-break: break-word;">${text(item.updated_by_name || '-')}</td>
+                            <td class="text-center" style="white-space: nowrap;">${docBtnHtml}</td>
+                        `;
+                        tbody.appendChild(tr);
+                    });
+                })
+                .catch(err => {
+                    console.error("Fetch History Error:", err);
+                    if (tbody) {
+                        tbody.innerHTML = '<tr><td colspan="12" class="text-center text-danger py-3"><i class="fa-solid fa-triangle-exclamation"></i> Failed to load history records.</td></tr>';
+                    }
+                });
+        }
+
+        // Delete record logic
+        function deleteRecord(id) {
+            recordIdToDelete = id;
+            const delRemEl = document.getElementById('delete-remarks');
+            if (delRemEl) delRemEl.value = '';
+            if (!deleteConfirmModalObj && typeof bootstrap !== 'undefined') {
+                const delConfEl = document.getElementById('deleteConfirmModal');
+                if (delConfEl) deleteConfirmModalObj = new bootstrap.Modal(delConfEl);
+            }
+            if (deleteConfirmModalObj) deleteConfirmModalObj.show();
+        }
+
+        function submitDeleteRecord() {
+            if (!recordIdToDelete) return;
+            const delRemEl = document.getElementById('delete-remarks');
+            const remarks = delRemEl ? delRemEl.value.trim() : '';
+            if (!remarks) {
+                alert('Please enter remarks/reason for deletion.');
+                return;
+            }
+
+            if (deleteConfirmModalObj) {
+                deleteConfirmModalObj.hide();
+            }
+
+            const csrfHeaders = getCsrfHeaders();
+            const headers = {
+                'Content-Type': 'application/x-www-form-urlencoded',
+                ...csrfHeaders
+            };
+
+            const body = new URLSearchParams();
+            body.append('id', recordIdToDelete);
+            body.append('remarks', remarks);
+
+            fetch(contextPath + 'gccservicepaymenttracker/api/delete', {
+                method: 'POST',
+                headers: headers,
+                body: body
+            })
+                .then(response => response.json())
+                .then(data => {
+                    if (data.success) {
+                        recordIdToDelete = null;
+                        fetchInitialData();
+                    } else {
+                        alert(data.error || 'Failed to delete record.');
+                    }
+                })
+                .catch(err => {
+                    console.error("Delete Error:", err);
+                    alert("Failed to delete record due to connection error.");
+                });
+        }
+
+        // Deleted Records Modal logic
+        function openDeletedRecordsModal() {
+            if (!deletedRecordsModalObj && typeof bootstrap !== 'undefined') {
+                const delRecEl = document.getElementById('deletedRecordsModal');
+                if (delRecEl) deletedRecordsModalObj = new bootstrap.Modal(delRecEl);
+            }
+            if (deletedRecordsModalObj) deletedRecordsModalObj.show();
+            fetch(contextPath + 'gccservicepaymenttracker/api/deleted-list?_=' + new Date().getTime())
+                .then(response => response.json())
+                .then(data => {
+                    renderDeletedRecordsTable(data);
+                })
+                .catch(err => {
+                    console.error("Fetch Deleted Records Error:", err);
+                    alert("Failed to load deleted records.");
+                });
+        }
+
+        function renderDeletedRecordsTable(data) {
+            const tbody = document.getElementById('deleted-tracking-tbody');
+            const noRecords = document.getElementById('deleted-no-records-found');
+            if (!tbody) return;
+            tbody.innerHTML = '';
+
+            if (!data || data.length === 0) {
+                if (noRecords) noRecords.style.display = 'block';
+                return;
+            }
+
+            if (noRecords) noRecords.style.display = 'none';
+            const text = val => (val === null || val === undefined || String(val).trim() === '') ? '-' : val;
+
+            data.forEach((row, index) => {
+                const tr = document.createElement('tr');
+                const dispStatus = String(row.resolved_status || getStatusName(row.status) || '').trim();
+                const typeBadgeHtml = getTypeBadge(row.resolved_type || row.type, row.file_path);
+
+                tr.innerHTML = `
+                    <td class="text-center fw-semibold text-secondary" style="width: 45px; white-space: nowrap;">${index + 1}</td>
+                    <td style="white-space: nowrap;">${formatDate(row.received_date)}</td>
+                    <td style="white-space: nowrap;">${formatDate(row.invoice_date)}</td>
+                    <td style="max-width: 85px; word-break: break-word;">${text(row.physical_file_no)}</td>
+                    <td style="max-width: 110px; word-break: break-word;">${text(row.receiptno)}</td>
+                    <td style="min-width: 140px; max-width: 200px; word-break: break-word; line-height: 1.35;">${text(row.subject)}</td>
+                    <td class="text-center">${typeBadgeHtml}</td>
+                    <td class="fw-semibold text-secondary" style="max-width: 110px; word-break: break-word; line-height: 1.35;">${text(row.resolved_vendor || row.vendor_name)}</td>
+                    <td class="fw-semibold text-dark" style="white-space: nowrap;">&#8377; ${text(row.amount)}</td>
+                    <td class="text-center" style="white-space: nowrap;">${calculateAgeOfBill(row.received_date)}</td>
+                    <td class="text-center"><span class="status-badge status-${dispStatus.toLowerCase().replace(/\s+/g, '-')}" style="background-color: ${getStatusStyle(dispStatus).bg}; color: ${getStatusStyle(dispStatus).text};">${escapeHtml(dispStatus)}</span></td>
+                    <td class="text-danger fw-semibold" style="min-width: 140px; max-width: 220px; word-break: break-word; line-height: 1.35;"><small>${text(row.remarks)}</small></td>
+                    <td style="white-space: nowrap;">${formatDateTimeSplit(row.deleted_at)}</td>
+                    <td class="fw-semibold text-secondary" style="max-width: 90px; word-break: break-word;">${text(row.deleted_by)}</td>
+                `;
+
+                const tdActions = document.createElement('td');
+                tdActions.className = 'text-center';
+                tdActions.style.whiteSpace = 'nowrap';
+                if (isAdmin) {
+                    const btnRestore = document.createElement('button');
+                    btnRestore.className = 'btn btn-sm btn-outline-success fw-bold d-inline-flex align-items-center gap-1';
+                    btnRestore.innerHTML = '<i class="fa-solid fa-trash-arrow-up"></i> Restore';
+                    btnRestore.onclick = () => restoreRecord(row.id);
+                    tdActions.appendChild(btnRestore);
+                } else {
+                    tdActions.textContent = '-';
+                }
+                tr.appendChild(tdActions);
+                tbody.appendChild(tr);
+            });
+        }
+
+        function restoreRecord(id) {
+            Swal.fire({
+                title: 'Restore Record?',
+                text: 'Are you sure you want to restore this payment tracking record?',
+                icon: 'question',
+                showCancelButton: true,
+                confirmButtonColor: '#198754',
+                cancelButtonColor: '#6c757d',
+                confirmButtonText: 'Yes, Restore it!'
+            }).then((result) => {
+                if (result.isConfirmed) {
+                    const csrfHeaders = getCsrfHeaders();
+                    fetch(contextPath + 'gccservicepaymenttracker/api/restore', {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/x-www-form-urlencoded',
+                            ...csrfHeaders
+                        },
+                        body: new URLSearchParams({ id: id })
+                    })
+                        .then(response => response.json())
+                        .then(data => {
+                            if (data.success) {
+                                Swal.fire('Restored!', 'Payment record restored successfully.', 'success');
+                                openDeletedRecordsModal();
+                                fetchInitialData();
+                            } else {
+                                Swal.fire('Error', data.error || 'Failed to restore record.', 'error');
+                            }
+                        })
+                        .catch(err => {
+                            console.error("Restore Error:", err);
+                            Swal.fire('Error', 'Failed to restore record due to connection error.', 'error');
+                        });
+                }
+            });
+        }
+
+        // Helpers matching dashboard.html
+        function getCategoryCode(typeName) {
+            const type = String(typeName || '').toLowerCase().trim();
+            if (type === 'asd' || type.includes('asd') || type.includes('additional security')) {
+                return 'asd';
+            } else if (type.includes('agreement')) {
+                return 'agreement';
+            } else if (type === 'sd' || (type.includes('security') && !type.includes('additional') && !type.includes('asd'))) {
+                return 'sd';
+            } else if (type.includes('invoice') || type.includes('bill')) {
+                return 'tax invoice';
+            } else if (type === 'emd' || type.includes('earnest')) {
+                return 'emd';
+            } else if (type.includes('guarantee') || type === 'bg') {
+                return 'bank guarantee';
+            } else if (type.includes('chellan') || type.includes('challan') || type === 'dc') {
+                return 'delivery chellan';
+            }
+            return type;
+        }
+
+        function getStatusKey(statusName) {
+            if (!statusName) return 'pending';
+            const name = String(statusName).toLowerCase().trim();
+            if (name.includes('completed')) return 'completed';
+            if (name.includes('awaiting')) return 'awaiting';
+            if (name.includes('to be initiated') || name.includes('initiated')) return 'initiated';
+            if (name.includes('eoffice') || name.includes('e-office')) return 'eoffice';
+            if (name.includes('uac')) return 'uac';
+            if (name.includes('fm unit') || name.includes('fmunit')) return 'fmunit';
+            return 'pending';
+        }
+
+        function getStatusName(statusId) {
+            const s = activeStatus.find(st => String(st.id) === String(statusId));
+            return s ? s.status_name : null;
+        }
+
+        function getStatusStyle(statusName) {
+            if (!statusName) return { bg: '#f1f5f9', text: '#475569' };
+            const name = statusName.toLowerCase().trim();
+            if (name.includes('completed')) return { bg: '#dcfce7', text: '#166534' };
+            if (name.includes('awaiting')) return { bg: '#fef3c7', text: '#92400e' };
+            if (name.includes('to be initiated') || name.includes('initiated')) return { bg: '#fee2e2', text: '#991b1b' };
+            if (name.includes('eoffice')) return { bg: '#e0f2fe', text: '#075985' };
+            if (name.includes('uac')) return { bg: '#bae6fd', text: '#0369a1' };
+            return { bg: '#f1f5f9', text: '#475569' };
+        }
+
+        function formatDate(dateStr) {
+            if (!dateStr) return '-';
+            const parts = dateStr.split('-');
+            if (parts.length === 3) {
+                return `${parts[2]}/${parts[1]}/${parts[0]}`;
+            }
+            return dateStr;
+        }
+
+        function formatDateTimeSplit(dateTimeStr) {
+            if (!dateTimeStr) return '-';
+            try {
+                const d = new Date(dateTimeStr);
+                if (isNaN(d.getTime())) return dateTimeStr;
+                const pad = n => String(n).padStart(2, '0');
+                const datePart = `${pad(d.getDate())}/${pad(d.getMonth() + 1)}/${d.getFullYear()}`;
+                const timePart = `${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`;
+                return `<small class="text-dark fw-semibold">${datePart}</small><br><small class="text-muted">${timePart}</small>`;
+            } catch (e) {
+                return dateTimeStr;
+            }
+        }
+
+        function escapeHtml(text) {
+            if (text === null || text === undefined) return '';
+            return String(text).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;");
+        }
+
+        function formatDateTimeClean(dateTimeStr) {
+            if (!dateTimeStr) return '-';
+            try {
+                const d = new Date(dateTimeStr);
+                if (isNaN(d.getTime())) return dateTimeStr;
+                const pad = n => String(n).padStart(2, '0');
+                const datePart = `${pad(d.getDate())}/${pad(d.getMonth() + 1)}/${d.getFullYear()}`;
+                const timePart = `${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`;
+                return `${datePart} ${timePart}`;
+            } catch (e) {
+                return dateTimeStr;
+            }
+        }
+
+        function exportDetailsToExcel() {
+            if (!filteredRecords || filteredRecords.length === 0) {
+                Swal.fire('Warning', 'No records available to export.', 'warning');
+                return;
+            }
+
+            const rawTitle = urlTitle || "Count_Details";
+            const cleanFileName = rawTitle.replace(/[^a-zA-Z0-9]/g, "_") + "_" + new Date().toISOString().slice(0, 10) + ".xlsx";
+
+            try {
+                const excelRows = filteredRecords.map((row, index) => {
+                    const recDateStr = formatDate(row.received_date);
+                    const invoiceDateStr = formatDate(row.invoice_date);
+                    const ageDays = calculateAgeOfBill(row.received_date);
+                    const statusName = row.resolved_status || getStatusName(row.status) || 'Pending';
+
+                    let amtVal = '-';
+                    if (row.amount !== null && row.amount !== undefined && String(row.amount).trim() !== '') {
+                        const parsedNum = parseFloat(String(row.amount).replace(/,/g, ''));
+                        amtVal = !isNaN(parsedNum) ? parsedNum : String(row.amount);
+                    }
+
+                    // Resolve type label
+                    const cleanType = String(row.resolved_type || row.type || '').trim().toLowerCase();
+                    let typeLabel = row.resolved_type || row.type || '-';
+                    if (cleanType === 'asd' || cleanType.includes('asd') || cleanType.includes('additional security')) typeLabel = 'ASD';
+                    else if (cleanType.includes('agreement')) typeLabel = 'Agreement';
+                    else if (cleanType === 'sd' || (cleanType.includes('security') && !cleanType.includes('additional') && !cleanType.includes('asd'))) typeLabel = 'Security Deposit';
+                    else if (cleanType.includes('invoice') || cleanType.includes('bill')) typeLabel = 'Tax Invoice';
+                    else if (cleanType === 'emd' || cleanType.includes('earnest')) typeLabel = 'EMD';
+                    else if (cleanType.includes('guarantee') || cleanType === 'bg') typeLabel = 'Bank Guarantee';
+                    else if (cleanType.includes('chellan') || cleanType.includes('challan') || cleanType === 'dc') typeLabel = 'Delivery Chellan';
+
+                    const pdfStatus = row.file_path ? 'PDF Uploaded' : 'pdf file not uploaded';
+                    const updatedDateTime = row.updated_date || row.created_date ? formatDateTimeClean(row.updated_date || row.created_date) : '-';
+
+                    return {
+                        "SR. NO.": index + 1,
+                        "RECEIVED DATE": recDateStr,
+                        "INVOICE DATE": invoiceDateStr,
+                        "PHYSICAL FILE NO.": row.physical_file_no || '-',
+                        "EFILE NO. / RECEIPT NO.": row.receiptno || row.bill_no || '-',
+                        "SUBJECT": row.subject || '-',
+                        "TYPE OF FILE": typeLabel,
+                        "PDF STATUS": pdfStatus,
+                        "VENDOR NAME": row.resolved_vendor || row.vendor_name || '-',
+                        "AMOUNT": amtVal,
+                        "AGE OF BILL (DAYS)": ageDays,
+                        "STATUS": statusName,
+                        "REMARKS": row.remarks || '-',
+                        "LAST UPDATED AT": updatedDateTime,
+                        "LAST UPDATED BY": row.updated_by_name || row.updated_by || '-'
+                    };
+                });
+
+                const worksheet = XLSX.utils.json_to_sheet(excelRows);
+
+                // Auto column widths
+                worksheet['!cols'] = [
+                    { wch: 8 },  // SR NO
+                    { wch: 14 }, // RECEIVED DATE
+                    { wch: 14 }, // INVOICE DATE
+                    { wch: 20 }, // PHYSICAL FILE NO
+                    { wch: 25 }, // EFILE NO / RECEIPT NO
+                    { wch: 35 }, // SUBJECT
+                    { wch: 18 }, // TYPE OF FILE
+                    { wch: 22 }, // PDF STATUS
+                    { wch: 25 }, // VENDOR NAME
+                    { wch: 15 }, // AMOUNT
+                    { wch: 18 }, // AGE OF BILL
+                    { wch: 25 }, // STATUS
+                    { wch: 35 }, // REMARKS
+                    { wch: 20 }, // LAST UPDATED AT
+                    { wch: 18 }  // LAST UPDATED BY
+                ];
+
+                const workbook = XLSX.utils.book_new();
+                XLSX.utils.book_append_sheet(workbook, worksheet, "Count Details");
+
+                XLSX.writeFile(workbook, cleanFileName);
+            } catch (err) {
+                console.error("Export Excel Error:", err);
+                Swal.fire('Error', 'Failed to export table to Excel.', 'error');
+            }
+        }
+    </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/src/main/resources/templates/gcctonermanagement/upload.html b/src/main/resources/templates/gcctonermanagement/upload.html
index 05ebf17..9b70be9 100644
--- a/src/main/resources/templates/gcctonermanagement/upload.html
+++ b/src/main/resources/templates/gcctonermanagement/upload.html
@@ -34,6 +34,9 @@
     <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>
 
+    <!-- SheetJS (Excel Export) -->
+    <script src="https://cdn.jsdelivr.net/npm/xlsx@0.18.5/dist/xlsx.full.min.js"></script>
+
     <!-- Styles -->
     <style>
         body {
@@ -552,7 +555,7 @@
                 <div class="section-header">
                     <h1 class="section-title">
                         <i class="fa-solid fa-chart-pie"></i>
-                        Toner Inventory Dashboard
+                        Toner Inventory Dashboard & Reports
                     </h1>
                 </div>
 
@@ -581,26 +584,96 @@
                     </div>
                 </div>
 
-                <!-- 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
+                <!-- Interactive Report Filter Controls -->
+                <div class="card-custom mb-4">
+                    <h5 class="fw-bold mb-3" style="color: #0f5c78;">
+                        <i class="fa-solid fa-filter me-2"></i>Report Filters & Options
                     </h5>
+                    <div class="row g-3 align-items-end">
+                        <!-- Select Report Type -->
+                        <div class="col-md-3">
+                            <label class="form-label" for="report-type-select">
+                                <i class="fa-solid fa-table-list text-primary me-1"></i> Select Report Type
+                            </label>
+                            <select id="report-type-select" class="form-control-custom" onchange="onReportTypeChange()">
+                                <option value="user_requests">User Request Details Report</option>
+                                <option value="inward_stock">Inward Register Stock Report</option>
+                                <option value="stock_summary">Current Stock Summary</option>
+                                <option value="outward_history">Outward Distribution History</option>
+                            </select>
+                        </div>
+
+                        <!-- Printer Model Filter -->
+                        <div class="col-md-3">
+                            <label class="form-label" for="report-printer-filter">
+                                <i class="fa-solid fa-print text-primary me-1"></i> Printer Model
+                            </label>
+                            <select id="report-printer-filter" class="form-control-custom"
+                                onchange="onReportPrinterFilterChange()">
+                                <option value="">-- All Printer Models --</option>
+                            </select>
+                        </div>
+
+                        <!-- Toner Model Filter -->
+                        <div class="col-md-2">
+                            <label class="form-label" for="report-toner-filter">
+                                <i class="fa-solid fa-droplet text-primary me-1"></i> Toner Model
+                            </label>
+                            <select id="report-toner-filter" class="form-control-custom" onchange="applyReportFilters()"
+                                disabled>
+                                <option value="">-- All Toners --</option>
+                            </select>
+                        </div>
+
+                        <!-- Status Filter -->
+                        <div class="col-md-2" id="report-status-filter-wrapper">
+                            <label class="form-label" for="report-status-filter">
+                                <i class="fa-solid fa-clock-rotate-left text-primary me-1"></i> Status
+                            </label>
+                            <select id="report-status-filter" class="form-control-custom"
+                                onchange="applyReportFilters()">
+                                <option value="">-- All Statuses --</option>
+                                <option value="Pending">Pending</option>
+                                <option value="Delivered">Delivered</option>
+                                <option value="Partial">Partial</option>
+                            </select>
+                        </div>
+
+                        <!-- Search Filter -->
+                        <div class="col-md-2">
+                            <label class="form-label" for="report-search-input">
+                                <i class="fa-solid fa-magnifying-glass text-primary me-1"></i> Search
+                            </label>
+                            <input type="text" id="report-search-input" class="form-control-custom"
+                                placeholder="Search..." oninput="applyReportFilters()">
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Single Dynamic Datatable Below -->
+                <div class="card-custom" id="dynamic-report-card">
+                    <div class="d-flex justify-content-between align-items-center mb-4 flex-wrap gap-2">
+                        <h5 class="fw-bold m-0" style="color: #0f5c78;" id="report-dynamic-title">
+                            <i class="fa-solid fa-file-invoice me-2"></i>User Request Details Report
+                        </h5>
+                        <div class="d-flex align-items-center gap-2">
+                            <span class="badge bg-primary p-2" id="report-count-badge" style="font-size: 0.85rem;">0
+                                Records</span>
+                            <button type="button"
+                                class="btn btn-sm btn-success fw-bold px-3 py-2 d-inline-flex align-items-center gap-1 shadow-sm"
+                                onclick="exportReportToExcel()">
+                                <i class="fa-solid fa-file-excel"></i> Export Excel
+                            </button>
+                        </div>
+                    </div>
                     <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 id="report-dynamic-thead">
+                                <!-- Dynamic headers -->
                             </thead>
-                            <tbody id="report-table-body">
+                            <tbody id="report-dynamic-tbody">
                                 <tr>
-                                    <td colspan="6" class="text-center text-muted py-4">Loading report details...</td>
+                                    <td colspan="11" class="text-center text-muted py-4">Loading report data...</td>
                                 </tr>
                             </tbody>
                         </table>
@@ -608,6 +681,7 @@
                 </div>
             </div>
 
+
             <!-- ================= INWARD REGISTER PANEL ================= -->
             <div id="panel-inward" class="view-panel">
                 <div class="section-header">
@@ -687,8 +761,37 @@
                         </button>
                     </form>
                 </div>
+
+                <!-- Inward Register Details Table -->
+                <div class="card-custom">
+                    <h5 class="fw-bold mb-4" style="color: #0f5c78;">
+                        <i class="fa-solid fa-boxes-packing me-2"></i>Inward Stock Register Details
+                    </h5>
+                    <div class="table-responsive">
+                        <table class="table grid-table align-middle">
+                            <thead>
+                                <tr>
+                                    <th>Sr. No.</th>
+                                    <th>Company Name</th>
+                                    <th>Printer Model</th>
+                                    <th>Toner Model</th>
+                                    <th class="text-center">Qty Inward</th>
+                                    <th>Created Date</th>
+                                    <th>Entered By</th>
+                                    <th class="text-center">DC Document</th>
+                                </tr>
+                            </thead>
+                            <tbody id="inward-history-table-body">
+                                <tr>
+                                    <td colspan="8" class="text-center text-muted py-4">No inward records found.</td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
             </div>
 
+
             <!-- ================= USER REQUEST PANEL ================= -->
             <div id="panel-request" class="view-panel">
                 <div class="section-header">
@@ -778,6 +881,37 @@
                         </button>
                     </form>
                 </div>
+
+                <!-- User Request Details History Table -->
+                <div class="card-custom">
+                    <h5 class="fw-bold mb-4" style="color: #0f5c78;">
+                        <i class="fa-solid fa-list-check me-2"></i>User Request Details & History
+                    </h5>
+                    <div class="table-responsive">
+                        <table class="table grid-table align-middle">
+                            <thead>
+                                <tr>
+                                    <th>S.No</th>
+                                    <th>Req. No</th>
+                                    <th>IT Cell Ref 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 Delivered</th>
+                                    <th>Created Date</th>
+                                    <th class="text-center">Status</th>
+                                    <th class="text-center">Request Doc</th>
+                                </tr>
+                            </thead>
+                            <tbody id="user-requests-table-body">
+                                <tr>
+                                    <td colspan="11" class="text-center text-muted py-4">No request records found.</td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
             </div>
 
             <!-- ================= OUTWARD REGISTER PANEL ================= -->
@@ -872,22 +1006,25 @@
                         <table class="table grid-table align-middle">
                             <thead>
                                 <tr>
+                                    <th>S.No</th>
                                     <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>Requested Date</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>
+                                    <td colspan="10" class="text-center text-muted py-4">No outward records found.</td>
                                 </tr>
                             </tbody>
                         </table>
+
                     </div>
                 </div>
             </div>
@@ -902,10 +1039,13 @@
     <script th:inline="javascript">
         const contextPath = /*[[@{/}]]*/ '';
 
-        // Cache printers list
+        // Caching datasets
         let printersCached = [];
-        // Cache pending requests in Outward Register
         let pendingRequestsCached = [];
+        let userRequestsCached = [];
+        let inwardHistoryCached = [];
+        let outwardHistoryCached = [];
+        let stockSummaryCached = [];
 
         document.addEventListener('DOMContentLoaded', () => {
             // Load base list of printers on startup
@@ -931,9 +1071,11 @@
             } else if (panelName === 'inward') {
                 resetForm('inward');
                 populatePrintersDropdown('inward');
+                fetchInwardHistory();
             } else if (panelName === 'request') {
                 resetForm('request');
                 populatePrintersDropdown('request');
+                fetchUserRequests();
             } else if (panelName === 'outward') {
                 resetForm('outward');
                 fetchPendingRequests();
@@ -947,6 +1089,7 @@
                 .then(res => res.json())
                 .then(data => {
                     printersCached = data;
+                    populateReportPrinterFilters();
                 })
                 .catch(err => console.error("Error fetching printers: ", err));
         }
@@ -963,6 +1106,18 @@
             });
         }
 
+        function populateReportPrinterFilters() {
+            const select = document.getElementById('report-printer-filter');
+            if (!select) return;
+            select.innerHTML = '<option value="">-- All Printer Models --</option>';
+            printersCached.forEach(p => {
+                const opt = document.createElement('option');
+                opt.value = p.id;
+                opt.textContent = p.printer_name;
+                select.appendChild(opt);
+            });
+        }
+
         function loadToners(prefix) {
             const pid = document.getElementById(`${prefix}-printer-select`).value;
             const tonerSelect = document.getElementById(`${prefix}-toner-select`);
@@ -1071,7 +1226,7 @@
         }
 
 
-        // ================= REPORT VIEW API =================
+        // ================= REPORT VIEW API & FILTER LOGIC =================
         function loadReportPage() {
             fetch(contextPath + 'gcctonermanagement/api/report')
                 .then(res => res.json())
@@ -1081,35 +1236,484 @@
                         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;
+                        stockSummaryCached = data.summary || [];
+                        applyReportFilters();
+                    }
+                })
+                .catch(err => console.error("Error loading report page:", err));
 
-                        // 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;
-                        }
+            // Fetch datasets for dynamic filtering
+            fetch(contextPath + 'gcctonermanagement/api/requests/list')
+                .then(res => res.json())
+                .then(data => {
+                    userRequestsCached = data || [];
+                    renderUserRequestsTable('user-requests-table-body', userRequestsCached, true);
+                    applyReportFilters();
+                })
+                .catch(err => console.error("Error fetching user requests for report:", err));
+
+            fetch(contextPath + 'gcctonermanagement/api/inward/list')
+                .then(res => res.json())
+                .then(data => {
+                    inwardHistoryCached = data || [];
+                    renderInwardTable('inward-history-table-body', inwardHistoryCached, true);
+                    applyReportFilters();
+                })
+                .catch(err => console.error("Error fetching inward history for report:", err));
+
+            fetch(contextPath + 'gcctonermanagement/api/outward/list')
+                .then(res => res.json())
+                .then(data => {
+                    outwardHistoryCached = data || [];
+                    applyReportFilters();
+                })
+                .catch(err => console.error("Error fetching outward history for report:", err));
+        }
 
-                        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);
+        function onReportTypeChange() {
+            const reportType = document.getElementById('report-type-select').value;
+            const statusWrapper = document.getElementById('report-status-filter-wrapper');
+            if (statusWrapper) {
+                statusWrapper.style.display = (reportType === 'user_requests') ? 'block' : 'none';
+            }
+            applyReportFilters();
+        }
+
+        function onReportPrinterFilterChange() {
+            const pid = document.getElementById('report-printer-filter').value;
+            const tonerSelect = document.getElementById('report-toner-filter');
+            tonerSelect.innerHTML = '<option value="">-- All Toners --</option>';
+            tonerSelect.disabled = true;
+
+            if (pid) {
+                fetch(contextPath + 'gcctonermanagement/api/toners?pid=' + pid)
+                    .then(res => res.json())
+                    .then(toners => {
+                        toners.forEach(t => {
+                            const opt = document.createElement('option');
+                            opt.value = t.id;
+                            opt.textContent = t.model_name;
+                            tonerSelect.appendChild(opt);
                         });
+                        if (toners.length > 0) {
+                            tonerSelect.disabled = false;
+                        }
+                        applyReportFilters();
+                    })
+                    .catch(err => {
+                        console.error("Error loading toners filter:", err);
+                        applyReportFilters();
+                    });
+            } else {
+                applyReportFilters();
+            }
+        }
+
+        function applyReportFilters() {
+            const reportType = document.getElementById('report-type-select').value;
+            const selectedPrinter = document.getElementById('report-printer-filter').value;
+            const selectedToner = document.getElementById('report-toner-filter').value;
+            const selectedStatus = document.getElementById('report-status-filter').value;
+            const searchQuery = document.getElementById('report-search-input').value.trim().toLowerCase();
+
+            const titleEl = document.getElementById('report-dynamic-title');
+            const badgeEl = document.getElementById('report-count-badge');
+            const thead = document.getElementById('report-dynamic-thead');
+            const tbody = document.getElementById('report-dynamic-tbody');
+
+            if (!titleEl || !thead || !tbody) return;
+
+            // 1. User Request Details Report
+            if (reportType === 'user_requests') {
+                titleEl.innerHTML = `<i class="fa-solid fa-file-invoice me-2"></i>User Request Details Report`;
+                thead.innerHTML = `
+                    <tr>
+                        <th>S.No</th>
+                        <th>Req. No</th>
+                        <th>IT Cell Ref 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 Delivered</th>
+                        <th>Created Date</th>
+                        <th class="text-center">Status</th>
+                        <th class="text-center">Request Doc</th>
+                    </tr>`;
+
+                let filtered = userRequestsCached.filter(item => {
+                    if (selectedPrinter && String(item.pid) !== String(selectedPrinter)) return false;
+                    if (selectedToner && String(item.tid) !== String(selectedToner)) return false;
+
+                    const reqQty = parseInt(item.qty_requested || 0);
+                    const delQty = parseInt(item.qty_delivered || 0);
+                    let status = 'Pending';
+                    if (delQty >= reqQty && reqQty > 0) status = 'Delivered';
+                    else if (delQty > 0) status = 'Partial';
+
+                    if (selectedStatus && status !== selectedStatus) return false;
+
+                    if (searchQuery) {
+                        const searchStr = `${item.req_no || ''} ${item.itcell_ref_no || ''} ${item.dept_id || ''} ${item.printer_name || ''} ${item.model_name || ''}`.toLowerCase();
+                        if (!searchStr.includes(searchQuery)) return false;
+                    }
+                    return true;
+                });
+
+                if (badgeEl) badgeEl.textContent = `${filtered.length} Records`;
+                tbody.innerHTML = '';
+
+                if (filtered.length === 0) {
+                    tbody.innerHTML = `<tr><td colspan="11" class="text-center text-muted py-4">No matching user request records found.</td></tr>`;
+                    return;
+                }
+
+                filtered.forEach((item, idx) => {
+                    const tr = document.createElement('tr');
+                    const createdDate = formatTimestamp(item.cdate);
+                    const reqQty = parseInt(item.qty_requested || 0);
+                    const delQty = parseInt(item.qty_delivered || 0);
+
+                    let statusBadge = '<span class="badge bg-warning text-dark"><i class="fa-solid fa-clock me-1"></i>Pending</span>';
+                    if (delQty >= reqQty && reqQty > 0) {
+                        statusBadge = '<span class="badge bg-success"><i class="fa-solid fa-circle-check me-1"></i>Delivered</span>';
+                    } else if (delQty > 0) {
+                        statusBadge = '<span class="badge bg-info text-dark"><i class="fa-solid fa-boxes-packing me-1"></i>Partial</span>';
+                    }
+
+                    let docBtn = '-';
+                    if (item.user_request_upload) {
+                        docBtn = `<a href="${contextPath + item.user_request_upload.substring(1)}" target="_blank" class="btn-action btn-view-doc"><i class="fa-solid fa-file-pdf"></i> View Letter</a>`;
+                    }
+
+                    tr.innerHTML = `
+                        <td class="fw-semibold text-secondary">${idx + 1}</td>
+                        <td class="fw-bold text-dark">${escapeHtml(item.req_no)}</td>
+                        <td class="font-monospace text-secondary">${escapeHtml(item.itcell_ref_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 || 0}</td>
+                        <td><small class="text-dark fw-semibold">${createdDate}</small></td>
+                        <td class="text-center">${statusBadge}</td>
+                        <td class="text-center">${docBtn}</td>
+                    `;
+                    tbody.appendChild(tr);
+                });
+            }
+            // 2. Inward Register Stock Report
+            else if (reportType === 'inward_stock') {
+                titleEl.innerHTML = `<i class="fa-solid fa-boxes-packing me-2"></i>Inward Register Stock Report`;
+                thead.innerHTML = `
+                    <tr>
+                        <th>S.No</th>
+                        <th>Company Name</th>
+                        <th>Printer Model</th>
+                        <th>Toner Model</th>
+                        <th class="text-center">Qty Inward</th>
+                        <th>Created Date</th>
+                        <th>Entered By</th>
+                        <th class="text-center">DC Document</th>
+                    </tr>`;
+
+                let filtered = inwardHistoryCached.filter(item => {
+                    if (selectedPrinter && String(item.pid) !== String(selectedPrinter)) return false;
+                    if (selectedToner && String(item.tid) !== String(selectedToner)) return false;
+                    if (searchQuery) {
+                        const searchStr = `${item.company_name || ''} ${item.printer_name || ''} ${item.model_name || ''} ${item.order_by || ''}`.toLowerCase();
+                        if (!searchStr.includes(searchQuery)) return false;
+                    }
+                    return true;
+                });
+
+                if (badgeEl) badgeEl.textContent = `${filtered.length} Records`;
+                tbody.innerHTML = '';
+
+                if (filtered.length === 0) {
+                    tbody.innerHTML = `<tr><td colspan="8" class="text-center text-muted py-4">No matching inward stock records found.</td></tr>`;
+                    return;
+                }
+
+                filtered.forEach((item, idx) => {
+                    const tr = document.createElement('tr');
+                    const createdDate = formatTimestamp(item.cdate);
+                    let docBtn = '-';
+                    if (item.dc_upload) {
+                        docBtn = `<a href="${contextPath + item.dc_upload.substring(1)}" target="_blank" class="btn-action btn-view-doc"><i class="fa-solid fa-file-pdf"></i> View DC</a>`;
+                    }
+
+                    tr.innerHTML = `
+                        <td class="fw-semibold text-secondary">${idx + 1}</td>
+                        <td class="fw-bold text-dark">${escapeHtml(item.company_name)}</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 text-primary fw-bold font-monospace">${item.qty_registered}</td>
+                        <td><small class="text-dark fw-semibold">${createdDate}</small></td>
+                        <td><small class="text-muted">${escapeHtml(item.order_by || '-')}</small></td>
+                        <td class="text-center">${docBtn}</td>
+                    `;
+                    tbody.appendChild(tr);
+                });
+            }
+            // 3. Current Stock Summary
+            else if (reportType === 'stock_summary') {
+                titleEl.innerHTML = `<i class="fa-solid fa-warehouse me-2"></i>Current Stock Summary`;
+                thead.innerHTML = `
+                    <tr>
+                        <th>S.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>`;
+
+                let filtered = stockSummaryCached.filter(item => {
+                    if (searchQuery) {
+                        const searchStr = `${item.printer_name || ''} ${item.model_name || ''}`.toLowerCase();
+                        if (!searchStr.includes(searchQuery)) return false;
+                    }
+                    return true;
+                });
+
+                if (badgeEl) badgeEl.textContent = `${filtered.length} Records`;
+                tbody.innerHTML = '';
+
+                if (filtered.length === 0) {
+                    tbody.innerHTML = `<tr><td colspan="6" class="text-center text-muted py-4">No matching stock summary records found.</td></tr>`;
+                    return;
+                }
+
+                filtered.forEach((item, idx) => {
+                    const tr = document.createElement('tr');
+                    tr.innerHTML = `
+                        <td class="fw-semibold text-secondary">${idx + 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);
+                });
+            }
+            // 4. Outward Distribution History
+            else if (reportType === 'outward_history') {
+                titleEl.innerHTML = `<i class="fa-solid fa-truck-moving me-2"></i>Outward Distribution History`;
+                thead.innerHTML = `
+                    <tr>
+                        <th>S.No</th>
+                        <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>Requested Date</th>
+                        <th>Issued Date</th>
+                        <th class="text-center">Action</th>
+                    </tr>`;
+
+                let filtered = outwardHistoryCached.filter(item => {
+                    if (selectedPrinter && String(item.pid) !== String(selectedPrinter)) return false;
+                    if (selectedToner && String(item.tid) !== String(selectedToner)) return false;
+                    if (searchQuery) {
+                        const searchStr = `${item.req_no || ''} ${item.dept_id || ''} ${item.printer_name || ''} ${item.model_name || ''}`.toLowerCase();
+                        if (!searchStr.includes(searchQuery)) return false;
+                    }
+                    return true;
+                });
+
+                if (badgeEl) badgeEl.textContent = `${filtered.length} Records`;
+                tbody.innerHTML = '';
+
+                if (filtered.length === 0) {
+                    tbody.innerHTML = `<tr><td colspan="10" class="text-center text-muted py-4">No matching outward records found.</td></tr>`;
+                    return;
+                }
+
+                filtered.forEach((item, idx) => {
+                    const tr = document.createElement('tr');
+                    const reqDateFormatted = formatTimestamp(item.cdate);
+                    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-semibold text-secondary">${idx + 1}</td>
+                        <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-dark fw-semibold">${reqDateFormatted}</small></td>
+                        <td><small class="text-muted">${dateFormatted}</small></td>
+                        <td class="text-center">${docBtn}${pdfBtn}</td>
+                    `;
+                    tbody.appendChild(tr);
+                });
+            }
+        }
+
+        // ================= EXPORT TO EXCEL LOGIC =================
+        function exportReportToExcel() {
+            const reportTitleEl = document.getElementById('report-dynamic-title');
+            let rawTitle = reportTitleEl ? reportTitleEl.innerText.trim() : "Toner_Report";
+            let cleanFileName = rawTitle.replace(/[^a-zA-Z0-9]/g, "_") + "_" + new Date().toISOString().slice(0, 10) + ".xlsx";
+
+            const table = document.querySelector("#dynamic-report-card table");
+            if (!table) {
+                showNotification('warning', 'Export Warning', 'No report table found to export.');
+                return;
+            }
+
+            // Clone table to strip out doc/action column from Excel output
+            const clone = table.cloneNode(true);
+            clone.querySelectorAll("tr").forEach(tr => {
+                const lastTh = tr.querySelector("th:last-child");
+                if (lastTh && (lastTh.innerText.toLowerCase().includes("doc") || lastTh.innerText.toLowerCase().includes("action"))) {
+                    lastTh.remove();
+                }
+                const lastTd = tr.querySelector("td:last-child");
+                if (lastTd && (lastTd.querySelector(".btn-action") || lastTd.innerText.toLowerCase().includes("view") || lastTd.innerText.toLowerCase().includes("ack"))) {
+                    lastTd.remove();
+                }
+            });
+
+            try {
+                const wb = XLSX.utils.table_to_book(clone, { sheet: "Toner Report" });
+                XLSX.writeFile(wb, cleanFileName);
+            } catch (err) {
+                console.error("Error exporting Excel:", err);
+                showNotification('error', 'Export Error', 'Failed to generate Excel file.');
+            }
+        }
+
+        // ================= INWARD HISTORY FETCH & RENDER =================
+        function fetchInwardHistory() {
+            fetch(contextPath + 'gcctonermanagement/api/inward/list')
+                .then(res => res.json())
+                .then(data => {
+                    inwardHistoryCached = data || [];
+                    renderInwardTable('inward-history-table-body', inwardHistoryCached, true);
+                    applyReportFilters();
+                })
+                .catch(err => {
+                    console.error("Error loading inward history:", err);
+                    const errHtml = `<tr><td colspan="8" class="text-center text-danger py-4">Error loading inward details.</td></tr>`;
+                    if (document.getElementById('inward-history-table-body')) {
+                        document.getElementById('inward-history-table-body').innerHTML = errHtml;
+                    }
+                });
+        }
+
+        function renderInwardTable(tbodyId, data, showDoc) {
+            const tbody = document.getElementById(tbodyId);
+            if (!tbody) return;
+            tbody.innerHTML = '';
+            const colSpan = showDoc ? 8 : 7;
+            if (!data || data.length === 0) {
+                tbody.innerHTML = `<tr><td colspan="${colSpan}" class="text-center text-muted py-4">No inward records found.</td></tr>`;
+                return;
+            }
+
+            data.forEach((item, index) => {
+                const tr = document.createElement('tr');
+                const createdDate = formatTimestamp(item.cdate);
+                let docBtn = '-';
+                if (showDoc && item.dc_upload) {
+                    docBtn = `<a href="${contextPath + item.dc_upload.substring(1)}" target="_blank" class="btn-action btn-view-doc"><i class="fa-solid fa-file-pdf"></i> View DC</a>`;
+                }
+
+                let rowHtml = `
+                    <td class="fw-semibold text-secondary">${index + 1}</td>
+                    <td class="fw-bold text-dark">${escapeHtml(item.company_name)}</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 text-primary fw-bold font-monospace">${item.qty_registered}</td>
+                    <td><small class="text-dark fw-semibold">${createdDate}</small></td>
+                    <td><small class="text-muted">${escapeHtml(item.order_by || '-')}</small></td>
+                `;
+                if (showDoc) {
+                    rowHtml += `<td class="text-center">${docBtn}</td>`;
+                }
+                tr.innerHTML = rowHtml;
+                tbody.appendChild(tr);
+            });
+        }
+
+        // ================= USER REQUESTS FETCH & RENDER =================
+        function fetchUserRequests() {
+            fetch(contextPath + 'gcctonermanagement/api/requests/list')
+                .then(res => res.json())
+                .then(data => {
+                    userRequestsCached = data || [];
+                    renderUserRequestsTable('user-requests-table-body', userRequestsCached, true);
+                    applyReportFilters();
                 })
                 .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>`;
+                    console.error("Error loading user requests:", err);
+                    const errHtml = `<tr><td colspan="11" class="text-center text-danger py-4">Error loading user request details.</td></tr>`;
+                    if (document.getElementById('user-requests-table-body')) {
+                        document.getElementById('user-requests-table-body').innerHTML = errHtml;
+                    }
                 });
         }
 
+        function renderUserRequestsTable(tbodyId, data, showDoc) {
+            const tbody = document.getElementById(tbodyId);
+            if (!tbody) return;
+            tbody.innerHTML = '';
+            const colSpan = showDoc ? 11 : 10;
+            if (!data || data.length === 0) {
+                tbody.innerHTML = `<tr><td colspan="${colSpan}" class="text-center text-muted py-4">No user request records found.</td></tr>`;
+                return;
+            }
+
+            data.forEach((item, index) => {
+                const tr = document.createElement('tr');
+                const createdDate = formatTimestamp(item.cdate);
+                const reqQty = parseInt(item.qty_requested || 0);
+                const delQty = parseInt(item.qty_delivered || 0);
+
+                let statusBadge = '<span class="badge bg-warning text-dark"><i class="fa-solid fa-clock me-1"></i>Pending</span>';
+                if (delQty >= reqQty && reqQty > 0) {
+                    statusBadge = '<span class="badge bg-success"><i class="fa-solid fa-circle-check me-1"></i>Delivered</span>';
+                } else if (delQty > 0) {
+                    statusBadge = '<span class="badge bg-info text-dark"><i class="fa-solid fa-boxes-packing me-1"></i>Partial</span>';
+                }
+
+                let docBtn = '-';
+                if (showDoc && item.user_request_upload) {
+                    docBtn = `<a href="${contextPath + item.user_request_upload.substring(1)}" target="_blank" class="btn-action btn-view-doc"><i class="fa-solid fa-file-pdf"></i> View Letter</a>`;
+                }
+
+                let rowHtml = `
+                    <td class="fw-semibold text-secondary">${index + 1}</td>
+                    <td class="fw-bold text-dark">${escapeHtml(item.req_no)}</td>
+                    <td class="font-monospace text-secondary">${escapeHtml(item.itcell_ref_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 || 0}</td>
+                    <td><small class="text-dark fw-semibold">${createdDate}</small></td>
+                    <td class="text-center">${statusBadge}</td>
+                `;
+                if (showDoc) {
+                    rowHtml += `<td class="text-center">${docBtn}</td>`;
+                }
+                tr.innerHTML = rowHtml;
+                tbody.appendChild(tr);
+            });
+        }
+
+
 
         // ================= INWARD UPLOAD API =================
         function submitInward(event) {
@@ -1168,7 +1772,8 @@
                                 text: res.message || 'Inward stock added successfully!',
                                 confirmButtonColor: '#0f5c78'
                             }).then(() => {
-                                switchView('report');
+                                fetchInwardHistory();
+                                switchView('inward');
                             });
                         } else {
                             showNotification('error', 'Error', res.error || 'Failed to save inward stock details.');
@@ -1250,7 +1855,8 @@
                                 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');
+                                fetchUserRequests();
+                                switchView('request');
                             });
                         } else {
                             showNotification('error', 'Error', res.error || 'Failed to save department request.');
@@ -1325,12 +1931,13 @@
                     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>`;
+                        tbody.innerHTML = `<tr><td colspan="9" class="text-center text-muted py-4">No outward records found.</td></tr>`;
                         return;
                     }
 
                     data.forEach(item => {
                         const tr = document.createElement('tr');
+                        const reqDateFormatted = formatTimestamp(item.cdate);
                         const dateFormatted = formatTimestamp(item.updated_date);
                         let docBtn = '';
                         if (item.final_delivered_upload) {
@@ -1345,6 +1952,7 @@
                             <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-dark fw-semibold">${reqDateFormatted}</small></td>
                             <td><small class="text-muted">${dateFormatted}</small></td>
                             <td class="text-center">${docBtn}${pdfBtn}</td>
                         `;
@@ -1353,10 +1961,11 @@
                 })
                 .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>`;
+                    document.getElementById('outward-history-table-body').innerHTML = `<tr><td colspan="9" class="text-center text-danger py-4">Error loading outward deliveries.</td></tr>`;
                 });
         }
 
+
         function submitOutward(event) {
             event.preventDefault();