diff --git a/client/src/components/Layout.jsx b/client/src/components/Layout.jsx index c5f8be3..1da94f6 100644 --- a/client/src/components/Layout.jsx +++ b/client/src/components/Layout.jsx @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import React, { useState, useEffect } from 'react'; import { Outlet, Link, useLocation } from 'react-router-dom'; // import { useTranslation } from 'react-i18next'; // Commented out until Docker rebuild import { useAuth } from '../contexts/AuthContext'; @@ -7,6 +7,7 @@ import DebugToggle from './DebugToggle'; import LanguageSelector from './common/LanguageSelector'; import { canAccessSettings, hasPermission } from '../utils/rbac'; import { t } from '../utils/tempTranslations'; // Temporary translation system +import api from '../services/api'; import { HomeIcon, MapIcon, @@ -25,11 +26,29 @@ import classNames from 'classnames'; const Layout = () => { const [sidebarOpen, setSidebarOpen] = useState(false); + const [tenantInfo, setTenantInfo] = useState(null); // const { t } = useTranslation(); // Commented out until Docker rebuild const { user, logout } = useAuth(); const { connected, recentDetections } = useSocket(); const location = useLocation(); + // Fetch tenant information for branding + useEffect(() => { + const fetchTenantInfo = async () => { + try { + const response = await api.get('/tenant/info'); + setTenantInfo(response.data.data); + } catch (error) { + console.error('Failed to fetch tenant info:', error); + // Don't show error toast as this is not critical + } + }; + + if (user) { + fetchTenantInfo(); + } + }, [user]); + // Build navigation based on user permissions with translations const baseNavigation = [ { name: t('navigation.dashboard'), href: '/', icon: HomeIcon }, @@ -78,7 +97,7 @@ const Layout = () => { - + @@ -86,7 +105,7 @@ const Layout = () => {
- +
@@ -174,18 +193,32 @@ const Layout = () => { ); }; -const SidebarContent = ({ navigation }) => { +const SidebarContent = ({ navigation, tenantInfo }) => { const location = useLocation(); return ( <>
-
+ {/* Display tenant logo if available, otherwise show default icon */} + {tenantInfo?.branding?.logo_url ? ( + {`${tenantInfo.name { + // Fallback to default icon if logo fails to load + e.target.style.display = 'none'; + e.target.nextSibling.style.display = 'flex'; + }} + /> + ) : null} + {/* Default icon (shown if no logo or logo fails to load) */} +

- Drone Detector + {tenantInfo?.name || 'Drone Detector'}

diff --git a/client/src/pages/Login.jsx b/client/src/pages/Login.jsx index e4ad987..bccff09 100644 --- a/client/src/pages/Login.jsx +++ b/client/src/pages/Login.jsx @@ -92,11 +92,33 @@ const Login = () => {
-
- - - -
+ {/* Display tenant logo if available, otherwise show default icon */} + {tenantConfig?.branding?.logo_url ? ( +
+ {`${tenantConfig.tenant_name { + // Fallback to default icon if logo fails to load + e.target.style.display = 'none'; + e.target.nextSibling.style.display = 'flex'; + }} + /> + {/* Hidden fallback icon */} +
+ + + +
+
+ ) : ( +
+ + + +
+ )}

{tenantConfig?.tenant_name || 'Drone Detection System'}

diff --git a/client/src/pages/Register.jsx b/client/src/pages/Register.jsx index 040cadf..f8590f7 100644 --- a/client/src/pages/Register.jsx +++ b/client/src/pages/Register.jsx @@ -201,11 +201,33 @@ const Register = () => {
-
- - - -
+ {/* Display tenant logo if available, otherwise show default icon */} + {tenantConfig?.branding?.logo_url ? ( +
+ {`${tenantConfig.tenant_name { + // Fallback to default icon if logo fails to load + e.target.style.display = 'none'; + e.target.nextSibling.style.display = 'flex'; + }} + /> + {/* Hidden fallback icon */} +
+ + + +
+
+ ) : ( +
+ + + +
+ )}

Create your account