ทะเบียนพนักงาน

src/app/components/company-components/employee-registration/employee-registration.component.scss

-/* สไตล์ของแถบเมนู */
-.nav-tabs {
-    display: flex;
-    border-bottom: 2px solid #ccc; /* เส้นใต้ */
-    border-top: 2px solid #ccc;
-    width: 100%;
-    cursor: pointer;
-    border-top: 2px solid #ccc;
-}
-
-.nav-item {
-    list-style: none;
-    margin-right: 40px; /* ช่องว่างระหว่างเมนู */
-
-}
-
-.nav-link {
-    text-decoration: none;
-    padding: 10px 20px;
-    display: inline-block;
-    font-size: medium;
-    text-align: left;
-    padding-left: 0px;
-    padding-right: 0px;
-}
-
-.nav-link:hover {
-    background-color: #f0f0f0; /* เปลี่ยนสีเมื่อ hover */
-}
-
-.nav-link.active {
-    color: #569bf5; /* สีตัวอักษรในสถานะ active */
-    font-size: medium;
-    border-bottom: 3.5px solid #569bf5; /* เส้นใต้ */
-}
-
-.tab-content {
-    margin-top: 20px;
-}
-
-.tab-pane.active {
-    display: block;
-}

src/app/components/dashboard/dashboard.module.ts

@@ -120,6 +120,40 @@ import { CompetencytopicService } from 'src/app/shared/services/competencytopic.
 import { AssessmentService } from 'src/app/shared/services/assessment.service';
 import { CompetencycourseService } from 'src/app/shared/services/competencycourse.service';
 import { EmployeeService } from 'src/app/shared/services/employee.service';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatNativeDateModule } from '@angular/material/core';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { DateAdapter, MAT_DATE_FORMATS } from '@angular/material/core';
+import { NativeDateAdapter } from '@angular/material/core';
+import { BranchService } from 'src/app/shared/services/่branch.service';
+import { JobCodeService } from 'src/app/shared/services/่job-code.service';
+
+export const MY_DATE_FORMATS = {
+  parse: {
+    dateInput: 'DD-MM-YYYY',  // รูปแบบที่ใช้สำหรับการแปลงวันที่จาก input
+  },
+  display: {
+    dateInput: 'DD-MM-YYYY',  // รูปแบบที่ใช้ในการแสดงวันที่
+    monthYearLabel: 'MMM YYYY',
+    dateA11yLabel: 'DD-MM-YYYY',
+    monthYearA11yLabel: 'MMMM YYYY',
+  },
+};
+
+export class CustomDateAdapter extends NativeDateAdapter {
+  override format(date: Date, displayFormat: object): string {
+    if (typeof displayFormat === 'string' && displayFormat === 'DD-MM-YYYY') {
+      return `${date.getDate().toString().padStart(2, '0')}/${(date.getMonth() + 1)
+        .toString()
+        .padStart(2, '0')}/${date.getFullYear()}`;
+    } else {
+      return super.format(date, displayFormat);
+    }
+  }
+}
+
 @NgModule({
   declarations: [
     SalesComponent,
@@ -228,6 +262,11 @@ import { EmployeeService } from 'src/app/shared/services/employee.service';
     HttpClientModule,
     FormsModule,
     NgxDaterangepickerMd.forRoot(),
+    MatDatepickerModule,
+    MatNativeDateModule,
+    MatInputModule,
+    MatFormFieldModule,
+    MatIconModule,
   ],
   providers: [
     Bu1Service,
@@ -247,10 +286,14 @@ import { EmployeeService } from 'src/app/shared/services/employee.service';
     AssessmentService,
     CompetencycourseService,
     EmployeeService,
+    JobCodeService,
+    BranchService,
     {
       provide: HTTP_INTERCEPTORS,
       useClass: HttpRequestInterceptor,
       multi: true,
-    },]
+    },
+    { provide: DateAdapter, useClass: CustomDateAdapter },
+    { provide: MAT_DATE_FORMATS, useValue: MY_DATE_FORMATS }]
 })
 export class DashboardModule { }

