From 561d59a28f5fccd10ef4869650c1a7eb47b30da1 Mon Sep 17 00:00:00 2001
From: Diyar Akhgar <diyar.akhgar@gmail.com>
Date: Wed, 28 May 2025 17:36:19 +0330
Subject: [PATCH] fix buy subscription Tab /// add other tab in components

---
 .../src/components/AddUserModal.vue           |  154 +-
 .../src/components/BuySubscription.vue        |  281 ++++
 xroom-dashboard/src/components/Header.vue     |   40 +-
 xroom-dashboard/src/components/Membership.vue |  202 +++
 .../src/components/TeamDetails.vue            |   29 +
 xroom-dashboard/src/components/TeamUser.vue   |    2 +-
 xroom-dashboard/src/pages/dashboard/team.vue  | 1252 +----------------
 7 files changed, 661 insertions(+), 1299 deletions(-)
 create mode 100644 xroom-dashboard/src/components/BuySubscription.vue
 create mode 100644 xroom-dashboard/src/components/Membership.vue
 create mode 100644 xroom-dashboard/src/components/TeamDetails.vue

diff --git a/xroom-dashboard/src/components/AddUserModal.vue b/xroom-dashboard/src/components/AddUserModal.vue
index 64722e8..86e11e6 100644
--- a/xroom-dashboard/src/components/AddUserModal.vue
+++ b/xroom-dashboard/src/components/AddUserModal.vue
@@ -37,38 +37,46 @@
       <div class="popUp-objects">
         <form @submit.prevent="handleSubmit" autocomplete="off">
           <div class="form-group">
-            <label for="full_name">نام و نام خانوادگی</label>
+            <label for="first_name">نام</label>
             <input
-              id="full_name"
-              v-model="newUser.full_name"
+              id="first_name"
+              v-model="newUser.first_name"
               type="text"
               required
             />
           </div>
           <div class="form-group">
-            <label for="email">ایمیل</label>
+            <label for="last_name">نام خانوادگی</label>
             <input
-              id="email"
-              v-model="newUser.email"
-              type="email"
+              id="last_name"
+              v-model="newUser.last_name"
+              type="text"
               required
-              style="text-align: left;"
             />
           </div>
           <div class="form-group">
-            <label for="phone">شماره تماس</label>
+            <label for="mobile_number">شماره تماس</label>
             <input
-              id="phone"
-              v-model="newUser.phone"
+              id="mobile_number"
+              v-model="newUser.mobile_number"
               type="tel"
               required
             />
           </div>
           <div class="form-group">
-            <label for="job_title">عنوان شغلی</label>
+            <label for="password">رمز عبور</label>
             <input
-              id="job_title"
-              v-model="newUser.job_title"
+              id="password"
+              v-model="newUser.password"
+              type="password"
+              required
+            />
+          </div>
+          <div class="form-group">
+            <label for="semat">عنوان شغلی</label>
+            <input
+              id="semat"
+              v-model="newUser.semat"
               type="text"
               required
             />
@@ -77,21 +85,11 @@
             <span>مدیر</span>
             <input
               type="checkbox"
-              id="is_manager"
+              id="isAdmin"
               class="checkbox"
-              v-model="newUser.is_manager"
+              v-model="newUser.isAdmin"
             />
-            <label for="is_manager" class="switch"></label>
-          </div>
-          <div class="form-group" style="justify-content: normal;">
-            <span>مجوز</span>
-            <input
-              type="checkbox"
-              id="has_permission"
-              class="checkbox"
-              v-model="newUser.has_permission"
-            />
-            <label for="has_permission" class="switch"></label>
+            <label for="isAdmin" class="switch"></label>
           </div>
         </form>
       </div>
