fix: move useQuery before early returns in DashboardLayout

The useQuery hook for unanswered ticket counts was called after
two conditional early returns (isLoading and not isAuthenticated),
violating React rules of hooks. Moved it before the returns
and added isAuthenticated to the enabled condition.

frontend/src/app/dashboard/layout.tsx

@@ -75,6 +75,16 @@ export default function DashboardLayout({ children }: { children: React.ReactNod
     setSidebarOpen(false);
   }, [pathname]);
 
+  // Fetch unanswered ticket counts for staff/admin roles
+  // Must be called before any early returns to respect React's rules of hooks
+  const isStaffOrAdmin = user?.role === 'admin' || user?.role === 'technical' || user?.role === 'sales';
+  const { data: unansweredCounts } = useQuery<{ technical: number; sales: number; total: number }>({
+    queryKey: ['unanswered-counts'],
+    queryFn: () => api.get('/tickets/unanswered-counts').then((r) => r.data),
+    enabled: isStaffOrAdmin && isAuthenticated,
+    refetchInterval: 30000,
+  });
+
   if (isLoading) {
     return (
       <div className="min-h-screen flex items-center justify-center bg-gray-50">
@@ -110,15 +120,6 @@ export default function DashboardLayout({ children }: { children: React.ReactNod
     );
   };
 
-  // Fetch unanswered ticket counts for staff/admin roles
-  const isStaffOrAdmin = user?.role === 'admin' || user?.role === 'technical' || user?.role === 'sales';
-  const { data: unansweredCounts } = useQuery<{ technical: number; sales: number; total: number }>({
-    queryKey: ['unanswered-counts'],
-    queryFn: () => api.get('/tickets/unanswered-counts').then((r) => r.data),
-    enabled: isStaffOrAdmin,
-    refetchInterval: 30000, // refresh every 30 seconds
-  });
-
   const getBadge = (href: string): number | undefined => {
     if (!unansweredCounts) return undefined;
     if (href === '/dashboard/staff/tickets') {