From 82ecb49292ef9a45b0a654cef8fe776e9a4dc2d7 Mon Sep 17 00:00:00 2001
From: kittentm <aidenplayzroblox123@gmail.com>
Date: Mon, 3 Aug 2026 04:23:33 +0200
Subject: [PATCH] feat: /search

---
 app/components/header.vue            |   4 +
 app/pages/search/index.vue           | 207 +++++++++++++++++++++++++++
 server/api/admin/users/search.get.ts |  70 +++++++++
 3 files changed, 281 insertions(+)
 create mode 100644 app/pages/search/index.vue
 create mode 100644 server/api/admin/users/search.get.ts

diff --git a/app/components/header.vue b/app/components/header.vue
index f18b80c..25535f7 100644
--- a/app/components/header.vue
+++ b/app/components/header.vue
@@ -38,6 +38,10 @@ const emit = defineEmits(['logout', 'navigate'])
                 @click="emit('navigate', '/')">
                 <span>Welcome</span>
             </button>
+            <button type="button" class="nav-item" :class="{ 'active-nav': activeTab === 'search' }"
+                @click="emit('navigate', '/search')">
+                <span>Search Users</span>
+            </button>
             <button type="button" class="nav-item logout-btn" @click="emit('logout')">
                 <span>Sign Out</span>
             </button>
