connect front to back

2025-11-18 10:47:33 +01:00
parent 37094996ad
commit 73ce63d7d0
21 changed files with 399 additions and 617 deletions
--- a/package-lock.json
+++ b/package-lock.json
@@ -499,7 +499,6 @@
      "resolved": "https://registry.npmjs.org/@angular/common/-/common-20.3.10.tgz",
      "integrity": "sha512-12fEzvKbEqjqy1fSk9DMYlJz6dF1MJVXuC5BB+oWWJpd+2lfh4xJ62pkvvLGAICI89hfM5n9Cy5kWnXwnqPZsA==",
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "tslib": "^2.3.0"
      },
@@ -516,7 +515,6 @@
      "resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-20.3.10.tgz",
      "integrity": "sha512-cW939Lr8GZjPSYfbQKIDNrUaHWmn2M+zBbERThfq5skLuY+xM60bJFv4NqBekfX6YqKLCY62ilUZlnImYIXaqA==",
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "tslib": "^2.3.0"
      },
@@ -530,7 +528,6 @@
      "integrity": "sha512-9BemvpFxA26yIVdu8ROffadMkEdlk/AQQ2Jb486w7RPkrvUQ0pbEJukhv9aryJvhbMopT66S5H/j4ipOUMzmzQ==",
      "dev": true,
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "@babel/core": "7.28.3",
        "@jridgewell/sourcemap-codec": "^1.4.14",
@@ -563,7 +560,6 @@
      "resolved": "https://registry.npmjs.org/@angular/core/-/core-20.3.10.tgz",
      "integrity": "sha512-g99Qe+NOVo72OLxowVF9NjCckswWYHmvO7MgeiZTDJbTjF9tXH96dMx7AWq76/GUinV10sNzDysVW16NoAbCRQ==",
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "tslib": "^2.3.0"
      },
@@ -589,7 +585,6 @@
      "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-20.3.10.tgz",
      "integrity": "sha512-9yWr51EUauTEINB745AaHwZNTHLpXIm4uxuykxzOg+g2QskEgVfH26uS8G2ogdNuwYpB8wnsXWr34qhM3qgOWw==",
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "tslib": "^2.3.0"
      },
@@ -608,7 +603,6 @@
      "resolved": "https://registry.npmjs.org/@angular/platform-browser/-/platform-browser-20.3.10.tgz",
      "integrity": "sha512-UV8CGoB5P3FmJciI3/I/n3L7C3NVgGh7bIlZ1BaB/qJDtv0Wq0rRAGwmT/Z3gwmrRtfHZWme7/CeQ2CYJmMyUQ==",
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "tslib": "^2.3.0"
      },
@@ -631,7 +625,6 @@
      "resolved": "https://registry.npmjs.org/@angular/router/-/router-20.3.10.tgz",
      "integrity": "sha512-Z03cfH1jgQ7XMDJj4R8qAGqivcvhdG3wYBwaiN1K1ODBgPhbFKNeD4stKqYp7xBNtswmM2O2jMxrL/Djwju4Gg==",
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "tslib": "^2.3.0"
      },
@@ -713,7 +706,6 @@
      "integrity": "sha512-yDBHV9kQNcr2/sUr9jghVyz9C3Y5G2zUM2H2lo+9mKv4sFgbA8s8Z9t8D1jiTkGoO/NoIfKMyKWr4s6CN23ZwQ==",
      "dev": true,
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "@ampproject/remapping": "^2.2.0",
        "@babel/code-frame": "^7.27.1",
@@ -1681,7 +1673,6 @@
      "integrity": "sha512-nqhDw2ZcAUrKNPwhjinJny903bRhI0rQhiDz1LksjeRxqa36i3l75+4iXbOy0rlDpLJGxqtgoPavQjmmyS5UJw==",
      "dev": true,
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "@inquirer/checkbox": "^4.2.1",
        "@inquirer/confirm": "^5.1.14",
@@ -2537,7 +2528,6 @@
      "resolved": "https://registry.npmjs.org/@nestjs/common/-/common-11.1.6.tgz",
      "integrity": "sha512-krKwLLcFmeuKDqngG2N/RuZHCs2ycsKcxWIDgcm7i1lf3sQ0iG03ci+DsP/r3FcT/eJDFsIHnKtNta2LIi7PzQ==",
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "file-type": "21.0.0",
        "iterare": "1.2.1",
@@ -4354,7 +4344,6 @@
      "resolved": "https://registry.npmjs.org/axios/-/axios-1.12.2.tgz",
      "integrity": "sha512-vMJzPewAlRyOgxV2dU0Cuz2O8zzzx9VYtbJOaBgXFeLc4IV/Eg50n4LowmehOOR61S8ZMpc2K5Sa7g6A4jfkUw==",
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "follow-redirects": "^1.15.6",
        "form-data": "^4.0.4",
@@ -4523,7 +4512,6 @@
        }
      ],
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "baseline-browser-mapping": "^2.8.19",
        "caniuse-lite": "^1.0.30001751",
@@ -5721,7 +5709,6 @@
      "integrity": "sha512-DT9ck5YIRU+8GYzzU5kT3eHGA5iL+1Zd0EutOmTE9Dtk+Tvuzd23VBU+ec7HPNSTxXYO55gPV/hq4pSBJDjFpA==",
      "dev": true,
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "accepts": "^2.0.0",
        "body-parser": "^2.2.0",
@@ -6981,7 +6968,6 @@
      "integrity": "sha512-j1n1IuTX1VQjIy3tT7cyGbX7nvQOsFLoIqobZv4ttI5axP923gA44zUj6miiA6R5Aoms4sEGVIIcucXUbRI14g==",
      "dev": true,
      "license": "Apache-2.0",
