Platform polish: bulk invite, file requirements, filtering redesign, UX fixes
- F1: Set seed jury/mentors/observers to NONE status (not invited), remove passwords - F2: Add bulk invite UI with checkbox selection and floating toolbar - F3: Add getProjectRequirements backend query + requirement slots on project detail - F4: Redesign filtering section: AI criteria textarea, "What AI sees" card, field-aware eligibility rules with human-readable previews - F5: Auto-redirect to pipeline detail when only one pipeline exists - F6: Make project names clickable in pipeline intake panel - F7: Fix pipeline creation error: edition context fallback + .min(1) validation - Pipeline wizard sections: add isActive locking, info tooltips, UX improvements Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -1,12 +1,13 @@
|
||||
'use client'
|
||||
|
||||
import { useState, useCallback, useEffect } from 'react'
|
||||
import { useState, useCallback, useEffect, useMemo } from 'react'
|
||||
import Link from 'next/link'
|
||||
import { useSearchParams, usePathname } from 'next/navigation'
|
||||
import { trpc } from '@/lib/trpc/client'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Checkbox } from '@/components/ui/checkbox'
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
@@ -27,9 +28,10 @@ import { Skeleton } from '@/components/ui/skeleton'
|
||||
import { UserAvatar } from '@/components/shared/user-avatar'
|
||||
import { UserActions, UserMobileActions } from '@/components/admin/user-actions'
|
||||
import { Pagination } from '@/components/shared/pagination'
|
||||
import { Plus, Users, Search, Mail, Loader2 } from 'lucide-react'
|
||||
import { Plus, Users, Search, Mail, Loader2, X, Send } from 'lucide-react'
|
||||
import { toast } from 'sonner'
|
||||
import { formatRelativeTime } from '@/lib/utils'
|
||||
import { AnimatePresence, motion } from 'motion/react'
|
||||
type RoleValue = 'SUPER_ADMIN' | 'PROGRAM_ADMIN' | 'JURY_MEMBER' | 'MENTOR' | 'OBSERVER'
|
||||
|
||||
type TabKey = 'all' | 'jury' | 'mentors' | 'observers' | 'admins'
|
||||
@@ -131,6 +133,8 @@ export function MembersContent() {
|
||||
|
||||
const roles = TAB_ROLES[tab]
|
||||
|
||||
const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set())
|
||||
|
||||
const { data: currentUser } = trpc.user.me.useQuery()
|
||||
const currentUserRole = currentUser?.role as RoleValue | undefined
|
||||
|
||||
@@ -141,6 +145,75 @@ export function MembersContent() {
|
||||
perPage: 20,
|
||||
})
|
||||
|
||||
const utils = trpc.useUtils()
|
||||
|
||||
const bulkInvite = trpc.user.bulkSendInvitations.useMutation({
|
||||
onSuccess: (result) => {
|
||||
const { sent, errors } = result as { sent: number; skipped: number; errors: string[] }
|
||||
if (errors && errors.length > 0) {
|
||||
toast.warning(`Sent ${sent} invitation${sent !== 1 ? 's' : ''}, ${errors.length} failed`)
|
||||
} else {
|
||||
toast.success(`Invitations sent to ${sent} member${sent !== 1 ? 's' : ''}`)
|
||||
}
|
||||
setSelectedIds(new Set())
|
||||
utils.user.list.invalidate()
|
||||
},
|
||||
onError: (error) => {
|
||||
toast.error(error.message || 'Failed to send invitations')
|
||||
},
|
||||
})
|
||||
|
||||
// Users on the current page that are selectable (status NONE)
|
||||
const selectableUsers = useMemo(
|
||||
() => (data?.users ?? []).filter((u) => u.status === 'NONE'),
|
||||
[data?.users]
|
||||
)
|
||||
|
||||
const allSelectableSelected =
|
||||
selectableUsers.length > 0 && selectableUsers.every((u) => selectedIds.has(u.id))
|
||||
|
||||
const someSelectableSelected =
|
||||
selectableUsers.some((u) => selectedIds.has(u.id)) && !allSelectableSelected
|
||||
|
||||
const toggleUser = useCallback((userId: string) => {
|
||||
setSelectedIds((prev) => {
|
||||
const next = new Set(prev)
|
||||
if (next.has(userId)) {
|
||||
next.delete(userId)
|
||||
} else {
|
||||
next.add(userId)
|
||||
}
|
||||
return next
|
||||
})
|
||||
}, [])
|
||||
|
||||
const toggleAll = useCallback(() => {
|
||||
if (allSelectableSelected) {
|
||||
// Deselect all on this page
|
||||
setSelectedIds((prev) => {
|
||||
const next = new Set(prev)
|
||||
for (const u of selectableUsers) {
|
||||
next.delete(u.id)
|
||||
}
|
||||
return next
|
||||
})
|
||||
} else {
|
||||
// Select all selectable on this page
|
||||
setSelectedIds((prev) => {
|
||||
const next = new Set(prev)
|
||||
for (const u of selectableUsers) {
|
||||
next.add(u.id)
|
||||
}
|
||||
return next
|
||||
})
|
||||
}
|
||||
}, [allSelectableSelected, selectableUsers])
|
||||
|
||||
// Clear selection when filters/page change
|
||||
useEffect(() => {
|
||||
setSelectedIds(new Set())
|
||||
}, [tab, search, page])
|
||||
|
||||
const handleTabChange = (value: string) => {
|
||||
updateParams({ tab: value === 'all' ? null : value, page: '1' })
|
||||
}
|
||||
@@ -197,6 +270,15 @@ export function MembersContent() {
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead className="w-10">
|
||||
{selectableUsers.length > 0 && (
|
||||
<Checkbox
|
||||
checked={allSelectableSelected ? true : someSelectableSelected ? 'indeterminate' : false}
|
||||
onCheckedChange={toggleAll}
|
||||
aria-label="Select all uninvited members"
|
||||
/>
|
||||
)}
|
||||
</TableHead>
|
||||
<TableHead>Member</TableHead>
|
||||
<TableHead>Role</TableHead>
|
||||
<TableHead>Expertise</TableHead>
|
||||
@@ -209,6 +291,17 @@ export function MembersContent() {
|
||||
<TableBody>
|
||||
{data.users.map((user) => (
|
||||
<TableRow key={user.id}>
|
||||
<TableCell>
|
||||
{user.status === 'NONE' ? (
|
||||
<Checkbox
|
||||
checked={selectedIds.has(user.id)}
|
||||
onCheckedChange={() => toggleUser(user.id)}
|
||||
aria-label={`Select ${user.name || user.email}`}
|
||||
/>
|
||||
) : (
|
||||
<span />
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<div className="flex items-center gap-3">
|
||||
<UserAvatar
|
||||
@@ -297,6 +390,14 @@ export function MembersContent() {
|
||||
<CardHeader className="pb-3">
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
{user.status === 'NONE' && (
|
||||
<Checkbox
|
||||
checked={selectedIds.has(user.id)}
|
||||
onCheckedChange={() => toggleUser(user.id)}
|
||||
aria-label={`Select ${user.name || user.email}`}
|
||||
className="mt-1"
|
||||
/>
|
||||
)}
|
||||
<UserAvatar
|
||||
user={user}
|
||||
avatarUrl={(user as Record<string, unknown>).avatarUrl as string | undefined}
|
||||
@@ -395,6 +496,50 @@ export function MembersContent() {
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{/* Floating bulk invite toolbar */}
|
||||
<AnimatePresence>
|
||||
{selectedIds.size > 0 && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, y: 20 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
className="fixed bottom-4 left-1/2 -translate-x-1/2 z-50"
|
||||
>
|
||||
<Card className="shadow-lg border-2">
|
||||
<CardContent className="flex items-center gap-3 px-4 py-3">
|
||||
<span className="text-sm font-medium whitespace-nowrap">
|
||||
{selectedIds.size} selected
|
||||
</span>
|
||||
<Button
|
||||
size="sm"
|
||||
onClick={() => bulkInvite.mutate({ userIds: Array.from(selectedIds) })}
|
||||
disabled={bulkInvite.isPending}
|
||||
className="gap-1.5"
|
||||
>
|
||||
{bulkInvite.isPending ? (
|
||||
<Loader2 className="h-4 w-4 animate-spin" />
|
||||
) : (
|
||||
<Send className="h-4 w-4" />
|
||||
)}
|
||||
Invite Selected
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => setSelectedIds(new Set())}
|
||||
disabled={bulkInvite.isPending}
|
||||
className="gap-1.5"
|
||||
>
|
||||
<X className="h-4 w-4" />
|
||||
Clear
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user