review

frontend/app/sum/page.tsx

@@ -4,12 +4,14 @@ import { useEffect, useState } from "react";
 import { useRouter } from "next/navigation";
 import { useAuth, Permission } from "../auth-context";
 import { API_URL } from "../config";
+import { sharedStyles } from "../styles/shared";
 
 export default function SumPage() {
   const [a, setA] = useState("");
   const [b, setB] = useState("");
   const [result, setResult] = useState<number | null>(null);
   const [showResult, setShowResult] = useState(false);
+  const [error, setError] = useState<string | null>(null);
   const { user, isLoading, logout, hasPermission } = useAuth();
   const router = useRouter();
 
@@ -28,6 +30,7 @@ export default function SumPage() {
   const handleSum = async () => {
     const numA = parseFloat(a) || 0;
     const numB = parseFloat(b) || 0;
+    setError(null);
     
     try {
       const res = await fetch(`${API_URL}/api/sum`, {
@@ -36,13 +39,14 @@ export default function SumPage() {
         credentials: "include",
         body: JSON.stringify({ a: numA, b: numB }),
       });
+      if (!res.ok) {
+        throw new Error("Calculation failed");
+      }
       const data = await res.json();
       setResult(data.result);
       setShowResult(true);
-    } catch {
-      // Fallback to local calculation if API fails
-      setResult(numA + numB);
-      setShowResult(true);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Calculation failed");
     }
   };
 
@@ -51,6 +55,7 @@ export default function SumPage() {
     setB("");
     setResult(null);
     setShowResult(false);
+    setError(null);
   };
 
   const handleLogout = async () => {
@@ -123,6 +128,9 @@ export default function SumPage() {
                 <span style={styles.equalsIcon}>=</span>
                 Calculate
               </button>
+              {error && (
+                <div style={styles.error}>{error}</div>
+              )}
             </div>
           ) : (
             <div style={styles.resultSection}>
@@ -145,80 +153,7 @@ export default function SumPage() {
   );
 }
 
-const styles: Record<string, React.CSSProperties> = {
-  main: {
-    minHeight: "100vh",
-    background: "linear-gradient(135deg, #0f0f23 0%, #1a1a3e 50%, #2d1b4e 100%)",
-    display: "flex",
-    flexDirection: "column",
-  },
-  loader: {
-    flex: 1,
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    fontFamily: "'DM Sans', system-ui, sans-serif",
-    color: "rgba(255, 255, 255, 0.5)",
-    fontSize: "1.125rem",
-  },
-  header: {
-    padding: "1.5rem 2rem",
-    borderBottom: "1px solid rgba(255, 255, 255, 0.06)",
-    display: "flex",
-    justifyContent: "space-between",
-    alignItems: "center",
-  },
-  nav: {
-    display: "flex",
-    alignItems: "center",
-    gap: "0.75rem",
-  },
-  navLink: {
-    fontFamily: "'DM Sans', system-ui, sans-serif",
-    color: "rgba(255, 255, 255, 0.5)",
-    fontSize: "0.875rem",
-    textDecoration: "none",
-    transition: "color 0.2s",
-  },
-  navDivider: {
-    color: "rgba(255, 255, 255, 0.2)",
-    fontSize: "0.75rem",
-  },
-  navCurrent: {
-    fontFamily: "'DM Sans', system-ui, sans-serif",
-    color: "#a78bfa",
-    fontSize: "0.875rem",
-    fontWeight: 600,
-  },
-  userInfo: {
-    display: "flex",
-    alignItems: "center",
-    gap: "1rem",
-  },
-  userEmail: {
-    fontFamily: "'DM Sans', system-ui, sans-serif",
-    color: "rgba(255, 255, 255, 0.6)",
-    fontSize: "0.875rem",
-  },
-  logoutBtn: {
-    fontFamily: "'DM Sans', system-ui, sans-serif",
-    padding: "0.5rem 1rem",
-    fontSize: "0.875rem",
-    fontWeight: 500,
-    background: "rgba(255, 255, 255, 0.05)",
-    color: "rgba(255, 255, 255, 0.7)",
-    border: "1px solid rgba(255, 255, 255, 0.1)",
-    borderRadius: "8px",
-    cursor: "pointer",
-    transition: "all 0.2s",
-  },
-  content: {
-    flex: 1,
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    padding: "2rem",
-  },
+const pageStyles: Record<string, React.CSSProperties> = {
   card: {
     background: "rgba(255, 255, 255, 0.03)",
     backdropFilter: "blur(10px)",
@@ -344,5 +279,13 @@ const styles: Record<string, React.CSSProperties> = {
   resetIcon: {
     fontSize: "1.25rem",
   },
+  error: {
+    fontFamily: "'DM Sans', system-ui, sans-serif",
+    color: "#f87171",
+    fontSize: "0.875rem",
+    marginTop: "0.5rem",
+  },
 };
 
+const styles = { ...sharedStyles, ...pageStyles };
+