หน้าจอ การจัดการข้อมูลองค์กร > ข้อมูลลักษณะงาน >ตำแหน่ง

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/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

@@ -2,20 +2,24 @@
 .nav-tabs {
     display: flex;
     border-bottom: 2px solid #ccc; /* เส้นใต้ */
+    border-top: 2px solid #ccc;
     width: 100%;
     cursor: pointer;
 }
 
 .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: left; /* ชิดซ้าย */
+    padding-left: 0px; /* เพิ่มระยะห่างจากซ้าย */
+    padding-right: 0px; /* สามารถปรับระยะห่างขวา */
 }
 
 .nav-link:hover {

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/app/components/job-description/position/position-unit.component.html

@@ -53,25 +53,33 @@
 </div>
 
 <div class="body-content">
-    <ul class="nav-tabs">
+    <ul class="nav-tabs" style="margin-left: 20px;">
         <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">
-                            <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]="{i} ? {'width.px': 50, 'text-align': 'center'}: {}">
                                 <span>{{ item }}</span>
-                                <div class="absolute top-1/2 transform -translate-y-1/2 right-0" *ngIf="!l">
-                                    <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="!f && i==1">
+                                    <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">
+                                        </path>
+                                    </svg>
+                                </div>
+                                <div class="absolute top-1/2 transform -translate-y-1/2 right-0" *ngIf="!f && i==2">
+                                    <svg class="head-table-icon" xmlns="http://www.w3.org/2000/svg" width="200"
                                         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">
@@ -88,13 +96,15 @@
                     ['000002', 'รักษาการเลขานุการบริหารเบื้องต้น', 'Junior Secretary (Acting)'],
                     ['000003', 'ผู้บริหารระดับคุณภาพ', 'BPD Quality Management Office'],
                     ['000004', 'ช่างเทคนิค', 'Technician'],
-                    ['000005', 'หัวหน้าหน่วยบุคคล', 'Chief Human Resources Office']];let i = index">
-                        <td class="body-table-center">
+                    ['000005', 'หัวหน้าหน่วยบุคคล', 'Chief Human Resources Office'],
+                    ['000006', 'ผูัช่วยหัวหน้าหน่วย', 'Assistant of Unit Chief'],
+                    ['000007', 'กรรมการบริษัท', 'Director']];let i = index">
+                        <td class="body-table-center" style="font-size: 12px;">
                             <input type="checkbox" style="margin-right: 20px; transform: scale(0.7);">
                             {{item[0]}}
                         </td>
-                        <td>{{item[1]}}</td>
-                        <td>{{item[2]}}</td>
+                        <td style="font-size: 12px; text-align: center;">{{item[1]}}</td>
+                        <td style="font-size: 12px; text-align: center;">{{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/position/position-unit.component.scss

@@ -54,6 +54,7 @@
     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/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,7 +532,7 @@ 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));
 }