-      "peer": true,
      "dependencies": {
        "copy-anything": "^2.0.1",
        "parse-node-version": "^1.0.1",
@@ -7269,7 +7255,6 @@
      "integrity": "sha512-SL0JY3DaxylDuo/MecFeiC+7pedM0zia33zl0vcjgwcq1q1FWWF1To9EIauPbl8GbMCU0R2e0uJ8bZunhYKD2g==",
      "dev": true,
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "cli-truncate": "^4.0.0",
        "colorette": "^2.0.20",
@@ -8927,8 +8912,7 @@
      "version": "0.2.2",
      "resolved": "https://registry.npmjs.org/reflect-metadata/-/reflect-metadata-0.2.2.tgz",
      "integrity": "sha512-urBwgfrvVP/eAyXx4hluJivBKzuEbSQs9rKWCrCkbSxNv8mxPcUZKeuoF3Uy4mJl3Lwprp6yy5/39VWigZ4K6Q==",
-      "license": "Apache-2.0",
-      "peer": true
+      "license": "Apache-2.0"
    },
    "node_modules/require-directory": {
      "version": "2.1.1",
@@ -9077,7 +9061,6 @@
      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.2.tgz",
      "integrity": "sha512-dhKf903U/PQZY6boNNtAGdWbG85WAbjT/1xYoZIC7FAY0yWapOBQVsVrDl58W86//e1VpMNBtRV4MaXfdMySFA==",
      "license": "Apache-2.0",
-      "peer": true,
      "dependencies": {
        "tslib": "^2.1.0"
      }
@@ -9114,7 +9097,6 @@
      "integrity": "sha512-9GUyuksjw70uNpb1MTYWsH9MQHOHY6kwfnkafC24+7aOMZn9+rVMBxRbLvw756mrBFbIsFg6Xw9IkR2Fnn3k+Q==",
      "dev": true,
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "chokidar": "^4.0.0",
        "immutable": "^5.0.2",
@@ -9853,8 +9835,7 @@
      "version": "2.8.1",
      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
-      "license": "0BSD",
-      "peer": true
+      "license": "0BSD"
    },
    "node_modules/tuf-js": {
      "version": "3.1.0",
@@ -9904,7 +9885,6 @@
      "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
      "dev": true,
      "license": "Apache-2.0",
-      "peer": true,
      "bin": {
        "tsc": "bin/tsc",
        "tsserver": "bin/tsserver"
@@ -10066,7 +10046,6 @@
      "integrity": "sha512-uzcxnSDVjAopEUjljkWh8EIrg6tlzrjFUfMcR1EVsRDGwf/ccef0qQPRyOrROwhrTDaApueq+ja+KLPlzR/zdg==",
      "dev": true,
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "esbuild": "^0.25.0",
        "fdir": "^6.5.0",
@@ -10447,7 +10426,6 @@
      "integrity": "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==",
      "dev": true,
      "license": "MIT",
-      "peer": true,
      "funding": {
        "url": "https://github.com/sponsors/colinhacks"
      }
@@ -10466,8 +10444,7 @@
      "version": "0.15.1",
      "resolved": "https://registry.npmjs.org/zone.js/-/zone.js-0.15.1.tgz",
      "integrity": "sha512-XE96n56IQpJM7NAoXswY3XRLcWFW83xe0BiAOeMD7K5k5xecOeul3Qcpx6GqEeeHNkW5DWL5zOyTbEfB4eti8w==",
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
    }
  }
 }
--- a/src/app/components/author-card/author-card.css
+++ b/src/app/components/author-card/author-card.css
@@ -0,0 +1,85 @@
+/* Table globale */
+nz-table {
+    width: 100%;
+    border-collapse: separate;
+    border-spacing: 0 8px; /* espace entre les lignes */
+    background: #fff;
+    border-radius: 8px;
+    overflow: hidden;
+    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
+/* En-tête */
+nz-table thead tr {
+    background-color: #f5f5f5;
+    text-align: left;
+    font-weight: 600;
+    color: #333;
+    border-bottom: 2px solid #e0e0e0;
+}
+
+nz-table thead th {
+    padding: 12px 16px;
+}
+
+/* Lignes du tableau */
+nz-table tbody tr {
+    background-color: #fff;
+    transition: background 0.2s ease;
+}
+
+nz-table tbody tr:nth-child(even) {
+    background-color: #f9f9f9;
+}
+
+nz-table tbody tr:hover {
+    background-color: #e6f7ff; /* survol */
+}
+
+/* Cellules */
+nz-table tbody td {
+    padding: 12px 16px;
+    vertical-align: middle;
+    color: #444;
+}
+
+/* Boutons */
+nz-table button[nz-button] {
+    margin-right: 8px;
+}
+
+/* Modals dans le tableau */
+nz-table app-modal {
+    margin-right: 8px;
+}
+
+/* Dates (pour alignement et style) */
+nz-table tbody td p {
+    margin: 0;
+    font-size: 14px;
+    color: #555;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+    nz-table thead {
+        display: none;
+    }
+    nz-table tbody tr {
+        display: block;
+        margin-bottom: 16px;
+        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+        border-radius: 8px;
+        padding: 12px;
+    }
+    nz-table tbody td {
+        display: flex;
+        justify-content: space-between;
+        padding: 6px 12px;
+    }
+    nz-table tbody td::before {
+        content: attr(data-label);
+        font-weight: 600;
+    }
+}
--- a/src/app/components/author-card/author-card.html
+++ b/src/app/components/author-card/author-card.html
@@ -1,16 +1,47 @@
-<div class="book-card-container">
-    <div class="ml-2">
-        <nz-card nzHoverable style="width:240px" [nzCover]="coverTemplate">
-            <nz-card-meta nzTitle="{{ authorInfo().name + authorInfo().firstName }}"></nz-card-meta>
-        </nz-card>
-        <ng-template #coverTemplate>
-            <img alt="example" src="https://www.w3schools.com/howto/img_avatar.png" />
-        </ng-template>
-        <div class="mt-2">
-            <app-modal [name]="'Modifier'" class="ml-7">
-                <app-update-author></app-update-author>
-            </app-modal>
-            <button nz-button nzType="primary" (click)="delete()" class="ml-2">Supprimer</button>
-        </div>
-    </div>
-</div>
+<nz-table  [nzData]="authors()"
+           [nzLoading]="authorsLoading()">
+    <thead>
+    <tr style="text-align: center">
+        <th>Prénom</th>
+        <th>Nom</th>
+        <th>Livre</th>
+        <th>Action</th>
+    </tr>
+    </thead>
+    <tbody style="text-align: center">
+        @for (author of authors(); track author.id) {
+            <tr>
+                <td>{{ author.name}}</td>
+                <td>{{ author.firstName }}</td>
+                <td>
+                    <app-modal type="link" [name]="'Voir les livres'">
+                        <nz-table [nzData]="authors()">
+                            <thead>
+                            <tr style="text-align: center">
+                                <th>Titre</th>
+                                <th>ISBN</th>
+                                <th>Date de publication</th>
+                            </tr>
+                            </thead>
+                            <tbody style="text-align: center">
+                                @for (book of author.books; track book.id) {
+                                    <tr>
+                                        <td>{{ book.title }}</td>
+                                        <td>{{ book.isbn}}</td>
+                                        <td>{{ book.releaseYear}}</td>
+                                    </tr>
+                                }
+                            </tbody>
+                        </nz-table>
+                    </app-modal>
+                </td>
+                <td>
+                    <app-modal [name]="'Modifier'">
+                        <app-update-loan></app-update-loan>
+                    </app-modal>
+                    <button nz-button nzType="primary" (click)="delete()" class="bg-red-600 border-red-600">Supprimer</button>
+                </td>
+            </tr>
+        }
+    </tbody>
+</nz-table>
--- a/src/app/components/author-card/author-card.ts
+++ b/src/app/components/author-card/author-card.ts
@@ -1,24 +1,49 @@
-import {Component, input} from '@angular/core';
-import {AuthorInfo} from "../../interfaces/author.interfaces";
+import {Component, inject, OnInit, signal} from '@angular/core';
 import {Modal} from "../modal/modal";
 import {NzButtonComponent} from "ng-zorro-antd/button";
