Merge pull request #2 from Fhj0607/tailwind

Tailwind

app.json

@@ -38,7 +38,8 @@
             "backgroundColor": "#000000"
           }
         }
-      ]
+      ],
+      "expo-secure-store"
     ],
     "experiments": {
       "typedRoutes": true,

app/(tabs)/_layout.tsx

@@ -1,9 +1,8 @@
 import { supabase } from "@/lib/supabase";
 import { Session } from "@supabase/supabase-js";
-import { Tabs } from "expo-router";
+import { Redirect, Tabs } from "expo-router";
 import { useEffect, useState } from "react";
 
-
 export default function TabLayout() {
   const [session, SetSession] = useState<Session | null>(null)
   const [loading, SetLoading] = useState(true);
@@ -28,14 +27,29 @@ export default function TabLayout() {
     return null;
   }
 
- //   if (!session) {
- //     return <Redirect href="/createUser" />;
- //   }
+  if (!session) {
+    return <Redirect href="/createUser" />;
+  }
 
   return (
     <Tabs>
-      <Tabs.Screen name="index" options={{title: "Today"}} />
+      <Tabs.Screen name="index" options={{title: "Index"}} />
       <Tabs.Screen name="tasks" options={{title: "Tasks"}} />
+      <Tabs.Screen name="assignments" options={{title: "Assignments"}} />
+      <Tabs.Screen name="subjects" options={{title: "Subjects"}} />
+      <Tabs.Screen name="timer" options={{title: "Timer"}} />
+
+      <Tabs.Screen name="subject/createSubject" options={{ href: null }} />
+      <Tabs.Screen name="subject/editSubject" options={{ href: null }} />
+      <Tabs.Screen name="subject/viewDetailsSubject" options={{ href: null }} />
+
+      <Tabs.Screen name="assignment/createAssignment" options={{ href: null }} />
+      <Tabs.Screen name="assignment/editAssignment" options={{ href: null }} />
+      <Tabs.Screen name="assignment/viewDetailsAssignment" options={{ href: null }} />
+
+      <Tabs.Screen name="task/createTask" options={{ href: null }} />
+      <Tabs.Screen name="task/editTask" options={{ href: null }} />
+      <Tabs.Screen name="task/viewDetailsTask" options={{ href: null }} />
     </Tabs>
   );
 }

app/(tabs)/assignment/createAssignment.tsx

@@ -0,0 +1,213 @@
+import { defaultStyles } from '@/constants/defaultStyles';
+import { supabase } from '@/lib/supabase';
+import { router, Stack, useLocalSearchParams } from 'expo-router';
+import { useState } from 'react';
+import {
+  ActivityIndicator,
+  Alert,
+  Keyboard,
+  KeyboardAvoidingView,
+  Platform,
+  Pressable,
+  ScrollView,
+  Text,
+  TextInput,
+  TouchableWithoutFeedback,
+  View,
+} from 'react-native';
+
+export default function CreateAssignment() {
+  const sId = (useLocalSearchParams().sId as string) ?? null;
+
+  const [title, SetTitle] = useState('');
+  const [description, SetDescription] = useState('');
+  const [deadline, SetDeadline] = useState('');
+  const [isCompleted, SetIsCompleted] = useState(false);
+  const [isSaving, SetIsSaving] = useState(false);
+
+  const CreateAssignment = async () => {
+    if (title.trim() === '') {
+      Alert.alert('Title is required!');
+      return;
+    }
+
+    const { data, error: userError } = await supabase.auth.getUser();
+
+    if (userError || !data.user) {
+      router.replace('../createUser');
+      return;
+    }
+
+    SetIsSaving(true);
+
+    const { error: dbError } = await supabase.from('assignments').insert({
+      title: title.trim(),
+      description: description.trim(),
+      deadline: deadline.trim(),
+      isCompleted,
+      lastChanged: new Date().toISOString(),
+      uId: data.user.id,
+      sId,
+    });
+
+    if (dbError) {
+      SetIsSaving(false);
+      Alert.alert('Assignment could not be created, please try again');
+      return;
+    }
+
+    Alert.alert('Assignment successfully created!');
+
+    SetTitle('');
+    SetDescription('');
+    SetDeadline('');
+    SetIsCompleted(false);
+    SetIsSaving(false);
+
+    router.back();
+  };
+
+  const inputClassName =
+    'rounded-2xl border border-app-border bg-app-subtle px-4 py-3 text-base text-text-main';
+
+  const labelClassName = 'mb-2 text-sm font-semibold text-text-secondary';
+
+  return (
+    <>
+      <Stack.Screen
+        options={{
+          title: 'Create Assignment',
+          headerTitleStyle: defaultStyles.title,
+        }}
+      />
+
+      <KeyboardAvoidingView
+        className="flex-1 bg-app-bg"
+        behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+      >
+        <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
+          <ScrollView
+            className="flex-1"
+            keyboardShouldPersistTaps="handled"
+            contentContainerStyle={{
+              flexGrow: 1,
+              justifyContent: 'center',
+              paddingHorizontal: 20,
+              paddingVertical: 32,
+            }}
+          >
+            <View className="mb-6">
+              <Text className="text-3xl font-bold text-text-main">
+                Create Assignment
+              </Text>
+              <Text className="mt-2 text-base leading-6 text-text-secondary">
+                Add a new assignment to keep your subject organized.
+              </Text>
+            </View>
+
+            <View className="rounded-3xl border border-app-border bg-app-surface p-5 shadow-sm">
+              <View className="mb-5">
+                <Text className={labelClassName}>Title</Text>
+                <TextInput
+                  className={inputClassName}
+                  placeholder="Enter assignment title"
+                  value={title}
+                  onChangeText={SetTitle}
+                  returnKeyType="next"
+                />
+              </View>
+
+              <View className="mb-5">
+                <Text className={labelClassName}>Description</Text>
+                <TextInput
+                  className={`${inputClassName} min-h-28`}
+                  placeholder="Add a short description"
+                  value={description}
+                  onChangeText={SetDescription}
+                  multiline
+                  textAlignVertical="top"
+                />
+              </View>
+
+              <View className="mb-5">
+                <Text className={labelClassName}>Deadline</Text>
+                <TextInput
+                  className={inputClassName}
+                  placeholder="YYYY-MM-DD"
+                  value={deadline}
+                  onChangeText={SetDeadline}
+                  autoCapitalize="none"
+                  autoCorrect={false}
+                />
+              </View>
+
+              <Pressable
+                className={`mb-6 flex-row items-center rounded-2xl border p-4 ${
+                  isCompleted
+                    ? 'border-accent bg-accent-soft'
+                    : 'border-app-border bg-app-subtle'
+                }`}
+                onPress={() => SetIsCompleted((current) => !current)}
+                disabled={isSaving}
+              >
+                <View
+                  className={`mr-3 h-6 w-6 items-center justify-center rounded-md border-2 ${
+                    isCompleted
+                      ? 'border-accent bg-accent'
+                      : 'border-app-border bg-app-surface'
+                  }`}
+                >
+                  {isCompleted && (
+                    <Text className="text-sm font-bold text-text-inverse">
+                      ✓
+                    </Text>
+                  )}
+                </View>
+
+                <View className="flex-1">
+                  <Text className="text-base font-semibold text-text-main">
+                    Mark as completed
+                  </Text>
+                  <Text className="mt-1 text-sm text-text-muted">
+                    You can change this later.
+                  </Text>
+                </View>
+              </Pressable>
+
+              <Pressable
+                className={`h-14 items-center justify-center rounded-2xl ${
+                  isSaving ? 'bg-accent-disabled' : 'bg-accent'
+                }`}
+                onPress={CreateAssignment}
+                disabled={isSaving}
+              >
+                {isSaving ? (
+                  <View className="flex-row items-center">
+                    <ActivityIndicator size="small" />
+                    <Text className="ml-3 text-base font-bold text-text-inverse">
+                      Creating...
+                    </Text>
+                  </View>
+                ) : (
+                  <Text className="text-base font-bold text-text-inverse">
+                    Create Assignment
+                  </Text>
+                )}
+              </Pressable>
+
+              <Pressable
+                className="mt-3 h-14 items-center justify-center rounded-2xl border border-app-border bg-app-subtle"
+                onPress={() => router.back()}
+                disabled={isSaving}
+              >
+                <Text className="text-base font-semibold text-text-secondary">
+                  Cancel
+                </Text>
+              </Pressable>
+            </View>
+          </ScrollView>
+        </TouchableWithoutFeedback>
+      </KeyboardAvoidingView>
+    </>
+  );
+}

app/(tabs)/assignment/editAssignment.tsx

@@ -0,0 +1,143 @@
+import { defaultStyles } from '@/constants/defaultStyles';
+import { supabase } from '@/lib/supabase';
+import { router, Stack, useFocusEffect, useLocalSearchParams } from 'expo-router';
+import { useCallback, useState } from 'react';
+import { ActivityIndicator, Alert, Button, Keyboard, KeyboardAvoidingView, Platform, Pressable, Text, TextInput, TouchableWithoutFeedback, View } from 'react-native';
+
+type Assignment = {
+  aId: string;
+  title: string;
+  description: string;
+  deadline: string;
+  isCompleted: boolean;
+  lastChanged: string;
+  uId: string;
+  sId: string;
+}
+
+export default function EditAssignment() {
+  const { aId } = useLocalSearchParams<{ aId: string }>();
+  const [assignment, SetAssignment] = useState<Assignment | null>(null)
+  const [isSaving, SetIsSaving] = useState(false);
+
+  const GetAssignment = async (aId: string) => { 
+    const { data, error } = await supabase.from("assignments").select("*").eq("aId", aId).single();
+
+    if (error) {
+      Alert.alert("Assignment could not be fetched, please try again");
+      return;
+    }
+
+    SetAssignment(data ?? null);
+  }
+
+  useFocusEffect(
+    useCallback(() => {
+      if (aId) {
+        GetAssignment(aId);
+      }
+    }, [aId])
+  );
+
+  const EditAssignment = async () => {
+    if (!assignment) return;
+
+    if(assignment.title.trim() === '' || assignment.deadline.trim() === '') {
+      Alert.alert("Title and deadline are required!");
+      return;
+    }
+        
+    const { data, error: userError } = await supabase.auth.getUser();
+
+    if(userError || !data.user) {
+      router.replace("../createUser");
+      return;
+    } 
+
+    SetIsSaving(true);
+
+    const { error: dbError } = await supabase.from("assignments").update({
+      title: assignment.title,
+      description: assignment.description,
+      deadline: assignment.deadline,
+      isCompleted: assignment.isCompleted,
+      lastChanged: new Date().toISOString(),
+      uId: data.user.id,
+      sId: assignment.sId,
+    }).eq("aId", aId);
+
+    SetIsSaving(false);
+
+    if (dbError) {
+      Alert.alert("Assignment could not be edited, please try again");
+      return;
+    }
+
+    Alert.alert("Assignment successfully edited!");
+
+    router.back();
+  }
+
+  return (
+    <View style={defaultStyles.container}>
+      <Stack.Screen
+        options={{
+          title: "Edit Assignment",
+          headerTitleStyle: defaultStyles.title
+        }}
+      />
+
+      {!assignment && (
+        <View style={defaultStyles.container}>
+          <Text style={defaultStyles.title}>Assignment not found</Text>
+        </View>
+      )}
+
+      {assignment && (
+        <View style={defaultStyles.container}>
+          <Text style={defaultStyles.title}>Edit Assignment</Text>
+          <KeyboardAvoidingView style={{ flex: 1 }} behavior={Platform.OS === "ios" ? "padding" : "height"}>
+            <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
+              <View style={defaultStyles.container}>
+                <TextInput
+                  style={defaultStyles.inputText}
+                  placeholder="Title"
+                  value={assignment.title}
+                  onChangeText={(text) => SetAssignment(prev => prev ? { ...prev, title: text } : prev)}
+                />
+                <TextInput
+                  style={defaultStyles.inputText}
+                  placeholder="Text"
+                  value={assignment.description}
+                  onChangeText={(text) => SetAssignment(prev => prev ? { ...prev, description: text } : prev)}
+                />
+                <TextInput
+                  style={defaultStyles.inputText}
+                  placeholder="Text"
+                  value={assignment.deadline}
+                  onChangeText={(text) => SetAssignment(prev => prev ? { ...prev, deadline: text } : prev)}
+                />
+                <Pressable
+                  onPress={() => SetAssignment(prev => prev ? { ...prev, isCompleted: !prev.isCompleted } : prev)}
+                  style={defaultStyles.checkboxContainer}
+                >
+                  <View style={defaultStyles.checkbox}>
+                    {assignment.isCompleted && <Text style={defaultStyles.checkboxMark}>✓</Text>}
+                  </View>
+                  <Text style={defaultStyles.checkboxLabel}>{assignment.isCompleted ? 'Completed' : 'Not Completed'}</Text>
+                </Pressable>
+
+                <Button title={isSaving ? "Saving..." : "Save"} onPress={EditAssignment} disabled={isSaving} />
+                {isSaving && (
+                  <ActivityIndicator size="large" />
+                )}
+                <Button title="Cancel" onPress={() => router.back()} />
+              </View>
+            </TouchableWithoutFeedback>
+          </KeyboardAvoidingView>
+        </View>
+      )}
+    </View>
+  )
+}
+

app/(tabs)/assignment/viewDetailsAssignment.tsx

@@ -0,0 +1,224 @@
+import { defaultStyles } from '@/constants/defaultStyles';
+import { supabase } from '@/lib/supabase';
+import { Session } from '@supabase/supabase-js';
+import { router, Stack, useFocusEffect, useLocalSearchParams } from 'expo-router';
+import { useCallback, useEffect, useState } from 'react';
+import { Alert, Button, Pressable, SectionList, Text, View } from "react-native";
+
+type Assignment = {
+  aId: string;
+  title: string;
+  description: string;
+  deadline: string;
+  isCompleted: boolean;
+  lastChanged: string;
+  uId: string;
+  sId: string;
+}
+
+type Task = {
+  tId: string;
+  title: string;
+  description: string;
+  isCompleted: boolean;
+  lastChanged: string;
+  uId: string;
+  aId: string;
+}
+
+export default function ViewDetailsAssignment() {
+  const { aId } = useLocalSearchParams<{ aId: string }>();
+  const [assignment, SetAssignment] = useState<Assignment | null>(null)
+  const [tasks, SetTasks] = useState<Task[]>([])
+  const [session, SetSession] = useState<Session | null>(null)
+
+  const taskSections = [
+    { title: "Upcoming Tasks", data: tasks.filter((task) => !task.isCompleted), emptyMessage: "No upcoming tasks" },
+    { title: "Completed Tasks", data: tasks.filter((task) => task.isCompleted), emptyMessage: "No completed tasks" },
+  ];
+
+  useEffect(() => {
+    supabase.auth.getSession().then(({ data }) => SetSession(data.session ?? null))
+    const { data: sub } = supabase.auth.onAuthStateChange((_event, newSession) => {
+      SetSession(newSession)
+    })
+    return () => sub.subscription.unsubscribe()
+    },
+  [])
+
+  const GetAssignment = async (aId: string) => { 
+    const { data, error } = await supabase.from("assignments").select("*").eq("aId", aId).single();
+
+    if (error) {
+      Alert.alert("Assignment could not be fetched, please try again");
+      return;
+    }
+
+    SetAssignment(data ?? null);
+  }
+
+  const GetTasks = async (aId: string) => { 
+    const { data, error } = await supabase.from("tasks").select("*").eq("aId", aId);
+
+    if (error) {
+      Alert.alert("Tasks could not be fetched, please try again");
+      return;
+    }
+
+    SetTasks(data ?? []);
+  }
+
+  useFocusEffect(
+    useCallback(() => {
+      if (session && aId) {
+        GetAssignment(aId);
+        GetTasks(aId);
+      }
+    }, [session, aId])
+  );
+
+  const DeleteAssignment = async (aId: string) => {
+    Alert.alert(
+      "Delete Assignment",
+      "Are you sure you want to delete this assignment?",
+      [
+        {
+          text: "Cancel",
+          style: "cancel"
+        },
+        {
+          text: "Delete",
+          style: "destructive",
+          onPress: async () => {
+            const { error } = await supabase.from("assignments").delete().eq("aId", aId);
+
+            if (error) {
+              Alert.alert("Assignment could not be deleted, please try again");
+              return;
+            }
+
+            Alert.alert("Assignment deleted successfully!");
+            router.back();
+          }
+        }
+      ]
+    )
+  }
+
+  const DeleteTask = async (tId: string, aId: 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", tId);
+
+            if (error) {
+              Alert.alert("Task could not be deleted, please try again");
+              return;
+            }
+
+            Alert.alert("Task deleted successfully!");
+            GetTasks(aId);
+          }
+        }
+      ]
+    )
+  }
+
+  return (
+    <View style={defaultStyles.container}>
+      <Stack.Screen
+        options={{
+          title: "Details",
+          headerTitleStyle: defaultStyles.title,
+          headerLeft: () => {
+            return (
+              <View style={defaultStyles.buttonContainer}>
+                <Button title="Back" onPress={router.back} />
+              </View>
+            )
+          },
+          headerRight: () => {
+            return (
+              <View style={defaultStyles.buttonContainer}>
+                <Button title="Logout" onPress={async () => await supabase.auth.signOut()} />
+              </View>
+            )
+          },
+        }}
+      />
+
+      {!assignment && (
+        <View style={defaultStyles.container}>
+          <Text style={defaultStyles.title}>Assignment not found</Text>
+        </View>
+      )}
+      
+      {assignment && (
+        <View style={defaultStyles.container}>
+          <View style={defaultStyles.container}>
+            <Text style={defaultStyles.title}>{assignment.title}</Text>
+            <Text style={defaultStyles.body}>{assignment.description}</Text>
+            <Text style={defaultStyles.body}>{assignment.deadline}</Text>
+            <View style={defaultStyles.checkbox}>
+                {assignment.isCompleted && <Text style={defaultStyles.checkboxMark}>✓</Text>}
+            </View>
+            <Text style={defaultStyles.body}>{assignment.lastChanged}</Text>
+
+            <Button title="Edit" onPress={() => router.push({pathname: "/assignment/editAssignment", params: { aId: assignment.aId }})} />
+            <Button title="Delete" onPress={() => DeleteAssignment(assignment.aId)} />
+          </View>
+
+          <View style={defaultStyles.buttonContainer}>
+            <Button title="Create Task" onPress={() => router.push({pathname: "/task/createTask", params: { aId: assignment.aId }})} />
+          </View>
+
+          <SectionList
+            sections={taskSections}
+            keyExtractor={(item) => item.tId}
+            renderSectionHeader={({ section: { title } }) => <Text style={defaultStyles.subtitle}>{title}</Text>}
+            renderItem={({ item }) => {
+              const isOwner = session?.user.id === item.uId;
+          
+              return (
+                <View style={defaultStyles.container}>
+                  <Pressable style={defaultStyles.container} onPress={() => router.push({pathname: "/task/viewDetailsTask", params: { tId: item.tId }})}>
+                    <Text style={defaultStyles.boldBody}>{item.title}</Text>
+                    <View style={defaultStyles.checkbox}>
+                      {item.isCompleted && <Text style={defaultStyles.checkboxMark}>✓</Text>}
+                    </View>
+                  </Pressable>
+          
+                  {isOwner && (
+                    <View style={defaultStyles.buttonContainer}>
+                      <Button title="Edit" onPress={() => router.push({pathname: "/task/editTask", params: { tId: item.tId }})} />
+                      <Button title="Delete" onPress={() => DeleteTask(item.tId, item.tId)} />
+                    </View>
+                  )}
+                </View>
+              );
+            }}
+            renderSectionFooter={({ section }) =>
+              section.data.length === 0 ? (
+                <View style={defaultStyles.container}>
+                  <Text style={defaultStyles.body}>{section.emptyMessage}</Text>
+                  <View style={defaultStyles.separator} />
+                </View>
+              ) : (
+                <View style={defaultStyles.separator} />
+              )
+            }
+          />
+        </View>
+      )}
+    </View>
+  );
+}

