feat(admin): sidebar shell + routing
This commit is contained in:
Bas van Rossem
@@ -1,7 +1,21 @@
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import { describe, expect, it } from 'vitest';
|
||||
import { render, screen, within } from '@testing-library/react';
|
||||
import userEvent from '@testing-library/user-event';
|
||||
import { afterEach, describe, expect, it, vi } from 'vitest';
|
||||
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
|
||||
import App from './App';
|
||||
import { clearToken, getToken, setToken } from './lib/auth-storage';
|
||||
|
||||
// Stub the network layer so the authed shell renders without real requests.
|
||||
// /api/me resolves an admin so the gate stays authed and the header shows the email.
|
||||
vi.mock('./lib/api', async () => {
|
||||
const actual = await vi.importActual<typeof import('./lib/api')>('./lib/api');
|
||||
return {
|
||||
...actual,
|
||||
apiFetch: vi.fn().mockResolvedValue({
|
||||
user: { id: 'u1', email: 'admin@solelog.local', name: 'Admin', role: 'admin' },
|
||||
}),
|
||||
};
|
||||
});
|
||||
|
||||
function renderApp() {
|
||||
const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } });
|
||||
@@ -13,8 +27,30 @@ function renderApp() {
|
||||
}
|
||||
|
||||
describe('App', () => {
|
||||
it('renders the admin app name', () => {
|
||||
afterEach(() => {
|
||||
clearToken();
|
||||
});
|
||||
|
||||
it('shows the login screen when there is no token', () => {
|
||||
clearToken();
|
||||
renderApp();
|
||||
expect(screen.getByText('SoleLog Admin')).toBeInTheDocument();
|
||||
expect(screen.getByText('E-mailadres')).toBeInTheDocument();
|
||||
expect(screen.getByRole('button', { name: 'Inloggen' })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('shows the sidebar nav when a token is present', () => {
|
||||
setToken('tok');
|
||||
renderApp();
|
||||
const nav = within(screen.getByRole('navigation'));
|
||||
expect(nav.getByText('Live')).toBeInTheDocument();
|
||||
expect(nav.getByText('Handelingen')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('clears the token when logout is clicked', async () => {
|
||||
setToken('tok');
|
||||
renderApp();
|
||||
expect(getToken()).toBe('tok');
|
||||
await userEvent.click(screen.getByRole('button', { name: 'Uitloggen' }));
|
||||
expect(getToken()).toBeNull();
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,9 +1,24 @@
|
||||
import { BrowserRouter, Route, Routes } from 'react-router-dom';
|
||||
import { AuthProvider, useAuth } from './auth/AuthContext';
|
||||
import Login from './screens/Login';
|
||||
import Sidebar from './components/Sidebar';
|
||||
import Live from './screens/Live';
|
||||
import Activities from './screens/Activities';
|
||||
|
||||
function AuthedShell() {
|
||||
// Placeholder shell — replaced by the sidebar + routing in Task 4.
|
||||
return <div>SoleLog Admin</div>;
|
||||
return (
|
||||
<BrowserRouter>
|
||||
<div className="admin-shell">
|
||||
<Sidebar />
|
||||
<main className="admin-main">
|
||||
<Routes>
|
||||
<Route path="/" element={<Live />} />
|
||||
<Route path="/handelingen" element={<Activities />} />
|
||||
</Routes>
|
||||
</main>
|
||||
</div>
|
||||
</BrowserRouter>
|
||||
);
|
||||
}
|
||||
|
||||
function Gate() {
|
||||
|
||||
52
apps/admin/src/components/Sidebar.tsx
Normal file
52
apps/admin/src/components/Sidebar.tsx
Normal file
@@ -0,0 +1,52 @@
|
||||
import { NavLink } from 'react-router-dom';
|
||||
import { useAuth } from '../auth/AuthContext';
|
||||
import { useMe } from '../api/me';
|
||||
|
||||
const navItems = [
|
||||
{ to: '/', label: 'Live' },
|
||||
{ to: '/handelingen', label: 'Handelingen' },
|
||||
] as const;
|
||||
|
||||
// Sections planned for Phase 3b — shown muted/disabled as a hint of what's coming.
|
||||
const soonItems = ['Rapporten', 'Gebruikers', 'Handmatig'] as const;
|
||||
|
||||
export default function Sidebar() {
|
||||
const { signOut } = useAuth();
|
||||
const meQuery = useMe();
|
||||
const email = meQuery.data?.user.email;
|
||||
|
||||
return (
|
||||
<aside className="sidebar">
|
||||
<div className="sidebar-brand">SoleLog Admin</div>
|
||||
|
||||
<nav className="sidebar-nav">
|
||||
{navItems.map((item) => (
|
||||
<NavLink
|
||||
key={item.to}
|
||||
to={item.to}
|
||||
end={item.to === '/'}
|
||||
className={({ isActive }) => (isActive ? 'nav-link nav-link-active' : 'nav-link')}
|
||||
>
|
||||
{item.label}
|
||||
</NavLink>
|
||||
))}
|
||||
|
||||
<div className="nav-soon">
|
||||
<span className="nav-soon-label">Binnenkort</span>
|
||||
{soonItems.map((label) => (
|
||||
<span key={label} className="nav-disabled" aria-disabled="true">
|
||||
{label}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div className="topbar">
|
||||
{email && <span className="topbar-email">{email}</span>}
|
||||
<button type="button" className="btn-logout" aria-label="Uitloggen" onClick={signOut}>
|
||||
Uitloggen
|
||||
</button>
|
||||
</div>
|
||||
</aside>
|
||||
);
|
||||
}
|
||||
4
apps/admin/src/screens/Activities.tsx
Normal file
4
apps/admin/src/screens/Activities.tsx
Normal file
@@ -0,0 +1,4 @@
|
||||
// Placeholder — replaced by the activity-management view in Task 6.
|
||||
export default function Activities() {
|
||||
return <div className="screen">Handelingen</div>;
|
||||
}
|
||||
4
apps/admin/src/screens/Live.tsx
Normal file
4
apps/admin/src/screens/Live.tsx
Normal file
@@ -0,0 +1,4 @@
|
||||
// Placeholder — replaced by the live active-work view in Task 5.
|
||||
export default function Live() {
|
||||
return <div className="screen">Live</div>;
|
||||
}
|
||||
@@ -0,0 +1,229 @@
|
||||
:root {
|
||||
--primary: #2563eb;
|
||||
--primary-light: #eff6ff;
|
||||
--text: #111827;
|
||||
--text-muted: #6b7280;
|
||||
--border: #e5e7eb;
|
||||
--danger: #dc2626;
|
||||
--amber: #d97706;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family:
|
||||
'Inter',
|
||||
system-ui,
|
||||
-apple-system,
|
||||
sans-serif;
|
||||
color: var(--text);
|
||||
background: #f9fafb;
|
||||
}
|
||||
|
||||
/* ---- Admin shell layout (desktop) ---- */
|
||||
.admin-shell {
|
||||
display: grid;
|
||||
grid-template-columns: 220px 1fr;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.admin-main {
|
||||
padding: 32px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.screen {
|
||||
max-width: 960px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.screen-title {
|
||||
font-size: 28px;
|
||||
font-weight: 600;
|
||||
margin: 0 0 8px;
|
||||
}
|
||||
|
||||
.screen-subtitle {
|
||||
margin: 0 0 24px;
|
||||
color: var(--text-muted);
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
/* ---- Sidebar ---- */
|
||||
.sidebar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
padding: 24px 16px;
|
||||
background: #ffffff;
|
||||
border-right: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.sidebar-brand {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: var(--primary);
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
.sidebar-nav {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
display: block;
|
||||
padding: 10px 12px;
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
text-decoration: none;
|
||||
color: var(--text-muted);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.nav-link:hover {
|
||||
background: #f3f4f6;
|
||||
}
|
||||
|
||||
.nav-link-active {
|
||||
color: var(--primary);
|
||||
background: var(--primary-light);
|
||||
}
|
||||
|
||||
.nav-soon {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
margin-top: 16px;
|
||||
padding-top: 16px;
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.nav-soon-label {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
color: var(--text-muted);
|
||||
padding: 0 12px 4px;
|
||||
}
|
||||
|
||||
.nav-disabled {
|
||||
display: block;
|
||||
padding: 10px 12px;
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
color: var(--border);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* ---- Topbar (signed-in identity + logout) ---- */
|
||||
.topbar {
|
||||
margin-top: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
padding-top: 16px;
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.topbar-email {
|
||||
font-size: 13px;
|
||||
color: var(--text-muted);
|
||||
padding: 0 8px;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.btn-logout {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--danger);
|
||||
background: #ffffff;
|
||||
border: 1px solid var(--danger);
|
||||
border-radius: 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* ---- Login screen ---- */
|
||||
.login {
|
||||
max-width: 420px;
|
||||
margin: 0 auto;
|
||||
padding: 48px 24px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
min-height: 100vh;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.login-title {
|
||||
font-size: 36px;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
color: var(--primary);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.login-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.field-label {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.field-input {
|
||||
width: 100%;
|
||||
padding: 14px 16px;
|
||||
font-size: 16px;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 12px;
|
||||
background: #ffffff;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.field-input:focus {
|
||||
outline: none;
|
||||
border-color: var(--primary);
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
width: 100%;
|
||||
padding: 16px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #ffffff;
|
||||
background: var(--primary);
|
||||
border: none;
|
||||
border-radius: 16px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn-primary:disabled {
|
||||
background: var(--border);
|
||||
color: var(--text-muted);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.login-error {
|
||||
color: var(--danger);
|
||||
font-size: 14px;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user