Add dispute system

This commit is contained in:
2025-12-16 00:33:50 +07:00
parent 339a212e57
commit c7966656d8
22 changed files with 1584 additions and 8 deletions

View File

@@ -15,6 +15,7 @@ import { LobbyPage } from '@/pages/LobbyPage'
import { PlayPage } from '@/pages/PlayPage'
import { LeaderboardPage } from '@/pages/LeaderboardPage'
import { InvitePage } from '@/pages/InvitePage'
import { AssignmentDetailPage } from '@/pages/AssignmentDetailPage'
// Protected route wrapper
function ProtectedRoute({ children }: { children: React.ReactNode }) {
@@ -118,6 +119,15 @@ function App() {
</ProtectedRoute>
}
/>
<Route
path="assignments/:id"
element={
<ProtectedRoute>
<AssignmentDetailPage />
</ProtectedRoute>
}
/>
</Route>
</Routes>
)

View File

@@ -0,0 +1,34 @@
import client from './client'
import type { AssignmentDetail, Dispute, DisputeComment, ReturnedAssignment } from '@/types'
export const assignmentsApi = {
// Get detailed assignment info with proofs and dispute
getDetail: async (assignmentId: number): Promise<AssignmentDetail> => {
const response = await client.get<AssignmentDetail>(`/assignments/${assignmentId}`)
return response.data
},
// Create a dispute against an assignment
createDispute: async (assignmentId: number, reason: string): Promise<Dispute> => {
const response = await client.post<Dispute>(`/assignments/${assignmentId}/dispute`, { reason })
return response.data
},
// Add a comment to a dispute
addComment: async (disputeId: number, text: string): Promise<DisputeComment> => {
const response = await client.post<DisputeComment>(`/disputes/${disputeId}/comments`, { text })
return response.data
},
// Vote on a dispute (true = valid/proof is OK, false = invalid/proof is not OK)
vote: async (disputeId: number, vote: boolean): Promise<{ message: string }> => {
const response = await client.post<{ message: string }>(`/disputes/${disputeId}/vote`, { vote })
return response.data
},
// Get current user's returned assignments
getReturnedAssignments: async (marathonId: number): Promise<ReturnedAssignment[]> => {
const response = await client.get<ReturnedAssignment[]>(`/marathons/${marathonId}/returned-assignments`)
return response.data
},
}

View File

@@ -6,3 +6,4 @@ export { feedApi } from './feed'
export { adminApi } from './admin'
export { eventsApi } from './events'
export { challengesApi } from './challenges'
export { assignmentsApi } from './assignments'

View File