app/(tabs)/assignments.tsx

@@ -0,0 +1,282 @@
+import { defaultStyles } from '@/constants/defaultStyles';
+import { supabase } from '@/lib/supabase';
+import { Ionicons } from '@expo/vector-icons';
+import { Session } from '@supabase/supabase-js';
+import { router, Stack, useFocusEffect } from 'expo-router';
+import { useCallback, useEffect, useState } from 'react';
+import {
+  Alert,
+  Pressable,
+  SectionList,
+  Text,
+  View,
+} from 'react-native';
+
+type Assignment = {
+  aId: string;
+  title: string;
+  description: string;
+  deadline: string;
+  isCompleted: boolean;
+  lastChanged: string;
+  uId: string;
+  sId: string;
+};
+
+export default function Assignments() {
+  const [assignments, SetAssignments] = useState<Assignment[]>([]);
+  const [session, SetSession] = useState<Session | null>(null);
+
+  const assignmentSections = [
+    {
+      title: 'Upcoming Assignments',
+      data: assignments.filter((assignment) => !assignment.isCompleted),
+      emptyMessage: 'No upcoming assignments',
+    },
+    {
+      title: 'Completed Assignments',
+      data: assignments.filter((assignment) => assignment.isCompleted),
+      emptyMessage: 'No completed assignments',
+    },
+  ];
+
+  useEffect(() => {
+    supabase.auth
+      .getSession()
+      .then(({ data }) => SetSession(data.session ?? null));
+
+    const { data: sub } = supabase.auth.onAuthStateChange(
+      (_event, newSession) => {
+        SetSession(newSession);
+      }
+    );
+
+    return () => sub.subscription.unsubscribe();
+  }, []);
+
+  const GetAssignments = async () => {
+    const { data, error } = await supabase
+      .from('assignments')
+      .select('*')
+      .order('deadline', { ascending: false });
+
+    if (error) {
+      Alert.alert('Assignments could not be fetched, please try again');
+      return;
+    }
+
+    SetAssignments(data ?? []);
+  };
+
+  useFocusEffect(
+    useCallback(() => {
+      if (session) {
+        GetAssignments();
+      }
+    }, [session])
+  );
+
+  const DeleteAssignment = async (aId: string) => {
+    Alert.alert(
+      'Delete Assignment',
+      'Are you sure you want to delete this assignment?',
+      [
+        {
+          text: 'Cancel',
+          style: 'cancel',
+        },
+        {
+          text: 'Delete',
+          style: 'destructive',
+          onPress: async () => {
+            const { error } = await supabase
+              .from('assignments')
+              .delete()
+              .eq('aId', aId);
+
+            if (error) {
+              Alert.alert('Assignment could not be deleted, please try again');
+              return;
+            }
+
+            Alert.alert('Assignment deleted successfully!');
+            GetAssignments();
+          },
+        },
+      ]
+    );
+  };
+
+  return (
+    <View className="flex-1 bg-app-bg">
+      <Stack.Screen
+        options={{
+          title: 'Assignments',
+          headerTitleStyle: defaultStyles.title,
+          headerRight: () => (
+            <View className="flex-row items-center">
+              <Pressable
+                className="mr-3 h-10 w-10 items-center justify-center rounded-full border border-app-border bg-app-surface"
+                onPress={GetAssignments}
+              >
+                <Ionicons name="refresh" size={20} color="#333" />
+              </Pressable>
+
+              <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>
+          ),
+        }}
+      />
+
+      <View className="flex-1 px-5 pt-5">
+        <View className="mb-6">
+          <Text className="text-3xl font-bold text-text-main">
+            Assignments
+          </Text>
+          <Text className="mt-2 text-base leading-6 text-text-secondary">
+            Track what is coming up and what you have already finished.
+          </Text>
+        </View>
+
+        <Pressable
+          className="mb-6 h-14 items-center justify-center rounded-2xl bg-accent"
+          onPress={() => router.push('/assignment/createAssignment')}
+        >
+          <Text className="text-base font-bold text-text-inverse">
+            Create Assignment
+          </Text>
+        </Pressable>
+
+        <SectionList
+          sections={assignmentSections}
+          keyExtractor={(item) => item.aId}
+          showsVerticalScrollIndicator={false}
+          stickySectionHeadersEnabled={false}
+          contentContainerStyle={{
+            paddingBottom: 32,
+          }}
+          renderSectionHeader={({ section: { title, data } }) => (
+            <View className="mb-3 mt-2 flex-row items-center justify-between">
+              <Text className="text-lg font-bold text-text-main">
+                {title}
+              </Text>
+
+              <View className="rounded-full bg-app-subtle px-3 py-1">
+                <Text className="text-xs font-semibold text-text-muted">
+                  {data.length}
+                </Text>
+              </View>
+            </View>
+          )}
+          renderItem={({ item }) => {
+            const isOwner = session?.user.id === item.uId;
+
+            return (
+              <View className="mb-4 rounded-3xl border border-app-border bg-app-surface p-4 shadow-sm">
+                <Pressable
+                  onPress={() =>
+                    router.push({
+                      pathname: '/assignment/viewDetailsAssignment',
+                      params: { aId: item.aId },
+                    })
+                  }
+                >
+                  <View className="flex-row items-start">
+                    <View
+                      className={`mr-3 mt-1 h-6 w-6 items-center justify-center rounded-md border-2 ${
+                        item.isCompleted
+                          ? 'border-accent bg-accent'
+                          : 'border-app-border bg-app-subtle'
+                      }`}
+                    >
+                      {item.isCompleted && (
+                        <Text className="text-sm font-bold text-text-inverse">
+                          ✓
+                        </Text>
+                      )}
+                    </View>
+
+                    <View className="flex-1">
+                      <Text
+                        className={`text-base font-bold ${
+                          item.isCompleted
+                            ? 'text-text-secondary'
+                            : 'text-text-main'
+                        }`}
+                      >
+                        {item.title}
+                      </Text>
+
+                      {item.description ? (
+                        <Text
+                          className="mt-1 text-sm leading-5 text-text-muted"
+                          numberOfLines={2}
+                        >
+                          {item.description}
+                        </Text>
+                      ) : null}
+
+                      <View className="mt-3 self-start rounded-full bg-app-subtle px-3 py-1">
+                        <Text className="text-xs font-semibold text-text-secondary">
+                          Deadline: {item.deadline || 'No deadline'}
+                        </Text>
+                      </View>
+                    </View>
+                  </View>
+                </Pressable>
+
+                {isOwner && (
+                  <View className="mt-4 flex-row border-t border-app-border pt-4">
+                    <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: '/assignment/editAssignment',
+                          params: { aId: item.aId },
+                        })
+                      }
+                    >
+                      <Text className="text-sm font-bold text-text-secondary">
+                        Edit
+                      </Text>
+                    </Pressable>
+
+                    <Pressable
+                      className="flex-1 items-center justify-center rounded-2xl border border-app-border bg-app-surface py-3"
+                      onPress={() => DeleteAssignment(item.aId)}
+                    >
+                      <Text className="text-sm font-bold text-status-danger">
+                        Delete
+                      </Text>
+                    </Pressable>
+                  </View>
+                )}
+              </View>
+            );
+          }}
+          renderSectionFooter={({ section }) =>
+            section.data.length === 0 ? (
+              <View className="mb-6 rounded-3xl border border-app-border bg-app-surface p-5">
+                <Text className="text-center text-base font-semibold text-text-secondary">
+                  {section.emptyMessage}
+                </Text>
+                <Text className="mt-1 text-center text-sm text-text-muted">
+                  New assignments will show up here.
+                </Text>
+              </View>
+            ) : (
+              <View className="mb-2" />
+            )
+          }
+        />
+      </View>
+    </View>
+  );
+}

app/(tabs)/createTask.tsx

