From 69ce010b7b65541d70d70c9c58a7656a2b4690a1 Mon Sep 17 00:00:00 2001
From: kamoa457 <kamoa457@cubes.postbox.in.th>
Date: Thu, 19 Oct 2023 02:38:44 +0700
Subject: [PATCH] update funtion

---
 db.json                                  |  19 ++
 package.json                             |   7 +-
 src/App.vue                              |   4 +-
 src/assets/dataJson/rooms.json           |  67 +++++
 src/assets/dataJson/users.json           |   0
 src/data.json                            |  19 ++
 src/main.js                              |  10 +-
 src/views/Restroom/DetailRoomPage.vue    |  93 +++++--
 src/views/Restroom/RoomView.vue          | 265 +++++++++++---------
 src/views/Restroom/UpdateRoom.vue        | 198 +++++++++------
 src/views/RoomLayout/RoomLayoutView.vue  |  92 ++++---
 src/views/Users/UserlistView.vue         | 306 ++++++++++++++++-------
 src/views/UtilitiesRoom/UtilitieView.vue |  38 ++-
 13 files changed, 762 insertions(+), 356 deletions(-)
 create mode 100644 db.json
 create mode 100644 src/assets/dataJson/rooms.json
 create mode 100644 src/assets/dataJson/users.json
 create mode 100644 src/data.json

