22355e8cb2
Last tab on the revamp roadmap. Ships /app/admin as a shell that
renders either an access-denied card or a legacy-viewer link
depending on me.user.role, plus a new Admin nav group in the
sidebar that is hidden entirely for non-admin users.
client/src/components/Layout.tsx
NavItem gains an optional adminOnly flag. Layout now runs its own
useQuery<MeOk>(['auth-me']) — the query key is already shared with
Settings so the cache is reused across both. Nav groups whose
items all filter out (in practice: the Admin group for non-admins)
don't render their group header either, so the sidebar stays clean
for regular users. 5-minute staleTime so the header doesn't hammer
/me on every route change.
client/src/pages/Admin.tsx
Same /me query + role check. Non-admins land on the
admin-access-denied card; admins see the admin-shell with a link
to the legacy admin viewer. Sub-sections (users, feature flags,
OIDC, SMTP, AI prompts, model management, TTS/STT, email
templates, announcement banner, site-wide saved encounters) stay
in the vanilla admin page for now — each touches production state
immediately on save, so each port needs its own deliberate commit
with dedicated tests before shipping.
e2e/tests/admin-react.spec.js — one smoke test
The seeded e2e user is non-admin, so the expected outcome is the
access-denied card. Guard is written to accept either state so the
test still passes if the seed ever flips to an admin.
With this commit the React sidebar covers the full legacy nav:
• Encounters: Encounter HPI, Dictation HPI
• Notes: Hospital Course, Chart Review, SOAP, Well Visit, Sick Visit
• Clinical Tools: Vax Schedule, Catch-Up, PE Guide, Bedside,
Calculators, Pagers & Extensions, Learning Hub
• Account: Settings, FAQ
• Admin: Admin Panel (role-gated)
Client tsc -b + vite build clean. Bundle 462.48 kB / 131.98 kB gz.
78 lines
3.1 KiB
TypeScript
78 lines
3.1 KiB
TypeScript
// ============================================================
|
|
// ADMIN PANEL — shell + access gate.
|
|
//
|
|
// The legacy admin page has 12+ sub-sections (users, feature flags,
|
|
// announcement banner, OIDC, SMTP, AI model management, TTS/STT,
|
|
// email templates, AI prompts, site-wide saved encounters, audit
|
|
// logs, learning admin). Each is tied to /api/admin/* or
|
|
// /api/admin/config endpoints and involves destructive operations
|
|
// that need careful UX consideration (role revoke, feature-flag
|
|
// toggles hit prod immediately, etc.).
|
|
//
|
|
// This first commit ships the access gate + a link to the legacy
|
|
// admin viewer. Per-section React ports arrive as discrete commits
|
|
// once the core React tree has settled.
|
|
// ============================================================
|
|
|
|
import { useQuery } from '@tanstack/react-query';
|
|
import { api } from '@/lib/api';
|
|
import type { MeOk } from '@/shared/types';
|
|
|
|
const card = 'rounded-lg border border-border bg-card p-5 space-y-3';
|
|
const btnPrimary = 'rounded-md bg-primary text-primary-foreground px-4 py-2 text-sm font-medium';
|
|
|
|
export default function Admin() {
|
|
const { data: me, isLoading } = useQuery<MeOk>({
|
|
queryKey: ['auth-me'],
|
|
queryFn: () => api.get<MeOk>('/api/auth/me'),
|
|
staleTime: 5 * 60_000,
|
|
});
|
|
|
|
if (isLoading) {
|
|
return (
|
|
<div className="max-w-3xl mx-auto p-6">
|
|
<div className="text-sm text-muted-foreground">Checking permissions…</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (me?.user.role !== 'admin') {
|
|
return (
|
|
<div className="max-w-3xl mx-auto p-6">
|
|
<section className={card} data-testid="admin-access-denied">
|
|
<h1 className="text-xl font-semibold">Admin only</h1>
|
|
<p className="text-sm text-muted-foreground">
|
|
This page is restricted to users with the admin role. If you believe this is a mistake,
|
|
contact your site administrator.
|
|
</p>
|
|
</section>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="max-w-4xl mx-auto p-6 space-y-4">
|
|
<header>
|
|
<h1 className="text-2xl font-semibold">Admin Panel</h1>
|
|
<p className="text-sm text-muted-foreground">
|
|
Registration, users, feature flags, OIDC, email templates, AI prompts, SMTP, saved
|
|
encounters (site-wide), AI model management, TTS/STT provider selection.
|
|
</p>
|
|
</header>
|
|
|
|
<section className={card} data-testid="admin-shell">
|
|
<div className="rounded-md border border-amber-300 bg-amber-50 dark:bg-amber-950/30 p-3 text-sm space-y-2">
|
|
<p className="text-amber-900 dark:text-amber-100">
|
|
Admin sub-sections still live in the legacy viewer. Each one (user management, feature
|
|
flags, announcements, OIDC config, SMTP, AI prompts, model management, TTS/STT) touches
|
|
production state immediately when saved — those controls port in discrete follow-up
|
|
commits with their own tests before they go live in the React tree.
|
|
</p>
|
|
</div>
|
|
<a href="/#admin" className={btnPrimary + ' inline-block'}>
|
|
Open admin in legacy viewer
|
|
</a>
|
|
</section>
|
|
</div>
|
|
);
|
|
}
|