From 90bbff45cffd0e012a89d929281510e8295af681 Mon Sep 17 00:00:00 2001
From: Diyar Akhgar <diyar.akhgar@gmail.com>
Date: Fri, 30 May 2025 04:08:36 +0330
Subject: [PATCH] add Trainings popUp in dashboard

---
 xroom-dashboard/src/assets/img/card-icon.png  | Bin 0 -> 527 bytes
 .../src/components/TutorialShowModal.vue      | 316 ++++++++++++++++++
 xroom-dashboard/src/pages/dashboard/index.vue |  51 ++-
 3 files changed, 365 insertions(+), 2 deletions(-)
 create mode 100644 xroom-dashboard/src/assets/img/card-icon.png
 create mode 100644 xroom-dashboard/src/components/TutorialShowModal.vue

diff --git a/xroom-dashboard/src/assets/img/card-icon.png b/xroom-dashboard/src/assets/img/card-icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..47768af0bbf3975e493d2d38371c43b28d7fcf7c
GIT binary patch
literal 527
zcmeAS@N?(olHy`uVBq!ia0vp^_8`o`1|-Ad1?~eW&H|6fVg?3*IUvlacGk)SD9BhG
z<nF|<?wrg^AcrO0(btiIVPik{pF~!m+!9Y0$B+ufx3l*L9ySm;X5TKNd6q4S`Gv+@
z-Wv)jOnsaRs-gytlYpGW=AH$Uf|goWoZo2i`1HZpoXMN_f8Sj_?Z3)V|4k_`-)SCX
zykv5A$qdhomlxv8Qr9?h-2QcVNtNQIl_K7q(mefBk2q-^JT86z)1$XbZY;R3`&T^f
zk(ZXji=!((JzzX67B2HGzs&LCr&Rg-4ecxY7&ksmf3WC7?<dI}C%y<gmEBQLCDAA`
zIsNF9NW;o7pLwFVn5i+-iY3|(I{0`;HuVS`vN=`X#52+VjrIAiliZ9ke@+~@)7X8;
z{M7!Y?yYjGI*-q)o0a&Z;^&#z7oMdDE+6eZzTu<L<%+=b+sh^LZtXm7_wdGX>5~iN
zJyq{`6{;6@{@XmYVtPeq<+q7Xw%1R!)(`qJJwV)yr%0%zhevu>@N3EA#rk)@@yZ&w
zeSgvLvcP68?~ZM&l9yh!)BhW-?$-aJEN{X6+_@WcE=;)g#D9aif4Q4kRM+;OxBh?k
zS@rRDY1_0DpZ_Eq&75=krRgqL?Vp}ewXJP6jIUnDh-E}HHUZ<0!PC{xWt~$(69B`3
B@Sgwx

literal 0
HcmV?d00001

diff --git a/xroom-dashboard/src/components/TutorialShowModal.vue b/xroom-dashboard/src/components/TutorialShowModal.vue
new file mode 100644
index 0000000..7aefc01
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/xroom-dashboard/src/pages/dashboard/index.vue b/xroom-dashboard/src/pages/dashboard/index.vue
index 8d623e4..574434a 100644
--- a/xroom-dashboard/src/pages/dashboard/index.vue
+++ b/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>