From 7d1f68be541b025c778e65b52d475fcc9b610673 Mon Sep 17 00:00:00 2001
From: mi1468 <mahdi1468@gmail.com>
Date: Sun, 18 May 2025 17:15:35 +0330
Subject: [PATCH] added factor

---
 xroom-dashboard/src/assets/img/hand.png      | Bin 0 -> 436 bytes
 xroom-dashboard/src/assets/img/lock Icon.png | Bin 0 -> 1346 bytes
 xroom-dashboard/src/pages/dashboard/team.vue | 258 ++++++++++++++-----
 3 files changed, 200 insertions(+), 58 deletions(-)
 create mode 100644 xroom-dashboard/src/assets/img/hand.png
 create mode 100644 xroom-dashboard/src/assets/img/lock Icon.png

diff --git a/xroom-dashboard/src/assets/img/hand.png b/xroom-dashboard/src/assets/img/hand.png
new file mode 100644
index 0000000000000000000000000000000000000000..20e7ee9a15bcfc86a4977afe549ae907a2e803f0
GIT binary patch
literal 436
zcmV;l0ZaagP)<h;3K|Lk000e1NJLTq000;O000;W1^@s6;CDUv00009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH0ZB<jK~#7F#Z`e(
z!!Qg~dJMn_9-&M?Mqq=&1kDEN2I&T61TukPg0Ml^pxwZ{4uv>A$CW4tf2WJj{`WhQ
zoDlsbLI@3FXW%wufrvsZWJ83{%rRQBf<=gJVmQPb%KVnDg`C{Wco@ePtPI?9V&0^w
zD;j788HCc}jZv_cH1$<g?eW~xHArgUlY)Cwij;W8$?x!dN7RU0L{~CfB`0=>gOE1`
zqjSNm%^F~V37n1xnR-U7=`wO=--wIMn>jWBxtEjdqV=Ap23Q);T6qS31H>u5O!2MO
zAa05!LMt6o(+{9A;I}w(E7C6+%(@7<=NvxK*M+j)X!A)<(peTAYdQ_FmRejUPnt*3
z+-n7$2sR3?GuKWEK7M!j59Ss)jilz7<7i9{VS<lhkd4QAm)oOK8aX`p!o{Bs?zj)c
e3%c)({tKUeeW=&Ntv>Jo0000<MNUMnLSTYgb+bPJ

literal 0
HcmV?d00001

diff --git a/xroom-dashboard/src/assets/img/lock Icon.png b/xroom-dashboard/src/assets/img/lock Icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..c6c8db576a227f881986e83be8c8f62ce4475f18
GIT binary patch
literal 1346
zcmbW1{XY{30LJIFjl9HcyXixdgcBB4B8OyVVQ7UilS{74OG_WNk=Nb4)OtCm@>X<3
zG%RnmS=xxYEi5mSbXw-7mAt>r%Wn5C+z-$5{d}K4;K|1YqV;s(IsgDb598+(q9Rrm
zKcKd%UyK5MQ~)LUg<k>ybdCRu8la>MrW(~Qg`m9w^}Rd4s6_LeSAZ7)z`Cxx5v`?C
zF~-O1c&gg;X>1-C4cm%MnW(a~vP9hRalimA5zx6CJ+2N8pxiQ&pZ#-bk>@UH(WPBd
zu%XG^E<*cb>s9s|WCu76k)4-#6c=_mrF==*Dj$CwUtL>GVbi}<C_X(nM`71~RVo@f
zDh4KCSDM*nrcE+(*;iyhOr^IWmKFs(pwp*g4y>j*6^HWc_*{Mzt*$JsyPw$HKUdI~
z+Y{|hzu<O{Bih_-oefIvf}=a{Yp2_`(-{D=#pQ`m*+NF(R!c)g#AMu6$~(KyS~~f@
zyq{PrR5cgc3C@aW$K$-clNY<q4vef12Rbs1qM}(|_+ak0JnoF9?f#l??D{p<AB8(=
zBl$B@3{`2(i*W6j({|7`A1y7?>aJeNl||PQYWmMxPmCH%et^voBParrq=(-}n;CJA
zU*+hHI()F%7$%6@;+?0C>|J=Ou(Lf@fffPu7ORQs$rbb<oebY<m!-)D{5-k{_iHyZ
zIAW>;7l<Ep*GG(fKHRdxHJHfig3Sv)5f+ROUGue`>d5m@MDHtIWxP!qhFnqKO!*!s
zgy&8a!rKIoY~KA8A}Z!BuBK<Rwxi=q_`S0zVdxOwX&^&n-t4%u<XL%l!ca^(w{;wX
z9T@jX;Vouy3q86*3=}=FsQBwwK}Tbtx=rvk=8y+9Jv@N(&jRdY3~YvMnC`7b#iqWE
zZ3k^;vHp_b)8<2$*-zI!o6nj+sENZI7{?#9++~g$IB7T&3E!5^^6z7Mx#SQ`qIEY|
z^Uxwq7vjSt(}Jvkj2cB`vl#C(GO0n(R%*EYcB|41|7S_u#zL@L9zLc+wiODqXw28o
zZ_ykIs&rI3Xq*jWAb63hx@4^!wO14y9K*mnA8StDHrqC<C()6V^2K(p%kI~Cnb}EY
z>%ds{p+YfIb7~JnkHo<AFv71G`#aZwHVM8<POzP6lXti8Ilm}J18DGDEFmk&_W>X!
zK7lj4`wkoXOb`Onw=U5yb~SyYh3&l-RCRaua?FdbE*j$zA6+F%M}im(HWFOJi>HI@
z%+IOWgA85@$w4t)bq_z-OnMeK6`Z0`iIkxxzp%`LSNf8b<)(VM<<Iwr`lk&U**NCw
zg$0;&B<W5Ptnb5?t?+buc1}BT>ZK{mYMLG~g#_b~gTQ|7`+@|>R;B_4OZx=Pjq1F>
z5VRoNq>`@p@|Q~r@H13c^6t^b{*NAwMim(PleUXh-%}*Nl&0G7&DKmapKISlMIC|O
zOnyV%C$#^a9$0m1ncWUq)Ra#Ld+@AIcalS($CuomNXAwg)yq@C>J5pbjd6s+3y0gY
zdWj+293JyzC1ihs#nUsQ-3J?5%pSSizm1GtvK@TwweH86Mz-F**X9w1CLKH|V!BGZ
zLCYku1$oe76=Ii6EYBr5*4DYvZgdrR8vUq_c>=U#S^OWt(ZT}8MDB^9CTG56RF<ko
z#>JmR4C^}!IM(1cWU~O}AC=w7^dDm%mnoG(s`0S^$vW5m_H?+g47)Xkcn!s_{w={l
yNh|xut@s%w&2<#{ceDIGHHq6NP}=ES*_e~hxO`MfIl)(59sqMR(5K#;nEfv(TZB&l

literal 0
HcmV?d00001

diff --git a/xroom-dashboard/src/pages/dashboard/team.vue b/xroom-dashboard/src/pages/dashboard/team.vue
index 4a3b583..c9457d5 100644
--- a/xroom-dashboard/src/pages/dashboard/team.vue
+++ b/xroom-dashboard/src/pages/dashboard/team.vue
@@ -43,16 +43,26 @@
     :class="['tab-btn', activeTab === 'users' ? 'active' : '']"
     @click="activeTab = 'users'"
   >کاربران</button>
+   <button
+  :class="['tab-btn', activeTab === 'buy-subscription' ? 'active' : '']"
+  @click="activeTab = 'buy-subscription'"
+>
+  خرید اشتراک
+</button>
   <button
     :class="['tab-btn', activeTab === 'membership' ? 'active' : '']"
     @click="activeTab = 'membership'"
-  >عضویت</button>
+  >اشتراک ها</button>
   <button
     :class="['tab-btn', activeTab === 'details' ? 'active' : '']"
     @click="activeTab = 'details'"
   >جزئیات</button>
+ 
+
 </div>
 
+
+
 <!-- Tab Content -->
 <div v-if="activeTab === 'users'">
   <div class="card license-card">
@@ -93,18 +103,30 @@
 <div v-if="activeTab === 'membership'" class="tab-content">
   <div class="access-container">
   <!-- Title Section -->
-  <div class="access-header">
+  <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>
-    <img src="https://cdn-icons-png.flaticon.com/512/1828/1828489.png" alt="Lock Icon" class="lock-icon" />
+  
+
+      <!-- Subscription Button -->
+      <button class="primary-button">
+    <img style="margin-left:10px" :src="require('@/assets/img/hand.png')" alt="logout"  />
+        
+         انتخاب طرح اشتراکی
+      </button>
+
+
   </div>
 
-  <!-- Subscription Button -->
-  <button class="primary-button">
-    👆 انتخاب طرح اشتراکی
-  </button>
 
   <!-- Info Cards -->
   <div class="info-cards">
@@ -143,12 +165,90 @@
 </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>
+
+
+
+
+
 
 
 
@@ -198,29 +298,24 @@
     <p style="    line-height: 45px;">کاربر یک ایمیل دعوت برای فعال کردن حساب خود دریافت می‌کند.</p>
     <form class="form-fields" @submit.prevent="submitNewUser">
       <div class="form-row">
-        <label>نام و نام خانوادگی</label>
-        <input v-model="newUser.name" required />
+        <label>نام  </label>
+        <input v-model="newUser.first_name" required />
       </div>
       <div class="form-row">
-        <label>ایمیل</label>
-        <input v-model="newUser.email" type="email" required />
+        <label>نام خانوادگی</label>
+        <input v-model="newUser.last_name" required />
       </div>
+      
+      
       <div class="form-row">
         <label>شماره تماس</label>
         <input v-model="newUser.phone" />
       </div>
       <div class="form-row">
-        <label>عنوان شغلی</label>
-        <input v-model="newUser.jobTitle" />
-      </div>
-      <div class="form-row switch-row">
-        <label>مدیر</label>
-        <input type="checkbox" v-model="newUser.isAdmin" />
-      </div>
-      <div class="form-row switch-row">
-        <label>مجوز</label>
-        <input type="checkbox" v-model="newUser.hasAccess" />
+        <label>پسورد </label>
+        <input type="password" v-model="newUser.password" />
       </div>
+      
       <div class="dialog-actions">
         <button type="submit" class="confirm-btn">تایید</button>
         <button type="button" class="cancel-btn" @click="closeAddUserDialog">بازگشت</button>
@@ -234,6 +329,13 @@
 
 
 
+
+
+
+ 
+
+
+
 </template>
 
 <script>
@@ -257,15 +359,27 @@ export default {
   },
   data() {
     return {
+      memberCount: 5,
+      availableMemberOptions: [5, 10, 20, 100],
+
       newUser: {
-  name: '',
-  email: '',
-  phone: '',
-  jobTitle: '',
-  isAdmin: false,
-  hasAccess: false
-}
-,
+      first_name: '',
+      last_name: '',
+      phone: '',
+      password: '',
+      isAdmin: false,
+      hasAccess: false,
+
+      }
+      ,
+
+    selectedPlan: null,
+    plans: {
+      weekly: { name: 'هفتگی', price: 250000 },
+      monthly: { name: 'ماهانه', price: 670000 },
+      yearly: { name: 'سالانه', price: 4600000 }
+    },
+
       // ... existing data ...
       userList: [
   {
@@ -329,6 +443,31 @@ export default {
     this.fetchUserData();
   },
   methods: {
+
+    
+    
+     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
+  };
+      } 
+    ,
+  pay() {
+  alert(`پرداخت با موفقیت انجام شد برای ${this.memberCount} کاربر`);
+  this.selectedPlan = null;
+},
+
+
+
     openAddUserDialog() {
   this.$refs.addUserDialog.showModal();
 },
@@ -654,6 +793,7 @@ submitNewUser() {
     display: flex;
     flex-direction: column;
     gap: 32px;
+    min-height: 80vh;
   }
   
   .header-row {
@@ -1337,7 +1477,7 @@ submitNewUser() {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
-  padding: 20px;
+ 
   position: relative;
 }
 
@@ -1346,6 +1486,7 @@ submitNewUser() {
   display: flex;
   flex-direction: column;
   gap: 6px;
+  margin-top: 20px;
 }
 
 .user-role {
@@ -1365,17 +1506,7 @@ submitNewUser() {
   align-self: flex-end;
   margin-top: 10px;
 }
-
-.user-footer {
-  background: #3a57e8;
-  color: #fff;
-  border-radius: 0 0 12px 12px;
-  padding: 10px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-top: 20px;
-}
+ 
 
 .user-actions button {
   background: none;
@@ -1393,7 +1524,8 @@ submitNewUser() {
   font-weight: 600;
   font-size: 14px;
   border: 2px dashed #3a57e8;
-  height: 275px;
+  width: 440px;
+    height: 158px;
 }
 
 .add-text {
@@ -1486,6 +1618,7 @@ submitNewUser() {
   font-family: IRANSansXFaNum, sans-serif;
   padding: 20px;
   background-color: #f9f9fb;
+      width: -webkit-fill-available;
 }
 
 .access-header {
@@ -1577,19 +1710,7 @@ submitNewUser() {
 
 
 
-
-
-.user-card {
-  background: #fff;
-  border-radius: 16px;
-  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
-  width: 440px;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  padding: 20px;
-  position: relative;
-}
+ 
 
 .user-card-header {
   display: flex;
@@ -1600,7 +1721,7 @@ submitNewUser() {
 
 .user-avatar {
   width: 70px;
-  height: 70px;
+      height: 86px;
   border-radius: 50%;
   object-fit: cover;
   flex-shrink: 0;
@@ -1610,7 +1731,7 @@ submitNewUser() {
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
-  align-items: flex-end;
+  
   flex: 1;
   text-align: right;
   gap: 4px;
@@ -1634,7 +1755,7 @@ submitNewUser() {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-top: 20px;
+  /* margin-top: 20px; */
 }
 
 .user-actions button {
@@ -1649,7 +1770,28 @@ submitNewUser() {
 
 
 
+.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;
+}