598 lines
29 KiB
TypeScript
598 lines
29 KiB
TypeScript
import React, { useState, useEffect } from 'react';
|
|
import {
|
|
Box, Container, Typography, Button, TextField,
|
|
InputAdornment, IconButton, AppBar, Toolbar, Avatar,
|
|
Tooltip, Dialog, DialogTitle, DialogContent,
|
|
DialogActions, CircularProgress, Paper, Chip,
|
|
Table, TableBody, TableCell, TableContainer, TableHead, TableRow,
|
|
Switch, FormControlLabel, Divider, List, ListItem, ListItemText, ListItemSecondaryAction,
|
|
Select, MenuItem, FormControl, InputLabel, Tabs, Tab
|
|
} from '@mui/material';
|
|
import SearchIcon from '@mui/icons-material/Search';
|
|
import AddIcon from '@mui/icons-material/Add';
|
|
import SteamIcon from '@mui/icons-material/SportsEsports';
|
|
import DeleteIcon from '@mui/icons-material/Delete';
|
|
import OpenInNewIcon from '@mui/icons-material/OpenInNew';
|
|
import SyncIcon from '@mui/icons-material/Sync';
|
|
import BoltIcon from '@mui/icons-material/Bolt';
|
|
import TimerIcon from '@mui/icons-material/Timer';
|
|
import LockResetIcon from '@mui/icons-material/LockReset';
|
|
import SettingsIcon from '@mui/icons-material/Settings';
|
|
import ShareIcon from '@mui/icons-material/Share';
|
|
import GroupAddIcon from '@mui/icons-material/GroupAdd';
|
|
import ShieldIcon from '@mui/icons-material/Shield';
|
|
import GppBadIcon from '@mui/icons-material/GppBad';
|
|
import PeopleIcon from '@mui/icons-material/People';
|
|
import VerifiedUserIcon from '@mui/icons-material/VerifiedUser';
|
|
import WorkspacePremiumIcon from '@mui/icons-material/WorkspacePremium';
|
|
import AdminPanelSettingsIcon from '@mui/icons-material/AdminPanelSettings';
|
|
import StorageIcon from '@mui/icons-material/Storage';
|
|
import GroupIcon from '@mui/icons-material/Group';
|
|
import AccountTreeIcon from '@mui/icons-material/AccountTree';
|
|
import { useAccounts, type Account } from '../hooks/useAccounts';
|
|
import { useAppTheme } from '../theme/ThemeContext';
|
|
import type { ThemeType } from '../theme/SteamTheme';
|
|
import NebulaBanner from '../components/NebulaBanner';
|
|
|
|
const AdminPanel: React.FC<{ open: boolean, onClose: () => void }> = ({ open, onClose }) => {
|
|
const { adminGetStats, adminGetUsers, adminDeleteUser, adminGetAccounts, adminRemoveAccount } = useAccounts();
|
|
const [tab, setTab] = useState(0);
|
|
const [stats, setStats] = useState<any>(null);
|
|
const [users, setUsers] = useState<any[]>([]);
|
|
const [accounts, setAccounts] = useState<any[]>([]);
|
|
const [loading, setLoading] = useState(false);
|
|
|
|
const loadData = async () => {
|
|
setLoading(true);
|
|
try {
|
|
if (tab === 0) setStats(await adminGetStats());
|
|
if (tab === 1) setUsers(await adminGetUsers());
|
|
if (tab === 2) setAccounts(await adminGetAccounts());
|
|
} catch (e) {}
|
|
setLoading(false);
|
|
};
|
|
|
|
useEffect(() => { if (open) loadData(); }, [open, tab]);
|
|
|
|
const handleDeleteUser = async (id: string) => {
|
|
if (window.confirm("Wipe this user and all their accounts?")) {
|
|
await adminDeleteUser(id);
|
|
loadData();
|
|
}
|
|
};
|
|
|
|
const handleForceRemove = async (steamId: string) => {
|
|
if (window.confirm("Force remove this account from server?")) {
|
|
await adminRemoveAccount(steamId);
|
|
loadData();
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Dialog open={open} onClose={onClose} maxWidth="md" fullWidth>
|
|
<DialogTitle sx={{ bgcolor: 'background.paper', color: 'text.primary', display: 'flex', alignItems: 'center', gap: 1 }}>
|
|
<AdminPanelSettingsIcon color="primary" /> Server Administration
|
|
</DialogTitle>
|
|
<Tabs value={tab} onChange={(_, v) => setTab(v)} sx={{ bgcolor: 'background.paper', borderBottom: 1, borderColor: 'divider' }}>
|
|
<Tab icon={<StorageIcon />} label="Overview" />
|
|
<Tab icon={<GroupIcon />} label="Users" />
|
|
<Tab icon={<AccountTreeIcon />} label="Global Accounts" />
|
|
</Tabs>
|
|
<DialogContent sx={{ bgcolor: 'background.paper', minHeight: 400, pt: 2 }}>
|
|
{loading ? <Box sx={{ display: 'flex', justifyContent: 'center', mt: 10 }}><CircularProgress /></Box> : (
|
|
<>
|
|
{tab === 0 && stats && (
|
|
<Box sx={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 2, mt: 2 }}>
|
|
{[
|
|
{ label: 'Total Users', value: stats.users },
|
|
{ label: 'Total Accounts', value: stats.accounts },
|
|
{ label: 'Active Cooldowns', value: stats.activeCooldowns }
|
|
].map((s) => (
|
|
<Paper key={s.label} sx={{ p: 3, textAlign: 'center', bgcolor: 'rgba(0,0,0,0.1)' }}>
|
|
<Typography variant="h4" color="primary" sx={{ fontWeight: 'bold' }}>{s.value}</Typography>
|
|
<Typography variant="caption" color="textSecondary">{s.label}</Typography>
|
|
</Paper>
|
|
))}
|
|
</Box>
|
|
)}
|
|
{tab === 1 && (
|
|
<List>
|
|
{users.map(u => (
|
|
<ListItem key={u._id} divider sx={{ borderColor: 'divider' }}>
|
|
<Avatar src={u.avatar} sx={{ mr: 2 }} />
|
|
<ListItemText primary={u.personaName} secondary={u.steamId} primaryTypographyProps={{ color: 'text.primary' }} />
|
|
<ListItemSecondaryAction>
|
|
<IconButton color="error" onClick={() => handleDeleteUser(u._id)}><DeleteIcon /></IconButton>
|
|
</ListItemSecondaryAction>
|
|
</ListItem>
|
|
))}
|
|
</List>
|
|
)}
|
|
{tab === 2 && (
|
|
<List>
|
|
{accounts.map(a => (
|
|
<ListItem key={a.steamId} divider sx={{ borderColor: 'divider' }}>
|
|
<Avatar src={a.avatar} variant="square" sx={{ mr: 2 }} />
|
|
<ListItemText
|
|
primary={a.personaName}
|
|
secondary={`Owned by: ${a.addedBy?.personaName || 'Unknown'} (${a.steamId})`}
|
|
primaryTypographyProps={{ color: 'text.primary' }}
|
|
/>
|
|
<ListItemSecondaryAction>
|
|
<IconButton color="error" onClick={() => handleForceRemove(a.steamId)}><DeleteIcon /></IconButton>
|
|
</ListItemSecondaryAction>
|
|
</ListItem>
|
|
))}
|
|
</List>
|
|
)}
|
|
</>
|
|
)}
|
|
</DialogContent>
|
|
<DialogActions sx={{ bgcolor: 'background.paper', p: 2 }}>
|
|
<Button onClick={onClose} variant="contained" color="inherit">Close Panel</Button>
|
|
</DialogActions>
|
|
</Dialog>
|
|
);
|
|
};
|
|
|
|
const Dashboard: React.FC = () => {
|
|
const { currentTheme, setTheme } = useAppTheme();
|
|
const {
|
|
accounts, isLoading, isSyncing, serverConfig, deleteAccount,
|
|
switchAccount, openSteamAppLogin, openSteamLogin, updateServerConfig, loginToServer, syncNow
|
|
} = useAccounts();
|
|
|
|
const [searchTerm, setSearchTerm] = useState('');
|
|
const [isSettingsOpen, setIsSettingsOpen] = useState(false);
|
|
const [isAdminPanelOpen, setIsAdminPanelOpen] = useState(false);
|
|
const [serverUrl, setServerUrl] = useState('');
|
|
|
|
useEffect(() => {
|
|
if (serverConfig?.url) setServerUrl(serverConfig.url);
|
|
}, [serverConfig?.url]);
|
|
|
|
const saveSettings = async () => {
|
|
await updateServerConfig({ url: serverUrl });
|
|
alert("Server URL updated!");
|
|
};
|
|
|
|
const safeAccounts = Array.isArray(accounts) ? accounts : [];
|
|
const filteredAccounts = safeAccounts.filter((acc) => {
|
|
if (!acc) return false;
|
|
const name = acc.personaName || 'Unknown';
|
|
const id = acc.steamId || '';
|
|
return name.toLowerCase().includes(searchTerm.toLowerCase()) || id.includes(searchTerm);
|
|
});
|
|
|
|
return (
|
|
<Box sx={{ minHeight: '100vh', display: 'flex', flexDirection: 'column', backgroundColor: 'background.default' }}>
|
|
<NebulaBanner />
|
|
|
|
<AppBar position="sticky" sx={{ WebkitAppRegion: 'drag', background: 'background.default', boxShadow: 'none', borderBottom: '1px solid', borderColor: 'divider' } as any}>
|
|
<Toolbar variant="dense">
|
|
<SteamIcon sx={{ mr: 2, color: 'primary.main' }} />
|
|
<Typography variant="h6" component="div" sx={{ flexGrow: 1, fontWeight: 'bold', fontSize: '1rem', letterSpacing: '1px' }}>
|
|
ULTIMATE BAN TRACKER
|
|
</Typography>
|
|
|
|
<Box sx={{ display: 'flex', alignItems: 'center', gap: 2, WebkitAppRegion: 'no-drag' } as any}>
|
|
{/* Admin Button - Only visible if isAdmin is true */}
|
|
{serverConfig?.isAdmin && (
|
|
<Tooltip title="Open Admin Panel">
|
|
<IconButton color="primary" onClick={() => setIsAdminPanelOpen(true)}>
|
|
<AdminPanelSettingsIcon />
|
|
</IconButton>
|
|
</Tooltip>
|
|
)}
|
|
|
|
<Box sx={{ display: 'flex', alignItems: 'center', mr: 1 }}>
|
|
{isSyncing ? (
|
|
<CircularProgress size={16} sx={{ color: 'primary.main', mr: 1 }} />
|
|
) : (
|
|
<IconButton size="small" onClick={() => syncNow()} disabled={!serverConfig?.enabled} sx={{ color: 'primary.main' }}>
|
|
<SyncIcon sx={{ fontSize: 18 }} />
|
|
</IconButton>
|
|
)}
|
|
</Box>
|
|
|
|
<TextField
|
|
size="small"
|
|
placeholder="Search accounts..."
|
|
value={searchTerm}
|
|
onChange={(e) => setSearchTerm(e.target.value)}
|
|
sx={{
|
|
backgroundColor: 'rgba(255, 255, 255, 0.05)',
|
|
borderRadius: 1,
|
|
width: 200,
|
|
'& .MuiOutlinedInput-root': { '& fieldset': { border: 'none' }, height: 32 }
|
|
}}
|
|
InputProps={{
|
|
startAdornment: (
|
|
<InputAdornment position="start">
|
|
<SearchIcon fontSize="small" sx={{ color: 'text.secondary' }} />
|
|
</InputAdornment>
|
|
),
|
|
}}
|
|
/>
|
|
|
|
<Button
|
|
variant="contained"
|
|
color="primary"
|
|
startIcon={<AddIcon />}
|
|
onClick={() => openSteamAppLogin()}
|
|
sx={{ height: 32 }}
|
|
>
|
|
Add
|
|
</Button>
|
|
|
|
<IconButton color="inherit" onClick={() => setIsSettingsOpen(true)}>
|
|
<SettingsIcon />
|
|
</IconButton>
|
|
</Box>
|
|
</Toolbar>
|
|
</AppBar>
|
|
|
|
<Container maxWidth="xl" sx={{ mt: 4, mb: 4, flexGrow: 1, overflowY: 'auto' }}>
|
|
{isLoading ? (
|
|
<Box sx={{ display: 'flex', justifyContent: 'center', mt: 10 }}><CircularProgress color="primary" /></Box>
|
|
) : (
|
|
<TableContainer component={Paper} sx={{ background: 'background.paper', backdropFilter: 'blur(10px)', borderRadius: 0, border: '1px solid', borderColor: 'divider' }}>
|
|
<Table size="small">
|
|
<TableHead>
|
|
<TableRow sx={{ background: 'rgba(0,0,0,0.1)' }}>
|
|
<TableCell sx={{ color: 'text.secondary', fontWeight: 'bold', width: 60 }}>AVATAR</TableCell>
|
|
<TableCell sx={{ color: 'text.secondary', fontWeight: 'bold' }}>ACCOUNT</TableCell>
|
|
<TableCell sx={{ color: 'text.secondary', fontWeight: 'bold' }}>BAN STATUS</TableCell>
|
|
<TableCell sx={{ color: 'text.secondary', fontWeight: 'bold' }}>COOLDOWN</TableCell>
|
|
<TableCell sx={{ color: 'text.secondary', fontWeight: 'bold', textAlign: 'right' }}>ACTIONS</TableCell>
|
|
</TableRow>
|
|
</TableHead>
|
|
<TableBody>
|
|
{filteredAccounts.map((account) => (
|
|
<AccountRow
|
|
key={account._id}
|
|
account={account}
|
|
onDelete={deleteAccount}
|
|
onSwitch={switchAccount}
|
|
onAuth={() => openSteamLogin(account.steamId)}
|
|
/>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
</TableContainer>
|
|
)}
|
|
|
|
{!isLoading && filteredAccounts.length === 0 && (
|
|
<Box sx={{ width: '100%', mt: 10, textAlign: 'center' }}>
|
|
<Typography variant="h6" color="textSecondary">
|
|
No accounts tracked. Click "Add" to get started!
|
|
</Typography>
|
|
</Box>
|
|
)}
|
|
</Container>
|
|
|
|
{/* Settings Dialog */}
|
|
<Dialog open={isSettingsOpen} onClose={() => setIsSettingsOpen(false)} maxWidth="sm" fullWidth>
|
|
<DialogTitle sx={{ backgroundColor: 'background.paper', color: 'text.primary' }}>Settings & Customization</DialogTitle>
|
|
<DialogContent sx={{ backgroundColor: 'background.paper', pt: 2 }}>
|
|
<Typography variant="subtitle2" gutterBottom sx={{ color: 'primary.main', mt: 1 }}>THEME SELECTION</Typography>
|
|
<FormControl fullWidth size="small" sx={{ mb: 3 }}>
|
|
<InputLabel sx={{ color: 'text.secondary' }}>Active Theme</InputLabel>
|
|
<Select
|
|
value={currentTheme || 'steam'}
|
|
label="Active Theme"
|
|
onChange={(e) => setTheme(e.target.value as ThemeType)}
|
|
sx={{ bgcolor: 'rgba(0,0,0,0.1)', color: 'text.primary' }}
|
|
>
|
|
<MenuItem value="steam">Steam Classic</MenuItem>
|
|
<MenuItem value="mocha">Catppuccin Mocha</MenuItem>
|
|
<MenuItem value="latte">Catppuccin Latte</MenuItem>
|
|
<MenuItem value="nord">Nord Arctic</MenuItem>
|
|
<MenuItem value="tokyo">Tokyo Night</MenuItem>
|
|
</Select>
|
|
</FormControl>
|
|
|
|
<Divider sx={{ my: 2, borderColor: 'divider' }} />
|
|
|
|
<Typography variant="subtitle2" gutterBottom sx={{ color: 'primary.main' }}>BACKEND CONFIGURATION</Typography>
|
|
<TextField
|
|
fullWidth
|
|
label="Server URL"
|
|
value={serverUrl}
|
|
onChange={(e) => setServerUrl(e.target.value)}
|
|
placeholder="https://ultimate-ban-tracker.narl.io"
|
|
margin="dense"
|
|
sx={{ mb: 2 }}
|
|
InputProps={{
|
|
endAdornment: (
|
|
<InputAdornment position="end">
|
|
<Button variant="contained" size="small" onClick={saveSettings} sx={{ height: 30 }}>Apply</Button>
|
|
</InputAdornment>
|
|
),
|
|
}}
|
|
/>
|
|
|
|
<Divider sx={{ my: 2, borderColor: 'divider' }} />
|
|
|
|
<Typography variant="subtitle2" gutterBottom sx={{ color: 'primary.main' }}>COMMUNITY AUTHENTICATION</Typography>
|
|
<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', p: 2, bgcolor: 'rgba(0,0,0,0.1)', borderRadius: 1 }}>
|
|
<Box>
|
|
<Typography variant="body2" sx={{ fontWeight: 'bold' }}>
|
|
{serverConfig?.token ? "Connected to Server" : "Not Authenticated"}
|
|
</Typography>
|
|
<Typography variant="caption" color="textSecondary">
|
|
{serverConfig?.token ? "Your accounts can now be shared with others." : "Login to share and sync with your community."}
|
|
</Typography>
|
|
</Box>
|
|
<Box sx={{ display: 'flex', gap: 1 }}>
|
|
{serverConfig?.token && (
|
|
<Button
|
|
variant="outlined"
|
|
color="error"
|
|
onClick={() => updateServerConfig({ token: undefined, enabled: false })}
|
|
>
|
|
Logout
|
|
</Button>
|
|
)}
|
|
<Button
|
|
variant="outlined"
|
|
color="primary"
|
|
onClick={() => loginToServer()}
|
|
disabled={!serverUrl}
|
|
>
|
|
{serverConfig?.token ? "Re-Login" : "Login with Steam"}
|
|
</Button>
|
|
</Box>
|
|
</Box>
|
|
|
|
<FormControlLabel
|
|
control={
|
|
<Switch
|
|
checked={serverConfig?.enabled || false}
|
|
onChange={(e) => updateServerConfig({ enabled: e.target.checked })}
|
|
disabled={!serverConfig?.token}
|
|
/>
|
|
}
|
|
label="Enable Community Sync"
|
|
sx={{ mt: 2 }}
|
|
/>
|
|
</DialogContent>
|
|
<DialogActions sx={{ backgroundColor: 'background.paper', p: 2 }}>
|
|
<Button onClick={() => setIsSettingsOpen(false)} color="inherit" variant="contained">Done</Button>
|
|
</DialogActions>
|
|
</Dialog>
|
|
|
|
{/* Admin Panel */}
|
|
<AdminPanel open={isAdminPanelOpen} onClose={() => setIsAdminPanelOpen(false)} />
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
// --- Sub-Component: AccountRow ---
|
|
|
|
const AccountRow: React.FC<{
|
|
account: Account,
|
|
onDelete: (id: string) => void,
|
|
onSwitch: (login: string) => void,
|
|
onAuth: () => void
|
|
}> = ({ account, onDelete, onSwitch, onAuth }) => {
|
|
const { shareAccountWithUser, revokeAccountAccess, revokeAllAccountAccess, getServerUsers, serverConfig, scrapeAccount } = useAccounts();
|
|
const [timeLeft, setTimeLeft] = useState<string | null>(null);
|
|
const [isShareOpen, setIsShareOpen] = useState(false);
|
|
const [targetUserId, setTargetUserId] = useState('');
|
|
const [isSharing, setIsSharing] = useState(false);
|
|
const [isRefreshing, setIsRefreshing] = useState(false);
|
|
const [serverUsers, setServerUsers] = useState<any[]>([]);
|
|
|
|
const cooldownDate = account?.cooldownExpiresAt ? new Date(account.cooldownExpiresAt) : null;
|
|
const isCooldownActive = cooldownDate && !isNaN(cooldownDate.getTime()) && cooldownDate.getTime() > Date.now();
|
|
|
|
useEffect(() => {
|
|
if (!isCooldownActive || !cooldownDate) { setTimeLeft(null); return; }
|
|
const targetTime = cooldownDate.getTime();
|
|
const timer = setInterval(() => {
|
|
const diff = targetTime - Date.now();
|
|
if (diff <= 0) { setTimeLeft(null); clearInterval(timer); return; }
|
|
const hours = Math.floor(diff / 3600000);
|
|
const mins = Math.floor((diff % 3600000) / 60000);
|
|
const secs = Math.floor((diff % 60000) / 1000);
|
|
setTimeLeft(`${hours}h ${mins}m ${secs}s`);
|
|
}, 1000);
|
|
return () => clearInterval(timer);
|
|
}, [account?.cooldownExpiresAt, isCooldownActive]);
|
|
|
|
const avatarSrc = account?.localAvatar ? `steam-resource://${account.localAvatar}` : (account?.avatar || '');
|
|
const [imgSrc, setImgSrc] = useState(avatarSrc);
|
|
useEffect(() => { setImgSrc(avatarSrc); }, [avatarSrc]);
|
|
|
|
const handleRefresh = async () => {
|
|
setIsRefreshing(true);
|
|
await scrapeAccount(account.steamId);
|
|
setIsRefreshing(false);
|
|
};
|
|
|
|
const handleOpenShare = async () => {
|
|
setIsShareOpen(true);
|
|
try {
|
|
const [users, selfInfo] = await Promise.all([
|
|
getServerUsers(),
|
|
(window as any).electronAPI.getServerUserInfo()
|
|
]);
|
|
const filtered = (Array.isArray(users) ? users : []).filter(u =>
|
|
u.steamId !== selfInfo.steamId && u.steamId !== account.steamId
|
|
);
|
|
setServerUsers(filtered);
|
|
} catch (e) {}
|
|
};
|
|
|
|
const handleShare = async () => {
|
|
if (!targetUserId) return;
|
|
setIsSharing(true);
|
|
try {
|
|
await shareAccountWithUser(account.steamId, targetUserId);
|
|
setTargetUserId('');
|
|
} catch (e: any) { alert(e.message || "Failed to share account");
|
|
} finally { setIsSharing(false); }
|
|
};
|
|
|
|
const handleRevoke = async (targetSteamId: string) => {
|
|
if (!window.confirm("Revoke access for this user?")) return;
|
|
try { await revokeAccountAccess(account.steamId, targetSteamId);
|
|
} catch (e: any) { alert(e.message); }
|
|
};
|
|
|
|
const handleRevokeAll = async () => {
|
|
if (!window.confirm("Completely stop sharing this account?")) return;
|
|
try { await revokeAllAccountAccess(account.steamId); setIsShareOpen(false);
|
|
} catch (e: any) { alert(e.message); }
|
|
};
|
|
|
|
const isBanned = account?.vacBanned || (account?.gameBans && account.gameBans > 0);
|
|
|
|
// Primary account check
|
|
const isPrimaryAccount = serverConfig?.serverSteamId === account.steamId;
|
|
|
|
// Refined Shared Logic
|
|
const isSharedWithYou = account?._id.startsWith('shared_');
|
|
const hasSharedMembers = (account as any).sharedWith && (account as any).sharedWith.length > 0;
|
|
const showCommunityIcon = isSharedWithYou || hasSharedMembers;
|
|
|
|
return (
|
|
<TableRow sx={{ '&:hover': { background: 'action.hover' }, borderBottom: '1px solid', borderColor: 'divider' }}>
|
|
<TableCell>
|
|
<Box sx={{ position: 'relative' }}>
|
|
<Avatar src={imgSrc} variant="square" sx={{ width: 32, height: 32, border: '1px solid', borderColor: 'divider' }} />
|
|
{isPrimaryAccount && (
|
|
<Tooltip title="Primary Community Account">
|
|
<WorkspacePremiumIcon sx={{ position: 'absolute', top: -8, left: -8, fontSize: 18, color: '#FFD700', filter: 'drop-shadow(0 0 2px rgba(0,0,0,0.5))' }} />
|
|
</Tooltip>
|
|
)}
|
|
{showCommunityIcon && (
|
|
<Tooltip title={isSharedWithYou ? "Remote Shared Account" : "Actively Shared with Community"}>
|
|
<PeopleIcon sx={{ position: 'absolute', bottom: -4, right: -4, fontSize: 14, color: 'primary.main', bgcolor: 'background.default', borderRadius: '50%', border: '1px solid', borderColor: 'divider', p: 0.2 }} />
|
|
</Tooltip>
|
|
)}
|
|
</Box>
|
|
</TableCell>
|
|
<TableCell>
|
|
<Typography variant="body2" sx={{ fontWeight: 'bold', color: isBanned ? 'error.main' : 'text.primary' }}>{account?.personaName || 'Unknown'}</Typography>
|
|
<Typography variant="caption" sx={{ color: 'text.secondary', display: 'block' }}>{account?.steamId}</Typography>
|
|
</TableCell>
|
|
<TableCell>
|
|
{isBanned ? (
|
|
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.5 }}>
|
|
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5, color: 'error.main' }}>
|
|
<GppBadIcon sx={{ fontSize: 16 }} /><Typography variant="caption" sx={{ fontWeight: 'bold' }}>BANNED</Typography>
|
|
</Box>
|
|
<Box sx={{ display: 'flex', gap: 0.5 }}>
|
|
{account?.vacBanned && <Chip label="VAC" size="small" sx={{ height: 16, fontSize: '0.6rem', bgcolor: 'error.main', color: 'white', fontWeight: 'bold' }} />}
|
|
{account?.gameBans ? account.gameBans > 0 && <Chip label={`${account.gameBans} GAME`} size="small" sx={{ height: 16, fontSize: '0.6rem', bgcolor: 'error.main', color: 'white', fontWeight: 'bold' }} /> : null}
|
|
</Box>
|
|
</Box>
|
|
) : (
|
|
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5, color: 'success.main' }}>
|
|
<ShieldIcon sx={{ fontSize: 16 }} /><Typography variant="caption" sx={{ fontWeight: 'bold' }}>SECURE</Typography>
|
|
</Box>
|
|
)}
|
|
</TableCell>
|
|
<TableCell>
|
|
{account?.authError ? (
|
|
<Box sx={{ display: 'flex', alignItems: 'center', color: 'warning.main', gap: 0.5 }}>
|
|
<LockResetIcon sx={{ fontSize: 16 }} /><Typography variant="body2" sx={{ fontWeight: 'bold' }}>Needs Re-auth</Typography>
|
|
</Box>
|
|
) : isCooldownActive ? (
|
|
<Box sx={{ display: 'flex', alignItems: 'center', color: 'primary.main', gap: 0.5 }}>
|
|
<TimerIcon sx={{ fontSize: 16 }} /><Typography variant="body2" sx={{ fontWeight: 'bold' }}>{timeLeft}</Typography>
|
|
</Box>
|
|
) : (
|
|
<Typography variant="caption" sx={{ color: 'text.secondary' }}>Available</Typography>
|
|
)}
|
|
</TableCell>
|
|
<TableCell align="right">
|
|
<Box sx={{ display: 'flex', justifyContent: 'flex-end', gap: 0.5, alignItems: 'center' }}>
|
|
{account.loginName && (
|
|
<Button
|
|
variant="contained" size="small" onClick={() => onSwitch(account.loginName || '')}
|
|
sx={{ height: 28, fontSize: '0.7rem', bgcolor: 'secondary.main', '&:hover': { opacity: 0.9 }, minWidth: 60 }}
|
|
>LOGIN</Button>
|
|
)}
|
|
<Tooltip title={account.steamLoginSecure && !account.authError ? "Tracking active" : "Authenticate for cooldowns"}>
|
|
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
|
|
<IconButton
|
|
size="small" onClick={onAuth} disabled={!!(account.steamLoginSecure && !account.authError)}
|
|
sx={{
|
|
color: account.steamLoginSecure && !account.authError ? 'success.main' : (account.authError ? 'error.main' : 'warning.main'),
|
|
border: '1px solid', borderColor: account.steamLoginSecure && !account.authError ? 'success.main' : 'divider',
|
|
borderRadius: 1, background: account.steamLoginSecure && !account.authError ? 'rgba(163, 207, 6, 0.1)' : 'transparent'
|
|
}}
|
|
>
|
|
{account.steamLoginSecure && !account.authError ? <VerifiedUserIcon fontSize="inherit" /> : (account.authError ? <LockResetIcon fontSize="inherit" /> : <BoltIcon fontSize="inherit" />)}
|
|
</IconButton>
|
|
{account.steamLoginSecure && !account.authError && (
|
|
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
|
|
<Typography variant="caption" sx={{ color: 'success.main', fontWeight: 'bold', fontSize: '0.6rem' }}>TRACKING</Typography>
|
|
<IconButton size="small" onClick={handleRefresh} disabled={isRefreshing} sx={{ p: 0.2, color: 'text.secondary', '&:hover': { color: 'primary.main' } }}>
|
|
{isRefreshing ? <CircularProgress size={10} color="inherit" /> : <SyncIcon sx={{ fontSize: 12 }} />}
|
|
</IconButton>
|
|
</Box>
|
|
)}
|
|
</Box>
|
|
</Tooltip>
|
|
<Divider orientation="vertical" flexItem sx={{ mx: 0.5, my: 0.5 }} />
|
|
<IconButton size="small" onClick={handleOpenShare} disabled={!serverConfig?.token}><ShareIcon fontSize="inherit" sx={{ color: 'primary.main' }}/></IconButton>
|
|
<IconButton size="small" sx={{ color: 'text.secondary' }} onClick={() => (window as any).electronAPI.openExternal(account?.profileUrl || '')}><OpenInNewIcon fontSize="inherit"/></IconButton>
|
|
<IconButton size="small" sx={{ color: 'error.main' }} onClick={() => onDelete(account?._id || '')}><DeleteIcon fontSize="inherit"/></IconButton>
|
|
</Box>
|
|
|
|
<Dialog open={isShareOpen} onClose={() => setIsShareOpen(false)} maxWidth="xs" fullWidth>
|
|
<DialogTitle sx={{ backgroundColor: 'background.paper', color: 'text.primary' }}>Permissions</DialogTitle>
|
|
<DialogContent sx={{ backgroundColor: 'background.paper', pt: 2 }}>
|
|
<Typography variant="subtitle2" sx={{ mb: 1, color: 'primary.main' }}>GRANT ACCESS</Typography>
|
|
<Box sx={{ display: 'flex', gap: 1, mb: 3 }}>
|
|
<FormControl fullWidth size="small">
|
|
<InputLabel sx={{ color: 'text.secondary' }}>Select User</InputLabel>
|
|
<Select
|
|
value={targetUserId} label="Select User" onChange={(e) => setTargetUserId(e.target.value as string)}
|
|
sx={{ bgcolor: 'rgba(0,0,0,0.1)', color: 'text.primary' }}
|
|
>
|
|
{serverUsers
|
|
.filter(u => !(account as any).sharedWith?.find((sw: any) => sw.steamId === u.steamId))
|
|
.map(user => (
|
|
<MenuItem key={user.steamId} value={user.steamId}>
|
|
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}><Avatar src={user.avatar} sx={{ width: 24, height: 24 }} />{user.personaName}</Box>
|
|
</MenuItem>
|
|
))}
|
|
{serverUsers.length === 0 && <MenuItem disabled>No eligible users found</MenuItem>}
|
|
</Select>
|
|
</FormControl>
|
|
<Button onClick={handleShare} variant="contained" disabled={!targetUserId || isSharing} sx={{ minWidth: 80 }}>{isSharing ? <CircularProgress size={16} color="inherit" /> : "Add"}</Button>
|
|
</Box>
|
|
<Divider sx={{ my: 2, borderColor: 'divider' }} />
|
|
<Typography variant="subtitle2" sx={{ mb: 1, color: 'primary.main' }}>CURRENT ACCESS</Typography>
|
|
<List size="small" sx={{ bgcolor: 'rgba(0,0,0,0.05)', borderRadius: 1, mb: 2 }}>
|
|
{(account as any).sharedWith?.map((sw: any) => (
|
|
<ListItem key={sw.steamId} dense divider sx={{ borderColor: 'divider' }}>
|
|
<Avatar src={sw.avatar} sx={{ width: 24, height: 24, mr: 1 }} />
|
|
<ListItemText primary={sw.personaName} primaryTypographyProps={{ variant: 'body2', sx: { fontWeight: 'bold' } }} />
|
|
<ListItemSecondaryAction>
|
|
<IconButton size="small" color="error" onClick={() => handleRevoke(sw.steamId)}><DeleteIcon fontSize="inherit" /></IconButton>
|
|
</ListItemSecondaryAction>
|
|
</ListItem>
|
|
))}
|
|
{(!(account as any).sharedWith || (account as any).sharedWith.length === 0) && (
|
|
<Typography variant="caption" align="center" sx={{ display: 'block', p: 2, opacity: 0.6 }}>Not shared with anyone yet.</Typography>
|
|
)}
|
|
</List>
|
|
{(account as any).sharedWith?.length > 0 && (
|
|
<Button fullWidth variant="outlined" color="error" size="small" onClick={handleRevokeAll} startIcon={<GppBadIcon />}>Revoke All Shared Access</Button>
|
|
)}
|
|
</DialogContent>
|
|
<DialogActions sx={{ backgroundColor: 'background.paper', p: 2 }}><Button onClick={() => setIsShareOpen(false)} color="inherit" variant="contained">Done</Button></DialogActions>
|
|
</Dialog>
|
|
</TableCell>
|
|
</TableRow>
|
|
);
|
|
};
|
|
|
|
export default Dashboard;
|