@@ -1,110 +0,0 @@
-import { defaultStyles } from '@/constants/defaultStyles';
-import { supabase } from '@/lib/supabase';
-import { router, Stack } from 'expo-router';
-import { useState } from 'react';
-import { ActivityIndicator, Alert, Button, Keyboard, KeyboardAvoidingView, Platform, Pressable, Text, TextInput, TouchableWithoutFeedback, View } from 'react-native';
-
-export default function CreateTask() {
-  const [title, SetTitle] = useState('');
-  const [description, SetDescription] = useState('');
-  const [isCompleted, SetIsCompleted] = useState(false);
-  const [deadline, SetDeadline] = useState('');
-  const [isSaving, SetIsSaving] = useState(false);
-
-  const AddNote = async () => {
-    if(title.trim() === '' || description.trim() === '' || deadline.trim() === '') {
-      Alert.alert("All fields are required!");
-      return;
-    }
-        
-    const { data, error: userError } = await supabase.auth.getUser();
-
-    if(userError || !data.user) {
-      router.replace("../createUser");
-      return;
-    } 
-
-    SetIsSaving(true);
-
-    const { error: dbError } = await supabase.from("tasks").insert({
-      title,
-      description,
-      isCompleted,
-      lastChanged: new Date().toISOString(),
-      deadline,
-      uId: data.user.id,
-    });
-
-    if (dbError) {
-      Alert.alert("Task could not be created, please try again");
-      SetIsSaving(false);
-      return;
-    }
-
-    Alert.alert("Task successfully added!");
-
-    SetTitle('');
-    SetDescription('');
-    SetIsCompleted(false);
-    SetDeadline('');
-
-    SetIsSaving(false);
-
-    router.back();
-  }
-
-  return (
-    <>
-      <Stack.Screen
-        options={{
-          title: "Create Task",
-          headerTitleStyle: defaultStyles.title
-        }}
-      />
-
-      <View style={defaultStyles.container}>
-        <Text style={defaultStyles.title}>Create New Task</Text>
-        <KeyboardAvoidingView style={{ flex: 1 }} behavior={Platform.OS === "ios" ? "padding" : "height"}>
-          <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
-            <View style={defaultStyles.container}>
-              <TextInput
-                style={defaultStyles.inputText}
-                placeholder="Enter title"
-                value={title}
-                onChangeText={SetTitle}
-              />
-              <TextInput
-                style={defaultStyles.inputText}
-                placeholder="Enter description"
-                value={description}
-                onChangeText={SetDescription}
-              />
-              <TextInput
-                style={defaultStyles.inputText}
-                placeholder="Deadline (YYYY-MM-DD)"
-                value={deadline}
-                onChangeText={SetDeadline}
-              />
-              <Pressable
-                onPress={() => SetIsCompleted(state => !state)}
-                style={defaultStyles.checkboxContainer}
-              >
-                <View style={defaultStyles.checkbox}>
-                  {isCompleted && <Text style={defaultStyles.checkboxMark}>✓</Text>}
-                </View>
-                <Text style={defaultStyles.checkboxLabel}>{isCompleted ? 'Completed' : 'Not completed'}</Text>
-              </Pressable>
-
-              <Button title={isSaving ? "Saving..." : "Save"} onPress={AddNote} disabled={isSaving} />
-              {isSaving && (
-                <ActivityIndicator size="large" />
-              )}
-              <Button title="Cancel" onPress={() => router.back()} />
-            </View>
-          </TouchableWithoutFeedback>
-        </KeyboardAvoidingView>
-      </View>
-    </>
-  )
-}
-

app/(tabs)/editTask.tsx

@@ -1,245 +0,0 @@
-import { supabase } from '@/lib/supabase';
-import {
-  router,
-  Stack,
-  useFocusEffect,
-  useLocalSearchParams,
-} from 'expo-router';
-import { useCallback, useState } from 'react';
-import {
-  ActivityIndicator,
-  Alert,
-  Keyboard,
-  KeyboardAvoidingView,
-  Platform,
-  Pressable,
-  ScrollView,
-  Text,
-  TextInput,
-  TouchableWithoutFeedback,
-  View,
-} from 'react-native';
-
-export default function EditTask() {
-  const { taskId } = useLocalSearchParams<{ taskId?: string }>();
-
-  const [title, setTitle] = useState('');
-  const [description, setDescription] = useState('');
-  const [deadline, setDeadline] = useState('');
-  const [isCompleted, setIsCompleted] = useState(false);
-
-  const [isLoading, setIsLoading] = useState(false);
-  const [isSaving, setIsSaving] = useState(false);
-
-  useFocusEffect(
-    useCallback(() => {
-      const getTask = async () => {
-        if (!taskId) return;
-
-        setIsLoading(true);
-
-        try {
-          const { data, error } = await supabase
-            .from('tasks')
-            .select('*')
-            .eq('tId', taskId)
-            .single();
-
-          if (error || !data) {
-            Alert.alert('Task not found');
-            router.back();
-            return;
-          }
-
-          setTitle(data.title ?? '');
-          setDescription(data.description ?? '');
-          setDeadline(data.deadline ?? '');
-          setIsCompleted(Boolean(data.isCompleted));
-        } finally {
-          setIsLoading(false);
-        }
-      };
-
-      getTask();
-    }, [taskId])
-  );
-
-  const handleSaveTask = async () => {
-    if (!title.trim() || !description.trim() || !deadline.trim()) {
-      Alert.alert('All fields are required!');
-      return;
-    }
-
-    setIsSaving(true);
-
-    try {
-      const { data: userData, error: userError } = await supabase.auth.getUser();
-
-      if (userError || !userData.user) {
-        router.replace('../createUser');
-        return;
-      }
-
-      const { error: dbError } = await supabase
-        .from('tasks')
-        .update({
-          title: title.trim(),
-          description: description.trim(),
-          isCompleted,
-          lastChanged: new Date().toISOString(),
-          deadline: deadline.trim(),
-          uId: userData.user.id,
-        })
-        .eq('tId', taskId);
-
-      if (dbError) {
-        Alert.alert('Task could not be edited, please try again');
-        return;
-      }
-
-      Alert.alert('Task successfully edited!');
-      router.back();
-    } finally {
-      setIsSaving(false);
-    }
-  };
-
-  return (
-    <>
-      <Stack.Screen
-        options={{
-          title: 'Edit Task',
-          headerTitleStyle: {
-            fontSize: 20,
-            fontWeight: '700',
-          },
-        }}
-      />
-
-      <KeyboardAvoidingView
-        className="flex-1 bg-gray-100"
-        behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
-      >
-        <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
-          <ScrollView
-            keyboardShouldPersistTaps="handled"
-            contentContainerClassName="flex-grow justify-center px-5 py-8"
-          >
-            <View className="rounded-3xl bg-white p-6 shadow-lg">
-              <Text className="mb-1 text-3xl font-bold text-gray-900">
-                Edit Task
-              </Text>
-
-              <Text className="mb-6 text-base text-gray-500">
-                Update the details for this task.
-              </Text>
-
-              {isLoading ? (
-                <View className="items-center justify-center py-12">
-                  <ActivityIndicator size="large" />
-                  <Text className="mt-3 text-gray-500">Loading task...</Text>
-                </View>
-              ) : (
-                <>
-                  <View className="mb-4">
-                    <Text className="mb-2 text-sm font-semibold text-gray-700">
-                      Title
-                    </Text>
-                    <TextInput
-                      className="rounded-xl border border-gray-300 bg-gray-50 px-4 py-3 text-base text-gray-900"
-                      placeholder="Enter title"
-                      placeholderTextColor="#9ca3af"
-                      value={title}
-                      onChangeText={setTitle}
-                    />
-                  </View>
-
-                  <View className="mb-4">
-                    <Text className="mb-2 text-sm font-semibold text-gray-700">
-                      Description
-                    </Text>
-                    <TextInput
-                      className="min-h-28 rounded-xl border border-gray-300 bg-gray-50 px-4 py-3 text-base text-gray-900"
-                      placeholder="Enter description"
-                      placeholderTextColor="#9ca3af"
-                      value={description}
-                      onChangeText={setDescription}
-                      multiline
-                      textAlignVertical="top"
-                    />
-                  </View>
-
-                  <View className="mb-4">
-                    <Text className="mb-2 text-sm font-semibold text-gray-700">
-                      Deadline
-                    </Text>
-                    <TextInput
-                      className="rounded-xl border border-gray-300 bg-gray-50 px-4 py-3 text-base text-gray-900"
-                      placeholder="YYYY-MM-DD"
-                      placeholderTextColor="#9ca3af"
-                      value={deadline}
-                      onChangeText={setDeadline}
-                    />
-                  </View>
-
-                  <Pressable
-                    className={`mb-6 flex-row items-center rounded-xl border p-4 ${
-                      isCompleted
-                        ? 'border-blue-600 bg-blue-50'
-                        : 'border-gray-300 bg-gray-50'
-                    }`}
-                    onPress={() => setIsCompleted((current) => !current)}
-                  >
-                    <View
-                      className={`mr-3 h-6 w-6 items-center justify-center rounded-md border-2 ${
-                        isCompleted
-                          ? 'border-blue-600 bg-blue-600'
-                          : 'border-gray-400 bg-white'
-                      }`}
-                    >
-                      {isCompleted && (
-                        <Text className="text-base font-bold text-white">✓</Text>
-                      )}
-                    </View>
-
-                    <Text className="text-base font-semibold text-gray-900">
-                      {isCompleted ? 'Completed' : 'Not completed'}
-                    </Text>
-                  </Pressable>
-
-                  <Pressable
-                    className={`h-14 items-center justify-center rounded-2xl ${
-                      isSaving ? 'bg-blue-400' : 'bg-blue-600'
-                    }`}
-                    onPress={handleSaveTask}
-                    disabled={isSaving}
-                  >
-                    <Text className="text-base font-bold text-white">
-                      {isSaving ? 'Saving...' : 'Save Changes'}
-                    </Text>
-                  </Pressable>
-
-                  {isSaving && (
-                    <View className="mt-4">
-                      <ActivityIndicator size="small" />
-                    </View>
-                  )}
-
-                  <Pressable
-                    className="mt-3 h-14 items-center justify-center rounded-2xl bg-gray-200"
-                    onPress={() => router.back()}
-                    disabled={isSaving}
-                  >
-                    <Text className="text-base font-bold text-gray-900">
-                      Cancel
-                    </Text>
-                  </Pressable>
-                </>
-              )}
-            </View>
-          </ScrollView>
-        </TouchableWithoutFeedback>
-      </KeyboardAvoidingView>
-    </>
-  );
-}

app/(tabs)/index.tsx

