implement x out of y progress text

app/assignment/viewDetailsAssignment.tsx

@@ -133,12 +133,14 @@ 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(
+      : Math.round((completedTasks / totalTasks) * 100);
-          (tasks.filter((task) => task.isCompleted).length / tasks.length) * 100
-        );
 
   if (!assignment) {
     return (
@@ -234,22 +236,32 @@ export default function ViewDetailsAssignment() {
                     </View>
                   </View>
 
-                  <View className="mt-2">
+                 <View className="mt-5">
                   <View className="mb-2 flex-row items-center justify-between">
                     <Text className="text-sm font-semibold text-text-secondary">
-                        Progress
+                      Task Progress
                     </Text>
+
                     <Text className="text-sm font-bold text-text-main">
-                        {progress}%
+                      {completedTasks}/{totalTasks}
                     </Text>
                   </View>
 
                   <View className="h-3 overflow-hidden rounded-full bg-app-subtle">
                     <View
-                        className="h-full rounded-full bg-accent"
+                      className="h-full rounded-full"
-                        style={{ width: `${progress}%` }}
+                      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">

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(
+      : Math.round((completedAssignments / totalAssignments) * 100);
-          (assignments.filter((assignment) => assignment.isCompleted).length /
-            assignments.length) *
-            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">