Add multiple admin improvements and bug fixes

- Email settings: Add separate sender display name field
- Rounds page: Drag-and-drop reordering with visible order numbers
- Round creation: Auto-assign projects to filtering rounds, auto-activate if voting started
- Round detail: Fix incorrect "voting period ended" message for draft rounds
- Projects page: Add delete option with confirmation dialog
- AI filtering: Add configurable batch size and parallel request settings
- Filtering results: Fix duplicate criteria display
- Add seed scripts for notification settings and MOPC onboarding form

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

src/app/(admin)/admin/rounds/page.tsx

@@ -4,6 +4,23 @@ import { Suspense, useState } from 'react'
 import Link from 'next/link'
 import { trpc } from '@/lib/trpc/client'
 import { toast } from 'sonner'
+import {
+  DndContext,
+  closestCenter,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors,
+  DragEndEvent,
+} from '@dnd-kit/core'
+import {
+  arrayMove,
+  SortableContext,
+  sortableKeyboardCoordinates,
+  useSortable,
+  verticalListSortingStrategy,
+} from '@dnd-kit/sortable'
+import { CSS } from '@dnd-kit/utilities'
 import {
   Card,
   CardContent,
@@ -14,14 +31,6 @@ import {
 import { Button } from '@/components/ui/button'
 import { Badge } from '@/components/ui/badge'
 import { Skeleton } from '@/components/ui/skeleton'
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from '@/components/ui/table'
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -52,10 +61,24 @@ import {
   Archive,
   Trash2,
   Loader2,
-  ChevronUp,
-  ChevronDown,
+  GripVertical,
+  ArrowRight,
 } from 'lucide-react'
 import { format, isPast, isFuture } from 'date-fns'
+import { cn } from '@/lib/utils'
+
+type RoundData = {
+  id: string
+  name: string
+  status: string
+  roundType: string
+  votingStartAt: string | null
+  votingEndAt: string | null
+  _count?: {
+    roundProjects: number
+    assignments: number
+  }
+}
 
 function RoundsContent() {
   const { data: programs, isLoading } = trpc.program.list.useQuery({
@@ -86,97 +109,184 @@ function RoundsContent() {
   return (
     <div className="space-y-6">
       {programs.map((program) => (
-        <Card key={program.id}>
-          <CardHeader>
-            <div className="flex items-center justify-between">
-              <div>
-                <CardTitle className="text-lg">{program.year} Edition</CardTitle>
-                <CardDescription>
-                  {program.name} - {program.status}
-                </CardDescription>
-              </div>
-              <Button asChild>
-                <Link href={`/admin/rounds/new?program=${program.id}`}>
-                  <Plus className="mr-2 h-4 w-4" />
-                  Add Round
-                </Link>
-              </Button>
-            </div>
-          </CardHeader>
-          <CardContent>
-            {program.rounds && program.rounds.length > 0 ? (
-              <Table>
-                <TableHeader>
-                  <TableRow>
-                    <TableHead className="w-20">Order</TableHead>
-                    <TableHead>Round</TableHead>
-                    <TableHead>Status</TableHead>
-                    <TableHead>Voting Window</TableHead>
-                    <TableHead>Projects</TableHead>
-                    <TableHead>Assignments</TableHead>
-                    <TableHead className="text-right">Actions</TableHead>
-                  </TableRow>
-                </TableHeader>
-                <TableBody>
-                  {program.rounds.map((round, index) => (
-                    <RoundRow
-                      key={round.id}
-                      round={round}
-                      index={index}
-                      totalRounds={program.rounds.length}
-                      allRoundIds={program.rounds.map((r) => r.id)}
-                      programId={program.id}
-                    />
-                  ))}
-                </TableBody>
-              </Table>
-            ) : (
-              <div className="text-center py-8 text-muted-foreground">
-                <Calendar className="mx-auto h-8 w-8 mb-2 opacity-50" />
-                <p>No rounds created yet</p>
-              </div>
-            )}
-          </CardContent>
-        </Card>
+        <ProgramRounds key={program.id} program={program} />
       ))}
     </div>
   )
 }
 
-function RoundRow({
-  round,
-  index,
-  totalRounds,
-  allRoundIds,
-  programId,
-}: {
-  round: any
-  index: number
-  totalRounds: number
-  allRoundIds: string[]
-  programId: string
-}) {
+function ProgramRounds({ program }: { program: any }) {
   const utils = trpc.useUtils()
-  const [showDeleteDialog, setShowDeleteDialog] = useState(false)
+  const [rounds, setRounds] = useState<RoundData[]>(program.rounds || [])
+
+  const sensors = useSensors(
+    useSensor(PointerSensor, {
+      activationConstraint: {
+        distance: 8,
+      },
+    }),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+    })
+  )
 
   const reorder = trpc.round.reorder.useMutation({
     onSuccess: () => {
       utils.program.list.invalidate({ includeRounds: true })
+      toast.success('Round order updated')
+    },
+    onError: (error) => {
+      toast.error(error.message || 'Failed to reorder rounds')
+      // Reset to original order on error
+      setRounds(program.rounds || [])
     },
   })
 
-  const moveUp = () => {
-    if (index <= 0) return
-    const ids = [...allRoundIds]
-    ;[ids[index - 1], ids[index]] = [ids[index], ids[index - 1]]
-    reorder.mutate({ programId, roundIds: ids })
+  const handleDragEnd = (event: DragEndEvent) => {
+    const { active, over } = event
+
+    if (over && active.id !== over.id) {
+      const oldIndex = rounds.findIndex((r) => r.id === active.id)
+      const newIndex = rounds.findIndex((r) => r.id === over.id)
+
+      const newRounds = arrayMove(rounds, oldIndex, newIndex)
+      setRounds(newRounds)
+
+      // Send the new order to the server
+      reorder.mutate({
+        programId: program.id,
+        roundIds: newRounds.map((r) => r.id),
+      })
+    }
   }
 
-  const moveDown = () => {
-    if (index >= totalRounds - 1) return
-    const ids = [...allRoundIds]
-    ;[ids[index], ids[index + 1]] = [ids[index + 1], ids[index]]
-    reorder.mutate({ programId, roundIds: ids })
+  // Sync local state when program.rounds changes
+  if (JSON.stringify(rounds.map(r => r.id)) !== JSON.stringify((program.rounds || []).map((r: RoundData) => r.id))) {
+    setRounds(program.rounds || [])
+  }
+
+  return (
+    <Card>
+      <CardHeader>
+        <div className="flex items-center justify-between">
+          <div>
+            <CardTitle className="text-lg">{program.year} Edition</CardTitle>
+            <CardDescription>
+              {program.name} - {program.status}
+            </CardDescription>
+          </div>
+          <Button asChild>
+            <Link href={`/admin/rounds/new?program=${program.id}`}>
+              <Plus className="mr-2 h-4 w-4" />
+              Add Round
+            </Link>
+          </Button>
+        </div>
+      </CardHeader>
+      <CardContent>
+        {rounds.length > 0 ? (
+          <div className="space-y-2">
+            {/* Header */}
+            <div className="grid grid-cols-[60px_1fr_120px_140px_80px_100px_50px] gap-3 px-3 py-2 text-xs font-medium text-muted-foreground uppercase tracking-wide">
+              <div>Order</div>
+              <div>Round</div>
+              <div>Status</div>
+              <div>Voting Window</div>
+              <div>Projects</div>
+              <div>Reviewers</div>
+              <div></div>
+            </div>
+
+            {/* Sortable List */}
+            <DndContext
+              sensors={sensors}
+              collisionDetection={closestCenter}
+              onDragEnd={handleDragEnd}
+            >
+              <SortableContext
+                items={rounds.map((r) => r.id)}
+                strategy={verticalListSortingStrategy}
+              >
+                <div className="space-y-1">
+                  {rounds.map((round, index) => (
+                    <SortableRoundRow
+                      key={round.id}
+                      round={round}
+                      index={index}
+                      totalRounds={rounds.length}
+                      isReordering={reorder.isPending}
+                    />
+                  ))}
+                </div>
+              </SortableContext>
+            </DndContext>
+
+            {/* Flow visualization */}
+            {rounds.length > 1 && (
+              <div className="mt-6 pt-4 border-t">
+                <p className="text-xs text-muted-foreground mb-3 uppercase tracking-wide font-medium">
+                  Project Flow
+                </p>
+                <div className="flex items-center gap-2 flex-wrap">
+                  {rounds.map((round, index) => (
+                    <div key={round.id} className="flex items-center gap-2">
+                      <div className="flex items-center gap-2 bg-muted/50 rounded-lg px-3 py-1.5">
+                        <span className="inline-flex items-center justify-center w-5 h-5 rounded-full bg-primary/10 text-primary text-xs font-bold">
+                          {index}
+                        </span>
+                        <span className="text-sm font-medium truncate max-w-[120px]">
+                          {round.name}
+                        </span>
+                        <Badge variant="outline" className="text-[10px] px-1.5 py-0">
+                          {round._count?.roundProjects || 0}
+                        </Badge>
+                      </div>
+                      {index < rounds.length - 1 && (
+                        <ArrowRight className="h-4 w-4 text-muted-foreground/50" />
+                      )}
+                    </div>
+                  ))}
+                </div>
+              </div>
+            )}
+          </div>
+        ) : (
+          <div className="text-center py-8 text-muted-foreground">
+            <Calendar className="mx-auto h-8 w-8 mb-2 opacity-50" />
+            <p>No rounds created yet</p>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  )
+}
+
+function SortableRoundRow({
+  round,
+  index,
+  totalRounds,
+  isReordering,
+}: {
+  round: RoundData
+  index: number
+  totalRounds: number
+  isReordering: boolean
+}) {
+  const utils = trpc.useUtils()
+  const [showDeleteDialog, setShowDeleteDialog] = useState(false)
+
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({ id: round.id })
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
   }
 
   const updateStatus = trpc.round.updateStatus.useMutation({
@@ -239,17 +349,16 @@ function RoundRow({
 
   const getVotingWindow = () => {
     if (!round.votingStartAt || !round.votingEndAt) {
-      return <span className="text-muted-foreground">Not set</span>
+      return <span className="text-muted-foreground text-sm">Not set</span>
     }
 
     const start = new Date(round.votingStartAt)
     const end = new Date(round.votingEndAt)
-    const now = new Date()
 
     if (isFuture(start)) {
       return (
         <span className="text-sm">
-          Opens {format(start, 'MMM d, yyyy')}
+          Opens {format(start, 'MMM d')}
         </span>
       )
     }
@@ -257,68 +366,79 @@ function RoundRow({
     if (isPast(end)) {
       return (
         <span className="text-sm text-muted-foreground">
-          Ended {format(end, 'MMM d, yyyy')}
+          Ended {format(end, 'MMM d')}
         </span>
       )
     }
 
     return (
       <span className="text-sm">
-        Until {format(end, 'MMM d, yyyy')}
+        Until {format(end, 'MMM d')}
       </span>
     )
   }
 
   return (
-    <TableRow>
-      <TableCell>
-        <div className="flex items-center gap-1">
-          <Button
-            variant="ghost"
-            size="icon"
-            className="h-7 w-7"
-            onClick={moveUp}
-            disabled={index === 0 || reorder.isPending}
-          >
-            <ChevronUp className="h-4 w-4" />
-          </Button>
-          <Button
-            variant="ghost"
-            size="icon"
-            className="h-7 w-7"
-            onClick={moveDown}
-            disabled={index === totalRounds - 1 || reorder.isPending}
-          >
-            <ChevronDown className="h-4 w-4" />
-          </Button>
-        </div>
-      </TableCell>
-      <TableCell>
+    <div
+      ref={setNodeRef}
+      style={style}
+      className={cn(
+        'grid grid-cols-[60px_1fr_120px_140px_80px_100px_50px] gap-3 items-center px-3 py-2.5 rounded-lg border bg-card transition-all',
+        isDragging && 'shadow-lg ring-2 ring-primary/20 z-50 opacity-90',
+        isReordering && !isDragging && 'opacity-50'
+      )}
+    >
+      {/* Order number with drag handle */}
+      <div className="flex items-center gap-1">
+        <button
+          {...attributes}
+          {...listeners}
+          className="cursor-grab active:cursor-grabbing p-1 -ml-1 rounded hover:bg-muted transition-colors touch-none"
+          disabled={isReordering}
+        >
+          <GripVertical className="h-4 w-4 text-muted-foreground" />
+        </button>
+        <span className="inline-flex items-center justify-center w-7 h-7 rounded-full bg-primary/10 text-primary text-sm font-bold">
+          {index}
+        </span>
+      </div>
+
+      {/* Round name */}
+      <div>
         <Link
           href={`/admin/rounds/${round.id}`}
           className="font-medium hover:underline"
         >
           {round.name}
         </Link>
-      </TableCell>
-      <TableCell>{getStatusBadge()}</TableCell>
-      <TableCell>{getVotingWindow()}</TableCell>
-      <TableCell>
-        <div className="flex items-center gap-1">
-          <FileText className="h-4 w-4 text-muted-foreground" />
-          {round._count?.roundProjects || 0}
-        </div>
-      </TableCell>
-      <TableCell>
-        <div className="flex items-center gap-1">
-          <Users className="h-4 w-4 text-muted-foreground" />
-          {round._count?.assignments || 0}
-        </div>
-      </TableCell>
-      <TableCell className="text-right">
+        <p className="text-xs text-muted-foreground capitalize">
+          {round.roundType?.toLowerCase().replace('_', ' ')}
+        </p>
+      </div>
+
+      {/* Status */}
+      <div>{getStatusBadge()}</div>
+
+      {/* Voting window */}
+      <div>{getVotingWindow()}</div>
+
+      {/* Projects */}
+      <div className="flex items-center gap-1.5">
+        <FileText className="h-4 w-4 text-muted-foreground" />
+        <span className="font-medium">{round._count?.roundProjects || 0}</span>
+      </div>
+
+      {/* Assignments */}
+      <div className="flex items-center gap-1.5">
+        <Users className="h-4 w-4 text-muted-foreground" />
+        <span className="font-medium">{round._count?.assignments || 0}</span>
+      </div>
+
+      {/* Actions */}
+      <div>
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
-            <Button variant="ghost" size="sm" aria-label="Round actions">
+            <Button variant="ghost" size="icon" className="h-8 w-8" aria-label="Round actions">
               <MoreHorizontal className="h-4 w-4" />
             </Button>
           </DropdownMenuTrigger>
@@ -408,8 +528,8 @@ function RoundRow({
             </AlertDialogFooter>
           </AlertDialogContent>
         </AlertDialog>
-      </TableCell>
-    </TableRow>
+      </div>
+    </div>
   )
 }