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>
2026-02-02 13:19:28 +01:00 · 2026-02-02 13:19:28 +01:00 · 8fda8deded
parent f9f88d68ab
commit 8fda8deded
14 changed files with 346 additions and 140 deletions
--- a/package-lock.json
+++ b/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",
--- a/package.json
+++ b/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",
--- a/src/app/(admin)/admin/mentors/page.tsx
+++ b/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'}
--- a/src/app/(admin)/admin/projects/[id]/page.tsx
+++ b/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' ? (
+                  {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>
+                    </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'}
--- a/src/app/(admin)/admin/users/page.tsx
+++ b/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'}
--- a/src/components/layouts/admin-sidebar.tsx
+++ b/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>
--- a/src/components/layouts/jury-nav.tsx
+++ b/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>
--- a/src/components/layouts/mentor-nav.tsx
+++ b/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>
--- a/src/components/layouts/observer-nav.tsx
+++ b/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>
--- a/src/components/shared/avatar-upload.tsx
+++ b/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,37 +211,85 @@ 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 */}
-          <div className="flex justify-center">
-            <UserAvatar
-              user={user}
-              avatarUrl={preview || currentAvatarUrl}
-              size="xl"
-            />
-          </div>
+          {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>

-          {/* File input */}
-          <div className="space-y-2">
-            <Label htmlFor="avatar">Select image</Label>
-            <Input
-              ref={fileInputRef}
-              id="avatar"
-              type="file"
-              accept={ALLOWED_TYPES.join(',')}
-              onChange={handleFileSelect}
-              className="cursor-pointer"
-            />
-          </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={currentAvatarUrl}
+                  size="xl"
+                />
+              </div>
+
+              {/* File input */}
+              <div className="space-y-2">
+                <Label htmlFor="avatar">Select image</Label>
+                <Input
+                  ref={fileInputRef}
+                  id="avatar"
+                  type="file"
+                  accept={ALLOWED_TYPES.join(',')}
+                  onChange={handleFileSelect}
+                  className="cursor-pointer"
+                />
+              </div>
+            </>
+          )}
        </div>

        <DialogFooter className="flex-col gap-2 sm:flex-row">
-          {currentAvatarUrl && !preview && (
+          {currentAvatarUrl && !imageSrc && (
            <Button
              variant="destructive"
              onClick={handleDelete}
@ -204,18 +309,20 @@ export function AvatarUpload({
            <Button variant="outline" onClick={handleCancel} className="flex-1">
              Cancel
            </Button>
-            <Button
-              onClick={handleUpload}
-              disabled={!selectedFile || isUploading}
-              className="flex-1"
-            >
-              {isUploading ? (
-                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-              ) : (
-                <Upload className="mr-2 h-4 w-4" />
-              )}
-              Upload
-            </Button>
+            {imageSrc && (
+              <Button
+                onClick={handleUpload}
+                disabled={!croppedAreaPixels || isUploading}
+                className="flex-1"
+              >
+                {isUploading ? (
+                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                ) : (
+                  <Upload className="mr-2 h-4 w-4" />
+                )}
+                Upload
+              </Button>
+            )}
          </div>
        </DialogFooter>
      </DialogContent>
--- a/src/server/routers/assignment.ts
+++ b/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),
+          },
+        }))
+      )
    }),

  /**
--- a/src/server/routers/project.ts
+++ b/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,
+      }
    }),

  /**
--- a/src/server/routers/user.ts
+++ b/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)
    }),

  /**
--- a/src/server/utils/avatar-url.ts
+++ b/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),
+    }))
+  )
+}