added total time spent functionality for tasks and updated dashboard to display upcoming, uncompleted tasks sorted by date ascending

app/(tabs)/index.tsx

@@ -1,13 +1,175 @@
 import { defaultStyles } from "@/constants/defaultStyles";
+import {
+  GetActiveSprint,
+  RemoveActiveSprint,
+  type ActiveSprint,
+} from '@/lib/asyncStorage';
+import { formatDate } from '@/lib/date';
 import { RegisterForLocalNotificationsAsync } from '@/lib/notifications';
 import { supabase } from "@/lib/supabase";
 import { Session } from '@supabase/supabase-js';
-import { Stack } from "expo-router";
-import { useEffect, useState } from 'react';
-import { Button, Text, View } from "react-native";
+import { router, Stack, useFocusEffect } from "expo-router";
+import { useCallback, useEffect, useState } from 'react';
+import { Button, Pressable, StyleSheet, Text, View } from "react-native";
+
+type UpcomingDeadlineTask = {
+  tId: string;
+  title: string;
+  description: string;
+  aId: string;
+  subjectTitle: string;
+  assignmentTitle: string;
+  deadline: string;
+};
+
+function formatTime(totalSeconds: number) {
+  const minutes = Math.floor(totalSeconds / 60);
+  const seconds = totalSeconds % 60;
+
+  return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
+}
 
 export default function HomeScreen() {
   const [session, SetSession] = useState<Session | null>(null);
+  const [activeSprint, setActiveSprint] = useState<ActiveSprint | null>(null);
+  const [activeSprintTaskTitle, setActiveSprintTaskTitle] = useState<string | null>(null);
+  const [activeSprintTaskDesc, setActiveSprintTaskDesc] = useState<string | null>(null);
+  const [remainingSeconds, setRemainingSeconds] = useState(0);
+  const [upcomingDeadlineTasks, setUpcomingDeadlineTasks] = useState<UpcomingDeadlineTask[]>([]);
+
+  const loadActiveSprint = useCallback(async () => {
+    const storedSprint = await GetActiveSprint();
+
+    if (!storedSprint) {
+      setActiveSprint(null);
+      setActiveSprintTaskTitle(null);
+      setActiveSprintTaskDesc(null);
+      setRemainingSeconds(0);
+      return;
+    }
+
+    const secondsLeft = Math.max(
+      0,
+      Math.ceil((storedSprint.endTime - Date.now()) / 1000)
+    );
+
+    if (secondsLeft <= 0) {
+      await RemoveActiveSprint();
+      setActiveSprint(null);
+      setActiveSprintTaskTitle(null);
+      setActiveSprintTaskDesc(null);
+      setRemainingSeconds(0);
+      return;
+    }
+
+    setActiveSprint(storedSprint);
+    setRemainingSeconds(secondsLeft);
+
+    const { data: dbTitle } = await supabase
+      .from('tasks')
+      .select('title')
+      .eq('tId', storedSprint.taskId)
+      .single();
+
+      const { data: dbDesc } = await supabase
+      .from('tasks')
+      .select('description')
+      .eq('tId', storedSprint.taskId)
+      .single();
+
+    setActiveSprintTaskTitle(dbTitle?.title ?? null);
+    setActiveSprintTaskDesc(dbDesc?.description);
+  }, []);
+
+  const loadUpcomingDeadlineTasks = useCallback(async () => {
+    if (!session?.user.id) {
+      setUpcomingDeadlineTasks([]);
+      return;
+    }
+
+    const { data: tasksData, error: tasksError } = await supabase
+      .from('tasks')
+      .select('tId, title, description, aId')
+      .eq('uId', session.user.id)
+      .eq('isCompleted', false);
+
+    if (tasksError || !tasksData || tasksData.length === 0) {
+      setUpcomingDeadlineTasks([]);
+      return;
+    }
+
+    const assignmentIds = [...new Set(tasksData.map((task) => task.aId).filter(Boolean))];
+
+    if (assignmentIds.length === 0) {
+      setUpcomingDeadlineTasks([]);
+      return;
+    }
+
+    const { data: assignmentsData, error: assignmentsError } = await supabase
+      .from('assignments')
+      .select('aId, sId, title, deadline')
+      .in('aId', assignmentIds)
+      .eq('isCompleted', false);
+
+    if (assignmentsError || !assignmentsData) {
+      setUpcomingDeadlineTasks([]);
+      return;
+    }
+
+    const subjectIds = [...new Set(assignmentsData.map((assignment) => assignment.sId).filter(Boolean))];
+
+    const { data: subjectsData, error: subjectsError } = await supabase
+      .from('subjects')
+      .select('sId, title')
+      .in('sId', subjectIds);
+
+    if (subjectsError || !subjectsData) {
+      setUpcomingDeadlineTasks([]);
+      return;
+    }
+
+    const now = Date.now();
+    const assignmentsById = new Map(
+      assignmentsData.map((assignment) => [assignment.aId, assignment])
+    );
+    const subjectsById = new Map(
+      subjectsData.map((subject) => [subject.sId, subject])
+    );
+
+    const enrichedTasks = tasksData
+      .map((task) => {
+        const assignment = assignmentsById.get(task.aId);
+
+        if (!assignment?.deadline) {
+          return null;
+        }
+
+        const deadlineTime = new Date(assignment.deadline).getTime();
+
+        if (Number.isNaN(deadlineTime) || deadlineTime < now) {
+          return null;
+        }
+
+        const subject = subjectsById.get(assignment.sId);
+
+        return {
+          tId: task.tId,
+          title: task.title,
+          description: task.description,
+          aId: task.aId,
+          subjectTitle: subject?.title ?? 'Unknown Subject',
+          assignmentTitle: assignment.title,
+          deadline: assignment.deadline,
+        } satisfies UpcomingDeadlineTask;
+      })
+      .filter((task): task is UpcomingDeadlineTask => task !== null)
+      .sort(
+        (left, right) =>
+          new Date(left.deadline).getTime() - new Date(right.deadline).getTime()
+      );
+
+    setUpcomingDeadlineTasks(enrichedTasks);
+  }, [session?.user.id]);
 
   useEffect(() => {
     supabase.auth
@@ -27,7 +189,37 @@ export default function HomeScreen() {
     if (session) {
       RegisterForLocalNotificationsAsync();
     }
-  }, [session])
+  }, [session]);
+
+  useFocusEffect(
+    useCallback(() => {
+      void loadActiveSprint();
+      void loadUpcomingDeadlineTasks();
+    }, [loadActiveSprint, loadUpcomingDeadlineTasks])
+  );
+
+  useEffect(() => {
+    if (!activeSprint) {
+      return;
+    }
+
+    const intervalId = setInterval(() => {
+      const secondsLeft = Math.max(
+        0,
+        Math.ceil((activeSprint.endTime - Date.now()) / 1000)
+      );
+
+      setRemainingSeconds(secondsLeft);
+
+      if (secondsLeft <= 0) {
+        void RemoveActiveSprint();
+        setActiveSprint(null);
+        setActiveSprintTaskTitle(null);
+      }
+    }, 1000);
+
+    return () => clearInterval(intervalId);
+  }, [activeSprint]);
 
   return (
     <View style={defaultStyles.container}>
@@ -47,8 +239,145 @@ export default function HomeScreen() {
       />
 
       <View style={defaultStyles.container}>
-        <Text style={defaultStyles.body}>Hello, World!</Text>
+        {activeSprint ? (
+          <View style={styles.activeSprintCard}>
+            <Text style={styles.cardEyebrow}>Active Sprint</Text>
+            <Text style={styles.cardTitle}>
+              {activeSprintTaskTitle ?? 'Selected task'}
+            </Text>
+            <Text style={styles.cardDesc}> {activeSprintTaskDesc ?? null} </Text>
+            <Text style={styles.cardMeta}>
+              {formatTime(remainingSeconds)} remaining
+            </Text>
+
+            <Pressable
+              style={styles.resumeButton}
+              onPress={() =>
+                router.push({
+                  pathname: '/task/timer',
+                  params: { tId: activeSprint.taskId },
+                })
+              }
+            >
+              <Text style={styles.resumeButtonText}>Open Sprint</Text>
+            </Pressable>
+          </View>
+        ) : (
+          <>
+            <Text style={defaultStyles.body}>No active sprint right now.</Text>
+
+            <View style={styles.deadlineSection}>
+              <Text style={styles.sectionTitle}>Tasks with upcoming deadlines</Text>
+
+              {upcomingDeadlineTasks.length > 0 ? (
+                upcomingDeadlineTasks.map((task) => (
+                  <Pressable
+                    key={task.tId}
+                    style={styles.deadlineTaskCard}
+                    onPress={() =>
+                      router.push({
+                        pathname: '/task/viewDetailsTask',
+                        params: { tId: task.tId },
+                      })
+                    }
+                  >
+                    <Text style={styles.deadlineTaskTitle}>{task.title}</Text>
+                    {task.description ? (
+                      <Text style={styles.deadlineTaskDescription} numberOfLines={2}>
+                        {task.description}
+                      </Text>
+                    ) : null}
+                    <Text style={styles.deadlineTaskMeta}>
+                      {task.subjectTitle} • {task.assignmentTitle} • {formatDate(task.deadline)}
+                    </Text>
+                  </Pressable>
+                ))
+              ) : (
+                <Text style={styles.emptyDeadlineText}>No upcoming task deadlines.</Text>
+              )}
+            </View>
+          </>
+        )}
       </View>
     </View>
-  )
+  );
 }
