update code all

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;
 }

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',

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>
+                        <p class="card-title" style="font-weight: bold; color: #000">ระบบคิว</p>
-                        <img src="../../../assets/img/seo.png" alt="title" loading="lazy" class="w-50" />
+                        <img src="../../../assets/img/queue.png" alt="title" loading="lazy" class="w-50" />
-                        <RouterLink :to="{ name: 'searchfilter' }" class="dropdown-item border-radius-md">
+                        <RouterLink :to="{ name: 'queue' }" 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>
             <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>

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>

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

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> -->
-                <div class="col-md-8">
+                <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">

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 = [
+const NoRoom = [{ title: "ชั้น 1" }, { title: "ชั้น 2" }, { title: "ชั้น 3" }];
-  { title: "ชั้น 1" },
-  { title: "ชั้น 2" },
-  { title: "ชั้น 3" },
-  { title: "ชั้น 4" },
-  { title: "ชั้น 5" },
-  { title: "ชั้น 6" },
-  { title: "ชั้น 7" },
-];
 
 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="row pt-4 align-items-baseline">
-            <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="col-4">
-              <div>
+              <div class=" d-flex justify-content-start align-items-baseline">
-                <label>ค้นหาผู้เช่า</label>
+                <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 class="d-flex justify-content-between align-items-baseline p-2">
-            <div>
+              <h6>ตึก 1</h6>
-              <p class="text-start mt-4">
+              <div class="d-flex">
-                <MaterialButton
+                <MaterialCheckbox
-                  variant="outline"
+                  id="terms"
                   color="success"
-                  data-bs-toggle="collapse"
+                  :checked="statusfree"
-                  href="#collapseExample"
+                  @change="onChangeEvent('free')"
-                  aria-expanded="false"
-                  aria-controls="collapseExample"
-                  >ตึก1</MaterialButton
                 >
-                <!-- item?.title -->
+                  <a href="javascript:;" class=" font-weight-bolder"> ว่าง</a>
-              </p>
+                </MaterialCheckbox>
-              <div class="collapse show" id="collapseExample" aria-expanded="true">
+                <MaterialCheckbox
-                <div>
+                  id="terms2"
-                  <div class="d-flex justify-content-end">
+                  color="red"
-                    <MaterialCheckbox id="terms" checked>
+                  :checked="statuseunavailable"
-                      <a href="javascript:;" class="text-success font-weight-bolder">
+                  @change="onChangeEvent('unavailable')"
-                        ว่าง</a
+                >
-                      >
+                  <a href="javascript:;" class="font-weight-bolder">
-                    </MaterialCheckbox>
+                    ไม่ว่าง</a
-                    <MaterialCheckbox id="terms" >
+                  >
-                      <a href="javascript:;" class="text-danger font-weight-bolder">
+                </MaterialCheckbox>
-                        ไม่ว่าง</a
+                <MaterialCheckbox
-                      >
+                  id="terms3"
-                    </MaterialCheckbox>
+                  color="warning"
-                    <MaterialCheckbox id="terms" >
+                  :checked="statusewaiting"
-                      <a href="javascript:;" class=" font-weight-bolder" style="color: #fb8c00">
+                  @change="onChangeEvent('waiting')"
-                        รอซ่อม</a
+                >
-                      >
+                  <a
-                    </MaterialCheckbox>
+                    href="javascript:;"
-                    <MaterialCheckbox id="terms" >
+                    class="font-weight-bolder"
-                      <a href="javascript:;" class="font-weight-bolder" style="color: #ffca28">
+                  >
-                        รอคืนห้อง</a
+                    รอซ่อม</a
-                      >
+                  >
-                    </MaterialCheckbox>
+                </MaterialCheckbox>
-                  </div>
+                <MaterialCheckbox
-                  <div class="row row-cols-auto" :style="{ '--bs-gutter-x': '0.5rem' }">
+                  id="terms4"
-                    <div class="col" v-for="(item, index) in roomData" :key="index">
+                  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="row row-cols-auto"
-                        :class="{
+                        :style="{ '--bs-gutter-x': '0.5rem' }"
-                          '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">
+                        <div class="col" v-for="(item, index) in roomData" :key="index">
-                          <p class="card-title">
+                          <div
-                            <a
+                            class="card mb-2"
-                              style="cursor: pointer"
+                            :class="{
-                              @click="gotodetail(item?.dataIndex, item?.status)"
+                              'bg-red': item?.status == 'unavailable',
-                              class="text-white"
+                              'bg-green': item?.status == 'free',
-                              >{{ item?.title }}</a
+                              'bg-warning': item?.status == 'waiting',
-                            >
+                              'bg-return': item?.status == 'return',
-                          </p>
+                            }"
+                            :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>

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
+                            <label>ประเภทห้องพัก</label>
-                              :value="idcard"
+                            <v-select
-                              @input="(event) => (idcard = event.target.value)"
+                              :options="optionsRoomtype"
-                              class="input-group-static"
+                              v-model="selectedRoomtype"
-                              label="ค่าน้ำประปา"
+                            ></v-select>
-                              type="number"
-                              placeholder="ค่าน้ำประปา"
-                            />
                           </div>
+
                           <div class="mb-3">
                             <MaterialInput
-                              :value="phone"
+                              :value="Roomconditions"
-                              @input="(event) => (phone = event.target.value)"
+                              @input="(event) => (Roomconditions = event.target.value)"
                               class="input-group-static"
-                              label="ค่าไฟฟ้า"
+                              label="สภาพห้อง"
-                              type="number"
+                              type="text"
-                              placeholder="ค่าไฟฟ้า"
+                              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>
+                    <div class="text-center" style="margin-right: 100px">
-                    </p> -->
-                    <div class="text-center">
                       <MaterialButton variant="gradient" color="success"
                         >บันทึก</MaterialButton
                       >
@@ -327,4 +351,7 @@ export default {
   background: #d1d3d5 !important;
   color: #fff;
 }
+.vs__actions {
+  cursor: pointer;
+}
 </style>

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">
+          <div class="d-flex justify-content-end align-items-baseline">
-                <MaterialInput
+            <label style="margin-right: 10px">ค้นหาพื้นที่หรือตึก </label>
-                  class="input-group-dynamic w-30 "
+            <MaterialInput
-                  icon="search"
+              class="input-group-dynamic w-30"
-                  type="text"
+              icon="search"
-                  placeholder="Search"
+              type="text"
-                />
+              placeholder="Search"
-                <MaterialButton
+            />
-                style="margin-left: 20px;"
+            <MaterialButton
-                variant="gradient"
+              style="margin-left: 20px"
-                color="success"
+              variant="gradient"
-                data-bs-toggle="modal"
+              color="success"
-                data-bs-target="#Addroomplan"
+              data-bs-toggle="modal"
-                >สร้างผังห้อง</MaterialButton
+              data-bs-target="#Addroomplan"
-              >
+              >สร้างผังห้อง</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>
                 </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">

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"

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>
-            <div>
+            <Breadcrumbs
-              <Breadcrumbs
+              :routes="[{ label: 'หน้าหลัก', route: '/' }, { label: 'ทะเบียน' }]"
-                :routes="[{ label: 'หน้าหลัก', route: '/' }, { label: 'ทะเบียน' }]"
+            />
-              />
+          </div>
-            </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>

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