chore: initial commit for phase05

2026-02-21 16:59:21 +03:00
parent 218452706c
commit 0941a9ba46
43 changed files with 4431 additions and 17 deletions
@@ -0,0 +1,17 @@
+import { Outlet } from 'react-router';
+import { Sidebar } from './sidebar';
+import { Header } from './header';
+
+export function AppLayout() {
+  return (
+    <div className="flex h-screen overflow-hidden">
+      <Sidebar />
+      <div className="flex flex-1 flex-col overflow-hidden">
+        <Header />
+        <main className="flex-1 overflow-y-auto p-6">
+          <Outlet />
+        </main>
+      </div>
+    </div>
+  );
+}
@@ -0,0 +1,56 @@
+import { useNavigate } from 'react-router';
+import { LogOut, User, Moon, Sun } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { useAuthStore } from '@/stores/auth';
+import { useTheme } from '@/hooks/use-theme';
+
+export function Header() {
+  const navigate = useNavigate();
+  const { user, logout } = useAuthStore();
+  const { theme, toggleTheme } = useTheme();
+
+  const handleLogout = async () => {
+    await logout();
+    navigate('/login');
+  };
+
+  return (
+    <header className="flex h-14 items-center justify-between border-b bg-card px-6">
+      <div />
+      <div className="flex items-center gap-2">
+        <Button variant="ghost" size="icon" onClick={toggleTheme}>
+          {theme === 'dark' ? <Sun className="h-4 w-4" /> : <Moon className="h-4 w-4" />}
+        </Button>
+
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="ghost" size="sm" className="gap-2">
+              <User className="h-4 w-4" />
+              {user?.username}
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end" className="w-48">
+            <DropdownMenuLabel>{user?.email}</DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem onClick={() => navigate('/account/security')}>
+              Account Settings
+            </DropdownMenuItem>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem onClick={handleLogout}>
+              <LogOut className="h-4 w-4" />
+              Logout
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+    </header>
+  );
+}
@@ -0,0 +1,89 @@
+import { Outlet, useParams, Link, useLocation } from 'react-router';
+import { useQuery } from '@tanstack/react-query';
+import { Terminal, FolderOpen, Settings, Calendar, HardDrive, Users, Puzzle } from 'lucide-react';
+import { cn } from '@source/ui';
+import { api } from '@/lib/api';
+import { Badge } from '@/components/ui/badge';
+import { PowerControls } from '@/components/server/power-controls';
+import { statusBadgeVariant } from '@/lib/utils';
+
+interface ServerDetail {
+  id: string;
+  uuid: string;
+  name: string;
+  status: string;
+  nodeName: string;
+  nodeFqdn: string;
+  gameName: string;
+  gameSlug: string;
+  port: number;
+  memoryLimit: number;
+  diskLimit: number;
+  cpuLimit: number;
+}
+
+const tabs = [
+  { label: 'Console', path: 'console', icon: Terminal },
+  { label: 'Files', path: 'files', icon: FolderOpen },
+  { label: 'Backups', path: 'backups', icon: HardDrive },
+  { label: 'Schedules', path: 'schedules', icon: Calendar },
+  { label: 'Plugins', path: 'plugins', icon: Puzzle },
+  { label: 'Players', path: 'players', icon: Users },
+  { label: 'Settings', path: 'settings', icon: Settings },
+];
+
+export function ServerLayout() {
+  const { orgId, serverId } = useParams();
+  const location = useLocation();
+
+  const { data: server } = useQuery({
+    queryKey: ['server', orgId, serverId],
+    queryFn: () => api.get<ServerDetail>(`/organizations/${orgId}/servers/${serverId}`),
+  });
+
+  const currentTab = location.pathname.split('/').pop();
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <div>
+          <div className="flex items-center gap-3">
+            <h1 className="text-2xl font-bold">{server?.name ?? 'Loading...'}</h1>
+            {server && (
+              <Badge variant={statusBadgeVariant(server.status)}>{server.status}</Badge>
+            )}
+          </div>
+          {server && (
+            <p className="mt-1 text-sm text-muted-foreground">
+              {server.gameName} &middot; {server.nodeFqdn}:{server.port} &middot; {server.uuid}
+            </p>
+          )}
+        </div>
+        {server && <PowerControls serverId={server.id} orgId={orgId!} status={server.status} />}
+      </div>
+
+      <nav className="flex gap-1 border-b">
+        {tabs.map((tab) => {
+          const isActive = currentTab === tab.path;
+          return (
+            <Link
+              key={tab.path}
+              to={`/org/${orgId}/servers/${serverId}/${tab.path}`}
+              className={cn(
+                'flex items-center gap-1.5 border-b-2 px-3 py-2 text-sm font-medium transition-colors',
+                isActive
+                  ? 'border-primary text-primary'
+                  : 'border-transparent text-muted-foreground hover:text-foreground',
+              )}
+            >
+              <tab.icon className="h-4 w-4" />
+              {tab.label}
+            </Link>
+          );
+        })}
+      </nav>
+
+      <Outlet context={{ server }} />
+    </div>
+  );
+}
@@ -0,0 +1,115 @@
+import { Link, useLocation, useParams } from 'react-router';
+import {
+  Server,
+  LayoutDashboard,
+  Network,
+  Settings,
+  Users,
+  Shield,
+  Gamepad2,
+  ScrollText,
+  ChevronLeft,
+} from 'lucide-react';
+import { cn } from '@source/ui';
+import { Button } from '@/components/ui/button';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import { Separator } from '@/components/ui/separator';
+import { useAuthStore } from '@/stores/auth';
+
+interface NavItem {
+  label: string;
+  href: string;
+  icon: React.ComponentType<{ className?: string }>;
+}
+
+export function Sidebar() {
+  const location = useLocation();
+  const { orgId } = useParams();
+  const user = useAuthStore((s) => s.user);
+
+  const orgNav: NavItem[] = orgId
+    ? [
+        { label: 'Dashboard', href: `/org/${orgId}/dashboard`, icon: LayoutDashboard },
+        { label: 'Servers', href: `/org/${orgId}/servers`, icon: Server },
+        { label: 'Nodes', href: `/org/${orgId}/nodes`, icon: Network },
+        { label: 'Members', href: `/org/${orgId}/settings/members`, icon: Users },
+        { label: 'Settings', href: `/org/${orgId}/settings`, icon: Settings },
+      ]
+    : [];
+
+  const adminNav: NavItem[] = user?.isSuperAdmin
+    ? [
+        { label: 'Users', href: '/admin/users', icon: Users },
+        { label: 'Games', href: '/admin/games', icon: Gamepad2 },
+        { label: 'Nodes', href: '/admin/nodes', icon: Network },
+        { label: 'Audit Logs', href: '/admin/audit-logs', icon: ScrollText },
+      ]
+    : [];
+
+  return (
+    <div className="flex h-full w-64 flex-col border-r bg-card">
+      <div className="flex h-14 items-center gap-2 border-b px-4">
+        <Shield className="h-6 w-6 text-primary" />
+        <span className="text-lg font-bold">GamePanel</span>
+      </div>
+
+      <ScrollArea className="flex-1 py-2">
+        {orgId && (
+          <div className="px-3 py-2">
+            <div className="mb-1 flex items-center gap-1 px-2">
+              <Link to="/" className="text-xs text-muted-foreground hover:text-foreground">
+                <ChevronLeft className="inline h-3 w-3" /> Organizations
+              </Link>
+            </div>
+            <NavSection items={orgNav} currentPath={location.pathname} />
+          </div>
+        )}
+
+        {!orgId && (
+          <div className="px-3 py-2">
+            <p className="mb-2 px-2 text-xs font-medium text-muted-foreground">ORGANIZATIONS</p>
+            <Link to="/">
+              <Button variant="ghost" className="w-full justify-start gap-2">
+                <LayoutDashboard className="h-4 w-4" />
+                All Organizations
+              </Button>
+            </Link>
+          </div>
+        )}
+
+        {adminNav.length > 0 && (
+          <>
+            <Separator className="mx-3 my-2" />
+            <div className="px-3 py-2">
+              <p className="mb-2 px-2 text-xs font-medium text-muted-foreground">ADMIN</p>
+              <NavSection items={adminNav} currentPath={location.pathname} />
+            </div>
+          </>
+        )}
+      </ScrollArea>
+    </div>
+  );
+}
+
+function NavSection({ items, currentPath }: { items: NavItem[]; currentPath: string }) {
+  return (
+    <nav className="flex flex-col gap-1">
+      {items.map((item) => {
+        const isActive =
+          currentPath === item.href || currentPath.startsWith(item.href + '/');
+        return (
+          <Link key={item.href} to={item.href}>
+            <Button
+              variant={isActive ? 'secondary' : 'ghost'}
+              className="w-full justify-start gap-2"
+              size="sm"
+            >
+              <item.icon className={cn('h-4 w-4', isActive && 'text-primary')} />
+              {item.label}
+            </Button>
+          </Link>
+        );
+      })}
+    </nav>
+  );
+}