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',
+  },
+});