Rollback - PDF Import funzt so semi
Dieser Commit ist enthalten in:
Claude Project Manager
394
frontend/src/components/OrganizationChart.tsx
Normale Datei
394
frontend/src/components/OrganizationChart.tsx
Normale Datei
@ -0,0 +1,394 @@
|
||||
import { useEffect, useState, useCallback } from 'react'
|
||||
import { OrganizationalUnit, EmployeeUnitAssignment } from '@skillmate/shared'
|
||||
import api from '../services/api'
|
||||
import { useAuthStore } from '../stores/authStore'
|
||||
|
||||
interface OrganizationChartProps {
|
||||
onClose: () => void
|
||||
}
|
||||
|
||||
export default function OrganizationChart({ onClose }: OrganizationChartProps) {
|
||||
const [units, setUnits] = useState<OrganizationalUnit[]>([])
|
||||
const [hierarchy, setHierarchy] = useState<any[]>([])
|
||||
const [selectedUnit, setSelectedUnit] = useState<OrganizationalUnit | null>(null)
|
||||
const [unitEmployees, setUnitEmployees] = useState<any[]>([])
|
||||
const [myUnits, setMyUnits] = useState<any[]>([])
|
||||
const [searchTerm, setSearchTerm] = useState('')
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [saving, setSaving] = useState(false)
|
||||
const [message, setMessage] = useState<string>('')
|
||||
const [zoomLevel, setZoomLevel] = useState(1)
|
||||
const [panPosition, setPanPosition] = useState({ x: 0, y: 0 })
|
||||
const [isDragging, setIsDragging] = useState(false)
|
||||
const [dragStart, setDragStart] = useState({ x: 0, y: 0 })
|
||||
const { user } = useAuthStore()
|
||||
|
||||
useEffect(() => {
|
||||
loadOrganization()
|
||||
loadMyUnits()
|
||||
}, [])
|
||||
|
||||
const loadOrganization = async () => {
|
||||
try {
|
||||
const response = await api.get('/organization/hierarchy')
|
||||
if (response.data.success) {
|
||||
setHierarchy(response.data.data)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to load organization:', error)
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const loadMyUnits = async () => {
|
||||
try {
|
||||
const response = await api.get('/organization/my-units')
|
||||
if (response.data.success) {
|
||||
setMyUnits(response.data.data)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to load my units:', error)
|
||||
}
|
||||
}
|
||||
|
||||
const loadUnitDetails = async (unitId: string) => {
|
||||
try {
|
||||
const response = await api.get(`/organization/units/${unitId}`)
|
||||
if (response.data.success) {
|
||||
setSelectedUnit(response.data.data)
|
||||
setUnitEmployees(response.data.data.employees || [])
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to load unit details:', error)
|
||||
}
|
||||
}
|
||||
|
||||
const assignMeToSelectedUnit = async () => {
|
||||
if (!selectedUnit || !user?.employeeId) return
|
||||
setSaving(true)
|
||||
setMessage('')
|
||||
try {
|
||||
await api.post('/organization/assignments', {
|
||||
employeeId: user.employeeId,
|
||||
unitId: selectedUnit.id,
|
||||
role: 'mitarbeiter',
|
||||
isPrimary: true
|
||||
})
|
||||
setMessage('Position erfolgreich gesetzt.')
|
||||
await loadMyUnits()
|
||||
await loadUnitDetails(selectedUnit.id)
|
||||
} catch (error: any) {
|
||||
const msg = error?.response?.data?.error?.message || 'Zuweisung fehlgeschlagen'
|
||||
setMessage(`Fehler: ${msg}`)
|
||||
} finally {
|
||||
setSaving(false)
|
||||
setTimeout(() => setMessage(''), 3000)
|
||||
}
|
||||
}
|
||||
|
||||
const getTypeIcon = (type: string) => {
|
||||
const icons: Record<string, string> = {
|
||||
direktion: '🏛️',
|
||||
abteilung: '🏢',
|
||||
dezernat: '📁',
|
||||
sachgebiet: '📋',
|
||||
teildezernat: '🔧',
|
||||
fuehrungsstelle: '⭐',
|
||||
stabsstelle: '🎯',
|
||||
sondereinheit: '🛡️'
|
||||
}
|
||||
return icons[type] || '📄'
|
||||
}
|
||||
|
||||
const getUnitColor = (level: number) => {
|
||||
const colors = [
|
||||
'bg-gradient-to-r from-purple-500 to-purple-700',
|
||||
'bg-gradient-to-r from-pink-500 to-pink-700',
|
||||
'bg-gradient-to-r from-blue-500 to-blue-700',
|
||||
'bg-gradient-to-r from-green-500 to-green-700',
|
||||
'bg-gradient-to-r from-orange-500 to-orange-700',
|
||||
'bg-gradient-to-r from-teal-500 to-teal-700'
|
||||
]
|
||||
return colors[level % colors.length]
|
||||
}
|
||||
|
||||
const handleUnitClick = (unit: OrganizationalUnit) => {
|
||||
setSelectedUnit(unit)
|
||||
loadUnitDetails(unit.id)
|
||||
}
|
||||
|
||||
const handleZoomIn = () => setZoomLevel(prev => Math.min(prev + 0.2, 3))
|
||||
const handleZoomOut = () => setZoomLevel(prev => Math.max(prev - 0.2, 0.3))
|
||||
const handleResetView = () => {
|
||||
setZoomLevel(1)
|
||||
setPanPosition({ x: 0, y: 0 })
|
||||
}
|
||||
|
||||
const handleMouseDown = (e: React.MouseEvent) => {
|
||||
if (e.button === 0) { // Left click only
|
||||
setIsDragging(true)
|
||||
setDragStart({ x: e.clientX - panPosition.x, y: e.clientY - panPosition.y })
|
||||
}
|
||||
}
|
||||
|
||||
const handleMouseMove = (e: React.MouseEvent) => {
|
||||
if (isDragging) {
|
||||
setPanPosition({
|
||||
x: e.clientX - dragStart.x,
|
||||
y: e.clientY - dragStart.y
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const handleMouseUp = () => {
|
||||
setIsDragging(false)
|
||||
}
|
||||
|
||||
const renderUnit = (unit: any, level: number = 0) => {
|
||||
const isMyUnit = myUnits.some(u => u.id === unit.id)
|
||||
const isSearchMatch = searchTerm && unit.name.toLowerCase().includes(searchTerm.toLowerCase())
|
||||
|
||||
return (
|
||||
<div key={unit.id} className="flex flex-col items-center">
|
||||
<div
|
||||
onClick={() => handleUnitClick(unit)}
|
||||
className={`
|
||||
cursor-pointer transform transition-all duration-200 hover:scale-105
|
||||
${isMyUnit ? 'ring-4 ring-yellow-400' : ''}
|
||||
${isSearchMatch ? 'ring-4 ring-blue-400 animate-pulse' : ''}
|
||||
`}
|
||||
>
|
||||
<div className={`rounded-lg shadow-lg overflow-hidden bg-white dark:bg-gray-800 min-w-[200px] max-w-[250px]`}>
|
||||
<div className={`p-2 text-white ${getUnitColor(level)}`}>
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-lg">{getTypeIcon(unit.type)}</span>
|
||||
{unit.code && <span className="text-xs opacity-90">{unit.code}</span>}
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-3">
|
||||
<h4 className="font-semibold text-sm dark:text-white">{unit.name}</h4>
|
||||
{unit.hasFuehrungsstelle && (
|
||||
<span className="inline-block px-2 py-1 mt-1 text-xs bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200 rounded">
|
||||
FüSt
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{unit.children && unit.children.length > 0 && (
|
||||
<div className="flex flex-col items-center mt-4">
|
||||
<div className="w-px h-8 bg-gray-300 dark:bg-gray-600"></div>
|
||||
<div className="flex gap-4">
|
||||
{unit.children.map((child: any) => (
|
||||
<div key={child.id} className="flex flex-col items-center">
|
||||
<div className="w-px h-4 bg-gray-300 dark:bg-gray-600"></div>
|
||||
{renderUnit(child, level + 1)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
|
||||
<div className="bg-white dark:bg-gray-800 rounded-lg p-8">
|
||||
<div className="text-lg">Lade Organigramm...</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 bg-black bg-opacity-50 z-50 flex">
|
||||
{/* Main Modal */}
|
||||
<div className="flex-1 bg-white dark:bg-gray-900 flex">
|
||||
{/* Left Sidebar */}
|
||||
<div className="w-64 bg-gray-50 dark:bg-gray-800 border-r border-gray-200 dark:border-gray-700 p-4 overflow-y-auto">
|
||||
<h3 className="font-semibold mb-4 dark:text-white">Navigation</h3>
|
||||
|
||||
{/* Search */}
|
||||
<div className="mb-4">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Suche Einheit..."
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
className="w-full px-3 py-2 border rounded dark:bg-gray-700 dark:border-gray-600 dark:text-white"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Quick Links */}
|
||||
<div className="space-y-2">
|
||||
<button className="w-full text-left px-3 py-2 rounded hover:bg-gray-200 dark:hover:bg-gray-700 dark:text-white">
|
||||
📍 Meine Position
|
||||
</button>
|
||||
<button className="w-full text-left px-3 py-2 rounded hover:bg-gray-200 dark:hover:bg-gray-700 dark:text-white">
|
||||
👥 Führungsebene
|
||||
</button>
|
||||
<button className="w-full text-left px-3 py-2 rounded hover:bg-gray-200 dark:hover:bg-gray-700 dark:text-white">
|
||||
🎖️ Beauftragte
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Department Filters */}
|
||||
<h4 className="font-semibold mt-6 mb-2 dark:text-white">Abteilungen</h4>
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
{[1, 2, 3, 4, 5, 6].map(n => (
|
||||
<button
|
||||
key={n}
|
||||
className={`px-3 py-2 rounded text-white text-sm ${getUnitColor(n)}`}
|
||||
>
|
||||
Abt. {n}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Main Chart Area */}
|
||||
<div className="flex-1 relative overflow-hidden">
|
||||
{/* Header */}
|
||||
<div className="absolute top-0 left-0 right-0 bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-700 p-4 z-10">
|
||||
<div className="flex items-center justify-between">
|
||||
<h2 className="text-xl font-bold dark:text-white">LKA NRW Organigramm</h2>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded"
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Zoom Controls */}
|
||||
<div className="absolute top-20 right-4 z-10 flex flex-col gap-2">
|
||||
<button
|
||||
onClick={handleZoomIn}
|
||||
className="p-2 bg-white dark:bg-gray-700 shadow rounded hover:bg-gray-100 dark:hover:bg-gray-600"
|
||||
>
|
||||
🔍+
|
||||
</button>
|
||||
<button
|
||||
onClick={handleZoomOut}
|
||||
className="p-2 bg-white dark:bg-gray-700 shadow rounded hover:bg-gray-100 dark:hover:bg-gray-600"
|
||||
>
|
||||
🔍-
|
||||
</button>
|
||||
<button
|
||||
onClick={handleResetView}
|
||||
className="p-2 bg-white dark:bg-gray-700 shadow rounded hover:bg-gray-100 dark:hover:bg-gray-600"
|
||||
>
|
||||
🎯
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Chart Canvas */}
|
||||
<div
|
||||
className="absolute inset-0 mt-16 overflow-auto cursor-move"
|
||||
onMouseDown={handleMouseDown}
|
||||
onMouseMove={handleMouseMove}
|
||||
onMouseUp={handleMouseUp}
|
||||
onMouseLeave={handleMouseUp}
|
||||
style={{ cursor: isDragging ? 'grabbing' : 'grab' }}
|
||||
>
|
||||
<div
|
||||
className="p-8"
|
||||
style={{
|
||||
transform: `scale(${zoomLevel}) translate(${panPosition.x / zoomLevel}px, ${panPosition.y / zoomLevel}px)`,
|
||||
transformOrigin: 'center',
|
||||
transition: isDragging ? 'none' : 'transform 0.2s'
|
||||
}}
|
||||
>
|
||||
{hierarchy.map(unit => renderUnit(unit))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right Sidebar - Details */}
|
||||
{selectedUnit && (
|
||||
<div className="w-80 bg-gray-50 dark:bg-gray-800 border-l border-gray-200 dark:border-gray-700 p-4 overflow-y-auto">
|
||||
<div className={`p-3 text-white rounded-lg mb-4 ${getUnitColor(selectedUnit.level || 0)}`}>
|
||||
<h3 className="text-lg font-semibold">{selectedUnit.name}</h3>
|
||||
{selectedUnit.code && <p className="text-sm opacity-90">{selectedUnit.code}</p>}
|
||||
</div>
|
||||
|
||||
{/* Tabs */}
|
||||
<div className="border-b border-gray-200 dark:border-gray-700 mb-4">
|
||||
<div className="flex gap-4">
|
||||
<button className="pb-2 border-b-2 border-blue-500 dark:text-white">
|
||||
Mitarbeiter
|
||||
</button>
|
||||
<button className="pb-2 dark:text-gray-400">
|
||||
Skills
|
||||
</button>
|
||||
<button className="pb-2 dark:text-gray-400">
|
||||
Vertretung
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Employee List */}
|
||||
<div className="space-y-2">
|
||||
{unitEmployees.map(emp => (
|
||||
<div key={emp.id} className="p-3 bg-white dark:bg-gray-700 rounded-lg">
|
||||
<div className="flex items-center gap-3">
|
||||
{emp.photo ? (
|
||||
<img
|
||||
src={`/api${emp.photo}`}
|
||||
alt=""
|
||||
className="w-10 h-10 rounded-full object-cover"
|
||||
/>
|
||||
) : (
|
||||
<div className="w-10 h-10 rounded-full bg-gray-200 dark:bg-gray-600 flex items-center justify-center">
|
||||
👤
|
||||
</div>
|
||||
)}
|
||||
<div>
|
||||
<p className="font-medium dark:text-white">{emp.firstName} {emp.lastName}</p>
|
||||
<p className="text-sm text-gray-600 dark:text-gray-400">
|
||||
{emp.role === 'leiter' && '🔑 Leitung'}
|
||||
{emp.role === 'stellvertreter' && '↔️ Stellvertretung'}
|
||||
{emp.role === 'mitarbeiter' && 'Mitarbeiter'}
|
||||
{emp.role === 'beauftragter' && '🎖️ Beauftragter'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
{unitEmployees.length === 0 && (
|
||||
<p className="text-gray-500 dark:text-gray-400">Keine Mitarbeiter zugeordnet</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{selectedUnit.description && (
|
||||
<div className="mt-4 p-3 bg-blue-50 dark:bg-blue-900/20 rounded">
|
||||
<h4 className="font-semibold mb-1 dark:text-white">Beschreibung</h4>
|
||||
<p className="text-sm dark:text-gray-300">{selectedUnit.description}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{user?.employeeId && (
|
||||
<div className="mt-4">
|
||||
<button
|
||||
onClick={assignMeToSelectedUnit}
|
||||
disabled={saving}
|
||||
className="w-full px-3 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 disabled:opacity-60"
|
||||
>
|
||||
{saving ? 'Wird zugeordnet...' : 'In diese Einheit einordnen'}
|
||||
</button>
|
||||
{message && (
|
||||
<p className="text-sm mt-2 text-gray-700 dark:text-gray-300">{message}</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
In neuem Issue referenzieren
Einen Benutzer sperren