update

src/app/+admin/layout/feature/ui/components/header/feature/header.component.html

 <nz-layout>
     <nz-header>
-        <img src="https://yt3.googleusercontent.com/y4J_Fs5ksRlxx6_LzT1VKxVqH_T8Vyn_RN_YYgLJhuMzBS5qxTgm7NlEcMkQd3hgCpfWtYcEUg=s900-c-k-c0x00ffffff-no-rj" class="tw-border tw-rounded-full tw-w-10 tw-h-10 tw-mt-3 tw-float-left tw-me-6">
+        <img src="https://yt3.googleusercontent.com/y4J_Fs5ksRlxx6_LzT1VKxVqH_T8Vyn_RN_YYgLJhuMzBS5qxTgm7NlEcMkQd3hgCpfWtYcEUg=s900-c-k-c0x00ffffff-no-rj" class="tw-border tw-rounded-full tw-w-10 tw-h-10 tw-mt-3 tw-float-left tw-me-6 tw-cursor-pointer" routerLink="/">
       <ul nz-menu nzTheme="dark" nzMode="horizontal" class="header-menu">
         <li nz-menu-item nzSelected>Management</li>
-        <li nz-menu-item>Statistics</li>
-        <li nz-menu-item>Configurations</li>
       </ul>
     </nz-header>
     <nz-layout>
@@ -13,23 +11,6 @@
           <li nz-submenu nzOpen nzIcon="user" nzTitle="Management">
             <ul>
               <li nz-menu-item routerLink="/admin/jobs" routerLinkActive="active">Jobs</li>
-              <li nz-menu-item>Business</li>
-            </ul>
-          </li>
-          <li nz-submenu nzTitle="subnav 2" nzIcon="laptop">
-            <ul>
-              <li nz-menu-item>option5</li>
-              <li nz-menu-item>option6</li>
-              <li nz-menu-item>option7</li>
-              <li nz-menu-item>option8</li>
-            </ul>
-          </li>
-          <li nz-submenu nzTitle="subnav 3" nzIcon="notification">
-            <ul>
-              <li nz-menu-item>option9</li>
-              <li nz-menu-item>option10</li>
-              <li nz-menu-item>option11</li>
-              <li nz-menu-item>option12</li>
             </ul>
           </li>
         </ul>

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

@@ -9,7 +9,7 @@ import { JobApi } from '../data-access/model/job-manager.model';
 import { NzButtonModule } from 'ng-zorro-antd/button';
 import { NzModalModule } from 'ng-zorro-antd/modal';
 import { NzPaginationModule } from 'ng-zorro-antd/pagination';
-import { FormBuilder, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
+import { FormBuilder, FormGroup, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
 import { NzFormModule } from 'ng-zorro-antd/form';
 import { NzNotificationService } from 'ng-zorro-antd/notification';
 
@@ -24,7 +24,8 @@ import { NzNotificationService } from 'ng-zorro-antd/notification';
         NzModalModule,
         NzPaginationModule,
         ReactiveFormsModule,
-        NzFormModule
+        NzFormModule,
+        FormsModule
     ],
     styles: `
         nz-table[_ngcontent-jjj-c198] nz-pagination[_ngcontent-jjj-c198] {
@@ -182,6 +183,7 @@ import { NzNotificationService } from 'ng-zorro-antd/notification';
             </nz-table>
         </nz-content>
         <div class="tw-w-full tw-grid tw-justify-items-center tw-my-3">
+      <div class="tw-flex tw-flex-row tw-gap-x-6">
       <nz-pagination
         (nzPageIndexChange)="onPageIndexChange($event)"
         [nzPageIndex]="pageIndex"
@@ -189,6 +191,17 @@ import { NzNotificationService } from 'ng-zorro-antd/notification';
         [nzTotal]="jobsList?.itemCount || 0 * 10"
       >
       </nz-pagination>
+        <div class="tw-my-auto">
+            <label>Item per page</label>
+            <select class="tw-h-8 tw-border tw-ms-3" [(ngModel)]="pageSize" (change)="onPageSizeChanged()">
+                    <option value="5">5</option>
+                    <option value="10">10</option>
+                    <option value="25">25</option>
+                    <option value="50">50</option>
+                    <option value="100">100</option>
+            </select>
+        </div>
+      </div>
     </div>
     `,
     changeDetection: ChangeDetectionStrategy.OnPush
@@ -254,7 +267,13 @@ export class JobListComponent implements OnInit {
 
     onPageIndexChange(index: number) {
         this.pageIndex = index;
-        this.getAllJobs(index, 5);
+        this.getAllJobs(this.pageIndex, this.pageSize);
+    }
+
+    onPageSizeChanged() {
+        this.pageIndex = 1;
+        this.getAllJobs(this.pageIndex, this.pageSize);
+        console.log(this.pageSize)
     }
 
     showConfirmModal(id: string) {
@@ -302,9 +321,19 @@ export class JobListComponent implements OnInit {
         this._service.jobsPut(this.edittingId, data)
             .pipe(
                 tap((response: ResponseResult<JobApi.Request>) => {
+                    this.createNotification(
+                        'success',
+                        'Success!',
+                        'You have updated job successfully!'
+                    )
                     this.getAllJobs();
                 }),
                 catchError((err) => {
+                    this.createNotification(
+                        'error',
+                        'Error!',
+                        'An error has occurred! Please try later!'
+                    )
                     return of(null);
                 })
             )
@@ -329,7 +358,6 @@ export class JobListComponent implements OnInit {
                         company_logo: response.responseData?.company_logo,
                         url: response.responseData?.url,
                     });
-                    console.log(this.jobEdittingFormGroup.value);
                 }),
                 catchError((err) => {
                     return of(null);

src/app/+job/feature/+job_detail/job-detail.component.ts

@@ -9,7 +9,6 @@ import { Jobs } from '../../data-access/model/job.model';
     selector: 'job-detail',
     standalone: true,
     template: `
-    <div class="tw-max-w-4xl tw-mx-auto tw-my-3">
         <div class="tw-w-full tw-gap-y-2 tw-flex tw-flex-col">
             <p class="tw-text-2xl tw-font-bold tw-border-b">{{ job?.title }}</p>
             <p> {{ job?.created_at }} by {{ job?.company }} </p>
@@ -40,7 +39,6 @@ import { Jobs } from '../../data-access/model/job.model';
                 </div>
             </div>
         </div>
-    </div>
     `,
     changeDetection: ChangeDetectionStrategy.OnPush,
 })

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

@@ -33,7 +33,7 @@ import { NzLayoutModule } from 'ng-zorro-antd/layout';
       <nz-layout>
       <meu-header></meu-header>
       <div class="tw-relative tw-min-h-[92dvh]">
-        <div class="tw-max-w-5xl tw-bg-white tw-mx-auto">
+        <div class="tw-max-w-5xl tw-bg-white tw-mx-auto tw-py-10 tw-px-3 tw-shadow-xl">
           <router-outlet></router-outlet>
         </div>
       </div>