diff --git a/src/main/java/com/gcc_manpower/config/DataSourceConfig.java b/src/main/java/com/gcc_manpower/config/DataSourceConfig.java
index 67ecdc4..7eeb080 100644
--- a/src/main/java/com/gcc_manpower/config/DataSourceConfig.java
+++ b/src/main/java/com/gcc_manpower/config/DataSourceConfig.java
@@ -14,7 +14,8 @@ public class DataSourceConfig {
     private static String dbpassword = "root";
 
     // AWS
-    // private static String host = "gcc-facial-db-instance-1.cf48eqcciziq.ap-south-1.rds.amazonaws.com:3306";
+    // private static String host =
+    // "gcc-facial-db-instance-1.cf48eqcciziq.ap-south-1.rds.amazonaws.com:3306";
     // private static String dbpassword = "gcc-facial-password";
 
     @Bean(name = "mysqlManpowerDataSource")
@@ -46,4 +47,14 @@ public class DataSourceConfig {
         dataSource.setPassword(dbpassword);
         return dataSource;
     }
+
+    @Bean(name = "mysqlTonerManagementDataSource")
+    public DataSource mysqlTonerManagementDataSource() {
+        DriverManagerDataSource dataSource = new DriverManagerDataSource();
+        dataSource.setDriverClassName("com.mysql.cj.jdbc.Driver");
+        dataSource.setUrl("jdbc:mysql://" + host + "/gcc_toner_management");
+        dataSource.setUsername("root");
+        dataSource.setPassword(dbpassword);
+        return dataSource;
+    }
 }
