Add dispute system

frontend/src/pages/AssignmentDetailPage.tsx

@@ -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>
+  )
+}

frontend/src/pages/PlayPage.tsx

@@ -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">