diff --git a/app/pages/search/index.vue b/app/pages/search/index.vue
new file mode 100644
index 0000000..8ae04a5
--- /dev/null
+++ b/app/pages/search/index.vue
@@ -0,0 +1,207 @@
+<script setup>
+import { ref, onMounted } from 'vue'
+import { useAuth } from '~/composables/useAuth.js'
+
+const { 
+  isAuthenticated, 
+  isInitialized, 
+  userProfile, 
+  verifySession, 
+  silentRefresh, 
+  logout 
+} = useAuth()
+
+const searchQuery = ref('')
+const searchResults = ref([])
+const isSearching = ref(false)
+const hasSearched = ref(false)
+const errorMessage = ref('')
+
+// pagination state
+const currentPage = ref(1)
+const totalPages = ref(0)
+const totalResults = ref(0)
+const limit = 10
+
+const handleLogout = () => {
+  logout()
+}
+
+const handleNavigate = (path) => {
+  navigateTo(path)
+}
+
+const executeSearch = async (page = 1) => {
+  const query = searchQuery.value.trim()
+  if (!query) return
+
+  isSearching.value = true
+  hasSearched.value = true
+  errorMessage.value = ''
+
+  try {
+    const res = await $fetch(`/api/admin/users/search`, {
+      params: {
+        q: query,
+        page,
+        limit
+      }
+    })
+
+    searchResults.value = res.data || []
+    currentPage.value = res.pagination.page
+    totalPages.value = res.pagination.totalPages
+    totalResults.value = res.pagination.total
+  } catch (err) {
+    errorMessage.value = err.data?.statusMessage || err.data?.message || 'Failed to search database.'
+    searchResults.value = []
+    totalPages.value = 0
+    totalResults.value = 0
+  } finally {
+    isSearching.value = false
+  }
+}
+
+const handleSearchSubmit = () => {
+  currentPage.value = 1
+  executeSearch(1)
+}
+
+const goToPage = (page) => {
+  if (page < 1 || page > totalPages.value || isSearching.value) return
+  executeSearch(page)
+}
+
+onMounted(async () => {
+  if (isAuthenticated.value) {
+    const valid = await verifySession()
+    if (!valid) {
+      navigateTo('/oauth')
+    }
+  } else {
+    const success = await silentRefresh()
+    if (!success) {
+      navigateTo('/oauth')
+    }
+  }
+})
+</script>
+
+<template>
+  <div>
+    <div v-if="!isInitialized" class="global-loader-wrapper">
+      <div class="spinner lg"></div>
+      <p style="color: #8b949e; margin-top: 1rem; font-size: 0.95rem;">
+        Connecting to Keycloak...
+      </p>
+    </div>
+
+    <div v-else-if="isAuthenticated" class="settings-container">
+      <Header 
+        :user-profile="userProfile" 
+        active-tab="search"
+        @logout="handleLogout"
+        @navigate="handleNavigate"
+      />
+
+      <main class="settings-main-content">
+        <section class="settings-panel" style="width: 100%;">
+          <div class="panel-header archivo-black">
+            <span>SEARCH USERS</span>
+          </div>
+
+          <div class="panel-body" style="padding: 1.5rem;">
+            <form @submit.prevent="handleSearchSubmit" style="display: flex; gap: 0.75rem; margin-bottom: 1.5rem;">
+              <input 
+                v-model="searchQuery"
+                type="text"
+                placeholder="Search by SFID, PID, or Email"
+                required
+                style="flex: 1; padding: 0.65rem 0.85rem; background: #0d1117; border: 1px solid #30363d; border-radius: 6px; color: #c9d1d9; font-size: 0.95rem; outline: none;"
+              />
+              <button 
+                type="submit" 
+                class="btn-login-action"
+                style="padding: 0.65rem 1.25rem;"
+                :disabled="isSearching"
+              >
+                <span v-if="isSearching" class="spinner sm btn-spinner"></span>
+                <span style="vertical-align: middle;">
+                  {{ isSearching ? 'Searching...' : 'Search' }}
+                </span>
+              </button>
+            </form>
+
+            <p v-if="errorMessage" style="color: #f85149; font-size: 0.85rem; margin-bottom: 1rem; text-align: center;">
+              {{ errorMessage }}
+            </p>
+
+            <div v-if="hasSearched && !isSearching && searchResults.length > 0" style="margin-bottom: 1rem; font-size: 0.85rem; color: #8b949e;">
+              Showing {{ (currentPage - 1) * limit + 1 }}–{{ Math.min(currentPage * limit, totalResults) }} of {{ totalResults }} results
+            </div>
+
+            <div v-if="searchResults.length > 0" class="results-list" style="display: flex; flex-direction: column; gap: 0.75rem;">
+              <div 
+                v-for="user in searchResults" 
+                :key="user.id" 
+                style="display: flex; align-items: center; justify-content: space-between; padding: 0.85rem 1rem; background: #0d1117; border: 1px solid #30363d; border-radius: 8px;"
+              >
+                <div style="display: flex; align-items: center; gap: 0.85rem;">
+                  <img 
+                    :src="user.pid ? `https://mii.spfn.net/${user.pid}/main.png` : '/img_unknown_MiiIcon.png'" 
+                    :alt="user.sfid || 'Mii Avatar'" 
+                    style="width: 44px; height: 44px; border-radius: 50%; background: #161b22; object-fit: contain; flex-shrink: 0;"
+                    @error="(e) => e.target.src = '/img_unknown_MiiIcon.png'"
+                  />
+                  <div style="display: flex; flex-direction: column;">
+                    <span style="font-weight: 600; color: #f0f6fc; font-size: 0.95rem;">
+                      {{ user.sfid || 'No SFID Linked' }}
+                    </span>
+                    <span style="font-size: 0.8rem; color: #8b949e; margin-top: 0.15rem;">
+                      PID: {{ user.pid || 'N/A' }}
+                    </span>
+                  </div>
+                </div>
+
+                <div v-if="user.email" style="font-size: 0.85rem; color: #8b949e;">
+                  {{ user.email }}
+                </div>
+              </div>
+            </div>
+
+            <div v-else-if="hasSearched && !isSearching" style="text-align: center; color: #8b949e; padding: 2rem 0; font-size: 0.9rem;">
+              No users found matching "{{ searchQuery }}"
+            </div>
+
+            <div 
+              v-if="totalPages > 1" 
+              style="display: flex; align-items: center; justify-content: space-between; margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid #30363d;"
+            >
+              <button 
+                type="button" 
+                style="padding: 0.5rem 1rem; background: #21262d; border: 1px solid #30363d; border-radius: 6px; color: #c9d1d9; font-size: 0.85rem; cursor: pointer;"
+                :disabled="currentPage === 1 || isSearching"
+                @click="goToPage(currentPage - 1)"
+              >
+                ← Previous
+              </button>
+
+              <span style="font-size: 0.85rem; color: #8b949e;">
+                Page {{ currentPage }} of {{ totalPages }}
+              </span>
+
+              <button 
+                type="button" 
+                style="padding: 0.5rem 1rem; background: #21262d; border: 1px solid #30363d; border-radius: 6px; color: #c9d1d9; font-size: 0.85rem; cursor: pointer;"
+                :disabled="currentPage === totalPages || isSearching"
+                @click="goToPage(currentPage + 1)"
+              >
+                Next →
+              </button>
+            </div>
+          </div>
+        </section>
+      </main>
+    </div>
+  </div>
+</template>
\ No newline at end of file
diff --git a/server/api/admin/users/search.get.ts b/server/api/admin/users/search.get.ts
new file mode 100644
index 0000000..a9e5f52
--- /dev/null
+++ b/server/api/admin/users/search.get.ts
@@ -0,0 +1,70 @@
+import { queryNnas } from '../../../utils/nnasDb'
+
+export default defineEventHandler(async (event) => {
+  const queryParams = getQuery(event)
+  const searchTerm = String(queryParams.q || '').trim()
+  const page = Math.max(1, parseInt(String(queryParams.page || '1'), 10))
+  const limit = Math.max(1, Math.min(50, parseInt(String(queryParams.limit || '10'), 10)))
+  const offset = (page - 1) * limit
+
+  if (!searchTerm) {
+    return {
+      data: [],
+      pagination: { total: 0, page, limit, totalPages: 0 }
+    }
+  }
+
+  try {
+    const wildPattern = `%${searchTerm}%`
+    const startsWithPattern = `${searchTerm}%`
+
+    const countResult = await queryNnas(
+      `SELECT COUNT(*) AS total 
+       FROM users 
+       WHERE username ILIKE $1 
+          OR CAST(pid AS TEXT) ILIKE $1 
+          OR email ILIKE $1`,
+      [wildPattern]
+    )
+
+    const total = parseInt(countResult.rows[0]?.total || '0', 10)
+    const totalPages = Math.ceil(total / limit)
+
+    const dataResult = await queryNnas(
+      `SELECT 
+          pid AS id, 
+          username AS sfid, 
+          pid, 
+          email
+       FROM users 
+       WHERE username ILIKE $1 
+          OR CAST(pid AS TEXT) ILIKE $1 
+          OR email ILIKE $1
+       ORDER BY 
+          CASE 
+            WHEN LOWER(username) = LOWER($2) OR CAST(pid AS TEXT) = $2 THEN 0
+            WHEN username ILIKE $3 OR email ILIKE $3 OR CAST(pid AS TEXT) ILIKE $3 THEN 1
+            ELSE 2
+          END,
+          pid DESC
+       LIMIT $4 OFFSET $5`,
+      [wildPattern, searchTerm, startsWithPattern, limit, offset]
+    )
+
+    return {
+      data: dataResult.rows,
+      pagination: {
+        total,
+        page,
+        limit,
+        totalPages
+      }
+    }
+  } catch (error: any) {
+    console.error('[NNAS DB SEARCH ERROR]:', error)
+    throw createError({
+      statusCode: 500,
+      statusMessage: `NNAS Database query failed`
+    })
+  }
+})
\ No newline at end of file