src/app/shared/model/bank-branch.model.ts

+export interface BankBranchModel {
+    bankId: string
+    branchId: string
+    tdesc: string
+    edesc: string
+}
+export class MyBankBranchModel implements BankBranchModel {
+    bankId: string
+    branchId: string
+    tdesc: string
+    edesc: string
+    constructor(data: Partial<BankBranchModel>) {
+        this.bankId = data.bankId || ""
+        this.branchId = data.branchId || ""
+        this.tdesc = data.tdesc || ""
+        this.edesc = data.edesc || ""
+    }
+}
+

src/app/shared/model/bank.model.ts

+export interface BankModel {
+    bankId: string
+    tdesc: string
+    edesc: string
+    bankCode: string
+}
+export class MyBankModel implements BankModel {
+    bankId: string
+    tdesc: string
+    edesc: string
+    bankCode: string
+    constructor(data: Partial<BankModel>) {
+        this.bankId = data.bankId || ""
+        this.tdesc = data.tdesc || ""
+        this.edesc = data.edesc || ""
+        this.bankCode = data.bankCode || ""
+    }
+}
+

src/app/shared/model/banks.model.ts

+import { BankBranchModel, MyBankBranchModel } from "./bank-branch.model"
+import { BankModel, MyBankModel } from "./bank.model"
+
+export interface BanksModel {
+    employeeId: string
+    lineNo: string
+    accountId: string
+    bank: BankModel
+    bankBranch: BankBranchModel
+}
+export class MyBanksModel implements BanksModel {
+    employeeId: string
+    lineNo: string
+    accountId: string
+    bank: BankModel
+    bankBranch: BankBranchModel
+    constructor(data: Partial<BanksModel>) {
+        this.employeeId = data.employeeId || ""
+        this.lineNo = data.lineNo || ""
+        this.accountId = data.accountId || ""
+        this.bank = new MyBankModel(data.bank || {})
+        this.bankBranch = new MyBankBranchModel(data.bankBranch || {})
+    }
+}
+

src/app/shared/model/boss.model.ts

+import { JobCodeModel, MyJobCodeModel } from "./job-code.model";
+import { MyPrefixModel, PrefixModel } from "./prefix.model";
+
+export interface BossModel {
+    employeeId: string
+    prefix: PrefixModel
+    fname: string
+    lname: string
+    efname: string
+    elname: string
+    empType: string
+    empPosition: string
+    job: JobCodeModel
+    thFullName: string
+    engFullName: string
+}
+
+export class MyBossModel implements BossModel {
+    employeeId: string
+    prefix: PrefixModel
+    fname: string
+    lname: string
+    efname: string
+    elname: string
+    empType: string
+    empPosition: string
+    job: JobCodeModel
+    thFullName: string
+    engFullName: string
+    constructor(data: Partial<BossModel>) {
+        this.employeeId = data.employeeId || ""
+        this.prefix = new MyPrefixModel(data.prefix || {})
+        this.fname = data.fname || ""
+        this.lname = data.lname || ""
+        this.efname = data.efname || ""
+        this.elname = data.elname || ""
+        this.empType = data.empType || ""
+        this.empPosition = data.empPosition || ""
+        this.job = new MyJobCodeModel(data.job || {})
+        this.thFullName = data.thFullName || ""
+        this.engFullName = data.engFullName || ""
+    }
+}
+

src/app/shared/model/costcenter.model.ts

+export interface CostcenterModel{
+    costcenterId: string
+    tdesc: string
+    edesc: string
+    mainCostCenterCode: string
+}
+export class MyCostcenterModel implements CostcenterModel {
+    costcenterId: string
+    tdesc: string
+    edesc: string
+    mainCostCenterCode: string
+    constructor(data: Partial<CostcenterModel>) {
+        this.costcenterId = data.costcenterId || ""
+        this.tdesc = data.tdesc || ""
+        this.edesc = data.edesc || ""
+        this.mainCostCenterCode = data.mainCostCenterCode || ""
+    }
+}
+

src/app/shared/model/employee-type.model.ts

