fix(admin-web): repair broken admin features, silent data truncation, and error handling across dashboard

Author: fennsaji

admin-web/app/(dashboard)/admin-management/page.tsx

@@ -34,6 +34,7 @@ export default function AdminManagementPage() {
   const [searchQuery, setSearchQuery] = useState('')
   const [searchResults, setSearchResults] = useState<SearchResult[]>([])
   const [isSearching, setIsSearching] = useState(false)
+  const [searchError, setSearchError] = useState<string | null>(null)
   const [confirmDialog, setConfirmDialog] = useState<{
     userId: string
     userName: string
@@ -85,14 +86,18 @@ export default function AdminManagementPage() {
   const handleSearch = async () => {
     if (!searchQuery.trim()) return
     setIsSearching(true)
+    setSearchError(null)
     try {
       const res = await fetch('/api/admin/search-users', {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
         credentials: 'include',
         body: JSON.stringify({ query: searchQuery }),
       })
-      const data = await res.json()
+      const data = await res.json().catch(() => ({}))
+      if (!res.ok) {
+        throw new Error(data.error || `Search failed (${res.status})`)
+      }
       setSearchResults(
         (data.users || []).map((u: any) => ({
           id: u.id,
@@ -101,8 +106,11 @@ export default function AdminManagementPage() {
           is_admin: u.is_admin ?? false,
         }))
       )
-    } catch {
-      toast.error('Search failed')
+    } catch (err) {
+      const message = err instanceof Error ? err.message : 'Search failed'
+      setSearchResults([])
+      setSearchError(message)
+      toast.error(message)
     } finally {
       setIsSearching(false)
     }
@@ -306,7 +314,13 @@ export default function AdminManagementPage() {
             </div>
           )}
 
-          {searchResults.length === 0 && searchQuery && !isSearching && (
+          {searchError && !isSearching && (
+            <p className="mt-4 text-sm text-red-600 dark:text-red-400">
+              {searchError}
+            </p>
+          )}
+
+          {!searchError && searchResults.length === 0 && searchQuery && !isSearching && (
             <p className="mt-4 text-sm text-gray-500 dark:text-gray-400">
               No users found. Try a different search term.
             </p>

admin-web/app/(dashboard)/analytics/page.tsx

@@ -56,7 +56,7 @@ function AnalyticsEventsTab() {
   const { resolvedTheme } = useTheme()
   const isDark = resolvedTheme === 'dark'
 
-  const { data, isLoading } = useQuery({
+  const { data, isLoading, error, refetch } = useQuery({
     queryKey: ['analytics-events', rangeFilter],
     queryFn: async () => {
       const params = new URLSearchParams()
@@ -136,6 +136,16 @@ function AnalyticsEventsTab() {
         <div className="flex h-96 items-center justify-center">
           <div className="text-gray-500 dark:text-gray-400">Loading analytics...</div>
         </div>
+      ) : error ? (
+        <div className="flex h-96 flex-col items-center justify-center gap-3">
+          <p className="text-sm text-red-600 dark:text-red-400">Failed to load analytics events. Please try again.</p>
+          <button
+            onClick={() => refetch()}
+            className="rounded-lg border border-gray-300 px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-700"
+          >
+            Retry
+          </button>
+        </div>
       ) : data ? (
         <div className="grid gap-6 md:grid-cols-2">
           {/* Timeline Chart */}
@@ -182,7 +192,7 @@ function UserEngagementTab() {
   const { resolvedTheme } = useTheme()
   const isDark = resolvedTheme === 'dark'
 
-  const { data, isLoading } = useQuery({
+  const { data, isLoading, error, refetch } = useQuery({
     queryKey: ['analytics-engagement', rangeFilter],
     queryFn: async () => {
       const params = new URLSearchParams()
@@ -260,6 +270,16 @@ function UserEngagementTab() {
         <div className="flex h-96 items-center justify-center">
           <div className="text-gray-500 dark:text-gray-400">Loading engagement data...</div>
         </div>
+      ) : error ? (
+        <div className="flex h-96 flex-col items-center justify-center gap-3">
+          <p className="text-sm text-red-600 dark:text-red-400">Failed to load engagement metrics. Please try again.</p>
+          <button
+            onClick={() => refetch()}
+            className="rounded-lg border border-gray-300 px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-700"
+          >
+            Retry
+          </button>
+        </div>
       ) : data ? (
         <div className="grid gap-6 md:grid-cols-2">
           {/* Daily Active Users */}
@@ -341,7 +361,7 @@ function FeatureAdoptionTab() {
   const { resolvedTheme } = useTheme()
   const isDark = resolvedTheme === 'dark'
 
-  const { data, isLoading } = useQuery({
+  const { data, isLoading, error, refetch } = useQuery({
     queryKey: ['analytics-features', rangeFilter],
     queryFn: async () => {
       const params = new URLSearchParams()
@@ -384,6 +404,16 @@ function FeatureAdoptionTab() {
         <div className="flex h-96 items-center justify-center">
           <div className="text-gray-500 dark:text-gray-400">Loading feature adoption...</div>
         </div>
+      ) : error ? (
+        <div className="flex h-96 flex-col items-center justify-center gap-3">
+          <p className="text-sm text-red-600 dark:text-red-400">Failed to load feature adoption. Please try again.</p>
+          <button
+            onClick={() => refetch()}
+            className="rounded-lg border border-gray-300 px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-700"
+          >
+            Retry
+          </button>
+        </div>
       ) : data ? (
         <div className="space-y-6">
           {/* Feature Adoption Chart */}

admin-web/app/(dashboard)/blogs/[id]/page.tsx

@@ -60,6 +60,22 @@ export default function EditBlogPostPage({ params }: { params: Promise<{ id: str
 
   const markDirty = () => setIsDirty(true)
 
+  // Warn before losing unsaved changes on tab close / hard navigation
+  useEffect(() => {
+    if (!isDirty) return
+    const handleBeforeUnload = (e: BeforeUnloadEvent) => {
+      e.preventDefault()
+      e.returnValue = ''
+    }
+    window.addEventListener('beforeunload', handleBeforeUnload)
+    return () => window.removeEventListener('beforeunload', handleBeforeUnload)
+  }, [isDirty])
+
+  const handleBack = () => {
+    if (isDirty && !confirm('You have unsaved changes. Leave without saving?')) return
+    router.push('/blogs')
+  }
+
   const handleSave = async () => {
     if (!title.trim()) { toast.error('Title is required'); return }
     if (!content.trim()) { toast.error('Content is required'); return }
@@ -171,7 +187,7 @@ export default function EditBlogPostPage({ params }: { params: Promise<{ id: str
               {showPanel ? 'Hide panel ›' : '‹ Options'}
             </button>
             <button
-              onClick={() => router.push('/blogs')}
+              onClick={handleBack}
               className="text-sm text-indigo-400/70 hover:text-white transition-colors"
             >
               ← Back to Posts

admin-web/app/(dashboard)/blogs/new/page.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useState } from 'react'
+import { useState, useEffect } from 'react'
 import { useRouter } from 'next/navigation'
 import { toast } from 'sonner'
 import { PageHeader } from '@/components/ui/page-header'
@@ -36,6 +36,25 @@ export default function NewBlogPostPage() {
   const [showSchedule, setShowSchedule] = useState(false)
   const [showPanel, setShowPanel] = useState(true)
 
+  // Dirty when the user has entered any content that would be lost
+  const isDirty = Boolean(title.trim() || excerpt.trim() || content.trim() || tagsInput.trim())
+
+  // Warn before losing unsaved changes on tab close / hard navigation
+  useEffect(() => {
+    if (!isDirty || isSaving) return
+    const handleBeforeUnload = (e: BeforeUnloadEvent) => {
+      e.preventDefault()
+      e.returnValue = ''
+    }
+    window.addEventListener('beforeunload', handleBeforeUnload)
+    return () => window.removeEventListener('beforeunload', handleBeforeUnload)
+  }, [isDirty, isSaving])
+
+  const handleBack = () => {
+    if (isDirty && !confirm('You have unsaved changes. Leave without saving?')) return
+    router.push('/blogs')
+  }
+
   const handleTitleChange = (v: string) => {
     setTitle(v)
     if (!slugManual) setSlug(slugify(v) + (locale !== 'en' ? `-${locale}` : ''))
@@ -102,7 +121,7 @@ export default function NewBlogPostPage() {
               {showPanel ? 'Hide panel ›' : '‹ Options'}
             </button>
             <button
-              onClick={() => router.push('/blogs')}
+              onClick={handleBack}
               className="text-sm text-indigo-400/70 hover:text-white transition-colors"
             >
               ← Back to Posts

admin-web/app/(dashboard)/blogs/page.tsx

@@ -35,27 +35,51 @@ export default function BlogsPage() {
   const [togglingId, setTogglingId] = useState<string | null>(null)
   const [triggeringCron, setTriggeringCron] = useState(false)
   const [page, setPage] = useState(1)
+  const [total, setTotal] = useState(0)
+  const [stats, setStats] = useState({ total: 0, published: 0, drafts: 0 })
 
   const loadPosts = useCallback(async () => {
     setIsLoading(true)
     setError(null)
     try {
-      const data = await listBlogPosts({ limit: 100 })
+      const data = await listBlogPosts({
+        page,
+        limit: PAGE_SIZE,
+        locale: localeFilter !== 'all' ? localeFilter : undefined,
+        status: statusFilter !== 'all' ? statusFilter : undefined,
+      })
       setPosts(data.posts)
+      setTotal(data.total)
     } catch (err) {
       console.error(err)
       setError('Failed to load blog posts.')
     } finally {
       setIsLoading(false)
     }
+  }, [page, localeFilter, statusFilter])
+
+  const loadStats = useCallback(async () => {
+    try {
+      const [all, published, drafts] = await Promise.all([
+        listBlogPosts({ limit: 1 }),
+        listBlogPosts({ status: 'published', limit: 1 }),
+        listBlogPosts({ status: 'draft', limit: 1 }),
+      ])
+      setStats({ total: all.total, published: published.total, drafts: drafts.total })
+    } catch (err) {
+      console.error('Failed to load blog stats:', err)
+    }
   }, [])
 
   useEffect(() => { loadPosts() }, [loadPosts])
+  useEffect(() => { loadStats() }, [loadStats])
+
+  // Reset to first page when filters change
+  useEffect(() => { setPage(1) }, [localeFilter, statusFilter])
 
+  // Search filters the currently loaded page client-side
   useEffect(() => {
     let result = posts
-    if (localeFilter !== 'all') result = result.filter(p => p.locale === localeFilter)
-    if (statusFilter !== 'all') result = result.filter(p => p.status === statusFilter)
     if (search.trim()) {
       const q = search.toLowerCase()
       result = result.filter(p =>
@@ -65,8 +89,7 @@ export default function BlogsPage() {
       )
     }
     setFiltered(result)
-    setPage(1)
-  }, [posts, localeFilter, statusFilter, search])
+  }, [posts, search])
 
   const handleToggleStatus = async (post: BlogPostListItem) => {
     setTogglingId(post.id)
@@ -79,6 +102,7 @@ export default function BlogsPage() {
         toast.success(`"${post.title}" published`)
       }
       await loadPosts()
+      loadStats()
     } catch (err) {
       toast.error(err instanceof Error ? err.message : 'Failed to update status')
     } finally {
@@ -93,6 +117,7 @@ export default function BlogsPage() {
       await deleteBlogPost(post.id)
       toast.success('Post deleted')
       await loadPosts()
+      loadStats()
     } catch (err) {
       toast.error(err instanceof Error ? err.message : 'Failed to delete post')
     } finally {
@@ -112,10 +137,7 @@ export default function BlogsPage() {
     }
   }
 
-  const published = posts.filter(p => p.status === 'published').length
-  const drafts = posts.filter(p => p.status === 'draft').length
-  const totalPages = Math.max(1, Math.ceil(filtered.length / PAGE_SIZE))
-  const paginatedFiltered = filtered.slice((page - 1) * PAGE_SIZE, page * PAGE_SIZE)
+  const totalPages = Math.max(1, Math.ceil(total / PAGE_SIZE))
 
   return (
     <div className="space-y-6">
@@ -144,9 +166,9 @@ export default function BlogsPage() {
       {/* Stats */}
       <div className="grid grid-cols-3 gap-4">
         {[
-          { label: 'Total Posts', value: posts.length, color: 'text-indigo-300' },
-          { label: 'Published', value: published, color: 'text-emerald-300' },
-          { label: 'Drafts', value: drafts, color: 'text-amber-300' },
+          { label: 'Total Posts', value: stats.total, color: 'text-indigo-300' },
+          { label: 'Published', value: stats.published, color: 'text-emerald-300' },
+          { label: 'Drafts', value: stats.drafts, color: 'text-amber-300' },
         ].map(stat => (
           <div key={stat.label} className="rounded-xl border border-white/10 bg-white/5 p-4">
             <p className="text-xs text-indigo-400/70">{stat.label}</p>
@@ -184,7 +206,7 @@ export default function BlogsPage() {
           <option value="scheduled">Scheduled</option>
           <option value="draft">Draft</option>
         </select>
-        <span className="text-xs text-indigo-400/60">{filtered.length} posts</span>
+        <span className="text-xs text-indigo-400/60">{total} posts</span>
       </div>
 
       {/* Table */}
@@ -213,7 +235,7 @@ export default function BlogsPage() {
               </tr>
             </thead>
             <tbody className="divide-y divide-white/5">
-              {paginatedFiltered.map(post => (
+              {filtered.map(post => (
                 <tr key={post.id} className="group transition-colors hover:bg-white/5">
                   <td className="px-4 py-3">
                     <div className="flex items-start gap-2">
@@ -309,7 +331,7 @@ export default function BlogsPage() {
       {totalPages > 1 && (
         <div className="flex items-center justify-between text-sm">
           <span className="text-indigo-400/60">
-            {(page - 1) * PAGE_SIZE + 1}–{Math.min(page * PAGE_SIZE, filtered.length)} of {filtered.length}
+            {(page - 1) * PAGE_SIZE + 1}–{Math.min(page * PAGE_SIZE, total)} of {total}
           </span>
           <div className="flex gap-2">
             <button