Add profile settings page, mentor management, and S3 email logos

- Add universal /settings/profile page accessible to all roles with
  avatar upload, bio, phone, password change, and account deletion
- Expand updateProfile endpoint to accept bio (metadataJson), phone,
  and notification preference
- Add deleteAccount endpoint with password confirmation
- Add Profile Settings link to all nav components (admin, jury, mentor,
  observer)
- Add /admin/mentors list page and /admin/mentors/[id] detail page for
  mentor management
- Add Mentors nav item to admin sidebar
- Update email logo URLs to S3 (s3.monaco-opc.com/public/)
- Add ocean.png background image to email wrapper

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
2026-01-30 19:57:12 +01:00
parent 0c0a9b7eb5
commit 402bdfd8c5
10 changed files with 1248 additions and 10 deletions

View File

@@ -0,0 +1,389 @@
'use client'
import { useEffect, useState } from 'react'
import { useParams, useRouter } from 'next/navigation'
import Link from 'next/link'
import type { Route } from 'next'
import { trpc } from '@/lib/trpc/client'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from '@/components/ui/card'
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from '@/components/ui/select'
import { Badge } from '@/components/ui/badge'
import { Skeleton } from '@/components/ui/skeleton'
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from '@/components/ui/table'
import { toast } from 'sonner'
import { TagInput } from '@/components/shared/tag-input'
import {
ArrowLeft,
Save,
Mail,
GraduationCap,
Loader2,
AlertCircle,
ClipboardList,
User,
} from 'lucide-react'
export default function MentorDetailPage() {
const params = useParams()
const router = useRouter()
const mentorId = params.id as string
const { data: mentor, isLoading, refetch } = trpc.user.get.useQuery({ id: mentorId })
const updateUser = trpc.user.update.useMutation()
const sendInvitation = trpc.user.sendInvitation.useMutation()
const { data: assignmentsData } = trpc.mentor.listAssignments.useQuery({
mentorId,
perPage: 50,
})
const [name, setName] = useState('')
const [status, setStatus] = useState<'INVITED' | 'ACTIVE' | 'SUSPENDED'>('INVITED')
const [expertiseTags, setExpertiseTags] = useState<string[]>([])
const [maxAssignments, setMaxAssignments] = useState<string>('')
useEffect(() => {
if (mentor) {
setName(mentor.name || '')
setStatus(mentor.status as 'INVITED' | 'ACTIVE' | 'SUSPENDED')
setExpertiseTags(mentor.expertiseTags || [])
setMaxAssignments(mentor.maxAssignments?.toString() || '')
}
}, [mentor])
const handleSave = async () => {
try {
await updateUser.mutateAsync({
id: mentorId,
name: name || null,
status,
expertiseTags,
maxAssignments: maxAssignments ? parseInt(maxAssignments) : null,
})
toast.success('Mentor updated successfully')
refetch()
} catch (error) {
toast.error(error instanceof Error ? error.message : 'Failed to update mentor')
}
}
const handleSendInvitation = async () => {
try {
await sendInvitation.mutateAsync({ userId: mentorId })
toast.success('Invitation email sent successfully')
refetch()
} catch (error) {
toast.error(error instanceof Error ? error.message : 'Failed to send invitation')
}
}
if (isLoading) {
return (
<div className="space-y-6">
<div className="flex items-center gap-4">
<Skeleton className="h-9 w-32" />
</div>
<Card>
<CardHeader>
<Skeleton className="h-6 w-48" />
<Skeleton className="h-4 w-72" />
</CardHeader>
<CardContent className="space-y-4">
<Skeleton className="h-10 w-full" />
<Skeleton className="h-10 w-full" />
<Skeleton className="h-10 w-full" />
</CardContent>
</Card>
</div>
)
}
if (!mentor) {
return (
<div className="space-y-6">
<Alert variant="destructive">
<AlertCircle className="h-4 w-4" />
<AlertTitle>Mentor not found</AlertTitle>
<AlertDescription>
The mentor you&apos;re looking for does not exist.
</AlertDescription>
</Alert>
<Button asChild>
<Link href={"/admin/mentors" as Route}>
<ArrowLeft className="mr-2 h-4 w-4" />
Back to Mentors
</Link>
</Button>
</div>
)
}
const statusColors: Record<string, 'default' | 'success' | 'secondary' | 'destructive'> = {
ACTIVE: 'success',
INVITED: 'secondary',
SUSPENDED: 'destructive',
}
return (
<div className="space-y-6">
{/* Header */}
<div className="flex items-center gap-4">
<Button variant="ghost" asChild className="-ml-4">
<Link href={"/admin/mentors" as Route}>
<ArrowLeft className="mr-2 h-4 w-4" />
Back to Mentors
</Link>
</Button>
</div>
<div className="flex items-start justify-between">
<div>
<h1 className="text-2xl font-semibold tracking-tight">
{mentor.name || 'Unnamed Mentor'}
</h1>
<p className="text-muted-foreground">{mentor.email}</p>
</div>
<div className="flex items-center gap-2">
<Badge variant={statusColors[mentor.status] || 'secondary'} className="text-sm">
{mentor.status}
</Badge>
{mentor.status === 'INVITED' && (
<Button
variant="outline"
size="sm"
onClick={handleSendInvitation}
disabled={sendInvitation.isPending}
>
{sendInvitation.isPending ? (
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
) : (
<Mail className="mr-2 h-4 w-4" />
)}
Send Invitation
</Button>
)}
</div>
</div>
<div className="grid gap-6 md:grid-cols-2">
{/* Profile Info */}
<Card>
<CardHeader>
<CardTitle className="flex items-center gap-2">
<User className="h-5 w-5" />
Profile Information
</CardTitle>
<CardDescription>
Update the mentor&apos;s profile and settings
</CardDescription>
</CardHeader>
<CardContent className="space-y-4">
<div className="space-y-2">
<Label htmlFor="email">Email</Label>
<Input id="email" value={mentor.email} disabled />
</div>
<div className="space-y-2">
<Label htmlFor="name">Name</Label>
<Input
id="name"
value={name}
onChange={(e) => setName(e.target.value)}
placeholder="Enter name"
/>
</div>
<div className="space-y-2">
<Label htmlFor="status">Status</Label>
<Select value={status} onValueChange={(v) => setStatus(v as typeof status)}>
<SelectTrigger id="status">
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="INVITED">Invited</SelectItem>
<SelectItem value="ACTIVE">Active</SelectItem>
<SelectItem value="SUSPENDED">Suspended</SelectItem>
</SelectContent>
</Select>
</div>
</CardContent>
</Card>
{/* Expertise & Capacity */}
<Card>
<CardHeader>
<CardTitle className="flex items-center gap-2">
<GraduationCap className="h-5 w-5" />
Expertise & Capacity
</CardTitle>
<CardDescription>
Configure expertise areas and assignment limits
</CardDescription>
</CardHeader>
<CardContent className="space-y-4">
<div className="space-y-2">
<Label>Expertise Tags</Label>
<TagInput
value={expertiseTags}
onChange={setExpertiseTags}
placeholder="Select expertise tags..."
maxTags={15}
/>
</div>
<div className="space-y-2">
<Label htmlFor="maxAssignments">Max Assignments</Label>
<Input
id="maxAssignments"
type="number"
min="1"
max="100"
value={maxAssignments}
onChange={(e) => setMaxAssignments(e.target.value)}
placeholder="Unlimited"
/>
<p className="text-xs text-muted-foreground">
Maximum number of projects this mentor can be assigned
</p>
</div>
{mentor._count && (
<div className="pt-4 border-t">
<h4 className="font-medium mb-2">Statistics</h4>
<div className="grid grid-cols-2 gap-4 text-sm">
<div>
<p className="text-muted-foreground">Total Assignments</p>
<p className="text-2xl font-semibold">{mentor._count.assignments}</p>
</div>
<div>
<p className="text-muted-foreground">Last Login</p>
<p className="text-lg">
{mentor.lastLoginAt
? new Date(mentor.lastLoginAt).toLocaleDateString()
: 'Never'}
</p>
</div>
</div>
</div>
)}
</CardContent>
</Card>
</div>
{/* Save Button */}
<div className="flex justify-end gap-4">
<Button variant="outline" asChild>
<Link href={"/admin/mentors" as Route}>Cancel</Link>
</Button>
<Button onClick={handleSave} disabled={updateUser.isPending}>
{updateUser.isPending ? (
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
) : (
<Save className="mr-2 h-4 w-4" />
)}
Save Changes
</Button>
</div>
{/* Assigned Projects */}
<Card>
<CardHeader>
<CardTitle className="flex items-center gap-2">
<ClipboardList className="h-5 w-5" />
Assigned Projects
</CardTitle>
<CardDescription>
Projects currently assigned to this mentor
</CardDescription>
</CardHeader>
<CardContent>
{assignmentsData && assignmentsData.assignments.length > 0 ? (
<Table>
<TableHeader>
<TableRow>
<TableHead>Project</TableHead>
<TableHead>Team</TableHead>
<TableHead>Category</TableHead>
<TableHead>Status</TableHead>
<TableHead>Assigned</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{assignmentsData.assignments.map((assignment) => (
<TableRow key={assignment.id}>
<TableCell>
<Link
href={`/admin/projects/${assignment.project.id}`}
className="font-medium text-primary hover:underline"
>
{assignment.project.title}
</Link>
</TableCell>
<TableCell className="text-muted-foreground">
{assignment.project.teamName || '-'}
</TableCell>
<TableCell>
{assignment.project.competitionCategory ? (
<Badge variant="outline" className="text-xs">
{assignment.project.competitionCategory}
</Badge>
) : (
<span className="text-muted-foreground">-</span>
)}
</TableCell>
<TableCell>
<Badge variant="secondary" className="text-xs">
{assignment.project.status}
</Badge>
</TableCell>
<TableCell className="text-muted-foreground text-sm">
{new Date(assignment.assignedAt).toLocaleDateString()}
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
) : (
<p className="py-8 text-center text-muted-foreground">
No projects assigned to this mentor yet.
</p>
)}
</CardContent>
</Card>
{/* Invitation Status */}
{mentor.status === 'INVITED' && (
<Alert>
<Mail className="h-4 w-4" />
<AlertTitle>Invitation Pending</AlertTitle>
<AlertDescription>
This mentor hasn&apos;t accepted their invitation yet. You can resend
the invitation email using the button above.
</AlertDescription>
</Alert>
)}
</div>
)
}

View File

@@ -0,0 +1,251 @@
import { Suspense } from 'react'
import Link from 'next/link'
import { prisma } from '@/lib/prisma'
export const dynamic = 'force-dynamic'
import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from '@/components/ui/card'
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 {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from '@/components/ui/table'
import type { Route } from 'next'
import { Plus, GraduationCap, Eye } from 'lucide-react'
import { formatDate, getInitials } from '@/lib/utils'
async function MentorsContent() {
const mentors = await prisma.user.findMany({
where: {
role: 'MENTOR',
},
include: {
_count: {
select: {
mentorAssignments: true,
},
},
},
orderBy: [{ status: 'asc' }, { name: 'asc' }],
})
if (mentors.length === 0) {
return (
<Card>
<CardContent className="flex flex-col items-center justify-center py-12 text-center">
<GraduationCap className="h-12 w-12 text-muted-foreground/50" />
<p className="mt-2 font-medium">No mentors yet</p>
<p className="text-sm text-muted-foreground">
Invite mentors to start matching them with projects
</p>
<Button asChild className="mt-4">
<Link href="/admin/users/invite">
<Plus className="mr-2 h-4 w-4" />
Invite Mentor
</Link>
</Button>
</CardContent>
</Card>
)
}
const statusColors: Record<string, 'default' | 'success' | 'secondary' | 'destructive'> = {
ACTIVE: 'success',
INVITED: 'secondary',
SUSPENDED: 'destructive',
}
return (
<>
{/* Desktop table view */}
<Card className="hidden md:block">
<Table>
<TableHeader>
<TableRow>
<TableHead>Mentor</TableHead>
<TableHead>Expertise</TableHead>
<TableHead>Assigned Projects</TableHead>
<TableHead>Status</TableHead>
<TableHead>Last Login</TableHead>
<TableHead className="text-right">Actions</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{mentors.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>
<div>
<p className="font-medium">{mentor.name || 'Unnamed'}</p>
<p className="text-sm text-muted-foreground">
{mentor.email}
</p>
</div>
</div>
</TableCell>
<TableCell>
{mentor.expertiseTags && mentor.expertiseTags.length > 0 ? (
<div className="flex flex-wrap gap-1">
{mentor.expertiseTags.slice(0, 3).map((tag) => (
<Badge key={tag} variant="outline" className="text-xs">
{tag}
</Badge>
))}
{mentor.expertiseTags.length > 3 && (
<Badge variant="outline" className="text-xs">
+{mentor.expertiseTags.length - 3}
</Badge>
)}
</div>
) : (
<span className="text-sm text-muted-foreground">-</span>
)}
</TableCell>
<TableCell>
<span className="font-medium">{mentor._count.mentorAssignments}</span>
<span className="text-muted-foreground"> project{mentor._count.mentorAssignments !== 1 ? 's' : ''}</span>
</TableCell>
<TableCell>
<Badge variant={statusColors[mentor.status] || 'secondary'}>
{mentor.status}
</Badge>
</TableCell>
<TableCell>
{mentor.lastLoginAt ? (
formatDate(mentor.lastLoginAt)
) : (
<span className="text-muted-foreground">Never</span>
)}
</TableCell>
<TableCell className="text-right">
<Button variant="ghost" size="sm" asChild>
<Link href={`/admin/mentors/${mentor.id}` as Route}>
<Eye className="mr-2 h-4 w-4" />
View
</Link>
</Button>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</Card>
{/* Mobile card view */}
<div className="space-y-4 md:hidden">
{mentors.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>
<div>
<CardTitle className="text-base">
{mentor.name || 'Unnamed'}
</CardTitle>
<CardDescription className="text-xs">
{mentor.email}
</CardDescription>
</div>
</div>
<Badge variant={statusColors[mentor.status] || 'secondary'}>
{mentor.status}
</Badge>
</div>
</CardHeader>
<CardContent className="space-y-3">
<div className="flex items-center justify-between text-sm">
<span className="text-muted-foreground">Assigned Projects</span>
<span className="font-medium">{mentor._count.mentorAssignments}</span>
</div>
{mentor.expertiseTags && mentor.expertiseTags.length > 0 && (
<div className="flex flex-wrap gap-1">
{mentor.expertiseTags.map((tag) => (
<Badge key={tag} variant="outline" className="text-xs">
{tag}
</Badge>
))}
</div>
)}
<Button variant="outline" size="sm" className="w-full" asChild>
<Link href={`/admin/mentors/${mentor.id}` as Route}>
<Eye className="mr-2 h-4 w-4" />
View Details
</Link>
</Button>
</CardContent>
</Card>
))}
</div>
</>
)
}
function MentorsSkeleton() {
return (
<Card>
<CardContent className="p-6">
<div className="space-y-4">
{[...Array(5)].map((_, i) => (
<div key={i} className="flex items-center gap-4">
<Skeleton className="h-10 w-10 rounded-full" />
<div className="flex-1 space-y-2">
<Skeleton className="h-5 w-32" />
<Skeleton className="h-4 w-48" />
</div>
<Skeleton className="h-9 w-9" />
</div>
))}
</div>
</CardContent>
</Card>
)
}
export default function MentorsPage() {
return (
<div className="space-y-6">
{/* Header */}
<div className="flex items-center justify-between">
<div>
<h1 className="text-2xl font-semibold tracking-tight">Mentors</h1>
<p className="text-muted-foreground">
Manage mentors and their project assignments
</p>
</div>
<Button asChild>
<Link href="/admin/users/invite">
<Plus className="mr-2 h-4 w-4" />
Invite Mentor
</Link>
</Button>
</div>
{/* Content */}
<Suspense fallback={<MentorsSkeleton />}>
<MentorsContent />
</Suspense>
</div>
)
}