diff --git a/db.json b/db.json
new file mode 100644
index 0000000..d327a5a
--- /dev/null
+++ b/db.json
@@ -0,0 +1,19 @@
+{
+  "books": [
+    {
+      "id": 1,
+      "title": "The Brothers Karamazov",
+      "author": "Fyodor Dostoevsky"
+    },
+    {
+      "id": 2,
+      "title": "Infinite Jest",
+      "author": "David Foster Wallace"
+    },
+    {
+      "id": 3,
+      "title": "Suttree",
+      "author": "Cormac McCarthy"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/package.json b/package.json
index 79e21c0..32c93e4 100644
--- a/package.json
+++ b/package.json
@@ -2,6 +2,7 @@
   "name": "vue-material-kit-2",
   "version": "2.0.0",
   "scripts": {
+    "db:serve": " json-server --watch db.json --port=3002",
     "dev": "vite",
     "build": "vite build",
     "preview": "vite preview --port 4173",
@@ -10,6 +11,7 @@
   "dependencies": {
     "@popperjs/core": "2.11.5",
     "@trevoreyre/autocomplete-vue": "^2.4.1",
+    "axios": "^1.5.1",
     "bootstrap": "5.1.3",
     "pinia": "2.0.14",
     "prismjs": "1.28.0",
@@ -18,7 +20,8 @@
     "vue-clipboard3": "2.0.0",
     "vue-count-to": "1.0.13",
     "vue-prism-editor": "2.0.0-alpha.2",
-    "vue-router": "4.0.15"
+    "vue-router": "4.0.15",
+    "vue-select": "^4.0.0-beta.6"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "1.1.0",
@@ -29,6 +32,6 @@
     "prettier": "2.5.1",
     "sass": "1.52.3",
     "sass-loader": "13.0.0",
-    "vite": "2.9.9"
+    "vite": "^2.9.16"
   }
 }
diff --git a/src/App.vue b/src/App.vue
index c22554b..96697c6 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -14,8 +14,10 @@ Coded by www.creative-tim.com
 * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
 */
 import { RouterView } from "vue-router";
-import 'vue-select/dist/vue-select.css';
 </script>
+<style>
+@import "vue-select/dist/vue-select.css";
+</style>
 
 <template>
   <router-view />
diff --git a/src/assets/dataJson/rooms.json b/src/assets/dataJson/rooms.json
new file mode 100644
index 0000000..9cdd13a
--- /dev/null
+++ b/src/assets/dataJson/rooms.json
@@ -0,0 +1,67 @@
+[
+    {
+        "title": "ห้อง 1",
+        "dataIndex": "1",
+        "status": true
+      },
+      {
+        "title": "ห้อง 2",
+        "dataIndex": "2",
+        "status": false
+      },
+      {
+        "title": "ห้อง 3",
+        "dataIndex": "3",
+        "status": true
+      },
+      {
+        "title": "ห้อง 4",
+        "dataIndex": "4",
+        "status": true
+      },
+      {
+        "title": "ห้อง 5",
+        "dataIndex": "5",
+        "status": false
+      },
+      {
+        "title": "ห้อง 6",
+        "dataIndex": "6",
+        "status": false
+      },
+      {
+        "title": "ห้อง 7",
+        "dataIndex": "7",
+        "status": true
+      },
+      {
+        "title": "ห้อง 8",
+        "dataIndex": "8",
+        "status": false
+      },
+      {
+        "title": "ห้อง 9",
+        "dataIndex": "9",
+        "status": false
+      },
+      {
+        "title": "ห้อง 10",
+        "dataIndex": "10",
+        "status": false
+      },
+      {
+        "title": "ห้อง 11",
+        "dataIndex": "11",
+        "status": true
+      },
+      {
+        "title": "ห้อง 12",
+        "dataIndex": "12",
+        "status": false
+      },
+      {
+        "title": "ห้อง 13",
+        "dataIndex": "13",
+        "status": false
+      }
+]
\ No newline at end of file
diff --git a/src/assets/dataJson/users.json b/src/assets/dataJson/users.json
new file mode 100644
index 0000000..e69de29
diff --git a/src/data.json b/src/data.json
new file mode 100644
index 0000000..d327a5a
--- /dev/null
+++ b/src/data.json
@@ -0,0 +1,19 @@
+{
+  "books": [
+    {
+      "id": 1,
+      "title": "The Brothers Karamazov",
+      "author": "Fyodor Dostoevsky"
+    },
+    {
+      "id": 2,
+      "title": "Infinite Jest",
+      "author": "David Foster Wallace"
+    },
+    {
+      "id": 3,
+      "title": "Suttree",
+      "author": "Cormac McCarthy"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index 6908227..43e6b41 100644
--- a/src/main.js
+++ b/src/main.js
@@ -9,12 +9,12 @@ import "./assets/css/nucleo-icons.css";
 import "./assets/css/nucleo-svg.css";
 
 import materialKit from "./material-kit";
-import vSelect from 'vue-select'
+import  VueSelect  from "vue-select";
+
+
 const app = createApp(App);
-
-
-app.component('v-select', vSelect)
+app.component("v-select", VueSelect)
 app.use(createPinia());
 app.use(router);
-app.use(materialKit);
+app.use(materialKit)
 app.mount("#app");
diff --git a/src/views/Restroom/DetailRoomPage.vue b/src/views/Restroom/DetailRoomPage.vue
index b551068..9a8d928 100644
--- a/src/views/Restroom/DetailRoomPage.vue
+++ b/src/views/Restroom/DetailRoomPage.vue
@@ -3,10 +3,11 @@ 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 MaterialButton from "@/components/MaterialButton.vue";
+import Breadcrumbs from "@/examples/Breadcrumbs.vue";
 // material-input
 import setMaterialInput from "@/assets/js/material-input";
 onMounted(() => {
@@ -101,29 +102,73 @@ const landingColumns = [
 ];
 </script>
 <template>
-  <section>
-    <div class="page-header min-vh-45">
+  <Header>
+    <div
+      class="page-header min-vh-45"
+      :style="`background-image: url(${vueMkHeader})`"
+      loading="lazy"
+    >
       <div class="container">
-        <!-- d-flex justify-content-between -->
-        <h4>รายละเอียดห้อง</h4>
-        <div class="row pt-4">
-          <div class="card mb-3" style="max-width: 540px">
-            <div class="row g-0">
-              <div class="col-md-4">
-                <img 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>
-                  <p class="card-text">
-                    ชือ : มานะ
-                  </p>
-                  <p class="card-text">
-                    นามสกุล : ถือดี
-                  </p>
-                  <p class="card-text">
-                    <small class="text-muted">Last updated 3 mins ago</small>
-                  </p>
+        <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">
+              <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">
+                        <p class="card-text">ชือ : มานะ</p>
+                        <p class="card-text">สถานะห้อง : ไม่ว่าง</p>
+                        <p class="card-text">ยศ : ร้อยตรี</p>
+                        <p class="card-text">วันเกิด : 12/02/2514</p>
+                        <p class="card-text">วันทำสัญญา : 12/02/2564</p>
+                        <p class="card-text">อายุ : 33 ปี</p>
+                        <p class="card-text">ระยะเวลาที่เข้าพัก : 3 เดือน</p>
+                      </div>
+                      <div class="col-4">
+                        <p class="card-text">นามสกุล : ถือดี</p>
+                        <p class="card-text">สังกัด : กก</p>
+                        <p class="card-text">เลขบัตรประชาชน : 123456123456</p>
+                        <p class="card-text">เบอร์โทร : 0972534887</p>
+                        <p class="card-text">เงินค่าประกัน : 12,000</p>
+                      </div>
+                    </div>
+                    <!-- <p class="card-text">
+                      <small class="text-muted">Last updated 3 mins ago</small>
+                    </p> -->
+                  </div>
                 </div>
               </div>
             </div>
diff --git a/src/views/Restroom/RoomView.vue b/src/views/Restroom/RoomView.vue
index e28b62e..cb4efce 100644
--- a/src/views/Restroom/RoomView.vue
+++ b/src/views/Restroom/RoomView.vue
@@ -1,7 +1,13 @@
 <script>
 import MaterialInput from "@/components/MaterialInput.vue";
 import MaterialButton from "@/components/MaterialButton.vue";
+import vueMkHeader from "@/assets/img/bg.jpg";
+import Breadcrumbs from "@/examples/Breadcrumbs.vue";
+import 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" },
@@ -94,12 +100,15 @@ export default {
   components: {
     MaterialInput,
     MaterialButton,
+    Breadcrumbs,
   },
   setup() {
     return {
       listRoom,
       NoRoom,
       landingColumns,
+      vueMkHeader,
+      roomData,
     };
   },
 
@@ -113,147 +122,170 @@ export default {
         { label: "Laravel", value: "PHP" },
         { label: "Phoenix", value: "Elixir" },
       ],
-      selectedColor: '',
+      selectedColor: "",
     };
   },
-  watch: {
-                selectedColor: function (newValue) {
-                    // this.updateColor(newValue)
-                    console.log(newValue);
-                },
-            },
+  created() {
+ 
+  },
   methods: {
     changedLabel(event) {
       console.log(event);
+    
       // this.selected = event;
-    }
+    },
   },
 };
 </script>
 <template>
-  <section>
-    <div class="page-header min-vh-45">
+  <Header>
+    <div
+      class="page-header min-vh-45"
+      :style="`background-image: url(${vueMkHeader})`"
+      loading="lazy"
+    >
       <div class="container">
-        <!-- d-flex justify-content-between -->
-        <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="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">
+          <!-- d-flex justify-content-between -->
+          <div>
+            <Breadcrumbs
+              :routes="[{ label: 'หน้าหลัก', route: '/' }, { label: 'สถานะห้องพัก' }]"
+            />
+          </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>
                       </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 class="col-4">
+              <div>
+                <MaterialInput
+                  class="input-group-dynamic w-100"
+                  icon="search"
+                  type="text"
+                  placeholder="Search"
+                />
+              </div>
             </div>
           </div>
-        </div>
 
-        <div class="text-center pt-4">
-          <div v-for="(item, index) in NoRoom" :key="index">
-            <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
-              >
-            </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
-                            v-if="item?.status"
-                            :href="`/room/update/${item?.dataIndex}`"
-                            class="card-link"
-                            ><span
+          <div class="text-center pt-4">
+            <div v-for="(item, index) in NoRoom" :key="index">
+              <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
+                >
+              </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 roomData" :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
                               v-if="item?.status"
-                              class="material-icons"
-                              style="color: #fff"
-                            >
-                              edit
-                            </span>
-                            <span
+                              :href="`/room/update/${item?.dataIndex}`"
+                              class="card-link"
+                              ><span
+                                v-if="item?.status"
+                                class="material-icons"
+                                style="color: #fff"
+                              >
+                                edit
+                              </span>
+                              <span
+                                v-if="!item?.status"
+                                class="material-icons"
+                                style="color: #fff"
+                              >
+                                add
+                              </span>
+                            </a>
+                            <a
+                              style="cursor: pointer"
+                              data-bs-toggle="modal"
+                              data-bs-target="#staticBackdrop"
                               v-if="!item?.status"
-                              class="material-icons"
-                              style="color: #fff"
+                              class="card-link"
                             >
-                              add
-                            </span>
-                          </a>
-                          <a
-                            style="cursor: pointer"
-                            data-bs-toggle="modal"
-                            data-bs-target="#staticBackdrop"
-                            v-if="!item?.status"
-                            class="card-link"
-                          >
-                            <span
-                              v-if="!item?.status"
-                              class="material-icons"
-                              style="color: #fff"
+                              <span
+                                v-if="!item?.status"
+                                class="material-icons"
+                                style="color: #fff"
+                              >
+                                add
+                              </span>
+                            </a>
+                          </div>
+                          <p class="card-title">
+                            <a
+                              :href="`/room/detail/${item?.dataIndex}`"
+                              class="text-white"
+                              >{{ item?.title }}</a
                             >
-                              add
-                            </span>
-                          </a>
+                          </p>
                         </div>
-                        <p class="card-title">
-                          <a
-                            :href="`/room/detail/${item?.dataIndex}`"
-                            class="text-white"
-                            >{{ item?.title }}</a
-                          >
-                        </p>
                       </div>
                     </div>
                   </div>
@@ -264,7 +296,6 @@ export default {
         </div>
       </div>
     </div>
-
     <!-- Modal -->
     <div
       class="modal fade"
diff --git a/src/views/Restroom/UpdateRoom.vue b/src/views/Restroom/UpdateRoom.vue
index 6615c28..9c97510 100644
--- a/src/views/Restroom/UpdateRoom.vue
+++ b/src/views/Restroom/UpdateRoom.vue
@@ -3,10 +3,12 @@ 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
 import setMaterialInput from "@/assets/js/material-input";
 onMounted(() => {
@@ -101,96 +103,134 @@ const landingColumns = [
 ];
 </script>
 <template>
-  <section>
-    <div class="page-header min-vh-45">
+  <Header>
+    <div
+      class="page-header min-vh-45"
+      :style="`background-image: url(${vueMkHeader})`"
+      loading="lazy"
+    >
       <div class="container">
-        <!-- d-flex justify-content-between -->
-        <h4>แก้รายละเอียดห้อง</h4>
-        <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="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="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>
                       </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 class="col-4">
+              <div>
+                <MaterialInput
+                  class="input-group-dynamic w-100"
+                  icon="search"
+                  type="text"
+                  placeholder="Search"
+                />
+              </div>
             </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 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>
-                        <p class="card-title">{{ item?.title }}</p>
                       </div>
                     </div>
                   </div>
diff --git a/src/views/RoomLayout/RoomLayoutView.vue b/src/views/RoomLayout/RoomLayoutView.vue
index 0e4287f..5d44b14 100644
--- a/src/views/RoomLayout/RoomLayoutView.vue
+++ b/src/views/RoomLayout/RoomLayoutView.vue
@@ -1,7 +1,8 @@
 <script>
 import MaterialInput from "@/components/MaterialInput.vue";
 import MaterialButton from "@/components/MaterialButton.vue";
-
+import vueMkHeader from "@/assets/img/bg.jpg";
+import Breadcrumbs from "@/examples/Breadcrumbs.vue";
 const listRoom = [
   { title: "ตึก 1" },
   { title: "ตึก 2" },
@@ -94,12 +95,14 @@ export default {
   components: {
     MaterialInput,
     MaterialButton,
+    Breadcrumbs,
   },
   setup() {
     return {
       listRoom,
       NoRoom,
       landingColumns,
+      vueMkHeader,
     };
   },
 
@@ -131,38 +134,65 @@ export default {
 };
 </script>
 <template>
-  <section>
-    <div class="page-header min-vh-45">
+  <Header>
+    <div
+      class="page-header min-vh-45"
+      :style="`background-image: url(${vueMkHeader})`"
+      loading="lazy"
+    >
       <div class="container">
-        <div class="text-end">
-          <MaterialButton variant="gradient" color="success">เพิ่มสมาชิก</MaterialButton>
+        <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 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>
+  </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 class="d-flex justify-content-between">
+            <div>
+              <Breadcrumbs
+                :routes="[{ label: 'หน้าหลัก', route: '/' }, { label: 'ผังห้องพัก' }]"
+              />
+            </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>
     </div>
diff --git a/src/views/Users/UserlistView.vue b/src/views/Users/UserlistView.vue
index 0e4287f..aa67b56 100644
--- a/src/views/Users/UserlistView.vue
+++ b/src/views/Users/UserlistView.vue
@@ -1,6 +1,8 @@
 <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" },
@@ -22,84 +24,39 @@ const NoRoom = [
   { title: "ชั้น 7" },
 ];
 
-const landingColumns = [
+const userlist = [
   {
-    title: "ห้อง 1",
     dataIndex: "1",
-    status: true,
+    firstName: "สมชาย",
+    lastName: "แสงทอง",
+    Affiliation: "บก", //สังกัด
+    rank: "ร้อยตรี", //ยศ
+    idcard: "134044411441122",
+    phone: "0325647846"
   },
   {
-    title: "ห้อง 2",
     dataIndex: "2",
-    status: false,
-  },
-  {
-    title: "ห้อง 3",
-    dataIndex: "3",
-    status: true,
-  },
-  {
-    title: "ห้อง 4",
-    dataIndex: "4",
-    status: true,
-  },
-  {
-    title: "ห้อง 5",
-    dataIndex: "5",
-    status: false,
-  },
-  {
-    title: "ห้อง 6",
-    dataIndex: "6",
-    status: false,
-  },
-  {
-    title: "ห้อง 7",
-    dataIndex: "7",
-    status: true,
-  },
-  {
-    title: "ห้อง 8",
-    dataIndex: "8",
-    status: false,
-  },
-  {
-    title: "ห้อง 9",
-    dataIndex: "9",
-    status: false,
-  },
-  {
-    title: "ห้อง 10",
-    dataIndex: "10",
-    status: false,
-  },
-  {
-    title: "ห้อง 11",
-    dataIndex: "11",
-    status: true,
-  },
-  {
-    title: "ห้อง 12",
-    dataIndex: "12",
-    status: false,
-  },
-  {
-    title: "ห้อง 13",
-    dataIndex: "13",
-    status: false,
-  },
+    firstName: "สมชัย",
+    lastName: "แสงสุข",
+    Affiliation: "กก", //สังกัด
+    rank: "ร้อยตรี", //ยศ
+    idcard: "134044411441178",
+    phone: "0325647845"
+  }
 ];
 
 export default {
   components: {
     MaterialInput,
     MaterialButton,
+    Breadcrumbs,
   },
   setup() {
     return {
       listRoom,
       NoRoom,
-      landingColumns,
+      userlist,
+      vueMkHeader,
     };
   },
 
@@ -114,6 +71,12 @@ export default {
         { label: "Phoenix", value: "Elixir" },
       ],
       selectedColor: "",
+      firstName: "",
+      lastName: "",
+      Affiliation: "", //สังกัด
+      rank: "", //ยศ
+      idcard: "",
+      phone: "",
     };
   },
   watch: {
@@ -127,42 +90,192 @@ export default {
       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>
-  <section>
-    <div class="page-header min-vh-45">
+  <Header>
+    <div
+      class="page-header min-vh-45"
+      :style="`background-image: url(${vueMkHeader})`"
+      loading="lazy"
+    >
       <div class="container">
-        <div class="text-end">
-          <MaterialButton variant="gradient" color="success">เพิ่มสมาชิก</MaterialButton>
+        <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 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>
+  </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 class="d-flex justify-content-between">
+            <div>
+              <Breadcrumbs
+                :routes="[{ label: 'หน้าหลัก', route: '/' }, { label: 'ทะเบียน' }]"
+              />
+            </div>
+            <div class="text-end">
+              <MaterialButton
+                variant="gradient"
+                color="success"
+                data-bs-toggle="modal"
+                data-bs-target="#userBackdrop"
+                >เพิ่มสมาชิก</MaterialButton
+              >
+            </div>
+          </div>
+
+          <div class="text-center pt-4">
+            <table class="table table-hover border border-2 border-success">
+              <thead class="border border-2 border-success border-bottom">
+                <tr>
+                  <th scope="col">ลำดับ</th>
+                  <th scope="col">ชื่อ</th>
+                  <th scope="col">สกุล</th>
+                  <th scope="col">สังกัด</th>
+                  <th scope="col">ยศ</th>
+                  <th scope="col">เลขบัตรประชาชน</th>
+                  <th scope="col">เบอร์ติดต่อ</th>
+                </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>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- modal -->
+    <div
+      class="modal fade"
+      id="userBackdrop"
+      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="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 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>
+          </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>
@@ -181,4 +294,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 0e4287f..024597b 100644
--- a/src/views/UtilitiesRoom/UtilitieView.vue
+++ b/src/views/UtilitiesRoom/UtilitieView.vue
@@ -1,7 +1,8 @@
 <script>
 import MaterialInput from "@/components/MaterialInput.vue";
 import MaterialButton from "@/components/MaterialButton.vue";
-
+import vueMkHeader from "@/assets/img/bg.jpg";
+import Breadcrumbs from "@/examples/Breadcrumbs.vue";
 const listRoom = [
   { title: "ตึก 1" },
   { title: "ตึก 2" },
@@ -94,12 +95,14 @@ export default {
   components: {
     MaterialInput,
     MaterialButton,
+    Breadcrumbs
   },
   setup() {
     return {
       listRoom,
       NoRoom,
       landingColumns,
+      vueMkHeader
     };
   },
 
@@ -131,11 +134,34 @@ export default {
 };
 </script>
 <template>
-  <section>
-    <div class="page-header min-vh-45">
+    <Header>
+    <div class="page-header min-vh-45" :style="`background-image: url(${vueMkHeader})`" loading="lazy">
       <div class="container">
-        <div class="text-end">
-          <MaterialButton variant="gradient" color="success">เพิ่มสมาชิก</MaterialButton>
+        <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 class="d-flex justify-content-between">
+          <div>
+            <Breadcrumbs
+              :routes="[{ label: 'หน้าหลัก', route: '/' }, { label: 'ค่าสาธารณุปโภค' }]"
+            />
+          </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">
@@ -166,6 +192,8 @@ export default {
         </div>
       </div>
     </div>
+    </div>
+    
   </section>
 </template>
 <style>