diff --git a/src/main/java/com/gcc_manpower/config/WebConfig.java b/src/main/java/com/gcc_manpower/config/WebConfig.java
index 5436af3..9191f8f 100644
--- a/src/main/java/com/gcc_manpower/config/WebConfig.java
+++ b/src/main/java/com/gcc_manpower/config/WebConfig.java
@@ -18,6 +18,9 @@ public class WebConfig implements WebMvcConfigurer {
         @Value("${payment.tracker.upload.path:gccpaymenttrackerfiles}")
         private String paymentTrackerUploadPathConfig;
 
+        @Value("${toner.upload.path:gcctonermanagementfiles}")
+        private String tonerUploadPathConfig;
+
         @Override
         public void addResourceHandlers(ResourceHandlerRegistry registry) {
                 // Resolve absolute path (supports both relative and absolute paths)
@@ -39,5 +42,11 @@ public class WebConfig implements WebMvcConfigurer {
                                 .toString();
                 registry.addResourceHandler("/gccpaymenttrackerfiles/**")
                                 .addResourceLocations(trackerUploadPath);
+
+                // Map URL path /gcctonermanagementfiles/** to the configured toner folder
+                String tonerUploadPath = Paths.get(tonerUploadPathConfig).toAbsolutePath().toUri()
+                                .toString();
+                registry.addResourceHandler("/gcctonermanagementfiles/**")
+                                .addResourceLocations(tonerUploadPath);
         }
 }
diff --git a/src/main/java/com/gcc_manpower/gccservicedocuments/service/GccServiceDocumentsService.java b/src/main/java/com/gcc_manpower/gccservicedocuments/service/GccServiceDocumentsService.java
index b24237d..3e14986 100644
--- a/src/main/java/com/gcc_manpower/gccservicedocuments/service/GccServiceDocumentsService.java
+++ b/src/main/java/com/gcc_manpower/gccservicedocuments/service/GccServiceDocumentsService.java
@@ -226,7 +226,8 @@ public class GccServiceDocumentsService {
         return null;
     }
 
-    public boolean updateDocument(Long id, String title, String mainCategory, String subCategory, String fileType, String filePath,
+    public boolean updateDocument(Long id, String title, String mainCategory, String subCategory, String fileType,
+            String filePath,
             String originalFilename) {
         // Insert old record into history before update
         try {
diff --git a/src/main/java/com/gcc_manpower/gcctonermanagement/controller/TonerController.java b/src/main/java/com/gcc_manpower/gcctonermanagement/controller/TonerController.java
new file mode 100644
index 0000000..dc527ed
--- /dev/null
+++ b/src/main/java/com/gcc_manpower/gcctonermanagement/controller/TonerController.java
@@ -0,0 +1,226 @@
+package com.gcc_manpower.gcctonermanagement.controller;
+
+import java.util.HashMap;
+import java.util.List;
+import java.util.Map;
+
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.stereotype.Controller;
+import org.springframework.ui.Model;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.PostMapping;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RequestParam;
+import org.springframework.web.bind.annotation.ResponseBody;
+
+import org.springframework.beans.factory.annotation.Value;
+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;
+
+@Controller
+@RequestMapping("/gcctonermanagement")
+public class TonerController {
+
+    @Autowired
+    private AppUserService appUserService;
+
+    @Autowired
+    private TonerService tonerService;
+
+    @Value("${toner.upload.path:gcctonermanagementfiles}")
+    private String tonerUploadPathConfig;
+
+    @GetMapping({ "", "/", "/upload" })
+    public String viewDashboard(Model model, HttpSession session) {
+        String username = (String) session.getAttribute("toner_usrName");
+        if (username == null) {
+            return "redirect:/gcctonermanagement/login";
+        }
+
+        String usrRole = (String) session.getAttribute("toner_usrRole");
+        boolean isAdmin = "ADMIN".equalsIgnoreCase(usrRole);
+
+        // List<Map<String, Object>> vendorDetails =
+        // appUserService.getVendorDetailsWithCounts();
+
+        model.addAttribute("isLoggedIn", true);
+        model.addAttribute("isAdmin", isAdmin);
+        model.addAttribute("usrName", username);
+        model.addAttribute("curPage", "gcctonermanagement");
+        // model.addAttribute("vendorDetails", vendorDetails);
+
+        return "gcctonermanagement/upload";
+    }
+
+    @GetMapping("/login")
+    public String login(HttpSession session) {
+        return "gcctonermanagement/login";
+    }
+
+    @PostMapping("/api/login")
+    @ResponseBody
+    public Map<String, Object> validateLogin(
+            @RequestParam("usrName") String usrName,
+            @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"));
+            session.setMaxInactiveInterval(1800); // 30 minutes session timeout
+            response.put("result", true);
+            response.put("usrName", authResult.get("usrName"));
+        } else {
+            response.put("result", false);
+            response.put("error", authResult.get("error"));
+        }
+
+        return response;
+    }
+
+    @GetMapping("/logout")
+    public String logoutGet(HttpSession session) {
+        session.removeAttribute("toner_usrName");
+        session.removeAttribute("toner_usrRole");
+        return "redirect:/gcctonermanagement/login";
+    }
+
+    @GetMapping("/api/printers")
+    @ResponseBody
+    public List<Map<String, Object>> getPrinters(HttpSession session) {
+        if (session.getAttribute("toner_usrName") == null) {
+            return java.util.Collections.emptyList();
+        }
+        return tonerService.getActivePrinters();
+    }
+
+    @GetMapping("/api/toners")
+    @ResponseBody
+    public List<Map<String, Object>> getToners(@RequestParam("pid") int pid, HttpSession session) {
+        if (session.getAttribute("toner_usrName") == null) {
+            return java.util.Collections.emptyList();
+        }
+        return tonerService.getActiveTonersByPrinter(pid);
+    }
+
+    @PostMapping("/api/upload")
+    @ResponseBody
+    public Map<String, Object> uploadToner(
+            @RequestParam("companyName") String companyName,
+            @RequestParam("pid") int pid,
+            @RequestParam("tid") int tid,
+            @RequestParam("qty") String qty,
+            @RequestParam(value = "dcFile", required = false) MultipartFile dcFile,
+            @RequestParam(value = "userRequestFile", required = false) MultipartFile userRequestFile,
+            @RequestParam(value = "finalDeliveredFile", required = false) MultipartFile finalDeliveredFile,
+            HttpSession session) {
+
+        Map<String, Object> response = new HashMap<>();
+        String username = (String) session.getAttribute("toner_usrName");
+        if (username == null) {
+            response.put("success", false);
+            response.put("error", "Unauthorized access. Please log in.");
+            return response;
+        }
+
+        // Validate PDF extension on non-empty files
+        if (dcFile != null && !dcFile.isEmpty() && !isPdfFile(dcFile)) {
+            response.put("success", false);
+            response.put("error", "Delivery Challan file must be a PDF.");
+            return response;
+        }
+        if (userRequestFile != null && !userRequestFile.isEmpty() && !isPdfFile(userRequestFile)) {
+            response.put("success", false);
+            response.put("error", "User Request file must be a PDF.");
+            return response;
+        }
+        if (finalDeliveredFile != null && !finalDeliveredFile.isEmpty() && !isPdfFile(finalDeliveredFile)) {
+            response.put("success", false);
+            response.put("error", "Final Delivered file must be a PDF.");
+            return response;
+        }
+
+        try {
+            File uploadDir = new File(tonerUploadPathConfig).getAbsoluteFile();
+            if (!uploadDir.exists()) {
+                uploadDir.mkdirs();
+            }
+
+            // Save files
+            String dcPath = saveUploadedFile(dcFile, "dc", uploadDir);
+            String userRequestPath = saveUploadedFile(userRequestFile, "user_request", uploadDir);
+            String finalDeliveredPath = saveUploadedFile(finalDeliveredFile, "final_delivered", uploadDir);
+
+            boolean saved = tonerService.saveInventoryDetails(
+                    companyName.trim(),
+                    pid,
+                    tid,
+                    qty.trim(),
+                    dcPath,
+                    userRequestPath,
+                    finalDeliveredPath,
+                    username);
+
+            if (saved) {
+                response.put("success", true);
+                response.put("message", "Toner details saved successfully.");
+            } else {
+                // Delete newly saved files on DB insert failure
+                deleteFileIfExists(dcPath, uploadDir);
+                deleteFileIfExists(userRequestPath, uploadDir);
+                deleteFileIfExists(finalDeliveredPath, uploadDir);
+                response.put("success", false);
+                response.put("error", "Failed to save registration details in the database.");
+            }
+        } catch (Exception e) {
+            response.put("success", false);
+            response.put("error", "An error occurred during saving: " + e.getMessage());
+            e.printStackTrace();
+        }
+
+        return response;
+    }
+
+    private boolean isPdfFile(MultipartFile file) {
+        String originalFilename = file.getOriginalFilename();
+        if (originalFilename == null)
+            return false;
+        return originalFilename.toLowerCase().endsWith(".pdf");
+    }
+
+    private String saveUploadedFile(MultipartFile file, String prefix, File uploadDir) throws Exception {
+        if (file == null || file.isEmpty()) {
+            return null;
+        }
+        String originalFilename = file.getOriginalFilename();
+        String ext = ".pdf"; // Since we only allow PDFs
+
+        // Clean filename, make it unique
+        String savedFilename = prefix + "_" + System.currentTimeMillis() + ext;
+        File destFile = new File(uploadDir, savedFilename).getAbsoluteFile();
+        file.transferTo(destFile);
+
+        return "/gcctonermanagementfiles/" + savedFilename;
+    }
+
+    private void deleteFileIfExists(String webPath, File uploadDir) {
+        if (webPath == null || webPath.isEmpty())
+            return;
+        try {
+            String filename = webPath.substring(webPath.lastIndexOf('/') + 1);
+            File file = new File(uploadDir, filename).getAbsoluteFile();
+            if (file.exists()) {
+                file.delete();
+            }
+        } catch (Exception e) {
+            System.err.println("Error deleting file: " + e.getMessage());
+        }
+    }
+}
diff --git a/src/main/java/com/gcc_manpower/gcctonermanagement/service/TonerService.java b/src/main/java/com/gcc_manpower/gcctonermanagement/service/TonerService.java
new file mode 100644
index 0000000..76a783f
--- /dev/null
+++ b/src/main/java/com/gcc_manpower/gcctonermanagement/service/TonerService.java
@@ -0,0 +1,97 @@
+package com.gcc_manpower.gcctonermanagement.service;
+
+import java.util.ArrayList;
+import java.util.List;
+import java.util.Map;
+
+import javax.sql.DataSource;
+
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.beans.factory.annotation.Qualifier;
+import org.springframework.jdbc.core.JdbcTemplate;
+import org.springframework.stereotype.Service;
+
+@Service
+public class TonerService {
+
+    private JdbcTemplate jdbcTemplate;
+
+    @Autowired
+    public void setDataSource(@Qualifier("mysqlTonerManagementDataSource") DataSource dataSource) {
+        this.jdbcTemplate = new JdbcTemplate(dataSource);
+    }
+
+    public List<Map<String, Object>> getActivePrinters() {
+        String sql = "SELECT id, printer_name FROM printer_model_list where is_active = 1 AND is_delete = 0 ";
+        try {
+            return jdbcTemplate.queryForList(sql);
+        } catch (Exception e) {
+            System.err.println("Error fetching printers list: " + e.getMessage());
+            return new ArrayList<>();
+        }
+    }
+
+    public List<Map<String, Object>> getActiveTonersByPrinter(int pid) {
+        String sql = "SELECT id, model_name FROM toner_model_list WHERE pid = ? AND is_active = 1 AND is_delete = 0 ";
+        try {
+            return jdbcTemplate.queryForList(sql, pid);
+        } catch (Exception e) {
+            System.err.println("Error fetching toners list: " + e.getMessage());
+            return new ArrayList<>();
+        }
+    }
+
+    public String getTonerModelName(int tid) {
+        String sql = "SELECT model_name FROM toner_model_list WHERE id = ?";
+        try {
+            return jdbcTemplate.queryForObject(sql, String.class, tid);
+        } catch (Exception e) {
+            System.err.println("Error fetching toner model name for id " + tid + ": " + e.getMessage());
+            return "UNKNOWN";
+        }
+    }
+
+    public int getMaxInventoryId() {
+        String sql = "SELECT COALESCE(MAX(id), 0) FROM inventory_registered_details";
+        try {
+            return jdbcTemplate.queryForObject(sql, Integer.class);
+        } catch (Exception e) {
+            System.err.println("Error fetching max id from inventory_registered_details: " + e.getMessage());
+            return 0;
+        }
+    }
+
+    public boolean saveInventoryDetails(String companyName, int pid, int tid, String qty, String dcUpload,
+            String userRequestUpload, String finalDeliveredUpload, String username) {
+        // 1. Get toner model name
+        String tonerModel = getTonerModelName(tid);
+        String cleanModel = tonerModel.trim().replaceAll("\\s+", "-").replaceAll("[^a-zA-Z0-9-]", "");
+
+        // 2. Get next sequential number
+        int maxId = getMaxInventoryId();
+        int seqNum = 1000 + maxId + 1;
+
+        // 3. Get current year
+        int year = java.util.Calendar.getInstance().get(java.util.Calendar.YEAR);
+
+        // 4. Construct request number
+        String reqNo = String.format("%s-%d-%04d", cleanModel, year, seqNum);
+
+        // 5. Insert row
+        String sql = "INSERT INTO department_requested_details " +
+                "(req_no, company_name, pid, tid, qty_registered, dc_upload, user_request_upload, final_delivered_upload, cdate, updated_date, updated_by, is_active, is_delete) "
+                +
+                "VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, 1, 0)";
+
+        java.sql.Timestamp now = new java.sql.Timestamp(System.currentTimeMillis());
+        try {
+            int rows = jdbcTemplate.update(sql, reqNo, companyName, String.valueOf(pid), String.valueOf(tid), qty,
+                    dcUpload, userRequestUpload, finalDeliveredUpload, now, now, username);
+            return rows > 0;
+        } catch (Exception e) {
+            System.err.println("Error saving inventory details: " + e.getMessage());
+            e.printStackTrace();
+            return false;
+        }
+    }
+}
diff --git a/src/main/java/com/gcc_manpower/service/AppUserService.java b/src/main/java/com/gcc_manpower/service/AppUserService.java
index d71a3bb..bc2151d 100644
--- a/src/main/java/com/gcc_manpower/service/AppUserService.java
+++ b/src/main/java/com/gcc_manpower/service/AppUserService.java
@@ -851,6 +851,7 @@ public class AppUserService {
                 "  e.joined_date, " +
                 "  e.cdate, " +
                 "  e.updated_at, " +
+                "  e.designation AS raw_designation, " +
                 "  COALESCE(u.usr_name, e.updated_by) AS updated_by_name, " +
                 "  COALESCE(v.vendor_name, e.vendor_id) AS vendor_name, " +
                 "  COALESCE(ut.usertype, e.user_type) AS user_type, " +
diff --git a/src/main/resources/templates/fragments/navbar.html b/src/main/resources/templates/fragments/navbar.html
index da8cde7..5d2a223 100644
--- a/src/main/resources/templates/fragments/navbar.html
+++ b/src/main/resources/templates/fragments/navbar.html
@@ -52,6 +52,12 @@
 								<i class="fa-solid fa-file-circle-xmark"></i> Deleted Work Orders
 							</a>
 						</li>
+						<li class="nav-item">
+							<a class="nav-link" th:href="@{/?action=positionHistory}"
+								onclick="if (document.getElementById('positionHistoryModal')) { bootstrap.Modal.getOrCreateInstance(document.getElementById('positionHistoryModal')).show(); return false; }">
+								<i class="fa-solid fa-clock-rotate-left"></i> Position History
+							</a>
+						</li>
 						<li class="nav-item">
 							<a class="nav-link" th:href="@{/?action=addVendorWorkOrder}"
 								onclick="if (document.getElementById('addVendorWorkOrderModal')) { bootstrap.Modal.getOrCreateInstance(document.getElementById('addVendorWorkOrderModal')).show(); return false; }">
diff --git a/src/main/resources/templates/fragments/tonerheader.html b/src/main/resources/templates/fragments/tonerheader.html
new file mode 100644
index 0000000..e2d663e
--- /dev/null
+++ b/src/main/resources/templates/fragments/tonerheader.html
@@ -0,0 +1,22 @@
+<th:block th:fragment="tonerheader">
+    <!-- Awesome Font -->
+    <link rel="stylesheet" th:href="@{/assets/font-awesome-6.5.2/css/all.min.css}" type="text/css">
+    <!-- Bootstrap CSS -->
+    <link rel="stylesheet" th:href="@{/assets/bootstrap-5.3.2/css/bootstrap.min.css}" type="text/css">
+    <!-- CSS for Header -->
+    <link rel="stylesheet" th:href="@{/assets/css/header-styles.css}" type="text/css">
+    <div class="header">
+        <div class="logo-left">
+            <img th:src="@{/assets/header-images/gcc1.png}" alt="Greater Chennai Corporation Logo">
+            <div class="logo-text">
+                <h2>GREATER</h2>
+                <h2>CHENNAI</h2>
+                <h2>CORPORATION</h2>
+                <p>பெருநகர சென்னை மாநகராட்சி</p>
+            </div>
+        </div>
+        <div class="title">
+            <h2>GCC Toner Material Management Details</h2>
+        </div>
+    </div>
+</th:block>
\ No newline at end of file
diff --git a/src/main/resources/templates/gccservicepaymenttracker/dashboard.html b/src/main/resources/templates/gccservicepaymenttracker/dashboard.html
index 77d3a50..eba731f 100644
--- a/src/main/resources/templates/gccservicepaymenttracker/dashboard.html
+++ b/src/main/resources/templates/gccservicepaymenttracker/dashboard.html
@@ -37,6 +37,16 @@
 
     <!-- Custom Style Sheet mapping to theme -->
     <style>
+        .text-info-dark {
+            color: #075985 !important;
+            font-weight: 600;
+        }
+
+        .text-warning-dark {
+            color: #92400e !important;
+            font-weight: 600;
+        }
+
         body {
             background-color: #f4f7f6;
             font-family: 'Poppins', sans-serif;
@@ -1109,12 +1119,8 @@
                                 <thead class="table-light text-secondary fw-bold" style="font-size: 0.75rem;">
                                     <tr id="summary-thead-tr">
                                         <th style="background-color: #f8fafc; color: #475569;">Total No of files</th>
-                                        <!-- Commented out status headers to tally with days-wise count
-                                        <th style="background-color: #f0fdf4; color: #166534;">Completed</th>
-                                        <th style="background-color: #fffbeb; color: #92400e;">Awaiting Details</th>
-                                        <th style="background-color: #f0f9ff; color: #075985;">Pending with Dept</th>
-                                        <th style="background-color: #fef2f2; color: #991b1b;">Pending</th>
-                                        -->
+                                        <th style="background-color: #f0fdf4; color: #166534;">Completed Files</th>
+                                        <th style="background-color: #fef2f2; color: #991b1b;">Pending Files</th>
                                         <th style="background-color: #fafaf9; color: #44403c;">1 to 15 Days</th>
                                         <th style="background-color: #fafaf9; color: #44403c;">16 to 30 Days</th>
                                         <th style="background-color: #fafaf9; color: #44403c;">31 to 60 Days</th>
@@ -1128,18 +1134,12 @@
                                         <td id="summary-total" class="cursor-pointer text-primary"
                                             style="background-color: #f8fafc;"
                                             onclick="openModalForCount('total', null, 'Total No of files')">0</td>
-                                        <!-- Commented out status cells to tally with days-wise count
                                         <td id="summary-completed" class="cursor-pointer text-success"
-                                            onclick="setClickFilter('status', 'Completed', 'Status: Completed')">0</td>
-                                        <td id="summary-awaiting" class="cursor-pointer text-warning"
-                                            onclick="setClickFilter('status', 'Awaiting Details', 'Status: Awaiting Details')">
-                                            0</td>
-                                        <td id="summary-dept" class="cursor-pointer text-info"
-                                            onclick="setClickFilter('status', 'Pending with Dept', 'Status: Pending with Dept')">
-                                            0</td>
+                                            onclick="openModalForCount('completed_custom', null, 'Completed Files')">0
+                                        </td>
                                         <td id="summary-pending" class="cursor-pointer text-danger"
-                                            onclick="setClickFilter('status', 'Pending', 'Status: Pending')">0</td>
-                                        -->
+                                            style="color: #991b1b; font-weight: bold;"
+                                            onclick="openModalForCount('pending_custom', null, 'Pending Files')">0</td>
                                         <td id="summary-1-15" class="cursor-pointer"
                                             onclick="openModalForCount('age', [1, 15], 'Age: 1 to 15 Days')">0</td>
                                         <td id="summary-16-30" class="cursor-pointer"
@@ -1918,8 +1918,8 @@
 
         const statusColors = {
             'completed': { bg: '#f0fdf4', text: '#166534', badgeClass: 'text-success' },
-            'awaiting details': { bg: '#fffbeb', text: '#92400e', badgeClass: 'text-warning' },
-            'pending with dept': { bg: '#f0f9ff', text: '#075985', badgeClass: 'text-info' },
+            'awaiting details': { bg: '#fffbeb', text: '#92400e', badgeClass: 'text-warning-dark' },
+            'pending with dept': { bg: '#f0f9ff', text: '#075985', badgeClass: 'text-info-dark' },
             'pending': { bg: '#fef2f2', text: '#991b1b', badgeClass: 'text-danger' },
             'no action': { bg: '#fafaf9', text: '#44403c', badgeClass: 'text-secondary' },
             'processed': { bg: '#dbeafe', text: '#1e40af', badgeClass: 'text-primary' },
@@ -2008,13 +2008,11 @@
             // Dynamically populate summary table headers
             const summaryTheadTr = document.getElementById('summary-thead-tr');
             if (summaryTheadTr) {
-                let summaryHeadHtml = `<th style="background-color: #f8fafc; color: #475569;">Total No of files</th>`;
-                /* Commented out status headers to tally with days-wise count
-                activeStatus.forEach(s => {
-                    const style = getStatusStyle(s.status_name);
-                    summaryHeadHtml += `<th style="background-color: ${style.bg}; color: ${style.text};">${escapeHtml(s.status_name)}</th>`;
-                });
-                */
+                let summaryHeadHtml = `
+                    <th style="background-color: #f8fafc; color: #475569;">Total No of files</th>
+                    <th style="background-color: #f0fdf4; color: #166534;">Completed Files</th>
+                    <th style="background-color: #fef2f2; color: #991b1b;">Pending Files</th>
+                `;
                 summaryHeadHtml += `
                     <th style="background-color: #fafaf9; color: #44403c;">1 to 15 Days</th>
                     <th style="background-color: #fafaf9; color: #44403c;">16 to 30 Days</th>
@@ -2359,7 +2357,7 @@
 
 
 
-                const getTypeBadge = typeVal => {
+                const getTypeBadge = (typeVal, filePath) => {
                     const cleanType = String(typeVal || '').trim().toLowerCase();
                     let label = cleanType;
                     let badgeClass = 'type-sd';
@@ -2389,12 +2387,26 @@
                         // Fallback: check if cleanType is a numeric ID from activeTypes
                         const typeObj = activeTypes.find(t => String(t.id) === cleanType);
                         if (typeObj) {
-                            return getTypeBadge(typeObj.type_name);
+                            return getTypeBadge(typeObj.type_name, filePath);
                         }
                         label = typeVal || '-';
                         badgeClass = 'status-default';
                     }
-                    return `<span class="type-badge ${badgeClass}">${label}</span>`;
+
+                    let onClickAttr = '';
+                    if (filePath) {
+                        let pdfUrl = filePath;
+                        if (contextPath && contextPath.endsWith('/') && pdfUrl.startsWith('/')) {
+                            pdfUrl = contextPath + pdfUrl.substring(1);
+                        } else {
+                            pdfUrl = contextPath + pdfUrl;
+                        }
+                        onClickAttr = `onclick="window.open('${escapeHtml(pdfUrl)}', '_blank')"`;
+                    } else {
+                        onClickAttr = `onclick="alert('pdf file not uploaded')"`;
+                    }
+
+                    return `<span class="type-badge ${badgeClass} cursor-pointer" ${onClickAttr} style="cursor: pointer;" title="${filePath ? 'Click to view PDF' : 'PDF not uploaded'}">${label}</span>`;
                 };
 
                 const dispStatus = String(row.resolved_status || getStatusName(row.status) || '').trim();
@@ -2405,7 +2417,7 @@
                     <td>${text(row.physical_file_no)}</td>
                     <td>${text(row.receiptno)}</td>
                     <td>${text(row.subject)}</td>
-                    <td>${getTypeBadge(row.resolved_type || row.type)}</td>
+                    <td>${getTypeBadge(row.resolved_type || row.type, row.file_path)}</td>
                     <td class="fw-semibold text-secondary">${text(row.resolved_vendor || row.vendor_name)}</td>
                     <td class="fw-semibold text-dark">&#8377; ${text(row.amount)}</td>
                     <td>${calculateAgeOfBill(row.received_date)}</td>
@@ -2976,6 +2988,7 @@
                     s.status_name.toLowerCase().trim() === statusName.toLowerCase().trim()
                 );
                 const statusId = matchedStatus ? matchedStatus.id : null;
+                const isCompleted = matchedStatus && getStatusKey(matchedStatus.status_name) === 'completed';
 
                 const age = parseInt(calculateAgeOfBill(row.received_date), 10);
                 const vendorName = String(row.resolved_vendor || row.vendor_name || 'Unknown').trim();
@@ -2984,12 +2997,14 @@
                     statusCounts[statusId] = (statusCounts[statusId] || 0) + 1;
                 }
 
-                if (age >= 1 && age <= 15) age_1_15++;
-                else if (age >= 16 && age <= 30) age_16_30++;
-                else if (age >= 31 && age <= 60) age_31_60++;
-                else if (age >= 61 && age <= 90) age_61_90++;
-                else if (age >= 91 && age <= 120) age_91_120++;
-                else if (age > 120) age_over_120++;
+                if (!isCompleted) {
+                    if (age >= 1 && age <= 15) age_1_15++;
+                    else if (age >= 16 && age <= 30) age_16_30++;
+                    else if (age >= 31 && age <= 60) age_31_60++;
+                    else if (age >= 61 && age <= 90) age_61_90++;
+                    else if (age >= 91 && age <= 120) age_91_120++;
+                    else if (age > 120) age_over_120++;
+                }
 
                 if (!vendorMap[vendorName]) {
                     vendorMap[vendorName] = {
@@ -3001,7 +3016,13 @@
                         age_31_60: 0,
                         age_61_90: 0,
                         age_91_120: 0,
-                        age_over_120: 0
+                        age_over_120: 0,
+                        comp_age_1_15: 0,
+                        comp_age_16_30: 0,
+                        comp_age_31_60: 0,
+                        comp_age_61_90: 0,
+                        comp_age_91_120: 0,
+                        comp_age_over_120: 0
                     };
                     activeStatus.forEach(s => {
                         vendorMap[vendorName].statusCounts[s.id] = 0;
@@ -3014,26 +3035,35 @@
                     vData.statusCounts[statusId] = (vData.statusCounts[statusId] || 0) + 1;
                 }
 
-                if (age >= 1 && age <= 15) vData.age_1_15++;
-                else if (age >= 16 && age <= 30) vData.age_16_30++;
-                else if (age >= 31 && age <= 60) vData.age_31_60++;
-                else if (age >= 61 && age <= 90) vData.age_61_90++;
-                else if (age >= 91 && age <= 120) vData.age_91_120++;
-                else if (age > 120) vData.age_over_120++;
+                if (isCompleted) {
+                    if (age >= 1 && age <= 15) vData.comp_age_1_15++;
+                    else if (age >= 16 && age <= 30) vData.comp_age_16_30++;
+                    else if (age >= 31 && age <= 60) vData.comp_age_31_60++;
+                    else if (age >= 61 && age <= 90) vData.comp_age_61_90++;
+                    else if (age >= 91 && age <= 120) vData.comp_age_91_120++;
+                    else if (age > 120) vData.comp_age_over_120++;
+                } else {
+                    if (age >= 1 && age <= 15) vData.age_1_15++;
+                    else if (age >= 16 && age <= 30) vData.age_16_30++;
+                    else if (age >= 31 && age <= 60) vData.age_31_60++;
+                    else if (age >= 61 && age <= 90) vData.age_61_90++;
+                    else if (age >= 91 && age <= 120) vData.age_91_120++;
+                    else if (age > 120) vData.age_over_120++;
+                }
+            });
+            let completedTotal = 0;
+            const completedStatuses = activeStatus.filter(s => getStatusKey(s.status_name) === 'completed');
+            completedStatuses.forEach(s => {
+                completedTotal += (statusCounts[s.id] || 0);
             });
 
-            // Populate total
-            document.getElementById('summary-total').textContent = total;
+            const pendingTotal = total - completedTotal;
 
-            // Dynamically populate body values for dynamic statuses
-            let summaryBodyHtml = `<td id="summary-total" class="cursor-pointer text-primary" style="background-color: #f8fafc;" onclick="openModalForCount('total', null, 'Total No of Files')">${total}</td>`;
-            /* Commented out status columns to tally with days-wise count
-            activeStatus.forEach(s => {
-                const count = statusCounts[s.id] || 0;
-                const style = getStatusStyle(s.status_name);
-                summaryBodyHtml += `<td id="summary-status-${s.id}" class="cursor-pointer ${style.badgeClass}" onclick="setClickFilter('status', '${s.id}', 'Status: ' + this.getAttribute('data-status-name'))" data-status-name="${escapeHtml(s.status_name)}">${count}</td>`;
-            });
-            */
+            let summaryBodyHtml = `
+                <td id="summary-total" class="cursor-pointer text-primary" style="background-color: #f8fafc;" onclick="openModalForCount('total', null, 'Total No of files')">${total}</td>
+                <td id="summary-completed" class="cursor-pointer text-success" onclick="openModalForCount('completed_custom', null, 'Completed Files')">${completedTotal}</td>
+                <td id="summary-pending" class="cursor-pointer text-danger" style="color: #991b1b; font-weight: bold;" onclick="openModalForCount('pending_custom', null, 'Pending Files')">${pendingTotal}</td>
+            `;
             summaryBodyHtml += `
                 <td id="summary-1-15" class="cursor-pointer" onclick="openModalForCount('age', [1, 15], 'Age: 1 to 15 Days')">${age_1_15}</td>
                 <td id="summary-16-30" class="cursor-pointer" onclick="openModalForCount('age', [16, 30], 'Age: 16 to 30 Days')">${age_16_30}</td>
@@ -3385,6 +3415,41 @@
                 }
 
                 if (clickType === 'age') {
+                    // Exclude completed files for pending age column clicks
+                    const rowStatusStr = String(row.status || '').trim();
+                    const isCompleted = activeStatus.filter(s => getStatusKey(s.status_name) === 'completed').some(s =>
+                        rowStatusStr === String(s.id) ||
+                        rowStatusStr.toLowerCase() === s.status_name.toLowerCase().trim()
+                    );
+                    if (isCompleted) return false;
+
+                    const [min, max] = clickValue;
+                    if (max !== null) {
+                        if (age < min || age > max) return false;
+                    } else {
+                        if (age < min) return false;
+                    }
+                }
+
+                if (clickType === 'completed_custom') {
+                    // Filter for completed status
+                    const rowStatusStr = String(row.status || '').trim();
+                    const isCompleted = activeStatus.filter(s => getStatusKey(s.status_name) === 'completed').some(s =>
+                        rowStatusStr === String(s.id) ||
+                        rowStatusStr.toLowerCase() === s.status_name.toLowerCase().trim()
+                    );
+                    if (!isCompleted) return false;
+                }
+
+                if (clickType === 'completed_age') {
+                    // Filter for completed status
+                    const rowStatusStr = String(row.status || '').trim();
+                    const isCompleted = activeStatus.filter(s => getStatusKey(s.status_name) === 'completed').some(s =>
+                        rowStatusStr === String(s.id) ||
+                        rowStatusStr.toLowerCase() === s.status_name.toLowerCase().trim()
+                    );
+                    if (!isCompleted) return false;
+
                     const [min, max] = clickValue;
                     if (max !== null) {
                         if (age < min || age > max) return false;
@@ -3446,6 +3511,34 @@
                     const rowVendor = String(row.resolved_vendor || row.vendor_name || 'Unknown').trim();
                     if (rowVendor !== vendorName) return false;
 
+                    // Exclude completed files for pending vendor age clicks 
+                    const rowStatusStr = String(row.status || '').trim();
+                    const isCompleted = activeStatus.filter(s => getStatusKey(s.status_name) === 'completed').some(s =>
+                        rowStatusStr === String(s.id) ||
+                        rowStatusStr.toLowerCase() === s.status_name.toLowerCase().trim()
+                    );
+                    if (isCompleted) return false;
+
+                    const [min, max] = clickValue;
+                    if (max !== null) {
+                        if (age < min || age > max) return false;
+                    } else {
+                        if (age < min) return false;
+                    }
+                }
+
+                if (clickType === 'vendor_completed_age') {
+                    const rowVendor = String(row.resolved_vendor || row.vendor_name || 'Unknown').trim();
+                    if (rowVendor !== vendorName) return false;
+
+                    // Filter for completed status
+                    const rowStatusStr = String(row.status || '').trim();
+                    const isCompleted = activeStatus.filter(s => getStatusKey(s.status_name) === 'completed').some(s =>
+                        rowStatusStr === String(s.id) ||
+                        rowStatusStr.toLowerCase() === s.status_name.toLowerCase().trim()
+                    );
+                    if (!isCompleted) return false;
+
                     const [min, max] = clickValue;
                     if (max !== null) {
                         if (age < min || age > max) return false;
@@ -3546,7 +3639,7 @@
                 }
             };
 
-            const getTypeBadge = typeVal => {
+            const getTypeBadge = (typeVal, filePath) => {
                 const cleanType = String(typeVal || '').trim().toLowerCase();
                 let label = cleanType;
                 let badgeClass = 'type-sd';
@@ -3575,12 +3668,26 @@
                 } else {
                     const typeObj = activeTypes.find(t => String(t.id) === cleanType);
                     if (typeObj) {
-                        return getTypeBadge(typeObj.type_name);
+                        return getTypeBadge(typeObj.type_name, filePath);
                     }
                     label = typeVal || '-';
                     badgeClass = 'status-default';
                 }
-                return `<span class="type-badge ${badgeClass}">${label}</span>`;
+
+                let onClickAttr = '';
+                if (filePath) {
+                    let pdfUrl = filePath;
+                    if (contextPath && contextPath.endsWith('/') && pdfUrl.startsWith('/')) {
+                        pdfUrl = contextPath + pdfUrl.substring(1);
+                    } else {
+                        pdfUrl = contextPath + pdfUrl;
+                    }
+                    onClickAttr = `onclick="window.open('${escapeHtml(pdfUrl)}', '_blank')"`;
+                } else {
+                    onClickAttr = `onclick="alert('pdf file not uploaded')"`;
+                }
+
+                return `<span class="type-badge ${badgeClass} cursor-pointer" ${onClickAttr} style="cursor: pointer;" title="${filePath ? 'Click to view PDF' : 'PDF not uploaded'}">${label}</span>`;
             };
 
             data.forEach((row, index) => {
@@ -3599,7 +3706,7 @@
                     <td>${text(row.physical_file_no)}</td>
                     <td>${text(row.receiptno)}</td>
                     <td>${text(row.subject)}</td>
-                    <td>${getTypeBadge(row.resolved_type || row.type)}</td>
+                    <td>${getTypeBadge(row.resolved_type || row.type, row.file_path)}</td>
                     <td class="fw-semibold text-secondary">${text(row.resolved_vendor || row.vendor_name)}</td>
                     <td class="fw-semibold text-dark">&#8377; ${text(row.amount)}</td>
                     <td>${calculateAgeOfBill(row.received_date)}</td>
@@ -3700,6 +3807,53 @@
                 });
             }
 
+            // Find Type of File column index to append PDF Status
+            let typeColIndex = -1;
+            clonedTable.querySelectorAll('thead th').forEach((th, index) => {
+                if (th.textContent.trim().toLowerCase() === 'type of file') {
+                    typeColIndex = index;
+                }
+            });
+
+            if (typeColIndex !== -1) {
+                // Insert header "PDF Status" right after "Type of File"
+                const th = document.createElement('th');
+                th.textContent = 'PDF Status';
+                th.style.backgroundColor = '#f0fdf4';
+                th.style.color = '#166534';
+
+                const theadTr = clonedTable.querySelector('thead tr');
+                const nextTh = theadTr.children[typeColIndex + 1];
+                if (nextTh) {
+                    theadTr.insertBefore(th, nextTh);
+                } else {
+                    theadTr.appendChild(th);
+                }
+
+                // Insert td for each row
+                clonedTable.querySelectorAll('tbody tr').forEach(row => {
+                    const cells = row.querySelectorAll('td');
+                    const typeCell = cells[typeColIndex];
+                    let pdfStatusText = 'pdf file not uploaded';
+                    if (typeCell) {
+                        const span = typeCell.querySelector('span');
+                        if (span && span.getAttribute('title') && span.getAttribute('title').toLowerCase().includes('click')) {
+                            pdfStatusText = 'PDF Uploaded';
+                        }
+                    }
+
+                    const td = document.createElement('td');
+                    td.textContent = pdfStatusText;
+
+                    const nextTd = row.children[typeColIndex + 1];
+                    if (nextTd) {
+                        row.insertBefore(td, nextTd);
+                    } else {
+                        row.appendChild(td);
+                    }
+                });
+            }
+
             // Convert to Excel workbook and download
             const wb = XLSX.utils.table_to_book(clonedTable, { raw: true, sheet: "Sheet1" });
             XLSX.writeFile(wb, filename);
@@ -3729,6 +3883,7 @@
                     <th>eFile No./ Receipt No.</th>
                     <th>Subject</th>
                     <th>Type of File</th>
+                    <th>PDF Status</th>
                     <th>Vendor Name</th>
                     <th>Amount</th>
                     <th>Age of Bill (Days)</th>
@@ -3813,6 +3968,7 @@
                     <td>${text(row.receiptno)}</td>
                     <td>${text(row.subject)}</td>
                     <td>${getTypeLabel(row.resolved_type || row.type)}</td>
+                    <td>${row.file_path ? 'PDF Uploaded' : 'pdf file not uploaded'}</td>
                     <td>${text(row.resolved_vendor || row.vendor_name)}</td>
                     <td>${text(row.amount)}</td>
                     <td>${calculateAgeOfBill(row.received_date)}</td>
@@ -4158,7 +4314,7 @@
                 }
             };
 
-            const getTypeBadge = typeVal => {
+            const getTypeBadge = (typeVal, filePath) => {
                 const cleanType = String(typeVal || '').trim().toLowerCase();
                 let label = cleanType;
                 let badgeClass = 'type-sd';
@@ -4187,12 +4343,26 @@
                 } else {
                     const typeObj = activeTypes.find(t => String(t.id) === cleanType);
                     if (typeObj) {
-                        return getTypeBadge(typeObj.type_name);
+                        return getTypeBadge(typeObj.type_name, filePath);
                     }
                     label = typeVal || '-';
                     badgeClass = 'status-default';
                 }
-                return `<span class="type-badge ${badgeClass}">${label}</span>`;
+
+                let onClickAttr = '';
+                if (filePath) {
+                    let pdfUrl = filePath;
+                    if (contextPath && contextPath.endsWith('/') && pdfUrl.startsWith('/')) {
+                        pdfUrl = contextPath + pdfUrl.substring(1);
+                    } else {
+                        pdfUrl = contextPath + pdfUrl;
+                    }
+                    onClickAttr = `onclick="window.open('${escapeHtml(pdfUrl)}', '_blank')"`;
+                } else {
+                    onClickAttr = `onclick="alert('pdf file not uploaded')"`;
+                }
+
+                return `<span class="type-badge ${badgeClass} cursor-pointer" ${onClickAttr} style="cursor: pointer;" title="${filePath ? 'Click to view PDF' : 'PDF not uploaded'}">${label}</span>`;
             };
 
             data.forEach((row, index) => {
@@ -4211,7 +4381,7 @@
                     <td>${text(row.physical_file_no)}</td>
                     <td>${text(row.receiptno)}</td>
                     <td>${text(row.subject)}</td>
-                    <td>${getTypeBadge(row.resolved_type || row.type)}</td>
+                    <td>${getTypeBadge(row.resolved_type || row.type, row.file_path)}</td>
                     <td class="fw-semibold text-secondary">${text(row.resolved_vendor || row.vendor_name)}</td>
                     <td class="fw-semibold text-dark">&#8377; ${text(row.amount)}</td>
                     <td>${calculateAgeOfBill(row.received_date)}</td>
diff --git a/src/main/resources/templates/gcctonermanagement/login.html b/src/main/resources/templates/gcctonermanagement/login.html
new file mode 100644
index 0000000..e2cbbee
--- /dev/null
+++ b/src/main/resources/templates/gcctonermanagement/login.html
@@ -0,0 +1,116 @@
+<!DOCTYPE html>
+<html xmlns:th="http://www.thymeleaf.org" lang="en">
+
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>GCC IT Cell Toner Management - Login</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}" />
+
+	<!-- Include CSS -->
+	<link rel="stylesheet" type="text/css" th:href="@{/assets/css/login-form-styles.css}">
+
+	<!-- Awesome Font -->
+	<link th:href="@{/assets/font-awesome-6.5.2/css/all.min.css}" rel="stylesheet" type="text/css">
+</head>
+
+<body>
+	<div class="container">
+		<img th:src="@{/assets/header-images/gcc1.png}" alt="Greater Chennai Corporation" class="small-logo">
+		<h3>GREATER CHENNAI CORPORATION</h3>
+		<h4>பெருநகர சென்னை மாநகராட்சி</h4>
+		<br>
+		<h3>GCC IT Cell Toner Management</h3>
+		<br>
+		<h2>Login</h2>
+
+		<div id="error-box"
+			style="color: #c0392b; font-weight: 500; font-size: 0.85rem; margin-bottom: 1.5rem; text-align: center; display: none;">
+			<i class="fa-solid fa-circle-exclamation"></i> <span id="error-text">Invalid username or password!</span>
+		</div>
+
+		<form id="loginForm" onsubmit="handleLogin(event)">
+			<div class="input-field">
+				<input type="text" name="usrName" id="usrName" placeholder="Enter Username" required
+					autocomplete="username">
+				<div class="underline"></div>
+			</div>
+			<div class="input-field">
+				<input type="password" name="usrPass" id="usrPass" placeholder="Enter Password" required
+					autocomplete="current-password">
+				<div class="underline"></div>
+			</div>
+			<input type="submit" value="Login" id="submit-btn">
+		</form>
+	</div>
+
+	<!-- Footer Fragment -->
+	<th:block th:replace="~{fragments/footer :: footer}"></th:block>
+
+	<!-- Custom JS -->
+	<script th:inline="javascript">
+		const contextPath = /*[[@{/}]]*/ '';
+	</script>
+
+	<script>
+		function handleLogin(event) {
+			event.preventDefault();
+
+			const errorBox = document.getElementById("error-box");
+			const errorText = document.getElementById("error-text");
+			const submitBtn = document.getElementById("submit-btn");
+
+			errorBox.style.display = "none";
+			submitBtn.disabled = true;
+			submitBtn.value = 'Authenticating...';
+
+			const username = document.getElementById("usrName").value;
+			const password = document.getElementById("usrPass").value;
+
+			const urlParams = new URLSearchParams();
+			urlParams.append('usrName', username);
+			urlParams.append('usrPass', password);
+
+			// Fetch CSRF tokens
+			const csrfToken = document.querySelector("meta[name='_csrf']")?.getAttribute("content");
+			const csrfHeader = document.querySelector("meta[name='_csrf_header']")?.getAttribute("content");
+
+			const headers = {
+				'Content-Type': 'application/x-www-form-urlencoded'
+			};
+			if (csrfToken && csrfHeader) {
+				headers[csrfHeader] = csrfToken;
+			}
+
+			fetch(contextPath + 'gcctonermanagement/api/login', {
+				method: 'POST',
+				headers: headers,
+				body: urlParams
+			})
+				.then(response => response.json())
+				.then(data => {
+					if (data.result) {
+						sessionStorage.setItem("toner_usrName", data.usrName);
+						window.location.href = contextPath + 'gcctonermanagement/upload';
+					} else {
+						submitBtn.disabled = false;
+						submitBtn.value = 'Login';
+						errorText.textContent = data.error || "Authentication failed.";
+						errorBox.style.display = "block";
+					}
+				})
+				.catch(err => {
+					console.error("Login Error:", err);
+					submitBtn.disabled = false;
+					submitBtn.value = 'Login';
+					errorText.textContent = "Network error. Please try again later.";
+					errorBox.style.display = "block";
+				});
+		}
+	</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
new file mode 100644
index 0000000..62668c3
--- /dev/null
+++ b/src/main/resources/templates/gcctonermanagement/upload.html
@@ -0,0 +1,670 @@
+<!DOCTYPE html>
+<html xmlns:th="http://www.thymeleaf.org" lang="en">
+
+<head>
+    <script th:inline="javascript">
+        (function () {
+            const currentUser = /*[[${session.toner_usrName}]]*/ null;
+            if (currentUser && sessionStorage.getItem("toner_usrName") !== currentUser) {
+                window.location.replace(/*[[@{/gcctonermanagement/login}]]*/ '/gcctonermanagement/login');
+            }
+        })();
+    </script>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>GCC Toner Upload Portal</title>
+
+    <!-- CSRF Tokens -->
+    <meta th:if="${_csrf != null}" name="_csrf" th:content="${_csrf.token}" />
+    <meta th:if="${_csrf != null}" name="_csrf_header" th:content="${_csrf.headerName}" />
+
+    <!-- Header Fragment -->
+    <th:block th:replace="~{fragments/tonerheader :: tonerheader}"></th:block>
+
+    <!-- Google Fonts -->
+    <link
+        href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=Poppins:wght@300;400;500;600;700&display=swap"
+        rel="stylesheet">
+
+    <!-- Styles -->
+    <style>
+        body {
+            background-color: #f4f7f6;
+            font-family: 'Poppins', sans-serif;
+            color: #333;
+        }
+
+        .main-container {
+            max-width: 800px;
+            margin: 40px auto;
+            padding: 0 20px;
+        }
+
+        .page-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 30px;
+        }
+
+        .page-title {
+            font-family: 'Outfit', sans-serif;
+            font-size: 2rem;
+            font-weight: 700;
+            color: #0f5c78;
+            margin: 0;
+            display: flex;
+            align-items: center;
+            gap: 12px;
+        }
+
+        .btn-back {
+            background-color: #ffffff;
+            color: #475569;
+            font-weight: 600;
+            border: 1.5px solid #cbd5e1;
+            padding: 10px 20px;
+            border-radius: 30px;
+            transition: all 0.3s ease;
+            text-decoration: none;
+            display: inline-flex;
+            align-items: center;
+            gap: 8px;
+        }
+
+        .btn-back:hover {
+            background-color: #f1f5f9;
+            color: #0f5c78;
+            border-color: #0f5c78;
+        }
+
+        .upload-card {
+            background: #ffffff;
+            border-radius: 20px;
+            border: 1px solid rgba(15, 92, 120, 0.08);
+            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.04);
+            padding: 40px;
+        }
+
+        .form-label {
+            font-size: 0.9rem;
+            font-weight: 600;
+            color: #475569;
+            margin-bottom: 8px;
+        }
+
+        .form-control-custom {
+            height: 48px;
+            border-radius: 10px;
+            border: 1.5px solid #e2e8f0;
+            padding: 10px 16px;
+            font-size: 0.95rem;
+            font-weight: 500;
+            color: #334155;
+            background-color: #f8fafc;
+            transition: all 0.3s ease;
+            width: 100%;
+        }
+
+        .form-control-custom:focus {
+            outline: none;
+            border-color: #0f5c78;
+            background-color: #ffffff;
+            box-shadow: 0 0 0 3px rgba(15, 92, 120, 0.15);
+        }
+
+        .form-group {
+            margin-bottom: 24px;
+        }
+
+        .category-select-group {
+            display: flex;
+            flex-direction: column;
+            gap: 12px;
+        }
+
+        /* Drag & Drop Zone */
+        .dropzone-container {
+            border: 2px dashed #cbd5e1;
+            border-radius: 16px;
+            padding: 40px 20px;
+            text-align: center;
+            background-color: #f8fafc;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            position: relative;
+            margin-bottom: 24px;
+        }
+
+        .dropzone-container:hover,
+        .dropzone-container.dragover {
+            border-color: #0f5c78;
+            background-color: rgba(15, 92, 120, 0.03);
+        }
+
+        .dropzone-icon {
+            font-size: 3rem;
+            color: #94a3b8;
+            margin-bottom: 16px;
+            transition: color 0.3s ease;
+        }
+
+        .dropzone-container:hover .dropzone-icon {
+            color: #0f5c78;
+        }
+
+        .dropzone-text {
+            font-size: 1rem;
+            color: #475569;
+            font-weight: 500;
+            margin-bottom: 8px;
+        }
+
+        .dropzone-hint {
+            font-size: 0.8rem;
+            color: #94a3b8;
+        }
+
+        .file-input-hidden {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            opacity: 0;
+            cursor: pointer;
+        }
+
+        .selected-file-banner {
+            background-color: #f0fdf4;
+            border: 1px solid #bbf7d0;
+            border-radius: 10px;
+            padding: 12px 18px;
+            margin-bottom: 24px;
+            display: none;
+            align-items: center;
+            justify-content: space-between;
+        }
+
+        .selected-file-details {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            color: #166534;
+            font-size: 0.9rem;
+            font-weight: 500;
+        }
+
+        .btn-remove-file {
+            background: none;
+            border: none;
+            color: #b91c1c;
+            font-size: 1.1rem;
+            cursor: pointer;
+        }
+
+        /* Progress Bar */
+        .progress-container {
+            display: none;
+            margin-bottom: 24px;
+        }
+
+        .progress-bar-wrapper {
+            background-color: #e2e8f0;
+            height: 8px;
+            border-radius: 10px;
+            overflow: hidden;
+        }
+
+        .progress-bar-fill {
+            background: linear-gradient(90deg, #0f5c78, #1781a6);
+            height: 100%;
+            width: 0%;
+            transition: width 0.1s ease;
+        }
+
+        .progress-text {
+            display: flex;
+            justify-content: space-between;
+            font-size: 0.85rem;
+            font-weight: 600;
+            color: #64748b;
+            margin-bottom: 6px;
+        }
+
+        .btn-submit-upload {
+            width: 100%;
+            height: 50px;
+            border-radius: 12px;
+            background: linear-gradient(135deg, #0f5c78, #1781a6);
+            color: #ffffff;
+            font-weight: 600;
+            font-size: 1rem;
+            border: none;
+            box-shadow: 0 4px 15px rgba(15, 92, 120, 0.2);
+            cursor: pointer;
+            transition: all 0.3s ease;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 8px;
+        }
+
+        .btn-submit-upload:hover {
+            background: linear-gradient(135deg, #1781a6, #0f5c78);
+            transform: translateY(-2px);
+            box-shadow: 0 6px 20px rgba(15, 92, 120, 0.3);
+        }
+
+        .btn-submit-upload:disabled {
+            background: #cbd5e1;
+            color: #94a3b8;
+            box-shadow: none;
+            cursor: not-allowed;
+            transform: none;
+        }
+
+        .file-upload-card {
+            border: 2px dashed #cbd5e1;
+            background-color: #f8fafc;
+            border-radius: 12px;
+            padding: 20px 10px;
+            text-align: center;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            gap: 8px;
+            height: 120px;
+        }
+
+        .file-upload-card:hover {
+            border-color: #0f5c78;
+            background-color: rgba(15, 92, 120, 0.03);
+            transform: translateY(-2px);
+        }
+
+        .file-upload-card.file-selected {
+            border-color: #166534;
+            background-color: #f0fdf4;
+        }
+
+        .upload-card-icon {
+            font-size: 1.8rem;
+            color: #94a3b8;
+            transition: color 0.3s ease;
+        }
+
+        .file-upload-card:hover .upload-card-icon {
+            color: #0f5c78;
+        }
+
+        .file-upload-card.file-selected .upload-card-icon {
+            color: #166534;
+        }
+
+        .upload-card-text {
+            font-size: 0.85rem;
+            font-weight: 500;
+            color: #64748b;
+            word-break: break-all;
+            max-width: 100%;
+            padding: 0 4px;
+        }
+
+        .file-upload-card.file-selected .upload-card-text {
+            color: #166534;
+            font-weight: 600;
+        }
+    </style>
+    <!-- SweetAlert2 -->
+    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
+</head>
+
+<body>
+
+    <div class="main-container">
+
+        <!-- Header -->
+        <div class="page-header">
+            <h1 class="page-title">
+                <i class="fa-solid fa-cloud-arrow-up text-primary"></i>
+                Inward Register 
+            </h1>
+            <div class="header-actions" style="display: flex; align-items: center; gap: 16px; flex-wrap: wrap;">
+                <!-- User welcome badge -->
+                <div th:if="${isLoggedIn}" class="user-badge"
+                    style="background-color: #e2e8f0; padding: 8px 16px; border-radius: 20px; font-size: 0.9rem; font-weight: 600; color: #475569; display: flex; align-items: center; gap: 8px;">
+                    <i class="fa-solid fa-circle-user" style="color: #0f5c78; font-size: 1.1rem;"></i>
+                    <span th:text="${usrName}">User</span>
+                </div>
+
+                <a th:href="@{/gcctonermanagement/view}" class="btn-back">
+                    <i class="fa-solid fa-arrow-left"></i>
+                    Back to View Report
+                </a>
+
+                <!-- Logout link -->
+                <a th:if="${isLoggedIn}" th:href="@{/gcctonermanagement/logout}" class="btn-logout-link"
+                    style="color: #ef4444; font-weight: 600; font-size: 0.95rem; text-decoration: none; display: flex; align-items: center; gap: 6px; transition: color 0.2s ease;"
+                    onmouseover="this.style.color='#b91c1c'" onmouseout="this.style.color='#ef4444'">
+                    <i class="fa-solid fa-right-from-bracket"></i>
+                    Logout
+                </a>
+            </div>
+        </div>
+
+        <!-- Upload Card -->
+        <div class="upload-card">
+            <form id="upload-form" onsubmit="handleUpload(event)">
+
+                <!-- Company Name -->
+                <div class="form-group mb-4">
+                    <label class="form-label" for="company-name-input">
+                        <i class="fa-solid fa-building me-1 text-primary"></i> Company Name *
+                    </label>
+                    <input type="text" id="company-name-input" required class="form-control-custom"
+                        placeholder="Enter company name" maxlength="30">
+                </div>
+
+                <!-- Printer Model Dropdown -->
+                <div class="form-group mb-4">
+                    <label class="form-label" for="printer-select">
+                        <i class="fa-solid fa-print me-1 text-primary"></i> Printer Model *
+                    </label>
+                    <select id="printer-select" required class="form-control-custom" onchange="onPrinterChange()">
+                        <option value="">-- Select Printer Model --</option>
+                    </select>
+                </div>
+
+                <!-- Toner Model Dropdown -->
+                <div class="form-group mb-4">
+                    <label class="form-label" for="toner-select">
+                        <i class="fa-solid fa-droplet me-1 text-primary"></i> Toner Model *
+                    </label>
+                    <select id="toner-select" required class="form-control-custom" disabled>
+                        <option value="">-- Select Toner Model --</option>
+                    </select>
+                </div>
+
+                <!-- Quantity -->
+                <div class="form-group mb-4">
+                    <label class="form-label" for="qty-input">
+                        <i class="fa-solid fa-list-ol me-1 text-primary"></i> Quantity *
+                    </label>
+                    <input type="number" id="qty-input" required class="form-control-custom"
+                        placeholder="Enter quantity" min="1" step="1">
+                </div>
+
+                <!-- File Upload Options (DC, User Request, Final Delivered) -->
+                <div class="row">
+                    <!-- DC Upload -->
+                    <div class="col-md-4 form-group mb-4">
+                        <label class="form-label">
+                            <i class="fa-solid fa-file-pdf me-1 text-danger"></i> Delivery Challan (DC)
+                        </label>
+                        <div class="file-upload-card" onclick="document.getElementById('dc-file').click()">
+                            <i class="fa-solid fa-cloud-arrow-up upload-card-icon"></i>
+                            <span class="upload-card-text" id="dc-file-label">Choose PDF</span>
+                            <input type="file" id="dc-file" accept=".pdf" class="d-none"
+                                onchange="handleFileSelect(this, 'dc-file-label')">
+                        </div>
+                    </div>
+
+                    <!-- User Request Upload -->
+                    <!-- <div class="col-md-4 form-group mb-4">
+                        <label class="form-label">
+                            <i class="fa-solid fa-file-pdf me-1 text-danger"></i> User Request
+                        </label>
+                        <div class="file-upload-card" onclick="document.getElementById('ur-file').click()">
+                            <i class="fa-solid fa-cloud-arrow-up upload-card-icon"></i>
+                            <span class="upload-card-text" id="ur-file-label">Choose PDF</span>
+                            <input type="file" id="ur-file" accept=".pdf" class="d-none"
+                                onchange="handleFileSelect(this, 'ur-file-label')">
+                        </div>
+                    </div> -->
+
+                    <!-- Final Delivered Upload -->
+                    <!-- <div class="col-md-4 form-group mb-4">
+                        <label class="form-label">
+                            <i class="fa-solid fa-file-pdf me-1 text-danger"></i> Final Delivered Document
+                        </label>
+                        <div class="file-upload-card" onclick="document.getElementById('fd-file').click()">
+                            <i class="fa-solid fa-cloud-arrow-up upload-card-icon"></i>
+                            <span class="upload-card-text" id="fd-file-label">Choose PDF</span>
+                            <input type="file" id="fd-file" accept=".pdf" class="d-none"
+                                onchange="handleFileSelect(this, 'fd-file-label')">
+                        </div>
+                    </div> -->
+                </div>
+
+                <!-- Progress Bar -->
+                <div class="progress-container mb-4" id="progress-container">
+                    <div class="progress-text">
+                        <span id="upload-status">Saving details...</span>
+                        <span id="progress-percent">0%</span>
+                    </div>
+                    <div class="progress-bar-wrapper">
+                        <div class="progress-bar-fill" id="progress-fill"></div>
+                    </div>
+                </div>
+
+                <!-- Submit Button -->
+                <button type="submit" class="btn-submit-upload mt-3" id="submit-btn">
+                    <i class="fa-solid fa-paper-plane"></i> Save & Upload Details
+                </button>
+            </form>
+        </div>
+
+    </div>
+
+    <!-- Footer Fragment -->
+    <th:block th:replace="~{fragments/footer :: footer}"></th:block>
+
+    <script th:inline="javascript">
+        const contextPath = /*[[@{/}]]*/ '';
+
+        document.addEventListener('DOMContentLoaded', () => {
+            loadPrinters();
+        });
+
+        function loadPrinters() {
+            fetch(contextPath + 'gcctonermanagement/api/printers')
+                .then(res => res.json())
+                .then(printers => {
+                    const select = document.getElementById('printer-select');
+                    select.innerHTML = '<option value="">-- Select Printer Model --</option>';
+                    printers.forEach(p => {
+                        const opt = document.createElement('option');
+                        opt.value = p.id;
+                        opt.textContent = p.printer_name;
+                        select.appendChild(opt);
+                    });
+                })
+                .catch(err => {
+                    console.error("Error loading printers:", err);
+                    showNotification('error', 'Error', 'Failed to load printers.');
+                });
+        }
+
+        function onPrinterChange() {
+            const pid = document.getElementById('printer-select').value;
+            const tonerSelect = document.getElementById('toner-select');
+
+            tonerSelect.innerHTML = '<option value="">-- Select Toner Model --</option>';
+            tonerSelect.disabled = true;
+
+            if (!pid) return;
+
+            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;
+                    } else {
+                        const opt = document.createElement('option');
+                        opt.value = "";
+                        opt.textContent = "-- No Toners Available --";
+                        tonerSelect.appendChild(opt);
+                    }
+                })
+                .catch(err => {
+                    console.error("Error loading toners:", err);
+                    showNotification('error', 'Error', 'Failed to load toner models.');
+                });
+        }
+
+        function handleFileSelect(input, labelId) {
+            const label = document.getElementById(labelId);
+            const card = input.parentElement;
+
+            if (input.files && input.files.length > 0) {
+                const file = input.files[0];
+                if (!file.name.toLowerCase().endsWith('.pdf')) {
+                    showNotification('warning', 'Invalid File Type', 'Please select a PDF file.');
+                    input.value = '';
+                    card.classList.remove('file-selected');
+                    label.textContent = 'Choose PDF';
+                    return;
+                }
+                card.classList.add('file-selected');
+                label.textContent = file.name;
+            } else {
+                card.classList.remove('file-selected');
+                label.textContent = 'Choose PDF';
+            }
+        }
+
+        function showNotification(icon, title, text) {
+            if (typeof Swal !== 'undefined') {
+                Swal.fire({
+                    icon: icon,
+                    title: title,
+                    text: text,
+                    confirmButtonColor: '#0f5c78'
+                });
+            } else {
+                alert(title + ": " + text);
+            }
+        }
+
+        function handleUpload(event) {
+            event.preventDefault();
+
+            const companyName = document.getElementById('company-name-input').value.trim();
+            const pid = document.getElementById('printer-select').value;
+            const tid = document.getElementById('toner-select').value;
+            const qty = document.getElementById('qty-input').value.trim();
+
+            if (!companyName || !pid || !tid || !qty) {
+                showNotification('warning', 'Incomplete Form', 'Please fill in all required fields.');
+                return;
+            }
+
+            const dcInput = document.getElementById('dc-file');
+            const urInput = document.getElementById('ur-file');
+            const fdInput = document.getElementById('fd-file');
+
+            const formData = new FormData();
+            formData.append('companyName', companyName);
+            formData.append('pid', pid);
+            formData.append('tid', tid);
+            formData.append('qty', qty);
+
+            if (dcInput.files.length > 0) formData.append('dcFile', dcInput.files[0]);
+            if (urInput.files.length > 0) formData.append('userRequestFile', urInput.files[0]);
+            if (fdInput.files.length > 0) formData.append('finalDeliveredFile', fdInput.files[0]);
+
+            // CSRF security token
+            const csrfMeta = document.querySelector('meta[name="_csrf"]');
+            const csrfHeaderMeta = document.querySelector('meta[name="_csrf_header"]');
+
+            const xhr = new XMLHttpRequest();
+            xhr.open('POST', contextPath + 'gcctonermanagement/api/upload', true);
+
+            if (csrfMeta && csrfHeaderMeta) {
+                xhr.setRequestHeader(csrfHeaderMeta.content, csrfMeta.content);
+            }
+
+            // Show progress elements
+            const progressContainer = document.getElementById('progress-container');
+            const progressFill = document.getElementById('progress-fill');
+            const progressPercent = document.getElementById('progress-percent');
+            const submitBtn = document.getElementById('submit-btn');
+
+            progressContainer.style.display = 'block';
+            submitBtn.disabled = true;
+
+            xhr.upload.addEventListener('progress', (e) => {
+                if (e.lengthComputable) {
+                    const percent = Math.round((e.loaded / e.total) * 100);
+                    progressFill.style.width = percent + '%';
+                    progressPercent.textContent = percent + '%';
+                }
+            });
+
+            xhr.onload = function () {
+                if (xhr.status === 200) {
+                    try {
+                        const response = JSON.parse(xhr.responseText);
+                        if (response.success) {
+                            if (typeof Swal !== 'undefined') {
+                                Swal.fire({
+                                    title: 'Success!',
+                                    text: response.message || "Details saved successfully!",
+                                    icon: 'success',
+                                    confirmButtonColor: '#0f5c78'
+                                }).then(() => {
+                                    document.getElementById('upload-form').reset();
+                                    resetFileCards();
+                                });
+                            } else {
+                                alert("Success: " + (response.message || "Details saved successfully!"));
+                                document.getElementById('upload-form').reset();
+                                resetFileCards();
+                            }
+                        } else {
+                            showNotification('error', 'Upload Failed', response.error || "Failed to record toner details.");
+                        }
+                    } catch (e) {
+                        showNotification('error', 'Error', 'Failed to parse response: ' + e.message);
+                    }
+                } else {
+                    showNotification('error', 'Error', "An error occurred. HTTP Code: " + xhr.status);
+                }
+                progressContainer.style.display = 'none';
+                submitBtn.disabled = false;
+            };
+
+            xhr.onerror = function () {
+                showNotification('error', 'Error', "Connection error occurred during submission.");
+                progressContainer.style.display = 'none';
+                submitBtn.disabled = false;
+            };
+
+            xhr.send(formData);
+        }
+
+        function resetFileCards() {
+            const labels = ['dc-file-label', 'ur-file-label', 'fd-file-label'];
+            labels.forEach(lblId => {
+                document.getElementById(lblId).textContent = 'Choose PDF';
+            });
+            const cards = document.querySelectorAll('.file-upload-card');
+            cards.forEach(card => {
+                card.classList.remove('file-selected');
+            });
+            document.getElementById('toner-select').disabled = true;
+        }
+    </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/src/main/resources/templates/home/home.html b/src/main/resources/templates/home/home.html
index 2ef3b44..8d3312a 100644
--- a/src/main/resources/templates/home/home.html
+++ b/src/main/resources/templates/home/home.html
@@ -3,7 +3,7 @@
 
 <head>
 	<script th:inline="javascript">
-		(function() {
+		(function () {
 			const currentUser = /*[[${session.usrName}]]*/ null;
 			if (currentUser && sessionStorage.getItem("usrName") !== currentUser) {
 				window.location.replace(/*[[@{/login}]]*/ '/login');
@@ -179,7 +179,7 @@
 						</button>
 					</div>
 
-					<p class="text-muted" style="font-size: 0.95rem;">Count-wise summary of contracted manpower and
+					<p class="text-muted" style="font-size: 0.95rem;">Count-wise summary of contract manpower and
 						registered active employees.</p>
 				</div>
 
@@ -204,7 +204,7 @@
 							<i class="fa-solid fa-file-signature"></i>
 						</div>
 						<div class="summary-details">
-							<h4 class="summary-title">Total Contracted Manpower</h4>
+							<h4 class="summary-title">Total Contract Manpower</h4>
 							<p class="summary-value" id="stat-total-contracted" th:attr="data-init=${totalTenderCount}"
 								th:text="${totalTenderCount != null ? totalTenderCount : '0'}">0
 							</p>
@@ -333,7 +333,7 @@
 	<!-- Employee Details Modal -->
 	<div class="modal fade" id="employeeDetailsModal" tabindex="-1" aria-labelledby="employeeDetailsModalLabel"
 		aria-hidden="true">
-		<div class="modal-dialog modal-xl modal-dialog-centered">
+		<div class="modal-dialog modal-xl modal-dialog-centered" style="max-width: 95%; width: 95%;">
 			<div class="modal-content"
 				style="border-radius: 14px; border: none; box-shadow: 0 10px 40px rgba(0,0,0,0.2);">
 				<div class="modal-custom-header">
@@ -353,7 +353,7 @@
 								placeholder="Search employees by name, designation, location, code..."
 								oninput="filterEmployees()">
 						</div>
-						<div class="d-flex align-items-center gap-2 w-100 w-md-auto justify-content-md-end">
+						<div class="d-flex flex-wrap align-items-center gap-2 w-100 w-md-auto justify-content-md-end">
 							<!-- Work Order PDF Link -->
 							<a id="modal-workorder-file-link" href="#" target="_blank"
 								class="btn btn-danger text-nowrap align-items-center justify-content-center gap-2"
@@ -361,6 +361,26 @@
 								<i class="fa-solid fa-file-pdf"></i> Work Order File
 							</a>
 
+							<div class="d-flex flex-wrap align-items-center gap-2">
+								<input type="text" id="modal-from-date" class="form-control form-control-sm"
+									placeholder="Joined From"
+									style="height: 44px; border-radius: 8px; border: 1px solid #cbd5e1; font-weight: 600; width: 140px; padding: 0 12px;">
+								<span class="text-secondary fw-bold">to</span>
+								<input type="text" id="modal-to-date" class="form-control form-control-sm"
+									placeholder="Joined To"
+									style="height: 44px; border-radius: 8px; border: 1px solid #cbd5e1; font-weight: 600; width: 140px; padding: 0 12px;">
+
+								<button type="button" id="btn-modal-date-search" onclick="filterEmployees()"
+									style="height: 44px; border-radius: 8px; font-weight: 600; padding: 0 15px; background-color: #0f5c78; border-color: #0f5c78; color: white; border: none; display: flex; align-items: center; justify-content: center; gap: 5px;">
+									Search <i class="fa-solid fa-magnifying-glass"></i>
+								</button>
+
+								<button type="button" id="btn-modal-date-reset" onclick="resetModalDates()"
+									style="height: 44px; border-radius: 8px; font-weight: 600; padding: 0 15px; background-color: #e2e8f0; border-color: #cbd5e1; color: #475569; border: 1px solid #cbd5e1; display: flex; align-items: center; justify-content: center; gap: 5px;">
+									Reset <i class="fa-solid fa-rotate-right"></i>
+								</button>
+							</div>
+
 							<select id="modal-designation-filter" class="form-select form-select-sm"
 								style="height: 44px; border-radius: 8px; border: 1px solid #cbd5e1; padding: 0 35px 0 15px; font-weight: 600; min-width: 200px;"
 								onchange="filterEmployees()">
@@ -380,14 +400,22 @@
 									<th style="width: 60px;" class="text-center">S.No</th>
 									<th>Emp Code</th>
 									<th>Name</th>
+									<th>Designation</th>
+									<th style="cursor: pointer; user-select: none;"
+										onclick="sortEmployeesBy('vendor_name')">Vendor Name <i
+											class="fa-solid fa-sort ms-1 text-muted" id="sort-icon-vendor_name"></i>
+									</th>
 									<th>Email</th>
 									<th>Mobile</th>
-									<th>User Type</th>
-									<th>Designation</th>
-									<th class="text-center" style="width: 150px;">Last Updated On</th>
-									<th class="text-center" style="width: 130px;">Last Updated By</th>
+									<th style="cursor: pointer; user-select: none;" class="text-center"
+										onclick="sortEmployeesBy('joined_date')">Joined Date <i
+											class="fa-solid fa-sort ms-1 text-muted" id="sort-icon-joined_date"></i>
+									</th>
+									<th style="width: 150px; cursor: pointer; user-select: none;" class="text-center"
+										onclick="sortEmployeesBy('updated_at')">Last Updated On <i
+											class="fa-solid fa-sort ms-1 text-muted" id="sort-icon-updated_at"></i></th>
+									<th style="width: 130px;" class="text-center">Last Updated By</th>
 									<th>Location</th>
-									<th>Vendor Name</th>
 									<th th:if="${isAdmin}" style="width: 80px;" class="text-center">Actions</th>
 								</tr>
 							</thead>
@@ -554,7 +582,7 @@
 				style="border-radius: 14px; border: none; box-shadow: 0 10px 40px rgba(0,0,0,0.2);">
 				<div class="modal-custom-header" style="background-color: #0f5c78;">
 					<h5 class="modal-custom-title" id="tenderSummaryModalLabel">
-						<i class="fa-solid fa-file-signature"></i> Vendor Contracted Manpower Summary
+						<i class="fa-solid fa-file-signature"></i> Vendor Contract Manpower Summary
 					</h5>
 					<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
 						aria-label="Close"></button>
@@ -579,7 +607,7 @@
 								<tr>
 									<th style="width: 60px;" class="text-center">S.No</th>
 									<th>Vendor Name</th>
-									<th class="text-center">Contracted Manpower</th>
+									<th class="text-center">Contract Manpower</th>
 								</tr>
 							</thead>
 							<tbody id="modal-tender-summary-tbody">
@@ -1172,19 +1200,20 @@
 									<th style="width: 60px;" class="text-center">S.No</th>
 									<th>Emp Code</th>
 									<th>Name</th>
+									<th>Designation</th>
+									<th>Vendor Name</th>
 									<th>Email</th>
 									<th>Mobile</th>
-									<th>User Type</th>
-									<th>Designation</th>
+									<th class="text-center">Joined Date</th>
+									<th class="text-center">Active Date</th>
 									<th>Location</th>
-									<th>Vendor Name</th>
 									<th class="text-center">Status</th>
 									<th style="width: 100px;" class="text-center">Action</th>
 								</tr>
 							</thead>
 							<tbody id="delete-modal-employee-tbody">
 								<tr>
-									<td colspan="11" class="text-center py-5 text-secondary">
+									<td colspan="12" class="text-center py-5 text-secondary">
 										<i class="fa-solid fa-users fs-2 mb-2"></i>
 										<p class="mb-0 fw-semibold">Please select a Vendor and Work Order to list
 											employees.</p>
@@ -1252,7 +1281,7 @@
 	<!-- Deleted Employees Modal -->
 	<div class="modal fade" id="deletedEmployeesModal" tabindex="-1" aria-labelledby="deletedEmployeesModalLabel"
 		aria-hidden="true">
-		<div class="modal-dialog modal-xl modal-dialog-centered">
+		<div class="modal-dialog modal-xl modal-dialog-centered" style="max-width: 95%; width: 95%;">
 			<div class="modal-content"
 				style="border-radius: 14px; border: none; box-shadow: 0 10px 40px rgba(0,0,0,0.2);">
 				<div class="modal-custom-header" style="background-color: #2c3e50;">
@@ -1286,13 +1315,29 @@
 									<th style="width: 60px;" class="text-center">S.No</th>
 									<th>Emp Code</th>
 									<th>Name</th>
+									<th>Designation</th>
+									<th style="cursor: pointer; user-select: none;"
+										onclick="sortDeletedEmployeesBy('vendor_name')">Vendor Name <i
+											class="fa-solid fa-sort ms-1 text-muted"
+											id="deleted-sort-icon-vendor_name"></i>
+									</th>
 									<th>Email</th>
 									<th>Mobile</th>
-									<th>User Type</th>
-									<th>Designation</th>
+									<th style="cursor: pointer; user-select: none;" class="text-center"
+										onclick="sortDeletedEmployeesBy('joined_date')">Joined Date <i
+											class="fa-solid fa-sort ms-1 text-muted"
+											id="deleted-sort-icon-joined_date"></i>
+									</th>
+									<th style="cursor: pointer; user-select: none;" class="text-center"
+										onclick="sortDeletedEmployeesBy('active_date')">Active Date <i
+											class="fa-solid fa-sort ms-1 text-muted"
+											id="deleted-sort-icon-active_date"></i>
+									</th>
 									<th>Location</th>
-									<th>Vendor Name</th>
-									<th class="text-center" style="width: 150px;">Last Updated On</th>
+									<th style="width: 150px; cursor: pointer; user-select: none;" class="text-center"
+										onclick="sortDeletedEmployeesBy('updated_at')">Last Updated On <i
+											class="fa-solid fa-sort ms-1 text-muted"
+											id="deleted-sort-icon-updated_at"></i></th>
 									<th class="text-center" style="width: 130px;">Last Updated By</th>
 									<th class="text-center" style="width: 120px;">Status</th>
 								</tr>
@@ -1311,6 +1356,110 @@
 		</div>
 	</div>
 
+	<!-- Position History Modal -->
+	<div class="modal fade" id="positionHistoryModal" tabindex="-1" aria-labelledby="positionHistoryModalLabel"
+		aria-hidden="true">
+		<div class="modal-dialog modal-xl modal-dialog-centered" style="max-width: 95%; width: 95%;">
+			<div class="modal-content"
+				style="border-radius: 14px; border: none; box-shadow: 0 10px 40px rgba(0,0,0,0.2);">
+				<div class="modal-custom-header"
+					style="background-color: #0f5c78; color: white; display: flex; align-items: center; justify-content: space-between; padding: 15px 25px; border-top-left-radius: 14px; border-top-right-radius: 14px;">
+					<h5 class="modal-custom-title m-0" id="positionHistoryModalLabel"
+						style="font-weight: 700; font-size: 1.25rem;">
+						<i class="fa-solid fa-clock-rotate-left me-2"></i> Work Order Position History
+					</h5>
+					<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"
+						style="filter: invert(1) grayscale(1) brightness(2);"></button>
+				</div>
+				<div class="modal-body" style="padding: 25px;">
+					<!-- Selection Filters Toolbar -->
+					<div class="row g-3 mb-4 align-items-end">
+						<!-- Vendor Selector -->
+						<div class="col-md-3">
+							<label for="history-modal-vendor-select" class="form-label fw-semibold text-secondary"
+								style="font-size: 0.9rem;">Associated Vendor</label>
+							<select class="form-select w-100" id="history-modal-vendor-select"
+								onchange="onHistoryModalVendorChange()"
+								style="border-radius: 8px; height: 44px; font-weight: 600; border: 1px solid #cbd5e1;">
+								<option value="">-- Select Vendor --</option>
+								<option th:each="vendor : ${vendorDetails}" th:value="${vendor.id}"
+									th:text="${vendor.vendor_name}"></option>
+							</select>
+						</div>
+						<!-- Work Order Selector -->
+						<div class="col-md-4">
+							<label for="history-modal-workorder-select" class="form-label fw-semibold text-secondary"
+								style="font-size: 0.9rem;">Work Order (File No)</label>
+							<select class="form-select w-100" id="history-modal-workorder-select"
+								onchange="renderPositionHistoryTable()"
+								style="border-radius: 8px; height: 44px; font-weight: 600; border: 1px solid #cbd5e1;">
+								<option value="">-- Select Work Order --</option>
+							</select>
+						</div>
+						<!-- Search Box -->
+						<div class="col-md-3">
+							<label for="history-employee-search-input" class="form-label fw-semibold text-secondary"
+								style="font-size: 0.9rem;">Filter Table</label>
+							<div style="position: relative; width: 100%;">
+								<i class="fa-solid fa-magnifying-glass"
+									style="position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: #94a3b8;"></i>
+								<input type="text" id="history-employee-search-input" class="form-control"
+									placeholder="Search name, designation, code..." oninput="filterPositionHistory()"
+									style="border-radius: 8px; height: 44px; padding-left: 40px; border: 1px solid #cbd5e1; font-weight: 600;">
+							</div>
+						</div>
+						<!-- Export Button -->
+						<div class="col-md-2 text-end">
+							<button class="btn text-nowrap w-100" onclick="exportPositionHistoryToCSV()"
+								style="background-color: #0f5c78; color: white; height: 44px; border-radius: 8px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: none; transition: all 0.2s;">
+								<i class="fa-solid fa-file-csv fs-5"></i> Export to CSV
+							</button>
+						</div>
+					</div>
+
+					<!-- Table of Position Assignments -->
+					<div class="table-responsive"
+						style="max-height: 450px; border: 1px solid #eef2f6; border-radius: 8px; overflow-y: auto;">
+						<table class="table table-hover modal-table" id="history-employee-table"
+							style="vertical-align: middle;">
+							<thead style="position: sticky; top: 0; z-index: 5; background-color: #eef7fa;">
+								<tr style="border-bottom: 2px solid #0f5c78;">
+									<th style="width: 60px; background-color: #eef7fa; color: #0f5c78; font-weight: 700;"
+										class="text-center">S.No</th>
+									<th style="background-color: #eef7fa; color: #0f5c78; font-weight: 700;">Designation
+									</th>
+									<th style="width: 140px; background-color: #eef7fa; color: #0f5c78; font-weight: 700;"
+										class="text-center">Quota Required</th>
+									<th style="width: 120px; background-color: #eef7fa; color: #0f5c78; font-weight: 700;"
+										class="text-center">Slot</th>
+									<th style="background-color: #eef7fa; color: #0f5c78; font-weight: 700;">Current
+										Employee (Active)</th>
+									<th style="background-color: #eef7fa; color: #0f5c78; font-weight: 700;">Previous
+										Employee (Deleted)</th>
+									<th style="width: 180px; background-color: #eef7fa; color: #0f5c78; font-weight: 700;"
+										class="text-center">Position Status</th>
+								</tr>
+							</thead>
+							<tbody id="position-history-tbody">
+								<tr>
+									<td colspan="7" class="text-center py-5 text-secondary">
+										<i class="fa-solid fa-circle-info fs-2 mb-2 text-primary"></i>
+										<p class="mb-0 fw-semibold">Please select a Vendor and a Work Order to display
+											position history.</p>
+									</td>
+								</tr>
+							</tbody>
+						</table>
+						<div id="no-history-found" class="text-center text-muted py-5" style="display: none;">
+							<i class="fa-solid fa-users-slash fs-1 mb-3 text-secondary"></i>
+							<p class="fw-bold mb-0">No matching designations or assignments found.</p>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+
 	<!-- Deleted Work Orders Modal -->
 	<div class="modal fade" id="deletedWorkOrdersModal" tabindex="-1" aria-labelledby="deletedWorkOrdersModalLabel"
 		aria-hidden="true">
@@ -1585,12 +1734,12 @@
 				let cardOnRollCount = 0;
 
 				vendorEmployees.forEach(emp => {
-					const empCdateNum = getDateNumber(emp.cdate);
+					const empJoinedDateNum = getDateNumber(emp.joined_date);
 					let matches = true;
-					if (fromDateNum && (!empCdateNum || empCdateNum < fromDateNum)) {
+					if (fromDateNum && (!empJoinedDateNum || empJoinedDateNum < fromDateNum)) {
 						matches = false;
 					}
-					if (toDateNum && (!empCdateNum || empCdateNum > toDateNum)) {
+					if (toDateNum && (!empJoinedDateNum || empJoinedDateNum > toDateNum)) {
 						matches = false;
 					}
 					if (matches) {
@@ -1743,6 +1892,8 @@
 		let currentVendorEmployees = [];
 		let filteredVendorEmployees = [];
 		let currentDesignationFilter = null;
+		let currentSortKey = "";
+		let currentSortOrder = "asc";
 
 		// Globals to store current summary modal states
 		let currentVacancies = [];
@@ -1832,6 +1983,7 @@
 			});
 
 			const groupedList = Object.values(grouped);
+			groupedList.sort((a, b) => a.vendor_name.localeCompare(b.vendor_name));
 			let totalVacant = 0;
 
 			groupedList.forEach((group, index) => {
@@ -1969,6 +2121,7 @@
 				}
 			});
 
+			currentTenderSummaries.sort((a, b) => a.vendor_name.localeCompare(b.vendor_name));
 			filteredTenderSummaries = [...currentTenderSummaries];
 			document.getElementById("tender-summary-search-input").value = "";
 			renderTenderSummaryTable(filteredTenderSummaries);
@@ -2035,7 +2188,7 @@
 				return;
 			}
 			let csvContent = "data:text/csv;charset=utf-8,";
-			csvContent += "S.No,Vendor Name,Contracted Manpower\n";
+			csvContent += "S.No,Vendor Name,Contract Manpower\n";
 
 			filteredTenderSummaries.forEach((item, index) => {
 				const row = [
@@ -2049,7 +2202,7 @@
 			const encodedUri = encodeURI(csvContent);
 			const link = document.createElement("a");
 			link.setAttribute("href", encodedUri);
-			link.setAttribute("download", "vendor_contracted_manpower_summary.csv");
+			link.setAttribute("download", "vendor_contract_manpower_summary.csv");
 			document.body.appendChild(link);
 			link.click();
 			document.body.removeChild(link);
@@ -2094,6 +2247,7 @@
 				});
 			});
 
+			currentVendorSummaries.sort((a, b) => a.vendor_name.localeCompare(b.vendor_name));
 			filteredVendorSummaries = [...currentVendorSummaries];
 			document.getElementById("vendor-summary-search-input").value = "";
 			renderVendorSummaryTable(filteredVendorSummaries);
@@ -2405,6 +2559,25 @@
 			document.getElementById("no-employees-found").style.display = "none";
 			document.getElementById("employee-search-input").value = "";
 
+			const mainFrom = document.getElementById("from-date").value;
+			const mainTo = document.getElementById("to-date").value;
+			const modalFromEl = document.getElementById("modal-from-date");
+			const modalToEl = document.getElementById("modal-to-date");
+			if (modalFromEl && modalFromEl._flatpickr) {
+				modalFromEl._flatpickr.setDate(mainFrom || "");
+			} else if (modalFromEl) {
+				modalFromEl.value = mainFrom;
+			}
+			if (modalToEl && modalToEl._flatpickr) {
+				modalToEl._flatpickr.setDate(mainTo || "");
+			} else if (modalToEl) {
+				modalToEl.value = mainTo;
+			}
+
+			currentSortKey = "";
+			currentSortOrder = "asc";
+			updateSortIcons();
+
 			// Show Modal using Bootstrap
 			const modalElement = document.getElementById("employeeDetailsModal");
 			const modal = bootstrap.Modal.getOrCreateInstance(modalElement);
@@ -2460,6 +2633,25 @@
 			document.getElementById("no-employees-found").style.display = "none";
 			document.getElementById("employee-search-input").value = "";
 
+			const mainFrom = document.getElementById("from-date").value;
+			const mainTo = document.getElementById("to-date").value;
+			const modalFromEl = document.getElementById("modal-from-date");
+			const modalToEl = document.getElementById("modal-to-date");
+			if (modalFromEl && modalFromEl._flatpickr) {
+				modalFromEl._flatpickr.setDate(mainFrom || "");
+			} else if (modalFromEl) {
+				modalFromEl.value = mainFrom;
+			}
+			if (modalToEl && modalToEl._flatpickr) {
+				modalToEl._flatpickr.setDate(mainTo || "");
+			} else if (modalToEl) {
+				modalToEl.value = mainTo;
+			}
+
+			currentSortKey = "";
+			currentSortOrder = "asc";
+			updateSortIcons();
+
 			const modalElement = document.getElementById("employeeDetailsModal");
 			const modal = bootstrap.Modal.getOrCreateInstance(modalElement);
 			modal.show();
@@ -2525,14 +2717,14 @@
 					<td class="text-center fw-bold text-secondary">${index + 1}</td>
 					<td class="fw-semibold text-primary">${escapeHtml(emp.emp_code || '-')}</td>
 					<td class="fw-bold text-dark">${escapeHtml(emp.name || '-')}</td>
+					<td class="fw-semibold">${escapeHtml(emp.designation || '-')}</td>
+					<td class="fw-semibold text-secondary">${escapeHtml(emp.vendor_name || '-')}</td>
 					<td>${escapeHtml(emp.email || '-')}</td>
 					<td>${escapeHtml(emp.mobile || '-')}</td>
-					<td><span class="badge bg-secondary">${escapeHtml(emp.user_type || '-')}</span></td> 
-					<td class="fw-semibold">${escapeHtml(emp.designation || '-')}</td>
+					<td class="text-center fw-semibold text-primary">${escapeHtml(calculateTenure(emp.joined_date))}</td>
 					<td class="text-center fw-semibold text-primary">${escapeHtml(formatDateTime(emp.updated_at || emp.cdate))}</td>
 					<td class="text-center fw-semibold text-secondary">${escapeHtml(emp.updated_by_name || '-')}</td>
 					<td><span class="badge bg-light text-dark border">${escapeHtml(emp.location || '-')}</span></td>
-					<td class="fw-semibold text-secondary">${escapeHtml(emp.vendor_name || '-')}</td>
 					${actionTd}
 				`;
 				tbody.appendChild(tr);
@@ -2547,17 +2739,17 @@
 			let list = currentVendorEmployees;
 
 			// Apply date range filter if active
-			const fromDateVal = document.getElementById("from-date").value;
-			const toDateVal = document.getElementById("to-date").value;
+			const fromDateVal = document.getElementById("modal-from-date").value;
+			const toDateVal = document.getElementById("modal-to-date").value;
 			const fromDateNum = getDateNumber(fromDateVal);
 			const toDateNum = getDateNumber(toDateVal);
 
 			if (fromDateNum || toDateNum) {
 				list = list.filter(emp => {
-					const empCdateNum = getDateNumber(emp.cdate);
-					if (!empCdateNum) return false;
-					if (fromDateNum && empCdateNum < fromDateNum) return false;
-					if (toDateNum && empCdateNum > toDateNum) return false;
+					const empJoinedDateNum = getDateNumber(emp.joined_date);
+					if (!empJoinedDateNum) return false;
+					if (fromDateNum && empJoinedDateNum < fromDateNum) return false;
+					if (toDateNum && empJoinedDateNum > toDateNum) return false;
 					return true;
 				});
 			}
@@ -2639,19 +2831,19 @@
 			}
 
 			let csvContent = "data:text/csv;charset=utf-8,";
-			csvContent += "S.No,Employee Code,Name,Email,Mobile,User Type,Designation,Location,Vendor Name\n";
+			csvContent += "S.No,Employee Code,Name,Designation,Vendor Name,Email,Mobile,Joined Date,Location\n";
 
 			filteredVendorEmployees.forEach((emp, index) => {
 				const row = [
 					index + 1,
 					`"${(emp.emp_code || '-').replace(/"/g, '""')}"`,
 					`"${(emp.name || '-').replace(/"/g, '""')}"`,
+					`"${(emp.designation || '-').replace(/"/g, '""')}"`,
+					`"${(emp.vendor_name || '-').replace(/"/g, '""')}"`,
 					`"${(emp.email || '-').replace(/"/g, '""')}"`,
 					`"${(emp.mobile || '-').replace(/"/g, '""')}"`,
-					`"${(emp.user_type || '-').replace(/"/g, '""')}"`,
-					`"${(emp.designation || '-').replace(/"/g, '""')}"`,
-					`"${(emp.location || '-').replace(/"/g, '""')}"`,
-					`"${(emp.vendor_name || '-').replace(/"/g, '""')}"`
+					`"${(calculateTenure(emp.joined_date) || '-').replace(/"/g, '""')}"`,
+					`"${(emp.location || '-').replace(/"/g, '""')}"`
 				];
 				csvContent += row.join(",") + "\n";
 			});
@@ -2686,6 +2878,237 @@
 			return `${day}/${month}/${year} ${hours}:${minutes}:${seconds}`;
 		}
 
+		// Helper function to calculate duration from joined date until today
+		function calculateTenure(joinedDateStr) {
+			if (!joinedDateStr || joinedDateStr === '-' || joinedDateStr.trim() === '') return '-';
+			try {
+				joinedDateStr = joinedDateStr.trim();
+				const datePart = joinedDateStr.substring(0, 10);
+				const parts = datePart.split('-');
+				if (parts.length !== 3) return datePart;
+
+				const year = parseInt(parts[0], 10);
+				const month = parseInt(parts[1], 10) - 1;
+				const day = parseInt(parts[2], 10);
+
+				const joinedDate = new Date(year, month, day);
+				if (isNaN(joinedDate.getTime())) return datePart;
+
+				const today = new Date();
+
+				let diffYears = today.getFullYear() - joinedDate.getFullYear();
+				let diffMonths = today.getMonth() - joinedDate.getMonth();
+				let diffDays = today.getDate() - joinedDate.getDate();
+
+				if (diffDays < 0) {
+					diffMonths--;
+					const prevMonth = new Date(today.getFullYear(), today.getMonth(), 0);
+					diffDays += prevMonth.getDate();
+				}
+				if (diffMonths < 0) {
+					diffYears--;
+					diffMonths += 12;
+				}
+
+				let durationStr = '';
+				if (diffYears > 0) {
+					durationStr += diffYears + (diffYears === 1 ? ' Year' : ' Years');
+				}
+				if (diffMonths > 0) {
+					if (durationStr) durationStr += ', ';
+					durationStr += diffMonths + (diffMonths === 1 ? ' Month' : ' Months');
+				}
+				if (diffYears === 0 && diffMonths === 0) {
+					durationStr += diffDays + (diffDays === 1 ? ' Day' : ' Days');
+				}
+
+				const formattedJoinedDate = `${String(day).padStart(2, '0')}/${String(month + 1).padStart(2, '0')}/${year}`;
+				return `${formattedJoinedDate}`;
+			} catch (e) {
+				return joinedDateStr.substring(0, 10);
+			}
+		}
+
+		// Helper function to calculate active date (joined - end/today) with days and months
+		function calculateActivePeriod(joinedDateStr, isDelete, updatedAtStr) {
+			if (!joinedDateStr || joinedDateStr === '-' || joinedDateStr.trim() === '') return '-';
+			try {
+				joinedDateStr = joinedDateStr.trim();
+				const datePart = joinedDateStr.substring(0, 10);
+				const parts = datePart.split('-');
+				if (parts.length !== 3) return datePart;
+
+				const year = parseInt(parts[0], 10);
+				const month = parseInt(parts[1], 10) - 1;
+				const day = parseInt(parts[2], 10);
+
+				const joinedDate = new Date(year, month, day);
+				if (isNaN(joinedDate.getTime())) return datePart;
+
+				let endDate = new Date();
+				if ((isDelete === 1 || isDelete === true || String(isDelete) === '1') && updatedAtStr && updatedAtStr !== '-') {
+					let tempEnd = new Date(updatedAtStr.replace('T', ' '));
+					if (isNaN(tempEnd.getTime())) {
+						tempEnd = new Date(updatedAtStr);
+					}
+					if (!isNaN(tempEnd.getTime())) {
+						endDate = tempEnd;
+					}
+				}
+
+				const formattedJoined = `${String(day).padStart(2, '0')}/${String(month + 1).padStart(2, '0')}/${year}`;
+				const formattedEnd = `${String(endDate.getDate()).padStart(2, '0')}/${String(endDate.getMonth() + 1).padStart(2, '0')}/${endDate.getFullYear()}`;
+
+				const d1 = new Date(joinedDate.getFullYear(), joinedDate.getMonth(), joinedDate.getDate());
+				const d2 = new Date(endDate.getFullYear(), endDate.getMonth(), endDate.getDate());
+				const msDiff = d2.getTime() - d1.getTime();
+
+				let days = 0;
+				if (msDiff > 0) {
+					days = Math.floor(msDiff / (1000 * 60 * 60 * 24));
+				}
+
+				let months = 0;
+				if (msDiff > 0) {
+					months = (endDate.getFullYear() - joinedDate.getFullYear()) * 12 + (endDate.getMonth() - joinedDate.getMonth());
+					if (endDate.getDate() < joinedDate.getDate()) {
+						months--;
+					}
+					if (months < 0) months = 0;
+				}
+
+				return `${formattedJoined} - ${formattedEnd} (${days} Days / ${months} Months)`;
+			} catch (e) {
+				return '-';
+			}
+		}
+
+		// Sorting Logic for Employee Details Modal Table
+		function sortEmployeesBy(key) {
+			if (currentSortKey === key) {
+				currentSortOrder = (currentSortOrder === "asc") ? "desc" : "asc";
+			} else {
+				currentSortKey = key;
+				currentSortOrder = "asc";
+			}
+
+			filteredVendorEmployees.sort((a, b) => {
+				let valA = getSortValue(a, key);
+				let valB = getSortValue(b, key);
+
+				if (valA === '-' || valA === null || valA === undefined) valA = '';
+				if (valB === '-' || valB === null || valB === undefined) valB = '';
+
+				if (key === 'joined_date' || key === 'updated_at') {
+					const dateA = new Date(valA);
+					const dateB = new Date(valB);
+					const timeA = isNaN(dateA.getTime()) ? 0 : dateA.getTime();
+					const timeB = isNaN(dateB.getTime()) ? 0 : dateB.getTime();
+					return (currentSortOrder === 'asc') ? (timeA - timeB) : (timeB - timeA);
+				}
+
+				if (key === 'active_days') {
+					const daysA = getActiveDaysNum(a.joined_date, a.isdelete, a.updated_at);
+					const daysB = getActiveDaysNum(b.joined_date, b.isdelete, b.updated_at);
+					return (currentSortOrder === 'asc') ? (daysA - daysB) : (daysB - daysA);
+				}
+
+				valA = String(valA).toLowerCase().trim();
+				valB = String(valB).toLowerCase().trim();
+
+				if (valA < valB) return (currentSortOrder === 'asc') ? -1 : 1;
+				if (valA > valB) return (currentSortOrder === 'asc') ? 1 : -1;
+				return 0;
+			});
+
+			renderEmployeeTable(filteredVendorEmployees);
+			updateSortIcons();
+		}
+
+		function getSortValue(emp, key) {
+			if (key === 'updated_at') {
+				return emp.updated_at || emp.cdate || '';
+			}
+			return emp[key] || '';
+		}
+
+		function getActiveDaysNum(joinedDateStr, isDelete, updatedAtStr) {
+			if (!joinedDateStr || joinedDateStr === '-' || joinedDateStr.trim() === '') return 0;
+			try {
+				const parts = joinedDateStr.substring(0, 10).split('-');
+				if (parts.length !== 3) return 0;
+				const year = parseInt(parts[0], 10);
+				const month = parseInt(parts[1], 10) - 1;
+				const day = parseInt(parts[2], 10);
+				const joinedDate = new Date(year, month, day);
+				if (isNaN(joinedDate.getTime())) return 0;
+
+				let endDate = new Date();
+				if ((isDelete === 1 || isDelete === true || String(isDelete) === '1') && updatedAtStr && updatedAtStr !== '-') {
+					let tempEnd = new Date(updatedAtStr.replace('T', ' '));
+					if (isNaN(tempEnd.getTime())) {
+						tempEnd = new Date(updatedAtStr);
+					}
+					if (!isNaN(tempEnd.getTime())) {
+						endDate = tempEnd;
+					}
+				}
+				const d1 = new Date(joinedDate.getFullYear(), joinedDate.getMonth(), joinedDate.getDate());
+				const d2 = new Date(endDate.getFullYear(), endDate.getMonth(), endDate.getDate());
+				return Math.max(0, Math.floor((d2.getTime() - d1.getTime()) / (1000 * 60 * 60 * 24)));
+			} catch (e) {
+				return 0;
+			}
+		}
+
+		function updateSortIcons() {
+			const keys = ['joined_date', 'updated_at', 'vendor_name'];
+			keys.forEach(key => {
+				const icon = document.getElementById(`sort-icon-${key}`);
+				if (!icon) return;
+
+				icon.className = "fa-solid ms-1";
+
+				if (currentSortKey === key) {
+					icon.classList.remove("text-muted");
+					if (currentSortOrder === "asc") {
+						icon.classList.add("fa-sort-up");
+						icon.style.color = "#0f5c78";
+					} else {
+						icon.classList.add("fa-sort-down");
+						icon.style.color = "#0f5c78";
+					}
+				} else {
+					icon.classList.add("fa-sort", "text-muted");
+					icon.style.color = "";
+				}
+			});
+		}
+
+		// Clear date inputs inside the modal and trigger reload/filtering
+		function resetModalDates() {
+			const modalFromEl = document.getElementById("modal-from-date");
+			const modalToEl = document.getElementById("modal-to-date");
+			if (modalFromEl && modalFromEl._flatpickr) {
+				modalFromEl._flatpickr.clear();
+			} else if (modalFromEl) {
+				modalFromEl.value = "";
+			}
+			if (modalToEl && modalToEl._flatpickr) {
+				modalToEl._flatpickr.clear();
+			} else if (modalToEl) {
+				modalToEl.value = "";
+			}
+
+			// Reset date pickers cross-constraints
+			if (modalFromEl && modalFromEl._flatpickr && modalToEl && modalToEl._flatpickr) {
+				modalFromEl._flatpickr.set('maxDate', null);
+				modalToEl._flatpickr.set('minDate', null);
+			}
+
+			filterEmployees();
+		}
+
 		// Helper function to safely escape HTML to prevent XSS
 		function escapeHtml(str) {
 			if (!str) return '';
@@ -3203,6 +3626,26 @@
 						}
 					}
 				});
