import { ReactNode, useState } from 'react'; import { Head } from '@inertiajs/react'; import AdminLayout from '@/layouts/AdminLayout'; import { Button } from '@/components/ui/button'; import { Eye } from 'lucide-react'; import { useAuth } from '@/hooks/useAuth'; import { useRolePreview } from '@/contexts/RolePreviewContext'; import SopManual, { VIEW_AS_OPTIONS, type RoleKey } from '@/components/SopManual'; const SOPPage = () => { const { roles, isReallySysLevel } = useAuth(); const { getEffectiveRoles } = useRolePreview(); // null = use my own (or globally-previewed) role; otherwise preview a role. const [viewAs, setViewAs] = useState<'all' | RoleKey | null>(null); const realSysLevel = isReallySysLevel(); // Effective roles used for filtering: an in-page "Viewing as" override wins, // then any global role preview, then the user's real roles. const effectiveRoles: string[] = viewAs === null ? getEffectiveRoles(roles) : viewAs === 'all' ? ['sys_admin'] : [viewAs]; // Role preview — staff can see what each role's manual looks like. const viewAsControls = realSysLevel ? (

Viewing as: {VIEW_AS_OPTIONS.map((opt) => ( ))}

) : null; return ( <> ); }; SOPPage.layout = (page: ReactNode) => {page}; export default SOPPage;