update all UI

src/assets/dataJson/masterData.json

@@ -1,5 +1,17 @@
 {
     "ranks": [
+        {
+            "label": "นาย",
+            "value": "นาย"
+        },
+        {
+            "label": "นาง",
+            "value": "นาง"
+        },
+        {
+            "label": "นางสาว",
+            "value": "นางสาว"
+        },
         {
             "label": "ส.ต.ต.",
             "value": "ส.ต.ต."
@@ -102,6 +114,7 @@
         }
     ],
     "position": [
+       
         {
             "label": "รอง สว.",
             "value": "รอง สว."
@@ -140,6 +153,10 @@
         }
     ],
     "Affiliation": [
+        {
+            "label": "ลูกจ้าง",
+            "value": "ลูกจ้าง"
+        },
         {
             "label": "บช.ตซด.",
             "value": "บช.ตซด."
@@ -211,6 +228,7 @@
             "name": "อาคารแฟลต 1/11",
             "room": "24",
             "floor": "4",
+            "roomnumber": "12,13",
             "type": "ช.2"
         },
         {
@@ -218,6 +236,7 @@
             "name": "อาคารแฟลต 1/12",
             "room": "20",
             "floor": "4",
+            "roomnumber": "12,13",
             "type": "ช.2"
         },
         {
@@ -225,6 +244,7 @@
             "name": "อาคารแฟลต 1/13",
             "room": "24",
             "floor": "4",
+            "roomnumber": "12,13",
             "type": "ช.2"
         },
         {
@@ -232,6 +252,7 @@
             "name": "อาคารแฟลต 1/14",
             "room": "18",
             "floor": "3",
+            "roomnumber": "12,13",
             "type": "ช.3"
         },
         {
@@ -239,6 +260,7 @@
             "name": "อาคารแฟลต 1/15",
             "room": "32",
             "floor": "4",
+            "roomnumber": "12,13",
             "type": "ช.2"
         },
         {
@@ -246,6 +268,7 @@
             "name": "อาคารแฟลต 1/16",
             "room": "24",
             "floor": "4",
+            "roomnumber": "12,13",
             "type": "ช.2"
         },
         {
@@ -253,6 +276,7 @@
             "name": "อาคารแฟลต 1/17",
             "room": "32",
             "floor": "4",
+            "roomnumber": "12,13",
             "type": "ช.2"
         },
         {
@@ -260,6 +284,7 @@
             "name": "อาคารแฟลต 1/18",
             "room": "60",
             "floor": "5",
+            "roomnumber": "12,13",
             "type": "-"
         },
         {
@@ -267,6 +292,7 @@
             "name": "แฟลตลือชา 1",
             "room": "50",
             "floor": "5",
+            "roomnumber": "12,13",
             "type": "-"
         },
         {
@@ -274,6 +300,7 @@
             "name": "แฟลตลือชา 2",
             "room": "50",
             "floor": "5",
+            "roomnumber": "12,13",
             "type": "-"
         },
         {
@@ -281,6 +308,7 @@
             "name": "แฟลตลือชา 3",
             "room": "40",
             "floor": "5",
+            "roomnumber": "12,13",
             "type": "ช.2"
         },
         {
@@ -288,6 +316,7 @@
             "name": "แฟลตบางเขน 1",
             "room": "50",
             "floor": "5",
+            "roomnumber": "12,13",
             "type": "-"
         },
         {
@@ -295,49 +324,8 @@
             "name": "แฟลตบางเขน 2",
             "room": "50",
             "floor": "5",
+            "roomnumber": "12,13",
             "type": "ช.2"
-        },
-        {
-            "buil": "อาคารบ้านพักส่วนกลาง",
-            "name": "ลือชา ตร.",
-            "room": "-",
-            "floor": "-",
-            "type": "-"
-        },
-        {
-            "buil": "อาคารบ้านพักส่วนกลาง",
-            "name": "ทุ่งสองห้อง",
-            "room": "-",
-            "floor": "-",
-            "type": "-"
-        },
-        {
-            "buil": "อาคารบ้านพักส่วนกลาง",
-            "name": "วิภาวดี",
-            "room": "-",
-            "floor": "-",
-            "type": "-"
-        },
-        {
-            "buil": "อาคารบ้านพักส่วนกลาง",
-            "name": "ถนอมมิตร",
-            "room": "-",
-            "floor": "-",
-            "type": "-"
-        },
-        {
-            "buil": "อาคารบ้านพักส่วนกลาง",
-            "name": "อุดมสุข",
-            "room": "-",
-            "floor": "-",
-            "type": "-"
-        },
-        {
-            "buil": "อาคารบ้านพักส่วนกลาง",
-            "name": "เฉลิมลาภ",
-            "room": "-",
-            "floor": "-",
-            "type": "-"
         }
     ]
 }

src/assets/dataJson/rooms.json

