update funtion

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"
+    }
+  ]
+}

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

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

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
+      }
+]

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"
+    }
+  ]
+}

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", VueSelect)
-
-app.component('v-select', vSelect)
 app.use(createPinia());
 app.use(router);
-app.use(materialKit);
+app.use(materialKit)
 app.mount("#app");

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>
+  <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>
+          <h4>รายละเอียดห้องพัก</h4>
           <div class="row pt-4">
-          <div class="card mb-3" style="max-width: 540px">
+            <div class="card mb-3">
               <div class="row g-0">
                 <div class="col-md-4">
-                <img src="../../assets/img/team-4.jpg" class="img-fluid rounded-start" alt="..." />
+                  <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>
-                  <p class="card-text">
+                  
-                    ชือ : มานะ
+                    <div class="row">
-                  </p>
+                      <div class="col-4">
-                  <p class="card-text">
+                        <p class="card-text">ชือ : มานะ</p>
-                    นามสกุล : ถือดี
+                        <p class="card-text">สถานะห้อง : ไม่ว่าง</p>
-                  </p>
+                        <p class="card-text">ยศ : ร้อยตรี</p>
-                  <p class="card-text">
+                        <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>
+                    </p> -->
+                  </div>
                 </div>
               </div>
             </div>

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,28 +122,47 @@ export default {
         { label: "Laravel", value: "PHP" },
         { label: "Phoenix", value: "Elixir" },
       ],
-      selectedColor: '',
+      selectedColor: "",
     };
   },
-  watch: {
+  created() {
-                selectedColor: function (newValue) {
+ 
-                    // this.updateColor(newValue)
-                    console.log(newValue);
-                },
   },
   methods: {
     changedLabel(event) {
       console.log(event);
+    
       // this.selected = event;
-    }
+    },
   },
 };
 </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">
           <!-- 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">
@@ -198,10 +226,13 @@ export default {
               <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="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 }"
+                        v-bind:class="{
+                          'bg-red': item?.status,
+                          'bg-green': !item?.status,
+                        }"
                         :style="{ width: `110px` }"
                       >
                         <div class="card-body">
@@ -264,7 +295,7 @@ export default {
           </div>
         </div>
       </div>
-
+    </div>
     <!-- Modal -->
     <div
       class="modal fade"

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,11 +103,45 @@ const landingColumns = [
 ];
 </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>
+          <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">
@@ -173,7 +209,10 @@ const landingColumns = [
                     <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 }"
+                        v-bind:class="{
+                          'bg-red': item?.status,
+                          'bg-green': !item?.status,
+                        }"
                         :style="{ width: `110px` }"
                       >
                         <div class="card-body">
@@ -201,6 +240,7 @@ const landingColumns = [
           </div>
         </div>
       </div>
+    </div>
   </section>
 </template>
 <style>

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,12 +134,38 @@ export default {
 };
 </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 class="text-end">
+          <div class="d-flex justify-content-between">
-          <MaterialButton variant="gradient" color="success">เพิ่มสมาชิก</MaterialButton>
+            <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>
@@ -166,6 +195,7 @@ export default {
           </div>
         </div>
       </div>
+    </div>
   </section>
 </template>
 <style>

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,
+    firstName: "สมชัย",
-  },
+    lastName: "แสงสุข",
-  {
+    Affiliation: "กก", //สังกัด
-    title: "ห้อง 3",
+    rank: "ร้อยตรี", //ยศ
-    dataIndex: "3",
+    idcard: "134044411441178",
-    status: true,
+    phone: "0325647845"
-  },
+  }
-  {
-    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,
-  },
 ];
 
 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,45 +90,195 @@ 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>
+  <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 class="text-end">
+          <div class="d-flex justify-content-between">
-          <MaterialButton variant="gradient" color="success">เพิ่มสมาชิก</MaterialButton>
+            <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-striped table-bordered table-hover">
+            <table class="table table-hover border border-2 border-success">
-            <thead>
+              <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>
+                <tr v-for="(item, index) in userlist" :key="index">
-                <th scope="row">1</th>
+                  <th scope="row">{{ index+1 }}</th>
-                <td>Mark</td>
+                  <td>{{ item.firstName }}</td>
-                <td>Otto</td>
+                  <td>{{ item.lastName }}</td>
-                <td>@mdo</td>
+                  <td>{{ item.Affiliation }}</td>
-              </tr>
+                  <td>{{ item.rank }}</td>
-              <tr>
+                  <td>{{ item.idcard }}</td>
-                <th scope="row">2</th>
+                  <td>{{ item.phone }}</td>
-                <td>Jacob</td>
-                <td>Thornton</td>
-                <td>@fat</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>
   </section>
 </template>
 <style>
@@ -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>

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>
+    <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 class="d-flex justify-content-between">
+          <div>
+            <Breadcrumbs
+              :routes="[{ label: 'หน้าหลัก', route: '/' }, { label: 'ค่าสาธารณุปโภค' }]"
+            />
+          </div>
           <div class="text-end">
-          <MaterialButton variant="gradient" color="success">เพิ่มสมาชิก</MaterialButton>
+            <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>