fix: resolve frontend routing, API mismatches, and missing UI components

- Add servers list page and missing routes (servers, settings redirect, account security)
- Fix members page .map error (API returns { data } wrapper, not flat array)
- Fix auth store fetchUser expecting flat User but API returns { user } wrapper
- Add node token display dialog after creation
- Add allocation management UI to node detail page
- Add account security page with password change
- Add change-password API endpoint
- Add node servers and stats API endpoints
- Fix config save using PATCH instead of PUT, add api.put method
- Fix audit logs field name mismatch (userName vs username)
- Replace admin nodes page to avoid orgId dependency
- Remove duplicate sidebar nav items

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
hibna
2026-02-22 13:07:00 +03:00
parent d7d8fd5339
commit c9fe2bd9fe
14 changed files with 618 additions and 17 deletions
+90
View File
@@ -0,0 +1,90 @@
import { useParams, Link } from 'react-router';
import { useQuery } from '@tanstack/react-query';
import { Server, Plus } from 'lucide-react';
import { api } from '@/lib/api';
import { Card, CardContent } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { statusBadgeVariant } from '@/lib/utils';
interface ServerSummary {
id: string;
uuid: string;
name: string;
status: string;
gameName: string;
nodeName: string;
port: number;
}
interface PaginatedResponse<T> {
data: T[];
meta: { total: number; page: number; perPage: number; totalPages: number };
}
export function ServersPage() {
const { orgId } = useParams();
const { data: serversData } = useQuery({
queryKey: ['servers', orgId],
queryFn: () => api.get<PaginatedResponse<ServerSummary>>(`/organizations/${orgId}/servers`),
});
const servers = serversData?.data ?? [];
return (
<div className="space-y-6">
<div className="flex items-center justify-between">
<div>
<h1 className="text-2xl font-bold">Servers</h1>
<p className="text-muted-foreground">
{servers.length} server{servers.length !== 1 ? 's' : ''}
</p>
</div>
<Link to={`/org/${orgId}/servers/new`}>
<Button>
<Plus className="h-4 w-4" />
New Server
</Button>
</Link>
</div>
{servers.length === 0 ? (
<Card>
<CardContent className="flex flex-col items-center justify-center py-12">
<Server className="mb-4 h-12 w-12 text-muted-foreground/50" />
<p className="text-muted-foreground">No servers yet</p>
<Link to={`/org/${orgId}/servers/new`}>
<Button variant="outline" className="mt-4">
Create your first server
</Button>
</Link>
</CardContent>
</Card>
) : (
<div className="grid gap-3">
{servers.map((server) => (
<Link key={server.id} to={`/org/${orgId}/servers/${server.id}/console`}>
<Card className="transition-colors hover:border-primary/50">
<CardContent className="flex items-center justify-between p-4">
<div className="flex items-center gap-4">
<div className="flex h-10 w-10 items-center justify-center rounded-lg bg-primary/10">
<Server className="h-5 w-5 text-primary" />
</div>
<div>
<p className="font-medium">{server.name}</p>
<p className="text-sm text-muted-foreground">
{server.gameName} &middot; {server.nodeName} &middot; :{server.port}
</p>
</div>
</div>
<Badge variant={statusBadgeVariant(server.status)}>{server.status}</Badge>
</CardContent>
</Card>
</Link>
))}
</div>
)}
</div>
);
}