Index: src/main/resources/static/FlightSearch.html
===================================================================
--- src/main/resources/static/FlightSearch.html	(revision 7deb3e2f2b25173055e53926791fba21c9d4dbac)
+++ src/main/resources/static/FlightSearch.html	(revision 57e58a35be0538f1ab9cd2a435d4229175bc485f)
@@ -8,289 +8,21 @@
     <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
-    <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/css/all.min.css'>
-    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet">
-    <style>
-        body {
-            background: url('images/flight.jpg') no-repeat center center fixed;
-            background-size: cover;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            justify-content: center;
-            height: 100vh;
-            margin: 0;
-            font-family: Arial, sans-serif;
-        }
-
-        .header {
-            position: absolute;
-            top: 0;
-            left: 0;
-            display: flex;
-            align-items: center;
-            background-color: rebeccapurple;
-            padding: 10px;
-            width: 100%;
-            z-index: 10;
-        }
-        .header img {
-            width: 40px;
-            height: 40px;
-            margin-right: 20px;
-        }
-
-        .header h1 {
-            color: white;
-            margin: 0;
-            font-size: 15px;
-            padding-right: 50px;
-        }
-
-        .header button {
-            background-color: transparent;
-            border: none;
-            color: white;
-            font-size: 14px;
-        }
-
-        .header button:hover {
-            background-color: transparent;
-            cursor: pointer;
-        }
-
-        .split {
-            height: 100%;
-            width: 50%;
-            position: fixed;
-            z-index: 1;
-            top: 0;
-            overflow-x: hidden;
-            padding-top: 20px;
-        }
-
-        .left {
-            left: 0;
-            padding:50px;
-        }
-
-        .right {
-            right: 0;
-            padding:10px;
-        }
-        select {
-            -webkit-appearance: none;
-            -moz-appearance: none;
-            appearance: none;
-            border: 0;
-            outline: 0;
-            font: inherit;
-            width: 20em;
-            height: 3em;
-            padding: 0 4em 0 1em;
-            background: url(https://upload.wikimedia.org/wikipedia/commons/9/9d/Caret_down_font_awesome_whitevariation.svg) no-repeat right 0.8em center/1.4em, linear-gradient(to left, rgba(255, 255, 255, 0.3) 3em, rgba(255, 255, 255, 0.2) 3em);
-            color: white;
-            border-radius: 0.25em;
-            box-shadow: 0 0 1em 0 rgba(0, 0, 0, 0.2);
-            cursor: pointer;
-        }
-        select option {
-            color: inherit;
-            background-color: #320a28;
-        }
-        select:focus {
-            outline: none;
-        }
-        select::-ms-expand {
-            display: none;
-        }
-
-        .search-form-container h2 {
-            color: white;
-            padding-top: 110px;
-        }
-
-        .search-form {
-            padding: 10px;
-            color:white;
-            font-family: Cambria,sans-serif;
-        }
-        .search {
-            background-color: rebeccapurple;
-            color: white;
-            width: 20em;
-            height: 3em;
-        }
-
-        .book {
-            background-color: darkblue;
-            color: white;
-            width: 20em;
-            height: 3em;
-        }
-
-        .search:hover {
-            background-color: mediumpurple;
-        }
-
-        .flights-list-container {
-            color: white;
-        }
-
-        .flights-list-container h2{
-            padding-top: 110px;
-        }
-        .flights-list .flight-item {
-            margin-bottom: 15px;
-        }
-
-        .flights-list .flight-item span {
-            margin-right: 15px;
-        }
-        .flight-item {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            padding: 15px;
-            background: url(https://upload.wikimedia.org/wikipedia/commons/9/9d/Caret_down_font_awesome_whitevariation.svg) no-repeat right 0.8em center/1.4em, linear-gradient(to left, rgba(255, 255, 255, 0.3) 3em, rgba(255, 255, 255, 0.2) 3em);
-            border-radius: 8px;
-            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
-            transition: transform 0.3s ease, background-color 0.3s ease;
-            width: 70%;
-            height: 15px;
-        }
-
-        .popup-overlay {
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background: rgba(0, 0, 0, 0.7);
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            z-index: 1000;
-            overflow:hidden;
-        }
-
-        .popup textarea{
-            width: 100%;
-            padding: 10px;
-            margin-top: 10px;
-            border: 1px solid #ccc;
-            border-radius: 4px;
-            resize: vertical;
-            box-sizing: border-box;
-        }
-
-        .popup {
-            background-color: white;
-            padding: 20px;
-            width: 300px;
-            border-radius: 10px;
-        }
-
-        .popup button {
-            margin-top: 10px;
-            background-color: rebeccapurple;
-            color: white;
-            border: none;
-            padding: 5px;
-            cursor: pointer;
-        }
-
-        .popup button:hover {
-            background-color: mediumpurple;
-        }
-
-        .calendar {
-            background-color: transparent;
-            border-radius: 2px;
-            border-color: white;
-            width: 18.6em;
-            height: 2.5em;
-            color:white;
-        }
-
-        .notification-badge {
-            position: absolute;
-            top: 0;
-            right: 0;
-            background-color: red;
-            color: white;
-            border-radius: 50%;
-            padding: 0.3em;
-            font-size: 0.8em;
-        }
-
-        button i {
-            font-size: 24px;
-            color: #333;
-            position: relative;
-        }
-
-        .notifications-popup {
-            position: absolute;
-            top: 50px;
-            right: 0;
-            background: white;
-            border: 1px solid #ddd;
-            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
-            width: 300px;
-            max-height: 400px;
-            overflow-y: auto;
-            padding: 10px;
-            z-index: 9999;
-        }
-
-        .notifications-popup ul {
-            list-style-type: none;
-            padding: 0;
-        }
-
-        .notifications-popup li {
-            padding: 10px;
-            border-bottom: 1px solid #ddd;
-        }
-
-        .notifications-popup button {
-            background-color: #4CAF50; /* Green */
-            color: white;
-            padding: 10px;
-            border: none;
-            cursor: pointer;
-            margin-top: 10px;
-        }
-
-        .notifications-popup button:hover {
-            background-color: #45a049;
-        }
-    </style>
 </head>
 <body>
 
 <div id="app" class="flight-search">
-    <header class="header">
-        <button @click="home"><img src="/images/home.png" alt="Home Icon"></button>
-        <button @click="showReportPopup">Report Issue</button>
-        <button @click="goToWishlistPage">🤍</button>
-        <button @click="goToReports">Monthly Report</button>
-        <button @click="goToReviews">Reviews</button>
-        <button @click="home">Log Out</button>
-
-        <button @click="toggleNotifications">
-            <i class="fas fa-bell"></i>
-            <span v-if="unreadNotifications > 0" class="notification-badge">{{ unreadNotifications }}</span>
-        </button>
+    <header class="app-header">
+        <button class="report-issue-btn" @click="showReportPopup">Report Issue</button>
+        <button class="report-issue-btn" @click="goToWishlistPage">🤍</button>
+        <button class="logout-btn" @click="logout">Log Out</button>
     </header>
 
-    <div class="split left">
+    <div class="main-content">
+        <!-- Left side: Flight Search Form -->
         <div class="search-form-container">
-            <h2>Search flights</h2>
+            <h1>Flight Search</h1>
 
             <div class="search-form">
                 <label for="departure-city">Departure From</label>
-                <br>
                 <select v-model="departureCity" id="departure-city">
                     <option value="" disabled selected>Select a departure city</option>
@@ -299,5 +31,4 @@
 
                 <label for="destination">Destination</label>
-                <br>
                 <select v-model="destination" id="destination">
                     <option value="" disabled selected>Select a destination</option>
@@ -306,28 +37,29 @@
 
                 <label for="departure-date">Departure Date</label>
-                <br>
-                <input class="calendar" type="date" v-model="departureDate" id="departureDate" />
-                <br>
+                <input type="date" v-model="departureDate" id="departureDate" />
+
                 <div class="toggle-wrapper">
-                    <label for="return-date-toggle">Include Return Date<input type="checkbox" v-model="showReturnDate" id="return-date-toggle" /></label>
+                    <label for="return-date-toggle">Include Return Date</label>
+                    <input type="checkbox" v-model="showReturnDate" id="return-date-toggle" />
                 </div>
-                <br>
+
                 <div v-if="showReturnDate">
                     <label for="return-date">Return Date</label>
-                    <input class="calendar" type="date" v-model="returnDate" id="returnDate" />
+                    <input type="date" v-model="returnDate" id="returnDate" />
                 </div>
-                <br>
-                <button class="search" @click="searchFlights">Search Flights</button>
+
+                <button @click="searchFlights">Search Flights</button>
             </div>
         </div>
-    </div>
-    <div class="split right">
-        <div class="flights-list-container" v-show="isContainerVisible" v-if="flights.length">
+
+        <!-- Right side: Available Flights List -->
+        <div class="flights-list-container" v-if="flights.length">
             <h2>Available Flights</h2>
             <div class="flights-list">
-                <div class="flight-item" v-for="flight in flights" :key="flight.flightID">
+                <div class="flight-item" v-for="flight in flights" :key="flight.flightId">
                     <input type="checkbox" v-model="flight.selected" />
-                    <span>{{ flight.departureTime }} | {{ flight.arrivalTime }} | ${{ flight.price }} | {{ flight.availableSeats }}</span>
-
+                    <span>{{flight.departureTime}} | {{flight.arrivalTime}} | ${{ flight.price }} | {{flight.availableSeats}}</span>
+
+                    <!-- Heart icon for Wishlist -->
                     <span class="wishlist-heart" @click="toggleWishlist(flight)">
                         {{ flight.wishlisted ? '❤️' : '🤍' }}
@@ -336,10 +68,13 @@
             </div>
 
-            <button v-if="selectedFlights.length" @click="bookFlights"  class="book">
+            <!-- Book Button (Only appears if at least one flight is selected) -->
+            <button v-if="selectedFlights.length" @click="bookFlights" class="book-btn">
                 Book
             </button>
+
         </div>
     </div>
 
+    <!-- Popup Modal for Reporting an Issue -->
     <div v-if="showPopup" class="popup-overlay">
         <div class="popup">
@@ -352,13 +87,4 @@
         </div>
     </div>
-
-    <div v-if="notificationsVisible" class="notifications-popup">
-        <ul>
-            <li v-for="notification in notifications" :key="notification.message">
-                {{ notification.message }} - {{ "RESOLVED" }}
-            </li>
-        </ul>
-        <button @click="markAllAsRead">Mark All as Read</button>
-    </div>
 </div>
 
@@ -367,5 +93,4 @@
         el: '#app',
         data: {
-            isContainerVisible:false,
             departureCity: '',
             destination: '',
@@ -376,13 +101,7 @@
             places: [],
             bookings: [],
-            pastBookings: [],
             showReturnDate: false,
             showPopup: false,
-            issueDescription: '',
-            userId:'',
-            wishlisted:false,
-            unreadNotifications: 0,
-            notifications: [],
-            notificationsVisible: false,
+            issueDescription: ""
         },
         computed: {
@@ -391,25 +110,20 @@
             }
         },
-
         methods: {
-            toggleNotifications() {
-                this.notificationsVisible = !this.notificationsVisible;
-            },
-            fetchNotifications() {
-                console.log('Fetching notifications for userId:', this.userId);
-                axios.get(`/api/notifications/${this.userId}`)
-                    .then(response => {
-                        this.notifications = response.data;
-                        this.unreadNotifications = this.notifications.filter(n => !n.read).length;
-                        console.log(response.data);
-                    })
-                    .catch(error => {
-                        console.error('Error fetching notifications:', error);
-                    });
-            },
             async searchFlights() {
-                this.isContainerVisible = !this.isContainerVisible;
+                console.log("button clicked");
+
                 if (this.departureCity && this.destination && this.departureDate) {
+                    console.log("Search parameters are valid.");
+
                     try {
+                        // Log the params being sent
+                        console.log("Params being sent:", {
+                            departureCity: this.departureCity,
+                            destination: this.destination,
+                            departureDate: this.departureDate,
+                            returnDate: this.showReturnDate ? this.returnDate : null
+                        });
+
                         const response = await axios.get('/api/flights/flight-search', {
                             params: {
@@ -421,18 +135,24 @@
                         });
 
+                        console.log("Response received:", response.data);
+
+                        // Handle no results
                         if (response.data && response.data.length > 0) {
                             this.flights = response.data;
+                            console.log("Flights found:", this.flights);
                         } else {
                             this.flights = [];
                             alert("No flights found for the given criteria.");
                         }
+
                     } catch (error) {
                         console.error("Error fetching flights", error);
                     }
                 } else {
-                    alert("Please select departure city, destination, and date.");
+                    alert("Please select departure city, destination, and date");
                     this.flights = [];
                 }
-            },
+            }
+,
             bookFlights() {
                 if (!this.selectedFlights.length) {
@@ -440,21 +160,20 @@
                     return;
                 }
-
                 const flight = this.selectedFlights[0];
-                console.log(flight);
+                console.log(this.selectedFlights[0]);
                 const totalCost = flight.price;
+                const bookingDate = new Date().toISOString().split('T')[0];
 
                 const bookingData = {
-                    flightId: flight.flightID,
-                    bookingDate: new Date().toISOString().split('T')[0],
+                    flightId: flight.flightId,
+                    bookingDate: bookingDate,
                     status: 'PENDING',
-                    totalCost: totalCost,
-                    userId:this.userId
+                    totalCost: totalCost
                 };
+                console.log("Booking Data",bookingData);
                 axios.post('/api/bookings', bookingData)
                     .then(response => {
-                        const bookingID = response.data.bookingId;
                         alert("Booked successfully!");
-                        window.location.href = `/transaction?amount=${encodeURIComponent(totalCost)}&bookingId=${encodeURIComponent(bookingID)}&flightId=${encodeURIComponent(flight.flightID)}&userId=${encodeURIComponent(this.userId)}`;
+                        window.location.href = `/transaction?amount=${encodeURIComponent(totalCost)}`;
                     })
                     .catch(error => {
@@ -463,36 +182,23 @@
                     });
             },
-            home() {
-                window.location.href = '/';
-            },
-            goToReports(){
-                window.location.href = '/views'
+            logout() {
+                window.location.href = '/login';
             },
             async toggleWishlist(flight) {
                 flight.wishlisted = !flight.wishlisted;
-                this.$set(this.flights, this.flights.indexOf(flight), flight);
+
                 const wishlistData = {
-                    userId: parseInt(this.userId),
-                    targetId: flight.flightID
+                    targetId: flight.flightId,
+                    wishlisted: flight.wishlisted
                 };
-                console.log(wishlistData);
-                if (!flight.wishlisted) {
-                    try {
-                        await axios.delete('/api/wishlists', { params: wishlistData });
-                        console.log("Removed from wishlist");
-                    } catch (error) {
-                        console.error("Error removing from wishlist:", error);
-                    }
-                } else {
-                    try {
-                        await axios.post('/api/wishlists/add', wishlistData);
-                        console.log("Added to wishlist");
-                    } catch (error) {
-                        console.error("Error adding to wishlist:", error);
-                    }
-                }
-            },
-            async goToWishlistPage() {
-                window.location.href = `/wishlists?userId=${encodeURIComponent(this.userId)}`;
+                try {
+                    const response = await axios.post('/api/wishlists', wishlistData);
+                    console.log("Wishlist updated");
+                } catch (error) {
+                    console.error("Error updating wishlist:", error.response ? error.response.data : error.message);
+                }
+            },
+            goToWishlistPage() {
+                window.location.href = '/wishlist';
             },
             showReportPopup() {
@@ -503,8 +209,9 @@
             },
             submitIssue() {
+                const flight = this.selectedFlights[0];
                 if (this.issueDescription.trim()) {
                     const reviewData = {
-                        userId: this.userId,
-                        subject: "Issue Report",
+                        userID: 1,
+                        subject: this.subject,
                         description: this.issueDescription
                     };
@@ -516,5 +223,29 @@
                         })
                         .catch(error => {
-                            console.error("Error submitting issue:", error);
+                            console.error("Error submitting issue:", error.response ? error.response.data : error.message);
+                            alert("There was an error submitting your issue. Please try again.");
+                        });
+                } else {
+                    alert("Please enter a description for the issue.");
+                }
+            },
+            leaveReview() {
+                const flight = this.selectedFlights[0];
+                if (this.issueDescription.trim()) {
+                    const reviewData = {
+                        userID: 1,
+                        targetID: flight.flightId,
+                        reviewComment: this.issueDescription,
+                        rating: 5,
+                        date: new Date().toISOString().split('T')[0]
+                    };
+
+                    axios.post('/api/support-tickets', reviewData)
+                        .then(response => {
+                            alert("Issue reported successfully!");
+                            this.closePopup();
+                        })
+                        .catch(error => {
+                            console.error("Error submitting issue:", error.response ? error.response.data : error.message);
                             alert("There was an error submitting your issue. Please try again.");
                         });
@@ -526,4 +257,5 @@
                 try {
                     const response = await axios.get('/api/destinations');
+
                     this.cities = response.data.map(departureCity => departureCity.name);
                     this.places = response.data.map(destination => destination.name);
@@ -531,13 +263,8 @@
                     console.error("Error fetching Destinations", error);
                 }
-            },
-            goToReviews(){
-                window.location.href = `/reviews?userId=${encodeURIComponent(this.userId)}`;
             }
         },
         mounted() {
             this.fetchFlights();
-            const params = new URLSearchParams(window.location.search);
-            this.userId = params.get("userId");
             axios.get('api/flights')
                 .then(response => {
@@ -547,5 +274,12 @@
                     console.error("Error fetching flights", error);
                 });
-            this.fetchNotifications();
+            axios.get('api/bookings/getAll/${flight.flightID}')
+                .then(response => {
+                    console.log(response.data);
+                    this.bookings = response.data;
+                })
+                .catch(error => {
+                    console.error("Error fetching flights", error);
+                })
         }
     });
