ยก model myProtal มาใส่ ติดตั้ง package เพิ่ม ## npm i --force ด้วย

package.json

@@ -30,9 +30,17 @@
     "@fortawesome/angular-fontawesome": "^0.14.1",
     "@kolkov/angular-editor": "^3.0.0-beta.0",
     "@ks89/angular-modal-gallery": "^11.1.1",
+    "@ng-bootstrap/ng-bootstrap": "^15.1.1",
     "@ng-select/ng-select": "^12.0.6",
     "@ngx-translate/core": "^15.0.0",
     "@ngx-translate/http-loader": "^8.0.0",
+    "@syncfusion/ej2-angular-base": "^29.2.4",
+    "@syncfusion/ej2-angular-dropdowns": "^29.2.4",
+    "@syncfusion/ej2-angular-grids": "^29.2.4",
+    "@syncfusion/ej2-angular-inputs": "^29.2.4",
+    "@syncfusion/ej2-angular-pivotview": "^29.2.4",
+    "@syncfusion/ej2-angular-charts": "^29.2.4",
+    "@syncfusion/ej2-grids": "^30.1.39",
     "@tailwindcss/forms": "^0.5.7",
     "@types/google.maps": "^3.58.1",
     "@types/googlemaps": "^3.43.3",
@@ -44,9 +52,11 @@
     "date-fns": "^3.3.1",
     "echarts": "^5.4.3",
     "face-api.js": "^0.22.2",
+    "file-saver": "^2.0.5",
     "filepond": "^4.30.6",
     "filepond-plugin-get-file": "^1.1.0",
     "firebase": "^10.7.1",
+    "flatpickr": "^4.6.13",
     "font-awesome": "^4.7.0",
     "i": "^0.3.7",
     "jwt-decode": "^4.0.0",
@@ -91,6 +101,7 @@
     "@angular-devkit/build-angular": "^17.0.5",
     "@angular/cli": "^17.1.1",
     "@angular/compiler-cli": "^17.0.0",
+    "@types/file-saver": "^2.0.7",
     "@types/jasmine": "~5.1.0",
     "@types/react": "^18.2.46",
     "jasmine-core": "~5.1.0",
@@ -103,4 +114,4 @@
     "tailwindcss": "^3.3.2",
     "typescript": "~5.2.2"
   }
-}
+}
\ No newline at end of file

src/app/DPU/common/common.module.ts

