หน้าหัวหน้า ข้อมูลพนักงาน หน้าหลัก

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

@@ -52,6 +52,7 @@ import { ReportCom3Component } from '../report-component/report-com/report-com-3
 import { ReportPms1Component } from '../report-component/report-pms/report-pms-1/report-pms-1.component';
 import { ReportPms2Component } from '../report-component/report-pms/report-pms-2/report-pms-2.component';
 import { ReportPms3Component } from '../report-component/report-pms/report-pms-3/report-pms-3.component';
+import { EssProfileComponent } from '../ess-profile/ess-profile.component';
 
 
 
@@ -75,7 +76,9 @@ const routes: Routes = [
 
 
       // myComponent
+      { path: "ess/profile", component: EssProfileComponent },
       { path: "ess/self-evaluation", title: 'ประเมินตนเอง', component: SelfEvaluationComponent },
+      { path: "ess/self-evaluation/:part", title: 'ประเมินตนเอง', component: SelfEvaluationComponent },
       { path: "admin/day-type-registry", title: 'ประเมินตนเอง', component: DayTypeRegistryComponent },
       { path: "admin/company-registration", title: 'ทะเบียนบริษัท', component: CompanyRegistrationComponent },
       { path: "admin/job-description", title: 'ข้อมูลลักษณะงาน', component: JobDescriptionComponent },

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

@@ -186,6 +186,7 @@ import { ReportCom3Component } from '../report-component/report-com/report-com-3
 import { ReportPms1Component } from '../report-component/report-pms/report-pms-1/report-pms-1.component';
 import { ReportPms2Component } from '../report-component/report-pms/report-pms-2/report-pms-2.component';
 import { ReportPms3Component } from '../report-component/report-pms/report-pms-3/report-pms-3.component';
+import { EssProfileComponent } from '../ess-profile/ess-profile.component';
 
 export const MY_DATE_FORMATS = {
   parse: {
@@ -328,7 +329,8 @@ export class CustomDateAdapter extends NativeDateAdapter {
     ReportCom3Component,
     ReportPms1Component,
     ReportPms2Component,
-    ReportPms3Component
+    ReportPms3Component,
+    EssProfileComponent
   ],
   imports: [
     CommonModule,

src/app/components/employee-self-service/employee-self-service.component.html

-
 <header class="flex flex-col items-center gap-3 text-center">
 
   <!-- โลโก้ -->
-  <img src="./assets/img/brand-logos/mySkill-x.png"
-       alt="mySkillX"
-       class="h-32 w-auto" />
+  <img src="./assets/img/brand-logos/mySkill-x.png" alt="mySkillX" class="h-32 w-auto" />
 
   <!-- บรรทัดใหญ่ -->
 
@@ -17,12 +14,10 @@
 
     <!-- ◀︎ HERO -->
     <aside class="hero-card bp-glow shrink-0 self-center lg:self-start">
-      <img src="assets/img/logos/HRD/1.png"
-           alt="Performance illustration"
-           class="hero-img" />
+      <img src="assets/img/logos/HRD/1.png" alt="Performance illustration" class="hero-img" />
 
       <h4 class="hero-label">One X</h4>
-      <h3 class="hero-title">Performance &<br/>Competency</h3>
+      <h3 class="hero-title">Performance &<br />Competency</h3>
 
       <button routerLink="/dashboard/projects" class="hero-btn">Dashboard</button>
 
@@ -35,11 +30,50 @@
     <section class="flex-grow">
       <div class="grid gap-6 grid-cols-2 sm:grid-cols-3 md:grid-cols-4
                   xl:grid-cols-4 auto-rows-[150px]">
-        <div *ngFor="let m of modules" class="sub-card aspect-square"  routerLink="/ess/self-evaluation">
-          <p class="sub-title">{{ m.title }}</p>
-        </div>
+        <ng-container *ngFor="let m of modules; let i = index">
+          <div *ngIf="m.route" class="sub-card aspect-square flex-col" [routerLink]="m.route"
+            style="justify-content: start ;align-items: start;">
+            <div class="flex" style="margin-bottom:6rem;margin-top:1rem">
+              <span
+                class="flex align-items-center justify-content-center rounded-circle text-white bg-primary  text-left"
+                style="font-weight: 600;font-size: 1.5rem;">
+                {{i+1}}
+              </span>
+            </div>
+            <div class="flex">
+              <div class="sub-title2 text-left" [innerHTML]="m.title"></div>
+            </div>
+          </div>
+          <div *ngIf="m.file" class="sub-card aspect-square flex-col" (click)="openReport(m.file)"
+            style="justify-content: start ;align-items: start;">
+            <div class="flex " style="margin-bottom:6rem;margin-top:1rem">
+              <span
+                class="flex align-items-center justify-content-center rounded-circle text-white bg-primary  text-left"
+                style="font-weight: 600;font-size: 1.5rem;">
+                {{i+1}}
+              </span>
+            </div>
+            <div class="flex">
+              <div class="sub-title2 text-left" [innerHTML]="m.title"></div>
+            </div>
+          </div>
+          <div *ngIf="!m.route&&!m.file" class="sub-card aspect-square flex-col"
+            style="justify-content: start ;align-items: start;">
+            <div class="flex " style="margin-bottom:6rem;margin-top:1rem">
+              <span
+                class="flex align-items-center justify-content-center rounded-circle text-white bg-primary  text-left"
+                style="font-weight: 600;font-size: 1.5rem;">
+                {{i+1}}
+              </span>
+            </div>
+            <div class="flex">
+              <div class="sub-title2 text-left" [innerHTML]="m.title"></div>
+            </div>
+          </div>
+        </ng-container>
+
       </div>
     </section>
 
   </div>
-</main>
+</main>
\ No newline at end of file

src/app/components/employee-self-service/employee-self-service.component.scss

 /* ===== base variables ===== */
-$size-card   : 150px;         // ( ≥1280px จะขยายเป็น 170 )
-$col-hero    : 280px;         // ความกว้างคอลัมน์ซ้าย
-$gap-main    : 2.5rem;
+$size-card : 150px; // ( ≥1280px จะขยายเป็น 170 )
+$col-hero : 280px; // ความกว้างคอลัมน์ซ้าย
+$gap-main : 2.5rem;
 $radius-main : 28px;
-$radius-sub  : 20px;
-$dur         : .35s;
-$easing      : cubic-bezier(.4,0,.2,1);
-$shadow-base : 0 14px 30px -12px rgba(0,0,0,.18);
-$shadow-deep : 0 20px 42px -16px rgba(0,0,0,.24);
+$radius-sub : 20px;
+$dur : .35s;
+$easing : cubic-bezier(.4, 0, .2, 1);
+$shadow-base : 0 14px 30px -12px rgba(0, 0, 0, .18);
+$shadow-deep : 0 20px 42px -16px rgba(0, 0, 0, .24);
 
 /* ===== wrapper ===== */
-.wrapper { max-width: 1400px; margin: 0 auto; padding: 3rem 1.25rem; margin-top: 5rem; }
+.wrapper {
+  max-width: 1400px;
+  margin: 0 auto;
+  padding: 3rem 1.25rem;
+  margin-top: 5rem;
+}
 
 /* ===== GRID ชั้นแรก ===== */
 .page-grid {
@@ -18,7 +23,8 @@ $shadow-deep : 0 20px 42px -16px rgba(0,0,0,.24);
   gap: $gap-main;
   grid-template-columns: $col-hero 1fr;
 
-  @media (max-width: 1023px) {       /* < lg : 1 คอลัมน์ */
+  @media (max-width: 1023px) {
+    /* < lg : 1 คอลัมน์ */
     grid-template-columns: 1fr;
   }
 }
@@ -26,7 +32,7 @@ $shadow-deep : 0 20px 42px -16px rgba(0,0,0,.24);
 /* ===== HERO CARD (คงเดิม – ตัด flex ออก) ===== */
 .hero-card {
   width: 100%;
-  max-width: 280px;             // ไม่เกินจอ desktop
+  max-width: 280px; // ไม่เกินจอ desktop
   box-sizing: border-box;
   padding-inline: clamp(1rem, 4vw, 1.75rem);
   padding-block: 2rem 3rem;
@@ -41,7 +47,10 @@ $shadow-deep : 0 20px 42px -16px rgba(0,0,0,.24);
   gap: 1.3rem;
   transition: transform $dur $easing, box-shadow $dur $easing;
 
-  &:hover { transform: translateY(-6px); box-shadow: $shadow-deep; }
+  &:hover {
+    transform: translateY(-6px);
+    box-shadow: $shadow-deep;
+  }
 
   /* glow */
   &.bp-glow::before {
@@ -49,42 +58,75 @@ $shadow-deep : 0 20px 42px -16px rgba(0,0,0,.24);
     position: absolute;
     inset: -3px;
     border-radius: inherit;
-    background: linear-gradient(135deg,#4f46e5,#ec4899 60%,#f59e0b);
+    background: linear-gradient(135deg, #4f46e5, #ec4899 60%, #f59e0b);
     filter: blur(34px);
     opacity: .17;
     z-index: -1;
     transition: opacity $dur;
   }
-  &:hover.bp-glow::before { opacity: .27; }
+
+  &:hover.bp-glow::before {
+    opacity: .27;
+  }
+}
+
+@media (max-width: 639px) {
+  .hero-img {
+    max-width: 68%;
+  }
+}
+
+.hero-img {
+  width: 10rem;
+}
+
+.hero-label {
+  font: 600 .95rem/1.2 'Inter', sans-serif;
+  color: #3b82f6;
+}
+
+.hero-title {
+  font: 700 1.5rem/1.3 'Inter', sans-serif;
+  color: #1e3a8a;
 }
-@media (max-width: 639px){
-  .hero-img { max-width: 68%; }
+
+.hero-btn {
+  @apply bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-full px-10 py-2 transition;
+}
+
+.back-link {
+  position: absolute;
+  left: 1.75rem;
+  bottom: 1rem;
+  font-size: .9rem;
+  color: #64748b;
+  transition: color .25s;
+
+  &:hover {
+    color: #3b82f6;
+  }
 }
-.hero-img   { width: 10rem; }
-.hero-label { font: 600 .95rem/1.2 'Inter',sans-serif; color:#3b82f6; }
-.hero-title { font: 700 1.5rem/1.3 'Inter',sans-serif; color:#1e3a8a; }
-.hero-btn   { @apply bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-full px-10 py-2 transition; }
-.back-link  { position: absolute; left: 1.75rem; bottom: 1rem; font-size: .9rem; color:#64748b; transition: color .25s;
-              &:hover { color:#3b82f6; } }
 
 /* ===== GRID ชั้นสอง – เมนูย่อย 2 แถวพอดี ===== */
 .sub-grid {
   display: grid;
-  grid-auto-flow: column;                /* เติมแนวนอนก่อน */
-  grid-template-rows: repeat(2,$size-card);
+  grid-auto-flow: column;
+  /* เติมแนวนอนก่อน */
+  grid-template-rows: repeat(2, $size-card);
   grid-auto-columns: $size-card;
   gap: 1.5rem;
   place-content: start;
   grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+
   /* ≥1280px ขยายการ์ด */
   @media (min-width: 1280px) {
-    grid-template-rows: repeat(2,170px);
+    grid-template-rows: repeat(2, 170px);
     grid-auto-columns: 170px;
   }
 
   /* มือถือ: 2 คอลัมน์เสมอ */
   @media (max-width: 639px) {
-    grid-template-rows: repeat(2,46vw);
+    grid-template-rows: repeat(2, 46vw);
     grid-auto-columns: 46vw;
   }
 }
@@ -94,25 +136,32 @@ $shadow-deep : 0 20px 42px -16px rgba(0,0,0,.24);
   aspect-ratio: 1 / 1;
   position: relative;
   border-radius: $radius-sub;
-  background: rgba(255,255,255,.5);       /* glass */
+  background: rgba(255, 255, 255, .5);
+  /* glass */
   backdrop-filter: blur(9px) saturate(170%);
-  box-shadow: 0 8px 18px -10px rgba(71,85,105,.25);
-  display: flex; align-items: center; justify-content: center;
-  text-align: center; padding: 1rem;
-  cursor: pointer; user-select: none;
+  box-shadow: 0 8px 18px -10px rgba(71, 85, 105, .25);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  padding: 1rem;
+  cursor: pointer;
+  user-select: none;
   transition: transform .45s $easing, box-shadow .45s $easing, background .45s;
 
   /* gradient rim */
   &::before {
     content: '';
-    position: absolute; inset: 0;
+    position: absolute;
+    inset: 0;
     border-radius: inherit;
     padding: 1px;
     // background: linear-gradient(160deg,#60a5fa,#818cf8 50%,#a855f7);
-    background: linear-gradient(135deg,#4f46e5,#ec4899 60%,#f59e0b);
+    background: linear-gradient(135deg, #4f46e5, #ec4899 60%, #f59e0b);
     mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
     mask-composite: exclude;
-    opacity: .45; transition: opacity .4s;
+    opacity: .45;
+    transition: opacity .4s;
   }
 
   &:hover {
@@ -120,9 +169,12 @@ $shadow-deep : 0 20px 42px -16px rgba(0,0,0,.24);
     transform: translateY(-7px) rotateX(5deg) rotateY(-3deg);
     box-shadow: $shadow-deep;
 
-    &::before { opacity: .9; }
+    &::before {
+      opacity: .9;
+    }
   }
 }
+
 .sub-title {
   font-weight: 600;
   font-size: .9rem;
@@ -131,3 +183,12 @@ $shadow-deep : 0 20px 42px -16px rgba(0,0,0,.24);
   pointer-events: none;
   word-break: break-word;
 }
+
+.sub-title2 {
+  font-weight: 600;
+  font-size: 1.5rem;
+  line-height: 2.25rem;
+  color: #2563eb;
+  pointer-events: none;
+  word-break: break-word;
+}
\ No newline at end of file

src/app/components/employee-self-service/employee-self-service.component.ts

 import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
 interface SubModule {
-  title: string;
+  title: SafeHtml;
   route?: string;
+  file?: string;
 }
 @Component({
   selector: 'app-employee-self-service',
@@ -9,18 +11,28 @@ interface SubModule {
   styleUrls: ['./employee-self-service.component.scss']
 })
 export class EmployeeSelfServiceComponent {
-    // ▶︎ ภาพทางซ้าย (ปรับ path ตามจริง)
+  // ▶︎ ภาพทางซ้าย (ปรับ path ตามจริง)
   heroImg = 'assets/illustrations/performance.svg';
 
   // ▶︎ เมนูย่อย (ฝั่งขวา)
   modules: SubModule[] = [
-    { title: 'ประเมิน Competency & PMS' },
-    { title: 'JD' },
-    { title: 'Gap Analysis' },
-    { title: 'Profile' },
-    { title: 'Skill Map' },
-    { title: 'Competency Base Pay' },
-    { title: 'CDR' },
-    { title: 'IDP' }
+    { title: this.sanitizer.bypassSecurityTrustHtml('ประเมิน<p>Competency & PMS'), route: '/ess/self-evaluation' },
+    { title: this.sanitizer.bypassSecurityTrustHtml('Job Description<p>รายละเอียดของงาน'), file: '2._JD.pdf' },
+    { title: this.sanitizer.bypassSecurityTrustHtml('Gap Analysis<p>การวิเคราะห์ Gap'), file: '3._Gap_analysis.pdf' },
+    { title: this.sanitizer.bypassSecurityTrustHtml('Profile<p>ข้อมูลพนักงาน'), route: '/ess/profile' },
+    { title: this.sanitizer.bypassSecurityTrustHtml('Skill Map<p>ทักษะที่จำเป็นสำหรับแต่ละตำแหน่งงาน'), file: '5._skill_map.pdf' },
+    { title: this.sanitizer.bypassSecurityTrustHtml('CDR : Competency Dictionary Roadmap<p>หลักสูตรฝึกอบรมตามระบบสมรรถนะ'), file: '6._CDR.pdf' },
+    { title: this.sanitizer.bypassSecurityTrustHtml('IDP : Individual Development Plan<p>แผนพัฒนารายบุคคล'), route: '/ess/self-evaluation/IDP' },
+    { title: this.sanitizer.bypassSecurityTrustHtml('Competency Base Pay<p>ค่าความสามารถพิเศษ') }
   ];
+  constructor(private sanitizer: DomSanitizer) {
+
+  }
+  openReport(file: string) {
+    const url = 'assets/reports/' + file;
+    window.open(url, '_blank');
+  }
+
 }
+
+

src/app/components/ess-profile/ess-profile.component.html

+<div class="relative">
+  <!-- before:bg-black/50 -->
+  <div class="flex relative  before:absolute before:w-full before:h-full bg-gradient-custom"
+    style="margin-top: -50px ;">
+    <div class="h-[500px] w-full rounded-sm"></div>
+    <!-- <img [src]="url2 ? url2 : './assets/img/png-images/2.png'" alt="" class="h-[500px] w-full rounded-sm"
+      id="profile-img2" />
+    <span
+      class="absolute top-5 ltr:right-5 rtl:left-5 flex p-3 rounded-sm ring-1 ring-black/10 text-white bg-black/10 leading-none">
+      <i class="ri ri-pencil-line ltr:mr-2 rtl:ml-2"></i>
+      <span>Change Profile Pic</span>
+      <input (change)="onSelectFile2($event)" type="file" name="photo"
+        class="absolute inset-0 w-full h-full opacity-0 cursor-pointer" id="profile-change2" />
+    </span> -->
+  </div>
+  <div class="absolute inset-x-0 text-center space-y-3" style="top:4rem">
+    <div class="flex justify-center w-full">
+      <div class="relative">
+        <img
+          [src]="employee.data.picture?url+'/employee/image/'+employee.data.picture:'./assets/img/users/defaultperson.jpg'"
+          class="rounded-full ring-4 ring-white/10 mx-auto object-cover" id="profile-img" alt="profile-img"
+          style="height: 10rem;width: 10rem;">
+        <!-- <span
+          class="absolute bottom-0 ltr:right-0 rtl:left-0 block p-1 rounded-full ring-2 ring-white/10 text-white bg-white/10 dark:bg-bgdark leading-none cursor-pointer">
+          <i class="ri ri-pencil-line cursor-pointer"></i>
+          <input (change)="onSelectFile1($event)" type="file"
+            class="absolute inset-0 w-full h-full opacity-0 cursor-pointer" id="profile-change" />
+        </span> -->
+      </div>
+    </div>
+    <div class=" flex flex-row justify-center">
+      <div class="box" style="background:white;padding: 10px;border-radius:20px">
+        <h2 class="text-base font-semibold">{{employee.data.thFullName}}</h2>
+        <p class="text-xs" *ngIf="employee.data.email">{{employee.data.email}}</p>
+      </div>
+    </div>
+    <!-- <div class="flex space-x-2 rtl:space-x-reverse text-center justify-center">
+      <div class="text-yellow-500 text-base hover:text-yellow-500">
+        <i class="ri-star-fill"></i>
+      </div>
+      <div class="text-yellow-500 text-base hover:text-yellow-500">
+        <i class="ri-star-fill"></i>
+      </div>
+      <div class="text-yellow-500 text-base hover:text-yellow-500">
+        <i class="ri-star-fill"></i>
+      </div>
+      <div class="text-yellow-500 text-base hover:text-yellow-500">
+        <i class="ri-star-fill"></i>
+      </div>
+      <div class="text-yellow-500 text-base hover:text-yellow-500">
+        <i class="ri-star-fill"></i>
+      </div>
+    </div>
+    <div class="flex space-x-1 rtl:space-x-reverse justify-center text-center">
+      <div class="hs-tooltip ti-main-tooltip">
+        <button type="button"
+          class="hs-tooltip-toggle m-0 rounded-full p-2 ti-btn ti-btn-outline ring-white/10 text-white bg-white/10 border-white/10">
+          <i class="ri ri-github-line text-lg leading-none"></i>
+          <span
+            class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700 hidden"
+            role="tooltip" data-popper-placement="top" style="
+              position: fixed;
+              inset: auto auto 0px 0px;
+              margin: 0px;
+              transform: translate(823px, -92px);
+            ">
+            Github
+          </span>
+        </button>
+      </div>
+      <div class="hs-tooltip ti-main-tooltip">
+        <button type="button"
+          class="hs-tooltip-toggle m-0 rounded-full p-2 ti-btn ti-btn-outline ring-white/10 text-white bg-white/10 border-white/10">
+          <i class="ri ri-instagram-line text-lg leading-none"></i>
+          <span
+            class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700"
+            role="tooltip" data-popper-placement="top" style="
+              position: fixed;
+              inset: auto auto 0px 0px;
+              margin: 0px;
+              transform: translate(823px, -92px);
+            ">
+            Instagram
+          </span>
+        </button>
+      </div>
+      <div class="hs-tooltip ti-main-tooltip">
+        <button type="button"
+          class="hs-tooltip-toggle m-0 rounded-full p-2 ti-btn ti-btn-outline ring-white/10 text-white bg-white/10 border-white/10">
+          <i class="ri ri-twitter-line text-lg leading-none"></i>
+          <span
+            class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700"
+            role="tooltip">
+            Twitter
+          </span>
+        </button>
+      </div>
+      <div class="hs-tooltip ti-main-tooltip">
+        <button type="button"
+          class="hs-tooltip-toggle m-0 rounded-full p-2 ti-btn ti-btn-outline ring-white/10 text-white bg-white/10 border-white/10">
+          <i class="ri ri-linkedin-line text-lg leading-none"></i>
+          <span
+            class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700"
+            role="tooltip">
+            Linkedin
+          </span>
+        </button>
+      </div>
+      <div class="hs-tooltip ti-main-tooltip">
+        <button type="button"
+          class="hs-tooltip-toggle m-0 rounded-full p-2 ti-btn ti-btn-outline ring-white/10 text-white bg-white/10 border-white/10">
+          <i class="ri ri-facebook-circle-line text-lg leading-none"></i>
+          <span
+            class="hs-tooltip-content ti-main-tooltip-content py-1 px-2 bg-gray-900 text-xs font-medium text-white shadow-sm dark:bg-slate-700"
+            role="tooltip">
+            Facebook
+          </span>
+        </button>
+      </div>
+    </div> -->
+  </div>
+
+  <!-- Start::main-content -->
+  <!-- -mt-28 -->
+  <div class="main-content " [ngStyle]="{'margin-top': employee.data.email? '-12rem':'-13rem'}">
+    <!-- Start::row-1 -->
+    <div class="grid grid-cols-12 gap-x-6">
+      <div class="col-span-12 xxl:col-span-3">
+        <!-- <div class="box">
+          <div class="box-header">
+            <div class="flex justify-between">
+              <h5 class="box-title">About Me</h5>
+            </div>
+          </div>
+          <div class="box-body space-y-3">
+            <div class="space-y-3">
+              <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</p>
+              <p>
+                A odit dignissimos minima atque sapiente, eos mollitia amet
+                officiis tempora voluptate laboriosam id perferendis nobis est
+                vitae facere tenetur? Ut, nam?
+              </p>
+            </div>
+          </div>
+        </div>
+        <div class="box">
+          <div class="box-header">
+            <div class="flex justify-between">
+              <h5 class="box-title">General Info</h5>
+            </div>
+          </div>
+          <div class="box-body py-2">
+            <div class="xl:overflow-hidden overflow-x-auto">
+              <table class="ti-custom-table border-0">
+                <tbody>
+                  <tr class="">
+                    <td class="font-medium !p-2">Designation</td>
+                    <td class="!p-2">:</td>
+                    <td class="!p-2">Sr.Ui Developer</td>
+                  </tr>
+                  <tr class="!border-0">
+                    <td class="font-medium !p-2">Joined</td>
+                    <td class="!p-2">:</td>
+                    <td class="!p-2">01 November 2019</td>
+                  </tr>
+                  <tr class="!border-0">
+                    <td class="font-medium !p-2">Age</td>
+                    <td class="!p-2">:</td>
+                    <td class="!p-2">26</td>
+                  </tr>
+                  <tr class="!border-0">
+                    <td class="font-medium !p-2">City</td>
+                    <td class="!p-2">:</td>
+                    <td class="!p-2">Lake Park</td>
+                  </tr>
+                  <tr class="!border-0">
+                    <td class="font-medium !p-2">Country</td>
+                    <td class="!p-2">:</td>
+                    <td class="!p-2">Newyork</td>
+                  </tr>
+                  <tr class="!border-0">
+                    <td class="font-medium !p-2">State</td>
+                    <td class="!p-2">:</td>
+                    <td class="!p-2">U.S.A</td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+        <div class="box">
+          <div class="box-header">
+            <div class="flex justify-between">
+              <h5 class="box-title">Followers</h5>
+            </div>
+          </div>
+          <div class="box-body space-y-4 text-center">
+            <ul class="flex flex-col">
+              <li class="ti-list-group bg-white text-gray-800 dark:bg-bgdark dark:border-white/10 dark:text-white">
+                <div class="sm:flex xxl:block xxxl:flex space-y-2 xxxl:space-y-0 justify-between w-full">
+                  <div class="flex items-center">
+                    <img class="avatar avatar-xs rounded-sm" src="./assets/img/users/2.jpg" alt="Image Description" />
+                    <div class="ltr:ml-4 rtl:mr-4">
+                      <h5 class="text-gray-800 dark:text-white">
+                        Socrates Itumay
+                      </h5>
+                      <p class="text-xs text-gray-500 dark:text-white/70">
+                        UI/Ux Designer
+                      </p>
+                    </div>
+                  </div>
+                  <div class="my-auto">
+                    <button type="button"
+                      class="ti-btn p-1 m-0 text-xs font-medium bg-white border-gray-200 text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10">
+                      <i class="ri-user-unfollow-line"></i> Following
+                    </button>
+                  </div>
+                </div>
+              </li>
+              <li class="ti-list-group bg-white text-gray-800 dark:bg-bgdark dark:border-white/10 dark:text-white">
+                <div class="sm:flex xxl:block xxxl:flex space-y-2 xxxl:space-y-0 justify-between w-full">
+                  <div class="flex items-center">
+                    <img class="avatar avatar-xs rounded-sm" src="./assets/img/users/12.jpg" alt="Image Description" />
+                    <div class="ltr:ml-4 rtl:mr-4">
+                      <h5 class="text-gray-800 dark:text-white">Ben Dover</h5>
+                      <p class="text-xs text-gray-500 dark:text-white/70">
+                        Java Developer
+                      </p>
+                    </div>
+                  </div>
+                  <div class="my-auto">
+                    <button type="button"
+                      class="ti-btn p-1 m-0 text-xs font-medium bg-white border-gray-200 text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10">
+                      <i class="ri-user-unfollow-line"></i> Following
+                    </button>
+                  </div>
+                </div>
+              </li>
+              <li class="ti-list-group bg-white text-gray-800 dark:bg-bgdark dark:border-white/10 dark:text-white">
+                <div class="sm:flex xxl:block xxxl:flex space-y-2 xxxl:space-y-0 justify-between w-full">
+                  <div class="flex items-center">
+                    <span
+                      class="avatar avatar-xs ring-0 rounded-sm bg-secondary leading-none p-2 text-center text-lg text-white">B</span>
+                    <div class="ltr:ml-4 rtl:mr-4">
+                      <h5 class="text-gray-800 dark:text-white">Benz Makit</h5>
+                      <p class="text-xs text-gray-500 dark:text-white/70">
+                        React Developer
+                      </p>
+                    </div>
+                  </div>
+                  <div class="my-auto">
+                    <button type="button"
+                      class="ti-btn p-1 m-0 text-xs font-medium bg-white border-gray-200 text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10">
+                      <i class="ri-user-unfollow-line"></i> Following
+                    </button>
+                  </div>
+                </div>
+              </li>
+              <li class="ti-list-group bg-white text-gray-800 dark:bg-bgdark dark:border-white/10 dark:text-white">
+                <div class="sm:flex xxl:block xxxl:flex space-y-2 xxxl:space-y-0 justify-between w-full">
+                  <div class="flex items-center">
+                    <img class="avatar avatar-xs rounded-sm" src="./assets/img/users/3.jpg" alt="Image Description" />
+                    <div class="ltr:ml-4 rtl:mr-4">
+                      <h5 class="text-gray-800 dark:text-white">
+                        Wiley Waites
+                      </h5>
+                      <p class="text-xs text-gray-500 dark:text-white/70">
+                        Web Designer
+                      </p>
+                    </div>
+                  </div>
+                  <div class="my-auto">
+                    <button type="button"
+                      class="ti-btn p-1 m-0 text-xs font-medium bg-white border-gray-200 text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10">
+                      <i class="ri-user-unfollow-line"></i> Following
+                    </button>
+                  </div>
+                </div>
+              </li>
+              <li class="ti-list-group bg-white text-gray-800 dark:bg-bgdark dark:border-white/10 dark:text-white">
+                <div class="sm:flex xxl:block xxxl:flex space-y-2 xxxl:space-y-0 justify-between w-full">
+                  <div class="flex items-center">
+                    <img class="avatar avatar-xs rounded-sm" src="./assets/img/users/13.jpg" alt="Image Description" />
+                    <div class="ltr:ml-4 rtl:mr-4">
+                      <h5 class="text-gray-800 dark:text-white">
+                        King Berunda
+                      </h5>
+                      <p class="text-xs text-gray-500 dark:text-white/70">
+                        Full Stack Developer
+                      </p>
+                    </div>
+                  </div>
+                  <div class="my-auto">
+                    <button type="button"
+                      class="ti-btn p-1 m-0 text-xs font-medium bg-white border-gray-200 text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10">
+                      <i class="ri-user-unfollow-line"></i> Following
+                    </button>
+                  </div>
+                </div>
+              </li>
+              <li class="ti-list-group bg-white text-gray-800 dark:bg-bgdark dark:border-white/10 dark:text-white">
+                <div class="sm:flex xxl:block xxxl:flex space-y-2 xxxl:space-y-0 justify-between w-full">
+                  <div class="flex items-center">
+                    <img class="avatar avatar-xs rounded-sm" src="./assets/img/users/4.jpg" alt="Image Description" />
+                    <div class="ltr:ml-4 rtl:mr-4">
+                      <h5 class="text-gray-800 dark:text-white">
+                        Samantha May
+                      </h5>
+                      <p class="text-xs text-gray-500 dark:text-white/70">
+                        Full Stack Developer
+                      </p>
+                    </div>
+                  </div>
+                  <div class="my-auto">
+                    <button type="button"
+                      class="ti-btn p-1 m-0 text-xs font-medium bg-white border-gray-200 text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10">
+                      <i class="ri-user-unfollow-line"></i> Following
+                    </button>
+                  </div>
+                </div>
+              </li>
+            </ul>
+            <a href="javascript:void(0);" class="ti-btn ti-btn-primary py-1 px-2 m-0">View more</a>
+          </div>
+        </div> -->
+      </div>
+      <div class="col-span-12 xxl:col-span-6">
+        <div class="box" style="border-radius:20px">
+          <div class="box-header">
+            <nav class="sm:flex sm:space-x-2 space-y-2 sm:space-y-0 rtl:space-x-reverse block" aria-label="Tabs"
+              style="max-width: 250px;" role="tablist">
+              <button type="button" style="border-radius:20px"
+                class=" dark:hs-tab-active:bg-primary dark:hs-tab-active:border-primary dark:hs-tab-active:text-white py-2 px-3 inline-flex items-center w-full justify-center gap-2 text-sm font-medium text-center border text-gray-500 rounded-sm hover:text-gray-700 dark:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-gray-300 active"
+                id="profile-item-1" data-hs-tab="#profile-1" aria-controls="profile-1" role="tab">
+                ข้อมูลพนักงาน
+              </button>
+              <!-- <button type="button"
+                class="hs-tab-active:bg-primary hs-tab-active:border-primary hs-tab-active:text-white dark:hs-tab-active:bg-primary dark:hs-tab-active:border-primary dark:hs-tab-active:text-white py-2 px-3 inline-flex items-center w-full justify-center gap-2 text-sm font-medium text-center border text-gray-500 rounded-sm hover:text-gray-700 dark:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-gray-300 "
+                id="profile-item-2" data-hs-tab="#profile-2" aria-controls="profile-2" role="tab">
+                Activities
+              </button>
+              <button type="button"
+                class="hs-tab-active:bg-primary hs-tab-active:border-primary hs-tab-active:text-white dark:hs-tab-active:bg-primary dark:hs-tab-active:border-primary dark:hs-tab-active:text-white py-2 px-3 inline-flex items-center w-full justify-center gap-2 text-sm font-medium text-center border text-gray-500 rounded-sm hover:text-gray-700 dark:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-gray-300"
+                id="profile-item-3" data-hs-tab="#profile-3" aria-controls="profile-3" role="tab">
+                posts
+              </button>
+              <button type="button"
+                class="hs-tab-active:bg-primary hs-tab-active:border-primary hs-tab-active:text-white dark:hs-tab-active:bg-primary dark:hs-tab-active:border-primary dark:hs-tab-active:text-white py-2 px-3 inline-flex items-center w-full justify-center gap-2 text-sm font-medium text-center border text-gray-500 rounded-sm hover:text-gray-700 dark:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-gray-300"
+                id="profile-item-4" data-hs-tab="#profile-4" aria-controls="profile-4" role="tab">
+                Projects
+              </button> -->
+            </nav>
+          </div>
+          <div class="box-body">
+            <div id="profile-1" class="" role="tabpanel" aria-labelledby="profile-item-1">
+              <h5 class="box-title mb-3">ข้อมูลพนักงาน</h5>
+              <div class="overflow-auto">
+                <table class="ti-custom-table border-0 whitespace-nowrap">
+                  <tbody>
+                    <tr>
+                      <td class="!p-2 font-medium !text-gray-500 dark:!text-white/70">
+                        รหัสพนักงาน
+                      </td>
+                      <td class="!p-2">:</td>
+                      <td class="!p-2 !text-gray-500 dark:!text-white/70">
+                        {{employee.data.employeeId}}
+                      </td>
+                    </tr>
+                    <tr class="!border-0">
+                      <td class="!p-2 font-medium !text-gray-500 dark:!text-white/70">
+                        สถานภาพพนักงาน
+                      </td>
+                      <td class="!p-2">:</td>
+                      <td class="!p-2 !text-gray-500 dark:!text-white/70">
+                        {{findEmpStatus(employee.data.status.statusCode)}}
+                      </td>
+                    </tr>
+                    <tr class="!border-0">
+                      <td class="!p-2 font-medium !text-gray-500 dark:!text-white/70">
+                        กลุ่มพนักงาน
+                      </td>
+                      <td class="!p-2">:</td>
+                      <td class="!p-2 !text-gray-500 dark:!text-white/70">
+                        {{employee.data.empGroup.tdesc}}
+                      </td>
+                    </tr>
+                    <tr class="!border-0">
+                      <td class="!p-2 font-medium !text-gray-500 dark:!text-white/70">
+                        วันเริ่มงาน
+                      </td>
+                      <td class="!p-2">:</td>
+                      <td class="!p-2 !text-gray-500 dark:!text-white/70">
+                        {{reverseDate(employee.data.firstHireDate)}}
+                      </td>
+                    </tr>
+                    <tr class="!border-0">
+                      <td class="!p-2 font-medium !text-gray-500 dark:!text-white/70">
+                        วันที่สิ้นสุด
+                      </td>
+                      <td class="!p-2">:</td>
+                      <td class="!p-2 !text-gray-500 dark:!text-white/70">
+                        {{reverseDate(employee.data.resignDate)}}
+                      </td>
+                    </tr>
+                    <tr class="!border-0">
+                      <td class="!p-2 font-medium !text-gray-500 dark:!text-white/70">
+                        หัวหน้างาน
+                      </td>
+                      <td class="!p-2">:</td>
+                      <td class="!p-2 !text-gray-500 dark:!text-white/70">
+                        {{employee.data.boss.fname+' '+employee.data.boss.lname}}
+                      </td>
+                    </tr>
+                    <tr class="!border-0">
+                      <td class="!p-2 font-medium !text-gray-500 dark:!text-white/70">
+                        ทะเบียนฝ่าย
+                      </td>
+                      <td class="!p-2">:</td>
+                      <td class="!p-2 !text-gray-500 dark:!text-white/70">
+                        {{employee.data.bu1.tdesc}}
+                      </td>
+                    </tr>
+                    <tr class="!border-0">
+                      <td class="!p-2 font-medium !text-gray-500 dark:!text-white/70">
+                        ทะเบียนแผนก
+                      </td>
+                      <td class="!p-2">:</td>
+                      <td class="!p-2 !text-gray-500 dark:!text-white/70">
+                        {{employee.data.bu2.tdesc}}
+                      </td>
+                    </tr>
+                    <tr class="!border-0">
+                      <td class="!p-2 font-medium !text-gray-500 dark:!text-white/70">
+                        ทะเบียนส่วน
+                      </td>
+                      <td class="!p-2">:</td>
+                      <td class="!p-2 !text-gray-500 dark:!text-white/70">
+                        {{employee.data.bu3.tdesc}}
+                      </td>
+                    </tr>
+                    <tr class="!border-0">
+                      <td class="!p-2 font-medium !text-gray-500 dark:!text-white/70">
+                        ส่วนย่อย1
+                      </td>
+                      <td class="!p-2">:</td>
+                      <td class="!p-2 !text-gray-500 dark:!text-white/70">
+                        {{employee.data.bu4.tdesc}}
+                      </td>
+                    </tr>
+                    <tr class="!border-0">
+                      <td class="!p-2 font-medium !text-gray-500 dark:!text-white/70">
+                        ส่วนย่อย2
+                      </td>
+                      <td class="!p-2">:</td>
+                      <td class="!p-2 !text-gray-500 dark:!text-white/70">
+                        {{employee.data.bu5.tdesc}}
+                      </td>
+                    </tr>
+                    <tr class="!border-0">
+                      <td class="!p-2 font-medium !text-gray-500 dark:!text-white/70">
+                        ส่วนย่อย3
+                      </td>
+                      <td class="!p-2">:</td>
+                      <td class="!p-2 !text-gray-500 dark:!text-white/70">
+                        {{employee.data.bu6.tdesc}}
+                      </td>
+                    </tr>
+                    <tr class="!border-0">
+                      <td class="!p-2 font-medium !text-gray-500 dark:!text-white/70">
+                        ส่วนย่อย4
+                      </td>
+                      <td class="!p-2">:</td>
+                      <td class="!p-2 !text-gray-500 dark:!text-white/70">
+                        {{employee.data.bu7.tdesc}}
+                      </td>
+                    </tr>
+                    <tr class="!border-0">
+                      <td class="!p-2 font-medium !text-gray-500 dark:!text-white/70">
+                        ตำแหน่ง
+                      </td>
+                      <td class="!p-2">:</td>
+                      <td class="!p-2 !text-gray-500 dark:!text-white/70">
+                        {{employee.data.position.tdesc}}
+                      </td>
+                    </tr>
+                    <tr class="!border-0">
+                      <td class="!p-2 font-medium !text-gray-500 dark:!text-white/70">
+                        ลักษณะงาน
+                      </td>
+                      <td class="!p-2">:</td>
+                      <td class="!p-2 !text-gray-500 dark:!text-white/70">
+                        {{employee.data.jobCode.tdesc}}
+                      </td>
+                    </tr>
+                    <tr class="!border-0">
+                      <td class="!p-2 font-medium !text-gray-500 dark:!text-white/70">
+                        สาขา
+                      </td>
+                      <td class="!p-2">:</td>
+                      <td class="!p-2 !text-gray-500 dark:!text-white/70">
+                        {{employee.data.branch.tdesc}}
+                      </td>
+                    </tr>
+                    <tr class="!border-0">
+                      <td class="!p-2 font-medium !text-gray-500 dark:!text-white/70">
+                        ประเภทพนักงาน
+                      </td>
+                      <td class="!p-2">:</td>
+                      <td class="!p-2 !text-gray-500 dark:!text-white/70">
+                        {{employee.data.empType.tdesc}}
+                      </td>
+                    </tr>
+                    <tr class="!border-0">
+                      <td class="!p-2 font-medium !text-gray-500 dark:!text-white/70">
+                        ระดับพนักงาน (JL)
+                      </td>
+                      <td class="!p-2">:</td>
+                      <td class="!p-2 !text-gray-500 dark:!text-white/70">
+                        {{employee.data.personalLevel.tdesc}}
+                      </td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+            </div>
+            <div id="profile-2" class="hidden" role="tabpanel" aria-labelledby="profile-item-2">
+              <div class="">
+                <div class="flex flex-row">
+                  <div class="mx-auto relative">
+                    <div class="h-full w-6 flex items-center justify-center">
+                      <div class="h-full w-[3px] bg-gray-100 dark:bg-black/20 pointer-events-none"></div>
+                    </div>
+                    <div
+                      class="avatar avatar-xs absolute top-0 rounded-full bg-gray-200 shadow text-center ltr:-left-[4px] rtl:-right-[4px]">
+                      <img src="./assets/img/users/1.jpg" class="rounded-full" alt="profile-img" />
+                    </div>
+                  </div>
+                  <div class="flex w-full pb-8">
+                    <div class="ltr:ml-5 rtl:mr-5 rounded-sm ltr:mr-auto rtl:ml-auto my-auto w-full space-y-3">
+                      <div class="sm:flex">
+                        <h3 class="my-auto text-gray-500 dark:text-white/70">
+                          <span class="text-dark dark:text-white">Elida Distefa</span>
+                          added a comment to
+                          <span class="text-dark dark:text-white">Anderson Itumay</span>
+                          post
+                        </h3>
+                        <p class="my-auto ltr:ml-auto rtl:mr-auto text-gray-500 dark:text-white/70 text-xs">
+                          Today, 04:30 PM
+                        </p>
+                      </div>
+                      <div class="flex -space-x-2 rtl:space-x-reverse">
+                        <img class="avatar avatar-xs rounded-full" src="./assets/img/users/1.jpg"
+                          alt="Image Description" />
+                        <img class="avatar avatar-xs rounded-full" src="./assets/img/users/4.jpg"
+                          alt="Image Description" />
+                        <img class="avatar avatar-xs rounded-full" src="./assets/img/users/2.jpg"
+                          alt="Image Description" />
+                        <img class="avatar avatar-xs rounded-full" src="./assets/img/users/3.jpg"
+                          alt="Image Description" />
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div class="flex flex-row">
+                  <div class="mx-auto relative">
+                    <div class="h-full w-6 flex items-center justify-center">
+                      <div class="h-full w-[3px] bg-gray-100 dark:bg-black/20 pointer-events-none"></div>
+                    </div>
+                    <div
+                      class="avatar avatar-xs absolute top-0 rounded-full bg-gray-200 shadow text-center ltr:-left-[4px] rtl:-right-[4px]">
+                      <img src="./assets/img/users/3.jpg" class="rounded-full" alt="profile-img" />
+                    </div>
+                  </div>
+                  <div class="flex w-full pb-8">
+                    <div class="ltr:ml-5 rtl:mr-5 rounded-sm ltr:mr-auto rtl:ml-auto my-auto w-full space-y-3">
+                      <div class="sm:flex">
+                        <h3 class="my-auto text-gray-500 dark:text-white/70">
+                          <span class="text-dark dark:text-white">Samantha Melon</span>
+                          added a 😎 reaction to
+                          <span class="text-dark dark:text-white">Anderson Itumay</span>
+                          post
+                        </h3>
+                        <p class="my-auto ltr:ml-auto rtl:mr-auto text-gray-500 dark:text-white/70 text-xs">
+                          Today, 04:30 PM
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div class="flex flex-row">
+                  <div class="mx-auto relative">
+                    <div class="h-full w-6 flex items-center justify-center">
+                      <div class="h-full w-[3px] bg-gray-100 dark:bg-black/20 pointer-events-none"></div>
+                    </div>
+                    <div
+                      class="avatar avatar-xs absolute top-0 rounded-full bg-gray-200 shadow text-center ltr:-left-[4px] rtl:-right-[4px]">
+                      <img src="./assets/img/users/2.jpg" class="rounded-full" alt="profile-img" />
+                    </div>
+                  </div>
+                  <div class="flex w-full pb-8">
+                    <div class="ltr:ml-5 rtl:mr-5 rounded-sm ltr:mr-auto rtl:ml-auto my-auto w-full space-y-3">
+                      <div class="sm:flex">
+                        <h3 class="my-auto text-gray-500 dark:text-white/70">
+                          <span class="text-dark dark:text-white">Samantha Melon</span>
+                          like an Image
+                        </h3>
+                        <p class="my-auto ltr:ml-auto rtl:mr-auto text-gray-500 dark:text-white/70 text-xs">
+                          Today, 05:45 PM
+                        </p>
+                      </div>
+                      <div>
+                        <img src="./assets/img/gallery/2.jpg" class="avatar avatar-lg rounded-sm" alt="profile-img" />
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div class="flex flex-row">
+                  <div class="mx-auto relative">
+                    <div class="h-full w-6 flex items-center justify-center">
+                      <div class="h-full w-[3px] bg-gray-100 dark:bg-black/20 pointer-events-none"></div>
+                    </div>
+                    <div
+                      class="avatar avatar-xs absolute top-0 rounded-full bg-gray-200 shadow text-center ltr:-left-[4px] rtl:-right-[4px]">
+                      <img src="./assets/img/users/15.jpg" class="rounded-full" alt="profile-img" />
+                    </div>
+                  </div>
+                  <div class="flex w-full pb-8">
+                    <div class="ltr:ml-5 rtl:mr-5 rounded-sm ltr:mr-auto rtl:ml-auto my-auto w-full space-y-3">
+                      <div class="sm:flex">
+                        <h3 class="my-auto text-gray-500 dark:text-white/70">
+                          <span class="text-dark dark:text-white">Dennis Trexy</span>
+                          Shared an image
+                        </h3>
+                        <p class="my-auto ltr:ml-auto rtl:mr-auto text-gray-500 dark:text-white/70 text-xs">
+                          yesterday, 10:20 am
+                        </p>
+                      </div>
+                      <div class="space-y-3">
+                        <p class="text-xs textbg-gray-500">
+                          Lorem ipsum dolor sit amet consectetur adipisicing
+                          elit. Nostrum sit consequuntur quia aperiam quibusdam
+                          rerum ut! Id ducimus nobis rerum modi veniam odit
+                          totam rem asperiores adipisci, sed quia voluptas?
+                        </p>
+                        <img src="./assets/img/gallery/5.jpg" class="avatar avatar-lg rounded-sm" alt="profile-img" />
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div class="flex flex-row">
+                  <div class="mx-auto relative">
+                    <div class="h-full w-6 flex items-center justify-center">
+                      <div class="h-full w-[3px] bg-gray-100 dark:bg-black/20 pointer-events-none"></div>
+                    </div>
+                    <div
+                      class="avatar avatar-xs absolute top-0 rounded-full bg-gray-200 shadow text-center ltr:-left-[4px] rtl:-right-[4px]">
+                      <img src="./assets/img/users/21.jpg" class="rounded-full" alt="profile-img" />
+                    </div>
+                  </div>
+                  <div class="flex w-full pb-8">
+                    <div class="ltr:ml-5 rtl:mr-5 rounded-sm ltr:mr-auto rtl:ml-auto my-auto w-full space-y-3">
+                      <div class="sm:flex">
+                        <h3 class="my-auto text-gray-500 dark:text-white/70">
+                          <span class="text-dark dark:text-white">Anesthesia</span>
+                          commented on today's meeting
+                        </h3>
+                        <p class="my-auto ltr:ml-auto rtl:mr-auto text-gray-500 dark:text-white/70 text-xs">
+                          yesterday, 05:06 pm
+                        </p>
+                      </div>
+                      <div
+                        class="border border-gray-200 bg-gray-50 dark:bg-black/20 dark:border-white/10 p-4 rounded-sm">
+                        <p class="text-xs textbg-gray-500">
+                          Lorem ipsum dolor sit amet consectetur adipisicing
+                          elit. Nostrum sit consequuntur quia aperiam quibusdam
+                          rerum ut! Id ducimus nobis rerum modi veniam odit
+                          totam rem asperiores adipisci, sed quia voluptas?
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div class="flex flex-row">
+                  <div class="mx-auto relative">
+                    <div class="h-full w-6 flex items-center justify-center">
+                      <div class="h-full w-[3px] bg-gray-100 dark:bg-black/20 pointer-events-none"></div>
+                    </div>
+                    <div
+                      class="avatar avatar-xs absolute top-0 rounded-full bg-gray-200 dark:bg-bgdark2 shadow text-center ltr:-left-[4px] rtl:-right-[4px] leading-[2.3]">
+                      H
+                    </div>
+                  </div>
+                  <div class="flex w-full pb-8">
+                    <div class="ltr:ml-5 rtl:mr-5 rounded-sm ltr:mr-auto rtl:ml-auto my-auto w-full space-y-3">
+                      <div class="sm:flex">
+                        <h3 class="my-auto text-gray-500 dark:text-white/70">
+                          <span class="text-dark dark:text-white">Harvey Mattos</span>
+                          Followed You
+                        </h3>
+                        <p class="my-auto ltr:ml-auto rtl:mr-auto text-gray-500 dark:text-white/70 text-xs">
+                          03-12-20222, 12:06 pm
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div class="flex flex-row">
+                  <div class="mx-auto relative">
+                    <div class="h-full w-6 flex items-center justify-center">
+                      <div class="h-full w-[3px] bg-gray-100 dark:bg-black/20 pointer-events-none"></div>
+                    </div>
+                    <div
+                      class="avatar avatar-xs absolute top-0 rounded-full bg-gray-200 shadow text-center ltr:-left-[4px] rtl:-right-[4px]">
+                      <img src="./assets/img/users/15.jpg" class="rounded-full" alt="profile-img" />
+                    </div>
+                  </div>
+                  <div class="flex w-full">
+                    <div class="ltr:ml-5 rtl:mr-5 rounded-sm ltr:mr-auto rtl:ml-auto my-auto w-full space-y-3">
+                      <div class="sm:flex">
+                        <h3 class="my-auto text-gray-500 dark:text-white/70">
+                          <span class="text-dark dark:text-white">Anesthesia</span>
+                          5 Days left for Montly submission of progress report
+                        </h3>
+                        <p class="my-auto ltr:ml-auto rtl:mr-auto text-gray-500 dark:text-white/70 text-xs">
+                          02-12-2022, 6:20 pm
+                        </p>
+                      </div>
+                      <div
+                        class="border border-gray-200 bg-gray-50 dark:bg-black/20 dark:border-white/10 p-4 rounded-sm">
+                        <p class="text-xs textbg-gray-500 mb-3">
+                          Lorem ipsum dolor sit amet consectetur adipisicing
+                          elit. Nostrum sit consequuntur quia aperiam quibusdam
+                          rerum ut! Id ducimus nobis rerum modi veniam odit
+                          totam rem asperiores adipisci, sed quia voluptas?
+                        </p>
+                        <p class="text-xs textbg-gray-500">
+                          Lorem ipsum dolor sit amet consectetur adipisicing
+                          elit. Nostrum sit consequuntur quia aperiam quibusdam
+                          rerum ut! Id ducimus nobis rerum modi veniam odit
+                          totam rem asperiores adipisci, sed quia voluptas?
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div id="profile-3" class="hidden text-center" role="tabpanel" aria-labelledby="profile-item-3">
+              <div class="box text-start">
+                <div class="box-body p-0">
+                  <div
+                    class="sm:flex sm:space-x-3 space-y-2 sm:space-y-0 p-6 border-b border-gray-200 dark:border-white/10 rtl:space-x-reverse">
+                    <img class="avatar avatar-sm rounded-full" src="./assets/img/users/1.jpg" alt="profile-img" />
+                    <div class="relative w-full">
+                      <input type="text"
+                        class="ti-form-input ltr:pr-16 rtl:pl-16 rounded-full shadow-sm focus:z-10 bg-gray-100 dark:bg-black/20"
+                        placeholder="What's On Your Mind .........." />
+                      <div class="absolute inset-y-0 ltr:right-8 rtl:left-8 flex items-center z-20 ltr:pr-4 rtl:pl-4">
+                        <a aria-label="anchor" href="javascript:void(0);"><i
+                            class="ri ri-emotion-line text-gray-500 dark:text-white/70 text-lg leading-none"></i></a>
+                      </div>
+                      <div class="absolute inset-y-0 ltr:right-0 rtl:left-0 flex items-center z-20 ltr:pr-4 rtl:pl-4">
+                        <a aria-label="anchor" href="javascript:void(0);"><i
+                            class="ri ri-pencil-line text-gray-500 dark:text-white/70 text-lg leading-none"></i></a>
+                      </div>
+                    </div>
+                  </div>
+                  <ul class="sm:flex sm:space-x-5 space-y-2 sm:space-y-0 flex-row p-6 rtl:space-x-reverse">
+                    <li>
+                      <a class="flex space-x-1 rtl:space-x-reverse" href="javascript:void(0);">
+                        <i class="ri ri-image-2-line text-lg leading-none text-primary"></i>
+                        <span class="text-gray-500 dark:text-white/70">
+                          Image
+                        </span>
+                      </a>
+                    </li>
+                    <li>
+                      <a class="flex space-x-1 rtl:space-x-reverse" href="javascript:void(0);">
+                        <i class="ri ri-vidicon-line text-lg leading-none text-secondary"></i>
+                        <span class="text-gray-500 dark:text-white/70">
+                          Video
+                        </span>
+                      </a>
+                    </li>
+                    <li>
+                      <a class="flex space-x-1 rtl:space-x-reverse" href="javascript:void(0);">
+                        <i class="ri ri-attachment-2 text-lg leading-none text-warning"></i>
+                        <span class="text-gray-500 dark:text-white/70">
+                          Attachment
+                        </span>
+                      </a>
+                    </li>
+                    <li>
+                      <a class="flex space-x-1 rtl:space-x-reverse" href="javascript:void(0);">
+                        <i class="ri ri-hashtag text-lg leading-none text-danger"></i>
+                        <span class="text-gray-500 dark:text-white/70">
+                          Hashtag
+                        </span>
+                      </a>
+                    </li>
+                    <li class="hidden md:flex">
+                      <a class="flex space-x-1 rtl:space-x-reverse" href="javascript:void(0);">
+                        <i class="ri ri-at-line text-lg leading-none text-info"></i>
+                        <span class="text-gray-500 dark:text-white/70">
+                          Mention
+                        </span>
+                      </a>
+                    </li>
+                  </ul>
+                </div>
+                <div class="box-footer">
+                  <div class="Profile-post-footer flex space-x-5 rtl:space-x-reverse justify-end">
+                    <ng-select class="ti-form-select" data-trigger placeholder="Public">
+                      <ng-option value="1">Only Me</ng-option>
+                      <ng-option value="2" selected>Public</ng-option>
+                      <ng-option value="3">Private</ng-option>
+                      <ng-option value="4">Friends Only</ng-option>
+                      <ng-option value="5">Friends Of Friends</ng-option>
+                    </ng-select>
+                    <a href="javascript:void(0);" class="m-3 ti-btn ti-btn-primary">post</a>
+                  </div>
+                </div>
+              </div>
+              <div class="box p-5 text-start">
+                <div class="sm:flex flex-row space-y-2 sm:space-y-0">
+                  <img class="sm:w-1/4 rounded-sm border border-gray-200 dark:border-white/10"
+                    src="./assets/img/gallery/9.jpg" alt="Image Description" />
+                  <div class="box-body ltr:sm:pl-5 rtl:sm:pr-5 px-0 py-0 space-y-4 my-auto w-full">
+                    <h5 class="font-semibold mb-0 text-base leading-none">
+                      Lorem ipsum dolor sit amet consectetur adipisicing.
+                    </h5>
+                    <div class="flex">
+                      <a href="javascript:void(0);"
+                        class="text-xs leading-[0] inline-flex items-center text-gray-500 dark:text-white/70 rtl:space-x-reverse rounded-full bg-gray-100 px-3 py-1 font-normal hover:bg-gray-300 focus:bg-gary-800 dark:bg-black/20 dark:hover:bg-bgdark"><i
+                          class="text-xs ri ri-heart-line ltr:mr-1 rtl:ml-1"></i><span>30</span></a>
+                      <a href="javascript:void(0);"
+                        class="text-xs leading-[0] inline-flex items-center text-gray-500 dark:text-white/70 ltr:ml-2 rtl:mr-2 rtl:space-x-reverse rounded-full bg-gray-100 px-3 py-1 font-normal hover:bg-gray-300 focus:bg-gary-800 dark:bg-black/20 dark:hover:bg-bgdark"><i
+                          class="text-xs ri ri-thumb-up-line ltr:mr-1 rtl:ml-1"></i><span>25k</span></a>
+                    </div>
+                    <div class="md:flex md:justify-between space-y-2 md:space-y-0">
+                      <div class="flex items-center space-x-3 rtl:space-x-reverse">
+                        <div class="flex">
+                          <img class="avatar avatar-xs ring-0 rounded-full" src="./assets/img/users/1.jpg"
+                            alt="avatar" />
+                        </div>
+                        <div>
+                          <p class="text-slate-700 font-semibold text-sm dark:text-white">
+                            Json Taylor
+                          </p>
+                          <p class="text-xs text-gray-500 dark:text-white/70">
+                            20 min ago
+                          </p>
+                        </div>
+                      </div>
+                      <div class="flex -space-x-2 rtl:space-x-reverse">
+                        <img class="avatar avatar-xs rounded-full" src="./assets/img/users/15.jpg"
+                          alt="Image Description" />
+                        <img class="avatar avatar-xs rounded-full" src="./assets/img/users/4.jpg"
+                          alt="Image Description" />
+                        <img class="avatar avatar-xs rounded-full" src="./assets/img/users/12.jpg"
+                          alt="Image Description" />
+                        <img class="avatar avatar-xs rounded-full" src="./assets/img/users/3.jpg"
+                          alt="Image Description" />
+                        <span
+                          class="inline-flex items-center justify-center avatar avatar-xs rounded-full bg-gray-100 border-2 border-gray-200 dark:bg-black/20 dark:border-white/10">
+                          <span class="font-medium text-gray-500 leading-none dark:text-white/70">2+</span>
+                        </span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="box p-5 text-start">
+                <div class="sm:flex flex-row space-y-2 sm:space-y-0">
+                  <img class="sm:w-1/4 rounded-sm border border-gray-200 dark:border-white/10"
+                    src="./assets/img/gallery/3.jpg" alt="Image Description" />
+                  <div class="box-body ltr:sm:pl-5 rtl:sm:pr-5 px-0 py-0 space-y-4 my-auto w-full">
+                    <h5 class="font-semibold mb-0 text-base leading-none">
+                      Deserunt dolore ad incididunt excepteur excepteur Lorem
+                      amet excepteur.
+                    </h5>
+                    <div class="flex">
+                      <a href="javascript:void(0);"
+                        class="text-xs leading-[0] inline-flex items-center text-gray-500 dark:text-white/70 rtl:space-x-reverse rounded-full bg-gray-100 px-3 py-1 font-normal hover:bg-gray-300 focus:bg-gary-800 dark:bg-black/20 dark:hover:bg-bgdark"><i
+                          class="text-xs ri ri-heart-line ltr:mr-1 rtl:ml-1"></i><span>30</span></a>
+                      <a href="javascript:void(0);"
+                        class="text-xs leading-[0] inline-flex items-center text-gray-500 dark:text-white/70 ltr:ml-2 rtl:mr-2 rtl:space-x-reverse rounded-full bg-gray-100 px-3 py-1 font-normal hover:bg-gray-300 focus:bg-gary-800 dark:bg-black/20 dark:hover:bg-bgdark"><i
+                          class="text-xs ri ri-thumb-up-line ltr:mr-1 rtl:ml-1"></i><span>25k</span></a>
+                    </div>
+                    <div class="md:flex md:justify-between space-y-2 md:space-y-0">
+                      <div class="flex items-center space-x-3 rtl:space-x-reverse">
+                        <div class="flex">
+                          <img class="avatar avatar-xs ring-0 rounded-full" src="./assets/img/users/3.jpg"
+                            alt="avatar" />
+                        </div>
+                        <div>
+                          <p class="text-slate-700 font-semibold text-sm dark:text-white">
+                            Sujika
+                          </p>
+                          <p class="text-xs text-gray-500 dark:text-white/70">
+                            5 hrs ago
+                          </p>
+                        </div>
+                      </div>
+                      <div class="flex -space-x-2 rtl:space-x-reverse">
+                        <img class="avatar avatar-xs rounded-full" src="./assets/img/users/15.jpg"
+                          alt="Image Description" />
+                        <img class="avatar avatar-xs rounded-full" src="./assets/img/users/4.jpg"
+                          alt="Image Description" />
+                        <img class="avatar avatar-xs rounded-full" src="./assets/img/users/12.jpg"
+                          alt="Image Description" />
+                        <img class="avatar avatar-xs rounded-full" src="./assets/img/users/13.jpg"
+                          alt="Image Description" />
+                        <span
+                          class="inline-flex items-center justify-center avatar avatar-xs rounded-full bg-gray-100 border-2 border-gray-200 dark:bg-black/20 dark:border-white/10">
+                          <span class="font-medium text-gray-500 leading-none dark:text-white/70">4+</span>
+                        </span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="box p-5 text-start">
+                <div class="sm:flex flex-row space-y-2 sm:space-y-0">
+                  <img class="sm:w-1/4 rounded-sm border border-gray-200 dark:border-white/10"
+                    src="./assets/img/gallery/4.jpg" alt="Image Description" />
+                  <div class="box-body ltr:sm:pl-5 rtl:sm:pr-5 px-0 py-0 space-y-4 my-auto w-full">
+                    <h5 class="font-semibold mb-0 text-base leading-none">
+                      Minim Lorem sunt in sunt adipisicing anim est enim duis...
+                    </h5>
+                    <div class="flex">
+                      <a href="javascript:void(0);"
+                        class="text-xs leading-[0] inline-flex items-center text-gray-500 dark:text-white/70 ltr:ml-2 rtl:mr-2 rtl:space-x-reverse rounded-full bg-gray-100 px-3 py-1 font-normal hover:bg-gray-300 focus:bg-gary-800 dark:bg-black/20 dark:hover:bg-bgdark"><i
+                          class="text-xs ri ri-heart-line ltr:mr-1 rtl:ml-1"></i><span>30</span></a>
+                      <a href="javascript:void(0);"
+                        class="text-xs leading-[0] inline-flex items-center text-gray-500 dark:text-white/70 ltr:ml-2 rtl:mr-2 rtl:space-x-reverse rounded-full bg-gray-100 px-3 py-1 font-normal hover:bg-gray-300 focus:bg-gary-800 dark:bg-black/20 dark:hover:bg-bgdark"><i
+                          class="text-xs ri ri-thumb-up-line ltr:mr-1 rtl:ml-1"></i><span>25k</span></a>
+                    </div>
+                    <div class="md:flex md:justify-between space-y-2 md:space-y-0">
+                      <div class="flex items-center space-x-3 rtl:space-x-reverse">
+                        <div class="flex">
+                          <img class="avatar avatar-xs ring-0 rounded-full" src="./assets/img/users/13.jpg"
+                            alt="avatar" />
+                        </div>
+                        <div>
+                          <p class="text-slate-700 font-semibold text-sm dark:text-white">
+                            King Berunda
+                          </p>
+                          <p class="text-xs text-gray-500 dark:text-white/70">
+                            Yesterday, 10:27AM
+                          </p>
+                        </div>
+                      </div>
+                      <div class="flex -space-x-2 rtl:space-x-reverse">
+                        <img class="avatar avatar-xs rounded-full" src="./assets/img/users/15.jpg"
+                          alt="Image Description" />
+                        <img class="avatar avatar-xs rounded-full" src="./assets/img/users/4.jpg"
+                          alt="Image Description" />
+                        <img class="avatar avatar-xs rounded-full" src="./assets/img/users/12.jpg"
+                          alt="Image Description" />
+                        <img class="avatar avatar-xs rounded-full" src="./assets/img/users/3.jpg"
+                          alt="Image Description" />
+                        <span
+                          class="inline-flex items-center justify-center avatar avatar-xs rounded-full bg-gray-100 border-2 border-gray-200 dark:bg-black/20 dark:border-white/10">
+                          <span class="font-medium text-gray-500 leading-none dark:text-white/70">4+</span>
+                        </span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="box p-5 text-start">
+                <div class="sm:flex flex-row space-y-2 sm:space-y-0">
+                  <img class="sm:w-1/4 rounded-sm border border-gray-200 dark:border-white/10"
+                    src="./assets/img/gallery/5.jpg" alt="Image Description" />
+                  <div class="box-body ltr:sm:pl-5 rtl:sm:pr-5 px-0 py-0 space-y-4 my-auto w-full">
+                    <h5 class="font-semibold mb-0 text-base leading-none">
+                      Minim Lorem sunt in sunt adipisicing anim est enim duis...
+                    </h5>
+                    <div class="flex">
+                      <a href="javascript:void(0);"
+                        class="text-xs leading-[0] inline-flex items-center text-gray-500 dark:text-white/70 ltr:ml-2 rtl:mr-2 rtl:space-x-reverse rounded-full bg-gray-100 px-3 py-1 font-normal hover:bg-gray-300 focus:bg-gary-800 dark:bg-black/20 dark:hover:bg-bgdark"><i
+                          class="text-xs ri ri-heart-line ltr:mr-1 rtl:ml-1"></i><span>30</span></a>
+                      <a href="javascript:void(0);"
+                        class="text-xs leading-[0] inline-flex items-center text-gray-500 dark:text-white/70 ltr:ml-2 rtl:mr-2 rtl:space-x-reverse rounded-full bg-gray-100 px-3 py-1 font-normal hover:bg-gray-300 focus:bg-gary-800 dark:bg-black/20 dark:hover:bg-bgdark"><i
+                          class="text-xs ri ri-thumb-up-line ltr:mr-1 rtl:ml-1"></i><span>25k</span></a>
+                    </div>
+                    <div class="md:flex md:justify-between space-y-2 md:space-y-0">
+                      <div class="flex items-center space-x-3 rtl:space-x-reverse">
+                        <div class="flex">
+                          <img class="avatar avatar-xs ring-0 rounded-full" src="./assets/img/users/15.jpg"
+                            alt="avatar" />
+                        </div>
+                        <div>
+                          <p class="text-slate-700 font-semibold text-sm dark:text-white">
+                            Michael Jeremy
+                          </p>
+                          <p class="text-xs text-gray-500 dark:text-white/70">
+                            08 Aug 2022
+                          </p>
+                        </div>
+                      </div>
+                      <div class="flex -space-x-2 rtl:space-x-reverse">
+                        <img class="avatar avatar-xs rounded-full" src="./assets/img/users/15.jpg"
+                          alt="Image Description" />
+                        <img class="avatar avatar-xs rounded-full" src="./assets/img/users/4.jpg"
+                          alt="Image Description" />
+                        <img class="avatar avatar-xs rounded-full" src="./assets/img/users/12.jpg"
+                          alt="Image Description" />
+                        <img class="avatar avatar-xs rounded-full" src="./assets/img/users/3.jpg"
+                          alt="Image Description" />
+                        <span
+                          class="inline-flex items-center justify-center avatar avatar-xs rounded-full bg-gray-100 border-2 border-gray-200 dark:bg-black/20 dark:border-white/10">
+                          <span class="font-medium text-gray-500 leading-none dark:text-white/70">4+</span>
+                        </span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <a href="javascript:void(0);" class="ti-btn ti-btn-primary py-1 px-2 m-0">View All</a>
+            </div>
+            <div id="profile-4" class="hidden text-center" role="tabpanel" aria-labelledby="profile-item-4">
+              <div class="sm:grid grid-cols-12 gap-x-6 space-y-6 sm:space-y-0 text-start">
+                <div class="md:col-span-6 col-span-12">
+                  <div class="box">
+                    <div class="box-body space-y-3">
+                      <div class="sm:flex sm:space-x-3 sm:space-y-0 space-y-2 rtl:space-x-reverse">
+                        <img src="./assets/img/logos/2.png"
+                          class="p-2 avatar w-14 h-14 bg-gray-100 dark:bg-black/20 rounded-sm" alt="profile-img" />
+                        <div class="my-auto space-y-2">
+                          <h5 class="text-sm font-semibold">
+                            Tailwind Ui Web Application
+                          </h5>
+                          <div class="flex -space-x-2 rtl:space-x-reverse">
+                            <img class="avatar w-6 h-6 rounded-full" src="./assets/img/users/15.jpg"
+                              alt="Image Description" />
+                            <img class="avatar w-6 h-6 rounded-full" src="./assets/img/users/4.jpg"
+                              alt="Image Description" />
+                            <img class="avatar w-6 h-6 rounded-full" src="./assets/img/users/12.jpg"
+                              alt="Image Description" />
+                            <span
+                              class="inline-flex items-center justify-center avatar w-6 h-6 rounded-full bg-gray-100 border-2 border-gray-200 dark:bg-black/20 dark:border-white/10">
+                              <span class="font-medium text-gray-500 leading-none dark:text-white/70">2+</span>
+                            </span>
+                          </div>
+                        </div>
+                      </div>
+                      <div class="sm:flex sm:space-y-0 space-y-2 justify-between">
+                        <span class="badge bg-success/10 text-success rounded-sm mb-0">
+                          <span class="w-1.5 h-1.5 inline-block bg-success/40 rounded-full"></span>
+                          Completed
+                        </span>
+                        <p class="text-gray-500 dark:text-white/70 text-sm font-medium my-auto whitespace-nowrap">
+                          15-12-2022
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div class="md:col-span-6 col-span-12">
+                  <div class="box">
+                    <div class="box-body space-y-3">
+                      <div class="sm:flex sm:space-x-3 sm:space-y-0 space-y-2 rtl:space-x-reverse">
+                        <img src="./assets/img/logos/1.png"
+                          class="p-2 avatar w-14 h-14 bg-gray-100 dark:bg-black/20 rounded-sm" alt="profile-img" />
+                        <div class="my-auto space-y-2">
+                          <h5 class="text-sm font-semibold">
+                            Synto Ui Mobile Application
+                          </h5>
+                          <div class="flex -space-x-2 rtl:space-x-reverse">
+                            <img class="avatar w-6 h-6 rounded-full" src="./assets/img/users/15.jpg"
+                              alt="Image Description" />
+                            <img class="avatar w-6 h-6 rounded-full" src="./assets/img/users/4.jpg"
+                              alt="Image Description" />
+                            <img class="avatar w-6 h-6 rounded-full" src="./assets/img/users/3.jpg"
+                              alt="Image Description" />
+                            <img class="avatar w-6 h-6 rounded-full" src="./assets/img/users/12.jpg"
+                              alt="Image Description" />
+                            <span
+                              class="inline-flex items-center justify-center avatar w-6 h-6 rounded-full bg-gray-100 border-2 border-gray-200 dark:bg-black/20 dark:border-white/10">
+                              <span class="font-medium text-gray-500 leading-none dark:text-white/70">4+</span>
+                            </span>
+                          </div>
+                        </div>
+                      </div>
+                      <div class="sm:flex sm:space-y-0 space-y-2 justify-between">
+                        <span class="badge bg-warning/10 text-warning rounded-sm mb-0">
+                          <span class="w-1.5 h-1.5 inline-block bg-warning/40 rounded-full"></span>
+                          Inprogress
+                        </span>
+                        <p class="text-gray-500 dark:text-white/70 text-sm font-medium my-auto whitespace-nowrap">
+                          10-12-2022
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div class="md:col-span-6 col-span-12">
+                  <div class="box">
+                    <div class="box-body space-y-3">
+                      <div class="sm:flex sm:space-x-3 sm:space-y-0 space-y-2 rtl:space-x-reverse">
+                        <img src="./assets/img/logos/3.png"
+                          class="p-2 avatar w-14 h-14 bg-gray-100 dark:bg-black/20 rounded-sm" alt="profile-img" />
+                        <div class="my-auto space-y-2">
+                          <h5 class="text-sm font-semibold">
+                            Valex Laravel Project
+                          </h5>
+                          <div class="flex -space-x-2 rtl:space-x-reverse">
+                            <img class="avatar w-6 h-6 rounded-full" src="./assets/img/users/15.jpg"
+                              alt="Image Description" />
+                            <img class="avatar w-6 h-6 rounded-full" src="./assets/img/users/4.jpg"
+                              alt="Image Description" />
+                            <img class="avatar w-6 h-6 rounded-full" src="./assets/img/users/3.jpg"
+                              alt="Image Description" />
+                            <img class="avatar w-6 h-6 rounded-full" src="./assets/img/users/12.jpg"
+                              alt="Image Description" />
+                            <span
+                              class="inline-flex items-center justify-center avatar w-6 h-6 rounded-full bg-gray-100 border-2 border-gray-200 dark:bg-black/20 dark:border-white/10">
+                              <span class="font-medium text-gray-500 leading-none dark:text-white/70">4+</span>
+                            </span>
+                          </div>
+                        </div>
+                      </div>
+                      <div class="sm:flex sm:space-y-0 space-y-2 justify-between">
+                        <span class="badge bg-warning/10 text-warning rounded-sm mb-0">
+                          <span class="w-1.5 h-1.5 inline-block bg-warning/40 rounded-full"></span>
+                          Inprogress
+                        </span>
+                        <p class="text-gray-500 dark:text-white/70 text-sm font-medium my-auto whitespace-nowrap">
+                          10-12-2022
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div class="md:col-span-6 col-span-12">
+                  <div class="box">
+                    <div class="box-body space-y-3">
+                      <div class="sm:flex sm:space-x-3 sm:space-y-0 space-y-2 rtl:space-x-reverse">
+                        <img src="./assets/img/logos/4.png"
+                          class="p-2 avatar w-14 h-14 bg-gray-100 dark:bg-black/20 rounded-sm" alt="profile-img" />
+                        <div class="my-auto space-y-2">
+                          <h5 class="text-sm font-semibold">
+                            Zanex Laravel Project
+                          </h5>
+                          <div class="flex -space-x-2 rtl:space-x-reverse">
+                            <img class="avatar w-6 h-6 rounded-full" src="./assets/img/users/15.jpg"
+                              alt="Image Description" />
+                            <img class="avatar w-6 h-6 rounded-full" src="./assets/img/users/4.jpg"
+                              alt="Image Description" />
+                            <img class="avatar w-6 h-6 rounded-full" src="./assets/img/users/3.jpg"
+                              alt="Image Description" />
+                            <img class="avatar w-6 h-6 rounded-full" src="./assets/img/users/12.jpg"
+                              alt="Image Description" />
+                            <span
+                              class="inline-flex items-center justify-center avatar w-6 h-6 rounded-full bg-gray-100 border-2 border-gray-200 dark:bg-black/20 dark:border-white/10">
+                              <span class="font-medium text-gray-500 leading-none dark:text-white/70">4+</span>
+                            </span>
+                          </div>
+                        </div>
+                      </div>
+                      <div class="sm:flex sm:space-y-0 space-y-2 justify-between">
+                        <span class="badge bg-primary/10 text-primary rounded-sm mb-0 whitespace-nowrap">
+                          <span class="w-1.5 h-1.5 inline-block bg-primary/40 rounded-full"></span>
+                          New Project
+                        </span>
+                        <p class="text-gray-500 dark:text-white/70 text-sm font-medium my-auto whitespace-nowrap">
+                          05-12-2022
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div class="md:col-span-6 col-span-12">
+                  <div class="box">
+                    <div class="box-body space-y-3">
+                      <div class="sm:flex sm:space-x-3 sm:space-y-0 space-y-2 rtl:space-x-reverse">
+                        <img src="./assets/img/logos/5.png"
+                          class="p-2 avatar w-14 h-14 bg-gray-100 dark:bg-black/20 rounded-sm" alt="profile-img" />
+                        <div class="my-auto space-y-2">
+                          <h5 class="text-sm font-semibold">
+                            Adminor Laravel Project
+                          </h5>
+                          <div class="flex -space-x-2 rtl:space-x-reverse">
+                            <img class="avatar w-6 h-6 rounded-full" src="./assets/img/users/15.jpg"
+                              alt="Image Description" />
+                            <img class="avatar w-6 h-6 rounded-full" src="./assets/img/users/4.jpg"
+                              alt="Image Description" />
+                            <img class="avatar w-6 h-6 rounded-full" src="./assets/img/users/3.jpg"
+                              alt="Image Description" />
+                            <img class="avatar w-6 h-6 rounded-full" src="./assets/img/users/12.jpg"
+                              alt="Image Description" />
+                            <span
+                              class="inline-flex items-center justify-center avatar w-6 h-6 rounded-full bg-gray-100 border-2 border-gray-200 dark:bg-black/20 dark:border-white/10">
+                              <span class="font-medium text-gray-500 leading-none dark:text-white/70">4+</span>
+                            </span>
+                          </div>
+                        </div>
+                      </div>
+                      <div class="sm:flex sm:space-y-0 space-y-2 justify-between">
+                        <span class="badge bg-primary/10 text-primary rounded-sm mb-0 whitespace-nowrap">
+                          <span class="w-1.5 h-1.5 inline-block bg-primary/40 rounded-full"></span>
+                          New Project
+                        </span>
+                        <p class="text-gray-500 dark:text-white/70 text-sm font-medium my-auto whitespace-nowrap">
+                          05-12-2022
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div class="md:col-span-6 col-span-12">
+                  <div class="box">
+                    <div class="box-body space-y-3">
+                      <div class="sm:flex sm:space-x-3 sm:space-y-0 space-y-2 rtl:space-x-reverse">
+                        <img src="./assets/img/logos/6.png"
+                          class="p-2 avatar w-14 h-14 bg-gray-100 dark:bg-black/20 rounded-sm" alt="profile-img" />
+                        <div class="my-auto space-y-2">
+                          <h5 class="text-sm font-semibold">Client Project</h5>
+                          <div class="flex -space-x-2 rtl:space-x-reverse">
+                            <img class="avatar w-6 h-6 rounded-full" src="./assets/img/users/15.jpg"
+                              alt="Image Description" />
+                            <img class="avatar w-6 h-6 rounded-full" src="./assets/img/users/4.jpg"
+                              alt="Image Description" />
+                            <img class="avatar w-6 h-6 rounded-full" src="./assets/img/users/3.jpg"
+                              alt="Image Description" />
+                            <img class="avatar w-6 h-6 rounded-full" src="./assets/img/users/12.jpg"
+                              alt="Image Description" />
+                            <span
+                              class="inline-flex items-center justify-center avatar w-6 h-6 rounded-full bg-gray-100 border-2 border-gray-200 dark:bg-black/20 dark:border-white/10">
+                              <span class="font-medium text-gray-500 leading-none dark:text-white/70">4+</span>
+                            </span>
+                          </div>
+                        </div>
+                      </div>
+                      <div class="sm:flex sm:space-y-0 space-y-2 justify-between">
+                        <span class="badge bg-danger/10 text-danger rounded-sm mb-0">
+                          <span class="w-1.5 h-1.5 inline-block bg-danger/40 rounded-full"></span>
+                          Aborted
+                        </span>
+                        <p class="text-gray-500 dark:text-white/70 text-sm font-medium my-auto whitespace-nowrap">
+                          05-12-2022
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div class="md:col-span-6 col-span-12">
+                  <div class="box">
+                    <div class="box-body space-y-3">
+                      <div class="sm:flex sm:space-x-3 sm:space-y-0 space-y-2 rtl:space-x-reverse">
+                        <img src="./assets/img/logos/7.png"
+                          class="p-2 avatar w-14 h-14 bg-gray-100 dark:bg-black/20 rounded-sm" alt="profile-img" />
+                        <div class="my-auto space-y-2">
+                          <h5 class="text-sm font-semibold">React Project</h5>
+                          <div class="flex -space-x-2 rtl:space-x-reverse">
+                            <img class="avatar w-6 h-6 rounded-full" src="./assets/img/users/15.jpg"
+                              alt="Image Description" />
+                            <img class="avatar w-6 h-6 rounded-full" src="./assets/img/users/4.jpg"
+                              alt="Image Description" />
+                            <img class="avatar w-6 h-6 rounded-full" src="./assets/img/users/3.jpg"
+                              alt="Image Description" />
+                            <img class="avatar w-6 h-6 rounded-full" src="./assets/img/users/12.jpg"
+                              alt="Image Description" />
+                            <span
+                              class="inline-flex items-center justify-center avatar w-6 h-6 rounded-full bg-gray-100 border-2 border-gray-200 dark:bg-black/20 dark:border-white/10">
+                              <span class="font-medium text-gray-500 leading-none dark:text-white/70">5+</span>
+                            </span>
+                          </div>
+                        </div>
+                      </div>
+                      <div class="sm:flex sm:space-y-0 space-y-2 justify-between">
+                        <span class="badge bg-info/10 text-info rounded-sm mb-0">
+                          <span class="w-1.5 h-1.5 inline-block bg-info/40 rounded-full"></span>
+                          Approved
+                        </span>
+                        <p class="text-gray-500 dark:text-white/70 text-sm font-medium my-auto whitespace-nowrap">
+                          05-12-2022
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div class="md:col-span-6 col-span-12">
+                  <div class="box">
+                    <div class="box-body space-y-3">
+                      <div class="sm:flex sm:space-x-3 sm:space-y-0 space-y-2 rtl:space-x-reverse">
+                        <img src="./assets/img/logos/8.png"
+                          class="p-2 avatar w-14 h-14 bg-gray-100 dark:bg-black/20 rounded-sm" alt="profile-img" />
+                        <div class="my-auto space-y-2">
+                          <h5 class="text-sm font-semibold">Angular Project</h5>
+                          <div class="flex -space-x-2 rtl:space-x-reverse">
+                            <img class="avatar w-6 h-6 rounded-full" src="./assets/img/users/15.jpg"
+                              alt="Image Description" />
+                            <img class="avatar w-6 h-6 rounded-full" src="./assets/img/users/4.jpg"
+                              alt="Image Description" />
+                            <img class="avatar w-6 h-6 rounded-full" src="./assets/img/users/3.jpg"
+                              alt="Image Description" />
+                            <img class="avatar w-6 h-6 rounded-full" src="./assets/img/users/12.jpg"
+                              alt="Image Description" />
+                            <span
+                              class="inline-flex items-center justify-center avatar w-6 h-6 rounded-full bg-gray-100 border-2 border-gray-200 dark:bg-black/20 dark:border-white/10">
+                              <span class="font-medium text-gray-500 leading-none dark:text-white/70">5+</span>
+                            </span>
+                          </div>
+                        </div>
+                      </div>
+                      <div class="sm:flex sm:space-y-0 space-y-2 justify-between">
+                        <span class="badge bg-primary/10 text-primary rounded-sm mb-0 whitespace-nowrap">
+                          <span class="w-1.5 h-1.5 inline-block bg-primary/40 rounded-full"></span>
+                          New Project
+                        </span>
+                        <p class="text-gray-500 dark:text-white/70 text-sm font-medium my-auto whitespace-nowrap">
+                          05-12-2022
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div class="md:col-span-6 col-span-12">
+                  <div class="box">
+                    <div class="box-body space-y-3">
+                      <div class="sm:flex sm:space-x-3 sm:space-y-0 space-y-2 rtl:space-x-reverse">
+                        <img src="./assets/img/logos/9.png"
+                          class="p-2 avatar w-14 h-14 bg-gray-100 dark:bg-black/20 rounded-sm" alt="profile-img" />
+                        <div class="my-auto space-y-2">
+                          <h5 class="text-sm font-semibold">Vue Project</h5>
+                          <div class="flex -space-x-2 rtl:space-x-reverse">
+                            <img class="avatar w-6 h-6 rounded-full" src="./assets/img/users/15.jpg"
+                              alt="Image Description" />
+                            <img class="avatar w-6 h-6 rounded-full" src="./assets/img/users/4.jpg"
+                              alt="Image Description" />
+                            <img class="avatar w-6 h-6 rounded-full" src="./assets/img/users/3.jpg"
+                              alt="Image Description" />
+                            <img class="avatar w-6 h-6 rounded-full" src="./assets/img/users/12.jpg"
+                              alt="Image Description" />
+                            <span
+                              class="inline-flex items-center justify-center avatar w-6 h-6 rounded-full bg-gray-100 border-2 border-gray-200 dark:bg-black/20 dark:border-white/10">
+                              <span class="font-medium text-gray-500 leading-none dark:text-white/70">5+</span>
+                            </span>
+                          </div>
+                        </div>
+                      </div>
+                      <div class="sm:flex sm:space-y-0 space-y-2 justify-between">
+                        <span class="badge bg-success/10 text-success rounded-sm mb-0">
+                          <span class="w-1.5 h-1.5 inline-block bg-success/40 rounded-full"></span>
+                          Completed
+                        </span>
+                        <p class="text-gray-500 dark:text-white/70 text-sm font-medium my-auto whitespace-nowrap">
+                          05-12-2022
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div class="md:col-span-6 col-span-12">
+                  <div class="box">
+                    <div class="box-body space-y-3">
+                      <div class="sm:flex sm:space-x-3 sm:space-y-0 space-y-2 rtl:space-x-reverse">
+                        <img src="./assets/img/logos/10.png"
+                          class="p-2 avatar w-14 h-14 bg-gray-100 dark:bg-black/20 rounded-sm" alt="profile-img" />
+                        <div class="my-auto space-y-2">
+                          <h5 class="text-sm font-semibold">Nextjs Project</h5>
+                          <div class="flex -space-x-2 rtl:space-x-reverse">
+                            <img class="avatar w-6 h-6 rounded-full" src="./assets/img/users/15.jpg"
+                              alt="Image Description" />
+                            <img class="avatar w-6 h-6 rounded-full" src="./assets/img/users/4.jpg"
+                              alt="Image Description" />
+                            <img class="avatar w-6 h-6 rounded-full" src="./assets/img/users/3.jpg"
+                              alt="Image Description" />
+                            <img class="avatar w-6 h-6 rounded-full" src="./assets/img/users/12.jpg"
+                              alt="Image Description" />
+                            <span
+                              class="inline-flex items-center justify-center avatar w-6 h-6 rounded-full bg-gray-100 border-2 border-gray-200 dark:bg-black/20 dark:border-white/10">
+                              <span class="font-medium text-gray-500 leading-none dark:text-white/70">5+</span>
+                            </span>
+                          </div>
+                        </div>
+                      </div>
+                      <div class="sm:flex sm:space-y-0 space-y-2 justify-between">
+                        <span class="badge bg-warning/10 text-warning rounded-sm mb-0">
+                          <span class="w-1.5 h-1.5 inline-block bg-warning/40 rounded-full"></span>
+                          Inprogress
+                        </span>
+                        <p class="text-gray-500 dark:text-white/70 text-sm font-medium my-auto whitespace-nowrap">
+                          05-12-2022
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <a href="javascript:void(0);" class="ti-btn ti-btn-primary py-1 px-2 m-0">View more</a>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="col-span-12 xxl:col-span-3">
+        <!-- <div class="box">
+          <div class="box-header">
+            <h5 class="box-title">Skills</h5>
+          </div>
+          <div class="box-body">
+            <span class="badge bg-gray-100 text-gray-800 dark:bg-black/20 dark:text-gray-200 me-1">Laravel</span>
+            <span class="badge bg-gray-100 text-gray-800 dark:bg-black/20 dark:text-gray-200 me-1">Angular</span>
+            <span class="badge bg-gray-100 text-gray-800 dark:bg-black/20 dark:text-gray-200 me-1">Html</span>
+            <span class="badge bg-gray-100 text-gray-800 dark:bg-black/20 dark:text-gray-200 me-1">VueJs</span>
+            <span class="badge bg-gray-100 text-gray-800 dark:bg-black/20 dark:text-gray-200 me-1">React</span>
+            <span class="badge bg-gray-100 text-gray-800 dark:bg-black/20 dark:text-gray-200 me-1">Codeignator</span>
+            <span class="badge bg-gray-100 text-gray-800 dark:bg-black/20 dark:text-gray-200 me-1">Javascript</span>
+            <span class="badge bg-gray-100 text-gray-800 dark:bg-black/20 dark:text-gray-200 me-1">Bootstarp</span>
+            <span class="badge bg-gray-100 text-gray-800 dark:bg-black/20 dark:text-gray-200 me-1">Php</span>
+          </div>
+        </div>
+        <div class="box">
+          <div class="box-header">
+            <h5 class="box-title">Recent Posts</h5>
+          </div>
+          <div class="box-body">
+            <ul class="flex flex-col">
+              <li class="ti-list-group pt-0 px-0 border-0 text-gray-800 dark:text-white">
+                <a href="javascript:void(0);" class="space-x-3 flex rtl:space-x-reverse">
+                  <img src="./assets/img/gallery/1.jpg" class="avatar rounded-sm ring-0" alt="profile-img" />
+                  <div class="space-y-1 my-auto">
+                    <h3 class="font-semibold text-xs leading-none">
+                      Minim Lorem sunt in sunt adipisicing anim est enim duis..
+                    </h3>
+                    <p class="flex space-x-2 rtl:space-x-reverse text-gray-500 dark:text-white/70 text-xs">
+                      <i class="ri ri-calendar-line text-xs"></i><span>Sept 29 , 2022</span>
+                    </p>
+                  </div>
+                </a>
+              </li>
+              <li class="ti-list-group px-0 border-0 text-gray-800 dark:text-white">
+                <a href="javascript:void(0);" class="space-x-3 flex rtl:space-x-reverse">
+                  <img src="./assets/img/gallery/2.jpg" class="avatar rounded-sm ring-0" alt="profile-img" />
+                  <div class="space-y-1 my-auto">
+                    <h3 class="font-semibold text-xs leading-none">
+                      Deserunt dolore ad incididunt excepteur excepteur Lorem
+                      amet excepteur.
+                    </h3>
+                    <p class="flex space-x-2 rtl:space-x-reverse text-gray-500 dark:text-white/70 text-xs">
+                      <i class="ri ri-time-line text-xs"></i><span>3 hours ago</span>
+                    </p>
+                  </div>
+                </a>
+              </li>
+              <li class="ti-list-group px-0 border-0 text-gray-800 dark:text-white">
+                <a href="javascript:void(0);" class="space-x-3 flex rtl:space-x-reverse">
+                  <img src="./assets/img/gallery/3.jpg" class="avatar rounded-sm ring-0" alt="profile-img" />
+                  <div class="space-y-1 my-auto">
+                    <h3 class="font-semibold text-xs leading-none">
+                      Exercitation officia Lorem amet commodo.
+                    </h3>
+                    <p class="flex space-x-2 rtl:space-x-reverse text-gray-500 dark:text-white/70 text-xs">
+                      <i class="ri ri-time-line text-xs"></i><span>30 mins ago</span>
+                    </p>
+                  </div>
+                </a>
+              </li>
+              <li class="ti-list-group px-0 border-0 text-gray-800 dark:text-white">
+                <a href="javascript:void(0);" class="space-x-3 flex rtl:space-x-reverse">
+                  <img src="./assets/img/gallery/4.jpg" class="avatar rounded-sm ring-0" alt="profile-img" />
+                  <div class="space-y-1 my-auto">
+                    <h3 class="font-semibold text-xs leading-none">
+                      Sunt occaecat ut dolor veniam id cillum laboris ad et.
+                    </h3>
+                    <p class="flex space-x-2 rtl:space-x-reverse text-gray-500 dark:text-white/70 text-xs">
+                      <i class="ri ri-calendar-line text-xs"></i><span>l day ago</span>
+                    </p>
+                  </div>
+                </a>
+              </li>
+            </ul>
+          </div>
+        </div>
+        <div class="box">
+          <div class="box-header">
+            <h5 class="box-title">Photos</h5>
+          </div>
+          <div class="box-body">
+            <div class="relative">
+              <div class="">
+                <a class="gallery">
+                  <p class="grid grid-cols-3 gap-3" gallerize>
+                    <img class="w-full object-cover rounded-sm" *ngFor="let img of imageData" [src]="img.srcUrl" />
+                  </p> 
+                </a>
+              </div>
+            </div>
+          </div>
+          <div class="box-footer text-center">
+            <a href="javascript:void(0);" class="ti-btn ti-btn-primary py-1 px-2 m-0">View All</a>
+          </div>
+        </div> -->
+      </div>
+    </div>
+    <!-- End::row-1 -->
+  </div>
+  <!-- Start::main-content -->
+</div>
\ No newline at end of file

src/app/components/ess-profile/ess-profile.component.scss

+.bg-gradient-custom {
+    background: linear-gradient(135deg, #4f46e5, #ec4899 60%, #f59e0b);
+    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
+    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
+    mask-size: 100% 100%;
+    mask-repeat: no-repeat;
+}
\ No newline at end of file

src/app/components/ess-profile/ess-profile.component.ts

+import { ViewportScroller } from '@angular/common';
+import { ChangeDetectorRef, Component } from '@angular/core';
+import { EmployeeModel, MyEmployeeModel } from 'src/app/shared/model/employee.model';
+import { MyStatusModel, StatusModel } from 'src/app/shared/model/status.model';
+import { EmpStatusService } from 'src/app/shared/services/emp-status.service';
+import { EmployeeService } from 'src/app/shared/services/employee.service';
+import { environment } from 'src/environments/environment';
+
+@Component({
+  selector: 'app-ess-profile',
+  templateUrl: './ess-profile.component.html',
+  styleUrls: ['./ess-profile.component.scss'],
+})
+export class EssProfileComponent {
+  employee: { loading: boolean, data: EmployeeModel } = { loading: false, data: new MyEmployeeModel() }
+  url = environment.baseUrl
+  empStatus: { loading: boolean, dataList: StatusModel[] } = { loading: false, dataList: [] }
+  constructor(
+    private employeeService: EmployeeService,
+    private empStatusService: EmpStatusService,
+    private cdr: ChangeDetectorRef,
+    private viewScroller: ViewportScroller,
+  ) {
+    document.querySelector('#maincontent')?.classList.remove('main-content');
+  }
+  ngOnInit(): void {
+    this.viewScroller.scrollToPosition([0, 0]);
+    this.getEmpStatusList()
+    this.getProfileMini()
+  }
+  getProfileMini() {
+    this.employee.loading = true
+    this.employeeService.getProfileMini().subscribe({
+      next: response => {
+        this.employee.data = new MyEmployeeModel(response);
+        this.employee.loading = false;
+        this.cdr.detectChanges()
+      },
+      error: error => {
+        this.employee.loading = false;
+        this.cdr.detectChanges()
+      }
+    });
+  }
+  getEmpStatusList() {
+    this.empStatus.loading = false
+    this.empStatusService.getList().subscribe({
+      next: response => {
+        this.empStatus.dataList = response.map((x: any) => new MyStatusModel(x))
+        this.empStatus.loading = false
+        this.cdr.detectChanges()
+      }, error: error => {
+        this.empStatus.loading = false
+        this.cdr.detectChanges()
+      }
+    })
+  }
+  findEmpStatus(text: string) {
+    return this.empStatus.dataList.find(e => e.statusCode == text)?.tdesc || ''
+  }
+  reverseDate(text: string) {
+    return text.split('-').reverse().join('-')
+  }
+}

src/app/components/performance-evaluation/pms-form-employee/pms-competency/pms-competency.component.html

@@ -102,7 +102,10 @@
             <tbody>
               <ng-container
                 *ngFor="let bi of item2.groupAssessment1.competencyIndicatorsCourses1Mini.behavioralIndicatorsList;let i2 = index;let f = first">
-                <tr class="border-b border-gray-200">
+                <tr class="border-b border-gray-200"
+                  (mouseenter)="tableHover.set(bi.behavioralIndicators,true)"
+                  (mouseleave)="tableHover.clear()"
+                  [ngStyle]="{'background':tableHover.get(bi.behavioralIndicators)?'#f1f5f9':'#ffffff'}">
                   <td class="py-2" style="vertical-align: top">{{bi.behavioralIndicators}}</td>
                   <td class="py-2 text-center text-indigo-600 font-semibold" style="vertical-align: top">
                     {{bi.assessmentId}}</td>

src/app/components/performance-evaluation/pms-form-employee/pms-competency/pms-competency.component.ts

@@ -35,6 +35,7 @@ export class PmsCompetencyComponent {
   hoveredCode: string | null = null;
   hoveredCode2: string | null = null;
 
+  tableHover: Map<string, boolean> = new Map<string, boolean>()
   setting: { loading: boolean, data: SettingAssessmentModel } = { loading: false, data: new MySettingAssessmentModel() }
 
   checkSheet: {

src/app/components/performance-evaluation/pms-form-employee/pms-form-employee.component.html

@@ -48,7 +48,8 @@
               <div class="box shadow-md hover:shadow-xl transition m-0" style="border-radius:20px">
                 <div class="box-body py-2">
                   <div class="flex flex-col items-center gap-3">
-                    <img [src]="evaluationForm=='sup' ? './assets/img/users/woman2.png' : './assets/img/users/man.PNG'"
+                    <img
+                      [src]="evaluatee.data.picture?url+'/employee/image/'+evaluatee.data.picture:'./assets/img/users/defaultperson.jpg'"
                       class="h-24 w-24 rounded-full ring-4 ring-primary object-cover" alt="profile-img" />
                     <ng-container *ngIf="kpiScorePart[kpiScorePart.length-1].score as grade">
                       <div class="flex gap-1">
@@ -61,28 +62,6 @@
                       <span class="text-sm font-semibold text-gray-700">GRADE: {{ grade }}</span>
                     </ng-container>
                   </div>
-                  <!-- <div class="flex flex-row gap-2"
-                    [ngStyle]="{'justify-content':kpiScorePart[kpiScorePart.length-1].score?'space-between':'center'}">
-                    <div
-                      [ngClass]="{'w-full': !kpiScorePart[kpiScorePart.length-1].score,'w-1/2':kpiScorePart[kpiScorePart.length-1].score}">
-                      <img [src]="evaluationForm=='sup'?'./assets/img/users/woman2.png':'./assets/img/users/man.PNG'"
-                        class="w-24 h-24 rounded-full ring-4 ring-white/10 mx-auto" id="profile-img"
-                        alt="profile-img" />
-                    </div>
-                    <div *ngIf="kpiScorePart[kpiScorePart.length-1].score" class="w-1/2 flex flex-col justify-center"
-                      style="align-self: center;">
-                      <div class="flex-1 flex flex-row gap-1 justify-center">
-                        <div *ngFor="let item of [1,2,3,4,5]">
-                          <i class="ti" style="font-size:20px"
-                            [ngClass]="item <= gradeStar(kpiScorePart[kpiScorePart.length-1].score) ? 'ti-star-filled text-warning' : 'ti-star text-gray-300'"></i>
-                        </div>
-                      </div>
-                      <div class="flex-1 text-center">
-                        {{kpiScorePart[kpiScorePart.length-1].score ? ("GRADE : " +
-                        kpiScorePart[kpiScorePart.length-1].score) : ''}}
-                      </div>
-                    </div>
-                  </div> -->
                 </div>
               </div>
             </div>
@@ -422,11 +401,7 @@
               <div class="box-header">
                 <div class="flex flex-row gap-2">
                   <ng-container
-                    *ngFor="let item of ['ข้อมูลการประเมิน'+
-                      currentPart,'แบบประเมินสมรรถนะ'+
-                      currentPart,'ประเมินผลการปฏิบัติงาน'+
-                      currentPart,'สรุปคะแนนและข้อเสนอแนะ'+
-                      currentPart,'แผนพัฒนาบุคลากร'+currentPart]">
+                    *ngFor="let item of ['ข้อมูลการประเมิน','แบบประเมินสมรรถนะ','ประเมินผลการปฏิบัติงาน','สรุปคะแนนและข้อเสนอแนะ','แผนพัฒนาบุคลากร']">
                     <button type="button" class="flex-1 flex flex-row border bg-white p-2 justify-center"
                       style="border-radius:20px"
                       (click)="currentTap=item;(currentTap=='ประเมินผลการปฏิบัติงาน'||currentTap=='สรุปคะแนนและข้อเสนอแนะ'?currentPart='':null)"

src/app/components/performance-evaluation/pms-form-employee/pms-form-employee.component.ts

@@ -6,6 +6,8 @@ import { AppraisalService } from 'src/app/shared/services/appraisal.service';
 import { EmployeeService } from 'src/app/shared/services/employee.service';
 import { TokenService } from 'src/app/shared/services/token.service';
 import Swal from 'sweetalert2';
+import { ActivatedRoute, ParamMap } from '@angular/router';
+import { environment } from 'src/environments/environment';
 
 @Component({
   selector: 'app-pms-form-employee',
@@ -14,6 +16,7 @@ import Swal from 'sweetalert2';
 })
 export class PmsFormEmployeeComponent {
   @Input() currentTap = "ข้อมูลการประเมิน"
+  firstCurrentTap = ""
   @Input() evaluateeId = ""
   @Input() evaluaterId = ""
   @Input() evaluationForm: 'self' | 'sup' = "self"
@@ -21,6 +24,7 @@ export class PmsFormEmployeeComponent {
   currentPart = ""
   @Output() sendReturnPath: EventEmitter<any> = new EventEmitter<any>();
   starRate = 5;
+  url = environment.baseUrl
   url1 = '';
 
   url2 = '';
@@ -71,7 +75,8 @@ export class PmsFormEmployeeComponent {
     private employeeService: EmployeeService,
     private appraisalService: AppraisalService,
     private cdr: ChangeDetectorRef,
-    private tokenService: TokenService
+    private tokenService: TokenService,
+    private route: ActivatedRoute
   ) {
   }
 
@@ -271,6 +276,11 @@ export class PmsFormEmployeeComponent {
   }
 
   ngOnInit() {
+    this.route.paramMap.subscribe((params: ParamMap) => {
+      if (params.get('part') == 'IDP') {
+        this.firstCurrentTap = 'แผนพัฒนาบุคลากร'
+      }
+    });
     this.companyId = this.tokenService.getUser()?.companyid || ""
     this.dateIso = this.currentDate.toISOString();
     this.getEvaluatee()
@@ -308,7 +318,8 @@ export class PmsFormEmployeeComponent {
     this.compentency.data = this.deepClone(data)
     this.cdr.detectChanges()
     if (this.compentency.data) {
-      this.currentTap = "ข้อมูลการประเมิน"
+      this.currentTap = this.firstCurrentTap || "ข้อมูลการประเมิน"
+      this.firstCurrentTap = ''
       this.compentency.data.commentAll.sort((a, b) => new Date(b.commentDate).getTime() - new Date(a.commentDate).getTime());
       this.canSave = this.compentency.data.statusType == "pending" || this.compentency.data.statusType == "evaluating"
       this.canDraft = +this.compentency.data.currentStep <= 1 && (this.compentency.data.statusType == "pending" || this.compentency.data.statusType == "evaluating")
@@ -731,4 +742,5 @@ export class PmsFormEmployeeComponent {
       }
     }, 0);
   }
+
 }
\ No newline at end of file

src/app/components/performance-evaluation/pms-form-employee/pms-idp/pms-idp.component.html

@@ -88,76 +88,6 @@
                         </div>
                     </div>
                 </div>
-                <!-- <div class="grid grid-cols-6">
-                    <div class="col-span-6 grid grid-cols-6">
-                        <div class="col-span-3 border p-2 pb-4">
-                            <span>ผู้ใต้บังคับบัญชา</span>
-                        </div>
-                        <div class="col-span-3 border p-2 pb-4">
-                            <span>ผู้บังคับบัญชา</span>
-                        </div>
-                    </div>
-                    <div class="col-span-6 grid grid-cols-6">
-                        <div class="col-span-3 grid grid-cols-4">
-                            <div class="col-span-1 p-2  border pb-4">
-                                <span>ชื่อ-สกุล</span>
-                            </div>
-                            <div class="col-span-1 p-2  border pb-4">
-                                <span>{{appraisalIdp.apsassessy.thFullName || ""}}</span>
-                            </div>
-                            <div class="col-span-1 p-2  border pb-4">
-                                <span>ตำแหน่ง</span>
-                            </div>
-                            <div class="col-span-1 p-2  border pb-4">
-                                <span>{{appraisalIdp.apsassessy.position.tdesc || ""}}</span>
-                            </div>
-                        </div>
-                        <div class="col-span-3 grid grid-cols-4">
-                            <div class="col-span-1 p-2  border pb-4">
-                                <span>ชื่อ-สกุล</span>
-                            </div>
-                            <div class="col-span-1 p-2  border pb-4">
-                                <span>{{appraisalIdp.boss.thFullName || ""}}</span>
-                            </div>
-                            <div class="col-span-1 p-2  border pb-4">
-                                <span>ตำแหน่ง</span>
-                            </div>
-                            <div class="col-span-1 p-2  border pb-4">
-                                <span>{{appraisalIdp.boss.position.tdesc || ""}}</span>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="col-span-6 grid grid-cols-6">
-                        <div class="col-span-3 grid grid-cols-4">
-                            <div class="col-span-1 p-2  border pb-4">
-                                <span>งาน</span>
-                            </div>
-                            <div class="col-span-1 p-2  border pb-4">
-                                <span>{{appraisalIdp.apsassessy.job.tdesc || ""}}</span>
-                            </div>
-                            <div class="col-span-1 p-2  border pb-4">
-                                <span>ฝ่าย</span>
-                            </div>
-                            <div class="col-span-1 p-2  border pb-4">
-                                <span>{{appraisalIdp.apsassessy.bu1.tdesc || ""}}</span>
-                            </div>
-                        </div>
-                        <div class="col-span-3 grid grid-cols-4">
-                            <div class="col-span-1 p-2  border pb-4">
-                                <span>งาน</span>
-                            </div>
-                            <div class="col-span-1 p-2  border pb-4">
-                                <span>{{appraisalIdp.boss.job.tdesc || ""}}</span>
-                            </div>
-                            <div class="col-span-1 p-2  border pb-4">
-                                <span>ฝ่าย</span>
-                            </div>
-                            <div class="col-span-1 p-2  border pb-4">
-                                <span>{{appraisalIdp.boss.bu1.tdesc || ""}}</span>
-                            </div>
-                        </div>
-                    </div>
-                </div> -->
             </div>
             <div class="pb-2">
                 <div class="font-size-18px font-weight-700 text-gray-500">
@@ -208,7 +138,7 @@
                             <tr class="font-size-12px">
                                 <th scope="col" rowspan="3"
                                     class="relative px-10px py-10px bg-soft-secondary text-primary !text-center"
-                                    style="border-radius: 20px 20px 0 0;">
+                                    style="border-radius: 20px 0 0 0;">
                                     <span
                                         class="font-size-12px font-weight-700 ">{{'สมรรถนะที่พัฒนา\n(Competency)'}}</span>
                                     <div class="absolute top-1/2 transform -translate-y-1/2 right-0">
@@ -244,7 +174,7 @@
                                         <i class="ti ti-dots-vertical fs-l"></i>
                                     </div>
                                 </th>
-                                <th scope="col" rowspan="3"
+                                <th scope="col" rowspan="3" style="border-radius: 0 20px 0 0;"
                                     class="relative px-10px py-10px bg-soft-secondary text-primary !text-center">
                                     <span class="font-size-12px font-weight-700 ">ระยะเวลาที่พัฒนา</span>
                                 </th>
@@ -302,7 +232,7 @@
                                         {{i+1}}. {{data.indicatorsCourses0.competencyTopic.competencyTopicId}}
                                     </td>
                                     <td class="align-start !white-space-normal"
-                                        [class.bg-table-gray]="!data.idpDevelopmentPlan||!data.behavioralIndicators||!data.behavioralIndicators.length">
+                                        [class.bg-gray-200]="!data.idpDevelopmentPlan||!data.behavioralIndicators||!data.behavioralIndicators.length">
                                         <ng-container *ngIf="data.idpDevelopmentPlan">
                                             <div class="mb-3"
                                                 *ngFor="let bis of data.behavioralIndicators;let i2 = index">
@@ -311,39 +241,39 @@
                                         </ng-container>
                                     </td>
                                     <td class="align-start text-center"
-                                        [class.bg-table-gray]="!data.idpDevelopmentPlan||!data.idpDevelopmentPlan.ojtJobAssignment">
+                                        [class.bg-gray-200]="!data.idpDevelopmentPlan||!data.idpDevelopmentPlan.ojtJobAssignment">
                                         <ng-container
                                             *ngIf="data.idpDevelopmentPlan&&data.idpDevelopmentPlan.ojtJobAssignment">
-                                            <i class="ti ti-check text-success fs-xl "></i>
+                                            <i class="ti ti-check text-danger fs-xl "></i>
                                         </ng-container>
                                     </td>
                                     <td class="align-start text-center"
-                                        [class.bg-table-gray]="!data.idpDevelopmentPlan||!data.idpDevelopmentPlan.coachMentor">
+                                        [class.bg-gray-200]="!data.idpDevelopmentPlan||!data.idpDevelopmentPlan.coachMentor">
                                         <ng-container
                                             *ngIf="data.idpDevelopmentPlan&&data.idpDevelopmentPlan.coachMentor">
-                                            <i class="ti ti-check text-success fs-xl "></i>
+                                            <i class="ti ti-check text-danger fs-xl "></i>
                                         </ng-container>
                                     </td>
                                     <td class="align-start text-center"
-                                        [class.bg-table-gray]="!data.idpDevelopmentPlan||!data.idpDevelopmentPlan.training">
+                                        [class.bg-gray-200]="!data.idpDevelopmentPlan||!data.idpDevelopmentPlan.training">
                                         <ng-container *ngIf="data.idpDevelopmentPlan&&data.idpDevelopmentPlan.training">
-                                            <i class="ti ti-check text-success fs-xl "></i>
+                                            <i class="ti ti-check text-danger fs-xl "></i>
                                         </ng-container>
                                     </td>
                                     <td class="!p-0"></td>
                                     <td class="align-start text-center"
-                                        [class.bg-table-gray]="canEdit?(!data.idpDevelopmentPlan.training||(appraisalIdp.masfromEvaluationIdp.idpStatus!='1' && !data.competencyCourse)):!data.competencyCourse">
+                                        [class.bg-gray-200]="canEdit?(!data.idpDevelopmentPlan.training||(appraisalIdp.masfromEvaluationIdp.idpStatus!='1' && !data.competencyCourse)):!data.competencyCourse">
                                         <ng-container *ngIf="data.idpDevelopmentPlan&&data.idpDevelopmentPlan.training">
                                             <div class="flex !items-center"
                                                 *ngFor="let competencyCourse of data.competencyCourse"
-                                                style="min-height: 100px;">
+                                                style="min-height: 100px;flex-direction:column">
                                                 <i class="ti ti-book fs-xxl !fw-b"></i><br>
                                                 {{competencyCourse.competencyCourseId }}
                                             </div>
                                         </ng-container>
                                     </td>
                                     <td class="align-start text-center !white-space-normal"
-                                        [class.bg-table-gray]="canEdit?(!data.idpDevelopmentPlan.training||(appraisalIdp.masfromEvaluationIdp.idpStatus!='1' && !data.competencyCourse)):!data.competencyCourse">
+                                        [class.bg-gray-200]="canEdit?(!data.idpDevelopmentPlan.training||(appraisalIdp.masfromEvaluationIdp.idpStatus!='1' && !data.competencyCourse)):!data.competencyCourse">
                                         <ng-container *ngIf="data.idpDevelopmentPlan&&data.idpDevelopmentPlan.training">
                                             <ng-container
                                                 *ngFor="let competencyCourse of data.competencyCourse;let l = index;let last=last">
@@ -377,7 +307,7 @@
                                     </td>
                                     <td class="!p-0"></td>
                                     <td class="align-start text-center !white-space-normal"
-                                        [class.bg-table-gray]="!appraisalIdp.masfromEvaluationRound.apsPeriodStart &&!appraisalIdp.masfromEvaluationRound.apsPeriodEnd">
+                                        [class.bg-gray-200]="!appraisalIdp.masfromEvaluationRound.apsPeriodStart &&!appraisalIdp.masfromEvaluationRound.apsPeriodEnd">
                                         <ng-container
                                             *ngIf="appraisalIdp.masfromEvaluationRound.apsPeriodStart &&appraisalIdp.masfromEvaluationRound.apsPeriodEnd">
                                             จาก&nbsp;

src/app/components/performance-evaluation/pms-form-employee/pms-information/pms-information.component.html

@@ -20,7 +20,10 @@
             </thead>
             <tbody>
                 <ng-container *ngFor="let item of appraisalCompentencyList; let i=index">
-                    <tr class="border-b border-gray-200">
+                    <tr class="border-b border-gray-200"
+                        (mouseenter)="tableHover.set(item.masfromEvaluationAssessment1lList[0].competencyType.tdesc,true)"
+                        (mouseleave)="tableHover.clear()"
+                        [ngStyle]="{'background':tableHover.get(item.masfromEvaluationAssessment1lList[0].competencyType.tdesc)?'#f1f5f9':'#ffffff'}">
                         <td class="py-2" style="vertical-align: top">
                             {{item.masfromEvaluationAssessment1lList[0].competencyType.tdesc}}
                         </td>
@@ -70,7 +73,9 @@
                 </tr>
             </thead>
             <tbody>
-                <tr class="border-b border-gray-200">
+                <tr class="border-b border-gray-200" (mouseenter)="tableHover.set(kpiName,true)"
+                    (mouseleave)="tableHover.clear()"
+                    [ngStyle]="{'background':tableHover.get(kpiName)?'#f1f5f9':'#ffffff'}">
                     <td class="py-2" style="vertical-align: top">
                         {{kpiName}}
                     </td>

src/app/components/performance-evaluation/pms-form-employee/pms-information/pms-information.component.ts

@@ -18,6 +18,7 @@ export class PmsInformationComponent {
   @Input() kpiName: string = ""
   @Output() sendCurrentTap: EventEmitter<any> = new EventEmitter<any>();
   @Output() sendCurrentPart: EventEmitter<any> = new EventEmitter<any>();
+  tableHover: Map<string, boolean> = new Map<string, boolean>()
   menuClose: Map<string, boolean> = new Map<string, boolean>()
   statusButtonClass = (status: string) => {
     if (status === "no access") {

src/app/components/performance-evaluation/pms-form-employee/pms-kpi/pms-kpi.component.html

@@ -80,7 +80,10 @@
                     </thead>
                     <tbody>
                         <ng-container *ngFor="let item of appraisalPms?.part1Detail;let i = index">
-                            <tr class="border-b border-gray-200">
+                            <tr class="border-b border-gray-200"
+                                (mouseenter)="tableHover.set(item.groupAssessment1.pmsTopic.indicatorsDetail,true)"
+                                (mouseleave)="tableHover.clear()"
+                                [ngStyle]="{'background':tableHover.get(item.groupAssessment1.pmsTopic.indicatorsDetail)?'#f1f5f9':'#ffffff'}">
                                 <td class="py-2" style="vertical-align: top">
                                     {{item.groupAssessment1.pmsTopic.indicatorsDetail}}</td>
                                 <td class="py-2 text-center" style="vertical-align: top">{{item.weight}}</td>
@@ -261,7 +264,10 @@
                     </thead>
                     <tbody>
                         <ng-container *ngFor="let item of appraisalPms?.part2Detail;let i = index">
-                            <tr class="border-b border-gray-200">
+                            <tr class="border-b border-gray-200"
+                                (mouseenter)="tableHover.set(item.groupAssessment1.pmsTopic.indicatorsDetail,true)"
+                                (mouseleave)="tableHover.clear()"
+                                [ngStyle]="{'background':tableHover.get(item.groupAssessment1.pmsTopic.indicatorsDetail)?'#f1f5f9':'#ffffff'}">
                                 <td class="py-2" style="vertical-align: top">
                                     {{item.groupAssessment1.pmsTopic.indicatorsDetail}}</td>
                                 <td class="py-2 text-center" style="vertical-align: top">{{item.weight}}</td>
@@ -442,7 +448,10 @@
                     </thead>
                     <tbody>
                         <ng-container *ngFor="let item of appraisalPms?.part3Detail;let i = index">
-                            <tr class="border-b border-gray-200">
+                            <tr class="border-b border-gray-200"
+                                (mouseenter)="tableHover.set(item.groupAssessment1.pmsTopic.indicatorsDetail,true)"
+                                (mouseleave)="tableHover.clear()"
+                                [ngStyle]="{'background':tableHover.get(item.groupAssessment1.pmsTopic.indicatorsDetail)?'#f1f5f9':'#ffffff'}">
                                 <td class="py-2" style="vertical-align: top">
                                     {{item.groupAssessment1.pmsTopic.indicatorsDetail}}</td>
                                 <td class="py-2 text-center" style="vertical-align: top">{{item.weight}}</td>
@@ -622,7 +631,10 @@
                     </thead>
                     <tbody>
                         <ng-container *ngFor="let item of appraisalPms?.part4Detail;let i = index">
-                            <tr class="border-b border-gray-200">
+                            <tr class="border-b border-gray-200"
+                                (mouseenter)="tableHover.set(item.competencyType.tdesc,true)"
+                                (mouseleave)="tableHover.clear()"
+                                [ngStyle]="{'background':tableHover.get(item.competencyType.tdesc)?'#f1f5f9':'#ffffff'}">
                                 <td class="py-2" style="vertical-align: top">
                                     {{item.competencyType.tdesc}}</td>
                                 <td class="py-2 text-center" style="vertical-align: top">{{item.competencyType.weight}}
@@ -725,7 +737,9 @@
                     </thead>
                     <tbody>
                         <ng-container *ngFor="let item of appraisalPms?.part5Detail;let i = index">
-                            <tr class="border-b border-gray-200">
+                            <tr class="border-b border-gray-200" (mouseenter)="tableHover.set(item.tdesc,true)"
+                                (mouseleave)="tableHover.clear()"
+                                [ngStyle]="{'background':tableHover.get(item.tdesc)?'#f1f5f9':'#ffffff'}">
                                 <td class="py-2" style="vertical-align: top">
                                     {{item.tdesc}}
                                 </td>
@@ -884,7 +898,10 @@
                     </thead>
                     <tbody>
                         <ng-container *ngFor="let item of appraisalPms?.part6Detail;let i = index">
-                            <tr class="border-b border-gray-200">
+                            <tr class="border-b border-gray-200"
+                                (mouseenter)="tableHover.set(item.groupAssessment1.pmsTopic.tdesc,true)"
+                                (mouseleave)="tableHover.clear()"
+                                [ngStyle]="{'background':tableHover.get(item.groupAssessment1.pmsTopic.tdesc)?'#f1f5f9':'#ffffff'}">
                                 <td class="py-2" style="vertical-align: top">
                                     {{item.groupAssessment1.pmsTopic.tdesc}}</td>
                                 <td class="py-2 text-center" style="vertical-align: top">{{item.weight}}</td>
@@ -1065,7 +1082,10 @@
                     </thead>
                     <tbody>
                         <ng-container *ngFor="let item of appraisalPms?.part7Detail;let i = index">
-                            <tr class="border-b border-gray-200">
+                            <tr class="border-b border-gray-200"
+                                (mouseenter)="tableHover.set(item.groupAssessment1.pmsTopic.tdesc,true)"
+                                (mouseleave)="tableHover.clear()"
+                                [ngStyle]="{'background':tableHover.get(item.groupAssessment1.pmsTopic.tdesc)?'#f1f5f9':'#ffffff'}">
                                 <td class="py-2" style="vertical-align: top">
                                     {{item.groupAssessment1.pmsTopic.tdesc}}</td>
                                 <td class="py-2 text-center" style="vertical-align: top">{{item.weight}}</td>
@@ -1245,7 +1265,9 @@
                 </thead>
                 <tbody>
                     <ng-container *ngFor="let item of data8List;let i = index">
-                        <tr class="border-b border-gray-200">
+                        <tr class="border-b border-gray-200" (mouseenter)="tableHover.set(item.evaluationFactor,true)"
+                            (mouseleave)="tableHover.clear()"
+                            [ngStyle]="{'background':tableHover.get(item.evaluationFactor)?'#f1f5f9':'#ffffff'}">
                             <td class="py-2" style="vertical-align: top">
                                 {{item.evaluationFactor}}
                             </td>

src/app/components/performance-evaluation/pms-form-employee/pms-kpi/pms-kpi.component.ts

@@ -97,7 +97,7 @@ export class PmsKpiComponent {
   groupGrade: { loading: boolean, dataList: CompetencyGradeModel[] } = { loading: false, dataList: [] }
   @ViewChild('scrollContainer') scrollContainer!: ElementRef;
   @Output() scrollToMenuId: EventEmitter<any> = new EventEmitter<any>();
-
+  tableHover: Map<string, boolean> = new Map<string, boolean>()
   constructor(private appraisalService: AppraisalService,
     private pmsGroupGradeService: PmsGroupGradeService,
     private employeeService: EmployeeService,

src/app/components/performance-evaluation/self-evaluation/self-evaluation.component.ts

@@ -88,7 +88,8 @@ export class SelfEvaluationComponent implements OnInit {
           this.allCompetencyTypeId = this.appraisalCompentency.dataList[0].masfromEvaluationAssessment1.map(x => ({
             statusType: "",
             competencyTypeId: x.competencyType.competencyTypeId,
-            shortName: x.competencyType.shortName
+            shortName: x.competencyType.shortName,
+            averageScore: x.averageScore + ''
           }))
           this.selectAppraisalCompentency(this.appraisalCompentency.dataList[0])
         }

src/app/components/performance-evaluation/supervisor-evaluation/supervisor-evaluation.component.html

-<ng-container *ngIf="pageEvalution==''">
-    <div class="bg-card-white">
-    </div>
-    <div class="block-main-content">
-        <div class="font-size-18px font-weight-700 pt-1.5rem text-primary px-2rem">
-            ประเมินผลประจำปี {{currentDate.getFullYear()}}
-        </div>
-        <div class="pt-0.75rem">
-            <div class=" px-2rem" [ngClass]="{'border-gray-200 border-b': subordinate.dataList.length}">
-                <nav class=" flex space-x-2 rtl:space-x-reverse">
-                    <a *ngFor="let item of subordinate.dataList; let i=index ; let f= first"
-                        class="border justify-center rounded-top-4px hs-tab-active:!bg-primary hs-tab-active:text-white -mb-px py-2 px-3 inline-flex items-center gap-2 font-size-16px font-weight-500 text-center hover:text-gray-900"
-                        [class.active]="f" href="javascript:void(0);" [id]="'card-type-item-'+(i+1)"
-                        [attr.data-hs-tab]="'#underline-'+(i+1)" [attr.aria-controls]="'underline-'+(i+1)"
-                        (click)="selectDataList(item)">
-                        {{item.tdesc}}
-                    </a>
-                </nav>
+<div class=" pt-1.5rem mb-2" *ngIf="pageEvalution==''">
+    <div class="flex flex-col gap-2">
+        <div class="flex flex-row gap-2">
+            <div class="flex flex-col gap-2 w-1/4">
+                <div class="w-full mb-2">
+                    <div class="font-size-18px font-weight-700  text-primary">
+                        <div class="absolute " style="transform:translateY(-9px)">
+                        </div>
+                        <span class="whitespace-nowrap relative" style="left:0px">
+                            ประเมินผลประจำปี {{currentDate.getFullYear()}}
+                        </span>
+                    </div>
+                </div>
+            </div>
+            <div class="flex flex-col w-3/4 gap-2">
+                <div class="w-full mb-2 flex">
+                    <div class="w-full flex flex-row gap-2">
+                        <ng-container *ngFor="let item of subordinate.dataList; let i=index ; let f= first">
+                            <div class="font-size-18px font-weight-700">
+                                <span class="cursor-pointer"
+                                    [ngClass]="{'text-secondary border-secondary border-b':subordinate.select?.tdesc==item.tdesc,'hover:text-gray-900':!(subordinate.select?.tdesc==item.tdesc)}"
+                                    (click)="subordinate.select?.tdesc !== item.tdesc && selectDataList(item)">
+                                    {{item.tdesc}}
+                                </span>
+                            </div>
+                        </ng-container>
+                    </div>
+                </div>
             </div>
         </div>
-        <div class="pt-50px" *ngIf="subordinate.dataList.length">
-            <div *ngFor="let item of subordinate.dataList; let i=index;let f=first" [id]="'underline-'+(i+1)"
-                role="tabpanel" [class.hidden]="!f">
-                <div class="header-title-type p-0 px-2rem">
-                    <div class="flex justify-end">
-                        <div class="px-1">
-                            <div class="relative shadow-md">
-                                <input type="text" id="hs-leading-icon" name="hs-leading-icon"
-                                    class="ti-form-input ltr:pl-11 rtl:pr-11 focus:z-10 "
-                                    placeholder="Search by No. or Name" style="height: 40px;" [(ngModel)]="search"
-                                    (ngModelChange)="searchChange()">
-                                <div
-                                    class="absolute inset-y-0 ltr:left-0 rtl:right-0 flex items-center pointer-events-none z-20 ltr:pl-4 rtl:pr-4">
-                                    <i class="ri-search-line text-gray"></i>
+        <div class="flex flex-row gap-2 w-full">
+            <div class="flex w-1/3 justify-between ">
+                <div class="box shadow-md hover:shadow-xl transition m-0 w-full" style="border-radius:20px">
+                    <div class="box-body py-2">
+                        <div class="flex flex-col">
+                            <div class="flex">
+                                <span class="font-size-18px font-weight-700  flex items-center" style="height:50px">
+                                    ผู้ใต้บังคับบัญชาประเมิน
+                                </span>
+                            </div>
+                            <div class="flex flex-row">
+                                <div class="flex w-1/2 relative" style="height: 200px;">
+                                    <div echarts class="w-full h-full" [options]="subordinateApproveOption"
+                                        [autoResize]="true">
+                                    </div>
+                                    <div class="absolute inset-0 flex justify-center items-center pointer-events-none">
+                                        <div class="text-xl font-bold">{{subordinateApprovePer}}%</div>
+                                    </div>
+                                </div>
+                                <div class="flex flex-col w-1/2 gap-2"
+                                    style="height: 200px;justify-content: center;align-items: start;">
+                                    <span>
+                                        ประเมินแล้ว {{subordinateApprove()}} คน
+                                    </span>
+                                    <span>
+                                        ทั้งหมด {{subordinateAll()}} คน
+                                    </span>
                                 </div>
                             </div>
                         </div>
                     </div>
                 </div>
-                <div class="w-full min-height-50px justify-between items-center py-2">
-                    <div class="px-2rem py-3 bg-soft-secondary font-size-18px font-weight-700 text-primary">
-                        ประเมินสมรรถนะ
+            </div>
+            <div class="flex w-1/3 justify-between">
+                <div class="box shadow-md hover:shadow-xl transition m-0 w-full" style="border-radius:20px">
+                    <div class="box-body py-2">
+                        <div class="flex flex-col">
+                            <div class="flex">
+                                <span class="font-size-18px font-weight-700 flex items-center" style="height:50px">
+                                    การอนุมัติ
+                                </span>
+                            </div>
+                            <div class="flex flex-row">
+                                <div class="flex w-1/2 relative" style="height: 200px;">
+                                    <div echarts class="w-full h-full" [options]="myApproveOption" [autoResize]="true">
+                                    </div>
+                                    <div class="absolute inset-0 flex justify-center items-center pointer-events-none">
+                                        <div class="text-xl font-bold">{{myApprovePer}}%</div>
+                                    </div>
+                                </div>
+                                <div class="flex flex-col w-1/2 gap-2"
+                                    style="height: 200px;justify-content: center;align-items: start;">
+                                    <span>
+                                        อนุมัติแล้ว {{subordinateApprove()}} คน
+                                    </span>
+                                    <span>
+                                        ทั้งหมด {{subordinateAll()}} คน
+                                    </span>
+                                </div>
+                            </div>
+                        </div>
                     </div>
                 </div>
-                <div class=" px-2rem">
-                    <div class="overflow-auto table-bordered rounded-t-md">
-                        <div id="card-type-1" role="tabpanel" aria-labelledby="card-type-item-1">
-                            <div class="overflow-auto shadow-md">
-                                <table class="ti-custom-table ti-custom-table-head ti-custom-table-hover">
-                                    <thead>
-                                        <tr>
-                                            <!-- ['รหัสพนักงาน','ชื่อพนักงาน','ตำเเหน่งงาน','ประเมิน','เเผนพัฒนา','PMS','ผลประเมิน','เกรด' ,'สถานะผู้ประเมิน'] -->
-                                            <ng-container
-                                                *ngFor="let item of subordinate.select?.showPms?['รหัสพนักงาน','ชื่อพนักงาน','ตำเเหน่งงาน','ประเมิน','ผลประเมิน','เกรด' ,'สถานะผู้ประเมิน']:
-                                                ['รหัสพนักงาน','ชื่อพนักงาน','ตำเเหน่งงาน','ประเมิน','เเผนพัฒนา','สถานะผู้ประเมิน']; let f = first; let l = last; let i = index">
-                                                <th scope="col"
-                                                    class="relative px-10px py-10px bg-soft-secondary text-primary"
-                                                    [class.!text-center]="f||l||'ประเมิน'||'เเผนพัฒนา'||'PMS'">
-                                                    <span class="text-sm">{{ item }}</span>
-                                                    <div class="absolute top-1/2 transform -translate-y-1/2 right-0"
-                                                        *ngIf="!l&&!f&&!i">
-                                                        <svg class="head-table-icon" xmlns="http://www.w3.org/2000/svg"
-                                                            width="50" height="16" fill="currentColor"
-                                                            viewBox="0 0 16 16">
-                                                            <path
-                                                                d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z">
-                                                            </path>
-                                                        </svg>
-                                                    </div>
-                                                </th>
-                                            </ng-container>
-                                        </tr>
-                                    </thead>
-                                    <tbody *ngIf="subordinate.loading">
-                                        <tr>
-                                            <td class="text-center" colspan="100%">
-                                                <div *ngFor="let item of [1,2,3]"
-                                                    class="ti-spinner w-8 h-8 text-secondary mx-1" role="status"
-                                                    aria-label="loading">
-                                                    <span class="sr-only">Loading...</span>
-                                                </div>
-                                            </td>
-                                        </tr>
-                                    </tbody>
-                                    <tbody *ngIf="!subordinate.loading&&!subordinateFilter().length">
-                                        <tr>
-                                            <td class="text-center" colspan="100%">
-                                                ไม่พบข้อมูล
-                                            </td>
-                                        </tr>
-                                    </tbody>
-                                    <tbody *ngIf="!subordinate.loading&&subordinateFilter().length">
-                                        <tr *ngFor="let item of subordinateFilter();let i = index">
-                                            <td class="text-center" style="font-size: 12px; width: 150px;">
-                                                {{item.apsassessy.employeeId}}
-                                            </td>
-                                            <td style="font-size: 12px; width: 175px;">
-                                                {{item.apsassessy.thFullName}}
-                                            </td>
-                                            <td style="font-size: 12px;">{{item.apsassessy.position.tdesc}}</td>
-                                            <td class="text-center">
-                                                <div class="flex justify-center">
-                                                    <!-- <button type="button" class="ti-btn rounded-sm "
-                                                        *ngFor="let type of item.typeList"
-                                                        [class]="statusButtonClass(type.statusType)"
-                                                        style="height: 15px; width: 45px; font-size: 12px; display: flex; align-items: center; justify-content: center;margin-left:4px;"
-                                                        (click)="selectSubordinate(item,type.competencyTypeId,subordinate.select?.evaluationRoundId);pageEvalution=type.shortName">
-                                                        {{type.shortName}}
-                                                    </button> -->
-                                                    <button type="button" class="ti-btn rounded-sm "
-                                                        [class]="statusButtonClass(item.statusIdp.statusType)"
-                                                        style="height: 30px; width: auto; font-size: 12px; display: flex; align-items: center; justify-content: center;margin-left:4px;"
-                                                        (click)="selectSubordinate(item,'',subordinate.select?.evaluationRoundId,item.statusIdp.statusType);pageEvalution='open'">
-                                                        {{statusCompetencyText(item.statusIdp.statusType)}}
-                                                    </button>
-                                                </div>
-                                            </td>
-                                            <!-- <td class="text-center">
-                                                <div class="flex justify-center">
-                                                    <button type="button" class="ti-btn rounded-sm"
-                                                        [class]="statusButtonClass(item.statusIdp.statusType)"
-                                                        style="height: 15px; width: 45px; font-size: 12px; display: flex; align-items: center; justify-content: center;margin-left:4px;"
-                                                        (click)="selectSubordinate(item,'',subordinate.select?.evaluationRoundId,item.statusIdp.statusType);pageEvalution='idp'">
-                                                        IDP
-                                                    </button>
-                                                </div>
-                                            </td>
-                                            <td class="text-center" *ngIf="subordinate.select?.showPms">
-                                                <div class="flex justify-center" *ngIf="item.statusPms">
-                                                    <button type="button" class="ti-btn rounded-sm"
-                                                        [class]="statusButtonClass(item.statusPms.statusType)"
-                                                        style="height: 15px; width: 45px; font-size: 12px; display: flex; align-items: center; justify-content: center;margin-left:4px;"
-                                                        (click)="selectSubordinate(item,'',subordinate.select?.evaluationRoundId,item.statusPms.statusType);pageEvalution='pms'">
-                                                        PMS
-                                                    </button>
-                                                </div>
-                                            </td> -->
-                                            <td class="text-center" style="font-size: 12px;"
-                                                *ngIf="subordinate.select?.showPms">
-                                                {{item.sumScore}}</td>
-                                            <td class=" text-center" style="font-size: 12px;"
-                                                *ngIf="subordinate.select?.showPms">
-                                                {{item.gread}}</td>
-                                            <td class=" text-center" style="font-size: 12px;">
-                                                {{item.apsapproveType.tdesc}}
-                                            </td>
-                                        </tr>
-                                    </tbody>
-                                </table>
+            </div>
+            <div class="flex w-1/3 justify-between">
+                <div class="box shadow-md hover:shadow-xl transition m-0 w-full" style="border-radius:20px">
+                    <div class="box-body py-2">
+                        <div class="flex flex-col">
+                            <div class="flex">
+                                <span class="font-size-18px font-weight-700  flex items-center" style="height:50px">
+                                    ภาพรวม PMS
+                                </span>
+                            </div>
+                            <div class="flex flex-row">
+                                <div class="flex w-1/2 relative" style="height: 200px;">
+                                    <div echarts class="w-full h-full" [options]="pmsOption" [autoResize]="true">
+                                    </div>
+                                </div>
+                                <div class="flex flex-col w-1/2 gap-2"
+                                    style="height: 200px;justify-content: center;align-items: start;">
+                                    <span *ngFor="let item of ['A','B','C','D','E']; let i=index" class="flex flex-row">
+                                        <span style="width:20px"
+                                            [ngStyle]="{'background':gradeColor(item)}">&nbsp;&nbsp;
+                                        </span>&nbsp;Grade&nbsp;{{item}}&nbsp;&nbsp;&nbsp;{{gradeFindLength(item)}}&nbsp;{{gradeFindPer(item)}}
+                                    </span>
+                                </div>
                             </div>
                         </div>
                     </div>
-                    <nav class="pagination-style-3 my-5" *ngIf="page.length">
-                        <ul class="ti-pagination">
-                            <li>
-                                <a aria-label="anchor" class="page-link" href="javascript:void(0);"
-                                    (click)="currentPage = (currentPage-1 || 1)">
-                                    <i class="ri-arrow-left-s-line align-middle rtl:rotate-180"></i>
-                                </a>
-                            </li>
-                            <li *ngFor="let item of page;let f = first;let l = last">
-                                <ng-container *ngIf="item==3&&currentPage!=1&&currentPage!=2&&currentPage!=3">
-                                    <a aria-label="anchor" class="page-link" href="javascript:void(0);"><i
-                                            class="ri-more-line"></i>
-                                    </a>
-                                </ng-container>
-                                <ng-container
-                                    *ngIf="(f||l)||(item==currentPage-1||item==currentPage||item==currentPage+1)">
-                                    <a class="page-link" href="javascript:void(0);" [class.active]="item==currentPage"
-                                        (click)="currentPage=item">{{item}}
-                                    </a>
-                                </ng-container>
-                                <ng-container
-                                    *ngIf="item==page.length-2&&currentPage!=page.length&&currentPage!=page.length-1&&currentPage!=page.length-2">
-                                    <a aria-label="anchor" class="page-link" href="javascript:void(0);"><i
-                                            class="ri-more-line"></i>
-                                    </a>
-                                </ng-container>
-                            </li>
-                            <li>
-                                <a aria-label="anchor" class="page-link" href="javascript:void(0);"
-                                    (click)="currentPage = (currentPage > page.length-1 ? currentPage: currentPage+1 )">
-                                    <i class="ri-arrow-right-s-line align-middle rtl:rotate-180"></i>
-                                </a>
-                            </li>
-                        </ul>
-                        <ul class="nav-tabs mt-3">
-                            <span>Show {{((currentPage-1) * 10)+1}} to {{subordinateFilter().length<10
-                                    ?subordinateFilter().length: (currentPage==page.length ? ((currentPage * 10) -
-                                    ((currentPage * 10) - subordinateFilter().length) ) :(currentPage * 10) ) }} of
-                                    {{subordinateFilter().length}} items</span>
-                        </ul>
-                    </nav>
                 </div>
             </div>
         </div>
-
-        <ng-container *ngIf="subordinate.dataList.length">
-            <div class="min-height-50px justify-between items-center py-2 pl-2rem" style="width: 30%;">
-                <div class="py-3 bg-soft-secondary font-size-18px font-weight-700 text-primary text-center">
-                    หมายเหตุ
-                </div>
-            </div>
-            <div class="min-height-50px justify-between items-center py-2 pl-2rem" style="width: 30%;">
-                <div class="ti-pagination">
-                    <button type="button" style="width: 95px;"
-                        class="ti-btn rounded-sm ti-btn-soft-mute cursor-default pr-1">
-                        ปุ่มสีเทา
-                    </button>
-                    <div class="font-size-16px text-secondary">หมายถึง ยังไม่ถึงขั้นตอนดำเนินการ</div>
-                </div>
-                <div class="ti-pagination">
-                    <button type="button" style="width: 95px;"
-                        class="ti-btn rounded-sm ti-btn-soft-secondary cursor-default pr-1">
-                        ปุ่มสีฟ้า
-                    </button>
-                    <div class="font-size-16px text-secondary">หมายถึง รอดำเนินการ</div>
-                </div>
-                <div class="ti-pagination">
-                    <button type="button" style="width: 95px;"
-                        class="ti-btn rounded-sm ti-btn-soft-warning cursor-default pr-1">
-                        ปุ่มสีเหลือง
-                    </button>
-                    <div class="font-size-16px text-secondary">หมายถึง อยู่ระหว่างดำเนินการ</div>
-                </div>
-                <div class="ti-pagination">
-                    <button type="button" style="width: 95px;"
-                        class="ti-btn rounded-sm ti-btn-soft-success cursor-default pr-1">
-                        ปุ่มสีเขียว
-                    </button>
-                    <div class="font-size-16px text-secondary">หมายถึง ดำเนินการเสร็จสิ้น</div>
+        <div class="flex flex-col gap-2 w-full">
+            <div class="box shadow-md hover:shadow-xl transition m-0" style="border-radius:20px">
+                <div class="box-body py-2">
+                    <div class="flex item-center w-full font-size-18px font-weight-700  text-primary px-5 mt-1 mb-4"
+                        style="height: 50px;align-items: center;border-width: 1px;background: #eff6fe; border-radius:20px">
+                        รายชื่อผู้ใต้บังคับบัญชา
+                    </div>
+                    <div class="flex w-full mb-4">
+                        <div class="flex w-1/4 justify-between">
+                            <div class="flex">
+                                <div class="flex items-center">
+                                    <input type="checkbox" class="ti-form-checkbox pointer-events-none"
+                                        id="hs-default-checkbox" [checked]="selectEmp.size-1 > 0">
+                                    <label for="hs-default-checkbox"
+                                        class="text-sm text-gray-500 mx-2 pointer-events-none">
+                                        {{selectEmp.size-1 < 0 ? 0 : selectEmp.size-1}} Selected</label>
+                                </div>
+                                <div class="mx-1 flex items-center">
+                                    <button id='check-boxall' (click)="toggleSelectAll()"
+                                        class="focus:ring-2 focus:ring-primary rounded-sm flex item-center">
+                                        <i class="fs-l transition-all duration-200"
+                                            [ngClass]="{'ri-checkbox-multiple-line text-gray-500': !selectEmp.get('selectAll'), 'ri-checkbox-multiple-fill text-primary': selectEmp.get('selectAll')}"></i>
+                                    </button>
+                                    <label class="text-sm text-gray-500 ml-2" for="check-boxall cursor-pointer"
+                                        (click)="toggleSelectAll()">Select All</label>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="flex w-3/4 justify-end">
+                            <div class="px-1">
+                                <button type="button" class="ti-btn ti-btn-soft-secondary h-45px m-0 shadow-md"
+                                    [class.ti-btn-disabled]="selectEmp.size-1 <= 0" [disabled]="selectEmp.size-1 <= 0"
+                                    (click)="postBossApproveAll()">
+                                    ยืนยันการอนุมัติ
+                                </button>
+                            </div>
+                            <div class="px-1">
+                                <div class="relative shadow-md">
+                                    <input type="text" class="ti-form-input ltr:pl-11 rtl:pr-11 focus:z-10 "
+                                        placeholder="Search by No. or Name" [(ngModel)]="search">
+                                    <div
+                                        class="absolute inset-y-0 ltr:left-0 rtl:right-0 flex items-center pointer-events-none z-20 ltr:pl-4 rtl:pr-4">
+                                        <i class="ri-search-line text-gray"></i>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="flex flex-col w-100">
+                        <div class="overflow-auto rounded-t-md">
+                            <div id="card-type-1" role="tabpanel" aria-labelledby="card-type-item-1">
+                                <div class="overflow-auto shadow-md">
+                                    <table class="ti-custom-table ti-custom-table-head ti-custom-table-hover">
+                                        <thead>
+                                            <tr>
+                                                <ng-container
+                                                    *ngFor="let item of subordinate.select?.showPms?['','รหัสพนักงาน','ชื่อพนักงาน','ตำเเหน่งงาน','ประเมิน','ผลประเมิน','เกรด' ,'สถานะผู้ประเมิน']:
+                                                        ['','รหัสพนักงาน','ชื่อพนักงาน','ตำเเหน่งงาน','ประเมิน','เเผนพัฒนา','สถานะผู้ประเมิน']; let f = first; let l = last; let i = index">
+                                                    <th scope="col"
+                                                        class="relative px-10px py-10px bg-soft-secondary text-primary !text-center">
+                                                        <span class="text-sm">{{ item }}</span>
+                                                        <div *ngIf="!f"
+                                                            class="absolute top-1/2 transform -translate-y-1/2 right-0">
+                                                            <svg class="head-table-icon"
+                                                                xmlns="http://www.w3.org/2000/svg" width="50"
+                                                                height="16" fill="currentColor" viewBox="0 0 16 16">
+                                                                <path
+                                                                    d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z">
+                                                                </path>
+                                                            </svg>
+                                                        </div>
+                                                    </th>
+                                                </ng-container>
+                                            </tr>
+                                        </thead>
+                                        <tbody *ngIf="subordinate.loading">
+                                            <tr>
+                                                <td class="text-center" colspan="100%">
+                                                    <div *ngFor="let item of [1,2,3]"
+                                                        class="ti-spinner w-8 h-8 text-secondary mx-1" role="status"
+                                                        aria-label="loading">
+                                                        <span class="sr-only">Loading...</span>
+                                                    </div>
+                                                </td>
+                                            </tr>
+                                        </tbody>
+                                        <tbody *ngIf="!subordinate.loading&&!subordinateFilter().length">
+                                            <tr>
+                                                <td class="text-center" colspan="100%">
+                                                    ไม่พบข้อมูล
+                                                </td>
+                                            </tr>
+                                        </tbody>
+                                        <tbody *ngIf="!subordinate.loading&&subordinateFilter().length">
+                                            <tr *ngFor="let item of subordinateFilter();let i = index">
+                                                <td class="text-center" style="font-size: 12px; width: 150px;">
+                                                    <div class="flex-col gap-2">
+                                                        <input
+                                                            [disabled]="!(item.apsapproveType.code!='Apsapprove1'&&(item.masfromStatusType.code=='evaluating'||item.masfromStatusType.code=='pending'))"
+                                                            [class.cursor-not-allowed]="!(item.apsapproveType.code!='Apsapprove1'&&(item.masfromStatusType.code=='evaluating'||item.masfromStatusType.code=='pending'))"
+                                                            [class.accent-gray-400]="!(item.apsapproveType.code!='Apsapprove1'&&(item.masfromStatusType.code=='evaluating'||item.masfromStatusType.code=='pending'))"
+                                                            [class.opacity-50]="!(item.apsapproveType.code!='Apsapprove1'&&(item.masfromStatusType.code=='evaluating'||item.masfromStatusType.code=='pending'))"
+                                                            type="checkbox" class="ti-form-checkbox cursor-pointer"
+                                                            [checked]="selectEmp.get(item.apsassessy.employeeId)"
+                                                            (click)="!selectEmp.get(item.apsassessy.employeeId)?selectEmp.set(item.apsassessy.employeeId , true):selectEmp.delete(item.apsassessy.employeeId);checkSelectAll()">
+                                                        &nbsp;
+                                                        <ng-container
+                                                            *ngIf="item.apsapproveType.code!='Apsapprove1'&&(item.masfromStatusType.code=='evaluating'||item.masfromStatusType.code=='pending')">
+                                                            <img (click)="!selectEmp.get(item.apsassessy.employeeId)?selectEmp.set(item.apsassessy.employeeId , true):selectEmp.delete(item.apsassessy.employeeId);checkSelectAll()"
+                                                                class="cursor-pointer avatar shadow-none rounded-full !ring-transparent object-cover h-12 w-12"
+                                                                [src]="item.apsassessy.picture?url+'/employee/image/'+item.apsassessy.picture:'./assets/img/users/defaultperson.jpg'">
+                                                        </ng-container>
+                                                        <ng-container
+                                                            *ngIf="!(item.apsapproveType.code!='Apsapprove1'&&(item.masfromStatusType.code=='evaluating'||item.masfromStatusType.code=='pending'))">
+                                                            <img class="cursor-pointer avatar shadow-none rounded-full !ring-transparent object-cover h-12 w-12"
+                                                                [src]="item.apsassessy.picture?url+'/employee/image/'+item.apsassessy.picture:'./assets/img/users/defaultperson.jpg'">
+                                                        </ng-container>
+                                                    </div>
+                                                </td>
+                                                <td class="text-center" style="font-size: 12px; width: 150px;">
+                                                    {{item.apsassessy.employeeId}}
+                                                </td>
+                                                <td style="font-size: 12px; width: 175px;">
+                                                    {{item.apsassessy.thFullName}}
+                                                </td>
+                                                <td style="font-size: 12px;">{{item.apsassessy.position.tdesc}}</td>
+                                                <td class="text-center">
+                                                    <div class="flex justify-center">
+                                                        <button type="button" class="ti-btn rounded-sm "
+                                                            [class]="statusButtonClass(item.statusIdp.statusType)"
+                                                            style="height: 30px; width: auto; font-size: 12px; display: flex; align-items: center; justify-content: center;margin-left:4px;"
+                                                            (click)="selectSubordinate(item,'',subordinate.select?.evaluationRoundId,item.statusIdp.statusType);pageEvalution='open'">
+                                                            {{statusCompetencyText(item.statusIdp.statusType)}}
+                                                        </button>
+                                                    </div>
+                                                </td>
+                                                <td class="text-center" style="font-size: 12px;"
+                                                    *ngIf="subordinate.select?.showPms">
+                                                    {{item.sumScore}}</td>
+                                                <td class=" text-center" style="font-size: 12px;"
+                                                    *ngIf="subordinate.select?.showPms">
+                                                    {{item.grade}}</td>
+                                                <td class=" text-center" style="font-size: 12px;">
+                                                    {{item.apsapproveType.tdesc}}
+                                                </td>
+                                            </tr>
+                                        </tbody>
+                                    </table>
+                                </div>
+                            </div>
+                        </div>
+                        <nav class="pagination-style-3 my-5" *ngIf="page.length">
+                            <ul class="ti-pagination">
+                                <li>
+                                    <a aria-label="anchor" class="page-link" href="javascript:void(0);"
+                                        (click)="currentPage = (currentPage-1 || 1)">
+                                        <i class="ri-arrow-left-s-line align-middle rtl:rotate-180"></i>
+                                    </a>
+                                </li>
+                                <li *ngFor="let item of page;let f = first;let l = last">
+                                    <ng-container *ngIf="item==3&&currentPage!=1&&currentPage!=2&&currentPage!=3">
+                                        <a aria-label="anchor" class="page-link" href="javascript:void(0);"><i
+                                                class="ri-more-line"></i>
+                                        </a>
+                                    </ng-container>
+                                    <ng-container
+                                        *ngIf="(f||l)||(item==currentPage-1||item==currentPage||item==currentPage+1)">
+                                        <a class="page-link" href="javascript:void(0);"
+                                            [class.active]="item==currentPage" (click)="currentPage=item">{{item}}
+                                        </a>
+                                    </ng-container>
+                                    <ng-container
+                                        *ngIf="item==page.length-2&&currentPage!=page.length&&currentPage!=page.length-1&&currentPage!=page.length-2">
+                                        <a aria-label="anchor" class="page-link" href="javascript:void(0);"><i
+                                                class="ri-more-line"></i>
+                                        </a>
+                                    </ng-container>
+                                </li>
+                                <li>
+                                    <a aria-label="anchor" class="page-link" href="javascript:void(0);"
+                                        (click)="currentPage = (currentPage > page.length-1 ? currentPage: currentPage+1 )">
+                                        <i class="ri-arrow-right-s-line align-middle rtl:rotate-180"></i>
+                                    </a>
+                                </li>
+                            </ul>
+                            <ul class="nav-tabs mt-3">
+                                <span>Show {{((currentPage-1) * 10)+1}} to {{subordinateFilter().length<10
+                                        ?subordinateFilter().length: (currentPage==page.length ? ((currentPage * 10) -
+                                        ((currentPage * 10) - subordinateFilter().length) ) :(currentPage * 10) ) }} of
+                                        {{subordinateFilter().length}} items</span>
+                            </ul>
+                        </nav>
+                    </div>
                 </div>
             </div>
-        </ng-container>
-    </div>
-</ng-container>
 
-<ng-container *ngIf="pageEvalution=='idp'">
-    <app-pms-form-employee [evaluationForm]="'sup'" [currentTap]="'ข้อมูลการประเมิน'"
-        (sendReturnPath)="getBossList();pageEvalution='' ; pathTitle =  ['การประเมินผล', 'ประเมินโดยหัวหน้า']"
-        [evaluaterId]="formEvaluation.evaluaterId" [evaluateeId]="formEvaluation.evaluateeId"></app-pms-form-employee>
-</ng-container>
-<ng-container *ngIf="pageEvalution=='pms'">
-    <app-pms-form-employee [evaluationForm]="'sup'" [currentTap]="'ข้อมูลการประเมิน'"
-        (sendReturnPath)="getBossList();pageEvalution='' ; pathTitle =  ['การประเมินผล', 'ประเมินโดยหัวหน้า']"
-        [evaluaterId]="formEvaluation.evaluaterId" [evaluateeId]="formEvaluation.evaluateeId"></app-pms-form-employee>
-</ng-container>
-<ng-container *ngIf="pageEvalution!='idp'&&pageEvalution!='pms'&&pageEvalution!=''">
+        </div>
+    </div>
+</div>
+<ng-container *ngIf="pageEvalution!=''">
     <app-pms-form-employee [evaluationForm]="'sup'" [currentTap]="'ข้อมูลการประเมิน'"
         (sendReturnPath)="getBossList();pageEvalution='' ; pathTitle =  ['การประเมินผล', 'ประเมินโดยหัวหน้า']"
         [evaluaterId]="formEvaluation.evaluaterId" [evaluateeId]="formEvaluation.evaluateeId"></app-pms-form-employee>

src/app/components/performance-evaluation/supervisor-evaluation/supervisor-evaluation.component.ts

 import { ChangeDetectorRef, Component } from '@angular/core';
+import { EChartsOption } from 'echarts';
 import { AppraisalSubordinateModel, Masfromevaluationassessment, TypeList } from 'src/app/shared/model/appraisal-subordinate.model';
 import { AppraisalService } from 'src/app/shared/services/appraisal.service';
-
+import { environment } from 'src/environments/environment';
+import Swal from 'sweetalert2';
 @Component({
   selector: 'app-supervisor-evaluation',
   templateUrl: './supervisor-evaluation.component.html',
@@ -23,6 +25,8 @@ export class SupervisorEvaluationComponent {
     allCompetencyTypeId: <TypeList[]>[],
     masfromStatusType: ""
   }
+  url = environment.baseUrl
+  selectEmp: Map<string, boolean> = new Map<string, boolean>()
   statusButtonClass = (status: string) => {
     if (status === "no access") {
       return "ti-btn-soft-mute"
@@ -53,6 +57,13 @@ export class SupervisorEvaluationComponent {
       return ""
     }
   }
+
+
+  subordinateApproveOption!: EChartsOption;
+  subordinateApprovePer: number = 0
+  myApproveOption!: EChartsOption;
+  myApprovePer: number = 0
+  pmsOption!: EChartsOption;
   constructor(private appraisalService: AppraisalService,
     private cdr: ChangeDetectorRef) {
   }
@@ -67,6 +78,7 @@ export class SupervisorEvaluationComponent {
         this.cdr.detectChanges()
         if (this.subordinate.dataList.length) {
           this.subordinate.select = JSON.parse(JSON.stringify(this.subordinate.dataList[0]))
+          this.setEcharts()
           this.cdr.detectChanges()
         }
         this.searchChange()
@@ -76,18 +88,159 @@ export class SupervisorEvaluationComponent {
     })
   }
   selectDataList(data?: AppraisalSubordinateModel) {
+    this.selectEmp.clear()
     this.subordinate.select = JSON.parse(JSON.stringify(data))
+    this.setEcharts()
     this.cdr.detectChanges()
     this.searchChange()
   }
 
-
+  subordinateAll() {
+    return this.subordinate.select?.masfromevaluationassessment.length || 0
+  }
+  subordinateRemain() {
+    return this.subordinate.select?.masfromevaluationassessment.filter(e => e.masfromStatusType.code == 'no access').length || 0
+  }
+  subordinateApprove() {
+    return this.subordinate.select?.masfromevaluationassessment.filter(e => e.masfromStatusType.code != 'no access').length || 0
+  }
+  myRemain() {
+    return this.subordinate.select?.masfromevaluationassessment.filter(e => e.masfromStatusType.code == 'no access' || e.masfromStatusType.code == 'pending' || e.masfromStatusType.code == 'evaluating').length || 0
+  }
+  myApprove() {
+    return this.subordinate.select?.masfromevaluationassessment.filter(e => e.masfromStatusType.code != 'no access' && e.masfromStatusType.code != 'pending' && e.masfromStatusType.code != 'evaluating').length || 0
+  }
+  gradeAll() {
+    return this.subordinate.select?.masfromevaluationassessment.map(e => e.grade) || []
+  }
+  gradeFindLength(text: string) {
+    return this.gradeAll().filter(x => x == text).length || 0
+  }
+  gradeFindPer(text: string) {
+    return this.gradeAll().length > 0 ? Math.round((this.gradeFindLength(text) / this.gradeAll().length) * 100) : 0;
+  }
+  gradeColor(text: string) {
+    if (text == 'A') return '#C084FC';
+    if (text == 'B') return '#2563EB';
+    if (text == 'C') return '#FB923C';
+    if (text == 'D') return '#22C55E';
+    if (text == 'E') return '#FEDDDE';
+    return '';
+  };
+  setEcharts() {
+    const full = this.subordinateAll()
+    const remain = this.subordinateRemain()
+    const approve = this.subordinateApprove()
+    this.subordinateApprovePer = full > 0 ? Math.round((approve / full) * 100) : 0;
+    this.subordinateApproveOption = {
+      tooltip: {
+        trigger: 'item',
+        formatter: '{b}: {c} ({d}%)'
+      },
+      legend: {
+        show: false
+      },
+      series: [
+        {
+          type: 'pie',
+          radius: ['55%', '80%'],
+          data: [
+            {
+              value: full - remain,
+              itemStyle: { color: '#60A5FA' },
+              name: 'ประเมินแล้ว',
+            },
+            {
+              value: remain,
+              itemStyle: { color: '#00000033' },
+              name: 'ยังไม่ประเมิน',
+            }
+          ],
+          label: {
+            show: false
+          },
+          labelLine: {
+            show: false
+          }
+        }
+      ]
+    };
+    const myRemain = this.myRemain()
+    const myApprove = this.myApprove()
+    this.myApprovePer = full > 0 ? Math.round((myApprove / full) * 100) : 0;
+    this.myApproveOption = {
+      tooltip: {
+        trigger: 'item',
+        formatter: '{b}: {c} ({d}%)'
+      },
+      legend: {
+        show: false
+      },
+      series: [
+        {
+          type: 'pie',
+          radius: ['55%', '80%'],
+          data: [
+            {
+              value: full - myRemain,
+              itemStyle: { color: '#F23354' },
+              name: 'อนุมัติแล้ว',
+            },
+            {
+              value: myRemain,
+              itemStyle: { color: '#00000033' },
+              name: 'ยังไม่อนุมัติ',
+            }
+          ],
+          label: {
+            show: false
+          },
+          labelLine: {
+            show: false
+          }
+        }
+      ]
+    }
+    this.subordinate.select?.masfromevaluationassessment.map(e => e.grade)
+    const dataPms = this.gradeAll().filter(e => e).map(e => {
+      return {
+        value: this.gradeFindLength(e),
+        itemStyle: { color: this.gradeColor(e) },
+        name: 'Grade ' + e,
+      }
+    })
+    this.pmsOption = {
+      tooltip: {
+        trigger: 'item',
+        formatter: '{b}: {c} ({d}%)'
+      },
+      legend: {
+        show: false
+      },
+      series: [
+        {
+          type: 'pie',
+          radius: ['55%', '80%'],
+          data: dataPms,
+          label: {
+            show: false
+          },
+          labelLine: {
+            show: false
+          }
+        }
+      ]
+    };
+  }
   subordinateFilter() {
     if (this.subordinate.select) {
       return this.subordinate.select.masfromevaluationassessment.filter(x => {
         return x.apsassessy.employeeId.toLowerCase().includes(this.search.toLowerCase()) ||
           x.apsassessy.thFullName.toLowerCase().includes(this.search.toLowerCase()) ||
-          x.apsassessy.position.tdesc.toLowerCase().includes(this.search.toLowerCase())
+          x.apsassessy.position.tdesc.toLowerCase().includes(this.search.toLowerCase()) ||
+          this.statusCompetencyText(x.apsassessy.position.tdesc).toLowerCase().includes(this.search.toLowerCase()) ||
+          x.grade.toLowerCase().includes(this.search.toLowerCase()) ||
+          x.apsapproveType.tdesc.toLowerCase().includes(this.search.toLowerCase())
       })
     }
     return []
@@ -117,4 +270,97 @@ export class SupervisorEvaluationComponent {
     }).join(''));
     return JSON.parse(jsonPayload);
   }
+
+  toggleSelectAll() {
+    if (this.subordinateFilter().filter(e => e.apsapproveType.code != 'Apsapprove1' && (e.masfromStatusType.code == 'evaluating' || e.masfromStatusType.code == 'pending')).length > 0) {
+      if (!this.selectEmp.get('selectAll')) {
+        this.selectEmp.set('selectAll', true)
+        this.subordinateFilter().filter(e => e.apsapproveType.code != 'Apsapprove1' && (e.masfromStatusType.code == 'evaluating' || e.masfromStatusType.code == 'pending')).forEach(e => {
+          this.selectEmp.set(e.apsassessy.employeeId, true)
+        })
+      } else {
+        this.selectEmp.set('selectAll', false)
+        this.selectEmp.clear()
+      }
+    }
+  }
+
+  checkSelectAll() {
+    this.selectEmp.set('selectAll', (this.subordinateFilter().filter(e => e.apsapproveType.code != 'Apsapprove1' && (e.masfromStatusType.code == 'evaluating' || e.masfromStatusType.code == 'pending')).length > 0 && this.subordinateFilter().filter(e => e.apsapproveType.code != 'Apsapprove1' && (e.masfromStatusType.code == 'evaluating' || e.masfromStatusType.code == 'pending')).length == this.selectEmp.size - 1))
+  }
+  postBossApproveAll() {
+    if (this.subordinate.select) {
+      Swal.fire({
+        iconHtml: `
+                    <div class="flex items-center justify-center rounded-full !h-80px !w-80px" style="background-color: #E8F8EE;">
+                        <svg width="39" height="39" viewBox="0 0 39 39" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <rect width="39" height="39" fill="#D2D2D2"/>
+                            <g id="Component">
+                                <g id="alert cart">
+                                    <g id="mdi:file-export">
+                                        <circle cx="22.5" cy="19.5" r="33.5" fill="#E8F8EE"/>
+                                        <path d="M9.75 3.25C8.88805 3.25 8.0614 3.59241 7.4519 4.2019C6.84241 4.8114 6.5 5.63805 6.5 6.5V32.5C6.5 33.362 6.84241 34.1886 7.4519 34.7981C8.0614 35.4076 8.88805 35.75 9.75 35.75H29.25C30.112 35.75 30.9386 35.4076 31.5481 34.7981C32.1576 34.1886 32.5 33.362 32.5 32.5V13L22.75 3.25M21.125 5.6875L30.0625 14.625H21.125M14.5113 19.8575H26V31.3463L22.555 27.9013L17.9563 32.5L13.3575 27.9013L17.9563 23.3188" 
+                                        fill="#1DBE5A"/>
+                                    </g>
+                                </g>
+                            </g>
+                        </svg>
+                    </div>
+                    `,
+        title: 'อนุมัติ',
+        text: 'คุณต้องการยืนยันการอนุมัตินี้ใช่หรือไม่',
+        showCancelButton: true,
+        confirmButtonText: 'ยืนยันการอนุมัติ',
+        cancelButtonText: 'ย้อนกลับ',
+        customClass: {
+          title: '!swal2-title-mt-20px',
+          actions: '!swal2-actions-mt-20px',
+          icon: '!swal2-icon-no-border',
+          confirmButton: '!swal2-button-bg-green',
+          cancelButton: '!swal2-button-bg-gray',
+        },
+      }).then((result) => {
+        if (result.isConfirmed) {
+          const body = {
+            masFromEvaluationRoundId: this.subordinate.select!.evaluationRoundId,
+            employeeId: Array.from(this.selectEmp.entries())
+              .filter(([_, value]) => value)
+              .map(([key]) => key).filter(e => e != 'selectAll')
+          }
+          this.appraisalService.postBossApproveAll(body).subscribe(response => {
+            if (response.success) {
+              this.selectEmp.clear()
+              this.getBossList()
+              Swal.fire({
+                title: 'บันทึกสำเร็จ!',
+                text: 'การอนุมัติของคุณถูกบันทึกแล้ว',
+                icon: 'success',
+                customClass: {
+                  confirmButton: '!swal2-button-bg-green',
+                }
+              });
+            } else {
+              Swal.fire({
+                title: 'ยกเลิก!',
+                text: 'การอนุมัติถูกยกเลิก',
+                icon: 'error',
+                customClass: {
+                  confirmButton: '!swal2-button-bg-danger',
+                }
+              });
+            }
+          })
+        } else if (result.dismiss === Swal.DismissReason.cancel) {
+          Swal.fire({
+            title: 'ยกเลิก!',
+            text: 'การอนุมัติถูกยกเลิก',
+            icon: 'error',
+            customClass: {
+              confirmButton: '!swal2-button-bg-danger',
+            }
+          })
+        }
+      })
+    }
+  }
 }

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

@@ -679,46 +679,20 @@
             </div> -->
             <div class="header-profile hs-dropdown ti-dropdown" data-hs-dropdown-placement="bottom-right">
               <button id="dropdown-profile" type="button"
-                class="hs-dropdown-toggle ti-dropdown-toggle gap-2 p-0 flex-shrink-0 h-8 w-8 rounded-full shadow-none focus:ring-gray-400 text-xs dark:focus:ring-white/10">
-                <!-- <img *ngIf="employeeProfile?.picture && employeeProfile.picture !== ''; else defaultImage"
-                    class="inline-block rounded-full ring-2 h-full !ring-transparent"
-                    [src]="employeeProfile.picture"
-                    alt="Image Description"
-                    (error)="onImageError($event)"/>
-
-                <ng-template #defaultImage>
-                  <img
-                    class="inline-block rounded-full ring-2 h-full !ring-transparent"
-                    src="./assets/img/users/defaultperson.jpg"
-                    alt="Image Description" />
-                </ng-template> -->
-                <img class="inline-block rounded-full ring-2 h-full !ring-transparent" src="./assets/img/users/man.PNG"
-                  alt="Image Description" />
+                class="hs-dropdown-toggle ti-dropdown-toggle gap-2 p-0 flex-shrink-0 rounded-full shadow-none focus:ring-gray-400 text-xs">
+                <img class="avatar shadow-none rounded-full !ring-transparent object-cover h-8 w-8"
+                  [src]="employeeProfile.picture?url+'/employee/image/'+employeeProfile.picture:'./assets/img/users/defaultperson.jpg'">
               </button>
 
               <div class="hs-dropdown-menu ti-dropdown-menu border-0 w-[20rem]" aria-labelledby="dropdown-profile">
                 <div class="ti-dropdown-header !bg-primary flex items-center space-x-3">
                   <div class="flex-shrink-0">
-                    <!-- <img class="avatar shadow-none rounded-full h-full !ring-transparent" src="./assets/img/users/profile2.jpg"
-                      alt="profile-img" /> -->
-                    <!-- <img *ngIf="employeeProfile?.picture && employeeProfile.picture !== ''; else defaultImage"
-                        class="inline-block rounded-full ring-2 h-12 w-12 !ring-transparent"
-                        [src]="employeeProfile.picture"
-                        alt="Image Description"
-                        (error)="onImageError($event)"/>
-
-                    <ng-template #defaultImage>
-                      <img
-                        class="inline-block rounded-full ring-2 h-12 w-12 !ring-transparent"
-                        src="./assets/img/users/defaultperson.jpg"
-                        alt="Image Description" />
-                    </ng-template> -->
-                    <img class="avatar shadow-none rounded-full !ring-transparent" src="./assets/img/users/man.PNG"
-                      alt="Image Description" />
+                    <img class="avatar shadow-none rounded-full !ring-transparent object-cover"
+                      [src]="employeeProfile.picture?url+'/employee/image/'+employeeProfile.picture:'./assets/img/users/defaultperson.jpg'">
                   </div>
                   <div>
-                    <p class="ti-dropdown-header-title !text-white">
-                      {{this.employeeProfile.thFullName?this.employeeProfile.thFullName:''}}
+                    <p class=" ti-dropdown-header-title !text-white">
+                      {{employeeProfile.thFullName?employeeProfile.thFullName:''}}
                     </p>
                     <p class="ti-dropdown-header-content !text-white/50 " style="font-size: 12px;">
                       {{tokenService.getUserData().position?tokenService.getUserData().position.tdesc:'-'}}
@@ -726,11 +700,7 @@
                   </div>
                 </div>
                 <div class="mt-2 ti-dropdown-divider">
-                  <!-- <a routerLink="/profile/home" class="ti-dropdown-item">
-                    <i class="ti ti-user-circle text-lg"></i>
-                    Profile
-                  </a>
-                  <a routerLink="/mail/mail" class="ti-dropdown-item">
+                  <!-- <a routerLink="/mail/mail" class="ti-dropdown-item">
                     <i class="ti ti-inbox text-lg"></i>
                     Inbox
                   </a>
@@ -738,10 +708,14 @@
                     <i class="ti ti-clipboard-check text-lg"></i>
                     Task Manager
                   </a> -->
-                   <a routerLink="/ess/my-skill-x-module" class="ti-dropdown-item cursor-pointer">
+                  <a routerLink="/ess/my-skill-x-module" class="ti-dropdown-item cursor-pointer">
                     <i class="ti ti-home text-lg"></i>
                     หน้าหลัก
                   </a>
+                  <a routerLink="/ess/profile" class="ti-dropdown-item">
+                    <i class="ti ti-user-circle text-lg"></i>
+                    ข้อมูลพนักงาน
+                  </a>
                   <!-- <a *ngIf="!router.url.includes('/self-evaluation')" (click)="onNextPartClick('/self-evaluation')"
                     class="ti-dropdown-item cursor-pointer">
                     <i class="ti ti-settings text-lg"></i>
@@ -769,7 +743,7 @@
             </div>
             <div class="header-name">
               <span class="dark:text-black/30 text-black text-center">
-                {{this.employeeProfile.thFullName?this.employeeProfile.thFullName:''}} </span>
+                {{employeeProfile.thFullName?employeeProfile.thFullName:''}} </span>
             </div>
           </div>
         </div>
@@ -920,4 +894,4 @@
     </div>
   </div>
 </div>
-<!-- ========== END Search Modal ========== -->
+<!-- ========== END Search Modal ========== -->
\ No newline at end of file

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

@@ -6,6 +6,8 @@ import { TokenService } from '../../services/token.service';
 import { EmployeeService } from '../../services/employee.service';
 import { EmployeeModel, MyEmployeeModel } from '../../model/employee.model';
 import { ActivatedRoute, Router } from '@angular/router';
+import { environment } from 'src/environments/environment';
+import { HttpClient } from '@angular/common/http';
 
 @Component({
   selector: 'app-header',
@@ -15,6 +17,7 @@ import { ActivatedRoute, Router } from '@angular/router';
 
 export class HeaderComponent {
   employeeProfile: EmployeeModel = new MyEmployeeModel();
+  url = environment.baseUrl
   constructor(public navServices: NavService,
     private authService: AuthService,
     public tokenService: TokenService,
@@ -22,10 +25,13 @@ export class HeaderComponent {
     private elementRef: ElementRef,
     public router: Router,
     private route: ActivatedRoute,
-    private navService: NavService) {
+    private navService: NavService, private http: HttpClient) {
     this.getEvaluatee();
 
   }
+  imageUrl = ''
+
+
   getEvaluatee() {
     this.employeeProfile = new MyEmployeeModel(JSON.parse(sessionStorage.getItem('employeeProfile') || '{}'));
     if (this.employeeProfile?.employeeId == undefined || this.employeeProfile?.employeeId == null || this.employeeProfile?.employeeId == '') {

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

@@ -92,7 +92,7 @@ export class SidebarComponent {
     this.currentUrl = this.router.url
     this.isESSRoute = this.currentUrl.includes('/ess');
     this.isAdminRoute = this.currentUrl.includes('/admin');
-    this.showSideMenu = this.currentUrl.includes('my-skill-x-module') || this.currentUrl.includes('employee-self-service')
+    this.showSideMenu = this.currentUrl.includes('my-skill-x-module') || this.currentUrl.includes('employee-self-service') || this.currentUrl.includes('ess/profile')
     if (this.showSideMenu) {
       const html: any = this.elementRef.nativeElement.ownerDocument.documentElement;;
       html.style = '';
@@ -131,7 +131,6 @@ export class SidebarComponent {
     switcherArrowFn();
     checkHoriMenu();
     if (document.documentElement.getAttribute('data-nav-layout') == 'horizontal' && window.innerWidth > 992) {
-      console.log('Horizontal menu detected');
       this.closeNavActive()
     }
 
@@ -162,7 +161,7 @@ export class SidebarComponent {
         // Update the boolean values
         this.isESSRoute = this.currentUrl.includes('/ess');
         this.isAdminRoute = this.currentUrl.includes('/admin');
-        this.showSideMenu = this.currentUrl.includes('my-skill-x-module') || this.currentUrl.includes('employee-self-service')
+        this.showSideMenu = this.currentUrl.includes('my-skill-x-module') || this.currentUrl.includes('employee-self-service') || this.currentUrl.includes('ess/profile')
         if (this.showSideMenu) {
           const html: any = this.elementRef.nativeElement.ownerDocument.documentElement;;
           html.style = '';

src/app/shared/model/appraisal-subordinate.model.ts

@@ -13,7 +13,7 @@ export interface Masfromevaluationassessment {
     masfromStatusType: MasfromStatusType
     apsapproveType: ApsapproveType
     apsassessy: Apsassessy
-    gread: string
+    grade: string
     sumScore: number
     typeList: TypeList[]
     statusIdp: {
@@ -62,6 +62,8 @@ export interface Apsassessy {
     endWorkDate: string
     thFullName: string
     engFullName: string
+    picture: string
+    pictureBytes: string
 }
 
 export interface Prefix {
@@ -150,4 +152,5 @@ export interface TypeList {
     statusType: string
     competencyTypeId: string
     shortName: string
+    averageScore: string
 }
\ No newline at end of file

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

@@ -44,4 +44,11 @@ export class AppraisalService {
   postPms(body: AppraisalPmsFormModel): Observable<AlertModel> {
     return this.http.post<AlertModel>(this.urlApi + "/pms", body)
   }
+
+  postBossApproveAll(body: {
+    masFromEvaluationRoundId: string,
+    employeeId: string[]
+  }): Observable<AlertModel> {
+    return this.http.post<AlertModel>(this.urlApi + "/approveAll", body)
+  }
 }
\ No newline at end of file

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

@@ -57,4 +57,7 @@ export class EmployeeService {
     };
     return this.http.delete<AlertModel>(this.baseUrlapi + "/profile-delete", options)
   }
+  getProfileMini(): Observable<EmployeeModel> {
+    return this.http.get<EmployeeModel>(this.baseUrlapi + "/profile/mini")
+  }
 }

src/assets/css/style.css

@@ -4285,6 +4285,9 @@ select option:focus {
 .w-1\/2 {
   width: 50%;
 }
+.w-1\/3 {
+  width: 33.33%;
+}
 .w-1\/4 {
   width: 25%;
 }