Index: src/main/resources/static/ReviewPage.html
===================================================================
--- src/main/resources/static/ReviewPage.html	(revision 7deb3e2f2b25173055e53926791fba21c9d4dbac)
+++ src/main/resources/static/ReviewPage.html	(revision 57e58a35be0538f1ab9cd2a435d4229175bc485f)
@@ -7,102 +7,4 @@
     <link rel="stylesheet" href="/css/main.css">
     <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
-    <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/css/all.min.css'>
-    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet">
-<style>
-    .review-container {
-        max-width: 800px;
-        margin: 0 auto;
-        padding: 20px;
-    }
-
-    .review-list {
-        display: flex;
-        flex-direction: column;
-        gap: 20px;
-        margin-top: 20px;
-    }
-
-    .review-item {
-        background-color: #fff;
-        border: 1px solid #ccc;
-        border-radius: 12px;
-        padding: 15px 20px;
-        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-        transition: box-shadow 0.3s ease;
-    }
-
-    .review-item:hover {
-        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
-    }
-
-    .review-item p {
-        margin: 5px 0;
-    }
-
-    .review-item span {
-        font-weight: bold;
-        color: #673ab7;
-    }
-
-    .popup-overlay {
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        background: rgba(0, 0, 0, 0.7);
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        z-index: 1000;
-        overflow:hidden;
-    }
-
-    .popup textarea{
-        width: 100%;
-        padding: 10px;
-        margin-top: 10px;
-        border: 1px solid #ccc;
-        border-radius: 4px;
-        resize: vertical;
-        box-sizing: border-box;
-    }
-
-    .popup {
-        background-color: white;
-        padding: 20px;
-        width: 300px;
-        border-radius: 10px;
-    }
-
-    .popup button {
-        margin-top: 10px;
-        background-color: rebeccapurple;
-        color: white;
-        border: none;
-        padding: 5px;
-        cursor: pointer;
-    }
-
-    .popup button:hover {
-        background-color: mediumpurple;
-    }
-
-    .popup select {
-        width: 100%;
-        padding: 8px;
-        margin: 10px 0;
-        border-radius: 4px;
-        border: 1px solid #ccc;
-    }
-
-    .popup select:focus {
-        outline: none;
-        border-color: #007bff;
-    }
-
-</style>
 </head>
 <body>
