update all ui

src/router/index.js

@@ -30,6 +30,8 @@ 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"
+import Reports from "../views/Reports/ReportlistView.vue"
+import searchFilter from "../views/SearchAll/SearchView.vue"
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
   routes: [
@@ -63,6 +65,16 @@ const router = createRouter({
       name: "utilities", 
       component: UtilitiesRoom,
     },
+    {
+      path: "/reports",
+      name: "reports", 
+      component: Reports,
+    },
+    {
+      path: "/searchfilter",
+      name: "searchfilter", 
+      component: searchFilter,
+    },
     {
       path: '/room/detail/:id',
       name: 'DetailRoom',

src/views/Presentation/Sections/PresentationInformation.vue

@@ -4,11 +4,11 @@
   <section class="my-4 py-4">
     <div class="container">
         <div class="row">
-            <div class="col-sm-3">
+            <div class="col-sm-2">
                 <div class="card">
                     <div class="card-body text-center">
-                        <h5 class="card-title">ทะเบียน</h5>
+                        <p class="card-title" style="font-weight: bold; color: #000">ทะเบียน</p>
-                        <img src="../../../assets/img/register.png"  alt="title" loading="lazy" class="w-70" />
+                        <img src="../../../assets/img/register.png"  alt="title" loading="lazy" class="w-50" />
                         <RouterLink :to="{ name: 'users' }" class="dropdown-item border-radius-md">
                             <a href="#" class="btn btn-primary mt-4">ทะเบียน</a>
                         </RouterLink>
@@ -16,39 +16,61 @@
                     </div>
                 </div>
             </div>
-            <div class="col-sm-3 mb-3 mb-sm-0">
+            <div class="col-sm-2 mb-3 mb-sm-0">
                 <div class="card">
                     <div class="card-body text-center">
-                        <h5 class="card-title">สถานะห้องพัก</h5>
+                        <p class="card-title" style="font-weight: bold; color: #000">สถานะห้องพัก</p>
-                        <img src="../../../assets/img/status.png" alt="title" loading="lazy" class="w-70" />
+                        <img src="../../../assets/img/status.png" alt="title" loading="lazy" class="w-50" />
                         <RouterLink :to="{ name: 'room' }" class="dropdown-item border-radius-md">
                             <a href="#" class="btn btn-primary mt-4">สถานะห้องพัก</a>
                         </RouterLink>
                     </div>
                 </div>
             </div>
-            <div class="col-sm-3">
+            <div class="col-sm-2">
                 <div class="card">
                     <div class="card-body text-center">
-                        <h5 class="card-title">ผังห้องพัก</h5>
+                        <p class="card-title" style="font-weight: bold; color: #000">ผังห้องพัก</p>
-                        <img src="../../../assets/img/layout.png" alt="title" loading="lazy" class="w-70" />
+                        <img src="../../../assets/img/layout.png" alt="title" loading="lazy" class="w-50" />
                         <RouterLink :to="{ name: 'layout' }" class="dropdown-item border-radius-md">
                           <a href="#" class="btn btn-primary mt-4">ผังห้องพัก</a>
                         </RouterLink>
                     </div>
                 </div>
             </div>
-            <div class="col-sm-3">
+            <div class="col-sm-2">
                 <div class="card">
                     <div class="card-body text-center">
-                        <h5 class="card-title">ค่าสาธารณุปโภค</h5>
+                        <p class="card-title" style="font-weight: bold; color: #000">ค่าสาธารณุปโภค</p>
-                        <img src="../../../assets/img/utilities.png" alt="title" loading="lazy" class="w-70" />
+                        <img src="../../../assets/img/utilities.png" alt="title" loading="lazy" class="w-50" />
                         <RouterLink :to="{ name: 'utilities' }" class="dropdown-item border-radius-md">
                           <a href="#" class="btn btn-primary mt-4">ค่าสาธารณุปโภค</a>
                         </RouterLink>
                     </div>
                 </div>
             </div>
+            <div class="col-sm-2">
+                <div class="card">
+                    <div class="card-body text-center">
+                        <p class="card-title" style="font-weight: bold; color: #000">ระบบค้นหา</p>
+                        <img src="../../../assets/img/seo.png" alt="title" loading="lazy" class="w-50" />
+                        <RouterLink :to="{ name: 'searchfilter' }" class="dropdown-item border-radius-md">
+                          <a href="#" class="btn btn-primary mt-4">ระบบค้นหา</a>
+                        </RouterLink>
+                    </div>
+                </div>
+            </div>
+            <div class="col-sm-2">
+                <div class="card">
+                    <div class="card-body text-center">
+                        <p class="card-title" style="font-weight: bold; color: #000">ระบบเรียกรายงาน</p>
+                        <img src="../../../assets/img/result.png" alt="title" loading="lazy" class="w-50" />
+                        <RouterLink :to="{ name: 'reports' }" class="dropdown-item border-radius-md">
+                          <a href="#" class="btn btn-primary mt-4">ระบบเรียกรายงาน</a>
+                        </RouterLink>
+                    </div>
+                </div>
+            </div>
         </div>
     </div>
 </section>

src/views/Reports/ReportlistView.vue

@@ -0,0 +1,444 @@
+<script>
+import MaterialInput from "@/components/MaterialInput.vue";
+import MaterialButton from "@/components/MaterialButton.vue";
+import Breadcrumbs from "@/examples/Breadcrumbs.vue";
+import vueMkHeader from "@/assets/img/bg.jpg";
+
+const listRoom = [
+  { title: "ตึก 1" },
+  { title: "ตึก 2" },
+  { title: "ตึก 3" },
+  { title: "ตึก 4" },
+  { title: "ตึก 5" },
+  { title: "ตึก 6" },
+  { title: "ตึก 7" },
+];
+
+const NoRoom = [
+  { title: "ชั้น 1" },
+  { title: "ชั้น 2" },
+  { title: "ชั้น 3" },
+  { title: "ชั้น 4" },
+  { title: "ชั้น 5" },
+  { title: "ชั้น 6" },
+  { title: "ชั้น 7" },
+];
+
+const userlist = [
+  {
+    dataIndex: "1",
+    firstName: "สมชาย",
+    lastName: "แสงทอง",
+    Affiliation: "บก", //สังกัด
+    rank: "ร้อยตรี", //ยศ
+    old: "32",
+    birthday: "04/03/2534",
+    idcard: "134044411441122",
+    phone: "0325647846",
+  },
+  {
+    dataIndex: "2",
+    firstName: "สมชัย",
+    lastName: "แสงสุข",
+    Affiliation: "กก", //สังกัด
+    rank: "ร้อยตรี", //ยศ
+    old: "32",
+    birthday: "14/07/2534",
+    idcard: "134044411441178",
+    phone: "0325647845",
+  },
+];
+
+export default {
+  components: {
+    MaterialInput,
+    MaterialButton,
+    Breadcrumbs,
+  },
+  setup() {
+    return {
+      listRoom,
+      NoRoom,
+      userlist,
+      vueMkHeader,
+    };
+  },
+
+  data() {
+    return {
+      value: { name: "Vue.js", language: "JavaScript" },
+      options: [
+        { label: "Vue.js", value: "JavaScript" },
+        { label: "Rails", value: "Ruby" },
+        { label: "Sinatra", value: "Ruby" },
+        { label: "Laravel", value: "PHP" },
+        { label: "Phoenix", value: "Elixir" },
+      ],
+      selectedColor: "",
+      firstName: "",
+      lastName: "",
+      Affiliation: "", //สังกัด
+      rank: "", //ยศ
+      idcard: "",
+      phone: "",
+    };
+  },
+  watch: {
+    selectedColor: function (newValue) {
+      // this.updateColor(newValue)
+      console.log(newValue);
+    },
+  },
+  methods: {
+    changedLabel(event) {
+      console.log(event);
+      // this.selected = event;
+    },
+
+    submitForm() {
+      let body = {
+        firstName: this.firstName,
+        lastName: this.lastName,
+        Affiliation: this.Affiliation,
+        rank: this.rank,
+        idcard: this.idcard,
+        phone: this.phone,
+      };
+      // let b = []
+      // b.push(body)
+      this.userlist.push(body);
+      console.log(this.userlist);
+    },
+  },
+};
+</script>
+<template>
+  <Header>
+    <div
+      class="page-header min-vh-45"
+      :style="`background-image: url(${vueMkHeader})`"
+      loading="lazy"
+    >
+      <div class="container">
+        <div class="row">
+          <div class="col-lg-7 text-center mx-auto position-relative">
+            <h1 class="pt-3 mt-n5 me-2 head-text">ระบบเรียกรายงาน</h1>
+          </div>
+        </div>
+      </div>
+    </div>
+  </Header>
+  <section>
+    <div class="card card-body blur shadow-blur mx-3 mx-md-4 mt-n6">
+      <div class="page-header min-vh-45">
+        <div class="container">
+          <div 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 border border-2 border-success">
+              <thead class="border border-2 border-success border-bottom">
+                <tr>
+                  <th scope="col">ลำดับ</th>
+                  <th scope="col">ชื่อ</th>
+                  <th scope="col">สกุล</th>
+                  <th scope="col">วันเกิด</th>
+                  <th scope="col">อายุ</th>
+                  <th scope="col">สังกัด</th>
+                  <th scope="col">ยศ</th>
+                  <th scope="col">เลขบัตรประชาชน</th>
+                  <th scope="col">เบอร์ติดต่อ</th>
+                  <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.old }}</td>
+                  <td>{{ item.birthday }}</td>
+                  <td>{{ item.Affiliation }}</td>
+                  <td>{{ item.rank }}</td>
+                  <td>{{ item.idcard }}</td>
+                  <td>{{ item.phone }}</td>
+                  <td>
+                    <a data-bs-toggle="modal" data-bs-target="#EdituserBackdrop"
+                      ><i
+                        class="material-icons me-2"
+                        style="cursor: pointer"
+                        aria-hidden="true"
+                        >edit</i
+                      ></a
+                    >
+                  </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="birthday"
+                  @input="(event) => (birthday = 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>
+            <MaterialButton
+              variant="gradient"
+              color="success"
+              @click="submitForm"
+              html-type="submit"
+              >บันทึก</MaterialButton
+            >
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- modal -->
+    <div
+      class="modal fade"
+      id="EdituserBackdrop"
+      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="birthday"
+                  @input="(event) => (birthday = 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>
+            <MaterialButton
+              variant="gradient"
+              color="success"
+              @click="submitForm"
+              html-type="submit"
+              >บันทึก</MaterialButton
+            >
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+<style>
+.bg-green {
+  background: #567b57 !important;
+  color: #fff;
+}
+.bg-red {
+  background: #d24c4a !important;
+  color: #fff;
+}
+.bg-waring {
+  background: #d1d3d5 !important;
+  color: #fff;
+}
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+input[type="number"] {
+  -moz-appearance: textfield;
+}
+</style>

src/views/Restroom/AddRoom.vue

@@ -39,6 +39,10 @@ const userlist = [
     rank: "ร้อยตรี", //ยศ
     idcard: "134044411441122",
     phone: "0325647846",
+    ContractDate: "12/11/2566", //สังกัด
+    Lengthofstay: "3 เดือน", //ยศ
+    InsuranceMoney: "10,000",
+    Status: "รอคิว",
   },
   {
     dataIndex: "2",
@@ -48,6 +52,10 @@ const userlist = [
     rank: "ร้อยตรี", //ยศ
     idcard: "134044411441178",
     phone: "0325647845",
+    ContractDate: "12/11/2566", //สังกัด
+    Lengthofstay: "3 เดือน", //ยศ
+    InsuranceMoney: "10,000",
+    Status: "รอคิว",
   },
 ];
 
@@ -70,11 +78,10 @@ export default {
     return {
       value: { name: "Vue.js", language: "JavaScript" },
       options: [
-        { label: "Vue.js", value: "JavaScript" },
+        { label: "มานพ", value: "มานพ" },
-        { label: "Rails", value: "Ruby" },
+        { label: "วิชัย", value: "วิชัย" },
-        { label: "Sinatra", value: "Ruby" },
+        { label: "ธนาพร", value: "ธนาพร" },
-        { label: "Laravel", value: "PHP" },
+        { label: "มนตรี", value: "มนตรี" },
-        { label: "Phoenix", value: "Elixir" },
       ],
       selectedColor: "",
       firstName: "",
@@ -141,17 +148,25 @@ export default {
               :routes="[
                 { label: 'หน้าหลัก', route: '/' },
                 { label: 'สถานะห้องพัก', route: '/room' },
-                { label: 'แก้ไขรายละเอียดห้อง' },
+                { 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">
+              <div class="text-end">
+                <MaterialButton
+                  variant="gradient"
+                  color="success"
+                  data-bs-toggle="modal"
+                  data-bs-target="#contractBackdrop"
+                  >เพิ่มผู้เช่าลงคิว</MaterialButton
+                >
+              </div>
+              <div class="text-center pt-4 table-responsive">
                 <table class="table border border-2 border-success">
                   <thead class="border border-2 border-success border-bottom">
                     <tr>
@@ -162,6 +177,10 @@ export default {
                       <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>
@@ -174,13 +193,13 @@ export default {
                       <td>{{ item.rank }}</td>
                       <td>{{ item.idcard }}</td>
                       <td>{{ item.phone }}</td>
+                      <td>{{ item.ContractDate }}</td>
+                      <td>{{ item.Lengthofstay }}</td>
+                      <td>{{ item.InsuranceMoney }}</td>
+                      <td>{{ item.Status }}</td>
                       <td>
-                        <MaterialButton
+                        <MaterialButton variant="gradient" color="success"
-                          variant="gradient"
+                          >เพิ่มผู้เช่าห้องพัก</MaterialButton
-                          color="success"
-                          data-bs-toggle="modal"
-                          data-bs-target="#contractBackdrop"
-                          >เพิ่มรายละเอียดสัญญา</MaterialButton
                         >
                       </td>
                     </tr>
@@ -215,6 +234,11 @@ export default {
           </div>
           <div class="modal-body">
             <div>
+              <div class="mb-3">
+                <label>ชื่อผู้เช่า</label>
+                <v-select :options="options" v-model="selectedColor"></v-select>
+              </div>
+
               <div class="mb-3">
                 <MaterialInput
                   name="contract"
@@ -252,14 +276,13 @@ export default {
             <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
               ปิดหน้าต่าง
             </button>
-            <button
+            <MaterialButton
-              type="submit"
+              variant="gradient"
-              class="btn btn-primary"
+              color="success"
               @click="submitForm"
               html-type="submit"
+              >บันทึก</MaterialButton
             >
-              บันทึก
-            </button>
           </div>
         </div>
       </div>

src/views/Restroom/DetailRoomPage.vue

@@ -1,105 +1,40 @@
-<script setup>
+<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 MaterialInput from "@/components/MaterialInput.vue";
-import MaterialButton from "@/components/MaterialButton.vue";
+// import MaterialButton from "@/components/MaterialButton.vue";
 import Breadcrumbs from "@/examples/Breadcrumbs.vue";
-// material-input
-import setMaterialInput from "@/assets/js/material-input";
-onMounted(() => {
-  setMaterialInput();
-});
-const listRoom = [
-  { title: "ตึก 1" },
-  { title: "ตึก 2" },
-  { title: "ตึก 3" },
-  { title: "ตึก 4" },
-  { title: "ตึก 5" },
-  { title: "ตึก 6" },
-  { title: "ตึก 7" },
-];
 
-const NoRoom = [
+export default {
-  { title: "ชั้น 1" },
+  components: {
-  { title: "ชั้น 2" },
+    // MaterialInput,
-  { title: "ชั้น 3" },
+    // MaterialButton,
-  { title: "ชั้น 4" },
+    Breadcrumbs,
-  { title: "ชั้น 5" },
+  },
-  { title: "ชั้น 6" },
+  setup() {
-  { title: "ชั้น 7" },
+    return {
-];
+      vueMkHeader,
+    };
+  },
 
-const landingColumns = [
+  data() {
-  {
+    return {
-    title: "ห้อง 1",
+      selectedColor: "",
-    dataIndex: "1",
+      statusedit: false
-    status: true,
+    };
   },
-  {
+  created(){
-    title: "ห้อง 2",
+    console.log(this.$route.query.mode);
-    dataIndex: "2",
+    let mode = this.$route.query.mode
-    status: false,
+    mode == "add" ? this.statusedit = false : this.statusedit = true 
+    // this.$route.query
   },
-  {
+ 
-    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,
-  },
-];
 </script>
 <template>
   <Header>
@@ -145,10 +80,9 @@ const landingColumns = [
                 </div>
                 <div class="col-md-8">
                   <div class="card-body">
-                    <h5 class="card-title">รายละเอียดเจ้าของห้อง</h5>
+                    <div class="row" v-if="statusedit == true">
-                  
+                      <h5  class="card-title">รายละเอียดผู้เช่า</h5>
-                    <div class="row">
+                      <div class="col-5">
-                      <div class="col-4">
                         <p class="card-text">ชือ : มานะ</p>
                         <p class="card-text">สถานะห้อง : ไม่ว่าง</p>
                         <p class="card-text">ยศ : ร้อยตรี</p>
@@ -157,7 +91,7 @@ const landingColumns = [
                         <p class="card-text">อายุ : 33 ปี</p>
                         <p class="card-text">ระยะเวลาที่เข้าพัก : 3 เดือน</p>
                       </div>
-                      <div class="col-4">
+                      <div class="col-7">
                         <p class="card-text">นามสกุล : ถือดี</p>
                         <p class="card-text">สังกัด : กก</p>
                         <p class="card-text">เลขบัตรประชาชน : 123456123456</p>
@@ -165,6 +99,21 @@ const landingColumns = [
                         <p class="card-text">เงินค่าประกัน : 12,000</p>
                       </div>
                     </div>
+                    <div class="row">
+                      <div class="col-5" >
+                        <h5 class="card-title pt-2">รายละเอียดห้องพัก</h5>
+                        <p class="card-text">ประเภทห้องพัก : ช๓</p>
+                        <p class="card-text">มิเตอร์น้ำ/ไฟ : 745/546</p>
+                        <p class="card-text">สภาพห้อง : ปกติ</p>
+                      </div>
+                      <div class="col-7" v-if="statusedit == true">
+                        <h5 class="card-title pt-2">รายละเอียดค่าสาธารณุปโภค</h5>
+                        <p class="card-text">ค่าน้ำประปา : 120</p>
+                        <p class="card-text">ค่าไฟฟ้า : 700</p>
+                        <p class="card-text">ค่าไฟฟ้าส่วนกลาง : 100</p>
+                        <p class="card-text">ค่าบำรุงลิฟท์ : 200</p>
+                      </div>
+                    </div>
                     <!-- <p class="card-text">
                       <small class="text-muted">Last updated 3 mins ago</small>
                     </p> -->
@@ -192,3 +141,4 @@ const landingColumns = [
   color: #fff;
 }
 </style>
+ 

src/views/Restroom/RoomView.vue

@@ -125,15 +125,15 @@ export default {
       selectedColor: "",
     };
   },
-  created() {
+  created(){
- 
+    // this.$route.query
   },
   methods: {
-    changedLabel(event) {
+    gotodetail(id,index){
-      console.log(event);
+      let action 
-    
+      index == true ? action = 'edit' : action = 'add'
-      // this.selected = event;
+      this.$router.push({ path: `/room/detail/${id}`, query: { mode: action } });
-    },
+    }
   },
 };
 </script>
@@ -165,7 +165,7 @@ export default {
           </div>
           <div class="row pt-4">
             <div class="col-8">
-              <div class="nav-item dropdown dropdown-hover mx-2">
+              <div class="nav-item dropdown dropdown-hover mx-2 w-45">
                 <a
                   role="button"
                   class="nav-link ps-2 d-flex cursor-pointer align-items-center"
@@ -174,7 +174,7 @@ export default {
                   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"
@@ -200,6 +200,7 @@ export default {
             </div>
             <div class="col-4">
               <div>
+                <label>ค้นหาผู้เช่า</label>
                 <MaterialInput
                   class="input-group-dynamic w-100"
                   icon="search"
@@ -212,7 +213,7 @@ export default {
 
           <div class="text-center pt-4">
             <!-- v-for="(item, index) in NoRoom" :key="index" -->
-            <div >
+            <div>
               <p class="text-start mt-4">
                 <MaterialButton
                   variant="outline"
@@ -283,13 +284,8 @@ export default {
                           </div>
                           <p class="card-title">
                             <a
-                               v-if="item?.status"
+                              style="cursor: pointer"
-                              :href="`/room/detail/${item?.dataIndex}`"
+                              @click="gotodetail(item?.dataIndex,item?.status)"
-                              class="text-white"
-                              >{{ item?.title }}</a
-                            >
-                            <a
-                            v-if="!item?.status"
                               class="text-white"
                               >{{ item?.title }}</a
                             >
@@ -333,7 +329,7 @@ export default {
             <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
               ปิดหน้าต่าง
             </button>
-            <button type="button" class="btn btn-primary">บันทึก</button>
+            <MaterialButton variant="gradient" color="success">บันทึก</MaterialButton>
           </div>
         </div>
       </div>

src/views/Restroom/UpdateRoom.vue

@@ -119,21 +119,28 @@ export default {
     return {
       value: { name: "Vue.js", language: "JavaScript" },
       options: [
-        { label: "Vue.js", value: "JavaScript" },
+        { label: "มกราคม", value: "01" },
-        { label: "Rails", value: "Ruby" },
+        { label: "กุมภาพันธ์", value: "02" },
-        { label: "Sinatra", value: "Ruby" },
+        { label: "มีนาคม", value: "03" },
-        { label: "Laravel", value: "PHP" },
+        { label: "เมษายน", value: "04" },
-        { label: "Phoenix", value: "Elixir" },
+        { label: "พฤษภาคม", value: "05" },
+        { label: "มิถุนายน", value: "06" },
+        { label: "กรกฎาคม ", value: "07" },
+        { label: "สิงหาคม", value: "08" },
+        { label: "กันยายน", value: "09" },
+        { label: "ตุลาคม", value: "10" },
+        { label: "พฤศจิกายน", value: "11" },
+        { label: "ธันวาคม", value: "12" },
       ],
-      selectedColor: "",
+      selectedMonth: "ตุลาคม",
       firstName: "สมชาย",
-      lastName: "มาดี",
+      lastName: "0237",
-      Affiliation: "กก", //สังกัด
+      Affiliation: "0426 ", //สังกัด
-      rank: "ร้อยโท", //ยศ
+      rank: "ปกติ", //ยศ
-      idcard: "1234",
+      idcard: "120",
-      phone: "2023654888",
+      phone: "1200",
-      old: "30",
+      old: "100",
-      birthday: "12/11/2536",
+      birthday: "200",
     };
   },
   watch: {
@@ -155,13 +162,12 @@ export default {
         Affiliation: this.Affiliation,
         rank: this.rank,
         idcard: this.idcard,
-        phone: this.phone
+        phone: this.phone,
-      }
+      };
       // let b = []
       // b.push(body)
       // this.userlist.push(body)
       // console.log(this.userlist);
-      
     },
   },
 };
@@ -191,12 +197,12 @@ export default {
               :routes="[
                 { label: 'หน้าหลัก', route: '/' },
                 { label: 'สถานะห้องพัก', route: '/room' },
-                { label: 'แก้ไขรายละเอียดห้อง' },
+                { label: 'แก้ไขค่าใช้จ่ายประจำเดือน' },
               ]"
             />
           </div>
           <!-- d-flex justify-content-between -->
-          <h4>แก้ไขรายละเอียดห้อง</h4>
+          <h4>แก้ไขค่าใช้จ่ายประจำเดือน</h4>
           <div class="row pt-4">
             <div class="card mb-3">
               <div class="row g-0">
@@ -210,30 +216,19 @@ export default {
                 </div>
                 <div class="col-md-8">
                   <div class="card-body">
-                    <h5 class="card-title">รายละเอียดเจ้าของห้อง</h5>
+                    <h5 class="card-title">ค่าใช้จ่ายประจำเดือน ตุลาคม</h5>
 
                     <div class="row">
                       <div class="col-4">
                         <div>
-                          <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="สกุล"
+                              label="มิเตอร์น้ำ"
                               type="text"
-                              placeholder="สกุล"
+                              placeholder="มิเตอร์น้ำ"
                             />
                           </div>
                           <div class="mb-3">
@@ -241,32 +236,19 @@ export default {
                               :value="Affiliation"
                               @input="(event) => (Affiliation = event.target.value)"
                               class="input-group-static"
-                              label="สังกัด"
+                              label="มิเตอร์ไฟ"
                               type="text"
-                              placeholder="สังกัด"
+                              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="เลขบัตรประชาชน"
+                              label="ค่าน้ำประปา"
                               type="number"
-                            placeholder="เลขบัตรประชาชน"
+                              placeholder="ค่าน้ำประปา"
                             />
                           </div>
                           <div class="mb-3">
@@ -274,19 +256,22 @@ export default {
                               :value="phone"
                               @input="(event) => (phone = event.target.value)"
                               class="input-group-static"
-                            label="เบอร์ติดต่อ"
+                              label="ค่าไฟฟ้า"
                               type="number"
-                            placeholder="เบอร์ติดต่อ"
+                              placeholder="ค่าไฟฟ้า"
                             />
                           </div>
+                        </div>
+                      </div>
+                      <div class="col-4">
                         <div class="mb-3">
                           <MaterialInput
                             :value="birthday"
                             @input="(event) => (birthday = event.target.value)"
                             class="input-group-static"
-                            label="วันเกิด"
+                            label="ค่าไฟฟ้าส่วนกลาง"
                             type="text"
-                            placeholder="วันเกิด"
+                            placeholder="ค่าไฟฟ้าส่วนกลาง"
                           />
                         </div>
                         <div class="mb-3">
@@ -294,9 +279,19 @@ export default {
                             :value="old"
                             @input="(event) => (old = event.target.value)"
                             class="input-group-static"
-                            label="อายุ"
+                            label="ค่าบำรุงลิฟท์"
                             type="number"
-                            placeholder="อายุ"
+                            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>
@@ -305,10 +300,9 @@ export default {
                       <small class="text-muted">Last updated 3 mins ago</small>
                     </p> -->
                     <div class="text-center">
-                      <MaterialButton
+                      <MaterialButton variant="gradient" color="success"
-                          variant="gradient"
+                        >บันทึก</MaterialButton
-                          color="success"
+                      >
-                          >บันทึก</MaterialButton>
                     </div>
                   </div>
                 </div>

src/views/RoomLayout/RoomLayoutView.vue

@@ -257,7 +257,7 @@ export default {
             <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
               ปิดหน้าต่าง
             </button>
-            <button type="button" class="btn btn-primary">บันทึก</button>
+            <MaterialButton variant="gradient" color="success">บันทึก</MaterialButton>
           </div>
         </div>
       </div>

src/views/SearchAll/SearchView.vue

@@ -0,0 +1,432 @@
+<script>
+import MaterialInput from "@/components/MaterialInput.vue";
+import MaterialButton from "@/components/MaterialButton.vue";
+import Breadcrumbs from "@/examples/Breadcrumbs.vue";
+import vueMkHeader from "@/assets/img/bg.jpg";
+
+const listRoom = [
+  { title: "ตึก 1" },
+  { title: "ตึก 2" },
+  { title: "ตึก 3" },
+  { title: "ตึก 4" },
+  { title: "ตึก 5" },
+  { title: "ตึก 6" },
+  { title: "ตึก 7" },
+];
+
+const NoRoom = [
+  { title: "ชั้น 1" },
+  { title: "ชั้น 2" },
+  { title: "ชั้น 3" },
+  { title: "ชั้น 4" },
+  { title: "ชั้น 5" },
+  { title: "ชั้น 6" },
+  { title: "ชั้น 7" },
+];
+
+const userlist = [
+  {
+    dataIndex: "1",
+    firstName: "สมชาย",
+    lastName: "แสงทอง",
+    Affiliation: "บก", //สังกัด
+    rank: "ร้อยตรี", //ยศ
+    old: "32",
+    birthday: "04/03/2534",
+    idcard: "134044411441122",
+    phone: "0325647846",
+  },
+  {
+    dataIndex: "2",
+    firstName: "สมชัย",
+    lastName: "แสงสุข",
+    Affiliation: "กก", //สังกัด
+    rank: "ร้อยตรี", //ยศ
+    old: "32",
+    birthday: "14/07/2534",
+    idcard: "134044411441178",
+    phone: "0325647845",
+  },
+];
+
+export default {
+  components: {
+    MaterialInput,
+    MaterialButton,
+    Breadcrumbs,
+  },
+  setup() {
+    return {
+      listRoom,
+      NoRoom,
+      userlist,
+      vueMkHeader,
+    };
+  },
+
+  data() {
+    return {
+      value: { name: "Vue.js", language: "JavaScript" },
+      options: [
+        { label: "Vue.js", value: "JavaScript" },
+        { label: "Rails", value: "Ruby" },
+        { label: "Sinatra", value: "Ruby" },
+        { label: "Laravel", value: "PHP" },
+        { label: "Phoenix", value: "Elixir" },
+      ],
+      selectedColor: "",
+      firstName: "",
+      lastName: "",
+      Affiliation: "", //สังกัด
+      rank: "", //ยศ
+      idcard: "",
+      phone: "",
+    };
+  },
+  watch: {
+    selectedColor: function (newValue) {
+      // this.updateColor(newValue)
+      console.log(newValue);
+    },
+  },
+  methods: {
+    changedLabel(event) {
+      console.log(event);
+      // this.selected = event;
+    },
+
+    submitForm() {
+      let body = {
+        firstName: this.firstName,
+        lastName: this.lastName,
+        Affiliation: this.Affiliation,
+        rank: this.rank,
+        idcard: this.idcard,
+        phone: this.phone,
+      };
+      // let b = []
+      // b.push(body)
+      this.userlist.push(body);
+      console.log(this.userlist);
+    },
+  },
+};
+</script>
+<template>
+  <Header>
+    <div
+      class="page-header min-vh-45"
+      :style="`background-image: url(${vueMkHeader})`"
+      loading="lazy"
+    >
+      <div class="container">
+        <div class="row">
+          <div class="col-lg-7 text-center mx-auto position-relative">
+            <h1 class="pt-3 mt-n5 me-2 head-text">ระบบค้นหา</h1>
+          </div>
+        </div>
+      </div>
+    </div>
+  </Header>
+  <section>
+    <div class="card card-body blur shadow-blur mx-3 mx-md-4 mt-n6">
+      <div class="page-header min-vh-45">
+        <div class="container">
+          <div class="d-flex justify-content-between">
+            <div>
+              <Breadcrumbs
+                :routes="[{ label: 'หน้าหลัก', route: '/' }, { label: 'ระบบค้นหา' }]"
+              />
+            </div>
+          </div>
+          <div class="d-flex justify-content-end">
+                <MaterialInput
+                  class="input-group-dynamic w-30"
+                  icon="search"
+                  type="text"
+                  placeholder="Search"
+                />
+              </div>
+          <div class="text-center pt-4">
+            <table class="table border border-2 border-success">
+              <thead class="border border-2 border-success border-bottom">
+                <tr>
+                  <th scope="col">ลำดับ</th>
+                  <th scope="col">ชื่อ</th>
+                  <th scope="col">สกุล</th>
+                  <th scope="col">วันเกิด</th>
+                  <th scope="col">อายุ</th>
+                  <th scope="col">สังกัด</th>
+                  <th scope="col">ยศ</th>
+                  <th scope="col">เลขบัตรประชาชน</th>
+                  <th scope="col">เบอร์ติดต่อ</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr v-for="(item, index) in userlist" :key="index">
+                  <th scope="row">{{ index + 1 }}</th>
+                  <td>{{ item.firstName }}</td>
+                  <td>{{ item.lastName }}</td>
+                  <td>{{ item.old }}</td>
+                  <td>{{ item.birthday }}</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="birthday"
+                  @input="(event) => (birthday = 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>
+            <MaterialButton
+              variant="gradient"
+              color="success"
+              @click="submitForm"
+              html-type="submit"
+              >บันทึก</MaterialButton
+            >
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- modal -->
+    <div
+      class="modal fade"
+      id="EdituserBackdrop"
+      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="birthday"
+                  @input="(event) => (birthday = 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>
+            <MaterialButton
+              variant="gradient"
+              color="success"
+              @click="submitForm"
+              html-type="submit"
+              >บันทึก</MaterialButton
+            >
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+<style>
+.bg-green {
+  background: #567b57 !important;
+  color: #fff;
+}
+.bg-red {
+  background: #d24c4a !important;
+  color: #fff;
+}
+.bg-waring {
+  background: #d1d3d5 !important;
+  color: #fff;
+}
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+input[type="number"] {
+  -moz-appearance: textfield;
+}
+</style>

src/views/Users/UserlistView.vue

@@ -31,8 +31,10 @@ const userlist = [
     lastName: "แสงทอง",
     Affiliation: "บก", //สังกัด
     rank: "ร้อยตรี", //ยศ
+    old: "32",
+    birthday: "04/03/2534",
     idcard: "134044411441122",
-    phone: "0325647846"
+    phone: "0325647846",
   },
   {
     dataIndex: "2",
@@ -40,9 +42,11 @@ const userlist = [
     lastName: "แสงสุข",
     Affiliation: "กก", //สังกัด
     rank: "ร้อยตรี", //ยศ
+    old: "32",
+    birthday: "14/07/2534",
     idcard: "134044411441178",
-    phone: "0325647845"
+    phone: "0325647845",
-  }
+  },
 ];
 
 export default {
@@ -98,13 +102,12 @@ export default {
         Affiliation: this.Affiliation,
         rank: this.rank,
         idcard: this.idcard,
-        phone: this.phone
+        phone: this.phone,
-      }
+      };
       // let b = []
       // b.push(body)
-      this.userlist.push(body)
+      this.userlist.push(body);
       console.log(this.userlist);
-      
     },
   },
 };
@@ -147,27 +150,42 @@ export default {
           </div>
 
           <div class="text-center pt-4">
-            <table class="table table-hover border border-2 border-success">
+            <table class="table border border-2 border-success">
               <thead class="border border-2 border-success border-bottom">
                 <tr>
                   <th scope="col">ลำดับ</th>
                   <th scope="col">ชื่อ</th>
                   <th scope="col">สกุล</th>
+                  <th scope="col">วันเกิด</th>
+                  <th scope="col">อายุ</th>
                   <th scope="col">สังกัด</th>
                   <th scope="col">ยศ</th>
                   <th scope="col">เลขบัตรประชาชน</th>
                   <th scope="col">เบอร์ติดต่อ</th>
+                  <th scope="col"></th>
                 </tr>
               </thead>
               <tbody>
                 <tr v-for="(item, index) in userlist" :key="index">
-                  <th scope="row">{{ index+1 }}</th>
+                  <th scope="row">{{ index + 1 }}</th>
                   <td>{{ item.firstName }}</td>
                   <td>{{ item.lastName }}</td>
+                  <td>{{ item.old }}</td>
+                  <td>{{ item.birthday }}</td>
                   <td>{{ item.Affiliation }}</td>
                   <td>{{ item.rank }}</td>
                   <td>{{ item.idcard }}</td>
                   <td>{{ item.phone }}</td>
+                  <td>
+                    <a data-bs-toggle="modal" data-bs-target="#EdituserBackdrop"
+                      ><i
+                        class="material-icons me-2"
+                        style="cursor: pointer"
+                        aria-hidden="true"
+                        >edit</i
+                      ></a
+                    >
+                  </td>
                 </tr>
               </tbody>
             </table>
@@ -220,6 +238,16 @@ export default {
                   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="Affiliation"
@@ -266,15 +294,125 @@ export default {
             <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
               ปิดหน้าต่าง
             </button>
-            <button
+            <MaterialButton
-              type="submit"
+              variant="gradient"
-              class="btn btn-primary"
+              color="success"
               @click="submitForm"
               html-type="submit"
-              
+              >บันทึก</MaterialButton
             >
-              บันทึก
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- modal -->
+    <div
+      class="modal fade"
+      id="EdituserBackdrop"
+      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="birthday"
+                  @input="(event) => (birthday = 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>
+            <MaterialButton
+              variant="gradient"
+              color="success"
+              @click="submitForm"
+              html-type="submit"
+              >บันทึก</MaterialButton
+            >
           </div>
         </div>
       </div>

src/views/UtilitiesRoom/UtilitieView.vue

@@ -109,14 +109,30 @@ export default {
   data() {
     return {
       value: { name: "Vue.js", language: "JavaScript" },
-      options: [
+      optionsBuilding: [
-        { label: "Vue.js", value: "JavaScript" },
+        { label: "ตึก 1", value: "1" },
-        { label: "Rails", value: "Ruby" },
+        { label: "ตึก 2", value: "2" },
-        { label: "Sinatra", value: "Ruby" },
+        { label: "ตึก 3", value: "3" },
-        { label: "Laravel", value: "PHP" },
+        { label: "ตึก 4", value: "4" },
-        { label: "Phoenix", value: "Elixir" },
+        { label: "ตึก 5", value: "5" },
       ],
-      selectedColor: "",
+      optionsFloor: [
+        { label: "ชั้น 1", value: "1" },
+        { label: "ชั้น 2", value: "2" },
+        { label: "ชั้น 3", value: "3" },
+        { label: "ชั้น 4", value: "4" },
+        { label: "ชั้น 5", value: "5" },
+      ],
+      optionsRoom: [
+        { label: "ห้อง 1", value: "1" },
+        { label: "ห้อง 2", value: "2" },
+        { label: "ห้อง 3", value: "3" },
+        { label: "ห้อง 4", value: "4" },
+        { label: "ห้อง 5", value: "5" },
+      ],
+      selectedBuilding: "ตึก 1",
+      selectedFloor: "ชั้น 1",
+      selectedRoom: "ห้อง 1",
       fee: "",
       Waterbill: "",
       Electricitybill: "",
@@ -168,28 +184,61 @@ export default {
             </div>
           </div>
           <div>
-            <div class="accordion" id="accordionPanelsStayOpenExample">
+            <ul class="nav nav-tabs" id="myTab" role="tablist">
-              <div class="accordion-item">
+              <li class="nav-item" role="presentation">
-                <h2 class="accordion-header" id="panelsStayOpen-headingOne">
                 <button
-                    style="text-decoration-line: underline"
+                  class="nav-link active"
-                    class="accordion-button"
+                  style="color: #57b05b"
+                  id="home-tab"
+                  data-bs-toggle="tab"
+                  data-bs-target="#home"
                   type="button"
-                    data-bs-toggle="collapse"
+                  role="tab"
-                    data-bs-target="#panelsStayOpen-collapseOne"
+                  aria-controls="home"
-                    aria-expanded="true"
+                  aria-selected="true"
-                    aria-controls="panelsStayOpen-collapseOne"
                 >
                   บันทึกค่าใช้จ่ายบ้านพักส่วนกลาง ตร.
                 </button>
-                </h2>
+              </li>
-                <div
+              <li class="nav-item" role="presentation">
-                  id="panelsStayOpen-collapseOne"
+                <button
-                  class="accordion-collapse collapse show"
+                  class="nav-link"
-                  aria-labelledby="panelsStayOpen-headingOne"
+                  style="color: #57b05b"
+                  id="profile-tab"
+                  data-bs-toggle="tab"
+                  data-bs-target="#profile"
+                  type="button"
+                  role="tab"
+                  aria-controls="profile"
+                  aria-selected="false"
                 >
-                  <div class="accordion-body">
+                  บันทึกค่าใช้จ่ายบ้านพักส่วนกลาง บช.ตชด.
-                    <div class="text-end">
+                </button>
+              </li>
+              <li class="nav-item" role="presentation">
+                <button
+                  class="nav-link"
+                  style="color: #57b05b"
+                  id="contact-tab"
+                  data-bs-toggle="tab"
+                  data-bs-target="#contact"
+                  type="button"
+                  role="tab"
+                  aria-controls="contact"
+                  aria-selected="false"
+                >
+                  สรุปรายงานค่าใช้จ่าย
+                </button>
+              </li>
+            </ul>
+            <div class="tab-content" id="myTabContent">
+              <div
+                class="tab-pane fade show active"
+                id="home"
+                role="tabpanel"
+                aria-labelledby="home-tab"
+              >
+                <div class="text-end pt-4">
                   <MaterialButton
                     variant="gradient"
                     color="success"
@@ -203,6 +252,9 @@ export default {
                     <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>
@@ -213,6 +265,9 @@ export default {
                     <tbody>
                       <tr>
                         <th scope="row">1</th>
+                        <td>1</td>
+                        <td>2</td>
+                        <td>3</td>
                         <td>20,000</td>
                         <td>8,000</td>
                         <td>20,000</td>
@@ -223,29 +278,13 @@ export default {
                   </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="tab-pane fade"
-                  class="accordion-collapse collapse"
+                id="profile"
-                  aria-labelledby="panelsStayOpen-headingTwo"
+                role="tabpanel"
+                aria-labelledby="profile-tab"
               >
-                  <div class="accordion-body">
+                <div class="text-end pt-4">
-                    <div class="text-end">
                   <MaterialButton
                     variant="gradient"
                     color="success"
@@ -259,6 +298,9 @@ export default {
                     <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>
@@ -266,6 +308,9 @@ export default {
                     <tbody>
                       <tr>
                         <th scope="row">1</th>
+                        <td>1</td>
+                        <td>2</td>
+                        <td>3</td>
                         <td>20,000</td>
                         <td>8,000</td>
                       </tr>
@@ -273,29 +318,13 @@ export default {
                   </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="tab-pane fade"
-                  class="accordion-collapse collapse"
+                id="contact"
-                  aria-labelledby="panelsStayOpen-headingThree"
+                role="tabpanel"
+                aria-labelledby="contact-tab"
               >
-                  <div class="accordion-body">
+                <div class="text-end pt-4">
-                    <div class="text-end">
                   <MaterialButton
                     variant="gradient"
                     color="success"
@@ -326,8 +355,7 @@ export default {
                 </div>
               </div>
             </div>
-              </div>
+          
-            </div>
           </div>
         </div>
       </div>
@@ -346,7 +374,9 @@ export default {
       <div class="modal-dialog modal-dialog-centered">
         <div class="modal-content">
           <div class="modal-header">
-            <h5 class="modal-title" id="staticBackdropLabel">บันทึกค่าใช้จ่ายบ้านพักส่วนกลาง ตร.</h5>
+            <h5 class="modal-title" id="staticBackdropLabel">
+              บันทึกค่าใช้จ่ายบ้านพักส่วนกลาง ตร.
+            </h5>
             <button
               type="button"
               class="btn-close"
@@ -356,6 +386,18 @@ export default {
           </div>
           <div class="modal-body">
             <div>
+              <div class="mb-3">
+                <label>ตึก</label>
+                <v-select :options="optionsBuilding" v-model="selectedBuilding"></v-select>
+              </div>
+              <div class="mb-3">
+                <label>ชั้น</label>
+                <v-select :options="optionsFloor" v-model="selectedFloor"></v-select>
+              </div>
+              <div class="mb-3">
+                <label>ห้อง</label>
+                <v-select :options="optionsRoom" v-model="selectedRoom"></v-select>
+              </div>
               <div class="mb-3">
                 <MaterialInput
                   name="fee"
@@ -413,7 +455,7 @@ export default {
             <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
               ปิดหน้าต่าง
             </button>
-            <button type="button" class="btn btn-primary">บันทึก</button>
+            <MaterialButton variant="gradient" color="success">บันทึก</MaterialButton>
           </div>
         </div>
       </div>
@@ -432,7 +474,9 @@ export default {
       <div class="modal-dialog modal-dialog-centered">
         <div class="modal-content">
           <div class="modal-header">
-            <h5 class="modal-title" id="staticBackdropLabel">เพิ่มค่าใช้จ่ายบ้านพักส่วนกลาง บช.ตชด.</h5>
+            <h5 class="modal-title" id="staticBackdropLabel">
+              เพิ่มค่าใช้จ่ายบ้านพักส่วนกลาง บช.ตชด.
+            </h5>
             <button
               type="button"
               class="btn-close"
@@ -442,6 +486,18 @@ export default {
           </div>
           <div class="modal-body">
             <div>
+              <div class="mb-3">
+                <label>ตึก</label>
+                <v-select :options="optionsBuilding" v-model="selectedBuilding"></v-select>
+              </div>
+              <div class="mb-3">
+                <label>ชั้น</label>
+                <v-select :options="optionsFloor" v-model="selectedFloor"></v-select>
+              </div>
+              <div class="mb-3">
+                <label>ห้อง</label>
+                <v-select :options="optionsRoom" v-model="selectedRoom"></v-select>
+              </div>
               <div class="mb-3">
                 <MaterialInput
                   name="Maintenance"
@@ -469,7 +525,7 @@ export default {
             <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
               ปิดหน้าต่าง
             </button>
-            <button type="button" class="btn btn-primary">บันทึก</button>
+            <MaterialButton variant="gradient" color="success">บันทึก</MaterialButton>
           </div>
         </div>
       </div>
@@ -525,7 +581,7 @@ export default {
             <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
               ปิดหน้าต่าง
             </button>
-            <button type="button" class="btn btn-primary">บันทึก</button>
+            <MaterialButton variant="gradient" color="success">บันทึก</MaterialButton>
           </div>
         </div>
       </div>