use component for every item. add dummy data too

src/app/app.module.ts

@@ -12,19 +12,22 @@ import {FormsModule} from '@angular/forms';
 import {RequestInterceptor} from './interceptors/request.interceptor';
 import {UnauthorizedInterceptor} from './interceptors/unauthorizedResponseInterceptor';
 import {SigningSidebarComponent} from './components/signing/signing-sidebar/signing-sidebar.component';
+import {
+  SigningSidebarItemComponent
+} from './components/signing/signing-sidebar/signing-sidebar-item/signing-sidebar-item.component';
 
 @NgModule({
   declarations: [
     AppComponent,
     SigningComponent,
     LoginComponent,
-    SigningSidebarComponent,
     SigningSidebarComponent
   ],
   imports: [
     BrowserModule,
     AppRoutingModule,
-    FormsModule
+    FormsModule,
+    SigningSidebarItemComponent
   ],
   providers: [
     {provide: BASE_PATH, useValue: environment.apiBasePath},

src/app/components/signing/signing-sidebar/signing-sidebar-item/signing-sidebar-item.component.html

@@ -0,0 +1,4 @@
+<li [ngClass]="getStatusClasses()" class="p-2 rounded mb-2 flex justify-between items-center">
+  <span>{{ document.icon }} {{ document.name }}</span>
+  <span *ngIf="document.status === 'review'" class="font-bold">→</span>
+</li>

src/app/components/signing/signing-sidebar/signing-sidebar-item/signing-sidebar-item.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SigningSidebarItemComponent } from './signing-sidebar-item.component';
+
+describe('SigningSidebarItemComponent', () => {
+  let component: SigningSidebarItemComponent;
+  let fixture: ComponentFixture<SigningSidebarItemComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [SigningSidebarItemComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(SigningSidebarItemComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/signing/signing-sidebar/signing-sidebar-item/signing-sidebar-item.component.ts

@@ -0,0 +1,28 @@
+import {Component, Input} from '@angular/core';
+import {NgClass, NgIf} from '@angular/common';
+
+@Component({
+  selector: 'app-signing-sidebar-item',
+  templateUrl: './signing-sidebar-item.component.html',
+  imports: [
+    NgClass,
+    NgIf
+  ],
+  styleUrls: ['./signing-sidebar-item.component.css']
+})
+export class SigningSidebarItemComponent {
+  @Input() document!: { name: string; status: string; icon: string };
+
+  getStatusClasses() {
+    switch (this.document.status) {
+      case 'approved':
+        return 'bg-green-100 text-green-700';
+      case 'pending':
+        return 'bg-gray-200 text-gray-700';
+      case 'review':
+        return 'bg-red-600 text-white';
+      default:
+        return 'bg-gray-100 text-gray-700';
+    }
+  }
+}

src/app/components/signing/signing-sidebar/signing-sidebar.component.html

@@ -1,13 +1,9 @@
 <div class="w-full h-full bg-white p-6 shadow-lg">
-  <h2 class="text-lg font-semibold mb-2">Signing 4 documents</h2>
+  <h2 class="text-lg font-semibold mb-2">Signing {{ documents.length }} documents</h2>
   <p class="text-gray-500 text-sm mb-4">Submitted 5 days ago.</p>
 
   <ul>
-    <li class="bg-green-100 text-green-700 p-2 rounded mb-2">✅ Form W-8BEN.pdf</li>
+    <app-signing-sidebar-item *ngFor="let doc of documents" [document]="doc"></app-signing-sidebar-item>
-    <li class="bg-green-100 text-green-700 p-2 rounded mb-2">✅ 1195 - Identity declaration.pdf</li>
-    <li class="bg-gray-200 p-2 rounded mb-2">👁️ CGA.pdf</li>
-    <li class="bg-red-600 text-white p-2 rounded mb-2">⚠️ Review document →</li>
-    <li class="bg-gray-200 p-2 rounded">📄 Terms and conditions for US citizens.pdf</li>
   </ul>
 
   <div class="mt-6 flex justify-between">

src/app/components/signing/signing-sidebar/signing-sidebar.component.ts

@@ -3,10 +3,16 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'app-signing-sidebar',
   standalone: false,
-  
+
   templateUrl: './signing-sidebar.component.html',
   styleUrl: './signing-sidebar.component.css'
 })
 export class SigningSidebarComponent {
-
+  documents = [
+    { name: 'Form W-8BEN.pdf', status: 'approved', icon: '✅' },
+    { name: '1195 - Identity declaration.pdf', status: 'approved', icon: '✅' },
+    { name: 'CGA.pdf', status: 'pending', icon: '👁️' },
+    { name: 'Review document', status: 'review', icon: '⚠️' },
+    { name: 'Terms and conditions for US citizens.pdf', status: 'pending', icon: '📄' }
+  ];
 }