Add image cropping to avatar upload and show avatars platform-wide

- Add react-easy-crop for circular crop + zoom UI on avatar upload
- Create server-side getUserAvatarUrl utility for generating pre-signed URLs
- Update all nav components (admin, jury, mentor, observer) to show user avatars
- Add avatar URLs to user list, mentor list, and project detail API responses
- Replace initials-only avatars with UserAvatar component across admin pages

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

package-lock.json

@@ -62,6 +62,7 @@
         "papaparse": "^5.4.1",
         "react": "^19.0.0",
         "react-dom": "^19.0.0",
+        "react-easy-crop": "^5.5.6",
         "react-hook-form": "^7.54.2",
         "react-leaflet": "^5.0.0",
         "react-phone-number-input": "^3.4.14",
@@ -10637,6 +10638,12 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/normalize-wheel": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/normalize-wheel/-/normalize-wheel-1.0.1.tgz",
+      "integrity": "sha512-1OnlAPZ3zgrk8B91HyRj+eVv+kS5u+Z0SCsak6Xil/kmgEia50ga7zfkumayonZrImffAxPU/5WcyGhzetHNPA==",
+      "license": "BSD-3-Clause"
+    },
     "node_modules/nypm": {
       "version": "0.6.4",
       "resolved": "https://registry.npmjs.org/nypm/-/nypm-0.6.4.tgz",
@@ -11643,6 +11650,20 @@
         "react": "^19.2.4"
       }
     },
