UI: Add notification badges for pending inquiries in Admin Dashboard, Sidebar, and Bottom Nav

Author: pavanpaik

web/src/actions/tickets.ts

@@ -334,3 +334,13 @@ export async function archiveTicket(ticketId: string) {
         return { success: false, error: 'Failed to archive' };
     }
 }
+export async function getOpenTicketsCount() {
+    try {
+        if (!await isAdmin()) return 0;
+        return await prisma.ticket.count({
+            where: { status: 'OPEN' }
+        });
+    } catch (error) {
+        return 0;
+    }
+}

web/src/app/admin/page.tsx

@@ -77,12 +77,19 @@ export default async function AdminDashboard() {
                         <Link
                             key={i}
                             href={stat.href}
-                            className="bg-white p-2 md:px-5 md:py-3 rounded-xl md:rounded-2xl shadow-sm border border-gray-100 flex items-center space-x-2 md:space-x-3 hover:shadow-md hover:border-gray-200 transition-all active:scale-95"
+                            className="bg-white p-2 md:px-5 md:py-3 rounded-xl md:rounded-2xl shadow-sm border border-gray-100 flex items-center space-x-2 md:space-x-3 hover:shadow-md hover:border-gray-200 transition-all active:scale-95 group relative"
                         >
-                            <stat.icon className={`w-3.5 h-3.5 md:w-5 md:h-5 ${stat.color} flex-none`} />
+                            <div className="relative">
+                                <stat.icon className={`w-3.5 h-3.5 md:w-5 md:h-5 ${stat.color} flex-none transition-transform group-hover:scale-110`} />
+                                {stat.label === 'Pending' && stat.value > 0 && (
+                                    <span className="absolute -top-1.5 -right-1.5 flex h-4 w-4 md:h-5 md:w-5 items-center justify-center rounded-full bg-red-600 text-[6px] md:text-[9px] font-black text-white shadow-lg shadow-red-500/40 ring-2 ring-white animate-in zoom-in duration-300">
+                                        {stat.value}
+                                    </span>
+                                )}
+                            </div>
                             <div className="min-w-0">
                                 <p className="text-[7px] md:text-[10px] uppercase tracking-tighter text-gray-400 font-black leading-none mb-0.5 truncate">{stat.label}</p>
-                                <p className="text-sm md:text-lg font-black text-gray-800 leading-none">{stat.value}</p>
+                                <p className="text-sm md:text-lg font-black text-gray-800 leading-none tracking-tight">{stat.value}</p>
                             </div>
                         </Link>
                     ))}

web/src/components/admin/AdminBottomNav.tsx

@@ -11,16 +11,28 @@ import {
     Ticket
 } from 'lucide-react';
 
+import { useState, useEffect } from 'react';
+import { getOpenTicketsCount } from '@/actions/tickets';
+
 const ADMIN_NAV_ITEMS = [
     { label: 'Dash', href: '/admin', icon: LayoutDashboard },
     { label: 'Leela', href: '/admin/leela', icon: Footprints },
     { label: 'Bodha', href: '/admin/bodhakatha', icon: Lightbulb },
     { label: 'Glossary', href: '/admin/glossary', icon: Book },
-    { label: 'Inquiry', href: '/admin/tickets', icon: Ticket },
+    { label: 'Inquiry', href: '/admin/tickets', icon: Ticket, isTickets: true },
 ];
 
 export default function AdminBottomNav() {
     const pathname = usePathname();
+    const [openCount, setOpenCount] = useState(0);
+
+    useEffect(() => {
+        getOpenTicketsCount().then(setOpenCount);
+        const interval = setInterval(() => {
+            getOpenTicketsCount().then(setOpenCount);
+        }, 120000);
+        return () => clearInterval(interval);
+    }, []);
 
     return (
         <nav className="fixed bottom-0 left-0 right-0 bg-gray-900 border-t border-white/10 z-[100] pb-safe lg:hidden">
@@ -35,10 +47,17 @@ export default function AdminBottomNav() {
                         <Link
                             key={item.href}
                             href={item.href}
-                            className={`flex flex-col items-center justify-center w-full h-full space-y-1 transition-all active:scale-95 ${isActive ? 'text-ochre' : 'text-gray-500'
+                            className={`flex flex-col items-center justify-center w-full h-full space-y-1 transition-all active:scale-95 relative ${isActive ? 'text-ochre' : 'text-gray-500'
                                 }`}
                         >
-                            <Icon className={`w-5 h-5 ${isActive ? 'animate-pulse' : ''}`} />
+                            <div className="relative">
+                                <Icon className={`w-5 h-5 ${isActive ? 'animate-pulse' : ''}`} />
+                                {item.isTickets && openCount > 0 && (
+                                    <span className="absolute -top-1.5 -right-1.5 flex h-3.5 w-3.5 items-center justify-center rounded-full bg-red-600 text-[7px] font-black text-white shadow-lg ring-1 ring-gray-900 animate-in zoom-in duration-300">
+                                        {openCount}
+                                    </span>
+                                )}
+                            </div>
                             <span className="text-[9px] font-bold uppercase tracking-tighter">{item.label}</span>
                         </Link>
                     );

web/src/components/admin/AdminSidebar.tsx

@@ -16,12 +16,15 @@ import {
 } from 'lucide-react';
 import { UserButton } from '@clerk/nextjs';
 
+import { useState, useEffect } from 'react';
+import { getOpenTicketsCount } from '@/actions/tickets';
+
 const ADMIN_NAV = [
     { label: 'Dashboard', href: '/admin', icon: LayoutDashboard },
     { label: 'Leela Stories', href: '/admin/leela', icon: Footprints },
     { label: 'Bodhakatha', href: '/admin/bodhakatha', icon: Lightbulb },
     { label: 'Glossary', href: '/admin/glossary', icon: Book },
-    { label: 'Seeker Inquiries', href: '/admin/tickets', icon: Ticket },
+    { label: 'Seeker Inquiries', href: '/admin/tickets', icon: Ticket, isTickets: true },
 ];
 
 export default function AdminSidebar({
@@ -32,6 +35,18 @@ export default function AdminSidebar({
     onClose?: () => void;
 }) {
     const pathname = usePathname();
+    const [openCount, setOpenCount] = useState(0);
+
+    useEffect(() => {
+        getOpenTicketsCount().then(setOpenCount);
+
+        // Refresh every 2 mins
+        const interval = setInterval(() => {
+            getOpenTicketsCount().then(setOpenCount);
+        }, 120000);
+
+        return () => clearInterval(interval);
+    }, []);
 
     return (
         <>
@@ -92,7 +107,14 @@ export default function AdminSidebar({
                                             <Icon className={`w-5 h-5 ${isActive ? 'text-white' : 'text-gray-400 group-hover:text-ochre'} transition-colors`} />
                                             <span className="font-semibold text-sm">{item.label}</span>
                                         </div>
-                                        {isActive && <ChevronRight className="w-4 h-4 opacity-50" />}
+                                        <div className="flex items-center gap-2">
+                                            {item.isTickets && openCount > 0 && (
+                                                <span className={`flex h-5 min-w-5 items-center justify-center rounded-full px-1.5 text-[10px] font-black shadow-lg animate-in zoom-in duration-300 ${isActive ? 'bg-white text-ochre shadow-white/20' : 'bg-red-600 text-white shadow-red-500/30'}`}>
+                                                    {openCount}
+                                                </span>
+                                            )}
+                                            {isActive && <ChevronRight className="w-4 h-4 opacity-50" />}
+                                        </div>
                                     </Link>
                                 );
                             })}