Comprehensive platform audit: security, UX, performance, and visual polish

Phase 1: Security - status transition validation, Zod tightening, DB indexes, transactions Phase 2: Admin UX - search/filter for awards, learning, partners pages Phase 3: Dashboard - Recent Activity feed, Pending Actions card, quick actions Phase 4: Jury - assignments progress/urgency, autosave indicator, divergence highlighting Phase 5: Portals - observer charts, mentor search, login/onboarding polish Phase 6: Messages preview dialog, CsvExportDialog with column selection Phase 7: Performance - query optimizations, loading skeletons, useDebounce hook Phase 8: Visual - AnimatedCard, hover effects, StatusBadge, empty state CTAs Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-08 22:05:01 +01:00
parent e0e4cb2a32
commit e73a676412
33 changed files with 3193 additions and 977 deletions
--- a/src/components/admin/members-content.tsx
+++ b/src/components/admin/members-content.tsx
@@ -28,7 +28,7 @@ import { UserAvatar } from '@/components/shared/user-avatar'
 import { UserActions, UserMobileActions } from '@/components/admin/user-actions'
 import { Pagination } from '@/components/shared/pagination'
 import { Plus, Users, Search } from 'lucide-react'
-import { formatDate } from '@/lib/utils'
+import { formatRelativeTime } from '@/lib/utils'
 type RoleValue = 'SUPER_ADMIN' | 'PROGRAM_ADMIN' | 'JURY_MEMBER' | 'MENTOR' | 'OBSERVER'

 type TabKey = 'all' | 'jury' | 'mentors' | 'observers' | 'admins'
