feat(task-row): integrate task timer functionality into task management

- Added TaskTimer component to manage task time tracking.
- Updated TaskTimeTracking to utilize the new timer functionality, enhancing user interaction with task timing.
- Refactored props to pass task ID for timer management, improving state handling.

worklenz-frontend/src/components/task-management/task-row.tsx

@@ -26,6 +26,8 @@ import { SocketEvents } from '@/shared/socket-events';
 import TaskStatusDropdown from './task-status-dropdown';
 import TaskPriorityDropdown from './task-priority-dropdown';
 import TaskPhaseDropdown from './task-phase-dropdown';
+import TaskTimer from '@/components/taskListCommon/task-timer/task-timer';
+import { useTaskTimer } from '@/hooks/useTaskTimer';
 import { 
   formatDate as utilFormatDate, 
   formatDateTime as utilFormatDateTime, 
@@ -145,19 +147,20 @@ const TaskPriority = React.memo<{ priority: string; isDarkMode: boolean }>(({ pr
   );
 });
 
-const TaskTimeTracking = React.memo<{ timeTracking?: { logged?: number | string }; isDarkMode: boolean }>(({ timeTracking, isDarkMode }) => {
+const TaskTimeTracking = React.memo<{ taskId: string; isDarkMode: boolean }>(({ taskId, isDarkMode }) => {
-  if (!timeTracking?.logged || timeTracking.logged === 0) return null;
+  const { started, timeString, handleStartTimer, handleStopTimer } = useTaskTimer(
-  
+    taskId,
+    null // The hook will get the timer start time from Redux
+  );
+
   return (
-    <div className="flex items-center gap-1">
+    <TaskTimer
-      <ClockCircleOutlined className={`text-xs ${isDarkMode ? 'text-gray-300' : 'text-gray-700'}`} />
+      taskId={taskId}
-      <span className={`text-xs ${isDarkMode ? 'text-gray-300' : 'text-gray-700'}`}>
+      started={started}
-        {typeof timeTracking.logged === 'number' 
+      handleStartTimer={handleStartTimer}
-          ? `${timeTracking.logged}h`
+      handleStopTimer={handleStopTimer}
-          : timeTracking.logged
+      timeString={timeString}
-        }
+    />
-      </span>
-    </div>
   );
 });
 
@@ -1117,7 +1120,10 @@ const TaskRow: React.FC<TaskRowProps> = React.memo(({
       case 'timeTracking':
         return (
           <div key={col.key} className={`flex items-center px-2 ${borderClasses}`} style={{ width: col.width }}>
-            <TaskTimeTracking timeTracking={task.timeTracking} isDarkMode={isDarkMode} />
+            <TaskTimeTracking 
+              taskId={task.id || ''} 
+              isDarkMode={isDarkMode} 
+            />
           </div>
         );