Index: src/main/resources/static/ViewReport.html
===================================================================
--- src/main/resources/static/ViewReport.html	(revision 62bba0c73980e31e95db489d91493dc186ed2439)
+++ src/main/resources/static/ViewReport.html	(revision 62bba0c73980e31e95db489d91493dc186ed2439)
@@ -0,0 +1,191 @@
+<!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>
