ปรับ module myskill-x

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

src/app/DPU/myskill-x/myportal/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/DPU/myskill-x/myportal/alert-modal/alert-modal.component.ts

+import { Component, OnInit, Inject } from '@angular/core';
+import { MatDialogRef, MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+@Component({
+  selector: 'app-alert-modal',
+  templateUrl: './alert-modal.component.html',
+  styleUrls: ['./alert-modal.component.scss'],
+  standalone: true,
+  imports: [
+    CommonModule,
+    FormsModule,
+    MatDialogModule 
+  ]
+})
+export class AlertModalComponent implements OnInit {
+  constructor(
+    public dialogRef: MatDialogRef<AlertModalComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: { message: string; innerHTML?: string } 
+  ) { }
+
+  ngOnInit(): void {
+  }
+
+  close(): void {
+    this.dialogRef.close();
+  }
+}
\ No newline at end of file

src/app/DPU/myskill-x/myportal/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/DPU/myskill-x/myportal/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/DPU/myskill-x/myportal/datasource-table/datasource-table.component.scss

+.secure-input {
+    -webkit-text-security: disc;
+    text-security: disc;
+}
\ No newline at end of file

src/app/DPU/myskill-x/myportal/excel-report/excel-report.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 { ExcelReportComponent } from './excel-report.component';
+
+describe('ExcelReportComponent', () => {
+  let component: ExcelReportComponent;
+  let fixture: ComponentFixture<ExcelReportComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ExcelReportComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ExcelReportComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/DPU/myskill-x/myportal/home-common/home-common.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 { HomeCommonComponent } from './home-common.component';
+
+describe('HomeCommonComponent', () => {
+  let component: HomeCommonComponent;
+  let fixture: ComponentFixture<HomeCommonComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ HomeCommonComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HomeCommonComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/DPU/myskill-x/myportal/list-course/list-course.component.scss

+::ng-deep ng2-dropdown-menu {
+    z-index: 9999 !important;
+    .ng2-dropdown-menu {
+      z-index: 9999 !important;
+      ng2-menu-item {
+        z-index: 9999 !important;
+      }
+    }
+  }
\ No newline at end of file

src/app/DPU/myskill-x/myportal/list-doc/list-doc.component.scss

+::ng-deep ng2-dropdown-menu {
+    z-index: 9999 !important;
+    .ng2-dropdown-menu {
+      z-index: 9999 !important;
+      ng2-menu-item {
+        z-index: 9999 !important;
+      }
+    }
+  }
\ No newline at end of file

src/app/DPU/myskill-x/myportal/list-excell/list-excell.component.scss

+::ng-deep ng2-dropdown-menu {
+    z-index: 9999 !important;
+    .ng2-dropdown-menu {
+      z-index: 9999 !important;
+      ng2-menu-item {
+        z-index: 9999 !important;
+      }
+    }
+  }
\ No newline at end of file

src/app/DPU/myskill-x/myportal/list-widgets/list-widgets.component.scss

+::ng-deep ng2-dropdown-menu {
+    z-index: 9999 !important;
+    .ng2-dropdown-menu {
+      z-index: 9999 !important;
+      ng2-menu-item {
+        z-index: 9999 !important;
+      }
+    }
+  }
\ No newline at end of file

src/app/DPU/myskill-x/myportal/management/approved-list/approved-list.component.html

+<app-page-header [title]="'รายการเอกสารผ่านการอนุมัติ'" [activeTitle]="'รายการเอกสารผ่านการอนุมัติ'" [title1]="'อนุมัติหลักสูตร'"></app-page-header>
+<!-- <div class="row">
+    <div class="col-12">
+      <div class="card card-body">
+        <h4 class="card-title">รายการเอกสาร</h4>
+        <div class="row justify-content-center">
+          <div class="col-md-4 " *ngFor="let c of testdata|slice: (page-1) * pageSize : (page-1) * pageSize + pageSize">
+            <div class="card border border-2">
+              <div class="card-body text-center">
+                <img src="{{ c.img }}" class="rounded-circle border p-1" width="100">
+                <h3 class="card-title mt-3 mb-0">{{c.name}}</h3>
+              </div>
+              <div class="d-flex  justify-content-between bg-light border-top p-3">
+                <div>
+                  <span class="align-middle">จำนวนเอกสาร {{ c.document }} ฉบับ</span>
+                </div>
+                <div >
+                  <button class="btn btn-info btn-sm text-nowrap" (click)="openView(c.id)">รายละเอียด</button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div> -->
+
+
+  <div class="max-w-7xl mx-auto">
+  <div class="box p-4">
+    <h4 class="text-xl font-semibold text-gray-800 mb-6">รายการเอกสาร</h4>
+
+    <!-- Flex แทน Grid -->
+    <div class="flex flex-wrap justify-center gap-6">
+
+      <div
+        class=" bg-white rounded-xl shadow-lg overflow-hidden transform hover:scale-105 transition duration-300 ease-in-out flex flex-col" style="width: 30%;"
+        *ngFor="let c of testdata | slice: (page-1) * pageSize : (page-1) * pageSize + pageSize"
+      >
+        <div class="p-8 text-center">
+          <div class="w-24 h-24 mx-auto rounded-full bg-green-100 flex items-center justify-center shadow-inner">
+            <img src="{{ c.img }}" class="" alt="" />
+          </div>
+          <h3 class="text-2xl font-bold text-gray-800 mt-6 mb-2">{{ c.name }}</h3>
+        </div>
+
+        <!-- Footer -->
+        <div class="mt-auto">
+          <div class="flex justify-between items-center bg-gray-50 border-t border-gray-200 p-4">
+            <div>
+              <span class="text-sm text-gray-700">จำนวนเอกสาร {{ c.document }} ฉบับ</span>
+            </div>
+            <div>
+              <button
+                class="bg-primary inline-flex items-center px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-md shadow-md 
+                active hover:bg-success hover:scale-110 transition duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50"
+                (click)="openView(c.id)"
+              >
+                รายละเอียด
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+    </div>
+  </div>
+</div>
\ No newline at end of file

src/app/DPU/myskill-x/myportal/management/approved-list/approved-list.component.spec.ts

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

src/app/DPU/myskill-x/myportal/management/approved-list/approved-list.component.ts

+import { Component, OnInit } from '@angular/core';
+import { Router, RouterModule } from '@angular/router';
+import { DocumentService } from '../../../../services/document.service';
+import { CourseService } from '../../../../services/course.service';
+import { ExcelService } from '../../../../services/excel.service';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { TranslateModule } from '@ngx-translate/core';
+import { SharedModule } from '../../../../../shared/shared.module';
+
+@Component({
+  selector: 'app-approved-list',
+  templateUrl: './approved-list.component.html',
+  styleUrls: ['./approved-list.component.scss'],
+  standalone: true,
+    imports: [
+      CommonModule,
+      FormsModule,
+      RouterModule,
+      TranslateModule,
+      SharedModule,
+    ],
+})
+export class ApprovedListComponent implements OnInit {
+
+  constructor(
+    private routes: Router,
+    private excelService:ExcelService,private documentService:DocumentService,private courseService:CourseService
+  ) {}
+  page = 1;
+  pageSize = 10;
+  testdata: {
+    id:string;
+    img: String;
+    name: String;
+    details: String;
+    document: String;
+  }[] = [];
+
+  ngOnInit() {
+
+    this.testdata = [
+      {
+        id:'1',
+        img: "assets/images/icons/excel.png",
+        name: "Excel",
+        details: "xxxxxxxxxxxxxxxxxxxxxxxxxxx",
+        document: "0"
+      },
+      {
+        id:'2',
+        img: "assets/images/icons/document.png",
+        name: "Document",
+        details: "xxxxxxxxxxxxxxxxxxxxxxxxxxx",
+        document: "0"
+      },
+      {
+        id:'3',
+        img: "assets/images/icons/course.png",
+        name: "Course",
+        details: "xxxxxxxxxxxxxxxxxxxxxxxxxxx",
+        document: "0"
+      },
+    ];
+    this.getListCount();
+  }
+  async getListCount(){
+    try {
+      const countExcel = await this.excelService.getCountContent().toPromise();
+      const countDoc = await this.documentService.getCountContent().toPromise();
+      const countCourse = await this.courseService.getCountContent().toPromise();
+      this.testdata.forEach((x ,i) => {
+        if(i == 0){
+          x.document = (countExcel ?? 0).toString()
+        }else if(i == 1){
+          x.document = (countDoc ?? 0).toString()
+        }else if(i == 2){
+          x.document = (countCourse ?? 0).toString()
+        }
+      })
+    } catch (error) {
+      console.error('Error loading data:', error);
+    }
+  }
+  openView(id:string){
+    if(id =='1'){
+      this.routes.navigate(['/admin/view-list-excel/1']);
+    }else if(id =='2'){
+      this.routes.navigate(['/admin/view-list-doc/1']);
+    }else if(id =='3'){
+      this.routes.navigate(['/admin/view-list-course/1']);
+    }
+  }
+}

src/app/DPU/myskill-x/myportal/management/approved-list/view-list-course/view-list-course.component.ts

+import { Component, OnInit } from '@angular/core';
+import { NgbModal, NgbPaginationModule } from '@ng-bootstrap/ng-bootstrap';
+import { ActivatedRoute } from '@angular/router';
+import { OpenImageComponent } from '../../../open-image/open-image.component';
+import { ConfirmModalComponent } from '../../../confirm-modal/confirm-modal.component';
+import { AlertModalComponent } from '../../../alert-modal/alert-modal.component';
+import { firstValueFrom } from 'rxjs';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { RouterModule } from '@angular/router';
+import { NgSelectModule } from '@ng-select/ng-select';
+import { SharedModule } from '../../../../../../shared/shared.module';
+import { MatDialogModule } from '@angular/material/dialog';
+import { TranslateModule } from '@ngx-translate/core';
+import { CourseContentModel } from '../../../../../models/course-content.model';
+import { CourseService } from '../../../../../services/course.service';
+declare var require: any
+import FileSaver from 'file-saver';
+@Component({
+  selector: 'app-view-list-course',
+  templateUrl: './view-list-course.component.html',
+  styleUrls: ['./view-list-course.component.scss'],
+  standalone: true,
+  imports: [
+    CommonModule,
+    FormsModule,
+    RouterModule,
+    NgSelectModule,
+    SharedModule,
+    MatDialogModule,
+    TranslateModule,
+    NgbPaginationModule,
+  ],
+})
+export class ViewListCourseComponent implements OnInit {
+  page = 0;
+  pageSize = 10;
+  listCourse: CourseContentModel[] = []
+  search: string = ''
+  checkType: string = '0'
+  pagedItems: CourseContentModel[];
+  constructor(private modalService: NgbModal, private courseService: CourseService, private activatedRoute: ActivatedRoute) {
+    this.activatedRoute.paramMap.subscribe(result => {
+      this.checkType = result.get("type")!;
+    });
+  }
+  get totalItems(): number {
+    return this.search == ''
+      ? this.listCourse.length
+      : this.filterListCourse().length;
+  }
+
+  get totalPages(): number {
+    return Math.ceil(this.totalItems / this.pageSize);
+  }
+
+  get totalPagesArray(): number[] {
+    return Array(this.totalPages).fill(0);
+  }
+
+  goToPage(index: number): void {
+    if (index < 0 || index >= this.totalPages) return;
+    this.page = index;
+    this.updatePagedItems();
+  }
+  updatePagedItems() {
+    const data: CourseContentModel[] = this.search === '' ? this.listCourse : this.filterListCourse();
+    const start = this.page * this.pageSize;
+    const end = start + this.pageSize;
+    this.pagedItems = data.slice(start, end);
+  }
+  openEmployeeModal(image: string) {
+    const modalRef = this.modalService.open(OpenImageComponent, {
+      centered: true,
+      windowClass: 'my-dialog-img-preview'
+    })
+    modalRef.componentInstance.linkImage = image
+    modalRef.result.then(result => {
+    }, reason => {
+      this.modalService.dismissAll()
+    })
+  }
+  async downloadFile(logId: string) {
+    try {
+      const data = await this.courseService.downloadFileContent(logId).toPromise();
+      if (data) {
+        FileSaver.saveAs(new Blob([data]), "file_download.json");
+      }
+    } catch (error) {
+      console.error('Error loading data:', error);
+    }
+  }
+  filterListCourse() {
+    return this.listCourse.filter(x => x.thName.toLowerCase().includes(this.search.toLowerCase()) || x.engName.toLowerCase().includes(this.search.toLowerCase()))
+  }
+  async getListCourse() {
+    try {
+      const data = await firstValueFrom(this.courseService.getListCourseContent('0'));
+      this.listCourse = data.map(x => new CourseContentModel(x))
+      console.log("🚀 ~ ViewListCourseComponent ~ getListCourse ~ this.listCourse :", this.listCourse)
+    } catch (error) {
+      console.error('Error loading data:', error);
+    }
+  }
+  deleteFile(item: CourseContentModel) {
+    const modalRef = this.modalService.open(ConfirmModalComponent, {
+      centered: true,
+      backdrop: 'static',
+    })
+    modalRef.componentInstance.message = 'คุณต้องการลบข้อมูลหรือไม่'
+    modalRef.result.then(result => {
+      this.courseService.deleteCourseContent(item).subscribe(result => {
+        if (result) {
+          this.openAlertModal('ลบข้อมูลสำเร็จ')
+          this.getListCourse();
+        } else {
+          this.openAlertModal('ไม่สามารถลบข้อมูลได้')
+        }
+      }, error => {
+        this.openAlertModal(error.message)
+      })
+    }, reject => { })
+  }
+  ngOnInit() {
+    this.getListCourse();
+  }
+  openLink(url: string) {
+    window.open(url, "_blank");
+  }
+  openAlertModal(message?: string) {
+    const modalRef = this.modalService.open(AlertModalComponent, {
+      centered: true,
+      backdrop: 'static'
+    })
+    modalRef.componentInstance.message = message ? message : ""
+    modalRef.result.then(result => {
+      this.modalService.dismissAll()
+    }, reason => {
+      this.modalService.dismissAll()
+    })
+  }
+
+  coverDate(date: string) {
+    return date.split('-').reverse().join('/')
+  }
+}

src/app/DPU/myskill-x/myportal/management/approved-list/view-list-doc/view-list-doc.component.ts

+import { Component, OnInit } from '@angular/core';
+import { NgbModal, NgbPaginationModule } from '@ng-bootstrap/ng-bootstrap';
+import { ActivatedRoute } from '@angular/router';
+import { OpenImageComponent } from '../../../open-image/open-image.component';
+import { ConfirmModalComponent } from '../../../confirm-modal/confirm-modal.component';
+import { AlertModalComponent } from '../../../alert-modal/alert-modal.component';
+import { firstValueFrom } from 'rxjs';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { RouterModule } from '@angular/router';
+import { NgSelectModule } from '@ng-select/ng-select';
+import { SharedModule } from '../../../../../../shared/shared.module';
+import { MatDialogModule } from '@angular/material/dialog';
+import { TranslateModule } from '@ngx-translate/core';
+import { DocumentContentModel } from '../../../../../models/document-content.model';
+import { DocumentService } from '../../../../../services/document.service';
+declare var require: any
+import FileSaver from 'file-saver';
+@Component({
+  selector: 'app-view-list-doc',
+  templateUrl: './view-list-doc.component.html',
+  styleUrls: ['./view-list-doc.component.scss'],
+  standalone: true,
+  imports: [
+    CommonModule,
+    FormsModule,
+    RouterModule,
+    NgSelectModule,
+    SharedModule,
+    MatDialogModule,
+    TranslateModule,
+    NgbPaginationModule,
+  ],
+})
+export class ViewListDocComponent implements OnInit {
+  page = 0;
+  pageSize = 10;
+  listDoc: DocumentContentModel[] = []
+  search: string = ''
+  checkType: string = '0'
+  pagedItems: DocumentContentModel[] = [];
+  constructor(private modalService: NgbModal, private documentService: DocumentService, private activatedRoute: ActivatedRoute) {
+    this.activatedRoute.paramMap.subscribe(result => {
+      this.checkType = result.get("type")!;
+    });
+  }
+  get totalItems(): number {
+    return this.search == ''
+      ? this.listDoc.length
+      : this.filterListDoc().length;
+  }
+
+  get totalPages(): number {
+    return Math.ceil(this.totalItems / this.pageSize);
+  }
+
+  get totalPagesArray(): number[] {
+    return Array(this.totalPages).fill(0);
+  }
+
+  goToPage(index: number): void {
+    if (index < 0 || index >= this.totalPages) return;
+    this.page = index;
+    this.updatePagedItems();
+  }
+  updatePagedItems() {
+    const data: DocumentContentModel[] = this.search === '' ? this.listDoc : this.filterListDoc();
+    const start = this.page * this.pageSize;
+    const end = start + this.pageSize;
+    this.pagedItems = data.slice(start, end);
+  }
+  openEmployeeModal(image: string) {
+    const modalRef = this.modalService.open(OpenImageComponent, {
+      centered: true,
+      windowClass: 'my-dialog-img-preview'
+    })
+    modalRef.componentInstance.linkImage = image
+    modalRef.result.then(result => {
+    }, reason => {
+      this.modalService.dismissAll()
+    })
+  }
+  deleteFile(item: DocumentContentModel) {
+    const modalRef = this.modalService.open(ConfirmModalComponent, {
+      centered: true,
+      backdrop: 'static',
+    })
+    modalRef.componentInstance.message = 'คุณต้องการลบข้อมูลหรือไม่'
+    modalRef.result.then(result => {
+      this.documentService.deleteExcelContent(item).subscribe(result => {
+        if (result) {
+          this.openAlertModal('ลบข้อมูลสำเร็จ')
+          this.getListDoc();
+        } else {
+          this.openAlertModal('ไม่สามารถลบข้อมูลได้')
+        }
+      }, error => {
+        this.openAlertModal(error.message)
+      })
+    }, reject => { })
+  }
+
+  async downloadFile(logId: string, lang: string) {
+    try {
+      const data = await this.documentService.downloadFileContent(logId, lang).toPromise();
+      if (data) {
+        FileSaver.saveAs(new Blob([data]), "file_download.doc");
+      }
+    } catch (error) {
+      console.error('Error loading data:', error);
+    }
+  }
+  filterListDoc() {
+    return this.listDoc.filter(x => x.thName.toLowerCase().includes(this.search.toLowerCase()) || x.engName.toLowerCase().includes(this.search.toLowerCase()))
+  }
+  async getListDoc() {
+    try {
+      const data = await firstValueFrom(this.documentService.getListExcelContent('0'));
+      this.listDoc = data.map(x => new DocumentContentModel(x))
+    } catch (error) {
+      console.error('Error loading data:', error);
+    }
+  }
+  ngOnInit() {
+    this.getListDoc();
+  }
+
+  openAlertModal(message?: string) {
+    const modalRef = this.modalService.open(AlertModalComponent, {
+      centered: true,
+      backdrop: 'static'
+    })
+    modalRef.componentInstance.message = message ? message : ""
+    modalRef.result.then(result => {
+      this.modalService.dismissAll()
+    }, reason => {
+      this.modalService.dismissAll()
+    })
+  }
+  openLink(url: string) {
+    window.open(url, "_blank");
+  }
+  coverDate(date: string) {
+    return date.split('-').reverse().join('/')
+  }
+}

src/app/DPU/myskill-x/myportal/management/approved-list/view-list-excel/view-list-excel.component.ts

+import { Component, OnInit } from '@angular/core';
+import { NgbModal, NgbPaginationModule } from '@ng-bootstrap/ng-bootstrap';
+import { ActivatedRoute } from '@angular/router';
+import { ExcelContentModel } from '../../../../../models/excel-content.model';
+import { ExcelService } from '../../../../../services/excel.service';
+import { OpenImageComponent } from '../../../open-image/open-image.component';
+import { ConfirmModalComponent } from '../../../confirm-modal/confirm-modal.component';
+import { AlertModalComponent } from '../../../alert-modal/alert-modal.component';
+import { firstValueFrom } from 'rxjs';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { RouterModule } from '@angular/router';
+import { NgSelectModule } from '@ng-select/ng-select';
+import { SharedModule } from '../../../../../../shared/shared.module';
+import { MatDialogModule } from '@angular/material/dialog';
+import { TranslateModule } from '@ngx-translate/core';
+declare var require: any
+import FileSaver from 'file-saver';
+@Component({
+  selector: 'app-view-list-excel',
+  templateUrl: './view-list-excel.component.html',
+  styleUrls: ['./view-list-excel.component.scss'],
+  standalone: true,
+  imports: [
+    CommonModule,
+    FormsModule,
+    RouterModule,
+    NgSelectModule,
+    SharedModule,
+    MatDialogModule,
+    TranslateModule,
+    NgbPaginationModule,
+  ],
+})
+export class ViewListExcelComponent implements OnInit {
+  page = 0;
+  pageSize = 10;
+  listExcel: ExcelContentModel[] = []
+  search: string = ''
+  checkType: string = '0'
+  pagedItems: ExcelContentModel[] = [];
+  constructor(private modalService: NgbModal, private excelService: ExcelService, private activatedRoute: ActivatedRoute,) {
+    this.activatedRoute.paramMap.subscribe(result => {
+      this.checkType = result.get("type")!;
+    });
+  }
+  get totalItems(): number {
+    return this.search == ''
+      ? this.listExcel.length
+      : this.filterListExcel().length;
+  }
+
+  get totalPages(): number {
+    return Math.ceil(this.totalItems / this.pageSize);
+  }
+
+  get totalPagesArray(): number[] {
+    return Array(this.totalPages).fill(0);
+  }
+
+  goToPage(index: number): void {
+    if (index < 0 || index >= this.totalPages) return;
+    this.page = index;
+    this.updatePagedItems();
+  }
+  updatePagedItems() {
+    const data: ExcelContentModel[] = this.search === '' ? this.listExcel : this.filterListExcel();
+    const start = this.page * this.pageSize;
+    const end = start + this.pageSize;
+    this.pagedItems = data.slice(start, end);
+  }
+  openEmployeeModal(image: string) {
+    const modalRef = this.modalService.open(OpenImageComponent, {
+      centered: true,
+      windowClass: 'my-dialog-img-preview'
+    })
+    modalRef.componentInstance.linkImage = image
+    modalRef.result.then(result => {
+    }, reason => {
+      this.modalService.dismissAll()
+    })
+  }
+  deleteFile(item: ExcelContentModel) {
+    const modalRef = this.modalService.open(ConfirmModalComponent, {
+      centered: true,
+      backdrop: 'static',
+    })
+    modalRef.componentInstance.message = 'คุณต้องการลบข้อมูลหรือไม่'
+    modalRef.result.then(result => {
+      this.excelService.deleteExcelContent(item).subscribe(result => {
+        if (result) {
+          this.openAlertModal('ลบข้อมูลสำเร็จ')
+          this.getListExcel();
+        } else {
+          this.openAlertModal('ไม่สามารถลบข้อมูลได้')
+        }
+      }, error => {
+        this.openAlertModal(error.message)
+      })
+    }, reject => { })
+  }
+  async downloadFile(logId: string) {
+    try {
+      const data = await this.excelService.downloadFileContent(logId).toPromise();
+      if (data) {
+        FileSaver.saveAs(new Blob([data]), "file_download.xlsx");
+      }
+    } catch (error) {
+      console.error('Error loading data:', error);
+    }
+  }
+  getStatus(status: string): string {
+    if (status === '0') {
+      return 'รออนุมัติ';
+    } else if (status === '1') {
+      return 'เปิดใช้งาน';
+    } else if (status === '2') {
+      return 'ไม่อนุมัติ';
+    } else {
+      return 'ไม่ทราบสถานะ'; // สำหรับกรณีที่ไม่ตรงกับเงื่อนไขใดเลย
+    }
+  }
+
+  filterListExcel() {
+    return this.listExcel.filter(x => x.thName.toLowerCase().includes(this.search.toLowerCase()) || x.engName.toLowerCase().includes(this.search.toLowerCase()))
+  }
+  async getListExcel() {
+    try {
+      const data = await firstValueFrom(this.excelService.getListExcelContent('0'));
+      this.listExcel = data.map(x => new ExcelContentModel(x))
+    } catch (error) {
+      console.error('Error loading data:', error);
+    }
+  }
+  ngOnInit() {
+    this.getListExcel();
+  }
+  openLink(url: string) {
+    window.open(url, "_blank");
+  }
+
+
+  openAlertModal(message?: string) {
+    const modalRef = this.modalService.open(AlertModalComponent, {
+      centered: true,
+      backdrop: 'static'
+    })
+    modalRef.componentInstance.message = message ? message : ""
+    modalRef.result.then(result => {
+      this.modalService.dismissAll()
+    }, reason => {
+      this.modalService.dismissAll()
+    })
+  }
+  coverDate(date: string) {
+    return date.split('-').reverse().join('/')
+  }
+}

src/app/DPU/myskill-x/myportal/management/management.component.html

+<p>
+  management works!
+</p>

src/app/DPU/myskill-x/myportal/management/management.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 { ManagementComponent } from './management.component';
+
+describe('ManagementComponent', () => {
+  let component: ManagementComponent;
+  let fixture: ComponentFixture<ManagementComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ManagementComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ManagementComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/DPU/myskill-x/myportal/management/management.component.ts

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

src/app/DPU/myskill-x/myportal/management/portal-category-list-approve/approve-course/approve-course.component.ts

+import { Component, OnInit } from '@angular/core';
+import { NgbModal, NgbPaginationModule } from '@ng-bootstrap/ng-bootstrap';
+import { CourseModel } from '../../../../../models/course.model';
+import { CourseService } from '../../../../../services/course.service';
+import { OpenImageComponent } from '../../../open-image/open-image.component';
+import { ConfirmModalComponent } from '../../../confirm-modal/confirm-modal.component';
+import { AlertModalComponent } from '../../../alert-modal/alert-modal.component';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { RouterModule } from '@angular/router';
+import { NgSelectModule } from '@ng-select/ng-select';
+import { SharedModule } from '../../../../../../shared/shared.module';
+import { MatDialogModule } from '@angular/material/dialog';
+import { TranslateModule } from '@ngx-translate/core';
+import { firstValueFrom } from 'rxjs';
+declare var require: any
+import FileSaver from 'file-saver';
+@Component({
+  selector: 'app-approve-course',
+  templateUrl: './approve-course.component.html',
+  styleUrls: ['./approve-course.component.scss'],
+  standalone: true,
+  imports: [
+    CommonModule,
+    FormsModule,
+    RouterModule,
+    NgSelectModule,
+    SharedModule,
+    MatDialogModule,
+    TranslateModule,
+    NgbPaginationModule,
+  ],
+})
+export class ApproveCourseComponent implements OnInit {
+  page = 0;
+  pageSize = 10;
+  listCourse: CourseModel[] = []
+  search: string = ''
+  pagedItems: CourseModel[] = [];
+  constructor(private modalService: NgbModal, private courseService: CourseService) {
+  }
+  get totalItems(): number {
+    return this.search == ''
+      ? this.listCourse.length
+      : this.filterListCourse().length;
+  }
+
+  get totalPages(): number {
+    return Math.ceil(this.totalItems / this.pageSize);
+  }
+
+  get totalPagesArray(): number[] {
+    return Array(this.totalPages).fill(0);
+  }
+
+  goToPage(index: number): void {
+    if (index < 0 || index >= this.totalPages) return;
+    this.page = index;
+    this.updatePagedItems();
+  }
+  updatePagedItems() {
+    const data: CourseModel[] = this.search === '' ? this.listCourse : this.filterListCourse();
+    const start = this.page * this.pageSize;
+    const end = start + this.pageSize;
+    this.pagedItems = data.slice(start, end);
+  }
+  openEmployeeModal(image: string) {
+    const modalRef = this.modalService.open(OpenImageComponent, {
+      centered: true,
+      windowClass: 'my-dialog-img-preview'
+    })
+    modalRef.componentInstance.linkImage = image
+    modalRef.result.then(result => {
+    }, reason => {
+      this.modalService.dismissAll()
+    })
+  }
+  async downloadFile(logId: string) {
+    try {
+      const data = await this.courseService.downloadFile(logId).toPromise();
+      if (data) {
+        FileSaver.saveAs(new Blob([data]), "file_download.json");
+      }
+    } catch (error) {
+      console.error('Error loading data:', error);
+    }
+  }
+  filterListCourse() {
+    return this.listCourse.filter(x => x.thName.toLowerCase().includes(this.search.toLowerCase()) || x.engName.toLowerCase().includes(this.search.toLowerCase()))
+  }
+  async getListCourse() {
+    try {
+      const data = await firstValueFrom(this.courseService.getListCourse('0'));
+      this.listCourse = data.map(x => new CourseModel(x))
+    } catch (error) {
+      console.error('Error loading data:', error);
+    }
+  }
+  onApprove(item: CourseModel) {
+    const modalRef = this.modalService.open(ConfirmModalComponent, {
+      centered: true,
+      backdrop: 'static',
+    })
+    modalRef.componentInstance.message = 'คุณต้องการอนุมัติข้อมูลหรือไม่'
+    modalRef.result.then(result => {
+      item.status = 1
+      this.courseService.approve(item).subscribe(result => {
+        if (result) {
+          this.modalService.dismissAll()
+          this.openAlertModal('บันทึกข้อมูลสำเร็จ')
+          this.getListCourse();
+        } else {
+          this.openAlertModal('ไม่สามารถบันทึกข้อมูลได้')
+        }
+      }, error => {
+        this.openAlertModal(error.message)
+      })
+    }, reject => { })
+  }
+  onCancelApprove(item: CourseModel) {
+    const modalRef = this.modalService.open(ConfirmModalComponent, {
+      centered: true,
+      backdrop: 'static',
+    })
+    modalRef.componentInstance.message = 'คุณต้องการไม่อนุมัติข้อมูลหรือไม่'
+    modalRef.result.then(result => {
+      item.status = 2
+      this.courseService.approve(item).subscribe(result => {
+        if (result) {
+          this.openAlertModal('บันทึกข้อมูลสำเร็จ')
+          this.getListCourse();
+        } else {
+          this.openAlertModal('ไม่สามารถบันทึกข้อมูลได้')
+        }
+      }, error => {
+        this.openAlertModal(error.message)
+      })
+    }, reject => { })
+  }
+  ngOnInit() {
+    this.getListCourse();
+  }
+
+  deleteFile(item: CourseModel) {
+    const modalRef = this.modalService.open(ConfirmModalComponent, {
+      centered: true,
+      backdrop: 'static',
+    })
+    modalRef.componentInstance.message = 'คุณต้องการลบข้อมูลหรือไม่'
+    modalRef.result.then(result => {
+      this.courseService.deleteCourse(item).subscribe(result => {
+        if (result) {
+          this.openAlertModal('ลบข้อมูลสำเร็จ')
+          this.getListCourse();
+        } else {
+          this.openAlertModal('ไม่สามารถลบข้อมูลได้')
+        }
+      }, error => {
+        this.openAlertModal(error.message)
+      })
+    }, reject => { })
+
+  }
+
+  openAlertModal(message?: string) {
+    const modalRef = this.modalService.open(AlertModalComponent, {
+      centered: true,
+      backdrop: 'static'
+    })
+    modalRef.componentInstance.message = message ? message : ""
+    modalRef.result.then(result => {
+      // this.modalService.dismissAll()
+    }, reason => {
+      // this.modalService.dismissAll()
+    })
+  }
+  openLink(url: string) {
+    window.open(url, "_blank");
+  }
+}

src/app/DPU/myskill-x/myportal/management/portal-category-list-approve/approve-doc/approve-doc.component.ts

+import { Component, OnInit } from '@angular/core';
+import { NgbModal, NgbPaginationModule } from '@ng-bootstrap/ng-bootstrap';
+import { OpenImageComponent } from '../../../open-image/open-image.component';
+import { ConfirmModalComponent } from '../../../confirm-modal/confirm-modal.component';
+import { AlertModalComponent } from '../../../alert-modal/alert-modal.component';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { RouterModule } from '@angular/router';
+import { NgSelectModule } from '@ng-select/ng-select';
+import { SharedModule } from '../../../../../../shared/shared.module';
+import { MatDialogModule } from '@angular/material/dialog';
+import { TranslateModule } from '@ngx-translate/core';
+import { DocumentModel } from '../../../../../models/document.model';
+import { DocumentService } from '../../../../../services/document.service';
+import { firstValueFrom } from 'rxjs';
+declare var require: any
+import FileSaver from 'file-saver';
+@Component({
+  selector: 'app-approve-doc',
+  templateUrl: './approve-doc.component.html',
+  styleUrls: ['./approve-doc.component.scss'],
+  standalone: true,
+  imports: [
+    CommonModule,
+    FormsModule,
+    RouterModule,
+    NgSelectModule,
+    SharedModule,
+    MatDialogModule,
+    TranslateModule,
+    NgbPaginationModule,
+  ],
+})
+export class ApproveDocComponent implements OnInit {
+  page = 0;
+  pageSize = 10;
+  listDoc: DocumentModel[] = []
+  search: string = ''
+  pagedItems: DocumentModel[] = [];
+  constructor(private modalService: NgbModal, private documentService: DocumentService) {
+  }
+  get totalItems(): number {
+    return this.search == ''
+      ? this.listDoc.length
+      : this.filterListDoc().length;
+  }
+
+  get totalPages(): number {
+    return Math.ceil(this.totalItems / this.pageSize);
+  }
+
+  get totalPagesArray(): number[] {
+    return Array(this.totalPages).fill(0);
+  }
+
+  goToPage(index: number): void {
+    if (index < 0 || index >= this.totalPages) return;
+    this.page = index;
+    this.updatePagedItems();
+  }
+  updatePagedItems() {
+    const data: DocumentModel[] = this.search === '' ? this.listDoc : this.filterListDoc();
+    const start = this.page * this.pageSize;
+    const end = start + this.pageSize;
+    this.pagedItems = data.slice(start, end);
+  }
+  openEmployeeModal(image: string) {
+    const modalRef = this.modalService.open(OpenImageComponent, {
+      centered: true,
+      windowClass: 'my-dialog-img-preview'
+    })
+    modalRef.componentInstance.linkImage = image
+    modalRef.result.then(result => {
+    }, reason => {
+      this.modalService.dismissAll()
+    })
+  }
+  async downloadFile(logId: string, lang: string) {
+    try {
+      const data = await this.documentService.downloadFile(logId, lang).toPromise();
+      if (data) {
+        FileSaver.saveAs(new Blob([data]), "file_download.doc");
+      }
+    } catch (error) {
+      console.error('Error loading data:', error);
+    }
+  }
+  openLink(url: string) {
+    window.open(url, "_blank");
+  }
+  filterListDoc() {
+    return this.listDoc.filter(x => x.thName.toLowerCase().includes(this.search.toLowerCase()) || x.engName.toLowerCase().includes(this.search.toLowerCase()))
+  }
+  async getListDoc() {
+    try {
+      const data = await firstValueFrom(this.documentService.getListDoc('0'));
+      this.listDoc = data.map(x => new DocumentModel(x))
+    } catch (error) {
+      console.error('Error loading data:', error);
+    }
+  }
+  onApprove(item: DocumentModel) {
+    const modalRef = this.modalService.open(ConfirmModalComponent, {
+      centered: true,
+      backdrop: 'static',
+    })
+    modalRef.componentInstance.message = 'คุณต้องการอนุมัติข้อมูลหรือไม่'
+    modalRef.result.then(result => {
+      item.status = 1
+      this.documentService.approve(item).subscribe(result => {
+        if (result) {
+          this.modalService.dismissAll()
+          this.openAlertModal('บันทึกข้อมูลสำเร็จ')
+          this.getListDoc();
+        } else {
+          this.openAlertModal('ไม่สามารถบันทึกข้อมูลได้')
+        }
+      }, error => {
+        this.openAlertModal(error.message)
+      })
+    }, reject => { })
+  }
+  onCancelApprove(item: DocumentModel) {
+    const modalRef = this.modalService.open(ConfirmModalComponent, {
+      centered: true,
+      backdrop: 'static',
+    })
+    modalRef.componentInstance.message = 'คุณต้องการไม่อนุมัติข้อมูลหรือไม่'
+    modalRef.result.then(result => {
+      item.status = 2
+      this.documentService.approve(item).subscribe(result => {
+        if (result) {
+          this.openAlertModal('บันทึกข้อมูลสำเร็จ')
+          this.getListDoc();
+        } else {
+          this.openAlertModal('ไม่สามารถบันทึกข้อมูลได้')
+        }
+      }, error => {
+        this.openAlertModal(error.message)
+      })
+    }, reject => { })
+  }
+  ngOnInit() {
+    this.getListDoc();
+  }
+  deleteFile(item: DocumentModel) {
+    const modalRef = this.modalService.open(ConfirmModalComponent, {
+      centered: true,
+      backdrop: 'static',
+    })
+    modalRef.componentInstance.message = 'คุณต้องการลบข้อมูลหรือไม่'
+    modalRef.result.then(result => {
+      this.documentService.deleteExcel(item).subscribe(result => {
+        if (result) {
+          this.openAlertModal('ลบข้อมูลสำเร็จ')
+          this.getListDoc();
+        } else {
+          this.openAlertModal('ไม่สามารถลบข้อมูลได้')
+        }
+      }, error => {
+        this.openAlertModal(error.message)
+      })
+    }, reject => { })
+  }
+
+  openAlertModal(message?: string) {
+    const modalRef = this.modalService.open(AlertModalComponent, {
+      centered: true,
+      backdrop: 'static'
+    })
+    modalRef.componentInstance.message = message ? message : ""
+    modalRef.result.then(result => {
+      // this.modalService.dismissAll()
+    }, reason => {
+      // this.modalService.dismissAll()
+    })
+  }
+
+}

src/app/DPU/myskill-x/myportal/management/portal-category-list-approve/approve-excel/approve-excel.component.ts

+import { Component, OnInit } from '@angular/core';
+import { NgbModal, NgbPaginationModule } from '@ng-bootstrap/ng-bootstrap';
+import { OpenImageComponent } from '../../../open-image/open-image.component';
+import { ConfirmModalComponent } from '../../../confirm-modal/confirm-modal.component';
+import { AlertModalComponent } from '../../../alert-modal/alert-modal.component';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { RouterModule } from '@angular/router';
+import { NgSelectModule } from '@ng-select/ng-select';
+import { SharedModule } from '../../../../../../shared/shared.module';
+import { MatDialogModule } from '@angular/material/dialog';
+import { TranslateModule } from '@ngx-translate/core';
+import { ExcelModel } from '../../../../../models/excel.model';
+import { ExcelService } from '../../../../../services/excel.service';
+import { firstValueFrom } from 'rxjs';
+declare var require: any
+import FileSaver from 'file-saver';
+import { TemplateModel } from '../../../../../models/template.model';
+@Component({
+  selector: 'app-approve-excel',
+  templateUrl: './approve-excel.component.html',
+  styleUrls: ['./approve-excel.component.scss'],
+  standalone: true,
+  imports: [
+    CommonModule,
+    FormsModule,
+    RouterModule,
+    NgSelectModule,
+    SharedModule,
+    MatDialogModule,
+    TranslateModule,
+    NgbPaginationModule,
+  ],
+})
+export class ApproveExcelComponent implements OnInit {
+  page = 0;
+  pageSize = 10;
+  listExcel: ExcelModel[] = []
+  search: string = ''
+  pagedItems: ExcelModel[] = [];
+  constructor(private modalService: NgbModal, private excelService: ExcelService) {
+  }
+  get totalItems(): number {
+    return this.search == ''
+      ? this.listExcel.length
+      : this.filterListExcel().length;
+  }
+
+  get totalPages(): number {
+    return Math.ceil(this.totalItems / this.pageSize);
+  }
+
+  get totalPagesArray(): number[] {
+    return Array(this.totalPages).fill(0);
+  }
+
+  goToPage(index: number): void {
+    if (index < 0 || index >= this.totalPages) return;
+    this.page = index;
+    this.updatePagedItems();
+  }
+  updatePagedItems() {
+    const data: ExcelModel[] = this.search === '' ? this.listExcel : this.filterListExcel();
+    const start = this.page * this.pageSize;
+    const end = start + this.pageSize;
+    this.pagedItems = data.slice(start, end);
+  }
+  openEmployeeModal(image: string) {
+    const modalRef = this.modalService.open(OpenImageComponent, {
+      centered: true,
+      windowClass: 'my-dialog-img-preview'
+    })
+    modalRef.componentInstance.linkImage = image
+    modalRef.result.then(result => {
+    }, reason => {
+      this.modalService.dismissAll()
+    })
+  }
+  async downloadFile(logId: string) {
+    try {
+      const data = await this.excelService.downloadFile(logId).toPromise();
+      if (data) {
+        FileSaver.saveAs(new Blob([data]), "file_download.xlsx");
+      }
+    } catch (error) {
+      console.error('Error loading data:', error);
+    }
+  }
+  filterListExcel() {
+    return this.listExcel.filter(x => x.thName.toLowerCase().includes(this.search.toLowerCase()) || x.engName.toLowerCase().includes(this.search.toLowerCase()))
+  }
+  async getListExcel() {
+    try {
+      const data = await firstValueFrom(this.excelService.getListExcel('0'));
+      this.listExcel = data.map(x => new ExcelModel(x));
+    } catch (error) {
+      console.error('Error loading data:', error);
+      this.listExcel = [];
+    }
+  }
+  onApprove(item: ExcelModel) {
+    const modalRef = this.modalService.open(ConfirmModalComponent, {
+      centered: true,
+      backdrop: 'static',
+    })
+    modalRef.componentInstance.message = 'คุณต้องการอนุมัติข้อมูลหรือไม่'
+    modalRef.result.then(result => {
+      item.status = 1
+      this.excelService.approve(item).subscribe(result => {
+        if (result) {
+          this.openAlertModal('บันทึกข้อมูลสำเร็จ')
+          this.getListExcel();
+        } else {
+          this.openAlertModal('ไม่สามารถบันทึกข้อมูลได้')
+        }
+      }, error => {
+        this.openAlertModal(error.message)
+      })
+    }, reject => { })
+  }
+  onCancelApprove(item: ExcelModel) {
+    const modalRef = this.modalService.open(ConfirmModalComponent, {
+      centered: true,
+      backdrop: 'static',
+    })
+    modalRef.componentInstance.message = 'คุณต้องการไม่อนุมัติข้อมูลหรือไม่'
+    modalRef.result.then(result => {
+      item.status = 2
+      this.excelService.approve(item).subscribe(result => {
+        if (result) {
+          this.modalService.dismissAll()
+          this.openAlertModal('บันทึกข้อมูลสำเร็จ')
+          this.getListExcel();
+        } else {
+          this.openAlertModal('ไม่สามารถบันทึกข้อมูลได้')
+        }
+      }, error => {
+        this.openAlertModal(error.message)
+      })
+    }, reject => { })
+  }
+  ngOnInit() {
+    this.getListExcel();
+    console.log('search:', this.search, 'length:', this.search?.length)
+
+  }
+  deleteFile(item: ExcelModel) {
+    const modalRef = this.modalService.open(ConfirmModalComponent, {
+      centered: true,
+      backdrop: 'static',
+    })
+    modalRef.componentInstance.message = 'คุณต้องการลบข้อมูลหรือไม่'
+    modalRef.result.then(result => {
+      this.excelService.deleteExcel(item).subscribe(result => {
+        if (result) {
+          this.openAlertModal('ลบข้อมูลสำเร็จ')
+          this.getListExcel();
+        } else {
+          this.openAlertModal('ไม่สามารถลบข้อมูลได้')
+        }
+      }, error => {
+        this.openAlertModal(error.message)
+      })
+    }, reject => { })
+  }
+
+  openAlertModal(message?: string) {
+    const modalRef = this.modalService.open(AlertModalComponent, {
+      centered: true,
+      backdrop: 'static'
+    })
+    modalRef.componentInstance.message = message ? message : ""
+    modalRef.result.then(result => {
+      // this.modalService.dismissAll()
+    }, reason => {
+      // this.modalService.dismissAll()
+    })
+  }
+  openLink(url: string) {
+    window.open(url, "_blank");
+  }
+}

src/app/DPU/myskill-x/myportal/management/portal-category-list-approve/portal-category-list-approve.component.html

+<app-page-header [title]="'รายการเอกสารรอการอนุมัติ'" [activeTitle]="'ผู้ดูแลระบบ'" [title1]="'รายการเอกสารรอการอนุมัติ'"></app-page-header>
+
+<!-- <div class="row">
+  <div class="col-12">
+    <div class="card card-body">
+      <h4 class="card-title">รายการเอกสารรอการอนุมัติ</h4>
+      <div class="row justify-content-center">
+        <div class="col-md-4 " *ngFor="let c of testdata|slice: (page-1) * pageSize : (page-1) * pageSize + pageSize">
+          <div class="card border border-2">
+            <div class="card-body text-center">
+              <img src="{{ c.img }}" class="rounded-circle border p-1" width="100">
+              <h3 class="card-title mt-3 mb-0">{{c.name}}</h3>
+            </div>
+            <div class="d-flex  justify-content-between bg-light border-top p-3">
+              <div>
+                <span class="align-middle">จำนวนเอกสาร {{ c.document }} ฉบับ</span>
+              </div>
+              <div >
+                <button class="btn btn-info btn-sm text-nowrap" (click)="openView(c.id)">รายละเอียด</button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div> -->
+
+<div class="max-w-7xl mx-auto">
+  <div class="box p-4">
+    <h4 class="text-xl font-semibold text-gray-800 mb-6">รายการเอกสารรอการอนุมัติ</h4>
+
+    <!-- Flex แทน Grid -->
+    <div class="flex flex-wrap justify-center gap-6">
+
+      <div
+        class=" bg-white rounded-xl shadow-lg overflow-hidden transform hover:scale-105 transition duration-300 ease-in-out flex flex-col" style="width: 30%;"
+        *ngFor="let c of testdata | slice: (page-1) * pageSize : (page-1) * pageSize + pageSize"
+      >
+        <div class="p-8 text-center">
+          <div class="w-24 h-24 mx-auto rounded-full bg-green-100 flex items-center justify-center shadow-inner">
+            <img src="{{ c.img }}" class="" alt="" />
+          </div>
+          <h3 class="text-2xl font-bold text-gray-800 mt-6 mb-2">{{ c.name }}</h3>
+        </div>
+
+        <!-- Footer -->
+        <div class="mt-auto">
+          <div class="flex justify-between items-center bg-gray-50 border-t border-gray-200 p-4">
+            <div>
+              <span class="text-sm text-gray-700">จำนวนเอกสาร {{ c.document }} ฉบับ</span>
+            </div>
+            <div>
+              <button
+                class="bg-primary inline-flex items-center px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-md shadow-md 
+                active hover:bg-success hover:scale-110 transition duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50"
+                (click)="openView(c.id)"
+              >
+                รายละเอียด
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+    </div>
+  </div>
+</div>
\ No newline at end of file

src/app/DPU/myskill-x/myportal/management/portal-category-list-approve/portal-category-list-approve.component.ts

+import { Component, OnInit } from "@angular/core";
+import { NgbModal } from "@ng-bootstrap/ng-bootstrap";
+import { FormBuilder, FormGroup, FormsModule, Validators } from "@angular/forms";
+import { Router, RouterModule } from "@angular/router";
+import { ExcelService } from "../../../../services/excel.service";
+import { DocumentService } from "../../../../services/document.service";
+import { CourseService } from "../../../../services/course.service";
+import { CommonModule } from "@angular/common";
+import { TranslateModule } from "@ngx-translate/core";
+import { SharedModule } from "../../../../../shared/shared.module";
+
+@Component({
+  selector: "app-portal-category-list-approve",
+  templateUrl: "./portal-category-list-approve.component.html",
+  styleUrls: ["./portal-category-list-approve.component.scss"],
+  standalone: true,
+  imports: [
+    CommonModule,
+    FormsModule,
+    RouterModule,
+    TranslateModule,
+    SharedModule,
+  ],
+})
+export class PortalCategoryListApproveComponent implements OnInit {
+  constructor(
+    private modalService: NgbModal,
+    private router: Router,
+    private excelService: ExcelService, private documentService: DocumentService, private courseService: CourseService
+  ) { }
+
+  page = 1;
+  pageSize = 7;
+
+  testdata: {
+    id: string
+    img: String;
+    name: String;
+    details: String;
+    document: String;
+  }[] = [];
+
+  ngOnInit() {
+
+    this.testdata = [
+      {
+        id: '1',
+        img: "assets/images/icons/excel.png",
+        name: "Excel",
+        details: "xxxxxxxxxxxxxxxxxxxxxxxxxxx",
+        document: "0"
+      },
+      {
+        id: '2',
+        img: "assets/images/icons/document.png",
+        name: "Document",
+        details: "xxxxxxxxxxxxxxxxxxxxxxxxxxx",
+        document: "0"
+      },
+      {
+        id: '3',
+        img: "assets/images/icons/course.png",
+        name: "Course",
+        details: "xxxxxxxxxxxxxxxxxxxxxxxxxxx",
+        document: "0"
+      },
+    ];
+    this.getListCount();
+
+  }
+  openView(id: string) {
+    if (id == '1') {
+      this.router.navigate(['/admin/approve-excel']);
+    } else if (id == '2') {
+      this.router.navigate(['/admin/approve-doc']);
+    } else if (id == '3') {
+      this.router.navigate(['/admin/approve-course']);
+    }
+  }
+  async getListCount() {
+    try {
+      const countExcel = await this.excelService.getCount().toPromise();
+      const countDoc = await this.documentService.getCount().toPromise();
+      const countCourse = await this.courseService.getCount().toPromise();
+      this.testdata.forEach((x, i) => {
+        if (i == 0) {
+          x.document = (countExcel ?? 0).toString();
+        } else if (i == 1) {
+          x.document = (countDoc ?? 0).toString();
+        } else if (i == 2) {
+          x.document = (countCourse ?? 0).toString();
+        }
+      });
+    } catch (error) {
+      console.error('Error loading data:', error);
+    }
+  }
+  openModal(targetModal: NgbModal) {
+    this.modalService.open(targetModal, {
+      centered: true,
+      backdrop: "static",
+    });
+  }
+
+  closeBtnClick() {
+    this.modalService.dismissAll();
+  }
+
+  routerLink(path: String, type: String) {
+    this.router.navigate([path, { type: type }])
+  }
+
+}

src/app/DPU/myskill-x/myportal/myportal.component.html

+<p>
+  myportal works!
+</p>

src/app/DPU/myskill-x/myportal/myportal.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 { MyportalComponent } from './myportal.component';
+
+describe('MyportalComponent', () => {
+  let component: MyportalComponent;
+  let fixture: ComponentFixture<MyportalComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ MyportalComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MyportalComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/DPU/myskill-x/myportal/myportal.component.ts

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

src/app/DPU/myskill-x/myportal/open-image/open-image.component.html

+<div class="p-4">
+  <img [src]="linkImage" alt="Image Preview" class="w-full h-auto max-w-full block mx-auto" />
+
+  <div class="mt-4 text-right">
+    <button
+      (click)="onClose()"
+      class="px-4 py-2 bg-gray-200 text-gray-800 rounded-md hover:bg-gray-300 transition-colors duration-200"
+    >
+      ปิด
+    </button>
+  </div>
+</div>
\ No newline at end of file

src/app/DPU/myskill-x/myportal/open-image/open-image.component.ts

+import { Component, OnInit, Inject } from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog'; // นำเข้า MAT_DIALOG_DATA และ MatDialogRef
+
+@Component({
+  selector: 'app-open-image',
+  templateUrl: './open-image.component.html',
+  styleUrls: ['./open-image.component.scss']
+})
+export class OpenImageComponent implements OnInit {
+  linkImage: string = '';
+
+  constructor(
+    @Inject(MAT_DIALOG_DATA) public data: { linkImage: string },
+    public dialogRef: MatDialogRef<OpenImageComponent>
+  ) { }
+
+  ngOnInit(): void {
+    if (this.data && this.data.linkImage) {
+      this.linkImage = this.data.linkImage;
+    }
+  }
+  onClose(): void {
+    this.dialogRef.close();
+  }
+}
\ No newline at end of file

src/app/DPU/myskill-x/myportal/portal-category-list/portal-category-list.component.html

+<app-page-header [title]="'รายการเอกสาร'" [activeTitle]="'ผู้ดูแลระบบ'" [title1]="'รายการเอกสาร'"></app-page-header>
+<!-- <div class="row">
+  <div class="col-12">
+    <div class="card card-body">
+      <h4 class="card-title">รายการเอกสาร</h4>
+      <div class="row justify-content-center">
+        <div class="col-lg-4 col-md-6  col-sm-6 col-12" *ngFor="let c of testdata|slice: (page-1) * pageSize : (page-1) * pageSize + pageSize">
+          <div class="card border-border-2">
+            <div class="card-body text-center">
+              <img src="{{ c.img }}" class="rounded-circle border p-1" width="100">
+              <h3 class="card-title mt-3 mb-0">{{c.name}}</h3>
+            </div>
+            <div class="d-flex  justify-content-between bg-light border-top p-3">
+              <div>
+                <span class="align-middle">จำนวนเอกสาร {{ c.document }} ฉบับ</span>
+              </div>
+              <div >
+                <button class="btn btn-info btn-sm text-nowrap" (click)="openView(c.id)">รายละเอียด</button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div> -->
+<div class="max-w-7xl mx-auto">
+  <div class="box p-4">
+    <h4 class="text-xl font-semibold text-gray-800 mb-6">รายการเอกสาร</h4>
+
+    <!-- Flex แทน Grid -->
+    <div class="flex flex-wrap justify-center gap-6">
+
+      <div
+        class=" bg-white rounded-xl shadow-lg overflow-hidden transform hover:scale-105 transition duration-300 ease-in-out flex flex-col" style="width: 30%;"
+        *ngFor="let c of testdata | slice: (page-1) * pageSize : (page-1) * pageSize + pageSize"
+      >
+        <div class="p-8 text-center">
+          <div class="w-24 h-24 mx-auto rounded-full bg-green-100 flex items-center justify-center shadow-inner">
+            <img src="{{ c.img }}" class="" alt="" />
+          </div>
+          <h3 class="text-2xl font-bold text-gray-800 mt-6 mb-2">{{ c.name }}</h3>
+        </div>
+
+        <!-- Footer -->
+        <div class="mt-auto">
+          <div class="flex justify-between items-center bg-gray-50 border-t border-gray-200 p-4">
+            <div>
+              <span class="text-sm text-gray-700">จำนวนเอกสาร {{ c.document }} ฉบับ</span>
+            </div>
+            <div>
+              <button
+                class="bg-primary inline-flex items-center px-4 py-2 bg-blue-600 hover:bg-blue-700 
+                text-white text-sm font-medium rounded-md shadow-md ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50
+                active hover:bg-success hover:scale-110 transition duration-300"
+                (click)="openView(c.id)"
+              >
+                รายละเอียด
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+    </div>
+  </div>
+</div>

src/app/DPU/myskill-x/myportal/portal-category-list/portal-category-list.component.ts

+import { Component, OnInit } from '@angular/core';
+import { Router, RouterModule } from '@angular/router';
+import { ExcelService } from '../../../services/excel.service';
+import { DocumentService } from '../../../services/document.service';
+import { CourseService } from '../../../services/course.service';
+import { WidgetService } from '../../../services/widgets.service';
+import { CommonModule } from '@angular/common';
+import { TranslateModule } from '@ngx-translate/core';
+import { FormsModule } from '@angular/forms';
+import { NgSelectModule } from '@ng-select/ng-select';
+import { SharedModule } from '../../../../shared/shared.module';
+
+
+@Component({
+  selector: 'app-portal-category-list',
+  templateUrl: './portal-category-list.component.html',
+  styleUrls: ['./portal-category-list.component.scss'],
+  standalone: true,
+  imports: [
+    CommonModule,
+    FormsModule,
+    RouterModule,
+    TranslateModule,
+    SharedModule,
+  ],
+})
+export class PortalCategoryListComponent implements OnInit {
+
+  constructor(
+    private routes: Router,
+    private excelService: ExcelService, private documentService: DocumentService, private courseService: CourseService, private widgetService: WidgetService
+  ) { }
+  page = 1;
+  pageSize = 10;
+  testdata: {
+    id: string;
+    img: String;
+    name: String;
+    details: String;
+    document: String;
+  }[] = [];
+
+  ngOnInit() {
+
+    this.testdata = [
+      {
+        id: '1',
+        img: "assets/images/icons/excel.png",
+        name: "Excel",
+        details: "xxxxxxxxxxxxxxxxxxxxxxxxxxx",
+        document: "0"
+      },
+      {
+        id: '2',
+        img: "assets/images/icons/document.png",
+        name: "Document",
+        details: "xxxxxxxxxxxxxxxxxxxxxxxxxxx",
+        document: "0"
+      },
+      {
+        id: '3',
+        img: "assets/images/icons/course.png",
+        name: "Course",
+        details: "xxxxxxxxxxxxxxxxxxxxxxxxxxx",
+        document: "0"
+      },
+      {
+        id: '4',
+        img: "assets/images/icons/widget.png",
+        name: "Widgets",
+        details: "xxxxxxxxxxxxxxxxxxxxxxxxxxx",
+        document: "0"
+      },
+      {
+        id: '5',
+        img: "assets/images/faces/1.jpg",
+        name: "BI",
+        details: "xxxxxxxxxxxxxxxxxxxxxxxxxxx",
+        document: "0"
+      },
+
+    ];
+    this.getListCount();
+  }
+  async getListCount() {
+    try {
+      const countExcel = await this.excelService.getCountContent().toPromise();
+      const countDoc = await this.documentService.getCountContent().toPromise();
+      const countCourse = await this.courseService.getCountContent().toPromise();
+      const countWidgets = await this.widgetService.getCount().toPromise();
+      this.testdata.forEach((x, i) => {
+        if (i == 0) {
+          x.document = countExcel!.toString()
+        } else if (i == 1) {
+          x.document = countDoc!.toString()
+        } else if (i == 2) {
+          x.document = countCourse!.toString()
+        } else if (i == 3) {
+          x.document = countWidgets!.toString()
+        }
+      })
+    } catch (error) {
+      console.error('Error loading data:', error);
+    }
+  }
+  openView(id: string) {
+    if (id == '1') {
+      this.routes.navigate(['/admin/view-list-excel']);
+    } else if (id == '2') {
+      this.routes.navigate(['/admin/view-list-doc']);
+    } else if (id == '3') {
+      this.routes.navigate(['/admin/view-list-course']);
+    } else if (id == '4') {
+      this.routes.navigate(['/admin/view-list-widgets']);
+    }
+  }
+
+}

src/app/DPU/myskill-x/myportal/portal-create-category/portal-create-category.component.html

+<app-page-header [title]="'รายการอัพโหลดเอกสาร'" [activeTitle]="'ผู้ดูแลระบบ'"
+  [title1]="'รายการอัพโหลดเอกสาร'"></app-page-header>
+<!-- <div class="row">
+  <div class="col-12">
+    <div class="card card-body">
+      <h4 class="card-title">รายการอัพโหลดเอกสาร</h4>
+      <div class="row justify-content-center">
+        <div class="col-md-4 " *ngFor="let c of testdata|slice: (page-1) * pageSize : (page-1) * pageSize + pageSize">
+          <div class="card border border-2">
+            <div class="card-body text-center">
+              <img src="{{ c.img }}" class="rounded-circle border p-1" width="100">
+              <h3 class="card-title mt-3 mb-0">{{c.name}}</h3>
+            </div>
+            <div class="d-flex  justify-content-between bg-light border-top p-3">
+              <div>
+                  <span class="align-middle">จำนวนเอกสาร {{ c.document }} ฉบับ</span>
+              </div>
+              <div >
+                <button class="btn btn-info btn-sm text-nowrap" (click)="openView(c.id)">รายละเอียด</button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div> -->
+
+
+
+<div class="max-w-7xl mx-auto">
+  <div class="box p-4">
+    <h4 class="text-xl font-semibold text-gray-800 mb-6">รายการเอกสาร</h4>
+
+    <!-- Flex แทน Grid -->
+    <div class="flex flex-wrap justify-center gap-6">
+
+      <div
+        class=" bg-white rounded-xl shadow-lg overflow-hidden transform hover:scale-105 transition duration-300 ease-in-out flex flex-col"
+        style="width: 30%;" *ngFor="let c of testdata | slice: (page-1) * pageSize : (page-1) * pageSize + pageSize">
+        <div class="p-8 text-center">
+          <div class="w-24 h-24 mx-auto rounded-full bg-green-100 flex items-center justify-center shadow-inner">
+            <img src="{{ c.img }}" class="" alt="" />
+          </div>
+          <h3 class="text-2xl font-bold text-gray-800 mt-6 mb-2">{{ c.name }}</h3>
+        </div>
+
+        <!-- Footer -->
+        <div class="mt-auto">
+          <div class="flex justify-between items-center bg-gray-50 border-t border-gray-200 p-4">
+            <div>
+              <span class="text-sm text-gray-700">จำนวนเอกสาร {{ c.document }} ฉบับ</span>
+            </div>
+            <div>
+              <button
+                class="bg-primary inline-flex items-center px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-md shadow-md 
+                active hover:bg-success hover:scale-110 transition duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50"
+                (click)="openView(c.id)">
+                รายละเอียด
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+    </div>
+  </div>
+</div>
+<!-- Add File -->
+<!-- <ng-template #editTemplateModal let-modal>
+
+  <div class="modal-header">
+
+    <h5 class="modal-title" id="edittemplateLabel">Add File Type Category</h5>
+
+    <button type="button" class="close" (click)="closeBtnClick()" aria-label="Close">
+      <span aria-hidden="true">&times;</span>
+    </button>
+
+  </div>
+
+  <div class="modal-body">
+    <form [formGroup]="edittemplate" (ngSubmit)="onSubmit()">
+
+      <div class="form-group row">
+        <label for="name" class="col-sm-4 col-form-label">ชื่อประเภทไฟล์</label>
+        <div class="col-sm-8">
+          <input type="text" class="form-control" formControlName="Name" id="name" (blur)=logValidationErrors(edittemplate)>
+        </div>
+      </div>
+
+      <div class="form-group row">
+        <label for="position" class="col-sm-4 col-form-label">รายละเอียด</label>
+        <div class="col-sm-8">
+            <textarea class="form-control"></textarea>
+        </div>
+      </div>
+
+      <div class="form-group row">
+        <label for="name" class="col-sm-4 col-form-label">รูปประเภทไฟล์</label>
+        <div class="col-sm-8">
+          <input type="file" class="form-control">
+        </div>
+      </div>
+
+      <div class="modal-footer">
+        <button type="button" class="btn btn-secondary" (click)="closeBtnClick()">Close</button>
+
+        <button type="submit" class="btn btn-primary" >Save</button>
+      </div>
+
+    </form>
+  </div>
+</ng-template> -->
\ No newline at end of file

src/app/DPU/myskill-x/myportal/portal-create-category/portal-create-category.component.ts

+import { Component, OnInit } from '@angular/core';
+import { NgbModal } from "@ng-bootstrap/ng-bootstrap";
+import { Router, RouterModule } from '@angular/router';
+import { ExcelService } from '../../../services/excel.service';
+import { DocumentService } from '../../../services/document.service';
+import { CourseService } from '../../../services/course.service';
+import { WidgetService } from '../../../services/widgets.service';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { SharedModule } from '../../../../shared/shared.module';
+import { TranslateModule } from '@ngx-translate/core';
+
+
+
+@Component({
+  selector: 'app-portal-create-category',
+  templateUrl: './portal-create-category.component.html',
+  styleUrls: ['./portal-create-category.component.scss'],
+  standalone: true,
+  imports: [
+    CommonModule,
+    FormsModule,
+    RouterModule,
+    TranslateModule,
+    SharedModule,
+  ],
+})
+export class PortalCreateCategoryComponent implements OnInit {
+
+  constructor(private modalService: NgbModal,private routes: Router,
+    private excelService:ExcelService,
+    private documentService:DocumentService,
+    private courseService:CourseService,
+    private widgetService:WidgetService
+  ) {}
+  page = 1;
+  pageSize = 10;
+
+  testdata: {
+    id:string;
+    img: String;
+    name: String;
+    details: String;
+    document: String;
+  }[] = [];
+
+  ngOnInit() {
+    this.testdata = [
+      {
+        id:'1',
+        img: "assets/images/icons/excel.png",
+        name: "Excel",
+        details: "xxxxxxxxxxxxxxxxxxxxxxxxxxx",
+        document: "0"
+      },
+      {
+        id:'2',
+        img: "assets/images/icons/document.png",
+        name: "Document",
+        details: "xxxxxxxxxxxxxxxxxxxxxxxxxxx",
+        document: "0"
+      },
+      {
+        id:'3',
+        img: "assets/images/icons/course.png",
+        name: "Course",
+        details: "xxxxxxxxxxxxxxxxxxxxxxxxxxx",
+        document: "0"
+      },
+      {
+        id:'4',
+        img: "assets/images/icons/widget.png",
+        name: "Widgets",
+        details: "xxxxxxxxxxxxxxxxxxxxxxxxxxx",
+        document: "0"
+      },
+      {
+        id:'5',
+        img: "assets/images/faces/1.jpg",
+        name: "BI",
+        details: "xxxxxxxxxxxxxxxxxxxxxxxxxxx",
+        document: "0"
+      }
+    ];
+    this.getListCount();
+  }
+  async getListCount(){
+    try {
+      const countExcel = await this.excelService.getCount().toPromise();
+      const countDoc = await this.documentService.getCount().toPromise();
+      const countCourse = await this.courseService.getCount().toPromise();
+      const countWidgets= await this.widgetService.getCount().toPromise();
+      this.testdata.forEach((x ,i) => {
+        if(i == 0){
+          x.document = countExcel!.toString()
+        }else if(i == 1){
+          x.document = countDoc!.toString()
+        }else if(i == 2){
+          x.document = countCourse!.toString()
+        }else if(i == 3){
+          x.document = countWidgets!.toString()
+        }
+      })
+    } catch (error) {
+      console.error('Error loading data:', error);
+    }
+  }
+  openView(id:string){
+    if(id =='1'){
+      this.routes.navigate(['/admin/list-excell']);
+    }else if(id =='2'){
+      this.routes.navigate(['/admin/list-doc']);
+    }else if(id =='3'){
+      this.routes.navigate(['/admin/list-course']);
+    }else if(id =='4'){
+      this.routes.navigate(['/admin/list-widgets']);
+    }
+  }
+  openModal(targetModal: NgbModal) {
+    this.modalService.open(targetModal, {
+      centered: true,
+      backdrop: "static",
+    });
+  }
+
+  closeBtnClick() {
+    this.modalService.dismissAll();
+  }
+
+}

src/app/DPU/myskill-x/myportal/set-excel-reports/excel-list/excel-list.component.scss

+.ti-modal-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    border-bottom-width: 1px;
+    padding-top: 0.75rem;
+    padding-bottom: 0.75rem;
+    padding-left: 1rem;
+    padding-right: 1rem;
+}
+
+::ng-deep [ngbDatepickerDayView].today {
+    background-color: #e0f2fe !important;
+}
+
+::ng-deep [ngbDatepickerDayView].bg-primary {
+    background-color: rgb(var(--primary)) !important;
+    color: #ffffff !important;
+}
+
+/* ให้ datepicker popup ทะลุ modal ได้ */
+::ng-deep ngb-datepicker,
+::ng-deep .ngb-datepicker-container {
+    z-index: 2000 !important;
+}
+
+/* เผื่อ modal มี overflow ซ่อนอยู่ */
+::ng-deep .ti-modal-content {
+    overflow: visible !important;
+}
\ No newline at end of file

src/app/DPU/myskill-x/myportal/set-excel-reports/excel-report-toggle/excel-report-toggle.component.scss

+.ti-modal-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    border-bottom-width: 1px;
+    padding-top: 0.75rem;
+    padding-bottom: 0.75rem;
+    padding-left: 1rem;
+    padding-right: 1rem;
+}
+
+::ng-deep [ngbDatepickerDayView].today {
+    background-color: #e0f2fe !important;
+}
+
+::ng-deep [ngbDatepickerDayView].bg-primary {
+    background-color: rgb(var(--primary)) !important;
+    color: #ffffff !important;
+}
+
+/* ให้ datepicker popup ทะลุ modal ได้ */
+::ng-deep ngb-datepicker,
+::ng-deep .ngb-datepicker-container {
+    z-index: 2000 !important;
+}
+
+/* เผื่อ modal มี overflow ซ่อนอยู่ */
+::ng-deep .ti-modal-content {
+    overflow: visible !important;
+}

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

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

src/app/DPU/myskill-x/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/myskill-x/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/myskill-x/myportal/view-list-course/view-list-course.component.html

+<app-page-header [title]="'รายการหลักสูตร'" [activeTitle]="'ผู้ดูแลระบบ'"
+  [title1]="'รายการหลักสูตร'"></app-page-header>
+<!-- <div class="row" *ngIf="checkType == '1'">
+    <div class="col-12">
+      <div class="card card-body">
+        <h4 class="card-title">รายการหลักสูตร</h4>
+        <div class="d-flex mb-3 mt-3">
+          <input type="text" class="form-control w-25" placeholder="ค้นหา" [(ngModel)]="search" >
+        </div>
+        <div class="table-responsive">
+          <table class="table table-striped mb-0 no-wrap v-middle ">
+            <thead class="bg-info text-white">      
+             <tr>
+                <th class="text-center" scope="col">#</th>
+                <th scope="col">รูปภาพ</th>
+                <th scope="col">ชื่อ</th>
+                <th scope="col">รายละเอียด</th>
+                <th scope="col">ประเภทหลักสูตร</th>
+                <th scope="col">ลิงค์</th>
+                <th scope="col">สถานะ</th>
+                <th scope="col" class="text-center">วันที่อัพโหลด</th>
+                <th scope="col" class="text-center">วันล่าสุดดาวน์โหลด</th>
+                <th scope="col" class="text-center">จำนวนดาวน์โหลด</th>
+                <th scope="col" *ngIf="checkType == '1'"></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr *ngIf="listCourse.length == 0">
+                <td colspan="{{checkType == '1' ? '9' : '8'}}" class="text-center">ไม่พบข้อมูล</td>
+              </tr>
+              <tr  *ngFor="let data of filterListCourse() | slice: (page-1) * pageSize : (page-1) * pageSize + pageSize ; let i = index">
+                <td class="text-center">{{i+1}}</td>
+                <td><img width="100" class="border p-1" src="{{data.getImage()}}" (click)="openDialog(data.getImage())"></td>
+                <td>{{ data.thName }}</td>
+                <td class="text-wrap">{{ data.thDesc }}</td>
+                <td>{{data.courseType}}</td>
+                <td class="text-center"><i class="fas fa-link pointer" (click)="openLink(data.link1)"></i></td>
+                <td class="text-center"> <i class="fas fa-download pointer" (click)="downloadFile(data.courseId)"></i></td>
+                <td class="text-center">{{data.uploadDate}} {{data.uploadTime}}</td>
+                <td class="text-center">{{data.downloadDate}} {{data.downloadTime}}</td>
+                <td class="text-center">{{data.dwTime}} ครั้ง</td>
+                <td *ngIf="checkType == '1'">
+                  <button type="button" class="btn btn-circle btn-danger rounded-circle btn-sm mr-2" (click)="deleteFile(data)" placement="top" ngbTooltip="ลบ"><i class="fas fa-trash-alt"></i></button>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+        <div class="d-flex justify-content-end py-2">
+  
+          <select class="custom-select m-r-5" style="width: auto" [(ngModel)]="pageSize"  (ngModelChange)="page">
+            <option [ngValue]="10">รายการต่อหน้า: 10</option>
+            <option [ngValue]="50">รายการต่อหน้า: 50</option>
+            <option [ngValue]="100">รายการต่อหน้า: 100</option>
+          </select>
+          <ngb-pagination  [(page)]="page" [pageSize]="pageSize" [collectionSize]="listCourse.length" [maxSize]="3" [rotate]="true">
+            <ng-template ngbPaginationPrevious>ก่อนหน้า</ng-template>
+            <ng-template ngbPaginationNext>ถัดไป</ng-template>
+          </ngb-pagination>
+  
+        </div>
+  
+      </div>
+    </div>
+  </div> -->
+
+
+<!-- <div class="row" *ngIf="checkType != '1'">
+  <div class="col-12">
+    <div class="py-3">
+      <input type="text" class="form-control w-25" placeholder="ค้นหา" [(ngModel)]="search">
+    </div>
+  </div>
+  <div class="col-sm-6 col-md-4 col-lg-4  mb-3" *ngFor="let data of filterListCourse()">
+    <div class="card border-5 border border-course h-100 shadow">
+      <div class=" p-2 border-5">
+        <img width="100" class="card-img-top cover" src="{{data.getImage()}}" (click)="openDialog(data.getImage())">
+      </div>
+      <div class="card-body">
+        <h4 class="card-title">{{ data.thName }}</h4>
+        <p class="card-text ">{{ data.thDesc }}</p>
+        <p class="text-info pointer mb-0" (click)="downloadFile(data.courseId)"><i class="fas fa-download mr-1"></i>
+          ดาวน์โหลด <small class="text-muted" *ngIf="data.dwTime > 0">{{coverDate(data.downloadDate)}}
+            {{data.downloadTime}} ( {{data.dwTime}} ครั้ง)</small></p>
+
+        <p class="text-info pointer mb-0" (click)="openLink(data.link1)"><i class="fas fa-link mr-1"></i>
+          ตัวอย่างวิธีใช้งาน</p>
+      </div>
+      <div class="card-footer border-bottom-5">
+        <small class="text-muted">วันที่อัพโหลด {{coverDate(data.uploadDate)}} {{data.uploadTime}}</small>
+      </div>
+    </div>
+  </div>
+</div> -->
+
+<div class="box p-4">
+  <div *ngIf="checkType != '1'" class="flex flex-wrap -mx-2">
+    <div class="w-full">
+      <div class="py-3 px-2">
+        <input type="text"
+          class="block w-full md:w-1/4 px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200 shadow-sm"
+          placeholder="ค้นหา" [(ngModel)]="search" />
+      </div>
+    </div>
+
+    <div class="w-full sm:w-1/2 lg:w-1/3 xl:w-1/3 px-2 mb-4" *ngFor="let data of filterListCourse()">
+      <div
+        class="group bg-white rounded-lg overflow-hidden shadow-lg border-4 border-blue-600 h-full flex flex-col transform transition-all duration-300 ease-in-out hover:scale-[1.02] hover:shadow-xl">
+        <div class="p-4 flex justify-center items-center flex-shrink-0">
+          <img
+            class="w-full h-full object-cover rounded-md shadow-md transform transition-transform duration-300 group-hover:scale-105 cursor-pointer"
+            style="width: 400px; height: 200px; max-width: 100%;" src="{{ data.getImage() }}" alt="{{ data.thName }}"
+            (click)="openDialog(data.getImage())" />
+        </div>
+
+        <div class="p-4 flex-grow">
+          <span class="text-xl font-semibold text-gray-800 mb-2" style="font-size: 18px;">
+            {{ data.thName }}
+          </span>
+          <p class="text-gray-700 text-sm mb-3">{{ data.thDesc }}</p>
+
+          <div class="mb-0 flex items-center justify-center sm:justify-start gap-2 w-1/2 mt-5">
+            <i class="fa fa-link text-blue-600 text-base flex-shrink-0" aria-hidden="true"></i>
+            <input type="text" [value]="'ตัวอย่างวิธีใช้งาน'" (click)="openLink(data.link1)"
+              style="background-color: rgb(76, 117, 207, 1); color: #FFF;"
+              class="flex-grow border border-gray-300 rounded-md px-2 py-1 text-blue-600 cursor-pointer hover:underline focus:outline-none focus:ring-1 focus:ring-blue-500 transition-all duration-200"
+              readonly />
+          </div>
+          <div class="mb-2 flex items-center justify-center sm:justify-start gap-2 w-1/2">
+            <i class="fa fa-download text-blue-600 text-base flex-shrink-0" aria-hidden="true"></i>
+            <input type="text" [value]="'ดาวน์โหลด'" (click)="downloadFile(data.courseId)"
+              style="background-color: rgb(34, 197, 94, 1); color: #FFF;"
+              class="flex-grow border border-gray-300 rounded-md px-2 py-1 text-blue-600 cursor-pointer hover:underline focus:outline-none focus:ring-1 focus:ring-blue-500 transition-all duration-200"
+              readonly />
+            <small class="text-gray-500 text-xs ml-auto hidden sm:block flex-shrink-0" *ngIf="data.dwTime > 0">{{
+              coverDate(data.downloadDate) }} {{ data.downloadTime }} (
+              {{ data.dwTime }} ครั้ง)</small>
+          </div>
+        </div>
+
+        <div class="px-4 py-3 border-t border-gray-200 text-right flex-shrink-0">
+          <small class="text-gray-500 text-xs">วันที่อัพโหลด {{ coverDate(data.uploadDate) }}
+            {{ data.uploadTime }}</small>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
\ No newline at end of file

src/app/DPU/myskill-x/myportal/view-list-course/view-list-course.component.ts

+import { Component, OnInit } from '@angular/core';
+import { AlertModalComponent } from '../alert-modal/alert-modal.component';
+import { NgbModal, NgbPaginationModule } from '@ng-bootstrap/ng-bootstrap';
+import { CourseContentModel } from '../../../models/course-content.model';
+import { CourseService } from '../../../services/course.service';
+import { ActivatedRoute, RouterModule } from '@angular/router';
+import { ConfirmModalComponent } from '../confirm-modal/confirm-modal.component';
+import { OpenImageComponent } from '../open-image/open-image.component';
+import { MatDialog, MatDialogModule } from '@angular/material/dialog';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { NgSelectModule } from '@ng-select/ng-select';
+import { SharedModule } from '../../../../shared/shared.module';
+import { TranslateModule } from '@ngx-translate/core';
+import saveAs from 'file-saver';
+
+@Component({
+  selector: 'app-view-list-course',
+  templateUrl: './view-list-course.component.html',
+  styleUrls: ['./view-list-course.component.scss'],
+  standalone: true,
+  imports: [
+    CommonModule,
+    FormsModule,
+    RouterModule,
+    NgSelectModule,
+    SharedModule,
+    MatDialogModule,
+    NgbPaginationModule,
+    TranslateModule,
+  ],
+})
+export class ViewListCourseComponent implements OnInit {
+  page = 1;
+  pageSize = 10;
+  listCourse: CourseContentModel[] = []
+  dialogRef: any;
+  search: string = ''
+  checkType: string = '0'
+  constructor(private modalService: NgbModal, private courseService: CourseService, private activatedRoute: ActivatedRoute, private dialog: MatDialog,) {
+    this.activatedRoute.paramMap.subscribe(result => {
+      this.checkType = result.get("type")!;
+    });
+  }
+  openDialog(image: string) {
+    const dialogConfig = {
+      width: '750px',
+      disableClose: false,
+      data: {
+        linkImage: image
+      },
+      panelClass: 'my-dialog-img-preview',
+    };
+    this.dialogRef = this.dialog.open(OpenImageComponent, dialogConfig);
+    this.dialogRef.afterClosed().subscribe((result: any) => {
+      console.log('The dialog was closed', result);
+    }, (reason: any) => {
+    });
+  }
+  // openEmployeeModal(image: string) {
+  //   const modalRef = this.modalService.open(OpenImageComponent, {
+  //     centered: true,
+  //     windowClass: 'my-dialog-img-preview'
+  //   })
+  //   modalRef.componentInstance.linkImage = image
+  //   modalRef.result.then(result => {
+  //   }, reason => {
+  //     this.modalService.dismissAll()
+  //   })
+  // }
+  async downloadFile(logId: string) {
+    try {
+      const data = await this.courseService.downloadFileContent(logId).toPromise();
+      if (data) {
+        saveAs(new Blob([data]), "file_download.json");
+      }
+    } catch (error) {
+      console.error('Error loading data:', error);
+    }
+  }
+  // async downloadFile(logId: string) {
+  //   try {
+  //     const data = await this.courseService.downloadFileContent(logId).toPromise();
+  //     if (data) {
+  //       FileSaver.saveAs(new Blob([data]), "file_download.json");
+  //     }
+  //   } catch (error) {
+  //     console.error('Error loading data:', error);
+  //   }
+  // }
+  filterListCourse() {
+    return this.listCourse.filter(x => x.thName.toLowerCase().includes(this.search.toLowerCase()) || x.engName.toLowerCase().includes(this.search.toLowerCase()))
+  }
+  async getListCourse() {
+    try {
+      const data = await this.courseService.getListCourseContent().toPromise();
+      this.listCourse = data!.map(x => new CourseContentModel(x))
+      console.log("🚀 ~ ViewListCourseComponent ~ getListCourse ~ this.listCourse :", this.listCourse)
+    } catch (error) {
+      console.error('Error loading data:', error);
+    }
+  }
+  deleteFile(item: CourseContentModel) {
+    const modalRef = this.modalService.open(ConfirmModalComponent, {
+      centered: true,
+      backdrop: 'static',
+    })
+    modalRef.componentInstance.message = 'คุณต้องการลบข้อมูลหรือไม่'
+    modalRef.result.then(result => {
+      this.courseService.deleteCourseContent(item).subscribe(result => {
+        if (result) {
+          this.openAlertModal('ลบข้อมูลสำเร็จ')
+          this.getListCourse();
+        } else {
+          this.openAlertModal('ไม่สามารถลบข้อมูลได้')
+        }
+      }, error => {
+        this.openAlertModal(error.message)
+      })
+    }, reject => { })
+  }
+  ngOnInit() {
+    this.getListCourse();
+  }
+  openLink(url: string) {
+    window.open(url, "_blank");
+  }
+  openAlertModal(message?: string) {
+    const modalRef = this.modalService.open(AlertModalComponent, {
+      centered: true,
+      backdrop: 'static'
+    })
+    modalRef.componentInstance.message = message ? message : ""
+    modalRef.result.then(result => {
+      this.modalService.dismissAll()
+    }, reason => {
+      this.modalService.dismissAll()
+    })
+  }
+
+  coverDate(date: string) {
+    return date.split('-').reverse().join('/')
+  }
+}

src/app/DPU/myskill-x/myportal/view-list-doc/view-list-doc.component.html

+<app-page-header [title]="'รายการเอกสาร'" [activeTitle]="'ผู้ดูแลระบบ'"
+  [title1]="'รายการเอกสาร'"></app-page-header>
+<!-- <div class="row" *ngIf="checkType == '1'">
+  <div class="col-12">
+    <div class="card card-body">
+      <h4 class="card-title">รายการเอกสาร</h4>
+      <div class="d-flex mb-3 mt-3">
+        <input type="text" class="form-control w-25" placeholder="ค้นหา" [(ngModel)]="search">
+      </div>
+      <div class="table-responsive">
+        <table class="table table-striped mb-0 no-wrap v-middle ">
+          <thead class="bg-info text-white">
+            <tr>
+              <th class="text-center" scope="col">#</th>
+              <th scope="col">รูปภาพ</th>
+              <th scope="col">ชื่อ</th>
+              <th scope="col">รายละเอียด</th>
+              <th scope="col" class="text-center">ลิงค์</th>
+              <th scope="col" class="text-center">ไฟล์ (ไทย)</th>
+              <th scope="col" class="text-center">ไฟล์ (อังกฤษ)</th>
+              <th scope="col" class="text-center">วันที่อัพโหลด</th>
+              <th scope="col" class="text-center">วันล่าสุดดาวน์โหลด</th>
+              <th scope="col" class="text-center">จำนวนดาวน์โหลด</th>
+              <th scope="col" *ngIf="checkType == '1'"></th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr *ngIf="listDoc.length == 0">
+              <td colspan="{{checkType == '1' ? '9' : '10'}}" class="text-center">ไม่พบข้อมูล</td>
+            </tr>
+            <tr
+              *ngFor="let data of filterListDoc() | slice: (page-1) * pageSize : (page-1) * pageSize + pageSize ; let i = index">
+              <td class="text-center">{{i+1}}</td>
+              <td><img width="100" class="border p-1" src="{{data.getImage()}}" (click)="openDialog(data.getImage())">
+              </td>
+              <td>{{ data.thName }}</td>
+              <td>{{ data.thDesc }}</td>
+              <td class="text-center"><i class="fas fa-link pointer" (click)="openLink(data.link1)"></i></td>
+              <td class="text-center"> <i class="fas fa-download pointer" (click)="downloadFile(data.docId,'tha')"></i>
+              </td>
+              <td class="text-center"> <i class="fas fa-download pointer" (click)="downloadFile(data.docId,'eng')"></i>
+              </td>
+              <td class="text-center">{{data.uploadDate}} {{data.uploadTime}}</td>
+              <td class="text-center">{{data.downloadDate}} {{data.downloadTime}}</td>
+              <td class="text-center">{{data.dwTime}} ครั้ง</td>
+              <td *ngIf="checkType == '1'">
+                <button type="button" class="btn btn-circle btn-danger rounded-circle btn-sm mr-2"
+                  (click)="deleteFile(data)" placement="top" ngbTooltip="ลบ"><i class="fas fa-trash-alt"></i></button>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+      <div class="d-flex justify-content-end py-2">
+
+        <select class="custom-select m-r-5" style="width: auto" [(ngModel)]="pageSize" (ngModelChange)="page">
+          <option [ngValue]="10">รายการต่อหน้า: 10</option>
+          <option [ngValue]="50">รายการต่อหน้า: 50</option>
+          <option [ngValue]="100">รายการต่อหน้า: 100</option>
+        </select>
+        <ngb-pagination [(page)]="page" [pageSize]="pageSize" [collectionSize]="listDoc.length" [maxSize]="3"
+          [rotate]="true">
+          <ng-template ngbPaginationPrevious>ก่อนหน้า</ng-template>
+          <ng-template ngbPaginationNext>ถัดไป</ng-template>
+        </ngb-pagination>
+
+      </div>
+
+    </div>
+  </div>
+</div> -->
+
+
+<!-- <div class="row" *ngIf="checkType != '1'">
+  <div class="col-12">
+    <div class="py-3">
+      <input type="text" class="form-control w-25" placeholder="ค้นหา" [(ngModel)]="search">
+    </div>
+  </div>
+  <div class="col-sm-6 col-md-4 col-lg-4  mb-3" *ngFor="let data of filterListDoc()">
+    <div class="card border-5 border border-doc h-100 shadow">
+      <div class=" p-2 border-5">
+        <img width="100" class="card-img-top cover" src="{{data.getImage()}}" (click)="openDialog(data.getImage())">
+      </div>
+      <div class="card-body">
+        <h4 class="card-title">{{ data.thName }}</h4>
+        <p class="card-text ">{{ data.thDesc }}</p>
+        <p class="text-info pointer mb-0" (click)="downloadFile(data.docId,'tha')"><i class="fas fa-download mr-1"></i>
+          ดาวน์โหลด (ไทย) <small class="text-muted" *ngIf="data.dwTime > 0">{{coverDate(data.downloadDate)}}
+            {{data.downloadTime}} ( {{data.dwTime}} ครั้ง)</small></p>
+        <p class="text-info pointer mb-0" (click)="downloadFile(data.docId,'eng')"><i class="fas fa-download mr-1"></i>
+          ดาวน์โหลด (อังกฤษ) <small class="text-muted" *ngIf="data.dwTime > 0">{{coverDate(data.downloadDate)}}
+            {{data.downloadTime}} ( {{data.dwTime}} ครั้ง)</small></p>
+
+        <p class="text-info pointer mb-0" (click)="openLink(data.link1)"><i class="fas fa-link mr-1"></i>
+          ตัวอย่างวิธีใช้งาน</p>
+      </div>
+      <div class="card-footer border-bottom-5">
+        <small class="text-muted">วันที่อัพโหลด {{coverDate(data.uploadDate)}} {{data.uploadTime}}</small>
+      </div>
+    </div>
+  </div>
+</div> -->
+
+<div class="box p-4">
+  <div *ngIf="checkType != '1'" class="flex flex-wrap -mx-2">
+    <div class="w-full">
+      <div class="py-3 px-2">
+        <input type="text"
+          class="block w-full md:w-1/4 px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200 shadow-sm"
+          placeholder="ค้นหา" [(ngModel)]="search" />
+      </div>
+    </div>
+
+    <div class="w-full sm:w-1/2 lg:w-1/3 xl:w-1/3 px-2 mb-4" *ngFor="let data of filterListDoc()">
+      <div
+        class="group bg-white rounded-lg overflow-hidden shadow-lg border-4 border-blue-600 h-full flex flex-col transform transition-all duration-300 ease-in-out hover:scale-[1.02] hover:shadow-xl">
+        <div class="p-4 flex justify-center items-center flex-shrink-0">
+          <img
+            class="w-full h-full object-cover rounded-md shadow-md transform transition-transform duration-300 group-hover:scale-105 cursor-pointer"
+            style="width: 400px; height: 200px; max-width: 100%;" src="{{ data.getImage() }}" alt="{{ data.thName }}"
+            (click)="openDialog(data.getImage())" />
+        </div>
+
+        <div class="p-4 flex-grow">
+          <span class="text-xl font-semibold text-gray-800 mb-2" style="font-size: 18px;">
+            {{ data.thName }}
+          </span>
+          <p class="text-gray-700 text-sm mb-3">{{ data.thDesc }}</p>
+
+          <div class="mb-0 flex items-center justify-center sm:justify-start gap-2 w-1/2 mt-5">
+            <i class="fa fa-link text-blue-600 text-base flex-shrink-0" aria-hidden="true"></i>
+            <input type="text" [value]="'ตัวอย่างวิธีใช้งาน'" (click)="openLink(data.link1)"
+              style="background-color: rgb(76, 117, 207, 1); color: #FFF;"
+              class="flex-grow border border-gray-300 rounded-md px-2 py-1 text-blue-600 cursor-pointer hover:underline focus:outline-none focus:ring-1 focus:ring-blue-500 transition-all duration-200"
+              readonly />
+          </div>
+          <div class="mb-2 flex items-center justify-center sm:justify-start gap-2 w-full mt-2">
+            <i class="fa fa-download text-blue-600 text-base flex-shrink-0" aria-hidden="true"></i>
+            <input type="text" [value]="'ดาวน์โหลด (ไทย)'" (click)="downloadFile(data.docId, 'tha')"
+              style="background-color: rgb(34, 197, 94, 1); color: #FFF;"
+              class="flex-grow border border-gray-300 rounded-md px-2 py-1 cursor-pointer hover:opacity-90 focus:outline-none focus:ring-1 focus:ring-green-700 transition-all duration-200"
+              readonly />
+            <small class="text-gray-500 text-xs ml-auto hidden sm:block flex-shrink-0" *ngIf="data.dwTime > 0">
+              {{coverDate(data.downloadDate)}} {{data.downloadTime}} ( {{data.dwTime}} ครั้ง)
+            </small>
+          </div>
+
+          <div class="mb-2 flex items-center justify-center sm:justify-start gap-2 w-full">
+            <i class="fa fa-download text-blue-600 text-base flex-shrink-0" aria-hidden="true"></i>
+            <input type="text" [value]="'ดาวน์โหลด (อังกฤษ)'" (click)="downloadFile(data.docId, 'eng')"
+              style="background-color: rgb(34, 197, 94, 1); color: #FFF;"
+              class="flex-grow border border-gray-300 rounded-md px-2 py-1 cursor-pointer hover:opacity-90 focus:outline-none focus:ring-1 focus:ring-green-700 transition-all duration-200"
+              readonly />
+            <small class="text-gray-500 text-xs ml-auto hidden sm:block flex-shrink-0" *ngIf="data.dwTime > 0">
+              {{coverDate(data.downloadDate)}} {{data.downloadTime}} ( {{data.dwTime}} ครั้ง)
+            </small>
+          </div>
+
+        </div>
+
+        <div class="px-4 py-3 border-t border-gray-200 text-right flex-shrink-0">
+          <small class="text-gray-500 text-xs">วันที่อัพโหลด {{ coverDate(data.uploadDate) }}
+            {{ data.uploadTime }}</small>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
\ No newline at end of file

src/app/DPU/myskill-x/myportal/view-list-doc/view-list-doc.component.ts

+import { Component, OnInit } from '@angular/core';
+import { AlertModalComponent } from '../alert-modal/alert-modal.component';
+import { NgbModal, NgbPaginationModule } from '@ng-bootstrap/ng-bootstrap';
+import { DocumentContentModel } from '../../../models/document-content.model';
+import { ActivatedRoute, RouterModule } from '@angular/router';
+import { ConfirmModalComponent } from '../confirm-modal/confirm-modal.component';
+import { OpenImageComponent } from '../open-image/open-image.component';
+import { DocumentService } from '../../../services/document.service';
+import { MatDialog, MatDialogModule } from '@angular/material/dialog';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { NgSelectModule } from '@ng-select/ng-select';
+import { SharedModule } from '../../../../shared/shared.module';
+
+import { saveAs } from 'file-saver';
+import { TranslateModule } from '@ngx-translate/core';
+
+@Component({
+  selector: 'app-view-list-doc',
+  templateUrl: './view-list-doc.component.html',
+  styleUrls: ['./view-list-doc.component.scss'],
+  standalone: true,
+  imports: [
+    CommonModule,
+    FormsModule,
+    RouterModule,
+    NgSelectModule,
+    SharedModule,
+    MatDialogModule,
+    NgbPaginationModule,
+    TranslateModule,
+  ],
+})
+export class ViewListDocComponent implements OnInit {
+  page = 1;
+  pageSize = 10;
+  listDoc: DocumentContentModel[] = []
+  search: string = ''
+  dialogRef: any;
+  checkType: string = '0'
+  constructor(private modalService: NgbModal, private documentService: DocumentService, private activatedRoute: ActivatedRoute, private dialog: MatDialog,) {
+    this.activatedRoute.paramMap.subscribe(result => {
+      this.checkType = result.get("type")!;
+    });
+  }
+  openDialog(image: string) {
+    const dialogConfig = {
+      width: '750px',
+      disableClose: false,
+      data: {
+        linkImage: image
+      },
+      panelClass: 'my-dialog-img-preview',
+    };
+    this.dialogRef = this.dialog.open(OpenImageComponent, dialogConfig);
+    this.dialogRef.afterClosed().subscribe((result: any) => {
+      console.log('The dialog was closed', result);
+    }, (reason: any) => {
+    });
+  }
+
+  deleteFile(item: DocumentContentModel) {
+    const modalRef = this.modalService.open(ConfirmModalComponent, {
+      centered: true,
+      backdrop: 'static',
+    })
+    modalRef.componentInstance.message = 'คุณต้องการลบข้อมูลหรือไม่'
+    modalRef.result.then(result => {
+      this.documentService.deleteExcelContent(item).subscribe(result => {
+        if (result) {
+          this.openAlertModal('ลบข้อมูลสำเร็จ')
+          this.getListDoc();
+        } else {
+          this.openAlertModal('ไม่สามารถลบข้อมูลได้')
+        }
+      }, error => {
+        this.openAlertModal(error.message)
+      })
+    }, reject => { })
+  }
+
+
+  async downloadFile(logId: string, lang: string) {
+    try {
+      const data = await this.documentService.downloadFileContent(logId, lang).toPromise();
+      if (data) {
+        saveAs(new Blob([data]), "file_download.doc");
+      }
+    } catch (error) {
+      console.error('Error loading data:', error);
+    }
+  }
+  filterListDoc() {
+    return this.listDoc.filter(x => x.thName.toLowerCase().includes(this.search.toLowerCase()) || x.engName.toLowerCase().includes(this.search.toLowerCase()))
+  }
+  async getListDoc() {
+    try {
+      const data = await this.documentService.getListExcelContent().toPromise();
+      this.listDoc = data!.map(x => new DocumentContentModel(x))
+    } catch (error) {
+      console.error('Error loading data:', error);
+    }
+  }
+  ngOnInit() {
+    this.getListDoc();
+  }
+
+  openAlertModal(message?: string) {
+    const modalRef = this.modalService.open(AlertModalComponent, {
+      centered: true,
+      backdrop: 'static'
+    })
+    modalRef.componentInstance.message = message ? message : ""
+    modalRef.result.then(result => {
+      this.modalService.dismissAll()
+    }, reason => {
+      this.modalService.dismissAll()
+    })
+  }
+  openLink(url: string) {
+    window.open(url, "_blank");
+  }
+  coverDate(date: string) {
+    return date.split('-').reverse().join('/')
+  }
+}

src/app/DPU/myskill-x/myportal/view-list-excel/view-list-excel.component.html

+<app-page-header [title]="'รายการเอกสาร Excel'" [activeTitle]="'ผู้ดูแลระบบ'"
+  [title1]="'รายการเอกสาร Excel'"></app-page-header>
+
+<div class="row" *ngIf="checkType == '1'">
+  <div class="col-12">
+    <div class="card card-body">
+      <h4 class="card-title">รายการ Excel</h4>
+      <div class="d-flex mb-3 mt-3">
+        <input type="text" class="form-control w-25" placeholder="ค้นหา" [(ngModel)]="search">
+      </div>
+      <div class="table-responsive">
+        <table class="table table-striped mb-0 no-wrap v-middle ">
+          <thead class="bg-info text-white">
+            <tr>
+              <th class="text-center" scope="col">#</th>
+              <th scope="col">รูปภาพ</th>
+              <th scope="col">ชื่อ</th>
+              <th scope="col">รายละเอียด</th>
+              <th scope="col" class="text-center">ลิงค์</th>
+              <th scope="col" class="text-center">ไฟล์</th>
+              <th scope="col" class="text-center">วันที่อัพโหลด</th>
+              <th scope="col" class="text-center">วันล่าสุดดาวน์โหลด</th>
+              <th scope="col" class="text-center">จำนวนดาวน์โหลด</th>
+              <th scope="col" *ngIf="checkType == '1'"></th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr *ngIf="listExcel.length == 0">
+              <td [colSpan]="checkType == '1' ? 8 : 7" class="text-center">ไม่พบข้อมูล</td>
+            </tr>
+            <tr
+              *ngFor="let data of filterListExcel() | slice: (page-1) * pageSize : (page-1) * pageSize + pageSize ; let i = index">
+              <td class="text-center">{{i+1}}</td>
+              <td><img width="100" class="border p-1" src="{{data.getImage()}}"
+                  (click)="openDialog(data.getImage())"></td>
+              <td>{{ data.thName }}</td>
+              <td>{{ data.thDesc }}</td>
+              <td class="text-center"><i class="fas fa-link pointer" (click)="openLink(data.link1)"></i></td>
+              <td class="text-center"> <i class="fas fa-download pointer" (click)="downloadFile(data.excelId)"></i></td>
+              <td class="text-center">{{data.uploadDate}} {{data.uploadTime}}</td>
+              <td class="text-center">{{data.downloadDate}} {{data.downloadTime}}</td>
+              <td class="text-center">{{data.dwTime}} ครั้ง</td>
+              <td *ngIf="checkType == '1'">
+                <button type="button" class="btn btn-circle btn-danger rounded-circle btn-sm mr-2"
+                  (click)="deleteFile(data)" placement="top" ngbTooltip="ลบ"><i class="fas fa-trash-alt"></i></button>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+      <div class="d-flex justify-content-end py-2">
+
+        <select class="custom-select m-r-5" style="width: auto" [(ngModel)]="pageSize" (ngModelChange)="page">
+          <option [ngValue]="10">รายการต่อหน้า: 10</option>
+          <option [ngValue]="50">รายการต่อหน้า: 50</option>
+          <option [ngValue]="100">รายการต่อหน้า: 100</option>
+        </select>
+        <ngb-pagination [(page)]="page" [pageSize]="pageSize" [collectionSize]="listExcel.length" [maxSize]="3"
+          [rotate]="true">
+          <ng-template ngbPaginationPrevious>ก่อนหน้า</ng-template>
+          <ng-template ngbPaginationNext>ถัดไป</ng-template>
+        </ngb-pagination>
+
+      </div>
+
+    </div>
+  </div>
+</div>
+
+<!-- <div class="row" *ngIf="checkType != '1'">
+  <div class="col-12">
+    <div class="py-3">
+      <input type="text" class="form-control w-25" placeholder="ค้นหา" [(ngModel)]="search">
+    </div>
+  </div>
+  <div class="col-sm-6 col-md-4 col-lg-4  mb-3" *ngFor="let data of filterListExcel()">
+    <div class="card border-5 border border-excel h-100 shadow">
+      <div class=" p-2 border-5">
+        <img width="100" class="card-img-top cover" src="{{data.getImage()}}"
+          (click)="openEmployeeModal(data.getImage())">
+      </div>
+      <div class="card-body">
+        <h4 class="card-title">{{ data.thName }}</h4>
+        <p class="card-text ">{{ data.thDesc }}</p>
+        <p class="text-info pointer mb-0" (click)="downloadFile(data.excelId)"><i class="fas fa-download mr-1"></i>
+          ดาวน์โหลด <small class="text-muted" *ngIf="data.dwTime > 0">{{coverDate(data.downloadDate)}}
+            {{data.downloadTime}} ( {{data.dwTime}} ครั้ง)</small></p>
+
+        <p class="text-info pointer mb-0" (click)="openLink(data.link1)"><i class="fas fa-link mr-1"></i>
+          ตัวอย่างวิธีใช้งาน</p>
+      </div>
+      <div class="card-footer border-bottom-5">
+        <small class="text-muted">วันที่อัพโหลด {{coverDate(data.uploadDate)}} {{data.uploadTime}}</small>
+      </div>
+    </div>
+  </div>
+</div> -->
+<div class="box p-4">
+  <div *ngIf="checkType != '1'" class="flex flex-wrap -mx-2">
+    <div class="w-full">
+      <div class="py-3 px-2">
+        <input type="text"
+          class="block w-full md:w-1/4 px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200 shadow-sm"
+          placeholder="ค้นหา" [(ngModel)]="search" />
+      </div>
+    </div>
+  
+    <div class="w-full sm:w-1/2 lg:w-1/3 xl:w-1/3 px-2 mb-4" *ngFor="let data of filterListExcel()">
+      <div
+        class="group bg-white rounded-lg overflow-hidden shadow-lg border-4 border-blue-600 h-full flex flex-col transform transition-all duration-300 ease-in-out hover:scale-[1.02] hover:shadow-xl">
+        <div class="p-4 flex justify-center items-center flex-shrink-0">
+          <img
+            class="w-full h-full object-cover rounded-md shadow-md transform transition-transform duration-300 group-hover:scale-105 cursor-pointer"
+            style="width: 400px; height: 200px; max-width: 100%;" src="{{ data.getImage() }}" alt="{{ data.thName }}"
+            (click)="openDialog(data.getImage())" />
+        </div>
+  
+        <div class="p-4 flex-grow">
+          <span class="text-xl font-semibold text-gray-800 mb-2" style="font-size: 18px;">
+            {{ data.thName }}
+          </span>
+          <p class="text-gray-700 text-sm mb-3">{{ data.thDesc }}</p>
+  
+          <div class="mb-0 flex items-center justify-center sm:justify-start gap-2 w-1/2 mt-5">
+            <i class="fa fa-link text-blue-600 text-base flex-shrink-0" aria-hidden="true"></i>
+            <input type="text" [value]="'ตัวอย่างวิธีใช้งาน'" (click)="openLink(data.link1)" style="background-color: rgb(76, 117, 207, 1); color: #FFF;"
+              class="flex-grow border border-gray-300 rounded-md px-2 py-1 text-blue-600 cursor-pointer hover:underline focus:outline-none focus:ring-1 focus:ring-blue-500 transition-all duration-200"
+              readonly />
+          </div>
+          <div class="mb-2 flex items-center justify-center sm:justify-start gap-2 w-1/2">
+            <i class="fa fa-download text-blue-600 text-base flex-shrink-0" aria-hidden="true"></i>
+            <input type="text" [value]="'ดาวน์โหลด'" (click)="downloadFile(data.excelId)" style="background-color: rgb(34, 197, 94, 1); color: #FFF;"
+              class="flex-grow border border-gray-300 rounded-md px-2 py-1 text-blue-600 cursor-pointer hover:underline focus:outline-none focus:ring-1 focus:ring-blue-500 transition-all duration-200"
+              readonly />
+            <small class="text-gray-500 text-xs ml-auto hidden sm:block flex-shrink-0" *ngIf="data.dwTime > 0">{{
+              coverDate(data.downloadDate) }} {{ data.downloadTime }} (
+              {{ data.dwTime }} ครั้ง)</small>
+          </div>
+  
+        </div>
+  
+        <div class="px-4 py-3 border-t border-gray-200 text-right flex-shrink-0">
+          <small class="text-gray-500 text-xs">วันที่อัพโหลด {{ coverDate(data.uploadDate) }}
+            {{ data.uploadTime }}</small>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
\ No newline at end of file

src/app/DPU/myskill-x/myportal/view-list-excel/view-list-excel.component.ts

+import { Component, OnInit } from '@angular/core';
+import { ExcelService } from '../../../services/excel.service';
+import { NgbModal, NgbPaginationModule } from '@ng-bootstrap/ng-bootstrap';
+import { ActivatedRoute, RouterModule } from '@angular/router';
+import { ExcelContentModel } from '../../../models/excel-content.model';
+import { OpenImageComponent } from '../open-image/open-image.component';
+import { ConfirmModalComponent } from '../confirm-modal/confirm-modal.component';
+import { AlertModalComponent } from '../alert-modal/alert-modal.component';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { NgSelectModule } from '@ng-select/ng-select';
+import { SharedModule } from '../../../../shared/shared.module';
+import { MatDialog, MatDialogModule } from '@angular/material/dialog';
+import { TranslateModule } from '@ngx-translate/core';
+
+import { saveAs } from 'file-saver';
+
+@Component({
+  selector: 'app-view-list-excel',
+  templateUrl: './view-list-excel.component.html',
+  styleUrls: ['./view-list-excel.component.scss'],
+  standalone: true,
+  imports: [
+    CommonModule,
+    FormsModule,
+    RouterModule,
+    NgSelectModule,
+    SharedModule,
+    MatDialogModule,
+    TranslateModule,
+    NgbPaginationModule,
+  ],
+})
+export class ViewListExcelComponent implements OnInit {
+  page = 1;
+  pageSize = 10;
+  listExcel: ExcelContentModel[] = [];
+  search: string = '';
+  checkType: string = '0';
+  dialogRef: any;
+
+  constructor(
+    private modalService: NgbModal,
+    private excelService: ExcelService,
+    private activatedRoute: ActivatedRoute,
+    private dialog: MatDialog,
+  ) {
+    this.activatedRoute.paramMap.subscribe(result => {
+      this.checkType = result.get("type")!;
+    });
+  }
+  openDialog(image: string) {
+    const dialogConfig = {
+      width: '750px',
+      disableClose: false,
+      data: {
+        linkImage: image
+      },
+      panelClass: 'my-dialog-img-preview',
+    };
+    this.dialogRef = this.dialog.open(OpenImageComponent, dialogConfig);
+    this.dialogRef.afterClosed().subscribe((result: any) => { 
+      console.log('The dialog was closed', result);
+    }, (reason: any) => {
+    });
+  }
+
+  // openEmployeeModal(image: string) {
+  //   const modalRef = this.modalService.open(OpenImageComponent, {
+  //     centered: true,
+  //     windowClass: 'my-dialog-img-preview'
+  //   });
+  //   modalRef.componentInstance.linkImage = image;
+  //   modalRef.result.then(result => {
+  //   }, reason => {
+  //     this.modalService.dismissAll();
+  //   });
+  // }
+
+  deleteFile(item: ExcelContentModel) {
+    const modalRef = this.modalService.open(ConfirmModalComponent, {
+      centered: true,
+      backdrop: 'static',
+    });
+    modalRef.componentInstance.message = 'คุณต้องการลบข้อมูลหรือไม่';
+    modalRef.result.then(result => {
+      this.excelService.deleteExcelContent(item).subscribe(result => {
+        if (result) {
+          this.openAlertModal('ลบข้อมูลสำเร็จ');
+          this.getListExcel();
+        } else {
+          this.openAlertModal('ไม่สามารถลบข้อมูลได้');
+        }
+      }, error => {
+        this.openAlertModal(error.message);
+      });
+    }, reject => { });
+  }
+
+  async downloadFile(logId: string) {
+    try {
+      const data = await this.excelService.downloadFileContent(logId).toPromise();
+      if (data) {
+        saveAs(new Blob([data]), "file_download.xlsx");
+      }
+    } catch (error) {
+      console.error('Error loading data:', error);
+    }
+  }
+
+  getStatus(status: string): string {
+    if (status == '0') {
+      return 'รออนุมัติ';
+    } else if (status == '1') {
+      return 'เปิดใช้งาน';
+    } else if (status == '2') {
+      return 'ไม่อนุมัติ';
+    }
+    return '';
+  }
+
+  filterListExcel() {
+    return this.listExcel.filter(x => x.thName.toLowerCase().includes(this.search.toLowerCase()) || x.engName.toLowerCase().includes(this.search.toLowerCase()));
+  }
+
+  async getListExcel() {
+    try {
+      const data = await this.excelService.getListExcelContent().toPromise();
+      this.listExcel = data!.map(x => new ExcelContentModel(x));
+    } catch (error) {
+      console.error('Error loading data:', error);
+    }
+  }
+
+  ngOnInit() {
+    this.getListExcel();
+  }
+
+  openLink(url: string) {
+    window.open(url, "_blank");
+  }
+
+  openAlertModal(message?: string) {
+    const modalRef = this.modalService.open(AlertModalComponent, {
+      centered: true,
+      backdrop: 'static'
+    });
+    modalRef.componentInstance.message = message ? message : "";
+    modalRef.result.then(result => {
+      this.modalService.dismissAll();
+    }, reason => {
+      this.modalService.dismissAll();
+    });
+  }
+
+  coverDate(date: string) {
+    return date.split('-').reverse().join('/');
+  }
+}
\ No newline at end of file

src/app/DPU/myskill-x/myportal/view-list-widgets/view-list-widgets.component.html

+<app-page-header [title]="'รายการวิทเจ็ท'" [activeTitle]="'ผู้ดูแลระบบ'"
+  [title1]="'รายการวิทเจ็ท'"></app-page-header>
+<!-- <div class="row">
+  <div class="col-12">
+    <div class="py-3">
+      <input type="text" class="form-control w-25" placeholder="ค้นหา" [(ngModel)]="search">
+    </div>
+  </div>
+  <div class="col-sm-6 col-md-4 col-lg-4  mb-3" *ngFor="let data of filterListWidget()">
+    <div class="card border-5 border border-widget h-100 shadow">
+      <div class=" p-2 border-5">
+        <img width="100" class="card-img-top cover" src="{{data.getImage()}}"
+          (click)="openEmployeeModal(data.getImage())">
+      </div>
+      <div class="card-body">
+        <h4 class="card-title">{{ data.widgetTname }}</h4>
+        <p class="card-text ">{{ data.thDesc }}</p>
+        <p class="text-info pointer mb-0" (click)="downloadFile(data.widgetId)"><i class="fas fa-download mr-1"></i>
+          ดาวน์โหลด <small class="text-muted" *ngIf="data.dwTime > 0">{{coverDate(data.downloadDate)}}
+            {{data.downloadTime}} ( {{data.dwTime}} ครั้ง)</small></p>
+
+        <p class="text-info pointer mb-0" (click)="openLink(data.link1)"><i class="fas fa-link mr-1"></i>
+          ตัวอย่างวิธีใช้งาน</p>
+      </div>
+      <div class="card-footer border-bottom-5">
+        <small class="text-muted">วันที่อัพโหลด {{coverDate(data.uploadDate)}} {{data.uploadTime}}</small>
+      </div>
+    </div>
+  </div>
+</div> -->
+<div class="box p-4">
+  <div class="flex flex-wrap -mx-2">
+    <div class="w-full">
+      <div class="py-3 px-2">
+        <input type="text"
+          class="block w-full md:w-1/4 px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200 shadow-sm"
+          placeholder="ค้นหา" [(ngModel)]="search" />
+      </div>
+    </div>
+
+    <div class="w-full sm:w-1/2 lg:w-1/3 xl:w-1/3 px-2 mb-4" *ngFor="let data of filterListWidget()">
+      <div
+        class="group bg-white rounded-lg overflow-hidden shadow-lg border-4 border-blue-600 h-full flex flex-col transform transition-all duration-300 ease-in-out hover:scale-[1.02] hover:shadow-xl">
+        <div class="p-4 flex justify-center items-center flex-shrink-0">
+          <img
+            class="w-full h-full object-cover rounded-md shadow-md transform transition-transform duration-300 group-hover:scale-105 cursor-pointer"
+            style="width: 400px; height: 200px; max-width: 100%;" src="{{ data.getImage() }}" alt="{{ data.widgetTname }}"
+            (click)="openDialog(data.getImage())" />
+        </div>
+
+        <div class="p-4 flex-grow">
+          <span class="text-xl font-semibold text-gray-800 mb-2" style="font-size: 18px;">
+            {{ data.widgetTname }}
+          </span>
+          <p class="text-gray-700 text-sm mb-3">{{ data.thDesc }}</p>
+
+          <div class="mb-0 flex items-center justify-center sm:justify-start gap-2 w-1/2 mt-5">
+            <i class="fa fa-link text-blue-600 text-base flex-shrink-0" aria-hidden="true"></i>
+            <input type="text" [value]="'ตัวอย่างวิธีใช้งาน'" (click)="openLink(data.link1)"
+              style="background-color: rgb(76, 117, 207, 1); color: #FFF;"
+              class="flex-grow border border-gray-300 rounded-md px-2 py-1 text-blue-600 cursor-pointer hover:underline focus:outline-none focus:ring-1 focus:ring-blue-500 transition-all duration-200"
+              readonly />
+          </div>
+          <div class="mb-2 flex items-center justify-center sm:justify-start gap-2 w-1/2">
+            <i class="fa fa-download text-blue-600 text-base flex-shrink-0" aria-hidden="true"></i>
+            <input type="text" [value]="'ดาวน์โหลด'" (click)="downloadFile(data.widgetId)"
+              style="background-color: rgb(34, 197, 94, 1); color: #FFF;"
+              class="flex-grow border border-gray-300 rounded-md px-2 py-1 text-blue-600 cursor-pointer hover:underline focus:outline-none focus:ring-1 focus:ring-blue-500 transition-all duration-200"
+              readonly />
+          </div>
+        </div>
+
+        <div class="px-4 py-3 border-t border-gray-200 text-right flex-shrink-0">
+          <small class="text-gray-500 text-xs">วันที่อัพโหลด {{ coverDate(data.uploadDate) }}
+            {{ data.uploadTime }}</small>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
\ No newline at end of file

src/app/DPU/myskill-x/myportal/view-list-widgets/view-list-widgets.component.ts

+import { Component, OnInit } from '@angular/core';
+import { NgbModal, NgbPaginationModule } from '@ng-bootstrap/ng-bootstrap';
+import { AlertModalComponent } from '../alert-modal/alert-modal.component';
+import { OpenImageComponent } from '../open-image/open-image.component';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { MatDialog, MatDialogModule } from '@angular/material/dialog';
+import { SharedModule } from '../../../../shared/shared.module';
+import { TranslateModule } from '@ngx-translate/core';
+import { NgSelectModule } from '@ng-select/ng-select';
+import saveAs from 'file-saver';
+import { WidgetModel } from '../../../models/widgets.model';
+import { WidgetService } from '../../../services/widgets.service';
+
+@Component({
+  selector: 'app-view-list-widgets',
+  templateUrl: './view-list-widgets.component.html',
+  styleUrls: ['./view-list-widgets.component.scss'],
+  standalone: true,
+  imports: [
+    CommonModule,
+    FormsModule,
+    NgSelectModule,
+    SharedModule,
+    MatDialogModule,
+    NgbPaginationModule,
+    TranslateModule,
+  ],
+})
+export class ViewListWidgetsComponent implements OnInit {
+  page = 1;
+  pageSize = 10;
+  listWidget:WidgetModel[]=[]
+  search:string = ''
+  dialogRef: any;
+
+  constructor(private modalService: NgbModal,private widgetService:WidgetService, private dialog: MatDialog,) {
+  }
+  openDialog(image: string) {
+    const dialogConfig = {
+      width: '750px',
+      disableClose: false,
+      data: {
+        linkImage: image
+      },
+      panelClass: 'my-dialog-img-preview',
+    };
+    this.dialogRef = this.dialog.open(OpenImageComponent, dialogConfig);
+    this.dialogRef.afterClosed().subscribe((result: any) => {
+      console.log('The dialog was closed', result);
+    }, (reason: any) => {
+    });
+  }
+
+  async downloadFile(logId: string) {
+    try {
+      const data = await this.widgetService.downloadFile(logId).toPromise();
+      if (data) {
+        saveAs(new Blob([data]), "file_download.xlsx");
+      }
+    } catch (error) {
+      console.error('Error loading data:', error);
+    }
+  }
+
+  // getStatus(status: string) {
+  //   if (status == '0') {
+  //     return 'Private'
+  //   } else if (status == '1') {
+  //     return 'Public'
+  //   } 
+  // }
+  filterListWidget(){
+    return this.listWidget.filter(x => x.widgetTname.toLowerCase().includes(this.search.toLowerCase())||x.widgetEname.toLowerCase().includes(this.search.toLowerCase()))
+  }
+  async getListExcel(){
+    try {
+      const data = await this.widgetService.getListWidgets().toPromise();
+      this.listWidget = data!.map(x => new WidgetModel(x))
+    } catch (error) {
+      console.error('Error loading data:', error);
+    }
+  }
+  ngOnInit() {
+    this.getListExcel();
+  }
+  openLink(url:string){
+    window.open(url, "_blank");
+  }
+
+
+  openAlertModal(message?: string) {
+    const modalRef = this.modalService.open(AlertModalComponent, {
+      centered: true,
+      backdrop: 'static'
+    })
+    modalRef.componentInstance.message = message ? message : ""
+    modalRef.result.then(result => {
+      this.modalService.dismissAll()
+    }, reason => {
+      this.modalService.dismissAll()
+    })
+  }
+  coverDate(date:string){
+  return  date.split('-').reverse().join('/')
+  }
+}

src/app/DPU/myskill-x/myskill-x.module.ts

@@ -7,137 +7,137 @@ import { QuillModule } from 'ngx-quill';
 
 export const myportal: Routes = [
   {
-    path: 'myportal', children: [
+    path: 'myskill-x', children: [
     //////////////MyPortal/////////////////
     {
       path: 'portal-category-list',
       loadComponent: () =>
-        import('../common/myportal/portal-category-list/portal-category-list.component').then((m) => m.PortalCategoryListComponent),
+        import('../myskill-x/myportal/portal-category-list/portal-category-list.component').then((m) => m.PortalCategoryListComponent),
     },
     {
       path: 'view-list-excel',
       loadComponent: () =>
-        import('../common/myportal/view-list-excel/view-list-excel.component').then((m) => m.ViewListExcelComponent),
+        import('../myskill-x/myportal/view-list-excel/view-list-excel.component').then((m) => m.ViewListExcelComponent),
     },
     {
       path: 'view-list-doc',
       loadComponent: () =>
-        import('../common/myportal/view-list-doc/view-list-doc.component').then((m) => m.ViewListDocComponent),
+        import('../myskill-x/myportal/view-list-doc/view-list-doc.component').then((m) => m.ViewListDocComponent),
     },
     {
       path: 'view-list-course',
       loadComponent: () =>
-        import('../common/myportal/view-list-course/view-list-course.component').then((m) => m.ViewListCourseComponent),
+        import('../myskill-x/myportal/view-list-course/view-list-course.component').then((m) => m.ViewListCourseComponent),
     },
     {
       path: 'view-list-widgets',
       loadComponent: () =>
-        import('../common/myportal/view-list-widgets/view-list-widgets.component').then((m) => m.ViewListWidgetsComponent),
+        import('../myskill-x/myportal/view-list-widgets/view-list-widgets.component').then((m) => m.ViewListWidgetsComponent),
     },
     {
       path: 'excel-report',
       loadComponent: () =>
-        import('../common/myportal/excel-report/excel-report.component').then((m) => m.ExcelReportComponent),
+        import('../myskill-x/myportal/excel-report/excel-report.component').then((m) => m.ExcelReportComponent),
     },
     {
       path: 'portal-create-category',
       loadComponent: () =>
-        import('../common/myportal/portal-create-category/portal-create-category.component').then((m) => m.PortalCreateCategoryComponent),
+        import('../myskill-x/myportal/portal-create-category/portal-create-category.component').then((m) => m.PortalCreateCategoryComponent),
     },
     {
       path: 'list-excell',
       loadComponent: () =>
-        import('../common/myportal/list-excell/list-excell.component').then((m) => m.ListExcelComponent),
+        import('../myskill-x/myportal/list-excell/list-excell.component').then((m) => m.ListExcelComponent),
     },
     {
       path: 'list-course',
       loadComponent: () =>
-        import('../common/myportal/list-course/list-course.component').then((m) => m.ListCourseComponent),
+        import('../myskill-x/myportal/list-course/list-course.component').then((m) => m.ListCourseComponent),
     },
     {
       path: 'list-doc',
       loadComponent: () =>
-        import('../common/myportal/list-doc/list-doc.component').then((m) => m.ListDocComponent),
+        import('../myskill-x/myportal/list-doc/list-doc.component').then((m) => m.ListDocComponent),
     },
     {
       path: 'list-widgets',
       loadComponent: () =>
-        import('../common/myportal/list-widgets/list-widgets.component').then((m) => m.ListWidgetsComponent),
+        import('../myskill-x/myportal/list-widgets/list-widgets.component').then((m) => m.ListWidgetsComponent),
     },
     {
       path: 'excel-list',
       loadComponent: () =>
-        import('../common/myportal/set-excel-reports/excel-list/excel-list.component').then((m) => m.ExcelListComponent),
+        import('../myskill-x/myportal/set-excel-reports/excel-list/excel-list.component').then((m) => m.ExcelListComponent),
     },
     {
       path: 'datasource-table',
       loadComponent: () =>
-        import('../common/myportal/datasource-table/datasource-table.component').then((m) => m.DatasourceTableComponent),
+        import('../myskill-x/myportal/datasource-table/datasource-table.component').then((m) => m.DatasourceTableComponent),
     },
     {
       path: 'excel-report-toggle',
       loadComponent: () =>
-        import('../common/myportal/set-excel-reports/excel-report-toggle/excel-report-toggle.component').then((m) => m.ExcelReportToggleComponent),
+        import('../myskill-x/myportal/set-excel-reports/excel-report-toggle/excel-report-toggle.component').then((m) => m.ExcelReportToggleComponent),
     },
     {
       path: 'management',
       loadComponent: () =>
-        import('../common/myportal/management/management.component').then((m) => m.ManagementComponent),
+        import('../myskill-x/myportal/management/management.component').then((m) => m.ManagementComponent),
     },
     {
       path: 'portal-category-list-approve',
       loadComponent: () =>
-        import('../common/myportal/management/portal-category-list-approve/portal-category-list-approve.component').then((m) => m.PortalCategoryListApproveComponent),
+        import('../myskill-x/myportal/management/portal-category-list-approve/portal-category-list-approve.component').then((m) => m.PortalCategoryListApproveComponent),
     },
     {
       path: 'approve-excel',
       loadComponent: () =>
-        import('../common/myportal/management/portal-category-list-approve/approve-excel/approve-excel.component').then((m) => m.ApproveExcelComponent),
+        import('../myskill-x/myportal/management/portal-category-list-approve/approve-excel/approve-excel.component').then((m) => m.ApproveExcelComponent),
     },
     {
       path: 'approve-doc',
       loadComponent: () =>
-        import('../common/myportal/management/portal-category-list-approve/approve-doc/approve-doc.component').then((m) => m.ApproveDocComponent),
+        import('../myskill-x/myportal/management/portal-category-list-approve/approve-doc/approve-doc.component').then((m) => m.ApproveDocComponent),
     },
     {
       path: 'approve-course',
       loadComponent: () =>
-        import('../common/myportal/management/portal-category-list-approve/approve-course/approve-course.component').then((m) => m.ApproveCourseComponent),
+        import('../myskill-x/myportal/management/portal-category-list-approve/approve-course/approve-course.component').then((m) => m.ApproveCourseComponent),
     },
     {
       path: 'approved-list',
       loadComponent: () =>
-        import('../common/myportal/management/approved-list/approved-list.component').then((m) => m.ApprovedListComponent),
+        import('../myskill-x/myportal/management/approved-list/approved-list.component').then((m) => m.ApprovedListComponent),
     },
     {
       path: 'view-list-excel',
       loadComponent: () =>
-        import('../common/myportal/management/approved-list/view-list-excel/view-list-excel.component').then((m) => m.ViewListExcelComponent),
+        import('../myskill-x/myportal/management/approved-list/view-list-excel/view-list-excel.component').then((m) => m.ViewListExcelComponent),
     },
     {
       path: 'view-list-excel/:type',
       loadComponent: () =>
-        import('../common/myportal/management/approved-list/view-list-excel/view-list-excel.component').then((m) => m.ViewListExcelComponent),
+        import('../myskill-x/myportal/management/approved-list/view-list-excel/view-list-excel.component').then((m) => m.ViewListExcelComponent),
     },
     {
       path: 'view-list-doc',
       loadComponent: () =>
-        import('../common/myportal/management/approved-list/view-list-doc/view-list-doc.component').then((m) => m.ViewListDocComponent),
+        import('../myskill-x/myportal/management/approved-list/view-list-doc/view-list-doc.component').then((m) => m.ViewListDocComponent),
     },
     {
       path: 'view-list-doc/:type',
       loadComponent: () =>
-        import('../common/myportal/management/approved-list/view-list-doc/view-list-doc.component').then((m) => m.ViewListDocComponent),
+        import('../myskill-x/myportal/management/approved-list/view-list-doc/view-list-doc.component').then((m) => m.ViewListDocComponent),
     },
     {
       path: 'view-list-course',
       loadComponent: () =>
-        import('../common/myportal/management/approved-list/view-list-course/view-list-course.component').then((m) => m.ViewListCourseComponent),
+        import('../myskill-x/myportal/management/approved-list/view-list-course/view-list-course.component').then((m) => m.ViewListCourseComponent),
     },
     {
       path: 'view-list-course/:type',
       loadComponent: () =>
-        import('../common/myportal/management/approved-list/view-list-course/view-list-course.component').then((m) => m.ViewListCourseComponent),
+        import('../myskill-x/myportal/management/approved-list/view-list-course/view-list-course.component').then((m) => m.ViewListCourseComponent),
     },
     ]
   }

src/app/shared/components/header/header.component.html

@@ -363,7 +363,7 @@
                 </div>
 
                 <div class="">
-                  <a routerLink="/myportal/portal-category-list"
+                  <a routerLink="/myskill-x/portal-category-list"
                     class="p-4 items-center related-app block text-center rounded-sm hover:bg-gray-50 dark:hover:bg-black/20">
                     <img src="./assets/images/logoallHR/mySkill-x.png" alt="miscrosoft"
                       class="leading-[1.75] text-2xl !h-[1.75rem] align-middle flex justify-center mx-auto">

src/app/shared/components/sidebar/sidebar.component.ts

@@ -114,7 +114,7 @@ export class SidebarComponent {
     this.currentUrl = this.router.url
     this.isCommonRoute = this.currentUrl.includes('/admin');
     this.isInstallerRoute = this.currentUrl.includes('/company');
-    this.isMyportalRoute = this.currentUrl.includes('/myportal');
+    this.isMyportalRoute = this.currentUrl.includes('/myskill-x');
     this.isMylearnRoute = this.currentUrl.includes('/mylearn');
     this.isMyJobRoute = this.currentUrl.includes('/myjob');
     this.isMyhrLiteRoute = this.currentUrl.includes('/myhr-lite');
@@ -149,7 +149,7 @@ export class SidebarComponent {
   checkInitialUrl(): void {
     this.isCommonRoute = this.currentUrl.includes('/admin');
     this.isInstallerRoute = this.currentUrl.includes('/company');
-    this.isMyportalRoute = this.currentUrl.includes('/myportal');
+    this.isMyportalRoute = this.currentUrl.includes('/myskill-x');
     this.isMylearnRoute = this.currentUrl.includes('/mylearn');
     this.isMyJobRoute = this.currentUrl.includes('/myjob');
     this.isMyhrLiteRoute = this.currentUrl.includes('/myhr-lite');
@@ -161,7 +161,7 @@ export class SidebarComponent {
     console.log('Initial URL:', this.currentUrl);
     console.log('Is Common Route:', this.isCommonRoute);
     console.log('Is Installer Route:', this.isInstallerRoute);
-    console.log('Is Myportal Route:', this.isMyportalRoute);
+    console.log('Is Myskill-X Route:', this.isMyportalRoute);
     console.log('mylearn routes',this.isMylearnRoute);
     console.log('myhrlite routes',this.isMyhrLiteRoute);
     console.log('myface routes',this.isMyFaceRoute);
@@ -197,7 +197,7 @@ export class SidebarComponent {
         // Update the boolean values
         this.isCommonRoute = this.currentUrl.includes('/admin');
         this.isInstallerRoute = this.currentUrl.includes('/company');
-        this.isMyportalRoute = this.currentUrl.includes('/myportal');
+        this.isMyportalRoute = this.currentUrl.includes('/myskill-x');
         this.isMylearnRoute = this.currentUrl.includes('/mylearn');
         this.isMyJobRoute = this.currentUrl.includes('/myjob');
         this.isMyhrLiteRoute = this.currentUrl.includes('/myhr-lite');

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

@@ -224,45 +224,45 @@ export class NavService implements OnDestroy {
       { headTitle: 'MyPortal' },
       {
         icon: 'receipt',
-        path: '/myportal/portal-category-list',
+        path: '/myskill-x/portal-category-list',
         title: 'รายการเอกสาร',
         type: 'link',
       },
       {
         icon: 'receipt',
-        path: '/myportal/portal-create-category',
+        path: '/myskill-x/portal-create-category',
         title: 'รายการอัพโหลดเอกสาร',
         type: 'link',
       },
       {
         icon: 'cog',
-        path: '/myportal/management',
+        path: '/myskill-x/management',
         title: 'การจัดการ',
         type: 'sub',
         children: [
-          { path: '/myportal/portal-category-list-approve', title: 'รายการรอการอนุมัติ', type: 'link' },
-          { path: '/myportal/approved-list', title: 'รายการผ่านการอนุมัติ', type: 'link' }
+          { path: '/myskill-x/portal-category-list-approve', title: 'รายการรอการอนุมัติ', type: 'link' },
+          { path: '/myskill-x/approved-list', title: 'รายการผ่านการอนุมัติ', type: 'link' }
         ],
       },
       {
         icon: 'user',
-        path: '/myportal/set-excel-reports',
+        path: '/myskill-x/set-excel-reports',
         title: 'ตั้งรายงานเอ็กเซล',
         type: 'sub',
         children: [
-          { path: '/myportal/excel-list', title: 'เพิ่มรายงาน Excel', type: 'link' },
-          { path: '/myportal/excel-report-toggle', title: 'เปิด-ปิด การใช้รายงาน Excel', type: 'link' }
+          { path: '/myskill-x/excel-list', title: 'เพิ่มรายงาน Excel', type: 'link' },
+          { path: '/myskill-x/excel-report-toggle', title: 'เปิด-ปิด การใช้รายงาน Excel', type: 'link' }
         ],
       },
       {
         icon: 'data',
-        path: '/myportal/datasource-table',
+        path: '/myskill-x/datasource-table',
         title: 'DataSource Table',
         type: 'link',
       },
       {
         icon: 'file',
-        path: '/myportal/excel-report',
+        path: '/myskill-x/excel-report',
         title: 'รายงาน Excel',
         type: 'link',
       },