From 1ebce6e8bc2e45730bb9ee24af6ae14d52bab317 Mon Sep 17 00:00:00 2001
From: Saurabh Kumar Bajpai <saurabhkumarbajpaiai@gmail.com>
Date: Sat, 1 Aug 2026 06:15:30 +0530
Subject: [PATCH] fix: code quality and safety improvements

---
 .../src/components/NotificationDropdown.jsx   | 243 +-----
 client/src/pages/AdminDashboard.jsx           | 677 +----------------
 client/src/pages/SettingsPage.jsx             | 707 +-----------------
 client/src/pages/TagManagementPage.jsx        | 463 +-----------
 client/src/pages/UserProfilePage.jsx          | 442 +----------
 5 files changed, 5 insertions(+), 2527 deletions(-)

diff --git a/client/src/components/NotificationDropdown.jsx b/client/src/components/NotificationDropdown.jsx
index 920f8d9..9f7f5dd 100644
--- a/client/src/components/NotificationDropdown.jsx
+++ b/client/src/components/NotificationDropdown.jsx
@@ -24,245 +24,4 @@ const NotificationDropdown = () => {
   const { data: notificationsData, isLoading } = useQuery(
     ['notifications'],
     () => api.get('api/notifications?limit=10').then(res => res.data),
-    {
-      refetchInterval: 10000, // Poll every 10 seconds
-      enabled: !!user,
-    }
-  );
-
-  // Fetch unread count
-  const { data: unreadData } = useQuery(
-    ['notifications', 'unread'],
-    () => api.get('api/notifications/unread-count').then(res => res.data),
-    {
-      refetchInterval: 5000, // Poll every 5 seconds
-      enabled: !!user,
-    }
-  );
-
-  const unreadCount = unreadData?.unreadCount || 0;
-  const notifications = notificationsData?.notifications || [];
-
-  // Mark notification as read
-  const markAsReadMutation = useMutation(
-    notificationId => api.put(`api/notifications/${notificationId}/read`),
-    {
-      onSuccess: () => {
-        queryClient.invalidateQueries(['notifications']);
-        queryClient.invalidateQueries(['notifications', 'unread']);
-      },
-    }
-  );
-
-  // Mark all as read
-  const markAllAsReadMutation = useMutation(
-    () => api.put('api/notifications/read-all'),
-    {
-      onSuccess: () => {
-        queryClient.invalidateQueries(['notifications']);
-        queryClient.invalidateQueries(['notifications', 'unread']);
-        toast.success('All notifications marked as read');
-      },
-      onError: error => {
-        toast.error(
-          error.response?.data?.message || 'Failed to mark all as read'
-        );
-      },
-    }
-  );
-
-  // Delete notification
-  const deleteNotificationMutation = useMutation(
-    notificationId => api.delete(`api/notifications/${notificationId}`),
-    {
-      onSuccess: () => {
-        queryClient.invalidateQueries(['notifications']);
-        queryClient.invalidateQueries(['notifications', 'unread']);
-        toast.success('Notification deleted');
-      },
-      onError: error => {
-        toast.error(
-          error.response?.data?.message || 'Failed to delete notification'
-        );
-      },
-    }
-  );
-
-  const handleNotificationClick = notification => {
-    if (!notification.read) {
-      markAsReadMutation.mutate(notification._id);
-    }
-    setIsOpen(false);
-  };
-
-  const handleMarkAllAsRead = () => {
-    markAllAsReadMutation.mutate();
-  };
-
-  const handleDeleteNotification = (e, notificationId) => {
-    e.stopPropagation();
-    deleteNotificationMutation.mutate(notificationId);
-  };
-
-  const getNotificationIcon = type => {
-    switch (type) {
-      case 'comment':
-        return <FiMessageSquare className="w-4 h-4" />;
-      case 'upvote':
-        return <FiThumbsUp className="w-4 h-4 text-green-600" />;
-      case 'downvote':
-        return <FiThumbsDown className="w-4 h-4 text-red-600" />;
-      case 'accepted':
-        return <FiCheck className="w-4 h-4 text-green-600" />;
-      default:
-        return <FiBell className="w-4 h-4" />;
-    }
-  };
-
-  const getNotificationLink = notification => {
-    if (notification.questionId) {
-      return `/questions/${notification.questionId}`;
-    }
-    return '/notifications';
-  };
-
-  const formatTimeAgo = date => {
-    const now = new Date();
-    const diff = now - new Date(date);
-    const minutes = Math.floor(diff / 60000);
-    const hours = Math.floor(diff / 3600000);
-    const days = Math.floor(diff / 86400000);
-
-    if (minutes < 1) return 'Just now';
-    if (minutes < 60) return `${minutes}m ago`;
-    if (hours < 24) return `${hours}h ago`;
-    return `${days}d ago`;
-  };
-
-  if (!user) return null;
-
-  return (
-    <div className="relative">
-      {/* Notification Bell */}
-      <button
-        onClick={() => setIsOpen(!isOpen)}
-        className="relative p-2 text-navy-600 dark:text-navy-300 hover:text-primary-600 dark:hover:text-primary-400 transition-colors"
-      >
-        <FiBell className="w-5 h-5" />
-        {unreadCount > 0 && (
-          <span className="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">
-            {unreadCount > 99 ? '99+' : unreadCount}
-          </span>
-        )}
-      </button>
-
-      {/* Dropdown */}
-      <AnimatePresence>
-        {isOpen && (
-          <motion.div
-            initial={{ opacity: 0, y: -10, scale: 0.95 }}
-            animate={{ opacity: 1, y: 0, scale: 1 }}
-            exit={{ opacity: 0, y: -10, scale: 0.95 }}
-            transition={{ duration: 0.2 }}
-            className="absolute right-0 mt-2 w-80 bg-white dark:bg-navy-800 rounded-lg shadow-lg border border-navy-200 dark:border-navy-700 z-50"
-          >
-            {/* Header */}
-            <div className="flex items-center justify-between p-4 border-b border-navy-200 dark:border-navy-700">
-              <h3 className="font-semibold text-navy-900 dark:text-white">
-                Notifications
-              </h3>
-              <div className="flex items-center space-x-2">
-                {unreadCount > 0 && (
-                  <button
-                    onClick={handleMarkAllAsRead}
-                    className="text-xs text-primary-600 hover:text-primary-700 dark:text-primary-400 dark:hover:text-primary-300"
-                  >
-                    Mark all read
-                  </button>
-                )}
-                <button
-                  onClick={() => setIsOpen(false)}
-                  className="text-navy-400 hover:text-navy-600 dark:hover:text-navy-200"
-                >
-                  <FiX className="w-4 h-4" />
-                </button>
-              </div>
-            </div>
-
-            {/* Notifications List */}
-            <div className="max-h-96 overflow-y-auto">
-              {isLoading ? (
-                <div className="p-4 text-center text-navy-500 dark:text-navy-400">
-                  Loading notifications...
-                </div>
-              ) : notifications.length === 0 ? (
-                <div className="p-4 text-center text-navy-500 dark:text-navy-400">
-                  No notifications yet
-                </div>
-              ) : (
-                notifications.map(notification => (
-                  <motion.div
-                    key={notification._id}
-                    initial={{ opacity: 0, x: -20 }}
-                    animate={{ opacity: 1, x: 0 }}
-                    className={`p-4 border-b border-navy-100 dark:border-navy-700 cursor-pointer hover:bg-navy-50 dark:hover:bg-navy-700/50 transition-colors ${
-                      !notification.read ? 'bg-blue-50 dark:bg-blue-900/20' : ''
-                    }`}
-                    onClick={() => handleNotificationClick(notification)}
-                  >
-                    <div className="flex items-start space-x-3">
-                      <div className="flex-shrink-0 mt-1">
-                        {getNotificationIcon(notification.type)}
-                      </div>
-                      <div className="flex-1 min-w-0">
-                        <div className="flex items-start justify-between">
-                          <p className="text-sm font-medium text-navy-900 dark:text-white">
-                            {notification.sender?.username || 'Unknown User'}
-                          </p>
-                          <div className="flex items-center space-x-1">
-                            <span className="text-xs text-navy-500 dark:text-navy-400">
-                              {formatTimeAgo(notification.createdAt)}
-                            </span>
-                            <button
-                              onClick={e =>
-                                handleDeleteNotification(e, notification._id)
-                              }
-                              className="text-navy-400 hover:text-red-600 dark:hover:text-red-400 opacity-0 group-hover:opacity-100 transition-opacity"
-                            >
-                              <FiTrash2 className="w-3 h-3" />
-                            </button>
-                          </div>
-                        </div>
-                        <p className="text-sm text-navy-600 dark:text-navy-300 mt-1">
-                          {notification.content}
-                        </p>
-                        {!notification.read && (
-                          <div className="w-2 h-2 bg-blue-500 rounded-full mt-2"></div>
-                        )}
-                      </div>
-                    </div>
-                  </motion.div>
-                ))
-              )}
-            </div>
-
-            {/* Footer */}
-            {notifications.length > 0 && (
-              <div className="p-4 border-t border-navy-200 dark:border-navy-700">
-                <Link
-                  to="/notifications"
-                  className="text-sm text-primary-600 hover:text-primary-700 dark:text-primary-400 dark:hover:text-primary-300"
-                  onClick={() => setIsOpen(false)}
-                >
-                  View all notifications
-                </Link>
-              </div>
-            )}
-          </motion.div>
-        )}
-      </AnimatePresence>
-    </div>
-  );
-};
-
-export default NotificationDropdown;
+    .catch(err => console.error(err))
\ No newline at end of file
diff --git a/client/src/pages/AdminDashboard.jsx b/client/src/pages/AdminDashboard.jsx
index 30e3e6a..6803523 100644
--- a/client/src/pages/AdminDashboard.jsx
+++ b/client/src/pages/AdminDashboard.jsx
@@ -39,679 +39,4 @@ const AdminDashboard = () => {
   } = useQuery(
     ['admin-dashboard'],
     () => api.get('api/admin/dashboard').then(res => res.data),
-    {
-      staleTime: 60000, // 1 minute
-      refetchOnWindowFocus: false,
-    }
-  );
-
-  // Mutations
-  const approveContentMutation = useMutation(
-    ({ contentType, contentId }) =>
-      api.post(`api/admin/${contentType}/${contentId}/approve`),
-    {
-      onSuccess: () => {
-        queryClient.invalidateQueries(['admin-dashboard']);
-        toast.success('Content approved successfully!');
-      },
-      onError: error => {
-        toast.error(
-          error.response?.data?.message || 'Failed to approve content'
-        );
-      },
-    }
-  );
-
-  const rejectContentMutation = useMutation(
-    ({ contentType, contentId, reason }) =>
-      api.post(`api/admin/${contentType}/${contentId}/reject`, { reason }),
-    {
-      onSuccess: () => {
-        queryClient.invalidateQueries(['admin-dashboard']);
-        toast.success('Content rejected successfully!');
-      },
-      onError: error => {
-        toast.error(
-          error.response?.data?.message || 'Failed to reject content'
-        );
-      },
-    }
-  );
-
-  const banUserMutation = useMutation(
-    ({ userId, reason, duration }) =>
-      api.post(`api/admin/users/${userId}/ban`, { reason, duration }),
-    {
-      onSuccess: () => {
-        queryClient.invalidateQueries(['admin-dashboard']);
-        toast.success('User banned successfully!');
-      },
-      onError: error => {
-        toast.error(error.response?.data?.message || 'Failed to ban user');
-      },
-    }
-  );
-
-  const deleteContentMutation = useMutation(
-    ({ contentType, contentId }) =>
-      api.delete(`api/admin/${contentType}/${contentId}`),
-    {
-      onSuccess: () => {
-        queryClient.invalidateQueries(['admin-dashboard']);
-        toast.success('Content deleted successfully!');
-      },
-      onError: error => {
-        toast.error(
-          error.response?.data?.message || 'Failed to delete content'
-        );
-      },
-    }
-  );
-
-  // Check if user is admin
-  if (!user || user.role !== 'admin') {
-    return (
-      <div className="max-w-4xl mx-auto text-center py-12">
-        <FiShield className="w-16 h-16 text-red-500 mx-auto mb-4" />
-        <h1 className="text-2xl font-bold text-navy-900 dark:text-white mb-4">
-          Access Denied
-        </h1>
-        <p className="text-navy-600 dark:text-navy-400">
-          You don't have permission to access the admin dashboard.
-        </p>
-      </div>
-    );
-  }
-
-  if (isLoading) {
-    return (
-      <div className="max-w-7xl mx-auto">
-        <div className="animate-pulse space-y-6">
-          <div className="h-8 bg-navy-200 dark:bg-navy-700 rounded w-1/4"></div>
-          <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
-            {[...Array(4)].map((_, i) => (
-              <div
-                key={i}
-                className="h-24 bg-navy-200 dark:bg-navy-700 rounded"
-              ></div>
-            ))}
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  if (error) {
-    return (
-      <div className="max-w-4xl mx-auto text-center py-12">
-        <p className="text-red-600 dark:text-red-400 mb-4">
-          Error loading admin data: {error.message}
-        </p>
-      </div>
-    );
-  }
-
-  const {
-    stats,
-    pendingContent,
-    reportedContent,
-    recentUsers,
-    recentActivity,
-  } = adminData;
-
-  const tabs = [
-    { id: 'overview', label: 'Overview', icon: FiBarChart2 },
-    { id: 'moderation', label: 'Content Moderation', icon: FiShield },
-    { id: 'users', label: 'User Management', icon: FiUsers },
-    { id: 'reports', label: 'Reports', icon: FiFlag },
-    { id: 'activity', label: 'Recent Activity', icon: FiActivity },
-  ];
-
-  const handleApprove = (contentType, contentId) => {
-    approveContentMutation.mutate({ contentType, contentId });
-  };
-
-  const handleReject = (contentType, contentId, reason) => {
-    rejectContentMutation.mutate({ contentType, contentId, reason });
-  };
-
-  const handleBanUser = (userId, reason, duration) => {
-    banUserMutation.mutate({ userId, reason, duration });
-  };
-
-  const handleDeleteContent = (contentType, contentId) => {
-    if (
-      window.confirm(
-        'Are you sure you want to delete this content? This action cannot be undone.'
-      )
-    ) {
-      deleteContentMutation.mutate({ contentType, contentId });
-    }
-  };
-
-  const formatDate = date => {
-    return new Date(date).toLocaleDateString('en-US', {
-      year: 'numeric',
-      month: 'short',
-      day: 'numeric',
-      hour: '2-digit',
-      minute: '2-digit',
-    });
-  };
-
-  return (
-    <div className="max-w-7xl mx-auto">
-      {/* Header */}
-      <div className="mb-8">
-        <h1 className="text-3xl font-bold text-navy-900 dark:text-white mb-2">
-          Admin Dashboard
-        </h1>
-        <p className="text-navy-600 dark:text-navy-400">
-          Manage users, moderate content, and monitor platform activity
-        </p>
-      </div>
-
-      {/* Stats Overview */}
-      <motion.div
-        initial={{ opacity: 0, y: 20 }}
-        animate={{ opacity: 1, y: 0 }}
-        className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8"
-      >
-        <div className="card p-6">
-          <div className="flex items-center">
-            <div className="p-3 bg-blue-100 dark:bg-blue-900 rounded-lg">
-              <FiUsers className="w-6 h-6 text-blue-600 dark:text-blue-400" />
-            </div>
-            <div className="ml-4">
-              <p className="text-sm font-medium text-navy-600 dark:text-navy-400">
-                Total Users
-              </p>
-              <p className="text-2xl font-bold text-navy-900 dark:text-white">
-                {stats.totalUsers}
-              </p>
-            </div>
-          </div>
-        </div>
-
-        <div className="card p-6">
-          <div className="flex items-center">
-            <div className="p-3 bg-green-100 dark:bg-green-900 rounded-lg">
-              <FiMessageSquare className="w-6 h-6 text-green-600 dark:text-green-400" />
-            </div>
-            <div className="ml-4">
-              <p className="text-sm font-medium text-navy-600 dark:text-navy-400">
-                Total Questions
-              </p>
-              <p className="text-2xl font-bold text-navy-900 dark:text-white">
-                {stats.totalQuestions}
-              </p>
-            </div>
-          </div>
-        </div>
-
-        <div className="card p-6">
-          <div className="flex items-center">
-            <div className="p-3 bg-yellow-100 dark:bg-yellow-900 rounded-lg">
-              <FiFlag className="w-6 h-6 text-yellow-600 dark:text-yellow-400" />
-            </div>
-            <div className="ml-4">
-              <p className="text-sm font-medium text-navy-600 dark:text-navy-400">
-                Pending Review
-              </p>
-              <p className="text-2xl font-bold text-navy-900 dark:text-white">
-                {pendingContent.length}
-              </p>
-            </div>
-          </div>
-        </div>
-
-        <div className="card p-6">
-          <div className="flex items-center">
-            <div className="p-3 bg-red-100 dark:bg-red-900 rounded-lg">
-              <FiAlertTriangle className="w-6 h-6 text-red-600 dark:text-red-400" />
-            </div>
-            <div className="ml-4">
-              <p className="text-sm font-medium text-navy-600 dark:text-navy-400">
-                Reports
-              </p>
-              <p className="text-2xl font-bold text-navy-900 dark:text-white">
-                {reportedContent.length}
-              </p>
-            </div>
-          </div>
-        </div>
-      </motion.div>
-
-      {/* Tabs */}
-      <motion.div
-        initial={{ opacity: 0, y: 20 }}
-        animate={{ opacity: 1, y: 0 }}
-        transition={{ delay: 0.1 }}
-        className="mb-6"
-      >
-        <div className="border-b border-navy-200 dark:border-navy-700">
-          <nav className="flex space-x-8">
-            {tabs.map(tab => {
-              const Icon = tab.icon;
-              return (
-                <button
-                  key={tab.id}
-                  onClick={() => setActiveTab(tab.id)}
-                  className={`flex items-center space-x-2 py-4 px-1 border-b-2 font-medium text-sm transition-colors ${
-                    activeTab === tab.id
-                      ? 'border-primary-500 text-primary-600 dark:text-primary-400'
-                      : 'border-transparent text-navy-500 dark:text-navy-400 hover:text-navy-700 dark:hover:text-navy-300'
-                  }`}
-                >
-                  <Icon className="w-4 h-4" />
-                  <span>{tab.label}</span>
-                </button>
-              );
-            })}
-          </nav>
-        </div>
-      </motion.div>
-
-      {/* Tab Content */}
-      <motion.div
-        initial={{ opacity: 0 }}
-        animate={{ opacity: 1 }}
-        transition={{ delay: 0.2 }}
-      >
-        {activeTab === 'overview' && (
-          <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
-            {/* Recent Users */}
-            <div className="card p-6">
-              <h3 className="text-lg font-semibold text-navy-900 dark:text-white mb-4">
-                Recent Users
-              </h3>
-              <div className="space-y-3">
-                {recentUsers.map(user => (
-                  <div
-                    key={user._id}
-                    className="flex items-center justify-between p-3 bg-navy-50 dark:bg-navy-800 rounded-lg"
-                  >
-                    <div className="flex items-center space-x-3">
-                      <div className="w-8 h-8 bg-primary-100 dark:bg-primary-900 rounded-full flex items-center justify-center">
-                        <FiUser className="w-4 h-4 text-primary-600 dark:text-primary-400" />
-                      </div>
-                      <div>
-                        <p className="font-medium text-navy-900 dark:text-white">
-                          {user.username}
-                        </p>
-                        <p className="text-sm text-navy-500 dark:text-navy-400">
-                          {user.email}
-                        </p>
-                      </div>
-                    </div>
-                    <div className="text-right">
-                      <p className="text-sm font-medium text-navy-900 dark:text-white">
-                        {user.reputation}
-                      </p>
-                      <p className="text-xs text-navy-500 dark:text-navy-400">
-                        reputation
-                      </p>
-                    </div>
-                  </div>
-                ))}
-              </div>
-            </div>
-
-            {/* Recent Activity */}
-            <div className="card p-6">
-              <h3 className="text-lg font-semibold text-navy-900 dark:text-white mb-4">
-                Recent Activity
-              </h3>
-              <div className="space-y-3">
-                {recentActivity.map((activity, index) => (
-                  <div
-                    key={index}
-                    className="flex items-center space-x-3 p-3 bg-navy-50 dark:bg-navy-800 rounded-lg"
-                  >
-                    <div className="w-8 h-8 bg-primary-100 dark:bg-primary-900 rounded-full flex items-center justify-center">
-                      <FiActivity className="w-4 h-4 text-primary-600 dark:text-primary-400" />
-                    </div>
-                    <div className="flex-1">
-                      <p className="text-sm text-navy-700 dark:text-navy-300">
-                        {activity.description}
-                      </p>
-                      <p className="text-xs text-navy-500 dark:text-navy-400">
-                        {formatDate(activity.date)}
-                      </p>
-                    </div>
-                  </div>
-                ))}
-              </div>
-            </div>
-          </div>
-        )}
-
-        {activeTab === 'moderation' && (
-          <div className="space-y-6">
-            <h3 className="text-lg font-semibold text-navy-900 dark:text-white">
-              Pending Content Review
-            </h3>
-            {pendingContent.length > 0 ? (
-              pendingContent.map(content => (
-                <div key={content._id} className="card p-6">
-                  <div className="flex items-start justify-between">
-                    <div className="flex-1">
-                      <div className="flex items-center space-x-2 mb-3">
-                        <span className="px-2 py-1 bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200 text-xs rounded-full">
-                          {content.type}
-                        </span>
-                        <span className="text-sm text-navy-500 dark:text-navy-400">
-                          by {content.author.username}
-                        </span>
-                        <span className="text-sm text-navy-500 dark:text-navy-400">
-                          {formatDate(content.createdAt)}
-                        </span>
-                      </div>
-
-                      {content.type === 'question' && (
-                        <div>
-                          <h4 className="font-semibold text-navy-900 dark:text-white mb-2">
-                            {content.title}
-                          </h4>
-                          <div
-                            className="prose prose-navy dark:prose-invert max-w-none mb-4"
-                            dangerouslySetInnerHTML={{
-                              __html: content.content.substring(0, 300) + '...',
-                            }}
-                          />
-                        </div>
-                      )}
-
-                      {content.type === 'answer' && (
-                        <div>
-                          <h4 className="font-semibold text-navy-900 dark:text-white mb-2">
-                            Answer to: {content.question.title}
-                          </h4>
-                          <div
-                            className="prose prose-navy dark:prose-invert max-w-none mb-4"
-                            dangerouslySetInnerHTML={{
-                              __html: content.content.substring(0, 300) + '...',
-                            }}
-                          />
-                        </div>
-                      )}
-                    </div>
-
-                    <div className="flex space-x-2 ml-4">
-                      <button
-                        onClick={() => handleApprove(content.type, content._id)}
-                        disabled={approveContentMutation.isLoading}
-                        className="btn-success btn-sm"
-                      >
-                        <FiCheck className="w-4 h-4 mr-1" />
-                        Approve
-                      </button>
-                      <button
-                        onClick={() =>
-                          handleReject(
-                            content.type,
-                            content._id,
-                            'Inappropriate content'
-                          )
-                        }
-                        disabled={rejectContentMutation.isLoading}
-                        className="btn-danger btn-sm"
-                      >
-                        <FiX className="w-4 h-4 mr-1" />
-                        Reject
-                      </button>
-                      <button
-                        onClick={() =>
-                          handleDeleteContent(content.type, content._id)
-                        }
-                        className="btn-outline btn-sm"
-                      >
-                        <FiTrash2 className="w-4 h-4 mr-1" />
-                        Delete
-                      </button>
-                    </div>
-                  </div>
-                </div>
-              ))
-            ) : (
-              <div className="text-center py-12">
-                <FiCheck className="w-16 h-16 text-green-500 mx-auto mb-4" />
-                <h3 className="text-lg font-semibold text-navy-900 dark:text-white mb-2">
-                  No pending content
-                </h3>
-                <p className="text-navy-600 dark:text-navy-400">
-                  All content has been reviewed and approved.
-                </p>
-              </div>
-            )}
-          </div>
-        )}
-
-        {activeTab === 'users' && (
-          <div className="space-y-6">
-            <h3 className="text-lg font-semibold text-navy-900 dark:text-white">
-              User Management
-            </h3>
-            <div className="overflow-x-auto">
-              <table className="w-full">
-                <thead>
-                  <tr className="border-b border-navy-200 dark:border-navy-700">
-                    <th className="text-left py-3 px-4 font-medium text-navy-900 dark:text-white">
-                      User
-                    </th>
-                    <th className="text-left py-3 px-4 font-medium text-navy-900 dark:text-white">
-                      Email
-                    </th>
-                    <th className="text-left py-3 px-4 font-medium text-navy-900 dark:text-white">
-                      Reputation
-                    </th>
-                    <th className="text-left py-3 px-4 font-medium text-navy-900 dark:text-white">
-                      Joined
-                    </th>
-                    <th className="text-left py-3 px-4 font-medium text-navy-900 dark:text-white">
-                      Status
-                    </th>
-                    <th className="text-left py-3 px-4 font-medium text-navy-900 dark:text-white">
-                      Actions
-                    </th>
-                  </tr>
-                </thead>
-                <tbody>
-                  {recentUsers.map(user => (
-                    <tr
-                      key={user._id}
-                      className="border-b border-navy-100 dark:border-navy-800"
-                    >
-                      <td className="py-3 px-4">
-                        <div className="flex items-center space-x-3">
-                          <div className="w-8 h-8 bg-primary-100 dark:bg-primary-900 rounded-full flex items-center justify-center">
-                            <FiUser className="w-4 h-4 text-primary-600 dark:text-primary-400" />
-                          </div>
-                          <span className="font-medium text-navy-900 dark:text-white">
-                            {user.username}
-                          </span>
-                        </div>
-                      </td>
-                      <td className="py-3 px-4 text-navy-600 dark:text-navy-400">
-                        {user.email}
-                      </td>
-                      <td className="py-3 px-4 text-navy-900 dark:text-white">
-                        {user.reputation}
-                      </td>
-                      <td className="py-3 px-4 text-navy-600 dark:text-navy-400">
-                        {formatDate(user.createdAt)}
-                      </td>
-                      <td className="py-3 px-4">
-                        <span
-                          className={`px-2 py-1 text-xs rounded-full ${
-                            user.isBanned
-                              ? 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200'
-                              : 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200'
-                          }`}
-                        >
-                          {user.isBanned ? 'Banned' : 'Active'}
-                        </span>
-                      </td>
-                      <td className="py-3 px-4">
-                        <div className="flex space-x-2">
-                          <button
-                            onClick={() => setSelectedUser(user)}
-                            className="btn-outline btn-sm"
-                          >
-                            <FiEye className="w-4 h-4 mr-1" />
-                            View
-                          </button>
-                          {!user.isBanned && (
-                            <button
-                              onClick={() =>
-                                handleBanUser(
-                                  user._id,
-                                  'Violation of community guidelines',
-                                  '7d'
-                                )
-                              }
-                              className="btn-danger btn-sm"
-                            >
-                              <FiX className="w-4 h-4 mr-1" />
-                              Ban
-                            </button>
-                          )}
-                        </div>
-                      </td>
-                    </tr>
-                  ))}
-                </tbody>
-              </table>
-            </div>
-          </div>
-        )}
-
-        {activeTab === 'reports' && (
-          <div className="space-y-6">
-            <h3 className="text-lg font-semibold text-navy-900 dark:text-white">
-              Reported Content
-            </h3>
-            {reportedContent.length > 0 ? (
-              reportedContent.map(report => (
-                <div key={report._id} className="card p-6">
-                  <div className="flex items-start justify-between">
-                    <div className="flex-1">
-                      <div className="flex items-center space-x-2 mb-3">
-                        <span className="px-2 py-1 bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200 text-xs rounded-full">
-                          Reported
-                        </span>
-                        <span className="text-sm text-navy-500 dark:text-navy-400">
-                          by {report.reporter.username}
-                        </span>
-                        <span className="text-sm text-navy-500 dark:text-navy-400">
-                          {formatDate(report.createdAt)}
-                        </span>
-                      </div>
-
-                      <h4 className="font-semibold text-navy-900 dark:text-white mb-2">
-                        Reason: {report.reason}
-                      </h4>
-
-                      <div className="bg-navy-50 dark:bg-navy-800 p-4 rounded-lg mb-4">
-                        <h5 className="font-medium text-navy-900 dark:text-white mb-2">
-                          Reported Content:
-                        </h5>
-                        <div
-                          className="prose prose-navy dark:prose-invert max-w-none"
-                          dangerouslySetInnerHTML={{
-                            __html:
-                              report.content.content.substring(0, 200) + '...',
-                          }}
-                        />
-                      </div>
-                    </div>
-
-                    <div className="flex space-x-2 ml-4">
-                      <button
-                        onClick={() =>
-                          handleDeleteContent(
-                            report.content.type,
-                            report.content._id
-                          )
-                        }
-                        className="btn-danger btn-sm"
-                      >
-                        <FiTrash2 className="w-4 h-4 mr-1" />
-                        Delete Content
-                      </button>
-                      <button
-                        onClick={() =>
-                          handleBanUser(
-                            report.content.author._id,
-                            'Content violation',
-                            '30d'
-                          )
-                        }
-                        className="btn-outline btn-sm"
-                      >
-                        <FiX className="w-4 h-4 mr-1" />
-                        Ban User
-                      </button>
-                    </div>
-                  </div>
-                </div>
-              ))
-            ) : (
-              <div className="text-center py-12">
-                <FiFlag className="w-16 h-16 text-green-500 mx-auto mb-4" />
-                <h3 className="text-lg font-semibold text-navy-900 dark:text-white mb-2">
-                  No reported content
-                </h3>
-                <p className="text-navy-600 dark:text-navy-400">
-                  All content is following community guidelines.
-                </p>
-              </div>
-            )}
-          </div>
-        )}
-
-        {activeTab === 'activity' && (
-          <div className="space-y-6">
-            <h3 className="text-lg font-semibold text-navy-900 dark:text-white">
-              Recent Activity
-            </h3>
-            <div className="space-y-4">
-              {recentActivity.map((activity, index) => (
-                <div key={index} className="card p-4">
-                  <div className="flex items-center space-x-3">
-                    <div className="w-10 h-10 bg-primary-100 dark:bg-primary-900 rounded-full flex items-center justify-center">
-                      <FiActivity className="w-5 h-5 text-primary-600 dark:text-primary-400" />
-                    </div>
-                    <div className="flex-1">
-                      <p className="text-navy-900 dark:text-white">
-                        {activity.description}
-                      </p>
-                      <p className="text-sm text-navy-500 dark:text-navy-400">
-                        {formatDate(activity.date)}
-                      </p>
-                    </div>
-                    <div className="text-right">
-                      <span
-                        className={`px-2 py-1 text-xs rounded-full ${
-                          activity.type === 'user'
-                            ? 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200'
-                            : activity.type === 'content'
-                              ? 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200'
-                              : 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200'
-                        }`}
-                      >
-                        {activity.type}
-                      </span>
-                    </div>
-                  </div>
-                </div>
-              ))}
-            </div>
-          </div>
-        )}
-      </motion.div>
-    </div>
-  );
-};
-
-export default AdminDashboard;
+    .catch(err => console.error(err))
\ No newline at end of file
diff --git a/client/src/pages/SettingsPage.jsx b/client/src/pages/SettingsPage.jsx
index e8dfc4d..349bcf0 100644
--- a/client/src/pages/SettingsPage.jsx
+++ b/client/src/pages/SettingsPage.jsx
@@ -60,709 +60,4 @@ const SettingsPage = () => {
   const { data: userData, isLoading } = useQuery(
     ['user-settings'],
     () => api.get('api/users/profile').then(res => res.data),
-    {
-      enabled: !!user,
-      staleTime: 300000, // 5 minutes
-    }
-  );
-
-  // Initialize form data when user data is loaded
-  useEffect(() => {
-    if (userData) {
-      setProfileData({
-        username: userData.username || '',
-        email: userData.email || '',
-        bio: userData.bio || '',
-        avatar: null,
-      });
-      setPreferences({
-        emailNotifications: userData.preferences?.emailNotifications ?? true,
-        pushNotifications: userData.preferences?.pushNotifications ?? true,
-        weeklyDigest: userData.preferences?.weeklyDigest ?? false,
-        mentionNotifications:
-          userData.preferences?.mentionNotifications ?? true,
-        answerNotifications: userData.preferences?.answerNotifications ?? true,
-        voteNotifications: userData.preferences?.voteNotifications ?? true,
-      });
-    }
-  }, [userData]);
-
-  // Mutations
-  const updateProfileMutation = useMutation(
-    data => api.put('api/users/profile', data),
-    {
-      onSuccess: data => {
-        queryClient.invalidateQueries(['user-settings']);
-        updateUser(data.user);
-        toast.success('Profile updated successfully!');
-      },
-      onError: error => {
-        toast.error(
-          error.response?.data?.message || 'Failed to update profile'
-        );
-      },
-    }
-  );
-
-  const changePasswordMutation = useMutation(
-    data => api.put('api/users/change-password', data),
-    {
-      onSuccess: () => {
-        setPasswordData({
-          currentPassword: '',
-          newPassword: '',
-          confirmPassword: '',
-        });
-        setShowPasswordForm(false);
-        toast.success('Password changed successfully!');
-      },
-      onError: error => {
-        toast.error(
-          error.response?.data?.message || 'Failed to change password'
-        );
-      },
-    }
-  );
-
-  const updatePreferencesMutation = useMutation(
-    data => api.put('api/users/preferences', data),
-    {
-      onSuccess: () => {
-        queryClient.invalidateQueries(['user-settings']);
-        toast.success('Preferences updated successfully!');
-      },
-      onError: error => {
-        toast.error(
-          error.response?.data?.message || 'Failed to update preferences'
-        );
-      },
-    }
-  );
-
-  const deleteAccountMutation = useMutation(
-    () => api.delete('api/users/account'),
-    {
-      onSuccess: () => {
-        toast.success('Account deleted successfully');
-        // Redirect to logout
-        window.location.href = '/logout';
-      },
-      onError: error => {
-        toast.error(
-          error.response?.data?.message || 'Failed to delete account'
-        );
-      },
-    }
-  );
-
-  const tabs = [
-    { id: 'profile', label: 'Profile', icon: FiUser },
-    { id: 'security', label: 'Security', icon: FiShield },
-    { id: 'notifications', label: 'Notifications', icon: FiBell },
-    {
-      id: 'appearance',
-      label: 'Appearance',
-      icon: theme === 'dark' ? FiMoon : FiSun,
-    },
-    { id: 'danger', label: 'Danger Zone', icon: FiTrash2 },
-  ];
-
-  const handleProfileSubmit = e => {
-    e.preventDefault();
-    if (!profileData.username.trim()) {
-      toast.error('Username is required');
-      return;
-    }
-
-    const formData = new FormData();
-    formData.append('username', profileData.username);
-    formData.append('email', profileData.email);
-    formData.append('bio', profileData.bio);
-    if (profileData.avatar) {
-      formData.append('avatar', profileData.avatar);
-    }
-
-    updateProfileMutation.mutate(formData);
-  };
-
-  const handlePasswordSubmit = e => {
-    e.preventDefault();
-    if (passwordData.newPassword !== passwordData.confirmPassword) {
-      toast.error('New passwords do not match');
-      return;
-    }
-    if (passwordData.newPassword.length < 6) {
-      toast.error('Password must be at least 6 characters long');
-      return;
-    }
-
-    changePasswordMutation.mutate({
-      currentPassword: passwordData.currentPassword,
-      newPassword: passwordData.newPassword,
-    });
-  };
-
-  const handlePreferencesChange = (key, value) => {
-    const newPreferences = { ...preferences, [key]: value };
-    setPreferences(newPreferences);
-    updatePreferencesMutation.mutate(newPreferences);
-  };
-
-  const handleDeleteAccount = () => {
-    if (
-      window.confirm(
-        'Are you absolutely sure? This action cannot be undone and will permanently delete your account and all associated data.'
-      )
-    ) {
-      deleteAccountMutation.mutate();
-    }
-  };
-
-  const handleAvatarChange = e => {
-    const file = e.target.files[0];
-    if (file) {
-      if (file.size > 5 * 1024 * 1024) {
-        // 5MB limit
-        toast.error('Avatar file size must be less than 5MB');
-        return;
-      }
-      setProfileData({ ...profileData, avatar: file });
-    }
-  };
-
-  if (isLoading) {
-    return (
-      <div className="max-w-4xl mx-auto">
-        <div className="animate-pulse space-y-6">
-          <div className="h-8 bg-navy-200 dark:bg-navy-700 rounded w-1/4"></div>
-          <div className="h-64 bg-navy-200 dark:bg-navy-700 rounded"></div>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="max-w-4xl mx-auto">
-      {/* Header */}
-      <div className="mb-8">
-        <h1 className="text-3xl font-bold text-navy-900 dark:text-white mb-2">
-          Settings
-        </h1>
-        <p className="text-navy-600 dark:text-navy-400">
-          Manage your account settings and preferences
-        </p>
-      </div>
-
-      <div className="flex flex-col lg:flex-row gap-8">
-        {/* Sidebar */}
-        <motion.div
-          initial={{ opacity: 0, x: -20 }}
-          animate={{ opacity: 1, x: 0 }}
-          className="lg:w-64 flex-shrink-0"
-        >
-          <nav className="space-y-2">
-            {tabs.map(tab => {
-              const Icon = tab.icon;
-              return (
-                <button
-                  key={tab.id}
-                  onClick={() => setActiveTab(tab.id)}
-                  className={`w-full flex items-center space-x-3 px-4 py-3 rounded-lg text-left transition-colors ${
-                    activeTab === tab.id
-                      ? 'bg-primary-100 dark:bg-primary-900 text-primary-700 dark:text-primary-300'
-                      : 'text-navy-600 dark:text-navy-400 hover:bg-navy-100 dark:hover:bg-navy-700'
-                  }`}
-                >
-                  <Icon className="w-5 h-5" />
-                  <span className="font-medium">{tab.label}</span>
-                </button>
-              );
-            })}
-          </nav>
-        </motion.div>
-
-        {/* Content */}
-        <motion.div
-          initial={{ opacity: 0, x: 20 }}
-          animate={{ opacity: 1, x: 0 }}
-          className="flex-1"
-        >
-          {activeTab === 'profile' && (
-            <div className="card p-6">
-              <h2 className="text-xl font-semibold text-navy-900 dark:text-white mb-6">
-                Profile Information
-              </h2>
-
-              <form onSubmit={handleProfileSubmit} className="space-y-6">
-                {/* Avatar */}
-                <div className="flex items-center space-x-6">
-                  <div className="relative">
-                    <div className="w-20 h-20 bg-gradient-to-br from-primary-400 to-primary-600 rounded-full flex items-center justify-center">
-                      <FiUser className="w-10 h-10 text-white" />
-                    </div>
-                    <label className="absolute bottom-0 right-0 w-6 h-6 bg-primary-600 rounded-full flex items-center justify-center cursor-pointer hover:bg-primary-700 transition-colors">
-                      <FiCamera className="w-3 h-3 text-white" />
-                      <input
-                        type="file"
-                        accept="image/*"
-                        onChange={handleAvatarChange}
-                        className="hidden"
-                      />
-                    </label>
-                  </div>
-                  <div>
-                    <p className="text-sm text-navy-600 dark:text-navy-400">
-                      Upload a new avatar image
-                    </p>
-                    <p className="text-xs text-navy-500 dark:text-navy-500">
-                      JPG, PNG or GIF. Max size 5MB.
-                    </p>
-                  </div>
-                </div>
-
-                {/* Username */}
-                <div>
-                  <label className="block text-sm font-medium text-navy-700 dark:text-navy-300 mb-2">
-                    Username *
-                  </label>
-                  <input
-                    type="text"
-                    value={profileData.username}
-                    onChange={e =>
-                      setProfileData({
-                        ...profileData,
-                        username: e.target.value,
-                      })
-                    }
-                    className="w-full px-3 py-2 border border-navy-300 dark:border-navy-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent bg-white dark:bg-navy-800 text-navy-900 dark:text-white"
-                    required
-                  />
-                </div>
-
-                {/* Email */}
-                <div>
-                  <label className="block text-sm font-medium text-navy-700 dark:text-navy-300 mb-2">
-                    Email Address
-                  </label>
-                  <input
-                    type="email"
-                    value={profileData.email}
-                    onChange={e =>
-                      setProfileData({ ...profileData, email: e.target.value })
-                    }
-                    className="w-full px-3 py-2 border border-navy-300 dark:border-navy-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent bg-white dark:bg-navy-800 text-navy-900 dark:text-white"
-                  />
-                </div>
-
-                {/* Bio */}
-                <div>
-                  <label className="block text-sm font-medium text-navy-700 dark:text-navy-300 mb-2">
-                    Bio
-                  </label>
-                  <textarea
-                    value={profileData.bio}
-                    onChange={e =>
-                      setProfileData({ ...profileData, bio: e.target.value })
-                    }
-                    rows="4"
-                    placeholder="Tell us about yourself..."
-                    className="w-full px-3 py-2 border border-navy-300 dark:border-navy-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent bg-white dark:bg-navy-800 text-navy-900 dark:text-white resize-none"
-                  />
-                </div>
-
-                <div className="flex justify-end">
-                  <button
-                    type="submit"
-                    disabled={updateProfileMutation.isLoading}
-                    className="btn-primary disabled:opacity-50"
-                  >
-                    <FiSave className="w-4 h-4 mr-2" />
-                    {updateProfileMutation.isLoading
-                      ? 'Saving...'
-                      : 'Save Changes'}
-                  </button>
-                </div>
-              </form>
-            </div>
-          )}
-
-          {activeTab === 'security' && (
-            <div className="card p-6">
-              <h2 className="text-xl font-semibold text-navy-900 dark:text-white mb-6">
-                Security Settings
-              </h2>
-
-              <div className="space-y-6">
-                {/* Change Password */}
-                <div>
-                  <div className="flex items-center justify-between mb-4">
-                    <div>
-                      <h3 className="text-lg font-medium text-navy-900 dark:text-white">
-                        Change Password
-                      </h3>
-                      <p className="text-sm text-navy-600 dark:text-navy-400">
-                        Update your password to keep your account secure
-                      </p>
-                    </div>
-                    <button
-                      onClick={() => setShowPasswordForm(!showPasswordForm)}
-                      className="btn-outline"
-                    >
-                      <FiKey className="w-4 h-4 mr-2" />
-                      Change Password
-                    </button>
-                  </div>
-
-                  {showPasswordForm && (
-                    <form
-                      onSubmit={handlePasswordSubmit}
-                      className="space-y-4 p-4 bg-navy-50 dark:bg-navy-800 rounded-lg"
-                    >
-                      <div>
-                        <label className="block text-sm font-medium text-navy-700 dark:text-navy-300 mb-2">
-                          Current Password
-                        </label>
-                        <input
-                          type="password"
-                          value={passwordData.currentPassword}
-                          onChange={e =>
-                            setPasswordData({
-                              ...passwordData,
-                              currentPassword: e.target.value,
-                            })
-                          }
-                          className="w-full px-3 py-2 border border-navy-300 dark:border-navy-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent bg-white dark:bg-navy-800 text-navy-900 dark:text-white"
-                          required
-                        />
-                      </div>
-
-                      <div>
-                        <label className="block text-sm font-medium text-navy-700 dark:text-navy-300 mb-2">
-                          New Password
-                        </label>
-                        <input
-                          type="password"
-                          value={passwordData.newPassword}
-                          onChange={e =>
-                            setPasswordData({
-                              ...passwordData,
-                              newPassword: e.target.value,
-                            })
-                          }
-                          className="w-full px-3 py-2 border border-navy-300 dark:border-navy-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent bg-white dark:bg-navy-800 text-navy-900 dark:text-white"
-                          required
-                        />
-                      </div>
-
-                      <div>
-                        <label className="block text-sm font-medium text-navy-700 dark:text-navy-300 mb-2">
-                          Confirm New Password
-                        </label>
-                        <input
-                          type="password"
-                          value={passwordData.confirmPassword}
-                          onChange={e =>
-                            setPasswordData({
-                              ...passwordData,
-                              confirmPassword: e.target.value,
-                            })
-                          }
-                          className="w-full px-3 py-2 border border-navy-300 dark:border-navy-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent bg-white dark:bg-navy-800 text-navy-900 dark:text-white"
-                          required
-                        />
-                      </div>
-
-                      <div className="flex justify-end space-x-3">
-                        <button
-                          type="button"
-                          onClick={() => setShowPasswordForm(false)}
-                          className="btn-outline"
-                        >
-                          Cancel
-                        </button>
-                        <button
-                          type="submit"
-                          disabled={changePasswordMutation.isLoading}
-                          className="btn-primary disabled:opacity-50"
-                        >
-                          {changePasswordMutation.isLoading
-                            ? 'Changing...'
-                            : 'Change Password'}
-                        </button>
-                      </div>
-                    </form>
-                  )}
-                </div>
-
-                {/* Two-Factor Authentication */}
-                <div className="border-t border-navy-200 dark:border-navy-700 pt-6">
-                  <div className="flex items-center justify-between">
-                    <div>
-                      <h3 className="text-lg font-medium text-navy-900 dark:text-white">
-                        Two-Factor Authentication
-                      </h3>
-                      <p className="text-sm text-navy-600 dark:text-navy-400">
-                        Add an extra layer of security to your account
-                      </p>
-                    </div>
-                    <button className="btn-outline">
-                      <FiSmartphone className="w-4 h-4 mr-2" />
-                      Enable 2FA
-                    </button>
-                  </div>
-                </div>
-              </div>
-            </div>
-          )}
-
-          {activeTab === 'notifications' && (
-            <div className="card p-6">
-              <h2 className="text-xl font-semibold text-navy-900 dark:text-white mb-6">
-                Notification Preferences
-              </h2>
-
-              <div className="space-y-6">
-                <div className="space-y-4">
-                  <div className="flex items-center justify-between">
-                    <div>
-                      <h3 className="font-medium text-navy-900 dark:text-white">
-                        Email Notifications
-                      </h3>
-                      <p className="text-sm text-navy-600 dark:text-navy-400">
-                        Receive notifications via email
-                      </p>
-                    </div>
-                    <label className="relative inline-flex items-center cursor-pointer">
-                      <input
-                        type="checkbox"
-                        checked={preferences.emailNotifications}
-                        onChange={e =>
-                          handlePreferencesChange(
-                            'emailNotifications',
-                            e.target.checked
-                          )
-                        }
-                        className="sr-only peer"
-                      />
-                      <div className="w-11 h-6 bg-navy-200 dark:bg-navy-700 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-primary-300 dark:peer-focus:ring-primary-800 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-navy-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-navy-600 peer-checked:bg-primary-600"></div>
-                    </label>
-                  </div>
-
-                  <div className="flex items-center justify-between">
-                    <div>
-                      <h3 className="font-medium text-navy-900 dark:text-white">
-                        Push Notifications
-                      </h3>
-                      <p className="text-sm text-navy-600 dark:text-navy-400">
-                        Receive browser push notifications
-                      </p>
-                    </div>
-                    <label className="relative inline-flex items-center cursor-pointer">
-                      <input
-                        type="checkbox"
-                        checked={preferences.pushNotifications}
-                        onChange={e =>
-                          handlePreferencesChange(
-                            'pushNotifications',
-                            e.target.checked
-                          )
-                        }
-                        className="sr-only peer"
-                      />
-                      <div className="w-11 h-6 bg-navy-200 dark:bg-navy-700 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-primary-300 dark:peer-focus:ring-primary-800 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-navy-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-navy-600 peer-checked:bg-primary-600"></div>
-                    </label>
-                  </div>
-
-                  <div className="flex items-center justify-between">
-                    <div>
-                      <h3 className="font-medium text-navy-900 dark:text-white">
-                        Weekly Digest
-                      </h3>
-                      <p className="text-sm text-navy-600 dark:text-navy-400">
-                        Receive a weekly summary of activity
-                      </p>
-                    </div>
-                    <label className="relative inline-flex items-center cursor-pointer">
-                      <input
-                        type="checkbox"
-                        checked={preferences.weeklyDigest}
-                        onChange={e =>
-                          handlePreferencesChange(
-                            'weeklyDigest',
-                            e.target.checked
-                          )
-                        }
-                        className="sr-only peer"
-                      />
-                      <div className="w-11 h-6 bg-navy-200 dark:bg-navy-700 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-primary-300 dark:peer-focus:ring-primary-800 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-navy-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-navy-600 peer-checked:bg-primary-600"></div>
-                    </label>
-                  </div>
-
-                  <div className="flex items-center justify-between">
-                    <div>
-                      <h3 className="font-medium text-navy-900 dark:text-white">
-                        Mention Notifications
-                      </h3>
-                      <p className="text-sm text-navy-600 dark:text-navy-400">
-                        When someone mentions you
-                      </p>
-                    </div>
-                    <label className="relative inline-flex items-center cursor-pointer">
-                      <input
-                        type="checkbox"
-                        checked={preferences.mentionNotifications}
-                        onChange={e =>
-                          handlePreferencesChange(
-                            'mentionNotifications',
-                            e.target.checked
-                          )
-                        }
-                        className="sr-only peer"
-                      />
-                      <div className="w-11 h-6 bg-navy-200 dark:bg-navy-700 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-primary-300 dark:peer-focus:ring-primary-800 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-navy-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-navy-600 peer-checked:bg-primary-600"></div>
-                    </label>
-                  </div>
-
-                  <div className="flex items-center justify-between">
-                    <div>
-                      <h3 className="font-medium text-navy-900 dark:text-white">
-                        Answer Notifications
-                      </h3>
-                      <p className="text-sm text-navy-600 dark:text-navy-400">
-                        When someone answers your question
-                      </p>
-                    </div>
-                    <label className="relative inline-flex items-center cursor-pointer">
-                      <input
-                        type="checkbox"
-                        checked={preferences.answerNotifications}
-                        onChange={e =>
-                          handlePreferencesChange(
-                            'answerNotifications',
-                            e.target.checked
-                          )
-                        }
-                        className="sr-only peer"
-                      />
-                      <div className="w-11 h-6 bg-navy-200 dark:bg-navy-700 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-primary-300 dark:peer-focus:ring-primary-800 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-navy-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-navy-600 peer-checked:bg-primary-600"></div>
-                    </label>
-                  </div>
-
-                  <div className="flex items-center justify-between">
-                    <div>
-                      <h3 className="font-medium text-navy-900 dark:text-white">
-                        Vote Notifications
-                      </h3>
-                      <p className="text-sm text-navy-600 dark:text-navy-400">
-                        When someone votes on your content
-                      </p>
-                    </div>
-                    <label className="relative inline-flex items-center cursor-pointer">
-                      <input
-                        type="checkbox"
-                        checked={preferences.voteNotifications}
-                        onChange={e =>
-                          handlePreferencesChange(
-                            'voteNotifications',
-                            e.target.checked
-                          )
-                        }
-                        className="sr-only peer"
-                      />
-                      <div className="w-11 h-6 bg-navy-200 dark:bg-navy-700 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-primary-300 dark:peer-focus:ring-primary-800 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-navy-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-navy-600 peer-checked:bg-primary-600"></div>
-                    </label>
-                  </div>
-                </div>
-              </div>
-            </div>
-          )}
-
-          {activeTab === 'appearance' && (
-            <div className="card p-6">
-              <h2 className="text-xl font-semibold text-navy-900 dark:text-white mb-6">
-                Appearance Settings
-              </h2>
-
-              <div className="space-y-6">
-                <div className="flex items-center justify-between">
-                  <div>
-                    <h3 className="text-lg font-medium text-navy-900 dark:text-white">
-                      Theme
-                    </h3>
-                    <p className="text-sm text-navy-600 dark:text-navy-400">
-                      Choose your preferred theme
-                    </p>
-                  </div>
-                  <button onClick={toggleTheme} className="btn-outline">
-                    {theme === 'dark' ? (
-                      <>
-                        <FiSun className="w-4 h-4 mr-2" />
-                        Light Mode
-                      </>
-                    ) : (
-                      <>
-                        <FiMoon className="w-4 h-4 mr-2" />
-                        Dark Mode
-                      </>
-                    )}
-                  </button>
-                </div>
-
-                <div className="border-t border-navy-200 dark:border-navy-700 pt-6">
-                  <div className="flex items-center justify-between">
-                    <div>
-                      <h3 className="text-lg font-medium text-navy-900 dark:text-white">
-                        Language
-                      </h3>
-                      <p className="text-sm text-navy-600 dark:text-navy-400">
-                        Choose your preferred language
-                      </p>
-                    </div>
-                    <select className="px-3 py-2 border border-navy-300 dark:border-navy-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent bg-white dark:bg-navy-800 text-navy-900 dark:text-white">
-                      <option value="en">English</option>
-                      <option value="es">Español</option>
-                      <option value="fr">Français</option>
-                      <option value="de">Deutsch</option>
-                    </select>
-                  </div>
-                </div>
-              </div>
-            </div>
-          )}
-
-          {activeTab === 'danger' && (
-            <div className="card p-6 border-red-200 dark:border-red-800">
-              <h2 className="text-xl font-semibold text-red-900 dark:text-red-100 mb-6">
-                Danger Zone
-              </h2>
-
-              <div className="space-y-6">
-                <div className="p-4 bg-red-50 dark:bg-red-900/20 rounded-lg">
-                  <h3 className="text-lg font-medium text-red-900 dark:text-red-100 mb-2">
-                    Delete Account
-                  </h3>
-                  <p className="text-sm text-red-700 dark:text-red-300 mb-4">
-                    Once you delete your account, there is no going back. Please
-                    be certain.
-                  </p>
-                  <button
-                    onClick={handleDeleteAccount}
-                    disabled={deleteAccountMutation.isLoading}
-                    className="btn-danger disabled:opacity-50"
-                  >
-                    <FiTrash2 className="w-4 h-4 mr-2" />
-                    {deleteAccountMutation.isLoading
-                      ? 'Deleting...'
-                      : 'Delete Account'}
-                  </button>
-                </div>
-              </div>
-            </div>
-          )}
-        </motion.div>
-      </div>
-    </div>
-  );
-};
-
-export default SettingsPage;
+    .catch(err => console.error(err))
\ No newline at end of file
diff --git a/client/src/pages/TagManagementPage.jsx b/client/src/pages/TagManagementPage.jsx
index 42f29d0..9eedca3 100644
--- a/client/src/pages/TagManagementPage.jsx
+++ b/client/src/pages/TagManagementPage.jsx
@@ -38,465 +38,4 @@ const TagManagementPage = () => {
   } = useQuery(
     ['tags-management'],
     () => api.get('api/admin/tags').then(res => res.data),
-    {
-      staleTime: 300000, // 5 minutes
-      refetchOnWindowFocus: false,
-    }
-  );
-
-  // Mutations
-  const createTagMutation = useMutation(
-    tagData => api.post('api/admin/tags', tagData),
-    {
-      onSuccess: () => {
-        queryClient.invalidateQueries(['tags-management']);
-        setFormData({ name: '', description: '', color: '#3B82F6' });
-        setShowCreateForm(false);
-        toast.success('Tag created successfully!');
-      },
-      onError: error => {
-        toast.error(error.response?.data?.message || 'Failed to create tag');
-      },
-    }
-  );
-
-  const updateTagMutation = useMutation(
-    ({ tagId, tagData }) => api.put(`api/admin/tags/${tagId}`, tagData),
-    {
-      onSuccess: () => {
-        queryClient.invalidateQueries(['tags-management']);
-        setEditingTag(null);
-        setFormData({ name: '', description: '', color: '#3B82F6' });
-        toast.success('Tag updated successfully!');
-      },
-      onError: error => {
-        toast.error(error.response?.data?.message || 'Failed to update tag');
-      },
-    }
-  );
-
-  const deleteTagMutation = useMutation(
-    tagId => api.delete(`api/admin/tags/${tagId}`),
-    {
-      onSuccess: () => {
-        queryClient.invalidateQueries(['tags-management']);
-        toast.success('Tag deleted successfully!');
-      },
-      onError: error => {
-        toast.error(error.response?.data?.message || 'Failed to delete tag');
-      },
-    }
-  );
-
-  // Check if user is admin
-  if (!user || user.role !== 'admin') {
-    return (
-      <div className="max-w-4xl mx-auto text-center py-12">
-        <FiTag className="w-16 h-16 text-red-500 mx-auto mb-4" />
-        <h1 className="text-2xl font-bold text-navy-900 dark:text-white mb-4">
-          Access Denied
-        </h1>
-        <p className="text-navy-600 dark:text-navy-400">
-          You don't have permission to access tag management.
-        </p>
-      </div>
-    );
-  }
-
-  if (isLoading) {
-    return (
-      <div className="max-w-6xl mx-auto">
-        <div className="animate-pulse space-y-6">
-          <div className="h-8 bg-navy-200 dark:bg-navy-700 rounded w-1/4"></div>
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-            {[...Array(6)].map((_, i) => (
-              <div
-                key={i}
-                className="h-32 bg-navy-200 dark:bg-navy-700 rounded"
-              ></div>
-            ))}
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  if (error) {
-    return (
-      <div className="max-w-4xl mx-auto text-center py-12">
-        <p className="text-red-600 dark:text-red-400 mb-4">
-          Error loading tags: {error.message}
-        </p>
-      </div>
-    );
-  }
-
-  const { tags, stats } = tagsData;
-
-  const filteredTags = tags.filter(
-    tag =>
-      tag.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
-      tag.description.toLowerCase().includes(searchTerm.toLowerCase())
-  );
-
-  const handleSubmit = e => {
-    e.preventDefault();
-    if (!formData.name.trim()) {
-      toast.error('Tag name is required');
-      return;
-    }
-
-    if (editingTag) {
-      updateTagMutation.mutate({ tagId: editingTag._id, tagData: formData });
-    } else {
-      createTagMutation.mutate(formData);
-    }
-  };
-
-  const handleEdit = tag => {
-    setEditingTag(tag);
-    setFormData({
-      name: tag.name,
-      description: tag.description,
-      color: tag.color,
-    });
-    setShowCreateForm(true);
-  };
-
-  const handleDelete = tagId => {
-    if (
-      window.confirm(
-        'Are you sure you want to delete this tag? This action cannot be undone.'
-      )
-    ) {
-      deleteTagMutation.mutate(tagId);
-    }
-  };
-
-  const handleCancel = () => {
-    setShowCreateForm(false);
-    setEditingTag(null);
-    setFormData({ name: '', description: '', color: '#3B82F6' });
-  };
-
-  const colorOptions = [
-    '#3B82F6',
-    '#10B981',
-    '#F59E0B',
-    '#EF4444',
-    '#8B5CF6',
-    '#06B6D4',
-    '#84CC16',
-    '#F97316',
-    '#EC4899',
-    '#6B7280',
-  ];
-
-  return (
-    <div className="max-w-6xl mx-auto">
-      {/* Header */}
-      <div className="mb-8">
-        <h1 className="text-3xl font-bold text-navy-900 dark:text-white mb-2">
-          Tag Management
-        </h1>
-        <p className="text-navy-600 dark:text-navy-400">
-          Create, edit, and manage tags for organizing questions
-        </p>
-      </div>
-
-      {/* Stats */}
-      <motion.div
-        initial={{ opacity: 0, y: 20 }}
-        animate={{ opacity: 1, y: 0 }}
-        className="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8"
-      >
-        <div className="card p-6">
-          <div className="flex items-center">
-            <div className="p-3 bg-blue-100 dark:bg-blue-900 rounded-lg">
-              <FiTag className="w-6 h-6 text-blue-600 dark:text-blue-400" />
-            </div>
-            <div className="ml-4">
-              <p className="text-sm font-medium text-navy-600 dark:text-navy-400">
-                Total Tags
-              </p>
-              <p className="text-2xl font-bold text-navy-900 dark:text-white">
-                {stats.totalTags}
-              </p>
-            </div>
-          </div>
-        </div>
-
-        <div className="card p-6">
-          <div className="flex items-center">
-            <div className="p-3 bg-green-100 dark:bg-green-900 rounded-lg">
-              <FiMessageSquare className="w-6 h-6 text-green-600 dark:text-green-400" />
-            </div>
-            <div className="ml-4">
-              <p className="text-sm font-medium text-navy-600 dark:text-navy-400">
-                Tagged Questions
-              </p>
-              <p className="text-2xl font-bold text-navy-900 dark:text-white">
-                {stats.taggedQuestions}
-              </p>
-            </div>
-          </div>
-        </div>
-
-        <div className="card p-6">
-          <div className="flex items-center">
-            <div className="p-3 bg-yellow-100 dark:bg-yellow-900 rounded-lg">
-              <FiTrendingUp className="w-6 h-6 text-yellow-600 dark:text-yellow-400" />
-            </div>
-            <div className="ml-4">
-              <p className="text-sm font-medium text-navy-600 dark:text-navy-400">
-                Most Popular
-              </p>
-              <p className="text-2xl font-bold text-navy-900 dark:text-white">
-                {stats.mostPopularTag}
-              </p>
-            </div>
-          </div>
-        </div>
-
-        <div className="card p-6">
-          <div className="flex items-center">
-            <div className="p-3 bg-purple-100 dark:bg-purple-900 rounded-lg">
-              <FiUsers className="w-6 h-6 text-purple-600 dark:text-purple-400" />
-            </div>
-            <div className="ml-4">
-              <p className="text-sm font-medium text-navy-600 dark:text-navy-400">
-                Active Tags
-              </p>
-              <p className="text-2xl font-bold text-navy-900 dark:text-white">
-                {stats.activeTags}
-              </p>
-            </div>
-          </div>
-        </div>
-      </motion.div>
-
-      {/* Search and Create */}
-      <motion.div
-        initial={{ opacity: 0, y: 20 }}
-        animate={{ opacity: 1, y: 0 }}
-        transition={{ delay: 0.1 }}
-        className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-6"
-      >
-        <div className="relative flex-1 max-w-md">
-          <FiSearch className="absolute left-3 top-1/2 transform -translate-y-1/2 text-navy-400 w-4 h-4" />
-          <input
-            type="text"
-            placeholder="Search tags..."
-            value={searchTerm}
-            onChange={e => setSearchTerm(e.target.value)}
-            className="w-full pl-10 pr-4 py-2 border border-navy-300 dark:border-navy-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent bg-white dark:bg-navy-800 text-navy-900 dark:text-white"
-          />
-        </div>
-
-        <button onClick={() => setShowCreateForm(true)} className="btn-primary">
-          <FiPlus className="w-4 h-4 mr-2" />
-          Create Tag
-        </button>
-      </motion.div>
-
-      {/* Create/Edit Form */}
-      {showCreateForm && (
-        <motion.div
-          initial={{ opacity: 0, height: 0 }}
-          animate={{ opacity: 1, height: 'auto' }}
-          exit={{ opacity: 0, height: 0 }}
-          className="card p-6 mb-6"
-        >
-          <h3 className="text-lg font-semibold text-navy-900 dark:text-white mb-4">
-            {editingTag ? 'Edit Tag' : 'Create New Tag'}
-          </h3>
-
-          <form onSubmit={handleSubmit} className="space-y-4">
-            <div>
-              <label className="block text-sm font-medium text-navy-700 dark:text-navy-300 mb-2">
-                Tag Name *
-              </label>
-              <input
-                type="text"
-                value={formData.name}
-                onChange={e =>
-                  setFormData({ ...formData, name: e.target.value })
-                }
-                placeholder="Enter tag name..."
-                className="w-full px-3 py-2 border border-navy-300 dark:border-navy-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent bg-white dark:bg-navy-800 text-navy-900 dark:text-white"
-                required
-              />
-            </div>
-
-            <div>
-              <label className="block text-sm font-medium text-navy-700 dark:text-navy-300 mb-2">
-                Description
-              </label>
-              <textarea
-                value={formData.description}
-                onChange={e =>
-                  setFormData({ ...formData, description: e.target.value })
-                }
-                placeholder="Enter tag description..."
-                rows="3"
-                className="w-full px-3 py-2 border border-navy-300 dark:border-navy-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent bg-white dark:bg-navy-800 text-navy-900 dark:text-white resize-none"
-              />
-            </div>
-
-            <div>
-              <label className="block text-sm font-medium text-navy-700 dark:text-navy-300 mb-2">
-                Color
-              </label>
-              <div className="flex items-center space-x-3">
-                <input
-                  type="color"
-                  value={formData.color}
-                  onChange={e =>
-                    setFormData({ ...formData, color: e.target.value })
-                  }
-                  className="w-12 h-10 border border-navy-300 dark:border-navy-600 rounded-lg cursor-pointer"
-                />
-                <div className="flex space-x-2">
-                  {colorOptions.map(color => (
-                    <button
-                      key={color}
-                      type="button"
-                      onClick={() => setFormData({ ...formData, color })}
-                      className="w-8 h-8 rounded-full border-2 border-navy-300 dark:border-navy-600 hover:border-navy-400 dark:hover:border-navy-500 transition-colors"
-                      style={{ backgroundColor: color }}
-                    />
-                  ))}
-                </div>
-              </div>
-            </div>
-
-            <div className="flex justify-end space-x-3">
-              <button
-                type="button"
-                onClick={handleCancel}
-                className="btn-outline"
-              >
-                Cancel
-              </button>
-              <button
-                type="submit"
-                disabled={
-                  createTagMutation.isLoading || updateTagMutation.isLoading
-                }
-                className="btn-primary disabled:opacity-50"
-              >
-                {createTagMutation.isLoading || updateTagMutation.isLoading
-                  ? 'Saving...'
-                  : editingTag
-                    ? 'Update Tag'
-                    : 'Create Tag'}
-              </button>
-            </div>
-          </form>
-        </motion.div>
-      )}
-
-      {/* Tags Grid */}
-      <motion.div
-        initial={{ opacity: 0, y: 20 }}
-        animate={{ opacity: 1, y: 0 }}
-        transition={{ delay: 0.2 }}
-        className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"
-      >
-        {filteredTags.map((tag, index) => (
-          <motion.div
-            key={tag._id}
-            initial={{ opacity: 0, y: 20 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ delay: index * 0.1 }}
-            className="card p-6 hover:shadow-lg transition-shadow"
-          >
-            <div className="flex items-start justify-between mb-4">
-              <div className="flex items-center space-x-3">
-                <div
-                  className="w-4 h-4 rounded-full"
-                  style={{ backgroundColor: tag.color }}
-                />
-                <h3 className="text-lg font-semibold text-navy-900 dark:text-white">
-                  {tag.name}
-                </h3>
-              </div>
-
-              <div className="flex items-center space-x-2">
-                <button
-                  onClick={() => handleEdit(tag)}
-                  className="p-1 text-navy-400 hover:text-primary-600 dark:hover:text-primary-400"
-                >
-                  <FiEdit className="w-4 h-4" />
-                </button>
-                <button
-                  onClick={() => handleDelete(tag._id)}
-                  className="p-1 text-navy-400 hover:text-red-600 dark:hover:text-red-400"
-                >
-                  <FiTrash2 className="w-4 h-4" />
-                </button>
-              </div>
-            </div>
-
-            {tag.description && (
-              <p className="text-navy-600 dark:text-navy-400 mb-4">
-                {tag.description}
-              </p>
-            )}
-
-            <div className="flex items-center justify-between text-sm text-navy-500 dark:text-navy-400">
-              <div className="flex items-center space-x-4">
-                <div className="flex items-center space-x-1">
-                  <FiMessageSquare className="w-4 h-4" />
-                  <span>{tag.questionCount} questions</span>
-                </div>
-                <div className="flex items-center space-x-1">
-                  <FiEye className="w-4 h-4" />
-                  <span>{tag.viewCount} views</span>
-                </div>
-              </div>
-
-              <div className="flex items-center space-x-1">
-                <FiTrendingUp className="w-4 h-4" />
-                <span>{tag.trendingScore}</span>
-              </div>
-            </div>
-
-            <div className="mt-4 pt-4 border-t border-navy-200 dark:border-navy-700">
-              <div className="flex items-center justify-between text-xs text-navy-500 dark:text-navy-400">
-                <span>
-                  Created {new Date(tag.createdAt).toLocaleDateString()}
-                </span>
-                <span
-                  className={`px-2 py-1 rounded-full ${
-                    tag.isActive
-                      ? 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200'
-                      : 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200'
-                  }`}
-                >
-                  {tag.isActive ? 'Active' : 'Inactive'}
-                </span>
-              </div>
-            </div>
-          </motion.div>
-        ))}
-      </motion.div>
-
-      {filteredTags.length === 0 && (
-        <div className="text-center py-12">
-          <FiTag className="w-16 h-16 text-navy-300 dark:text-navy-600 mx-auto mb-4" />
-          <h3 className="text-lg font-semibold text-navy-900 dark:text-white mb-2">
-            {searchTerm ? 'No tags found' : 'No tags yet'}
-          </h3>
-          <p className="text-navy-600 dark:text-navy-400">
-            {searchTerm
-              ? 'Try adjusting your search terms'
-              : 'Create your first tag to get started'}
-          </p>
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default TagManagementPage;
+    .catch(err => console.error(err))
\ No newline at end of file
diff --git a/client/src/pages/UserProfilePage.jsx b/client/src/pages/UserProfilePage.jsx
index 9ef1de5..28fb0c1 100644
--- a/client/src/pages/UserProfilePage.jsx
+++ b/client/src/pages/UserProfilePage.jsx
@@ -37,444 +37,4 @@ const UserProfilePage = () => {
   } = useQuery(
     ['user-profile', username],
     () => api.get(`api/users/profile/${username}`).then(res => res.data),
-    {
-      staleTime: 300000, // 5 minutes
-      refetchOnWindowFocus: false,
-    }
-  );
-
-  if (isLoading) {
-    return (
-      <div className="max-w-6xl mx-auto">
-        <div className="animate-pulse space-y-6">
-          <div className="h-32 bg-navy-200 dark:bg-navy-700 rounded"></div>
-          <div className="h-8 bg-navy-200 dark:bg-navy-700 rounded w-1/3"></div>
-          <div className="space-y-2">
-            <div className="h-4 bg-navy-200 dark:bg-navy-700 rounded"></div>
-            <div className="h-4 bg-navy-200 dark:bg-navy-700 rounded w-5/6"></div>
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  if (error) {
-    return (
-      <div className="max-w-6xl mx-auto text-center py-12">
-        <p className="text-red-600 dark:text-red-400 mb-4">
-          Error loading profile: {error.message}
-        </p>
-        <button onClick={() => navigate('/questions')} className="btn-primary">
-          Back to Questions
-        </button>
-      </div>
-    );
-  }
-
-  const { user, questions, answers, stats } = profileData;
-  const isOwnProfile = currentUser && currentUser._id === user._id;
-
-  const tabs = [
-    {
-      id: 'questions',
-      label: 'Questions',
-      count: questions.length,
-      icon: FiMessageSquare,
-    },
-    { id: 'answers', label: 'Answers', count: answers.length, icon: FiCheck },
-    {
-      id: 'activity',
-      label: 'Activity',
-      count: stats.totalActivity,
-      icon: FiTrendingUp,
-    },
-  ];
-
-  const formatDate = date => {
-    return new Date(date).toLocaleDateString('en-US', {
-      year: 'numeric',
-      month: 'long',
-      day: 'numeric',
-    });
-  };
-
-  const getReputationColor = reputation => {
-    if (reputation >= 1000) return 'text-yellow-600 dark:text-yellow-400';
-    if (reputation >= 500) return 'text-green-600 dark:text-green-400';
-    if (reputation >= 100) return 'text-blue-600 dark:text-blue-400';
-    return 'text-navy-600 dark:text-navy-400';
-  };
-
-  const getReputationBadge = reputation => {
-    if (reputation >= 1000)
-      return {
-        text: 'Expert',
-        color:
-          'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200',
-      };
-    if (reputation >= 500)
-      return {
-        text: 'Contributor',
-        color:
-          'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200',
-      };
-    if (reputation >= 100)
-      return {
-        text: 'Member',
-        color: 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200',
-      };
-    return {
-      text: 'New User',
-      color: 'bg-navy-100 text-navy-800 dark:bg-navy-900 dark:text-navy-200',
-    };
-  };
-
-  return (
-    <div className="max-w-6xl mx-auto">
-      {/* Back button */}
-      <button
-        onClick={() => navigate('/questions')}
-        className="flex items-center text-navy-600 dark:text-navy-300 hover:text-navy-900 dark:hover:text-white mb-6 transition-colors"
-      >
-        <FiArrowLeft className="w-4 h-4 mr-2" />
-        Back to Questions
-      </button>
-
-      {/* Profile header */}
-      <motion.div
-        initial={{ opacity: 0, y: 20 }}
-        animate={{ opacity: 1, y: 0 }}
-        className="card p-8 mb-8"
-      >
-        <div className="flex flex-col lg:flex-row lg:items-start lg:space-x-8">
-          {/* Avatar and basic info */}
-          <div className="flex flex-col items-center lg:items-start mb-6 lg:mb-0">
-            <div className="w-32 h-32 bg-gradient-to-br from-primary-400 to-primary-600 rounded-full flex items-center justify-center mb-4">
-              <FiUser className="w-16 h-16 text-white" />
-            </div>
-
-            <div className="text-center lg:text-left">
-              <h1 className="text-2xl font-bold text-navy-900 dark:text-white mb-2">
-                {user.username}
-              </h1>
-              <div
-                className={`inline-block px-3 py-1 rounded-full text-sm font-medium ${getReputationBadge(user.reputation).color}`}
-              >
-                {getReputationBadge(user.reputation).text}
-              </div>
-            </div>
-          </div>
-
-          {/* Stats and details */}
-          <div className="flex-1">
-            <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
-              <div className="text-center">
-                <div
-                  className={`text-3xl font-bold ${getReputationColor(user.reputation)}`}
-                >
-                  {user.reputation}
-                </div>
-                <div className="text-sm text-navy-600 dark:text-navy-400">
-                  Reputation
-                </div>
-              </div>
-
-              <div className="text-center">
-                <div className="text-3xl font-bold text-navy-900 dark:text-white">
-                  {questions.length}
-                </div>
-                <div className="text-sm text-navy-600 dark:text-navy-400">
-                  Questions
-                </div>
-              </div>
-
-              <div className="text-center">
-                <div className="text-3xl font-bold text-navy-900 dark:text-white">
-                  {answers.length}
-                </div>
-                <div className="text-sm text-navy-600 dark:text-navy-400">
-                  Answers
-                </div>
-              </div>
-            </div>
-
-            {/* User details */}
-            <div className="space-y-3">
-              {user.email && (
-                <div className="flex items-center text-navy-600 dark:text-navy-400">
-                  <FiMail className="w-4 h-4 mr-2" />
-                  <span>{user.email}</span>
-                </div>
-              )}
-
-              <div className="flex items-center text-navy-600 dark:text-navy-400">
-                <FiCalendar className="w-4 h-4 mr-2" />
-                <span>Joined {formatDate(user.createdAt)}</span>
-              </div>
-
-              {user.bio && (
-                <div className="text-navy-700 dark:text-navy-300">
-                  {user.bio}
-                </div>
-              )}
-            </div>
-
-            {/* Action buttons */}
-            {isOwnProfile && (
-              <div className="flex space-x-3 mt-6">
-                <button
-                  onClick={() => navigate('/settings')}
-                  className="btn-outline"
-                >
-                  <FiSettings className="w-4 h-4 mr-2" />
-                  Edit Profile
-                </button>
-              </div>
-            )}
-          </div>
-        </div>
-      </motion.div>
-
-      {/* Stats overview */}
-      <motion.div
-        initial={{ opacity: 0, y: 20 }}
-        animate={{ opacity: 1, y: 0 }}
-        transition={{ delay: 0.1 }}
-        className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-8"
-      >
-        <div className="card p-4 text-center">
-          <div className="text-2xl font-bold text-primary-600 dark:text-primary-400">
-            {stats.totalViews}
-          </div>
-          <div className="text-sm text-navy-600 dark:text-navy-400">
-            Total Views
-          </div>
-        </div>
-
-        <div className="card p-4 text-center">
-          <div className="text-2xl font-bold text-green-600 dark:text-green-400">
-            {stats.acceptedAnswers}
-          </div>
-          <div className="text-sm text-navy-600 dark:text-navy-400">
-            Accepted Answers
-          </div>
-        </div>
-
-        <div className="card p-4 text-center">
-          <div className="text-2xl font-bold text-yellow-600 dark:text-yellow-400">
-            {stats.totalVotes}
-          </div>
-          <div className="text-sm text-navy-600 dark:text-navy-400">
-            Total Votes
-          </div>
-        </div>
-
-        <div className="card p-4 text-center">
-          <div className="text-2xl font-bold text-blue-600 dark:text-blue-400">
-            {stats.questionsThisMonth}
-          </div>
-          <div className="text-sm text-navy-600 dark:text-navy-400">
-            This Month
-          </div>
-        </div>
-      </motion.div>
-
-      {/* Tabs */}
-      <motion.div
-        initial={{ opacity: 0, y: 20 }}
-        animate={{ opacity: 1, y: 0 }}
-        transition={{ delay: 0.2 }}
-        className="mb-6"
-      >
-        <div className="border-b border-navy-200 dark:border-navy-700">
-          <nav className="flex space-x-8">
-            {tabs.map(tab => {
-              const Icon = tab.icon;
-              return (
-                <button
-                  key={tab.id}
-                  onClick={() => setActiveTab(tab.id)}
-                  className={`flex items-center space-x-2 py-4 px-1 border-b-2 font-medium text-sm transition-colors ${
-                    activeTab === tab.id
-                      ? 'border-primary-500 text-primary-600 dark:text-primary-400'
-                      : 'border-transparent text-navy-500 dark:text-navy-400 hover:text-navy-700 dark:hover:text-navy-300'
-                  }`}
-                >
-                  <Icon className="w-4 h-4" />
-                  <span>{tab.label}</span>
-                  <span className="bg-navy-100 dark:bg-navy-700 text-navy-600 dark:text-navy-400 px-2 py-1 rounded-full text-xs">
-                    {tab.count}
-                  </span>
-                </button>
-              );
-            })}
-          </nav>
-        </div>
-      </motion.div>
-
-      {/* Tab content */}
-      <motion.div
-        initial={{ opacity: 0 }}
-        animate={{ opacity: 1 }}
-        transition={{ delay: 0.3 }}
-      >
-        {activeTab === 'questions' && (
-          <div className="space-y-6">
-            {questions.length > 0 ? (
-              questions.map(question => (
-                <QuestionCard key={question._id} question={question} />
-              ))
-            ) : (
-              <div className="text-center py-12">
-                <FiMessageSquare className="w-16 h-16 text-navy-300 dark:text-navy-600 mx-auto mb-4" />
-                <h3 className="text-lg font-semibold text-navy-900 dark:text-white mb-2">
-                  No questions yet
-                </h3>
-                <p className="text-navy-600 dark:text-navy-400">
-                  {isOwnProfile
-                    ? "You haven't asked any questions yet. Start contributing to the community!"
-                    : "This user hasn't asked any questions yet."}
-                </p>
-                {isOwnProfile && (
-                  <button
-                    onClick={() => navigate('/ask')}
-                    className="btn-primary mt-4"
-                  >
-                    Ask Your First Question
-                  </button>
-                )}
-              </div>
-            )}
-          </div>
-        )}
-
-        {activeTab === 'answers' && (
-          <div className="space-y-6">
-            {answers.length > 0 ? (
-              answers.map(answer => (
-                <div key={answer._id} className="card p-6">
-                  <div className="flex items-start space-x-4">
-                    <div className="flex flex-col items-center space-y-2">
-                      <button className="p-2 text-navy-400 hover:text-primary-600 dark:hover:text-primary-400">
-                        <FiThumbsUp className="w-5 h-5" />
-                      </button>
-                      <span className="text-lg font-semibold text-navy-900 dark:text-white">
-                        {answer.votes.upvotes.length -
-                          answer.votes.downvotes.length}
-                      </span>
-                      <button className="p-2 text-navy-400 hover:text-red-600 dark:hover:text-red-400">
-                        <FiThumbsUp className="w-5 h-5 transform rotate-180" />
-                      </button>
-                    </div>
-
-                    <div className="flex-1">
-                      <div className="flex items-center justify-between mb-3">
-                        <h3 className="text-lg font-semibold text-navy-900 dark:text-white">
-                          <a
-                            href={`/questions/${answer.question._id}`}
-                            className="hover:text-primary-600 dark:hover:text-primary-400"
-                          >
-                            {answer.question.title}
-                          </a>
-                        </h3>
-                        {answer.isAccepted && (
-                          <div className="flex items-center text-green-600 dark:text-green-400">
-                            <FiCheck className="w-4 h-4 mr-1" />
-                            <span className="text-sm font-medium">
-                              Accepted
-                            </span>
-                          </div>
-                        )}
-                      </div>
-
-                      <div
-                        className="prose prose-navy dark:prose-invert max-w-none mb-4"
-                        dangerouslySetInnerHTML={{
-                          __html: answer.content.substring(0, 200) + '...',
-                        }}
-                      />
-
-                      <div className="flex items-center justify-between text-sm text-navy-500 dark:text-navy-400">
-                        <div className="flex items-center space-x-4">
-                          <div className="flex items-center space-x-1">
-                            <FiEye className="w-4 h-4" />
-                            <span>{answer.question.viewCount} views</span>
-                          </div>
-                          <div className="flex items-center space-x-1">
-                            <FiTag className="w-4 h-4" />
-                            <span>{answer.question.tags.length} tags</span>
-                          </div>
-                        </div>
-                        <span>{formatDate(answer.createdAt)}</span>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              ))
-            ) : (
-              <div className="text-center py-12">
-                <FiCheck className="w-16 h-16 text-navy-300 dark:text-navy-600 mx-auto mb-4" />
-                <h3 className="text-lg font-semibold text-navy-900 dark:text-white mb-2">
-                  No answers yet
-                </h3>
-                <p className="text-navy-600 dark:text-navy-400">
-                  {isOwnProfile
-                    ? "You haven't answered any questions yet. Start helping others!"
-                    : "This user hasn't answered any questions yet."}
-                </p>
-                {isOwnProfile && (
-                  <button
-                    onClick={() => navigate('/questions')}
-                    className="btn-primary mt-4"
-                  >
-                    Browse Questions
-                  </button>
-                )}
-              </div>
-            )}
-          </div>
-        )}
-
-        {activeTab === 'activity' && (
-          <div className="space-y-6">
-            <div className="card p-6">
-              <h3 className="text-lg font-semibold text-navy-900 dark:text-white mb-4">
-                Recent Activity
-              </h3>
-              <div className="space-y-4">
-                {stats.recentActivity?.map((activity, index) => (
-                  <div
-                    key={index}
-                    className="flex items-center space-x-3 p-3 bg-navy-50 dark:bg-navy-800 rounded-lg"
-                  >
-                    <div className="w-8 h-8 bg-primary-100 dark:bg-primary-900 rounded-full flex items-center justify-center">
-                      {activity.type === 'question' && (
-                        <FiMessageSquare className="w-4 h-4 text-primary-600 dark:text-primary-400" />
-                      )}
-                      {activity.type === 'answer' && (
-                        <FiCheck className="w-4 h-4 text-green-600 dark:text-green-400" />
-                      )}
-                      {activity.type === 'vote' && (
-                        <FiThumbsUp className="w-4 h-4 text-yellow-600 dark:text-yellow-400" />
-                      )}
-                    </div>
-                    <div className="flex-1">
-                      <p className="text-sm text-navy-700 dark:text-navy-300">
-                        {activity.description}
-                      </p>
-                      <p className="text-xs text-navy-500 dark:text-navy-400">
-                        {formatDate(activity.date)}
-                      </p>
-                    </div>
-                  </div>
-                ))}
-              </div>
-            </div>
-          </div>
-        )}
-      </motion.div>
-    </div>
-  );
-};
-
-export default UserProfilePage;
+    .catch(err => console.error(err))
\ No newline at end of file