Improve task interaction and display within the app

Introduces a TaskDetailsModal and integrates task click handlers into CalendarView and KanbanBoard components. Updates TaskDetailsModal to display and manage time tracking, and refactors prop types for task data.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: ceced2fc-aa46-458d-ba87-ddd4b7bb1518
Replit-Commit-Checkpoint-Type: intermediate_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/659922a9-0087-461c-90dd-6d9a58b81d4d/ceced2fc-aa46-458d-ba87-ddd4b7bb1518/P2PZNJ9

client/src/App.tsx

@@ -9,6 +9,7 @@ import { Card } from "@/components/ui/card";
 // Components
 import BottomNavigation from './components/BottomNavigation';
 import TaskCreationModal from './components/TaskCreationModal';
+import TaskDetailsModal from './components/TaskDetailsModal';
 import TasksWithCalendar from './components/TasksWithCalendar';
 import CalendarView from './components/CalendarView';
 import KanbanBoard from './components/KanbanBoard';
@@ -90,6 +91,8 @@ function App() {
   const [currentTab, setCurrentTab] = useState('tasks');
   const [tasks, setTasks] = useState<Task[]>(initialTasks);
   const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
+  const [isTaskDetailsOpen, setIsTaskDetailsOpen] = useState(false);
+  const [selectedTask, setSelectedTask] = useState<Task | null>(null);
 
   const handleCreateTask = (newTask: Partial<Task>) => {
     const task: Task = {
@@ -124,6 +127,22 @@ function App() {
     handleTaskUpdate(taskId, { dueDate: newDate });
   };
 
+  const handleTaskClick = (task: Task) => {
+    setSelectedTask(task);
+    setIsTaskDetailsOpen(true);
+    console.log('Task clicked:', task.title);
+  };
+
+  const handleTaskDetailsClose = () => {
+    setIsTaskDetailsOpen(false);
+    setSelectedTask(null);
+  };
+
+  const handleTaskDetailsSave = (updatedTask: Task) => {
+    handleTaskUpdate(updatedTask.id, updatedTask);
+    console.log('Task details saved:', updatedTask.title);
+  };
+
   const handleCreateFromTemplate = (templateId: string, startDate: Date, projectName: string) => {
     console.log('Creating project from template:', { templateId, startDate, projectName });
     // In a real app, this would create multiple tasks based on the template
@@ -145,6 +164,7 @@ function App() {
           <CalendarView 
             tasks={tasks}
             onTaskDrop={handleTaskDrop}
+            onTaskClick={handleTaskClick}
             onDateSelect={(date) => console.log('Date selected:', date.toLocaleDateString())}
           />
         );
@@ -155,6 +175,7 @@ function App() {
             tasks={tasks}
             onTaskStatusChange={handleTaskStatusChange}
             onTaskUpdate={handleTaskUpdate}
+            onTaskClick={handleTaskClick}
           />
         );
       
@@ -230,6 +251,14 @@ function App() {
             onClose={() => setIsCreateModalOpen(false)}
             onSave={handleCreateTask}
           />
+
+          {/* Task Details Modal */}
+          <TaskDetailsModal 
+            isOpen={isTaskDetailsOpen}
+            onClose={handleTaskDetailsClose}
+            task={selectedTask}
+            onSave={handleTaskDetailsSave}
+          />
         </div>
         
         <Toaster />