diff --git a/src/main/java/com/gcc/communityHall/controller/SmController.java b/src/main/java/com/gcc/communityHall/controller/SmController.java
new file mode 100644
index 00000000..28751f79
--- /dev/null
+++ b/src/main/java/com/gcc/communityHall/controller/SmController.java
@@ -0,0 +1,446 @@
+package com.gcc.communityHall.controller;
+
+import java.net.InetAddress;
+import java.net.UnknownHostException;
+import java.time.LocalDate;
+import java.time.LocalDateTime;
+import java.util.*;
+import java.util.function.Function;
+import java.util.function.Predicate;
+import java.util.stream.Collectors;
+
+import com.fasterxml.jackson.core.JsonProcessingException;
+import com.fasterxml.jackson.databind.ObjectMapper;
+import com.gcc.communityHall.entity.ApplicationLogs;
+import com.gcc.communityHall.entity.BookingHistory;
+import com.gcc.communityHall.entity.GccBlockingDate;
+import com.gcc.communityHall.entity.Login;
+import com.gcc.communityHall.entity.LoginHallId;
+import com.gcc.communityHall.entity.RefundTransaction;
+import com.gcc.communityHall.entity.Settlement;
+import com.gcc.communityHall.entity.SettlementHistory;
+import com.gcc.communityHall.entity.SixMonthMailLog;
+import com.gcc.communityHall.others.AppConfig;
+import com.gcc.communityHall.paymentService.entity.RefundResponse;
+import com.gcc.communityHall.paymentService.repository.TransRefundResRepository;
+import com.gcc.communityHall.repository.ApplicationLogsRepository;
+import com.gcc.communityHall.repository.BookingHistoryRepository;
+import com.gcc.communityHall.repository.GccBlockingDateRepository;
+import com.gcc.communityHall.repository.LoginHallIdRepository;
+import com.gcc.communityHall.repository.LoginRepository;
+import com.gcc.communityHall.repository.RefundTransactionRepository;
+import com.gcc.communityHall.repository.SettlementHistoryRepository;
+import com.gcc.communityHall.repository.SettlementRepository;
+import com.gcc.communityHall.repository.SixMonthMailLogRepository;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.format.annotation.DateTimeFormat;
+import org.springframework.stereotype.Controller;
+import org.springframework.ui.Model;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.PathVariable;
+import org.springframework.web.bind.annotation.PostMapping;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RequestParam;
+import org.springframework.web.bind.annotation.ResponseBody;
+import org.springframework.web.multipart.MultipartFile;
+
+import com.gcc.communityHall.entity.BookingDetails;
+import com.gcc.communityHall.entity.HallDetails;
+import com.gcc.communityHall.entity.Users;
+import com.gcc.communityHall.repository.BookingDetailsRepository;
+import com.gcc.communityHall.repository.HallDetailsRepository;
+import com.gcc.communityHall.repository.UsersRepository;
+import com.gcc.communityHall.service.BookingService;
+import com.gcc.communityHall.service.HallDetailService;
+import com.gcc.communityHall.service.MailService;
+import com.gcc.communityHall.service.ReasonMasterService;
+import com.gcc.communityHall.service.UserService;
+
+import jakarta.servlet.http.HttpSession;
+import jakarta.transaction.Transactional;
+
+@Controller
+@RequestMapping("/communityhall/sm")
+public class SmController {
+    @Autowired
+    HallDetailService hallDetailService;
+    @Autowired
+    ReasonMasterService reasonMasterService;
+    @Autowired
+    private BookingDetailsRepository bookingDetailsRepo;
+
+    @Autowired
+    private UsersRepository usersRepository;
+
+    @Autowired
+    private BookingService bookingService;
+
+    @Autowired
+    private UserService userService;
+    @Autowired
+    private BookingDetailsRepository bookingDetailsRepository;
+
+    @Autowired
+    private GccBlockingDateRepository blockingDateRepository;
+
+    @Autowired
+    private AppConfig appConfig;
+
+    @Autowired
+    private LoginRepository loginRepository;
+
+    @Autowired
+    private LoginHallIdRepository loginHallIdRepository;
+
+    @Autowired
+    private HallDetailsRepository hallDetailsRepository;
+
+    @Autowired
+    private SixMonthMailLogRepository sixMonthMailLogRepository;
+
+    @Autowired
+    private MailService mailService;
+
+    @Autowired
+    private BookingHistoryRepository bookingHistoryRepository;
+
+    @Autowired
+    private SettlementHistoryRepository settlementHistoryRepository;
+
+    @Autowired
+    private SettlementRepository settlementRepository;
+
+    @Autowired
+    private RefundTransactionRepository refundTransactionRepository;
+
+    @Autowired
+    private TransRefundResRepository transRefundResRepository;
+
+    @Autowired
+    private ApplicationLogsRepository applicationLogsRepository;
+
+    @GetMapping("/dashboard")
+    public String viewDashboard(
+            @RequestParam(required = false, defaultValue = "all zones") String zone,
+            Model model, HttpSession session) {
+
+        System.out.println("sm dashboard before condition");
+        String headquartersname = (String) session.getAttribute("usertype");
+        if (headquartersname != null && "sm".equals(headquartersname)) {
+            System.out.println("sm dashboard");
+            long mobileno = (long) session.getAttribute("mobileno");
+            model.addAttribute("mobileno", mobileno);
+            List<Map<String, Object>> getMonthCount = bookingDetailsRepository.getAllAdminmonthcount(zone);
+            List<Map<String, Object>> count = bookingDetailsRepository.getAdmincount(zone);
+            Map<String, Object> map = count.get(0);
+
+            model.addAttribute("mounthcount", getMonthCount);
+            model.addAttribute("APPROVED", map.get("approved_count"));
+            model.addAttribute("REJECTED", map.get("rejected_count"));
+            model.addAttribute("PENDING", map.get("pending_count"));
+            model.addAttribute("CANCELED", map.get("CANCELED"));
+            model.addAttribute("PAYMENT_FAILURE", map.get("PAYMENT_FAILURE"));
+            model.addAttribute("GCC_BLOCKED", map.get("GCC_BLOCKED"));
+            model.addAttribute("headquartersname", headquartersname);
+            model.addAttribute("zone", zone);
+
+            return "sm/dashboard";
+        } else {
+            // Token is invalid or not present, redirect to logout
+            session.invalidate(); // Invalidate the session to clear all session attributes
+            return "redirect:/communityhall/login";
+        }
+    }
+
+    @GetMapping("/Reports")
+    public String viewReports(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/reports";
+        } else {
+            session.invalidate(); // Invalidate the session to clear all session attributes
+            return "redirect:/communityhall/login";
+        }
+    }
+
+    @PostMapping("/getReport")
+    public String generateReport(Model model,
+            @RequestParam(name = "FromDate") @DateTimeFormat(iso = DateTimeFormat.ISO.DATE) String fromDate,
+            @RequestParam(name = "ToDate") @DateTimeFormat(iso = DateTimeFormat.ISO.DATE) String toDate,
+            @RequestParam(name = "request") String request,
+            @RequestParam(name = "userstatus", required = false) String userstatus,
+            @RequestParam(name = "usertype", required = false) String usertype,
+            @RequestParam(name = "bookingStatus", required = false) String bookingStatus,
+            @RequestParam(name = "refundStatus", required = false) String refundStatus,
+            @RequestParam(name = "paymentStatus", required = false) String paymentStatus,
+            @RequestParam(name = "filterby", required = false) String filterby,
+            @RequestParam(name = "zone1", required = false, defaultValue = "ALL") String zone,
+            @RequestParam(name = "division1", required = false, defaultValue = "ALL") String division,
+            @RequestParam(name = "hall1", required = false) Integer hallid,
+            @RequestParam(name = "basedon", required = false) String basedon,
+            @RequestParam(name = "bookingId", required = false) Long bookingId,
+            @RequestParam(name = "reporttype", required = false) String reporttype,
+            @RequestParam(name = "counterId", required = false) String counterId, HttpSession session)
+            throws JsonProcessingException {
+        String headquartersname = (String) session.getAttribute("usertype");
+        if (headquartersname != null && "sm".equals(headquartersname)) {
+            long mobileno = (long) session.getAttribute("mobileno");
+            model.addAttribute("mobileno", mobileno);
+            List<Users> userList = handleUserRequest(request, fromDate, toDate, userstatus, usertype);
+            List<Object[]> bookingList = handleBookingRequest(request, fromDate, toDate, bookingStatus, filterby,
+                    bookingId, zone, division, hallid);
+            List<BookingDetails> bookingSettlementList = handleBookingSettlementRequest(request, fromDate, toDate,
+                    refundStatus, filterby);
+            // List<Object[]> paymentList = request.equals("3") ?
+            // bookingService.getAllPaymentsDetails(fromDate, toDate,zone,division,hallid) :
+            // new ArrayList<>();
+            List<Object[]> paymentList = new ArrayList<>();
+            List<Object[]> extrapaymentList = new ArrayList<>();
+            if (request.equals("3")) {
+                if (paymentStatus == null || paymentStatus.isEmpty()) {
+                    paymentList = bookingService.getAllPaymentsDetails(fromDate, toDate, null, zone, division, hallid);
+                } else {
+                    paymentList = bookingService.getAllPaymentsDetails(fromDate, toDate, paymentStatus, zone, division,
+                            hallid);
+                }
+            }
+            if (request.equals("8")) {
+                if (paymentStatus == null || paymentStatus.isEmpty()) {
+                    extrapaymentList = bookingService.getAllExtraPaymentsDetails(fromDate, toDate, null, zone, division,
+                            hallid);
+                } else {
+                    extrapaymentList = bookingService.getAllExtraPaymentsDetails(fromDate, toDate, paymentStatus, zone,
+                            division, hallid);
+                }
+            }
+            List<Object[]> userbookingList = request.equals("4")
+                    ? bookingService.getBookingUserDetailsReport(fromDate, toDate)
+                    : new ArrayList<>();
+            // List<Object[]> hallbookingList = request.equals("5") ?
+            // bookingService.getBookingHallDetailsReport(fromDate, toDate) : new
+            // ArrayList<>();
+            // In your controller method
+            // Fetch booking count by zone
+            List<Object[]> totalcount = new ArrayList<>();
+            int totalBookings = 0;
+            if ("7".equals(request)) {
+                if ("zone".equals(basedon)) {
+                    totalcount = bookingDetailsRepository.countBookingsByZone();
+                    // Format zone data
+                    totalcount = totalcount.stream()
+                            .map(data -> new Object[] { "Zone-" + data[0], data[1] })
+                            .collect(Collectors.toList());
+                } else if ("division".equals(basedon)) {
+                    totalcount = bookingDetailsRepository.countBookingsByDivisions();
+                    // Format division data
+                    totalcount = totalcount.stream()
+                            .map(data -> new Object[] { "Division-" + data[0], data[1] })
+                            .collect(Collectors.toList());
+                }
+
+                totalBookings = totalcount.stream()
+                        .mapToInt(data -> ((Number) data[1]).intValue())
+                        .sum();
+            }
+            model.addAttribute("basedon", basedon);
+            model.addAttribute("totalcount", totalcount);
+            model.addAttribute("totalBookings", totalBookings);
+            List<Object[]> hallbookingList = handleBookingHallDetailsReportRequest(request, fromDate, toDate, filterby,
+                    zone, division, hallid);
+
+            if ("9".equals(request)) {
+                if ("abstract".equals(reporttype)) {
+                    List<Object[]> counterBookingList = new ArrayList<>();
+                    counterBookingList = bookingService.getCounterWiseBookingCount(fromDate, toDate);
+                    model.addAttribute("counterBookingList", counterBookingList);
+                    // System.out.println("counterBookingList.." + counterBookingList);
+
+                    List<Object[]> hallBookingByCounter = bookingService.getHallWiseBookingDetails(fromDate, toDate,
+                            counterId);
+                    // Convert to JSON for JS usage
+                    String hallBookingJson = new ObjectMapper().writeValueAsString(hallBookingByCounter);
+                    model.addAttribute("hallBookingJson", hallBookingJson);
+
+                    List<Object[]> hallBookingDetails = bookingService.getBookingDetailsForAllHalls(fromDate, toDate,
+                            counterId, hallid);
+                    String hallBookingDetailsJson = new ObjectMapper().writeValueAsString(hallBookingDetails);
+                    model.addAttribute("hallBookingDetailsJson", hallBookingDetailsJson);
+
+                } else {
+                    List<Object[]> counterBookingList = new ArrayList<>();
+                    counterBookingList = bookingService.getCounterWiseBookingDetails(fromDate, toDate);
+                    model.addAttribute("counterBookingList", counterBookingList);
+                }
+                model.addAttribute("reporttype", reporttype);
+            }
+
+            model.addAttribute("filterby", filterby);
+            model.addAttribute("users", userList);
+            model.addAttribute("bookings", bookingList);
+            model.addAttribute("fromdate", fromDate);
+            model.addAttribute("todate", toDate);
+            model.addAttribute("userstatus", userstatus);
+            model.addAttribute("bookingSettlementList", bookingSettlementList);
+            model.addAttribute("usertype", usertype);
+            model.addAttribute("bookingStatus", bookingStatus);
+            model.addAttribute("refundStatus", refundStatus);
+            model.addAttribute("paymentStatus", paymentStatus);
+            model.addAttribute("request", request);
+            model.addAttribute("paymentLists", paymentList);
+            model.addAttribute("extrapaymentLists", extrapaymentList);
+            model.addAttribute("userbookingLists", userbookingList);
+            model.addAttribute("hallbookingLists", hallbookingList);
+            model.addAttribute("bookingId", bookingId);
+            model.addAttribute("zone1", zone);
+            model.addAttribute("division1", division);
+            model.addAttribute("hall1", hallid);
+            model.addAttribute("headquartersname", headquartersname);
+
+            return "sm/reports";
+        } else {
+            session.invalidate(); // Invalidate the session to clear all session attributes
+            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")) {
+            return new ArrayList<>();
+        }
+        if (filterby.isEmpty()) {
+            return bookingService.getBookingHallDetailsReportByBookingDate(fromDate, toDate, zone, division, hallid);
+        }
+        if ("1".equals(filterby)) {
+
+            return bookingService.getBookingHallDetailsReportByBookingDate(fromDate, toDate, zone, division, hallid);
+
+        }
+        if ("2".equals(filterby)) {
+
+            return bookingService.getBookingHallDetailsReportByEventDate(fromDate, toDate, zone, division, hallid);
+
+        }
+
+        return new ArrayList<>();
+    }
+     private List<Users> handleUserRequest(String request, String fromDate, String toDate, String userstatus,
+            String usertype) {
+        if (!request.equals("1")) {
+            return new ArrayList<>();
+        }
+        if ((userstatus != null && !userstatus.isEmpty()) && (usertype != null && !usertype.isEmpty())) {
+            return userService.getAllUsersWithFilters(fromDate, toDate, userstatus, usertype);
+        }
+        if (userstatus.isEmpty() && (usertype != null && !usertype.isEmpty())) {
+            return userService.getAllUsersWithTypeFilters(fromDate, toDate, usertype);
+        }
+        if (usertype.isEmpty() && (userstatus != null && !userstatus.isEmpty())) {
+            return userService.getAllUsersWithStatusFilters(fromDate, toDate, userstatus);
+        }
+        return userService.getAllUsers(fromDate, toDate);
+    }
+
+    private List<Object[]> handleBookingRequest(String request, String fromDate, String toDate, String bookingStatus,
+            String filterby, Long bookingId, String zone, String division, Integer hallid) {
+        if (!request.equals("2")) {
+            return new ArrayList<>();
+        }
+        if (filterby.isEmpty() && bookingStatus.isEmpty() && bookingId == null) {
+            return bookingService.getBookingDetailsByBookingDate(fromDate, toDate, zone, division, hallid);
+        }
+        if (bookingId != null && bookingStatus.isEmpty()) {
+            return bookingDetailsRepo.getAllBookingDetailsWithBookingId(fromDate, toDate, bookingId);
+        }
+        if (bookingId != null && !bookingStatus.isEmpty()) {
+            return bookingDetailsRepo.getAllBookingDetailsWithBookingIdwithbookingStatus(fromDate, toDate, bookingId,
+                    bookingStatus);
+        }
+        if (bookingId == null && filterby.isEmpty() && !bookingStatus.isEmpty()) {
+            return bookingService.getBookingDetailsByBookingDateWithStatus(fromDate, toDate, bookingStatus, zone,
+                    division, hallid);
+        }
+        if (!filterby.isEmpty()) {
+
+            if ("1".equals(filterby)) {
+                if (bookingStatus.isEmpty()) {
+                    return bookingService.getBookingDetailsByBookingDate(fromDate, toDate, zone, division, hallid);
+                } else {
+                    return bookingService.getBookingDetailsByBookingDateWithStatus(fromDate, toDate, bookingStatus,
+                            zone, division, hallid);
+                }
+
+            }
+            if ("2".equals(filterby)) {
+                if (bookingStatus.isEmpty()) {
+                    return bookingService.getBookingDetailsByEventDate(fromDate, toDate, zone, division, hallid);
+                } else {
+                    return bookingService.getBookingDetailsByEventDateWithStatus(fromDate, toDate, bookingStatus, zone,
+                            division, hallid);
+                }
+
+            }
+        }
+        // Handle default or error case
+        return new ArrayList<>();
+    }
+
+    private List<BookingDetails> handleBookingSettlementRequest(String request, String fromDate, String toDate,
+            String refundStatus, String filterby) {
+        if (!request.equals("6")) {
+            return new ArrayList<>();
+        }
+        if (filterby.isEmpty() && refundStatus.isEmpty()) {
+            return bookingService.getAllBookingsettlementDetailsByBookingDate(fromDate, toDate);
+        }
+        if (filterby.isEmpty() && !refundStatus.isEmpty()) {
+            return bookingService.getAllBookingsettlementDetailsByBookingDateWithStatus(fromDate, toDate, refundStatus);
+        }
+        if (!filterby.isEmpty()) {
+
+            if ("1".equals(filterby)) {
+                if (refundStatus.isEmpty()) {
+                    return bookingService.getAllBookingsettlementDetailsByBookingDate(fromDate, toDate);
+                } else {
+                    return bookingService.getAllBookingsettlementDetailsByBookingDateWithStatus(fromDate, toDate,
+                            refundStatus);
+                }
+
+            }
+            if ("2".equals(filterby)) {
+                if (refundStatus.isEmpty()) {
+                    return bookingService.getAllBookingsettlementDetailsByEventDate(fromDate, toDate);
+                } else {
+                    return bookingService.getAllBookingsettlementDetailsByEventDateWithStatus(fromDate, toDate,
+                            refundStatus);
+                }
+
+            }
+        }
+
+        // Handle default or error case
+        return new ArrayList<>();
+    }
+
+    
+
+    @GetMapping("/logout")
+    public String viewLogout(Model model, HttpSession session) {
+        session.invalidate();
+        System.out.println("Logged out successfully");
+        return "redirect:/communityhall/login";
+    }
+
+   
+
+
+
+
+
+
+    //sm
+    
+
+}
diff --git a/src/main/resources/templates/fragments/head-sm.html b/src/main/resources/templates/fragments/head-sm.html
new file mode 100644
index 00000000..2ff433eb
--- /dev/null
+++ b/src/main/resources/templates/fragments/head-sm.html
@@ -0,0 +1,44 @@
+<head xmlns:th="http://www.w3.org/1999/xhtml">
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width,initial-scale=1.0">
+
+  <title th:text="'GCC - '+communityHall">GCC</title>
+
+  <base th:href="${baseURL}" />
+
+  <meta name="description" content="GCC - Pet Registry">
+  <meta name="author" content="BonTon Softwares pvt Limited">
+  <meta name="robots" content="noindex, nofollow">
+
+  <!-- Open Graph Meta -->
+  <meta property="og:title" content="Pet Register">
+  <meta property="og:site_name" content="GCC">
+  <meta property="og:description" content="Greater Chennai Corporation - Pet Registry">
+  <meta property="og:type" content="website">
+  <meta property="og:url" content="">
+  <meta property="og:image" content="">
+
+  <!-- Icons -->
+  <!-- The following icons can be replaced with your own, they are used by desktop and mobile browsers -->
+  <link rel="shortcut icon" href="media/favicons/favicon.png">
+  <link rel="icon" type="image/png" sizes="192x192" href="media/favicons/favicon-192x192.png">
+  <link rel="apple-touch-icon" sizes="180x180" href="media/favicons/apple-touch-icon-180x180.png">
+  <!-- END Icons -->
+
+  <!-- Stylesheets -->
+  <!-- Page JS Plugins CSS -->
+  <link rel="stylesheet" href="js/plugins/datatables-bs5/css/dataTables.bootstrap5.min.css">
+  <link rel="stylesheet" href="js/plugins/datatables-buttons-bs5/css/buttons.bootstrap5.min.css">
+  <link rel="stylesheet" href="js/plugins/datatables-responsive-bs5/css/responsive.bootstrap5.min.css">
+  <!-- Page JS Plugins CSS -->
+  <link rel="stylesheet" href="js/plugins/sweetalert2/sweetalert2.min.css">
+  <!-- Dashmix framework -->
+  <link rel="stylesheet" id="css-main" href="css/dashmix.css">
+
+  <!-- You can include a specific file from css/themes/ folder to alter the default color theme of the template. eg: -->
+  <!-- <link rel="stylesheet" id="css-theme" href="assets/css/themes/xwork.min.css"> -->
+  <link rel="stylesheet" id="css-theme" href="css/themes/xinspire.css">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/css/bootstrap-multiselect.min.css">
+
+  <!-- END Stylesheets -->
+</head>
\ No newline at end of file
diff --git a/src/main/resources/templates/fragments/header-sm.html b/src/main/resources/templates/fragments/header-sm.html
new file mode 100644
index 00000000..6189af07
--- /dev/null
+++ b/src/main/resources/templates/fragments/header-sm.html
@@ -0,0 +1,98 @@
+<header id="page-header" xmlns:th="http://www.w3.org/1999/xhtml">
+    <!-- Header Content -->
+    <div class="content-header">
+        <!-- Left Section -->
+        <div class="space-x-1">
+            <!-- Toggle Sidebar -->
+            <!-- Layout API, functionality initialized in Template._uiApiLayout()-->
+            <button type="button" class="btn btn-alt-secondary" data-toggle="layout" data-action="sidebar_toggle">
+                <i class="fa fa-fw fa-bars"></i>
+            </button>
+            <!-- END Toggle Sidebar -->
+        </div>
+        <!-- END Left Section -->
+        <div class="row pt-1" style="margin:0px;">
+            <!--<div class="col-2 text-center p-1">
+      <img src="assets/media/images/tamilnadu-logo.png" style="padding-top:2px;" width="30px" alt="Tamilnadu Logo">
+      </div>-->
+            <div class="col-2 text-center p-1">
+                <img src='media/images/logo-sm.png' width="37" alt="Logo Sm">
+            </div>
+            <div class="col-8 text-center p-0" style="font-size:15px;">
+                பெருநகர சென்னை மாநகராட்சி
+            </div>
+            <!--<div class="col-2 text-center p-1">
+          <img src='assets/media/images/logo-sm.png' width="32" alt="Logo Sm">
+      </div>-->
+        </div>
+        <!-- Right Section -->
+        <div class="space-x-1">
+            <!-- User Dropdown
+            <div class="dropdown d-inline-block">
+                <button type="button" class="btn btn-alt-secondary" id="page-header-user-btn">
+                    <i class="far fa-fw fa-user me-1"></i>
+                    <span class="d-none d-sm-inline ms-1" th:text="${adminname}"></span>
+
+                </button>
+            </div> -->
+
+            <div class="dropdown d-inline-block">
+                <button type="button" class="btn btn-alt-secondary dropdown-toggle" id="page-header-user-dropdown"
+                    data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                    <i class="far fa-fw fa-user me-1"></i>
+                    <span class="d-none d-sm-inline ms-1" th:text="${headquartersname}"></span>
+                </button>
+                <div class="dropdown-menu dropdown-menu-end p-0" aria-labelledby="page-header-user-dropdown">
+                    <div class="bg-primary-dark rounded-top fw-semibold text-white text-center p-3">
+                        User Options
+                    </div>
+                    <div class="p-2">
+                        <a class="dropdown-item" href="javascript:resetPassword();">
+                            <i class="far fa-fw fa-user me-1"></i> Reset Password
+                        </a>
+
+                        <div role="separator" class="dropdown-divider"></div>
+                        <a class="dropdown-item" href="/communityhall/sm/logout">
+                            <i class="far fa-fw fa-arrow-alt-circle-left me-1"></i> Sign Out
+                        </a>
+                    </div>
+                </div>
+            </div>
+
+            <!-- END User Dropdown -->
+
+
+            <!-- Header Search -->
+            <div id="page-header-search" class="overlay-header bg-header-dark">
+                <div class="bg-white-10">
+                    <div class="content-header">
+                        <form class="w-100" action="be_pages_generic_search.html" method="POST">
+                            <div class="input-group">
+                                <!-- Layout API, functionality initialized in Template._uiApiLayout() -->
+                                <button type="button" class="btn btn-alt-primary" data-toggle="layout"
+                                    data-action="header_search_off">
+                                    <i class="fa fa-fw fa-times-circle"></i>
+                                </button>
+                                <input type="text" class="form-control border-0" placeholder="Search or hit ESC.."
+                                    id="page-header-search-input" name="page-header-search-input">
+                            </div>
+                        </form>
+                    </div>
+                </div>
+            </div>
+            <!-- END Header Search -->
+
+            <!-- Header Loader -->
+            <!-- Please check out the Loaders page under Components category to see examples of showing/hiding it -->
+            <div id="page-header-loader" class="overlay-header bg-header-dark">
+                <div class="bg-white-10">
+                    <div class="content-header">
+                        <div class="w-100 text-center">
+                            <i class="fa fa-fw fa-sun fa-spin text-white"></i>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- END Header Loader -->
+</header>
\ No newline at end of file
diff --git a/src/main/resources/templates/fragments/nav-sm.html b/src/main/resources/templates/fragments/nav-sm.html
new file mode 100644
index 00000000..44b4022a
--- /dev/null
+++ b/src/main/resources/templates/fragments/nav-sm.html
@@ -0,0 +1,13 @@
+<nav id="sidebar" aria-label="Main Navigation" xmlns:th="http://www.w3.org/1999/xhtml">
+  <!-- Side Header -->
+  <div th:replace="~{fragments/side-header :: div}"></div>
+  <!-- END Side Header -->
+
+  <!-- Sidebar Scrolling -->
+  <div class="js-sidebar-scroll">
+    <!-- Side Navigation -->
+    <div th:replace="~{fragments/smMenu :: div}"></div>
+    <!-- END Side Navigation -->
+  </div>
+  <!-- END Sidebar Scrolling -->
+</nav>
\ No newline at end of file
diff --git a/src/main/resources/templates/fragments/smMenu.html b/src/main/resources/templates/fragments/smMenu.html
new file mode 100644
index 00000000..be395dac
--- /dev/null
+++ b/src/main/resources/templates/fragments/smMenu.html
@@ -0,0 +1,152 @@
+<div class="content-side">
+    <ul class="nav-main">
+        <li class="nav-main-item">
+            <a class="nav-main-link" href="/communityhall/sm/dashboard">
+                <i class="nav-main-link-icon fa fa-location-arrow"></i>
+                <span class="nav-main-link-name">Dashboard</span>
+            </a>
+        </li>
+        <!-- <li class="nav-main-item">
+            <a class="nav-main-link" href="/communityhall/headquarters/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">
+                <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">
+                <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">
+                <i class="nav-main-link-icon fa fa-location-arrow"></i>
+                <span class="nav-main-link-name">Log2312in Creation</span>
+            </a>
+        </li>
+        <li class="nav-main-item">
+            <a class="nav-main-link" href="/communityhall/headquarters/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">
+                <i class="nav-main-link-icon fa fa-location-arrow"></i>
+                <span class="nav-main-link-name">GCC Blocking</span>
+            </a>
+        </li>
+        <li class="nav-main-item">
+            <a class="nav-main-link" href="/communityhall/headquarters/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">
+                <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">
+                <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 class="nav-main-item">
+            <a class="nav-main-link" href="/communityhall/headquarters/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">
+                <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>
+
+        <li class="nav-main-item">
+            <a class="nav-main-link" href="/communityhall/headquarters/collectionpending">
+                <i class="nav-main-link-icon fa fa-location-arrow"></i>
+                <span class="nav-main-link-name">Collection Pending List</span>
+            </a>
+        </li>
+
+
+        <li class="nav-main-item">
+            <a class="nav-main-link" href="/communityhall/headquarters/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">
+                <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">
+                <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">
+                <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">
+                <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">
+                <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">
+                <i class="nav-main-link-icon fa fa-location-arrow"></i>
+                <span class="nav-main-link-name">Gcc Blocking</span>
+            </a>
+        </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>
+                <span class="nav-main-link-name">Reports</span>
+            </a>
+        </li>
+        <li class="nav-main-item">
+            <a class="nav-main-link" href="/communityhall/sm/logout">
+                <i class="nav-main-link-icon fa fa-location-arrow"></i>
+                <span class="nav-main-link-name">Sign Out</span>
+            </a>
+        </li>
+    </ul>
+</div>
\ No newline at end of file
diff --git a/src/main/resources/templates/officiallogin.html b/src/main/resources/templates/officiallogin.html
index 740fd20b..cb462e40 100644
--- a/src/main/resources/templates/officiallogin.html
+++ b/src/main/resources/templates/officiallogin.html
@@ -488,6 +488,9 @@
                 case "cro":
                     window.location.href = "/communityhall/cro/booking-list";
                     break;
