full screen content // add get_user_meeting

xroom-dashboard/src/App.vue

@@ -20,6 +20,7 @@
   </div>
 </template>
 
+
 <script>
 import AppHeader from '@/components/Header.vue';
 import SidebarMenu from '@/components/SidebarMenu.vue';
@@ -46,10 +47,20 @@ export default {
     toggleSidebar() {
       this.isSidebarOpen = !this.isSidebarOpen;
     }
+  },
+  mounted() {
+    const content = document.querySelector('.content');
+    if (content) {
+      content.addEventListener('scroll', () => {
+        document.body.scrollTop = content.scrollTop;
+        document.documentElement.scrollTop = content.scrollTop;
+      });
+    }
   }
 };
 </script>
 
+
 <style scoped>
 /* Reset default margins and set base font */
 body {
@@ -57,12 +68,15 @@ body {
   padding: 0;
   font-family: 'Yekan', 'Arial', sans-serif;
   background-color: #f4f7fa;
+  overflow-x: hidden;
+  overflow-y: auto;
+  height: 100%;
 }
 
 /* App title styling */
 .app-title {
   color: #fff;
-  font-size: 2rem; /* 32px, using rem for scalability */
+  font-size: 2rem;
   font-weight: 700;
   margin: 0;
 }
@@ -72,12 +86,14 @@ body {
   display: flex;
   flex-direction: column;
     min-height: 100vh;
+  overflow-y: auto;
+  
 }
 
 /* Router view content */
 router-view {
   flex-grow: 1;
-  padding: 1.25rem; /* 20px, using rem for consistency */
+  padding: 1.25rem;
 }
 
 </style>
@@ -90,7 +106,7 @@ router-view {
   src: url('@/assets/fonts/IRANSansXFaNum-Medium.ttf') format('truetype');
   font-weight: 500;
   font-style: normal;
-  font-display: swap; /* Improves font loading performance */
+  font-display: swap;
 }
 
 /* Global Font Application */
@@ -106,6 +122,14 @@ router-view {
   flex-direction: column;
   gap: 32px;
   padding: 35px 80px;
+  height: 100vh;
+  overflow-y: scroll;
+  box-sizing: border-box;
+}
+
+.content::-webkit-scrollbar {
+  width: 0;
+  display: none;
 }
 
 /* Responsive Styles */

xroom-dashboard/src/components/CreateMeetingModal.vue

@@ -416,6 +416,8 @@ export default {
         endHour: 18,
         endMinute: 0,
         selectedRoom: null,
+        space: null,
+        asset_bundle: null,
         use_space: false,
       },
       participants: [],
@@ -431,8 +433,9 @@ export default {
       return JSON.parse(localStorage.getItem('customer') || '{}');
     },
     fullName() {
-      const user = JSON.parse(localStorage.getItem('user') || '{}');
+      return this.customer.first_name && this.customer.last_name
-      return user.first_name && user.last_name ? `${user.first_name} ${user.last_name}` : 'کاربر مهمان';
+        ? `${this.customer.first_name} ${this.customer.last_name}`
+        : 'کاربر مهمان';
     },
     userPhone() {
       return this.customer.mobile_number || 'شماره تلفن موجود نیست';
@@ -514,6 +517,8 @@ export default {
     },
     handleRoomSelection(room) {
       this.form.selectedRoom = room;
+      this.form.space = room.space;
+      this.form.asset_bundle = room.asset_bundle;
       this.form.use_space = room.use_space;
       this.isRoomSelectionOpen = false;
     },
@@ -573,6 +578,8 @@ export default {
         endHour: 18,
         endMinute: 0,
         selectedRoom: null,
+        space: null,
+        asset_bundle: null,
         use_space: false,
       };
       this.participants = [];
@@ -593,7 +600,7 @@ export default {
         this.error = 'لطفاً نام جلسه و تاریخ را وارد کنید.';
         return;
       }
-      if (!this.form.selectedRoom) {
+      if (!this.form.selectedRoom || this.form.space === null || this.form.asset_bundle === null) {
         this.error = 'لطفاً یک اتاق برای جلسه انتخاب کنید.';
         return;
       }
@@ -612,16 +619,18 @@ export default {
         .clone()
         .set({ hour: this.form.startHour, minute: this.form.startMinute, second: 0 })
         .toISOString();
-      try {
+
       const meetingData = {
         name: this.form.title,
         description: this.form.description,
         date_time: startDateTime,
-          space: this.form.selectedRoom.id,
+        space: this.form.space,
-          asset_bundle: 1,
+        asset_bundle: this.form.asset_bundle,
         use_space: this.form.use_space,
         user_ids: [this.userId, ...this.participants.map((p) => p.id)],
       };
+
+      try {
         this.$emit('create-meeting', meetingData);
         this.closeModalByButton();
       } catch (error) {

xroom-dashboard/src/components/RoomSelectionModal.vue

@@ -1,3 +1,4 @@
+<!-- RoomSelectionModal.vue -->
 <template>
   <div v-if="isOpen" class="modal-overlay" @click="cancel">
     <div class="modal-content" @click.stop>
@@ -343,7 +344,7 @@ export default {
     async fetchSpaces() {
       try {
         const token = localStorage.getItem('token');
-        if (!token) throw new Error('توکن احراز هویت پیدا نشد');
+        if (!token) throw new Error();
 
         const response = await axios.get(`${API_BASE_URL}/get_space`, {
           headers: { Authorization: `Token ${token.trim()}` },
@@ -351,6 +352,7 @@ export default {
 
         this.rooms = response.data.spaces.map((space) => ({
           id: space.id,
+          assetBundleRoomId: space.assetBundleRoomId?.id,
           image: space.assetBundleRoomId?.img
             ? `${API_BASE_URL}${space.assetBundleRoomId.img}`
             : DEFAULT_IMAGE,
@@ -361,7 +363,6 @@ export default {
         }));
       } catch (error) {
         if (error.response?.status === 403) {
-          alert('لطفاً دوباره وارد شوید');
           window.location.href = '/login';
         }
         this.error = 'خطا در بارگذاری لیست اتاق‌ها';
@@ -370,7 +371,7 @@ export default {
     async fetchTemporaryRooms() {
       try {
         const token = localStorage.getItem('token');
-        if (!token) throw new Error('توکن احراز هویت پیدا نشد');
+        if (!token) throw new Error();
 
         const response = await axios.get(`${API_BASE_URL}/get_assigned_assetbundle_rooms`, {
           headers: { Authorization: `Token ${token.trim()}` },
@@ -386,7 +387,6 @@ export default {
         }));
       } catch (error) {
         if (error.response?.status === 403) {
-          alert('لطفاً دوباره وارد شوید');
           window.location.href = '/login';
         }
         this.error = 'خطا در بارگذاری لیست اتاق‌های موقت';
@@ -401,24 +401,42 @@ export default {
     },
     submitRoom() {
       if (!this.selectedRoom) {
-        alert('لطفاً یک اتاق انتخاب کنید.');
         return;
       }
       const selectedRoomDetails = [...this.rooms, ...this.temporaryRooms].find(
         (room) => room.id === this.selectedRoom
       );
-      this.$emit('submit-room', {
+      if (!selectedRoomDetails) {
+        return;
+      }
+
+      let roomData;
+      if (selectedRoomDetails.isTemporary) {
+        roomData = {
           ...selectedRoomDetails,
-        id: selectedRoomDetails.isTemporary ? 12 : selectedRoomDetails.id,
+          space: 18,
-        use_space: !selectedRoomDetails.isTemporary,
+          asset_bundle: selectedRoomDetails.id,
-      });
+          use_space: false,
+        };
+      } else {
+        if (!selectedRoomDetails.assetBundleRoomId) {
+          return;
+        }
+        roomData = {
+          ...selectedRoomDetails,
+          space: selectedRoomDetails.id,
+          asset_bundle: selectedRoomDetails.assetBundleRoomId,
+          use_space: true,
+        };
+      }
+
+      this.$emit('submit-room', roomData);
       this.selectedRoom = null;
     },
   },
 };
 </script>
 
-
 <style scoped>
 .modal-overlay {
   position: fixed;

xroom-dashboard/src/pages/dashboard/Download.vue

@@ -1,7 +1,6 @@
 <template>
         <div>
             <!-- Top Header -->
-            <AppHeader pageTitle="دانلود  ها" />
 
             <!-- Description -->
             <div class="section-description">
@@ -74,127 +73,109 @@ export default {
 
 <style scoped>
 
-/*   .dashboard-page {
+/* Base styles applied across all screen sizes */
-    margin-right: 360px;
-    padding: 20px;
-    direction: rtl;
-    font-family: IRANSansXFaNum, sans-serif;
-  }
-  .content {
-    background-color: #f8f9fa;
-    border-radius: 20px;
-    padding: 35px 80px;
-    display: flex;
-    flex-direction: column;
-    gap: 32px;
-  }
- */
 .section-title {
-    font-size: 20px;
+  font-weight: 700;
-    font-weight: 600;
+  color: #101010;
-    color: #2d3748;
+  font-size: 19px;
-    margin-top: 20px;
+  line-height: 26.6px;
-    margin-bottom: 10px;
 }
 
 .section-description {
-    margin-bottom: 3rem;
+  margin: 1rem 0 3rem;
-    margin-top: 1rem;
   font-size: 20px;
   font-weight: 600;
   color: #2d3748;
-  margin: 1rem 0 3rem;
 }
 
 .section-description p {
   line-height: 190%;
-    color: #4F5A69;
+  color: #4f5a69;
-    font-size: 16px;
+  font-size: 15px;
   margin-top: 1rem;
+  font-weight: 500;
+  text-align: justify;
 }
 
-  .chose-device {
+.chose-device {
-    margin-top: 2rem;
+  margin: 1.5rem 0;
-    margin-bottom: 2rem;
+}
-  }
 
-  .cards {
+.cards {
   display: flex;
-    justify-content: right;
+  flex-direction: column;
   align-items: center;
-    margin-top: 2.5rem;
+  margin-top: 1.5rem;
-  }
+  gap: 1rem;
-
-  .card-border {
-  background: linear-gradient(to right, #001940, #4364F7);
-  padding: 2px 1px;
-  border-radius: 20px;
-  width: 287px;
-  height: 442px;
-  margin-left: 2.5rem;
 }
 
+
+
 .platform-card {
   position: relative;
-  width: 287px;
+  width: 100%;
-  height: 442px;
+  max-width: 300px;
+  height: auto;
+  min-height: 320px;
   border-radius: 20px;
   background: white;
-  z-index: 0;
   overflow: hidden;
-  margin-left: 2.5rem;
+  margin: 0;
+  isolation: isolate;
 }
 
 .platform-card::before {
   content: "";
   position: absolute;
   inset: 0;
-  padding: 2.5px;
+  padding: 2px;
   border-radius: 20px;
-  background: linear-gradient(to right, #001940, #4364F7);
+  background: linear-gradient(to right, #001940, #4364f7);
-  -webkit-mask:
+  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-    linear-gradient(#000 0 0) content-box,
-    linear-gradient(#000 0 0);
   -webkit-mask-composite: xor;
   mask-composite: exclude;
   z-index: -1;
 }
 
-
+.card-objects {
-  .card-objects {
   text-align: center;
-    padding: 2.5rem 0px;
+  padding: 1.5rem 0;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: space-between;
   height: 100%;
-  }
+  min-height: 320px;
-  .card-title {
+  gap: 1rem;
-    font-size: 24px;
+}
-    font-weight: 500;
-  }
 
-  .card-subtitle {
+.card-title {
-    font-size: 17px;
+  font-size: 20px;
   font-weight: 500;
-    color : #718096;
+}
-    max-width: 220px;
+
-  }
+.card-subtitle {
+  font-size: 15px;
+  font-weight: 500;
+  color: #718096;
+  max-width: 80%;
+  line-height: 190%;
+}
 
 .active-button {
   position: relative;
-  width: 207px;
+  width: 80%;
+  max-width: 207px;
   height: 46px;
   border-radius: 8px;
   background: white;
-  z-index: 0;
-  overflow: hidden;
   color: black;
-  font-size: 17px;
+  font-size: 15px;
   font-weight: 500;
-  padding-top: 5%;
+  display: flex;
-  transition: background 0.8s ease, color 0.6s ease-in-out;
+  align-items: center;
+  justify-content: center;
+  transition: background 0.8s ease, color 0.3s ease-in-out;
 }
 
 .active-button::before {
@@ -203,35 +184,162 @@ export default {
   inset: 0;
   padding: 1px;
   border-radius: 8px;
-  background: linear-gradient(to right, #001940, #4364F7);
+  background: linear-gradient(to right, #001940, #4364f7);
-  -webkit-mask:
+  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-    linear-gradient(#000 0 0) content-box,
-    linear-gradient(#000 0 0);
   -webkit-mask-composite: xor;
   mask-composite: exclude;
-  z-index: -1;
+  z-index: 0;
 }
 
 .active-button:hover {
-  background: linear-gradient(to right, #001940, #4364F7);
   color: #fff;
+  background: linear-gradient(to right, #001940, #4364f7);
 }
 
 .disabled-button {
-    width: 207px;
+  width: 80%;
+  max-width: 207px;
   height: 46px;
   color: #111;
-    background-color: #E6E6E6;
+  background-color: #e6e6e6;
   border-radius: 8px;
-    font-size: 17px;
+  font-size: 15px;
   font-weight: 500;
-    padding-top: 5%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .instructions-text {
-    font-size: 15px;
+  font-size: 14px;
   font-weight: 600;
-    color: #4F5A69;
+  color: #4f5a69;
+  display: block;
+  text-align: center;
+  margin-top: 1.5rem;
+}
+
+/* Media Query for Tablets (600px < width ≤ 1024px) */
+@media (min-width: 600px) and (max-width: 1024px) {
+  .section-description {
+    font-size: 20px;
+    margin-bottom: 3rem;
+  }
+
+  .section-description p {
+    font-size: 16px;
+  }
+
+  .cards {
+    flex-direction: row;
+    justify-content: center;
+    gap: 2rem;
+  }
+
+  .platform-card {
+    width: 287px;
+    height: 442px;
+    min-height: auto;
+  }
+
+  .platform-card::before {
+    padding: 2.5px;
+  }
+
+  .card-title {
+    font-size: 24px;
+  }
+
+  .card-subtitle {
+    font-size: 17px;
+    max-width: 220px;
+  }
+
+  .active-button,
+  .disabled-button {
+    font-size: 17px;
+  }
+
+  .instructions-text {
+    font-size: 15px;
+  }
+}
+
+/* Media Query for Small Desktops (1024px <س width ≤ 1280px) */
+@media (min-width: 1024px) and (max-width: 1280px) {
+  .section-title {
+    font-size: 20px;
+    font-weight: 600;
+    color: #101010;
+    margin: 20px 0 10px;
+  }
+
+  .cards {
+    flex-direction: row;
+    justify-content: center;
+    gap: 2rem;
+  }
+
+  .platform-card {
+    width: 287px;
+    height: 442px;
+    margin-left: 0;
+  }
+
+  .platform-card::before {
+    padding: 2.5px;
+  }
+
+  .card-title {
+    font-size: 24px;
+  }
+
+  .card-subtitle {
+    font-size: 17px;
+    max-width: 220px;
+  }
+
+  .active-button,
+  .disabled-button {
+    font-size: 17px;
+  }
+}
+
+/* Media Query for Large Desktops (width > 1280px) */
+@media (min-width: 1280px) {
+  .section-title {
+    font-size: 21px;
+  }
+  
+  .cards {
+    flex-direction: row;
+    justify-content: flex-start;
+    gap: 2rem;
+  }
+
+  .platform-card {
+    width: 287px;
+    height: 442px;
+    margin-left: 0;
+  }
+
+  .platform-card::before {
+    padding: 2.5px;
+  }
+
+  .card-title {
+    font-size: 24px;
+  }
+
+  .card-subtitle {
+    font-size: 17px;
+    max-width: 220px;
+  }
+
+  .active-button,
+  .disabled-button {
+    font-size: 17px;
+  }
 }
 
 </style>

xroom-dashboard/src/pages/dashboard/Meeting.vue

@@ -107,6 +107,7 @@
             </div>
           </div>
           <swiper
+          ref="swiper"
           :slides-per-view="1.4"
           :space-between="10"
           :loop="true"
@@ -178,6 +179,7 @@
   </div>
 </template>
 
+
 <script>
 import CreateMeetingModal from '@/components/CreateMeetingModal.vue';
 import { Swiper, SwiperSlide } from 'swiper/vue';
@@ -192,7 +194,7 @@ export default {
   components: {
     Swiper,
     SwiperSlide,
-    CreateMeetingModal
+    CreateMeetingModal,
   },
   data() {
     return {
@@ -200,49 +202,74 @@ export default {
       activeFilter: 'future',
       showModal: false,
       modules: [Pagination],
-      meetings: [
+      meetings: [],
-        {
-          id: 1,
-          title: 'Interview room',
-          date: '2025-05-25T10:00:00',
-          image: require('@/assets/img/img.jpg'),
-          type: 'فضا تیم',
-          maxCapacity: 33,
-        },
-        {
-          id: 2,
-          title: 'جلسه بررسی پیشرفت',
-          date: '2025-05-18T14:00:00',
-          image: require('@/assets/img/img.jpg'),
-          type: 'مدیریتی',
-          maxCapacity: 8,
-        },
-        {
-          id: 3,
-          title: 'جلسه تیم فنی',
-          date: '2025-06-01T09:00:00',
-          image: require('@/assets/img/img.jpg'),
-          type: 'فنی',
-          maxCapacity: 12,
-        },
-        {
-          id: 4,
-          title: 'جلسه تیم طرای',
-          date: '2025-06-01T09:00:00',
-          image: require('@/assets/img/img.jpg'),
-          type: 'طراحی',
-          maxCapacity: 24,
-        },
-      ],
       filteredMeetings: [],
     };
   },
   created() {
-    this.filterMeetings();
+    this.fetchMeetings();
   },
   methods: {
+    refreshSwiper() {
+      if (this.$refs.swiper && this.$refs.swiper.swiper) {
+        this.$refs.swiper.swiper.update();
+      }
+    },
+    async fetchMeetings() {
+      try {
+        let token = localStorage.getItem('token');
+        if (!token) throw new Error('توکن احراز هویت پیدا نشد');
+
+        const config = {
+          headers: {
+            'Content-Type': 'application/json',
+            Authorization: `Token ${token.trim()}`,
+          },
+        };
+
+        const response = await axios.get(`${API_BASE_URL}/get_user_meetings`, config).catch(async (error) => {
+          if (error.response?.status === 403) {
+            token = await this.refreshToken();
+            return axios.get(`${API_BASE_URL}/get_user_meetings`, {
+              headers: { ...config.headers, Authorization: `Token ${token.trim()}` },
+            });
+          }
+          throw error;
+        });
+
+        this.meetings = response.data.meetings.map((meeting) => {
+          const isSpaceUsed = meeting.use_space;
+          const imagePath = isSpaceUsed
+            ? meeting.space_data?.assetBundleRoomId?.img
+            : meeting.asset_bundle_data?.img;
+
+          return {
+            id: meeting.id,
+            title: meeting.name,
+            date: meeting.date_time,
+            image: imagePath
+              ? imagePath.startsWith('http')
+                ? imagePath
+                : `${API_BASE_URL}${imagePath}`
+              : 'https://via.placeholder.com/150',
+            type: isSpaceUsed
+              ? meeting.space_data?.name || 'جلسه'
+              : meeting.asset_bundle_data?.name || 'جلسه',
+            maxCapacity: isSpaceUsed
+              ? meeting.space_data?.capacity || 10
+              : meeting.asset_bundle_data?.maxPerson || 10,
+          };
+        });
+
+        this.filterMeetings();
+        this.refreshSwiper();
+      } catch (error) {
+        alert(`خطایی در دریافت جلسات رخ داد: ${error.response?.data?.message || error.message}`);
+      }
+    },
     filterMeetings() {
       let filtered = this.meetings;
+
       if (this.searchQuery) {
         filtered = filtered.filter((meeting) =>
           [meeting.title, meeting.type].some((field) =>
@@ -250,9 +277,11 @@ export default {
           )
         );
       }
+
       if (this.activeFilter === 'future') {
         filtered = filtered.filter((meeting) => new Date(meeting.date) > new Date());
       }
+
       this.filteredMeetings = filtered;
     },
     setFilter(filter) {
@@ -285,7 +314,7 @@ export default {
           },
         };
 
-        let response = await axios.post(`${API_BASE_URL}/add_meeting`, meetingData, config).catch(async (error) => {
+        await axios.post(`${API_BASE_URL}/add_meeting`, meetingData, config).catch(async (error) => {
           if (error.response?.status === 403) {
             token = await this.refreshToken();
             return axios.post(`${API_BASE_URL}/add_meeting`, meetingData, {
@@ -295,17 +324,8 @@ export default {
           throw error;
         });
 
-        const newMeeting = {
+        await new Promise((resolve) => setTimeout(resolve, 500));
-          id: response.data.meeting.id,
+        await this.fetchMeetings();
-          title: response.data.meeting.name,
-          date: response.data.meeting.date_time,
-          image: 'https://via.placeholder.com/150',
-          type: 'جلسه',
-          maxCapacity: 10,
-        };
-
-        this.meetings.push(newMeeting);
-        this.filterMeetings();
         this.showModal = false;
         alert('جلسه با موفقیت ایجاد شد!');
       } catch (error) {
@@ -354,18 +374,28 @@ export default {
   background-color: #ffffff;
 }
 
+
 .search-wrapper {
   margin-top: 1rem;
-  padding: 1px;
+  position: relative;
-  padding-left: 0.7px;
+  display: inline-block;
-  padding-top: 1.4px;
+  width: 100%;
+}
+
+.search-wrapper::before {
+  content: '';
+  position: absolute;
+  top: -1px;
+  left: -1px;
+  right: -1px;
+  bottom: -1px;
   border-radius: 10px;
   background: linear-gradient(to right, #001940, #4364f7);
-  position: relative;
+  z-index: 0;
 }
 
 .search-input {
-  width: 99.9%;
+  width: 100%;
   height: 43px;
   padding: 10px;
   border: none;
@@ -374,7 +404,13 @@ export default {
   box-sizing: border-box;
   background-color: white;
   display: block;
-  margin: 0 auto;
+  position: relative;
+  z-index: 1;
+}
+
+.search-button {
+  position: relative;
+  z-index: 1; /* Ensures the button stays above the pseudo-element */
 }
 
 .search-input::placeholder {
@@ -490,6 +526,7 @@ export default {
 
 .meeting-image {
   border-radius: 10px;
+  object-fit: cover;
 }
 
 .swiper-meetings-list {