fix: theme toggle

apps/edr-freight-web/backoffice/src/components/layout/FreightDashboardHeader.tsx

@@ -15,9 +15,7 @@ import {
   FileSignature,
   Languages,
   LogOut,
-  Moon,
   Search,
-  Sun,
   User,
 } from "lucide-react";
 import { type ReactNode } from "react";
@@ -31,13 +29,10 @@ import type { PageMeta } from "./types";
 export interface FreightDashboardHeaderProps {
   pageMeta: PageMeta;
   headerRight?: ReactNode;
-  enableThemeToggle?: boolean;
   userName?: string;
   userEmail?: string;
   userInitials?: string;
   onLogout?: () => void;
-  theme: "light" | "dark";
-  onToggleTheme: () => void;
   mobileOpened: boolean;
   onToggleMobile: () => void;
   /** Hide the mobile burger when the shell has no sidebar to open. */
@@ -51,13 +46,10 @@ const ISLAND =
 
 const FreightDashboardHeader = ({
   headerRight,
-  enableThemeToggle = false,
   userName = "User",
   userEmail,
   userInitials,
   onLogout,
-  theme,
-  onToggleTheme,
   mobileOpened,
   onToggleMobile,
   hideSidebarBurger = false,
@@ -129,26 +121,6 @@ const FreightDashboardHeader = ({
 
           <NotificationBellContainer />
 
-          {enableThemeToggle && (
-            <Tooltip
-              label={theme === "dark" ? "Light mode" : "Dark mode"}
-              withArrow
-              openDelay={300}
-            >
-              <UnstyledButton
-                className={ISLAND}
-                onClick={onToggleTheme}
-                aria-label="Toggle theme"
-              >
-                {theme === "dark" ? (
-                  <Sun size={17} strokeWidth={1.8} />
-                ) : (
-                  <Moon size={17} strokeWidth={1.8} />
-                )}
-              </UnstyledButton>
-            </Tooltip>
-          )}
-
           {/* Avatar pill */}
           <Menu width={240} position="bottom-end" withinPortal shadow="md" offset={8} radius="md">
             <Menu.Target>

apps/edr-freight-web/backoffice/src/components/layout/FreightDashboardLayout.tsx

@@ -1,26 +1,15 @@
 import { AppShell, Box } from "@mantine/core";
 import { useDisclosure } from "@mantine/hooks";
-import { type ReactNode, useEffect, useState } from "react";
+import { type ReactNode } from "react";
 
 import FreightDashboardHeader from "./FreightDashboardHeader";
 import FreightSidebar from "./FreightSidebar";
 import { getPageMeta } from "./route-meta";
 import type { SidebarSection } from "./types";
 
-type Theme = "light" | "dark";
-const THEME_STORAGE_KEY = "edr-theme";
 const HEADER_HEIGHT = 64;
 const NAVBAR_WIDTH = 280;
 
-function getInitialTheme(): Theme {
-  if (typeof window === "undefined") return "light";
-  const stored = window.localStorage.getItem(THEME_STORAGE_KEY);
-  if (stored === "dark" || stored === "light") return stored;
-  return window.matchMedia?.("(prefers-color-scheme: dark)").matches
-    ? "dark"
-    : "light";
-}
-
 export interface FreightDashboardLayoutProps {
   sidebarSections: SidebarSection[];
   /** Render the shell with no navbar at all (used by GL clearance-only users). */
@@ -28,7 +17,6 @@ export interface FreightDashboardLayoutProps {
   activeHref?: string;
   onNavigate?: (href: string) => void;
   headerRight?: ReactNode;
-  enableThemeToggle?: boolean;
   userName?: string;
   userEmail?: string;
   userInitials?: string;
@@ -42,7 +30,6 @@ const FreightDashboardLayout = ({
   activeHref = "",
   onNavigate,
   headerRight,
-  enableThemeToggle = false,
   userName,
   userEmail,
   userInitials,
@@ -53,20 +40,6 @@ const FreightDashboardLayout = ({
   const [mobileOpened, { toggle: toggleMobile, close: closeMobile }] =
     useDisclosure(false);
 
-  const [theme, setTheme] = useState<Theme>(() =>
-    enableThemeToggle ? getInitialTheme() : "light",
-  );
-
-  useEffect(() => {
-    if (!enableThemeToggle) return;
-    const root = document.documentElement;
-    root.classList.toggle("dark", theme === "dark");
-    window.localStorage.setItem(THEME_STORAGE_KEY, theme);
-  }, [theme, enableThemeToggle]);
-
-  const toggleTheme = () =>
-    setTheme((current) => (current === "dark" ? "light" : "dark"));
-
   const navigate = (href: string) => {
     closeMobile();
     onNavigate?.(href);
@@ -93,13 +66,10 @@ const FreightDashboardLayout = ({
       <FreightDashboardHeader
         pageMeta={pageMeta}
         headerRight={headerRight}
-        enableThemeToggle={enableThemeToggle}
         userName={userName}
         userEmail={userEmail}
         userInitials={userInitials}
         onLogout={onLogout}
-        theme={theme}
-        onToggleTheme={toggleTheme}
         mobileOpened={mobileOpened}
         onToggleMobile={toggleMobile}
         hideSidebarBurger={hideSidebar}