From ce39bc4f963ebec421d3d7e3a54e792c904deedd Mon Sep 17 00:00:00 2001
From: mi1468 <mahdi1468@gmail.com>
Date: Tue, 27 May 2025 15:33:47 +0330
Subject: [PATCH 1/2] api space page

---
 .../src/components/CreateSpaceModal.vue       | 509 +++++++++--------
 .../src/pages/dashboard/Spaces.vue            | 511 +++++++-----------
 2 files changed, 479 insertions(+), 541 deletions(-)

diff --git a/xroom-dashboard/src/components/CreateSpaceModal.vue b/xroom-dashboard/src/components/CreateSpaceModal.vue
index cd2aaa3..3b9042e 100644
--- a/xroom-dashboard/src/components/CreateSpaceModal.vue
+++ b/xroom-dashboard/src/components/CreateSpaceModal.vue
@@ -1,118 +1,163 @@
 <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 v-if="isVisible" class="modal-overlay">
+    <div class="modal-content">
+      <button class="close-btn" @click="closeModal">✕</button>
+      <h2 class="modal-title">انتخاب فضای اختصاصی</h2>
+      
+      <!-- Space Selection Cards -->
+      <div v-if="spaces.length > 0" class="space-selection">
+        <div 
+          v-for="(space, index) in spaces" 
+          :key="index" 
+          class="space-card" 
+          @click="selectSpace(space)"
+          :class="{ selected: selectedSpace === space }"  
+        >
+          <img :src="'http://my.xroomapp.com:8000' + space.img" alt="فضای اختصاصی" class="space-img" />
+          <div class="space-info">
+            <h3 class="space-name">{{ space.name }}</h3>
+            <p class="space-type">{{ space.type }}</p>
+            <p class="space-capacity">حداکثر: {{ space.capacity }} کاربر</p> <!-- Map maxPerson -->
+          </div>
+        </div>
       </div>
-      <div class="popUp-title">
-        <h2>اضافه کردن فضای جدید</h2>
-        <span>برای ایجاد فضای جدید فرم زیر را تکمیل نمایید.</span>
+
+      <div v-else class="loading-message">
+        <p>در حال بارگذاری فضاها...</p>
       </div>
-      <div class="popUp-objects">
-        <form @submit.prevent="handleSubmit">
-          <div class="form-group">
-            <label for="spaceName">نام:</label>
-            <input
-              id="spaceName"
-              v-model="form.name"
-              type="text"
-              required
-            />
-          </div>
-          <div class="form-group">
-            <label for="spaceCapacity">ظرفیت:</label>
-            <input
-              id="spaceCapacity"
-              v-model.number="form.capacity"
-              type="number"
-              required
-            />
-          </div>
-          <div class="form-group">
-            <label for="spaceType">امکانات فضای مد نظر:</label>
-            <textarea
-              id="spaceType"
-              v-model="form.features"
-              required
-            ></textarea>
-          </div>
+
+      <!-- Form to enter additional information -->
+      <div v-if="selectedSpace" class="space-form">
+        <h3>اطلاعات فضا</h3>
+        <form @submit.prevent="submitForm">
+          <label for="name">نام:</label>
+          <input type="text" v-model="form.name" id="name" required />
+          
+          <label for="capacity">ظرفیت:</label>
+          <input type="number" v-model="form.capacity" id="capacity" required />
+          
+          <label for="description">توضیحات:</label>
+          <textarea v-model="form.description" id="description" required></textarea>
+          
+          <button type="submit" class="submit-btn">تایید</button>
         </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>
