From 58665ffeb4f65976f593f2252a19d9a56d16204a Mon Sep 17 00:00:00 2001
From: Ali Raza <dejavu87@gmail.com>
Date: Tue, 6 Aug 2024 13:26:02 +0000
Subject: [PATCH] firebase Read enabled for both views

---
 components/Podium.vue |  96 ++++---
 firebaseConfig.ts     |  46 ++++
 package-lock.json     | 611 ++++++++++++++++++++++++++++++++++++++++++
 package.json          |   2 +
 pages/performance.vue | 380 +++++++++++++-------------
 5 files changed, 906 insertions(+), 229 deletions(-)
 create mode 100644 firebaseConfig.ts

diff --git a/components/Podium.vue b/components/Podium.vue
index b7a5e98..c5c018c 100644
--- a/components/Podium.vue
+++ b/components/Podium.vue
@@ -1,35 +1,67 @@
 <template>
-    <h2 class="scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0">
-      Currently Leading
-    </h2>
-
-    <div class="flex items-end justify-center space-x-4 pt-4">
-        <!-- Second Place -->
-        <div class="bg-gray-300 text-gray-800 w-40 h-60 flex flex-col items-center justify-end rounded-t-lg shadow-lg">
-            <div class="bg-yellow-500 text-white w-full text-center py-2 rounded-t-lg">2nd Place</div>
-            <div class="bg-white w-full text-center py-4">Website B</div>
-        </div>
-
-        <!-- First Place -->
-        <div class="bg-gray-300 text-gray-800 w-40 h-72 flex flex-col items-center justify-end rounded-t-lg shadow-lg">
-            <div class="bg-yellow-500 text-white w-full text-center py-2 rounded-t-lg">1st Place</div>
-            <div class="bg-white w-full text-center py-4">Website A</div>
-        </div>
-
-        <!-- Third Place -->
-        <div class="bg-gray-300 text-gray-800 w-40 h-48 flex flex-col items-center justify-end rounded-t-lg shadow-lg">
-            <div class="bg-yellow-500 text-white w-full text-center py-2 rounded-t-lg">3rd Place</div>
-            <div class="bg-white w-full text-center py-4">Website C</div>
-        </div>
+  <h2 class="scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0">
+    Currently Leading
+  </h2>
+
+  <div class="flex items-end justify-center space-x-4 pt-4">
+    <div
+      v-for="(item, index) in sortedLeaderboard"
+      :key="index"
+      :class="`bg-gray-300 text-gray-800 w-40 flex flex-col items-center justify-end rounded-t-lg shadow-lg ${
+        index === 0 ? 'h-72' : index === 1 ? 'h-60' : 'h-48'
+      }`">
+      <div class="bg-yellow-500 text-white w-full text-center py-2 rounded-t-lg">
+        {{ index + 1 }}{{ index === 0 ? 'st' : index === 1 ? 'nd' : 'rd' }} Place
+      </div>
+      <div class="bg-white w-full text-center py-4">{{ item.url }}</div>
     </div>
+  </div>
 </template>
-  
-  <script setup>
-  
-  // Example data, replace with your actual data source
-  const leaderboard = ref([
-    { url: 'Dummy URL 1', status: 'Active', score: 85, downtime: '0' },
-    { url: 'Dummy URL 2', status: 'Active', score: 92, downtime: '0' },
-    { url: 'Dummy URL 3', status: 'Active', score: 78, downtime: '0' },
-  ]);
-  </script>
\ No newline at end of file
+
+<script setup lang="ts">
+import { ref, onMounted, computed } from 'vue';
+import { db, collection, getDocs, query, where, orderBy, limit, QuerySnapshot } from '../firebaseConfig';
+import { Timestamp } from 'firebase/firestore';
+
+interface PerformanceItem {
+  url: string;
+  performanceScore: number;
+  responseTime: number;
+  timestamp: Timestamp;
+}
+
+interface DocumentData {
+  [field: string]: any;
+}
+
+const leaderboard = ref<PerformanceItem[]>([]);
+
+const fetchPerformanceData = async () => {
+  const now = new Date();
+  const startOfMonth = new Date(now.getFullYear(), now.getMonth(), 1);
+  const endOfMonth = new Date(now.getFullYear(), now.getMonth() + 1, 0);
+
+  const q = query(
+    collection(db, 'performanceData'),
+    where('timestamp', '>=', startOfMonth),
+    where('timestamp', '<=', endOfMonth),
+    orderBy('performanceScore', 'desc'),
+    orderBy('responseTime', 'asc'),
+    limit(3)
+  );
+
+  const querySnapshot: QuerySnapshot<DocumentData> = await getDocs(q);
+  leaderboard.value = querySnapshot.docs.map(doc => ({
+    url: doc.data().url,
+    performanceScore: doc.data().performanceScore,
+    responseTime: doc.data().responseTime,
+    timestamp: doc.data().timestamp,
+  }));
+};
+
+onMounted(() => {
+  fetchPerformanceData();
+});
+
+const sortedLeaderboard = computed(() => leaderboard.value);
+</script>
\ No newline at end of file
diff --git a/firebaseConfig.ts b/firebaseConfig.ts
new file mode 100644
index 0000000..b75c36d
--- /dev/null
+++ b/firebaseConfig.ts
@@ -0,0 +1,46 @@
+// firebaseConfig.ts
+import { initializeApp } from "firebase/app";
+import {
+  getFirestore,
+  collection,
+  getDocs,
+  query,
+  where,
+  orderBy,
+  limit,
+  QuerySnapshot,
+} from "firebase/firestore";
+
+// Replace with your Firebase configuration
+// const firebaseConfig = {
+//   apiKey: "YOUR_API_KEY",
+//   authDomain: "YOUR_AUTH_DOMAIN",
+//   projectId: "YOUR_PROJECT_ID",
+//   storageBucket: "YOUR_STORAGE_BUCKET",
+//   messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
+//   appId: "YOUR_APP_ID",
+// };
+
+console.log("key", process.env.FIREBASE_API_KEY);
+console.log(process.env.FIREBASE_AUTH_DOMAIN);
+console.log(process.env.FIREBASE_PROJECT_ID);
+console.log(process.env.FIREBASE_STORAGE_BUCKET);
+console.log(process.env.FIREBASE_APP_ID);
+
+const firebaseConfig = {
+  apiKey: process.env.FIREBASE_API_KEY,
+  authDomain: process.env.FIREBASE_AUTH_DOMAIN,
+  projectId: "watchtower-dev-587f7",
+  storageBucket: process.env.FIREBASE_STORAGE_BUCKET,
+  messagingSenderId: process.env.FIREBASE_MESSAGING_SENDER_ID,
+  appId: process.env.FIREBASE_APP_ID,
+  measurementId: "G-C45XLSC3LP",
+};
+
+// Initialize Firebase
+const app = initializeApp(firebaseConfig);
+
+// Initialize Firestore
+const db = getFirestore(app);
+
+export { db, collection, getDocs, query, where, orderBy, limit, QuerySnapshot };
diff --git a/package-lock.json b/package-lock.json
index d7ebda9..6c656e4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7,9 +7,11 @@
       "name": "nuxt-app",
       "hasInstallScript": true,
       "dependencies": {
+        "@nuxtjs/dotenv": "^1.4.2",
         "@radix-icons/vue": "^1.0.0",
         "class-variance-authority": "^0.7.0",
         "clsx": "^2.1.1",
+        "firebase": "^10.12.5",
         "nuxt": "^3.12.2",
         "radix-vue": "^1.8.5",
         "shadcn-nuxt": "^0.10.4",
@@ -982,6 +984,522 @@
         "node": ">=14"
       }
     },
+    "node_modules/@firebase/analytics": {
+      "version": "0.10.7",
+      "resolved": "https://registry.npmjs.org/@firebase/analytics/-/analytics-0.10.7.tgz",
+      "integrity": "sha512-GE29uTT6y/Jv2EP0OjpTezeTQZ5FTCTaZXKrrdVGjb/t35AU4u/jiU+hUwUPpuK8fqhhiHkS/AawE3a3ZK/a9Q==",
+      "dependencies": {
+        "@firebase/component": "0.6.8",
+        "@firebase/installations": "0.6.8",
+        "@firebase/logger": "0.4.2",
+        "@firebase/util": "1.9.7",
+        "tslib": "^2.1.0"
+      },
+      "peerDependencies": {
+        "@firebase/app": "0.x"
+      }
+    },
+    "node_modules/@firebase/analytics-compat": {
+      "version": "0.2.13",
+      "resolved": "https://registry.npmjs.org/@firebase/analytics-compat/-/analytics-compat-0.2.13.tgz",
+      "integrity": "sha512-aZ4wGfNDMsCxhKzDbK2g1aV0JKsdQ9FbeIsjpNJPzhahV0XYj+z36Y4RNLPpG/6hHU4gxnezxs+yn3HhHkNL8w==",
+      "dependencies": {
+        "@firebase/analytics": "0.10.7",
+        "@firebase/analytics-types": "0.8.2",
+        "@firebase/component": "0.6.8",
+        "@firebase/util": "1.9.7",
+        "tslib": "^2.1.0"
+      },
+      "peerDependencies": {
+        "@firebase/app-compat": "0.x"
+      }
+    },
+    "node_modules/@firebase/analytics-types": {
+      "version": "0.8.2",
+      "resolved": "https://registry.npmjs.org/@firebase/analytics-types/-/analytics-types-0.8.2.tgz",
+      "integrity": "sha512-EnzNNLh+9/sJsimsA/FGqzakmrAUKLeJvjRHlg8df1f97NLUlFidk9600y0ZgWOp3CAxn6Hjtk+08tixlUOWyw=="
+    },
+    "node_modules/@firebase/app": {
+      "version": "0.10.8",
+      "resolved": "https://registry.npmjs.org/@firebase/app/-/app-0.10.8.tgz",
+      "integrity": "sha512-xSLmW0/RShcnUEXH7l+wC0AFWaUtty4tUFF2loIgbtXTRmra0UH/SqYDf/IcfreUninRrCsusNmvoTidGkXJPw==",
+      "dependencies": {
+        "@firebase/component": "0.6.8",
+        "@firebase/logger": "0.4.2",
+        "@firebase/util": "1.9.7",
+        "idb": "7.1.1",
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/@firebase/app-check": {
+      "version": "0.8.7",
+      "resolved": "https://registry.npmjs.org/@firebase/app-check/-/app-check-0.8.7.tgz",
+      "integrity": "sha512-EkOeJcMKVR0zZ6z/jqcFTqHb/xq+TVIRIuBNGHdpcIuFU1czhSlegvqv2+nC+nFrkD8M6Xvd3tAlUOkdbMeS6A==",
+      "dependencies": {
+        "@firebase/component": "0.6.8",
+        "@firebase/logger": "0.4.2",
+        "@firebase/util": "1.9.7",
+        "tslib": "^2.1.0"
+      },
+      "peerDependencies": {
+        "@firebase/app": "0.x"
+      }
+    },
+    "node_modules/@firebase/app-check-compat": {
+      "version": "0.3.14",
+      "resolved": "https://registry.npmjs.org/@firebase/app-check-compat/-/app-check-compat-0.3.14.tgz",
+      "integrity": "sha512-kK3bPfojAfXE53W+20rxMqIxrloFswXG9vh4kEdYL6Wa2IB3sD5++2dPiK3yGxl8oQiqS8qL2wcKB5/xLpEVEg==",
+      "dependencies": {
+        "@firebase/app-check": "0.8.7",
+        "@firebase/app-check-types": "0.5.2",
+        "@firebase/component": "0.6.8",
+        "@firebase/logger": "0.4.2",
+        "@firebase/util": "1.9.7",
+        "tslib": "^2.1.0"
+      },
+      "peerDependencies": {
+        "@firebase/app-compat": "0.x"
+      }
+    },
+    "node_modules/@firebase/app-check-interop-types": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/@firebase/app-check-interop-types/-/app-check-interop-types-0.3.2.tgz",
+      "integrity": "sha512-LMs47Vinv2HBMZi49C09dJxp0QT5LwDzFaVGf/+ITHe3BlIhUiLNttkATSXplc89A2lAaeTqjgqVkiRfUGyQiQ=="
+    },
+    "node_modules/@firebase/app-check-types": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/@firebase/app-check-types/-/app-check-types-0.5.2.tgz",
+      "integrity": "sha512-FSOEzTzL5bLUbD2co3Zut46iyPWML6xc4x+78TeaXMSuJap5QObfb+rVvZJtla3asN4RwU7elaQaduP+HFizDA=="
+    },
+    "node_modules/@firebase/app-compat": {
+      "version": "0.2.38",
+      "resolved": "https://registry.npmjs.org/@firebase/app-compat/-/app-compat-0.2.38.tgz",
+      "integrity": "sha512-36ZrSvkYLW7QR01Sii2X+IY18ErMpRg6e2B2f/DVTtJBolthwXOnNBps+wvaVBvegdvdVPspgDXZUV0ppqh45w==",
+      "dependencies": {
+        "@firebase/app": "0.10.8",
+        "@firebase/component": "0.6.8",
+        "@firebase/logger": "0.4.2",
+        "@firebase/util": "1.9.7",
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/@firebase/app-types": {
+      "version": "0.9.2",
+      "resolved": "https://registry.npmjs.org/@firebase/app-types/-/app-types-0.9.2.tgz",
+      "integrity": "sha512-oMEZ1TDlBz479lmABwWsWjzHwheQKiAgnuKxE0pz0IXCVx7/rtlkx1fQ6GfgK24WCrxDKMplZrT50Kh04iMbXQ=="
+    },
+    "node_modules/@firebase/auth": {
+      "version": "1.7.6",
+      "resolved": "https://registry.npmjs.org/@firebase/auth/-/auth-1.7.6.tgz",
+      "integrity": "sha512-T+lA5xoug9CByGYkD5WkfTh2ujEYq/frGZPbk0H+fNU6fNl7nqg88KcsmzsC6Fsqbjm3LLEb/i6wJvF6NSNEig==",
+      "dependencies": {
+        "@firebase/component": "0.6.8",
+        "@firebase/logger": "0.4.2",
+        "@firebase/util": "1.9.7",
+        "tslib": "^2.1.0",
+        "undici": "5.28.4"
+      },
+      "peerDependencies": {
+        "@firebase/app": "0.x",
+        "@react-native-async-storage/async-storage": "^1.18.1"
+      },
+      "peerDependenciesMeta": {
+        "@react-native-async-storage/async-storage": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@firebase/auth-compat": {
+      "version": "0.5.11",
+      "resolved": "https://registry.npmjs.org/@firebase/auth-compat/-/auth-compat-0.5.11.tgz",
+      "integrity": "sha512-7rE3MkQDoWwI2qd8qsra4/QZCO2GzQSbCL6AVQpult9+Nbimg+5A+YeHxpLTcYAxUV6HDg2CqTDQreFLhcm1CQ==",
+      "dependencies": {
+        "@firebase/auth": "1.7.6",
+        "@firebase/auth-types": "0.12.2",
+        "@firebase/component": "0.6.8",
+        "@firebase/util": "1.9.7",
+        "tslib": "^2.1.0",
+        "undici": "5.28.4"
+      },
+      "peerDependencies": {
+        "@firebase/app-compat": "0.x"
+      }
+    },
+    "node_modules/@firebase/auth-interop-types": {
+      "version": "0.2.3",
+      "resolved": "https://registry.npmjs.org/@firebase/auth-interop-types/-/auth-interop-types-0.2.3.tgz",
+      "integrity": "sha512-Fc9wuJGgxoxQeavybiuwgyi+0rssr76b+nHpj+eGhXFYAdudMWyfBHvFL/I5fEHniUM/UQdFzi9VXJK2iZF7FQ=="
+    },
+    "node_modules/@firebase/auth-types": {
+      "version": "0.12.2",
+      "resolved": "https://registry.npmjs.org/@firebase/auth-types/-/auth-types-0.12.2.tgz",
+      "integrity": "sha512-qsEBaRMoGvHO10unlDJhaKSuPn4pyoTtlQuP1ghZfzB6rNQPuhp/N/DcFZxm9i4v0SogjCbf9reWupwIvfmH6w==",
+      "peerDependencies": {
+        "@firebase/app-types": "0.x",
+        "@firebase/util": "1.x"
+      }
+    },
+    "node_modules/@firebase/component": {
+      "version": "0.6.8",
+      "resolved": "https://registry.npmjs.org/@firebase/component/-/component-0.6.8.tgz",
+      "integrity": "sha512-LcNvxGLLGjBwB0dJUsBGCej2fqAepWyBubs4jt1Tiuns7QLbXHuyObZ4aMeBjZjWx4m8g1LoVI9QFpSaq/k4/g==",
+      "dependencies": {
+        "@firebase/util": "1.9.7",
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/@firebase/database": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/@firebase/database/-/database-1.0.7.tgz",
+      "integrity": "sha512-wjXr5AO8RPxVVg7rRCYffT7FMtBjHRfJ9KMwi19MbOf0vBf0H9YqW3WCgcnLpXI6ehiUcU3z3qgPnnU0nK6SnA==",
+      "dependencies": {
+        "@firebase/app-check-interop-types": "0.3.2",
+        "@firebase/auth-interop-types": "0.2.3",
+        "@firebase/component": "0.6.8",
+        "@firebase/logger": "0.4.2",
+        "@firebase/util": "1.9.7",
+        "faye-websocket": "0.11.4",
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/@firebase/database-compat": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/@firebase/database-compat/-/database-compat-1.0.7.tgz",
+      "integrity": "sha512-R/3B+VVzEFN5YcHmfWns3eitA8fHLTL03io+FIoMcTYkajFnrBdS3A+g/KceN9omP7FYYYGTQWF9lvbEx6eMEg==",
+      "dependencies": {
+        "@firebase/component": "0.6.8",
+        "@firebase/database": "1.0.7",
+        "@firebase/database-types": "1.0.4",
+        "@firebase/logger": "0.4.2",
+        "@firebase/util": "1.9.7",
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/@firebase/database-types": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@firebase/database-types/-/database-types-1.0.4.tgz",
+      "integrity": "sha512-mz9ZzbH6euFXbcBo+enuJ36I5dR5w+enJHHjy9Y5ThCdKUseqfDjW3vCp1YxE9zygFCSjJJ/z1cQ+zodvUcwPQ==",
+      "dependencies": {
+        "@firebase/app-types": "0.9.2",
+        "@firebase/util": "1.9.7"
+      }
+    },
+    "node_modules/@firebase/firestore": {
+      "version": "4.6.5",
+      "resolved": "https://registry.npmjs.org/@firebase/firestore/-/firestore-4.6.5.tgz",
+      "integrity": "sha512-0+Ascaht4qUzj4pCopMPWmoAujk8HKjwCpaNYOOjbYMZ65RVfZPsfZwwbWi/zWMXj6xvPsai5oBiErUUkrLwNw==",
+      "dependencies": {
+        "@firebase/component": "0.6.8",
+        "@firebase/logger": "0.4.2",
+        "@firebase/util": "1.9.7",
+        "@firebase/webchannel-wrapper": "1.0.1",
+        "@grpc/grpc-js": "~1.9.0",
+        "@grpc/proto-loader": "^0.7.8",
+        "tslib": "^2.1.0",
+        "undici": "5.28.4"
+      },
+      "engines": {
+        "node": ">=10.10.0"
+      },
+      "peerDependencies": {
+        "@firebase/app": "0.x"
+      }
+    },
+    "node_modules/@firebase/firestore-compat": {
+      "version": "0.3.34",
+      "resolved": "https://registry.npmjs.org/@firebase/firestore-compat/-/firestore-compat-0.3.34.tgz",
+      "integrity": "sha512-OBP2F/Ccydl2U2j8XIfpKBxf0EnQHEhbZ4LTwbSS2QlG9+8TwhvKFkKk/ZljWYqaype+qFKPuXZ5flCqYEETeA==",
+      "dependencies": {
+        "@firebase/component": "0.6.8",
+        "@firebase/firestore": "4.6.5",
+        "@firebase/firestore-types": "3.0.2",
+        "@firebase/util": "1.9.7",
+        "tslib": "^2.1.0"
+      },
+      "peerDependencies": {
+        "@firebase/app-compat": "0.x"
+      }
+    },
+    "node_modules/@firebase/firestore-types": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@firebase/firestore-types/-/firestore-types-3.0.2.tgz",
+      "integrity": "sha512-wp1A+t5rI2Qc/2q7r2ZpjUXkRVPtGMd6zCLsiWurjsQpqPgFin3AhNibKcIzoF2rnToNa/XYtyWXuifjOOwDgg==",
+      "peerDependencies": {
+        "@firebase/app-types": "0.x",
+        "@firebase/util": "1.x"
+      }
+    },
+    "node_modules/@firebase/firestore/node_modules/@grpc/grpc-js": {
+      "version": "1.9.15",
+      "resolved": "https://registry.npmjs.org/@grpc/grpc-js/-/grpc-js-1.9.15.tgz",
+      "integrity": "sha512-nqE7Hc0AzI+euzUwDAy0aY5hCp10r734gMGRdU+qOPX0XSceI2ULrcXB5U2xSc5VkWwalCj4M7GzCAygZl2KoQ==",
+      "dependencies": {
+        "@grpc/proto-loader": "^0.7.8",
+        "@types/node": ">=12.12.47"
+      },
+      "engines": {
+        "node": "^8.13.0 || >=10.10.0"
+      }
+    },
+    "node_modules/@firebase/functions": {
+      "version": "0.11.6",
+      "resolved": "https://registry.npmjs.org/@firebase/functions/-/functions-0.11.6.tgz",
+      "integrity": "sha512-GPfIBPtpwQvsC7SQbgaUjLTdja0CsNwMoKSgrzA1FGGRk4NX6qO7VQU6XCwBiAFWbpbQex6QWkSMsCzLx1uibQ==",
+      "dependencies": {
+        "@firebase/app-check-interop-types": "0.3.2",
+        "@firebase/auth-interop-types": "0.2.3",
+        "@firebase/component": "0.6.8",
+        "@firebase/messaging-interop-types": "0.2.2",
+        "@firebase/util": "1.9.7",
+        "tslib": "^2.1.0",
+        "undici": "5.28.4"
+      },
+      "peerDependencies": {
+        "@firebase/app": "0.x"
+      }
+    },
+    "node_modules/@firebase/functions-compat": {
+      "version": "0.3.12",
+      "resolved": "https://registry.npmjs.org/@firebase/functions-compat/-/functions-compat-0.3.12.tgz",
+      "integrity": "sha512-r3XUb5VlITWpML46JymfJPkK6I9j4SNlO7qWIXUc0TUmkv0oAfVoiIt1F83/NuMZXaGr4YWA/794nVSy4GV8tw==",
+      "dependencies": {
+        "@firebase/component": "0.6.8",
+        "@firebase/functions": "0.11.6",
+        "@firebase/functions-types": "0.6.2",
+        "@firebase/util": "1.9.7",
+        "tslib": "^2.1.0"
+      },
+      "peerDependencies": {
+        "@firebase/app-compat": "0.x"
+      }
+    },
+    "node_modules/@firebase/functions-types": {
+      "version": "0.6.2",
+      "resolved": "https://registry.npmjs.org/@firebase/functions-types/-/functions-types-0.6.2.tgz",
+      "integrity": "sha512-0KiJ9lZ28nS2iJJvimpY4nNccV21rkQyor5Iheu/nq8aKXJqtJdeSlZDspjPSBBiHRzo7/GMUttegnsEITqR+w=="
+    },
+    "node_modules/@firebase/installations": {
+      "version": "0.6.8",
+      "resolved": "https://registry.npmjs.org/@firebase/installations/-/installations-0.6.8.tgz",
+      "integrity": "sha512-57V374qdb2+wT5v7+ntpLXBjZkO6WRgmAUbVkRfFTM/4t980p0FesbqTAcOIiM8U866UeuuuF8lYH70D3jM/jQ==",
+      "dependencies": {
+        "@firebase/component": "0.6.8",
+        "@firebase/util": "1.9.7",
+        "idb": "7.1.1",
+        "tslib": "^2.1.0"
+      },
+      "peerDependencies": {
+        "@firebase/app": "0.x"
+      }
+    },
+    "node_modules/@firebase/installations-compat": {
+      "version": "0.2.8",
+      "resolved": "https://registry.npmjs.org/@firebase/installations-compat/-/installations-compat-0.2.8.tgz",
+      "integrity": "sha512-pI2q8JFHB7yIq/szmhzGSWXtOvtzl6tCUmyykv5C8vvfOVJUH6mP4M4iwjbK8S1JotKd/K70+JWyYlxgQ0Kpyw==",
+      "dependencies": {
+        "@firebase/component": "0.6.8",
+        "@firebase/installations": "0.6.8",
+        "@firebase/installations-types": "0.5.2",
+        "@firebase/util": "1.9.7",
+        "tslib": "^2.1.0"
+      },
+      "peerDependencies": {
+        "@firebase/app-compat": "0.x"
+      }
+    },
+    "node_modules/@firebase/installations-types": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/@firebase/installations-types/-/installations-types-0.5.2.tgz",
+      "integrity": "sha512-que84TqGRZJpJKHBlF2pkvc1YcXrtEDOVGiDjovP/a3s6W4nlbohGXEsBJo0JCeeg/UG9A+DEZVDUV9GpklUzA==",
+      "peerDependencies": {
+        "@firebase/app-types": "0.x"
+      }
+    },
+    "node_modules/@firebase/logger": {
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/@firebase/logger/-/logger-0.4.2.tgz",
+      "integrity": "sha512-Q1VuA5M1Gjqrwom6I6NUU4lQXdo9IAQieXlujeHZWvRt1b7qQ0KwBaNAjgxG27jgF9/mUwsNmO8ptBCGVYhB0A==",
+      "dependencies": {
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/@firebase/messaging": {
+      "version": "0.12.10",
+      "resolved": "https://registry.npmjs.org/@firebase/messaging/-/messaging-0.12.10.tgz",
+      "integrity": "sha512-fGbxJPKpl2DIKNJGhbk4mYPcM+qE2gl91r6xPoiol/mN88F5Ym6UeRdMVZah+pijh9WxM55alTYwXuW40r1Y2Q==",
+      "dependencies": {
+        "@firebase/component": "0.6.8",
+        "@firebase/installations": "0.6.8",
+        "@firebase/messaging-interop-types": "0.2.2",
+        "@firebase/util": "1.9.7",
+        "idb": "7.1.1",
+        "tslib": "^2.1.0"
+      },
+      "peerDependencies": {
+        "@firebase/app": "0.x"
+      }
+    },
+    "node_modules/@firebase/messaging-compat": {
+      "version": "0.2.10",
+      "resolved": "https://registry.npmjs.org/@firebase/messaging-compat/-/messaging-compat-0.2.10.tgz",
+      "integrity": "sha512-FXQm7rcowkDm8kFLduHV35IRYCRo+Ng0PIp/t1+EBuEbyplaKkGjZ932pE+owf/XR+G/60ku2QRBptRGLXZydg==",
+      "dependencies": {
+        "@firebase/component": "0.6.8",
+        "@firebase/messaging": "0.12.10",
+        "@firebase/util": "1.9.7",
+        "tslib": "^2.1.0"
+      },
+      "peerDependencies": {
+        "@firebase/app-compat": "0.x"
+      }
+    },
+    "node_modules/@firebase/messaging-interop-types": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/@firebase/messaging-interop-types/-/messaging-interop-types-0.2.2.tgz",
+      "integrity": "sha512-l68HXbuD2PPzDUOFb3aG+nZj5KA3INcPwlocwLZOzPp9rFM9yeuI9YLl6DQfguTX5eAGxO0doTR+rDLDvQb5tA=="
+    },
+    "node_modules/@firebase/performance": {
+      "version": "0.6.8",
+      "resolved": "https://registry.npmjs.org/@firebase/performance/-/performance-0.6.8.tgz",
+      "integrity": "sha512-F+alziiIZ6Yn8FG47mxwljq+4XkgkT2uJIFRlkyViUQRLzrogaUJW6u/+6ZrePXnouKlKIwzqos3PVJraPEcCA==",
+      "dependencies": {
+        "@firebase/component": "0.6.8",
+        "@firebase/installations": "0.6.8",
+        "@firebase/logger": "0.4.2",
+        "@firebase/util": "1.9.7",
+        "tslib": "^2.1.0"
+      },
+      "peerDependencies": {
+        "@firebase/app": "0.x"
+      }
+    },
+    "node_modules/@firebase/performance-compat": {
+      "version": "0.2.8",
+      "resolved": "https://registry.npmjs.org/@firebase/performance-compat/-/performance-compat-0.2.8.tgz",
+      "integrity": "sha512-o7TFClRVJd3VIBoY7KZQqtCeW0PC6v9uBzM6Lfw3Nc9D7hM6OonqecYvh7NwJ6R14k+xM27frLS4BcCvFHKw2A==",
+      "dependencies": {
+        "@firebase/component": "0.6.8",
+        "@firebase/logger": "0.4.2",
+        "@firebase/performance": "0.6.8",
+        "@firebase/performance-types": "0.2.2",
+        "@firebase/util": "1.9.7",
+        "tslib": "^2.1.0"
+      },
+      "peerDependencies": {
+        "@firebase/app-compat": "0.x"
+      }
+    },
+    "node_modules/@firebase/performance-types": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/@firebase/performance-types/-/performance-types-0.2.2.tgz",
+      "integrity": "sha512-gVq0/lAClVH5STrIdKnHnCo2UcPLjJlDUoEB/tB4KM+hAeHUxWKnpT0nemUPvxZ5nbdY/pybeyMe8Cs29gEcHA=="
+    },
+    "node_modules/@firebase/remote-config": {
+      "version": "0.4.8",
+      "resolved": "https://registry.npmjs.org/@firebase/remote-config/-/remote-config-0.4.8.tgz",
+      "integrity": "sha512-AMLqe6wfIRnjc6FkCWOSUjhc1fSTEf8o+cv1NolFvbiJ/tU+TqN4pI7pT+MIKQzNiq5fxLehkOx+xtAQBxPJKQ==",
+      "dependencies": {
+        "@firebase/component": "0.6.8",
+        "@firebase/installations": "0.6.8",
+        "@firebase/logger": "0.4.2",
+        "@firebase/util": "1.9.7",
+        "tslib": "^2.1.0"
+      },
+      "peerDependencies": {
+        "@firebase/app": "0.x"
+      }
+    },
+    "node_modules/@firebase/remote-config-compat": {
+      "version": "0.2.8",
+      "resolved": "https://registry.npmjs.org/@firebase/remote-config-compat/-/remote-config-compat-0.2.8.tgz",
+      "integrity": "sha512-UxSFOp6dzFj2AHB8Bq/BYtbq5iFyizKx4Rd6WxAdaKYM8cnPMeK+l2v+Oogtjae+AeyHRI+MfL2acsfVe5cd2A==",
+      "dependencies": {
+        "@firebase/component": "0.6.8",
+        "@firebase/logger": "0.4.2",
+        "@firebase/remote-config": "0.4.8",
+        "@firebase/remote-config-types": "0.3.2",
+        "@firebase/util": "1.9.7",
+        "tslib": "^2.1.0"
+      },
+      "peerDependencies": {
+        "@firebase/app-compat": "0.x"
+      }
+    },
+    "node_modules/@firebase/remote-config-types": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/@firebase/remote-config-types/-/remote-config-types-0.3.2.tgz",
+      "integrity": "sha512-0BC4+Ud7y2aPTyhXJTMTFfrGGLqdYXrUB9sJVAB8NiqJswDTc4/2qrE/yfUbnQJhbSi6ZaTTBKyG3n1nplssaA=="
+    },
+    "node_modules/@firebase/storage": {
+      "version": "0.12.6",
+      "resolved": "https://registry.npmjs.org/@firebase/storage/-/storage-0.12.6.tgz",
+      "integrity": "sha512-Zgb9WuehJxzhj7pGXUvkAEaH+3HvLjD9xSZ9nepuXf5f8378xME7oGJtREr/RnepdDA5YW0XIxe0QQBNHpe1nw==",
+      "dependencies": {
+        "@firebase/component": "0.6.8",
+        "@firebase/util": "1.9.7",
+        "tslib": "^2.1.0",
+        "undici": "5.28.4"
+      },
+      "peerDependencies": {
+        "@firebase/app": "0.x"
+      }
+    },
+    "node_modules/@firebase/storage-compat": {
+      "version": "0.3.9",
+      "resolved": "https://registry.npmjs.org/@firebase/storage-compat/-/storage-compat-0.3.9.tgz",
+      "integrity": "sha512-WWgAp5bTW961oIsCc9+98m4MIVKpEqztAlIngfHfwO/x3DYoBPRl/awMRG3CAXyVxG+7B7oHC5IsnqM+vTwx2A==",
+      "dependencies": {
+        "@firebase/component": "0.6.8",
+        "@firebase/storage": "0.12.6",
+        "@firebase/storage-types": "0.8.2",
+        "@firebase/util": "1.9.7",
+        "tslib": "^2.1.0"
+      },
+      "peerDependencies": {
+        "@firebase/app-compat": "0.x"
+      }
+    },
+    "node_modules/@firebase/storage-types": {
+      "version": "0.8.2",
+      "resolved": "https://registry.npmjs.org/@firebase/storage-types/-/storage-types-0.8.2.tgz",
+      "integrity": "sha512-0vWu99rdey0g53lA7IShoA2Lol1jfnPovzLDUBuon65K7uKG9G+L5uO05brD9pMw+l4HRFw23ah3GwTGpEav6g==",
+      "peerDependencies": {
+        "@firebase/app-types": "0.x",
+        "@firebase/util": "1.x"
+      }
+    },
+    "node_modules/@firebase/util": {
+      "version": "1.9.7",
+      "resolved": "https://registry.npmjs.org/@firebase/util/-/util-1.9.7.tgz",
+      "integrity": "sha512-fBVNH/8bRbYjqlbIhZ+lBtdAAS4WqZumx03K06/u7fJSpz1TGjEMm1ImvKD47w+xaFKIP2ori6z8BrbakRfjJA==",
+      "dependencies": {
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/@firebase/vertexai-preview": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/@firebase/vertexai-preview/-/vertexai-preview-0.0.3.tgz",
+      "integrity": "sha512-KVtUWLp+ScgiwkDKAvNkVucAyhLVQp6C6lhnVEuIg4mWhWcS3oerjAeVhZT4uNofKwWxRsOaB2Yec7DMTXlQPQ==",
+      "dependencies": {
+        "@firebase/app-check-interop-types": "0.3.2",
+        "@firebase/component": "0.6.8",
+        "@firebase/logger": "0.4.2",
+        "@firebase/util": "1.9.7",
+        "tslib": "^2.1.0"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "peerDependencies": {
+        "@firebase/app": "0.x",
+        "@firebase/app-types": "0.x"
+      }
+    },
+    "node_modules/@firebase/webchannel-wrapper": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@firebase/webchannel-wrapper/-/webchannel-wrapper-1.0.1.tgz",
+      "integrity": "sha512-jmEnr/pk0yVkA7mIlHNnxCi+wWzOFUg0WyIotgkKAb2u1J7fAeDBcVNSTjTihbAYNusCLQdW5s9IJ5qwnEufcQ=="
+    },
     "node_modules/@floating-ui/core": {
       "version": "1.6.3",
       "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.3.tgz",
@@ -1676,6 +2194,23 @@
         "semver": "^7.6.2"
       }
     },
+    "node_modules/@nuxtjs/dotenv": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/@nuxtjs/dotenv/-/dotenv-1.4.2.tgz",
+      "integrity": "sha512-/3+Cw5qLNIQD8ZvXLJG1suxvfC4ltlUuYegOwirHrLrzptHh/+rCkBXrNbrz2qAiwc+/yK91XjZGGzNM1dFmCw==",
+      "dependencies": {
+        "consola": "^3.2.3",
+        "dotenv": "^8.2.0"
+      }
+    },
+    "node_modules/@nuxtjs/dotenv/node_modules/dotenv": {
+      "version": "8.6.0",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-8.6.0.tgz",
+      "integrity": "sha512-IrPdXQsk2BbzvCBGBOTmmSH5SodmqZNt4ERAZDmW4CT+tL8VtvinqywuANaFu4bOMWki16nqf0e4oC0QIaDr/g==",
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/@nuxtjs/tailwindcss": {
       "version": "6.12.0",
       "resolved": "https://registry.npmjs.org/@nuxtjs/tailwindcss/-/tailwindcss-6.12.0.tgz",
@@ -5193,6 +5728,17 @@
         "reusify": "^1.0.4"
       }
     },
+    "node_modules/faye-websocket": {
+      "version": "0.11.4",
+      "resolved": "https://registry.npmjs.org/faye-websocket/-/faye-websocket-0.11.4.tgz",
+      "integrity": "sha512-CzbClwlXAuiRQAlUyfqPgvPoNKTckTPGfwZV4ZdAhVcP2lh9KUxJg2b5GkE7XbjKQ3YJnQ9z6D9ntLAlB+tP8g==",
+      "dependencies": {
+        "websocket-driver": ">=0.5.1"
+      },
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
     "node_modules/file-uri-to-path": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz",
@@ -5209,6 +5755,40 @@
         "node": ">=8"
       }
     },
+    "node_modules/firebase": {
+      "version": "10.12.5",
+      "resolved": "https://registry.npmjs.org/firebase/-/firebase-10.12.5.tgz",
+      "integrity": "sha512-J0yL3yh12CfFprTkSOQ9HqBugERyqvWwOuOoo1j1QHmYe9cYLKnBmtNCvGIYInDcsVUnJoRXCM+hxbGf48oVhg==",
+      "dependencies": {
+        "@firebase/analytics": "0.10.7",
+        "@firebase/analytics-compat": "0.2.13",
+        "@firebase/app": "0.10.8",
+        "@firebase/app-check": "0.8.7",
+        "@firebase/app-check-compat": "0.3.14",
+        "@firebase/app-compat": "0.2.38",
+        "@firebase/app-types": "0.9.2",
+        "@firebase/auth": "1.7.6",
+        "@firebase/auth-compat": "0.5.11",
+        "@firebase/database": "1.0.7",
+        "@firebase/database-compat": "1.0.7",
+        "@firebase/firestore": "4.6.5",
+        "@firebase/firestore-compat": "0.3.34",
+        "@firebase/functions": "0.11.6",
+        "@firebase/functions-compat": "0.3.12",
+        "@firebase/installations": "0.6.8",
+        "@firebase/installations-compat": "0.2.8",
+        "@firebase/messaging": "0.12.10",
+        "@firebase/messaging-compat": "0.2.10",
+        "@firebase/performance": "0.6.8",
+        "@firebase/performance-compat": "0.2.8",
+        "@firebase/remote-config": "0.4.8",
+        "@firebase/remote-config-compat": "0.2.8",
+        "@firebase/storage": "0.12.6",
+        "@firebase/storage-compat": "0.3.9",
+        "@firebase/util": "1.9.7",
+        "@firebase/vertexai-preview": "0.0.3"
+      }
+    },
     "node_modules/flatted": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.3.1.tgz",
@@ -5670,6 +6250,11 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/http-parser-js": {
+      "version": "0.5.8",
+      "resolved": "https://registry.npmjs.org/http-parser-js/-/http-parser-js-0.5.8.tgz",
+      "integrity": "sha512-SGeBX54F94Wgu5RH3X5jsDtf4eHyRogWX1XGT3b4HuW3tQPM4AaBzoUji/4AAJNXCEOWZ5O0DgZmJw1947gD5Q=="
+    },
     "node_modules/http-proxy-agent": {
       "version": "7.0.2",
       "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-7.0.2.tgz",
@@ -5739,6 +6324,11 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/idb": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/idb/-/idb-7.1.1.tgz",
+      "integrity": "sha512-gchesWBzyvGHRO9W8tzUWFDycow5gwjvFKfyV9FF32Y7F50yZMp7mP+T2mJIWFx49zicqyC4uefHM17o6xKIVQ=="
+    },
     "node_modules/ieee754": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
@@ -11121,6 +11711,27 @@
       "resolved": "https://registry.npmjs.org/webpack-virtual-modules/-/webpack-virtual-modules-0.6.2.tgz",
       "integrity": "sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ=="
     },
+    "node_modules/websocket-driver": {
+      "version": "0.7.4",
+      "resolved": "https://registry.npmjs.org/websocket-driver/-/websocket-driver-0.7.4.tgz",
+      "integrity": "sha512-b17KeDIQVjvb0ssuSDF2cYXSg2iztliJ4B9WdsuB6J952qCPKmnVq4DyW5motImXHDC1cBT/1UezrJVsKw5zjg==",
+      "dependencies": {
+        "http-parser-js": ">=0.5.1",
+        "safe-buffer": ">=5.1.0",
+        "websocket-extensions": ">=0.1.1"
+      },
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
+    "node_modules/websocket-extensions": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/websocket-extensions/-/websocket-extensions-0.1.4.tgz",
+      "integrity": "sha512-OqedPIGOfsDlo31UNwYbCFMSaO9m9G/0faIHj5/dZFDMFqPTcx6UwqyOy3COEaEOg/9VsGIpdqn62W5KhoKSpg==",
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
     "node_modules/whatwg-url": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
diff --git a/package.json b/package.json
index fc923fb..84f6aec 100644
--- a/package.json
+++ b/package.json
@@ -10,9 +10,11 @@
     "postinstall": "nuxt prepare"
   },
   "dependencies": {
+    "@nuxtjs/dotenv": "^1.4.2",
     "@radix-icons/vue": "^1.0.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
+    "firebase": "^10.12.5",
     "nuxt": "^3.12.2",
     "radix-vue": "^1.8.5",
     "shadcn-nuxt": "^0.10.4",
diff --git a/pages/performance.vue b/pages/performance.vue
index 48bdd72..7249e30 100644
--- a/pages/performance.vue
+++ b/pages/performance.vue
@@ -1,15 +1,17 @@
 <template>
-    <h2
-      class="scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0"
-    >
-      Gov Websites Performance
-    </h2>
+  <h2
+    class="scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0"
+  >
+    Gov Websites Performance
+  </h2>
 
   <div>
     <VPImage
       alt="Dashboard"
       width="1280"
-      height="1214" class="block" :image="{
+      height="1214"
+      class="block"
+      :image="{
         dark: '/examples/dashboard-dark.png',
         light: '/examples/dashboard-light.png',
       }"
@@ -28,201 +30,185 @@
       </div>
     </div>
     <div class="flex-1 space-y-4 p-8 pt-6">
-          <div class="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
-            <Card>
-              <CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
-                <CardTitle class="text-sm font-medium">
-                  Total Websites being monitored
-                </CardTitle>
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth="2"
-                  class="h-4 w-4 text-muted-foreground"
-                >
-                  <path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6" />
-                </svg>
-              </CardHeader>
-              <CardContent>
-                <div class="text-2xl font-bold">
-                  75
-                </div>
-                <!-- <p class="text-xs text-muted-foreground">
-                  +20.1% from last month
-                </p> -->
-              </CardContent>
-            </Card>
-            <Card>
-              <CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
-                <CardTitle class="text-sm font-medium">
-                  Websites Down
-                </CardTitle>
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth="2"
-                  class="h-4 w-4 text-muted-foreground"
-                >
-                  <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />
-                  <circle cx="9" cy="7" r="4" />
-                  <path d="M22 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75" />
-                </svg>
-              </CardHeader>
-              <CardContent>
-                <div class="text-2xl font-bold">
-                  23
-                </div>
-                <!-- <p class="text-xs text-muted-foreground">
-                  +180.1% from last month
-                </p> -->
-              </CardContent>
-            </Card>
-            <Card>
-              <CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
-                <CardTitle class="text-sm font-medium">
-                  Websites Below 90 Score
-                </CardTitle>
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth="2"
-                  class="h-4 w-4 text-muted-foreground"
-                >
-                  <rect width="20" height="14" x="2" y="5" rx="2" />
-                  <path d="M2 10h20" />
-                </svg>
-              </CardHeader>
-              <CardContent>
-                <div class="text-2xl font-bold">
-                  33
-                </div>
-                <!-- <p class="text-xs text-muted-foreground">
-                  +19% from last month
-                </p> -->
-              </CardContent>
-            </Card>
-            <Card>
-              <CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
-                <CardTitle class="text-sm font-medium">
-                  Websites with SSL issues
-                </CardTitle>
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth="2"
-                  class="h-4 w-4 text-muted-foreground"
-                >
-                  <path d="M22 12h-4l-3 9L9 3l-3 9H2" />
-                </svg>
-              </CardHeader>
-              <CardContent>
-                <div class="text-2xl font-bold">
-                  12
-                </div>
-                <!-- <p class="text-xs text-muted-foreground">
-                  +201 since last hour
-                </p> -->
-              </CardContent>
-            </Card>
-          </div>
-          <!-- <div class="grid gap-4 md:grid-cols-2 lg:grid-cols-7">
-            <Card class="col-span-4">
-              <CardHeader>
-                <CardTitle>Overview</CardTitle>
-              </CardHeader>
-              <CardContent class="pl-2">
-                <Overview />
-              </CardContent>
-            </Card>
-            <Card class="col-span-3">
-              <CardHeader>
-                <CardTitle>Recent Sales</CardTitle>
-                <CardDescription>
-                  You made 265 sales this month.
-                </CardDescription>
-              </CardHeader>
-              <CardContent>
-                <RecentSales />
-              </CardContent>
-            </Card>
-          </div> -->
-          <Table>
-    <TableCaption>Last Refreshed: DD/MM/YYYY</TableCaption>
-    <TableHeader>
-      <TableRow>
-        <TableHead>
-          URL
-        </TableHead>
-        <TableHead>Status</TableHead>
-        <TableHead>Score</TableHead>
-        <TableHead class="text-right">
-          Downtime
-        </TableHead>
-      </TableRow>
-    </TableHeader>
-    <TableBody>
-      <TableRow>
-        <TableCell class="font-medium">
-          Dummy URL 1
-        </TableCell>
-        <TableCell>Active</TableCell>
-        <TableCell>85</TableCell>
-        <TableCell class="text-right">
-          0 minutes
-        </TableCell>
-      </TableRow>
-      <TableRow>
-        <TableCell class="font-medium">
-          Dummy URL 2
-        </TableCell>
-        <TableCell>Active</TableCell>
-        <TableCell>92</TableCell>
-        <TableCell class="text-right">
-          0 minutes
-        </TableCell>
-      </TableRow>
-      <TableRow>
-        <TableCell class="font-medium">
-          Dummy URL 3
-        </TableCell>
-        <TableCell>Active</TableCell>
-        <TableCell>78</TableCell>
-        <TableCell class="text-right">
-          0 minutes
-        </TableCell>
-      </TableRow>
-    </TableBody>
-  </Table>
+      <div class="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
+        <Card>
+          <CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle class="text-sm font-medium">
+              Total Websites being monitored
+            </CardTitle>
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth="2"
+              class="h-4 w-4 text-muted-foreground"
+            >
+              <path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6" />
+            </svg>
+          </CardHeader>
+          <CardContent>
+            <div class="text-2xl font-bold">
+              75
+            </div>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle class="text-sm font-medium">
+              Websites Down
+            </CardTitle>
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth="2"
+              class="h-4 w-4 text-muted-foreground"
+            >
+              <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />
+              <circle cx="9" cy="7" r="4" />
+              <path d="M22 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75" />
+            </svg>
+          </CardHeader>
+          <CardContent>
+            <div class="text-2xl font-bold">
+              23
+            </div>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle class="text-sm font-medium">
+              Websites Below 90 Score
+            </CardTitle>
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth="2"
+              class="h-4 w-4 text-muted-foreground"
+            >
+              <rect width="20" height="14" x="2" y="5" rx="2" />
+              <path d="M2 10h20" />
+            </svg>
+          </CardHeader>
+          <CardContent>
+            <div class="text-2xl font-bold">
+              33
+            </div>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle class="text-sm font-medium">
+              Websites with SSL issues
+            </CardTitle>
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth="2"
+              class="h-4 w-4 text-muted-foreground"
+            >
+              <path d="M22 12h-4l-3 9L9 3l-3 9H2" />
+            </svg>
+          </CardHeader>
+          <CardContent>
+            <div class="text-2xl font-bold">
+              12
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+      <Table>
+        <TableCaption>Last Refreshed: {{ lastRefreshed }}</TableCaption>
+        <TableHeader>
+          <TableRow>
+            <TableHead>
+              URL
+            </TableHead>
+            <TableHead>Status</TableHead>
+            <TableHead>Score</TableHead>
+            <TableHead class="text-right">
+              Response Time
+            </TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          <TableRow v-for="item in leaderboard" :key="item.url">
+            <TableCell class="font-medium">{{ item.url }}</TableCell>
+            <TableCell>Active</TableCell>
+            <TableCell>{{ item.performanceScore }}</TableCell>
+            <TableCell class="text-right">{{ item.responseTime }} ms</TableCell>
+          </TableRow>
+        </TableBody>
+      </Table>
     </div>
   </div>
-    
-
 </template>
 
 <script setup lang="ts">
-// import Overview from './components/Overview.vue'
-// import DateRangePicker from './components/DateRangePicker.vue'
-// import MainNav from './components/MainNav.vue'
-// import RecentSales from './components/RecentSales.vue'
-// import Search from './components/Search.vue'
-// import TeamSwitcher from './components/TeamSwitcher.vue'
-// import UserNav from './components/UserNav.vue'
+import { ref, onMounted } from 'vue';
+import { db, collection, getDocs, query, where, orderBy, limit, QuerySnapshot } from '../firebaseConfig';
+import { Timestamp } from 'firebase/firestore';
+
+interface PerformanceItem {
+  url: string;
+  performanceScore: number;
+  responseTime: number;
+  timestamp: Timestamp;
+}
+
+interface DocumentData {
+  [field: string]: any;
+}
+
+const leaderboard = ref<PerformanceItem[]>([]);
+const lastRefreshed = ref<string>('');
+
+// Function to fetch performance data from Firestore
+const fetchPerformanceData = async () => {
+  const now = new Date();
+  const startOfMonth = new Date(now.getFullYear(), now.getMonth(), 1);
+  const endOfMonth = new Date(now.getFullYear(), now.getMonth() + 1, 0);
+
+  // Query to fetch the top 3 documents based on performanceScore and responseTime
+  const q = query(
+    collection(db, 'performanceData'),
+    where('timestamp', '>=', startOfMonth),
+    where('timestamp', '<=', endOfMonth),
+    orderBy('performanceScore', 'desc'),
+    orderBy('responseTime', 'asc'),
+    limit(200)
+  );
+
+  const querySnapshot: QuerySnapshot<DocumentData> = await getDocs(q);
+  
+  // Map the fetched documents to the PerformanceItem interface
+  leaderboard.value = querySnapshot.docs.map(doc => ({
+    url: doc.data().url,
+    performanceScore: doc.data().performanceScore,
+    responseTime: doc.data().responseTime,
+    timestamp: doc.data().timestamp,
+  }));
 
+  // Update the last refreshed date
+  lastRefreshed.value = new Date().toLocaleDateString();
+};
 
-</script>
+// Fetch performance data when the component is mounted
+onMounted(() => {
+  fetchPerformanceData();
+});
+</script>
\ No newline at end of file