-export interface EmpTypeModel{
+export interface EmpTypeModel {
     [x: string]: any;
     codeId: string;
     tdesc: string;

src/app/shared/model/employee.model.ts

 import { AgeModel, MyAgeModel } from "./age.model"
+import { BanksModel, MyBanksModel } from "./banks.model"
+import { BossModel, MyBossModel } from "./boss.model"
+import { BranchModel, MyBranchModel } from "./branch.model"
+import { Bu1Model, MyBu1Model } from "./bu1.model"
+import { Bu2Model, MyBu2Model } from "./bu2.model"
+import { Bu3Model, MyBu3Model } from "./bu3.model"
+import { Bu4Model, MyBu4Model } from "./bu4.model"
+import { Bu5Model, MyBu5Model } from "./bu5.model"
+import { Bu6Model, MyBu6Model } from "./bu6.model"
+import { Bu7Model, MyBu7Model } from "./bu7.model"
+import { CostcenterModel, MyCostcenterModel } from "./costcenter.model"
+import { EmpGroupModel, MyEmpGroupModel } from "./emp-group.model"
+import { EmpTypeModel, MyEmpTypeModel } from "./employee-type.model"
 import { JobCodeModel, MyJobCodeModel } from "./job-code.model"
 import { MyNationalModel, NationalModel } from "./national.model"
 import { MyNationalityModel, NationalityModel } from "./nationality.model"
@@ -6,7 +19,10 @@ import { MyPLModel, PLModel } from "./pl.model"
 import { MyPositionModel, PositionModel } from "./position.model"
 import { MyPrefixModel, PrefixModel } from "./prefix.model"
 import { MyReligionModel, ReligionModel } from "./religion.model"
+import { MySalatypeModel, SalatypeModel } from "./salatype.model"
 import { MyStatusModel, StatusModel } from "./status.model"
+import { MyTime0Model, Time0Model } from "./time0.model"
+import { MyWorkareaModel, WorkareaModel } from "./workarea.model"
 
 export interface EmployeeModel {
     employeeId: string
@@ -46,6 +62,54 @@ export interface EmployeeModel {
     position: PositionModel
     jobCode: JobCodeModel
     personalLevel: PLModel
+    companyId: string
+    idExpireDate: string
+    passportNo: string
+    passportExpireDate: string
+    bossId: string
+    boss: BossModel
+    bu1: Bu1Model
+    bu2: Bu2Model
+    bu3: Bu3Model
+    bu4: Bu4Model
+    bu5: Bu5Model
+    bu6: Bu6Model
+    bu7: Bu7Model
+    empGroup: EmpGroupModel
+    firstHireDate: string
+    startDate: string
+    ageWork: AgeModel
+    empType: EmpTypeModel
+    time0: Time0Model
+    publicHoliday: string
+    proDate: string
+    proEvery: string
+    approveDate: string
+    workarea: WorkareaModel
+    telExt: string
+    costcenter: CostcenterModel
+    branch: BranchModel
+    zeemeLogOnName: string
+    salatype: SalatypeModel
+    effSalatype: string
+    salary: string
+    empEvery: string
+    curchgincDate: string
+    receiverBankNo: string
+    receiverBank: string
+    receiverBankBranch: string
+    banks: BanksModel[]
+    taxTable: string
+    compenTaxTable: string
+    idTax: string
+    calTax: string
+    fixTax: string
+    calSoc: string
+    calPvf: string
+    taxMethodAct: string
+    ssoFlag: string
+    thFullName: string
+    engFullName: string
 }
 
 export class MyEmployeeModel implements EmployeeModel {
@@ -86,6 +150,54 @@ export class MyEmployeeModel implements EmployeeModel {
     position: PositionModel
     jobCode: JobCodeModel
     personalLevel: PLModel
+    companyId: string
+    idExpireDate: string
+    passportNo: string
+    passportExpireDate: string
+    bossId: string
+    boss: BossModel
+    bu1: Bu1Model
+    bu2: Bu2Model
+    bu3: Bu3Model
+    bu4: Bu4Model
+    bu5: Bu5Model
+    bu6: Bu6Model
+    bu7: Bu7Model
+    empGroup: EmpGroupModel
+    firstHireDate: string
+    startDate: string
+    ageWork: AgeModel
+    empType: EmpTypeModel
+    time0: Time0Model
+    publicHoliday: string
+    proDate: string
+    proEvery: string
+    approveDate: string
+    workarea: WorkareaModel
+    telExt: string
+    costcenter: CostcenterModel
+    branch: BranchModel
+    zeemeLogOnName: string
+    salatype: SalatypeModel
+    effSalatype: string
+    salary: string
+    empEvery: string
+    curchgincDate: string
+    receiverBankNo: string
+    receiverBank: string
+    receiverBankBranch: string
+    banks: BanksModel[]
+    taxTable: string
+    compenTaxTable: string
+    idTax: string
+    calTax: string
+    fixTax: string
+    calSoc: string
+    calPvf: string
+    taxMethodAct: string
+    ssoFlag: string
+    thFullName: string
+    engFullName: string
     constructor(data: Partial<EmployeeModel>) {
         this.employeeId = data.employeeId || ""
         this.prefix = new MyPrefixModel(data.prefix || {})
@@ -124,6 +236,54 @@ export class MyEmployeeModel implements EmployeeModel {
         this.position = new MyPositionModel(data.position || {})
         this.jobCode = new MyJobCodeModel(data.jobCode || {})
         this.personalLevel = new MyPLModel(data.personalLevel || {})
+        this.companyId = data.companyId || ""
+        this.idExpireDate = data.idExpireDate || ""
+        this.passportNo = data.passportNo || ""
+        this.passportExpireDate = data.passportExpireDate || ""
+        this.bossId = data.bossId || ""
+        this.boss = new MyBossModel(data.boss || {})
+        this.bu1 = new MyBu1Model(data.bu1 || {})
+        this.bu2 = new MyBu2Model(data.bu2 || {})
+        this.bu3 = new MyBu3Model(data.bu3 || {})
+        this.bu4 = new MyBu4Model(data.bu4 || {})
+        this.bu5 = new MyBu5Model(data.bu5 || {})
+        this.bu6 = new MyBu6Model(data.bu6 || {})
+        this.bu7 = new MyBu7Model(data.bu7 || {})
+        this.empGroup = new MyEmpGroupModel(data.empGroup || {})
+        this.firstHireDate = data.firstHireDate || ""
+        this.startDate = data.startDate || ""
+        this.ageWork = new MyAgeModel(data.ageWork || {})
+        this.empType = new MyEmpTypeModel(data.empType || {})
+        this.time0 = new MyTime0Model(data.time0 || {})
+        this.publicHoliday = data.publicHoliday || ""
+        this.proDate = data.proDate || ""
+        this.proEvery = data.proEvery || ""
+        this.approveDate = data.approveDate || ""
+        this.workarea = new MyWorkareaModel(data.workarea || {})
+        this.telExt = data.telExt || ""
+        this.costcenter = new MyCostcenterModel(data.costcenter || {})
+        this.branch = new MyBranchModel(data.branch || {})
+        this.zeemeLogOnName = data.zeemeLogOnName || ""
+        this.salatype = new MySalatypeModel(data.salatype || {})
+        this.effSalatype = data.effSalatype || ""
+        this.salary = data.salary || ""
+        this.empEvery = data.empEvery || ""
+        this.curchgincDate = data.curchgincDate || ""
+        this.receiverBankNo = data.receiverBankNo || ""
+        this.receiverBank = data.receiverBank || ""
+        this.receiverBankBranch = data.receiverBankBranch || ""
+        this.banks = data.banks?.map(x => new MyBanksModel(x)) || []
+        this.taxTable = data.taxTable || ""
+        this.compenTaxTable = data.compenTaxTable || ""
+        this.idTax = data.idTax || ""
+        this.calTax = data.calTax || ""
+        this.fixTax = data.fixTax || ""
+        this.calSoc = data.calSoc || ""
+        this.calPvf = data.calPvf || ""
+        this.taxMethodAct = data.taxMethodAct || ""
+        this.ssoFlag = data.ssoFlag || ""
+        this.thFullName = data.thFullName || ""
+        this.engFullName = data.engFullName || ""
     }
 }
 

src/app/shared/model/job-code.model.ts

@@ -30,6 +30,8 @@ export interface JobCodeModel {
     eexperience: string
     eresponsibility: string
     equalification: string
+    jobObjective: string
+    supervisor: string
 }
 
 export class MyJobCodeModel implements JobCodeModel {
@@ -54,6 +56,8 @@ export class MyJobCodeModel implements JobCodeModel {
     eexperience: string
     eresponsibility: string
     equalification: string
+    jobObjective: string
+    supervisor: string
     constructor(data: Partial<JobCodeModel>) {
         this.jobcodeId = data.jobcodeId || ""
         this.tdesc = data.tdesc || ""
@@ -76,6 +80,8 @@ export class MyJobCodeModel implements JobCodeModel {
         this.eexperience = data.eexperience || ""
         this.eresponsibility = data.eresponsibility || ""
         this.equalification = data.equalification || ""
+        this.jobObjective = data.jobObjective || ""
+        this.supervisor = data.supervisor || ""
     }
 }
 

src/app/shared/model/page.model.ts

+import { MyPageableModel, PageableModel } from "./pageable.model"
+import { MySortModel, SortModel } from "./sort.model"
+
+export interface PageModel {
+    content: any
+    pageable: PageableModel
+    totalElements: number
+    totalPages: number
+    last: boolean
+    size: number
+    number: number
+    sort: SortModel
+    numberOfElements: number
+    first: boolean
+    empty: boolean
+}
+
+export class MyPageModel implements PageModel {
+    content: any
+    pageable: PageableModel
+    totalElements: number
+    totalPages: number
+    last: boolean
+    size: number
+    number: number
+    sort: SortModel
+    numberOfElements: number
+    first: boolean
+    empty: boolean
+    constructor(data: Partial<PageModel>) {
+        this.content = data.content
+        this.pageable = new MyPageableModel(data.pageable || {})
+        this.totalElements = data.totalElements ?? 0
+        this.totalPages = data.totalPages ?? 0
+        this.last = data.last || false
+        this.size = data.size ?? 0
+        this.number = data.number ?? 0
+        this.sort = new MySortModel(data.sort || {})
+        this.numberOfElements = data.numberOfElements ?? 0
+        this.first = data.first || false
+        this.empty = data.empty || false
+    }
+}
+

src/app/shared/model/pageable.model.ts

+import { MySortModel, SortModel } from "./sort.model"
+
+export interface PageableModel {
+    sort: SortModel
+    offset: number
+    pageNumber: number
+    pageSize: number
+    paged: boolean
+    unpaged: boolean
+}
+
+export class MyPageableModel implements PageableModel {
+    sort: SortModel
+    offset: number
+    pageNumber: number
+    pageSize: number
+    paged: boolean
+    unpaged: boolean
+    constructor(data: Partial<PageableModel>) {
+        this.sort = new MySortModel(data.sort || {})
+        this.offset = data.offset ?? 0
+        this.pageNumber = data.pageNumber ?? 0
+        this.pageSize = data.pageSize ?? 0
+        this.paged = data.paged || false
+        this.unpaged = data.unpaged || false
+    }
+}
+

src/app/shared/model/province.model.ts

+export interface ProvinceModel {
+    provinceId: string
+    longTname: string
+    longEname: string
+}
+export class MyProvinceModel implements ProvinceModel {
+    provinceId: string
+    longTname: string
+    longEname: string
+    constructor(data: Partial<ProvinceModel>) {
+        this.provinceId = data.provinceId || ""
+        this.longTname = data.longTname || ""
+        this.longEname = data.longEname || ""
+    }
+}
+

src/app/shared/model/salatype.model.ts

+export interface SalatypeModel {
+    codeId: string
+    tdesc: string
+    edesc: string
+}
+export class MySalatypeModel implements SalatypeModel {
+    codeId: string
+    tdesc: string
+    edesc: string
+    constructor(data: Partial<SalatypeModel>) {
+        this.codeId = data.codeId || ""
+        this.tdesc = data.tdesc || ""
+        this.edesc = data.edesc || ""
+    }
+}
+

src/app/shared/model/sort.model.ts

+export interface SortModel {
+    empty: boolean
+    unsorted: boolean
+    sorted: boolean
+}
+
+
+export class MySortModel implements SortModel {
+    empty: boolean
+    unsorted: boolean
+    sorted: boolean
+    constructor(data: Partial<SortModel>) {
+        this.empty = data.empty || false
+        this.unsorted = data.unsorted || false
+        this.sorted = data.sorted || false
+    }
+}
+

src/app/shared/model/time0.model.ts

+export interface Time0Model {
+    time0id: string
+    tdesc: string
+    edesc: string
+    stickTm: string
+    hourD: number
+}
+export class MyTime0Model implements Time0Model {
+    time0id: string
+    tdesc: string
+    edesc: string
+    stickTm: string
+    hourD: number
+    constructor(data: Partial<Time0Model>) {
+        this.time0id = data.time0id || ""
+        this.tdesc = data.tdesc || ""
+        this.edesc = data.edesc || ""
+        this.stickTm = data.stickTm || ""
+        this.hourD = data.hourD ?? 0
+    }
+}
+

src/app/shared/model/workarea.model.ts

+import { MyProvinceModel, ProvinceModel } from "./province.model"
+
+export interface WorkareaModel {
+    workareaId: string
+    tdesc: string
+    edesc: string
+    store: string
+    province: ProvinceModel
+}
+export class MyWorkareaModel implements WorkareaModel {
+    workareaId: string
+    tdesc: string
+    edesc: string
+    store: string
+    province: ProvinceModel
+    constructor(data: Partial<WorkareaModel>) {
+        this.workareaId = data.workareaId || ""
+        this.tdesc = data.tdesc || ""
+        this.edesc = data.edesc || ""
+        this.store = data.store || ""
+        this.province = new MyProvinceModel(data.province || {})
+    }
+}
+

src/app/shared/services/employee.service.ts

 import { HttpClient, HttpHeaders } from '@angular/common/http';
 import { Injectable } from '@angular/core';
-import { Observable } from 'rxjs';
+import { expand, map, Observable, reduce } from 'rxjs';
 import { environment } from 'src/environments/environment';
 import { EmployeeModel } from '../model/employee.model';
+import { AlertModel } from '../model/alert.model';
+import { PageModel } from '../model/page.model';
 @Injectable({
   providedIn: 'root'
 })
@@ -11,25 +13,37 @@ export class EmployeeService {
   urlApi = environment.baseUrl + this.api
   constructor(private http: HttpClient) {
   }
-  getPageList(): Observable<EmployeeModel[]> {
-    return this.http.get<EmployeeModel[]>(this.urlApi + "/profiles")
+  getPageList(page: string, size: string): Observable<PageModel> {
+    return this.http.get<PageModel>(this.urlApi + "/lists?page=" + page + "&size=" + size)
   }
+  getPageListAll(): Observable<EmployeeModel[]> {
+    return this.http.get<PageModel>(`${this.urlApi}/lists?page=0&size=100`).pipe(
+      expand(response =>
+        !response.last
+          ? this.http.get<PageModel>(`${this.urlApi}/lists?page=${response.pageable.pageNumber + 1}&size=100`)
+          : []
+      ),
+      map(response => response.content),
+      reduce((acc: EmployeeModel[], data) => [...acc, ...data], [])
+    );
+  }
+
   getById(employeeId: string): Observable<EmployeeModel> {
     return this.http.get<EmployeeModel>(this.urlApi + "/profile?employeeId=" + employeeId)
   }
-  add(body: EmployeeModel) {
-    return this.http.post(this.urlApi + '/profile-create', body)
+  add(body: EmployeeModel): Observable<AlertModel> {
+    return this.http.post<AlertModel>(this.urlApi + '/profile-create', body)
   }
-  update(body: EmployeeModel) {
-    return this.http.post(this.urlApi + '/profile-update', body)
+  update(body: EmployeeModel): Observable<AlertModel> {
+    return this.http.post<AlertModel>(this.urlApi + '/profile-update', body)
   }
-  delete(body: EmployeeModel) {
+  delete(body: EmployeeModel): Observable<AlertModel> {
     const options = {
       headers: new HttpHeaders({
         "Content-Type": "application/json",
       }),
       body: body
     };
-    return this.http.delete(this.urlApi, options)
+    return this.http.delete<AlertModel>(this.urlApi, options)
   }
 }

src/app/shared/services/่branch.service.ts

+import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+import { environment } from 'src/environments/environment';
+import { BranchModel } from '../model/branch.model';
+
+@Injectable({
+    providedIn: 'root'
+})
+export class BranchService {
+    api = "/branch"
+    urlApi = environment.baseUrl + this.api
+    constructor(private http: HttpClient) {
+    }
+    getList(): Observable<BranchModel[]> {
+        return this.http.get<BranchModel[]>(this.urlApi + "/lists")
+    }
+    getById(branchId: string): Observable<BranchModel> {
+        return this.http.get<BranchModel>(this.urlApi + "/" + branchId)
+    }
+    // post(body: BranchModel): Observable<AlertModel> {
+    //     return this.http.post<AlertModel>(this.urlApi, body)
+    // }
+    // delete(body: BranchModel | BranchModel[]): Observable<AlertModel> {
+    //     const options = {
+    //         headers: new HttpHeaders({
+    //             "Content-Type": "application/json",
+    //         }),
+    //         body: body
+    //     };
+    //     return this.http.delete<AlertModel>(this.urlApi, options)
+    // }
+}

src/app/shared/services/่job-code.service.ts

+import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+import { environment } from 'src/environments/environment';
+import { JobCodeModel } from '../model/job-code.model';
+
+@Injectable({
+    providedIn: 'root'
+})
+export class JobCodeService {
+    api = "/jobcode"
+    urlApi = environment.baseUrl + this.api
+    constructor(private http: HttpClient) {
+    }
+    getList(): Observable<JobCodeModel[]> {
+        return this.http.get<JobCodeModel[]>(this.urlApi + "/lists")
+    }
+    getById(jobcodeId: string): Observable<JobCodeModel> {
+        return this.http.get<JobCodeModel>(this.urlApi + "/" + jobcodeId)
+    }
+    // post(body: JobCodeModel): Observable<AlertModel> {
+    //     return this.http.post<AlertModel>(this.urlApi, body)
+    // }
+    // delete(body: JobCodeModel | JobCodeModel[]): Observable<AlertModel> {
+    //     const options = {
+    //         headers: new HttpHeaders({
+    //             "Content-Type": "application/json",
+    //         }),
+    //         body: body
+    //     };
+    //     return this.http.delete<AlertModel>(this.urlApi, options)
+    // }
+}

src/assets/css/style.css

@@ -5140,6 +5140,10 @@ select option:focus {
   border-top-left-radius: 0.5rem;
   border-top-right-radius: 0.5rem;
 }
+.\!rounded-t-sm {
+  border-top-left-radius: 0.25rem !important;
+  border-top-right-radius: 0.25rem !important;
+}
 .rounded-t-sm {
   border-top-left-radius: 0.25rem;
   border-top-right-radius: 0.25rem;
@@ -24902,3 +24906,13 @@ div:where(.swal2-container) div:where(.swal2-validation-message) {
 .\!\-mt-3 {
   margin-top: -0.75rem !important;
 }
+
+
+.\!rounded-t-none {
+  border-top-left-radius: 0rem  !important;
+  border-top-right-radius: 0rem  !important;
+}
+.rounded-t-none {
+  border-top-left-radius: 0rem;
+  border-top-right-radius: 0rem;
+}
\ No newline at end of file