feat(admin): improve impersonation UI/UX and user search

This commit enhances the admin impersonation feature with better visual
design, improved user feedback, and smoother transitions.

## AdminImpersonationButton improvements:
- Tighten button spacing and make width content-relative (no overflow)
- Update dialog to match app-wide dialog styling patterns
- Auto-focus search input when dialog opens
- Replace page reload with Next.js router navigation for smoother UX
- Show Loader2 icon with "Starting" text during impersonation start

## ImpersonationBanner improvements:
- Separate loading states for "switch user" vs "exit" operations
- Only show loading state on the button that was clicked
- Both buttons disabled during any operation to prevent conflicts
- Use Loader2 with "Switching" and "Exiting" text for better feedback
- Replace page reloads with router.push('/') for seamless transitions
- Align user search popover to right to prevent overflow

## UserSearchAutocomplete enhancements:
- Add loading/loadingText props for external loading state control
- Add autoFocus prop to focus input when opened
- Add align prop (left/right) to control popover positioning
- Replace generic icons with better semantic ones:
  - Building2 for organizations (was FileText)
  - FolderGit for projects (was BriefcaseBusiness)
- Add citizenship badge using CitizenshipBadge component (icon variant)
- Add KYC verification badge with verified icon
- Add tooltips to all metadata icons for clarity
- Show Loader2 icon with "Searching" text during search
- Improve spacing and layout of user metadata badges

## Backend changes:
- Add hasApprovedKYC field to UserSearchResult interface
- Query userKYCUsers in search to determine KYC verification status
- Check for APPROVED status with non-expired KYC records

## Navigation improvements:
All impersonation transitions now use Next.js router.push('/') instead
of window.location reloads, providing:
- Smoother transitions without white flash
- Faster navigation via client-side routing
- Still safe: session update triggers server component refetch
- Consistent landing page for all users

Author: galo13eth

app/src/components/admin/AdminImpersonationButton.tsx

@@ -1,14 +1,12 @@
 "use client"
 
 import { useSession } from "next-auth/react"
+import { useRouter } from "next/navigation"
 import { useEffect, useState } from "react"
 import { Button } from "@/components/ui/button"
 import {
   Dialog,
   DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
   DialogTrigger,
 } from "@/components/ui/dialog"
 import { Eye } from "lucide-react"
