54f30cbacb
Three more tabs behind /app/*:
/encounter → Encounter.tsx — POST /api/generate-hpi-encounter
/soap → Soap.tsx — POST /api/generate-soap (full or
subjective-only output type)
/sickvisit → SickVisit.tsx — POST /api/sick-visit/note (chief
complaint is the only required
field; transcript optional)
All three share the same skeleton: demographic triad + textarea +
Zod-validated submit + copy-to-clipboard output pane. Follow-up work
per tab (save/load, refine, audio capture) lands in subsequent
commits — this first pass proves the AI generate path for each.
Layout sidebar updated: Encounter HPI / SOAP Note / Sick Visit now
marked available. Pending stubs remain for Hospital Course, Chart
Review, Well Visit, and all Clinical Tools + Settings.
Build: 361 kB / 109 kB gzipped (+11 kB over previous, as expected
for three small pages using the existing lib/api + shared schemas).
Typecheck + vite build both green on the client side.
115 lines
3.6 KiB
TypeScript
115 lines
3.6 KiB
TypeScript
// ============================================================
|
|
// LAYOUT — sidebar + main content shell shared across every page.
|
|
// Structure mirrors the vanilla app so a user moving between the two
|
|
// trees during migration sees consistent navigation.
|
|
// ============================================================
|
|
|
|
import { NavLink, Outlet } from 'react-router-dom';
|
|
import type { ReactNode } from 'react';
|
|
|
|
interface NavItem {
|
|
to: string;
|
|
label: string;
|
|
available?: boolean; // false = rendered as "coming soon" stub
|
|
}
|
|
|
|
interface NavGroup {
|
|
label: string;
|
|
items: NavItem[];
|
|
}
|
|
|
|
const NAV: NavGroup[] = [
|
|
{
|
|
label: 'Encounters',
|
|
items: [
|
|
{ to: '/encounter', label: 'Encounter HPI', available: true },
|
|
{ to: '/dictation', label: 'Dictation HPI', available: true },
|
|
],
|
|
},
|
|
{
|
|
label: 'Notes',
|
|
items: [
|
|
{ to: '/hospital', label: 'Hospital Course', available: false },
|
|
{ to: '/chart', label: 'Chart Review', available: false },
|
|
{ to: '/soap', label: 'SOAP Note', available: true },
|
|
{ to: '/wellvisit', label: 'Well Visit', available: false },
|
|
{ to: '/sickvisit', label: 'Sick Visit', available: true },
|
|
],
|
|
},
|
|
{
|
|
label: 'Clinical Tools',
|
|
items: [
|
|
{ to: '/vaxschedule', label: 'Vaccine Schedule', available: false },
|
|
{ to: '/catchup', label: 'Catch-Up Schedule', available: false },
|
|
{ to: '/peguide', label: 'Physical Exam Guide', available: false },
|
|
{ to: '/bedside', label: 'Bedside', available: false },
|
|
{ to: '/calculators', label: 'Calculators', available: false },
|
|
{ to: '/extensions', label: 'Pagers & Extensions', available: true },
|
|
{ to: '/learning', label: 'Learning Hub', available: false },
|
|
],
|
|
},
|
|
{
|
|
label: 'Account',
|
|
items: [
|
|
{ to: '/settings', label: 'Settings', available: false },
|
|
{ to: '/faq', label: 'FAQ', available: true },
|
|
],
|
|
},
|
|
];
|
|
|
|
function SidebarLink({ item }: { item: NavItem }) {
|
|
if (!item.available) {
|
|
return (
|
|
<div
|
|
className="px-3 py-2 text-sm rounded-md text-muted-foreground italic cursor-not-allowed opacity-60"
|
|
title="Not yet ported to React — still available in the vanilla app at /"
|
|
>
|
|
{item.label} <span className="text-[10px]">· pending</span>
|
|
</div>
|
|
);
|
|
}
|
|
return (
|
|
<NavLink
|
|
to={item.to}
|
|
className={({ isActive }) =>
|
|
'block px-3 py-2 text-sm rounded-md transition-colors ' +
|
|
(isActive
|
|
? 'bg-primary text-primary-foreground'
|
|
: 'hover:bg-muted text-foreground')
|
|
}
|
|
>
|
|
{item.label}
|
|
</NavLink>
|
|
);
|
|
}
|
|
|
|
export default function Layout({ children }: { children?: ReactNode }) {
|
|
return (
|
|
<div className="min-h-screen bg-background text-foreground flex">
|
|
{/* Sidebar */}
|
|
<aside className="w-64 border-r border-border bg-muted/30 flex-shrink-0 p-3 space-y-4 sticky top-0 h-screen overflow-y-auto">
|
|
<div className="px-2 py-1 border-b border-border pb-3">
|
|
<div className="font-semibold">Pediatric AI Scribe</div>
|
|
<a href="/" className="text-[11px] text-muted-foreground underline">
|
|
← back to legacy app
|
|
</a>
|
|
</div>
|
|
{NAV.map((group) => (
|
|
<div key={group.label} className="space-y-1">
|
|
<div className="px-3 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">
|
|
{group.label}
|
|
</div>
|
|
{group.items.map((item) => (
|
|
<SidebarLink key={item.to} item={item} />
|
|
))}
|
|
</div>
|
|
))}
|
|
</aside>
|
|
|
|
{/* Main */}
|
|
<main className="flex-1 min-w-0">
|
|
{children ?? <Outlet />}
|
|
</main>
|
|
</div>
|
|
);
|
|
}
|