diff --git a/xroom-dashboard/src/assets/img/Icon6.svg b/xroom-dashboard/src/assets/img/Icon6.svg
new file mode 100644
index 0000000..c8cd22c
--- /dev/null
+++ 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>
\ No newline at end of file
diff --git a/xroom-dashboard/src/components/AddUserModal.vue b/xroom-dashboard/src/components/AddUserModal.vue
index 2bcdda0..7265253 100644
--- 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: '',
diff --git a/xroom-dashboard/src/components/CreateMeetingModal.vue b/xroom-dashboard/src/components/CreateMeetingModal.vue
index 0d7ab24..201e373 100644
--- 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;
     },
diff --git a/xroom-dashboard/src/components/CreateSpaceModal.vue b/xroom-dashboard/src/components/CreateSpaceModal.vue
index cc6fdf1..5a8af6b 100644
--- 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 = '';
       }
     },
   },
diff --git a/xroom-dashboard/src/components/EditBillingModal.vue b/xroom-dashboard/src/components/EditBillingModal.vue
index 9172096..8a214f4 100644
--- 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);  */
diff --git a/xroom-dashboard/src/components/FilePreviewDialog.vue b/xroom-dashboard/src/components/FilePreviewDialog.vue
new file mode 100644
index 0000000..3a21446
--- /dev/null
+++ 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>
\ No newline at end of file
diff --git a/xroom-dashboard/src/components/NewFileDialog.vue b/xroom-dashboard/src/components/NewFileDialog.vue
new file mode 100644
index 0000000..c5a3056
--- /dev/null
+++ 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>
\ No newline at end of file
diff --git a/xroom-dashboard/src/components/RoomSelectionModal.vue b/xroom-dashboard/src/components/RoomSelectionModal.vue
index 6ead44e..8dd157e 100644
--- 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>
diff --git a/xroom-dashboard/src/components/SidebarMenu.vue b/xroom-dashboard/src/components/SidebarMenu.vue
index 2cc3732..04b29b7 100644
--- 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>
diff --git a/xroom-dashboard/src/components/TutorialShowModal.vue b/xroom-dashboard/src/components/TutorialShowModal.vue
index 7aefc01..5dc0ee3 100644
--- 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>
 
diff --git a/xroom-dashboard/src/pages/dashboard/Download.vue b/xroom-dashboard/src/pages/dashboard/Download.vue
index eb6c325..5fad6b4 100644
--- 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;
diff --git a/xroom-dashboard/src/pages/dashboard/Meeting.vue b/xroom-dashboard/src/pages/dashboard/Meeting.vue
index f98e2e2..40da37a 100644
--- 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;
diff --git a/xroom-dashboard/src/pages/dashboard/Spaces.vue b/xroom-dashboard/src/pages/dashboard/Spaces.vue
index 6ce69a4..93d12f8 100644
--- 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 {
diff --git a/xroom-dashboard/src/pages/dashboard/files.vue b/xroom-dashboard/src/pages/dashboard/files.vue
index 7542ceb..52b21a0 100644
--- a/xroom-dashboard/src/pages/dashboard/files.vue
+++ b/xroom-dashboard/src/pages/dashboard/files.vue
@@ -1,479 +1,315 @@
 <template>
   <SidebarMenu />
-  
   <div class="dashboard-page">
     <div class="content">
       <!-- Top Header -->
-      <AppHeader pageTitle="فایل ها" />
+      <AppHeader pageTitle="فایل‌ها" />
 
-
-       
       <!-- Description -->
       <div class="section-description">
-        <div class="section-title">مدیریت فایل ها</div>
+        <div class="section-title">مدیریت فایل‌ها</div>
         <p>
-          فایل های خود مانند مدل های سه بعدی، تصاویر و اسناد PDF را برای استفاده در VR آماده کنید. یا یادداشت ها و تصاویر ایجاد شده در برنامه XRoom را دانلود کنید.
+          فایل‌های خود مانند مدل‌های سه‌بعدی، تصاویر و اسناد PDF را برای استفاده در VR آماده کنید. یا یادداشت‌ها و تصاویر ایجاد شده در برنامه XRoom را دانلود کنید.
         </p>
       </div>
 
       <!-- File Manager Layout -->
       <div class="file-manager-layout">
-
-          <!-- Sidebar -->
-        <!-- <div class="file-sidebar">
-          <button class="primary-button" @click="openDialog('image')">
-            افزودن تصویر
-            <img src="https://c.animaapp.com/m9nvumalUMfQbN/img/frame-2.svg" class="btn-icon" />
-          </button>
-          
-          <button class="primary-button" @click="openDialog('pdf')">
-            افزودن PDF
-            <img src="https://c.animaapp.com/m9nvumalUMfQbN/img/frame-2.svg" class="btn-icon" />
-          </button>
-          
-          <button class="primary-button" @click="openDialog('video')">
-            افزودن ویدیو
-            <img src="https://c.animaapp.com/m9nvumalUMfQbN/img/frame-2.svg" class="btn-icon" />
-          </button>
-          
-          <button class="primary-button" @click="openDialog('glb')">
-            افزودن مدل 3D
-            <img src="https://c.animaapp.com/m9nvumalUMfQbN/img/frame-2.svg" class="btn-icon" />
-          </button>
-
+        <div class="file-sidebar">
           <div class="filter-buttons">
-            <button class="filter-btn">فایل های اخیر</button>
-            <button class="filter-btn">دانلودهای اخیر</button>
-            <button class="filter-btn">فایل های شخصی</button>
-            <button class="filter-btn">نشانه دار شده</button>
+            <button class="new-file" @click="openDialog('image')">
+              فایل جدید
+              <span>
+                <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 16 16" fill="none">
+                  <g clip-path="url(#clip0_312_7133)">
+                    <path d="M2.66602 11.3333V12.6666C2.66602 13.0202 2.80649 13.3593 3.05654 13.6094C3.30659 13.8594 3.64573 13.9999 3.99935 13.9999H11.9993C12.353 13.9999 12.6921 13.8594 12.9422 13.6094C13.1922 13.3593 13.3327 13.0202 13.3327 12.6666V11.3333" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+                    <path d="M4.66602 6.00008L7.99935 2.66675L11.3327 6.00008" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+                    <path d="M8 2.66675V10.6667" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+                  </g>
+                  <defs>
+                    <clipPath id="clip0_312_7133">
+                      <rect width="16" height="16" fill="white"></rect>
+                    </clipPath>
+                  </defs>
+                </svg>
+              </span>
+            </button>
+
+            <button
+              v-for="(filter, index) in filters"
+              :key="'filter-' + index"
+              :class="[
+                'filter-btn',
+                { 'active-btn': activeFilter === filter.id },
+                { 'disable-btn': activeFilter !== filter.id },
+                { 'recent-filter-border': filter.id === 'recent-files' }
+              ]"
+              @click="setActiveFilter(filter.id)"
+            >
+              <span v-html="filter.icon" :class="['filter-icon', { 'active-icon': activeFilter === filter.id, 'disable-icon': activeFilter !== filter.id }]">
+              </span>
+              {{ filter.label }}
+            </button>
           </div>