@@ -24,6 +22,7 @@ type ImpersonationStatus = {
 
 export function AdminImpersonationButton() {
   const { data: session, status, update } = useSession()
+  const router = useRouter()
   const [open, setOpen] = useState(false)
   const [starting, setStarting] = useState(false)
   const [checkingAccess, setCheckingAccess] = useState(true)
@@ -110,9 +109,9 @@ export function AdminImpersonationButton() {
         impersonation: data.impersonation,
       })
 
-      // Close dialog and reload
+      // Close dialog and navigate to home
       setOpen(false)
-      window.location.reload()
+      router.push('/')
     } catch (error) {
       console.error('Failed to start impersonation:', error)
       alert(error instanceof Error ? error.message : 'Failed to start impersonation')
@@ -127,7 +126,7 @@ export function AdminImpersonationButton() {
         <Button
           variant="outline"
           size="sm"
-          className="gap-2 px-2"
+          className="gap-1.5 px-2 w-auto whitespace-nowrap"
           aria-label="View as user"
           disabled={starting}
         >
@@ -136,26 +135,31 @@ export function AdminImpersonationButton() {
           <span className="sm:hidden text-xs font-medium">View</span>
         </Button>
       </DialogTrigger>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>Admin: View as User</DialogTitle>
-          <DialogDescription>
+      <DialogContent className="max-w-md">
+        <div className="flex flex-col text-center">
+          <div className="font-semibold text-xl">
+            Admin: View as User
+          </div>
+
+          <div className="text-base text-secondary-foreground mt-2">
             Search for a user to view the app from their perspective.
             You&apos;ll be using yesterday&apos;s data snapshot - changes won&apos;t affect production.
-          </DialogDescription>
-        </DialogHeader>
-
-        <div className="py-4">
-          <UserSearchAutocomplete
-            onSelectUser={handleStartImpersonation}
-            disabled={starting}
-            placeholder={starting ? "Starting..." : "Search for user..."}
-          />
-        </div>
-
-        <div className="text-sm text-muted-foreground bg-muted p-3 rounded-md">
-          <strong>Note:</strong> External services (emails, KYC, payments) will be mocked during impersonation.
-          All actions are logged for audit purposes.
+          </div>
+
+          <div className="mt-6">
+            <UserSearchAutocomplete
+              onSelectUser={handleStartImpersonation}
+              disabled={starting}
+              placeholder="Search for user"
+              loading={starting}
+              loadingText="Starting"
+              autoFocus={open}
+            />
+          </div>
+
+          <div className="text-sm text-secondary-foreground bg-muted p-3 rounded-md mt-4">
+            <strong>Note:</strong> External services (emails, KYC, payments) will be mocked during impersonation.
+          </div>
         </div>
       </DialogContent>
     </Dialog>

app/src/components/admin/ImpersonationBanner.tsx

@@ -1,15 +1,18 @@
 "use client"
 
 import { useSession } from "next-auth/react"
+import { useRouter } from "next/navigation"
 import { useEffect, useRef, useState } from "react"
 import { Alert, AlertDescription } from "@/components/ui/alert"
 import { Button } from "@/components/ui/button"
-import { TriangleAlert, X, Eye } from "lucide-react"
+import { X, Eye, Loader2 } from "lucide-react"
 import { UserSearchAutocomplete } from "./UserSearchAutocomplete"
 
 export function ImpersonationBanner() {
   const { data: session, update } = useSession()
-  const [isSwitching, setIsSwitching] = useState(false)
+  const router = useRouter()
+  const [isSwitchingUser, setIsSwitchingUser] = useState(false)
+  const [isExiting, setIsExiting] = useState(false)
   const bannerRef = useRef<HTMLDivElement | null>(null)
 
   useEffect(() => {
@@ -70,7 +73,7 @@ export function ImpersonationBanner() {
 
   const handleStopImpersonation = async () => {
     try {
-      setIsSwitching(true)
+      setIsExiting(true)
 
       const response = await fetch('/api/admin/impersonate', {
         method: 'DELETE',
@@ -83,19 +86,19 @@ export function ImpersonationBanner() {
       // CRITICAL: Clear impersonation from session (triggers new JWT without impersonation)
       await update({ impersonation: null })
 
-      // Reload to return to admin view
-      window.location.href = '/'
+      // Navigate to home to return to admin view
+      router.push('/')
     } catch (error) {
       console.error('Failed to stop impersonation:', error)
       alert('Failed to stop impersonation. Please try again or refresh the page.')
     } finally {
-      setIsSwitching(false)
+      setIsExiting(false)
     }
   }
 
   const handleSwitchUser = async (targetUserId: string) => {
     try {
-      setIsSwitching(true)
+      setIsSwitchingUser(true)
 
       const response = await fetch('/api/admin/impersonate', {
         method: 'POST',
@@ -112,24 +115,23 @@ export function ImpersonationBanner() {
       // Update session with new impersonation data
       await update({ impersonation: data.impersonation })
 
-      // Reload to see new user's view
-      window.location.href = '/'
+      // Navigate to home to see new user's view
+      router.push('/')
     } catch (error) {
       console.error('Failed to switch user:', error)
       alert(error instanceof Error ? error.message : 'Failed to switch user')
     } finally {
-      setIsSwitching(false)
+      setIsSwitchingUser(false)
     }
   }
 
   return (
     <div ref={bannerRef} className="sticky top-0 z-[320]">
       <Alert className="border-yellow-500 bg-yellow-50 dark:bg-yellow-950 rounded-none mb-0 shadow-md px-4 sm:px-6">
-        <TriangleAlert className="h-4 w-4" />
+        <Eye className="h-4 w-4" />
         <AlertDescription className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 w-full">
           <div className="flex flex-col gap-1">
             <div className="flex items-center gap-2">
-              <Eye className="h-4 w-4" />
               <strong className="text-sm">Admin Mode: Viewing as {session.impersonation.targetUserName}</strong>
             </div>
             <span className="text-xs text-muted-foreground">
@@ -144,21 +146,33 @@ export function ImpersonationBanner() {
             <div className="w-full sm:w-auto">
               <UserSearchAutocomplete
                 onSelectUser={handleSwitchUser}
-                disabled={isSwitching}
-                placeholder="Switch user..."
+                disabled={isSwitchingUser || isExiting}
+                placeholder="Switch user"
+                loading={isSwitchingUser}
+                loadingText="Switching"
                 currentUserId={session.impersonation.targetUserId}
+                align="right"
               />
             </div>
 
             <Button
               onClick={handleStopImpersonation}
-              disabled={isSwitching}
+              disabled={isSwitchingUser || isExiting}
               variant="outline"
               size="sm"
               className="whitespace-nowrap w-full sm:w-auto"
             >
-              <X className="h-4 w-4 mr-1" />
-              {isSwitching ? 'Stopping...' : 'Exit Admin Mode'}
+              {isExiting ? (
+                <>
+                  <Loader2 className="h-4 w-4 mr-1 animate-spin" />
+                  Exiting
+                </>
+              ) : (
+                <>
+                  <X className="h-4 w-4 mr-1" />
+                  Exit Admin Mode
+                </>
+              )}
             </Button>
           </div>
         </AlertDescription>