update 55

src/assets/css/material-kit-pro.css

@@ -9637,6 +9637,11 @@ textarea.form-control-lg {
   color: #fb8c00 !important;
 }
 
+.text-return {
+  color: #ffca28 !important;
+}
+
+
 .text-danger {
   color: #F44335 !important;
 }

src/assets/dataJson/rooms.json

@@ -2,66 +2,66 @@
     {
         "title": "ห้อง 1",
         "dataIndex": "1",
-        "status": true
+        "status": "free"
       },
       {
         "title": "ห้อง 2",
         "dataIndex": "2",
-        "status": false
+        "status": "unavailable"
       },
       {
         "title": "ห้อง 3",
         "dataIndex": "3",
-        "status": true
+        "status": "free"
       },
       {
         "title": "ห้อง 4",
         "dataIndex": "4",
-        "status": true
+        "status": "return"
       },
       {
         "title": "ห้อง 5",
         "dataIndex": "5",
-        "status": false
+        "status": "unavailable"
       },
       {
         "title": "ห้อง 6",
         "dataIndex": "6",
-        "status": false
+        "status": "waiting"
       },
       {
         "title": "ห้อง 7",
         "dataIndex": "7",
-        "status": true
+        "status": "return"
       },
       {
         "title": "ห้อง 8",
         "dataIndex": "8",
-        "status": false
+        "status": "unavailable"
       },
       {
         "title": "ห้อง 9",
         "dataIndex": "9",
-        "status": false
+        "status": "unavailable"
       },
       {
         "title": "ห้อง 10",
         "dataIndex": "10",
-        "status": false
+        "status": "waiting"
       },
       {
         "title": "ห้อง 11",
         "dataIndex": "11",
-        "status": true
+        "status": "free"
       },
       {
         "title": "ห้อง 12",
         "dataIndex": "12",
-        "status": false
+        "status": "free"
       },
       {
         "title": "ห้อง 13",
         "dataIndex": "13",
-        "status": false
+        "status": "waiting"
       }
 ]

src/views/Presentation/Sections/PresentationInformation.vue

@@ -4,7 +4,7 @@
   <section class="my-4 py-4">
     <div class="container">
         <div class="row">
-            <div class="col-sm-2">
+            <div class="col-sm-3">
                 <div class="card">
                     <div class="card-body text-center">
                         <p class="card-title" style="font-weight: bold; color: #000">ทะเบียน</p>
@@ -16,7 +16,7 @@
                     </div>
                 </div>
             </div>
-            <div class="col-sm-2 mb-3 mb-sm-0">
+            <div class="col-sm-3 mb-3 mb-sm-0">
                 <div class="card">
                     <div class="card-body text-center">
                         <p class="card-title" style="font-weight: bold; color: #000">สถานะห้องพัก</p>
@@ -27,7 +27,7 @@
                     </div>
                 </div>
             </div>
-            <div class="col-sm-2">
+            <div class="col-sm-3">
                 <div class="card">
                     <div class="card-body text-center">
                         <p class="card-title" style="font-weight: bold; color: #000">ผังห้องพัก</p>
@@ -38,7 +38,7 @@
                     </div>
                 </div>
             </div>
-            <div class="col-sm-2">
+            <div class="col-sm-3">
                 <div class="card">
                     <div class="card-body text-center">
                         <p class="card-title" style="font-weight: bold; color: #000">ค่าสาธารณุปโภค</p>
@@ -49,7 +49,7 @@
                     </div>
                 </div>
             </div>
-            <div class="col-sm-2">
+            <!-- <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>
@@ -59,8 +59,8 @@
                         </RouterLink>
                     </div>
                 </div>
-            </div>
+            </div> -->
-            <div class="col-sm-2">
+            <div class="col-sm-3 mt-4">
                 <div class="card">
                     <div class="card-body text-center">
                         <p class="card-title" style="font-weight: bold; color: #000">ระบบเรียกรายงาน</p>

src/views/Reports/ReportlistView.vue

