From 4be71281aea96c6335f0ccef4b6d2581a34b94b8 Mon Sep 17 00:00:00 2001
From: Diyar Akhgar <diyar.akhgar@gmail.com>
Date: Tue, 10 Jun 2025 03:09:29 +0330
Subject: [PATCH] Add meet_edit API /// End Of get_user_meeting API

---
 .../src/components/CreateMeetingModal.vue     |    4 +-
 .../src/components/MeetingInfoModal.vue       | 1268 +++++++++++++++++
 .../src/components/RoomSelectionModal.vue     |   30 +-
 .../src/pages/dashboard/Meeting.vue           |  272 +++-
 4 files changed, 1495 insertions(+), 79 deletions(-)
 create mode 100644 xroom-dashboard/src/components/MeetingInfoModal.vue

diff --git a/xroom-dashboard/src/components/CreateMeetingModal.vue b/xroom-dashboard/src/components/CreateMeetingModal.vue
index be8a99d..d180f5b 100644
--- a/xroom-dashboard/src/components/CreateMeetingModal.vue
+++ b/xroom-dashboard/src/components/CreateMeetingModal.vue
@@ -385,6 +385,7 @@
   </div>
   <RoomSelectionModal
     :is-open="isRoomSelectionOpen"
+    :selected-room-id="form.selectedRoom ? form.selectedRoom.id : null"
     @close="isRoomSelectionOpen = false"
     @submit-room="handleRoomSelection"
   />
@@ -568,6 +569,7 @@ export default {
       this.$emit('close');
       this.resetForm();
     },
