เพิ่มหน้าจอ myskill

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

@@ -78,6 +78,8 @@ import { SalarySurveyComponent } from '../salary-survey/salary-survey.component'
 import { RecruitmentSelectionComponent } from '../recruitment-selection/recruitment-selection.component';
 import { JobManagementComponent } from '../job-management/job-management.component';
 import { WelfareRewardComponent } from '../welfare-reward/welfare-reward.component';
+import { TimeAttendanceWizardComponent } from '../time-attendance-wizard/time-attendance-wizard.component';
+import { ReviewHistoryComponent } from '../review-history/review-history.component';
 
 
 
@@ -171,6 +173,8 @@ const routes: Routes = [
       { path: "ess/recruitment-selection", title: 'Recruitment & Selection', component: RecruitmentSelectionComponent },
       { path: "ess/job-management", title: 'Job Management', component: JobManagementComponent },
       { path: "ess/welfare-reward", title: 'Welfare & Reward', component: WelfareRewardComponent },
+      { path: "ess/time-attendance-wizard", title: 'TimeAttendance', component: TimeAttendanceWizardComponent },
+      { path: "ess/review-history", title: 'ดูข้อมูลย้อนหลัง', component: ReviewHistoryComponent },
     ]
   }
 ];

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

@@ -234,6 +234,8 @@ import { SalarySurveyComponent } from '../salary-survey/salary-survey.component'
 import { RecruitmentSelectionComponent } from '../recruitment-selection/recruitment-selection.component';
 import { JobManagementComponent } from '../job-management/job-management.component';
 import { WelfareRewardComponent } from '../welfare-reward/welfare-reward.component';
