add Trainings popUp in dashboard

xroom-dashboard/src/components/TeamDetails.vue

@@ -1,16 +1,177 @@
 <template>
   <div class="tab-content">
-    <div class="card">جزئیات تیم ۱</div>
-    <div class="card">جزئیات تیم ۲</div>
+    <div class="team-logo">
+      <div class="card-title">
+        <h2>لوگوی تیم</h2>
+        <p>این لوگو در اتاق‌های شما استفاده خواهد شد. توصیه می‌کنیم از یک تصویر شفاف با نسبت تصویر 2:1 استفاده کنید.</p>
+      </div>
+      <div class="logo-info">
+        <img :src="teamLogo || require('@/assets/img/team-logo.jpg')" alt="team logo" />
+        <label for="file-upload">
+          <span>
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="19"
+              height="19"
+              viewBox="0 0 16 16"
+              fill="none"
+            >
+              <g clip-path="url(#clip0_312_7133)">
+                <path
+                  d="M2.66602 11.3333V12.6666C2.66602 13.0202 2.80649 13.3593 3.05654 13.6094C3.30659 13.8594 3.64573 13.9999 3.99935 13.9999H11.9993C12.353 13.9999 12.6921 13.8594 12.9422 13.6094C13.1922 13.3593 13.3327 13.0202 13.3327 12.6666V11.3333"
+                  stroke="white"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                />
+                <path
+                  d="M4.66602 6.00008L7.99935 2.66675L11.3327 6.00008"
+                  stroke="white"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                />
+                <path
+                  d="M8 2.66675V10.6667"
+                  stroke="white"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                />
+              </g>
+              <defs>
+                <clipPath id="clip0_312_7133">
+                  <rect width="16" height="16" fill="white" />
+                </clipPath>
+              </defs>
+            </svg>
+          </span>
+          <span>آپلود</span>
+        </label>
+        <input
+          id="file-upload"
+          type="file"
+          accept="image/*"
+          style="display: none;"
+          @change="handleLogoUpload"
+          ref="fileUpload"
+        />
+      </div>
+      <div class="logo-sample">
+        <div class="logo-sample-title">
+          <h2>نمونه</h2>
+          <span>به این ترتیب لوگوی تیم شما در اتاق‌های شما به نظر می‌رسد.</span>
+        </div>
+        <div class="sample-logos">
+          <img
+            v-for="(logo, index) in sampleLogos"
+            :key="index"
+            :src="require(`@/assets${logo.path}`)"
+            :alt="logo.alt"
+          />
+        </div>
+      </div>
+    </div>
+    <div class="team-info">
+      <div class="card-title">
+        <h2>جزئیات تیم</h2>
+        <form @submit.prevent="submitForm">
+          <div class="form-group">
+            <label for="team_name">نام تیم</label>
+            <input
+              id="team_name"
+              type="text"
+              v-model="form.teamName"
+            />
+          </div>
+          <div class="form-group">
+            <label for="company_name">نام شرکت</label>
+            <input
+              id="company_name"
+              type="text"
+              v-model="form.companyName"
+            />
+          </div>
+          <div class="form-group">
+            <label for="type_activity">نوع فعالیت شرکت</label>
+            <input
+              id="type_activity"
+              type="text"
+              v-model="form.activityType"
+            />
+          </div>
+          <button type="submit" class="submit-btn">تایید</button>
+        </form>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
 export default {
   name: 'TeamDetails',
+  data() {
+    return {
+      form: {
+        teamName: '',
+        companyName: '',
+        activityType: '',
+      },
+      teamLogo: null,
+      uploadedLogoFile: null,
+      sampleLogos: [
+        { path: '/img/sample-logo.png', alt: 'نمونه لوگو' },
+        { path: '/img/sample-logo.png', alt: 'نمونه لوگو' },
+        { path: '/img/sample-logo.png', alt: 'نمونه لوگو' },
+      ],
+    };
+  },
+  methods: {
+    handleLogoUpload(event) {
+      const file = event.target.files[0];
+      if (file) {
+        this.teamLogo = URL.createObjectURL(file);
+        this.uploadedLogoFile = file;
+      }
+    },
+    submitForm() {
+      // Check if there's any data to submit
+      const hasFormData = this.form.teamName || this.form.companyName || this.form.activityType;
+      const hasLogo = !!this.uploadedLogoFile;
+
+      if (!hasFormData && !hasLogo) {
+        alert('لطفاً حداقل یک فیلد یا لوگو را وارد کنید.');
+        return;
+      }
+
+      // Prepare data to emit, including only non-empty fields
+      const formData = {};
+      if (this.form.teamName) formData.teamName = this.form.teamName;
+      if (this.form.companyName) formData.companyName = this.form.companyName;
+      if (this.form.activityType) formData.activityType = this.form.activityType;
+      if (hasLogo) formData.teamLogo = this.uploadedLogoFile;
+
+      this.$emit('update:teamData', formData);
+
+      // Reset form and logo
+      this.form = {
+        teamName: '',
+        companyName: '',
+        activityType: '',
+      };
+      this.teamLogo = null;
+      this.uploadedLogoFile = null;
+      // Reset file input
+      const fileInput = this.$refs.fileUpload;
+      if (fileInput) {
+        fileInput.value = '';
+      }
+    },
+  },
 };
 </script>
 