+
+				let modalFromPicker, modalToPicker;
+				modalFromPicker = flatpickr("#modal-from-date", {
+					dateFormat: "d/m/Y",
+					allowInput: true,
+					onChange: function (selectedDates, dateStr, instance) {
+						if (modalToPicker) {
+							modalToPicker.set('minDate', dateStr);
+						}
+					}
+				});
+				modalToPicker = flatpickr("#modal-to-date", {
+					dateFormat: "d/m/Y",
+					allowInput: true,
+					onChange: function (selectedDates, dateStr, instance) {
+						if (modalFromPicker) {
+							modalFromPicker.set('maxDate', dateStr);
+						}
+					}
+				});
 			}
 
 			// Add Date range restrictors and change listeners
@@ -3284,6 +3727,12 @@
 				deletedWOModalEl.addEventListener("hidden.bs.modal", resetDeletedWorkOrdersModal);
 			}
 
+			const positionHistoryModalEl = document.getElementById("positionHistoryModal");
+			if (positionHistoryModalEl) {
+				positionHistoryModalEl.addEventListener("show.bs.modal", fetchAndShowPositionHistory);
+				positionHistoryModalEl.addEventListener("hidden.bs.modal", resetPositionHistoryModal);
+			}
+
 			// Initialize designation dropdown options on load
 			updateDesignationDropdown();
 			filterVendorCards();
