import { useState } from 'react'; import { View, Text, ScrollView, Pressable, TextInput } from 'react-native'; import { ArrowLeft, MoreVertical, Calendar, Users, Clock, CheckCircle, MessageCircle, Edit, Flag, User, Send, BarChart3, AlertCircle } from 'lucide-react-native'; type Comment = { id: string; author: string; content: string; timestamp: string; avatar: string; }; type TeamMember = { id: string; name: string; avatar: string; role: string; }; export default function TaskDetails() { const [newComment, setNewComment] = useState(''); const [taskStatus, setTaskStatus] = useState<'todo' | 'in-progress' | 'completed'>('in-progress'); // Mock task data const task = { id: '1', title: 'Design System Updates', description: 'Update the design system components to align with the new brand guidelines. This includes updating colors, typography, spacing, and component styles across all design tokens.', assignedMembers: [ { id: '1', name: 'Sarah Chen', avatar: 'https://images.unsplash.com/photo-1494790108755-2616b612b786?w=150', role: 'Lead Designer' }, { id: '2', name: 'Mike Johnson', avatar: 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=150', role: 'Frontend Developer' }, { id: '3', name: 'Alex Kumar', avatar: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=150', role: 'UI Developer' } ] as TeamMember[], dueDate: '2024-02-20', priority: 'high', progress: 65, createdDate: '2024-02-10', updatedDate: '2024-02-15' }; const comments: Comment[] = [ { id: '1', author: 'Sarah Chen', content: 'Started working on the color palette updates. The new primary colors look great!', timestamp: '2 hours ago', avatar: 'https://images.unsplash.com/photo-1494790108755-2616b612b786?w=150' }, { id: '2', author: 'Mike Johnson', content: 'I\'ve reviewed the typography changes. We might need to adjust the line heights for better readability.', timestamp: '4 hours ago', avatar: 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=150' }, { id: '3', author: 'Alex Kumar', content: 'The component library is looking good. Should we schedule a review meeting?', timestamp: '1 day ago', avatar: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=150' } ]; const getPriorityColor = (priority: string) => { switch (priority) { case 'high': return 'text-red-600 bg-red-100'; case 'medium': return 'text-orange-500 bg-orange-100'; case 'low': return 'text-blue-500 bg-blue-100'; default: return 'text-gray-600 bg-gray-100'; } }; const getStatusColor = (status: string) => { switch (status) { case 'completed': return 'bg-green-100 text-green-800'; case 'in-progress': return 'bg-blue-100 text-blue-800'; case 'todo': return 'bg-gray-100 text-gray-800'; default: return 'bg-gray-100 text-gray-800'; } }; const handleStatusChange = (newStatus: 'todo' | 'in-progress' | 'completed') => { setTaskStatus(newStatus); }; const handleAddComment = () => { if (newComment.trim()) { // In a real app, this would add the comment to the backend setNewComment(''); } }; return ( {/* Header */} Task Details {/* Task Header */} {task.title} {task.description} {task.priority} {/* Status and Progress */} Status {taskStatus.replace('-', ' ')} Progress {task.progress}% {/* Task Info Cards */} {/* Due Date */} Due Date {task.dueDate} {/* Assigned Members */} Assigned Team {task.assignedMembers.length} members {task.assignedMembers.map((member) => ( {/* In a real app, you'd use an Image component here */} {member.name} {member.role} ))} {/* Task Timeline */} Timeline Created {task.createdDate} Last Updated {task.updatedDate} {/* Action Buttons */} Quick Actions handleStatusChange('todo')} className={`rounded-lg px-4 py-2 ${taskStatus === 'todo' ? 'bg-gray-200' : 'bg-gray-100'}`} > To Do handleStatusChange('in-progress')} className={`rounded-lg px-4 py-2 ${taskStatus === 'in-progress' ? 'bg-blue-200' : 'bg-blue-100'}`} > In Progress handleStatusChange('completed')} className={`rounded-lg px-4 py-2 ${taskStatus === 'completed' ? 'bg-green-200' : 'bg-green-100'}`} > Completed Edit Task Flag Issue {/* Comments Section */} Comments {comments.length} {/* Comments List */} {comments.map((comment) => ( {comment.author} {comment.timestamp} {comment.content} ))} {/* Add Comment */} {/* Bottom Padding */} ); }

React Native BoldPro App Preview

Project Screens for BoldPro App