From b0c893caaa56b2e7a812670236b2595482203fdd Mon Sep 17 00:00:00 2001
From: Diyar Akhgar <diyar.akhgar@gmail.com>
Date: Mon, 26 May 2025 19:07:57 +0330
Subject: [PATCH] add edit Invoice

---
 .../src/components/CreateSpaceModal.vue       |   3 -
 .../src/components/EditBillingModal.vue       | 359 ++++++++++++++++++
 xroom-dashboard/src/pages/dashboard/team.vue  |  82 +---
 3 files changed, 373 insertions(+), 71 deletions(-)
 create mode 100644 xroom-dashboard/src/components/EditBillingModal.vue

diff --git a/xroom-dashboard/src/components/CreateSpaceModal.vue b/xroom-dashboard/src/components/CreateSpaceModal.vue
index 17911e7..cd2aaa3 100644
--- a/xroom-dashboard/src/components/CreateSpaceModal.vue
+++ b/xroom-dashboard/src/components/CreateSpaceModal.vue
@@ -43,7 +43,6 @@
               v-model="form.name"
               type="text"
               required
-              placeholder="نام فضا را وارد کنید"
             />
           </div>
           <div class="form-group">
@@ -53,7 +52,6 @@
               v-model.number="form.capacity"
               type="number"
               required
-              placeholder="ظرفیت (تعداد کاربر)"
             />
           </div>
           <div class="form-group">
@@ -62,7 +60,6 @@
               id="spaceType"
               v-model="form.features"
               required
-              placeholder="امکانات فضا را وارد کنید"
             ></textarea>
           </div>
         </form>
