update: refactored

src/app/+admin/management/job/data-access/model/job-manager.model.ts

-export namespace Jobs {
-    export type Job = {
-        id:            null | string;
+export namespace JobApi {
+    export interface Response {
+        id:            string;
         type:          string;
         created_at:    string;
         company:       string;
@@ -13,21 +13,7 @@ export namespace Jobs {
         url?:          string;
     }
 
-    export interface GetResponse {
-        items: Job[];
-        total: number
-    }
-
-    export type GetRequest = {
-        
-    }
-
-    export interface Response {
-        newItem: Job
-    }
-
-    export type Request = {
-        id:            string;
+    export interface Request {
         type:          string;
         created_at:    string;
         company:       string;

src/app/+admin/management/job/data-access/service/job-manager.service.ts

 import { HttpClient } from "@angular/common/http";
 import { Injectable } from "@angular/core";
-import { Jobs } from "../model/job-manager.model";
+import { JobApi } from "../model/job-manager.model";
 import { ResponseResult, Rows } from "../../../../../shared/data-access/interface/response.type";
 
 @Injectable({
@@ -10,7 +10,7 @@ export class JobManagerService {
     constructor(private _http: HttpClient) {}
 
     jobsGet(pageIndex: number = 1, pageSize: number = 5) {
-        return this._http.get<ResponseResult<Rows<Jobs.Job>>>('jobs', { 
+        return this._http.get<ResponseResult<Rows<JobApi.Response>>>('jobs', { 
             params: {
                 page: pageIndex,
                 take: pageSize
@@ -18,17 +18,15 @@ export class JobManagerService {
         });
     }
 
-    jobsPost(request: Jobs.Request) {
-        return this._http.post<ResponseResult<Jobs.Response>>('jobs', request);
+    jobsPost(request: JobApi.Request) {
+        return this._http.post<ResponseResult<JobApi.Request>>('jobs', request);
     }
 
-    jobsPut(request: Jobs.Request) {
-        return this._http.put<ResponseResult<Jobs.Response>>('jobs', request);
+    jobsPut(request: JobApi.Request) {
+        return this._http.put<ResponseResult<JobApi.Request>>('jobs', request);
     }
 
-    jobsDelete(request: Jobs.Request) {
-        return this._http.delete<ResponseResult<Jobs.Response>>('jobs', {
-            body: request
-        });
+    jobsDelete(id: number) {
+        return this._http.delete<ResponseResult<JobApi.Request>>('jobs');
     }
 }
\ No newline at end of file

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

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+    selector: 'job-form',
+    standalone: true,
+    template: `
+    `
+})
+
+export class JobFormComponent implements OnInit {
+    isHidden: boolean = true;
+    constructor() { }
+
+    ngOnInit() { }
+}
\ No newline at end of file

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

@@ -5,7 +5,7 @@ import { CommonModule } from '@angular/common';
 import { JobManagerService } from '../data-access/service/job-manager.service';
 import { catchError, of, tap } from 'rxjs';
 import { ResponseResult, Rows } from '../../../../shared/data-access/interface/response.type';
-import { Jobs } from '../data-access/model/job-manager.model';
+import { JobApi } from '../data-access/model/job-manager.model';
 import { NzButtonModule } from 'ng-zorro-antd/button';
 
 @Component({
@@ -15,38 +15,49 @@ import { NzButtonModule } from 'ng-zorro-antd/button';
         CommonModule,
         NzLayoutModule,
         NzTableModule,
-        NzButtonModule
+        NzButtonModule,
     ],
+    styles: `
+        nz-table[_ngcontent-jjj-c198] nz-pagination[_ngcontent-jjj-c198] {
+            justify-content: center;
+        }
+    `,
     template: `
         <nz-content class="tw-my-3">
-            <button nz-button nzType="primary">Create new job</button>
             <nz-table 
                 #rowTable
                 [nzData]="jobsList"
                 [nzPageSize]="5"
                 nzShowPagination
                 nzShowSizeChanger
+                
                 [nzPageSizeOptions]="[5, 10, 25, 50, 100]"
                 class="tw-my-3"
                 >
                 <thead>
                     <tr>
-                        <th class="tw-text-start">
+                        <th>
+                            Ord.
+                        </th>
+                        <th>
                             Title
                         </th>
-                        <th class="tw-text-start">
+                        <th>
                             Company
                         </th>
-                        <th class="tw-text-start">
+                        <th>
                             Created at
                         </th>
-                        <th class="tw-text-start">
+                        <th>
                             Actions
                         </th>
                     </tr>
                 </thead>
                 <tbody>
-                    <tr *ngFor="let job of rowTable.data" class="tw-border-b">
+                    <tr *ngFor="let job of rowTable.data; let idx = index" class="tw-border-b">
+                        <td>
+                            <p> {{ rowTable.nzPageSize * (rowTable.nzPageIndex - 1) + idx }}</p>
+                        </td>
                         <td>
                             <p>{{ job.title }}</p>
                         </td>
@@ -71,7 +82,7 @@ export class JobListComponent implements OnInit {
 
     pageIndex: number = 1;
     pageSize: number = 999;
-    jobsList: Jobs.Job[] = [];
+    jobsList: JobApi.Response[] = [];
     @Output() pageIndexChange: EventEmitter<number> = new EventEmitter<number>;
 
     constructor(private _service: JobManagerService, private _cdr: ChangeDetectorRef) { }
@@ -82,7 +93,7 @@ export class JobListComponent implements OnInit {
     getAllJobs(pageIndex: number = 1, pageSize: number = 5) {
         this._service.jobsGet(pageIndex, pageSize)
             .pipe(
-                tap((response: ResponseResult<Rows<Jobs.Job>>) => {
+                tap((response: ResponseResult<Rows<JobApi.Response>>) => {
                     this.jobsList = response.responseData?.rows || [];
                     console.log(this.jobsList);
                     this._cdr.markForCheck();

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

+import { Component, OnInit } from '@angular/core';
+import { JobListComponent } from './job-list.component';
+import { NzButtonModule } from 'ng-zorro-antd/button';
+import { JobFormComponent } from './job-form.component';
+
+@Component({
+    selector: 'job-parent',
+    standalone: true,
+    imports: [
+        JobListComponent,
+        JobFormComponent,
+        NzButtonModule
+    ],
+    template: `
+    <h1 class="tw-text-center tw-text-3xl tw-font-semibold tw-my-3">Jobs</h1>
+    <div class="tw-w-full tw-grid tw-justify-items-end">
+        <button nz-button nzType="primary">Create new job</button>
+    </div>
+    <job-form></job-form>
+    <job-list></job-list>
+    `
+})
+
+export class JobComponent implements OnInit {
+    constructor() { }
+    ngOnInit() { }
+}
\ No newline at end of file

src/app/+admin/management/job/job-manager.routes.ts

@@ -4,7 +4,7 @@ const JOB_MANANGER_ROUTES: Route[] = [
     {
         path: '',
         loadComponent: () =>
-            import('./feature/job-list.component').then((m) => m.JobListComponent),
+            import('./feature/job.component').then((m) => m.JobComponent),
     }
 ]
 export default JOB_MANANGER_ROUTES
\ No newline at end of file

src/styles.scss

@@ -23,3 +23,6 @@ body {
   margin: 0;
   font-family: Roboto, "Helvetica Neue", sans-serif;
 }
+.ant-table-pagination {
+  justify-content: center !important;
+}
\ No newline at end of file