+import { TimeAttendanceWizardComponent } from '../time-attendance-wizard/time-attendance-wizard.component';
+import { ReviewHistoryComponent } from '../review-history/review-history.component';
 
 export const MY_DATE_FORMATS = {
   parse: {
@@ -408,6 +410,8 @@ export class CustomDateAdapter extends NativeDateAdapter {
     RecruitmentSelectionComponent,
     JobManagementComponent,
     WelfareRewardComponent,
+    TimeAttendanceWizardComponent,
+    ReviewHistoryComponent
   ], imports: [
     TranslateModule,
     CommonModule,

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

@@ -352,7 +352,7 @@ transition: transform $dur $easing,
 .text-menu-list {
   font-weight: 400;
   line-height: 58px;
-  font-size: 2rem;
+  font-size: 1.25rem;
   transition: color 0.25s;
 }
 

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

@@ -36,11 +36,11 @@ export class EmployeeSelfServiceComponent {
     { text: "JD", link: "/ess/job-description-emp" },
     { text: "Profile พนักงาน", link: "/ess/profile" },
     { text: "Job Family", link: "/ess/job-family-mapping" },
-    { text: "Time Attendance", description: "หน้าใหม่ แสดงข้อมูล TA" },
+    { text: "Time Attendance", link: "/ess/time-attendance-wizard" },
     { text: "วินัย และการลงโทษ", link: "/ess/disciplinary-action" },
     { text: "ผลงานดีเด่น", link: "/ess/outstanding-performance" },
     { text: "Feedback", link: "/ess/self-evaluation/kpi-sum10" },
-    { text: "ดูข้อมูลย้อนหลัง", description: "หน้าใหม่ แสดงListรอบประเมินตั้งแต่รอบล่าสุดถึงย้อนหลัง3ปี" },
+    { text: "ดูข้อมูลย้อนหลัง", link: "/ess/review-history" },
     { text: "Calibrate คะแนน", description: "หน้ารายงานที่มีการ Calibrate และแสดงค่า K" },
     { text: "ข้อสอบ", link: "/ess/self-evaluation/com" },
     { text: "Download เอกสาร", description: "เป็น pop up แสดงข้อมูลไฟล์ให้ดาวน์โหลด เหมือนของ myHR plus" }

src/app/components/job-description-emp/job-description-emp.component.html

@@ -11,6 +11,13 @@
                 <div class="box" style="border-radius:20px">
                     <div class="box-header">
                         <div class="grid grid-cols-12 gap-x-6 mb-3 mt-3">
+                              <div class="absolute">
+                                <button type="button" class="ti-btn ti-btn-outline ti-btn-outline-light h-20px m-0  "
+                                    style="border-radius:20px" routerLink="/ess/employee-self-service">
+                                    <i class="ti ti-chevron-left"></i>
+                                    {{'Back' | translate}}
+                                </button>
+                            </div>
                             <div class="col-span-12">
                                 <h5 class="box-title mb-3 text-center">ใบกำหนดหน้าที่ (JOB DESCRIPTION) </h5>
                             </div>

src/app/components/job-family-mapping/job-family-mapping.component.html

 <div class="row m-2">
     <div class="col-12 row w-full">
-        <div class="col-12">
-            <div class="row-center col-center" style="padding-bottom: 2rem;">
-                <div class="text-title text-blue">Job family</div>
+        <div class="row col-12 relative">
+            <div class="col-12" style="justify-content: start;display: flex;">
+                <a class="back-button absolute col-12" routerLink="/ess/employee-self-service">
+                </a>
+            </div>
+            <div class="col-12">
+                <div class="row-center col-center" style="padding-bottom: 2rem;">
+                    <div class="text-title text-blue">Job family</div>
+                </div>
             </div>
         </div>
     </div>

src/app/components/job-family-mapping/job-family-mapping.component.scss

@@ -93,6 +93,7 @@ $shadow-deep : 0 20px 42px -16px rgba(0, 0, 0, .24);
   pointer-events: none;
   word-break: break-word;
 }
+
 .text-card-title {
   font-weight: 800;
   font-size: 3.5rem;
@@ -180,4 +181,19 @@ transition: transform $dur $easing,
   &:hover {
     filter: brightness(0.9);
   }
+}
+
+.back-button {
+  width: 0;
+  height: 0;
+  border-top: 20px solid transparent;
+  border-bottom: 20px solid transparent;
+  border-right: 30px solid rgb(37 99 235);
+  cursor: pointer;
+  display: inline-block;
+  transition: transform 0.2s;
+}
+
+.back-button:hover {
+  border-right: 30px solid rgb(29 78 216);
 }
\ No newline at end of file

src/app/components/job-family-matrix/job-family-matrix.component.html

 <div class="row m-2">
     <div class="col-12 row w-full">
-        <div class="col-12">
-            <div class="row-center col-center" style="padding-bottom: 2rem;">
-                <div class="text-title text-blue">Job family Matrix</div>
+        <div class="row col-12 relative">
+            <div class="col-12" style="justify-content: start;display: flex;">
+                <a class="back-button absolute col-12" routerLink="/ess/job-family-mapping">
+                </a>
+            </div>
+            <div class="col-12">
+                <div class="row-center col-center" style="padding-bottom: 2rem;">
+                    <div class="text-title text-blue">Job family Matrix</div>
+                </div>
             </div>
         </div>
     </div>
@@ -16,8 +22,8 @@
                         <span class="col-12 col-end mb-4 mt-1">Job Family</span>
                         <span class="col-12 mt-4 mb-1">Job Grade</span>
                     </div>
-                    <div class="table-bg-b  p-2 table-border table-border-t !text-center" style="width: 150px;align-content:center"
-                        *ngFor="let item of [1,2,3,4,5,6,7]; let l = last"
+                    <div class="table-bg-b  p-2 table-border table-border-t !text-center"
+                        style="width: 150px;align-content:center" *ngFor="let item of [1,2,3,4,5,6,7]; let l = last"
                         [ngStyle]="{'border-radius': l?'0 30px 0 0':''}" [class.table-border-r]="l">
                         <span class="break-text">test head {{item}}</span>
                     </div>
@@ -32,8 +38,7 @@
                     </div>
                     <div class="p-2 table-border" style="width: 150px;align-content:start" style="width: 150px;"
                         *ngFor="let item2 of [
-                            'ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd',2,3,4,5,6,7];let l2 = last"
-                        [ngStyle]="{'border-radius': l&&l2?'0 0 30px 0':''}" [class.table-border-b]="l"
+                            'ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd',2,3,4,5,6,7];let l2 = last" [ngStyle]="{'border-radius': l&&l2?'0 0 30px 0':''}" [class.table-border-b]="l"
                         [class.table-border-r]="l2" [class.sub-table-bg-b]="o" (mouseenter)="hoveredCode = i"
                         (mouseleave)="hoveredCode = null" [ngClass]="{ 'sub-table-bg-b-hover':  i === hoveredCode }">
                         <span class="break-text"> {{item2}}</span>

src/app/components/job-family-matrix/job-family-matrix.component.scss

@@ -274,4 +274,20 @@ transition: transform $dur $easing,
 
 .sub-table-bg-b-hover {
   background-color: rgba(96, 165, 250, 0.25) !important;
+}
+
+
+.back-button {
+  width: 0;
+  height: 0;
+  border-top: 20px solid transparent;
+  border-bottom: 20px solid transparent;
+  border-right: 30px solid rgb(37 99 235);
+  cursor: pointer;
+  display: inline-block;
+  transition: transform 0.2s;
+}
+
+.back-button:hover {
+  border-right: 30px solid rgb(29 78 216);
 }
\ No newline at end of file

src/app/components/review-history/review-history.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;
+}
+
+
+.row {
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.col {
+    flex: 1;
+}
+
+@for $i from 1 through 12 {
+    $width: (
+        $i / 12) * 100%;
+
+    .col-#{$i} {
+        flex: 0 0 $width;
+        max-width: $width;
+    }
+}
+
+
+@for $i from 1 through 100 {
+    .m-#{$i}rem {
+        margin: #{$i}rem;
+    }
+
+    .mt-#{$i}rem {
+        margin-top: #{$i}rem;
+    }
+
+    .ml-#{$i}rem {
+        margin-left: #{$i}rem;
+    }
+
+    .mb-#{$i}rem {
+        margin-bottom: #{$i}rem;
+    }
+
+    .mr-#{$i}rem {
+        margin-right: #{$i}rem;
+    }
+
+    .p-#{$i}rem {
+        padding: #{$i}rem;
+    }
+
+    .pt-#{$i}rem {
+        padding-top: #{$i}rem;
+    }
+
+    .pl-#{$i}rem {
+        padding-left: #{$i}rem;
+    }
+
+    .pb-#{$i}rem {
+        padding-bottom: #{$i}rem;
+    }
+
+    .pr-#{$i}rem {
+        padding-right: #{$i}rem;
+    }
+}
+
+
+// th{
+//   position: relative;         // เทียบเท่า class "relative"
+//   padding: 10px;              // เทียบเท่า class "px-10px py-10px" (อาจเปลี่ยนตามต้องการ)
+//   background-color: rgb(96 165 250 / 0.1);  // ตัวอย่างแทน "bg-soft-secondary"
+//   color: #2b2b2b;             // ตัวอย่างแทน "text-primary"
+//   text-align: center !important;  // เทียบเท่า "!text-center"
+
+//   // หากต้องการดีไซน์อื่น ๆ เพิ่มเติมก็ใส่ในนี้ได้เลย เช่น:
+//   font-weight: 600;
+//   border-bottom: 1px solid #eee;
+// }
+.e-headercell,
+.e-detailheadercell {
+    background-color: rgb(96 165 250 / 0.1) !important;
+}
+
+.e-pager .e-currentitem,
+.e-pager .e-currentitem:hover {
+    background: rgb(96 165 250) !important;
+    color: #fff;
+    opacity: 1 !important;
+}
+
+
+.e-checkbox-wrapper .e-frame.e-check,
+.e-css.e-checkbox-wrapper .e-frame.e-check {
+    background-color: rgb(96 165 250) !important;
+    border-color: transparent;
+    color: #fff;
+}
+
+.e-checkbox-wrapper .e-frame,
+.e-css.e-checkbox-wrapper .e-frame {
+    border: 1px solid !important;
+    border-radius: 2px;
+    box-sizing: border-box;
+    cursor: pointer;
+    display: inline-block;
+    font-family: "e-icons";
+    height: 18px;
+    line-height: 10px;
+    padding: 2px 0;
+    text-align: center;
+    vertical-align: middle;
+    width: 1rem !important;
+    border-color: #64748b !important;
+}
+
+.e-grid td.e-selectionbackground {
+    background-color: #aec2ec !important;
+}
+
+
+
+
+
+
+.row {
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.col {
+    flex: 1;
+}
+
+@for $i from 1 through 12 {
+    $width: (
+        $i / 12) * 100%;
+
+    .col-#{$i} {
+        flex: 0 0 $width;
+        max-width: $width;
+    }
+}
+
+
+@for $i from 1 through 100 {
+    .m-#{$i}rem {
+        margin: #{$i}rem;
+    }
+
+    .mt-#{$i}rem {
+        margin-top: #{$i}rem;
+    }
+
+    .ml-#{$i}rem {
+        margin-left: #{$i}rem;
+    }
+
+    .mb-#{$i}rem {
+        margin-bottom: #{$i}rem;
+    }
+
+    .mr-#{$i}rem {
+        margin-right: #{$i}rem;
+    }
+
+    .p-#{$i}rem {
+        padding: #{$i}rem;
+    }
+
+    .pt-#{$i}rem {
+        padding-top: #{$i}rem;
+    }
+
+    .pl-#{$i}rem {
+        padding-left: #{$i}rem;
+    }
+
+    .pb-#{$i}rem {
+        padding-bottom: #{$i}rem;
+    }
+
+    .pr-#{$i}rem {
+        padding-right: #{$i}rem;
+    }
+}
+
+@media print {
+    body * {
+        visibility: hidden;
+        /* ซ่อนทุก element */
+    }
+
+    #printArea,
+    #printArea * {
+        visibility: visible;
+        /* แสดงเฉพาะ #printArea */
+    }
+
+    #printArea {
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 100%;
+    }
+}
+
+.pdf-container {
+    transform: translateZ(0
+    );
+}
\ No newline at end of file

