From e6a93a3be9c807d4919e11b6aad79e153757727f Mon Sep 17 00:00:00 2001
From: kamoa457 <kamoa457@cubes.postbox.in.th>
Date: Fri, 20 Oct 2023 01:48:04 +0700
Subject: [PATCH] update function

---
 src/router/index.js                      |   6 +
 src/views/Restroom/AddRoom.vue           | 282 +++++++++++++++
 src/views/Restroom/RoomView.vue          |  17 +-
 src/views/Restroom/UpdateRoom.vue        | 275 +++++++++------
 src/views/RoomLayout/RoomLayoutView.vue  | 107 +++++-
 src/views/UtilitiesRoom/UtilitieView.vue | 426 ++++++++++++++++++++---
 6 files changed, 949 insertions(+), 164 deletions(-)
 create mode 100644 src/views/Restroom/AddRoom.vue

diff --git a/src/router/index.js b/src/router/index.js
index 59ba790..9e552d6 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -29,6 +29,7 @@ import UpdateRoom from "../views/Restroom/UpdateRoom.vue"
 import UserlistView from "../views/Users/UserlistView.vue"
 import RoomLayoutView from "../views/RoomLayout/RoomLayoutView.vue"
 import UtilitiesRoom from "../views/UtilitiesRoom/UtilitieView.vue"
