ess

src/app/app-routing.module.ts

@@ -9,6 +9,7 @@ import { ContentLayoutComponent } from './shared/layout-components/content-layou
 import { Pages } from './shared/routes/content-routes';
 import { Error404Component } from './components/authentication/errorpages/error404/error404.component';
 import { MySkillXModuleComponent } from './components/my-skill-x-module/my-skill-x-module.component';
+import { EmployeeSelfServiceComponent } from './components/employee-self-service/employee-self-service.component';
 
 const routes: Routes = [
   { path: '', redirectTo: 'auth/login', pathMatch: 'full' },
@@ -26,7 +27,8 @@ const routes: Routes = [
   },
   { path: '', component: CustomLayoutComponent, children: COUNTENT_ROUTES },
   { path: '', component: ContentLayoutComponent, children: Pages },
-  { path: 'myskill-x-home', component: MySkillXModuleComponent},
+  { path: 'myskill-ess-pms', component: EmployeeSelfServiceComponent },
+  { path: 'myskill-x-home', component: MySkillXModuleComponent },
   { path: '**', component: Error404Component },
 ];
 

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

+<app-header></app-header>
+
+<main class="wrapper">
+  <div class="page-grid">
+
+    <!-- ── HERO (ซ้าย) ─────────────────────────── -->
+    <aside class="hero-card bp-glow">
+      <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>
+
+      <button class="hero-btn">Dashboard</button>
+
+      <a routerLink="/myskill-x-home" class="back-link">
+        <i class="ti ti-arrow-left"></i> กลับสู่เมนูหลัก
+      </a>
+    </aside>
+
+    <!-- ── MENU GRID (ขวา) ──────────────────────── -->
+    <section class="sub-grid">
+      <div *ngFor="let m of modules" class="sub-card">
+        <p class="sub-title">{{ m.title }}</p>
+      </div>
+    </section>
+
+  </div>
+</main>

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;
+$radius-main: 28px;
+$radius-sub: 20px;
+$dur: 0.35s;
+$easing: cubic-bezier(0.4, 0, 0.2, 1);
+$shadow-base: 0 14px 30px -12px rgba(0, 0, 0, 0.18);
+$shadow-deep: 0 20px 42px -16px rgba(0, 0, 0, 0.24);
+
+/* ===== wrapper ===== */
+.hero-wrap {
+  display: flex;
+  justify-content: center;   /* ให้อยู่กลางแถว */
+  align-items: flex-start;
+  width: 100%;
+
+  /* ถ้าเซ็ตคอลัมน์ “ซ้าย-ขวา” ด้วย Grid ภายนอกอยู่แล้ว
+     hero-wrap อาจไม่ต้อง flex; ใส่แค่ max-width ก็พอ */
+}
+.wrapper {
+  max-width: 1400px;
+  margin: 0 auto;
+  margin-top: 5rem;
+  padding: 3rem 1.25rem;
+}
+/* ===== GRID ชั้นแรก ===== */
+.page-grid {
+  display: grid;
+  gap: $gap-main;                   // ช่องไฟหลัก
+  grid-template-columns: $col-hero 1fr;
+  justify-items: start;             // จัดบล็อกชิดซ้าย
+
+  /* จอ < 768px ➜ 1 คอลัมน์ */
+  @media (max-width: 767px) {
+    grid-template-columns: 1fr;     // 👉 สลับเป็นคอลัมน์เดียว
+    row-gap: 2rem;                  // ช่องไฟระหว่างแถว
+  }
+}
+
+/* ===== HERO CARD (คงเดิม – ตัด flex ออก) ===== */
+.hero-card {
+  width: 100%;              /* ยืดเต็มคอลัมน์ */
+  max-width: 280px;         /* แต่กว้างไม่เกิน 280px */
+  box-sizing: border-box;
+
+  /* ⬇︎ PADDING ยืดหดตามจอ: 1rem–1.75rem */
+  padding-inline: clamp(1rem, 4vw, 1.75rem);
+  padding-block: 2rem 3rem;
+
+  /* —— ส่วนสไตล์เดิม (shadow, glow, hover ฯลฯ) —— */
+  position: relative;
+  border-radius: $radius-main;
+  background: #fff;
+  box-shadow: $shadow-base;
+  display: grid;
+  place-items: center;
+  gap: 1.3rem;
+  text-align: center;
+  transition: transform $dur $easing,
+              box-shadow $dur $easing;
+
+  &:hover { transform: translateY(-6px); box-shadow: $shadow-deep; }
+
+  &.bp-glow::before {
+    content: '';
+    position: absolute;
+    inset: -3px;
+    border-radius: inherit;
+    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; }
+}
+.hero-img {
+  width: 10rem;
+}
+.hero-label {
+  font: 600 0.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: 0.9rem;
+  color: #64748b;
+  transition: color 0.25s;
+  &:hover {
+    color: #3b82f6;
+  }
+}
+/* รูปย่ออัตโนมัติบนจอแคบ */
+@media (max-width: 480px){
+  .hero-img  { max-width: 65%; }
+  .hero-wrap { padding-inline: 0; }       /* ตัด margin ซ้าย-ขวา */
+}
+/* ===== GRID ชั้นสอง – เมนูย่อย 2 แถวพอดี ===== */
+.sub-grid {
+  display: grid;
+  grid-auto-flow: column; /* เติมแนวนอนก่อน */
+  grid-template-rows: repeat(2, $size-card);
+  grid-auto-columns: $size-card;
+  gap: 1.5rem;
+  place-content: start;
+
+  /* ≥1280px ขยายการ์ด */
+  @media (min-width: 1280px) {
+    grid-template-rows: repeat(2, 170px);
+    grid-auto-columns: 170px;
+  }
+
+  /* มือถือ: 2 คอลัมน์เสมอ */
+  @media (max-width: 639px) {
+    grid-template-rows: repeat(2, 46vw);
+    grid-auto-columns: 46vw;
+  }
+}
+
+/* ===== SUB-CARD + เอฟเฟกต์ ===== */
+.sub-card {
+  position: relative;
+  border-radius: $radius-sub;
+  background: rgba(255, 255, 255, 0.5); /* glass */
+  backdrop-filter: blur(9px) saturate(170%);
+  box-shadow: 0 8px 18px -10px rgba(71, 85, 105, 0.25);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  padding: 1rem;
+  cursor: pointer;
+  user-select: none;
+  transition: transform 0.45s $easing, box-shadow 0.45s $easing,
+    background 0.45s;
+
+  /* gradient rim */
+  &::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    padding: 1px;
+    background: linear-gradient(160deg, #60a5fa, #818cf8 50%, #a855f7);
+    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+    mask-composite: exclude;
+    opacity: 0.45;
+    transition: opacity 0.4s;
+  }
+
+  &:hover {
+    background: #ffffff;
+    transform: translateY(-7px) rotateX(5deg) rotateY(-3deg);
+    box-shadow: $shadow-deep;
+
+    &::before {
+      opacity: 0.9;
+    }
+  }
+}
+.sub-title {
+  font-weight: 600;
+  font-size: 0.9rem;
+  line-height: 1.25rem;
+  color: #2563eb;
+  pointer-events: none;
+  word-break: break-word;
+}

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

 import { Component, EventEmitter, Input, Output } from '@angular/core';
-
+interface SubModule {
+  title: string;
+  route?: string;
+}
 @Component({
   selector: 'app-employee-self-service',
   templateUrl: './employee-self-service.component.html',
   styleUrls: ['./employee-self-service.component.scss']
 })
-export class EmployeeSelfServiceComponent {}
+export class EmployeeSelfServiceComponent {
+    // ▶︎ ภาพทางซ้าย (ปรับ 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' }
+  ];
+}

src/app/components/my-skill-x-module/my-skill-x-module.component.html

@@ -31,7 +31,7 @@
 
     <div class="bp-grid">
       <ng-container *ngFor="let m of hrdModules">
-        <div class="module-card">
+        <div class="module-card" routerLink="/myskill-ess-pms">
             <img [src]="m.icon"
              [alt]="m.title + ' icon'"
              class="module-img"/>