changes in service documents and manspower pages

.mvn/wrapper/maven-wrapper.properties

@@ -1,3 +0,0 @@
-wrapperVersion=3.3.4
-distributionType=only-script
-distributionUrl=https://repo.maven.apache.org/maven2/org/apache/maven/apache-maven/3.9.15/apache-maven-3.9.15-bin.zip

src/main/java/com/gcc_manpower/gccservicedocuments/controller/GccServiceDocumentsController.java

@@ -261,6 +261,7 @@ public class GccServiceDocumentsController {
     public Map<String, Object> updateFile(
             @RequestParam("id") Long id,
             @RequestParam("title") String title,
+            @RequestParam("mainCategory") String mainCategory,
             @RequestParam("subCategory") String subCategory,
             @RequestParam("fileType") String fileType,
             @RequestParam(value = "file", required = false) MultipartFile file,
@@ -274,7 +275,8 @@ public class GccServiceDocumentsController {
             return response;
         }
 
-        if (title == null || title.trim().isEmpty() || subCategory == null || subCategory.trim().isEmpty()
+        if (title == null || title.trim().isEmpty() || mainCategory == null || mainCategory.trim().isEmpty()
+                || subCategory == null || subCategory.trim().isEmpty()
                 || fileType == null || fileType.trim().isEmpty()) {
             response.put("success", false);
             response.put("error", "Required fields cannot be empty.");
@@ -318,7 +320,7 @@ public class GccServiceDocumentsController {
                 fileWebUrl = "/gccservicedocuments/files/" + cleanCategory + "/" + savedFilename;
             }
 
-            boolean updated = documentService.updateDocument(id, title.trim(), subCategory.trim(), fileType.trim(),
+            boolean updated = documentService.updateDocument(id, title.trim(), mainCategory.trim(), subCategory.trim(), fileType.trim(),
                     fileWebUrl, originalFilename);
 
             if (updated) {

src/main/java/com/gcc_manpower/gccservicedocuments/service/GccServiceDocumentsService.java

@@ -226,7 +226,7 @@ public class GccServiceDocumentsService {
         return null;
     }
 
-    public boolean updateDocument(Long id, String title, 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 {
@@ -252,17 +252,10 @@ public class GccServiceDocumentsService {
 
         // Resolve subCategoryId and fileTypeId
         int subCategoryId = 0;
-        String findSubSql = "SELECT id FROM sub_category_list WHERE category_name = ? AND is_delete = 0 LIMIT 1";
         try {
-            List<Integer> ids = jdbcTemplate.queryForList(findSubSql, Integer.class, subCategory.trim());
-            if (!ids.isEmpty()) {
-                subCategoryId = ids.get(0);
-            } else {
-                // Find old document's main category ID
-                String oldMainCatSql = "SELECT s.mid FROM documents_uploads d JOIN sub_category_list s ON d.category = s.id WHERE d.id = ?";
-                List<Integer> mids = jdbcTemplate.queryForList(oldMainCatSql, Integer.class, id);
-                int mid = mids.isEmpty() ? 1 : mids.get(0);
-                subCategoryId = getOrCreateSubCategory(subCategory, mid);
+            int mainCategoryId = getOrCreateMainCategory(mainCategory);
+            if (mainCategoryId != 0) {
+                subCategoryId = getOrCreateSubCategory(subCategory, mainCategoryId);
             }
         } catch (Exception e) {
             System.err.println("Error resolving subcategory: " + e.getMessage());

src/main/java/com/gcc_manpower/service/AppUserService.java

@@ -520,6 +520,7 @@ public class AppUserService {
                 "  h.email, " +
                 "  h.mobile, " +
                 "  h.updated_date, " +
+                "  COALESCE(u.usr_name, h.updated_by) AS updated_by_name, " +
                 "  COALESCE(v.vendor_name, h.vendor_id) AS vendor_name, " +
                 "  COALESCE(ut.usertype, h.user_type) AS user_type, " +
                 "  COALESCE(des.designation, h.designation) AS designation, " +
@@ -527,10 +528,9 @@ public class AppUserService {
                 "FROM employee_details_update_history h " +
                 "LEFT JOIN vendor_details v ON (h.vendor_id = CAST(v.id AS CHAR) OR h.vendor_id = v.vendor_name) " +
                 "LEFT JOIN user_type_details ut ON (h.user_type = CAST(ut.id AS CHAR) OR h.user_type = ut.usertype) " +
-                "LEFT JOIN employee_workorder_details des ON (h.designation = CAST(des.id AS CHAR) OR h.designation = des.designation) "
-                +
-                "LEFT JOIN employee_location_details loc ON (h.location = CAST(loc.id AS CHAR) OR h.location = loc.location_name) "
-                +
+                "LEFT JOIN employee_workorder_details des ON (h.designation = CAST(des.id AS CHAR) OR h.designation = des.designation) " +
+                "LEFT JOIN employee_location_details loc ON (h.location = CAST(loc.id AS CHAR) OR h.location = loc.location_name) " +
+                "LEFT JOIN app_user u ON (h.updated_by = CAST(u.usr_id AS CHAR) OR h.updated_by = u.usr_name) " +
                 "WHERE h.emp_code = ? " +
                 "ORDER BY h.updated_date DESC";
         try {

src/main/resources/templates/fragments/navbar.html

@@ -40,6 +40,12 @@
 								<i class="fa-solid fa-trash-can"></i> Delete Employee
 							</a>
 						</li>
+						<li class="nav-item">
+							<a class="nav-link" th:href="@{/?action=deletedEmployees}"
+								onclick="if (document.getElementById('deletedEmployeesModal')) { bootstrap.Modal.getOrCreateInstance(document.getElementById('deletedEmployeesModal')).show(); return false; }">
+								<i class="fa-solid fa-user-slash"></i> Deleted Employees
+							</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; }">

src/main/resources/templates/gccservicedocuments/view.html

@@ -788,11 +788,13 @@
         }
 
         let allFilterSubcategories = [];
+        let allMainCategories = [];
 
         function loadCategories() {
             fetch(contextPath + 'gccservicedocuments/api/main-categories')
                 .then(response => response.json())
                 .then(mainCats => {
+                    allMainCategories = mainCats;
                     const select = document.getElementById('filter-main-category');
                     mainCats.forEach(cat => {
                         const option = document.createElement('option');
@@ -1083,7 +1085,7 @@
                 if (isAdmin) {
                     editButtonHtml = `
                         <td class="text-center">
-                            <button class="btn-card-edit-modal" onclick="editDocument(event, ${doc.id}, '${escapeHtml(doc.title)}', '${escapeHtml(doc.category || 'General')}', '${escapeHtml(doc.file_type)}')" title="Edit Document">
+                            <button class="btn-card-edit-modal" onclick="editDocument(event, ${doc.id}, '${escapeHtml(doc.title)}', '${escapeHtml(doc.category || 'General')}', '${escapeHtml(doc.file_type)}', '${escapeHtml(doc.main_category || 'General')}')" title="Edit Document">
                                 <i class="fa-solid fa-pen-to-square"></i>
                             </button>
                         </td>
@@ -1157,9 +1159,16 @@
             }, 300);
         }
 
-        function editDocument(event, id, currentTitle, currentSubcategory, currentFileType) {
+        function editDocument(event, id, currentTitle, currentSubcategory, currentFileType, currentMainCategory) {
             event.stopPropagation();
 
+            // Build options for main category dropdown
+            let mainCatOptions = '';
+            allMainCategories.forEach(cat => {
+                const isSelected = cat.main_category_name.toLowerCase() === (currentMainCategory || '').toLowerCase() ? 'selected' : '';
+                mainCatOptions += `<option value="${escapeHtml(cat.main_category_name)}" ${isSelected}>${escapeHtml(cat.main_category_name)}</option>`;
+            });
+
             // Build options for subcategory dropdown
             let subcatOptions = '';
             allFilterSubcategories.forEach(sub => {
@@ -1181,6 +1190,12 @@
                         <label for="swal-title" style="font-weight: 600; display: block; margin-bottom: 5px; color: #0f5c78;">Document/Video Title</label>
                         <input id="swal-title" class="form-control" style="width: 100%; border-radius: 8px; border: 1.5px solid #e2e8f0; padding: 10px;" value="${escapeHtml(currentTitle)}">
                     </div>
+                    <div style="text-align: left; margin-bottom: 15px;">
+                        <label for="swal-maincategory" style="font-weight: 600; display: block; margin-bottom: 5px; color: #0f5c78;">Main Category</label>
+                        <select id="swal-maincategory" class="form-control" style="width: 100%; border-radius: 8px; border: 1.5px solid #e2e8f0; padding: 10px;">
+                            ${mainCatOptions}
+                        </select>
+                    </div>
                     <div style="text-align: left; margin-bottom: 15px;">
                         <label for="swal-subcategory" style="font-weight: 600; display: block; margin-bottom: 5px; color: #0f5c78;">Subcategory</label>
                         <select id="swal-subcategory" class="form-control" style="width: 100%; border-radius: 8px; border: 1.5px solid #e2e8f0; padding: 10px;">
@@ -1205,6 +1220,7 @@
                 confirmButtonText: 'Save Changes',
                 preConfirm: () => {
                     const title = document.getElementById('swal-title').value.trim();
+                    const mainCategory = document.getElementById('swal-maincategory').value;
                     const subCategory = document.getElementById('swal-subcategory').value;
                     const fileType = document.getElementById('swal-filetype').value;
                     const fileInput = document.getElementById('swal-file');
@@ -1214,11 +1230,15 @@
                         Swal.showValidationMessage('Document/Video Title cannot be empty');
                         return false;
                     }
-                    return { title, subCategory, fileType, file };
+                    if (!mainCategory) {
+                        Swal.showValidationMessage('Main Category cannot be empty');
+                        return false;
+                    }
+                    return { title, mainCategory, subCategory, fileType, file };
                 }
             }).then((result) => {
                 if (result.isConfirmed) {
-                    const { title, subCategory, fileType, file } = result.value;
+                    const { title, mainCategory, subCategory, fileType, file } = result.value;
 
                     // CSRF security token fetch
                     const csrfMeta = document.querySelector('meta[name="_csrf"]');
@@ -1227,6 +1247,7 @@
                     const formData = new FormData();
                     formData.append('id', id);
                     formData.append('title', title);
+                    formData.append('mainCategory', mainCategory);
                     formData.append('subCategory', subCategory);
                     formData.append('fileType', fileType);
                     if (file) {
@@ -1246,40 +1267,40 @@
                         headers: headers,
                         body: formData
                     })
-                    .then(res => res.json())
-                    .then(data => {
-                        hideLoadingOverlay();
-                        if (data.success) {
+                        .then(res => res.json())
+                        .then(data => {
+                            hideLoadingOverlay();
+                            if (data.success) {
+                                Swal.fire({
+                                    title: 'Updated!',
+                                    text: data.message || 'Changes saved successfully.',
+                                    icon: 'success',
+                                    confirmButtonColor: '#0f5c78'
+                                });
+                                // Close files modal to allow refresh
+                                const filesModalElement = document.getElementById('categoryFilesModal');
+                                const filesModal = bootstrap.Modal.getOrCreateInstance(filesModalElement);
+                                filesModal.hide();
+                                loadDocuments(); // Refresh documents list
+                            } else {
+                                Swal.fire({
+                                    title: 'Failed!',
+                                    text: data.error || 'Failed to update details.',
+                                    icon: 'error',
+                                    confirmButtonColor: '#0f5c78'
+                                });
+                            }
+                        })
+                        .catch(err => {
+                            hideLoadingOverlay();
+                            console.error("Error updating document:", err);
                             Swal.fire({
-                                title: 'Updated!',
-                                text: data.message || 'Changes saved successfully.',
-                                icon: 'success',
-                                confirmButtonColor: '#0f5c78'
-                            });
-                            // Close files modal to allow refresh
-                            const filesModalElement = document.getElementById('categoryFilesModal');
-                            const filesModal = bootstrap.Modal.getOrCreateInstance(filesModalElement);
-                            filesModal.hide();
-                            loadDocuments(); // Refresh documents list
-                        } else {
-                            Swal.fire({
-                                title: 'Failed!',
-                                text: data.error || 'Failed to update details.',
+                                title: 'Error!',
+                                text: 'An error occurred while saving changes.',
                                 icon: 'error',
                                 confirmButtonColor: '#0f5c78'
                             });
-                        }
-                    })
-                    .catch(err => {
-                        hideLoadingOverlay();
-                        console.error("Error updating document:", err);
-                        Swal.fire({
-                            title: 'Error!',
-                            text: 'An error occurred while saving changes.',
-                            icon: 'error',
-                            confirmButtonColor: '#0f5c78'
                         });
-                    });
                 }
             });
         }

src/main/resources/templates/home/home.html

@@ -911,8 +911,8 @@
 							<!-- Joined Date -->
 							<div class="col-md-6">
 								<label for="update-emp-joined-date" class="form-label fw-semibold text-secondary">Joined
-									Date <span class="text-danger">*</span></label>
-								<input type="date" class="form-control w-100" id="update-emp-joined-date" required
+									Date</label>
+								<input type="date" class="form-control w-100" id="update-emp-joined-date"
 									style="border-radius: 8px;">
 							</div>
 						</div>
@@ -948,6 +948,7 @@
 										<th style="font-weight: 700; color: #475569;">Designation</th>
 										<th style="font-weight: 700; color: #475569;">Location</th>
 										<th style="font-weight: 700; color: #475569;">Vendor Name</th>
+										<th style="font-weight: 700; color: #475569;">Last Updated By</th>
 									</tr>
 								</thead>
 								<tbody id="update-modal-history-tbody">
@@ -1193,6 +1194,115 @@
 		</div>
 	</div>
 
+	<!-- Employee History Modal -->
+	<div class="modal fade" id="employeeHistoryModal" tabindex="-1" aria-labelledby="employeeHistoryModalLabel"
+		aria-hidden="true">
+		<div class="modal-dialog modal-xl modal-dialog-centered">
+			<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;">
+					<h5 class="modal-custom-title" id="employeeHistoryModalLabel">
+						<i class="fa-solid fa-clock-rotate-left"></i> Employee Update History - <span
+							id="history-modal-emp-name" style="text-decoration: underline;">Employee</span>
+					</h5>
+					<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
+						aria-label="Close"></button>
+				</div>
+				<div class="modal-body">
+					<div class="table-responsive"
+						style="max-height: 400px; border: 1px solid #eef2f6; border-radius: 8px;">
+						<table class="table table-hover modal-table mb-0" id="history-modal-table"
+							style="font-size: 0.9rem;">
+							<thead style="background-color: #f8fafc; position: sticky; top: 0; z-index: 1;">
+								<tr>
+									<th style="width: 60px;" class="text-center">S.No</th>
+									<th>Last Updated Date</th>
+									<th>Name</th>
+									<th>Email</th>
+									<th>Mobile</th>
+									<th>User Type</th>
+									<th>Designation</th>
+									<th>Location</th>
+									<th>Vendor Name</th>
+									<th>Last Updated By</th>
+								</tr>
+							</thead>
+							<tbody id="history-modal-tbody">
+								<!-- Dynamically populated -->
+							</tbody>
+						</table>
+						<div id="history-modal-no-history" class="text-center text-muted py-5" style="display: none;">
+							<i class="fa-solid fa-clock fs-1 mb-3 text-secondary"></i>
+							<p class="fw-bold mb-0">No update history found for this employee.</p>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+
+	<!-- 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-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;">
+					<h5 class="modal-custom-title" id="deletedEmployeesModalLabel">
+						<i class="fa-solid fa-user-slash"></i> Deleted / Inactive Employees List
+					</h5>
+					<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
+						aria-label="Close"></button>
+				</div>
+				<div class="modal-body">
+					<!-- Search and Export Toolbar -->
+					<div class="d-flex flex-column flex-md-row justify-content-between align-items-center gap-3 mb-4">
+						<div class="modal-search-box flex-grow-1 m-0">
+							<i class="fa-solid fa-magnifying-glass"></i>
+							<input type="text" id="deleted-employee-search-input"
+								placeholder="Search deleted employees by name, designation, location, code..."
+								oninput="filterDeletedEmployees()">
+						</div>
+						<button class="export-btn text-nowrap" onclick="exportDeletedEmployeesToCSV()"
+							style="background-color: #2c3e50;">
+							<i class="fa-solid fa-file-csv"></i> Export to CSV
+						</button>
+					</div>
+
+					<!-- Table of Deleted Employees -->
+					<div class="table-responsive"
+						style="max-height: 450px; border: 1px solid #eef2f6; border-radius: 8px;">
+						<table class="table table-hover modal-table" id="deleted-employee-table">
+							<thead>
+								<tr>
+									<th style="width: 60px;" class="text-center">S.No</th>
+									<th>Emp Code</th>
+									<th>Name</th>
+									<th>Email</th>
+									<th>Mobile</th>
+									<th>User Type</th>
+									<th>Designation</th>
+									<th>Location</th>
+									<th>Vendor Name</th>
+									<th class="text-center" style="width: 150px;">Last Updated On</th>
+									<th class="text-center" style="width: 130px;">Last Updated By</th>
+									<th class="text-center" style="width: 120px;">Status</th>
+								</tr>
+							</thead>
+							<tbody id="deleted-employee-tbody">
+								<!-- Dynamically populated -->
+							</tbody>
+						</table>
+						<div id="no-deleted-employees-found" class="text-center text-muted py-5" style="display: none;">
+							<i class="fa-solid fa-user-slash fs-1 mb-3 text-secondary"></i>
+							<p class="fw-bold mb-0">No deleted employees found.</p>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+
 	<!-- Include the quick-view-modal for product -->
 	<th:block th:replace="~{modals/login-modal :: login-modal}"></th:block>
 
@@ -2312,11 +2422,23 @@
 				if (isAdmin) {
 					actionTd = `
 						<td class="text-center">
-							<button class="btn btn-sm btn-outline-danger border-0 p-1 lh-1" 
-									onclick="deleteEmployee('${escapeHtml(emp.emp_code)}', '${escapeHtml(emp.name)}')"
-									title="Delete Employee" style="cursor: pointer; background: transparent;">
-								<i class="fa-solid fa-trash-can text-danger"></i>
-							</button>
+							<div class="d-flex align-items-center justify-content-center gap-1">
+								<button class="btn btn-sm btn-outline-primary border-0 p-1 lh-1" 
+										onclick="editEmployee('${escapeHtml(emp.emp_code)}')"
+										title="Edit Employee" style="cursor: pointer; background: transparent;">
+									<i class="fa-solid fa-user-pen text-primary"></i>
+								</button>
+								<button class="btn btn-sm btn-outline-info border-0 p-1 lh-1" 
+										onclick="showEmployeeHistory('${escapeHtml(emp.emp_code)}', '${escapeHtml(emp.name)}')"
+										title="View History" style="cursor: pointer; background: transparent;">
+									<i class="fa-solid fa-clock-rotate-left text-info"></i>
+								</button>
+								<button class="btn btn-sm btn-outline-danger border-0 p-1 lh-1" 
+										onclick="deleteEmployee('${escapeHtml(emp.emp_code)}', '${escapeHtml(emp.name)}')"
+										title="Delete Employee" style="cursor: pointer; background: transparent;">
+									<i class="fa-solid fa-trash-can text-danger"></i>
+								</button>
+							</div>
 						</td>
 					`;
 				}
@@ -2660,7 +2782,7 @@
 
 			tbody.innerHTML = `
 				<tr>
-					<td colspan="9" class="text-center py-3">
+					<td colspan="10" class="text-center py-3">
 						<div class="spinner-border spinner-border-sm text-primary" role="status">
 							<span class="visually-hidden">Loading history...</span>
 						</div>
@@ -2695,6 +2817,7 @@
 							<td class="fw-semibold">${escapeHtml(item.designation || '-')}</td>
 							<td><span class="badge bg-light text-dark border">${escapeHtml(item.location || '-')}</span></td>
 							<td class="fw-semibold text-secondary">${escapeHtml(item.vendor_name || '-')}</td>
+							<td class="text-center fw-semibold text-secondary">${escapeHtml(item.updated_by_name || '-')}</td>
 						`;
 						tbody.appendChild(tr);
 					});
@@ -2703,7 +2826,7 @@
 					console.error("Error fetching employee history:", err);
 					tbody.innerHTML = `
 						<tr>
-							<td colspan="9" class="text-center text-danger fw-bold py-3">
+							<td colspan="10" class="text-center text-danger fw-bold py-3">
 								<i class="fa-solid fa-triangle-exclamation"></i> Failed to load history records.
 							</td>
 						</tr>
@@ -2744,7 +2867,7 @@
 					designation: designation,
 					location: location,
 					vendor_id: vendorId,
-					joined_date: joinedDate
+					joined_date: joinedDate ? joinedDate : null
 				})
 			})
 				.then(res => res.json())
@@ -2968,6 +3091,11 @@
 				if (modalEl) {
 					bootstrap.Modal.getOrCreateInstance(modalEl).show();
 				}
+			} else if (action === 'deletedEmployees') {
+				const modalEl = document.getElementById('deletedEmployeesModal');
+				if (modalEl) {
+					bootstrap.Modal.getOrCreateInstance(modalEl).show();
+				}
 			}
 
 			// Initialize Flatpickr datepickers for dd/mm/yyyy display format
@@ -3060,6 +3188,12 @@
 				deleteModalEl.addEventListener("hidden.bs.modal", resetDeleteEmployeeModal);
 			}
 
+			const deletedModalEl = document.getElementById("deletedEmployeesModal");
+			if (deletedModalEl) {
+				deletedModalEl.addEventListener("show.bs.modal", fetchAndShowDeletedEmployees);
+				deletedModalEl.addEventListener("hidden.bs.modal", resetDeletedEmployeesModal);
+			}
+
 			// Initialize designation dropdown options on load
 			updateDesignationDropdown();
 		});
@@ -3654,6 +3788,225 @@
 			showUpdateInitialMessage();
 		}
 
+		// Edit Employee from list
+		function editEmployee(empCode) {
+			// Hide details modal if open
+			const detailsModalEl = document.getElementById("employeeDetailsModal");
+			if (detailsModalEl) {
+				const detailsModal = bootstrap.Modal.getInstance(detailsModalEl);
+				if (detailsModal) detailsModal.hide();
+			}
+
+			// Show update modal
+			const updateModalEl = document.getElementById("updateEmployeeModal");
+			if (updateModalEl) {
+				const updateModal = bootstrap.Modal.getOrCreateInstance(updateModalEl);
+				updateModal.show();
+				searchEmployee(empCode);
+			}
+		}
+
+		// Show Employee history modal
+		function showEmployeeHistory(empCode, empName) {
+			document.getElementById("history-modal-emp-name").textContent = `${empName} (${empCode})`;
+			const tbody = document.getElementById("history-modal-tbody");
+			const noHistoryEl = document.getElementById("history-modal-no-history");
+
+			tbody.innerHTML = `
+				<tr>
+					<td colspan="10" 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 history...</span>
+						</div>
+						<p class="mt-2 text-secondary fw-semibold mb-0">Loading employee update history...</p>
+					</td>
+				</tr>
+			`;
+			noHistoryEl.style.display = "none";
+
+			const modalElement = document.getElementById("employeeHistoryModal");
+			const modal = bootstrap.Modal.getOrCreateInstance(modalElement);
+			modal.show();
+
+			fetch(contextPath + 'api/employee/history?empCode=' + encodeURIComponent(empCode))
+				.then(res => res.json())
+				.then(historyList => {
+					tbody.innerHTML = "";
+					if (!historyList || historyList.length === 0) {
+						noHistoryEl.style.display = "block";
+						return;
+					}
+					noHistoryEl.style.display = "none";
+
+					historyList.forEach((item, index) => {
+						const tr = document.createElement("tr");
+						const formattedDate = formatDateTime(item.updated_date);
+
+						tr.innerHTML = `
+							<td class="text-center fw-bold text-secondary">${index + 1}</td>
+							<td class="fw-semibold text-dark">${escapeHtml(formattedDate)}</td>
+							<td>${escapeHtml(item.name || '-')}</td>
+							<td>${escapeHtml(item.email || '-')}</td>
+							<td>${escapeHtml(item.mobile || '-')}</td>
+							<td><span class="badge bg-secondary">${escapeHtml(item.user_type || '-')}</span></td>
+							<td class="fw-semibold">${escapeHtml(item.designation || '-')}</td>
+							<td><span class="badge bg-light text-dark border">${escapeHtml(item.location || '-')}</span></td>
+							<td class="fw-semibold text-secondary">${escapeHtml(item.vendor_name || '-')}</td>
+							<td class="text-center fw-semibold text-secondary">${escapeHtml(item.updated_by_name || '-')}</td>
+						`;
+						tbody.appendChild(tr);
+					});
+				})
+				.catch(err => {
+					console.error("Error fetching employee history:", err);
+					tbody.innerHTML = `
+						<tr>
+							<td colspan="10" class="text-center text-danger fw-bold py-4">
+								<i class="fa-solid fa-triangle-exclamation fs-3 mb-2"></i>
+								<p class="mb-0">Failed to load history records.</p>
+							</td>
+						</tr>
+					`;
+				});
+		}
+
+		// Globals for Deleted Employees Modal
+		let deletedEmployeesList = [];
+		let filteredDeletedEmployeesList = [];
+
+		function fetchAndShowDeletedEmployees() {
+			const tbody = document.getElementById("deleted-employee-tbody");
+			tbody.innerHTML = `
+				<tr>
+					<td colspan="10" 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 deleted employees...</p>
+					</td>
+				</tr>
+			`;
+			document.getElementById("no-deleted-employees-found").style.display = "none";
+			document.getElementById("deleted-employee-search-input").value = "";
+
+			fetch(contextPath + 'api/all-employees-with-deleted')
+				.then(res => res.json())
+				.then(data => {
+					// Filter to only include inactive/deleted employees
+					deletedEmployeesList = data.filter(emp => (emp.isdelete === true || emp.isactive === false || parseInt(emp.isdelete) === 1 || parseInt(emp.isactive) === 0));
+					filterDeletedEmployees();
+				})
+				.catch(err => {
+					console.error("Error fetching deleted employees:", err);
+					tbody.innerHTML = `
+						<tr>
+							<td colspan="10" 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 filterDeletedEmployees() {
+			const query = document.getElementById("deleted-employee-search-input").value.toLowerCase().trim();
+
+			if (query === "") {
+				filteredDeletedEmployeesList = deletedEmployeesList;
+			} else {
+				filteredDeletedEmployeesList = deletedEmployeesList.filter(emp => {
+					return (emp.name && emp.name.toLowerCase().includes(query)) ||
+						(emp.emp_code && emp.emp_code.toLowerCase().includes(query)) ||
+						(emp.designation && emp.designation.toLowerCase().includes(query)) ||
+						(emp.location && emp.location.toLowerCase().includes(query)) ||
+						(emp.email && emp.email.toLowerCase().includes(query)) ||
+						(emp.mobile && emp.mobile.toLowerCase().includes(query)) ||
+						(emp.vendor_name && emp.vendor_name.toLowerCase().includes(query)) ||
+						(emp.user_type && emp.user_type.toLowerCase().includes(query));
+				});
+			}
+
+			renderDeletedEmployeesTable(filteredDeletedEmployeesList);
+		}
+
+		function renderDeletedEmployeesTable(list) {
+			const tbody = document.getElementById("deleted-employee-tbody");
+			const noEmployeesEl = document.getElementById("no-deleted-employees-found");
+			tbody.innerHTML = "";
+
+			if (list.length === 0) {
+				noEmployeesEl.style.display = "block";
+				return;
+			}
+
+			noEmployeesEl.style.display = "none";
+
+			list.forEach((emp, index) => {
+				const tr = document.createElement("tr");
+				tr.style.backgroundColor = "#fdf2f2"; // light pink background for soft-deleted rows
+				tr.innerHTML = `
+					<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>${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><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>
+				`;
+				tbody.appendChild(tr);
+			});
+		}
+
+		function resetDeletedEmployeesModal() {
+			document.getElementById("deleted-employee-search-input").value = "";
+			document.getElementById("deleted-employee-tbody").innerHTML = "";
+			document.getElementById("no-deleted-employees-found").style.display = "none";
+			deletedEmployeesList = [];
+			filteredDeletedEmployeesList = [];
+		}
+
+		function exportDeletedEmployeesToCSV() {
+			if (filteredDeletedEmployeesList.length === 0) {
+				alert("No employee records to export!");
+				return;
+			}
+
+			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";
+
+			filteredDeletedEmployeesList.forEach((emp, index) => {
+				const row = [
+					index + 1,
+					`"${(emp.emp_code || '-').replace(/"/g, '""')}"`,
+					`"${(emp.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, '""')}"`,
+					`"${formatDateTime(emp.updated_at || emp.cdate)}"`,
+					`"${(emp.updated_by_name || '-').replace(/"/g, '""')}"`,
+					"Inactive"
+				];
+				csvContent += row.join(",") + "\n";
+			});
+
+			const encodedUri = encodeURI(csvContent);
+			const link = document.createElement("a");
+			link.setAttribute("href", encodedUri);
+			link.setAttribute("download", "deleted_employees.csv");
+			document.body.appendChild(link);
+			link.click();
+			document.body.removeChild(link);
+		}
+
 		function resetDeleteEmployeeModal() {
 			document.getElementById("delete-modal-vendor-select").value = "";
 			document.getElementById("delete-modal-workorder-select").innerHTML = '<option value="">-- Select Work Order --</option>';