Add easy & DBA mode

frontend/src/App.jsx

@@ -16,7 +16,7 @@ function Protected({ children }) {
 }
 
 function Layout({ children }) {
-  const { me, logout } = useAuth();
+  const { me, logout, uiMode, setUiMode } = useAuth();
   const navClass = ({ isActive }) => `nav-btn${isActive ? " active" : ""}`;
 
   return (
@@ -63,6 +63,18 @@ function Layout({ children }) {
           )}
         </nav>
         <div className="profile">
+          <div className="mode-switch-block">
+            <div className="mode-switch-label">View Mode</div>
+            <button
+              className={`mode-toggle ${uiMode === "easy" ? "easy" : "dba"}`}
+              onClick={() => setUiMode(uiMode === "easy" ? "dba" : "easy")}
+              type="button"
+            >
+              <span className="mode-pill">Easy</span>
+              <span className="mode-pill">DBA</span>
+            </button>
+            <small>{uiMode === "easy" ? "Simple health guidance" : "Advanced DBA metrics"}</small>
+          </div>
           <div>{me?.email}</div>
           <div className="role">{me?.role}</div>
           <button className="logout-btn" onClick={logout}>Logout</button>