+                case "sm":
+                    window.location.href = "/communityhall/sm/dashboard";
+                    break;
                 default:
                     console.error("Invalid user type:", userType);
             }
diff --git a/src/main/resources/templates/sm/dashboard.html b/src/main/resources/templates/sm/dashboard.html
new file mode 100644
index 00000000..8cb59300
--- /dev/null
+++ b/src/main/resources/templates/sm/dashboard.html
@@ -0,0 +1,1570 @@
+<!DOCTYPE html>
+<html lang="en" xmlns:th="http://www.thymeleaf.org">
+
+<head th:replace="~{fragments/head-sm :: head}">
+	<meta charset="UTF-8">
+	<title>Title</title>
+	<script src="https://d3js.org/d3.v7.min.js"></script>
+
+	<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
+	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
+	<link rel="stylesheet" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css">
+	<script th:src="@{/js/ajax.js}"></script>
+	<link rel="stylesheet" href="/node_modules/amcharts3/amcharts/plugins/export/export.css" type="text/css"
+		media="all" />
+	<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a
+			href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
+</head>
+
+<style>
+	.custom-close-button {
+		background-color: red;
+		border: none;
+
+		color: #FFFFFF;
+		/* Change the color to red */
+
+		transition: color 0.2s ease-in-out, opacity 0.2s ease-in-out;
+	}
+
+	.custom-close-button:hover {
+		color: black;
+		opacity: 1;
+		/* Fully opaque on hover */
+	}
+
+	.custom-close-button:focus {
+		outline: none;
+		/* Remove the default focus outline */
+
+	}
+
+	.modal-body {
+		max-height: 500px;
+		/* Adjust the height as needed */
+		overflow-y: auto;
+		/* Enable vertical scrolling */
+	}
+
+	.modal-body {
+		max-height: 500px;
+		/* Adjust the height as needed */
+		overflow-y: auto;
+		/* Enable vertical scrolling */
+	}
+
+	.pagination {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		margin-top: 20px;
+	}
+
+	.pagination .btn {
+		margin: 0 10px;
+	}
+
+	.pagination .btn.disabled {
+		background-color: #cccccc;
+		border-color: #cccccc;
+		cursor: not-allowed;
+	}
+
+	.pagination .btn:not(.disabled):hover {
+		background-color: #0056b3;
+		/* Darker shade for hover effect */
+		border-color: #0056b3;
+	}
+
+	.page-info {
+		margin: 0 10px;
+		font-weight: bold;
+		color: #333;
+	}
+
+
+	.pagination span {
+		margin: 0 10px;
+		line-height: 2;
+	}
+
+	.modal-header {
+		background-color: darkcyan;
+		color: white;
+	}
+
+	.modal-body {
+		padding: 20px;
+	}
+
+	.table-responsive {
+		margin-bottom: 20px;
+	}
+
+	.modal-footer {
+		display: flex;
+		justify-content: space-between;
+	}
+
+
+
+	.btn-secondary {
+		background-color: #3cb371;
+	}
+
+	.btn-secondary:hover {
+		background-color: #3cb371;
+	}
+
+	.btn-warning {
+		background-color: red;
+	}
+
+	.btn-warning:hover {
+		background-color: orange;
+	}
+
+	.btn-export {
+		margin-left: 5px;
+	}
+
+	.hidden {
+		display: none;
+	}
+
+	#page-container.page-header-fixed #main-container {
+		padding-top: 1rem !important;
+	}
+
+	.card {
+		box-shadow: rgba(0, 0, 0, 0.5) 0px 3px 8px !important;
+	}
+
+	.row tail {
+		display: flex;
+	}
+
+	.col-lg-4,
+	.col-md-4,
+	.col-sm-12 {
+		display: flex;
+		flex-direction: column;
+		justify-content: space-between;
+	}
+
+	.boxcard {
+		height: 100px;
+		border-radius: 20px;
+	}
+
+	.boxcard1 {
+		height: 200px;
+		border-radius: 20px;
+	}
+
+	@media (min-width: 768px) {
+		.card boxcard {
+			margin-bottom: 20%;
+		}
+	}
+</style>
+
+<body class="light-theme">
+	<link rel="stylesheet" href="node_modules/amcharts3/amcharts/plugins/export/export.css" type="text/css"
+		media="all" />
+	<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>
+
+		<main id="main-container">
+			<div class="content">
+				<div class="content content-full">
+
+					<div class="col-md-12">
+
+						<div class="card-header">
+							<h3>
+								<i class="fas fa-chart-pie pr-2"></i><b>Overall Dashboard:</b>
+							</h3>
+						</div>
+
+						<div class="card">
+							<diV class="card-body">
+								<div class="row">
+									<div class="col-sm-3 mb-3">
+										<label for="fromDate" style="font-size:medium; ;margin-bottom: 0px;">From
+											Date:</label>
+										<input type="date" id="fromDate" name="fromDate" value="${fromDate}"
+											class="form-control">
+									</div>
+									<div class="col-sm-3  mb-3">
+										<label for="toDate" style="font-size:medium;margin-bottom: 0px;">To
+											Date:</label>
+										<input type="date" id="toDate" name="toDate" value="${toDate}"
+											class="form-control">
+									</div>
+
+									<div class="col-sm-3  mb-3">
+										<label for="zone1" class="pr-2"
+											style="font-size:medium;margin-bottom: 0px;">Select Zone:</label>
+										<select class="form-select custom-select" name="zone1" id="zone1"
+											onchange="filterDivisions()">
+											<option value="ALL">--Select Zone--</option>
+
+										</select>
+									</div>
+
+									<div class="col-sm-3  mb-3 hidden" id="divisionContainer">
+										<label for="division1" class="pr-2"
+											style="font-size:medium;margin-bottom: 0px;">Select Ward:</label>
+										<select id="division1" name="division1" class="form-select custom-select"
+											onchange="filterHalls()">
+											<option value="ALL">--Select Div--</option>
+
+										</select>
+									</div>
+
+									<div class="col-sm-3 mb-3 hidden" id="hallContainer">
+										<label for="hall1" class="pr-2"
+											style="font-size:medium;margin-bottom: 0px;">Select Hall:</label>
+										<select id="hall1" name="hall1" class="form-select custom-select">
+
+										</select>
+									</div>
+
+									<div class="col-sm-3  mb-3">
+										<label for="userType" class="pr-2"
+											style="font-size:medium;margin-bottom: 0px;">User Type:</label>
+										<select id="userType" name="userType" class="form-select custom-select">
+											<option value="ALL">--Select UserType--</option>
+											<option value="PUBLIC">PUBLIC</option>
+											<option value="PENSIONER">PENSIONER</option>
+											<option value="GCC_EMPLOYEE">GCC EMPLOYEE</option>
+											<option value="COUNCILLOR">COUNCILLOR</option>
+											<!-- Add userType options dynamically -->
+										</select>
+									</div>
+
+								</div>
+
+								<div class="row">
+									<div class="col-12 d-flex justify-content-center">
+										<button type="submit" id="filterButton"
+											class="btn btn-primary mx-2">Filter</button>
+
+										<button class="btn btn-danger mx-2" onclick="resetDate()" name="reset"
+											type="reset">Reset</button>
+									</div>
+								</div>
+
+							</div>
+						</div>
+
+						<br>
+
+
+						<div class="card-block" style="text-align:center;background-color: #F6F7FB;">
+							<div id="chart" class="row">
+
+								<div class="col-12">
+									<div class="row tail">
+										<!-- First Part: 2 cards vertically -->
+										<div class="col-lg-4 col-md-4 col-sm-12">
+
+											<div class="card boxcard">
+												<div class="card-body">
+													<h5 class="card-title" style="font-size: 14px;">Total Amount
+														Received</h5>
+													<p class="card-text" id="totalAmount"
+														style="font-size: large; font-weight: bold;"></p>
+												</div>
+											</div>
+
+
+											<div class="card boxcard">
+												<div class="card-body">
+													<h5 class="card-title" style="font-size: 14px;">Total Refund Amount
+													</h5>
+													<p class="card-text" id="totalRefundedAmount"
+														style="font-size: large; font-weight: bold;"></p>
+												</div>
+											</div>
+
+										</div>
+
+										<!-- Second Part: 1 card, height equal to both cards in the first part -->
+										<div class="col-lg-4 col-md-4 col-sm-12 mt-3">
+
+											<div class="card boxcard1">
+												<div class="card-body">
+													<h3 class="card-title mt-3 mb-4" style="font-size: 14px;">Total
+														Bookings</h3>
+													<p class="card-text" id="totalBookings"
+														style="font-size:40px; font-weight: bold;"></p>
+												</div>
+											</div>
+
+										</div>
+
+										<!-- Third Part: 2 cards vertically -->
+										<div class="col-lg-4 col-md-4 col-sm-12">
+
+											<div class="card boxcard">
+												<div class="card-body">
+													<h5 class="card-title" style="font-size: 14px;">NetAmount</h5>
+													<p class="card-text" id="netAmount"
+														style="font-size: large; font-weight: bold;"></p>
+												</div>
+											</div>
+
+
+											<div class="card boxcard">
+												<div class="card-body">
+													<h5 class="card-title" style="font-size: 14px;">GST</h5>
+													<p class="card-text" id="gstAmount"
+														style="font-size: large; font-weight: bold;"></p>
+												</div>
+											</div>
+
+										</div>
+									</div>
+								</div>
+
+							</div>
+						</div>
+						<br>
+						<div class="card-block" style="text-align:center;background-color: #F6F7FB;">
+							<div class="row">
+								<div class="col-sm-12 col-lg-4">
+									<div class="card" style="width:100%;">
+										<div id="booking-status-chartdiv" class="chart-shadow" style="height:420px;">
+										</div>
+									</div>
+								</div>
+
+								<div class="col-sm-12 col-lg-4">
+									<div class="card" style="width:100%;">
+										<div id="refund-status-chartdiv" class="chart-shadow" style="height:420px;">
+										</div>
+									</div>
+								</div>
+								<div class="col-sm-12 col-lg-4">
+									<div class="card" style="width:100%;">
+										<div id="reason-chartdiv" class="chart-shadow" style="height:420px;"></div>
+									</div>
+								</div>
+
+
+							</div>
+						</div>
+						<br>
+
+						<div class="row">
+							<div class="col-sm-12 col-lg-6">
+
+								<div class="card" style="width:100%;">
+									<div id="paymentStatus-chartdiv" class="chart-shadow" style="height:420px;"></div>
+								</div>
+							</div>
+							<div class="col-sm-12 col-lg-6">
+
+								<div class="card" style="width:100%;">
+									<div id="past_future-chartdiv" class="chart-shadow" style="height:420px;"></div>
+								</div>
+							</div>
+						</div>
+						<br>
+
+						<div class="row">
+							<div class="col-sm-12 col-lg-12">
+								<div class="card">
+									<div id="zonewise-chartdiv" class="chart-shadow" style="height:600px;"></div>
+								</div>
+							</div>
+						</div>
+
+
+
+
+					</div>
+
+				</div>
+
+			</div>
+		</main>
+
+		<!-- Modal -->
+		<div class="modal fade backdrop" id="DetailsModal" data-backdrop="static" tabindex="-1" role="dialog"
+			aria-labelledby="zoneDetailsModalLabel" aria-hidden="true">
+			<div class="modal-dialog modal-xl" role="document">
+				<div class="modal-content">
+					<div id="zone-details-content"></div>
+				</div>
+			</div>
+		</div>
+		<!--    modal-->
+
+		<!-- Modal for Hall Details -->
+		<div class="modal fade" id="HallDetailsModal" tabindex="-1" role="dialog"
+			aria-labelledby="HallDetailsModalTitle" aria-hidden="true">
+			<div class="modal-dialog modal-xl" role="document">
+				<div class="modal-content" id="hall-details-content">
+					<!-- Content will be injected by JavaScript -->
+				</div>
+			</div>
+		</div>
+
+		<footer th:replace="~{fragments/footer2 :: footer}"></footer>
+	</div>
+
+	<div th:replace="~{fragments/resetpassword :: div}"></div>
+	<script th:replace="~{fragments/script :: script}"></script>
+	<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+
+	<!-- Include AmCharts JavaScript libraries -->
+	<script src="node_modules/amcharts3/amcharts/amcharts.js"></script>
+	<script src="node_modules/amcharts3/amcharts/serial.js"></script>
+	<script src="node_modules/amcharts3/amcharts/plugins/export/export.min.js"></script>
+	<script src="node_modules/amcharts3/amcharts/plugins/animate/animate.min.js"></script>
+	<script src="node_modules/amcharts3/amcharts/pie.js"></script>
+	<script src="node_modules/amcharts3/amcharts/themes/light.js"></script>
+	<script src="node_modules/tempusdominus-bootstrap-4/build/js/tempusdominus-bootstrap-4.min.js"></script>
+
+	<!-- Include Tempus Dominus JavaScript -->
+	<script
+		src="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.1.6/js/tempusdominus-bootstrap-4.min.js"></script>
+
+	<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+	<!-- DataTables JS -->
+
+	<!-- Bootstrap JavaScript -->
+	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script>
+	<!-- SheetJS -->
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
+	<!-- jsPDF -->
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.4.0/jspdf.umd.min.js"></script>
+	<!-- jsPDF-AutoTable -->
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.5.13/jspdf.plugin.autotable.min.js"></script>
+
+
+	<!-- Script to handle fetching data and rendering charts -->
+	<script>
+
+
+
+		// Function to generate random dark color
+		function getRandomDarkColor() {
+			var letters = '0123456789ABCDEF';
+			var color = '#';
+			for (var i = 0; i < 6; i++) {
+				color += letters[Math.floor(Math.random() * 16)];
+			}
+			return color;
+		}
+
+		// Function to fetch data and update charts
+
+		function fetchDataAndDisplayCharts(fromDate, toDate, zone, division, hallid, userType) {
+
+			var apiUrl = "/communityhall/admin/api/bookingstatistics";
+			var queryParams = [];
+			if (fromDate) {
+				queryParams.push("fromDate=" + encodeURIComponent(fromDate));
+			}
+			if (toDate) {
+				queryParams.push("toDate=" + encodeURIComponent(toDate));
+			}
+			if (zone) {
+				queryParams.push("zone=" + encodeURIComponent(zone));
+			}
+			if (division) {
+				queryParams.push("division=" + encodeURIComponent(division));
+			}
+			if (hallid) {
+				queryParams.push("hallid=" + encodeURIComponent(hallid));
+			}
+			if (userType) {
+				queryParams.push("userType=" + encodeURIComponent(userType));
+			}
+
+			if (queryParams.length > 0) {
+				apiUrl += "?" + queryParams.join("&");
+			}
+
+			//console.log("API URL:", apiUrl);
+
+
+			$.ajax({
+				url: apiUrl,
+				type: "GET",
+				dataType: 'json',
+				success: function (response) {
+
+					// console.log('overallreports:',response);
+
+					const data = response;
+					// console.log('Parsed Data:', data);
+
+
+					// Check and create charts if data is available, otherwise display an image
+
+					if (data.main && Object.keys(data.main).length > 0) {
+						document.getElementById('totalBookings').innerText = data.main.total;
+						document.getElementById('totalAmount').innerText = "Rs." + data.main.main_total_amount;
+						document.getElementById('totalRefundedAmount').innerText = "Rs." + data.main.main_refunded_amount;
+						document.getElementById('netAmount').innerText = "Rs." + data.main.main_net_amount;
+						document.getElementById('gstAmount').innerText = "Rs." + data.main.main_gst_amount;
+
+						animateAmount('totalBookings', data.main.total, 2000); // Duration in milliseconds
+						animateAmount('totalAmount', data.main.main_total_amount, 2000); // Duration in milliseconds
+						animateAmount('totalRefundedAmount', data.main.main_refunded_amount, 2000);
+						animateAmount('netAmount', data.main.main_net_amount, 2000);
+						animateAmount('gstAmount', data.main.main_gst_amount, 2000);
+
+					}
+
+					else {
+						document.getElementById("totalBookings").innerHTML = `
+                    		    <div class="d-flex justify-content-center align-items-center" style="height: 100%;">
+                		        <img src='/images/nodata_pic.png' alt='No data available' width='50' height='50' />
+                		    </div>
+                		`;
+						document.getElementById("totalAmount").innerHTML = `
+                    		    <div class="d-flex justify-content-center align-items-center" style="height: 100%;">
+                		        <img src='staticimages/nodata-founds.png' alt='No data available' width='50' height='50' />
+                		    </div>
+                		`;
+						document.getElementById("netAmount").innerHTML = `
+                    		    <div class="d-flex justify-content-center align-items-center" style="height: 100%;">
+                		        <img src='media/images/nodata-founds.png' alt='No data available' width='50' height='50' />
+                		    </div>
+                		`;
+						document.getElementById("totalRefundedAmount").innerHTML = `
+                    		    <div class="d-flex justify-content-center align-items-center" style="height: 100%;">
+                		        <img src='/images/nodata_pic.png' alt='No data available' width='50' height='50' />
+                		    </div>
+                		`; document.getElementById("gstAmount").innerHTML = `
+                    		    <div class="d-flex justify-content-center align-items-center" style="height: 100%;">
+                		        <img src='/images/nodata_pic.png' alt='No data available' width='50' height='50' />
+                		    </div>
+                		`;
+					}
+					if (data.bookingStatus && Object.keys(data.bookingStatus).length > 0) {
+						createDonutChart("booking-status-chartdiv", data.bookingStatus, "Booking Status", "bookingStatus");
+					} else {
+						document.getElementById("booking-status-chartdiv").innerHTML = `
+	                    		    <div class="d-flex justify-content-center align-items-center" style="height: 100%;">
+	                    		        <img src='media/images/nodata-founds.png' alt='No data available' width='100' height='100' />
+	                    		    </div>
+	                    		`;
+					}
+
+					if (data.refundStatus && Object.keys(data.refundStatus).length > 0) {
+						createDonutChart("refund-status-chartdiv", data.refundStatus, "Refund Status", "refundStatus");
+					} else {
+						document.getElementById("refund-status-chartdiv").innerHTML = `
+	                    		    <div class="d-flex justify-content-center align-items-center" style="height: 100%;">
+<!--	                    		        <img src='media/images/nodata-founds.png' alt='No data available' width='100' height='100' />
+	                    		    </div>
+	                    		`;
+					}
+
+					if (data.reason && Object.keys(data.reason).length > 0) {
+						createReasonChart("reason-chartdiv", data.reason, "Event Types");
+					} else {
+						document.getElementById("reason-chartdiv").innerHTML = `
+	                    		    <div class="d-flex justify-content-center align-items-center" style="height: 100%;">
+	                    		        <img src='media/images/nodata-founds.png' alt='No data available' width='100' height='100' />
+	                    		    </div>
+	                    		`;
+					}
+
+					if (data.zonewise && Object.keys(data.zonewise).length > 0) {
+						createZoneChart("zonewise-chartdiv", data.zonewise, "Zonewise Bookings", "zonewise");
+					} else {
+						document.getElementById("zonewise-chartdiv").innerHTML = `
+	                    		    <div class="d-flex justify-content-center align-items-center" style="height: 100%;">
+	                    		        <img src='media/images/nodata-founds.png' alt='No data available' width='100' height='100' />
+	                    		    </div>
+	                    		`;
+					}
+
+					if (data.paymentStatus && Object.keys(data.paymentStatus).length > 0) {
+						createZoneCharts("paymentStatus-chartdiv", data.paymentStatus, "Paymentstatus Bookings", "paymentStatus");
+					} else {
+						document.getElementById("paymentStatus-chartdiv").innerHTML = `
+	                    		    <div class="d-flex justify-content-center align-items-center" style="height: 100%;">
+	                    		        <img src='media/images/nodata-founds.png' alt='No data available' width='100' height='100' />
+	                    		    </div>
+	                    		`;
+					}
+					if (data.past_future && Object.keys(data.past_future).length > 0) {
+						// Extract only the desired fields
+						const filteredData = {
+							"PAST_Events": data.past_future.PAST_Events,
+							"FUTURE_Events": data.past_future.FUTURE_Events
+						};
+						createZoneCharts("past_future-chartdiv", filteredData, "Booking Summary", "past_future");
+					} else {
+						document.getElementById("past_future-chartdiv").innerHTML = `
+	                    		    <div class="d-flex justify-content-center align-items-center" style="height: 100%;">
+	                    		        <img src='media/images/nodata-founds.png' alt='No data available' width='100' height='100' />
+	                    		    </div>
+	                    		`;
+					}
+
+				},
+				error: function (error) {
+					console.error("Error fetching data:", error);
+				}
+			});
+		}
+
+
+		// Initial call to fetch and display charts with default parameters or initial load
+
+		fetchDataAndDisplayCharts();
+
+		// Example of handling date input changes to update charts
+		document.getElementById("filterButton").addEventListener("click", function (event) {
+			event.preventDefault();
+			var fromDate = document.getElementById("fromDate").value;
+			var toDate = document.getElementById("toDate").value;
+			var zone = document.getElementById("zone1").value;
+			var division = document.getElementById("division1").value;
+			var hallid = document.getElementById("hall1").value;
+			var userType = document.getElementById("userType").value;
+
+			fetchDataAndDisplayCharts(fromDate, toDate, zone, division, hallid, userType);
+		});
+
+		function formatValue(value) {
+			value = Number(value); // Ensure the value is a number
+
+			if (value >= 1e9) {
+				return (value / 1e9).toFixed(2) + ' Billion';
+			} else if (value >= 1e6) {
+				return (value / 1e6).toFixed(2) + ' Million';
+			} else if (value >= 1e5) {
+				return (value / 1e5).toFixed(2) + ' Lakh';
+			} else if (value >= 1e4) {
+				return (value / 1e4).toFixed(2) + ' Thousand';
+			}
+			return value.toFixed(2);
+		}
+
+
+
+		// colors for each field
+		function getColorByCategory(category, key) {
+			const colors = {
+				bookingStatus: {
+					"PENDING": "#DBAE58",   // Orange
+					"APPROVED": "#B3C100",  // Greenish
+					"REJECTED": "#D32D41",
+					"COMPLETED": "#009900",
+					"CANCELED": "#ff9933",
+					"PAYMENT_FAILURE": "#b35900",
+					"GCC_BLOCKED": "#ff6600"
+				},
+				refundStatus: {
+					"WAITING": "#D32D41",
+					"INITIATED": "#DBAE58",
+					"APPROVED": "#B3C100"
+				},
+				past_future: {
+					"PAST_Events": "#D32D41",
+					"FUTURE_Events": "#B3C100"
+				},
+				paymentStatus: {
+					"Not Completed": "#D32D41",
+					"Success": "#B3C100"
+				},
+				zonewise: {
+					"01": "#46659b",
+					"02": "#46659b",
+					"03": "#46659b",
+					"04": "#46659b",
+					"05": "#46659b",
+					"06": "#46659b",
+					"08": "#46659b",
+					"07": "#46659b",
+					"09": "#46659b",
+					"10": "#46659b",
+					"11": "#46659b",
+					"12": "#46659b",
+					"13": "#46659b",
+					"14": "#46659b",
+					"15": "#46659b",
+				}
+
+			};
+
+			if (!colors[category] || !colors[category][key]) {
+
+				return "#000000"; // Default color
+			}
+
+			return colors[category][key];
+
+		}
+
+
+		// Function to create a donut chart
+		function createDonutChart(chartId, chartData, chartTitle, category) {
+
+			chartData = Object.keys(chartData).map(key => ({
+				"title": key,
+				"value": chartData[key],
+				"color": getColorByCategory(category, key)
+
+			}));
+
+			/* chartData.forEach(data => {
+			   data.color = getRandomDarkColor();
+		   });*/
+			var zone = document.getElementById("zone1").value;
+			var division = document.getElementById("division1").value;
+
+			AmCharts.makeChart(chartId, {
+				"type": "pie",
+				"theme": "dark",
+				"dataProvider": chartData,
+				"valueField": "value",
+				"titleField": "title",
+				"colorField": "color",
+				"startEffect": "elastic",
+				"innerRadius": "45%",
+				"pullOutRadius": "12%",
+
+				"labelText": "[[[[value]]]]",
+				"labelsEnabled": true,
+				"gradientRatio": [-0.4, -0.4, -0.4, -0.4, -0.4, -0.4, 0, 0.1, 0.2, 0.1, 0, -0.2, -0.5],
+				"balloonText": "[[[[title]]]]<br><span style='font-size:14px'><b>[[[[value]]]]</b></span>",
+				"export": {
+					"enabled": true,
+					"fileName": `Zone:${zone}_Div:${division}_${chartTitle}`
+
+				},
+				"responsive": {
+					"enabled": true,
+				},
+				"legend": {
+					"position": "bottom",
+					"markerType": "diamond",
+					"valueAlign": "left",
+					"align": "center",
+					"labelText": "[[[[title]]]] - ",
+					//"reversedOrder": true,
+					"enabled": true,
+				},
+
+				"titles": [{
+					"text": `Zone:${zone}  Div:${division} \n \n  ${chartTitle}`,
+					"size": 15
+				}]
+
+			});
+		}
+
+
+		// Function to create a donut chart
+		function createReasonChart(chartId, chartData, chartTitle) {
+
+			chartData = Object.keys(chartData).map(key => ({
+				"title": key,
+				"value": chartData[key],
+
+
+			}));
+
+			var existingColors = new Set();
+			chartData.forEach(data => {
+				data.color = getRandomDarkColor(existingColors);
+			});
+			var zone = document.getElementById("zone1").value;
+			var division = document.getElementById("division1").value;
+
+			AmCharts.makeChart(chartId, {
+				"type": "pie",
+				"theme": "dark",
+				"dataProvider": chartData,
+				"valueField": "value",
+				"titleField": "title",
+				"colorField": "color",
+				"startEffect": "elastic",
+				"innerRadius": "45%",
+				"pullOutRadius": "12%",
+
+				"labelText": "[[[[value]]]]",
+				"labelsEnabled": true,
+				"gradientRatio": [-0.4, -0.4, -0.4, -0.4, -0.4, -0.4, 0, 0.1, 0.2, 0.1, 0, -0.2, -0.5],
+				"balloonText": "[[[[title]]]]<br><span style='font-size:14px'><b>[[[[value]]]]</b></span>",
+				"export": {
+					"enabled": true,
+					"fileName": `Zone:${zone}_Div:${division}_${chartTitle}`
+
+				},
+				"responsive": {
+					"enabled": true,
+				},
+				"legend": {
+					"position": "bottom",
+					"markerType": "diamond",
+					"valueAlign": "left",
+					"align": "center",
+					"labelText": "[[[[title]]]] - ",
+					//"reversedOrder": true,
+					"enabled": true,
+				},
+
+				"titles": [{
+					"text": `Zone:${zone}  Div:${division} \n \n  ${chartTitle}`,
+					"size": 15
+				}]
+
+			});
+		}
+
+		// Function to payment Status and booking Summary
+
+		function createZoneCharts(chartId, chartData, chartTitle, category) {
+
+			chartData = Object.keys(chartData).map(key => ({
+				"category": key,
+				"value": chartData[key],
+				"color": getColorByCategory(category, key)
+			})).sort((a, b) => b.value - a.value);
+
+
+			var zone = document.getElementById("zone1").value;
+			var division = document.getElementById("division1").value;
+
+			//console.log("Chart Data for", chartId, chartData);
+
+			const chartElement = document.getElementById(chartId);
+			const minHeight = 150; // Minimum height in pixels
+			const heightPerZone = 30; // Height per zone in pixels
+
+			// Calculate height dynamically
+			const dynamicHeight = Math.max(minHeight, chartData.length * heightPerZone);
+			chartElement.style.height = dynamicHeight + 'px';
+
+			AmCharts.makeChart(chartId, {
+				"type": "serial",
+				"theme": "light",
+				"dataProvider": chartData,
+				"depth3D": 2,
+				"angle": 10,
+				"valueAxes": [{
+					"gridColor": "#808080",
+					"gridAlpha": 0,
+					"dashLength": 0,
+					"axisAlpha": 0,
+					"labelsEnabled": false,
+					"dashLength": 0
+				}],
+				"gridAboveGraphs": true,
+				"startDuration": 2,
+				"startEffect": "elastic",
+				"graphs": [{
+					"balloonText": "[[[[category]]]]<br><span style='font-size:14px'><b>[[[[value]]]]</b></span>",
+					"fillAlphas": 0.8,
+					"lineAlpha": 0.2,
+					"topRadius": 1,
+					"type": "column",
+					"valueField": "value",
+					"fillColorsField": "color",
+					"labelText": "[[[[value]]]]",
+					"labelColorField": "#ffffff",
+					"lineThickness": 1,
+				}],
+				"chartCursor": {
+					"valueLineEnabled": false,
+					"valueLineBalloonEnabled": false,
+					"cursorAlpha": 0,
+					"valueLineAlpha": 0.2,
+					"pan": false
+				},
+				"categoryField": "category",
+				"categoryAxis": {
+					"gridPosition": "start",
+					"gridAlpha": 0,
+					"axisAlpha": 0,
+					"autoWrap": false,
+					//"position": "left"
+				},
+				"rotate": true,
+				"export": {
+					"enabled": true,
+					"fileName": `Zone:${zone}_Div:${division}_${chartTitle}`
+				},
+				"titles": [{
+					"text": `Zone:${zone}  Div:${division} \n \n ${chartTitle}`,
+					"size": 15
+				}],
+
+			});
+		}
+
+		// Function to create a Zone column chart
+
+		function createZoneChart(chartId, chartData, chartTitle, category) {
+
+			chartData = Object.keys(chartData).map(key => ({
+				"category": key,
+				"value": chartData[key],
+				"color": getColorByCategory(category, key)
+			})).sort((a, b) => b.value - a.value);
+
+			/* chartData.forEach(data => {
+				 data.color = getRandomDarkColor();
+			 }); */
+			var zone = document.getElementById("zone1").value;
+			var division = document.getElementById("division1").value;
+
+			//console.log("Chart Data for", chartId, chartData);
+
+			const chartElement = document.getElementById(chartId);
+			const minHeight = 150; // Minimum height in pixels
+			const heightPerZone = 30; // Height per zone in pixels
+
+			// Calculate height dynamically
+			const dynamicHeight = Math.max(minHeight, chartData.length * heightPerZone);
+			chartElement.style.height = dynamicHeight + 'px';
+
+			AmCharts.makeChart(chartId, {
+				"type": "serial",
+				"theme": "light",
+				"dataProvider": chartData,
+				"depth3D": 2,
+				"angle": 10,
+				"valueAxes": [{
+					"gridColor": "#808080",
+					"gridAlpha": 0,
+					"dashLength": 0,
+					"axisAlpha": 0,
+					"labelsEnabled": false,
+					"dashLength": 0
+				}],
+				"gridAboveGraphs": true,
+				"startDuration": 2,
+				"startEffect": "elastic",
+				"graphs": [{
+					"balloonText": "[[[[category]]]]<br><span style='font-size:14px'><b>[[[[value]]]]</b></span>",
+					"fillAlphas": 0.8,
+					"lineAlpha": 0.2,
+					"topRadius": 1,
+					"type": "column",
+					"valueField": "value",
+					"fillColorsField": "color",
+					"labelText": "[[[[value]]]]",
+					"labelColorField": "#ffffff",
+					"lineThickness": 1,
+				}],
+				"chartCursor": {
+					"valueLineEnabled": false,
+					"valueLineBalloonEnabled": false,
+					"cursorAlpha": 0,
+					"valueLineAlpha": 0.2,
+					"pan": false
+				},
+				"categoryField": "category",
+				"categoryAxis": {
+					"gridPosition": "start",
+					"gridAlpha": 0,
+					"axisAlpha": 0,
+					"autoWrap": false,
+					//"position": "left"
+				},
+				"rotate": true,
+				"export": {
+					"enabled": true,
+					"fileName": `Zone:${zone}_Div:${division}_${chartTitle}`
+				},
+				"titles": [{
+					"text": `Zone:${zone}  Div:${division} \n \n ${chartTitle}`,
+					"size": 15
+				}],
+				"listeners": [{
+					"event": "clickGraphItem",
+					"method": function (event) {
+						let zone = event.item.category;
+						fetchZoneDetails(zone);
+					}
+				}]
+			});
+		}
+
+
+
+
+		function fetchZoneDetails(zone) {
+			$.ajax({
+				url: '/communityhall/admin/api/getHallsDetailsByZone',
+				type: 'GET',
+				data: { zone: zone },
+				dataType: 'json', // Ensure response is parsed as JSON
+				success: function (response) {
+					//console.log("response received:",response);
+					displayZoneDetails(response, zone);
+				},
+				error: function (error) {
+					console.error("Error fetching zone details:", error);
+				}
+			});
+		}
+
+		function displayZoneDetails(response, zone) {
+			//console.log("Display Zone Details Response:", response);
+
+			let totalBooking = response.totalBooking;
+			let amountReceived = response.amountReceived;
+			let approvedCount = response.approvedCount;
+			let rejectedCount = response.rejectedCount;
+			let completedCount = response.completedCount;
+			let canceledCount = response.canceledCount;
+			let paymentFailureCount = response.paymentFailureCount;
+			let gccBlockedCount = response.gccBlockedCount;
+
+			let zoneHalls = response.zonehalls;
+
+			if (!Array.isArray(zoneHalls)) {
+				console.error("zoneHalls is not an array or is undefined:", zoneHalls);
+				return;
+			}
+
+			amountReceived = amountReceived.toLocaleString();
+
+			const rowsPerPage = 10; // Number of rows per page
+			let currentPage = 1;
+
+			function renderTable(page) {
+				const startIndex = (page - 1) * rowsPerPage;
+				const endIndex = startIndex + rowsPerPage;
+				const paginatedData = zoneHalls.slice(startIndex, endIndex);
+
+				let modalContent = `
+            <div class="modal-header">
+                <h5 class="modal-title" id="DetailsModalTitle"><b>Zone: ${zone} Details</b></h5>
+                <button type="button" class="close custom-close-button" data-dismiss="modal" aria-label="Close">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+            </div>
+            <div class="modal-body">
+                <div class="table-responsive" style="max-height: 400px; overflow-y: auto;">
+                    <table id="Zonetable" class="table table-striped table-bordered table-hover">
+                        <thead class="thead-dark">
+                            <tr>
+                                <th>Zone</th>
+                                <th>Division</th>
+                                <th>Hall Name</th>
+                                <th>Approved</th>
+                                <th>Rejected</th>
+                                <th>Completed</th>
+                                <th>Cancelled</th>
+                                <th>Payment Failure</th>
+                                <th>GCC Blocked</th>
+                                <th>Total Bookings</th>
+                                <th>Total Amount</th>
+                            </tr>
+                        </thead>
+                        <tbody>`;
+
+				paginatedData.forEach(hall => {
+					modalContent += `
+                <tr>
+                    <td>${hall.zonename}</td>
+                    <td>${hall.division}</td>
+                    <td>${hall.hallName}</td>
+                    <td>${hall.approvedCount}</td>
+                    <td>${hall.rejectedCount}</td>
+                    <td>${hall.completedCount}</td>
+                    <td>${hall.canceledCount}</td>
+                    <td>${hall.paymentFailureCount}</td>
+                    <td>${hall.gccBlockedCount}</td>
+                    <td><b><button style="cursor: pointer;
+                   background-color: darkcyan;
+                   color: white;
+                   border: none;
+                   padding: 4px 10px;
+                   font-size: 12px;
+                   border-radius: 5px;"
+                    href="#" class="total-booking" data-hallid="${hall.hall_id}">${hall.totalBookings}</button></b></td>
+                    <td>Rs.${hall.totalAmount.toLocaleString()}</td>
+                </tr>`;
+				});
+
+				modalContent += `
+            <tr>
+                <td>Nil</td>
+                <td>Nil</td>
+                <td><b>Total:</b></td>
+                <td><b>${approvedCount}</b></td>
+                <td><b>${rejectedCount}</b></td>
+                <td><b>${completedCount}</b></td>
+                <td><b>${canceledCount}</b></td>
+                <td><b>${paymentFailureCount}</b></td>
+                <td><b>${gccBlockedCount}</b></td>
+                <td><b>${totalBooking}</b></td>
+                <td><b>Rs.${amountReceived}</b></td>
+            </tr>
+        </tbody>
+        </table>
+        </div>
+      <div class="pagination">
+    <button class="btn btn-primary ${page === 1 ? 'disabled' : ''}" onclick="changePage(${page - 1})">Previous</button>
+    <span class="page-info">Page ${page} of ${Math.ceil(zoneHalls.length / rowsPerPage)}</span>
+    <button class="btn btn-primary ${page === Math.ceil(zoneHalls.length / rowsPerPage) ? 'disabled' : ''}" onclick="changePage(${page + 1})">Next</button>
+</div>
+
+
+        </div>
+        <div class="modal-footer">
+            <button type="button" class="btn btn-warning custom-close-button" data-dismiss="modal">Close</button>
+            <div class="btn-group" role="group" aria-label="Export Buttons">
+                <button type="button" class="btn btn-primary btn-export" id="export-excel">Excel</button>
+                <button type="button" class="btn btn-primary btn-export" id="export-csv">CSV</button>
+                <button type="button" class="btn btn-primary btn-export" id="export-pdf">PDF</button>
+            </div>
+        </div>`;
+
+				document.getElementById('zone-details-content').innerHTML = modalContent;
+
+				$('#DetailsModal').modal('show');
+			}
+
+			function changePage(page) {
+				currentPage = page;
+				renderTable(currentPage);
+			}
+
+			// Expose changePage function to global scope
+			window.changePage = changePage;
+
+			renderTable(currentPage);
+
+			// Remove existing event listeners to prevent multiple triggers
+			$(document).off('click', '#export-excel');
+			$(document).off('click', '#export-csv');
+			$(document).off('click', '#export-pdf');
+
+			// Use jQuery to attach event handlers to dynamically added elements
+			$(document).on('click', '#export-excel', function () { exportToExcel('Zonetable'); });
+			$(document).on('click', '#export-csv', function () { exportToCSV('Zonetable'); });
+			$(document).on('click', '#export-pdf', function () { exportToPDF('Zonetable'); });
+
+			// Attach click event handler to the close button
+			$(document).on('click', '.custom-close-button', function () {
+				$('#DetailsModal').modal('hide');
+			});
+
+			function exportToExcel(tableId) {
+				const wb = XLSX.utils.table_to_book(document.getElementById(tableId), { sheet: "Zone Details" });
+				XLSX.writeFile(wb, 'Zone_Details.xlsx');
+			}
+
+			function exportToCSV(tableId) {
+				const wb = XLSX.utils.table_to_book(document.getElementById(tableId), { sheet: "Zone Details" });
+				XLSX.writeFile(wb, 'Zone_Details.csv', { bookType: 'csv' });
+			}
+
+			function exportToPDF(tableId) {
+				const { jsPDF } = window.jspdf;
+				const doc = new jsPDF();
+				doc.autoTable({ html: '#' + tableId });
+				doc.save('Zone_Details.pdf');
+			}
+		}
+
+
+
+
+		document.addEventListener('DOMContentLoaded', function () {
+			fetchData();
+		});
+
+		function fetchData() {
+			fetch('/communityhall/user/api/getZonehalls')  // Replace with your actual API endpoint
+				.then(response => response.json())
+				.then(data => {
+					populateDropdowns(data);
+				})
+				.catch(error => console.error('Error fetching data:', error));
+		}
+
+		function populateDropdowns(data) {
+			const zoneDropdown = document.getElementById('zone1');
+			const divisionDropdown = document.getElementById('division1');
+			const hallDropdown = document.getElementById('hall1');
+
+			const zones = new Set();
+			const divisionsByZone = {};
+			const hallsByDivision = {};
+
+			data.forEach(item => {
+				zones.add(item.zone);
+				if (!divisionsByZone[item.zone]) {
+					divisionsByZone[item.zone] = [];
+				}
+				if (!divisionsByZone[item.zone].includes(item.division)) {
+					divisionsByZone[item.zone].push(item.division);
+				}
+				if (!hallsByDivision[item.division]) {
+					hallsByDivision[item.division] = [];
+				}
+				hallsByDivision[item.division].push({ hallName: item.hall_name, hallId: item.hall_id });
+			});
+
+			// Populate zones
+			zones.forEach(zone => {
+				const option = document.createElement('option');
+				option.value = zone;
+				option.textContent = zone;
+				zoneDropdown.appendChild(option);
+			});
+
+			// Populate divisions for the first selected zone
+			const selectedZone = zoneDropdown.value;
+			populateDivisions(selectedZone, divisionsByZone);
+
+			// Store divisions and halls by zone and division for later use
+			zoneDropdown.dataset.divisionsByZone = JSON.stringify(divisionsByZone);
+			divisionDropdown.dataset.hallsByDivision = JSON.stringify(hallsByDivision);
+		}
+
+		function populateDivisions(zone, divisionsByZone) {
+			const divisionDropdown = document.getElementById('division1');
+			divisionDropdown.innerHTML = ''; // Clear existing options
+
+			// Add 'All' option
+			const allOption = document.createElement('option');
+			allOption.value = 'ALL';
+			allOption.textContent = '--Select Div--';
+			divisionDropdown.appendChild(allOption);
+
+			if (zone === 'ALL') {
+				// Get all unique divisions across all zones
+				const allDivisions = new Set();
+				for (const zone in divisionsByZone) {
+					divisionsByZone[zone].forEach(division => allDivisions.add(division));
+				}
+				allDivisions.forEach(division => {
+					const option = document.createElement('option');
+					option.value = division;
+					option.textContent = division;
+					divisionDropdown.appendChild(option);
+				});
+			} else {
+				// Populate divisions for the selected zone
+				divisionsByZone[zone].forEach(division => {
+					const option = document.createElement('option');
+					option.value = division;
+					option.textContent = division;
+					divisionDropdown.appendChild(option);
+				});
+			}
+		}
+
+		function filterDivisions() {
+			const zoneDropdown = document.getElementById('zone1');
+			const selectedZone = zoneDropdown.value;
+			const divisionsByZone = JSON.parse(zoneDropdown.dataset.divisionsByZone);
+			if (selectedZone === 'ALL') {
+				document.getElementById('divisionContainer').classList.add('hidden');
+			} else {
+				document.getElementById('divisionContainer').classList.remove('hidden');
+			}
+			populateDivisions(selectedZone, divisionsByZone);
+			filterHalls(); // Reset and hide the hall dropdown when the zone changes
+		}
+
+		function filterHalls() {
+			const divisionDropdown = document.getElementById('division1');
+			const selectedDivision = divisionDropdown.value;
+			const hallDropdown = document.getElementById('hall1');
+			const hallsByDivision = JSON.parse(divisionDropdown.dataset.hallsByDivision);
+
+			hallDropdown.innerHTML = ''; // Clear existing options
+
+			const allOption = document.createElement('option');
+			allOption.value = '1000';
+			allOption.textContent = '--Select Hall--';
+			hallDropdown.appendChild(allOption);
+
+			if (selectedDivision === 'ALL') {
+				document.getElementById('hallContainer').classList.add('hidden');
+			} else {
+				document.getElementById('hallContainer').classList.remove('hidden');
+				// Populate halls for the selected division
+				hallsByDivision[selectedDivision].forEach(hall => {
+					const option = document.createElement('option');
+					option.value = hall.hallId; // Pass hall ID as value
+					option.textContent = hall.hallName;
+					hallDropdown.appendChild(option);
+				});
+			}
+		}
+
+
+
+		// Function to reset date fields
+		function resetDate() {
+
+			window.location.href = "/communityhall/sm/dashboard";
+
+		}
+
+
+
+		function animateAmount(elementId, targetAmount, duration) {
+			const element = document.getElementById(elementId);
+			let startTime = null;
+			const startAmount = 0;
+
+			function updateAmount(currentTime) {
+				if (!startTime) startTime = currentTime;
+				const progress = Math.min((currentTime - startTime) / duration, 1);
+				const animatedAmount = Math.floor(progress * targetAmount);
+
+				if (elementId === 'totalAmount' || elementId === 'netAmount' || elementId === 'totalRefundedAmount' || elementId === 'gstAmount') {
+					element.innerText = "Rs. " + animatedAmount; // Format with commas and prepend "Rs."
+				} else {
+					element.innerText = animatedAmount; // Format with commas
+				}
+
+				if (progress < 1) {
+					requestAnimationFrame(updateAmount);
+				} else {
+					if (elementId === 'totalAmount' || elementId === 'netAmount' || elementId === 'totalRefundedAmount' || elementId === 'gstAmount') {
+						element.innerText = "Rs. " + targetAmount; // Ensure it ends exactly at targetAmount
+					} else {
+						element.innerText = targetAmount; // Ensure it ends exactly at targetAmount
+					}
+				}
+			}
+
+			requestAnimationFrame(updateAmount);
+		}
+
+
+
+
+		//Function to generate random dark color and ensure uniqueness
+		function getRandomDarkColor(existingColors) {
+			var letters = '0123456789ABCDEF';
+			var color = '#';
+			do {
+				color = '#';
+				for (var i = 0; i < 6; i++) {
+					color += letters[Math.floor(Math.random() * 16)];
+				}
+			} while (existingColors.has(color) || !isDarkColor(color));
+
+			existingColors.add(color);
+			return color;
+		}
+
+		// Helper function to check if the color is dark
+		function isDarkColor(color) {
+			// Convert hex color to RGB
+			var r = parseInt(color.slice(1, 3), 16);
+			var g = parseInt(color.slice(3, 5), 16);
+			var b = parseInt(color.slice(5, 7), 16);
+
+			// Calculate brightness using the formula for luminance
+			var brightness = (r * 0.299 + g * 0.587 + b * 0.114) / 255;
+
+			// Return true if the color is dark (brightness < 0.5)
+			return brightness < 0.5;
+		}
+
+
+		//03/
+
+		function fetchHallDetails(hall_id) {
+			$.ajax({
+				url: '/communityhall/admin/api/byhallid',
+				type: 'GET',
+				data: { hallId: hall_id },
+				dataType: 'json',
+				success: function (response) {
+
+					displayHallDetails(response);
+					// console.log(response);
+				},
+				error: function (error) {
+					console.error("Error fetching hall details:", error);
+				}
+			});
+		}
+		function displayHallDetails(response) {
+			const rowsPerPage = 10; // Number of rows per page
+			let currentPage = 1;
+
+			function renderTable(page) {
+				const startIndex = (page - 1) * rowsPerPage;
+				const endIndex = startIndex + rowsPerPage;
+				const paginatedData = response.slice(startIndex, endIndex);
+
+				let hallDetailsContent = `
+            <div class="modal-header">
+                <h5 class="modal-title"><b>Hall Booking Details</b></h5>
+                <button type="button" class="close custom-close-button" data-dismiss="modal" aria-label="Close">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+            </div>
+            <div class="modal-body">
+                <div class="table-responsive">
+                    <table id="halldetails" class="table table-striped table-bordered table-hover">
+                         <thead class="thead-dark">
+	                            <tr>
+	                                <th>Booking Date</th>
+	                                <th>User Name</th>
+	                                <th>User Type</th>
+	                                <th>Reason</th>
+	                                <th>Event Date</th>
+	                                <th>No of Days</th>
+	                                <th>Status</th>
+	                                <th>Amount Paid</th>
+	                                <th>Amount Refunded</th>
+	                                <th>Net Revenue</th>
+
+	                            </tr>
+	                        </thead>
+                        <tbody>`;
+
+				paginatedData.forEach(booking => {
+					hallDetailsContent += `
+                <tr>
+                     <td>${booking.booking_date}</td>
+	                    <td>${booking.name}</td>
+	                    <td>${booking.usertype}</td>
+	                    <td>${booking.reason}</td>
+	                    <td>${booking.start_date} to ${booking.end_date}</td>
+	                    <td>${booking.no_of_days}</td>
+	                    <td>${booking.booking_status}</td>
+	                    <td>Rs.${booking.amount_received.toFixed(2)}</td>
+	                    <td>Rs.${booking.amount_refunded}</td>
+	                    <td>Rs.${booking.balance_amount}</td>
+                </tr>`;
+				});
+
+				hallDetailsContent += `
+                        </tbody>
+                    </table>
+                </div>
+             <div class="pagination">
+    <button class="btn btn-primary ${page === 1 ? 'disabled' : ''}" onclick="changePage(${page - 1})">Previous</button>
+    <span class="page-info">Page ${page} of ${Math.ceil(response.length / rowsPerPage)}</span>
+    <button class="btn btn-primary ${page === Math.ceil(response.length / rowsPerPage) ? 'disabled' : ''}" onclick="changePage(${page + 1})">Next</button>
+</div>
+
+            </div>
+            <div class="modal-footer">
+            <button type="button" class="btn btn-warning custom-close-button" data-dismiss="modal">Close</button>
+            <div class="btn-group" role="group" aria-label="Export Buttons">
+                <button type="button" class="btn btn-primary btn-export" id="export-excel">Excel</button>
+                <button type="button" class="btn btn-primary btn-export" id="export-csv">CSV</button>
+                <button type="button" class="btn btn-primary btn-export" id="export-pdf">PDF</button>
+            </div>
+            </div>`;
+
+				document.getElementById('hall-details-content').innerHTML = hallDetailsContent;
+				$('#HallDetailsModal').modal('show');
+			}
+
+			function changePage(page) {
+				currentPage = page;
+				renderTable(currentPage);
+			}
+
+			// Expose changePage function to global scope
+			window.changePage = changePage;
+
+			renderTable(currentPage);
+
+			// Remove existing event listeners to prevent multiple triggers
+			$(document).off('click', '#export-excel');
+			$(document).off('click', '#export-csv');
+			$(document).off('click', '#export-pdf');
+
+			// Use jQuery to attach event handlers to dynamically added elements
+			$(document).on('click', '#export-excel', function () { exportToExcel('halldetails'); });
+			$(document).on('click', '#export-csv', function () { exportToCSV('halldetails'); });
+			$(document).on('click', '#export-pdf', function () { exportToPDF('halldetails'); });
+
+			function exportToExcel(tableId) {
+				const wb = XLSX.utils.table_to_book(document.getElementById(tableId), { sheet: "Halldetails" });
+				XLSX.writeFile(wb, 'Halldetails.xlsx');
+			}
+
+			function exportToCSV(tableId) {
+				const wb = XLSX.utils.table_to_book(document.getElementById(tableId), { sheet: "Halldetails" });
+				XLSX.writeFile(wb, 'Halldetails.csv', { bookType: 'csv' });
+			}
+
+			function exportToPDF(tableId) {
+				const { jsPDF } = window.jspdf;
+				const doc = new jsPDF();
+				doc.autoTable({ html: '#' + tableId });
+				doc.save('Halldetails.pdf');
+			}
+
+		}
+
+
+		$(document).ready(function () {
+			// Attach click event handler to the total bookings links
+			$(document).on('click', '.total-booking', function (event) {
+				event.preventDefault();
+				$('#DetailsModal').modal('hide');
+				let hallId = $(this).data('hallid');
+				fetchHallDetails(hallId);
+			});
+
+			// Close button event handler
+			$(document).on('click', '.custom-close-button', function () {
+				$('#DetailsModal').modal('hide');
+				$('#HallDetailsModal').modal('hide');
+			});
+		});
+
+
+
+		document.addEventListener('DOMContentLoaded', function () {
+			const fromDate = document.getElementById('fromDate');
+			const toDate = document.getElementById('toDate');
+
+			// Initially disable the "To Date" field
+			toDate.disabled = true;
+
+			fromDate.addEventListener('change', function () {
+				if (fromDate.value) {
+					// Enable the "To Date" field when "From Date" is selected
+					toDate.disabled = false;
+
+					// Get the selected "From Date"
+					const selectedFromDate = new Date(fromDate.value);
+
+					// Set the "To Date" minimum to the same day as the "From Date"
+					const sameDayString = selectedFromDate.toISOString().split('T')[0];
+					toDate.setAttribute('min', sameDayString);
+
+					// Set the "To Date" value to the next day by default
+					toDate.value = sameDayString;
+
+				} else {
+					// Disable the "To Date" field if "From Date" is cleared
+					toDate.disabled = true;
+					toDate.value = ''; // Clear the "To Date" input
+				}
+			});
+		});
+
+	</script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/src/main/resources/templates/sm/reports.html b/src/main/resources/templates/sm/reports.html
new file mode 100644
index 00000000..2639cb9e
--- /dev/null
+++ b/src/main/resources/templates/sm/reports.html
@@ -0,0 +1,2417 @@
+<!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 */
+    }
+
+    .table {
+        width: 100% !important;
+    }
+
+    .hidden {
+        display: none;
+    }
+
+    .modal-fullscreen-custom {
+        max-width: 98% !important;
+        width: 98%;
+        margin: 0 auto;
+    }
+
+    /* Ensure second modal is on top of the first modal */
+    .modal-backdrop.show:nth-of-type(2) {
+        z-index: 1055 !important;
+        /* slightly above the first modal */
+    }
+
+    #showBookingDetails.modal {
+        z-index: 1060 !important;
+        /* higher than .modal-backdrop */
+    }
+</style>
+
+<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">
+                    <form id="myForm" th:action="@{/communityhall/sm/getReport}" onsubmit="return validateme()"
+                        method="post">
+                        <div class="block-header bg-primary text-white">
+                            <h3 class="block-title">Community Hall Reports</h3>
+                        </div>
+                        <div class="block-content">
+                            <div class="row">
+                                <div class="col-sm-3 mb-2">
+                                    <label class="form-label" for="fromdate">From:<span
+                                            class="text-danger">*</span></label> <input type="date"
+                                        th:value="${fromdate}" class="form-control" name="FromDate" id="fromdate"
+                                        placeholder="From Date" required="required" data-date-format="yyyy-mm-dd" />
+                                </div>
+                                <div class="col-sm-3 mb-2">
+                                    <label class="form-label" for="todate">To:<span class="text-danger">*</span></label>
+                                    <input type="date" th:value="${todate}" class="form-control" name="ToDate"
+                                        id="todate" placeholder="To Date" required="required"
+                                        data-date-format="yyyy-mm-dd" />
+                                </div>
+                                <div class="col-sm-3 mb-2">
+                                    <label class="form-label" for="request">Get Info:<span
+                                            class="text-danger">*</span></label>
+                                    <select type="text" class="form-control text-center" id="request" name="request"
+                                        onchange="myRequest()" required>
+                                        <option value="">Select</option>
+                                        <option value="1" th:selected="${request=='1'}">Users</option>
+                                        <option value="2" th:selected="${request=='2'}">Booking Details</option>
+                                        <option value="3" th:selected="${request=='3'}">Payment Info</option>
+                                        <option value="4" th:selected="${request=='4'}">Users Booking List</option>
+                                        <option value="5" th:selected="${request=='5'}">Hall Booking List</option>
+                                        <option value="6" th:selected="${request=='6'}">Refund Details</option>
+                                        <option value="7" th:selected="${request=='7'}">Total Count</option>
+                                        <option value="8" th:selected="${request=='8'}">Extra Payments Info</option>
+                                        <option value="9" th:selected="${request=='9'}">Counter Details</option>
+                                    </select>
+                                </div>
+                                <!-- UsersDropdown2 -->
+                                <div class="col-sm-3 mb-2" id="userDropdown2" style="display: none;">
+                                    <label class="form-label" for="usertype">User Type: </label>
+                                    <select class="form-control text-center" id="usertype" name="usertype"
+                                        th:value="${usertype}">
+                                        <option value="">Select User Type</option>
+                                        <option value="PENSIONER" th:selected="${usertype == 'PENSIONER'}">PENSIONER
+                                        </option>
+                                        <option value="GCC_EMPLOYEE" th:selected="${usertype == 'GCC_EMPLOYEE'}">GCC
+                                            EMPLOYEE
+                                        </option>
+                                        <option value="COUNCILLOR" th:selected="${usertype == 'COUNCILLOR'}">COUNCILLOR
+                                        </option>
+                                        <option value="PUBLIC" th:selected="${usertype == 'PUBLIC'}">PUBLIC</option>
+                                        <!-- Add more options as needed -->
+                                    </select>
+                                </div>
+                                <!-- UsersDropdown1 -->
+                                <div class="col-sm-3 mb-2" id="userDropdown1" style="display: none;">
+                                    <label class="form-label" for="userstatus">User Status: </label>
+                                    <select class="form-control text-center" id="userstatus" name="userstatus"
+                                        th:value="${userstatus}">
+                                        <option value="">Select a User Status</option>
+                                        <option value="PENDING" th:selected="${userstatus == 'PENDING'}">PENDING
+                                        </option>
+                                        <option value="APPROVED" th:selected="${userstatus == 'APPROVED'}">APPROVED
+                                        </option>
+                                        <option value="REJECTED" th:selected="${userstatus == 'REJECTED'}">REJECTED
+                                        </option>
+                                        <!-- Add more options as needed -->
+                                    </select>
+                                </div>
+
+
+                                <!-- bookingDetailsDropdown1 -->
+                                <div class="col-sm-3 mb-2" id="bookingDetailsDropdown1" style="display: none;">
+                                    <label class="form-label" for="bookingId">Booking Id: </label>
+                                    <input type="number" class="form-control" id="bookingId" name="bookingId"
+                                        th:value="${bookingId}" placeholder="BookingId">
+                                </div>
+
+                                <div class="col-sm-3 mb-2" id="zoneDropdown" style="display: none;">
+                                    <label class="form-label" for="zone1">Select Zone: </label>
+                                    <select class="form-select custom-select" name="zone1" id="zone1">
+                                        <option value="ALL">--Select Zone--</option>
+                                        <option th:each="zone : ${zones}" th:value="${zone}" th:text="${zone}"
+                                            th:selected="${zone == selectedZone}"></option>
+
+
+                                    </select>
+                                </div>
+
+                                <div class="col-sm-3 mb-2 hidden" id="divisionContainer" style="display: none;">
+                                    <label class="form-label" for="division1">Select division: </label>
+                                    <select class="form-select custom-select" name="division1" id="division1">
+                                        <option value="ALL">--Select division--</option>
+                                        <option th:each="division : ${divisions}" th:value="${division}"
+                                            th:text="${division}" th:selected="${division == selectedDivision}">
+                                        </option>
+
+
+                                    </select>
+                                </div>
+
+                                <div class="col-sm-3 mb-2 hidden" id="hallContainer" style="display: none;">
+                                    <label class="form-label" for="hall1">Select Hall: </label>
+                                    <select class="form-select custom-select" name="hall1" id="hall1">
+                                        <option value="1000">--Select Hall--</option>
+                                        <option th:each="hall : ${halls}" th:value="${hall.id}" th:text="${hall.name}"
+                                            th:selected="${hall.id == selectedHall}"></option>
+
+
+                                    </select>
+                                </div>
+
+
+                                <!-- bookingDetailsDropdown 3-->
+                                <div class="col-sm-3 mb-2" id="bookingDetailsDropdown3" style="display: none;">
+                                    <label class="form-label" for="filterby">Filter by:</label>
+                                    <select class="form-control text-center" id="filterby" name="filterby"
+                                        th:value="${filterby}">
+                                        <option value="">Select Filterby</option>
+                                        <option value="1" th:selected="${filterby == '1'}">Booking Date</option>
+                                        <option value="2" th:selected="${filterby == '2'}">Event Date</option>
+                                        <!-- Add more options as needed -->
+                                    </select>
+                                </div>
+
+                                <!-- bookingDetailsDropdown2 -->
+                                <div class="col-sm-3 mb-2" id="bookingDetailsDropdown2" style="display: none;">
+                                    <label class="form-label" for="bookingStatus">Booking Status: </label>
+                                    <select class="form-control text-center" id="bookingStatus" name="bookingStatus"
+                                        th:value="${bookingStatus}">
+                                        <option value="">Select Booking Status</option>
+                                        <option value="PENDING" th:selected="${bookingStatus == 'PENDING'}">PENDING
+                                        </option>
+                                        <option value="APPROVED" th:selected="${bookingStatus == 'APPROVED'}">APPROVED
+                                        </option>
+                                        <option value="REJECTED" th:selected="${bookingStatus == 'REJECTED'}">REJECTED
+                                        </option>
+                                        <option value="CANCELED" th:selected="${bookingStatus == 'CANCELED'}">CANCELLED
+                                        </option>
+                                        <option value="COMPLETED" th:selected="${bookingStatus == 'COMPLETED'}">
+                                            COMPLETED
+                                        </option>
+                                        <option value="PAYMENT_FAILURE"
+                                            th:selected="${bookingStatus == 'PAYMENT_FAILURE'}">PAYMENT_FAILURE
+                                        </option>
+                                        <option value="GCC_BLOCKED" th:selected="${bookingStatus == 'GCC_BLOCKED'}">
+                                            GCC_BLOCKED
+                                        </option>
+                                        <option value="REFUNDED" th:selected="${bookingStatus == 'REFUNDED'}">REFUNDED
+                                        </option>
+                                        <option value="WAITING_FOR_NOC"
+                                            th:selected="${bookingStatus == 'WAITING_FOR_NOC'}">
+                                            WAITING FOR NOC
+                                        </option>
+                                        <option value="WAITING_FOR_NOC_APPROVAL"
+                                            th:selected="${bookingStatus == 'WAITING_FOR_NOC_APPROVAL'}">WAITING FOR NOC
+                                            APPROVAL
+                                        </option>
+                                    </select>
+                                </div>
+
+                                <!--Payment Dropdown -->
+                                <div class="col-sm-3" id="paymentInfoDropdown1" style="display: none;">
+                                    <label class="form-label" for="paymentStatus">Payment Status:</label>
+                                    <select class="form-control text-center" id="paymentStatus" name="paymentStatus"
+                                        th:value="${paymentStatus}">
+                                        <option value="">Select Payment Status</option>
+                                        <option value="SUCCESS" th:selected="${paymentStatus == 'SUCCESS'}">SUCCESS
+                                        </option>
+                                        <option value="NOT COMPLETED" th:selected="${paymentStatus == 'NOT COMPLETED'}">
+                                            NOT
+                                            COMPLETED
+                                        </option>
+                                    </select>
+                                </div>
+
+                                <div class="col-sm-3 mb-2" id="refundDetailsDropdown" style="display: none;">
+                                    <label class="form-label" for="refundStatus">Refund Status: </label>
+                                    <select class="form-control text-center" id="refundStatus" name="refundStatus"
+                                        th:value="${refundStatus}">
+                                        <option value="">Select Refund Status</option>
+                                        <option value="WAITING" th:selected="${refundStatus == 'WAITING'}">WAITING
+                                        </option>
+                                        <option value="APPROVED" th:selected="${refundStatus == 'APPROVED'}">APPROVED
+                                        </option>
+                                        <option value="INITIATED" th:selected="${refundStatus == 'INITIATED'}">INITIATED
+                                        </option>
+                                        <option value="REJECTED" th:selected="${refundStatus == 'REJECTED'}">REJECTED
+                                        </option>
+                                        <option value="COMPLETED" th:selected="${refundStatus == 'COMPLETED'}">COMPLETED
+                                        </option>
+                                        <option value="NA" th:selected="${refundStatus == 'NA'}">NA
+                                        </option>
+                                        <option value="CLOSED" th:selected="${refundStatus == 'CLOSED'}">CLOSED
+                                        </option>
+                                        <option value="FAILURE" th:selected="${refundStatus == 'FAILURE'}">FAILURE
+                                        </option>
+                                        <!-- Add more options as needed -->
+                                    </select>
+                                </div>
+
+                                <div class="col-sm-3 mb-2" id="bookingcountbasedonDropdown" style="display: none;">
+                                    <label class="form-label" for="basedon">Based On: </label>
+                                    <select class="form-control text-center" id="basedon" name="basedon"
+                                        th:value="${basedon}">
+                                        <option value="">Select</option>
+                                        <option value="zone" th:selected="${basedon == 'zone'}">Zone
+                                        </option>
+                                        <option value="division" th:selected="${basedon == 'division'}">Division
+                                        </option>
+                                    </select>
+                                    <span id="basedonError" class="text-danger"></span>
+                                </div>
+
+                                <div class="col-sm-3 mb-2" id="counterreportDropdown" style="display: none;">
+                                    <label class="form-label" for="reporttype">Report Type: <span
+                                            class="text-danger">*</span></label>
+                                    <select class="form-control text-center" id="reporttype" name="reporttype"
+                                        th:value="${reporttype}">
+                                        <option value="">Select</option>
+                                        <option value="abstract" th:selected="${reporttype == 'abstract'}">Abstract
+                                        </option>
+                                        <option value="detailed" th:selected="${reporttype == 'detailed'}">Detailed
+                                            Report
+                                        </option>
+                                    </select>
+                                    <span id="reportTypeError" class="text-danger"></span>
+                                </div>
+
+
+                                <div class="col-sm-3">
+                                    <br>
+                                    <button type="submit" class="btn btn-sm btn-primary mt-2" name="submit"
+                                        id="submit">Submit
+                                    </button>
+                                    <button class="btn btn-danger mt-2" onclick="resetDate()" name="reset"
+                                        type="reset">Reset
+                                    </button>
+                                </div>
+                            </div>
+
+                        </div>
+                    </form>
+                </div>
+                <div class="table-responsive" id="usertable" th:if="${request}==1">
+                    <table id="requestTable1" class="table table-striped table-bordered table-hover dataTable"
+                        role="grid" width="99.5%">
+                        <thead class="thead-dark">
+                            <tr role="row">
+                                <th>S.No</th>
+                                <th width="130px">User Id</th>
+                                <th>Name</th>
+                                <th>Mobile</th>
+                                <th>Address</th>
+                                <th>UserType</th>
+                                <th>UserStatus</th>
+
+                            </tr>
+                        </thead>
+                        <tr th:each="user, iterStat : ${users}">
+                            <td th:text="${iterStat.count}">0</td>
+                            <td th:text="${user.userId}"></td>
+                            <td th:text="${user.name}"></td>
+                            <td th:text="${user.mobileNo}"></td>
+                            <td
+                                th:text="${user.DoorNo + ', ' + user.Street  + ', ' + user.Area + ', ' + user.Location + ', ' + user.PinCode}">
+                            </td>
+                            <td th:text="${user.usertype}"></td>
+                            <td th:text="${user.userstatus}"></td>
+                        </tr>
+
+                    </table>
+                </div>
+
+
+                <div class="table-responsive" id="Bookingtable" th:if="${request}==2">
+                    <table id="requestTable2" class="table table-striped table-bordered table-hover dataTable"
+                        role="grid" width="99.5%">
+                        <thead class="thead-dark">
+                            <tr role="row">
+                                <th>S.No</th>
+                                <th>Zone</th>
+                                <th>Division</th>
+                                <th>Booking Id</th>
+                                <th>Booking Date</th>
+                                <th>Hall Name</th>
+                                <th>User Name</th>
+                                <th>Mobile</th>
+                                <th>Address</th>
+                                <th>User type</th>
+                                <th>Reason</th>
+                                <th>Startdate_Enddate</th>
+                                <th>Deposit Amount</th>
+                                <th>Hall Amount</th>
+                                <th>GST</th>
+                                <th>Amount Paid</th>
+                                <th>Booking Status</th>
+                                <th>Transaction Id</th>
+                                <th>TPSL Id</th>
+                                <th>Action</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr th:each="booking, iterStat : ${bookings}">
+                                <td th:text="${iterStat.count}">0</td>
+                                <td th:text="${booking[15]}"></td>
+                                <td th:text="${booking[16]}"></td>
+                                <td th:text="${booking[0]}"></td>
+                                <td th:text="${booking[1]}"></td>
+                                <td th:text="${booking[2]}"></td>
+                                <td th:text="${booking[3]}"></td>
+                                <td th:text="${booking[4]}"></td>
+                                <td th:text="${booking[5]}"></td>
+                                <td th:text="${booking[6]}"></td>
+                                <td th:text="${booking[7]}"></td>
+                                <td th:text="${booking[8] + ' to ' + booking[9]}"></td>
+                                <td th:text="${booking[10]}"></td>
+                                <td th:text="${booking[11]}"></td>
+                                <td th:text="${booking[12]}"></td>
+                                <td th:text="${(T(java.lang.Math).round(booking[13] * 100.0) / 100.0)}"></td>
+                                <!--<td th:text="${booking[10]}"></td>-->
+                                <td th:text="${booking[14]}"></td>
+                                <td th:text="${booking[17]}"></td>
+                                <td th:text="${booking[18]}"></td>
+                                <td>
+                                    <p>
+                                        <span class="badge bg-warning" style="cursor: pointer;"
+                                            th:onclick="viewDetails([[${booking[0]}]])">View</span>
+                                    </p>
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+
+
+                <div class="table-responsive" id="Paymenttable" th:if="${request}==3">
+                    <table id="requestTable3" class="table table-striped table-bordered table-hover dataTable"
+                        role="grid" width="99.5%">
+                        <thead class="thead-dark">
+                            <tr role="row">
+                                <th>S.No</th>
+                                <th>Booking Id</th>
+                                <th>Booking Date</th>
+                                <th>Hall Name</th>
+                                <th>User Name</th>
+                                <th>User type</th>
+                                <th>Transaction ID</th>
+                                <th>Payment Type</th>
+                                <th>Deposit Amount</th>
+                                <th>Hall Amount</th>
+                                <th>GST</th>
+                                <th>Amount received</th>
+                                <th>Reason</th>
+                                <th width="1000px">Start date & end Date</th>
+                                <th>status</th>
+                            </tr>
+                        </thead>
+                        <tr th:each="payment, iterStat : ${paymentLists}">
+                            <td th:text="${iterStat.count}">0</td>
+                            <td th:text="${payment[0]}"></td>
+                            <td th:text="${payment[1]}"></td>
+                            <td th:text="${payment[2]}"></td>
+                            <td th:text="${payment[3]}"></td>
+                            <td th:text="${payment[4]}"></td>
+                            <td th:text="${payment[5]}"></td>
+                            <td th:text="${payment[6]}"></td>
+                            <td th:text="${payment[7]}"></td>
+                            <td th:text="${payment[8]}"></td>
+                            <td th:text="${payment[9]}"></td>
+                            <td th:text="${payment[10]}"></td>
+                            <td th:text="${payment[11]}"></td>
+                            <td th:text="${payment[12] + ' to ' + payment[13]}" width="1000px"></td>
+                            <td th:text="${payment[14]}"></td>
+                        </tr>
+
+                    </table>
+                </div>
+
+                <div class="table-responsive" id="userBookingtable" th:if="${request}==4">
+                    <table id="requestTable4" class="table table-striped table-bordered table-hover dataTable"
+                        role="grid" width="99.5%">
+                        <thead class="thead-dark">
+                            <tr role="row">
+
+                                <th>S.No</th>
+                                <th width="110px">User Id</th>
+                                <th>Name</th>
+                                <th>Mobile</th>
+                                <th>Address</th>
+                                <th>Total Bookings</th>
+                            </tr>
+                        </thead>
+                        <tr th:each="userbookingList, iterStat : ${userbookingLists}">
+
+                            <td th:text="${iterStat.count}">0</td>
+                            <td th:text="${userbookingList[0]}"></td>
+                            <td th:text="${userbookingList[1]}"></td>
+                            <td th:text="${userbookingList[2]}"></td>
+                            <td th:text="${userbookingList[3]}"></td>
+                            <td th:text="${userbookingList[4]}"
+                                th:onclick="viewbookingDetails([[${userbookingList[0]}]])" style="cursor:pointer;"></td>
+                        </tr>
+
+                    </table>
+                </div>
+
+                <div class="table-responsive" id="hallBookingtable" th:if="${request}==5">
+                    <table id="requestTable5" class="table table-striped table-bordered table-hover dataTable"
+                        role="grid" width="99.5%">
+                        <thead class="thead-dark">
+                            <tr role="row">
+                                <th>S.No</th>
+                                <th>Hall Id</th>
+                                <th>Hall Name</th>
+                                <th>Zone/Division</th>
+                                <th>Caretaker Name</th>
+                                <th>Caretaker Mobile</th>
+                                <th>Total Bookings</th>
+                                <th>Deposit Amount</th>
+                                <th>Hall Amount</th>
+                                <th>GST</th>
+                                <th>Amount Received</th>
+                                <th>Amount Refund</th>
+                                <th>Net Revenue</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr th:each="hallbookingList, iterStat : ${hallbookingLists}">
+                                <td th:text="${iterStat.count}">0</td>
+                                <td th:text="${hallbookingList[11]}"></td>
+                                <td th:text="${hallbookingList[0]}"></td>
+                                <td th:text="${hallbookingList[3]}"></td> <!-- Combined Zone/Division -->
+                                <td th:text="${hallbookingList[1]}"></td>
+                                <td th:text="${hallbookingList[2]}"></td>
+                                <td th:text="${hallbookingList[4]}"></td>
+                                <td th:text="${(T(java.lang.Math).round(hallbookingList[5] * 100.0) / 100.0)}"></td>
+                                <td th:text="${(T(java.lang.Math).round(hallbookingList[6] * 100.0) / 100.0)}"></td>
+                                <td th:text="${(T(java.lang.Math).round(hallbookingList[7] * 100.0) / 100.0)}"></td>
+                                <td th:text="${(T(java.lang.Math).round(hallbookingList[8] * 100.0) / 100.0)}"></td>
+                                <td th:text="${(T(java.lang.Math).round(hallbookingList[9] * 100.0) / 100.0)}"></td>
+                                <td th:text="${(T(java.lang.Math).round(hallbookingList[10] * 100.0) / 100.0)}"></td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+
+                <div class="table-responsive" id="BookingSettlementtable" th:if="${request}==6">
+                    <table id="requestTable6" class="table table-striped table-bordered table-hover dataTable"
+                        role="grid" width="99.5%">
+                        <thead class="thead-dark">
+                            <tr role="row">
+                                <th>S.No</th>
+                                <th>Name</th>
+                                <th>Mobile</th>
+                                <th>Booked Hall</th>
+                                <th>Reason</th>
+                                <th>Booking Date</th>
+                                <th>Event Date</th>
+                                <th>No of Days</th>
+                                <th>User type</th>
+                                <th>Refund Status</th>
+                                <th>Booking Status</th>
+                            </tr>
+                        </thead>
+                        <tr th:each="settlementlist, iterStat : ${bookingSettlementList}">
+
+                            <td th:text="${iterStat.count}">0</td>
+                            <td th:text="${settlementlist.users.name}"></td>
+                            <td th:text="${settlementlist.users.mobileNo}"></td>
+                            <td th:text="${settlementlist.hallDetails.hallName}"></td>
+                            <td th:text="${settlementlist.reason}"></td>
+                            <td th:text="${settlementlist.bookingDate}"></td>
+                            <td th:text="${settlementlist.startDate +' to '+ settlementlist.endDate}"></td>
+                            <td th:text="${settlementlist.noOfDays}"></td>
+                            <td th:text="${settlementlist.users.usertype}"></td>
+                            <td th:text="${settlementlist.refundStatus}"></td>
+                            <td th:text="${settlementlist.bookingStatus}"></td>
+                        </tr>
+
+                    </table>
+                </div>
+                <div class="table-responsive" id="totalCounttable" th:if="${request == '7'}">
+                    <table id="requestTable7" class="table table-striped table-bordered table-hover dataTable"
+                        role="grid" width="99.5%">
+                        <thead class="thead-dark">
+                            <tr role="row">
+                                <th>S.No</th>
+                                <th th:text="${basedon == 'zone' ? 'Zone' : 'Division'}"></th>
+                                <th>Bookings Count</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr th:each="data, stat : ${totalcount}">
+                                <td th:text="${stat.index + 1}"></td> <!-- Serial number -->
+                                <td th:text="${data[0]}"></td> <!-- Zone or Division -->
+                                <td th:text="${data[1]}"></td> <!-- Bookings Count -->
+                            </tr>
+                        </tbody>
+                        <tfoot>
+                            <tr>
+                                <th></th>
+                                <td><strong>Total Bookings :</strong></td>
+                                <td th:text="${totalBookings}"></td> <!-- Total bookings -->
+                            </tr>
+                        </tfoot>
+                    </table>
+                </div>
+
+                <div class="table-responsive" id="extraPaymenttable" th:if="${request}==8">
+                    <table id="requestTable8" class="table table-striped table-bordered table-hover dataTable"
+                        role="grid" width="99.5%">
+                        <thead class="thead-dark">
+                            <tr role="row">
+                                <th>S.No</th>
+                                <th>Booking Id</th>
+                                <th>Booking Date</th>
+                                <th>Hall Name</th>
+                                <th>User Name</th>
+                                <th>User type</th>
+                                <th>Transaction ID</th>
+                                <th>Payment Type</th>
+                                <th>Deposit Amount</th>
+                                <th>Hall Amount</th>
+                                <th>GST</th>
+                                <th>Amount received</th>
+                                <th>Reason</th>
+                                <th width="1000px">Start date & end Date</th>
+                                <th>status</th>
+                            </tr>
+                        </thead>
+                        <tr th:each="payment, iterStat : ${extrapaymentLists}">
+                            <td th:text="${iterStat.count}">0</td>
+                            <td th:text="${payment[0]}"></td>
+                            <td th:text="${payment[1]}"></td>
+                            <td th:text="${payment[2]}"></td>
+                            <td th:text="${payment[3]}"></td>
+                            <td th:text="${payment[4]}"></td>
+                            <td th:text="${payment[5]}"></td>
+                            <td th:text="${payment[6]}"></td>
+                            <td th:text="${payment[7]}"></td>
+                            <td th:text="${payment[8]}"></td>
+                            <td th:text="${payment[9]}"></td>
+                            <td th:text="${payment[10]}"></td>
+                            <td th:text="${payment[11]}"></td>
+                            <td th:text="${payment[12] + ' to ' + payment[13]}" width="1000px"></td>
+                            <td th:text="${payment[14]}"></td>
+                        </tr>
+
+                    </table>
+                </div>
+
+                <div class="table-responsive" id="countertable" th:if="${request}==9">
+                    <div th:if="${reporttype == 'abstract'}">
+                        <table id="requestTable9" class="table table-striped table-bordered table-hover dataTable"
+                            role="grid" width="99.5%">
+                            <thead class="thead-dark">
+                                <tr role="row">
+                                    <th>S.No</th>
+                                    <th>Counter ID</th>
+                                    <th>Total Bookings</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <tr th:each="counterdata, iterstat : ${counterBookingList}">
+                                    <td th:text="${iterstat.index + 1}"></td>
+                                    <td th:text="${counterdata[0]}"></td>
+                                    <td>
+                                        <button href="#" th:attr="data-counter-id=${counterdata[0]}"
+                                            data-bs-toggle="modal" data-bs-target="#bookingModal"
+                                            style="background-color: #2a807f; color: white; border: none; padding: 6px 12px; border-radius: 4px;"
+                                            onclick="showCounterTable(this)">
+                                            <span th:text="${counterdata[1]}"></span>
+                                        </button>
+                                    </td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                    <div th:if="${reporttype == 'detailed'}">
+                        <table id="detailedrequestTable"
+                            class="table table-striped table-bordered table-hover dataTable" role="grid" width="99.5%">
+                            <thead class="thead-dark">
+                                <tr role="row">
+                                    <th>S.No</th>
+                                    <th>Booking ID</th>
+                                    <th>Hall Name</th>
+                                    <th>Booking Date</th>
+                                    <th>Start Date</th>
+                                    <th>End Date</th>
+                                    <th>Starting Slot</th>
+                                    <th>Ending Slot</th>
+                                    <th>No.of.Days</th>
+                                    <th>Reason for Booking</th>
+                                    <th>Hall Amount</th>
+                                    <th>Deposit Amount</th>
+                                    <th>GSt</th>
+                                    <th>Amount Received</th>
+                                    <th>Booking Status</th>
+                                    <th>Booking Type</th>
+                                    <th>Counter Id</th>
+                                    <th>View</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <tr th:each="counterdata, iterstat : ${counterBookingList}">
+                                    <td th:text="${iterstat.index + 1}"></td>
+                                    <td th:text="${counterdata[0]}"></td>
+                                    <td th:text="${counterdata[1]}"></td>
+                                    <td th:text="${counterdata[2]}"></td>
+                                    <td th:text="${counterdata[3]}"></td>
+                                    <td th:text="${counterdata[4]}"></td>
+                                    <td th:text="${counterdata[5]}"></td>
+                                    <td th:text="${counterdata[6]}"></td>
+                                    <td th:text="${counterdata[7]}"></td>
+                                    <td th:text="${counterdata[8]}"></td>
+                                    <td th:text="${counterdata[9]}"></td>
+                                    <td th:text="${counterdata[10]}"></td>
+                                    <td th:text="${counterdata[11]}"></td>
+                                    <td th:text="${counterdata[12]}"></td>
+                                    <td th:text="${counterdata[13]}"></td>
+                                    <td th:text="${counterdata[14]}"></td>
+                                    <td th:text="${counterdata[15]}"></td>
+                                    <td>
+                                        <p>
+                                            <span class="badge bg-warning" style="cursor: pointer;"
+                                                th:onclick="viewDetails([[${counterdata[0]}]])">View</span>
+                                        </p>
+                                    </td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+
+            </div>
+
+            <div class="modal fade backdrop" id="showBookingDetails" 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" id="printableContent">
+
+                        <form id="regform" 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" style="margin-right:0px;margin:0;padding:0;">
+                                    <div class="col-md-12 col-lg-12 col-sm-12">
+                                        <div class="card-body">
+                                            <table>
+                                                <tr>
+                                                    <th colspan="10" style="background-color: lightgrey;">
+                                                        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;text-wrap: pretty;"
+                                                        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: lightgrey;">
+                                                        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;text-wrap:pretty;"
+                                                        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;text-wrap: pretty;"
+                                                    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>
+                                                <tr>
+                                                    <th colspan="10" style="background-color: lightgrey;">
+                                                        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 colspan="2" 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 (in Rs):
+                                                    </th>
+                                                    <td colspan="2" 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 colspan="2" 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 (in Rs):
+                                                    </th>
+                                                    <td colspan="2" 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 colspan="2" 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% (in Rs):
+                                                    </th>
+                                                    <td colspan="2" 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 colspan="2" 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 (in Rs):
+                                                    </th>
+                                                    <td colspan="2" 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="2" class="fw-semibold"
+                                                        style="padding: 0.45rem 0.45rem;" id="td_endingSlot"></td>
+                                                    <!--<th style="display:none;padding: 0.45rem 0.45rem;border:none"
+                                                    id="rejectionreasondiv">Rejection
+                                                    Reason:</th>
+                                                <td class="fw-semibold"
+                                                    style="padding: 0.45rem 0.45rem;"
+                                                    id="reasonforrejection"></td>-->
+
+                                                    <th style="padding: 0.45rem 0.45rem;border:none">
+                                                        Booking Status:
+                                                    </th>
+                                                    <td colspan="2" class="fw-semibold"
+                                                        style="padding: 0.45rem 0.45rem;text-wrap: pretty;"
+                                                        id="bookingstatus_td"></td>
+                                                </tr>
+                                                <tr>
+                                                    <th style="display:none;padding: 0.45rem 0.45rem;border:none"
+                                                        id="rejectionreasondiv">Rejection
+                                                        Reason:
+                                                    </th>
+                                                    <td class="fw-semibold"
+                                                        style="padding: 0.45rem 0.45rem;text-wrap: pretty;"
+                                                        id="reasonforrejection"></td>
+                                                </tr>
+                                            </table>
+                                        </div>
+                                    </div>
+                                    <div class="row col-md-12 col-lg-12 col-sm-12">
+                                        <div class="documents" id="documents"></div>
+                                    </div>
+                                    <div class="col-md-12 col-lg-12 col-sm-12 mb-2" id="paymentsdetails"
+                                        style="display:none;    margin-top: -16px;">
+                                        <div class="card-body">
+                                            <table>
+                                                <tr>
+                                                    <th colspan="10" style="background-color: lightgrey;">
+                                                        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 (in Rs):
+                                                </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 col-md-12 col-lg-12 col-sm-12" id="ebdetails"
+                                        style="display:none;margin-left: 0px;">
+                                        <div class="card-body">
+                                            <table>
+                                                <tr>
+                                                    <th colspan="6" style="background-color: lightgrey;">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 (in Rs):
+                                                    </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 (in Rs):
+                                                    </th>
+                                                    <td colspan="5" class="fw-semibold"
+                                                        style="padding: 0.45rem 0.45rem;" id="td_electricityamount">
+                                                    </td>
+                                                </tr>
+                                            </table>
+                                        </div>
+                                    </div>
+                                    <div class="row col-md-12 col-lg-12 col-sm-12" id="damagelist" style="disaply:none">
+                                        <div id="damageDetails"></div>
+                                    </div>
+
+                                    <div class="col-md-12 col-lg-12 col-sm-12" id="refunddetails"
+                                        style="margin-top:-1px">
+                                        <div class="card-body">
+                                            <table>
+                                                <tr>
+                                                    <th colspan="2" style="background-color: lightgrey;">
+                                                        Amount to be Refunded (in Rs)
+                                                    </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 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; 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>
+                                    <div class="row col-md-12 col-lg-12 col-sm-12" id="refundamountDetails"
+                                        style="display:none;margin-left: 0px;">
+                                        <div class="card-body">
+                                            <table>
+                                                <tr>
+                                                    <th colspan="4" style="background-color: lightgrey;">
+                                                        Refund Details
+                                                    </th>
+                                                </tr>
+                                                <tr>
+                                                    <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>
+                                                    <th style="padding: 0.45rem 0.45rem;font-weight: normal">
+                                                        Refund Status:
+                                                    </th>
+                                                    <td class="fw-semibold" style="padding: 0.45rem 0.45rem;"
+                                                        id="td_refundStatus"></td>
+                                                </tr>
+                                                <tr>
+                                                    <th
+                                                        style="padding: 0.45rem 0.45rem;font-weight: normal;text-wrap: pretty;">
+                                                        Refund amount:
+                                                    </th>
+                                                    <td class="fw-semibold" colspan="5"
+                                                        style="padding: 0.45rem 0.45rem;" id="td_refundamount"></td>
+                                                </tr>
+                                                </tbody>
+                                            </table>
+                                        </div>
+                                    </div>
+                                    <div id="refundMessage" style="display: none;">
+                                        <h1 id="refundText" style="font-size: 17px;margin-left: 20px;color: darkgreen;">
+                                        </h1>
+                                    </div>
+                                    <div id="rejectrefundMessage" style="display: none;">
+                                        <h1 id="rejectrefundText"
+                                            style="font-size: 17px;margin-left: 20px;color: darkgreen;">
+                                        </h1>
+                                    </div>
+                                    <div id="blockedrefundMessage" style="display: none;">
+                                        <h1 id="blockedrefundText"
+                                            style="font-size: 17px;margin-left: 20px;color: darkgreen;">
+                                        </h1>
+                                    </div>
+                                </div>
+
+                            </div>
+                            <div class="block-content block-content-full text-end bg-body" id="mbutton">
+                                <button type="button" style="background-color: rgb(21,69,93);color: white;"
+                                    class="btn btn-sm btn-alt-secondary" data-bs-dismiss="modal">Close
+                                </button>
+                            </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="viewbookingDetailsdetails">
+                <div class="modal-dialog modal-xl">
+                    <div class="modal-content">
+                        <!-- Modal Header -->
+                        <div class="modal-header">
+                            <h4 class="modal-title">List of Bookings</h4>
+                            <button type="button" class="btn" data-bs-dismiss="modal">&times;</button>
+                        </div>
+                        <!-- Modal Body -->
+                        <div class="modal-body">
+                            <div class="content">
+                                <div class="block block-rounded">
+                                    <div class="block-content p-0">
+                                        <div class="p-sm-4 p-0">
+                                            <div class="table-responsive">
+                                                <table id="bookinglistdataTable"
+                                                    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 no-sort">Booking Id</th>
+                                                            <th class="text-center no-sort">Booking Date</th>
+                                                            <th class="text-center no-sort">Start Date</th>
+                                                            <th class="text-center no-sort">End Date</th>
+                                                            <th class="text-center no-sort">Starting Slot</th>
+                                                            <th class="text-center no-sort">Ending Slot</th>
+                                                            <th class="text-center no-sort">Reason For Booking</th>
+                                                            <th class="text-center no-sort">No of days</th>
+                                                            <th class="text-center no-sort">Booking Status</th>
+                                                            <th class="text-center no-sort">Hall Amount</th>
+                                                            <th class="text-center no-sort">Total Amount Paid</th>
+                                                        </tr>
+                                                    </thead>
+                                                    <tbody id="bookingTableBody"></tbody>
+                                                </table>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <!-- Modal Footer -->
+                        <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="viewbookingDetailsbyzone">
+                <div class="modal-dialog modal-xl">
+                    <div class="modal-content">
+                        <!-- Modal Header -->
+                        <div class="modal-header">
+                            <h4 class="modal-title">List of Bookings Based on Zone</h4>
+                            <button type="button" class="btn" data-bs-dismiss="modal">&times;</button>
+                        </div>
+                        <!-- Modal Body -->
+                        <div class="modal-body">
+                            <div class="content">
+                                <div class="block block-rounded">
+                                    <div class="block-content p-0">
+                                        <div class="p-sm-4 p-0">
+                                            <div class="table-responsive">
+                                                <table id="bookinglistdataTablebyzone"
+                                                    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 no-sort">Booking Id</th>
+                                                            <th class="text-center no-sort">Booking Date</th>
+                                                            <th class="text-center no-sort">Start Date</th>
+                                                            <th class="text-center no-sort">End Date</th>
+                                                            <th class="text-center no-sort">Starting Slot</th>
+                                                            <th class="text-center no-sort">Ending Slot</th>
+                                                            <th class="text-center no-sort">Reason For Booking</th>
+                                                            <th class="text-center no-sort">No of Days</th>
+                                                            <th class="text-center no-sort">Booking Status</th>
+                                                            <th class="text-center no-sort">Hall Amount</th>
+                                                            <th class="text-center no-sort">Total Amount Paid</th>
+                                                        </tr>
+                                                    </thead>
+                                                    <tbody id="bookingTableBodybyzone"></tbody>
+                                                </table>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <!-- Modal Footer -->
+                        <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="bookingModal" tabindex="-1" aria-labelledby="bookingModalLabel"
+                aria-hidden="true">
+                <div class="modal-dialog modal-xl modal-dialog-scrollable">
+                    <div class="modal-content">
+                        <div class="modal-header">
+                            <h5 class="modal-title">Hall-wise Booking Details</h5>
+                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                        </div>
+                        <div class="modal-body">
+                            <!--
+                                        <table id="modalBookingTable" class="table table-bordered table-striped dataTable" style="width: 100%;">
+                        -->
+                            <table id="modalBookingTable"
+                                class="table table-striped table-bordered table-hover dataTable" role="grid"
+                                width="99.5%">
+                                <input type="hidden" id="hallBookingJsonInput" th:value="${hallBookingJson}">
+
+                                <thead>
+                                    <tr>
+                                        <th>S.No</th>
+                                        <th>Zone</th>
+                                        <th>Division</th>
+                                        <th>Hall Name</th>
+                                        <th>Total Bookings</th>
+                                    </tr>
+                                </thead>
+                                <tbody id="modalBookingDetails"></tbody>
+                            </table>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="modal fade" id="hallDetailModal" tabindex="-1" aria-hidden="true">
+                <div class="modal-dialog modal-fullscreen-custom modal-dialog-scrollable">
+                    <div class="modal-content">
+                        <div class="modal-header">
+                            <h5 class="modal-title">Booking Details for Hall</h5>
+                            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+                        </div>
+                        <div class="modal-body">
+                            <table id="hallDetailsTable" class="table table-bordered table-striped">
+                                <input type="hidden" id="hallBookingDetailsJsonInput"
+                                    th:value="${hallBookingDetailsJson}">
+
+                                <thead>
+                                    <tr>
+                                        <th>S.No</th>
+                                        <th>Booking ID</th>
+                                        <th>Hall Name</th>
+                                        <th>Booking Date</th>
+                                        <th>Start Date</th>
+                                        <th>End Date</th>
+                                        <th>Starting Slot</th>
+                                        <th>Ending Slot</th>
+                                        <th>No.of.Days</th>
+                                        <th>Reason for Booking</th>
+                                        <th>Hall Amount</th>
+                                        <th>Deposit Amount</th>
+                                        <th>GSt</th>
+                                        <th>Amount Received</th>
+                                        <th>Booking Status</th>
+                                        <th>Booking Type</th>
+                                        <th>View</th>
+                                    </tr>
+                                </thead>
+                                <tbody id="hallDetailsTableBody"></tbody>
+                            </table>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="modal fade" id="bookingInfoModal" tabindex="-1" aria-labelledby="bookingInfoModalLabel"
+                aria-hidden="true">
+                <div class="modal-dialog modal-xl">
+                    <div class="modal-content">
+                        <div class="modal-header bg-dark text-white">
+                            <h5 class="modal-title">Booking Information</h5>
+                            <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
+                        </div>
+                        <div class="modal-body" id="bookingInfoContent">
+                            <!-- Filled by JS -->
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+
+        </main>
+        <footer th:replace="~{fragments/footer2 :: footer}"></footer>
+    </div>
+
+
+    <div th:replace="~{fragments/resetpassword :: div}"></div>
+    <script th:replace="~{fragments/loginscript :: script}"></script>
+
+
+    <script>
+        /*$(document).ready(function () {
+            // Common 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'
+            }];
+    
+            // DataTables initialization
+            $('#requestTable1, #requestTable2, #requestTable3, #requestTable4, #requestTable5, #requestTable6, #requestTable7').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,
+                order: [] // Remove any default sorting
+            });
+    
+            // Link the search input to DataTable
+            $('#searchInput').on('keyup', function () {
+                $('#bookinglistdataTable').DataTable().search(this.value).draw();
+            });
+        });*/
+        $(document).ready(function () {
+            // Common buttons (default for most tables)
+            var commonButtons = [{
+                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'
+            }];
+
+            // Custom PDF buttons for specific tables
+            function getCustomButtons(tableId) {
+                let orientation = 'portrait';
+                let pageSize = 'A4';
+
+                if (tableId === 'modalBookingTable') {
+                    orientation = 'landscape';
+                    pageSize = 'A4';
+                } else if (tableId === 'hallDetailsTable') {
+                    orientation = 'landscape';
+                    pageSize = 'A3';
+                } else if (tableId === 'detailedrequestTable') {
+                    orientation = 'landscape';
+                    pageSize = 'A3';
+                }
+
+                return [{
+                    extend: 'pageLength',
+                    className: 'btn btn-primary'
+                }, {
+                    title: 'Data export',
+                    extend: 'copyHtml5',
+                    text: 'Copy',
+                    className: 'btn btn-primary'
+                }, {
+                    extend: 'excelHtml5',
+                    text: 'Excel',
+                    className: 'btn btn-primary'
+                }, {
+                    extend: 'csvHtml5',
+                    text: 'CSV',
+                    className: 'btn btn-primary'
+                }, {
+                    extend: 'pdfHtml5',
+                    text: 'PDF',
+                    className: 'btn btn-primary',
+                    orientation: orientation,
+                    pageSize: pageSize
+                }];
+            }
+
+            // Tables using default buttons
+            $('#requestTable1, #requestTable2, #requestTable3, #requestTable8, #requestTable4, #requestTable5, #requestTable6, #requestTable7').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']
+                ],
+                fixedColumns: {
+                    left: 1,
+                    right: 1
+                },
+                buttons: commonButtons,
+                responsive: true,
+                searching: true,
+                select: false,
+                processing: false,
+                order: []
+            });
+
+            // Tables with custom PDF buttons
+            ['requestTable9', 'modalBookingTable', 'hallDetailsTable', 'detailedrequestTable'].forEach(function (tableId) {
+                $('#' + tableId).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']
+                    ],
+                    fixedColumns: {
+                        left: 1,
+                        right: 1
+                    },
+                    buttons: getCustomButtons(tableId),
+                    responsive: true,
+                    searching: true,
+                    select: false,
+                    processing: false,
+                    order: []
+                });
+            });
+
+            // Link the search input to DataTable
+            $('#searchInput').on('keyup', function () {
+                $('#bookinglistdataTable').DataTable().search(this.value).draw();
+            });
+        });
+
+
+        function validateme() {
+            return true;
+        }
+
+        var fromdate = document.getElementById("fromdate"), todate = document
+            .getElementById("todate");
+
+        function validateDate() {
+            if ($("#fromdate").val() == "" || $("#todate").val() == "") {
+                todate.setCustomValidity("FromDate and ToDate Must");
+            } else {
+                todate.setCustomValidity('');
+            }
+        }
+
+        fromdate.onchange = validateDate;
+        todate.onchange = validateDate;
+
+        $(document).ready(function () {
+            var today = new Date();
+            $('.datepicker').datepicker({
+                dateFormat: 'yy-mm-dd',
+                maxDate: '1'
+            })
+            $('.datepicker').keyup(function () {
+                if (this.value.match(/[^0-9]/g)) {
+                    this.value = this.value.replace(/[^0-9^-]/g, '');
+                }
+            });
+        });
+        document.addEventListener("DOMContentLoaded", function () {
+            myRequest(); // Initial call to set dropdowns based on initial value
+        });
+        document.addEventListener("DOMContentLoaded", function () {
+            var today = new Date();
+            var sixMonthsLater = new Date();
+            sixMonthsLater.setMonth(today.getMonth() + 6);
+
+            var minDate = today.toISOString().split('T')[0];
+            var maxDate = sixMonthsLater.toISOString().split('T')[0];
+            let fromDateInput = document.getElementById('fromdate');
+            let toDateInput = document.getElementById('todate');
+            let selectedFromDate = document.getElementById('fromdate').value;
+            fromDateInput.setAttribute('max', maxDate);
+            toDateInput.setAttribute('min', selectedFromDate);
+            toDateInput.setAttribute('max', maxDate);
+            fromDateInput.addEventListener('change', function () {
+                let selectedFromDate = this.value;
+                let toDateInput = document.getElementById('todate');
+                toDateInput.setAttribute('min', selectedFromDate);
+                toDateInput.value = ''; // Reset the value of toDate
+            });
+        });
+
+        document.addEventListener("DOMContentLoaded", function () {
+            const form = document.getElementById('myForm');
+            const basedonSelect = document.getElementById('basedon');
+            const errorSpan = document.getElementById('basedonError');
+            const request = document.getElementById('request');
+            const reportTypeSelect = document.getElementById('reporttype');
+            const reportTypeerror = document.getElementById('reportTypeError');
+
+            form.addEventListener("submit", function (event) {
+                const requestValue = request.value;
+
+                if (requestValue === "7") {
+                    console.log("inside 7");
+                    console.log("basedonSelect.value=====" + basedonSelect.value);
+
+                    if (basedonSelect.value === "") {
+                        event.preventDefault(); // Stop form submission
+                        errorSpan.textContent = "Please select a value.";
+                        basedonSelect.classList.add("is-invalid");
+                    } else {
+                        errorSpan.textContent = "";
+                        basedonSelect.classList.remove("is-invalid");
+                    }
+                } else if (requestValue === "9") {
+                    console.log("inside 9");
+                    console.log("reportTypeSelect.value=====" + reportTypeSelect.value);
+
+                    if (reportTypeSelect.value === "") {
+                        event.preventDefault(); // Stop form submission
+                        reportTypeerror.textContent = "Please select a value.";
+                        reportTypeSelect.classList.add("is-invalid");
+                    } else {
+                        reportTypeerror.textContent = "";
+                        reportTypeSelect.classList.remove("is-invalid");
+                    }
+                }
+            });
+
+            document.getElementById("basedon").addEventListener("change", function () {
+                this.classList.remove("is-invalid");
+                document.getElementById("basedonError").textContent = "";
+            });
+
+            document.getElementById("reporttype").addEventListener("change", function () {
+                this.classList.remove("is-invalid");
+                document.getElementById("reportTypeError").textContent = "";
+            });
+        });
+
+        // Function to manage the display of dropdowns based on the request type
+        function myRequest() {
+            var requestValue = document.getElementById("request").value;
+
+            // Hide all dropdowns initially
+            document.getElementById("userDropdown1").style.display = "none";
+            document.getElementById("userDropdown2").style.display = "none";
+            document.getElementById("bookingDetailsDropdown1").style.display = "none";
+            document.getElementById("bookingDetailsDropdown2").style.display = "none";
+            document.getElementById("bookingDetailsDropdown3").style.display = "none";
+            document.getElementById("refundDetailsDropdown").style.display = "none";
+            document.getElementById("zoneDropdown").style.display = "none";
+            document.getElementById("divisionContainer").style.display = "none";
+            document.getElementById("hallContainer").style.display = "none";
+            document.getElementById("bookingcountbasedonDropdown").style.display = "none";
+            document.getElementById("paymentInfoDropdown1").style.display = "none";
+            document.getElementById("counterreportDropdown").style.display = "none";
+
+            // Reset dropdown values
+            document.getElementById('zone1').value = 'ALL';
+            document.getElementById('division1').value = '';
+            document.getElementById('hall1').value = '';
+
+
+            // Show relevant dropdowns based on the selected request value
+            if (requestValue === "1") {
+                document.getElementById("userDropdown1").style.display = "block";
+                document.getElementById("userDropdown2").style.display = "block";
+
+                // Add event listener to handle "User Type" selection
+                document.getElementById("usertype").addEventListener("change", function () {
+                    var userTypeValue = document.getElementById("usertype").value;
+                    if (userTypeValue === "PUBLIC") {
+                        document.getElementById("userDropdown1").style.display = "none"; // Hide "User Status" dropdown
+                    } else {
+                        document.getElementById("userDropdown1").style.display = "block"; // Show "User Status" dropdown
+                    }
+                });
+
+                // Trigger the change event to apply the logic on initial load if "PUBLIC" is already selected
+                document.getElementById("usertype").dispatchEvent(new Event('change'));
+
+            } else if (requestValue === "2") {
+                document.getElementById("bookingDetailsDropdown1").style.display = "block";
+                document.getElementById("bookingDetailsDropdown2").style.display = "block";
+                document.getElementById("bookingDetailsDropdown3").style.display = "block";
+                document.getElementById("zoneDropdown").style.display = "block";
+                document.getElementById("divisionContainer").style.display = "block";
+                document.getElementById("hallContainer").style.display = "block";
+
+            } else if (requestValue === "6") {
+                document.getElementById("refundDetailsDropdown").style.display = "block";
+                document.getElementById("bookingDetailsDropdown3").style.display = "block";
+
+            } else if (requestValue === "3") {
+                document.getElementById("zoneDropdown").style.display = "block";
+                document.getElementById("divisionContainer").style.display = "block";
+                document.getElementById("hallContainer").style.display = "block";
+                document.getElementById("paymentInfoDropdown1").style.display = "block";
+            } else if (requestValue === "5") {
+                document.getElementById("bookingDetailsDropdown3").style.display = "block";
+                document.getElementById("zoneDropdown").style.display = "block";
+                document.getElementById("divisionContainer").style.display = "block";
+                document.getElementById("hallContainer").style.display = "block";
+            } else if (requestValue === "7") {
+                document.getElementById("bookingcountbasedonDropdown").style.display = "block"
+            } else if (requestValue === "8") {
+                document.getElementById("zoneDropdown").style.display = "block";
+                document.getElementById("divisionContainer").style.display = "block";
+                document.getElementById("hallContainer").style.display = "block";
+                document.getElementById("paymentInfoDropdown1").style.display = "block";
+            } else if (requestValue === "9") {
+                document.getElementById("counterreportDropdown").style.display = "block";
+            }
+
+        }
+
+        document.addEventListener("DOMContentLoaded", function () {
+            document.getElementById("basedon").addEventListener("change", function () {
+                const selectedValue = this.value;
+                document.getElementById("bookingcountbasedonDropdown").style.display = selectedValue ? "block" : "none";
+            });
+        });
+
+        document.addEventListener("DOMContentLoaded", function () {
+            document.getElementById("reporttype").addEventListener("change", function () {
+                const selectedValue = this.value;
+                document.getElementById("counterreportDropdown").style.display = selectedValue ? "block" : "none";
+            });
+        });
+
+        // Function to reset date fields
+        function resetDate() {
+
+            window.location.href = "/communityhall/sm/Reports";
+
+            document.getElementById('fromdate').value = '';
+            document.getElementById('todate').value = '';
+        }
+
+        function viewDetails(bookingId) {
+            $.ajax({
+                url: '/communityhall/user/api/viewAllBookingDetails',
+                method: 'GET',
+                data: { bookingId: bookingId },
+                success: function (response) {
+                    document.getElementById("td_userName").innerHTML = response.users.name;
+                    document.getElementById("td_mobileNumber").innerHTML = response.users.mobileNo;
+                    document.getElementById("td_usertype").innerHTML = response.users.usertype;
+                    var userDetails = response.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 = response.hallDetails.hallName;
+                    var hallDetails = response.hallDetails;
+                    var hallDetailsString =
+                        hallDetails.doorNo + ", " +
+                        hallDetails.street + ", " +
+                        hallDetails.area + ", " +
+                        hallDetails.city + "- " +
+                        hallDetails.pinCode;
+                    document.getElementById("td_halladdress").innerHTML = hallDetailsString;
+                    document.getElementById("td_caretakername").innerHTML = response.hallDetails.hallInchargeName;
+                    document.getElementById("td_caretakermobileNumber").innerHTML = response.hallDetails.hallInchargeMobno;
+                    document.getElementById("td_bookingDate").innerHTML = response.bookingDate;
+                    document.getElementById("td_depositeAmount").innerHTML = parseFloat(response.depositAmount).toFixed(2);
+                    document.getElementById("td_hallAmount").innerHTML = parseFloat(response.hallAmount).toFixed(2);
+                    // Calculate GST and total amount
+                    var gstAmount = (parseFloat(response.hallAmount) * (response.hallDetails.gst / 100)).toFixed(2);
+                    var totalAmount = parseFloat(response.amountReceived).toFixed(2);
+
+                    document.getElementById("td_gst").innerHTML = gstAmount;
+                    document.getElementById("td_totalAmount").innerHTML = totalAmount;
+
+                    document.getElementById("td_startDate").innerHTML = response.startDate;
+                    document.getElementById("td_endDate").innerHTML = response.endDate;
+                    document.getElementById("booking_id").innerHTML = response.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(response.startingSlot);
+                    document.getElementById("td_endingSlot").innerHTML = getTimeSlot(response.endingSlot);
+                    document.getElementById("bookingstatus_td").innerHTML = response.bookingStatus;
+
+                    if (response.bookingStatus === 'REJECTED' && response.comments) {
+                        document.getElementById("rejectionreasondiv").style.display = "block";
+                        const rejectionCell = document.getElementById("reasonforrejection");
+                        rejectionCell.innerHTML = response.comments;
+                    } else {
+                        document.getElementById("rejectionreasondiv").style.display = "none";
+                        document.getElementById("reasonforrejection").style.display = "none";
+                    }
+                    showReasonDocuments(response);
+
+                    if (response.payments) {
+                        document.getElementById("paymentsdetails").style.display = "block";
+                        document.getElementById("td_transactionId").innerHTML = response.payments.transactionId;
+                        document.getElementById("td_payamountReceived").innerHTML = response.payments.amountReceived;
+                        document.getElementById("td_paymentStatus").innerHTML = response.payments.paymentStatus;
+                    } else {
+                        document.getElementById("paymentsdetails").style.display = "none";
+                    }
+                    if (response.ebDetails) {
+                        document.getElementById("ebdetails").style.display = "block";
+                        document.getElementById("td_EBNumber").innerHTML = response.hallDetails.ebNumber;
+                        document.getElementById("td_startingReading").innerHTML = response.ebDetails.startingReading;
+                        document.getElementById("td_endingReading").innerHTML = response.ebDetails.endingReading;
+                        document.getElementById("td_usedunit").innerHTML = response.ebDetails.usedUnit;
+                        document.getElementById("td_ebamountperunit").innerHTML = parseFloat(response.hallDetails.ebCostPerUnit).toFixed(2);
+                        document.getElementById("td_mfDtUnit").innerHTML = (response.hallDetails && response.hallDetails.mfDtUnit != null) ? parseFloat(response.hallDetails.mfDtUnit).toFixed(2) : "0.00";
+                        document.getElementById("td_electricityamount").innerHTML = parseFloat(response.ebDetails.ebAmount).toFixed(2);
+
+                    } else {
+                        document.getElementById("ebdetails").style.display = "none";
+                    }
+                    if (response.damageList && response.damageList.length > 0) {
+                        document.getElementById("damagelist").style.display = "block";
+
+                    } else {
+                        document.getElementById("damagelist").style.display = "none";
+                    }
+                    if (response.settlement) {
+                        document.getElementById("refunddetails").style.display = "block";
+                        document.getElementById("td_depositeamountforrefund").innerHTML = parseFloat(response.depositAmount).toFixed(2);
+                        document.getElementById("td_electricityamount").innerHTML = parseFloat(response.ebDetails.ebAmount).toFixed(2);
+                        document.getElementById("td_ebAmount").innerHTML = parseFloat(response.ebDetails.ebAmount).toFixed(2);
+                        document.getElementById("td_damage").innerHTML = parseFloat(response.settlement.damageAmount).toFixed(2);
+
+                        var eb_amt = parseFloat(response.ebDetails.ebAmount).toFixed(2);
+                        var deposit_amt = parseFloat(response.depositAmount).toFixed(2);
+                        var tem_total = (deposit_amt - eb_amt).toFixed(2);
+                        $("#td_settel_amt").html(tem_total);
+                    } else {
+                        document.getElementById("refunddetails").style.display = "none";
+                    }
+
+                    showDamageDetails(response);
+                    if (response.bookingStatus === 'CANCELED' && ['WAITING', 'APPROVED', 'INITIATED'].includes(response.refundStatus)) {
+                        document.getElementById("td_refundamount").innerHTML = `Your booking has been cancelled. Deposit amount of ₹ ${parseFloat(response.depositAmount).toFixed(2)} will be refund 3 to 15 Days`;
+                        document.getElementById("refundamountDetails").style.display = "block";
+                        document.getElementById("td_bookingStatus").innerHTML = response.bookingStatus;
+                        document.getElementById("td_refundStatus").innerHTML = response.refundStatus;
+                    } else if (response.bookingStatus === 'CANCELED' && response.refundStatus === 'COMPLETED') {
+                        document.getElementById("td_refundamount").innerHTML = `Deposit amount of ₹ ${parseFloat(response.depositAmount).toFixed(2)} refunded successfully`;
+                        document.getElementById("refundamountDetails").style.display = "block";
+                        document.getElementById("td_bookingStatus").innerHTML = response.bookingStatus;
+                        document.getElementById("td_refundStatus").innerHTML = response.refundStatus;
+                    } else if (response.bookingStatus === 'REJECTED' && ['WAITING', 'APPROVED', 'INITIATED'].includes(response.refundStatus) && response.amountReceived == 0) {
+                        document.getElementById("refundamountDetails").style.display = "none";
+                    } else if (response.bookingStatus === 'REJECTED' && ['WAITING', 'APPROVED', 'INITIATED'].includes(response.refundStatus)) {
+                        document.getElementById("td_refundamount").innerHTML = `Your booking has been Rejected by GCC. Full amount of ₹ ${parseFloat(response.amountReceived).toFixed(2)} will be refunded shortly`;
+                        document.getElementById("refundamountDetails").style.display = "block";
+                        document.getElementById("td_bookingStatus").innerHTML = response.bookingStatus;
+                        document.getElementById("td_refundStatus").innerHTML = response.refundStatus;
+                    } else if (response.bookingStatus === 'REJECTED' && response.refundStatus === 'COMPLETED') {
+                        document.getElementById("td_refundamount").innerHTML = `Full amount of ₹${parseFloat(response.amountReceived).toFixed(2)} refunded successfully`;
+                        document.getElementById("refundamountDetails").style.display = "block";
+                        document.getElementById("td_bookingStatus").innerHTML = response.bookingStatus;
+                        document.getElementById("td_refundStatus").innerHTML = response.refundStatus;
+                    } else if (response.bookingStatus === 'REJECTED' && response.refundStatus === 'NA') {
+                        document.getElementById("td_refundamount").innerHTML = `Your Booking has been rejected by GCC`;
+                        document.getElementById("refundamountDetails").style.display = "block";
+                        document.getElementById("td_bookingStatus").innerHTML = response.bookingStatus;
+                        document.getElementById("td_refundStatus").innerHTML = response.refundStatus;
+                    } else if (response.bookingStatus === 'GCC_BLOCKED' && ['WAITING', 'APPROVED', 'INITIATED'].includes(response.refundStatus)) {
+                        document.getElementById("td_refundamount").innerHTML = `Your booking has been Blocked by GCC. Full amount of ₹ ${parseFloat(response.amountReceived).toFixed(2)} will be refunded shortly`;
+                        document.getElementById("refundamountDetails").style.display = "block";
+                        document.getElementById("td_bookingStatus").innerHTML = response.bookingStatus;
+                        document.getElementById("td_refundStatus").innerHTML = response.refundStatus;
+                    } else if (response.bookingStatus === 'GCC_BLOCKED' && response.refundStatus === 'COMPLETED') {
+                        document.getElementById("td_refundamount").innerHTML = `Full amount of ₹${parseFloat(response.amountReceived).toFixed(2)} refunded successfully`;
+                        document.getElementById("refundamountDetails").style.display = "block";
+                        document.getElementById("td_bookingStatus").innerHTML = response.bookingStatus;
+                        document.getElementById("td_refundStatus").innerHTML = response.refundStatus;
+                    } else {
+                        document.getElementById("refundamountDetails").style.display = "none";
+                    }
+                    // Show the modal
+                    $('#showBookingDetails').modal('show');
+                },
+                error: function () {
+                    console.error("An error occurred while fetching booking details.");
+                }
+            });
+        }
+
+        function showDamageDetails(data) {
+            var damageFieldContainer = $('#damageDetails');
+            damageFieldContainer.empty();
+
+            // Create a div for table responsiveness
+            var tableResponsiveDiv = $('<div>').addClass('table-responsive').css({ 'width': '770px' });
+
+            // 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': 'lightgrey',
+                'font-weight': 'bold',
+                'color': 'black',
+            }).appendTo(headerRow);
+
+            // Create table header row
+            var columnHeadersRow = $('<tr>').css('background-color', 'white').appendTo(thead);
+            $('<th>').text('S.No').css('padding', '0.45rem 0.45rem').appendTo(columnHeadersRow);
+            $('<th>').text('Asset Name').css('padding', '0.45rem 0.45rem').appendTo(columnHeadersRow);
+            $('<th>').text('Damage Img').css('padding', '0.45rem 0.45rem').appendTo(columnHeadersRow);
+            $('<th>').text('Cost').css('padding', '0.45rem 0.45rem').appendTo(columnHeadersRow);
+            $('<th>').text('Qty').css('padding', '0.45rem 0.45rem').appendTo(columnHeadersRow);
+            $('<th>').text('Amount').css('padding', '0.45rem 0.45rem').appendTo(columnHeadersRow);
+
+            var totalAmount = 0;
+            $.each(data.damageList, function (index, detail) {
+                var row = $('<tr>').appendTo(tbody);
+                $('<td>').text(index + 1).css('padding', '0.45rem 0.45rem').appendTo(row);
+                $('<td>').text(detail.assetName).css('padding', '0.45rem 0.45rem').appendTo(row);
+                var viewLink = $('<a>').attr('href', 'javascript:void(0)').text('View').on('click', function () {
+                    showDamageImage(detail.damageImageUrl);
+                });
+                var assetamt = (detail.assetAmount / detail.quantity).toFixed(2);
+                $('<td>').css('padding', '0.45rem 0.45rem').append(viewLink).appendTo(row);
+                $('<td>').text(assetamt).css('padding', '0.45rem 0.45rem').appendTo(row);
+                $('<td>').text(detail.quantity).css('padding', '0.45rem 0.45rem').appendTo(row);
+                var amount = detail.assetAmount;
+                totalAmount += amount;
+                $('<td>').text(amount.toFixed(2)).css('padding', '0.45rem 0.45rem').appendTo(row);
+                $("#td_dam_amt").html(totalAmount.toFixed(2));
+            });
+            // 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').appendTo(totalRow);
+
+            // 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.00);
+                $("#pendingcolumn").show();
+                $("#collectionstatuscolumn").show();
+                $('#td_collection_status').html(pendingstatus);
+                $("#td_pending_amt").html(Math.abs(settleAmount).toFixed(2));
+                $("#td_pending_amt").css("color", "red");
+            } 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
+            }
+        }
+
+        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').css({ 'width': '770px', 'border': 'black' });
+
+            // 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',
+                '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);
+                    $('<td>').text(reasonDocumentData[index].fieldName + ': ' + bookingDocumentsList[index].name).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');
+        }
+
+        $('#fileModal').on('shown.bs.modal', function () {
+            // boost the last backdrop above everything else
+            $('.modal-backdrop').last().css({
+                'z-index': 1095,
+                'pointer-events': 'none'
+            });
+            // boost this modal
+            $(this).css('z-index', 1100);
+        });
+
+        function viewbookingDetails(userId) {
+            $.ajax({
+                type: "GET",
+                url: '/communityhall/admin/api/bookingdetailsByuserId',
+                data: { 'userId': userId },
+                success: function (response) {
+                    // console.log(response);
+                    $("#bookingTableBody").empty(); // Ensure bookingTableBody is the correct ID of the table body
+                    $.each(response, function (index, booking) {
+                        // Create table row with the data from response
+                        var row = '<tr>' + // Added <tr> tag
+                            '<td class="text-center">' + (index + 1) + '</td>' +
+                            '<td class="text-center">' + booking.bookingId + '</td>' +
+                            '<td class="text-center">' + booking.bookingDate + '</td>' +
+                            '<td class="text-center">' + booking.startDate + '</td>' +
+                            '<td class="text-center">' + booking.endDate + '</td>' +
+                            '<td class="text-center">' + booking.startingSlot + '</td>' +
+                            '<td class="text-center">' + booking.endingSlot + '</td>' +
+                            '<td class="text-center">' + booking.reason + '</td>' +
+                            '<td class="text-center">' + booking.noOfDays + '</td>' +
+                            '<td class="text-center">' + booking.bookingStatus + '</td>' +
+                            '<td class="text-center">' + booking.hallAmount + '</td>' +
+                            '<td class="text-center">' + booking.amountReceived + '</td>' +
+                            '</tr>'; // Close <tr> tag
+
+                        // Append the row to the table body
+                        $("#bookingTableBody").append(row);
+                    });
+                    $('#viewbookingDetailsdetails').modal('show');
+                },
+                error: function (xhr, status, error) {
+                    console.error(xhr.responseText);
+                    // Handle error here
+                }
+            });
+        }
+
+        function viewbookingDetailsbasedonzone(zone) {
+            $.ajax({
+                type: "GET",
+                url: '/communityhall/admin/api/bookingdetailsByzone',
+                data: { 'zone': zone },
+                success: function (response) {
+                    // console.log(response);
+
+                    // Clear existing table data and destroy DataTable instance if it exists
+                    var table = $('#bookinglistdataTablebyzone').DataTable();
+                    if (table) {
+                        table.clear().destroy();
+                    }
+
+                    // Populate table with new data
+                    var tableBody = $("#bookingTableBodybyzone");
+                    tableBody.empty(); // Clear the table body
+
+                    $.each(response, function (index, booking) {
+                        var row = '<tr>' +
+                            '<td class="text-center">' + (index + 1) + '</td>' +
+                            '<td class="text-center">' + booking.bookingId + '</td>' +
+                            '<td class="text-center">' + booking.bookingDate + '</td>' +
+                            '<td class="text-center">' + booking.startDate + '</td>' +
+                            '<td class="text-center">' + booking.endDate + '</td>' +
+                            '<td class="text-center">' + booking.startingSlot + '</td>' +
+                            '<td class="text-center">' + booking.endingSlot + '</td>' +
+                            '<td class="text-center">' + booking.reason + '</td>' +
+                            '<td class="text-center">' + booking.noOfDays + '</td>' +
+                            '<td class="text-center">' + booking.bookingStatus + '</td>' +
+                            '<td class="text-center">' + booking.hallAmount + '</td>' +
+                            '<td class="text-center">' + booking.amountReceived + '</td>' +
+                            '</tr>';
+
+                        tableBody.append(row);
+                    });
+
+                    // Initialize DataTable
+                    $('#bookinglistdataTablebyzone').DataTable({
+                        "paging": true,
+                        "searching": true,
+                        "ordering": true,
+                        "info": true
+                    });
+
+                    // Show the modal
+                    $('#viewbookingDetailsbyzone').modal('show');
+                },
+                error: function (xhr, status, error) {
+                    console.error(xhr.responseText);
+                    // Handle error here
+                }
+            });
+        }
+
+        document.addEventListener('DOMContentLoaded', function () {
+            fetchData();
+
+            restoreSelectedValues();
+            document.getElementById('request').addEventListener('change', function () {
+                myRequest(); // Handle request change
+            });
+
+            document.getElementById('zone1').addEventListener('change', function () {
+                updateDivisions();
+            });
+            document.getElementById('division1').addEventListener('change', function () {
+                updateHalls();
+            });
+        });
+
+        function fetchData() {
+            fetch('/communityhall/user/api/getZonehalls')  // Replace with your actual API endpoint
+                .then(response => response.json())
+                .then(data => {
+                    populateDropdowns(data);
+                    restoreSelectedValues();
+                })
+                .catch(error => console.error('Error fetching data:', error));
+        }
+
+        function populateDropdowns(data) {
+            const zoneDropdown = document.getElementById('zone1');
+            const divisionDropdown = document.getElementById('division1');
+            const hallDropdown = document.getElementById('hall1');
+
+            const zones = new Set();
+            const divisionsByZone = {};
+            const hallsByDivision = {};
+
+            data.forEach(item => {
+                zones.add(item.zone);
+                if (!divisionsByZone[item.zone]) {
+                    divisionsByZone[item.zone] = [];
+                }
+                if (!divisionsByZone[item.zone].includes(item.division)) {
+                    divisionsByZone[item.zone].push(item.division);
+                }
+                if (!hallsByDivision[item.division]) {
+                    hallsByDivision[item.division] = [];
+                }
+                hallsByDivision[item.division].push({ hallName: item.hall_name, hallId: item.hall_id });
+            });
+
+            // Populate zones
+            zones.forEach(zone => {
+                const option = document.createElement('option');
+                option.value = zone;
+                option.textContent = zone;
+                zoneDropdown.appendChild(option);
+            });
+
+            zoneDropdown.dataset.divisionsByZone = JSON.stringify(divisionsByZone);
+            divisionDropdown.dataset.hallsByDivision = JSON.stringify(hallsByDivision);
+
+            // Initialize divisions and halls
+            updateDivisions();
+        }
+
+        function updateDivisions() {
+            const zoneDropdown = document.getElementById('zone1');
+            const selectedZone = zoneDropdown.value;
+            const divisionsByZone = JSON.parse(zoneDropdown.dataset.divisionsByZone || '{}');
+
+            const divisionDropdown = document.getElementById('division1');
+            divisionDropdown.innerHTML = '';
+
+            const allOption = document.createElement('option');
+            allOption.value = '';
+            allOption.textContent = '--Select Division--';
+            divisionDropdown.appendChild(allOption);
+
+            if (selectedZone === '') {
+                document.getElementById('divisionContainer').classList.add('hidden');
+            } else {
+                document.getElementById('divisionContainer').classList.remove('hidden');
+                (divisionsByZone[selectedZone] || []).forEach(division => {
+                    const option = document.createElement('option');
+                    option.value = division;
+                    option.textContent = division;
+                    divisionDropdown.appendChild(option);
+                });
+                updateHalls();
+            }
+        }
+
+        function updateHalls() {
+            const divisionDropdown = document.getElementById('division1');
+            const selectedDivision = divisionDropdown.value;
+            const hallsByDivision = JSON.parse(divisionDropdown.dataset.hallsByDivision || '{}');
+
+            const hallDropdown = document.getElementById('hall1');
+            hallDropdown.innerHTML = '';
+
+            const allOption = document.createElement('option');
+            allOption.value = '';
+            allOption.textContent = '--Select Hall--';
+            hallDropdown.appendChild(allOption);
+
+            if (selectedDivision === '') {
+                document.getElementById('hallContainer').classList.add('hidden');
+            } else {
+                document.getElementById('hallContainer').classList.remove('hidden');
+                (hallsByDivision[selectedDivision] || []).forEach(hall => {
+                    const option = document.createElement('option');
+                    option.value = hall.hallId;
+                    option.textContent = hall.hallName;
+                    hallDropdown.appendChild(option);
+                });
+            }
+        }
+
+        function restoreSelectedValues() {
+            const selectedZone = localStorage.getItem('selectedZone') || '';
+            const selectedDivision = localStorage.getItem('selectedDivision') || '';
+            const selectedHall = localStorage.getItem('selectedHall') || '';
+
+            const zoneDropdown = document.getElementById('zone1');
+            const divisionDropdown = document.getElementById('division1');
+            const hallDropdown = document.getElementById('hall1');
+
+            zoneDropdown.value = selectedZone;
+            updateDivisions(); // Populate divisions based on selected zone
+
+            // Make sure to set the division and hall values after the dropdowns are populated
+            divisionDropdown.value = selectedDivision;
+            updateHalls(); // Populate halls based on selected division
+
+            hallDropdown.value = selectedHall;
+        }
+
+        // Store selected values before form submission
+        function storeSelectedValues() {
+            const zoneDropdown = document.getElementById('zone1');
+            const divisionDropdown = document.getElementById('division1');
+            const hallDropdown = document.getElementById('hall1');
+
+            localStorage.setItem('selectedZone', zoneDropdown.value);
+            localStorage.setItem('selectedDivision', divisionDropdown.value);
+            localStorage.setItem('selectedHall', hallDropdown.value);
+        }
+
+        document.getElementById('myForm').addEventListener('submit', function () {
+            storeSelectedValues();
+        });
+
+        let hallBookingData = [];
+        let hallDetailsData = [];
+
+        window.addEventListener("DOMContentLoaded", () => {
+            try {
+                const jsonString1 = document.getElementById("hallBookingJsonInput")?.value;
+                if (jsonString1) {
+                    hallBookingData = JSON.parse(jsonString1);
+                    console.log("Parsed hallBookingData:", hallBookingData);
+                }
+
+                const jsonString2 = document.getElementById("hallBookingDetailsJsonInput")?.value;
+                if (jsonString2) {
+                    hallDetailsData = JSON.parse(jsonString2);
+                    console.log("Parsed hallDetailsData:", hallDetailsData);
+                }
+            } catch (e) {
+                console.error("Failed to parse JSON inputs", e);
+            }
+            // Delegate click event for dynamically added booking links
+            $(document).on('click', '.hall-detail-link', function (e) {
+                e.preventDefault();
+                const hallName = $(this).data('hall-name');
+                showHallBookingDetails(hallName);
+            });
+        });
+
+        function showCounterTable(elem) {
+            const counterId = elem.getAttribute("data-counter-id");
+            const filtered = hallBookingData.filter(row => row[0] == counterId);
+
+            const table = $('#modalBookingTable').DataTable();
+            table.clear();
+
+            filtered.forEach((row, index) => {
+                table.row.add([
+                    index + 1,
+                    row[1],  // Zone
+                    row[2],  // Division
+                    row[3],  // Hall Name
+                    `<button href="#" class="hall-detail-link"
+                     style="background-color: #2a807f; color: white; border: none; padding: 6px 12px; border-radius: 4px;"
+data-hall-name="${row[3]}">${row[4]}</button>`
+                ]);
+            });
+
+            table.draw();
+            table.columns.adjust().responsive.recalc();
+
+            // Show modal after data is loaded
+            $('#bookingModal').modal('show');
+        }
+
+        function formatDateFromTimestamp(timestamp) {
+            const date = new Date(parseInt(timestamp));
+            const year = date.getFullYear();
+            const month = String(date.getMonth() + 1).padStart(2, '0');
+            const day = String(date.getDate()).padStart(2, '0');
+            return `${year}-${month}-${day}`;
+        }
+
+        function getSlotLabel(slot) {
+            return slot === 1 ? 'Morning' : (slot === 2 ? 'Evening' : '');
+        }
+
+        function showHallBookingDetails(hallName) {
+            const filtered = hallDetailsData.filter(row => row[1] === hallName);
+
+            const table = $('#hallDetailsTable').DataTable();
+            table.clear();
+
+            filtered.forEach((row, index) => {
+                table.row.add([
+                    index + 1,
+                    row[0],
+                    row[1],
+                    formatDateFromTimestamp(row[2]),
+                    row[3],
+                    row[4],
+                    getSlotLabel(row[5]),
+                    getSlotLabel(row[6]),
+                    row[7],
+                    row[8],
+                    row[9],
+                    row[10],
+                    row[11],
+                    row[12],
+                    row[13],
+                    row[14],
+                    ` <button class="btn btn-sm btn-primary" onclick="viewDetails('${row[0]}')">View</button>`
+                ]);
+            });
+            table.draw();
+            table.columns.adjust().responsive.recalc();
+            $('#hallDetailModal').modal('show');
+        }
+
+        function viewCounterBookingDetails(bookingId) {
+            viewDetails(bookingId);
+        }
+
+    </script>
+</body>
+
+</html>
\ No newline at end of file