+    "node_modules/react-easy-crop": {
+      "version": "5.5.6",
+      "resolved": "https://registry.npmjs.org/react-easy-crop/-/react-easy-crop-5.5.6.tgz",
+      "integrity": "sha512-Jw3/ozs8uXj3NpL511Suc4AHY+mLRO23rUgipXvNYKqezcFSYHxe4QXibBymkOoY6oOtLVMPO2HNPRHYvMPyTw==",
+      "license": "MIT",
+      "dependencies": {
+        "normalize-wheel": "^1.0.1",
+        "tslib": "^2.0.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.4.0",
+        "react-dom": ">=16.4.0"
+      }
+    },
     "node_modules/react-hook-form": {
       "version": "7.71.1",
       "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.71.1.tgz",

package.json

@@ -75,6 +75,7 @@
     "papaparse": "^5.4.1",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "react-easy-crop": "^5.5.6",
     "react-hook-form": "^7.54.2",
     "react-leaflet": "^5.0.0",
     "react-phone-number-input": "^3.4.14",

src/app/(admin)/admin/mentors/page.tsx

@@ -13,7 +13,8 @@ import {
 import { Badge } from '@/components/ui/badge'
 import { Button } from '@/components/ui/button'
 import { Skeleton } from '@/components/ui/skeleton'
-import { Avatar, AvatarFallback } from '@/components/ui/avatar'
+import { UserAvatar } from '@/components/shared/user-avatar'
+import { getUserAvatarUrl } from '@/server/utils/avatar-url'
 import {
   Table,
   TableBody,
@@ -24,7 +25,7 @@ import {
 } from '@/components/ui/table'
 import type { Route } from 'next'
 import { Plus, GraduationCap, Eye } from 'lucide-react'
-import { formatDate, getInitials } from '@/lib/utils'
+import { formatDate } from '@/lib/utils'
 
 async function MentorsContent() {
   const mentors = await prisma.user.findMany({
@@ -41,7 +42,15 @@ async function MentorsContent() {
     orderBy: [{ status: 'asc' }, { name: 'asc' }],
   })
 
-  if (mentors.length === 0) {
+  // Generate avatar URLs
+  const mentorsWithAvatars = await Promise.all(
+    mentors.map(async (mentor) => ({
+      ...mentor,
+      avatarUrl: await getUserAvatarUrl(mentor.profileImageKey, mentor.profileImageProvider),
+    }))
+  )
+
+  if (mentorsWithAvatars.length === 0) {
     return (
       <Card>
         <CardContent className="flex flex-col items-center justify-center py-12 text-center">
@@ -83,15 +92,11 @@ async function MentorsContent() {
             </TableRow>
           </TableHeader>
           <TableBody>
-            {mentors.map((mentor) => (
+            {mentorsWithAvatars.map((mentor) => (
               <TableRow key={mentor.id}>
                 <TableCell>
                   <div className="flex items-center gap-3">
-                    <Avatar className="h-8 w-8">
-                      <AvatarFallback className="text-xs">
-                        {getInitials(mentor.name || mentor.email || 'M')}
-                      </AvatarFallback>
-                    </Avatar>
+                    <UserAvatar user={mentor} avatarUrl={mentor.avatarUrl} size="sm" />
                     <div>
                       <p className="font-medium">{mentor.name || 'Unnamed'}</p>
                       <p className="text-sm text-muted-foreground">
@@ -150,16 +155,12 @@ async function MentorsContent() {
 
       {/* Mobile card view */}
       <div className="space-y-4 md:hidden">
-        {mentors.map((mentor) => (
+        {mentorsWithAvatars.map((mentor) => (
           <Card key={mentor.id}>
             <CardHeader className="pb-3">
               <div className="flex items-start justify-between">
                 <div className="flex items-center gap-3">
-                  <Avatar className="h-10 w-10">
-                    <AvatarFallback>
-                      {getInitials(mentor.name || mentor.email || 'M')}
-                    </AvatarFallback>
-                  </Avatar>
+                  <UserAvatar user={mentor} avatarUrl={mentor.avatarUrl} size="md" />
                   <div>
                     <CardTitle className="text-base">
                       {mentor.name || 'Unnamed'}

src/app/(admin)/admin/projects/[id]/page.tsx

@@ -26,7 +26,7 @@ import {
 import { FileViewer } from '@/components/shared/file-viewer'
 import { FileUpload } from '@/components/shared/file-upload'
 import { ProjectLogoWithUrl } from '@/components/shared/project-logo-with-url'
-import { Avatar, AvatarFallback } from '@/components/ui/avatar'
+import { UserAvatar } from '@/components/shared/user-avatar'
 import {
   ArrowLeft,
   Edit,
@@ -47,7 +47,7 @@ import {
   Crown,
   UserPlus,
 } from 'lucide-react'
-import { formatDate, formatDateOnly, getInitials } from '@/lib/utils'
+import { formatDate, formatDateOnly } from '@/lib/utils'
 
 interface PageProps {
   params: Promise<{ id: string }>
@@ -360,17 +360,15 @@ function ProjectDetailContent({ projectId }: { projectId: string }) {
           </CardHeader>
           <CardContent>
             <div className="grid gap-3 sm:grid-cols-2">
-              {project.teamMembers.map((member: { id: string; role: string; title: string | null; user: { id: string; name: string | null; email: string } }) => (
+              {project.teamMembers.map((member: { id: string; role: string; title: string | null; user: { id: string; name: string | null; email: string; avatarUrl?: string | null } }) => (
                 <div key={member.id} className="flex items-center gap-3 p-3 rounded-lg border">
-                  <div className="flex h-10 w-10 items-center justify-center rounded-full bg-muted">
                   {member.role === 'LEAD' ? (
+                    <div className="flex h-10 w-10 items-center justify-center rounded-full bg-muted">
                       <Crown className="h-5 w-5 text-yellow-500" />
-                    ) : (
-                      <span className="text-sm font-medium">
-                        {getInitials(member.user.name || member.user.email)}
-                      </span>
-                    )}
                     </div>
+                  ) : (
+                    <UserAvatar user={member.user} avatarUrl={member.user.avatarUrl} size="md" />
+                  )}
                   <div className="flex-1 min-w-0">
                     <div className="flex items-center gap-2">
                       <p className="font-medium text-sm truncate">
@@ -417,11 +415,11 @@ function ProjectDetailContent({ projectId }: { projectId: string }) {
             {project.mentorAssignment ? (
               <div className="flex items-center justify-between p-3 rounded-lg border">
                 <div className="flex items-center gap-3">
-                  <Avatar className="h-10 w-10">
-                    <AvatarFallback className="text-sm">
-                      {getInitials(project.mentorAssignment.mentor.name || project.mentorAssignment.mentor.email)}
-                    </AvatarFallback>
-                  </Avatar>
+                  <UserAvatar
+                    user={project.mentorAssignment.mentor}
+                    avatarUrl={project.mentorAssignment.mentor.avatarUrl}
+                    size="md"
+                  />
                   <div>
                     <p className="font-medium">
                       {project.mentorAssignment.mentor.name || 'Unnamed'}
@@ -519,11 +517,11 @@ function ProjectDetailContent({ projectId }: { projectId: string }) {
                   <TableRow key={assignment.id}>
                     <TableCell>
                       <div className="flex items-center gap-2">
-                        <Avatar className="h-8 w-8">
-                          <AvatarFallback className="text-xs">
-                            {getInitials(assignment.user.name || assignment.user.email)}
-                          </AvatarFallback>
-                        </Avatar>
+                        <UserAvatar
+                          user={assignment.user}
+                          avatarUrl={assignment.user.avatarUrl}
+                          size="sm"
+                        />
                         <div>
                           <p className="font-medium text-sm">
                             {assignment.user.name || 'Unnamed'}

src/app/(admin)/admin/users/page.tsx

@@ -13,7 +13,8 @@ import {
 import { Badge } from '@/components/ui/badge'
 import { Button } from '@/components/ui/button'
 import { Skeleton } from '@/components/ui/skeleton'
-import { Avatar, AvatarFallback } from '@/components/ui/avatar'
+import { UserAvatar } from '@/components/shared/user-avatar'
+import { getUserAvatarUrl } from '@/server/utils/avatar-url'
 import {
   Table,
   TableBody,
@@ -23,7 +24,7 @@ import {
   TableRow,
 } from '@/components/ui/table'
 import { Plus, Users } from 'lucide-react'
-import { formatDate, getInitials } from '@/lib/utils'
+import { formatDate } from '@/lib/utils'
 import { UserActions, UserMobileActions } from '@/components/admin/user-actions'
 
 async function UsersContent() {
@@ -48,7 +49,15 @@ async function UsersContent() {
     orderBy: [{ role: 'asc' }, { name: 'asc' }],
   })
 
-  if (users.length === 0) {
+  // Generate avatar URLs
+  const usersWithAvatars = await Promise.all(
+    users.map(async (user) => ({
+      ...user,
+      avatarUrl: await getUserAvatarUrl(user.profileImageKey, user.profileImageProvider),
+    }))
+  )
+
+  if (usersWithAvatars.length === 0) {
     return (
       <Card>
         <CardContent className="flex flex-col items-center justify-center py-12 text-center">
@@ -97,15 +106,11 @@ async function UsersContent() {
             </TableRow>
           </TableHeader>
           <TableBody>
-            {users.map((user) => (
+            {usersWithAvatars.map((user) => (
               <TableRow key={user.id}>
                 <TableCell>
                   <div className="flex items-center gap-3">
-                    <Avatar className="h-8 w-8">
-                      <AvatarFallback className="text-xs">
-                        {getInitials(user.name || user.email || 'U')}
-                      </AvatarFallback>
-                    </Avatar>
+                    <UserAvatar user={user} avatarUrl={user.avatarUrl} size="sm" />
                     <div>
                       <p className="font-medium">{user.name || 'Unnamed'}</p>
                       <p className="text-sm text-muted-foreground">
@@ -172,16 +177,12 @@ async function UsersContent() {
 
       {/* Mobile card view */}
       <div className="space-y-4 md:hidden">
-        {users.map((user) => (
+        {usersWithAvatars.map((user) => (
           <Card key={user.id}>
             <CardHeader className="pb-3">
               <div className="flex items-start justify-between">
                 <div className="flex items-center gap-3">
-                  <Avatar className="h-10 w-10">
-                    <AvatarFallback>
-                      {getInitials(user.name || user.email || 'U')}
-                    </AvatarFallback>
-                  </Avatar>
+                  <UserAvatar user={user} avatarUrl={user.avatarUrl} size="md" />
                   <div>
                     <CardTitle className="text-base">
                       {user.name || 'Unnamed'}

src/components/layouts/admin-sidebar.tsx

@@ -37,6 +37,8 @@ import {
 import { getInitials } from '@/lib/utils'
 import { Logo } from '@/components/shared/logo'
 import { EditionSelector } from '@/components/shared/edition-selector'
+import { UserAvatar } from '@/components/shared/user-avatar'
+import { trpc } from '@/lib/trpc/client'
 
 interface AdminSidebarProps {
   user: {
@@ -125,6 +127,7 @@ const roleLabels: Record<string, string> = {
 export function AdminSidebar({ user }: AdminSidebarProps) {
   const pathname = usePathname()
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false)
+  const { data: avatarUrl } = trpc.avatar.getUrl.useQuery()
 
   const isSuperAdmin = user.role === 'SUPER_ADMIN'
   const roleLabel = roleLabels[user.role || ''] || 'User'
@@ -242,10 +245,8 @@ export function AdminSidebar({ user }: AdminSidebarProps) {
             <DropdownMenuTrigger asChild>
               <button className="group flex w-full items-center gap-3 rounded-xl p-2.5 text-left transition-all duration-200 hover:bg-slate-100 dark:hover:bg-slate-800 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">
                 {/* Avatar */}
-                <div className="relative flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-brand-blue text-white shadow-xs transition-transform duration-200 group-hover:scale-[1.02]">
-                  <span className="text-sm font-semibold">
-                    {getInitials(user.name || user.email || 'U')}
-                  </span>
+                <div className="relative shrink-0">
+                  <UserAvatar user={user} avatarUrl={avatarUrl} size="md" />
                   {/* Online indicator */}
                   <div className="absolute -bottom-0.5 -right-0.5 h-3 w-3 rounded-full border-2 border-white bg-emerald-500" />
                 </div>

src/components/layouts/jury-nav.tsx

@@ -6,7 +6,8 @@ import { usePathname } from 'next/navigation'
 import { signOut } from 'next-auth/react'
 import { cn } from '@/lib/utils'
 import { Button } from '@/components/ui/button'
-import { Avatar, AvatarFallback } from '@/components/ui/avatar'
+import { UserAvatar } from '@/components/shared/user-avatar'
+import { trpc } from '@/lib/trpc/client'
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -16,7 +17,6 @@ import {
 } from '@/components/ui/dropdown-menu'
 import type { Route } from 'next'
 import { BookOpen, ClipboardList, Home, LogOut, Menu, Settings, User, X } from 'lucide-react'
-import { getInitials } from '@/lib/utils'
 import { Logo } from '@/components/shared/logo'
 
 interface JuryNavProps {
@@ -47,6 +47,7 @@ const navigation = [
 export function JuryNav({ user }: JuryNavProps) {
   const pathname = usePathname()
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false)
+  const { data: avatarUrl } = trpc.avatar.getUrl.useQuery()
 
   return (
     <>
@@ -90,11 +91,7 @@ export function JuryNav({ user }: JuryNavProps) {
                     className="gap-2 hidden sm:flex"
                     size="sm"
                   >
-                    <Avatar className="h-7 w-7">
-                      <AvatarFallback className="text-xs">
-                        {getInitials(user.name || user.email || 'U')}
-                      </AvatarFallback>
-                    </Avatar>
+                    <UserAvatar user={user} avatarUrl={avatarUrl} size="xs" />
                     <span className="max-w-[120px] truncate">
                       {user.name || user.email}
                     </span>

src/components/layouts/mentor-nav.tsx

@@ -7,7 +7,8 @@ import { usePathname } from 'next/navigation'
 import { signOut } from 'next-auth/react'
 import { cn } from '@/lib/utils'
 import { Button } from '@/components/ui/button'
-import { Avatar, AvatarFallback } from '@/components/ui/avatar'
+import { UserAvatar } from '@/components/shared/user-avatar'
+import { trpc } from '@/lib/trpc/client'
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -16,7 +17,6 @@ import {
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu'
 import { BookOpen, Home, LogOut, Menu, Settings, User, Users, X } from 'lucide-react'
-import { getInitials } from '@/lib/utils'
 import { Logo } from '@/components/shared/logo'
 
 interface MentorNavProps {
@@ -47,6 +47,7 @@ const navigation: { name: string; href: Route; icon: typeof Home }[] = [
 export function MentorNav({ user }: MentorNavProps) {
   const pathname = usePathname()
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false)
+  const { data: avatarUrl } = trpc.avatar.getUrl.useQuery()
 
   return (
     <>
@@ -90,11 +91,7 @@ export function MentorNav({ user }: MentorNavProps) {
                     className="gap-2 hidden sm:flex"
                     size="sm"
                   >
-                    <Avatar className="h-7 w-7">
-                      <AvatarFallback className="text-xs">
-                        {getInitials(user.name || user.email || 'U')}
-                      </AvatarFallback>
-                    </Avatar>
+                    <UserAvatar user={user} avatarUrl={avatarUrl} size="xs" />
                     <span className="max-w-[120px] truncate">
                       {user.name || user.email}
                     </span>

src/components/layouts/observer-nav.tsx

@@ -6,7 +6,8 @@ import { usePathname } from 'next/navigation'
 import { signOut } from 'next-auth/react'
 import { cn } from '@/lib/utils'
 import { Button } from '@/components/ui/button'
-import { Avatar, AvatarFallback } from '@/components/ui/avatar'
+import { UserAvatar } from '@/components/shared/user-avatar'
+import { trpc } from '@/lib/trpc/client'
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -16,7 +17,6 @@ import {
 } from '@/components/ui/dropdown-menu'
 import type { Route } from 'next'
 import { Home, BarChart3, Menu, X, LogOut, Eye, Settings } from 'lucide-react'
-import { getInitials } from '@/lib/utils'
 import { Logo } from '@/components/shared/logo'
 
 interface ObserverNavProps {
@@ -42,6 +42,7 @@ const navigation = [
 export function ObserverNav({ user }: ObserverNavProps) {
   const pathname = usePathname()
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false)
+  const { data: avatarUrl } = trpc.avatar.getUrl.useQuery()
 
   return (
     <header className="sticky top-0 z-40 border-b bg-card">
@@ -78,11 +79,7 @@ export function ObserverNav({ user }: ObserverNavProps) {
           <DropdownMenu>
             <DropdownMenuTrigger asChild>
               <Button variant="ghost" className="gap-2">
-                <Avatar className="h-8 w-8">
-                  <AvatarFallback className="text-xs">
-                    {getInitials(user.name || user.email || 'O')}
-                  </AvatarFallback>
-                </Avatar>
+                <UserAvatar user={user} avatarUrl={avatarUrl} size="xs" />
                 <span className="hidden sm:inline text-sm truncate max-w-[120px]">
                   {user.name || user.email}
                 </span>

src/components/shared/avatar-upload.tsx

@@ -1,6 +1,8 @@
 'use client'
 
 import { useState, useRef, useCallback } from 'react'
+import Cropper from 'react-easy-crop'
+import type { Area } from 'react-easy-crop'
 import {
   Dialog,
   DialogContent,
@@ -13,8 +15,9 @@ import {
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
+import { Slider } from '@/components/ui/slider'
 import { UserAvatar } from './user-avatar'
-import { Upload, Loader2, Trash2 } from 'lucide-react'
+import { Upload, Loader2, Trash2, ZoomIn } from 'lucide-react'
 import { trpc } from '@/lib/trpc/client'
 import { toast } from 'sonner'
 
@@ -32,6 +35,48 @@ type AvatarUploadProps = {
 const MAX_SIZE_MB = 5
 const ALLOWED_TYPES = ['image/jpeg', 'image/png', 'image/gif', 'image/webp']
 
+/**
+ * Crop an image client-side using canvas and return a Blob.
+ */
+async function getCroppedImg(imageSrc: string, pixelCrop: Area): Promise<Blob> {
+  const image = new Image()
+  image.crossOrigin = 'anonymous'
+
+  await new Promise<void>((resolve, reject) => {
+    image.onload = () => resolve()
+    image.onerror = reject
+    image.src = imageSrc
+  })
+
+  const canvas = document.createElement('canvas')
+  canvas.width = pixelCrop.width
+  canvas.height = pixelCrop.height
+  const ctx = canvas.getContext('2d')!
+
+  ctx.drawImage(
+    image,
+    pixelCrop.x,
+    pixelCrop.y,
+    pixelCrop.width,
+    pixelCrop.height,
+    0,
+    0,
+    pixelCrop.width,
+    pixelCrop.height
+  )
+
+  return new Promise<Blob>((resolve, reject) => {
+    canvas.toBlob(
+      (blob) => {
+        if (blob) resolve(blob)
+        else reject(new Error('Canvas toBlob failed'))
+      },
+      'image/jpeg',
+      0.9
+    )
+  })
+}
+
 export function AvatarUpload({
   user,
   currentAvatarUrl,
@@ -39,8 +84,10 @@ export function AvatarUpload({
   children,
 }: AvatarUploadProps) {
   const [open, setOpen] = useState(false)
-  const [preview, setPreview] = useState<string | null>(null)
-  const [selectedFile, setSelectedFile] = useState<File | null>(null)
+  const [imageSrc, setImageSrc] = useState<string | null>(null)
+  const [crop, setCrop] = useState({ x: 0, y: 0 })
+  const [zoom, setZoom] = useState(1)
+  const [croppedAreaPixels, setCroppedAreaPixels] = useState<Area | null>(null)
   const [isUploading, setIsUploading] = useState(false)
   const [isDeleting, setIsDeleting] = useState(false)
   const fileInputRef = useRef<HTMLInputElement>(null)
@@ -50,49 +97,53 @@ export function AvatarUpload({
   const confirmUpload = trpc.avatar.confirmUpload.useMutation()
   const deleteAvatar = trpc.avatar.delete.useMutation()
 
+  const onCropComplete = useCallback((_croppedArea: Area, croppedPixels: Area) => {
+    setCroppedAreaPixels(croppedPixels)
+  }, [])
+
   const handleFileSelect = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
     const file = e.target.files?.[0]
     if (!file) return
 
-    // Validate type
     if (!ALLOWED_TYPES.includes(file.type)) {
       toast.error('Invalid file type. Please upload a JPEG, PNG, GIF, or WebP image.')
       return
     }
 
-    // Validate size
     if (file.size > MAX_SIZE_MB * 1024 * 1024) {
       toast.error(`File too large. Maximum size is ${MAX_SIZE_MB}MB.`)
       return
     }
 
-    setSelectedFile(file)
-
-    // Create preview
     const reader = new FileReader()
-    reader.onload = (e) => {
-      setPreview(e.target?.result as string)
+    reader.onload = (ev) => {
+      setImageSrc(ev.target?.result as string)
+      setCrop({ x: 0, y: 0 })
+      setZoom(1)
     }
     reader.readAsDataURL(file)
   }, [])
 
   const handleUpload = async () => {
-    if (!selectedFile) return
+    if (!imageSrc || !croppedAreaPixels) return
 
     setIsUploading(true)
     try {
-      // Get pre-signed upload URL (includes provider type for tracking)
+      // Crop the image client-side
+      const croppedBlob = await getCroppedImg(imageSrc, croppedAreaPixels)
+
+      // Get pre-signed upload URL
       const { uploadUrl, key, providerType } = await getUploadUrl.mutateAsync({
-        fileName: selectedFile.name,
-        contentType: selectedFile.type,
+        fileName: 'avatar.jpg',
+        contentType: 'image/jpeg',
       })
 
-      // Upload file directly to storage
+      // Upload cropped blob directly to storage
       const uploadResponse = await fetch(uploadUrl, {
         method: 'PUT',
-        body: selectedFile,
+        body: croppedBlob,
         headers: {
-          'Content-Type': selectedFile.type,
+          'Content-Type': 'image/jpeg',
         },
       })
 
@@ -100,7 +151,7 @@ export function AvatarUpload({
         throw new Error('Failed to upload file')
       }
 
-      // Confirm upload with the provider type that was used
+      // Confirm upload
       await confirmUpload.mutateAsync({ key, providerType })
 
       // Invalidate avatar query
@@ -108,8 +159,7 @@ export function AvatarUpload({
 
       toast.success('Avatar updated successfully')
       setOpen(false)
-      setPreview(null)
-      setSelectedFile(null)
+      resetState()
       onUploadComplete?.()
     } catch (error) {
       console.error('Upload error:', error)
@@ -135,9 +185,16 @@ export function AvatarUpload({
     }
   }
 
+  const resetState = () => {
+    setImageSrc(null)
+    setCrop({ x: 0, y: 0 })
+    setZoom(1)
+    setCroppedAreaPixels(null)
+    if (fileInputRef.current) fileInputRef.current.value = ''
+  }
+
   const handleCancel = () => {
-    setPreview(null)
-    setSelectedFile(null)
+    resetState()
     setOpen(false)
   }
 
@@ -154,17 +211,63 @@ export function AvatarUpload({
         <DialogHeader>
           <DialogTitle>Update Profile Picture</DialogTitle>
           <DialogDescription>
-            Upload a new profile picture. Allowed formats: JPEG, PNG, GIF, WebP.
-            Max size: {MAX_SIZE_MB}MB.
+            {imageSrc
+              ? 'Drag to reposition and use the slider to zoom.'
+              : 'Upload a new profile picture. Allowed formats: JPEG, PNG, GIF, WebP.'}
           </DialogDescription>
         </DialogHeader>
 
         <div className="space-y-4 py-4">
-          {/* Preview */}
+          {imageSrc ? (
+            <>
+              {/* Cropper */}
+              <div className="relative w-full h-64 bg-muted rounded-lg overflow-hidden">
+                <Cropper
+                  image={imageSrc}
+                  crop={crop}
+                  zoom={zoom}
+                  aspect={1}
+                  cropShape="round"
+                  showGrid={false}
+                  onCropChange={setCrop}
+                  onCropComplete={onCropComplete}
+                  onZoomChange={setZoom}
+                />
+              </div>
+
+              {/* Zoom slider */}
+              <div className="flex items-center gap-3 px-1">
+                <ZoomIn className="h-4 w-4 text-muted-foreground shrink-0" />
+                <Slider
+                  value={[zoom]}
+                  min={1}
+                  max={3}
+                  step={0.1}
+                  onValueChange={([val]) => setZoom(val)}
+                  className="flex-1"
+                />
+              </div>
+
+              {/* Change image button */}
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={() => {
+                  resetState()
+                  fileInputRef.current?.click()
+                }}
+                className="w-full"
+              >
+                Choose a different image
+              </Button>
+            </>
+          ) : (
+            <>
+              {/* Current avatar preview */}
               <div className="flex justify-center">
                 <UserAvatar
                   user={user}
-              avatarUrl={preview || currentAvatarUrl}
+                  avatarUrl={currentAvatarUrl}
                   size="xl"
                 />
               </div>
@@ -181,10 +284,12 @@ export function AvatarUpload({
                   className="cursor-pointer"
                 />
               </div>
+            </>
+          )}
         </div>
 
         <DialogFooter className="flex-col gap-2 sm:flex-row">
-          {currentAvatarUrl && !preview && (
+          {currentAvatarUrl && !imageSrc && (
             <Button
               variant="destructive"
               onClick={handleDelete}
@@ -204,9 +309,10 @@ export function AvatarUpload({
             <Button variant="outline" onClick={handleCancel} className="flex-1">
               Cancel
             </Button>
+            {imageSrc && (
               <Button
                 onClick={handleUpload}
-              disabled={!selectedFile || isUploading}
+                disabled={!croppedAreaPixels || isUploading}
                 className="flex-1"
               >
                 {isUploading ? (
@@ -216,6 +322,7 @@ export function AvatarUpload({
                 )}
                 Upload
               </Button>
+            )}
           </div>
         </DialogFooter>
       </DialogContent>

src/server/routers/assignment.ts

@@ -1,6 +1,7 @@
 import { z } from 'zod'
 import { TRPCError } from '@trpc/server'
 import { router, protectedProcedure, adminProcedure } from '../trpc'
+import { getUserAvatarUrl } from '../utils/avatar-url'
 import {
   generateAIAssignments,
   generateFallbackAssignments,
@@ -31,14 +32,25 @@ export const assignmentRouter = router({
   listByProject: adminProcedure
     .input(z.object({ projectId: z.string() }))
     .query(async ({ ctx, input }) => {
-      return ctx.prisma.assignment.findMany({
+      const assignments = await ctx.prisma.assignment.findMany({
         where: { projectId: input.projectId },
         include: {
-          user: { select: { id: true, name: true, email: true, expertiseTags: true } },
+          user: { select: { id: true, name: true, email: true, expertiseTags: true, profileImageKey: true, profileImageProvider: true } },
           evaluation: { select: { status: true, submittedAt: true, globalScore: true, binaryDecision: true } },
         },
         orderBy: { createdAt: 'desc' },
       })
+
+      // Attach avatar URLs
+      return Promise.all(
+        assignments.map(async (a) => ({
+          ...a,
+          user: {
+            ...a.user,
+            avatarUrl: await getUserAvatarUrl(a.user.profileImageKey, a.user.profileImageProvider),
+          },
+        }))
+      )
     }),
 
   /**

src/server/routers/project.ts

@@ -2,6 +2,7 @@ import { z } from 'zod'
 import { TRPCError } from '@trpc/server'
 import { Prisma } from '@prisma/client'
 import { router, protectedProcedure, adminProcedure } from '../trpc'
+import { getUserAvatarUrl } from '../utils/avatar-url'
 
 export const projectRouter = router({
   /**
@@ -91,7 +92,7 @@ export const projectRouter = router({
           teamMembers: {
             include: {
               user: {
-                select: { id: true, name: true, email: true },
+                select: { id: true, name: true, email: true, profileImageKey: true, profileImageProvider: true },
               },
             },
             orderBy: { joinedAt: 'asc' },
@@ -99,7 +100,7 @@ export const projectRouter = router({
           mentorAssignment: {
             include: {
               mentor: {
-                select: { id: true, name: true, email: true, expertiseTags: true },
+                select: { id: true, name: true, email: true, expertiseTags: true, profileImageKey: true, profileImageProvider: true },
               },
             },
           },
@@ -123,7 +124,35 @@ export const projectRouter = router({
         }
       }
 
-      return project
+      // Attach avatar URLs to team members and mentor
+      const teamMembersWithAvatars = await Promise.all(
+        project.teamMembers.map(async (member) => ({
+          ...member,
+          user: {
+            ...member.user,
+            avatarUrl: await getUserAvatarUrl(member.user.profileImageKey, member.user.profileImageProvider),
+          },
+        }))
+      )
+
+      const mentorWithAvatar = project.mentorAssignment
+        ? {
+            ...project.mentorAssignment,
+            mentor: {
+              ...project.mentorAssignment.mentor,
+              avatarUrl: await getUserAvatarUrl(
+                project.mentorAssignment.mentor.profileImageKey,
+                project.mentorAssignment.mentor.profileImageProvider
+              ),
+            },
+          }
+        : null
+
+      return {
+        ...project,
+        teamMembers: teamMembersWithAvatars,
+        mentorAssignment: mentorWithAvatar,
+      }
     }),
 
   /**

src/server/routers/user.ts

@@ -5,6 +5,7 @@ import type { Prisma } from '@prisma/client'
 import { router, protectedProcedure, adminProcedure, superAdminProcedure, publicProcedure } from '../trpc'
 import { sendInvitationEmail, sendMagicLinkEmail } from '@/lib/email'
 import { hashPassword, validatePassword } from '@/lib/password'
+import { attachAvatarUrls } from '@/server/utils/avatar-url'
 
 const INVITE_TOKEN_EXPIRY_MS = 7 * 24 * 60 * 60 * 1000 // 7 days
 
@@ -204,6 +205,8 @@ export const userRouter = router({
             status: true,
             expertiseTags: true,
             maxAssignments: true,
+            profileImageKey: true,
+            profileImageProvider: true,
             createdAt: true,
             lastLoginAt: true,
             _count: {
@@ -214,8 +217,10 @@ export const userRouter = router({
         ctx.prisma.user.count({ where }),
       ])
 
+      const usersWithAvatars = await attachAvatarUrls(users)
+
       return {
-        users,
+        users: usersWithAvatars,
         total,
         page,
         perPage,
@@ -534,6 +539,8 @@ export const userRouter = router({
           name: true,
           expertiseTags: true,
           maxAssignments: true,
+          profileImageKey: true,
+          profileImageProvider: true,
           _count: {
             select: {
               assignments: input.roundId
@@ -545,7 +552,7 @@ export const userRouter = router({
         orderBy: { name: 'asc' },
       })
 
-      return users.map((u) => ({
+      const mapped = users.map((u) => ({
         ...u,
         currentAssignments: u._count.assignments,
         availableSlots:
@@ -553,6 +560,8 @@ export const userRouter = router({
             ? Math.max(0, u.maxAssignments - u._count.assignments)
             : null,
       }))
+
+      return attachAvatarUrls(mapped)
     }),
 
   /**

src/server/utils/avatar-url.ts

@@ -0,0 +1,35 @@
+import { createStorageProvider, type StorageProviderType } from '@/lib/storage'
+
+/**
+ * Generate a pre-signed download URL for a user's avatar.
+ * Returns null if the user has no avatar.
+ */
+export async function getUserAvatarUrl(
+  profileImageKey: string | null | undefined,
+  profileImageProvider: string | null | undefined
+): Promise<string | null> {
+  if (!profileImageKey) return null
+
+  try {
+    const providerType = (profileImageProvider as StorageProviderType) || 's3'
+    const provider = createStorageProvider(providerType)
+    return await provider.getDownloadUrl(profileImageKey)
+  } catch {
+    return null
+  }
+}
+
+/**
+ * Batch-generate avatar URLs for multiple users.
+ * Adds `avatarUrl` field to each user object.
+ */
+export async function attachAvatarUrls<
+  T extends { profileImageKey?: string | null; profileImageProvider?: string | null }
+>(users: T[]): Promise<(T & { avatarUrl: string | null })[]> {
+  return Promise.all(
+    users.map(async (user) => ({
+      ...user,
+      avatarUrl: await getUserAvatarUrl(user.profileImageKey, user.profileImageProvider),
+    }))
+  )
+}