@@ -1,7 +1,8 @@
import { useState, useEffect, useCallback, useRef, useImperativeHandle, forwardRef } from 'react'
import { useNavigate } from 'react-router-dom'
import { feedApi } from '@/api'
import type { Activity, ActivityType } from '@/types'
import { Loader2, ChevronDown, Bell } from 'lucide-react'
import { Loader2, ChevronDown, Bell, ExternalLink } from 'lucide-react'
import {
formatRelativeTime,
getActivityIcon,
@@ -169,12 +170,18 @@ interface ActivityItemProps {
}
function ActivityItem({ activity }: ActivityItemProps) {
const navigate = useNavigate()
const Icon = getActivityIcon(activity.type)
const iconColor = getActivityColor(activity.type)
const bgClass = getActivityBgClass(activity.type)
const isEvent = isEventActivity(activity.type)
const { title, details, extra } = formatActivityMessage(activity)
// Get assignment_id for complete activities
const assignmentId = activity.type === 'complete' && activity.data
? (activity.data as { assignment_id?: number }).assignment_id
: null
if (isEvent) {
return (
<div className={`px-4 py-3 ${bgClass} border-l-2 ${activity.type === 'event_start' ? 'border-l-yellow-500' : 'border-l-gray-600'}`}>
@@ -240,6 +247,16 @@ function ActivityItem({ activity }: ActivityItemProps) {
{extra}
</div>
)}
{/* Details button for complete activities */}
{assignmentId && (
<button
onClick={() => navigate(`/assignments/${assignmentId}`)}
className="mt-2 text-xs text-primary-400 hover:text-primary-300 flex items-center gap-1"
>
<ExternalLink className="w-3 h-3" />
Детали
</button>
)}
</div>
</div>
</div>

View File

@@ -0,0 +1,481 @@
import { useState, useEffect } from 'react'
import { useParams, useNavigate } from 'react-router-dom'
import { assignmentsApi } from '@/api'
import type { AssignmentDetail } from '@/types'
import { Card, CardContent, Button } from '@/components/ui'
import { useAuthStore } from '@/store/auth'
import {
ArrowLeft, Loader2, ExternalLink, Image, MessageSquare,
ThumbsUp, ThumbsDown, AlertTriangle, Clock, CheckCircle, XCircle,
Send, Flag
} from 'lucide-react'
const API_URL = import.meta.env.VITE_API_URL || 'http://localhost:8000'
export function AssignmentDetailPage() {
const { id } = useParams<{ id: string }>()
const navigate = useNavigate()
const user = useAuthStore((state) => state.user)
const [assignment, setAssignment] = useState<AssignmentDetail | null>(null)
const [isLoading, setIsLoading] = useState(true)
const [error, setError] = useState<string | null>(null)
// Dispute creation
const [showDisputeForm, setShowDisputeForm] = useState(false)
const [disputeReason, setDisputeReason] = useState('')
const [isCreatingDispute, setIsCreatingDispute] = useState(false)
// Comment
const [commentText, setCommentText] = useState('')
const [isAddingComment, setIsAddingComment] = useState(false)
// Voting
const [isVoting, setIsVoting] = useState(false)
useEffect(() => {
loadAssignment()
}, [id])
const loadAssignment = async () => {
if (!id) return
setIsLoading(true)
setError(null)
try {
const data = await assignmentsApi.getDetail(parseInt(id))
setAssignment(data)
} catch (err: unknown) {
const error = err as { response?: { data?: { detail?: string } } }
setError(error.response?.data?.detail || 'Не удалось загрузить данные')
} finally {
setIsLoading(false)
}
}
const handleCreateDispute = async () => {
if (!id || !disputeReason.trim()) return
setIsCreatingDispute(true)
try {
await assignmentsApi.createDispute(parseInt(id), disputeReason)
setDisputeReason('')
setShowDisputeForm(false)
await loadAssignment()
} catch (err: unknown) {
const error = err as { response?: { data?: { detail?: string } } }
alert(error.response?.data?.detail || 'Не удалось создать оспаривание')
} finally {
setIsCreatingDispute(false)
}
}
const handleVote = async (vote: boolean) => {
if (!assignment?.dispute) return
setIsVoting(true)
try {
await assignmentsApi.vote(assignment.dispute.id, vote)
await loadAssignment()
} catch (err: unknown) {
const error = err as { response?: { data?: { detail?: string } } }
alert(error.response?.data?.detail || 'Не удалось проголосовать')
} finally {
setIsVoting(false)
}
}
const handleAddComment = async () => {
if (!assignment?.dispute || !commentText.trim()) return
setIsAddingComment(true)
try {
await assignmentsApi.addComment(assignment.dispute.id, commentText)
setCommentText('')
await loadAssignment()
} catch (err: unknown) {
const error = err as { response?: { data?: { detail?: string } } }
alert(error.response?.data?.detail || 'Не удалось добавить комментарий')
} finally {
setIsAddingComment(false)
}
}
const formatDate = (dateString: string) => {
return new Date(dateString).toLocaleString('ru-RU', {
day: 'numeric',
month: 'long',
year: 'numeric',
hour: '2-digit',
minute: '2-digit',
})
}
const getTimeRemaining = (expiresAt: string) => {
const now = new Date()
const expires = new Date(expiresAt)
const diff = expires.getTime() - now.getTime()
if (diff <= 0) return 'Истекло'
const hours = Math.floor(diff / (1000 * 60 * 60))
const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60))
return `${hours}ч ${minutes}м`
}
const getStatusBadge = (status: string) => {
switch (status) {
case 'completed':
return (
<span className="px-3 py-1 bg-green-500/20 text-green-400 rounded-full text-sm flex items-center gap-1">
<CheckCircle className="w-4 h-4" /> Выполнено
</span>
)
case 'dropped':
return (
<span className="px-3 py-1 bg-red-500/20 text-red-400 rounded-full text-sm flex items-center gap-1">
<XCircle className="w-4 h-4" /> Пропущено
</span>
)
case 'returned':
return (
<span className="px-3 py-1 bg-orange-500/20 text-orange-400 rounded-full text-sm flex items-center gap-1">
<AlertTriangle className="w-4 h-4" /> Возвращено
</span>
)
default:
return (
<span className="px-3 py-1 bg-blue-500/20 text-blue-400 rounded-full text-sm">
Активно
</span>
)
}
}
if (isLoading) {
return (
<div className="flex justify-center py-12">
<Loader2 className="w-8 h-8 animate-spin text-primary-500" />
</div>
)
}
if (error || !assignment) {
return (
<div className="max-w-2xl mx-auto text-center py-12">
<p className="text-red-400 mb-4">{error || 'Задание не найдено'}</p>
<Button onClick={() => navigate(-1)}>Назад</Button>
</div>
)
}
const dispute = assignment.dispute
return (
<div className="max-w-2xl mx-auto">
{/* Header */}
<div className="flex items-center gap-4 mb-6">
<button onClick={() => navigate(-1)} className="text-gray-400 hover:text-white">
<ArrowLeft className="w-6 h-6" />
</button>
<h1 className="text-xl font-bold text-white">Детали выполнения</h1>
</div>
{/* Challenge info */}
<Card className="mb-6">
<CardContent>
<div className="flex items-start justify-between mb-4">
<div>
<p className="text-gray-400 text-sm">{assignment.challenge.game.title}</p>
<h2 className="text-xl font-bold text-white">{assignment.challenge.title}</h2>
</div>
{getStatusBadge(assignment.status)}
</div>
<p className="text-gray-300 mb-4">{assignment.challenge.description}</p>
<div className="flex flex-wrap gap-2 mb-4">
<span className="px-3 py-1 bg-green-500/20 text-green-400 rounded-full text-sm">
+{assignment.challenge.points} очков
</span>
<span className="px-3 py-1 bg-gray-700 text-gray-300 rounded-full text-sm">
{assignment.challenge.difficulty}
</span>
{assignment.challenge.estimated_time && (
<span className="px-3 py-1 bg-gray-700 text-gray-300 rounded-full text-sm">
~{assignment.challenge.estimated_time} мин
</span>
)}
</div>
<div className="text-sm text-gray-400 space-y-1">
<p>
<strong>Выполнил:</strong> {assignment.participant.nickname}
</p>
{assignment.completed_at && (
<p>
<strong>Дата:</strong> {formatDate(assignment.completed_at)}
</p>
)}
{assignment.points_earned > 0 && (
<p>
<strong>Получено очков:</strong> {assignment.points_earned}
</p>
)}
</div>
</CardContent>
</Card>
{/* Proof section */}
<Card className="mb-6">
<CardContent>
<h3 className="text-lg font-bold text-white mb-4 flex items-center gap-2">
<Image className="w-5 h-5" />
Доказательство
</h3>
{/* Proof image */}
{assignment.proof_image_url && (
<div className="mb-4">
<img
src={`${API_URL}${assignment.proof_image_url}`}
alt="Proof"
className="w-full rounded-lg max-h-96 object-contain bg-gray-900"
/>
</div>
)}
{/* Proof URL */}
{assignment.proof_url && (
<div className="mb-4">
<a
href={assignment.proof_url}
target="_blank"
rel="noopener noreferrer"
className="flex items-center gap-2 text-primary-400 hover:text-primary-300"
>
<ExternalLink className="w-4 h-4" />
{assignment.proof_url}
</a>
</div>
)}
{/* Proof comment */}
{assignment.proof_comment && (
<div className="p-3 bg-gray-900 rounded-lg">
<p className="text-sm text-gray-400 mb-1">Комментарий:</p>
<p className="text-white">{assignment.proof_comment}</p>
</div>
)}
{!assignment.proof_image_url && !assignment.proof_url && (
<p className="text-gray-500 text-center py-4">Пруф не предоставлен</p>
)}
</CardContent>
</Card>
{/* Dispute button */}
{assignment.can_dispute && !dispute && !showDisputeForm && (
<Button
variant="danger"
className="w-full mb-6"
onClick={() => setShowDisputeForm(true)}
>
<Flag className="w-4 h-4 mr-2" />
Оспорить выполнение
</Button>
)}
{/* Dispute creation form */}
{showDisputeForm && !dispute && (
<Card className="mb-6 border-red-500/50">
<CardContent>
<h3 className="text-lg font-bold text-red-400 mb-4 flex items-center gap-2">
<AlertTriangle className="w-5 h-5" />
Оспорить выполнение
</h3>
<p className="text-gray-400 text-sm mb-4">
Опишите причину оспаривания. После создания у участников будет 24 часа для голосования.
</p>
<textarea
className="input w-full min-h-[100px] resize-none mb-4"
placeholder="Причина оспаривания (минимум 10 символов)..."
value={disputeReason}
onChange={(e) => setDisputeReason(e.target.value)}
/>
<div className="flex gap-3">
<Button
variant="danger"
className="flex-1"
onClick={handleCreateDispute}
isLoading={isCreatingDispute}
disabled={disputeReason.trim().length < 10}
>
Оспорить
</Button>
<Button
variant="secondary"
onClick={() => {
setShowDisputeForm(false)
setDisputeReason('')
}}
>
Отмена
</Button>
</div>
</CardContent>
</Card>
)}
{/* Dispute section */}
{dispute && (
<Card className={`mb-6 ${dispute.status === 'open' ? 'border-yellow-500/50' : ''}`}>
<CardContent>
<div className="flex items-start justify-between mb-4">
<h3 className="text-lg font-bold text-yellow-400 flex items-center gap-2">
<AlertTriangle className="w-5 h-5" />
Оспаривание
</h3>
{dispute.status === 'open' ? (
<span className="px-3 py-1 bg-yellow-500/20 text-yellow-400 rounded-full text-sm flex items-center gap-1">
<Clock className="w-4 h-4" />
{getTimeRemaining(dispute.expires_at)}
</span>
) : dispute.status === 'valid' ? (
<span className="px-3 py-1 bg-green-500/20 text-green-400 rounded-full text-sm flex items-center gap-1">
<CheckCircle className="w-4 h-4" />
Пруф валиден
</span>
) : (
<span className="px-3 py-1 bg-red-500/20 text-red-400 rounded-full text-sm flex items-center gap-1">
<XCircle className="w-4 h-4" />
Пруф невалиден
</span>
)}
</div>
<div className="mb-4">
<p className="text-sm text-gray-400">
Открыл: <span className="text-white">{dispute.raised_by.nickname}</span>
</p>
<p className="text-sm text-gray-400">
Дата: <span className="text-white">{formatDate(dispute.created_at)}</span>
</p>
</div>
<div className="p-3 bg-gray-900 rounded-lg mb-4">
<p className="text-sm text-gray-400 mb-1">Причина:</p>
<p className="text-white">{dispute.reason}</p>
</div>
{/* Voting section */}
{dispute.status === 'open' && (
<div className="mb-4">
<h4 className="text-sm font-medium text-gray-300 mb-3">Голосование</h4>
<div className="flex items-center gap-4 mb-3">
<div className="flex items-center gap-2">
<ThumbsUp className="w-5 h-5 text-green-500" />
<span className="text-green-400 font-medium">{dispute.votes_valid}</span>
<span className="text-gray-500 text-sm">валидно</span>
</div>
<div className="flex items-center gap-2">
<ThumbsDown className="w-5 h-5 text-red-500" />
<span className="text-red-400 font-medium">{dispute.votes_invalid}</span>
<span className="text-gray-500 text-sm">невалидно</span>
</div>
</div>
<div className="flex gap-3">
<Button
variant={dispute.my_vote === true ? 'primary' : 'secondary'}
className="flex-1"
onClick={() => handleVote(true)}
isLoading={isVoting}
disabled={isVoting}
>
<ThumbsUp className="w-4 h-4 mr-2" />
Валидно
</Button>
<Button
variant={dispute.my_vote === false ? 'danger' : 'secondary'}
className="flex-1"
onClick={() => handleVote(false)}
isLoading={isVoting}
disabled={isVoting}
>
<ThumbsDown className="w-4 h-4 mr-2" />
Невалидно
</Button>
</div>
{dispute.my_vote !== null && (
<p className="text-sm text-gray-500 mt-2 text-center">
Вы проголосовали: {dispute.my_vote ? 'валидно' : 'невалидно'}
</p>
)}
</div>
)}
{/* Comments section */}
<div>
<h4 className="text-sm font-medium text-gray-300 mb-3 flex items-center gap-2">
<MessageSquare className="w-4 h-4" />
Обсуждение ({dispute.comments.length})
</h4>
{dispute.comments.length > 0 && (
<div className="space-y-3 mb-4 max-h-60 overflow-y-auto">
{dispute.comments.map((comment) => (
<div key={comment.id} className="p-3 bg-gray-900 rounded-lg">
<div className="flex items-center justify-between mb-1">
<span className={`font-medium ${comment.user.id === user?.id ? 'text-primary-400' : 'text-white'}`}>
{comment.user.nickname}
{comment.user.id === user?.id && ' (Вы)'}
</span>
<span className="text-xs text-gray-500">
{formatDate(comment.created_at)}
</span>
</div>
<p className="text-gray-300 text-sm">{comment.text}</p>
</div>
))}
</div>
)}
{/* Add comment form */}
{dispute.status === 'open' && (
<div className="flex gap-2">
<input
type="text"
className="input flex-1"
placeholder="Написать комментарий..."
value={commentText}
onChange={(e) => setCommentText(e.target.value)}
onKeyDown={(e) => {
if (e.key === 'Enter' && !e.shiftKey) {
e.preventDefault()
handleAddComment()
}
}}
/>
<Button
onClick={handleAddComment}
isLoading={isAddingComment}
disabled={!commentText.trim()}
>
<Send className="w-4 h-4" />
</Button>
</div>
)}
</div>
</CardContent>
</Card>
)}
</div>
)
}

View File

@@ -1,11 +1,11 @@
import { useState, useEffect, useRef } from 'react'
import { useParams, Link } from 'react-router-dom'
import { marathonsApi, wheelApi, gamesApi, eventsApi } from '@/api'
import type { Marathon, Assignment, SpinResult, Game, ActiveEvent, SwapCandidate, MySwapRequests, CommonEnemyLeaderboardEntry, EventAssignment, GameChoiceChallenges } from '@/types'
import { marathonsApi, wheelApi, gamesApi, eventsApi, assignmentsApi } from '@/api'
import type { Marathon, Assignment, SpinResult, Game, ActiveEvent, SwapCandidate, MySwapRequests, CommonEnemyLeaderboardEntry, EventAssignment, GameChoiceChallenges, ReturnedAssignment } from '@/types'
import { Button, Card, CardContent } from '@/components/ui'
import { SpinWheel } from '@/components/SpinWheel'
import { EventBanner } from '@/components/EventBanner'
import { Loader2, Upload, X, Gamepad2, ArrowLeftRight, Check, XCircle, Clock, Send, Trophy, Users, ArrowLeft } from 'lucide-react'
import { Loader2, Upload, X, Gamepad2, ArrowLeftRight, Check, XCircle, Clock, Send, Trophy, Users, ArrowLeft, AlertTriangle } from 'lucide-react'
export function PlayPage() {
const { id } = useParams<{ id: string }>()
@@ -53,6 +53,9 @@ export function PlayPage() {
const [eventComment, setEventComment] = useState('')
const [isEventCompleting, setIsEventCompleting] = useState(false)
// Returned assignments state
const [returnedAssignments, setReturnedAssignments] = useState<ReturnedAssignment[]>([])
const fileInputRef = useRef<HTMLInputElement>(null)
const eventFileInputRef = useRef<HTMLInputElement>(null)
@@ -138,18 +141,20 @@ export function PlayPage() {
const loadData = async () => {
if (!id) return
try {
const [marathonData, assignment, gamesData, eventData, eventAssignmentData] = await Promise.all([
const [marathonData, assignment, gamesData, eventData, eventAssignmentData, returnedData] = await Promise.all([
marathonsApi.get(parseInt(id)),
wheelApi.getCurrentAssignment(parseInt(id)),
gamesApi.list(parseInt(id), 'approved'),
eventsApi.getActive(parseInt(id)),
eventsApi.getEventAssignment(parseInt(id)),
assignmentsApi.getReturnedAssignments(parseInt(id)),
])
setMarathon(marathonData)
setCurrentAssignment(assignment)
setGames(gamesData)
setActiveEvent(eventData)
setEventAssignment(eventAssignmentData)
setReturnedAssignments(returnedData)
} catch (error) {
console.error('Failed to load data:', error)
} finally {
@@ -427,6 +432,45 @@ export function PlayPage() {
</div>
)}
{/* Returned assignments warning */}
{returnedAssignments.length > 0 && (
<Card className="mb-6 border-orange-500/50">
<CardContent>
<div className="flex items-center gap-2 mb-3">
<AlertTriangle className="w-5 h-5 text-orange-500" />
<h3 className="text-lg font-bold text-orange-400">Возвращённые задания</h3>
<span className="ml-auto px-2 py-0.5 bg-orange-500/20 text-orange-400 text-sm rounded">
{returnedAssignments.length}
</span>
</div>
<p className="text-gray-400 text-sm mb-4">
Эти задания были оспорены. После текущего задания вам нужно будет их переделать.
</p>
<div className="space-y-2">
{returnedAssignments.map((ra) => (
<div
key={ra.id}
className="p-3 bg-orange-500/10 border border-orange-500/20 rounded-lg"
>
<div className="flex items-start justify-between">
<div>
<p className="text-white font-medium">{ra.challenge.title}</p>
<p className="text-gray-400 text-sm">{ra.challenge.game.title}</p>
</div>
<span className="px-2 py-0.5 bg-green-500/20 text-green-400 text-xs rounded">
+{ra.challenge.points}
</span>
</div>
<p className="text-orange-300 text-xs mt-2">
Причина: {ra.dispute_reason}
</p>
</div>
))}
</div>
</CardContent>
</Card>
)}
{/* Tabs for Common Enemy event */}
{activeEvent?.event?.type === 'common_enemy' && (
<div className="flex gap-2 mb-6">

View File

@@ -158,7 +158,7 @@ export interface ChallengesPreviewResponse {
}
// Assignment types
export type AssignmentStatus = 'active' | 'completed' | 'dropped'
export type AssignmentStatus = 'active' | 'completed' | 'dropped' | 'returned'
export interface Assignment {
id: number
@@ -404,3 +404,57 @@ export interface PlatformStats {
games_count: number
total_participations: number
}
// Dispute types
export type DisputeStatus = 'open' | 'valid' | 'invalid'
export interface DisputeComment {
id: number
user: User
text: string
created_at: string
}
export interface DisputeVote {
user: User
vote: boolean // true = valid, false = invalid
created_at: string
}
export interface Dispute {
id: number
raised_by: User
reason: string
status: DisputeStatus
comments: DisputeComment[]
votes: DisputeVote[]
votes_valid: number
votes_invalid: number
my_vote: boolean | null
expires_at: string
created_at: string
resolved_at: string | null
}
export interface AssignmentDetail {
id: number
challenge: Challenge
participant: User
status: AssignmentStatus
proof_url: string | null
proof_image_url: string | null
proof_comment: string | null
points_earned: number
streak_at_completion: number | null
started_at: string
completed_at: string | null
can_dispute: boolean
dispute: Dispute | null
}
export interface ReturnedAssignment {
id: number
challenge: Challenge
original_completed_at: string
dispute_reason: string
}