updated modal from user loan's

src/app/app.css

@@ -77,4 +77,5 @@ nz-content {
   padding: 24px;
   background: #fff;
   height: 100%;
+  overflow: auto;
 }

src/app/components/loan-table/loan-table.html

@@ -14,7 +14,7 @@
             <tr>
                 <td>{{ data.user.name}} {{data.user.firstName }}</td>
                 <td>{{ data.book.title }}</td>
-                <p>{{ data.date | date: 'dd/MM/yyyy' }}</p>
+                <td>{{ data.date | date: 'dd/MM/yyyy' }}</td>
                 <td>{{ data.plannedReturningDate | date: 'dd/MM/yyyy'}}</td>
                 <td>{{ data.effectiveReturningDate | date: 'dd/MM/yyyy'}}</td>
                 <td>

src/app/components/user-table/user-table.html

@@ -14,11 +14,28 @@
             <tr>
                 <td>{{ data.name}}</td>
                 <td>{{ data.firstName }}</td>
-                <p>{{ data.email }}</p>
+                <td>{{ data.email }}</td>
                 <td>{{ data.birthDate | date: 'dd/MM/yyyy'}}</td>
                 <td>
                     <app-modal [name]="'Afficher'">
-                        <app-loan-table></app-loan-table>
+                        <nz-table #basicTable [nzData]="listOfData">
+                            <thead>
+                            <tr>
+                                <th>Livre</th>
+                                <th>Date d'enregistrement</th>
+                                <th>Date de retour finale</th>
+                            </tr>
+                            </thead>
+                            <tbody>
+                                @for (loans of data.loan; track loans) {
+                                    <tr>
+                                        <td>{{ loans.book.title }}</td>
+                                        <td>{{ loans.date | date: 'dd/MM/yyyy' }}</td>
+                                        <td>{{ loans.effectiveReturningDate | date: 'dd/MM/yyyy'}}</td>
+                                    </tr>
+                                }
+                            </tbody>
+                        </nz-table>
                     </app-modal>
                 </td>
                 <td>

src/app/components/user-table/user-table.ts

@@ -6,6 +6,7 @@ import {NzButtonComponent} from "ng-zorro-antd/button";
 import {UserInfo} from "../../interfaces/user.interfaces";
 import {LoanTable} from "../loan-table/loan-table";
 import {UpdateUser} from "../update-user/update-user";
+import {UpdateLoan} from "../update-loan/update-loan";
 
 @Component({
   selector: 'app-user-table',
@@ -15,7 +16,8 @@ import {UpdateUser} from "../update-user/update-user";
         NzButtonComponent,
         NzTableComponent,
         LoanTable,
-        UpdateUser
+        UpdateUser,
+        UpdateLoan
     ],
   templateUrl: './user-table.html',
   styleUrl: './user-table.css',
@@ -28,6 +30,42 @@ export class UserTable {
             email: 'mathys@biblio.fr',
             birthDate: new Date('2004-05-21'),
             loan: [
+                {
+                    book: {
+                        title: 'Dune',
+                        isbn: '9780441013593',
+                        author: 'Frank Herbert',
+                        releaseYear: 1965
+                    },
+                    user: null,
+                    date: new Date('2025-11-01'),
+                    plannedReturningDate: new Date('2025-12-01'),
+                    effectiveReturningDate: null
+                },
+                {
+                    book: {
+                        title: 'Dune',
+                        isbn: '9780441013593',
+                        author: 'Frank Herbert',
+                        releaseYear: 1965
+                    },
+                    user: null,
+                    date: new Date('2025-11-01'),
+                    plannedReturningDate: new Date('2025-12-01'),
+                    effectiveReturningDate: null
+                },
+                {
+                    book: {
+                        title: 'Dune',
+                        isbn: '9780441013593',
+                        author: 'Frank Herbert',
+                        releaseYear: 1965
+                    },
+                    user: null,
+                    date: new Date('2025-11-01'),
+                    plannedReturningDate: new Date('2025-12-01'),
+                    effectiveReturningDate: null
+                },
                 {
                     book: {
                         title: 'Dune',

src/index.html

@@ -2,10 +2,10 @@
 <html lang="en">
 <head>
     <meta charset="utf-8">
-    <title>LibraryFrontend</title>
+    <title>My Library</title>
     <base href="/">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="icon" type="image/x-icon" href="favicon.ico">
+    <link rel="icon" type="image/x-icon" href="https://png.pngtree.com/png-vector/20250211/ourmid/pngtree-colorful-book-stack-logo-design-perfect-for-education-or-library-projects-vector-png-image_15444285.png">
 </head>
 <body>
 <app-root></app-root>