1import React from 'react';
2import { useState, useEffect } from 'react';
3import { motion, AnimatePresence } from 'framer-motion';
4import { TaskBoard } from '@/components/TaskBoard';
5import { AIInsights } from '@/components/AIInsights';
6import { TeamMembers } from '@/components/TeamMembers';
7
8interface Task {
9 id: string;
10 title: string;
11 description: string;
12 priority: 'low' | 'medium' | 'high';
13 aiDeadline: Date;
14 status: 'todo' | 'in-progress' | 'completed';
15 assignee?: string;
16}
17
18interface Project {
19 id: string;
20 name: string;
21 tasks: Task[];
22 teamMembers: string[];
23}
24
25export default function TaskFlowApp() {
26 const [currentProject, setCurrentProject] = useState<Project | null>(null);
27 const [isLoading, setIsLoading] = useState(true);
28 const [aiSuggestions, setAiSuggestions] = useState([]);
29
30 useEffect(() => {
31 setTimeout(() => {
32 setCurrentProject({
33 id: '1',
34 name: 'Website Redesign',
35 tasks: [
36 {
37 id: 't1',
38 title: 'Create wireframes',
39 description: 'Design initial layout mockups',
40 priority: 'high',
41 aiDeadline: new Date('2024-02-15'),
42 status: 'in-progress'
43 },
44 {
45 id: 't2',
46 title: 'Setup development environment',
47 description: 'Configure Next.js project with TypeScript',
48 priority: 'medium',
49 aiDeadline: new Date('2024-02-10'),
50 status: 'completed'
51 }
52 ],
53 teamMembers: ['Alice', 'Bob', 'Charlie']
54 });
55 setIsLoading(false);
56 }, 1000);
57 }, []);
58
59 const generateAIInsights = async () => {
60 const insights = await fetch('/api/ai/analyze-tasks', {
61 method: 'POST',
62 headers: { 'Content-Type': 'application/json' },
63 body: JSON.stringify({ projectId: currentProject?.id })
64 });
65
66 const result = await insights.json();
67 setAiSuggestions(result.suggestions);
68 };
69
70 if (isLoading) {
71 return (
72 <div className="min-h-screen bg-slate-950 flex items-center justify-center">
73 <motion.div
74 animate={{ rotate: 360 }}
75 transition={{ duration: 1, repeat: Infinity, ease: "linear" }}
76 className="w-8 h-8 border-2 border-sky-500 border-t-transparent rounded-full"
77 />
78 </div>
79 );
80 }
81
82 return (
83 <div className="min-h-screen bg-slate-950 text-white">
84 <motion.div
85 initial={{ opacity: 0, y: 20 }}
86 animate={{ opacity: 1, y: 0 }}
87 className="container mx-auto px-4 sm:px-6 lg:px-8 py-8"
88 >
89 <div className="flex items-center justify-between mb-8">
90 <h1 className="text-4xl font-bold bg-gradient-to-r from-sky-400 to-cyan-400 bg-clip-text text-transparent">
91 TaskFlow
92 </h1>
93 <button
94 onClick={generateAIInsights}
95 className="px-4 py-2 bg-sky-600 hover:bg-sky-700 rounded-lg transition-colors"
96 >
97 Generate AI Insights
98 </button>
99 </div>
100
101 {currentProject && (
102 <div className="grid grid-cols-1 lg:grid-cols-4 gap-6">
103 <div className="lg:col-span-3">
104 <TaskBoard project={currentProject} />
105 </div>
106 <div className="space-y-6">
107 <AIInsights suggestions={aiSuggestions} />
108 <TeamMembers members={currentProject.teamMembers} />
109 </div>
110 </div>
111 )}
112 </motion.div>
113 </div>
114 );
115}