letsbe
/
MOPC-App
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix round assignment pool, create-page parity, and file settings UX
Build and Push Docker Image / build (push) Successful in 14m5s Details

This commit is contained in:
root 2026-02-12 17:25:30 +01:00
parent 52cdca1b85
commit 8a328357e3
7 changed files with 2233 additions and 878 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

394
src/app/(admin)/admin/rounds/[id]/edit/page.tsx
View File

@ -1,23 +1,23 @@
'use client'
"use client";
import { Suspense, use, useState, useEffect } from 'react'
import Link from 'next/link'
import { useRouter } from 'next/navigation'
import { useForm } from 'react-hook-form'
import { zodResolver } from '@hookform/resolvers/zod'
import { z } from 'zod'
import { trpc } from '@/lib/trpc/client'
import { Suspense, use, useState, useEffect } from "react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";
import { trpc } from "@/lib/trpc/client";
import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from '@/components/ui/card'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Skeleton } from '@/components/ui/skeleton'
import { Badge } from '@/components/ui/badge'
} from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Skeleton } from "@/components/ui/skeleton";
import { Badge } from "@/components/ui/badge";
import {
Form,
FormControl,
@ -26,15 +26,26 @@ import {
FormItem,
FormLabel,
FormMessage,
} from '@/components/ui/form'
} from "@/components/ui/form";
import {
EvaluationFormBuilder,
type Criterion,
} from '@/components/forms/evaluation-form-builder'
import { RoundTypeSettings } from '@/components/forms/round-type-settings'
import { ROUND_FIELD_VISIBILITY } from '@/types/round-settings'
import { FileRequirementsEditor } from '@/components/admin/file-requirements-editor'
import { ArrowLeft, Loader2, AlertCircle, AlertTriangle, Bell, GitCompare, MessageSquare, FileText, Calendar, LayoutTemplate } from 'lucide-react'
} from "@/components/forms/evaluation-form-builder";
import { RoundTypeSettings } from "@/components/forms/round-type-settings";
import { ROUND_FIELD_VISIBILITY } from "@/types/round-settings";
import { FileRequirementsEditor } from "@/components/admin/file-requirements-editor";
import {
ArrowLeft,
Loader2,
AlertCircle,
AlertTriangle,
Bell,
GitCompare,
MessageSquare,
FileText,
Calendar,
LayoutTemplate,
} from "lucide-react";
import {
Dialog,
DialogContent,
@ -43,37 +54,86 @@ import {
DialogHeader,
DialogTitle,
DialogTrigger,
} from '@/components/ui/dialog'
import { toast } from 'sonner'
import { Switch } from '@/components/ui/switch'
import { Slider } from '@/components/ui/slider'
import { Label } from '@/components/ui/label'
import { DateTimePicker } from '@/components/ui/datetime-picker'
} from "@/components/ui/dialog";
import { toast } from "sonner";
import { Switch } from "@/components/ui/switch";
import { Slider } from "@/components/ui/slider";
import { Label } from "@/components/ui/label";
import { DateTimePicker } from "@/components/ui/datetime-picker";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from '@/components/ui/select'
} from "@/components/ui/select";
// Available notification types for teams entering a round
const TEAM_NOTIFICATION_OPTIONS = [
{ value: '', label: 'No automatic notification', description: 'Teams will not receive a notification when entering this round' },
{ value: 'ADVANCED_SEMIFINAL', label: 'Advanced to Semi-Finals', description: 'Congratulates team for advancing to semi-finals' },
{ value: 'ADVANCED_FINAL', label: 'Selected as Finalist', description: 'Congratulates team for being selected as finalist' },
{ value: 'NOT_SELECTED', label: 'Not Selected', description: 'Informs team they were not selected to continue' },
{ value: 'WINNER_ANNOUNCEMENT', label: 'Winner Announcement', description: 'Announces the team as a winner' },
{ value: 'SUBMISSION_RECEIVED', label: 'Submission Received', description: 'Confirms to the team that their submission has been received' },
]
{
value: "",
label: "No automatic notification",
description:
"Teams will not receive a notification when entering this round",
},
{
value: "ADVANCED_SEMIFINAL",
label: "Advanced to Semi-Finals",
description: "Congratulates team for advancing to semi-finals",
},
{
value: "ADVANCED_FINAL",
label: "Selected as Finalist",
description: "Congratulates team for being selected as finalist",
},
{
value: "NOT_SELECTED",
label: "Not Selected",
description: "Informs team they were not selected to continue",
},
{
value: "WINNER_ANNOUNCEMENT",
label: "Winner Announcement",
description: "Announces the team as a winner",
},
{
value: "SUBMISSION_RECEIVED",
label: "Submission Received",
description: "Confirms to the team that their submission has been received",
},
];
const FILE_TYPE_PRESETS = [
{ value: "any", label: "Any file type", settingValue: "" },
{ value: "pdf", label: "PDF only", settingValue: "application/pdf" },
{ value: "images", label: "Images only", settingValue: "image/*" },
{ value: "videos", label: "Videos only", settingValue: "video/*" },
{
value: "docs",
label: "Documents (PDF, Word, Excel, PowerPoint)",
settingValue:
"application/pdf,application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.openxmlformats-officedocument.presentationml.presentation",
},
{
value: "media",
label: "Media (images + videos)",
settingValue: "image/*,video/*",
},
{
value: "all_standard",
label: "Documents + Media",
settingValue:
"application/pdf,application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.openxmlformats-officedocument.presentationml.presentation,image/*,video/*",
},
];
interface PageProps {
params: Promise<{ id: string }>
params: Promise<{ id: string }>;
}
const updateRoundSchema = z
.object({
name: z.string().min(1, 'Name is required').max(255),
name: z.string().min(1, "Name is required").max(255),
requiredReviews: z.number().int().min(0).max(10),
minAssignmentsPerJuror: z.number().int().min(1).max(50),
maxAssignmentsPerJuror: z.number().int().min(1).max(100),
@ -83,94 +143,98 @@ const updateRoundSchema = z
.refine(
(data) => {
if (data.votingStartAt && data.votingEndAt) {
return data.votingEndAt > data.votingStartAt
return data.votingEndAt > data.votingStartAt;
}
return true
return true;
},
{
message: 'End date must be after start date',
path: ['votingEndAt'],
}
message: "End date must be after start date",
path: ["votingEndAt"],
},
)
.refine(
(data) => data.minAssignmentsPerJuror <= data.maxAssignmentsPerJuror,
{
message: 'Min must be less than or equal to max',
path: ['minAssignmentsPerJuror'],
}
)
message: "Min must be less than or equal to max",
path: ["minAssignmentsPerJuror"],
},
);
type UpdateRoundForm = z.infer<typeof updateRoundSchema>
type UpdateRoundForm = z.infer<typeof updateRoundSchema>;
function EditRoundContent({ roundId }: { roundId: string }) {
const router = useRouter()
const [criteria, setCriteria] = useState<Criterion[]>([])
const [criteriaInitialized, setCriteriaInitialized] = useState(false)
const [formInitialized, setFormInitialized] = useState(false)
const [roundType, setRoundType] = useState<'FILTERING' | 'EVALUATION' | 'LIVE_EVENT'>('EVALUATION')
const [roundSettings, setRoundSettings] = useState<Record<string, unknown>>({})
const router = useRouter();
const [criteria, setCriteria] = useState<Criterion[]>([]);
const [criteriaInitialized, setCriteriaInitialized] = useState(false);
const [formInitialized, setFormInitialized] = useState(false);
const [roundType, setRoundType] = useState<
"FILTERING" | "EVALUATION" | "LIVE_EVENT"
>("EVALUATION");
const [roundSettings, setRoundSettings] = useState<Record<string, unknown>>(
{},
);
// entryNotificationType removed from schema
// Fetch round data - disable refetch on focus to prevent overwriting user's edits
const { data: round, isLoading: loadingRound } = trpc.round.get.useQuery(
{ id: roundId },
{ refetchOnWindowFocus: false }
)
{ refetchOnWindowFocus: false },
);
// Fetch evaluation form
const { data: evaluationForm, isLoading: loadingForm } =
trpc.round.getEvaluationForm.useQuery({ roundId })
trpc.round.getEvaluationForm.useQuery({ roundId });
// Check if evaluations exist
const { data: hasEvaluations } = trpc.round.hasEvaluations.useQuery({
roundId,
})
});
const [saveTemplateOpen, setSaveTemplateOpen] = useState(false)
const [templateName, setTemplateName] = useState('')
const [saveTemplateOpen, setSaveTemplateOpen] = useState(false);
const [templateName, setTemplateName] = useState("");
const utils = trpc.useUtils()
const utils = trpc.useUtils();
// Mutations
const saveAsTemplate = trpc.roundTemplate.create.useMutation({
onSuccess: () => {
utils.roundTemplate.list.invalidate()
toast.success('Round saved as template')
setSaveTemplateOpen(false)
setTemplateName('')
utils.roundTemplate.list.invalidate();
toast.success("Round saved as template");
setSaveTemplateOpen(false);
setTemplateName("");
},
onError: (error) => {
toast.error(error.message)
toast.error(error.message);
},
})
});
const updateRound = trpc.round.update.useMutation({
onSuccess: () => {
utils.round.get.invalidate({ id: roundId })
utils.round.list.invalidate()
utils.program.list.invalidate({ includeRounds: true })
router.push(`/admin/rounds/${roundId}`)
utils.round.get.invalidate({ id: roundId });
utils.round.list.invalidate();
utils.program.list.invalidate({ includeRounds: true });
router.push(`/admin/rounds/${roundId}`);
},
})
});
const updateEvaluationForm = trpc.round.updateEvaluationForm.useMutation({
onSuccess: () => {
utils.round.get.invalidate({ id: roundId })
utils.round.get.invalidate({ id: roundId });
},
})
});
// Initialize form with existing data
const form = useForm<UpdateRoundForm>({
resolver: zodResolver(updateRoundSchema),
defaultValues: {
name: '',
name: "",
requiredReviews: 3,
minAssignmentsPerJuror: 5,
maxAssignmentsPerJuror: 20,
votingStartAt: null,
votingEndAt: null,
},
})
});
// Update form when round data loads - only initialize once
useEffect(() => {
@ -180,57 +244,66 @@ function EditRoundContent({ roundId }: { roundId: string }) {
requiredReviews: round.requiredReviews,
minAssignmentsPerJuror: round.minAssignmentsPerJuror,
maxAssignmentsPerJuror: round.maxAssignmentsPerJuror,
votingStartAt: round.votingStartAt ? new Date(round.votingStartAt) : null,
votingStartAt: round.votingStartAt
? new Date(round.votingStartAt)
: null,
votingEndAt: round.votingEndAt ? new Date(round.votingEndAt) : null,
})
});
// Set round type, settings, and notification type
setRoundType((round.roundType as typeof roundType) || 'EVALUATION')
setRoundSettings((round.settingsJson as Record<string, unknown>) || {})
setFormInitialized(true)
setRoundType((round.roundType as typeof roundType) || "EVALUATION");
setRoundSettings((round.settingsJson as Record<string, unknown>) || {});
setFormInitialized(true);
}
}, [round, form, formInitialized])
}, [round, form, formInitialized]);
// Initialize criteria from evaluation form
useEffect(() => {
if (evaluationForm && !criteriaInitialized) {
const existingCriteria = evaluationForm.criteriaJson as unknown as Criterion[]
const existingCriteria =
evaluationForm.criteriaJson as unknown as Criterion[];
if (Array.isArray(existingCriteria)) {
setCriteria(existingCriteria)
setCriteria(existingCriteria);
}
setCriteriaInitialized(true)
setCriteriaInitialized(true);
} else if (!loadingForm && !evaluationForm && !criteriaInitialized) {
setCriteriaInitialized(true)
setCriteriaInitialized(true);
}
}, [evaluationForm, loadingForm, criteriaInitialized])
}, [evaluationForm, loadingForm, criteriaInitialized]);
const onSubmit = async (data: UpdateRoundForm) => {
const visibility = ROUND_FIELD_VISIBILITY[roundType]
const visibility = ROUND_FIELD_VISIBILITY[roundType];
// Update round with type, settings, and notification
await updateRound.mutateAsync({
id: roundId,
name: data.name,
requiredReviews: visibility?.showRequiredReviews ? data.requiredReviews : 0,
requiredReviews: visibility?.showRequiredReviews
? data.requiredReviews
: 0,
minAssignmentsPerJuror: data.minAssignmentsPerJuror,
maxAssignmentsPerJuror: data.maxAssignmentsPerJuror,
roundType,
settingsJson: roundSettings,
votingStartAt: visibility?.showVotingWindow ? (data.votingStartAt ?? null) : null,
votingEndAt: visibility?.showVotingWindow ? (data.votingEndAt ?? null) : null,
})
votingStartAt: visibility?.showVotingWindow
? (data.votingStartAt ?? null)
: null,
votingEndAt: visibility?.showVotingWindow
? (data.votingEndAt ?? null)
: null,
});
// Update evaluation form if criteria changed and no evaluations exist
if (!hasEvaluations && criteria.length > 0) {
await updateEvaluationForm.mutateAsync({
roundId,
criteria,
})
}
});
}
};
const isLoading = loadingRound || loadingForm
const isLoading = loadingRound || loadingForm;
if (isLoading) {
return <EditRoundSkeleton />
return <EditRoundSkeleton />;
}
if (!round) {
@ -253,11 +326,11 @@ function EditRoundContent({ roundId }: { roundId: string }) {
</CardContent>
</Card>
</div>
)
);
}
const isPending = updateRound.isPending || updateEvaluationForm.isPending
const isActive = round.status === 'ACTIVE'
const isPending = updateRound.isPending || updateEvaluationForm.isPending;
const isActive = round.status === "ACTIVE";
return (
<div className="space-y-6">
@ -273,7 +346,7 @@ function EditRoundContent({ roundId }: { roundId: string }) {
<div className="flex items-center gap-3">
<h1 className="text-2xl font-semibold tracking-tight">Edit Round</h1>
<Badge variant={isActive ? 'default' : 'secondary'}>
<Badge variant={isActive ? "default" : "secondary"}>
{round.status}
</Badge>
</div>
@ -452,7 +525,8 @@ function EditRoundContent({ roundId }: { roundId: string }) {
</div>
<p className="text-sm text-muted-foreground">
Leave empty to disable the voting window enforcement. Past dates are allowed.
Leave empty to disable the voting window enforcement. Past dates
are allowed.
</p>
</CardContent>
</Card>
@ -467,7 +541,7 @@ function EditRoundContent({ roundId }: { roundId: string }) {
</CardHeader>
<CardContent className="space-y-4">
<Select
value={(roundSettings.uploadDeadlinePolicy as string) || ''}
value={(roundSettings.uploadDeadlinePolicy as string) || ""}
onValueChange={(value) =>
setRoundSettings((prev) => ({
...prev,
@ -479,9 +553,7 @@ function EditRoundContent({ roundId }: { roundId: string }) {
<SelectValue placeholder="Default (no restriction)" />
</SelectTrigger>
<SelectContent>
<SelectItem value="NONE">
Default - No restriction
</SelectItem>
<SelectItem value="NONE">Default - No restriction</SelectItem>
<SelectItem value="BLOCK">
Block uploads after round starts
</SelectItem>
@ -491,8 +563,10 @@ function EditRoundContent({ roundId }: { roundId: string }) {
</SelectContent>
</Select>
<p className="text-sm text-muted-foreground">
When set to &ldquo;Block&rdquo;, applicants cannot upload files after the voting start date.
When set to &ldquo;Allow late&rdquo;, uploads are accepted but flagged as late submissions.
When set to &ldquo;Block&rdquo;, applicants cannot upload files
after the voting start date. When set to &ldquo;Allow
late&rdquo;, uploads are accepted but flagged as late
submissions.
</p>
</CardContent>
</Card>
@ -516,7 +590,9 @@ function EditRoundContent({ roundId }: { roundId: string }) {
<div className="space-y-4">
<div className="flex items-center justify-between">
<div className="space-y-0.5">
<Label className="text-sm font-medium">Enable Project Comparison</Label>
<Label className="text-sm font-medium">
Enable Project Comparison
</Label>
<p className="text-xs text-muted-foreground">
Allow jury members to compare projects side by side
</p>
@ -542,7 +618,8 @@ function EditRoundContent({ roundId }: { roundId: string }) {
onChange={(e) =>
setRoundSettings((prev) => ({
...prev,
comparison_max_projects: parseInt(e.target.value) || 3,
comparison_max_projects:
parseInt(e.target.value) || 3,
}))
}
className="max-w-[120px]"
@ -578,18 +655,22 @@ function EditRoundContent({ roundId }: { roundId: string }) {
<div className="space-y-2">
<Label className="text-sm">Divergence Threshold</Label>
<p className="text-xs text-muted-foreground">
Score divergence level that triggers a warning (0.0 - 1.0)
Score divergence level that triggers a warning (0.0 -
1.0)
</p>
<Input
type="number"
min={0}
max={1}
step={0.05}
value={Number(roundSettings.divergence_threshold || 0.3)}
value={Number(
roundSettings.divergence_threshold || 0.3,
)}
onChange={(e) =>
setRoundSettings((prev) => ({
...prev,
divergence_threshold: parseFloat(e.target.value) || 0.3,
divergence_threshold:
parseFloat(e.target.value) || 0.3,
}))
}
className="max-w-[120px]"
@ -598,7 +679,9 @@ function EditRoundContent({ roundId }: { roundId: string }) {
<div className="space-y-2">
<Label className="text-sm">Anonymization Level</Label>
<Select
value={String(roundSettings.anonymization_level || 'partial')}
value={String(
roundSettings.anonymization_level || "partial",
)}
onValueChange={(v) =>
setRoundSettings((prev) => ({
...prev,
@ -611,22 +694,31 @@ function EditRoundContent({ roundId }: { roundId: string }) {
</SelectTrigger>
<SelectContent>
<SelectItem value="none">No anonymization</SelectItem>
<SelectItem value="partial">Partial (Juror 1, 2...)</SelectItem>
<SelectItem value="full">Full anonymization</SelectItem>
<SelectItem value="partial">
Partial (Juror 1, 2...)
</SelectItem>
<SelectItem value="full">
Full anonymization
</SelectItem>
</SelectContent>
</Select>
</div>
<div className="space-y-2">
<Label className="text-sm">Discussion Window (hours)</Label>
<Label className="text-sm">
Discussion Window (hours)
</Label>
<Input
type="number"
min={1}
max={720}
value={Number(roundSettings.discussion_window_hours || 48)}
value={Number(
roundSettings.discussion_window_hours || 48,
)}
onChange={(e) =>
setRoundSettings((prev) => ({
...prev,
discussion_window_hours: parseInt(e.target.value) || 48,
discussion_window_hours:
parseInt(e.target.value) || 48,
}))
}
className="max-w-[120px]"
@ -642,7 +734,8 @@ function EditRoundContent({ roundId }: { roundId: string }) {
onChange={(e) =>
setRoundSettings((prev) => ({
...prev,
max_comment_length: parseInt(e.target.value) || 2000,
max_comment_length:
parseInt(e.target.value) || 2000,
}))
}
className="max-w-[120px]"
@ -668,19 +761,35 @@ function EditRoundContent({ roundId }: { roundId: string }) {
<CardContent className="space-y-4">
<div className="space-y-2">
<Label className="text-sm">Allowed File Types</Label>
<p className="text-xs text-muted-foreground">
Comma-separated MIME types or extensions
</p>
<Input
placeholder="application/pdf, video/mp4, image/jpeg"
value={String(roundSettings.allowed_file_types || '')}
onChange={(e) =>
<Select
value={
FILE_TYPE_PRESETS.find(
(option) =>
option.settingValue ===
String(roundSettings.allowed_file_types || ""),
)?.value || "any"
}
onValueChange={(selectedValue) => {
const selected = FILE_TYPE_PRESETS.find(
(option) => option.value === selectedValue,
);
setRoundSettings((prev) => ({
...prev,
allowed_file_types: e.target.value,
}))
}
/>
allowed_file_types: selected?.settingValue || undefined,
}));
}}
>
<SelectTrigger className="max-w-[420px]">
<SelectValue />
</SelectTrigger>
<SelectContent>
{FILE_TYPE_PRESETS.map((option) => (
<SelectItem key={option.value} value={option.value}>
{option.label}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
<div className="space-y-2">
<Label className="text-sm">Max File Size (MB)</Label>
@ -700,7 +809,9 @@ function EditRoundContent({ roundId }: { roundId: string }) {
</div>
<div className="flex items-center justify-between">
<div className="space-y-0.5">
<Label className="text-sm font-medium">Enable File Versioning</Label>
<Label className="text-sm font-medium">
Enable File Versioning
</Label>
<p className="text-xs text-muted-foreground">
Keep previous versions when files are replaced
</p>
@ -750,9 +861,12 @@ function EditRoundContent({ roundId }: { roundId: string }) {
<CardContent className="space-y-4">
<div className="flex items-center justify-between">
<div className="space-y-0.5">
<Label className="text-sm font-medium">Require Availability</Label>
<Label className="text-sm font-medium">
Require Availability
</Label>
<p className="text-xs text-muted-foreground">
Jury members must set availability before receiving assignments
Jury members must set availability before receiving
assignments
</p>
</div>
<Switch
@ -769,7 +883,9 @@ function EditRoundContent({ roundId }: { roundId: string }) {
<div className="space-y-2">
<Label className="text-sm">Availability Mode</Label>
<Select
value={String(roundSettings.availability_mode || 'soft_penalty')}
value={String(
roundSettings.availability_mode || "soft_penalty",
)}
onValueChange={(v) =>
setRoundSettings((prev) => ({
...prev,
@ -793,10 +909,12 @@ function EditRoundContent({ roundId }: { roundId: string }) {
<div className="space-y-2">
<Label className="text-sm">
Availability Weight ({Number(roundSettings.availability_weight || 50)}%)
Availability Weight (
{Number(roundSettings.availability_weight || 50)}%)
</Label>
<p className="text-xs text-muted-foreground">
How much weight to give availability when using soft penalty mode
How much weight to give availability when using soft penalty
mode
</p>
<Slider
value={[Number(roundSettings.availability_weight || 50)]}
@ -905,7 +1023,7 @@ function EditRoundContent({ roundId }: { roundId: string }) {
criteriaJson: criteria,
settingsJson: roundSettings,
programId: round?.programId,
})
});
}}
>
{saveAsTemplate.isPending && (
@ -927,7 +1045,7 @@ function EditRoundContent({ roundId }: { roundId: string }) {
</form>
</Form>
</div>
)
);
}
function EditRoundSkeleton() {
@ -977,15 +1095,15 @@ function EditRoundSkeleton() {
</CardContent>
</Card>
</div>
)
);
}
export default function EditRoundPage({ params }: PageProps) {
const { id } = use(params)
const { id } = use(params);
return (
<Suspense fallback={<EditRoundSkeleton />}>
<EditRoundContent roundId={id} />
</Suspense>
)
);
}

1314
src/app/(admin)/admin/rounds/new/page.tsx
View File

File diff suppressed because it is too large Load Diff

146
src/components/admin/advance-projects-dialog.tsx
View File

@ -1,8 +1,8 @@
'use client'
"use client";
import { useState, useCallback, useEffect, useMemo } from 'react'
import { trpc } from '@/lib/trpc/client'
import { toast } from 'sonner'
import { useState, useCallback, useEffect, useMemo } from "react";
import { trpc } from "@/lib/trpc/client";
import { toast } from "sonner";
import {
Dialog,
DialogContent,
@ -10,18 +10,18 @@ import {
DialogFooter,
DialogHeader,
DialogTitle,
} from '@/components/ui/dialog'
} from "@/components/ui/dialog";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from '@/components/ui/select'
import { Button } from '@/components/ui/button'
import { Checkbox } from '@/components/ui/checkbox'
import { Badge } from '@/components/ui/badge'
import { Label } from '@/components/ui/label'
} from "@/components/ui/select";
import { Button } from "@/components/ui/button";
import { Checkbox } from "@/components/ui/checkbox";
import { Badge } from "@/components/ui/badge";
import { Label } from "@/components/ui/label";
import {
Table,
TableBody,
@ -29,15 +29,15 @@ import {
TableHead,
TableHeader,
TableRow,
} from '@/components/ui/table'
import { ArrowRightCircle, Loader2, Info } from 'lucide-react'
} from "@/components/ui/table";
import { ArrowRightCircle, Loader2, Info } from "lucide-react";
interface AdvanceProjectsDialogProps {
roundId: string
programId: string
open: boolean
onOpenChange: (open: boolean) => void
onSuccess?: () => void
roundId: string;
programId: string;
open: boolean;
onOpenChange: (open: boolean) => void;
onSuccess?: () => void;
}
export function AdvanceProjectsDialog({
@ -47,98 +47,98 @@ export function AdvanceProjectsDialog({
onOpenChange,
onSuccess,
}: AdvanceProjectsDialogProps) {
const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set())
const [targetRoundId, setTargetRoundId] = useState<string>('')
const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());
const [targetRoundId, setTargetRoundId] = useState<string>("");
const utils = trpc.useUtils()
const utils = trpc.useUtils();
// Reset state when dialog opens
useEffect(() => {
if (open) {
setSelectedIds(new Set())
setTargetRoundId('')
setSelectedIds(new Set());
setTargetRoundId("");
}
}, [open])
}, [open]);
// Fetch rounds in program
const { data: roundsData } = trpc.round.list.useQuery(
{ programId },
{ enabled: open }
)
{ enabled: open },
);
// Fetch projects in current round
const { data: projectsData, isLoading } = trpc.project.list.useQuery(
{ roundId, page: 1, perPage: 5000 },
{ enabled: open }
)
{ roundId, page: 1, perPage: 200 },
{ enabled: open },
);
// Auto-select next round by sortOrder
const otherRounds = useMemo(() => {
if (!roundsData) return []
if (!roundsData) return [];
return roundsData
.filter((r) => r.id !== roundId)
.sort((a, b) => a.sortOrder - b.sortOrder)
}, [roundsData, roundId])
.sort((a, b) => a.sortOrder - b.sortOrder);
}, [roundsData, roundId]);
const currentRound = useMemo(() => {
return roundsData?.find((r) => r.id === roundId)
}, [roundsData, roundId])
return roundsData?.find((r) => r.id === roundId);
}, [roundsData, roundId]);
// Auto-select next round in sort order
useEffect(() => {
if (open && otherRounds.length > 0 && !targetRoundId && currentRound) {
const nextRound = otherRounds.find(
(r) => r.sortOrder > currentRound.sortOrder
)
setTargetRoundId(nextRound?.id || otherRounds[0].id)
(r) => r.sortOrder > currentRound.sortOrder,
);
setTargetRoundId(nextRound?.id || otherRounds[0].id);
}
}, [open, otherRounds, targetRoundId, currentRound])
}, [open, otherRounds, targetRoundId, currentRound]);
const advanceMutation = trpc.round.advanceProjects.useMutation({
onSuccess: (result) => {
const targetName = otherRounds.find((r) => r.id === targetRoundId)?.name
const targetName = otherRounds.find((r) => r.id === targetRoundId)?.name;
toast.success(
`${result.advanced} project${result.advanced !== 1 ? 's' : ''} advanced to ${targetName}`
)
utils.round.get.invalidate()
utils.project.list.invalidate()
onSuccess?.()
onOpenChange(false)
`${result.advanced} project${result.advanced !== 1 ? "s" : ""} advanced to ${targetName}`,
);
utils.round.get.invalidate();
utils.project.list.invalidate();
onSuccess?.();
onOpenChange(false);
},
onError: (error) => {
toast.error(error.message)
toast.error(error.message);
},
})
});
const projects = projectsData?.projects ?? []
const projects = projectsData?.projects ?? [];
const toggleProject = useCallback((id: string) => {
setSelectedIds((prev) => {
const next = new Set(prev)
if (next.has(id)) next.delete(id)
else next.add(id)
return next
})
}, [])
const next = new Set(prev);
if (next.has(id)) next.delete(id);
else next.add(id);
return next;
});
}, []);
const toggleAll = useCallback(() => {
if (selectedIds.size === projects.length) {
setSelectedIds(new Set())
setSelectedIds(new Set());
} else {
setSelectedIds(new Set(projects.map((p) => p.id)))
setSelectedIds(new Set(projects.map((p) => p.id)));
}
}, [selectedIds.size, projects])
}, [selectedIds.size, projects]);
const handleAdvance = () => {
if (selectedIds.size === 0 || !targetRoundId) return
if (selectedIds.size === 0 || !targetRoundId) return;
advanceMutation.mutate({
fromRoundId: roundId,
toRoundId: targetRoundId,
projectIds: Array.from(selectedIds),
})
}
});
};
const targetRoundName = otherRounds.find((r) => r.id === targetRoundId)?.name
const targetRoundName = otherRounds.find((r) => r.id === targetRoundId)?.name;
return (
<Dialog open={open} onOpenChange={onOpenChange}>
@ -158,7 +158,8 @@ export function AdvanceProjectsDialog({
<Label>Target Round</Label>
{otherRounds.length === 0 ? (
<p className="text-sm text-muted-foreground">
No other rounds available in this program. Create another round first.
No other rounds available in this program. Create another round
first.
</p>
) : (
<Select value={targetRoundId} onValueChange={setTargetRoundId}>
@ -179,8 +180,9 @@ export function AdvanceProjectsDialog({
<div className="flex items-start gap-2 rounded-lg bg-blue-50 p-3 text-sm text-blue-800 dark:bg-blue-950/50 dark:text-blue-200">
<Info className="h-4 w-4 mt-0.5 shrink-0" />
<span>
Projects will be copied to the target round with &quot;Submitted&quot; status.
They will remain in the current round with their existing status.
Projects will be copied to the target round with
&quot;Submitted&quot; status. They will remain in the current round
with their existing status.
</span>
</div>
@ -200,7 +202,9 @@ export function AdvanceProjectsDialog({
<div className="space-y-3">
<div className="flex items-center gap-2">
<Checkbox
checked={selectedIds.size === projects.length && projects.length > 0}
checked={
selectedIds.size === projects.length && projects.length > 0
}
onCheckedChange={toggleAll}
/>
<span className="text-sm text-muted-foreground">
@ -222,7 +226,11 @@ export function AdvanceProjectsDialog({
{projects.map((project) => (
<TableRow
key={project.id}
className={selectedIds.has(project.id) ? 'bg-muted/50' : 'cursor-pointer'}
className={
selectedIds.has(project.id)
? "bg-muted/50"
: "cursor-pointer"
}
onClick={() => toggleProject(project.id)}
>
<TableCell>
@ -236,11 +244,11 @@ export function AdvanceProjectsDialog({
{project.title}
</TableCell>
<TableCell className="text-muted-foreground">
{project.teamName || '—'}
{project.teamName || "—"}
</TableCell>
<TableCell>
<Badge variant="secondary" className="text-xs">
{(project.status ?? 'SUBMITTED').replace('_', ' ')}
{(project.status ?? "SUBMITTED").replace("_", " ")}
</Badge>
</TableCell>
</TableRow>
@ -270,10 +278,10 @@ export function AdvanceProjectsDialog({
<ArrowRightCircle className="mr-2 h-4 w-4" />
)}
Advance Selected ({selectedIds.size})
{targetRoundName ? ` to ${targetRoundName}` : ''}
{targetRoundName ? ` to ${targetRoundName}` : ""}
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
)
);
}

165
src/components/admin/assign-projects-dialog.tsx
View File

@ -1,8 +1,8 @@
'use client'
"use client";
import { useState, useCallback, useEffect } from 'react'
import { trpc } from '@/lib/trpc/client'
import { toast } from 'sonner'
import { useState, useCallback, useEffect } from "react";
import { trpc } from "@/lib/trpc/client";
import { toast } from "sonner";
import {
Dialog,
DialogContent,
@ -10,11 +10,11 @@ import {
DialogFooter,
DialogHeader,
DialogTitle,
} from '@/components/ui/dialog'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Checkbox } from '@/components/ui/checkbox'
import { Badge } from '@/components/ui/badge'
} from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Checkbox } from "@/components/ui/checkbox";
import { Badge } from "@/components/ui/badge";
import {
Table,
TableBody,
@ -22,16 +22,16 @@ import {
TableHead,
TableHeader,
TableRow,
} from '@/components/ui/table'
import { Search, Loader2, Plus, Package, CheckCircle2 } from 'lucide-react'
import { getCountryName } from '@/lib/countries'
} from "@/components/ui/table";
import { Search, Loader2, Plus, Package, CheckCircle2 } from "lucide-react";
import { getCountryName } from "@/lib/countries";
interface AssignProjectsDialogProps {
roundId: string
programId: string
open: boolean
onOpenChange: (open: boolean) => void
onSuccess?: () => void
roundId: string;
programId: string;
open: boolean;
onOpenChange: (open: boolean) => void;
onSuccess?: () => void;
}
export function AssignProjectsDialog({
@ -41,81 +41,87 @@ export function AssignProjectsDialog({
onOpenChange,
onSuccess,
}: AssignProjectsDialogProps) {
const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set())
const [search, setSearch] = useState('')
const [debouncedSearch, setDebouncedSearch] = useState('')
const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());
const [search, setSearch] = useState("");
const [debouncedSearch, setDebouncedSearch] = useState("");
const utils = trpc.useUtils()
const utils = trpc.useUtils();
// Debounce search
useEffect(() => {
const timer = setTimeout(() => setDebouncedSearch(search), 300)
return () => clearTimeout(timer)
}, [search])
const timer = setTimeout(() => setDebouncedSearch(search), 300);
return () => clearTimeout(timer);
}, [search]);
// Reset state when dialog opens
useEffect(() => {
if (open) {
setSelectedIds(new Set())
setSearch('')
setDebouncedSearch('')
setSelectedIds(new Set());
setSearch("");
setDebouncedSearch("");
}
}, [open])
}, [open]);
const { data, isLoading } = trpc.project.list.useQuery(
const { data, isLoading, error } = trpc.project.list.useQuery(
{
programId,
unassignedOnly: true,
search: debouncedSearch || undefined,
page: 1,
perPage: 5000,
perPage: 200,
},
{ enabled: open }
)
{ enabled: open },
);
const assignMutation = trpc.round.assignProjects.useMutation({
onSuccess: (result) => {
toast.success(`${result.assigned} project${result.assigned !== 1 ? 's' : ''} assigned to round`)
utils.round.get.invalidate({ id: roundId })
utils.project.list.invalidate()
onSuccess?.()
onOpenChange(false)
toast.success(
`${result.assigned} project${result.assigned !== 1 ? "s" : ""} assigned to round`,
);
utils.round.get.invalidate({ id: roundId });
utils.project.list.invalidate();
onSuccess?.();
onOpenChange(false);
},
onError: (error) => {
toast.error(error.message)
toast.error(error.message);
},
})
});
const projects = data?.projects ?? []
const projects = data?.projects ?? [];
const alreadyInRound = new Set(
projects.filter((p) => p.round?.id === roundId).map((p) => p.id)
)
const assignableProjects = projects.filter((p) => !alreadyInRound.has(p.id))
projects.filter((p) => p.round?.id === roundId).map((p) => p.id),
);
const assignableProjects = projects.filter((p) => !alreadyInRound.has(p.id));
const toggleProject = useCallback((id: string) => {
if (alreadyInRound.has(id)) return
const toggleProject = useCallback(
(id: string) => {
if (alreadyInRound.has(id)) return;
setSelectedIds((prev) => {
const next = new Set(prev)
if (next.has(id)) next.delete(id)
else next.add(id)
return next
})
}, [alreadyInRound])
const next = new Set(prev);
if (next.has(id)) next.delete(id);
else next.add(id);
return next;
});
},
[alreadyInRound],
);
const toggleAll = useCallback(() => {
if (selectedIds.size === assignableProjects.length) {
setSelectedIds(new Set())
setSelectedIds(new Set());
} else {
setSelectedIds(new Set(assignableProjects.map((p) => p.id)))
setSelectedIds(new Set(assignableProjects.map((p) => p.id)));
}
}, [selectedIds.size, assignableProjects])
}, [selectedIds.size, assignableProjects]);
const handleAssign = () => {
if (selectedIds.size === 0) return
if (selectedIds.size === 0) return;
assignMutation.mutate({
roundId,
projectIds: Array.from(selectedIds),
})
}
});
};
return (
<Dialog open={open} onOpenChange={onOpenChange}>
@ -126,7 +132,7 @@ export function AssignProjectsDialog({
Assign Projects to Round
</DialogTitle>
<DialogDescription>
Select projects from the program to add to this round.
Select projects from the program pool to add to this round.
</DialogDescription>
</DialogHeader>
@ -145,12 +151,19 @@ export function AssignProjectsDialog({
<div className="flex items-center justify-center py-12">
<Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
</div>
) : error ? (
<div className="flex flex-col items-center justify-center py-12 text-center">
<p className="mt-2 font-medium">Failed to load projects</p>
<p className="text-sm text-muted-foreground">{error.message}</p>
</div>
) : projects.length === 0 ? (
<div className="flex flex-col items-center justify-center py-12 text-center">
<Package className="h-12 w-12 text-muted-foreground/50" />
<p className="mt-2 font-medium">No projects found</p>
<p className="text-sm text-muted-foreground">
{debouncedSearch ? 'No projects match your search.' : 'This program has no projects yet.'}
{debouncedSearch
? "No projects in the pool match your search."
: "This program has no projects in the pool yet."}
</p>
</div>
) : (
@ -158,14 +171,20 @@ export function AssignProjectsDialog({
<div className="flex items-center justify-between">
<div className="flex items-center gap-2">
<Checkbox
checked={assignableProjects.length > 0 && selectedIds.size === assignableProjects.length}
checked={
assignableProjects.length > 0 &&
selectedIds.size === assignableProjects.length
}
disabled={assignableProjects.length === 0}
onCheckedChange={toggleAll}
/>
<span className="text-sm text-muted-foreground">
{selectedIds.size} of {assignableProjects.length} assignable selected
{selectedIds.size} of {assignableProjects.length} assignable
selected
{alreadyInRound.size > 0 && (
<span className="ml-1">({alreadyInRound.size} already in round)</span>
<span className="ml-1">
({alreadyInRound.size} already in round)
</span>
)}
</span>
</div>
@ -183,16 +202,16 @@ export function AssignProjectsDialog({
</TableHeader>
<TableBody>
{projects.map((project) => {
const isInRound = alreadyInRound.has(project.id)
const isInRound = alreadyInRound.has(project.id);
return (
<TableRow
key={project.id}
className={
isInRound
? 'opacity-60'
? "opacity-60"
: selectedIds.has(project.id)
? 'bg-muted/50'
: 'cursor-pointer'
? "bg-muted/50"
: "cursor-pointer"
}
onClick={() => toggleProject(project.id)}
>
@ -202,7 +221,9 @@ export function AssignProjectsDialog({
) : (
<Checkbox
checked={selectedIds.has(project.id)}
onCheckedChange={() => toggleProject(project.id)}
onCheckedChange={() =>
toggleProject(project.id)
}
onClick={(e) => e.stopPropagation()}
/>
)}
@ -218,17 +239,19 @@ export function AssignProjectsDialog({
</div>
</TableCell>
<TableCell className="text-muted-foreground">
{project.teamName || '—'}
{project.teamName || "—"}
</TableCell>
<TableCell>
{project.country ? (
<Badge variant="outline" className="text-xs">
{getCountryName(project.country)}
</Badge>
) : '—'}
) : (
"—"
)}
</TableCell>
</TableRow>
)
);
})}
</TableBody>
</Table>
@ -255,5 +278,5 @@ export function AssignProjectsDialog({
</DialogFooter>
</DialogContent>
</Dialog>
)
);
}

246
src/components/admin/file-requirements-editor.tsx
View File

@ -1,20 +1,20 @@
'use client'
"use client";
import { useState } from 'react'
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 { Textarea } from '@/components/ui/textarea'
import { Switch } from '@/components/ui/switch'
import { Badge } from '@/components/ui/badge'
import { useState } from "react";
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 { Textarea } from "@/components/ui/textarea";
import { Switch } from "@/components/ui/switch";
import { Badge } from "@/components/ui/badge";
import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from '@/components/ui/card'
} from "@/components/ui/card";
import {
Dialog,
DialogContent,
@ -22,8 +22,8 @@ import {
DialogFooter,
DialogHeader,
DialogTitle,
} from '@/components/ui/dialog'
import { toast } from 'sonner'
} from "@/components/ui/dialog";
import { toast } from "sonner";
import {
Plus,
Pencil,
@ -33,103 +33,117 @@ import {
ArrowDown,
FileText,
Loader2,
} from 'lucide-react'
} from "lucide-react";
const MIME_TYPE_PRESETS = [
{ label: 'PDF', value: 'application/pdf' },
{ label: 'Images', value: 'image/*' },
{ label: 'Video', value: 'video/*' },
{ label: 'Word Documents', value: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' },
{ label: 'Excel', value: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' },
{ label: 'PowerPoint', value: 'application/vnd.openxmlformats-officedocument.presentationml.presentation' },
]
{ label: "PDF", value: "application/pdf" },
{ label: "Images", value: "image/*" },
{ label: "Video", value: "video/*" },
{
label: "Word Documents",
value:
"application/vnd.openxmlformats-officedocument.wordprocessingml.document",
},
{
label: "Excel",
value: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
},
{
label: "PowerPoint",
value:
"application/vnd.openxmlformats-officedocument.presentationml.presentation",
},
];
function getMimeLabel(mime: string): string {
const preset = MIME_TYPE_PRESETS.find((p) => p.value === mime)
if (preset) return preset.label
if (mime.endsWith('/*')) return mime.replace('/*', '')
return mime
const preset = MIME_TYPE_PRESETS.find((p) => p.value === mime);
if (preset) return preset.label;
if (mime.endsWith("/*")) return mime.replace("/*", "");
return mime;
}
interface FileRequirementsEditorProps {
roundId: string
roundId: string;
}
interface RequirementFormData {
name: string
description: string
acceptedMimeTypes: string[]
maxSizeMB: string
isRequired: boolean
name: string;
description: string;
acceptedMimeTypes: string[];
maxSizeMB: string;
isRequired: boolean;
}
const emptyForm: RequirementFormData = {
name: '',
description: '',
name: "",
description: "",
acceptedMimeTypes: [],
maxSizeMB: '',
maxSizeMB: "",
isRequired: true,
}
};
export function FileRequirementsEditor({ roundId }: FileRequirementsEditorProps) {
const utils = trpc.useUtils()
export function FileRequirementsEditor({
roundId,
}: FileRequirementsEditorProps) {
const utils = trpc.useUtils();
const { data: requirements = [], isLoading } = trpc.file.listRequirements.useQuery({ roundId })
const { data: requirements = [], isLoading } =
trpc.file.listRequirements.useQuery({ roundId });
const createMutation = trpc.file.createRequirement.useMutation({
onSuccess: () => {
utils.file.listRequirements.invalidate({ roundId })
toast.success('Requirement created')
utils.file.listRequirements.invalidate({ roundId });
toast.success("Requirement created");
},
onError: (err) => toast.error(err.message),
})
});
const updateMutation = trpc.file.updateRequirement.useMutation({
onSuccess: () => {
utils.file.listRequirements.invalidate({ roundId })
toast.success('Requirement updated')
utils.file.listRequirements.invalidate({ roundId });
toast.success("Requirement updated");
},
onError: (err) => toast.error(err.message),
})
});
const deleteMutation = trpc.file.deleteRequirement.useMutation({
onSuccess: () => {
utils.file.listRequirements.invalidate({ roundId })
toast.success('Requirement deleted')
utils.file.listRequirements.invalidate({ roundId });
toast.success("Requirement deleted");
},
onError: (err) => toast.error(err.message),
})
});
const reorderMutation = trpc.file.reorderRequirements.useMutation({
onSuccess: () => utils.file.listRequirements.invalidate({ roundId }),
onError: (err) => toast.error(err.message),
})
});
const [dialogOpen, setDialogOpen] = useState(false)
const [editingId, setEditingId] = useState<string | null>(null)
const [form, setForm] = useState<RequirementFormData>(emptyForm)
const [dialogOpen, setDialogOpen] = useState(false);
const [editingId, setEditingId] = useState<string | null>(null);
const [form, setForm] = useState<RequirementFormData>(emptyForm);
const openCreate = () => {
setEditingId(null)
setForm(emptyForm)
setDialogOpen(true)
}
setEditingId(null);
setForm(emptyForm);
setDialogOpen(true);
};
const openEdit = (req: typeof requirements[number]) => {
setEditingId(req.id)
const openEdit = (req: (typeof requirements)[number]) => {
setEditingId(req.id);
setForm({
name: req.name,
description: req.description || '',
description: req.description || "",
acceptedMimeTypes: req.acceptedMimeTypes,
maxSizeMB: req.maxSizeMB?.toString() || '',
maxSizeMB: req.maxSizeMB?.toString() || "",
isRequired: req.isRequired,
})
setDialogOpen(true)
}
});
setDialogOpen(true);
};
const handleSave = async () => {
if (!form.name.trim()) {
toast.error('Name is required')
return
toast.error("Name is required");
return;
}
const maxSizeMB = form.maxSizeMB ? parseInt(form.maxSizeMB) : undefined
const maxSizeMB = form.maxSizeMB ? parseInt(form.maxSizeMB) : undefined;
if (editingId) {
await updateMutation.mutateAsync({
@ -139,7 +153,7 @@ export function FileRequirementsEditor({ roundId }: FileRequirementsEditorProps)
acceptedMimeTypes: form.acceptedMimeTypes,
maxSizeMB: maxSizeMB || null,
isRequired: form.isRequired,
})
});
} else {
await createMutation.mutateAsync({
roundId,
@ -149,26 +163,29 @@ export function FileRequirementsEditor({ roundId }: FileRequirementsEditorProps)
maxSizeMB,
isRequired: form.isRequired,
sortOrder: requirements.length,
})
});
}
setDialogOpen(false)
}
setDialogOpen(false);
};
const handleDelete = async (id: string) => {
await deleteMutation.mutateAsync({ id })
}
await deleteMutation.mutateAsync({ id });
};
const handleMove = async (index: number, direction: 'up' | 'down') => {
const newOrder = [...requirements]
const swapIndex = direction === 'up' ? index - 1 : index + 1
if (swapIndex < 0 || swapIndex >= newOrder.length) return
;[newOrder[index], newOrder[swapIndex]] = [newOrder[swapIndex], newOrder[index]]
const handleMove = async (index: number, direction: "up" | "down") => {
const newOrder = [...requirements];
const swapIndex = direction === "up" ? index - 1 : index + 1;
if (swapIndex < 0 || swapIndex >= newOrder.length) return;
[newOrder[index], newOrder[swapIndex]] = [
newOrder[swapIndex],
newOrder[index],
];
await reorderMutation.mutateAsync({
roundId,
orderedIds: newOrder.map((r) => r.id),
})
}
});
};
const toggleMimeType = (mime: string) => {
setForm((prev) => ({
@ -176,10 +193,10 @@ export function FileRequirementsEditor({ roundId }: FileRequirementsEditorProps)
acceptedMimeTypes: prev.acceptedMimeTypes.includes(mime)
? prev.acceptedMimeTypes.filter((m) => m !== mime)
: [...prev.acceptedMimeTypes, mime],
}))
}
}));
};
const isSaving = createMutation.isPending || updateMutation.isPending
const isSaving = createMutation.isPending || updateMutation.isPending;
return (
<Card>
@ -194,7 +211,7 @@ export function FileRequirementsEditor({ roundId }: FileRequirementsEditorProps)
Define required files applicants must upload for this round
</CardDescription>
</div>
<Button onClick={openCreate} size="sm">
<Button type="button" onClick={openCreate} size="sm">
<Plus className="mr-1 h-4 w-4" />
Add Requirement
</Button>
@ -207,7 +224,8 @@ export function FileRequirementsEditor({ roundId }: FileRequirementsEditorProps)
</div>
) : requirements.length === 0 ? (
<div className="text-center py-8 text-muted-foreground">
No file requirements defined. Applicants can still upload files freely.
No file requirements defined. Applicants can still upload files
freely.
</div>
) : (
<div className="space-y-2">
@ -218,19 +236,21 @@ export function FileRequirementsEditor({ roundId }: FileRequirementsEditorProps)
>
<div className="flex flex-col gap-0.5">
<Button
type="button"
variant="ghost"
size="icon"
className="h-6 w-6"
onClick={() => handleMove(index, 'up')}
onClick={() => handleMove(index, "up")}
disabled={index === 0}
>
<ArrowUp className="h-3 w-3" />
</Button>
<Button
type="button"
variant="ghost"
size="icon"
className="h-6 w-6"
onClick={() => handleMove(index, 'down')}
onClick={() => handleMove(index, "down")}
disabled={index === requirements.length - 1}
>
<ArrowDown className="h-3 w-3" />
@ -240,12 +260,17 @@ export function FileRequirementsEditor({ roundId }: FileRequirementsEditorProps)
<div className="flex-1 min-w-0">
<div className="flex items-center gap-2 mb-1">
<span className="font-medium truncate">{req.name}</span>
<Badge variant={req.isRequired ? 'destructive' : 'secondary'} className="text-xs shrink-0">
{req.isRequired ? 'Required' : 'Optional'}
<Badge
variant={req.isRequired ? "destructive" : "secondary"}
className="text-xs shrink-0"
>
{req.isRequired ? "Required" : "Optional"}
</Badge>
</div>
{req.description && (
<p className="text-sm text-muted-foreground line-clamp-1">{req.description}</p>
<p className="text-sm text-muted-foreground line-clamp-1">
{req.description}
</p>
)}
<div className="flex flex-wrap gap-1 mt-1">
{req.acceptedMimeTypes.map((mime) => (
@ -261,10 +286,17 @@ export function FileRequirementsEditor({ roundId }: FileRequirementsEditorProps)
</div>
</div>
<div className="flex items-center gap-1 shrink-0">
<Button variant="ghost" size="icon" className="h-8 w-8" onClick={() => openEdit(req)}>
<Button
type="button"
variant="ghost"
size="icon"
className="h-8 w-8"
onClick={() => openEdit(req)}
>
<Pencil className="h-4 w-4" />
</Button>
<Button
type="button"
variant="ghost"
size="icon"
className="h-8 w-8 text-destructive hover:text-destructive"
@ -284,7 +316,9 @@ export function FileRequirementsEditor({ roundId }: FileRequirementsEditorProps)
<Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
<DialogContent className="max-w-md">
<DialogHeader>
<DialogTitle>{editingId ? 'Edit' : 'Add'} File Requirement</DialogTitle>
<DialogTitle>
{editingId ? "Edit" : "Add"} File Requirement
</DialogTitle>
<DialogDescription>
Define what file applicants need to upload for this round.
</DialogDescription>
@ -296,7 +330,9 @@ export function FileRequirementsEditor({ roundId }: FileRequirementsEditorProps)
<Input
id="req-name"
value={form.name}
onChange={(e) => setForm((p) => ({ ...p, name: e.target.value }))}
onChange={(e) =>
setForm((p) => ({ ...p, name: e.target.value }))
}
placeholder="e.g., Executive Summary"
/>
</div>
@ -306,7 +342,9 @@ export function FileRequirementsEditor({ roundId }: FileRequirementsEditorProps)
<Textarea
id="req-desc"
value={form.description}
onChange={(e) => setForm((p) => ({ ...p, description: e.target.value }))}
onChange={(e) =>
setForm((p) => ({ ...p, description: e.target.value }))
}
placeholder="Describe what this file should contain..."
rows={3}
/>
@ -318,7 +356,11 @@ export function FileRequirementsEditor({ roundId }: FileRequirementsEditorProps)
{MIME_TYPE_PRESETS.map((preset) => (
<Badge
key={preset.value}
variant={form.acceptedMimeTypes.includes(preset.value) ? 'default' : 'outline'}
variant={
form.acceptedMimeTypes.includes(preset.value)
? "default"
: "outline"
}
className="cursor-pointer"
onClick={() => toggleMimeType(preset.value)}
>
@ -337,7 +379,9 @@ export function FileRequirementsEditor({ roundId }: FileRequirementsEditorProps)
id="req-size"
type="number"
value={form.maxSizeMB}
onChange={(e) => setForm((p) => ({ ...p, maxSizeMB: e.target.value }))}
onChange={(e) =>
setForm((p) => ({ ...p, maxSizeMB: e.target.value }))
}
placeholder="No limit"
min={1}
max={5000}
@ -354,22 +398,28 @@ export function FileRequirementsEditor({ roundId }: FileRequirementsEditorProps)
<Switch
id="req-required"
checked={form.isRequired}
onCheckedChange={(checked) => setForm((p) => ({ ...p, isRequired: checked }))}
onCheckedChange={(checked) =>
setForm((p) => ({ ...p, isRequired: checked }))
}
/>
</div>
</div>
<DialogFooter>
<Button variant="outline" onClick={() => setDialogOpen(false)}>
<Button
type="button"
variant="outline"
onClick={() => setDialogOpen(false)}
>
Cancel
</Button>
<Button onClick={handleSave} disabled={isSaving}>
<Button type="button" onClick={handleSave} disabled={isSaving}>
{isSaving && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
{editingId ? 'Update' : 'Create'}
{editingId ? "Update" : "Create"}
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
</Card>
)
);
}

118
src/components/admin/remove-projects-dialog.tsx
View File

@ -1,8 +1,8 @@
'use client'
"use client";
import { useState, useCallback, useEffect } from 'react'
import { trpc } from '@/lib/trpc/client'
import { toast } from 'sonner'
import { useState, useCallback, useEffect } from "react";
import { trpc } from "@/lib/trpc/client";
import { toast } from "sonner";
import {
Dialog,
DialogContent,
@ -10,7 +10,7 @@ import {
DialogFooter,
DialogHeader,
DialogTitle,
} from '@/components/ui/dialog'
} from "@/components/ui/dialog";
import {
AlertDialog,
AlertDialogAction,
@ -20,10 +20,10 @@ import {
AlertDialogFooter,
AlertDialogHeader,
AlertDialogTitle,
} from '@/components/ui/alert-dialog'
import { Button } from '@/components/ui/button'
import { Checkbox } from '@/components/ui/checkbox'
import { Badge } from '@/components/ui/badge'
} from "@/components/ui/alert-dialog";
import { Button } from "@/components/ui/button";
import { Checkbox } from "@/components/ui/checkbox";
import { Badge } from "@/components/ui/badge";
import {
Table,
TableBody,
@ -31,14 +31,14 @@ import {
TableHead,
TableHeader,
TableRow,
} from '@/components/ui/table'
import { Minus, Loader2, AlertTriangle } from 'lucide-react'
} from "@/components/ui/table";
import { Minus, Loader2, AlertTriangle } from "lucide-react";
interface RemoveProjectsDialogProps {
roundId: string
open: boolean
onOpenChange: (open: boolean) => void
onSuccess?: () => void
roundId: string;
open: boolean;
onOpenChange: (open: boolean) => void;
onSuccess?: () => void;
}
export function RemoveProjectsDialog({
@ -47,66 +47,66 @@ export function RemoveProjectsDialog({
onOpenChange,
onSuccess,
}: RemoveProjectsDialogProps) {
const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set())
const [confirmOpen, setConfirmOpen] = useState(false)
const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());
const [confirmOpen, setConfirmOpen] = useState(false);
const utils = trpc.useUtils()
const utils = trpc.useUtils();
// Reset state when dialog opens
useEffect(() => {
if (open) {
setSelectedIds(new Set())
setConfirmOpen(false)
setSelectedIds(new Set());
setConfirmOpen(false);
}
}, [open])
}, [open]);
const { data, isLoading } = trpc.project.list.useQuery(
{ roundId, page: 1, perPage: 5000 },
{ enabled: open }
)
{ roundId, page: 1, perPage: 200 },
{ enabled: open },
);
const removeMutation = trpc.round.removeProjects.useMutation({
onSuccess: (result) => {
toast.success(
`${result.removed} project${result.removed !== 1 ? 's' : ''} removed from round`
)
utils.round.get.invalidate({ id: roundId })
utils.project.list.invalidate()
onSuccess?.()
onOpenChange(false)
`${result.removed} project${result.removed !== 1 ? "s" : ""} removed from round`,
);
utils.round.get.invalidate({ id: roundId });
utils.project.list.invalidate();
onSuccess?.();
onOpenChange(false);
},
onError: (error) => {
toast.error(error.message)
toast.error(error.message);
},
})
});
const projects = data?.projects ?? []
const projects = data?.projects ?? [];
const toggleProject = useCallback((id: string) => {
setSelectedIds((prev) => {
const next = new Set(prev)
if (next.has(id)) next.delete(id)
else next.add(id)
return next
})
}, [])
const next = new Set(prev);
if (next.has(id)) next.delete(id);
else next.add(id);
return next;
});
}, []);
const toggleAll = useCallback(() => {
if (selectedIds.size === projects.length) {
setSelectedIds(new Set())
setSelectedIds(new Set());
} else {
setSelectedIds(new Set(projects.map((p) => p.id)))
setSelectedIds(new Set(projects.map((p) => p.id)));
}
}, [selectedIds.size, projects])
}, [selectedIds.size, projects]);
const handleRemove = () => {
if (selectedIds.size === 0) return
if (selectedIds.size === 0) return;
removeMutation.mutate({
roundId,
projectIds: Array.from(selectedIds),
})
setConfirmOpen(false)
}
});
setConfirmOpen(false);
};
return (
<>
@ -118,8 +118,8 @@ export function RemoveProjectsDialog({
Remove Projects from Round
</DialogTitle>
<DialogDescription>
Select projects to remove from this round. The projects will remain
in the program and can be re-assigned later.
Select projects to remove from this round. The projects will
remain in the program and can be re-assigned later.
</DialogDescription>
</DialogHeader>
@ -147,7 +147,10 @@ export function RemoveProjectsDialog({
<div className="space-y-3">
<div className="flex items-center gap-2">
<Checkbox
checked={selectedIds.size === projects.length && projects.length > 0}
checked={
selectedIds.size === projects.length &&
projects.length > 0
}
onCheckedChange={toggleAll}
/>
<span className="text-sm text-muted-foreground">
@ -169,7 +172,11 @@ export function RemoveProjectsDialog({
{projects.map((project) => (
<TableRow
key={project.id}
className={selectedIds.has(project.id) ? 'bg-muted/50' : 'cursor-pointer'}
className={
selectedIds.has(project.id)
? "bg-muted/50"
: "cursor-pointer"
}
onClick={() => toggleProject(project.id)}
>
<TableCell>
@ -183,11 +190,14 @@ export function RemoveProjectsDialog({
{project.title}
</TableCell>
<TableCell className="text-muted-foreground">
{project.teamName || '—'}
{project.teamName || "—"}
</TableCell>
<TableCell>
<Badge variant="secondary" className="text-xs">
{(project.status ?? 'SUBMITTED').replace('_', ' ')}
{(project.status ?? "SUBMITTED").replace(
"_",
" ",
)}
</Badge>
</TableCell>
</TableRow>
@ -225,7 +235,7 @@ export function RemoveProjectsDialog({
<AlertDialogTitle>Confirm Removal</AlertDialogTitle>
<AlertDialogDescription>
Are you sure you want to remove {selectedIds.size} project
{selectedIds.size !== 1 ? 's' : ''} from this round? Their
{selectedIds.size !== 1 ? "s" : ""} from this round? Their
assignments and evaluations in this round will be deleted. The
projects will remain in the program.
</AlertDialogDescription>
@ -242,5 +252,5 @@ export function RemoveProjectsDialog({
</AlertDialogContent>
</AlertDialog>
</>
)
);
}

504
src/server/routers/round.ts
View File

File diff suppressed because it is too large Load Diff