From b75d1d815acef4374c8a575cfff1f86b7d5195b8 Mon Sep 17 00:00:00 2001
From: kamoa457 <kamoa457@cubes.postbox.in.th>
Date: Fri, 27 Oct 2023 06:53:15 +0700
Subject: [PATCH] update ui

---
 src/assets/css/material-kit-pro.css      |   2 +-
 src/assets/dataJson/masterData.json      | 343 +++++++++
 src/assets/dataJson/rooms.json           |  43 +-
 src/views/Queue/QueueView.vue            |  42 +-
 src/views/Reports/ReportlistView.vue     | 350 ++++++---
 src/views/Restroom/AddRoom.vue           |  15 +-
 src/views/Restroom/DetailRoomPage.vue    | 182 +++--
 src/views/Restroom/RoomView.vue          | 250 ++++--
 src/views/Restroom/UpdateRoom.vue        | 936 ++++++++++++++++++++---
 src/views/RoomLayout/RoomLayoutView.vue  |  54 +-
 src/views/SearchAll/SearchView.vue       |  13 +-
 src/views/Users/UserlistView.vue         | 109 +--
 src/views/UtilitiesRoom/UtilitieView.vue | 197 +++--
 13 files changed, 2041 insertions(+), 495 deletions(-)
 create mode 100644 src/assets/dataJson/masterData.json

diff --git a/src/assets/css/material-kit-pro.css b/src/assets/css/material-kit-pro.css
index 2318035..4c46a28 100644
--- a/src/assets/css/material-kit-pro.css
+++ b/src/assets/css/material-kit-pro.css
@@ -9758,7 +9758,7 @@ textarea.form-control-lg {
 .bg-gray-200 {
   background-color: #f0f2f5 !important;
 }
-
+    
 .bg-gray-300 {
   background-color: #dee2e6 !important;
 }
diff --git a/src/assets/dataJson/masterData.json b/src/assets/dataJson/masterData.json
new file mode 100644
index 0000000..16a5401
--- /dev/null
+++ b/src/assets/dataJson/masterData.json
@@ -0,0 +1,343 @@
+{
+    "ranks": [
+        {
+            "label": "ส.ต.ต.",
+            "value": "ส.ต.ต."
+        },
+        {
+            "label": "ส.ต.ต.หญิง",
+            "value": "ส.ต.ต.หญิง"
+        },
+        {
+            "label": "ส.ต.ท.",
+            "value": "ส.ต.ท."
+        },
+        {
+            "label": "ส.ต.ท.หญิง",
+            "value": "ส.ต.ท.หญิง"
+        },
+        {
+            "label": "ส.ต.อ.",
+            "value": "ส.ต.อ."
+        },
+        {
+            "label": "ส.ต.อ.หญิง",
+            "value": "ส.ต.อ.หญิง"
+        },
+        {
+            "label": "จ.ส.ต.",
+            "value": "จ.ส.ต."
+        },
+        {
+            "label": "จ.ส.ต.หญิง",
+            "value": "จ.ส.ต.หญิง"
+        },
+        {
+            "label": "ด.ต.",
+            "value": "ด.ต."
+        },
+        {
+            "label": "ด.ต.หญิง",
+            "value": "ด.ต.หญิง"
+        },
+        {
+            "label": "ร.ต.ต.",
+            "value": "ร.ต.ต."
+        },
+        {
+            "label": "ร.ต.ต.หญิง",
+            "value": "ร.ต.ต.หญิง"
+        },
+        {
+            "label": "ร.ต.ท.",
+            "value": "ร.ต.ท."
+        },
+        {
+            "label": "ร.ต.ท.หญิง",
+            "value": "ร.ต.ท.หญิง"
+        },
+        {
+            "label": "ร.ต.อ.",
+            "value": "ร.ต.อ."
+        },
+        {
+            "label": "ร.ต.อ.หญิง",
+            "value": "ร.ต.อ.หญิง"
+        },
+        {
+            "label": "พ.ต.ต.",
+            "value": "พ.ต.ต."
+        },
+        {
+            "label": "พ.ต.ต.หญิง",
+            "value": "พ.ต.ต.หญิง"
+        },
+        {
+            "label": "พ.ต.ท.",
+            "value": "พ.ต.ท."
+        },
+        {
+            "label": "พ.ต.ท.หญิง",
+            "value": "พ.ต.ท.หญิง"
+        },
+        {
+            "label": "พ.ต.อ.",
+            "value": "พ.ต.อ."
+        },
+        {
+            "label": "พ.ต.อ.หญิง",
+            "value": "พ.ต.อ.หญิง"
+        },
+        {
+            "label": "พล.ต.ต.",
+            "value": "พล.ต.ต."
+        },
+        {
+            "label": "พล.ต.ท.",
+            "value": "พล.ต.ท."
+        },
+        {
+            "label": "พล.ต.อ.",
+            "value": "พล.ต.อ."
+        }
+    ],
+    "position": [
+        {
+            "label": "รอง สว.",
+            "value": "รอง สว."
+        },
+        {
+            "label": "สว.",
+            "value": "สว."
+        },
+        {
+            "label": "รอง ผกก.",
+            "value": "รอง ผกก."
+        },
+        {
+            "label": "ผกก.",
+            "value": "ผกก."
+        },
+        {
+            "label": "รอง ผบก.",
+            "value": "รอง ผบก."
+        },
+        {
+            "label": "ผบก.",
+            "value": "ผบก."
+        },
+        {
+            "label": "รอง ผบช.",
+            "value": "รอง ผบช."
+        },
+        {
+            "label": "ผบช.",
+            "value": "ผบช."
+        },
+        {
+            "label": "ผบ.หมู่",
+            "value": "ผบ.หมู่"
+        }
+    ],
+    "Affiliation": [
+        {
+            "label": "บช.ตซด.",
+            "value": "บช.ตซด."
+        },
+        {
+            "label": "บช.อก.",
+            "value": "บช.อก."
+        },
+        {
+            "label": "ฝอ.1",
+            "value": "ฝอ.1"
+        },
+        {
+            "label": "ฝอ.2",
+            "value": "ฝอ.2"
+        },
+        {
+            "label": "ฝอ.3",
+            "value": "ฝอ.3"
+        },
+        {
+            "label": "ฝอ.4",
+            "value": "ฝอ.4"
+        },
+        {
+            "label": "ฝอ.5",
+            "value": "ฝอ.5"
+        },
+        {
+            "label": "ฝอ.6",
+            "value": "ฝอ.6"
+        },
+        {
+            "label": "ฝอ.7",
+            "value": "ฝอ.7"
+        },
+        {
+            "label": "ฝอ.8",
+            "value": "ฝอ.8"
+        },
+        {
+            "label": "บช.สสน.",
+            "value": "บช.สสน."
+        },
+        {
+            "label": "ฝสสน.1",
+            "value": "ฝสสน.1"
+        },
+        {
+            "label": "ฝสสน.1",
+            "value": "ฝสสน.1"
+        },
+        {
+            "label": "ฝสสน.1",
+            "value": "ฝสสน.1"
+        },
+        {
+            "label": "ฝสสน.1",
+            "value": "ฝสสน.1"
+        },
+        {
+            "label": "ฝสสน.5",
+            "value": "ฝสสน.5"
+        }
+    ],
+    "building": [
+        {
+            "buil": "อาคารบ้านพัก บช. ตชด.",
+            "name": "อาคารแฟลต 1/11",
+            "room": "24",
+            "floor": "4",
+            "type": "ช.2"
+        },
+        {
+            "buil": "อาคารบ้านพัก บช. ตชด.",
+            "name": "อาคารแฟลต 1/12",
+            "room": "20",
+            "floor": "4",
+            "type": "ช.2"
+        },
+        {
+            "buil": "อาคารบ้านพัก บช. ตชด.",
+            "name": "อาคารแฟลต 1/13",
+            "room": "24",
+            "floor": "4",
+            "type": "ช.2"
+        },
+        {
+            "buil": "อาคารบ้านพัก บช. ตชด.",
+            "name": "อาคารแฟลต 1/14",
+            "room": "18",
+            "floor": "3",
+            "type": "ช.3"
+        },
+        {
+            "buil": "อาคารบ้านพัก บช. ตชด.",
+            "name": "อาคารแฟลต 1/15",
+            "room": "32",
+            "floor": "4",
+            "type": "ช.2"
+        },
+        {
+            "buil": "อาคารบ้านพัก บช. ตชด.",
+            "name": "อาคารแฟลต 1/16",
+            "room": "24",
+            "floor": "4",
+            "type": "ช.2"
+        },
+        {
+            "buil": "อาคารบ้านพัก บช. ตชด.",
+            "name": "อาคารแฟลต 1/17",
+            "room": "32",
+            "floor": "4",
+            "type": "ช.2"
+        },
+        {
+            "buil": "อาคารบ้านพัก บช. ตชด.",
+            "name": "อาคารแฟลต 1/18",
+            "room": "60",
+            "floor": "5",
+            "type": "-"
+        },
+        {
+            "buil": "อาคารบ้านพัก บช. ตชด.",
+            "name": "แฟลตลือชา 1",
+            "room": "50",
+            "floor": "5",
+            "type": "-"
+        },
+        {
+            "buil": "อาคารบ้านพัก บช. ตชด.",
+            "name": "แฟลตลือชา 2",
+            "room": "50",
+            "floor": "5",
+            "type": "-"
+        },
+        {
+            "buil": "อาคารบ้านพัก บช. ตชด.",
+            "name": "แฟลตลือชา 3",
+            "room": "40",
+            "floor": "5",
+            "type": "ช.2"
+        },
+        {
+            "buil": "อาคารบ้านพัก บช. ตชด.",
+            "name": "แฟลตบางเขน 1",
+            "room": "50",
+            "floor": "5",
+            "type": "-"
+        },
+        {
+            "buil": "อาคารบ้านพัก บช. ตชด.",
+            "name": "แฟลตบางเขน 2",
+            "room": "50",
+            "floor": "5",
+            "type": "ช.2"
+        },
+        {
+            "buil": "อาคารบ้านพักส่วนกลาง",
+            "name": "ลือชา ตร.",
+            "room": "-",
+            "floor": "-",
+            "type": "-"
+        },
+        {
+            "buil": "อาคารบ้านพักส่วนกลาง",
+            "name": "ทุ่งสองห้อง",
+            "room": "-",
+            "floor": "-",
+            "type": "-"
+        },
+        {
+            "buil": "อาคารบ้านพักส่วนกลาง",
+            "name": "วิภาวดี",
+            "room": "-",
+            "floor": "-",
+            "type": "-"
+        },
+        {
+            "buil": "อาคารบ้านพักส่วนกลาง",
+            "name": "ถนอมมิตร",
+            "room": "-",
+            "floor": "-",
+            "type": "-"
+        },
+        {
+            "buil": "อาคารบ้านพักส่วนกลาง",
+            "name": "อุดมสุข",
+            "room": "-",
+            "floor": "-",
+            "type": "-"
+        },
+        {
+            "buil": "อาคารบ้านพักส่วนกลาง",
+            "name": "เฉลิมลาภ",
+            "room": "-",
+            "floor": "-",
+            "type": "-"
+        }
+    ]
+}
\ No newline at end of file
diff --git a/src/assets/dataJson/rooms.json b/src/assets/dataJson/rooms.json
index 9db3f6d..0332188 100644
--- a/src/assets/dataJson/rooms.json
+++ b/src/assets/dataJson/rooms.json
@@ -2,66 +2,105 @@
     {
         "title": "ห้อง 1",
         "dataIndex": "1",
+        "firstName": "",
+        "laststName": "",
+        "Affiliation": "",
         "status": "free"
       },
       {
         "title": "ห้อง 2",
         "dataIndex": "2",
+        "firstName": "ปิติ2",
+        "laststName": "มีดี",
+        "Affiliation": "ฝอ. 2",
         "status": "unavailable"
       },
       {
         "title": "ห้อง 3",
         "dataIndex": "3",
+        "firstName": "",
+        "laststName": "",
+        "Affiliation": "",
         "status": "free"
       },
       {
         "title": "ห้อง 4",
         "dataIndex": "4",
+        "firstName": "ปิติ2",
+        "laststName": "มีดี",
+        "Affiliation": "ฝอ. 1",
         "status": "return"
       },
       {
         "title": "ห้อง 5",
         "dataIndex": "5",
+        "firstName": "ปิติ3",
+        "laststName": "มีดี",
+        "Affiliation": "ฝอ. 1",
         "status": "unavailable"
       },
       {
         "title": "ห้อง 6",
         "dataIndex": "6",
+        "firstName": "ปิติ4",
+        "laststName": "มีดี",
+        "Affiliation": "ฝอ. 1",
         "status": "waiting"
       },
       {
         "title": "ห้อง 7",
         "dataIndex": "7",
+        "firstName": "ปิติ3",
+        "laststName": "มีดี",
+        "Affiliation": "ฝอ. 1",
         "status": "return"
       },
       {
         "title": "ห้อง 8",
         "dataIndex": "8",
-        "status": "unavailable"
+        "firstName": "ปิติ9",
+        "laststName": "มีดี",
+        "Affiliation": "ฝอ. 1",
+        "status": "special"
       },
       {
         "title": "ห้อง 9",
         "dataIndex": "9",
+        "firstName": "ปิติ5",
+        "laststName": "มีดี",
+        "Affiliation": "ฝอ. 4",
         "status": "unavailable"
       },
       {
         "title": "ห้อง 10",
         "dataIndex": "10",
+        "firstName": "ปิติ6",
+        "laststName": "มีดี",
+        "Affiliation": "ฝอ. 7",
         "status": "waiting"
       },
       {
         "title": "ห้อง 11",
         "dataIndex": "11",
+        "firstName": "",
+        "laststName": "",
+        "Affiliation": "",
         "status": "free"
       },
       {
         "title": "ห้อง 12",
         "dataIndex": "12",
+        "firstName": "",
+        "laststName": "",
+        "Affiliation": "",
         "status": "free"
       },
       {
         "title": "ห้อง 13",
         "dataIndex": "13",
-        "status": "waiting"
+        "firstName": "ปิติ7",
+        "laststName": "มีดี",
+        "Affiliation": "ฝอ. 2",
+        "status": "special"
       }
 ]