@@ -135,62 +135,232 @@ export default {
           <div class="d-flex justify-content-between">
             <div>
               <Breadcrumbs
-                :routes="[{ label: 'หน้าหลัก', route: '/' }, { label: 'ระบบเรียกรายงาน' }]"
+                :routes="[
+                  { label: 'หน้าหลัก', route: '/' },
+                  { label: 'ระบบเรียกรายงาน' },
+                ]"
               />
             </div>
-            <div class="text-end">
+          </div>
-              <MaterialButton
+          <div>
-                variant="gradient"
+            <ul class="nav nav-tabs" id="myTab" role="tablist">
-                color="success"
+              <li class="nav-item" role="presentation">
-                data-bs-toggle="modal"
+                <button
-                data-bs-target="#userBackdrop"
+                  class="nav-link active"
-                >เพิ่มรายงาน</MaterialButton
+                  style="color: #57b05b"
+                  id="home-tab"
+                  data-bs-toggle="tab"
+                  data-bs-target="#home"
+                  type="button"
+                  role="tab"
+                  aria-controls="home"
+                  aria-selected="true"
                 >
+                  บันทึกค่าใช้จ่ายบ้านพัก ตร.
+                </button>
+              </li>
+              <li class="nav-item" role="presentation">
+                <button
+                  class="nav-link"
+                  style="color: #57b05b"
+                  id="profile-tab"
+                  data-bs-toggle="tab"
+                  data-bs-target="#profile"
+                  type="button"
+                  role="tab"
+                  aria-controls="profile"
+                  aria-selected="false"
+                >
+                  บันทึกค่าใช้จ่ายบ้านพัก บช.ตชด.
+                </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="d-flex justify-content-end pt-4">
+                  <MaterialButton size="lg" class="btn-icon" style="margin-right: -30px">
+                    <div class="d-flex align-items-center">
+                      <span style="margin-right: 5px">บันทึก</span>
+                      <img
+                        src="../../assets/img/pdf.png"
+                        alt="title"
+                        loading="lazy"
+                        width="40"
+                      />
                     </div>
+                  </MaterialButton>
+                  <MaterialButton size="lg" class="btn-icon">
+                    <div class="d-flex align-items-center">
+                      <span style="margin-right: 5px">บันทึก</span>
+                      <img
+                        src="../../assets/img/excel.png"
+                        alt="title"
+                        loading="lazy"
+                        width="40"
+                      />
+                    </div>
+                  </MaterialButton>
                 </div>
-
                 <div class="text-center pt-4">
-            <table class="table border border-2 border-success">
+                  <table class="table table-hover border border-2 border-success">
                     <thead class="border border-2 border-success border-bottom">
                       <tr>
                         <th scope="col">ลำดับ</th>
