+
+ );
+ }
+
// Skip server-not-found check for verify-email/verify/replay pages (needed for email verification flow)
- if (publicSettings?.serverExists === false && !location.startsWith('/verify-email') && !location.startsWith('/verify/') && !location.startsWith('/replay')) {
+ if (publicSettings?.serverExists === false && !isAlwaysReachablePath(location)) {
return (
Unable to reach the server
++ We couldn't load this page right now. This is usually temporary — please check your connection and try again. +
+ + handleTicketClick(update.ticketId)}
>
@@ -169,16 +151,6 @@ export function RecentPunishmentsSection({ punishments, loading }: RecentPunishm
@@ -121,26 +122,23 @@ export function AssignedTicketUpdatesSection({
{update.ticketTitle}
{update.isStaffReply ? t('dashboard.assignedTickets.staff') : t('dashboard.assignedTickets.player')}
-
+
diff --git a/client/src/components/dashboard/DashboardAlertsSection.tsx b/client/src/components/dashboard/DashboardAlertsSection.tsx
new file mode 100644
index 0000000..fbc05d0
--- /dev/null
+++ b/client/src/components/dashboard/DashboardAlertsSection.tsx
@@ -0,0 +1,76 @@
+import { StatusBanner } from '@modl-gg/shared-web/components/ui/status-banner';
+import { useTranslation } from 'react-i18next';
+import ReactMarkdown from 'react-markdown';
+import type { SystemAlert, SystemAlertSeverity } from '@/hooks/use-data';
+
+interface DashboardAlertsSectionProps {
+ alerts?: SystemAlert[];
+}
+
+type AlertBannerVariant = 'info' | 'warning' | 'error';
+
+const severityVariant: Record = {
+ BASIC: 'info',
+ WARNING: 'warning',
+ CRITICAL: 'error',
+};
+
+function normalizeSeverity(severity: unknown): string | null {
+ if (typeof severity !== 'string' || severity.trim().length === 0) {
+ return null;
+ }
+
+ return severity.trim();
+}
+
+function isKnownSeverity(severity: string): severity is SystemAlertSeverity {
+ return severity === 'BASIC' || severity === 'WARNING' || severity === 'CRITICAL';
+}
+
+function getSeverityVariant(severity: unknown): AlertBannerVariant {
+ const normalizedSeverity = normalizeSeverity(severity);
+ if (!normalizedSeverity || !isKnownSeverity(normalizedSeverity)) {
+ return 'info';
+ }
+
+ return severityVariant[normalizedSeverity];
+}
+
+function getSeverityTitle(severity: unknown, t: ReturnType['t']) {
+ const normalizedSeverity = normalizeSeverity(severity);
+
+ if (!normalizedSeverity) {
+ return t('dashboard.alerts.unknownSeverity', { severity: t('dashboard.alerts.unknownSeverityValue') });
+ }
+
+ if (isKnownSeverity(normalizedSeverity)) {
+ return t(`dashboard.alerts.levels.${normalizedSeverity}`);
+ }
+
+ return t('dashboard.alerts.unknownSeverity', { severity: normalizedSeverity });
+}
+
+export function DashboardAlertsSection({ alerts = [] }: DashboardAlertsSectionProps) {
+ const { t } = useTranslation();
+
+ if (alerts.length === 0) {
+ return null;
+ }
+
+ return (
+
@@ -156,7 +138,7 @@ export function RecentPunishmentsSection({ punishments, loading }: RecentPunishm
{punishment.playerName}
- {punishment.type || t('dashboard.recentPunishments.punishment')} {t('dashboard.recentPunishments.by')} {punishment.issuerName || t('search.unknown')}
+ {punishment.type || t('dashboard.recentPunishments.punishment')} {t('dashboard.recentPunishments.by', { issuer: punishment.issuerName || t('search.unknown') })}
-
-
+
+ {alerts.map((alert) => (
+
+
+ ))}
+
+ );
+}
diff --git a/client/src/components/dashboard/RecentPunishmentsSection.tsx b/client/src/components/dashboard/RecentPunishmentsSection.tsx
index cf1b2d4..8fe80aa 100644
--- a/client/src/components/dashboard/RecentPunishmentsSection.tsx
+++ b/client/src/components/dashboard/RecentPunishmentsSection.tsx
@@ -2,7 +2,7 @@ import { useState } from 'react';
import { Card, CardContent, CardHeader, CardTitle } from '@modl-gg/shared-web/components/ui/card';
import { Badge } from '@modl-gg/shared-web/components/ui/badge';
import { Button } from '@modl-gg/shared-web/components/ui/button';
-import { Shield, Clock, User, AlertTriangle, ChevronDown, ChevronUp } from 'lucide-react';
+import { Shield, User, AlertTriangle, ChevronDown, ChevronUp } from 'lucide-react';
import { usePlayerWindow } from '@/contexts/PlayerWindowContext';
import { formatTimeAgo } from '@/utils/date-utils';
import { useTranslation } from 'react-i18next';
@@ -13,7 +13,6 @@ export interface RecentPunishment {
playerName: string;
playerUuid: string;
reason: string;
- duration?: string | number;
issuerName: string;
issued: string | Date;
active: boolean;
@@ -43,23 +42,6 @@ export function RecentPunishmentsSection({ punishments, loading }: RecentPunishm
setExpandedPunishments(newExpanded);
};
- const formatDuration = (duration?: string | number) => {
- if (!duration) return t('dashboard.recentPunishments.permanent');
-
- // Convert to string if it's a number
- const durationStr = String(duration);
-
- // Parse duration like "30d", "2h", "1w"
- const match = durationStr.match(/^(\d+)([dhm])$/);
- if (!match) return durationStr;
-
- const [, amount, unit] = match;
- const unitNames = { d: 'day', h: 'hour', m: 'minute' };
- const unitName = unitNames[unit as keyof typeof unitNames];
-
- return `${amount} ${unitName}${parseInt(amount) > 1 ? 's' : ''}`;
- };
-
if (loading) {
return (
+ {alert.message}
+
+ {punishment.reason || t('dashboard.recentPunishments.noReason')}
- {punishment.duration && ( -
- {t('dashboard.recentPunishments.duration')}
-
- )}
-
-
- {ticket.title}
{ticket.priority && (
-
+
{ticket.priority.toUpperCase()}
-
+
)}
{ticket.status && (
-
+
{ticket.status.replace('_', ' ').toUpperCase()}
-
+
)}
{
handleTicketClick(update.ticketId);
}}
@@ -138,26 +139,23 @@ export function TicketSubscriptionsSection({
{update.ticketTitle}
{update.isStaffReply ? t('dashboard.subscriptions.staff') : t('dashboard.subscriptions.player')}
-
+
@@ -170,6 +168,7 @@ export function TicketSubscriptionsSection({
handleUnsubscribe(update.ticketId, update.ticketTitle);
}}
title="Unsubscribe"
+ aria-label="Unsubscribe"
>
= ({ name, description, articles, slug }) => {
return (
([]);
const [loading, setLoading] = useState(true);
+ const [loadError, setLoadError] = useState(false);
const [signingOut, setSigningOut] = useState(false);
useEffect(() => {
apiFetch('/v1/panel/auth/sessions')
- .then(r => r.ok ? r.json() : [])
- .then(setSessions)
- .catch(() => setSessions([]))
+ .then(r => {
+ if (!r.ok) throw new Error('Failed to load sessions');
+ return r.json();
+ })
+ .then((data) => {
+ setSessions(Array.isArray(data?.sessions) ? data.sessions : []);
+ setLoadError(false);
+ })
+ .catch(() => {
+ setSessions([]);
+ setLoadError(true);
+ })
.finally(() => setLoading(false));
}, []);
- const handleSignOutAll = async () => {
+ // The backend logout endpoint only invalidates the current browser's session,
+ // so this button signs out this device only. onSignOut (useAuth().logout)
+ // already POSTs /v1/panel/auth/logout, so we must NOT call it again here.
+ const handleSignOut = () => {
setSigningOut(true);
- try {
- await apiFetch('/v1/panel/auth/logout', { method: 'POST' });
- onSignOutAll();
- } catch {
- toast({ title: t('common.error'), variant: 'destructive' });
- setSigningOut(false);
- }
+ onSignOut();
};
return (
@@ -86,6 +92,8 @@ function SessionsSection({ onSignOutAll }: { onSignOutAll: () => void }) {
{loading ? (
);
@@ -348,7 +356,7 @@ const AccountSettings = ({
{/* MIDDLE: passkeys + sessions */}
-
-
+
-
);
diff --git a/client/src/components/layout/MobileNavbar.tsx b/client/src/components/layout/MobileNavbar.tsx
index af3503a..8b0af52 100644
--- a/client/src/components/layout/MobileNavbar.tsx
+++ b/client/src/components/layout/MobileNavbar.tsx
@@ -7,10 +7,20 @@ import {
AlertCircle,
} from 'lucide-react';
import { useTranslation } from 'react-i18next';
+import { useIsFetching } from '@tanstack/react-query';
+import { usePermissions, PERMISSIONS } from '@/hooks/use-permissions';
+import { useAuth } from '@/hooks/use-auth';
const MobileNavbar = () => {
const { t } = useTranslation();
const [location, navigate] = useLocation();
+ const { hasPermission } = usePermissions();
+ const { user } = useAuth();
+
+ // Mirror Sidebar's loading-flash guard so permission-gated items don't appear
+ // before the user's permissions have loaded.
+ const fetchingCount = useIsFetching({ queryKey: ['userPermissions', user?.role] });
+ const permissionsLoading = fetchingCount > 0;
const isActive = (path: string) => {
return location === path
@@ -18,7 +28,7 @@ const MobileNavbar = () => {
: "text-muted-foreground";
};
- const navItems = [
+ const allNavItems = [
{
icon: {name}
- {description &&{description}
} +{name}
+ {description &&{description}
} {articles && articles.length > 0 ? (-
{articles.map(article => (
- - + {article.title} ))}
No articles in this category yet.
+No articles in this category yet.
)}
-
);
diff --git a/client/src/components/player-replays-list.tsx b/client/src/components/player-replays-list.tsx
new file mode 100644
index 0000000..3fecf2e
--- /dev/null
+++ b/client/src/components/player-replays-list.tsx
@@ -0,0 +1,129 @@
+import { Loader2, Play, TriangleAlert } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { useLocation } from 'wouter';
+import { Badge } from '@modl-gg/shared-web/components/ui/badge';
+import { Button } from '@modl-gg/shared-web/components/ui/button';
+import { usePlayerReplays } from '@/hooks/use-data';
+import { formatDateWithTime } from '@/utils/date-utils';
+import { formatFileSize } from '@/utils/file-utils';
+
+interface PlayerReplaysListProps {
+ playerId: string;
+}
+
+const isRawReplayId = (replayReference: string) => (
+ !replayReference.includes('://')
+ && !replayReference.includes('/')
+ && !replayReference.includes('?')
+ && !replayReference.includes('#')
+);
+
+const getReplayIdFromReference = (replayUrl?: string) => {
+ const replayReference = replayUrl?.trim();
+ if (!replayReference) {
+ return '';
+ }
+
+ if (isRawReplayId(replayReference)) {
+ return replayReference;
+ }
+
+ try {
+ const parsedReplayUrl = new URL(replayReference, window.location.origin);
+ return parsedReplayUrl.searchParams.get('id') || '';
+ } catch {
+ return '';
+ }
+};
+
+const getReplayId = (replay: { replayId?: string; replayUrl?: string; matchSource?: string }) => {
+ if (replay.matchSource === 'TICKET_FALLBACK') {
+ return getReplayIdFromReference(replay.replayUrl) || replay.replayId || '';
+ }
+
+ return replay.replayId || getReplayIdFromReference(replay.replayUrl);
+};
+
+const PlayerReplaysList = ({ playerId }: PlayerReplaysListProps) => {
+ const { t } = useTranslation();
+ const [, navigate] = useLocation();
+ const { data: replays, isLoading, error } = usePlayerReplays(playerId);
+
+ if (isLoading) {
+ return (
+
+ {
- // Close this specific window
- closePlayerWindow(playerId);
-
- // Update URL parameters - we keep other players in the URL
- const url = new URL(window.location.href);
- url.searchParams.delete("player");
-
- // If we have other windows open, add the first one to the URL
- const remainingPlayers = Object.keys(playerWindows).filter(
- (id) => id !== playerId,
- );
- if (remainingPlayers.length > 0) {
- url.searchParams.set("player", remainingPlayers[0]);
- }
-
- window.history.pushState({}, "", url.toString());
- }}
- />
- ))}
{navItems.map((item, index) => (
(null);
const headerRef = useRef(null);
const minimizedHeaderRef = useRef(null);
+ const initialPositionRef = useRef(initialPosition);
const [isDragging, setIsDragging] = useState(false);
const [position, setPosition] = useState(initialPosition);
const [size, setSize] = useState(initialSize);
+ const positionRef = useRef(position);
+ const sizeRef = useRef(size);
const [isMaximized, setIsMaximized] = useState(false);
const [isMinimized, setIsMinimized] = useState(false);
const [dragStart, setDragStart] = useState({ x: 0, y: 0 });
@@ -51,62 +54,72 @@ const ResizableWindow = ({
}>({ position: initialPosition, size: initialSize });
const [isInitialized, setIsInitialized] = useState(false);
+ useEffect(() => {
+ positionRef.current = position;
+ }, [position]);
+
+ useEffect(() => {
+ sizeRef.current = size;
+ }, [size]);
+
// Initialize position once
useEffect(() => {
if (!isOpen || !windowRef.current || isInitialized) return;
-
-// Use the global last known window configuration for player windows
+
+ const initial = initialPositionRef.current;
+
+ // Use the global last known window configuration for player windows
if (id.startsWith('player-')) {
- // Apply the size from the last window
+ // Apply the size from the last window
setSize(lastPlayerWindowConfig.size);
-
+
// Stagger the position slightly for multiple windows
const offset = 20;
const totalOpen = document.querySelectorAll('.resizable-window').length - 1;
-
- if (typeof lastPlayerWindowConfig.position.x === 'number' &&
+
+ if (typeof lastPlayerWindowConfig.position.x === 'number' &&
typeof lastPlayerWindowConfig.position.y === 'number') {
- setPosition({
+ setPosition({
x: lastPlayerWindowConfig.position.x + (offset * totalOpen),
y: lastPlayerWindowConfig.position.y + (offset * totalOpen)
});
} else {
setPosition(lastPlayerWindowConfig.position);
}
-
+
setIsInitialized(true);
}
// Center the window if initial position is percentage based
- if (typeof initialPosition.x === 'string' && initialPosition.x.includes('%')) {
+ if (typeof initial.x === 'string' && initial.x.includes('%')) {
const windowWidth = windowRef.current.offsetWidth;
const windowHeight = windowRef.current.offsetHeight;
const viewportWidth = window.innerWidth;
const viewportHeight = window.innerHeight;
-
+
// Safe parsing of percentage values
let xPercent = 0.5; // Default to 50%
let yPercent = 0.5; // Default to 50%
-
- if (typeof initialPosition.x === 'string') {
- const parsedX = parseFloat(initialPosition.x);
+
+ if (typeof initial.x === 'string') {
+ const parsedX = parseFloat(initial.x);
if (!isNaN(parsedX)) {
xPercent = parsedX / 100;
}
}
-
- if (typeof initialPosition.y === 'string') {
- const parsedY = parseFloat(initialPosition.y);
+
+ if (typeof initial.y === 'string') {
+ const parsedY = parseFloat(initial.y);
if (!isNaN(parsedY)) {
yPercent = parsedY / 100;
}
}
-
+
const xPos = viewportWidth * xPercent - windowWidth * xPercent;
const yPos = viewportHeight * yPercent - windowHeight * yPercent;
-
+
setPosition({ x: xPos, y: yPos });
setIsInitialized(true);
-
+
// Store this as the last known configuration if it's a player window
if (id.startsWith('player-')) {
// Update the global config
@@ -114,7 +127,7 @@ const ResizableWindow = ({
lastPlayerWindowConfig.position = { x: xPos, y: yPos };
}
}
- }, [isOpen, initialPosition, isInitialized, id]);
+ }, [isOpen, isInitialized, id]);
// Handle dragging
useEffect(() => {
@@ -138,14 +151,14 @@ const ResizableWindow = ({
const handleMouseUp = () => {
setIsDragging(false);
-
+
// Save position for new windows
if (id.startsWith('player-')) {
- // Update the global window state
- lastPlayerWindowConfig.size = size;
+ // Update the global window state using freshest values via refs
+ lastPlayerWindowConfig.size = sizeRef.current;
lastPlayerWindowConfig.position = {
- x: typeof position.x === 'number' ? position.x : 0,
- y: typeof position.y === 'number' ? position.y : 0
+ x: typeof positionRef.current.x === 'number' ? positionRef.current.x : 0,
+ y: typeof positionRef.current.y === 'number' ? positionRef.current.y : 0
};
}
};
@@ -159,7 +172,7 @@ const ResizableWindow = ({
document.removeEventListener('mousemove', handleMouseMove);
document.removeEventListener('mouseup', handleMouseUp);
};
- }, [isDragging, dragStart]);
+ }, [isDragging, dragStart, id]);
const handleMouseDown = (e: React.MouseEvent) => {
if (!windowRef.current) return;
diff --git a/client/src/components/layout/Sidebar.tsx b/client/src/components/layout/Sidebar.tsx
index c4e9d6e..148698f 100644
--- a/client/src/components/layout/Sidebar.tsx
+++ b/client/src/components/layout/Sidebar.tsx
@@ -1,7 +1,7 @@
import { useLocation } from "wouter";
import { cn } from "@/lib/utils";
import { useSidebar } from "@/hooks/use-sidebar";
-import { useState, useEffect, useRef } from "react";
+import { useState, useEffect, useMemo, useRef } from "react";
import { useTranslation } from "react-i18next";
import {
Home,
@@ -19,31 +19,53 @@ import {
import { Button } from "@modl-gg/shared-web/components/ui/button";
import { Input } from "@modl-gg/shared-web/components/ui/input";
import { useDashboard } from "@/contexts/DashboardContext";
-import PlayerWindow from "../../components/windows/PlayerWindow";
+import { usePlayerWindow } from "@/contexts/PlayerWindowContext";
import serverLogo from "../../assets/server-logo.png";
import { usePublicSettings } from "@/hooks/use-public-settings";
import { usePunishmentLookup } from "@/hooks/use-player-lookup";
import { usePermissions, PERMISSIONS } from "@/hooks/use-permissions";
import { useAuth } from "@/hooks/use-auth";
import { usePlayerSearch } from "@/hooks/use-data";
-import { useQuery } from '@tanstack/react-query';
+import { useIsFetching } from '@tanstack/react-query';
import { queryClient } from "@/lib/queryClient";
-import { apiFetch } from "@/lib/api";
+import { protoFetch } from "@/lib/proto-fetch";
+import { toNum } from "@/lib/proto-ui";
+import {
+ DashboardRecentTicketsResponseSchema,
+ DashboardRecentPunishmentsResponseSchema,
+} from "@modl-gg/proto/modl/v1/dashboard_pb.ts";
+import { PaginatedTicketsResponseSchema } from "@modl-gg/proto/modl/v1/ticket_pb.ts";
+import { PanelPunishmentTypesResponseSchema } from "@modl-gg/proto/modl/v1/settings_pb.ts";
+
+interface Player {
+ uuid?: string;
+ minecraftUuid?: string;
+ username?: string;
+ status?: string;
+ lastOnline?: string;
+ isOnline?: boolean;
+ online?: boolean;
+ data?: any;
+}
+
+const HOME_ICON = >(
- {},
- );
const closeTimeoutRef = useRef(null);
// Function to open player window when clicked from search
- const openPlayerWindow = (playerId: string) => {
- // Add this window to our tracked windows
- setPlayerWindows((prev) => ({
- ...prev,
- [playerId]: true, // Set this player's window to open
- }));
+ const openPlayerWindow = (playerId: string, username?: string) => {
+ openPlayerWindowFromContext(playerId, username);
openDashboardLookupWindow(); // Also open at dashboard level for tracking
};
- // Function to close a specific player window
- const closePlayerWindow = (playerId: string) => {
- setPlayerWindows((prev) => {
- // Create a new object excluding this player
- const newWindows = { ...prev };
- delete newWindows[playerId];
- return newWindows;
- });
- };
-
const openLookup = () => {
if (!isLookupOpen && !isLookupClosing) {
setIsLookupOpen(true);
@@ -191,14 +195,10 @@ const Sidebar = () => {
const playerIdFromUrl = url.searchParams.get("player");
if (playerIdFromUrl) {
- // Open this player's window
- setPlayerWindows((prev) => ({
- ...prev,
- [playerIdFromUrl]: true,
- }));
+ openPlayerWindowFromContext(playerIdFromUrl);
openDashboardLookupWindow();
}
- }, [openDashboardLookupWindow]);
+ }, [openDashboardLookupWindow, openPlayerWindowFromContext]);
// Clean up any timeouts when component unmounts
useEffect(() => {
@@ -209,48 +209,101 @@ const Sidebar = () => {
};
}, []);
+ // IMPORTANT: prefetch must decode + map identically to the real data hooks
+ // (useRecentTickets/useRecentPunishments/useTickets/usePunishmentTypes), since
+ // react-query keys purely by queryKey. Storing the raw proto-JSON wrapper here
+ // would let a hover-then-navigate serve a wrong-shaped cached value and crash
+ // the consuming page.
const prefetchRouteData = (path: string) => {
- const prefetchFn = async (url: string) => {
- const res = await apiFetch(url);
- if (!res.ok) throw new Error('Prefetch failed');
- return res.json();
- };
-
switch (path) {
case '/panel':
queryClient.prefetchQuery({
queryKey: ['/v1/panel/dashboard/recent-tickets', 3],
- queryFn: () => prefetchFn('/v1/panel/dashboard/recent-tickets?limit=3'),
+ queryFn: async () => {
+ const res = await protoFetch(
+ DashboardRecentTicketsResponseSchema,
+ '/v1/panel/dashboard/recent-tickets?limit=3',
+ );
+ return res.tickets.map((ticket) => ({
+ id: ticket.id,
+ title: ticket.title,
+ initialMessage: ticket.initialMessage,
+ status: ticket.status,
+ priority: ticket.priority,
+ createdAt: new Date(toNum(ticket.createdAt)),
+ playerName: ticket.playerName,
+ type: ticket.type,
+ }));
+ },
staleTime: 2 * 60 * 1000,
});
queryClient.prefetchQuery({
queryKey: ['/v1/panel/dashboard/recent-punishments', 5],
- queryFn: () => prefetchFn('/v1/panel/dashboard/recent-punishments?limit=5'),
+ queryFn: async () => {
+ const res = await protoFetch(
+ DashboardRecentPunishmentsResponseSchema,
+ '/v1/panel/dashboard/recent-punishments?limit=5',
+ );
+ return res.punishments.map((punishment) => ({
+ id: punishment.id,
+ playerName: punishment.playerName,
+ playerUuid: punishment.playerUuid,
+ type: punishment.type,
+ reason: punishment.reason,
+ issuerName: punishment.issuerName,
+ issued: new Date(toNum(punishment.issued)),
+ active: punishment.active,
+ }));
+ },
staleTime: 2 * 60 * 1000,
});
break;
case '/panel/tickets':
queryClient.prefetchQuery({
queryKey: ['/v1/panel/tickets', { page: 1, limit: 10, search: '', status: '', types: [], author: '', labels: [], assignees: [], sort: 'newest' }],
- queryFn: () => prefetchFn('/v1/panel/tickets?page=1&limit=10&sort=newest'),
+ queryFn: async () => {
+ const response = await protoFetch(
+ PaginatedTicketsResponseSchema,
+ '/v1/panel/tickets?page=1&limit=10&sort=newest',
+ );
+ return {
+ tickets: response.tickets.map((item) => ({
+ ...item,
+ date: Number(item.date),
+ lastReply: item.lastReply
+ ? { ...item.lastReply, created: Number(item.lastReply.created) }
+ : undefined,
+ })),
+ pagination: response.pagination
+ ? { ...response.pagination, totalTickets: Number(response.pagination.totalTickets) }
+ : undefined,
+ filters: response.filters,
+ };
+ },
staleTime: 30000,
});
break;
case '/panel/settings':
queryClient.prefetchQuery({
queryKey: ['/v1/panel/settings/punishment-types'],
- queryFn: () => prefetchFn('/v1/panel/settings/punishment-types'),
+ queryFn: async () => {
+ const response = await protoFetch(
+ PanelPunishmentTypesResponseSchema,
+ '/v1/panel/settings/punishment-types',
+ );
+ return response.punishmentTypes as any[];
+ },
staleTime: 5 * 60 * 1000,
});
break;
}
};
- const allNavItems = [
+ const allNavItems = useMemo(() => [
{
name: t('nav.home'),
path: "/panel",
- icon:
)}
- {/* Render multiple player windows with offset positioning */}
- {Object.entries(playerWindows).map(([playerId, isOpen], index) => (
-
{t('search.playersFound')}
- {filteredLookups.map((player: Player, index: number) => (
+ {filteredLookups.map((player: Player) => (
+
+ );
+ }
+
+ if (error) {
+ return (
+
+
+ );
+ }
+
+ if (!replays || replays.length === 0) {
+ return (
+
+
+ );
+ }
+
+ return (
+ {t('player.noReplays')}
+
+ {replays.map((replay) => {
+ const replayId = getReplayId(replay);
+ const canOpenReplay = Boolean(replayId)
+ && (replay.matchSource === 'TICKET_FALLBACK' || replay.status === 'COMPLETE');
+
+ return (
+
+ );
+};
+
+export default PlayerReplaysList;
diff --git a/client/src/components/settings/AccountSettings.tsx b/client/src/components/settings/AccountSettings.tsx
index 4cd1996..849a488 100644
--- a/client/src/components/settings/AccountSettings.tsx
+++ b/client/src/components/settings/AccountSettings.tsx
@@ -51,30 +51,36 @@ function isMobileUserAgent(ua: string): boolean {
return /Android|iPhone|iPad|Mobile/.test(ua);
}
-function SessionsSection({ onSignOutAll }: { onSignOutAll: () => void }) {
+function SessionsSection({ onSignOut }: { onSignOut: () => void }) {
const { t } = useTranslation();
- const { toast } = useToast();
const [sessions, setSessions] = useState
+
+ );
+ })}
+
+
+
+
+
+
+
+ {replay.status}
+
+ )}
+ {replay.matchSource && (
+
+ {replay.matchSource}
+
+ )}
+
+
+ {t('player.replayCreated')}: {replay.createdAt ? formatDateWithTime(replay.createdAt) : t('common.unknown')}
+ {t('player.replayMcVersion')}: {replay.mcVersion || t('common.unknown')}
+ {t('player.replaySize')}: {typeof replay.fileSize === 'number' ? formatFileSize(replay.fileSize) : t('common.unknown')}
+ {t('player.replayId')}: {replayId || t('common.unknown')}
+
+ Loading…
+ ) : loadError ? ( +Failed to load sessions.
) : sessions.length === 0 ? (No active sessions.
) : ( @@ -121,11 +129,11 @@ function SessionsSection({ onSignOutAll }: { onSignOutAll: () => void }) {
+ {hasPaymentIssue && (
+
+
+ )}
+
+
+
+
+
+
+
+
+ {/* Usage Overage Limits */}
+
+
+
+
+
+ {t('settings.billing.usageOverageLimitsDesc')}
+
+
+
+ {/* Storage Overage Slider */}
+
+
+
+ );
+};
+
+interface FreePlanViewProps {
+ t: (key: string, options?: any) => string;
+ isLoading: boolean;
+ handleCreateCheckoutSession: () => void;
+}
+
+const FreePlanView: React.FC
+
+
+
+
+
+ {hasPaymentIssue
+ ? t('settings.billing.paymentIssueStatusDesc')
+ : normalizedStatus === 'CANCELED' && currentPeriodEnd
+ ? t('settings.billing.accessEnds', { date: new Date(currentPeriodEnd).toLocaleDateString() })
+ : normalizedStatus === 'CANCELED' && !currentPeriodEnd
+ ? t('settings.billing.subscriptionCancelledAccessEnded')
+ : currentPeriodEnd
+ ? t(normalizedStatus === 'TRIALING' ? 'settings.billing.trialEnds' : 'settings.billing.nextBilling', { date: new Date(currentPeriodEnd).toLocaleDateString() })
+ : normalizedStatus === 'ACTIVE'
+ ? t('settings.billing.subscriptionActive')
+ : t('settings.billing.stripeManageDesc')
+ }
+
+
+
+ {getSubscriptionStatusBadge()}
+
+
+ {normalizedStatus !== 'CANCELED' && (
+
+ )}
+
+ {normalizedStatus === 'ACTIVE' && (
+
+
+
+
+
+
+ {t('settings.billing.cancelPremiumTitle')}
+
+ {t('settings.billing.cancelPremiumDesc', { date: currentPeriodEnd ? new Date(currentPeriodEnd).toLocaleDateString() : '' })}
+
+ {t('settings.billing.cancelPremiumDowngrade')} +
+
+
+ {t('settings.billing.keepSubscription')}
+
+ {t('settings.billing.yesCancelSubscription')}
+
+
+
+
+ )}
+
+ {normalizedStatus === 'CANCELED' && (
+ <>
+
+
+
+
+
+
+
+
+ {t('settings.billing.reactivatePremiumTitle')}
+
+ {t('settings.billing.reactivatePremiumDesc')}
+
+
+
+ {t('common.cancel')}
+
+ {t('settings.billing.yesReactivateSubscription')}
+
+
+
+
+
+ )}
+
+
+ + {t('settings.billing.cancelPremiumDowngrade')} +
+ setStorageOverageGB(v)}
+ min={0}
+ max={2000}
+ step={10}
+ />
+
+
+ {/* AI Request Overage Slider */}
+
+
+ {storageOverageGB} GB
+
+
+ {t('settings.billing.noOverage', { unit: 'GB' })}
+ 2,000 GB
+
+ + {t('settings.billing.storageOverageRate', { maxCost: (storageOverageGB * 0.08).toFixed(2) })} +
+
+ setAiOverageRequests(v)}
+ min={0}
+ max={5000}
+ step={100}
+ />
+
+
+
+
+ {aiOverageRequests.toLocaleString()} {t('settings.billing.requests')}
+
+
+ {t('settings.billing.noOverage', { unit: t('settings.billing.requests') })}
+ 5,000 {t('settings.billing.requests')}
+
+ + {t('settings.billing.aiOverageRate', { maxCost: (aiOverageRequests * 0.02).toFixed(2) })} +
++ {t('settings.billing.higherLimitsContact')} +
+ + +
+ {/* Upgrade to Premium Card */}
+
+
+
+
+
+
+
+ );
+};
+
const BillingSettings = () => {
const { data: billingStatus, isLoading: isBillingLoading } = useBillingStatus();
const cancelSubscriptionMutation = useCancelSubscription();
@@ -322,22 +706,22 @@ const BillingSettings = () => {
// Special handling for cancelled subscriptions
if (normalizedStatus === 'CANCELED') {
if (!currentPeriodEnd) {
- return
+
+
+
+
+ {t('settings.billing.upgradeToPremiumDesc')}
+
+
+ {/* Plan Details */}
+
+
+
+
+ {/* Premium Features */}
+
+
+
+
+
+ $9.99
+
+ {t('settings.billing.perMonth')}
+
+
+ {t('settings.billing.premiumFeatures')}
+
+ {premiumFeatures.map((feature, index) => (
+
+ {premiumFeatures.length === 0 && (
+
+
+ ))}
+
+ {feature.icon}
+
+ )}
+ {feature.text}
+ {t('settings.billing.premiumFeaturesUnavailable')}
+ )} +
-
-
-
- )}
-
-
- ${plan.price}
- /{plan.period}
-
-
- {plan.features.map((feature, index) => (
-
-
-
- {feature.included ? (
-
- ))}
-
- {feature.icon}
-
- )}
-
- {feature.text}
-
-
- {isCurrent ? (
-
- ) : canUpgrade ? (
-
- ) : (
-
- )}
-
-
- {hasPaymentIssue && (
-
-
- )}
-
-
-
-
-
-
-
-
- {/* Usage Overage Limits */}
-
-
-
-
-
- {t('settings.billing.usageOverageLimitsDesc')}
-
-
-
- {/* Storage Overage Slider */}
-
-
-
- );
- };
-
- const FreePlanView = () => {
- const premiumPlan = plans.find(p => p.id === 'premium');
- const premiumFeatures = premiumPlan?.features ?? [];
-
- return (
-
-
-
-
-
-
- {hasPaymentIssue
- ? t('settings.billing.paymentIssueStatusDesc')
- : normalizedStatus === 'CANCELED' && currentPeriodEnd
- ? t('settings.billing.accessEnds', { date: new Date(currentPeriodEnd).toLocaleDateString() })
- : normalizedStatus === 'CANCELED' && !currentPeriodEnd
- ? t('settings.billing.subscriptionCancelledAccessEnded')
- : currentPeriodEnd
- ? t(normalizedStatus === 'TRIALING' ? 'settings.billing.trialEnds' : 'settings.billing.nextBilling', { date: new Date(currentPeriodEnd).toLocaleDateString() })
- : normalizedStatus === 'ACTIVE'
- ? t('settings.billing.subscriptionActive')
- : t('settings.billing.stripeManageDesc')
- }
-
-
-
- {getSubscriptionStatusBadge()}
-
-
- {normalizedStatus !== 'CANCELED' && (
-
- )}
-
- {normalizedStatus === 'ACTIVE' && (
-
-
-
-
-
-
- {t('settings.billing.cancelPremiumTitle')}
-
- {t('settings.billing.cancelPremiumDesc', { date: currentPeriodEnd ? new Date(currentPeriodEnd).toLocaleDateString() : '' })}
-
- {t('settings.billing.cancelPremiumDowngrade')} -
-
-
- {t('settings.billing.keepSubscription')}
-
- {t('settings.billing.yesCancelSubscription')}
-
-
-
-
- )}
-
- {normalizedStatus === 'CANCELED' && (
- <>
-
-
-
-
-
-
-
-
- {t('settings.billing.reactivatePremiumTitle')}
-
- {t('settings.billing.reactivatePremiumDesc')}
-
-
-
- {t('common.cancel')}
-
- {t('settings.billing.yesReactivateSubscription')}
-
-
-
-
-
- )}
-
-
- - {t('settings.billing.cancelPremiumDowngrade')} -
- setStorageOverageGB(v)}
- min={0}
- max={2000}
- step={10}
- />
-
-
- {/* AI Request Overage Slider */}
-
-
- {storageOverageGB} GB
-
-
- {t('settings.billing.noOverage', { unit: 'GB' })}
- 2,000 GB
-
- - {t('settings.billing.storageOverageRate', { maxCost: (storageOverageGB * 0.08).toFixed(2) })} -
-
- setAiOverageRequests(v)}
- min={0}
- max={5000}
- step={100}
- />
-
-
-
-
- {aiOverageRequests.toLocaleString()} {t('settings.billing.requests')}
-
-
- {t('settings.billing.noOverage', { unit: t('settings.billing.requests') })}
- 5,000 {t('settings.billing.requests')}
-
- - {t('settings.billing.aiOverageRate', { maxCost: (aiOverageRequests * 0.02).toFixed(2) })} -
-- {t('settings.billing.higherLimitsContact')} -
- - -
- {/* Upgrade to Premium Card */}
-
-
-
-
-
-
-
- );
- };
-
if (isBillingLoading) {
return (
-
-
-
-
- {t('settings.billing.upgradeToPremiumDesc')}
-
-
- {/* Plan Details */}
-
-
-
-
- {/* Premium Features */}
-
-
-
-
-
- $9.99
-
- {t('settings.billing.perMonth')}
-
-
- {t('settings.billing.premiumFeatures')}
-
- {premiumFeatures.map((feature, index) => (
-
- {premiumFeatures.length === 0 && (
-
-
- ))}
-
- {feature.icon}
-
- )}
- {feature.text}
- {t('settings.billing.premiumFeaturesUnavailable')}
- )} -
@@ -780,15 +749,31 @@ const BillingSettings = () => {
}
const renderBillingContent = () => {
- if (isPremiumUser()) {
- return = ({
while (i < fields.length) {
const currentField = fields[i];
- if (currentField.inline && i < fields.length - 1 && fields[i + 1].inline) {
- // Two inline fields side by side
+ if (currentField.inline && i < fields.length - 2 && fields[i + 1].inline && fields[i + 2].inline) {
+ // Three inline fields in a row (test most-specific case first)
result.push(
-
) : (
diff --git a/client/src/components/settings/HomepageCardSettings.tsx b/client/src/components/settings/HomepageCardSettings.tsx
index 672be9b..820dde5 100644
--- a/client/src/components/settings/HomepageCardSettings.tsx
+++ b/client/src/components/settings/HomepageCardSettings.tsx
@@ -10,50 +10,52 @@ import { useToast } from '@modl-gg/shared-web/hooks/use-toast';
import { queryClient } from '@/lib/queryClient';
import { apiFetch } from '@/lib/api';
import { useQuery, useMutation } from '@tanstack/react-query';
-import { Plus, Edit, Trash2, GripVertical, Eye, EyeOff } from 'lucide-react';
+import {
+ Plus, Edit, Trash2, GripVertical, Eye, EyeOff,
+ Shield, UserPlus, MessageCircle, Mail, Phone, Scale,
+ Users, User, UserCheck, UserX, Crown, Award,
+ BookOpen, Book, FileText, ScrollText, Newspaper,
+ Library, GraduationCap, HelpCircle, Info, AlertCircle,
+ ExternalLink, Link as LinkIcon, ArrowRight, ChevronRight, Home,
+ Search, Download, Upload, Share,
+ MessageSquare, Send, Inbox, Bell, Megaphone,
+ Radio, Headphones, Mic, Video, Calendar,
+ Gamepad2, Zap, Server, Globe, Wifi, Signal,
+ Activity, BarChart, TrendingUp, Target, Trophy,
+ Settings, Wrench, Cog, Sliders, Filter,
+ Lock, Unlock, Key, ShieldCheck, ShieldAlert,
+ Minus, Check, X, AlertTriangle, CheckCircle,
+ XCircle, Clock, Timer, Pause, Play,
+ CreditCard, DollarSign, Gift, Star, Heart, ThumbsUp,
+ Flag, Map, Compass, Navigation, Bookmark, Tag,
+} from 'lucide-react';
import { Switch } from '@modl-gg/shared-web/components/ui/switch';
import { Label } from '@modl-gg/shared-web/components/ui/label';
-import * as LucideIcons from 'lucide-react';
import { DndProvider, useDrag, useDrop, DropTargetMonitor } from 'react-dnd';
import { HTML5Backend } from 'react-dnd-html5-backend';
-// Get list of curated icons suitable for homepage cards
-const getAvailableIcons = () => {
- return [
- // Common actions
- 'Shield', 'UserPlus', 'MessageCircle', 'Mail', 'Phone', 'Scale',
- 'Users', 'User', 'UserCheck', 'UserX', 'Crown', 'Award',
-
- // Content & knowledge
- 'BookOpen', 'Book', 'FileText', 'File', 'ScrollText', 'Newspaper',
- 'Library', 'GraduationCap', 'HelpCircle', 'Info', 'AlertCircle',
-
- // Navigation & links
- 'ExternalLink', 'Link', 'ArrowRight', 'ChevronRight', 'Home',
- 'Search', 'Eye', 'Download', 'Upload', 'Share',
-
- // Communication
- 'MessageSquare', 'Send', 'Inbox', 'Bell', 'Megaphone',
- 'Radio', 'Headphones', 'Mic', 'Video', 'Calendar',
-
- // Games & servers
- 'Gamepad2', 'Zap', 'Server', 'Globe', 'Wifi', 'Signal',
- 'Activity', 'BarChart', 'TrendingUp', 'Target', 'Trophy',
-
- // Settings & tools
- 'Settings', 'Tool', 'Wrench', 'Cog', 'Sliders', 'Filter',
- 'Lock', 'Unlock', 'Key', 'ShieldCheck', 'ShieldAlert',
-
- // Actions & status
- 'Plus', 'Minus', 'Check', 'X', 'AlertTriangle', 'CheckCircle',
- 'XCircle', 'Clock', 'Timer', 'Pause', 'Play', 'Stop',
-
- // Commerce & misc
- 'CreditCard', 'DollarSign', 'Gift', 'Star', 'Heart', 'ThumbsUp',
- 'Flag', 'Map', 'Compass', 'Navigation', 'Bookmark', 'Tag'
- ].sort();
+// Allowlist of icons selectable for homepage cards; keep in sync with HomePage.tsx ICONS map.
+const ICONS: Record
-
+
{getStatusText(domainStatus.status)}
-
+
{domainStatus.domain}
@@ -421,14 +422,34 @@ const DomainSettings: React.FC = () => {
)}
-
+
+
+
+
+
+
+ {t('settings.domain.removeDomainTitle', 'Remove custom domain?')}
+
+ {t('settings.domain.removeDomainConfirm', "Traffic to this domain will stop working immediately. You'll need to update your DNS / panel config to restore access.")}
+
+
+
+ {t('common.cancel')}
+
+ {t('common.remove')}
+
+
+
+
+
+
);
- i += 2; // Skip next field as we've already processed it
- } else if (currentField.inline && i < fields.length - 1 && fields[i + 1].inline && i < fields.length - 2 && fields[i + 2].inline) {
- // Three inline fields in a row
+ i += 3; // Skip next two fields
+ } else if (currentField.inline && i < fields.length - 1 && fields[i + 1].inline) {
+ // Two inline fields side by side
result.push(
-
{replaceVariablesForPreview(currentField.name)}
@@ -260,13 +260,21 @@ const EmbedTemplateEditor: React.FC = ({
{replaceVariablesForPreview(fields[i + 1].value)}
+
+ {replaceVariablesForPreview(fields[i + 2].name)}
+
+
+ {replaceVariablesForPreview(fields[i + 2].value)}
+
+
+
-
);
- i += 3; // Skip next two fields
+ i += 2; // Skip next field as we've already processed it
} else {
// Single field (either non-inline or single inline)
result.push(
diff --git a/client/src/components/settings/GeneralSettings.tsx b/client/src/components/settings/GeneralSettings.tsx
index f0d0c5d..09d3462 100644
--- a/client/src/components/settings/GeneralSettings.tsx
+++ b/client/src/components/settings/GeneralSettings.tsx
@@ -6,6 +6,7 @@ import { Input } from '@modl-gg/shared-web/components/ui/input';
import { Label } from '@modl-gg/shared-web/components/ui/label';
import { Separator } from '@modl-gg/shared-web/components/ui/separator';
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@modl-gg/shared-web/components/ui/collapsible';
+import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from '@modl-gg/shared-web/components/ui/alert-dialog';
import { useAuth } from '@/hooks/use-auth';
import { usePermissions } from '@/hooks/use-permissions';
import BillingSettings from './BillingSettings';
@@ -261,10 +262,22 @@ const GeneralSettings = ({
@@ -272,14 +285,56 @@ const GeneralSettings = ({
{replaceVariablesForPreview(currentField.name)}
@@ -283,17 +291,9 @@ const EmbedTemplateEditor: React.FC = ({
{replaceVariablesForPreview(fields[i + 1].value)}
-
- {replaceVariablesForPreview(fields[i + 2].name)}
-
-
- {replaceVariablesForPreview(fields[i + 2].value)}
-
-
{showApiKey ? (fullApiKey || apiKey) : maskApiKey(apiKey)}
-
-
-
+
+
+
+
+
+
+ {t('settings.general.regenerateApiKeyTitle', 'Regenerate API key?')}
+
+ {t('settings.general.regenerateApiKeyConfirm', 'The old key will stop working immediately and any Minecraft servers using it will lose access until updated.')}
+
+
+
+ {t('common.cancel')}
+
+ {t('settings.general.regenerate')}
+
+
+
+
+
+
+
+
+
+
+ {t('settings.general.revokeApiKeyTitle', 'Revoke API key?')}
+
+ {t('settings.general.revokeApiKeyConfirm', 'This will immediately invalidate the key. Minecraft servers using this key will lose access. This cannot be undone.')}
+
+
+
+ {t('common.cancel')}
+
+ {t('settings.general.revoke')}
+
+
+
+
@@ -339,7 +341,9 @@ const KnowledgebaseSettings: React.FC = () => {
useEffect(() => {
if (categories) {
- setDisplayedCategories(categories.sort((a, b) => a.ordinal - b.ordinal));
+ // Copy before sorting: Array.prototype.sort mutates in place, and
+ // categories is the array held in the react-query cache.
+ setDisplayedCategories([...categories].sort((a, b) => a.ordinal - b.ordinal));
}
}, [categories]);
diff --git a/client/src/components/settings/MigrationTool.tsx b/client/src/components/settings/MigrationTool.tsx
index 470b8c0..e70c18c 100644
--- a/client/src/components/settings/MigrationTool.tsx
+++ b/client/src/components/settings/MigrationTool.tsx
@@ -45,7 +45,7 @@ const MigrationTool: React.FC = () => {
}
return undefined;
- }, [currentMigration?.id, currentMigration?.status]);
+ }, [currentMigration?.taskId, currentMigration?.status]);
const handleStartMigration = async () => {
if (!selectedType || onCooldown || isActive) return;
@@ -76,15 +76,15 @@ const MigrationTool: React.FC = () => {
switch (status) {
case 'idle':
case 'building_json':
- return
@@ -164,7 +169,7 @@ const MigrationTool: React.FC = () => {
{/* Active Migration Progress */}
{isActive && currentMigration && (
-
+
{t('common.cancel')}
- {t('common.remove')}
+ {t('common.remove')}
diff --git a/client/src/components/settings/ProfileSettings.tsx b/client/src/components/settings/ProfileSettings.tsx
index 4019cd1..8576ad5 100644
--- a/client/src/components/settings/ProfileSettings.tsx
+++ b/client/src/components/settings/ProfileSettings.tsx
@@ -10,7 +10,7 @@ import { apiFetch } from '@/lib/api';
const ProfileSettings = () => {
const { t } = useTranslation();
- const { user } = useAuth();
+ const { user, refreshUser } = useAuth();
const { toast } = useToast();
const [profileUsername, setProfileUsername] = useState('');
@@ -40,13 +40,12 @@ const ProfileSettings = () => {
title: t('settings.account.profileUpdated'),
description: t('settings.account.profileUpdatedDesc')
});
- // Refresh the page to update the user context
- setTimeout(() => {
- window.location.reload();
- }, 1000);
+ // Refresh the user context without a full SPA reload.
+ await refreshUser();
} else {
- const errorData = await response.json();
- throw new Error(errorData.message || t('settings.account.updateProfileFailed'));
+ // Backend /v1 panel errors use ErrorResponseDTO { status, error }.
+ const errorData = await response.json().catch(() => ({}));
+ throw new Error(errorData.error || errorData.message || t('settings.account.updateProfileFailed'));
}
} catch (error) {
toast({
diff --git a/client/src/components/settings/PunishmentSettings.tsx b/client/src/components/settings/PunishmentSettings.tsx
index 727e172..c631c97 100644
--- a/client/src/components/settings/PunishmentSettings.tsx
+++ b/client/src/components/settings/PunishmentSettings.tsx
@@ -119,7 +119,9 @@ const PunishmentSettings = ({
...prev,
gameplay: {
...prev.gameplay,
- medium: values[0]
+ medium: values[0],
+ // Keep habitual strictly above medium so offense-level ordering stays valid.
+ habitual: Math.max(prev.gameplay.habitual, values[0] + 1)
}
}))}
/>
@@ -190,7 +192,9 @@ const PunishmentSettings = ({
...prev,
social: {
...prev.social,
- medium: values[0]
+ medium: values[0],
+ // Keep habitual strictly above medium so offense-level ordering stays valid.
+ habitual: Math.max(prev.social.habitual, values[0] + 1)
}
}))}
/>
diff --git a/client/src/components/settings/StaffManagementPanel.tsx b/client/src/components/settings/StaffManagementPanel.tsx
index 1776d01..e8fbf59 100644
--- a/client/src/components/settings/StaffManagementPanel.tsx
+++ b/client/src/components/settings/StaffManagementPanel.tsx
@@ -120,10 +120,10 @@ const StaffManagementPanel = () => {
});
if (!response.ok) {
- const errorData = await response.json().catch(() => ({ message: t('settings.staff.removeStaffFailed') }));
+ const errorData = await response.json().catch(() => ({}));
toast({
title: t('toast.error'),
- description: errorData.message || t('settings.staff.removeStaffFailed'),
+ description: errorData.error || errorData.message || t('settings.staff.removeStaffFailed'),
variant: 'destructive',
});
return;
@@ -149,8 +149,8 @@ const StaffManagementPanel = () => {
method: 'POST',
});
if (!response.ok) {
- const errorData = await response.json().catch(() => ({ message: t('settings.staff.resendInvitationFailed') }));
- throw new Error(errorData.message);
+ const errorData = await response.json().catch(() => ({}));
+ throw new Error(errorData.error || errorData.message || t('settings.staff.resendInvitationFailed'));
}
toast({
title: t('toast.success'),
diff --git a/client/src/components/settings/StaffRolesCard.tsx b/client/src/components/settings/StaffRolesCard.tsx
index 40735fd..d0f594a 100644
--- a/client/src/components/settings/StaffRolesCard.tsx
+++ b/client/src/components/settings/StaffRolesCard.tsx
@@ -70,6 +70,7 @@ const DEFAULT_PERMISSIONS: Permission[] = [
{ id: 'admin.audit.view.logs', name: 'View Logs', description: 'View audit trail of staff actions', category: 'admin', parentId: 'admin.audit.view' },
// Punishment permissions
+ { id: 'punishment.view', name: 'View Punishments', description: 'View player profiles, punishments, and linked accounts', category: 'punishment', parentId: null },
{ id: 'punishment.modify', name: 'Modify Punishments', description: 'Full control over existing punishments (includes all sub-permissions)', category: 'punishment', parentId: null },
{ id: 'punishment.modify.pardon', name: 'Pardon Punishments', description: 'Pardon punishments and clear associated points', category: 'punishment', parentId: 'punishment.modify' },
{ id: 'punishment.modify.duration', name: 'Modify Duration', description: 'Change punishment duration', category: 'punishment', parentId: 'punishment.modify' },
@@ -265,7 +266,7 @@ const DraggableRoleCard: React.FC = ({
)}
{role.name === 'Super Admin' && (
-
+
{t('settings.roles.highestRank')}
)}
@@ -276,6 +277,7 @@ const DraggableRoleCard: React.FC = ({
size="sm"
onClick={() => onEditRole(role)}
disabled={role.name === 'Super Admin' || (roleOrderMap.get(currentUserRole || '') ?? 999) >= getRoleOrder(role)}
+ aria-label={t('common.edit')}
>
= ({
size="sm"
onClick={() => onDeleteRole(role)}
disabled={role.name === 'Super Admin' || (roleOrderMap.get(currentUserRole || '') ?? 999) >= getRoleOrder(role)}
+ aria-label={t('common.delete')}
>
diff --git a/client/src/components/settings/TicketSettings.tsx b/client/src/components/settings/TicketSettings.tsx
index 8a14fb3..8c8087c 100644
--- a/client/src/components/settings/TicketSettings.tsx
+++ b/client/src/components/settings/TicketSettings.tsx
@@ -21,6 +21,7 @@ import { TicketFormField, TicketFormSection, TicketFormSettings, TicketFormsConf
import { useBillingStatus } from '@/hooks/use-data';
import { useAuth } from '@/hooks/use-auth';
import { hasPremiumAccess } from '@/lib/backend-enums';
+import { StatusBadge } from '@/components/ui/status-badge';
// Label type definition
interface Label {
@@ -2191,10 +2192,10 @@ const TicketSettings = ({
+
+
)}
@@ -172,7 +177,7 @@ const MigrationTool: React.FC = () => {
@@ -210,7 +215,7 @@ const MigrationTool: React.FC = () => {
{currentMigration.progress.totalRecords && ` / ${currentMigration.progress.totalRecords}`}
{currentMigration.progress.recordsSkipped > 0 && (
-
+
{t('settings.migration.skipped', { count: currentMigration.progress.recordsSkipped })}
)}
@@ -229,7 +234,8 @@ const MigrationTool: React.FC = () => {
)}
{showCompletedAlert && lastCompletedMigration && (() => {
- const isCancelled = lastCompletedMigration.error?.toLowerCase().includes('cancelled');
+ const lowerError = lastCompletedMigration.error?.toLowerCase() ?? '';
+ const isCancelled = lowerError.includes('cancelled') || lowerError.includes('canceled');
const isSuccess = lastCompletedMigration.status === 'completed';
const variant = isSuccess ? 'success' : (isCancelled ? 'warning' : 'error');
@@ -237,9 +243,9 @@ const MigrationTool: React.FC = () => {
{getStatusText(currentMigration.status)}
- {t('settings.migration.migratingFrom', { type: currentMigration.migrationType })} + {t('settings.migration.migratingFrom', { type: currentMigration.type })}
-
- )}
-
- {/* Last Migration Timestamp */}
- {migrationStatus?.lastMigrationTimestamp && (
- {t('settings.migration.recentMigrations')}
-
- {migrationStatus.history.slice(0, 5).map((entry: any, index: number) => (
-
-
-
- ))}
-
- {entry.status === 'completed' ? (
-
-
-
- - {entry.migrationType.toUpperCase()} -
-- {formatDate(entry.completedAt)} -
-
-
- - {t('settings.migration.recordsCount', { count: entry.recordsProcessed })} -
- {entry.recordsSkipped > 0 && ( -- {t('settings.migration.skipped', { count: entry.recordsSkipped })} -
- )} -- {t('settings.migration.lastSuccessfulMigration', { date: formatDate(migrationStatus.lastMigrationTimestamp) })} -
- )}{t('common.loadingUser')}
;
- }
-
// Update local roles when server data changes
useEffect(() => {
if (effectiveRoles.length > 0) {
@@ -385,6 +384,12 @@ export default function StaffRolesCard() {
}
}, [effectiveRoles]);
+ // Guard placed AFTER all hook declarations so the hook count never changes
+ // between renders (Rules of Hooks).
+ if (!currentUser) {
+ return {t('common.loadingUser')}
;
+ }
+
// Handle drag start
const handleDragStart = () => {
setIsDragInProgress(true);
@@ -428,11 +433,41 @@ export default function StaffRolesCard() {
// Filter out Super Admin from the reorder request since it should never be reordered
// Super Admin should always stay at order 0, other roles start from order 1
const nonSuperAdminRoles = pendingReorder.filter(role => role.name !== 'Super Admin');
- const roleOrder = nonSuperAdminRoles.map((role, index) => ({
- id: role.id,
- order: index + 1 // Start from 1 since Super Admin is always 0
- }));
-
+
+ let roleOrder: Array<{ id: string; order: number }>;
+ if (isSuperAdmin) {
+ // Super Admin has authority over every role, so it may renumber the
+ // entire non-super-admin hierarchy starting at 1.
+ roleOrder = nonSuperAdminRoles.map((role, index) => ({
+ id: role.id,
+ order: index + 1, // Start from 1 since Super Admin is always 0
+ }));
+ } else {
+ // A non-super-admin performer may only reorder roles STRICTLY below
+ // their own authority. The backend rejects the whole request if any
+ // submitted role is at/above the performer's order, so we must:
+ // (1) only submit roles whose order is greater than the performer's, and
+ // (2) assign new orders that remain strictly greater than performerOrder,
+ // preserving the existing higher-authority roles' positions.
+ const performerOrder = roleOrderMap.get(currentUser.role) ?? 999;
+ const editableRoles = nonSuperAdminRoles.filter(role => {
+ const currentOrder = role.order ?? 999;
+ return currentOrder > performerOrder;
+ });
+ roleOrder = editableRoles.map((role, index) => ({
+ id: role.id,
+ order: performerOrder + 1 + index,
+ }));
+ }
+
+ if (roleOrder.length === 0) {
+ // Nothing the performer is allowed to reorder; treat as a no-op success.
+ setOriginalRoles([...localRoles]);
+ setPendingReorder(null);
+ setShowReorderConfirm(false);
+ return;
+ }
+
const response = await apiFetch('/v1/panel/roles/reorder', {
method: 'POST',
headers: {
@@ -885,29 +920,29 @@ export default function StaffRolesCard() {
{/* Delete Confirmation Dialog */}
-
+
+
+
+
{/* Role Reorder Confirmation Dialog */}
{t('settings.tickets.aiModerationSettings')}
{!isPremiumUser() && ( -
@@ -2218,12 +2219,12 @@ const TicketSettings = ({
{!isPremiumUser() ? (
-
{t('settings.tickets.premiumFeature')}
{t('settings.tickets.aiModerationPremiumDesc')}
-