@@ -8,7 +8,7 @@ export default function HomeScreen() {
     <View style={defaultStyles.container}>
       <Stack.Screen
         options={{
-          title: "Tasks",
+          title: "Home",
           headerTitleStyle: defaultStyles.title,
           headerRight: () => {
             return (

app/(tabs)/subject/createSubject.tsx

@@ -0,0 +1,195 @@
+import { defaultStyles } from '@/constants/defaultStyles';
+import { supabase } from '@/lib/supabase';
+import { router, Stack } from 'expo-router';
+import { useState } from 'react';
+import {
+  ActivityIndicator,
+  Alert,
+  Keyboard,
+  KeyboardAvoidingView,
+  Platform,
+  Pressable,
+  ScrollView,
+  Text,
+  TextInput,
+  TouchableWithoutFeedback,
+  View,
+} from 'react-native';
+
+export default function CreateSubject() {
+  const [title, SetTitle] = useState('');
+  const [description, SetDescription] = useState('');
+  const [isActive, SetIsActive] = useState(true);
+  const [isSaving, SetIsSaving] = useState(false);
+
+  const CreateSubject = async () => {
+    if (title.trim() === '') {
+      Alert.alert('Title is required!');
+      return;
+    }
+
+    const { data, error: userError } = await supabase.auth.getUser();
+
+    if (userError || !data.user) {
+      router.replace('../createUser');
+      return;
+    }
+
+    SetIsSaving(true);
+
+    const { error: dbError } = await supabase.from('subjects').insert({
+      title: title.trim(),
+      description: description.trim(),
+      isActive,
+      lastChanged: new Date().toISOString(),
+      uId: data.user.id,
+    });
+
+    if (dbError) {
+      SetIsSaving(false);
+      Alert.alert('Subject could not be created, please try again');
+      return;
+    }
+
+    Alert.alert('Subject successfully created!');
+
+    SetTitle('');
+    SetDescription('');
+    SetIsActive(true);
+    SetIsSaving(false);
+
+    router.back();
+  };
+
+  const inputClassName =
+    'rounded-2xl border border-app-border bg-app-subtle px-4 py-3 text-base text-text-main';
+
+  const labelClassName = 'mb-2 text-sm font-semibold text-text-secondary';
+
+  return (
+    <>
+      <Stack.Screen
+        options={{
+          title: 'Create Subject',
+          headerTitleStyle: defaultStyles.title,
+        }}
+      />
+
+      <KeyboardAvoidingView
+        className="flex-1 bg-app-bg"
+        behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+      >
+        <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
+          <ScrollView
+            className="flex-1"
+            keyboardShouldPersistTaps="handled"
+            contentContainerStyle={{
+              flexGrow: 1,
+              justifyContent: 'center',
+              paddingHorizontal: 20,
+              paddingVertical: 32,
+            }}
+          >
+            <View className="mb-6">
+              <Text className="text-3xl font-bold text-text-main">
+                Create Subject
+              </Text>
+              <Text className="mt-2 text-base leading-6 text-text-secondary">
+                Add a subject to organize your assignments and study tasks.
+              </Text>
+            </View>
+
+            <View className="rounded-3xl border border-app-border bg-app-surface p-5 shadow-sm">
+              <View className="mb-5">
+                <Text className={labelClassName}>Title</Text>
+                <TextInput
+                  className={inputClassName}
+                  placeholder="Enter subject title"
+                  value={title}
+                  onChangeText={SetTitle}
+                  returnKeyType="next"
+                />
+              </View>
+
+              <View className="mb-5">
+                <Text className={labelClassName}>Description</Text>
+                <TextInput
+                  className={`${inputClassName} min-h-28`}
+                  placeholder="Add a short description"
+                  value={description}
+                  onChangeText={SetDescription}
+                  multiline
+                  textAlignVertical="top"
+                />
+              </View>
+
+              <Pressable
+                onPress={() => SetIsActive((state) => !state)}
+                disabled={isSaving}
+                className={`mb-6 flex-row items-center rounded-2xl border p-4 ${
+                  isActive
+                    ? 'border-accent bg-accent-soft'
+                    : 'border-app-border bg-app-subtle'
+                }`}
+              >
+                <View
+                  className={`mr-3 h-6 w-6 items-center justify-center rounded-md border-2 ${
+                    isActive
+                      ? 'border-accent bg-accent'
+                      : 'border-app-border bg-app-surface'
+                  }`}
+                >
+                  {isActive && (
+                    <Text className="text-sm font-bold text-text-inverse">
+                      ✓
+                    </Text>
+                  )}
+                </View>
+
+                <View className="flex-1">
+                  <Text className="text-base font-semibold text-text-main">
+                    Active subject
+                  </Text>
+                  <Text className="mt-1 text-sm text-text-muted">
+                    Active subjects appear in your main study workflow.
+                  </Text>
+                </View>
+              </Pressable>
+
+              <Pressable
+                className={`h-14 items-center justify-center rounded-2xl ${
+                  isSaving ? 'bg-accent-disabled' : 'bg-accent'
+                }`}
+                onPress={CreateSubject}
+                disabled={isSaving}
+              >
+                {isSaving ? (
+                  <View className="flex-row items-center">
+                    <ActivityIndicator size="small" />
+                    <Text className="ml-3 text-base font-bold text-text-inverse">
+                      Creating...
+                    </Text>
+                  </View>
+                ) : (
+                  <Text className="text-base font-bold text-text-inverse">
+                    Create Subject
+                  </Text>
+                )}
+              </Pressable>
+
+              <Pressable
+                className="mt-3 h-14 items-center justify-center rounded-2xl border border-app-border bg-app-subtle"
+                onPress={() => router.back()}
+                disabled={isSaving}
+              >
+                <Text className="text-base font-semibold text-text-secondary">
+                  Cancel
+                </Text>
+              </Pressable>
+            </View>
+          </ScrollView>
+        </TouchableWithoutFeedback>
+      </KeyboardAvoidingView>
+    </>
+  );
+}

app/(tabs)/subject/editSubject.tsx

@@ -0,0 +1,133 @@
+import { defaultStyles } from '@/constants/defaultStyles';
+import { supabase } from '@/lib/supabase';
+import { router, Stack, useFocusEffect, useLocalSearchParams } from 'expo-router';
+import { useCallback, useState } from 'react';
+import { ActivityIndicator, Alert, Button, Keyboard, KeyboardAvoidingView, Platform, Pressable, Text, TextInput, TouchableWithoutFeedback, View } from 'react-native';
+
+type Subject = {
+  sId: string;
+  title: string;
+  description: string;
+  isActive: boolean;
+  lastChanged: string;
+  uId: string;
+}
+
+export default function EditSubject() {
+  const { sId } = useLocalSearchParams<{ sId: string }>();
+  const [subject, SetSubject] = useState<Subject | null>(null)
+  const [isSaving, SetIsSaving] = useState(false);
+
+  const GetSubject = async (sId: string) => { 
+    const { data, error } = await supabase.from("subjects").select("*").eq("sId", sId).single();
+
+    if (error) {
+      Alert.alert("Subject could not be fetched, please try again");
+      return;
+    }
+
+    SetSubject(data ?? null);
+  }
+
+  useFocusEffect(
+    useCallback(() => {
+      if (sId) {
+        GetSubject(sId);
+      }
+    }, [sId])
+  );
+
+  const EditSubject = async () => {
+    if (!subject) return;
+
+    if(subject.title.trim() === '') {
+      Alert.alert("Title is required!");
+      return;
+    }
+        
+    const { data, error: userError } = await supabase.auth.getUser();
+
+    if(userError || !data.user) {
+      router.replace("../createUser");
+      return;
+    } 
+
+    SetIsSaving(true);
+
+    const { error: dbError } = await supabase.from("subjects").update({
+      title: subject.title,
+      description: subject.description,
+      isActive: subject.isActive,
+      lastChanged: new Date().toISOString(),
+      uId: data.user.id,
+    }).eq("sId", sId);
+
+    SetIsSaving(false);
+
+    if (dbError) {
+      Alert.alert("Subject could not be edited, please try again");
+      return;
+    }
+
+    Alert.alert("Subject successfully edited!");
+
+    router.back();
+  }
+
+  return (
+    <View style={defaultStyles.container}>
+      <Stack.Screen
+        options={{
+          title: "Edit Subject",
+          headerTitleStyle: defaultStyles.title
+        }}
+      />
+
+      {!subject && (
+        <View style={defaultStyles.container}>
+          <Text style={defaultStyles.title}>Subject not found</Text>
+        </View>
+      )}
+
+      {subject && (
+        <View style={defaultStyles.container}>
+          <Text style={defaultStyles.title}>Edit Subject</Text>
+          <KeyboardAvoidingView style={{ flex: 1 }} behavior={Platform.OS === "ios" ? "padding" : "height"}>
+            <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
+              <View style={defaultStyles.container}>
+                <TextInput
+                  style={defaultStyles.inputText}
+                  placeholder="Title"
+                  value={subject.title}
+                  onChangeText={(text) => SetSubject(prev => prev ? { ...prev, title: text } : prev)}
+                />
+                <TextInput
+                  style={defaultStyles.inputText}
+                  placeholder="Text"
+                  value={subject.description}
+                  onChangeText={(text) => SetSubject(prev => prev ? { ...prev, description: text } : prev)}
+                />
+                <Pressable
+                  onPress={() => SetSubject(prev => prev ? { ...prev, isActive: !prev.isActive } : prev)}
+                  style={defaultStyles.checkboxContainer}
+                >
+                  <View style={defaultStyles.checkbox}>
+                    {subject.isActive && <Text style={defaultStyles.checkboxMark}>✓</Text>}
+                  </View>
+                  <Text style={defaultStyles.checkboxLabel}>{subject.isActive ? 'Active' : 'inactive'}</Text>
+                </Pressable>
+
+                <Button title={isSaving ? "Saving..." : "Save"} onPress={EditSubject} disabled={isSaving} />
+                {isSaving && (
+                  <ActivityIndicator size="large" />
+                )}
+                <Button title="Cancel" onPress={() => router.back()} />
+              </View>
+            </TouchableWithoutFeedback>
+          </KeyboardAvoidingView>
+        </View>
+      )}
+    </View>
+  )
+}
+

app/(tabs)/subject/viewDetailsSubject.tsx

@@ -0,0 +1,223 @@
+import { defaultStyles } from '@/constants/defaultStyles';
+import { supabase } from '@/lib/supabase';
+import { Session } from '@supabase/supabase-js';
+import { router, Stack, useFocusEffect, useLocalSearchParams } from 'expo-router';
+import { useCallback, useEffect, useState } from 'react';
+import { Alert, Button, Pressable, SectionList, Text, View } from "react-native";
+
+type Subject = {
+  sId: string;
+  title: string;
+  description: string;
+  isActive: boolean;
+  lastChanged: string;
+  uId: string;
+}
+
+type Assignment = {
+  aId: string;
+  title: string;
+  description: string;
+  deadline: string;
+  isCompleted: boolean;
+  lastChanged: string;
+  uId: string;
+  sId: string;
+}
+
+export default function ViewDetailsSubject() {
+  const { sId } = useLocalSearchParams<{ sId: string }>();
+  const [subject, SetSubject] = useState<Subject | null>(null)
+  const [assignments, SetAssignments] = useState<Assignment[]>([])
+  const [session, SetSession] = useState<Session | null>(null)
+
+  const assignmentSections = [
+    { title: "Upcoming Assignments", data: assignments.filter((assignment) => !assignment.isCompleted), emptyMessage: "No upcoming assignments" },
+    { title: "Completed Assignments", data: assignments.filter((assignment) => assignment.isCompleted), emptyMessage: "No completed assignments" },
+  ];
+
+  useEffect(() => {
+    supabase.auth.getSession().then(({ data }) => SetSession(data.session ?? null))
+    const { data: sub } = supabase.auth.onAuthStateChange((_event, newSession) => {
+      SetSession(newSession)
+    })
+    return () => sub.subscription.unsubscribe()
+    },
+  [])
+
+  const GetSubject = async (sId: string) => { 
+    const { data, error } = await supabase.from("subjects").select("*").eq("sId", sId).single();
+
+    if (error) {
+      Alert.alert("Subject could not be fetched, please try again");
+      return;
+    }
+
+    SetSubject(data ?? null);
+  }
+
+  const GetAssignments = async (sId: string) => { 
+    const { data, error } = await supabase.from("assignments").select("*").eq("sId", sId).order("deadline", { ascending: true });
+
+    if (error) {
+      Alert.alert("Assignments could not be fetched, please try again");
+      return;
+    }
+
+    SetAssignments(data ?? []);
+  }
+
+  useFocusEffect(
+    useCallback(() => {
+      if (session && sId) {
+        GetSubject(sId);
+        GetAssignments(sId);
+      }
+    }, [session, sId])
+  );
+
+  const DeleteSubject = async (sId: string) => {
+    Alert.alert(
+      "Delete Subject",
+      "Are you sure you want to delete this subject?",
+      [
+        {
+          text: "Cancel",
+          style: "cancel"
+        },
+        {
+          text: "Delete",
+          style: "destructive",
+          onPress: async () => {
+            const { error } = await supabase.from("subjects").delete().eq("sId", sId);
+
+            if (error) {
+              Alert.alert("Subject could not be deleted, please try again");
+              return;
+            }
+
+            Alert.alert("Subject deleted successfully!");
+            router.back();
+          }
+        }
+      ]
+    )
+  }
+
+  const DeleteAssignment = async (aId: string, sId: string) => {
+    Alert.alert(
+      "Delete Assignment",
+      "Are you sure you want to delete this assignment?",
+      [
+        {
+          text: "Cancel",
+          style: "cancel"
+        },
+        {
+          text: "Delete",
+          style: "destructive",
+          onPress: async () => {
+            const { error } = await supabase.from("assignments").delete().eq("aId", aId);
+
+            if (error) {
+              Alert.alert("Assignment could not be deleted, please try again");
+              return;
+            }
+
+            Alert.alert("Assignment deleted successfully!");
+            GetAssignments(sId);
+          }
+        }
+      ]
+    )
+  }
+
+  return (
+    <View style={defaultStyles.container}>
+      <Stack.Screen
+        options={{
+          title: "Details",
+          headerTitleStyle: defaultStyles.title,
+          headerLeft: () => {
+            return (
+              <View style={defaultStyles.buttonContainer}>
+                <Button title="Back" onPress={router.back} />
+              </View>
+            )
+          },
+          headerRight: () => {
+            return (
+              <View style={defaultStyles.buttonContainer}>
+                <Button title="Logout" onPress={async () => await supabase.auth.signOut()} />
+              </View>
+            )
+          },
+        }}
+      />
+
+      {!subject && (
+        <View style={defaultStyles.container}>
+          <Text style={defaultStyles.title}>Subject not found</Text>
+        </View>
+      )}
+      
+      {subject && (
+        <View style={defaultStyles.container}>
+          <View style={defaultStyles.container}>
+            <Text style={defaultStyles.title}>{subject.title}</Text>
+            <Text style={defaultStyles.body}>{subject.description}</Text>
+            <View style={defaultStyles.checkbox}>
+                {subject.isActive && <Text style={defaultStyles.checkboxMark}>✓</Text>}
+            </View>
+            <Text style={defaultStyles.body}>{subject.lastChanged}</Text>
+
+            <Button title="Edit" onPress={() => router.push({pathname: "/subject/editSubject", params: { sId: subject.sId }})} />
+            <Button title="Delete" onPress={() => DeleteSubject(subject.sId)} />
+
+            <View style={defaultStyles.buttonContainer}>
+              <Button title="Create Assignment" onPress={() => router.push({pathname: "/assignment/createAssignment", params: { sId: subject.sId }})} />
+            </View>
+          </View>
+
+          <SectionList
+            sections={assignmentSections}
+            keyExtractor={(item) => item.aId}
+            renderSectionHeader={({ section: { title } }) => <Text style={defaultStyles.subtitle}>{title}</Text>}
+            renderItem={({ item }) => {
+              const isOwner = session?.user.id === item.uId;
+          
+              return (
+                <View style={defaultStyles.container}>
+                  <Pressable style={defaultStyles.container} onPress={() => router.push({pathname: "/assignment/viewDetailsAssignment", params: { aId: item.aId }})}>
+                    <Text style={defaultStyles.boldBody}>{item.title}</Text>
+                    <Text style={defaultStyles.body}>{item.deadline}</Text>
+                    <View style={defaultStyles.checkbox}>
+                      {item.isCompleted && <Text style={defaultStyles.checkboxMark}>✓</Text>}
+                    </View>
+                  </Pressable>
+          
+                  {isOwner && (
+                    <View style={defaultStyles.buttonContainer}>
+                      <Button title="Edit" onPress={() => router.push({pathname: "/assignment/editAssignment", params: { aId: item.aId }})} />
+                      <Button title="Delete" onPress={() => DeleteAssignment(item.aId, item.sId)} />
+                    </View>
+                  )}
+                </View>
+              );
+            }}
+            renderSectionFooter={({ section }) =>
+              section.data.length === 0 ? (
+                <View style={defaultStyles.container}>
+                  <Text style={defaultStyles.body}>{section.emptyMessage}</Text>
+                  <View style={defaultStyles.separator} />
+                </View>
+              ) : (
+                <View style={defaultStyles.separator} />
+              )
+            }
+          />
+        </View>
+      )}
+    </View>
+  );
+}

app/(tabs)/subjects.tsx

@@ -0,0 +1,281 @@
+import { defaultStyles } from '@/constants/defaultStyles';
+import { supabase } from '@/lib/supabase';
+import { Ionicons } from '@expo/vector-icons';
+import { Session } from '@supabase/supabase-js';
+import { router, Stack, useFocusEffect } from 'expo-router';
+import { useCallback, useEffect, useState } from 'react';
+import {
+  Alert,
+  Pressable,
+  SectionList,
+  Text,
+  View,
+} from 'react-native';
+
+type Subject = {
+  sId: string;
+  title: string;
+  description: string;
+  isActive: boolean;
+  lastChanged: string;
+  uId: string;
+};
+
+export default function Subjects() {
+  const [subjects, SetSubjects] = useState<Subject[]>([]);
+  const [session, SetSession] = useState<Session | null>(null);
+
+  const subjectSections = [
+    {
+      title: 'Active Subjects',
+      data: subjects.filter((subject) => subject.isActive),
+      emptyMessage: 'No active subjects',
+    },
+    {
+      title: 'Inactive Subjects',
+      data: subjects.filter((subject) => !subject.isActive),
+      emptyMessage: 'No inactive subjects',
+    },
+  ];
+
+  useEffect(() => {
+    supabase.auth
+      .getSession()
+      .then(({ data }) => SetSession(data.session ?? null));
+
+    const { data: sub } = supabase.auth.onAuthStateChange(
+      (_event, newSession) => {
+        SetSession(newSession);
+      }
+    );
+
+    return () => sub.subscription.unsubscribe();
+  }, []);
+
+  const GetSubjects = async () => {
+    const { data, error } = await supabase
+      .from('subjects')
+      .select('*')
+      .order('lastChanged', { ascending: false });
+
+    if (error) {
+      Alert.alert('Subjects could not be fetched, please try again');
+      return;
+    }
+
+    SetSubjects(data ?? []);
+  };
+
+  useFocusEffect(
+    useCallback(() => {
+      if (session) {
+        GetSubjects();
+      }
+    }, [session])
+  );
+
+  const DeleteSubject = async (sId: string) => {
+    Alert.alert(
+      'Delete Subject',
+      'Are you sure you want to delete this subject?',
+      [
+        {
+          text: 'Cancel',
+          style: 'cancel',
+        },
+        {
+          text: 'Delete',
+          style: 'destructive',
+          onPress: async () => {
+            const { error } = await supabase
+              .from('subjects')
+              .delete()
+              .eq('sId', sId);
+
+            if (error) {
+              Alert.alert('Subject could not be deleted, please try again');
+              return;
+            }
+
+            Alert.alert('Subject deleted successfully!');
+            GetSubjects();
+          },
+        },
+      ]
+    );
+  };
+
+  return (
+    <View className="flex-1 bg-app-bg">
+      <Stack.Screen
+        options={{
+          title: 'Subjects',
+          headerTitleStyle: defaultStyles.title,
+          headerRight: () => (
+            <View className="flex-row items-center">
+              <Pressable
+                className="mr-3 h-10 w-10 items-center justify-center rounded-full border border-app-border bg-app-surface"
+                onPress={GetSubjects}
+              >
+                <Ionicons name="refresh" size={20} color="#333" />
+              </Pressable>
+
+              <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>
+          ),
+        }}
+      />
+
+      <View className="flex-1 px-5 pt-5">
+        <View className="mb-6">
+          <Text className="text-3xl font-bold text-text-main">
+            Subjects
+          </Text>
+          <Text className="mt-2 text-base leading-6 text-text-secondary">
+            Organize your study work by subject, then break it into assignments
+            and tasks.
+          </Text>
+        </View>
+
+        <Pressable
+          className="mb-6 h-14 items-center justify-center rounded-2xl bg-accent"
+          onPress={() => router.push('/subject/createSubject')}
+        >
+          <Text className="text-base font-bold text-text-inverse">
+            Create Subject
+          </Text>
+        </Pressable>
+
+        <SectionList
+          sections={subjectSections}
+          keyExtractor={(item) => item.sId}
+          showsVerticalScrollIndicator={false}
+          stickySectionHeadersEnabled={false}
+          contentContainerStyle={{
+            paddingBottom: 32,
+          }}
+          renderSectionHeader={({ section: { title, data } }) => (
+            <View className="mb-3 mt-2 flex-row items-center justify-between">
+              <Text className="text-lg font-bold text-text-main">
+                {title}
+              </Text>
+
+              <View className="rounded-full bg-app-subtle px-3 py-1">
+                <Text className="text-xs font-semibold text-text-muted">
+                  {data.length}
+                </Text>
+              </View>
+            </View>
+          )}
+          renderItem={({ item }) => {
+            const isOwner = session?.user.id === item.uId;
+
+            return (
+              <View className="mb-4 rounded-3xl border border-app-border bg-app-surface p-4 shadow-sm">
+                <Pressable
+                  onPress={() =>
+                    router.push({
+                      pathname: '/subject/viewDetailsSubject',
+                      params: { sId: item.sId },
+                    })
+                  }
+                >
+                  <View className="flex-row items-start">
+                    <View
+                      className={`mr-3 mt-1 h-6 w-6 items-center justify-center rounded-md border-2 ${
+                        item.isActive
+                          ? 'border-accent bg-accent'
+                          : 'border-app-border bg-app-subtle'
+                      }`}
+                    >
+                      {item.isActive && (
+                        <Text className="text-sm font-bold text-text-inverse">
+                          ✓
+                        </Text>
+                      )}
+                    </View>
+
+                    <View className="flex-1">
+                      <Text
+                        className={`text-base font-bold ${
+                          item.isActive
+                            ? 'text-text-main'
+                            : 'text-text-secondary'
+                        }`}
+                      >
+                        {item.title}
+                      </Text>
+
+                      {item.description ? (
+                        <Text
+                          className="mt-1 text-sm leading-5 text-text-muted"
+                          numberOfLines={2}
+                        >
+                          {item.description}
+                        </Text>
+                      ) : null}
+
+                      <View className="mt-3 self-start rounded-full bg-app-subtle px-3 py-1">
+                        <Text className="text-xs font-semibold text-text-secondary">
+                          {item.isActive ? 'Active' : 'Inactive'}
+                        </Text>
+                      </View>
+                    </View>
+                  </View>
+                </Pressable>
+
+                {isOwner && (
+                  <View className="mt-4 flex-row border-t border-app-border pt-4">
+                    <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: '/subject/editSubject',
+                          params: { sId: item.sId },
+                        })
+                      }
+                    >
+                      <Text className="text-sm font-bold text-text-secondary">
+                        Edit
+                      </Text>
+                    </Pressable>
+
+                    <Pressable
+                      className="flex-1 items-center justify-center rounded-2xl border border-app-border bg-app-surface py-3"
+                      onPress={() => DeleteSubject(item.sId)}
+                    >
+                      <Text className="text-sm font-bold text-status-danger">
+                        Delete
+                      </Text>
+                    </Pressable>
+                  </View>
+                )}
+              </View>
+            );
+          }}
+          renderSectionFooter={({ section }) =>
+            section.data.length === 0 ? (
+              <View className="mb-6 rounded-3xl border border-app-border bg-app-surface p-5">
+                <Text className="text-center text-base font-semibold text-text-secondary">
+                  {section.emptyMessage}
+                </Text>
+                <Text className="mt-1 text-center text-sm text-text-muted">
+                  Subjects you create will show up here.
+                </Text>
+              </View>
+            ) : (
+              <View className="mb-2" />
+            )
+          }
+        />
+      </View>
+    </View>
+  );
+}

app/(tabs)/task/createTask.tsx

@@ -0,0 +1,198 @@
+import { defaultStyles } from '@/constants/defaultStyles';
+import { supabase } from '@/lib/supabase';
+import { router, Stack, useLocalSearchParams } from 'expo-router';
+import { useState } from 'react';
+import {
+  ActivityIndicator,
+  Alert,
+  Keyboard,
+  KeyboardAvoidingView,
+  Platform,
+  Pressable,
+  ScrollView,
+  Text,
+  TextInput,
+  TouchableWithoutFeedback,
+  View,
+} from 'react-native';
+
+export default function CreateTask() {
+  const aId = (useLocalSearchParams().aId as string) ?? null;
+
+  const [title, SetTitle] = useState('');
+  const [description, SetDescription] = useState('');
+  const [isCompleted, SetIsCompleted] = useState(false);
+  const [isSaving, SetIsSaving] = useState(false);
+
+  const CreateTask = async () => {
+    if (title.trim() === '') {
+      Alert.alert('Title is required!');
+      return;
+    }
+
+    const { data, error: userError } = await supabase.auth.getUser();
+
+    if (userError || !data.user) {
+      router.replace('../createUser');
+      return;
+    }
+
+    SetIsSaving(true);
+
+    const { error: dbError } = await supabase.from('tasks').insert({
+      title: title.trim(),
+      description: description.trim(),
+      isCompleted,
+      lastChanged: new Date().toISOString(),
+      uId: data.user.id,
+      aId,
+    });
+
+    if (dbError) {
+      SetIsSaving(false);
+      Alert.alert('Task could not be created, please try again');
+      return;
+    }
+
+    Alert.alert('Task successfully created!');
+
+    SetTitle('');
+    SetDescription('');
+    SetIsCompleted(false);
+    SetIsSaving(false);
+
+    router.back();
+  };
+
+  const inputClassName =
+    'rounded-2xl border border-app-border bg-app-subtle px-4 py-3 text-base text-text-main';
+
+  const labelClassName = 'mb-2 text-sm font-semibold text-text-secondary';
+
+  return (
+    <>
+      <Stack.Screen
+        options={{
+          title: 'Create Task',
+          headerTitleStyle: defaultStyles.title,
+        }}
+      />
+
+      <KeyboardAvoidingView
+        className="flex-1 bg-app-bg"
+        behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+      >
+        <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
+          <ScrollView
+            className="flex-1"
+            keyboardShouldPersistTaps="handled"
+            contentContainerStyle={{
+              flexGrow: 1,
+              justifyContent: 'center',
+              paddingHorizontal: 20,
+              paddingVertical: 32,
+            }}
+          >
+            <View className="mb-6">
+              <Text className="text-3xl font-bold text-text-main">
+                Create Task
+              </Text>
+              <Text className="mt-2 text-base leading-6 text-text-secondary">
+                Add a small step to move this assignment forward.
+              </Text>
+            </View>
+
+            <View className="rounded-3xl border border-app-border bg-app-surface p-5 shadow-sm">
+              <View className="mb-5">
+                <Text className={labelClassName}>Title</Text>
+                <TextInput
+                  className={inputClassName}
+                  placeholder="Enter task title"
+                  value={title}
+                  onChangeText={SetTitle}
+                  returnKeyType="next"
+                />
+              </View>
+
+              <View className="mb-5">
+                <Text className={labelClassName}>Description</Text>
+                <TextInput
+                  className={`${inputClassName} min-h-28`}
+                  placeholder="Add a short description"
+                  value={description}
+                  onChangeText={SetDescription}
+                  multiline
+                  textAlignVertical="top"
+                />
+              </View>
+
+              <Pressable
+                onPress={() => SetIsCompleted((state) => !state)}
+                disabled={isSaving}
+                className={`mb-6 flex-row items-center rounded-2xl border p-4 ${
+                  isCompleted
+                    ? 'border-accent bg-accent-soft'
+                    : 'border-app-border bg-app-subtle'
+                }`}
+              >
+                <View
+                  className={`mr-3 h-6 w-6 items-center justify-center rounded-md border-2 ${
+                    isCompleted
+                      ? 'border-accent bg-accent'
+                      : 'border-app-border bg-app-surface'
+                  }`}
+                >
+                  {isCompleted && (
+                    <Text className="text-sm font-bold text-text-inverse">
+                      ✓
+                    </Text>
+                  )}
+                </View>
+
+                <View className="flex-1">
+                  <Text className="text-base font-semibold text-text-main">
+                    Mark as completed
+                  </Text>
+                  <Text className="mt-1 text-sm text-text-muted">
+                    You can change this later.
+                  </Text>
+                </View>
+              </Pressable>
+
+              <Pressable
+                className={`h-14 items-center justify-center rounded-2xl ${
+                  isSaving ? 'bg-accent-disabled' : 'bg-accent'
+                }`}
+                onPress={CreateTask}
+                disabled={isSaving}
+              >
+                {isSaving ? (
+                  <View className="flex-row items-center">
+                    <ActivityIndicator size="small" />
+                    <Text className="ml-3 text-base font-bold text-text-inverse">
+                      Creating...
+                    </Text>
+                  </View>
+                ) : (
+                  <Text className="text-base font-bold text-text-inverse">
+                    Create Task
+                  </Text>
+                )}
+              </Pressable>
+
+              <Pressable
+                className="mt-3 h-14 items-center justify-center rounded-2xl border border-app-border bg-app-subtle"
+                onPress={() => router.back()}
+                disabled={isSaving}
+              >
+                <Text className="text-base font-semibold text-text-secondary">
+                  Cancel
+                </Text>
+              </Pressable>
+            </View>
+          </ScrollView>
+        </TouchableWithoutFeedback>
+      </KeyboardAvoidingView>
+    </>
+  );
+}

app/(tabs)/task/editTask.tsx

@@ -0,0 +1,135 @@
+import { defaultStyles } from '@/constants/defaultStyles';
+import { supabase } from '@/lib/supabase';
+import { router, Stack, useFocusEffect, useLocalSearchParams } from 'expo-router';
+import { useCallback, useState } from 'react';
+import { ActivityIndicator, Alert, Button, Keyboard, KeyboardAvoidingView, Platform, Pressable, Text, TextInput, TouchableWithoutFeedback, View } from 'react-native';
+
+type Task = {
+  tId: string;
+  title: string;
+  description: string;
+  isCompleted: boolean;
+  lastChanged: string;
+  uId: string;
+  aId: string;
+}
+
+export default function EditTask() {
+  const { tId } = useLocalSearchParams<{ tId: string }>();
+  const [task, SetTask] = useState<Task | null>(null)
+  const [isSaving, SetIsSaving] = useState(false);
+
+  const GetTask = async (tId: string) => { 
+    const { data, error } = await supabase.from("tasks").select("*").eq("tId", tId).single();
+
+    if (error) {
+      Alert.alert("Task could not be fetched, please try again");
+      return;
+    }
+
+    SetTask(data ?? null);
+  }
+
+  useFocusEffect(
+    useCallback(() => {
+      if (tId) {
+        GetTask(tId);
+      }
+    }, [tId])
+  );
+
+  const EditTask = async () => {
+    if (!task) return;
+
+    if(task.title.trim() === '') {
+      Alert.alert("Title is required!");
+      return;
+    }
+        
+    const { data, error: userError } = await supabase.auth.getUser();
+
+    if(userError || !data.user) {
+      router.replace("../createUser");
+      return;
+    } 
+
+    SetIsSaving(true);
+
+    const { error: dbError } = await supabase.from("tasks").update({
+      title: task.title,
+      description: task.description,
+      isCompleted: task.isCompleted,
+      lastChanged: new Date().toISOString(),
+      uId: data.user.id,
+      aId: task.aId,
+    }).eq("tId", tId);
+
+    SetIsSaving(false);
+
+    if (dbError) {
+      Alert.alert("Task could not be edited, please try again");
+      return;
+    }
+
+    Alert.alert("Task successfully edited!");
+
+    router.back();
+  }
+
+  return (
+    <View style={defaultStyles.container}>
+      <Stack.Screen
+        options={{
+          title: "Edit Task",
+          headerTitleStyle: defaultStyles.title
+        }}
+      />
+
+      {!task && (
+        <View style={defaultStyles.container}>
+          <Text style={defaultStyles.title}>Task not found</Text>
+        </View>
+      )}
+
+      {task && (
+        <View style={defaultStyles.container}>
+          <Text style={defaultStyles.title}>Edit Task</Text>
+          <KeyboardAvoidingView style={{ flex: 1 }} behavior={Platform.OS === "ios" ? "padding" : "height"}>
+            <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
+              <View style={defaultStyles.container}>
+                <TextInput
+                  style={defaultStyles.inputText}
+                  placeholder="Title"
+                  value={task.title}
+                  onChangeText={(text) => SetTask(prev => prev ? { ...prev, title: text } : prev)}
+                />
+                <TextInput
+                  style={defaultStyles.inputText}
+                  placeholder="Text"
+                  value={task.description}
+                  onChangeText={(text) => SetTask(prev => prev ? { ...prev, description: text } : prev)}
+                />
+                <Pressable
+                  onPress={() => SetTask(prev => prev ? { ...prev, isCompleted: !prev.isCompleted } : prev)}
+                  style={defaultStyles.checkboxContainer}
+                >
+                  <View style={defaultStyles.checkbox}>
+                    {task.isCompleted && <Text style={defaultStyles.checkboxMark}>✓</Text>}
+                  </View>
+                  <Text style={defaultStyles.checkboxLabel}>{task.isCompleted ? 'Completed' : 'Not Completed'}</Text>
+                </Pressable>
+
+                <Button title={isSaving ? "Saving..." : "Save"} onPress={EditTask} disabled={isSaving} />
+                {isSaving && (
+                  <ActivityIndicator size="large" />
+                )}
+                <Button title="Cancel" onPress={() => router.back()} />
+              </View>
+            </TouchableWithoutFeedback>
+          </KeyboardAvoidingView>
+        </View>
+      )}
+    </View>
+  )
+}
+

app/(tabs)/task/viewDetailsTask.tsx

@@ -0,0 +1,125 @@
+import { defaultStyles } from '@/constants/defaultStyles';
+import { supabase } from '@/lib/supabase';
+import { Session } from '@supabase/supabase-js';
+import { router, Stack, useFocusEffect, useLocalSearchParams } from 'expo-router';
+import { useCallback, useEffect, useState } from 'react';
+import { Alert, Button, Text, View } from "react-native";
+
+type Task = {
+  tId: string;
+  title: string;
+  description: string;
+  isCompleted: boolean;
+  lastChanged: string;
+  uId: string;
+  aId: string;
+}
+
+export default function ViewDetailsTask() {
+  const { tId } = useLocalSearchParams<{ tId: string }>();
+  const [task, SetTask] = useState<Task | null>(null)
+  const [session, SetSession] = useState<Session | null>(null)
+
+  useEffect(() => {
+    supabase.auth.getSession().then(({ data }) => SetSession(data.session ?? null))
+    const { data: sub } = supabase.auth.onAuthStateChange((_event, newSession) => {
+      SetSession(newSession)
+    })
+    return () => sub.subscription.unsubscribe()
+    },
+  [])
+
+  const GetTask = async (tId: string) => { 
+    const { data, error } = await supabase.from("tasks").select("*").eq("tId", tId).single();
+
+    if (error) {
+      Alert.alert("Task could not be fetched, please try again");
+      return;
+    }
+
+    SetTask(data ?? null);
+  }
+
+  useFocusEffect(
+    useCallback(() => {
+      if (session && tId) {
+        GetTask(tId);
+      }
+    }, [session, tId])
+  );
+
+  const DeleteTask = async (tId: 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", tId);
+
+            if (error) {
+              Alert.alert("Task could not be deleted, please try again");
+              return;
+            }
+
+            Alert.alert("Task deleted successfully!");
+            router.back();
+          }
+        }
+      ]
+    )
+  }
+
+  return (
+    <View style={defaultStyles.container}>
+      <Stack.Screen
+        options={{
+          title: "Details",
+          headerTitleStyle: defaultStyles.title,
+          headerLeft: () => {
+            return (
+              <View style={defaultStyles.buttonContainer}>
+                <Button title="Back" onPress={router.back} />
+              </View>
+            )
+          },
+          headerRight: () => {
+            return (
+              <View style={defaultStyles.buttonContainer}>
+                <Button title="Logout" onPress={async () => await supabase.auth.signOut()} />
+              </View>
+            )
+          },
+        }}
+      />
+
+      {!task && (
+        <View style={defaultStyles.container}>
+          <Text style={defaultStyles.title}>Task not found</Text>
+        </View>
+      )}
+      
+      {task && (
+        <View style={defaultStyles.container}>
+          <Text style={defaultStyles.title}>{task.title}</Text>
+          <Text style={defaultStyles.body}>{task.description}</Text>
+          <View style={defaultStyles.checkbox}>
+              {task.isCompleted && <Text style={defaultStyles.checkboxMark}>✓</Text>}
+          </View>
+          <Text style={defaultStyles.body}>{task.lastChanged}</Text>
+
+          <View style={defaultStyles.buttonContainer}>
+            <Button title="Edit" onPress={() => router.push({pathname: "/task/editTask", params: { tId: task.tId }})} />
+            <Button title="Delete" onPress={() => DeleteTask(task.tId)} />
+          </View>
+        </View>
+      )}
+    </View>
+  );
+}

