ประเมินผลCompetency

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

@@ -113,7 +113,7 @@ import { SelfEvaluationComponent } from '../performance-evaluation/self-evaluati
 import { CompanyRegistrationPageComponent } from '../company-components/company-registration/company-registration-page/company-registration-page.component';
 import { IdpEvalutionComponent } from '../performance-evaluation/idp-evaluation/idp-evalution.component';
 import { PmsEvalutionComponent } from '../performance-evaluation/pms-evaluation/pms-evalution.component';
-
+import { CEvaluationComponent } from '../performance-evaluation/c-evaluation/c-evaluation.component';
 @NgModule({
   declarations: [
     SalesComponent,
@@ -208,6 +208,7 @@ import { PmsEvalutionComponent } from '../performance-evaluation/pms-evaluation/
     IdpEvalutionComponent,
     CompanyRegistrationPageComponent,
     PmsEvalutionComponent,
+    CEvaluationComponent
   ],
   imports: [
     CommonModule,

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

+<app-page-header [pathTitle]="pathTitle"></app-page-header>
+<div class="bg-card-white">
+</div>
+<div class="block-main-content">
+    <ng-container *ngTemplateOutlet="cEvaluation"></ng-container>
+</div>
+<ng-template #cEvaluation>
+    <div class="pb-2rem px-2rem pt-1.5rem w-full min-height-50px justify-between items-center">
+        <div class="flex">
+            <button type="button" class="ti-btn ti-btn-outline ti-btn-outline-light h-20px m-0 shadow-md text-blue-500"
+                (click)="returnPage()">
+                <i class="ti ti-chevron-left"></i>
+                ย้อนกลับ
+            </button>
+            <div class="font-size-18px font-weight-700 align-center text-primary pl-1rem">
+                ประเมินผล ประจำปี 2024
+            </div>
+        </div>
+    </div>
+    <div class="pb-2rem px-2rem">
+        <div class="font-size-18px font-weight-700 text-primary">
+            แบบประเมินสมรรถนะพนักงาน ประจำปี 2024
+        </div>
+    </div>
+    <div class="pb-2rem px-2rem">
+        <div class="p-2 grid grid-cols-6 gap-3">
+            <div class="grid-cols-1">
+                <div class="text-gray-400">เครื่องมือประเมิน</div>
+                <div class="text-gray-400">O = แบบสังเกต</div>
+                <div class="text-gray-400">P = แบบการปฏิบัติงาน</div>
+                <div class="text-gray-400">D = การบันทึก/เอกสาร</div>
+                <div class="text-gray-400">I = การสัมภาษณ์</div>
+                <div class="text-gray-400">T = แบบทดสอบ</div>
+            </div>
+            <div class="grid-cols-1">
+                <div class="text-gray-400">คำชี้แจง</div>
+                <div class="text-gray-400">- ใช้วิธีประเมินโดย ผู้บังคับบัญชา = 100 %</div>
+            </div>
+            <div class="col-span-2 grid-cols-1">
+                <div class="text-gray-400">ระดับความสามารถ (Target Degree)</div>
+                <div class="text-gray-400">ระดับ 1 = ไม่มีความรู้พื้นฐานเลย ขาดทักษะในงาน</div>
+                <div class="text-gray-400">ระดับ 2 = มีความรู้ในงานบ้างแต่ยังไม่สามารถ ประยุกต์ใช้ในงานได้</div>
+                <div class="text-gray-400">ระดับ 3 = นำความรู้มาประยุกต์ใช้ในงานได้ ปฏิบัติงานเองได้ด้วยตัวเอง
+                    แก้ไขปัญหาหน้างานได้</div>
+                <div class="text-gray-400">ระดับ 4 = สอนผู้อื่นได้ มีความคล่องตัว เชื่อมโยง ความรู้ในงานได้</div>
+                <div class="text-gray-400">ระดับ 5 = มีความชำนาญ เชี่ยวชาญ เป็นที่ยอมรับ ในองค์กร</div>
+            </div>
+            <div class="grid-cols-1">
+                <div class="text-gray-400 text-center">ระดับความคาดหวัง</div>
+                <div class="text-gray-400 text-center">1</div>
+                <div class="text-gray-400 text-center">2</div>
+                <div class="text-gray-400 text-center">3</div>
+                <div class="text-gray-400 text-center">4</div>
+                <div class="text-gray-400 text-center">5</div>
+                <div class="text-gray-400 text-center">6</div>
+                <div class="text-gray-400 text-center">7</div>
+                <div class="text-gray-400 text-center">8</div>
+            </div>
+            <div class="grid-cols-1">
+                <div class="text-gray-400 text-center">สำหรับพนักงานระดับ</div>
+                <div class="text-gray-400 text-center">O1 - O2</div>
+                <div class="text-gray-400 text-center">O3 - O4</div>
+                <div class="text-gray-400 text-center">S1 - S2</div>
+                <div class="text-gray-400 text-center">S3 - S4</div>
+                <div class="text-gray-400 text-center">M1 - M2</div>
+                <div class="text-gray-400 text-center">M3 - M4</div>
+                <div class="text-gray-400 text-center">E1 - E2</div>
+                <div class="text-gray-400 text-center">E3 - E4</div>
+            </div>
+        </div>
+    </div>
+    <div class="pb-2rem px-2rem">
+        <div class="overflow-auto rounded-top-0.65rem">
+            <table class="ti-custom-table ti-custom-table-head ti-custom-table-hover2">
+                <thead class="height-50px">
+                    <tr class="font-size-12px">
+                        <ng-container
+                            *ngFor="let item of ['ลำดับที่','รหัสสมรรถนะ','ชื่อสมรรถนะ','Behavior Indicator (BI)','เครื่องมือประเมิน\n(ตัวย่อ)\n(O,P,D,I,T)']">
+                            <th scope="col" rowspan="2"
+                                class="relative px-10px py-10px bg-soft-secondary text-primary !text-center">
+                                <span class="font-size-12px font-weight-700 ">{{ item }}</span>
+                                <div class="absolute top-1/2 transform -translate-y-1/2 right-0">
+                                    <i class="ti ti-dots-vertical fs-l"></i>
+                                </div>
+                            </th>
+                        </ng-container>
+                        <th scope="col" colspan="5"
+                            class="relative px-10px py-10px bg-soft-secondary text-primary !text-center">
+                            ระดับความสามารถ (Target Degree)
+                        </th>
+                    </tr>
+                    <tr class="font-size-12px">
+                        <ng-container *ngFor="let item of [5,4,3,2,1]">
+                            <th scope="col" class="relative px-10px py-10px bg-soft-secondary text-primary text-center">
+                                {{item}}
+                            </th>
+                        </ng-container>
+                    </tr>
+                </thead>
+                <tbody *ngIf="!dataListFilter().length">
+                    <tr class="hover:table-hover2-hover">
+                        <td class="text-center" colspan="100%">
+                            ไม่พบข้อมูล
+                        </td>
+                    </tr>
+                </tbody>
+                <tbody *ngIf="dataListFilter().length">
+                    <ng-container *ngFor=" let data of dataListFilter();let i = index">
+                        <tr *ngFor="let item of data.bi;let i2 = index;let f = first"
+                            (mouseenter)="hoveredCode = data.code" (mouseleave)="hoveredCode = null"
+                            [ngClass]="{ 'table-hover2': data.code === hoveredCode ,'border-none':!f }">
+                            <td class="align-start text-center">
+                                <ng-container *ngIf="f">
+                                    {{i+1}}
+                                </ng-container>
+                            </td>
+                            <td class="align-start text-center">
+                                <ng-container *ngIf="f">
+                                    {{data.code}}
+                                </ng-container>
+                            </td>
+                            <td class="align-start !white-space-normal">
+                                <ng-container *ngIf="f">
+                                    {{data.name}}
+                                </ng-container>
+                            </td>
+                            <td class="align-start !white-space-normal">
+                                {{item.name}}
+                            </td>
+                            <td class="align-center text-center">
+                                {{showTools(item.tools)}}
+                            </td>
+                            <td class="align-center text-center"
+                                *ngFor="let value of ['5','4','3','2','1']; let i3=index">
+                                <input type="radio" [name]="'radio'+i+''+i2" class="ti-form-radio cursor-pointer"
+                                    [id]="'radio'+i+''+i2+''+i3" [value]="value" [(ngModel)]="item.degree">
+                            </td>
+                        </tr>
+                    </ng-container>
+                </tbody>
+            </table>
+        </div>
+    </div>
+
+    <div class="pb-1rem px-2rem">
+        <div class="py-2 grid grid-cols-11">
+            <div class="col-span-8">รวมจำนวนเครื่องหมายแต่ละช่อง (1)</div>
+            <div class="col-span-3 grid grid-cols-5">
+                <div class="col-span-1 text-center">14</div>
+                <div class="col-span-1 text-center">6</div>
+                <div class="col-span-1 text-center">0</div>
+                <div class="col-span-1 text-center">0</div>
+                <div class="col-span-1 text-center">0</div>
+            </div>
+        </div>
+        <div class="py-2 grid grid-cols-11">
+            <div class="col-span-8">ตัวคูณคะแนนในแต่ละช่อง (2)</div>
+            <div class="col-span-3 grid grid-cols-5">
+                <div class="col-span-1 text-center">1</div>
+                <div class="col-span-1 text-center">0.8</div>
+                <div class="col-span-1 text-center">0.6</div>
+                <div class="col-span-1 text-center">0.4</div>
+                <div class="col-span-1 text-center">0.2</div>
+            </div>
+        </div>
+        <div class="py-2 grid grid-cols-11">
+            <div class="col-span-8">ถ่วงน้ำหนักผลรวม 1X2</div>
+            <div class="col-span-3 grid grid-cols-5">
+                <div class="col-span-1 text-center">14</div>
+                <div class="col-span-1 text-center">4.80</div>
+                <div class="col-span-1 text-center">0.00</div>
+                <div class="col-span-1 text-center">0.00</div>
+                <div class="col-span-1 text-center">0.00</div>
+            </div>
+        </div>
+        <div class="py-2 grid grid-cols-11">
+            <div class="col-span-8">คะแนนรวมหลังถ่วงน้ำ</div>
+            <div class="col-span-3 grid grid-cols-5">
+                <div class="col-span-5 text-center">18.80</div>
+            </div>
+        </div>
+        <div class="py-2 grid grid-cols-11">
+            <div class="col-span-8">คะแนนเฉลี่ยคิดเป็น</div>
+            <div class="col-span-3 grid grid-cols-5">
+                <div class="col-span-5 text-center">94.00</div>
+            </div>
+        </div>
+    </div>
+
+    <div class="pb-2rem px-2rem">
+        <div class="overflow-auto rounded-top-0.65rem">
+            <table class="ti-custom-table ti-custom-table-head ti-custom-table-hover">
+                <thead class="height-50px">
+                    <tr class="font-size-12px">
+                        <ng-container
+                            *ngFor="let item of  ['เกณฑ์การให้คะแนนการประประเมิน Check Sheet E01','ความคาดหวัง (E)','ผลประเมิน (A)','สรุปผล Gap'];let f = first ;let l = last">
+                            <th scope="col" [attr.rowspan]="f?'1':'2'" [attr.colspan]="f?'2':'1'"
+                                class="relative px-10px py-10px bg-soft-secondary text-primary !text-center">
+                                <span class="font-size-12px font-weight-700 ">{{ item }}</span>
+                                <div *ngIf="!f&&!l" class="absolute top-1/2 transform -translate-y-1/2 right-0">
+                                    <i class="ti ti-dots-vertical fs-l"></i>
+                                </div>
+                            </th>
+                            <th *ngIf="f" scope="col" rowspan="2"
+                                class="relative bg-soft-secondary text-primary !text-center !p-0">
+                                <div class="absolute top-1/2 transform -translate-y-1/2 right-0">
+                                    <i class="ti ti-dots-vertical fs-l"></i>
+                                </div>
+                            </th>
+                        </ng-container>
+                    </tr>
+                    <tr class="font-size-12px">
+                        <ng-container *ngFor="let item of ['เกณฑ์การให้คะแนน','เงื่อนไข']">
+                            <th scope="col"
+                                class="relative px-10px py-10px bg-soft-secondary text-primary !text-center">
+                                {{item}}
+                            </th>
+                        </ng-container>
+                    </tr>
+                </thead>
+                <tbody *ngIf="dataList2Filter().length">
+                    <tr *ngFor="let item of dataList2Filter();let i = index">
+                        <td class="align-start" rowspan="2">
+                            <div *ngFor="let item2 of item.score">
+                                <span>{{item2}} </span><br>
+                            </div>
+                        </td>
+                        <td class="align-start" rowspan="2">
+                            <div *ngFor="let item2 of item.condition">
+                                <span>{{item2}} </span><br>
+                            </div>
+                        </td>
+                        <td class="!p-0"></td>
+                        <td class="align-start text-center">
+                            {{item.e}}
+                        </td>
+                        <td class="align-start text-center">
+                            {{item.a}}
+                        </td>
+                        <td class="align-start text-center">
+                            {{item.gap}}
+                        </td>
+                    </tr>
+                    <tr>
+                        <td class="align-start !white-space-normal" colspan="4">
+                            หมายเหตุ<br>
+                            ผลการประเมินอาจมีการเปลี่ยนแปลงเงื่อนไขข้อ 1-3 เนื่องจากมีคะแนนต่ำกว่าเกณฑ์ในบางข้อ
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </div>
+    <div class="py-1rem px-2rem">
+        <div class="py-2 grid grid-cols-7 gap-3">
+            <div class="col-span-1">ผู้ประเมิน1</div>
+            <div class="col-span-1">น.ส. พิมพร อูรณการ</div>
+            <div class="col-span-1">
+                <input type="checkbox" id="hs-basic-usage" class="ti-switch">
+                <label for="hs-basic-usage" class="sr-only">ยืนยันผล</label>
+            </div>
+            <div class="col-span-2">
+                <textarea type="text" rows="2" class="ti-form-input mb-2"></textarea>
+                <span class="pt-2">
+                    วันที่ :
+                </span>
+            </div>
+        </div>
+        <div class="py-2 grid grid-cols-7 gap-3">
+            <div class="col-span-1">ผู้ประเมิน2</div>
+            <div class="col-span-1">น.ส. นดี แป้นศรี</div>
+            <div class="col-span-1">
+                <input type="checkbox" id="hs-basic-usage" class="ti-switch">
+                <label for="hs-basic-usage" class="sr-only">ตรวจสอบ</label>
+            </div>
+            <div class="col-span-2">
+                <textarea type="text" rows="2" class="ti-form-input mb-2" value="ใส่ Comment ที่นี่"></textarea>
+                <span>
+                    วันที่ :
+                </span>
+            </div>
+        </div>
+        <div class="py-2 grid grid-cols-7 gap-3">
+            <div class="col-span-1">ผู้อนุมัติ</div>
+            <div class="col-span-1">น.ส.ศรีไพ คชา</div>
+            <div class="col-span-1">
+                <input type="checkbox" id="hs-basic-usage" class="ti-switch">
+                <label for="hs-basic-usage" class="sr-only">อนุมัติ</label>
+            </div>
+            <div class="col-span-2">
+                <textarea type="text" rows="2" class="ti-form-input mb-2" value="ใส่ Comment ที่นี่"></textarea>
+                <span>
+                    วันที่ :
+                </span>
+            </div>
+        </div>
+    </div>
+
+    <div class="flex justify-center mb-1rem pb-2rem">
+        <button type="submit" class="ti-btn ti-btn-success mx-2rem" (click)="saveDraft()">
+            บันทึกร่าง
+        </button>
+        <button type="submit" class="ti-btn ti-btn-success mx-2rem">
+            บันทึกข้อมูล
+        </button>
+    </div>
+</ng-template>
\ No newline at end of file

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

+import { Component, EventEmitter, OnInit, Output, TemplateRef, ViewChild } from '@angular/core';
+import Swal from 'sweetalert2';
+
+
+export interface DataModel {
+  code: string,
+  name: string,
+  bi: BiModel[],
+}
+export interface BiModel {
+  name: string,
+  tools: string[],
+  degree: string
+}
+
+export interface Data2Model {
+  score: string[],
+  condition: string[],
+  e: string,
+  a: string,
+  gap: string
+}
+
+@Component({
+  selector: 'app-c-evaluation',
+  templateUrl: './c-evaluation.component.html',
+  styleUrls: ['./c-evaluation.component.scss']
+})
+export class CEvaluationComponent implements OnInit {
+  @Output() sendPageEvalution: EventEmitter<string> = new EventEmitter<string>();
+  pathTitle = ['การประเมินผล', 'ประเมินตนเอง']
+
+
+  hoveredCode: string | null = null;
+  dataList: DataModel[] = [
+    {
+      code: "CC-01",
+      name: "จิตสำนึกด้านความปลอดภัยและคุณภาพ (Safety & Quality)",
+      bi: [{
+        name: "สอนงานด้านความปลอดภัย และคุณภาพของบริษัทให้กับพนักงานในหน่วยงาน",
+        tools: ["O"],
+        degree: "4"
+      }, {
+        name: "ติดตามและปรับปรุงการทำงานด้านความปลอดภัยและคุณภาพของทีมงาน",
+        tools: ["O", "D"],
+        degree: "5"
+      }],
+    },
+    {
+      code: "CC-02",
+      name: "การทำงานเป็นทีมแบบ TAT (TAT Teamwork)",
+      bi: [{
+        name: "คิดวิเคราะห์เพื่อแก้ปัญหาด้านความปลอดภัยและคุณภาพในหน่วยงานที่รับผิดชอบ",
+        tools: ["O", "D"],
+        degree: "5"
+      }, {
+        name: "นำเสนอและจัดทำรายงานด้านความปลอดภัยและคุณภาพทั้งภาษาไทยและภาษาอังกฤษ",
+        tools: ["O"],
+        degree: "2"
+      },
+      {
+        name: "สอนงาน และพัฒนาทีมงานให้เกิดการทำงานเป็นทีม โดยยึดเป้าหมายเดียวกัน (TAT Goal) และคำนึงถึง ความต้องการของลูกค้าเป็นหลัก (Next Customer)",
+        tools: ["O"],
+        degree: "2"
+      },
+      {
+        name: "สนับสนุนทีมงานให้ดำเนินการตามเป้าหมายของทีม และสิ่งที่ตนเองได้รับมอบหมาย",
+        tools: ["O", "D"],
+        degree: "4"
+      },
+      {
+        name: "วิเคราะห์และแก้ไขปัญหาที่เกิดจากการทำงานเป็นทีม รวมถึงการควบคุมดูแลให้เป็นไปตามเป้าหมาย",
+        tools: ["O"],
+        degree: "5"
+      },
+      {
+        name: "สื่อสารเพื่อสร้างความเข้าใจ และรับฟังความคิดเห็น ของสมาชิกในทีม ชื่นชมทีมงานแต่ละคนที่เป็น ส่วนหนึ่งในความสำเร็จของทีมร่วมกัน",
+        tools: ["O", "D"],
+        degree: "5"
+      }],
+    }
+  ]
+
+
+  dataList2: Data2Model[] = [{
+    score: ["หากได้คะแนน 90 - 100% ถือว่า Gap +1", "หากได้คะแนน 80 - 89% ถือว่า ไม่มี Gap", "หากได้คะแนน 60 - 79% ถือว่า Gap - 1", "หากได้คะแนน 40 - 59% ถือว่า Gap -", "หากได้คะแนน 0 - 39% ถือว่า Gap - 3"],
+    condition: ["1.หากได้คะแนนสูงกว่า 80% แต่มี 3 2 หรือ 1 ด้วย ถือว่า Gap -1", "2.หากได้คะแนนต่ำกว่า 80% แต่มี 4 และ 5 ให้คิด Gap ตาม %", "3.คะแนนต่ำกว่า 80% แต่มี 2 และ 1 ให้คิด Gap ตาม %"],
+    e: "4",
+    a: "3",
+    gap: "-1"
+  }]
+  @ViewChild('selfEvaluation1_2', { static: true }) selfEvaluation1_2!: TemplateRef<any>;
+  @ViewChild('selfEvaluation1_2Edit', { static: true }) selfEvaluation1_2Edit!: TemplateRef<any>;
+  currentTemplate: TemplateRef<any> = this.selfEvaluation1_2
+  ngOnInit(): void {
+    this.currentTemplate = this.selfEvaluation1_2
+  }
+
+  dataListFilter() {
+    return this.dataList
+  }
+  dataList2Filter() {
+    return this.dataList2
+  }
+  showTools(data: string[]) {
+    return data.join("/")
+  }
+
+  saveDraft() {
+    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) {
+        Swal.fire({
+          title: 'บันทึกสำเร็จ!',
+          text: 'การประเมินของคุณถูกบันทึกแล้ว',
+          icon: 'success',
+          customClass: {
+            confirmButton: '!swal2-button-bg-green',
+          }
+        });
+      } else if (result.dismiss === Swal.DismissReason.cancel) {
+        Swal.fire({
+          title: 'ยกเลิก!',
+          text: 'การบันทึกถูกยกเลิก',
+          icon: 'error',
+          customClass: {
+            confirmButton: '!swal2-button-bg-danger',
+          }
+        });
+      }
+    });
+  }
+
+  returnPage() {
+    this.sendPageEvalution.emit("")
+  }
+}

