Run every hook before the admin guard on /nodes and /systems

Both pages crashed to a blank "client-side exception" screen in production.
React error #310: the useState calls sat *below* `if (authLoading || (!isAdmin
&& !isOperator)) return null`, so the first render returned before reaching
them and the next render, once auth resolved, ran more hooks than the previous
one. React tracks hooks by call order and refuses.

The guard itself is fine and stays where it is -- only the hook declarations
move above it. Behaviour is unchanged for a user who passes the guard, and a
user who fails it still renders nothing before the effect redirects them.

Found by walking the deployed site: /nodes and /systems were the only two
routes that failed outright rather than merely showing empty data. The empty
data everywhere else is the org_id backfill, which is a separate problem.

npx tsc --noEmit clean.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

drb-frontend/app/systems/page.tsx

@@ -1188,10 +1188,15 @@ export default function SystemsPage() {
     if (!authLoading && !isAdmin && !isOperator) router.replace("/dashboard");
   }, [authLoading, isAdmin, isOperator, router]);
 
-  if (authLoading || (!isAdmin && !isOperator)) return null;
   const [editing, setEditing]             = useState<SystemRecord | null | "new">(null);
   const [editIsDuplicate, setEditIsDuplicate] = useState(false);
 
+  // Every hook must run before this guard. React tracks hooks by call order,
+  // so returning early on the first render and then reaching a useState on the
+  // next one is error #310 ("rendered more hooks than during the previous
+  // render") -- which crashed this whole page to a blank client-exception
+  // screen the moment auth resolved.
+  if (authLoading || (!isAdmin && !isOperator)) return null;
   async function handleDelete(id: string) {
     if (!confirm("Delete this system?")) return;
     await c2api.deleteSystem(id);