@@ -111,5 +13,4 @@
     <header class="app-header">
         <button class="logout-btn" @click="logout">Log Out</button>
-        <button class="show-popup" @click="leaveReview">Leave a review</button>
     </header>
 
@@ -119,33 +20,9 @@
 
             <div class="review-list">
-                <div v-for="review in reviews" :key="review.reviewid" class="review-item">
-                    <p><strong>Flight Number:</strong> {{ review.flightNumber }}</p>
-                    <h3>{{ review.date }}</h3>
-                    <p>{{ review.reviewComment }}</p>
-                    <span><i class="fas fa-star" style="color:gold;"></i> {{ review.rating }}</span>
+                <div v-for="review in reviews" :key="review.id" class="review-item">
+                    <h3>{{ review.subject }}</h3>
+                    <p>{{ review.description }}</p>
+                    <span>{{ review.date }}</span>
                 </div>
-            </div>
-        </div>
-    </div>
-    <div v-if="showPopup" class="popup-overlay">
-        <div class="popup">
-            <h3>Leave a review</h3>
-
-            <select v-model="selectedFlightId" id="flightNumbers">
-                <option value="" disabled selected>Select a flight</option>
-                <option v-for="flight in flights" :key="flight.flightId" :value="flight.flightId">
-                    {{ flight.flightNumber }}
-                </option>
-            </select>
-
-
-
-            <textarea v-model="reviewComment" placeholder="Leave a comment here..." rows="5"></textarea>
-
-            <textarea v-model="rating" placeholder="Rate 1-5" rows="1"></textarea>
-
-            <div class="popup-actions">
-                <button @click="submitReview" class="submit-btn">Submit</button>
-                <button @click="closePopup" class="cancel-btn">Cancel</button>
             </div>
         </div>
@@ -153,78 +30,34 @@
 </div>
 