app/(tabs)/tasks.tsx

@@ -1,10 +1,16 @@
-import { defaultStyles } from "@/constants/defaultStyles";
-import { supabase } from "@/lib/supabase";
+import { defaultStyles } from '@/constants/defaultStyles';
+import { supabase } from '@/lib/supabase';
 import { Ionicons } from '@expo/vector-icons';
-import { Session } from "@supabase/supabase-js";
-import { router, Stack, useFocusEffect } from "expo-router";
-import { useCallback, useEffect, useState } from "react";
-import { Alert, Button, Pressable, SectionList, Text, View } from "react-native";
+import { Session } from '@supabase/supabase-js';
+import { router, Stack, useFocusEffect } from 'expo-router';
+import { useCallback, useEffect, useState } from 'react';
+import {
+  Alert,
+  Pressable,
+  SectionList,
+  Text,
+  View,
+} from 'react-native';
 
 type Task = {
   tId: string;
@@ -12,27 +18,51 @@ type Task = {
   description: string;
   isCompleted: boolean;
   lastChanged: string;
-  deadline: string;
   uId: string;
-}
+  aId: string;
+};
 
 export default function Tasks() {
-  const [tasks, SetTasks] = useState<Task[]>([])
-  const [session, SetSession] = useState<Session | null>(null)
+  const [tasks, SetTasks] = useState<Task[]>([]);
+  const [session, SetSession] = useState<Session | null>(null);
 
   const taskSections = [
-    { title: "Upcoming Tasks", data: tasks.filter((task) => !task.isCompleted), emptyMessage: "No upcoming tasks" },
-    { title: "Completed Tasks", data: tasks.filter((task) => task.isCompleted), emptyMessage: "No completed tasks" },
+    {
+      title: 'Upcoming Tasks',
+      data: tasks.filter((task) => !task.isCompleted),
+      emptyMessage: 'No upcoming tasks',
+    },
+    {
+      title: 'Completed Tasks',
+      data: tasks.filter((task) => task.isCompleted),
+      emptyMessage: 'No completed tasks',
+    },
   ];
 
   useEffect(() => {
-    supabase.auth.getSession().then(({ data }) => SetSession(data.session ?? null))
-    const { data: sub } = supabase.auth.onAuthStateChange((_event, newSession) => {
-      SetSession(newSession)
-    })
-    return () => sub.subscription.unsubscribe()
-    },
-  [])
+    supabase.auth
+      .getSession()
+      .then(({ data }) => SetSession(data.session ?? null));
+
+    const { data: sub } = supabase.auth.onAuthStateChange(
+      (_event, newSession) => {
+        SetSession(newSession);
+      }
+    );
+
+    return () => sub.subscription.unsubscribe();
+  }, []);
+
+  const GetTasks = async () => {
+    const { data, error } = await supabase.from('tasks').select('*');
+
+    if (error) {
+      Alert.alert('Tasks could not be fetched, please try again');
+      return;
+    }
+
+    SetTasks(data ?? []);
+  };
 
   useFocusEffect(
     useCallback(() => {
@@ -42,84 +72,186 @@ export default function Tasks() {
     }, [session])
   );
 
-  const GetTasks = async () => { 
-    const { data, error } = await supabase.from("tasks").select("tId, title, description, isCompleted,lastChanged, deadline, uId").order("deadline", { ascending: false });
-
-    if (error) {
-      Alert.alert("Task could not be fetched, please try again");
-      return;
-    }
-
-    SetTasks(data ?? []);
-  }
-
   const DeleteTask = async (tId: string) => {
     Alert.alert(
-      "Delete Task",
-      "Are you sure you want to delete this task?",
+      'Delete Task',
+      'Are you sure you want to delete this task?',
       [
         {
-          text: "Cancel",
-          style: "cancel"
+          text: 'Cancel',
+          style: 'cancel',
         },
         {
-          text: "Delete",
-          style: "destructive",
+          text: 'Delete',
+          style: 'destructive',
           onPress: async () => {
-            const { error } = await supabase.from("tasks").delete().eq("tId", tId);
+            const { error } = await supabase
+              .from('tasks')
+              .delete()
+              .eq('tId', tId);
 
             if (error) {
-              Alert.alert("Task could not be deleted, please try again");
+              Alert.alert('Task could not be deleted, please try again');
               return;
             }
 
-            Alert.alert("Task deleted successfully!");
+            Alert.alert('Task deleted successfully!');
             GetTasks();
-          }
-        }
+          },
+        },
       ]
-    )
-  }
+    );
+  };
 
   return (
-    <View style={defaultStyles.container}>
+    <View className="flex-1 bg-app-bg">
       <Stack.Screen
         options={{
-          title: "Tasks",
+          title: 'Tasks',
           headerTitleStyle: defaultStyles.title,
-          headerRight: () => {
-            return (
-              <View style={defaultStyles.buttonContainer}>
-                <Pressable style={defaultStyles.circularButton} onPress={GetTasks}>
-                  <Ionicons name="refresh" size={22} color="#333" />
+          headerRight: () => (
+            <View className="flex-row items-center">
+              <Pressable
+                className="mr-3 h-10 w-10 items-center justify-center rounded-full border border-app-border bg-app-surface"
+                onPress={GetTasks}
+              >
+                <Ionicons name="refresh" size={20} color="#333" />
+              </Pressable>
+
+              <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>
-                <Button title="Logout" onPress={async () => await supabase.auth.signOut()} />
             </View>
-            )
-          },
+          ),
         }}
       />
 
-      <View style={defaultStyles.buttonContainer}>
-        <Button title="Create Task" onPress={() => router.push("/createTask")} />
+      <View className="flex-1 px-5 pt-5">
+        <View className="mb-6">
+          <Text className="text-3xl font-bold text-text-main">
+            Tasks
+          </Text>
+          <Text className="mt-2 text-base leading-6 text-text-secondary">
+            Break assignments into small steps and keep your progress clear.
+          </Text>
         </View>
 
+        <Pressable
+          className="mb-6 h-14 items-center justify-center rounded-2xl bg-accent"
+          onPress={() => router.push('/task/createTask')}
+        >
+          <Text className="text-base font-bold text-text-inverse">
+            Create Task
+          </Text>
+        </Pressable>
+
         <SectionList
           sections={taskSections}
           keyExtractor={(item) => item.tId}
-        renderSectionHeader={({ section: { title } }) => <Text style={defaultStyles.subtitle}>{title}</Text>}
+          showsVerticalScrollIndicator={false}
+          stickySectionHeadersEnabled={false}
+          contentContainerStyle={{
+            paddingBottom: 32,
+          }}
+          renderSectionHeader={({ section: { title, data } }) => (
+            <View className="mb-3 mt-2 flex-row items-center justify-between">
+              <Text className="text-lg font-bold text-text-main">
+                {title}
+              </Text>
+
+              <View className="rounded-full bg-app-subtle px-3 py-1">
+                <Text className="text-xs font-semibold text-text-muted">
+                  {data.length}
+                </Text>
+              </View>
+            </View>
+          )}
           renderItem={({ item }) => {
             const isOwner = session?.user.id === item.uId;
 
             return (
-            <View style={defaultStyles.container}>
-              <Text style={defaultStyles.boldBody}>{item.title}</Text>
-              <Text style={defaultStyles.body}>{item.deadline}</Text> 
+              <View className="mb-4 rounded-3xl border border-app-border bg-app-surface p-4 shadow-sm">
+                <Pressable
+                  onPress={() =>
+                    router.push({
+                      pathname: '/task/viewDetailsTask',
+                      params: { tId: item.tId },
+                    })
+                  }
+                >
+                  <View className="flex-row items-start">
+                    <View
+                      className={`mr-3 mt-1 h-6 w-6 items-center justify-center rounded-md border-2 ${
+                        item.isCompleted
+                          ? 'border-accent bg-accent'
+                          : 'border-app-border bg-app-subtle'
+                      }`}
+                    >
+                      {item.isCompleted && (
+                        <Text className="text-sm font-bold text-text-inverse">
+                          ✓
+                        </Text>
+                      )}
+                    </View>
+
+                    <View className="flex-1">
+                      <Text
+                        className={`text-base font-bold ${
+                          item.isCompleted
+                            ? 'text-text-secondary'
+                            : 'text-text-main'
+                        }`}
+                      >
+                        {item.title}
+                      </Text>
+
+                      {item.description ? (
+                        <Text
+                          className="mt-1 text-sm leading-5 text-text-muted"
+                          numberOfLines={2}
+                        >
+                          {item.description}
+                        </Text>
+                      ) : null}
+
+                      <View className="mt-3 self-start rounded-full bg-app-subtle px-3 py-1">
+                        <Text className="text-xs font-semibold text-text-secondary">
+                          {item.isCompleted ? 'Completed' : 'In progress'}
+                        </Text>
+                      </View>
+                    </View>
+                  </View>
+                </Pressable>
 
                 {isOwner && (
-                <View style={defaultStyles.buttonContainer}>
-                  <Button title="Edit" onPress={() => router.push({pathname: "/editTask", params: { tId: item.tId }})} />
-                  <Button title="Delete" onPress={() => DeleteTask(item.tId)} />
+                  <View className="mt-4 flex-row border-t border-app-border pt-4">
+                    <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/editTask',
+                          params: { tId: item.tId },
+                        })
+                      }
+                    >
+                      <Text className="text-sm font-bold text-text-secondary">
+                        Edit
+                      </Text>
+                    </Pressable>
+
+                    <Pressable
+                      className="flex-1 items-center justify-center rounded-2xl border border-app-border bg-app-surface py-3"
+                      onPress={() => DeleteTask(item.tId)}
+                    >
+                      <Text className="text-sm font-bold text-status-danger">
+                        Delete
+                      </Text>
+                    </Pressable>
                   </View>
                 )}
               </View>
@@ -127,15 +259,20 @@ export default function Tasks() {
           }}
           renderSectionFooter={({ section }) =>
             section.data.length === 0 ? (
-            <View style={defaultStyles.container}>
-              <Text style={defaultStyles.body}>{section.emptyMessage}</Text>
-              <View style={defaultStyles.separator} />
+              <View className="mb-6 rounded-3xl border border-app-border bg-app-surface p-5">
+                <Text className="text-center text-base font-semibold text-text-secondary">
+                  {section.emptyMessage}
+                </Text>
+                <Text className="mt-1 text-center text-sm text-text-muted">
+                  Tasks for this assignment will show up here.
+                </Text>
               </View>
             ) : (
-            <View style={defaultStyles.separator} />
+              <View className="mb-2" />
             )
           }
         />
       </View>