+
+const styles = StyleSheet.create({
+  activeSprintCard: {
+    borderWidth: 1,
+    borderColor: '#D5D9DF',
+    borderRadius: 16,
+    padding: 16,
+    backgroundColor: '#F7F9FC',
+    gap: 8,
+  },
+  cardEyebrow: {
+    fontSize: 13,
+    fontWeight: '600',
+    color: '#5D6B7A',
+  },
+  cardTitle: {
+    fontSize: 20,
+    fontWeight: '700',
+    color: '#1F2933',
+  },
+  cardDesc: {
+    fontSize: 14,
+    fontWeight: '500',
+    color: '#38414b',
+  },
+  cardMeta: {
+    fontSize: 15,
+    color: '#52606D',
+  },
+  resumeButton: {
+    marginTop: 8,
+    minHeight: 44,
+    borderRadius: 12,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: '#323F4E',
+    paddingHorizontal: 16,
+  },
+  resumeButtonText: {
+    fontSize: 15,
+    fontWeight: '700',
+    color: '#FFFFFF',
+  },
+  deadlineSection: {
+    marginTop: 24,
+    gap: 12,
+  },
+  sectionTitle: {
+    fontSize: 18,
+    fontWeight: '700',
+    color: '#1F2933',
+  },
+  deadlineTaskCard: {
+    borderWidth: 1,
+    borderColor: '#D5D9DF',
+    borderRadius: 16,
+    padding: 16,
+    backgroundColor: '#FFFFFF',
+    gap: 6,
+  },
+  deadlineTaskTitle: {
+    fontSize: 16,
+    fontWeight: '700',
+    color: '#1F2933',
+  },
+  deadlineTaskDescription: {
+    fontSize: 14,
+    color: '#52606D',
+  },
+  deadlineTaskMeta: {
+    fontSize: 13,
+    fontWeight: '600',
+    color: '#7B8794',
+  },
+  emptyDeadlineText: {
+    fontSize: 14,
+    color: '#7B8794',
+  },
+});