-                  <th scope="col">ชื่อ</th>
+                        <th scope="col">ตึก</th>
-                  <th scope="col">สกุล</th>
+                        <th scope="col">ชั้น</th>
-                  <th scope="col">วันเกิด</th>
+                        <th scope="col">ห้อง</th>
-                  <th scope="col">อายุ</th>
+                        <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">
+                      <tr>
-                  <th scope="row">{{ index + 1 }}</th>
+                        <th scope="row">1</th>
-                  <td>{{ item.firstName }}</td>
+                        <td>1</td>
-                  <td>{{ item.lastName }}</td>
+                        <td>2</td>
-                  <td>{{ item.old }}</td>
+                        <td>3</td>
-                  <td>{{ item.birthday }}</td>
+                        <td>20,000</td>
-                  <td>{{ item.Affiliation }}</td>
+                        <td>8,000</td>
-                  <td>{{ item.rank }}</td>
+                        <td>20,000</td>
-                  <td>{{ item.idcard }}</td>
+                        <td>8,000</td>
-                  <td>{{ item.phone }}</td>
+                        <td>20,000</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
+                class="tab-pane fade"
+                id="profile"
+                role="tabpanel"
+                aria-labelledby="profile-tab"
+              >
+              <div class="d-flex justify-content-end pt-4">
+                  <MaterialButton size="lg" class="btn-icon" style="margin-right: -30px">
+                    <div class="d-flex align-items-center">
+                      <span style="margin-right: 5px">บันทึก</span>
+                      <img
+                        src="../../assets/img/pdf.png"
+                        alt="title"
+                        loading="lazy"
+                        width="40"
+                      />
+                    </div>
+                  </MaterialButton>
+                  <MaterialButton size="lg" class="btn-icon">
+                    <div class="d-flex align-items-center">
+                      <span style="margin-right: 5px">บันทึก</span>
+                      <img
+                        src="../../assets/img/excel.png"
+                        alt="title"
+                        loading="lazy"
+                        width="40"
+                      />
+                    </div>
+                  </MaterialButton>
+                </div>
+                <div class="text-center pt-4">
+                  <table class="table table-hover border border-2 border-success">
+                    <thead class="border border-2 border-success border-bottom">
+                      <tr>
+                        <th scope="col">ลำดับ</th>
+                        <th scope="col">ตึก</th>
+                        <th scope="col">ชั้น</th>
+                        <th scope="col">ห้อง</th>
+                        <th scope="col">ค่าบำรุงฯ</th>
+                        <th scope="col">ค่าประกัน</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      <tr>
+                        <th scope="row">1</th>
+                        <td>1</td>
+                        <td>2</td>
+                        <td>3</td>
+                        <td>20,000</td>
+                        <td>8,000</td>
+                      </tr>
+                    </tbody>
+                  </table>
+                </div>
+              </div>
+              <div
+                class="tab-pane fade"
+                id="contact"
+                role="tabpanel"
+                aria-labelledby="contact-tab"
+              >
+              <div class="d-flex justify-content-end pt-4">
+                  <MaterialButton size="lg" class="btn-icon" style="margin-right: -30px">
+                    <div class="d-flex align-items-center">
+                      <span style="margin-right: 5px">บันทึก</span>
+                      <img
+                        src="../../assets/img/pdf.png"
+                        alt="title"
+                        loading="lazy"
+                        width="40"
+                      />
+                    </div>
+                  </MaterialButton>
+                  <MaterialButton size="lg" class="btn-icon">
+                    <div class="d-flex align-items-center">
+                      <span style="margin-right: 5px">บันทึก</span>
+                      <img
+                        src="../../assets/img/excel.png"
+                        alt="title"
+                        loading="lazy"
+                        width="40"
+                      />
+                    </div>
+                  </MaterialButton>
+                </div>
+                <div class="text-center pt-4">
+                  <table class="table table-hover border border-2 border-success">
+                    <thead class="border border-2 border-success border-bottom">
+                      <tr>
+                        <th scope="col">ลำดับ</th>
+                        <th scope="col">กก.</th>
+                        <th scope="col">บก.</th>
+                        <th scope="col">ข้อมูลระดับ บช.</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      <tr>
+                        <th scope="row">1</th>
+                        <td>Mark</td>
+                        <td>Otto</td>
+                        <td>@mdo</td>
+                      </tr>
+                    </tbody>
+                  </table>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
       </div>
     </div>
 

src/views/Restroom/DetailRoomPage.vue

@@ -1,40 +1,92 @@
 <script>
-
 //image
 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";