-        </div> -->
+        </div>
 
-        
         <!-- Cards Grid -->
-         <!-- Cards Grid -->
-  <div class="file-grid">
-    <!-- Images Section -->
-    <div class="section-title">تصاویر</div>
-    <div class="file-card" @click="openDialog('image')">
-      <div class="file-card-info">
-        <img src="https://c.animaapp.com/m9nvumalUMfQbN/img/frame-2.svg" class="file-image" style="background: #3a57e8; border-radius: 20px;" />
-        <div class="file-title">تصویر جدید</div>
-        <div class="file-meta">
-          <span class="file-date">برای افزودن کلیک کنید</span>
-        </div>
-      </div>
-    </div>
-    <div class="file-card" v-for="(image, index) in userData.images" :key="'image-' + index" 
-    
-    @click="openPreviewDialog('image', index, getFullImageUrl(image.image))"
-    >
-      <img :src="getFullImageUrl(image.image)" class="file-image" />
-      <div class="file-card-info">
-        <div class="file-title">{{ image.name }}</div>
-        <div class="file-meta">
-          <img src="https://c.animaapp.com/m9nvumalUMfQbN/img/frame-1.svg" class="meta-icon" />
-          <span class="file-date">{{ formatDate(image.created_at) }}</span>
+        <div class="file-grid">
+          <div v-for="section in filteredFileSections" :key="section.type" class="file-section">
+            <div class="section-title">{{ section.title }}</div>
+            <div v-if="filteredFiles(section.type).length > 0" style="display: flex; align-items: center;gap: 1.5rem 0.9rem; flex-wrap: wrap;">
+              <div
+                class="file-card"
+                v-for="(file, index) in filteredFiles(section.type)"
+                :key="`${section.type}-${index}`"
+                @click="openPreviewDialog(section.type, index, getFullFileUrl(file[section.type]), file.id)"
+              >
+                <img :src="getFilePreviewImage(section.type, file)" class="file-image" />
+                <div class="file-card-info">
+                  <div class="file-title">{{ file.name }}</div>
+                  <div class="file-meta">
+                    <span>
+                        <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" 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="#101010" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+                          <path d="M2.5 2.5V6.66667H6.66667" stroke="#101010" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+                          <path d="M10 5.83325V9.99992L13.3333 11.6666" stroke="#101010" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+                        </svg>
+                    </span>
+                    <span class="file-date">{{ formatDate(file.created_at) }}</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div v-else class="no-files-message">
+              <button class="new-file" @click="openDialog(section.type)">
+                فایلی وجود ندارد , برای آپلود فایل جدید کلیک کنید
+                <span>
+                  <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 16 16" fill="none">
+                    <g clip-path="url(#clip0_312_7133)">
+                      <path d="M2.66602 11.3333V12.6666C2.66602 13.0202 2.80649 13.3593 3.05654 13.6094C3.30659 13.8594 3.64573 13.9999 3.99935 13.9999H11.9993C12.353 13.9999 12.6921 13.8594 12.9422 13.6094C13.1922 13.3593 13.3327 13.0202 13.3327 12.6666V11.3333" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+                      <path d="M4.66602 6.00008L7.99935 2.66675L11.3327 6.00008" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+                      <path d="M8 2.66675V10.6667" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
+                    </g>
+                    <defs>
+                      <clipPath id="clip0_312_7133">
+                        <rect width="16" height="16" fill="white"></rect>
+                      </clipPath>
+                    </defs>
+                  </svg>
+                </span>
+              </button>
+            </div>
+          </div>
+          <div v-if="filteredFileSections.length === 0 || (activeFilter === 'recent-files' && !hasRecentFiles)" class="no-files-message">
+            فایلی وجود ندارد
+            <button v-if="activeFilter !== 'recent-files'" class="upload-btn" @click="openDialog(getFilterType(activeFilter))">
+              آپلود فایل
+            </button>
+          </div>
         </div>
       </div>
     </div>
 
-    <!-- PDFs Section -->
-    <div class="section-title">فایل های PDF</div>
-    <div class="file-card" @click="openDialog('pdf')">
-      <div class="file-card-info">
-        <img src="https://c.animaapp.com/m9nvumalUMfQbN/img/frame-2.svg" class="file-image" style="background: #3a57e8; border-radius: 20px;" />
-        <div class="file-title">PDF جدید</div>
-        <div class="file-meta">
-          <span class="file-date">برای افزودن کلیک کنید</span>
-        </div>
-      </div>
-    </div>
-    <div class="file-card" v-for="(pdf, index) in userData.pdfs" :key="'pdf-' + index"     
-     @click="openPreviewDialog('pdf', index, getFullImageUrl(pdf.pdf))"
-      >
-      <img src="https://cdn-icons-png.flaticon.com/512/337/337946.png" class="file-image" />
-      <div class="file-card-info">
-        <div class="file-title">{{ pdf.name }}</div>
-        <div class="file-meta">
-          <img src="https://c.animaapp.com/m9nvumalUMfQbN/img/frame-1.svg" class="meta-icon" />
-          <span class="file-date">{{ formatDate(pdf.created_at) }}</span>
-        </div>
-      </div>
-    </div>
+    <!-- New File Dialog Component -->
+    <NewFileDialog
+      :is-open="isNewFileDialogOpen"
+      :initial-upload-type="currentUploadType"
+      :base-url="baseUrl"
+      @close="closeDialog"
+      @upload-success="fetchUserData"
+    />
 
