From b5415a4d1cc557b3888a0a02fcccd52ddeef236c Mon Sep 17 00:00:00 2001
From: Diyar Akhgar <diyar.akhgar@gmail.com>
Date: Sat, 24 May 2025 18:26:58 +0330
Subject: [PATCH] add roomsPopUp && End Meeting Page

---
 xroom-dashboard/package.json                  |   3 +-
 .../src/components/CreateMeetingModal.vue     |  48 +-
 .../src/components/RoomSelectionModal.vue     | 723 ++++++++++++++++++
 .../src/pages/dashboard/Meeting.vue           |  20 +-
 xroom-dashboard/src/pages/dashboard/team.vue  |  27 -
 5 files changed, 765 insertions(+), 56 deletions(-)
 create mode 100644 xroom-dashboard/src/components/RoomSelectionModal.vue

diff --git a/xroom-dashboard/package.json b/xroom-dashboard/package.json
index fa70280..35ceabe 100644
--- a/xroom-dashboard/package.json
+++ b/xroom-dashboard/package.json
@@ -52,7 +52,8 @@
       "parser": "@babel/eslint-parser"
     },
     "rules": {
-      "vue/multi-word-component-names": "off"
+      "vue/multi-word-component-names": "off",
+      "vue/no-mutating-props": "off"
     }
   },
   "browserslist": [
diff --git a/xroom-dashboard/src/components/CreateMeetingModal.vue b/xroom-dashboard/src/components/CreateMeetingModal.vue
index da36d5b..0d7ab24 100644
--- a/xroom-dashboard/src/components/CreateMeetingModal.vue
+++ b/xroom-dashboard/src/components/CreateMeetingModal.vue
@@ -1,5 +1,5 @@
 <template>
-  <div v-if="isOpen" class="modal-overlay" @click="closeModal">
+  <div v-if="isOpen && !isRoomSelectionOpen" class="modal-overlay" @click="closeModal">
     <div class="modal-content" @click.stop>
       <div class="popUp-header">
         <h2>ایجاد جلسه جدید</h2>
@@ -284,10 +284,10 @@
             </div>
           </div>
           <div class="form-group">
-            <label style="font-size: 19px;font-weight: 600;">اتاق های جلسات</label>
+            <label style="font-size: 19px; font-weight: 600;">اتاق‌های جلسات</label>
             <div class="rooms-selecter">
-              <span>0 انتخاب شده</span>
-              <button type="button" @click="openRoomSelection">انتخاب اتاق جلسه</button>
+              <span>{{ form.selectedRooms.length }} انتخاب شده</span>
+              <button type="button" @click="openRoomSelection" style="cursor: pointer;">انتخاب اتاق جلسه</button>
             </div>
           </div>
           <div class="participants-objects">
@@ -358,16 +358,23 @@
       </div>
     </div>
   </div>
+    <RoomSelectionModal
+      :is-open="isRoomSelectionOpen"
+      @close="isRoomSelectionOpen = false"
+      @submit-rooms="handleRoomSelection"
+    />
 </template>
 
 <script>
 import VuePersianDatetimePicker from 'vue3-persian-datetime-picker';
 import moment from 'moment-jalaali';
+import RoomSelectionModal from './RoomSelectionModal.vue';
 
 export default {
   name: 'MeetingModal',
   components: {
     VuePersianDatetimePicker,
+    RoomSelectionModal,
   },
   props: {
     isOpen: {
@@ -385,11 +392,13 @@ export default {
         startMinute: 0,
         endHour: 18,
         endMinute: 0,
+        selectedRooms: [],
       },
       participants: [],
       newParticipantEmail: '',
       defaultProfileIcon: 'https://c.animaapp.com/m9nvumalUMfQbN/img/frame.svg',
       error: null,
+      isRoomSelectionOpen: false,
     };
   },
   computed: {
@@ -412,19 +421,24 @@ export default {
   },
   methods: {
     openRoomSelection() {
-      this.$emit('open-room-selection');
+      this.isRoomSelectionOpen = true;
+    },
+    handleRoomSelection(rooms) {
+      this.form.selectedRooms = rooms;
+      this.isRoomSelectionOpen = false;
     },
     addParticipant() {
       if (!this.newParticipantEmail || !this.validateEmail(this.newParticipantEmail)) {
         this.error = 'لطفاً ایمیل معتبر وارد کنید';
         return;
       }
-
-      if (this.participants.some(p => p.email === this.newParticipantEmail) || this.newParticipantEmail === this.userEmail) {
+      if (
+        this.participants.some((p) => p.email === this.newParticipantEmail) ||
+        this.newParticipantEmail === this.userEmail
+      ) {
         this.error = 'این ایمیل قبلاً اضافه شده است';
         return;
       }
-
       this.participants.push({
         email: this.newParticipantEmail,
         name: 'کاربر مهمان',
@@ -435,7 +449,7 @@ export default {
       this.error = null;
     },
     removeParticipant(email) {
-      this.participants = this.participants.filter(p => p.email !== email);
+      this.participants = this.participants.filter((p) => p.email !== email);
     },
     validateEmail(email) {
       return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
@@ -453,12 +467,14 @@ export default {
         startMinute: 0,
         endHour: 18,
         endMinute: 0,
+        selectedRooms: [],
       };
       this.participants = [];
       this.newParticipantEmail = '';
       this.error = null;
+      this.isRoomSelectionOpen = false;
     },
-       incrementTime(field) {
+    incrementTime(field) {
       if (field === 'startHour' && this.form.startHour < 23) {
         this.form.startHour++;
       } else if (field === 'startMinute' && this.form.startMinute < 59) {
@@ -485,20 +501,17 @@ export default {
         this.error = 'لطفاً نام جلسه و تاریخ را وارد کنید.';
         return;
       }
-
       const momentDate = moment(this.form.date, 'jYYYY/jMM/jDD');
       if (!momentDate.isValid()) {
         this.error = 'تاریخ وارد شده معتبر نیست.';
         return;
       }
-
       const startTimeInMinutes = this.form.startHour * 60 + this.form.startMinute;
       const endTimeInMinutes = this.form.endHour * 60 + this.form.endMinute;
       if (endTimeInMinutes <= startTimeInMinutes) {
         this.error = 'زمان پایان باید بعد از زمان شروع باشد.';
         return;
       }
-
       const startDateTime = momentDate
         .clone()
         .set({
@@ -507,7 +520,6 @@ export default {
           second: 0,
         })
         .toISOString();
-
       const endDateTime = momentDate
         .clone()
         .set({
@@ -516,23 +528,21 @@ export default {
           second: 0,
         })
         .toISOString();
-
       const meetingData = {
         title: this.form.title,
         description: this.form.description,
         startDateTime,
         endDateTime,
+        rooms: this.form.selectedRooms,
         participants: [
           ...(this.userEmail ? [{ email: this.userEmail, role: this.userRole }] : []),
-          ...this.participants.map(p => ({
+          ...this.participants.map((p) => ({
             email: p.email,
             role: p.role,
           })),
         ],
       };
-
       console.log('داده‌های جلسه:', meetingData);
-
       this.$emit('submit', meetingData);
       this.closeModal();
     },
@@ -541,6 +551,8 @@ export default {
 </script>
 
 
+
+
 <style scoped>
 .modal-overlay {
   position: fixed;
diff --git a/xroom-dashboard/src/components/RoomSelectionModal.vue b/xroom-dashboard/src/components/RoomSelectionModal.vue
new file mode 100644
index 0000000..50cc7ac
--- /dev/null
+++ b/xroom-dashboard/src/components/RoomSelectionModal.vue
@@ -0,0 +1,723 @@
+<template>
+  <div v-if="isOpen" class="modal-overlay">
+    <div class="modal-content" @click.stop>
+      <div class="popUp-header">
+        <h2>اتاق‌های این جلسه را انتخاب کنید</h2>
+        <button @click="cancel">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="35"
+            height="35"
+            viewBox="0 0 32 32"
+            fill="none"
+          >
+            <rect x="0.5" y="0.5" width="31" height="31" rx="7.5" fill="#101010" />
+            <rect x="0.5" y="0.5" width="31" height="31" rx="7.5" stroke="#E2DEE9" />
+            <path
+              d="M21 11L11 21"
+              stroke="white"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
+            <path
+              d="M11 11L21 21"
+              stroke="white"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
+          </svg>
+        </button>
+      </div>
+      <div class="popUp-title">
+        <h2>فضاها</h2>
+        <span>اجازه دسترسی به این اتاق‌های تیم را بدهید</span>
+      </div>
+      <div class="rooms-list">
+        <div
+          v-for="room in rooms"
+          :key="room.id"
+          class="room-item"
+          :class="{ selected: selectedRooms.includes(room.id) }"
+          @click="toggleRoomSelection(room.id)"
+        >
+          <img
+            :src="room.image"
+            alt="Room Image"
+            class="room-image"
+            width="120px"
+            height="120px"
+          />
+          <div class="room-details" style="margin-right: 10px;">
+            <h3 class="room-title">{{ room.name }}</h3>
+            <p class="room-capacity">
+              <span style="margin-left: 4px;">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="16"
+                  height="17"
+                  viewBox="0 0 16 17"
+                  fill="none"
+                >
+                  <g clip-path="url(#clip0_622_1334)">
+                    <path
+                      d="M3.33203 5.16667C3.33203 5.87391 3.61298 6.55219 4.11308 7.05228C4.61318 7.55238 5.29145 7.83333 5.9987 7.83333C6.70594 7.83333 7.38422 7.55238 7.88432 7.05228C8.38441 6.55219 8.66536 5.87391 8.66536 5.16667C8.66536 4.45942 8.38441 3.78115 7.88432 3.28105C7.38422 2.78095 6.70594 2.5 5.9987 2.5C5.29145 2.5 4.61318 2.78095 4.11308 3.28105C3.61298 3.78115 3.33203 4.45942 3.33203 5.16667Z"
+                      stroke="#718096"
+                      stroke-width="1.5"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                    />
+                    <path
+                      d="M2 14.5V13.1667C2 12.4594 2.28095 11.7811 2.78105 11.281C3.28115 10.781 3.95942 10.5 4.66667 10.5H7.33333C8.04058 10.5 8.71885 10.781 9.21895 11.281C9.71905 11.7811 10 12.4594 10 13.1667V14.5"
+                      stroke="#718096"
+                      stroke-width="1.5"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                    />
+                    <path
+                      d="M10.668 2.58667C11.2416 2.73354 11.75 3.06714 12.1131 3.53488C12.4761 4.00262 12.6732 5.17 12.6732 5.17C12.6732 5.76212 12.4761 6.33739 12.1131 6.80513C11.75 7.27287 11.2416 7.60647 10.668 7.75334"
+                      stroke="#718096"
+                      stroke-width="1.5"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                    />
+                    <path
+                      d="M14 14.5V13.1666C13.9966 12.5781 13.7986 12.0072 13.4368 11.5429C13.0751 11.0786 12.5699 10.7471 12 10.6"
+                      stroke="#718096"
+                      stroke-width="1.5"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                    />
+                  </g>
+                  <defs>
+                    <clipPath id="clip0_622_1334">
+                      <rect width="16" height="16" fill="white" transform="translate(0 0.5)" />
+                    </clipPath>
+                  </defs>
+                </svg>
+              </span>
+              حداکثر: {{ room.capacity }} کاربر
+            </p>
+            <p class="room-type">
+              <span style="margin-left: 4px;">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="16"
+                  height="17"
+                  viewBox="0 0 16 17"
+                  fill="none"
+                >
+                  <path
+                    d="M4 15.1667V3.16671C4 2.81309 4.14048 2.47395 4.39052 2.2239C4.64057 1.97385 4.97971 1.83337 5.33333 1.83337H10.6667C11.0203 1.83337 11.3594 1.97385 11.6095 2.2239C11.8595 2.47395 12 2.81309 12 3.16671V15.1667H4Z"
+                    stroke="#3A57E8"
+                    stroke-width="1.25"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  />
+                  <path
+                    d="M3.9987 8.5H2.66536C2.31174 8.5 1.9726 8.64048 1.72256 8.89052C1.47251 9.14057 1.33203 9.47971 1.33203 9.83333V13.8333C1.33203 14.187 1.47251 14.5261 1.72256 14.7761C1.9726 15.0262 2.31174 15.1667 2.66536 15.1667H3.9987"
+                    stroke="#3A57E8"
+                    stroke-width="1.25"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  />
+                  <path
+                    d="M12 6.5H13.3333C13.687 6.5 14.0261 6.64048 14.2761 6.89052C14.5262 7.14057 14.6667 7.47971 14.6667 7.83333V13.8333C14.6667 14.187 14.5262 14.5261 14.2761 14.7761C14.0261 15.0262 13.687 15.1667 13.3333 15.1667H12"
+                    stroke="#3A57E8"
+                    stroke-width="1.25"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  />
+                  <path
+                    d="M6.66797 4.5H9.33464"
+                    stroke="#3A57E8"
+                    stroke-width="1.25"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  />
+                  <path
+                    d="M6.66797 7.16663H9.33464"
+                    stroke="#3A57E8"
+                    stroke-width="1.25"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  />
+                  <path
+                    d="M6.66797 9.83337H9.33464"
+                    stroke="#3A57E8"
+                    stroke-width="1.25"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  />
+                  <path
+                    d="M6.66797 12.5H9.33464"
+                    stroke="#3A57E8"
+                    stroke-width="1.25"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  />
+                </svg>
+              </span>
+              {{ room.type }}
+            </p>
+          </div>
+        </div>
+      </div>
+      <div v-if="Temporaryrooms.length > 0">
+      <div class="popUp-title">
+        <h2>اتاق‌های موقت</h2>
+        <span>اتاق‌های موقت ایجادشده برای این جلسه</span>
+      </div>
+      <div class="temporary-rooms-list">
+        <div
+           v-for="room in Temporaryrooms"
+          :key="room.id"
+          class="room-item"
+          :class="{ selected: selectedRooms.includes(room.id) }"
+          @click="toggleRoomSelection(room.id)"
+        >
+        <img
+            :src="room.image"
+            alt="Room Image"
+            class="room-image"
+            width="120px"
+            height="120px"
+          />
+          <div class="room-details" style="margin-right: 10px;">
+            <h3 class="room-title">{{ room.name }}</h3>
+            <p class="room-capacity">
+              <span style="margin-left: 4px;">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="16"
+                  height="17"
+                  viewBox="0 0 16 17"
+                  fill="none"
+                >
+                  <g clip-path="url(#clip0_622_1334)">
+                    <path
+                      d="M3.33203 5.16667C3.33203 5.87391 3.61298 6.55219 4.11308 7.05228C4.61318 7.55238 5.29145 7.83333 5.9987 7.83333C6.70594 7.83333 7.38422 7.55238 7.88432 7.05228C8.38441 6.55219 8.66536 5.87391 8.66536 5.16667C8.66536 4.45942 8.38441 3.78115 7.88432 3.28105C7.38422 2.78095 6.70594 2.5 5.9987 2.5C5.29145 2.5 4.61318 2.78095 4.11308 3.28105C3.61298 3.78115 3.33203 4.45942 3.33203 5.16667Z"
+                      stroke="#718096"
+                      stroke-width="1.5"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                    />
+                    <path
+                      d="M2 14.5V13.1667C2 12.4594 2.28095 11.7811 2.78105 11.281C3.28115 10.781 3.95942 10.5 4.66667 10.5H7.33333C8.04058 10.5 8.71885 10.781 9.21895 11.281C9.71905 11.7811 10 12.4594 10 13.1667V14.5"
+                      stroke="#718096"
+                      stroke-width="1.5"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                    />
+                    <path
+                      d="M10.668 2.58667C11.2416 2.73354 11.75 3.06714 12.1131 3.53488C12.4761 4.00262 12.6732 5.17 12.6732 5.17C12.6732 5.76212 12.4761 6.33739 12.1131 6.80513C11.75 7.27287 11.2416 7.60647 10.668 7.75334"
+                      stroke="#718096"
+                      stroke-width="1.5"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                    />
+                    <path
+                      d="M14 14.5V13.1666C13.9966 12.5781 13.7986 12.0072 13.4368 11.5429C13.0751 11.0786 12.5699 10.7471 12 10.6"
+                      stroke="#718096"
+                      stroke-width="1.5"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                    />
+                  </g>
+                  <defs>
+                    <clipPath id="clip0_622_1334">
+                      <rect width="16" height="16" fill="white" transform="translate(0 0.5)" />
+                    </clipPath>
+                  </defs>
+                </svg>
+              </span>
+              حداکثر: {{ room.capacity }} کاربر
+            </p>
+            <p class="room-type">
+              <span style="margin-left: 4px;">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="16"
+                  height="17"
+                  viewBox="0 0 16 17"
+                  fill="none"
+                >
+                  <path
+                    d="M4 15.1667V3.16671C4 2.81309 4.14048 2.47395 4.39052 2.2239C4.64057 1.97385 4.97971 1.83337 5.33333 1.83337H10.6667C11.0203 1.83337 11.3594 1.97385 11.6095 2.2239C11.8595 2.47395 12 2.81309 12 3.16671V15.1667H4Z"
+                    stroke="#3A57E8"
+                    stroke-width="1.25"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  />
+                  <path
+                    d="M3.9987 8.5H2.66536C2.31174 8.5 1.9726 8.64048 1.72256 8.89052C1.47251 9.14057 1.33203 9.47971 1.33203 9.83333V13.8333C1.33203 14.187 1.47251 14.5261 1.72256 14.7761C1.9726 15.0262 2.31174 15.1667 2.66536 15.1667H3.9987"
+                    stroke="#3A57E8"
+                    stroke-width="1.25"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  />
+                  <path
+                    d="M12 6.5H13.3333C13.687 6.5 14.0261 6.64048 14.2761 6.89052C14.5262 7.14057 14.6667 7.47971 14.6667 7.83333V13.8333C14.6667 14.187 14.5262 14.5261 14.2761 14.7761C14.0261 15.0262 13.687 15.1667 13.3333 15.1667H12"
+                    stroke="#3A57E8"
+                    stroke-width="1.25"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  />
+                  <path
+                    d="M6.66797 4.5H9.33464"
+                    stroke="#3A57E8"
+                    stroke-width="1.25"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  />
+                  <path
+                    d="M6.66797 7.16663H9.33464"
+                    stroke="#3A57E8"
+                    stroke-width="1.25"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  />
+                  <path
+                    d="M6.66797 9.83337H9.33464"
+                    stroke="#3A57E8"
+                    stroke-width="1.25"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  />
+                  <path
+                    d="M6.66797 12.5H9.33464"
+                    stroke="#3A57E8"
+                    stroke-width="1.25"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  />
+                </svg>
+              </span>
+              {{ room.type }}
+            </p>
+          </div>
+        </div>
+      </div>
+      </div>
+      <div class="popUp-title">
+        <h2>ایجاد اتاق موقت</h2>
+        <span>اتاق‌های موقت را فقط برای این جلسه ایجاد کنید</span>
+      </div>
+      <div class="temporary-room-form">
+        <form @submit.prevent="createTemporaryRoom">
+          <div class="form-group">
+            <label for="tempRoomName">نام اتاق</label>
+            <input
+              type="text"
+              id="tempRoomName"
+              v-model="newTempRoom.name"
+              required
+            />
+          </div>
+          <div class="form-group">
+            <label for="tempRoomImage">تصویر اتاق</label>
+            <input type="file" id="tempRoomImage" accept="image/*" @change="handleImageUpload" />
+          </div>
+          <div class="form-group">
+            <label for="tempRoomCapacity">ظرفیت</label>
+            <input v-model.number="newTempRoom.capacity" type="number" id="tempRoomCapacity" required />
+          </div>
+          <div class="form-group">
+            <label for="tempRoomType">نوع</label>
+            <input v-model="newTempRoom.type" id="tempRoomType" required />
+          </div>
+          <button type="submit" class="create-room">ایجاد اتاق</button>
+        </form>
+      </div>
+      <div class="form-actions">
+        <button type="button" class="cancel-button" @click="cancel">لغو</button>
+        <button type="button" class="submit-button" @click="submitRooms">تأیید</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'RoomSelectionModal',
+  props: {
+    isOpen: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      rooms: [
+        {
+          id: 1,
+          image: require('@/assets/img/img.png'),
+          name: 'Interview room 1',
+          capacity: 33,
+          type: 'فضا تیم',
+          isTemporary: false, // اضافه کردن ویژگی isTemporary
+        },
+        {
+          id: 2,
+          image: require('@/assets/img/img.png'),
+          name: 'Interview room 2',
+          capacity: 24,
+          type: 'آموزشی',
+          isTemporary: false,
+        },
+        {
+          id: 3,
+          image: require('@/assets/img/img.png'),
+          name: 'Interview room 3',
+          capacity: 60,
+          type: 'جلسه تیمی',
+          isTemporary: false,
+        },
+        {
+          id: 4,
+          image: require('@/assets/img/img.png'),
+          name: 'Interview room 4',
+          capacity: 33,
+          type: 'فضا تیم',
+          isTemporary: false,
+        },
+        {
+          id: 5,
+          image: require('@/assets/img/img.png'),
+          name: 'Interview room 5',
+          capacity: 24,
+          type: 'آموزشی',
+          isTemporary: false,
+        },
+        {
+          id: 6,
+          image: require('@/assets/img/img.png'),
+          name: 'Interview room 6',
+          capacity: 60,
+          type: 'جلسه تیمی',
+          isTemporary: false,
+        },
+        {
+          id: 7,
+          image: require('@/assets/img/img.png'),
+          name: 'Interview room 7',
+          capacity: 33,
+          type: 'فضا تیم',
+          isTemporary: false,
+        },
+        {
+          id: 8,
+          image: require('@/assets/img/img.png'),
+          name: 'Interview room 8',
+          capacity: 24,
+          type: 'آموزشی',
+          isTemporary: false,
+        },
+      ],
+      Temporaryrooms: [],
+      selectedRooms: [],
+      newTempRoom: {
+        name: '',
+        capacity: 0,
+        type: '',
+        image: null,
+      },
+    };
+  },
+  methods: {
+    toggleRoomSelection(roomId) {
+      if (this.selectedRooms.includes(roomId)) {
+        this.selectedRooms = this.selectedRooms.filter((id) => id !== roomId);
+      } else {
+        this.selectedRooms.push(roomId);
+      }
+    },
+    cancel() {
+      this.$emit('close');
+      this.selectedRooms = [];
+    },
+    submitRooms() {
+      const selectedRoomDetails = [
+        ...this.rooms,
+        ...this.Temporaryrooms,
+      ]
+        .filter((room) => this.selectedRooms.includes(room.id))
+        .map((room) => ({
+          id: room.id,
+          name: room.name,
+          capacity: room.capacity,
+          type: room.type,
+          image: room.image,
+          isTemporary: room.isTemporary,
+        }));
+      this.$emit('submit-rooms', selectedRoomDetails);
+      this.selectedRooms = [];
+    },
+    handleImageUpload(event) {
+      const file = event.target.files[0];
+      if (file) {
+        this.newTempRoom.image = URL.createObjectURL(file);
+      }
+    },
+    createTemporaryRoom() {
+      const newRoom = {
+        id: this.rooms.length + this.Temporaryrooms.length + 1,
+        image: this.newTempRoom.image || require('@/assets/img/img.png'),
+        name: this.newTempRoom.name,
+        capacity: this.newTempRoom.capacity,
+        type: this.newTempRoom.type,
+        isTemporary: true,
+      };
+      this.Temporaryrooms.push(newRoom);
+      this.newTempRoom = { name: '', capacity: 0, type: '', image: null };
+    },
+  },
+};
+</script>
+
+<style scoped>
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+}
+
+.modal-content {
+  background: #F7F5FA;
+  border-radius: 8px;
+  width: 100%;
+  max-width: 750px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  direction: rtl;
+  border-radius: 20px;
+  padding-bottom: 2rem;
+  height: 95vh;
+  overflow-y: auto;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+.modal-content::-webkit-scrollbar {
+  display: none;
+}
+
+.popUp-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background-color: #101010;
+  color: #fff;
+  width: 100%;
+  padding: 20px 26px;
+  margin-bottom: 1.5rem;
+  border-radius: 20px 20px 0px 0px;
+}
+
+.popUp-header h2 {
+  font-size: 22px;
+}
+
+.popUp-header button {
+  background-color: #101010;
+  border: none;
+  cursor: pointer;
+}
+
+.room-item {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  border: 1px solid #B8C0CB;
+  border-radius: 12px;
+  padding: 8px;
+  text-align: right;
+  cursor: pointer;
+}
+
+.temporary-room-form {
+  margin-top: 1rem;
+  padding: 20px;
+  background-color: #FFFFFF;
+  border-radius: 16px;
+  width: 100%;
+  max-width: 700px;
+  margin: 1rem auto 2rem auto;
+
+}
+
+.rooms-list {
+  margin-top: 1rem;
+  padding: 20px;
+  background-color: #FFFFFF;
+  border-radius: 16px;
+  width: 100%;
+  max-width: 700px;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 2rem;
+  margin: 1rem auto 2rem auto;
+}
+
+.temporary-rooms-list {
+  margin-top: 1rem;
+  padding: 20px;
+  background-color: #FFFFFF;
+  border-radius: 16px;
+  width: 100%;
+  max-width: 700px;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 2rem;
+  margin: 1rem auto 2rem auto;
+}
+
+.room-item.selected {
+  border: 1px solid #101010;
+}
+
+.popUp-title {
+  display: flex;
+  flex-direction: column;
+  align-items: start;
+  padding: 20px;
+  padding-right: 50px;
+}
+
+.popUp-title h2 {
+  font-size: 20px;
+  font-weight: 600;
+  color: #101010;
+}
+
+.popUp-title span {
+  font-size: 16px;
+  font-weight: 500;
+  color: #4F5A69;
+  margin-top: 1rem;
+}
+
+.form-group label {
+  display: block;
+  font-weight: 500;
+  width: 50%;
+  font-size: 16px;
+}
+
+.form-group input {
+  height: 45px;
+  width: 100%;
+  padding: 8px;
+  border: 1px solid #718096;
+  border-radius: 8px;
+  font-size: 1rem;
+  max-width: 25rem;
+}
+
+.form-group input:focus {
+  outline: none;
+}
+
+.form-actions {
+  display: flex;
+  justify-content: space-between;
+  padding: 20px;
+  padding-bottom: 0;
+  width: 100%;
+  max-width: 620px;
+  margin: auto;
+}
+
+.submit-button,
+.cancel-button {
+  text-align: center;
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+  height: 50px;
+  width: 47%;
+}
+
+.submit-button {
+  background-color: #3A57E8;
+  color: white;
+  font-weight: 500;
+  font-size: 18px;
+}
+
+.cancel-button {
+  background-color: #EBEEFD;
+  color: #101010;
+  font-weight: 500;
+  font-size: 18px;
+}
+
+.room-title {
+  font-size: 16px;
+  font-weight: 500;
+  color: #101010;
+}
+
+.form-group {
+  margin-bottom: 3rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.form-group label {
+  display: block;
+  font-weight: 500;
+  width: 50%;
+  font-size: 16px;
+}
+
+.form-group input {
+  height: 45px;
+  width: 100%;
+  padding: 8px;
+  border: 1px solid #718096;
+  border-radius: 8px;
+  font-size: 1rem;
+  max-width: 25rem
+}
+
+.room-capacity {
+  font-size: 14px;
+  font-weight: 500;
+  color: #718096;
+  margin: 1.2rem 0;
+  display: flex;
+  align-items: center;
+}
+
+.room-type {
+  font-size: 14px;
+  font-weight: 500;
+  color: #3A57E8;
+  display: flex;
+  align-items: center;
+}
+
+.create-room {
+    width: 120px;
+    height: 45px;
+    padding: 12px 24px 12px 24px;
+    background-color: #3A57E8;
+    border-radius: 8px;
+    font-size: 16px;
+    font-weight: 500;
+    color: #FFFFFF;
+    border: none;
+    cursor: pointer;
+    display: block;
+    margin-right: auto;
+}
+</style>
\ No newline at end of file
diff --git a/xroom-dashboard/src/pages/dashboard/Meeting.vue b/xroom-dashboard/src/pages/dashboard/Meeting.vue
index 9c32e13..7c4f391 100644
--- a/xroom-dashboard/src/pages/dashboard/Meeting.vue
+++ b/xroom-dashboard/src/pages/dashboard/Meeting.vue
@@ -101,16 +101,16 @@
                 </p>
                 <p class="meet-type">
                   <span style="margin-left: 4px;">
-                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="17" viewBox="0 0 16 17" fill="none">
-                                    <path d="M4 15.1667V3.16671C4 2.81309 4.14048 2.47395 4.39052 2.2239C4.64057 1.97385 4.97971 1.83337 5.33333 1.83337H10.6667C11.0203 1.83337 11.3594 1.97385 11.6095 2.2239C11.8595 2.47395 12 2.81309 12 3.16671V15.1667H4Z" stroke="#3A57E8" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
-                                    <path d="M3.9987 8.5H2.66536C2.31174 8.5 1.9726 8.64048 1.72256 8.89052C1.47251 9.14057 1.33203 9.47971 1.33203 9.83333V13.8333C1.33203 14.187 1.47251 14.5261 1.72256 14.7761C1.9726 15.0262 2.31174 15.1667 2.66536 15.1667H3.9987" stroke="#3A57E8" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
-                                    <path d="M12 6.5H13.3333C13.687 6.5 14.0261 6.64048 14.2761 6.89052C14.5262 7.14057 14.6667 7.47971 14.6667 7.83333V13.8333C14.6667 14.187 14.5262 14.5261 14.2761 14.7761C14.0261 15.0262 13.687 15.1667 13.3333 15.1667H12" stroke="#3A57E8" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
-                                    <path d="M6.66797 4.5H9.33464" stroke="#3A57E8" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
-                                    <path d="M6.66797 7.16663H9.33464" stroke="#3A57E8" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
-                                    <path d="M6.66797 9.83337H9.33464" stroke="#3A57E8" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
-                                    <path d="M6.66797 12.5H9.33464" stroke="#3A57E8" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
-                                    </svg>
-                                </span>
+                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="17" viewBox="0 0 16 17" fill="none">
+                      <path d="M4 15.1667V3.16671C4 2.81309 4.14048 2.47395 4.39052 2.2239C4.64057 1.97385 4.97971 1.83337 5.33333 1.83337H10.6667C11.0203 1.83337 11.3594 1.97385 11.6095 2.2239C11.8595 2.47395 12 2.81309 12 3.16671V15.1667H4Z" stroke="#3A57E8" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+                      <path d="M3.9987 8.5H2.66536C2.31174 8.5 1.9726 8.64048 1.72256 8.89052C1.47251 9.14057 1.33203 9.47971 1.33203 9.83333V13.8333C1.33203 14.187 1.47251 14.5261 1.72256 14.7761C1.9726 15.0262 2.31174 15.1667 2.66536 15.1667H3.9987" stroke="#3A57E8" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+                      <path d="M12 6.5H13.3333C13.687 6.5 14.0261 6.64048 14.2761 6.89052C14.5262 7.14057 14.6667 7.47971 14.6667 7.83333V13.8333C14.6667 14.187 14.5262 14.5261 14.2761 14.7761C14.0261 15.0262 13.687 15.1667 13.3333 15.1667H12" stroke="#3A57E8" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+                      <path d="M6.66797 4.5H9.33464" stroke="#3A57E8" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+                      <path d="M6.66797 7.16663H9.33464" stroke="#3A57E8" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+                      <path d="M6.66797 9.83337H9.33464" stroke="#3A57E8" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+                      <path d="M6.66797 12.5H9.33464" stroke="#3A57E8" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+                    </svg>
+                  </span>
                   {{ meeting.type }}
                 </p>
               </div>
diff --git a/xroom-dashboard/src/pages/dashboard/team.vue b/xroom-dashboard/src/pages/dashboard/team.vue
index c9457d5..41ca7dc 100644
--- a/xroom-dashboard/src/pages/dashboard/team.vue
+++ b/xroom-dashboard/src/pages/dashboard/team.vue
@@ -273,21 +273,6 @@
   </div>
   </div>
 
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
   <dialog ref="addUserDialog" class="add-user-dialog">
   <div class="dialog-header">
     <button class="close-btn" @click="closeAddUserDialog">✕</button>
@@ -324,18 +309,6 @@
   </div>
 </dialog>
 
-
-
-
-
-
-
-
-
- 
-
-
-
 </template>
 
 <script>