fix files page

2025-07-02 00:04:35 +00:00 · 2025-05-30 19:11:53 +03:30 · 2025-05-30 19:11:53 +03:30 · b8985e7f96
commit b8985e7f96
parent 90bbff45cf
15 changed files with 1373 additions and 1069 deletions
--- a/xroom-dashboard/src/assets/img/Icon6.svg
+++ b/xroom-dashboard/src/assets/img/Icon6.svg
@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none">
+<path d="M2.5 10C2.5 11.4834 2.93987 12.9334 3.76398 14.1668C4.58809 15.4001 5.75943 16.3614 7.12987 16.9291C8.50032 17.4968 10.0083 17.6453 11.4632 17.3559C12.918 17.0665 14.2544 16.3522 15.3033 15.3033C16.3522 14.2544 17.0665 12.918 17.3559 11.4632C17.6453 10.0083 17.4968 8.50032 16.9291 7.12987C16.3614 5.75943 15.4001 4.58809 14.1668 3.76398C12.9334 2.93987 11.4834 2.5 10 2.5C7.90329 2.50789 5.89081 3.32602 4.38333 4.78333L2.5 6.66667" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M2.5 2.5V6.66667H6.66667" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M10 5.83325V9.99992L13.3333 11.6666" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
--- a/xroom-dashboard/src/components/AddUserModal.vue
+++ b/xroom-dashboard/src/components/AddUserModal.vue
@ -122,7 +122,22 @@ export default {
      },
    };
  },
