From 92058ed5e9a2b44fb857aef0180771bfb40efa94 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sedat=20=C3=96ZT=C3=9CRK?=
 <76204082+iamsedatozturk@users.noreply.github.com>
Date: Wed, 10 Jun 2026 16:23:03 +0300
Subject: [PATCH] =?UTF-8?q?Organization=20Chart=20de=C4=9Fi=C5=9Fiklikleri?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...Sal_T_Approval.sql => Sal_T_Approval.xsql} |  0
 ...roval.json => 202606071923_Approval.xjson} |  0
 ui/src/views/admin/hr/OrgChart.tsx            | 60 +++++++++++++++----
 3 files changed, 50 insertions(+), 10 deletions(-)
 rename api/src/Sozsoft.Platform.DbMigrator/Seeds/SqlData/{Sal_T_Approval.sql => Sal_T_Approval.xsql} (100%)
 rename api/src/Sozsoft.Platform.DbMigrator/Seeds/WizardData/{202606071923_Approval.json => 202606071923_Approval.xjson} (100%)

diff --git a/api/src/Sozsoft.Platform.DbMigrator/Seeds/SqlData/Sal_T_Approval.sql b/api/src/Sozsoft.Platform.DbMigrator/Seeds/SqlData/Sal_T_Approval.xsql
similarity index 100%
rename from api/src/Sozsoft.Platform.DbMigrator/Seeds/SqlData/Sal_T_Approval.sql
rename to api/src/Sozsoft.Platform.DbMigrator/Seeds/SqlData/Sal_T_Approval.xsql
diff --git a/api/src/Sozsoft.Platform.DbMigrator/Seeds/WizardData/202606071923_Approval.json b/api/src/Sozsoft.Platform.DbMigrator/Seeds/WizardData/202606071923_Approval.xjson
similarity index 100%
rename from api/src/Sozsoft.Platform.DbMigrator/Seeds/WizardData/202606071923_Approval.json
rename to api/src/Sozsoft.Platform.DbMigrator/Seeds/WizardData/202606071923_Approval.xjson
diff --git a/ui/src/views/admin/hr/OrgChart.tsx b/ui/src/views/admin/hr/OrgChart.tsx
index f32fca2..b20af0b 100644
--- a/ui/src/views/admin/hr/OrgChart.tsx
+++ b/ui/src/views/admin/hr/OrgChart.tsx
@@ -11,6 +11,7 @@ import {
   FaFileImage,
 } from 'react-icons/fa'
 import { Helmet } from 'react-helmet'
+import { AnimatePresence } from 'framer-motion'
 import {
   getOrgChartDepartments,
   getOrgChartJobPositions,
@@ -24,6 +25,7 @@ import { useCurrentMenuIcon } from '@/utils/hooks/useCurrentMenuIcon'
 import { Avatar } from '@/components/ui'
 import { AVATAR_URL } from '@/constants/app.constant'
 import { useStoreState } from '@/store'
+import UserProfileCard from '@/views/intranet/SocialWall/UserProfileCard'
 
 type ViewMode = 'department' | 'jobPosition'
 
@@ -337,7 +339,18 @@ function buildEdges(tree: TreeNode[]): EdgeLink[] {
   return edges
 }
 
-function UserAvatar({ user, tenantId }: { user: OrgChartUserDto; tenantId?: string }) {
+function UserAvatar({
+  user,
+  tenantId,
+  title,
+  department,
+}: {
+  user: OrgChartUserDto
+  tenantId?: string
+  title: string
+  department?: string
+}) {
+  const [showUserCard, setShowUserCard] = useState(false)
   const initials = (user.fullName || user.userName || '?')
     .split(' ')
     .map((w) => w[0]?.toUpperCase() ?? '')
@@ -347,15 +360,37 @@ function UserAvatar({ user, tenantId }: { user: OrgChartUserDto; tenantId?: stri
   const src = AVATAR_URL(user.id, tenantId)
 
   return (
-    <Avatar
-      shape="circle"
-      size={24}
-      src={src}
-      title={user.fullName || user.userName}
-      className="border border-indigo-200 bg-indigo-100 text-indigo-700 font-semibold text-xs flex-shrink-0"
+    <div
+      className="relative flex-shrink-0"
+      data-stop-drag="true"
+      onMouseEnter={() => setShowUserCard(true)}
+      onMouseLeave={() => setShowUserCard(false)}
     >
-      {initials}
-    </Avatar>
+      <Avatar
+        shape="circle"
+        size={24}
+        src={src}
+        title={user.fullName || user.userName}
+        className="border border-indigo-200 bg-indigo-100 text-indigo-700 font-semibold text-xs"
+      >
+        {initials}
+      </Avatar>
+      <AnimatePresence>
+        {showUserCard && (
+          <UserProfileCard
+            user={{
+              id: user.id,
+              name: user.fullName || user.userName,
+              title,
+              email: user.email,
+              department,
+              tenantId: tenantId ?? '',
+            }}
+            position="bottom"
+          />
+        )}
+      </AnimatePresence>
+    </div>
   )
 }
 
@@ -501,7 +536,12 @@ function OrgChartNode({
               <div className="flex flex-col gap-1">
                 {node.users.map((user) => (
                   <div key={user.id} data-user-row="" className="flex items-center gap-2">
-                    <UserAvatar user={user} tenantId={tenantId} />
+                    <UserAvatar
+                      user={user}
+                      tenantId={tenantId}
+                      title={mode === 'jobPosition' ? node.name : node.departmentName || node.name}
+                      department={mode === 'jobPosition' ? node.departmentName : node.name}
+                    />
                     <span data-user-name="" className="text-xs text-slate-600 truncate">
                       {user.fullName || user.userName}
                     </span>