+    
     resetForm() {
       this.form = {
         title: '',
@@ -644,6 +646,7 @@ export default {
 };
 </script>
 
+
 <style scoped>
 .participant-input {
   position: relative;
@@ -773,7 +776,6 @@ export default {
   justify-content: center;
 }
 
-/*  */
 
 .modal-overlay {
   position: fixed;
diff --git a/xroom-dashboard/src/components/MeetingInfoModal.vue b/xroom-dashboard/src/components/MeetingInfoModal.vue
new file mode 100644
index 0000000..01cc4cf
--- /dev/null
+++ b/xroom-dashboard/src/components/MeetingInfoModal.vue
@@ -0,0 +1,1268 @@
+<template>
+  <div v-if="isOpen && !isRoomSelectionOpen" class="modal-overlay" @click="closeModal">
+    <div class="modal-content" ref="modalContent" @click.stop>
+      <div class="popUp-header">
+        <h2>{{ isEditing ? 'ویرایش جلسه' : 'جزئیات جلسه' }}</h2>
+        <button @click="closeModalByButton">
+          <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>{{ isEditing ? 'جزئیات جلسه را ویرایش کنید.' : 'جزئیات جلسه را مشاهده کنید.' }}</span>
+      </div>
+      <div class="popUp-objects">
+        <form @submit.prevent="handleSubmit">
+          <div class="form-group">
+            <label for="meetingTitle">نام جلسه</label>
+            <input
+              type="text"
+              id="meetingTitle"
+              v-model="form.title"
+              :disabled="!isEditing"
+              required
+            />
+          </div>
+          <div class="form-group">
+            <label for="meet-description">شرح جلسه</label>
+            <textarea
+              name="meet-description"
+              id="meet-description"
+              v-model="form.description"
+              :disabled="!isEditing"
+            ></textarea>
+          </div>
+          <div class="form-group">
+            <label for="meetingDate">روز</label>
+            <div class="input-group">
+              <span class="calendar-icon" style="position: absolute; z-index: 99; top: 10px; left: 65%;">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="18"
+                  height="18"
+                  viewBox="0 0 16 16"
+                  fill="none"
+                >
+                  <g clip-path="url(#clip0_312_7390)">
+                    <path
+                      d="M14.1147 4.54126C14.4671 4.18888 14.6652 3.71091 14.6652 3.2125C14.6653 2.71409 14.4674 2.23607 14.115 1.8836C13.7626 1.53112 13.2846 1.33307 12.7862 1.33301C12.2878 1.33295 11.8098 1.53088 11.4573 1.88326L2.55999 10.7826C2.4052 10.9369 2.29073 11.127 2.22665 11.3359L1.34599 14.2373C1.32876 14.2949 1.32746 14.3562 1.34222 14.4145C1.35699 14.4728 1.38727 14.5261 1.42985 14.5686C1.47244 14.6111 1.52573 14.6413 1.58409 14.656C1.64245 14.6707 1.70369 14.6693 1.76132 14.6519L4.66332 13.7719C4.8721 13.7084 5.0621 13.5947 5.21665 13.4406L14.1147 4.54126Z"
+                      stroke="#3A57E8"
+                      stroke-width="1.25"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                    />
+                    <path
+                      d="M10 3.33337L12.6667 6.00004"
+                      stroke="#3A57E8"
+                      stroke-width="1.25"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                    />
+                  </g>
+                  <defs>
+                    <clipPath id="clip0_312_7390">
+                      <rect width="16" height="16" fill="white" />
+                    </clipPath>
+                  </defs>
+                </svg>
+              </span>
+              <VuePersianDatetimePicker
+                v-model="form.date"
+                type="date"
+                format="jYYYY/jMM/jDD"
+                locale="fa"
+                :auto-submit="true"
+                input-class="form-control"
+                id="meetingDate"
+                style="border-radius: 0 8px 8px 0; text-align: center; position: relative;"
+                :disabled="!isEditing"
+                required
+              />
+            </div>
+          </div>
+          <div class="form-group">
+            <label for="meetingTime">ساعت</label>
+            <div class="input-group">
+              <div class="time-input-group">
+                <p style="margin-left: 1rem;">شروع</p>
+                <div class="input-div">
+                  <button type="button" @click="incrementTime('startMinute')" :disabled="!isEditing">
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="24"
+                      height="24"
+                      viewBox="0 0 20 20"
+                      fill="none"
+                    >
+                      <path
+                        d="M15 12.5L10 7.5L5 12.5"
+                        stroke="#3A57E8"
+                        stroke-width="2"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                      />
+                    </svg>
+                  </button>
+                  <input
+                    type="number"
+                    v-model.number="form.startMinute"
+                    min="0"
+                    max="59"
+                    :disabled="!isEditing"
+                    required
+                  />
+                  <button type="button" @click="decrementTime('startMinute')" :disabled="!isEditing">
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="24"
+                      height="24"
+                      viewBox="0 0 20 20"
+                      fill="none"
+                    >
+                      <path
+                        d="M5 7.5L10 12.5L15 7.5"
+                        stroke="#3A57E8"
+                        stroke-width="2"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                      />
+                    </svg>
+                  </button>
+                </div>
+                <span>:</span>
+                <div class="input-div">
+                  <button type="button" @click="incrementTime('startHour')" :disabled="!isEditing">
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="24"
+                      height="24"
+                      viewBox="0 0 20 20"
+                      fill="none"
+                    >
+                      <path
+                        d="M15 12.5L10 7.5L5 12.5"
+                        stroke="#3A57E8"
+                        stroke-width="2"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                      />
+                    </svg>
+                  </button>
+                  <input
+                    type="number"
+                    v-model.number="form.startHour"
+                    min="0"
+                    max="23"
+                    :disabled="!isEditing"
+                    required
+                  />
+                  <button type="button" @click="decrementTime('startHour')" :disabled="!isEditing">
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="24"
+                      height="24"
+                      viewBox="0 0 20 20"
+                      fill="none"
+                    >
+                      <path
+                        d="M5 7.5L10 12.5L15 7.5"
+                        stroke="#3A57E8"
+                        stroke-width="2"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                      />
+                    </svg>
+                  </button>
+                </div>
+                <p style="margin-left: 1rem; margin-right: 2.5rem;">پایان</p>
+                <div class="input-div">
+                  <button type="button" @click="incrementTime('endMinute')" :disabled="!isEditing">
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="24"
+                      height="24"
+                      viewBox="0 0 20 20"
+                      fill="none"
+                    >
+                      <path
+                        d="M15 12.5L10 7.5L5 12.5"
+                        stroke="#3A57E8"
+                        stroke-width="2"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                      />
+                    </svg>
+                  </button>
+                  <input
+                    type="number"
+                    v-model.number="form.endMinute"
+                    min="0"
+                    max="59"
+                    :disabled="!isEditing"
+                    required
+                  />
+                  <button type="button" @click="decrementTime('endMinute')" :disabled="!isEditing">
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="24"
+                      height="24"
+                      viewBox="0 0 20 20"
+                      fill="none"
+                    >
+                      <path
+                        d="M5 7.5L10 12.5L15 7.5"
+                        stroke="#3A57E8"
+                        stroke-width="2"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                      />
+                    </svg>
+                  </button>
+                </div>
+                <span>:</span>
+                <div class="input-div">
+                  <button type="button" @click="incrementTime('endHour')" :disabled="!isEditing">
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="24"
+                      height="24"
+                      viewBox="0 0 20 20"
+                      fill="none"
+                    >
+                      <path
+                        d="M15 12.5L10 7.5L5 12.5"
+                        stroke="#3A57E8"
+                        stroke-width="2"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                      />
+                    </svg>
+                  </button>
+                  <input
+                    type="number"
+                    v-model.number="form.endHour"
+                    min="0"
+                    max="23"
+                    :disabled="!isEditing"
+                    required
+                  />
+                  <button type="button" @click="decrementTime('endHour')" :disabled="!isEditing">
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="24"
+                      height="24"
+                      viewBox="0 0 20 20"
+                      fill="none"
+                    >
+                      <path
+                        d="M5 7.5L10 12.5L15 7.5"
+                        stroke="#3A57E8"
+                        stroke-width="2"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                      />
+                    </svg>
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="form-group">
+            <label style="font-size: 19px; font-weight: 600;">اتاق جلسه</label>
+            <div class="rooms-selecter">
+              <span>{{ form.selectedRoom ? '1 اتاق انتخاب شده' : '0 اتاق انتخاب شده' }}</span>
+              <button type="button" @click="openRoomSelection" :disabled="!isEditing">
+                انتخاب اتاق جلسه
+              </button>
+            </div>
+          </div>
+          <div class="participants-objects">
+            <h2>شرکت‌کنندگان</h2>
+            <p>
+              <span style="color: #101010; font-weight: 600;">کاربران</span> یا
+              <span style="color: #101010; font-weight: 600;">مهمانان تیم</span> دعوت‌شده به جلسه.
+            </p>
+          </div>
+          <div class="presenter">
+            <div style="display: flex; align-items: center; height: 100%;">
+              <div class="avatar-wrapper">
+                <img class="user-avatar" :src="profileIcon" />
+              </div>
+              <div class="user-info">
+                <p class="user-name">{{ fullName }}</p>
+                <span>{{ userPhone }}</span>
+              </div>
+            </div>
+            <p class="presenter-role">{{ userRole }}</p>
+          </div>
+          <div class="presenter" v-for="participant in participants" :key="participant.id">
+            <div style="display: flex; align-items: center; height: 100%;">
+              <div class="avatar-wrapper">
+                <img class="user-avatar" :src="participant.profile_img || defaultProfileIcon" />
+              </div>
+              <div class="user-info">
+                <p class="user-name">{{ participant.name || 'کاربر مهمان' }}</p>
+                <span>{{ participant.phone }}</span>
+              </div>
+            </div>
+            <p class="presenter-role">{{ participant.role }}</p>
+            <button v-if="isEditing" @click="removeParticipant(participant.id)">
+              <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="white" />
+                <rect x="0.5" y="0.5" width="31" height="31" rx="7.5" stroke="#E2DEE9" />
+                <path
+                  d="M20.5 12L12.5 20"
+                  stroke="#101010"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                />
+                <path
+                  d="M12.5 12L20.5 20"
+                  stroke="#101010"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                />
+              </svg>
+            </button>
+          </div>
+          <div v-if="isEditing" class="form-group">
+            <label for="participantInput">اضافه کردن شرکت‌کننده</label>
+            <div class="participant-input">
+              <div class="custom-input" @click="toggleDropdown" ref="customInput">
+                <span v-if="!selectedParticipantId">یک عضو تیم انتخاب کنید</span>
+                <span v-else>{{ getParticipantName(selectedParticipantId) }}</span>
+                <svg
+                  class="dropdown-icon"
+                  :class="{ active: isDropdownOpen }"
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="24"
+                  height="24"
+                  viewBox="0 0 20 20"
+                  fill="none"
+                >
+                  <path
+                    d="M5 7.5L10 12.5L15 7.5"
+                    stroke="#3A57E8"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  />
+                </svg>
+              </div>
+              <div v-if="isDropdownOpen" class="dropdown-menu" ref="dropdownMenu">
+                <div
+                  v-for="member in teamMembers"
+                  :key="member.user.id"
+                  class="dropdown-item"
+                  @click="selectParticipant(member.user.id)"
+                >
+                  <div class="avatar-wrapper">
+                    <img
+                      :src="member.profile_img || defaultProfileIcon"
+                      class="user-avatar"
+                      alt="Profile"
+                    />
+                  </div>
+                  <div class="user-info">
+                    <div style="display: flex; flex-direction: column; gap: 1rem;">
+                      <p class="user-name">{{ member.user.first_name }} {{ member.user.last_name }}</p>
+                      <span>{{ member.mobile_number }}</span>
+                    </div>
+                    <span class="user-role">{{ member.semat || 'بدون سمت' }}</span>
+                  </div>
+                </div>
+                <div v-if="!teamMembers.length" class="dropdown-item no-members">
+                  هیچ عضوی یافت نشد
+                </div>
+              </div>
+            </div>
+          </div>
+        </form>
+        <span class="last-span">
+          شرکت‌کنندگان دعوت‌شده به این جلسه. برای شرکت‌کنندگانی که اضافه شده‌اند، پیامکی حاوی کد
+          جلسه، عنوان، توضیحات و زمان ارسال می‌شود.
+        </span>
+      </div>
+      <div class="form-actions">
+        <button type="button" class="cancel-button" @click="closeModalByButton">بستن</button>
+        <button
+          v-if="!isEditing"
+          type="button"
+          class="submit-button"
+          @click="isEditing = true"
+        >
+          ویرایش
+        </button>
+        <button
+          v-if="isEditing"
+          type="button"
+          class="submit-button"
+          @click="handleSubmit"
+        >
+          ذخیره تغییرات
+        </button>
+      </div>
+    </div>
+  </div>
+  <RoomSelectionModal
+    :is-open="isRoomSelectionOpen"
+    :selected-room-id="form.selectedRoom ? form.selectedRoom.id : null"
+    @close="isRoomSelectionOpen = false"
+    @submit-room="handleRoomSelection"
+  />
+</template>
+
+<script>
+import VuePersianDatetimePicker from 'vue3-persian-datetime-picker';
+import moment from 'moment-jalaali';
+import RoomSelectionModal from './RoomSelectionModal.vue';
+import axios from 'axios';
+
+const API_BASE_URL = 'http://my.xroomapp.com:8000';
+
+export default {
+  name: 'MeetingInfoModal',
+  components: { VuePersianDatetimePicker, RoomSelectionModal },
+  props: {
+    isOpen: { type: Boolean, default: false },
+    meeting: { type: Object, default: null },
+  },
+  data() {
+    return {
+      defaultProfileIcon: 'https://models.readyplayer.me/681f59760bc631a87ad25172.png',
+      isEditing: false,
+      form: {
+        title: '',
+        description: '',
+        date: '',
+        startHour: 12,
+        startMinute: 0,
+        endHour: 13,
+        endMinute: 0,
+        selectedRoom: null,
+        space: null,
+        asset_bundle: null,
+        use_space: false,
+      },
+      participants: [],
+      teamMembers: [],
+      selectedParticipantId: '',
+      isDropdownOpen: false,
+      isRoomSelectionOpen: false,
+      error: null,
+    };
+  },
+  computed: {
+    customer() {
+      return JSON.parse(localStorage.getItem('customer') || '{}');
+    },
+    fullName() {
+      return this.customer.first_name && this.customer.last_name
+        ? `${this.customer.first_name} ${this.customer.last_name}`
+        : 'کاربر مهمان';
+    },
+    userPhone() {
+      return this.customer.mobile_number || 'شماره تلفن موجود نیست';
+    },
+    userRole() {
+      return this.customer.semat || 'مجری';
+    },
+    profileIcon() {
+      return this.customer.profile_img || this.defaultProfileIcon;
+    },
+    userId() {
+      return this.customer.id || null;
+    },
+  },
+  watch: {
+    isOpen(newVal) {
+      if (newVal && this.meeting) {
+        this.loadMeetingData();
+        this.fetchTeamMembers();
+      }
+      document.body.style.overflow = newVal && !this.isRoomSelectionOpen ? 'hidden' : '';
+    },
+    meeting(newVal) {
+      if (newVal) {
+        this.loadMeetingData();
+      }
+    },
+    isRoomSelectionOpen(newVal) {
+      document.body.style.overflow = newVal ? 'hidden' : '';
+    },
+  },
+  methods: {
+    async fetchTeamMembers() {
+      try {
+        const token = localStorage.getItem('token');
+        if (!token) throw new Error('توکن احراز هویت پیدا نشد');
+        const response = await axios.get(`${API_BASE_URL}/get_all_team_members`, {
+          headers: { Authorization: `Token ${token.trim()}` },
+        });
+        this.teamMembers = response.data.members.filter(
+          (member) => member.user?.id && member.user.first_name && member.user.last_name
+        );
+      } catch (error) {
+        if (error.response?.status === 403) {
+          alert('لطفاً دوباره وارد شوید');
+          window.location.href = '/login';
+        }
+        this.error = 'خطا در بارگذاری لیست اعضای تیم';
+      }
+    },
+    async loadMeetingData() {
+      try {
+        const token = localStorage.getItem('token');
+        if (!token) throw new Error('توکن احراز هویت پیدا نشد');
+        const response = await axios.get(`${API_BASE_URL}/get_user_meetings`, {
+          headers: { Authorization: `Token ${token.trim()}` },
+        });
+        const meeting = response.data.meetings.find((m) => m.id === this.meeting.id);
+        if (!meeting) throw new Error('جلسه یافت نشد');
+        const dateTime = moment(meeting.date_time);
+        const isSpaceUsed = meeting.use_space;
+        const roomData = isSpaceUsed ? meeting.space_data : meeting.asset_bundle_data;
+        let imageUrl = 'https://via.placeholder.com/150';
+        if (isSpaceUsed && meeting.space_data?.assetBundleRoomId?.img) {
+          imageUrl = meeting.space_data.assetBundleRoomId.img.startsWith('http')
+            ? meeting.space_data.assetBundleRoomId.img
+            : `${API_BASE_URL}${meeting.space_data.assetBundleRoomId.img}`;
+        } else if (!isSpaceUsed && meeting.asset_bundle_data?.img) {
+          imageUrl = meeting.asset_bundle_data.img.startsWith('http')
+            ? meeting.asset_bundle_data.img
+            : `${API_BASE_URL}${meeting.asset_bundle_data.img}`;
+        }
+        this.form = {
+          title: meeting.name,
+          description: meeting.description || '',
+          date: dateTime.format('jYYYY/jMM/jDD'),
+          startHour: dateTime.hour(),
+          startMinute: dateTime.minute(),
+          endHour: dateTime.hour() + 1,
+          endMinute: dateTime.minute(),
+          selectedRoom: {
+            id: isSpaceUsed ? meeting.space : meeting.asset_bundle,
+            name: roomData?.name || 'اتاق',
+            type: roomData?.description || 'اتاق',
+            capacity: isSpaceUsed ? meeting.space_data?.capacity : meeting.asset_bundle_data?.maxPerson || 10,
+            image: imageUrl,
+          },
+          space: meeting.space,
+          asset_bundle: meeting.asset_bundle,
+          use_space: isSpaceUsed,
+        };
+        this.participants = [];
+        this.participants = meeting.invited_users
+          .filter((user) => user.id !== this.userId)
+          .map((user) => ({
+            id: user.id,
+            name: user.customer.first_name
+              ? `${user.customer.first_name} ${user.customer.last_name}`
+              : user.username,
+            phone: user.customer.mobile_number,
+            role: user.customer.semat || 'بدون سمت',
+            profile_img: user.customer.profile_img || this.defaultProfileIcon,
+          }));
+        this.isEditing = false;
+      } catch (error) {
+        this.error = `خطا در بارگذاری اطلاعات جلسه: ${error.message}`;
+      }
+    },
+    toggleDropdown(event) {
+      this.isDropdownOpen = !this.isDropdownOpen;
+      event.stopPropagation();
+    },
+    selectParticipant(id) {
+      this.selectedParticipantId = id;
+      this.isDropdownOpen = false;
+      this.addParticipant();
+    },
+    closeDropdownOnClick(event) {
+      if (
+        this.isDropdownOpen &&
+        this.$refs.customInput &&
+        !this.$refs.customInput.contains(event.target)
+      ) {
+        this.isDropdownOpen = false;
+      }
+    },
+    openRoomSelection() {
+      this.isRoomSelectionOpen = true;
+    },
+    handleRoomSelection(room) {
+      this.form.selectedRoom = {
+        id: room.id,
+        name: room.name || 'اتاق',
+        type: room.type || 'اتاق',
+        capacity: room.capacity || 10,
+        image: room.image || 'https://via.placeholder.com/150',
+      };
+      this.form.space = room.space;
+      this.form.asset_bundle = room.asset_bundle;
+      this.form.use_space = room.use_space;
+      this.isRoomSelectionOpen = false;
+    },
+    getParticipantName(id) {
+      const member = this.teamMembers.find((m) => m.user.id === id);
+      return member ? `${member.user.first_name} ${member.user.last_name}` : '';
+    },
+    addParticipant() {
+      if (!this.selectedParticipantId) {
+        this.error = 'لطفاً یک عضو تیم انتخاب کنید.';
+        return;
+      }
+      const selectedMember = this.teamMembers.find((member) => member.user.id === this.selectedParticipantId);
+      if (!selectedMember) {
+        this.error = 'کاربر انتخاب‌شده یافت نشد.';
+        return;
+      }
+      if (this.participants.some((p) => p.id === this.selectedParticipantId)) {
+        this.error = 'این کاربر قبلاً اضافه شده است.';
+        return;
+      }
+      if (this.selectedParticipantId === this.userId) {
+        this.error = 'نمی‌توانید خودتان را به‌عنوان شرکت‌کننده اضافه کنید.';
+        return;
+      }
+      this.participants.push({
+        id: selectedMember.user.id,
+        phone: selectedMember.mobile_number,
+        name: `${selectedMember.user.first_name} ${selectedMember.user.last_name}`,
+        role: selectedMember.semat || 'بدون سمت',
+        profile_img: selectedMember.profile_img || this.defaultProfileIcon,
+      });
+      this.selectedParticipantId = '';
+      this.isDropdownOpen = false;
+      this.error = null;
+    },
+    removeParticipant(id) {
+      this.participants = this.participants.filter((p) => p.id !== id);
+      this.error = null;
+    },
+    closeModal(event) {
+      if (event && event.target.classList.contains('modal-overlay')) {
+        this.$emit('close');
+        this.resetForm();
+      }
+    },
+    closeModalByButton() {
+      this.$emit('close');
+      this.resetForm();
+    },
+    resetForm() {
+      this.form = {
+        title: '',
+        description: '',
+        date: moment().format('jYYYY/jMM/jDD'),
+        startHour: 12,
+        startMinute: 0,
+        endHour: 13,
+        endMinute: 0,
+        selectedRoom: null,
+        space: null,
+        asset_bundle: null,
+        use_space: false,
+      };
+      this.participants = [];
+      this.selectedParticipantId = '';
+      this.isDropdownOpen = false;
+      this.isEditing = false;
+      this.error = null;
+      this.isRoomSelectionOpen = false;
+    },
+    incrementTime(field) {
+      const limits = { startHour: 23, startMinute: 59, endHour: 23, endMinute: 59 };
+      if (this.form[field] < limits[field]) this.form[field]++;
+    },
+    decrementTime(field) {
+      if (this.form[field] > 0) this.form[field]--;
+    },
+    async handleSubmit() {
+      if (!this.form.title || !this.form.date) {
+        this.error = 'لطفاً نام جلسه و تاریخ را وارد کنید.';
+        return;
+      }
+      if (!this.form.selectedRoom || this.form.space === null || this.form.asset_bundle === null) {
+        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({ hour: this.form.startHour, minute: this.form.startMinute, second: 0 })
+        .toISOString();
+      const meetingData = {
+        meeting_id: this.meeting.id,
+        name: this.form.title,
+        description: this.form.description,
+        date_time: startDateTime,
+        space: this.form.space,
+        asset_bundle: this.form.asset_bundle,
+        use_space: this.form.use_space,
+        user_ids: [this.userId, ...this.participants.map((p) => p.id)],
+      };
+      try {
+        const token = localStorage.getItem('token');
+        if (!token) throw new Error('توکن احراز هویت پیدا نشد');
+        await axios.post(`${API_BASE_URL}/edit_meeting`, meetingData, {
+          headers: {
+            'Content-Type': 'application/json',
+            Authorization: `Token ${token.trim()}`,
+          },
+        });
+        this.$emit('update-meeting', {
+          id: this.meeting.id,
+          title: meetingData.name,
+          description: meetingData.description,
+          date: startDateTime,
+          image: this.form.selectedRoom.image || 'https://via.placeholder.com/150',
+          type: this.form.selectedRoom.name || 'جلسه',
+          maxCapacity: this.form.selectedRoom.capacity || 10,
+          invited_users: this.participants,
+        });
+        this.closeModalByButton();
+        alert('جلسه با موفقیت ویرایش شد!');
+      } catch (error) {
+        this.error = `خطا در ویرایش جلسه: ${error.response?.data?.message || error.message}`;
+      }
+    },
+  },
+};
+</script>
+<style scoped>
+.participant-input {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.custom-input {
+  width: 100%;
+  padding: 10px;
+  border: 1px solid #E2DEE9;
+  border-radius: 8px;
+  font-size: 16px;
+  cursor: pointer;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background: #fff;
+  transition: border-color 0.3s ease;
+  user-select: none;
+}
+
+.custom-input:hover {
+  border-color: #3A57E8;
+}
+
+.dropdown-icon {
+  transition: transform 0.3s ease;
+}
+
+.custom-input.active .dropdown-icon {
+  transform: rotate(180deg);
+}
+
+.dropdown-menu {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  background: #fff;
+  border: 1px solid #E2DEE9;
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  max-height: 300px;
+  overflow-y: auto;
+  z-index: 1000;
+  margin-top: 5px;
+}
+
+.dropdown-item {
+  display: flex;
+  align-items: center;
+  padding: 0px;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+}
+
+.dropdown-item:hover {
+  background-color: #f5f7fa;
+}
+
+.dropdown-item .avatar-wrapper {
+  width: 90px;
+  height: 90px;
+  margin-right: 0px;
+}
+
+.dropdown-item .user-avatar {
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  object-fit: cover;
+}
+
+.dropdown-item .user-info {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding-left: 2.5rem;
+  margin-top: 15px;
+}
+
+
+.dropdown-item .user-name {
+  font-size: 16px;
+  font-weight: 600;
+  color: #101010;
+  margin: 0;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow-x: clip;
+  width: 100px;
+}
+
+.dropdown-item .user-info span {
+    font-size: 14px;
+    color: #718096;
+    width: 75px;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow-x: clip;
+}
+
+.dropdown-item .user-role {
+  font-size: 12px;
+  color: #3A57E8;
+  font-weight: 500;
+}
+
+.no-members {
+  padding: 10px;
+  text-align: center;
+  color: #718096;
+}
+
+.participant-input button {
+  margin-left: 10px;
+  padding: 10px;
+  background: #3A57E8;
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/*  */
+
+.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: 700px;
+  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;
+}
+
+
+.popUp-objects {
+    margin-top: 1rem !important;
+    padding: 20px;
+    background-color: #FFFFFF;
+    border-radius: 16px;
+    width: 100%;
+    max-width: 620px;
+    display: block;
+    margin: auto;
+}
+
+.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 {
+  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
+}
+
+.input-group {
+    position: relative;
+    width: 100%;
+}
+
+.form-group textarea {
+  height: 140px;
+  width: 100%;
+  padding: 8px;
+  border: 1px solid #718096;
+  border-radius: 8px;
+  font-size: 1rem;
+  max-width: 25rem;
+  resize: none;
+}
+
+.form-group input:focus {
+    outline: none;
+}
+
+.form-group textarea:focus {
+    outline: none;
+}
+
+.time-input-group {
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+}
+
+.time-input-group input {
+  width: 45px;
+  height: 45px;
+  border: 1px solid #718096;
+  border-radius: 9px;
+  text-align: center;
+  color: #101010;
+  margin-bottom: 0.25rem;
+}
+
+.time-input-group input::-webkit-outer-spin-button,
+.time-input-group input::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+}
+
+.time-input-group input[type=number] {
+    -moz-appearance:textfield;
+}
+
+.time-input-group p {
+  font-size: 17px;
+}
+
+.time-input-group span {
+  margin: 0 0.5rem;
+}
+
+.input-div {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.input-div button {
+  border: none;
+  background-color: transparent;
+  margin: 0;
+  padding: 0;
+}
+
+
+.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;
+}
+
+.rooms-selecter {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.rooms-selecter span {
+  color: #101010;
+  font-size: 17px;
+}
+
+.rooms-selecter button {
+  background-color: #3A57E8;
+  color: #fff;
+  border-radius: 8px;
+  border:none ;
+  font-size: 17px;
+  height: 50px;
+  width: 60%;
+}
+
+.participants-objects h2 {
+  font-weight: 600;
+  font-size: 19px;
+  color: #101010;
+}
+
+.participants-objects p {
+  font-weight: 500;
+  font-size: 16px;
+  color: #5A6678;
+  margin: 2rem 0 1.5rem 0;
+}
+
+.participants-guide {
+  font-size: 16px;
+  color: #5A6678;
+  line-height: 2rem;
+  width: 89%;
+  display: block;
+  max-width: 35rem;
+}
+
+.presenter {
+    margin: 2rem 0 2rem 0;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    box-shadow: 0px 1px 4px 0px #00000029;
+    border-radius: 12px;
+    height: 95px;
+    padding-left: 1rem;
+}
+
+.user-avatar {
+  width: 80px;
+  height: 80px;
+}
+
+.user-info {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  height: 100%;
+  max-height: 80px;
+  font-size: 18px;
+}
+
+.user-info p {
+  font-weight: 600;
+}
+
+.user-info span {
+  color: #667387;
+}
+
+.presenter-role {
+  font-size: 18px;
+  color: #101010;
+  font-weight: 600;
+  width: 160px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow-x: clip;
+}
+
+.presenter button {
+  background-color: transparent;
+  border:none;
+  height: 35px;
+  cursor: pointer;
+}
+
+.last-span {
+  color: rgb(79, 90, 105);
+    font-size: 16.5px;
+    line-height: 190%;
+    display: block;
+    margin-top: 4rem;
+    margin-bottom: 1rem;
+}
+
+.participant-input {
+  position: relative;
+  width: 100%;
+}
+
+.participant-input input {
+  width: 100%;
+}
+
+.participant-input button {
+  position: absolute;
+  right: 0;
+  top: 11px;
+  background-color: transparent;
+  border: none;
+}
+
+#participantPhone::placeholder {
+  text-align: right;
+  padding-right: 1.5rem;
+}
+
+</style>
+
+<style>
+
+.vpd-input-group input {
+    height: 40px;
+    width: 100%;
+    border: 1px solid #718096;
+    border-radius: 8px;
+    font-size: 1rem;
+    max-width: 25rem;
+    text-align: center;
+    padding: 0;
+}
+
+
+.vpd-input-group label {
+    display: none;
+}
+
+
+</style>
\ No newline at end of file
diff --git a/xroom-dashboard/src/components/RoomSelectionModal.vue b/xroom-dashboard/src/components/RoomSelectionModal.vue
index e2b3efe..a4883c9 100644
--- a/xroom-dashboard/src/components/RoomSelectionModal.vue
+++ b/xroom-dashboard/src/components/RoomSelectionModal.vue
@@ -1,4 +1,3 @@
-<!-- RoomSelectionModal.vue -->
 <template>
   <div v-if="isOpen" class="modal-overlay" @click="cancel">
     <div class="modal-content" @click.stop>
@@ -40,7 +39,7 @@
           v-for="room in rooms"
           :key="room.id"
           class="room-item"
-          :class="{ selected: selectedRoom === room.id }"
+          :class="{ selected: selectedRoom == room.id }"
           @click="selectRoom(room.id)"
         >
           <img
@@ -327,6 +326,7 @@ export default {
   name: 'RoomSelectionModal',
   props: {
     isOpen: { type: Boolean, default: false },
+    selectedRoomId: { type: [Number, String, null], default: null },
   },
   data() {
     return {
@@ -336,6 +336,16 @@ export default {
       error: null,
     };
   },
+  watch: {
+    isOpen(newVal) {
+      if (newVal) {
+        this.selectedRoom = this.selectedRoomId;
+      }
+    },
+    selectedRoomId(newVal) {
+      this.selectedRoom = newVal;
+    },
+  },
   created() {
     this.fetchSpaces();
     this.fetchTemporaryRooms();
@@ -361,6 +371,8 @@ export default {
           type: space.description || 'فضا',
           isTemporary: false,
         }));
+
+        this.selectedRoom = this.selectedRoomId;
       } catch (error) {
         if (error.response?.status === 403) {
           window.location.href = '/login';
@@ -385,6 +397,8 @@ export default {
           type: room.description || 'اتاق موقت',
           isTemporary: true,
         }));
+
+        this.selectedRoom = this.selectedRoomId;
       } catch (error) {
         if (error.response?.status === 403) {
           window.location.href = '/login';
@@ -397,16 +411,18 @@ export default {
     },
     cancel() {
       this.$emit('close');
-      this.selectedRoom = null;
+      this.selectedRoom = this.selectedRoomId;
     },
     submitRoom() {
       if (!this.selectedRoom) {
+        this.error = 'لطفاً یک اتاق انتخاب کنید';
         return;
       }
       const selectedRoomDetails = [...this.rooms, ...this.temporaryRooms].find(
-        (room) => room.id === this.selectedRoom
+        (room) => room.id == this.selectedRoom
       );
       if (!selectedRoomDetails) {
+        this.error = 'اتاق انتخاب‌شده یافت نشد';
         return;
       }
 
@@ -417,9 +433,11 @@ export default {
           space: 18,
           asset_bundle: selectedRoomDetails.id,
           use_space: false,
+          image: selectedRoomDetails.image || 'https://via.placeholder.com/150',
         };
       } else {
         if (!selectedRoomDetails.assetBundleRoomId) {
+          this.error = 'اتاق انتخاب‌شده اطلاعات معتبری ندارد';
           return;
         }
         roomData = {
@@ -427,16 +445,16 @@ export default {
           space: selectedRoomDetails.id,
           asset_bundle: selectedRoomDetails.assetBundleRoomId,
           use_space: true,
+          image: selectedRoomDetails.image || 'https://via.placeholder.com/150',
         };
       }
 
       this.$emit('submit-room', roomData);
-      this.selectedRoom = null;
+      this.selectedRoom = this.selectedRoomId;
     },
   },
 };
 </script>
-
 <style scoped>
 .modal-overlay {
   position: fixed;
diff --git a/xroom-dashboard/src/pages/dashboard/Meeting.vue b/xroom-dashboard/src/pages/dashboard/Meeting.vue
index 7401843..bcfc9e4 100644
--- a/xroom-dashboard/src/pages/dashboard/Meeting.vue
+++ b/xroom-dashboard/src/pages/dashboard/Meeting.vue
@@ -70,7 +70,7 @@
         <div v-else class="meetings-list">
           <div v-for="meeting in filteredMeetings" :key="meeting.id" class="meeting-item">
             <img :src="meeting.image" alt="Meeting Image" class="meeting-image" width="120" height="120" />
-            <div class="meeting-details" style="margin-right: 10px;">
+            <div class="meeting-details" style="width:100%;margin-right: 10px;">
               <h3 class="meet-title">{{ meeting.title }}</h3>
               <p class="meet-capacity">
                 <span style="margin-left: 4px;">
@@ -90,75 +90,115 @@
                 </span>
                 حداکثر: {{ meeting.maxCapacity }} کاربر
               </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"/>
+              <div class="card-footer">
+                <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>
+                  {{ meeting.type }}
+                </p>
+                <button class="info-button" @click="openMeetingInfo(meeting)">
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="22"
+                    height="22"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="#3A57E8"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  >
+                    <circle cx="12" cy="12" r="10" />
+                    <line x1="12" y1="16" x2="12" y2="12" />
+                    <line x1="12" y1="8" x2="12.01" y2="8" />
                   </svg>
-                </span>
-                {{ meeting.type }}
-              </p>
+                </button>
+              </div>
             </div>
+
           </div>
           <swiper
-          ref="swiper"
-          :slides-per-view="1.4"
-          :space-between="10"
-          :loop="true"
-          :pagination="{ clickable: true }"
-          :breakpoints="{
-            768: { slidesPerView: 3.3, spaceBetween: 15 },
-            1024: { slidesPerView: 2.1, spaceBetween: 15 },
-            1280: { slidesPerView: 4.1, spaceBetween: 25 },
-          }"
-          :modules="modules"
-          class="swiper-meetings-list"
-        >
-          <swiper-slide v-for="meeting in filteredMeetings" :key="meeting.id" class="swiper-meeting-item">
-            <img :src="meeting.image" alt="Meeting Image" class="meeting-image" width="120" height="120" />
-            <div class="meeting-details" style="margin-right: 10px;">
-              <h3 class="meet-title">{{ meeting.title }}</h3>
-              <p class="meet-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>
-                حداکثر: {{ meeting.maxCapacity }} کاربر
-              </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>
-                {{ meeting.type }}
-              </p>
-            </div>
-          </swiper-slide>
-        </swiper>
+            ref="swiper"
+            :key="filteredMeetings.length + activeFilter + JSON.stringify(filteredMeetings)"
+            :slides-per-view="1.4"
+            :space-between="10"
+            :loop="true"
+            :pagination="{ clickable: true }"
+            :breakpoints="{
+              768: { slidesPerView: 3.3, spaceBetween: 15 },
+              1024: { slidesPerView: 2.1, spaceBetween: 15 },
+              1280: { slidesPerView: 4.1, spaceBetween: 25 },
+            }"
+            :modules="modules"
+            class="swiper-meetings-list"
+          >
+            <swiper-slide v-for="meeting in filteredMeetings" :key="meeting.id" class="swiper-meeting-item">
+              <img :src="meeting.image" alt="Meeting Image" class="meeting-image" width="120" height="120" />
+              <div class="meeting-details" style="width:100%;margin-right: 10px;">
+                <h3 class="meet-title">{{ meeting.title }}</h3>
+                <p class="meet-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>
+                  حداکثر: {{ meeting.maxCapacity }} کاربر
+                </p>
+                <div class="card-footer">
+                  <p class="meet-type">
+                    <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 style="margin-right: 4px;white-space: nowrap;text-overflow: ellipsis;overflow-x: clip;width: 50px;">
+                      {{ meeting.type }}
+                    </span>
+                  </p>
+                  <button class="info-button" @click="openMeetingInfo(meeting)">
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="18"
+                      height="18"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="#3A57E8"
+                      stroke-width="2"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                    >
+                      <circle cx="12" cy="12" r="10" />
+                      <line x1="12" y1="16" x2="12" y2="12" />
+                      <line x1="12" y1="8" x2="12.01" y2="8" />
+                    </svg>
+                  </button>
+                </div>
+              </div>
+            </swiper-slide>
+          </swiper>
         </div>
 
         <button
@@ -176,12 +216,18 @@
       @create-meeting="createNewMeeting"
       @close="showModal = false"
     />
+    <MeetingInfoModal
+      :is-open="showInfoModal"
+      :meeting="selectedMeeting"
+      @close="showInfoModal = false"
+      @update-meeting="updateMeeting"
+    />
   </div>
 </template>
 
-
 <script>
 import CreateMeetingModal from '@/components/CreateMeetingModal.vue';
+import MeetingInfoModal from '@/components/MeetingInfoModal.vue';
 import { Swiper, SwiperSlide } from 'swiper/vue';
 import 'swiper/css';
 import { Pagination } from 'swiper/modules';
@@ -195,12 +241,15 @@ export default {
     Swiper,
     SwiperSlide,
     CreateMeetingModal,
+    MeetingInfoModal,
   },
   data() {
     return {
       searchQuery: '',
       activeFilter: 'future',
       showModal: false,
+      showInfoModal: false,
+      selectedMeeting: null,
       modules: [Pagination],
       meetings: [],
       filteredMeetings: [],
@@ -210,9 +259,37 @@ export default {
     this.fetchMeetings();
   },
   methods: {
+    async updateMeeting(updatedMeeting) {
+      try {
+        this.meetings = this.meetings.map((meeting) =>
+          meeting.id === updatedMeeting.id
+            ? {
+                ...meeting,
+                title: updatedMeeting.title,
+                date: updatedMeeting.date,
+                image: updatedMeeting.image || meeting.image || 'https://via.placeholder.com/150',
+                type: updatedMeeting.type,
+                maxCapacity: updatedMeeting.maxCapacity,
+              }
+            : meeting
+        );
+        this.filterMeetings();
+        this.showInfoModal = false;
+        this.$nextTick(() => {
+          this.refreshSwiper();
+        });
+      } catch (error) {
+        alert(`خطا در به‌روزرسانی جلسات: ${error.message}`);
+      }
+    },
+    openMeetingInfo(meeting) {
+      this.selectedMeeting = meeting;
+      this.showInfoModal = true;
+    },
     refreshSwiper() {
       if (this.$refs.swiper && this.$refs.swiper.swiper) {
         this.$refs.swiper.swiper.update();
+        this.$refs.swiper.swiper.slideTo(0);
       }
     },
     async fetchMeetings() {
@@ -379,7 +456,7 @@ export default {
   margin-top: 1rem;
   position: relative;
   display: inline-block;
-  width: 100%;
+  width: 95%;
 }
 
 .search-wrapper::before {
@@ -537,8 +614,26 @@ export default {
   padding : 0;
 }
 
+.card-footer {
+  display : flex;
+  align-items : center;
+  justify-content: space-between;
+}
+
+.info-button {
+  border: none;
+  background-color: transparent;
+  cursor: pointer;
+}
+
+
 /* Mobile devices (max-width: 600px) */
 @media (max-width: 600px) {
+
+/*   .info-button {
+    height: 18px;
+  } */
+
   .meeting-filters {
     display: flex;
     flex-direction: column;
@@ -624,7 +719,7 @@ export default {
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow-x: clip;
-    width: 95px;
+    width: 130px;
     text-align: justify;
   }
 
@@ -703,10 +798,24 @@ export default {
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow-x: clip;
-    width: 90px;
+    width: 120px;
     text-align: justify;
   }
 
+
+  .meeting-details {
+    width: 60% !important;
+  }
+
+  .info-button svg {
+    height: 18px !important;
+    width: 18px !important;
+  }
+
+  .info-button {
+    height: 18px;
+  }
+
   .meet-capacity,
   .meet-type {
     font-size: 12px;
@@ -832,6 +941,20 @@ export default {
     width: max-content;
   }
 
+
+
+  .meet-title{
+    width: 150px !important;
+  }
+
+  .meet-type span {
+    width : 120px !important;
+  }
+
+  .info-button {
+    height: 18px;
+  }
+
   .meetings-list {
     display: flex;
     margin-bottom: 2rem;
@@ -923,13 +1046,18 @@ export default {
     padding: 8px;
   }
 
+  .meeting-details {
+    width: 60% !important;
+  }
+
   .meet-title {
-    font-size: 16px;
+    font-size: 17px;
+    width : 200px;
   }
 
   .meet-capacity,
   .meet-type {
-    font-size: 14px;
+    font-size: 15.5px;
   }
 
   .section-title {