From a8ebd97073c78a3240177a41d98d072c647957de Mon Sep 17 00:00:00 2001
From: tentamens <tentamenslol@gmail.com>
Date: Thu, 17 Jul 2025 22:10:54 -0500
Subject: [PATCH] put premium stats in box

---
 components/overview/OverviewStats.vue | 44 ++++++++++++++++++---------
 locales/en.json                       |  3 +-
 pages/overview.vue                    |  2 +-
 stores/user.ts                        |  4 +++
 4 files changed, 37 insertions(+), 16 deletions(-)

diff --git a/components/overview/OverviewStats.vue b/components/overview/OverviewStats.vue
index bd26784..91712c7 100644
--- a/components/overview/OverviewStats.vue
+++ b/components/overview/OverviewStats.vue
@@ -1,24 +1,40 @@
 <template>
-  <UiGrid :grid-size="3" class="mb-6 hidden md:grid">
-    <StatContainer :stat="String(filterCount)" iconColorCircle="bg-indigo-900" iconColor="text-indigo-400"
-      icon="tabler:filter" :label="$t('activeFilters')" />
+  <UiGrid
+    :grid-size="3"
+    class="mb-6 hidden md:grid"
+  >
+    <StatContainer
+      :stat="String(premiumSearches)"
+      icon-color-circle="bg-indigo-900"
+      icon-color="text-indigo-400"
+      icon="tabler:filter"
+      :label="$t('remainingPremiumSearches')"
+    />
 
-    <StatContainer :stat="String(matchedAuctions)" iconColorCircle="bg-purple-900" iconColor="text-purple-400"
-      icon="tabler:tag" :label="$t('totalMatchedAuctions')" />
+    <StatContainer
+      :stat="String(matchedAuctions)"
+      icon-color-circle="bg-purple-900"
+      icon-color="text-purple-400"
+      icon="tabler:tag"
+      :label="$t('totalMatchedAuctions')"
+    />
 
-    <StatContainer :stat="String(notificationperHour)" iconColorCircle="bg-rose-900" iconColor="text-rose-400"
-      icon="tabler:bell" :label="$t('auctionsPerHour')" />
+    <StatContainer
+      :stat="String(notificationperHour)"
+      icon-color-circle="bg-rose-900"
+      icon-color="text-rose-400"
+      icon="tabler:bell"
+      :label="$t('auctionsPerHour')"
+    />
   </UiGrid>
-
 </template>
 
 <script setup lang="ts">
-import StatContainer from './StatContainer.vue';
+import StatContainer from './StatContainer.vue'
 
 defineProps<{
-  filterCount: number;
-  matchedAuctions: number;
-  notificationperHour: number;
-}>();
-
+  premiumSearches: number
+  matchedAuctions: number
+  notificationperHour: number
+}>()
 </script>
diff --git a/locales/en.json b/locales/en.json
index e478f0d..01be005 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -662,5 +662,6 @@
   "switchLanguage": "Switch Language",
   "referralCode": "Referral Code",
   "copy": "Copy",
-  "copied": "Copied"
+  "copied": "Copied",
+  "remainingPremiumSearches": "Remaining Premium Searches"
 }
diff --git a/pages/overview.vue b/pages/overview.vue
index 629114c..3e4cd40 100644
--- a/pages/overview.vue
+++ b/pages/overview.vue
@@ -14,7 +14,7 @@
     </div>
 
     <OverviewStats
-      :filter-count="filterCount"
+      :premium-searches="useUserStore().remainingPremiumSearches"
       :matched-auctions="stats.matchedAuctions"
       :notificationper-hour="stats.notificationperHour"
     />
diff --git a/stores/user.ts b/stores/user.ts
index 23e7261..506a87b 100644
--- a/stores/user.ts
+++ b/stores/user.ts
@@ -58,6 +58,7 @@ export const useUserStore = defineStore('user', () => {
   const acceptingReferralCode = ref<string>('')
   const userReferralCode = ref<string>('')
   const accountId = ref('')
+  const remainingPremiumSearches = ref<number>(100)
 
   const notificationSettings = ref<NotificationSettings>({
     discord: {
@@ -314,6 +315,8 @@ export const useUserStore = defineStore('user', () => {
 
       remainingFilters.value = (response.listenerLimit ?? 3) - (response.listenerCount ?? 0)
 
+      remainingPremiumSearches.value = response.activeSearchesLeft ?? 100
+
       return {
         used: response.searchesUsedMonthly ?? 0,
         total: response.activeSearchesLeft ?? 0,
@@ -378,6 +381,7 @@ export const useUserStore = defineStore('user', () => {
     userReferralCode,
     createdAccount,
     accountId,
+    remainingPremiumSearches,
 
     // Getters
     isLoggedIn,