'use client'; import { useEffect, useRef, useState } from 'react'; import Link from 'next/link'; import { usePathname } from 'next/navigation'; import { useQuery } from '@tanstack/react-query'; import { useAuth } from '@/lib/auth-context'; import { api, selectedOrgId, setSelectedOrgId } from '@/lib/api'; import { ThemeToggle } from '@/lib/theme'; import { IconBell } from '@/components/ui'; import { FloatSelect } from '@/components/float'; import { formatDateTime, formatRole, capitalizeFirst as cap } from '@/lib/format'; import { useOrgBrand, BrandMark } from '@/lib/org-branding'; import type { AuthUser } from '@/src/server/types/auth'; import { LoginAlerts } from './login-alerts'; const links = [ { href: '/dashboard', label: 'Dashboard' }, { href: '/actions', label: 'Deviations' }, { href: '/kanban', label: 'Workflow Board' }, { href: '/samples', label: 'QC Samples' }, { href: '/calendar', label: 'Calendar' }, { href: '/reports', label: 'Reports' }, { href: '/announcements', label: 'Notices' }, { href: '/departments', label: 'Departments', staff: true }, { href: '/categories', label: 'Categories', staff: true }, { href: '/users', label: 'Users', staff: true }, { href: '/audit-logs', label: 'Audit Logs', admin: true }, { href: '/organisations', label: 'Organisations', sup: true }, { href: '/settings', label: 'Settings', admin: true }, ]; function OrgSwitcher() { const { user } = useAuth(); const [orgs, setOrgs] = useState([]); const [sel, setSel] = useState(null); useEffect(() => { if (user?.role !== 'super_admin') return; setSel(selectedOrgId()); api.get('/api/v1/super/organisations?limit=100').then((r) => setOrgs(r.data ?? [])).catch(() => {}); }, [user]); if (user?.role === 'super_admin') { return (

{ setSelectedOrgId(e.target.value || null); setSel(e.target.value || null); window.location.reload(); }}> {orgs.map((o: any) => )}

); } if (user?.organisation) { return

{user.organisation.name}

; } return null; } function Nav({ onNavigate, unread }: { onNavigate?: () => void; unread: number }) { const { user } = useAuth(); const path = usePathname(); const visible = links.filter(l => { if ((l as any).sup) return user?.role === 'super_admin'; if ((l as any).admin) return user?.role === 'admin' || user?.role === 'super_admin'; if ((l as any).staff) return user?.role !== 'employee'; return true; }); return ( ); } function SidebarBody({ onNavigate, unread }: { onNavigate?: () => void; unread: number }) { const { logout } = useAuth(); const { brand, logo } = useOrgBrand(); return (

); } const PAGE_TITLES: [RegExp, string][] = [ [/^\/dashboard$/, 'Dashboard'], [/^\/actions\/[^/]+$/, 'Deviation details'], [/^\/actions/, 'Deviations'], [/^\/kanban/, 'Workflow Board'], [/^\/samples/, 'QC Samples'], [/^\/calendar/, 'Calendar'], [/^\/reports/, 'Reports'], [/^\/notifications/, 'Notifications'], [/^\/announcements/, 'Notices'], [/^\/departments/, 'Departments'], [/^\/categories/, 'Categories'], [/^\/users/, 'User Management'], [/^\/audit-logs/, 'Audit Logs'], [/^\/organisations/, 'Organisations'], [/^\/settings/, 'Settings'], ]; /** Dynamic browser-tab title for every dashboard page. */ function usePageTitle(path: string) { useEffect(() => { const hit = PAGE_TITLES.find(([re]) => re.test(path)); document.title = `${hit ? hit[1] : 'Qtrial'} — Qtrial`; }, [path]); } export default function DashShell({ children, user }: { children: React.ReactNode; user: AuthUser }) { const { logout } = useAuth(); const [drawer, setDrawer] = useState(false); const path = usePathname(); usePageTitle(path); const unreadQ = useQuery({ queryKey: ['ann-unread'], queryFn: () => api.get('/api/v1/announcements?limit=1'), enabled: true, staleTime: 60000, }); const unread = unreadQ.data?.unread ?? 0; const notifQ = useQuery({ queryKey: ['notif-unread'], queryFn: () => api.get('/api/v1/notifications?limit=1'), enabled: true, staleTime: 60000, }); const notifUnread = notifQ.data?.unread ?? 0; const latestQ = useQuery({ queryKey: ['notif-latest'], queryFn: () => api.get('/api/v1/notifications?limit=5'), enabled: true, staleTime: 30000, }); const latest: any[] = latestQ.data?.data ?? []; const [bellOpen, setBellOpen] = useState(false); const [menuOpen, setMenuOpen] = useState(false); const bellRef = useRef(null); const menuRef = useRef(null); useEffect(() => { if (!bellOpen && !menuOpen) return; const onKey = (e: KeyboardEvent) => { if (e.key === 'Escape') { setBellOpen(false); setMenuOpen(false); } }; const onClick = (e: MouseEvent) => { if (bellRef.current && !bellRef.current.contains(e.target as Node)) setBellOpen(false); if (menuRef.current && !menuRef.current.contains(e.target as Node)) setMenuOpen(false); }; document.addEventListener('keydown', onKey); document.addEventListener('mousedown', onClick); return () => { document.removeEventListener('keydown', onKey); document.removeEventListener('mousedown', onClick); }; }, [bellOpen, menuOpen]); const { brand: topBrand, logo: topLogo } = useOrgBrand(); useEffect(() => { setDrawer(false); }, [path]); useEffect(() => { if (!drawer) return; const onKey = (e: KeyboardEvent) => { if (e.key === 'Escape') setDrawer(false); }; document.addEventListener('keydown', onKey); document.body.style.overflow = 'hidden'; return () => { document.removeEventListener('keydown', onKey); document.body.style.overflow = ''; }; }, [drawer]); const initial = user.name?.trim()?.charAt(0)?.toUpperCase() ?? '?'; return (

Skip to content {/* Desktop sidebar */} {/* Mobile drawer */} {drawer && ( setDrawer(false)} unread={unread} />

)}

{/* Topbar */}

{bellOpen && ( )}

{menuOpen && ( )}

{children}

); }