From 3ed673be9e87deac515eb81f49194c3feb274efb Mon Sep 17 00:00:00 2001
From: mi1468 <mahdi1468@gmail.com>
Date: Sat, 10 May 2025 17:20:38 +0330
Subject: [PATCH] added header componnent

---
 xroom-dashboard/src/components/Header.vue     | 96 +++++++++++++++++++
 xroom-dashboard/src/pages/dashboard/index.vue | 24 ++---
 2 files changed, 109 insertions(+), 11 deletions(-)
 create mode 100644 xroom-dashboard/src/components/Header.vue

diff --git a/xroom-dashboard/src/components/Header.vue b/xroom-dashboard/src/components/Header.vue
new file mode 100644
index 0000000..b714b96
--- /dev/null
+++ b/xroom-dashboard/src/components/Header.vue
@@ -0,0 +1,96 @@
+<template>
+    <header class="header-container">
+      <img class="line" src="https://c.animaapp.com/m9nvumalUMfQbN/img/line-1.svg" />
+      <p class="welcome-message">از این داشبورد، کار با XRoom را آغاز کنید.</p>
+      <div class="user-info-container">
+        <div class="user-name-container">
+          <img class="user-icon" src="https://c.animaapp.com/m9nvumalUMfQbN/img/frame-10.svg" />
+          <div class="user-name">{{ fullName }}</div>
+        </div>
+        <div class="avatar-wrapper">
+          <img class="user-avatar" src="https://c.animaapp.com/m9nvumalUMfQbN/img/frame.svg" />
+        </div>
+      </div>
+    </header>
+  </template>
+  
+  <script>
+  export default {
+    name: 'AppHeader',
+    computed: {
+      fullName() {
+        // Get user data from localStorage
+        const user = JSON.parse(localStorage.getItem('user') || '{}');
+        
+        // Return formatted name or default if not available
+        if (user.first_name && user.last_name) {
+          return `${user.first_name} ${user.last_name}`;
+        }
+        return 'کاربر مهمان';
+      }
+    }
+  }
+  </script>
+  
+  <style scoped>
+  .header-container {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 20px;
+    background-color: #ffffff;
+    border-bottom: 1px solid #eaeaea;
+  }
+  
+  .welcome-message {
+    font-size: 14px;
+    color: #666666;
+    margin: 0 15px;
+  }
+  
+  .user-info-container {
+    display: flex;
+    align-items: center;
+    gap: 15px;
+  }
+  
+  .user-name-container {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+  
+  .user-icon {
+    width: 16px;
+    height: 16px;
+  }
+  
+  .user-name {
+    font-size: 14px;
+    font-weight: 500;
+    color: #333333;
+  }
+  
+  .avatar-wrapper {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: #f5f5f5;
+  }
+  
+  .user-avatar {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+  
+  .line {
+    height: 40px;
+    width: 1px;
+    background-color: #eaeaea;
+  }
+  </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 b35a535..1e101ec 100644
--- a/xroom-dashboard/src/pages/dashboard/index.vue
+++ b/xroom-dashboard/src/pages/dashboard/index.vue
@@ -4,17 +4,17 @@
 
 <div class="dashboard-page">
   <div class="content">
-    <img class="line" src="https://c.animaapp.com/m9nvumalUMfQbN/img/line-1.svg" />
-    <p class="p">از این داشبورد، کار با XRoom را آغاز کنید.</p>
-    <div class="frame-3">
-      <div class="frame-4">
-        <img class="img" src="https://c.animaapp.com/m9nvumalUMfQbN/img/frame-10.svg" />
-        <div class="text-wrapper-5">دانیال پژوهش کیا</div>
-      </div>
-      <div class="frame-wrapper">
-        <img class="frame-5" src="https://c.animaapp.com/m9nvumalUMfQbN/img/frame.svg" />
-      </div>
-    </div>
+
+
+
+    <AppHeader />
+
+    
+    
+
+
+
+
     <div class="group-2">
       <div class="text-wrapper-6">راهنمای شروع</div>
       <img class="tutorials" src="https://c.animaapp.com/m9nvumalUMfQbN/img/tutorials.svg" />
@@ -98,12 +98,14 @@
 <script>
 
 import SidebarMenu from '@/components/SidebarMenu.vue'
+import AppHeader from '@/components/Header.vue';
 
 
 export default {
 name: 'DashboardPage',
 components: {
   SidebarMenu,
+  AppHeader,
  }
 
 }