390 lines
12 KiB
TypeScript
390 lines
12 KiB
TypeScript
|
'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'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'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't accepted their invitation yet. You can resend
|
||
|
|
the invitation email using the button above.
|
||
|
|
</AlertDescription>
|
||
|
|
</Alert>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|