+import addUserRoom from "../views/Restroom/AddRoom.vue"
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
   routes: [
@@ -52,6 +53,11 @@ const router = createRouter({
       name: "layout", 
       component: RoomLayoutView,
     },
+    {
+      path: "/addUserRoom",
+      name: "addUserRoom", 
+      component: addUserRoom,
+    },
     {
       path: "/utilities",
       name: "utilities", 
diff --git a/src/views/Restroom/AddRoom.vue b/src/views/Restroom/AddRoom.vue
new file mode 100644
index 0000000..afe18fa
--- /dev/null
+++ b/src/views/Restroom/AddRoom.vue
@@ -0,0 +1,282 @@
+<script>
+import { onMounted } from "vue";
+
+//image
+import image from "@/assets/img/illustrations/illustration-signin.jpg";
+import vueMkHeader from "@/assets/img/bg.jpg";
+//material components
+import MaterialInput from "@/components/MaterialInput.vue";
+import Breadcrumbs from "@/examples/Breadcrumbs.vue";
+
+import MaterialButton from "@/components/MaterialButton.vue";
+// material-input
+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: "ร้อยตรี", //ยศ
+    idcard: "134044411441122",
+    phone: "0325647846",
+  },
+  {
+    dataIndex: "2",
+    firstName: "สมชัย",
+    lastName: "แสงสุข",
+    Affiliation: "กก", //สังกัด
+    rank: "ร้อยตรี", //ยศ
+    idcard: "134044411441178",
+    phone: "0325647845",
+  },
+];
+
+export default {
+  components: {
+    MaterialInput,
+    MaterialButton,
+    Breadcrumbs,
+  },
+  setup() {
+    return {
+      listRoom,
+      NoRoom,
+      vueMkHeader,
+      userlist,
+    };
+  },
+
+  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: "",
+      old: "",
+      birthday: "",
+    };
+  },
+  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: 'สถานะห้องพัก', route: '/room' },
+                { label: 'แก้ไขรายละเอียดห้อง' },
+              ]"
+            />
+          </div>
+          <!-- d-flex justify-content-between -->
+          <h4>เพิ่มผู้เช่าห้องพัก</h4>
+
+          <div class="row pt-4">
+            <div class="card mb-3">
+              <h5>ลำดับคิว</h5>
+              <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>
+                    </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.Affiliation }}</td>
+                      <td>{{ item.rank }}</td>
+                      <td>{{ item.idcard }}</td>
+                      <td>{{ item.phone }}</td>
+                      <td>
+                        <MaterialButton
+                          variant="gradient"
+                          color="success"
+                          data-bs-toggle="modal"
+                          data-bs-target="#contractBackdrop"
+                          >เพิ่มรายละเอียดสัญญา</MaterialButton
+                        >
+                      </td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+      <!-- modal -->
+      <div
+      class="modal fade"
+      id="contractBackdrop"
+      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">
+                <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 class="mb-3">
+                <MaterialInput
+                  :value="insurance"
+                  @input="(event) => (Affiliation = 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>
+            <button
+              type="submit"
+              class="btn btn-primary"
+              @click="submitForm"
+              html-type="submit"
+            >
+              บันทึก
+            </button>
+          </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;
+}
+</style>
diff --git a/src/views/Restroom/RoomView.vue b/src/views/Restroom/RoomView.vue
index cb4efce..bd5b898 100644
--- a/src/views/Restroom/RoomView.vue
+++ b/src/views/Restroom/RoomView.vue
@@ -211,7 +211,8 @@ export default {
           </div>
 
           <div class="text-center pt-4">
-            <div v-for="(item, index) in NoRoom" :key="index">
+            <!-- v-for="(item, index) in NoRoom" :key="index" -->
+            <div >
               <p class="text-start mt-4">
                 <MaterialButton
                   variant="outline"
@@ -220,8 +221,9 @@ export default {
                   href="#collapseExample"
                   aria-expanded="false"
                   aria-controls="collapseExample"
-                  >{{ item?.title }}</MaterialButton
+                  >ตึก1</MaterialButton
                 >
+                <!-- item?.title -->
               </p>
               <div class="collapse show" id="collapseExample" aria-expanded="true">
                 <div>
@@ -262,10 +264,11 @@ export default {
                                 add
                               </span>
                             </a>
+                            <!-- data-bs-toggle="modal"
+                              data-bs-target="#staticBackdrop" -->
                             <a
+                              :href="`/addUserRoom`"
                               style="cursor: pointer"
-                              data-bs-toggle="modal"
-                              data-bs-target="#staticBackdrop"
                               v-if="!item?.status"
                               class="card-link"
                             >
@@ -280,10 +283,16 @@ export default {
                           </div>
                           <p class="card-title">
                             <a
+                               v-if="item?.status"
                               :href="`/room/detail/${item?.dataIndex}`"
                               class="text-white"
                               >{{ item?.title }}</a
                             >
+                            <a
+                            v-if="!item?.status"
+                              class="text-white"
+                              >{{ item?.title }}</a
+                            >
                           </p>
                         </div>
                       </div>
diff --git a/src/views/Restroom/UpdateRoom.vue b/src/views/Restroom/UpdateRoom.vue
index 9c97510..b434b44 100644
--- a/src/views/Restroom/UpdateRoom.vue
+++ b/src/views/Restroom/UpdateRoom.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script>
 import { onMounted } from "vue";
 
 //image
@@ -11,9 +11,9 @@ import Breadcrumbs from "@/examples/Breadcrumbs.vue";
 import MaterialButton from "@/components/MaterialButton.vue";
 // material-input
 import setMaterialInput from "@/assets/js/material-input";
-onMounted(() => {
-  setMaterialInput();
-});
+// onMounted(() => {
+//   setMaterialInput();
+// });
 const listRoom = [
   { title: "ตึก 1" },
   { title: "ตึก 2" },
@@ -101,6 +101,70 @@ const landingColumns = [
     status: false,
   },
 ];
+export default {
+  components: {
+    MaterialInput,
+    MaterialButton,
+    Breadcrumbs,
+  },
+  setup() {
+    return {
+      listRoom,
+      NoRoom,
+      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: "1234",
+      phone: "2023654888",
+      old: "30",
+      birthday: "12/11/2536",
+    };
+  },
+  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>
@@ -133,105 +197,118 @@ const landingColumns = [
           </div>
           <!-- d-flex justify-content-between -->
           <h4>แก้ไขรายละเอียดห้อง</h4>
-          <div class="text-end">
-            <MaterialButton
-              variant="gradient"
-              color="success"
-              data-bs-toggle="modal"
-              data-bs-target="#userBackdrop"
-              >เพิ่มรายละเอียดสัญญา</MaterialButton
-            >
-          </div>
           <div class="row pt-4">
-            <div class="col-8">
-              <div class="nav-item dropdown dropdown-hover mx-2">
-                <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 class="card mb-3">
+              <div class="row g-0">
+                <div class="col-md-4">
+                  <img
+                    width="300"
+                    src="../../assets/img/team-4.jpg"
+                    class="img-fluid rounded-start"
+                    alt="..."
+                  />
+                </div>
+                <div class="col-md-8">
+                  <div class="card-body">
+                    <h5 class="card-title">รายละเอียดเจ้าของห้อง</h5>
+
+                    <div class="row">
+                      <div class="col-4">
+                        <div>
+                          <div class="mb-3">
+                            <MaterialInput
+                              name="firstName"
+                              :value="firstName"
+                              @input="(event) => (firstName = event.target.value)"
+                              class="input-group-static"
+                              label="ชื่อ"
+                              type="text"
+                              placeholder="ชื่อ"
+                            />
+                          </div>
+                          <div class="mb-3">
+                            <MaterialInput
+                              :value="lastName"
+                              @input="(event) => (lastName = event.target.value)"
+                              class="input-group-static"
+                              label="สกุล"
+                              type="text"
+                              placeholder="สกุล"
+                            />
+                          </div>
+                          <div class="mb-3">
+                            <MaterialInput
+                              :value="Affiliation"
+                              @input="(event) => (Affiliation = event.target.value)"
+                              class="input-group-static"
+                              label="สังกัด"
+                              type="text"
+                              placeholder="สังกัด"
+                            />
+                          </div>
+                          <div class="mb-3">
+                            <MaterialInput
+                              :value="rank"
+                              @input="(event) => (rank = event.target.value)"
+                              class="input-group-static"
+                              label="ยศ"
+                              type="text"
+                              placeholder="ยศ"
+                            />
+                          </div>
+                        </div>
+                      </div>
+                      <div class="col-4">
+                        <div class="mb-3">
+                          <MaterialInput
+                            :value="idcard"
+                            @input="(event) => (idcard = event.target.value)"
+                            class="input-group-static"
+                            label="เลขบัตรประชาชน"
+                            type="number"
+                            placeholder="เลขบัตรประชาชน"
+                          />
+                        </div>
+                        <div class="mb-3">
+                          <MaterialInput
+                            :value="phone"
+                            @input="(event) => (phone = event.target.value)"
+                            class="input-group-static"
+                            label="เบอร์ติดต่อ"
+                            type="number"
+                            placeholder="เบอร์ติดต่อ"
+                          />
+                        </div>
+                        <div class="mb-3">
+                          <MaterialInput
+                            :value="birthday"
+                            @input="(event) => (birthday = event.target.value)"
+                            class="input-group-static"
+                            label="วันเกิด"
+                            type="text"
+                            placeholder="วันเกิด"
+                          />
+                        </div>
+                        <div class="mb-3">
+                          <MaterialInput
+                            :value="old"
+                            @input="(event) => (old = event.target.value)"
+                            class="input-group-static"
+                            label="อายุ"
+                            type="number"
+                            placeholder="อายุ"
+                          />
                         </div>
                       </div>
                     </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div class="col-4">
-              <div>
-                <MaterialInput
-                  class="input-group-dynamic w-100"
-                  icon="search"
-                  type="text"
-                  placeholder="Search"
-                />
-              </div>
-            </div>
-          </div>
-
-          <div class="text-center pt-4">
-            <div v-for="(item, index) in NoRoom" :key="index">
-              <p class="text-start mt-4">
-                <a
-                  class="btn btn-primary"
-                  data-bs-toggle="collapse"
-                  href="#collapseExample"
-                  role="button"
-                  aria-expanded="false"
-                  aria-controls="collapseExample"
-                >
-                  {{ item?.title }}
-                </a>
-              </p>
-              <div class="collapse show" id="collapseExample" aria-expanded="true">
-                <div>
-                  <div class="row row-cols-auto" :style="{ '--bs-gutter-x': '0.5rem' }">
-                    <div class="col" v-for="(item, index) in landingColumns" :key="index">
-                      <div
-                        class="card mb-2"
-                        v-bind:class="{
-                          'bg-red': item?.status,
-                          'bg-green': !item?.status,
-                        }"
-                        :style="{ width: `110px` }"
-                      >
-                        <div class="card-body">
-                          <div
-                            style="
-                              text-align: right;
-                              margin-top: -10px;
-                              margin-right: -10px;
-                            "
-                          >
-                            <a href="#" class="card-link"
-                              ><span class="material-icons" style="color: #fff">
-                                edit
-                              </span></a
-                            >
-                          </div>
-                          <p class="card-title">{{ item?.title }}</p>
-                        </div>
-                      </div>
+                    <!-- <p class="card-text">
+                      <small class="text-muted">Last updated 3 mins ago</small>
+                    </p> -->
+                    <div class="text-center">
+                      <MaterialButton
+                          variant="gradient"
+                          color="success"
+                          >บันทึก</MaterialButton>
                     </div>
                   </div>
                 </div>
diff --git a/src/views/RoomLayout/RoomLayoutView.vue b/src/views/RoomLayout/RoomLayoutView.vue
index 5d44b14..6077d34 100644
--- a/src/views/RoomLayout/RoomLayoutView.vue
+++ b/src/views/RoomLayout/RoomLayoutView.vue
@@ -117,6 +117,9 @@ export default {
         { label: "Phoenix", value: "Elixir" },
       ],
       selectedColor: "",
+      Edifice: "",
+      Building: "",
+      Floors: "",
     };
   },
   watch: {
@@ -160,35 +163,32 @@ export default {
               />
             </div>
             <div class="text-end">
-              <MaterialButton variant="gradient" color="success"
+              <MaterialButton
+                variant="gradient"
+                color="success"
+                data-bs-toggle="modal"
+                data-bs-target="#Addroomplan"
                 >สร้างผังห้อง</MaterialButton
               >
             </div>
           </div>
 
           <div class="text-center pt-4">
-            <table class="table table-striped table-bordered table-hover">
-              <thead>
+            <table class="table table-hover border border-2 border-success">
+              <thead class="border border-2 border-success border-bottom">
                 <tr>
                   <th scope="col">ลำดับ</th>
-                  <th scope="col">ชื่อ</th>
-                  <th scope="col">สกุล</th>
-                  <th scope="col">เพศ</th>
-                  <th scope="col">ยศ</th>
+                  <th scope="col">อาคาร</th>
+                  <th scope="col">ตึก</th>
+                  <th scope="col">จำนวนชั้น</th>
                 </tr>
               </thead>
               <tbody>
                 <tr>
                   <th scope="row">1</th>
-                  <td>Mark</td>
-                  <td>Otto</td>
-                  <td>@mdo</td>
-                </tr>
-                <tr>
-                  <th scope="row">2</th>
-                  <td>Jacob</td>
-                  <td>Thornton</td>
-                  <td>@fat</td>
+                  <td>อาคาร1</td>
+                  <td>ตึก1</td>
+                  <td>3</td>
                 </tr>
               </tbody>
             </table>
@@ -196,6 +196,72 @@ export default {
         </div>
       </div>
     </div>
+
+    <!-- Modal -->
+    <div
+      class="modal fade"
+      id="Addroomplan"
+      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">
+                <MaterialInput
+                  name="Edifice"
+                  :value="Edifice"
+                  @input="(event) => (Edifice = event.target.value)"
+                  class="input-group-static"
+                  label="อาคาร"
+                  type="text"
+                  placeholder="อาคาร"
+                />
+              </div>
+              <div class="mb-3">
+                <MaterialInput
+                  :value="Building"
+                  @input="(event) => (Building = event.target.value)"
+                  class="input-group-static"
+                  label="ตึก"
+                  type="text"
+                  placeholder="ตึก"
+                />
+              </div>
+              <div class="mb-3">
+                <MaterialInput
+                  :value="Floors"
+                  @input="(event) => (Floors = event.target.value)"
+                  class="input-group-static"
+                  label="จำนวนชั้น"
+                  type="number"
+                  placeholder="จำนวนชั้น"
+                />
+              </div>
+            </div>
+          </div>
+          <div class="modal-footer">
+            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
+              ปิดหน้าต่าง
+            </button>
+            <button type="button" class="btn btn-primary">บันทึก</button>
+          </div>
+        </div>
+      </div>
+    </div>
   </section>
 </template>
 <style>
@@ -211,4 +277,13 @@ export default {
   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/UtilitiesRoom/UtilitieView.vue b/src/views/UtilitiesRoom/UtilitieView.vue
index 024597b..deb1e0a 100644
--- a/src/views/UtilitiesRoom/UtilitieView.vue
+++ b/src/views/UtilitiesRoom/UtilitieView.vue
@@ -95,14 +95,14 @@ export default {
   components: {
     MaterialInput,
     MaterialButton,
-    Breadcrumbs
+    Breadcrumbs,
   },
   setup() {
     return {
       listRoom,
       NoRoom,
       landingColumns,
-      vueMkHeader
+      vueMkHeader,
     };
   },
 
@@ -117,6 +117,13 @@ export default {
         { label: "Phoenix", value: "Elixir" },
       ],
       selectedColor: "",
+      fee: "",
+      Waterbill: "",
+      Electricitybill: "",
+      Central: "",
+      Costs: "",
+      Maintenance: "",
+      Insurance: "",
     };
   },
   watch: {
@@ -134,14 +141,16 @@ export default {
 };
 </script>
 <template>
-    <Header>
-    <div class="page-header min-vh-45" :style="`background-image: url(${vueMkHeader})`" loading="lazy">
+  <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>
+            <h1 class="pt-3 mt-n5 me-2 head-text">ค่าสาธารณุปโภค</h1>
           </div>
         </div>
       </div>
@@ -150,50 +159,377 @@ export default {
   <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 class="d-flex justify-content-between">
+        <div class="container">
+          <div class="d-flex justify-content-between">
+            <div>
+              <Breadcrumbs
+                :routes="[{ label: 'หน้าหลัก', route: '/' }, { label: 'ค่าสาธารณุปโภค' }]"
+              />
+            </div>
+          </div>
           <div>
-            <Breadcrumbs
-              :routes="[{ label: 'หน้าหลัก', route: '/' }, { label: 'ค่าสาธารณุปโภค' }]"
-            />
+            <div class="accordion" id="accordionPanelsStayOpenExample">
+              <div class="accordion-item">
+                <h2 class="accordion-header" id="panelsStayOpen-headingOne">
+                  <button
+                    style="text-decoration-line: underline"
+                    class="accordion-button"
+                    type="button"
+                    data-bs-toggle="collapse"
+                    data-bs-target="#panelsStayOpen-collapseOne"
+                    aria-expanded="true"
+                    aria-controls="panelsStayOpen-collapseOne"
+                  >
+                    บันทึกค่าใช้จ่ายบ้านพักส่วนกลาง ตร.
+                  </button>
+                </h2>
+                <div
+                  id="panelsStayOpen-collapseOne"
+                  class="accordion-collapse collapse show"
+                  aria-labelledby="panelsStayOpen-headingOne"
+                >
+                  <div class="accordion-body">
+                    <div class="text-end">
+                      <MaterialButton
+                        variant="gradient"
+                        color="success"
+                        data-bs-toggle="modal"
+                        data-bs-target="#staticBackdrop11"
+                        >เพิ่มค่าใช้จ่ายบ้านพักส่วนกลาง ตร.</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>20,000</td>
+                            <td>8,000</td>
+                            <td>20,000</td>
+                            <td>8,000</td>
+                            <td>20,000</td>
+                          </tr>
+                        </tbody>
+                      </table>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="accordion-item">
+                <h2 class="accordion-header" id="panelsStayOpen-headingTwo">
+                  <button
+                    class="accordion-button collapsed"
+                    style="text-decoration-line: underline"
+                    type="button"
+                    data-bs-toggle="collapse"
+                    data-bs-target="#panelsStayOpen-collapseTwo"
+                    aria-expanded="false"
+                    aria-controls="panelsStayOpen-collapseTwo"
+                  >
+                    บันทึกค่าใช้จ่ายบ้านพักส่วนกลาง บช.ตชด.
+                  </button>
+                </h2>
+                <div
+                  id="panelsStayOpen-collapseTwo"
+                  class="accordion-collapse collapse"
+                  aria-labelledby="panelsStayOpen-headingTwo"
+                >
+                  <div class="accordion-body">
+                    <div class="text-end">
+                      <MaterialButton
+                        variant="gradient"
+                        color="success"
+                        data-bs-toggle="modal"
+                        data-bs-target="#staticBackdrop12"
+                        >เพิ่มค่าใช้จ่ายบ้านพักส่วนกลาง บช.ตชด.</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>
+                          </tr>
+                        </thead>
+                        <tbody>
+                          <tr>
+                            <th scope="row">1</th>
+                            <td>20,000</td>
+                            <td>8,000</td>
+                          </tr>
+                        </tbody>
+                      </table>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="accordion-item">
+                <h2 class="accordion-header" id="panelsStayOpen-headingThree">
+                  <button
+                    class="accordion-button collapsed"
+                    style="text-decoration-line: underline"
+                    type="button"
+                    data-bs-toggle="collapse"
+                    data-bs-target="#panelsStayOpen-collapseThree"
+                    aria-expanded="false"
+                    aria-controls="panelsStayOpen-collapseThree"
+                  >
+                    สรุปรายงานค่าใช้จ่าย
+                  </button>
+                </h2>
+                <div
+                  id="panelsStayOpen-collapseThree"
+                  class="accordion-collapse collapse"
+                  aria-labelledby="panelsStayOpen-headingThree"
+                >
+                  <div class="accordion-body">
+                    <div class="text-end">
+                      <MaterialButton
+                        variant="gradient"
+                        color="success"
+                        data-bs-toggle="modal"
+                        data-bs-target="#staticBackdrop13"
+                        >เพิ่มรายงาน</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>
+                          </tr>
+                        </thead>
+                        <tbody>
+                          <tr>
+                            <th scope="row">1</th>
+                            <td>Mark</td>
+                            <td>Otto</td>
+                            <td>@mdo</td>
+                          </tr>
+                        </tbody>
+                      </table>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
           </div>
-          <div class="text-end">
-            <MaterialButton variant="gradient" color="success"
-              >เพิ่มสมาชิก</MaterialButton
-            >
-          </div>
-        </div>
-        <div class="text-center pt-4">
-          <table class="table table-striped table-bordered table-hover">
-            <thead>
-              <tr>
-                <th scope="col">ลำดับ</th>
-                <th scope="col">ชื่อ</th>
-                <th scope="col">สกุล</th>
-                <th scope="col">เพศ</th>
-                <th scope="col">ยศ</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr>
-                <th scope="row">1</th>
-                <td>Mark</td>
-                <td>Otto</td>
-                <td>@mdo</td>
-              </tr>
-              <tr>
-                <th scope="row">2</th>
-                <td>Jacob</td>
-                <td>Thornton</td>
-                <td>@fat</td>
-              </tr>
-            </tbody>
-          </table>
         </div>
       </div>
     </div>
+
+    <!-- Modal -->
+    <div
+      class="modal fade"
+      id="staticBackdrop11"
+      data-bs-backdrop="static"
+      data-bs-keyboard="false"
+      tabindex="-1"
+      aria-labelledby="staticBackdropLabel"
+      aria-hidden="true"
+    >
+      <div class="modal-dialog modal-dialog-centered">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h5 class="modal-title" id="staticBackdropLabel">บันทึกค่าใช้จ่ายบ้านพักส่วนกลาง ตร.</h5>
+            <button
+              type="button"
+              class="btn-close"
+              data-bs-dismiss="modal"
+              aria-label="Close"
+            ></button>
+          </div>
+          <div class="modal-body">
+            <div>
+              <div class="mb-3">
+                <MaterialInput
+                  name="fee"
+                  :value="fee"
+                  @input="(event) => (fee = event.target.value)"
+                  class="input-group-static"
+                  label="ค่าธรรมเนียม"
+                  type="text"
+                  placeholder="ค่าธรรมเนียม"
+                />
+              </div>
+              <div class="mb-3">
+                <MaterialInput
+                  :value="Waterbill"
+                  @input="(event) => (Waterbill = event.target.value)"
+                  class="input-group-static"
+                  label="ค่าน้ำประปา"
+                  type="text"
+                  placeholder="ค่าน้ำประปา"
+                />
+              </div>
+              <div class="mb-3">
+                <MaterialInput
+                  :value="Electricitybill"
+                  @input="(event) => (Electricitybill = event.target.value)"
+                  class="input-group-static"
+                  label="ค่าไฟฟ้า"
+                  type="text"
+                  placeholder="ค่าไฟฟ้า"
+                />
+              </div>
+              <div class="mb-3">
+                <MaterialInput
+                  :value="Central"
+                  @input="(event) => (Central = event.target.value)"
+                  class="input-group-static"
+                  label="ค่าไฟฟ้าส่วนกลาง"
+                  type="text"
+                  placeholder="ค่าไฟฟ้าส่วนกลาง"
+                />
+              </div>
+              <div class="mb-3">
+                <MaterialInput
+                  :value="Costs"
+                  @input="(event) => (Costs = event.target.value)"
+                  class="input-group-static"
+                  label="ค่าบำรุงลิฟท์"
+                  type="text"
+                  placeholder="ค่าบำรุงลิฟท์"
+                />
+              </div>
+            </div>
+          </div>
+          <div class="modal-footer">
+            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
+              ปิดหน้าต่าง
+            </button>
+            <button type="button" class="btn btn-primary">บันทึก</button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Modal -->
+    <div
+      class="modal fade"
+      id="staticBackdrop12"
+      data-bs-backdrop="static"
+      data-bs-keyboard="false"
+      tabindex="-1"
+      aria-labelledby="staticBackdropLabel"
+      aria-hidden="true"
+    >
+      <div class="modal-dialog modal-dialog-centered">
+        <div class="modal-content">
+          <div class="modal-header">
+            <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">
+                <MaterialInput
+                  name="Maintenance"
+                  :value="Maintenance"
+                  @input="(event) => (Maintenance = event.target.value)"
+                  class="input-group-static"
+                  label="ค่าธรรมเนียม"
+                  type="text"
+                  placeholder="ค่าธรรมเนียม"
+                />
+              </div>
+              <div class="mb-3">
+                <MaterialInput
+                  :value="Insurance"
+                  @input="(event) => (Insurance = event.target.value)"
+                  class="input-group-static"
+                  label="ค่าน้ำประปา"
+                  type="text"
+                  placeholder="ค่าน้ำประปา"
+                />
+              </div>
+            </div>
+          </div>
+          <div class="modal-footer">
+            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
+              ปิดหน้าต่าง
+            </button>
+            <button type="button" class="btn btn-primary">บันทึก</button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Modal -->
+    <div
+      class="modal fade"
+      id="staticBackdrop13"
+      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">
+                <MaterialInput
+                  name="Maintenance"
+                  :value="Maintenance"
+                  @input="(event) => (Maintenance = event.target.value)"
+                  class="input-group-static"
+                  label="ค่าธรรมเนียม"
+                  type="text"
+                  placeholder="ค่าธรรมเนียม"
+                />
+              </div>
+              <div class="mb-3">
+                <MaterialInput
+                  :value="Insurance"
+                  @input="(event) => (Insurance = event.target.value)"
+                  class="input-group-static"
+                  label="ค่าน้ำประปา"
+                  type="text"
+                  placeholder="ค่าน้ำประปา"
+                />
+              </div>
+            </div>
+          </div>
+          <div class="modal-footer">
+            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
+              ปิดหน้าต่าง
+            </button>
+            <button type="button" class="btn btn-primary">บันทึก</button>
+          </div>
+        </div>
+      </div>
     </div>
-    
   </section>
 </template>
 <style>