-  )
+    </View>
+  );
 }

global.css

@@ -1,3 +1,4 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+

notes/work-report-2026-04-21-to-22.md

@@ -0,0 +1,116 @@
+## #Overview
+Today I implemented a full **CRUD system** for the three core entities in the application:
+- **Subjects**
+- **Assignments**
+- **Tasks**
+
+This includes creating, editing, viewing details, and deleting records, as well as connecting all screens using Expo Router.
+
+---
+
+## #ImplementedFeatures
+
+### #Subjects
+Created full CRUD flow:
+- `createSubject.tsx`
+- `editSubject.tsx`
+- `viewDetailsSubject.tsx`
+
+**Functionality:**
+- Create new subjects
+- Edit existing subjects
+- View subject details
+- Delete subjects
+
+**Relationships:**
+- Subjects act as the top-level entity
+- Assignments can optionally be linked to a subject via `sId`
+- Subjects are displayed:
+  - globally (`subjects.tsx`)
+  - or standalone (`viewDetailsSubjects.tsx`)
+
+---
+
+### #Assignments
+Created full CRUD flow:
+- `createAssignment.tsx`
+- `editAssignment.tsx`
+- `viewDetailsAssignment.tsx`
+
+**Functionality:**
+- Create assignments (with optional `sId`)
+- Edit assignments
+- View assignment details
+- Delete assignments
+
+**Relationships:**
+- Assignments can exist:
+  - linked to a subject (`sId`)
+  - or standalone (`sId = null`)
+- Assignments are displayed:
+  - globally (`assignments.tsx`)
+  - or within a subject (`viewDetailsSubject.tsx`)
+  - or standalone (`viewDetailsAssignment.tsx`)
+
+---
+
+### #Tasks
+Created full CRUD flow:
+- `createTask.tsx`
+- `editTask.tsx`
+- `viewDetailsTask.tsx`
+
+**Functionality:**
+- Create tasks
+- Edit tasks
+- View task details
+- Delete tasks
+
+**Relationships:**
+- Tasks are linked to assignments via `aId`
+- Tasks are accessed through assignment detail pages
+- Assignments are displayed:
+  - globally (`tasks.tsx`)
+  - or within an assignment (`viewDetailsAssignment.tsx`)
+  - or standalone (`viewDetailsTask.tsx`)
+
+---
+
+## #RoutingStructure
+
+### #TopLevelScreens
+- `subjects.tsx` → list of all subjects
+- `assignments.tsx` → list of all assignments
+- `tasks.tsx` → list of all tasks
+- `index.tsx` → pre-existing home screen
+
+---
+
+## #DataModel
+
+### #Subject
+- `sId`
+- `title`
+- `description`
+- `isActive`
+- `lastChanged`
+- `uId`
+
+### #Assignment
+- `aId`
+- `title`
+- `description`
+- `deadline`
+- `isCompleted`
+- `lastChanged`
+- `uId`
+- `sId`
+
+### #Task
+- `tId`
+- `title`
+- `description`
+- `isCompleted`
+- `lastChanged`
+- `uId`
+- `aId`

