added team member

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>
@@ -104,6 +102,8 @@
 </template>
 
 <script>
+import axios from 'axios';
+
 export default {
   name: 'AddUserModal',
   props: {
@@ -115,35 +115,58 @@ 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 });
-      console.log('اطلاعات کاربر اضافه شده:', JSON.stringify(this.newUser, null, 2));
-      this.close();
+
+      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('خطا در افزودن کاربر');
+      });
     },
   },
 };
@@ -152,7 +175,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;
@@ -194,7 +217,7 @@ export default {
 }
 
 .popUp-header button {
-  background-color: inherit; /* استفاده از inherit برای حذف تکرار #101010 */
+  background-color: inherit;
   border: none;
   cursor: pointer;
 }
@@ -202,7 +225,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;
 }
 
@@ -220,7 +243,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;
@@ -242,28 +265,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;
 }
 
@@ -301,36 +311,36 @@ 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;
- }
+  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;
+  display: none;
 }
-
 </style>

xroom-dashboard/src/components/TeamUser.vue

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

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

@@ -41,41 +41,47 @@
       </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">
-          <!-- 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="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>
-            <!-- Subscription Button -->
-            <button class="primary-button">
-              <img
-                style="margin-left: 10px"
-                :src="require('@/assets/img/hand.png')"
-                alt="logout"
-              />
+            <button class="primary-button" @click="changeTab('buy-subscription')">
+              <img style="margin-left: 10px" :src="require('@/assets/img/hand.png')" alt="hand" />
               انتخاب طرح اشتراکی
             </button>
           </div>
-          <!-- Info Cards -->
-          <div class="info-cards">
-            <!-- Billing Info -->
+
+          <!-- 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>
@@ -88,24 +94,19 @@
                 ویرایش جزئیات صورتحساب
               </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">
@@ -265,16 +266,18 @@ 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;
     },
@@ -295,14 +298,111 @@ export default {
         total: base + tax,
       };
     },
-    pay() {
-      alert(`پرداخت با موفقیت انجام شد برای ${this.memberCount} کاربر`);
-      this.selectedPlan = null;
+    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('خطا در ثبت اشتراک. لطفاً دوباره تلاش کنید.');
+      }
     },
-    submitNewUser(newUser) {
-      console.log('کاربر جدید:', newUser);
-      alert('کاربر با موفقیت اضافه شد');
-      // می‌توانید اینجا کد مربوط به ارسال به API را اضافه کنید
+    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('خطا در اضافه کردن کاربر. لطفاً دوباره تلاش کنید.');
+      }
     },
     handleBackdropClick(event) {
       if (event.target === this.$refs.filePreviewDialog) {
@@ -1532,11 +1632,6 @@ export default {
 }
 
 
-
-
-
-
-
 .plan-card {
   background-color: white;
   border: 1px solid #e2e8f0;
@@ -1561,6 +1656,22 @@ 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>