Added completion rate to project item

src/app/components/project-item/project-item.component.css

@@ -77,6 +77,28 @@
   -webkit-box-orient: vertical;
 }
 
+.completion-row {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: .5rem;
+  font-size: 13px;
+  color: #4b5563;
+  width: fit-content;
+}
+
+.completion-label {
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  font-weight: 600;
+  color: #6b7280;
+}
+
+.completion-value {
+  font-weight: 700;
+  color: #10b981;
+}
+
 /* Footer */
 .project-footer {
   display: flex;

src/app/components/project-item/project-item.component.html

@@ -1,8 +1,4 @@
-<div
+<div class="project-item" [class.is-disabled]="!projectRoute" [routerLink]="projectRoute">
-  class="project-item"
-  [class.is-disabled]="!projectRoute"
-  [routerLink]="projectRoute"
->
   <div class="project-header">
     <h3 class="project-title">{{ project.name }}</h3>
   </div>
@@ -10,4 +6,11 @@
   @if (project.description) {
     <p class="project-description">{{ project.description }}</p>
   }
+
+  @if (completionPercentage != null) {
+    <div class="completion-row">
+      <span class="completion-label">Completion</span>
+      <span class="completion-value">{{ completionPercentage }}%</span>
+    </div>
+  }
 </div>

src/app/components/project-item/project-item.component.ts

@@ -8,11 +8,21 @@ import { Project } from '../../models/projects.models';
   standalone: true,
   imports: [CommonModule, RouterLink],
   templateUrl: './project-item.component.html',
-  styleUrl: './project-item.component.css'
+  styleUrl: './project-item.component.css',
 })
 export class ProjectItemComponent {
   @Input({ required: true }) project!: Project;
 
+  get completionPercentage(): number | null {
+    const tasks = this.project.tasks ?? [];
+    if (tasks.length === 0) {
+      return null;
+    }
+
+    const completedCount = tasks.filter((task) => task.status === 'completed').length;
+    return Math.round((completedCount / tasks.length) * 100);
+  }
+
   get projectRoute(): Array<string | number> | null {
     const id = this.getProjectId();
     return id == null ? null : ['/projects', id];