@@ -221,7 +221,9 @@ export function MembersContent() {
                    </TableCell>
                    <TableCell>
                      {user.lastLoginAt ? (
-                        formatDate(user.lastLoginAt)
+                        <span title={new Date(user.lastLoginAt).toLocaleString()}>
+                          {formatRelativeTime(user.lastLoginAt)}
+                        </span>
                      ) : (
                        <span className="text-muted-foreground">Never</span>
                      )}
@@ -280,6 +282,16 @@ export function MembersContent() {
                        : `${(user as unknown as { _count: { mentorAssignments: number; assignments: number } })._count.assignments} assigned`}
                    </span>
                  </div>
+                  <div className="flex items-center justify-between text-sm">
+                    <span className="text-muted-foreground">Last Login</span>
+                    <span>
+                      {user.lastLoginAt ? (
+                        formatRelativeTime(user.lastLoginAt)
+                      ) : (
+                        <span className="text-muted-foreground">Never</span>
+                      )}
+                    </span>
+                  </div>
                  {user.expertiseTags && user.expertiseTags.length > 0 && (
                    <div className="flex flex-wrap gap-1">
                      {user.expertiseTags.map((tag) => (
--- a/src/components/forms/evaluation-form.tsx
+++ b/src/components/forms/evaluation-form.tsx
@@ -644,7 +644,35 @@ export function EvaluationForm({

      {/* Bottom submit button for mobile */}
      {!isReadOnly && (
-        <div className="flex justify-end pb-safe">
+        <div className="flex flex-col gap-3 pb-safe">
+          {/* Autosave Status */}
+          <div className="flex items-center justify-end gap-2 text-sm">
+            {autosaveStatus === 'saved' && (
+              <span className="flex items-center gap-1.5 text-green-600">
+                <CheckCircle2 className="h-3.5 w-3.5" />
+                All changes saved
+              </span>
+            )}
+            {autosaveStatus === 'saving' && (
+              <span className="flex items-center gap-1.5 text-muted-foreground">
+                <Loader2 className="h-3.5 w-3.5 animate-spin" />
+                Saving...
+              </span>
+            )}
+            {autosaveStatus === 'error' && (
+              <span className="flex items-center gap-1.5 text-amber-600">
+                <AlertCircle className="h-3.5 w-3.5" />
+                Unsaved changes
+              </span>
+            )}
+            {autosaveStatus === 'idle' && isDirty && (
+              <span className="flex items-center gap-1.5 text-amber-600">
+                <AlertCircle className="h-3.5 w-3.5" />
+                Unsaved changes
+              </span>
+            )}
+          </div>
+          <div className="flex justify-end">
          <AlertDialog>
            <AlertDialogTrigger asChild>
              <Button
@@ -683,6 +711,7 @@ export function EvaluationForm({
              </AlertDialogFooter>
            </AlertDialogContent>
          </AlertDialog>
+          </div>
        </div>
      )}
    </form>
--- a/src/components/layouts/admin-sidebar.tsx
+++ b/src/components/layouts/admin-sidebar.tsx
@@ -32,7 +32,6 @@ import {
  History,
  Trophy,
  User,
-  LayoutTemplate,
  MessageSquare,
  Wand2,
 } from 'lucide-react'
@@ -51,80 +50,85 @@ interface AdminSidebarProps {
  }
 }

+type NavItem = {
+  name: string
+  href: string
+  icon: typeof LayoutDashboard
+  activeMatch?: string   // pathname must include this to be active
+  activeExclude?: string // pathname must NOT include this to be active
+}
+
 // Main navigation - scoped to selected edition
-const navigation = [
+const navigation: NavItem[] = [
  {
    name: 'Dashboard',
-    href: '/admin' as const,
+    href: '/admin',
    icon: LayoutDashboard,
  },
  {
    name: 'Rounds',
-    href: '/admin/rounds' as const,
+    href: '/admin/rounds',
    icon: CircleDot,
  },
-  {
-    name: 'Templates',
-    href: '/admin/round-templates' as const,
-    icon: LayoutTemplate,
-  },
  {
    name: 'Awards',
-    href: '/admin/awards' as const,
+    href: '/admin/awards',
    icon: Trophy,
  },
  {
    name: 'Projects',
-    href: '/admin/projects' as const,
+    href: '/admin/projects',
    icon: ClipboardList,
  },
  {
    name: 'Members',
-    href: '/admin/members' as const,
+    href: '/admin/members',
    icon: Users,
  },
  {
    name: 'Reports',
-    href: '/admin/reports' as const,
+    href: '/admin/reports',
    icon: FileSpreadsheet,
  },
  {
    name: 'Learning Hub',
-    href: '/admin/learning' as const,
+    href: '/admin/learning',
    icon: BookOpen,
  },
  {
    name: 'Messages',
-    href: '/admin/messages' as const,
+    href: '/admin/messages',
    icon: MessageSquare,
  },
  {
    name: 'Partners',
-    href: '/admin/partners' as const,
+    href: '/admin/partners',
    icon: Handshake,
  },
 ]

 // Admin-only navigation
-const adminNavigation = [
+const adminNavigation: NavItem[] = [
  {
    name: 'Manage Editions',
-    href: '/admin/programs' as const,
+    href: '/admin/programs',
    icon: FolderKanban,
+    activeExclude: 'apply-settings',
  },
  {
-    name: 'Apply Settings',
-    href: '/admin/programs' as const,
+    name: 'Apply Page',
+    href: '/admin/programs',
    icon: Wand2,
+    activeMatch: 'apply-settings',
  },
  {
    name: 'Audit Log',
-    href: '/admin/audit' as const,
+    href: '/admin/audit',
    icon: History,
  },
  {
    name: 'Settings',
-    href: '/admin/settings' as const,
+    href: '/admin/settings',
    icon: Settings,
  },
 ]
@@ -232,11 +236,16 @@ export function AdminSidebar({ user }: AdminSidebarProps) {
                  Administration
                </p>
                {adminNavigation.map((item) => {
-                  const isActive = pathname.startsWith(item.href)
+                  let isActive = pathname.startsWith(item.href)
+                  if (item.activeMatch) {
+                    isActive = pathname.includes(item.activeMatch)
+                  } else if (item.activeExclude && pathname.includes(item.activeExclude)) {
+                    isActive = false
+                  }
                  return (
                    <Link
                      key={item.name}
-                      href={item.href}
+                      href={item.href as Route}
                      onClick={() => setIsMobileMenuOpen(false)}
                      className={cn(
                        'group flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-all duration-150',
--- a/src/components/shared/animated-container.tsx
+++ b/src/components/shared/animated-container.tsx
@@ -0,0 +1,28 @@
+'use client'
+
+import { motion } from 'motion/react'
+import { type ReactNode } from 'react'
+
+export function AnimatedCard({ children, index = 0 }: { children: ReactNode; index?: number }) {
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 12 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.3, delay: index * 0.05, ease: 'easeOut' }}
+    >
+      {children}
+    </motion.div>
+  )
+}
+
+export function AnimatedList({ children }: { children: ReactNode }) {
+  return (
+    <motion.div
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      transition={{ duration: 0.3 }}
+    >
+      {children}
+    </motion.div>
+  )
+}
--- a/src/components/shared/csv-export-dialog.tsx
+++ b/src/components/shared/csv-export-dialog.tsx
@@ -0,0 +1,212 @@
+'use client'
+
+import { useState, useEffect, useCallback } from 'react'
+import { Button } from '@/components/ui/button'
+import { Label } from '@/components/ui/label'
+import { Checkbox } from '@/components/ui/checkbox'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog'
+import { Download, Loader2 } from 'lucide-react'
+
+/**
+ * Converts a camelCase or snake_case column name to Title Case.
+ * e.g. "projectTitle" -> "Project Title", "ai_meetsCriteria" -> "Ai Meets Criteria"
+ */
+function formatColumnName(col: string): string {
+  // Replace underscores with spaces
+  let result = col.replace(/_/g, ' ')
+  // Insert space before uppercase letters (camelCase -> spaced)
+  result = result.replace(/([a-z])([A-Z])/g, '$1 $2')
+  // Capitalize first letter of each word
+  return result
+    .split(' ')
+    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+    .join(' ')
+}
+
+type ExportData = {
+  data: Record<string, unknown>[]
+  columns: string[]
+}
+
+type CsvExportDialogProps = {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  exportData: ExportData | undefined
+  isLoading: boolean
+  filename: string
+  onRequestData: () => Promise<ExportData | undefined>
+}
+
+export function CsvExportDialog({
+  open,
+  onOpenChange,
+  exportData,
+  isLoading,
+  filename,
+  onRequestData,
+}: CsvExportDialogProps) {
+  const [selectedColumns, setSelectedColumns] = useState<Set<string>>(new Set())
+  const [dataLoaded, setDataLoaded] = useState(false)
+
+  // When dialog opens, fetch data if not already loaded
+  useEffect(() => {
+    if (open && !dataLoaded) {
+      onRequestData().then((result) => {
+        if (result?.columns) {
+          setSelectedColumns(new Set(result.columns))
+        }
+        setDataLoaded(true)
+      })
+    }
+  }, [open, dataLoaded, onRequestData])
+
+  // Sync selected columns when export data changes
+  useEffect(() => {
+    if (exportData?.columns) {
+      setSelectedColumns(new Set(exportData.columns))
+    }
+  }, [exportData])
+
+  // Reset state when dialog closes
+  useEffect(() => {
+    if (!open) {
+      setDataLoaded(false)
+    }
+  }, [open])
+
+  const toggleColumn = (col: string, checked: boolean) => {
+    const next = new Set(selectedColumns)
+    if (checked) {
+      next.add(col)
+    } else {
+      next.delete(col)
+    }
+    setSelectedColumns(next)
+  }
+
+  const toggleAll = () => {
+    if (!exportData) return
+    if (selectedColumns.size === exportData.columns.length) {
+      setSelectedColumns(new Set())
+    } else {
+      setSelectedColumns(new Set(exportData.columns))
+    }
+  }
+
+  const handleDownload = () => {
+    if (!exportData) return
+
+    const columnsArray = exportData.columns.filter((col) => selectedColumns.has(col))
+
+    // Build CSV header with formatted names
+    const csvHeader = columnsArray.map((col) => {
+      const formatted = formatColumnName(col)
+      // Escape quotes in header
+      if (formatted.includes(',') || formatted.includes('"')) {
+        return `"${formatted.replace(/"/g, '""')}"`
+      }
+      return formatted
+    })
+
+    const csvContent = [
+      csvHeader.join(','),
+      ...exportData.data.map((row) =>
+        columnsArray
+          .map((col) => {
+            const value = row[col]
+            if (value === null || value === undefined) return ''
+            const str = String(value)
+            if (str.includes(',') || str.includes('"') || str.includes('\n')) {
+              return `"${str.replace(/"/g, '""')}"`
+            }
+            return str
+          })
+          .join(',')
+      ),
+    ].join('\n')
+
+    const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' })
+    const url = URL.createObjectURL(blob)
+    const link = document.createElement('a')
+    link.href = url
+    link.download = `${filename}-${new Date().toISOString().split('T')[0]}.csv`
+    link.click()
+    URL.revokeObjectURL(url)
+    onOpenChange(false)
+  }
+
+  const allSelected = exportData ? selectedColumns.size === exportData.columns.length : false
+  const noneSelected = selectedColumns.size === 0
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-md">
+        <DialogHeader>
+          <DialogTitle>Export CSV</DialogTitle>
+          <DialogDescription>
+            Select which columns to include in the export
+          </DialogDescription>
+        </DialogHeader>
+
+        {isLoading ? (
+          <div className="flex items-center justify-center py-8">
+            <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
+            <span className="ml-2 text-sm text-muted-foreground">Loading data...</span>
+          </div>
+        ) : exportData ? (
+          <div className="space-y-3">
+            <div className="flex items-center justify-between">
+              <Label className="text-sm font-medium">
+                {selectedColumns.size} of {exportData.columns.length} columns selected
+              </Label>
+              <Button variant="ghost" size="sm" onClick={toggleAll}>
+                {allSelected ? 'Deselect all' : 'Select all'}
+              </Button>
+            </div>
+            <div className="space-y-1.5 max-h-60 overflow-y-auto rounded-lg border p-3">
+              {exportData.columns.map((col) => (
+                <div key={col} className="flex items-center gap-2">
+                  <Checkbox
+                    id={`col-${col}`}
+                    checked={selectedColumns.has(col)}
+                    onCheckedChange={(checked) => toggleColumn(col, !!checked)}
+                  />
+                  <Label htmlFor={`col-${col}`} className="text-sm cursor-pointer font-normal">
+                    {formatColumnName(col)}
+                  </Label>
+                </div>
+              ))}
+            </div>
+            <p className="text-xs text-muted-foreground">
+              {exportData.data.length} row{exportData.data.length !== 1 ? 's' : ''} will be exported
+            </p>
+          </div>
+        ) : (
+          <p className="text-sm text-muted-foreground py-4 text-center">
+            No data available for export.
+          </p>
+        )}
+
+        <DialogFooter>
+          <Button variant="outline" onClick={() => onOpenChange(false)}>
+            Cancel
+          </Button>
+          <Button
+            onClick={handleDownload}
+            disabled={isLoading || !exportData || noneSelected}
+          >
+            <Download className="mr-2 h-4 w-4" />
+            Download CSV
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}
--- a/src/components/shared/file-viewer.tsx
+++ b/src/components/shared/file-viewer.tsx
@@ -30,6 +30,21 @@ import {
 import { cn } from '@/lib/utils'
 import { toast } from 'sonner'

+const OFFICE_MIME_TYPES = [
+  'application/vnd.openxmlformats-officedocument.presentationml.presentation', // .pptx
+  'application/vnd.openxmlformats-officedocument.wordprocessingml.document',   // .docx
+  'application/vnd.ms-powerpoint',  // .ppt
+  'application/msword',             // .doc
+]
+
+const OFFICE_EXTENSIONS = ['.pptx', '.ppt', '.docx', '.doc']
+
+function isOfficeFile(mimeType: string, fileName: string): boolean {
+  if (OFFICE_MIME_TYPES.includes(mimeType)) return true
+  const ext = fileName.toLowerCase().slice(fileName.lastIndexOf('.'))
+  return OFFICE_EXTENSIONS.includes(ext)
+}
+
 interface ProjectFile {
  id: string
  fileType: 'EXEC_SUMMARY' | 'PRESENTATION' | 'VIDEO' | 'OTHER' | 'BUSINESS_PLAN' | 'VIDEO_PITCH' | 'SUPPORTING_DOC'
@@ -210,7 +225,8 @@ function FileItem({ file }: { file: ProjectFile }) {
  const canPreview =
    file.mimeType.startsWith('video/') ||
    file.mimeType === 'application/pdf' ||
-    file.mimeType.startsWith('image/')
+    file.mimeType.startsWith('image/') ||
+    isOfficeFile(file.mimeType, file.fileName)

  return (
    <div className="space-y-2">
@@ -264,6 +280,7 @@ function FileItem({ file }: { file: ProjectFile }) {
              )}
            </Button>
          )}
+          <FileOpenButton file={file} />
          <FileDownloadButton file={file} />
        </div>
      </div>
@@ -462,6 +479,45 @@ function BulkDownloadButton({ projectId, fileIds }: { projectId: string; fileIds
  )
 }

+function FileOpenButton({ file }: { file: ProjectFile }) {
+  const [loading, setLoading] = useState(false)
+
+  const { refetch } = trpc.file.getDownloadUrl.useQuery(
+    { bucket: file.bucket, objectKey: file.objectKey },
+    { enabled: false }
+  )
+
+  const handleOpen = async () => {
+    setLoading(true)
+    try {
+      const result = await refetch()
+      if (result.data?.url) {
+        window.open(result.data.url, '_blank')
+      }
+    } catch (error) {
+      console.error('Failed to get URL:', error)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <Button
+      variant="outline"
+      size="sm"
+      onClick={handleOpen}
+      disabled={loading}
+      aria-label="Open file in new tab"
+    >
+      {loading ? (
+        <Loader2 className="h-4 w-4 animate-spin" />
+      ) : (
+        <ExternalLink className="h-4 w-4" />
+      )}
+    </Button>
+  )
+}
+
 function FileDownloadButton({ file }: { file: ProjectFile }) {
  const [downloading, setDownloading] = useState(false)

@@ -475,8 +531,14 @@ function FileDownloadButton({ file }: { file: ProjectFile }) {
    try {
      const result = await refetch()
      if (result.data?.url) {
-        // Open in new tab for download
-        window.open(result.data.url, '_blank')
+        // Force browser download via <a download>
+        const link = document.createElement('a')
+        link.href = result.data.url
+        link.download = file.fileName
+        link.rel = 'noopener noreferrer'
+        document.body.appendChild(link)
+        link.click()
+        document.body.removeChild(link)
      }
    } catch (error) {
      console.error('Failed to get download URL:', error)
@@ -562,6 +624,31 @@ function FilePreview({ file, url }: { file: ProjectFile; url: string }) {
    )
  }

+  // Office documents (PPTX, DOCX, PPT, DOC)
+  if (isOfficeFile(file.mimeType, file.fileName)) {
+    const viewerUrl = `https://view.officeapps.live.com/op/embed.aspx?src=${encodeURIComponent(url)}`
+    return (
+      <div className="relative">
+        <iframe
+          src={viewerUrl}
+          className="w-full h-[600px]"
+          title={file.fileName}
+        />
+        <Button
+          variant="secondary"
+          size="sm"
+          className="absolute top-2 right-2"
+          asChild
+        >
+          <a href={url} target="_blank" rel="noopener noreferrer">
+            <ExternalLink className="mr-2 h-4 w-4" />
+            Open in new tab
+          </a>
+        </Button>
+      </div>
+    )
+  }
+
  return (
    <div className="flex items-center justify-center py-8 text-muted-foreground">
      Preview not available for this file type
--- a/src/components/shared/logo-upload.tsx
+++ b/src/components/shared/logo-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 { ProjectLogo } from './project-logo'
-import { Upload, Loader2, Trash2, ImagePlus } from 'lucide-react'
+import { Upload, Loader2, Trash2, ImagePlus, ZoomIn } from 'lucide-react'
 import { trpc } from '@/lib/trpc/client'
 import { toast } from 'sonner'

@@ -32,6 +35,48 @@ type LogoUploadProps = {
 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/png',
+      0.9
+    )
+  })
+}
+
 export function LogoUpload({
  project,
  currentLogoUrl,
@@ -39,8 +84,10 @@ export function LogoUpload({
  children,
 }: LogoUploadProps) {
  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,6 +97,10 @@ export function LogoUpload({
  const confirmUpload = trpc.logo.confirmUpload.useMutation()
  const deleteLogo = trpc.logo.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
@@ -66,34 +117,36 @@ export function LogoUpload({
      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({
        projectId: project.id,
-        fileName: selectedFile.name,
-        contentType: selectedFile.type,
+        fileName: 'logo.png',
+        contentType: 'image/png',
      })

-      // 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/png',
        },
      })

@@ -109,8 +162,7 @@ export function LogoUpload({

      toast.success('Logo updated successfully')
      setOpen(false)
-      setPreview(null)
-      setSelectedFile(null)
+      resetState()
      onUploadComplete?.()
    } catch (error) {
      console.error('Upload error:', error)
@@ -136,9 +188,16 @@ export function LogoUpload({
    }
  }

+  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)
  }

@@ -156,37 +215,85 @@ export function LogoUpload({
        <DialogHeader>
          <DialogTitle>Update Project Logo</DialogTitle>
          <DialogDescription>
-            Upload a logo for &quot;{project.title}&quot;. Allowed formats: JPEG, PNG, GIF, WebP.
-            Max size: {MAX_SIZE_MB}MB.
+            {imageSrc
+              ? 'Drag to reposition and use the slider to zoom. The logo will be cropped to a square.'
+              : `Upload a logo for "${project.title}". Allowed formats: JPEG, PNG, GIF, WebP. Max size: ${MAX_SIZE_MB}MB.`}
          </DialogDescription>
        </DialogHeader>

        <div className="space-y-4 py-4">
-          {/* Preview */}
-          <div className="flex justify-center">
-            <ProjectLogo
-              project={project}
-              logoUrl={preview || currentLogoUrl}
-              size="lg"
-            />
-          </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="rect"
+                  showGrid
+                  onCropChange={setCrop}
+                  onCropComplete={onCropComplete}
+                  onZoomChange={setZoom}
+                />
+              </div>

-          {/* File input */}
-          <div className="space-y-2">
-            <Label htmlFor="logo">Select image</Label>
-            <Input
-              ref={fileInputRef}
-              id="logo"
-              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 logo preview */}
+              <div className="flex justify-center">
+                <ProjectLogo
+                  project={project}
+                  logoUrl={currentLogoUrl}
+                  size="lg"
+                />
+              </div>
+
+              {/* File input */}
+              <div className="space-y-2">
+                <Label htmlFor="logo">Select image</Label>
+                <Input
+                  ref={fileInputRef}
+                  id="logo"
+                  type="file"
+                  accept={ALLOWED_TYPES.join(',')}
+                  onChange={handleFileSelect}
+                  className="cursor-pointer"
+                />
+              </div>
+            </>
+          )}
        </div>

        <DialogFooter className="flex-col gap-2 sm:flex-row">
-          {currentLogoUrl && !preview && (
+          {currentLogoUrl && !imageSrc && (
            <Button
              variant="destructive"
              onClick={handleDelete}
@@ -206,18 +313,20 @@ export function LogoUpload({
            <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/components/shared/status-badge.tsx
+++ b/src/components/shared/status-badge.tsx
@@ -0,0 +1,55 @@
+import { Badge, type BadgeProps } from '@/components/ui/badge'
+import { cn } from '@/lib/utils'
+
+const STATUS_STYLES: Record<string, { variant: BadgeProps['variant']; className?: string }> = {
+  // Round statuses
+  DRAFT: { variant: 'secondary' },
+  ACTIVE: { variant: 'default', className: 'bg-blue-500/10 text-blue-700 border-blue-200 dark:text-blue-400' },
+  EVALUATION: { variant: 'default', className: 'bg-violet-500/10 text-violet-700 border-violet-200 dark:text-violet-400' },
+  CLOSED: { variant: 'secondary', className: 'bg-slate-500/10 text-slate-600 border-slate-200' },
+
+  // Project statuses
+  SUBMITTED: { variant: 'secondary', className: 'bg-indigo-500/10 text-indigo-700 border-indigo-200 dark:text-indigo-400' },
+  ELIGIBLE: { variant: 'default', className: 'bg-emerald-500/10 text-emerald-700 border-emerald-200 dark:text-emerald-400' },
+  ASSIGNED: { variant: 'default', className: 'bg-violet-500/10 text-violet-700 border-violet-200 dark:text-violet-400' },
+  UNDER_REVIEW: { variant: 'default', className: 'bg-blue-500/10 text-blue-700 border-blue-200 dark:text-blue-400' },
+  SHORTLISTED: { variant: 'default', className: 'bg-amber-500/10 text-amber-700 border-amber-200 dark:text-amber-400' },
+  SEMIFINALIST: { variant: 'default', className: 'bg-amber-500/10 text-amber-700 border-amber-200 dark:text-amber-400' },
+  FINALIST: { variant: 'default', className: 'bg-orange-500/10 text-orange-700 border-orange-200 dark:text-orange-400' },
+  WINNER: { variant: 'default', className: 'bg-yellow-500/10 text-yellow-800 border-yellow-300 dark:text-yellow-400' },
+  REJECTED: { variant: 'destructive' },
+  WITHDRAWN: { variant: 'secondary' },
+
+  // Evaluation statuses
+  IN_PROGRESS: { variant: 'default', className: 'bg-blue-500/10 text-blue-700 border-blue-200 dark:text-blue-400' },
+  COMPLETED: { variant: 'default', className: 'bg-emerald-500/10 text-emerald-700 border-emerald-200 dark:text-emerald-400' },
+
+  // User statuses
+  INVITED: { variant: 'secondary', className: 'bg-sky-500/10 text-sky-700 border-sky-200 dark:text-sky-400' },
+  INACTIVE: { variant: 'secondary' },
+  SUSPENDED: { variant: 'destructive' },
+}
+
+type StatusBadgeProps = {
+  status: string
+  className?: string
+  size?: 'sm' | 'default'
+}
+
+export function StatusBadge({ status, className, size = 'default' }: StatusBadgeProps) {
+  const style = STATUS_STYLES[status] || { variant: 'secondary' as const }
+  const label = status.replace(/_/g, ' ')
+
+  return (
+    <Badge
+      variant={style.variant}
+      className={cn(
+        style.className,
+        size === 'sm' && 'text-[10px] px-1.5 py-0',
+        className,
+      )}
+    >
+      {label}
+    </Badge>
+  )
+}