Cybersecurity-Projects/PROJECTS/api-security-scanner/frontend/src/pages/DashboardPage.tsx

58 lines
1.8 KiB
TypeScript

// ===========================
// DashboardPage.tsx
// ©AngelaMos | 2025
// ===========================
import { useNavigate } from 'react-router-dom';
import { NewScanForm } from '@/components/scan/NewScanForm';
import { ScansList } from '@/components/scan/ScansList';
import { Button } from '@/components/common/Button';
import { useAuthStore } from '@/store/authStore';
import './DashboardPage.css';
export const DashboardPage = (): React.ReactElement => {
const navigate = useNavigate();
const clearAuth = useAuthStore((state) => state.clearAuth);
const user = useAuthStore((state) => state.user);
const handleLogout = (): void => {
clearAuth();
void navigate('/login');
};
return (
<div className="dashboard">
<div className="dashboard__container">
<header className="dashboard__header">
<div className="dashboard__header-content">
<div className="dashboard__header-text">
<h1 className="dashboard__title">API Security Scanner</h1>
<p className="dashboard__subtitle">
Test your APIs for security vulnerabilities
</p>
</div>
<div className="dashboard__header-actions">
<span className="dashboard__user-email">{user?.email}</span>
<Button onClick={handleLogout} variant="secondary">
Logout
</Button>
</div>
</div>
</header>
<div className="dashboard__content">
<section className="dashboard__section">
<h2 className="dashboard__section-title">New Scan</h2>
<NewScanForm />
</section>
<section className="dashboard__section">
<h2 className="dashboard__section-title">Recent Scans</h2>
<ScansList />
</section>
</div>
</div>
</div>
);
};