-
+const userlist = [
+  {
+    dataIndex: "1",
+    firstName: "สมชาย",
+    lastName: "แสงทอง",
+    Affiliation: "บก", //สังกัด
+    rank: "ร้อยตรี", //ยศ
+    idcard: "134044411441122",
+    phone: "0325647846",
+    ContractDate: "12/11/2566", //สังกัด
+    Lengthofstay: "3 เดือน", //ยศ
+    InsuranceMoney: "10,000",
+    Status: "รอคิว",
+  },
+  {
+    dataIndex: "2",
+    firstName: "สมชัย",
+    lastName: "แสงสุข",
+    Affiliation: "กก", //สังกัด
+    rank: "ร้อยตรี", //ยศ
+    idcard: "134044411441178",
+    phone: "0325647845",
+    ContractDate: "12/11/2566", //สังกัด
+    Lengthofstay: "3 เดือน", //ยศ
+    InsuranceMoney: "10,000",
+    Status: "รอคิว",
+  },
+];
 export default {
   components: {
-    // MaterialInput,
+    MaterialInput,
-    // MaterialButton,
+    MaterialButton,
     Breadcrumbs,
   },
   setup() {
     return {
       vueMkHeader,
+      userlist,
     };
   },
 
   data() {
     return {
       selectedColor: "",
-      statusedit: false
+      statusedit: false,
+      mode: "",
+      id: "",
+      options: [
+        { label: "มานพ", value: "มานพ" },
+        { label: "วิชัย", value: "วิชัย" },
+        { label: "ธนาพร", value: "ธนาพร" },
+        { label: "มนตรี", value: "มนตรี" },
+      ],
+      selectedColor: "",
+      firstName: "",
+      lastName: "",
+      Affiliation: "", //สังกัด
+      rank: "", //ยศ
+      idcard: "",
+      phone: "",
+      old: "",
+      birthday: "",
     };
   },
   created() {
-    console.log(this.$route.query.mode);
+    this.mode = this.$route.query.mode;
-    let mode = this.$route.query.mode
+    if (this.$route.params.id) {
-    mode == "add" ? this.statusedit = false : this.statusedit = true 
+      this.id = this.$route.params.id;
+    }
+    this.mode == "add" ? (this.statusedit = false) : (this.statusedit = true);
     // this.$route.query
   },
- 
+  methods: {
-
+    gotoAction() {
+      if (this.mode == "edit") {
+        this.$router.push({ path: `/room/update/${this.id}` });
+      } else {
+        this.$router.push({ path: `/addUserRoom` });
+      }
+    },
+  },
 };
-
 </script>
 <template>
   <Header>
