import React, { useState, useEffect } from 'react'; interface Task { id: string; name: string; description: string; status: string; priority: string; due_date: string; assignees: string[]; tags: string[]; custom_fields: Array<{ name: string; value: string }>; subtasks: Array<{ id: string; name: string; completed: boolean }>; comments: Array<{ id: string; author: string; text: string; timestamp: string }>; time_entries: Array<{ id: string; duration: number; user: string; date: string }>; } const TabButton: React.FC<{ active: boolean; onClick: () => void; children: React.ReactNode }> = ({ active, onClick, children }) => ( ); export default function App() { const [task, setTask] = useState(null); const [activeTab, setActiveTab] = useState<'details' | 'subtasks' | 'comments' | 'time'>('details'); const [loading, setLoading] = useState(true); useEffect(() => { // Mock data - replace with actual MCP tool calls setTimeout(() => { setTask({ id: '1', name: 'Implement user authentication system', description: 'Build a secure authentication system with OAuth2 support, JWT tokens, and password reset functionality.', status: 'in progress', priority: 'high', due_date: '2024-02-20', assignees: ['John Doe', 'Jane Smith'], tags: ['backend', 'security', 'critical'], custom_fields: [ { name: 'Story Points', value: '8' }, { name: 'Sprint', value: 'Sprint 5' }, { name: 'Department', value: 'Engineering' }, ], subtasks: [ { id: 's1', name: 'Design database schema', completed: true }, { id: 's2', name: 'Implement OAuth2 flow', completed: true }, { id: 's3', name: 'Add JWT token generation', completed: false }, { id: 's4', name: 'Create password reset endpoint', completed: false }, { id: 's5', name: 'Write unit tests', completed: false }, ], comments: [ { id: 'c1', author: 'Jane Smith', text: 'Started working on the OAuth2 integration', timestamp: '2024-02-12T10:30:00Z' }, { id: 'c2', author: 'John Doe', text: 'Database schema looks good, approved!', timestamp: '2024-02-13T14:15:00Z' }, { id: 'c3', author: 'Jane Smith', text: 'Need to discuss JWT token expiration time with the team', timestamp: '2024-02-14T09:00:00Z' }, ], time_entries: [ { id: 't1', duration: 7200, user: 'Jane Smith', date: '2024-02-12' }, { id: 't2', duration: 5400, user: 'John Doe', date: '2024-02-13' }, { id: 't3', duration: 3600, user: 'Jane Smith', date: '2024-02-14' }, ], }); setLoading(false); }, 500); }, []); if (loading) { return
Loading task details...
; } if (!task) { return
Task not found
; } const totalTime = task.time_entries.reduce((sum, entry) => sum + entry.duration, 0); const completedSubtasks = task.subtasks.filter(st => st.completed).length; return (

{task.name}

{task.status} {task.priority}

{task.description}

Due Date: {task.due_date}
Assignees: {task.assignees.join(', ')}
Tags: {task.tags.map(tag => {tag})}
setActiveTab('details')}> Details & Custom Fields setActiveTab('subtasks')}> Subtasks ({completedSubtasks}/{task.subtasks.length}) setActiveTab('comments')}> Comments ({task.comments.length}) setActiveTab('time')}> Time Tracking ({(totalTime / 3600).toFixed(1)}h)
{activeTab === 'details' && (
{task.custom_fields.map(field => (
{field.name}: {field.value}
))}
)} {activeTab === 'subtasks' && (
{task.subtasks.map(subtask => (
{subtask.name}
))}
)} {activeTab === 'comments' && (
{task.comments.map(comment => (
{comment.author} {new Date(comment.timestamp).toLocaleString()}

{comment.text}

))}
)} {activeTab === 'time' && (
{task.time_entries.map(entry => (
{entry.user}
{(entry.duration / 3600).toFixed(2)}h
{entry.date}
))}
Total Time: {(totalTime / 3600).toFixed(2)} hours
)}
); }