corrosion-admin-panel/frontend/src/components/layout/DashboardLayout.vue

<script setup lang="ts">
import { RouterView, RouterLink, useRoute, useRouter } from 'vue-router'
import { useAuthStore } from '@/stores/auth'
import { useServerStore } from '@/stores/server'
import {
  LayoutDashboard,
  Server,
  Terminal,
  Users,
  Puzzle,
  RefreshCw,
  Map,
  MessageSquare,
  BarChart3,
  Bell,
  UserPlus,
  ShoppingBag,
  Package,
  Settings,
  LogOut,
} from 'lucide-vue-next'

const route = useRoute()
const router = useRouter()
const auth = useAuthStore()
const server = useServerStore()

const navItems = [
  { name: 'Dashboard', path: '/', icon: LayoutDashboard },
  { name: 'Server', path: '/server', icon: Server },
  { name: 'Console', path: '/console', icon: Terminal },
  { name: 'Players', path: '/players', icon: Users },
  { name: 'Plugins', path: '/plugins', icon: Puzzle },
  { name: 'Auto-Wiper', path: '/wipes', icon: RefreshCw },
  { name: 'Maps', path: '/maps', icon: Map },
  { name: 'Chat Log', path: '/chat', icon: MessageSquare },
  { name: 'Analytics', path: '/analytics', icon: BarChart3 },
  { name: 'Notifications', path: '/notifications', icon: Bell },
  { name: 'Team', path: '/team', icon: UserPlus },
  { name: 'Store', path: '/store/manage', icon: ShoppingBag },
  { name: 'Modules', path: '/modules', icon: Package },
  { name: 'Settings', path: '/settings', icon: Settings },
]

function isActive(path: string): boolean {
  if (path === '/') return route.path === '/'
  return route.path.startsWith(path)
}

function handleLogout() {
  auth.logout()
  router.push('/login')
}
</script>

<template>
  <div class="flex h-screen bg-neutral-950">
    <!-- Sidebar -->
    <aside class="w-64 bg-neutral-900 border-r border-neutral-800 flex flex-col">
      <!-- Logo -->
      <div class="p-4 border-b border-neutral-800">
        <div class="flex items-center gap-3">
          <img src="/logo.png" alt="Corrosion" class="h-8 w-8" />
          <div>
            <h1 class="text-sm font-bold text-red-500 tracking-wider">CORROSION</h1>
            <p class="text-xs text-neutral-500">{{ auth.license?.server_name || 'Server Management' }}</p>
          </div>
        </div>
      </div>

      <!-- Server Status Indicator -->
      <div class="px-4 py-3 border-b border-neutral-800">
        <div class="flex items-center gap-2">
          <div
            class="w-2 h-2 rounded-full"
            :class="{
              'bg-green-500': server.connection?.connection_status === 'connected',
              'bg-yellow-500': server.connection?.connection_status === 'degraded',
              'bg-red-500': server.connection?.connection_status === 'offline' || !server.connection,
            }"
          />
          <span class="text-sm text-neutral-400">
            {{ server.stats?.player_count ?? 0 }}/{{ server.stats?.max_players ?? 0 }} players
          </span>
        </div>
      </div>

      <!-- Navigation -->
      <nav class="flex-1 overflow-y-auto py-2">
        <RouterLink
          v-for="item in navItems"
          :key="item.path"
          :to="item.path"
          class="flex items-center gap-3 px-4 py-2 mx-2 rounded-lg text-sm transition-colors"
          :class="isActive(item.path)
            ? 'bg-red-500/10 text-red-400'
            : 'text-neutral-400 hover:bg-neutral-800 hover:text-neutral-200'"
        >
          <component :is="item.icon" class="w-4 h-4" />
          {{ item.name }}
        </RouterLink>
      </nav>

      <!-- User -->
      <div class="p-4 border-t border-neutral-800">
        <div class="flex items-center justify-between">
          <div>
            <p class="text-sm text-neutral-300">{{ auth.user?.username }}</p>
            <p class="text-xs text-neutral-500">{{ auth.user?.email }}</p>
          </div>
          <button
            @click="handleLogout"
            class="text-neutral-500 hover:text-red-400 transition-colors"
          >
            <LogOut class="w-4 h-4" />
          </button>
        </div>
      </div>
    </aside>

    <!-- Main Content -->
    <main class="flex-1 overflow-y-auto">
      <RouterView />
    </main>
  </div>
</template>