update

src/app/+admin/layout/feature/ui/layout.component.ts

-import { RouterLink, RouterModule, RouterOutlet } from '@angular/router';
+import { RouterModule, RouterOutlet } from '@angular/router';
 import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
 import { NzLayoutModule } from 'ng-zorro-antd/layout';
 
 import { CommonModule } from '@angular/common';
 import { AdminHeaderComponent } from "./components/header/feature/header.component";
 import { AdminFooterComponent } from "./components/footer/feature/footer.component";
-import { JobListComponent } from "../../../management/job/feature/job-list.component";
 
 @Component({
   selector: 'admin-layout',
@@ -13,12 +12,10 @@ import { JobListComponent } from "../../../management/job/feature/job-list.compo
   imports: [
     RouterOutlet,
     NzLayoutModule,
-    RouterLink,
     RouterModule,
     CommonModule,
     AdminHeaderComponent,
     AdminFooterComponent,
-    JobListComponent
 ],
   template: ` <nz-content>
     <div class="tw-container">

src/app/+admin/management/job/feature/job-list.component.ts

@@ -12,6 +12,7 @@ import { NzPaginationModule } from 'ng-zorro-antd/pagination';
 import { FormBuilder, FormGroup, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
 import { NzFormModule } from 'ng-zorro-antd/form';
 import { NzNotificationService } from 'ng-zorro-antd/notification';
+import { NzIconModule } from 'ng-zorro-antd/icon';
 
 @Component({
     selector: 'job-list',
@@ -25,6 +26,7 @@ import { NzNotificationService } from 'ng-zorro-antd/notification';
         NzPaginationModule,
         ReactiveFormsModule,
         NzFormModule,
+        NzIconModule,
         FormsModule
     ],
     styles: `
@@ -134,10 +136,20 @@ import { NzNotificationService } from 'ng-zorro-antd/notification';
         </ng-container>
         </nz-modal>
         <nz-content class="tw-my-3">
+            <div class="tw-flex tw-gap-3">
+            <nz-form-item class="tw-flex-1">
+                <nz-form-control>
+                    <nz-input-group>
+                        <input class="tw-border tw-rounded-lg tw-w-full tw-h-8">
+                    </nz-input-group>
+                </nz-form-control>
+            </nz-form-item>
+            <button type="button" class="tw-border tw-rounded-md tw-h-8 tw-px-3 tw-bg-sky"><span nz-icon nzType="search" nzTheme="outline"></span></button>
+        </div>
             <nz-table 
                 #rowTable
                 [nzData]="['']"
-                [nzPageSize]="5"
+                [nzPageSize]="pageSize"
                 [nzFrontPagination]="false"
                 class="tw-my-3"
                 >

src/app/+login/feature/login.component.html

@@ -51,10 +51,12 @@
         <button
           (click)="onLogin()"
           nz-button
-          nzType="primary"
-          class="tw-text-lg tw-h-10"
+          nzType="default"
+          class="tw-text-lg tw-h-10 tw-w-24"
+          (disabled)="isLoggingIn"
         >
-          Login
+          <nz-spin *ngIf="isLoggingIn" nzSimple></nz-spin>
+          <span *ngIf="!isLoggingIn">Login</span>
         </button>
       </div>
     </form>

src/app/+login/feature/login.component.ts

@@ -11,10 +11,12 @@ import { NzAlertModule } from 'ng-zorro-antd/alert';
 import { FormBuilder, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
 import { AuthService } from '../data-access/service/auth.service';
 import { validateUsername } from '../../shared/utils/form-validator/username.validator';
-import { catchError, of, tap } from 'rxjs';
+import { catchError, finalize, of, tap } from 'rxjs';
 import { ResponseResult } from '../../shared/data-access/interface/response.type';
 import { Login } from '../data-access/model/login.model';
 import { Router } from '@angular/router';
+import { NzNotificationService } from 'ng-zorro-antd/notification';
+import { NzSpinModule } from 'ng-zorro-antd/spin';
 
 @Component({
   selector: 'meu-login',
@@ -30,19 +32,22 @@ import { Router } from '@angular/router';
     NzCheckboxModule,
     NzAlertModule,
     NzFormModule,
+    NzSpinModule,
     ReactiveFormsModule,
   ],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class LoginComponent implements OnInit {
+  isLoggingIn: boolean = false;
   passwordVisible: boolean = false;
   errorMsg: string = "";
   signInFormGroup: FormGroup;
-  // isEdit: boolean = false;
   constructor(
     private _fb: FormBuilder,
     private _authService: AuthService,
-    private _router: Router
+    private _router: Router,
+    private _cdr: ChangeDetectorRef,
+    private _notifcation: NzNotificationService
   ) {
     this.signInFormGroup = this._fb.group({
       username: ['', [Validators.required, validateUsername]],
@@ -66,6 +71,7 @@ export class LoginComponent implements OnInit {
       return;
     }
     this.signInFormGroup.markAllAsTouched();
+    this.isLoggingIn = true;
     this._authService.loginPost(data)
       .pipe(
         tap((response: ResponseResult<Login.Response>) => {
@@ -74,19 +80,27 @@ export class LoginComponent implements OnInit {
         catchError((error: ResponseResult<any>) => {
           this.onError(error);
           return of(null);
+        }),
+        finalize(() => {
+            this.isLoggingIn = false;
+            this._cdr.markForCheck();
         })
       )
       .subscribe();
   }
 
   onSuccess(response: ResponseResult<Login.Response>) {
-    console.log(response.responseData?.token);
     localStorage.setItem("token", response.responseData?.token ?? "");
     localStorage.setItem("role", response.responseData?.role ?? "");
+    this._notifcation.create(
+      'success',
+      'Login successfully!',
+      ''
+    );
     this._router.navigate(['/home']);
   }
 
   onError(error: ResponseResult<any>) {
-
+    this.errorMsg = "Invalid username or password!";
   }
 }

src/app/+shell/feature/shell.routes.ts

 import { Routes } from '@angular/router';
 import { LayoutComponent } from '../ui/layout.component';
-import { AuthGuard } from '../../+login/data-access/guard/auth.guard';
 import { AdminGuard } from '../../+login/data-access/guard/admin.guard';
-import { JobComponent } from '../../+job/feature/job.component';
 import { LoginGuard } from '../../+login/data-access/guard/login.guard';
 
 export const shellRoutes: Routes = [

src/app/+shell/ui/components/footer/feature/footer.component.html

-<nz-footer>
-    <h1>This is footer</h1>
+<nz-footer class="tw-min-h-48 tw-bg-white">
+    <div class="tw-w-full tw-grid tw-grid-cols-1 md:tw-grid-cols-2 xl:tw-grid-cols-3">
+        <div>
+            <p class="tw-text-lg tw-font-semibold">Text</p>
+            <p>Text text text</p>
+            <p>Text text text</p>
+            <p>Text text text</p>
+            <p>Text text text</p>
+            <p>Text text text</p>
+        </div>
+        <div>
+            <p class="tw-text-lg tw-font-semibold">Text</p>
+            <p>Text text text</p>
+            <p>Text text text</p>
+            <p>Text text text</p>
+            <p>Text text text</p>
+            <p>Text text text</p>
+        </div>
+        <div>
+            <p class="tw-text-lg tw-font-semibold">Text</p>
+            <p>Text text text</p>
+            <p>Text text text</p>
+            <p>Text text text</p>
+            <p>Text text text</p>
+            <p>Text text text</p>
+        </div>
+        <div class="tw-col-span-full tw-text-center tw-pt-6">
+            <p class="tw-opacity-50">2024 Copyright ... Angular</p>
+        </div>
+    </div>
 </nz-footer>
\ No newline at end of file

src/app/+shell/ui/layout.component.ts

-import { CommonModule, DatePipe } from '@angular/common';
+import { CommonModule } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   Component,