+
 <style scoped>
 .tab-content {
   display: flex;
@@ -18,12 +179,132 @@ export default {
   gap: 16px;
 }
 
-.card {
-  background-color: white;
-  border: 1px solid #e2e8f0;
+.team-logo,
+.team-info {
+  width: 49%;
+  background-color: #ffffff;
+  border: none;
+  border-radius: 16px;
+  padding: 1.5rem;
+}
+
+.team-logo {
+  display: flex;
+  flex-direction: column;
+  gap: 2.5rem;
+}
+
+.card-title,
+.logo-sample-title {
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+}
+
+.card-title h2,
+.logo-sample-title h2 {
+  color: #101010;
+  font-weight: 600;
+  font-size: 20px;
+}
+
+.card-title p,
+.logo-sample-title span {
+  color: #5a6678;
+  font-weight: 500;
+  font-size: 17px;
+  line-height: 190%;
+  max-width: 90%;
+}
+
+.logo-sample-title {
+  gap: 1rem !important;
+}
+
+.logo-sample {
+  margin-top: 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem !important;
+}
+
+.logo-info {
+  display: flex;
+  align-items: center;
+  gap: 3rem;
+}
+
+.logo-info img {
   border-radius: 12px;
-  padding: 20px;
-  min-width: 200px;
-  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
+  height: 150px;
+  max-width: 150px;
+  width: 100%;
+  object-fit: cover;
+}
+
+.logo-info label {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  background-color: #6dc993;
+  padding: 10px 26px;
+  border-radius: 10px;
+  border: none;
+  font-size: 18px;
+  color: #fff;
+  cursor: pointer;
+}
+
+.sample-logos {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 1rem;
+}
+
+.sample-logos img {
+  height: 110px;
+  width: 110px;
+  border-radius: 12px;
+}
+
+.form-group {
+  margin-bottom: 2.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.form-group label {
+  font-weight: 500;
+  width: 70%;
+  font-size: 16px;
+}
+
+.form-group input {
+  width: 100%;
+  padding: 8px;
+  border: 1px solid #718096;
+  border-radius: 8px;
+  font-size: 1rem;
+}
+
+.form-group input:focus {
+  outline: none;
+}
+
+.submit-btn {
+  background-color: #3a57e8;
+  color: white;
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+  height: 50px;
+  width: 60%;
+  font-weight: 500;
+  font-size: 18px;
+  text-align: center;
+  float: left;
+  margin-top: 0.5rem;
 }
 </style>

xroom-dashboard/src/components/TutorialShowModal.vue

@@ -0,0 +1,316 @@
+<template>
+  <div v-if="isOpen" class="modal-overlay" @click="closeModal">
+    <div class="modal-content" @click.stop>
+      <div class="popUp-header">
+        <h2>آموزش ها</h2>
+        <button @click="closeModal">
+          <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-body">
+        <div v-for="(section, index) in sections" :key="index" class="popUp-object">
+            <h2>{{ section.title }}</h2>
+            <div class="cards">
+            <div v-for="(card, cardIndex) in section.cards" :key="cardIndex" class="card">
+                <div class="card-header"></div>
+                <span class="card-logo">
+                <img :src="card.icon" alt="icon">
+                </span>
+                <div class="card-body">
+                {{ card.title }}
+                </div>
+                <div class="card-footer">
+                مشاهده محتوا
+                </div>
+            </div>
+            </div>
+        </div>
+      </div>
+
+        <button class="exit-btn" @click="closeModal">خروج</button>
+
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'MeetingModal',
+  props: {
+    isOpen: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      sections: [
+        {
+          title: 'شروع به کار',
+          cards: [
+            {
+              title: 'راهنمای دسکتاپ',
+              icon: require('@/assets/img/card-icon.png'),
+            },
+            {
+              title: 'راهنمای متا',
+              icon: require('@/assets/img/card-icon.png'),
+            },
+            {
+              title: 'راهنمای مهمان',
+              icon: require('@/assets/img/card-icon.png'),
+            },
+          ],
+        },
+        {
+          title: 'ویژگی‌های پیشرفته',
+          cards: [
+            {
+              title: 'تنظیمات پیشرفته',
+              icon: require('@/assets/img/card-icon.png'),
+            },
+            {
+              title: 'اتوماسیون',
+              icon: require('@/assets/img/card-icon.png'),
+            },
+            {
+              title: 'مدیریت کاربران',
+              icon: require('@/assets/img/card-icon.png'),
+            },
+          ],
+        },
+        {
+          title: 'راهنمای کاربری',
+          cards: [
+            {
+              title: 'راهنمای نصب',
+              icon: require('@/assets/img/card-icon.png'),
+            },
+            {
+              title: 'راهنمای به‌روزرسانی',
+              icon: require('@/assets/img/card-icon.png'),
+            },
+            {
+              title: 'پشتیبانی',
+              icon: require('@/assets/img/card-icon.png'),
+            },
+          ],
+        },
+        {
+          title: 'سوالات متداول',
+          cards: [
+            {
+              title: 'سوالات عمومی',
+              icon: require('@/assets/img/card-icon.png'),
+            },
+            {
+              title: 'مشکلات رایج',
+              icon: require('@/assets/img/card-icon.png'),
+            },
+            {
+              title: 'تماس با ما',
+              icon: require('@/assets/img/card-icon.png'),
+            },
+            {
+              title: 'ارتباط با ما',
+              icon: require('@/assets/img/card-icon.png'),
+            },
+          ],
+        },
+      ],
+    };
+  },
+  methods: {
+    closeModal() {
+      this.$emit('close');
+    },
+  },
+};
+</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: 2rem;
+  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-body {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    padding-bottom: 2.5rem;
+}
+
+.popUp-object {
+    margin-top: 1rem !important;
+    padding: 20px;
+    background-color: #FFFFFF;
+    border-radius: 16px;
+    width: 100%;
+    max-width: 620px;
+    display: block;
+    margin: auto;
+}
+
+.popUp-object {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+}
+
+.popUp-object h2 {
+    font-size: 20px;
+    color: #101010;
+    line-height: 140%;
+    font-weight: 600;
+}
+
+.cards {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    gap: 2rem 0;
+}
+
+.card {
+    width: 31.5%;
+    height: 10.5rem;
+    border-radius: 12px;
+    position: relative;
+}
+
+.card-header {
+    width: 100%;
+    height: 3.5rem;
+    background-color: #182561;
+    border-top-left-radius: 12px;
+    border-top-right-radius: 12px;
+}
+
+.card-logo img {
+    height: 30px;
+    width: 30px;
+}
+
+.card-logo {
+    position: absolute;
+    top: 15px;
+    right: 34%;
+    background-color: #fff;
+    border-radius: 100%;
+    padding: 1rem 1rem 0.7rem 1rem;
+    border: 1px solid #182561;
+}
+
+
+.card-body {
+    background-color: #F7F6FA;
+    height: 4.5rem;
+    display: flex;
+    align-items: flex-end;
+    justify-content: center;
+    padding-bottom: 1.2rem;
+}
+
+.card-footer {
+    color: #667387;
+    font-size: 14px;
+    border-top: 0.5px solid #E2DEE9;
+    background-color: #F7F6FA;
+    height: 2.5rem;
+    border-bottom-left-radius: 12px;
+    border-bottom-right-radius: 12px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+}
+
+.exit-btn {
+    background-color: #3A57E8;
+    border-radius: 8px;
+    color: #fff;
+    border: none;
+    padding: 15px 45px 15px 45px;
+    display: block;
+    margin: auto;
+    font-size: 16px;
+    cursor: pointer;
+}
+</style>

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

@@ -11,7 +11,12 @@
         <div class="right-section">
           <h2 class="section-title">راهنمای شروع</h2>
           <div class="tutorial-grid">
-            <img class="tutorial-item" src="https://c.animaapp.com/m9nvumalUMfQbN/img/tutorials.svg" />
+            <img
+              class="tutorial-item"
+              @click="tutorialShowModal = true;"
+              src="https://c.animaapp.com/m9nvumalUMfQbN/img/tutorials.svg"
+              style="cursor: pointer;"
+            />
             <img class="tutorial-item" src="https://c.animaapp.com/m9nvumalUMfQbN/img/frame-20.svg" />
             <img class="tutorial-item" src="https://c.animaapp.com/m9nvumalUMfQbN/img/frame-19.svg" />
             <img class="tutorial-item" src="https://c.animaapp.com/m9nvumalUMfQbN/img/frame-21.svg" />
@@ -25,7 +30,7 @@
             فقط یک ایده با جلسه شگفت‌انگیز بعدی‌تان در واقعیت مجازی فاصله دارید. همین امروز آن را برگزار کنید!
           </p>
           
-          <button class="create-meeting-btn">
+          <button class="create-meeting-btn" @click="showModal = true">
             <img src="https://c.animaapp.com/m9nvumalUMfQbN/img/frame-2.svg" />
             <span>ایجاد جلسه جدید</span>
           </button>
@@ -96,18 +101,60 @@
     
     
   </div>
+
+  <!-- Create Meeting Modal -->
+  <CreateMeetingModal
+    :is-open="showModal"
+    @create-meeting="createNewMeeting"
+    @close="showModal = false"
+  />  
+
+  <!-- Tutorial Modal -->
+  <TutorialShowModal
+    :is-open="tutorialShowModal"
+    @close="tutorialShowModal = false"
+  />
 </template>
 
 <script>
 import SidebarMenu from '@/components/SidebarMenu.vue'
 import AppHeader from '@/components/Header.vue';
+import CreateMeetingModal from '@/components/CreateMeetingModal.vue';
+import TutorialShowModal from '@/components/TutorialShowModal.vue';
+
 
 export default {
   name: 'DashboardPage',
   components: {
     SidebarMenu,
     AppHeader,
+    CreateMeetingModal,
+    TutorialShowModal,
+  },
+  data() {
+    return {
+      showModal: false,
+      tutorialShowModal: false,
+    }
+  },
+ methods: {
+    createNewMeeting(meetingData) {
+      const newMeeting = {
+        id: this.meetings.length + 1,
+        title: meetingData.title,
+        date: meetingData.date,
+        image: 'https://via.placeholder.com/150',
+        type: meetingData.type,
+        maxCapacity: meetingData.maxCapacity,
+      };
+      this.meetings.push(newMeeting);
+      this.showModal = false;
+    },
+    filterMeetings() {
+      console.log('Filtering meetings');
+    },
   }
+  
 }
 </script>
 

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

@@ -60,7 +60,7 @@
         />
       </div>
       <div v-if="activeTab === 'details'">
-        <TeamDetails />
+        <TeamDetails @update:teamData="handleTeamData" />
       </div>
       <div v-if="activeTab === 'buy-subscription'">
         <BuySubscription
@@ -236,6 +236,9 @@ export default {
         this.closePreviewDialog();
       }
     },
+    handleTeamData(data) {
+      console.log('اطلاعات دریافتی : ', data);
+    },
     openPreviewDialog(type, index, url) {
       if (type === 'video') {
         this.videoOptions.sources[0].src = url;