src/app/components/performance-evaluation/pms-evaluation/pms-evalution.component.html

@@ -1020,13 +1020,7 @@
                             <th scope="col"
                                 class="relative px-10px py-10px bg-soft-secondary text-primary !text-center">
                                 <span class="font-size-12px font-weight-700 ">{{ item }}</span>
-                                <div *ngIf="!l&&i!=7" class="absolute top-1/2 transform -translate-y-1/2 right-0">
-                                    <i class="ti ti-dots-vertical fs-l"></i>
-                                </div>
-                            </th>
-                            <th *ngIf="i==7" scope="col" rowspan="2"
-                                class="relative bg-soft-secondary text-primary !text-center !p-0">
-                                <div class="absolute top-1/2 transform -translate-y-1/2 right-0">
+                                <div *ngIf="!l" class="absolute top-1/2 transform -translate-y-1/2 right-0">
                                     <i class="ti ti-dots-vertical fs-l"></i>
                                 </div>
                             </th>

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

@@ -60,15 +60,15 @@
                         <td style="font-size: 12px;">{{item[2]}}</td>
                         <td class="flex justify-center">
                             <button type="button" class="ti-btn rounded-sm ti-btn-secondary"
-                                style="height: 15px; width: 45px; font-size: 12px; display: flex; align-items: center; justify-content: center;">
+                                style="height: 15px; width: 45px; font-size: 12px; display: flex; align-items: center; justify-content: center;" (click)="returnPage('c')">
                                 CC
                             </button>
                             <button type="button" class="ti-btn rounded-sm ti-btn-warning"