@@ -3429,7 +3878,7 @@
 			noEmployeesEl.style.display = "none";
 			tbody.innerHTML = `
 				<tr>
-					<td colspan="11" class="text-center py-5 text-secondary">
+					<td colspan="12" class="text-center py-5 text-secondary">
 						<i class="fa-solid fa-users fs-2 mb-2"></i>
 						<p class="mb-0 fw-semibold">Please select a Vendor and Work Order to list employees, or search directly.</p>
 					</td>
@@ -3442,7 +3891,7 @@
 			const tbody = document.getElementById("delete-modal-employee-tbody");
 			tbody.innerHTML = `
 				<tr>
-					<td colspan="11" class="text-center py-5">
+					<td colspan="12" class="text-center py-5">
 						<div class="spinner-border text-primary" role="status" style="width: 2.5rem; height: 2.5rem;">
 							<span class="visually-hidden">Loading...</span>
 						</div>
@@ -3469,7 +3918,7 @@
 					console.error("Error fetching employees for delete modal:", err);
 					tbody.innerHTML = `
 						<tr>
-							<td colspan="11" class="text-center py-4 text-danger fw-bold">
+							<td colspan="12" class="text-center py-4 text-danger fw-bold">
 								<i class="fa-solid fa-circle-exclamation fs-3 mb-2"></i>
 								<p class="mb-0">Failed to fetch employee list from server.</p>
 							</td>
@@ -3565,14 +4014,15 @@
 					<td class="text-center fw-bold text-secondary">${index + 1}</td>
 					<td class="fw-semibold text-primary">${escapeHtml(emp.emp_code || '-')}</td>
 					<td class="fw-bold text-dark">${escapeHtml(emp.name || '-')}</td>
+					<td class="fw-semibold">${escapeHtml(emp.designation || '-')}</td>
+					<td class="fw-semibold text-secondary">${escapeHtml(emp.vendor_name || '-')}</td>
 					<td>${escapeHtml(emp.email || '-')}</td>
 					<td>${escapeHtml(emp.mobile || '-')}</td>
-					<td><span class="badge bg-secondary">${escapeHtml(emp.user_type || '-')}</span></td>
-					<td class="fw-semibold">${escapeHtml(emp.designation || '-')}</td>
+					<td class="text-center fw-semibold text-primary">${escapeHtml(calculateTenure(emp.joined_date))}</td>
+					<td class="text-center fw-semibold text-primary">${escapeHtml(calculateActivePeriod(emp.joined_date, emp.isdelete, emp.updated_at))}</td>
 					<td><span class="badge bg-light text-dark border">${escapeHtml(emp.location || '-')}</span></td>
-					<td class="fw-semibold text-secondary">${escapeHtml(emp.vendor_name || '-')}</td>
 					<td class="text-center">${statusBadge}</td>
-					<td class="text-center">${actionButton}</td>
+					<td class="text-center">${actionButton}</td> 
 				`;
 				tbody.appendChild(tr);
 			});
