106 lines
2.9 KiB
TypeScript
106 lines
2.9 KiB
TypeScript
import {JSX} from 'react';
|
|
import {useAppDispatch, useAppSelector} from '../hooks/store';
|
|
import {selectCredentials, selectSessionInfo, authenticationActions} from '../store/slices/Authentication.slice';
|
|
import {useNavigate} from 'react-router-dom';
|
|
import {Navigation} from '../components';
|
|
|
|
export function DashboardView(): JSX.Element {
|
|
const dispatch = useAppDispatch();
|
|
const navigate = useNavigate();
|
|
const credentials = useAppSelector(selectCredentials);
|
|
const sessionInfo = useAppSelector(selectSessionInfo);
|
|
|
|
const handleLogout = () => {
|
|
dispatch(authenticationActions.signout());
|
|
navigate('/login', {replace: true});
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<Navigation />
|
|
<div
|
|
style={{
|
|
padding: '2rem',
|
|
maxWidth: '1200px',
|
|
margin: '0 auto'
|
|
}}>
|
|
<div
|
|
style={{
|
|
display: 'flex',
|
|
justifyContent: 'space-between',
|
|
alignItems: 'center',
|
|
marginBottom: '2rem'
|
|
}}>
|
|
<h1>Dashboard</h1>
|
|
<button
|
|
onClick={handleLogout}
|
|
style={{
|
|
padding: '0.5rem 1rem',
|
|
background: '#dc3545',
|
|
color: 'white',
|
|
border: 'none',
|
|
borderRadius: '4px',
|
|
cursor: 'pointer'
|
|
}}>
|
|
Logout
|
|
</button>
|
|
</div>
|
|
|
|
<div
|
|
style={{
|
|
background: '#222',
|
|
padding: '1rem',
|
|
borderRadius: '8px',
|
|
marginBottom: '2rem'
|
|
}}>
|
|
<h3>Welcome!</h3>
|
|
<p>You are successfully authenticated.</p>
|
|
<p>
|
|
<strong>Application ID:</strong> {credentials.applicationId || 'N/A'}
|
|
</p>
|
|
<p>
|
|
<strong>Session ID:</strong> {sessionInfo.sessionId || 'N/A'}
|
|
</p>
|
|
<p>
|
|
<strong>Roles:</strong> {sessionInfo.roles.length > 0 ? sessionInfo.roles.join(', ') : 'None'}
|
|
</p>
|
|
</div>
|
|
|
|
<div
|
|
style={{
|
|
display: 'grid',
|
|
gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))',
|
|
gap: '1rem'
|
|
}}>
|
|
<div
|
|
style={{
|
|
background: 'white',
|
|
padding: '1rem',
|
|
borderRadius: '8px',
|
|
border: '1px solid #ddd'
|
|
}}>
|
|
<h4>Quick Actions</h4>
|
|
<ul>
|
|
<li>View Channels</li>
|
|
<li>Check Analytics</li>
|
|
<li>Monitor QoS</li>
|
|
<li>Manage Rooms</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div
|
|
style={{
|
|
background: 'white',
|
|
padding: '1rem',
|
|
borderRadius: '8px',
|
|
border: '1px solid #ddd'
|
|
}}>
|
|
<h4>Recent Activity</h4>
|
|
<p>No recent activity to display.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|