เลือกบริษัท

src/app/portal-manage/my-portal/approved-list/approved-list.component.html

-<app-page-header [title]="'รายการเอกสารผ่านการอนุมัติ'" [activeTitle]="'รายการเอกสารผ่านการอนุมัติ'" [title1]="'อนุมัติหลักสูตร'"></app-page-header>
+<app-page-header [title]="'รายการเอกสารผ่านการอนุมัติ'" [activeTitle]="'รายการเอกสารผ่านการอนุมัติ'"
+  [title1]="'อนุมัติหลักสูตร'"></app-page-header>
 <!-- <div class="row">
     <div class="col-12">
       <div class="card card-body">
@@ -25,44 +26,188 @@
     </div>
   </div> -->
 
+@if(companySelect.companyId){
+<ng-container *ngTemplateOutlet="documentTemplate"></ng-container>
+} @else {
+<ng-container *ngTemplateOutlet="companyTemplate"></ng-container>
+}
 
-  <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">
+<ng-template #companyTemplate>
+  <div class="grid grid-cols-12 gap-6">
+    <div class="xl:col-span-12 col-span-12">
+      <div class="box">
+        <div class="box-header justify-between">
+          <div class="box-title">
+            {{ 'All List' | translate}} <span
+              class="badge bg-light text-default rounded-full ms-1 text-[0.75rem] align-middle">{{companyFilter().length}}</span>
+          </div>
+          <div class="flex flex-wrap gap-2">
+            <div>
+              <input class="form-control form-control" type="text" placeholder="ค้นหาบริษัท"
+                aria-label=".form-control-sm example" [(ngModel)]='searchText'>
+            </div>
+          </div>
+        </div>
+        <div class="box-body">
+          <div class="table-responsive">
+            <table class="table whitespace-nowrap min-w-full ti-custom-table-hover">
+              <thead>
+                <tr class="border-b border text-white" style="background-color: #49b6f5;">
+                  <th class="text-center" scope="col">บริษัท</th>
+                  <th class="text-center" scope="col">สถานะ</th>
+                </tr>
+              </thead>
+              <tbody *ngIf="company.loading">
+                <tr>
+                  <td colspan="2" class="loading">
+                    <div class="spinner"></div>
+                    <div class="spinner"></div>
+                    <div class="spinner"></div>
+                    <span>กำลังค้นหา...</span>
+                  </td>
+                </tr>
+              </tbody>
+              @if(!company.loading && !companyFilter().length){
+              <tbody>
+                <tr style="background-color:#ebf2f6">
+                  <td colspan="1" class="text-center">ไม่พบข้อมูล</td>
+                </tr>
+              </tbody>
+              }
+              @if(!company.loading && companyFilter().length){
+              <tbody id="tableBody">
+                @for (items of companyFilter() | slice: pageCompany * pageSizeCompany : (pageCompany + 1) *
+                pageSizeCompany; track $index) {
+                <tr (mouseenter)="tableHover.set(items.companyId,!tableHover.get(items.companyId))"
+                  (mouseleave)="tableHover.clear()"
+                  [ngStyle]="{'background-color':tableHover.get(items.companyId)?'rgb(201 223 235)':'#ebf2f6','cursor':tableHover.get(items.companyId)?'pointer':'default'}"
+                  (click)="selectCompany(items)">
+                  <td class="font-16 font-medium">
+                    {{items.companyName}}
+                  </td>
+                  <td class="font-16 font-medium">
+                    {{items.status}}
+                  </td>
+                </tr>
+                }
+              </tbody>
+              }
+            </table>
+          </div>
+        </div>
+        <div class="box-footer">
+
+          @if(companyFilter().length > 0){
+          <div class="flex items-center flex-wrap overflow-auto">
+            <div class="d-flex justify-content-end p-2">
+              <select class="custom-select m-r-5 border-color-gray-full-focus" style="width: auto"
+                [(ngModel)]="pageSizeCompany" (ngModelChange)="pageCompany">
+                <option *ngFor="let item of [10,50,100]" [ngValue]="item">
+                  {{"รายการต่อหน้า"}}: {{item}}
+                </option>
+              </select>
+            </div>
+            <div class="mb-2 sm:mb-0">
+              <div>
+                {{'Showing' | translate}} {{companyFilter().length}} {{'entries'
+                | translate}} <i class="bi bi-arrow-right ms-2 font-semibold"></i>
+              </div>
+            </div>
+            <div class="ms-auto">
+              <nav aria-label="Page navigation">
+                <ul class="ti-pagination  mb-0">
+                  @if(pageCompany > 0){
+                  <li class="page-item {{pageCompany==0 ? 'disabled' : ''}}"><a
+                      class="page-link px-3 py-[0.375rem] cursor-pointer"
+                      (click)="pageCompany = pageCompany - 1">{{'Previous' |
+                      translate}}</a>
+                  </li>
+                  <li class="page-item"><a class="page-link px-3 py-[0.375rem]" href="javascript:void(0);"
+                      (click)="pageCompany = pageCompany - 1">{{pageCompany}}</a>
+                  </li>
+                  }
+                  <li class="page-item"><a class="page-link active px-3 py-[0.375rem]"
+                      href="javascript:void(0);">{{pageCompany
+                      +
+                      1}}</a>
+                  </li>
+
+                  @if((pageCompany + 1) * pageSizeCompany < companyFilter().length){ <li class="page-item"><a
+                      class="page-link px-3 py-[0.375rem]" href="javascript:void(0);"
+                      (click)="pageCompany = pageCompany + 1">{{pageCompany +
+                      2}}</a></li>
+                    }
+                    @if((pageCompany + 2) * pageSizeCompany < companyFilter().length){ <li class="page-item"><a
+                        class="page-link px-3 py-[0.375rem]" href="javascript:void(0);"
+                        (click)="pageCompany = pageCompany + 2">{{pageCompany
+                        +
+                        3}}</a></li>
+                      }
 
-      <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="" />
+                      @if((pageCompany + 1) * pageSizeCompany < companyFilter().length){ <li class="page-item"><a
+                          class="page-link px-3 py-[0.375rem] cursor-pointer"
+                          (click)="pageCompany = pageCompany + 1">{{'Next' |
+                          translate}}</a>
+                        </li>
+                        }
+                </ul>
+              </nav>
+            </div>
           </div>
-          <h3 class="text-2xl font-bold text-gray-800 mt-6 mb-2">{{ c.name }}</h3>
+          }
+          <div class="flex justify-end items-center flex-wrap gap-4 mt-3">
+            <div><i class="fa fa-times text-danger"></i> = used on menu</div>
+            <div><i class="fa fa-check text-success"></i> = unused on menu</div>
+            <div><i class="ri-file-download-line text-info"></i> = download files</div>
+            <div><i class="ri-printer-line text-warning"></i> = print report</div>
+          </div>
+
         </div>
+      </div>
+    </div>
+  </div>
+</ng-template>
 
-        <!-- 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>
+
+
+<ng-template #documentTemplate>
+  <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>
-            <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 
+            <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>
+                  (click)="openView(c.id)">
+                  รายละเอียด
+                </button>
+              </div>
             </div>
           </div>
         </div>
-      </div>
 
+      </div>
     </div>
   </div>
-</div>
\ No newline at end of file
+</ng-template>
\ No newline at end of file

src/app/portal-manage/my-portal/approved-list/approved-list.component.ts

@@ -7,6 +7,10 @@ import { SharedModule } from '../../../shared/shared.module';
 import { CourseService } from '../../services/course.service';
 import { DocumentService } from '../../services/document.service';
 import { ExcelService } from '../../services/excel.service';
+import { TokenService } from '../../../shared/services/token.service';
+import { CompanyModel } from '../../models/company.model';
+import { DatasourceTableModel, MyDatasourceTableModel } from '../../models/datasource-table.model';
+import { DatasourseTableService } from '../../services/datasourse-table.service';
 
 @Component({
   selector: 'app-approved-list',
@@ -45,9 +49,20 @@ export class ApprovedListComponent implements OnInit {
         "myskill-x"
       ]
     }
+
+
+  company: { loading: boolean, list: DatasourceTableModel[] } = { loading: false, list: [] }
+  companySelect: CompanyModel = new CompanyModel()
+  searchText = ''
+  pageCompany = 0;
+  pageSizeCompany = 10;
+  tableHover: Map<string, boolean> = new Map<string, boolean>()
+  buttonHover: Map<string, boolean> = new Map<string, boolean>()
   constructor(
     private router: Router,
-    private excelService: ExcelService, private documentService: DocumentService, private courseService: CourseService
+    private excelService: ExcelService, private documentService: DocumentService, private courseService: CourseService,
+    private tokenService: TokenService,
+    private datasourceTable: DatasourseTableService,
   ) {
     this.path.data = this.path.list.find(e => this.router.url.includes(e)) || ''
   }
@@ -86,7 +101,30 @@ export class ApprovedListComponent implements OnInit {
         document: "0"
       },
     ];
