xroom-dashboard/src/components/AddUserModal.vue

@@ -37,46 +37,38 @@
       <div class="popUp-objects">
         <form @submit.prevent="handleSubmit" autocomplete="off">
           <div class="form-group">
-            <label for="first_name">نام</label>
+            <label for="full_name">نام و نام خانوادگی</label>
             <input
-              id="first_name"
-              v-model="newUser.first_name"
+              id="full_name"
+              v-model="newUser.full_name"
               type="text"
               required
             />
           </div>
           <div class="form-group">
-            <label for="last_name">نام خانوادگی</label>
+            <label for="email">ایمیل</label>
             <input
-              id="last_name"
-              v-model="newUser.last_name"
-              type="text"
+              id="email"
+              v-model="newUser.email"
+              type="email"
               required
+              style="text-align: left;"
             />
           </div>
           <div class="form-group">
-            <label for="mobile_number">شماره تماس</label>
+            <label for="phone">شماره تماس</label>
             <input
-              id="mobile_number"
-              v-model="newUser.mobile_number"
+              id="phone"
+              v-model="newUser.phone"
               type="tel"
               required
             />
           </div>
           <div class="form-group">
-            <label for="password">رمز عبور</label>
+            <label for="job_title">عنوان شغلی</label>
             <input
-              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"
+              id="job_title"
+              v-model="newUser.job_title"
               type="text"
               required
             />
@@ -85,11 +77,21 @@
             <span>مدیر</span>
             <input
               type="checkbox"
-              id="isAdmin"
+              id="is_manager"
               class="checkbox"
-              v-model="newUser.isAdmin"
+              v-model="newUser.is_manager"
             />
-            <label for="isAdmin" class="switch"></label>
+            <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>
           </div>
         </form>
       </div>
@@ -102,8 +104,6 @@
 </template>
 
 <script>