@@ -115,32 +113,33 @@ export default {
   data() {
     return {
       newUser: {
-        full_name: '',
-        phone: '',
-        email: '',
-        job_title: '',
-        is_manager: false,
-        has_permission: false,
+        first_name: '',
+        last_name: '',
+        mobile_number: '',
+        password: '',
+        semat: '',
+        isAdmin: false,
       },
     };
   },
   methods: {
     close() {
       this.newUser = {
-        full_name: '',
-        phone: '',
-        email: '',
-        job_title: '',
-        is_manager: false,
-        has_permission: false,
+        first_name: '',
+        last_name: '',
+        mobile_number: '',
+        password: '',
+        semat: '',
+        isAdmin: false,
       };
       this.$emit('close');
     },
     handleSubmit() {
-      if (!this.newUser.full_name || !this.newUser.email || !this.newUser.phone || !this.newUser.job_title) {
+      if (!this.newUser.first_name || !this.newUser.last_name || !this.newUser.mobile_number || !this.newUser.password || !this.newUser.semat) {
         alert('لطفاً تمام فیلدها را پر کنید.');
         return;
       }
+      
       this.$emit('add-user', { ...this.newUser });
       this.close();
     },
@@ -151,7 +150,7 @@ export default {
 <style scoped>
 .modal-overlay {
   position: fixed;
-  inset: 0; /* جایگزین top: 0; left: 0; right: 0; bottom: 0 */
+  inset: 0;
   background: rgba(0, 0, 0, 0.5);
   display: flex;
   justify-content: center;
@@ -193,7 +192,7 @@ export default {
 }
 
 .popUp-header button {
-  background-color: inherit; /* استفاده از inherit برای حذف تکرار #101010 */
+  background-color: inherit;
   border: none;
   cursor: pointer;
 }
@@ -201,7 +200,7 @@ export default {
 .popUp-title {
   display: flex;
   flex-direction: column;
-  align-items: flex-start; /* اصلاح start به flex-start برای استاندارد بودن */
+  align-items: flex-start;
   padding: 20px 50px 20px 20px;
 }
 
@@ -219,7 +218,7 @@ export default {
 }
 
 .popUp-objects {
-  margin: 1rem auto 0; /* ترکیب margin-top و margin: auto */
+  margin: 1rem auto 0;
   padding: 20px;
   background-color: #FFFFFF;
   border-radius: 16px;
@@ -241,28 +240,15 @@ export default {
   font-size: 16px;
 }
 
-.form-group input,
-.form-group textarea {
+.form-group input {
   width: 100%;
   padding: 8px;
   border: 1px solid #718096;
   border-radius: 8px;
   font-size: 1rem;
-  resize: none; /* برای textarea */
 }
 
-.form-group input {
-  height: 45px;
-  max-width: 22rem;
-}
-
-.form-group textarea {
-  height: 140px;
-  max-width: 25rem;
-}
-
-.form-group input:focus,
-.form-group textarea:focus {
+.form-group input:focus {
   outline: none;
 }
 
@@ -299,37 +285,37 @@ export default {
 
 /* checkbox toggler */
 
-.switch { 
-    position : relative ;
-    display : inline-block;
-    width: 60px !important;
-    height: 25px;
-    background-color: #CCCCCC;
-    border-radius: 20px;
-    margin-right: 12.5rem;
- }
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 60px !important;
+  height: 25px;
+  background-color: #CCCCCC;
+  border-radius: 20px;
+  margin-right: 12.5rem;
+}
 
- .switch::after {
-    content: '';
-    position: absolute;
-    width: 20px;
-    height: 20px;
-    border-radius: 50%;
-    background-color: white;
-    top: 2px;
-    right: 3px;
-    transition: all 0.3s;
+.switch::after {
+  content: '';
+  position: absolute;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background-color: white;
+  top: 2px;
+  right: 3px;
+  transition: all 0.3s;
 }
 
 .checkbox:checked + .switch::after {
-    right: 37px; 
+  right: 37px;
 }
+
 .checkbox:checked + .switch {
-    background-color: #3a57e8;
+  background-color: #3a57e8;
 }
 
-.checkbox { 
-    display : none;
+.checkbox {
+  display: none;
 }
-
-</style>
\ No newline at end of file
+</style>
diff --git a/xroom-dashboard/src/components/BuySubscription.vue b/xroom-dashboard/src/components/BuySubscription.vue
new file mode 100644
index 0000000..688cd0c
--- /dev/null
+++ b/xroom-dashboard/src/components/BuySubscription.vue
@@ -0,0 +1,281 @@
+<template>
+  <div class="buy-subscription-container">
+    <div class="subscription-title">
+      <h3 style="text-align: center; margin-bottom: 20px;">
+        لطفا نوع اشتراک خود را انتخاب کنید
+      </h3>
+      <span>
+        ما مدل مجوزدهی انعطاف‌پذیری ارائه می‌دهد. شما می‌توانید به‌صورت ماهانه و به ازای هر کاربر پرداخت کنید. تعداد کاربران را می‌توان فوراً افزایش داد، اما در صورت کاهش مجوزها، تغییرات در پایان دوره‌ی صورتحساب اعمال خواهند شد.
+      </span>
+    </div>
+
+    <div class="user-count" style="text-align: start; margin: 3rem 0 2rem 0;">
+      <label for="memberCount" style="margin-left: 10px;">تعداد کاربران : </label>
+      <select
+        id="memberCount"
+        :value="memberCount"
+        @change="updateMemberCount($event)">
+        <option v-for="count in availableMemberOptions" :key="count" :value="count">
+          {{ count }} کاربر
+        </option>
+      </select>
+    </div>
+
+    <div style="display: flex; justify-content: space-between; flex-wrap: wrap;">
+      <div class="plan-card">
+        <div class="card-inner">
+          <h4>هفتگی</h4>
+          <div class="card-price-title">
+            <p>{{ (plans.weekly.price * memberCount).toLocaleString() }} تومان</p>
+            <small>برای {{ memberCount }} کاربر، در هفته</small>
+          </div>
+          <button class="primary-button" @click="selectPlan('weekly')">
+            انتخاب طرح اشتراک
+          </button>
+        </div>
+      </div>
+      <div class="plan-card">
+        <div class="card-inner">
+          <h4>ماهانه</h4>
+          <div class="card-price-title">
+            <p>{{ (plans.monthly.price * memberCount).toLocaleString() }} تومان</p>
+            <small>برای {{ memberCount }} کاربر، در ماه</small>
+          </div>
+          <button class="primary-button" @click="selectPlan('monthly')">
+            انتخاب طرح اشتراک
+          </button>
+        </div>
+      </div>
+      <div class="plan-card">
+        <div class="card-inner">
+          <h4>سالانه</h4>
+          <div class="card-price-title">
+            <p>{{ (plans.yearly.price * memberCount).toLocaleString() }} تومان</p>
+            <small>برای {{ memberCount }} کاربر، در سال</small>
+          </div>
+          <button class="primary-button" @click="selectPlan('yearly')">
+            انتخاب طرح اشتراک
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <!-- فاکتور -->
+    <div
+      v-if="selectedPlan"
+      class="invoice-box"
+      style="margin-top: 40px; background: white; padding: 20px; border-radius: 12px; max-width: 400px; margin-right: auto; margin-left: auto;"
+    >
+      <h4 style="margin-bottom: 16px;">پیش‌فاکتور اشتراک {{ selectedPlan.name }}</h4>
+      <div style="display: flex; justify-content: space-between; margin-bottom: 8px;">
+        <span>قیمت پایه:</span>
+        <span>{{ selectedPlan.basePrice.toLocaleString() }} تومان</span>
+      </div>
+      <div style="display: flex; justify-content: space-between; margin-bottom: 8px;">
+        <span>مالیات (۹٪):</span>
+        <span>{{ selectedPlan.tax.toLocaleString() }} تومان</span>
+      </div>
+      <div
+        style="display: flex; justify-content: space-between; font-weight: bold; font-size: 16px; margin-bottom: 20px;"
+      >
+        <span>مبلغ قابل پرداخت:</span>
+        <span>{{ selectedPlan.total.toLocaleString() }} تومان</span>
+      </div>
+      <button class="primary-button" style="width: 100%;" @click="pay">
+        پرداخت
+      </button>
+    </div>
+  </div>
+</template>
+
+<script>
+import axios from 'axios';
+
+export default {
+  name: 'BuySubscription',
+  props: {
+    memberCount: {
+      type: Number,
+      default: 5,
+    },
+    availableMemberOptions: {
+      type: Array,
+      default: () => [5, 10, 20, 100],
+    },
+    baseUrl: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      selectedPlan: null,
+      plans: {
+        weekly: { name: 'هفتگی', price: 250000 },
+        monthly: { name: 'ماهانه', price: 670000 },
+        yearly: { name: 'سالانه', price: 4600000 },
+      },
+    };
+  },
+  methods: {
+    updateMemberCount(event) {
+      const newCount = Number(event.target.value);
+      this.$emit('update:memberCount', newCount);
+      if (this.selectedPlan) {
+        this.selectPlan(
+          this.selectedPlan.name === 'هفتگی' ? 'weekly' : this.selectedPlan.name === 'ماهانه' ? 'monthly' : 'yearly'
+        );
+      }
+    },
+    selectPlan(planKey) {
+      const plan = this.plans[planKey];
+      if (!plan) return;
+
+      const base = plan.price * this.memberCount;
+      const tax = Math.round(base * 0.09);
+
+      this.selectedPlan = {
+        ...plan,
+        basePrice: base,
+        tax,
+        total: base + tax,
+      };
+      this.$emit('plan-selected', this.selectedPlan);
+    },
+    async pay() {
+      if (!this.selectedPlan) {
+        alert('لطفاً ابتدا یک طرح اشتراک انتخاب کنید.');
+        return;
+      }
+
+      try {
+        const startTime = new Date().toISOString();
+        let endTime;
+        if (this.selectedPlan.name === 'هفتگی') {
+          endTime = new Date(new Date().getTime() + 7 * 24 * 60 * 60 * 1000).toISOString();
+        } else if (this.selectedPlan.name === 'ماهانه') {
+          endTime = new Date(new Date().getTime() + 30 * 24 * 60 * 60 * 1000).toISOString();
+        } else if (this.selectedPlan.name === 'سالانه') {
+          endTime = new Date(new Date().getTime() + 365 * 24 * 60 * 60 * 1000).toISOString();
+        }
+
+        const subscriptionData = {
+          user_count: this.memberCount,
+          license_number: `ABC-${Math.random().toString(36).substr(2, 6).toUpperCase()}-XYZ`,
+          startTime: startTime,
+          endTime: endTime,
+          price: this.selectedPlan.total,
+        };
+
+        const token = localStorage.getItem('token');
+        await axios.post(`${this.baseUrl}/add_subscription/`, subscriptionData, {
+          headers: {
+            Authorization: `Token ${token}`,
+            'Content-Type': 'application/json',
+          },
+        });
+
+        alert(`پرداخت با موفقیت انجام شد برای ${this.memberCount} کاربر`);
+        this.selectedPlan = null;
+        this.$emit('payment-success');
+      } catch (error) {
+        console.error('خطا در ارسال اطلاعات اشتراک:', error);
+        alert('خطا در ثبت اشتراک. لطفاً دوباره تلاش کنید.');
+      }
+    },
+  },
+};
+</script>
+
+<style scoped>
+.buy-subscription-container {
+  direction: rtl;
+  font-family: IRANSansXFaNum, sans-serif;
+}
+
+.plan-card {
+   background-color: white;
+    border-radius: 16px;
+    padding: 1px 1px 2px 1px;
+    width: 32%;
+    text-align: center;
+    height: 25rem;
+    background: linear-gradient(to right, #001940, #4364F7);
+}
+
+.card-inner {
+    background-color: white;
+    border-radius: 14px;
+    height: 100%;
+    padding: 18px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    padding-top: 4rem;
+}
+
+.plan-card h4 {
+  font-size: 25px;
+  color: #101010;
+  margin-bottom: 10px;
+}
+
+
+.primary-button {
+  background-color: #3a57e8;
+  color: white;
+  border: none;
+  padding: 12px 24px;
+  font-size: 14px;
+  border-radius: 10px;
+  cursor: pointer;
+}
+
+.primary-button:hover {
+  background-color: #2e45c8;
+}
+
+.subscription-title {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+}
+
+.subscription-title h3 {
+    color: #101010;
+    font-weight: 600;
+    font-size: 20px;
+}
+
+.subscription-title span {
+    color: #4F5A69;
+    line-height: 190%;
+    font-size: 16px;
+}
+
+.user-count select {
+padding: 8px 12px;
+border-radius: 8px;
+border-left: 16px solid transparent !important;
+box-shadow: #00000029 0px 1px 4px 0px;
+border: none;
+}
+
+.user-count select:focus {
+outline: none;
+}
+
+.card-price-title p{
+    color: #101010;
+    font-size: 20px;
+    line-height: 140%;
+    margin-bottom: 8px;
+}
+
+.card-price-title small {
+    color: #8D99AB;
+    font-size: 17px;
+    line-height: 140%;
+    margin-top: 10px;
+}
+</style>
\ No newline at end of file
diff --git a/xroom-dashboard/src/components/Header.vue b/xroom-dashboard/src/components/Header.vue
index c97d0b0..1fc429b 100644
--- a/xroom-dashboard/src/components/Header.vue
+++ b/xroom-dashboard/src/components/Header.vue
@@ -1,6 +1,5 @@
 <template>
   <header class="header-container">
-    <img class="line" src="https://c.animaapp.com/m9nvumalUMfQbN/img/line-1.svg" />
     <div class="welcome-container">
       <p class="welcome-message">{{ pageTitle }} </p>
     </div>
@@ -10,7 +9,11 @@
           <img class="user-avatar" :src="profileIcon"   />
         </div>
         <div class="user-name">{{ fullName }}</div>
-        <img class="user-icon"  src="https://c.animaapp.com/m9nvumalUMfQbN/img/frame-10.svg"   />
+        <span>          
+          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M7.19922 10L11.9992 14L16.7992 10" stroke="#8D99AB" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+        </span>
         
         <!-- Dropdown positioned relative to user-info-container -->
         <div v-if="showDropdown" class="dropdown-menu">
@@ -101,15 +104,17 @@ export default {
 
 <style scoped>
 .header-container {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 20px;
-  background-color: #ffffff;
-  border-bottom: 1px solid #eaeaea;
-  position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 20px;
+    border-bottom: 1px solid #eaeaea;
+    position: relative;
+    z-index: 100;
+    padding-right: 0;
 }
 
+
 /* New green button styles */
 .green-button {
   display: flex;
@@ -169,9 +174,9 @@ export default {
 }
 
 .user-name {
-  font-size: 14px;
-  font-weight: 500;
-  color: #333333;
+    font-size: 16px;
+    font-weight: 500;
+    color: #101010;
 }
 
 .avatar-wrapper {
@@ -279,16 +284,7 @@ export default {
 }
 
 /* Ensure header has proper z-index */
-.header-container {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 20px;
-  background-color: #ffffff;
-  border-bottom: 1px solid #eaeaea;
-  position: relative;
-  z-index: 100; /* Lower than dropdown but higher than page content */
-}
+
 
 .dropdown-menu {
   position: absolute;
diff --git a/xroom-dashboard/src/components/Membership.vue b/xroom-dashboard/src/components/Membership.vue
new file mode 100644
index 0000000..50c5953
--- /dev/null
+++ b/xroom-dashboard/src/components/Membership.vue
@@ -0,0 +1,202 @@
+<template>
+  <div class="tab-content">
+    <div class="access-container">
+      <div class="access-header" style="background: white; border-radius: 20px; padding: 20px;">
+        <img :src="require('@/assets/img/lock Icon.png')" alt="lock" class="lock-icon" />
+        <div class="header-text">
+          <h3>فعال‌سازی دسترسی XRoom</h3>
+          <p>دسترسی کامل به امکانات XRoom بدون واترمارک</p>
+        </div>
+        <button class="primary-button" @click="changeTab('buy-subscription')">
+          <img style="margin-left: 10px" :src="require('@/assets/img/hand.png')" alt="hand" />
+          انتخاب طرح اشتراکی
+        </button>
+      </div>
+      <!-- subscription card -->
+      <div class="info-cards">
+        <div class="info-card">
+          <h4>وضعیت اشتراک تیم</h4>
+          <p v-if="subscriptionCount - teamMemberCapacity > 0">
+            ظرفیت کل تیم: <strong>{{ subscriptionCount }} کاربر</strong><br />
+            ظرفیت باقی‌مانده: <strong>{{ subscriptionCount - teamMemberCapacity }} کاربر</strong><br />
+            کاربران اضافه کرده: <strong>{{ teamMemberCapacity }} کاربر</strong>
+          </p>
+          <p class="invalid-subscription" v-else>شما اشتراک فعالی ندارین، لطفا اشتراک جدیدی خریداری نمایید.</p>
+          <button class="disable-button" v-if="subscriptionCount - teamMemberCapacity > 0">
+            اشتراک فعال دارید
+          </button>
+          <button class="secondary-button" @click="changeTab('buy-subscription')" v-else>
+            خرید اشتراک جدید
+          </button>
+        </div>
+        <div class="info-card">
+          <h4>جزئیات صورتحساب</h4>
+          <p>
+            اصفهان، خیابان وحید، نبش خیابان حسین آباد، مجتمع عسگری ۳، واحد ۳<br />
+            ۸۱۷۵۹۴۹۹۹۱<br />
+            شماره تماس: ۰۹۳۷۹۸۹۸۶۲۳<br />
+            ایمیل: aminimperator@gmail.com
+          </p>
+          <button class="secondary-button" @click="openBillingModal">
+            ویرایش جزئیات صورتحساب
+          </button>
+        </div>
+        <div class="info-card">
+          <h4>عضویت‌ها</h4>
+          <p>
+            هنوز مجوزی فعال نیست. کاربران شما نمی‌توانند از XRoom با واترمارک استفاده کنند.
+          </p>
+          <button class="secondary-button">مدیریت عضویت‌ها</button>
+        </div>
+        <div class="info-card">
+          <h4>روش پرداخت</h4>
+          <p>هیچ روش پرداختی برای صورتحساب مرتبط نیست.</p>
+        </div>
+      </div>
+      <EditBillingModal :isVisible="isBillingModalVisible" @close="closeBillingModal" />
+    </div>
+  </div>
+</template>
+
+<script>
+import EditBillingModal from '@/components/EditBillingModal.vue';
+
+export default {
+  name: 'Membership',
+  components: {
+    EditBillingModal,
+  },
+  props: {
+    subscriptionCount: {
+      type: Number,
+      required: true,
+    },
+    teamMemberCapacity: {
+      type: Number,
+      required: true,
+    },
+    isBillingModalVisible: {
+      type: Boolean,
+      required: true,
+    },
+  },
+  methods: {
+    changeTab(tabName) {
+      this.$emit('change-tab', tabName);
+    },
+    openBillingModal() {
+      this.$emit('update:isBillingModalVisible', true);
+    },
+    closeBillingModal() {
+      this.$emit('update:isBillingModalVisible', false);
+    },
+  },
+};
+</script>
+
+<style scoped>
+.access-container {
+  direction: rtl;
+  font-family: IRANSansXFaNum, sans-serif;
+  padding: 20px;
+  background-color: #f9f9fb;
+  width: -webkit-fill-available;
+}
+
+.access-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 24px;
+}
+
+.header-text h3 {
+  font-size: 20px;
+  font-weight: 700;
+  color: #1a202c;
+  margin-bottom: 6px;
+}
+
+.header-text p {
+  color: #4a5568;
+  font-size: 14px;
+}
+
+.lock-icon {
+  width: 40px;
+  height: 40px;
+}
+
+.primary-button {
+  background-color: #3a57e8;
+  color: white;
+  border: none;
+  padding: 12px 24px;
+  font-size: 14px;
+  border-radius: 10px;
+  margin-bottom: 30px;
+  cursor: pointer;
+}
+
+.info-cards {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+}
+
+.info-card {
+  background: white;
+  border-radius: 16px;
+  padding: 20px;
+  width: 100%;
+  max-width: 300px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.info-card h4 {
+  font-size: 16px;
+  font-weight: 600;
+  margin-bottom: 12px;
+}
+
+.info-card p {
+  font-size: 14px;
+  color: #4a5568;
+  margin-bottom: 16px;
+  line-height: 1.7;
+}
+
+.secondary-button {
+  background-color: #3a57e8;
+  color: white;
+  border: none;
+  padding: 10px 16px;
+  font-size: 13px;
+  border-radius: 8px;
+  cursor: pointer;
+}
+
+.invalid-subscription {
+  color: #f44336 !important;
+}
+
+.disable-button {
+  background-color: #ebeeFD;
+  color: #101010;
+  border: none;
+  padding: 10px 16px;
+  font-size: 14px;
+  font-weight: 600;
+  border-radius: 8px;
+  cursor: pointer;
+}
+
+.tab-content {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+}
+</style>
\ No newline at end of file
diff --git a/xroom-dashboard/src/components/TeamDetails.vue b/xroom-dashboard/src/components/TeamDetails.vue
new file mode 100644
index 0000000..bd36e3a
--- /dev/null
+++ b/xroom-dashboard/src/components/TeamDetails.vue
@@ -0,0 +1,29 @@
+<template>
+  <div class="tab-content">
+    <div class="card">جزئیات تیم ۱</div>
+    <div class="card">جزئیات تیم ۲</div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'TeamDetails',
+};
+</script>
+
+<style scoped>
+.tab-content {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+}
+
+.card {
+  background-color: white;
+  border: 1px solid #e2e8f0;
+  border-radius: 12px;
+  padding: 20px;
+  min-width: 200px;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
+}
+</style>
\ No newline at end of file
diff --git a/xroom-dashboard/src/components/TeamUser.vue b/xroom-dashboard/src/components/TeamUser.vue
index 607bc00..0366166 100644
--- a/xroom-dashboard/src/components/TeamUser.vue
+++ b/xroom-dashboard/src/components/TeamUser.vue
@@ -2,7 +2,7 @@
           <div class="card license-card">
           <span>لایسنس های قابل استفاده : 0</span>
           <div class="buy-subscription"  @click="goToBuySubscription">
-            خرید اشتراک
+            <p>خرید اشتراک</p>
             <span>
               <svg xmlns="http://www.w3.org/2000/svg" width="24" height="25" viewBox="0 0 24 25" fill="none">
                 <path d="M12 19.5L5 12.5L12 5.5" stroke="#48BB78" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
diff --git a/xroom-dashboard/src/pages/dashboard/team.vue b/xroom-dashboard/src/pages/dashboard/team.vue
index dd2c94b..7108a59 100644
--- a/xroom-dashboard/src/pages/dashboard/team.vue
+++ b/xroom-dashboard/src/pages/dashboard/team.vue
@@ -1,3 +1,4 @@
+<!-- DashboardPage.vue -->
 <template>
   <SidebarMenu />
 
@@ -49,137 +50,27 @@
           @change-tab="changeTab" 
         />
       </div>
-      <div v-if="activeTab === 'membership'" class="tab-content">
-        <div class="access-container">
-
-          <div class="access-header" style="background: white; border-radius: 20px; padding: 20px;">
-            <img :src="require('@/assets/img/lock Icon.png')" alt="lock" class="lock-icon" />
-            <div class="header-text">
-              <h3>فعال‌سازی دسترسی XRoom</h3>
-              <p>دسترسی کامل به امکانات XRoom بدون واترمارک</p>
-            </div>
-            <button class="primary-button" @click="changeTab('buy-subscription')">
-              <img style="margin-left: 10px" :src="require('@/assets/img/hand.png')" alt="hand" />
-              انتخاب طرح اشتراکی
-            </button>
-          </div>
-
-          <!-- subscription card -->
-          <div class="info-cards" >
-            <div class="info-card">
-              <h4>وضعیت اشتراک تیم</h4>
-              <p v-if="subscriptionCount - teamMemberCapacity > 0">
-                ظرفیت کل تیم: <strong>{{ subscriptionCount }} کاربر</strong><br />
-                ظرفیت باقی‌مانده: <strong>{{  subscriptionCount - teamMemberCapacity}} کاربر</strong><br />
-                کاربران اضافه کرده: <strong>{{  teamMemberCapacity }} کاربر</strong>
-              </p>
-              <p class="invalid-subscription" v-else> شما اشتراک فعالی ندارین , لطفا اشتراک جدیدی خریداری نمایید.</p>
-              <button class="disable-button" v-if="subscriptionCount - teamMemberCapacity > 0">
-                اشتراک فعال دارید
-              </button>
-              <button class="secondary-button" @click="changeTab('buy-subscription')" v-else>
-                خرید اشتراک جدید
-              </button>
-            </div>
-
-            <div class="info-card">
-              <h4>جزئیات صورتحساب</h4>
-              <p>
-                اصفهان، خیابان وحید، نبش خیابان حسین آباد، مجتمع عسگری ۳، واحد ۳<br />
-                ۸۱۷۵۹۴۹۹۹۱<br />
-                شماره تماس: ۰۹۳۷۹۸۹۸۶۲۳<br />
-                ایمیل: aminimperator@gmail.com
-              </p>
-              <button class="secondary-button" @click="openBillingModal">
-                ویرایش جزئیات صورتحساب
-              </button>
-            </div>
-            <div class="info-card">
-              <h4>عضویت‌ها</h4>
-              <p>
-                هنوز مجوزی فعال نیست. کاربران شما نمی‌توانند از XRoom با واترمارک استفاده کنند.
-              </p>
-              <button class="secondary-button">مدیریت عضویت‌ها</button>
-            </div>
-            <div class="info-card">
-              <h4>روش پرداخت</h4>
-              <p>هیچ روش پرداختی برای صورتحساب مرتبط نیست.</p>
-            </div>
-          </div>
-          <EditBillingModal :isVisible="isBillingModalVisible" @close="closeBillingModal" />
-        </div>
+      <div v-if="activeTab === 'membership'">
+        <Membership
+          :subscriptionCount="subscriptionCount"
+          :teamMemberCapacity="teamMemberCapacity"
+          :isBillingModalVisible="isBillingModalVisible"
+          @change-tab="changeTab"
+          @update:isBillingModalVisible="isBillingModalVisible = $event"
+        />
       </div>
-      <div v-if="activeTab === 'details'" class="tab-content">
-        <div class="card">جزئیات تیم ۱</div>
-        <div class="card">جزئیات تیم ۲</div>
+      <div v-if="activeTab === 'details'">
+        <TeamDetails />
       </div>
-      <div v-if="activeTab === 'buy-subscription'" class="tab-content">
-        <div class="buy-subscription-container">
-          <div style="text-align: center; margin-bottom: 20px;">
-            <label for="memberCount" style="margin-left: 10px;">تعداد کاربران:</label>
-            <select
-              id="memberCount"
-              v-model.number="memberCount"
-              @change="selectedPlan && selectPlan(selectedPlan.name === 'هفتگی' ? 'weekly' : selectedPlan.name === 'ماهانه' ? 'monthly' : 'yearly')"
-              style="padding: 8px 12px; border-radius: 8px; border: 1px solid #ccc;"
-            >
-              <option v-for="count in availableMemberOptions" :key="count" :value="count">
-                {{ count }} کاربر
-              </option>
-            </select>
-          </div>
-          <h3 style="text-align: center; margin-bottom: 20px;">
-            لطفا نوع اشتراک خود را انتخاب کنید
-          </h3>
-          <div style="display: flex; justify-content: center; gap: 20px; flex-wrap: wrap;">
-            <div class="plan-card">
-              <h4>هفتگی</h4>
-              <p>۲۵۰٬۰۰۰ تومان<br /><small>برای یک کاربر، در هفته</small></p>
-              <button class="primary-button" @click="selectPlan('weekly')">
-                انتخاب طرح اشتراک
-              </button>
-            </div>
-            <div class="plan-card">
-              <h4>ماهانه</h4>
-              <p>۶۷۰٬۰۰۰ تومان<br /><small>برای یک کاربر، در هفته</small></p>
-              <button class="primary-button" @click="selectPlan('monthly')">
-                انتخاب طرح اشتراک
-              </button>
-            </div>
-            <div class="plan-card">
-              <h4>سالانه</h4>
-              <p>۴٬۶۰۰٬۰۰۰ تومان<br /><small>برای یک کاربر، در هفته</small></p>
-              <button class="primary-button" @click="selectPlan('yearly')">
-                انتخاب طرح اشتراک
-              </button>
-            </div>
-          </div>
-          <!-- فاکتور -->
-          <div
-            v-if="selectedPlan"
-            class="invoice-box"
-            style="margin-top: 40px; background: white; padding: 20px; border-radius: 12px; max-width: 400px; margin-right: auto; margin-left: auto;"
-          >
-            <h4 style="margin-bottom: 16px;">پیش‌فاکتور اشتراک {{ selectedPlan.name }}</h4>
-            <div style="display: flex; justify-content: space-between; margin-bottom: 8px;">
-              <span>قیمت پایه:</span>
-              <span>{{ selectedPlan.price.toLocaleString() }} تومان</span>
-            </div>
-            <div style="display: flex; justify-content: space-between; margin-bottom: 8px;">
-              <span>مالیات (۹٪):</span>
-              <span>{{ selectedPlan.tax.toLocaleString() }} تومان</span>
-            </div>
-            <div
-              style="display: flex; justify-content: space-between; font-weight: bold; font-size: 16px; margin-bottom: 20px;"
-            >
-              <span>مبلغ قابل پرداخت:</span>
-              <span>{{ selectedPlan.total.toLocaleString() }} تومان</span>
-            </div>
-            <button class="primary-button" style="width: 100%;" @click="pay">
-              پرداخت
-            </button>
-          </div>
-        </div>
+      <div v-if="activeTab === 'buy-subscription'">
+        <BuySubscription
+          :memberCount="memberCount"
+          :availableMemberOptions="availableMemberOptions"
+          :baseUrl="baseUrl"
+          @update:memberCount="memberCount = $event"
+          @plan-selected="selectedPlan = $event"
+          @payment-success="handlePaymentSuccess"
+        />
       </div>
     </div>
   </div>
@@ -187,18 +78,22 @@
 
 <script>
 import SidebarMenu from '@/components/SidebarMenu.vue';
-import EditBillingModal from '@/components/EditBillingModal.vue';
 import AppHeader from '@/components/Header.vue';
 import TeamUser from '@/components/TeamUser.vue';
+import BuySubscription from '@/components/BuySubscription.vue';
+import Membership from '@/components/Membership.vue';
+import TeamDetails from '@/components/TeamDetails.vue';
 import axios from 'axios';
 
 export default {
   name: 'DashboardPage',
   components: {
     SidebarMenu,
-    EditBillingModal,
     AppHeader,
     TeamUser,
+    BuySubscription,
+    Membership,
+    TeamDetails,
   },
   data() {
     return {
@@ -206,11 +101,6 @@ export default {
       memberCount: 5,
       availableMemberOptions: [5, 10, 20, 100],
       selectedPlan: null,
-      plans: {
-        weekly: { name: 'هفتگی', price: 250000 },
-        monthly: { name: 'ماهانه', price: 670000 },
-        yearly: { name: 'سالانه', price: 4600000 },
-      },
       userList: [
         {
           name: 'دانیال پژوهش کیا',
@@ -278,70 +168,9 @@ export default {
     changeTab(tabName) {
       this.activeTab = tabName;
     },
-    openBillingModal() {
-      this.isBillingModalVisible = true;
-    },
-    closeBillingModal() {
-      this.isBillingModalVisible = false;
-    },
-    selectPlan(planKey) {
-      const plan = this.plans[planKey];
-      if (!plan) return;
-
-      const base = plan.price * this.memberCount;
-      const tax = Math.round(base * 0.09);
-
-      this.selectedPlan = {
-        ...plan,
-        basePrice: base,
-        tax,
-        total: base + tax,
-      };
-    },
-    async pay() {
-      if (!this.selectedPlan) {
-        alert('لطفاً ابتدا یک طرح اشتراک انتخاب کنید.');
-        return;
-      }
-
-      try {
-
-        const startTime = new Date().toISOString();
-        let endTime;
-        if (this.selectedPlan.name === 'هفتگی') {
-          endTime = new Date(new Date().getTime() + 7 * 24 * 60 * 60 * 1000).toISOString();
-        } else if (this.selectedPlan.name === 'ماهانه') {
-          endTime = new Date(new Date().getTime() + 30 * 24 * 60 * 60 * 1000).toISOString();
-        } else if (this.selectedPlan.name === 'سالانه') {
-          endTime = new Date(new Date().getTime() + 365 * 24 * 60 * 60 * 1000).toISOString();
-        }
-
-        const subscriptionData = {
-          user_count: this.memberCount,
-          license_number: `ABC-${Math.random().toString(36).substr(2, 6).toUpperCase()}-XYZ`,
-          startTime: startTime,
-          endTime: endTime,
-          price: this.selectedPlan.total,
-        };
-
-        const token = localStorage.getItem('token');
-        await axios.post(`${this.baseUrl}/add_subscription/`, subscriptionData, {
-          headers: {
-            Authorization: `Token ${token}`,
-            'Content-Type': 'application/json',
-          },
-        });
-
-
-        await this.fetchTeamMemberInfo();
-
-        alert(`پرداخت با موفقیت انجام شد برای ${this.memberCount} کاربر`);
-        this.selectedPlan = null;
-        this.activeTab = 'membership';
-      } catch (error) {
-        console.error('خطا در ارسال اطلاعات اشتراک:', error);
-        alert('خطا در ثبت اشتراک. لطفاً دوباره تلاش کنید.');
-      }
+    async handlePaymentSuccess() {
+      await this.fetchTeamMemberInfo();
+      this.activeTab = 'membership';
     },
     async fetchTeamMemberInfo() {
       try {
@@ -355,16 +184,14 @@ export default {
 
         this.teamMemberCapacity = response.data.data.team_member_capacity;
         this.subscriptionCount = response.data.data.subscriptionCount;
+        console.log('تعداد اشتراک‌ها (subscriptionCount):', this.subscriptionCount);
       } catch (error) {
         console.error('خطا در دریافت اطلاعات اشتراک:', error);
         alert('خطا در بارگذاری اطلاعات اشتراک. لطفاً دوباره تلاش کنید.');
       }
     },
     async submitNewUser(newUser) {
-
-        console.log('اطلاعات کاربر جدید:', newUser);
-        
-        this.teamMemberCapacity++ ;
+      console.log('اطلاعات کاربر جدید:', newUser);
 
       const remainingCapacity = this.subscriptionCount - this.teamMemberCapacity;
       if (remainingCapacity <= 0) {
@@ -375,9 +202,9 @@ export default {
 
       try {
         const token = localStorage.getItem('token');
-
+        
         await axios.post(
-          `${this.baseUrl}/add_teamMember/`,
+          'http://my.xroomapp.com:8000/add_teamMember/',
           newUser,
           {
             headers: {
@@ -387,7 +214,6 @@ export default {
           }
         );
 
-
         this.userList.push({
           ...newUser,
           avatar: 'https://models.readyplayer.me/681f59760bc631a87ad25172.png',
@@ -395,6 +221,7 @@ export default {
           version: newUser.version || 'نسخه آزمایشی',
         });
 
+        this.teamMemberCapacity++;
 
         await this.fetchTeamMemberInfo();
 
@@ -650,12 +477,11 @@ export default {
   },
 };
 </script>
-<!-- Your existing styles remain the same -->
-  
-  <style scoped>
+
+<style scoped>
 
 .section-title {
-  font-size: 16px;
+  font-size: 20px;
   font-weight: 600;
   color: #2d3748;
   margin-top: 20px;
@@ -663,638 +489,27 @@ export default {
   grid-column: 1 / -1;
 }
 
-/* Update the file-sidebar to accommodate more buttons */
-.file-sidebar {
-  width: 180px;
+.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: 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-box {
-  text-align: right;
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  margin-top: 20px;
-}
-  
-  .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: 20px;
-    font-weight: 700;
-    color: #1a202c;
-  }
-  
-  .section-description p {
-    font-size: 15px;
-    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;
-  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;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
-.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;
-  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;
-}
-
-.preview-content {
-  position: relative;
-  padding: 20px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
-.close-preview {
-  position: absolute;
-  top: 10px;
-  right: 10px;
-  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 {
-  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;
-  color: white;
-}
-
-.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;
-}
-
-
-
-
-
-
-
-
-
-
-
-
-
-.container {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 20px;
-}
-
-/* Header styles */
-.header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 20px;
-}
-
-.btn-buy {
-  background-color: #4caf50;
-  color: white;
-  border: none;
-  padding: 10px 20px;
-  cursor: pointer;
-}
-
-.search-bar input {
-  padding: 10px;
-  width: 300px;
-}
-
-/* Main content styles */
-.main-content {
-  display: flex;
-  flex-direction: column;
-}
-
-.team h2 {
-  font-size: 24px;
-  margin-bottom: 10px;
-}
-
-.team h3 {
-  font-size: 20px;
-  margin-bottom: 10px;
-}
-
-.team p {
-  font-size: 16px;
-  margin-bottom: 20px;
-}
-
-.user-list {
-  display: flex;
-  flex-direction: column;
-}
-
-.user {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 10px;
-  border-bottom: 1px solid #ddd;
-}
-
-
-
-.user-info {
-  flex-grow: 1;
-  margin-left: 10px;
-}
-
-.btn-remove {
-  background-color: #f44336;
-  color: white;
-  border: none;
-  padding: 8px 16px;
-  cursor: pointer;
-}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
 
 .tab-buttons {
   display: flex;
-  gap: 12px;
-  margin-top: 16px;
-  margin-bottom: 16px;
+  gap: 25px;
+  margin-top: 2rem;
+  margin-bottom: 2rem;
 }
 
 .tab-btn {
@@ -1306,6 +521,7 @@ export default {
   cursor: pointer;
   border-bottom: 2px solid transparent;
   transition: all 0.2s ease-in-out;
+  padding-right: 0;
 }
 
 .tab-btn.active {
@@ -1314,365 +530,17 @@ export default {
   font-size: 20px;
 }
 
-.tab-content {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 16px;
+.section-description {
+  margin-bottom: 3rem;
+  margin-top: 1rem;
 }
 
-.card {
-  background-color: white;
-  border: 1px solid #e2e8f0;
-  border-radius: 12px;
-  padding: 20px;
-  min-width: 200px;
-  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
-}
-
-.license-card {
-  max-width: 1600px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.buy-subscription {
-  display: flex;
-  align-items: center;
-  color: #48bb78; /* Tailwind-style green */
-  font-weight: 500;
-  cursor: pointer;
-}
-
-.buy-subscription span {
-  margin-right : 0.5rem;
-}
-
-
-.user-cards {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 2rem;
-  margin-top: 2.5rem;
-  height: 100%;
-  justify-content: space-between;
-}
-
-.user-card {
-  background: #fff;
-  border-radius: 16px;
-  box-shadow: 0 1px 4px 0 #00000029;
-  width: 48%;
-  height: 158px;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
- 
-  position: relative;
-}
-
-
-
-.user-role {
-  color: #3a57e8 !important;
-  font-weight: 600;
-  font-size: 17px !important;
-}
-
-
-
-.user-name {
-  font-weight: 700;
+.section-description p {
+  line-height: 190%;
+  color: #4F5A69;
   font-size: 16px;
+  margin-top: 2rem;
 }
 
 
- 
-
-
-
-.add-card {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: #3a57e8;
-  font-weight: 500;
-  font-size: 20px;
-  width: 48%;
-  height: 158px;
-  cursor: pointer;
-}
-
-.add-text {
-  text-align: center;
-  cursor: pointer;
-}
-
-/* dialog */
-.add-user-dialog {
-  border: none;
-  border-radius: 12px;
-  width: 90%;
-  max-width: 500px;
-  padding: 0;
-}
-
-.license-card span{
-  font-size: 17px;
-}
-
-.dialog-header {
-  background: black;
-  color: white;
-  padding: 16px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  border-top-left-radius: 12px;
-  border-top-right-radius: 12px;
-}
-
-.dialog-body {
-  padding: 24px;
-  direction: rtl;
-}
-
-.form-fields {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  margin-top: 20px;
-}
-
-.form-row {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-    
-
-}
-
-.form-row input {
-  flex: 1;
-  padding: 8px;
-  border-radius: 6px;
-  border: 1px solid #ccc;
-    max-width: 300px;
-    margin-left: 19px;
-}
-
-.switch-row input[type="checkbox"] {
-  width: 20px;
-  height: 20px;
-}
-
-.dialog-actions {
-  display: flex;
-  justify-content: space-between;
-  margin-top: 24px;
-}
-
-.confirm-btn {
-  background: #3a57e8;
-  color: white;
-  border: none;
-  padding: 10px 20px;
-  border-radius: 8px;
-}
-
-.cancel-btn {
-  background: #e2e8f0;
-  border: none;
-  padding: 10px 20px;
-  border-radius: 8px;
-}
-
-/* dialog  */
-
-
-
-
-/* tab 2 */
-.access-container {
-  direction: rtl;
-  font-family: IRANSansXFaNum, sans-serif;
-  padding: 20px;
-  background-color: #f9f9fb;
-      width: -webkit-fill-available;
-}
-
-.access-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 24px;
-}
-
-.header-text h3 {
-  font-size: 20px;
-  font-weight: 700;
-  color: #1a202c;
-  margin-bottom: 6px;
-}
-
-.header-text p {
-  color: #4a5568;
-  font-size: 14px;
-}
-
-.lock-icon {
-  width: 40px;
-  height: 40px;
-}
-
-.primary-button {
-  background-color: #3a57e8;
-  color: white;
-  border: none;
-  padding: 12px 24px;
-  font-size: 14px;
-  border-radius: 10px;
-  margin-bottom: 30px;
-  cursor: pointer;
-}
-
-.info-cards {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 20px;
-}
-
-.info-card {
-  background: white;
-  border-radius: 16px;
-  padding: 20px;
-  width: 100%;
-  max-width: 300px;
-  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-}
-
-.info-card h4 {
-  font-size: 16px;
-  font-weight: 600;
-  margin-bottom: 12px;
-}
-
-.info-card p {
-  font-size: 14px;
-  color: #4a5568;
-  margin-bottom: 16px;
-  line-height: 1.7;
-}
-
-.secondary-button {
-  background-color: #3a57e8;
-  color: white;
-  border: none;
-  padding: 10px 16px;
-  font-size: 13px;
-  border-radius: 8px;
-  cursor: pointer;
-}
-
-/* tab 2 */
-
-
-
-
-
-
-
-
-
-
-
-
- 
-
-
-
-
-
-
-.user-name {
-  font-weight: 700;
-  font-size: 16px;
-}
-
-.user-email, .user-role, .user-version {
-  font-size: 15px;
-  color: #4a5568;
-}
-
-.user-footer {
-  background: #3a57e8;
-  color: #fff;
-  border-radius: 0 0 12px 12px;
-  padding: 10px;
-  padding-bottom: 5px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  /* margin-top: 20px; */
-}
-
-.user-footer span{
-  font-size: 17px;
-}
-
-.user-actions button {
-  background: none;
-  border: none;
-  color: white;
-  font-size: 16px;
-  cursor: pointer;
-}
-
-
-.plan-card {
-  background-color: white;
-  border: 1px solid #e2e8f0;
-  border-radius: 16px;
-  padding: 20px;
-  width: 250px;
-  text-align: center;
-  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
-}
-
-.plan-card h4 {
-  font-size: 18px;
-  color: #1a202c;
-  margin-bottom: 10px;
-}
-
-.plan-card p {
-  font-size: 16px;
-  color: #4a5568;
-  margin-bottom: 20px;
-  line-height: 1.6;
-}
-
-
-.invalid-subscription {
-  color: #f44336 !important;
-}
-
-
-.disable-button {
-  background-color: #EBEEFD;
-  color: #101010;
-  border: none;
-  padding: 10px 16px;
-  font-size: 14px;
-  font-weight: 600;
-  border-radius: 8px;
-  cursor: pointer;
-}
-
-
-
-</style>
-  
\ No newline at end of file
+</style>
\ No newline at end of file