Files
languard-servers-manager/frontend
Tran G. (Revernomad) Khoa 4aae08420b feat: Phase 2 — Mission rotation management + multi-file upload
- Backend: add terrain field to Arma3MissionManager.list_missions()
- Backend: add missions field to ServerConfig Pydantic model
- Backend: add GET /missions/rotation and PUT /missions/rotation endpoints
- Frontend: Mission type gains terrain field; new MissionRotationEntry type
- Frontend: useServerMissionRotation and useUpdateMissionRotation hooks
- Frontend: useUploadMission updated to accept File[] with sequential upload
- Frontend: MissionList redesigned with Available Missions + Mission Rotation sections
- Frontend: per-file upload progress tracking, terrain badges, difficulty select
- Tests: 5 new tests; fixed existing useUploadMission test for File[] API; 141 pass
2026-04-17 20:33:04 +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.