Index: src/main/java/apps/spring/reportium/entity/DTOs/ReportFilterDTO.java
===================================================================
--- src/main/java/apps/spring/reportium/entity/DTOs/ReportFilterDTO.java	(revision 261d1019a8833f120afcb8fe39a1e408f2cd6d77)
+++ src/main/java/apps/spring/reportium/entity/DTOs/ReportFilterDTO.java	(revision 261d1019a8833f120afcb8fe39a1e408f2cd6d77)
@@ -0,0 +1,101 @@
+package apps.spring.reportium.entity.DTOs;
+
+import apps.spring.reportium.entity.converter.DoctorSpecConverter;
+import apps.spring.reportium.entity.converter.GenderConverter;
+import apps.spring.reportium.entity.converter.InstitutionTypeConverter;
+import apps.spring.reportium.entity.enumerations.*;
+import jakarta.persistence.Convert;
+import jakarta.persistence.Converter;
+import jakarta.persistence.EnumType;
+import jakarta.persistence.Enumerated;
+import lombok.Data;
+
+
+@Data
+public class ReportFilterDTO {
+    /*PERSON FIELDS*/
+    private String person_name_surname_string;
+    private Integer correct_age;//option 1
+    private Integer age_start;//option 2
+    private Integer age_end;//option 2
+    @Convert(converter = GenderConverter.class)
+    private Gender gender;
+    private String address_string;
+    private Boolean is_alive;
+    /*ACADEMIC REPORT FIELDS*/
+    private String academic_field;
+    @Convert(converter = InstitutionTypeConverter.class)
+    private InstitutionType institution_type;
+    /*EMPLOYMENT REPORT FIELDS*/
+    private Integer income_amount;
+    @Enumerated(EnumType.STRING)
+    private ComparisonDTOEnum income_comparison;
+    private Integer years_experience;
+    @Enumerated(EnumType.STRING)
+    private ComparisonDTOEnum years_experience_comparison;
+    /*CRIME REPORT FIELDS*/
+    private String crime_type_label;
+    @Enumerated(EnumType.STRING)
+    private SeverityLevel crime_severity_level;
+    private Boolean is_resolved;
+    @Enumerated(EnumType.STRING)
+    private PunishmentType punishment_type;//FINE, PRISON
+    private Integer punishment_fine;//if a punishment type is fine (euros)
+    private Integer punishment_years;//if a punishment type is prison (years)
+    /*MEDICAL REPORT FIELDS*/
+    private String doctor_name_string;//doc
+    private String doctor_surname_string;//doc
+    private Boolean is_active;//doc
+    @Convert(converter = DoctorSpecConverter.class)
+    private DoctorSpecialization specialization;//doc
+    private Boolean is_chronic;
+    private Boolean has_next_control;
+
+    public boolean hasAnyAdvancedFilterSet() {
+        return person_name_surname_string != null ||
+                correct_age != null ||
+                age_start != null ||
+                gender != null ||
+                academic_field != null ||
+                income_amount != null ||
+                years_experience != null ||
+                crime_type_label != null ||
+                doctor_name_string != null ||
+                doctor_surname_string != null ||
+                is_chronic != null ||
+                has_next_control != null;
+    }
+
+
+    @Override
+    public String toString() {
+        return "ReportFilterDTO{" +
+                "person_name_surname_string='" + person_name_surname_string + '\'' +
+                ", correct_age=" + correct_age +
+                ", age_start=" + age_start +
+                ", age_end=" + age_end +
+                ", gender=" + gender +
+                ", address_string='" + address_string + '\'' +
+                ", is_alive=" + is_alive +
+                ", academic_field='" + academic_field + '\'' +
+                ", institution_type=" + institution_type +
+                ", income_amount=" + income_amount +
+                ", income_comparison=" + income_comparison +
+                ", years_experience=" + years_experience +
+                ", years_experience_comparison=" + years_experience_comparison +
+                ", crime_type_label='" + crime_type_label + '\'' +
+                ", crime_severity_level=" + crime_severity_level +
+                ", is_resolved=" + is_resolved +
+                ", punishment_type=" + punishment_type +
+                ", punishment_fine=" + punishment_fine +
+                ", punishment_years=" + punishment_years +
+                ", doctor_name_string='" + doctor_name_string + '\'' +
+                ", doctor_surname_string='" + doctor_surname_string + '\'' +
+                ", is_active=" + is_active +
+                ", specialization=" + specialization +
+                ", is_chronic=" + is_chronic +
+                ", has_next_control=" + has_next_control +
+                '}';
+    }
+
+}
Index: src/main/java/apps/spring/reportium/entity/DTOs/view_fetching_dtos/AcademicReportViewFetchingDTO.java
===================================================================
--- src/main/java/apps/spring/reportium/entity/DTOs/view_fetching_dtos/AcademicReportViewFetchingDTO.java	(revision 261d1019a8833f120afcb8fe39a1e408f2cd6d77)
+++ src/main/java/apps/spring/reportium/entity/DTOs/view_fetching_dtos/AcademicReportViewFetchingDTO.java	(revision 261d1019a8833f120afcb8fe39a1e408f2cd6d77)
@@ -0,0 +1,52 @@
+package apps.spring.reportium.entity.DTOs.view_fetching_dtos;
+import lombok.Data;
+import java.time.LocalDate;
+
+@Data
+public class AcademicReportViewFetchingDTO {
+    private Integer reportId;
+    private String summary;
+    private LocalDate reportCreatedAt;
+    private String embgOfPerson;
+    private String personFullname;
+    private String gender;
+    private LocalDate dateOfBirth;
+    private LocalDate dateOfDeath;
+    private String addressOfLiving;
+    private String contactPhone;
+    private String typeOfReport;
+    private String academicField;
+    private String academicReportDescription;
+    private String institutionName;
+    private String institutionAddress;
+    private Integer institutionYearOfEstablishing;
+    private String cityWhereEducating;
+    private String typeOfEducation;
+
+    public AcademicReportViewFetchingDTO(Integer reportId, String summary,
+                                         java.sql.Date reportCreatedAt, String embgOfPerson, String personFullname,
+                                         String gender, java.sql.Date dateOfBirth, java.sql.Date dateOfDeath, String addressOfLiving,
+                                         String contactPhone, String typeOfReport, String academicField, String academicReportDescription,
+                                         String institutionName, String institutionAddress, Integer institutionYearOfEstablishing,
+                                         String cityWhereEducating, String typeOfEducation) {
+        this.reportId = reportId;
+        this.summary = summary;
+        this.reportCreatedAt = reportCreatedAt != null ? reportCreatedAt.toLocalDate() : null;
+        this.embgOfPerson = embgOfPerson;
+        this.personFullname = personFullname;
+        this.gender = gender;
+        this.dateOfBirth = dateOfBirth != null ? dateOfBirth.toLocalDate() : null;
+        this.dateOfDeath = dateOfDeath != null ? dateOfDeath.toLocalDate() : null;
+        this.addressOfLiving = addressOfLiving;
+        this.contactPhone = contactPhone;
+        this.typeOfReport = typeOfReport;
+        this.academicField = academicField;
+        this.academicReportDescription = academicReportDescription;
+        this.institutionName = institutionName;
+        this.institutionAddress = institutionAddress;
+        this.institutionYearOfEstablishing = institutionYearOfEstablishing;
+        this.cityWhereEducating = cityWhereEducating;
+        this.typeOfEducation = typeOfEducation;
+    }
+
+}
Index: src/main/java/apps/spring/reportium/entity/DTOs/view_fetching_dtos/CrimeReportViewFetchingDTO.java
===================================================================
--- src/main/java/apps/spring/reportium/entity/DTOs/view_fetching_dtos/CrimeReportViewFetchingDTO.java	(revision 261d1019a8833f120afcb8fe39a1e408f2cd6d77)
+++ src/main/java/apps/spring/reportium/entity/DTOs/view_fetching_dtos/CrimeReportViewFetchingDTO.java	(revision 261d1019a8833f120afcb8fe39a1e408f2cd6d77)
@@ -0,0 +1,48 @@
+package apps.spring.reportium.entity.DTOs.view_fetching_dtos;
+import lombok.Data;
+import java.time.LocalDate;
+
+@Data
+public class CrimeReportViewFetchingDTO {
+    private Integer reportId;
+    private String summary;
+    private LocalDate reportCreatedAt;
+    private String embgOfPerson;
+    private String personFullname;
+    private String gender;
+    private LocalDate dateOfBirth;
+    private LocalDate dateOfDeath;
+    private String addressOfLiving;
+    private String contactPhone;
+    private String typeOfReport;
+    private String typeOfCriminal;
+    private String whereCriminalIsReported;
+    private Boolean isResolved;
+    private String descriptivePunishment;
+    private String severityLevel;
+    private String punishment;
+
+    public CrimeReportViewFetchingDTO(Integer reportId, String summary, java.sql.Date reportCreatedAt, String embgOfPerson,
+                                      String personFullname, String gender, java.sql.Date dateOfBirth, java.sql.Date dateOfDeath,
+                                      String addressOfLiving, String contactPhone, String typeOfReport, String typeOfCriminal,
+                                      String whereCriminalIsReported, Boolean isResolved, String descriptivePunishment,
+                                      String severityLevel, String punishment) {
+        this.reportId = reportId;
+        this.summary = summary;
+        this.reportCreatedAt = reportCreatedAt != null ? reportCreatedAt.toLocalDate() : null;
+        this.embgOfPerson = embgOfPerson;
+        this.personFullname = personFullname;
+        this.gender = gender;
+        this.dateOfBirth = dateOfBirth != null ? dateOfBirth.toLocalDate() : null;
+        this.dateOfDeath = dateOfDeath != null ? dateOfDeath.toLocalDate() : null;
+        this.addressOfLiving = addressOfLiving;
+        this.contactPhone = contactPhone;
+        this.typeOfReport = typeOfReport;
+        this.typeOfCriminal = typeOfCriminal;
+        this.whereCriminalIsReported = whereCriminalIsReported;
+        this.isResolved = isResolved;
+        this.descriptivePunishment = descriptivePunishment;
+        this.severityLevel = severityLevel;
+        this.punishment = punishment;
+    }
+}
Index: src/main/java/apps/spring/reportium/entity/DTOs/view_fetching_dtos/EmploymentReportViewFetchingDTO.java
===================================================================
--- src/main/java/apps/spring/reportium/entity/DTOs/view_fetching_dtos/EmploymentReportViewFetchingDTO.java	(revision 261d1019a8833f120afcb8fe39a1e408f2cd6d77)
+++ src/main/java/apps/spring/reportium/entity/DTOs/view_fetching_dtos/EmploymentReportViewFetchingDTO.java	(revision 261d1019a8833f120afcb8fe39a1e408f2cd6d77)
@@ -0,0 +1,44 @@
+package apps.spring.reportium.entity.DTOs.view_fetching_dtos;
+import lombok.Data;
+import java.math.BigDecimal;
+import java.time.LocalDate;
+
+@Data
+public class EmploymentReportViewFetchingDTO {
+    private Integer reportId;
+    private String summary;
+    private LocalDate reportCreatedAt;
+    private String embgOfPerson;
+    private String personFullname;
+    private String gender;
+    private LocalDate dateOfBirth;
+    private LocalDate dateOfDeath;
+    private String addressOfLiving;
+    private String contactPhone;
+    private String typeOfReport;
+    private LocalDate startedWorkingDate;
+    private LocalDate endedWorkingDate;
+    private String jobRole;
+    private Double incomePerMonthInEuros;
+
+    public EmploymentReportViewFetchingDTO(Integer reportId, String summary, java.sql.Date reportCreatedAt, String embgOfPerson, String personFullname,
+                                           String gender, java.sql.Date dateOfBirth, java.sql.Date dateOfDeath, String addressOfLiving, String contactPhone,
+                                           String typeOfReport, java.sql.Date startedWorkingDate, java.sql.Date endedWorkingDate, String jobRole,
+                                           Double incomePerMonthInEuros) {
+        this.reportId = reportId;
+        this.summary = summary;
+        this.reportCreatedAt = reportCreatedAt != null ? reportCreatedAt.toLocalDate() : null;
+        this.embgOfPerson = embgOfPerson;
+        this.personFullname = personFullname;
+        this.gender = gender;
+        this.dateOfBirth = dateOfBirth != null ? dateOfBirth.toLocalDate() : null;
+        this.dateOfDeath = dateOfDeath != null ? dateOfDeath.toLocalDate() : null;
+        this.addressOfLiving = addressOfLiving;
+        this.contactPhone = contactPhone;
+        this.typeOfReport = typeOfReport;
+        this.startedWorkingDate = startedWorkingDate != null ? startedWorkingDate.toLocalDate() : null;
+        this.endedWorkingDate = endedWorkingDate != null ? endedWorkingDate.toLocalDate() : null;
+        this.jobRole = jobRole;
+        this.incomePerMonthInEuros = incomePerMonthInEuros;
+    }
+}
Index: src/main/java/apps/spring/reportium/entity/DTOs/view_fetching_dtos/MedicalReportViewFetchingDTO.java
===================================================================
--- src/main/java/apps/spring/reportium/entity/DTOs/view_fetching_dtos/MedicalReportViewFetchingDTO.java	(revision 261d1019a8833f120afcb8fe39a1e408f2cd6d77)
+++ src/main/java/apps/spring/reportium/entity/DTOs/view_fetching_dtos/MedicalReportViewFetchingDTO.java	(revision 261d1019a8833f120afcb8fe39a1e408f2cd6d77)
@@ -0,0 +1,57 @@
+package apps.spring.reportium.entity.DTOs.view_fetching_dtos;
+import lombok.Data;
+import java.time.LocalDate;
+
+@Data
+public class MedicalReportViewFetchingDTO {
+    private Integer reportId;
+    private String summary;
+    private LocalDate reportCreatedAt;
+    private String embgOfPerson;
+    private String personFullname;
+    private String gender;
+    private LocalDate dateOfBirth;
+    private LocalDate dateOfDeath;
+    private String addressOfLiving;
+    private String contactPhone;
+    private String typeOfReport;
+    private LocalDate diagnosisCreationDate;
+    private String diagnosisDescription;
+    private Boolean isChronic;
+    private String severity;
+    private String therapyForDiagnosis;
+    private LocalDate nextControlDate;
+    private String doctorFullname;
+    private String doctorSpecialization;
+    private Boolean isDoctorStillActive;
+    private Integer yearsOfExperience;
+
+    public MedicalReportViewFetchingDTO(Integer reportId, String summary, java.sql.Date reportCreatedAt, String embgOfPerson, String personFullname,
+                                        String gender, java.sql.Date dateOfBirth, java.sql.Date dateOfDeath, String addressOfLiving, String contactPhone,
+                                        String typeOfReport, java.sql.Date diagnosisCreationDate, String diagnosisDescription, Boolean isChronic,
+                                        String severity, String therapyForDiagnosis,
+                                        java.sql.Date nextControlDate, String doctorFullname, String doctorSpecialization,
+                                        Boolean isDoctorStillActive, Integer yearsOfExperience) {
+        this.reportId = reportId;
+        this.summary = summary;
+        this.reportCreatedAt = reportCreatedAt != null ? reportCreatedAt.toLocalDate() : null;
+        this.embgOfPerson = embgOfPerson;
+        this.personFullname = personFullname;
+        this.gender = gender;
+        this.dateOfBirth = dateOfBirth != null ? dateOfBirth.toLocalDate() : null;
+        this.dateOfDeath = dateOfDeath != null ? dateOfDeath.toLocalDate() : null;
+        this.addressOfLiving = addressOfLiving;
+        this.contactPhone = contactPhone;
+        this.typeOfReport = typeOfReport;
+        this.diagnosisCreationDate = diagnosisCreationDate != null ? diagnosisCreationDate.toLocalDate() : null;
+        this.diagnosisDescription = diagnosisDescription;
+        this.isChronic = isChronic;
+        this.severity = severity;
+        this.therapyForDiagnosis = therapyForDiagnosis;
+        this.nextControlDate = nextControlDate != null ? nextControlDate.toLocalDate() : null;
+        this.doctorFullname = doctorFullname;
+        this.doctorSpecialization = doctorSpecialization;
+        this.isDoctorStillActive = isDoctorStillActive;
+        this.yearsOfExperience = yearsOfExperience;
+    }
+}
Index: src/main/java/apps/spring/reportium/entity/enumerations/ComparisonDTOEnum.java
===================================================================
--- src/main/java/apps/spring/reportium/entity/enumerations/ComparisonDTOEnum.java	(revision 261d1019a8833f120afcb8fe39a1e408f2cd6d77)
+++ src/main/java/apps/spring/reportium/entity/enumerations/ComparisonDTOEnum.java	(revision 261d1019a8833f120afcb8fe39a1e408f2cd6d77)
@@ -0,0 +1,5 @@
+package apps.spring.reportium.entity.enumerations;
+
+public enum ComparisonDTOEnum {
+    more,less,equal
+}
Index: src/main/java/apps/spring/reportium/repository/ReportViewRepository.java
===================================================================
--- src/main/java/apps/spring/reportium/repository/ReportViewRepository.java	(revision 261d1019a8833f120afcb8fe39a1e408f2cd6d77)
+++ src/main/java/apps/spring/reportium/repository/ReportViewRepository.java	(revision 261d1019a8833f120afcb8fe39a1e408f2cd6d77)
@@ -0,0 +1,19 @@
+package apps.spring.reportium.repository;
+
+import apps.spring.reportium.entity.DTOs.view_fetching_dtos.*;
+import apps.spring.reportium.entity.Report;
+import org.springframework.data.jpa.repository.JpaRepository;
+import org.springframework.data.jpa.repository.Query;
+
+import java.util.List;
+
+public interface ReportViewRepository extends JpaRepository<Report,Long> {
+    @Query(value = "SELECT * FROM academic_report_view", nativeQuery = true)
+    List<AcademicReportViewFetchingDTO> getAcademicReportViews();
+    @Query(value = "SELECT * FROM employment_report_view", nativeQuery = true)
+    List<EmploymentReportViewFetchingDTO> getEmploymentReportViews();
+    @Query(value = "SELECT * FROM medical_report_view", nativeQuery = true)
+    List<MedicalReportViewFetchingDTO> getMedicalReportViews();
+    @Query(value = "SELECT * FROM criminal_report_view", nativeQuery = true)
+    List<CrimeReportViewFetchingDTO> getCrimeReportViews();
+}
Index: src/main/java/apps/spring/reportium/web/AdvancedFilterController.java
===================================================================
--- src/main/java/apps/spring/reportium/web/AdvancedFilterController.java	(revision 261d1019a8833f120afcb8fe39a1e408f2cd6d77)
+++ src/main/java/apps/spring/reportium/web/AdvancedFilterController.java	(revision 261d1019a8833f120afcb8fe39a1e408f2cd6d77)
@@ -0,0 +1,43 @@
+package apps.spring.reportium.web;
+
+import apps.spring.reportium.entity.DTOs.MedicalReportPerPersonDTO;
+import apps.spring.reportium.entity.DTOs.ReportFilterDTO;
+import apps.spring.reportium.entity.DTOs.view_fetching_dtos.CrimeReportViewFetchingDTO;
+import apps.spring.reportium.entity.DTOs.view_fetching_dtos.MedicalReportViewFetchingDTO;
+import apps.spring.reportium.entity.Report;
+import apps.spring.reportium.entity.enumerations.ComparisonDTOEnum;
+import apps.spring.reportium.entity.enumerations.DoctorSpecialization;
+import apps.spring.reportium.entity.enumerations.InstitutionType;
+import apps.spring.reportium.entity.enumerations.SeverityLevel;
+import apps.spring.reportium.repository.ReportViewRepository;
+import apps.spring.reportium.service.ReportService;
+import org.springframework.stereotype.Controller;
+import org.springframework.ui.Model;
+import org.springframework.web.bind.annotation.*;
+
+import java.util.Arrays;
+import java.util.List;
+
+@Controller
+public class AdvancedFilterController {
+    private final ReportService reportService;
+    public AdvancedFilterController(ReportService reportService) {
+        this.reportService = reportService;
+    }
+    @GetMapping("/advanced_filter")
+    public String showAdvancedFilterForm(Model model) {
+        model.addAttribute("filter", new ReportFilterDTO());
+        model.addAttribute("severities", Arrays.asList(SeverityLevel.values()));
+        model.addAttribute("specializations", Arrays.asList(DoctorSpecialization.values()));
+        model.addAttribute("comparisons", Arrays.asList(ComparisonDTOEnum.values()));
+        model.addAttribute("institutions", Arrays.asList(InstitutionType.values()));
+        return "filter_panel";
+    }
+
+    @PostMapping("/advanced_filter")
+    public String applyAdvancedFilter(@ModelAttribute ReportFilterDTO filter, Model model) {
+        System.out.println("Advanced filter applied!");
+        System.out.println(filter);
+        return "redirect:/reports";
+    }
+}
Index: src/main/java/apps/spring/reportium/web/ReportViewController.java
===================================================================
--- src/main/java/apps/spring/reportium/web/ReportViewController.java	(revision 261d1019a8833f120afcb8fe39a1e408f2cd6d77)
+++ src/main/java/apps/spring/reportium/web/ReportViewController.java	(revision 261d1019a8833f120afcb8fe39a1e408f2cd6d77)
@@ -0,0 +1,201 @@
+package apps.spring.reportium.web;
+
+import apps.spring.reportium.entity.DTOs.view_fetching_dtos.AcademicReportViewFetchingDTO;
+import apps.spring.reportium.entity.DTOs.view_fetching_dtos.CrimeReportViewFetchingDTO;
+import apps.spring.reportium.entity.DTOs.view_fetching_dtos.EmploymentReportViewFetchingDTO;
+import apps.spring.reportium.entity.DTOs.view_fetching_dtos.MedicalReportViewFetchingDTO;
+import apps.spring.reportium.repository.ReportViewRepository;
+import com.fasterxml.jackson.core.type.TypeReference;
+import com.fasterxml.jackson.databind.ObjectMapper;
+import jakarta.servlet.http.HttpServletResponse;
+import org.springframework.stereotype.Controller;
+import org.springframework.ui.Model;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.RequestParam;
+
+import java.awt.*;
+import java.io.PrintWriter;
+import java.util.ArrayList;
+import java.util.List;
+import java.util.Map;
+import java.util.function.Function;
+import java.util.stream.Collectors;
+
+import com.lowagie.text.*;
+import com.lowagie.text.pdf.PdfPCell;
+import com.lowagie.text.pdf.PdfPTable;
+import com.lowagie.text.pdf.PdfWriter;
+
+@Controller
+public class ReportViewController {
+    private final ReportViewRepository reportViewRepository;
+    private final ObjectMapper objectMapper;
+
+    public ReportViewController(ReportViewRepository reportViewRepository, ObjectMapper objectMapper) {
+        this.reportViewRepository = reportViewRepository;
+        this.objectMapper = objectMapper;
+    }
+
+    /*
+     * Ova ustvari mapira sekoj mozen red shto go ima od string, vo objekti od toj string
+     * primer
+     * Sekoj dto ima svoi atributi i tie se vo redovi staveni vo edna lista od objekti
+     * 500, ass, 2002 ... site mozni atributi
+     * Epa, ova prai ustvari sekoja vakva vrednost ja mapira vo objekt odnosno, prvata deka e povrzana so reportID - > getReportId.value i taka za site
+     * Zatoa vrakja lista od mapi, kaj sto sekoj string e mapiran vo objekt od poveke atributi, a toj
+     * */
+    public List<Map<String, Object>> convertDtosToMapsOfObjects(List<?> dto_objects) {
+        return dto_objects
+                .stream()
+                .map(dto -> objectMapper.convertValue(dto, new TypeReference<Map<String, Object>>() {}))
+                .collect(Collectors.toList());
+    }
+
+    public Function<String, String> capitalize_first_letter = str -> str.substring(0, 1).toUpperCase() + str.substring(1);
+
+    @GetMapping("/view_reports")
+    public String showSelectedReportView(@RequestParam("reportView") String reportView, Model model) {
+        switch (reportView.toUpperCase()) {
+            case "EMPLOYMENT" -> {
+                List<EmploymentReportViewFetchingDTO> reports = reportViewRepository.getEmploymentReportViews();
+                List<Map<String, Object>> data = convertDtosToMapsOfObjects(reports);
+                List<String> columns = data.isEmpty() ? List.of() : new ArrayList<>(data.getFirst()
+                        .keySet()
+                        .stream()
+                        .map(capitalize_first_letter)
+                        .collect(Collectors.toList()));
+                model.addAttribute("reportType", "Employment");
+                model.addAttribute("columns", columns);
+                model.addAttribute("data", data);
+            }
+            case "CRIMINAL" -> {
+                List<CrimeReportViewFetchingDTO> reports = reportViewRepository.getCrimeReportViews();
+                List<Map<String, Object>> data = convertDtosToMapsOfObjects(reports);
+                List<String> columns = data.isEmpty() ? List.of() : new ArrayList<>(data.getFirst()
+                        .keySet()
+                        .stream()
+                        .map(capitalize_first_letter)
+                        .collect(Collectors.toList()));
+                model.addAttribute("reportType", "Criminal");
+                model.addAttribute("columns", columns);
+                model.addAttribute("data", data);
+            }
+            case "ACADEMIC" -> {
+                List<AcademicReportViewFetchingDTO> reports = reportViewRepository.getAcademicReportViews();
+                List<Map<String, Object>> data = convertDtosToMapsOfObjects(reports);
+                List<String> columns = data.isEmpty() ? List.of() : new ArrayList<>(data.getFirst()
+                        .keySet()
+                        .stream()
+                        .map(capitalize_first_letter)
+                        .collect(Collectors.toList()));
+                model.addAttribute("reportType", "Academic");
+                model.addAttribute("columns", columns);
+                model.addAttribute("data", data);
+            }
+            case "MEDICAL" -> {
+                List<MedicalReportViewFetchingDTO> reports = reportViewRepository.getMedicalReportViews();
+                List<Map<String, Object>> data = convertDtosToMapsOfObjects(reports);
+                List<String> columns = data.isEmpty() ? List.of() : new ArrayList<>(data.getFirst()
+                        .keySet()
+                        .stream()
+                        .map(capitalize_first_letter)
+                        .collect(Collectors.toList()));
+                model.addAttribute("reportType", "Medical");
+                model.addAttribute("columns", columns);
+                model.addAttribute("data", data);
+            }
+            default -> {
+                return "redirect:/reports";
+            }
+        }
+        return "different_report_views";
+    }
+
+    private String formatCsvValue(Object value) {
+        if (value == null) return "";
+        String s = value.toString();
+        if (s.contains(",") || s.contains("\"") || s.contains("\n")) {
+            s = s.replace("\"", "\"\"");
+            return "\"" + s + "\"";
+        }
+        return s;
+    }
+
+    @GetMapping("/download_as_csv")
+    public void downloadReportAsCsv(@RequestParam("reportView") String reportView, HttpServletResponse response) throws Exception {
+        response.setContentType("text/csv");
+        response.setHeader("Content-Disposition", "attachment; filename=" + reportView.toLowerCase() + "_report.csv");
+        List<?> reports;
+        switch (reportView.toUpperCase()) {
+            case "EMPLOYMENT" -> reports = reportViewRepository.getEmploymentReportViews();
+            case "CRIMINAL" -> reports = reportViewRepository.getCrimeReportViews();
+            case "ACADEMIC" -> reports = reportViewRepository.getAcademicReportViews();
+            case "MEDICAL" -> reports = reportViewRepository.getMedicalReportViews();
+            default -> {
+                response.sendError(HttpServletResponse.SC_BAD_REQUEST, "Invalid report view type.");
+                return;
+            }
+        }
+        List<Map<String, Object>> data = convertDtosToMapsOfObjects(reports);
+        if (data.isEmpty()) {
+            response.sendError(HttpServletResponse.SC_NO_CONTENT, "No data to export.");
+            return;
+        }
+        PrintWriter writer = response.getWriter();
+        List<String> headers = new ArrayList<>(data.getFirst().keySet());
+        writer.println(String.join(",", headers));
+        for (Map<String, Object> row : data) {
+            List<String> cells = headers.stream()
+                    .map(h -> formatCsvValue(row.get(h)))
+                    .collect(Collectors.toList());
+            writer.println(String.join(",", cells));
+        }
+        writer.flush();
+        writer.close();
+    }
+
+    public List<?> getReports(String reportView) {
+        List<?> reports;
+        switch (reportView.toUpperCase()) {
+            case "EMPLOYMENT" -> reports = reportViewRepository.getEmploymentReportViews();
+            case "CRIMINAL" -> reports = reportViewRepository.getCrimeReportViews();
+            case "ACADEMIC" -> reports = reportViewRepository.getAcademicReportViews();
+            case "MEDICAL" -> reports = reportViewRepository.getMedicalReportViews();
+            default -> reports = List.of();
+        }
+        return reports;
+    }
+
+    @GetMapping("/download_as_pdf")
+    public void downloadReportAsPdf(@RequestParam("reportView") String reportView, HttpServletResponse response) throws Exception {
+        response.setContentType("application/pdf");
+        response.setHeader("Content-Disposition", "attachment; filename=" + reportView.toLowerCase() + "_report.pdf");
+        List<?> reports = getReports(reportView);
+        List<Map<String, Object>> data = convertDtosToMapsOfObjects(reports);
+        Document document = new Document(PageSize.A4.rotate()); // to be landscape
+        PdfWriter.getInstance(document, response.getOutputStream());
+        document.open();
+        document.add(new Paragraph(reportView.toUpperCase() + " Report"));
+        document.add(new Paragraph(" "));
+
+        List<String> headers = new ArrayList<>(data.getFirst().keySet());
+        PdfPTable table = new PdfPTable(headers.size());
+        table.setWidthPercentage(100);
+
+        for (String header : headers) {
+            PdfPCell cell = new PdfPCell(new Phrase(header));
+            cell.setBackgroundColor(Color.LIGHT_GRAY);
+            table.addCell(cell);
+        }
+
+        for (Map<String, Object> row : data) {
+            for (String header : headers) {
+                Object value = row.get(header);
+                table.addCell(value != null ? value.toString() : "");
+            }
+        }
+
+        document.add(table);
+        document.close();
+    }
+}
Index: src/main/resources/templates/different_report_views.html
===================================================================
--- src/main/resources/templates/different_report_views.html	(revision 261d1019a8833f120afcb8fe39a1e408f2cd6d77)
+++ src/main/resources/templates/different_report_views.html	(revision 261d1019a8833f120afcb8fe39a1e408f2cd6d77)
@@ -0,0 +1,113 @@
+<!DOCTYPE html>
+<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.w3.org/1999/xhtml">
+<head>
+    <meta charset="UTF-8">
+    <title th:text="${reportType} + ' Report Data Preview'">Report View</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet"
+          integrity="sha384-LN+7fdVzj6u52u30Kp6M/trliBMCMKTyK833zpbD+pXdCLuTusPj697FH4R/5mcr" crossorigin="anonymous">
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/js/bootstrap.bundle.min.js"
+            integrity="sha384-ndDqU0Gzau9qJ1lfW4pNLlhNTkCfHzAVBReH9diLvGRem5+R9g2FzA8ZGN954O5Q"
+            crossorigin="anonymous"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
+    <style>
+        body {
+            background: linear-gradient(to right, #020b49, #001e61, #00297e);
+            min-height: 100vh;
+            font-family: 'Segoe UI', sans-serif;
+            padding-top: 40px;
+        }
+
+        .container {
+            background-color: #fff;
+            border-radius: 12px;
+            padding: 30px;
+            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
+        }
+
+        h2 {
+            color: #00297e;
+            font-weight: bold;
+        }
+
+        .table thead {
+            background-color: #003366;
+            color: white;
+        }
+
+        .btn-back {
+            background-color: #6c757d;
+            color: white;
+        }
+    </style>
+</head>
+<body>
+
+<div class="container">
+    <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
+        <div class="container-fluid">
+            <a class="navbar-brand fw-bold px-3 py-2 rounded-2 text-white"
+               th:href="@{/}"
+               style="background: linear-gradient(to right, #003366, #004080);
+          border-left: 5px solid #FFD700;
+          font-size: 1.5rem;
+          box-shadow: 0 0 5px rgba(0,0,0,0.2);
+          letter-spacing: 1px;">
+                <span style="color: #FFD700;">R</span>eportium
+            </a>
+
+            <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
+                    data-bs-target="#navbarContent" aria-controls="navbarContent"
+                    aria-expanded="false" aria-label="Toggle navigation">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+            <div class="collapse navbar-collapse justify-content-end" id="navbarContent">
+                <ul class="navbar-nav mb-2 mb-lg-0">
+                    <li class="nav-item">
+                        <a class="nav-link" th:href="@{/reports}">All Reports</a>
+                    </li>
+                    <li class="nav-item" sec:authorize="hasRole('ROLE_ADMIN')">
+                        <a class="nav-link text-info" th:href="@{/profiles}">Users</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link text-danger" th:href="@{/logout}">Logout</a>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </nav>
+    <h2 class="text-center mb-4" th:text="${reportType} + ' Report Details'">Report Details</h2>
+    <div th:if="${data != null and !data.isEmpty()}">
+        <div class="table-responsive">
+            <table class="table table-bordered table-hover table-striped">
+                <thead>
+                <tr>
+                    <th th:each="col : ${columns}" th:text="${col}">Column</th>
+                </tr>
+                </thead>
+                <tbody>
+                <tr th:each="row : ${data}">
+                    <td th:each="cell : ${row.values()}" th:text="${cell}">Value</td>
+                </tr>
+                </tbody>
+            </table>
+        </div>
+    </div>
+    <div th:if="${data == null or data.isEmpty()}" class="alert alert-info text-center">
+        No reports found for this category.
+    </div>
+    <div class="text-center mt-4">
+        <a th:href="@{/reports}" class="btn btn-outline-secondary">Back to All Reports</a>
+    </div>
+    <div class="d-flex justify-content-between gap-5 w-100 mt-4">
+        <a th:href="@{'/download_as_csv?reportView=' + ${reportType}}" class="btn btn-success mb-3">
+            <i class="bi bi-file-earmark-spreadsheet-fill me-2"></i> Export as CSV
+        </a>
+        <a th:href="@{'/download_as_pdf?reportView=' + ${reportType}}" class="btn btn-danger mb-3">
+            <i class="bi bi-file-earmark-pdf-fill me-2"></i> Export as PDF
+        </a>
+    </div>
+
+</div>
+
+</body>
+</html>
Index: src/main/resources/templates/filter_panel.html
===================================================================
--- src/main/resources/templates/filter_panel.html	(revision 261d1019a8833f120afcb8fe39a1e408f2cd6d77)
+++ src/main/resources/templates/filter_panel.html	(revision 261d1019a8833f120afcb8fe39a1e408f2cd6d77)
@@ -0,0 +1,362 @@
+<!DOCTYPE html>
+<html lang="en" xmlns:sec="http://www.w3.org/1999/xhtml">
+<head>
+    <meta charset="UTF-8">
+    <title>Person Filter Panel</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/js/bootstrap.bundle.min.js"></script>
+</head>
+<body style="background: linear-gradient(to bottom, #002195, #b39f24); min-height: 100vh;">
+<div class="container my-4 p-4 rounded shadow h-100" style="background-color: #f4f4f4">
+    <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
+        <div class="container-fluid">
+            <a class="navbar-brand fw-bold px-3 py-2 rounded-2 text-white"
+               th:href="@{/}"
+               style="background: linear-gradient(to right, #003366, #004080);
+          border-left: 5px solid #FFD700;
+          font-size: 1.5rem;
+          box-shadow: 0 0 5px rgba(0,0,0,0.2);
+          letter-spacing: 1px;">
+                <span style="color: #FFD700;">R</span>eportium
+            </a>
+
+            <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
+                    data-bs-target="#navbarContent" aria-controls="navbarContent"
+                    aria-expanded="false" aria-label="Toggle navigation">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+            <div class="collapse navbar-collapse justify-content-end" id="navbarContent">
+                <ul class="navbar-nav mb-2 mb-lg-0">
+                    <li class="nav-item">
+                        <a class="nav-link" th:href="@{/reports}">All Reports</a>
+                    </li>
+                    <li class="nav-item" sec:authorize="hasRole('ROLE_ADMIN')">
+                        <a class="nav-link text-info" th:href="@{/profiles}">Users</a>
+                    </li>
+                    <li class="nav-item">
+                        <a class="nav-link text-danger" th:href="@{/logout}">Logout</a>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </nav>
+    <form th:action="@{/advanced_filter}" method="post" th:object="${filter}">
+        <h3 class="text-center px-4 py-3 bg-dark text-white fw-bolder rounded">Advanced Filtering Page</h3>
+        <hr class="my-4 border-dark">
+        <h4 class="fw-bold mb-3">Person</h4>
+        <!-- Full Name -->
+        <div class="mb-4">
+            <label for="person_name_surname_string" class="form-label fw-bold">Full Name</label>
+            <input id="person_name_surname_string" type="text" name="person_name_surname_string"
+                   class="form-control"
+                   th:field="*{person_name_surname_string}" placeholder="Enter name and surname">
+        </div>
+        <!-- Age Part -->
+        <div class="row mb-4 d-flex justify-content-center">
+            <!-- Age Range -->
+            <div class="col-9">
+                <label class="form-label fw-bold">Age Range</label>
+                <div class="row">
+                    <div class="col-md-6">
+                        <label for="age_start" class="form-label">Start Age</label>
+                        <input type="range" class="form-range" min="0" max="120" value="0" name="age_start"
+                               th:field="*{age_start}" id="age_start"
+                               oninput="updateAgeRange()">
+                    </div>
+                    <div class="col-md-6">
+                        <label for="age_end" class="form-label d-flex justify-content-end">End Age</label>
+                        <input type="range" class="form-range" min="0" max="120" value="120" id="age_end"
+                               name="age_end"
+                               th:field="*{age_end}" oninput="updateAgeRange()">
+                    </div>
+                </div>
+            </div>
+            <!-- Correct Age -->
+            <div class="col-3 d-flex flex-column justify-content-center align-items-center">
+                <label for="correct_age" class="form-label fw-bold text-center">Correct Age</label>
+                <input type="number" id="correct_age" class="form-control text-center" name="correct_age"
+                       style="width: 80px;" min="0"
+                       max="120" value="0"
+                       th:field="*{correct_age}" oninput="updateAgeRange()">
+            </div>
+        </div>
+        <div class="alert alert-info py-2 text-center mt-2 w-25 m-auto" role="alert">
+            <strong><span id="ageRangeDisplay">0 - 120</span></strong>
+        </div>
+        <!-- Gender -->
+        <div class="mb-4">
+            <label class="form-label fw-bold">Gender</label>
+            <div class="form-check">
+                <input class="form-check-input" type="radio" th:field="*{gender}" id="male" value="MALE">
+                <label class="form-check-label" for="male">Male</label>
+            </div>
+            <div class="form-check">
+                <input class="form-check-input" type="radio" th:field="*{gender}" id="female" value="FEMALE">
+                <label class="form-check-label" for="female">Female</label>
+            </div>
+        </div>
+        <!-- Address -->
+        <div class="mb-4">
+            <label for="address_string" class="form-label fw-bold">Address</label>
+            <input type="text" id="address_string" name="address_string" class="form-control"
+                   th:field="*{address_string}" placeholder="Enter address">
+        </div>
+        <!-- Is Alive -->
+        <div class="mb-4 form-check">
+            <input class="form-check-input"
+                   type="checkbox"
+                   th:field="*{is_alive}"
+                   id="is_alive">
+            <label class="form-check-label fw-bold" for="is_alive">
+                Is Alive
+            </label>
+        </div>
+
+        <hr class="my-4">
+        <div class="row d-flex">
+            <!-- Academic Report -->
+            <div class="col-6 border-end border-secondary-subtle">
+                <h4 class="fw-bold mb-3">Academic Report</h4>
+                <div class="mb-4">
+                    <label for="academic_field" class="form-label fw-bold">Field of Study</label>
+                    <input type="text" id="academic_field" class="form-control"
+                           placeholder="e.g. Computer Science, Biology..." th:field="*{academic_field}">
+                </div>
+                <div class="mb-4">
+                    <label for="institution_type">Institution type</label>
+                    <select class="form-select" id="institution_type" name="institution_type"
+                            th:field="*{institution_type}">
+                        <option value="" th:text="'Choose'"></option>
+                        <option th:each="inst : ${institutions}"
+                                th:value="${inst}"
+                                th:text="${inst}"></option>
+                    </select>
+                </div>
+            </div>
+            <!-- Employment Report -->
+            <div class="col-6">
+                <h4 class="fw-bold mb-3">Employment Report</h4>
+                <div class="row mb-4 align-items-end">
+                    <div class="col-md-4">
+                        <label for="income_comparison">Income Comparison</label>
+                        <select class="form-select" id="income_comparison" name="income_comparison"
+                                th:field="*{income_comparison}">
+                            <option value="" th:text="'Choose'"></option>
+                            <option th:each="comp : ${comparisons}"
+                                    th:value="${comp}"
+                                    th:text="${comp}"></option>
+                        </select>
+
+                    </div>
+                    <div class="col-md-4">
+                        <label for="income_amount" class="form-label fw-bold">Income</label>
+                        <input type="number" class="form-control" name="income_amount" id="income_amount"
+                               min="0" th:field="*{income_amount}">
+                    </div>
+                    <div class="col-md-4">
+                        <span class="form-control-plaintext">euros</span>
+                    </div>
+                </div>
+                <div class="row mb-4 align-items-end">
+                    <div class="col-md-4">
+                        <label for="years_experience_comparison">Experience Comparison</label>
+                        <select class="form-select" id="years_experience_comparison"
+                                name="years_experience_comparison"
+                                th:field="*{years_experience_comparison}">
+                            <option value="" th:text="'Choose'"></option>
+                            <option th:each="comp : ${comparisons}"
+                                    th:value="${comp}"
+                                    th:text="${comp}"></option>
+                        </select>
+                    </div>
+                    <div class="col-md-4">
+                        <label for="years_experience" class="form-label fw-bold">Experience</label>
+                        <input type="number" class="form-control" name="years_experience" id="years_experience"
+                               min="0" th:field="*{years_experience}">
+                    </div>
+                    <div class="col-md-4">
+                        <span class="form-control-plaintext">years</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!-- Criminal Report -->
+        <hr class="my-4">
+        <h4 class="fw-bold mb-3">Criminal Report</h4>
+
+        <div class="row mb-4 d-flex">
+            <div class="col-4 border-end border-secondary-subtle">
+                <div class="col">
+                    <label for="crime_severity_level">Severity of Crime</label>
+                    <select class="form-select" id="crime_severity_level" name="crime_severity_level"
+                            th:field="*{crime_severity_level}">
+                        <option value="" th:text="'Choose'"></option>
+                        <option th:each="sev : ${severities}"
+                                th:value="${sev}"
+                                th:text="${sev}"></option>
+                    </select>
+                </div>
+                <!-- Is Resolved -->
+                <div class="col- ms-3 mt-3 mb-4 form-check">
+                    <input class="form-check-input" type="checkbox" name="is_resolved" id="is_resolved"
+                           th:field="*{is_resolved}">
+                    <label class="form-check-label fw-bold" for="is_resolved">Is Resolved</label>
+                </div>
+            </div>
+            <div class="col-4 d-flex justify-content-center border-end border-secondary-subtle">
+                <!-- Punishment Type Radios -->
+                <div class="col-6 mb-3">
+                    <label class="form-label fw-bold">Punishment Type</label>
+                    <!-- Fine Punishment -->
+                    <div class="form-check">
+                        <input class="form-check-input" type="radio" th:field="*{punishment_type}"
+                               id="punishmentFineRadio"
+                               value="FINE" onclick="togglePunishment()">
+                        <label class="form-check-label" for="punishmentFineRadio">Fine (euros)</label>
+                    </div>
+                    <!-- Years Punishment -->
+                    <div class="form-check">
+                        <input class="form-check-input" type="radio" th:field="*{punishment_type}"
+                               id="punishmentYearsRadio"
+                               value="PRISON" onclick="togglePunishment()">
+                        <label class="form-check-label" for="punishmentYearsRadio">Prison (years)</label>
+                    </div>
+                </div>
+
+                <!-- Fine input -->
+                <div class="col-md-6" id="fineInput">
+                    <label for="punishment_fine" class="form-label fw-bold">Punishment Fine (euros)</label>
+                    <input type="number" id="punishment_fine" th:field="*{punishment_fine}" class="form-control"
+                           min="0">
+                </div>
+
+                <!-- Years input -->
+                <div class="col-md-6 d-none" id="yearsInput">
+                    <label for="punishment_years" class="form-label fw-bold">Punishment Duration (years)</label>
+                    <input type="number" id="punishment_years" th:field="*{punishment_years}" class="form-control"
+                           min="0">
+                </div>
+            </div>
+            <div class="col-4">
+                <!-- Criminal Type -->
+                <div class="mb-4">
+                    <label for="crime_type_label" class="form-label fw-bold">Criminal Type</label>
+                    <input type="text" id="crime_type_label" name="crime_type_label"
+                           th:field="*{crime_type_label}" class="form-control"
+                           placeholder="e.g. theft, fraud, etc.">
+                </div>
+            </div>
+        </div>
+        <hr class="my-4">
+        <h4 class="fw-bold mb-3">Medical Report</h4>
+        <!-- Doctor Name + Surname -->
+        <div class="row mb-4">
+            <div class="col-6 d-flex justify-content-around">
+                <div class="col-5">
+                    <label for="doctor_name_string" class="form-label fw-bold">Doctor Name</label>
+                    <input type="text" id="doctor_name_string" name="doctor_name_string" class="form-control"
+                           th:field="*{doctor_name_string}" placeholder="e.g. John">
+                </div>
+                <div class="col-5">
+                    <label for="doctor_surname_string" class="form-label fw-bold">Doctor Surname</label>
+                    <input type="text" id="doctor_surname_string" name="doctor_surname_string" class="form-control"
+                           th:field="*{doctor_surname_string}" placeholder="e.g. Smith">
+                </div>
+            </div>
+            <div class="col-3">
+                <label for="specialization">Severity of Crime</label>
+                <select class="form-select" id="specialization" name="specialization"
+                        th:field="*{specialization}">
+                    <option value="" th:text="'Choose'"></option>
+                    <option th:each="specs : ${specializations}"
+                            th:value="${specs}"
+                            th:text="${specs}"></option>
+                </select>
+            </div>
+            <!-- Still Active + Chronic Illness + Next Medical Control -->
+            <div class="col-md-3 d-flex flex-column gap-3">
+                <div>
+                    <input class="form-check-input" type="checkbox" checked id="is_active"
+                           onchange="toggleActiveBadge()" th:field="*{is_active}" name="is_active">
+                    <label class="form-check-label fw-bold me-2" for="is_active">Is Doctor still Active</label>
+                    <span id="activeBadge" class="badge bg-success text-white">Not Active</span>
+                </div>
+                <div>
+                    <input class="form-check-input" type="checkbox" name="is_chronic"
+                           id="is_chronic" th:field="*{is_chronic}">
+                    <label class="form-check-label fw-bold me-2" for="is_chronic">Is Chronic Illness</label>
+                </div>
+                <div>
+                    <input class="form-check-input" type="checkbox" checked name="has_next_control"
+                           id="has_next_control" th:field="*{has_next_control}">
+                    <label class="form-check-label fw-bold" for="has_next_control">
+                        Has Next Medical Control Scheduled
+                    </label>
+                </div>
+            </div>
+        </div>
+        <div class="mb-4 d-flex justify-content-center">
+            <button type="submit" class="btn btn-outline-primary fw-bolder text-center w-50">Search</button>
+        </div>
+        <div class="d-flex justify-content-center">
+            <a th:href="@{/reports}" class="btn btn-outline-danger w-25 text-center fw-bolder">Cancel Filtering</a>
+        </div>
+    </form>
+</div>
+
+<script>
+    function toggleActiveBadge() {
+        const checkbox = document.getElementById("is_active");
+        const badge = document.getElementById("activeBadge");
+
+        if (checkbox.checked) {
+            badge.textContent = "Active";
+            badge.classList.remove("bg-danger");
+            badge.classList.add("bg-success");
+        } else {
+            badge.textContent = "Retired";
+            badge.classList.remove("bg-success");
+            badge.classList.add("bg-danger");
+        }
+    }
+
+    function updateAgeRange() {
+        let start = parseInt(document.getElementById("age_start").value);
+        let end = parseInt(document.getElementById("age_end").value);
+        let correct = parseInt(document.getElementById("correct_age").value);
+        if (start > end) [start, end] = [end, start];
+        let displayText;
+        if (correct > 0) {
+            displayText = `Exact Age: ${correct}`;
+        } else {
+            displayText = `Age range between ${start} and ${end}`;
+        }
+        document.getElementById("ageRangeDisplay").textContent = displayText;
+    }
+
+    function togglePunishment() {
+        const fineInput = document.getElementById("fineInput");
+        const yearsInput = document.getElementById("yearsInput");
+        const isFine = document.getElementById("punishmentFineRadio").checked;
+
+        if (isFine) {
+            fineInput.classList.remove("d-none");
+            yearsInput.classList.add("d-none");
+            document.getElementById("punishment_years").value = "";
+        } else {
+            yearsInput.classList.remove("d-none");
+            fineInput.classList.add("d-none");
+            document.getElementById("punishment_fine").value = "";
+        }
+    }
+
+
+    window.onload = function () {
+        updateAgeRange();
+        togglePunishment();
+        toggleActiveBadge();
+    };
+</script>
+
+</body>
+</html>
Index: src/main/resources/templates/home.html
===================================================================
--- src/main/resources/templates/home.html	(revision 587f0e67db33a6768099bc4cf0f4105957090c23)
+++ src/main/resources/templates/home.html	(revision 261d1019a8833f120afcb8fe39a1e408f2cd6d77)
@@ -42,11 +42,4 @@
         }
 
-        .badge-yes {
-            background-color: #27ae60;
-        }
-
-        .badge-no {
-            background-color: #ff3b3b;
-        }
     </style>
 </head>