diff --git a/xroom-dashboard/src/components/EditBillingModal.vue b/xroom-dashboard/src/components/EditBillingModal.vue
new file mode 100644
index 0000000..6e83460
--- /dev/null
+++ b/xroom-dashboard/src/components/EditBillingModal.vue
@@ -0,0 +1,359 @@
+<template>
+  <div v-if="isVisible" class="modal-overlay" @click="$emit('close')">
+    <div class="modal-content" @click.stop>
+      <div class="popUp-header">
+        <h2>ویرایش صورت حساب</h2>
+        <button @click="$emit('close')">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="35"
+            height="35"
+            viewBox="0 0 32 32"
+            fill="none"
+          >
+            <rect x="0.5" y="0.5" width="31" height="31" rx="7.5" fill="#101010" />
+            <rect x="0.5" y="0.5" width="31" height="31" rx="7.5" stroke="#E2DEE9" />
+            <path
+              d="M21 11L11 21"
+              stroke="white"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
+            <path
+              d="M11 11L21 21"
+              stroke="white"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
+          </svg>
+        </button>
+      </div>
+      <div class="popUp-title">
+        <h2>اطلاعات صورت حساب</h2>
+        <span>لطفا جزئیات صورت حساب خود را وارد کنید تا صورت حساب خود را تنظیم کنید.</span>
+      </div>
+      <div class="popUp-objects">
+        <form @submit.prevent="handleSubmit" autocomplete="off">
+          <div class="form-group" style="justify-content: normal;">
+            <span>سفارش به عنوان یک شرکت</span>
+            <input
+              type="checkbox"
+              id="toggle"
+              class="checkbox"
+              v-model="form.isCompany"
+            />
+            <label for="toggle" class="switch"></label>
+          </div>
+          <div class="form-group">
+            <label for="name">نام</label>
+            <input
+              id="name"
+              v-model="form.name"
+              type="text"
+              required
+            />
+          </div>
+          <div class="form-group">
+            <label for="address">آدرس</label>
+            <input
+              id="address"
+              v-model="form.address"
+              type="text"
+              required
+            />
+          </div>
+          <div class="form-group">
+            <label for="city">شهر</label>
+            <input
+              id="city"
+              v-model="form.city"
+              type="text"
+              required
+            />
+          </div>
+          <div class="form-group">
+            <label for="postalCode">کدپستی</label>
+            <input
+              id="postalCode"
+              v-model="form.postalCode"
+              type="text"
+              required
+            />
+          </div>
+          <div class="form-group">
+            <label for="phone">شماره تماس</label>
+            <input
+              id="phone"
+              v-model="form.phone"
+              type="tel"
+              required
+            />
+          </div>
+          <div class="form-group">
+            <label for="email">ایمیل</label>
+            <input
+              id="email"
+              v-model="form.email"
+              type="email"
+              required
+            />
+          </div>
+        </form>
+      </div>
+      <div class="form-actions">
+        <button type="button" class="cancel-btn" @click="$emit('close')">بازگشت</button>
+        <button type="submit" class="submit-btn" @click="handleSubmit">تایید</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'CreateSpaceModal',
+  props: {
+    isVisible: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      form: {
+        isCompany: false,
+        name: '',
+        address: '',
+        city: '',
+        postalCode: '',
+        phone: '',
+        email: '',
+      },
+    };
+  },
+  methods: {
+    handleSubmit() {
+      console.log('اطلاعات صورت حساب:', JSON.stringify(this.form, null, 2));
+    /*  console.log('اطلاعات صورت حساب:', this.form);  */
+      this.$emit('close');
+      this.resetForm();
+    },
+    resetForm() {
+      this.form = {
+        isCompany: false,
+        name: '',
+        address: '',
+        city: '',
+        postalCode: '',
+        phone: '',
+        email: '',
+      };
+    },
+  },
+};
+</script>
+
+
+<style scoped>
+
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+}
+
+.modal-content {
+  background: #F7F5FA;
+  border-radius: 8px;
+  width: 100%;
+  max-width: 700px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  direction: rtl;
+  border-radius: 20px;
+  padding-bottom: 1.5rem;
+  height: 95vh;
+  overflow-y: auto;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+
+.modal-content::-webkit-scrollbar {
+  display: none;
+}
+.popUp-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    background-color: #101010;
+    color: #fff;
+    width: 100%;
+    padding: 20px 26px;
+    margin-bottom: 1.5rem;
+    border-radius: 20px 20px 0px 0px;
+}
+
+.popUp-header h2 {
+  font-size: 22px;
+}
+
+.popUp-header button {
+    background-color: #101010;
+    border: none;
+    cursor: pointer;
+}
+
+.popUp-title {
+    display: flex;
+    flex-direction: column;
+    align-items: start;
+    padding: 20px;
+    padding-right: 50px;
+}
+
+.popUp-title h2 {
+    font-size: 20px;
+    font-weight: 600;
+    color: #101010;
+} 
+
+.popUp-title span {
+    font-size: 16px;
+    font-weight: 500;
+    color: #4F5A69;
+    margin-top: 1rem;
+}
+
+.popUp-objects {
+    margin-top: 1rem !important;
+    padding: 20px;
+    background-color: #FFFFFF;
+    border-radius: 16px;
+    width: 100%;
+    max-width: 620px;
+    display: block;
+    margin: auto;
+}
+
+.form-group {
+  margin-bottom: 3rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.form-group label {
+  display: block;
+  font-weight: 500;
+  width: 50%;
+  font-size: 16px;
+}
+
+.form-group input {
+  height: 45px;
+  width: 100%;
+  padding: 8px;
+  border: 1px solid #718096;
+  border-radius: 8px;
+  font-size: 1rem;
+  max-width: 22rem
+}
+
+.form-group textarea {
+  height: 140px;
+  width: 100%;
+  padding: 8px;
+  border: 1px solid #718096;
+  border-radius: 8px;
+  font-size: 1rem;
+  max-width: 25rem;
+  resize: none;
+}
+
+.form-group input:focus {
+    outline: none;
+}
+
+.form-group textarea:focus {
+    outline: none;
+}
+
+.form-actions {
+  display: flex;
+  justify-content: space-between;
+  padding: 20px;
+  padding-bottom: 0;
+  width: 100%;
+  max-width: 620px;
+  margin: auto;
+}
+
+.submit-btn,
+.cancel-btn {
+  text-align: center;
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+  height: 50px;
+  width: 47%;
+}
+
+.submit-btn {
+  background-color: #3A57E8;
+  color: white;
+  font-weight: 500;
+  font-size: 18px;
+}
+
+.cancel-btn {
+  background-color: #EBEEFD;
+  color: #101010;
+  font-weight: 500;
+  font-size: 18px;
+}
+
+/* checkbox toggler */
+
+.switch { 
+    position : relative ;
+    display : inline-block;
+    width: 60px !important;
+    height: 25px;
+    background-color: #CCCCCC;
+    border-radius: 20px;
+    margin-right: 4rem;
+ }
+
+ .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; 
+}
+.checkbox:checked + .switch {
+    background-color: #3a57e8;
+}
+
+.checkbox { 
+    display : none;
+}
+
+
+</style>
\ No newline at end of file
diff --git a/xroom-dashboard/src/pages/dashboard/team.vue b/xroom-dashboard/src/pages/dashboard/team.vue
index 41ca7dc..8fa7156 100644
--- a/xroom-dashboard/src/pages/dashboard/team.vue
+++ b/xroom-dashboard/src/pages/dashboard/team.vue
@@ -15,28 +15,6 @@
 در این بخش به شما امکان می‌دهد تا اتاق‌ها، فایل‌ها و جلسات را با همکاران خود به اشتراک بگذارید. در این بخش می‌توانید تیم خود را مدیریت کنید.        </p>
       </div>
 
