Files
languard-servers-manager/frontend
Tran G. (Revernomad) Khoa 5a62d21def feat: implement phases 3-5 of Arma 3 UX enhancement plan
Phase 3 - Mod display names + split-pane selector:
- Parse mod.cpp/meta.cpp for display_name and workshop_id
- Rewrite ModList as two-pane available/selected interface

Phase 4 - Player kick/ban from Players tab:
- Add get_by_slot() to PlayerRepository
- Add get_rcon_client() class method to ThreadRegistry
- Add /players/{slot_id}/kick and /ban endpoints
- Rewrite PlayerTable with kick/ban modals and ban presets

Phase 5 - Historical log file browser:
- Add list_log_files() and get_log_file_path() to RPTParser
- Add logfiles_router with GET/download/DELETE endpoints
- Update LogViewer with collapsible log files section (download + delete)
2026-04-17 20:47:37 +07:00
..

Languard Server Manager — Frontend

React 19 + TypeScript + Vite frontend for the Languard game server management panel.

Stack

  • React 19 with hooks
  • TypeScript strict mode
  • Vite dev server + build
  • TanStack Query for server state (all API calls)
  • Zustand for client state (auth, UI notifications)
  • react-hook-form + Zod for form validation
  • Tailwind CSS with custom neumorphic design tokens
  • Vitest for unit tests

Dev Server

# From this directory
npx vite --host
# → http://localhost:5173

Tests

npx vitest run          # run once
npx vitest              # watch mode
npx tsc --noEmit        # type check only

Project Structure

src/
├── components/
│   ├── layout/         # Sidebar
│   ├── servers/        # ServerCard, ConfigEditor, PlayerTable, MissionList, ModList, LogViewer, BanTable
│   ├── settings/       # PasswordChange, UserManager
│   └── ui/             # StatusLed, (planned) TagListEditor, ConfirmModal
├── hooks/
│   ├── useServers.ts       # Dashboard server list + start/stop/restart mutations
│   ├── useServerDetail.ts  # All per-server queries and mutations
│   ├── useAuth.ts
│   └── useWebSocket.ts     # Real-time events (logs, status changes)
├── pages/
│   ├── LoginPage.tsx
│   ├── DashboardPage.tsx
│   ├── ServerDetailPage.tsx
│   ├── CreateServerPage.tsx
│   └── SettingsPage.tsx
├── store/
│   ├── auth.store.ts   # JWT + user role
│   └── ui.store.ts     # Notification queue
└── lib/
    ├── api.ts          # Axios instance with JWT interceptor + 401 redirect
    └── logger.ts

CSS Conventions

Custom utility classes defined in src/index.css (do not add new CSS files):

Class Use
neu-card Card surface with neumorphic raised shadow
neu-input Input with recessed shadow
btn-primary Amber accent button
btn-ghost Text-only button with hover background
btn-danger Red destructive button

Tailwind design tokens in tailwind.config.js: surface-{base,raised,recessed,overlay}, text-{primary,secondary,muted}, status-{running,stopped,crashed,starting,restarting}, accent.