@@ -66,7 +118,22 @@ export default {
             />
           </div>
           <!-- d-flex justify-content-between -->
+          <div class="d-flex justify-content-between align-items-center">
             <h4>รายละเอียดห้องพัก</h4>
+            <div v-if="mode == 'edit'">
+              <MaterialButton variant="gradient" color="success" @click="gotoAction()"
+                >แก้ไขค่าใช้จ่ายประจำเดือน</MaterialButton
+              >
+            </div>
+            <!-- <div v-if="mode == 'add'">
+              <MaterialButton
+                variant="gradient"
+                color="success"
+                @click="gotoAction()"
+                >เพิ่มผู้เช่าห้องพัก</MaterialButton
+              >
+            </div> -->
+          </div>
           <div class="row pt-4">
             <div class="card mb-3">
               <div class="row g-0">
@@ -120,7 +187,172 @@ export default {
                   </div>
                 </div>
               </div>
+              <div class="row pt-4">
+                <div class="card mb-3" v-if="mode == 'add'">
+                  <h5>ลำดับคิว</h5>
+                  <div class="text-end">
+                    <MaterialButton
+                      variant="gradient"
+                      color="success"
+                      data-bs-toggle="modal"
+                      data-bs-target="#seleteUserBackdrop"
+                      >เพิ่มผู้เช่าลงคิว</MaterialButton
+                    >
                   </div>
+                  <div class="text-center pt-4 table-responsive">
+                    <table class="table border border-2 border-success">
+                      <thead class="border border-2 border-success border-bottom">
+                        <tr>
+                          <th scope="col">ลำดับ</th>
+                          <th scope="col">ชื่อ</th>
+                          <th scope="col">สกุล</th>
+                          <th scope="col">สังกัด</th>
+                          <th scope="col">ยศ</th>
+                          <th scope="col">เลขบัตรประชาชน</th>
+                          <th scope="col">เบอร์ติดต่อ</th>
+                          <th scope="col"></th>
+                        </tr>
+                      </thead>
+                      <tbody>
+                        <tr v-for="(item, index) in userlist" :key="index">
+                          <th scope="row">{{ index + 1 }}</th>
+                          <td>{{ item.firstName }}</td>
+                          <td>{{ item.lastName }}</td>
+                          <td>{{ item.Affiliation }}</td>
+                          <td>{{ item.rank }}</td>
+                          <td>{{ item.idcard }}</td>
+                          <td>{{ item.phone }}</td>
+                          <td>
+                            <MaterialButton
+                              variant="gradient"
+                              color="success"
+                              data-bs-toggle="modal"
+                              data-bs-target="#contractBackdrop"
+                              >เพิ่มผู้เช่าห้องพัก</MaterialButton
+                            >
+                          </td>
+                        </tr>
+                      </tbody>
+                    </table>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- modal -->
+    <div
+      class="modal fade"
+      id="seleteUserBackdrop"
+      data-bs-backdrop="static"
+      data-bs-keyboard="false"
+      tabindex="-1"
+      aria-labelledby="staticBackdropLabel"
+      aria-hidden="true"
+    >
+      <div class="modal-dialog modal-dialog-centered">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h5 class="modal-title" id="staticBackdropLabel">เพิ่มผู้เช่าลงคิว</h5>
+            <button
+              type="button"
+              class="btn-close"
+              data-bs-dismiss="modal"
+              aria-label="Close"
+            ></button>
+          </div>
+          <div class="modal-body">
+            <div>
+              <div class="mb-3">
+                <label>ชื่อผู้เช่า</label>
+                <v-select :options="options" v-model="selectedColor"></v-select>
+              </div>
+            </div>
+          </div>
+          <div class="modal-footer">
+            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
+              ปิดหน้าต่าง
+            </button>
+            <MaterialButton
+              variant="gradient"
+              color="success"
+              @click="submitForm"
+              html-type="submit"
+              >บันทึก</MaterialButton
+            >
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div
+      class="modal fade"
+      id="contractBackdrop"
+      data-bs-backdrop="static"
+      data-bs-keyboard="false"
+      tabindex="-1"
+      aria-labelledby="staticBackdropLabel"
+      aria-hidden="true"
+    >
+      <div class="modal-dialog modal-dialog-centered">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h5 class="modal-title" id="staticBackdropLabel">เพิ่มรายละเอียดสัญญา</h5>
+            <button
+              type="button"
+              class="btn-close"
+              data-bs-dismiss="modal"
+              aria-label="Close"
+            ></button>
+          </div>
+          <div class="modal-body">
+            <div>
+              <div class="mb-3">
+                <MaterialInput
+                  name="contract"
+                  :value="contract"
+                  @input="(event) => (contract = event.target.value)"
+                  class="input-group-static"
+                  label="วันทำสัญญา"
+                  type="text"
+                  placeholder="วันทำสัญญา"
+                />
+              </div>
+              <div class="mb-3">
+                <MaterialInput
+                  :value="Checkintime"
+                  @input="(event) => (Checkintime = event.target.value)"
+                  class="input-group-static"
+                  label="ระยะเวลาที่เข้าพัก"
+                  type="text"
+                  placeholder="ระยะเวลาที่เข้าพัก"
+                />
+              </div>
+              <div class="mb-3">
+                <MaterialInput
+                  :value="insurance"
+                  @input="(event) => (Affiliation = event.target.value)"
+                  class="input-group-static"
+                  label="เงินค่าประกัน"
+                  type="text"
+                  placeholder="เงินค่าประกัน"
+                />
+              </div>
+            </div>
+          </div>
+          <div class="modal-footer">
+            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
+              ปิดหน้าต่าง
+            </button>
+            <MaterialButton
+              variant="gradient"
+              color="success"
+              @click="submitForm"
+              html-type="submit"
+              >บันทึก</MaterialButton
+            >
           </div>
         </div>
       </div>
@@ -141,4 +373,3 @@ export default {
   color: #fff;
 }
 </style>
- 

src/views/Restroom/RoomView.vue

@@ -1,6 +1,7 @@
 <script>
 import MaterialInput from "@/components/MaterialInput.vue";
 import MaterialButton from "@/components/MaterialButton.vue";
+import MaterialCheckbox from "@/components/MaterialCheckbox.vue";
 import vueMkHeader from "@/assets/img/bg.jpg";
 import Breadcrumbs from "@/examples/Breadcrumbs.vue";
 import roomData from "@/assets/dataJson/rooms.json";
@@ -28,85 +29,17 @@ const NoRoom = [
   { title: "ชั้น 7" },
 ];
 
-const landingColumns = [
-  {
-    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,
-  },
-];
-
 export default {
   components: {
     MaterialInput,
     MaterialButton,
     Breadcrumbs,
+    MaterialCheckbox,
   },
   setup() {
     return {
       listRoom,
       NoRoom,
-      landingColumns,
       vueMkHeader,
       roomData,
     };
@@ -130,10 +63,13 @@ export default {
   },
   methods: {
     gotodetail(id, index) {
-      let action 
+      console.log(index);
-      index == true ? action = 'edit' : action = 'add'
+      let action;
+      if (index == "unavailable") action = "edit";
+      if (index == "waiting") action = "add";
+      if (index == "free") action = "add";
       this.$router.push({ path: `/room/detail/${id}`, query: { mode: action } });
-    }
+    },
   },
 };
 </script>
@@ -228,60 +164,41 @@ export default {
               </p>
               <div class="collapse show" id="collapseExample" aria-expanded="true">
                 <div>
+                  <div class="d-flex justify-content-end">
+                    <MaterialCheckbox id="terms" checked>
+                      <a href="javascript:;" class="text-success font-weight-bolder">
+                        ว่าง</a
+                      >
+                    </MaterialCheckbox>
+                    <MaterialCheckbox id="terms" >
+                      <a href="javascript:;" class="text-danger font-weight-bolder">
+                        ไม่ว่าง</a
+                      >
+                    </MaterialCheckbox>
+                    <MaterialCheckbox id="terms" >
+                      <a href="javascript:;" class=" font-weight-bolder" style="color: #fb8c00">
+                        รอซ่อม</a
+                      >
+                    </MaterialCheckbox>
+                    <MaterialCheckbox id="terms" >
+                      <a href="javascript:;" class="font-weight-bolder" style="color: #ffca28">
+                        รอคืนห้อง</a
+                      >
+                    </MaterialCheckbox>
+                  </div>
                   <div class="row row-cols-auto" :style="{ '--bs-gutter-x': '0.5rem' }">
                     <div class="col" v-for="(item, index) in roomData" :key="index">
                       <div
                         class="card mb-2"
-                        v-bind:class="{
+                        :class="{
-                          'bg-red': item?.status,
+                          'bg-red': item?.status == 'unavailable',
-                          'bg-green': !item?.status,
+                          'bg-green': item?.status == 'free',
+                          'bg-warning': item?.status == 'waiting',
+                          'bg-return': item?.status == 'return',
                         }"
                         :style="{ width: `110px` }"
                       >
                         <div class="card-body">
-                          <div
-                            style="
-                              text-align: right;
-                              margin-top: -10px;
-                              margin-right: -10px;
-                            "
-                          >
-                            <a
-                              v-if="item?.status"
-                              :href="`/room/update/${item?.dataIndex}`"
-                              class="card-link"
-                              ><span
-                                v-if="item?.status"
-                                class="material-icons"
-                                style="color: #fff"
-                              >
-                                edit
-                              </span>
-                              <span
-                                v-if="!item?.status"
-                                class="material-icons"
-                                style="color: #fff"
-                              >
-                                add
-                              </span>
-                            </a>
-                            <!-- data-bs-toggle="modal"
-                              data-bs-target="#staticBackdrop" -->
-                            <a
-                              :href="`/addUserRoom`"
-                              style="cursor: pointer"
-                              v-if="!item?.status"
-                              class="card-link"
-                            >
-                              <span
-                                v-if="!item?.status"
-                                class="material-icons"
-                                style="color: #fff"
-                              >
-                                add
-                              </span>
-                            </a>
-                          </div>
                           <p class="card-title">
                             <a
                               style="cursor: pointer"
@@ -345,8 +262,12 @@ export default {
   background: #d24c4a !important;
   color: #fff;
 }
-.bg-waring {
+.bg-warning {
-  background: #d1d3d5 !important;
+  background: #fb8c00 !important;
+  color: #fff;
+}
+.bg-return {
+  background: #ffca28 !important;
   color: #fff;
 }
 </style>

src/views/RoomLayout/RoomLayoutView.vue

@@ -162,8 +162,16 @@ export default {
                 :routes="[{ label: 'หน้าหลัก', route: '/' }, { label: 'ผังห้องพัก' }]"
               />
             </div>
-            <div class="text-end">
+          </div>
+          <div class="d-flex justify-content-end align-items-center">
+                <MaterialInput
+                  class="input-group-dynamic w-30 "
+                  icon="search"
+                  type="text"
+                  placeholder="Search"
+                />
                 <MaterialButton
+                style="margin-left: 20px;"
                 variant="gradient"
                 color="success"
                 data-bs-toggle="modal"
@@ -171,24 +179,22 @@ export default {
                 >สร้างผังห้อง</MaterialButton
               >
               </div>
-          </div>
-
           <div class="text-center pt-4">
             <table class="table table-hover border border-2 border-success">
               <thead class="border border-2 border-success border-bottom">
                 <tr>
                   <th scope="col">ลำดับ</th>
-                  <th scope="col">อาคาร</th>
                   <th scope="col">ตึก</th>
                   <th scope="col">จำนวนชั้น</th>
+                  <th scope="col">จำนวนห้อง</th>
                 </tr>
               </thead>
               <tbody>
                 <tr>
                   <th scope="row">1</th>
-                  <td>อาคาร1</td>
                   <td>ตึก1</td>
                   <td>3</td>
+                  <td>20</td>
                 </tr>
               </tbody>
             </table>
@@ -220,17 +226,7 @@ export default {
           </div>
           <div class="modal-body">
             <div>
-              <div class="mb-3">
+
-                <MaterialInput
-                  name="Edifice"
-                  :value="Edifice"
-                  @input="(event) => (Edifice = event.target.value)"
-                  class="input-group-static"
-                  label="อาคาร"
-                  type="text"
-                  placeholder="อาคาร"
-                />
-              </div>
               <div class="mb-3">
                 <MaterialInput
                   :value="Building"
@@ -251,6 +247,17 @@ export default {
                   placeholder="จำนวนชั้น"
                 />
               </div>
+              <div class="mb-3">
+                <MaterialInput
+                  name="Edifice"
+                  :value="Edifice"
+                  @input="(event) => (Edifice = event.target.value)"
+                  class="input-group-static"
+                  label="จำนวนห้อง"
+                  type="text"
+                  placeholder="จำนวนห้อง"
+                />
+              </div>
             </div>
           </div>
           <div class="modal-footer">

src/views/Users/UserlistView.vue

@@ -138,8 +138,16 @@ export default {
                 :routes="[{ label: 'หน้าหลัก', route: '/' }, { label: 'ทะเบียน' }]"
               />
             </div>
-            <div class="text-end">
+          </div>
+          <div class="d-flex justify-content-end align-items-center">
+                <MaterialInput
+                  class="input-group-dynamic w-30 "
+                  icon="search"
+                  type="text"
+                  placeholder="Search"
+                />
                 <MaterialButton
+                style="margin-left: 20px;"
                 variant="gradient"
                 color="success"
                 data-bs-toggle="modal"
@@ -147,8 +155,6 @@ export default {
                 >เพิ่มสมาชิก</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">
@@ -170,8 +176,8 @@ export default {
                   <th scope="row">{{ index + 1 }}</th>
                   <td>{{ item.firstName }}</td>
                   <td>{{ item.lastName }}</td>
-                  <td>{{ item.old }}</td>
                   <td>{{ item.birthday }}</td>
+                  <td>{{ item.old }}</td>
                   <td>{{ item.Affiliation }}</td>
                   <td>{{ item.rank }}</td>
                   <td>{{ item.idcard }}</td>

src/views/UtilitiesRoom/UtilitieView.vue

@@ -197,7 +197,7 @@ export default {
                   aria-controls="home"
                   aria-selected="true"
                 >
-                  บันทึกค่าใช้จ่ายบ้านพักส่วนกลาง ตร.
+                  บันทึกค่าใช้จ่ายบ้านพัก ตร.
                 </button>
               </li>
               <li class="nav-item" role="presentation">
@@ -212,7 +212,7 @@ export default {
                   aria-controls="profile"
                   aria-selected="false"
                 >
-                  บันทึกค่าใช้จ่ายบ้านพักส่วนกลาง บช.ตชด.
+                  บันทึกค่าใช้จ่ายบ้านพัก บช.ตชด.
                 </button>
               </li>
               <li class="nav-item" role="presentation">
@@ -238,13 +238,20 @@ export default {
                 role="tabpanel"
                 aria-labelledby="home-tab"
               >
-                <div class="text-end pt-4">
+                <div class="d-flex justify-content-end align-items-center pt-4">
+                  <MaterialInput
+                    class="input-group-dynamic w-30"
+                    icon="search"
+                    type="text"
+                    placeholder="Search"
+                  />
                   <MaterialButton
+                    style="margin-left: 20px"
                     variant="gradient"
                     color="success"
                     data-bs-toggle="modal"
                     data-bs-target="#staticBackdrop11"
-                    >เพิ่มค่าใช้จ่ายบ้านพักส่วนกลาง ตร.</MaterialButton
+                    >เพิ่มค่าใช้จ่ายบ้านพัก ตร.</MaterialButton
                   >
                 </div>
                 <div class="text-center pt-4">
@@ -284,13 +291,20 @@ export default {
                 role="tabpanel"
                 aria-labelledby="profile-tab"
               >
-                <div class="text-end pt-4">
+                <div class="d-flex justify-content-end align-items-center pt-4">
+                  <MaterialInput
+                    class="input-group-dynamic w-30"
+                    icon="search"
+                    type="text"
+                    placeholder="Search"
+                  />
                   <MaterialButton
+                    style="margin-left: 20px"
                     variant="gradient"
                     color="success"
                     data-bs-toggle="modal"
                     data-bs-target="#staticBackdrop12"
-                    >เพิ่มค่าใช้จ่ายบ้านพักส่วนกลาง บช.ตชด.</MaterialButton
+                    >เพิ่มค่าใช้จ่ายบ้านพัก บช.ตชด.</MaterialButton
                   >
                 </div>
                 <div class="text-center pt-4">
@@ -324,8 +338,15 @@ export default {
                 role="tabpanel"
                 aria-labelledby="contact-tab"
               >
-                <div class="text-end pt-4">
+                <div class="d-flex justify-content-end align-items-center pt-4">
+                  <MaterialInput
+                    class="input-group-dynamic w-30"
+                    icon="search"
+                    type="text"
+                    placeholder="Search"
+                  />
                   <MaterialButton
+                    style="margin-left: 20px"
                     variant="gradient"
                     color="success"
                     data-bs-toggle="modal"
@@ -355,7 +376,6 @@ export default {
                 </div>
               </div>
             </div>
-          
           </div>
         </div>
       </div>
@@ -375,7 +395,7 @@ export default {
         <div class="modal-content">
           <div class="modal-header">
             <h5 class="modal-title" id="staticBackdropLabel">
-              บันทึกค่าใช้จ่ายบ้านพักส่วนกลาง ตร.
+              บันทึกค่าใช้จ่ายบ้านพัก ตร. ประจำเดือนตุลาคม
             </h5>
             <button
               type="button"
@@ -388,7 +408,10 @@ export default {
             <div>
               <div class="mb-3">
                 <label>ตึก</label>
-                <v-select :options="optionsBuilding" v-model="selectedBuilding"></v-select>
+                <v-select
+                  :options="optionsBuilding"
+                  v-model="selectedBuilding"
+                ></v-select>
               </div>
               <div class="mb-3">
                 <label>ชั้น</label>
@@ -474,9 +497,9 @@ export default {
       <div class="modal-dialog modal-dialog-centered">
         <div class="modal-content">
           <div class="modal-header">
-            <h5 class="modal-title" id="staticBackdropLabel">
+            <h6 class="modal-title" id="staticBackdropLabel">
-              เพิ่มค่าใช้จ่ายบ้านพักส่วนกลาง บช.ตชด.
+              เพิ่มค่าใช้จ่ายบ้านพัก บช.ตชด. ประจำเดือนตุลาคม
-            </h5>
+            </h6>
             <button
               type="button"
               class="btn-close"
@@ -488,7 +511,10 @@ export default {
             <div>
               <div class="mb-3">
                 <label>ตึก</label>
-                <v-select :options="optionsBuilding" v-model="selectedBuilding"></v-select>
+                <v-select
+                  :options="optionsBuilding"
+                  v-model="selectedBuilding"
+                ></v-select>
               </div>
               <div class="mb-3">
                 <label>ชั้น</label>
@@ -544,7 +570,7 @@ 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"