update funtion

src/views/Expenses/ExpensesView.vue

@@ -196,6 +196,7 @@ export default {
               <thead class="border border-2 border-success border-bottom">
                 <tr>
                   <th scope="col">ลำดับ</th>
+                  <th>ชื่อ-สกุล</th>
                   <th scope="col">อาคาร</th>
                   <th scope="col">ชั้น</th>
                   <th scope="col">เลขที่ห้อง</th>
@@ -217,6 +218,7 @@ export default {
               <tbody>
                 <tr>
                   <th scope="row">1</th>
+                  <td>ส.ต.ต.โชคดี มีชัย</td>
                   <td>อาคารแฟลต 1/11</td>
                   <td>2</td>
                   <td>202</td>
@@ -275,6 +277,9 @@ export default {
           </div>
           <div class="modal-body">
             <div>
+              <div class="mb-1">
+                <label style="font-size:large">ส.ต.ต.โชคดี มีชัย</label>
+              </div>
               <div class="mb-3">
                 <label>อาคาร</label>
                 <v-select
@@ -290,17 +295,7 @@ export default {
                 <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"
@@ -361,6 +356,46 @@ export default {
                   placeholder="เลขหลัง"
                 />
               </div>
+              <div
+                class="mb-3"
+                style="
+                  display: flex;
+                  justify-content: flex-start;
+                  align-items: center;
+                "
+              >
+                <div class="form-check form-check-inline">
+                  <input
+                    class="form-check-input"
+                    type="radio"
+                    name="inlineRadioOptions"
+                    id="inlineRadio1"
+                    value="option1"
+                  />
+                  <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="option2"
+                  />
+                  <label class="form-check-label" for="inlineRadio2">หักไม่ได้</label>
+                </div>
+                
+              </div>
+              <div style=" margin-bottom: 10px">
+                  <MaterialInput
+                    name="contract"
+                    :value="contract"
+                    @input="(event) => (contract = event.target.value)"
+                    class="input-group-static"
+                    type="text"
+                    placeholder="สาเหตุ"
+                  />
+                </div>
             </div>
           </div>
           <div class="modal-footer">
@@ -469,7 +504,7 @@ export default {
 </template>
 <style>
 .bg-green {
-  border: 2px solid #567b57 !important;
+  border: 2px solid #86d388 !important;
   color: #000;
 }
 .bg-red {

src/views/Queue/QueueView.vue

@@ -258,7 +258,7 @@ export default {
 </template>
 <style>
 .bg-green {
-  border: 2px solid #567b57 !important;
+  border: 2px solid #86d388 !important;
   color: #000;
 }
 .bg-red {

src/views/Reports/ReportlistView.vue

@@ -762,7 +762,7 @@ export default {
 </template>
 <style>
 .bg-green {
-  border: 2px solid #567b57 !important;
+  border: 2px solid #86d388 !important;
   color: #000;
 }
 .bg-red {

src/views/Restroom/DetailRoomPage.vue

@@ -187,7 +187,6 @@ export default {
                           <th scope="col">เบอร์ติดต่อ</th>
                           <th scope="col">เลขลงรับหนังสือ</th>
                           <th scope="col"></th>
-                          <th scope="col"></th>
                         </tr>
                       </thead>
                       <tbody>
@@ -209,17 +208,6 @@ 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>
@@ -305,6 +293,17 @@ export default {
                   placeholder="จำนวนงวดเงินค่าประกัน"
                 />
               </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">
@@ -545,7 +544,7 @@ export default {
 </template>
 <style>
 .bg-green {
-  border: 2px solid #567b57 !important;
+  border: 2px solid #86d388 !important;
   color: #000;
 }
 .bg-red {

src/views/Restroom/RoomView.vue

@@ -194,9 +194,9 @@ export default {
             <div class="col-8">
               <div class="d-flex justify-content-end align-items-baseline">
                 <div class="d-flex">
-                  <MaterialCheckbox id="terms5" checked>
+                  <!-- <MaterialCheckbox id="terms5" checked>
                     <a href="javascript:;" class="font-weight-bolder"> รายตึก</a>
-                  </MaterialCheckbox>
+                  </MaterialCheckbox> -->
                   <MaterialCheckbox id="terms6">
                     <a href="javascript:;" class="font-weight-bolder"> ตึกทั้งหมด</a>
                   </MaterialCheckbox>
@@ -226,7 +226,9 @@ export default {
             <div class="d-flex justify-content-between align-items-baseline p-2">
               <div class="text-start">
                 <p class="d-flex align-items-baseline p-2">
-                  <span>คณะกรรมการประจําตึก : มารุช ดีงาม , บารมี ดีงาม</span>
+                  <span style="font-weight: bold; text-decoration: underline">
+                    คณะกรรมการประจําตึก : มารุช ดีงาม , บารมี ดีงาม</span
+                  >
                   <a data-bs-toggle="modal" data-bs-target="#Edituser"
                     ><i
                       class="material-icons"
@@ -297,15 +299,10 @@ export default {
                       aria-controls="collapseExample"
                       >{{ item?.title }}</MaterialButton
                     >
-                    <!-- item?.title -->
                   </p>
                   <div class="collapse show" id="collapseExample" aria-expanded="true">
-                    <div>
+                    <div class="flex-container">
-                      <div
+                      <div v-for="(item, index) in roomData" :key="index">
-                        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"
                           :class="{
@@ -313,7 +310,7 @@ export default {
                             'bg-green': item?.status == 'free',
                             'bg-warning2': item?.status == 'waiting',
                             'bg-return': item?.status == 'return',
-                              'bg-special': item?.status == 'special',
+                            'bgg-red': item?.status == 'special',
                           }"
                           :style="{ width: `220px`, height: `170px` }"
                         >
@@ -361,17 +358,7 @@ export default {
                               >
                                 {{ "ผ่อนผัน" }}
                               </p>
-                                <p
+                              <p class="card-title "
-                                  v-if="item?.status !== 'special'"
-                                  class="card-title"
-                                  style="font-size: 14px"
-                                >
-                                  {{ item?.ranks }} {{ item?.firstName }}
-                                  {{ item?.laststName }}
-                                </p>
-                                <p
-                                  v-if="item?.status == 'special'"
-                                  class="card-title text-red mt-1"
                                 style="font-size: 14px"
                               >
                                 {{ item?.ranks }} {{ item?.firstName }}
@@ -385,7 +372,6 @@ export default {
                                 >
                                 <span
                                   v-if="item?.status == 'special'"
-                                    class="text-red"
                                   style="text-align: right; font-size: 16px"
                                   >{{ "กรณีพิเศษ" }}</span
                                 >
@@ -403,7 +389,6 @@ export default {
         </div>
       </div>
     </div>
-    </div>
     <!-- Modal -->
     <div
       class="modal fade"
@@ -484,8 +469,22 @@ export default {
   </section>
 </template>
 <style>
+.flex-container {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.flex-container > div {
+  background-color: #f1f1f1;
+  width: 220px;
+  height: 170px;
+  margin: 12px;
+  text-align: center;
+  line-height: 75px;
+  font-size: 30px;
+}
 .bg-green {
-  background-color: #567b57 !important;
+  background-color: #86d388 !important;
   color: #fff;
 }
 .bg-red {
@@ -505,7 +504,7 @@ export default {
   color: #fff !important;
 }
 .bgg-green {
-  background-color: #567b57 !important;
+  background-color: #86d388 !important;
   color: #fff !important;
 }
 .bgg-red {

src/views/Restroom/UpdateRoom.vue

@@ -1003,7 +1003,7 @@ export default {
 </template>
 <style>
 .bg-green {
-  border: 2px solid #567b57 !important;
+  border: 2px solid #86d388 !important;
   color: #000;
 }
 .bg-red {

src/views/RoomLayout/RoomLayoutView.vue

@@ -316,7 +316,7 @@ export default {
 </template>
 <style>
 .bg-green {
-  border: 2px solid #567b57 !important;
+  border: 2px solid #86d388 !important;
   color: #000;
 }
 .bg-red {

src/views/Users/UserlistView.vue

@@ -460,7 +460,7 @@ export default {
 </template>
 <style>
 .bg-green {
-  border: 2px solid #567b57 !important;
+  border: 2px solid #86d388 !important;
   color: #000;
 }
 .bg-red {

src/views/UtilitiesRoom/UtilitieView.vue

@@ -787,7 +787,7 @@ export default {
 </template>
 <style>
 .bg-green {
-  border: 2px solid #567b57 !important;
+  border: 2px solid #86d388 !important;
   color: #000;
 }
 .bg-red {