-
-     
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
 <!-- Tab Buttons -->
 <div class="tab-buttons">
   <button
@@ -139,7 +117,7 @@
         شماره تماس: ۰۹۳۷۹۸۹۸۶۲۳<br />
         ایمیل: aminimperator@gmail.com
       </p>
-      <button class="secondary-button">ویرایش جزئیات صورتحساب</button>
+      <button class="secondary-button" @click="openBillingModal">ویرایش جزئیات صورتحساب</button>
     </div>
 
     <!-- Membership Info -->
@@ -155,6 +133,10 @@
       <p>هیچ روش پرداختی برای صورتحساب مرتبط نیست.</p>
     </div>
   </div>
+    <EditBillingModal
+  :isVisible="isBillingModalVisible"
+  @close="closeBillingModal"
+  />
 </div>
 
 </div>
@@ -168,15 +150,6 @@
 <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
@@ -191,16 +164,6 @@
       </select>
     </div>
 
-
-
-
-
-
-
-
-
-
-
     <h3 style="text-align: center; margin-bottom: 20px;">لطفا نوع اشتراک خود را انتخاب کنید</h3>
 
     <div style="display: flex; justify-content: center; gap: 20px; flex-wrap: wrap;">
@@ -246,30 +209,6 @@
 </div>
 
 
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-      
-
- 
-
-
-     
   </div>
   </div>
 
@@ -316,6 +255,7 @@ import 'video.js/dist/video-js.css';
 import '@videojs/themes/dist/sea/index.css';
 import '@google/model-viewer'
 import SidebarMenu from '@/components/SidebarMenu.vue'
+import EditBillingModal from '@/components/EditBillingModal.vue';
 import axios from 'axios';
 
  
@@ -326,12 +266,13 @@ export default {
   name: 'DashboardPage',
   components: {
     SidebarMenu,
-    
+    EditBillingModal,
     AppHeader,
 
   },
   data() {
     return {
+      isBillingModalVisible: false,
       memberCount: 5,
       availableMemberOptions: [5, 10, 20, 100],
 
@@ -416,7 +357,12 @@ export default {
     this.fetchUserData();
   },
   methods: {
-
+    openBillingModal() {
+      this.isBillingModalVisible = true;
+    },
+    closeBillingModal() {
+      this.isBillingModalVisible = false;
+    },
     
     
      selectPlan(planKey) {