-
 <script>
     new Vue({
         el: '#app',
         data: {
-            userId: '',
-            reviews: [],
-            showPopup: false,
-            reviewComment: '',
-            rating: '',
-            flights: [],
-            selectedFlightId: '',
-            flightNumbers:''
+            reviews: [
+                {
+                    id: 1,
+                    subject: 'Great experience!',
+                    description: 'The flight was amazing, the service was excellent, and the views were breathtaking.',
+                    date: '2025-02-01',
+                },
+                {
+                    id: 2,
+                    subject: 'Good but delayed',
+                    description: 'The flight was comfortable, but it was delayed by two hours, which caused some inconvenience.',
+                    date: '2025-02-02',
+                },
+                {
+                    id: 3,
+                    subject: 'Okay, but not perfect',
+                    description: 'Everything was fine, but the food options could have been better.',
+                    date: '2025-02-03',
+                },
+            ]
         },
         methods: {
             logout() {
-                window.location.href = '/';
-            },
-            async fetchReviews() {
-                try {
-                    const response = await axios.get("api/reviews");
-                    this.reviews = response.data;
-                    console.log(response.data);
-                } catch (error) {
-                    console.error(error);
-                }
-            },
-            leaveReview() {
-                this.showPopup = true;
-                this.selectedFlightNumber = '';
-            },
-            closePopup() {
-                this.showPopup = false;
-            },
-            submitReview() {
-                if (this.reviewComment.trim() && this.selectedFlightId) {
-                    const reviewData = {
-                        userID: this.userId,
-                        targetID: this.selectedFlightId,
-                        reviewComment: this.reviewComment,
-                        rating: this.rating
-                    };
-                    console.log(reviewData);
-
-                    axios.post('/api/reviews', reviewData)
-                        .then(response => {
-                            alert("Review added successfully!");
-                            this.closePopup();
-                        })
-                        .catch(error => {
-                            console.error("Error submitting review:", error);
-                            alert("There was an error submitting your review. Please try again.");
-                        });
-                }
-            },
-            async fetchFlights() {
-                try {
-                    const response = await axios.get('/api/flights');
-                    this.flights = response.data.map(flight => ({
-                        flightId: flight.flightID,
-                        flightNumber: flight.flightNumber
-                    }));
-                    console.log(this.flights);
-                } catch (error) {
-                    console.error('Error fetching flights:', error);
-                }
+                // Logic to log out the user, e.g., clearing session or redirecting to home page
+                window.location.href = '/'; // Redirecting to home page
             }
-        },
-        mounted() {
-            const params = new URLSearchParams(window.location.search);
-            this.userId = params.get("userId");
-            this.fetchReviews();
-            this.fetchFlights();
-            this.showPopup = false;
         }
     });
Index: src/main/resources/static/SupportTickets.html
===================================================================
--- src/main/resources/static/SupportTickets.html	(revision 7deb3e2f2b25173055e53926791fba21c9d4dbac)
+++ src/main/resources/static/SupportTickets.html	(revision 57e58a35be0538f1ab9cd2a435d4229175bc485f)
@@ -8,142 +8,12 @@
     <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
 </head>
-<style>
-    body {
-        background: url('images/flight.jpg') no-repeat center center fixed;
-        background-size: cover;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        height: 100vh;
-        margin: 0;
-        font-family: Arial, sans-serif;
-        padding-top: 30px;
-        margin-top: 10px;
-    }
-
-    .header {
-        position: absolute;
-        top: 0;
-        left: 0;
-        display: flex;
-        align-items: center;
-        background-color: rebeccapurple;
-        padding: 10px;
-        width: 100%;
-        z-index: 10;
-        margin-bottom: 10px;
-    }
-    .header img {
-        width: 40px;
-        height: 40px;
-        margin-right: 20px;
-    }
-
-    .header h1 {
-        color: white;
-        margin: 0;
-        font-size: 15px;
-        padding-right: 50px;
-    }
-
-    .header button {
-        background-color: transparent;
-        border: none;
-        color: white;
-        font-size: 14px;
-    }
-
-    .header button:hover {
-        background-color: transparent;
-        cursor: pointer;
-    }
-
-    select {
-        -webkit-appearance: none;
-        -moz-appearance: none;
-        appearance: none;
-        border: 0;
-        outline: 0;
-        font: inherit;
-        width: 20em;
-        height: 3em;
-        padding: 0 4em 0 1em;
-        background: url(https://upload.wikimedia.org/wikipedia/commons/9/9d/Caret_down_font_awesome_whitevariation.svg) no-repeat right 0.8em center/1.4em, linear-gradient(to left, rgba(255, 255, 255, 0.3) 3em, rgba(255, 255, 255, 0.2) 3em);
-        color: white;
-        border-radius: 0.25em;
-        box-shadow: 0 0 1em 0 rgba(0, 0, 0, 0.2);
-        cursor: pointer;
-    }
-    select option {
-        color: inherit;
-        background-color: #320a28;
-    }
-    select:focus {
-        outline: none;
-    }
-    select::-ms-expand {
-        display: none;
-    }
-
-    .search-form-container h2 {
-        color: white;
-        padding-top: 110px;
-    }
-
-
-    .flights-list-container h2{
-        padding-top: 110px;
-    }
-    .flights-list .flight-item {
-        margin-bottom: 15px;
-    }
-
-    .flights-list .flight-item span {
-        margin-right: 15px;
-    }
-
-
-    .popup textarea{
-        width: 100%;
-        padding: 10px;
-        margin-top: 10px;
-        border: 1px solid #ccc;
-        border-radius: 4px;
-        resize: vertical;
-        box-sizing: border-box;
-    }
-
-
-    .popup button {
-        margin-top: 10px;
-        background-color: rebeccapurple;
-        color: white;
-        border: none;
-        padding: 5px;
-        cursor: pointer;
-    }
-
-    .popup button:hover {
-        background-color: mediumpurple;
-    }
-    .ticket-list{
-        margin-top:20px;
-        padding-top:60px;
-    }
-
-
-</style>
 <body>
 
 <div id="app" class="support-ticket-container">
-    <header class="header">
-        <button @click="fetchResolved">Fetch Resolved Tickets</button>
-        <button @click="fetchTickets">Fetch Unresolved Tickets</button>
-    </header>
-
+    <button @click="fetchResolved">Fetch Resolved Tickets</button>
+    <button @click="fetchTickets">Fetch Unresolved Tickets</button>
     <h1>Support Tickets</h1>
     <div class="ticket-list">
-        <div class="ticket-item" v-for="ticket in tickets" :key="ticket.ticketId">
+        <div class="ticket-item" v-for="ticket in tickets" :key="ticket.ticketID">
             <div class="ticket-info">
                 <p><strong>Subject:</strong> {{ ticket.subject }}</p>
@@ -152,5 +22,5 @@
             </div>
             <div class="ticket-actions">
-                <button v-if="ticket.status !== 'RESOLVED'" @click="resolveTicket(ticket.ticketId)">Resolve</button>
+                <button @click="resolveTicket(ticket.ticketID)">Resolve</button>
             </div>
         </div>
@@ -186,5 +56,4 @@
                         this.tickets = response.data;
                         console.log(response.data);
-                        this.showResolvedTickets = true;
                     })
                     .catch(error => {
@@ -192,15 +61,15 @@
                     });
             },