+import axios from 'axios'; // Import Axios for API requests
+
 export default {
-  name: 'CreateSpaceModal',
   props: {
-    isVisible: {
-      type: Boolean,
-      default: false,
-    },
+    isVisible: Boolean,
   },
   data() {
     return {
+      spaces: [], // To store the fetched spaces
+      selectedSpace: null, // Store the selected space
       form: {
         name: '',
-        capacity: null,
-        features: '',
+        capacity: '',
+        description: '',  // New field for description
       },
     };
   },
   methods: {
-    handleSubmit() {
-      if (this.form.name && this.form.capacity && this.form.features) {
-        console.log('داده‌های فرم:', {
-          name: this.form.name,
-          capacity: this.form.capacity,
-          features: this.form.features,
-        });
-        this.form = {
-          name: '',
-          capacity: null,
-          features: '',
-        };
-        this.$emit('close');
+    closeModal() {
+      this.$emit('close'); // Emit the close event to parent
+    },
+    selectSpace(space) {
+      this.selectedSpace = space; // Set the selected space
+    },
+    async fetchSpaces() {
+      try {
+        const token = localStorage.getItem('token'); // Retrieve the token from localStorage
+        if (!token) {
+          console.error('No token found!');
+          return;
+        }
+
+        const response = await axios.get(
+          'http://my.xroomapp.com:8000/get_assigned_assetbundle_rooms', // API endpoint
+          {
+            headers: {
+              Authorization: `Token ${token}`,
+              'Content-Type': 'application/json',
+            },
+          }
+        );
+
+        // Log the response to check if `maxPerson` is included in the API response
+        console.log(response.data); // Log the API response to the console
+
+        // Store the spaces data in the spaces array
+        this.spaces = response.data.assetbundle_rooms.map(room => ({
+          name: room.name,
+          img: room.img,  // Assuming 'img' exists in the API response
+          capacity: room.maxPerson, // Map maxPerson to capacity
+          type: room.Private ? 'Private' : 'Public', // Adjust if you have a different field
+          maxPerson: room.maxPerson, // Store maxPerson for display
+          id: room.id, // Store the room id for space selection
+        }));
+      } catch (error) {
+        console.error('Error fetching spaces:', error);
+      }
+    },
+    async submitForm() {
+      // Collect data to be sent to the API
+      const spaceData = {
+        assetBundleRoomId: this.selectedSpace.id,  // Use selected space ID (the room ID)
+        name: this.form.name,
+        description: this.form.description,  // Include description from form
+        capacity: this.form.capacity,
+      };
+
+      try {
+        const token = localStorage.getItem('token'); // Retrieve the token from localStorage
+        if (!token) {
+          console.error('No token found!');
+          return;
+        }
+
+        // Make POST request to add the space
+        const response = await axios.post(
+          'http://my.xroomapp.com:8000/add_space',  // API endpoint to add space
+          spaceData,
+          {
+            headers: {
+              Authorization: `Token ${token}`,  // Pass the token
+              'Content-Type': 'application/json',
+            },
+          }
+        );
+
+        // Log the response from the API
+        console.log(response.data);
+
+        // Close the modal and emit success
+        this.$emit('submit', response.data);  // Pass the response data to the parent
+        this.closeModal(); // Close the modal
+
+      } catch (error) {
+        console.error('Error submitting form:', error);
+        alert('خطا در ارسال اطلاعات، لطفا دوباره تلاش کنید');
+      }
+    },
+  },
+  watch: {
+    isVisible(newVal) {
+      if (newVal) {
+        this.fetchSpaces(); // Fetch spaces only when the modal becomes visible
       }
     },
   },
 };
 </script>
 
-
-
 <style scoped>
+/* Styling for the modal */
 .modal-overlay {
   position: fixed;
   top: 0;
@@ -123,156 +168,176 @@ export default {
   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: max-content;
-  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: 25rem
-}
-
-.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;
+  background: white;
   padding: 20px;
-  padding-bottom: 0;
+  border-radius: 10px;
+  max-width: 600px;
   width: 100%;
-  max-width: 620px;
-  margin: auto;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
 }
 
-.submit-btn,
-.cancel-btn {
-  text-align: center;
+.close-btn {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  background: none;
   border: none;
-  border-radius: 8px;
+  font-size: 24px;
   cursor: pointer;
-  height: 50px;
-  width: 47%;
+}
+
+.modal-title {
+  font-size: 20px;
+  font-weight: 600;
+  color: #3A57E8;
+  text-align: center;
+  margin-bottom: 20px;
+}
+
+.space-selection {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+  justify-content: space-between;
+  margin-bottom: 20px;
+}
+
+.space-card {
+  background: #fff;
+  border-radius: 10px;
+  overflow: hidden;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
+  width: 150px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.space-card:hover {
+  transform: scale(1.05);
+}
+
+/* Add selected class styles */
+.space-card.selected {
+  border: 2px solid #3A57E8;
+  box-shadow: 0 4px 8px rgba(58, 87, 232, 0.5); /* Blue border and shadow */
+}
+
+.space-img {
+  width: 100%;
+  height: 120px;
+  object-fit: cover;
+  border-bottom: 1px solid #ddd;
+}
+
+.space-info {
+  padding: 10px;
+  text-align: center;
+}
+
+.space-name {
+  font-size: 16px;
+  font-weight: 600;
+  color: #444;
+  margin: 5px 0;
+}
+
+.space-type, .space-capacity {
+  font-size: 14px;
+  color: #718096;
+}
+
+.loading-message {
+  text-align: center;
+  font-size: 16px;
+  color: #718096;
+}
+
+.space-form {
+  margin-top: 20px;
+}
+
+.space-form label {
+  display: block;
+  margin-bottom: 5px;
+  font-size: 14px;
+}
+
+.space-form input, .space-form textarea {
+  width: 100%;
+  padding: 8px;
+  margin-bottom: 15px;
+  border: 1px solid #ccc;
+  border-radius: 5px;
 }
 
 .submit-btn {
   background-color: #3A57E8;
   color: white;
-  font-weight: 500;
-  font-size: 18px;
+  padding: 10px;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  font-size: 16px;
 }
 
-.cancel-btn {
-  background-color: #EBEEFD;
-  color: #101010;
-  font-weight: 500;
-  font-size: 18px;
+.submit-btn:hover {
+  background-color: #2c48b4;
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+/* Modal styling */
+.create-space-modal {
+  position: fixed; 
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent backdrop */
+  z-index: 9999; /* Ensure it's above other content */
+}
+
+/* Modal content */
+.modal-content {
+  background-color: #fff;
+  border-radius: 12px;
+  padding: 20px;
+  max-width: 600px;
+  width: 100%;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
+  z-index: 10000; /* Higher than backdrop */
+}
+
+/* Add transition for smooth opening/closing */
+.create-space-modal-enter-active, .create-space-modal-leave-active {
+  transition: opacity 0.3s ease;
+}
+
+.create-space-modal-enter, .create-space-modal-leave-to {
+  opacity: 0;
 }
 </style>
\ No newline at end of file
diff --git a/xroom-dashboard/src/pages/dashboard/Spaces.vue b/xroom-dashboard/src/pages/dashboard/Spaces.vue
index 52b1c11..6ce69a4 100644
--- a/xroom-dashboard/src/pages/dashboard/Spaces.vue
+++ b/xroom-dashboard/src/pages/dashboard/Spaces.vue
@@ -14,182 +14,54 @@
         </p>
       </div>
 
-      <!-- Page Objects -->
-      <div>
-        <!-- Sharing Filter -->
-        <div class="filter-section">
-          <div class="sharing-filters">
-            <span style="font-size: 17px; font-weight: 600;">فیلتر اشتراک‌گذاری</span>
-            <div class="filter-buttons">
-              <button
-                v-for="filter in sharingFilters"
-                :key="filter.value"
-                :class="activeSharingFilter === filter.value ? 'active-filter' : 'disable-filter'"
-                @click="setActiveSharingFilter(filter.value)"
-              >
-                {{ filter.label }}
-              </button>
+      <!-- Add Space Button -->
+      <button class="add-space" @click="openCreateSpaceModal">
+        + <span style="margin-right: 0.5rem;">اضافه کردن فضای اختصاصی</span>
+      </button>
+
+     
+
+      <!-- Spaces -->
+      <div v-if="filteredSpaces.length > 0 " style="z-index: 0;">
+        <swiper
+          :slidesPerView="3.6"
+          :spaceBetween="30"
+          :pagination="{ clickable: false }"
+          :modules="modules"
+          class="mySwiper"
+        >
+          <swiper-slide v-for="(space, index) in filteredSpaces" :key="index" class="card">
+            <img :src="'http://my.xroomapp.com:8000' + space.img" alt="تصویر فضا" />
+            <div class="card-texts">
+              <h2>{{ space.name }}</h2>
+              <p class="space-capacity">
+                حداکثر: {{ space.capacity }} کاربر
+              </p>
+              <p class="space-type">
+                {{ space.type }}
+              </p>
             </div>
-          </div>
-          <div class="space-type-filter">
-            <span style="font-size: 17px; font-weight: 600;">فیلتر نوع فضا</span>
-            <div class="filter-buttons">
-              <button
-                v-for="filter in spaceTypeFilters"
-                :key="filter.value"
-                :class="activeSpaceTypeFilter === filter.value ? 'active-filter' : 'disable-filter'"
-                @click="setActiveSpaceTypeFilter(filter.value)"
-              >
-                {{ filter.label }}
-              </button>
-            </div>
-          </div>
-        </div>
-
-        <!-- Add Space Button -->
-        <button class="add-space" @click="openCreateSpaceModal">
-          + <span style="margin-right: 0.5rem;">اضافه کردن فضای اختصاصی</span>
-        </button>
-
-        <!-- Create Space Modal -->
-        <CreateSpaceModal
-          :isVisible="isCreateSpaceModalVisible"
-          @close="closeCreateSpaceModal"
-        />
-
-        <!-- Spaces -->
-        <div v-if="filteredSpaces.length > 0">
-          <swiper
-            :slidesPerView="3.6"
-            :spaceBetween="30"
-            :pagination="{ clickable: false }"
-            :modules="modules"
-            class="mySwiper"
-          >
-            <swiper-slide v-for="(space, index) in filteredSpaces" :key="index" class="card">
-              <img :src="space.image" alt="تصویر فضا" />
-              <div class="card-texts">
-                <h2>{{ space.name }}</h2>
-                <p class="space-capacity">
-                    <span style="margin-left: 4px;">
-                    <svg
-                        xmlns="http://www.w3.org/2000/svg"
-                        width="16"
-                        height="17"
-                        viewBox="0 0 16 17"
-                        fill="none"
-                    >
-                        <g clip-path="url(#clip0_622_1334)">
-                        <path
-                            d="M3.33203 5.16667C3.33203 5.87391 3.61298 6.55219 4.11308 7.05228C4.61318 7.55238 5.29145 7.83333 5.9987 7.83333C6.70594 7.83333 7.38422 7.55238 7.88432 7.05228C8.38441 6.55219 8.66536 5.87391 8.66536 5.16667C8.66536 4.45942 8.38441 3.78115 7.88432 3.28105C7.38422 2.78095 6.70594 2.5 5.9987 2.5C5.29145 2.5 4.61318 2.78095 4.11308 3.28105C3.61298 3.78115 3.33203 4.45942 3.33203 5.16667Z"
-                            stroke="#718096"
-                            stroke-width="1.5"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                        />
-                        <path
-                            d="M2 14.5V13.1667C2 12.4594 2.28095 11.7811 2.78105 11.281C3.28115 10.781 3.95942 10.5 4.66667 10.5H7.33333C8.04058 10.5 8.71885 10.781 9.21895 11.281C9.71905 11.7811 10 12.4594 10 13.1667V14.5"
-                            stroke="#718096"
-                            stroke-width="1.5"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                        />
-                        <path
-                            d="M10.668 2.58667C11.2416 2.73354 11.75 3.06714 12.1131 3.53488C12.4761 4.00262 12.6732 5.17 12.6732 5.17C12.6732 5.76212 12.4761 6.33739 12.1131 6.80513C11.75 7.27287 11.2416 7.60647 10.668 7.75334"
-                            stroke="#718096"
-                            stroke-width="1.5"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                        />
-                        <path
-                            d="M14 14.5V13.1666C13.9966 12.5781 13.7986 12.0072 13.4368 11.5429C13.0751 11.0786 12.5699 10.7471 12 10.6"
-                            stroke="#718096"
-                            stroke-width="1.5"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                        />
-                        </g>
-                        <defs>
-                        <clipPath id="clip0_622_1334">
-                            <rect width="16" height="16" fill="white" transform="translate(0 0.5)" />
-                        </clipPath>
-                        </defs>
-                    </svg>
-                    </span>
-                    حداکثر: {{ space.capacity }} کاربر
-                </p>
-                <p class="space-type">
-                    <span style="margin-left: 4px;">
-                        <svg
-                            xmlns="http://www.w3.org/2000/svg"
-                            width="16"
-                            height="17"
-                            viewBox="0 0 16 17"
-                            fill="none"
-                        >
-                            <path
-                            d="M4 15.1667V3.16671C4 2.81309 4.14048 2.47395 4.39052 2.2239C4.64057 1.97385 4.97971 1.83337 5.33333 1.83337H10.6667C11.0203 1.83337 11.3594 1.97385 11.6095 2.2239C11.8595 2.47395 12 2.81309 12 3.16671V15.1667H4Z"
-                            stroke="#3A57E8"
-                            stroke-width="1.25"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            />
-                            <path
-                            d="M3.9987 8.5H2.66536C2.31174 8.5 1.9726 8.64048 1.72256 8.89052C1.47251 9.14057 1.33203 9.47971 1.33203 9.83333V13.8333C1.33203 14.187 1.47251 14.5261 1.72256 14.7761C1.9726 15.0262 2.31174 15.1667 2.66536 15.1667H3.9987"
-                            stroke="#3A57E8"
-                            stroke-width="1.25"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            />
-                            <path
-                            d="M12 6.5H13.3333C13.687 6.5 14.0261 6.64048 14.2761 6.89052C14.5262 7.14057 14.6667 7.47971 14.6667 7.83333V13.8333C14.6667 14.187 14.5262 14.5261 14.2761 14.7761C14.0261 15.0262 13.687 15.1667 13.3333 15.1667H12"
-                            stroke="#3A57E8"
-                            stroke-width="1.25"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            />
-                            <path
-                            d="M6.66797 4.5H9.33464"
-                            stroke="#3A57E8"
-                            stroke-width="1.25"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            />
-                            <path
-                            d="M6.66797 7.16663H9.33464"
-                            stroke="#3A57E8"
-                            stroke-width="1.25"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            />
-                            <path
-                            d="M6.66797 9.83337H9.33464"
-                            stroke="#3A57E8"
-                            stroke-width="1.25"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            />
-                            <path
-                            d="M6.66797 12.5H9.33464"
-                            stroke="#3A57E8"
-                            stroke-width="1.25"
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            />
-                        </svg>
-                    </span>
-                    {{ space.type }}
-                </p>
-              </div>
-            </swiper-slide>
-          </swiper>
-        </div>
-        <div v-else class="no-spaces-message">
-          <p>هیچ فضایی با فیلترهای انتخاب‌شده یافت نشد.</p>
-        </div>
+          </swiper-slide>
+        </swiper>
+      </div>
+      <div v-else class="no-spaces-message">
+        <p>هیچ فضایی با فیلترهای انتخاب‌شده یافت نشد.</p>
       </div>
     </div>
   </div>
+
+
+
+
+
+   <!-- Create Space Modal -->
+      <CreateSpaceModal
+        :isVisible="isCreateSpaceModalVisible"
+        @close="closeCreateSpaceModal"
+        :spaces="spaces"
+        @submit="handleCreateSpaceSubmit"
+      />
+
 </template>
 
 <script>
@@ -199,6 +71,7 @@ import CreateSpaceModal from '@/components/CreateSpaceModal.vue';
 import { Swiper, SwiperSlide } from 'swiper/vue';
 import 'swiper/css';
 import { Pagination } from 'swiper/modules';
+import axios from 'axios';
 
 export default {
   name: 'DashboardPage',
@@ -225,48 +98,8 @@ export default {
       ],
       activeSharingFilter: 'all',
       activeSpaceTypeFilter: 'spaces',
-      spaces: [
-        {
-          name: 'فضای تیمی ۱',
-          image: require('@/assets/img/img.jpg'),
-          capacity: 33,
-          type: 'فضا تیم',
-          sharing: 'team',
-          spaceType: 'spaces',
-        },
-        {
-          name: 'فضای تیمی ۲',
-          image: require('@/assets/img/img2.jpg'),
-          capacity: 33,
-          type: 'فضا تیم',
-          sharing: 'team',
-          spaceType: 'spaces',
-        },
-        {
-          name: 'فضای خصوصی ۱',
-          image: require('@/assets/img/img3.jpg'),
-          capacity: 33,
-          type: 'فضا خصوصی',
-          sharing: 'private',
-          spaceType: 'spaces',
-        },
-        {
-          name: 'قالب ۱',
-          image: require('@/assets/img/img4.jpg'),
-          capacity: 33,
-          type: 'قالب',
-          sharing: 'team',
-          spaceType: 'templates',
-        },
-        {
-          name: 'فضای تیمی ۳',
-          image: require('@/assets/img/img.jpg'),
-          capacity: 33,
-          type: 'فضا تیم',
-          sharing: 'team',
-          spaceType: 'spaces',
-        },
-      ],
+      spaces: [], // Initialize the spaces array
+      selectedSpace: null, // Store the selected space
     };
   },
   computed: {
@@ -293,166 +126,206 @@ export default {
     closeCreateSpaceModal() {
       this.isCreateSpaceModalVisible = false;
     },
+    async fetchSpaces() {
+      try {
+        const token = localStorage.getItem('token'); // Retrieve the token from localStorage
+        if (!token) {
+          console.error('No token found!');
+          return;
+        }
+
+        const response = await axios.get(
+          'http://my.xroomapp.com:8000/get_spaces', // API endpoint
+          {
+            headers: {
+              Authorization: `Token ${token}`,
+              'Content-Type': 'application/json',
+            },
+          }
+        );
+
+        // Store the spaces data in the spaces array
+        this.spaces = response.data.spaces.map(space => ({
+          name: space.name,
+          img: space.assetBundleRoomId.img,  // Assuming 'img' exists in the API response
+          capacity: space.capacity,
+          type: space.Private ? 'Private' : 'Public', // Adjust if you have a different field
+          sharing: space.Private ? 'private' : 'team',
+          spaceType: 'spaces',
+          description: space.description, // Store description from response
+        }));
+      } catch (error) {
+        console.error('Error fetching spaces:', error);
+      }
+    },
+    handleCreateSpaceSubmit(space) {
+      // Handle form submission here, space will contain the selected space and the additional fields
+      console.log('Form submitted with:', space);
+      this.closeCreateSpaceModal(); // Close the modal after submission
+    },
+  },
+  mounted() {
+    this.fetchSpaces(); // Fetch spaces when the component is mounted
   },
 };
 </script>
 
 <style scoped>
+/* Add your CSS styling here */
+</style>
 
+<style scoped>
 .dashboard-page {
-    margin-right: 360px;
-    padding: 20px;
-    direction: rtl;
-    font-family: IRANSansXFaNum, sans-serif;
-  }
+  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;
+  background-color: #f8f9fa;
+  border-radius: 20px;
+  padding: 35px 80px;
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
 }
 
 .section-title {
-    font-size: 17px;
-    font-weight: 600;
+  font-size: 17px;
+  font-weight: 600;
 }
 
 .title-description {
-    font-size: 15px;
-    font-weight: 500;
-    margin-top: 1.5rem;
-    color: #4F5A69;
+  font-size: 15px;
+  font-weight: 500;
+  margin-top: 1.5rem;
+  color: #4F5A69;
 }
 
 .filter-section {
-    display: flex;
-    align-items: center;
-    margin-bottom: 2.5rem;
-    padding: 24px 16px;
-    border-radius: 10px;
-    background-color: #FFFFFF;
+  display: flex;
+  align-items: center;
+  margin-bottom: 2.5rem;
+  padding: 24px 16px;
+  border-radius: 10px;
+  background-color: #FFFFFF;
 }
 
 .sharing-filters {
-    max-width: 79%;
-    width: 100%;
-    margin-left: 1.5rem;
+  max-width: 79%;
+  width: 100%;
+  margin-left: 1.5rem;
 }
 
 .space-type-filter {
-    max-width: 21%;
-    width: 100%;
+  max-width: 21%;
+  width: 100%;
 }
 
 .active-filter {
-    background-color: #3A57E8;
-    color: #FFFFFF;
-    font-size: 15px;
-    font-weight: 500;
-    border-radius: 8px;
-    border: none;
-    padding: 7px 12px;
-    cursor: pointer;
-    margin-left: 1rem;
+  background-color: #3A57E8;
+  color: #FFFFFF;
+  font-size: 15px;
+  font-weight: 500;
+  border-radius: 8px;
+  border: none;
+  padding: 7px 12px;
+  cursor: pointer;
+  margin-left: 1rem;
 }
 
 .disable-filter {
-    color: #3A57E8;
-    background-color: #FFFFFF;
-    font-size: 15px;
-    font-weight: 500;
-    border-radius: 8px;
-    border: none;
-    padding: 7px 10px;
-    cursor: pointer;
-    margin-left: 1rem;
-}
-    
-.filter-buttons {
-    margin-top: 1rem;
+  color: #3A57E8;
+  background-color: #FFFFFF;
+  font-size: 15px;
+  font-weight: 500;
+  border-radius: 8px;
+  border: none;
+  padding: 7px 10px;
+  cursor: pointer;
+  margin-left: 1rem;
 }
 
+.filter-buttons {
+  margin-top: 1rem;
+}
 
 .add-space {
-    display: block;
-    padding: 12px 24px 12px 24px;
-    background-color: #3A57E8;
-    border-radius: 8px;
-    font-size: 16px;
-    font-weight: 500;
-    color: #FFFFFF;
-    border: none;
-    cursor: pointer;
-    width: max-content;
-    margin: auto;
+  display: block;
+  padding: 12px 24px 12px 24px;
+  background-color: #3A57E8;
+  border-radius: 8px;
+  font-size: 16px;
+  font-weight: 500;
+  color: #FFFFFF;
+  border: none;
+  cursor: pointer;
+  width: max-content;
+  margin: auto;
 }
 
 .mySwiper {
-    margin-top: 2.5rem;
+  margin-top: 2.5rem;
 }
 
 .card {
-    max-width: 250px !important;
-    width: 100% !important;
-    height: 335px;
-    border: 1px solid #B8C0CB;
-    border-radius: 16px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    cursor: pointer;
+  max-width: 250px !important;
+  width: 100% !important;
+  height: 335px;
+  border: 1px solid #B8C0CB;
+  border-radius: 16px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  cursor: pointer;
 }
 
 .card img {
-    max-width: 235px;
-    width: 100%;
-    max-height: 205px;
-    height: 100%;
-    border-radius: 14px;
-    border: none;
-    margin-top: 0.4rem;
+  max-width: 235px;
+  width: 100%;
+  max-height: 205px;
+  height: 100%;
+  border-radius: 14px;
+  border: none;
+  margin-top: 0.4rem;
 }
 
 .card-texts {
-    width: 100%;
-    margin-top: 1rem;
-    padding-right: 1rem;
-    display: grid;
-    gap: 1rem;
+  width: 100%;
+  margin-top: 1rem;
+  padding-right: 1rem;
+  display: grid;
+  gap: 1rem;
 }
 
 .space-name {
-    font-size: 17px;
-    font-weight: 600;
-    color: #444D5A;
+  font-size: 17px;
+  font-weight: 600;
+  color: #444D5A;
 }
 
 .space-capacity {
-    display: flex;
-    align-items: center;
-    font-size: 15px;
-    font-weight: 500;
-    color: #718096;
+  display: flex;
+  align-items: center;
+  font-size: 15px;
+  font-weight: 500;
+  color: #718096;
 }
 
 .space-type {
-    display: flex;
-    align-items: center;
-    font-size: 15px;
-    font-weight: 500;
-    color: #3A57E8;
+  display: flex;
+  align-items: center;
+  font-size: 15px;
+  font-weight: 500;
+  color: #3A57E8;
 }
 
 .no-spaces-message {
-    font-size: 18px;
-    font-weight: 500;
-    color: #101010;
-    margin-top: 4rem;
-    margin-bottom: 12rem;
-    text-align: center;
+  font-size: 18px;
+  font-weight: 500;
+  color: #101010;
+  margin-top: 4rem;
+  margin-bottom: 12rem;
+  text-align: center;
 }
-
-
-</style>
\ No newline at end of file
+</style>

From 66229e6365e515ce829749f25d66360cc9483547 Mon Sep 17 00:00:00 2001
From: Diyar Akhgar <diyar.akhgar@gmail.com>
Date: Tue, 27 May 2025 17:06:54 +0330
Subject: [PATCH 2/2] fix space styles

---
 .../src/components/CreateSpaceModal.vue       | 427 +++++++++++-------
 .../src/components/EditBillingModal.vue       |   2 +
 2 files changed, 266 insertions(+), 163 deletions(-)

diff --git a/xroom-dashboard/src/components/CreateSpaceModal.vue b/xroom-dashboard/src/components/CreateSpaceModal.vue
index 3b9042e..cc6fdf1 100644
--- a/xroom-dashboard/src/components/CreateSpaceModal.vue
+++ b/xroom-dashboard/src/components/CreateSpaceModal.vue
@@ -1,53 +1,97 @@
 <template>
-  <div v-if="isVisible" class="modal-overlay">
-    <div class="modal-content">
-      <button class="close-btn" @click="closeModal">✕</button>
-      <h2 class="modal-title">انتخاب فضای اختصاصی</h2>
-      
-      <!-- Space Selection Cards -->
-      <div v-if="spaces.length > 0" class="space-selection">
-        <div 
-          v-for="(space, index) in spaces" 
-          :key="index" 
-          class="space-card" 
-          @click="selectSpace(space)"
-          :class="{ selected: selectedSpace === space }"  
-        >
-          <img :src="'http://my.xroomapp.com:8000' + space.img" alt="فضای اختصاصی" class="space-img" />
-          <div class="space-info">
-            <h3 class="space-name">{{ space.name }}</h3>
-            <p class="space-type">{{ space.type }}</p>
-            <p class="space-capacity">حداکثر: {{ space.capacity }} کاربر</p> <!-- Map maxPerson -->
+  <div v-if="isVisible" class="modal-overlay" @click="closeModal">
+    <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">
+        <!-- Space Selection Cards -->
+        <div v-if="spaces.length > 0" class="space-selection">
+          <div 
+            v-for="(space, index) in spaces" 
+            :key="index" 
+            class="space-card" 
+            @click="selectSpace(space)"
+            :class="{ selected: selectedSpace === space }"  
+          >
+            <img :src="'http://my.xroomapp.com:8000' + space.img" alt="فضای اختصاصی" class="space-img" />
+            <div class="space-info">
+              <h3 class="space-name">{{ space.name }}</h3>
+              <p class="space-type">{{ space.type }}</p>
+              <p class="space-capacity">حداکثر: {{ space.capacity }} کاربر</p>
+            </div>
           </div>
+        </div> 
+
+        <div v-else class="loading-message">
+          <p>در حال بارگذاری فضاها...</p>
         </div>
       </div>
+      
+      <div class="popUp-objects">
+        <div class="popUp-title-object">
+          <h2>اضافه کردن فضا جدید</h2>
+          <span>برای ایجاد فضای جدید فرم زیر را تکمیل نمایید .</span>
+        </div>
 
-      <div v-else class="loading-message">
-        <p>در حال بارگذاری فضاها...</p>
+
+        <!-- Form to enter additional information -->
+        <div v-if="selectedSpace" class="space-form">
+          <form @submit.prevent="submitForm">
+
+            <div class="form-group">
+              <label for="name">نام:</label>
+              <input type="text" v-model="form.name" id="name" required />
+            </div>
+            
+            <div class="form-group">
+              <label for="capacity">ظرفیت:</label>
+              <input type="number" v-model="form.capacity" id="capacity" required />
+            </div>
+            
+            <div class="form-group">
+              <label for="description">توضیحات:</label>
+              <textarea v-model="form.description" id="description" required></textarea>
+            </div>
+          </form>
+        </div>
       </div>
-
-      <!-- Form to enter additional information -->
-      <div v-if="selectedSpace" class="space-form">
-        <h3>اطلاعات فضا</h3>
-        <form @submit.prevent="submitForm">
-          <label for="name">نام:</label>
-          <input type="text" v-model="form.name" id="name" required />
-          
-          <label for="capacity">ظرفیت:</label>
-          <input type="number" v-model="form.capacity" id="capacity" required />
-          
-          <label for="description">توضیحات:</label>
-          <textarea v-model="form.description" id="description" required></textarea>
-          
-          <button type="submit" class="submit-btn">تایید</button>
-        </form>
+      <div class="form-actions" v-if="selectedSpace">
+          <button type="button" class="cancel-btn" @click="closeModal">بازگشت</button>
+          <button type="submit" class="submit-btn" @click="submitForm">تایید</button>
       </div>
     </div>
   </div>
 </template>
 
 <script>
-import axios from 'axios'; // Import Axios for API requests
+import axios from 'axios';
 
 export default {
   props: {
@@ -55,32 +99,42 @@ export default {
   },
   data() {
     return {
-      spaces: [], // To store the fetched spaces
-      selectedSpace: null, // Store the selected space
+      spaces: [],
+      selectedSpace: null,
       form: {
         name: '',
         capacity: '',
-        description: '',  // New field for description
+        description: '',
       },
     };
   },
   methods: {
     closeModal() {
-      this.$emit('close'); // Emit the close event to parent
+      this.$emit('close');
+      this.resetForm()
+    },
+    resetForm() {
+      this.spaces = [],
+      this.selectedSpace = null,
+      this.form = {
+        name : '',
+        capacity : '',
+        description : '',
+      }
     },
     selectSpace(space) {
-      this.selectedSpace = space; // Set the selected space
+      this.selectedSpace = space;
     },
     async fetchSpaces() {
       try {
-        const token = localStorage.getItem('token'); // Retrieve the token from localStorage
+        const token = localStorage.getItem('token');
         if (!token) {
           console.error('No token found!');
           return;
         }
 
         const response = await axios.get(
-          'http://my.xroomapp.com:8000/get_assigned_assetbundle_rooms', // API endpoint
+          'http://my.xroomapp.com:8000/get_assigned_assetbundle_rooms',
           {
             headers: {
               Authorization: `Token ${token}`,
@@ -89,57 +143,50 @@ export default {
           }
         );
 
-        // Log the response to check if `maxPerson` is included in the API response
-        console.log(response.data); // Log the API response to the console
+        console.log(response.data);
 
-        // Store the spaces data in the spaces array
         this.spaces = response.data.assetbundle_rooms.map(room => ({
           name: room.name,
-          img: room.img,  // Assuming 'img' exists in the API response
-          capacity: room.maxPerson, // Map maxPerson to capacity
-          type: room.Private ? 'Private' : 'Public', // Adjust if you have a different field
-          maxPerson: room.maxPerson, // Store maxPerson for display
-          id: room.id, // Store the room id for space selection
+          img: room.img,
+          capacity: room.maxPerson,
+          type: room.Private ? 'Private' : 'Public',
+          maxPerson: room.maxPerson,
+          id: room.id,
         }));
       } catch (error) {
         console.error('Error fetching spaces:', error);
       }
     },
     async submitForm() {
-      // Collect data to be sent to the API
       const spaceData = {
-        assetBundleRoomId: this.selectedSpace.id,  // Use selected space ID (the room ID)
+        assetBundleRoomId: this.selectedSpace.id,
         name: this.form.name,
-        description: this.form.description,  // Include description from form
+        description: this.form.description,
         capacity: this.form.capacity,
       };
 
       try {
-        const token = localStorage.getItem('token'); // Retrieve the token from localStorage
+        const token = localStorage.getItem('token');
         if (!token) {
           console.error('No token found!');
           return;
         }
 
-        // Make POST request to add the space
         const response = await axios.post(
-          'http://my.xroomapp.com:8000/add_space',  // API endpoint to add space
+          'http://my.xroomapp.com:8000/add_space',
           spaceData,
           {
             headers: {
-              Authorization: `Token ${token}`,  // Pass the token
+              Authorization: `Token ${token}`,
               'Content-Type': 'application/json',
             },
           }
         );
 
-        // Log the response from the API
         console.log(response.data);
-
-        // Close the modal and emit success
-        this.$emit('submit', response.data);  // Pass the response data to the parent
+        this.$emit('submit', response.data);
         this.closeModal(); // Close the modal
-
+        window.location.reload(); // Refresh the page
       } catch (error) {
         console.error('Error submitting form:', error);
         alert('خطا در ارسال اطلاعات، لطفا دوباره تلاش کنید');
@@ -149,7 +196,7 @@ export default {
   watch: {
     isVisible(newVal) {
       if (newVal) {
-        this.fetchSpaces(); // Fetch spaces only when the modal becomes visible
+        this.fetchSpaces();
       }
     },
   },
@@ -157,7 +204,6 @@ export default {
 </script>
 
 <style scoped>
-/* Styling for the modal */
 .modal-overlay {
   position: fixed;
   top: 0;
@@ -168,40 +214,138 @@ export default {
   display: flex;
   justify-content: center;
   align-items: center;
+  z-index: 1000;
 }
 
 .modal-content {
-  background: white;
-  padding: 20px;
-  border-radius: 10px;
-  max-width: 600px;
+  background: #F7F5FA;
+  border-radius: 8px;
   width: 100%;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+  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;
 }
 
-.close-btn {
-  position: absolute;
-  top: 10px;
-  right: 10px;
-  background: none;
-  border: none;
-  font-size: 24px;
-  cursor: pointer;
+
+.modal-content::-webkit-scrollbar {
+  display: none;
 }
 
-.modal-title {
-  font-size: 20px;
-  font-weight: 600;
-  color: #3A57E8;
-  text-align: center;
-  margin-bottom: 20px;
+
+.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 {
+    padding: 20px;
+    padding-right: 50px;
+}
+
+.popUp-title-object {
+    display: flex;
+    flex-direction: column;
+    align-items: start;
+}
+
+
+
+.popUp-title-object h2{
+    font-size: 20px;
+    font-weight: 600;
+    color: #101010;
+}
+
+.popUp-title-object span {
+    font-size: 16px;
+    font-weight: 500;
+    color: #4F5A69;
+    margin-top: 1rem;
+}
+
+.popUp-objects {
+    margin-top: 0rem !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: 75%;
+  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;
+}
+
+
 .space-selection {
   display: flex;
   flex-wrap: wrap;
-  gap: 16px;
-  justify-content: space-between;
+  gap: 2rem 16px;
+  justify-content: flex-start;
   margin-bottom: 20px;
 }
 
@@ -210,7 +354,8 @@ export default {
   border-radius: 10px;
   overflow: hidden;
   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
-  width: 150px;
+  width: 31%;
+  height: 15rem;
   cursor: pointer;
   transition: all 0.2s ease;
 }
@@ -227,7 +372,7 @@ export default {
 
 .space-img {
   width: 100%;
-  height: 120px;
+  height: 8rem;
   object-fit: cover;
   border-bottom: 1px solid #ddd;
 }
@@ -235,13 +380,15 @@ export default {
 .space-info {
   padding: 10px;
   text-align: center;
+  gap: 1rem;
+  display: grid;
 }
 
 .space-name {
   font-size: 16px;
   font-weight: 600;
   color: #444;
-  margin: 5px 0;
+  margin-top: 5px;
 }
 
 .space-type, .space-capacity {
@@ -253,91 +400,45 @@ export default {
   text-align: center;
   font-size: 16px;
   color: #718096;
+  margin-bottom: 1rem;
 }
 
 .space-form {
-  margin-top: 20px;
+  margin-top: 3rem;
 }
 
-.space-form label {
-  display: block;
-  margin-bottom: 5px;
-  font-size: 14px;
-}
-
-.space-form input, .space-form textarea {
+.form-actions {
+  display: flex;
+  justify-content: space-between;
+  padding: 20px 0px; 
+  padding-bottom: 0;
   width: 100%;
-  padding: 8px;
-  margin-bottom: 15px;
-  border: 1px solid #ccc;
-  border-radius: 5px;
+  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;
-  padding: 10px;
-  border: none;
-  border-radius: 5px;
-  cursor: pointer;
-  font-size: 16px;
+  font-weight: 500;
+  font-size: 18px;
 }
 
-.submit-btn:hover {
-  background-color: #2c48b4;
+.cancel-btn {
+  background-color: #EBEEFD;
+  color: #101010;
+  font-weight: 500;
+  font-size: 18px;
 }
 
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 
-/* Modal styling */
-.create-space-modal {
-  position: fixed; 
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent backdrop */
-  z-index: 9999; /* Ensure it's above other content */
-}
-
-/* Modal content */
-.modal-content {
-  background-color: #fff;
-  border-radius: 12px;
-  padding: 20px;
-  max-width: 600px;
-  width: 100%;
-  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
-  z-index: 10000; /* Higher than backdrop */
-}
-
-/* Add transition for smooth opening/closing */
-.create-space-modal-enter-active, .create-space-modal-leave-active {
-  transition: opacity 0.3s ease;
-}
-
-.create-space-modal-enter, .create-space-modal-leave-to {
-  opacity: 0;
-}
 </style>
\ No newline at end of file
diff --git a/xroom-dashboard/src/components/EditBillingModal.vue b/xroom-dashboard/src/components/EditBillingModal.vue
index 0ca07b8..9172096 100644
--- a/xroom-dashboard/src/components/EditBillingModal.vue
+++ b/xroom-dashboard/src/components/EditBillingModal.vue
@@ -189,6 +189,8 @@ export default {
 .modal-content::-webkit-scrollbar {
   display: none;
 }
+
+
 .popUp-header {
     display: flex;
     align-items: center;