-    <!-- Videos Section -->
-    <div class="section-title">ویدیوها</div>
-    <div class="file-card" @click="openDialog('video')">
-      <div class="file-card-info">
-        <img src="https://c.animaapp.com/m9nvumalUMfQbN/img/frame-2.svg" class="file-image" style="background: #3a57e8; border-radius: 20px;" />
-        <div class="file-title">ویدیو جدید</div>
-        <div class="file-meta">
-          <span class="file-date">برای افزودن کلیک کنید</span>
-        </div>
-      </div>
-    </div>
-    <div class="file-card" v-for="(video, index) in userData.videos" :key="'video-' + index"
-    @click="openPreviewDialog('video', index, getFullImageUrl(video.video))"
-
-    >
-      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTfQ1L9b8tFaGXBQxOdCCaq-AcYkmawPtRVZA&s"    />
-      <div class="file-card-info">
-        <div class="file-title">{{ video.name }}</div>
-        <div class="file-meta">
-          <img src="https://c.animaapp.com/m9nvumalUMfQbN/img/frame-1.svg" class="meta-icon" />
-          <span class="file-date">{{ formatDate(video.created_at) }}</span>
-        </div>
-      </div>
-    </div>
-
-    <!-- GLBs Section -->
-    <div class="section-title">مدل های 3D</div>
-    <div class="file-card" @click="openDialog('glb')">
-      <div class="file-card-info">
-        <img src="https://c.animaapp.com/m9nvumalUMfQbN/img/frame-2.svg" class="file-image" style="background: #3a57e8; border-radius: 20px;" />
-        <div class="file-title">مدل 3D جدید</div>
-        <div class="file-meta">
-          <span class="file-date">برای افزودن کلیک کنید</span>
-        </div>
-      </div>
-    </div>
-    <div class="file-card" v-for="(glb, index) in userData.glbs" :key="'glb-' + index"
-    @click="openPreviewDialog('glb', index, getFullImageUrl(glb.glb))"
-    >
-      <img :src="require('@/assets/img/3d icon.jpg')" />
-       
-      <div class="file-card-info">
-        <div class="file-title">{{ glb.name }}</div>
-        <div class="file-meta">
-          <img src="https://c.animaapp.com/m9nvumalUMfQbN/img/frame-1.svg" class="meta-icon" />
-          <span class="file-date">{{ formatDate(glb.created_at) }}</span>
-        </div>
-      </div>
-    </div>
-  </div>
-      </div>
-    </div>
-
-    <!-- New File Dialog -->
-    <dialog ref="newFileDialog" class="new-file-dialog">
-      <div class="dialog-content">
-        <h3>{{ dialogTitle }}</h3>
-        
-        <div class="form-group">
-          <label for="fileName">نام فایل</label>
-          <input 
-            type="text" 
-            id="fileName" 
-            v-model="newFileName" 
-            placeholder="نام فایل را وارد کنید"
-          />
-        </div>
-        
-        <div class="form-group">
-          <label for="fileUpload">انتخاب فایل</label>
-          <input 
-            type="file" 
-            id="fileUpload" 
-            ref="fileInput"
-            @change="handleFileChange"
-            :accept="fileAccept"
-          />
-        </div>
-        
-        <div class="dialog-actions">
-          <button class="cancel-btn" @click="closeDialog">انصراف</button>
-          <button class="submit-btn" @click="uploadFile" :disabled="!selectedFile || uploading">
-            {{ uploading ? 'در حال آپلود...' : 'آپلود فایل' }}
-          </button>
-        </div>
-      </div>
-    </dialog>
-
-
-   
-    
-
-    <!-- Preview Dialog -->
-<!-- Preview Dialog -->
-
- 
-<dialog ref="filePreviewDialog" class="file-preview-dialog" :data-type="currentPreviewType"
- @click="handleBackdropClick"
->
-  <div class="preview-content" @click.stop>
-    <button class="close-preview" @click="closePreviewDialog">×</button>
-    
-    <!-- Image Preview -->
-    <img :src="previewUrl" class="preview-file" v-if="currentPreviewType === 'image'" />
-    
-    <!-- PDF Preview -->
-    <div class="pdf-preview-container" v-if="currentPreviewType === 'pdf'">
-      <vue-pdf-embed 
-        :source="previewUrl" 
-        class="pdf-preview"
-        v-if="previewUrl" />
-    </div>
-    
-     <!-- Video Player -->
-     <div v-if="currentPreviewType === 'video'" class="video-preview-container">
-      <VideoPlayer 
-    v-if="currentPreviewType === 'video'"
-    :options="videoOptions"
-    class="video-player"
-  />
-    </div>
-    
-    <!-- 3D Model Preview -->
-    <div class="model-preview-container" v-if="currentPreviewType === '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 class="preview-actions">
-      <button class="download-btn" @click="downloadFile">دانلود</button>
-      <button class="delete-btn" @click="deleteFile" v-if="currentPreviewIndex !== null">حذف</button>
-    </div>
-  </div>
-</dialog>
-
-     
+    <!-- File Preview Dialog Component -->
+    <FilePreviewDialog
+      :is-open="isPreviewDialogOpen"
+      :preview-url="previewUrl"
+      :preview-type="currentPreviewType"
+      :preview-index="currentPreviewIndex"
+      :base-url="baseUrl"
+      :video-options="videoOptions"
+      @close="closePreviewDialog"
+      @delete-success="fetchUserData"
+    />
   </div>
 </template>
 
 <script>
-import VuePdfEmbed from 'vue-pdf-embed'
-import 'video.js/dist/video-js.css';
-import '@videojs/themes/dist/sea/index.css';
-import '@google/model-viewer'
-import SidebarMenu from '@/components/SidebarMenu.vue'
+import '@google/model-viewer';
+import SidebarMenu from '@/components/SidebarMenu.vue';
 import axios from 'axios';
-
- 
-import { VideoPlayer } from '@videojs-player/vue';
-import 'video.js/dist/video-js.css';
 import AppHeader from '@/components/Header.vue';