src/app/components/time-attendance-wizard/time-attendance-wizard.component.html

+<div class="relative">
+    <div class="flex relative  before:absolute before:w-full before:h-full bg-gradient-custom"
+        style="margin-top: -50px;margin-left: -100px;margin-right: -100px">
+        <div class="h-[500px] w-full rounded-sm"></div>
+    </div>
+    <div class="main-content " style="margin-top:-29rem">
+        <div class="grid grid-cols-12 gap-x-6">
+            <div class="col-span-12 xxl:col-span-2">
+            </div>
+            <div class="col-span-12 xxl:col-span-8">
+                <div class="box" style="border-radius:20px">
+                    <div class="box-header">
+                        <div class="grid grid-cols-12 gap-x-6 mb-3 mt-3 relative">
+                            <div class="absolute">
+                                <button type="button" class="ti-btn ti-btn-outline ti-btn-outline-light h-20px m-0  "
+                                    style="border-radius:20px" routerLink="/ess/employee-self-service">
+                                    <i class="ti ti-chevron-left"></i>
+                                    {{'Back' | translate}}
+                                </button>
+                            </div>
+                            <div class="col-span-12">
+                                <h5 class="box-title mb-3 text-center">Time Attendance</h5>
+                            </div>
+                        </div>
+                        <nav class="sm:flex sm:space-x-2 space-y-2 sm:space-y-0 rtl:space-x-reverse block"
+                            aria-label="Tabs" role="tablist" style="max-width: 250px;">
+                            <button type="button" style="border-radius:20px"
+                                class="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  active"
+                                id="part-item-1" data-hs-tab="#part-1" aria-controls="part-1" role="tab">
+                                <!-- hs-tab-active:text-white hs-tab-active:bg-primary hs-tab-active:border-primary -->
+                                {{'Time Attendance' | translate}}
+                            </button>
+                        </nav>
+                    </div>
+                    <div class="box-body">
+                        <div id="part-1" class="" role="tabpanel" aria-labelledby="part-item-1">
+                            <ng-container *ngTemplateOutlet="part1"></ng-container>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="col-span-12 xxl:col-span-2">
+            </div>
+        </div>
+    </div>
+</div>
+
+<ng-template #part1>
+    <div class="p-2 pt-0">
+        <table class="ti-custom-table ti-custom-table-head ti-custom-table-hover">
+            <thead>
+                <tr>
+                    <th rowspan="2" scope="col" class=" px-10px py-10px bg-soft-secondary text-primary !text-center">
+                        <span class="font-size-12px font-weight-700">ลำดับ(No.)</span>
+                    </th>
+                    <th rowspan="2" scope="col" class=" px-10px py-10px bg-soft-secondary text-primary !text-center">
+                        <span class="font-size-12px font-weight-700">อัตราการเข้างาน (Time Attendance)</span>
+                    </th>
+                    <th rowspan="2" scope="col" class=" px-10px py-10px bg-soft-secondary text-primary !text-center">
+                        <span class="font-size-12px font-weight-700">เป้าหมายผลงาน (Target)</span>
+                    </th>
+                    <th rowspan="2" scope="col" class=" px-10px py-10px bg-soft-secondary text-primary !text-center">
+                        <span class="font-size-12px font-weight-700">หน่วยนับ (Unit)</span>
+                    </th>
+                    <th rowspan="2" scope="col" class=" px-10px py-10px bg-soft-secondary text-primary !text-center">
+                        <span class="font-size-12px font-weight-700">นํ้าหนัก (Weight)</span>
+                    </th>
+                    <th colspan="5" scope="col" class=" px-10px py-10px bg-soft-secondary text-primary !text-center">
+                        <span class="font-size-12px font-weight-700">ค่าเป้าหมาย (Target Degree)</span>
+                    </th>
+                </tr>
+                <tr>
+                    <th scope="col" class=" px-10px py-10px bg-soft-secondary text-primary !text-center">
+                        <span class="font-size-12px font-weight-700">A(5)</span>
+                    </th>
+                    <th scope="col" class=" px-10px py-10px bg-soft-secondary text-primary !text-center">
+                        <span class="font-size-12px font-weight-700">B(4)</span>
+                    </th>
+                    <th scope="col" class=" px-10px py-10px bg-soft-secondary text-primary !text-center">
+                        <span class="font-size-12px font-weight-700">C(3)</span>
+                    </th>
+                    <th scope="col" class=" px-10px py-10px bg-soft-secondary text-primary !text-center">
+                        <span class="font-size-12px font-weight-700">D(2)</span>
+                    </th>
+                    <th scope="col" class=" px-10px py-10px bg-soft-secondary text-primary !text-center">
+                        <span class="font-size-12px font-weight-700">E(1)</span>
+                    </th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr style="align-items: start">
+                    <td style="vertical-align: top;" class="text-center">
+                        -
+                    </td>
+                    <td style="vertical-align: top;" class="text-center">
+                        -
+                    </td>
+                    <td style="vertical-align: top;" class="text-center">
+                        -
+                    </td>
+                    <td style="vertical-align: top;" class="text-center">
+                        -
+                    </td>
+                    <td style="vertical-align: top;" class="text-center">
+                        -
+                    </td>
+                    <td style="vertical-align: top;" class="text-center">
+                        -
+                    </td>
+                    <td style="vertical-align: top;" class="text-center">
+                        -
+                    </td>
+                    <td style="vertical-align: top;" class="text-center">
+                        -
+                    </td>
+                    <td style="vertical-align: top;" class="text-center">
+                        -
+                    </td>
+                    <td style="vertical-align: top;" class="text-center">
+                        -
+                    </td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+</ng-template>
\ No newline at end of file

