Organization Chart değişiklikleri

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 (
+    <div
+      className="relative flex-shrink-0"
+      data-stop-drag="true"
+      onMouseEnter={() => setShowUserCard(true)}
+      onMouseLeave={() => setShowUserCard(false)}
+    >
       <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"
+        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>