Fix: Unable to View Users and Events Fix

packages/frontend/src/features/auth/components/auth-form.tsx

@@ -74,7 +74,7 @@ export function AuthForm() {
   };
 
   return (
-    <div className="w-full max-w-md space-y-6 bg-white dark:bg-slate-900">
+    <div className="w-full max-w-md space-y-6 bg-white">
       <AlertDialogUI />
       <Icons.logo className="mx-auto h-[84px] w-[84px]" />
       <div className="space-y-2 text-center">

packages/frontend/src/features/auth/components/forgot-password-form.tsx

@@ -16,9 +16,7 @@ import { Icons } from '@/features/auth/components/icons';
 import { useAuth } from '@/features/auth/hooks/use-auth';
 import {
   forgotPasswordSchema,
-  resetPasswordWithTokenSchema,
-  ForgotPasswordFormValues,
-  ResetPasswordWithTokenFormValues
+  resetPasswordWithTokenSchema
 } from '@/features/auth/validations/auth.schema';
 import Link from 'next/link';
 import { IconInput } from '@/shared/components/ui/icon-input';
@@ -59,7 +57,7 @@ const ForgotPasswordFormContent = () => {
   // Add token validation AFTER the hook
   if (!isForgotPasswordPage && !token) {
     return (
-      <div className="w-full max-w-md space-y-6 bg-white dark:bg-slate-900">
+      <div className="w-full max-w-md space-y-6 bg-white">
         <div className="space-y-2 text-center">
           <h2>Invalid Reset Link</h2>
           <p className="text-sm text-muted-foreground">
@@ -91,7 +89,7 @@ const ForgotPasswordFormContent = () => {
   };
 
   return (
-    <div className="w-full max-w-md space-y-6 bg-white dark:bg-slate-900">
+    <div className="w-full max-w-md space-y-6 bg-white">
       <AlertDialogUI />
       <Icons.logo className="mx-auto h-[84px] w-[84px]" />
       <div className="space-y-2 text-center">

packages/frontend/src/features/events/components/event-details.tsx

@@ -3,7 +3,7 @@
 import { Button } from '@/shared/components/ui/button';
 import { Card } from '@/shared/components/ui/card';
 import { Badge } from '@/shared/components/ui/badge';
-import { Avatar } from '@/shared/components/ui/avatar';
+import { Avatar, AvatarFallback } from '@/shared/components/ui/avatar';
 import {
   Calendar,
   MapPin,
@@ -16,7 +16,6 @@ import {
   DollarSign,
   UserIcon
 } from 'lucide-react';
-import Image from 'next/image';
 import { useRouter, usePathname } from 'next/navigation';
 import { EventSubscriptionStatus, EventWithHost } from '../types';
 import { EventsTypes } from '../lib/validation';
@@ -385,16 +384,24 @@ export const EventDetails = () => {
       <Card className="p-6">
         <h2 className="mb-4 text-xl font-semibold">Hosted by</h2>
         <div className="flex gap-6">
-          <Avatar className="h-[100px] w-[100px] bg-warning-500">
-            <ImagePreview
-              imagePath={host_image}
-              fallbackImage={'/profile/profile.png'}
-              alt={host_name}
-              width={100}
-              height={100}
-              className="h-full w-full object-cover"
-              priority
-            />
+          <Avatar className="h-16 w-16 bg-warning-500">
+            {host_image && (
+              <ImagePreview
+                imagePath={host_image}
+                alt={host_name}
+                fill={true}
+                priority={true}
+                className="rounded-full"
+              />
+            )}
+            {!host_image && (
+              <AvatarFallback className="bg-warning-500">
+                {host_name
+                  ?.split(' ')
+                  .map((n) => n[0])
+                  .join('') || ''}
+              </AvatarFallback>
+            )}
           </Avatar>
           <div className="flex flex-col gap-4">
             <h6 className="font-medium">{host_name}</h6>

packages/frontend/src/features/events/components/event-form.tsx

@@ -186,7 +186,14 @@ const EventForm = () => {
     setActiveStep(activeStep - 1);
   };
 
-  const onSubmit = async (data: EventFormValues) => {
+  const handleStepNavigation = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (activeStep === 1) {
+      handleNext();
+    }
+  };
+
+  const handleFormSubmit = async (data: EventFormValues) => {
     try {
       const formData = new FormData();
 
@@ -300,6 +307,8 @@ const EventForm = () => {
     }
   };
 
+  const handleFinalSubmit = methods.handleSubmit(handleFormSubmit);
+
   // Show loading state while fetching event data
   if (isLoadingEvent) {
     return (
@@ -349,7 +358,12 @@ const EventForm = () => {
       </CardHeader>
       <CardContent className="flex flex-col justify-center gap-4">
         <FormProvider {...methods}>
-          <form onSubmit={methods.handleSubmit(onSubmit)} className="space-y-6">
+          <form
+            onSubmit={
+              activeStep === 1 ? handleStepNavigation : handleFinalSubmit
+            }
+            className="space-y-6"
+          >
             {activeStep === 1 ? (
               <BaseForm
                 onFileSelect={handleFileSelect}
@@ -372,7 +386,7 @@ const EventForm = () => {
               )}
               <IconButton
                 className="w-full"
-                type={activeStep === 2 ? 'submit' : 'button'}
+                type="submit"
                 disabled={
                   methods.formState.isSubmitting ||
                   !checkStepValidity(
@@ -383,7 +397,6 @@ const EventForm = () => {
                 }
                 rightIcon="arrowRight"
                 label={activeStep === 1 ? 'Next' : eventButtonText}
-                onClick={activeStep === 1 ? handleNext : undefined}
               />
             </div>
           </form>

packages/frontend/src/features/home/components/home.tsx

@@ -221,7 +221,7 @@ export const Home = () => {
     });
 
   // Show Select All if admin or all visible threads are owned by user
-  const showSelectAll = isAdmin || allOwnedByUser;
+  const showSelectAll = isAdmin || allSelectedOwnedByUser;
 
   // Show bulk bar if admin or (thread creator and all selected are theirs)
   const showBulkBar = someSelected && (isAdmin || allSelectedOwnedByUser);

packages/frontend/src/features/home/components/main-card/comments-thread-card.tsx

@@ -357,34 +357,35 @@ export const CommentsThreadCard = ({
         </BaseThreadCard.Actions>
 
         {/* Comment Selection Bulk Bar */}
-        {threadComments.length > 0 && (
-          <div className="mb-4 flex items-center justify-between gap-4">
-            <div className="flex items-center gap-2">
-              <Checkbox
-                checked={allSelected}
-                onCheckedChange={handleSelectAll}
-                aria-label="Select all comments"
-              />
-              <span className="text-sm font-medium">Select All</span>
-            </div>
-            {someSelected && (
-              <div className="right-0 ml-8 flex items-center gap-2 rounded-lg bg-white p-2 shadow">
-                <span className="font-semibold">
-                  {selectedCommentIds.length} selected
-                </span>
-                <Button
-                  variant="outline"
-                  className="h-10 min-w-24 text-sm hover:text-primary-500"
-                  onClick={handleBulkDelete}
-                  disabled={isDeleting}
-                >
-                  <Trash2Icon className="h-4 w-4" />
-                  Delete
-                </Button>
+        {threadComments.length > 0 &&
+          (isAdmin || threadComments.some(isCommentOwner)) && (
+            <div className="mb-4 flex items-center justify-between gap-4">
+              <div className="flex items-center gap-2">
+                <Checkbox
+                  checked={allSelected}
+                  onCheckedChange={handleSelectAll}
+                  aria-label="Select all comments"
+                />
+                <span className="text-sm font-medium">Select All</span>
               </div>
-            )}
-          </div>
-        )}
+              {someSelected && (
+                <div className="right-0 ml-8 flex items-center gap-2 rounded-lg bg-white p-2 shadow">
+                  <span className="font-semibold">
+                    {selectedCommentIds.length} selected
+                  </span>
+                  <Button
+                    variant="outline"
+                    className="h-10 min-w-24 text-sm hover:text-primary-500"
+                    onClick={handleBulkDelete}
+                    disabled={isDeleting}
+                  >
+                    <Trash2Icon className="h-4 w-4" />
+                    Delete
+                  </Button>
+                </div>
+              )}
+            </div>
+          )}
 
         {/* Delete Confirmation Modal */}
         <Dialog open={showDeleteModal} onOpenChange={setShowDeleteModal}>

packages/frontend/src/features/user-profile/api/user-api.ts

@@ -11,7 +11,7 @@ export const userApi = {
   getUserPublicData: (id: number) =>
     apiMethods.get<UserProfile>(`/users/public-data/${id}`),
 
-  getUserById: (id: number) => apiMethods.get<UserProfile>(`/users/${id}`),
+  getUserById: (id: number) => apiMethods.get<UserProfile>(`/users/id/${id}`),
 
   getUserByEmail: (email: string) =>
     apiMethods.get<UserProfile>(`/users/email/${email}`),

packages/frontend/src/features/user-profile/components/view-profile.tsx

@@ -106,9 +106,9 @@ export const ViewProfile = ({ slug }: ViewProfileProps) => {
     name: `${displayedUser?.firstName} ${displayedUser?.lastName}`,
     avatar: displayedUser?.pictureUploadLink,
     stats: {
-      menteesTutored: 24,
-      groupSessions: 15,
-      personalSessions: 42
+      menteesTutored: displayedUser?.menteesTutored || 0,
+      groupSessions: displayedUser?.groupSessions || 0,
+      personalSessions: displayedUser?.personalSessions || 0
     },
     bio: {
       label: 'Bio',

packages/frontend/src/features/user-profile/types/index.ts

@@ -39,6 +39,9 @@ export interface UserProfile {
   emailVerified?: boolean;
   provider?: string;
   lastLogin?: string;
+  menteesTutored?: number;
+  groupSessions?: number;
+  personalSessions?: number;
 }
 
 export interface UserResponse<T> {

packages/frontend/src/shared/components/navigation/main-nav/main-nav.tsx

@@ -1,4 +1,3 @@
-import Image from 'next/image';
 import { IconInput } from '@/shared/components/ui/icon-input';
 import BreadcrumbNav from './breadcrumb-nav';
 import {
@@ -13,6 +12,8 @@ import { useAuth } from '@/features/auth/hooks/use-auth';
 import { useRouter } from 'next/navigation';
 import { SharedIcons } from '@/shared/components/icons';
 import { useUserStore } from '@/features/user-profile/store/index';
+import { Avatar, AvatarFallback } from '@/shared/components/ui/avatar';
+import { ImagePreview } from '@/shared/components/image/image-preview';
 
 export const getImageUrl = (path: string | undefined) => {
   if (!path || path.includes('undefined')) return '/profile/profile.png';
@@ -50,14 +51,29 @@ export const MainNav = () => {
           <DropdownMenu>
             <DropdownMenuTrigger asChild>
               <button className="focus:outline-none">
-                <Image
-                  src={getImageUrl(user?.pictureUploadLink)}
-                  alt="user profile"
-                  width={48}
-                  height={48}
-                  className="aspect-square cursor-pointer rounded-full bg-warning-500 object-cover transition-opacity hover:opacity-80"
-                  priority
-                />
+                <Avatar className="h-10 w-10 bg-warning-500">
+                  {user?.pictureUploadLink && (
+                    <ImagePreview
+                      imagePath={user?.pictureUploadLink}
+                      alt={user?.firstName}
+                      fill={true}
+                      priority={true}
+                      className="rounded-full"
+                    />
+                  )}
+                  {!user?.pictureUploadLink && (
+                    <AvatarFallback className="bg-warning-500">
+                      {user?.firstName
+                        ?.split(' ')
+                        .map((n) => n[0])
+                        .join('') || ''}
+                      {user?.lastName
+                        ?.split(' ')
+                        .map((n) => n[0])
+                        .join('') || ''}
+                    </AvatarFallback>
+                  )}
+                </Avatar>
               </button>
             </DropdownMenuTrigger>
             <DropdownMenuContent className="w-56" align="end">