Implement 15 platform features: digest, availability, templates, comparison, live voting SSE, file versioning, mentorship, messaging, analytics, drafts, webhooks, peer review, audit enhancements, i18n
Features implemented: - F1: Email digest notifications with cron endpoint and per-user frequency - F2: Jury availability windows and workload preferences in smart assignment - F3: Round templates with save-from-round and CRUD management - F4: Side-by-side project comparison view for jury members - F5: Real-time voting dashboard with Server-Sent Events (SSE) - F6: Live voting UX: QR codes, audience voting, tie-breaking, score animations - F7: File versioning, inline preview, bulk download with presigned URLs - F8: Mentor dashboard: milestones, private notes, activity tracking - F9: Communication hub with broadcasts, templates, and recipient targeting - F10: Advanced analytics: cross-round comparison, juror consistency, diversity metrics, PDF export - F11: Applicant draft saving with magic link resume and cron cleanup - F12: Webhook integration layer with HMAC signing, retry, and delivery logs - F13: Peer review discussions with anonymized scores and threaded comments - F14: Audit log enhancements: before/after diffs, session grouping, anomaly detection, retention - F15: i18n foundation with next-intl (EN/FR), cookie-based locale, language switcher Schema: 12 new models, field additions to User, Project, ProjectFile, LiveVotingSession, LiveVote, MentorAssignment, AuditLog, Program New routers: roundTemplate, message, webhook (registered in _app.ts) New services: email-digest, webhook-dispatcher New cron endpoints: /api/cron/digest, /api/cron/draft-cleanup, /api/cron/audit-cleanup New API routes: /api/live-voting/stream (SSE), /api/files/bulk-download All features are admin-configurable via SystemSettings or per-model settingsJson fields. Docker build verified successfully. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
173
src/components/shared/live-score-animation.tsx
Normal file
173
src/components/shared/live-score-animation.tsx
Normal file
@@ -0,0 +1,173 @@
|
||||
'use client'
|
||||
|
||||
import { useState, useEffect } from 'react'
|
||||
import { motion, AnimatePresence } from 'motion/react'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
interface LiveScoreAnimationProps {
|
||||
score: number | null
|
||||
maxScore: number
|
||||
label: string
|
||||
animate?: boolean
|
||||
theme?: 'dark' | 'light' | 'branded'
|
||||
}
|
||||
|
||||
function getScoreColor(score: number, maxScore: number): string {
|
||||
const ratio = score / maxScore
|
||||
if (ratio >= 0.75) return 'text-green-500'
|
||||
if (ratio >= 0.5) return 'text-yellow-500'
|
||||
if (ratio >= 0.25) return 'text-orange-500'
|
||||
return 'text-red-500'
|
||||
}
|
||||
|
||||
function getProgressColor(score: number, maxScore: number): string {
|
||||
const ratio = score / maxScore
|
||||
if (ratio >= 0.75) return 'stroke-green-500'
|
||||
if (ratio >= 0.5) return 'stroke-yellow-500'
|
||||
if (ratio >= 0.25) return 'stroke-orange-500'
|
||||
return 'stroke-red-500'
|
||||
}
|
||||
|
||||
function getThemeClasses(theme: 'dark' | 'light' | 'branded') {
|
||||
switch (theme) {
|
||||
case 'dark':
|
||||
return {
|
||||
bg: 'bg-gray-900',
|
||||
text: 'text-white',
|
||||
label: 'text-gray-400',
|
||||
ring: 'stroke-gray-700',
|
||||
}
|
||||
case 'light':
|
||||
return {
|
||||
bg: 'bg-white',
|
||||
text: 'text-gray-900',
|
||||
label: 'text-gray-500',
|
||||
ring: 'stroke-gray-200',
|
||||
}
|
||||
case 'branded':
|
||||
return {
|
||||
bg: 'bg-[#053d57]',
|
||||
text: 'text-white',
|
||||
label: 'text-[#557f8c]',
|
||||
ring: 'stroke-[#053d57]/30',
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export function LiveScoreAnimation({
|
||||
score,
|
||||
maxScore,
|
||||
label,
|
||||
animate = true,
|
||||
theme = 'branded',
|
||||
}: LiveScoreAnimationProps) {
|
||||
const [displayScore, setDisplayScore] = useState(0)
|
||||
const themeClasses = getThemeClasses(theme)
|
||||
const radius = 40
|
||||
const circumference = 2 * Math.PI * radius
|
||||
const targetScore = score ?? 0
|
||||
const progress = maxScore > 0 ? targetScore / maxScore : 0
|
||||
const offset = circumference - progress * circumference
|
||||
|
||||
useEffect(() => {
|
||||
if (!animate || score === null) {
|
||||
setDisplayScore(targetScore)
|
||||
return
|
||||
}
|
||||
|
||||
let frame: number
|
||||
const duration = 1200
|
||||
const startTime = performance.now()
|
||||
const startScore = 0
|
||||
|
||||
const step = (currentTime: number) => {
|
||||
const elapsed = currentTime - startTime
|
||||
const progress = Math.min(elapsed / duration, 1)
|
||||
// Ease out cubic
|
||||
const eased = 1 - Math.pow(1 - progress, 3)
|
||||
const current = startScore + (targetScore - startScore) * eased
|
||||
setDisplayScore(Math.round(current * 10) / 10)
|
||||
|
||||
if (progress < 1) {
|
||||
frame = requestAnimationFrame(step)
|
||||
}
|
||||
}
|
||||
|
||||
frame = requestAnimationFrame(step)
|
||||
return () => cancelAnimationFrame(frame)
|
||||
}, [targetScore, animate, score])
|
||||
|
||||
if (score === null) {
|
||||
return (
|
||||
<div className={cn('flex flex-col items-center gap-2 rounded-xl p-4', themeClasses.bg)}>
|
||||
<div className="relative h-24 w-24">
|
||||
<svg className="h-24 w-24 -rotate-90" viewBox="0 0 100 100">
|
||||
<circle
|
||||
cx="50"
|
||||
cy="50"
|
||||
r={radius}
|
||||
fill="none"
|
||||
className={themeClasses.ring}
|
||||
strokeWidth="6"
|
||||
/>
|
||||
</svg>
|
||||
<div className="absolute inset-0 flex items-center justify-center">
|
||||
<span className={cn('text-lg font-medium', themeClasses.label)}>--</span>
|
||||
</div>
|
||||
</div>
|
||||
<span className={cn('text-xs font-medium', themeClasses.label)}>{label}</span>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<AnimatePresence>
|
||||
<motion.div
|
||||
initial={animate ? { opacity: 0, scale: 0.8 } : false}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
transition={{ duration: 0.5, ease: 'easeOut' }}
|
||||
className={cn('flex flex-col items-center gap-2 rounded-xl p-4', themeClasses.bg)}
|
||||
>
|
||||
<div className="relative h-24 w-24">
|
||||
<svg className="h-24 w-24 -rotate-90" viewBox="0 0 100 100">
|
||||
{/* Background ring */}
|
||||
<circle
|
||||
cx="50"
|
||||
cy="50"
|
||||
r={radius}
|
||||
fill="none"
|
||||
className={themeClasses.ring}
|
||||
strokeWidth="6"
|
||||
/>
|
||||
{/* Progress ring */}
|
||||
<motion.circle
|
||||
cx="50"
|
||||
cy="50"
|
||||
r={radius}
|
||||
fill="none"
|
||||
className={getProgressColor(targetScore, maxScore)}
|
||||
strokeWidth="6"
|
||||
strokeLinecap="round"
|
||||
strokeDasharray={circumference}
|
||||
initial={animate ? { strokeDashoffset: circumference } : { strokeDashoffset: offset }}
|
||||
animate={{ strokeDashoffset: offset }}
|
||||
transition={{ duration: 1.2, ease: 'easeOut' }}
|
||||
/>
|
||||
</svg>
|
||||
<div className="absolute inset-0 flex items-center justify-center">
|
||||
<span
|
||||
className={cn(
|
||||
'text-2xl font-bold tabular-nums',
|
||||
themeClasses.text,
|
||||
getScoreColor(targetScore, maxScore)
|
||||
)}
|
||||
>
|
||||
{displayScore.toFixed(maxScore % 1 !== 0 ? 1 : 0)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<span className={cn('text-xs font-medium text-center', themeClasses.label)}>{label}</span>
|
||||
</motion.div>
|
||||
</AnimatePresence>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user