Add admin-core frontend (Port 3008)

Next.js admin frontend for Core with 3 categories
(Communication, Infrastructure, Development), 13 modules,
2 roles (developer, ops), and 11 API proxy routes.
Includes docker-compose service and nginx SSL config.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

admin-core/app/page.tsx

@@ -0,0 +1,94 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { useRouter } from 'next/navigation'
+import { roles, storeRole, getStoredRole, RoleId } from '@/lib/roles'
+
+const roleIcons: Record<RoleId, string> = {
+  developer: '\u{1F468}\u200D\u{1F4BB}',
+  ops: '\u{1F6E0}\uFE0F',
+}
+
+export default function RoleSelectPage() {
+  const router = useRouter()
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    const storedRole = getStoredRole()
+    if (storedRole) {
+      router.replace('/dashboard')
+    } else {
+      setLoading(false)
+    }
+  }, [router])
+
+  const handleRoleSelect = (roleId: RoleId) => {
+    storeRole(roleId)
+    router.push('/dashboard')
+  }
+
+  if (loading) {
+    return (
+      <div className="min-h-screen bg-slate-50 flex items-center justify-center">
+        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary-600"></div>
+      </div>
+    )
+  }
+
+  const categoryLabels: Record<string, string> = {
+    communication: 'Kommunikation',
+    infrastructure: 'Infrastruktur',
+    development: 'Entwicklung',
+  }
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 flex items-center justify-center p-8">
+      <div className="max-w-2xl w-full">
+        <div className="text-center mb-12">
+          <h1 className="text-4xl font-bold text-white mb-4">
+            BreakPilot Core Admin
+          </h1>
+          <p className="text-lg text-slate-300">
+            Waehlen Sie Ihre Rolle fuer eine optimierte Ansicht:
+          </p>
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
+          {roles.map((role) => (
+            <button
+              key={role.id}
+              onClick={() => handleRoleSelect(role.id)}
+              className="group bg-slate-800/50 hover:bg-slate-700/50 border border-slate-700 hover:border-primary-500 rounded-2xl p-6 text-left transition-all duration-200 hover:scale-[1.02] hover:shadow-xl"
+            >
+              <div className="flex items-start gap-4">
+                <span className="text-4xl">{roleIcons[role.id]}</span>
+                <div>
+                  <h3 className="text-xl font-semibold text-white group-hover:text-primary-400 transition-colors">
+                    {role.name}
+                  </h3>
+                  <p className="text-slate-400 mt-1">{role.description}</p>
+                  <div className="mt-3 flex flex-wrap gap-2">
+                    {role.visibleCategories.map((cat) => (
+                      <span
+                        key={cat}
+                        className="px-2 py-1 bg-slate-700/50 rounded text-xs text-slate-300"
+                      >
+                        {categoryLabels[cat] || cat}
+                      </span>
+                    ))}
+                  </div>
+                </div>
+              </div>
+            </button>
+          ))}
+        </div>
+
+        <div className="text-center">
+          <p className="text-sm text-slate-500">
+            Sie koennen Ihre Rolle jederzeit in der Sidebar aendern.
+          </p>
+        </div>
+      </div>
+    </div>
+  )
+}