+  watch: {
+    isVisible(newVal) {
+      if (newVal) {
+        // غیرفعال کردن اسکرول هنگام باز شدن پاپ‌آپ
+        document.body.style.overflow = 'hidden';
+      } else {
+        // فعال کردن اسکرول هنگام بسته شدن پاپ‌آپ
+        document.body.style.overflow = '';
+      }
+    },
+  },
  methods: {
+      beforeDestroy() {
+    // اطمینان از فعال شدن اسکرول هنگام حذف کامپوننت
+    document.body.style.overflow = '';
+  },
    close() {
      this.newUser = {
        first_name: '',
--- a/xroom-dashboard/src/components/CreateMeetingModal.vue
+++ b/xroom-dashboard/src/components/CreateMeetingModal.vue
@ -418,8 +418,30 @@ export default {
      const customer = JSON.parse(localStorage.getItem('customer') || '{}');
      return customer.profile_img || this.defaultProfileIcon;
    },
+  },
+    watch: {
+    // نظارت بر باز و بسته شدن پاپ‌آپ اصلی
+    isOpen(newVal) {
+      if (newVal) {
+        document.body.style.overflow = 'hidden';
+      } else if (!this.isRoomSelectionOpen) {
+        document.body.style.overflow = '';
+      }
+    },
+    // نظارت بر باز و بسته شدن پاپ‌آپ انتخاب اتاق
+    isRoomSelectionOpen(newVal) {
+      if (newVal) {
+        document.body.style.overflow = 'hidden';
+      } else if (!this.isOpen) {
+        document.body.style.overflow = '';
+      }
+    },
  },
  methods: {
+      beforeDestroy() {
+    // اطمینان از فعال شدن اسکرول هنگام حذف کامپوننت
+    document.body.style.overflow = '';
+  },
    openRoomSelection() {
      this.isRoomSelectionOpen = true;
    },
--- a/xroom-dashboard/src/components/CreateSpaceModal.vue
+++ b/xroom-dashboard/src/components/CreateSpaceModal.vue
@ -109,6 +109,10 @@ export default {
    };
  },
  methods: {
+      beforeDestroy() {
+    // اطمینان از فعال شدن اسکرول هنگام حذف کامپوننت
+    document.body.style.overflow = '';
+  },
    closeModal() {
      this.$emit('close');
      this.resetForm()
@ -196,7 +200,12 @@ export default {
  watch: {
    isVisible(newVal) {
      if (newVal) {
+        // غیرفعال کردن اسکرول هنگام باز شدن پاپ‌آپ
+        document.body.style.overflow = 'hidden';
        this.fetchSpaces();
+      } else {
+        // فعال کردن اسکرول هنگام بسته شدن پاپ‌آپ
+        document.body.style.overflow = '';
      }
    },
  },
--- a/xroom-dashboard/src/components/EditBillingModal.vue
+++ b/xroom-dashboard/src/components/EditBillingModal.vue
@ -132,7 +132,22 @@ export default {
      },
    };
  },
+  watch: {
+    isVisible(newVal) {
+      if (newVal) {
+        // غیرفعال کردن اسکرول هنگام باز شدن پاپ‌آپ
+        document.body.style.overflow = 'hidden';
+      } else {
+        // فعال کردن اسکرول هنگام بسته شدن پاپ‌آپ
+        document.body.style.overflow = '';
+      }
+    },
+  },
  methods: {
+    beforeDestroy() {
+    // اطمینان از فعال شدن اسکرول هنگام حذف کامپوننت
+    document.body.style.overflow = '';
+    },
    handleSubmit() {
      console.log('اطلاعات صورت حساب:', JSON.stringify(this.form, null, 2));
    /*  console.log('اطلاعات صورت حساب:', this.form);  */
--- a/xroom-dashboard/src/components/FilePreviewDialog.vue
+++ b/xroom-dashboard/src/components/FilePreviewDialog.vue
@ -0,0 +1,329 @@
+<template>
+  <div v-if="isOpen" class="modal-overlay" @click="handleBackdropClick">
+    <div class="modal-content" @click.stop>
+      <div class="modal-header">
+        <h2>پیش‌نمایش فایل</h2>
+        <button @click="closePreviewDialog">
+          <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="modal-title">
+        <h2>مشاهده فایل</h2>
+        <span>پیش‌نمایش فایل انتخاب‌شده را مشاهده کنید.</span>
+      </div>
+      <div class="preview-content">
+        <!-- Image Preview -->
+        <img :src="previewUrl" class="preview-file" v-if="previewType === 'image'" />
+
+        <!-- PDF Preview -->
+        <div class="pdf-preview-container" v-if="previewType === 'pdf'">
+          <vue-pdf-embed :source="previewUrl" class="pdf-preview" v-if="previewUrl" />
+        </div>
+
+        <!-- Video Player -->
+        <div v-if="previewType === 'video'" class="video-preview-container">
+          <VideoPlayer :options="videoOptions" class="video-player" />
+        </div>
+
+        <!-- 3D Model Preview -->
+        <div class="model-preview-container" v-if="previewType === 'glb'">
+          <model-viewer
+            :src="previewUrl"
+            alt="3D Model"
+            ar
+            ar-modes="webxr scene-viewer quick-look"
+            environment-image="neutral"
+            auto-rotate
+            camera-controls
+            class="model-preview"
+          ></model-viewer>
+        </div>
+      </div>
+      <div class="modal-actions">
+        <button class="close-btn" @click="closePreviewDialog">بستن</button>
+        <button class="delete-btn" @click="deleteFile" v-if="previewIndex !== null">حذف</button>
+        <button class="download-btn" @click="downloadFile">دانلود</button>
+  
+    </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import VuePdfEmbed from 'vue-pdf-embed';
+import { VideoPlayer } from '@videojs-player/vue';
+import axios from 'axios';
+
+export default {
+  name: 'FilePreviewDialog',
+  components: {
+    VuePdfEmbed,
+    VideoPlayer,
+  },
+  props: {
+    isOpen: {
+      type: Boolean,
+      default: false,
+    },
+    previewUrl: {
+      type: String,
+      default: '',
+    },
+    previewType: {
+      type: String,
+      default: null,
+    },
+    previewIndex: {
+      type: Number,
+      default: null,
+    },
+    baseUrl: {
+      type: String,
+      required: true,
+    },
+    videoOptions: {
+      type: Object,
+      default: () => ({
+        autoplay: false,
+        controls: true,
+        sources: [{ type: 'video/mp4', src: '' }],
+      }),
+    },
+  },
+  watch: {
+    isOpen(newVal) {
+      if (newVal) {
+        // غیرفعال کردن اسکرول صفحه پس‌زمینه
+        document.body.style.overflow = 'hidden';
+      } else {
+        // فعال کردن مجدد اسکرول
+        document.body.style.overflow = '';
+      }
+    },
+  },
+  methods: {
+      beforeDestroy() {
+    // اطمینان از فعال شدن اسکرول هنگام حذف کامپوننت
+    document.body.style.overflow = '';
+  },
+    handleBackdropClick(event) {
+      if (event.target.classList.contains('modal-overlay')) {
+        this.closePreviewDialog();
+      }
+    },
+    closePreviewDialog() {
+      this.$emit('close');
+    },
+    async downloadFile() {
+      try {
+        const response = await fetch(this.previewUrl);
+        const blob = await response.blob();
+        const downloadUrl = window.URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = downloadUrl;
+        a.download = `${this.previewType}-${new Date().getTime()}.${this.previewUrl.split('.').pop()}`;
+        document.body.appendChild(a);
+        a.click();
+        window.URL.revokeObjectURL(downloadUrl);
+        document.body.removeChild(a);
+      } catch (error) {
+        console.error('Error downloading file:', error);
+        alert('خطا در دانلود فایل');
+      }
+    },
+    async deleteFile() {
+      if (this.previewIndex === null || !this.previewType) return;
+
+      try {
+        const token = localStorage.getItem('token');
+        const deleteUrl = `${this.baseUrl}/delete${this.previewType.charAt(0).toUpperCase() + this.previewType.slice(1)}/${this.previewIndex}/`;
+
+        await axios.delete(deleteUrl, {
+          headers: {
+            'Authorization': `Token ${token}`,
+          },
+        });
+
+        this.$emit('delete-success');
+        this.closePreviewDialog();
+        alert('فایل با موفقیت حذف شد');
+      } catch (error) {
+        console.error('Error deleting file:', error);
+        alert('خطا در حذف فایل');
+      }
+    },
+  },
+};
+</script>
+
+<style scoped>
+.modal-overlay {
+  position: fixed;
+  inset: 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: 20px;
+  width: 100%;
+  max-width: 700px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  direction: rtl;
+  padding-bottom: 1.5rem;
+  max-height: 95vh;
+  height: max-content;
+  overflow-y: auto;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+.modal-content::-webkit-scrollbar {
+  display: none;
+}
+
+.modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background-color: #101010;
+  color: #fff;
+  padding: 20px 26px;
+  margin-bottom: 1.5rem;
+  border-radius: 20px 20px 0 0;
+}
+
+.modal-header h2 {
+  font-size: 22px;
+}
+
+.modal-header button {
+  background-color: inherit;
+  border: none;
+  cursor: pointer;
+}
+
+.modal-title {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  padding: 20px 50px 20px 20px;
+}
+
+.modal-title h2 {
+  font-size: 20px;
+  font-weight: 600;
+  color: #101010;
+}
+
+.modal-title span {
+  font-size: 16px;
+  font-weight: 500;
+  color: #4F5A69;
+  margin-top: 1rem;
+}
+
+.preview-content {
+  margin: 1rem auto 0;
+  padding: 20px;
+  background-color: #FFFFFF;
+  border-radius: 16px;
+  width: 100%;
+  max-width: 620px;
+  display: block;
+  border-radius: 12px;
+}
+
+.preview-content img {
+    border-radius: 12px;
+    object-fit: cover;
+}
+
+.preview-file {
+  width: 100%;
+  max-height: 400px;
+  object-fit: contain;
+}
+
+.pdf-preview-container,
+.video-preview-container,
+.model-preview-container {
+  width: 100%;
+  max-height: 400px;
+  overflow: auto;
+}
+
+.pdf-preview,
+.video-player,
+.model-preview {
+  width: 100%;
+  height: 100%;
+}
+
+.modal-actions {
+  display: flex;
+  justify-content: space-between;
+  padding: 20px 0 0;
+  width: 100%;
+  max-width: 620px;
+  margin: auto;
+  gap: 1rem;
+}
+
+.download-btn,
+.delete-btn,
+.close-btn {
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+  height: 50px;
+  width: 33%;
+  font-weight: 500;
+  font-size: 18px;
+  text-align: center;
+}
+
+.download-btn {
+  background-color: #3A57E8;
+  color: white;
+}
+
+.delete-btn {
+  background-color: #B31C51;
+  color: white;
+}
+
+.close-btn {
+  background-color: #EBEEFD;
+  color: #101010;
+}
+
+
+</style>
--- a/xroom-dashboard/src/components/NewFileDialog.vue
+++ b/xroom-dashboard/src/components/NewFileDialog.vue
@ -0,0 +1,420 @@
+<template>
+  <div v-if="isOpen" class="modal-overlay" @click="closeDialog">
+    <div class="modal-content" @click.stop>
+      <div class="modal-header">
+        <h2>{{ dialogTitle }}</h2>
+        <button @click="closeDialog">
+          <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="modal-title">
+        <h2>آپلود فایل جدید</h2>
+        <span>فایل خود را برای استفاده در پروژه انتخاب کنید.</span>
+      </div>
+      <div class="form-content">
+        <form @submit.prevent="uploadFile" autocomplete="off">
+          <div class="file-type-selector" style="text-align: start; margin: 1rem 0 3rem 0; display: flex; align-items: center; justify-content: space-between;">
+            <label for="fileType" style="margin-left: 10px;">نوع فایل :</label>
+            <select
+              id="fileType"
+              :value="currentUploadType"
+              @change="updateFileAccept($event)"
+              required
+            >
+              <option v-for="type in fileTypes" :key="type.value" :value="type.value">
+                {{ type.label }}
+              </option>
+            </select>
+          </div>
+          <div class="input-group">
+            <label for="fileName">نام فایل</label>
+            <input
+              id="fileName"
+              v-model="newFileName"
+              type="text"
+              placeholder="نام فایل را وارد کنید"
+            />
+          </div>
+        <div class="input-group">
+        <p>انتخاب فایل</p>
+        <div style="width: 67%;">
+            <label for="fileUpload" class="file-input-label">
+            <span v-if="selectedFile" class="file-name">{{ selectedFile.name }}</span>
+            <span v-else>برای انتخاب فایل کلیک کنید</span>
+            </label>
+            <input
+            id="fileUpload"
+            ref="fileInput"
+            type="file"
+            @change="handleFileChange"
+            :accept="fileAccept"
+            required
+            class="file-input"
+            />
+        </div>
+        </div>
+        </form>
+      </div>
+      <div class="modal-actions">
+        <button type="button" class="close-btn" @click="closeDialog">بازگشت</button>
+        <button type="submit" class="upload-btn" @click="uploadFile" :disabled="!selectedFile || uploading">
+          {{ uploading ? 'در حال آپلود...' : 'آپلود فایل' }}
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import axios from 'axios';
+
+export default {
+  name: 'NewFileDialog',
+  props: {
+    isOpen: {
+      type: Boolean,
+      default: false,
+    },
+    initialUploadType: {
+      type: String,
+      default: 'image',
+    },
+    baseUrl: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      newFileName: '',
+      selectedFile: null,
+      uploading: false,
+      currentUploadType: this.initialUploadType,
+      dialogTitle: 'آپلود تصویر جدید',
+      fileAccept: 'image/*',
+      fileTypes: [
+        { value: 'image', label: 'تصویر' },
+        { value: 'pdf', label: 'PDF' },
+        { value: 'video', label: 'ویدیو' },
+        { value: 'glb', label: 'مدل 3D' },
+      ],
+    };
+  },
+  watch: {
+    isOpen(newVal) {
+      if (newVal) {
+        this.resetForm();
+        // غیرفعال کردن اسکرول صفحه پس‌زمینه
+        document.body.style.overflow = 'hidden';
+      } else {
+        // فعال کردن مجدد اسکرول هنگام بسته شدن
+        document.body.style.overflow = '';
+        this.resetForm();
+      }
+    },
+    initialUploadType(newType) {
+      this.currentUploadType = newType;
+      this.updateFileAccept();
+      this.resetForm();
+    },
+  },
+  methods: {
+    beforeDestroy() {
+    // اطمینان از فعال شدن اسکرول هنگام حذف کامپوننت
+      document.body.style.overflow = '';
+    },
+    updateFileAccept(event) {
+      this.currentUploadType = event ? event.target.value : this.currentUploadType;
+      switch (this.currentUploadType) {
+        case 'image':
+          this.fileAccept = 'image/*';
+          this.dialogTitle = 'آپلود تصویر جدید';
+          break;
+        case 'pdf':
+          this.fileAccept = '.pdf';
+          this.dialogTitle = 'آپلود فایل PDF';
+          break;
+        case 'video':
+          this.fileAccept = 'video/*';
+          this.dialogTitle = 'آپلود ویدیو';
+          break;
+        case 'glb':
+          this.fileAccept = '.glb';
+          this.dialogTitle = 'آپلود مدل 3D';
+          break;
+      }
+    },
+    resetForm() {
+      this.newFileName = '';
+      this.selectedFile = null;
+      this.currentUploadType = this.initialUploadType;
+      this.updateFileAccept();
+      if (this.$refs.fileInput) {
+        this.$refs.fileInput.value = '';
+      }
+    },
+    closeDialog() {
+      this.resetForm();
+      this.$emit('close');
+    },
+    handleFileChange(event) {
+      this.selectedFile = event.target.files[0];
+    },
+    async uploadFile() {
+      if (!this.selectedFile) {
+        alert('لطفاً یک فایل انتخاب کنید.');
+        return;
+      }
+
+      this.uploading = true;
+      const formData = new FormData();
+      formData.append('name', this.newFileName || this.selectedFile.name);
+      formData.append(this.currentUploadType, this.selectedFile);
+
+      try {
+        const token = localStorage.getItem('token');
+        const uploadUrl = `${this.baseUrl}/upload${this.currentUploadType.charAt(0).toUpperCase() + this.currentUploadType.slice(1)}/`;
+
+        await axios.post(uploadUrl, formData, {
+          headers: {
+            'Authorization': `Token ${token}`,
+            'Content-Type': 'multipart/form-data',
+          },
+        });
+
+        this.resetForm();
+        this.$emit('upload-success');
+        this.$emit('close');
+        alert('فایل با موفقیت آپلود شد');
+      } catch (error) {
+        console.error('Error uploading file:', error);
+        alert('خطا در آپلود فایل');
+      } finally {
+        this.uploading = false;
+      }
+    },
+  },
+};
+</script>
+
+<style scoped>
+.modal-overlay {
+  position: fixed;
+  inset: 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: 20px;
+  width: 100%;
+  max-width: 700px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  direction: rtl;
+  padding-bottom: 1.5rem;
+  height: max-content;
+  overflow-y: auto;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+.modal-content::-webkit-scrollbar {
+  display: none;
+}
+
+.modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background-color: #101010;
+  color: #fff;
+  padding: 20px 26px;
+  margin-bottom: 1.5rem;
+  border-radius: 20px 20px 0 0;
+}
+
+.modal-header h2 {
+  font-size: 22px;
+}
+
+.modal-header button {
+  background-color: inherit;
+  border: none;
+  cursor: pointer;
+}
+
+.modal-title {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  padding: 20px 50px 20px 20px;
+}
+
+.modal-title h2 {
+  font-size: 20px;
+  font-weight: 600;
+  color: #101010;
+}
+
+.modal-title span {
+  font-size: 16px;
+  font-weight: 500;
+  color: #4F5A69;
+  margin-top: 1rem;
+}
+
+.form-content {
+  margin: 1rem auto 0;
+  padding: 20px;
+  background-color: #FFFFFF;
+  border-radius: 16px;
+  width: 100%;
+  max-width: 620px;
+  display: block;
+}
+
+.input-group {
+  margin-bottom: 3rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.input-group label {
+  font-weight: 500;
+  width: 50%;
+  font-size: 16px;
+}
+
+.input-group input {
+  width: 100%;
+  padding: 8px;
+  border: 1px solid #718096;
+  border-radius: 8px;
+  font-size: 1rem;
+}
+
+.input-group input:focus {
+  outline: none;
+}
+
+.input-group .file-input {
+  display: none;
+}
+
+.input-group .file-input-label {
+  width: 100%;
+  padding: 8px;
+  border: 1px solid #718096;
+  border-radius: 8px;
+  font-size: 15px;
+  text-align: start;
+  cursor: pointer;
+  background-color: #fff;
+  color: #798487;
+  height: 2.5rem;
+  line-height: normal;
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+}
+
+.input-group .file-input-label:hover {
+  background-color: #f0f0f0;
+}
+
+.input-group .file-name {
+  font-size: 15px;
+  color: #4F5A69;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.modal-actions {
+  display: flex;
+  justify-content: space-between;
+  padding: 20px 0 0;
+  width: 100%;
+  max-width: 620px;
+  margin: auto;
+}
+
+.upload-btn,
+.close-btn {
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+  height: 50px;
+  width: 47%;
+  font-weight: 500;
+  font-size: 18px;
+  text-align: center;
+}
+
+.upload-btn {
+  background-color: #3A57E8;
+  color: white;
+}
+
+.close-btn {
+  background-color: #EBEEFD;
+  color: #101010;
+}
+
+.file-type-selector {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  text-align: start;
+  margin: 1rem 0 3rem 0;
+}
+
+.file-type-selector label {
+  margin-left: 10px;
+  font-weight: 500;
+  font-size: 16px;
+}
+
+.file-type-selector select {
+  padding: 8px 8px;
+  border-radius: 8px;
+  border-left: 10px solid transparent !important;
+  box-shadow: #00000029 0px 1px 4px 0px;
+  border: none;
+  width: 67%;
+  height: 2.5rem;
+  font-size: 16px;
+}
+
+.file-type-selector select:focus {
+  outline: none;
+}
+</style>
--- a/xroom-dashboard/src/components/RoomSelectionModal.vue
+++ b/xroom-dashboard/src/components/RoomSelectionModal.vue
@ -1,5 +1,5 @@
 <template>
-  <div v-if="isOpen" class="modal-overlay">
+  <div v-if="isOpen" class="modal-overlay" @click="cancel">
    <div class="modal-content" @click.stop>
      <div class="popUp-header">
        <h2>اتاق‌های این جلسه را انتخاب کنید</h2>
--- a/xroom-dashboard/src/components/SidebarMenu.vue
+++ b/xroom-dashboard/src/components/SidebarMenu.vue
@ -59,7 +59,7 @@
        <div class="text-wrapper">فایل ها</div>
      </router-link>

-      <router-link to="/dashboard/teams" class="nav-button" :class="{ active: isActive('/team') }">
+      <router-link to="/dashboard/teams" class="nav-button" :class="{ active: isActive('/dashboard/teams') }">
        <img class="img" src="https://c.animaapp.com/m9nvumalUMfQbN/img/property-1-team.svg" />
        <div class="text-wrapper">تیم</div>
      </router-link>
--- a/xroom-dashboard/src/components/TutorialShowModal.vue
+++ b/xroom-dashboard/src/components/TutorialShowModal.vue
@ -144,11 +144,27 @@ export default {
      ],
    };
  },
+  watch: {
+    isOpen(newVal) {
+      if (newVal) {
+        // غیرفعال کردن اسکرول هنگام باز شدن پاپ‌آپ
+        document.body.style.overflow = 'hidden';
+      } else {
+        // فعال کردن اسکرول هنگام بسته شدن پاپ‌آپ
+        document.body.style.overflow = '';
+      }
+    },
+  },
  methods: {
    closeModal() {
      this.$emit('close');
    },
+    beforeDestroy() {
+    // اطمینان از فعال شدن اسکرول هنگام حذف کامپوننت
+    document.body.style.overflow = '';
  },
+  },
+  
 };
 </script>

--- a/xroom-dashboard/src/pages/dashboard/Download.vue
+++ b/xroom-dashboard/src/pages/dashboard/Download.vue
@ -98,17 +98,29 @@ export default {
    gap: 32px;
  }

-  .section-title {
-    font-size: 17px;
+.section-title {
+    font-size: 20px;
    font-weight: 600;
-  }
+    color: #2d3748;
+    margin-top: 20px;
+    margin-bottom: 10px;
+}

-  .title-description {
-    font-size: 15px;
-    font-weight: 500;
-    margin-top: 1.5rem;
+.section-description {
+    margin-bottom: 3rem;
+    margin-top: 1rem;
+    font-size: 20px;
+    font-weight: 600;
+    color: #2d3748;
+  margin: 1rem 0 3rem;
+}
+
+.section-description p {
+    line-height: 190%;
    color: #4F5A69;
-  }
+    font-size: 16px;
+    margin-top: 1rem;
+}

  .chose-device {
    margin-top: 2rem;
--- a/xroom-dashboard/src/pages/dashboard/Meeting.vue
+++ b/xroom-dashboard/src/pages/dashboard/Meeting.vue
@ -238,19 +238,29 @@ export default {
    }


-    .section-title {
-        font-size: 17px;
-        font-weight: 600;
-    }
+.section-title {
+    font-size: 20px;
+    font-weight: 600;
+    color: #2d3748;
+    margin-top: 20px;
+    margin-bottom: 10px;
+}

-    .title-description {
-        font-size: 15px;
-        font-weight: 500;
-        margin-top: 1.5rem;
-        color: #4F5A69;
-        line-height: 190%;
-        max-width: 80%;
-    }
+.section-description {
+    margin-bottom: 3rem;
+    margin-top: 1rem;
+    font-size: 20px;
+    font-weight: 600;
+    color: #2d3748;
+  margin: 1rem 0 3rem;
+}
+
+.section-description p {
+    line-height: 190%;
+    color: #4F5A69;
+    font-size: 16px;
+    margin-top: 1rem;
+}

    .meeting-section {
        margin-top: 1rem;
--- a/xroom-dashboard/src/pages/dashboard/Spaces.vue
+++ b/xroom-dashboard/src/pages/dashboard/Spaces.vue
@ -189,17 +189,28 @@ export default {
  flex-direction: column;
  gap: 32px;
 }
-
 .section-title {
-  font-size: 17px;
-  font-weight: 600;
+    font-size: 20px;
+    font-weight: 600;
+    color: #2d3748;
+    margin-top: 20px;
+    margin-bottom: 10px;
 }

-.title-description {
-  font-size: 15px;
-  font-weight: 500;
-  margin-top: 1.5rem;
-  color: #4F5A69;
+.section-description {
+    margin-bottom: 3rem;
+    margin-top: 1rem;
+    font-size: 20px;
+    font-weight: 600;
+    color: #2d3748;
+  margin: 1rem 0 3rem;
+}
+
+.section-description p {
+    line-height: 190%;
+    color: #4F5A69;
+    font-size: 16px;
+    margin-top: 1rem;
 }

 .filter-section {
--- a/xroom-dashboard/src/pages/dashboard/files.vue
+++ b/xroom-dashboard/src/pages/dashboard/files.vue
--- a/xroom-dashboard/src/pages/dashboard/team.vue
+++ b/xroom-dashboard/src/pages/dashboard/team.vue
@ -484,12 +484,27 @@ export default {
 <style scoped>

 .section-title {
-  font-size: 20px;
-  font-weight: 600;
-  color: #2d3748;
-  margin-top: 20px;
-  margin-bottom: 10px;
-  grid-column: 1 / -1;
+    font-size: 20px;
+    font-weight: 600;
+    color: #2d3748;
+    margin-top: 20px;
+    margin-bottom: 10px;
+}
+
+.section-description {
+    margin-bottom: 3rem;
+    margin-top: 1rem;
+    font-size: 20px;
+    font-weight: 600;
+    color: #2d3748;
+    margin: 1rem 0 3rem;
+}
+
+.section-description p {
+    line-height: 190%;
+    color: #4F5A69;
+    font-size: 16px;
+    margin-top: 1rem;
 }

 .dashboard-page {
@ -533,17 +548,5 @@ export default {
  font-size: 20px;
 }

-.section-description {
-  margin-bottom: 3rem;
-  margin-top: 1rem;
-}
-
-.section-description p {
-  line-height: 190%;
-  color: #4F5A69;
-  font-size: 16px;
-  margin-top: 2rem;
-}
-

 </style>