-            resolveTicket(ticketId) {
-                console.log(ticketId);
+            resolveTicket(ticketID) {
+                console.log(ticketID);
                 const status = 'RESOLVED';
-                axios.put(`api/support-tickets/${ticketId}/${status}`, {},
+                axios.put(`http://localhost:8080/api/support-tickets/${ticketID}/status`, status,
                 {
                     headers: {
-                        'Content-Type': 'application/json'
+                        'Content-Type': 'text/plain'
                     }
                 })
                     .then(() => {
-                        alert(`Ticket ${ticketId} resolved.`);
+                        alert(`Ticket ${ticketID} resolved.`);
                         this.fetchTickets();
                     })
Index: src/main/resources/static/TransactionPage.html
===================================================================
--- src/main/resources/static/TransactionPage.html	(revision 7deb3e2f2b25173055e53926791fba21c9d4dbac)
+++ src/main/resources/static/TransactionPage.html	(revision 57e58a35be0538f1ab9cd2a435d4229175bc485f)
@@ -8,247 +8,42 @@
     <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
 </head>
-<style>
-    @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');
-
-
-    * {
-        margin: 0;
-        padding: 0;
-        box-sizing: border-box;
-        font-family: 'Poppins', sans-serif
-    }
-
-    .container {
-        margin: 10px auto;
-        padding: 150px;
-        padding-top:10px;
-    }
-
-    .container .card {
-        width: 100%;
-        box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
-        background: #fff;
-        border-radius: 0px;
-    }
-
-    body {
-        background: #eee
-    }
-
-
-    .container .card .img-box {
-        width: 80px;
-        height: 50px;
-    }
-
-    .container .card img {
-        width: 100%;
-        object-fit: fill;
-    }
-
-    .container .card .number {
-        font-size: 24px;
-    }
-
-    .container .card-body .btn.btn-primary .fab.fa-cc-paypal {
-        font-size: 32px;
-        color: #3333f7;
-    }
-
-    .fab.fa-cc-amex {
-        color: #1c6acf;
-        font-size: 32px;
-    }
-
-    .fab.fa-cc-mastercard {
-        font-size: 32px;
-        color: red;
-    }
-
-    .fab.fa-cc-discover {
-        font-size: 32px;
-        color: orange;
-    }
-
-    .c-green {
-        color: green;
-    }
-
-    .box {
-        height: 40px;
-        width: 50px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        background-color: #ddd;
-    }
-
-    .btn.btn-primary.payment {
-        background-color: #1c6acf;
-        color: white;
-        border-radius: 0px;
-        height: 50px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        margin-top: 24px;
-    }
-
-
-    .form__div {
-        height: 50px;
-        position: relative;
-        margin-bottom: 24px;
-    }
-
-    .form-control {
-        width: 100%;
-        height: 45px;
-        font-size: 14px;
-        border: 1px solid #DADCE0;
-        border-radius: 0;
-        outline: none;
-        padding: 2px;
-        background: none;
-        z-index: 1;
-        box-shadow: none;
-    }
-
-    .form__label {
-        position: absolute;
-        left: 16px;
-        top: 10px;
-        background-color: #fff;
-        color: #80868B;
-        font-size: 16px;
-        transition: .3s;
-        text-transform: uppercase;
-    }
-
-    .form-control:focus+.form__label {
-        top: -8px;
-        left: 12px;
-        color: #1A73E8;
-        font-size: 12px;
-        font-weight: 500;
-        z-index: 10;
-    }
-
-    .form-control:not(:placeholder-shown).form-control:not(:focus)+.form__label {
-        top: -8px;
-        left: 12px;
-        font-size: 12px;
-        font-weight: 500;
-        z-index: 10;
-    }
-    .input-group{
-        align-content: center;
-        padding-left: 500px;
-        padding-top:10px;
-    }
-    .button-group{
-        display:flex;
-        gap:10px;
-    }
-    .pay-btn,
-    .cancel-btn {
-        padding: 10px 20px;
-        font-size: 16px;
-        cursor: pointer;
-        border: none;
-        border-radius: 5px;
-    }
-
-    .pay-btn {
-        background-color: #4CAF50; /* Green background for the pay button */
-        color: white;
-    }
-
-    .cancel-btn {
-        background-color: #f44336; /* Red background for the cancel button */
-        color: white;
-    }
-</style>
 <body>
 
-<div id="app" class="container">
-    <div class="row">
-                <div class="col-lg-4 mb-lg-0 mb-3">
-                    <div class="card p-3">
-                        <div class="img-box">
-                            <img src="https://www.freepnglogos.com/uploads/visa-logo-download-png-21.png" alt="">
-                        </div>
-                        <div class="number">
-                            <label class="fw-bold" for="">**** **** **** 1060</label>
-                        </div>
-                        <div class="d-flex align-items-center justify-content-between">
-                            <small><span class="fw-bold">Expiry date:</span><span>10/16</span></small>
-                            <small><span class="fw-bold">Name:</span><span>Kumar</span></small>
-                        </div>
-                    </div>
-                </div>
-                <div class="col-lg-4 mb-lg-0 mb-3">
-                    <div class="card p-3">
-                        <div class="img-box">
-                            <img src="https://www.freepnglogos.com/uploads/mastercard-png/file-mastercard-logo-svg-wikimedia-commons-4.png"
-                                 alt="">
-                        </div>
-                        <div class="number">
-                            <label class="fw-bold">**** **** **** 1060</label>
-                        </div>
-                        <div class="d-flex align-items-center justify-content-between">
-                            <small><span class="fw-bold">Expiry date:</span><span>10/16</span></small>
-                            <small><span class="fw-bold">Name:</span><span>Kumar</span></small>
-                        </div>
-                    </div>
-                </div>
-                <div class="col-lg-4 mb-lg-0 mb-3">
-                    <div class="card p-3">
-                        <div class="img-box">
-                            <img src="https://www.freepnglogos.com/uploads/discover-png-logo/credit-cards-discover-png-logo-4.png"
-                                 alt="">
-                        </div>
-                        <div class="number">
-                            <label class="fw-bold">**** **** **** 1060</label>
-                        </div>
-                        <div class="d-flex align-items-center justify-content-between">
-                            <small><span class="fw-bold">Expiry date:</span><span>10/16</span></small>
-                            <small><span class="fw-bold">Name:</span><span>Kumar</span></small>
-                        </div>
-                    </div>
-                </div>
-                <div class="col-12 mt-4">
-                    <div class="card p-3">
-                        <p class="mb-0 fw-bold h4">Payment Methods</p>
-                    </div>
-                </div>
+<div id="app" class="transaction-container">
+    <div class="transaction-box">
+        <h2>Complete Your Payment</h2>
+
+        <form @submit.prevent="processPayment">
+            <div class="input-group">
+                <label for="cardholder">Cardholder Name</label>
+                <input type="text" id="cardholder" v-model="cardholder" placeholder="John Doe" required />
             </div>
-            <form class="submit" @submit.prevent="processPayment">
-                <div class="input-group">
-                    <label for="cardholder">Cardholder Name</label>
-                    <input type="text" id="cardholder" v-model="cardholder" placeholder="John Doe" required />
-                </div>
 
-                <div class="input-group">
-                    <label for="cardNumber">Card Number</label>
-                    <input type="text"
-                           id="cardNumber"
-                           v-model="cardNumber"
-                           maxlength="16"
-                           placeholder="1234 5678 9012 3456"
-                           required />
-                </div>
+            <div class="input-group">
+                <label for="cardNumber">Card Number</label>
+                <input type="text"
+                       id="cardNumber"
+                       v-model="cardNumber"
+                       maxlength="16"
+                       placeholder="1234 5678 9012 3456"
+                       required />
+            </div>
 
-                <div class="input-group">
-                    <label for="expiration">Expiration Date</label>
-                    <input type="month" id="expiration" v-model="expiration" required />
-                </div>
+            <div class="input-group">
+                <label for="expiration">Expiration Date</label>
+                <input type="month" id="expiration" v-model="expiration" required />
+            </div>
 
-                <div class="button-group">
-                    <button type="submit" class="pay-btn">Pay</button>
-                    <button type="button" class="cancel-btn" @click="cancelPayment">Cancel</button>
-                </div>
-            </form>
+            <div class="button-group">
+                <button type="submit" class="pay-btn">Pay</button>
+                <button type="button" class="cancel-btn" @click="cancelPayment">Cancel</button>
+            </div>
+        </form>
+
+        <div v-if="paymentSuccess" class="success-message">
+            ✅ Payment successful! Redirecting...
         </div>
+    </div>
+</div>
 
 <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
@@ -258,12 +53,19 @@
         el: '#app',
         data: {
-            bookingId: '',
             cardholder: '',
             cardNumber: '',
             expiration: '',
             amount: '',
-            paymentSuccess: false,
-            flightId:'',
-            userId:''
+            paymentSuccess: false
+        },
+        created(){
+            const urlParams = new URLSearchParams(window.location.search);
+            this.flightId = urlParams.get('flightId');
+            this.amount = urlParams.get('amount');
+
+            const user = JSON.parse(localStorage.getItem("user"));
+            if(user){
+                this.userId = user.id;
+            }
         },
         methods: {
@@ -273,36 +75,19 @@
                     transaction_date:paymentDate,
                     payment_status:'SUCCESS',
-                    amount:Number(this.amount) || null,
-                    userId:Number(this.userId) || null,
-                    bookingId:Number(this.bookingId) || null
+                    amount:this.amount,
+                    userId:this.userId,
+                    bookingId:this.bookingId
                 };
-                console.log(transaction);
+
                 axios.post('api/payments', transaction)
                     .then(response => {
-                        console.log(response.data);
+                        console.log("Payment successful");
                         this.paymentSuccess = true;
-                        this.updateBooking();
                         setTimeout(() => window.location.href = '/flights',2000);
                 })
                     .catch(error => console.error("Payment failed", error));
             },
-            updateBooking() {
-                const booking = {
-                    bookingDate: new Date().toISOString().split('T')[0],
-                    flightId:this.flightId,
-                    payment_status:'SUCCESS',
-                    total_cost:Number(this.amount) || null,
-                    userId:Number(this.userId) || null,
-                    bookingId:Number(this.bookingId) || null
-                };
-                console.log(booking);
-                axios.put(`api/flights/${this.bookingId}`, booking)
-                    .then(response => {
-                        console.log(response.data);
-                    })
-                    .catch(error => console.error("Booking update failed", error));
-            },
             cancelPayment() {
-                window.location.href = '/flights';
+                window.location.href = '/flights'; // Redirecting to flight search on cancel
             },
             validateForm() {
@@ -313,11 +98,4 @@
                 );
             }
-        },
-        mounted(){
-            const params = new URLSearchParams(window.location.search);
-            this.userId = params.get("userId");
-            this.bookingId = params.get("bookingId");
-            this.flightId = params.get("flightId");
-            this.amount=params.get("amount");
         }
     });
