feat: Add DatabaseManager and LinkPlayer components, implement authentication and linking logic

- Created DatabaseManager component for managing database access via phpMyAdmin.
- Developed LinkPlayer component to link Discord accounts with game characters, including user authentication and error handling.
- Added mock data files for players, organizations, and projects to handle backend unavailability.
- Implemented AuthService for managing user authentication and session checks.
- Created DatabaseService to fetch and manage player, organization, and project data with fallback to mock data.
- Added HTML page for handling authentication unavailability.
- Developed a test script for validating Docker setup and required files.

pages/Dashboard.tsx

@@ -1,6 +1,7 @@
-import React from 'react';
-import { MOCK_PLAYERS, MOCK_PROJECTS, MOCK_ORGS } from '../constants';
+import React, { useState, useEffect } from 'react';
+import { dbService } from '../services/DatabaseService';
 import { Icons } from '../components/IconSet';
+import { Player, Project, Organization } from '../types';
 
 const StatCard = ({ label, value, trend, icon: Icon }: any) => (
   <div className="bg-surface/50 border border-border p-6 rounded-xl hover:border-accentInfo/30 transition-all duration-300 group">
@@ -41,6 +42,31 @@ const ProjectCard = ({ project }: { project: any }) => (
 );
 
 const Dashboard: React.FC = () => {
+  const [players, setPlayers] = useState<Player[]>([]);
+  const [projects, setProjects] = useState<Project[]>([]);
+  const [orgs, setOrgs] = useState<Organization[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    // Subscribe to database updates
+    const unsubscribe = dbService.subscribe(() => {
+      setPlayers(dbService.getPlayers());
+      setProjects(dbService.getProjects());
+      setOrgs(dbService.getOrgs());
+      setLoading(false);
+    });
+
+    // Initial data load
+    setPlayers(dbService.getPlayers());
+    setProjects(dbService.getProjects());
+    setOrgs(dbService.getOrgs());
+    setLoading(false);
+
+    return unsubscribe;
+  }, []);
+
+  const activeProjectsCount = projects.filter(p => p.status === 'active' || p.status === 'recruiting').length;
+
   return (
     <div className="space-y-12">
       {/* Intro Section */}
@@ -56,9 +82,9 @@ const Dashboard: React.FC = () => {
 
       {/* KPI Grid */}
       <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
-        <StatCard label="Registrierte Bürger" value={MOCK_PLAYERS.length} trend={12} icon={Icons.Users} />
-        <StatCard label="Aktive Unternehmen" value={MOCK_PROJECTS.filter(p => p.status === 'active' || p.status === 'recruiting').length} trend={5} icon={Icons.Layers} />
-        <StatCard label="Organisationen" value={MOCK_ORGS.length} trend={0} icon={Icons.Map} />
+        <StatCard label="Registrierte Bürger" value={loading ? '...' : players.length} trend={12} icon={Icons.Users} />
+        <StatCard label="Aktive Unternehmen" value={loading ? '...' : activeProjectsCount} trend={5} icon={Icons.Layers} />
+        <StatCard label="Organisationen" value={loading ? '...' : orgs.length} trend={0} icon={Icons.Map} />
       </div>
 
       {/* Content Grid */}
@@ -70,7 +96,17 @@ const Dashboard: React.FC = () => {
             <button className="text-sm text-textMuted hover:text-accentInfo transition-colors">Verzeichnis ansehen →</button>
           </div>
           <div className="bg-surface/30 border border-border rounded-2xl p-6 backdrop-blur-sm">
-            {MOCK_PROJECTS.slice(0, 5).map(p => <ProjectCard key={p.id} project={p} />)}
+            {loading ? (
+              <div className="flex justify-center py-8">
+                <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-accentInfo"></div>
+              </div>
+            ) : (
+              projects.slice(0, 5).map(p => (
+                <div key={p.id}>
+                  <ProjectCard project={p} />
+                </div>
+              ))
+            )}
           </div>
         </div>
 
@@ -108,4 +144,4 @@ const Dashboard: React.FC = () => {
   );
 };
 
-export default Dashboard;
+export default Dashboard;