การจัดการข้อมูลองค์กร>ข้อมูลลักษณะงาน>กลุ่มพนักงาน

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

@@ -31,6 +31,7 @@ import { SubDepartmentFourComponent } from '../company-registration/branch-busin
 import { SectionRegistrationComponent } from '../company-registration/branch-business-unit/section-registration/section-registration.component';
 import { JobDescriptionComponent } from '../job-description/job-description.component';
 import { PositionUnitComponent } from '../job-description/position/position-unit.component';
+import { EmployeeGroupUnit } from '../job-description/employee-group-unit/employee-group-unit.component';
 @NgModule({
   declarations: [
     SalesComponent,
@@ -57,7 +58,8 @@ import { PositionUnitComponent } from '../job-description/position/position-unit
     SubDepartmentThreeComponent,
     SubDepartmentFourComponent,
     JobDescriptionComponent,
-    PositionUnitComponent
+    PositionUnitComponent,
+    EmployeeGroupUnit,
   ],
   imports: [
     CommonModule,

src/app/components/job-description/employee-group-unit/employee-group-unit.component.html

@@ -54,26 +54,26 @@
 </div>
 
 <div class="body-content">
-    <ul class="nav-tabs">
+    <ul style="margin-left: 20px;" class="nav-tabs">
         <li class="nav-item">
-            <a [class.active]="true" class="nav-link active">นำเข้าข้อมูล</a>
+            <a [class.active]="true" class="nav-link active" style="font-size: medium;" >นำเข้าข้อมูล</a>
         </li>
         <li class="nav-item-text flex items-end">
-            <a class="nav-link-text">ดาวโหลดตัวอย่างไฟล์</a>
+            <a class="nav-link-text" style="font-size: medium;">ดาวโหลดตัวอย่างไฟล์</a>
         </li>
     </ul>
     <div *ngIf="true" class="tab-pane">
         <div class="overflow-auto shadow-gray-smoke">
             <table class="ti-custom-table ti-custom-table-head">
                 <thead class="bg-gray-50 dark:bg-black/20">
-                    <tr>
+                    <tr style="height: 60px;">
                         <ng-container
-                            *ngFor="let item of ['รหัสกลุ่มพนักงาน','รายละเอียด(ไทย)*','รายละเอียด(อังกฤษ)','Action']; let f = first; let l = last; let i = index">
-                            <th scope="col" class="relative head-table" [class.!text-center]="f||l">
+                            *ngFor="let item of ['รหัสกลุ่มพนักงาน','รายละเอียด(ไทย) *','รายละเอียด(อังกฤษ)','Action']; let f = first; let l = last; let i = index">
+                            <th scope="col" class="relative head-table" [class.!text-center]="f||l" [ngStyle]="f ? {'width.px': 200, 'text-align': 'center'} : {}" >
                                 <span>{{ item }}</span>
                                 
-                                <div class="absolute top-1/2 transform -translate-y-1/2 right-0" *ngIf="!l&&!f">
-                                    <svg class="head-table-icon" xmlns="http://www.w3.org/2000/svg" width="16"
+                                <div class="absolute top-1/2 transform -translate-y-1/2 right-0" *ngIf="!l&&!f&&i!==2">
+                                    <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">
@@ -93,12 +93,12 @@
                     ['PG001', 'Manager', 'Manager'],
                     ['RG005', 'Suoervisor', 'Suoervisor'],
                     ['RG004', 'Leader', 'Leader']];let i = index">
-                        <td class="body-table-center">
-                            <input type="checkbox" style="margin-right: 10px; transform:scale(0.7)">
+                        <td style="font-size: 12px;" class="body-table-center">
+                            <input type="checkbox" style="margin-right: 20px; transform:scale(0.7)">
                             {{item[0]}}
                         </td>
-                        <td>{{item[1]}}</td>
-                        <td>{{item[2]}}</td>
+                        <td style="text-align: center; font-size: 12px;">{{item[1]}}</td>
+                        <td style="text-align: center; font-size: 12px;">{{item[2]}}</td>
                         <td class="body-table-center">
                             <div class="px-1">
                                 <svg width="16" height="16" viewBox="0 0 24 24" id="Layer_1" data-name="Layer 1"

src/app/components/job-description/employee-group-unit/employee-group-unit.component.scss

@@ -54,5 +54,6 @@
     display: inline-block;
     font-size: large;
     color: #569bf5;
-    border-bottom: 3.5px solid #569bf5;
+    border-bottom: 2px solid #569bf5;
+    line-height: 0.8;
   }
\ No newline at end of file

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

@@ -17,7 +17,10 @@
         </ul>
         <div class="tab-content">
             <div *ngIf="activeTab === 'tab1'" class="tab-pane">
-                
+                <div class="mt-5">
+                    <app-employee-group-unit [pathTitle]="pathTitle"
+                        (sendPathTitle)="pathTitle=$event"></app-employee-group-unit>
+                </div>
             </div>
             <div *ngIf="activeTab === 'tab2'" class="tab-pane">
                 <div class="mt-5">

src/app/components/job-description/job-description.component.scss

@@ -4,18 +4,23 @@
     border-bottom: 2px solid #ccc; /* เส้นใต้ */
     width: 100%;
     cursor: pointer;
+    border-top: 2px solid #ccc;
 }
 
 .nav-item {
     list-style: none;
-    margin-right: 10px; /* ช่องว่างระหว่างเมนู */
+    margin-right: 40px; /* ช่องว่างระหว่างเมนู */
+
 }
 
 .nav-link {
     text-decoration: none;
     padding: 10px 20px;
     display: inline-block;
-    font-size: large;
+    font-size: medium;
+    text-align: center;
+    padding-left: 0px;
+    padding-right: 0px;
 }
 
 .nav-link:hover {
@@ -24,7 +29,7 @@
 
 .nav-link.active {
     color: #569bf5; /* สีตัวอักษรในสถานะ active */
-    font-size: large;
+    font-size: medium;
     border-bottom: 3.5px solid #569bf5; /* เส้นใต้ */
 }
 

src/app/components/job-description/job-description.component.ts

@@ -6,12 +6,12 @@ import { Component } from '@angular/core';
   styleUrls: ['./job-description.component.scss']
 })
 export class JobDescriptionComponent {
-  pathTitle = ['การจัดการข้อมูลองค์กร', 'ทะเบียนบริษัท', 'ทะเบียนบริษัท']
+  pathTitle = ['การจัดการข้อมูลองค์กร', 'ข้อมูลลักษณะงาน', 'กลุ่มพนักงาน']
   activeTab: string = 'tab1';
 
   // ฟังก์ชันในการเปลี่ยนแท็บ
   changeTab(tab: { id: string, text: string }) {
-    this.pathTitle = ['การจัดการข้อมูลองค์กร', 'ทะเบียนบริษัท', tab.text]
+    this.pathTitle = ['การจัดการข้อมูลองค์กร', 'ข้อมูลลักษณะงาน', tab.text]
     this.activeTab = tab.id
   }
 }

src/styles.scss

@@ -357,6 +357,8 @@ ngx-dropzone {
   display: flex;
   padding: 1rem 1rem 0.5rem 1rem;
   font-size: x-large;
+  margin-bottom: 10px;
+  margin-left: 15px;
 }
 .bg-card-white {
   background-color: #ffffff;
@@ -530,9 +532,10 @@ ngx-dropzone {
 .head-table {
   padding: 10px 20px; /* เพิ่มระยะขอบ */
   font-weight: bold !important;
-  font-size: large !important;
+  font-size: 12px !important;
   background-color: #E6F0FF !important; /* พื้นหลังสำหรับ header */
   color: rgb(var(--color-primary));
+  text-align: center !important;
 }
 
 .head-table-icon {