Farben von Kacheln

admin-panel/src/views/OrganizationEditor.tsx

@@ -18,7 +18,7 @@ import { api } from '../services/api'
 import { OrganizationalUnit, OrganizationalUnitType } from '@skillmate/shared'
 import { Upload } from 'lucide-react'
 
-// Custom Node Component
+// Custom Node Component (vorheriger Look, aber mit soliden dezenten Farben)
 const OrganizationNode = ({ data }: { data: any }) => {
   const getTypeIcon = (type: OrganizationalUnitType) => {
     const icons = {
@@ -34,38 +34,45 @@ const OrganizationNode = ({ data }: { data: any }) => {
     return icons[type] || '📄'
   }
 
-  const getGradient = (level: number) => {
+  const getAccent = (type: OrganizationalUnitType): string => {
-    const gradients = [
+    switch (type) {
-      'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+      case 'direktion': return '#1E3A8A' // navy
-      'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)',
+      case 'abteilung': return '#334155' // slate-700
-      'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)',
+      case 'dezernat': return '#1D4ED8' // blue-700
-      'linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)',
+      case 'sachgebiet': return '#64748B' // slate-500
-      'linear-gradient(135deg, #fa709a 0%, #fee140 100%)',
+      case 'teildezernat': return '#64748B' // slate-500
-      'linear-gradient(135deg, #30cfd0 0%, #330867 100%)'
+      case 'stabsstelle': return '#374151' // gray-700
-    ]
+      case 'sondereinheit': return '#475569' // slate-600
-    return gradients[level % gradients.length]
+      default: return '#334155'
+    }
   }
 
   return (
-    <div className="bg-white rounded-lg shadow-lg border-2 border-gray-200 w-[300px]">
+    <div className="bg-white rounded-lg shadow-sm border border-gray-300 w-[300px] text-slate-900">
       <div
         className="p-2 text-white rounded-t-md"
-        style={{ background: getGradient(data.level || 0) }}
+        style={{ backgroundColor: getAccent(data.type) }}
       >
         <div className="flex items-center justify-between">
-          <span className="text-lg">{getTypeIcon(data.type)}</span>
+          <span className="text-base" aria-hidden>{getTypeIcon(data.type)}</span>
-          <span className="text-xs opacity-90">{data.code}</span>
+          {data.code && (
+            <span className="text-[11px] opacity-90 font-mono bg-white/10 px-2 py-0.5 rounded">
+              {data.code}
+            </span>
+          )}
         </div>
       </div>
       <div className="p-3">
-        <h4 className="font-semibold text-gray-800 text-sm">{data.name}</h4>
+        <h4 className="font-semibold text-slate-900 text-sm leading-snug">
+          {data.name}
+        </h4>
         {data.employeeCount !== undefined && (
-          <p className="text-xs text-gray-600 mt-1">
+          <p className="text-[11px] text-slate-600 mt-1">
             👥 {data.employeeCount} Mitarbeiter
           </p>
         )}
         {data.hasFuehrungsstelle && (
-          <span className="inline-block px-2 py-1 mt-2 text-xs bg-yellow-100 text-yellow-800 rounded">
+          <span className="inline-block px-2 py-0.5 mt-2 text-[11px] bg-slate-100 text-slate-700 rounded border border-slate-200">
             FüSt
           </span>
         )}
@@ -562,8 +569,17 @@ export default function OrganizationEditor() {
         <Controls />
         <MiniMap 
           nodeColor={(node) => {
-            const gradients = ['#667eea', '#f093fb', '#4facfe', '#43e97b', '#fa709a', '#30cfd0']
+            const type = (node.data as any)?.type as OrganizationalUnitType | undefined
-            return gradients[node.data?.level % gradients.length] || '#94a3b8'
+            const map: Record<string, string> = {
+              direktion: '#1E3A8A',
+              abteilung: '#334155',
+              dezernat: '#1D4ED8',
+              sachgebiet: '#64748B',
+              teildezernat: '#64748B',
+              stabsstelle: '#374151',
+              sondereinheit: '#475569'
+            }
+            return (type && map[type]) || '#94a3b8'
           }}
         />
         <Background variant="dots" gap={12} size={1} />