297 lines
15 KiB
TypeScript
297 lines
15 KiB
TypeScript
|
'use client'
|
||
|
|
|
||
|
|
import { useState, useCallback, useMemo } from 'react'
|
||
|
|
import Link from 'next/link'
|
||
|
|
import { useRouter } from 'next/navigation'
|
||
|
|
import Papa from 'papaparse'
|
||
|
|
import { trpc } from '@/lib/trpc/client'
|
||
|
|
import { Button } from '@/components/ui/button'
|
||
|
|
import {
|
||
|
|
Card,
|
||
|
|
CardContent,
|
||
|
|
CardDescription,
|
||
|
|
CardHeader,
|
||
|
|
CardTitle,
|
||
|
|
} from '@/components/ui/card'
|
||
|
|
import { Input } from '@/components/ui/input'
|
||
|
|
import { Label } from '@/components/ui/label'
|
||
|
|
import { Textarea } from '@/components/ui/textarea'
|
||
|
|
import { Badge } from '@/components/ui/badge'
|
||
|
|
import { Progress } from '@/components/ui/progress'
|
||
|
|
import {
|
||
|
|
Select,
|
||
|
|
SelectContent,
|
||
|
|
SelectItem,
|
||
|
|
SelectTrigger,
|
||
|
|
SelectValue,
|
||
|
|
} from '@/components/ui/select'
|
||
|
|
import {
|
||
|
|
Table,
|
||
|
|
TableBody,
|
||
|
|
TableCell,
|
||
|
|
TableHead,
|
||
|
|
TableHeader,
|
||
|
|
TableRow,
|
||
|
|
} from '@/components/ui/table'
|
||
|
|
import {
|
||
|
|
ArrowLeft,
|
||
|
|
ArrowRight,
|
||
|
|
AlertCircle,
|
||
|
|
CheckCircle2,
|
||
|
|
Loader2,
|
||
|
|
Users,
|
||
|
|
X,
|
||
|
|
Mail,
|
||
|
|
FileSpreadsheet,
|
||
|
|
} from 'lucide-react'
|
||
|
|
import { cn } from '@/lib/utils'
|
||
|
|
|
||
|
|
type Step = 'input' | 'preview' | 'sending' | 'complete'
|
||
|
|
type Role = 'JURY_MEMBER' | 'MENTOR' | 'OBSERVER'
|
||
|
|
|
||
|
|
interface ParsedUser {
|
||
|
|
email: string
|
||
|
|
name?: string
|
||
|
|
isValid: boolean
|
||
|
|
error?: string
|
||
|
|
isDuplicate?: boolean
|
||
|
|
}
|
||
|
|
|
||
|
|
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
|
||
|
|
|
||
|
|
export default function MemberInvitePage() {
|
||
|
|
const router = useRouter()
|
||
|
|
const [step, setStep] = useState<Step>('input')
|
||
|
|
const [inputMethod, setInputMethod] = useState<'textarea' | 'csv'>('textarea')
|
||
|
|
const [emailsText, setEmailsText] = useState('')
|
||
|
|
const [csvFile, setCsvFile] = useState<File | null>(null)
|
||
|
|
const [role, setRole] = useState<Role>('JURY_MEMBER')
|
||
|
|
const [expertiseTags, setExpertiseTags] = useState<string[]>([])
|
||
|
|
const [tagInput, setTagInput] = useState('')
|
||
|
|
const [parsedUsers, setParsedUsers] = useState<ParsedUser[]>([])
|
||
|
|
const [sendProgress, setSendProgress] = useState(0)
|
||
|
|
const [result, setResult] = useState<{ created: number; skipped: number } | null>(null)
|
||
|
|
|
||
|
|
const bulkCreate = trpc.user.bulkCreate.useMutation()
|
||
|
|
|
||
|
|
const parseEmailsFromText = useCallback((text: string): ParsedUser[] => {
|
||
|
|
const lines = text.split(/[\n,;]+/).map((line) => line.trim()).filter(Boolean)
|
||
|
|
const seenEmails = new Set<string>()
|
||
|
|
return lines.map((line) => {
|
||
|
|
const matchWithName = line.match(/^(.+?)\s*<(.+?)>$/)
|
||
|
|
const email = matchWithName ? matchWithName[2].trim().toLowerCase() : line.toLowerCase()
|
||
|
|
const name = matchWithName ? matchWithName[1].trim() : undefined
|
||
|
|
const isValidFormat = emailRegex.test(email)
|
||
|
|
const isDuplicate = seenEmails.has(email)
|
||
|
|
if (isValidFormat && !isDuplicate) seenEmails.add(email)
|
||
|
|
return {
|
||
|
|
email, name, isValid: isValidFormat && !isDuplicate, isDuplicate,
|
||
|
|
error: !isValidFormat ? 'Invalid email format' : isDuplicate ? 'Duplicate email' : undefined,
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}, [])
|
||
|
|
|
||
|
|
const handleCSVUpload = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
|
||
|
|
const file = e.target.files?.[0]
|
||
|
|
if (!file) return
|
||
|
|
setCsvFile(file)
|
||
|
|
Papa.parse<Record<string, string>>(file, {
|
||
|
|
header: true, skipEmptyLines: true,
|
||
|
|
complete: (results) => {
|
||
|
|
const seenEmails = new Set<string>()
|
||
|
|
const users: ParsedUser[] = results.data.map((row) => {
|
||
|
|
const emailKey = Object.keys(row).find((key) => key.toLowerCase() === 'email' || key.toLowerCase().includes('email'))
|
||
|
|
const nameKey = Object.keys(row).find((key) => key.toLowerCase() === 'name' || key.toLowerCase().includes('name'))
|
||
|
|
const email = emailKey ? row[emailKey]?.trim().toLowerCase() : ''
|
||
|
|
const name = nameKey ? row[nameKey]?.trim() : undefined
|
||
|
|
const isValidFormat = emailRegex.test(email)
|
||
|
|
const isDuplicate = email ? seenEmails.has(email) : false
|
||
|
|
if (isValidFormat && !isDuplicate && email) seenEmails.add(email)
|
||
|
|
return {
|
||
|
|
email, name, isValid: isValidFormat && !isDuplicate, isDuplicate,
|
||
|
|
error: !email ? 'No email found' : !isValidFormat ? 'Invalid email format' : isDuplicate ? 'Duplicate email' : undefined,
|
||
|
|
}
|
||
|
|
})
|
||
|
|
setParsedUsers(users.filter((u) => u.email))
|
||
|
|
setStep('preview')
|
||
|
|
},
|
||
|
|
})
|
||
|
|
}, [])
|
||
|
|
|
||
|
|
const handleTextProceed = () => { setParsedUsers(parseEmailsFromText(emailsText)); setStep('preview') }
|
||
|
|
const addTag = () => { const tag = tagInput.trim(); if (tag && !expertiseTags.includes(tag)) { setExpertiseTags([...expertiseTags, tag]); setTagInput('') } }
|
||
|
|
const removeTag = (tag: string) => setExpertiseTags(expertiseTags.filter((t) => t !== tag))
|
||
|
|
|
||
|
|
const summary = useMemo(() => {
|
||
|
|
const validUsers = parsedUsers.filter((u) => u.isValid)
|
||
|
|
const invalidUsers = parsedUsers.filter((u) => !u.isValid)
|
||
|
|
const duplicateUsers = parsedUsers.filter((u) => u.isDuplicate)
|
||
|
|
return { total: parsedUsers.length, valid: validUsers.length, invalid: invalidUsers.length, duplicates: duplicateUsers.length, validUsers, invalidUsers, duplicateUsers }
|
||
|
|
}, [parsedUsers])
|
||
|
|
|
||
|
|
const removeInvalidUsers = () => setParsedUsers(parsedUsers.filter((u) => u.isValid))
|
||
|
|
|
||
|
|
const handleSendInvites = async () => {
|
||
|
|
if (summary.valid === 0) return
|
||
|
|
setStep('sending'); setSendProgress(0)
|
||
|
|
try {
|
||
|
|
const result = await bulkCreate.mutateAsync({
|
||
|
|
users: summary.validUsers.map((u) => ({ email: u.email, name: u.name, role, expertiseTags: expertiseTags.length > 0 ? expertiseTags : undefined })),
|
||
|
|
})
|
||
|
|
setSendProgress(100); setResult(result); setStep('complete')
|
||
|
|
} catch { setStep('preview') }
|
||
|
|
}
|
||
|
|
|
||
|
|
const resetForm = () => { setStep('input'); setEmailsText(''); setCsvFile(null); setParsedUsers([]); setResult(null); setSendProgress(0) }
|
||
|
|
|
||
|
|
const steps: Array<{ key: Step; label: string }> = [
|
||
|
|
{ key: 'input', label: 'Input' }, { key: 'preview', label: 'Preview' },
|
||
|
|
{ key: 'sending', label: 'Send' }, { key: 'complete', label: 'Done' },
|
||
|
|
]
|
||
|
|
const currentStepIndex = steps.findIndex((s) => s.key === step)
|
||
|
|
|
||
|
|
const renderStep = () => {
|
||
|
|
switch (step) {
|
||
|
|
case 'input':
|
||
|
|
return (
|
||
|
|
<Card>
|
||
|
|
<CardHeader>
|
||
|
|
<CardTitle>Invite Members</CardTitle>
|
||
|
|
<CardDescription>Add email addresses to invite new members to the platform</CardDescription>
|
||
|
|
</CardHeader>
|
||
|
|
<CardContent className="space-y-6">
|
||
|
|
<div className="flex gap-2">
|
||
|
|
<Button type="button" variant={inputMethod === 'textarea' ? 'default' : 'outline'} size="sm" onClick={() => setInputMethod('textarea')}><Mail className="mr-2 h-4 w-4" />Enter Emails</Button>
|
||
|
|
<Button type="button" variant={inputMethod === 'csv' ? 'default' : 'outline'} size="sm" onClick={() => setInputMethod('csv')}><FileSpreadsheet className="mr-2 h-4 w-4" />Upload CSV</Button>
|
||
|
|
</div>
|
||
|
|
{inputMethod === 'textarea' ? (
|
||
|
|
<div className="space-y-2">
|
||
|
|
<Label htmlFor="emails">Email Addresses</Label>
|
||
|
|
<Textarea id="emails" value={emailsText} onChange={(e) => setEmailsText(e.target.value)} placeholder="Enter email addresses, one per line or comma-separated." rows={8} maxLength={10000} className="font-mono text-sm" />
|
||
|
|
</div>
|
||
|
|
) : (
|
||
|
|
<div className="space-y-2">
|
||
|
|
<Label>CSV File</Label>
|
||
|
|
<div className={cn('border-2 border-dashed rounded-lg p-6 text-center cursor-pointer transition-colors', 'hover:border-primary/50')} onClick={() => document.getElementById('csv-input')?.click()}>
|
||
|
|
<FileSpreadsheet className="mx-auto h-10 w-10 text-muted-foreground" />
|
||
|
|
<p className="mt-2 font-medium">{csvFile ? csvFile.name : 'Drop CSV file here or click to browse'}</p>
|
||
|
|
<Input id="csv-input" type="file" accept=".csv" onChange={handleCSVUpload} className="hidden" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
<div className="space-y-2">
|
||
|
|
<Label htmlFor="role">Role</Label>
|
||
|
|
<Select value={role} onValueChange={(v) => setRole(v as Role)}>
|
||
|
|
<SelectTrigger id="role"><SelectValue /></SelectTrigger>
|
||
|
|
<SelectContent>
|
||
|
|
<SelectItem value="JURY_MEMBER">Jury Member</SelectItem>
|
||
|
|
<SelectItem value="MENTOR">Mentor</SelectItem>
|
||
|
|
<SelectItem value="OBSERVER">Observer</SelectItem>
|
||
|
|
</SelectContent>
|
||
|
|
</Select>
|
||
|
|
</div>
|
||
|
|
<div className="space-y-2">
|
||
|
|
<Label htmlFor="expertise">Expertise Tags (Optional)</Label>
|
||
|
|
<div className="flex gap-2">
|
||
|
|
<Input id="expertise" value={tagInput} onChange={(e) => setTagInput(e.target.value)} placeholder="e.g., Marine Biology" onKeyDown={(e) => { if (e.key === 'Enter') { e.preventDefault(); addTag() } }} />
|
||
|
|
<Button type="button" variant="outline" onClick={addTag}>Add</Button>
|
||
|
|
</div>
|
||
|
|
{expertiseTags.length > 0 && (
|
||
|
|
<div className="flex flex-wrap gap-2 mt-2">
|
||
|
|
{expertiseTags.map((tag) => (
|
||
|
|
<Badge key={tag} variant="secondary" className="gap-1">{tag}<button type="button" onClick={() => removeTag(tag)} className="ml-1 hover:text-destructive"><X className="h-3 w-3" /></button></Badge>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
<div className="flex justify-between pt-4">
|
||
|
|
<Button variant="outline" asChild><Link href="/admin/members"><ArrowLeft className="mr-2 h-4 w-4" />Cancel</Link></Button>
|
||
|
|
<Button onClick={handleTextProceed} disabled={inputMethod === 'textarea' && !emailsText.trim()}>Preview<ArrowRight className="ml-2 h-4 w-4" /></Button>
|
||
|
|
</div>
|
||
|
|
</CardContent>
|
||
|
|
</Card>
|
||
|
|
)
|
||
|
|
case 'preview':
|
||
|
|
return (
|
||
|
|
<Card>
|
||
|
|
<CardHeader><CardTitle>Preview Invitations</CardTitle><CardDescription>Review the list of users to invite</CardDescription></CardHeader>
|
||
|
|
<CardContent className="space-y-6">
|
||
|
|
<div className="grid gap-4 sm:grid-cols-3">
|
||
|
|
<div className="rounded-lg bg-muted p-4 text-center"><p className="text-3xl font-bold">{summary.total}</p><p className="text-sm text-muted-foreground">Total</p></div>
|
||
|
|
<div className="rounded-lg bg-green-500/10 p-4 text-center"><p className="text-3xl font-bold text-green-600">{summary.valid}</p><p className="text-sm text-muted-foreground">Valid</p></div>
|
||
|
|
<div className="rounded-lg bg-red-500/10 p-4 text-center"><p className="text-3xl font-bold text-red-600">{summary.invalid}</p><p className="text-sm text-muted-foreground">Invalid</p></div>
|
||
|
|
</div>
|
||
|
|
{summary.invalid > 0 && (
|
||
|
|
<div className="flex items-start gap-3 rounded-lg bg-amber-500/10 p-4 text-amber-700">
|
||
|
|
<AlertCircle className="h-5 w-5 shrink-0 mt-0.5" /><div className="flex-1"><p className="font-medium">{summary.invalid} email(s) have issues</p></div>
|
||
|
|
<Button variant="outline" size="sm" onClick={removeInvalidUsers} className="shrink-0">Remove Invalid</Button>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
<div className="rounded-lg border max-h-80 overflow-y-auto">
|
||
|
|
<Table>
|
||
|
|
<TableHeader><TableRow><TableHead>Email</TableHead><TableHead>Name</TableHead><TableHead>Status</TableHead></TableRow></TableHeader>
|
||
|
|
<TableBody>
|
||
|
|
{parsedUsers.map((user, index) => (
|
||
|
|
<TableRow key={index} className={cn(!user.isValid && 'bg-red-500/5')}>
|
||
|
|
<TableCell className="font-mono text-sm">{user.email}</TableCell>
|
||
|
|
<TableCell>{user.name || '-'}</TableCell>
|
||
|
|
<TableCell>{user.isValid ? <Badge variant="outline" className="text-green-600"><CheckCircle2 className="mr-1 h-3 w-3" />Valid</Badge> : <Badge variant="destructive">{user.error}</Badge>}</TableCell>
|
||
|
|
</TableRow>
|
||
|
|
))}
|
||
|
|
</TableBody>
|
||
|
|
</Table>
|
||
|
|
</div>
|
||
|
|
<div className="flex justify-between pt-4">
|
||
|
|
<Button variant="outline" onClick={() => { setParsedUsers([]); setStep('input') }}><ArrowLeft className="mr-2 h-4 w-4" />Back</Button>
|
||
|
|
<Button onClick={handleSendInvites} disabled={summary.valid === 0 || bulkCreate.isPending}>
|
||
|
|
{bulkCreate.isPending ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : <Users className="mr-2 h-4 w-4" />}
|
||
|
|
Create {summary.valid} Member{summary.valid !== 1 ? 's' : ''}
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
{bulkCreate.error && <div className="flex items-center gap-2 rounded-lg bg-destructive/10 p-4 text-destructive"><AlertCircle className="h-5 w-5" /><span>{bulkCreate.error.message}</span></div>}
|
||
|
|
</CardContent>
|
||
|
|
</Card>
|
||
|
|
)
|
||
|
|
case 'sending':
|
||
|
|
return (
|
||
|
|
<Card><CardContent className="flex flex-col items-center justify-center py-12"><Loader2 className="h-12 w-12 animate-spin text-primary" /><p className="mt-4 font-medium">Creating members...</p><Progress value={sendProgress} className="mt-4 w-48" /></CardContent></Card>
|
||
|
|
)
|
||
|
|
case 'complete':
|
||
|
|
return (
|
||
|
|
<Card>
|
||
|
|
<CardContent className="flex flex-col items-center justify-center py-12">
|
||
|
|
<div className="flex h-16 w-16 items-center justify-center rounded-full bg-green-500/10"><CheckCircle2 className="h-8 w-8 text-green-600" /></div>
|
||
|
|
<p className="mt-4 text-xl font-semibold">Members Created!</p>
|
||
|
|
<p className="text-muted-foreground text-center max-w-sm mt-2">{result?.created} member{result?.created !== 1 ? 's' : ''} created successfully.{result?.skipped ? ` ${result.skipped} skipped (already exist).` : ''}</p>
|
||
|
|
<div className="mt-6 flex gap-3">
|
||
|
|
<Button variant="outline" asChild><Link href="/admin/members">View Members</Link></Button>
|
||
|
|
<Button onClick={resetForm}>Invite More</Button>
|
||
|
|
</div>
|
||
|
|
</CardContent>
|
||
|
|
</Card>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="space-y-6">
|
||
|
|
<div className="flex items-center gap-4">
|
||
|
|
<Button variant="ghost" asChild className="-ml-4"><Link href="/admin/members"><ArrowLeft className="mr-2 h-4 w-4" />Back to Members</Link></Button>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<h1 className="text-2xl font-semibold tracking-tight">Invite Members</h1>
|
||
|
|
<p className="text-muted-foreground">Add new members to the platform</p>
|
||
|
|
</div>
|
||
|
|
<div className="flex items-center justify-center gap-2">
|
||
|
|
{steps.map((s, index) => (
|
||
|
|
<div key={s.key} className="flex items-center">
|
||
|
|
{index > 0 && <div className={cn('h-0.5 w-8 mx-1', index <= currentStepIndex ? 'bg-primary' : 'bg-muted')} />}
|
||
|
|
<div className={cn('flex h-8 w-8 items-center justify-center rounded-full text-sm font-medium', index === currentStepIndex ? 'bg-primary text-primary-foreground' : index < currentStepIndex ? 'bg-primary/20 text-primary' : 'bg-muted text-muted-foreground')}>{index + 1}</div>
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
{renderStep()}
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|