Add profile settings page, mentor management, and S3 email logos
Build and Push Docker Image / build (push) Successful in 8m10s
Details
Build and Push Docker Image / build (push) Successful in 8m10s
Details
- 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:
parent
0c0a9b7eb5
commit
402bdfd8c5
|
|
@ -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'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>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
@ -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>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,55 @@
|
||||||
|
import { redirect } from 'next/navigation'
|
||||||
|
import { auth } from '@/lib/auth'
|
||||||
|
|
||||||
|
const ROLE_DASHBOARDS: Record<string, string> = {
|
||||||
|
SUPER_ADMIN: '/admin',
|
||||||
|
PROGRAM_ADMIN: '/admin',
|
||||||
|
JURY_MEMBER: '/jury',
|
||||||
|
MENTOR: '/mentor',
|
||||||
|
OBSERVER: '/observer',
|
||||||
|
}
|
||||||
|
|
||||||
|
export default async function SettingsLayout({
|
||||||
|
children,
|
||||||
|
}: {
|
||||||
|
children: React.ReactNode
|
||||||
|
}) {
|
||||||
|
const session = await auth()
|
||||||
|
|
||||||
|
if (!session?.user) {
|
||||||
|
redirect('/login')
|
||||||
|
}
|
||||||
|
|
||||||
|
const dashboardUrl = ROLE_DASHBOARDS[session.user.role] || '/login'
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-background">
|
||||||
|
<header className="sticky top-0 z-40 border-b bg-card">
|
||||||
|
<div className="container mx-auto flex h-16 max-w-3xl items-center px-4">
|
||||||
|
<a
|
||||||
|
href={dashboardUrl}
|
||||||
|
className="flex items-center gap-2 text-sm font-medium text-muted-foreground transition-colors hover:text-foreground"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="16"
|
||||||
|
height="16"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
strokeWidth="2"
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
>
|
||||||
|
<path d="m15 18-6-6 6-6" />
|
||||||
|
</svg>
|
||||||
|
Back to Dashboard
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<main className="container mx-auto max-w-3xl px-4 py-6 lg:py-8">
|
||||||
|
{children}
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,427 @@
|
||||||
|
'use client'
|
||||||
|
|
||||||
|
import { useState } from 'react'
|
||||||
|
import { useRouter } from 'next/navigation'
|
||||||
|
import { signOut } from 'next-auth/react'
|
||||||
|
import { trpc } from '@/lib/trpc/client'
|
||||||
|
import { toast } from 'sonner'
|
||||||
|
import { Button } from '@/components/ui/button'
|
||||||
|
import { Input } from '@/components/ui/input'
|
||||||
|
import { Label } from '@/components/ui/label'
|
||||||
|
import { Textarea } from '@/components/ui/textarea'
|
||||||
|
import {
|
||||||
|
Card,
|
||||||
|
CardContent,
|
||||||
|
CardDescription,
|
||||||
|
CardHeader,
|
||||||
|
CardTitle,
|
||||||
|
} from '@/components/ui/card'
|
||||||
|
import {
|
||||||
|
Select,
|
||||||
|
SelectContent,
|
||||||
|
SelectItem,
|
||||||
|
SelectTrigger,
|
||||||
|
SelectValue,
|
||||||
|
} from '@/components/ui/select'
|
||||||
|
import {
|
||||||
|
Dialog,
|
||||||
|
DialogContent,
|
||||||
|
DialogDescription,
|
||||||
|
DialogFooter,
|
||||||
|
DialogHeader,
|
||||||
|
DialogTitle,
|
||||||
|
DialogTrigger,
|
||||||
|
} from '@/components/ui/dialog'
|
||||||
|
import { Skeleton } from '@/components/ui/skeleton'
|
||||||
|
import { AvatarUpload } from '@/components/shared/avatar-upload'
|
||||||
|
import { UserAvatar } from '@/components/shared/user-avatar'
|
||||||
|
import {
|
||||||
|
Loader2,
|
||||||
|
Save,
|
||||||
|
Camera,
|
||||||
|
Lock,
|
||||||
|
Bell,
|
||||||
|
Trash2,
|
||||||
|
User,
|
||||||
|
} from 'lucide-react'
|
||||||
|
|
||||||
|
export default function ProfileSettingsPage() {
|
||||||
|
const router = useRouter()
|
||||||
|
const { data: user, isLoading, refetch } = trpc.user.me.useQuery()
|
||||||
|
const { data: avatarUrl } = trpc.avatar.getUrl.useQuery()
|
||||||
|
const updateProfile = trpc.user.updateProfile.useMutation()
|
||||||
|
const changePassword = trpc.user.changePassword.useMutation()
|
||||||
|
const deleteAccount = trpc.user.deleteAccount.useMutation()
|
||||||
|
|
||||||
|
// Profile form state
|
||||||
|
const [name, setName] = useState('')
|
||||||
|
const [bio, setBio] = useState('')
|
||||||
|
const [phoneNumber, setPhoneNumber] = useState('')
|
||||||
|
const [notificationPreference, setNotificationPreference] = useState('EMAIL')
|
||||||
|
const [profileLoaded, setProfileLoaded] = useState(false)
|
||||||
|
|
||||||
|
// Password form state
|
||||||
|
const [currentPassword, setCurrentPassword] = useState('')
|
||||||
|
const [newPassword, setNewPassword] = useState('')
|
||||||
|
const [confirmNewPassword, setConfirmNewPassword] = useState('')
|
||||||
|
|
||||||
|
// Delete account state
|
||||||
|
const [deletePassword, setDeletePassword] = useState('')
|
||||||
|
const [deleteDialogOpen, setDeleteDialogOpen] = useState(false)
|
||||||
|
|
||||||
|
// Populate form when user data loads
|
||||||
|
if (user && !profileLoaded) {
|
||||||
|
setName(user.name || '')
|
||||||
|
const meta = (user.metadataJson as Record<string, unknown>) || {}
|
||||||
|
setBio((meta.bio as string) || '')
|
||||||
|
setPhoneNumber(user.phoneNumber || '')
|
||||||
|
setNotificationPreference(user.notificationPreference || 'EMAIL')
|
||||||
|
setProfileLoaded(true)
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleSaveProfile = async () => {
|
||||||
|
try {
|
||||||
|
await updateProfile.mutateAsync({
|
||||||
|
name: name || undefined,
|
||||||
|
bio,
|
||||||
|
phoneNumber: phoneNumber || null,
|
||||||
|
notificationPreference: notificationPreference as 'EMAIL' | 'WHATSAPP' | 'BOTH' | 'NONE',
|
||||||
|
})
|
||||||
|
toast.success('Profile updated successfully')
|
||||||
|
refetch()
|
||||||
|
} catch (error) {
|
||||||
|
toast.error(error instanceof Error ? error.message : 'Failed to update profile')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleChangePassword = async () => {
|
||||||
|
if (newPassword !== confirmNewPassword) {
|
||||||
|
toast.error('New passwords do not match')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
await changePassword.mutateAsync({
|
||||||
|
currentPassword,
|
||||||
|
newPassword,
|
||||||
|
confirmNewPassword,
|
||||||
|
})
|
||||||
|
toast.success('Password changed successfully')
|
||||||
|
setCurrentPassword('')
|
||||||
|
setNewPassword('')
|
||||||
|
setConfirmNewPassword('')
|
||||||
|
} catch (error) {
|
||||||
|
toast.error(error instanceof Error ? error.message : 'Failed to change password')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleDeleteAccount = async () => {
|
||||||
|
try {
|
||||||
|
await deleteAccount.mutateAsync({ password: deletePassword })
|
||||||
|
toast.success('Account deleted')
|
||||||
|
setDeleteDialogOpen(false)
|
||||||
|
signOut({ callbackUrl: '/login' })
|
||||||
|
} catch (error) {
|
||||||
|
toast.error(error instanceof Error ? error.message : 'Failed to delete account')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (isLoading) {
|
||||||
|
return (
|
||||||
|
<div className="space-y-6">
|
||||||
|
<Skeleton className="h-8 w-48" />
|
||||||
|
<Skeleton className="h-[200px] w-full" />
|
||||||
|
<Skeleton className="h-[200px] w-full" />
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!user) return null
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-6">
|
||||||
|
<div>
|
||||||
|
<h1 className="text-2xl font-semibold tracking-tight">Profile Settings</h1>
|
||||||
|
<p className="text-muted-foreground">
|
||||||
|
Manage your personal information and preferences
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Profile Photo */}
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="flex items-center gap-2">
|
||||||
|
<Camera className="h-5 w-5" />
|
||||||
|
Profile Photo
|
||||||
|
</CardTitle>
|
||||||
|
<CardDescription>
|
||||||
|
Click your avatar to upload a new profile picture
|
||||||
|
</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<AvatarUpload
|
||||||
|
user={{ name: user.name, email: user.email, profileImageKey: user.profileImageKey }}
|
||||||
|
currentAvatarUrl={avatarUrl}
|
||||||
|
onUploadComplete={() => refetch()}
|
||||||
|
>
|
||||||
|
<div className="cursor-pointer">
|
||||||
|
<UserAvatar
|
||||||
|
user={{ name: user.name, email: user.email }}
|
||||||
|
avatarUrl={avatarUrl}
|
||||||
|
size="xl"
|
||||||
|
showEditOverlay
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</AvatarUpload>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
{/* Personal Information */}
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="flex items-center gap-2">
|
||||||
|
<User className="h-5 w-5" />
|
||||||
|
Personal Information
|
||||||
|
</CardTitle>
|
||||||
|
<CardDescription>
|
||||||
|
Update your name, bio, and contact information
|
||||||
|
</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="space-y-4">
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="email">Email</Label>
|
||||||
|
<Input id="email" value={user.email} disabled />
|
||||||
|
<p className="text-xs text-muted-foreground">Email cannot be changed</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="name">Name</Label>
|
||||||
|
<Input
|
||||||
|
id="name"
|
||||||
|
value={name}
|
||||||
|
onChange={(e) => setName(e.target.value)}
|
||||||
|
placeholder="Your full name"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="bio">Bio</Label>
|
||||||
|
<Textarea
|
||||||
|
id="bio"
|
||||||
|
value={bio}
|
||||||
|
onChange={(e) => setBio(e.target.value)}
|
||||||
|
placeholder="Tell us a bit about yourself..."
|
||||||
|
rows={3}
|
||||||
|
maxLength={1000}
|
||||||
|
/>
|
||||||
|
<p className="text-xs text-muted-foreground">
|
||||||
|
{bio.length}/1000 characters
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="phone">Phone Number</Label>
|
||||||
|
<Input
|
||||||
|
id="phone"
|
||||||
|
value={phoneNumber}
|
||||||
|
onChange={(e) => setPhoneNumber(e.target.value)}
|
||||||
|
placeholder="+33 6 12 34 56 78"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex justify-end">
|
||||||
|
<Button
|
||||||
|
onClick={handleSaveProfile}
|
||||||
|
disabled={updateProfile.isPending}
|
||||||
|
>
|
||||||
|
{updateProfile.isPending ? (
|
||||||
|
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
||||||
|
) : (
|
||||||
|
<Save className="mr-2 h-4 w-4" />
|
||||||
|
)}
|
||||||
|
Save Changes
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
{/* Notifications */}
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="flex items-center gap-2">
|
||||||
|
<Bell className="h-5 w-5" />
|
||||||
|
Notifications
|
||||||
|
</CardTitle>
|
||||||
|
<CardDescription>
|
||||||
|
Choose how you want to receive notifications
|
||||||
|
</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="space-y-4">
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="notification-pref">Notification Preference</Label>
|
||||||
|
<Select
|
||||||
|
value={notificationPreference}
|
||||||
|
onValueChange={setNotificationPreference}
|
||||||
|
>
|
||||||
|
<SelectTrigger id="notification-pref">
|
||||||
|
<SelectValue />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value="EMAIL">Email only</SelectItem>
|
||||||
|
<SelectItem value="WHATSAPP">WhatsApp only</SelectItem>
|
||||||
|
<SelectItem value="BOTH">Email & WhatsApp</SelectItem>
|
||||||
|
<SelectItem value="NONE">None</SelectItem>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex justify-end">
|
||||||
|
<Button
|
||||||
|
onClick={handleSaveProfile}
|
||||||
|
disabled={updateProfile.isPending}
|
||||||
|
>
|
||||||
|
{updateProfile.isPending ? (
|
||||||
|
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
||||||
|
) : (
|
||||||
|
<Save className="mr-2 h-4 w-4" />
|
||||||
|
)}
|
||||||
|
Save Preferences
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
{/* Change Password */}
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="flex items-center gap-2">
|
||||||
|
<Lock className="h-5 w-5" />
|
||||||
|
Change Password
|
||||||
|
</CardTitle>
|
||||||
|
<CardDescription>
|
||||||
|
Update your account password
|
||||||
|
</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="space-y-4">
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="current-password">Current Password</Label>
|
||||||
|
<Input
|
||||||
|
id="current-password"
|
||||||
|
type="password"
|
||||||
|
value={currentPassword}
|
||||||
|
onChange={(e) => setCurrentPassword(e.target.value)}
|
||||||
|
placeholder="Enter current password"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="new-password">New Password</Label>
|
||||||
|
<Input
|
||||||
|
id="new-password"
|
||||||
|
type="password"
|
||||||
|
value={newPassword}
|
||||||
|
onChange={(e) => setNewPassword(e.target.value)}
|
||||||
|
placeholder="Enter new password"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="confirm-password">Confirm New Password</Label>
|
||||||
|
<Input
|
||||||
|
id="confirm-password"
|
||||||
|
type="password"
|
||||||
|
value={confirmNewPassword}
|
||||||
|
onChange={(e) => setConfirmNewPassword(e.target.value)}
|
||||||
|
placeholder="Confirm new password"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex justify-end">
|
||||||
|
<Button
|
||||||
|
onClick={handleChangePassword}
|
||||||
|
disabled={changePassword.isPending || !currentPassword || !newPassword || !confirmNewPassword}
|
||||||
|
>
|
||||||
|
{changePassword.isPending ? (
|
||||||
|
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
||||||
|
) : (
|
||||||
|
<Lock className="mr-2 h-4 w-4" />
|
||||||
|
)}
|
||||||
|
Change Password
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
{/* Danger Zone */}
|
||||||
|
{user.role !== 'SUPER_ADMIN' && (
|
||||||
|
<Card className="border-destructive/50">
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="flex items-center gap-2 text-destructive">
|
||||||
|
<Trash2 className="h-5 w-5" />
|
||||||
|
Danger Zone
|
||||||
|
</CardTitle>
|
||||||
|
<CardDescription>
|
||||||
|
Permanently delete your account and all associated data
|
||||||
|
</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<Dialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
|
||||||
|
<DialogTrigger asChild>
|
||||||
|
<Button variant="destructive">
|
||||||
|
<Trash2 className="mr-2 h-4 w-4" />
|
||||||
|
Delete Account
|
||||||
|
</Button>
|
||||||
|
</DialogTrigger>
|
||||||
|
<DialogContent>
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle>Delete Account</DialogTitle>
|
||||||
|
<DialogDescription>
|
||||||
|
This action is permanent and cannot be undone. All your data,
|
||||||
|
evaluations, and assignments will be removed.
|
||||||
|
</DialogDescription>
|
||||||
|
</DialogHeader>
|
||||||
|
<div className="space-y-4 py-4">
|
||||||
|
<div className="space-y-2">
|
||||||
|
<Label htmlFor="delete-password">
|
||||||
|
Enter your password to confirm
|
||||||
|
</Label>
|
||||||
|
<Input
|
||||||
|
id="delete-password"
|
||||||
|
type="password"
|
||||||
|
value={deletePassword}
|
||||||
|
onChange={(e) => setDeletePassword(e.target.value)}
|
||||||
|
placeholder="Your password"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<DialogFooter>
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
onClick={() => {
|
||||||
|
setDeleteDialogOpen(false)
|
||||||
|
setDeletePassword('')
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="destructive"
|
||||||
|
onClick={handleDeleteAccount}
|
||||||
|
disabled={deleteAccount.isPending || !deletePassword}
|
||||||
|
>
|
||||||
|
{deleteAccount.isPending ? (
|
||||||
|
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
||||||
|
) : (
|
||||||
|
<Trash2 className="mr-2 h-4 w-4" />
|
||||||
|
)}
|
||||||
|
Delete Account
|
||||||
|
</Button>
|
||||||
|
</DialogFooter>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
@ -2,6 +2,7 @@
|
||||||
|
|
||||||
import { useState } from 'react'
|
import { useState } from 'react'
|
||||||
import Link from 'next/link'
|
import Link from 'next/link'
|
||||||
|
import type { Route } from 'next'
|
||||||
import { usePathname } from 'next/navigation'
|
import { usePathname } from 'next/navigation'
|
||||||
import { signOut } from 'next-auth/react'
|
import { signOut } from 'next-auth/react'
|
||||||
import { cn } from '@/lib/utils'
|
import { cn } from '@/lib/utils'
|
||||||
|
|
@ -29,6 +30,7 @@ import {
|
||||||
Handshake,
|
Handshake,
|
||||||
FileText,
|
FileText,
|
||||||
CircleDot,
|
CircleDot,
|
||||||
|
GraduationCap,
|
||||||
History,
|
History,
|
||||||
User,
|
User,
|
||||||
} from 'lucide-react'
|
} from 'lucide-react'
|
||||||
|
|
@ -66,6 +68,11 @@ const navigation = [
|
||||||
href: '/admin/users' as const,
|
href: '/admin/users' as const,
|
||||||
icon: Users,
|
icon: Users,
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
name: 'Mentors',
|
||||||
|
href: '/admin/mentors' as const,
|
||||||
|
icon: GraduationCap,
|
||||||
|
},
|
||||||
{
|
{
|
||||||
name: 'Reports',
|
name: 'Reports',
|
||||||
href: '/admin/reports' as const,
|
href: '/admin/reports' as const,
|
||||||
|
|
@ -176,7 +183,7 @@ export function AdminSidebar({ user }: AdminSidebarProps) {
|
||||||
return (
|
return (
|
||||||
<Link
|
<Link
|
||||||
key={item.name}
|
key={item.name}
|
||||||
href={item.href}
|
href={item.href as Route}
|
||||||
onClick={() => setIsMobileMenuOpen(false)}
|
onClick={() => setIsMobileMenuOpen(false)}
|
||||||
className={cn(
|
className={cn(
|
||||||
'group flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-all duration-150',
|
'group flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-all duration-150',
|
||||||
|
|
@ -278,7 +285,7 @@ export function AdminSidebar({ user }: AdminSidebarProps) {
|
||||||
|
|
||||||
<DropdownMenuItem asChild>
|
<DropdownMenuItem asChild>
|
||||||
<Link
|
<Link
|
||||||
href="/admin/settings"
|
href={"/settings/profile" as Route}
|
||||||
className="flex cursor-pointer items-center gap-2.5 rounded-md px-2 py-2"
|
className="flex cursor-pointer items-center gap-2.5 rounded-md px-2 py-2"
|
||||||
>
|
>
|
||||||
<User className="h-4 w-4 text-muted-foreground" />
|
<User className="h-4 w-4 text-muted-foreground" />
|
||||||
|
|
|
||||||
|
|
@ -14,7 +14,8 @@ import {
|
||||||
DropdownMenuSeparator,
|
DropdownMenuSeparator,
|
||||||
DropdownMenuTrigger,
|
DropdownMenuTrigger,
|
||||||
} from '@/components/ui/dropdown-menu'
|
} from '@/components/ui/dropdown-menu'
|
||||||
import { BookOpen, ClipboardList, Home, LogOut, Menu, User, X } from 'lucide-react'
|
import type { Route } from 'next'
|
||||||
|
import { BookOpen, ClipboardList, Home, LogOut, Menu, Settings, User, X } from 'lucide-react'
|
||||||
import { getInitials } from '@/lib/utils'
|
import { getInitials } from '@/lib/utils'
|
||||||
import { Logo } from '@/components/shared/logo'
|
import { Logo } from '@/components/shared/logo'
|
||||||
|
|
||||||
|
|
@ -105,6 +106,13 @@ export function JuryNav({ user }: JuryNavProps) {
|
||||||
{user.email}
|
{user.email}
|
||||||
</DropdownMenuItem>
|
</DropdownMenuItem>
|
||||||
<DropdownMenuSeparator />
|
<DropdownMenuSeparator />
|
||||||
|
<DropdownMenuItem asChild>
|
||||||
|
<Link href={"/settings/profile" as Route} className="flex cursor-pointer items-center">
|
||||||
|
<Settings className="mr-2 h-4 w-4" />
|
||||||
|
Profile Settings
|
||||||
|
</Link>
|
||||||
|
</DropdownMenuItem>
|
||||||
|
<DropdownMenuSeparator />
|
||||||
<DropdownMenuItem
|
<DropdownMenuItem
|
||||||
onClick={() => signOut({ callbackUrl: '/login' })}
|
onClick={() => signOut({ callbackUrl: '/login' })}
|
||||||
className="text-destructive focus:text-destructive"
|
className="text-destructive focus:text-destructive"
|
||||||
|
|
|
||||||
|
|
@ -15,7 +15,7 @@ import {
|
||||||
DropdownMenuSeparator,
|
DropdownMenuSeparator,
|
||||||
DropdownMenuTrigger,
|
DropdownMenuTrigger,
|
||||||
} from '@/components/ui/dropdown-menu'
|
} from '@/components/ui/dropdown-menu'
|
||||||
import { BookOpen, Home, LogOut, Menu, User, Users, X } from 'lucide-react'
|
import { BookOpen, Home, LogOut, Menu, Settings, User, Users, X } from 'lucide-react'
|
||||||
import { getInitials } from '@/lib/utils'
|
import { getInitials } from '@/lib/utils'
|
||||||
import { Logo } from '@/components/shared/logo'
|
import { Logo } from '@/components/shared/logo'
|
||||||
|
|
||||||
|
|
@ -106,6 +106,13 @@ export function MentorNav({ user }: MentorNavProps) {
|
||||||
{user.email}
|
{user.email}
|
||||||
</DropdownMenuItem>
|
</DropdownMenuItem>
|
||||||
<DropdownMenuSeparator />
|
<DropdownMenuSeparator />
|
||||||
|
<DropdownMenuItem asChild>
|
||||||
|
<Link href={"/settings/profile" as Route} className="flex cursor-pointer items-center">
|
||||||
|
<Settings className="mr-2 h-4 w-4" />
|
||||||
|
Profile Settings
|
||||||
|
</Link>
|
||||||
|
</DropdownMenuItem>
|
||||||
|
<DropdownMenuSeparator />
|
||||||
<DropdownMenuItem
|
<DropdownMenuItem
|
||||||
onClick={() => signOut({ callbackUrl: '/login' })}
|
onClick={() => signOut({ callbackUrl: '/login' })}
|
||||||
className="text-destructive focus:text-destructive"
|
className="text-destructive focus:text-destructive"
|
||||||
|
|
|
||||||
|
|
@ -14,7 +14,8 @@ import {
|
||||||
DropdownMenuSeparator,
|
DropdownMenuSeparator,
|
||||||
DropdownMenuTrigger,
|
DropdownMenuTrigger,
|
||||||
} from '@/components/ui/dropdown-menu'
|
} from '@/components/ui/dropdown-menu'
|
||||||
import { Home, BarChart3, Menu, X, LogOut, Eye } from 'lucide-react'
|
import type { Route } from 'next'
|
||||||
|
import { Home, BarChart3, Menu, X, LogOut, Eye, Settings } from 'lucide-react'
|
||||||
import { getInitials } from '@/lib/utils'
|
import { getInitials } from '@/lib/utils'
|
||||||
import { Logo } from '@/components/shared/logo'
|
import { Logo } from '@/components/shared/logo'
|
||||||
|
|
||||||
|
|
@ -92,6 +93,13 @@ export function ObserverNav({ user }: ObserverNavProps) {
|
||||||
{user.email}
|
{user.email}
|
||||||
</DropdownMenuItem>
|
</DropdownMenuItem>
|
||||||
<DropdownMenuSeparator />
|
<DropdownMenuSeparator />
|
||||||
|
<DropdownMenuItem asChild>
|
||||||
|
<Link href={"/settings/profile" as Route} className="flex cursor-pointer items-center">
|
||||||
|
<Settings className="mr-2 h-4 w-4" />
|
||||||
|
Profile Settings
|
||||||
|
</Link>
|
||||||
|
</DropdownMenuItem>
|
||||||
|
<DropdownMenuSeparator />
|
||||||
<DropdownMenuItem
|
<DropdownMenuItem
|
||||||
onClick={() => signOut({ callbackUrl: '/login' })}
|
onClick={() => signOut({ callbackUrl: '/login' })}
|
||||||
className="text-destructive focus:text-destructive"
|
className="text-destructive focus:text-destructive"
|
||||||
|
|
|
||||||
|
|
@ -29,8 +29,8 @@ const BRAND = {
|
||||||
textMuted: '#6b7280',
|
textMuted: '#6b7280',
|
||||||
}
|
}
|
||||||
|
|
||||||
const getSmallLogoUrl = () => `${process.env.NEXTAUTH_URL || 'http://localhost:3000'}/images/MOPC-blue-small.png`
|
const getSmallLogoUrl = () => 'https://s3.monaco-opc.com/public/MOPC-blue-small.png'
|
||||||
const getBigLogoUrl = () => `${process.env.NEXTAUTH_URL || 'http://localhost:3000'}/images/MOPC-blue-long.png`
|
const getBigLogoUrl = () => 'https://s3.monaco-opc.com/public/MOPC-blue-long.png'
|
||||||
|
|
||||||
// =============================================================================
|
// =============================================================================
|
||||||
// Email Template Wrapper & Helpers
|
// Email Template Wrapper & Helpers
|
||||||
|
|
@ -60,8 +60,8 @@ function getEmailWrapper(content: string): string {
|
||||||
</noscript>
|
</noscript>
|
||||||
<![endif]-->
|
<![endif]-->
|
||||||
</head>
|
</head>
|
||||||
<body style="margin: 0; padding: 0; background-color: ${BRAND.lightGray}; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased;">
|
<body style="margin: 0; padding: 0; background-color: ${BRAND.darkBlue}; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased;">
|
||||||
<table role="presentation" width="100%" cellspacing="0" cellpadding="0" border="0" style="background-color: ${BRAND.lightGray};">
|
<table role="presentation" width="100%" cellspacing="0" cellpadding="0" border="0" style="background-image: url('https://s3.monaco-opc.com/public/ocean.png'); background-size: cover; background-position: center top; background-repeat: no-repeat; background-color: ${BRAND.darkBlue};">
|
||||||
<tr>
|
<tr>
|
||||||
<td align="center" style="padding: 40px 20px;">
|
<td align="center" style="padding: 40px 20px;">
|
||||||
<!-- Main Container -->
|
<!-- Main Container -->
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,6 @@
|
||||||
import { z } from 'zod'
|
import { z } from 'zod'
|
||||||
import { TRPCError } from '@trpc/server'
|
import { TRPCError } from '@trpc/server'
|
||||||
|
import type { Prisma } from '@prisma/client'
|
||||||
import { router, protectedProcedure, adminProcedure, superAdminProcedure, publicProcedure } from '../trpc'
|
import { router, protectedProcedure, adminProcedure, superAdminProcedure, publicProcedure } from '../trpc'
|
||||||
import { sendInvitationEmail, sendMagicLinkEmail } from '@/lib/email'
|
import { sendInvitationEmail, sendMagicLinkEmail } from '@/lib/email'
|
||||||
import { hashPassword, validatePassword } from '@/lib/password'
|
import { hashPassword, validatePassword } from '@/lib/password'
|
||||||
|
|
@ -18,6 +19,10 @@ export const userRouter = router({
|
||||||
role: true,
|
role: true,
|
||||||
status: true,
|
status: true,
|
||||||
expertiseTags: true,
|
expertiseTags: true,
|
||||||
|
metadataJson: true,
|
||||||
|
phoneNumber: true,
|
||||||
|
notificationPreference: true,
|
||||||
|
profileImageKey: true,
|
||||||
createdAt: true,
|
createdAt: true,
|
||||||
lastLoginAt: true,
|
lastLoginAt: true,
|
||||||
},
|
},
|
||||||
|
|
@ -31,15 +36,96 @@ export const userRouter = router({
|
||||||
.input(
|
.input(
|
||||||
z.object({
|
z.object({
|
||||||
name: z.string().min(1).max(255).optional(),
|
name: z.string().min(1).max(255).optional(),
|
||||||
|
bio: z.string().max(1000).optional(),
|
||||||
|
phoneNumber: z.string().max(20).optional().nullable(),
|
||||||
|
notificationPreference: z.enum(['EMAIL', 'WHATSAPP', 'BOTH', 'NONE']).optional(),
|
||||||
})
|
})
|
||||||
)
|
)
|
||||||
.mutation(async ({ ctx, input }) => {
|
.mutation(async ({ ctx, input }) => {
|
||||||
|
const { bio, ...directFields } = input
|
||||||
|
|
||||||
|
// If bio is provided, merge it into metadataJson
|
||||||
|
let metadataJson: Prisma.InputJsonValue | undefined
|
||||||
|
if (bio !== undefined) {
|
||||||
|
const currentUser = await ctx.prisma.user.findUniqueOrThrow({
|
||||||
|
where: { id: ctx.user.id },
|
||||||
|
select: { metadataJson: true },
|
||||||
|
})
|
||||||
|
const currentMeta = (currentUser.metadataJson as Record<string, string>) || {}
|
||||||
|
metadataJson = { ...currentMeta, bio } as Prisma.InputJsonValue
|
||||||
|
}
|
||||||
|
|
||||||
return ctx.prisma.user.update({
|
return ctx.prisma.user.update({
|
||||||
where: { id: ctx.user.id },
|
where: { id: ctx.user.id },
|
||||||
data: input,
|
data: {
|
||||||
|
...directFields,
|
||||||
|
...(metadataJson !== undefined && { metadataJson }),
|
||||||
|
},
|
||||||
})
|
})
|
||||||
}),
|
}),
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Delete own account (requires password confirmation)
|
||||||
|
*/
|
||||||
|
deleteAccount: protectedProcedure
|
||||||
|
.input(
|
||||||
|
z.object({
|
||||||
|
password: z.string().min(1),
|
||||||
|
})
|
||||||
|
)
|
||||||
|
.mutation(async ({ ctx, input }) => {
|
||||||
|
// Get current user with password hash
|
||||||
|
const user = await ctx.prisma.user.findUniqueOrThrow({
|
||||||
|
where: { id: ctx.user.id },
|
||||||
|
select: { id: true, email: true, passwordHash: true, role: true },
|
||||||
|
})
|
||||||
|
|
||||||
|
// Prevent super admins from self-deleting
|
||||||
|
if (user.role === 'SUPER_ADMIN') {
|
||||||
|
throw new TRPCError({
|
||||||
|
code: 'FORBIDDEN',
|
||||||
|
message: 'Super admins cannot delete their own account',
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!user.passwordHash) {
|
||||||
|
throw new TRPCError({
|
||||||
|
code: 'BAD_REQUEST',
|
||||||
|
message: 'No password set. Please set a password first.',
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// Verify password
|
||||||
|
const { verifyPassword } = await import('@/lib/password')
|
||||||
|
const isValid = await verifyPassword(input.password, user.passwordHash)
|
||||||
|
if (!isValid) {
|
||||||
|
throw new TRPCError({
|
||||||
|
code: 'UNAUTHORIZED',
|
||||||
|
message: 'Password is incorrect',
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// Audit log before deletion
|
||||||
|
await ctx.prisma.auditLog.create({
|
||||||
|
data: {
|
||||||
|
userId: ctx.user.id,
|
||||||
|
action: 'DELETE_OWN_ACCOUNT',
|
||||||
|
entityType: 'User',
|
||||||
|
entityId: ctx.user.id,
|
||||||
|
detailsJson: { email: user.email },
|
||||||
|
ipAddress: ctx.ip,
|
||||||
|
userAgent: ctx.userAgent,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
// Delete the user
|
||||||
|
await ctx.prisma.user.delete({
|
||||||
|
where: { id: ctx.user.id },
|
||||||
|
})
|
||||||
|
|
||||||
|
return { success: true }
|
||||||
|
}),
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* List all users (admin only)
|
* List all users (admin only)
|
||||||
*/
|
*/
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue