From f06af90d30e02bcf964b4b894364e8e8e7a773a5 Mon Sep 17 00:00:00 2001
From: kamoa457 <kamoa457@cubes.postbox.in.th>
Date: Mon, 23 Oct 2023 05:17:16 +0700
Subject: [PATCH] update code all

---
 src/assets/css/material-kit-pro.css           |  13 +-
 src/assets/img/queue.png                      | Bin 0 -> 15256 bytes
 src/router/index.js                           |   6 +
 .../Sections/PresentationInformation.vue      |  22 +-
 src/views/Queue/QueueView.vue                 | 260 ++++++++++++++++
 src/views/Reports/ReportlistView.vue          |   2 -
 src/views/Restroom/DetailRoomPage.vue         | 195 +++++++-----
 src/views/Restroom/RoomView.vue               | 283 +++++++++++-------
 src/views/Restroom/UpdateRoom.vue             |  75 +++--
 src/views/RoomLayout/RoomLayoutView.vue       |  64 ++--
 src/views/SearchAll/SearchView.vue            |   2 -
 src/views/Users/UserlistView.vue              |  46 +--
 src/views/UtilitiesRoom/UtilitieView.vue      |  82 ++++-
 13 files changed, 770 insertions(+), 280 deletions(-)
 create mode 100644 src/assets/img/queue.png
 create mode 100644 src/views/Queue/QueueView.vue

diff --git a/src/assets/css/material-kit-pro.css b/src/assets/css/material-kit-pro.css
index 16aa9a6..2318035 100644
--- a/src/assets/css/material-kit-pro.css
+++ b/src/assets/css/material-kit-pro.css
@@ -9638,7 +9638,7 @@ textarea.form-control-lg {
 }
 
 .text-return {
-  color: #ffca28 !important;
+  color: #deb70d !important;
 }
 
 
@@ -9730,10 +9730,19 @@ textarea.form-control-lg {
   background-color: #344767 !important;
 }
 
-.bg-white {
+.bg-white {   
   background-color: #fff !important;
 }
 
+.bg-return{
+  background-color: #deb70d !important;
+}
+
+.bg-red{
+  background-color: #d24c4a  !important;
+}
+
+
 .bg-body {
   background-color: #fff !important;
 }
diff --git a/src/assets/img/queue.png b/src/assets/img/queue.png
new file mode 100644
index 0000000000000000000000000000000000000000..bc8b423d4199ceceb82c531dae8febef01546de3
GIT binary patch
literal 15256
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
MQB$E(&g#|w14<U4rvLx|

literal 0
HcmV?d00001

diff --git a/src/router/index.js b/src/router/index.js
index 010e965..d325f63 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -32,6 +32,7 @@ import UtilitiesRoom from "../views/UtilitiesRoom/UtilitieView.vue"
 import addUserRoom from "../views/Restroom/AddRoom.vue"
 import Reports from "../views/Reports/ReportlistView.vue"
 import searchFilter from "../views/SearchAll/SearchView.vue"
+import Queue from "../views/Queue/QueueView.vue"
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
   routes: [
@@ -75,6 +76,11 @@ const router = createRouter({
       name: "searchfilter", 
       component: searchFilter,
     },
+    {
+      path: "/queue",
+      name: "queue", 
+      component: Queue,
+    },
     {
       path: '/room/detail/:id',
       name: 'DetailRoom',
diff --git a/src/views/Presentation/Sections/PresentationInformation.vue b/src/views/Presentation/Sections/PresentationInformation.vue
index de836e5..6193eef 100644
--- a/src/views/Presentation/Sections/PresentationInformation.vue
+++ b/src/views/Presentation/Sections/PresentationInformation.vue
@@ -10,7 +10,7 @@
                         <p class="card-title" style="font-weight: bold; color: #000">ทะเบียน</p>
                         <img src="../../../assets/img/register.png"  alt="title" loading="lazy" class="w-50" />
                         <RouterLink :to="{ name: 'users' }" class="dropdown-item border-radius-md">
-                            <a href="#" class="btn btn-primary mt-4">ทะเบียน</a>
+                            <a href="#" class="btn btn-success mt-4">ทะเบียน</a>
                         </RouterLink>
 
                     </div>
@@ -22,7 +22,7 @@
                         <p class="card-title" style="font-weight: bold; color: #000">สถานะห้องพัก</p>
                         <img src="../../../assets/img/status.png" alt="title" loading="lazy" class="w-50" />
                         <RouterLink :to="{ name: 'room' }" class="dropdown-item border-radius-md">
-                            <a href="#" class="btn btn-primary mt-4">สถานะห้องพัก</a>
+                            <a href="#" class="btn btn-success mt-4">สถานะห้องพัก</a>
                         </RouterLink>
                     </div>
                 </div>
@@ -33,7 +33,7 @@
                         <p class="card-title" style="font-weight: bold; color: #000">ผังห้องพัก</p>
                         <img src="../../../assets/img/layout.png" alt="title" loading="lazy" class="w-50" />
                         <RouterLink :to="{ name: 'layout' }" class="dropdown-item border-radius-md">
-                          <a href="#" class="btn btn-primary mt-4">ผังห้องพัก</a>
+                          <a href="#" class="btn btn-success mt-4">ผังห้องพัก</a>
                         </RouterLink>
                     </div>
                 </div>
@@ -44,29 +44,29 @@
                         <p class="card-title" style="font-weight: bold; color: #000">ค่าสาธารณุปโภค</p>
                         <img src="../../../assets/img/utilities.png" alt="title" loading="lazy" class="w-50" />
                         <RouterLink :to="{ name: 'utilities' }" class="dropdown-item border-radius-md">
-                          <a href="#" class="btn btn-primary mt-4">ค่าสาธารณุปโภค</a>
+                          <a href="#" class="btn btn-success mt-4">ค่าสาธารณุปโภค</a>
                         </RouterLink>
                     </div>
                 </div>
             </div>
-            <!-- <div class="col-sm-2">
+            <div class="col-sm-3 mt-4">
                 <div class="card">
                     <div class="card-body text-center">
-                        <p class="card-title" style="font-weight: bold; color: #000">ระบบค้นหา</p>
-                        <img src="../../../assets/img/seo.png" alt="title" loading="lazy" class="w-50" />
-                        <RouterLink :to="{ name: 'searchfilter' }" class="dropdown-item border-radius-md">
-                          <a href="#" class="btn btn-primary mt-4">ระบบค้นหา</a>
+                        <p class="card-title" style="font-weight: bold; color: #000">ระบบคิว</p>
+                        <img src="../../../assets/img/queue.png" alt="title" loading="lazy" class="w-50" />
+                        <RouterLink :to="{ name: 'queue' }" class="dropdown-item border-radius-md">
+                          <a href="#" class="btn btn-success mt-4">ระบบคิว</a>
                         </RouterLink>
                     </div>
                 </div>
-            </div> -->
+            </div>
             <div class="col-sm-3 mt-4">
                 <div class="card">
                     <div class="card-body text-center">
                         <p class="card-title" style="font-weight: bold; color: #000">ระบบเรียกรายงาน</p>
                         <img src="../../../assets/img/result.png" alt="title" loading="lazy" class="w-50" />
                         <RouterLink :to="{ name: 'reports' }" class="dropdown-item border-radius-md">
-                          <a href="#" class="btn btn-primary mt-4">ระบบเรียกรายงาน</a>
+                          <a href="#" class="btn btn-success mt-4">ระบบเรียกรายงาน</a>
                         </RouterLink>
                     </div>
                 </div>
diff --git a/src/views/Queue/QueueView.vue b/src/views/Queue/QueueView.vue
new file mode 100644
index 0000000..6aac1a5
--- /dev/null
+++ b/src/views/Queue/QueueView.vue
@@ -0,0 +1,260 @@
+<script>
+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";
+
+const listRoom = [
+  { title: "ตึก 1" },
+  { title: "ตึก 2" },
+  { title: "ตึก 3" },
+  { title: "ตึก 4" },
+  { title: "ตึก 5" },
+  { title: "ตึก 6" },
+  { title: "ตึก 7" },
+];
+
+const NoRoom = [
+  { title: "ชั้น 1" },
+  { title: "ชั้น 2" },
+  { title: "ชั้น 3" },
+  { title: "ชั้น 4" },
+  { title: "ชั้น 5" },
+  { title: "ชั้น 6" },
+  { title: "ชั้น 7" },
+];
+
+const userlist = [
+  {
+    dataIndex: "1",
+    firstName: "สมชาย",
+    lastName: "แสงทอง",
+    Affiliation: "บก", //สังกัด
+    rank: "ร้อยตรี", //ยศ
+    old: "32",
+    birthday: "04/03/2534",
+    idcard: "134044411441122",
+    phone: "0325647846",
+  },
+  {
+    dataIndex: "2",
+    firstName: "สมชัย",
+    lastName: "แสงสุข",
+    Affiliation: "กก", //สังกัด
+    rank: "ร้อยตรี", //ยศ
+    old: "32",
+    birthday: "14/07/2534",
+    idcard: "134044411441178",
+    phone: "0325647845",
+  },
+];
+
+export default {
+  components: {
+    MaterialInput,
+    MaterialButton,
+    Breadcrumbs,
+  },
+  setup() {
+    return {
+      listRoom,
+      NoRoom,
+      userlist,
+      vueMkHeader,
+    };
+  },
+
+  data() {
+    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" },
+      ],
+      selectedColor: "",
+      firstName: "",
+      lastName: "",
+      Affiliation: "", //สังกัด
+      rank: "", //ยศ
+      idcard: "",
+      phone: "",
+    };
+  },
+  watch: {
+    selectedColor: function (newValue) {
+      // this.updateColor(newValue)
+      console.log(newValue);
+    },
+  },
+  methods: {
+    changedLabel(event) {
+      console.log(event);
+      // this.selected = event;
+    },
+
+    submitForm() {
+      let body = {
+        firstName: this.firstName,
+        lastName: this.lastName,
+        Affiliation: this.Affiliation,
+        rank: this.rank,
+        idcard: this.idcard,
+        phone: this.phone,
+      };
+      // let b = []
+      // b.push(body)
+      this.userlist.push(body);
+      console.log(this.userlist);
+    },
+  },
+};
+</script>
+<template>
+  <Header>
+    <div
+      class="page-header min-vh-45"
+      :style="`background-image: url(${vueMkHeader})`"
+      loading="lazy"
+    >
+      <div class="container">
+        <div class="row">
+          <div class="col-lg-7 text-center mx-auto position-relative">
+            <h1 class="pt-3 mt-n5 me-2 head-text">ระบบคิว</h1>
+          </div>
+        </div>
+      </div>
+    </div>
+  </Header>
+  <section>
+    <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 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 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>
+
+    <!-- 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="options" 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>
+  </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;
+  margin: 0;
+}
+
+input[type="number"] {
+  -moz-appearance: textfield;
+}
+</style>
diff --git a/src/views/Reports/ReportlistView.vue b/src/views/Reports/ReportlistView.vue
index 2755307..558e809 100644
--- a/src/views/Reports/ReportlistView.vue
+++ b/src/views/Reports/ReportlistView.vue
@@ -132,7 +132,6 @@ 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 class="d-flex justify-content-between">
             <div>
               <Breadcrumbs
                 :routes="[
@@ -141,7 +140,6 @@ export default {
                 ]"
               />
             </div>
-          </div>
           <div>
             <ul class="nav nav-tabs" id="myTab" role="tablist">
               <li class="nav-item" role="presentation">
diff --git a/src/views/Restroom/DetailRoomPage.vue b/src/views/Restroom/DetailRoomPage.vue
index a30aaf8..5c32cef 100644
--- a/src/views/Restroom/DetailRoomPage.vue
+++ b/src/views/Restroom/DetailRoomPage.vue
@@ -67,6 +67,7 @@ export default {
       phone: "",
       old: "",
       birthday: "",
+      installments: "",
     };
   },
   created() {
@@ -105,7 +106,7 @@ export default {
     </div>
   </Header>
   <section>
-    <div class="card card-body blur shadow-blur mx-3 mx-md-4 mt-n6">
+    <div class="card card-body blur shadow-blur mx-3 mx-md-4 mt-n6 pt-6">
       <div class="page-header min-vh-45">
         <div class="container">
           <div>
@@ -118,34 +119,34 @@ export default {
             />
           </div>
           <!-- d-flex justify-content-between -->
-          <div class="d-flex justify-content-between align-items-center">
+          <div class="d-flex justify-content-between align-items-baseline">
             <h4>รายละเอียดห้องพัก</h4>
             <div v-if="mode == 'edit'">
               <MaterialButton variant="gradient" color="success" @click="gotoAction()"
-                >แก้ไขค่าใช้จ่ายประจำเดือน</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 v-if="mode == 'add'">
-              <MaterialButton
-                variant="gradient"
-                color="success"
-                @click="gotoAction()"
-                >เพิ่มผู้เช่าห้องพัก</MaterialButton
-              >
-            </div> -->
           </div>
           <div class="row pt-4">
             <div class="card mb-3">
               <div class="row g-0">
-                <div class="col-md-4">
+                <!-- <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> -->
+                <div class="col-md-10">
                   <div class="card-body">
                     <div class="row" v-if="statusedit == true">
                       <h5 class="card-title">รายละเอียดผู้เช่า</h5>
@@ -173,13 +174,6 @@ export default {
                         <p class="card-text">มิเตอร์น้ำ/ไฟ : 745/546</p>
                         <p class="card-text">สภาพห้อง : ปกติ</p>
                       </div>
-                      <div class="col-7" v-if="statusedit == true">
-                        <h5 class="card-title pt-2">รายละเอียดค่าสาธารณุปโภค</h5>
-                        <p class="card-text">ค่าน้ำประปา : 120</p>
-                        <p class="card-text">ค่าไฟฟ้า : 700</p>
-                        <p class="card-text">ค่าไฟฟ้าส่วนกลาง : 100</p>
-                        <p class="card-text">ค่าบำรุงลิฟท์ : 200</p>
-                      </div>
                     </div>
                     <!-- <p class="card-text">
                       <small class="text-muted">Last updated 3 mins ago</small>
@@ -189,16 +183,6 @@ export default {
               </div>
               <div class="row pt-4">
                 <div class="card mb-3" v-if="mode == 'add'">
-                  <h5>ลำดับคิว</h5>
-                  <div class="text-end">
-                    <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">
@@ -242,50 +226,6 @@ export default {
         </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="options" 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>
 
     <div
       class="modal fade"
@@ -330,16 +270,119 @@ export default {
                   placeholder="ระยะเวลาที่เข้าพัก"
                 />
               </div>
+              <div class="mb-3">
+                <MaterialInput
+                  :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) => (Affiliation = event.target.value)"
+                  @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>
+          </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>
+
+    <div
+      class="modal fade"
+      id="Returntheroom"
+      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">
+                <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 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="mb-3">
+                <MaterialInput
+                  name="contract"
+                  :value="contract"
+                  @input="(event) => (contract = event.target.value)"
+                  class="input-group-static"
+                  label="จำนวนเงินคงค้าง"
+                  type="text"
+                  placeholder="จำนวนเงินคงค้าง"
+                />
+              </div>
+              <div class="mb-3">
+                <MaterialInput
+                  :value="Checkintime"
+                  @input="(event) => (Checkintime = event.target.value)"
+                  class="input-group-static"
+                  label="จำนวนงวดที่จ่าย"
+                  type="text"
+                  placeholder="จำนวนงวดที่จ่าย"
+                />
+              </div>
             </div>
           </div>
           <div class="modal-footer">
diff --git a/src/views/Restroom/RoomView.vue b/src/views/Restroom/RoomView.vue
index 86c5c0b..0c82d65 100644
--- a/src/views/Restroom/RoomView.vue
+++ b/src/views/Restroom/RoomView.vue
@@ -6,28 +6,9 @@ import vueMkHeader from "@/assets/img/bg.jpg";
 import Breadcrumbs from "@/examples/Breadcrumbs.vue";
 import roomData from "@/assets/dataJson/rooms.json";
 // import posts from "../posts.json";
-
 // import axios from "axios";
-// const fs = require('fs');
-const listRoom = [
-  { title: "ตึก 1" },
-  { title: "ตึก 2" },
-  { title: "ตึก 3" },
-  { title: "ตึก 4" },
-  { title: "ตึก 5" },
-  { title: "ตึก 6" },
-  { title: "ตึก 7" },
-];
 
-const NoRoom = [
-  { title: "ชั้น 1" },
-  { title: "ชั้น 2" },
-  { title: "ชั้น 3" },
-  { title: "ชั้น 4" },
-  { title: "ชั้น 5" },
-  { title: "ชั้น 6" },
-  { title: "ชั้น 7" },
-];
+const NoRoom = [{ title: "ชั้น 1" }, { title: "ชั้น 2" }, { title: "ชั้น 3" }];
 
 export default {
   components: {
@@ -38,7 +19,6 @@ export default {
   },
   setup() {
     return {
-      listRoom,
       NoRoom,
       vueMkHeader,
       roomData,
@@ -55,21 +35,64 @@ export default {
         { label: "Laravel", value: "PHP" },
         { 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" },
+      ],
       selectedColor: "",
+      statusfree: false,
+      statusreturn: false,
+      statuseunavailable: false,
+      statusewaiting: false,
+      selectedlistRoom: "ตึก 1",
     };
   },
   created() {
     // this.$route.query
   },
+
   methods: {
     gotodetail(id, index) {
-      console.log(index);
       let action;
       if (index == "unavailable") action = "edit";
       if (index == "waiting") action = "add";
       if (index == "free") action = "add";
       this.$router.push({ path: `/room/detail/${id}`, query: { mode: action } });
     },
+    onChangeEvent(e) {
+      if (e == "free") {
+        if (statusfree) {
+          const free = this.roomData.filter((tagfree) => tagfree.status === "free");
+          console.log(free);
+        }
+      } else if (e == "unavailable") {
+        if (statuseunavailable) {
+          const statuseunavailable = this.roomData.filter(
+            (tagun) => tagun.status === "unavailable"
+          );
+          console.log(statuseunavailable);
+        }
+      } else if (e == "waiting") {
+        if (statusrewaiting) {
+          const waiting = this.roomData.filter(
+            (tagwaiting) => tagwaiting.status === "waiting"
+          );
+          console.log(waiting);
+        }
+      } else if (e == "return") {
+        if (statusrewaiting) {
+          const returns = this.roomData.filter(
+            (tagreturn) => tagreturn.status === "return"
+          );
+          console.log(returns);
+        }
+      }
+    },
   },
 };
 </script>
@@ -90,7 +113,7 @@ export default {
     </div>
   </Header>
   <section>
-    <div class="card card-body blur shadow-blur mx-3 mx-md-4 mt-n6">
+    <div class="card card-body blur shadow-blur mx-3 mx-md-4 mt-n6 pt-6">
       <div class="page-header min-vh-45">
         <div class="container">
           <!-- d-flex justify-content-between -->
@@ -99,46 +122,36 @@ export default {
               :routes="[{ label: 'หน้าหลัก', route: '/' }, { label: 'สถานะห้องพัก' }]"
             />
           </div>
-          <div class="row pt-4">
-            <div class="col-8">
-              <div class="nav-item dropdown dropdown-hover mx-2 w-45">
-                <a
-                  role="button"
-                  class="nav-link ps-2 d-flex cursor-pointer align-items-center"
-                  id="dropdownMenuPages"
-                  data-bs-toggle="dropdown"
-                  aria-expanded="false"
-                >
-                  <i class="material-icons opacity-6 me-2 text-md">home</i>
-                  เลือกตึก
-                </a>
-                <div
-                  class="dropdown-menu dropdown-menu-animation ms-n3 dropdown-md p-3 border-radius-xl mt-0 mt-lg-3"
-                  aria-labelledby="dropdownMenuPages"
-                >
-                  <div class="row">
-                    <div class="col-12 px-4 py-2">
-                      <div class="row">
-                        <div class="position-relative">
-                          <p
-                            class="dropdown-item border-radius-md"
-                            v-for="(item, index) in listRoom"
-                            :key="index"
-                          >
-                            <span>{{ item?.title }}</span>
-                          </p>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
+          <div class="row pt-4 align-items-baseline">
             <div class="col-4">
-              <div>
-                <label>ค้นหาผู้เช่า</label>
+              <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>
+              </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
+                    >
+                  </MaterialCheckbox>
+                  <MaterialCheckbox id="terms6">
+                    <a href="javascript:;" class=" font-weight-bolder">
+                      ตึกทั้งหมด</a
+                    >
+                  </MaterialCheckbox>
+                </div>
+                <label style="margin-right: 10px; margin-left: 20px"
+                  >ค้นหาชื่อหรือเลขห้อง
+                </label>
                 <MaterialInput
-                  class="input-group-dynamic w-100"
+                  class="input-group-dynamic w-50"
                   icon="search"
                   type="text"
                   placeholder="Search"
@@ -148,65 +161,100 @@ export default {
           </div>
 
           <div class="text-center pt-4">
-            <!-- v-for="(item, index) in NoRoom" :key="index" -->
-            <div>
-              <p class="text-start mt-4">
-                <MaterialButton
-                  variant="outline"
+            <div class="d-flex justify-content-between align-items-baseline p-2">
+              <h6>ตึก 1</h6>
+              <div class="d-flex">
+                <MaterialCheckbox
+                  id="terms"
                   color="success"
-                  data-bs-toggle="collapse"
-                  href="#collapseExample"
-                  aria-expanded="false"
-                  aria-controls="collapseExample"
-                  >ตึก1</MaterialButton
+                  :checked="statusfree"
+                  @change="onChangeEvent('free')"
                 >
-                <!-- item?.title -->
-              </p>
-              <div class="collapse show" id="collapseExample" aria-expanded="true">
-                <div>
-                  <div class="d-flex justify-content-end">
-                    <MaterialCheckbox id="terms" checked>
-                      <a href="javascript:;" class="text-success font-weight-bolder">
-                        ว่าง</a
-                      >
-                    </MaterialCheckbox>
-                    <MaterialCheckbox id="terms" >
-                      <a href="javascript:;" class="text-danger font-weight-bolder">
-                        ไม่ว่าง</a
-                      >
-                    </MaterialCheckbox>
-                    <MaterialCheckbox id="terms" >
-                      <a href="javascript:;" class=" font-weight-bolder" style="color: #fb8c00">
-                        รอซ่อม</a
-                      >
-                    </MaterialCheckbox>
-                    <MaterialCheckbox id="terms" >
-                      <a href="javascript:;" class="font-weight-bolder" style="color: #ffca28">
-                        รอคืนห้อง</a
-                      >
-                    </MaterialCheckbox>
-                  </div>
-                  <div class="row row-cols-auto" :style="{ '--bs-gutter-x': '0.5rem' }">
-                    <div class="col" v-for="(item, index) in roomData" :key="index">
+                  <a href="javascript:;" class=" font-weight-bolder"> ว่าง</a>
+                </MaterialCheckbox>
+                <MaterialCheckbox
+                  id="terms2"
+                  color="red"
+                  :checked="statuseunavailable"
+                  @change="onChangeEvent('unavailable')"
+                >
+                  <a href="javascript:;" class="font-weight-bolder">
+                    ไม่ว่าง</a
+                  >
+                </MaterialCheckbox>
+                <MaterialCheckbox
+                  id="terms3"
+                  color="warning"
+                  :checked="statusewaiting"
+                  @change="onChangeEvent('waiting')"
+                >
+                  <a
+                    href="javascript:;"
+                    class="font-weight-bolder"
+                  >
+                    รอซ่อม</a
+                  >
+                </MaterialCheckbox>
+                <MaterialCheckbox
+                  id="terms4"
+                  color="return"
+                  :checked="statusreturn"
+                  @change="onChangeEvent('return')"
+                >
+                  <a
+                    href="javascript:;"
+                    class="font-weight-bolder"
+                  >
+                    รอคืนห้อง</a
+                  >
+                </MaterialCheckbox>
+              </div>
+            </div>
+
+            <!-- v-for="(item, index) in NoRoom" :key="index" -->
+            <div v-for="(item, index) in NoRoom" :key="index">
+              <div class="card mb-2">
+                <div class="card-body">
+                  <p class="text-start mt-4">
+                    <MaterialButton
+                      variant="outline"
+                      color="success"
+                      data-bs-toggle="collapse"
+                      href="#collapseExample"
+                      aria-expanded="false"
+                      aria-controls="collapseExample"
+                      >{{ item?.title }}</MaterialButton
+                    >
+                    <!-- item?.title -->
+                  </p>
+                  <div class="collapse show" id="collapseExample" aria-expanded="true">
+                    <div>
                       <div
-                        class="card mb-2"
-                        :class="{
-                          'bg-red': item?.status == 'unavailable',
-                          'bg-green': item?.status == 'free',
-                          'bg-warning': item?.status == 'waiting',
-                          'bg-return': item?.status == 'return',
-                        }"
-                        :style="{ width: `110px` }"
+                        class="row row-cols-auto"
+                        :style="{ '--bs-gutter-x': '0.5rem' }"
                       >
-                        <div class="card-body">
-                          <p class="card-title">
-                            <a
-                              style="cursor: pointer"
-                              @click="gotodetail(item?.dataIndex, item?.status)"
-                              class="text-white"
-                              >{{ item?.title }}</a
-                            >
-                          </p>
+                        <div class="col" v-for="(item, index) in roomData" :key="index">
+                          <div
+                            class="card mb-2"
+                            :class="{
+                              'bg-red': item?.status == 'unavailable',
+                              'bg-green': item?.status == 'free',
+                              'bg-warning': item?.status == 'waiting',
+                              'bg-return': item?.status == 'return',
+                            }"
+                            :style="{ width: `110px` }"
+                          >
+                            <div class="card-body">
+                              <p class="card-title">
+                                <a
+                                  style="cursor: pointer"
+                                  @click="gotodetail(item?.dataIndex, item?.status)"
+                                  class="text-white"
+                                  >{{ item?.title }}</a
+                                >
+                              </p>
+                            </div>
+                          </div>
                         </div>
                       </div>
                     </div>
@@ -270,4 +318,7 @@ export default {
   background: #ffca28 !important;
   color: #fff;
 }
+ol.breadcrumb {
+  padding: 1rem !important;
+}
 </style>
diff --git a/src/views/Restroom/UpdateRoom.vue b/src/views/Restroom/UpdateRoom.vue
index f7defae..2657388 100644
--- a/src/views/Restroom/UpdateRoom.vue
+++ b/src/views/Restroom/UpdateRoom.vue
@@ -132,6 +132,11 @@ export default {
         { label: "พฤศจิกายน", value: "11" },
         { label: "ธันวาคม", value: "12" },
       ],
+      optionsRoomtype: [
+        { label: "ช๑", value: "ช๑" },
+        { label: "ช๒", value: "ช๒" },
+        { label: "ช๓", value: "ช๓" },
+      ],
       selectedMonth: "ตุลาคม",
       firstName: "สมชาย",
       lastName: "0237",
@@ -141,6 +146,9 @@ export default {
       phone: "1200",
       old: "100",
       birthday: "200",
+      Roomtype: "ช๑",
+      Roomconditions: "ปกติ",
+      selectedRoomtype: "ช๑",
     };
   },
   watch: {
@@ -189,7 +197,7 @@ export default {
     </div>
   </Header>
   <section>
-    <div class="card card-body blur shadow-blur mx-3 mx-md-4 mt-n6">
+    <div class="card card-body blur shadow-blur mx-3 mx-md-4 mt-n6 pt-6">
       <div class="page-header min-vh-45">
         <div class="container">
           <div>
@@ -197,12 +205,12 @@ export default {
               :routes="[
                 { label: 'หน้าหลัก', route: '/' },
                 { label: 'สถานะห้องพัก', route: '/room' },
-                { label: 'แก้ไขค่าใช้จ่ายประจำเดือน' },
+                { label: 'แก้ไขรายละเอียดห้อง' },
               ]"
             />
           </div>
           <!-- d-flex justify-content-between -->
-          <h4>แก้ไขค่าใช้จ่ายประจำเดือน</h4>
+          <h4>แก้ไขรายละเอียดห้อง</h4>
           <div class="row pt-4">
             <div class="card mb-3">
               <div class="row g-0">
@@ -216,10 +224,10 @@ export default {
                 </div>
                 <div class="col-md-8">
                   <div class="card-body">
-                    <h5 class="card-title">ค่าใช้จ่ายประจำเดือน ตุลาคม</h5>
+                    <h5 class="card-title">แก้ไขรายละเอียดห้อง</h5>
 
                     <div class="row">
-                      <div class="col-4">
+                      <div class="col-6">
                         <div>
                           <div class="mb-3">
                             <MaterialInput
@@ -242,28 +250,26 @@ export default {
                             />
                           </div>
                           <div class="mb-3">
-                            <MaterialInput
-                              :value="idcard"
-                              @input="(event) => (idcard = event.target.value)"
-                              class="input-group-static"
-                              label="ค่าน้ำประปา"
-                              type="number"
-                              placeholder="ค่าน้ำประปา"
-                            />
+                            <label>ประเภทห้องพัก</label>
+                            <v-select
+                              :options="optionsRoomtype"
+                              v-model="selectedRoomtype"
+                            ></v-select>
                           </div>
+
                           <div class="mb-3">
                             <MaterialInput
-                              :value="phone"
-                              @input="(event) => (phone = event.target.value)"
+                              :value="Roomconditions"
+                              @input="(event) => (Roomconditions = event.target.value)"
                               class="input-group-static"
-                              label="ค่าไฟฟ้า"
-                              type="number"
-                              placeholder="ค่าไฟฟ้า"
+                              label="สภาพห้อง"
+                              type="text"
+                              placeholder="สภาพห้อง"
                             />
                           </div>
                         </div>
                       </div>
-                      <div class="col-4">
+                      <!-- <div class="col-4">
                         <div class="mb-3">
                           <MaterialInput
                             :value="birthday"
@@ -284,6 +290,26 @@ export default {
                             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"
@@ -294,12 +320,10 @@ export default {
                             placeholder="สภาพห้อง"
                           />
                         </div>
-                      </div>
+                      </div> -->
                     </div>
-                    <!-- <p class="card-text">
-                      <small class="text-muted">Last updated 3 mins ago</small>
-                    </p> -->
-                    <div class="text-center">
+
+                    <div class="text-center" style="margin-right: 100px">
                       <MaterialButton variant="gradient" color="success"
                         >บันทึก</MaterialButton
                       >
@@ -327,4 +351,7 @@ export default {
   background: #d1d3d5 !important;
   color: #fff;
 }
+.vs__actions {
+  cursor: pointer;
+}
 </style>
diff --git a/src/views/RoomLayout/RoomLayoutView.vue b/src/views/RoomLayout/RoomLayoutView.vue
index c28e91d..fc4e1ad 100644
--- a/src/views/RoomLayout/RoomLayoutView.vue
+++ b/src/views/RoomLayout/RoomLayoutView.vue
@@ -116,10 +116,16 @@ export default {
         { label: "Laravel", value: "PHP" },
         { label: "Phoenix", value: "Elixir" },
       ],
+      optionsRoomtype: [
+        { label: "ช๑", value: "ช๑" },
+        { label: "ช๒", value: "ช๒" },
+        { label: "ช๓", value: "ช๓" },
+      ],
       selectedColor: "",
       Edifice: "",
       Building: "",
       Floors: "",
+      selectedRoomtype: "ช๑",
     };
   },
   watch: {
@@ -156,45 +162,49 @@ 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 class="d-flex justify-content-between">
             <div>
               <Breadcrumbs
+                style="padding"
                 :routes="[{ label: 'หน้าหลัก', route: '/' }, { label: 'ผังห้องพัก' }]"
               />
-            </div>
           </div>
-          <div class="d-flex justify-content-end align-items-center">
-                <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="#Addroomplan"
-                >สร้างผังห้อง</MaterialButton
-              >
-              </div>
+          <div class="d-flex justify-content-end align-items-baseline">
+            <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="#Addroomplan"
+              >สร้างผังห้อง</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>
                 </tr>
               </thead>
               <tbody>
                 <tr>
                   <th scope="row">1</th>
+                  <td>พื้นที่</td>
                   <td>ตึก1</td>
                   <td>3</td>
                   <td>20</td>
+                  <td>ช๑</td>
                 </tr>
               </tbody>
             </table>
@@ -226,7 +236,16 @@ export default {
           </div>
           <div class="modal-body">
             <div>
-
+              <div class="mb-3">
+                <MaterialInput
+                  :value="Area"
+                  @input="(event) => (Area = event.target.value)"
+                  class="input-group-static"
+                  label="พื้นที่"
+                  type="text"
+                  placeholder="พื้นที่"
+                />
+              </div>
               <div class="mb-3">
                 <MaterialInput
                   :value="Building"
@@ -258,6 +277,13 @@ export default {
                   placeholder="จำนวนห้อง"
                 />
               </div>
+              <div class="mb-3">
+                <label>ประเภทห้องพัก</label>
+                <v-select
+                  :options="optionsRoomtype"
+                  v-model="selectedRoomtype"
+                ></v-select>
+              </div>
             </div>
           </div>
           <div class="modal-footer">
diff --git a/src/views/SearchAll/SearchView.vue b/src/views/SearchAll/SearchView.vue
index aa63d1b..2ea5332 100644
--- a/src/views/SearchAll/SearchView.vue
+++ b/src/views/SearchAll/SearchView.vue
@@ -132,13 +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 class="d-flex justify-content-between">
             <div>
               <Breadcrumbs
                 :routes="[{ label: 'หน้าหลัก', route: '/' }, { label: 'ระบบค้นหา' }]"
               />
             </div>
-          </div>
           <div class="d-flex justify-content-end">
                 <MaterialInput
                   class="input-group-dynamic w-30"
diff --git a/src/views/Users/UserlistView.vue b/src/views/Users/UserlistView.vue
index 76fd15d..b9be90f 100644
--- a/src/views/Users/UserlistView.vue
+++ b/src/views/Users/UserlistView.vue
@@ -132,29 +132,28 @@ 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 class="d-flex justify-content-between">
-            <div>
-              <Breadcrumbs
-                :routes="[{ label: 'หน้าหลัก', route: '/' }, { label: 'ทะเบียน' }]"
-              />
-            </div>
+          <div>
+            <Breadcrumbs
+              :routes="[{ label: 'หน้าหลัก', route: '/' }, { label: 'ทะเบียน' }]"
+            />
+          </div>
+          <div class="d-flex justify-content-end align-items-baseline">
+            <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="#userBackdrop"
+              >เพิ่มสมาชิก</MaterialButton
+            >
           </div>
-          <div class="d-flex justify-content-end align-items-center">
-                <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="#userBackdrop"
-                >เพิ่มสมาชิก</MaterialButton
-              >
-              </div>
           <div class="text-center pt-4">
             <table class="table border border-2 border-success">
               <thead class="border border-2 border-success border-bottom">
@@ -447,4 +446,7 @@ input::-webkit-inner-spin-button {
 input[type="number"] {
   -moz-appearance: textfield;
 }
+.breadcrumb-item a:hover {
+  color: #4caf50 !important;
+}
 </style>
diff --git a/src/views/UtilitiesRoom/UtilitieView.vue b/src/views/UtilitiesRoom/UtilitieView.vue
index ae2914f..be03422 100644
--- a/src/views/UtilitiesRoom/UtilitieView.vue
+++ b/src/views/UtilitiesRoom/UtilitieView.vue
@@ -140,6 +140,7 @@ export default {
       Costs: "",
       Maintenance: "",
       Insurance: "",
+      Insurancecost: "",
     };
   },
   watch: {
@@ -176,13 +177,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 class="d-flex justify-content-between">
             <div>
               <Breadcrumbs
                 :routes="[{ label: 'หน้าหลัก', route: '/' }, { label: 'ค่าสาธารณุปโภค' }]"
               />
             </div>
-          </div>
           <div>
             <ul class="nav nav-tabs" id="myTab" role="tablist">
               <li class="nav-item" role="presentation">
@@ -238,7 +237,8 @@ export default {
                 role="tabpanel"
                 aria-labelledby="home-tab"
               >
-                <div class="d-flex justify-content-end align-items-center pt-4">
+                <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"
@@ -267,6 +267,8 @@ export default {
                         <th scope="col">ค่าไฟฟ้า</th>
                         <th scope="col">ค่าไฟฟ้าส่วนกลาง</th>
                         <th scope="col">ค่าบำรุงลิฟท์</th>
+                        <th scope="col">ค่าประกัน</th>
+                        <th scope="col">จำนวนงวดประกัน</th>
                       </tr>
                     </thead>
                     <tbody>
@@ -280,6 +282,8 @@ export default {
                         <td>20,000</td>
                         <td>8,000</td>
                         <td>20,000</td>
+                        <td>10,000</td>
+                        <td>5</td>
                       </tr>
                     </tbody>
                   </table>
@@ -291,7 +295,8 @@ export default {
                 role="tabpanel"
                 aria-labelledby="profile-tab"
               >
-                <div class="d-flex justify-content-end align-items-center pt-4">
+                <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"
@@ -317,6 +322,7 @@ export default {
                         <th scope="col">ห้อง</th>
                         <th scope="col">ค่าบำรุงฯ</th>
                         <th scope="col">ค่าประกัน</th>
+                        <th scope="col">จำนวนงวดประกัน</th>
                       </tr>
                     </thead>
                     <tbody>
@@ -327,6 +333,7 @@ export default {
                         <td>3</td>
                         <td>20,000</td>
                         <td>8,000</td>
+                        <td>8</td>
                       </tr>
                     </tbody>
                   </table>
@@ -338,7 +345,8 @@ export default {
                 role="tabpanel"
                 aria-labelledby="contact-tab"
               >
-                <div class="d-flex justify-content-end align-items-center pt-4">
+                <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"
@@ -472,6 +480,26 @@ export default {
                   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">
@@ -545,6 +573,26 @@ export default {
                   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">
@@ -570,7 +618,9 @@ export default {
       <div class="modal-dialog modal-dialog-centered">
         <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"
@@ -601,6 +651,26 @@ export default {
                   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">