package-lock.json

@@ -7,6 +7,7 @@
     "": {
       "name": "study-sprint",
       "version": "1.0.0",
+      "hasInstallScript": true,
       "dependencies": {
         "@expo/vector-icons": "^15.0.3",
         "@react-navigation/bottom-tabs": "^7.4.0",
@@ -26,7 +27,7 @@
         "expo-symbols": "~1.0.8",
         "expo-system-ui": "~6.0.9",
         "expo-web-browser": "~15.0.10",
-        "nativewind": "^4.2.3",
+        "nativewind": "^4.1.23",
         "react": "19.1.0",
         "react-dom": "19.1.0",
         "react-native": "0.81.5",
@@ -36,13 +37,14 @@
         "react-native-screens": "~4.16.0",
         "react-native-url-polyfill": "^3.0.0",
         "react-native-web": "~0.21.0",
-        "react-native-worklets": "0.5.1",
-        "tailwindcss": "^3.4.19"
+        "react-native-worklets": "0.5.1"
       },
       "devDependencies": {
         "@types/react": "~19.1.0",
         "eslint": "^9.25.0",
         "eslint-config-expo": "~10.0.0",
+        "patch-package": "^8.0.1",
+        "tailwindcss": "^3.4.19",
         "typescript": "~5.9.2"
       }
     },
@@ -4069,6 +4071,13 @@
         "node": ">=10.0.0"
       }
     },
+    "node_modules/@yarnpkg/lockfile": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@yarnpkg/lockfile/-/lockfile-1.1.0.tgz",
+      "integrity": "sha512-GpSwvyXOcOOlV70vbnzjj4fW5xW/FdUF6nQEt1ENy7m4ZCczi1+/buVUPAqmGfqznsORNFzUMjctTIp8a9tuCQ==",
+      "dev": true,
+      "license": "BSD-2-Clause"
+    },
     "node_modules/abort-controller": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/abort-controller/-/abort-controller-3.0.0.tgz",
@@ -7165,6 +7174,16 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/find-yarn-workspace-root": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/find-yarn-workspace-root/-/find-yarn-workspace-root-2.0.0.tgz",
+      "integrity": "sha512-1IMnbjt4KzsQfnhnzNd8wUEgXZ44IzZaZmnLYx7D5FZlaHt2gW20Cri8Q+E/t5tIj4+epTBub+2Zxu/vNILzqQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "micromatch": "^4.0.2"
+      }
+    },
     "node_modules/flat-cache": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-4.0.1.tgz",
@@ -7232,6 +7251,21 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/fs-extra": {
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.1.0.tgz",
+      "integrity": "sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^6.0.1",
+        "universalify": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
@@ -8623,6 +8657,26 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/json-stable-stringify": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/json-stable-stringify/-/json-stable-stringify-1.3.0.tgz",
+      "integrity": "sha512-qtYiSSFlwot9XHtF9bD9c7rwKjr+RecWT//ZnPvSmEjpV5mmPOCN4j8UjY5hbjNkOwZ/jQv3J6R1/pL7RwgMsg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.4",
+        "isarray": "^2.0.5",
+        "jsonify": "^0.0.1",
+        "object-keys": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/json-stable-stringify-without-jsonify": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz",
@@ -8642,6 +8696,29 @@
         "node": ">=6"
       }
     },
+    "node_modules/jsonfile": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.2.1.tgz",
+      "integrity": "sha512-zwOTdL3rFQ/lRdBnntKVOX6k5cKJwEc1HdilT71BWEu7J41gXIB2MRp+vxduPSwZJPWBxEzv4yH1wYLJGUHX4Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "universalify": "^2.0.0"
+      },
+      "optionalDependencies": {
+        "graceful-fs": "^4.1.6"
+      }
+    },
+    "node_modules/jsonify": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/jsonify/-/jsonify-0.0.1.tgz",
+      "integrity": "sha512-2/Ki0GcmuqSrgFyelQq9M05y7PS0mEwuIzrf3f1fPqkVDVRvZrPZtVSMHxdgo8Aq0sxAOb/cr2aqqA3LeWHVPg==",
+      "dev": true,
+      "license": "Public Domain",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/jsx-ast-utils": {
       "version": "3.3.5",
       "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.3.5.tgz",
@@ -8668,6 +8745,16 @@
         "json-buffer": "3.0.1"
       }
     },
+    "node_modules/klaw-sync": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/klaw-sync/-/klaw-sync-6.0.0.tgz",
+      "integrity": "sha512-nIeuVSzdCCs6TDPTqI8w1Yre34sSq7AkZ4B3sfOBbI2CgVSB4Du4aLQijFU2+lhAFCwt9+42Hel6lQNIv6AntQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "graceful-fs": "^4.1.11"
+      }
+    },
     "node_modules/kleur": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/kleur/-/kleur-3.0.3.tgz",
@@ -9646,14 +9733,14 @@
       }
     },
     "node_modules/nativewind": {
-      "version": "4.2.3",
-      "resolved": "https://registry.npmjs.org/nativewind/-/nativewind-4.2.3.tgz",
-      "integrity": "sha512-HglF1v6A8CqBFpXWs0d3yf4qQGurrreLuyE8FTRI/VDH8b0npZa2SDG5tviTkLiBg0s5j09mQALZOjxuocgMLA==",
+      "version": "4.1.23",
+      "resolved": "https://registry.npmjs.org/nativewind/-/nativewind-4.1.23.tgz",
+      "integrity": "sha512-oLX3suGI6ojQqWxdQezOSM5GmJ4KvMnMtmaSMN9Ggb5j7ysFt4nHxb1xs8RDjZR7BWc+bsetNJU8IQdQMHqRpg==",
       "license": "MIT",
       "dependencies": {
         "comment-json": "^4.2.5",
         "debug": "^4.3.7",
-        "react-native-css-interop": "0.2.3"
+        "react-native-css-interop": "0.1.22"
       },
       "engines": {
         "node": ">=16"
@@ -10206,6 +10293,75 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/patch-package": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/patch-package/-/patch-package-8.0.1.tgz",
+      "integrity": "sha512-VsKRIA8f5uqHQ7NGhwIna6Bx6D9s/1iXlA1hthBVBEbkq+t4kXD0HHt+rJhf/Z+Ci0F/HCB2hvn0qLdLG+Qxlw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@yarnpkg/lockfile": "^1.1.0",
+        "chalk": "^4.1.2",
+        "ci-info": "^3.7.0",
+        "cross-spawn": "^7.0.3",
+        "find-yarn-workspace-root": "^2.0.0",
+        "fs-extra": "^10.0.0",
+        "json-stable-stringify": "^1.0.2",
+        "klaw-sync": "^6.0.0",
+        "minimist": "^1.2.6",
+        "open": "^7.4.2",
+        "semver": "^7.5.3",
+        "slash": "^2.0.0",
+        "tmp": "^0.2.4",
+        "yaml": "^2.2.2"
+      },
+      "bin": {
+        "patch-package": "index.js"
+      },
+      "engines": {
+        "node": ">=14",
+        "npm": ">5"
+      }
+    },
+    "node_modules/patch-package/node_modules/ci-info": {
+      "version": "3.9.0",
+      "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-3.9.0.tgz",
+      "integrity": "sha512-NIxF55hv4nSqQswkAeiOi1r83xy8JldOFDTWiug55KBu9Jnblncd2U6ViHmYgHf01TPZS77NJBhBMKdWj9HQMQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/sibiraj-s"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/patch-package/node_modules/semver": {
+      "version": "7.7.4",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.4.tgz",
+      "integrity": "sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/patch-package/node_modules/slash": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/slash/-/slash-2.0.0.tgz",
+      "integrity": "sha512-ZYKh3Wh2z1PpEXWr0MpSBZ0V6mZHAQfYevttO11c51CaWjGTaadiKZ+wVt1PbMlDV5qhMFslpZCemhwOK7C89A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/path-exists": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
@@ -10833,16 +10989,16 @@
       }
     },
     "node_modules/react-native-css-interop": {
-      "version": "0.2.3",
-      "resolved": "https://registry.npmjs.org/react-native-css-interop/-/react-native-css-interop-0.2.3.tgz",
-      "integrity": "sha512-wc+JI7iUfdFBqnE18HhMTtD0q9vkhuMczToA87UdHGWwMyxdT5sCcNy+i4KInPCE855IY0Ic8kLQqecAIBWz7w==",
+      "version": "0.1.22",
+      "resolved": "https://registry.npmjs.org/react-native-css-interop/-/react-native-css-interop-0.1.22.tgz",
+      "integrity": "sha512-Mu01e+H9G+fxSWvwtgWlF5MJBJC4VszTCBXopIpeR171lbeBInHb8aHqoqRPxmJpi3xIHryzqKFOJYAdk7PBxg==",
       "license": "MIT",
       "dependencies": {
         "@babel/helper-module-imports": "^7.22.15",
         "@babel/traverse": "^7.23.0",
         "@babel/types": "^7.23.0",
         "debug": "^4.3.7",
-        "lightningcss": "~1.27.0",
+        "lightningcss": "^1.27.0",
         "semver": "^7.6.3"
       },
       "engines": {
@@ -10863,258 +11019,6 @@
         }
       }
     },