src/app/components/time-attendance-wizard/time-attendance-wizard.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/time-attendance-wizard/time-attendance-wizard.component.ts

+import { ChangeDetectorRef, Component, EventEmitter, Input, Output } from '@angular/core';
+import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
+import { TranslateService } from '@ngx-translate/core';
+import { DocumentManagerModel, MyDocumentManagerModel } from 'src/app/shared/model/document-manager.model';
+import { DocumentManagerService } from 'src/app/shared/services/documents.service';
+import { FileService } from 'src/app/shared/services/file.service';
+import Swal from 'sweetalert2';
+interface SubModule {
+  title: SafeHtml;
+  route?: string;
+  file?: string;
+}
+
+@Component({
+  selector: 'app-time-attendance-wizard',
+  templateUrl: './time-attendance-wizard.component.html',
+  styleUrls: ['./time-attendance-wizard.component.scss']
+})
+export class TimeAttendanceWizardComponent {}
\ No newline at end of file

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

@@ -114,6 +114,8 @@ export class SidebarComponent {
       this.currentUrl.includes('ess/recruitment-selection') ||
       this.currentUrl.includes('ess/job-management') ||
       this.currentUrl.includes('ess/welfare-reward') ||
+      this.currentUrl.includes('ess/time-attendance-wizard') ||
+      this.currentUrl.includes('ess/review-history') ||
       this.currentUrl.includes('ess/job-description')
     if (this.showSideMenu) {
       const html: any = this.elementRef.nativeElement.ownerDocument.documentElement;;
@@ -202,6 +204,8 @@ export class SidebarComponent {
           this.currentUrl.includes('ess/recruitment-selection') ||
           this.currentUrl.includes('ess/job-management') ||
           this.currentUrl.includes('ess/welfare-reward') ||
+          this.currentUrl.includes('ess/time-attendance-wizard') ||
+          this.currentUrl.includes('ess/review-history') ||
           this.currentUrl.includes('ess/job-description')
         if (this.showSideMenu) {
           const html: any = this.elementRef.nativeElement.ownerDocument.documentElement;;