add ประเภทกับหน้าต่างแต่ละประเภท

src/app/pages/admin-pending/admin-pending.component.html

@@ -47,6 +47,22 @@
             </div>
         </div>
     </div>
+    <ul class="nav nav-tabs" id="myTab" role="tablist">
+        <li class="nav-item">
+            <a class="nav-link active" id="ยืมอุปกรณ์IT-tab" data-toggle="tab" href="#ยืมอุปกรณ์IT" role="tab"
+                aria-controls="ยืมอุปกรณ์IT" aria-selected="true">ยืมอุปกรณ์IT</a>
+        </li>
+        <li class="nav-item">
+            <a class="nav-link" id="จองห้อง-รถ-tab" data-toggle="tab" href="#จองห้อง-รถ" role="tab"
+                aria-controls="จองห้อง-รถ" aria-selected="false">จองห้อง-รถ</a>
+        </li>
+        <div class="col-sm-4">
+            <form class="form-inline my-2 my-lg-0">
+                <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
+                <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
+            </form>
+        </div>
+    </ul>
     <div class="row">
         <div class="col-sm-12">
             <div class="card">
@@ -56,6 +72,7 @@
                             <tr>
                                 <th scope="col">#</th>
                                 <th scope="col">Catagory</th>
+                                <th scope="col">Type</th>
                                 <th scope="col">Detail</th>
                                 <th scope="col">Name</th>
                                 <th scope="col">Start-Date</th>
@@ -67,6 +84,7 @@
                             <tr *ngFor="let country of countries">
                                 <th scope="row">{{ country.id }}</th>
                                 <td>{{ country.catagory }}</td>
+                                <td>{{ country.type }}</td>
                                 <td>{{ country.detail }}</td>
                                 <td>{{ country.name }}</td>
                                 <td>{{ country.sdate | date:'dd-MM-yyyy' }}</td>

src/app/pages/admin-pending/admin-pending.component.ts

@@ -4,6 +4,7 @@ import { NgbDate, NgbCalendar, NgbDateParserFormatter } from '@ng-bootstrap/ng-b
 interface Country {
   id?: number;
   catagory: string;
+  type: string;
   detail: string;
   name: string;
   sdate: string;
@@ -51,6 +52,7 @@ export class AdminPendingComponent implements OnInit {
   countries: Country[] = [
       {
         catagory: 'string',
+        type: 'string',
         detail: 'Moniter',
         name: 'a',
         sdate: '2021-11-25',
@@ -59,6 +61,7 @@ export class AdminPendingComponent implements OnInit {
       },
       {
         catagory: 'string',
+        type: 'string',
         detail: 'Mouse',
         name: 'b',
         sdate: '2021-11-25',

src/app/pages/pending/pending.component.html

@@ -47,6 +47,22 @@
             </div>
         </div>
     </div>
+    <ul class="nav nav-tabs" id="myTab" role="tablist">
+        <li class="nav-item">
+            <a class="nav-link active" id="ยืมอุปกรณ์IT-tab" data-toggle="tab" href="#ยืมอุปกรณ์IT" role="tab"
+                aria-controls="ยืมอุปกรณ์IT" aria-selected="true">ยืมอุปกรณ์IT</a>
+        </li>
+        <li class="nav-item">
+            <a class="nav-link" id="จองห้อง-รถ-tab" data-toggle="tab" href="#จองห้อง-รถ" role="tab"
+                aria-controls="จองห้อง-รถ" aria-selected="false">จองห้อง-รถ</a>
+        </li>
+        <div class="col-sm-4">
+            <form class="form-inline my-2 my-lg-0">
+                <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
+                <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
+            </form>
+        </div>
+    </ul>
     <div class="row">
         <div class="col-sm-12">
             <div class="card">
@@ -56,6 +72,7 @@
                             <tr>
                                 <th scope="col">#</th>
                                 <th scope="col">Catagory</th>
+                                <th scope="col">Type</th>
                                 <th scope="col">Detail</th>
                                 <th scope="col">Name</th>
                                 <th scope="col">Start-Date</th>
@@ -67,6 +84,7 @@
                             <tr *ngFor="let country of countries">
                                 <th scope="row">{{ country.id }}</th>
                                 <td>{{ country.catagory }}</td>
+                                <td>{{ country.type }}</td>
                                 <td>{{ country.detail }}</td>
                                 <td>{{ country.name }}</td>
                                 <td>{{ country.sdate | date:'dd-MM-yyyy' }}</td>

src/app/pages/pending/pending.component.ts

@@ -4,6 +4,7 @@ import { NgbDate, NgbCalendar, NgbDateParserFormatter } from '@ng-bootstrap/ng-b
 interface Country {
   id?: number;
   catagory: string;
+  type: string;
   detail: string;
   name: string;
   sdate: string;
@@ -49,6 +50,7 @@ export class PendingComponent implements OnInit {
   countries: Country[] = [
     {
       catagory: 'string',
+      type: 'string',
       detail: 'Moniter',
       name: 'a',
       sdate: '2021-11-25',
@@ -57,6 +59,7 @@ export class PendingComponent implements OnInit {
     },
     {
       catagory: 'string',
+      type: 'string',
       detail: 'Mouse',
       name: 'b',
       sdate: '2021-11-25',