implemented few more modules under sm login

src/main/java/com/gcc/communityHall/controller/SmController.java

@@ -305,6 +305,7 @@ public class SmController {
             return "redirect:/communityhall/login";
         }
     }
+
     private List<Object[]> handleBookingHallDetailsReportRequest(String request, String fromDate, String toDate,
             String filterby, String zone, String division, Integer hallid) {
         if (!request.equals("5")) {
@@ -326,7 +327,8 @@ public class SmController {
 
         return new ArrayList<>();
     }
-     private List<Users> handleUserRequest(String request, String fromDate, String toDate, String userstatus,
+
+    private List<Users> handleUserRequest(String request, String fromDate, String toDate, String userstatus,
             String usertype) {
         if (!request.equals("1")) {
             return new ArrayList<>();
@@ -424,8 +426,6 @@ public class SmController {
         return new ArrayList<>();
     }
 
-    
-
     @GetMapping("/logout")
     public String viewLogout(Model model, HttpSession session) {
         session.invalidate();
@@ -433,14 +433,948 @@ public class SmController {
         return "redirect:/communityhall/login";
     }
 
+    @GetMapping("/approval-history")
+    public String viewApproval(Model model, HttpSession session) {
+        String headquartersname = (String) session.getAttribute("usertype");
+        if (headquartersname != null && "sm".equals(headquartersname)) {
+            long mobileno = (long) session.getAttribute("mobileno");
+            model.addAttribute("mobileno", mobileno);
+            model.addAttribute("headquartersname", headquartersname);
+            model.addAttribute("title", "approvalcontrol");
+            List<Users> Pending = usersRepository.getPendingList();
+            String zone = (String) session.getAttribute("zone");
+            model.addAttribute("zone", zone);
+            model.addAttribute("pendinglist", Pending);
+            return "sm/approval-history";
+        } else {
+            session.invalidate(); // Invalidate the session to clear all session attributes
+            return "redirect:/communityhall/login";
+        }
+    }
+
+    @GetMapping("/user-approved")
+    public String viewUserApproved(Model model, HttpSession session) {
+        String headquartersname = (String) session.getAttribute("usertype");
+        if (headquartersname != null && "sm".equals(headquartersname)) {
+            long mobileno = (long) session.getAttribute("mobileno");
+            model.addAttribute("mobileno", mobileno);
+            model.addAttribute("headquartersname", headquartersname);
+            model.addAttribute("title", "reasondetails");
+            List<Users> approved = usersRepository.getUserApproved();
+            String zone = (String) session.getAttribute("zone");
+            model.addAttribute("zone", zone);
+            model.addAttribute("approvedlist", approved);
+            return "sm/user-approved";
+        } else {
+            session.invalidate(); // Invalidate the session to clear all session attributes
+            return "redirect:/communityhall/login";
+        }
+    }
+
+    @GetMapping("/user-reject")
+    public String viewUserReject(Model model, HttpSession session) {
+        String headquartersname = (String) session.getAttribute("usertype");
+        if (headquartersname != null && "sm".equals(headquartersname)) {
+            long mobileno = (long) session.getAttribute("mobileno");
+            model.addAttribute("mobileno", mobileno);
+            model.addAttribute("headquartersname", headquartersname);
+            model.addAttribute("title", "reasondetails");
+            List<Users> reject = usersRepository.getUserReject();
+            String zone = (String) session.getAttribute("zone");
+            model.addAttribute("zone", zone);
+            model.addAttribute("rejectedlist", reject);
+            return "sm/user-reject";
+        } else {
+            session.invalidate(); // Invalidate the session to clear all session attributes
+            return "redirect:/communityhall/login";
+        }
+    }
+
+    @GetMapping("/ongoingevents")
+    public String viewRecentevents(Model model, HttpSession session) {
+        String headquartersname = (String) session.getAttribute("usertype");
+        if (headquartersname != null && "sm".equals(headquartersname)) {
+            long mobileno = (long) session.getAttribute("mobileno");
+            model.addAttribute("mobileno", mobileno);
+            List<BookingDetails> presenteventslist = bookingDetailsRepository.findPresentBookingList();
+            List<BookingDetails> pasteventslist = bookingDetailsRepository.findPastEventsList();
+            List<BookingDetails> futureeventslist = bookingDetailsRepository.findFutureEventsList();
+            model.addAttribute("title", "settlement initiate");
+            model.addAttribute("headquartersname", headquartersname);
+            model.addAttribute("presenteventslist", presenteventslist);
+            model.addAttribute("pasteventslist", pasteventslist);
+            model.addAttribute("futureeventslist", futureeventslist);
+            return "sm/ongoingevents";
+        } else {
+            session.invalidate(); // Invalidate the session to clear all session attributes
+            return "redirect:/communityhall/login";
+        }
+    }
+
+    @GetMapping("/booking-list")
+    public String viewBookingList(Model model, HttpSession session) {
+        String headquartersname = (String) session.getAttribute("usertype");
+        if (headquartersname != null && "sm".equals(headquartersname)) {
+            long mobileno = (long) session.getAttribute("mobileno");
+            model.addAttribute("mobileno", mobileno);
+            model.addAttribute("headquartersname", headquartersname);
+            List<BookingDetails> bookingList = bookingDetailsRepository.getAllApprovedList();
+            model.addAttribute("bookingList", bookingList);
+            return "sm/booking-list"; // Assuming "officer/rejected-booking-list" is the name of your HTML
+                                      // template
+        } else {
+            session.invalidate(); // Invalidate the session to clear all session attributes
+            return "redirect:/communityhall/login";
+        }
+    }
+
+    @GetMapping("/rejected-list")
+    public String viewRejectedBookings(Model model, HttpSession session) {
+        String headquartersname = (String) session.getAttribute("usertype");
+        if (headquartersname != null && "sm".equals(headquartersname)) {
+            long mobileno = (long) session.getAttribute("mobileno");
+            model.addAttribute("mobileno", mobileno);
+            model.addAttribute("headquartersname", headquartersname);
+            List<BookingDetails> rejectedBookings = bookingDetailsRepository.getAllRejectingList();
+            model.addAttribute("rejectedBookings", rejectedBookings);
+
+            return "sm/rejected-list";
+        } else {
+            session.invalidate(); // Invalidate the session to clear all session attributes
+            return "redirect:/communityhall/login";
+        }
+    }
+
+    @GetMapping("/bookingwaitinglist")
+    public String viewWaitingBookings(Model model, HttpSession session) {
+        String headquartersname = (String) session.getAttribute("usertype");
+        if (headquartersname != null && "sm".equals(headquartersname)) {
+            long mobileno = (long) session.getAttribute("mobileno");
+            model.addAttribute("mobileno", mobileno);
+            model.addAttribute("headquartersname", headquartersname);
+            List<BookingDetails> waitingBookings = bookingDetailsRepository.getAllwaitingList();
+            model.addAttribute("waitingBookings", waitingBookings);
+
+            return "sm/bookingwaiting";
+        } else {
+            session.invalidate(); // Invalidate the session to clear all session attributes
+            return "redirect:/communityhall/login";
+        }
+    }
+
+    @GetMapping("/settlement-approved")
+    public String viewSettlementMaster(Model model, HttpSession session) {
+        String headquartersname = (String) session.getAttribute("usertype");
+        if (headquartersname != null && "sm".equals(headquartersname)) {
+            long mobileno = (long) session.getAttribute("mobileno");
+            model.addAttribute("mobileno", mobileno);
+            List<BookingDetails> approvedSettlements = bookingDetailsRepository.findAllWithApprovedRefundStatus();
+            List<BookingDetails> settlements = new ArrayList<>();
+            settlements.addAll(approvedSettlements);
+            List<BookingDetails> approvedcancelledbookings = bookingDetailsRepository.findCancelledList();
+            List<BookingDetails> approvedrejectedbookings = bookingDetailsRepository.findRejectedList();
+            model.addAttribute("headquartersname", headquartersname);
+            model.addAttribute("settlementlist", settlements);
+            model.addAttribute("approvedcancelledbookings", approvedcancelledbookings);
+            model.addAttribute("approvedrejectedbookings", approvedrejectedbookings);
+            return "sm/settlement-approved";
+        } else {
+            session.invalidate(); // Invalidate the session to clear all session attributes
+            return "redirect:/communityhall/login";
+        }
+    }
+
+    @GetMapping("/settlement-initiatedlist")
+    public String viewSettlementInitiatedMaster(Model model, HttpSession session) {
+        String headquartersname = (String) session.getAttribute("usertype");
+        if (headquartersname != null && "sm".equals(headquartersname)) {
+            long mobileno = (long) session.getAttribute("mobileno");
+            model.addAttribute("mobileno", mobileno);
+            List<BookingDetails> settlement = bookingDetailsRepository.findByBookingDetailsRefundStatus();
+            List<BookingDetails> Initiatedcancelledbookings = bookingDetailsRepository.findInitiatedCancelledList();
+            List<BookingDetails> Initiatedrejectedbookings = bookingDetailsRepository.findInitiatedRejectedList();
+            model.addAttribute("title", "settlement initiate");
+            model.addAttribute("headquartersname", headquartersname);
+            model.addAttribute("settlementlist", settlement);
+            model.addAttribute("Initiatedcancelledbookings", Initiatedcancelledbookings);
+            model.addAttribute("Initiatedrejectedbookings", Initiatedrejectedbookings);
+            return "sm/settlement-initiate";
+        } else {
+            session.invalidate(); // Invalidate the session to clear all session attributes
+            return "redirect:/communityhall/login";
+        }
+    }
+
+    @GetMapping("/settlement-list")
+    public String settlementPendingList(Model model, HttpSession session) {
+        String headquartersname = (String) session.getAttribute("usertype");
+        if (headquartersname != null && "sm".equals(headquartersname)) {
+            model.addAttribute("headquartersname", headquartersname);
+            long mobileno = (long) session.getAttribute("mobileno");
+            model.addAttribute("mobileno", mobileno);
+            model.addAttribute("title", "settlement Pending");
+            String zone = (String) session.getAttribute("zone");
+            model.addAttribute("zone", zone);
+            // ak
+            List<BookingDetails> settlementIntiated = bookingDetailsRepository.findSettlementInitiatedPending();
+            List<BookingDetails> settlement = bookingDetailsRepository.findAllSettlementPending();
+            List<BookingDetails> cancelledbookings = bookingDetailsRepository.findAllSettlementCancelledList();
+            List<BookingDetails> rejectedbookings = bookingDetailsRepository.findAllSettlementRejectedList();
+            model.addAttribute("settlementlist", settlement);
+            // AK
+            model.addAttribute("settlementIntiated", settlementIntiated);
+            model.addAttribute("cancelledbookings", cancelledbookings);
+            model.addAttribute("rejectedbookings", rejectedbookings);
+            return "sm/settlement-list";
+        } else {
+            session.invalidate();
+            return "redirect:/communityhall/login";
+        }
+    }
+
+    @GetMapping("/refundfailed-list")
+    public String RefundFailedList(Model model, HttpSession session) {
+        String headquartersname = (String) session.getAttribute("usertype");
+        if (headquartersname != null && "sm".equals(headquartersname)) {
+            model.addAttribute("headquartersname", headquartersname);
+            long mobileno = (long) session.getAttribute("mobileno");
+            model.addAttribute("mobileno", mobileno);
+            model.addAttribute("title", "settlementapproved");
+            String zone = (String) session.getAttribute("zone");
+            model.addAttribute("zone", zone);
+            List<BookingDetails> settlementrefundfailed = bookingDetailsRepository.findAllSettlementRefundFailed();
+            List<BookingDetails> refundfailedcancelledbookings = bookingDetailsRepository
+                    .findAllRefundFaileCancelledList();
+            List<BookingDetails> refundfailedrejectedbookings = bookingDetailsRepository
+                    .findAllRefundFaileRejectedList();
+            model.addAttribute("settlementrefundfailed", settlementrefundfailed);
+            model.addAttribute("refundfailedcancelledbookings", refundfailedcancelledbookings);
+            model.addAttribute("refundfailedrejectedbookings", refundfailedrejectedbookings);
+            return "sm/refund-failedlist";
+        } else {
+            session.invalidate();
+            return "redirect:/communityhall/login";
+        }
+    }
+
+    @GetMapping("/settlement-completedlist")
+    public String viewSettlementcompletedMaster(Model model, HttpSession session) {
+        String headquartersname = (String) session.getAttribute("usertype");
+        if (headquartersname != null && "sm".equals(headquartersname)) {
+            long mobileno = (long) session.getAttribute("mobileno");
+            model.addAttribute("mobileno", mobileno);
+            List<BookingDetails> completedlist = bookingDetailsRepository.findSettlementCompletedList();
+            List<BookingDetails> cancelledcompletedlist = bookingDetailsRepository.findCancelledCompletedList();
+            List<BookingDetails> rejectedcompletedlist = bookingDetailsRepository.findRejectedSettlementCompletedList();
+            model.addAttribute("title", "settlement initiate");
+            model.addAttribute("headquartersname", headquartersname);
+            model.addAttribute("completedlist", completedlist);
+            model.addAttribute("cancelledcompletedlist", cancelledcompletedlist);
+            model.addAttribute("rejectedcompletedlist", rejectedcompletedlist);
+            return "sm/settlement-completed";
+        } else {
+            session.invalidate(); // Invalidate the session to clear all session attributes
+            return "redirect:/communityhall/login";
+        }
+    }
+
+    @GetMapping("/settlementlist")
+    public String viewSettlementList(Model model, HttpSession session) {
+        String headquartersname = (String) session.getAttribute("usertype");
+        if (headquartersname != null && "sm".equals(headquartersname)) {
+            List<BookingDetails> settlemetList = bookingDetailsRepository.getAllSettlementList();
+            model.addAttribute("headquartersname", headquartersname);
+            model.addAttribute("settlemetList", settlemetList);
+            return "sm/settlementlist";
+        } else {
+            session.invalidate();
+            return "redirect:/communityhall/login";
+        }
+    }
+
+    @GetMapping("/headquarterspage")
+    public String viewcaretaker(Model model, HttpSession session, @RequestParam("bookingId") int bookingId) {
+        String caretakerName = (String) session.getAttribute("usertype");
+        if (caretakerName != null && "sm".equals(caretakerName)) {
+            long mobileno = (long) session.getAttribute("mobileno");
+            model.addAttribute("mobileno", mobileno);
+            model.addAttribute("caretakerName", caretakerName);
+            model.addAttribute("title", "caretaker");
+            model.addAttribute("baseURL", appConfig.getBaseUrl());
+            BookingDetails booking = bookingService.getBookingsById(bookingId);
+            model.addAttribute("booking", booking);
+            return "sm/headquarterspage";
+        } else {
+            session.invalidate();
+            return "redirect:/communityhall/login";
+        }
+    }
+
+    @GetMapping("/settlement-reject")
+    public String settlementRejectedList(Model model, HttpSession session) {
+        String headquartersname = (String) session.getAttribute("usertype");
+        if (headquartersname != null && "sm".equals(headquartersname)) {
+            List<BookingDetails> settlement = bookingDetailsRepository.findAllSettlementRejected();
+            model.addAttribute("headquartersname", headquartersname);
+            model.addAttribute("title", "Settlement Rejected");
+            model.addAttribute("rejectSettlementlist", settlement);
+            return "sm/settlement-reject";
+        } else {
+            session.invalidate();
+            return "redirect:/communityhall/login";
+        }
+    }
+
+    @GetMapping("/Gccblocking")
+    public String viewGccBlocking(Model model, HttpSession session) {
+        String headquartersname = (String) session.getAttribute("usertype");
+        if (headquartersname != null && "sm".equals(headquartersname)) {
+            long mobileno = (long) session.getAttribute("mobileno");
+            model.addAttribute("mobileno", mobileno);
+            model.addAttribute("headquartersname", headquartersname);
+            // Fetch all blocked GCC dates
+            List<GccBlockingDate> gccBlocked = blockingDateRepository.findAllBlocked();
+
+            // Ensure distinct by hallId, blockingReason, startDate, and endDate
+            List<GccBlockingDate> uniqueGccBlockingDates = gccBlocked.stream()
+                    .filter(distinctByKey(g -> Arrays.asList(
+                            g.getHallId(),
+                            g.getBlockingReason(),
+                            g.getStartDate(),
+                            g.getEndDate())))
+                    .collect(Collectors.toList());
+
+            // Map to store the count of blocked halls for each GccBlockingDate
+            Map<Integer, Integer> hallCountMap = new HashMap<>();
+            for (GccBlockingDate blockedDate : uniqueGccBlockingDates) {
+                // Parse and count unique hall IDs
+                String hallIds = blockedDate.getHallId();
+                if (hallIds != null && !hallIds.isEmpty()) {
+                    Set<String> uniqueHallIds = new HashSet<>(Arrays.asList(hallIds.split(",")));
+                    int hallCount = uniqueHallIds.size();
+                    hallCountMap.put(blockedDate.getBlockingId(), hallCount);
+                } else {
+                    hallCountMap.put(blockedDate.getBlockingId(), 0); // No halls blocked
+                }
+            }
+
+            // Add attributes to the model for the view
+            model.addAttribute("gccblocked", uniqueGccBlockingDates);
+            model.addAttribute("hallCountMap", hallCountMap);
+
+            return "sm/gccblocking";
+        } else {
+            session.invalidate(); // Invalidate the session to clear all session attributes
+            return "redirect:/communityhall/login";
+        }
+    }
+
+    // ── New enhanced GCC Blocking page (does NOT affect the existing page) ──
+    @GetMapping("/GccblockingNew")
+    public String viewGccBlockingNew(Model model, HttpSession session) {
+        String headquartersname = (String) session.getAttribute("usertype");
+        if (headquartersname != null && "sm".equals(headquartersname)) {
+            long mobileno = (long) session.getAttribute("mobileno");
+            model.addAttribute("mobileno", mobileno);
+            model.addAttribute("headquartersname", headquartersname);
+            return "sm/gccblocking-new";
+        } else {
+            session.invalidate();
+            return "redirect:/communityhall/login";
+        }
+    }
+
+    // Utility method to ensure distinct by a key
+    private static <T> Predicate<T> distinctByKey(Function<? super T, ?> keyExtractor) {
+        Set<Object> seen = new HashSet<>();
+        return t -> seen.add(keyExtractor.apply(t));
+    }
+
+    @GetMapping("/viewUploadNoc")
+    public String viewUploadNoc(Model model, HttpSession session) {
+        String headquartersname = (String) session.getAttribute("usertype");
+        if (headquartersname != null && "sm".equals(headquartersname)) {
+            long mobileno = (long) session.getAttribute("mobileno");
+            model.addAttribute("mobileno", mobileno);
+            model.addAttribute("headquartersname", headquartersname);
+
+            // Fetch waiting bookings
+            List<BookingDetails> waitingBookings = bookingDetailsRepository.getAllwaitingNOC();
+            // System.out.println("Waiting Bookings: " + waitingBookings.size());
+            model.addAttribute("waitingBookings", waitingBookings);
+
+            return "sm/viewUploadNoc";
+        } else {
+            session.invalidate(); // Invalidate the session to clear all session attributes
+            return "redirect:/communityhall/login";
+        }
+    }
+
+    // Newly added by kani for care-take and officer login creation 11/06/2026
+
+    @GetMapping("/login-creation")
+    public String viewLoginCreation(Model model, HttpSession session) {
+        String headquartersname = (String) session.getAttribute("usertype");
+        if (headquartersname != null && "sm".equals(headquartersname)) {
+            long mobileno = (long) session.getAttribute("mobileno");
+            model.addAttribute("mobileno", mobileno);
+            model.addAttribute("headquartersname", headquartersname);
+
+            // Fetch existing active non-admin logins (returns projection, not full entity)
+            List<Map<String, Object>> loginList = loginRepository.findActiveLogins();
+            model.addAttribute("loginList", loginList);
+
+            // Fetch hall details for the modal dropdown
+            List<Map<String, Object>> hallList = hallDetailsRepository.getAllHalls();
+            model.addAttribute("hallList", hallList);
+
+            return "sm/login-creation";
+        } else {
+            session.invalidate();
+            return "redirect:/communityhall/login";
+        }
+    }
+
+    @PostMapping("/login-creation/save")
+    @ResponseBody
+    @Transactional
+    public Map<String, Object> saveLoginCreation(
+            @RequestParam("mobileNumber") long mobileNumber,
+            @RequestParam("name") String name,
+            @RequestParam("password") String password,
+            @RequestParam("userType") String userType,
+            @RequestParam("zone") String zone,
+            @RequestParam(value = "hallIds", required = false) List<Integer> hallIds,
+            HttpSession session) {
+
+        Map<String, Object> response = new HashMap<>();
+        String headquartersname = (String) session.getAttribute("usertype");
+        if (headquartersname == null && "sm".equals(headquartersname)) {
+            response.put("status", "error");
+            response.put("message", "Session expired. Please log in again.");
+            return response;
+        }
+        try {
+            /* -------- Duplicate hall check for counter / caretaker -------- */
+            boolean isSingleMode = "counter".equals(userType) || "caretaker".equals(userType);
+            boolean isMulitpleMode = "officer".equals(userType);
+            if (isSingleMode && hallIds != null && !hallIds.isEmpty()) {
+                int hallId = hallIds.get(0);
+                int existingCount = loginRepository.countActiveLoginsByHallId(hallId, userType);
+                if (existingCount > 0) {
+                    // Fetch hall name for a clear message
+                    String hallName = hallId + "";
+                    try {
+                        String fetched = hallDetailsRepository.findHallNameById(hallId);
+                        if (fetched != null && !fetched.isBlank())
+                            hallName = fetched;
+                    } catch (Exception ignored) {
+                    }
+                    response.put("status", "error");
+                    response.put("message", "A login already exists for hall \"" + hallName
+                            + "\". Only one counter/caretaker login is allowed per hall.");
+                    return response;
+                }
+            }
+
+            /* -------- Duplicate hall check for officer -------- */
+            if (isMulitpleMode && hallIds != null && !hallIds.isEmpty()) {
+                int existingCount = loginRepository.getActiveLoginsByHallIds(hallIds, userType);
+                if (existingCount > 0) {
+                    response.put("status", "error");
+                    response.put("message",
+                            "A login already exists for the selected hall(s). Only one officer login is allowed per hall.");
+                    return response;
+                }
+            }
+
+            Login login = new Login();
+            login.setMobileNumber(mobileNumber);
+            login.setName(name);
+            login.setPassword(password);
+            login.setUserType(userType);
+            login.setZone(zone);
+            login.setActive(true);
+            login.setDelete(false);
+
+            if (hallIds == null || hallIds.isEmpty()) {
+                // HQ may have no hall assigned
+                loginRepository.save(login);
+            } else if (hallIds.size() == 1) {
+                // Single hall: store directly in login.hallId
+                login.setHallId(hallIds.get(0));
+                loginRepository.save(login);
+            } else {
+                // Multiple halls: store first in hallId, rest in login_hall_ids
+                login.setHallId(hallIds.get(0));
+                Login savedLogin = loginRepository.save(login);
+                for (int hallId : hallIds) {
+                    LoginHallId loginHallId = new LoginHallId(savedLogin, hallId);
+                    loginHallIdRepository.save(loginHallId);
+                }
+            }
+
+            response.put("status", "success");
+            response.put("message", "Login created successfully.");
+        } catch (Exception e) {
+            response.put("status", "error");
+            response.put("message", "Error creating login: " + e.getMessage());
+        }
+        return response;
+    }
+
+    @PostMapping("/login-creation/delete/{id}")
+    @ResponseBody
+    @Transactional
+    public Map<String, Object> deleteLogin(@PathVariable("id") int id, HttpSession session) {
+        Map<String, Object> response = new HashMap<>();
+        String headquartersname = (String) session.getAttribute("usertype");
+        if (headquartersname == null && "headquarters".equals(headquartersname)) {
+            response.put("status", "error");
+            response.put("message", "Session expired. Please log in again.");
+            return response;
+        }
+        try {
+            Login login = loginRepository.findLoginById(id);
+            if (login == null) {
+                response.put("status", "error");
+                response.put("message", "Login not found.");
+                return response;
+            }
+            // Soft delete: set is_active = 0, is_delete = 1
+            login.setActive(false);
+            login.setDelete(true);
+            loginRepository.save(login);
+
+            // Also soft-delete any related login_hall_ids
+            loginHallIdRepository.softDeleteByLoginId(id);
+
+            response.put("status", "success");
+            response.put("message", "Login deleted successfully.");
+        } catch (Exception e) {
+            response.put("status", "error");
+            response.put("message", "Error deleting login: " + e.getMessage());
+        }
+        return response;
+    }
+
+    @GetMapping("/login-creation/check-mobile")
+    @ResponseBody
+    public Map<String, Object> checkMobileExists(@RequestParam("mobileNumber") long mobileNumber, HttpSession session) {
+        Map<String, Object> response = new HashMap<>();
+        try {
+            int count = loginRepository.countByMobileNumber(mobileNumber);
+            response.put("exists", count > 0);
+        } catch (Exception e) {
+            response.put("exists", false);
+            response.put("error", e.getMessage());
+        }
+        return response;
+    }
+
+    @GetMapping("/login-creation/halls-by-zone")
+    @ResponseBody
+    public List<Map<String, Object>> getHallsByZone(@RequestParam("zone") String zone, HttpSession session) {
+        try {
+            return hallDetailsRepository.getHallsByZone(zone);
+        } catch (Exception e) {
+            return new java.util.ArrayList<>();
+        }
+    }
+
+    @GetMapping("/login-creation/get-login-halls")
+    @ResponseBody
+    public Map<String, Object> getLoginHalls(@RequestParam("loginId") int loginId, HttpSession session) {
+        Map<String, Object> response = new HashMap<>();
+        try {
+            Login login = loginRepository.findLoginById(loginId);
+            if (login == null) {
+                response.put("status", "error");
+                response.put("message", "Login not found.");
+                return response;
+            }
+            // Collect all assigned hall IDs
+            java.util.List<Integer> assignedHallIds = new java.util.ArrayList<>();
+            if (login.getHallId() != 0) {
+                assignedHallIds.add(login.getHallId());
+            }
+            loginHallIdRepository.findActiveByLoginId(loginId).forEach(lh -> assignedHallIds.add(lh.getHallId()));
 
+            response.put("status", "success");
+            response.put("loginId", loginId);
+            response.put("name", login.getName());
+            response.put("zone", login.getZone());
+            response.put("userType", login.getUserType());
+            response.put("assignedHallIds", assignedHallIds);
+            // Also return all halls for the zone
+            response.put("hallsForZone", hallDetailsRepository.getHallsByZone(login.getZone()));
+        } catch (Exception e) {
+            response.put("status", "error");
+            response.put("message", "Error fetching login halls: " + e.getMessage());
+        }
+        return response;
+    }
 
+    @PostMapping("/login-creation/update-halls")
+    @ResponseBody
+    @Transactional
+    public Map<String, Object> updateLoginHalls(
+            @RequestParam("loginId") int loginId,
+            @RequestParam("hallIds") java.util.List<Integer> hallIds,
+            HttpSession session) {
+        Map<String, Object> response = new HashMap<>();
+        try {
+            Login login = loginRepository.findLoginById(loginId);
+            if (login == null) {
+                response.put("status", "error");
+                response.put("message", "Login not found.");
+                return response;
+            }
+            if (hallIds == null || hallIds.isEmpty()) {
+                response.put("status", "error");
+                response.put("message", "At least one hall must be selected.");
+                return response;
+            }
+
+            // Clear all existing login_hall_ids rows for this login
+            loginHallIdRepository.softDeleteByLoginId(loginId);
+
+            if (hallIds.size() == 1) {
+                // Single hall: store in login.hall_id only
+                login.setHallId(hallIds.get(0));
+                loginRepository.save(login);
+            } else {
+                // Multiple halls: first goes to login.hall_id, rest to login_hall_ids
+                login.setHallId(hallIds.get(0));
+                loginRepository.save(login);
+                for (int i = 1; i < hallIds.size(); i++) {
+                    LoginHallId lh = new LoginHallId(login, hallIds.get(i));
+                    loginHallIdRepository.save(lh);
+                }
+            }
+            response.put("status", "success");
+            response.put("message", "Hall assignment updated successfully.");
+        } catch (Exception e) {
+            response.put("status", "error");
+            response.put("message", "Error updating halls: " + e.getMessage());
+        }
+        return response;
+    }
+
+    // hall creation newly added by kanimozhi 15062026
+    @PostMapping("/saveHallDetails")
+    public String saveHall(
+            @RequestParam String hallName,
+            @RequestParam float depositAmount,
+            @RequestParam float halfdepositAmt,
+            @RequestParam float halfDayAmt,
+            @RequestParam float fullDayAmt,
+            @RequestParam float gst,
+            @RequestParam float hallArea,
+            @RequestParam String ebNumber,
+            @RequestParam float ebCostPerUnit,
+            @RequestParam String parkingCapacity,
+            @RequestParam int seatingCapacity,
+            @RequestParam String doorNo,
+            @RequestParam String street,
+            @RequestParam String area,
+            @RequestParam String zone,
+            @RequestParam String division,
+            @RequestParam(required = false) String landMark,
+            @RequestParam String city,
+            @RequestParam int pinCode,
+            @RequestParam(required = false) String latitude,
+            @RequestParam(required = false) String longitude,
+            @RequestParam String hallInchargeName,
+            @RequestParam long hallInchargeNo,
+            @RequestParam("hallImages") MultipartFile[] hallImages,
+            @RequestParam(value = "floorName", required = false) List<String> floorNames,
+            @RequestParam(value = "floorCapacity", required = false) List<Double> floorCapacities,
+            @RequestParam(value = "mfDtUnit", defaultValue = "1") int mfDtUnit,
+            HttpSession session) {
+
+        String updatedId = (String) session.getAttribute("employeeId");
+        hallDetailService.saveHallByHQ(hallName, depositAmount, halfDayAmt, fullDayAmt, gst, hallArea, ebNumber,
+                ebCostPerUnit, parkingCapacity, seatingCapacity, doorNo,
+                street, area, zone, division, landMark, city, pinCode, latitude, longitude, hallInchargeName,
+                hallInchargeNo, updatedId, hallImages, halfdepositAmt, floorNames, floorCapacities, mfDtUnit);
+
+        return "redirect:/communityhall/sm/halldetailslist";
+    }
+
+    @GetMapping("/halldetailslist")
+    public String viewhalldetailsList(Model model, HttpSession session) {
+        List<HallDetails> list = hallDetailsRepository.findAll();
+        String headquartersname = (String) session.getAttribute("usertype");
+        if (headquartersname != null) {
+            long mobileno = (long) session.getAttribute("mobileno");
+            model.addAttribute("mobileno", mobileno);
+            model.addAttribute("adminname", headquartersname);
+            model.addAttribute("halllist", list);
+            return "sm/halldetailslist";
+        } else {
+            session.invalidate(); // Invalidate the session to clear all session attributes
+            return "redirect:/communityhall/login";
+        }
 
+    }
 
+    // Six months old transaction details – redesigned with 4 tabs
+    @GetMapping("/sixmonthold-transactions")
+    public String SixMonthOldTransactions(Model model, HttpSession session) {
+        String headquartersname = (String) session.getAttribute("usertype");
+        if (headquartersname != null && "sm".equals(headquartersname)) {
+            model.addAttribute("headquartersname", headquartersname);
+            long mobileno = (long) session.getAttribute("mobileno");
+            model.addAttribute("mobileno", mobileno);
+            model.addAttribute("title", "sixmonthold-transactions");
+            String zone = (String) session.getAttribute("zone");
+            model.addAttribute("zone", zone);
 
+            List<Map<String, Object>> sixMonthOldBookings = normalizeMapKeys(
+                    bookingDetailsRepository.findSixMonthOldNonCancelledRejectedBookings());
+            List<Map<String, Object>> cancelledBookings = normalizeMapKeys(
+                    bookingDetailsRepository.findSixMonthOldCancelledBookings());
+            List<Map<String, Object>> rejectedBookings = normalizeMapKeys(
+                    bookingDetailsRepository.findSixMonthOldRejectedBookings());
+            List<Map<String, Object>> mailSentBookings = normalizeMapKeys(
+                    bookingDetailsRepository.findMailSentBookings());
 
+            model.addAttribute("sixMonthOldBookings", sixMonthOldBookings);
+            model.addAttribute("cancelledBookings", cancelledBookings);
+            model.addAttribute("rejectedBookings", rejectedBookings);
+            model.addAttribute("mailSentBookings", mailSentBookings);
+            return "sm/sixmonthold-transactions";
+        } else {
+            session.invalidate();
+            return "redirect:/communityhall/login";
+        }
+    }
 
-    //sm
+    private List<Map<String, Object>> normalizeMapKeys(List<Map<String, Object>> list) {
+        if (list == null)
+            return new ArrayList<>();
+        List<Map<String, Object>> result = new ArrayList<>();
+        for (Map<String, Object> map : list) {
+            Map<String, Object> newMap = new HashMap<>();
+            for (Map.Entry<String, Object> entry : map.entrySet()) {
+                if (entry.getKey() != null) {
+                    newMap.put(entry.getKey().toLowerCase(), entry.getValue());
+                }
+            }
+            result.add(newMap);
+        }
+        return result;
+    }
+
+    @PostMapping("/sixmonthold-transactions/markMailSent")
+    @ResponseBody
+    @Transactional
+    public Map<String, Object> markMailSent(
+            @RequestParam("bookingId") int bookingId,
+            @RequestParam("bookingStatus") String bookingStatus,
+            @RequestParam(value = "transactionId", required = false) String transactionId,
+            @RequestParam(value = "tpslId", required = false) String tpslId,
+            @RequestParam(value = "transactionDate", required = false) String transactionDate,
+            @RequestParam(value = "refundAmount", required = false) Double refundAmount,
+            HttpSession session) {
+
+        Map<String, Object> response = new HashMap<>();
+        String headquartersname = (String) session.getAttribute("usertype");
+        if (headquartersname == null || !"sm".equals(headquartersname)) {
+            response.put("status", "error");
+            response.put("message", "Unauthorized");
+            return response;
+        }
+        try {
+            // 1. Send the actual SMTP email via JavaMailSender
+            String mailBody = mailService.sendRefundFollowupMail(
+                    bookingId, bookingStatus, transactionId, tpslId, transactionDate, refundAmount);
+
+            // 2. Update booking_details: mail_sent = 1, mail_sent_date = NOW()
+            bookingDetailsRepository.markMailSent(bookingId);
+
+            // 3. Write audit log entry
+            SixMonthMailLog log = new SixMonthMailLog(
+                    bookingId, bookingStatus, transactionId, tpslId, refundAmount, headquartersname, mailBody);
+            sixMonthMailLogRepository.save(log);
+
+            response.put("status", "success");
+            response.put("message", "Mail sent and recorded successfully for booking " + bookingId);
+        } catch (Exception e) {
+            response.put("status", "error");
+            response.put("message", "Error sending mail: " + e.getMessage());
+        }
+        return response;
+    }
+
+    @PostMapping("/sixmonthold-transactions/updateRefundDetails")
+    @ResponseBody
+    @Transactional
+    public Map<String, Object> updateRefundDetails(
+            @RequestParam("bookingId") int bookingId,
+            @RequestParam(value = "settlementId", required = false) Integer settlementId,
+            @RequestParam("bookingStatus") String bookingStatus,
+            @RequestParam("refundStatus") String refundStatus,
+            @RequestParam("refundDate") String refundDate,
+            @RequestParam("comments") String comments,
+            @RequestParam(value = "arnNumber", required = false) String arnNumber,
+            HttpSession session) {
+
+        Map<String, Object> response = new HashMap<>();
+        String headquartersname = (String) session.getAttribute("usertype");
+        if (headquartersname == null || !"headquarters".equals(headquartersname)) {
+            response.put("status", "error");
+            response.put("message", "Unauthorized");
+            return response;
+        }
+
+        try {
+            // Step 1: Fetch BookingDetails
+            BookingDetails booking = bookingDetailsRepository.findById(bookingId).orElse(null);
+            if (booking == null) {
+                response.put("status", "error");
+                response.put("message", "Booking not found for ID: " + bookingId);
+                return response;
+            }
+
+            // Get refundAmount and transactionId from latest SixMonthMailLog
+            List<SixMonthMailLog> mailLogs = sixMonthMailLogRepository.findByBookingIdOrderBySentAtDesc(bookingId);
+            SixMonthMailLog latestLog = (mailLogs != null && !mailLogs.isEmpty()) ? mailLogs.get(0) : null;
+            double refundedAmount = (latestLog != null && latestLog.getRefundAmount() != null)
+                    ? latestLog.getRefundAmount()
+                    : 0.0;
+            String transactionIdFromLog = (latestLog != null) ? latestLog.getTransactionId() : null;
+
+            // Step 2: Archive BookingDetails → booking_history
+            BookingHistory bookingHistory = new BookingHistory();
+            bookingHistory.setBookingStatus(booking.getBookingStatus());
+            bookingHistory.setRefundStatus(booking.getRefundStatus());
+            bookingHistory.setComments("Archived before updateRefundDetails. " + comments);
+            bookingHistory.setUpdatedBy("HQ");
+            bookingHistory.setCdate(new Date());
+            bookingHistory.setStartDate(booking.getStartDate());
+            bookingHistory.setEndDate(booking.getEndDate());
+            bookingHistory.setStartingSlot(booking.getStartingSlot());
+            bookingHistory.setEndingSlot(booking.getEndingSlot());
+            bookingHistory.setBookingDetails(booking);
+            bookingHistoryRepository.save(bookingHistory);
+
+            // Step 3: Update BookingDetails
+            booking.setBookingStatus(BookingDetails.BookingStatus.COMPLETED);
+            booking.setRefundStatus(BookingDetails.RefundStatus.COMPLETED);
+            booking.setComments(comments);
+            booking.setUpdatedDate(new java.text.SimpleDateFormat("yyyy-MM-dd HH:mm:ss").format(new Date()));
+            bookingDetailsRepository.save(booking);
+
+            // Steps 4 & 5: Settlement (APPROVED bookings only)
+            boolean isApproved = "APPROVED".equalsIgnoreCase(bookingStatus);
+            if (isApproved && booking.getSettlement() != null) {
+                Settlement settlement = booking.getSettlement();
+
+                // Step 4: Archive Settlement → settlement_history
+                SettlementHistory settlementHistory = new SettlementHistory();
+                settlementHistory.setSettlementId(settlement.getSettlementId());
+                settlementHistory.setComments(settlement.getComments());
+                settlementHistory.setCdate(settlement.getCdate());
+                settlementHistory.setDamageAmount(settlement.getDamageAmount());
+                settlementHistory.setEbAmount(settlement.getEbAmount());
+                settlementHistory.setDepositAmount(settlement.getDepositAmount());
+                settlementHistory.setRefundedAmount(settlement.getRefundedAmount());
+                settlementHistory.setUpdatedDate(settlement.getUpdatedDate());
+                settlementHistory.setUpdatedId(settlement.getUpdatedId());
+                settlementHistory.setChallon(settlement.getChallon());
+                settlementHistory.setDddate(settlement.getDddate());
+                settlementHistory.setDdnumber(settlement.getDdnumber());
+                settlementHistory.setBookingDetails(booking);
+                settlementHistory.setCollectionPending(settlement.getCollectionPending());
+                settlementHistory.setDdamount(settlement.getDdamount());
+                settlementHistory.setChallonnumber(settlement.getChallonnumber());
+                settlementHistory.setCollectionStatus(settlement.getCollectionStatus());
+                settlementHistory.setShDate(new Date());
+                settlementHistoryRepository.save(settlementHistory);
+
+                // Step 5: Update Settlement
+                settlement.setComments(comments);
+                settlement.setUpdatedDate(new Date());
+                settlement.setUpdatedId("HQ");
+                settlementRepository.save(settlement);
+            }
+
+            // Step 6: Upsert RefundTransaction
+            RefundTransaction refundTransaction = refundTransactionRepository.findByBookingId(bookingId);
+            if (refundTransaction == null) {
+                refundTransaction = new RefundTransaction();
+                refundTransaction.setBookingDetails(booking);
+            }
+            refundTransaction.setTransactionId(transactionIdFromLog);
+            refundTransaction.setAmountRefunded(refundedAmount);
+            refundTransaction.setCdate(new Date());
+            refundTransaction.setRefundStatus("0400");
+            refundTransactionRepository.save(refundTransaction);
+
+            // Step 7: Upsert RefundResponse
+            RefundResponse refundResponse = transRefundResRepository.findByBookingId(bookingId);
+            if (refundResponse == null) {
+                refundResponse = new RefundResponse();
+            }
+            refundResponse.setAmount(String.valueOf(booking.getAmountReceived()));
+            refundResponse.setBalaceAmount(String.valueOf(refundedAmount));
+            refundResponse.setBookingId(bookingId);
+            refundResponse.setDate(LocalDate.now());
+            refundResponse.setStatusCode("0400");
+            refundResponse.setTxansactionId(transactionIdFromLog);
+            refundResponse.setUserId("HQ");
+            refundResponse.setCdate(LocalDateTime.now());
+            refundResponse.setArnNumber(arnNumber);
+            refundResponse.setRefundedDate(LocalDate.parse(refundDate));
+            transRefundResRepository.save(refundResponse);
+
+            // Step 8: Application Log
+            ApplicationLogs appLog = new ApplicationLogs();
+            appLog.setBookingId(bookingId);
+            appLog.setLogType("UPDATE_REFUND_DETAILS");
+            appLog.setComments("RefundStatus set to " + refundStatus
+                    + " by HQ. ARN: " + arnNumber + ". Comments: " + comments);
+            Integer loginId = (Integer) session.getAttribute("id");
+            if (loginId != null)
+                appLog.setLoginId(loginId);
+            try {
+                InetAddress inetAddress = InetAddress.getLocalHost();
+                appLog.setIpaddress(inetAddress.getHostAddress());
+                appLog.setSystemName(InetAddress.getLocalHost().getHostName());
+            } catch (UnknownHostException uhe) {
+                // non-fatal
+            }
+            applicationLogsRepository.save(appLog);
+
+            response.put("status", "success");
+            response.put("message", "Refund details updated successfully for Booking ID " + bookingId);
+            response.put("bookingId", bookingId);
+
+        } catch (Exception e) {
+            response.put("status", "error");
+            response.put("message", "Error updating refund details: " + e.getMessage());
+        }
+        return response;
+    }
+
+    // Newly added for collection pending by kani
+
+    @GetMapping("/collectionpending")
+    public String viewCollectionPending(Model model, HttpSession session) {
+        String headquartersname = (String) session.getAttribute("usertype");
+        if (headquartersname != null && "sm".equals(headquartersname)) {
+            List<BookingDetails> collectionPendingList = bookingDetailsRepository.getAllCollectionPendingList();
+            model.addAttribute("headquartersname", headquartersname);
+            model.addAttribute("collectionPendingList", collectionPendingList);
+            return "sm/collection-pending";
+        } else {
+            session.invalidate();
+            return "redirect:/communityhall/login";
+        }
+    }
 
+    // sm
 
 }

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

@@ -7,86 +7,86 @@
             </a>
         </li>
         <!-- <li class="nav-main-item">
-            <a class="nav-main-link" href="/communityhall/headquarters/approval-history">
+            <a class="nav-main-link" href="/communityhall/sm/approval-history">
                 <i class="nav-main-link-icon fa fa-location-arrow"></i>
                 <span class="nav-main-link-name">User Pending List</span>
             </a>
         </li>
         <li class="nav-main-item">
-            <a class="nav-main-link" href="/communityhall/headquarters/user-approved">
+            <a class="nav-main-link" href="/communityhall/sm/user-approved">
                 <i class="nav-main-link-icon fa fa-location-arrow"></i>
                 <span class="nav-main-link-name">User Approval List</span>
             </a>
         </li>
         <li class="nav-main-item">
-            <a class="nav-main-link" href="/communityhall/headquarters/user-reject">
+            <a class="nav-main-link" href="/communityhall/sm/user-reject">
                 <i class="nav-main-link-icon fa fa-location-arrow"></i>
                 <span class="nav-main-link-name">User Rejected List</span>
             </a>
         </li>
         <li class="nav-main-item">
-            <a class="nav-main-link" href="/communityhall/headquarters/login-creation">
+            <a class="nav-main-link" href="/communityhall/sm/login-creation">
                 <i class="nav-main-link-icon fa fa-location-arrow"></i>
-                <span class="nav-main-link-name">Log2312in Creation</span>
+                <span class="nav-main-link-name">Login Creation</span>
             </a>
         </li>
         <li class="nav-main-item">
-            <a class="nav-main-link" href="/communityhall/headquarters/halldetailslist">
+            <a class="nav-main-link" href="/communityhall/sm/halldetailslist">
                 <i class="nav-main-link-icon fa fa-location-arrow"></i>
                 <span class="nav-main-link-name">Hall Details List</span>
             </a>
         </li>
         <li class="nav-main-item">
-            <a class="nav-main-link" href="/communityhall/headquarters/GccblockingNew">
+            <a class="nav-main-link" href="/communityhall/sm/GccblockingNew">
                 <i class="nav-main-link-icon fa fa-location-arrow"></i>
                 <span class="nav-main-link-name">GCC Blocking</span>
             </a>
-        </li>
+        </li>-->
         <li class="nav-main-item">
-            <a class="nav-main-link" href="/communityhall/headquarters/ongoingevents">
+            <a class="nav-main-link" href="/communityhall/sm/ongoingevents">
                 <i class="nav-main-link-icon fa fa-location-arrow"></i>
                 <span class="nav-main-link-name">Recent Events</span>
             </a>
         </li>
-        <li class="nav-main-item">
-            <a class="nav-main-link" href="/communityhall/headquarters/viewUploadNoc">
+        <!-- <li class="nav-main-item">
+            <a class="nav-main-link" href="/communityhall/sm/viewUploadNoc">
                 <i class="nav-main-link-icon fa fa-location-arrow"></i>
                 <span class="nav-main-link-name">Waiting For NOC </span>
             </a>
         </li>
         <li class="nav-main-item">
-            <a class="nav-main-link" href="/communityhall/headquarters/bookingwaitinglist">
+            <a class="nav-main-link" href="/communityhall/sm/bookingwaitinglist">
                 <i class="nav-main-link-icon fa fa-location-arrow"></i>
                 <span class="nav-main-link-name">Waiting For NOC Approval</span>
             </a>
-        </li>
+        </li>-->
         <li class="nav-main-item">
-            <a class="nav-main-link" href="/communityhall/headquarters/booking-list">
+            <a class="nav-main-link" href="/communityhall/sm/booking-list">
                 <i class="nav-main-link-icon fa fa-location-arrow"></i>
                 <span class="nav-main-link-name">Booking Approved List</span>
             </a>
         </li>
         <li class="nav-main-item">
-            <a class="nav-main-link" href="/communityhall/headquarters/rejected-list">
+            <a class="nav-main-link" href="/communityhall/sm/rejected-list">
                 <i class="nav-main-link-icon fa fa-location-arrow"></i>
                 <span class="nav-main-link-name">Booking Rejected List</span>
             </a>
         </li>
         <li class="nav-main-item">
-    <a class="nav-main-link" href="/communityhall/headquarters/settlement-approved">
-        <i class="nav-main-link-icon fa fa-location-arrow"></i>
-        <span class="nav-main-link-name">Settlement Approved List</span>
-    </a>
-</li>
-<li class="nav-main-item">
-    <a class="nav-main-link" href="/communityhall/headquarters/settlement-initiatedlist">
-        <i class="nav-main-link-icon fa fa-location-arrow"></i>
-        <span class="nav-main-link-name">Settlement Initiated List</span>
-    </a>
-</li>
+            <a class="nav-main-link" href="/communityhall/sm/settlement-approved">
+                <i class="nav-main-link-icon fa fa-location-arrow"></i>
+                <span class="nav-main-link-name">Settlement Approved List</span>
+            </a>
+        </li>
+        <li class="nav-main-item">
+            <a class="nav-main-link" href="/communityhall/sm/settlement-initiatedlist">
+                <i class="nav-main-link-icon fa fa-location-arrow"></i>
+                <span class="nav-main-link-name">Settlement Initiated List</span>
+            </a>
+        </li>
 
         <li class="nav-main-item">
-            <a class="nav-main-link" href="/communityhall/headquarters/collectionpending">
+            <a class="nav-main-link" href="/communityhall/sm/collectionpending">
                 <i class="nav-main-link-icon fa fa-location-arrow"></i>
                 <span class="nav-main-link-name">Collection Pending List</span>
             </a>
@@ -94,48 +94,48 @@
 
 
         <li class="nav-main-item">
-            <a class="nav-main-link" href="/communityhall/headquarters/settlement-list">
+            <a class="nav-main-link" href="/communityhall/sm/settlement-list">
                 <i class="nav-main-link-icon fa fa-location-arrow"></i>
                 <span class="nav-main-link-name">Settlement Pending List</span>
             </a>
         </li>
         <li class="nav-main-item">
-            <a class="nav-main-link" href="/communityhall/headquarters/settlement-reject">
+            <a class="nav-main-link" href="/communityhall/sm/settlement-reject">
                 <i class="nav-main-link-icon fa fa-location-arrow"></i>
                 <span class="nav-main-link-name">Settlement Rejected List</span>
             </a>
         </li>
         <li class="nav-main-item">
-            <a class="nav-main-link" href="/communityhall/headquarters/settlementlist">
+            <a class="nav-main-link" href="/communityhall/sm/settlementlist">
                 <i class="nav-main-link-icon fa fa-location-arrow"></i>
                 <span class="nav-main-link-name">Settlement List</span>
             </a>
         </li>
         <li class="nav-main-item">
-            <a class="nav-main-link" href="/communityhall/headquarters/settlement-completedlist">
+            <a class="nav-main-link" href="/communityhall/sm/settlement-completedlist">
                 <i class="nav-main-link-icon fa fa-location-arrow"></i>
                 <span class="nav-main-link-name">Settlement Completed List</span>
             </a>
         </li>
         <li class="nav-main-item">
-            <a class="nav-main-link" href="/communityhall/headquarters/refundfailed-list">
+            <a class="nav-main-link" href="/communityhall/sm/refundfailed-list">
                 <i class="nav-main-link-icon fa fa-location-arrow"></i>
                 <span class="nav-main-link-name">Refund Failed List</span>
             </a>
         </li>
 
         <li class="nav-main-item">
-            <a class="nav-main-link" href="/communityhall/headquarters/sixmonthold-transactions">
+            <a class="nav-main-link" href="/communityhall/sm/sixmonthold-transactions">
                 <i class="nav-main-link-icon fa fa-location-arrow"></i>
                 <span class="nav-main-link-name">6 Months Old Transactions</span>
             </a>
         </li>
-         <li class="nav-main-item">
-            <a class="nav-main-link" href="/communityhall/headquarters/Gccblocking">
+        <!-- <li class="nav-main-item">
+            <a class="nav-main-link" href="/communityhall/sm/Gccblocking">
                 <i class="nav-main-link-icon fa fa-location-arrow"></i>
                 <span class="nav-main-link-name">Gcc Blocking</span>
             </a>
-        </li> -->
+        </li>-->
         <li class="nav-main-item">
             <a class="nav-main-link" href="/communityhall/sm/Reports">
                 <i class="nav-main-link-icon fa fa-location-arrow"></i>

src/main/resources/templates/sm/approval-history.html

@@ -0,0 +1,445 @@
+<!DOCTYPE html>
+<html xmlns:th="http://www.thymeleaf.org">
+
+<head th:replace="~{fragments/head-sm :: head}"></head>
+<style>
+	.toggle-button {
+		position: relative;
+		display: flex;
+		align-items: center;
+		width: 91px;
+		height: 33px;
+		padding: 5px;
+		border-radius: 25px;
+		cursor: pointer;
+		font-size: 14px;
+		color: white;
+		background-color: #f44336;
+		transition: background-color 0.4s;
+	}
+
+	.toggle-button.active {
+		background-color: #4CAF50;
+	}
+
+	.toggle-thumb {
+		position: absolute;
+		width: 30px;
+		height: 30px;
+		border-radius: 50%;
+		background-color: white;
+		transition: transform 0.4s;
+	}
+
+	.toggle-text {
+		flex-grow: 1;
+		text-align: center;
+		transition: transform 0.4s;
+	}
+
+	.toggle-button.active .toggle-thumb {
+		transform: translateX(55px);
+	}
+
+	.toggle-button.active .toggle-text {
+		transform: translateX(-16px);
+	}
+
+	.toggle-button.inactive .toggle-text {
+		transform: translateX(14px);
+	}
+</style>
+
+<body>
+	<!-- Page Container -->
+	<div id="page-container"
+		class="sidebar-o sidebar-dark enable-page-overlay side-scroll page-header-fixed page-header-dark">
+		<!-- Sidebar Nav-->
+		<aside th:replace="~{fragments/aside-right :: aside}"></aside>
+		<!-- END Side Overlay (right)-->
+		<!-- Sidebar Nav-->
+		<nav th:replace="~{fragments/nav-sm :: nav}"></nav>
+		<!-- END Sidebar -->
+		<!-- Header -->
+		<header th:replace="~{fragments/header-sm :: header}"></header>
+		<!-- END Header -->
+		<!-- Main Container -->
+		<main id="main-container">
+			<!-- Hero -->
+			<!-- END Hero -->
+			<div class="content">
+				<div class="block block-rounded">
+					<div class="block-header block-header-default">
+						<h3 class="block-title"> List of User Approval</h3>
+					</div>
+					<div class="block-content p-0">
+						<div class="p-sm-4 p-0">
+							<div class="table-responsive">
+								<table id="userPendingTable"
+									class="table table-bordered table-striped table-vcenter js-dataTable-responsive">
+									<thead class="thead-light">
+										<tr>
+											<th>S.no</th>
+											<th>Usertype</th>
+											<th>Name</th>
+											<th>Mobile Number</th>
+											<th>E-Mail ID</th>
+											<th>Area</th>
+											<th>Pincode</th>
+											<th>Action</th>
+										</tr>
+									</thead>
+									<tbody>
+										<!--<tbody th:each="registration, i : ${registrations}">-->
+										<!--<tr>-->
+										<tr th:each="users, rowStat : ${pendinglist}">
+											<!--<td class="text-center" th:text="${i.index + 1}"></td>-->
+											<td class="text-center" th:text="${rowStat.index + 1}"></td>
+											<td class="text-center" th:text="${users.usertype}"></td>
+											<td class="text-center" th:text="${users.name}"></td>
+											<td class="text-center" th:text="${users.mobileNo}"></td>
+											<td class="text-center" th:text="${users.email}"></td>
+											<td class="text-center" th:text="${users.area}"></td>
+											<td class="text-center" th:text="${users.pinCode}"></td>
+
+											<td>
+												<p>
+
+													<span class="badge bg-warning" style="cursor: pointer;"
+														th:onclick="pending([[${users.userId}]])">pending</span>
+
+												</p>
+
+
+											</td>
+										</tr>
+									</tbody>
+								</table>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</main>
+
+		<!-- END Main Container -->
+		<!--modal for pening-->
+		<div class="modal fade backdrop" id="pendingForm" data-backdrop="static" tabindex="-1" role="dialog"
+			aria-labelledby="staticBackdropLabel" aria-hidden="true">
+			<div class="modal-dialog modal-lg" role="document">
+				<div class="modal-content">
+					<form id="ownform" onsubmit="return rejectsubmit();">
+						<div class="block block-rounded block-themed block-transparent mb-0">
+							<div class="block-header bg-primary-dark">
+								<h3 class="block-title" id="2mtitle">User Information</h3>
+								<div class="block-options">
+									<button type="button" class="btn-block-option" data-bs-dismiss="modal"
+										aria-label="Close">
+										<i class="fa fa-fw fa-times"></i>
+									</button>
+								</div>
+							</div>
+							<div class="block-content row">
+								<!-- <div class="col-sm-4"> -->
+								<!-- <label class="form-label">Pet ID:<span class="text-danger">*</span></label> -->
+								<input type="hidden" class="form-control text-center" name="userid" id="userid"
+									disabled />
+								<!--<input type="hidden" class="form-control text-center" name="Mobii" id="Mobii"
+									disabled />-->
+
+								<!-- </div> -->
+								<div class="col-sm-4">
+									<label class="form-label">Name:<span class="text-danger"></span></label>
+									<input type="text" class="form-control text-center" name="name" id="name"
+										readonly />
+								</div>
+								<div class="col-sm-4">
+									<label class="form-label">Mobile No:<span class="text-danger"></span></label>
+									<input type="text" class="form-control text-center" name="mobile" id="mobile"
+										readonly />
+								</div>
+								<div class="col-sm-4">
+									<label class="form-label">E-Mail ID:<span class="text-danger"></span></label>
+									<input type="text" class="form-control text-center" name="email" id="email"
+										readonly />
+								</div>
+								<div class="col-sm-4">
+									<label class="form-label">Street:<span class="text-danger"></span></label>
+									<input type="text" class="form-control text-center" name="street" id="street"
+										readonly />
+								</div>
+								<div class="col-sm-4">
+									<label class="form-label">Area:<span class="text-danger"></span></label>
+									<input type="text" class="form-control text-center" name="area" id="area"
+										readonly />
+								</div>
+								<div class="col-sm-4">
+									<label class="form-label">Location:<span class="text-danger"></span></label>
+									<input type="text" class="form-control text-center" name="location" id="location"
+										readonly />
+								</div>
+
+								<div class="col-sm-4">
+									<label class="form-label">Pincode:<span class="text-danger"></span></label>
+									<input type="text" class="form-control text-center" name="pincode" id="pincode"
+										readonly />
+								</div>
+								<div class="col-sm-4">
+									<label class="form-label">User Type:<span class="text-danger"></span></label>
+									<input type="text" class="form-control text-center" name="usertype" id="usertype"
+										readonly />
+								</div>
+								<div class="col-sm-4" style="display:none" id="idField">
+									<label class="form-label">User Type Id:<span class="text-danger"></span></label>
+									<input type="text" class="form-control text-center" name="governmentId"
+										id="governmentId" readonly />
+								</div>
+								<div class="col-sm-4" style="display:none" id="departmentField">
+									<label class="form-label">Department:<span class="text-danger"></span></label>
+									<input type="text" class="form-control text-center" name="department"
+										id="department" readonly />
+								</div>
+								<div class="mb-4">
+									<label class="form-label">Reason:<span class="text-danger"></span></label>
+									<textarea class="form-control " name="reason" id="reason" required></textarea>
+								</div>
+
+							</div>
+						</div>
+						<div class="block-content block-content-full text-end bg-body" id="mbutton2">
+							<button type="button" class="btn btn-sm btn-alt-success"
+								th:onclick="accept()">Accept</button>
+							<button type="button" class="btn btn-sm btn-alt-secondary"
+								data-bs-dismiss="modal">Close</button>
+							<button type="submit" class="btn btn-sm btn-primary">Reject</button>
+						</div>
+					</form>
+				</div>
+			</div>
+		</div>
+
+		<div th:replace="~{fragments/resetpassword :: div}"></div>
+		<footer th:replace="~{fragments/footer2 :: footer}"></footer>
+
+		<!-- END Footer -->
+
+	</div>
+
+	<script th:replace="~{fragments/loginscript :: script}"></script>
+
+	<script>
+		$(document).ready(
+			function () {
+
+				// DataTables buttons configuration
+				var buttons = [{
+					extend: 'pageLength',
+					className: 'btn btn-primary'
+				}, {
+					title: 'Data export',
+					extend: 'copyHtml5',
+					text: 'Copy',
+					className: 'btn btn-primary',
+					id: 'copyBtn'
+				}, {
+					extend: 'excelHtml5',
+					text: 'Excel',
+					className: 'btn btn-primary',
+					id: 'excelBtn'
+				}, {
+					extend: 'csvHtml5',
+					text: 'CSV',
+					className: 'btn btn-primary',
+					id: 'csvBtn'
+				}, {
+					extend: 'pdfHtml5',
+					text: 'PDF',
+					className: 'btn btn-primary',
+					id: 'pdfBtn'
+				},
+
+				];
+
+				$('#userPendingTable').DataTable(
+					{
+						dom: 'Bftip',
+						columnDefs: [{
+							targets: 'no-sort',
+							orderable: false
+						}],
+						lengthMenu: [
+							[50, 100, 200, 500, -1],
+							['50 rows', '100 rows', '200 rows',
+								'500 rows', 'Show all']],
+						scrollY: '50vh',
+						fixedColumns: {
+							left: 1,
+							right: 1
+						},
+						buttons: [buttons],
+						responsive: true,
+						searching: true, // Enable search
+						select: false,
+						processing: false,
+					});
+
+				// Link the search input to DataTable
+				$('#searchInput').on('keyup', function () {
+					dataTable.search(this.value).draw();
+				});
+
+			});
+		//script to open pending form
+		function pending(userId) {
+			$.ajax({
+				type: "GET",
+				url: '/communityhall/api/officer/getUserDetails',
+				data: {
+					'usersid': userId
+				},
+				success: function (x) {
+					//console.log(x);
+					showUserInfo(x)
+				}
+			});
+
+		}
+
+		function showUserInfo(list) {
+			$('#pendingForm').modal({
+				backdrop: 'static',
+				keyboard: false
+			});
+			$('#pendingForm').modal('show');
+			document.getElementById("userid").value = list.userId;
+			document.getElementById("name").value = list.name;
+			document.getElementById("mobile").value = list.mobileNo;
+			document.getElementById("email").value = list.email;
+			document.getElementById("street").value = list.street;
+			document.getElementById("area").value = list.area;
+			document.getElementById("location").value = list.location;
+			document.getElementById("pincode").value = list.pinCode;
+			document.getElementById("usertype").value = list.usertype;
+			document.getElementById("governmentId").value = list.governmentId
+			document.getElementById("department").value = list.department
+			if (list.usertype === 'GCC_EMPLOYEE' || list.usertype === 'PENSIONER') {
+				idField.style.display = 'block';
+				departmentField.style.display = 'block';
+			} else {
+				idField.style.display = 'none';
+				departmentField.style.display = 'none';
+			}
+		}
+
+		function accept() {
+			let id = document.getElementById("userid").value;
+
+			Swal.fire({
+				title: 'Do you want to Accept this User ?',
+				showDenyButton: true,
+				showCancelButton: true,
+				confirmButtonText: 'YES',
+				denyButtonText: `NO`,
+			}).then((result) => {
+				/* Read more about isConfirmed, isDenied below */
+				if (result.isConfirmed) {
+					$.ajax({
+						type: "POST",
+						url: '/communityhall/api/officer/updateApprovedStatus/' + id,
+						data: {
+							'status': 'APPROVED',
+							'comments': 'Accepted',
+							'userId': id
+						},
+						success: function (data, textStatus, xhr) {
+							if (xhr.status === 200) { // Check if the response status is OK
+								Swal.fire(
+									'Done',
+									'Successfully Accepted to the ID:' + id,
+									'success'
+								).then(() => {
+									location.reload();
+								});
+							} else {
+								Swal.fire(
+									'Error',
+									'Failed to accept the user',
+									'error'
+								);
+							}
+						},
+						error: function (xhr, textStatus, errorThrown) {
+							Swal.fire(
+								'Error',
+								'Failed to accept the user',
+								'error'
+							);
+						}
+					});
+				} else if (result.isDenied) {
+					Swal.fire('Changes are not saved', '', 'info')
+				}
+			});
+		}
+
+		function rejectsubmit() {
+			let id = document.getElementById("userid").value;
+			let reason = $("#reason").val();
+
+			Swal.fire({
+				title: 'Do you want to Reject this User ?',
+				showDenyButton: true,
+				showCancelButton: true,
+				confirmButtonText: 'YES',
+				denyButtonText: `NO`,
+			}).then((result) => {
+				/* Read more about isConfirmed, isDenied below */
+				if (result.isConfirmed) {
+					//console.log("Submitting rejection...");
+
+					$.ajax({
+						type: "POST",
+						url: '/communityhall/api/officer/updateRejectStatus/' + id,
+						data: {
+							'status': 'REJECTED',
+							'comments': reason,
+							'userId': id
+						},
+						success: function (data, textStatus, xhr) {
+							//console.log("Rejection successful");
+							if (xhr.status === 200) { // Check if the response status is OK
+								Swal.fire(
+									'Done',
+									'Successfully Rejected to the ID:' + id,
+									'success'
+								).then(() => {
+									location.reload();
+								});
+							} else {
+								Swal.fire(
+									'Error',
+									'Failed to reject the user',
+									'error'
+								);
+							}
+						},
+						error: function (xhr, textStatus, errorThrown) {
+							console.error("Error:", errorThrown);
+							Swal.fire(
+								'Error',
+								'Failed to reject the user',
+								'error'
+							);
+						}
+					});
+				} else if (result.isDenied) {
+					Swal.fire('Changes are not saved', '', 'info')
+				}
+			});
+
+			return false; // Prevent form submission
+		}
+	</script>
+</body>
+
+</html>

src/main/resources/templates/sm/booking-list.html

@@ -0,0 +1,725 @@
+<!DOCTYPE html>
+<html xmlns:th="http://www.thymeleaf.org">
+
+<head th:replace="~{fragments/head-sm :: head}"></head>
+<style>
+	.card-body table {
+		width: 100%;
+		padding: 100px;
+	}
+
+	.card-body th,
+	td {
+		padding: 8px;
+		text-align: left;
+	}
+
+	.amount-cell {
+		text-align: right;
+		padding-right: 1rem;
+		/* Adjust padding as needed */
+	}
+
+	.table {
+		width: 100% !important;
+	}
+</style>
+
+<body>
+	<!-- Page Container -->
+	<div id="page-container"
+		class="sidebar-o sidebar-dark enable-page-overlay side-scroll page-header-fixed page-header-dark">
+		<!-- Sidebar Nav-->
+		<aside th:replace="~{fragments/aside-right :: aside}"></aside>
+		<!-- END Side Overlay (right)-->
+		<!-- Sidebar Nav-->
+		<nav th:replace="~{fragments/nav-sm :: nav}"></nav>
+		<!-- END Sidebar -->
+		<!-- Header -->
+		<header th:replace="~{fragments/header-sm :: header}"></header>
+		<!-- END Header -->
+		<!-- Main Container -->
+		<main id="main-container">
+			<div class="content">
+				<div class="block block-rounded">
+					<div class="block-header block-header-default">
+						<h3 class="block-title">List of Approved Bookings</h3>
+					</div>
+					<div class="block-content p-0">
+						<div class="p-sm-4 p-0">
+							<div class="table-responsive">
+								<table class="table table-bordered table-striped table-vcenter js-dataTable-responsive"
+									id="bookingapprovedtable">
+									<thead class="thead-light">
+										<tr>
+											<th class="text-center no-sort">S.No</th>
+											<th class="text-center">Booking Id</th>
+											<th class="text-center">Zone</th>
+											<th class="text-center">Division</th>
+											<th class="text-center" width="20%">Hall Name</th>
+											<th class="text-center">User Name</th>
+											<th class="text-center">User type</th>
+											<th class="text-center" width="10%">Booking Date</th>
+											<th class="text-center">Number of days</th>
+											<th class="text-center">Reason for Booking</th>
+											<th class="text-center">Caretaker Name/MobileNumber</th>
+											<th class="text-center">Action</th>
+										</tr>
+									</thead>
+									<tbody>
+										<tr th:each="booking, rowStat : ${bookingList}">
+											<td class="text-center" th:text="${rowStat.index + 1}"></td>
+											<td class="text-center" th:text="${booking.bookingId}"></td>
+											<td class="text-center" th:text="${booking.hallDetails.zone}"></td>
+											<td class="text-center" th:text="${booking.hallDetails.division}"></td>
+											<td class="text-center" th:text="${booking.hallDetails.hallName}"></td>
+											<td class="text-center" th:text="${booking.users.name}"></td>
+											<td class="text-center" th:text="${booking.users.usertype}"></td>
+											<td class="text-center" th:text="${booking.bookingDate}"></td>
+											<td class="text-center" th:text="${booking.noOfDays}"></td>
+											<td class="text-center" th:text="${booking.reason}"></td>
+											<td class="text-center"
+												th:text="${booking.hallDetails.hallInchargeName} + ' / ' + ${booking.hallDetails.hallInchargeMobno}">
+											</td>
+
+											<td>
+												<p>
+													<span class="badge bg-warning" style="cursor: pointer;"
+														th:onclick="pendingbooking([[${booking.bookingId}]])">Approved</span>
+												</p>
+											</td>
+										</tr>
+									</tbody>
+								</table>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</main>
+
+		<!-- END Main Container -->
+		<!--modal for pening-->
+		<div class="modal fade backdrop" id="pendingBookingForm" data-backdrop="static" tabindex="-1" role="dialog"
+			aria-labelledby="staticBackdropLabel" aria-hidden="true">
+			<div class="modal-dialog modal-lg" role="document">
+				<div class="modal-content">
+					<form id="ownform" onsubmit="return rejectsubmit();">
+						<div class="block block-rounded block-themed block-transparent mb-0">
+							<div class="block-header bg-primary-dark">
+								<h3 class="block-title" id="2mtitle">Booking Information</h3>
+								<div class="block-options">
+									<button type="button" class="btn-block-option" data-bs-dismiss="modal"
+										aria-label="Close">
+										<i class="fa fa-fw fa-times"></i>
+									</button>
+								</div>
+							</div>
+							<div class="block-content row">
+
+								<div class="col-md-12 col-lg-12 col-sm-12 mb-2">
+									<input type="hidden" class="form-control text-center" name="bookingid"
+										id="bookingid" disabled />
+									<div class="card-body">
+										<table>
+											<tr>
+												<th colspan="10" style="background-color: #f2f2f2;">User Details</th>
+											</tr>
+											<tr>
+												<th style="padding: 0.45rem 0.45rem;font-weight: normal;">User Name:
+												</th>
+												<td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
+													id="td_userName"></td>
+												<th style="padding: 0.45rem 0.45rem;font-weight: normal;">Mobile Number:
+												</th>
+												<td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
+													id="td_mobileNumber"></td>
+
+												<th style="padding: 0.45rem 0.45rem;font-weight: normal;">User Type:
+												</th>
+												<td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
+													id="td_usertype"></td>
+
+											</tr>
+											<tr>
+												<th style="padding: 0.45rem 0.45rem;font-weight: normal;">User Address:
+												</th>
+												<td colspan="5" class="fw-semibold" style="padding: 0.45rem 0.45rem;"
+													id="td_useraddress"></td>
+
+											</tr>
+
+										</table>
+									</div>
+								</div>
+
+								<div class="col-md-12 col-lg-12 col-sm-12 mb-2">
+									<input type="hidden" class="form-control text-center" name="bookingid"
+										id="bookingid" disabled />
+									<div class="card-body">
+										<table>
+											<tr>
+												<th colspan="10" style="background-color: #f2f2f2;">Hall Details</th>
+											</tr>
+
+											<tr>
+												<th style="padding: 0.45rem 0.45rem;font-weight: normal;">Hall Name:
+												</th>
+												<td colspan="10" class="fw-semibold" style="padding: 0.45rem 0.45rem;"
+													id="td_hallName"></td>
+
+											</tr>
+											<th style="padding: 0.45rem 0.45rem;font-weight: normal;">Hall Address:</th>
+											<td colspan="10" class="fw-semibold" style="padding: 0.45rem 0.45rem;"
+												id="td_halladdress"></td>
+
+											</tr>
+											<tr>
+												<th style="padding: 0.45rem 0.45rem;font-weight: normal;">Caretaker
+													Name:</th>
+												<td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
+													id="td_caretakername"></td>
+												<th style="padding: 0.45rem 0.45rem;font-weight: normal;">Caretaker
+													Mobile Number:</th>
+												<td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
+													id="td_caretakermobileNumber"></td>
+
+											</tr>
+
+										</table>
+									</div>
+								</div>
+								<div class="col-md-12 col-lg-12 col-sm-12">
+									<input type="hidden" class="form-control text-center" name="settlementid"
+										id="settlementid" disabled />
+									<div class="card-body">
+										<table>
+											<tr>
+												<th colspan="4" style="background-color: #f2f2f2;">Booking
+													Details (Booking Id:-<span id="booking_id"
+														style="color:blue"></span>)</th>
+											</tr>
+											<tr>
+												<th style="padding: 0.45rem 0.45rem;font-weight: normal">Booking Date:
+												</th>
+												<td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
+													id="td_bookingDate"></td>
+												<th style="padding: 0.45rem 0.45rem;font-weight: normal">Booking Status:
+												</th>
+												<td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
+													id="td_bookingStatus"></td>
+											</tr>
+											<tr>
+												<th style="padding: 0.45rem 0.45rem;font-weight: normal">Start Date:
+												</th>
+												<td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
+													id="td_startDate"></td>
+												<th style="padding: 0.45rem 0.45rem;font-weight: normal">Deposit
+													Amount:</th>
+												<td class="fw-semibold amount-cell" style="padding: 0.45rem 0.45rem;"
+													id="td_depositeAmount"></td>
+											</tr>
+											<tr>
+												<th style="padding: 0.45rem 0.45rem;font-weight: normal">END
+													Date:</th>
+												<td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
+													id="td_endDate"></td>
+												<th style="padding: 0.45rem 0.45rem;font-weight: normal">Hall Amount:
+												</th>
+												<td class="fw-semibold amount-cell" style="padding: 0.45rem 0.45rem;"
+													id="td_hallAmount"></td>
+											</tr>
+											<tr>
+												<th style="padding: 0.45rem 0.45rem;font-weight: normal">Starting Slot:
+												</th>
+												<td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
+													id="td_startingSlot"></td>
+												<th style="padding: 0.45rem 0.45rem;font-weight: normal">GST @18%:</th>
+												<td class="fw-semibold amount-cell" style="padding: 0.45rem 0.45rem;"
+													id="td_gst"></td>
+											</tr>
+											<tr>
+												<th style="padding: 0.45rem 0.45rem;font-weight: normal">Ending Slot:
+												</th>
+												<td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
+													id="td_endingSlot"></td>
+												<th style="padding: 0.45rem 0.45rem;font-weight: normal">Total Amount:
+												</th>
+												<td class="fw-semibold amount-cell" style="padding: 0.45rem 0.45rem;"
+													id="td_totalAmount"></td>
+
+											</tr>
+										</table>
+									</div>
+								</div>
+
+								<div class="col-sm-12">
+									<!--<label class="form-label">Documents:<span class="text-danger"></span></label>-->
+									<div class="documents" id="documents"></div>
+								</div>
+
+								<div class="col-md-12 col-lg-12 col-sm-12 mb-2">
+									<input type="hidden" class="form-control text-center" name="bookingid"
+										id="bookingid" disabled />
+									<div class="card-body">
+										<table>
+											<tr>
+												<th colspan="10" style="background-color: #f2f2f2;">Booking Payment
+													Details</th>
+											</tr>
+
+											<tr>
+												<th style="padding: 0.45rem 0.45rem;font-weight: normal;">Transaction
+													ID:</th>
+												<td colspan="10" class="fw-semibold" style="padding: 0.45rem 0.45rem;"
+													id="td_transactionId"></td>
+
+											</tr>
+											<th style="padding: 0.45rem 0.45rem;font-weight: normal;">Amount Received:
+											</th>
+											<td colspan="10" class="fw-semibold" style="padding: 0.45rem 0.45rem;"
+												id="td_payamountReceived"></td>
+
+											</tr>
+											<tr>
+												<th style="padding: 0.45rem 0.45rem;font-weight: normal;">Transaction
+													Status:</th>
+												<td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
+													id="td_paymentStatus"></td>
+
+											</tr>
+
+										</table>
+									</div>
+								</div>
+								<div class="row" id="reasondetails">
+									<div class="col-md-6 mb-2">
+										<label class="form-label">Reason type :<span
+												class="text-danger">*</span></label>
+										<select class="form-control" id="reasontype">
+											<option value="0">Select Reason type</option>
+											<option value="1">Illegal</option>
+											<option value="2">Others</option>
+										</select>
+									</div>
+									<div class="col-md-6 mb-2">
+										<label class="form-label">Reason:<span class="text-danger">*</span></label>
+										<textarea class="form-control " name="reason" id="reason" required
+											style="height: 9px;"></textarea>
+										<div id="reasonValidationText" class="text-danger small mt-1"
+											style="display:none">
+											Reason is required.</div>
+									</div>
+								</div>
+
+							</div>
+						</div>
+						<div class="block-content block-content-full text-end bg-body" id="mbutton2">
+							<button type="button" class="btn btn-sm btn-alt-secondary"
+								data-bs-dismiss="modal">Close</button>
+							<!--<button type="button" class="btn btn-sm btn-primary" id="rejectbutton"
+								th:onclick="rejectsubmit()">Reject</button>-->
+						</div>
+					</form>
+				</div>
+			</div>
+		</div>
+		<!-- End Modal User -->
+		<!-- Footer -->
+		<div class="modal fade" id="fileModal" tabindex="-1" role="dialog" aria-labelledby="fileModalLabel"
+			aria-hidden="true">
+			<div class="modal-dialog modal-lg" role="document">
+				<div class="modal-content">
+					<div class="modal-header">
+						<h5 class="modal-title" id="fileModalLabel">File Preview</h5>
+						<button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
+							<span aria-hidden="true">&times;</span>
+						</button>
+					</div>
+					<div class="modal-body">
+						<embed id="filePreview" src="" width="100%" height="600px">
+					</div>
+					<div class="modal-footer">
+						<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+					</div>
+				</div>
+			</div>
+		</div>
+
+		<div th:replace="~{fragments/resetpassword :: div}"></div>
+		<footer th:replace="~{fragments/footer2 :: footer}"></footer>
+		<script th:replace="~{fragments/loginscript :: script}"></script>
+		<script>
+			//script to open pending form
+			function pendingbooking(bookingId) {
+				$.ajax({
+					type: "GET",
+					url: '/communityhall/api/officer/getBookingDetails',
+					data: {
+						'bookingsId': bookingId
+					},
+					success: function (x) {
+						//console.log(x);
+						showBookingInfo(x);
+					}
+				});
+
+			}
+
+			function showBookingInfo(list) {
+				$('#pendingBookingForm').modal({
+					backdrop: 'static',
+					keyboard: false
+				});
+				$('#pendingBookingForm').modal('show');
+				var todaydate = new Date().toISOString().split('T')[0];
+
+				// Convert startDate to YYYY-MM-DD format if needed
+				var startDate = new Date(list.startDate).toISOString().split('T')[0]; // Ensure this is in the correct format
+				if (startDate > todaydate) {
+					$('#reasondetails').show();
+					$('#rejectbutton').show();
+				} else {
+					$('#reasondetails').hide();
+					$('#rejectbutton').hide();
+				}
+				document.getElementById("td_userName").innerHTML = list.users.name;
+				document.getElementById("td_mobileNumber").innerHTML = list.users.mobileNo;
+				document.getElementById("td_usertype").innerHTML = list.users.usertype;
+				document.getElementById("bookingid").value = list.bookingId;
+				var userDetails = list.users;
+				var userDetailsString =
+					userDetails.doorNo + ", " +
+					userDetails.street + ", " +
+					userDetails.area + ", " +
+					userDetails.location + "- " +
+					userDetails.pinCode;
+				document.getElementById("td_useraddress").innerHTML = userDetailsString;
+				document.getElementById("td_hallName").innerHTML = list.hallDetails.hallName;
+				var hallDetails = list.hallDetails;
+				var hallDetailsString =
+					hallDetails.doorNo + ", " +
+					hallDetails.street + ", " +
+					hallDetails.area + ", " +
+					hallDetails.city + "- " +
+					hallDetails.pinCode;
+				document.getElementById("td_halladdress").innerHTML = hallDetailsString;
+				document.getElementById("td_caretakername").innerHTML = list.hallDetails.hallInchargeName;
+				document.getElementById("td_caretakermobileNumber").innerHTML = list.hallDetails.hallInchargeMobno;
+				document.getElementById("td_bookingDate").innerHTML = list.bookingDate;
+				document.getElementById("td_depositeAmount").innerHTML = '₹ ' + parseFloat(list.depositAmount).toFixed(2);
+				document.getElementById("td_hallAmount").innerHTML = '₹ ' + parseFloat(list.hallAmount).toFixed(2);
+				document.getElementById("td_totalAmount").innerHTML = '₹ ' + parseFloat(list.amountReceived).toFixed(2);
+				var gstcl = (list.hallAmount * (list.hallDetails.gst / 100));
+				var formattedGst = gstcl.toFixed(2);
+				document.getElementById("td_gst").innerHTML = '₹ ' + formattedGst;
+				document.getElementById("td_startDate").innerHTML = list.startDate;
+				document.getElementById("td_endDate").innerHTML = list.endDate;
+				document.getElementById("booking_id").innerHTML = list.bookingId;
+				function getTimeSlot(slotValue) {
+					//console.log("Slot Value in getTimeSlot function:", slotValue);
+					var timeSlot;
+					var trimmedSlotValue = String(slotValue).trim(); // Convert to string and then trim
+					if (trimmedSlotValue === '1') {
+						timeSlot = 'Morning';
+					} else if (trimmedSlotValue === '2') {
+						timeSlot = 'Evening';
+					} else {
+						timeSlot = 'Unknown';
+					}
+					//console.log("Time Slot:", timeSlot);
+					return timeSlot;
+				}
+				document.getElementById("td_startingSlot").innerHTML = getTimeSlot(list.startingSlot);
+				document.getElementById("td_endingSlot").innerHTML = getTimeSlot(list.endingSlot);
+				document.getElementById("td_bookingStatus").innerHTML = list.bookingStatus;
+				document.getElementById("td_transactionId").innerHTML = list.payments && list.payments.transactionId ? list.payments.transactionId : "NA";
+				// Check if amountReceived is not null, otherwise set to "NA"
+				document.getElementById("td_payamountReceived").innerHTML = list.payments && list.payments.amountReceived ? '₹ ' + list.payments.amountReceived : "NA";
+				// Check if paymentStatus is not null, otherwise set to "NA"
+				document.getElementById("td_paymentStatus").innerHTML = list.payments && list.payments.paymentStatus ? list.payments.paymentStatus : "NA";
+				showReasonDocuments(list);
+				if (list.reason === 'State Govt Event' || list.reason === 'Central Govt Event' || list.reason === 'Commercial & Others') {
+					// Disable the reject button
+					document.getElementById('rejectbutton').disabled = true;
+					// Hide the reasondetails div
+					$('#reasondetails').hide();
+				} else {
+					// Enable the reject button
+					document.getElementById('rejectbutton').disabled = false;
+					// Show the reasondetails div (if it was hidden before)
+					$('#reasondetails').show();
+				}
+			}
+			function showReasonDocuments(list) {
+				$.ajax({
+					type: "GET",
+					url: '/communityhall/api/officer/getReasonByName',
+					data: {
+						'reasonName': list.reason
+					},
+					success: function (x) {
+						// console.log(x);
+						showReasonWithDocument(x, list);
+					}
+				});
+			}
+			// Display booking documents
+			function showReasonWithDocument(reasonData, list) {
+				var reasonDocumentData = reasonData.reasonDocumentMasterList;
+				var bookingDocumentsList = list.bookingDocumentsList;
+				const reasonFieldsContainer = $('#documents');
+				reasonFieldsContainer.empty();
+				// Create a responsive table container
+				var tableResponsiveDiv = $('<div>').addClass('table-responsive');
+
+				// Create the table with Bootstrap classes and custom styles
+				var table = $('<table>').addClass('table table-bordered table-striped table-vcenter js-dataTable-responsive').css({
+					'width': '100%',
+					'height': 'auto',
+					'border': '1px solid black'
+				});
+				// Create the table header (thead)
+				var thead = $('<thead>').appendTo(table);
+				var headerRow = $('<tr>').appendTo(thead);
+				$('<th>').attr('colspan', '3').text('Document Details').css({
+					'color': 'black',
+					'font-weight': 'bold',
+					'background-color': '#f2f2f2',
+					'padding': '0.45rem 0.45rem'
+				}).appendTo(headerRow);
+
+				// Create header row for columns
+				var columnHeadersRow = $('<tr>').appendTo(thead);
+				$('<th>').text('S.No').appendTo(columnHeadersRow);
+				$('<th>').text('Required Info').appendTo(columnHeadersRow);
+				$('<th>').text('Required Documents').appendTo(columnHeadersRow);
+
+				// Create the table body (tbody)
+				var tbody = $('<tbody>').appendTo(table);
+
+				// Iterate through the documents list and populate rows
+				for (var i = 0; i < bookingDocumentsList.length; i++) {
+					(function (index) {
+						var row = $('<tr>').appendTo(tbody);
+						$('<td>').text(index + 1).appendTo(row);
+
+						// Determine the text content for the second cell
+						var name = bookingDocumentsList[index].name ? bookingDocumentsList[index].name : ''; // Empty string if name is null or undefined
+						var fieldText = reasonDocumentData[index].fieldName;
+						var fullText = name ? fieldText + ': ' + name : fieldText; // Include colon only if name is not empty
+
+						$('<td>').text(fullText).appendTo(row);
+
+						// Create a link to view document image
+						var viewLink = $('<a>').attr('href', 'javascript:void(0)').text(reasonDocumentData[index].docFieldName).on('click', function () {
+							showDocumentImage(bookingDocumentsList[index].bookingDocUrl);
+						});
+						$('<td>').append(viewLink).appendTo(row);
+					})(i);
+				}
+				// Append table to the responsive container
+				tableResponsiveDiv.append(table);
+				// Append table to the container in the DOM
+				reasonFieldsContainer.append(tableResponsiveDiv);
+			}
+
+			function showDocumentImage(fileURL) {
+				//console.log(fileURL);
+				openFileModal(fileURL);
+			}
+			// Event delegation for dynamically added elements
+			$(document).on('click', '.view-document', function () {
+				const fileURL = $(this).data('url');
+				openFileModal(fileURL);
+			});
+
+			function openFileModal(fileURL) {
+				$('#filePreview').attr('src', fileURL);
+				$('#fileModal').modal('show');
+			}
+
+			function accept() {
+				let id = document.getElementById("bookingid").value;
+				Swal.fire({
+					title: 'Do you want to Accept this User ?',
+					showDenyButton: true,
+					showCancelButton: true,
+					confirmButtonText: 'YES',
+					denyButtonText: 'NO',
+				}).then((result) => {
+					/* Read more about isConfirmed, isDenied below */
+					if (result.isConfirmed) {
+						$.ajax({
+							type: "POST",
+							url: '/communityhall/api/officer/updateBookingApproved/' + id,
+							data: {
+								'status': 'APPROVED',
+								'comments': 'Accepted',
+								'bookingId': id
+							},
+							success: function (data, textStatus, xhr) {
+								if (xhr.status === 200) { // Check if the response status is OK
+									Swal.fire(
+										'Done',
+										'Successfully Accepted to the ID:' + id,
+										'success'
+									).then(() => {
+										location.reload();
+									});
+								} else {
+									Swal.fire(
+										'Error',
+										'Failed to accept the user',
+										'error'
+									);
+								}
+							},
+							error: function (xhr, textStatus, errorThrown) {
+								Swal.fire(
+									'Error',
+									'Failed to accept the user',
+									'error'
+								);
+							}
+						});
+					} else if (result.isDenied) {
+						Swal.fire('Changes are not saved', '', 'info')
+					}
+				});
+			}
+
+			function rejectsubmit() {
+				let id = document.getElementById("bookingid").value;
+				let reason = document.getElementById("reason").value.trim();
+				let reasontype = document.getElementById("reasontype").value;
+
+				// Check if reason is empty only when rejecting
+				if (reason === "" || reason.length === 0) {
+					document.getElementById("reasonValidationText").style.display = "block";
+					return false; // Prevent form submission
+				} else {
+					document.getElementById("reasonValidationText").style.display = "none";
+				}
+
+				Swal.fire({
+					title: 'Do you want to Reject this User?',
+					showDenyButton: true,
+					showCancelButton: true,
+					confirmButtonText: 'YES',
+					denyButtonText: 'NO',
+				}).then((result) => {
+					if (result.isConfirmed) {
+						// Show loading popup
+						const loadingSwal = Swal.fire({
+							title: 'Processing...',
+							text: 'Please wait while we process the rejection.',
+							allowOutsideClick: false, // Prevent closing the popup
+							didOpen: () => {
+								Swal.showLoading(); // Show the loading spinner
+							},
+							showConfirmButton: false, // Hide the confirm button during loading
+						});
+
+						$.ajax({
+							type: "POST",
+							url: '/communityhall/api/officer/updateBookingReject/' + id,
+							data: {
+								'status': 'REJECTED',
+								'comments': reason,
+								'bookingId': id,
+								'reasontype': reasontype
+							},
+							success: function (data, textStatus, xhr) {
+								loadingSwal.close(); // Close the loading popup
+								if (xhr.status === 200) {
+									Swal.fire(
+										'Done',
+										'Successfully Rejected to the ID: ' + id,
+										'success'
+									).then(() => {
+										location.reload(); // Reload page after success
+									});
+								} else {
+									Swal.fire(
+										'Error',
+										'Failed to reject the user',
+										'error'
+									);
+								}
+							},
+							error: function (xhr, textStatus, errorThrown) {
+								loadingSwal.close(); // Close the loading popup
+								Swal.fire(
+									'Error',
+									'Failed to reject the user',
+									'error'
+								);
+							}
+						});
+					} else if (result.isDenied) {
+						Swal.fire('Changes are not saved', '', 'info');
+					}
+				});
+
+				return false; // Prevent form submission
+			}
+			$(document).ready(
+				function () {
+					var buttons = [{
+						extend: 'pageLength',
+						className: 'btn btn-primary'
+					}, {
+						title: 'Data export',
+						extend: 'copyHtml5',
+						text: 'Copy',
+						className: 'btn btn-primary',
+						id: 'copyBtn'
+					}, {
+						extend: 'excelHtml5',
+						text: 'Excel',
+						className: 'btn btn-primary',
+						id: 'excelBtn'
+					}, {
+						extend: 'csvHtml5',
+						text: 'CSV',
+						className: 'btn btn-primary',
+						id: 'csvBtn'
+					}, {
+						extend: 'pdfHtml5',
+						text: 'PDF',
+						className: 'btn btn-primary',
+						id: 'pdfBtn'
+					},
+					];
+					$('#bookingapprovedtable').DataTable(
+						{
+							dom: 'Bftip',
+							columnDefs: [{
+								targets: 'no-sort',
+								orderable: false
+							}],
+							lengthMenu: [
+								[50, 100, 200, 500, -1],
+								['50 rows', '100 rows', '200 rows',
+									'500 rows', 'Show all']],
+							scrollY: '50vh',
+							fixedColumns: {
+								left: 1,
+								right: 1
+							},
+							buttons: [buttons],
+							responsive: true,
+							searching: true, // Enable search
+							select: false,
+							processing: false,
+						});
+					// Link the search input to DataTable
+					$('#searchInput').on('keyup', function () {
+						dataTable.search(this.value).draw();
+					});
+				});
+		</script>
+</body>
+
+</html>

src/main/resources/templates/sm/bookingwaiting.html

@@ -0,0 +1,817 @@
+<!DOCTYPE html>
+<html xmlns:th="http://www.thymeleaf.org">
+
+<head th:replace="~{fragments/head-sm :: head}"></head>
+<style>
+	.card-body table {
+		width: 100%;
+		padding: 100px;
+	}
+
+	.card-body th,
+	td {
+		padding: 8px;
+		text-align: left;
+	}
+
+	.amount-cell {
+		text-align: right;
+		padding-right: 1rem;
+		/* Adjust padding as needed */
+	}
+
+	.table {
+		width: 100% !important;
+	}
+</style>
+
+<body>
+	<!-- Page Container -->
+	<div id="page-container"
+		class="sidebar-o sidebar-dark enable-page-overlay side-scroll page-header-fixed page-header-dark">
+		<!-- Sidebar Nav-->
+		<aside th:replace="~{fragments/aside-right :: aside}"></aside>
+		<!-- END Side Overlay (right)-->
+		<!-- Sidebar Nav-->
+		<nav th:replace="~{fragments/nav-sm :: nav}"></nav>
+		<!-- END Sidebar -->
+		<!-- Header -->
+		<header th:replace="~{fragments/header-sm :: header}"></header>
+		<!-- END Header -->
+		<!-- Main Container -->
+		<main id="main-container">
+			<div class="content">
+				<div class="block block-rounded">
+					<div class="block-header block-header-default">
+						<h3 class="block-title">List of Bookings Waiting for NOC Approval</h3>
+					</div>
+					<div class="block-content p-0">
+						<div class="p-sm-4 p-0">
+							<div class="table-responsive">
+								<table class="table table-bordered table-striped table-vcenter js-dataTable-responsive"
+									id="bookingapprovedtable">
+									<thead class="thead-light">
+										<tr>
+											<th class="text-center no-sort">S.No</th>
+											<th class="text-center">Booking Id</th>
+											<th class="text-center">Zone</th>
+											<th class="text-center">Division</th>
+											<th class="text-center" width="20%">Hall Name</th>
+											<th class="text-center">User Name</th>
+											<th class="text-center">User type</th>
+											<th class="text-center" width="10%">Booking Date</th>
+											<th class="text-center">Number of days</th>
+											<th class="text-center">Reason for Booking</th>
+											<th class="text-center">Caretaker Name/MobileNumber</th>
+											<th class="text-center">Action</th>
+										</tr>
+									</thead>
+									<tbody>
+										<tr th:each="booking, rowStat : ${waitingBookings}">
+											<td class="text-center" th:text="${rowStat.index + 1}"></td>
+											<td class="text-center" th:text="${booking.bookingId}"></td>
+											<td class="text-center" th:text="${booking.hallDetails.zone}"></td>
+											<td class="text-center" th:text="${booking.hallDetails.division}"></td>
+											<td class="text-center" th:text="${booking.hallDetails.hallName}"></td>
+											<td class="text-center" th:text="${booking.users.name}"></td>
+											<td class="text-center" th:text="${booking.users.usertype}"></td>
+											<td class="text-center" th:text="${booking.bookingDate}"></td>
+											<td class="text-center" th:text="${booking.noOfDays}"></td>
+											<td class="text-center" th:text="${booking.reason}"></td>
+											<td class="text-center"
+												th:text="${booking.hallDetails.hallInchargeName} + ' / ' + ${booking.hallDetails.hallInchargeMobno}">
+											</td>
+											<td>
+												<p>
+													<span class="badge bg-warning" style="cursor: pointer;"
+														th:onclick="pendingbooking([[${booking.bookingId}]])">Approve</span>
+												</p>
+											</td>
+										</tr>
+									</tbody>
+								</table>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</main>
+		<!-- END Main Container -->
+		<!--modal for pening-->
+		<div class="modal fade backdrop" id="pendingBookingForm" data-backdrop="static" tabindex="-1" role="dialog"
+			aria-labelledby="staticBackdropLabel" aria-hidden="true">
+			<div class="modal-dialog modal-lg" role="document">
+				<div class="modal-content">
+					<form id="ownform">
+						<div class="block block-rounded block-themed block-transparent mb-0">
+							<div class="block-header bg-primary-dark">
+								<h3 class="block-title" id="2mtitle">Booking Information</h3>
+								<div class="block-options">
+									<button type="button" class="btn-block-option" data-bs-dismiss="modal"
+										aria-label="Close">
+										<i class="fa fa-fw fa-times"></i>
+									</button>
+								</div>
+							</div>
+							<div class="block-content row">
+
+								<div class="col-md-12 col-lg-12 col-sm-12 mb-2">
+									<input type="hidden" class="form-control text-center" name="bookingid"
+										id="bookingid" disabled />
+									<div class="card-body">
+										<table>
+											<tr>
+												<th colspan="10" style="background-color: #f2f2f2;">User Details</th>
+											</tr>
+											<tr>
+												<th style="padding: 0.45rem 0.45rem;font-weight: normal;">User Name:
+												</th>
+												<td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
+													id="td_userName"></td>
+												<th style="padding: 0.45rem 0.45rem;font-weight: normal;">Mobile Number:
+												</th>
+												<td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
+													id="td_mobileNumber"></td>
+
+												<th style="padding: 0.45rem 0.45rem;font-weight: normal;">User Type:
+												</th>
+												<td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
+													id="td_usertype"></td>
+
+											</tr>
+											<tr>
+												<th style="padding: 0.45rem 0.45rem;font-weight: normal;">User Address:
+												</th>
+												<td colspan="5" class="fw-semibold" style="padding: 0.45rem 0.45rem;"
+													id="td_useraddress"></td>
+
+											</tr>
+
+										</table>
+									</div>
+								</div>
+
+								<div class="col-md-12 col-lg-12 col-sm-12 mb-2">
+									<input type="hidden" class="form-control text-center" name="bookingid"
+										id="bookingid" disabled />
+									<div class="card-body">
+										<table>
+											<tr>
+												<th colspan="10" style="background-color: #f2f2f2;">Hall Details</th>
+											</tr>
+
+											<tr>
+												<th style="padding: 0.45rem 0.45rem;font-weight: normal;">Hall Name:
+												</th>
+												<td colspan="10" class="fw-semibold" style="padding: 0.45rem 0.45rem;"
+													id="td_hallName"></td>
+
+											</tr>
+											<th style="padding: 0.45rem 0.45rem;font-weight: normal;">Hall Address:</th>
+											<td colspan="10" class="fw-semibold" style="padding: 0.45rem 0.45rem;"
+												id="td_halladdress"></td>
+
+											</tr>
+											<tr>
+												<th style="padding: 0.45rem 0.45rem;font-weight: normal;">Caretaker
+													Name:</th>
+												<td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
+													id="td_caretakername"></td>
+												<th style="padding: 0.45rem 0.45rem;font-weight: normal;">Caretaker
+													Mobile Number:</th>
+												<td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
+													id="td_caretakermobileNumber"></td>
+
+											</tr>
+
+										</table>
+									</div>
+								</div>
+								<div class="col-md-12 col-lg-12 col-sm-12">
+									<input type="hidden" class="form-control text-center" name="settlementid"
+										id="settlementid" disabled />
+									<div class="card-body">
+										<table>
+											<tr>
+												<th colspan="4" style="background-color: #f2f2f2;">Booking
+													Details (Booking Id:-<span id="booking_id"
+														style="color:blue"></span>)</th>
+											</tr>
+											<tr>
+												<th style="padding: 0.45rem 0.45rem;font-weight: normal">Booking Date:
+												</th>
+												<td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
+													id="td_bookingDate"></td>
+												<th style="padding: 0.45rem 0.45rem;font-weight: normal">Booking Status:
+												</th>
+												<td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
+													id="td_bookingStatus"></td>
+											</tr>
+											<tr>
+												<th style="padding: 0.45rem 0.45rem;font-weight: normal">Start Date:
+												</th>
+												<td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
+													id="td_startDate"></td>
+												<th style="padding: 0.45rem 0.45rem;font-weight: normal">Deposit
+													Amount:</th>
+												<td class="fw-semibold amount-cell" style="padding: 0.45rem 0.45rem;"
+													id="td_depositeAmount"></td>
+											</tr>
+											<tr>
+												<th style="padding: 0.45rem 0.45rem;font-weight: normal">END
+													Date:</th>
+												<td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
+													id="td_endDate"></td>
+												<th style="padding: 0.45rem 0.45rem;font-weight: normal">Hall Amount:
+												</th>
+												<td class="fw-semibold amount-cell" style="padding: 0.45rem 0.45rem;"
+													id="td_hallAmount"></td>
+											</tr>
+											<tr>
+												<th style="padding: 0.45rem 0.45rem;font-weight: normal">Starting Slot:
+												</th>
+												<td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
+													id="td_startingSlot"></td>
+												<th style="padding: 0.45rem 0.45rem;font-weight: normal">GST @18%:</th>
+												<td class="fw-semibold amount-cell" style="padding: 0.45rem 0.45rem;"
+													id="td_gst"></td>
+											</tr>
+											<tr>
+												<th style="padding: 0.45rem 0.45rem;font-weight: normal">Ending Slot:
+												</th>
+												<td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
+													id="td_endingSlot"></td>
+												<th style="padding: 0.45rem 0.45rem;font-weight: normal">Total Amount:
+												</th>
+												<td class="fw-semibold amount-cell" style="padding: 0.45rem 0.45rem;"
+													id="td_totalAmount"></td>
+
+											</tr>
+										</table>
+									</div>
+								</div>
+
+								<div class="col-sm-12">
+									<!--<label class="form-label">Documents:<span class="text-danger"></span></label>-->
+									<div class="documents" id="documents"></div>
+								</div>
+
+								<div class="col-md-12 col-lg-12 col-sm-12 mb-2">
+									<input type="hidden" class="form-control text-center" name="bookingid"
+										id="bookingid" disabled />
+									<div class="card-body">
+										<table>
+											<tr>
+												<th colspan="10" style="background-color: #f2f2f2;">Booking Payment
+													Details</th>
+											</tr>
+
+											<tr>
+												<th style="padding: 0.45rem 0.45rem;font-weight: normal;">Transaction
+													ID:</th>
+												<td colspan="10" class="fw-semibold" style="padding: 0.45rem 0.45rem;"
+													id="td_transactionId"></td>
+
+											</tr>
+											<th style="padding: 0.45rem 0.45rem;font-weight: normal;">Amount Received:
+											</th>
+											<td colspan="10" class="fw-semibold" style="padding: 0.45rem 0.45rem;"
+												id="td_payamountReceived"></td>
+
+											</tr>
+											<tr>
+												<th style="padding: 0.45rem 0.45rem;font-weight: normal;">Transaction
+													Status:</th>
+												<td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
+													id="td_paymentStatus"></td>
+
+											</tr>
+
+										</table>
+									</div>
+								</div>
+								<div class="row" id="reasondetails">
+									<div class="col-md-6 mb-2">
+										<label class="form-label">Reason type :<span
+												class="text-danger">*</span></label>
+										<select class="form-control" id="reasontype">
+											<option value="0">Select Reason type</option>
+											<option value="1">Illegal</option>
+											<option value="2">Others</option>
+										</select>
+									</div>
+									<div class="col-md-6 mb-2">
+										<label class="form-label">Reason:<span class="text-danger">*</span></label>
+										<textarea class="form-control " name="reason" id="reason" required
+											style="height: 9px;"></textarea>
+										<div id="reasonValidationText" class="text-danger small mt-1"
+											style="display:none">
+											Reason is required.</div>
+									</div>
+								</div>
+							</div>
+						</div>
+						<div class="block-content block-content-full text-end bg-body" id="mbutton2">
+							<button type="button" class="btn btn-sm btn-alt-secondary"
+								data-bs-dismiss="modal">Close</button>
+							<button type="button" class="btn btn-sm btn-primary" id="accepttbutton"
+								th:onclick="accept()">Approve</button>
+							<button type="button" class="btn btn-sm btn-primary" id="rejectbutton"
+								th:onclick="rejectsubmit()">Reject</button>
+						</div>
+					</form>
+				</div>
+			</div>
+		</div>
+		<!-- End Modal User -->
+		<!-- Footer -->
+		<div class="modal fade" id="fileModal" tabindex="-1" role="dialog" aria-labelledby="fileModalLabel"
+			aria-hidden="true">
+			<div class="modal-dialog modal-lg" role="document">
+				<div class="modal-content">
+					<div class="modal-header">
+						<h5 class="modal-title" id="fileModalLabel">File Preview</h5>
+						<button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
+							<span aria-hidden="true">&times;</span>
+						</button>
+					</div>
+					<div class="modal-body">
+						<embed id="filePreview" src="" width="100%" height="600px">
+					</div>
+					<div class="modal-footer">
+						<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+					</div>
+				</div>
+			</div>
+		</div>
+
+		<div th:replace="~{fragments/resetpassword :: div}"></div>
+		<footer th:replace="~{fragments/footer2 :: footer}"></footer>
+		<script th:replace="~{fragments/loginscript :: script}"></script>
+		<script>
+			//script to open pending form
+			function pendingbooking(bookingId) {
+				$.ajax({
+					type: "GET",
+					url: '/communityhall/api/officer/getBookingDetails',
+					data: {
+						'bookingsId': bookingId
+					},
+					success: function (x) {
+						// Check if the booking has been rescheduled (scheduleCount > 0)
+						if (x.scheduleCount > 0) {
+							// Fetch booking history to get the previously booked dates
+							$.ajax({
+								type: "GET",
+								url: '/communityhall/api/officer/getBookingHistory',
+								data: {
+									'bookingId': bookingId
+								},
+								success: function (historyList) {
+									if (historyList && historyList.length > 0) {
+										// The first history record holds the original (old) booking dates
+										var oldRecord = historyList[0];
+										var oldStartDate = oldRecord.startDate || 'N/A';
+										var oldEndDate = oldRecord.endDate || 'N/A';
+										var newStartDate = x.startDate || 'N/A';
+										var newEndDate = x.endDate || 'N/A';
+
+										Swal.fire({
+											icon: 'warning',
+											title: 'Date Change Notice',
+											html:
+												'<p>This booking was previously scheduled for:</p>' +
+												'<b>From: ' + oldStartDate + ' &nbsp; To: ' + oldEndDate + '</b>' +
+												'<br><br>' +
+												'<p>The date has since been changed to:</p>' +
+												'<b>From: ' + newStartDate + ' &nbsp; To: ' + newEndDate + '</b>',
+											confirmButtonText: 'OK, Proceed',
+											confirmButtonColor: '#3085d6'
+										}).then(function () {
+											// Record that the officer acknowledged this date-change notification
+											$.ajax({
+												type: 'POST',
+												url: '/communityhall/api/officer/acknowledgeNocNotification',
+												data: { 'bookingId': bookingId },
+												complete: function () {
+													// Open the modal whether the flag update succeeded or not
+													showBookingInfo(x);
+												}
+											});
+										});
+									} else {
+										// No history found — open modal directly
+										showBookingInfo(x);
+									}
+								},
+								error: function () {
+									// On history fetch error — open modal directly
+									showBookingInfo(x);
+								}
+							});
+						} else {
+							// scheduleCount === 0 — no rescheduling, open modal directly
+							showBookingInfo(x);
+						}
+					}
+				});
+
+			}
+
+			function showBookingInfo(list) {
+				$('#pendingBookingForm').modal({
+					backdrop: 'static',
+					keyboard: false
+				});
+				$('#pendingBookingForm').modal('show');
+				var todaydate = new Date().toISOString().split('T')[0];
+
+				// Convert startDate to YYYY-MM-DD format if needed
+				var startDate = new Date(list.startDate).toISOString().split('T')[0]; // Ensure this is in the correct format
+				if (startDate > todaydate) {
+					$('#reasondetails').show();
+					$('#rejectbutton').show();
+				} else {
+					$('#reasondetails').hide();
+					$('#rejectbutton').hide();
+				}
+				document.getElementById("td_userName").innerHTML = list.users.name;
+				document.getElementById("td_mobileNumber").innerHTML = list.users.mobileNo;
+				document.getElementById("td_usertype").innerHTML = list.users.usertype;
+				document.getElementById("bookingid").value = list.bookingId;
+				var userDetails = list.users;
+				var userDetailsString =
+					userDetails.doorNo + ", " +
+					userDetails.street + ", " +
+					userDetails.area + ", " +
+					userDetails.location + "- " +
+					userDetails.pinCode;
+				document.getElementById("td_useraddress").innerHTML = userDetailsString;
+				document.getElementById("td_hallName").innerHTML = list.hallDetails.hallName;
+				var hallDetails = list.hallDetails;
+				var hallDetailsString =
+					hallDetails.doorNo + ", " +
+					hallDetails.street + ", " +
+					hallDetails.area + ", " +
+					hallDetails.city + "- " +
+					hallDetails.pinCode;
+				document.getElementById("td_halladdress").innerHTML = hallDetailsString;
+				document.getElementById("td_caretakername").innerHTML = list.hallDetails.hallInchargeName;
+				document.getElementById("td_caretakermobileNumber").innerHTML = list.hallDetails.hallInchargeMobno;
+				document.getElementById("td_bookingDate").innerHTML = list.bookingDate;
+				document.getElementById("td_depositeAmount").innerHTML = '₹ ' + parseFloat(list.depositAmount).toFixed(2);
+				document.getElementById("td_hallAmount").innerHTML = '₹ ' + parseFloat(list.hallAmount).toFixed(2);
+				document.getElementById("td_totalAmount").innerHTML = '₹ ' + parseFloat(list.amountReceived).toFixed(2);
+				var gstcl = (list.hallAmount * (list.hallDetails.gst / 100));
+				var formattedGst = gstcl.toFixed(2);
+				document.getElementById("td_gst").innerHTML = '₹ ' + formattedGst;
+				document.getElementById("td_startDate").innerHTML = list.startDate;
+				document.getElementById("td_endDate").innerHTML = list.endDate;
+				document.getElementById("booking_id").innerHTML = list.bookingId;
+				function getTimeSlot(slotValue) {
+					//console.log("Slot Value in getTimeSlot function:", slotValue);
+					var timeSlot;
+					var trimmedSlotValue = String(slotValue).trim(); // Convert to string and then trim
+					if (trimmedSlotValue === '1') {
+						timeSlot = 'Morning';
+					} else if (trimmedSlotValue === '2') {
+						timeSlot = 'Evening';
+					} else {
+						timeSlot = 'Unknown';
+					}
+					//console.log("Time Slot:", timeSlot);
+					return timeSlot;
+				}
+				document.getElementById("td_startingSlot").innerHTML = getTimeSlot(list.startingSlot);
+				document.getElementById("td_endingSlot").innerHTML = getTimeSlot(list.endingSlot);
+				document.getElementById("td_bookingStatus").innerHTML = list.bookingStatus;
+				// Check if transactionId is not null, otherwise set to "NA"
+				document.getElementById("td_transactionId").innerHTML = list.payments && list.payments.transactionId ? list.payments.transactionId : "NA";
+
+				// Check if amountReceived is not null, otherwise set to "NA"
+				document.getElementById("td_payamountReceived").innerHTML = list.payments && list.payments.amountReceived ? '₹ ' + list.payments.amountReceived : "NA";
+
+				// Check if paymentStatus is not null, otherwise set to "NA"
+				document.getElementById("td_paymentStatus").innerHTML = list.payments && list.payments.paymentStatus ? list.payments.paymentStatus : "NA";
+				showReasonDocuments(list);
+			}
+			function showReasonDocuments(list) {
+				// console.log("Reason;;;"+list.reason);
+				$.ajax({
+					type: "GET",
+					url: '/communityhall/api/officer/getReasonByName',
+					data: {
+						'reasonName': list.reason
+					},
+					success: function (x) {
+						// console.log("getReasonByName:.."+x);
+						showReasonWithDocument(x, list);
+					}
+				});
+			}
+			// Display booking documents
+			function showReasonWithDocument(reasonData, list) {
+				var reasonDocumentData = reasonData.reasonDocumentMasterList;
+				var bookingDocumentsList = list.bookingDocumentsList;
+
+				console.log("reasonDocumentData;;;" + reasonDocumentData);
+				console.log("bookingDocumentsList;;;" + bookingDocumentsList);
+				const reasonFieldsContainer = $('#documents');
+				reasonFieldsContainer.empty();
+				// Create a responsive table container
+				var tableResponsiveDiv = $('<div>').addClass('table-responsive');
+
+				// Create the table with Bootstrap classes and custom styles
+				var table = $('<table>').addClass('table table-bordered table-striped table-vcenter js-dataTable-responsive').css({
+					'width': '100%',
+					'height': 'auto',
+					'border': '1px solid black'
+				});
+				// Create the table header (thead)
+				var thead = $('<thead>').appendTo(table);
+				var headerRow = $('<tr>').appendTo(thead);
+				$('<th>').attr('colspan', '3').text('Document Details').css({
+					'color': 'black',
+					'font-weight': 'bold',
+					'background-color': '#f2f2f2',
+					'padding': '0.45rem 0.45rem'
+				}).appendTo(headerRow);
+
+				// Create header row for columns
+				var columnHeadersRow = $('<tr>').appendTo(thead);
+				$('<th>').text('S.No').appendTo(columnHeadersRow);
+				$('<th>').text('Required Info').appendTo(columnHeadersRow);
+				$('<th>').text('Required Documents').appendTo(columnHeadersRow);
+
+				// Create the table body (tbody)
+				var tbody = $('<tbody>').appendTo(table);
+
+				// Helper: find the latest uploaded doc for a given master document entry.
+				// If docs have a booking_label, group by label prefix (e.g. NOC_1/NOC_2 under "NOC").
+				// Otherwise, use offset-from-end positional matching so that when a rescheduled
+				// re-upload exists (more docs than master entries), the newest doc is shown.
+				function getDocsForMaster(masterIndex, docFieldName) {
+					// Try label-based grouping first (e.g. NOC_1, NOC_2 → grouped under "NOC")
+					var labelPrefix = docFieldName ? docFieldName.replace(/[^a-zA-Z0-9]/g, '_') : null;
+					var labeled = bookingDocumentsList.filter(function (doc) {
+						return doc.booking_label && labelPrefix &&
+							doc.booking_label.toUpperCase().startsWith(labelPrefix.toUpperCase());
+					});
+					if (labeled.length > 0) return labeled;
+					// Fallback: offset-from-end positional match.
+					// When extra docs exist (e.g. 2 NOC uploads for 1 NOC master row),
+					// this picks the latest upload instead of the original.
+					var extraCount = bookingDocumentsList.length - reasonDocumentData.length;
+					var adjustedIndex = masterIndex + (extraCount > 0 ? extraCount : 0);
+					return bookingDocumentsList[adjustedIndex] ? [bookingDocumentsList[adjustedIndex]] : [];
+				}
+
+				// Iterate over the master document list (one entry per required document type)
+				for (var i = 0; i < reasonDocumentData.length; i++) {
+					(function (masterIndex) {
+						var masterDoc = reasonDocumentData[masterIndex];
+						var matchedDocs = getDocsForMaster(masterIndex, masterDoc.docFieldName);
+
+						var row = $('<tr>').appendTo(tbody);
+						$('<td>').text(masterIndex + 1).appendTo(row);
+
+						// Required Info cell (use name from first matched doc, if any)
+						var firstName = (matchedDocs.length > 0 && matchedDocs[0].name) ? matchedDocs[0].name : '';
+						var fullText = firstName ? masterDoc.fieldName + ': ' + firstName : masterDoc.fieldName;
+						$('<td>').text(fullText).appendTo(row);
+
+						// Document links cell — show all uploads for this master entry
+						var docLinksCell = $('<td>');
+						if (matchedDocs.length === 0) {
+							docLinksCell.text('Not uploaded');
+						} else if (matchedDocs.length === 1) {
+							// Single upload — show plain link with docFieldName label
+							(function (doc) {
+								var viewLink = $('<a>').attr('href', 'javascript:void(0)')
+									.text(masterDoc.docFieldName)
+									.on('click', function () { showDocumentImage(doc.bookingDocUrl); });
+								docLinksCell.append(viewLink);
+							})(matchedDocs[0]);
+						} else {
+							// Multiple uploads (e.g. NOC original + after reschedule) — show labeled links
+							var uploadLabels = ['Original', 'After Reschedule'];
+							for (var j = 0; j < matchedDocs.length; j++) {
+								(function (doc, uploadIndex) {
+									var label = uploadLabels[uploadIndex] || ('Upload ' + (uploadIndex + 1));
+									var viewLink = $('<a>').attr('href', 'javascript:void(0)')
+										.text(masterDoc.docFieldName + ' (' + label + ')')
+										.on('click', function () { showDocumentImage(doc.bookingDocUrl); });
+									if (uploadIndex > 0) docLinksCell.append($('<br>'));
+									docLinksCell.append(viewLink);
+								})(matchedDocs[j], j);
+							}
+						}
+						docLinksCell.appendTo(row);
+					})(i);
+				}
+				// Append table to the responsive container
+				tableResponsiveDiv.append(table);
+				// Append table to the container in the DOM
+				reasonFieldsContainer.append(tableResponsiveDiv);
+			}
+
+			function showDocumentImage(fileURL) {
+				//console.log(fileURL);
+				openFileModal(fileURL);
+			}
+			// Event delegation for dynamically added elements
+			$(document).on('click', '.view-document', function () {
+				const fileURL = $(this).data('url');
+				openFileModal(fileURL);
+			});
+
+			function openFileModal(fileURL) {
+				$('#filePreview').attr('src', fileURL);
+				$('#fileModal').modal('show');
+			}
+
+			function accept() {
+				let id = document.getElementById("bookingid").value;
+
+				Swal.fire({
+					title: 'Do you want to Accept this User?',
+					showDenyButton: true,
+					showCancelButton: true,
+					confirmButtonText: 'YES',
+					denyButtonText: 'NO',
+				}).then((result) => {
+					if (result.isConfirmed) {
+						// Show loading popup
+						const loadingSwal = Swal.fire({
+							title: 'Processing...',
+							text: 'Please wait while we process the acceptance.',
+							allowOutsideClick: false, // Prevent closing the popup
+							didOpen: () => {
+								Swal.showLoading(); // Show the loading spinner
+							},
+							showConfirmButton: false, // Hide the confirm button during loading
+						});
+
+						$.ajax({
+							type: "POST",
+							url: '/communityhall/api/officer/updateBookingApproved/' + id,
+							data: {
+								'status': 'APPROVED',
+								'comments': 'Accepted',
+								'bookingId': id
+							},
+							success: function (data, textStatus, xhr) {
+								loadingSwal.close(); // Close the loading popup
+								if (xhr.status === 200) {
+									Swal.fire(
+										'Done',
+										'Successfully Approved to the ID: ' + id,
+										'success'
+									).then(() => {
+										location.reload(); // Reload page after success
+									});
+								} else {
+									Swal.fire(
+										'Error',
+										'Failed to accept the Booking',
+										'error'
+									);
+								}
+							},
+							error: function (xhr, textStatus, errorThrown) {
+								loadingSwal.close(); // Close the loading popup
+								Swal.fire(
+									'Error',
+									'Failed to accept the Booking',
+									'error'
+								);
+							}
+						});
+					} else if (result.isDenied) {
+						Swal.fire('Changes are not saved', '', 'info');
+					}
+				});
+			}
+
+			function rejectsubmit() {
+				let id = document.getElementById("bookingid").value;
+				let reason = document.getElementById("reason").value.trim();
+				let reasontype = document.getElementById("reasontype").value;
+				// Check if reason is empty only when rejecting
+				if (reason === "" || reason.length === 0) {
+					document.getElementById("reasonValidationText").style.display = "block";
+					return false; // Prevent form submission
+				} else {
+					document.getElementById("reasonValidationText").style.display = "none";
+				}
+				Swal.fire({
+					title: 'Do you want to Reject this User ?',
+					showDenyButton: true,
+					showCancelButton: true,
+					confirmButtonText: 'YES',
+					denyButtonText: 'NO',
+				}).then((result) => {
+					/* Read more about isConfirmed, isDenied below */
+					if (result.isConfirmed) {
+						$.ajax({
+							type: "POST",
+							url: '/communityhall/api/officer/updateBookingReject/' + id,
+							data: {
+								'status': 'REJECTED',
+								'comments': reason,
+								'bookingId': id,
+								'reasontype': reasontype
+							},
+							success: function (data, textStatus, xhr) {
+								//console.log("Rejection successful");
+								if (xhr.status === 200) { // Check if the response status is OK
+									Swal.fire(
+										'Done',
+										'Successfully Rejected to the ID:' + id,
+										'success'
+									).then(() => {
+										location.reload();
+									});
+								} else {
+									Swal.fire(
+										'Error',
+										'Failed to reject the user',
+										'error'
+									);
+								}
+							},
+							error: function (xhr, textStatus, errorThrown) {
+								console.error("Error:", errorThrown);
+								Swal.fire(
+									'Error',
+									'Failed to reject the user',
+									'error'
+								);
+							}
+						});
+					} else if (result.isDenied) {
+						Swal.fire('Changes are not saved', '', 'info')
+					}
+				});
+				return false; // Prevent form submission
+			}
+
+			$(document).ready(
+				function () {
+					var buttons = [{
+						extend: 'pageLength',
+						className: 'btn btn-primary'
+					}, {
+						title: 'Data export',
+						extend: 'copyHtml5',
+						text: 'Copy',
+						className: 'btn btn-primary',
+						id: 'copyBtn'
+					}, {
+						extend: 'excelHtml5',
+						text: 'Excel',
+						className: 'btn btn-primary',
+						id: 'excelBtn'
+					}, {
+						extend: 'csvHtml5',
+						text: 'CSV',
+						className: 'btn btn-primary',
+						id: 'csvBtn'
+					}, {
+						extend: 'pdfHtml5',
+						text: 'PDF',
+						className: 'btn btn-primary',
+						id: 'pdfBtn'
+					},
+					];
+					$('#bookingapprovedtable').DataTable(
+						{
+							dom: 'Bftip',
+							columnDefs: [{
+								targets: 'no-sort',
+								orderable: false
+							}],
+							lengthMenu: [
+								[50, 100, 200, 500, -1],
+								['50 rows', '100 rows', '200 rows',
+									'500 rows', 'Show all']],
+							scrollY: '50vh',
+							fixedColumns: {
+								left: 1,
+								right: 1
+							},
+							buttons: [buttons],
+							responsive: true,
+							searching: true, // Enable search
+							select: false,
+							processing: false,
+						});
+					// Link the search input to DataTable
+					$('#searchInput').on('keyup', function () {
+						dataTable.search(this.value).draw();
+					});
+				});
+		</script>
+</body>
+
+</html>

src/main/resources/templates/sm/collection-pending.html

@@ -0,0 +1,741 @@
+<!DOCTYPE html>
+
+<html xmlns:th="http://www.thymeleaf.org">
+
+<head th:replace="~{fragments/head-admin :: head}"></head>
+
+<meta charset="ISO-8859-1">
+
+<!-- Include DataTables CSS -->
+
+</head>
+
+
+
+<style>
+	.block-content {
+		padding-bottom: 10px;
+	}
+
+	.small-input {
+		width: 150px;
+		/* Adjust the width as needed */
+	}
+
+	.small-table th,
+	.small-table td {
+		font-size: 14px;
+		/* Adjust font size as needed */
+	}
+
+	/* Reduce padding for table cells */
+	.small-table td,
+	.small-table th {
+		padding: 5px;
+		/* Adjust padding as needed */
+	}
+
+	.card-body table {
+		width: 100%;
+		padding: 100px;
+	}
+
+	.card-body th,
+	td {
+		padding: 8px;
+		text-align: left;
+	}
+
+	.amount-cell {
+		text-align: right;
+		padding-right: 1rem;
+		/* Adjust padding as needed */
+	}
+</style>
+
+<body>
+	<div id="page-container"
+		class="sidebar-o sidebar-dark enable-page-overlay side-scroll page-header-fixed page-header-dark">
+		<aside th:replace="~{fragments/aside-right :: aside}"></aside>
+		<nav th:replace="~{fragments/nav-sm :: nav}"></nav>
+		<header th:replace="~{fragments/header-sm :: header}"></header>
+
+		<div class="content" style="margin-top: 77px;">
+			<div class="block block-rounded">
+				<div class="block-header bg-info text-white" style="background-color: #2c726c !important">
+					<h3 class="block-title">Settlement List</h3>
+				</div>
+				<div class="block-content">
+					<div class="table-responsive">
+						<table id="settlementListTable" class="table table-bordered table-vcenter">
+							<thead>
+								<tr>
+									<th>S.No</th>
+									<th>Zone</th>
+									<th>Division</th>
+									<th>Booking Id</th>
+									<th>Booking Date</th>
+									<th>Settlement id</th>
+									<th>Settlement Raised Date</th>
+									<th>Deposit Amount</th>
+									<th>Collection Pending(if any)</th>
+									<th>Refund Amount</th>
+									<th>Refund Status</th>
+									<th>View Details</th>
+								</tr>
+							</thead>
+							<tbody>
+								<!-- Iterate over past bookings and display them -->
+								<tr th:each="settlemetList,rowStat : ${collectionPendingList}"
+									th:if="${settlemetList.settlement != null}">
+									<td class="text-center" th:text="${rowStat.index + 1}"></td>
+									<td class="text-center" th:text="${settlemetList.hallDetails.zone}"></td>
+									<td class="text-center" th:text="${settlemetList.hallDetails.division}"></td>
+									<td class="text-center" th:text="${settlemetList.bookingId}"></td>
+									<td class="text-center" th:text="${settlemetList.bookingDate}"></td>
+									<td class="text-center" th:text="${settlemetList.settlement.settlementId}"></td>
+									<td class="text-center" th:text="${settlemetList.settlement.cdate}"></td>
+									<td class="text-center" th:text="${settlemetList.settlement.depositAmount}"></td>
+									<td class="text-center" th:text="${settlemetList.settlement.collectionPending}">
+									</td>
+									<td class="text-center" th:text="${settlemetList.settlement.refundedAmount}"></td>
+									<td class="text-center" th:text="${settlemetList.refundStatus}"></td>
+									<td>
+										<span class="badge bg-primary" style="cursor:pointer"
+											th:onclick="approve([[${settlemetList.settlement.settlementId}]])">View</span>
+										<!-- <span class="badge bg-warning" style="cursor: pointer;"
+											th:if="${#strings.trim(settlemetList.RefundStatus) == 'REJECTED'}"
+											th:onclick="settleTheAmount([[${settlemetList.bookingId}]])">Raise
+											Again</span> -->
+										<!--<span class="badge bg-warning" style="cursor: pointer;"
+											th:if="${settlemetList.settlement.collectionPending > 0} and ${settlemetList.settlement.collectionStatus != 'paid'}"
+											th:onclick="|fetchQRCode(${settlemetList.bookingId})|">QR
+										</span>-->
+									</td>
+								</tr>
+
+
+
+
+							</tbody>
+						</table>
+					</div>
+				</div>
+			</div>
+		</div><br>
+		<br>
+		<br>
+		<br>
+
+
+	</div>
+	<!--modal for pending-->
+	<div class="modal fade backdrop" id="settlementinformation" data-backdrop="static" tabindex="-1" role="dialog"
+		aria-labelledby="staticBackdropLabel" aria-hidden="true">
+		<div class="modal-dialog modal-lg" role="document">
+			<div class="modal-content">
+
+				<form id="ownform">
+					<div class="block block-rounded block-themed block-transparent mb-0">
+
+						<div class="block-header bg-primary-dark">
+							<h3 class="block-title" id="2mtitle">Settlement Information</h3>
+							<div class="block-options">
+								<button type="button" class="btn-block-option" data-bs-dismiss="modal"
+									aria-label="Close">
+									<i class="fa fa-fw fa-times"></i>
+								</button>
+							</div>
+						</div>
+
+						<div class="block-content row">
+
+							<div class="col-md-12 col-lg-12 col-sm-12">
+								<input type="hidden" class="form-control text-center" name="settlementid"
+									id="settlementid" disabled />
+								<div class="card-body">
+									<table>
+										<tr>
+											<th colspan="10" style="background-color: #f2f2f2;">User Details</th>
+										</tr>
+										<tr>
+											<th style="padding: 0.45rem 0.45rem;font-weight: normal;">User Name:</th>
+											<td class="fw-semibold" style="padding: 0.45rem 0.45rem;" id="td_userName">
+											</td>
+											<th style="padding: 0.45rem 0.45rem;font-weight: normal;">Mobile Number:
+											</th>
+											<td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
+												id="td_mobileNumber"></td>
+
+											<th style="padding: 0.45rem 0.45rem;font-weight: normal;">User Type:</th>
+											<td class="fw-semibold" style="padding: 0.45rem 0.45rem;" id="td_usertype">
+											</td>
+
+										</tr>
+										<tr>
+											<th style="padding: 0.45rem 0.45rem;font-weight: normal;">User Address:</th>
+											<td colspan="5" class="fw-semibold" style="padding: 0.45rem 0.45rem;"
+												id="td_useraddress"></td>
+
+										</tr>
+
+									</table>
+								</div>
+							</div>
+
+
+
+							<div class="col-md-12 col-lg-12 col-sm-12">
+								<input type="hidden" class="form-control text-center" name="settlementid"
+									id="settlementid" disabled />
+								<div class="card-body">
+									<table>
+										<tr>
+											<th colspan="4" style="background-color: #f2f2f2;">Booking
+												Details(Booking Id:-<span id="booking_id" style="color:blue"></span>)
+											</th>
+										</tr>
+										<tr>
+											<th style="padding: 0.45rem 0.45rem;font-weight: normal">Booking Date:</th>
+											<td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
+												id="td_bookingDate"></td>
+											<th style="padding: 0.45rem 0.45rem;font-weight: normal">Deposit Amount:
+											</th>
+											<td class="fw-semibold amount-cell" style="padding: 0.45rem 0.45rem;"
+												id="td_depositeAmount"></td>
+										</tr>
+										<tr>
+											<th style="padding: 0.45rem 0.45rem;font-weight: normal">Start Date:</th>
+											<td class="fw-semibold" style="padding: 0.45rem 0.45rem;" id="td_startDate">
+											</td>
+											<th style="padding: 0.45rem 0.45rem;font-weight: normal">Hall Amount:</th>
+											<td class="fw-semibold amount-cell" style="padding: 0.45rem 0.45rem;"
+												id="td_hallAmount"></td>
+										</tr>
+										<tr>
+											<th style="padding: 0.45rem 0.45rem;font-weight: normal">END
+												Date:</th>
+											<td class="fw-semibold" style="padding: 0.45rem 0.45rem;" id="td_endDate">
+											</td>
+											<th style="padding: 0.45rem 0.45rem;font-weight: normal">GST @18%:</th>
+											<td class="fw-semibold amount-cell" style="padding: 0.45rem 0.45rem;"
+												id="td_gst"></td>
+										</tr>
+										<tr>
+											<th style="padding: 0.45rem 0.45rem;font-weight: normal">Starting Slot:</th>
+											<td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
+												id="td_startingSlot"></td>
+											<th style="padding: 0.45rem 0.45rem;font-weight: normal">Total Amount:</th>
+											<td class="fw-semibold amount-cell" style="padding: 0.45rem 0.45rem;"
+												id="td_totalAmount"></td>
+										</tr>
+										<tr>
+											<th style="padding: 0.45rem 0.45rem;font-weight: normal">Ending Slot:</th>
+											<td colspan="3" class="fw-semibold" style="padding: 0.45rem 0.45rem;"
+												id="td_endingSlot"></td>
+										</tr>
+									</table>
+								</div>
+							</div>
+
+							<div class="col-md-12 col-lg-12 col-sm-12">
+								<div class="card-body">
+									<table>
+										<tr>
+											<th colspan="6" style="background-color: #f2f2f2;">EB Details</th>
+										</tr>
+										<tr>
+											<th style="padding: 0.45rem 0.45rem;font-weight: normal">Consumer Number:
+											</th>
+											<td class="fw-semibold" style="padding: 0.45rem 0.45rem;" id="td_EBNumber">
+											</td>
+											<th style="padding: 0.45rem 0.45rem;font-weight: normal">EB Amount Per Unit:
+											</th>
+											<td class="fw-semibold amount-cell" style="padding: 0.45rem 0.45rem;"
+												id="td_ebamountperunit"></td>
+											<th style="padding: 0.45rem 0.45rem;font-weight: normal">MF DT Unit:</th>
+											<td class="fw-semibold amount-cell" style="padding: 0.45rem 0.45rem;"
+												id="td_mfDtUnit"></td>
+										</tr>
+										<tr>
+											<th style="padding: 0.45rem 0.45rem;font-weight: normal">Start Reading:</th>
+											<td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
+												id="td_startingReading"></td>
+											<th style="padding: 0.45rem 0.45rem;font-weight: normal">END Reading:</th>
+											<td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
+												id="td_endingReading"></td>
+											<th style="padding: 0.45rem 0.45rem;font-weight: normal">Unit Consumed:</th>
+											<td class="fw-semibold amount-cell" style="padding: 0.45rem 0.45rem;"
+												id="td_usedunit"></td>
+										</tr>
+										<tr>
+											<th style="padding: 0.45rem 0.45rem;font-weight: normal">EB Amount:</th>
+											<td colspan="5" class="fw-semibold" style="padding: 0.45rem 0.45rem;"
+												id="td_electricityamount"></td>
+										</tr>
+									</table>
+								</div>
+							</div>
+
+
+							<div id="damageDetails" style="margin-bottom: -17px;"></div>
+
+							<div class="col-md-12 col-lg-12 col-sm-12">
+								<div class="card-body">
+									<table>
+										<tr>
+											<th colspan="2" style="background-color: #f2f2f2;">Amount
+												to be Refunded</th>
+										</tr>
+										<tr>
+											<th style="padding: 0.45rem 0.45rem;font-weight: normal">Deposit Amount:
+											</th>
+											<td class="fw-semibold amount-cell" style="padding: 0.45rem 0.45rem;"
+												id="td_depositeamountforrefund">0</td>
+										</tr>
+										<tr>
+											<th style="padding: 0.45rem 0.45rem;font-weight: normal">EB Amount:</th>
+											<td class="fw-semibold amount-cell"
+												style="padding: 0.45rem 0.45rem;color:red" id="td_ebAmount">0</td>
+										</tr>
+										<tr>
+											<th style="padding: 0.45rem 0.45rem;font-weight: normal">Damage(if any):
+											</th>
+											<td class="fw-semibold amount-cell"
+												style="padding: 0.45rem 0.45rem;color:red" id="td_damage">0</td>
+										</tr>
+
+
+
+										<tr id="pendingcolumn">
+											<th id="th_settel_label"
+												style="padding: 0.45rem 0.45rem;font-weight: normal">Collection Pending
+												Amount:</th>
+											<td class="fw-semibold amount-cell"
+												style="padding: 0.45rem 0.45rem; color: green;" id="td_pending_amt">0
+											</td>
+										</tr>
+										<tr id="collectionstatuscolumn">
+											<th id="label" style="padding: 0.45rem 0.45rem;font-weight: normal">
+												Collection Pending Status
+												:</th>
+											<td class="fw-semibold amount-cell"
+												style="padding: 0.45rem 0.45rem; color: green;"
+												id="td_collection_status">
+											</td>
+										</tr>
+										<tr>
+											<th style="padding: 0.45rem 0.45rem;font-weight: normal">Actual refundable
+												Amount:</th>
+											<td class="fw-semibold amount-cell"
+												style="padding: 0.45rem 0.45rem; color: green;" id="td_settel_amt">0
+											</td>
+										</tr>
+									</table>
+								</div>
+							</div>
+							<!-- End damage detail -->
+
+						</div>
+						<div class="block-content block-content-full text-end bg-body" id="mbutton2">
+							<button type="button" class="btn btn-sm btn-alt-secondary"
+								data-bs-dismiss="modal">Close</button>
+							<a id="downloadLink" style="display: none;"></a>
+						</div>
+					</div>
+
+				</form>
+
+			</div>
+		</div>
+	</div>
+
+	<div class="modal fade" id="fileModal" tabindex="-1" role="dialog" aria-labelledby="fileModalLabel"
+		aria-hidden="true">
+		<div class="modal-dialog modal-lg" role="document">
+			<div class="modal-content">
+				<div class="modal-header">
+					<h5 class="modal-title" id="fileModalLabel">File Preview</h5>
+					<button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
+						<span aria-hidden="true">&times;</span>
+					</button>
+				</div>
+				<div class="modal-body">
+					<embed id="filePreview" src="" width="100%" height="600px">
+				</div>
+				<div class="modal-footer">
+					<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+				</div>
+			</div>
+		</div>
+	</div>
+
+	<div class="modal fade" id="qrview" tabindex="-1" role="dialog" aria-labelledby="fileModalLabel" aria-hidden="true">
+		<div class="modal-dialog modal-sm" role="document">
+			<div class="modal-content">
+				<div class="modal-header">
+					<h5 class="modal-title" id="qrview">QR Code for Collection Pending</h5>
+				</div>
+				<div class="modal-body">
+					<div>
+						<img style="border:4px solid #15455D;width: 256px; height: 260px;border-radius:10px;"
+							id="qrCodeImage" alt="QR Code">
+					</div>
+				</div>
+				<div class="modal-footer">
+					<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+				</div>
+			</div>
+		</div>
+	</div>
+	<div th:replace="~{fragments/resetpassword :: div}"></div>
+	<script th:replace="~{fragments/script :: script}"></script>
+	<footer th:replace="~{fragments/footer2 :: footer}"></footer>
+	<script th:replace="~{fragments/loginscript :: script}"></script>
+	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
+	<script>
+		$(document).ready(
+			function () {
+
+				// DataTables buttons configuration
+				var buttons = [{
+					extend: 'pageLength',
+					className: 'btn btn-primary'
+				}, {
+					title: 'Data export',
+					extend: 'copyHtml5',
+					text: 'Copy',
+					className: 'btn btn-primary',
+					id: 'copyBtn'
+				}, {
+					extend: 'excelHtml5',
+					text: 'Excel',
+					className: 'btn btn-primary',
+					id: 'excelBtn'
+				}, {
+					extend: 'csvHtml5',
+					text: 'CSV',
+					className: 'btn btn-primary',
+					id: 'csvBtn'
+				}, {
+					extend: 'pdfHtml5',
+					text: 'PDF',
+					className: 'btn btn-primary',
+					id: 'pdfBtn'
+				},
+
+				];
+
+				$('#settlementListTable').DataTable(
+					{
+						dom: 'Bftip',
+						columnDefs: [{
+							targets: 'no-sort',
+							orderable: false
+						}],
+						lengthMenu: [
+							[50, 100, 200, 500, -1],
+							['50 rows', '100 rows', '200 rows',
+								'500 rows', 'Show all']],
+						scrollY: '50vh',
+						fixedColumns: {
+							left: 1,
+							right: 1
+						},
+						buttons: [buttons],
+						responsive: true,
+						searching: true, // Enable search
+						select: false,
+						processing: false,
+					});
+
+				// Link the search input to DataTable
+				$('#searchInput').on('keyup', function () {
+					dataTable.search(this.value).draw();
+				});
+
+			});
+
+		function showDamageImage(imageUrl) {
+			document.getElementById('filePreview').src = imageUrl;
+			$('#fileModal').modal('show');
+		}
+		function settleTheAmount(bookingId) {
+			window.location.href = '/communityhall/caretaker/caretakerpage?bookingId=' + bookingId;
+		}
+		function approve(settlementId) {
+			$.ajax({
+				type: "GET",
+				url: '/communityhall/api/officer/getSettlementList',
+				data: {
+					'settlementsid': settlementId
+				},
+				success: function (x) {
+					showSettlementInfo(x)
+					showDamageDetails(x);
+				}
+			});
+
+		}
+
+		function showSettlementInfo(list) {
+
+			$('#settlementinformation').modal({
+				backdrop: 'static',
+				keyboard: false
+			});
+			$('#settlementinformation').modal('show');
+			document.getElementById("settlementid").value = list.settlement.settlementId;
+			document.getElementById("td_userName").innerHTML = list.users.name;
+			document.getElementById("td_mobileNumber").innerHTML = list.users.mobileNo;
+			document.getElementById("td_usertype").innerHTML = list.users.usertype;
+			var userDetails = list.users;
+			var userDetailsString =
+				userDetails.doorNo + ", " +
+				userDetails.street + ", " +
+				userDetails.area + ", " +
+				userDetails.location + " ,Chennai- " +
+				userDetails.pinCode;
+			document.getElementById("td_useraddress").innerHTML = userDetailsString;
+			document.getElementById("td_bookingDate").innerHTML = list.bookingDate;
+			document.getElementById("td_depositeAmount").innerHTML = "₹ " + parseFloat(list.depositAmount).toFixed(2);
+			document.getElementById("td_hallAmount").innerHTML = "₹ " + parseFloat(list.hallAmount).toFixed(2);
+			document.getElementById("td_totalAmount").innerHTML = "₹ " + parseFloat(list.amountReceived).toFixed(2);
+			var gstcl = (list.hallAmount * (list.hallDetails.gst / 100));
+			var formattedGst = gstcl.toFixed(2);
+			document.getElementById("td_gst").innerHTML = "₹ " + formattedGst;
+			document.getElementById("td_startDate").innerHTML = list.startDate;
+			document.getElementById("td_endDate").innerHTML = list.endDate;
+			document.getElementById("booking_id").innerHTML = list.bookingId;
+
+			function getTimeSlot(slotValue) {
+				var timeSlot;
+				var trimmedSlotValue = String(slotValue).trim(); // Convert to string and then trim
+				if (trimmedSlotValue === '1') {
+					timeSlot = 'Morning';
+				} else if (trimmedSlotValue === '2') {
+					timeSlot = 'Evening';
+				} else {
+					timeSlot = 'Unknown';
+				}
+				return timeSlot;
+			}
+
+			document.getElementById("td_startingSlot").innerHTML = getTimeSlot(list.startingSlot);
+			document.getElementById("td_endingSlot").innerHTML = getTimeSlot(list.endingSlot);
+			document.getElementById("td_EBNumber").innerHTML = list.hallDetails.ebNumber;
+			document.getElementById("td_startingReading").innerHTML = list.ebDetails.startingReading;
+			document.getElementById("td_endingReading").innerHTML = list.ebDetails.endingReading;
+			document.getElementById("td_usedunit").innerHTML = list.ebDetails.usedUnit;
+			document.getElementById("td_ebamountperunit").innerHTML = "₹ " + parseFloat(list.hallDetails.ebCostPerUnit).toFixed(2);
+			document.getElementById("td_mfDtUnit").innerHTML = "₹ " + parseFloat(list.hallDetails.mfDtUnit).toFixed(2);
+			document.getElementById("td_depositeamountforrefund").innerHTML = "₹ " + parseFloat(list.depositAmount).toFixed(2);
+			document.getElementById("td_ebAmount").innerHTML = "₹ " + parseFloat(list.ebDetails.ebAmount).toFixed(2);
+			document.getElementById("td_electricityamount").innerHTML = "₹ " + parseFloat(list.ebDetails.ebAmount).toFixed(2);
+			document.getElementById("td_damage").innerHTML = "₹ " + parseFloat(list.settlement.damageAmount).toFixed(2);
+
+			var eb_amt = list.ebDetails.ebAmount;
+			var deposit_amt = list.depositAmount;
+			var tem_total = deposit_amt - eb_amt;
+			$("#td_settel_amt").html('');
+			$("#td_settel_amt").html(tem_total);
+		}
+		function showDamageDetails(data) {
+			var damageFieldContainer = $('#damageDetails');
+			damageFieldContainer.empty();
+
+			// Create a div for table responsiveness
+			var tableResponsiveDiv = $('<div>').addClass('table-responsive').css('margin-right', '-24px');
+
+			// Create table with similar classes and styles to the modal table
+			var table = $('<table>').addClass('table table-bordered table-striped').css({ 'width': '97%', 'border-color': 'black', 'border-top-color': 'white' });
+			var thead = $('<thead>').addClass('thead-light');
+			var tbody = $('<tbody>');
+
+			// Create Damage Details header row
+			var headerRow = $('<tr>').appendTo(thead);
+			$('<th>').attr('colspan', '6').text('Damage Details (if any)').css({
+				'padding': '0.45rem 0.45rem',
+				'background-color': '#f2f2f2',
+				'font-weight': 'bold',
+				'color': 'black',
+			}).appendTo(headerRow);
+
+			// Create table header row
+			var columnHeadersRow = $('<tr>').css('background-color', '#f2f2f2').appendTo(thead);
+			$('<th>').text('S.No').css({ 'padding': '0.45rem 0.45rem', 'text-align': 'center' }).appendTo(columnHeadersRow);
+			$('<th>').text('Asset Name').css({ 'padding': '0.45rem 0.45rem', 'text-align': 'center' }).appendTo(columnHeadersRow);
+			$('<th>').text('Damage Img').css({ 'padding': '0.45rem 0.45rem', 'text-align': 'center' }).appendTo(columnHeadersRow);
+			$('<th>').text('Cost').css({ 'padding': '0.45rem 0.45rem', 'text-align': 'center' }).appendTo(columnHeadersRow);
+			$('<th>').text('Qty').css({ 'padding': '0.45rem 0.45rem', 'text-align': 'center' }).appendTo(columnHeadersRow);
+			$('<th>').text('Amount').css({ 'padding': '0.45rem 0.45rem', 'text-align': 'center' }).appendTo(columnHeadersRow);
+
+			var totalAmount = 0;
+
+			// Check if damageList is empty
+			if (data.damageList.length === 0) {
+				var row = $('<tr>').appendTo(tbody);
+				$('<td>').attr('colspan', '6').text('No Damaged Items').css({
+					'padding': '0.45rem 0.45rem',
+					'text-align': 'center',
+					'font-weight': 'bold',
+					'background-color': '#f2f2f2'
+				}).appendTo(row);
+			} else {
+				$.each(data.damageList, function (index, detail) {
+					var row = $('<tr>').appendTo(tbody);
+					$('<td>').text(index + 1).css({
+						'padding': '0.45rem 0.45rem',
+						'text-align': 'center'
+					}).appendTo(row);
+					$('<td>').text(detail.assetName).css({
+						'padding': '0.45rem 0.45rem',
+						'text-align': 'center'
+					}).appendTo(row);
+
+					var viewLink = $('<a>').attr('href', 'javascript:void(0)').text('View').on('click', function () {
+						showDamageImage(detail.damageImageUrl);
+					});
+					$('<td>').css({
+						'padding': '0.45rem 0.45rem',
+						'text-align': 'center'
+					}).append(viewLink).appendTo(row);
+
+					var assetamt = (detail.assetAmount / detail.quantity).toFixed(2);
+					$('<td>').text('₹ ' + assetamt).css({
+						'padding': '0.45rem 0.45rem',
+						'text-align': 'center'
+					}).appendTo(row);
+
+					$('<td>').text(detail.quantity).css({
+						'padding': '0.45rem 0.45rem',
+						'text-align': 'center'
+					}).appendTo(row);
+
+					var amount = detail.assetAmount;
+					totalAmount += amount;
+					$('<td>').text('₹ ' + amount.toFixed(2)).css({
+						'padding': '0.45rem 0.45rem',
+						'text-align': 'right'
+					}).appendTo(row);
+				});
+
+				// Add row for total amount
+				var totalRow = $('<tr>').appendTo(tbody);
+				$('<td>').attr('colspan', '5').text('Total Amount').css({
+					'padding': '0.45rem 0.45rem',
+					'font-weight': 'bold',
+					'background-color': '#f2f2f2'
+				}).appendTo(totalRow);
+				$('<td>').text('₹ ' + totalAmount.toFixed(2)).css({
+					'padding': '0.45rem 0.45rem',
+					'text-align': 'right'
+				}).appendTo(totalRow);
+
+				$("#td_dam_amt").html('₹ ' + totalAmount.toFixed(2));
+			}
+
+			// Append the table elements to the container div
+			table.append(thead, tbody);
+			tableResponsiveDiv.append(table);
+			damageFieldContainer.append(tableResponsiveDiv);
+
+			var temp_total = parseFloat($("#td_settel_amt").html());
+			var settleAmount = temp_total - totalAmount;
+
+			if (settleAmount < 0) {
+				var pendingstatus = data.settlement.collectionStatus;
+				$("#td_settel_amt").html(0);
+				$("#pendingcolumn").show();
+				$("#collectionstatuscolumn").show();
+				$('#td_collection_status').html(pendingstatus);
+				$("#td_pending_amt").html(Math.abs(settleAmount).toFixed(2));
+				$("#td_pending_amt").css("color", "red");
+				$("#approvebutton").show();
+				$("#rejectbutton").show();
+			} else {
+				$("#td_settel_amt").html('₹ ' + settleAmount.toFixed(2));
+				$("#pendingcolumn").hide();
+				$("#collectionstatuscolumn").hide();
+				$("#td_settel_amt").css("color", "green"); // Set color to green for positive amounts
+				$("#approvebutton").hide();
+				$("#rejectbutton").hide();
+			}
+		}
+		function showDamageImage(damageImageUrl) {
+			document.getElementById('filePreview').src = damageImageUrl;
+			$('#fileModal').modal('show');
+		}
+		function accept() {
+			let id = document.getElementById("settlementid").value;
+
+			Swal.fire({
+				title: 'Do you want to Approve this Settlement ?',
+				showDenyButton: true,
+				showCancelButton: true,
+				confirmButtonText: 'YES',
+				denyButtonText: 'NO',
+			}).then((result) => {
+				/* Read more about isConfirmed, isDenied below */
+				if (result.isConfirmed) {
+					$.ajax({
+						type: "POST",
+						url: '/communityhall/api/officer/updateApprovedSettlementStatus/' + id,
+						data: {
+							'status': 'COMPLETED',
+							'comments': 'Accepted',
+							'settlementId': id
+						},
+						success: function (data, textStatus, xhr) {
+							if (xhr.status === 200) { // Check if the response status is OK
+								Swal.fire(
+									'Done',
+									'Successfully Accepted to the ID:' + id,
+									'success'
+								).then(() => {
+									location.reload();
+								});
+							} else {
+								Swal.fire(
+									'Error',
+									'Failed to accept the user',
+									'error'
+								);
+							}
+						},
+						error: function (xhr, textStatus, errorThrown) {
+							Swal.fire(
+								'Error',
+								'Failed to accept the user',
+								'error'
+							);
+						}
+					});
+				} else if (result.isDenied) {
+					Swal.fire('Changes are not saved', '', 'info')
+				}
+			});
+		}
+
+
+		function fetchQRCode(bookingId) {
+			$.ajax({
+				url: '/communityhall/careTaker/api/generateQRCode',
+				type: 'GET',
+				data: { bookingId: bookingId },
+				success: function (data) {
+					// Set the QR code image source
+					$('#qrview').modal('show');
+					$('#qrCodeImage').attr('src', 'data:image/png;base64,' + data);
+					// console.log(data);
+				},
+				error: function (jqXHR, textStatus, errorThrown) {
+					console.error('Error fetching QR code:', textStatus, errorThrown);
+				}
+			});
+		}
+	</script>
+
+</body>
+
+</html>

src/main/resources/templates/sm/headquarterspage.html

@@ -0,0 +1,552 @@
+<!DOCTYPE html>
+<html xmlns:th="http://www.thymeleaf.org">
+
+<head th:replace="~{fragments/head-sm :: head}"></head>
+
+<body>
+	<!-- Page Container -->
+	<div id="page-container"
+		class="sidebar-o sidebar-dark enable-page-overlay side-scroll page-header-fixed page-header-dark">
+		<!-- Side Overlay aside (right)-->
+		<aside th:replace="~{fragments/aside-right :: aside}"></aside>
+		<!-- END Side Overlay (right)-->
+
+		<!-- Sidebar Nav-->
+		<nav th:replace="~{fragments/nav-sm :: nav}"></nav>
+		<!-- END Sidebar -->
+
+		<!-- Header -->
+		<header th:replace="~{fragments/header-sm :: header}"></header>
+		<!-- END Header -->
+
+		<!-- Main Container -->
+		<main id="main-container">
+
+			<!-- Page Content -->
+
+			<!-- Card Container -->
+			<div class="content">
+				<div class="block block-rounded">
+					<div class="block-header bg-primary text-white">
+						<h3 class="block-title">Electricity Bill and Damage Details</h3>
+					</div>
+					<div class="block-content">
+
+						<h4>User Details<span>*</span></h4>
+						<div class="table-responsive">
+							<table class="table table-bordered table-vcenter">
+								<thead>
+									<tr>
+										<th>Booking Id</th>
+										<th>Name</th>
+										<th>Mobile Number</th>
+									</tr>
+								</thead>
+								<tbody>
+									<tr th:each="booking : ${booking}">
+										<td> <span th:text="${booking.bookingId}"></span></td>
+										<td><span th:text="${booking.users.name}"></span></td>
+										<td><span th:text="${booking.users.mobileNo}"></span></td>
+									</tr>
+								</tbody>
+							</table>
+						</div>
+
+						<form id="billForm" onsubmit="return submitBillForm()">
+							<input type="hidden" th:value="${booking.bookingId}" name="bookingId" id="bookingId">
+							<input type="hidden" th:value="${booking.ebDetails.ebId}" name="ebId" id="ebId">
+							<!-- EB Details -->
+							<h4>EB Details<span>*</span></h4>
+							<div class="table-responsive">
+								<table class="table table-bordered table-vcenter">
+									<thead>
+										<tr>
+											<th colspan="4">Consumer Number</th>
+											<th>Start Reading</th>
+											<th>End Reading</th>
+											<th>EB Cost Per Unit</th>
+											<th>Total Units</th>
+											<th>Total Amount</th>
+										</tr>
+									</thead>
+									<tbody>
+										<tr th:each="booking : ${booking}">
+											<td colspan="4">
+												<input type="text" class="form-control"
+													th:value="${booking.hallDetails.ebNumber}"
+													placeholder="Enter EB Number" required>
+											</td>
+											<td>
+												<input type="number" id="startReading" name="startReading"
+													class="form-control"
+													th:value="${booking.ebDetails != null ? booking.ebDetails.startingReading : ''}"
+													placeholder="Enter Starting Reading" required readonly>
+											</td>
+											<td>
+												<input type="text" id="endReading" name="endReading"
+													class="form-control"
+													oninput="calculateEBAmount(); calculateUsedUnits();" required>
+											</td>
+											<td>
+												<input type="number" id="ebCostPerUnit" name="ebCostPerUnit"
+													class="form-control" th:value="${booking.hallDetails.ebCostPerUnit}"
+													readonly>
+											</td>
+											<td>
+												<span id="totalUsedUnits" class="form-control-static"
+													style="display: none;"></span>
+											</td>
+											<td>
+												<span id="totalEBAmount" class="form-control-static"
+													style="display: none;"></span>
+											</td>
+										</tr>
+									</tbody>
+
+								</table>
+							</div>
+							<!-- Hidden input for Used Units -->
+							<input type="hidden" id="hiddenTotalUsedUnits" name="totalUsedUnits">
+							<input type="hidden" id="hiddenTotalEBAmount" name="totalEBAmount">
+
+							<!-- Damage Details -->
+							<h4>Damage Details</h4>
+							<div class="table-responsive">
+								<table class="table table-bordered table-vcenter" id="damageDetailsTable">
+									<thead>
+										<tr>
+											<th>Materials</th>
+											<th>No. of Quantity</th>
+											<th>Per Material Amount</th>
+											<th>Comments</th>
+											<th>Damaged Item Photo</th>
+											<th>Total Amount</th>
+										</tr>
+									</thead>
+									<tbody id="damageDetailsbody">
+										<!-- Initial Row will be here -->
+									</tbody>
+								</table>
+							</div>
+							<button type="button" class="btn btn-success mb-3" onclick="addMaterialRow()"><i
+									class="fas fa-plus"></i>Add
+								Material</button>
+
+							<!-- Hidden input for total Damage Amount -->
+							<input type="hidden" id="hiddenTotalDamageAmount" name="totalDamageAmount">
+
+							<!-- Settlement Amount -->
+							<div style="text-align: right;">
+								<h4>Settlement Amount</h4>
+								<h6>Total Settlement Amount: <span id="totalSettlementAmount"></span></h6>
+							</div>
+							<!-- Raise Bill Button -->
+							<div style="text-align: center;">
+								<button id="backButton" class="btn btn-secondary" onclick="goBack()">Back</button>
+								<button id="submitButton" class="btn btn-primary" type="submit">Raise Bill</button>
+							</div>
+
+							<br>
+						</form>
+					</div>
+				</div>
+			</div>
+			<!-- END Card Container -->
+
+			<!-- END Page Content -->
+		</main>
+		<!-- END Main Container -->
+
+		<!-- Footer -->
+		<footer th:replace="~{fragments/footer2 :: footer}"></footer>
+		<!-- END Footer -->
+	</div>
+	<!-- END Page Container -->
+
+	<!-- Scripts -->
+	<div th:replace="~{fragments/resetpassword :: div}"></div>
+	<script th:replace="~{fragments/script :: script}"></script>
+	<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
+
+	<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
+	<script type="text/javascript">
+
+		document.addEventListener("DOMContentLoaded", function () {
+			addMaterialRow(); // Add the first row automatically
+		});
+
+		let selectedMaterials = {}; // Object to track selected materials for each row
+		var damageindex = 0;
+
+		function addMaterialRow() {
+			const tableBody = document.getElementById('damageDetailsTable').getElementsByTagName('tbody')[0];
+			const rowIndex = tableBody.rows.length;
+			selectedMaterials[rowIndex] = ""; // Initialize tracking for this row
+			const row = tableBody.insertRow(rowIndex);
+
+			// Set row's HTML with dropdown including a unique index
+			row.innerHTML = generateRowHTML(rowIndex);
+			updateAllDropdowns();
+			calculateDamageAmount();
+		}
+
+
+		function generateRowHTML(index) {
+			damageindex = index;
+			return `
+            <td>
+                <select id="materials${index}" name="materials" class="form-control"
+                    onchange="materialSelectionChanged(this, ${index});">
+                    <option value="">Select</option>
+                    <option value="chair">Chair</option>
+                    <option value="table">Table</option>
+                    <option value="kitchenessentials">Kitchen Essentials</option>
+                    <option value="electronics">Electronics</option>
+                    <option value="Others">Electronics</option>
+                </select>
+            </td>
+            <td><input type="number" id="quantity${index}" name="quantity[${index}]" class="form-control"
+                    oninput="calculateDamageAmount()"></td>
+            <td><input type="number" id="perMaterialAmount${index}" name="perMaterialAmount[${index}]"
+                    class="form-control" oninput="calculateDamageAmount()"></td>
+            <td><input type="text" id="comments${index}" name="comments" class="form-control"
+                    placeholder="Enter Comments"></td>
+            <td><input type="file" id="damagePhoto${index}" name="damagePhoto${index}" class="form-control damage-image mb-1"></td>
+            <td><span id="totalDamageAmount${index}" class="form-control-static"></span></td>
+            <td><button type="button" class="btn btn-danger" onclick="removeMaterialRow(${index})"><i class="fas fa-minus"></i></button></td>
+        `;
+		}
+
+		function removeMaterialRow(index) {
+			const tableBody = document.getElementById('damageDetailsTable').getElementsByTagName('tbody')[0];
+			tableBody.deleteRow(index);
+
+			// Update selectedMaterials object
+			delete selectedMaterials[index];
+
+			// Reassign the indices for the remaining rows
+			const rows = tableBody.rows;
+			for (let i = index; i < rows.length; i++) {
+				updateRowIndices(rows[i], i);
+				selectedMaterials[i] = selectedMaterials[i + 1];
+			}
+
+			delete selectedMaterials[rows.length]; // Remove the last entry which is now undefined
+
+			updateAllDropdowns();
+			calculateDamageAmount();
+		}
+
+		function updateRowIndices(row, newIndex) {
+			row.cells[0].querySelector('select').setAttribute('id', `materials${newIndex}`);
+			row.cells[0].querySelector('select').setAttribute('onchange', `materialSelectionChanged(this, ${newIndex});`);
+
+			row.cells[1].querySelector('input').setAttribute('id', `quantity${newIndex}`);
+			row.cells[1].querySelector('input').setAttribute('name', `quantity[${newIndex}]`);
+			row.cells[1].querySelector('input').setAttribute('oninput', `calculateDamageAmount()`);
+
+			row.cells[2].querySelector('input').setAttribute('id', `perMaterialAmount${newIndex}`);
+			row.cells[2].querySelector('input').setAttribute('name', `perMaterialAmount[${newIndex}]`);
+			row.cells[2].querySelector('input').setAttribute('oninput', `calculateDamageAmount()`);
+
+			row.cells[3].querySelector('input').setAttribute('id', `comments${newIndex}`);
+
+			row.cells[4].querySelector('input').setAttribute('id', `damagePhoto${newIndex}`);
+
+			row.cells[5].querySelector('span').setAttribute('id', `totalDamageAmount${newIndex}`);
+
+			row.cells[6].querySelector('button').setAttribute('onclick', `removeMaterialRow(${newIndex})`);
+		}
+
+
+		function updateAllDropdowns() {
+			const allMaterials = ["chair", "table", "kitchenessentials", "electronics", "others"];
+			Object.keys(selectedMaterials).forEach(rowIndex => {
+				const dropdown = document.getElementById(`materials${rowIndex}`);
+				const selectedValue = selectedMaterials[rowIndex];
+				dropdown.innerHTML = '<option value="">Select</option>';
+				allMaterials.forEach(material => {
+					if (!Object.values(selectedMaterials).includes(material) || material === selectedValue) {
+						const option = new Option(material, material);
+						dropdown.add(option);
+					}
+				});
+				dropdown.value = selectedValue;
+			});
+		}
+
+		function materialSelectionChanged(select, index) {
+			// Update the selection tracking
+			selectedMaterials[index] = select.value;
+			updateAllDropdowns(); // Refresh all dropdowns to reflect the current selections
+			calculateDamageAmount(); // Recalculate damage amount as materials selection might change the calculation
+		}
+
+
+		function calculateEBAmount() {
+			let startReading = parseFloat(document.getElementById("startReading").value) || 0;
+			let endReading = parseFloat(document.getElementById("endReading").value) || 0;
+			let ebCostPerUnit = parseFloat(document.getElementById("ebCostPerUnit").value) || 0;
+			let totalEBAmount = (endReading - startReading) * ebCostPerUnit; // Assuming rate per unit is 10
+
+			if (!isNaN(totalEBAmount)) {
+				document.getElementById("totalEBAmount").style.display = "block"; // Show the totalEBAmount
+				document.getElementById("totalEBAmount").innerText = totalEBAmount.toFixed(2);
+				document.getElementById("hiddenTotalEBAmount").value = totalEBAmount;
+
+				calculateSettlementAmount();
+			}
+		}
+
+		function calculateUsedUnits() {
+			let startReading = parseFloat(document.getElementById("startReading").value) || 0;
+			let endReading = parseFloat(document.getElementById("endReading").value) || 0;
+
+			// Get the endReading input element
+			let endReadingInput = document.getElementById("endReading");
+
+			// Ensure end reading cannot be less than start reading
+			if (endReading < startReading) {
+				// Set custom validity message
+				endReadingInput.setCustomValidity("End reading cannot be less than start reading.");
+				endReadingInput.reportValidity();
+			} else {
+				// Clear any previous custom validity message
+				endReadingInput.setCustomValidity("");
+			}
+
+			let usedUnits = endReading - startReading;
+			// Show total used units
+			document.getElementById("totalUsedUnits").style.display = "block";
+			document.getElementById("totalUsedUnits").innerText = usedUnits;
+			document.getElementById("hiddenTotalUsedUnits").value = usedUnits;
+
+			let totalEBAmount = usedUnits * parseFloat(document.getElementById("ebCostPerUnit").value) || 0;
+
+			// Show total EB amount
+			document.getElementById("totalEBAmount").style.display = "block";
+			document.getElementById("totalEBAmount").innerText = totalEBAmount.toFixed(2);
+			document.getElementById("hiddenTotalEBAmount").value = totalEBAmount;
+
+			calculateSettlementAmount();
+		}
+
+		function calculateDamageAmount() {
+			const rows = document.getElementById('damageDetailsTable').getElementsByTagName('tbody')[0].rows;
+			let totalDamageAmount = 0;
+			for (let i = 0; i < rows.length; i++) {
+				const quantity = parseFloat(document.getElementById(`quantity${i}`).value) || 0;
+				const perMaterialAmount = parseFloat(document.getElementById(`perMaterialAmount${i}`).value) || 0;
+				const rowDamageAmount = quantity * perMaterialAmount;
+				document.getElementById(`totalDamageAmount${i}`).innerText = rowDamageAmount.toFixed(2);
+				totalDamageAmount += rowDamageAmount;
+			}
+
+			document.getElementById("hiddenTotalDamageAmount").value = totalDamageAmount.toFixed(2);
+			calculateSettlementAmount();
+		}
+
+		function calculateSettlementAmount() {
+			let totalEBAmount = parseFloat(document.getElementById("hiddenTotalEBAmount").value) || 0;
+			let totalDamageAmount = parseFloat(document.getElementById("hiddenTotalDamageAmount").value) || 0;
+			let totalSettlementAmount = totalEBAmount + totalDamageAmount;
+
+			document.getElementById("totalSettlementAmount").innerText = totalSettlementAmount.toFixed(2);
+		}
+
+		function goBack() {
+			window.history.back();
+		}
+
+		function submitBillForm() {
+			var bookingId = $("#bookingId").val();
+			var ebId = $("#ebId").val();
+			var endReading = $("#endReading").val();
+			var startReading = $("#startReading").val();
+			var usedUnit = $("#totalUsedUnits").html();
+			var ebAmount = $("#totalEBAmount").html();
+			var formData = new FormData();
+			formData.append('bookingId', bookingId);
+			formData.append('ebId', ebId);
+			formData.append('startingReading', startReading);
+			formData.append('endingReading', endReading);
+			formData.append('usedUnit', usedUnit);
+			formData.append('ebAmount', ebAmount);
+
+			var i = damageindex;
+			$('#damageDetailsbody tr').each(function () {
+				var assetName = $("#materials" + i).val();
+				var comments = $("#comments" + i).val();
+				var quantity = $("#quantity" + i).val();
+				var assetAmount = $("#totalDamageAmount" + i).html();
+				var assetImageInput = $("#damagePhoto" + i)[0].files[0]; // Assuming input type is file for assetImage
+				formData.append('assetName', assetName);
+				formData.append('comments', comments);
+				formData.append('quantity', quantity);
+				formData.append('assetAmount', assetAmount);
+				formData.append('assetImage', assetImageInput);
+				i = i - 1;
+			});
+			$.ajax({
+				url: '/communityhall/careTaker/api/processEbDetailsAndDamage',
+				type: 'POST',
+				data: formData,
+				contentType: false, // Let jQuery handle the content type
+				processData: false, // Prevent jQuery from processing the data
+				success: function (response) {
+					Swal.fire({
+						title: "Success!",
+						text: "Form submitted successfully.",
+						icon: "success",
+						button: "OK",
+					}).then((result) => {
+						if (result.isConfirmed) {
+							window.location.href = '/communityhall/headquarters/settlementlist';
+						}
+					});
+				},
+				error: function (xhr, status, error) {
+					console.error('Error:', error);
+					Swal.fire({
+						title: "Error!",
+						text: "There was an error submitting the form.",
+						icon: "error",
+						button: "OK",
+					}).then(() => {
+						window.location.href = '/communityhall/headquarters/settlementlist';
+					});
+				}
+			});
+
+			return false;
+		}
+
+		let isCompressing = false;
+		// Attach the validation function to file input change event
+		$(document).on('change', '.damage-image', function () {
+			validateFile(this);
+		});
+
+		function validateFile(fileInput) {
+			const allowedExtensions = /(\.jpg|\.jpeg|\.pdf)$/i;
+			const file = fileInput.files[0];
+			const filePath = fileInput.value;
+			let errorMessage = '';
+
+			// Clear any previous error message
+			clearError(fileInput);
+
+			// Check for duplicate files
+			if (isDuplicateFile(file.name, fileInput)) {
+				errorMessage = 'This file has already been selected. Please choose a different file.';
+				fileInput.value = ''; // Clear the file input
+				displayError(fileInput, errorMessage);
+				return;
+			}
+
+			// Validate file type
+			if (!allowedExtensions.exec(filePath)) {
+				errorMessage = 'Only JPG, JPEG, and PDF files are allowed.';
+				fileInput.value = ''; // Clear the file input
+				displayError(fileInput, errorMessage);
+			}
+			// Handle image files separately
+			else if (/(\.jpg|\.jpeg)$/i.test(filePath) && file.size > 2097152) {
+				compressImage(file).then(compressedFile => {
+					const dataTransfer = new DataTransfer();
+					dataTransfer.items.add(compressedFile);
+					fileInput.files = dataTransfer.files;
+
+					// Validate file size after compression
+					validateFileSize(fileInput);
+				}).catch(error => {
+					errorMessage = 'Error compressing image.';
+					displayError(fileInput, errorMessage);
+				});
+			}
+			// Directly validate PDF file size
+			else if (/(\.pdf)$/i.test(filePath) && file.size > 2097152) {
+				errorMessage = 'PDF file size exceeds the 2MB limit.';
+				fileInput.value = ''; // Clear the file input
+				displayError(fileInput, errorMessage);
+			}
+			else {
+				// console.log('File size is within limit:', file.size, 'bytes');
+				clearError(fileInput);
+			}
+		}
+
+
+		function isDuplicateFile(fileName, currentInput) {
+			const fileInputs = document.querySelectorAll('.file-upload-field');
+			for (let input of fileInputs) {
+				if (input !== currentInput && input.files.length > 0 && input.files[0].name === fileName) {
+					return true;
+				}
+			}
+			return false;
+		}
+
+		function clearError(fileInput) {
+			const errorElements = fileInput.parentNode.getElementsByClassName('error-message');
+			while (errorElements.length > 0) {
+				errorElements[0].remove();
+			}
+		}
+		// Function to compress image using canvas
+		function compressImage(file) {
+			return new Promise((resolve, reject) => {
+				const reader = new FileReader();
+				reader.onload = function (event) {
+					const img = new Image();
+					img.onload = function () {
+						const canvas = document.createElement('canvas');
+						const ctx = canvas.getContext('2d');
+						const maxSize = 2097152; // 2MB in bytes
+						let scale = 1;
+						if (file.size > maxSize) {
+							scale = Math.sqrt(maxSize / file.size);
+						}
+						canvas.width = img.width * scale;
+						canvas.height = img.height * scale;
+						ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
+
+						// Convert canvas content to blob
+						canvas.toBlob(blob => {
+							resolve(new File([blob], file.name, { type: 'image/jpeg', lastModified: Date.now() }));
+						}, 'image/jpeg', 0.7); // Adjust JPEG quality as needed (0.7 is 70% quality)
+					};
+					img.src = event.target.result;
+				};
+				reader.readAsDataURL(file);
+			});
+		}
+		// Function to validate file size after compression
+		function validateFileSize(fileInput) {
+			const file = fileInput.files[0];
+			if (file && file.size > 2097152) {
+				//console.log('File size is still greater than 2MB after compression.');
+				// Handle the situation where the file size is still greater than 2MB
+				displayError(fileInput, 'File size is still greater than 2MB after compression.');
+				fileInput.value = ''; // Clear the file input
+			} else {
+				//console.log('File size is within limit after compression.');
+				// Handle the situation where the file size is within the limit
+			}
+		}
+
+		// Function to display error messages
+		function displayError(fileInput, errorMessage) {
+			// Example implementation: show error message near the file input
+			let errorContainer = fileInput.nextElementSibling;
+			if (!errorContainer || !errorContainer.classList.contains('error-message')) {
+				errorContainer = document.createElement('div');
+				errorContainer.classList.add('error-message');
+				fileInput.parentNode.insertBefore(errorContainer, fileInput.nextSibling);
+			}
+			errorContainer.textContent = errorMessage;
+		}
+	</script>
+</body>
+
+</html>

src/main/resources/templates/sm/rejected-list.html

@@ -0,0 +1,569 @@
+<!DOCTYPE html>
+<html xmlns:th="http://www.thymeleaf.org">
+
+<head th:replace="~{fragments/head-sm :: head}"></head>
+<style>
+	.card-body table {
+		width: 100%;
+		padding: 100px;
+	}
+
+	.card-body th,
+	td {
+		padding: 8px;
+		text-align: left;
+	}
+
+	.amount-cell {
+		text-align: right;
+		padding-right: 1rem;
+		/* Adjust padding as needed */
+	}
+
+	.table {
+		width: 100% !important;
+	}
+</style>
+
+<body>
+	<!-- Page Container -->
+	<div id="page-container"
+		class="sidebar-o sidebar-dark enable-page-overlay side-scroll page-header-fixed page-header-dark">
+		<!-- Sidebar Nav-->
+		<aside th:replace="~{fragments/aside-right :: aside}"></aside>
+		<!-- END Side Overlay (right)-->
+		<!-- Sidebar Nav-->
+		<nav th:replace="~{fragments/nav-sm :: nav}"></nav>
+		<!-- END Sidebar -->
+		<!-- Header -->
+		<header th:replace="~{fragments/header-sm :: header}"></header>
+		<!-- END Header -->
+		<!-- Main Container -->
+		<main id="main-container">
+			<div class="content">
+				<div class="block block-rounded">
+					<div class="block-header block-header-default">
+						<h3 class="block-title">List of Bookings Rejected</h3>
+					</div>
+					<div class="block-content p-0">
+						<div class="p-sm-4 p-0">
+							<div class="table-responsive">
+								<table class="table table-bordered table-striped table-vcenter js-dataTable-responsive"
+									id="bookingrejectedtable">
+									<thead class="thead-light">
+										<tr>
+											<th class="text-center no-sort">S.No</th>
+											<th class="text-center">Booking Id</th>
+											<th class="text-center">zone</th>
+											<th class="text-center">Division</th>
+											<th class="text-center" width="20%">Hall Name</th>
+											<th class="text-center">User Name</th>
+											<th class="text-center">User type</th>
+											<th class="text-center" width="20%">Booking Date</th>
+											<th class="text-center">Number of days</th>
+											<th class="text-center">Reason for Booking</th>
+											<th class="text-center">Caretaker Name/MobileNumber</th>
+											<th class="text-center">Action</th>
+										</tr>
+									</thead>
+									<tbody>
+										<!--<tbody th:each="registration, i : ${registrations}">-->
+										<!--<tr>-->
+										<tr th:each="booking, rowStat : ${rejectedBookings}">
+											<td class="text-center" th:text="${rowStat.index + 1}"></td>
+											<td class="text-center" th:text="${booking.bookingId}"></td>
+											<td class="text-center" th:text="${booking.hallDetails.zone}"></td>
+											<td class="text-center" th:text="${booking.hallDetails.division}"></td>
+											<td class="text-center" th:text="${booking.hallDetails.hallName}"></td>
+											<td class="text-center" th:text="${booking.users.name}"></td>
+											<td class="text-center" th:text="${booking.users.usertype}"></td>
+											<td class="text-center" th:text="${booking.bookingDate}"></td>
+											<td class="text-center" th:text="${booking.noOfDays}"></td>
+											<td class="text-center" th:text="${booking.reason}"></td>
+											<td class="text-center"
+												th:text="${booking.hallDetails.hallInchargeName} + ' / ' + ${booking.hallDetails.hallInchargeMobno}">
+											</td>
+
+											<td>
+												<p>
+													<span class="badge bg-warning" style="cursor: pointer;"
+														th:onclick="pendingbooking([[${booking.bookingId}]])">REJECTED</span>
+												</p>
+											</td>
+
+										</tr>
+									</tbody>
+								</table>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</main>
+
+		<!-- END Main Container -->
+		<!--modal for pening-->
+		<div class="modal fade backdrop" id="pendingBookingForm" data-backdrop="static" tabindex="-1" role="dialog"
+			aria-labelledby="staticBackdropLabel" aria-hidden="true">
+			<div class="modal-dialog modal-lg" role="document">
+				<div class="modal-content">
+					<form id="ownform" onsubmit="return rejectsubmit();">
+						<div class="block block-rounded block-themed block-transparent mb-0">
+							<div class="block-header bg-primary-dark">
+								<h3 class="block-title" id="2mtitle">Booking Information</h3>
+								<div class="block-options">
+									<button type="button" class="btn-block-option" data-bs-dismiss="modal"
+										aria-label="Close">
+										<i class="fa fa-fw fa-times"></i>
+									</button>
+								</div>
+							</div>
+							<div class="block-content row">
+
+								<div class="col-md-12 col-lg-12 col-sm-12 mb-2">
+									<input type="hidden" class="form-control text-center" name="bookingid"
+										id="bookingid" disabled />
+									<div class="card-body">
+										<table>
+											<tr>
+												<th colspan="10" style="background-color: #f2f2f2;">User Details</th>
+											</tr>
+											<tr>
+												<th style="padding: 0.45rem 0.45rem;font-weight: normal;">User Name:
+												</th>
+												<td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
+													id="td_userName"></td>
+												<th style="padding: 0.45rem 0.45rem;font-weight: normal;">Mobile Number:
+												</th>
+												<td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
+													id="td_mobileNumber"></td>
+
+												<th style="padding: 0.45rem 0.45rem;font-weight: normal;">User Type:
+												</th>
+												<td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
+													id="td_usertype"></td>
+
+											</tr>
+											<tr>
+												<th style="padding: 0.45rem 0.45rem;font-weight: normal;">User Address:
+												</th>
+												<td colspan="5" class="fw-semibold" style="padding: 0.45rem 0.45rem;"
+													id="td_useraddress"></td>
+
+											</tr>
+
+										</table>
+									</div>
+								</div>
+
+								<div class="col-md-12 col-lg-12 col-sm-12 mb-2">
+									<input type="hidden" class="form-control text-center" name="bookingid"
+										id="bookingid" disabled />
+									<div class="card-body">
+										<table>
+											<tr>
+												<th colspan="10" style="background-color: #f2f2f2;">Hall Details</th>
+											</tr>
+
+											<tr>
+												<th style="padding: 0.45rem 0.45rem;font-weight: normal;">Hall Name:
+												</th>
+												<td colspan="10" class="fw-semibold" style="padding: 0.45rem 0.45rem;"
+													id="td_hallName"></td>
+
+											</tr>
+											<th style="padding: 0.45rem 0.45rem;font-weight: normal;">Hall Address:</th>
+											<td colspan="10" class="fw-semibold" style="padding: 0.45rem 0.45rem;"
+												id="td_halladdress"></td>
+
+											</tr>
+											<tr>
+												<th style="padding: 0.45rem 0.45rem;font-weight: normal;">Caretaker
+													Name:</th>
+												<td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
+													id="td_caretakername"></td>
+												<th style="padding: 0.45rem 0.45rem;font-weight: normal;">Caretaker
+													Mobile Number:</th>
+												<td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
+													id="td_caretakermobileNumber"></td>
+
+											</tr>
+
+										</table>
+									</div>
+								</div>
+								<div class="col-md-12 col-lg-12 col-sm-12">
+									<input type="hidden" class="form-control text-center" name="settlementid"
+										id="settlementid" disabled />
+									<div class="card-body">
+										<table>
+											<tr>
+												<th colspan="4" style="background-color: #f2f2f2;">Booking
+													Details of Booking Id:-<span id="booking_id"
+														style="color:blue"></span></th>
+											</tr>
+											<tr>
+												<th style="padding: 0.45rem 0.45rem;font-weight: normal">Booking Date:
+												</th>
+												<td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
+													id="td_bookingDate"></td>
+												<th style="padding: 0.45rem 0.45rem;font-weight: normal">Booking Status:
+												</th>
+												<td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
+													id="td_bookingStatus"></td>
+											</tr>
+											<tr>
+												<th style="padding: 0.45rem 0.45rem;font-weight: normal">Start Date:
+												</th>
+												<td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
+													id="td_startDate"></td>
+												<th style="padding: 0.45rem 0.45rem;font-weight: normal">Deposit
+													Amount:</th>
+												<td class="fw-semibold amount-cell " style="padding: 0.45rem 0.45rem;"
+													id="td_depositeAmount"></td>
+											</tr>
+											<tr>
+												<th style="padding: 0.45rem 0.45rem;font-weight: normal">END
+													Date:</th>
+												<td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
+													id="td_endDate"></td>
+												<th style="padding: 0.45rem 0.45rem;font-weight: normal">Hall Amount:
+												</th>
+												<td class="fw-semibold amount-cell " style="padding: 0.45rem 0.45rem;"
+													id="td_hallAmount"></td>
+											</tr>
+											<tr>
+												<th style="padding: 0.45rem 0.45rem;font-weight: normal">Starting Slot:
+												</th>
+												<td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
+													id="td_startingSlot"></td>
+												<th style="padding: 0.45rem 0.45rem;font-weight: normal">GST @18%:</th>
+												<td class="fw-semibold amount-cell " style="padding: 0.45rem 0.45rem;"
+													id="td_gst"></td>
+											</tr>
+											<tr>
+												<th style="padding: 0.45rem 0.45rem;font-weight: normal">Ending Slot:
+												</th>
+												<td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
+													id="td_endingSlot"></td>
+												<th style="padding: 0.45rem 0.45rem;font-weight: normal">Total Amount:
+												</th>
+												<td class="fw-semibold amount-cell" style="padding: 0.45rem 0.45rem;"
+													id="td_totalAmount"></td>
+
+											</tr>
+										</table>
+									</div>
+								</div>
+								<div class="col-sm-12">
+									<!--<label class="form-label">Documents:<span class="text-danger"></span></label>-->
+									<div class="documents" id="documents"></div>
+								</div>
+
+								<div class="col-md-12 col-lg-12 col-sm-12 mb-2">
+									<input type="hidden" class="form-control text-center" name="bookingid"
+										id="bookingid" disabled />
+									<div class="card-body">
+										<table>
+											<tr>
+												<th colspan="10" style="background-color: #f2f2f2;">Booking Payment
+													Details</th>
+											</tr>
+
+											<tr>
+												<th style="padding: 0.45rem 0.45rem;font-weight: normal;">Transaction
+													ID:</th>
+												<td colspan="10" class="fw-semibold" style="padding: 0.45rem 0.45rem;"
+													id="td_transactionId"></td>
+
+											</tr>
+											<th style="padding: 0.45rem 0.45rem;font-weight: normal;">Amount Received:
+											</th>
+											<td colspan="10" class="fw-semibold" style="padding: 0.45rem 0.45rem;"
+												id="td_payamountReceived"></td>
+
+											</tr>
+											<tr>
+												<th style="padding: 0.45rem 0.45rem;font-weight: normal;">Transaction
+													Status:</th>
+												<td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
+													id="td_paymentStatus"></td>
+
+											</tr>
+
+										</table>
+									</div>
+								</div>
+
+
+							</div>
+						</div>
+						<div class="block-content block-content-full text-end bg-body" id="mbutton2">
+
+							<button type="button" class="btn btn-sm btn-alt-secondary"
+								data-bs-dismiss="modal">Close</button>
+						</div>
+					</form>
+				</div>
+			</div>
+		</div>
+
+		<!-- End Modal User -->
+		<!-- Footer -->
+		<div class="modal fade" id="fileModal" tabindex="-1" role="dialog" aria-labelledby="fileModalLabel"
+			aria-hidden="true">
+			<div class="modal-dialog modal-lg" role="document">
+				<div class="modal-content">
+					<div class="modal-header">
+						<h5 class="modal-title" id="fileModalLabel">File Preview</h5>
+						<button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
+							<span aria-hidden="true">&times;</span>
+						</button>
+					</div>
+					<div class="modal-body">
+						<embed id="filePreview" src="" width="100%" height="600px">
+					</div>
+					<div class="modal-footer">
+						<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+					</div>
+				</div>
+			</div>
+		</div>
+		<div th:replace="~{fragments/resetpassword :: div}"></div>
+		<footer th:replace="~{fragments/footer2 :: footer}"></footer>
+		<script th:replace="~{fragments/loginscript :: script}"></script>
+		<script>
+			//script to open pending form
+			function pendingbooking(bookingId) {
+				$.ajax({
+					type: "GET",
+					url: '/communityhall/api/officer/getBookingDetails',
+					data: {
+						'bookingsId': bookingId
+					},
+					success: function (x) {
+						//console.log(x);
+						showBookingInfo(x);
+					}
+				});
+
+			}
+
+
+			function showBookingInfo(list) {
+				$('#pendingBookingForm').modal({
+					backdrop: 'static',
+					keyboard: false
+				});
+				$('#pendingBookingForm').modal('show');
+				document.getElementById("td_userName").innerHTML = list.users.name;
+				document.getElementById("td_mobileNumber").innerHTML = list.users.mobileNo;
+				document.getElementById("td_usertype").innerHTML = list.users.usertype;
+				document.getElementById("bookingid").value = list.bookingId;
+				var userDetails = list.users;
+				var userDetailsString =
+					userDetails.doorNo + ", " +
+					userDetails.street + ", " +
+					userDetails.area + ", " +
+					userDetails.location + "- " +
+					userDetails.pinCode;
+				document.getElementById("td_useraddress").innerHTML = userDetailsString;
+				document.getElementById("td_hallName").innerHTML = list.hallDetails.hallName;
+				var hallDetails = list.hallDetails;
+				var hallDetailsString =
+					hallDetails.doorNo + ", " +
+					hallDetails.street + ", " +
+					hallDetails.area + ", " +
+					hallDetails.city + "- " +
+					hallDetails.pinCode;
+				document.getElementById("td_halladdress").innerHTML = hallDetailsString;
+				document.getElementById("td_caretakername").innerHTML = list.hallDetails.hallInchargeName;
+				document.getElementById("td_caretakermobileNumber").innerHTML = list.hallDetails.hallInchargeMobno;
+
+				document.getElementById("td_bookingDate").innerHTML = list.bookingDate;
+				document.getElementById("td_depositeAmount").innerHTML = '₹ ' + parseFloat(list.depositAmount).toFixed(2);
+				document.getElementById("td_hallAmount").innerHTML = '₹ ' + parseFloat(list.hallAmount).toFixed(2);
+				document.getElementById("td_totalAmount").innerHTML = '₹ ' + parseFloat(list.amountReceived).toFixed(2);
+				var gstcl = (list.hallAmount * (list.hallDetails.gst / 100));
+				var formattedGst = gstcl.toFixed(2);
+				document.getElementById("td_gst").innerHTML = '₹ ' + formattedGst;
+				document.getElementById("td_startDate").innerHTML = list.startDate;
+				document.getElementById("td_endDate").innerHTML = list.endDate;
+				document.getElementById("booking_id").innerHTML = list.bookingId;
+
+				function getTimeSlot(slotValue) {
+					//console.log("Slot Value in getTimeSlot function:", slotValue);
+					var timeSlot;
+					var trimmedSlotValue = String(slotValue).trim(); // Convert to string and then trim
+					if (trimmedSlotValue === '1') {
+						timeSlot = 'Morning';
+					} else if (trimmedSlotValue === '2') {
+						timeSlot = 'Evening';
+					} else {
+						timeSlot = 'Unknown';
+					}
+					//console.log("Time Slot:", timeSlot);
+					return timeSlot;
+				}
+
+				document.getElementById("td_startingSlot").innerHTML = getTimeSlot(list.startingSlot);
+				document.getElementById("td_endingSlot").innerHTML = getTimeSlot(list.endingSlot);
+				document.getElementById("td_bookingStatus").innerHTML = list.bookingStatus;
+				document.getElementById("td_transactionId").innerHTML = list.payments.transactionId;
+				document.getElementById("td_payamountReceived").innerHTML = '₹ ' + list.payments.amountReceived;
+				document.getElementById("td_paymentStatus").innerHTML = list.payments.paymentStatus;
+
+				showReasonDocuments(list);
+			}
+
+			function showReasonDocuments(list) {
+				$.ajax({
+					type: "GET",
+					url: '/communityhall/api/officer/getReasonByName',
+					data: {
+						'reasonName': list.reason
+					},
+					success: function (x) {
+						// console.log(x);
+						showReasonWithDocument(x, list);
+					}
+				});
+			}
+
+			// Display booking documents
+			function showReasonWithDocument(reasonData, list) {
+				var reasonDocumentData = reasonData.reasonDocumentMasterList;
+				var bookingDocumentsList = list.bookingDocumentsList;
+
+				const reasonFieldsContainer = $('#documents');
+				reasonFieldsContainer.empty();
+
+				// Create a responsive table container
+				var tableResponsiveDiv = $('<div>').addClass('table-responsive');
+
+				// Create the table with Bootstrap classes and custom styles
+				var table = $('<table>').addClass('table table-bordered table-striped table-vcenter js-dataTable-responsive').css({
+					'width': '100%',
+					'height': 'auto',
+					'border': '1px solid black'
+				});
+
+				// Create the table header (thead)
+				var thead = $('<thead>').appendTo(table);
+				var headerRow = $('<tr>').appendTo(thead);
+				$('<th>').attr('colspan', '3').text('Document Details').css({
+					'color': 'black',
+					'font-weight': 'bold',
+					'background-color': '#f2f2f2',
+					'padding': '0.45rem 0.45rem'
+				}).appendTo(headerRow);
+
+				// Create header row for columns
+				var columnHeadersRow = $('<tr>').appendTo(thead);
+				$('<th>').text('S.No').appendTo(columnHeadersRow);
+				$('<th>').text('Required Info').appendTo(columnHeadersRow);
+				$('<th>').text('Required Documents').appendTo(columnHeadersRow);
+
+				// Create the table body (tbody)
+				var tbody = $('<tbody>').appendTo(table);
+
+				// Iterate through the documents list and populate rows
+				for (var i = 0; i < bookingDocumentsList.length; i++) {
+					(function (index) {
+						var row = $('<tr>').appendTo(tbody);
+						$('<td>').text(index + 1).appendTo(row);
+
+						// Determine the text content for the second cell
+						var name = bookingDocumentsList[index].name ? bookingDocumentsList[index].name : ''; // Empty string if name is null or undefined
+						var fieldText = reasonDocumentData[index].fieldName;
+						var fullText = name ? fieldText + ': ' + name : fieldText; // Include colon only if name is not empty
+
+						$('<td>').text(fullText).appendTo(row);
+
+						// Create a link to view document image
+						var viewLink = $('<a>').attr('href', 'javascript:void(0)').text(reasonDocumentData[index].docFieldName).on('click', function () {
+							showDocumentImage(bookingDocumentsList[index].bookingDocUrl);
+						});
+						$('<td>').append(viewLink).appendTo(row);
+					})(i);
+				}
+
+				// Append table to the responsive container
+				tableResponsiveDiv.append(table);
+
+				// Append table to the container in the DOM
+				reasonFieldsContainer.append(tableResponsiveDiv);
+			}
+
+			function showDocumentImage(fileURL) {
+				//console.log(fileURL);
+				openFileModal(fileURL);
+			}
+			// Event delegation for dynamically added elements
+			$(document).on('click', '.view-document', function () {
+				const fileURL = $(this).data('url');
+				openFileModal(fileURL);
+			});
+
+			function openFileModal(fileURL) {
+				$('#filePreview').attr('src', fileURL);
+				$('#fileModal').modal('show');
+			}
+
+			$(document).ready(
+				function () {
+					var buttons = [{
+						extend: 'pageLength',
+						className: 'btn btn-primary'
+					}, {
+						title: 'Data export',
+						extend: 'copyHtml5',
+						text: 'Copy',
+						className: 'btn btn-primary',
+						id: 'copyBtn'
+					}, {
+						extend: 'excelHtml5',
+						text: 'Excel',
+						className: 'btn btn-primary',
+						id: 'excelBtn'
+					}, {
+						extend: 'csvHtml5',
+						text: 'CSV',
+						className: 'btn btn-primary',
+						id: 'csvBtn'
+					}, {
+						extend: 'pdfHtml5',
+						text: 'PDF',
+						className: 'btn btn-primary',
+						id: 'pdfBtn'
+					},
+
+					];
+
+					$('#bookingrejectedtable').DataTable(
+						{
+							dom: 'Bftip',
+							columnDefs: [{
+								targets: 'no-sort',
+								orderable: false
+							}],
+							lengthMenu: [
+								[50, 100, 200, 500, -1],
+								['50 rows', '100 rows', '200 rows',
+									'500 rows', 'Show all']],
+							scrollY: '50vh',
+							fixedColumns: {
+								left: 1,
+								right: 1
+							},
+							buttons: [buttons],
+							responsive: true,
+							searching: true, // Enable search
+							select: false,
+							processing: false,
+						});
+				});
+		</script>
+</body>
+
+</html>

src/main/resources/templates/sm/settlement-reject.html

@@ -0,0 +1,764 @@
+<!DOCTYPE html>
+<html xmlns:th="http://www.thymeleaf.org">
+
+<head th:replace="~{fragments/head-sm :: head}"></head>
+<style>
+	.card-body table {
+		width: 100%;
+		padding: 100px;
+	}
+
+	.card-body th,
+	td {
+		padding: 8px;
+		text-align: left;
+	}
+
+	.amount-cell {
+		text-align: right;
+		padding-right: 1rem;
+		/* Adjust padding as needed */
+	}
+
+	.table {
+		width: 100% !important;
+	}
+</style>
+
+<body>
+	<!-- Page Container -->
+	<div id="page-container"
+		class="sidebar-o sidebar-dark enable-page-overlay side-scroll page-header-fixed page-header-dark">
+		<!-- Sidebar Nav-->
+		<nav th:replace="~{fragments/nav-sm :: nav}"></nav>
+		<!-- END Sidebar -->
+		<!-- Header -->
+		<header th:replace="~{fragments/header-sm :: header}"></header>
+		<!-- END Header -->
+		<!-- Main Container -->
+		<main id="main-container">
+			<div class="block-header block-header-default">
+				<h3 class="block-title"> List of Settlement Rejected</h3>
+			</div>
+			<div class="block-content p-0">
+				<div class="p-sm-4 p-0">
+					<div class="table-responsive">
+						<table class="table table-bordered table-striped table-vcenter js-dataTable-responsive"
+							id="rejectedsettlementlist">
+							<thead class="thead-light">
+								<tr>
+									<th>S.no</th>
+									<th>Zone</th>
+									<th>Division</th>
+									<th>Hall Name</th>
+									<th>Booking Id</th>
+									<th>Booking Date</th>
+									<th>Settlement Id</th>
+									<th>Settlement Rejected Date</th>
+									<th>Deposit Amount</th>
+									<th>Collection Amount</th>
+									<th>Refunded Amount</th>
+									<th>Status</th>
+									<th>Action</th>
+								</tr>
+							</thead>
+							<tbody>
+								<!--<tbody th:each="registration, i : ${registrations}">-->
+								<!--<tr>-->
+								<tr th:each="settlement, rowStat : ${rejectSettlementlist}">
+									<!--<td class="text-center" th:text="${i.index + 1}"></td>-->
+									<td class="text-center" th:text="${rowStat.index + 1}"></td>
+									<td class="text-center" th:text="${settlement.hallDetails.zone}"></td>
+									<td class="text-center" th:text="${settlement.hallDetails.division}"></td>
+									<td class="text-center" th:text="${settlement.hallDetails.hallName}"></td>
+									<td class="text-center" th:text="${settlement.bookingId}"></td>
+									<td class="text-center" th:text="${settlement.bookingDate}"></td>
+									<td class="text-center" th:text="${settlement.settlement.settlementId}"></td>
+									<td class="text-center" th:text="${settlement.settlement.updatedDate}"></td>
+									<td class="text-center" th:text="${settlement.depositAmount}"></td>
+									<td class="text-center" th:text="${settlement.settlement.collectionPending}"></td>
+									<td class="text-center" th:text="${settlement.settlement.refundedAmount}"></td>
+									<td class="text-center" th:text="${settlement.refundStatus}"></td>
+
+									<td>
+										<p>
+											<span class="badge bg-warning" style="cursor: pointer;"
+												th:onclick="rejected([[${settlement.settlement.settlementId}]])">View</span>
+
+										</p>
+
+
+									</td>
+								</tr>
+							</tbody>
+						</table>
+					</div>
+				</div>
+			</div>
+		</main>
+
+		<!--modal for Rejected-->
+		<div class="modal fade backdrop" id="rejectSettlementForm" data-backdrop="static" tabindex="-1" role="dialog"
+			aria-labelledby="staticBackdropLabel" aria-hidden="true">
+			<div class="modal-dialog modal-lg" role="document">
+				<div class="modal-content">
+
+					<form id="ownform" onsubmit="return rejectsubmit();">
+						<div class="block block-rounded block-themed block-transparent mb-0">
+
+							<div class="block-header bg-primary-dark">
+								<h3 class="block-title" id="2mtitle">Settlement Information</h3>
+								<div class="block-options">
+									<button type="button" class="btn-block-option" data-bs-dismiss="modal"
+										aria-label="Close">
+										<i class="fa fa-fw fa-times"></i>
+									</button>
+								</div>
+							</div>
+
+							<div class="block-content row">
+
+								<div class="col-md-12 col-lg-12 col-sm-12">
+									<input type="hidden" class="form-control text-center" name="settlementid"
+										id="settlementid" disabled />
+									<div class="card-body">
+										<table>
+											<tr>
+												<th colspan="10" style="background-color: #f2f2f2;">User Details</th>
+											</tr>
+											<tr>
+												<th style="padding: 0.45rem 0.45rem;font-weight: normal;">User Name:
+												</th>
+												<td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
+													id="td_userName"></td>
+												<th style="padding: 0.45rem 0.45rem;font-weight: normal;">Mobile Number:
+												</th>
+												<td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
+													id="td_mobileNumber"></td>
+
+												<th style="padding: 0.45rem 0.45rem;font-weight: normal;">User Type:
+												</th>
+												<td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
+													id="td_usertype"></td>
+
+											</tr>
+											<tr>
+												<th style="padding: 0.45rem 0.45rem;font-weight: normal;">User Address:
+												</th>
+												<td colspan="5" class="fw-semibold" style="padding: 0.45rem 0.45rem;"
+													id="td_useraddress"></td>
+
+											</tr>
+											<input type="hidden" class="form-control text-center" name="bookingid"
+												id="bookingid" disabled />
+											<tr>
+												<th colspan="10" style="background-color: #f2f2f2;">Hall Details</th>
+											</tr>
+
+											<tr>
+												<th style="padding: 0.45rem 0.45rem;font-weight: normal;">Hall Name:
+												</th>
+												<td colspan="10" class="fw-semibold" style="padding: 0.45rem 0.45rem;"
+													id="td_hallName"></td>
+
+											</tr>
+											<th style="padding: 0.45rem 0.45rem;font-weight: normal;">Hall Address:</th>
+											<td colspan="10" class="fw-semibold" style="padding: 0.45rem 0.45rem;"
+												id="td_halladdress"></td>
+
+											</tr>
+											<tr>
+												<th style="padding: 0.45rem 0.45rem;font-weight: normal;">Caretaker
+													Name:</th>
+												<td colspan="2" class="fw-semibold" style="padding: 0.45rem 0.45rem;"
+													id="td_caretakername"></td>
+												<th style="padding: 0.45rem 0.45rem;font-weight: normal;">Caretaker
+													Mobile Number:</th>
+												<td colspan="2" class="fw-semibold" style="padding: 0.45rem 0.45rem;"
+													id="td_caretakermobileNumber"></td>
+
+											</tr>
+
+										</table>
+									</div>
+								</div>
+
+
+
+								<div class="col-md-12 col-lg-12 col-sm-12">
+									<input type="hidden" class="form-control text-center" name="settlementid"
+										id="settlementid" disabled />
+									<div class="card-body">
+										<table>
+											<tr>
+												<th colspan="4" style="background-color: #f2f2f2;">Booking
+													Details (Booking Id:-<span id="booking_id"
+														style="color:blue"></span>)</th>
+											</tr>
+											<tr>
+												<th style="padding: 0.45rem 0.45rem;font-weight: normal">Booking Date:
+												</th>
+												<td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
+													id="td_bookingDate"></td>
+												<th style="padding: 0.45rem 0.45rem;font-weight: normal">Deposit Amout:
+												</th>
+												<td class="fw-semibold amount-cell" style="padding: 0.45rem 0.45rem;"
+													id="td_depositeAmount"></td>
+											</tr>
+											<tr>
+												<th style="padding: 0.45rem 0.45rem;font-weight: normal">Start Date:
+												</th>
+												<td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
+													id="td_startDate"></td>
+												<th style="padding: 0.45rem 0.45rem;font-weight: normal">Hall Amount:
+												</th>
+												<td class="fw-semibold amount-cell" style="padding: 0.45rem 0.45rem;"
+													id="td_hallAmount"></td>
+											</tr>
+											<tr>
+												<th style="padding: 0.45rem 0.45rem;font-weight: normal">END
+													Date:</th>
+												<td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
+													id="td_endDate"></td>
+												<th style="padding: 0.45rem 0.45rem;font-weight: normal">GST @18%:</th>
+												<td class="fw-semibold amount-cell" style="padding: 0.45rem 0.45rem;"
+													id="td_gst"></td>
+											</tr>
+											<tr>
+												<th style="padding: 0.45rem 0.45rem;font-weight: normal">Starting Slot:
+												</th>
+												<td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
+													id="td_startingSlot"></td>
+												<th style="padding: 0.45rem 0.45rem;font-weight: normal">Total Amount:
+												</th>
+												<td class="fw-semibold amount-cell" style="padding: 0.45rem 0.45rem;"
+													id="td_totalAmount"></td>
+											</tr>
+											<tr>
+												<th style="padding: 0.45rem 0.45rem;font-weight: normal">Ending Slot:
+												</th>
+												<td colspan="3" class="fw-semibold" style="padding: 0.45rem 0.45rem;"
+													id="td_endingSlot"></td>
+											</tr>
+										</table>
+									</div>
+								</div>
+
+								<div class="col-md-12 col-lg-12 col-sm-12">
+									<div class="card-body">
+										<table>
+											<tr>
+												<th colspan="6" style="background-color: #f2f2f2;">EB Details</th>
+											</tr>
+											<tr>
+												<th style="padding: 0.45rem 0.45rem;font-weight: normal">Consumer
+													Number:
+												</th>
+												<td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
+													id="td_EBNumber">
+												</td>
+												<th style="padding: 0.45rem 0.45rem;font-weight: normal">EB Amount Per
+													Unit:
+												</th>
+												<td class="fw-semibold amount-cell" style="padding: 0.45rem 0.45rem;"
+													id="td_ebamountperunit"></td>
+												<th style="padding: 0.45rem 0.45rem;font-weight: normal">MF DT Unit:
+												</th>
+												<td class="fw-semibold amount-cell" style="padding: 0.45rem 0.45rem;"
+													id="td_mfDtUnit"></td>
+											</tr>
+											<tr>
+												<th style="padding: 0.45rem 0.45rem;font-weight: normal">Start Reading:
+												</th>
+												<td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
+													id="td_startingReading"></td>
+												<th style="padding: 0.45rem 0.45rem;font-weight: normal">END Reading:
+												</th>
+												<td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
+													id="td_endingReading"></td>
+												<th style="padding: 0.45rem 0.45rem;font-weight: normal">Unit Consumed:
+												</th>
+												<td class="fw-semibold amount-cell" style="padding: 0.45rem 0.45rem;"
+													id="td_usedunit"></td>
+											</tr>
+											<tr>
+												<th style="padding: 0.45rem 0.45rem;font-weight: normal">EB Amount:</th>
+												<td colspan="5" class="fw-semibold" style="padding: 0.45rem 0.45rem;"
+													id="td_electricityamount"></td>
+											</tr>
+										</table>
+									</div>
+								</div>
+
+
+								<div id="damageDetails" style="margin-bottom:-17px"></div>
+
+								<div class="col-md-12 col-lg-12 col-sm-12">
+									<div class="card-body">
+										<table>
+											<tr>
+												<th colspan="2" style="background-color: #f2f2f2;font-weight: normal">
+													Amount to be Refunded</th>
+											</tr>
+											<tr>
+												<th style="padding: 0.45rem 0.45rem;font-weight: normal">Deposit
+													Amount:</th>
+												<td class="fw-semibold amount-cell" style="padding: 0.45rem 0.45rem;"
+													id="td_depositeamountforrefund">0</td>
+											</tr>
+											<tr>
+												<th style="padding: 0.45rem 0.45rem;font-weight: normal">EB Amount:</th>
+												<td class="fw-semibold amount-cell" style="padding: 0.45rem 0.45rem;"
+													id="td_ebAmount"></td>
+											</tr>
+											<tr>
+												<th style="padding: 0.45rem 0.45rem;font-weight: normal">Damage Amount:
+												</th>
+												<td class="fw-semibold amount-cell" style="padding: 0.45rem 0.45rem;"
+													id="td_damage"></td>
+											</tr>
+											<tr id="pendingcolumn">
+												<th id="th_settel_label"
+													style="padding: 0.45rem 0.45rem; background-color: #f2f2f2;font-weight: normal">
+													Collection Pending Amount:</th>
+												<td class="fw-semibold amount-cell"
+													style="padding: 0.45rem 0.45rem; color: green;" id="td_pending_amt">
+													0</td>
+											</tr>
+											<tr>
+												<th
+													style="padding: 0.45rem 0.45rem; background-color: #f2f2f2;font-weight: normal">
+													Actual refundable Amount:</th>
+												<td class="fw-semibold amount-cell"
+													style="padding: 0.45rem 0.45rem; color: green;" id="td_settel_amt">0
+												</td>
+											</tr>
+										</table>
+									</div>
+								</div>
+
+
+								<!-- DD detail -->
+								<div id="ddTableContainer"></div>
+
+							</div>
+							<div class="block-content block-content-full text-end bg-body" id="mbutton2">
+								<button type="button" class="btn btn-sm btn-alt-secondary"
+									data-bs-dismiss="modal">Close</button>
+							</div>
+						</div>
+
+					</form>
+
+				</div>
+			</div>
+		</div>
+
+		<div class="modal fade" id="fileModal" tabindex="-1" role="dialog" aria-labelledby="fileModalLabel"
+			aria-hidden="true">
+			<div class="modal-dialog modal-lg" role="document">
+				<div class="modal-content">
+					<div class="modal-header">
+						<h5 class="modal-title" id="fileModalLabel">File Preview</h5>
+						<button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
+							<span aria-hidden="true">&times;</span>
+						</button>
+					</div>
+					<div class="modal-body">
+						<embed id="filePreview" src="" width="100%" height="600px">
+					</div>
+					<div class="modal-footer">
+						<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+					</div>
+				</div>
+			</div>
+		</div>
+
+		<!-- Footer -->
+
+		<footer th:replace="~{fragments/footer2 :: footer}"></footer>
+
+		<!-- END Footer -->
+
+	</div>
+	<!-- Scripts -->
+	<div th:replace="~{fragments/resetpassword :: div}"></div>
+	<script th:replace="~{fragments/loginscript :: script}"></script>
+	<script>
+		//script to open pending form
+		$(document).ready(function () {
+			// DataTables buttons configuration
+			var buttons = [
+				{
+					extend: 'pageLength',
+					className: 'btn btn-primary'
+				},
+				{
+					title: 'Data export',
+					extend: 'copyHtml5',
+					text: 'Copy',
+					className: 'btn btn-primary',
+					id: 'copyBtn'
+				},
+				{
+					extend: 'excelHtml5',
+					text: 'Excel',
+					className: 'btn btn-primary',
+					id: 'excelBtn'
+				},
+				{
+					extend: 'csvHtml5',
+					text: 'CSV',
+					className: 'btn btn-primary',
+					id: 'csvBtn'
+				},
+				{
+					extend: 'pdfHtml5',
+					text: 'PDF',
+					className: 'btn btn-primary',
+					id: 'pdfBtn'
+				}
+			];
+
+			// Initialize DataTable for each tab on tab shown event
+			$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
+				var targetTable = $(e.target).attr('href'); // activated tab
+				$(targetTable).find('.dataTable').DataTable().columns.adjust();
+			});
+
+			// Initialize DataTable for Settlement Approved tab
+			$('#rejectedsettlementlist').DataTable({
+				dom: 'Bftip',
+				columnDefs: [
+					{ targets: 'no-sort', orderable: false }
+				],
+				lengthMenu: [
+					[50, 100, 200, 500, -1],
+					['50 rows', '100 rows', '200 rows', '500 rows', 'Show all']
+				],
+				buttons: buttons,
+				responsive: true,
+				searching: true,
+				select: false,
+				processing: false,
+				// Set width to 100%
+				"autoWidth": true
+			});
+		});
+		function rejected(settlementId) {
+			$.ajax({
+				type: "GET",
+				url: '/communityhall/api/officer/getSettlementList',
+				data: {
+					'settlementsid': settlementId
+				},
+				success: function (x) {
+					// console.log(x);
+					showSettlementInfo(x)
+					showDamageDetails(x);
+				}
+			});
+
+		}
+
+		function showSettlementInfo(list) {
+			// console.log(list); // Log the damageList array
+			// console.log(list.damageList[0]);
+
+			$('#rejectSettlementForm').modal({
+				backdrop: 'static',
+				keyboard: false
+			});
+			$('#rejectSettlementForm').modal('show');
+			document.getElementById("settlementid").value = list.settlement.settlementId;
+			document.getElementById("td_userName").innerHTML = list.users.name;
+			document.getElementById("td_mobileNumber").innerHTML = list.users.mobileNo;
+			document.getElementById("td_usertype").innerHTML = list.users.usertype;
+			var userDetails = list.users;
+			var userDetailsString =
+				userDetails.doorNo + ", " +
+				userDetails.street + ", " +
+				userDetails.area + ", " +
+				userDetails.location + " ,Chennai- " +
+				userDetails.pinCode;
+			document.getElementById("td_useraddress").innerHTML = userDetailsString;
+			document.getElementById("td_hallName").innerHTML = list.hallDetails.hallName;
+			var hallDetails = list.hallDetails;
+			var hallDetailsString =
+				hallDetails.doorNo + ", " +
+				hallDetails.street + ", " +
+				hallDetails.area + ", " +
+				hallDetails.city + "- " +
+				hallDetails.pinCode;
+			document.getElementById("td_halladdress").innerHTML = hallDetailsString;
+			document.getElementById("td_caretakername").innerHTML = list.hallDetails.hallInchargeName;
+			document.getElementById("td_caretakermobileNumber").innerHTML = list.hallDetails.hallInchargeMobno;
+			document.getElementById("td_bookingDate").innerHTML = list.bookingDate;
+			document.getElementById("td_depositeAmount").innerHTML = '₹ ' + parseFloat(list.depositAmount).toFixed(2);
+			document.getElementById("td_hallAmount").innerHTML = '₹ ' + parseFloat(list.hallAmount).toFixed(2);
+			// Calculate GST and total amount
+			var gstAmount = (parseFloat(list.hallAmount) * (list.hallDetails.gst / 100)).toFixed(2);
+			var totalAmount = parseFloat(list.amountReceived).toFixed(2);
+
+			document.getElementById("td_gst").innerHTML = '₹ ' + gstAmount;
+			document.getElementById("td_totalAmount").innerHTML = '₹ ' + totalAmount;
+
+			document.getElementById("td_startDate").innerHTML = list.startDate;
+			document.getElementById("td_endDate").innerHTML = list.endDate;
+			document.getElementById("booking_id").innerHTML = list.bookingId;
+
+			function getTimeSlot(slotValue) {
+				var timeSlot;
+				var trimmedSlotValue = String(slotValue).trim(); // Convert to string and then trim
+				if (trimmedSlotValue === '1') {
+					timeSlot = 'Morning';
+				} else if (trimmedSlotValue === '2') {
+					timeSlot = 'Evening';
+				} else {
+					timeSlot = 'Unknown';
+				}
+				return timeSlot;
+			}
+
+			document.getElementById("td_startingSlot").innerHTML = getTimeSlot(list.startingSlot);
+			document.getElementById("td_endingSlot").innerHTML = getTimeSlot(list.endingSlot);
+			document.getElementById("td_EBNumber").innerHTML = list.hallDetails.ebNumber;
+			document.getElementById("td_startingReading").innerHTML = list.ebDetails.startingReading;
+			document.getElementById("td_endingReading").innerHTML = list.ebDetails.endingReading;
+			document.getElementById("td_usedunit").innerHTML = list.ebDetails.usedUnit;
+			document.getElementById("td_ebamountperunit").innerHTML = '₹ ' + parseFloat(list.hallDetails.ebCostPerUnit).toFixed(2);
+			document.getElementById("td_mfDtUnit").innerHTML = '₹ ' + parseFloat(list.hallDetails.mfDtUnit).toFixed(2);
+			document.getElementById("td_depositeamountforrefund").innerHTML = '₹ ' + parseFloat(list.depositAmount).toFixed(2);
+			document.getElementById("td_electricityamount").innerHTML = '₹ ' + parseFloat(list.ebDetails.ebAmount).toFixed(2);
+			document.getElementById("td_ebAmount").innerHTML = '₹ ' + parseFloat(list.ebDetails.ebAmount).toFixed(2);
+			document.getElementById("td_damage").innerHTML = '₹ ' + parseFloat(list.settlement.damageAmount).toFixed(2);
+
+			var eb_amt = parseFloat(list.ebDetails.ebAmount).toFixed(2);
+			var deposit_amt = parseFloat(list.depositAmount).toFixed(2);
+			var tem_total = (deposit_amt - eb_amt).toFixed(2);
+			$("#td_settel_amt").html(tem_total);
+		}
+
+
+		function showDamageDetails(data) {
+			var damageFieldContainer = $('#damageDetails');
+			damageFieldContainer.empty();
+
+			// Create a div for table responsiveness
+			var tableResponsiveDiv = $('<div>').addClass('table-responsive').css('margin-right', '0px');
+
+			// Create table with similar classes and styles to the modal table
+			var table = $('<table>').addClass('table table-bordered table-striped').css({ 'width': '97%', 'border-color': 'black', 'border-top-color': 'white' });
+			var thead = $('<thead>').addClass('thead-light');
+			var tbody = $('<tbody>');
+
+			// Create Damage Details header row
+			var headerRow = $('<tr>').appendTo(thead);
+			$('<th>').attr('colspan', '6').text('Damage Details (if any)').css({
+				'padding': '0.45rem 0.45rem',
+				'background-color': '#f2f2f2',
+				'font-weight': 'bold',
+				'color': 'black',
+			}).appendTo(headerRow);
+
+			// Create table header row
+			var columnHeadersRow = $('<tr>').css('background-color', '#f2f2f2').appendTo(thead);
+			$('<th>').text('S.No').css({ 'padding': '0.45rem 0.45rem', 'text-align': 'center' }).appendTo(columnHeadersRow);
+			$('<th>').text('Asset Name').css({ 'padding': '0.45rem 0.45rem', 'text-align': 'center' }).appendTo(columnHeadersRow);
+			$('<th>').text('Damage Img').css({ 'padding': '0.45rem 0.45rem', 'text-align': 'center' }).appendTo(columnHeadersRow);
+			$('<th>').text('Cost').css({ 'padding': '0.45rem 0.45rem', 'text-align': 'center' }).appendTo(columnHeadersRow);
+			$('<th>').text('Qty').css({ 'padding': '0.45rem 0.45rem', 'text-align': 'center' }).appendTo(columnHeadersRow);
+			$('<th>').text('Amount').css({ 'padding': '0.45rem 0.45rem', 'text-align': 'center' }).appendTo(columnHeadersRow);
+
+			var totalAmount = 0;
+			if (data.damageList.length === 0) {
+				var row = $('<tr>').appendTo(tbody);
+				$('<td>').attr('colspan', '6').text('No Damaged Items').css({
+					'padding': '0.45rem 0.45rem',
+					'text-align': 'center',
+					'font-weight': 'bold',
+					'background-color': '#f2f2f2'
+				}).appendTo(row);
+			} else {
+				$.each(data.damageList, function (index, detail) {
+					var row = $('<tr>').appendTo(tbody);
+					$('<td>').text(index + 1).css({
+						'padding': '0.45rem 0.45rem',
+						'text-align': 'center'
+					}).appendTo(row);
+					$('<td>').text(detail.assetName).css({
+						'padding': '0.45rem 0.45rem',
+						'text-align': 'center'
+					}).appendTo(row);
+
+					var viewLink = $('<a>').attr('href', 'javascript:void(0)').text('View').on('click', function () {
+						showDamageImage(detail.damageImageUrl);
+					});
+					$('<td>').css({
+						'padding': '0.45rem 0.45rem',
+						'text-align': 'center'
+					}).append(viewLink).appendTo(row);
+
+					var assetamt = (detail.assetAmount / detail.quantity).toFixed(2);
+					$('<td>').text('₹ ' + assetamt).css({
+						'padding': '0.45rem 0.45rem',
+						'text-align': 'center'
+					}).appendTo(row);
+
+					$('<td>').text(detail.quantity).css({
+						'padding': '0.45rem 0.45rem',
+						'text-align': 'center'
+					}).appendTo(row);
+
+					var amount = detail.assetAmount;
+					totalAmount += amount;
+					$('<td>').text('₹ ' + amount.toFixed(2)).css({
+						'padding': '0.45rem 0.45rem',
+						'text-align': 'right'
+					}).appendTo(row);
+				});
+
+				// Add row for total amount
+				var totalRow = $('<tr>').appendTo(tbody);
+				$('<td>').attr('colspan', '5').text('Total Amount').css({
+					'padding': '0.45rem 0.45rem',
+					'font-weight': 'bold',
+					'background-color': '#f2f2f2'
+				}).appendTo(totalRow);
+				$('<td>').text('₹ ' + totalAmount.toFixed(2)).css({
+					'padding': '0.45rem 0.45rem',
+					'text-align': 'right'
+				}).appendTo(totalRow);
+
+				$("#td_dam_amt").html('₹ ' + totalAmount.toFixed(2));
+			}
+			// Append the table elements to the container div
+			table.append(thead, tbody);
+			tableResponsiveDiv.append(table);
+			damageFieldContainer.append(tableResponsiveDiv);
+
+			var temp_total = parseFloat($("#td_settel_amt").html());
+			var settleAmount = temp_total - totalAmount;
+			var refundStatus = data.refundStatus;
+
+			if (settleAmount < 0) {
+				// console.log(settleAmount);
+				$("#td_settel_amt").html(0.00);
+				$("#pendingcolumn").show();
+				$("#td_pending_amt").html('₹ ' + Math.abs(settleAmount).toFixed(2));
+				$("#td_pending_amt").css("color", "red");
+				$("#generatechallon").show();
+				$("#uploadchallon").show();
+				$("#approvebutton").prop("disabled", true);
+				$("#rejectbutton").show();
+			} else {
+				$("#td_settel_amt").html('₹ ' + settleAmount.toFixed(2));
+				$("#pendingcolumn").hide();
+				$("#td_settel_amt").css("color", "green"); // Set color to green for positive amounts
+				$("#generatechallon").hide();
+				$("#uploadchallon").hide();
+			}
+			if (data.settlement.challonamount) {
+				// Show the table containing ddnumber and challan image
+				var challonTableContainer = $("#challonTableContainer"); // Assuming you have a div with this ID for the table
+				challonTableContainer.empty(); // Clear any existing content
+				challonTableContainer.show(); // Ensure the container is visible
+
+				var tableResponsiveDiv = $('<div>').addClass('table-responsive').css('margin-right', '-24px');
+
+				// Create table with similar classes and styles to the modal table
+				var table = $('<table>').addClass('table table-bordered table-striped').css({ 'width': '100%', 'border-color': 'black', 'border-top-color': 'white' });
+				var thead = $('<thead>').addClass('thead-light');
+				var tbody = $('<tbody>');
+				var headerRow = $('<tr>').appendTo(thead);
+				$('<th>').attr('colspan', '6').text('Challan Details').css({
+					'padding': '0.45rem 0.45rem',
+					'background-color': '#f2f2f2',
+					'font-weight': 'bold',
+					'color': 'black',
+				}).appendTo(headerRow);
+				var columnRow = $('<tr>').css('background-color', '#f2f2f2').appendTo(thead);
+				//$('<th>').text('DD Number').css({'padding': '0.45rem 0.45rem', 'text-align': 'center'}).appendTo(columnRow);
+				//$('<th>').text('DD Date').css({'padding': '0.45rem 0.45rem', 'text-align': 'center'}).appendTo(columnRow);
+				$('<th>').text('Challan Number').css({ 'padding': '0.45rem 0.45rem', 'text-align': 'center' }).appendTo(columnRow);
+				$('<th>').text('Challan Date').css({ 'padding': '0.45rem 0.45rem', 'text-align': 'center' }).appendTo(columnRow);
+				$('<th>').text('Challan Image').css({ 'padding': '0.45rem 0.45rem', 'text-align': 'center' }).appendTo(columnRow);
+
+				var row = $('<tr>').appendTo(tbody);
+				//$('<td>').text(data.settlement.ddnumber).css({'padding': '0.45rem 0.45rem', 'text-align': 'center'}).appendTo(row);
+				//$('<td>').text(data.settlement.ddnumber).css({'padding': '0.45rem 0.45rem', 'text-align': 'center'}).appendTo(row);
+				$('<td>').text(data.settlement.challonnumber).css({ 'padding': '0.45rem 0.45rem', 'text-align': 'center' }).appendTo(row);
+				$('<td>').text(data.settlement.challonamount).css({ 'padding': '0.45rem 0.45rem', 'text-align': 'center' }).appendTo(row);
+				//$('<td>').text(data.settlement.dddate).css({'padding': '0.45rem 0.45rem', 'text-align': 'center'}).appendTo(row);
+				var challanImgLink = $('<a>').attr('href', 'javascript:void(0)').text('View Image').on('click', function () {
+					showchallonimage(data.settlement.challon);
+				});
+				$('<td>').css({ 'padding': '0.45rem 0.45rem', 'text-align': 'center' }).append(challanImgLink).appendTo(row);
+
+				table.append(thead, tbody);
+				challonTableContainer.append(table);
+
+				// Hide all buttons
+				$("#generatechallon").hide();
+				$("#uploadchallon").hide();
+				$("#approvebutton").prop("disabled", false);
+			} else {
+				// Hide the ddTableContainer if ddnumber is not present
+				$("#challonTableContainer").hide();
+			}
+
+			if (data.settlement.ddnumber) {
+				// Show the table containing ddnumber and challan image
+				var ddTableContainer = $("#ddTableContainer"); // Assuming you have a div with this ID for the table
+				ddTableContainer.empty(); // Clear any existing content
+				ddTableContainer.show(); // Ensure the container is visible
+
+				var tableResponsiveDiv = $('<div>').addClass('table-responsive').css('margin-right', '-24px');
+
+				// Create table with similar classes and styles to the modal table
+				var table = $('<table>').addClass('table table-bordered table-striped').css({ 'width': '100%', 'border-color': 'black', 'border-top-color': 'white' });
+				var thead = $('<thead>').addClass('thead-light');
+				var tbody = $('<tbody>');
+				var headerRow = $('<tr>').appendTo(thead);
+				$('<th>').attr('colspan', '6').text('DD Details').css({
+					'padding': '0.45rem 0.45rem',
+					'background-color': '#f2f2f2',
+					'font-weight': 'bold',
+					'color': 'black',
+				}).appendTo(headerRow);
+				var columnRow = $('<tr>').css('background-color', '#f2f2f2').appendTo(thead);
+				$('<th>').text('DD Number').css({ 'padding': '0.45rem 0.45rem', 'text-align': 'center' }).appendTo(columnRow);
+				$('<th>').text('DD Date').css({ 'padding': '0.45rem 0.45rem', 'text-align': 'center' }).appendTo(columnRow);
+				$('<th>').text('DD Amount').css({ 'padding': '0.45rem 0.45rem', 'text-align': 'center' }).appendTo(columnRow);
+
+				var row = $('<tr>').appendTo(tbody);
+				$('<td>').text(data.settlement.ddnumber).css({ 'padding': '0.45rem 0.45rem', 'text-align': 'center' }).appendTo(row);
+				$('<td>').text(data.settlement.ddamount).css({ 'padding': '0.45rem 0.45rem', 'text-align': 'center' }).appendTo(row);
+
+				$('<td>').text(data.settlement.dddate).css({ 'padding': '0.45rem 0.45rem', 'text-align': 'center' }).appendTo(row);
+
+				table.append(thead, tbody);
+				ddTableContainer.append(table);
+
+				// Hide all buttons
+				$("#generatechallon").hide();
+				$("#uploadchallon").hide();
+				$("#approvebutton").prop("disabled", false);
+			} else {
+				// Hide the ddTableContainer if ddnumber is not present
+				$("#ddTableContainer").hide();
+			}
+		}
+		function showDamageImage(damageImageUrl) {
+			document.getElementById('filePreview').src = damageImageUrl;
+			$('#fileModal').modal('show');
+		}
+		function showchallonimage(challanImgLink) {
+			document.getElementById('filePreview').src = challanImgLink;
+			$('#fileModal').modal('show');
+		}
+
+	</script>
+</body>
+
+</html>

src/main/resources/templates/sm/settlementlist.html

@@ -0,0 +1,740 @@
+<!DOCTYPE html>
+
+<html xmlns:th="http://www.thymeleaf.org">
+
+<head th:replace="~{fragments/head-sm :: head}"></head>
+
+<meta charset="ISO-8859-1">
+
+<!-- Include DataTables CSS -->
+
+</head>
+
+
+
+<style>
+	.block-content {
+		padding-bottom: 10px;
+	}
+
+	.small-input {
+		width: 150px;
+		/* Adjust the width as needed */
+	}
+
+	.small-table th,
+	.small-table td {
+		font-size: 14px;
+		/* Adjust font size as needed */
+	}
+
+	/* Reduce padding for table cells */
+	.small-table td,
+	.small-table th {
+		padding: 5px;
+		/* Adjust padding as needed */
+	}
+
+	.card-body table {
+		width: 100%;
+		padding: 100px;
+	}
+
+	.card-body th,
+	td {
+		padding: 8px;
+		text-align: left;
+	}
+
+	.amount-cell {
+		text-align: right;
+		padding-right: 1rem;
+		/* Adjust padding as needed */
+	}
+</style>
+
+<body>
+	<div id="page-container"
+		class="sidebar-o sidebar-dark enable-page-overlay side-scroll page-header-fixed page-header-dark">
+		<aside th:replace="~{fragments/aside-right :: aside}"></aside>
+		<nav th:replace="~{fragments/nav-sm :: nav}"></nav>
+		<header th:replace="~{fragments/header-sm :: header}"></header>
+
+		<div class="content" style="margin-top: 77px;">
+			<div class="block block-rounded">
+				<div class="block-header bg-info text-white" style="background-color: #2c726c !important">
+					<h3 class="block-title">Settlement List</h3>
+				</div>
+				<div class="block-content">
+					<div class="table-responsive">
+						<table id="settlementListTable" class="table table-bordered table-vcenter">
+							<thead>
+								<tr>
+									<th>S.No</th>
+									<th>Zone</th>
+									<th>Division</th>
+									<th>Booking Id</th>
+									<th>Booking Date</th>
+									<th>Settlement id</th>
+									<th>Settlement Raised Date</th>
+									<th>Deposit Amount</th>
+									<th>Collection Pending(if any)</th>
+									<th>Refund Amount</th>
+									<th>Refund Status</th>
+									<th>View Details</th>
+								</tr>
+							</thead>
+							<tbody>
+								<!-- Iterate over past bookings and display them -->
+								<tr th:each="settlemetList,rowStat : ${settlemetList}"
+									th:if="${settlemetList.settlement != null}">
+									<td class="text-center" th:text="${rowStat.index + 1}"></td>
+									<td class="text-center" th:text="${settlemetList.hallDetails.zone}"></td>
+									<td class="text-center" th:text="${settlemetList.hallDetails.division}"></td>
+									<td class="text-center" th:text="${settlemetList.bookingId}"></td>
+									<td class="text-center" th:text="${settlemetList.bookingDate}"></td>
+									<td class="text-center" th:text="${settlemetList.settlement.settlementId}"></td>
+									<td class="text-center" th:text="${settlemetList.settlement.cdate}"></td>
+									<td class="text-center" th:text="${settlemetList.settlement.depositAmount}"></td>
+									<td class="text-center" th:text="${settlemetList.settlement.collectionPending}">
+									</td>
+									<td class="text-center" th:text="${settlemetList.settlement.refundedAmount}"></td>
+									<td class="text-center" th:text="${settlemetList.refundStatus}"></td>
+									<td>
+										<span class="badge bg-primary" style="cursor:pointer"
+											th:onclick="approve([[${settlemetList.settlement.settlementId}]])">View</span>
+										<!--<span class="badge bg-warning" style="cursor: pointer;"
+											th:if="${#strings.trim(settlemetList.RefundStatus) == 'REJECTED'}"
+											th:onclick="settleTheAmount([[${settlemetList.bookingId}]])">Raise
+											Again</span>-->
+										<!--<span class="badge bg-warning" style="cursor: pointer;"
+											th:if="${settlemetList.settlement.collectionPending > 0} and ${settlemetList.settlement.collectionStatus != 'paid'}"
+											th:onclick="|fetchQRCode(${settlemetList.bookingId})|">QR
+										</span>-->
+									</td>
+								</tr>
+
+
+
+
+							</tbody>
+						</table>
+					</div>
+				</div>
+			</div>
+		</div><br>
+		<br>
+		<br>
+		<br>
+
+
+	</div>
+	<!--modal for pending-->
+	<div class="modal fade backdrop" id="settlementinformation" data-backdrop="static" tabindex="-1" role="dialog"
+		aria-labelledby="staticBackdropLabel" aria-hidden="true">
+		<div class="modal-dialog modal-lg" role="document">
+			<div class="modal-content">
+
+				<form id="ownform">
+					<div class="block block-rounded block-themed block-transparent mb-0">
+
+						<div class="block-header bg-primary-dark">
+							<h3 class="block-title" id="2mtitle">Settlement Information</h3>
+							<div class="block-options">
+								<button type="button" class="btn-block-option" data-bs-dismiss="modal"
+									aria-label="Close">
+									<i class="fa fa-fw fa-times"></i>
+								</button>
+							</div>
+						</div>
+
+						<div class="block-content row">
+
+							<div class="col-md-12 col-lg-12 col-sm-12">
+								<input type="hidden" class="form-control text-center" name="settlementid"
+									id="settlementid" disabled />
+								<div class="card-body">
+									<table>
+										<tr>
+											<th colspan="10" style="background-color: #f2f2f2;">User Details</th>
+										</tr>
+										<tr>
+											<th style="padding: 0.45rem 0.45rem;font-weight: normal;">User Name:</th>
+											<td class="fw-semibold" style="padding: 0.45rem 0.45rem;" id="td_userName">
+											</td>
+											<th style="padding: 0.45rem 0.45rem;font-weight: normal;">Mobile Number:
+											</th>
+											<td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
+												id="td_mobileNumber"></td>
+
+											<th style="padding: 0.45rem 0.45rem;font-weight: normal;">User Type:</th>
+											<td class="fw-semibold" style="padding: 0.45rem 0.45rem;" id="td_usertype">
+											</td>
+
+										</tr>
+										<tr>
+											<th style="padding: 0.45rem 0.45rem;font-weight: normal;">User Address:</th>
+											<td colspan="5" class="fw-semibold" style="padding: 0.45rem 0.45rem;"
+												id="td_useraddress"></td>
+
+										</tr>
+
+									</table>
+								</div>
+							</div>
+
+
+
+							<div class="col-md-12 col-lg-12 col-sm-12">
+								<input type="hidden" class="form-control text-center" name="settlementid"
+									id="settlementid" disabled />
+								<div class="card-body">
+									<table>
+										<tr>
+											<th colspan="4" style="background-color: #f2f2f2;">Booking
+												Details(Booking Id:-<span id="booking_id" style="color:blue"></span>)
+											</th>
+										</tr>
+										<tr>
+											<th style="padding: 0.45rem 0.45rem;font-weight: normal">Booking Date:</th>
+											<td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
+												id="td_bookingDate"></td>
+											<th style="padding: 0.45rem 0.45rem;font-weight: normal">Deposit Amount:
+											</th>
+											<td class="fw-semibold amount-cell" style="padding: 0.45rem 0.45rem;"
+												id="td_depositeAmount"></td>
+										</tr>
+										<tr>
+											<th style="padding: 0.45rem 0.45rem;font-weight: normal">Start Date:</th>
+											<td class="fw-semibold" style="padding: 0.45rem 0.45rem;" id="td_startDate">
+											</td>
+											<th style="padding: 0.45rem 0.45rem;font-weight: normal">Hall Amount:</th>
+											<td class="fw-semibold amount-cell" style="padding: 0.45rem 0.45rem;"
+												id="td_hallAmount"></td>
+										</tr>
+										<tr>
+											<th style="padding: 0.45rem 0.45rem;font-weight: normal">END
+												Date:</th>
+											<td class="fw-semibold" style="padding: 0.45rem 0.45rem;" id="td_endDate">
+											</td>
+											<th style="padding: 0.45rem 0.45rem;font-weight: normal">GST @18%:</th>
+											<td class="fw-semibold amount-cell" style="padding: 0.45rem 0.45rem;"
+												id="td_gst"></td>
+										</tr>
+										<tr>
+											<th style="padding: 0.45rem 0.45rem;font-weight: normal">Starting Slot:</th>
+											<td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
+												id="td_startingSlot"></td>
+											<th style="padding: 0.45rem 0.45rem;font-weight: normal">Total Amount:</th>
+											<td class="fw-semibold amount-cell" style="padding: 0.45rem 0.45rem;"
+												id="td_totalAmount"></td>
+										</tr>
+										<tr>
+											<th style="padding: 0.45rem 0.45rem;font-weight: normal">Ending Slot:</th>
+											<td colspan="3" class="fw-semibold" style="padding: 0.45rem 0.45rem;"
+												id="td_endingSlot"></td>
+										</tr>
+									</table>
+								</div>
+							</div>
+
+							<div class="col-md-12 col-lg-12 col-sm-12">
+								<div class="card-body">
+									<table>
+										<tr>
+											<th colspan="6" style="background-color: #f2f2f2;">EB Details</th>
+										</tr>
+										<tr>
+											<th style="padding: 0.45rem 0.45rem;font-weight: normal">Consumer Number:
+											</th>
+											<td class="fw-semibold" style="padding: 0.45rem 0.45rem;" id="td_EBNumber">
+											</td>
+											<th style="padding: 0.45rem 0.45rem;font-weight: normal">EB Amount Per Unit:
+											</th>
+											<td class="fw-semibold amount-cell" style="padding: 0.45rem 0.45rem;"
+												id="td_ebamountperunit"></td>
+											<th style="padding: 0.45rem 0.45rem;font-weight: normal">MF DT Unit:</th>
+											<td class="fw-semibold amount-cell" style="padding: 0.45rem 0.45rem;"
+												id="td_mfDtUnit"></td>
+										</tr>
+										<tr>
+											<th style="padding: 0.45rem 0.45rem;font-weight: normal">Start Reading:</th>
+											<td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
+												id="td_startingReading"></td>
+											<th style="padding: 0.45rem 0.45rem;font-weight: normal">END Reading:</th>
+											<td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
+												id="td_endingReading"></td>
+											<th style="padding: 0.45rem 0.45rem;font-weight: normal">Unit Consumed:</th>
+											<td class="fw-semibold amount-cell" style="padding: 0.45rem 0.45rem;"
+												id="td_usedunit"></td>
+										</tr>
+										<tr>
+											<th style="padding: 0.45rem 0.45rem;font-weight: normal">EB Amount:</th>
+											<td colspan="5" class="fw-semibold" style="padding: 0.45rem 0.45rem;"
+												id="td_electricityamount"></td>
+										</tr>
+									</table>
+								</div>
+							</div>
+
+
+							<div id="damageDetails" style="margin-bottom: -17px;"></div>
+
+							<div class="col-md-12 col-lg-12 col-sm-12">
+								<div class="card-body">
+									<table>
+										<tr>
+											<th colspan="2" style="background-color: #f2f2f2;">Amount
+												to be Refunded</th>
+										</tr>
+										<tr>
+											<th style="padding: 0.45rem 0.45rem;font-weight: normal">Deposit Amount:
+											</th>
+											<td class="fw-semibold amount-cell" style="padding: 0.45rem 0.45rem;"
+												id="td_depositeamountforrefund">0</td>
+										</tr>
+										<tr>
+											<th style="padding: 0.45rem 0.45rem;font-weight: normal">EB Amount:</th>
+											<td class="fw-semibold amount-cell"
+												style="padding: 0.45rem 0.45rem;color:red" id="td_ebAmount">0</td>
+										</tr>
+										<tr>
+											<th style="padding: 0.45rem 0.45rem;font-weight: normal">Damage(if any):
+											</th>
+											<td class="fw-semibold amount-cell"
+												style="padding: 0.45rem 0.45rem;color:red" id="td_damage">0</td>
+										</tr>
+
+
+
+										<tr id="pendingcolumn">
+											<th id="th_settel_label"
+												style="padding: 0.45rem 0.45rem;font-weight: normal">Collection Pending
+												Amount:</th>
+											<td class="fw-semibold amount-cell"
+												style="padding: 0.45rem 0.45rem; color: green;" id="td_pending_amt">0
+											</td>
+										</tr>
+										<tr id="collectionstatuscolumn">
+											<th id="label" style="padding: 0.45rem 0.45rem;font-weight: normal">
+												Collection Pending Status
+												:</th>
+											<td class="fw-semibold amount-cell"
+												style="padding: 0.45rem 0.45rem; color: green;"
+												id="td_collection_status">
+											</td>
+										</tr>
+										<tr>
+											<th style="padding: 0.45rem 0.45rem;font-weight: normal">Actual refundable
+												Amount:</th>
+											<td class="fw-semibold amount-cell"
+												style="padding: 0.45rem 0.45rem; color: green;" id="td_settel_amt">0
+											</td>
+										</tr>
+									</table>
+								</div>
+							</div>
+							<!-- End damage detail -->
+
+						</div>
+						<div class="block-content block-content-full text-end bg-body" id="mbutton2">
+							<button type="button" class="btn btn-sm btn-alt-secondary"
+								data-bs-dismiss="modal">Close</button>
+							<a id="downloadLink" style="display: none;"></a>
+						</div>
+					</div>
+
+				</form>
+
+			</div>
+		</div>
+	</div>
+
+	<div class="modal fade" id="fileModal" tabindex="-1" role="dialog" aria-labelledby="fileModalLabel"
+		aria-hidden="true">
+		<div class="modal-dialog modal-lg" role="document">
+			<div class="modal-content">
+				<div class="modal-header">
+					<h5 class="modal-title" id="fileModalLabel">File Preview</h5>
+					<button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
+						<span aria-hidden="true">&times;</span>
+					</button>
+				</div>
+				<div class="modal-body">
+					<embed id="filePreview" src="" width="100%" height="600px">
+				</div>
+				<div class="modal-footer">
+					<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+				</div>
+			</div>
+		</div>
+	</div>
+
+	<div class="modal fade" id="qrview" tabindex="-1" role="dialog" aria-labelledby="fileModalLabel" aria-hidden="true">
+		<div class="modal-dialog modal-sm" role="document">
+			<div class="modal-content">
+				<div class="modal-header">
+					<h5 class="modal-title" id="qrview">QR Code for Collection Pending</h5>
+				</div>
+				<div class="modal-body">
+					<div>
+						<img style="border:4px solid #15455D;width: 256px; height: 260px;border-radius:10px;"
+							id="qrCodeImage" alt="QR Code">
+					</div>
+				</div>
+				<div class="modal-footer">
+					<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+				</div>
+			</div>
+		</div>
+	</div>
+	<div th:replace="~{fragments/resetpassword :: div}"></div>
+	<footer th:replace="~{fragments/footer2 :: footer}"></footer>
+	<script th:replace="~{fragments/loginscript :: script}"></script>
+	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
+	<script>
+		$(document).ready(
+			function () {
+
+				// DataTables buttons configuration
+				var buttons = [{
+					extend: 'pageLength',
+					className: 'btn btn-primary'
+				}, {
+					title: 'Data export',
+					extend: 'copyHtml5',
+					text: 'Copy',
+					className: 'btn btn-primary',
+					id: 'copyBtn'
+				}, {
+					extend: 'excelHtml5',
+					text: 'Excel',
+					className: 'btn btn-primary',
+					id: 'excelBtn'
+				}, {
+					extend: 'csvHtml5',
+					text: 'CSV',
+					className: 'btn btn-primary',
+					id: 'csvBtn'
+				}, {
+					extend: 'pdfHtml5',
+					text: 'PDF',
+					className: 'btn btn-primary',
+					id: 'pdfBtn'
+				},
+
+				];
+
+				$('#settlementListTable').DataTable(
+					{
+						dom: 'Bftip',
+						columnDefs: [{
+							targets: 'no-sort',
+							orderable: false
+						}],
+						lengthMenu: [
+							[50, 100, 200, 500, -1],
+							['50 rows', '100 rows', '200 rows',
+								'500 rows', 'Show all']],
+						scrollY: '50vh',
+						fixedColumns: {
+							left: 1,
+							right: 1
+						},
+						buttons: [buttons],
+						responsive: true,
+						searching: true, // Enable search
+						select: false,
+						processing: false,
+					});
+
+				// Link the search input to DataTable
+				$('#searchInput').on('keyup', function () {
+					dataTable.search(this.value).draw();
+				});
+
+			});
+
+		function showDamageImage(imageUrl) {
+			document.getElementById('filePreview').src = imageUrl;
+			$('#fileModal').modal('show');
+		}
+		function settleTheAmount(bookingId) {
+			window.location.href = '/communityhall/headquarters/headquarterspage?bookingId=' + bookingId;
+		}
+		function approve(settlementId) {
+			$.ajax({
+				type: "GET",
+				url: '/communityhall/api/officer/getSettlementList',
+				data: {
+					'settlementsid': settlementId
+				},
+				success: function (x) {
+					showSettlementInfo(x)
+					showDamageDetails(x);
+				}
+			});
+
+		}
+
+		function showSettlementInfo(list) {
+
+			$('#settlementinformation').modal({
+				backdrop: 'static',
+				keyboard: false
+			});
+			$('#settlementinformation').modal('show');
+			document.getElementById("settlementid").value = list.settlement.settlementId;
+			document.getElementById("td_userName").innerHTML = list.users.name;
+			document.getElementById("td_mobileNumber").innerHTML = list.users.mobileNo;
+			document.getElementById("td_usertype").innerHTML = list.users.usertype;
+			var userDetails = list.users;
+			var userDetailsString =
+				userDetails.doorNo + ", " +
+				userDetails.street + ", " +
+				userDetails.area + ", " +
+				userDetails.location + " ,Chennai- " +
+				userDetails.pinCode;
+			document.getElementById("td_useraddress").innerHTML = userDetailsString;
+			document.getElementById("td_bookingDate").innerHTML = list.bookingDate;
+			document.getElementById("td_depositeAmount").innerHTML = "₹ " + parseFloat(list.depositAmount).toFixed(2);
+			document.getElementById("td_hallAmount").innerHTML = "₹ " + parseFloat(list.hallAmount).toFixed(2);
+			document.getElementById("td_totalAmount").innerHTML = "₹ " + parseFloat(list.amountReceived).toFixed(2);
+			var gstcl = (list.hallAmount * (list.hallDetails.gst / 100));
+			var formattedGst = gstcl.toFixed(2);
+			document.getElementById("td_gst").innerHTML = "₹ " + formattedGst;
+			document.getElementById("td_startDate").innerHTML = list.startDate;
+			document.getElementById("td_endDate").innerHTML = list.endDate;
+			document.getElementById("booking_id").innerHTML = list.bookingId;
+
+			function getTimeSlot(slotValue) {
+				var timeSlot;
+				var trimmedSlotValue = String(slotValue).trim(); // Convert to string and then trim
+				if (trimmedSlotValue === '1') {
+					timeSlot = 'Morning';
+				} else if (trimmedSlotValue === '2') {
+					timeSlot = 'Evening';
+				} else {
+					timeSlot = 'Unknown';
+				}
+				return timeSlot;
+			}
+
+			document.getElementById("td_startingSlot").innerHTML = getTimeSlot(list.startingSlot);
+			document.getElementById("td_endingSlot").innerHTML = getTimeSlot(list.endingSlot);
+			document.getElementById("td_EBNumber").innerHTML = list.hallDetails.ebNumber;
+			document.getElementById("td_startingReading").innerHTML = list.ebDetails.startingReading;
+			document.getElementById("td_endingReading").innerHTML = list.ebDetails.endingReading;
+			document.getElementById("td_usedunit").innerHTML = list.ebDetails.usedUnit;
+			document.getElementById("td_ebamountperunit").innerHTML = "₹ " + parseFloat(list.hallDetails.ebCostPerUnit).toFixed(2);
+			document.getElementById("td_mfDtUnit").innerHTML = "₹ " + parseFloat(list.hallDetails.mfDtUnit).toFixed(2);
+			document.getElementById("td_depositeamountforrefund").innerHTML = "₹ " + parseFloat(list.depositAmount).toFixed(2);
+			document.getElementById("td_ebAmount").innerHTML = "₹ " + parseFloat(list.ebDetails.ebAmount).toFixed(2);
+			document.getElementById("td_electricityamount").innerHTML = "₹ " + parseFloat(list.ebDetails.ebAmount).toFixed(2);
+			document.getElementById("td_damage").innerHTML = "₹ " + parseFloat(list.settlement.damageAmount).toFixed(2);
+
+			var eb_amt = list.ebDetails.ebAmount;
+			var deposit_amt = list.depositAmount;
+			var tem_total = deposit_amt - eb_amt;
+			$("#td_settel_amt").html('');
+			$("#td_settel_amt").html(tem_total);
+		}
+		function showDamageDetails(data) {
+			var damageFieldContainer = $('#damageDetails');
+			damageFieldContainer.empty();
+
+			// Create a div for table responsiveness
+			var tableResponsiveDiv = $('<div>').addClass('table-responsive').css('margin-right', '-24px');
+
+			// Create table with similar classes and styles to the modal table
+			var table = $('<table>').addClass('table table-bordered table-striped').css({ 'width': '97%', 'border-color': 'black', 'border-top-color': 'white' });
+			var thead = $('<thead>').addClass('thead-light');
+			var tbody = $('<tbody>');
+
+			// Create Damage Details header row
+			var headerRow = $('<tr>').appendTo(thead);
+			$('<th>').attr('colspan', '6').text('Damage Details (if any)').css({
+				'padding': '0.45rem 0.45rem',
+				'background-color': '#f2f2f2',
+				'font-weight': 'bold',
+				'color': 'black',
+			}).appendTo(headerRow);
+
+			// Create table header row
+			var columnHeadersRow = $('<tr>').css('background-color', '#f2f2f2').appendTo(thead);
+			$('<th>').text('S.No').css({ 'padding': '0.45rem 0.45rem', 'text-align': 'center' }).appendTo(columnHeadersRow);
+			$('<th>').text('Asset Name').css({ 'padding': '0.45rem 0.45rem', 'text-align': 'center' }).appendTo(columnHeadersRow);
+			$('<th>').text('Damage Img').css({ 'padding': '0.45rem 0.45rem', 'text-align': 'center' }).appendTo(columnHeadersRow);
+			$('<th>').text('Cost').css({ 'padding': '0.45rem 0.45rem', 'text-align': 'center' }).appendTo(columnHeadersRow);
+			$('<th>').text('Qty').css({ 'padding': '0.45rem 0.45rem', 'text-align': 'center' }).appendTo(columnHeadersRow);
+			$('<th>').text('Amount').css({ 'padding': '0.45rem 0.45rem', 'text-align': 'center' }).appendTo(columnHeadersRow);
+
+			var totalAmount = 0;
+
+			// Check if damageList is empty
+			if (data.damageList.length === 0) {
+				var row = $('<tr>').appendTo(tbody);
+				$('<td>').attr('colspan', '6').text('No Damaged Items').css({
+					'padding': '0.45rem 0.45rem',
+					'text-align': 'center',
+					'font-weight': 'bold',
+					'background-color': '#f2f2f2'
+				}).appendTo(row);
+			} else {
+				$.each(data.damageList, function (index, detail) {
+					var row = $('<tr>').appendTo(tbody);
+					$('<td>').text(index + 1).css({
+						'padding': '0.45rem 0.45rem',
+						'text-align': 'center'
+					}).appendTo(row);
+					$('<td>').text(detail.assetName).css({
+						'padding': '0.45rem 0.45rem',
+						'text-align': 'center'
+					}).appendTo(row);
+
+					var viewLink = $('<a>').attr('href', 'javascript:void(0)').text('View').on('click', function () {
+						showDamageImage(detail.damageImageUrl);
+					});
+					$('<td>').css({
+						'padding': '0.45rem 0.45rem',
+						'text-align': 'center'
+					}).append(viewLink).appendTo(row);
+
+					var assetamt = (detail.assetAmount / detail.quantity).toFixed(2);
+					$('<td>').text('₹ ' + assetamt).css({
+						'padding': '0.45rem 0.45rem',
+						'text-align': 'center'
+					}).appendTo(row);
+
+					$('<td>').text(detail.quantity).css({
+						'padding': '0.45rem 0.45rem',
+						'text-align': 'center'
+					}).appendTo(row);
+
+					var amount = detail.assetAmount;
+					totalAmount += amount;
+					$('<td>').text('₹ ' + amount.toFixed(2)).css({
+						'padding': '0.45rem 0.45rem',
+						'text-align': 'right'
+					}).appendTo(row);
+				});
+
+				// Add row for total amount
+				var totalRow = $('<tr>').appendTo(tbody);
+				$('<td>').attr('colspan', '5').text('Total Amount').css({
+					'padding': '0.45rem 0.45rem',
+					'font-weight': 'bold',
+					'background-color': '#f2f2f2'
+				}).appendTo(totalRow);
+				$('<td>').text('₹ ' + totalAmount.toFixed(2)).css({
+					'padding': '0.45rem 0.45rem',
+					'text-align': 'right'
+				}).appendTo(totalRow);
+
+				$("#td_dam_amt").html('₹ ' + totalAmount.toFixed(2));
+			}
+
+			// Append the table elements to the container div
+			table.append(thead, tbody);
+			tableResponsiveDiv.append(table);
+			damageFieldContainer.append(tableResponsiveDiv);
+
+			var temp_total = parseFloat($("#td_settel_amt").html());
+			var settleAmount = temp_total - totalAmount;
+
+			if (settleAmount < 0) {
+				var pendingstatus = data.settlement.collectionStatus;
+				$("#td_settel_amt").html(0);
+				$("#pendingcolumn").show();
+				$("#collectionstatuscolumn").show();
+				$('#td_collection_status').html(pendingstatus);
+				$("#td_pending_amt").html(Math.abs(settleAmount).toFixed(2));
+				$("#td_pending_amt").css("color", "red");
+				$("#approvebutton").show();
+				$("#rejectbutton").show();
+			} else {
+				$("#td_settel_amt").html('₹ ' + settleAmount.toFixed(2));
+				$("#pendingcolumn").hide();
+				$("#collectionstatuscolumn").hide();
+				$("#td_settel_amt").css("color", "green"); // Set color to green for positive amounts
+				$("#approvebutton").hide();
+				$("#rejectbutton").hide();
+			}
+		}
+		function showDamageImage(damageImageUrl) {
+			document.getElementById('filePreview').src = damageImageUrl;
+			$('#fileModal').modal('show');
+		}
+		function accept() {
+			let id = document.getElementById("settlementid").value;
+
+			Swal.fire({
+				title: 'Do you want to Approve this Settlement ?',
+				showDenyButton: true,
+				showCancelButton: true,
+				confirmButtonText: 'YES',
+				denyButtonText: 'NO',
+			}).then((result) => {
+				/* Read more about isConfirmed, isDenied below */
+				if (result.isConfirmed) {
+					$.ajax({
+						type: "POST",
+						url: '/communityhall/api/officer/updateApprovedSettlementStatus/' + id,
+						data: {
+							'status': 'COMPLETED',
+							'comments': 'Accepted',
+							'settlementId': id
+						},
+						success: function (data, textStatus, xhr) {
+							if (xhr.status === 200) { // Check if the response status is OK
+								Swal.fire(
+									'Done',
+									'Successfully Accepted to the ID:' + id,
+									'success'
+								).then(() => {
+									location.reload();
+								});
+							} else {
+								Swal.fire(
+									'Error',
+									'Failed to accept the user',
+									'error'
+								);
+							}
+						},
+						error: function (xhr, textStatus, errorThrown) {
+							Swal.fire(
+								'Error',
+								'Failed to accept the user',
+								'error'
+							);
+						}
+					});
+				} else if (result.isDenied) {
+					Swal.fire('Changes are not saved', '', 'info')
+				}
+			});
+		}
+
+
+		function fetchQRCode(bookingId) {
+			$.ajax({
+				url: '/communityhall/careTaker/api/generateQRCode',
+				type: 'GET',
+				data: { bookingId: bookingId },
+				success: function (data) {
+					// Set the QR code image source
+					$('#qrview').modal('show');
+					$('#qrCodeImage').attr('src', 'data:image/png;base64,' + data);
+					// console.log(data);
+				},
+				error: function (jqXHR, textStatus, errorThrown) {
+					console.error('Error fetching QR code:', textStatus, errorThrown);
+				}
+			});
+		}
+	</script>
+
+</body>
+
+</html>

src/main/resources/templates/sm/user-approved.html

@@ -0,0 +1,295 @@
+<!DOCTYPE html>
+<html xmlns:th="http://www.thymeleaf.org">
+
+<head th:replace="~{fragments/head-sm :: head}"></head>
+
+<body>
+	<!-- Page Container -->
+	<div id="page-container"
+		class="sidebar-o sidebar-dark enable-page-overlay side-scroll page-header-fixed page-header-dark">
+		<!-- Sidebar Nav-->
+		<aside th:replace="~{fragments/aside-right :: aside}"></aside>
+		<!-- END Side Overlay (right)-->
+		<!-- Sidebar Nav-->
+		<nav th:replace="~{fragments/nav-sm :: nav}"></nav>
+		<!-- END Sidebar -->
+		<!-- Header -->
+		<header th:replace="~{fragments/header-sm :: header}"></header>
+		<!-- END Header -->
+		<!-- Main Container -->
+		<main id="main-container">
+			<!-- END Hero -->
+			<!-- Page Content -->
+			<div class="content">
+				<div class="block block-rounded">
+					<div class="block-header block-header-default">
+						<h3 class="block-title"> List of Approved Users</h3>
+					</div>
+					<div class="block-content p-0">
+						<div class="p-sm-4 p-0">
+							<div class="table-responsive">
+								<table id="userApprovedList"
+									class="table table-bordered table-striped table-vcenter js-dataTable-responsive">
+									<thead class="thead-light">
+										<tr class="table-bordered">
+											<th class="text-center no-sort">S.No</th>
+											<th class="text-center" width="20%">Usertype</th>
+											<th class="text-center">Name</th>
+											<th class="text-center">Mobile Number</th>
+											<th class="text-center">E-Mail ID</th>
+											<th class="text-center">User Status</th>
+											<th class="text-center">Action</th>
+										</tr>
+									</thead>
+									<tbody>
+										<!-- Use Thymeleaf to loop through the bookingList -->
+										<tr th:each="users, rowStat : ${approvedlist}">
+											<!--<td class="text-center" th:text="${i.index + 1}"></td>-->
+											<td class="text-center" th:text="${rowStat.index + 1}"></td>
+											<td class="text-center" th:text="${users.usertype}"></td>
+											<td class="text-center" th:text="${users.name}"></td>
+											<td class="text-center" th:text="${users.mobileNo}"></td>
+											<td class="text-center" th:text="${users.email}"></td>
+											<td class="text-center" th:text="${users.userstatus}"></td>
+											<td>
+												<p>
+
+													<span class="badge bg-success" style="cursor: pointer;"
+														th:onclick="approved([[${users.userId}]])">Approved</span>
+
+												</p>
+
+
+											</td>
+										</tr>
+									</tbody>
+								</table>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+			<!-- END Page Content -->
+		</main>
+		<!-- END Main Container -->
+
+		<!-- END Main Container -->
+		<!--modal for pening-->
+		<div class="modal fade backdrop" id="approvalForm" data-backdrop="static" tabindex="-1" role="dialog"
+			aria-labelledby="staticBackdropLabel" aria-hidden="true">
+			<div class="modal-dialog modal-lg" role="document">
+				<div class="modal-content">
+					<form id="ownform">
+						<div class="block block-rounded block-themed block-transparent mb-0">
+							<div class="block-header bg-primary-dark">
+								<h3 class="block-title" id="2mtitle">User Approval Information</h3>
+								<div class="block-options">
+									<button type="button" class="btn-block-option" data-bs-dismiss="modal"
+										aria-label="Close">
+										<i class="fa fa-fw fa-times"></i>
+									</button>
+								</div>
+							</div>
+							<div class="block-content row">
+								<!-- <div class="col-sm-4"> -->
+								<!-- <label class="form-label">Pet ID:<span class="text-danger">*</span></label> -->
+								<input type="hidden" class="form-control text-center" name="userid" id="userid"
+									disabled />
+								<!--<input type="hidden" class="form-control text-center" name="Mobii" id="Mobii"
+									disabled />-->
+
+								<!-- </div> -->
+								<div class="col-sm-4">
+									<label class="form-label">Name:<span class="text-danger"></span></label>
+									<input type="text" class="form-control text-center" name="name" id="name"
+										disabled />
+								</div>
+								<div class="col-sm-4">
+									<label class="form-label">Mobile No:<span class="text-danger"></span></label>
+									<input type="text" class="form-control text-center" name="mobile" id="mobile"
+										disabled />
+								</div>
+								<div class="col-sm-4">
+									<label class="form-label">E-Mail ID:<span class="text-danger"></span></label>
+									<input type="text" class="form-control text-center" name="email" id="email"
+										disabled />
+								</div>
+								<div class="col-sm-4">
+									<label class="form-label">Street:<span class="text-danger"></span></label>
+									<input type="text" class="form-control text-center" name="street" id="street"
+										disabled />
+								</div>
+								<div class="col-sm-4">
+									<label class="form-label">Area:<span class="text-danger"></span></label>
+									<input type="text" class="form-control text-center" name="area" id="area"
+										disabled />
+								</div>
+								<div class="col-sm-4">
+									<label class="form-label">Location:<span class="text-danger"></span></label>
+									<input type="text" class="form-control text-center" name="location" id="location"
+										disabled />
+								</div>
+
+								<div class="col-sm-4">
+									<label class="form-label">Pincode:<span class="text-danger"></span></label>
+									<input type="text" class="form-control text-center" name="pincode" id="pincode"
+										disabled />
+								</div>
+								<div class="col-sm-4">
+									<label class="form-label">UserType:<span class="text-danger"></span></label>
+									<input type="text" class="form-control text-center" name="usertype" id="usertype"
+										disabled />
+								</div>
+
+								<div class="col-sm-4">
+									<label class="form-label">User Status:<span class="text-danger"></span></label>
+									<input type="text" class="form-control text-center" name="userstatus"
+										id="userstatus" disabled />
+								</div>
+								<div class="col-sm-4" style="display:none" id="idField">
+									<label class="form-label">Usertype Id:<span class="text-danger"></span></label>
+									<input type="text" class="form-control text-center" name="governmentId"
+										id="governmentId" readonly />
+								</div>
+								<div class="col-sm-4" style="display:none" id="departmentField">
+									<label class="form-label">Department:<span class="text-danger"></span></label>
+									<input type="text" class="form-control text-center" name="department"
+										id="department" readonly />
+								</div>
+								<div class="mb-4">
+									<label class="form-label">Reason:<span class="text-danger"></span></label>
+									<textarea class="form-control " name="reason" id="reason" disabled></textarea>
+								</div>
+
+								<!--<div class="mb-4">
+                        <label class="form-label">Reason:<span class="text-danger"></span></label>
+                        <textarea   class="form-control " name="reason" id="reason"  required ></textarea>
+                    </div>-->
+
+							</div>
+						</div>
+						<div class="block-content block-content-full text-end bg-body" id="mbutton2">
+							<!--<button type="button" class="btn btn-sm btn-alt-success"
+								th:onclick="accept()">Accept</button>-->
+							<button type="button" class="btn btn-sm btn-alt-secondary"
+								data-bs-dismiss="modal">Close</button>
+							<!--<button type="submit" class="btn btn-sm btn-primary">Reject</button>-->
+						</div>
+					</form>
+				</div>
+			</div>
+
+		</div>
+		<div th:replace="~{fragments/resetpassword :: div}"></div>
+		<footer th:replace="~{fragments/footer2 :: footer}"></footer>
+
+		<!-- Scripts -->
+		<script th:replace="~{fragments/loginscript :: script}"></script>
+		<script type="text/javascript">
+			$(document).ready(
+				function () {
+					var buttons = [{
+						extend: 'pageLength',
+						className: 'btn btn-primary'
+					}, {
+						title: 'Data export',
+						extend: 'copyHtml5',
+						text: 'Copy',
+						className: 'btn btn-primary',
+						id: 'copyBtn'
+					}, {
+						extend: 'excelHtml5',
+						text: 'Excel',
+						className: 'btn btn-primary',
+						id: 'excelBtn'
+					}, {
+						extend: 'csvHtml5',
+						text: 'CSV',
+						className: 'btn btn-primary',
+						id: 'csvBtn'
+					}, {
+						extend: 'pdfHtml5',
+						text: 'PDF',
+						className: 'btn btn-primary',
+						id: 'pdfBtn'
+					},
+
+					];
+
+					$('#userApprovedList').DataTable(
+						{
+							dom: 'Bftip',
+							columnDefs: [{
+								targets: 'no-sort',
+								orderable: false
+							}],
+							lengthMenu: [
+								[50, 100, 200, 500, -1],
+								['50 rows', '100 rows', '200 rows',
+									'500 rows', 'Show all']],
+							scrollY: '50vh',
+							fixedColumns: {
+								left: 1,
+								right: 1
+							},
+							buttons: [buttons],
+							responsive: true,
+							searching: true, // Enable search
+							select: false,
+							processing: false,
+						});
+
+					// Link the search input to DataTable
+					$('#searchInput').on('keyup', function () {
+						dataTable.search(this.value).draw();
+					});
+
+				});
+
+			function approved(userId) {
+				$.ajax({
+					type: "GET",
+					url: '/communityhall/api/officer/getUserDetails',
+					data: {
+						'usersid': userId
+					},
+					success: function (x) {
+						// console.log(x);
+						showUserInfo(x)
+					}
+				});
+
+			}
+
+			function showUserInfo(list) {
+				$('#approvalForm').modal({
+					backdrop: 'static',
+					keyboard: false
+				});
+				$('#approvalForm').modal('show');
+				document.getElementById("userid").value = list.userId;
+				document.getElementById("name").value = list.name;
+				document.getElementById("mobile").value = list.mobileNo;
+				document.getElementById("email").value = list.email;
+				document.getElementById("street").value = list.street;
+				document.getElementById("area").value = list.area;
+				document.getElementById("location").value = list.location;
+				document.getElementById("pincode").value = list.pinCode;
+				document.getElementById("usertype").value = list.usertype;
+				document.getElementById("userstatus").value = list.userstatus;
+				document.getElementById("governmentId").value = list.governmentId
+				document.getElementById("department").value = list.department
+				if (list.usertype === 'GCC_EMPLOYEE' || list.usertype === 'PENSIONER') {
+					idField.style.display = 'block';
+					departmentField.style.display = 'block';
+				} else {
+					idField.style.display = 'none';
+					departmentField.style.display = 'none';
+				}
+			}
+
+
+		</script>
+</body>
+
+</html>

src/main/resources/templates/sm/user-reject.html

@@ -0,0 +1,349 @@
+<!DOCTYPE html>
+<html xmlns:th="http://www.thymeleaf.org">
+
+<head th:replace="~{fragments/head-sm :: head}"></head>
+
+<body>
+	<!-- Page Container -->
+	<div id="page-container"
+		class="sidebar-o sidebar-dark enable-page-overlay side-scroll page-header-fixed page-header-dark">
+		<!-- Sidebar Nav-->
+		<aside th:replace="~{fragments/aside-right :: aside}"></aside>
+		<!-- END Side Overlay (right)-->
+		<!-- Sidebar Nav-->
+		<nav th:replace="~{fragments/nav-sm :: nav}"></nav>
+		<!-- END Sidebar -->
+		<!-- Header -->
+		<header th:replace="~{fragments/header-sm :: header}"></header>
+		<!-- END Header -->
+		<!-- Main Container -->
+		<main id="main-container">
+			<!-- END Hero -->
+			<!-- Page Content -->
+			<div class="content">
+				<div class="block block-rounded">
+					<div class="block-header block-header-default">
+						<h3 class="block-title"> List of Rejected Users</h3>
+						<!--<div class="block-options">
+                        <button type="button" class="btn-block-option" onclick="callAdd();"><i class="far fa-plus-square"></i> Register New Hall</button>
+                    </div>-->
+					</div>
+					<div class="block-content p-0">
+						<div class="p-sm-4 p-0">
+							<div class="table-responsive">
+								<table id="userRejectedList"
+									class="table table-bordered table-striped table-vcenter js-dataTable-responsive">
+									<thead class="thead-light">
+										<tr class="table-bordered">
+											<th class="text-center no-sort">S.No</th>
+											<th class="text-center" width="20%">Usertype</th>
+											<th class="text-center">Name</th>
+											<th class="text-center">Mobile Number</th>
+											<th class="text-center">E-Mail ID</th>
+											<th class="text-center">User Status</th>
+											<th class="text-center">Action</th>
+										</tr>
+									</thead>
+									<tbody>
+										<!-- Use Thymeleaf to loop through the bookingList -->
+										<tr th:each="users, rowStat : ${rejectedlist}">
+											<!--<td class="text-center" th:text="${i.index + 1}"></td>-->
+											<td class="text-center" th:text="${rowStat.index + 1}"></td>
+											<td class="text-center" th:text="${users.usertype}"></td>
+											<td class="text-center" th:text="${users.name}"></td>
+											<td class="text-center" th:text="${users.mobileNo}"></td>
+											<td class="text-center" th:text="${users.email}"></td>
+											<td class="text-center" th:text="${users.userstatus}"></td>
+											<td>
+												<p>
+
+													<span class="badge bg-danger" style="cursor: pointer;"
+														th:onclick="reject([[${users.userId}]])">Rejected</span>
+
+												</p>
+
+
+											</td>
+										</tr>
+									</tbody>
+								</table>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+			<!-- END Page Content -->
+		</main>
+		<!-- END Main Container -->
+
+		<!-- END Main Container -->
+		<!--modal for pening-->
+		<div class="modal fade backdrop" id="rejectForm" data-backdrop="static" tabindex="-1" role="dialog"
+			aria-labelledby="staticBackdropLabel" aria-hidden="true">
+			<div class="modal-dialog modal-lg" role="document">
+				<div class="modal-content">
+					<form id="ownform">
+						<div class="block block-rounded block-themed block-transparent mb-0">
+							<div class="block-header bg-primary-dark">
+								<h3 class="block-title" id="2mtitle">User Reject Information</h3>
+								<div class="block-options">
+									<button type="button" class="btn-block-option" data-bs-dismiss="modal"
+										aria-label="Close">
+										<i class="fa fa-fw fa-times"></i>
+									</button>
+								</div>
+							</div>
+							<div class="block-content row">
+								<!-- <div class="col-sm-4"> -->
+								<!-- <label class="form-label">Pet ID:<span class="text-danger">*</span></label> -->
+								<input type="hidden" class="form-control text-center" name="userid" id="userid"
+									disabled />
+								<!--<input type="hidden" class="form-control text-center" name="Mobii" id="Mobii"
+									disabled />-->
+
+								<!-- </div> -->
+								<div class="col-sm-4">
+									<label class="form-label">Name:<span class="text-danger"></span></label>
+									<input type="text" class="form-control text-center" name="name" id="name"
+										disabled />
+								</div>
+								<div class="col-sm-4">
+									<label class="form-label">Mobile No:<span class="text-danger"></span></label>
+									<input type="text" class="form-control text-center" name="mobile" id="mobile"
+										disabled />
+								</div>
+								<div class="col-sm-4">
+									<label class="form-label">E-Mail ID:<span class="text-danger"></span></label>
+									<input type="text" class="form-control text-center" name="email" id="email"
+										disabled />
+								</div>
+								<div class="col-sm-4">
+									<label class="form-label">Street:<span class="text-danger"></span></label>
+									<input type="text" class="form-control text-center" name="street" id="street"
+										disabled />
+								</div>
+								<div class="col-sm-4">
+									<label class="form-label">Area:<span class="text-danger"></span></label>
+									<input type="text" class="form-control text-center" name="area" id="area"
+										disabled />
+								</div>
+								<div class="col-sm-4">
+									<label class="form-label">Location:<span class="text-danger"></span></label>
+									<input type="text" class="form-control text-center" name="location" id="location"
+										disabled />
+								</div>
+
+								<div class="col-sm-4">
+									<label class="form-label">Pincode:<span class="text-danger"></span></label>
+									<input type="text" class="form-control text-center" name="pincode" id="pincode"
+										disabled />
+								</div>
+								<div class="col-sm-4">
+									<label class="form-label">UserType:<span class="text-danger"></span></label>
+									<input type="text" class="form-control text-center" name="usertype" id="usertype"
+										disabled />
+								</div>
+
+								<div class="col-sm-4">
+									<label class="form-label">User Status:<span class="text-danger"></span></label>
+									<input type="text" class="form-control text-center" name="userstatus"
+										id="userstatus" disabled />
+								</div>
+								<div class="col-sm-4" style="display:none" id="idField">
+									<label class="form-label">Usertype Id:<span class="text-danger"></span></label>
+									<input type="text" class="form-control text-center" name="governmentId"
+										id="governmentId" readonly />
+								</div>
+								<div class="col-sm-4" style="display:none" id="departmentField">
+									<label class="form-label">Department:<span class="text-danger"></span></label>
+									<input type="text" class="form-control text-center" name="department"
+										id="department" readonly />
+								</div>
+								<div class="col-sm-4">
+									<label class="form-label">Reject Reason:<span class="text-danger"></span></label>
+									<input type="text" class="form-control text-center" name="userreject"
+										id="userreject" disabled />
+								</div>
+							</div>
+						</div>
+						<div class="block-content block-content-full text-end bg-body" id="mbutton2">
+							<button type="button" class="btn btn-sm btn-alt-success"
+								th:onclick="accept()">Accept</button>
+							<button type="button" class="btn btn-sm btn-alt-secondary"
+								data-bs-dismiss="modal">Close</button>
+							<!--<button type="submit" class="btn btn-sm btn-primary">Reject</button>-->
+						</div>
+					</form>
+				</div>
+			</div>
+		</div>
+		<div th:replace="~{fragments/resetpassword :: div}"></div>
+		<footer th:replace="~{fragments/footer2 :: footer}"></footer>
+
+		<!-- Scripts -->
+		<script th:replace="~{fragments/loginscript :: script}"></script>
+		<script type="text/javascript">
+			$(document).ready(
+				function () {
+					var buttons = [{
+						extend: 'pageLength',
+						className: 'btn btn-primary'
+					}, {
+						title: 'Data export',
+						extend: 'copyHtml5',
+						text: 'Copy',
+						className: 'btn btn-primary',
+						id: 'copyBtn'
+					}, {
+						extend: 'excelHtml5',
+						text: 'Excel',
+						className: 'btn btn-primary',
+						id: 'excelBtn'
+					}, {
+						extend: 'csvHtml5',
+						text: 'CSV',
+						className: 'btn btn-primary',
+						id: 'csvBtn'
+					}, {
+						extend: 'pdfHtml5',
+						text: 'PDF',
+						className: 'btn btn-primary',
+						id: 'pdfBtn'
+					},
+
+					];
+
+					$('#userRejectedList').DataTable(
+						{
+							dom: 'Bftip',
+							columnDefs: [{
+								targets: 'no-sort',
+								orderable: false
+							}],
+							lengthMenu: [
+								[50, 100, 200, 500, -1],
+								['50 rows', '100 rows', '200 rows',
+									'500 rows', 'Show all']],
+							scrollY: '50vh',
+							fixedColumns: {
+								left: 1,
+								right: 1
+							},
+							buttons: [buttons],
+							responsive: true,
+							searching: true, // Enable search
+							select: false,
+							processing: false,
+						});
+
+					// Link the search input to DataTable
+					$('#searchInput').on('keyup', function () {
+						dataTable.search(this.value).draw();
+					});
+
+				});
+
+			function reject(userId) {
+				$.ajax({
+					type: "GET",
+					url: '/communityhall/api/officer/getUserDetails',
+					data: {
+						'usersid': userId
+					},
+					success: function (x) {
+						// console.log(x);
+						showUserInfo(x)
+					}
+				});
+
+			}
+
+			function showUserInfo(list) {
+				$('#rejectForm').modal({
+					backdrop: 'static',
+					keyboard: false
+				});
+				$('#rejectForm').modal('show');
+				document.getElementById("userid").value = list.userId;
+				document.getElementById("name").value = list.name;
+				document.getElementById("mobile").value = list.mobileNo;
+				document.getElementById("email").value = list.email;
+				document.getElementById("street").value = list.street;
+				document.getElementById("area").value = list.area;
+				document.getElementById("location").value = list.location;
+				document.getElementById("pincode").value = list.pinCode;
+				document.getElementById("usertype").value = list.usertype;
+				document.getElementById("userstatus").value = list.userstatus;
+				document.getElementById("governmentId").value = list.governmentId
+				document.getElementById("department").value = list.department
+				if (list.userHistories && list.userHistories.length > 0) {
+					// Get the latest comment from the last element in userHistories
+					var latestComment = list.userHistories[list.userHistories.length - 1].comments;
+					document.getElementById("userreject").value = latestComment;
+				} else {
+					document.getElementById("userreject").value = "No comments available";
+				}
+				//document.getElementById("userreject").value =list.userHistories[userHistories.length-1].comments;
+				if (list.usertype === 'GCC_EMPLOYEE' || list.usertype === 'PENSIONER') {
+					idField.style.display = 'block';
+					departmentField.style.display = 'block';
+				} else {
+					idField.style.display = 'none';
+					departmentField.style.display = 'none';
+				}
+			}
+
+			function accept() {
+				let id = document.getElementById("userid").value;
+
+				Swal.fire({
+					title: 'Do you want to Accept this User ?',
+					showDenyButton: true,
+					showCancelButton: true,
+					confirmButtonText: 'YES',
+					denyButtonText: `NO`,
+				}).then((result) => {
+					/* Read more about isConfirmed, isDenied below */
+					if (result.isConfirmed) {
+						$.ajax({
+							type: "POST",
+							url: '/communityhall/api/officer/updateApprovedStatus/' + id,
+							data: {
+								'status': 'APPROVED',
+								'comments': 'Accepted',
+								'userId': id
+							},
+							success: function (data, textStatus, xhr) {
+								if (xhr.status === 200) { // Check if the response status is OK
+									Swal.fire(
+										'Done',
+										'Successfully Accepted to the ID:' + id,
+										'success'
+									).then(() => {
+										location.reload();
+									});
+								} else {
+									Swal.fire(
+										'Error',
+										'Failed to accept the user',
+										'error'
+									);
+								}
+							},
+							error: function (xhr, textStatus, errorThrown) {
+								Swal.fire(
+									'Error',
+									'Failed to accept the user',
+									'error'
+								);
+							}
+						});
+					} else if (result.isDenied) {
+						Swal.fire('Changes are not saved', '', 'info')
+					}
+				});
+			}
+		</script>
+</body>
+
+</html>

src/main/resources/templates/sm/viewUploadNoc.html

@@ -0,0 +1,856 @@
+<!DOCTYPE html>
+<html xmlns:th="http://www.thymeleaf.org">
+
+<head th:replace="~{fragments/head-sm :: head}"></head>
+<style>
+    #uploadNocSection {
+        display: none;
+    }
+
+
+    .card-body table {
+        width: 100%;
+        padding: 100px;
+    }
+
+    .card-body th,
+    td {
+        padding: 8px;
+        text-align: left;
+    }
+
+    .amount-cell {
+        text-align: right;
+        padding-right: 1rem;
+        /* Adjust padding as needed */
+    }
+
+    .table {
+        width: 100% !important;
+    }
+</style>
+
+<body>
+    <!-- Page Container -->
+    <div id="page-container"
+        class="sidebar-o sidebar-dark enable-page-overlay side-scroll page-header-fixed page-header-dark">
+        <!-- Sidebar Nav-->
+        <aside th:replace="~{fragments/aside-right :: aside}"></aside>
+        <!-- END Side Overlay (right)-->
+        <!-- Sidebar Nav-->
+        <nav th:replace="~{fragments/nav-sm :: nav}"></nav>
+        <!-- END Sidebar -->
+        <!-- Header -->
+        <header th:replace="~{fragments/header-sm :: header}"></header>
+        <!-- END Header -->
+        <!-- Main Container -->
+        <main id="main-container">
+            <div class="content">
+                <div class="block block-rounded">
+                    <div class="block-header block-header-default">
+                        <h3 class="block-title">List of Bookings Waiting for NOC </h3>
+                    </div>
+                    <div class="block-content p-0">
+                        <div class="p-sm-4 p-0">
+                            <div class="table-responsive">
+                                <table class="table table-bordered table-striped table-vcenter js-dataTable-responsive"
+                                    id="bookingapprovedtable">
+                                    <thead class="thead-light">
+                                        <tr>
+                                            <th class="text-center no-sort">S.No</th>
+                                            <th class="text-center">Booking Id</th>
+                                            <th class="text-center">Zone</th>
+                                            <th class="text-center">Division</th>
+                                            <th class="text-center" width="20%">Hall Name</th>
+                                            <th class="text-center">User Name</th>
+                                            <th class="text-center">User type</th>
+                                            <th class="text-center" width="10%">Booking Date</th>
+                                            <th class="text-center">Number of days</th>
+                                            <th class="text-center">Reason for Booking</th>
+                                            <th class="text-center">Caretaker Name/MobileNumber</th>
+                                            <th class="text-center">Action</th>
+                                        </tr>
+                                    </thead>
+                                    <tbody>
+                                        <tr th:each="booking, rowStat : ${waitingBookings}">
+                                            <td class="text-center" th:text="${rowStat.index + 1}"></td>
+                                            <td class="text-center" th:text="${booking.bookingId}"></td>
+                                            <td class="text-center" th:text="${booking.hallDetails.zone}"></td>
+                                            <td class="text-center" th:text="${booking.hallDetails.division}"></td>
+                                            <td class="text-center" th:text="${booking.hallDetails.hallName}"></td>
+                                            <td class="text-center" th:text="${booking.users.name}"></td>
+                                            <td class="text-center" th:text="${booking.users.usertype}"></td>
+                                            <td class="text-center" th:text="${booking.bookingDate}"></td>
+                                            <td class="text-center" th:text="${booking.noOfDays}"></td>
+                                            <td class="text-center" th:text="${booking.reason}"></td>
+                                            <td class="text-center"
+                                                th:text="${booking.hallDetails.hallInchargeName} + ' / ' + ${booking.hallDetails.hallInchargeMobno}">
+                                            </td>
+
+                                            <td>
+                                                <p>
+                                                    <span class="badge bg-success" style="cursor: pointer;"
+                                                        th:onclick="pendingbooking([[${booking.bookingId}]])">View</span>
+                                                </p>
+                                            </td>
+                                        </tr>
+                                    </tbody>
+                                </table>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </main>
+
+        <!-- END Main Container -->
+        <!--modal for pening-->
+        <div class="modal fade backdrop" id="pendingBookingForm" data-backdrop="static" tabindex="-1" role="dialog"
+            aria-labelledby="staticBackdropLabel" aria-hidden="true">
+            <div class="modal-dialog modal-lg" role="document">
+                <div class="modal-content">
+                    <form id="ownform">
+                        <div class="block block-rounded block-themed block-transparent mb-0">
+                            <div class="block-header bg-primary-dark">
+                                <h3 class="block-title" id="2mtitle">Booking Information</h3>
+                                <div class="block-options">
+                                    <button type="button" class="btn-block-option" data-bs-dismiss="modal"
+                                        aria-label="Close">
+                                        <i class="fa fa-fw fa-times"></i>
+                                    </button>
+                                </div>
+                            </div>
+                            <div class="block-content row">
+
+                                <div class="col-md-12 col-lg-12 col-sm-12 mb-2">
+                                    <input type="hidden" class="form-control text-center" name="bookingid"
+                                        id="bookingid" disabled />
+                                    <div class="card-body">
+                                        <table>
+                                            <tr>
+                                                <th colspan="10" style="background-color: #f2f2f2;">User Details</th>
+                                            </tr>
+                                            <tr>
+                                                <th style="padding: 0.45rem 0.45rem;font-weight: normal;">User Name:
+                                                </th>
+                                                <td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
+                                                    id="td_userName"></td>
+                                                <th style="padding: 0.45rem 0.45rem;font-weight: normal;">Mobile Number:
+                                                </th>
+                                                <td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
+                                                    id="td_mobileNumber"></td>
+
+                                                <th style="padding: 0.45rem 0.45rem;font-weight: normal;">User Type:
+                                                </th>
+                                                <td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
+                                                    id="td_usertype"></td>
+
+                                            </tr>
+                                            <tr>
+                                                <th style="padding: 0.45rem 0.45rem;font-weight: normal;">User Address:
+                                                </th>
+                                                <td colspan="5" class="fw-semibold" style="padding: 0.45rem 0.45rem;"
+                                                    id="td_useraddress"></td>
+
+                                            </tr>
+
+                                        </table>
+                                    </div>
+                                </div>
+
+                                <div class="col-md-12 col-lg-12 col-sm-12 mb-2">
+                                    <input type="hidden" class="form-control text-center" name="bookingid"
+                                        id="bookingid" disabled />
+                                    <div class="card-body">
+                                        <table>
+                                            <tr>
+                                                <th colspan="10" style="background-color: #f2f2f2;">Hall Details</th>
+                                            </tr>
+
+                                            <tr>
+                                                <th style="padding: 0.45rem 0.45rem;font-weight: normal;">Hall Name:
+                                                </th>
+                                                <td colspan="10" class="fw-semibold" style="padding: 0.45rem 0.45rem;"
+                                                    id="td_hallName"></td>
+
+                                            </tr>
+                                            <th style="padding: 0.45rem 0.45rem;font-weight: normal;">Hall Address:</th>
+                                            <td colspan="10" class="fw-semibold" style="padding: 0.45rem 0.45rem;"
+                                                id="td_halladdress"></td>
+
+                                            </tr>
+                                            <tr>
+                                                <th style="padding: 0.45rem 0.45rem;font-weight: normal;">Caretaker
+                                                    Name:</th>
+                                                <td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
+                                                    id="td_caretakername"></td>
+                                                <th style="padding: 0.45rem 0.45rem;font-weight: normal;">Caretaker
+                                                    Mobile Number:</th>
+                                                <td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
+                                                    id="td_caretakermobileNumber"></td>
+
+                                            </tr>
+
+                                        </table>
+                                    </div>
+                                </div>
+
+                                <div class="col-md-12 col-lg-12 col-sm-12">
+                                    <input type="hidden" class="form-control text-center" name="settlementid"
+                                        id="settlementid" disabled />
+                                    <div class="card-body">
+                                        <table>
+                                            <tr>
+                                                <th colspan="4" style="background-color: #f2f2f2;">Booking
+                                                    Details (Booking Id:-<span id="booking_id"
+                                                        style="color:blue"></span>)</th>
+                                            </tr>
+                                            <tr>
+                                                <th style="padding: 0.45rem 0.45rem;font-weight: normal">Booking Date:
+                                                </th>
+                                                <td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
+                                                    id="td_bookingDate"></td>
+                                                <th style="padding: 0.45rem 0.45rem;font-weight: normal">Booking Status:
+                                                </th>
+                                                <td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
+                                                    id="td_bookingStatus"></td>
+                                            </tr>
+                                            <tr>
+                                                <th style="padding: 0.45rem 0.45rem;font-weight: normal">Start Date:
+                                                </th>
+                                                <td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
+                                                    id="td_startDate"></td>
+                                                <th style="padding: 0.45rem 0.45rem;font-weight: normal">Deposit
+                                                    Amount:</th>
+                                                <td class="fw-semibold amount-cell" style="padding: 0.45rem 0.45rem;"
+                                                    id="td_depositeAmount"></td>
+                                            </tr>
+                                            <tr>
+                                                <th style="padding: 0.45rem 0.45rem;font-weight: normal">END
+                                                    Date:</th>
+                                                <td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
+                                                    id="td_endDate"></td>
+                                                <th style="padding: 0.45rem 0.45rem;font-weight: normal">Hall Amount:
+                                                </th>
+                                                <td class="fw-semibold amount-cell" style="padding: 0.45rem 0.45rem;"
+                                                    id="td_hallAmount"></td>
+                                            </tr>
+                                            <tr>
+                                                <th style="padding: 0.45rem 0.45rem;font-weight: normal">Starting Slot:
+                                                </th>
+                                                <td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
+                                                    id="td_startingSlot"></td>
+                                                <th style="padding: 0.45rem 0.45rem;font-weight: normal">GST @18%:</th>
+                                                <td class="fw-semibold amount-cell" style="padding: 0.45rem 0.45rem;"
+                                                    id="td_gst"></td>
+                                            </tr>
+                                            <tr>
+                                                <th style="padding: 0.45rem 0.45rem;font-weight: normal">Ending Slot:
+                                                </th>
+                                                <td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
+                                                    id="td_endingSlot"></td>
+                                                <th style="padding: 0.45rem 0.45rem;font-weight: normal">Total Amount:
+                                                </th>
+                                                <td class="fw-semibold amount-cell" style="padding: 0.45rem 0.45rem;"
+                                                    id="td_totalAmount"></td>
+
+                                            </tr>
+                                        </table>
+                                    </div>
+                                    <!--hello-->
+                                    <div id="bookingDocumentsContainer" class="col-md-12 col-lg-12 col-sm-12 mt-4">
+                                        <!-- Booking documents will be dynamically populated here -->
+                                    </div>
+
+                                    <div class="col-md-12 col-lg-12 col-sm-12 mb-2">
+                                        <input type="hidden" class="form-control text-center" name="bookingid"
+                                            id="bookingid" disabled />
+                                        <div class="card-body">
+                                            <table>
+                                                <tr>
+                                                    <th colspan="10" style="background-color: #f2f2f2;">Booking Payment
+                                                        Details</th>
+                                                </tr>
+                                                <tr>
+                                                    <th style="padding: 0.45rem 0.45rem;font-weight: normal;">
+                                                        Transaction ID:</th>
+                                                    <td colspan="10" class="fw-semibold"
+                                                        style="padding: 0.45rem 0.45rem;" id="td_transactionId"></td>
+                                                </tr>
+                                                <tr>
+                                                    <th style="padding: 0.45rem 0.45rem;font-weight: normal;">Amount
+                                                        Received:</th>
+                                                    <td colspan="10" class="fw-semibold"
+                                                        style="padding: 0.45rem 0.45rem;" id="td_payamountReceived">
+                                                    </td>
+                                                </tr>
+                                                <tr>
+                                                    <th style="padding: 0.45rem 0.45rem;font-weight: normal;">
+                                                        Transaction Status:</th>
+                                                    <td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
+                                                        id="td_paymentStatus"></td>
+                                                </tr>
+                                            </table>
+                                            <div class="row" id="reasondetails" style="display: none;">
+                                                <div class="col-md-6 mb-2">
+                                                    <label class="form-label">Reason type :<span
+                                                            class="text-danger">*</span></label>
+                                                    <select class="form-control" id="reasontype">
+                                                        <option value="0">Select Reason type</option>
+                                                        <option value="1">Illegal</option>
+                                                        <option value="2">Others</option>
+                                                    </select>
+                                                </div>
+                                                <div class="col-md-6 mb-2">
+                                                    <label class="form-label">Reason:<span
+                                                            class="text-danger">*</span></label>
+                                                    <textarea class="form-control" name="reason" id="reason"
+                                                        required></textarea>
+                                                    <div id="reasonValidationText" class="text-danger small mt-1"
+                                                        style="display:none">Reason is required.</div>
+                                                </div>
+                                            </div>
+
+                                        </div>
+                                    </div>
+
+
+                                    <div id="uploadNocSection">
+                                        <div class="modal-content">
+                                            <div class="modal-header">
+                                                <h5 class="modal-title" id="uploadNocModalLabel">Upload NOC</h5>
+                                            </div>
+                                            <div class="modal-body">
+                                                <label for="nocFile" class="form-label">Select NOC File</label>
+                                                <input type="file" class="form-control nocfile" id="nocFile"
+                                                    name="nocFile" required>
+                                                <input type="hidden" id="bookingid" name="bookingid">
+                                            </div>
+                                            <div class="modal-footer">
+                                                <button type="button" class="btn btn-primary"
+                                                    id="submitNocButton">Submit</button>
+                                            </div>
+                                        </div>
+                                    </div>
+
+
+
+                                    <div class="block-content block-content-full text-end bg-body" id="mbutton2">
+                                        <button type="button" class="btn btn-sm btn-alt-secondary"
+                                            data-bs-dismiss="modal">Close</button>
+
+
+
+                                        <button type="button" class="btn btn-sm btn-primary" id="acceptbutton1"
+                                            th:onclick="showUploadNocSection(); this.style.display='none';"
+                                            data-booking-id="${booking.bookingId}">
+                                            Upload NOC
+                                        </button>
+
+                                        <button type="button" class="btn btn-sm  bg-danger" id="rejectbutton"
+                                            th:onclick="rejectsubmit()">Reject</button>
+                                        <!--
+                                    <button type="button" class="btn btn-sm btn-primary" id="accepttbutton"
+                                            th:onclick="accept()">Approve</button>
+
+-->
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                </div>
+
+            </div>
+
+        </div>
+
+        <div class="col-sm-12">
+            <!--<label class="form-label">Documents:<span class="text-danger"></span></label>-->
+            <div class="documents" id="documents"></div>
+        </div>
+
+
+
+    </div>
+    </div>
+
+    </form>
+    </div>
+    </div>
+    </div>
+
+
+
+
+    <!-- End Modal User -->
+    <!-- Footer -->
+    <div class="modal fade" id="fileModal" tabindex="-1" role="dialog" aria-labelledby="fileModalLabel"
+        aria-hidden="true">
+        <div class="modal-dialog modal-lg" role="document">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title" id="fileModalLabel">File Preview</h5>
+                    <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
+                        <span aria-hidden="true">&times;</span>
+                    </button>
+                </div>
+                <div class="modal-body">
+                    <embed id="filePreview" src="" width="100%" height="600px">
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+
+    <div th:replace="~{fragments/resetpassword :: div}"></div>
+    <footer th:replace="~{fragments/footer2 :: footer}"></footer>
+    <script th:replace="~{fragments/loginscript :: script}"></script>
+    <script>
+        //script to open pending form
+        function pendingbooking(bookingId) {
+            $.ajax({
+                type: "GET",
+                url: '/communityhall/api/officer/getBookingDetails',
+                data: {
+                    'bookingsId': bookingId
+                },
+                success: function (x) {
+                    //console.log(x);
+                    showBookingInfo(x);
+                }
+            });
+
+        }
+
+        $('#submitNocButton').on('click', function (e) {
+            e.preventDefault();
+
+            // Get the booking ID from the hidden input field
+            let id = $('#bookingid').val();
+            // console.log("Booking ID:", id);
+
+            // Get the selected file
+            let fileInput = $('#nocFile')[0].files[0];
+
+            // Check if a file is selected
+            if (!fileInput) {
+                Swal.fire({
+                    icon: 'warning',
+                    title: 'No File Selected',
+                    text: 'Please select a file to upload.',
+                    allowOutsideClick: false,
+                });
+                return;
+            }
+
+            // Prepare the form data
+            let formData = new FormData();
+            formData.append('nocFile', fileInput);
+            formData.append('bookingid', id); // Ensure key matches backend parameter
+
+            // console.log("FormData entries:");
+            for (let [key, value] of formData.entries()) {
+                console.log(`${key}: ${value}`);
+            }
+
+            // Perform the AJAX request
+            $.ajax({
+                url: '/communityhall/admin/api/uploadnoc', // API endpoint
+                type: 'POST',
+                data: formData,
+                contentType: false, // Set to false for multipart/form-data
+                processData: false, // Prevent jQuery from processing the data
+                success: function (response) {
+                    // console.log("Upload success response:", response);
+                    Swal.fire({
+                        icon: 'success',
+                        title: 'Success',
+                        text: 'NOC uploaded successfully!',
+                        allowOutsideClick: false,
+                    }).then(() => {
+                        $('#uploadNocModal').modal('hide'); // Close the modal
+                        location.reload(); // Refresh the page
+                    });
+                },
+                error: function (xhr, status, error) {
+                    console.error("Upload failed:", xhr.responseText);
+                    Swal.fire({
+                        icon: 'error',
+                        title: 'Upload Failed',
+                        text: 'Failed to upload NOC: ' + xhr.responseText,
+                        allowOutsideClick: false,
+                    });
+                }
+            });
+        });
+
+        // Populate bookingId when opening the modal
+        $('#uploadNocModal').on('show.bs.modal', function (event) {
+            var button = $(event.relatedTarget); // Button that triggered the modal
+            var bookingId = button.data('booking-id'); // Extract bookingId from the button
+            // console.log("Setting bookingId in modal:", bookingId);
+            $('#bookingid').val(bookingId); // Set the bookingId in the hidden input field
+        });
+
+
+        function showBookingInfo(list) {
+            $('#pendingBookingForm').modal({
+                backdrop: 'static',
+                keyboard: false
+            });
+            $('#pendingBookingForm').modal('show');
+            var todaydate = new Date().toISOString().split('T')[0];
+
+            // Convert startDate to YYYY-MM-DD format if needed
+            var startDate = new Date(list.startDate).toISOString().split('T')[0]; // Ensure this is in the correct format
+            if (startDate > todaydate) {
+                $('#reasondetails').show();
+                $('#rejectbutton').show();
+            } else {
+                $('#reasondetails').hide();
+                $('#rejectbutton').hide();
+            }
+            document.getElementById("td_userName").innerHTML = list.users.name;
+            document.getElementById("td_mobileNumber").innerHTML = list.users.mobileNo;
+            document.getElementById("td_usertype").innerHTML = list.users.usertype;
+            document.getElementById("bookingid").value = list.bookingId;
+            var userDetails = list.users;
+            var userDetailsString =
+                userDetails.doorNo + ", " +
+                userDetails.street + ", " +
+                userDetails.area + ", " +
+                userDetails.location + "- " +
+                userDetails.pinCode;
+            document.getElementById("td_useraddress").innerHTML = userDetailsString;
+            document.getElementById("td_hallName").innerHTML = list.hallDetails.hallName;
+            var hallDetails = list.hallDetails;
+            var hallDetailsString =
+                hallDetails.doorNo + ", " +
+                hallDetails.street + ", " +
+                hallDetails.area + ", " +
+                hallDetails.city + "- " +
+                hallDetails.pinCode;
+            document.getElementById("td_halladdress").innerHTML = hallDetailsString;
+            document.getElementById("td_caretakername").innerHTML = list.hallDetails.hallInchargeName;
+            document.getElementById("td_caretakermobileNumber").innerHTML = list.hallDetails.hallInchargeMobno;
+            document.getElementById("td_bookingDate").innerHTML = list.bookingDate;
+            document.getElementById("td_depositeAmount").innerHTML = '₹ ' + parseFloat(list.depositAmount).toFixed(2);
+            document.getElementById("td_hallAmount").innerHTML = '₹ ' + parseFloat(list.hallAmount).toFixed(2);
+            document.getElementById("td_totalAmount").innerHTML = '₹ ' + parseFloat(list.amountReceived).toFixed(2);
+            var gstcl = (list.hallAmount * (list.hallDetails.gst / 100));
+            var formattedGst = gstcl.toFixed(2);
+            document.getElementById("td_gst").innerHTML = '₹ ' + formattedGst;
+            document.getElementById("td_startDate").innerHTML = list.startDate;
+            document.getElementById("td_endDate").innerHTML = list.endDate;
+            document.getElementById("booking_id").innerHTML = list.bookingId;
+            function getTimeSlot(slotValue) {
+                //console.log("Slot Value in getTimeSlot function:", slotValue);
+                var timeSlot;
+                var trimmedSlotValue = String(slotValue).trim(); // Convert to string and then trim
+                if (trimmedSlotValue === '1') {
+                    timeSlot = 'Morning';
+                } else if (trimmedSlotValue === '2') {
+                    timeSlot = 'Evening';
+                } else {
+                    timeSlot = 'Unknown';
+                }
+                //console.log("Time Slot:", timeSlot);
+                return timeSlot;
+            }
+            document.getElementById("td_startingSlot").innerHTML = getTimeSlot(list.startingSlot);
+            document.getElementById("td_endingSlot").innerHTML = getTimeSlot(list.endingSlot);
+            document.getElementById("td_bookingStatus").innerHTML = list.bookingStatus;
+            // Check if transactionId is not null, otherwise set to "NA"
+            document.getElementById("td_transactionId").innerHTML = list.payments && list.payments.transactionId ? list.payments.transactionId : "NA";
+
+            // Check if amountReceived is not null, otherwise set to "NA"
+            document.getElementById("td_payamountReceived").innerHTML = list.payments && list.payments.amountReceived ? '₹ ' + list.payments.amountReceived : "NA";
+
+            // Check if paymentStatus is not null, otherwise set to "NA"
+            document.getElementById("td_paymentStatus").innerHTML = list.payments && list.payments.paymentStatus ? list.payments.paymentStatus : "NA";
+            // showReasonDocuments(list);
+        }
+        // function showReasonDocuments(list) {
+        //     $.ajax({
+        //         type: "GET",
+        //         url: '/communityhall/api/officer/getReasonByName',
+        //         data: {
+        //             'reasonName': list.reason
+        //         },
+        //         success: function (x) {
+        //             //console.log(x);
+        //             showReasonWithDocument(x, list);
+        //         }
+        //     });
+        // }
+
+        function showUploadNocSection() {
+            const uploadNocSection = document.getElementById("uploadNocSection");
+            uploadNocSection.style.display = "block"; // Make the section visible
+            uploadNocSection.scrollIntoView({ behavior: "smooth" }); // Scroll to the section
+        }
+        // Display booking documents
+        // function showReasonWithDocument(reasonData, list) {
+        const container = $('#bookingDocumentsContainer');
+        //     var reasonDocumentData = reasonData.reasonDocumentMasterList;
+        //     var bookingDocumentsList = list.bookingDocumentsList;
+        //     const reasonFieldsContainer = $('#documents');
+        //     reasonFieldsContainer.empty();
+        //     // Create a responsive table container
+        //     var tableResponsiveDiv = $('<div>').addClass('table-responsive');
+        //
+        //     // Create the table with Bootstrap classes and custom styles
+        //     var table = $('<table>').addClass('table table-bordered table-striped table-vcenter js-dataTable-responsive').css({
+        //         'width': '100%',
+        //         'height': 'auto',
+        //         'border': '1px solid black'
+        //     });
+        //     // Create the table header (thead)
+        //     var thead = $('<thead>').appendTo(table);
+        //     var headerRow = $('<tr>').appendTo(thead);
+        //     $('<th>').attr('colspan', '3').text('Document Details').css({
+        //         'color': 'black',
+        //         'font-weight': 'bold',
+        //         'background-color': '#f2f2f2',
+        //         'padding': '0.45rem 0.45rem'
+        //     }).appendTo(headerRow);
+        //
+        //     // Create header row for columns
+        //     var columnHeadersRow = $('<tr>').appendTo(thead);
+        //     $('<th>').text('S.No').appendTo(columnHeadersRow);
+        //     $('<th>').text('Required Info').appendTo(columnHeadersRow);
+        //     $('<th>').text('Required Documents').appendTo(columnHeadersRow);
+        //
+        //     // Create the table body (tbody)
+        //     var tbody = $('<tbody>').appendTo(table);
+        //
+        //     // Iterate through the documents list and populate rows
+        //     for (var i = 0; i < bookingDocumentsList.length; i++) {
+        //         (function (index) {
+        //             var row = $('<tr>').appendTo(tbody);
+        //             $('<td>').text(index + 1).appendTo(row);
+        //
+        //             // Determine the text content for the second cell
+        //             var name = bookingDocumentsList[index].name ? bookingDocumentsList[index].name : ''; // Empty string if name is null or undefined
+        //             var fieldText = reasonDocumentData[index].fieldName;
+        //             var fullText = name ? fieldText + ': ' + name : fieldText; // Include colon only if name is not empty
+        //
+        //             $('<td>').text(fullText).appendTo(row);
+        //
+        //             // Create a link to view document image
+        //             var viewLink = $('<a>').attr('href', 'javascript:void(0)').text(reasonDocumentData[index].docFieldName).on('click', function () {
+        //                 showDocumentImage(bookingDocumentsList[index].bookingDocUrl);
+        //             });
+        //             $('<td>').append(viewLink).appendTo(row);
+        //         })(i);
+        //     }
+        //     // Append table to the responsive container
+        //     tableResponsiveDiv.append(table);
+        //     // Append table to the container in the DOM
+        //     reasonFieldsContainer.append(tableResponsiveDiv);
+        // }
+
+        function showDocumentImage(fileURL) {
+            //console.log(fileURL);
+            openFileModal(fileURL);
+        }
+        // Event delegation for dynamically added elements
+        $(document).on('click', '.view-document', function () {
+            const fileURL = $(this).data('url');
+            openFileModal(fileURL);
+        });
+
+        function openFileModal(fileURL) {
+            $('#filePreview').attr('src', fileURL);
+            $('#fileModal').modal('show');
+        }
+
+        function accept() {
+            let id = document.getElementById("bookingid").value;
+
+            Swal.fire({
+                title: 'Do you want to Accept this User?',
+                showDenyButton: true,
+                showCancelButton: true,
+                confirmButtonText: 'YES',
+                denyButtonText: 'NO',
+            }).then((result) => {
+                if (result.isConfirmed) {
+                    // Show loading popup
+                    const loadingSwal = Swal.fire({
+                        title: 'Processing...',
+                        text: 'Please wait while we process the acceptance.',
+                        allowOutsideClick: false, // Prevent closing the popup
+                        didOpen: () => {
+                            Swal.showLoading(); // Show the loading spinner
+                        },
+                        showConfirmButton: false, // Hide the confirm button during loading
+                    });
+
+                    $.ajax({
+                        type: "POST",
+                        url: '/communityhall/api/officer/updateBookingApproved/' + id,
+                        data: {
+                            'status': 'APPROVED',
+                            'comments': 'Accepted',
+                            'bookingId': id
+                        },
+                        success: function (data, textStatus, xhr) {
+                            loadingSwal.close(); // Close the loading popup
+                            if (xhr.status === 200) {
+                                Swal.fire(
+                                    'Done',
+                                    'Successfully Approved to the ID: ' + id,
+                                    'success'
+                                ).then(() => {
+                                    location.reload(); // Reload page after success
+                                });
+                            } else {
+                                Swal.fire(
+                                    'Error',
+                                    'Failed to accept the Booking',
+                                    'error'
+                                );
+                            }
+                        },
+                        error: function (xhr, textStatus, errorThrown) {
+                            loadingSwal.close(); // Close the loading popup
+                            Swal.fire(
+                                'Error',
+                                'Failed to accept the Booking',
+                                'error'
+                            );
+                        }
+                    });
+                } else if (result.isDenied) {
+                    Swal.fire('Changes are not saved', '', 'info');
+                }
+            });
+        }
+        //hello
+        function rejectsubmit() {
+            let id = document.getElementById("bookingid").value;
+            reasondetails.style.display = "block";
+            let reason = document.getElementById("reason").value.trim();
+            let reasontype = document.getElementById("reasontype").value;
+            // Check if reason is empty only when rejecting
+            if (reason === "" || reason.length === 0) {
+                document.getElementById("reasonValidationText").style.display = "block";
+                return false; // Prevent form submission
+            } else {
+                document.getElementById("reasonValidationText").style.display = "none";
+            }
+            Swal.fire({
+                title: 'Do you want to Reject this User ?',
+                showDenyButton: true,
+                showCancelButton: true,
+                confirmButtonText: 'YES',
+                denyButtonText: 'NO',
+            }).then((result) => {
+                /* Read more about isConfirmed, isDenied below */
+                if (result.isConfirmed) {
+                    $.ajax({
+                        type: "POST",
+                        url: '/communityhall/api/officer/updateBookingReject/' + id,
+                        data: {
+                            'status': 'REJECTED',
+                            'comments': reason,
+                            'bookingId': id,
+                            'reasontype': reasontype
+                        },
+                        success: function (data, textStatus, xhr) {
+                            //console.log("Rejection successful");
+                            if (xhr.status === 200) { // Check if the response status is OK
+                                Swal.fire(
+                                    'Done',
+                                    'Successfully Rejected to the ID:' + id,
+                                    'success'
+                                ).then(() => {
+                                    location.reload();
+                                });
+                            } else {
+                                Swal.fire(
+                                    'Error',
+                                    'Failed to reject the user',
+                                    'error'
+                                );
+                            }
+                        },
+                        error: function (xhr, textStatus, errorThrown) {
+                            console.error("Error:", errorThrown);
+                            Swal.fire(
+                                'Error',
+                                'Failed to reject the user',
+                                'error'
+                            );
+                        }
+                    });
+                } else if (result.isDenied) {
+                    Swal.fire('Changes are not saved', '', 'info')
+                }
+            });
+            return false; // Prevent form submission
+        }
+
+        $(document).ready(
+            function () {
+                var buttons = [{
+                    extend: 'pageLength',
+                    className: 'btn btn-primary'
+                }, {
+                    title: 'Data export',
+                    extend: 'copyHtml5',
+                    text: 'Copy',
+                    className: 'btn btn-primary',
+                    id: 'copyBtn'
+                }, {
+                    extend: 'excelHtml5',
+                    text: 'Excel',
+                    className: 'btn btn-primary',
+                    id: 'excelBtn'
+                }, {
+                    extend: 'csvHtml5',
+                    text: 'CSV',
+                    className: 'btn btn-primary',
+                    id: 'csvBtn'
+                }, {
+                    extend: 'pdfHtml5',
+                    text: 'PDF',
+                    className: 'btn btn-primary',
+                    id: 'pdfBtn'
+                },
+                ];
+                $('#bookingapprovedtable').DataTable(
+                    {
+                        dom: 'Bftip',
+                        columnDefs: [{
+                            targets: 'no-sort',
+                            orderable: false
+                        }],
+                        lengthMenu: [
+                            [50, 100, 200, 500, -1],
+                            ['50 rows', '100 rows', '200 rows',
+                                '500 rows', 'Show all']],
+                        scrollY: '50vh',
+                        fixedColumns: {
+                            left: 1,
+                            right: 1
+                        },
+                        buttons: [buttons],
+                        responsive: true,
+                        searching: true, // Enable search
+                        select: false,
+                        processing: false,
+                    });
+                // Link the search input to DataTable
+                $('#searchInput').on('keyup', function () {
+                    dataTable.search(this.value).draw();
+                });
+            });
+    </script>
+</body>
+
+</html>