-    "node_modules/react-native-css-interop/node_modules/detect-libc": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz",
-      "integrity": "sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg==",
-      "license": "Apache-2.0",
-      "bin": {
-        "detect-libc": "bin/detect-libc.js"
-      },
-      "engines": {
-        "node": ">=0.10"
-      }
-    },
-    "node_modules/react-native-css-interop/node_modules/lightningcss": {
-      "version": "1.27.0",
-      "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.27.0.tgz",
-      "integrity": "sha512-8f7aNmS1+etYSLHht0fQApPc2kNO8qGRutifN5rVIc6Xo6ABsEbqOr758UwI7ALVbTt4x1fllKt0PYgzD9S3yQ==",
-      "license": "MPL-2.0",
-      "dependencies": {
-        "detect-libc": "^1.0.3"
-      },
-      "engines": {
-        "node": ">= 12.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      },
-      "optionalDependencies": {
-        "lightningcss-darwin-arm64": "1.27.0",
-        "lightningcss-darwin-x64": "1.27.0",
-        "lightningcss-freebsd-x64": "1.27.0",
-        "lightningcss-linux-arm-gnueabihf": "1.27.0",
-        "lightningcss-linux-arm64-gnu": "1.27.0",
-        "lightningcss-linux-arm64-musl": "1.27.0",
-        "lightningcss-linux-x64-gnu": "1.27.0",
-        "lightningcss-linux-x64-musl": "1.27.0",
-        "lightningcss-win32-arm64-msvc": "1.27.0",
-        "lightningcss-win32-x64-msvc": "1.27.0"
-      }
-    },
-    "node_modules/react-native-css-interop/node_modules/lightningcss-darwin-arm64": {
-      "version": "1.27.0",
-      "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.27.0.tgz",
-      "integrity": "sha512-Gl/lqIXY+d+ySmMbgDf0pgaWSqrWYxVHoc88q+Vhf2YNzZ8DwoRzGt5NZDVqqIW5ScpSnmmjcgXP87Dn2ylSSQ==",
-      "cpu": [
-        "arm64"
-      ],
-      "license": "MPL-2.0",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">= 12.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/react-native-css-interop/node_modules/lightningcss-darwin-x64": {
-      "version": "1.27.0",
-      "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.27.0.tgz",
-      "integrity": "sha512-0+mZa54IlcNAoQS9E0+niovhyjjQWEMrwW0p2sSdLRhLDc8LMQ/b67z7+B5q4VmjYCMSfnFi3djAAQFIDuj/Tg==",
-      "cpu": [
-        "x64"
-      ],
-      "license": "MPL-2.0",
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": ">= 12.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/react-native-css-interop/node_modules/lightningcss-freebsd-x64": {
-      "version": "1.27.0",
-      "resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.27.0.tgz",
-      "integrity": "sha512-n1sEf85fePoU2aDN2PzYjoI8gbBqnmLGEhKq7q0DKLj0UTVmOTwDC7PtLcy/zFxzASTSBlVQYJUhwIStQMIpRA==",
-      "cpu": [
-        "x64"
-      ],
-      "license": "MPL-2.0",
-      "optional": true,
-      "os": [
-        "freebsd"
-      ],
-      "engines": {
-        "node": ">= 12.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/react-native-css-interop/node_modules/lightningcss-linux-arm-gnueabihf": {
-      "version": "1.27.0",
-      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.27.0.tgz",
-      "integrity": "sha512-MUMRmtdRkOkd5z3h986HOuNBD1c2lq2BSQA1Jg88d9I7bmPGx08bwGcnB75dvr17CwxjxD6XPi3Qh8ArmKFqCA==",
-      "cpu": [
-        "arm"
-      ],
-      "license": "MPL-2.0",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 12.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/react-native-css-interop/node_modules/lightningcss-linux-arm64-gnu": {
-      "version": "1.27.0",
-      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.27.0.tgz",
-      "integrity": "sha512-cPsxo1QEWq2sfKkSq2Bq5feQDHdUEwgtA9KaB27J5AX22+l4l0ptgjMZZtYtUnteBofjee+0oW1wQ1guv04a7A==",
-      "cpu": [
-        "arm64"
-      ],
-      "libc": [
-        "glibc"
-      ],
-      "license": "MPL-2.0",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 12.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/react-native-css-interop/node_modules/lightningcss-linux-arm64-musl": {
-      "version": "1.27.0",
-      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.27.0.tgz",
-      "integrity": "sha512-rCGBm2ax7kQ9pBSeITfCW9XSVF69VX+fm5DIpvDZQl4NnQoMQyRwhZQm9pd59m8leZ1IesRqWk2v/DntMo26lg==",
-      "cpu": [
-        "arm64"
-      ],
-      "libc": [
-        "musl"
-      ],
-      "license": "MPL-2.0",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 12.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/react-native-css-interop/node_modules/lightningcss-linux-x64-gnu": {
-      "version": "1.27.0",
-      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.27.0.tgz",
-      "integrity": "sha512-Dk/jovSI7qqhJDiUibvaikNKI2x6kWPN79AQiD/E/KeQWMjdGe9kw51RAgoWFDi0coP4jinaH14Nrt/J8z3U4A==",
-      "cpu": [
-        "x64"
-      ],
-      "libc": [
-        "glibc"
-      ],
-      "license": "MPL-2.0",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 12.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/react-native-css-interop/node_modules/lightningcss-linux-x64-musl": {
-      "version": "1.27.0",
-      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.27.0.tgz",
-      "integrity": "sha512-QKjTxXm8A9s6v9Tg3Fk0gscCQA1t/HMoF7Woy1u68wCk5kS4fR+q3vXa1p3++REW784cRAtkYKrPy6JKibrEZA==",
-      "cpu": [
-        "x64"
-      ],
-      "libc": [
-        "musl"
-      ],
-      "license": "MPL-2.0",
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 12.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/react-native-css-interop/node_modules/lightningcss-win32-arm64-msvc": {
-      "version": "1.27.0",
-      "resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.27.0.tgz",
-      "integrity": "sha512-/wXegPS1hnhkeG4OXQKEMQeJd48RDC3qdh+OA8pCuOPCyvnm/yEayrJdJVqzBsqpy1aJklRCVxscpFur80o6iQ==",
-      "cpu": [
-        "arm64"
-      ],
-      "license": "MPL-2.0",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">= 12.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
-    "node_modules/react-native-css-interop/node_modules/lightningcss-win32-x64-msvc": {
-      "version": "1.27.0",
-      "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.27.0.tgz",
-      "integrity": "sha512-/OJLj94Zm/waZShL8nB5jsNj3CfNATLCTyFxZyouilfTmSoLDX7VlVAmhPHoZWVFp4vdmoiEbPEYC8HID3m6yw==",
-      "cpu": [
-        "x64"
-      ],
-      "license": "MPL-2.0",
-      "optional": true,
-      "os": [
-        "win32"
-      ],
-      "engines": {
-        "node": ">= 12.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
     "node_modules/react-native-css-interop/node_modules/semver": {
       "version": "7.7.4",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.4.tgz",
@@ -12779,6 +12683,16 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/tmp": {
+      "version": "0.2.5",
+      "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.2.5.tgz",
+      "integrity": "sha512-voyz6MApa1rQGUxT3E+BK7/ROe8itEx7vD8/HEvt4xwXucvQ5G5oeEiHkmHZJuBO21RpOf+YYm9MOivj709jow==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.14"
+      }
+    },
     "node_modules/tmpl": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.5.tgz",
@@ -13086,6 +13000,16 @@
         "node": ">=4"
       }
     },
+    "node_modules/universalify": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz",
+      "integrity": "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 10.0.0"
+      }
+    },
     "node_modules/unpipe": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",

package.json

@@ -3,8 +3,8 @@
   "main": "expo-router/entry",
   "version": "1.0.0",
   "scripts": {
+  "postinstall": "patch-package",
   "start": "expo start",
-    "reset-project": "node ./scripts/reset-project.js",
   "android": "expo start --android",
   "ios": "expo start --ios",
   "web": "expo start --web",
@@ -29,7 +29,7 @@
     "expo-symbols": "~1.0.8",
     "expo-system-ui": "~6.0.9",
     "expo-web-browser": "~15.0.10",
-    "nativewind": "^4.2.3",
+    "nativewind": "^4.1.23",
     "react": "19.1.0",
     "react-dom": "19.1.0",
     "react-native": "0.81.5",
@@ -39,13 +39,14 @@
     "react-native-screens": "~4.16.0",
     "react-native-url-polyfill": "^3.0.0",
     "react-native-web": "~0.21.0",
-    "react-native-worklets": "0.5.1",
-    "tailwindcss": "^3.4.19"
+    "react-native-worklets": "0.5.1"
   },
   "devDependencies": {
     "@types/react": "~19.1.0",
     "eslint": "^9.25.0",
     "eslint-config-expo": "~10.0.0",
+    "patch-package": "^8.0.1",
+    "tailwindcss": "^3.4.19",
     "typescript": "~5.9.2"
   },
   "private": true

patches/metro-config+0.83.3.patch

@@ -0,0 +1,28 @@
+diff --git a/node_modules/metro-config/src/loadConfig.js b/node_modules/metro-config/src/loadConfig.js
+index 7ac9d88..4a424c3 100644
+--- a/node_modules/metro-config/src/loadConfig.js
++++ b/node_modules/metro-config/src/loadConfig.js
+@@ -76,6 +76,9 @@ const resolve = (filePath) => {
+   const possiblePath = path.resolve(process.cwd(), filePath);
+   return isFile(possiblePath) ? possiblePath : filePath;
+ };
++
++const { pathToFileURL } = require("url");
++
+ async function resolveConfig(filePath, cwd) {
+   const configPath =
+     filePath != null
+@@ -289,7 +292,12 @@ async function loadConfigFile(absolutePath) {
+       }
+     } catch (e) {
+       try {
+-        const configModule = await import(absolutePath);
++        const importPath =
++          process.platform === "win32"
++            ? pathToFileURL(absolutePath).href
++            : absolutePath;
++
++        const configModule = await import(importPath);        
+         config = await configModule.default;
+       } catch (error) {
+         let prefix = `Error loading Metro config at: ${absolutePath}\n`;

tailwind.config.js

@@ -7,7 +7,67 @@ module.exports = {
   ],
   presets: [require('nativewind/preset')],
   theme: {
-    extend: {},
+    extend: {
+      colors: {
+        app: {
+          bg: '#F7F5EF',
+          surface: '#FFFFFF',
+          subtle: '#EFEBE3',
+          border: '#DDD6C8',
+        },
+
+        text: {
+          main: '#1F2933',
+          secondary: '#52616B',
+          muted: '#9AA6B2',
+          inverse: '#FFFFFF',
+        },
+
+        accent: {
+          DEFAULT: '#3B82A0',
+          soft: '#DCEFF5',
+          hover: '#2F6F88',
+          disabled: '#9CC7D6',
+        },
+
+        status: {
+          success: '#15803D',
+          warning: '#B7791F',
+          danger: '#B91C1C',
+        },
+
+        subject: {
+          blue: {
+            bg: '#DCEFF5',
+            text: '#2F6F88',
+          },
+          emerald: {
+            bg: '#DDEFE5',
+            text: '#2F7D55',
+          },
+          amber: {
+            bg: '#F6E8C6',
+            text: '#9A6A16',
+          },
+          violet: {
+            bg: '#E9E2F5',
+            text: '#6D4BA3',
+          },
+          cyan: {
+            bg: '#DDF0EF',
+            text: '#287C7A',
+          },
+          rose: {
+            bg: '#F4E1DF',
+            text: '#9B4A43',
+          },
+          slate: {
+            bg: '#E8E4DA',
+            text: '#52616B',
+          },
+        },
+      },
+    },
   },
   plugins: [],
 };

tsconfig.json

@@ -2,10 +2,9 @@
   "extends": "expo/tsconfig.base",
   "compilerOptions": {
     "strict": true,
+    "jsx": "react-native",
     "paths": {
-      "@/*": [
-        "./*"
-      ]
+      "@/*": ["./*"]
     }
   },
   "include": [