some fixes and refactors

frontend/app/sum/page.tsx

@@ -1,10 +1,11 @@
 "use client";
 
-import { useEffect, useState } from "react";
-import { useRouter } from "next/navigation";
-import { useAuth, Permission } from "../auth-context";
-import { API_URL } from "../config";
+import { useState } from "react";
+import { Permission } from "../auth-context";
+import { api } from "../api";
 import { sharedStyles } from "../styles/shared";
+import { Header } from "../components/Header";
+import { useRequireAuth } from "../hooks/useRequireAuth";
 
 export default function SumPage() {
   const [a, setA] = useState("");
@@ -12,21 +13,9 @@ export default function SumPage() {
   const [result, setResult] = useState<number | null>(null);
   const [showResult, setShowResult] = useState(false);
   const [error, setError] = useState<string | null>(null);
-  const { user, isLoading, logout, hasPermission, hasRole } = useAuth();
-  const router = useRouter();
-
-  const canUseSum = hasPermission(Permission.USE_SUM);
-  const isRegularUser = hasRole("regular");
-
-  useEffect(() => {
-    if (!isLoading) {
-      if (!user) {
-        router.push("/login");
-      } else if (!canUseSum) {
-        router.push(hasPermission(Permission.VIEW_AUDIT) ? "/audit" : "/login");
-      }
-    }
-  }, [isLoading, user, router, canUseSum, hasPermission]);
+  const { user, isLoading, isAuthorized } = useRequireAuth({
+    requiredPermission: Permission.USE_SUM,
+  });
 
   const handleSum = async () => {
     const numA = parseFloat(a) || 0;
@@ -34,16 +23,7 @@ export default function SumPage() {
     setError(null);
     
     try {
-      const res = await fetch(`${API_URL}/api/sum`, {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        credentials: "include",
-        body: JSON.stringify({ a: numA, b: numB }),
-      });
-      if (!res.ok) {
-        throw new Error("Calculation failed");
-      }
-      const data = await res.json();
+      const data = await api.post<{ result: number }>("/api/sum", { a: numA, b: numB });
       setResult(data.result);
       setShowResult(true);
     } catch (err) {
@@ -59,11 +39,6 @@ export default function SumPage() {
     setError(null);
   };
 
-  const handleLogout = async () => {
-    await logout();
-    router.push("/login");
-  };
-
   if (isLoading) {
     return (
       <main style={styles.main}>
@@ -72,31 +47,13 @@ export default function SumPage() {
     );
   }
 
-  if (!user || !canUseSum) {
+  if (!user || !isAuthorized) {
     return null;
   }
 
   return (
     <main style={styles.main}>
-      <div style={styles.header}>
-        <div style={styles.nav}>
-          <a href="/" style={styles.navLink}>Counter</a>
-          <span style={styles.navDivider}>•</span>
-          <span style={styles.navCurrent}>Sum</span>
-          {isRegularUser && (
-            <>
-              <span style={styles.navDivider}>•</span>
-              <a href="/profile" style={styles.navLink}>My Profile</a>
-            </>
-          )}
-        </div>
-        <div style={styles.userInfo}>
-          <span style={styles.userEmail}>{user.email}</span>
-          <button onClick={handleLogout} style={styles.logoutBtn}>
-            Sign out
-          </button>
-        </div>
-      </div>
+      <Header currentPage="sum" />
 
       <div style={styles.content}>
         <div style={styles.card}>