Index: src/main/resources/static/UserLogin.html
===================================================================
--- src/main/resources/static/UserLogin.html	(revision 7deb3e2f2b25173055e53926791fba21c9d4dbac)
+++ src/main/resources/static/UserLogin.html	(revision 57e58a35be0538f1ab9cd2a435d4229175bc485f)
@@ -35,36 +35,10 @@
         data: {
             email: '',
-            password: '',
-            userId:''
+            password: ''
         },
         methods: {
-            async loginUser() {
+            loginUser() {
                 if (this.email && this.password) {
-                    try{
-                        const response = await fetch('/api/user/login', {
-                            method:'POST',
-                            headers: {
-                                'Content-Type':'application/json'
-                            },
-                            body: JSON.stringify({
-                                email:this.email,
-                                password:this.password
-                            })
-                        });
-                        if(!response.ok){
-                            throw new Error('Login failed');
-                        }
-                        const data = await response.json();
-                        console.log(data);
-                        if(data.userId){
-                            console.log('Success');
-                            window.location.href = `/flights?userId=${encodeURIComponent(data.userId)}`;
-                        }else {
-                            alert('Invalid login credentials');
-                        }
-                    } catch (error){
-                        console.error(error);
-                        alert('Login failed. Please try again.');
-                    }
+                    window.location.href = '/flights';
                 }
             }
Index: src/main/resources/static/UserSignup.html
===================================================================
--- src/main/resources/static/UserSignup.html	(revision 7deb3e2f2b25173055e53926791fba21c9d4dbac)
+++ src/main/resources/static/UserSignup.html	(revision 57e58a35be0538f1ab9cd2a435d4229175bc485f)
@@ -35,5 +35,5 @@
         <div class="form-group">
             <label for="phoneNumber">Phone Number</label>
-            <input type="text" id="phoneNumber" v-model="phone_number" required placeholder="Enter your phone number" />
+            <input type="text" id="phoneNumber" v-model="phoneNumber" required placeholder="Enter your phone number" />
         </div>
 
@@ -53,8 +53,9 @@
             email: '',
             password: '',
-            phone_number: ''
+            phoneNumber: ''
         },
         methods: {
             signupUser() {
+                // Create user data object
                 const userData = {
                     name: this.name,
@@ -62,7 +63,8 @@
                     email: this.email,
                     password: this.password,
-                    phone_number: this.phone_number
+                    phoneNumber: this.phoneNumber
                 };
 
+                // Send POST request to the backend
                 axios.post('http://localhost:8080/api/user/signup', userData)
                     .then(response => {
Index: src/main/resources/static/ViewReport.html
===================================================================
--- src/main/resources/static/ViewReport.html	(revision 7deb3e2f2b25173055e53926791fba21c9d4dbac)
+++ 	(revision )
@@ -1,191 +1,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
-    <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/css/all.min.css'>
-
-    <style>
-        body {
-            background: url('images/flight.jpg') no-repeat center center fixed;
-            background-size: cover;
-            font-family: Arial, sans-serif;
-            margin: 20px;
-            padding: 20px;
-            text-align: center;
-        }
-
-        h1 {
-            color: white;
-            font-size: 20px;
-            padding-top:50px;
-        }
-        .header {
-            position: absolute;
-            top: 0;
-            left: 0;
-            display: flex;
-            align-items: center;
-            background-color: rebeccapurple;
-            padding: 10px;
-            width: 100%;
-            z-index: 10;
-        }
-        .header img {
-            width: 40px;
-            height: 40px;
-            margin-right: 20px;
-        }
-
-        .header h1 {
-            color: white;
-            margin: 0;
-            font-size: 15px;
-            padding-right: 50px;
-        }
-
-        .header button {
-            background-color: transparent;
-            border: none;
-            color: white;
-            font-size: 14px;
-        }
-
-        .header button:hover {
-            background-color: transparent;
-            cursor: pointer;
-        }
-        table {
-            width: 80%;
-            margin: 20px auto;
-            border-collapse: collapse;
-            background-color: #fff;
-            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-        }
-
-        th, td {
-            padding: 12px;
-            border: 1px solid #ddd;
-            text-align: left;
-        }
-
-        th {
-            background-color: rebeccapurple;
-            color: white;
-        }
-
-        tr:hover {
-            background-color: #f1f1f1;
-        }
-        .popup-overlay {
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background: rgba(0, 0, 0, 0.7);
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            z-index: 1000;
-            overflow: hidden;
-        }
-
-        .popup textarea{
-            width: 100%;
-            padding: 10px;
-            margin-top: 10px;
-            border: 1px solid #ccc;
-            border-radius: 4px;
-            resize: vertical;
-            box-sizing: border-box;
-        }
-
-        .popup {
-            background-color: white;
-            padding: 20px;
-            width: 300px;
-            border-radius: 10px;
-            z-index: 1001; /* Ensure it's above the overlay */
-        }
-
-        .popup button {
-            margin-top: 10px;
-            background-color: rebeccapurple;
-            color: white;
-            border: none;
-            padding: 5px;
-            cursor: pointer;
-        }
-
-        .popup button:hover {
-            background-color: mediumpurple;
-        }
-    </style>
-    <title>Database Views</title>
-</head>
-<body>
-<div id="app">
-    <header class="header">
-        <button @click="home"><img src="/images/home.png" alt="Home Icon"></button>
-        <button @click="goToWishlistPage">🤍</button>
-        <button @click="goToReports">Monthly Report</button>
-        <button @click="home">Log Out</button>
-    </header>
-    <h1>Top Monthly Report</h1>
-    <table>
-        <thead>
-        <tr>
-            <th>Month</th>
-            <th>Category</th>
-            <th>Name</th>
-            <th>Count</th>
-        </tr>
-        </thead>
-        <tbody>
-        <tr v-for="(report, index) in reports" :key="index">
-            <td>{{ report.month }}</td>
-            <td>{{ report.category }}</td>
-            <td>{{ report.name }}</td>
-            <td>{{ report.count }}</td>
-        </tr>
-        </tbody>
-    </table>
-</div>
-
-<script>
-    new Vue({
-        el: '#app',
-        data: {
-            reports: []
-        },
-        mounted() {
-            this.fetchReport();
-        },
-        methods: {
-            async fetchReport() {
-                try {
-                    const response = await fetch('http://localhost:8080/api/views');
-                    this.reports = await response.json();
-                    console.log("Fetched data:", this.reports);
-                } catch (error) {
-                    console.error("Error fetching reports:", error);
-                }
-            },
-            home() {
-                window.location.href = '/';
-            },
-            goToReports() {
-                window.location.href = '/views'
-            },
-            async goToWishlistPage() {
-                window.location.href = `/wishlists?userId=${encodeURIComponent(this.userId)}`;
-            }
-        }
-    });
-</script>
-</body>
-</html>
Index: src/main/resources/static/Wishlist.html
===================================================================
--- src/main/resources/static/Wishlist.html	(revision 7deb3e2f2b25173055e53926791fba21c9d4dbac)
+++ 	(revision )
@@ -1,210 +1,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>SkyChase - Wishlist</title>
-    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
-    <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/css/all.min.css'>
-    <link rel="stylesheet" href="/css/main.css">
-    <style>
-        body {
-            background: url('images/sky.jpg') no-repeat center center fixed;
-            background-size: cover;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            justify-content: center;
-            height: 100vh;
-            margin: 0;
-            font-family: Arial, sans-serif;
-        }
-
-        .header {
-            position: absolute;
-            top: 0;
-            left: 0;
-            display: flex;
-            align-items: center;
-            background-color: rebeccapurple;
-            padding: 10px;
-            width: 100%;
-        }
-
-        .header img {
-            width: 40px;
-            height: 40px;
-            margin-right: 10px;
-        }
-
-        .header h1 {
-            color: white;
-            margin: 0;
-            font-size: 15px;
-            padding-right: 50px;
-        }
-        .header button{
-            background-color:rebeccapurple;
-        }
-        select {
-            -webkit-appearance: none;
-            -moz-appearance: none;
-            appearance: none;
-            border: 0;
-            outline: 0;
-            font: inherit;
-            width: 20em;
-            height: 3em;
-            padding: 0 4em 0 1em;
-            background: url(https://upload.wikimedia.org/wikipedia/commons/9/9d/Caret_down_font_awesome_whitevariation.svg) no-repeat right 0.8em center/1.4em, linear-gradient(to left, rgba(255, 255, 255, 0.3) 3em, rgba(255, 255, 255, 0.2) 3em);
-            color: white;
-            border-radius: 0.25em;
-            box-shadow: 0 0 1em 0 rgba(0, 0, 0, 0.2);
-            cursor: pointer;
-        }
-        select option {
-            color: inherit;
-            background-color: #320a28;
-        }
-        select:focus {
-            outline: none;
-        }
-        select::-ms-expand {
-            display: none;
-        }
-        .wishlist-content {
-            margin-top: 60px;
-            color: white;
-        }
-        #app {
-            text-align: center;
-
-        }
-        ul {
-            list-style-type: none;
-            border: 2px solid rebeccapurple;
-            width: 80%; /* Adjust the width as needed */
-            background-color: rebeccapurple;
-            position: relative;
-            display: flex;
-            flex-direction: column; /* Stack items vertically */
-            align-items: center; /* Center horizontally */
-            justify-content: center; /* Center vertically */
-            padding: 20px;
-            border-radius: 15px;
-            margin: 0 auto; /* Center the ul itself */
-            text-align: center; /* Center text inside the ul */
-        }
-
-        li {
-            font-size: 14px;
-            display: block; /* Make each item block-level */
-            padding: 10px;
-            width: 100%; /* Make li take full width inside ul */
-        }
-
-
-        .book {
-            background-color: white;
-            color: rebeccapurple;
-            width: 5em;
-            height: 3em;
-            align-content: center;
-            font-size: 14px;
-        }
-
-    </style>
-</head>
-<body>
-<div class="header">
-    <img src="/images/home.png" alt="Home Icon" @click="home">
-    <h1>SkyChase</h1>
-    <button @click="home">Log Out</button>
-</div>
-
-<div id="app" class="wishlist-content">
-    <h1>Your Wishlist</h1>
-    <ul>
-        <li v-if="wishlist.length === 0">Your wishlist is empty!</li>
-        <li v-else v-for="item in wishlist" :key="item.wishlistID">
-            Wishlist ID: {{ item.wishlistID }} | Added on: {{ item.date_added }}
-            <br>
-            <br>
-            <button @click="bookFlights(item.wishlistID)"  class="book">
-                Book
-            </button>
-        </li>
-    </ul>
-</div>
-
-<script>
-    new Vue({
-        el: '#app',
-        data: {
-            userId: '',
-            wishlist: [],
-            wishlistId:''
-        },
-        mounted() {
-            const params = new URLSearchParams(window.location.search);
-            this.userId = params.get("userId");
-            this.fetchWishlist();
-        },
-        methods: {
-            async fetchWishlist() {
-                try {
-                    const response = await fetch(`/api/wishlists/${this.userId}`);
-                    this.wishlist = await response.json();
-                } catch (error) {
-                    console.error('Error fetching wishlist:', error);
-                }
-            },
-            bookFlights(wishlistID) {
-                console.log(wishlistID);
-
-                axios.get(`/api/wishlists/flight/${encodeURIComponent(wishlistID)}`)
-                    .then(response => {
-                        const flightId = response.data;
-                        console.log(flightId);
-                        axios.get(`/api/flights/${encodeURIComponent(flightId)}`)
-                            .then(response => {
-                                const flightData = response.data;
-                                console.log(flightId);
-                                const bookingData = {
-                                    flightId: flightData.flightID,
-                                    bookingDate: new Date().toISOString().split('T')[0],
-                                    status: 'PENDING',
-                                    totalCost: flightData.price,
-                                    userId:this.userId
-                                };
-                                axios.post('/api/bookings', bookingData)
-                                    .then(response => {
-                                        const bookingID = response.data.bookingId;
-                                        alert("Booked successfully!");
-                                        window.location.href = `/transaction?amount=${encodeURIComponent(flightData.price)}&bookingId=${encodeURIComponent(bookingID)}&flightId=${encodeURIComponent(flightData.flightID)}&userId=${encodeURIComponent(this.userId)}`;
-                                    })
-                                    .catch(error => {
-                                        console.error("Error booking flight", error);
-                                        alert("There was an error creating your booking. Please try again.");
-                                    });
-                            })
-                            .catch(error =>{
-                                console.error(error)
-                                }
-                            )
-                    })
-                    .catch(error => {
-                        console.error("Error fetching flight", error);
-                    });
-
-            },
-            home() {
-                window.location.href = '/';
-            }
-        }
-    });
-</script>
-</body>
-</html>
Index: src/main/resources/static/WishlistPage.html
===================================================================
--- src/main/resources/static/WishlistPage.html	(revision 57e58a35be0538f1ab9cd2a435d4229175bc485f)
+++ src/main/resources/static/WishlistPage.html	(revision 57e58a35be0538f1ab9cd2a435d4229175bc485f)
@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Wishlist</title>
+    <link rel="stylesheet" href="/css/main.css">
+    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
+</head>
+<body>
+
+<div id="app" class="wishlist-page">
+    <header class="app-header">
+        <button class="logout-btn" @click="logout">Log Out</button>
+    </header>
+
+    <div class="main-content">
+        <div class="wishlist-container">
+            <h1>Your Wishlist</h1>
+
+            <div class="wishlist-list">
+                <div class="wishlist-item"
+                     v-for="flight in wishlistedFlights"
+                     :key="flight.id">
+                    <input type="checkbox"
+                           v-model="flight.selected"
+                           :id="'flight-' + flight.id" />
+                    <span>{{ flight.destination }} - {{ flight.date }} - ${{ flight.price }}</span>
+
+                    <button @click="showReviews(flight)" class="show-reviews-btn">
+                        Show Reviews
+                    </button>
+                </div>
+            </div>
+
+            <button v-if="selectedFlights.length" @click="showBookingModal" class="book-btn">
+                Book Selected Flights
+            </button>
+        </div>
+    </div>
+
+    <div v-if="showModal" class="modal-overlay">
+        <div class="modal">
+            <h3>Are you sure you want to book the selected flights?</h3>
+            <div class="modal-actions">
+                <button @click="confirmBooking" class="confirm-btn">Confirm</button>
+                <button @click="cancelBooking" class="cancel-btn">Cancel</button>
+            </div>
+        </div>
+    </div>
+</div>
+
+<script>
+    new Vue({
+        el: '#app',
+        data: {
+            flights: [
+                { id: 1, destination: 'New York', date: '2025-03-01', price: 200, selected: false, wishlisted: true },
+                { id: 2, destination: 'London', date: '2025-03-10', price: 250, selected: false, wishlisted: true },
+                { id: 3, destination: 'Paris', date: '2025-03-15', price: 300, selected: false, wishlisted: true },
+            ],
+            showModal: false
+        },
+        computed: {
+            wishlistedFlights() {
+                return this.flights.filter(flight => flight.wishlisted);
+            },
+            selectedFlights() {
+                return this.wishlistedFlights.filter(flight => flight.selected);
+            }
+        },
+        methods: {
+            showBookingModal() {
+                this.showModal = true;
+            },
+            confirmBooking() {
+                window.location.href = '/transaction';
+            },
+            cancelBooking() {
+                this.showModal = false;
+            },
+            showReviews(flight) {
+                window.location.href = `/review?flightId=${flight.id}`;
+            },
+            logout() {
+                window.location.href = '/';
+            }
+        }
+    });
+</script>
+
+</body>
+</html>
Index: src/main/resources/static/css/main.css
===================================================================
--- src/main/resources/static/css/main.css	(revision 7deb3e2f2b25173055e53926791fba21c9d4dbac)
+++ src/main/resources/static/css/main.css	(revision 57e58a35be0538f1ab9cd2a435d4229175bc485f)
@@ -1,4 +1,4 @@
 .signup-container {
-    background-image: url('../images/registration.jpg');
+    background-image: url('../../images/registration.jpg');
     background-size: cover;
     background-position: center;
Index: src/main/resources/static/index.html
===================================================================
--- src/main/resources/static/index.html	(revision 7deb3e2f2b25173055e53926791fba21c9d4dbac)
+++ src/main/resources/static/index.html	(revision 57e58a35be0538f1ab9cd2a435d4229175bc485f)
@@ -4,94 +4,63 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>SkyChase-mk</title>
-    <style>
-        body {
-            background: url('images/homepage.jpg') no-repeat center center fixed;
-            background-size: cover;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            justify-content: center;
-            height: 100vh;
-            margin: 0;
-            font-family: Arial, sans-serif;
-        }
-
-        .header {
-            position: absolute;
-            top: 0;
-            left: 0;
-            display: flex;
-            align-items: center;
-            background-color:rebeccapurple;
-            padding: 10px;
-            width: 100%;
-        }
-
-        .header img {
-            width: 40px;
-            height: 40px;
-            margin-right: 10px;
-        }
-
-        .header h1 {
-            color: white;
-            margin: 0;
-            font-size: 15px;
-            padding-right: 50px;
-        }
-
-        .buttons {
-            text-align: center;
-        }
-
-        .buttons button {
-            padding: 15px 30px;
-            margin: 10px;
-            font-size: 18px;
-            border: none;
-            border-radius: 5px;
-            cursor: pointer;
-            transition: 0.3s;
-        }
-
-        .signup {
-            background-color: rebeccapurple;
-            color: white;
-        }
-
-        .signup:hover {
-            background-color: mediumpurple;
-        }
-
-        .login {
-            background-color: #007bff;
-            color: white;
-        }
-
-        .login:hover {
-            background-color: #0056b3;
-        }
-        .adminlogin {
-            top:0;
-            right: 0;
-            background-color: rebeccapurple;
-            border:0;
-            color:white;
-            padding: 0 1200px;
-        }
-    </style>
+    <title>Support Tickets</title>
+    <link rel="stylesheet" href="/css/main.css">
+    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
 </head>
 <body>
-<div class="header">
-    <img src="/images/home.png" alt="Home Icon">
-    <h1>SkyChase</h1>
-    <button class="adminlogin" onclick="location.href='/admin'">Admin?</button>
+
+<div id="app" class="support-ticket-container">
+    <h1>Support Tickets</h1>
+    <div class="ticket-layout">
+        <!-- Left side: Ticket list -->
+        <div class="ticket-list">
+            <div class="ticket-item"
+                 v-for="ticket in tickets"
+                 :key="ticket.id"
+                 @click="selectTicket(ticket)"
+                 :class="{'active': selectedTicket && selectedTicket.id === ticket.id}">
+                <div class="ticket-info">
+                    <p><strong>Subject:</strong> {{ ticket.subject }}</p>
+                    <p><strong>Date:</strong> {{ ticket.date }}</p>
+                </div>
+                <div class="ticket-actions">
+                    <button @click.stop="resolveTicket(ticket.id)">Resolve</button>
+                </div>
+            </div>
+        </div>
+
+        <!-- Right side: Ticket details -->
+        <div class="ticket-details" v-if="selectedTicket">
+            <h2>Ticket Details</h2>
+            <p><strong>Subject:</strong> {{ selectedTicket.subject }}</p>
+            <p><strong>Description:</strong> {{ selectedTicket.description }}</p>
+            <p><strong>Date:</strong> {{ selectedTicket.date }}</p>
+            <button @click="resolveTicket(selectedTicket.id)">Resolve</button>
+        </div>
+    </div>
 </div>
 
-<div class="buttons">
-    <button class="signup" onclick="location.href='/signup'">Sign Up</button>
-    <button class="login" onclick="location.href='/login'">Login</button>
-</div>
+<script>
+    new Vue({
+        el: '#app',
+        data: {
+            tickets: [
+                { id: 1, subject: 'Flight booking issue', description: 'Customer could not book a flight.', date: '2025-02-01' },
+                { id: 2, subject: 'Payment failure', description: 'Payment was not processed during checkout.', date: '2025-02-02' }
+            ],
+            selectedTicket: null
+        },
+        methods: {
+            resolveTicket(id) {
+                alert(`Ticket ${id} resolved.`);
+                // Optionally, you can update the ticket's status or remove it
+            },
+            selectTicket(ticket) {
+                this.selectedTicket = ticket;
+            }
+        }
+    });
+</script>
+
 </body>
 </html>