-import axios from 'axios';
-
 export default {
   name: 'AddUserModal',
   props: {
@@ -115,58 +115,35 @@ export default {
   data() {
     return {
       newUser: {
-        first_name: '',
-        last_name: '',
-        mobile_number: '',
-        password: '',
-        semat: '',
-        isAdmin: false,
+        full_name: '',
+        phone: '',
+        email: '',
+        job_title: '',
+        is_manager: false,
+        has_permission: false,
       },
     };
   },
   methods: {
     close() {
       this.newUser = {
-        first_name: '',
-        last_name: '',
-        mobile_number: '',
-        password: '',
-        semat: '',
-        isAdmin: false,
+        full_name: '',
+        phone: '',
+        email: '',
+        job_title: '',
+        is_manager: false,
+        has_permission: false,
       };
       this.$emit('close');
     },
     handleSubmit() {
-      if (!this.newUser.first_name || !this.newUser.last_name || !this.newUser.mobile_number || !this.newUser.password || !this.newUser.semat) {
+      if (!this.newUser.full_name || !this.newUser.email || !this.newUser.phone || !this.newUser.job_title) {
         alert('لطفاً تمام فیلدها را پر کنید.');
         return;
       }
-
-      const token = localStorage.getItem('token');
-      const userData = {
-        mobile_number: this.newUser.mobile_number,
-        first_name: this.newUser.first_name,
-        last_name: this.newUser.last_name,
-        semat: this.newUser.semat,
-        password: this.newUser.password,
-        isAdmin: this.newUser.isAdmin ? 'true' : 'false', // Sending as string "true" or "false"
-      };
-
-      axios.post('http://my.xroomapp.com:8000/add_teamMember', userData, {
-        headers: {
-          Authorization: `Token ${token}`,
-          'Content-Type': 'application/json',
-        },
-      })
-      .then((response) => {
-        console.log('کاربر جدید:', response.data);
-        alert('کاربر با موفقیت اضافه شد');
-        this.close();
-      })
-      .catch((error) => {
-        console.error('Error adding user:', error);
-        alert('خطا در افزودن کاربر');
-      });
+      this.$emit('add-user', { ...this.newUser });
+      console.log('اطلاعات کاربر اضافه شده:', JSON.stringify(this.newUser, null, 2));
+      this.close();
     },
   },
 };
@@ -175,7 +152,7 @@ export default {
 <style scoped>
 .modal-overlay {
   position: fixed;
-  inset: 0;
+  inset: 0; /* جایگزین top: 0; left: 0; right: 0; bottom: 0 */
   background: rgba(0, 0, 0, 0.5);
   display: flex;
   justify-content: center;
@@ -217,7 +194,7 @@ export default {
 }
 
 .popUp-header button {
-  background-color: inherit;
+  background-color: inherit; /* استفاده از inherit برای حذف تکرار #101010 */
   border: none;
   cursor: pointer;
 }
@@ -225,7 +202,7 @@ export default {
 .popUp-title {
   display: flex;
   flex-direction: column;
-  align-items: flex-start;
+  align-items: flex-start; /* اصلاح start به flex-start برای استاندارد بودن */
   padding: 20px 50px 20px 20px;
 }
 
@@ -243,7 +220,7 @@ export default {
 }
 
 .popUp-objects {
-  margin: 1rem auto 0;
+  margin: 1rem auto 0; /* ترکیب margin-top و margin: auto */
   padding: 20px;
   background-color: #FFFFFF;
   border-radius: 16px;
@@ -265,15 +242,28 @@ export default {
   font-size: 16px;
 }
 
-.form-group input {
+.form-group input,
+.form-group textarea {
   width: 100%;
   padding: 8px;
   border: 1px solid #718096;
   border-radius: 8px;
   font-size: 1rem;
+  resize: none; /* برای textarea */
 }
 
-.form-group input:focus {
+.form-group input {
+  height: 45px;
+  max-width: 22rem;
+}
+
+.form-group textarea {
+  height: 140px;
+  max-width: 25rem;
+}
+
+.form-group input:focus,
+.form-group textarea:focus {
   outline: none;
 }
 
@@ -310,37 +300,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>
+
+</style>

xroom-dashboard/src/components/TeamUser.vue

@@ -67,27 +67,21 @@
 </template>
 
 <script>
+
 import AddUserModal from '@/components/AddUserModal.vue';
 
+
 export default {
   name: 'UsersTab',
-  components: {
-    AddUserModal,
-  },
-  props: {
-    userList: {
-      type: Array,
-      default: () => [],
+    components: {
+        AddUserModal,
     },
-    teamMemberCapacity: {
-      type: Number,
-      default: 0,
+    props: {
+        userList: {
+        type: Array,
+        default: () => [],
+        },
     },
-    subscriptionCount: {
-      type: Number,
-      default: 0,
-    },
-  },
   data() {
     return {
       isAddUserModalVisible: false,
@@ -95,12 +89,6 @@ export default {
   },
   methods: {
     openAddUserModal() {
-      const remainingCapacity = this.subscriptionCount - this.teamMemberCapacity;
-      if (remainingCapacity <= 0) {
-        alert('ظرفیت تیم پر شده است. لطفاً اشتراک جدیدی خریداری کنید.');
-        this.goToBuySubscription();
-        return;
-      }
       this.isAddUserModalVisible = true;
     },
     closeAddUserModal() {
@@ -108,7 +96,6 @@ export default {
     },
     submitNewUser(user) {
       this.$emit('add-user', user);
-      
       this.closeAddUserModal();
     },
     goToBuySubscription() {
@@ -117,6 +104,7 @@ export default {
   },
 };
 </script>
+
 <style scoped>
 /* User Info Section */
 .user-info {

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

@@ -41,47 +41,41 @@
       </div>
       <!-- Tab Content -->
       <div v-if="activeTab === 'users'">
-        <TeamUser 
+      <TeamUser 
           :userList="userList" 
-          :teamMemberCapacity="teamMemberCapacity"
-          :subscriptionCount="subscriptionCount"
           @add-user="submitNewUser" 
           @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" />
+          <!-- Title Section -->
+          <div
+            class="access-header"
+            style="background: white; border-radius: 20px; padding: 20px;"
+          >
+            <img
+              :src="require('@/assets/img/lock Icon.png')"
+              alt="logout"
+              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" />
+            <!-- Subscription Button -->
+            <button class="primary-button">
+              <img
+                style="margin-left: 10px"
+                :src="require('@/assets/img/hand.png')"
+                alt="logout"
+              />
               انتخاب طرح اشتراکی
             </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>
-
+          <!-- Info Cards -->
+          <div class="info-cards">
+            <!-- Billing Info -->
             <div class="info-card">
               <h4>جزئیات صورتحساب</h4>
               <p>
@@ -94,19 +88,24 @@
                 ویرایش جزئیات صورتحساب
               </button>
             </div>
+            <!-- Membership Info -->
             <div class="info-card">
-              <h4>عضویت‌ها</h4>
+              <h4>عضویت ها</h4>
               <p>
                 هنوز مجوزی فعال نیست. کاربران شما نمی‌توانند از XRoom با واترمارک استفاده کنند.
               </p>
-              <button class="secondary-button">مدیریت عضویت‌ها</button>
+              <button class="secondary-button">مدیریت عضویت ها</button>
             </div>
+            <!-- Payment Method -->
             <div class="info-card">
               <h4>روش پرداخت</h4>
               <p>هیچ روش پرداختی برای صورتحساب مرتبط نیست.</p>
             </div>
           </div>
-          <EditBillingModal :isVisible="isBillingModalVisible" @close="closeBillingModal" />
+          <EditBillingModal
+            :isVisible="isBillingModalVisible"
+            @close="closeBillingModal"
+          />
         </div>
       </div>
       <div v-if="activeTab === 'details'" class="tab-content">
@@ -266,18 +265,16 @@ export default {
       currentUploadType: 'image',
       dialogTitle: 'آپلود فایل جدید',
       fileAccept: '*/*',
-      teamMemberCapacity: 0,
-      subscriptionCount: 0,
     };
   },
   created() {
     this.fetchUserData();
-    this.fetchTeamMemberInfo();
   },
   methods: {
     changeTab(tabName) {
       this.activeTab = tabName;
     },
+
     openBillingModal() {
       this.isBillingModalVisible = true;
     },
@@ -298,111 +295,14 @@ export default {
         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('خطا در ثبت اشتراک. لطفاً دوباره تلاش کنید.');
-      }
+    pay() {
+      alert(`پرداخت با موفقیت انجام شد برای ${this.memberCount} کاربر`);
+      this.selectedPlan = null;
     },
-    async fetchTeamMemberInfo() {
-      try {
-        const token = localStorage.getItem('token');
-        const response = await axios.get(`${this.baseUrl}/get_team_member_info`, {
-          headers: {
-            Authorization: `Token ${token}`,
-            'Content-Type': 'application/json',
-          },
-        });
-
-        this.teamMemberCapacity = response.data.data.team_member_capacity;
-        this.subscriptionCount = response.data.data.subscriptionCount;
-      } catch (error) {
-        console.error('خطا در دریافت اطلاعات اشتراک:', error);
-        alert('خطا در بارگذاری اطلاعات اشتراک. لطفاً دوباره تلاش کنید.');
-      }
-    },
-    async submitNewUser(newUser) {
-
-        console.log('اطلاعات کاربر جدید:', newUser);
-        
-        this.teamMemberCapacity++ ;
-
-      const remainingCapacity = this.subscriptionCount - this.teamMemberCapacity;
-      if (remainingCapacity <= 0) {
-        alert('ظرفیت تیم پر شده است. لطفاً اشتراک جدیدی خریداری کنید.');
-        this.activeTab = 'buy-subscription';
-        return;
-      }
-
-      try {
-        const token = localStorage.getItem('token');
-
-        await axios.post(
-          `${this.baseUrl}/add_teamMember/`,
-          newUser,
-          {
-            headers: {
-              Authorization: `Token ${token}`,
-              'Content-Type': 'application/json',
-            },
-          }
-        );
-
-
-        this.userList.push({
-          ...newUser,
-          avatar: 'https://models.readyplayer.me/681f59760bc631a87ad25172.png',
-          role: newUser.role || 'کاربر',
-          version: newUser.version || 'نسخه آزمایشی',
-        });
-
-
-        await this.fetchTeamMemberInfo();
-
-        alert('کاربر با موفقیت اضافه شد');
-      } catch (error) {
-        console.error('خطا در اضافه کردن کاربر:', error);
-        alert('خطا در اضافه کردن کاربر. لطفاً دوباره تلاش کنید.');
-      }
+    submitNewUser(newUser) {
+      console.log('کاربر جدید:', newUser);
+      alert('کاربر با موفقیت اضافه شد');
+      // می‌توانید اینجا کد مربوط به ارسال به API را اضافه کنید
     },
     handleBackdropClick(event) {
       if (event.target === this.$refs.filePreviewDialog) {
@@ -1632,6 +1532,11 @@ export default {
 }
 
 
+
+
+
+
+
 .plan-card {
   background-color: white;
   border: 1px solid #e2e8f0;
@@ -1656,22 +1561,6 @@ export default {
 }
 
 
-.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>