feat: Set up initial monorepo structure for admin and mobile applications with core configurations and database integration.

innungsapp/apps/admin/components/layout/Header.tsx

@@ -1,12 +1,27 @@
 'use client'
 
 import { createAuthClient } from 'better-auth/react'
-import { useRouter } from 'next/navigation'
+import { useRouter, usePathname } from 'next/navigation'
+import { LogOut } from 'lucide-react'
 
 const authClient = createAuthClient()
 
+const PAGE_TITLES: Record<string, string> = {
+  '/dashboard': 'Übersicht',
+  '/dashboard/mitglieder': 'Mitglieder',
+  '/dashboard/news': 'News',
+  '/dashboard/termine': 'Termine',
+  '/dashboard/stellen': 'Lehrlingsbörse',
+  '/dashboard/einstellungen': 'Einstellungen',
+}
+
 export function Header() {
   const router = useRouter()
+  const pathname = usePathname()
+
+  const title = Object.entries(PAGE_TITLES)
+    .sort((a, b) => b[0].length - a[0].length)
+    .find(([path]) => pathname === path || pathname.startsWith(path + '/'))?.[1] ?? 'Dashboard'
 
   async function handleSignOut() {
     await authClient.signOut()
@@ -15,12 +30,18 @@ export function Header() {
 
   return (
     <header className="h-14 bg-white border-b flex items-center justify-between px-6 flex-shrink-0">
-      <div />
-      <div className="flex items-center gap-4">
+      <h2
+        className="text-sm font-semibold text-gray-700 tracking-tight"
+        style={{ fontFamily: "'Syne', system-ui, sans-serif" }}
+      >
+        {title}
+      </h2>
+      <div className="flex items-center gap-3">
         <button
           onClick={handleSignOut}
-          className="text-sm text-gray-600 hover:text-gray-900 transition-colors"
+          className="flex items-center gap-1.5 text-sm text-gray-500 hover:text-gray-900 transition-colors"
         >
+          <LogOut size={14} />
           Abmelden
         </button>
       </div>

innungsapp/apps/admin/components/layout/Sidebar.tsx

@@ -3,14 +3,15 @@
 import Link from 'next/link'
 import { usePathname } from 'next/navigation'
 import { clsx } from 'clsx'
+import { LayoutDashboard, Users, Newspaper, Calendar, GraduationCap, Settings } from 'lucide-react'
 
 const navItems = [
-  { href: '/dashboard', label: 'Übersicht', icon: '🏠' },
-  { href: '/dashboard/mitglieder', label: 'Mitglieder', icon: '👥' },
-  { href: '/dashboard/news', label: 'News', icon: '📰' },
-  { href: '/dashboard/termine', label: 'Termine', icon: '📅' },
-  { href: '/dashboard/stellen', label: 'Lehrlingsbörse', icon: '🎓' },
-  { href: '/dashboard/einstellungen', label: 'Einstellungen', icon: '⚙️' },
+  { href: '/dashboard', label: 'Übersicht', icon: LayoutDashboard },
+  { href: '/dashboard/mitglieder', label: 'Mitglieder', icon: Users },
+  { href: '/dashboard/news', label: 'News', icon: Newspaper },
+  { href: '/dashboard/termine', label: 'Termine', icon: Calendar },
+  { href: '/dashboard/stellen', label: 'Lehrlingsbörse', icon: GraduationCap },
+  { href: '/dashboard/einstellungen', label: 'Einstellungen', icon: Settings },
 ]
 
 export function Sidebar() {
@@ -19,22 +20,25 @@ export function Sidebar() {
   return (
     <aside className="w-64 bg-white border-r flex flex-col flex-shrink-0">
       {/* Logo */}
-      <div className="p-6 border-b">
-        <div className="flex items-center gap-3">
-          <div className="w-8 h-8 bg-brand-500 rounded-lg flex items-center justify-center">
-            <span className="text-white font-bold text-sm">I</span>
-          </div>
-          <span className="font-bold text-gray-900">InnungsApp</span>
-        </div>
+      <div className="px-6 py-5 border-b">
+        <Link href="/dashboard">
+          <span
+            className="text-xl font-bold text-gray-900 tracking-tight"
+            style={{ fontFamily: "'Syne', system-ui, sans-serif" }}
+          >
+            Innungs<span className="text-brand-500">App</span>
+          </span>
+        </Link>
       </div>
 
       {/* Navigation */}
-      <nav className="flex-1 p-4 space-y-1">
+      <nav className="flex-1 p-3 space-y-0.5">
         {navItems.map((item) => {
           const isActive =
             item.href === '/dashboard'
               ? pathname === '/dashboard'
               : pathname.startsWith(item.href)
+          const Icon = item.icon
 
           return (
             <Link
@@ -42,17 +46,12 @@ export function Sidebar() {
               href={item.href}
               className={clsx('sidebar-link', isActive && 'sidebar-link-active')}
             >
-              <span>{item.icon}</span>
+              <Icon size={16} className="flex-shrink-0" />
               <span>{item.label}</span>
             </Link>
           )
         })}
       </nav>
-
-      {/* Footer */}
-      <div className="p-4 border-t">
-        <p className="text-xs text-gray-400">InnungsApp v0.1.0</p>
-      </div>
     </aside>
   )
 }

innungsapp/apps/admin/components/stats/StatsCards.tsx

@@ -1,19 +1,35 @@
+import { Users, Newspaper, Calendar, GraduationCap, type LucideIcon } from 'lucide-react'
+
 interface Stat {
   label: string
   value: number
   icon: string
 }
 
+const ICON_MAP: Record<string, LucideIcon> = {
+  '👥': Users,
+  '📰': Newspaper,
+  '📅': Calendar,
+  '🎓': GraduationCap,
+}
+
 export function StatsCards({ stats }: { stats: Stat[] }) {
   return (
     <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
-      {stats.map((stat) => (
-        <div key={stat.label} className="stat-card">
-          <div className="text-2xl mb-2">{stat.icon}</div>
-          <div className="text-3xl font-bold text-gray-900">{stat.value}</div>
-          <div className="text-sm text-gray-500 mt-1">{stat.label}</div>
-        </div>
-      ))}
+      {stats.map((stat) => {
+        const Icon = ICON_MAP[stat.icon] ?? Users
+        return (
+          <div key={stat.label} className="stat-card flex flex-col gap-3">
+            <div className="flex items-start justify-between">
+              <div>
+                <div className="text-4xl font-bold text-gray-900 leading-none">{stat.value}</div>
+                <div className="text-xs text-gray-500 mt-2 uppercase tracking-wide font-medium">{stat.label}</div>
+              </div>
+              <Icon size={18} className="text-gray-300 flex-shrink-0 mt-0.5" />
+            </div>
+          </div>
+        )
+      })}
     </div>
   )
 }