app/task/timer.tsx

@@ -9,6 +9,7 @@ import * as Haptics from 'expo-haptics';
 import { Stack, useLocalSearchParams } from 'expo-router';
 import * as React from 'react';
 import {
+  Alert,
   Animated,
   Dimensions,
   Easing,
@@ -55,6 +56,19 @@ function formatTime(totalSeconds: number) {
   return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
 }
 
+function getSessionId(sessionData: unknown) {
+  if (!sessionData || typeof sessionData !== 'object') {
+    return null;
+  }
+
+  const maybeSession = sessionData as {
+    sessionId?: string;
+    sessionid?: string;
+  };
+
+  return maybeSession.sessionId ?? maybeSession.sessionid ?? null;
+}
+
 export default function TimerScreen() {
   const [containerHeight, setContainerHeight] = React.useState(0);
   const [duration, setDuration] = React.useState(TIMER_OPTIONS[0]);
@@ -175,6 +189,29 @@ export default function TimerScreen() {
     outputRange: [20, 0],
   });
 
+  const finalizeSprintSession = React.useCallback(async (finalStatus: 'completed' | 'cancelled' | 'expired') => {
+    const activeSprint = await GetActiveSprint();
+
+    if (!activeSprint) {
+      return;
+    }
+
+    await RemoveActiveSprint();
+
+    const { error } = await supabase.rpc('finalize_sprint_session', {
+      p_session_id: activeSprint.sessionId,
+      p_final_status: finalStatus,
+      p_ended_at: new Date().toISOString(),
+    });
+
+    if (error) {
+      Alert.alert(
+        'Could not finalize sprint session',
+        error.message
+      );
+    }
+  }, []);
+
   const clearCountdownInterval = React.useCallback(() => {
     if (countdownRef.current) {
       clearInterval(countdownRef.current);
@@ -239,7 +276,7 @@ export default function TimerScreen() {
 
   const finishTimer = React.useCallback(() => {
     clearCountdownInterval();
-    void RemoveActiveSprint();
+    void finalizeSprintSession('completed');
 
     Animated.parallel([
       Animated.timing(countdownAnimation, {
@@ -284,6 +321,7 @@ export default function TimerScreen() {
     cancelButtonAnimation,
     clearCountdownInterval,
     countdownAnimation,
+    finalizeSprintSession,
     focusModeAnimation,
     resetSessionValues,
     taskDetailsAnimation,
@@ -392,7 +430,7 @@ export default function TimerScreen() {
       const remainingMs = activeSprint.endTime - Date.now();
 
       if (remainingMs <= 0) {
-        await RemoveActiveSprint();
+        await finalizeSprintSession('expired');
         return;
       }
 
@@ -424,6 +462,7 @@ export default function TimerScreen() {
     cancelOverlayAnimation,
     containerHeight,
     countdownAnimation,
+    finalizeSprintSession,
     focusModeAnimation,
     startCountdown,
     startProgressAnimation,
@@ -433,11 +472,37 @@ export default function TimerScreen() {
     timerIsRunning,
   ]);
 
-  const startTimerSession = React.useCallback(() => {
+  const startTimerSession = React.useCallback(async () => {
     if (!tId || timerIsRunning || containerHeight === 0) {
       return;
     }
 
+    const totalSeconds = duration * TIMER_UNIT_IN_SECONDS;
+    const endTime = Date.now() + totalSeconds * 1000;
+    const { data: userData, error: userError } = await supabase.auth.getUser();
+
+    if (userError || !userData.user?.id) {
+      Alert.alert('Could not start sprint', 'Missing signed-in user for sprint session.');
+      return;
+    }
+
+    const { data: sessionData, error: sessionError } = await supabase.rpc('start_sprint_session', {
+      p_task_id: tId,
+      p_user_id: userData.user.id,
+      p_planned_duration: totalSeconds,
+      p_started_at: new Date().toISOString(),
+    });
+
+    const sessionId = getSessionId(sessionData);
+
+    if (sessionError || !sessionId) {
+      Alert.alert(
+        'Could not start sprint',
+        sessionError?.message ?? 'Sprint session could not be created.'
+      );
+      return;
+    }
+
     Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success);
     setIsRunning(true);
     setTimerOverlayVisible(true);
@@ -446,12 +511,11 @@ export default function TimerScreen() {
     countdownAnimation.setValue(0);
     cancelOverlayAnimation.setValue(0);
 
-    const totalSeconds = duration * TIMER_UNIT_IN_SECONDS;
-    const endTime = Date.now() + totalSeconds * 1000;
     sessionStartedAtRef.current = Date.now();
     sessionDurationMsRef.current = totalSeconds * 1000;
 
     void SaveActiveSprint({
+      sessionId,
       taskId: tId,
       durationSeconds: totalSeconds,
       endTime,
@@ -478,7 +542,7 @@ export default function TimerScreen() {
 
     clearCountdownInterval();
     clearCancelHoldTimeouts();
-    void RemoveActiveSprint();
+    void finalizeSprintSession('cancelled');
 
     runningAnimationRef.current?.stop();
     runningAnimationRef.current = null;
@@ -531,6 +595,7 @@ export default function TimerScreen() {
     clearCancelHoldTimeouts,
     clearCountdownInterval,
     countdownAnimation,
+    finalizeSprintSession,
     focusModeAnimation,
     resetSessionValues,
     taskDetailsAnimation,
@@ -680,8 +745,7 @@ export default function TimerScreen() {
       
       <Stack.Screen 
       options={{
-        title: timerIsRunning ? '' : 'Sprint',
-        headerBackVisible: !timerIsRunning,
+        title: timerIsRunning ? '' : 'Sprint duration',
         headerTransparent: true,
         headerTintColor: colors.text,
         headerTitleAlign: 'center',

app/task/viewDetailsTask.tsx

@@ -1,3 +1,4 @@
+import { GetActiveSprint, RemoveActiveSprint } from '@/lib/asyncStorage';
 import { formatDateTime } from '@/lib/date';
 import { CheckAssignmentCompletion } from '@/lib/progress';
 import { getSubjectColorSet, type SubjectColor } from '@/lib/subjectColors';
@@ -8,187 +9,211 @@ import { router, Stack, useFocusEffect, useLocalSearchParams } from 'expo-router
 import { useCallback, useEffect, useState } from 'react';
 import { Alert, Pressable, Text, View } from 'react-native';
 
-export default function ViewDetailsTask() {
-  const { tId } = useLocalSearchParams<{ tId: string }>();
+function formatTrackedTime(totalSeconds: number) {
+  if (totalSeconds <= 0) {
+    return '0m';
+  }
 
-  const [task, SetTask] = useState<Task | null>(null);
-  const [session, SetSession] = useState<Session | null>(null);
-  const [contextMeta, setContextMeta] = useState({
-    subjectTitle: 'No Subject',
-    assignmentTitle: 'No Assignment',
-    subjectColor: 'slate' as SubjectColor,
+  const hours = Math.floor(totalSeconds / 3600);
+  const minutes = Math.floor((totalSeconds % 3600) / 60);
+
+  if (hours === 0) {
+    return `${minutes}m`;
+  }
+
+  if (minutes === 0) {
+    return `${hours}h`;
+  }
+
+  return `${hours}h ${minutes}m`;
+}
+
+export default function ViewDetailsTask() {
+const { tId } = useLocalSearchParams<{ tId: string }>();
+
+const [task, SetTask] = useState<Task | null>(null);
+const [session, SetSession] = useState<Session | null>(null);
+const [contextMeta, setContextMeta] = useState({
+  subjectTitle: 'No Subject',
+  assignmentTitle: 'No Assignment',
+  subjectColor: 'slate' as SubjectColor,
+});
+
+useEffect(() => {
+  supabase.auth.getSession().then(({ data }) => SetSession(data.session ?? null));
+
+  const { data: sub } = supabase.auth.onAuthStateChange((_event, newSession) => {
+    SetSession(newSession);
   });
 
-  useEffect(() => {
-    supabase.auth.getSession().then(({ data }) => SetSession(data.session ?? null));
+  return () => sub.subscription.unsubscribe();
+}, []);
 
-    const { data: sub } = supabase.auth.onAuthStateChange((_event, newSession) => {
-      SetSession(newSession);
-    });
+const GetTask = async (taskId: string) => {
+  const { data, error } = await supabase
+    .from('tasks')
+    .select('*')
+    .eq('tId', taskId)
+    .single();
 
-    return () => sub.subscription.unsubscribe();
-  }, []);
+  if (error || !data) {
+    Alert.alert('Task could not be fetched, please try again');
+    return;
+  }
 
-  const GetTask = async (taskId: string) => {
-    const { data, error } = await supabase
-      .from('tasks')
-      .select('*')
-      .eq('tId', taskId)
+  SetTask(data);
+
+  if (data.aId) {
+    const { data: assignmentData, error: assignmentError } = await supabase
+      .from('assignments')
+      .select('title, sId')
+      .eq('aId', data.aId)
       .single();
 
-    if (error || !data) {
-      Alert.alert('Task could not be fetched, please try again');
+    if (assignmentError || !assignmentData) {
+      setContextMeta({
+        subjectTitle: 'Unknown Subject',
+        assignmentTitle: 'Unknown Assignment',
+        subjectColor: 'slate',
+      });
       return;
     }
 
-    SetTask(data);
-
-    if (data.aId) {
-      const { data: assignmentData, error: assignmentError } = await supabase
-        .from('assignments')
-        .select('title, sId')
-        .eq('aId', data.aId)
+    if (assignmentData.sId) {
+      const { data: subjectData, error: subjectError } = await supabase
+        .from('subjects')
+        .select('title, color')
+        .eq('sId', assignmentData.sId)
         .single();
 
-      if (assignmentError || !assignmentData) {
+      if (subjectError || !subjectData) {
         setContextMeta({
           subjectTitle: 'Unknown Subject',
-          assignmentTitle: 'Unknown Assignment',
+          assignmentTitle: assignmentData.title ?? 'Unknown Assignment',
           subjectColor: 'slate',
         });
         return;
       }
 
-      if (assignmentData.sId) {
-        const { data: subjectData, error: subjectError } = await supabase
-          .from('subjects')
-          .select('title, color')
-          .eq('sId', assignmentData.sId)
-          .single();
-
-        if (subjectError || !subjectData) {
-          setContextMeta({
-            subjectTitle: 'Unknown Subject',
-            assignmentTitle: assignmentData.title ?? 'Unknown Assignment',
-            subjectColor: 'slate',
-          });
-          return;
-        }
-
-        setContextMeta({
-          subjectTitle: subjectData.title ?? 'Unknown Subject',
-          assignmentTitle: assignmentData.title ?? 'Unknown Assignment',
-          subjectColor: (subjectData.color as SubjectColor | undefined) ?? 'slate',
-        });
-      }
+      setContextMeta({
+        subjectTitle: subjectData.title ?? 'Unknown Subject',
+        assignmentTitle: assignmentData.title ?? 'Unknown Assignment',
+        subjectColor: (subjectData.color as SubjectColor | undefined) ?? 'slate',
+      });
     }
-  };
+  }
+};
 
-  useFocusEffect(
-    useCallback(() => {
-      if (session && tId) {
-        GetTask(tId);
-      }
-    }, [session, tId])
-  );
+useFocusEffect(
+  useCallback(() => {
+    if (session && tId) {
+      GetTask(tId);
+    }
+  }, [session, tId])
+);
+
+const handleSprintStart = async () => {
+  const activeSprint = await GetActiveSprint();
+
+  if (!activeSprint) {
+    router.push({
+      pathname: '/task/timer',
+      params: { tId: task?.tId},
+    });
+    return;
+  }
+
+
+  
+  const secondsLeft = Math.ceil((activeSprint.endTime - Date.now()) / 1000)
+
+  if (secondsLeft <= 0) {
+    await RemoveActiveSprint();
+    router.push({
+      pathname: '/task/timer',
+      params: { tId: task?.tId}
+    });
+    return;
+    }
+    
+
+  if (activeSprint!.taskId === task?.tId) {
+    router.push({
+    pathname: '/task/timer',
+    params: { tId: activeSprint!.taskId}});
+    return;
+    }
 
-  const DeleteTask = async (taskId: string) => {
     Alert.alert(
-      'Delete Task',
-      'Are you sure you want to delete this task?',
+      'Active sprint in progress', 
+      'Starting a new sprint will end the current active sprint', 
       [
+        { text: 'Cancel', style: 'cancel',  },
         {
-          text: 'Cancel',
-          style: 'cancel',
-        },
-        {
-          text: 'Delete',
+          text: 'Start new sprint',
           style: 'destructive',
           onPress: async () => {
-            const { error } = await supabase
-              .from('tasks')
-              .delete()
-              .eq('tId', taskId);
-
-            if (error) {
-              Alert.alert('Task could not be deleted, please try again');
-              return;
-            }
-
-            const aId = task?.aId;
-
-            if (aId) {
-              try {
-                await CheckAssignmentCompletion(aId);
-              } catch {
-                Alert.alert('Failed to update assignment completion state');
-              }
-            }
-
-            Alert.alert('Task deleted successfully!');
-            router.back();
+            await RemoveActiveSprint();
+            router.push({
+              pathname: '/task/timer',
+              params: { tId: task?.tId },
+            });
           },
         },
       ]
     );
-  };
-
-  const colorSet = getSubjectColorSet(contextMeta.subjectColor);
-
-  if (!task) {
-    return (
-      <View className="flex-1 bg-app-bg px-5 pt-6">
-        <Stack.Screen
-          options={{
-            title: 'Task Details',
-            headerRight: () => (
-              <Pressable
-                className="rounded-full bg-app-subtle px-4 py-2"
-                onPress={async () => await supabase.auth.signOut()}
-              >
-                <Text className="text-sm font-semibold text-text-secondary">
-                  Logout
-                </Text>
-              </Pressable>
-            ),
-          }}
-        />
-
-        <View
-          className="rounded-3xl bg-app-surface p-5"
-          style={{
-            borderWidth: 1,
-            borderColor: colorSet.strong,
-          }}
-        >
-          <Text className="text-2xl font-bold text-text-main">
-            Task not found
-          </Text>
-          <Text className="mt-2 text-base text-text-secondary">
-            The task could not be loaded.
-          </Text>
-
-          <Pressable
-            className="mt-5 h-12 items-center justify-center rounded-2xl bg-accent"
-            onPress={() => router.back()}
-          >
-            <Text className="text-base font-bold text-text-inverse">
-              Go back
-            </Text>
-          </Pressable>
-        </View>
-      </View>
-    );
   }
 
-  const isOwner = session?.user.id === task.uId;
 
+const DeleteTask = async (taskId: string) => {
+  Alert.alert(
+    'Delete Task',
+    'Are you sure you want to delete this task?',
+    [
+      {
+        text: 'Cancel',
+        style: 'cancel',
+      },
+      {
+        text: 'Delete',
+        style: 'destructive',
+        onPress: async () => {
+          const { error } = await supabase
+            .from('tasks')
+            .delete()
+            .eq('tId', taskId);
+
+          if (error) {
+            Alert.alert('Task could not be deleted, please try again');
+            return;
+          }
+
+          const aId = task?.aId;
+
+          if (aId) {
+            try {
+              await CheckAssignmentCompletion(aId);
+            } catch {
+              Alert.alert('Failed to update assignment completion state');
+            }
+          }
+
+          Alert.alert('Task deleted successfully!');
+          router.back();
+        },
+      },
+    ]
+  );
+};
+
+const colorSet = getSubjectColorSet(contextMeta.subjectColor);
+
+if (!task) {
   return (
     <View className="flex-1 bg-app-bg px-5 pt-6">
       <Stack.Screen
         options={{
           title: 'Task Details',
-          headerTitleAlign: 'center',
           headerRight: () => (
             <Pressable
               className="rounded-full bg-app-subtle px-4 py-2"
@@ -209,102 +234,150 @@ export default function ViewDetailsTask() {
           borderColor: colorSet.strong,
         }}
       >
-        <View className="flex-row items-start">
-          <View
-            className="mr-3 mt-1 h-6 w-6 items-center justify-center rounded-md border-2"
-            style={{
-              borderColor: task.isCompleted ? colorSet.strong : '#DDD6C8',
-              backgroundColor: task.isCompleted ? colorSet.strong : '#EFEBE3',
-            }}
-          >
-            {task.isCompleted && (
-              <Text className="text-sm font-bold text-text-inverse">✓</Text>
-            )}
-          </View>
+        <Text className="text-2xl font-bold text-text-main">
+          Task not found
+        </Text>
+        <Text className="mt-2 text-base text-text-secondary">
+          The task could not be loaded.
+        </Text>
 
-          <View className="flex-1">
-            <Text
-              className={`text-2xl font-bold ${
-                task.isCompleted ? 'text-text-secondary' : 'text-text-main'
-              }`}
-            >
-              {task.title}
-            </Text>
-
-            {task.description ? (
-              <Text className="mt-3 text-base leading-6 text-text-secondary">
-                {task.description}
-              </Text>
-            ) : (
-              <Text className="mt-3 text-base text-text-muted">
-                No description added.
-              </Text>
-            )}
-
-            <View className="mt-4 flex-row flex-wrap">
-              <View
-                className="mr-2 mb-2 rounded-full px-3 py-1"
-                style={{ backgroundColor: colorSet.soft }}
-              >
-                <Text
-                  className="text-xs font-semibold"
-                  style={{ color: colorSet.strong }}
-                >
-                  {contextMeta.subjectTitle}
-                </Text>
-              </View>
-
-              <View className="mr-2 mb-2 rounded-full bg-app-subtle px-3 py-1">
-                <Text className="text-xs font-semibold text-text-secondary">
-                  {contextMeta.assignmentTitle}
-                </Text>
-              </View>
-            </View>
-
-            <Text className="mt-2 text-sm text-text-muted">
-              Last changed: {formatDateTime(task.lastChanged)}
-            </Text>
-          </View>
-        </View>
-
-        {isOwner && (
-          <View className="mt-5 flex-row border-t border-app-border pt-5">
-            <Pressable
-              className="mr-3 flex-1 items-center justify-center rounded-2xl border border-app-border bg-app-subtle py-3"
-              onPress={() =>
-                router.push({
-                  pathname: '/task/upsertTask',
-                  params: { tId: task.tId },
-                })
-              }
-            >
-              <Text className="text-sm font-bold text-text-secondary">
-                Edit
-              </Text>
-            </Pressable>
-            <Pressable
-              className='mr-3 flex-1 items-center justify-center rounded-2xl border border-app-border bg-app-subtle py-3'
-              onPress={() => 
-                router.push({
-                  pathname: '/task/timer',
-                  params: { tId: task.tId}
-                })
-              }>
-                <Text className='text.sm font-bold text-text-secondary'>
-                  Start Sprint
-                </Text>
-              </Pressable>
-            <Pressable
-              className="flex-1 items-center justify-center rounded-2xl border border-app-border bg-app-surface py-3"
-              onPress={() => DeleteTask(task.tId)}
-            >
-              <Text className="text-sm font-bold text-status-danger">
-                Delete
-              </Text>
-            </Pressable>
-          </View>
-        )}
+        <Pressable
+          className="mt-5 h-12 items-center justify-center rounded-2xl bg-accent"
+          onPress={() => router.back()}
+        >
+          <Text className="text-base font-bold text-text-inverse">
+            Go back
+          </Text>
+        </Pressable>
       </View>
     </View>
   );
 }
+
+const isOwner = session?.user.id === task.uId;
+
+return (
+  <View className="flex-1 bg-app-bg px-5 pt-6">
+    <Stack.Screen
+      options={{
+        title: 'Task Details',
+        headerTitleAlign: 'center',
+        headerRight: () => (
+          <Pressable
+            className="rounded-full bg-app-subtle px-4 py-2"
+            onPress={async () => await supabase.auth.signOut()}
+          >
+            <Text className="text-sm font-semibold text-text-secondary">
+              Logout
+            </Text>
+          </Pressable>
+        ),
+      }}
+    />
+
+    <View
+      className="rounded-3xl bg-app-surface p-5"
+      style={{
+        borderWidth: 1,
+        borderColor: colorSet.strong,
+      }}
+    >
+      <View className="flex-row items-start">
+        <View
+          className="mr-3 mt-1 h-6 w-6 items-center justify-center rounded-md border-2"
+          style={{
+            borderColor: task.isCompleted ? colorSet.strong : '#DDD6C8',
+            backgroundColor: task.isCompleted ? colorSet.strong : '#EFEBE3',
+          }}
+        >
+          {task.isCompleted && (
+            <Text className="text-sm font-bold text-text-inverse">✓</Text>
+          )}
+        </View>
+
+        <View className="flex-1">
+          <Text
+            className={`text-2xl font-bold ${
+              task.isCompleted ? 'text-text-secondary' : 'text-text-main'
+            }`}
+          >
+            {task.title}
+          </Text>
+
+          {task.description ? (
+            <Text className="mt-3 text-base leading-6 text-text-secondary">
+              {task.description}
+            </Text>
+          ) : (
+            <Text className="mt-3 text-base text-text-muted">
+              No description added.
+            </Text>
+          )}
+
+          <View className="mt-4 flex-row flex-wrap">
+            <View
+              className="mr-2 mb-2 rounded-full px-3 py-1"
+              style={{ backgroundColor: colorSet.soft }}
+            >
+              <Text
+                className="text-xs font-semibold"
+                style={{ color: colorSet.strong }}
+              >
+                {contextMeta.subjectTitle}
+              </Text>
+            </View>
+
+            <View className="mr-2 mb-2 rounded-full bg-app-subtle px-3 py-1">
+              <Text className="text-xs font-semibold text-text-secondary">
+                {contextMeta.assignmentTitle}
+              </Text>
+            </View>
+          </View>
+
+          <Text className="mt-2 text-sm text-text-muted">
+            Last changed: {formatDateTime(task.lastChanged)}
+          </Text>
+          <Text className="mt-1 text-sm text-text-muted">
+            Time spent: {formatTrackedTime(task.totalTimeInSeconds ?? 0)}
+          </Text>
+        </View>
+      </View>
+
+    {isOwner && (
+      <View className="mt-5 flex-row border-t border-app-border pt-5">
+        <Pressable
+          className="mr-3 flex-1 items-center justify-center rounded-2xl border border-app-border bg-app-subtle py-3"
+          onPress={() =>
+            router.push({
+              pathname: '/task/upsertTask',
+              params: { tId: task.tId },
+            })
+          }
+        >
+          <Text className="text-sm font-bold text-text-secondary">
+            Edit
+          </Text>
+        </Pressable>
+        <Pressable
+          className='mr-3 flex-1 items-center justify-center rounded-2xl border border-app-border bg-app-subtle py-3'
+          onPress={() => 
+            handleSprintStart()
+          }>
+            <Text className='text.sm font-bold text-text-secondary'>
+              Start Sprint
+            </Text>
+          </Pressable>
+        <Pressable
+          className="flex-1 items-center justify-center rounded-2xl border border-app-border bg-app-surface py-3"
+          onPress={() => DeleteTask(task.tId)}
+        >
+          <Text className="text-sm font-bold text-status-danger">
+            Delete
+          </Text>
+        </Pressable>
+      </View>
+    )}
+    </View>
+  </View>
+  );
+}