คำอธิบายสถานะของปุ่ม เเต่ละสี

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

@@ -132,7 +132,6 @@
                         </table>
                     </div>
                 </div>
-                <div class="pb-2">
                 <div class="w-full min-height-50px justify-between items-center pb-2">
                     <div class="px-2rem py-3 bg-soft-secondary font-size-18px font-weight-700 text-primary">
                         รายละเอียดประเมินผลงานการปฏิบัติงาน
@@ -200,7 +199,44 @@
             </div>
         </div>
     </div>
+
+    <ng-container *ngIf="appraisalCompentency.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>
+        </div>
+    </ng-container>
 </ng-template>
 
 

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

@@ -19,7 +19,7 @@
                 </nav>
             </div>
         </div>
-        <div class="pt-50px  pb-2rem" *ngIf="subordinate.dataList.length">
+        <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">
@@ -192,6 +192,44 @@
                 </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>
+            </div>
+        </ng-container>
     </div>
 </ng-container>
 

src/assets/css/style.css

@@ -25010,10 +25010,22 @@ div:where(.swal2-container) div:where(.swal2-validation-message) {
   background-color: white !important;
 }
 
-.align-self-center{
-  align-self: center
+.align-self-center {
+  align-self: center;
 }
 
-.user-select-none{
+.user-select-none {
   user-select: none;
 }
+
+.w-1\/4 {
+  width: 25%;
+}
+
+.ti-btn-soft-mute {
+  background-color: rgb(0 0 0 / 0.2);
+}
+.ti-btn-soft-mute:hover {
+  background-color: rgb(0 0 0 / 0.5);
+  color: white
+}