From c46508d2333f2967a9be8ac13e60a7423697906c Mon Sep 17 00:00:00 2001
From: Fhj0607 <fabianhaukedalf@gmail.com>
Date: Wed, 29 Apr 2026 11:06:20 +0200
Subject: [PATCH] implement x out of y progress text

---
 app/assignment/viewDetailsAssignment.tsx | 50 +++++++++++++++---------
 app/subject/viewDetailsSubject.tsx       | 21 +++++++---
 2 files changed, 46 insertions(+), 25 deletions(-)

diff --git a/app/assignment/viewDetailsAssignment.tsx b/app/assignment/viewDetailsAssignment.tsx
index 158c5c0..1f1ff43 100644
--- a/app/assignment/viewDetailsAssignment.tsx
+++ b/app/assignment/viewDetailsAssignment.tsx
@@ -132,13 +132,15 @@ export default function ViewDetailsAssignment() {
       ]
     )
   }
+  
+  const completedTasks = tasks.filter((task) => task.isCompleted).length;
+  const totalTasks = tasks.length;
+  const remainingTasks = totalTasks - completedTasks;
 
   const progress =
-    tasks.length === 0
+    totalTasks === 0
       ? 0
-      : Math.round(
-          (tasks.filter((task) => task.isCompleted).length / tasks.length) * 100
-        );
+      : Math.round((completedTasks / totalTasks) * 100);
 
   if (!assignment) {
     return (
@@ -234,24 +236,34 @@ export default function ViewDetailsAssignment() {
                     </View>
                   </View>
 
-                  <View className="mt-2">
-                    <View className="mb-2 flex-row items-center justify-between">
-                      <Text className="text-sm font-semibold text-text-secondary">
-                        Progress
-                      </Text>
-                      <Text className="text-sm font-bold text-text-main">
-                        {progress}%
-                      </Text>
-                    </View>
+                 <View className="mt-5">
+                  <View className="mb-2 flex-row items-center justify-between">
+                    <Text className="text-sm font-semibold text-text-secondary">
+                      Task Progress
+                    </Text>
 
-                    <View className="h-3 overflow-hidden rounded-full bg-app-subtle">
-                      <View
-                        className="h-full rounded-full bg-accent"
-                        style={{ width: `${progress}%` }}
-                      />
-                    </View>
+                    <Text className="text-sm font-bold text-text-main">
+                      {completedTasks}/{totalTasks}
+                    </Text>
                   </View>
 
+                  <View className="h-3 overflow-hidden rounded-full bg-app-subtle">
+                    <View
+                      className="h-full rounded-full"
+                      style={{
+                        width: `${progress}%`,
+                        backgroundColor: progress === 100 ? '#34D399' : '#3B82F6',
+                      }}
+                    />
+                  </View>
+
+                  <Text className="mt-2 text-xs font-medium text-text-secondary">
+                    {remainingTasks === 0
+                      ? 'All tasks complete'
+                      : `${remainingTasks} task${remainingTasks === 1 ? '' : 's'} remaining`}
+                  </Text>
+                </View>
+
                   <Text className="mt-4 text-sm text-text-muted">
                     Last changed: {assignment.lastChanged}
                   </Text>
diff --git a/app/subject/viewDetailsSubject.tsx b/app/subject/viewDetailsSubject.tsx
index e120454..6820a7c 100644
--- a/app/subject/viewDetailsSubject.tsx
+++ b/app/subject/viewDetailsSubject.tsx
@@ -188,14 +188,14 @@ export default function ViewDetailsSubject() {
     );
   };
 
+  const completedAssignments = assignments.filter((assignment) => assignment.isCompleted).length;
+  const totalAssignments = assignments.length;
+  const remainingAssignments = totalAssignments - completedAssignments;
+
   const progress =
     assignments.length === 0
       ? 0
-      : Math.round(
-          (assignments.filter((assignment) => assignment.isCompleted).length /
-            assignments.length) *
-            100
-        );
+      : Math.round((completedAssignments / totalAssignments) * 100);
 
   if (!subject) {
     return (
@@ -319,8 +319,9 @@ export default function ViewDetailsSubject() {
                   <Text className="text-sm font-semibold text-text-secondary">
                     Assignment Progress
                   </Text>
+
                   <Text className="text-sm font-bold text-text-main">
-                    {progress}%
+                    {completedAssignments}/{totalAssignments}
                   </Text>
                 </View>
 
@@ -333,6 +334,14 @@ export default function ViewDetailsSubject() {
                     }}
                   />
                 </View>
+
+                <Text className="mt-2 text-xs font-medium text-text-secondary">
+                  {remainingAssignments === 0
+                    ? 'All assignments complete'
+                    : `${remainingAssignments} assignment${
+                        remainingAssignments === 1 ? '' : 's'
+                      } remaining`}
+                </Text>
               </View>
 
               <Text className="mt-4 text-sm text-text-muted">