@@ -2,6 +2,7 @@
     {
         "title": "ห้อง 1",
         "dataIndex": "1",
+        "ranks": "",
         "firstName": "",
         "laststName": "",
         "Affiliation": "",
@@ -10,6 +11,7 @@
       {
         "title": "ห้อง 2",
         "dataIndex": "2",
+        "ranks": "ส.ต.ต.",
         "firstName": "ปิติ2",
         "laststName": "มีดี",
         "Affiliation": "ฝอ. 2",
@@ -18,6 +20,7 @@
       {
         "title": "ห้อง 3",
         "dataIndex": "3",
+        "ranks": "",
         "firstName": "",
         "laststName": "",
         "Affiliation": "",
@@ -26,6 +29,7 @@
       {
         "title": "ห้อง 4",
         "dataIndex": "4",
+        "ranks": "ส.ต.ต.",
         "firstName": "ปิติ2",
         "laststName": "มีดี",
         "Affiliation": "ฝอ. 1",
@@ -34,6 +38,7 @@
       {
         "title": "ห้อง 5",
         "dataIndex": "5",
+        "ranks": "ส.ต.ต.",
         "firstName": "ปิติ3",
         "laststName": "มีดี",
         "Affiliation": "ฝอ. 1",
@@ -42,6 +47,7 @@
       {
         "title": "ห้อง 6",
         "dataIndex": "6",
+        "ranks": "ส.ต.ต.",
         "firstName": "ปิติ4",
         "laststName": "มีดี",
         "Affiliation": "ฝอ. 1",
@@ -50,6 +56,7 @@
       {
         "title": "ห้อง 7",
         "dataIndex": "7",
+        "ranks": "ส.ต.ต.",
         "firstName": "ปิติ3",
         "laststName": "มีดี",
         "Affiliation": "ฝอ. 1",
@@ -58,6 +65,7 @@
       {
         "title": "ห้อง 8",
         "dataIndex": "8",
+        "ranks": "ส.ต.ต.",
         "firstName": "ปิติ9",
         "laststName": "มีดี",
         "Affiliation": "ฝอ. 1",
@@ -66,6 +74,7 @@
       {
         "title": "ห้อง 9",
         "dataIndex": "9",
+        "ranks": "ส.ต.ต.",
         "firstName": "ปิติ5",
         "laststName": "มีดี",
         "Affiliation": "ฝอ. 4",
@@ -74,6 +83,7 @@
       {
         "title": "ห้อง 10",
         "dataIndex": "10",
+        "ranks": "ส.ต.ต.",
         "firstName": "ปิติ6",
         "laststName": "มีดี",
         "Affiliation": "ฝอ. 7",
@@ -82,6 +92,7 @@
       {
         "title": "ห้อง 11",
         "dataIndex": "11",
+        "ranks": "",
         "firstName": "",
         "laststName": "",
         "Affiliation": "",
@@ -90,6 +101,7 @@
       {
         "title": "ห้อง 12",
         "dataIndex": "12",
+        "ranks": "",
         "firstName": "",
         "laststName": "",
         "Affiliation": "",
@@ -98,6 +110,7 @@
       {
         "title": "ห้อง 13",
         "dataIndex": "13",
+        "ranks": "ส.ต.ต.",
         "firstName": "ปิติ7",
         "laststName": "มีดี",
         "Affiliation": "ฝอ. 2",

src/main.js

@@ -2,7 +2,7 @@ import { createApp } from "vue";
 import { createPinia } from "pinia";
 import App from "./App.vue";
 import router from "./router";
-import '@trevoreyre/autocomplete-vue/dist/style.css'
+// import '@trevoreyre/autocomplete-vue/dist/style.css'
 
 // Nucleo Icons
 import "./assets/css/nucleo-icons.css";

src/router/index.js

@@ -33,6 +33,7 @@ import addUserRoom from "../views/Restroom/AddRoom.vue"
 import Reports from "../views/Reports/ReportlistView.vue"
 import searchFilter from "../views/SearchAll/SearchView.vue"
 import Queue from "../views/Queue/QueueView.vue"
+import Expenses from "../views/Expenses/ExpensesView.vue"
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
   routes: [
@@ -76,6 +77,11 @@ const router = createRouter({
       name: "searchfilter", 
       component: searchFilter,
     },
+    {
+      path: "/expenses",
+      name: "expenses", 
+      component: Expenses,
+    },
     {
       path: "/queue",
       name: "queue", 

src/views/Expenses/ExpensesView.vue

@@ -0,0 +1,503 @@
+<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";
+import masterData from "@/assets/dataJson/masterData.json";
+
+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: "ฝอ.1", //สังกัด
+    rank: "ส.ต.ต.", //ยศ
+    old: "32",
+    status: "สมรส",
+    birthday: "04/03/2534",
+    idcard: "134044411441122",
+    phone: "0325647846",
+  },
+  {
+    dataIndex: "2",
+    firstName: "สมชัย",
+    lastName: "แสงสุข",
+    Affiliation: "ฝอ.2", //สังกัด
+    rank: "ส.ต.ต.", //ยศ
+    old: "32",
+    status: "โสด",
+    birthday: "14/07/2534",
+    idcard: "134044411441178",
+    phone: "0325647845",
+  },
+];
+
+export default {
+  components: {
+    MaterialInput,
+    MaterialButton,
+    Breadcrumbs,
+  },
+  setup() {
+    return {
+      listRoom,
+      NoRoom,
+      userlist,
+      vueMkHeader,
+      masterData,
+    };
+  },
+
+  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" },
+      ],
+      optionsBuilding: [
+        { label: "อาคารแฟลต 1/11", value: "1" },
+        { label: "อาคารแฟลต 1/12", value: "2" },
+        { label: "อาคารแฟลต 1/13", value: "3" },
+        { label: "อาคารแฟลต 1/14", value: "4" },
+        { label: "อาคารแฟลต 1/15", value: "5" },
+        { label: "อาคารแฟลต 1/16", value: "3" },
+        { label: "อาคารแฟลต 1/17", value: "4" },
+        { label: "อาคารแฟลต 1/18", value: "5" },
+        { label: "แฟลตลือชา 1", value: "5" },
+        { label: "แฟลตลือชา 2", value: "3" },
+        { label: "แฟลตลือชา 3", value: "4" },
+        { label: "แฟลตบางเขน 1", value: "5" },
+        { label: "แฟลตบางเขน 2", value: "5" },
+      ],
+      optionsFloor: [
+        { label: "ชั้น 1", value: "1" },
+        { label: "ชั้น 2", value: "2" },
+        { label: "ชั้น 3", value: "3" },
+        { label: "ชั้น 4", value: "4" },
+        { label: "ชั้น 5", value: "5" },
+      ],
+      optionsRoom: [
+        { label: "ห้อง 101", value: "1" },
+        { label: "ห้อง 202", value: "2" },
+        { label: "ห้อง 303", value: "3" },
+        { label: "ห้อง 404", value: "4" },
+        { label: "ห้อง 505", value: "5" },
+      ],
+      selectedBuilding: "อาคารแฟลต 1/11",
+      selectedFloor: "ชั้น 1",
+      selectedRoom: "ห้อง 101",
+      selectedColor: "",
+      firstName: "สมชัย",
+      lastName: "แสงสุข",
+      Affiliation: "", //สังกัด
+      rank: "", //ยศ
+      idcard: "134044411441178",
+      phone: "0325647845",
+      selectedRanks: "ส.ต.ต.",
+      selectedAffiliation: "ฝอ.2",
+      birthday: "14/07/2534",
+    };
+  },
+  created() {
+    console.log(this.masterData);
+  },
+  watch: {
+    selectedColor: function (newValue) {
+      // this.updateColor(newValue)
+      console.log(newValue);
+    },
+  },
+  methods: {
+    changedLabel(event) {
+      console.log(event);
+      // this.selected = event;
+    },
+
+    submitForm() {
+      let body = {
+        firstName: this.firstName,
+        lastName: this.lastName,
+        Affiliation: this.Affiliation,
+        rank: this.rank,
+        idcard: this.idcard,
+        phone: this.phone,
+      };
+      // let b = []
+      // b.push(body)
+      this.userlist.push(body);
+      console.log(this.userlist);
+    },
+  },
+};
+</script>
+<template>
+  <Header>
+    <div
+      class="page-header min-vh-45"
+      :style="`background-image: url(${vueMkHeader})`"
+      loading="lazy"
+    >
+      <div class="container">
+        <div class="row">
+          <div class="col-lg-7 text-center mx-auto position-relative">
+            <h1 class="pt-3 mt-n5 me-2 head-text">บันทึกค่าใช้จ่ายรายเดือน ตร</h1>
+          </div>
+        </div>
+      </div>
+    </div>
+  </Header>
+  <section>
+    <div class="card card-body blur shadow-blur mx-3 mx-md-4 mt-n6">
+      <div class="page-header min-vh-45">
+        <div class="container">
+          <div>
+            <Breadcrumbs
+              :routes="[
+                { label: 'หน้าหลัก', route: '/' },
+                { label: 'บันทึกค่าใช้จ่ายรายเดือน ตร' },
+              ]"
+            />
+          </div>
+          <div class="d-flex justify-content-end align-items-baseline">
+            <label style="margin-right: 10px">ค้นหาเลขที่ห้อง </label>
+            <MaterialInput
+              class="input-group-dynamic w-30"
+              icon="search"
+              type="text"
+              placeholder="Search"
+            />
+          </div>
+          <div class="text-center pt-4 table-responsive">
+            <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></th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <th scope="row">1</th>
+                  <td>อาคารแฟลต 1/11</td>
+                  <td>2</td>
+                  <td>202</td>
+                  <td>201</td>
+                  <td>205</td>
+                  <td>4</td>
+                  <td>8,000</td>
+                  <td>20,000</td>
+                  <td>8,000</td>
+                  <td>20,000</td>
+                  <td>10,000</td>
+                  <td>5/10</td>
+                  <td>/</td>
+                  <td></td>
+                  <td>5555</td>
+                  <td>
+                    <MaterialButton
+                      style="margin-bottom: 0px"
+                      variant="gradient"
+                      color="success"
+                      data-bs-toggle="modal"
+                      data-bs-target="#staticBackdrop11"
+                      >บันทึกค่าใช้จ่ายรายเดือน</MaterialButton
+                    >
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Modal -->
+    <div
+      class="modal fade"
+      id="staticBackdrop11"
+      data-bs-backdrop="static"
+      data-bs-keyboard="false"
+      tabindex="-1"
+      aria-labelledby="staticBackdropLabel"
+      aria-hidden="true"
+    >
+      <div class="modal-dialog modal-dialog-centered">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h5 class="modal-title" id="staticBackdropLabel">
+              บันทึกค่าใช้จ่ายบ้านพัก ตร.
+            </h5>
+            <button
+              type="button"
+              class="btn-close"
+              data-bs-dismiss="modal"
+              aria-label="Close"
+            ></button>
+          </div>
+          <div class="modal-body">
+            <div>
+              <div class="mb-3">
+                <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"
+                  :value="fee"
+                  @input="(event) => (fee = event.target.value)"
+                  class="input-group-static"
+                  label="ค่าธรรมเนียม"
+                  type="text"
+                  placeholder="ค่าธรรมเนียม"
+                />
+              </div> -->
+              <div class="mb-3">
+                <MaterialInput
+                  :value="Waterbill"
+                  @input="(event) => (Waterbill = event.target.value)"
+                  class="input-group-static"
+                  label="ค่าน้ำประปา"
+                  type="text"
+                  placeholder="ค่าน้ำประปา"
+                />
+              </div>
+              <div class="mb-3">
+                <MaterialInput
+                  :value="Electricitybill"
+                  @input="(event) => (Electricitybill = event.target.value)"
+                  class="input-group-static"
+                  label="ค่าไฟฟ้า"
+                  type="text"
+                  placeholder="ค่าไฟฟ้า"
+                />
+              </div>
+              <div class="mb-3">
+                <MaterialInput
+                  :value="Central"
+                  @input="(event) => (Central = event.target.value)"
+                  class="input-group-static"
+                  label="ค่าไฟฟ้าส่วนกลาง"
+                  type="text"
+                  placeholder="ค่าไฟฟ้าส่วนกลาง"
+                />
+              </div>
+              <div class="mb-3">
+                <MaterialInput
+                  :value="Costs"
+                  @input="(event) => (Costs = event.target.value)"
+                  class="input-group-static"
+                  label="ค่าบำรุงลิฟท์"
+                  type="text"
+                  placeholder="ค่าบำรุงลิฟท์"
+                />
+              </div>
+              <div class="mb-3">
+                <MaterialInput
+                  :value="Insurancecost"
+                  @input="(event) => (Insurancecost = event.target.value)"
+                  class="input-group-static"
+                  label="เลขก่อน"
+                  type="text"
+                  placeholder="เลขก่อน"
+                />
+              </div>
+              <div class="mb-3">
+                <MaterialInput
+                  :value="installments"
+                  @input="(event) => (installments = 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">บันทึก</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">
+                <label>สังกัด</label>
+                <v-select
+                  :options="masterData?.Affiliation"
+                  v-model="selectedAffiliation"
+                ></v-select>
+              </div>
+              <div class="mb-3">
+                <label>ยศ</label>
+                <v-select :options="masterData?.ranks" v-model="selectedRanks"></v-select>
+              </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="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 {
+  border: 2px solid #567b57 !important;
+  color: #000;
+}
+.bg-red {
+  border: 2px solid #d24c4a !important;
+  color: #000;
+}
+.bg-warning {
+  border: 2px solid #fb8c00 !important;
+  color: #000;
+}
+.bg-return {
+  border: 2px solid #ffca28 !important;
+  color: #000;
+}
+.bg-special {
+  border: 2px solid #edc7c7 !important;
+  color: #000;
+}
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+input[type="number"] {
+  -moz-appearance: textfield;
+}
+.breadcrumb-item a:hover {
+  color: #4caf50 !important;
+}
+</style>

src/views/Presentation/Sections/PresentationInformation.vue

@@ -38,7 +38,7 @@
                     </div>
                 </div>
             </div>
-            <div class="col-sm-3">
+            <!-- <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>
@@ -48,8 +48,8 @@
                         </RouterLink>
                     </div>
                 </div>
-            </div>
+            </div> -->
-            <div class="col-sm-3 mt-4">
+            <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>
@@ -71,6 +71,17 @@
                     </div>
                 </div>
             </div>
+            <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>
+                        <img src="../../../assets/img/accounting.png" alt="title" loading="lazy" class="w-50" />
+                        <RouterLink :to="{ name: 'expenses' }" class="dropdown-item border-radius-md">
+                          <a href="#" class="btn btn-success mt-4">บันทึกค่าใช้จ่ายรายเดือน ตร</a>
+                        </RouterLink>
+                    </div>
+                </div>
+            </div>
         </div>
     </div>
 </section>

src/views/Queue/QueueView.vue

@@ -32,6 +32,7 @@ const userlist = [
     Affiliation: "ฝอ.2", //สังกัด
     rank: "ส.ต.ต.", //ยศ
     old: "32",
+    status: "สมรส",
     birthday: "04/03/2534",
     idcard: "134044411441122",
     phone: "0325647846",
@@ -43,6 +44,7 @@ const userlist = [
     Affiliation: "ฝอ.2", //สังกัด
     rank: "ส.ต.ต.", //ยศ
     old: "32",
+    status: "โสด",
     birthday: "14/07/2534",
     idcard: "134044411441178",
     phone: "0325647845",
@@ -136,11 +138,35 @@ export default {
               :routes="[{ label: 'หน้าหลัก', route: '/' }, { label: 'ระบบคิว' }]"
             />
           </div>
-          <div class="d-flex justify-content-end align-items-baseline">
+          <div class="d-flex justify-content-between align-items-baseline">
+            <div class="mb-3">
+              <div class="form-check form-check-inline">
+                <label style="margin-right: 20px">สถานภาพ</label>
+                <input
+                  class="form-check-input"
+                  type="radio"
+                  name="inlineRadioOptions"
+                  id="inlineRadio1"
+                  value="โสด"
+                />
+                <label class="form-check-label" for="inlineRadio1">โสด</label>
+              </div>
+              <div class="form-check form-check-inline">
+                <input
+                  class="form-check-input"
+                  type="radio"
+                  name="inlineRadioOptions"
+                  id="inlineRadio2"
+                  value="สมรส"
+                />
+                <label class="form-check-label" for="inlineRadio2">สมรส</label>
+              </div>
+            </div>
+            <div class="d-flex align-items-baseline">
               <label style="margin-right: 20px">ค้นหาชื่อ </label>
               <MaterialInput
-             style="margin-right: 20px"
+                style="margin-right: 20px; width:300px"
-              class="input-group-dynamic w-30"
+                class="input-group-dynamic "
                 icon="search"
                 type="text"
                 placeholder="Search"
@@ -153,17 +179,16 @@ export default {
                 >เพิ่มผู้เช่าลงคิว</MaterialButton
               >
             </div>
+          </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>
-                  <th scope="col">ยศ</th>
+                  <th scope="col">สถานภาพ</th>
                   <th scope="col">เลขบัตรประชาชน</th>
                   <th scope="col">เบอร์ติดต่อ</th>
                 </tr>
@@ -171,15 +196,11 @@ export default {
               <tbody>
                 <tr v-for="(item, index) in userlist" :key="index">
                   <th scope="row">{{ index + 1 }}</th>
-                  <td>{{ item.firstName }}</td>
+                  <td>{{ item.rank }} {{ item.firstName }} {{ item.lastName }}</td>
-                  <td>{{ item.lastName }}</td>
-                  <td>{{ item.birthday }}</td>
-                  <td>{{ item.old }}</td>
                   <td>{{ item.Affiliation }}</td>
-                  <td>{{ item.rank }}</td>
+                  <td>{{ item.status }}</td>
                   <td>{{ item.idcard }}</td>
                   <td>{{ item.phone }}</td>
-
                 </tr>
               </tbody>
             </table>
@@ -254,7 +275,6 @@ export default {
 .bg-special {
   border: 2px solid #edc7c7 !important;
   color: #000;
-
 }
 input::-webkit-outer-spin-button,
 input::-webkit-inner-spin-button {

src/views/Reports/ReportlistView.vue

@@ -3,6 +3,7 @@ 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";
+import masterData from "@/assets/dataJson/masterData.json";
 
 const listRoom = [
   { title: "ตึก 1" },
@@ -61,6 +62,7 @@ export default {
       NoRoom,
       userlist,
       vueMkHeader,
+      masterData,
     };
   },
 
@@ -74,6 +76,26 @@ export default {
         { label: "Laravel", value: "PHP" },
         { label: "Phoenix", value: "Elixir" },
       ],
+      optionYear:[ 
+        { label: "2023", value: "2023" },
+        { label: "2022", value: "2022" },
+        { label: "2021", value: "2021" },
+        { label: "2020", value: "2020" }
+      ],
+      optionMonth:[
+        { label: "มกราคม", value: "มกราคม" },
+        { label: "กุมภาพันธ์", value: "กุมภาพันธ์" },
+        { label: "มีนาคม", value: "มีนาคม" },
+        { label: "เมษายน", value: "เมษายน" },
+        { label: "พฤษภาคม", value: "พฤษภาคม" },
+        { label: "มิถุนายน", value: "มิถุนายน" },
+        { label: "กรกฎาคม", value: "กรกฎาคม" },
+        { label: "สิงหาคม", value: "สิงหาคม" },
+        { label: "กันยายน", value: "กันยายน" },
+        { label: "ตุลาคม", value: "ตุลาคม" },
+        { label: "พฤศจิกายน", value: "พฤศจิกายน" },
+        { label: "ธันวาคม", value: "ธันวาคม" },
+      ],
       selectedColor: "",
       firstName: "",
       lastName: "",
@@ -81,6 +103,10 @@ export default {
       rank: "", //ยศ
       idcard: "",
       phone: "",
+      selectedAffiliation: "ฝอ.2",
+      selectedYear:"2023",
+      selectedMonth:"พฤศจิกายน"
+
     };
   },
   watch: {
@@ -193,8 +219,10 @@ export default {
                 aria-labelledby="home-tab"
               >
                 <div class="d-flex justify-content-between align-items-baseline">
-                  <div class="d-flex">
+                  <div>
-                    <h5>ประจำเดือน ตุลาคม</h5>
+                    <h5>ประจำเดือน พฤศจิกายน</h5>
+                    <br />
+                    <h5>รวมค่าใช้จ่ายทั้งหมด : 18,111</h5>
                   </div>
                   <div class="d-flex pt-4">
                     <MaterialButton
@@ -225,7 +253,29 @@ export default {
                     </MaterialButton>
                   </div>
                 </div>
-
+                <div class="d-flex justify-content-end align-items-baseline">
+                    <div class="mb-3 w-15" style="margin-right: 5px">
+                      <label>เดือน</label>
+                      <v-select
+                        :options="optionMonth"
+                        v-model="selectedMonth"
+                      ></v-select>
+                    </div>
+                    <div class="mb-3 w-10 " style="margin-right: 5px">
+                      <label>พ.ศ.</label>
+                      <v-select
+                        :options="optionYear"
+                        v-model="selectedYear"
+                      ></v-select>
+                    </div>
+                    <div class="mb-3 w-15 ">
+                      <label>สังกัด</label>
+                      <v-select
+                        :options="masterData?.Affiliation"
+                        v-model="selectedAffiliation"
+                      ></v-select>
+                    </div>
+                  </div>
                 <div class="text-center pt-4 table-responsive">
                   <table class="table table-hover border border-2 border-success">
                     <thead class="border border-2 border-success border-bottom">
@@ -234,7 +284,6 @@ 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>
@@ -253,8 +302,7 @@ export default {
                         <td>แฟลตลือชา 2</td>
                         <td>3</td>
                         <td>303</td>
-                        <td>ส.ต.ต.</td>
+                        <td>ส.ต.ต. มีนา บานเย็น</td>
-                        <td>มีนา บานเย็น</td>
                         <td>325</td>
                         <td>365</td>
                         <td>200</td>
@@ -268,8 +316,7 @@ export default {
                         <td>แฟลตลือชา 2</td>
                         <td>3</td>
                         <td>303</td>
-                        <td>ส.ต.ต.</td>
+                        <td>ส.ต.ต. มีนา บานเย็น</td>
-                        <td>มีนา บานเย็น</td>
                         <td>325</td>
                         <td>365</td>
                         <td>200</td>
@@ -289,8 +336,10 @@ export default {
                 aria-labelledby="profile-tab"
               >
                 <div class="d-flex justify-content-between align-items-baseline">
-                  <div class="d-flex">
+                  <div>
-                    <h5>ประจำเดือน ตุลาคม</h5>
+                    <h5>ประจำเดือน พฤศจิกายน</h5>
+                    <br />
+                    <h5>รวมค่าใช้จ่ายทั้งหมด : 18,111</h5>
                   </div>
                   <div class="d-flex pt-4">
                     <MaterialButton
@@ -379,7 +428,7 @@ export default {
                     <tbody>
                       <tr>
                         <th scope="row">1</th>
-                        <td>ตุลาคม</td>
+                        <td>พฤศจิกายน</td>
                         <td>อาคารบ้านพัก บช. ตชด.</td>
                         <td>
                           <MaterialButton
@@ -412,7 +461,7 @@ export default {
                       </tr>
                       <tr>
                         <th scope="row">1</th>
-                        <td>ตุลาคม</td>
+                        <td>พฤศจิกายน</td>
                         <td>อาคารบ้านพักส่วนกลาง</td>
                         <td>
                           <MaterialButton
@@ -445,7 +494,7 @@ export default {
                       </tr>
                       <tr>
                         <th scope="row">1</th>
-                        <td>ตุลาคม</td>
+                        <td>พฤศจิกายน</td>
                         <td>อาคารบ้านพัก ตร.</td>
                         <td>
                           <MaterialButton

src/views/Restroom/AddRoom.vue

@@ -30,6 +30,55 @@ const NoRoom = [
   { title: "ชั้น 7" },
 ];
 
+     // {
+        //     "buil": "อาคารบ้านพักส่วนกลาง",
+        //     "name": "ลือชา ตร.",
+        //     "room": "-",
+        //     "floor": "-",
+        //     "roomnumber": "-",
+        //     "type": "-"
+        // },
+        // {
+        //     "buil": "อาคารบ้านพักส่วนกลาง",
+        //     "name": "ทุ่งสองห้อง",
+        //     "room": "-",
+        //     "floor": "-",
+        //     "roomnumber": "-",
+        //     "type": "-"
+        // },
+        // {
+        //     "buil": "อาคารบ้านพักส่วนกลาง",
+        //     "name": "วิภาวดี",
+        //     "room": "-",
+        //     "floor": "-",
+        //     "roomnumber": "-",
+        //     "type": "-"
+        // },
+        // {
+        //     "buil": "อาคารบ้านพักส่วนกลาง",
+        //     "name": "ถนอมมิตร",
+        //     "room": "-",
+        //     "floor": "-",
+        //     "roomnumber": "-",
+        //     "type": "-"
+        // },
+        // {
+        //     "buil": "อาคารบ้านพักส่วนกลาง",
+        //     "name": "อุดมสุข",
+        //     "room": "-",
+        //     "floor": "-",
+        //     "roomnumber": "-",
+        //     "type": "-"
+        // },
+        // {
+        //     "buil": "อาคารบ้านพักส่วนกลาง",
+        //     "name": "เฉลิมลาภ",
+        //     "room": "-",
+        //     "floor": "-",
+        //     "roomnumber": "-",
+        //     "type": "-"
+        // }
+
 const userlist = [
   {
     dataIndex: "1",

src/views/Restroom/DetailRoomPage.vue

@@ -14,6 +14,7 @@ const userlist = [
     rank: "ส.ต.ต.",
     idcard: "134044411441122",
     phone: "0325647846",
+    bookNumber: "1234",
     ContractDate: "12/11/2566", //สังกัด
     Lengthofstay: "3 เดือน", //ยศ
     InsuranceMoney: "10,000",
@@ -27,6 +28,7 @@ const userlist = [
     rank: "ส.ต.ต.",
     idcard: "134044411441178",
     phone: "0325647845",
+    bookNumber: "1234",
     ContractDate: "12/11/2566", //สังกัด
     Lengthofstay: "3 เดือน", //ยศ
     InsuranceMoney: "10,000",
@@ -68,6 +70,7 @@ export default {
       old: "",
       birthday: "",
       installments: "",
+      booknumber:""
     };
   },
   created() {
@@ -75,16 +78,15 @@ export default {
     if (this.$route.params.id) {
       this.id = this.$route.params.id;
     }
-    this.mode == "add" ? (this.statusedit = false) : (this.statusedit = true);
     // this.$route.query
   },
   methods: {
     gotoAction() {
-      if (this.mode == "edit") {
+      // if (this.mode == "edit") {
-        this.$router.push({ path: `/room/update/${this.id}` });
+      this.$router.push({ path: `/room/update/${this.id}`, query: { mode: this.mode } });
-      } else {
+      // } else {
-        this.$router.push({ path: `/addUserRoom` });
+      //   this.$router.push({ path: `/addUserRoom` , query: { mode: this.mode } });
-      }
+      // }
     },
   },
 };
@@ -121,18 +123,10 @@ export default {
           <!-- d-flex justify-content-between -->
           <div class="d-flex justify-content-between align-items-baseline">
             <h4>รายละเอียดห้องพัก 101</h4>
-            <div v-if="mode == 'edit'">
+            <div>
               <MaterialButton variant="gradient" color="success" @click="gotoAction()"
                 >จัดการห้องพัก</MaterialButton
               >
-              <!-- <MaterialButton
-                style="margin-left: 20px; margin-right: 10px"
-                variant="gradient"
-                color="warning"
-                data-bs-toggle="modal"
-                data-bs-target="#Returntheroom"
-                >คืนห้อง</MaterialButton
-              > -->
             </div>
           </div>
           <div class="row pt-4">
@@ -140,30 +134,31 @@ export default {
               <div class="row g-0">
                 <div class="col-md-10">
                   <div class="card-body">
-                    <div class="row" v-if="statusedit == true">
+                    <div class="row" v-if="this.mode !== 'add'">
                       <h5 class="card-title">รายละเอียดผู้เช่า</h5>
                       <div class="col-5">
-                        <p class="card-text">ชือ : มานะ</p>
+                        <p class="card-text">ชือ : ส.ต.ต. มานะ</p>
                         <p class="card-text">สถานะห้อง : ไม่ว่าง</p>
-                        <p class="card-text">ยศ : ส.ต.ต.</p>
+                        <p class="card-text">สังกัด : ฝอ. 1</p>
-                        <p class="card-text">วันเกิด : 12/02/2514</p>
+                        <p class="card-text">เลขบัตรประชาชน : 123456123456</p>
                         <p class="card-text">วันทำสัญญา : 12/02/2564</p>
-                        <p class="card-text">อายุ : 33 ปี</p>
+                        
                         <p class="card-text">ระยะเวลาที่เข้าพัก : 3 เดือน</p>
                       </div>
                       <div class="col-7">
                         <p class="card-text">นามสกุล : ถือดี</p>
-                        <p class="card-text">สังกัด : ฝอ. 1</p>
-                        <p class="card-text">เลขบัตรประชาชน : 123456123456</p>
                         <p class="card-text">เบอร์โทร : 0972534887</p>
                         <p class="card-text">เงินค่าประกัน : 12,000</p>
+                        <p class="card-text">งวดค่าประกัน : 5/10</p>
+                        <p class="card-text">จำนวนงวดค่าประกัน : 2,000</p>
+                        <p class="card-text">ยอดคงเหลือค่าประกัน : 6,000</p>
                       </div>
                     </div>
-                    <div class="row">
+                    <div class="row" v-if="this.mode !== 'special'">
                       <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">มิเตอร์น้ำ/ไฟ : 745/546</p> -->
                         <p class="card-text">สภาพห้อง : ปกติ</p>
                       </div>
                       <div class="col-5">
@@ -186,24 +181,25 @@ 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>
                           <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>
-                          <td>{{ item.lastName }}</td>
+                            {{ item.rank }} {{ item.firstName }} {{ item.lastName }}
+                          </td>
                           <td>{{ item.Affiliation }}</td>
-                          <td>{{ item.rank }}</td>
                           <td>{{ item.idcard }}</td>
                           <td>{{ item.phone }}</td>
+                          <td>{{ item.bookNumber }}</td>
                           <td>
                             <MaterialButton
                               variant="gradient"
@@ -213,6 +209,17 @@ export default {
                               >เพิ่มผู้เช่าห้องพัก</MaterialButton
                             >
                           </td>
+                          <td>
+                            <MaterialButton
+                            style="margin-left: 20px"
+                            variant="gradient"
+                            color="success"
+                            data-bs-toggle="modal"
+                            data-bs-target="#addBookBackdrop"
+                            >เพิ่มเลขลงรับหนังสือ</MaterialButton
+                          >
+                          </td>
+                          
                         </tr>
                       </tbody>
                     </table>
@@ -411,14 +418,20 @@ export default {
                 </div>
               </div>
               <div>
-                <label style="padding-left: 30px;">หลักฐานแสดงการชําระค่าไฟเดือนล่าสุด</label>
+                <label style="padding-left: 30px"
+                  >หลักฐานแสดงการชําระค่าไฟเดือนล่าสุด</label
+                >
               </div>
               <div
                 class="mb-3"
-                style="margin-left:10px; display: flex; justify-content: space-between; align-items: center"
+                style="
+                  margin-left: 10px;
+                  display: flex;
+                  justify-content: space-between;
+                  align-items: center;
+                "
               >
                 <div class="form-check form-check-inline">
-                  
                   <input
                     class="form-check-input"
                     type="radio"
@@ -475,6 +488,58 @@ export default {
           </div>
         </div>
       </div>
+    </div>
+
+        <!-- modal -->
+        <div
+      class="modal fade"
+      id="addBookBackdrop"
+      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 style="margin-left:-5px">กรอกเลขลงรับหนังสือ</label>
+                <textarea
+                  :value="booknumber"
+                  @input="(event) => (booknumber = event.target.value)"
+                  class="form-control"
+                  id="exampleFormControlTextarea1"
+                  rows="3"
+                  placeholder="ตัวอย่าง : 11244"
+                ></textarea>
+              </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>

src/views/Restroom/RoomView.vue

@@ -35,6 +35,12 @@ export default {
         { label: "Laravel", value: "PHP" },
         { label: "Phoenix", value: "Elixir" },
       ],
+      typeRoom: [
+        { label: "ช1", value: "ช1" },
+        { label: "ช2", value: "ช2" },
+        { label: "ช3", value: "ช3" },
+      ],
+
       listRoom: [
         { label: "อาคารแฟลต 1/11", value: "1" },
         { label: "อาคารแฟลต 1/12", value: "2" },
@@ -50,6 +56,7 @@ export default {
         { label: "แฟลตบางเขน 1", value: "5" },
         { label: "แฟลตบางเขน 2", value: "5" },
       ],
+      selectedtypeRoom: "ช1",
       selectedColor: "",
       statusfree: false,
       statusreturn: false,
@@ -68,6 +75,8 @@ export default {
       if (index == "unavailable") action = "edit";
       if (index == "waiting") action = "add";
       if (index == "free") action = "add";
+      if (index == "special") action = "special";
+      if (index == "return") action = "return";
       this.$router.push({ path: `/room/detail/${id}`, query: { mode: action } });
     },
     onChangeEvent(e) {
@@ -166,9 +175,17 @@ export default {
           </div>
 
           <div class="text-center pt-4">
+            <div class="d-flex justify-content-start align-items-baseline pt-1 w-35">
+              <label class="w-30" style="margin-right: 5px"> เลือกประเภทห้อง</label>
+              <v-select
+                class="w-50"
+                :options="typeRoom"
+                v-model="selectedtypeRoom"
+              ></v-select>
+            </div>
             <div class="d-flex justify-content-between align-items-baseline p-2">
               <div class="text-start">
-                <h6>{{ selectedlistRoom }}</h6>
+                <h6>{{ selectedlistRoom?.label }}</h6>
                 <p class="d-flex align-items-baseline p-2">
                   <span>คณะกรรมการประจําตึก : มารุช ดีงาม , บารมี ดีงาม</span>
                   <a data-bs-toggle="modal" data-bs-target="#Edituser"
@@ -213,7 +230,7 @@ export default {
                   :checked="statusreturn"
                   @change="onChangeEvent('return')"
                 >
-                  <a href="javascript:;" class="font-weight-bolder"> รอคืนห้อง</a>
+                  <a href="javascript:;" class="font-weight-bolder"> ผ่อนผัน</a>
                 </MaterialCheckbox>
               </div>
             </div>
@@ -250,25 +267,23 @@ export default {
                               'bg-return': item?.status == 'return',
                               'bg-special': item?.status == 'special',
                             }"
-                            :style="{ width: `115px`, height: `170px` }"
+                            :style="{ width: `220px`, height: `170px` }"
                           >
                             <div class="card-body p-1">
                               <a
                                 style="cursor: pointer"
                                 @click="gotodetail(item?.dataIndex, item?.status)"
-                                class="text-drck"
                               >
                                 <p
                                   class="card-title"
-                                  :class="{
+                                  style="
-                                    'bg-red': item?.status == 'unavailable',
+                                    color: #000;
-                                    'bg-green': item?.status == 'free',
+                                    border: 2px solid #f7f4f0 !important;
-                                    'bg-warning2': item?.status == 'waiting',
+                                    border-radius: 10px;
-                                    'bg-return': item?.status == 'return',
+                                    background: white;
-                                    'bg-special': item?.status == 'special',
+                                  "
-                                  }"
                                 >
-                                  <a>{{ item?.title }}</a>
+                                  <a style="font-size: medium">{{ item?.title }}</a>
                                 </p>
                                 <p
                                   v-if="item?.status == 'free'"
@@ -296,12 +311,14 @@ export default {
                                   class="card-title bgg-return"
                                   style="font-size: 16px"
                                 >
-                                  {{ "รอคืนห้อง" }}
+                                  {{ "ผ่อนผัน" }}
                                 </p>
-                                <p class="card-title" style="font-size: 14px">
+                                <p v-if="item?.status !== 'special'" class="card-title" style="font-size: 14px">
-                                  {{ item?.firstName }}
+                                  {{ item?.ranks }} {{ item?.firstName }}
+                                  {{ item?.laststName }}
                                 </p>
-                                <p class="card-title" style="font-size: 14px">
+                                <p v-if="item?.status == 'special'" class="card-title text-red mt-1" style="font-size: 14px">
+                                  {{ item?.ranks }} {{ item?.firstName }}
                                   {{ item?.laststName }}
                                 </p>
                                 <div>
@@ -313,7 +330,7 @@ export default {
                                   <span
                                     v-if="item?.status == 'special'"
                                     class="text-red"
-                                    style="text-align: right; font-size: small"
+                                    style="text-align: right; font-size: 16px"
                                     >{{ "กรณีพิเศษ" }}</span
                                   >
                                 </div>
@@ -412,24 +429,24 @@ export default {
 </template>
 <style>
 .bg-green {
-  border: 2px solid #567b57 !important;
+  background-color: #567b57 !important;
-  color: #000;
+  color: #fff;
 }
 .bg-red {
-  border: 2px solid #d24c4a !important;
+  background-color: #d24c4a !important;
-  color: #000;
+  color: #fff !important;
 }
 .bg-warning2 {
-  border: 2px solid #fb8c00 !important;
+  background-color: #fb8c00 !important;
-  color: #000;
+  color: #fff !important;
 }
 .bg-return {
-  border: 2px solid #ffca28 !important;
+  background-color: #816613 !important;
-  color: #000;
+  color: #fff !important;
 }
 .bg-special {
-  border: 2px solid #edc7c7 !important;
+  background-color: #edc7c7 !important;
-  color: #000;
+  color: #fff !important;
 }
 .bgg-green {
   background-color: #567b57 !important;
@@ -444,11 +461,11 @@ export default {
   color: #fff !important;
 }
 .bgg-return {
-  background-color: #ffca28 !important;
+  background-color: #816613 !important;
   color: #fff !important;
 }
 .bgg-special {
-  background-color: #edc7c7 !important;
+  background-color: #cbc0c0 !important;
   color: #fff !important;
 }
 .text-red {

src/views/Restroom/UpdateRoom.vue

@@ -212,8 +212,18 @@ export default {
       Roomtype: "ช๑",
       Roomconditions: "ปกติ",
       selectedRoomtype: "ช๑",
+      statusedit: false,
+      mode: "",
+      id: "",
     };
   },
+  created() {
+    this.mode = this.$route.query.mode;
+    if (this.$route.params.id) {
+      this.id = this.$route.params.id;
+    }
+    // this.$route.query
+  },
   watch: {
     selectedColor: function (newValue) {
       // this.updateColor(newValue)
@@ -295,18 +305,7 @@ export default {
                   แก้ไขรายละเอียดห้องพัก
                 </button>
                 <button
-                  class="nav-link"
+                  v-if="this.mode !== 'add'"
-                  id="v-pills-profile-tab"
-                  data-bs-toggle="pill"
-                  data-bs-target="#v-pills-profile"
-                  type="button"
-                  role="tab"
-                  aria-controls="v-pills-profile"
-                  aria-selected="false"
-                >
-                  จัดการคิว
-                </button>
-                <button
                   class="nav-link"
                   id="v-pills-messages-tab"
                   data-bs-toggle="pill"
@@ -318,18 +317,6 @@ export default {
                 >
                   คืนห้องพัก
                 </button>
-                <button
-                  class="nav-link"
-                  id="v-pills-settings-tab"
-                  data-bs-toggle="pill"
-                  data-bs-target="#v-pills-settings"
-                  type="button"
-                  role="tab"
-                  aria-controls="v-pills-settings"
-                  aria-selected="false"
-                >
-                  ค่าสาธารณูปโภค
-                </button>
               </div>
             </div>
             <div class="col-lg-9">
@@ -348,19 +335,9 @@ export default {
                           :value="lastName"
                           @input="(event) => (lastName = event.target.value)"
                           class="input-group-static"
-                          label="มิเตอร์น้ำ"
+                          label="เลขห้อง"
                           type="text"
-                          placeholder="มิเตอร์น้ำ"
+                          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">
@@ -434,12 +411,8 @@ 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>
-                            <th scope="col">ยศ</th>
                             <th scope="col">เลขบัตรประชาชน</th>
                             <th scope="col">เบอร์ติดต่อ</th>
                           </tr>
@@ -447,12 +420,8 @@ export default {
                         <tbody>
                           <tr v-for="(item, index) in userlist" :key="index">
                             <th scope="row">{{ index + 1 }}</th>
-                            <td>{{ item.firstName }}</td>
+                            <td>{{ item.rank }} {{ item.firstName }} {{ item.lastName }}</td>
-                            <td>{{ item.lastName }}</td>
-                            <td>{{ item.birthday }}</td>
-                            <td>{{ item.old }}</td>
                             <td>{{ item.Affiliation }}</td>
-                            <td>{{ item.rank }}</td>
                             <td>{{ item.idcard }}</td>
                             <td>{{ item.phone }}</td>
                           </tr>
@@ -706,7 +675,7 @@ export default {
                                 <td>8,000</td>
                                 <td>20,000</td>
                                 <td>10,000</td>
-                                <td>5</td>
+                                <td>5/10</td>
                               </tr>
                             </tbody>
                           </table>
@@ -756,7 +725,7 @@ export default {
                                 <td>202</td>
                                 <td>20,000</td>
                                 <td>8,000</td>
-                                <td>8</td>
+                                <td>8/10</td>
                               </tr>
                             </tbody>
                           </table>

src/views/RoomLayout/RoomLayoutView.vue

@@ -105,7 +105,7 @@ export default {
       NoRoom,
       landingColumns,
       vueMkHeader,
-      masterData
+      masterData,
     };
   },
 
@@ -195,9 +195,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> -->
+                  <!-- <th scope="col">ประเภทห้องพัก</th> -->
                 </tr>
               </thead>
               <tbody>
@@ -207,7 +208,8 @@ export default {
                   <td>{{ item?.name }}</td>
                   <td>{{ item?.floor }}</td>
                   <td>{{ item?.room }}</td>
-                  <td>{{item?.type}}</td>
+                  <!-- <td>{{ item?.roomnumber }}</td> -->
+                  <!-- <td>{{ item?.type }}</td> -->
                 </tr>
               </tbody>
             </table>
@@ -259,14 +261,15 @@ export default {
                   placeholder="ชื่ออาคาร"
                 />
               </div>
+              <md-chips v-model="fruits" md-placeholder="Add fruit..."></md-chips>
               <div class="mb-3">
                 <MaterialInput
                   :value="Floors"
                   @input="(event) => (Floors = event.target.value)"
                   class="input-group-static"
-                  label="จำนวนชั้น"
+                  label="ชั้น"
                   type="number"
-                  placeholder="จำนวนชั้น"
+                  placeholder="ชั้น"
                 />
               </div>
               <div class="mb-3">
@@ -280,13 +283,24 @@ export default {
                   placeholder="จำนวนห้อง"
                 />
               </div>
+              <!-- <div class="mb-3">
+                <label>กรอกเลขห้อง</label>
+                <textarea
+                  :value="roomnumber"
+                  @input="(event) => (roomnumber = event.target.value)"
+                  class="form-control"
+                  id="exampleFormControlTextarea1"
+                  rows="3"
+                  placeholder="ตัวอย่าง : 1,2,3"
+                ></textarea>
+              </div>
               <div class="mb-3">
                 <label>ประเภทห้องพัก</label>
                 <v-select
                   :options="optionsRoomtype"
                   v-model="selectedRoomtype"
                 ></v-select>
-              </div>
+              </div> -->
             </div>
           </div>
           <div class="modal-footer">
@@ -320,7 +334,6 @@ export default {
 .bg-special {
   border: 2px solid #edc7c7 !important;
   color: #000;
-
 }
 input::-webkit-outer-spin-button,
 input::-webkit-inner-spin-button {

src/views/SearchAll/SearchView.vue

@@ -150,12 +150,8 @@ 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>
-                  <th scope="col">ยศ</th>
                   <th scope="col">เลขบัตรประชาชน</th>
                   <th scope="col">เบอร์ติดต่อ</th>
                 </tr>
@@ -163,12 +159,8 @@ export default {
               <tbody>
                 <tr v-for="(item, index) in userlist" :key="index">
                   <th scope="row">{{ index + 1 }}</th>
-                  <td>{{ item.firstName }}</td>
+                  <td>{{ item.rank }} {{ item.firstName }} {{ item.lastName }}</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>
 

src/views/Users/UserlistView.vue

@@ -33,6 +33,7 @@ const userlist = [
     Affiliation: "ฝอ.1", //สังกัด
     rank: "ส.ต.ต.", //ยศ
     old: "32",
+    status: "สมรส",
     birthday: "04/03/2534",
     idcard: "134044411441122",
     phone: "0325647846",
@@ -44,6 +45,7 @@ const userlist = [
     Affiliation: "ฝอ.2", //สังกัด
     rank: "ส.ต.ต.", //ยศ
     old: "32",
+    status: "โสด",
     birthday: "14/07/2534",
     idcard: "134044411441178",
     phone: "0325647845",
@@ -62,7 +64,7 @@ export default {
       NoRoom,
       userlist,
       vueMkHeader,
-      masterData
+      masterData,
     };
   },
 
@@ -76,6 +78,11 @@ export default {
         { label: "Laravel", value: "PHP" },
         { label: "Phoenix", value: "Elixir" },
       ],
+      DataObtion: [
+        { label: "โสด", value: "โสด" },
+        { label: "สมรส", value: "สมรส" },
+      ],
+      selectedDataObtion: "โสด",
       selectedColor: "",
       firstName: "สมชัย",
       lastName: "แสงสุข",
@@ -83,9 +90,9 @@ export default {
       rank: "", //ยศ
       idcard: "134044411441178",
       phone: "0325647845",
-      selectedRanks: 'ส.ต.ต.',
+      selectedRanks: "ส.ต.ต.",
-      selectedAffiliation: 'ฝอ.2',
+      selectedAffiliation: "ฝอ.2",
-      birthday: "14/07/2534"
+      birthday: "14/07/2534",
     };
   },
   created() {
@@ -145,10 +152,36 @@ export default {
               :routes="[{ label: 'หน้าหลัก', route: '/' }, { label: 'ทะเบียน' }]"
             />
           </div>
-          <div class="d-flex justify-content-end align-items-baseline">
+          <div class="d-flex justify-content-between align-items-baseline">
-            <label style="margin-right: 10px">ค้นหาชื่อหรือเลขห้อง </label>
+            <div class="mb-3">
+              <div class="form-check form-check-inline">
+                <label style="margin-right: 20px">ประเภท</label>
+                <input
+                  class="form-check-input"
+                  type="radio"
+                  name="inlineRadioOptions"
+                  id="inlineRadio1"
+                  value="Radio1"
+                />
+                <label class="form-check-label" for="inlineRadio1">ตร.</label>
+              </div>
+              <div class="form-check form-check-inline">
+                <input
+                  class="form-check-input"
+                  type="radio"
+                  name="inlineRadioOptions"
+                  id="inlineRadio2"
+                  value="Radio2"
+                />
+                <label class="form-check-label" for="inlineRadio2">บช.ตชด.</label>
+              </div>
+       
+            </div>
+            <div class="d-flex align-items-baseline">
+              <label style="margin-right: 10px">ค้นหาชื่อ </label>
               <MaterialInput
-              class="input-group-dynamic w-30"
+                style="width: 300px"
+                class="input-group-dynamic"
                 icon="search"
                 type="text"
                 placeholder="Search"
@@ -162,18 +195,41 @@ export default {
                 >เพิ่มสมาชิก</MaterialButton
               >
             </div>
+          </div>
+          <div>
+            <div class="form-check form-check-inline">
+                <label style="margin-right: 20px">ยศ</label>
+                <input
+                  class="form-check-input"
+                  type="radio"
+                  name="inlineRadioOptions1"
+                  id="inlineRadio3"
+                  value="Radio3"
+                />
+                <label class="form-check-label" for="inlineRadio3">ประทวน</label>
+              </div>
+              <div class="form-check form-check-inline">
+                <input
+                  class="form-check-input"
+                  type="radio"
+                  name="inlineRadioOptions1"
+                  id="inlineRadio4"
+                  value="Radio4"
+                />
+                <label class="form-check-label" for="inlineRadio4">สัญญาบัตร</label>
+              </div>
+          </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>
                   <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>
@@ -181,13 +237,11 @@ export default {
               <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.rank }} {{ item.firstName }} {{ item.lastName }}</td>
-                  <td>{{ item.birthday }}</td>
-                  <td>{{ item.old }}</td>
                   <td>{{ item.Affiliation }}</td>
-                  <td>{{ item.rank }}</td>
+                  <td>{{ item.status }}</td>
-                  <td>{{ item.idcard }}</td>
+                  <!-- <td>{{ item.idcard }}</td> -->
                   <td>{{ item.phone }}</td>
                   <td>
                     <a data-bs-toggle="modal" data-bs-target="#EdituserBackdrop"
@@ -230,6 +284,17 @@ export default {
           </div>
           <div class="modal-body">
             <div>
+              <div class="mb-3">
+                <label>สังกัด</label>
+                <v-select
+                  :options="masterData?.Affiliation"
+                  v-model="selectedAffiliation"
+                ></v-select>
+              </div>
+              <div class="mb-3">
+                <label>ยศ</label>
+                <v-select :options="masterData?.ranks" v-model="selectedRanks"></v-select>
+              </div>
               <div class="mb-3">
                 <MaterialInput
                   name="firstName"
@@ -252,28 +317,8 @@ export default {
                 />
               </div>
               <div class="mb-3">
-                <MaterialInput
+                <label>สถานภาพ</label>
-                  :value="birthday"
+                <v-select :options="DataObtion" v-model="selectedDataObtion"></v-select>
-                  @input="(event) => (birthday = event.target.value)"
-                  class="input-group-static"
-                  label="วันเกิด"
-                  type="text"
-                  placeholder="วันเกิด"
-                />
-              </div>
-              <div class="mb-3">
-                <label>สังกัด</label>
-                <v-select
-                  :options="masterData?.Affiliation"
-                  v-model="selectedAffiliation"
-                ></v-select>
-              </div> 
-              <div class="mb-3">
-                <label>ยศ</label>
-                <v-select
-                  :options="masterData?.ranks"
-                  v-model="selectedRanks"
-                ></v-select>
               </div>
               <div class="mb-3">
                 <MaterialInput
@@ -336,6 +381,17 @@ export default {
           </div>
           <div class="modal-body">
             <div>
+              <div class="mb-3">
+                <label>สังกัด</label>
+                <v-select
+                  :options="masterData?.Affiliation"
+                  v-model="selectedAffiliation"
+                ></v-select>
+              </div>
+              <div class="mb-3">
+                <label>ยศ</label>
+                <v-select :options="masterData?.ranks" v-model="selectedRanks"></v-select>
+              </div>
               <div class="mb-3">
                 <MaterialInput
                   name="firstName"
@@ -358,28 +414,8 @@ export default {
                 />
               </div>
               <div class="mb-3">
-                <MaterialInput
+                <label>สถานภาพ</label>
-                  :value="birthday"
+                <v-select :options="DataObtion" v-model="selectedDataObtion"></v-select>
-                  @input="(event) => (birthday = event.target.value)"
-                  class="input-group-static"
-                  label="วันเกิด"
-                  type="text"
-                  placeholder="วันเกิด"
-                />
-              </div>
-              <div class="mb-3">
-                <label>สังกัด</label>
-                <v-select
-                  :options="masterData?.Affiliation"
-                  v-model="selectedAffiliation"
-                ></v-select>
-              </div> 
-              <div class="mb-3">
-                <label>ยศ</label>
-                <v-select
-                  :options="masterData?.ranks"
-                  v-model="selectedRanks"
-                ></v-select>
               </div>
               <div class="mb-3">
                 <MaterialInput
@@ -440,7 +476,6 @@ export default {
 .bg-special {
   border: 2px solid #edc7c7 !important;
   color: #000;
-
 }
 input::-webkit-outer-spin-button,
 input::-webkit-inner-spin-button {

src/views/UtilitiesRoom/UtilitieView.vue

@@ -291,7 +291,7 @@ export default {
                         <td>8,000</td>
                         <td>20,000</td>
                         <td>10,000</td>
-                        <td>5</td>
+                        <td>5/10</td>
                       </tr>
                     </tbody>
                   </table>
@@ -341,7 +341,7 @@ export default {
                         <td>202</td>
                         <td>20,000</td>
                         <td>8,000</td>
-                        <td>8</td>
+                        <td>8/10</td>
                       </tr>
                     </tbody>
                   </table>
@@ -664,7 +664,7 @@ export default {
                   placeholder="ค่าธรรมเนียม"
                 />
               </div>
-              <div class="mb-3">
+              <!-- <div class="mb-3">
                 <MaterialInput
                   :value="Insurance"
                   @input="(event) => (Insurance = event.target.value)"
@@ -673,7 +673,7 @@ export default {
                   type="text"
                   placeholder="ค่าน้ำประปา"
                 />
-              </div>
+              </div> -->
               <div class="mb-3">
                 <MaterialInput
                   :value="Insurancecost"
@@ -684,7 +684,7 @@ export default {
                   placeholder="เงินค่าประกัน"
                 />
               </div>
-              <div class="mb-3">
+              <!-- <div class="mb-3">
                 <MaterialInput
                   :value="installments"
                   @input="(event) => (installments = event.target.value)"
@@ -693,7 +693,7 @@ export default {
                   type="text"
                   placeholder="งวดเงินค่าประกัน"
                 />
-              </div>
+              </div> -->
             </div>
           </div>
           <div class="modal-footer">