@@ -3964,12 +4414,14 @@
 		// Globals for Deleted Employees Modal
 		let deletedEmployeesList = [];
 		let filteredDeletedEmployeesList = [];
+		let deletedSortKey = "";
+		let deletedSortOrder = "asc";
 
 		function fetchAndShowDeletedEmployees() {
 			const tbody = document.getElementById("deleted-employee-tbody");
 			tbody.innerHTML = `
 				<tr>
-					<td colspan="10" class="text-center py-5">
+					<td colspan="13" class="text-center py-5">
 						<div class="spinner-border text-primary" role="status" style="width: 3rem; height: 3rem;">
 							<span class="visually-hidden">Loading...</span>
 						</div>
@@ -3991,7 +4443,7 @@
 					console.error("Error fetching deleted employees:", err);
 					tbody.innerHTML = `
 						<tr>
-							<td colspan="10" class="text-center py-5 text-danger fw-bold">
+							<td colspan="13" class="text-center py-5 text-danger fw-bold">
 								<i class="fa-solid fa-circle-exclamation fs-1 mb-2"></i>
 								<p>Failed to connect to server and fetch database records. Please try again.</p>
 							</td>
@@ -4040,12 +4492,13 @@
 					<td class="text-center fw-bold text-secondary">${index + 1}</td>
 					<td class="fw-semibold text-primary">${escapeHtml(emp.emp_code || '-')}</td>
 					<td class="fw-bold text-dark">${escapeHtml(emp.name || '-')}</td>
+					<td class="fw-semibold">${escapeHtml(emp.designation || '-')}</td>
+					<td class="fw-semibold text-secondary">${escapeHtml(emp.vendor_name || '-')}</td>
 					<td>${escapeHtml(emp.email || '-')}</td>
 					<td>${escapeHtml(emp.mobile || '-')}</td>
-					<td><span class="badge bg-secondary">${escapeHtml(emp.user_type || '-')}</span></td> 
-					<td class="fw-semibold">${escapeHtml(emp.designation || '-')}</td>
+					<td class="text-center fw-semibold text-primary">${escapeHtml(calculateTenure(emp.joined_date))}</td>
+					<td class="text-center fw-semibold text-primary">${escapeHtml(calculateActivePeriod(emp.joined_date, emp.isdelete, emp.updated_at))}</td>
 					<td><span class="badge bg-light text-dark border">${escapeHtml(emp.location || '-')}</span></td>
-					<td class="fw-semibold text-secondary">${escapeHtml(emp.vendor_name || '-')}</td>
 					<td class="text-center fw-semibold text-primary">${escapeHtml(formatDateTime(emp.updated_at || emp.cdate))}</td>
 					<td class="text-center fw-semibold text-secondary">${escapeHtml(emp.updated_by_name || '-')}</td>
 					<td class="text-center"><span class="badge bg-danger">Inactive</span></td>
@@ -4060,6 +4513,76 @@
 			document.getElementById("no-deleted-employees-found").style.display = "none";
 			deletedEmployeesList = [];
 			filteredDeletedEmployeesList = [];
+			deletedSortKey = "";
+			deletedSortOrder = "asc";
+			updateDeletedSortIcons();
+		}
+
+		// Sorting Logic for Deleted Employees Modal Table
+		function sortDeletedEmployeesBy(key) {
+			if (deletedSortKey === key) {
+				deletedSortOrder = (deletedSortOrder === "asc") ? "desc" : "asc";
+			} else {
+				deletedSortKey = key;
+				deletedSortOrder = "asc";
+			}
+
+			filteredDeletedEmployeesList.sort((a, b) => {
+				let valA = getSortValue(a, key);
+				let valB = getSortValue(b, key);
+
+				if (valA === '-' || valA === null || valA === undefined) valA = '';
+				if (valB === '-' || valB === null || valB === undefined) valB = '';
+
+				if (key === 'joined_date' || key === 'updated_at') {
+					const dateA = new Date(valA);
+					const dateB = new Date(valB);
+					const timeA = isNaN(dateA.getTime()) ? 0 : dateA.getTime();
+					const timeB = isNaN(dateB.getTime()) ? 0 : dateB.getTime();
+					return (deletedSortOrder === 'asc') ? (timeA - timeB) : (timeB - timeA);
+				}
+
+				if (key === 'active_date') {
+					// Sort by computed active period days
+					const daysA = getActiveDaysNum(a.joined_date, a.isdelete, a.updated_at);
+					const daysB = getActiveDaysNum(b.joined_date, b.isdelete, b.updated_at);
+					return (deletedSortOrder === 'asc') ? (daysA - daysB) : (daysB - daysA);
+				}
+
+				valA = String(valA).toLowerCase().trim();
+				valB = String(valB).toLowerCase().trim();
+
+				if (valA < valB) return (deletedSortOrder === 'asc') ? -1 : 1;
+				if (valA > valB) return (deletedSortOrder === 'asc') ? 1 : -1;
+				return 0;
+			});
+
+			renderDeletedEmployeesTable(filteredDeletedEmployeesList);
+			updateDeletedSortIcons();
+		}
+
+		function updateDeletedSortIcons() {
+			const keys = ['vendor_name', 'joined_date', 'active_date', 'updated_at'];
+			keys.forEach(key => {
+				const icon = document.getElementById(`deleted-sort-icon-${key}`);
+				if (!icon) return;
+
+				icon.className = "fa-solid ms-1";
+
+				if (deletedSortKey === key) {
+					icon.classList.remove("text-muted");
+					if (deletedSortOrder === "asc") {
+						icon.classList.add("fa-sort-up");
+						icon.style.color = "#0f5c78";
+					} else {
+						icon.classList.add("fa-sort-down");
+						icon.style.color = "#0f5c78";
+					}
+				} else {
+					icon.classList.add("fa-sort", "text-muted");
+					icon.style.color = "";
+				}
+			});
 		}
 
 		function exportDeletedEmployeesToCSV() {
@@ -4069,19 +4592,20 @@
 			}
 
 			let csvContent = "data:text/csv;charset=utf-8,";