+    // this.getListCount();
+    this.getCompany()
+  }
+
+  getCompany() {
+    this.company.loading = true
+    this.datasourceTable.getList().subscribe({
+      next: (response: DatasourceTableModel[]) => {
+        this.company.list = response.map((x: any) => new MyDatasourceTableModel(x));
+        this.company.loading = false
+      },
+      error: (error) => {
+        this.company.loading = false
+      }
+    });
+  }
+  companyFilter() {
+    return this.company.list.filter(e => e.companyName.includes(this.searchText))
+  }
+  selectCompany(body: DatasourceTableModel) {
+    this.tokenService.saveSelectCompany(body as any)
+    this.companySelect = this.tokenService.getSelectCompany()
     this.getListCount();
+
   }
   async getListCount() {
     try {

src/app/portal-manage/my-portal/category-list-approve/category-list-approve.component.html

-<app-page-header [title]="'รายการเอกสารรอการอนุมัติ'" [activeTitle]="'ผู้ดูแลระบบ'" [title1]="'รายการเอกสารรอการอนุมัติ'"></app-page-header>
+<app-page-header [title]="'รายการเอกสารรอการอนุมัติ'" [activeTitle]="'ผู้ดูแลระบบ'"
+  [title1]="'รายการเอกสารรอการอนุมัติ'"></app-page-header>
 
 <!-- <div class="row">
   <div class="col-12">
@@ -26,43 +27,190 @@
   </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">
+@if(companySelect.companyId){
+<ng-container *ngTemplateOutlet="documentTemplate"></ng-container>
+} @else {
+<ng-container *ngTemplateOutlet="companyTemplate"></ng-container>
+}
 
-      <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="" />
+
+<ng-template #companyTemplate>
+  <div class="grid grid-cols-12 gap-6">
+    <div class="xl:col-span-12 col-span-12">
+      <div class="box">
+        <div class="box-header justify-between">
+          <div class="box-title">
+            {{ 'All List' | translate}} <span
+              class="badge bg-light text-default rounded-full ms-1 text-[0.75rem] align-middle">{{companyFilter().length}}</span>
+          </div>
+          <div class="flex flex-wrap gap-2">
+            <div>
+              <input class="form-control form-control" type="text" placeholder="ค้นหาบริษัท"
+                aria-label=".form-control-sm example" [(ngModel)]='searchText'>
+            </div>
           </div>
-          <h3 class="text-2xl font-bold text-gray-800 mt-6 mb-2">{{ c.name }}</h3>
         </div>
+        <div class="box-body">
+          <div class="table-responsive">
+            <table class="table whitespace-nowrap min-w-full ti-custom-table-hover">
+              <thead>
+                <tr class="border-b border text-white" style="background-color: #49b6f5;">
+                  <th class="text-center" scope="col">บริษัท</th>
+                  <th class="text-center" scope="col">สถานะ</th>
+                </tr>
+              </thead>
+              <tbody *ngIf="company.loading">
+                <tr>
+                  <td colspan="2" class="loading">
+                    <div class="spinner"></div>
+                    <div class="spinner"></div>
+                    <div class="spinner"></div>
+                    <span>กำลังค้นหา...</span>
+                  </td>
+                </tr>
+              </tbody>
+              @if(!company.loading && !companyFilter().length){
+              <tbody>
+                <tr style="background-color:#ebf2f6">
+                  <td colspan="1" class="text-center">ไม่พบข้อมูล</td>
+                </tr>
+              </tbody>
+              }
+              @if(!company.loading && companyFilter().length){
+              <tbody id="tableBody">
+                @for (items of companyFilter() | slice: pageCompany * pageSizeCompany : (pageCompany + 1) *
+                pageSizeCompany; track $index) {
+                <tr (mouseenter)="tableHover.set(items.companyId,!tableHover.get(items.companyId))"
+                  (mouseleave)="tableHover.clear()"
+                  [ngStyle]="{'background-color':tableHover.get(items.companyId)?'rgb(201 223 235)':'#ebf2f6','cursor':tableHover.get(items.companyId)?'pointer':'default'}"
+                  (click)="selectCompany(items)">
+                  <td class="font-16 font-medium">
+                    {{items.companyName}}
+                  </td>
+                  <td class="font-16 font-medium">
+                    {{items.status}}
+                  </td>
+                </tr>
+                }
+              </tbody>
+              }
+            </table>
+          </div>
+        </div>
+        <div class="box-footer">
 
-        <!-- 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>
+          @if(companyFilter().length > 0){
+          <div class="flex items-center flex-wrap overflow-auto">
+            <div class="d-flex justify-content-end p-2">
+              <select class="custom-select m-r-5 border-color-gray-full-focus" style="width: auto"
+                [(ngModel)]="pageSizeCompany" (ngModelChange)="pageCompany">
+                <option *ngFor="let item of [10,50,100]" [ngValue]="item">
+                  {{"รายการต่อหน้า"}}: {{item}}
+                </option>
+              </select>
             </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 class="mb-2 sm:mb-0">
+              <div>
+                {{'Showing' | translate}} {{companyFilter().length}} {{'entries'
+                | translate}} <i class="bi bi-arrow-right ms-2 font-semibold"></i>
+              </div>
+            </div>
+            <div class="ms-auto">
+              <nav aria-label="Page navigation">
+                <ul class="ti-pagination  mb-0">
+                  @if(pageCompany > 0){
+                  <li class="page-item {{pageCompany==0 ? 'disabled' : ''}}"><a
+                      class="page-link px-3 py-[0.375rem] cursor-pointer"
+                      (click)="pageCompany = pageCompany - 1">{{'Previous' |
+                      translate}}</a>
+                  </li>
+                  <li class="page-item"><a class="page-link px-3 py-[0.375rem]" href="javascript:void(0);"
+                      (click)="pageCompany = pageCompany - 1">{{pageCompany}}</a>
+                  </li>
+                  }
+                  <li class="page-item"><a class="page-link active px-3 py-[0.375rem]"
+                      href="javascript:void(0);">{{pageCompany
+                      +
+                      1}}</a>
+                  </li>
+
+                  @if((pageCompany + 1) * pageSizeCompany < companyFilter().length){ <li class="page-item"><a
+                      class="page-link px-3 py-[0.375rem]" href="javascript:void(0);"
+                      (click)="pageCompany = pageCompany + 1">{{pageCompany +
+                      2}}</a></li>
+                    }
+                    @if((pageCompany + 2) * pageSizeCompany < companyFilter().length){ <li class="page-item"><a
+                        class="page-link px-3 py-[0.375rem]" href="javascript:void(0);"
+                        (click)="pageCompany = pageCompany + 2">{{pageCompany
+                        +
+                        3}}</a></li>
+                      }
+
+                      @if((pageCompany + 1) * pageSizeCompany < companyFilter().length){ <li class="page-item"><a
+                          class="page-link px-3 py-[0.375rem] cursor-pointer"
+                          (click)="pageCompany = pageCompany + 1">{{'Next' |
+                          translate}}</a>
+                        </li>
+                        }
+                </ul>
+              </nav>
             </div>
           </div>
+          }
+          <div class="flex justify-end items-center flex-wrap gap-4 mt-3">
+            <div><i class="fa fa-times text-danger"></i> = used on menu</div>
+            <div><i class="fa fa-check text-success"></i> = unused on menu</div>
+            <div><i class="ri-file-download-line text-info"></i> = download files</div>
+            <div><i class="ri-printer-line text-warning"></i> = print report</div>
+          </div>
+
         </div>
       </div>
+    </div>
+  </div>
+</ng-template>
 
+
+
+<ng-template #documentTemplate>
+  <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>
-</div>
\ No newline at end of file
+
+</ng-template>
\ No newline at end of file

src/app/portal-manage/my-portal/category-list-approve/category-list-approve.component.ts

@@ -8,6 +8,10 @@ import { SharedModule } from "../../../shared/shared.module";
 import { CourseService } from "../../services/course.service";
 import { DocumentService } from "../../services/document.service";
 import { ExcelService } from "../../services/excel.service";
+import { TokenService } from "../../../shared/services/token.service";
+import { CompanyModel } from "../../models/company.model";
+import { DatasourceTableModel, MyDatasourceTableModel } from "../../models/datasource-table.model";
+import { DatasourseTableService } from "../../services/datasourse-table.service";
 
 @Component({
   selector: "app-category-list-approve",
@@ -46,10 +50,20 @@ export class CategoryListApproveComponent implements OnInit {
         "myskill-x"
       ]
     }
+
+  company: { loading: boolean, list: DatasourceTableModel[] } = { loading: false, list: [] }
+  companySelect: CompanyModel = new CompanyModel()
+  searchText = ''
+  pageCompany = 0;
+  pageSizeCompany = 10;
+  tableHover: Map<string, boolean> = new Map<string, boolean>()
+  buttonHover: Map<string, boolean> = new Map<string, boolean>()
   constructor(
     private modalService: NgbModal,
     private router: Router,
-    private excelService: ExcelService, private documentService: DocumentService, private courseService: CourseService
+    private excelService: ExcelService, private documentService: DocumentService, private courseService: CourseService,
+    private tokenService: TokenService,
+    private datasourceTable: DatasourseTableService,
   ) {
     this.path.data = this.path.list.find(e => this.router.url.includes(e)) || ''
   }
@@ -90,9 +104,32 @@ export class CategoryListApproveComponent implements OnInit {
         document: "0"
       },
     ];
+    // this.getListCount();
+    this.getCompany()
+  }
+
+  getCompany() {
+    this.company.loading = true
+    this.datasourceTable.getList().subscribe({
+      next: (response: DatasourceTableModel[]) => {
+        this.company.list = response.map((x: any) => new MyDatasourceTableModel(x));
+        this.company.loading = false
+      },
+      error: (error) => {
+        this.company.loading = false
+      }
+    });
+  }
+  companyFilter() {
+    return this.company.list.filter(e => e.companyName.includes(this.searchText))
+  }
+  selectCompany(body: DatasourceTableModel) {
+    this.tokenService.saveSelectCompany(body as any)
+    this.companySelect = this.tokenService.getSelectCompany()
     this.getListCount();
 
   }
+  
   openView(id: string) {
     if (id == '1') {
       this.router.navigate(['/' + this.path.data + '/approve-excel']);

src/app/portal-manage/my-portal/category-list/category-list.component.html

@@ -24,7 +24,15 @@
     </div>
   </div>
 </div> -->
-<ng-template #name>
+
+@if(companySelect.companyId){
+<ng-container *ngTemplateOutlet="documentTemplate"></ng-container>
+} @else {
+<ng-container *ngTemplateOutlet="companyTemplate"></ng-container>
+}
+
+
+<ng-template #companyTemplate>
   <div class="grid grid-cols-12 gap-6">
     <div class="xl:col-span-12 col-span-12">
       <div class="box">
@@ -46,11 +54,12 @@
               <thead>
                 <tr class="border-b border text-white" style="background-color: #49b6f5;">
                   <th class="text-center" scope="col">บริษัท</th>
+                  <th class="text-center" scope="col">สถานะ</th>
                 </tr>
               </thead>
               <tbody *ngIf="company.loading">
                 <tr>
-                  <td colspan="1" class="loading">
+                  <td colspan="2" class="loading">
                     <div class="spinner"></div>
                     <div class="spinner"></div>
                     <div class="spinner"></div>
@@ -67,14 +76,18 @@
               }
               @if(!company.loading && companyFilter().length){
               <tbody id="tableBody">
-                @for (items of companyFilter() | slice: page * pageSize : (page + 1) * pageSize; track $index) {
+                @for (items of companyFilter() | slice: pageCompany * pageSizeCompany : (pageCompany + 1) *
+                pageSizeCompany; track $index) {
                 <tr (mouseenter)="tableHover.set(items.companyId,!tableHover.get(items.companyId))"
                   (mouseleave)="tableHover.clear()"
                   [ngStyle]="{'background-color':tableHover.get(items.companyId)?'rgb(201 223 235)':'#ebf2f6','cursor':tableHover.get(items.companyId)?'pointer':'default'}"
                   (click)="selectCompany(items)">
-                  <td colspan="6" class="font-16 font-medium">
+                  <td class="font-16 font-medium">
                     {{items.companyName}}
                   </td>
+                  <td class="font-16 font-medium">
+                    {{items.status}}
+                  </td>
                 </tr>
                 }
               </tbody>
@@ -88,7 +101,7 @@
           <div class="flex items-center flex-wrap overflow-auto">
             <div class="d-flex justify-content-end p-2">
               <select class="custom-select m-r-5 border-color-gray-full-focus" style="width: auto"
-                [(ngModel)]="pageSize" (ngModelChange)="page">
+                [(ngModel)]="pageSizeCompany" (ngModelChange)="pageCompany">
                 <option *ngFor="let item of [10,50,100]" [ngValue]="item">
                   {{"รายการต่อหน้า"}}: {{item}}
                 </option>
@@ -103,32 +116,37 @@
             <div class="ms-auto">
               <nav aria-label="Page navigation">
                 <ul class="ti-pagination  mb-0">
-                  @if(page > 0){
-                  <li class="page-item {{page==0 ? 'disabled' : ''}}"><a
-                      class="page-link px-3 py-[0.375rem] cursor-pointer" (click)="page = page - 1">{{'Previous' |
+                  @if(pageCompany > 0){
+                  <li class="page-item {{pageCompany==0 ? 'disabled' : ''}}"><a
+                      class="page-link px-3 py-[0.375rem] cursor-pointer"
+                      (click)="pageCompany = pageCompany - 1">{{'Previous' |
                       translate}}</a>
                   </li>
                   <li class="page-item"><a class="page-link px-3 py-[0.375rem]" href="javascript:void(0);"
-                      (click)="page = page - 1">{{page}}</a>
+                      (click)="pageCompany = pageCompany - 1">{{pageCompany}}</a>
                   </li>
                   }
-                  <li class="page-item"><a class="page-link active px-3 py-[0.375rem]" href="javascript:void(0);">{{page
+                  <li class="page-item"><a class="page-link active px-3 py-[0.375rem]"
+                      href="javascript:void(0);">{{pageCompany
                       +
                       1}}</a>
                   </li>
 
-                  @if((page + 1) * pageSize < companyFilter().length){ <li class="page-item"><a
-                      class="page-link px-3 py-[0.375rem]" href="javascript:void(0);" (click)="page = page + 1">{{page +
+                  @if((pageCompany + 1) * pageSizeCompany < companyFilter().length){ <li class="page-item"><a
+                      class="page-link px-3 py-[0.375rem]" href="javascript:void(0);"
+                      (click)="pageCompany = pageCompany + 1">{{pageCompany +
                       2}}</a></li>
                     }
-                    @if((page + 2) * pageSize < companyFilter().length){ <li class="page-item"><a
-                        class="page-link px-3 py-[0.375rem]" href="javascript:void(0);" (click)="page = page + 2">{{page
+                    @if((pageCompany + 2) * pageSizeCompany < companyFilter().length){ <li class="page-item"><a
+                        class="page-link px-3 py-[0.375rem]" href="javascript:void(0);"
+                        (click)="pageCompany = pageCompany + 2">{{pageCompany
                         +
                         3}}</a></li>
                       }
 
-                      @if((page + 1) * pageSize < companyFilter().length){ <li class="page-item"><a
-                          class="page-link px-3 py-[0.375rem] cursor-pointer" (click)="page = page + 1">{{'Next' |
+                      @if((pageCompany + 1) * pageSizeCompany < companyFilter().length){ <li class="page-item"><a
+                          class="page-link px-3 py-[0.375rem] cursor-pointer"
+                          (click)="pageCompany = pageCompany + 1">{{'Next' |
                           translate}}</a>
                         </li>
                         }
@@ -151,9 +169,8 @@
 </ng-template>
 
 
-<!-- <ng-container *ngTemplateOutlet="name2"></ng-container> -->
 
-<!-- <ng-template #name2> -->
+<ng-template #documentTemplate>
   <div class="max-w-7xl mx-auto">
     <div class="box p-4">
       <h4 class="text-xl font-semibold text-gray-800 mb-6">รายการเอกสาร</h4>
@@ -191,4 +208,4 @@
       </div>
     </div>
   </div>
-<!-- </ng-template> -->
\ No newline at end of file
+</ng-template>
\ No newline at end of file

src/app/portal-manage/my-portal/category-list/category-list.component.ts

@@ -12,6 +12,7 @@ import { SharedModule } from '../../../shared/shared.module';
 import { DatasourseTableService } from '../../services/datasourse-table.service';
 import { DatasourceTableModel, MyDatasourceTableModel } from '../../models/datasource-table.model';
 import { TokenService } from '../../../shared/services/token.service';
+import { CompanyModel } from '../../models/company.model';
 
 @Component({
   selector: 'app-category-list',
@@ -49,6 +50,7 @@ export class CategorylistComponent implements OnInit {
 
   tableHover: Map<string, boolean> = new Map<string, boolean>()
   buttonHover: Map<string, boolean> = new Map<string, boolean>()
+  companySelect: CompanyModel = new CompanyModel()
   constructor(
     private router: Router,
     private excelService: ExcelService,
@@ -58,8 +60,11 @@ export class CategorylistComponent implements OnInit {
     private datasourceTable: DatasourseTableService,
     private tokenService: TokenService
   ) {
+    this.tokenService.removeCompany()
     this.path.data = this.path.list.find(e => this.router.url.includes(e)) || ''
   }
+  pageCompany = 0;
+  pageSizeCompany = 10;
   page = 1;
   pageSize = 10;
   testdata: {
@@ -110,7 +115,7 @@ export class CategorylistComponent implements OnInit {
       // },
 
     ];
-    this.getListCount();
+    // this.getListCount();
     this.getCompany()
   }
 
@@ -131,6 +136,7 @@ export class CategorylistComponent implements OnInit {
   }
   selectCompany(body: DatasourceTableModel) {
     this.tokenService.saveSelectCompany(body as any)
+    this.companySelect = this.tokenService.getSelectCompany()
     this.getListCount();
 
   }

src/app/portal-manage/my-portal/create-category/create-category.component.html

@@ -27,45 +27,191 @@
 </div> -->
 
 
+@if(companySelect.companyId){
+<ng-container *ngTemplateOutlet="documentTemplate"></ng-container>
+} @else {
+<ng-container *ngTemplateOutlet="companyTemplate"></ng-container>
+}
 
-<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">
+<ng-template #companyTemplate>
+  <div class="grid grid-cols-12 gap-6">
+    <div class="xl:col-span-12 col-span-12">
+      <div class="box">
+        <div class="box-header justify-between">
+          <div class="box-title">
+            {{ 'All List' | translate}} <span
+              class="badge bg-light text-default rounded-full ms-1 text-[0.75rem] align-middle">{{companyFilter().length}}</span>
+          </div>
+          <div class="flex flex-wrap gap-2">
+            <div>
+              <input class="form-control form-control" type="text" placeholder="ค้นหาบริษัท"
+                aria-label=".form-control-sm example" [(ngModel)]='searchText'>
+            </div>
+          </div>
+        </div>
+        <div class="box-body">
+          <div class="table-responsive">
+            <table class="table whitespace-nowrap min-w-full ti-custom-table-hover">
+              <thead>
+                <tr class="border-b border text-white" style="background-color: #49b6f5;">
+                  <th class="text-center" scope="col">บริษัท</th>
+                  <th class="text-center" scope="col">สถานะ</th>
+                </tr>
+              </thead>
+              <tbody *ngIf="company.loading">
+                <tr>
+                  <td colspan="2" class="loading">
+                    <div class="spinner"></div>
+                    <div class="spinner"></div>
+                    <div class="spinner"></div>
+                    <span>กำลังค้นหา...</span>
+                  </td>
+                </tr>
+              </tbody>
+              @if(!company.loading && !companyFilter().length){
+              <tbody>
+                <tr style="background-color:#ebf2f6">
+                  <td colspan="1" class="text-center">ไม่พบข้อมูล</td>
+                </tr>
+              </tbody>
+              }
+              @if(!company.loading && companyFilter().length){
+              <tbody id="tableBody">
+                @for (items of companyFilter() | slice: pageCompany * pageSizeCompany : (pageCompany + 1) *
+                pageSizeCompany; track $index) {
+                <tr (mouseenter)="tableHover.set(items.companyId,!tableHover.get(items.companyId))"
+                  (mouseleave)="tableHover.clear()"
+                  [ngStyle]="{'background-color':tableHover.get(items.companyId)?'rgb(201 223 235)':'#ebf2f6','cursor':tableHover.get(items.companyId)?'pointer':'default'}"
+                  (click)="selectCompany(items)">
+                  <td class="font-16 font-medium">
+                    {{items.companyName}}
+                  </td>
+                  <td class="font-16 font-medium">
+                    {{items.status}}
+                  </td>
+                </tr>
+                }
+              </tbody>
+              }
+            </table>
+          </div>
+        </div>
+        <div class="box-footer">
 
-      <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="" />
+          @if(companyFilter().length > 0){
+          <div class="flex items-center flex-wrap overflow-auto">
+            <div class="d-flex justify-content-end p-2">
+              <select class="custom-select m-r-5 border-color-gray-full-focus" style="width: auto"
+                [(ngModel)]="pageSizeCompany" (ngModelChange)="pageCompany">
+                <option *ngFor="let item of [10,50,100]" [ngValue]="item">
+                  {{"รายการต่อหน้า"}}: {{item}}
+                </option>
+              </select>
+            </div>
+            <div class="mb-2 sm:mb-0">
+              <div>
+                {{'Showing' | translate}} {{companyFilter().length}} {{'entries'
+                | translate}} <i class="bi bi-arrow-right ms-2 font-semibold"></i>
+              </div>
+            </div>
+            <div class="ms-auto">
+              <nav aria-label="Page navigation">
+                <ul class="ti-pagination  mb-0">
+                  @if(pageCompany > 0){
+                  <li class="page-item {{pageCompany==0 ? 'disabled' : ''}}"><a
+                      class="page-link px-3 py-[0.375rem] cursor-pointer"
+                      (click)="pageCompany = pageCompany - 1">{{'Previous' |
+                      translate}}</a>
+                  </li>
+                  <li class="page-item"><a class="page-link px-3 py-[0.375rem]" href="javascript:void(0);"
+                      (click)="pageCompany = pageCompany - 1">{{pageCompany}}</a>
+                  </li>
+                  }
+                  <li class="page-item"><a class="page-link active px-3 py-[0.375rem]"
+                      href="javascript:void(0);">{{pageCompany
+                      +
+                      1}}</a>
+                  </li>
+
+                  @if((pageCompany + 1) * pageSizeCompany < companyFilter().length){ <li class="page-item"><a
+                      class="page-link px-3 py-[0.375rem]" href="javascript:void(0);"
+                      (click)="pageCompany = pageCompany + 1">{{pageCompany +
+                      2}}</a></li>
+                    }
+                    @if((pageCompany + 2) * pageSizeCompany < companyFilter().length){ <li class="page-item"><a
+                        class="page-link px-3 py-[0.375rem]" href="javascript:void(0);"
+                        (click)="pageCompany = pageCompany + 2">{{pageCompany
+                        +
+                        3}}</a></li>
+                      }
+
+                      @if((pageCompany + 1) * pageSizeCompany < companyFilter().length){ <li class="page-item"><a
+                          class="page-link px-3 py-[0.375rem] cursor-pointer"
+                          (click)="pageCompany = pageCompany + 1">{{'Next' |
+                          translate}}</a>
+                        </li>
+                        }
+                </ul>
+              </nav>
+            </div>
+          </div>
+          }
+          <div class="flex justify-end items-center flex-wrap gap-4 mt-3">
+            <div><i class="fa fa-times text-danger"></i> = used on menu</div>
+            <div><i class="fa fa-check text-success"></i> = unused on menu</div>
+            <div><i class="ri-file-download-line text-info"></i> = download files</div>
+            <div><i class="ri-printer-line text-warning"></i> = print report</div>
           </div>
-          <h3 class="text-2xl font-bold text-gray-800 mt-6 mb-2">{{ c.name }}</h3>
+
         </div>
+      </div>
+    </div>
+  </div>
+</ng-template>
 
-        <!-- 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>
+
+
+<ng-template #documentTemplate>
+  <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>
-            <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 
+            <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>
+                  (click)="openView(c.id)">
+                  รายละเอียด
+                </button>
+              </div>
             </div>
           </div>
         </div>
-      </div>
 
+      </div>
     </div>
   </div>
-</div>
+</ng-template>
 <!-- Add File -->
 <!-- <ng-template #editTemplateModal let-modal>
 

src/app/portal-manage/my-portal/create-category/create-category.component.ts

@@ -9,6 +9,10 @@ import { CourseService } from '../../services/course.service';
 import { DocumentService } from '../../services/document.service';
 import { ExcelService } from '../../services/excel.service';
 import { WidgetService } from '../../services/widgets.service';
+import { CompanyModel } from '../../models/company.model';
+import { TokenService } from '../../../shared/services/token.service';
+import { DatasourceTableModel, MyDatasourceTableModel } from '../../models/datasource-table.model';
+import { DatasourseTableService } from '../../services/datasourse-table.service';
 
 
 
@@ -49,11 +53,22 @@ export class CreateCategoryComponent implements OnInit {
         "myskill-x"
       ]
     }
+
+
+  company: { loading: boolean, list: DatasourceTableModel[] } = { loading: false, list: [] }
+  companySelect: CompanyModel = new CompanyModel()
+  searchText = ''
+  pageCompany = 0;
+  pageSizeCompany = 10;
+  tableHover: Map<string, boolean> = new Map<string, boolean>()
+  buttonHover: Map<string, boolean> = new Map<string, boolean>()
   constructor(private modalService: NgbModal, private router: Router,
     private excelService: ExcelService,
     private documentService: DocumentService,
     private courseService: CourseService,
-    private widgetService: WidgetService
+    private widgetService: WidgetService,
+    private tokenService: TokenService,
+    private datasourceTable: DatasourseTableService,
   ) {
     this.path.data = this.path.list.find(e => this.router.url.includes(e)) || ''
   }
@@ -106,7 +121,30 @@ export class CreateCategoryComponent implements OnInit {
       //   document: "0"
       // }
     ];
+    // this.getListCount();
+    this.getCompany()
+  }
+
+  getCompany() {
+    this.company.loading = true
+    this.datasourceTable.getList().subscribe({
+      next: (response: DatasourceTableModel[]) => {
+        this.company.list = response.map((x: any) => new MyDatasourceTableModel(x));
+        this.company.loading = false
+      },
+      error: (error) => {
+        this.company.loading = false
+      }
+    });
+  }
+  companyFilter() {
+    return this.company.list.filter(e => e.companyName.includes(this.searchText))
+  }
+  selectCompany(body: DatasourceTableModel) {
+    this.tokenService.saveSelectCompany(body as any)
+    this.companySelect = this.tokenService.getSelectCompany()
     this.getListCount();
+
   }
   async getListCount() {
     try {

src/app/portal-manage/my-portal/excel-list/excel-list.component.ts

@@ -24,6 +24,8 @@ import { TemplateModel, TemplateFileModel, MyTemplateFileModel, MyTemplateModel
 import { CustomCubeService } from '../../services/custom-cube.service';
 import { DatasourseTableService } from '../../services/datasourse-table.service';
 import { ExcelReportService } from '../../services/excel-report.service';
+import { TokenService } from '../../../shared/services/token.service';
+import { CompanyModel } from '../../models/company.model';
 export interface ModalDetail {
     text: { cardHead: string, search: string[], tableHead: string[] }
 }
@@ -170,12 +172,20 @@ export class ExcelListComponent implements OnInit {
     @ViewChild('modalData') modalData!: TemplateRef<any>;
     @ViewChild('gridModal') gridModal!: TemplateRef<any>;
     @ViewChild('pivotModal') pivotModal!: TemplateRef<any>;
+
+
+    company: { loading: boolean, list: DatasourceTableModel[] } = { loading: false, list: [] }
+    companySelect: CompanyModel = new CompanyModel()
+    searchTextCompany = ''
+    pageCompany = 0;
+    pageSizeCompany = 10;
     constructor(private excelReportService: ExcelReportService,
         private modalService: NgbModal,
         private customCubeService: CustomCubeService,
         private cdr: ChangeDetectorRef,
         private modal: MatDialog,
-        private datasourceTable: DatasourseTableService) {
+        private datasourceTable: DatasourseTableService,
+        private tokenService: TokenService) {
 
     }
     ngOnInit(): void {
@@ -184,6 +194,28 @@ export class ExcelListComponent implements OnInit {
         this.getExcelPortalList()
         this.getExcelPortalgGroupList()
         this.getExcelPortalTagsList()
+        // this.getData()
+        this.getCompany()
+    }
+
+    getCompany() {
+        this.company.loading = true
+        this.datasourceTable.getList().subscribe({
+            next: (response: DatasourceTableModel[]) => {
+                this.company.list = response.map((x: any) => new MyDatasourceTableModel(x));
+                this.company.loading = false
+            },
+            error: (error) => {
+                this.company.loading = false
+            }
+        });
+    }
+    companyFilter() {
+        return this.company.list.filter(e => e.companyName.includes(this.searchTextCompany))
+    }
+    selectCompany(body: DatasourceTableModel) {
+        this.tokenService.saveSelectCompany(body as any)
+        this.companySelect = this.tokenService.getSelectCompany()
         this.getData()
     }
     get totalItems(): number {

src/app/portal-manage/my-portal/excel-report-toggle/excel-report-toggle.component.html

 <app-page-header [title]="'เปิด-ปิด การใช้รายงาน Excel'" [activeTitle]="'ผู้ดูแลระบบ'"
     [title1]="'เปิด-ปิด การใช้รายงาน Excel'"></app-page-header>
-<div class="grid grid-cols-12 gap-6">
-    <div class="xl:col-span-12 col-span-12">
-        <div class="box">
-            <div class="box-header justify-between">
-                <div class="box-title">
-                    รายการเอกสาร
+
+@if(companySelect.companyId){
+<ng-container *ngTemplateOutlet="documentTemplate"></ng-container>
+} @else {
+<ng-container *ngTemplateOutlet="companyTemplate"></ng-container>
+}
+
+
+<ng-template #companyTemplate>
+    <div class="grid grid-cols-12 gap-6">
+        <div class="xl:col-span-12 col-span-12">
+            <div class="box">
+                <div class="box-header justify-between">
+                    <div class="box-title">
+                        {{ 'All List' | translate}} <span
+                            class="badge bg-light text-default rounded-full ms-1 text-[0.75rem] align-middle">{{companyFilter().length}}</span>
+                    </div>
+                    <div class="flex flex-wrap gap-2">
+                        <div>
+                            <input class="form-control form-control" type="text" placeholder="ค้นหาบริษัท"
+                                aria-label=".form-control-sm example" [(ngModel)]='searchTextCompany'>
+                        </div>
+                    </div>
                 </div>
-                <div class="flex flex-wrap gap-4">
-                    <!-- Search By -->
-                    <div class="d-flex flex-column" style="min-width: 200px;">
-                        <label class="mb-1 font-medium text-sm">Search By</label>
-                        <select class="form-control h-100" [(ngModel)]="searchBy">
-                            <option style="color: red" [class.d-none]="searchBy==''" [value]="''">
-                                {{searchBy!=''?'ยกเลิก':'--- เลือก ---'}}</option>
-                            <option [value]="'templateId'">รหัสกลุ่มแม่แบบ</option>
-                            <option [value]="'module'">โมดูล</option>
-                            <option [value]="'tname'">ชื่อกลุ่มรายงาน (ภาษาไทย)</option>
-                            <option [value]="'ename'">ชื่อกลุ่มรายงาน (ภาษาอังกฤษ)</option>
-                            <option [value]="'tdesc'">รายละเอียด (ภาษาไทย)</option>
-                            <option [value]="'edesc'">รายละเอียด (ภาษาอังกฤษ)</option>
-                        </select>
+                <div class="box-body">
+                    <div class="table-responsive">
+                        <table class="table whitespace-nowrap min-w-full ti-custom-table-hover">
+                            <thead>
+                                <tr class="border-b border text-white" style="background-color: #49b6f5;">
+                                    <th class="text-center" scope="col">บริษัท</th>
+                                    <th class="text-center" scope="col">สถานะ</th>
+                                </tr>
+                            </thead>
+                            <tbody *ngIf="company.loading">
+                                <tr>
+                                    <td colspan="2" class="loading">
+                                        <div class="spinner"></div>
+                                        <div class="spinner"></div>
+                                        <div class="spinner"></div>
+                                        <span>กำลังค้นหา...</span>
+                                    </td>
+                                </tr>
+                            </tbody>
+                            @if(!company.loading && !companyFilter().length){
+                            <tbody>
+                                <tr style="background-color:#ebf2f6">
+                                    <td colspan="1" class="text-center">ไม่พบข้อมูล</td>
+                                </tr>
+                            </tbody>
+                            }
+                            @if(!company.loading && companyFilter().length){
+                            <tbody id="tableBody">
+                                @for (items of companyFilter() | slice: pageCompany * pageSizeCompany : (pageCompany +
+                                1) *
+                                pageSizeCompany; track $index) {
+                                <tr (mouseenter)="tableHover.set(items.companyId,!tableHover.get(items.companyId))"
+                                    (mouseleave)="tableHover.clear()"
+                                    [ngStyle]="{'background-color':tableHover.get(items.companyId)?'rgb(201 223 235)':'#ebf2f6','cursor':tableHover.get(items.companyId)?'pointer':'default'}"
+                                    (click)="selectCompany(items)">
+                                    <td class="font-16 font-medium">
+                                        {{items.companyName}}
+                                    </td>
+                                    <td class="font-16 font-medium">
+                                        {{items.status}}
+                                    </td>
+                                </tr>
+                                }
+                            </tbody>
+                            }
+                        </table>
                     </div>
-
-                    <!-- Condition -->
-                    <div class="d-flex flex-column" style="min-width: 200px;">
-                        <label class="mb-1 font-medium text-sm">Condition</label>
-                        <select class="form-control h-100" [(ngModel)]="condition">
-                            <option style="color: red" [class.d-none]="condition==''" [value]="''">
-                                {{condition!=''?'ยกเลิก':'--- เลือก ---'}}</option>
-                            <option value="includes">คำในประโยค</option>
-                            <option value="lt">น้อยกว่า</option>
-                            <option value="gt">มากกว่า</option>
-                            <option value="eq">เท่ากับ</option>
-                            <option value="lte">น้อยกว่าเท่ากับ</option>
-                            <option value="gte">มากกว่าเท่ากับ</option>
-                            <option value="neq">ไม่เท่ากับ</option>
-                        </select>
+                </div>
+                <div class="box-footer">
+
+                    @if(companyFilter().length > 0){
+                    <div class="flex items-center flex-wrap overflow-auto">
+                        <div class="d-flex justify-content-end p-2">
+                            <select class="custom-select m-r-5 border-color-gray-full-focus" style="width: auto"
+                                [(ngModel)]="pageSizeCompany" (ngModelChange)="pageCompany">
+                                <option *ngFor="let item of [10,50,100]" [ngValue]="item">
+                                    {{"รายการต่อหน้า"}}: {{item}}
+                                </option>
+                            </select>
+                        </div>
+                        <div class="mb-2 sm:mb-0">
+                            <div>
+                                {{'Showing' | translate}} {{companyFilter().length}} {{'entries'
+                                | translate}} <i class="bi bi-arrow-right ms-2 font-semibold"></i>
+                            </div>
+                        </div>
+                        <div class="ms-auto">
+                            <nav aria-label="Page navigation">
+                                <ul class="ti-pagination  mb-0">
+                                    @if(pageCompany > 0){
+                                    <li class="page-item {{pageCompany==0 ? 'disabled' : ''}}"><a
+                                            class="page-link px-3 py-[0.375rem] cursor-pointer"
+                                            (click)="pageCompany = pageCompany - 1">{{'Previous' |
+                                            translate}}</a>
+                                    </li>
+                                    <li class="page-item"><a class="page-link px-3 py-[0.375rem]"
+                                            href="javascript:void(0);"
+                                            (click)="pageCompany = pageCompany - 1">{{pageCompany}}</a>
+                                    </li>
+                                    }
+                                    <li class="page-item"><a class="page-link active px-3 py-[0.375rem]"
+                                            href="javascript:void(0);">{{pageCompany
+                                            +
+                                            1}}</a>
+                                    </li>
+
+                                    @if((pageCompany + 1) * pageSizeCompany < companyFilter().length){ <li
+                                        class="page-item"><a class="page-link px-3 py-[0.375rem]"
+                                            href="javascript:void(0);"
+                                            (click)="pageCompany = pageCompany + 1">{{pageCompany +
+                                            2}}</a></li>
+                                        }
+                                        @if((pageCompany + 2) * pageSizeCompany < companyFilter().length){ <li
+                                            class="page-item"><a class="page-link px-3 py-[0.375rem]"
+                                                href="javascript:void(0);"
+                                                (click)="pageCompany = pageCompany + 2">{{pageCompany
+                                                +
+                                                3}}</a></li>
+                                            }
+
+                                            @if((pageCompany + 1) * pageSizeCompany < companyFilter().length){ <li
+                                                class="page-item"><a class="page-link px-3 py-[0.375rem] cursor-pointer"
+                                                    (click)="pageCompany = pageCompany + 1">{{'Next' |
+                                                    translate}}</a>
+                                                </li>
+                                                }
+                                </ul>
+                            </nav>
+                        </div>
+                    </div>
+                    }
+                    <div class="flex justify-end items-center flex-wrap gap-4 mt-3">
+                        <div><i class="fa fa-times text-danger"></i> = used on menu</div>
+                        <div><i class="fa fa-check text-success"></i> = unused on menu</div>
+                        <div><i class="ri-file-download-line text-info"></i> = download files</div>
+                        <div><i class="ri-printer-line text-warning"></i> = print report</div>
                     </div>
 
-                    <!-- Key Value -->
-                    <div class="d-flex flex-column" style="min-width: 200px;">
-                        <label class="mb-1 font-medium text-sm">Key Value</label>
-                        <input class="form-control h-100" type="text" placeholder="ค้นหา"
-                            aria-label=".form-control-sm example" [(ngModel)]="searchValue">
+                </div>
+            </div>
+        </div>
+    </div>
+</ng-template>
+
+
+
+<ng-template #documentTemplate>
+    <div class="grid grid-cols-12 gap-6">
+        <div class="xl:col-span-12 col-span-12">
+            <div class="box">
+                <div class="box-header justify-between">
+                    <div class="box-title">
+                        รายการเอกสาร
                     </div>
+                    <div class="flex flex-wrap gap-4">
+                        <!-- Search By -->
+                        <div class="d-flex flex-column" style="min-width: 200px;">
+                            <label class="mb-1 font-medium text-sm">Search By</label>
+                            <select class="form-control h-100" [(ngModel)]="searchBy">
+                                <option style="color: red" [class.d-none]="searchBy==''" [value]="''">
+                                    {{searchBy!=''?'ยกเลิก':'--- เลือก ---'}}</option>
+                                <option [value]="'templateId'">รหัสกลุ่มแม่แบบ</option>
+                                <option [value]="'module'">โมดูล</option>
+                                <option [value]="'tname'">ชื่อกลุ่มรายงาน (ภาษาไทย)</option>
+                                <option [value]="'ename'">ชื่อกลุ่มรายงาน (ภาษาอังกฤษ)</option>
+                                <option [value]="'tdesc'">รายละเอียด (ภาษาไทย)</option>
+                                <option [value]="'edesc'">รายละเอียด (ภาษาอังกฤษ)</option>
+                            </select>
+                        </div>
 
-                    <!-- Buttons -->
-                    <div class="flex items-end gap-2">
-                        <a href="javascript:void(0);" class="hs-dropdown-toggle ti-btn ti-btn-primary-full"
-                            style="margin-bottom: unset;" (click)="openTemplate.clear();templateListSearch()">
-                            <i class="ri-search-line font-semibold align-middle"></i>ค้นหา
-                        </a>
-                        <!-- <a href="javascript:void(0);" class="hs-dropdown-toggle ti-btn ti-btn-success-full"
+                        <!-- Condition -->
+                        <div class="d-flex flex-column" style="min-width: 200px;">
+                            <label class="mb-1 font-medium text-sm">Condition</label>
+                            <select class="form-control h-100" [(ngModel)]="condition">
+                                <option style="color: red" [class.d-none]="condition==''" [value]="''">
+                                    {{condition!=''?'ยกเลิก':'--- เลือก ---'}}</option>
+                                <option value="includes">คำในประโยค</option>
+                                <option value="lt">น้อยกว่า</option>
+                                <option value="gt">มากกว่า</option>
+                                <option value="eq">เท่ากับ</option>
+                                <option value="lte">น้อยกว่าเท่ากับ</option>
+                                <option value="gte">มากกว่าเท่ากับ</option>
+                                <option value="neq">ไม่เท่ากับ</option>
+                            </select>
+                        </div>
+
+                        <!-- Key Value -->
+                        <div class="d-flex flex-column" style="min-width: 200px;">
+                            <label class="mb-1 font-medium text-sm">Key Value</label>
+                            <input class="form-control h-100" type="text" placeholder="ค้นหา"
+                                aria-label=".form-control-sm example" [(ngModel)]="searchValue">
+                        </div>
+
+                        <!-- Buttons -->
+                        <div class="flex items-end gap-2">
+                            <a href="javascript:void(0);" class="hs-dropdown-toggle ti-btn ti-btn-primary-full"
+                                style="margin-bottom: unset;" (click)="openTemplate.clear();templateListSearch()">
+                                <i class="ri-search-line font-semibold align-middle"></i>ค้นหา
+                            </a>
+                            <!-- <a href="javascript:void(0);" class="hs-dropdown-toggle ti-btn ti-btn-success-full"
                             style="margin-bottom: unset;" (click)="openAddGroupModal()">
                             <i class="ri-add-line font-semibold align-middle"></i>Add Group
                         </a> -->
+                        </div>
                     </div>
                 </div>
-            </div>
 
-            <div class="box-body">
-                <div class="table-responsive">
-                    <table class="table whitespace-nowrap min-w-full ti-custom-table-hover ">
-                        <thead class="bg-info text-white">
-                            <tr>
-                                <th class="text-center" scope="col">ชื่อกลุ่มรายงาน(Thai)</th>
-                                <th class="text-center" scope="col">ชื่อกลุ่มรายงาน (ภาษาอังกฤษ)</th>
-                                <th class="text-center" scope="col" style="min-width: 200px">สร้างโดย</th>
-                                <th class="text-center" scope="col" style="min-width:120px">วันที่สร้าง</th>
-                                <th class="text-center" scope="col">สร้างเมื่อ</th>
-                                <th class="text-center" scope="col" style="min-width: 120px;">โมดูล</th>
-                                <th class="text-center" scope="col">Add file</th>
-                            </tr>
-                        </thead>
-                        <tbody *ngIf="!template.filter.length">
-                            <tr style="background-color:#ebf2f6">
-                                <td colspan="7" class="text-center">ไม่พบข้อมูล</td>
-                            </tr>
-                        </tbody>
-                        <tbody id="tableBody" *ngIf="isSearching || template.filter.length">
-                            <tr *ngIf="isSearching">
-                                <td colspan="7" class="loading">
-                                    <div class="spinner"></div>
-                                    <div class="spinner"></div>
-                                    <div class="spinner"></div>
-                                    <span>กำลังค้นหา...</span>
-                                </td>
-                            </tr>
-                            <ng-container *ngIf="!isSearching">
-                                <ng-container
-                                    *ngFor="let items of template.filter | slice: page * pageSize : (page+1) * pageSize ; let i = index">
-                                    <tr (mouseenter)="tableHover.set(items.templateId,!tableHover.get(items.templateId))"
-                                        (mouseleave)="tableHover.clear()"
-                                        [ngStyle]="{'background-color':tableHover.get(items.templateId)?'rgb(201 223 235)':'#ebf2f6'}">
-                                        <td colspan="6" class="font-16 font-medium">
-                                            {{items.tname}}<span *ngIf="items.tdesc">
-                                                -{{items.tdesc}}
-                                            </span>
-                                        </td>
-                                        <td class="text-center">
-                                            <ng-container *ngIf="items.templateFile.length">
-                                                <ng-container *ngIf="!openTemplate.get(items.templateId)">
-                                                    <button type="button" title="เปิด" (click)="
+                <div class="box-body">
+                    <div class="table-responsive">
+                        <table class="table whitespace-nowrap min-w-full ti-custom-table-hover ">
+                            <thead class="bg-info text-white">
+                                <tr>
+                                    <th class="text-center" scope="col">ชื่อกลุ่มรายงาน(Thai)</th>
+                                    <th class="text-center" scope="col">ชื่อกลุ่มรายงาน (ภาษาอังกฤษ)</th>
+                                    <th class="text-center" scope="col" style="min-width: 200px">สร้างโดย</th>
+                                    <th class="text-center" scope="col" style="min-width:120px">วันที่สร้าง</th>
+                                    <th class="text-center" scope="col">สร้างเมื่อ</th>
+                                    <th class="text-center" scope="col" style="min-width: 120px;">โมดูล</th>
+                                    <th class="text-center" scope="col">Add file</th>
+                                </tr>
+                            </thead>
+                            <tbody *ngIf="!template.filter.length">
+                                <tr style="background-color:#ebf2f6">
+                                    <td colspan="7" class="text-center">ไม่พบข้อมูล</td>
+                                </tr>
+                            </tbody>
+                            <tbody id="tableBody" *ngIf="isSearching || template.filter.length">
+                                <tr *ngIf="isSearching">
+                                    <td colspan="7" class="loading">
+                                        <div class="spinner"></div>
+                                        <div class="spinner"></div>
+                                        <div class="spinner"></div>
+                                        <span>กำลังค้นหา...</span>
+                                    </td>
+                                </tr>
+                                <ng-container *ngIf="!isSearching">
+                                    <ng-container
+                                        *ngFor="let items of template.filter | slice: page * pageSize : (page+1) * pageSize ; let i = index">
+                                        <tr (mouseenter)="tableHover.set(items.templateId,!tableHover.get(items.templateId))"
+                                            (mouseleave)="tableHover.clear()"
+                                            [ngStyle]="{'background-color':tableHover.get(items.templateId)?'rgb(201 223 235)':'#ebf2f6'}">
+                                            <td colspan="6" class="font-16 font-medium">
+                                                {{items.tname}}<span *ngIf="items.tdesc">
+                                                    -{{items.tdesc}}
+                                                </span>
+                                            </td>
+                                            <td class="text-center">
+                                                <ng-container *ngIf="items.templateFile.length">
+                                                    <ng-container *ngIf="!openTemplate.get(items.templateId)">
+                                                        <button type="button" title="เปิด" (click)="
                                             openTemplate.set(items.templateId,true)"
-                                                        (mouseenter)="buttonHover.set(items.templateId+'open',!buttonHover.get(items.templateId))"
-                                                        (mouseleave)="buttonHover.clear()"
-                                                        class="ti-btn ti-btn-wave  !gap-0 !m-0 bg-info/10 text-info hover:bg-info hover:text-white hover:border-info">
-                                                        <i class="ri-arrow-right-line"></i>
-                                                    </button>
-                                                </ng-container>
-                                                <ng-container *ngIf="openTemplate.get(items.templateId)">
-                                                    <button type="button" title="ปิด" (click)="
+                                                            (mouseenter)="buttonHover.set(items.templateId+'open',!buttonHover.get(items.templateId))"
+                                                            (mouseleave)="buttonHover.clear()"
+                                                            class="ti-btn ti-btn-wave  !gap-0 !m-0 bg-info/10 text-info hover:bg-info hover:text-white hover:border-info">
+                                                            <i class="ri-arrow-right-line"></i>
+                                                        </button>
+                                                    </ng-container>
+                                                    <ng-container *ngIf="openTemplate.get(items.templateId)">
+                                                        <button type="button" title="ปิด" (click)="
                                             openTemplate.set(items.templateId,false)"
-                                                        (mouseenter)="buttonHover.set(items.templateId+'close',!buttonHover.get(items.templateId))"
-                                                        (mouseleave)="buttonHover.clear()"
-                                                        class="ti-btn ti-btn-wave  !gap-0 !m-0 bg-info/10 text-info hover:bg-info hover:text-white hover:border-info">
-                                                        <i class="ri-arrow-down-line"></i>
-                                                    </button>
+                                                            (mouseenter)="buttonHover.set(items.templateId+'close',!buttonHover.get(items.templateId))"
+                                                            (mouseleave)="buttonHover.clear()"
+                                                            class="ti-btn ti-btn-wave  !gap-0 !m-0 bg-info/10 text-info hover:bg-info hover:text-white hover:border-info">
+                                                            <i class="ri-arrow-down-line"></i>
+                                                        </button>
+                                                    </ng-container>
                                                 </ng-container>
-                                            </ng-container>
 
-                                        </td>
-                                    </tr>
-                                    <ng-container *ngIf="openTemplate.get(items.templateId)">
-                                        <ng-container
-                                            *ngFor="let item of items.templateFile | slice: page * pageSize : (page+1) * pageSize ; let i = index">
-                                            <tr (mouseenter)="tableHover.set(item.fileName,!tableHover.get(item.fileName))"
-                                                (mouseleave)="tableHover.clear()"
-                                                [ngStyle]="{'background-color':tableHover.get(item.fileName)?'rgb(201 223 235)':'#ffffff'}">
-
-                                                <td style="white-space: normal !important;word-break: break-word;">
-                                                    {{item.tdesc}}
-                                                </td>
-                                                <td style="white-space: normal !important;word-break: break-word;">
-                                                    {{item.edesc}}</td>
-                                                <td class="text-center"
-                                                    style="white-space: normal !important;word-break: break-word;">
-                                                    <!-- {{item.createBy.thFullName}}</td> -->
-                                                <td class="text-center"
-                                                    style="white-space: normal !important;word-break: break-word;">
-                                                    {{formatISOToLocal(item.createDate).date}}</td>
-                                                <td class="text-center"
-                                                    style="white-space: normal !important;word-break: break-word;">
-                                                    {{formatISOToLocal(item.createDate).time}}</td>
-                                                <td class="text-center"
-                                                    style="white-space: normal !important;word-break: break-word;">
-                                                    {{item.module}}</td>
-                                                <td class="text-center">
-                                                    <i *ngIf="item.menuActive=='0'"
-                                                        class="fa fa-times text-danger cursor-pointer"
-                                                        style="text-decoration: underline; font-size: medium;"
-                                                        (click)="menuActiveTemplateFile(item)"></i>
-                                                    <i *ngIf="item.menuActive=='1'"
-                                                        class="fa fa-check text-success cursor-pointer"
-                                                        style="text-decoration: underline; font-size: medium;"
-                                                        (click)="menuActiveTemplateFile(item)"></i>
-                                                    &nbsp;
-                                                    <a aria-label="anchor" title="Print"
-                                                        (mouseenter)="buttonHover.set(item.fileName+'print',!buttonHover.get(item.fileName))"
-                                                        (mouseleave)="buttonHover.clear()"
-                                                        class="ti-btn ti-btn-wave product-btn !gap-0 !m-0  bg-warning/10 text-warning hover:bg-warning hover:text-white hover:border-warning cursor-pointer"
-                                                        (click)="openPrintModal(item);">
-                                                        <i class="ri-printer-line"></i></a>
-                                                </td>
-                                            </tr>
+                                            </td>
+                                        </tr>
+                                        <ng-container *ngIf="openTemplate.get(items.templateId)">
+                                            <ng-container
+                                                *ngFor="let item of items.templateFile | slice: page * pageSize : (page+1) * pageSize ; let i = index">
+                                                <tr (mouseenter)="tableHover.set(item.fileName,!tableHover.get(item.fileName))"
+                                                    (mouseleave)="tableHover.clear()"
+                                                    [ngStyle]="{'background-color':tableHover.get(item.fileName)?'rgb(201 223 235)':'#ffffff'}">
+
+                                                    <td style="white-space: normal !important;word-break: break-word;">
+                                                        {{item.tdesc}}
+                                                    </td>
+                                                    <td style="white-space: normal !important;word-break: break-word;">
+                                                        {{item.edesc}}</td>
+                                                    <td class="text-center"
+                                                        style="white-space: normal !important;word-break: break-word;">
+                                                        <!-- {{item.createBy.thFullName}}</td> -->
+                                                    <td class="text-center"
+                                                        style="white-space: normal !important;word-break: break-word;">
+                                                        {{formatISOToLocal(item.createDate).date}}</td>
+                                                    <td class="text-center"
+                                                        style="white-space: normal !important;word-break: break-word;">
+                                                        {{formatISOToLocal(item.createDate).time}}</td>
+                                                    <td class="text-center"
+                                                        style="white-space: normal !important;word-break: break-word;">
+                                                        {{item.module}}</td>
+                                                    <td class="text-center">
+                                                        <i *ngIf="item.menuActive=='0'"
+                                                            class="fa fa-times text-danger cursor-pointer"
+                                                            style="text-decoration: underline; font-size: medium;"
+                                                            (click)="menuActiveTemplateFile(item)"></i>
+                                                        <i *ngIf="item.menuActive=='1'"
+                                                            class="fa fa-check text-success cursor-pointer"
+                                                            style="text-decoration: underline; font-size: medium;"
+                                                            (click)="menuActiveTemplateFile(item)"></i>
+                                                        &nbsp;
+                                                        <a aria-label="anchor" title="Print"
+                                                            (mouseenter)="buttonHover.set(item.fileName+'print',!buttonHover.get(item.fileName))"
+                                                            (mouseleave)="buttonHover.clear()"
+                                                            class="ti-btn ti-btn-wave product-btn !gap-0 !m-0  bg-warning/10 text-warning hover:bg-warning hover:text-white hover:border-warning cursor-pointer"
+                                                            (click)="openPrintModal(item);">
+                                                            <i class="ri-printer-line"></i></a>
+                                                    </td>
+                                                </tr>
+                                            </ng-container>
                                         </ng-container>
                                     </ng-container>
                                 </ng-container>
-                            </ng-container>
-                        </tbody>
-                    </table>
-                </div>
-            </div>
-            <div class="box-footer">
-                <div class="flex items-center flex-wrap overflow-auto" *ngIf="template.filter.length > 0">
-                    <div class="d-flex justify-content-end p-2">
-                        <select class="custom-select m-r-5 border-color-gray-full-focus" style="width: auto"
-                            [(ngModel)]="pageSize" (ngModelChange)="page">
-                            <option *ngFor="let item of [10,50,100]" [ngValue]="item">
-                                {{"รายการต่อหน้า"}}: {{item}}
-                            </option>
-                        </select>
+                            </tbody>
+                        </table>
                     </div>
-                    <div class="mb-2 sm:mb-0">
-                        <div>
-                            {{'Showing' | translate}} {{template.filter.length}} {{'entries'
-                            | translate}} <i class="bi bi-arrow-right ms-2 font-semibold"></i>
+                </div>
+                <div class="box-footer">
+                    <div class="flex items-center flex-wrap overflow-auto" *ngIf="template.filter.length > 0">
+                        <div class="d-flex justify-content-end p-2">
+                            <select class="custom-select m-r-5 border-color-gray-full-focus" style="width: auto"
+                                [(ngModel)]="pageSize" (ngModelChange)="page">
+                                <option *ngFor="let item of [10,50,100]" [ngValue]="item">
+                                    {{"รายการต่อหน้า"}}: {{item}}
+                                </option>
+                            </select>
+                        </div>
+                        <div class="mb-2 sm:mb-0">
+                            <div>
+                                {{'Showing' | translate}} {{template.filter.length}} {{'entries'
+                                | translate}} <i class="bi bi-arrow-right ms-2 font-semibold"></i>
+                            </div>
+                        </div>
+                        <div class="ms-auto">
+                            <nav aria-label="Page navigation">
+                                <ul class="ti-pagination  mb-0">
+                                    <li *ngIf="page > 0" class="page-item {{page==0 ? 'disabled' : ''}}"><a
+                                            class="page-link px-3 py-[0.375rem] cursor-pointer"
+                                            (click)="page = page - 1; updatePagedItems()">{{'Previous' | translate}}</a>
+                                    </li>
+                                    <li class="page-item"><a class="page-link px-3 py-[0.375rem]"
+                                            href="javascript:void(0);" *ngIf="page > 0"
+                                            (click)="page = page - 1; updatePagedItems()">{{page}}</a>
+                                    </li>
+                                    <li class="page-item"><a class="page-link active px-3 py-[0.375rem]"
+                                            href="javascript:void(0);">{{page + 1}}</a>
+                                    </li>
+                                    <li class="page-item"><a class="page-link px-3 py-[0.375rem]"
+                                            href="javascript:void(0);"
+                                            *ngIf="(page + 1) * pageSize < template.filter.length"
+                                            (click)="page = page + 1; updatePagedItems()">{{page + 2}}</a></li>
+                                    <li class="page-item"><a class="page-link px-3 py-[0.375rem]"
+                                            href="javascript:void(0);"
+                                            *ngIf="(page + 2) * pageSize < template.filter.length"
+                                            (click)="page = page + 2; updatePagedItems()">{{page + 3}}</a></li>
+                                    <li *ngIf="(page + 1) * pageSize < template.filter.length" class="page-item"><a
+                                            class="page-link px-3 py-[0.375rem] cursor-pointer"
+                                            (click)="page = page + 1; updatePagedItems()">{{'Next' | translate}}</a>
+                                    </li>
+                                </ul>
+                            </nav>
                         </div>
                     </div>
-                    <div class="ms-auto">
-                        <nav aria-label="Page navigation">
-                            <ul class="ti-pagination  mb-0">
-                                <li *ngIf="page > 0" class="page-item {{page==0 ? 'disabled' : ''}}"><a
-                                        class="page-link px-3 py-[0.375rem] cursor-pointer"
-                                        (click)="page = page - 1; updatePagedItems()">{{'Previous' | translate}}</a>
-                                </li>
-                                <li class="page-item"><a class="page-link px-3 py-[0.375rem]" href="javascript:void(0);"
-                                        *ngIf="page > 0" (click)="page = page - 1; updatePagedItems()">{{page}}</a>
-                                </li>
-                                <li class="page-item"><a class="page-link active px-3 py-[0.375rem]"
-                                        href="javascript:void(0);">{{page + 1}}</a>
-                                </li>
-                                <li class="page-item"><a class="page-link px-3 py-[0.375rem]" href="javascript:void(0);"
-                                        *ngIf="(page + 1) * pageSize < template.filter.length"
-                                        (click)="page = page + 1; updatePagedItems()">{{page + 2}}</a></li>
-                                <li class="page-item"><a class="page-link px-3 py-[0.375rem]" href="javascript:void(0);"
-                                        *ngIf="(page + 2) * pageSize < template.filter.length"
-                                        (click)="page = page + 2; updatePagedItems()">{{page + 3}}</a></li>
-                                <li *ngIf="(page + 1) * pageSize < template.filter.length" class="page-item"><a
-                                        class="page-link px-3 py-[0.375rem] cursor-pointer"
-                                        (click)="page = page + 1; updatePagedItems()">{{'Next' | translate}}</a>
-                                </li>
-                            </ul>
-                        </nav>
+                    <div class="flex justify-end items-center flex-wrap gap-4 mt-3">
+                        <div><i class="fa fa-times text-danger"></i> = used on menu</div>
+                        <div><i class="fa fa-check text-success"></i> = unused on menu</div>
+                        <!-- <div><i class="ri-file-download-line text-info"></i> = download files</div> -->
+                        <div><i class="ri-printer-line text-warning"></i> = print report</div>
                     </div>
-                </div>
-                <div class="flex justify-end items-center flex-wrap gap-4 mt-3">
-                    <div><i class="fa fa-times text-danger"></i> = used on menu</div>
-                    <div><i class="fa fa-check text-success"></i> = unused on menu</div>
-                    <!-- <div><i class="ri-file-download-line text-info"></i> = download files</div> -->
-                    <div><i class="ri-printer-line text-warning"></i> = print report</div>
-                </div>
 
+                </div>
             </div>
         </div>
     </div>
-</div>
 
 
 
-<ng-template #printModal let-modal>
-    <div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out">
-        <div class="ti-modal-content">
-            <div class="ti-modal-header flex justify-between items-center p-5">
-                <h6 class="ti-modal-title text-[1rem] font-semibold text-defaulttextcolor" id="mail-ComposeLabel">
-                    Excel Report
-                </h6>
+    <ng-template #printModal let-modal>
+        <div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out">
+            <div class="ti-modal-content">
+                <div class="ti-modal-header flex justify-between items-center p-5">
+                    <h6 class="ti-modal-title text-[1rem] font-semibold text-defaulttextcolor" id="mail-ComposeLabel">
+                        Excel Report
+                    </h6>
 
-                <button type="button" class="hs-dropdown-toggle !text-[1rem] !font-semibold !text-defaulttextcolor"
-                    (click)="closeModalprintModal()" #closeModal>
-                    <span class="sr-only">{{'Close' | translate}}</span>
-                    <i class="ri-close-line"></i>
-                </button>
-            </div>
-            <div class="ti-modal-body px-4 mt-3" style="min-height: 9.5rem;">
-                <div class="row">
-                    <div class="d-flex col-12 justify-content-center" *ngIf="loading||loadingExcel">
-                        <div *ngFor="let item of [1,2,3]" class="spinner-grow text-info mx-1" role="status">
-                            <span class="sr-only">Loading...</span>
+                    <button type="button" class="hs-dropdown-toggle !text-[1rem] !font-semibold !text-defaulttextcolor"
+                        (click)="closeModalprintModal()" #closeModal>
+                        <span class="sr-only">{{'Close' | translate}}</span>
+                        <i class="ri-close-line"></i>
+                    </button>
+                </div>
+                <div class="ti-modal-body px-4 mt-3" style="min-height: 9.5rem;">
+                    <div class="row">
+                        <div class="d-flex col-12 justify-content-center" *ngIf="loading||loadingExcel">
+                            <div *ngFor="let item of [1,2,3]" class="spinner-grow text-info mx-1" role="status">
+                                <span class="sr-only">Loading...</span>
+                            </div>
                         </div>
-                    </div>
-                    <ng-container *ngIf="!loading&&!loadingExcel">
-                        <ng-container *ngFor="let item of variableSheet; let i=index">
-                            <div class="flex items-center mb-4">
-                                <!-- Label -->
-                                <label class="w-1/4 text-right pr-4 font-semibold text-sm">
-                                    {{ item.label }}
-                                </label>
-
-                                <!-- Input -->
-                                <div class="w-3/4">
-                                    <ng-container [ngSwitch]="item.type">
-
-                                        <!-- Text -->
-                                        <input *ngSwitchCase="'text'" type="text" class="form-input w-full"
-                                            [(ngModel)]="item.value" />
-
-                                        <!-- List -->
-                                        <select *ngSwitchCase="'list'" class="form-select w-full"
-                                            [(ngModel)]="item.value">
-                                            <option *ngFor="let list of item.option" [value]="list.value">
-                                                {{ list.text }}
-                                            </option>
-                                        </select>
-
-                                        <!-- Radio -->
-                                        <div *ngSwitchCase="'radio'" class="flex flex-wrap gap-4">
-                                            <label *ngFor="let radioItem of item.option"
-                                                class="inline-flex items-center">
-                                                <input type="radio" class="form-radio mr-2"
-                                                    [name]="'group-' + item.label" [id]="radioItem.text+radioItem.value"
-                                                    [value]="radioItem.value" [(ngModel)]="item.value" />
-                                                {{ radioItem.text }}
-                                            </label>
-                                        </div>
-
-                                        <!-- Help -->
-                                        <div *ngSwitchCase="'help'" class="flex items-stretch">
-                                            <input type="text" readonly class="form-input w-1/2 bg-white cursor-pointer"
-                                                [value]="item.value.tdesc" (click)="openModalData(item)" />
-
-                                            <button
-                                                class="bg-primary hover:bg-primary text-white px-3 flex items-center justify-center rounded-none border"
-                                                type="button" (click)="openModalData(item)">
-                                                <i class="ri-search-line font-semibold align-middle"></i>
-                                            </button>
-
-                                            <button type="button"
-                                                class="bg-red hover:bg-red text-white text-sm ml-5 w-10 h-10 flex items-center justify-center rounded-full"
-                                                (click)="item.value={id:'',tdesc:'',edesc:''}">
-                                                <i class="fa fa-times text-xs"></i>
-                                            </button>
-
-                                        </div>
-
-                                        <!-- Calendar -->
-                                        <div *ngSwitchCase="'calendar'" class="flex items-stretch">
-                                            <!-- Input -->
-                                            <input class="form-input w-1/2 bg-white cursor-pointer rounded-r-none"
-                                                style="border-color: #e9edf6;" placeholder="dd.mm.yyyy" name="dp1"
-                                                ngbDatepicker #d1="ngbDatepicker" [(ngModel)]="select[item.key]"
-                                                readonly (click)="d1.toggle()"
-                                                (ngModelChange)="formatNgbDate(item.key, select[item.key])"
-                                                #c1="ngModel" (change)="validateDate(c1)" container="body">
-
-                                            <!-- Calendar Button -->
-                                            <button type="button"
-                                                class="bg-white hover:bg-primary text-primary hover:text-white px-3 flex items-center justify-center rounded-none border"
-                                                style="border-color: #154c9c;" (click)="d1.toggle()">
-                                                <i class="ri-calendar-2-line"></i>
-                                            </button>
-
-
-                                            <!-- Clear Button -->
-                                            <button type="button"
-                                                class="bg-red hover:bg-red text-white text-sm ml-5 w-10 h-10 flex items-center justify-center rounded-full"
-                                                (click)="select[item.key]=null ;formatNgbDate(item.key)">
-                                                <i class="fa fa-times text-xs"></i>
-                                            </button>
-                                        </div>
+                        <ng-container *ngIf="!loading&&!loadingExcel">
+                            <ng-container *ngFor="let item of variableSheet; let i=index">
+                                <div class="flex items-center mb-4">
+                                    <!-- Label -->
+                                    <label class="w-1/4 text-right pr-4 font-semibold text-sm">
+                                        {{ item.label }}
+                                    </label>
+
+                                    <!-- Input -->
+                                    <div class="w-3/4">
+                                        <ng-container [ngSwitch]="item.type">
+
+                                            <!-- Text -->
+                                            <input *ngSwitchCase="'text'" type="text" class="form-input w-full"
+                                                [(ngModel)]="item.value" />
+
+                                            <!-- List -->
+                                            <select *ngSwitchCase="'list'" class="form-select w-full"
+                                                [(ngModel)]="item.value">
+                                                <option *ngFor="let list of item.option" [value]="list.value">
+                                                    {{ list.text }}
+                                                </option>
+                                            </select>
+
+                                            <!-- Radio -->
+                                            <div *ngSwitchCase="'radio'" class="flex flex-wrap gap-4">
+                                                <label *ngFor="let radioItem of item.option"
+                                                    class="inline-flex items-center">
+                                                    <input type="radio" class="form-radio mr-2"
+                                                        [name]="'group-' + item.label"
+                                                        [id]="radioItem.text+radioItem.value" [value]="radioItem.value"
+                                                        [(ngModel)]="item.value" />
+                                                    {{ radioItem.text }}
+                                                </label>
+                                            </div>
+
+                                            <!-- Help -->
+                                            <div *ngSwitchCase="'help'" class="flex items-stretch">
+                                                <input type="text" readonly
+                                                    class="form-input w-1/2 bg-white cursor-pointer"
+                                                    [value]="item.value.tdesc" (click)="openModalData(item)" />
+
+                                                <button
+                                                    class="bg-primary hover:bg-primary text-white px-3 flex items-center justify-center rounded-none border"
+                                                    type="button" (click)="openModalData(item)">
+                                                    <i class="ri-search-line font-semibold align-middle"></i>
+                                                </button>
+
+                                                <button type="button"
+                                                    class="bg-red hover:bg-red text-white text-sm ml-5 w-10 h-10 flex items-center justify-center rounded-full"
+                                                    (click)="item.value={id:'',tdesc:'',edesc:''}">
+                                                    <i class="fa fa-times text-xs"></i>
+                                                </button>
+
+                                            </div>
+
+                                            <!-- Calendar -->
+                                            <div *ngSwitchCase="'calendar'" class="flex items-stretch">
+                                                <!-- Input -->
+                                                <input class="form-input w-1/2 bg-white cursor-pointer rounded-r-none"
+                                                    style="border-color: #e9edf6;" placeholder="dd.mm.yyyy" name="dp1"
+                                                    ngbDatepicker #d1="ngbDatepicker" [(ngModel)]="select[item.key]"
+                                                    readonly (click)="d1.toggle()"
+                                                    (ngModelChange)="formatNgbDate(item.key, select[item.key])"
+                                                    #c1="ngModel" (change)="validateDate(c1)" container="body">
+
+                                                <!-- Calendar Button -->
+                                                <button type="button"
+                                                    class="bg-white hover:bg-primary text-primary hover:text-white px-3 flex items-center justify-center rounded-none border"
+                                                    style="border-color: #154c9c;" (click)="d1.toggle()">
+                                                    <i class="ri-calendar-2-line"></i>
+                                                </button>
+
+
+                                                <!-- Clear Button -->
+                                                <button type="button"
+                                                    class="bg-red hover:bg-red text-white text-sm ml-5 w-10 h-10 flex items-center justify-center rounded-full"
+                                                    (click)="select[item.key]=null ;formatNgbDate(item.key)">
+                                                    <i class="fa fa-times text-xs"></i>
+                                                </button>
+                                            </div>
 
 
-                                    </ng-container>
+                                        </ng-container>
+                                    </div>
                                 </div>
-                            </div>
-                        </ng-container>
+                            </ng-container>
 
-                        <!-- <div *ngIf="variableSheet.length&&!loadingExcel"
+                            <!-- <div *ngIf="variableSheet.length&&!loadingExcel"
                     class="col-12 justify-content-center align-content-center d-flex" style="margin-bottom: 1rem;">
                     <button type="submit" class="btn btn-info waves-effect waves-light btn-w-100"
                         (click)="dowloadExcelReport()">
@@ -350,253 +506,263 @@
                         <span class="sr-only">Loading...</span>
                     </div>
                 </div> -->
-                        <div *ngIf="!variableSheet.length"
-                            class="col-12 justify-content-center align-content-center d-flex"
-                            style="margin-bottom: 1rem;margin-top: 1rem;">
-                            <div
-                                class="col-3 justify-content-center text-center font-weight-bold control-label col-form-label font-14">
-                                {{'No Data Found' }}
+                            <div *ngIf="!variableSheet.length"
+                                class="col-12 justify-content-center align-content-center d-flex"
+                                style="margin-bottom: 1rem;margin-top: 1rem;">
+                                <div
+                                    class="col-3 justify-content-center text-center font-weight-bold control-label col-form-label font-14">
+                                    {{'No Data Found' }}
+                                </div>
                             </div>
-                        </div>
-                        <div class="row col-12 flex justify-center"
-                            *ngIf="variableSheet.length&&(excelReport.isDataGrid=='1'||excelReport.isPivot=='1')">
-                            <div class="col-12 d-flex justify-content-center align-content-center">
-                                <button type="button" *ngIf="excelReport.isDataGrid=='1'"
-                                    class="ti-btn ti-btn-primary-full" (click)="getExcelData('grid')">Datagrid</button>
-                                <ng-container *ngIf="excelReport.isDataGrid=='1'&&excelReport.isPivot=='1'">
-                                    &nbsp;
-                                </ng-container>
-                                <button type="button" *ngIf="excelReport.isPivot=='1'"
-                                    class="ti-btn ti-btn-primary-full" (click)="getExcelData('pivot')">Pivot</button>
+                            <div class="row col-12 flex justify-center"
+                                *ngIf="variableSheet.length&&(excelReport.isDataGrid=='1'||excelReport.isPivot=='1')">
+                                <div class="col-12 d-flex justify-content-center align-content-center">
+                                    <button type="button" *ngIf="excelReport.isDataGrid=='1'"
+                                        class="ti-btn ti-btn-primary-full"
+                                        (click)="getExcelData('grid')">Datagrid</button>
+                                    <ng-container *ngIf="excelReport.isDataGrid=='1'&&excelReport.isPivot=='1'">
+                                        &nbsp;
+                                    </ng-container>
+                                    <button type="button" *ngIf="excelReport.isPivot=='1'"
+                                        class="ti-btn ti-btn-primary-full"
+                                        (click)="getExcelData('pivot')">Pivot</button>
+                                </div>
                             </div>
-                        </div>
-                    </ng-container>
+                        </ng-container>
+                    </div>
                 </div>
-            </div>
 
-            <div class="border-t mt-3">
-                <div class="ti-modal-footer flex justify-end gap-1 mb-3 mt-3 mr-3">
-                    <ng-container *ngIf="variableSheet.length">
-                        <button type="submit" class="ti-btn ti-btn-info-full waves-effect waves-light btn-w-100"
-                            [disabled]="loadingExcel" (click)="dowloadExcelReport()">
-                            {{"Print" }}
+                <div class="border-t mt-3">
+                    <div class="ti-modal-footer flex justify-end gap-1 mb-3 mt-3 mr-3">
+                        <ng-container *ngIf="variableSheet.length">
+                            <button type="submit" class="ti-btn ti-btn-info-full waves-effect waves-light btn-w-100"
+                                [disabled]="loadingExcel" (click)="dowloadExcelReport()">
+                                {{"Print" }}
+                            </button>
+                        </ng-container>
+                        <button type="button" class="ti-btn bg-danger text-white !font-medium"
+                            (click)="closeModalprintModal()">
+                            ปิด
                         </button>
-                    </ng-container>
-                    <button type="button" class="ti-btn bg-danger text-white !font-medium"
-                        (click)="closeModalprintModal()">
-                        ปิด
-                    </button>
+                    </div>
                 </div>
             </div>
         </div>
-    </div>
-</ng-template>
-
-<ng-template #modalData let-modal>
-    <div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out">
-        <div class="ti-modal-content">
-            <div class="ti-modal-header flex justify-between items-center p-5">
-                <h6 class="ti-modal-title text-[1rem] font-semibold text-defaulttextcolor" id="mail-ComposeLabel">
-                    {{modalDetail.text.cardHead }}
-                </h6>
-
-                <button type="button" class="hs-dropdown-toggle !text-[1rem] !font-semibold !text-defaulttextcolor"
-                    (click)="closeModalmodalData()" #closeModal>
-                    <span class="sr-only">{{'Close' | translate}}</span>
-                    <i class="ri-close-line"></i>
-                </button>
-            </div>
-            <div class="ti-modal-body px-4 mt-3">
-                <div class="d-flex mb-1">
-                    <input type="text" placeholder="{{'systemcode.search' }} {{modalDetail.text.search[0]}}"
-                        class=" form-control w-75 border-color-gray-full-focus" [(ngModel)]='searchModal'>
+    </ng-template>
+
+    <ng-template #modalData let-modal>
+        <div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out">
+            <div class="ti-modal-content">
+                <div class="ti-modal-header flex justify-between items-center p-5">
+                    <h6 class="ti-modal-title text-[1rem] font-semibold text-defaulttextcolor" id="mail-ComposeLabel">
+                        {{modalDetail.text.cardHead }}
+                    </h6>
+
+                    <button type="button" class="hs-dropdown-toggle !text-[1rem] !font-semibold !text-defaulttextcolor"
+                        (click)="closeModalmodalData()" #closeModal>
+                        <span class="sr-only">{{'Close' | translate}}</span>
+                        <i class="ri-close-line"></i>
+                    </button>
                 </div>
-                <div class="table-responsive">
-                    <table class="table  table-hover table-striped-myhr table-sm  mb-0 no-wrap v-middle "
-                        style="width: 100%">
-                        <thead class="bg-info ">
-                            <tr class="text-white font-weight-normal">
-                                <th class="font-weight-normal text-center" scope="col"
-                                    *ngFor="let item of modalDetail.text.tableHead">
-                                    {{item}}
-                                </th>
-                            </tr>
-                        </thead>
-                        <tbody *ngIf="!valueDetailFilter().length">
-                            <tr>
-                                <td colspan="9" class="font-weight-normal text-center">
-                                    {{"No Data Found" }}
-                                </td>
-                            </tr>
-                        </tbody>
-                        <tbody *ngIf="valueDetailFilter().length">
-                            <tr class="cursor-pointer"
-                                *ngFor="let item of valueDetailFilter() | slice: pageModal * pageSizeModal : (pageModal+1) * pageSizeModal; let i=index"
-                                (click)="selectData(item);closeModalmodalData()"
-                                (mouseenter)="tableHover.set(item.id,!tableHover.get(item.id))"
-                                (mouseleave)="tableHover.clear()"
-                                [ngStyle]="{'background-color':tableHover.get(item.id)?'rgb(201 223 235)':'#ffffff'}">
-                                <td class="align-middle text-center">
-                                    {{item.id}}
-                                </td>
-                                <td class="align-middle text-center">
-                                    {{item.tdesc}}
-                                </td>
-                                <td class="align-middle text-center">
-                                    {{item.edesc}}
-                                </td>
-                            </tr>
-                        </tbody>
-                    </table>
+                <div class="ti-modal-body px-4 mt-3">
+                    <div class="d-flex mb-1">
+                        <input type="text" placeholder="{{'systemcode.search' }} {{modalDetail.text.search[0]}}"
+                            class=" form-control w-75 border-color-gray-full-focus" [(ngModel)]='searchModal'>
+                    </div>
+                    <div class="table-responsive">
+                        <table class="table  table-hover table-striped-myhr table-sm  mb-0 no-wrap v-middle "
+                            style="width: 100%">
+                            <thead class="bg-info ">
+                                <tr class="text-white font-weight-normal">
+                                    <th class="font-weight-normal text-center" scope="col"
+                                        *ngFor="let item of modalDetail.text.tableHead">
+                                        {{item}}
+                                    </th>
+                                </tr>
+                            </thead>
+                            <tbody *ngIf="!valueDetailFilter().length">
+                                <tr>
+                                    <td colspan="9" class="font-weight-normal text-center">
+                                        {{"No Data Found" }}
+                                    </td>
+                                </tr>
+                            </tbody>
+                            <tbody *ngIf="valueDetailFilter().length">
+                                <tr class="cursor-pointer"
+                                    *ngFor="let item of valueDetailFilter() | slice: pageModal * pageSizeModal : (pageModal+1) * pageSizeModal; let i=index"
+                                    (click)="selectData(item);closeModalmodalData()"
+                                    (mouseenter)="tableHover.set(item.id,!tableHover.get(item.id))"
+                                    (mouseleave)="tableHover.clear()"
+                                    [ngStyle]="{'background-color':tableHover.get(item.id)?'rgb(201 223 235)':'#ffffff'}">
+                                    <td class="align-middle text-center">
+                                        {{item.id}}
+                                    </td>
+                                    <td class="align-middle text-center">
+                                        {{item.tdesc}}
+                                    </td>
+                                    <td class="align-middle text-center">
+                                        {{item.edesc}}
+                                    </td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
                 </div>
-            </div>
 
-            <div class="box-footer !border-t-0">
-                <div class="flex items-center flex-wrap overflow-auto" *ngIf="valueDetailFilter().length > 0">
-                    <div class="d-flex justify-content-end p-2">
-                        <select class="custom-select m-r-5 border-color-gray-full-focus" style="width: auto"
-                            [(ngModel)]="pageSizeModal" (ngModelChange)="pageModal=1">
-                            <option *ngFor="let item of [10,50,100]" [ngValue]="item">
-                                {{"รายการต่อหน้า"}}: {{item}}
-                            </option>
-                        </select>
-                    </div>
-                    <div class="mb-2 sm:mb-0">
-                        <div>
-                            {{'Showing' | translate}} {{valueDetailFilter().length}} {{'entries'
-                            | translate}} <i class="bi bi-arrow-right ms-2 font-semibold"></i>
+                <div class="box-footer !border-t-0">
+                    <div class="flex items-center flex-wrap overflow-auto" *ngIf="valueDetailFilter().length > 0">
+                        <div class="d-flex justify-content-end p-2">
+                            <select class="custom-select m-r-5 border-color-gray-full-focus" style="width: auto"
+                                [(ngModel)]="pageSizeModal" (ngModelChange)="pageModal=1">
+                                <option *ngFor="let item of [10,50,100]" [ngValue]="item">
+                                    {{"รายการต่อหน้า"}}: {{item}}
+                                </option>
+                            </select>
+                        </div>
+                        <div class="mb-2 sm:mb-0">
+                            <div>
+                                {{'Showing' | translate}} {{valueDetailFilter().length}} {{'entries'
+                                | translate}} <i class="bi bi-arrow-right ms-2 font-semibold"></i>
+                            </div>
+                        </div>
+                        <div class="ms-auto">
+                            <nav aria-label="Page navigation">
+                                <ul class="ti-pagination  mb-0">
+                                    <li *ngIf="pageModal>0" class="page-item {{pageModal==0 ? 'disabled' : ''}}"><a
+                                            class="page-link px-3 py-[0.375rem] cursor-pointer"
+                                            (click)="pageModal = pageModal-1;updatePagedItems()">{{'Previous' |
+                                            translate}}</a></li>
+                                    <li class="page-item"><a class="page-link px-3 py-[0.375rem]"
+                                            href="javascript:void(0);" *ngIf="pageModal-1>0"
+                                            (click)="pageModal = pageModal-2;updatePagedItems()">{{pageModal-1}}</a>
+                                    </li>
+                                    <li class="page-item"><a class="page-link px-3 py-[0.375rem]"
+                                            href="javascript:void(0);"
+                                            *ngIf="pageModal>0 && ((pageModal-1)*10 < (searchText == '' ? valueDetailFilter().length : valueDetailFilter().length))"
+                                            (click)="pageModal = pageModal-1;updatePagedItems()">{{pageModal}}</a></li>
+
+                                    <li class="page-item"><a class="page-link active px-3 py-[0.375rem]"
+                                            href="javascript:void(0);">{{pageModal +1}}</a>
+                                    </li>
+                                    <li class="page-item"><a class="page-link px-3 py-[0.375rem]"
+                                            href="javascript:void(0);"
+                                            *ngIf="(pageModal+1)*10 < (searchText == '' ? valueDetailFilter().length : valueDetailFilter().length)"
+                                            (click)="pageModal = pageModal+1;updatePagedItems()">{{pageModal +2}}</a>
+                                    </li>
+                                    <li class="page-item"><a class="page-link px-3 py-[0.375rem]"
+                                            href="javascript:void(0);"
+                                            *ngIf="(pageModal+2)*10 < (searchText == '' ? valueDetailFilter().length : valueDetailFilter().length)"
+                                            (click)="pageModal = pageModal+2;updatePagedItems()">{{pageModal +3}}</a>
+                                    </li>
+                                    <li *ngIf="(pageModal+1)*10 < (searchText == '' ? valueDetailFilter().length : valueDetailFilter().length)"
+                                        class="page-item"><a class="page-link px-3 py-[0.375rem] cursor-pointer"
+                                            (click)="pageModal = pageModal+1;updatePagedItems()">{{'Next' |
+                                            translate}}</a>
+                                    </li>
+                                </ul>
+                            </nav>
                         </div>
-                    </div>
-                    <div class="ms-auto">
-                        <nav aria-label="Page navigation">
-                            <ul class="ti-pagination  mb-0">
-                                <li *ngIf="pageModal>0" class="page-item {{pageModal==0 ? 'disabled' : ''}}"><a
-                                        class="page-link px-3 py-[0.375rem] cursor-pointer"
-                                        (click)="pageModal = pageModal-1;updatePagedItems()">{{'Previous' |
-                                        translate}}</a></li>
-                                <li class="page-item"><a class="page-link px-3 py-[0.375rem]" href="javascript:void(0);"
-                                        *ngIf="pageModal-1>0"
-                                        (click)="pageModal = pageModal-2;updatePagedItems()">{{pageModal-1}}</a>
-                                </li>
-                                <li class="page-item"><a class="page-link px-3 py-[0.375rem]" href="javascript:void(0);"
-                                        *ngIf="pageModal>0 && ((pageModal-1)*10 < (searchText == '' ? valueDetailFilter().length : valueDetailFilter().length))"
-                                        (click)="pageModal = pageModal-1;updatePagedItems()">{{pageModal}}</a></li>
-
-                                <li class="page-item"><a class="page-link active px-3 py-[0.375rem]"
-                                        href="javascript:void(0);">{{pageModal +1}}</a>
-                                </li>
-                                <li class="page-item"><a class="page-link px-3 py-[0.375rem]" href="javascript:void(0);"
-                                        *ngIf="(pageModal+1)*10 < (searchText == '' ? valueDetailFilter().length : valueDetailFilter().length)"
-                                        (click)="pageModal = pageModal+1;updatePagedItems()">{{pageModal +2}}</a></li>
-                                <li class="page-item"><a class="page-link px-3 py-[0.375rem]" href="javascript:void(0);"
-                                        *ngIf="(pageModal+2)*10 < (searchText == '' ? valueDetailFilter().length : valueDetailFilter().length)"
-                                        (click)="pageModal = pageModal+2;updatePagedItems()">{{pageModal +3}}</a></li>
-                                <li *ngIf="(pageModal+1)*10 < (searchText == '' ? valueDetailFilter().length : valueDetailFilter().length)"
-                                    class="page-item"><a class="page-link px-3 py-[0.375rem] cursor-pointer"
-                                        (click)="pageModal = pageModal+1;updatePagedItems()">{{'Next' |
-                                        translate}}</a>
-                                </li>
-                            </ul>
-                        </nav>
                     </div>
                 </div>
-            </div>
 
 
-            <div class="border-t">
-                <div class="ti-modal-footer flex justify-end gap-3 mb-3 mt-3 mr-3">
-                    <button type="button" class="ti-btn bg-danger text-white !font-medium"
-                        (click)="closeModalmodalData()">
-                        ปิด
-                    </button>
+                <div class="border-t">
+                    <div class="ti-modal-footer flex justify-end gap-3 mb-3 mt-3 mr-3">
+                        <button type="button" class="ti-btn bg-danger text-white !font-medium"
+                            (click)="closeModalmodalData()">
+                            ปิด
+                        </button>
+                    </div>
                 </div>
             </div>
         </div>
-    </div>
-</ng-template>
+    </ng-template>
 
 
 
-<ng-template #gridModal let-modal>
-    <div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out">
-        <div class="ti-modal-content">
-            <div class="ti-modal-header flex justify-between items-center p-5">
-                <h6 class="ti-modal-title text-[1rem] font-semibold text-defaulttextcolor" id="mail-ComposeLabel">
-                    GridData
-                </h6>
+    <ng-template #gridModal let-modal>
+        <div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out">
+            <div class="ti-modal-content">
+                <div class="ti-modal-header flex justify-between items-center p-5">
+                    <h6 class="ti-modal-title text-[1rem] font-semibold text-defaulttextcolor" id="mail-ComposeLabel">
+                        GridData
+                    </h6>
 
-                <button type="button" class="hs-dropdown-toggle !text-[1rem] !font-semibold !text-defaulttextcolor"
-                    (click)="closeModalgridModal()" #closeModal>
-                    <span class="sr-only">{{'Close' | translate}}</span>
-                    <i class="ri-close-line"></i>
-                </button>
-            </div>
-            <div class="ti-modal-body px-4 mt-3">
-                <app-datagrid-syncfution [searchSettings]="searchSettings" [dataSource]="dataList" [columns]="columns"
-                    [gridLayout]="setPerspective" [sendLayout]="gridLayout.stimulate" (layout)="gridLayout.data=$event">
-                </app-datagrid-syncfution>
-            </div>
-
-            <div class="border-t">
-                <div class="ti-modal-footer flex justify-end gap-3 mb-3 mt-3 mr-3">
-                    <button *ngIf="!loadingExcel" type="button" class="ti-btn ti-btn-info-full"
-                        (click)="gridLayout.stimulate=!gridLayout.stimulate;savePerspective('grid')">
-                        {{"Save Perspective"}}
+                    <button type="button" class="hs-dropdown-toggle !text-[1rem] !font-semibold !text-defaulttextcolor"
+                        (click)="closeModalgridModal()" #closeModal>
+                        <span class="sr-only">{{'Close' | translate}}</span>
+                        <i class="ri-close-line"></i>
                     </button>
-                    <div *ngIf="loadingExcel" class="row" style="width: 120px;">
-                        <div *ngFor="let item of [1,2,3]" class="spinner-grow text-info mx-1" role="status">
-                            <span class="sr-only">Loading...</span>
+                </div>
+                <div class="ti-modal-body px-4 mt-3">
+                    <app-datagrid-syncfution [searchSettings]="searchSettings" [dataSource]="dataList"
+                        [columns]="columns" [gridLayout]="setPerspective" [sendLayout]="gridLayout.stimulate"
+                        (layout)="gridLayout.data=$event">
+                    </app-datagrid-syncfution>
+                </div>
+
+                <div class="border-t">
+                    <div class="ti-modal-footer flex justify-end gap-3 mb-3 mt-3 mr-3">
+                        <button *ngIf="!loadingExcel" type="button" class="ti-btn ti-btn-info-full"
+                            (click)="gridLayout.stimulate=!gridLayout.stimulate;savePerspective('grid')">
+                            {{"Save Perspective"}}
+                        </button>
+                        <div *ngIf="loadingExcel" class="row" style="width: 120px;">
+                            <div *ngFor="let item of [1,2,3]" class="spinner-grow text-info mx-1" role="status">
+                                <span class="sr-only">Loading...</span>
+                            </div>
                         </div>
+                        <button type="button" class="ti-btn ti-btn-danger-full text-white !font-medium"
+                            (click)="closeModalgridModal()">
+                            ปิด
+                        </button>
                     </div>
-                    <button type="button" class="ti-btn ti-btn-danger-full text-white !font-medium"
-                        (click)="closeModalgridModal()">
-                        ปิด
-                    </button>
                 </div>
             </div>
         </div>
-    </div>
-</ng-template>
-
-<ng-template #pivotModal let-modal>
-    <div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out">
-        <div class="ti-modal-content">
-            <div class="ti-modal-header flex justify-between items-center p-5">
-                <h6 class="ti-modal-title text-[1rem] font-semibold text-defaulttextcolor" id="mail-ComposeLabel">
-                    Pivot
-                </h6>
-
-                <button type="button" class="hs-dropdown-toggle !text-[1rem] !font-semibold !text-defaulttextcolor"
-                    (click)="closeModalpivotModal()" #closeModal>
-                    <span class="sr-only">{{'Close' | translate}}</span>
-                    <i class="ri-close-line"></i>
-                </button>
-            </div>
-            <div class="ti-modal-body px-4 mt-3">
-                <app-pivot-syncfution [dataSource]="dataList" [columns]="pivotColumns"
-                    [templateId]="excelReport.templateId" [fileName]="excelReport.fileName"
-                    [pivotLayout]="setPerspective" [sendLayout]="pivotLayout.stimulate"
-                    (layout)="pivotLayout.data=$event">
-                </app-pivot-syncfution>
-            </div>
-
-            <div class="border-t mt-3">
-                <div class="ti-modal-footer flex justify-end gap-3 mb-3 mt-3 mr-3">
-                    <button *ngIf="!loadingExcel" type="button" class="ti-btn ti-btn-info-full"
-                        (click)="pivotLayout.stimulate=!pivotLayout.stimulate;savePerspective('pivot')">
-                        {{"Save Perspective"}}
+    </ng-template>
+
+    <ng-template #pivotModal let-modal>
+        <div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out">
+            <div class="ti-modal-content">
+                <div class="ti-modal-header flex justify-between items-center p-5">
+                    <h6 class="ti-modal-title text-[1rem] font-semibold text-defaulttextcolor" id="mail-ComposeLabel">
+                        Pivot
+                    </h6>
+
+                    <button type="button" class="hs-dropdown-toggle !text-[1rem] !font-semibold !text-defaulttextcolor"
+                        (click)="closeModalpivotModal()" #closeModal>
+                        <span class="sr-only">{{'Close' | translate}}</span>
+                        <i class="ri-close-line"></i>
                     </button>
-                    <div *ngIf="loadingExcel" class="row" style="width: 120px;">
-                        <div *ngFor="let item of [1,2,3]" class="spinner-grow text-info mx-1" role="status">
-                            <span class="sr-only">Loading...</span>
+                </div>
+                <div class="ti-modal-body px-4 mt-3">
+                    <app-pivot-syncfution [dataSource]="dataList" [columns]="pivotColumns"
+                        [templateId]="excelReport.templateId" [fileName]="excelReport.fileName"
+                        [pivotLayout]="setPerspective" [sendLayout]="pivotLayout.stimulate"
+                        (layout)="pivotLayout.data=$event">
+                    </app-pivot-syncfution>
+                </div>
+
+                <div class="border-t mt-3">
+                    <div class="ti-modal-footer flex justify-end gap-3 mb-3 mt-3 mr-3">
+                        <button *ngIf="!loadingExcel" type="button" class="ti-btn ti-btn-info-full"
+                            (click)="pivotLayout.stimulate=!pivotLayout.stimulate;savePerspective('pivot')">
+                            {{"Save Perspective"}}
+                        </button>
+                        <div *ngIf="loadingExcel" class="row" style="width: 120px;">
+                            <div *ngFor="let item of [1,2,3]" class="spinner-grow text-info mx-1" role="status">
+                                <span class="sr-only">Loading...</span>
+                            </div>
                         </div>
+                        <button type="button" class="ti-btn ti-btn-danger-full text-white !font-medium"
+                            (click)="closeModalpivotModal()">
+                            ปิด
+                        </button>
                     </div>
-                    <button type="button" class="ti-btn ti-btn-danger-full text-white !font-medium"
-                        (click)="closeModalpivotModal()">
-                        ปิด
-                    </button>
                 </div>
             </div>
         </div>
-    </div>
+    </ng-template>
+
 </ng-template>
\ No newline at end of file

src/app/portal-manage/my-portal/excel-report-toggle/excel-report-toggle.component.ts

@@ -19,6 +19,10 @@ import { ModuleModel } from '../../models/module.model';
 import { TemplateModel, TemplateFileModel, MyTemplateFileModel, MyTemplateModel } from '../../models/template.model';
 import { CustomCubeService } from '../../services/custom-cube.service';
 import { ExcelReportService } from '../../services/excel-report.service';
+import { TokenService } from '../../../shared/services/token.service';
+import { CompanyModel } from '../../models/company.model';
+import { DatasourceTableModel, MyDatasourceTableModel } from '../../models/datasource-table.model';
+import { DatasourseTableService } from '../../services/datasourse-table.service';
 export interface ModalDetail {
     text: { cardHead: string, search: string[], tableHead: string[] }
 }
@@ -140,15 +144,47 @@ export class ExcelReportToggleComponent implements OnInit {
     @ViewChild('modalData') modalData!: TemplateRef<any>;
     @ViewChild('gridModal') gridModal!: TemplateRef<any>;
     @ViewChild('pivotModal') pivotModal!: TemplateRef<any>;
+
+
+    company: { loading: boolean, list: DatasourceTableModel[] } = { loading: false, list: [] }
+    companySelect: CompanyModel = new CompanyModel()
+    searchTextCompany = ''
+    pageCompany = 0;
+    pageSizeCompany = 10;
     constructor(private excelReportService: ExcelReportService,
         private modalService: NgbModal,
         private customCubeService: CustomCubeService,
         private cdr: ChangeDetectorRef,
-        private modal: MatDialog) {
+        private modal: MatDialog,
+        private tokenService: TokenService,
+        private datasourceTable: DatasourseTableService,) {
 
     }
     ngOnInit(): void {
+        // this.getExcelList()
+        this.getCompany()
+    }
+
+    getCompany() {
+        this.company.loading = true
+        this.datasourceTable.getList().subscribe({
+            next: (response: DatasourceTableModel[]) => {
+                this.company.list = response.map((x: any) => new MyDatasourceTableModel(x));
+                this.company.loading = false
+            },
+            error: (error) => {
+                this.company.loading = false
+            }
+        });
+    }
+    companyFilter() {
+        return this.company.list.filter(e => e.companyName.includes(this.searchTextCompany))
+    }
+    selectCompany(body: DatasourceTableModel) {
+        this.tokenService.saveSelectCompany(body as any)
+        this.companySelect = this.tokenService.getSelectCompany()
         this.getExcelList()
+
     }
     get totalItems(): number {
         return this.searchText == ''

src/app/portal-manage/my-portal/excel-report/excel-report.component.html

 <app-page-header [title]="'รายงาน Excel'" [activeTitle]="'ผู้ดูแลระบบ'" [title1]="'รายงาน Excel'"></app-page-header>
+@if(companySelect.companyId){
+<ng-container *ngTemplateOutlet="documentTemplate"></ng-container>
+} @else {
+<ng-container *ngTemplateOutlet="companyTemplate"></ng-container>
+}
 
-<div class="box">
-  <div class="relative w-full max-w-4xl mx-auto my-8 font-sans">
-    <button (click)="toggleDropdown()"
-      class="w-full bg-white bg-gradient-to-r from-blue-600 to-blue-800 text-white font-semibold py-4 px-6 rounded-xl shadow-lg hover:from-blue-700 hover:to-blue-900 focus:outline-none focus:ring-4 focus:ring-blue-300 transition-all duration-300 ease-in-out flex items-center justify-between">
-      <span class="text-xl sm:text-2xl text-primary">
-        {{ selectedTemplate ? selectedTemplate.tdesc + ' (' + selectedTemplate.fileName + ')' : 'รายงาน Excel' }}
-      </span>
-      <svg class="w-6 h-6 transform transition-transform duration-300 text-primary" [class.rotate-180]="isDropdownOpen"
-        fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
-      </svg>
-    </button>
-
-    <div *ngIf="isDropdownOpen"
-      class="absolute z-10 w-full mt-2 bg-white border border-gray-200 rounded-md shadow-lg overflow-hidden max-h-60 overflow-y-auto">
-      <ul class="py-1">
-        <li *ngFor="let template of excelReportTemplates" (click)="selectTemplate(template)"
-          class="px-4 py-2 hover:bg-gray-100 cursor-pointer text-gray-800 text-lg">
-          {{ template.tdesc }} ({{ template.fileName }}) </li>
-        <li *ngIf="excelReportTemplates.length === 0 && !loadingTemplates" class="px-4 py-2 text-gray-500 text-lg">
-          ไม่พบรายการ Template
-        </li>
-        <li *ngIf="loadingTemplates" class="px-4 py-2 text-gray-500 text-lg">
-          กำลังโหลด...
-        </li>
-      </ul>
-    </div>
-  </div>
 
-  <div *ngIf="selectedTemplate && excelReport"
-    class="p-6 bg-gray-100 rounded-b-xl shadow-inner transition-all duration-300 ease-in-out"
-    [class.max-h-0]="!selectedTemplate" [class.max-h-screen]="selectedTemplate">
-    <div class="pt-6 border-t border-gray-200 bg-white p-3 rounded-xl">
-      <h2 class="text-2xl font-bold text-gray-800 mb-4">รายงาน Excel: {{ selectedTemplate.tdesc }}</h2>
-      <p class="mb-4 text-gray-700">ชื่อไฟล์: {{ selectedTemplate.fileName }}</p>
-      <!-- <p class="mb-4 text-gray-700">รหัส Template: {{ selectedTemplate.templateId }}</p> -->
-
-      <div *ngIf="variableSheet.length > 0" class="grid grid-cols-1 md:grid-cols-2 gap-4 items-end mb-4 mt-4">
-        <ng-container *ngFor="let sheetVar of variableSheet">
-          <div [ngSwitch]="sheetVar.type">
-            <label [for]="sheetVar.key" class="block text-gray-700 text-sm font-medium mb-1">{{ sheetVar.label
-              }}</label>
-            <ng-container *ngSwitchCase="'text'">
-              <input type="text" [id]="sheetVar.key" [(ngModel)]="sheetVar.value" [placeholder]="sheetVar.tname"
-                class="mt-1 block w-full pl-3 pr-10 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm" />
-            </ng-container>
-            <ng-container *ngSwitchCase="'calendar'">
-              <input type="date" [id]="sheetVar.key" [(ngModel)]="sheetVar.displayValue"
-                (ngModelChange)="formatNgbDate(sheetVar.key, $event)"
-                class="mt-1 block w-full pl-3 pr-10 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm" />
-            </ng-container>
-            <ng-container *ngSwitchCase="'list'">
-              <select [id]="sheetVar.key" [(ngModel)]="sheetVar.value"
-                class="mt-1 block w-full pl-3 pr-10 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
-                <option *ngFor="let opt of sheetVar.option" [value]="opt.value">{{ opt.text }}</option>
+<ng-template #companyTemplate>
+  <div class="grid grid-cols-12 gap-6">
+    <div class="xl:col-span-12 col-span-12">
+      <div class="box">
+        <div class="box-header justify-between">
+          <div class="box-title">
+            {{ 'All List' | translate}} <span
+              class="badge bg-light text-default rounded-full ms-1 text-[0.75rem] align-middle">{{companyFilter().length}}</span>
+          </div>
+          <div class="flex flex-wrap gap-2">
+            <div>
+              <input class="form-control form-control" type="text" placeholder="ค้นหาบริษัท"
+                aria-label=".form-control-sm example" [(ngModel)]='searchText'>
+            </div>
+          </div>
+        </div>
+        <div class="box-body">
+          <div class="table-responsive">
+            <table class="table whitespace-nowrap min-w-full ti-custom-table-hover">
+              <thead>
+                <tr class="border-b border text-white" style="background-color: #49b6f5;">
+                  <th class="text-center" scope="col">บริษัท</th>
+                  <th class="text-center" scope="col">สถานะ</th>
+                </tr>
+              </thead>
+              <tbody *ngIf="company.loading">
+                <tr>
+                  <td colspan="2" class="loading">
+                    <div class="spinner"></div>
+                    <div class="spinner"></div>
+                    <div class="spinner"></div>
+                    <span>กำลังค้นหา...</span>
+                  </td>
+                </tr>
+              </tbody>
+              @if(!company.loading && !companyFilter().length){
+              <tbody>
+                <tr style="background-color:#ebf2f6">
+                  <td colspan="1" class="text-center">ไม่พบข้อมูล</td>
+                </tr>
+              </tbody>
+              }
+              @if(!company.loading && companyFilter().length){
+              <tbody id="tableBody">
+                @for (items of companyFilter() | slice: pageCompany * pageSizeCompany : (pageCompany + 1) *
+                pageSizeCompany; track $index) {
+                <tr (mouseenter)="tableHover.set(items.companyId,!tableHover.get(items.companyId))"
+                  (mouseleave)="tableHover.clear()"
+                  [ngStyle]="{'background-color':tableHover.get(items.companyId)?'rgb(201 223 235)':'#ebf2f6','cursor':tableHover.get(items.companyId)?'pointer':'default'}"
+                  (click)="selectCompany(items)">
+                  <td class="font-16 font-medium">
+                    {{items.companyName}}
+                  </td>
+                  <td class="font-16 font-medium">
+                    {{items.status}}
+                  </td>
+                </tr>
+                }
+              </tbody>
+              }
+            </table>
+          </div>
+        </div>
+        <div class="box-footer">
+
+          @if(companyFilter().length > 0){
+          <div class="flex items-center flex-wrap overflow-auto">
+            <div class="d-flex justify-content-end p-2">
+              <select class="custom-select m-r-5 border-color-gray-full-focus" style="width: auto"
+                [(ngModel)]="pageSizeCompany" (ngModelChange)="pageCompany">
+                <option *ngFor="let item of [10,50,100]" [ngValue]="item">
+                  {{"รายการต่อหน้า"}}: {{item}}
+                </option>
               </select>
-            </ng-container>
-            <ng-container *ngSwitchCase="'radio'">
-              <div class="flex flex-wrap gap-4 mt-1">
-                <label *ngFor="let opt of sheetVar.option" class="inline-flex items-center">
-                  <input type="radio" [name]="sheetVar.key" [value]="opt.value" [(ngModel)]="sheetVar.value"
-                    class="form-radio text-blue-600" />
-                  <span class="ml-2 text-gray-700">{{ opt.text }}</span>
-                </label>
-              </div>
-            </ng-container>
-            <ng-container *ngSwitchCase="'help'">
-              <div class="relative">
-                <input type="text" [id]="sheetVar.key" [(ngModel)]="sheetVar.value.tdesc"
-                  class="mt-1 block w-full pl-3 pr-10 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm" />
-                <div class="absolute inset-y-0 right-0 pr-3 flex items-center">
-                  <button type="button" (click)="selectData(sheetVar.key)"
-                    class="p-1 rounded-full bg-blue-500 text-white hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
-                    <svg class="h-5 w-5 text-black" fill="none" stroke="currentColor" viewBox="0 0 24 24"
-                      (click)="openModal(sheetVar, detailModal); $event.stopPropagation();"
-                      xmlns="http://www.w3.org/2000/svg">
-                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                        d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
-                    </svg>
-                  </button>
-                </div>
+            </div>
+            <div class="mb-2 sm:mb-0">
+              <div>
+                {{'Showing' | translate}} {{companyFilter().length}} {{'entries'
+                | translate}} <i class="bi bi-arrow-right ms-2 font-semibold"></i>
               </div>
-            </ng-container>
+            </div>
+            <div class="ms-auto">
+              <nav aria-label="Page navigation">
+                <ul class="ti-pagination  mb-0">
+                  @if(pageCompany > 0){
+                  <li class="page-item {{pageCompany==0 ? 'disabled' : ''}}"><a
+                      class="page-link px-3 py-[0.375rem] cursor-pointer"
+                      (click)="pageCompany = pageCompany - 1">{{'Previous' |
+                      translate}}</a>
+                  </li>
+                  <li class="page-item"><a class="page-link px-3 py-[0.375rem]" href="javascript:void(0);"
+                      (click)="pageCompany = pageCompany - 1">{{pageCompany}}</a>
+                  </li>
+                  }
+                  <li class="page-item"><a class="page-link active px-3 py-[0.375rem]"
+                      href="javascript:void(0);">{{pageCompany
+                      +
+                      1}}</a>
+                  </li>
+
+                  @if((pageCompany + 1) * pageSizeCompany < companyFilter().length){ <li class="page-item"><a
+                      class="page-link px-3 py-[0.375rem]" href="javascript:void(0);"
+                      (click)="pageCompany = pageCompany + 1">{{pageCompany +
+                      2}}</a></li>
+                    }
+                    @if((pageCompany + 2) * pageSizeCompany < companyFilter().length){ <li class="page-item"><a
+                        class="page-link px-3 py-[0.375rem]" href="javascript:void(0);"
+                        (click)="pageCompany = pageCompany + 2">{{pageCompany
+                        +
+                        3}}</a></li>
+                      }
+
+                      @if((pageCompany + 1) * pageSizeCompany < companyFilter().length){ <li class="page-item"><a
+                          class="page-link px-3 py-[0.375rem] cursor-pointer"
+                          (click)="pageCompany = pageCompany + 1">{{'Next' |
+                          translate}}</a>
+                        </li>
+                        }
+                </ul>
+              </nav>
+            </div>
           </div>
-        </ng-container>
+          }
+          <div class="flex justify-end items-center flex-wrap gap-4 mt-3">
+            <div><i class="fa fa-times text-danger"></i> = used on menu</div>
+            <div><i class="fa fa-check text-success"></i> = unused on menu</div>
+            <div><i class="ri-file-download-line text-info"></i> = download files</div>
+            <div><i class="ri-printer-line text-warning"></i> = print report</div>
+          </div>
+
+        </div>
       </div>
+    </div>
+  </div>
+</ng-template>
+
+
+
+<ng-template #documentTemplate>
+  <div class="box">
+    <div class="relative w-full max-w-4xl mx-auto my-8 font-sans">
+      <button (click)="toggleDropdown()"
+        class="w-full bg-white bg-gradient-to-r from-blue-600 to-blue-800 text-white font-semibold py-4 px-6 rounded-xl shadow-lg hover:from-blue-700 hover:to-blue-900 focus:outline-none focus:ring-4 focus:ring-blue-300 transition-all duration-300 ease-in-out flex items-center justify-between">
+        <span class="text-xl sm:text-2xl text-primary">
+          {{ selectedTemplate ? selectedTemplate.tdesc + ' (' + selectedTemplate.fileName + ')' : 'รายงาน Excel' }}
+        </span>
+        <svg class="w-6 h-6 transform transition-transform duration-300 text-primary"
+          [class.rotate-180]="isDropdownOpen" fill="none" stroke="currentColor" viewBox="0 0 24 24"
+          xmlns="http://www.w3.org/2000/svg">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
+        </svg>
+      </button>
+
+      <div *ngIf="isDropdownOpen"
+        class="absolute z-10 w-full mt-2 bg-white border border-gray-200 rounded-md shadow-lg overflow-hidden max-h-60 overflow-y-auto">
+        <ul class="py-1">
+          <li *ngFor="let template of excelReportTemplates" (click)="selectTemplate(template)"
+            class="px-4 py-2 hover:bg-gray-100 cursor-pointer text-gray-800 text-lg">
+            {{ template.tdesc }} ({{ template.fileName }}) </li>
+          <li *ngIf="excelReportTemplates.length === 0 && !loadingTemplates" class="px-4 py-2 text-gray-500 text-lg">
+            ไม่พบรายการ Template
+          </li>
+          <li *ngIf="loadingTemplates" class="px-4 py-2 text-gray-500 text-lg">
+            กำลังโหลด...
+          </li>
+        </ul>
+      </div>
+    </div>
 
-      <div class="flex justify-end gap-3 mt-6">
-        <!-- <button (click)="dowloadExcelReport()"
+    <div *ngIf="selectedTemplate && excelReport"
+      class="p-6 bg-gray-100 rounded-b-xl shadow-inner transition-all duration-300 ease-in-out"
+      [class.max-h-0]="!selectedTemplate" [class.max-h-screen]="selectedTemplate">
+      <div class="pt-6 border-t border-gray-200 bg-white p-3 rounded-xl">
+        <h2 class="text-2xl font-bold text-gray-800 mb-4">รายงาน Excel: {{ selectedTemplate.tdesc }}</h2>
+        <p class="mb-4 text-gray-700">ชื่อไฟล์: {{ selectedTemplate.fileName }}</p>
+        <!-- <p class="mb-4 text-gray-700">รหัส Template: {{ selectedTemplate.templateId }}</p> -->
+
+        <div *ngIf="variableSheet.length > 0" class="grid grid-cols-1 md:grid-cols-2 gap-4 items-end mb-4 mt-4">
+          <ng-container *ngFor="let sheetVar of variableSheet">
+            <div [ngSwitch]="sheetVar.type">
+              <label [for]="sheetVar.key" class="block text-gray-700 text-sm font-medium mb-1">{{ sheetVar.label
+                }}</label>
+              <ng-container *ngSwitchCase="'text'">
+                <input type="text" [id]="sheetVar.key" [(ngModel)]="sheetVar.value" [placeholder]="sheetVar.tname"
+                  class="mt-1 block w-full pl-3 pr-10 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm" />
+              </ng-container>
+              <ng-container *ngSwitchCase="'calendar'">
+                <input type="date" [id]="sheetVar.key" [(ngModel)]="sheetVar.displayValue"
+                  (ngModelChange)="formatNgbDate(sheetVar.key, $event)"
+                  class="mt-1 block w-full pl-3 pr-10 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm" />
+              </ng-container>
+              <ng-container *ngSwitchCase="'list'">
+                <select [id]="sheetVar.key" [(ngModel)]="sheetVar.value"
+                  class="mt-1 block w-full pl-3 pr-10 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm">
+                  <option *ngFor="let opt of sheetVar.option" [value]="opt.value">{{ opt.text }}</option>
+                </select>
+              </ng-container>
+              <ng-container *ngSwitchCase="'radio'">
+                <div class="flex flex-wrap gap-4 mt-1">
+                  <label *ngFor="let opt of sheetVar.option" class="inline-flex items-center">
+                    <input type="radio" [name]="sheetVar.key" [value]="opt.value" [(ngModel)]="sheetVar.value"
+                      class="form-radio text-blue-600" />
+                    <span class="ml-2 text-gray-700">{{ opt.text }}</span>
+                  </label>
+                </div>
+              </ng-container>
+              <ng-container *ngSwitchCase="'help'">
+                <div class="relative">
+                  <input type="text" [id]="sheetVar.key" [(ngModel)]="sheetVar.value.tdesc"
+                    class="mt-1 block w-full pl-3 pr-10 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm" />
+                  <div class="absolute inset-y-0 right-0 pr-3 flex items-center">
+                    <button type="button" (click)="selectData(sheetVar.key)"
+                      class="p-1 rounded-full bg-blue-500 text-white hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
+                      <svg class="h-5 w-5 text-black" fill="none" stroke="currentColor" viewBox="0 0 24 24"
+                        (click)="openModal(sheetVar, detailModal); $event.stopPropagation();"
+                        xmlns="http://www.w3.org/2000/svg">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                          d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
+                      </svg>
+                    </button>
+                  </div>
+                </div>
+              </ng-container>
+            </div>
+          </ng-container>
+        </div>
+
+        <div class="flex justify-end gap-3 mt-6">
+          <!-- <button (click)="dowloadExcelReport()"
           class="bg-primary py-3 px-6 bg-green-600 text-white font-semibold rounded-lg shadow-md hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 transition duration-300 ease-in-out transform hover:scale-105">
           Download Excel
         </button> -->
-        <button (click)="printExcelReport()"
-          class="bg-primary py-3 px-6 bg-blue-600 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition duration-300 ease-in-out transform hover:scale-105">
-          Print Excel
-        </button>
+          <button (click)="printExcelReport()"
+            class="bg-primary py-3 px-6 bg-blue-600 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition duration-300 ease-in-out transform hover:scale-105">
+            Print Excel
+          </button>
+        </div>
       </div>
     </div>
   </div>
-</div>
-
-<ng-template #detailModal>
-  <h2 mat-dialog-title clas>
-    <div class="text-primary">รายชื่อพนักงาน</div>
-  </h2>
-  <mat-dialog-content>
-    <div class="box">
-      <div class="box-header justify-between">
-        <div class="box-title">
-          รายการทั้งหมด
-        </div>
-        <div class="flex flex-wrap gap-2">
-          <div>
-            <input class="form-control form-control" type="text" placeholder="Search..."
-              aria-label=".form-control-sm example" [(ngModel)]="searchModal" (ngModelChange)="updateModalPagedItems()">
+
+  <ng-template #detailModal>
+    <h2 mat-dialog-title clas>
+      <div class="text-primary">รายชื่อพนักงาน</div>
+    </h2>
+    <mat-dialog-content>
+      <div class="box">
+        <div class="box-header justify-between">
+          <div class="box-title">
+            รายการทั้งหมด
+          </div>
+          <div class="flex flex-wrap gap-2">
+            <div>
+              <input class="form-control form-control" type="text" placeholder="Search..."
+                aria-label=".form-control-sm example" [(ngModel)]="searchModal"
+                (ngModelChange)="updateModalPagedItems()">
+            </div>
           </div>
         </div>
-      </div>
-      <div class="box-body">
-        <div class="table-responsive">
-          <table class="table whitespace-nowrap min-w-full ti-custom-table-hover">
-            <thead>
-              <tr class="border-b border-defaultborder bg-primary">
-                <th scope="col" *ngFor="let head of modalDetail.text.tableHead" class="text-start text-white">{{ head }}
-                </th>
-              </tr>
-            </thead>
-            <tbody>
-              @if (modalFilterList.length > 0) {
-              @for (item of modalFilterList; track item.id) {
-              <tr class="border border-defaultborder dark:border-defaultborder/10 cursor-pointer hover:bg-gray-100"
-                (click)="selectData(item)">
-                <td>{{ item.id }}</td>
-                <td>{{ item.tdesc }}</td>
-                <td>{{ item.edesc }}</td>
-              </tr>
-              }
-              } @else {
-              <tr>
-                <td [attr.colspan]="modalDetail.text.tableHead.length" class="text-center py-4 text-gray-500">
-                  ไม่พบข้อมูล
-                </td>
-              </tr>
-              }
-            </tbody>
-          </table>
+        <div class="box-body">
+          <div class="table-responsive">
+            <table class="table whitespace-nowrap min-w-full ti-custom-table-hover">
+              <thead>
+                <tr class="border-b border-defaultborder bg-primary">
+                  <th scope="col" *ngFor="let head of modalDetail.text.tableHead" class="text-start text-white">{{ head
+                    }}
+                  </th>
+                </tr>
+              </thead>
+              <tbody>
+                @if (modalFilterList.length > 0) {
+                @for (item of modalFilterList; track item.id) {
+                <tr class="border border-defaultborder dark:border-defaultborder/10 cursor-pointer hover:bg-gray-100"
+                  (click)="selectData(item)">
+                  <td>{{ item.id }}</td>
+                  <td>{{ item.tdesc }}</td>
+                  <td>{{ item.edesc }}</td>
+                </tr>
+                }
+                } @else {
+                <tr>
+                  <td [attr.colspan]="modalDetail.text.tableHead.length" class="text-center py-4 text-gray-500">
+                    ไม่พบข้อมูล
+                  </td>
+                </tr>
+                }
+              </tbody>
+            </table>
+          </div>
         </div>
       </div>
-    </div>
-    <!-- <input type="text" [(ngModel)]="searchModal" placeholder="Search..."
+      <!-- <input type="text" [(ngModel)]="searchModal" placeholder="Search..."
       (ngModelChange)="updateModalPagedItems()"
       class="mt-1 block w-full pl-3 pr-10 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm mb-4" /> -->
 
-    <!-- <div class="box-body">
+      <!-- <div class="box-body">
       <div class="table-responsive">
         <table class="table whitespace-nowrap min-w-full ti-custom-table-hover">
           <thead>
@@ -184,44 +332,47 @@
       </div>
     </div> -->
 
-    <div class="box-footer">
-      <div class="mb-2 sm:mb-0">
-        <div>
-          {{'Showing' | translate}} {{ (modalPageIndex * modalPageSize) + 1 }} {{'to' | translate}} {{
-          Math.min((modalPageIndex + 1) * modalPageSize, totalModalItemsCount) }} {{'of' | translate}} {{
-          totalModalItemsCount }} {{'entries' | translate}} <i class="bi bi-arrow-right ms-2 font-semibold"></i>
+      <div class="box-footer">
+        <div class="mb-2 sm:mb-0">
+          <div>
+            {{'Showing' | translate}} {{ (modalPageIndex * modalPageSize) + 1 }} {{'to' | translate}} {{
+            Math.min((modalPageIndex + 1) * modalPageSize, totalModalItemsCount) }} {{'of' | translate}} {{
+            totalModalItemsCount }} {{'entries' | translate}} <i class="bi bi-arrow-right ms-2 font-semibold"></i>
+          </div>
         </div>
-      </div>
-      <div class="flex items-center flex-wrap overflow-auto mt-3" *ngIf="totalModalItemsCount > 0">
-        <div class="ms-auto">
-          <nav aria-label="Page navigation">
-            <ul class="ti-pagination mb-0">
-              <li class="page-item" [class.disabled]="modalPageIndex === 0">
-                <a class="page-link px-3 py-[0.375rem] cursor-pointer"
-                  (click)="onModalPageChange(modalPageIndex - 1)">{{'Previous' | translate}}</a>
-              </li>
-
-              @for (pageNumber of totalPagesArrayInModal; track pageNumber) {
-              <li class="page-item" [class.active]="modalPageIndex === (pageNumber - 1)">
-                <a class="page-link px-3 py-[0.375rem] cursor-pointer" (click)="onModalPageChange(pageNumber - 1)">
-                  {{ pageNumber }}
-                </a>
-              </li>
-              }
+        <div class="flex items-center flex-wrap overflow-auto mt-3" *ngIf="totalModalItemsCount > 0">
+          <div class="ms-auto">
+            <nav aria-label="Page navigation">
+              <ul class="ti-pagination mb-0">
+                <li class="page-item" [class.disabled]="modalPageIndex === 0">
+                  <a class="page-link px-3 py-[0.375rem] cursor-pointer"
+                    (click)="onModalPageChange(modalPageIndex - 1)">{{'Previous' | translate}}</a>
+                </li>
+
+                @for (pageNumber of totalPagesArrayInModal; track pageNumber) {
+                <li class="page-item" [class.active]="modalPageIndex === (pageNumber - 1)">
+                  <a class="page-link px-3 py-[0.375rem] cursor-pointer" (click)="onModalPageChange(pageNumber - 1)">
+                    {{ pageNumber }}
+                  </a>
+                </li>
+                }
 
-              <li class="page-item" [class.disabled]="modalPageIndex === (totalPagesArrayInModal.length - 1)">
-                <a class="page-link px-3 py-[0.375rem] cursor-pointer" (click)="onModalPageChange(modalPageIndex + 1)">
-                  {{'Next' | translate}}
-                </a>
-              </li>
-            </ul>
-          </nav>
+                <li class="page-item" [class.disabled]="modalPageIndex === (totalPagesArrayInModal.length - 1)">
+                  <a class="page-link px-3 py-[0.375rem] cursor-pointer"
+                    (click)="onModalPageChange(modalPageIndex + 1)">
+                    {{'Next' | translate}}
+                  </a>
+                </li>
+              </ul>
+            </nav>
+          </div>
         </div>
       </div>
-    </div>
-  </mat-dialog-content>
-  <mat-dialog-actions style="justify-content: end; padding: 16px 20px;">
-    <button type="button" class="hs-dropdown-toggle ti-btn ti-btn-light align-middle" mat-button
-      (click)="closeDialog()">Close</button>
-  </mat-dialog-actions>
+    </mat-dialog-content>
+    <mat-dialog-actions style="justify-content: end; padding: 16px 20px;">
+      <button type="button" class="hs-dropdown-toggle ti-btn ti-btn-light align-middle" mat-button
+        (click)="closeDialog()">Close</button>
+    </mat-dialog-actions>
+  </ng-template>
+
 </ng-template>
\ No newline at end of file

src/app/portal-manage/my-portal/excel-report/excel-report.component.ts

@@ -10,6 +10,10 @@ import { TranslateModule, TranslateService } from '@ngx-translate/core';
 import { SharedModule } from '../../../shared/shared.module';
 import { TemplateFileMiniModel } from '../../models/template-file-mini.model';
 import { ExcelReportService } from '../../services/excel-report.service';
+import { TokenService } from '../../../shared/services/token.service';
+import { CompanyModel } from '../../models/company.model';
+import { DatasourceTableModel, MyDatasourceTableModel } from '../../models/datasource-table.model';
+import { DatasourseTableService } from '../../services/datasourse-table.service';
 
 export interface ValueDetailItem {
   id: string;
@@ -81,11 +85,22 @@ export class ExcelReportComponent implements OnInit {
   loadingTemplates: boolean = false;
   selectedTemplate: TemplateFileMiniModel | null = null;
 
+
+  company: { loading: boolean, list: DatasourceTableModel[] } = { loading: false, list: [] }
+  companySelect: CompanyModel = new CompanyModel()
+  searchText = ''
+  pageCompany = 0;
+  pageSizeCompany = 10;
+  tableHover: Map<string, boolean> = new Map<string, boolean>()
+  buttonHover: Map<string, boolean> = new Map<string, boolean>()
   constructor(private route: ActivatedRoute,
     private excelReportService: ExcelReportService,
     private cdr: ChangeDetectorRef,
     private dialog: MatDialog,
     public translate: TranslateService, // ต้อง inject TranslateService เพื่อให้ translate pipe ทำงาน
+
+    private tokenService: TokenService,
+    private datasourceTable: DatasourseTableService,
   ) { }
 
   ngOnInit(): void {
@@ -117,7 +132,30 @@ export class ExcelReportComponent implements OnInit {
     });
 
     // Load templates for the dropdown when the component initializes
+    this.getCompany()
+  }
+
+  getCompany() {
+    this.company.loading = true
+    this.datasourceTable.getList().subscribe({
+      next: (response: DatasourceTableModel[]) => {
+        this.company.list = response.map((x: any) => new MyDatasourceTableModel(x));
+        this.company.loading = false
+      },
+      error: (error) => {
+        this.company.loading = false
+      }
+    });
+  }
+  companyFilter() {
+    return this.company.list.filter(e => e.companyName.includes(this.searchText))
+  }
+  selectCompany(body: DatasourceTableModel) {
+    this.tokenService.saveSelectCompany(body as any)
+    this.companySelect = this.tokenService.getSelectCompany()
     this.loadExcelReportTemplates();
+
+
   }
 
   openModal(data: any, modal: any) {
@@ -133,7 +171,7 @@ export class ExcelReportComponent implements OnInit {
       }
     }
     this.updateModalPagedItems(); // <--- เรียก updateModalPagedItems() หลังจากโหลดข้อมูล Modal ครั้งแรก
-    this.dialogRef = this.dialog.open(modal,{
+    this.dialogRef = this.dialog.open(modal, {
       width: '1100px',
       height: '650px'
     });
@@ -225,7 +263,7 @@ export class ExcelReportComponent implements OnInit {
 
             if (data.valueDefault) {
               // ถ้ามี valueDefault ให้ใช้ค่าจาก API
-              initialValueForModel = data.valueDefault; 
+              initialValueForModel = data.valueDefault;
               const [d, m, y] = data.valueDefault.split('-').map(Number);
               initialNgbDate = new NgbDate(y, m, d);
               initialValueForInput = `${y}-${String(m).padStart(2, '0')}-${String(d).padStart(2, '0')}`;

src/app/portal-manage/services/course.service.ts

@@ -5,6 +5,7 @@ import { Observable, of } from 'rxjs';
 import { map, tap } from 'rxjs/operators';
 import { CourseModel } from '../models/course.model';
 import { CourseContentModel } from '../models/course-content.model';
+import { TokenService } from '../../shared/services/token.service';
 
 
 @Injectable({
@@ -13,7 +14,7 @@ import { CourseContentModel } from '../models/course-content.model';
 export class CourseService {
   url = environment.url
   createStatus: boolean = true
-  constructor(private http: HttpClient) { }
+  constructor(private http: HttpClient, private tokenService: TokenService) { }
   getListCourse(status?:string): Observable<CourseModel[]> {
     if(status){
       return this.http.get<CourseModel[]>(this.url + "course-center/upload/lists?status="+status)
@@ -73,9 +74,9 @@ export class CourseService {
     return this.http.put<any>(this.url + "course-center/approve",body)
   }
   getCount(status?: string): Observable<number> {
-    return this.http.get<number>(this.url + "course-center/upload/count")
+    return this.http.get<number>(this.url + "course-center/upload/count?companyid=" + this.tokenService.getSelectCompany().companyId)
   }
   getCountContent(status?: string): Observable<number> {
-    return this.http.get<number>(this.url + "course-center/content/count")
+    return this.http.get<number>(this.url + "course-center/content/count?companyid=" + this.tokenService.getSelectCompany().companyId)
   }
 }

src/app/portal-manage/services/datasourse-table.service.ts

@@ -5,6 +5,7 @@ import { Observable } from 'rxjs';
 import { DatasourceTableModel } from '../models/datasource-table.model';
 import { environment } from '../../../environments/environment';
 import { AlertModel } from '../models/alert.model';
+import { TokenService } from '../../shared/services/token.service';
 
 
 @Injectable({
@@ -13,13 +14,14 @@ import { AlertModel } from '../models/alert.model';
 export class DatasourseTableService {
 
   constructor(private http: HttpClient,
-    private translateService: TranslateService
+    private translateService: TranslateService,
+    private tokenService: TokenService
   ) { }
   getid(companyid: string): Observable<DatasourceTableModel> {
     return this.http.get<DatasourceTableModel>(environment.url + "datasource/" + companyid)
   }
   getList(): Observable<DatasourceTableModel[]> {
-    return this.http.get<DatasourceTableModel[]>(environment.url + "datasource/lists")
+    return this.http.get<DatasourceTableModel[]>(environment.url + "datasource/lists?companyid=" + this.tokenService.getSelectCompany().companyId)
   }
   post(body: DatasourceTableModel): Observable<AlertModel> {
     return this.http.post<AlertModel>(environment.url + "datasource", body)

src/app/portal-manage/services/document.service.ts

@@ -5,6 +5,7 @@ import { Observable, of } from 'rxjs';
 import { map, tap } from 'rxjs/operators';
 import { DocumentModel } from '../models/document.model';
 import { DocumentContentModel } from '../models/document-content.model';
+import { TokenService } from '../../shared/services/token.service';
 
 
 @Injectable({
@@ -13,7 +14,7 @@ import { DocumentContentModel } from '../models/document-content.model';
 export class DocumentService {
   url = environment.url
   createStatus: boolean = true
-  constructor(private http: HttpClient) { }
+  constructor(private http: HttpClient, private tokenService: TokenService) { }
   getListDoc(status?: string): Observable<DocumentModel[]> {
     if (status) {
       return this.http.get<DocumentModel[]>(this.url + "document-center/upload/lists?status=" + status)
@@ -35,8 +36,8 @@ export class DocumentService {
     return this.http.get(this.url + "document-center/files/download/content/" + logId + '?lang=' + lang, { responseType: 'blob' });
   }
   createDoc(model: DocumentModel): Observable<any> {
-    let body : any = model
-    if (body.group.groupId=='') {
+    let body: any = model
+    if (body.group.groupId == '') {
       body.group = undefined
     }
     return this.http.post(this.url + 'document-center', body)
@@ -74,9 +75,9 @@ export class DocumentService {
   }
 
   getCount(status?: string): Observable<number> {
-    return this.http.get<number>(this.url + "document-center/upload/count")
+    return this.http.get<number>(this.url + "document-center/upload/count?companyid=" + this.tokenService.getSelectCompany().companyId)
   }
   getCountContent(status?: string): Observable<number> {
-    return this.http.get<number>(this.url + "document-center/content/count")
+    return this.http.get<number>(this.url + "document-center/content/count?companyid=" + this.tokenService.getSelectCompany().companyId)
   }
 }

src/app/portal-manage/services/excel-report.service.ts

@@ -8,6 +8,7 @@ import { ModuleModel } from '../models/module.model';
 import { ExcelPortalGroupModel, ExcelPortalModel, ExcelPortalTagsModel } from '../models/excel-portal.model';
 import { AlertModel } from '../models/alert.model';
 import { TemplateFileMiniModel } from '../models/template-file-mini.model';
+import { TokenService } from '../../shared/services/token.service';
 
 @Injectable({
   providedIn: 'root'
@@ -15,13 +16,13 @@ import { TemplateFileMiniModel } from '../models/template-file-mini.model';
 export class ExcelReportService {
 
   constructor(private http: HttpClient,
-    private translateService: TranslateService
+    private translateService: TranslateService, private tokenService: TokenService
   ) { }
   getExcelList(): Observable<TemplateModel[]> {
-    return this.http.get<TemplateModel[]>(environment.url + "template/lists?companyid=DEMO")
+    return this.http.get<TemplateModel[]>(environment.url + "template/lists?companyid=" + this.tokenService.getSelectCompany().companyId)
   }
   getModuleList(): Observable<ModuleModel[]> {
-    return this.http.get<ModuleModel[]>(environment.url + "template/lists/module?companyid=DEMO")
+    return this.http.get<ModuleModel[]>(environment.url + "template/lists/module?companyid=" + this.tokenService.getSelectCompany().companyId)
   }
   getExcelPortalList(): Observable<ExcelPortalModel[]> {
     return this.http.get<ExcelPortalModel[]>(environment.url + "excel-center/content/lists")
@@ -50,10 +51,10 @@ export class ExcelReportService {
       }),
       body: body
     }
-    return this.http.delete<AlertModel>(environment.url + "template?companyid=DEMO", option)
+    return this.http.delete<AlertModel>(environment.url + "template?companyid=" + this.tokenService.getSelectCompany().companyId, option)
   }
   postTemplateFile(body: TemplateFileModel): Observable<AlertModel> {
-    return this.http.post<AlertModel>(environment.url + "template-file?companyid=DEMO", body)
+    return this.http.post<AlertModel>(environment.url + "template-file?companyid=" + this.tokenService.getSelectCompany().companyId, body)
   }
   deleteTemplateFile(body: TemplateFileModel): Observable<AlertModel> {
     let option = {
@@ -62,22 +63,22 @@ export class ExcelReportService {
       }),
       body: body
     }
-    return this.http.delete<AlertModel>(environment.url + "template-file?companyid=DEMO", option)
+    return this.http.delete<AlertModel>(environment.url + "template-file?companyid=" + this.tokenService.getSelectCompany().companyId, option)
   }
   downloadTemplateFile(fileName: string) {
-    return this.http.get(environment.url + "template-file/download/excel/" + fileName + "?companyid=DEMO", { responseType: 'blob' })
+    return this.http.get(environment.url + "template-file/download/excel/" + fileName + "?companyid=" + this.tokenService.getSelectCompany().companyId, { responseType: 'blob' })
   }
   printExcelReport(body: {
     fileName: string,
     paramObj: string
   }) {
-    return this.http.post(environment.url + "template-file/export-to-excel?companyid=DEMO", body, { responseType: 'blob' })
+    return this.http.post(environment.url + "template-file/export-to-excel?companyid=" + this.tokenService.getSelectCompany().companyId, body, { responseType: 'blob' })
   }
   getTemplateFile(templateid: string, filename: string): Observable<AlertModel> {
-    return this.http.get<AlertModel>(environment.url + "template-file/" + templateid + "/" + filename + "?companyid=DEMO",)
+    return this.http.get<AlertModel>(environment.url + "template-file/" + templateid + "/" + filename + "?companyid=" + this.tokenService.getSelectCompany().companyId,)
   }
 
   getTemplateFileLists(): Observable<TemplateFileMiniModel[]> {
-    return this.http.get<TemplateFileMiniModel[]>(environment.url + "template-file/menuitem/mini/lists?companyid=DEMO",)
+    return this.http.get<TemplateFileMiniModel[]>(environment.url + "template-file/menuitem/mini/lists?companyid=" + this.tokenService.getSelectCompany().companyId,)
   }
 }
\ No newline at end of file

src/app/portal-manage/services/excel.service.ts

@@ -4,6 +4,7 @@ import { Observable, of } from 'rxjs';
 import { environment } from "../../../environments/environment";
 import { ExcelModel } from '../models/excel.model';
 import { ExcelContentModel } from '../models/excel-content.model';
+import { TokenService } from '../../shared/services/token.service';
 
 @Injectable({
   providedIn: 'root'
@@ -11,31 +12,31 @@ import { ExcelContentModel } from '../models/excel-content.model';
 export class ExcelService {
   url = environment.url
   createStatus: boolean = true
-  constructor(private http: HttpClient) { }
+  constructor(private http: HttpClient, private tokenService: TokenService) { }
 
   getListExcel(status?: string): Observable<ExcelModel[]> {
-    if(status){
-      return this.http.get<ExcelModel[]>(this.url + "excel-center/upload/lists?status="+status)
-      }else{
+    if (status) {
+      return this.http.get<ExcelModel[]>(this.url + "excel-center/upload/lists?status=" + status)
+    } else {
       return this.http.get<ExcelModel[]>(this.url + "excel-center/upload/lists")
     }
   }
   getListExcelContent(status?: string): Observable<ExcelContentModel[]> {
     return this.http.get<ExcelContentModel[]>(this.url + "excel-center/content/lists")
   }
-  getExcelById(logId:string): Observable<ExcelModel> {
-    return this.http.get<ExcelModel>(this.url + "excel-center/upload/"+logId)
+  getExcelById(logId: string): Observable<ExcelModel> {
+    return this.http.get<ExcelModel>(this.url + "excel-center/upload/" + logId)
   }
-  downloadFile(logId:string):Observable<any>{
-    return this.http.get(this.url + "excel-center/files/download/"+logId,  { responseType: 'blob'  })
+  downloadFile(logId: string): Observable<any> {
+    return this.http.get(this.url + "excel-center/files/download/" + logId, { responseType: 'blob' })
   }
-  downloadFileContent(logId:string):Observable<any>{
-    return this.http.get(this.url + "excel-center/files/download/content/"+logId, { responseType: 'blob'  });
+  downloadFileContent(logId: string): Observable<any> {
+    return this.http.get(this.url + "excel-center/files/download/content/" + logId, { responseType: 'blob' });
   }
 
   createExcel(model: ExcelModel): Observable<any> {
-    let body : any = model
-    if (body.group.groupId=='') {
+    let body: any = model
+    if (body.group.groupId == '') {
       body.group = undefined
     }
     return this.http.post(this.url + 'excel-center', body)
@@ -69,13 +70,13 @@ export class ExcelService {
       logId: model.logId,
       status: model.status
     }
-    return this.http.put<any>(this.url + "excel-center/approve",body)
+    return this.http.put<any>(this.url + "excel-center/approve", body)
   }
 
   getCount(status?: string): Observable<number> {
-    return this.http.get<number>(this.url + "excel-center/upload/count")
+    return this.http.get<number>(this.url + "excel-center/upload/count?companyid=" + this.tokenService.getSelectCompany().companyId)
   }
   getCountContent(status?: string): Observable<number> {
-    return this.http.get<number>(this.url + "excel-center/content/count")
+    return this.http.get<number>(this.url + "excel-center/content/count?companyid=" + this.tokenService.getSelectCompany().companyId)
   }
 }

src/app/portal-manage/services/widgets.service.ts

@@ -5,6 +5,7 @@ import { Observable, of } from 'rxjs';
 import { map, tap } from 'rxjs/operators';
 import { WidgetModel } from '../models/widgets.model';
 import { DocumentContentModel } from '../models/document-content.model';
+import { TokenService } from '../../shared/services/token.service';
 
 
 @Injectable({
@@ -13,7 +14,7 @@ import { DocumentContentModel } from '../models/document-content.model';
 export class WidgetService {
   url = environment.url
   createStatus: boolean = true
-  constructor(private http: HttpClient) { }
+  constructor(private http: HttpClient, private tokenService: TokenService) { }
   getListWidgets(status?: string): Observable<WidgetModel[]> {
     return this.http.get<WidgetModel[]>(this.url + "widget-registry/lists/search")
   }
@@ -57,9 +58,9 @@ export class WidgetService {
 
 
   getCount(status?: string): Observable<number> {
-    return this.http.get<number>(this.url + "widget-registry/count")
+    return this.http.get<number>(this.url + "widget-registry/count?companyid=" + this.tokenService.getSelectCompany().companyId)
   }
   getCountContent(status?: string): Observable<number> {
-    return this.http.get<number>(this.url + "document-center/content/count")
+    return this.http.get<number>(this.url + "document-center/content/count?companyid=" + this.tokenService.getSelectCompany().companyId)
   }
 }

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

@@ -99,6 +99,10 @@ export class TokenService {
     return new UserProfileModel();
   }
 
+  public removeCompany(): void {
+    window.localStorage.removeItem(COMPANY);
+  }
+
   public saveSelectCompany(company: CompanyModel): void {
     window.localStorage.removeItem(COMPANY);
     window.localStorage.setItem(COMPANY, JSON.stringify(new CompanyModel(company)));