การจัดการข้อมูลองค์กร>ตั้งค่าผู้ใช้งาน>สร้างรหัสผู้ใช้งาน

src/app/components/account-settings/account-settings.component.html

@@ -16,8 +16,8 @@
         <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>
+                    <app-user-settings [pathTitle]="pathTitle"
+                        (sendPathTitle)="pathTitle=$event"></app-user-settings>
                 </div>
             </div>
         </div>

src/app/components/account-settings/user-settings/user-settings.component.html

@@ -68,11 +68,11 @@
                 <thead class="bg-gray-50 dark:bg-black/20">
                     <tr style="height: 60px;">
                         <ng-container
-                            *ngFor="let item of ['รหัสประเภทพนักงาน','รายละเอียด(ไทย) *','รายละเอียด(อังกฤษ)','Action']; let f = first; let l = last; let i = index">
+                            *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&&i!==2">
+                                <div class="absolute top-1/2 transform -translate-y-1/2 right-0" *ngIf="!l&&!f&&!i">
                                     <svg class="head-table-icon" xmlns="http://www.w3.org/2000/svg" width="50"
                                         height="16" fill="currentColor" viewBox="0 0 16 16">
                                         <path
@@ -86,13 +86,21 @@
                 </thead>
                 <tbody>
                     <tr *ngFor="let item of[
-                    ['พนักงานประจำรายเดือน', 'พนักงานประจำรายเดือน'],
-                    ['พนักงานประจำรายวัน', 'พนักงานประจำรายวัน']];let i = index">
-                        <td style="font-size: 12px; " class="body-table-left">
-                            <input type="checkbox" style="margin-right: 20px; transform:scale(0.7)">{{0+""+(i+1)}}
+                    ['CC001', '620010','จรุณ','เทพมาศ','ใช้งาน'],
+                    ['CC002', '592530','มานะ','มิณนา','ใช้งาน'],
+                    ['CC003', '5812142','ชาญชัย','โพธิ์สุข','ใช้งาน'],
+                    ['FC001', '6125365','อดิศร','สมสัย','ใช้งาน'],
+                    ['FC002', '5211475','ธนศักดิ์','ตาศรี','ใช้งาน'],
+                    ['KC001', '525258','สุทธิดา','สินประเสริฐ','ใช้งาน'],
+                    ['KC002', '647589','ศรสุข','ยอดสิงฆ์','ใช้งาน']];let i = index">
+                        <td style="font-size: 12px;" class="body-table-center">
+                            <input type="checkbox" style="margin-right: 20px; transform:scale(0.7)">
+                            {{item[0]}}
                         </td>
-                        <td style="text-align: center; font-size: 12px;">{{item[0]}}</td>
                         <td style="text-align: center; font-size: 12px;">{{item[1]}}</td>
+                        <td style="text-align: center; font-size: 12px;">{{item[2]}}</td>
+                        <td style="text-align: center; font-size: 12px;">{{item[3]}}</td>
+                        <td style="text-align: center; font-size: 12px;">{{item[4]}}</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"
@@ -150,3 +158,36 @@
         </div>
     </div>
 </div>
+<div class="body-content">
+    <ul class="nav-tabs">
+        <div class="px-1 py-1 bg-white rounded-2 shadow justify-content-center align-items-center">
+            <div class="box-body">
+                <nav class="pagination-style-3 overflow-auto">
+                  <ul class="ti-pagination">
+                    <li>
+                        <a aria-label="anchor" class="page-link" href="javascript:void(0);">
+                            <i class="ri-arrow-left-s-line align-middle rtl:rotate-180"></i>
+                        </a>
+                    </li>
+                    <li><a class="page-link active" href="javascript:void(0);" aria-current="page">1</a></li>
+                    <li><a class="page-link" href="javascript:void(0);">2</a></li>
+                    <li><a class="page-link" href="javascript:void(0);">3</a></li>
+                    <li><a class="page-link" href="javascript:void(0);">4</a></li>
+                    <li><a class="page-link" href="javascript:void(0);">5</a></li>
+                    <li><a class="page-link" href="javascript:void(0);">...</a></li>
+                    <li><a class="page-link" href="javascript:void(0);">31</a></li>
+                    <li>
+                        <a aria-label="anchor" class="page-link" href="javascript:void(0);">
+                            <i class="ri-arrow-right-s-line align-middle rtl:rotate-180"></i>
+                        </a>
+                    </li>
+                  </ul>
+                </nav>
+            </div>
+        </div>
+    </ul>
+    <ul class="nav-tabs">
+        <p>Show 1 to 10 of 50 items</p>
+    </ul>
+</div>
+    
\ No newline at end of file

src/app/components/account-settings/user-settings/user-settings.component.scss

@@ -57,3 +57,9 @@
     border-bottom: 2px solid #569bf5;
     line-height: 0.8;
   }
+  .ti-pagination .page-link.active {
+    background-color: #569bf5;
+    color: white;
+    border-radius: 50%;
+    padding: 8px 12px;
+}
\ No newline at end of file