Add timer functionality to track time spent on tasks

Introduces a `useTimer` hook to manage starting and stopping timers for tasks, updating their `timeTracked` property, and displaying tracking status. This involves changes in `App.tsx`, `KanbanBoard.tsx`, `TaskCard.tsx`, and `TasksWithCalendar.tsx` to integrate the timer start/stop actions and display.

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

@@ -17,6 +17,7 @@ import ProjectTemplate from './components/ProjectTemplate';
 import ThemeToggle from './components/ThemeToggle';
 import { Task } from '@shared/schema';
 import { addDays, subDays } from 'date-fns';
+import { useTimer } from './hooks/useTimer';
 
 // Mock data for prototype
 const initialTasks: Task[] = [
@@ -119,6 +120,12 @@ function App() {
     console.log('Task updated:', taskId, updates);
   };
 
+  // Initialize the timer hook after handleTaskUpdate is defined
+  const { startTimer, stopTimer } = useTimer({
+    tasks,
+    onTaskUpdate: handleTaskUpdate
+  });
+
   const handleTaskStatusChange = (taskId: string, newStatus: Task['status']) => {
     handleTaskUpdate(taskId, { status: newStatus });
   };
@@ -156,6 +163,8 @@ function App() {
             tasks={tasks}
             onTaskUpdate={handleTaskUpdate}
             onTaskEdit={(task) => console.log('Edit task:', task.title)}
+            onStartTimer={startTimer}
+            onStopTimer={stopTimer}
           />
         );
       
@@ -176,6 +185,8 @@ function App() {
             onTaskStatusChange={handleTaskStatusChange}
             onTaskUpdate={handleTaskUpdate}
             onTaskClick={handleTaskClick}
+            onStartTimer={startTimer}
+            onStopTimer={stopTimer}
           />
         );