mirror of
https://github.com/arkorty/B.Tech-Project-III.git
synced 2026-04-19 12:41:48 +00:00
init
This commit is contained in:
310
dmtp/client/app/tasks/[taskId]/page.tsx
Normal file
310
dmtp/client/app/tasks/[taskId]/page.tsx
Normal file
@@ -0,0 +1,310 @@
|
||||
'use client';
|
||||
|
||||
import { api } from '@/lib/api';
|
||||
import { formatCurrency, formatTimeRemaining } from '@/lib/utils';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { motion } from 'framer-motion';
|
||||
import { AlertCircle, ArrowLeft, Award, CheckCircle2, Clock, Users, Wallet } from 'lucide-react';
|
||||
import Link from 'next/link';
|
||||
import { useParams } from 'next/navigation';
|
||||
import { LoadingSpinner } from '@/components/ui/LoadingSpinner';
|
||||
|
||||
export default function TaskDetailsPage() {
|
||||
const params = useParams();
|
||||
const taskId = params.taskId as string;
|
||||
|
||||
const { data, isLoading } = useQuery({
|
||||
queryKey: ['task', taskId],
|
||||
queryFn: () => api.tasks.getById(taskId),
|
||||
});
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="flex items-center justify-center min-h-[400px]">
|
||||
<LoadingSpinner size="lg" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const task = data?.data;
|
||||
|
||||
if (!task) {
|
||||
return (
|
||||
<div className="relative min-h-screen overflow-hidden">
|
||||
{/* Background */}
|
||||
<div className="absolute inset-0 overflow-hidden pointer-events-none">
|
||||
<motion.div
|
||||
className="absolute w-96 h-96 bg-linear-to-br from-green-500/20 to-green-600/10 blur-3xl"
|
||||
animate={{ scale: [1, 1.2, 1], opacity: [0.3, 0.5, 0.3] }}
|
||||
transition={{ duration: 8, repeat: Infinity }}
|
||||
style={{ top: "20%", left: "10%" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="relative z-10 max-w-3xl mx-auto px-4 py-32 text-center">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6 }}
|
||||
>
|
||||
<div className="inline-flex items-center justify-center w-16 h-16 bg-linear-to-br from-green-500/20 to-green-600/10 mb-6">
|
||||
<AlertCircle className="w-8 h-8 text-green-500" />
|
||||
</div>
|
||||
<h2 className="text-3xl font-bold text-foreground mb-4">Task Not Found</h2>
|
||||
<p className="text-foreground/60 mb-8">This task may have been removed or doesn't exist.</p>
|
||||
<Link href="/tasks">
|
||||
<motion.button
|
||||
whileHover={{ scale: 1.05 }}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
className="inline-flex items-center gap-2 px-6 py-3 bg-linear-to-r from-green-500 to-green-600 text-white font-semibold"
|
||||
>
|
||||
<ArrowLeft className="w-4 h-4" />
|
||||
Back to Tasks
|
||||
</motion.button>
|
||||
</Link>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const progressPercentage = ((task.maxSubmissions - task.spotsRemaining) / task.maxSubmissions) * 100;
|
||||
|
||||
return (
|
||||
<div className="relative min-h-screen overflow-hidden">
|
||||
{/* Animated Background */}
|
||||
<div className="absolute inset-0 overflow-hidden pointer-events-none">
|
||||
<motion.div
|
||||
className="absolute w-96 h-96 bg-linear-to-br from-green-500/20 to-green-600/10 blur-3xl"
|
||||
animate={{
|
||||
x: [0, 100, 0],
|
||||
y: [0, 50, 0],
|
||||
}}
|
||||
transition={{ duration: 20, repeat: Infinity }}
|
||||
style={{ top: "10%", left: "-10%" }}
|
||||
/>
|
||||
<motion.div
|
||||
className="absolute w-96 h-96 bg-linear-to-br from-green-600/10 to-green-500/20 blur-3xl"
|
||||
animate={{
|
||||
x: [0, -100, 0],
|
||||
y: [0, -50, 0],
|
||||
}}
|
||||
transition={{ duration: 25, repeat: Infinity }}
|
||||
style={{ bottom: "10%", right: "-10%" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="relative z-10 max-w-5xl mx-auto px-4 py-12 pt-32">
|
||||
{/* Back Button */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: -20 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ duration: 0.5 }}
|
||||
>
|
||||
<Link
|
||||
href="/tasks"
|
||||
className="inline-flex items-center gap-2 text-green-500 hover:text-green-600 mb-8 font-medium transition-colors"
|
||||
>
|
||||
<ArrowLeft className="w-4 h-4" />
|
||||
Back to Tasks
|
||||
</Link>
|
||||
</motion.div>
|
||||
|
||||
{/* Main Card */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6 }}
|
||||
className="bg-background/80 backdrop-blur-md border border-green-500/20 overflow-hidden"
|
||||
>
|
||||
{/* Header Section */}
|
||||
<div className="p-8 border-b border-green-500/10">
|
||||
<div className="flex items-start justify-between mb-6">
|
||||
<div className="flex-1">
|
||||
<motion.h1
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ delay: 0.2 }}
|
||||
className="text-3xl sm:text-4xl font-bold text-foreground mb-4"
|
||||
>
|
||||
{task.title}
|
||||
</motion.h1>
|
||||
|
||||
<div className="flex flex-wrap gap-3">
|
||||
<motion.span
|
||||
initial={{ scale: 0 }}
|
||||
animate={{ scale: 1 }}
|
||||
transition={{ delay: 0.3, type: "spring" }}
|
||||
className="px-4 py-2 bg-linear-to-r from-green-500/20 to-green-600/20 border border-green-500/30 text-green-500 text-sm font-semibold"
|
||||
>
|
||||
{task.taskType.replace('_', ' ')}
|
||||
</motion.span>
|
||||
|
||||
<motion.span
|
||||
initial={{ scale: 0 }}
|
||||
animate={{ scale: 1 }}
|
||||
transition={{ delay: 0.4, type: "spring" }}
|
||||
className="px-4 py-2 bg-linear-to-r from-green-500 to-green-600 text-white text-sm font-bold flex items-center gap-1"
|
||||
>
|
||||
<motion.div
|
||||
animate={{ scale: [1, 1.2, 1] }}
|
||||
transition={{ duration: 2, repeat: Infinity }}
|
||||
className="w-2 h-2 bg-white "
|
||||
/>
|
||||
{formatCurrency(task.paymentAmount)}
|
||||
</motion.span>
|
||||
|
||||
{task.isExpiringSoon && (
|
||||
<motion.span
|
||||
initial={{ scale: 0 }}
|
||||
animate={{ scale: 1 }}
|
||||
transition={{ delay: 0.5, type: "spring" }}
|
||||
className="px-4 py-2 bg-green-500/10 border border-green-500/30 text-green-500 text-sm font-semibold flex items-center gap-1"
|
||||
>
|
||||
<Clock className="w-4 h-4" />
|
||||
Expiring Soon
|
||||
</motion.span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Progress Bar */}
|
||||
<div className="space-y-2">
|
||||
<div className="flex justify-between text-sm text-foreground/60">
|
||||
<span>{task.maxSubmissions - task.spotsRemaining} completed</span>
|
||||
<span>{task.spotsRemaining} spots left</span>
|
||||
</div>
|
||||
<div className="w-full bg-foreground/10 h-2 overflow-hidden">
|
||||
<motion.div
|
||||
className="h-full bg-linear-to-r from-green-500 to-green-600 "
|
||||
initial={{ width: 0 }}
|
||||
animate={{ width: `${progressPercentage}%` }}
|
||||
transition={{ duration: 1, delay: 0.6 }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Content Section */}
|
||||
<div className="p-8 space-y-8">
|
||||
{/* Description */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.3 }}
|
||||
>
|
||||
<h2 className="text-2xl font-bold text-foreground mb-4 flex items-center gap-2">
|
||||
<LoadingSpinner />
|
||||
Description
|
||||
</h2>
|
||||
<p className="text-foreground/70 leading-relaxed text-lg">{task.description}</p>
|
||||
</motion.div>
|
||||
|
||||
{/* Requirements */}
|
||||
{task.verificationCriteria?.requiredFields && task.verificationCriteria.requiredFields.length > 0 && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.4 }}
|
||||
>
|
||||
<h2 className="text-2xl font-bold text-foreground mb-4 flex items-center gap-2">
|
||||
<CheckCircle2 className="w-5 h-5 text-green-500" />
|
||||
Requirements
|
||||
</h2>
|
||||
<ul className="space-y-3">
|
||||
{task.verificationCriteria.requiredFields.map((field: string, index: number) => (
|
||||
<motion.li
|
||||
key={index}
|
||||
initial={{ opacity: 0, x: -20 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ delay: 0.5 + index * 0.1 }}
|
||||
className="flex items-start gap-3 text-foreground/70"
|
||||
>
|
||||
<div className="mt-1 w-1.5 h-1.5 bg-linear-to-r from-green-500 to-green-600 flex-shrink-0" />
|
||||
<span>{field}</span>
|
||||
</motion.li>
|
||||
))}
|
||||
</ul>
|
||||
</motion.div>
|
||||
)}
|
||||
|
||||
{/* Stats Grid */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.5 }}
|
||||
className="grid grid-cols-2 md:grid-cols-4 gap-4"
|
||||
>
|
||||
{[
|
||||
{ icon: Wallet, label: 'Payment', value: formatCurrency(task.paymentAmount), color: 'from-green-500 to-green-600' },
|
||||
{ icon: Users, label: 'Spots Left', value: `${task.spotsRemaining}/${task.maxSubmissions}`, color: 'from-green-600 to-green-700' },
|
||||
{ icon: Clock, label: 'Time Left', value: formatTimeRemaining(task.expiresAt), color: 'from-green-400 to-green-500' },
|
||||
{ icon: Award, label: 'Submissions', value: task.submissionCount.toString(), color: 'from-green-500 to-green-600' },
|
||||
].map((stat, index) => (
|
||||
<motion.div
|
||||
key={index}
|
||||
initial={{ scale: 0 }}
|
||||
animate={{ scale: 1 }}
|
||||
transition={{ delay: 0.6 + index * 0.1, type: "spring" }}
|
||||
className="bg-linear-to-br from-green-500/10 to-green-600/5 border border-green-500/20 p-4 text-center"
|
||||
>
|
||||
<div className={`inline-flex items-center justify-center w-10 h-10 bg-linear-to-r ${stat.color} mb-2`}>
|
||||
<stat.icon className="w-5 h-5 text-white" />
|
||||
</div>
|
||||
<div className="text-xs text-foreground/60 mb-1">{stat.label}</div>
|
||||
<div className="text-lg font-bold text-foreground">{stat.value}</div>
|
||||
</motion.div>
|
||||
))}
|
||||
</motion.div>
|
||||
|
||||
{/* Requester Info */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.7 }}
|
||||
className="bg-linear-to-br from-green-500/10 to-green-600/5 border border-green-500/20 p-6"
|
||||
>
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="w-12 h-12 bg-linear-to-r from-green-500 to-green-600 flex items-center justify-center flex-shrink-0">
|
||||
<Wallet className="w-6 h-6 text-white" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<div className="text-sm text-foreground/60 mb-1">Posted by</div>
|
||||
<div className="font-mono text-sm text-foreground bg-background/50 px-3 py-2 break-all mb-2">
|
||||
{task.requester.walletAddress}
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-sm">
|
||||
<span className="text-foreground/60">Reputation:</span>
|
||||
<div className="flex items-center gap-1">
|
||||
<Award className="w-4 h-4 text-green-500" />
|
||||
<span className="font-semibold text-green-500">{task.requester.reputationScore}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* Action Button */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.8 }}
|
||||
>
|
||||
<Link href={`/tasks/${taskId}/submit`}>
|
||||
<motion.button
|
||||
whileHover={task.spotsRemaining > 0 && task.canSubmit ? { scale: 1.02 } : {}}
|
||||
whileTap={task.spotsRemaining > 0 && task.canSubmit ? { scale: 0.98 } : {}}
|
||||
disabled={task.spotsRemaining === 0 || !task.canSubmit}
|
||||
className="w-full py-5 bg-linear-to-r from-green-500 to-green-600 text-white font-bold text-lg hover:from-green-600 hover:to-green-700 transition-all disabled:from-gray-400 disabled:to-gray-500 disabled:cursor-not-allowed shadow-lg shadow-green-500/25 disabled:shadow-none"
|
||||
>
|
||||
{task.spotsRemaining === 0 ? 'No Spots Available' : !task.canSubmit ? 'Cannot Submit' : 'Submit Task'}
|
||||
</motion.button>
|
||||
</Link>
|
||||
</motion.div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
715
dmtp/client/app/tasks/[taskId]/submit/page.tsx
Normal file
715
dmtp/client/app/tasks/[taskId]/submit/page.tsx
Normal file
@@ -0,0 +1,715 @@
|
||||
'use client';
|
||||
|
||||
import { useWallet } from '@/hooks/useWallet';
|
||||
import { api } from '@/lib/api';
|
||||
import { TaskType } from '@/types';
|
||||
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
|
||||
import { motion } from 'framer-motion';
|
||||
import { AlertTriangle, ArrowLeft, CheckCircle2, FileText, Upload, X } from 'lucide-react';
|
||||
import { useParams, useRouter } from 'next/navigation';
|
||||
import { useState } from 'react';
|
||||
import { LoadingSpinner } from '@/components/ui/LoadingSpinner';
|
||||
|
||||
export default function SubmitTaskPage() {
|
||||
const params = useParams();
|
||||
const router = useRouter();
|
||||
const queryClient = useQueryClient();
|
||||
const { isConnected } = useWallet();
|
||||
|
||||
const taskId = params.taskId as string;
|
||||
const [formData, setFormData] = useState({
|
||||
text: '',
|
||||
imageFile: null as File | null,
|
||||
labels: '',
|
||||
answers: [] as string[],
|
||||
comment: '',
|
||||
decision: '',
|
||||
customFields: {} as Record<string, any>
|
||||
});
|
||||
const [errors, setErrors] = useState<Record<string, string>>({});
|
||||
const [imagePreview, setImagePreview] = useState<string | null>(null);
|
||||
|
||||
const { data: taskData, isLoading } = useQuery({
|
||||
queryKey: ['task', taskId],
|
||||
queryFn: () => api.tasks.getById(taskId),
|
||||
});
|
||||
|
||||
const submitMutation = useMutation({
|
||||
mutationFn: (data: any) => api.submissions.submit(data),
|
||||
onSuccess: (response) => {
|
||||
queryClient.invalidateQueries({ queryKey: ['tasks'] });
|
||||
queryClient.invalidateQueries({ queryKey: ['submissions'] });
|
||||
|
||||
const submissionId = response.data.submissionId;
|
||||
router.push(`/submissions/${submissionId}`);
|
||||
},
|
||||
onError: (error: any) => {
|
||||
alert(error.response?.data?.error?.message || 'Submission failed');
|
||||
},
|
||||
});
|
||||
|
||||
const task = taskData?.data;
|
||||
const requiredFields: string[] = task?.verificationCriteria?.requiredFields || [];
|
||||
|
||||
// Helper function to check if a field is required
|
||||
const isFieldRequired = (fieldName: string) => requiredFields.includes(fieldName);
|
||||
|
||||
// Helper function to render survey questions
|
||||
const getSurveyQuestions = () => {
|
||||
// This could come from the task description or verification criteria
|
||||
// For now, we'll use some default questions based on task type
|
||||
if (task?.taskType === TaskType.SURVEY) {
|
||||
return [
|
||||
'How would you rate the overall user experience? (1-5)',
|
||||
'What features did you find most useful?',
|
||||
'What improvements would you suggest?'
|
||||
];
|
||||
}
|
||||
// You could also get questions from task.verificationCriteria.questions if available
|
||||
return task?.verificationCriteria?.questions || [];
|
||||
};
|
||||
|
||||
const handleImageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const file = e.target.files?.[0];
|
||||
if (!file) return;
|
||||
|
||||
// Validate file size (5MB)
|
||||
if (file.size > 5 * 1024 * 1024) {
|
||||
setErrors({ ...errors, image: 'File size must be less than 5MB' });
|
||||
return;
|
||||
}
|
||||
|
||||
// Validate file type
|
||||
const validTypes = ['image/jpeg', 'image/jpg', 'image/png', 'image/webp'];
|
||||
if (!validTypes.includes(file.type)) {
|
||||
setErrors({ ...errors, image: 'Only JPG, PNG, WebP images are allowed' });
|
||||
return;
|
||||
}
|
||||
|
||||
// Create preview
|
||||
const reader = new FileReader();
|
||||
reader.onloadend = () => {
|
||||
setImagePreview(reader.result as string);
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
|
||||
setFormData({ ...formData, imageFile: file });
|
||||
setErrors({ ...errors, image: '' });
|
||||
};
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
|
||||
if (!isConnected) {
|
||||
alert('Please connect your wallet first');
|
||||
return;
|
||||
}
|
||||
|
||||
// Dynamic validation based on verification criteria
|
||||
const newErrors: Record<string, string> = {};
|
||||
|
||||
requiredFields.forEach((field: string) => {
|
||||
switch (field) {
|
||||
case 'text':
|
||||
if (!formData.text.trim()) {
|
||||
newErrors.text = 'Text is required';
|
||||
}
|
||||
break;
|
||||
case 'image':
|
||||
if (!formData.imageFile) {
|
||||
newErrors.image = 'Image is required';
|
||||
}
|
||||
break;
|
||||
case 'labels':
|
||||
if (!formData.labels.trim()) {
|
||||
newErrors.labels = 'Labels are required';
|
||||
}
|
||||
break;
|
||||
case 'answers':
|
||||
if (!formData.answers || formData.answers.length === 0 || formData.answers.some(answer => !answer?.trim())) {
|
||||
newErrors.answers = 'All survey questions must be answered';
|
||||
}
|
||||
break;
|
||||
case 'comment':
|
||||
if (!formData.comment.trim()) {
|
||||
newErrors.comment = 'Comment is required';
|
||||
}
|
||||
break;
|
||||
case 'decision':
|
||||
if (!formData.decision) {
|
||||
newErrors.decision = 'Decision is required';
|
||||
}
|
||||
break;
|
||||
}
|
||||
});
|
||||
|
||||
if (Object.keys(newErrors).length > 0) {
|
||||
setErrors(newErrors);
|
||||
return;
|
||||
}
|
||||
|
||||
// Prepare submission data dynamically
|
||||
const submissionData: any = {};
|
||||
|
||||
requiredFields.forEach((field: string) => {
|
||||
switch (field) {
|
||||
case 'text':
|
||||
submissionData.text = formData.text;
|
||||
break;
|
||||
case 'image':
|
||||
// In production, upload to cloud storage (S3, Cloudinary, etc.)
|
||||
submissionData.imageUrls = ['https://placeholder.com/image.jpg'];
|
||||
submissionData.metadata = { fileName: formData.imageFile?.name };
|
||||
break;
|
||||
case 'labels':
|
||||
submissionData.labels = formData.labels.split(',').map(label => label.trim());
|
||||
break;
|
||||
case 'answers':
|
||||
submissionData.answers = formData.answers;
|
||||
break;
|
||||
case 'comment':
|
||||
submissionData.comment = formData.comment;
|
||||
break;
|
||||
case 'decision':
|
||||
submissionData.decision = formData.decision;
|
||||
break;
|
||||
}
|
||||
});
|
||||
|
||||
// Submit
|
||||
await submitMutation.mutateAsync({
|
||||
taskId,
|
||||
submissionData,
|
||||
});
|
||||
};
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="flex items-center justify-center min-h-[400px]">
|
||||
<LoadingSpinner size="lg" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!task) {
|
||||
return (
|
||||
<div className="relative min-h-screen overflow-hidden">
|
||||
<div className="absolute inset-0 overflow-hidden pointer-events-none">
|
||||
<motion.div
|
||||
className="absolute w-96 h-96 bg-linear-to-br from-green-500/20 to-green-600/10 blur-3xl"
|
||||
animate={{ scale: [1, 1.2, 1], opacity: [0.3, 0.5, 0.3] }}
|
||||
transition={{ duration: 8, repeat: Infinity }}
|
||||
style={{ top: "20%", left: "10%" }}
|
||||
/>
|
||||
</div>
|
||||
<div className="relative z-10 text-center py-32">
|
||||
<h2 className="text-2xl font-bold text-foreground">Task not found</h2>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="relative min-h-screen overflow-hidden">
|
||||
{/* Animated Background */}
|
||||
<div className="absolute inset-0 overflow-hidden pointer-events-none">
|
||||
<motion.div
|
||||
className="absolute w-96 h-96 bg-linear-to-br from-green-500/20 to-green-600/10 blur-3xl"
|
||||
animate={{
|
||||
x: [0, 100, 0],
|
||||
y: [0, 50, 0],
|
||||
}}
|
||||
transition={{ duration: 20, repeat: Infinity }}
|
||||
style={{ top: "10%", left: "-10%" }}
|
||||
/>
|
||||
<motion.div
|
||||
className="absolute w-96 h-96 bg-linear-to-br from-green-600/10 to-green-500/20 blur-3xl"
|
||||
animate={{
|
||||
x: [0, -100, 0],
|
||||
y: [0, -50, 0],
|
||||
}}
|
||||
transition={{ duration: 25, repeat: Infinity }}
|
||||
style={{ bottom: "10%", right: "-10%" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="relative z-10 max-w-4xl mx-auto px-4 py-12 pt-32">
|
||||
{/* Back Button */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: -20 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ duration: 0.5 }}
|
||||
className="mb-8"
|
||||
>
|
||||
<button
|
||||
onClick={() => router.back()}
|
||||
className="inline-flex items-center gap-2 text-green-500 hover:text-green-600 font-medium transition-colors"
|
||||
>
|
||||
<ArrowLeft className="w-4 h-4" />
|
||||
Back to Task
|
||||
</button>
|
||||
</motion.div>
|
||||
|
||||
{/* Task Info Card */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6 }}
|
||||
className="bg-linear-to-br from-green-500/10 to-green-600/5 backdrop-blur-md border border-green-500/30 p-6 mb-8"
|
||||
>
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="w-12 h-12 bg-linear-to-r from-green-500 to-green-600 flex items-center justify-center flex-shrink-0">
|
||||
<LoadingSpinner />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h2 className="text-2xl font-bold text-foreground mb-2">{task.title}</h2>
|
||||
<p className="text-foreground/70 mb-3">{task.description}</p>
|
||||
<div className="inline-flex items-center gap-2 px-4 py-2 bg-linear-to-r from-green-500 to-green-600 text-white font-bold">
|
||||
<motion.div
|
||||
animate={{ scale: [1, 1.2, 1] }}
|
||||
transition={{ duration: 2, repeat: Infinity }}
|
||||
className="w-2 h-2 bg-white "
|
||||
/>
|
||||
Payment: ${task.paymentAmount} cUSD
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* Submission Form */}
|
||||
<motion.form
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, delay: 0.2 }}
|
||||
onSubmit={handleSubmit}
|
||||
className="bg-background/80 backdrop-blur-md border border-green-500/20 p-8"
|
||||
>
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<div className="w-10 h-10 bg-linear-to-r from-green-500 to-green-600 flex items-center justify-center">
|
||||
<FileText className="w-5 h-5 text-white" />
|
||||
</div>
|
||||
<h3 className="text-2xl font-bold text-foreground">Submit Your Work</h3>
|
||||
</div>
|
||||
|
||||
{/* Text Field - Dynamic based on required fields */}
|
||||
{isFieldRequired('text') && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.3 }}
|
||||
className="mb-6"
|
||||
>
|
||||
<label className="block text-sm font-semibold text-foreground mb-3">
|
||||
{task.taskType === TaskType.TEXT_VERIFICATION ? 'Your Response' :
|
||||
task.taskType === TaskType.CONTENT_MODERATION ? 'Comment to Review' : 'Text'} *
|
||||
</label>
|
||||
<div className="relative">
|
||||
<textarea
|
||||
value={formData.text}
|
||||
onChange={(e) => setFormData({ ...formData, text: e.target.value })}
|
||||
rows={task.taskType === TaskType.TEXT_VERIFICATION ? 8 : 4}
|
||||
placeholder={
|
||||
task.taskType === TaskType.TEXT_VERIFICATION ? "Enter your response here..." :
|
||||
task.taskType === TaskType.CONTENT_MODERATION ? "Paste the comment to review here..." :
|
||||
"Enter your text here..."
|
||||
}
|
||||
className={`w-full px-4 py-3 bg-background/50 border focus:ring-2 focus:ring-green-500 focus:border-transparent transition-all ${errors.text ? 'border-red-500' : 'border-green-500/30'
|
||||
} text-foreground placeholder:text-foreground/40`}
|
||||
/>
|
||||
{errors.text && (
|
||||
<motion.p
|
||||
initial={{ opacity: 0, y: -10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
className="mt-2 text-sm text-red-500 flex items-center gap-1"
|
||||
>
|
||||
<AlertTriangle className="w-4 h-4" />
|
||||
{errors.text}
|
||||
</motion.p>
|
||||
)}
|
||||
<div className="mt-2 flex items-center justify-between text-sm">
|
||||
<span className="text-foreground/60">{formData.text.length} characters</span>
|
||||
{formData.text.length > 0 && (
|
||||
<span className="text-green-500 flex items-center gap-1">
|
||||
<CheckCircle2 className="w-4 h-4" />
|
||||
Looking good!
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
|
||||
{/* Comment Field (for content moderation when text is not required) */}
|
||||
{isFieldRequired('comment') && !isFieldRequired('text') && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.3 }}
|
||||
className="mb-6"
|
||||
>
|
||||
<label className="block text-sm font-semibold text-foreground mb-3">
|
||||
Comment to Review *
|
||||
</label>
|
||||
<div className="relative">
|
||||
<textarea
|
||||
value={formData.comment}
|
||||
onChange={(e) => setFormData({ ...formData, comment: e.target.value })}
|
||||
rows={4}
|
||||
placeholder="Paste the comment to review here..."
|
||||
className={`w-full px-4 py-3 bg-background/50 border focus:ring-2 focus:ring-green-500 focus:border-transparent transition-all ${errors.comment ? 'border-red-500' : 'border-green-500/30'
|
||||
} text-foreground placeholder:text-foreground/40`}
|
||||
/>
|
||||
{errors.comment && (
|
||||
<motion.p
|
||||
initial={{ opacity: 0, y: -10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
className="mt-2 text-sm text-red-500 flex items-center gap-1"
|
||||
>
|
||||
<AlertTriangle className="w-4 h-4" />
|
||||
{errors.comment}
|
||||
</motion.p>
|
||||
)}
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
|
||||
{/* Decision Field (for content moderation) */}
|
||||
{isFieldRequired('decision') && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.35 }}
|
||||
className="mb-6"
|
||||
>
|
||||
<label className="block text-sm font-semibold text-foreground mb-3">
|
||||
Moderation Decision *
|
||||
</label>
|
||||
<div className="relative">
|
||||
<select
|
||||
value={formData.decision}
|
||||
onChange={(e) => setFormData({ ...formData, decision: e.target.value })}
|
||||
className={`w-full px-4 py-3 bg-background/50 border focus:ring-2 focus:ring-green-500 focus:border-transparent transition-all ${errors.decision ? 'border-red-500' : 'border-green-500/30'
|
||||
} text-foreground`}
|
||||
>
|
||||
<option value="">Select a decision...</option>
|
||||
<option value="approved">✅ Approve - Content is appropriate</option>
|
||||
<option value="rejected">❌ Reject - Content violates rules</option>
|
||||
<option value="flagged">🚩 Flag for Review - Needs human review</option>
|
||||
</select>
|
||||
{errors.decision && (
|
||||
<motion.p
|
||||
initial={{ opacity: 0, y: -10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
className="mt-2 text-sm text-red-500 flex items-center gap-1"
|
||||
>
|
||||
<AlertTriangle className="w-4 h-4" />
|
||||
{errors.decision}
|
||||
</motion.p>
|
||||
)}
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
|
||||
{/* Labels Field (for image labeling) */}
|
||||
{isFieldRequired('labels') && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.4 }}
|
||||
className="mb-6"
|
||||
>
|
||||
<label className="block text-sm font-semibold text-foreground mb-3">
|
||||
Image Labels *
|
||||
</label>
|
||||
<div className="relative">
|
||||
<input
|
||||
type="text"
|
||||
value={formData.labels}
|
||||
onChange={(e) => setFormData({ ...formData, labels: e.target.value })}
|
||||
placeholder="Enter labels separated by commas (e.g., car, tree, building)"
|
||||
className={`w-full px-4 py-3 bg-background/50 border focus:ring-2 focus:ring-green-500 focus:border-transparent transition-all ${errors.labels ? 'border-red-500' : 'border-green-500/30'
|
||||
} text-foreground placeholder:text-foreground/40`}
|
||||
/>
|
||||
{errors.labels && (
|
||||
<motion.p
|
||||
initial={{ opacity: 0, y: -10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
className="mt-2 text-sm text-red-500 flex items-center gap-1"
|
||||
>
|
||||
<AlertTriangle className="w-4 h-4" />
|
||||
{errors.labels}
|
||||
</motion.p>
|
||||
)}
|
||||
<p className="mt-2 text-sm text-foreground/60">
|
||||
Separate multiple labels with commas
|
||||
</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
|
||||
{/* Survey Answers Field */}
|
||||
{isFieldRequired('answers') && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.45 }}
|
||||
className="mb-6"
|
||||
>
|
||||
<label className="block text-sm font-semibold text-foreground mb-4">
|
||||
Survey Questions *
|
||||
</label>
|
||||
<div className="space-y-4">
|
||||
{getSurveyQuestions().map((question: string, index: number) => (
|
||||
<motion.div
|
||||
key={index}
|
||||
initial={{ opacity: 0, x: -20 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ delay: 0.5 + index * 0.1 }}
|
||||
className="bg-linear-to-br from-green-500/5 to-green-600/5 backdrop-blur-sm border border-green-500/20 p-4"
|
||||
>
|
||||
<p className="text-sm font-medium text-foreground mb-3 flex items-center gap-2">
|
||||
<span className="w-6 h-6 bg-linear-to-r from-green-500 to-green-600 text-white flex items-center justify-center text-xs font-bold">
|
||||
{index + 1}
|
||||
</span>
|
||||
{question}
|
||||
</p>
|
||||
<textarea
|
||||
value={formData.answers[index] || ''}
|
||||
onChange={(e) => {
|
||||
const newAnswers = [...formData.answers];
|
||||
newAnswers[index] = e.target.value;
|
||||
setFormData({ ...formData, answers: newAnswers });
|
||||
}}
|
||||
rows={3}
|
||||
placeholder="Enter your answer here..."
|
||||
className="w-full px-4 py-3 bg-background/50 border border-green-500/20 focus:ring-2 focus:ring-green-500 focus:border-transparent transition-all text-foreground placeholder:text-foreground/40"
|
||||
/>
|
||||
</motion.div>
|
||||
))}
|
||||
</div>
|
||||
{errors.answers && (
|
||||
<motion.p
|
||||
initial={{ opacity: 0, y: -10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
className="mt-3 text-sm text-red-500 flex items-center gap-1"
|
||||
>
|
||||
<AlertTriangle className="w-4 h-4" />
|
||||
{errors.answers}
|
||||
</motion.p>
|
||||
)}
|
||||
</motion.div>
|
||||
)}
|
||||
|
||||
{/* Image Labeling */}
|
||||
{task.taskType === TaskType.IMAGE_LABELING && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.3 }}
|
||||
className="mb-6"
|
||||
>
|
||||
<label className="block text-sm font-semibold text-foreground mb-3">
|
||||
Upload Image *
|
||||
</label>
|
||||
<div className={`relative border-2 border-dashed p-8 text-center transition-all ${errors.image ? 'border-red-500' : 'border-green-500/30 hover:border-green-500/50'
|
||||
}`}>
|
||||
{imagePreview ? (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.9 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
className="relative"
|
||||
>
|
||||
<img
|
||||
src={imagePreview}
|
||||
alt="Preview"
|
||||
className="max-h-96 mx-auto shadow-lg"
|
||||
/>
|
||||
<motion.button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setImagePreview(null);
|
||||
setFormData({ ...formData, imageFile: null });
|
||||
}}
|
||||
whileHover={{ scale: 1.05 }}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
className="absolute top-4 right-4 bg-red-500 text-white p-2 hover:bg-red-600 transition-colors shadow-lg"
|
||||
>
|
||||
<X className="w-5 h-5" />
|
||||
</motion.button>
|
||||
<div className="mt-4 text-sm text-foreground/60">
|
||||
{formData.imageFile?.name}
|
||||
</div>
|
||||
</motion.div>
|
||||
) : (
|
||||
<div>
|
||||
<motion.div
|
||||
animate={{ y: [0, -10, 0] }}
|
||||
transition={{ duration: 2, repeat: Infinity }}
|
||||
className="inline-flex items-center justify-center w-20 h-20 bg-linear-to-br from-green-500/20 to-green-600/10 mb-4"
|
||||
>
|
||||
<Upload className="w-10 h-10 text-green-500" />
|
||||
</motion.div>
|
||||
<input
|
||||
type="file"
|
||||
accept="image/*"
|
||||
onChange={handleImageChange}
|
||||
className="hidden"
|
||||
id="image-upload"
|
||||
/>
|
||||
<label
|
||||
htmlFor="image-upload"
|
||||
className="cursor-pointer"
|
||||
>
|
||||
<motion.div
|
||||
whileHover={{ scale: 1.05 }}
|
||||
whileTap={{ scale: 0.95 }}
|
||||
className="inline-block px-6 py-3 bg-linear-to-r from-green-500 to-green-600 text-white hover:from-green-600 hover:to-green-700 transition-all font-semibold shadow-lg shadow-green-500/25"
|
||||
>
|
||||
Choose Image
|
||||
</motion.div>
|
||||
</label>
|
||||
<p className="mt-3 text-sm text-foreground/60">PNG, JPG, WebP up to 5MB</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{errors.image && (
|
||||
<motion.p
|
||||
initial={{ opacity: 0, y: -10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
className="mt-2 text-sm text-red-500 flex items-center gap-1"
|
||||
>
|
||||
<AlertTriangle className="w-4 h-4" />
|
||||
{errors.image}
|
||||
</motion.p>
|
||||
)}
|
||||
</motion.div>
|
||||
)}
|
||||
|
||||
{/* Task-specific Instructions */}
|
||||
{(isFieldRequired('text') && isFieldRequired('image')) && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.5 }}
|
||||
className="bg-linear-to-br from-blue-500/10 to-blue-600/5 border border-blue-500/30 p-4 mb-6"
|
||||
>
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="w-8 h-8 bg-linear-to-r from-blue-500 to-blue-600 flex items-center justify-center flex-shrink-0">
|
||||
<FileText className="w-4 h-4 text-white" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-foreground font-medium mb-1">📋 Mixed Task Instructions</p>
|
||||
<p className="text-sm text-foreground/70">
|
||||
This task requires both text and image inputs. Please provide both components to complete your submission.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
|
||||
{/* Additional Context for Complex Tasks */}
|
||||
{task?.verificationCriteria?.aiPrompt && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.52 }}
|
||||
className="bg-linear-to-br from-purple-500/10 to-purple-600/5 border border-purple-500/30 p-4 mb-6"
|
||||
>
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="w-8 h-8 bg-linear-to-r from-purple-500 to-purple-600 flex items-center justify-center flex-shrink-0">
|
||||
<LoadingSpinner />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-foreground font-medium mb-1">🎯 Verification Criteria</p>
|
||||
<p className="text-sm text-foreground/70">
|
||||
AI will verify your submission based on: {task.verificationCriteria.aiPrompt}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
|
||||
{/* Required Fields Summary */}
|
||||
{requiredFields.length > 0 && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.54 }}
|
||||
className="bg-linear-to-br from-green-500/10 to-green-600/5 border border-green-500/30 p-4 mb-6"
|
||||
>
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="w-8 h-8 bg-linear-to-r from-green-500 to-green-600 flex items-center justify-center flex-shrink-0">
|
||||
<CheckCircle2 className="w-4 h-4 text-white" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<p className="text-sm text-foreground font-medium mb-2">✅ Required Fields</p>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{requiredFields.map((field: string) => (
|
||||
<motion.span
|
||||
key={field}
|
||||
initial={{ opacity: 0, scale: 0.8 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
transition={{ delay: 0.56 + requiredFields.indexOf(field) * 0.05 }}
|
||||
className="px-3 py-1 bg-green-500/20 text-green-700 dark:text-green-300 text-xs font-medium border border-green-500/30"
|
||||
>
|
||||
{field.charAt(0).toUpperCase() + field.slice(1)}
|
||||
</motion.span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
|
||||
{/* Warning */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.6 }}
|
||||
className="bg-linear-to-br from-green-500/10 to-green-600/5 border border-green-500/30 p-4 mb-6"
|
||||
>
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="w-8 h-8 bg-linear-to-r from-green-500 to-green-600 flex items-center justify-center flex-shrink-0">
|
||||
<LoadingSpinner />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-foreground font-medium mb-1">AI Verification</p>
|
||||
<p className="text-sm text-foreground/70">
|
||||
Your submission will be automatically verified by Gemini AI. Please ensure it meets all requirements to avoid rejection.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* Submit Button */}
|
||||
<motion.button
|
||||
type="submit"
|
||||
disabled={submitMutation.isPending || !isConnected}
|
||||
whileHover={submitMutation.isPending || !isConnected ? {} : { scale: 1.02 }}
|
||||
whileTap={submitMutation.isPending || !isConnected ? {} : { scale: 0.98 }}
|
||||
className="w-full py-5 bg-linear-to-r from-green-500 to-green-600 text-white font-bold hover:from-green-600 hover:to-green-700 transition-all disabled:from-gray-400 disabled:to-gray-500 disabled:cursor-not-allowed text-lg shadow-lg shadow-green-500/25 disabled:shadow-none"
|
||||
>
|
||||
{submitMutation.isPending ? (
|
||||
<span className="flex items-center justify-center gap-2">
|
||||
<motion.div
|
||||
animate={{ rotate: 360 }}
|
||||
transition={{ duration: 1, repeat: Infinity, ease: "linear" }}
|
||||
>
|
||||
<LoadingSpinner />
|
||||
</motion.div>
|
||||
Submitting...
|
||||
</span>
|
||||
) : !isConnected ? (
|
||||
'Connect Wallet to Submit'
|
||||
) : (
|
||||
<span className="flex items-center justify-center gap-2">
|
||||
Submit Task
|
||||
<CheckCircle2 className="w-5 h-5" />
|
||||
</span>
|
||||
)}
|
||||
</motion.button>
|
||||
</motion.form>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
262
dmtp/client/app/tasks/page.tsx
Normal file
262
dmtp/client/app/tasks/page.tsx
Normal file
@@ -0,0 +1,262 @@
|
||||
"use client";
|
||||
|
||||
import { api } from "@/lib/api";
|
||||
import { formatCurrency, formatTimeRemaining } from "@/lib/utils";
|
||||
import { Task, TaskStatus, TaskType } from "@/types";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { motion } from "framer-motion";
|
||||
import { Filter } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
import { useState } from "react";
|
||||
import { LoadingSpinner } from "@/components/ui/LoadingSpinner";
|
||||
|
||||
function TaskCard({ task, index }: { task: Task; index: number }) {
|
||||
const taskTypeLabels: Record<TaskType, string> = {
|
||||
[TaskType.TEXT_VERIFICATION]: "Text",
|
||||
[TaskType.IMAGE_LABELING]: "Image",
|
||||
[TaskType.SURVEY]: "Survey",
|
||||
[TaskType.CONTENT_MODERATION]: "Moderation",
|
||||
};
|
||||
|
||||
const taskTypeColors: Record<TaskType, string> = {
|
||||
[TaskType.TEXT_VERIFICATION]: "from-green-500 to-green-600",
|
||||
[TaskType.IMAGE_LABELING]: "from-green-600 to-green-700",
|
||||
[TaskType.SURVEY]: "from-green-400 to-green-500",
|
||||
[TaskType.CONTENT_MODERATION]: "from-green-500 to-green-700",
|
||||
};
|
||||
|
||||
return (
|
||||
<Link href={`/tasks/${task.id}`}>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.5, delay: index * 0.1 }}
|
||||
whileHover={{ y: -8, transition: { duration: 0.2 } }}
|
||||
className="relative group cursor-pointer"
|
||||
>
|
||||
<div className="absolute inset-0 bg-linear-to-br from-green-500/20 to-green-600/10 blur-xl opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
|
||||
|
||||
<div className="relative bg-background/80 backdrop-blur-sm border border-green-500/20 p-6 hover:border-green-500/40 transition-all duration-300">
|
||||
{/* Header */}
|
||||
<div className="flex items-start justify-between mb-3">
|
||||
<h3 className="text-lg font-semibold text-foreground line-clamp-2 flex-1">
|
||||
{task.title}
|
||||
</h3>
|
||||
{task.paymentAmount >= 5 && (
|
||||
<motion.span
|
||||
className="ml-2 text-xs bg-linear-to-r from-green-500 to-green-600 text-white px-2 py-1 font-semibold"
|
||||
animate={{ scale: [1, 1.05, 1] }}
|
||||
transition={{ duration: 2, repeat: Infinity }}
|
||||
>
|
||||
💰 High
|
||||
</motion.span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Description */}
|
||||
<p className="text-sm text-foreground/60 mb-4 line-clamp-2">
|
||||
{task.description}
|
||||
</p>
|
||||
|
||||
{/* Stats */}
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<motion.div
|
||||
className="w-2 h-2 bg-linear-to-r from-green-500 to-green-600 "
|
||||
animate={{ scale: [1, 1.3, 1] }}
|
||||
transition={{ duration: 2, repeat: Infinity }}
|
||||
/>
|
||||
<span className="text-lg font-bold bg-linear-to-r from-green-400 to-green-600 bg-clip-text text-transparent">
|
||||
{formatCurrency(task.paymentAmount)}
|
||||
</span>
|
||||
</div>
|
||||
<span className="text-sm text-foreground/60">
|
||||
<span className="font-semibold text-foreground">
|
||||
{task.spotsRemaining}
|
||||
</span>
|
||||
/{task.maxSubmissions} spots
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Progress Bar */}
|
||||
<div className="w-full bg-foreground/10 h-1.5 mb-4 overflow-hidden">
|
||||
<motion.div
|
||||
className="h-full bg-linear-to-r from-green-500 to-green-600 "
|
||||
initial={{ width: 0 }}
|
||||
animate={{
|
||||
width: `${
|
||||
((task.maxSubmissions - task.spotsRemaining) /
|
||||
task.maxSubmissions) *
|
||||
100
|
||||
}%`,
|
||||
}}
|
||||
transition={{ duration: 1, delay: index * 0.1 + 0.3 }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<div className="flex items-center justify-between pt-4 border-t border-foreground/10">
|
||||
<span
|
||||
className={`text-xs px-3 py-1.5 bg-linear-to-r ${
|
||||
taskTypeColors[task.taskType]
|
||||
} text-white font-semibold`}
|
||||
>
|
||||
{taskTypeLabels[task.taskType]}
|
||||
</span>
|
||||
<span className="text-xs text-foreground/50 font-medium">
|
||||
⏰ {formatTimeRemaining(task.expiresAt)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
|
||||
export default function TasksPage() {
|
||||
const [filters, setFilters] = useState({
|
||||
status: TaskStatus.OPEN,
|
||||
taskType: undefined as TaskType | undefined,
|
||||
});
|
||||
|
||||
const { data, isLoading } = useQuery({
|
||||
queryKey: ["tasks", filters],
|
||||
queryFn: () => api.tasks.list(filters),
|
||||
});
|
||||
|
||||
const tasks = data?.data || [];
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="flex items-center justify-center min-h-[400px]">
|
||||
<LoadingSpinner size="lg" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="relative min-h-screen overflow-hidden">
|
||||
{/* Animated Background */}
|
||||
<div className="absolute inset-0 overflow-hidden pointer-events-none">
|
||||
<motion.div
|
||||
className="absolute w-96 h-96 bg-linear-to-br from-green-500/20 to-green-600/10 blur-3xl"
|
||||
animate={{
|
||||
x: [0, 100, 0],
|
||||
y: [0, 50, 0],
|
||||
}}
|
||||
transition={{ duration: 20, repeat: Infinity }}
|
||||
style={{ top: "10%", left: "-10%" }}
|
||||
/>
|
||||
<motion.div
|
||||
className="absolute w-96 h-96 bg-linear-to-br from-green-600/10 to-green-500/20 blur-3xl"
|
||||
animate={{
|
||||
x: [0, -100, 0],
|
||||
y: [0, -50, 0],
|
||||
}}
|
||||
transition={{ duration: 25, repeat: Infinity }}
|
||||
style={{ bottom: "10%", right: "-10%" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="relative z-10 max-w-7xl mx-auto px-4 py-12 pt-32">
|
||||
{/* Header */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: -20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6 }}
|
||||
className="text-center mb-12"
|
||||
>
|
||||
<div className="inline-flex items-center gap-2 mb-4 px-4 py-2 border border-green-500/30 bg-green-500/5 backdrop-blur-sm">
|
||||
<motion.div
|
||||
animate={{ rotate: 360 }}
|
||||
transition={{ duration: 3, repeat: Infinity, ease: "linear" }}
|
||||
>
|
||||
<LoadingSpinner />
|
||||
</motion.div>
|
||||
<span className="text-sm font-semibold bg-linear-to-r from-green-400 to-green-600 bg-clip-text text-transparent">
|
||||
{tasks.length} Tasks Available
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<h1 className="text-4xl sm:text-5xl font-bold mb-4">
|
||||
<span className="bg-linear-to-r from-green-400 via-green-500 to-green-600 bg-clip-text text-transparent">
|
||||
Available Tasks
|
||||
</span>
|
||||
</h1>
|
||||
<p className="text-foreground/60 text-lg max-w-2xl mx-auto">
|
||||
Complete AI-verified tasks and earn cUSD instantly on Celo Sepolia
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
{/* Filters */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, delay: 0.2 }}
|
||||
className="bg-background/60 backdrop-blur-md border border-green-500/20 p-6 mb-8"
|
||||
>
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<Filter className="w-5 h-5 text-green-500" />
|
||||
<h2 className="text-lg font-semibold text-foreground">
|
||||
Filter Tasks
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-foreground/70 mb-2">
|
||||
Task Type
|
||||
</label>
|
||||
<select
|
||||
value={filters.taskType || ""}
|
||||
onChange={(e) =>
|
||||
setFilters({
|
||||
...filters,
|
||||
taskType: (e.target.value as TaskType) || undefined,
|
||||
})
|
||||
}
|
||||
className="w-full px-4 py-3 bg-background/80 border border-green-500/30 focus:ring-2 focus:ring-green-500 focus:border-transparent text-foreground backdrop-blur-sm transition-all"
|
||||
>
|
||||
<option value="">All Types</option>
|
||||
<option value={TaskType.TEXT_VERIFICATION}>
|
||||
Text Verification
|
||||
</option>
|
||||
<option value={TaskType.IMAGE_LABELING}>Image Labeling</option>
|
||||
<option value={TaskType.SURVEY}>Survey</option>
|
||||
<option value={TaskType.CONTENT_MODERATION}>
|
||||
Content Moderation
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* Task Grid */}
|
||||
{tasks.length > 0 ? (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{tasks.map((task: Task, index: number) => (
|
||||
<TaskCard key={task.id} task={task} index={index} />
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.9 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
transition={{ duration: 0.5 }}
|
||||
className="text-center py-20"
|
||||
>
|
||||
<div className="inline-flex items-center justify-center w-16 h-16 bg-linear-to-br from-green-500/20 to-green-600/10 mb-4">
|
||||
<LoadingSpinner />
|
||||
</div>
|
||||
<h3 className="text-xl font-semibold text-foreground mb-2">
|
||||
No tasks available
|
||||
</h3>
|
||||
<p className="text-foreground/60">
|
||||
Check back soon for new opportunities!
|
||||
</p>
|
||||
</motion.div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user