-			csvContent += "S.No,Employee Code,Name,Email,Mobile,User Type,Designation,Location,Vendor Name,Last Updated On,Last Updated By,Status\n";
+			csvContent += "S.No,Employee Code,Name,Designation,Vendor Name,Email,Mobile,Joined Date,Active Date,Location,Last Updated On,Last Updated By,Status\n";
 
 			filteredDeletedEmployeesList.forEach((emp, index) => {
 				const row = [
 					index + 1,
 					`"${(emp.emp_code || '-').replace(/"/g, '""')}"`,
 					`"${(emp.name || '-').replace(/"/g, '""')}"`,
+					`"${(emp.designation || '-').replace(/"/g, '""')}"`,
+					`"${(emp.vendor_name || '-').replace(/"/g, '""')}"`,
 					`"${(emp.email || '-').replace(/"/g, '""')}"`,
 					`"${(emp.mobile || '-').replace(/"/g, '""')}"`,
-					`"${(emp.user_type || '-').replace(/"/g, '""')}"`,
-					`"${(emp.designation || '-').replace(/"/g, '""')}"`,
+					`"${(calculateTenure(emp.joined_date) || '-').replace(/"/g, '""')}"`,
+					`"${(calculateActivePeriod(emp.joined_date, emp.isdelete, emp.updated_at) || '-').replace(/"/g, '""')}"`,
 					`"${(emp.location || '-').replace(/"/g, '""')}"`,
-					`"${(emp.vendor_name || '-').replace(/"/g, '""')}"`,
 					`"${formatDateTime(emp.updated_at || emp.cdate)}"`,
 					`"${(emp.updated_by_name || '-').replace(/"/g, '""')}"`,
 					"Inactive"
@@ -4270,6 +4794,327 @@
 			link.click();
 			document.body.removeChild(link);
 		}
+		// --- WORK ORDER POSITION HISTORY JS LOGIC ---
+		let allHistoryEmployees = [];
+		let filteredHistoryList = [];
+
+		function fetchAndShowPositionHistory() {
+			const tbody = document.getElementById("position-history-tbody");
+			tbody.innerHTML = `
+				<tr>
+					<td colspan="7" class="text-center py-5">
+						<div class="spinner-border text-primary" role="status" style="width: 3rem; height: 3rem;">
+							<span class="visually-hidden">Loading...</span>
+						</div>
+						<p class="mt-3 text-secondary fw-semibold">Loading employees records and work orders...</p>
+					</td> 
+				</tr>
+			`;
+			document.getElementById("no-history-found").style.display = "none";
+			document.getElementById("history-employee-search-input").value = "";
+			document.getElementById("history-modal-vendor-select").value = "";
+			document.getElementById("history-modal-workorder-select").innerHTML = '<option value="">-- Select Work Order --</option>';
+
+			fetch(contextPath + 'api/all-employees-with-deleted')
+				.then(res => res.json())
+				.then(data => {
+					allHistoryEmployees = data;
+					tbody.innerHTML = `
+						<tr>
+							<td colspan="7" class="text-center py-5 text-secondary">
+								<i class="fa-solid fa-circle-info fs-2 mb-2 text-primary"></i>
+								<p class="mb-0 fw-semibold">Please select a Vendor and a Work Order to display position history.</p>
+							</td>
+						</tr>
+					`;
+				})
+				.catch(err => {
+					console.error("Error fetching employees for history modal:", err);
+					tbody.innerHTML = `
+						<tr>
+							<td colspan="7" class="text-center py-5 text-danger fw-bold">
+								<i class="fa-solid fa-circle-exclamation fs-1 mb-2"></i>
+								<p>Failed to connect to server and fetch database records. Please try again.</p>
+							</td>
+						</tr>
+					`;
+				});
+		}
+
+		function resetPositionHistoryModal() {
+			document.getElementById("history-employee-search-input").value = "";
+			document.getElementById("position-history-tbody").innerHTML = `
+				<tr>
+					<td colspan="7" class="text-center py-5 text-secondary">
+						<i class="fa-solid fa-circle-info fs-2 mb-2 text-primary"></i>
+						<p class="mb-0 fw-semibold">Please select a Vendor and a Work Order to display position history.</p>
+					</td>
+				</tr>
+			`;
+			document.getElementById("no-history-found").style.display = "none";
+			document.getElementById("history-modal-vendor-select").value = "";
+			document.getElementById("history-modal-workorder-select").innerHTML = '<option value="">-- Select Work Order --</option>';
+			allHistoryEmployees = [];
+			filteredHistoryList = [];
+		}
+
+		function onHistoryModalVendorChange() {
+			const vendorId = document.getElementById("history-modal-vendor-select").value;
+			const workorderSelect = document.getElementById("history-modal-workorder-select");
+			workorderSelect.innerHTML = '<option value="">-- Select Work Order --</option>';
+			document.getElementById("history-employee-search-input").value = "";
+
+			if (!vendorId) {
+				renderPositionHistoryTable();
+				return;
+			}
+
+			// Find vendor in inline vendorDetailsData to load designations (work orders)
+			const vendorObj = vendorDetailsData.find(v => String(v.id) === String(vendorId));
+			if (vendorObj && vendorObj.designationDetails) {
+				const uniqueFileNos = [];
+				vendorObj.designationDetails.forEach(des => {
+					const fileNo = des.File_no || des.file_no;
+					if (fileNo && fileNo !== '-' && fileNo !== '' && !uniqueFileNos.includes(fileNo)) {
+						uniqueFileNos.push(fileNo);
+						const opt = document.createElement("option");
+						opt.value = fileNo;
+						let displayText = fileNo;
+						const subject = des.subject;
+						if (subject && subject !== '-' && subject !== '') {
+							displayText += " (" + subject + ")";
+						}
+						opt.textContent = displayText;
+						workorderSelect.appendChild(opt);
+					}
+				});
+			}
+
+			renderPositionHistoryTable();
+		}
+
+		function renderPositionHistoryTable(searchQuery = "") {
+			try {
+				console.log("renderPositionHistoryTable called with query:", searchQuery);
+				const vendorSelect = document.getElementById("history-modal-vendor-select");
+				const workorderSelect = document.getElementById("history-modal-workorder-select");
+				const tbody = document.getElementById("position-history-tbody");
+				const noHistoryEl = document.getElementById("no-history-found");
+
+				if (!vendorSelect || !workorderSelect || !tbody) {
+					console.warn("Required elements not found in DOM");
+					return;
+				}
+
+				const selectedVendorId = vendorSelect.value;
+				const selectedFileNo = workorderSelect.value;
+				console.log("Selected Vendor ID:", selectedVendorId, "Selected File No:", selectedFileNo);
+
+				tbody.innerHTML = "";
+				noHistoryEl.style.display = "none";
+
+				if (!selectedVendorId || !selectedFileNo) {
+					console.log("Vendor or Work Order not selected. Rendering prompt.");
+					tbody.innerHTML = `
+						<tr>
+							<td colspan="7" class="text-center py-5 text-secondary">
+								<i class="fa-solid fa-circle-info fs-2 mb-2 text-primary"></i>
+								<p class="mb-0 fw-semibold">Please select a Vendor and a Work Order to display position history.</p>
+							</td>
+						</tr>
+					`;
+					filteredHistoryList = [];
+					return;
+				}
+
+				const vendorObj = vendorDetailsData.find(v => String(v.id) === String(selectedVendorId));
+				console.log("Found vendor object:", vendorObj);
+				if (!vendorObj || !vendorObj.designationDetails) {
+					console.warn("Vendor object or designationsDetails missing");
+					return;
+				}
+
+				// Filter designations of this work order (File No)
+				let designations = vendorObj.designationDetails.filter(d => {
+					const fNo = d.File_no || d.file_no;
+					return fNo === selectedFileNo;
+				});
+				console.log("Designations under selected work order:", designations);
+
+				// If search query is present, filter designations list
+				const q = searchQuery.toLowerCase().trim();
+				if (q) {
+					designations = designations.filter(d => d.designation && d.designation.toLowerCase().includes(q));
+				}
+
+				if (designations.length === 0) {
+					console.log("No designations found for selected criteria");
+					noHistoryEl.style.display = "block";
+					filteredHistoryList = [];
+					return;
+				}
+
+				filteredHistoryList = [];
+				let rowIdx = 1;
+
+				designations.forEach(des => {
+					const requiredCount = parseInt(des.tender_manpower_designation_wise) || 0;
+					const desName = des.designation;
+
+					// Find all employees associated with this vendor, work order, and designation
+					const employees = allHistoryEmployees.filter(emp => {
+						const empVendorMatches = String(emp.vendor_id) === String(selectedVendorId) ||
+							(emp.vendor_name && vendorObj.vendor_name && emp.vendor_name.toLowerCase().trim() === vendorObj.vendor_name.toLowerCase().trim());
+
+						const empDesMatches = String(emp.raw_designation) === String(des.id) ||
+							(emp.designation && desName && emp.designation.toLowerCase().trim() === desName.toLowerCase().trim());
+
+						const empFileNo = emp.work_order || emp.file_no;
+						const desFileNo = des.File_no || des.file_no;
+						const empWoMatches = empFileNo === selectedFileNo || empFileNo === desFileNo;
+
+						return empVendorMatches && empDesMatches && empWoMatches;
+					});
+					console.log(`Designation "${desName}": found ${employees.length} employees`);
+
+					// Separate active and inactive/deleted
+					const activeEmps = employees.filter(emp => !(emp.isdelete === true || emp.isactive === false || parseInt(emp.isdelete) === 1 || parseInt(emp.isactive) === 0));
+					const deletedEmps = employees.filter(emp => (emp.isdelete === true || emp.isactive === false || parseInt(emp.isdelete) === 1 || parseInt(emp.isactive) === 0));
+
+					// If a search query is typed, we only search active/deleted employees within this designation
+					let displayActiveEmps = activeEmps;
+					let displayDeletedEmps = deletedEmps;
+
+					if (q) {
+						const matchesEmployee = (emp) =>
+							(emp.name && emp.name.toLowerCase().includes(q)) ||
+							(emp.emp_code && emp.emp_code.toLowerCase().includes(q));
+
+						const matchesDes = desName.toLowerCase().includes(q);
+
+						if (!matchesDes) {
+							displayActiveEmps = activeEmps.filter(matchesEmployee);
+							displayDeletedEmps = deletedEmps.filter(matchesEmployee);
+
+							if (displayActiveEmps.length === 0 && displayDeletedEmps.length === 0) {
+								return;
+							}
+						}
+					}
+
+					const totalSlots = Math.max(requiredCount, displayActiveEmps.length);
+
+					for (let slot = 0; slot < totalSlots; slot++) {
+						const tr = document.createElement("tr");
+
+						let sNoTd = "";
+						let designationTd = "";
+						let requiredTd = "";
+
+						if (slot === 0) {
+							sNoTd = `<td class="text-center fw-bold text-secondary align-middle" rowspan="${totalSlots}">${rowIdx++}</td>`;
+							designationTd = `<td class="fw-bold text-dark align-middle" rowspan="${totalSlots}">${escapeHtml(desName)}</td>`;
+							requiredTd = `<td class="text-center fw-bold text-secondary align-middle" rowspan="${totalSlots}">${requiredCount}</td>`;
+						}
+
+						// Current Employee (Active)
+						let currentEmpTd = `<span class="text-muted italic"><i class="fa-solid fa-user-slash me-1"></i> Vacant</span>`;
+						let statusTd = `<span class="badge bg-warning text-dark"><i class="fa-solid fa-triangle-exclamation me-1"></i> Not Filled</span>`;
+
+						const activeEmp = displayActiveEmps[slot];
+						if (activeEmp) {
+							currentEmpTd = `<span class="fw-semibold text-primary">${escapeHtml(activeEmp.name)} (${escapeHtml(activeEmp.emp_code)})</span><br><small class="text-muted">Joined: ${escapeHtml(calculateTenure(activeEmp.joined_date))}</small>`;
+							statusTd = `<span class="badge bg-success"><i class="fa-solid fa-circle-check me-1"></i> Filled</span>`;
+						} else {
+							// Match deleted employee if active slots are vacant
+							const vacantIdx = slot - displayActiveEmps.length;
+							const deletedEmp = displayDeletedEmps[vacantIdx];
+							if (deletedEmp) {
+								statusTd = `<span class="badge bg-danger"><i class="fa-solid fa-circle-xmark me-1"></i> Vacant (Needs Replacement)</span>`;
+							}
+						}
+
+						// Previous Employee (Deleted)
+						let historyTd = `<span class="text-muted">-</span>`;
+						const deletedEmp = displayDeletedEmps[slot];
+						if (deletedEmp) {
+							historyTd = `<span class="fw-semibold text-danger">${escapeHtml(deletedEmp.name)} (${escapeHtml(deletedEmp.emp_code)})</span><br><small class="text-muted">Joined: ${escapeHtml(calculateTenure(deletedEmp.joined_date))}<br>Deleted: ${escapeHtml(formatDateTime(deletedEmp.updated_at))}</small>`;
+						}
+
+						tr.innerHTML = `
+							${sNoTd}
+							${designationTd}
+							${requiredTd}
+							<td class="text-center fw-semibold align-middle text-secondary">Slot ${slot + 1}</td>
+							<td class="align-middle">${currentEmpTd}</td>
+							<td class="align-middle">${historyTd}</td>
+							<td class="text-center align-middle">${statusTd}</td>
+						`;
+
+						tbody.appendChild(tr);
+
+						// Track details for CSV exporting
+						filteredHistoryList.push({
+							designation: desName,
+							quota: requiredCount,
+							slot: `Slot ${slot + 1}`,
+							currentEmp: activeEmp ? `${activeEmp.name} (${activeEmp.emp_code})` : 'Vacant',
+							previousEmp: deletedEmp ? `${deletedEmp.name} (${deletedEmp.emp_code})` : '-',
+							status: activeEmp ? 'Filled' : (deletedEmp ? 'Vacant (Needs Replacement)' : 'Not Filled')
+						});
+					}
+				});
+
+				if (tbody.children.length === 0) {
+					noHistoryEl.style.display = "block";
+				}
+			} catch (err) {
+				console.error("Error in renderPositionHistoryTable:", err);
+				alert("JavaScript Error in history table rendering: " + err.message);
+			}
+		}
+
+		function filterPositionHistory() {
+			const query = document.getElementById("history-employee-search-input").value;
+			renderPositionHistoryTable(query);
+		}
+
+		function exportPositionHistoryToCSV() {
+			if (filteredHistoryList.length === 0) {
+				alert("No position history records to export!");
+				return;
+			}
+
+			const vendorSelect = document.getElementById("history-modal-vendor-select");
+			const workorderSelect = document.getElementById("history-modal-workorder-select");
+			const vendorName = vendorSelect.options[vendorSelect.selectedIndex].text;
+			const workOrderNo = workorderSelect.value;
+
+			let csvContent = "data:text/csv;charset=utf-8,";
+			csvContent += `Vendor: ${vendorName}, Work Order: ${workOrderNo}\n\n`;
+			csvContent += "S.No,Designation,Quota Required,Slot,Current Employee (Active),Previous Employee (Deleted),Position Status\n";
+
+			filteredHistoryList.forEach((row, index) => {
+				const line = [
+					index + 1,
+					`"${row.designation.replace(/"/g, '""')}"`,
+					row.quota,
+					row.slot,
+					`"${row.currentEmp.replace(/"/g, '""')}"`,
+					`"${row.previousEmp.replace(/"/g, '""')}"`,
+					`"${row.status.replace(/"/g, '""')}"`
+				];
+				csvContent += line.join(",") + "\n";
+			});
+
+			const encodedUri = encodeURI(csvContent);
+			const link = document.createElement("a");
+			link.setAttribute("href", encodedUri);
+			link.setAttribute("download", `position_history_${workOrderNo.replace(/[^a-z0-9]/gi, '_').toLowerCase()}.csv`);
+			document.body.appendChild(link);
+			link.click();
+			document.body.removeChild(link);
+		}
 	</script>
 	<script th:src="@{/assets/js/home-script.js}" type="text/javascript" defer></script>
 
diff --git a/src/main/resources/templates/home/view-login-details.html b/src/main/resources/templates/home/view-login-details.html
index a494ebb..d791a9a 100644
--- a/src/main/resources/templates/home/view-login-details.html
+++ b/src/main/resources/templates/home/view-login-details.html
@@ -572,7 +572,7 @@
 	<!-- Employee Details Modal -->
 	<div class="modal fade" id="employeeDetailsModal" tabindex="-1" aria-labelledby="employeeDetailsModalLabel"
 		aria-hidden="true">
-		<div class="modal-dialog modal-xl modal-dialog-centered">
+		<div class="modal-dialog modal-xl modal-dialog-centered" style="max-width: 95%; width: 95%;">
 			<div class="modal-content"
 				style="border-radius: 14px; border: none; box-shadow: 0 10px 40px rgba(0,0,0,0.2);">
 				<div class="modal-custom-header">