-import {NzCardComponent, NzCardMetaComponent} from "ng-zorro-antd/card";
-import {UpdateAuthor} from "../update-author/update-author";
+import {AuthorsService, GetAuthorDto} from "../../services/api";
+import {NzNotificationService} from "ng-zorro-antd/notification";
+import {firstValueFrom} from "rxjs";
+import {NzTableComponent} from "ng-zorro-antd/table";
+import {UpdateLoan} from "../update-loan/update-loan";

@Component({
  selector: 'app-author-card',
    imports: [
        Modal,
        NzButtonComponent,
-        NzCardComponent,
-        UpdateAuthor,
-        NzCardMetaComponent
+        NzTableComponent,
+        UpdateLoan
    ],
  templateUrl: './author-card.html',
-  styleUrl: '../book-card/book-card.css',
+  styleUrl: './author-card.css',
 })
-export class AuthorCard {
-    authorInfo = input.required<AuthorInfo>();
+export class AuthorCard implements OnInit {
+    private authorsService = inject(AuthorsService);
+    private notificationService = inject(NzNotificationService)
+
+    authors = signal<GetAuthorDto[]>([]);
+
+    authorsLoading = signal<boolean>(false);
+
+    async ngOnInit() {
+        await this.fetchauthors();
+    }
+
+    async fetchauthors() {
+        this.authorsLoading.set(true)
+
+        try {
+            const authors = await firstValueFrom(this.authorsService.getAllAuthorsEndpoint());
+
+        } catch (e) {
+            this.notificationService.error(
+                'Erreur',
+                'Erreur de communication avec l\'API'
+            )
+        }
+        this.authorsLoading.set(false)
+    }

    delete() {
        return
--- a/src/app/components/book-card/book-card.css
+++ b/src/app/components/book-card/book-card.css
@@ -1,37 +1,85 @@
-.book-card-container {
-    background: #f5f5f5;        /* fond clair */
-    padding: 20px;              /* espace autour de la carte */
-    border-radius: 12px;        /* coins arrondis */
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* ombre douce */
-    transition: transform 0.2s, box-shadow 0.2s; /* animation au survol */
-    width: 300px;
-    margin: 10px auto;          /* centre la carte dans le parent */
-}
-
-.book-card-container:hover {
-    transform: translateY(-5px); /* petit effet de “lift” au survol */
-    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* ombre plus prononcée */
-}
-
-.book-card-container nz-card {
-    border-radius: 12px;        /* coins arrondis de la carte NZ */
-    background-color: #ffffff;  /* fond blanc */
-    padding: 16px;              /* espace intérieur */
-}
-
-.book-card-container p {
-    margin: 5px 0;              /* espace vertical entre les paragraphes */
-    color: #333;                /* texte gris foncé */
+/* Table globale */
+nz-table {
+    width: 100%;
+    border-collapse: separate;
+    border-spacing: 0 8px; /* espace entre les lignes */
+    background: #fff;
+    border-radius: 8px;
+    overflow: hidden;
+    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 }

-.book-card-container a {
-    color: #1890ff;             /* bleu Ant Design */
-    text-decoration: none;
-    font-weight: 500;
-    cursor: pointer;
+/* En-tête */
+nz-table thead tr {
+    background-color: #f5f5f5;
+    text-align: left;
+    font-weight: 600;
+    color: #333;
+    border-bottom: 2px solid #e0e0e0;
 }

-.book-card-container a:hover {
-    text-decoration: underline; /* souligne au survol */
+nz-table thead th {
+    padding: 12px 16px;
 }
+
+/* Lignes du tableau */
+nz-table tbody tr {
+    background-color: #fff;
+    transition: background 0.2s ease;
+}
+
+nz-table tbody tr:nth-child(even) {
+    background-color: #f9f9f9;
+}
+
+nz-table tbody tr:hover {
+    background-color: #e6f7ff; /* survol */
+}
+
+/* Cellules */
+nz-table tbody td {
+    padding: 12px 16px;
+    vertical-align: middle;
+    color: #444;
+}
+
+/* Boutons */
+nz-table button[nz-button] {
+    margin-right: 8px;
+}
+
+/* Modals dans le tableau */
+nz-table app-modal {
+    margin-right: 8px;
+}
+
+/* Dates (pour alignement et style) */
+nz-table tbody td p {
+    margin: 0;
+    font-size: 14px;
+    color: #555;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+    nz-table thead {
+        display: none;
+    }
+    nz-table tbody tr {
+        display: block;
+        margin-bottom: 16px;
+        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+        border-radius: 8px;
+        padding: 12px;
+    }
+    nz-table tbody td {
+        display: flex;
+        justify-content: space-between;
+        padding: 6px 12px;
+    }
+    nz-table tbody td::before {
+        content: attr(data-label);
+        font-weight: 600;
+    }
+}
--- a/src/app/components/book-card/book-card.html
+++ b/src/app/components/book-card/book-card.html
@@ -1,19 +1,29 @@
-<div class="book-card-container">
-    <nz-card
-            [nzBordered]="false"
-            nzTitle="{{ bookInfo().title }}"
-            [nzExtra]="extraTemplate">
-        <p>{{ bookInfo().isbn }}</p>
-        <p>{{ bookInfo().author }}</p>
-        <p>{{ bookInfo().releaseYear }}</p>
-        <br>
-        <app-modal [name]="'Modifier'" class="ml-31">
-            <app-update-book></app-update-book>
-        </app-modal>
-        <button nz-button nzType="primary" (click)="delete()" class="ml-28 mt-1">Supprimer</button>
-    </nz-card>
-</div>
-
-<ng-template #extraTemplate>
-    <a>More</a>
-</ng-template>
+<nz-table [nzData]="books()"
+          [nzLoading]="booksLoading()">
+    <thead>
+    <tr style="text-align: center">
+        <th>Titre</th>
+        <th>ISBN</th>
+        <th>Auteur</th>
+        <th>Date de publication</th>
+        <th>Action</th>
+    </tr>
+    </thead>
+    <tbody style="text-align: center">
+        @for (book of books(); track book.id) {
+            <tr>
+                <td>{{ book.title}}</td>
+                <td>{{ book.isbn }}</td>
+                <td>{{ book.bookAuthorName }} {{ book.bookAuthorFirstName }}</td>
+                <td>{{ book.releaseYear}}</td>
+                <td></td>
+                <td>
+                    <app-modal [name]="'Modifier'">
+                        <app-update-user></app-update-user>
+                    </app-modal>
+                    <button nz-button nzType="primary" (click)="delete()" class="bg-red-600 border-red-600">Supprimer</button>
+                </td>
+            </tr>
+        }
+    </tbody>
+</nz-table>
--- a/src/app/components/book-card/book-card.ts
+++ b/src/app/components/book-card/book-card.ts
@@ -1,24 +1,49 @@
-import {Component, input} from '@angular/core'; // Importation de la fonction input() et des components
-import {BookInfo} from '../../interfaces/book.interfaces';
-import {NzCardComponent} from "ng-zorro-antd/card";
-import {CreateBook} from "../create-book/create-book";
+import {Component, inject, OnInit, signal} from '@angular/core'; // Importation de la fonction input() et des components
 import {Modal} from "../modal/modal";
 import {NzButtonComponent} from "ng-zorro-antd/button";
-import {UpdateBook} from "../update-book/update-book";
+import {BooksService, GetBookDto} from "../../services/api";
+import {NzNotificationService} from "ng-zorro-antd/notification";
+import {firstValueFrom} from "rxjs";
+import {NzTableComponent} from "ng-zorro-antd/table";
+import {UpdateUser} from "../update-user/update-user";

@Component({
  selector: 'app-book-card',
    imports: [
-        NzCardComponent,
        Modal,
        NzButtonComponent,
-        UpdateBook,
+        NzTableComponent,
+        UpdateUser,
    ],
  templateUrl: './book-card.html',
  styleUrl: './book-card.css',
 })
-export class BookCard {
-    bookInfo = input.required<BookInfo>();
+export class BookCard implements OnInit {
+    private booksService = inject(BooksService);
+    private notificationService = inject(NzNotificationService)
+
+    books = signal<GetBookDto[]>([]);
+
+    booksLoading = signal<boolean>(false);
+
+    async ngOnInit() {
+        await this.fetchbooks();
+    }
+
+    async fetchbooks() {
+        this.booksLoading.set(true)
+
+        try {
+            const books = await firstValueFrom(this.booksService.getAllBooksEndpoint());
+
+        } catch (e) {
+            this.notificationService.error(
+                'Erreur',
+                'Erreur de communication avec l\'API'
+            )
+        }
+        this.booksLoading.set(false)
+    }

    delete() {
        return
--- a/src/app/components/create-author/create-author.ts
+++ b/src/app/components/create-author/create-author.ts
@@ -2,7 +2,6 @@ import {Component, input} from '@angular/core';
 import {FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators} from "@angular/forms";
 import {NzColDirective, NzRowDirective} from "ng-zorro-antd/grid";
 import {NzFormControlComponent, NzFormDirective, NzFormItemComponent, NzFormLabelComponent} from "ng-zorro-antd/form";
-import {AuthorInfo} from "../../interfaces/author.interfaces";

@Component({
  selector: 'app-create-author',
--- a/src/app/components/loan-table/loan-table.html
+++ b/src/app/components/loan-table/loan-table.html
@@ -1,4 +1,5 @@
-<nz-table #basicTable [nzData]="listOfData">
+<nz-table  [nzData]="loans()"
+           [nzLoading]="loansLoading()">
    <thead>
    <tr style="text-align: center">
        <th>Utilisateur</th>
@@ -10,13 +11,13 @@
    </tr>
    </thead>
    <tbody style="text-align: center">
-        @for (data of basicTable.data; track data) {
+        @for (loan of loans(); track loan.id) {
            <tr>
-                <td>{{ data.user.name}} {{data.user.firstName }}</td>
-                <td>{{ data.book.title }}</td>
-                <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>{{ loan.userName}} {{loan.userFirstName }}</td>
+                <td>{{ loan.bookTitle }}</td>
+                <td>{{ loan.date | date: 'dd/MM/yyyy' }}</td>
+                <td>{{ loan.plannedReturningDate | date: 'dd/MM/yyyy'}}</td>
+                <td>{{ loan.effectiveReturningDate | date: 'dd/MM/yyyy'}}</td>
                <td>
                    <app-modal [name]="'Modifier'">
                        <app-update-loan></app-update-loan>
--- a/src/app/components/loan-table/loan-table.ts
+++ b/src/app/components/loan-table/loan-table.ts
@@ -1,10 +1,12 @@
-import { Component } from '@angular/core';
+import {Component, inject, OnInit, signal} from '@angular/core';
 import {DatePipe} from "@angular/common";
 import {Modal} from "../modal/modal";
 import {NzButtonComponent} from "ng-zorro-antd/button";
 import {NzTableComponent} from "ng-zorro-antd/table";
 import {UpdateLoan} from "../update-loan/update-loan";
-import {LoanInfo} from "../../interfaces/loan.interfaces";
+import {GetLoanDto, LoansService} from "../../services/api";
+import {NzNotificationService} from "ng-zorro-antd/notification";
+import {firstValueFrom} from "rxjs";

@Component({
  selector: 'app-loan-table',
@@ -18,189 +20,32 @@ import {LoanInfo} from "../../interfaces/loan.interfaces";
  templateUrl: './loan-table.html',
  styleUrl: './loan-table.css',
 })
-export class LoanTable {
-    listOfData: LoanInfo[] = [
-        {
-            book: {
-                title: 'Dune',
-                isbn: '9780441013593',
-                author: 'Frank Herbert',
-                releaseYear: 1965
-            },
-            user: {
-                name: 'Dupont',
-                firstName: 'Mathys',
-                email: 'mathys@biblio.fr',
-                birthDate: new Date('2004-05-21'),
-                loan: []
-            },
-            date: new Date('2025-11-01'),
-            plannedReturningDate: new Date('2025-12-01'),
-            effectiveReturningDate: null
-        },
-        {
-            book: {
-                title: '1984',
-                isbn: '9780451524935',
-                author: 'George Orwell',
-                releaseYear: 1949
-            },
-            user: {
-                name: 'Durand',
-                firstName: 'Lucie',
-                email: 'lucie@biblio.fr',
-                birthDate: new Date('1998-03-12'),
-                loan: []
-            },
-            date: new Date('2025-10-20'),
-            plannedReturningDate: new Date('2025-11-20'),
-            effectiveReturningDate: new Date('2025-11-05')
-        },
-        {
-            book: {
-                title: 'Le Seigneur des Anneaux',
-                isbn: '9780261102385',
-                author: 'J.R.R. Tolkien',
-                releaseYear: 1954
-            },
-            user: {
-                name: 'Bernard',
-                firstName: 'Thomas',
-                email: 'thomas@biblio.fr',
-                birthDate: new Date('1990-07-04'),
-                loan: []
-            },
-            date: new Date('2025-09-10'),
-            plannedReturningDate: new Date('2025-10-10'),
-            effectiveReturningDate: new Date('2025-10-02')
-        },
-        {
-            book: {
-                title: 'Les Misérables',
-                isbn: '9780140444308',
-                author: 'Victor Hugo',
-                releaseYear: 1862
-            },
-            user: {
-                name: 'Moreau',
-                firstName: 'Sophie',
-                email: 'sophie@biblio.fr',
-                birthDate: new Date('1987-02-25'),
-                loan: []
-            },
-            date: new Date('2025-11-03'),
-            plannedReturningDate: new Date('2025-12-03'),
-            effectiveReturningDate: null
-        },
-        {
-            book: {
-                title: 'Fahrenheit 451',
-                isbn: '9781451673319',
-                author: 'Ray Bradbury',
-                releaseYear: 1953
-            },
-            user: {
-                name: 'Leroy',
-                firstName: 'Julien',
-                email: 'julien@biblio.fr',
-                birthDate: new Date('2001-09-18'),
-                loan: []
-            },
-            date: new Date('2025-10-15'),
-            plannedReturningDate: new Date('2025-11-15'),
-            effectiveReturningDate: new Date('2025-11-13')
-        },
-        {
-            book: {
-                title: 'Harry Potter à l’école des sorciers',
-                isbn: '9780747532743',
-                author: 'J.K. Rowling',
-                releaseYear: 1997
-            },
-            user: {
-                name: 'Petit',
-                firstName: 'Emma',
-                email: 'emma@biblio.fr',
-                birthDate: new Date('2006-11-30'),
-                loan: []
-            },
-            date: new Date('2025-11-08'),
-            plannedReturningDate: new Date('2025-12-08'),
-            effectiveReturningDate: null
-        },
-        {
-            book: {
-                title: 'Le Petit Prince',
-                isbn: '9780156012195',
-                author: 'Antoine de Saint-Exupéry',
-                releaseYear: 1943
-            },
-            user: {
-                name: 'Roux',
-                firstName: 'Nicolas',
-                email: 'nicolas@biblio.fr',
-                birthDate: new Date('1995-08-14'),
-                loan: []
-            },
-            date: new Date('2025-09-25'),
-            plannedReturningDate: new Date('2025-10-25'),
-            effectiveReturningDate: new Date('2025-10-20')
-        },
-        {
-            book: {
-                title: 'L’Étranger',
-                isbn: '9782070360024',
-                author: 'Albert Camus',
-                releaseYear: 1942
-            },
-            user: {
-                name: 'Fontaine',
-                firstName: 'Claire',
-                email: 'claire@biblio.fr',
-                birthDate: new Date('1992-04-17'),
-                loan: []
-            },
-            date: new Date('2025-10-05'),
-            plannedReturningDate: new Date('2025-11-05'),
-            effectiveReturningDate: new Date('2025-11-01')
-        },
-        {
-            book: {
-                title: 'Le Hobbit',
-                isbn: '9780261102217',
-                author: 'J.R.R. Tolkien',
-                releaseYear: 1937
-            },
-            user: {
-                name: 'Blanc',
-                firstName: 'Hugo',
-                email: 'hugo@biblio.fr',
-                birthDate: new Date('2000-01-09'),
-                loan: []
-            },
-            date: new Date('2025-11-02'),
-            plannedReturningDate: new Date('2025-12-02'),
-            effectiveReturningDate: null
-        },
-        {
-            book: {
-                title: 'La Peste',
-                isbn: '9780141185064',
-                author: 'Albert Camus',
-                releaseYear: 1947
-            },
-            user: {
-                name: 'Garnier',
-                firstName: 'Léa',
-                email: 'lea@biblio.fr',
-                birthDate: new Date('1999-06-11'),
-                loan: []
-            },
-            date: new Date('2025-09-01'),
-            plannedReturningDate: new Date('2025-10-01'),
-            effectiveReturningDate: new Date('2025-09-27')
+export class LoanTable implements OnInit {
+    private loansService = inject(LoansService);
+    private notificationService = inject(NzNotificationService)
+
+    loans = signal<GetLoanDto[]>([]);
+
+    loansLoading = signal<boolean>(false);
+
+    async ngOnInit() {
+        await this.fetchloans();
+    }
+
+    async fetchloans() {
+        this.loansLoading.set(true)
+
+        try {
+            const loans = await firstValueFrom(this.loansService.getAllLoanEndpoint())
+
+        } catch (e) {
+            this.notificationService.error(
+                'Erreur',
+                'Erreur de communication avec l\'API'
+            )
        }
-    ];
+        this.loansLoading.set(false)
+    }

    delete() {
        return
--- a/src/app/components/user-table/user-table.html
+++ b/src/app/components/user-table/user-table.html
@@ -1,4 +1,5 @@
-<nz-table #basicTable [nzData]="listOfData">
+<nz-table [nzData]="users()"
+          [nzLoading]="usersLoading()">
    <thead>
    <tr style="text-align: center">
        <th>Nom</th>
@@ -10,15 +11,15 @@
    </tr>
    </thead>
    <tbody style="text-align: center">
-        @for (data of basicTable.data; track data) {
+        @for (user of users(); track user.id) {
            <tr>
-                <td>{{ data.name}}</td>
-                <td>{{ data.firstName }}</td>
-                <td>{{ data.email }}</td>
-                <td>{{ data.birthDate | date: 'dd/MM/yyyy'}}</td>
+                <td>{{ user.name}}</td>
+                <td>{{ user.firstName }}</td>
+                <td>{{ user.email }}</td>
+                <td>{{ user.birthDate | date: 'dd/MM/yyyy'}}</td>
                <td>
                    <app-modal type="link" [name]="'Voir les emprunts'">
-                        <nz-table #basicTable [nzData]="listOfData">
+                        <nz-table [nzData]="users()">
                            <thead>
                            <tr style="text-align: center">
                                <th>Livre</th>
@@ -27,11 +28,11 @@
                            </tr>
                            </thead>
                            <tbody style="text-align: center">
-                                @for (loans of data.loan; track loans) {
+                                @for (loan of user.loans; track loan.id) {
                                    <tr>
-                                        <td>{{ loans.book.title }}</td>
-                                        <td>{{ loans.date | date: 'dd/MM/yyyy' }}</td>
-                                        <td>{{ loans.effectiveReturningDate | date: 'dd/MM/yyyy'}}</td>
+                                        <td>{{ loan.bookTitle }}</td>
+                                        <td>{{ loan.date | date: 'dd/MM/yyyy' }}</td>
+                                        <td>{{ loan.effectiveReturningDate | date: 'dd/MM/yyyy'}}</td>
                                    </tr>
                                }
                            </tbody>
--- a/src/app/components/user-table/user-table.ts
+++ b/src/app/components/user-table/user-table.ts
@@ -1,10 +1,12 @@
-import { Component } from '@angular/core';
+import {Component, inject, OnInit, signal} from '@angular/core';
 import {NzTableComponent} from "ng-zorro-antd/table";
 import {Modal} from "../modal/modal";
 import {DatePipe} from "@angular/common";
 import {NzButtonComponent} from "ng-zorro-antd/button";
-import {UserInfo} from "../../interfaces/user.interfaces";
 import {UpdateUser} from "../update-user/update-user";
+import {GetUserDto, UsersService} from "../../services/api";
+import {NzNotificationService} from "ng-zorro-antd/notification";
+import {firstValueFrom} from "rxjs";

@Component({
  selector: 'app-user-table',
@@ -18,245 +20,32 @@ import {UpdateUser} from "../update-user/update-user";
  templateUrl: './user-table.html',
  styleUrl: './user-table.css',
 })
-export class UserTable {
-    listOfData: UserInfo[] = [
-        {
-            name: 'Dupont',
-            firstName: 'Mathys',
-            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',
-                        isbn: '9780441013593',
-                        author: 'Frank Herbert',
-                        releaseYear: 1965
-                    },
-                    user: null,
-                    date: new Date('2025-11-01'),
-                    plannedReturningDate: new Date('2025-12-01'),
-                    effectiveReturningDate: null
-                }
-            ]
-        },
-        {
-            name: 'Durand',
-            firstName: 'Lucie',
-            email: 'lucie@biblio.fr',
-            birthDate: new Date('1998-03-12'),
-            loan: [
-                {
-                    book: {
-                        title: '1984',
-                        isbn: '9780451524935',
-                        author: 'George Orwell',
-                        releaseYear: 1949
-                    },
-                    user: null,
-                    date: new Date('2025-10-20'),
-                    plannedReturningDate: new Date('2025-11-20'),
-                    effectiveReturningDate: new Date('2025-11-05')
-                }
-            ]
-        },
-        {
-            name: 'Bernard',
-            firstName: 'Thomas',
-            email: 'thomas@biblio.fr',
-            birthDate: new Date('1990-07-04'),
-            loan: [
-                {
-                    book: {
-                        title: 'Le Seigneur des Anneaux',
-                        isbn: '9780261102385',
-                        author: 'J.R.R. Tolkien',
-                        releaseYear: 1954
-                    },
-                    user: null,
-                    date: new Date('2025-09-10'),
-                    plannedReturningDate: new Date('2025-10-10'),
-                    effectiveReturningDate: new Date('2025-10-02')
-                }
-            ]
-        },
-        {
-            name: 'Moreau',
-            firstName: 'Sophie',
-            email: 'sophie@biblio.fr',
-            birthDate: new Date('1987-02-25'),
-            loan: [
-                {
-                    book: {
-                        title: 'Les Misérables',
-                        isbn: '9780140444308',
-                        author: 'Victor Hugo',
-                        releaseYear: 1862
-                    },
-                    user: null,
-                    date: new Date('2025-11-03'),
-                    plannedReturningDate: new Date('2025-12-03'),
-                    effectiveReturningDate: null
-                }
-            ]
-        },
-        {
-            name: 'Leroy',
-            firstName: 'Julien',
-            email: 'julien@biblio.fr',
-            birthDate: new Date('2001-09-18'),
-            loan: [
-                {
-                    book: {
-                        title: 'Fahrenheit 451',
-                        isbn: '9781451673319',
-                        author: 'Ray Bradbury',
-                        releaseYear: 1953
-                    },
-                    user: null,
-                    date: new Date('2025-10-15'),
-                    plannedReturningDate: new Date('2025-11-15'),
-                    effectiveReturningDate: new Date('2025-11-13')
-                }
-            ]
-        },
-        {
-            name: 'Petit',
-            firstName: 'Emma',
-            email: 'emma@biblio.fr',
-            birthDate: new Date('2006-11-30'),
-            loan: [
-                {
-                    book: {
-                        title: 'Harry Potter à l’école des sorciers',
-                        isbn: '9780747532743',
-                        author: 'J.K. Rowling',
-                        releaseYear: 1997
-                    },
-                    user: null,
-                    date: new Date('2025-11-08'),
-                    plannedReturningDate: new Date('2025-12-08'),
-                    effectiveReturningDate: null
-                }
-            ]
-        },
-        {
-            name: 'Roux',
-            firstName: 'Nicolas',
-            email: 'nicolas@biblio.fr',
-            birthDate: new Date('1995-08-14'),
-            loan: [
-                {
-                    book: {
-                        title: 'Le Petit Prince',
-                        isbn: '9780156012195',
-                        author: 'Antoine de Saint-Exupéry',
-                        releaseYear: 1943
-                    },
-                    user: null,
-                    date: new Date('2025-09-25'),
-                    plannedReturningDate: new Date('2025-10-25'),
-                    effectiveReturningDate: new Date('2025-10-20')
-                }
-            ]
-        },
-        {
-            name: 'Fontaine',
-            firstName: 'Claire',
-            email: 'claire@biblio.fr',
-            birthDate: new Date('1992-04-17'),
-            loan: [
-                {
-                    book: {
-                        title: 'L’Étranger',
-                        isbn: '9782070360024',
-                        author: 'Albert Camus',
-                        releaseYear: 1942
-                    },
-                    user: null,
-                    date: new Date('2025-10-05'),
-                    plannedReturningDate: new Date('2025-11-05'),
-                    effectiveReturningDate: new Date('2025-11-01')
-                }
-            ]
-        },
-        {
-            name: 'Blanc',
-            firstName: 'Hugo',
-            email: 'hugo@biblio.fr',
-            birthDate: new Date('2000-01-09'),
-            loan: [
-                {
-                    book: {
-                        title: 'Le Hobbit',
-                        isbn: '9780261102217',
-                        author: 'J.R.R. Tolkien',
-                        releaseYear: 1937
-                    },
-                    user: null,
-                    date: new Date('2025-11-02'),
-                    plannedReturningDate: new Date('2025-12-02'),
-                    effectiveReturningDate: null
-                }
-            ]
-        },
-        {
-            name: 'Garnier',
-            firstName: 'Léa',
-            email: 'lea@biblio.fr',
-            birthDate: new Date('1999-06-11'),
-            loan: [
-                {
-                    book: {
-                        title: 'La Peste',
-                        isbn: '9780141185064',
-                        author: 'Albert Camus',
-                        releaseYear: 1947
-                    },
-                    user: null,
-                    date: new Date('2025-09-01'),
-                    plannedReturningDate: new Date('2025-10-01'),
-                    effectiveReturningDate: new Date('2025-09-27')
-                }
-            ]
+export class UserTable implements OnInit {
+    private usersService = inject(UsersService);
+    private notificationService = inject(NzNotificationService)
+
+    users = signal<GetUserDto[]>([]);
+
+    usersLoading = signal<boolean>(false);
+
+    async ngOnInit() {
+        await this.fetchUsers();
+    }
+
+    async fetchUsers() {
+        this.usersLoading.set(true)
+
+        try {
+            const users = await firstValueFrom(this.usersService.getAllUsersEndpoint())
+
+        } catch (e) {
+            this.notificationService.error(
+                'Erreur',
+                'Erreur de communication avec l\'API'
+            )
        }
-    ];
+        this.usersLoading.set(false)
+    }

    delete() {
        return
--- a/src/app/interfaces/author.interfaces.ts
+++ b/src/app/interfaces/author.interfaces.ts
@@ -1,4 +0,0 @@
-export interface AuthorInfo {
-    name: string;
-    firstName: string;
-}
--- a/src/app/interfaces/book.interfaces.ts
+++ b/src/app/interfaces/book.interfaces.ts
@@ -1,6 +0,0 @@
-export interface BookInfo {
-    title: string;
-    isbn: string;
-    releaseYear: number;
-    author: string;
-}
--- a/src/app/interfaces/loan.interfaces.ts
+++ b/src/app/interfaces/loan.interfaces.ts
@@ -1,10 +0,0 @@
-import {BookInfo} from "./book.interfaces";
-import {UserInfo} from "./user.interfaces";
-
-export interface LoanInfo {
-    book: BookInfo;
-    user: UserInfo;
-    date: Date;
-    plannedReturningDate: Date;
-    effectiveReturningDate: Date;
-}
--- a/src/app/interfaces/user.interfaces.ts
+++ b/src/app/interfaces/user.interfaces.ts
@@ -1,9 +0,0 @@
-import {LoanInfo} from "./loan.interfaces";
-
-export interface UserInfo {
-    name: string;
-    firstName: string;
-    email: string;
-    birthDate: Date;
-    loan: LoanInfo[];
-}
--- a/src/app/pages/author/author.html
+++ b/src/app/pages/author/author.html
@@ -3,8 +3,6 @@
 </app-modal>

 <section class="author-grid">
-    @for (author of authors; track $index) {
-        <app-author-card [authorInfo]="author"></app-author-card>
-    }
+    <app-author-card></app-author-card>
 </section>

--- a/src/app/pages/author/author.ts
+++ b/src/app/pages/author/author.ts
@@ -1,7 +1,6 @@
-import {Component, input} from '@angular/core';
+import {Component} from '@angular/core';
 import {CreateAuthor} from "../../components/create-author/create-author";
 import {Modal} from "../../components/modal/modal";
-import {AuthorInfo} from "../../interfaces/author.interfaces";
 import {AuthorCard} from "../../components/author-card/author-card";

@Component({
@@ -14,16 +13,6 @@ import {AuthorCard} from "../../components/author-card/author-card";
    templateUrl: './author.html',
    styleUrl: './author.css',
 })
-export class Author {
-    authorInfo = input.required<AuthorInfo>();
-
-    authors: AuthorInfo[] = [
-        { name: 'Victor', firstName: 'Hugo' },
-        { name: 'J.K.', firstName: 'Rowling' },
-        { name: 'J.R.R.', firstName: 'Tolkien' },
-        { name: 'Frank', firstName: 'Herbert' },
-        { name: 'Ray', firstName: 'Bradbury' },
-        { name: 'George ', firstName: 'Orwell' }
-    ];
+export class Author{

 }
--- a/src/app/pages/book/book.html
+++ b/src/app/pages/book/book.html
@@ -3,8 +3,6 @@
 </app-modal>

 <section class="book-grid">
-    @for (book of books; track $index) {
-        <app-book-card [bookInfo]="book"></app-book-card>
-    }
+    <app-book-card></app-book-card>
 </section>

--- a/src/app/pages/book/book.ts
+++ b/src/app/pages/book/book.ts
@@ -1,5 +1,4 @@
-import { Component } from '@angular/core';
-import {BookInfo} from "../../interfaces/book.interfaces";
+import {Component, inject, OnInit, signal} from '@angular/core';
 import {BookCard} from "../../components/book-card/book-card";
 import {Modal} from "../../components/modal/modal";
 import {CreateBook} from "../../components/create-book/create-book";
@@ -14,14 +13,5 @@ import {CreateBook} from "../../components/create-book/create-book";
  templateUrl: './book.html',
  styleUrls: ['./book.css'],
 })
-export class Book {
-    books: BookInfo[] = [
-        { title: '1984', isbn: '978-0451524935', author: 'George Orwell', releaseYear: 1949 },
-        { title: 'Le Seigneur des Anneaux', isbn: '978-0544003415', author: 'J.R.R. Tolkien', releaseYear: 1954 },
-        { title: 'Dune', isbn: '978-0441013593', author: 'Frank Herbert', releaseYear: 1965 },
-        { title: 'Fahrenheit 451', isbn: '978-1451673319', author: 'Ray Bradbury', releaseYear: 1953 },
-        { title: 'Les Misérables', isbn: '978-2070409185', author: 'Victor Hugo', releaseYear: 1862 },
-        { title: 'Harry Potter à l’école des sorciers', isbn: '978-2070643028', author: 'J.K. Rowling', releaseYear: 1997 },
-    ];
-
+export class Book{
 }
--- a/src/app/pages/loan/loan.ts
+++ b/src/app/pages/loan/loan.ts
@@ -1,14 +1,14 @@
 import { Component } from '@angular/core';
-import {LoanTable} from "../../components/loan-table/loan-table";
 import {Modal} from "../../components/modal/modal";
 import {CreateLoan} from "../../components/create-loan/create-loan";
+import {LoanTable} from "../../components/loan-table/loan-table";

@Component({
  selector: 'app-loan',
    imports: [
-        LoanTable,
        Modal,
-        CreateLoan
+        CreateLoan,
+        LoanTable
    ],
  templateUrl: './loan.html',
  styleUrl: './loan.css',