-                                style="height: 15px; width: 45px; font-size: 12px; display: flex; align-items: center; justify-content: center;">
+                                style="height: 15px; width: 45px; font-size: 12px; display: flex; align-items: center; justify-content: center;" (click)="returnPage('c')">
                                 MC
                             </button>
                             <button type="button" class="ti-btn rounded-sm ti-btn-success"
-                                style="height: 15px; width: 45px; font-size: 12px; display: flex; align-items: center; justify-content: center;">
+                                style="height: 15px; width: 45px; font-size: 12px; display: flex; align-items: center; justify-content: center;" (click)="returnPage('c')">
                                 PC
                             </button>
                         </td>

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

@@ -39,3 +39,6 @@
 <ng-container *ngIf="pageEvalution=='pms'">
     <app-pms-evalution (sendPageEvalution)="pageEvalution=$event"></app-pms-evalution>
 </ng-container>
+<ng-container *ngIf="pageEvalution=='c'">
+    <app-c-evaluation (sendPageEvalution)="pageEvalution=$event"></app-c-evaluation>
+</ng-container>
\ No newline at end of file

src/assets/css/style.css

@@ -3785,6 +3785,9 @@ select option:focus {
 .col-span-10 {
   grid-column: span 10 / span 10;
 }
+.col-span-8 {
+  grid-column: span 8 / span 8;
+}
 .col-span-11 {
   grid-column: span 11 / span 11;
 }
@@ -24832,6 +24835,13 @@ div:where(.swal2-container) div:where(.swal2-validation-message) {
 .swal2-styled.swal2-cancel.\!swal2-button-bg-gray:focus {
   box-shadow: 0 0 0 3px rgba(110, 120, 129, 0.5) !important;
 }
+.swal2-styled.swal2-confirm.\!swal2-button-bg-danger {
+  background-color: rgb(var(--color-danger)) !important;
+  border-radius: 20px !important;
+}
+.swal2-styled.swal2-confirm.\!swal2-button-bg-danger:focus {
+  box-shadow: 0 0 0 0px rgba(110, 120, 129, 0.5) !important;
+}
 .\!w-80px {
   width: 80px !important;
 }