+import NewFileDialog from '@/components/NewFileDialog.vue';
+import FilePreviewDialog from '@/components/FilePreviewDialog.vue';
 
 export default {
   name: 'DashboardPage',
   components: {
     SidebarMenu,
-    VuePdfEmbed,  
-    VideoPlayer,
     AppHeader,
-
+    NewFileDialog,
+    FilePreviewDialog,
   },
   data() {
     return {
-      // ... existing data ...
-      previewUrl: '',
-    currentPreviewIndex: null,
-    currentPreviewType: null,
-    videoOptions: {
-        autoplay: false,
-        controls: true,
-        sources: [{
-          type: 'video/mp4',
-          src: '' // Will be set dynamically
-        }]
-      },
-    
       userData: {
         customer: {},
         user: {
           first_name: '',
-          last_name: ''
+          last_name: '',
         },
         images: [],
         pdfs: [],
         videos: [],
-        glbs: []
+        glbs: [],
       },
-      newFileName: '',
-      selectedFile: null,
-      uploading: false,
       baseUrl: 'http://194.62.43.230:8000',
+      isNewFileDialogOpen: false,
       currentUploadType: 'image',
-      dialogTitle: 'آپلود فایل جدید',
-      fileAccept: '*/*'
-    }
+      isPreviewDialogOpen: false,
+      previewUrl: '',
+      currentPreviewType: null,
+      currentPreviewIndex: null,
+      videoOptions: {
+        autoplay: false,
+        controls: true,
+        sources: [{ type: 'video/mp4', src: '' }],
+      },
+      activeFilter: 'all-files',
+      filters: [
+        {
+          id: 'recent-files',
+          label: 'فایل‌های اخیر',
+          icon: `<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>`,
+        },
+        {
+          id: 'all-files',
+          label: 'همه فایل‌ها',
+          icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none">
+            <path d="M2.5 3.33333V16.6667C2.5 17.1087 2.67559 17.5326 2.98816 17.8452C3.30072 18.1577 3.72464 18.3333 4.16667 18.3333H15.8333C16.2754 18.3333 16.6993 18.1577 17.0118 17.8452C17.3244 17.5326 17.5 16.6667V3.33333C17.5 2.8913 17.3244 2.46738 17.0118 2.15482C16.6993 1.84226 16.2754 1.66667 15.8333 1.66667H4.16667C3.72464 1.66667 3.30072 1.84226 2.98816 2.15482C2.67559 2.46738 2.5 2.8913 2.5 3.33333Z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+            <path d="M12.5 2.5V6.66667C12.5 7.1087 12.6756 7.53262 12.9882 7.84518C13.3007 8.15774 13.7246 8.33333 14.1667 8.33333H17.5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>`,
+        },
+        {
+          id: 'images',
+          label: 'تصاویر',
+          icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none">
+            <path d="M2.5 3.33333V16.6667C2.5 17.1087 2.67559 17.5326 2.98816 17.8452C3.30072 18.1577 3.72464 18.3333 4.16667 18.3333H15.8333C16.2754 18.3333 16.6993 18.1577 17.0118 17.8452C17.3244 17.5326 17.5 16.6667V3.33333C17.5 2.8913 17.3244 2.46738 17.0118 2.15482C16.6993 1.84226 16.2754 1.66667 15.8333 1.66667H4.16667C3.72464 1.66667 3.30072 1.84226 2.98816 2.15482C2.67559 2.46738 2.5 2.8913 2.5 3.33333Z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+            <path d="M6.66667 8.33333C7.58714 8.33333 8.33333 7.58714 8.33333 6.66667C8.33333 5.74619 7.58714 5 6.66667 5C5.74619 5 5 5.74619 5 6.66667C5 7.58714 5.74619 8.33333 6.66667 8.33333Z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+            <path d="M17.5 12.5L13.3333 8.33333L5 16.6667" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>`,
+        },
+        {
+          id: 'pdfs',
+          label: 'PDF‌ها',
+          icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none">
+            <path d="M12.5 2.5H4.16667C3.72464 2.5 3.30072 2.67559 2.98816 2.98816C2.67559 3.30072 2.5 3.72464 2.5 4.16667V16.6667C2.5 17.1087 2.67559 17.5326 2.98816 17.8452C3.30072 18.1577 3.72464 18.3333 4.16667 18.3333H15.8333C16.2754 18.3333 16.6993 18.1577 17.0118 17.8452C17.3244 17.5326 17.5 17.1087 17.5 16.6667V6.66667L12.5 2.5Z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+            <path d="M12.5 2.5V6.66667C12.5 7.1087 12.6756 7.53262 12.9882 7.84518C13.3007 8.15774 13.7246 8.33333 14.1667 8.33333H17.5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>`,
+        },
+        {
+          id: 'videos',
+          label: 'ویدیوها',
+          icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none">
+            <path d="M2.5 3.33333V16.6667C2.5 17.1087 2.67559 17.5326 2.98816 17.8452C3.30072 18.1577 3.72464 18.3333 4.16667 18.3333H15.8333C16.2754 18.3333 16.6993 18.1577 17.0118 17.8452C17.3244 17.5326 17.5 17.1087 17.5 16.6667V3.33333C17.5 2.8913 17.3244 2.46738 17.0118 2.15482C16.6993 1.84226 16.2754 1.66667 15.8333 1.66667H4.16667C3.72464 1.66667 3.30072 1.84226 2.98816 2.15482C2.67559 2.46738 2.5 2.8913 2.5 3.33333Z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+            <path d="M7.5 5.83333L13.3333 10L7.5 14.1667V5.83333Z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>`,
+        },
+        {
+          id: 'glbs',
+          label: 'مدل‌های 3D',
+          icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none">
+            <path d="M10 2.5C7.23858 2.5 4.58333 3.31667 2.5 4.78333V16.6667C4.58333 15.3167 7.23858 14.5 10 14.5C12.7614 14.5 15.4167 15.3167 17.5 16.6667V4.78333C15.4167 3.31667 12.7614 2.5 10 2.5Z" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+            <path d="M10 2.5V14.5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>`,
+        },
+      ],
+      fileSections: [
+        { type: 'image', title: 'مدیریت تصاویر' },
+        { type: 'pdf', title: 'مدیریت PDF‌ها' },
+        { type: 'video', title: 'مدیریت ویدیوها' },
+        { type: 'glb', title: 'مدیریت مدل‌های 3D' },
+      ],
+    };
+  },
+  computed: {
+    filteredFileSections() {
+      if (this.activeFilter === 'all-files' || this.activeFilter === 'recent-files') {
+        return this.fileSections;
+      }
+      const filterTypeMap = {
+        images: 'image',
+        pdfs: 'pdf',
+        videos: 'video',
+        glbs: 'glb',
+      };
+      const filterType = filterTypeMap[this.activeFilter];
+      return filterType ? this.fileSections.filter(section => section.type === filterType) : [];
+    },
+    hasRecentFiles() {
+      const sevenDaysAgo = new Date();
+      sevenDaysAgo.setDate(sevenDaysAgo.getDate() - 7);
+      return ['images', 'pdfs', 'videos', 'glbs'].some(type => 
+        this.userData[type].some(file => new Date(file.created_at) >= sevenDaysAgo)
+      );
+    },
   },
   created() {
     this.fetchUserData();
   },
   methods: {
-    handleBackdropClick(event) {
-    // Check if click was directly on the dialog element (backdrop)
-    if (event.target === this.$refs.filePreviewDialog) {
-      this.closePreviewDialog();
-    }
-  },
-    openPreviewDialog(type, index, url) {
-      if (type === 'video') {
-        this.videoOptions.sources[0].src = url;
-        this.$nextTick(() => {
-          this.$refs.filePreviewDialog?.showModal();
-        });
-      }
-      if (!this.$refs.filePreviewDialog) {
-      console.error('Dialog element not found');
-      return;
-    }
-    
-    this.currentPreviewType = type;
-    this.currentPreviewIndex = index;
-    this.previewUrl = url;
-    // Special handling for video
-     
-    this.currentPreviewType = type;
-    this.currentPreviewIndex = index;
-    
-    if (type === 'video') {
-      this.videoOptions.sources[0].src = url;
-      this.videoOptions.poster = this.getVideoThumbnail();
-      this.previewUrl = url;
-    } else {
-      this.previewUrl = url;
-    }
-    
-    this.$nextTick(() => {
-      this.$refs.filePreviewDialog?.showModal();
-    });
+    setActiveFilter(filterId) {
+      this.activeFilter = filterId;
+    },
+    getFilterType(filterId) {
+      const filterTypeMap = {
+        images: 'image',
+        pdfs: 'pdf',
+        videos: 'video',
+        glbs: 'glb',
+      };
+      return filterTypeMap[filterId] || 'image';
+    },
+    filteredFiles(type) {
+      const files = this.userData[`${type}s`];
+      if (!files) return [];
 
-    if (type === 'image') {
-      this.previewImageUrl = url;
-      this.previewPdfUrl = '';
-    } else if (type === 'pdf') {
-      this.previewPdfUrl = url;
-      this.previewImageUrl = '';
-    }
-    
-    // this.$refs.imagePreviewDialog.showModal();
-    this.$refs.filePreviewDialog.showModal();
-
-  },
-  getVideoThumbnail(videoUrl) {
-    // You can implement a proper thumbnail generation here
-    // For now, we'll just return a placeholder
-    videoUrl = 'https://cdn-icons-png.flaticon.com/512/2839/2839038.png'
-    return videoUrl;
-  },
-  closePreviewDialog() {
-    // Safely access the dialog reference
-    const dialog = this.$refs.filePreviewDialog;
-    
-    if (dialog && typeof dialog.close === 'function') {
-      dialog.close();
-    } else {
-      console.warn('Dialog reference not found or close method unavailable');
-    }
-    
-    // Reset preview state
-    this.previewUrl = '';
-    this.currentPreviewIndex = null;
-    this.currentPreviewType = null;
-  },
-  async downloadFile() {
-    const url = this.currentPreviewType === 'image' 
-      ? this.previewImageUrl 
-      : this.previewPdfUrl;
-    
-    if (!url) return;
-    
-    try {
-      const response = await fetch(url);
-      const blob = await response.blob();
-      const downloadUrl = window.URL.createObjectURL(blob);
-      const a = document.createElement('a');
-      a.href = downloadUrl;
-      
-      // Set appropriate filename
-      if (this.currentPreviewType === 'image') {
-        a.download = `image-${new Date().getTime()}.${url.split('.').pop()}`;
-      } else if (this.currentPreviewType === 'pdf') {
-        a.download = `document-${new Date().getTime()}.pdf`;
+      if (this.activeFilter === 'recent-files') {
+        const sevenDaysAgo = new Date();
+        sevenDaysAgo.setDate(sevenDaysAgo.getDate() - 7);
+        return files.filter(file => new Date(file.created_at) >= sevenDaysAgo);
       }
-      
-      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.currentPreviewIndex === null || !this.currentPreviewType) return;
-    
-    try {
-      const token = localStorage.getItem('token');
-      let deleteUrl = '';
-      let itemId = '';
-      let fileArray = [];
-      
-      switch(this.currentPreviewType) {
+
+      const filterTypeMap = {
+        images: 'image',
+        pdfs: 'pdf',
+        videos: 'video',
+        glbs: 'glb',
+      };
+      if (this.activeFilter !== 'all-files' && filterTypeMap[this.activeFilter] !== type) {
+        return [];
+      }
+
+      return files;
+    },
+    getFilePreviewImage(type, file) {
+      switch (type) {
         case 'image':
-          fileArray = this.userData.images;
-          itemId = fileArray[this.currentPreviewIndex].id;
-          deleteUrl = `${this.baseUrl}/deleteImage/${itemId}/`;
-          break;
+          return this.getFullFileUrl(file.image);
         case 'pdf':
-          fileArray = this.userData.pdfs;
-          itemId = fileArray[this.currentPreviewIndex].id;
-          deleteUrl = `${this.baseUrl}/deletePdf/${itemId}/`;
-          break;
+          return 'https://cdn-icons-png.flaticon.com/512/337/337946.png';
         case 'video':
-          fileArray = this.userData.videos;
-          itemId = fileArray[this.currentPreviewIndex].id;
-          deleteUrl = `${this.baseUrl}/deleteVideo/${itemId}/`;
-          break;
+          return 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTfQ1L9b8tFaGXBQxOdCCaq-AcYkmawPtRVZA&s';
         case 'glb':
-          fileArray = this.userData.glbs;
-          itemId = fileArray[this.currentPreviewIndex].id;
-          deleteUrl = `${this.baseUrl}/deleteGlb/${itemId}/`;
-          break;
-      }
-      
-      await axios.delete(deleteUrl, {
-        headers: {
-          'Authorization': `Token ${token}`
-        }
-      });
-      
-      this.closePreviewDialog();
-      await this.fetchUserData();
-      alert('فایل با موفقیت حذف شد');
-    } catch (error) {
-      console.error('Error deleting file:', error);
-      alert('خطا در حذف فایل');
-    }
-  },
-    async fetchUserData() {
-      try {
-        const token = localStorage.getItem('token');
-        
-        let response = await axios.get(`${this.baseUrl}/getInfo`, {
-          headers: {
-            'Authorization': `Token ${token}`
-          }
-        });
-        response = response.data;
-        this.userData = response.data;
-      } catch (error) {
-        console.error('Error fetching user data:', error);
+          return require('@/assets/img/3d icon.jpg');
+        default:
+          return '';
       }
     },
-    getFullImageUrl(relativePath) {
+    getFullFileUrl(relativePath) {
       if (!relativePath) return '';
       return `${this.baseUrl}${relativePath}`;
     },
@@ -482,649 +318,250 @@ export default {
       const date = new Date(dateString);
       return date.toLocaleDateString('fa-IR');
     },
-    openDialog(type) {
+    openDialog(type = 'image') {
       this.currentUploadType = type;
-      
-      switch(type) {
-        case 'image':
-          this.dialogTitle = 'آپلود تصویر جدید';
-          this.fileAccept = 'image/*';
-          break;
-        case 'pdf':
-          this.dialogTitle = 'آپلود فایل PDF';
-          this.fileAccept = '.pdf';
-          break;
-        case 'video':
-          this.dialogTitle = 'آپلود ویدیو';
-          this.fileAccept = 'video/*';
-          break;
-        case 'glb':
-          this.dialogTitle = 'آپلود مدل 3D';
-          this.fileAccept = '.glb';
-          break;
-      }
-      
-      this.$refs.newFileDialog.showModal();
+      this.isNewFileDialogOpen = true;
     },
     closeDialog() {
-      this.newFileName = '';
-      this.selectedFile = null;
-      this.$refs.newFileDialog.close();
+      this.isNewFileDialogOpen = false;
     },
-    handleFileChange(event) {
-      this.selectedFile = event.target.files[0];
+    openPreviewDialog(type, index, url, id) {
+      this.currentPreviewType = type;
+      this.currentPreviewIndex = id; // Use file.id instead of index
+      this.previewUrl = url;
+
+      if (type === 'video') {
+        this.videoOptions.sources[0].src = url;
+      }
+
+      this.isPreviewDialogOpen = true;
     },
-    async uploadFile() {
-      if (!this.selectedFile) return;
-      
-      this.uploading = true;
-      
-      const formData = new FormData();
-      // formData.append('file', this.selectedFile);
-      formData.append('name', this.newFileName || this.selectedFile.name);
-      
-
-
-         
-        switch(this.currentUploadType) {
-          case 'image':
-            formData.append('image', this.selectedFile);
-            break;
-          case 'pdf':
-            formData.append('pdf', this.selectedFile);
-            break;
-          case 'video':
-            formData.append('video', this.selectedFile);
-
-            break;
-          case 'glb':
-            formData.append('glb', this.selectedFile);
-
-            break;
-        }
-
-
+    closePreviewDialog() {
+      this.isPreviewDialogOpen = false;
+      this.previewUrl = '';
+      this.currentPreviewIndex = null;
+      this.currentPreviewType = null;
+    },
+    async fetchUserData() {
       try {
         const token = localStorage.getItem('token');
-        let uploadUrl = '';
-        
-        switch(this.currentUploadType) {
-          case 'image':
-            uploadUrl = `${this.baseUrl}/uploadImage/`;
-            break;
-          case 'pdf':
-            uploadUrl = `${this.baseUrl}/uploadPdf/`;
-            break;
-          case 'video':
-            uploadUrl = `${this.baseUrl}/uploadVideo/`;
-            break;
-          case 'glb':
-            uploadUrl = `${this.baseUrl}/uploadGlb/`;
-            break;
-        }
-        
-        await axios.post(uploadUrl, formData, {
+        const response = await axios.get(`${this.baseUrl}/getInfo`, {
           headers: {
             'Authorization': `Token ${token}`,
-            'Content-Type': 'multipart/form-data'
-          }
+          },
         });
-        
-        this.closeDialog();
-        // Refresh the data after successful upload
-        await this.fetchUserData();
-        
-        // Show success message
-        alert('فایل با موفقیت آپلود شد');
+        this.userData = response.data.data;
       } catch (error) {
-        console.error('Error uploading file:', error);
-        alert('خطا در آپلود فایل');
-      } finally {
-        this.uploading = false;
+        console.error('Error fetching user data:', error);
       }
-    }
-  }
-}
+    },
+  },
+};
 </script>
 
- 
-<!-- Your existing styles remain the same -->
-  
-  <style scoped>
 
-.section-title {
-  font-size: 16px;
-  font-weight: 600;
-  color: #2d3748;
-  margin-top: 20px;
-  margin-bottom: 10px;
-  grid-column: 1 / -1;
-}
-
-/* Update the file-sidebar to accommodate more buttons */
-.file-sidebar {
-  width: 180px;
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-}
-  .dashboard-page {
-    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;
-  }
-  
-  .header-row {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
-  
-  .right-actions {
-    display: flex;
-    gap: 10px;
-  }
-  
-  .subscription-button {
-    background-color: #48bb78;
-    color: white;
-    font-size: 14px;
-    padding: 8px 16px;
-    border-radius: 8px;
-    border: none;
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    cursor: pointer;
-  }
-  
-  .button-icon {
-    width: 20px;
-    height: 20px;
-  }
-  
-  .user-info {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-  }
-  
-  .user-name {
-    font-size: 14px;
-    font-weight: 500;
-    color: #2d3748;
-  }
-  
-  .avatar-box {
-    width: 40px;
-    height: 40px;
-    border: 1px solid #e2e8f0;
-    border-radius: 8px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background: white;
-  }
-  
-  .avatar-icon {
-    width: 20px;
-    height: 20px;
-  }
-  
-  .page-title {
-    font-size: 18px;
-    font-weight: 600;
-    color: #2d3748;
-  }
-  
-  .section-description {
-    display: flex;
-    flex-direction: column;
-    gap: 6px;
-  }
-  
-  .section-title {
-    font-size: 17px;
-    font-weight: 700;
-    color: #1a202c;
-  }
-  
-  .section-description p {
-    font-size: 14px;
-    color: #4a5568;
-    line-height: 1.8;
-  }
-  
-  .file-manager-layout {
-    display: flex;
-    gap: 32px;
-    justify-content: space-between;
-    align-items: flex-start;
-    flex-wrap: wrap;
-  }
-  
-  .file-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
-    gap: 24px;
-    flex: 1;
-    min-width: 0;
-  }
-  
-  .file-card {
-    background-color: white;
-    border: 1px solid #e2e8f0;
-    border-radius: 16px;
-    overflow: hidden;
-    display: flex;
-    flex-direction: column;
-    cursor: pointer;
-    transition: 0.2s ease;
-  }
-  
-  .file-card:hover {
-    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07);
-  }
-  
-  .file-image {
-    width: 100%;
-    height: 140px;
-    object-fit: cover;
-  }
-  
-  .file-card-info {
-    padding: 12px;
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-  }
-  
-  .file-title {
-    font-size: 14px;
-    font-weight: 600;
-    color: #1a202c;
-    text-align: center;
-  }
-  
-  .file-meta {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    gap: 6px;
-    font-size: 12px;
-    color: #718096;
-  }
-  
-  .meta-icon {
-    width: 16px;
-    height: 16px;
-  }
-  
-  .file-sidebar {
-    width: 180px;
-    display: flex;
-    flex-direction: column;
-    gap: 16px;
-  }
-  
-  .primary-button {
-    background-color: #3a57e8;
-    color: white;
-    font-size: 14px;
-    padding: 12px;
-    border-radius: 10px;
-    border: none;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    cursor: pointer;
-    transition: 0.2s;
-  }
-  
-  .primary-button:hover {
-    background-color: #2e45c8;
-  }
-  
-  .btn-icon {
-    width: 16px;
-    height: 16px;
-  }
-  
-  .filter-buttons {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-  }
-  
-  .filter-btn {
-    background-color: white;
-    color: #1a202c;
-    font-size: 13px;
-    border: 1px solid #e2e8f0;
-    border-radius: 8px;
-    padding: 10px;
-    text-align: center;
-    cursor: pointer;
-    transition: background-color 0.2s;
-  }
-  
-  .filter-btn:hover {
-    background-color: #edf2f7;
-  }
-  
-  .footer {
-    margin-top: 40px;
-    text-align: center;
-  }
-  
-  .text-wrapper-13 {
-    font-size: 13px;
-    color: white;
-    font-weight: 500;
-  }
-  
-  .logo {
-    margin-top: 15px;
-  }
-  
-  .clip-path-group {
-    height: 40px;
-    width: 150px;
-  }
-
-
-
-
-
-
-
-
-  .new-file-dialog {
-  border: none;
-  border-radius: 16px;
-  padding: 0;
-  width: 90%;
-  max-width: 500px;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
-}
-
-.new-file-dialog::backdrop {
-  background-color: rgba(0, 0, 0, 0.5);
-}
-
-.dialog-content {
-  padding: 24px;
-}
-
-.dialog-content h3 {
-  margin: 0 0 20px;
-  font-size: 18px;
-  color: #1a202c;
+<style scoped>
+.no-files-message {
   text-align: center;
-}
-
-.form-group {
-  margin-bottom: 20px;
-}
-
-.form-group label {
-  display: block;
-  margin-bottom: 8px;
-  font-size: 14px;
-  color: #4a5568;
-}
-
-.form-group input[type="text"],
-.form-group input[type="file"] {
-  width: 100%;
-  padding: 10px;
-  border: 1px solid #e2e8f0;
-  border-radius: 8px;
-  font-family: inherit;
-}
-
-.dialog-actions {
-  display: flex;
-  justify-content: space-between;
-  margin-top: 30px;
-}
-
-.cancel-btn {
-  background-color: #e2e8f0;
-  color: #4a5568;
-  border: none;
-  padding: 10px 20px;
-  border-radius: 8px;
-  cursor: pointer;
-}
-
-.submit-btn {
-  background-color: #3a57e8;
-  color: white;
-  border: none;
-  padding: 10px 20px;
-  border-radius: 8px;
-  cursor: pointer;
-}
-
-.submit-btn:disabled {
-  background-color: #a0aec0;
-  cursor: not-allowed;
-}
-
-.image-preview-dialog {
-  border: none;
-  border-radius: 12px;
-  padding: 0;
-  max-width: 70%;
-  max-height: 80%;
-  width: auto;
-  height: auto;
-}
-
-.preview-content {
-  position: relative;
-  padding: 20px;
+  color: #888;
+  font-size: 1.2rem;
+  margin-top: 1rem;
   display: flex;
   flex-direction: column;
   align-items: center;
+  gap: 1rem;
 }
 
-.close-preview {
-  position: absolute;
-  top: 10px;
-  right: 10px;
-  background: none;
-  border: none;
-  font-size: 24px;
-  cursor: pointer;
-  color: #333;
-}
-
-.preview-image {
-  max-width: 100%;
-  max-height: 70vh;
-  margin-bottom: 20px;
-}
-
-.preview-actions {
-  display: flex;
-  gap: 10px;
-}
-
-.download-btn, .delete-btn {
-  padding: 8px 16px;
-  border-radius: 6px;
-  border: none;
-  cursor: pointer;
-  font-weight: 500;
-}
-
-.download-btn {
-  background-color: #3a57e8;
+.upload-btn {
+  background-color: #007bff;
   color: white;
-}
-
-.delete-btn {
-  background-color: #ff4d4f;
-  color: white;
-}
-
-
-
-
-/* pdf preview */
-.pdf-preview-container {
-  width: 100%;
-  max-width: 800px;
-  height: 70vh;
-  overflow: auto;
-  margin-bottom: 20px;
-  border: 1px solid #ddd;
-}
-
-.pdf-preview {
-  width: 100%;
-  height: 100%;
-}
-
-/* Adjust dialog size for PDFs */
-.image-preview-dialog[data-type="pdf"] {
-  width: 80%;
-  height: 80%;
-}
-/* pdf preview */
-
-
-
-/* Base dialog styles */
-.file-preview-dialog {
   border: none;
-  border-radius: 12px;
-  padding: 0;
-  max-width: 90%;
-  max-height: 90%;
-  width: auto;
-  height: auto;
+  padding: 0.5rem 1rem;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 1rem;
 }
 
-.preview-content {
-  position: relative;
+.upload-btn:hover {
+  background-color: #0056b3;
+}
+
+.recent-filter-border {
+  padding-bottom: 1.5rem;
+  border-bottom: 1px solid #E2DEE9 !important;
+}
+</style>
+
+  
+<style scoped>
+  
+/* General Typography */
+.section-title {
+    font-size: 20px;
+    font-weight: 600;
+    color: #2d3748;
+    margin-bottom: 1.5rem;
+}
+
+.file-section {
+  margin-bottom: 3rem;
+}
+
+.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;
+}
+
+/* Layout and Containers */
+.dashboard-page {
+  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;
-  align-items: center;
+  gap: 32px;
 }
 
-.close-preview {
-  position: absolute;
-  top: 10px;
-  right: 10px;
+.file-manager-layout {
+  display: flex;
+  max-width: 100%;
+  gap: 5rem;
+}
+
+.file-sidebar {
+    background-color: #FFFFFF;
+    border-radius: 12px;
+    padding: 2.5rem 2rem;
+    width: 25%;
+    height: max-content;
+}
+
+.filter-buttons {
+  display: flex;
+  flex-direction: column;
+  gap: 1.8rem;
+}
+
+.new-file {
+    background: #3A57E8;
+    padding: 8px 24px;
+    border: none;
+    border-radius: 10px;
+    color: #fff;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    font-size: 18px;
+    justify-content: center;
+    cursor: pointer;
+}
+
+.active-btn {
   background: none;
   border: none;
-  font-size: 24px;
-  cursor: pointer;
-  color: #333;
-}
-
-/* Image preview */
-.preview-file[data-type="image"] {
-  max-width: 100%;
-  max-height: 70vh;
-  margin-bottom: 20px;
-}
-
-/* PDF preview */
-.pdf-preview-container {
-  width: 100%;
-  max-width: 800px;
-  height: 70vh;
-  overflow: auto;
-  margin-bottom: 20px;
-  border: 1px solid #ddd;
-}
-
-.pdf-preview {
-  width: 100%;
-  height: 100%;
-}
-
-/* Video preview */
-.video-preview-container {
-  width: 100%;
-  max-width: 800px;
-  margin-bottom: 20px;
-}
-
-.video-preview {
-  width: 100%;
-  max-height: 70vh;
-}
-
-/* 3D Model preview */
-.model-preview-container {
-  width: 100%;
-  height: 70vh;
-  max-width: 800px;
-  margin-bottom: 20px;
-}
-
-.model-preview {
-  width: 100%;
-  height: 100%;
-}
-
-/* Action buttons */
-.preview-actions {
+  color: #3A57E8;
   display: flex;
+  align-items: center;
+  gap: 10px;
+  font-size: 18px;
+  justify-content: flex-start;
+  cursor: pointer;
+}
+
+.active-icon {
+  height: 22px !important;
+  width: 22px !important;
+  stroke: #3A57E8 !important;
+}
+
+.disable-btn {
+  background: none;
+  border: none;
+  color: #5A6678;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-size: 18px;
+  justify-content: flex-start;
+  cursor: pointer;
+}
+
+.disable-icon {
+  height: 22px !important;
+  width: 22px !important;
+  stroke: #5A6678 !important;
+}
+
+.file-grid {
+  width: 71%;
+}
+
+.file-card {
+  display: flex;
+  flex-direction: column;
+  max-width: 32%;
+  width: 100%;
+  padding : 7px 7px 16px 7px;
+  border-radius: 16px;
+  border: 1px solid #B8C0CB;
+  background-color: #fff;
+  cursor: pointer;
+}
+
+.file-card img {
+  height: 190px;
+  width: 100%;
+  border-radius: 15px;
+  object-fit: cover;
+}
+
+.file-card-info {
+  margin-top: 1.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+.file-title {
+  color: #444D5A;
+  font-size: 21px;
+  font-weight: 600;
+}
+
+.file-meta {
+  display: flex;
+  align-items: center;
   gap: 10px;
 }
 
-.download-btn, .delete-btn {
-  padding: 8px 16px;
-  border-radius: 6px;
-  border: none;
-  cursor: pointer;
-  font-weight: 500;
+
+.file-meta svg {
+  height: 22px;
+  width: 22px;
+  stroke: #101010;
 }
 
-.download-btn {
-  background-color: #3a57e8;
-  color: white;
+.file-date {
+  color: #7F8DA1;
+  font-size: 17px;
+
 }
-
-.delete-btn {
-  background-color: #ff4d4f;
-  color: white;
-}
-
-
-
-
-
-
-
-
-.dialog-content {
-  /* Prevent margin collapse that could interfere with click detection */
-  display: inline-block;
-  /* Rest of your existing dialog content styles */
-}
-
-.file-preview-dialog::backdrop {
-  /* Makes the backdrop clickable */
-  background: rgba(0, 0, 0, 0.5);
-  cursor: pointer;
-}
-  </style>
-  
\ No newline at end of file
+</style>
\ No newline at end of file
diff --git a/xroom-dashboard/src/pages/dashboard/team.vue b/xroom-dashboard/src/pages/dashboard/team.vue
index 679e010..6d6007f 100644
--- 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>
\ No newline at end of file