Fix: "Rendered more hooks than during previous render" error

src/pages/admin/AdminContact.tsx

@@ -97,23 +97,6 @@ export default function AdminContact() {
   const [emailThreads, setEmailThreads] = useState<EmailThread[]>([]);
   const [loadingThreads, setLoadingThreads] = useState(false);
 
-  // Admin-only access check
-  if (!isAdmin()) {
-    return (
-      <div className="flex items-center justify-center min-h-screen">
-        <Card className="max-w-md">
-          <CardContent className="pt-6 text-center">
-            <AlertCircle className="h-12 w-12 text-destructive mx-auto mb-4" />
-            <h2 className="text-xl font-semibold mb-2">Access Denied</h2>
-            <p className="text-muted-foreground">
-              Email response features are only available to administrators.
-            </p>
-          </CardContent>
-        </Card>
-      </div>
-    );
-  }
-
   // Fetch contact submissions
   const { data: submissions, isLoading } = useQuery({
     queryKey: ['admin-contact-submissions', statusFilter, categoryFilter, searchQuery],
@@ -275,6 +258,23 @@ export default function AdminContact() {
     return cat?.label || category;
   };
 
+  // Admin-only access check (after all hooks)
+  if (!isAdmin()) {
+    return (
+      <div className="flex items-center justify-center min-h-screen">
+        <Card className="max-w-md">
+          <CardContent className="pt-6 text-center">
+            <AlertCircle className="h-12 w-12 text-destructive mx-auto mb-4" />
+            <h2 className="text-xl font-semibold mb-2">Access Denied</h2>
+            <p className="text-muted-foreground">
+              Email response features are only available to administrators.
+            </p>
+          </CardContent>
+        </Card>
+      </div>
+    );
+  }
+
   // Theme-aware EmailThreadItem component
   function EmailThreadItem({ thread }: { thread: EmailThread }) {
     const isOutbound = thread.direction === 'outbound';