\ No newline at end of file
diff --git a/src/views/Queue/QueueView.vue b/src/views/Queue/QueueView.vue
index 6aac1a5..b8a13cc 100644
--- a/src/views/Queue/QueueView.vue
+++ b/src/views/Queue/QueueView.vue
@@ -29,8 +29,8 @@ const userlist = [
     dataIndex: "1",
     firstName: "สมชาย",
     lastName: "แสงทอง",
-    Affiliation: "บก", //สังกัด
-    rank: "ร้อยตรี", //ยศ
+    Affiliation: "ฝอ.2", //สังกัด
+    rank: "ส.ต.ต.", //ยศ
     old: "32",
     birthday: "04/03/2534",
     idcard: "134044411441122",
@@ -40,8 +40,8 @@ const userlist = [
     dataIndex: "2",
     firstName: "สมชัย",
     lastName: "แสงสุข",
-    Affiliation: "กก", //สังกัด
-    rank: "ร้อยตรี", //ยศ
+    Affiliation: "ฝอ.2", //สังกัด
+    rank: "ส.ต.ต.", //ยศ
     old: "32",
     birthday: "14/07/2534",
     idcard: "134044411441178",
@@ -68,11 +68,10 @@ export default {
     return {
       value: { name: "Vue.js", language: "JavaScript" },
       options: [
-        { label: "Vue.js", value: "JavaScript" },
-        { label: "Rails", value: "Ruby" },
-        { label: "Sinatra", value: "Ruby" },
-        { label: "Laravel", value: "PHP" },
-        { label: "Phoenix", value: "Elixir" },
+        { label: "มานพ", value: "มานพ" },
+        { label: "วิชัย", value: "วิชัย" },
+        { label: "ธนาพร", value: "ธนาพร" },
+        { label: "มนตรี", value: "มนตรี" },
       ],
       selectedColor: "",
       firstName: "",
@@ -154,7 +153,7 @@ export default {
               >เพิ่มผู้เช่าลงคิว</MaterialButton
             >
           </div>
-          <div class="text-center pt-4">
+          <div class="text-center pt-4 table-responsive">
             <table class="table border border-2 border-success">
               <thead class="border border-2 border-success border-bottom">
                 <tr>
@@ -237,16 +236,25 @@ export default {
 </template>
 <style>
 .bg-green {
-  background: #567b57 !important;
-  color: #fff;
+  border: 2px solid #567b57 !important;
+  color: #000;
 }
 .bg-red {
-  background: #d24c4a !important;
-  color: #fff;
+  border: 2px solid #d24c4a !important;
+  color: #000;
 }
-.bg-waring {
-  background: #d1d3d5 !important;
-  color: #fff;
+.bg-warning {
+  border: 2px solid #fb8c00 !important;
+  color: #000;
+}
+.bg-return {
+  border: 2px solid #ffca28 !important;
+  color: #000;
+}
+.bg-special {
+  border: 2px solid #edc7c7 !important;
+  color: #000;
+
 }
 input::-webkit-outer-spin-button,
 input::-webkit-inner-spin-button {
diff --git a/src/views/Reports/ReportlistView.vue b/src/views/Reports/ReportlistView.vue
index 558e809..d1d8f21 100644
--- a/src/views/Reports/ReportlistView.vue
+++ b/src/views/Reports/ReportlistView.vue
@@ -132,14 +132,11 @@ export default {
     <div class="card card-body blur shadow-blur mx-3 mx-md-4 mt-n6">
       <div class="page-header min-vh-45">
         <div class="container">
-            <div>
-              <Breadcrumbs
-                :routes="[
-                  { label: 'หน้าหลัก', route: '/' },
-                  { label: 'ระบบเรียกรายงาน' },
-                ]"
-              />
-            </div>
+          <div>
+            <Breadcrumbs
+              :routes="[{ label: 'หน้าหลัก', route: '/' }, { label: 'ระบบเรียกรายงาน' }]"
+            />
+          </div>
           <div>
             <ul class="nav nav-tabs" id="myTab" role="tablist">
               <li class="nav-item" role="presentation">
@@ -195,56 +192,91 @@ export default {
                 role="tabpanel"
                 aria-labelledby="home-tab"
               >
-                <div class="d-flex justify-content-end pt-4">
-                  <MaterialButton size="lg" class="btn-icon" style="margin-right: -30px">
-                    <div class="d-flex align-items-center">
-                      <span style="margin-right: 5px">บันทึก</span>
-                      <img
-                        src="../../assets/img/pdf.png"
-                        alt="title"
-                        loading="lazy"
-                        width="40"
-                      />
-                    </div>
-                  </MaterialButton>
-                  <MaterialButton size="lg" class="btn-icon">
-                    <div class="d-flex align-items-center">
-                      <span style="margin-right: 5px">บันทึก</span>
-                      <img
-                        src="../../assets/img/excel.png"
-                        alt="title"
-                        loading="lazy"
-                        width="40"
-                      />
-                    </div>
-                  </MaterialButton>
+                <div class="d-flex justify-content-between align-items-baseline">
+                  <div class="d-flex">
+                    <h5>ประจำเดือน ตุลาคม</h5>
+                  </div>
+                  <div class="d-flex pt-4">
+                    <MaterialButton
+                      size="lg"
+                      class="btn-icon"
+                      style="margin-right: -30px"
+                    >
+                      <div class="d-flex align-items-center">
+                        <span style="margin-right: 5px">บันทึก</span>
+                        <img
+                          src="../../assets/img/pdf.png"
+                          alt="title"
+                          loading="lazy"
+                          width="40"
+                        />
+                      </div>
+                    </MaterialButton>
+                    <MaterialButton size="lg" class="btn-icon">
+                      <div class="d-flex align-items-center">
+                        <span style="margin-right: 5px">บันทึก</span>
+                        <img
+                          src="../../assets/img/excel.png"
+                          alt="title"
+                          loading="lazy"
+                          width="40"
+                        />
+                      </div>
+                    </MaterialButton>
+                  </div>
                 </div>
-                <div class="text-center pt-4">
+
+                <div class="text-center pt-4 table-responsive">
                   <table class="table table-hover border border-2 border-success">
                     <thead class="border border-2 border-success border-bottom">
                       <tr>
                         <th scope="col">ลำดับ</th>
-                        <th scope="col">ตึก</th>
+                        <th scope="col">อาคาร</th>
                         <th scope="col">ชั้น</th>
-                        <th scope="col">ห้อง</th>
+                        <th scope="col">เลขที่ห้อง</th>
+                        <th scope="col">ยศ</th>
+                        <th scope="col">ชื่อ-สกุล</th>
+                        <th scope="col">เลขก่อน</th>
+                        <th scope="col">เลขหลัง</th>
                         <th scope="col">ค่าธรรมเนียม</th>
                         <th scope="col">ค่าน้ำประปา</th>
-                        <th scope="col">ค่าไฟฟ้า</th>
                         <th scope="col">ค่าไฟฟ้าส่วนกลาง</th>
-                        <th scope="col">ค่าบำรุงลิฟท์</th>
+                        <th scope="col">รวม</th>
+                        <th scope="col">หักได้</th>
+                        <th scope="col">หักไม่ได้</th>
+                        <th scope="col">สาเหตุหักไม่ได้</th>
                       </tr>
                     </thead>
                     <tbody>
                       <tr>
                         <th scope="row">1</th>
-                        <td>1</td>
-                        <td>2</td>
+                        <td>แฟลตลือชา 2</td>
                         <td>3</td>
-                        <td>20,000</td>
-                        <td>8,000</td>
-                        <td>20,000</td>
-                        <td>8,000</td>
-                        <td>20,000</td>
+                        <td>303</td>
+                        <td>ส.ต.ต.</td>
+                        <td>มีนา บานเย็น</td>
+                        <td>325</td>
+                        <td>365</td>
+                        <td>200</td>
+                        <td>80</td>
+                        <td>200</td>
+                        <td>480</td>
+                        <td>/</td>
+                      </tr>
+                      <tr>
+                        <th scope="row">2</th>
+                        <td>แฟลตลือชา 2</td>
+                        <td>3</td>
+                        <td>303</td>
+                        <td>ส.ต.ต.</td>
+                        <td>มีนา บานเย็น</td>
+                        <td>325</td>
+                        <td>365</td>
+                        <td>200</td>
+                        <td>80</td>
+                        <td>200</td>
+                        <td>480</td>
+                        <td>/</td>
                       </tr>
                     </tbody>
                   </table>
@@ -256,50 +288,73 @@ export default {
                 role="tabpanel"
                 aria-labelledby="profile-tab"
               >
-              <div class="d-flex justify-content-end pt-4">
-                  <MaterialButton size="lg" class="btn-icon" style="margin-right: -30px">
-                    <div class="d-flex align-items-center">
-                      <span style="margin-right: 5px">บันทึก</span>
-                      <img
-                        src="../../assets/img/pdf.png"
-                        alt="title"
-                        loading="lazy"
-                        width="40"
-                      />
-                    </div>
-                  </MaterialButton>
-                  <MaterialButton size="lg" class="btn-icon">
-                    <div class="d-flex align-items-center">
-                      <span style="margin-right: 5px">บันทึก</span>
-                      <img
-                        src="../../assets/img/excel.png"
-                        alt="title"
-                        loading="lazy"
-                        width="40"
-                      />
-                    </div>
-                  </MaterialButton>
+                <div class="d-flex justify-content-between align-items-baseline">
+                  <div class="d-flex">
+                    <h5>ประจำเดือน ตุลาคม</h5>
+                  </div>
+                  <div class="d-flex pt-4">
+                    <MaterialButton
+                      size="lg"
+                      class="btn-icon"
+                      style="margin-right: -30px"
+                    >
+                      <div class="d-flex align-items-center">
+                        <span style="margin-right: 5px">บันทึก</span>
+                        <img
+                          src="../../assets/img/pdf.png"
+                          alt="title"
+                          loading="lazy"
+                          width="40"
+                        />
+                      </div>
+                    </MaterialButton>
+                    <MaterialButton size="lg" class="btn-icon">
+                      <div class="d-flex align-items-center">
+                        <span style="margin-right: 5px">บันทึก</span>
+                        <img
+                          src="../../assets/img/excel.png"
+                          alt="title"
+                          loading="lazy"
+                          width="40"
+                        />
+                      </div>
+                    </MaterialButton>
+                  </div>
                 </div>
                 <div class="text-center pt-4">
                   <table class="table table-hover border border-2 border-success">
                     <thead class="border border-2 border-success border-bottom">
                       <tr>
                         <th scope="col">ลำดับ</th>
-                        <th scope="col">ตึก</th>
+                        <th scope="col">อาคาร</th>
                         <th scope="col">ชั้น</th>
-                        <th scope="col">ห้อง</th>
+                        <th scope="col">เลขที่ห้อง</th>
+                        <th scope="col">สังกัด</th>
                         <th scope="col">ค่าบำรุงฯ</th>
                         <th scope="col">ค่าประกัน</th>
+                        <th scope="col">รวม</th>
                       </tr>
                     </thead>
                     <tbody>
                       <tr>
                         <th scope="row">1</th>
-                        <td>1</td>
+                        <td>แฟลตลือชา 2</td>
                         <td>2</td>
-                        <td>3</td>
-                        <td>20,000</td>
-                        <td>8,000</td>
+                        <td>203</td>
+                        <td>ฝอ.2</td>
+                        <td>1,300</td>
+                        <td>300</td>
+                        <td>1,600</td>
+                      </tr>
+                      <tr>
+                        <th scope="row">2</th>
+                        <td>แฟลตลือชา 2</td>
+                        <td>1</td>
+                        <td>101</td>
+                        <td>ฝอ.1</td>
+                        <td>1,300</td>
+                        <td>300</td>
+                        <td>1,600</td>
                       </tr>
                     </tbody>
                   </table>
@@ -311,46 +366,115 @@ export default {
                 role="tabpanel"
                 aria-labelledby="contact-tab"
               >
-              <div class="d-flex justify-content-end pt-4">
-                  <MaterialButton size="lg" class="btn-icon" style="margin-right: -30px">
-                    <div class="d-flex align-items-center">
-                      <span style="margin-right: 5px">บันทึก</span>
-                      <img
-                        src="../../assets/img/pdf.png"
-                        alt="title"
-                        loading="lazy"
-                        width="40"
-                      />
-                    </div>
-                  </MaterialButton>
-                  <MaterialButton size="lg" class="btn-icon">
-                    <div class="d-flex align-items-center">
-                      <span style="margin-right: 5px">บันทึก</span>
-                      <img
-                        src="../../assets/img/excel.png"
-                        alt="title"
-                        loading="lazy"
-                        width="40"
-                      />
-                    </div>
-                  </MaterialButton>
-                </div>
                 <div class="text-center pt-4">
                   <table class="table table-hover border border-2 border-success">
                     <thead class="border border-2 border-success border-bottom">
                       <tr>
                         <th scope="col">ลำดับ</th>
-                        <th scope="col">กก.</th>
-                        <th scope="col">บก.</th>
-                        <th scope="col">ข้อมูลระดับ บช.</th>
+                        <th scope="col">เดือน</th>
+                        <th scope="col">อาคารบ้านพัก</th>
+                        <th scope="col"></th>
                       </tr>
                     </thead>
                     <tbody>
                       <tr>
                         <th scope="row">1</th>
-                        <td>Mark</td>
-                        <td>Otto</td>
-                        <td>@mdo</td>
+                        <td>ตุลาคม</td>
+                        <td>อาคารบ้านพัก บช. ตชด.</td>
+                        <td>
+                            <MaterialButton
+                              size="lg"
+                              class="btn-icon"
+                              style="margin-right: -0px"
+                            >
+                              <div class="d-flex align-items-center">
+                                <span style="margin-right: 5px">บันทึก</span>
+                                <img
+                                  src="../../assets/img/pdf.png"
+                                  alt="title"
+                                  loading="lazy"
+                                  width="24"
+                                />
+                              </div>
+                            </MaterialButton>
+                            <MaterialButton size="lg" class="btn-icon">
+                              <div class="d-flex align-items-center">
+                                <span style="margin-right: 5px">บันทึก</span>
+                                <img
+                                  src="../../assets/img/excel.png"
+                                  alt="title"
+                                  loading="lazy"
+                                  width="24"
+                                />
+                              </div>
+                            </MaterialButton>
+                        </td>
+                      </tr>
+                      <tr>
+                        <th scope="row">1</th>
+                        <td>ตุลาคม</td>
+                        <td>อาคารบ้านพักส่วนกลาง</td>
+                        <td>
+                            <MaterialButton
+                              size="lg"
+                              class="btn-icon"
+                              style="margin-right: -0px"
+                            >
+                              <div class="d-flex align-items-center">
+                                <span style="margin-right: 5px">บันทึก</span>
+                                <img
+                                  src="../../assets/img/pdf.png"
+                                  alt="title"
+                                  loading="lazy"
+                                  width="24"
+                                />
+                              </div>
+                            </MaterialButton>
+                            <MaterialButton size="lg" class="btn-icon">
+                              <div class="d-flex align-items-center">
+                                <span style="margin-right: 5px">บันทึก</span>
+                                <img
+                                  src="../../assets/img/excel.png"
+                                  alt="title"
+                                  loading="lazy"
+                                  width="24"
+                                />
+                              </div>
+                            </MaterialButton>
+                        </td>
+                      </tr>
+                      <tr>
+                        <th scope="row">1</th>
+                        <td>ตุลาคม</td>
+                        <td>อาคารบ้านพัก ตร.</td>
+                        <td>
+                            <MaterialButton
+                              size="lg"
+                              class="btn-icon"
+                              style="margin-right: -0px"
+                            >
+                              <div class="d-flex align-items-center">
+                                <span style="margin-right: 5px">บันทึก</span>
+                                <img
+                                  src="../../assets/img/pdf.png"
+                                  alt="title"
+                                  loading="lazy"
+                                  width="24"
+                                />
+                              </div>
+                            </MaterialButton>
+                            <MaterialButton size="lg" class="btn-icon">
+                              <div class="d-flex align-items-center">
+                                <span style="margin-right: 5px">บันทึก</span>
+                                <img
+                                  src="../../assets/img/excel.png"
+                                  alt="title"
+                                  loading="lazy"
+                                  width="24"
+                                />
+                              </div>
+                            </MaterialButton>
+                        </td>
                       </tr>
                     </tbody>
                   </table>
@@ -589,16 +713,24 @@ export default {
 </template>
 <style>
 .bg-green {
-  background: #567b57 !important;
-  color: #fff;
+  border: 2px solid #567b57 !important;
+  color: #000;
 }
 .bg-red {
-  background: #d24c4a !important;
-  color: #fff;
+  border: 2px solid #d24c4a !important;
+  color: #000;
 }
-.bg-waring {
-  background: #d1d3d5 !important;
-  color: #fff;
+.bg-warning {
+  border: 2px solid #fb8c00 !important;
+  color: #000;
+}
+.bg-return {
+  border: 2px solid #ffca28 !important;
+  color: #000;
+}
+.bg-special {
+  border: 2px solid #edc7c7 !important;
+  color: #000;
 }
 input::-webkit-outer-spin-button,
 input::-webkit-inner-spin-button {
diff --git a/src/views/Restroom/AddRoom.vue b/src/views/Restroom/AddRoom.vue
index 0739fbd..7dd0b4c 100644
--- a/src/views/Restroom/AddRoom.vue
+++ b/src/views/Restroom/AddRoom.vue
@@ -289,17 +289,4 @@ export default {
     </div>
   </section>
 </template>
-<style>
-.bg-green {
-  background: #567b57 !important;
-  color: #fff;
-}
-.bg-red {
-  background: #d24c4a !important;
-  color: #fff;
-}
-.bg-waring {
-  background: #d1d3d5 !important;
-  color: #fff;
-}
-</style>
+
diff --git a/src/views/Restroom/DetailRoomPage.vue b/src/views/Restroom/DetailRoomPage.vue
index 5c32cef..c624b6c 100644
--- a/src/views/Restroom/DetailRoomPage.vue
+++ b/src/views/Restroom/DetailRoomPage.vue
@@ -10,8 +10,8 @@ const userlist = [
     dataIndex: "1",
     firstName: "สมชาย",
     lastName: "แสงทอง",
-    Affiliation: "บก", //สังกัด
-    rank: "ร้อยตรี", //ยศ
+    Affiliation: "ฝอ.2", //สังกัด
+    rank: "ส.ต.ต.",
     idcard: "134044411441122",
     phone: "0325647846",
     ContractDate: "12/11/2566", //สังกัด
@@ -23,8 +23,8 @@ const userlist = [
     dataIndex: "2",
     firstName: "สมชัย",
     lastName: "แสงสุข",
-    Affiliation: "กก", //สังกัด
-    rank: "ร้อยตรี", //ยศ
+    Affiliation: "ฝอ.2", //สังกัด
+    rank: "ส.ต.ต.",
     idcard: "134044411441178",
     phone: "0325647845",
     ContractDate: "12/11/2566", //สังกัด
@@ -120,32 +120,24 @@ export default {
           </div>
           <!-- d-flex justify-content-between -->
           <div class="d-flex justify-content-between align-items-baseline">
-            <h4>รายละเอียดห้องพัก</h4>
+            <h4>รายละเอียดห้องพัก 101</h4>
             <div v-if="mode == 'edit'">
               <MaterialButton variant="gradient" color="success" @click="gotoAction()"
-                >แก้ไขรายละเอียดห้อง</MaterialButton
+                >จัดการห้องพัก</MaterialButton
               >
-              <MaterialButton
+              <!-- <MaterialButton
                 style="margin-left: 20px; margin-right: 10px"
                 variant="gradient"
                 color="warning"
                 data-bs-toggle="modal"
                 data-bs-target="#Returntheroom"
                 >คืนห้อง</MaterialButton
-              >
+              > -->
             </div>
           </div>
           <div class="row pt-4">
             <div class="card mb-3">
               <div class="row g-0">
-                <!-- <div class="col-md-4">
-                  <img
-                    width="300"
-                    src="../../assets/img/team-4.jpg"
-                    class="img-fluid rounded-start"
-                    alt="..."
-                  />
-                </div> -->
                 <div class="col-md-10">
                   <div class="card-body">
                     <div class="row" v-if="statusedit == true">
@@ -153,7 +145,7 @@ export default {
                       <div class="col-5">
                         <p class="card-text">ชือ : มานะ</p>
                         <p class="card-text">สถานะห้อง : ไม่ว่าง</p>
-                        <p class="card-text">ยศ : ร้อยตรี</p>
+                        <p class="card-text">ยศ : ส.ต.ต.</p>
                         <p class="card-text">วันเกิด : 12/02/2514</p>
                         <p class="card-text">วันทำสัญญา : 12/02/2564</p>
                         <p class="card-text">อายุ : 33 ปี</p>
@@ -161,7 +153,7 @@ export default {
                       </div>
                       <div class="col-7">
                         <p class="card-text">นามสกุล : ถือดี</p>
-                        <p class="card-text">สังกัด : กก</p>
+                        <p class="card-text">สังกัด : ฝอ. 1</p>
                         <p class="card-text">เลขบัตรประชาชน : 123456123456</p>
                         <p class="card-text">เบอร์โทร : 0972534887</p>
                         <p class="card-text">เงินค่าประกัน : 12,000</p>
@@ -174,6 +166,12 @@ export default {
                         <p class="card-text">มิเตอร์น้ำ/ไฟ : 745/546</p>
                         <p class="card-text">สภาพห้อง : ปกติ</p>
                       </div>
+                      <div class="col-5">
+                        <h5 class="card-title pt-2"></h5>
+                        <p class="card-text">เลขที่เริ่มใช้ : 3012</p>
+                        <p class="card-text">เดื่อนที่เริ่มใช้ : มกราคม</p>
+                        <p class="card-text">ปีที่เริ่มใช้ : 2565</p>
+                      </div>
                     </div>
                     <!-- <p class="card-text">
                       <small class="text-muted">Last updated 3 mins ago</small>
@@ -327,10 +325,10 @@ export default {
       aria-labelledby="staticBackdropLabel"
       aria-hidden="true"
     >
-      <div class="modal-dialog modal-dialog-centered">
+      <div class="modal-dialog modal-dialog-centered" style="max-width: 740px">
         <div class="modal-content">
           <div class="modal-header">
-            <h5 class="modal-title" id="staticBackdropLabel">การคืนห้อง</h5>
+            <h5 class="modal-title" id="staticBackdropLabel">คืนห้อง</h5>
             <button
               type="button"
               class="btn-close"
@@ -340,8 +338,12 @@ export default {
           </div>
           <div class="modal-body">
             <div>
-              <div class="mb-3">
+              <div
+                class="mb-3"
+                style="display: flex; justify-content: space-between; align-items: center"
+              >
                 <div class="form-check form-check-inline">
+                  <label style="margin-right: 20px">กุญแจห้อง</label>
                   <input
                     class="form-check-input"
                     type="radio"
@@ -349,7 +351,7 @@ export default {
                     id="inlineRadio1"
                     value="option1"
                   />
-                  <label class="form-check-label" for="inlineRadio1">รอคืนห้อง</label>
+                  <label class="form-check-label" for="inlineRadio1">มี</label>
                 </div>
                 <div class="form-check form-check-inline">
                   <input
@@ -359,29 +361,103 @@ export default {
                     id="inlineRadio2"
                     value="option2"
                   />
-                  <label class="form-check-label" for="inlineRadio2">รอซ่อม</label>
+                  <label class="form-check-label" for="inlineRadio2">ไม่มี</label>
+                </div>
+                <div style="width: 360px; margin-bottom: 10px">
+                  <MaterialInput
+                    name="contract"
+                    :value="contract"
+                    @input="(event) => (contract = event.target.value)"
+                    class="input-group-static"
+                    type="text"
+                    placeholder="สาเหตุ"
+                  />
                 </div>
               </div>
-              <div class="mb-3">
-                <MaterialInput
-                  name="contract"
-                  :value="contract"
-                  @input="(event) => (contract = event.target.value)"
-                  class="input-group-static"
-                  label="จำนวนเงินคงค้าง"
-                  type="text"
-                  placeholder="จำนวนเงินคงค้าง"
-                />
+              <div
+                class="mb-3"
+                style="display: flex; justify-content: space-between; align-items: center"
+              >
+                <div class="form-check form-check-inline">
+                  <label style="margin-right: 20px">ทะเบียนบ้าน</label>
+                  <input
+                    class="form-check-input"
+                    type="radio"
+                    name="inlineRadioOptions"
+                    id="inlineRadio1"
+                    value="option1"
+                  />
+                  <label class="form-check-label" for="inlineRadio1">มี</label>
+                </div>
+                <div class="form-check form-check-inline">
+                  <input
+                    class="form-check-input"
+                    type="radio"
+                    name="inlineRadioOptions"
+                    id="inlineRadio2"
+                    value="option2"
+                  />
+                  <label class="form-check-label" for="inlineRadio2">ไม่มี</label>
+                </div>
+                <div style="width: 360px; margin-bottom: 10px">
+                  <MaterialInput
+                    name="contract"
+                    :value="contract"
+                    @input="(event) => (contract = event.target.value)"
+                    class="input-group-static"
+                    type="text"
+                    placeholder="สาเหตุ"
+                  />
+                </div>
               </div>
-              <div class="mb-3">
-                <MaterialInput
-                  :value="Checkintime"
-                  @input="(event) => (Checkintime = event.target.value)"
-                  class="input-group-static"
-                  label="จำนวนงวดที่จ่าย"
-                  type="text"
-                  placeholder="จำนวนงวดที่จ่าย"
-                />
+              <div>
+                <label style="padding-left: 30px;">หลักฐานแสดงการชําระค่าไฟเดือนล่าสุด</label>
+              </div>
+              <div
+                class="mb-3"
+                style="margin-left:10px; display: flex; justify-content: space-between; align-items: center"
+              >
+                <div class="form-check form-check-inline">
+                  
+                  <input
+                    class="form-check-input"
+                    type="radio"
+                    name="inlineRadioOptions"
+                    id="inlineRadio1"
+                    value="option1"
+                  />
+                  <label class="form-check-label" for="inlineRadio1">มี</label>
+                </div>
+                <div style="width: 250px; margin-bottom: 10px">
+                  <MaterialInput
+                    name="contract"
+                    :value="contract"
+                    @input="(event) => (contract = event.target.value)"
+                    class="input-group-static"
+                    type="text"
+                    placeholder="สาเหตุ"
+                  />
+                </div>
+                <div class="form-check form-check-inline">
+                  <input
+                    class="form-check-input"
+                    type="radio"
+                    name="inlineRadioOptions"
+                    id="inlineRadio2"
+                    value="option2"
+                  />
+                  <label class="form-check-label" for="inlineRadio2">ไม่มี</label>
+                </div>
+                <div style="width: 250px; margin-bottom: 10px">
+                  <MaterialInput
+                    name="contract"
+                    :value="contract"
+                    @input="(event) => (contract = event.target.value)"
+                    class="input-group-static"
+                    type="text"
+                    placeholder="สาเหตุ"
+                  />
+                </div>
               </div>
             </div>
           </div>
@@ -404,15 +480,23 @@ export default {
 </template>
 <style>
 .bg-green {
-  background: #567b57 !important;
-  color: #fff;
+  border: 2px solid #567b57 !important;
+  color: #000;
 }
 .bg-red {
-  background: #d24c4a !important;
-  color: #fff;
+  border: 2px solid #d24c4a !important;
+  color: #000;
 }
-.bg-waring {
-  background: #d1d3d5 !important;
-  color: #fff;
+.bg-warning {
+  border: 2px solid #fb8c00 !important;
+  color: #000;
+}
+.bg-return {
+  border: 2px solid #ffca28 !important;
+  color: #000;
+}
+.bg-special {
+  border: 2px solid #edc7c7 !important;
+  color: #000;
 }
 </style>
diff --git a/src/views/Restroom/RoomView.vue b/src/views/Restroom/RoomView.vue
index 0c82d65..84afd5b 100644
--- a/src/views/Restroom/RoomView.vue
+++ b/src/views/Restroom/RoomView.vue
@@ -36,20 +36,26 @@ export default {
         { label: "Phoenix", value: "Elixir" },
       ],
       listRoom: [
-        { label: "ตึก 1", value: "ตึก 1" },
-        { label: "ตึก 2", value: "ตึก 2" },
-        { label: "ตึก 3", value: "ตึก 3" },
-        { label: "ตึก 4", value: "ตึก 4" },
-        { label: "ตึก 5", value: "ตึก 5" },
-        { label: "ตึก 6", value: "ตึก 6" },
-        { label: "ตึก 7", value: "ตึก 7" },
+        { label: "อาคารแฟลต 1/11", value: "1" },
+        { label: "อาคารแฟลต 1/12", value: "2" },
+        { label: "อาคารแฟลต 1/13", value: "3" },
+        { label: "อาคารแฟลต 1/14", value: "4" },
+        { label: "อาคารแฟลต 1/15", value: "5" },
+        { label: "อาคารแฟลต 1/16", value: "3" },
+        { label: "อาคารแฟลต 1/17", value: "4" },
+        { label: "อาคารแฟลต 1/18", value: "5" },
+        { label: "แฟลตลือชา 1", value: "5" },
+        { label: "แฟลตลือชา 2", value: "3" },
+        { label: "แฟลตลือชา 3", value: "4" },
+        { label: "แฟลตบางเขน 1", value: "5" },
+        { label: "แฟลตบางเขน 2", value: "5" },
       ],
       selectedColor: "",
       statusfree: false,
       statusreturn: false,
       statuseunavailable: false,
       statusewaiting: false,
-      selectedlistRoom: "ตึก 1",
+      selectedlistRoom: "อาคารแฟลต 1/11 ",
     };
   },
   created() {
@@ -124,27 +130,26 @@ export default {
           </div>
           <div class="row pt-4 align-items-baseline">
             <div class="col-4">
-              <div class=" d-flex justify-content-start align-items-baseline">
-                <label class="w-30" >
+              <div class="d-flex justify-content-start align-items-baseline">
+                <label class="w-30">
                   <i class="material-icons opacity-6 me-2 text-md">home</i>
                   เลือกตึก</label
                 >
-                <v-select class="w-100" :options="listRoom" v-model="selectedlistRoom"></v-select>
+                <v-select
+                  class="w-100"
+                  :options="listRoom"
+                  v-model="selectedlistRoom"
+                ></v-select>
               </div>
-             
             </div>
             <div class="col-8">
               <div class="d-flex justify-content-end align-items-baseline">
                 <div class="d-flex">
                   <MaterialCheckbox id="terms5" checked>
-                    <a href="javascript:;" class=" font-weight-bolder">
-                      รายตึก</a
-                    >
+                    <a href="javascript:;" class="font-weight-bolder"> รายตึก</a>
                   </MaterialCheckbox>
                   <MaterialCheckbox id="terms6">
-                    <a href="javascript:;" class=" font-weight-bolder">
-                      ตึกทั้งหมด</a
-                    >
+                    <a href="javascript:;" class="font-weight-bolder"> ตึกทั้งหมด</a>
                   </MaterialCheckbox>
                 </div>
                 <label style="margin-right: 10px; margin-left: 20px"
@@ -162,15 +167,29 @@ export default {
 
           <div class="text-center pt-4">
             <div class="d-flex justify-content-between align-items-baseline p-2">
-              <h6>ตึก 1</h6>
+              <div class="text-start">
+                <h6>{{ selectedlistRoom }}</h6>
+                <p class="d-flex align-items-baseline p-2">
+                  <span>คณะกรรมการประจําตึก : มารุช ดีงาม , บารมี ดีงาม</span>
+                  <a data-bs-toggle="modal" data-bs-target="#Edituser"
+                    ><i
+                      class="material-icons"
+                      style="cursor: pointer; margin-left: 10px"
+                      aria-hidden="true"
+                      >edit</i
+                    ></a
+                  >
+                </p>
+              </div>
+
               <div class="d-flex">
                 <MaterialCheckbox
                   id="terms"
-                  color="success"
+                  color="green"
                   :checked="statusfree"
                   @change="onChangeEvent('free')"
                 >
-                  <a href="javascript:;" class=" font-weight-bolder"> ว่าง</a>
+                  <a href="javascript:;" class="font-weight-bolder"> ว่าง</a>
                 </MaterialCheckbox>
                 <MaterialCheckbox
                   id="terms2"
@@ -178,22 +197,15 @@ export default {
                   :checked="statuseunavailable"
                   @change="onChangeEvent('unavailable')"
                 >
-                  <a href="javascript:;" class="font-weight-bolder">
-                    ไม่ว่าง</a
-                  >
+                  <a href="javascript:;" class="font-weight-bolder"> ไม่ว่าง</a>
                 </MaterialCheckbox>
                 <MaterialCheckbox
                   id="terms3"
-                  color="warning"
+                  color="warning2"
                   :checked="statusewaiting"
                   @change="onChangeEvent('waiting')"
                 >
-                  <a
-                    href="javascript:;"
-                    class="font-weight-bolder"
-                  >
-                    รอซ่อม</a
-                  >
+                  <a href="javascript:;" class="font-weight-bolder"> ชำรุด</a>
                 </MaterialCheckbox>
                 <MaterialCheckbox
                   id="terms4"
@@ -201,12 +213,7 @@ export default {
                   :checked="statusreturn"
                   @change="onChangeEvent('return')"
                 >
-                  <a
-                    href="javascript:;"
-                    class="font-weight-bolder"
-                  >
-                    รอคืนห้อง</a
-                  >
+                  <a href="javascript:;" class="font-weight-bolder"> รอคืนห้อง</a>
                 </MaterialCheckbox>
               </div>
             </div>
@@ -215,7 +222,7 @@ export default {
             <div v-for="(item, index) in NoRoom" :key="index">
               <div class="card mb-2">
                 <div class="card-body">
-                  <p class="text-start mt-4">
+                  <p class="text-start">
                     <MaterialButton
                       variant="outline"
                       color="success"
@@ -239,20 +246,78 @@ export default {
                             :class="{
                               'bg-red': item?.status == 'unavailable',
                               'bg-green': item?.status == 'free',
-                              'bg-warning': item?.status == 'waiting',
+                              'bg-warning2': item?.status == 'waiting',
                               'bg-return': item?.status == 'return',
+                              'bg-special': item?.status == 'special',
                             }"
-                            :style="{ width: `110px` }"
+                            :style="{ width: `115px`, height: `170px` }"
                           >
-                            <div class="card-body">
-                              <p class="card-title">
-                                <a
-                                  style="cursor: pointer"
-                                  @click="gotodetail(item?.dataIndex, item?.status)"
-                                  class="text-white"
-                                  >{{ item?.title }}</a
+                            <div class="card-body p-1">
+                              <a
+                                style="cursor: pointer"
+                                @click="gotodetail(item?.dataIndex, item?.status)"
+                                class="text-drck"
+                              >
+                                <p
+                                  class="card-title"
+                                  :class="{
+                                    'bg-red': item?.status == 'unavailable',
+                                    'bg-green': item?.status == 'free',
+                                    'bg-warning2': item?.status == 'waiting',
+                                    'bg-return': item?.status == 'return',
+                                    'bg-special': item?.status == 'special',
+                                  }"
                                 >
-                              </p>
+                                  <a>{{ item?.title }}</a>
+                                </p>
+                                <p
+                                  v-if="item?.status == 'free'"
+                                  class="card-title bgg-green"
+                                  style="font-size: 16px"
+                                >
+                                  {{ "ว่าง" }}
+                                </p>
+                                <p
+                                  v-if="item?.status == 'unavailable'"
+                                  class="card-title bgg-red"
+                                  style="font-size: 16px"
+                                >
+                                  {{ "ไม่ว่าง" }}
+                                </p>
+                                <p
+                                  v-if="item?.status == 'waiting'"
+                                  class="card-title bgg-warning2"
+                                  style="font-size: 16px"
+                                >
+                                  {{ "ชำรุด" }}
+                                </p>
+                                <p
+                                  v-if="item?.status == 'return'"
+                                  class="card-title bgg-return"
+                                  style="font-size: 16px"
+                                >
+                                  {{ "รอคืนห้อง" }}
+                                </p>
+                                <p class="card-title" style="font-size: 14px">
+                                  {{ item?.firstName }}
+                                </p>
+                                <p class="card-title" style="font-size: 14px">
+                                  {{ item?.laststName }}
+                                </p>
+                                <div>
+                                  <span
+                                    v-if="item?.status !== 'special'"
+                                    style="text-align: right; font-size: small"
+                                    >{{ item?.Affiliation }}</span
+                                  >
+                                  <span
+                                    v-if="item?.status == 'special'"
+                                    class="text-red"
+                                    style="text-align: right; font-size: small"
+                                    >{{ "กรณีพิเศษ" }}</span
+                                  >
+                                </div>
+                              </a>
                             </div>
                           </div>
                         </div>
@@ -299,24 +364,95 @@ export default {
         </div>
       </div>
     </div>
+
+    <!-- Modal -->
+    <div
+      class="modal fade"
+      id="Edituser"
+      data-bs-backdrop="static"
+      data-bs-keyboard="false"
+      tabindex="-1"
+      aria-labelledby="staticBackdropLabel"
+      aria-hidden="true"
+    >
+      <div class="modal-dialog modal-dialog-centered">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h5 class="modal-title" id="staticBackdropLabel">แก้ไขชื่อคณะกรรมการ</h5>
+            <button
+              type="button"
+              class="btn-close"
+              data-bs-dismiss="modal"
+              aria-label="Close"
+            ></button>
+          </div>
+          <div class="modal-body">
+            <div class="mb-3">
+              <label for="exampleFormControlTextarea1" class="form-label"
+                >ชื่อคณะกรรมการ</label
+              >
+              <textarea
+                class="form-control"
+                id="exampleFormControlTextarea1"
+                rows="3"
+                placeholder="กรอกชื่อ"
+              ></textarea>
+            </div>
+          </div>
+          <div class="modal-footer">
+            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
+              ปิดหน้าต่าง
+            </button>
+            <MaterialButton variant="gradient" color="success">บันทึก</MaterialButton>
+          </div>
+        </div>
+      </div>
+    </div>
   </section>
 </template>
 <style>
 .bg-green {
-  background: #567b57 !important;
-  color: #fff;
+  border: 2px solid #567b57 !important;
+  color: #000;
 }
 .bg-red {
-  background: #d24c4a !important;
-  color: #fff;
+  border: 2px solid #d24c4a !important;
+  color: #000;
 }
-.bg-warning {
-  background: #fb8c00 !important;
-  color: #fff;
+.bg-warning2 {
+  border: 2px solid #fb8c00 !important;
+  color: #000;
 }
 .bg-return {
-  background: #ffca28 !important;
-  color: #fff;
+  border: 2px solid #ffca28 !important;
+  color: #000;
+}
+.bg-special {
+  border: 2px solid #edc7c7 !important;
+  color: #000;
+}
+.bgg-green {
+  background-color: #567b57 !important;
+  color: #fff !important;
+}
+.bgg-red {
+  background-color: #d24c4a !important;
+  color: #fff !important;
+}
+.bgg-warning2 {
+  background-color: #fb8c00 !important;
+  color: #fff !important;
+}
+.bgg-return {
+  background-color: #ffca28 !important;
+  color: #fff !important;
+}
+.bgg-special {
+  background-color: #edc7c7 !important;
+  color: #fff !important;
+}
+.text-red {
+  color: #d24c4a !important;
 }
 ol.breadcrumb {
   padding: 1rem !important;
diff --git a/src/views/Restroom/UpdateRoom.vue b/src/views/Restroom/UpdateRoom.vue
index 2657388..d90ba8c 100644
--- a/src/views/Restroom/UpdateRoom.vue
+++ b/src/views/Restroom/UpdateRoom.vue
@@ -101,6 +101,30 @@ const landingColumns = [
     status: false,
   },
 ];
+const userlist = [
+  {
+    dataIndex: "1",
+    firstName: "สมชาย",
+    lastName: "แสงทอง",
+    Affiliation: "ฝอ.2", //สังกัด
+    rank: "ส.ต.ต.", //ยศ
+    old: "32",
+    birthday: "04/03/2534",
+    idcard: "134044411441122",
+    phone: "0325647846",
+  },
+  {
+    dataIndex: "2",
+    firstName: "สมชัย",
+    lastName: "แสงสุข",
+    Affiliation: "ฝอ.2", //สังกัด
+    rank: "ส.ต.ต.", //ยศ
+    old: "32",
+    birthday: "14/07/2534",
+    idcard: "134044411441178",
+    phone: "0325647845",
+  },
+];
 export default {
   components: {
     MaterialInput,
@@ -112,6 +136,7 @@ export default {
       listRoom,
       NoRoom,
       vueMkHeader,
+      userlist,
     };
   },
 
@@ -132,11 +157,49 @@ export default {
         { label: "พฤศจิกายน", value: "11" },
         { label: "ธันวาคม", value: "12" },
       ],
+      optionsUser: [
+        { label: "มานพ", value: "มานพ" },
+        { label: "วิชัย", value: "วิชัย" },
+        { label: "ธนาพร", value: "ธนาพร" },
+        { label: "มนตรี", value: "มนตรี" },
+      ],
       optionsRoomtype: [
         { label: "ช๑", value: "ช๑" },
         { label: "ช๒", value: "ช๒" },
         { label: "ช๓", value: "ช๓" },
       ],
+      optionsBuilding: [
+        { label: "อาคารแฟลต 1/11", value: "1" },
+        { label: "อาคารแฟลต 1/12", value: "2" },
+        { label: "อาคารแฟลต 1/13", value: "3" },
+        { label: "อาคารแฟลต 1/14", value: "4" },
+        { label: "อาคารแฟลต 1/15", value: "5" },
+        { label: "อาคารแฟลต 1/16", value: "3" },
+        { label: "อาคารแฟลต 1/17", value: "4" },
+        { label: "อาคารแฟลต 1/18", value: "5" },
+        { label: "แฟลตลือชา 1", value: "5" },
+        { label: "แฟลตลือชา 2", value: "3" },
+        { label: "แฟลตลือชา 3", value: "4" },
+        { label: "แฟลตบางเขน 1", value: "5" },
+        { label: "แฟลตบางเขน 2", value: "5" },
+      ],
+      optionsFloor: [
+        { label: "ชั้น 1", value: "1" },
+        { label: "ชั้น 2", value: "2" },
+        { label: "ชั้น 3", value: "3" },
+        { label: "ชั้น 4", value: "4" },
+        { label: "ชั้น 5", value: "5" },
+      ],
+      optionsRoom: [
+        { label: "ห้อง 101", value: "1" },
+        { label: "ห้อง 202", value: "2" },
+        { label: "ห้อง 303", value: "3" },
+        { label: "ห้อง 404", value: "4" },
+        { label: "ห้อง 505", value: "5" },
+      ],
+      selectedBuilding: "อาคารแฟลต 1/11",
+      selectedFloor: "ชั้น 1",
+      selectedRoom: "ห้อง 101",
       selectedMonth: "ตุลาคม",
       firstName: "สมชาย",
       lastName: "0237",
@@ -205,151 +268,790 @@ export default {
               :routes="[
                 { label: 'หน้าหลัก', route: '/' },
                 { label: 'สถานะห้องพัก', route: '/room' },
-                { label: 'แก้ไขรายละเอียดห้อง' },
+                { label: 'จัดการห้องพัก' },
               ]"
             />
           </div>
           <!-- d-flex justify-content-between -->
-          <h4>แก้ไขรายละเอียดห้อง</h4>
-          <div class="row pt-4">
-            <div class="card mb-3">
-              <div class="row g-0">
-                <div class="col-md-4">
-                  <img
-                    width="300"
-                    src="../../assets/img/team-4.jpg"
-                    class="img-fluid rounded-start"
-                    alt="..."
-                  />
-                </div>
-                <div class="col-md-8">
-                  <div class="card-body">
-                    <h5 class="card-title">แก้ไขรายละเอียดห้อง</h5>
+          <h4>จัดการห้องพัก</h4>
+          <div class="row pt-4 min-vh-45">
+            <div class="col-lg-3">
+              <div
+                class="nav flex-column nav-pills me-3"
+                id="v-pills-tab"
+                role="tablist"
+                aria-orientation="vertical"
+              >
+                <button
+                  class="nav-link active"
+                  id="v-pills-home-tab"
+                  data-bs-toggle="pill"
+                  data-bs-target="#v-pills-home"
+                  type="button"
+                  role="tab"
+                  aria-controls="v-pills-home"
+                  aria-selected="true"
+                >
+                  แก้ไขรายละเอียดห้องพัก
+                </button>
+                <button
+                  class="nav-link"
+                  id="v-pills-profile-tab"
+                  data-bs-toggle="pill"
+                  data-bs-target="#v-pills-profile"
+                  type="button"
+                  role="tab"
+                  aria-controls="v-pills-profile"
+                  aria-selected="false"
+                >
+                  จัดการคิว
+                </button>
+                <button
+                  class="nav-link"
+                  id="v-pills-messages-tab"
+                  data-bs-toggle="pill"
+                  data-bs-target="#v-pills-messages"
+                  type="button"
+                  role="tab"
+                  aria-controls="v-pills-messages"
+                  aria-selected="false"
+                >
+                  คืนห้องพัก
+                </button>
+                <button
+                  class="nav-link"
+                  id="v-pills-settings-tab"
+                  data-bs-toggle="pill"
+                  data-bs-target="#v-pills-settings"
+                  type="button"
+                  role="tab"
+                  aria-controls="v-pills-settings"
+                  aria-selected="false"
+                >
+                  ค่าสาธารณูปโภค
+                </button>
+              </div>
+            </div>
+            <div class="col-lg-9">
+              <div class="tab-content" id="v-pills-tabContent">
+                <div
+                  class="tab-pane fade show active"
+                  id="v-pills-home"
+                  role="tabpanel"
+                  aria-labelledby="v-pills-home-tab"
+                >
+                  <div class="p-4">
+                    <div>
+                      <h5>แก้ไขรายละเอียด ห้อง 2</h5>
+                      <div class="mb-3">
+                        <MaterialInput
+                          :value="lastName"
+                          @input="(event) => (lastName = event.target.value)"
+                          class="input-group-static"
+                          label="มิเตอร์น้ำ"
+                          type="text"
+                          placeholder="มิเตอร์น้ำ"
+                        />
+                      </div>
+                      <div class="mb-3">
+                        <MaterialInput
+                          :value="Affiliation"
+                          @input="(event) => (Affiliation = event.target.value)"
+                          class="input-group-static"
+                          label="มิเตอร์ไฟ"
+                          type="text"
+                          placeholder="มิเตอร์ไฟ"
+                        />
+                      </div>
+                      <div class="mb-3">
+                        <label>ประเภทห้องพัก</label>
+                        <v-select
+                          :options="optionsRoomtype"
+                          v-model="selectedRoomtype"
+                        ></v-select>
+                      </div>
 
-                    <div class="row">
-                      <div class="col-6">
-                        <div>
-                          <div class="mb-3">
-                            <MaterialInput
-                              :value="lastName"
-                              @input="(event) => (lastName = event.target.value)"
-                              class="input-group-static"
-                              label="มิเตอร์น้ำ"
-                              type="text"
-                              placeholder="มิเตอร์น้ำ"
-                            />
-                          </div>
-                          <div class="mb-3">
-                            <MaterialInput
-                              :value="Affiliation"
-                              @input="(event) => (Affiliation = event.target.value)"
-                              class="input-group-static"
-                              label="มิเตอร์ไฟ"
-                              type="text"
-                              placeholder="มิเตอร์ไฟ"
-                            />
-                          </div>
-                          <div class="mb-3">
-                            <label>ประเภทห้องพัก</label>
-                            <v-select
-                              :options="optionsRoomtype"
-                              v-model="selectedRoomtype"
-                            ></v-select>
-                          </div>
-
-                          <div class="mb-3">
-                            <MaterialInput
-                              :value="Roomconditions"
-                              @input="(event) => (Roomconditions = event.target.value)"
-                              class="input-group-static"
-                              label="สภาพห้อง"
-                              type="text"
-                              placeholder="สภาพห้อง"
-                            />
-                          </div>
+                      <div class="mb-3">
+                        <div class="form-check form-check-inline">
+                          <label style="margin-right: 20px">สภาพห้อง</label>
+                          <input
+                            class="form-check-input"
+                            type="radio"
+                            name="inlineRadioOptions"
+                            id="inlineRadio1"
+                            value="option1"
+                          />
+                          <label class="form-check-label" for="inlineRadio1">ชำรุด</label>
+                        </div>
+                        <div class="form-check form-check-inline">
+                          <input
+                            class="form-check-input"
+                            type="radio"
+                            name="inlineRadioOptions"
+                            id="inlineRadio2"
+                            value="option2"
+                          />
+                          <label class="form-check-label" for="inlineRadio2"
+                            >ไม่ชำรุด</label
+                          >
                         </div>
                       </div>
-                      <!-- <div class="col-4">
-                        <div class="mb-3">
-                          <MaterialInput
-                            :value="birthday"
-                            @input="(event) => (birthday = event.target.value)"
-                            class="input-group-static"
-                            label="ค่าไฟฟ้าส่วนกลาง"
-                            type="text"
-                            placeholder="ค่าไฟฟ้าส่วนกลาง"
-                          />
-                        </div>
-                        <div class="mb-3">
-                          <MaterialInput
-                            :value="old"
-                            @input="(event) => (old = event.target.value)"
-                            class="input-group-static"
-                            label="ค่าบำรุงลิฟท์"
-                            type="number"
-                            placeholder="ค่าบำรุงลิฟท์"
-                          />
-                        </div>
-                        <div class="mb-3">
-                          <MaterialInput
-                            :value="insurance"
-                            @input="(event) => (insurance = event.target.value)"
-                            class="input-group-static"
-                            label="เงินค่าประกัน"
-                            type="text"
-                            placeholder="เงินค่าประกัน"
-                          />
-                        </div>
-                        <div class="mb-3">
-                          <MaterialInput
-                            :value="installments"
-                            @input="(event) => (installments = event.target.value)"
-                            class="input-group-static"
-                            label="งวดเงินค่าประกัน"
-                            type="text"
-                            placeholder="งวดเงินค่าประกัน"
-                          />
-                        </div>
-                        <div class="mb-3">
-                          <MaterialInput
-                            :value="rank"
-                            @input="(event) => (rank = event.target.value)"
-                            class="input-group-static"
-                            label="สภาพห้อง"
-                            type="text"
-                            placeholder="สภาพห้อง"
-                          />
-                        </div>
-                      </div> -->
                     </div>
 
-                    <div class="text-center" style="margin-right: 100px">
+                    <div class="text-center">
                       <MaterialButton variant="gradient" color="success"
                         >บันทึก</MaterialButton
                       >
                     </div>
                   </div>
                 </div>
+                <div
+                  class="tab-pane fade"
+                  id="v-pills-profile"
+                  role="tabpanel"
+                  aria-labelledby="v-pills-profile-tab"
+                >
+                  <div>
+                    <div class="d-flex justify-content-end align-items-baseline">
+                      <label style="margin-right: 20px">ค้นหาชื่อ </label>
+                      <MaterialInput
+                        style="margin-right: 20px"
+                        class="input-group-dynamic w-30"
+                        icon="search"
+                        type="text"
+                        placeholder="Search"
+                      />
+                      <MaterialButton
+                        variant="gradient"
+                        color="success"
+                        data-bs-toggle="modal"
+                        data-bs-target="#seleteUserBackdrop"
+                        >เพิ่มผู้เช่าลงคิว</MaterialButton
+                      >
+                    </div>
+                    <div class="text-center pt-4 table-responsive">
+                      <table class="table border border-2 border-success">
+                        <thead class="border border-2 border-success border-bottom">
+                          <tr>
+                            <th scope="col">ลำดับ</th>
+                            <th scope="col">ชื่อ</th>
+                            <th scope="col">สกุล</th>
+                            <th scope="col">วันเกิด</th>
+                            <th scope="col">อายุ</th>
+                            <th scope="col">สังกัด</th>
+                            <th scope="col">ยศ</th>
+                            <th scope="col">เลขบัตรประชาชน</th>
+                            <th scope="col">เบอร์ติดต่อ</th>
+                          </tr>
+                        </thead>
+                        <tbody>
+                          <tr v-for="(item, index) in userlist" :key="index">
+                            <th scope="row">{{ index + 1 }}</th>
+                            <td>{{ item.firstName }}</td>
+                            <td>{{ item.lastName }}</td>
+                            <td>{{ item.birthday }}</td>
+                            <td>{{ item.old }}</td>
+                            <td>{{ item.Affiliation }}</td>
+                            <td>{{ item.rank }}</td>
+                            <td>{{ item.idcard }}</td>
+                            <td>{{ item.phone }}</td>
+                          </tr>
+                        </tbody>
+                      </table>
+                    </div>
+                  </div>
+                </div>
+                <div
+                  class="tab-pane fade"
+                  id="v-pills-messages"
+                  role="tabpanel"
+                  aria-labelledby="v-pills-messages-tab"
+                >
+                  <div>
+                    <div
+                      class="mb-3"
+                      style="
+                        display: flex;
+                        justify-content: space-between;
+                        align-items: center;
+                      "
+                    >
+                      <div class="form-check form-check-inline">
+                        <label style="margin-right: 20px">กุญแจห้อง</label>
+                        <input
+                          class="form-check-input"
+                          type="radio"
+                          name="inlineRadioOptions"
+                          id="inlineRadio1"
+                          value="option1"
+                        />
+                        <label class="form-check-label" for="inlineRadio1">มี</label>
+                      </div>
+                      <div class="form-check form-check-inline">
+                        <input
+                          class="form-check-input"
+                          type="radio"
+                          name="inlineRadioOptions"
+                          id="inlineRadio2"
+                          value="option2"
+                        />
+                        <label class="form-check-label" for="inlineRadio2">ไม่มี</label>
+                      </div>
+                      <div style="width: 360px; margin-bottom: 10px">
+                        <MaterialInput
+                          name="contract"
+                          :value="contract"
+                          @input="(event) => (contract = event.target.value)"
+                          class="input-group-static"
+                          type="text"
+                          placeholder="สาเหตุ"
+                        />
+                      </div>
+                    </div>
+                    <div
+                      class="mb-3"
+                      style="
+                        display: flex;
+                        justify-content: space-between;
+                        align-items: center;
+                      "
+                    >
+                      <div class="form-check form-check-inline">
+                        <label style="margin-right: 20px">ทะเบียนบ้าน</label>
+                        <input
+                          class="form-check-input"
+                          type="radio"
+                          name="inlineRadioOptions"
+                          id="inlineRadio1"
+                          value="option1"
+                        />
+                        <label class="form-check-label" for="inlineRadio1">มี</label>
+                      </div>
+                      <div class="form-check form-check-inline">
+                        <input
+                          class="form-check-input"
+                          type="radio"
+                          name="inlineRadioOptions"
+                          id="inlineRadio2"
+                          value="option2"
+                        />
+                        <label class="form-check-label" for="inlineRadio2">ไม่มี</label>
+                      </div>
+                      <div style="width: 360px; margin-bottom: 10px">
+                        <MaterialInput
+                          name="contract"
+                          :value="contract"
+                          @input="(event) => (contract = event.target.value)"
+                          class="input-group-static"
+                          type="text"
+                          placeholder="สาเหตุ"
+                        />
+                      </div>
+                    </div>
+                    <div>
+                      <label style="padding-left: 30px"
+                        >หลักฐานแสดงการชําระค่าไฟเดือนล่าสุด</label
+                      >
+                    </div>
+                    <div
+                      class="mb-3"
+                      style="
+                        margin-left: 10px;
+                        display: flex;
+                        justify-content: space-between;
+                        align-items: center;
+                      "
+                    >
+                      <div class="form-check form-check-inline">
+                        <input
+                          class="form-check-input"
+                          type="radio"
+                          name="inlineRadioOptions"
+                          id="inlineRadio1"
+                          value="option1"
+                        />
+                        <label class="form-check-label" for="inlineRadio1">มี</label>
+                      </div>
+                      <div style="width: 250px; margin-bottom: 10px">
+                        <MaterialInput
+                          name="contract"
+                          :value="contract"
+                          @input="(event) => (contract = event.target.value)"
+                          class="input-group-static"
+                          type="text"
+                          placeholder="สาเหตุ"
+                        />
+                      </div>
+                      <div class="form-check form-check-inline">
+                        <input
+                          class="form-check-input"
+                          type="radio"
+                          name="inlineRadioOptions"
+                          id="inlineRadio2"
+                          value="option2"
+                        />
+                        <label class="form-check-label" for="inlineRadio2">ไม่มี</label>
+                      </div>
+                      <div style="width: 250px; margin-bottom: 10px">
+                        <MaterialInput
+                          name="contract"
+                          :value="contract"
+                          @input="(event) => (contract = event.target.value)"
+                          class="input-group-static"
+                          type="text"
+                          placeholder="สาเหตุ"
+                        />
+                      </div>
+                    </div>
+                    <div class="pt-4 text-end">
+                      <MaterialButton
+                        variant="gradient"
+                        color="success"
+                        @click="submitForm"
+                        html-type="submit"
+                        >บันทึก</MaterialButton
+                      >
+                    </div>
+                  </div>
+                </div>
+                <div
+                  class="tab-pane fade"
+                  id="v-pills-settings"
+                  role="tabpanel"
+                  aria-labelledby="v-pills-settings-tab"
+                >
+                  <div>
+                    <ul class="nav nav-tabs" id="myTab" role="tablist">
+                      <li class="nav-item" role="presentation">
+                        <button
+                          class="nav-link active"
+                          style="color: #57b05b"
+                          id="home-tab"
+                          data-bs-toggle="tab"
+                          data-bs-target="#home"
+                          type="button"
+                          role="tab"
+                          aria-controls="home"
+                          aria-selected="true"
+                        >
+                          บันทึกค่าใช้จ่ายบ้านพัก ตร.
+                        </button>
+                      </li>
+                      <li class="nav-item" role="presentation">
+                        <button
+                          class="nav-link"
+                          style="color: #57b05b"
+                          id="profile-tab"
+                          data-bs-toggle="tab"
+                          data-bs-target="#profile"
+                          type="button"
+                          role="tab"
+                          aria-controls="profile"
+                          aria-selected="false"
+                        >
+                          บันทึกค่าใช้จ่ายบ้านพัก บช.ตชด.
+                        </button>
+                      </li>
+                    </ul>
+                    <div class="tab-content" id="myTabContent">
+                      <div
+                        class="tab-pane fade show active"
+                        id="home"
+                        role="tabpanel"
+                        aria-labelledby="home-tab"
+                      >
+                        <div class="d-flex justify-content-end align-items-baseline pt-4">
+                          <label style="margin-right: 10px">ค้นหาชื่อหรือเลขห้อง </label>
+                          <MaterialInput
+                            class="input-group-dynamic w-30"
+                            icon="search"
+                            type="text"
+                            placeholder="Search"
+                          />
+                          <MaterialButton
+                            style="margin-left: 20px"
+                            variant="gradient"
+                            color="success"
+                            data-bs-toggle="modal"
+                            data-bs-target="#staticBackdrop11"
+                            >เพิ่มค่าใช้จ่ายบ้านพัก ตร.</MaterialButton
+                          >
+                        </div>
+                        <div class="text-center pt-4 table-responsive">
+                          <table class="table table-hover border border-2 border-success">
+                            <thead class="border border-2 border-success border-bottom">
+                              <tr>
+                                <th scope="col">ลำดับ</th>
+                                <th scope="col">อาคาร</th>
+                                <th scope="col">ชั้น</th>
+                                <th scope="col">เลขที่ห้อง</th>
+                                <th scope="col">ค่าธรรมเนียม</th>
+                                <th scope="col">ค่าน้ำประปา</th>
+                                <th scope="col">ค่าไฟฟ้า</th>
+                                <th scope="col">ค่าไฟฟ้าส่วนกลาง</th>
+                                <th scope="col">ค่าบำรุงลิฟท์</th>
+                                <th scope="col">ค่าประกัน</th>
+                                <th scope="col">จำนวนงวดประกัน</th>
+                              </tr>
+                            </thead>
+                            <tbody>
+                              <tr>
+                                <th scope="row">1</th>
+                                <td>อาคารแฟลต 1/11</td>
+                                <td>2</td>
+                                <td>202</td>
+                                <td>20,000</td>
+                                <td>8,000</td>
+                                <td>20,000</td>
+                                <td>8,000</td>
+                                <td>20,000</td>
+                                <td>10,000</td>
+                                <td>5</td>
+                              </tr>
+                            </tbody>
+                          </table>
+                        </div>
+                      </div>
+                      <div
+                        class="tab-pane fade"
+                        id="profile"
+                        role="tabpanel"
+                        aria-labelledby="profile-tab"
+                      >
+                        <div class="d-flex justify-content-end align-items-baseline pt-4">
+                          <label style="margin-right: 10px">ค้นหาชื่อหรือเลขห้อง </label>
+                          <MaterialInput
+                            class="input-group-dynamic w-30"
+                            icon="search"
+                            type="text"
+                            placeholder="Search"
+                          />
+                          <MaterialButton
+                            style="margin-left: 20px"
+                            variant="gradient"
+                            color="success"
+                            data-bs-toggle="modal"
+                            data-bs-target="#staticBackdrop12"
+                            >เพิ่มค่าใช้จ่ายบ้านพัก บช.ตชด.</MaterialButton
+                          >
+                        </div>
+                        <div class="text-center pt-4 table-responsive">
+                          <table class="table table-hover border border-2 border-success">
+                            <thead class="border border-2 border-success border-bottom">
+                              <tr>
+                                <th scope="col">ลำดับ</th>
+                                <th scope="col">อาคาร</th>
+                                <th scope="col">ชั้น</th>
+                                <th scope="col">เลขที่ห้อง</th>
+                                <th scope="col">ค่าบำรุงฯ</th>
+                                <th scope="col">ค่าประกัน</th>
+                                <th scope="col">จำนวนงวดประกัน</th>
+                              </tr>
+                            </thead>
+                            <tbody>
+                              <tr>
+                                <th scope="row">1</th>
+                                <td>อาคารแฟลต 1/14</td>
+                                <td>2</td>
+                                <td>202</td>
+                                <td>20,000</td>
+                                <td>8,000</td>
+                                <td>8</td>
+                              </tr>
+                            </tbody>
+                          </table>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
               </div>
             </div>
           </div>
         </div>
       </div>
     </div>
+    <!-- modal -->
+    <div
+      class="modal fade"
+      id="seleteUserBackdrop"
+      data-bs-backdrop="static"
+      data-bs-keyboard="false"
+      tabindex="-1"
+      aria-labelledby="staticBackdropLabel"
+      aria-hidden="true"
+    >
+      <div class="modal-dialog modal-dialog-centered">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h5 class="modal-title" id="staticBackdropLabel">เพิ่มผู้เช่าลงคิว</h5>
+            <button
+              type="button"
+              class="btn-close"
+              data-bs-dismiss="modal"
+              aria-label="Close"
+            ></button>
+          </div>
+          <div class="modal-body">
+            <div>
+              <div class="mb-3">
+                <label>ชื่อผู้เช่า</label>
+                <v-select :options="optionsUser" v-model="selectedColor"></v-select>
+              </div>
+            </div>
+          </div>
+          <div class="modal-footer">
+            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
+              ปิดหน้าต่าง
+            </button>
+            <MaterialButton
+              variant="gradient"
+              color="success"
+              @click="submitForm"
+              html-type="submit"
+              >บันทึก</MaterialButton
+            >
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- Modal -->
+    <div
+      class="modal fade"
+      id="staticBackdrop11"
+      data-bs-backdrop="static"
+      data-bs-keyboard="false"
+      tabindex="-1"
+      aria-labelledby="staticBackdropLabel"
+      aria-hidden="true"
+    >
+      <div class="modal-dialog modal-dialog-centered">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h5 class="modal-title" id="staticBackdropLabel">
+              บันทึกค่าใช้จ่ายบ้านพัก ตร. ประจำเดือนตุลาคม
+            </h5>
+            <button
+              type="button"
+              class="btn-close"
+              data-bs-dismiss="modal"
+              aria-label="Close"
+            ></button>
+          </div>
+          <div class="modal-body">
+            <div>
+              <div class="mb-3">
+                <label>อาคาร</label>
+                <v-select
+                  :options="optionsBuilding"
+                  v-model="selectedBuilding"
+                ></v-select>
+              </div>
+              <div class="mb-3">
+                <label>ชั้น</label>
+                <v-select :options="optionsFloor" v-model="selectedFloor"></v-select>
+              </div>
+              <div class="mb-3">
+                <label>เลขที่ห้อง</label>
+                <v-select :options="optionsRoom" v-model="selectedRoom"></v-select>
+              </div>
+              <div class="mb-3">
+                <MaterialInput
+                  name="fee"
+                  :value="fee"
+                  @input="(event) => (fee = event.target.value)"
+                  class="input-group-static"
+                  label="ค่าธรรมเนียม"
+                  type="text"
+                  placeholder="ค่าธรรมเนียม"
+                />
+              </div>
+              <div class="mb-3">
+                <MaterialInput
+                  :value="Waterbill"
+                  @input="(event) => (Waterbill = event.target.value)"
+                  class="input-group-static"
+                  label="ค่าน้ำประปา"
+                  type="text"
+                  placeholder="ค่าน้ำประปา"
+                />
+              </div>
+              <div class="mb-3">
+                <MaterialInput
+                  :value="Electricitybill"
+                  @input="(event) => (Electricitybill = event.target.value)"
+                  class="input-group-static"
+                  label="ค่าไฟฟ้า"
+                  type="text"
+                  placeholder="ค่าไฟฟ้า"
+                />
+              </div>
+              <div class="mb-3">
+                <MaterialInput
+                  :value="Central"
+                  @input="(event) => (Central = event.target.value)"
+                  class="input-group-static"
+                  label="ค่าไฟฟ้าส่วนกลาง"
+                  type="text"
+                  placeholder="ค่าไฟฟ้าส่วนกลาง"
+                />
+              </div>
+              <div class="mb-3">
+                <MaterialInput
+                  :value="Costs"
+                  @input="(event) => (Costs = event.target.value)"
+                  class="input-group-static"
+                  label="ค่าบำรุงลิฟท์"
+                  type="text"
+                  placeholder="ค่าบำรุงลิฟท์"
+                />
+              </div>
+              <div class="mb-3">
+                <MaterialInput
+                  :value="Insurancecost"
+                  @input="(event) => (Insurancecost = event.target.value)"
+                  class="input-group-static"
+                  label="เงินค่าประกัน"
+                  type="text"
+                  placeholder="เงินค่าประกัน"
+                />
+              </div>
+              <div class="mb-3">
+                <MaterialInput
+                  :value="installments"
+                  @input="(event) => (installments = event.target.value)"
+                  class="input-group-static"
+                  label="งวดเงินค่าประกัน"
+                  type="text"
+                  placeholder="งวดเงินค่าประกัน"
+                />
+              </div>
+            </div>
+          </div>
+          <div class="modal-footer">
+            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
+              ปิดหน้าต่าง
+            </button>
+            <MaterialButton variant="gradient" color="success">บันทึก</MaterialButton>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Modal -->
+    <div
+      class="modal fade"
+      id="staticBackdrop12"
+      data-bs-backdrop="static"
+      data-bs-keyboard="false"
+      tabindex="-1"
+      aria-labelledby="staticBackdropLabel"
+      aria-hidden="true"
+    >
+      <div class="modal-dialog modal-dialog-centered">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h6 class="modal-title" id="staticBackdropLabel">
+              เพิ่มค่าใช้จ่ายบ้านพัก บช.ตชด. ประจำเดือนตุลาคม
+            </h6>
+            <button
+              type="button"
+              class="btn-close"
+              data-bs-dismiss="modal"
+              aria-label="Close"
+            ></button>
+          </div>
+          <div class="modal-body">
+            <div>
+              <div class="mb-3">
+                <label>อาคาร</label>
+                <v-select
+                  :options="optionsBuilding"
+                  v-model="selectedBuilding"
+                ></v-select>
+              </div>
+              <div class="mb-3">
+                <label>ชั้น</label>
+                <v-select :options="optionsFloor" v-model="selectedFloor"></v-select>
+              </div>
+              <div class="mb-3">
+                <label>เลขที่ห้อง</label>
+                <v-select :options="optionsRoom" v-model="selectedRoom"></v-select>
+              </div>
+              <div class="mb-3">
+                <MaterialInput
+                  name="Maintenance"
+                  :value="Maintenance"
+                  @input="(event) => (Maintenance = event.target.value)"
+                  class="input-group-static"
+                  label="ค่าธรรมเนียม"
+                  type="text"
+                  placeholder="ค่าธรรมเนียม"
+                />
+              </div>
+              <div class="mb-3">
+                <MaterialInput
+                  :value="Insurance"
+                  @input="(event) => (Insurance = event.target.value)"
+                  class="input-group-static"
+                  label="ค่าน้ำประปา"
+                  type="text"
+                  placeholder="ค่าน้ำประปา"
+                />
+              </div>
+              <div class="mb-3">
+                <MaterialInput
+                  :value="Insurancecost"
+                  @input="(event) => (Insurancecost = event.target.value)"
+                  class="input-group-static"
+                  label="เงินค่าประกัน"
+                  type="text"
+                  placeholder="เงินค่าประกัน"
+                />
+              </div>
+              <div class="mb-3">
+                <MaterialInput
+                  :value="installments"
+                  @input="(event) => (installments = event.target.value)"
+                  class="input-group-static"
+                  label="งวดเงินค่าประกัน"
+                  type="text"
+                  placeholder="งวดเงินค่าประกัน"
+                />
+              </div>
+            </div>
+          </div>
+          <div class="modal-footer">
+            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
+              ปิดหน้าต่าง
+            </button>
+            <MaterialButton variant="gradient" color="success">บันทึก</MaterialButton>
+          </div>
+        </div>
+      </div>
+    </div>
   </section>
 </template>
 <style>
 .bg-green {
-  background: #567b57 !important;
-  color: #fff;
+  border: 2px solid #567b57 !important;
+  color: #000;
 }
 .bg-red {
-  background: #d24c4a !important;
-  color: #fff;
+  border: 2px solid #d24c4a !important;
+  color: #000;
 }
-.bg-waring {
-  background: #d1d3d5 !important;
-  color: #fff;
+.bg-warning {
+  border: 2px solid #fb8c00 !important;
+  color: #000;
+}
+.bg-return {
+  border: 2px solid #ffca28 !important;
+  color: #000;
+}
+.bg-special {
+  border: 2px solid #edc7c7 !important;
+  color: #000;
 }
 .vs__actions {
   cursor: pointer;
diff --git a/src/views/RoomLayout/RoomLayoutView.vue b/src/views/RoomLayout/RoomLayoutView.vue
index fc4e1ad..50983d1 100644
--- a/src/views/RoomLayout/RoomLayoutView.vue
+++ b/src/views/RoomLayout/RoomLayoutView.vue
@@ -3,6 +3,8 @@ import MaterialInput from "@/components/MaterialInput.vue";
 import MaterialButton from "@/components/MaterialButton.vue";
 import vueMkHeader from "@/assets/img/bg.jpg";
 import Breadcrumbs from "@/examples/Breadcrumbs.vue";
+import masterData from "@/assets/dataJson/masterData.json";
+
 const listRoom = [
   { title: "ตึก 1" },
   { title: "ตึก 2" },
@@ -103,6 +105,7 @@ export default {
       NoRoom,
       landingColumns,
       vueMkHeader,
+      masterData
     };
   },
 
@@ -185,26 +188,26 @@ export default {
               >สร้างผังห้อง</MaterialButton
             >
           </div>
-          <div class="text-center pt-4">
+          <div class="text-center pt-4 table-responsive">
             <table class="table table-hover border border-2 border-success">
               <thead class="border border-2 border-success border-bottom">
                 <tr>
                   <th scope="col">ลำดับ</th>
-                  <th scope="col">พื้นที่</th>
-                  <th scope="col">ตึก</th>
+                  <th scope="col">อาคารบ้านพัก</th>
+                  <th scope="col">ชื่ออาคาร</th>
                   <th scope="col">จำนวนชั้น</th>
                   <th scope="col">จำนวนห้อง</th>
                   <th scope="col">ประเภทห้องพัก</th>
                 </tr>
               </thead>
               <tbody>
-                <tr>
-                  <th scope="row">1</th>
-                  <td>พื้นที่</td>
-                  <td>ตึก1</td>
-                  <td>3</td>
-                  <td>20</td>
-                  <td>ช๑</td>
+                <tr  v-for="(item, index) in masterData?.building" :key="index">
+                  <th scope="row">{{ index+1 }}</th>
+                  <td>{{item?.buil}}</td>
+                  <td>{{item?.name}}</td>
+                  <td>{{item?.floor}}</td>
+                  <td>{{item?.room}}</td>
+                  <td>{{item?.type}}</td>
                 </tr>
               </tbody>
             </table>
@@ -241,9 +244,9 @@ export default {
                   :value="Area"
                   @input="(event) => (Area = event.target.value)"
                   class="input-group-static"
-                  label="พื้นที่"
+                  label="อาคารบ้านพัก"
                   type="text"
-                  placeholder="พื้นที่"
+                  placeholder="อาคารบ้านพัก"
                 />
               </div>
               <div class="mb-3">
@@ -251,9 +254,9 @@ export default {
                   :value="Building"
                   @input="(event) => (Building = event.target.value)"
                   class="input-group-static"
-                  label="ตึก"
+                  label="ชื่ออาคาร"
                   type="text"
-                  placeholder="ตึก"
+                  placeholder="ชื่ออาคาร"
                 />
               </div>
               <div class="mb-3">
@@ -299,16 +302,25 @@ export default {
 </template>
 <style>
 .bg-green {
-  background: #567b57 !important;
-  color: #fff;
+  border: 2px solid #567b57 !important;
+  color: #000;
 }
 .bg-red {
-  background: #d24c4a !important;
-  color: #fff;
+  border: 2px solid #d24c4a !important;
+  color: #000;
 }
-.bg-waring {
-  background: #d1d3d5 !important;
-  color: #fff;
+.bg-warning {
+  border: 2px solid #fb8c00 !important;
+  color: #000;
+}
+.bg-return {
+  border: 2px solid #ffca28 !important;
+  color: #000;
+}
+.bg-special {
+  border: 2px solid #edc7c7 !important;
+  color: #000;
+
 }
 input::-webkit-outer-spin-button,
 input::-webkit-inner-spin-button {
diff --git a/src/views/SearchAll/SearchView.vue b/src/views/SearchAll/SearchView.vue
index 2ea5332..ec1b777 100644
--- a/src/views/SearchAll/SearchView.vue
+++ b/src/views/SearchAll/SearchView.vue
@@ -406,18 +406,7 @@ export default {
   </section>
 </template>
 <style>
-.bg-green {
-  background: #567b57 !important;
-  color: #fff;
-}
-.bg-red {
-  background: #d24c4a !important;
-  color: #fff;
-}
-.bg-waring {
-  background: #d1d3d5 !important;
-  color: #fff;
-}
+
 input::-webkit-outer-spin-button,
 input::-webkit-inner-spin-button {
   -webkit-appearance: none;
diff --git a/src/views/Users/UserlistView.vue b/src/views/Users/UserlistView.vue
index b9be90f..9a8f407 100644
--- a/src/views/Users/UserlistView.vue
+++ b/src/views/Users/UserlistView.vue
@@ -3,6 +3,7 @@ import MaterialInput from "@/components/MaterialInput.vue";
 import MaterialButton from "@/components/MaterialButton.vue";
 import Breadcrumbs from "@/examples/Breadcrumbs.vue";
 import vueMkHeader from "@/assets/img/bg.jpg";
+import masterData from "@/assets/dataJson/masterData.json";
 
 const listRoom = [
   { title: "ตึก 1" },
@@ -29,8 +30,8 @@ const userlist = [
     dataIndex: "1",
     firstName: "สมชาย",
     lastName: "แสงทอง",
-    Affiliation: "บก", //สังกัด
-    rank: "ร้อยตรี", //ยศ
+    Affiliation: "ฝอ.1", //สังกัด
+    rank: "ส.ต.ต.", //ยศ
     old: "32",
     birthday: "04/03/2534",
     idcard: "134044411441122",
@@ -40,8 +41,8 @@ const userlist = [
     dataIndex: "2",
     firstName: "สมชัย",
     lastName: "แสงสุข",
-    Affiliation: "กก", //สังกัด
-    rank: "ร้อยตรี", //ยศ
+    Affiliation: "ฝอ.2", //สังกัด
+    rank: "ส.ต.ต.", //ยศ
     old: "32",
     birthday: "14/07/2534",
     idcard: "134044411441178",
@@ -61,6 +62,7 @@ export default {
       NoRoom,
       userlist,
       vueMkHeader,
+      masterData
     };
   },
 
@@ -75,14 +77,20 @@ export default {
         { label: "Phoenix", value: "Elixir" },
       ],
       selectedColor: "",
-      firstName: "",
-      lastName: "",
+      firstName: "สมชัย",
+      lastName: "แสงสุข",
       Affiliation: "", //สังกัด
       rank: "", //ยศ
-      idcard: "",
-      phone: "",
+      idcard: "134044411441178",
+      phone: "0325647845",
+      selectedRanks: 'ส.ต.ต.',
+      selectedAffiliation: 'ฝอ.2',
+      birthday: "14/07/2534"
     };
   },
+  created(){
+    console.log(this.masterData);
+  },
   watch: {
     selectedColor: function (newValue) {
       // this.updateColor(newValue)
@@ -154,7 +162,7 @@ export default {
               >เพิ่มสมาชิก</MaterialButton
             >
           </div>
-          <div class="text-center pt-4">
+          <div class="text-center pt-4 table-responsive">
             <table class="table border border-2 border-success">
               <thead class="border border-2 border-success border-bottom">
                 <tr>
@@ -254,25 +262,19 @@ export default {
                 />
               </div>
               <div class="mb-3">
-                <MaterialInput
-                  :value="Affiliation"
-                  @input="(event) => (Affiliation = event.target.value)"
-                  class="input-group-static"
-                  label="สังกัด"
-                  type="text"
-                  placeholder="สังกัด"
-                />
-              </div>
+                <label>สังกัด</label>
+                <v-select
+                  :options="masterData?.Affiliation"
+                  v-model="selectedAffiliation"
+                ></v-select>
+              </div> 
               <div class="mb-3">
-                <MaterialInput
-                  :value="rank"
-                  @input="(event) => (rank = event.target.value)"
-                  class="input-group-static"
-                  label="ยศ"
-                  type="text"
-                  placeholder="ยศ"
-                />
-              </div>
+                <label>ยศ</label>
+                <v-select
+                  :options="masterData?.ranks"
+                  v-model="selectedRanks"
+                ></v-select>
+              </div> 
               <div class="mb-3">
                 <MaterialInput
                   :value="idcard"
@@ -366,25 +368,19 @@ export default {
                 />
               </div>
               <div class="mb-3">
-                <MaterialInput
-                  :value="Affiliation"
-                  @input="(event) => (Affiliation = event.target.value)"
-                  class="input-group-static"
-                  label="สังกัด"
-                  type="text"
-                  placeholder="สังกัด"
-                />
-              </div>
+                <label>สังกัด</label>
+                <v-select
+                  :options="masterData?.Affiliation"
+                  v-model="selectedAffiliation"
+                ></v-select>
+              </div> 
               <div class="mb-3">
-                <MaterialInput
-                  :value="rank"
-                  @input="(event) => (rank = event.target.value)"
-                  class="input-group-static"
-                  label="ยศ"
-                  type="text"
-                  placeholder="ยศ"
-                />
-              </div>
+                <label>ยศ</label>
+                <v-select
+                  :options="masterData?.ranks"
+                  v-model="selectedRanks"
+                ></v-select>
+              </div> 
               <div class="mb-3">
                 <MaterialInput
                   :value="idcard"
@@ -426,16 +422,25 @@ export default {
 </template>
 <style>
 .bg-green {
-  background: #567b57 !important;
-  color: #fff;
+  border: 2px solid #567b57 !important;
+  color: #000;
 }
 .bg-red {
-  background: #d24c4a !important;
-  color: #fff;
+  border: 2px solid #d24c4a !important;
+  color: #000;
 }
-.bg-waring {
-  background: #d1d3d5 !important;
-  color: #fff;
+.bg-warning {
+  border: 2px solid #fb8c00 !important;
+  color: #000;
+}
+.bg-return {
+  border: 2px solid #ffca28 !important;
+  color: #000;
+}
+.bg-special {
+  border: 2px solid #edc7c7 !important;
+  color: #000;
+
 }
 input::-webkit-outer-spin-button,
 input::-webkit-inner-spin-button {
diff --git a/src/views/UtilitiesRoom/UtilitieView.vue b/src/views/UtilitiesRoom/UtilitieView.vue
index be03422..3f12e5d 100644
--- a/src/views/UtilitiesRoom/UtilitieView.vue
+++ b/src/views/UtilitiesRoom/UtilitieView.vue
@@ -110,11 +110,19 @@ export default {
     return {
       value: { name: "Vue.js", language: "JavaScript" },
       optionsBuilding: [
-        { label: "ตึก 1", value: "1" },
-        { label: "ตึก 2", value: "2" },
-        { label: "ตึก 3", value: "3" },
-        { label: "ตึก 4", value: "4" },
-        { label: "ตึก 5", value: "5" },
+        { label: "อาคารแฟลต 1/11", value: "1" },
+        { label: "อาคารแฟลต 1/12", value: "2" },
+        { label: "อาคารแฟลต 1/13", value: "3" },
+        { label: "อาคารแฟลต 1/14", value: "4" },
+        { label: "อาคารแฟลต 1/15", value: "5" },
+        { label: "อาคารแฟลต 1/16", value: "3" },
+        { label: "อาคารแฟลต 1/17", value: "4" },
+        { label: "อาคารแฟลต 1/18", value: "5" },
+        { label: "แฟลตลือชา 1", value: "5" },
+        { label: "แฟลตลือชา 2", value: "3" },
+        { label: "แฟลตลือชา 3", value: "4" },
+        { label: "แฟลตบางเขน 1", value: "5" },
+        { label: "แฟลตบางเขน 2", value: "5" },
       ],
       optionsFloor: [
         { label: "ชั้น 1", value: "1" },
@@ -124,15 +132,15 @@ export default {
         { label: "ชั้น 5", value: "5" },
       ],
       optionsRoom: [
-        { label: "ห้อง 1", value: "1" },
-        { label: "ห้อง 2", value: "2" },
-        { label: "ห้อง 3", value: "3" },
-        { label: "ห้อง 4", value: "4" },
-        { label: "ห้อง 5", value: "5" },
+        { label: "ห้อง 101", value: "1" },
+        { label: "ห้อง 202", value: "2" },
+        { label: "ห้อง 303", value: "3" },
+        { label: "ห้อง 404", value: "4" },
+        { label: "ห้อง 505", value: "5" },
       ],
-      selectedBuilding: "ตึก 1",
+      selectedBuilding: "อาคารแฟลต 1/11",
       selectedFloor: "ชั้น 1",
-      selectedRoom: "ห้อง 1",
+      selectedRoom: "ห้อง 101",
       fee: "",
       Waterbill: "",
       Electricitybill: "",
@@ -177,11 +185,11 @@ export default {
     <div class="card card-body blur shadow-blur mx-3 mx-md-4 mt-n6">
       <div class="page-header min-vh-45">
         <div class="container">
-            <div>
-              <Breadcrumbs
-                :routes="[{ label: 'หน้าหลัก', route: '/' }, { label: 'ค่าสาธารณุปโภค' }]"
-              />
-            </div>
+          <div>
+            <Breadcrumbs
+              :routes="[{ label: 'หน้าหลัก', route: '/' }, { label: 'ค่าสาธารณุปโภค' }]"
+            />
+          </div>
           <div>
             <ul class="nav nav-tabs" id="myTab" role="tablist">
               <li class="nav-item" role="presentation">
@@ -254,14 +262,14 @@ export default {
                     >เพิ่มค่าใช้จ่ายบ้านพัก ตร.</MaterialButton
                   >
                 </div>
-                <div class="text-center pt-4">
+                <div class="text-center pt-4 table-responsive">
                   <table class="table table-hover border border-2 border-success">
                     <thead class="border border-2 border-success border-bottom">
                       <tr>
                         <th scope="col">ลำดับ</th>
-                        <th scope="col">ตึก</th>
+                        <th scope="col">อาคาร</th>
                         <th scope="col">ชั้น</th>
-                        <th scope="col">ห้อง</th>
+                        <th scope="col">เลขที่ห้อง</th>
                         <th scope="col">ค่าธรรมเนียม</th>
                         <th scope="col">ค่าน้ำประปา</th>
                         <th scope="col">ค่าไฟฟ้า</th>
@@ -274,9 +282,9 @@ export default {
                     <tbody>
                       <tr>
                         <th scope="row">1</th>
-                        <td>1</td>
+                        <td>อาคารแฟลต 1/11</td>
                         <td>2</td>
-                        <td>3</td>
+                        <td>202</td>
                         <td>20,000</td>
                         <td>8,000</td>
                         <td>20,000</td>
@@ -312,14 +320,14 @@ export default {
                     >เพิ่มค่าใช้จ่ายบ้านพัก บช.ตชด.</MaterialButton
                   >
                 </div>
-                <div class="text-center pt-4">
+                <div class="text-center pt-4 table-responsive">
                   <table class="table table-hover border border-2 border-success">
                     <thead class="border border-2 border-success border-bottom">
                       <tr>
                         <th scope="col">ลำดับ</th>
-                        <th scope="col">ตึก</th>
+                        <th scope="col">อาคาร</th>
                         <th scope="col">ชั้น</th>
-                        <th scope="col">ห้อง</th>
+                        <th scope="col">เลขที่ห้อง</th>
                         <th scope="col">ค่าบำรุงฯ</th>
                         <th scope="col">ค่าประกัน</th>
                         <th scope="col">จำนวนงวดประกัน</th>
@@ -328,9 +336,9 @@ export default {
                     <tbody>
                       <tr>
                         <th scope="row">1</th>
-                        <td>1</td>
+                        <td>อาคารแฟลต 1/14</td>
                         <td>2</td>
-                        <td>3</td>
+                        <td>202</td>
                         <td>20,000</td>
                         <td>8,000</td>
                         <td>8</td>
@@ -367,17 +375,110 @@ export default {
                     <thead class="border border-2 border-success border-bottom">
                       <tr>
                         <th scope="col">ลำดับ</th>
-                        <th scope="col">กก.</th>
-                        <th scope="col">บก.</th>
-                        <th scope="col">ข้อมูลระดับ บช.</th>
+                        <th scope="col">เดือน</th>
+                        <th scope="col">อาคารบ้านพัก</th>
+                        <th scope="col"></th>
                       </tr>
                     </thead>
                     <tbody>
                       <tr>
                         <th scope="row">1</th>
-                        <td>Mark</td>
-                        <td>Otto</td>
-                        <td>@mdo</td>
+                        <td>ตุลาคม</td>
+                        <td>อาคารบ้านพัก บช. ตชด.</td>
+                        <td>
+                          <MaterialButton
+                            size="lg"
+                            class="btn-icon"
+                            style="margin-right: -0px"
+                          >
+                            <div class="d-flex align-items-center">
+                              <span style="margin-right: 5px">บันทึก</span>
+                              <img
+                                src="../../assets/img/pdf.png"
+                                alt="title"
+                                loading="lazy"
+                                width="24"
+                              />
+                            </div>
+                          </MaterialButton>
+                          <MaterialButton size="lg" class="btn-icon">
+                            <div class="d-flex align-items-center">
+                              <span style="margin-right: 5px">บันทึก</span>
+                              <img
+                                src="../../assets/img/excel.png"
+                                alt="title"
+                                loading="lazy"
+                                width="24"
+                              />
+                            </div>
+                          </MaterialButton>
+                        </td>
+                      </tr>
+                      <tr>
+                        <th scope="row">1</th>
+                        <td>ตุลาคม</td>
+                        <td>อาคารบ้านพักส่วนกลาง</td>
+                        <td>
+                          <MaterialButton
+                            size="lg"
+                            class="btn-icon"
+                            style="margin-right: -0px"
+                          >
+                            <div class="d-flex align-items-center">
+                              <span style="margin-right: 5px">บันทึก</span>
+                              <img
+                                src="../../assets/img/pdf.png"
+                                alt="title"
+                                loading="lazy"
+                                width="24"
+                              />
+                            </div>
+                          </MaterialButton>
+                          <MaterialButton size="lg" class="btn-icon">
+                            <div class="d-flex align-items-center">
+                              <span style="margin-right: 5px">บันทึก</span>
+                              <img
+                                src="../../assets/img/excel.png"
+                                alt="title"
+                                loading="lazy"
+                                width="24"
+                              />
+                            </div>
+                          </MaterialButton>
+                        </td>
+                      </tr>
+                      <tr>
+                        <th scope="row">1</th>
+                        <td>ตุลาคม</td>
+                        <td>อาคารบ้านพัก ตร.</td>
+                        <td>
+                          <MaterialButton
+                            size="lg"
+                            class="btn-icon"
+                            style="margin-right: -0px"
+                          >
+                            <div class="d-flex align-items-center">
+                              <span style="margin-right: 5px">บันทึก</span>
+                              <img
+                                src="../../assets/img/pdf.png"
+                                alt="title"
+                                loading="lazy"
+                                width="24"
+                              />
+                            </div>
+                          </MaterialButton>
+                          <MaterialButton size="lg" class="btn-icon">
+                            <div class="d-flex align-items-center">
+                              <span style="margin-right: 5px">บันทึก</span>
+                              <img
+                                src="../../assets/img/excel.png"
+                                alt="title"
+                                loading="lazy"
+                                width="24"
+                              />
+                            </div>
+                          </MaterialButton>
+                        </td>
                       </tr>
                     </tbody>
                   </table>
@@ -415,7 +516,7 @@ export default {
           <div class="modal-body">
             <div>
               <div class="mb-3">
-                <label>ตึก</label>
+                <label>อาคาร</label>
                 <v-select
                   :options="optionsBuilding"
                   v-model="selectedBuilding"
@@ -426,7 +527,7 @@ export default {
                 <v-select :options="optionsFloor" v-model="selectedFloor"></v-select>
               </div>
               <div class="mb-3">
-                <label>ห้อง</label>
+                <label>เลขที่ห้อง</label>
                 <v-select :options="optionsRoom" v-model="selectedRoom"></v-select>
               </div>
               <div class="mb-3">
@@ -538,7 +639,7 @@ export default {
           <div class="modal-body">
             <div>
               <div class="mb-3">
-                <label>ตึก</label>
+                <label>อาคาร</label>
                 <v-select
                   :options="optionsBuilding"
                   v-model="selectedBuilding"
@@ -549,7 +650,7 @@ export default {
                 <v-select :options="optionsFloor" v-model="selectedFloor"></v-select>
               </div>
               <div class="mb-3">
-                <label>ห้อง</label>
+                <label>เลขที่ห้อง</label>
                 <v-select :options="optionsRoom" v-model="selectedRoom"></v-select>
               </div>
               <div class="mb-3">
@@ -686,15 +787,23 @@ export default {
 </template>
 <style>
 .bg-green {
-  background: #567b57 !important;
-  color: #fff;
+  border: 2px solid #567b57 !important;
+  color: #000;
 }
 .bg-red {
-  background: #d24c4a !important;
-  color: #fff;
+  border: 2px solid #d24c4a !important;
+  color: #000;
 }
-.bg-waring {
-  background: #d1d3d5 !important;
-  color: #fff;
+.bg-warning {
+  border: 2px solid #fb8c00 !important;
+  color: #000;
+}
+.bg-return {
+  border: 2px solid #ffca28 !important;
+  color: #000;
+}
+.bg-special {
+  border: 2px solid #edc7c7 !important;
+  color: #000;
 }
 </style>