@@ -7,6 +7,7 @@ import { QuillModule } from 'ngx-quill';
 export const admin: Routes = [
   {
     path: 'admin', children: [{
+      //////////////MyJob/////////////////
       path: 'home',
       loadComponent: () =>
         import('./home-common/home-common.component').then((m) => m.HomeCommonComponent),
@@ -81,6 +82,12 @@ export const admin: Routes = [
       loadComponent: () =>
         import('./company-department/career-cluster/career-cluster.component').then((m) => m.CareerClusterComponent),
     },
+    //////////////MyPortal/////////////////
+    {
+      path: 'excel-list',
+      loadComponent: () =>
+        import('./myportal/set-excel-reports/excel-list/excel-list.component').then((m) => m.ExcelListComponent),
+    },
     //////////////emp/////////////////
     {
       path: 'emp/department',

src/app/DPU/common/myportal/set-excel-reports/set-excel-reports.component.html

+<p>
+  set-excel-reports works!
+</p>

src/app/DPU/common/myportal/set-excel-reports/set-excel-reports.component.spec.ts

+/* tslint:disable:no-unused-variable */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+
+import { SetExcelReportsComponent } from './set-excel-reports.component';
+
+describe('SetExcelReportsComponent', () => {
+  let component: SetExcelReportsComponent;
+  let fixture: ComponentFixture<SetExcelReportsComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ SetExcelReportsComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SetExcelReportsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/DPU/common/myportal/set-excel-reports/set-excel-reports.component.ts

+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-set-excel-reports',
+  templateUrl: './set-excel-reports.component.html',
+  styleUrls: ['./set-excel-reports.component.css']
+})
+export class SetExcelReportsComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/DPU/models/alert.model.ts

+export interface AlertModel {
+    actionStatus: string
+    fail: boolean
+    memberId: any
+    message: string
+    none: boolean
+    resultObject: any
+    state: string
+    statusCode: number
+    success: boolean
+}
\ No newline at end of file

src/app/DPU/models/excel-portal.model.ts

+import { environment } from "../../../environments/environment"
+
+
+export interface ExcelPortalModel {
+getImg: any
+    approveBy: string
+    approveDate: string
+    approveTime: string
+    dbSupport: string
+    downloadDate: string
+    downloadTime: string
+    dwTime: number
+    engDesc: string
+    engName: string
+    excelId: string
+    fileData: string
+    fileType: string
+    group: ExcelPortalGroupModel
+    isDataGrid: number
+    isPivot: number
+    link1: string
+    referId: string
+    remark: string
+    tags: ExcelPortalTagsModel[]
+    thDesc: string
+    thName: string
+    thumbnail: string
+    uploadBy: string
+    uploadDate: string
+    uploadTime: string
+}
+export class MyExcelPortalModel implements ExcelPortalModel {
+    approveBy: string
+    approveDate: string
+    approveTime: string
+    dbSupport: string
+    downloadDate: string
+    downloadTime: string
+    dwTime: number
+    engDesc: string
+    engName: string
+    excelId: string
+    fileData: string
+    fileType: string
+    group: ExcelPortalGroupModel
+    isDataGrid: number
+    isPivot: number
+    link1: string
+    referId: string
+    remark: string
+    tags: ExcelPortalTagsModel[]
+    thDesc: string
+    thName: string
+    thumbnail: string
+    uploadBy: string
+    uploadDate: string
+    uploadTime: string
+    constructor(data?: Partial<ExcelPortalModel>) {
+        this.approveBy = data?.approveBy || ''
+        this.approveDate = data?.approveDate || ''
+        this.approveTime = data?.approveTime || ''
+        this.dbSupport = data?.dbSupport || ''
+        this.downloadDate = data?.downloadDate || ''
+        this.downloadTime = data?.downloadTime || ''
+        this.dwTime = data?.dwTime ?? 0
+        this.engDesc = data?.engDesc || ''
+        this.engName = data?.engName || ''
+        this.excelId = data?.excelId || ''
+        this.fileData = data?.fileData || ''
+        this.fileType = data?.fileType || ''
+        this.group = new MyExcelPortalGroupModel(data?.group || {})
+        this.isDataGrid = data?.isDataGrid ?? 0
+        this.isPivot = data?.isPivot ?? 0
+        this.link1 = data?.link1 || ''
+        this.referId = data?.referId || ''
+        this.remark = data?.remark || ''
+        this.tags = data?.tags?.map(e => new MyExcelPortalTagsModel(e)) || []
+        this.thDesc = data?.thDesc || ''
+        this.thName = data?.thName || ''
+        this.thumbnail = data?.thumbnail || ''
+        this.uploadBy = data?.uploadBy || ''
+        this.uploadDate = data?.uploadDate || ''
+        this.uploadTime = data?.uploadTime || ''
+    }
+    getImg() {
+        return this.thumbnail ? environment.baseUrl + "files/image/" + this.thumbnail : ''
+    }
+}
+
+export interface ExcelPortalGroupModel {
+    engName: string
+    groupId: string
+    groupType: number
+    thName: string
+}
+export class MyExcelPortalGroupModel implements ExcelPortalGroupModel {
+    engName: string
+    groupId: string
+    groupType: number
+    thName: string
+    constructor(data?: Partial<ExcelPortalGroupModel>) {
+        this.engName = data?.engName || ''
+        this.groupId = data?.groupId || ''
+        this.groupType = data?.groupType ?? 0
+        this.thName = data?.thName || ''
+    }
+}
+export interface ExcelPortalTagsModel {
+    display: string
+    value: string
+}
+export class MyExcelPortalTagsModel implements ExcelPortalTagsModel {
+    display: string
+    value: string
+    constructor(data?: Partial<ExcelPortalTagsModel>) {
+        this.display = data?.display || ''
+        this.value = data?.value || ''
+    }
+}
\ No newline at end of file

src/app/DPU/models/module.model.ts

+export interface ModuleModel {
+    code: string
+    tdesc: string
+    edesc: string
+}
+
+export class MyModuleModel implements ModuleModel {
+    code: string
+    tdesc: string
+    edesc: string
+    constructor(data: Partial<ModuleModel>) {
+        this.code = data?.code || ''
+        this.tdesc = data?.tdesc || ''
+        this.edesc = data?.edesc || ''
+    }
+}
\ No newline at end of file

src/app/DPU/models/template-file-mini.model.ts

+export interface TemplateFileMiniModel {
+  edesc: string
+  fileName: string
+  itemId: string
+  module: string
+  tdesc: string
+  templateId: string
+}
+export class MyTemplateFileMiniModel implements TemplateFileMiniModel {
+  edesc: string
+  fileName: string
+  itemId: string
+  module: string
+  tdesc: string
+  templateId: string
+  constructor(data?: Partial<TemplateFileMiniModel>) {
+    this.edesc = data?.edesc || ''
+    this.fileName = data?.fileName || ''
+    this.itemId = data?.itemId || ''
+    this.module = data?.module || ''
+    this.tdesc = data?.tdesc || ''
+    this.templateId = data?.templateId || ''
+  }
+}

src/app/DPU/models/template.model.ts

+export interface PrefixModel {
+    edesc: string
+    prefixId: string
+    tdesc: string
+}
+export class MyPrefixModel implements PrefixModel {
+    edesc: string
+    prefixId: string
+    tdesc: string
+    constructor(data?: Partial<PrefixModel>) {
+        this.edesc = data?.edesc || ''
+        this.prefixId = data?.prefixId || ''
+        this.tdesc = data?.tdesc || ''
+    }
+}
+
+export interface CreateByModel {
+    efname: string
+    elname: string
+    email: string
+    employeeId: string
+    engFullName: string
+    fname: string
+    lname: string
+    picture: string
+    prefix: PrefixModel
+    sex: string
+    thFullName: string
+}
+export class MyCreateByModel implements CreateByModel {
+    efname: string
+    elname: string
+    email: string
+    employeeId: string
+    engFullName: string
+    fname: string
+    lname: string
+    picture: string
+    prefix: PrefixModel
+    sex: string
+    thFullName: string
+    constructor(data?: Partial<CreateByModel>) {
+        this.efname = data?.efname || ''
+        this.elname = data?.elname || ''
+        this.email = data?.email || ''
+        this.employeeId = data?.employeeId || ''
+        this.engFullName = data?.engFullName || ''
+        this.fname = data?.fname || ''
+        this.lname = data?.lname || ''
+        this.picture = data?.picture || ''
+        this.prefix = new MyPrefixModel(data?.prefix)
+        this.sex = data?.sex || ''
+        this.thFullName = data?.thFullName || ''
+    }
+}
+
+export interface TemplateFileModel {
+    createDate: string
+    edesc: string
+    fileName: string
+    isDataGrid: string
+    isPivot: string
+    isShare: string
+    itemId: string
+    menuActive: string
+    module: string
+    page: string
+    param: any | null
+    portalId: string
+    realFileName: string
+    realFileNameOld: string
+    tdesc: string
+    templateId: string
+    uponMenu: string
+    fileData: string
+    fileType: string
+}
+export class MyTemplateFileModel implements TemplateFileModel {
+    createDate: string
+    edesc: string
+    fileName: string
+    isDataGrid: string
+    isPivot: string
+    isShare: string
+    itemId: string
+    menuActive: string
+    module: string
+    page: string
+    param: any | null
+    portalId: string
+    realFileName: string
+    realFileNameOld: string
+    tdesc: string
+    templateId: string
+    uponMenu: string
+    fileData: string
+    fileType: string
+    constructor(data?: Partial<TemplateFileModel>) {
+        this.createDate = data?.createDate || ''
+        this.edesc = data?.edesc || ''
+        this.fileName = data?.fileName || ''
+        this.isDataGrid = data?.isDataGrid || '0'
+        this.isPivot = data?.isPivot || '0'
+        this.isShare = data?.isShare || '0'
+        this.itemId = data?.itemId || ''
+        this.menuActive = data?.menuActive || ''
+        this.module = data?.module || ''
+        this.page = data?.page || ''
+        this.param = data?.param
+        this.portalId = data?.portalId || ''
+        this.realFileName = data?.realFileName || ''
+        this.realFileNameOld = data?.realFileNameOld || ''
+        this.tdesc = data?.tdesc || ''
+        this.templateId = data?.templateId || ''
+        this.uponMenu = data?.uponMenu || ''
+        this.fileData = data?.fileData || ''
+        this.fileType = data?.fileType || ''
+    }
+}
+
+export interface TemplateModel {
+    templateId: string
+    tname: string
+    ename: string
+    tdesc: string
+    edesc: string
+    module: string
+    templateFile: TemplateFileModel[]
+}
+export class MyTemplateModel implements TemplateModel {
+    templateId: string
+    tname: string
+    ename: string
+    tdesc: string
+    edesc: string
+    module: string
+    templateFile: TemplateFileModel[]
+    constructor(data?: Partial<TemplateModel>) {
+        this.templateId = data?.templateId || ''
+        this.tname = data?.tname || ''
+        this.ename = data?.ename || ''
+        this.tdesc = data?.tdesc || ''
+        this.edesc = data?.edesc || ''
+        this.module = data?.module || ''
+        this.templateFile = data?.templateFile?.map(x => new MyTemplateFileModel(x)) || []
+    }
+}
\ No newline at end of file

src/app/DPU/myportal/myportal.module.ts

-import { NgModule } from '@angular/core';
-import { RouterModule, Routes } from '@angular/router';
-import { QuillModule } from 'ngx-quill';
-import { MyportalComponent } from './myportal.component';
-import { CommonModule } from '@angular/common';
-export const admin: Routes = [
-  {
-    path: 'admin', children: [{
-      path: 'home',
-      loadComponent: () =>
-        import('./home-common/home-common.component').then((m) => m.HomeCommonComponent),
-    },
-    
-    ]
-  }
-];
-
-
-@NgModule({
-  imports: [
-    CommonModule,
-    RouterModule.forChild(admin),
-    QuillModule.forRoot(),
-  ],
-  exports: [RouterModule],
-  declarations: [MyportalComponent]
-})
-export class MyPortalModule {
-  static routes = admin;
-}

src/app/DPU/services/custom-cube.service.ts

+import { Injectable } from '@angular/core';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { TranslateService } from '@ngx-translate/core';
+import { Observable } from 'rxjs';
+import { environment } from '../../../environments/environment';
+import { AlertModel } from '../models/alert.model';
+@Injectable({
+  providedIn: 'root'
+})
+export class CustomCubeService {
+
+  constructor(private http: HttpClient,
+    private translateService: TranslateService
+  ) { }
+
+  getExcelColumn(body: {
+    templateId: string,
+    fileName: string,
+  }) {
+    return this.http.post(environment.baseUrl + "customcube/get-excel-column?companyid=eb2f4f30-edaf-11ee-a69a-c7680edc0e47", body)
+  }
+  getExcelData(body: any) {
+    return this.http.post(environment.baseUrl + "customcube/get-excel-data?companyid=eb2f4f30-edaf-11ee-a69a-c7680edc0e47", body)
+  }
+  saveExcelPerspective(body: {
+    templateId: string,
+    fileName: string,
+    dataGridStr: string,
+    pivotStr: string,
+  }): Observable<AlertModel> {
+    return this.http.post<AlertModel>(environment.baseUrl + "customcube/save-excel-perspective?companyid=eb2f4f30-edaf-11ee-a69a-c7680edc0e47", body)
+  }
+  getExcelPerspective(body: {
+    templateId: string,
+    fileName: string,
+  }) {
+    return this.http.post(environment.baseUrl + "customcube/get-excel-perspective?companyid=eb2f4f30-edaf-11ee-a69a-c7680edc0e47", body)
+  }
+}
\ No newline at end of file

src/app/DPU/services/excel-report.service.ts

+import { Injectable } from '@angular/core';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { TranslateService } from '@ngx-translate/core';
+import { Observable } from 'rxjs';
+import { TemplateFileModel, TemplateModel } from '../models/template.model';
+import { environment } from '../../../environments/environment';
+import { ModuleModel } from '../models/module.model';
+import { ExcelPortalGroupModel, ExcelPortalModel, ExcelPortalTagsModel } from '../models/excel-portal.model';
+import { AlertModel } from '../models/alert.model';
+import { TemplateFileMiniModel } from '../models/template-file-mini.model';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ExcelReportService {
+
+  constructor(private http: HttpClient,
+    private translateService: TranslateService
+  ) { }
+  getExcelList(): Observable<TemplateModel[]> {
+    return this.http.get<TemplateModel[]>(environment.baseUrl + "/template/lists?companyid=eb2f4f30-edaf-11ee-a69a-c7680edc0e47")
+  }
+  getModuleList(): Observable<ModuleModel[]> {
+    return this.http.get<ModuleModel[]>(environment.baseUrl + "/template/lists/module?companyid=eb2f4f30-edaf-11ee-a69a-c7680edc0e47")
+  }
+  getExcelPortalList(): Observable<ExcelPortalModel[]> {
+    return this.http.get<ExcelPortalModel[]>(environment.baseUrl + "/excel-center/content/lists")
+  }
+  getExcelPortalgGroupList(): Observable<ExcelPortalGroupModel[]> {
+    return this.http.get<ExcelPortalGroupModel[]>(environment.baseUrl + "/portal-group/lists")
+  }
+  getExcelPortalTagsList(): Observable<ExcelPortalTagsModel[]> {
+    return this.http.get<ExcelPortalTagsModel[]>(environment.baseUrl + "/tag/lists")
+  }
+
+  postTemplate(body: {
+    templateId: string,
+    tname: string,
+    ename: string,
+    tdesc: string,
+    edesc: string,
+    module: string
+  }) {
+    return this.http.post(environment.baseUrl + "/template?companyid=eb2f4f30-edaf-11ee-a69a-c7680edc0e47", body)
+  }
+  deleteTemplate(body: TemplateModel): Observable<AlertModel> {
+    let option = {
+      headers: new HttpHeaders({
+        "Content-Type": "application/json",
+      }),
+      body: body
+    }
+    return this.http.delete<AlertModel>(environment.baseUrl + "/template?companyid=eb2f4f30-edaf-11ee-a69a-c7680edc0e47", option)
+  }
+  postTemplateFile(body: TemplateFileModel): Observable<AlertModel> {
+    return this.http.post<AlertModel>(environment.baseUrl + "/template-file?companyid=eb2f4f30-edaf-11ee-a69a-c7680edc0e47", body)
+  }
+  deleteTemplateFile(body: TemplateFileModel): Observable<AlertModel> {
+    let option = {
+      headers: new HttpHeaders({
+        "Content-Type": "application/json",
+      }),
+      body: body
+    }
+    return this.http.delete<AlertModel>(environment.baseUrl + "/template-file?companyid=eb2f4f30-edaf-11ee-a69a-c7680edc0e47", option)
+  }
+  downloadTemplateFile(fileName: string) {
+    return this.http.get(environment.baseUrl + "/template-file/download/excel/" + fileName + "?companyid=eb2f4f30-edaf-11ee-a69a-c7680edc0e47", { responseType: 'blob' })
+  }
+  printExcelReport(body: {
+    fileName: string,
+    paramObj: string
+  }) {
+    return this.http.post(environment.baseUrl + "/template-file/export-to-excel?companyid=eb2f4f30-edaf-11ee-a69a-c7680edc0e47", body, { responseType: 'blob' })
+  }
+  getTemplateFile(templateid: string, filename: string): Observable<AlertModel> {
+    return this.http.get<AlertModel>(environment.baseUrl + "/template-file/" + templateid + "/" + filename + "?companyid=eb2f4f30-edaf-11ee-a69a-c7680edc0e47",)
+  }
+
+  getTemplateFileLists(): Observable<TemplateFileMiniModel[]> {
+    return this.http.get<TemplateFileMiniModel[]>(environment.baseUrl + "/template-file/menuitem/mini/lists?companyid=eb2f4f30-edaf-11ee-a69a-c7680edc0e47",)
+  }
+}
\ No newline at end of file

src/app/alert-modal/alert-modal.component.html

+<div class="modal-header">
+    <h5 class="modal-title" id="editLabel">ข้อความแจ้งเตือน</h5>
+    <button type="button" class="close" (click)="activeModal.dismiss('dismiss')" aria-label="Close">
+        <span aria-hidden="true">&times;</span>
+    </button>
+</div>
+
+<ng-container *ngIf="innerHTML!=undefined then InnerHTML else Message"></ng-container>
+
+<ng-template #Message>
+    <div class="modal-body">
+        {{message}}
+    </div>
+</ng-template>
+
+<ng-template #InnerHTML>
+    <div class="modal-body" [innerHTML]="innerHTML">
+    </div>
+</ng-template>
\ No newline at end of file

src/app/alert-modal/alert-modal.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AlertModalComponent } from './alert-modal.component';
+
+describe('AlertModalComponent', () => {
+  let component: AlertModalComponent;
+  let fixture: ComponentFixture<AlertModalComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ AlertModalComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AlertModalComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/alert-modal/alert-modal.component.ts

+import { Component, Input, OnInit } from '@angular/core';
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+
+@Component({
+  selector: 'app-alert-modal',
+  templateUrl: './alert-modal.component.html',
+  styleUrls: ['./alert-modal.component.scss']
+})
+export class AlertModalComponent implements OnInit {
+  @Input() message: string = ""
+  @Input() innerHTML?: string
+  constructor(public activeModal: NgbActiveModal) { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/confirm-modal/confirm-modal.component.html

+<div class="modal-header">
+    <h5 class="modal-title" id="editLabel">ข้อความแจ้งเตือน</h5>
+    <button type="button" class="close" (click)="activeModal.dismiss('dismiss')" aria-label="Close">
+        <span aria-hidden="true">&times;</span>
+    </button>
+</div>
+<div class="modal-body">
+    {{message}}
+</div>
+<div class="modal-footer">
+    <button type="button" class="btn btn-info" (click)="activeModal.close('close')">
+        ยืนยัน
+    </button>
+    <button type="button" class="btn btn-danger" (click)="activeModal.dismiss('dismiss')">
+        ยกเลิก
+    </button>
+</div>
\ No newline at end of file

src/app/confirm-modal/confirm-modal.component.ts

+import { Component, Input, OnInit } from '@angular/core';
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+
+@Component({
+  selector: 'app-confirm-modal',
+  templateUrl: './confirm-modal.component.html',
+  styleUrls: ['./confirm-modal.component.scss']
+})
+export class ConfirmModalComponent implements OnInit {
+  @Input() message: string = "";
+  constructor(public activeModal: NgbActiveModal) { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/datagrid-syncfution/datagrid-syncfution.component.html

+<ejs-grid #grid id='Grid' [dataSource]="dataSourceSearch" [allowFiltering]="allowFiltering"
+  [filterSettings]="filterSettings" (actionComplete)="actionComplete($event)" [searchSettings]="searchSettings"
+  [groupSettings]="groupSettings" [toolbar]='toolbarOptions' [editSettings]="editSettings" allowPaging='true'
+  allowGrouping='true' allowSorting='true' [showColumnMenu]="true" (columnMenuClick)="onColumnMenuClick($event)"
+  allowFiltering='true' [allowPdfExport]='true' (toolbarClick)='toolbarClick($event)' [allowExcelExport]='true'
+  [selectionSettings]="selectionOptions" (detailDataBound)='detailDataBound($event)' width="auto" allowReordering='true'
+  [loadingIndicator]='loadingIndicator' [query]="query" rowHeight='60' allowEditing='false' [pageSettings]='initialPage'
+  [allowMultiSorting]='true' [columnMenuItems]="columnMenuItems">
+  <e-columns>
+    <e-column *ngFor="let col of columns" [field]="col.field" [headerText]="col.headerText" [width]="col.width"
+      [format]="col.format" [textAlign]="'center'" [isPrimaryKey]="col.isPrimaryKey" [editType]="false"
+      [validationRules]="col.validationRules" [allowEditing]="false" [allowSorting]="'true'" [allowFiltering]="true"
+      [visible]="col.visible" [type]="col.type">
+      <ng-template #headerTemplate let-data>
+        <span class="font-size-12px font-weight-700">{{ col.headerText }}</span>
+      </ng-template>
+    </e-column>
+  </e-columns>
+  <e-aggregates>
+    <e-aggregate>
+      <e-columns>
+        <e-column *ngFor="let col of aggregatesSum" [field]="col.field" [type]="'Sum'" [footerTemplate]="'Sum: ${Sum}'"
+          [groupFooterTemplate]="'Sum: ${Sum}'" [groupCaptionTemplate]="col.groupCaptionTemplate" [format]="col.format">
+        </e-column>
+      </e-columns>
+    </e-aggregate>
+    <e-aggregate>
+      <e-columns>
+        <e-column *ngFor="let col of aggregatesCount" [field]="col.field" [type]="'Count'"
+          [footerTemplate]="'Count: ${Count}'" [groupFooterTemplate]="'Count: ${Count}'"
+          [groupCaptionTemplate]="col.groupCaptionTemplate" [format]="col.format">
+        </e-column>
+      </e-columns>
+    </e-aggregate>
+    <e-aggregate>
+      <e-columns>
+        <e-column *ngFor="let col of aggregatesAvg" [field]="col.field" [type]="'Average'"
+          [footerTemplate]="'Average: ${Average}'" [groupFooterTemplate]="'Average: ${Average}'"
+          [groupCaptionTemplate]="col.groupCaptionTemplate" [format]="col.format">
+        </e-column>
+      </e-columns>
+    </e-aggregate>
+    <e-aggregate>
+      <e-columns>
+        <e-column *ngFor="let col of aggregatesMin" [field]="col.field" [type]="'Min'" [footerTemplate]="'Min: ${Min}'"
+          [groupFooterTemplate]="'Min: ${Min}'" [groupCaptionTemplate]="col.groupCaptionTemplate" [format]="col.format">
+        </e-column>
+      </e-columns>
+    </e-aggregate>
+    <e-aggregate>
+      <e-columns>
+        <e-column *ngFor="let col of aggregatesMax" [field]="col.field" [type]="'Max'" [footerTemplate]="'Max: ${Max}'"
+          [groupFooterTemplate]="'Max: ${Max}'" [groupCaptionTemplate]="col.groupCaptionTemplate" [format]="col.format">
+        </e-column>
+      </e-columns>
+    </e-aggregate>
+  </e-aggregates>
+</ejs-grid>
\ No newline at end of file

src/app/datagrid-syncfution/datagrid-syncfution.component.scss

+// th{
+//   position: relative;         // เทียบเท่า class "relative"
+//   padding: 10px;              // เทียบเท่า class "px-10px py-10px" (อาจเปลี่ยนตามต้องการ)
+//   background-color: rgb(96 165 250 / 0.1);  // ตัวอย่างแทน "bg-soft-secondary"
+//   color: #2b2b2b;             // ตัวอย่างแทน "text-primary"
+//   text-align: center !important;  // เทียบเท่า "!text-center"
+
+//   // หากต้องการดีไซน์อื่น ๆ เพิ่มเติมก็ใส่ในนี้ได้เลย เช่น:
+//   font-weight: 600;
+//   border-bottom: 1px solid #eee;
+// }
+.e-headercell,
+.e-detailheadercell {
+  background-color: rgb(96 165 250 / 0.1) !important;
+}
+
+.e-pager .e-currentitem, .e-pager .e-currentitem:hover {
+  background: rgb(96 165 250) !important;
+  color: #fff;
+  opacity: 1 !important;
+}
+
+
+.e-checkbox-wrapper .e-frame.e-check, .e-css.e-checkbox-wrapper .e-frame.e-check {
+  background-color: rgb(96 165 250) !important;
+  border-color: transparent;
+  color: #fff;
+}
+
+.e-checkbox-wrapper .e-frame, .e-css.e-checkbox-wrapper .e-frame {
+  border: 1px solid !important;
+  border-radius: 2px;
+  box-sizing: border-box;
+  cursor: pointer;
+  display: inline-block;
+  font-family: "e-icons";
+  height: 18px;
+  line-height: 10px;
+  padding: 2px 0;
+  text-align: center;
+  vertical-align: middle;
+  width: 1rem !important;
+  border-color: #64748b !important;
+}
+
+.e-grid td.e-selectionbackground {
+  background-color: #aec2ec !important;
+}

src/app/pivot-syncfution/pivot-syncfution.component.html

+<ejs-pivotview #pivotview id='PivotView' [dataSourceSettings]="dataSourceSettings" [displayOption]='displayOption'
+  [toolbar]='toolbarOptions' [allowExcelExport]='true' [allowNumberFormatting]='true'
+  [allowConditionalFormatting]='true' [allowPdfExport]='true' [showToolbar]='true' [allowCalculatedField]='true'
+  [showFieldList]='true' width='100%' height='550'></ejs-pivotview>
\ No newline at end of file

src/app/pivot-syncfution/pivot-syncfution.component.scss

+// th{
+//   position: relative;         // เทียบเท่า class "relative"
+//   padding: 10px;              // เทียบเท่า class "px-10px py-10px" (อาจเปลี่ยนตามต้องการ)
+//   background-color: rgb(96 165 250 / 0.1);  // ตัวอย่างแทน "bg-soft-secondary"
+//   color: #2b2b2b;             // ตัวอย่างแทน "text-primary"
+//   text-align: center !important;  // เทียบเท่า "!text-center"
+
+//   // หากต้องการดีไซน์อื่น ๆ เพิ่มเติมก็ใส่ในนี้ได้เลย เช่น:
+//   font-weight: 600;
+//   border-bottom: 1px solid #eee;
+// }
+.e-headercell,
+.e-detailheadercell {
+  background-color: rgb(96 165 250 / 0.1) !important;
+}
+
+.e-pager .e-currentitem, .e-pager .e-currentitem:hover {
+  background: rgb(96 165 250) !important;
+  color: #fff;
+  opacity: 1 !important;
+}
+
+
+.e-checkbox-wrapper .e-frame.e-check, .e-css.e-checkbox-wrapper .e-frame.e-check {
+  background-color: rgb(96 165 250) !important;
+  border-color: transparent;
+  color: #fff;
+}
+
+.e-checkbox-wrapper .e-frame, .e-css.e-checkbox-wrapper .e-frame {
+  border: 1px solid !important;
+  border-radius: 2px;
+  box-sizing: border-box;
+  cursor: pointer;
+  display: inline-block;
+  font-family: "e-icons";
+  height: 18px;
+  line-height: 10px;
+  padding: 2px 0;
+  text-align: center;
+  vertical-align: middle;
+  width: 1rem !important;
+  border-color: #64748b !important;
+}
+
+.e-grid td.e-selectionbackground {
+  background-color: #aec2ec !important;
+}

src/app/pivot-syncfution/pivot-syncfution.component.ts

+import { CommonModule } from "@angular/common";
+import { ChangeDetectorRef, Component, EventEmitter, Input, OnInit, Output, SimpleChanges, ViewChild } from "@angular/core";
+import {
+  IDataOptions,
+  PivotView,
+  ToolbarItems,
+  GroupingBarService,
+  ToolbarService,
+  PDFExportService,
+  ExcelExportService,
+  DisplayOption,
+  IDataSet,
+  DataSourceSettings,
+  PivotViewComponent,
+  FieldList,
+  PivotViewModule
+} from '@syncfusion/ej2-angular-pivotview';
+import { DataSourceSettingsModel } from '@syncfusion/ej2-pivotview/src/model/datasourcesettings-model';
+import { SharedModule } from "../shared/shared.module";
+
+@Component({
+  standalone: true,
+  imports: [
+    CommonModule,
+    SharedModule,
+    PivotViewModule
+  ],
+  selector: 'app-pivot-syncfution',
+  templateUrl: './pivot-syncfution.component.html',
+  styleUrls: ['./pivot-syncfution.component.scss'],
+  providers: [
+    GroupingBarService,
+    ToolbarService,
+    PDFExportService,
+    ExcelExportService
+  ]
+})
+export class PivotSyncfutionComponent implements OnInit {
+  dataSourceSettings: DataSourceSettingsModel = {
+    dataSource: [],
+    expandAll: false,
+    enableSorting: true,
+    drilledMembers: [],
+    columns: [],
+    values: [],
+    rows: [],
+    formatSettings: [],
+    filters: []
+  };
+  @Input() dataSource: any
+  @Input() columns: any
+  @Input() templateId!: string;
+  @Input() fileName!: string;
+  toolbarOptions: ToolbarItems[] = ['Grid', 'Chart', 'Export', 'SubTotal', 'GrandTotal', 'Formatting', 'FieldList']
+  displayOption: DisplayOption = { view: 'Both' } as DisplayOption;
+
+  @ViewChild('pivotview') public pivotview?: PivotViewComponent;
+
+  @Input() sendLayout = false
+  @Input() pivotLayout = ''
+  @Output() layout = new EventEmitter<any>();
+  constructor(private cdr: ChangeDetectorRef) { }
+  ngOnInit(): void {
+
+
+  }
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes['dataSource']?.currentValue || changes['columns']?.currentValue) {
+      this.dataSourceSettings = {
+        dataSource: this.dataSource,
+        columns: this.columns,
+        values: [],
+        rows: [],
+        expandAll: true,
+        enableSorting: true,
+        drilledMembers: [],
+        filters: [],
+        formatSettings: []
+      };
+    }
+    if (changes['pivotLayout']) {
+      if (changes['pivotLayout'].currentValue) {
+        const layout = JSON.parse(changes['pivotLayout'].currentValue)
+        this.pivotview?.setProperties(layout)
+      }
+    }
+    if (changes['sendLayout']) {
+      if (this.pivotview) {
+        const layout = this.pivotview?.getPersistData();
+        if (layout) {
+          this.layout.emit(layout)
+        }
+      }
+    }
+  }
+}
\ No newline at end of file

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

@@ -93,7 +93,7 @@ export class NavService implements OnDestroy {
   getCommonMenu() {
     return [
       // Dashboard
-      { headTitle: 'ผู้ดูแลระบบ' },
+      { headTitle: 'MyJob' },
       {
         icon: 'news',
         path: '/admin/pdpa-manage',
@@ -131,30 +131,24 @@ export class NavService implements OnDestroy {
           { path: '/admin/provinces', title: 'จัดการจังหวัด', type: 'link' },
         ],
       },
-      { headTitle: 'Myportal' },
+      { headTitle: 'MyPortal' }, 
       {
-        icon: 'news',
-        path: '/admin/pdpa-manage',
-        title: 'จัดการ PDPA',
-        type: 'link',
+        icon: 'user',
+        path: '/admin/set-excel-reports',
+        title: 'ตั้งรายงานเอ็กเซล',
+        type: 'sub',
+        children: [
+          { path: '/admin/excel-list', title: 'เพิ่มรายงาน Excel', type: 'link' },
+          { path: '/admin/member-manage', title: 'เปิด-ปิด การใช้รายงาน Excel', type: 'link' }
+        ],
       },
       {
         icon: 'receipt',
         path: '/admin/manage-articles',
-        title: 'จัดการบทความ',
+        title: 'DataSource Tabel',
         type: 'link',
       },
       {
-        icon: 'user',
-        path: '/admin/company-departments',
-        title: 'จัดการผู้ใช้',
-        type: 'sub',
-        children: [
-          { path: '/admin/manage-companys', title: 'จัดการบริษัท', type: 'link' },
-          { path: '/admin/member-manage', title: 'จัดการผู้สมัครงาน', type: 'link' }
-        ],
-      },
-      {
         icon: 'buildings',
         path: '/admin/company-departments',
         title: 'ทะเบียนบริษัท',

src/pipe/safe-url.pipe.ts

+import { Pipe, PipeTransform } from '@angular/core';
+import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
+
+@Pipe({
+    name: 'safeUrl',
+    standalone: true
+})
+export class SafeUrlPipe implements PipeTransform {
+    constructor(private sanitizer: DomSanitizer) { }
+
+    transform(url: string): SafeResourceUrl {
+        return this.sanitizer.bypassSecurityTrustResourceUrl(url);
+    }
+}