265 lines
10 KiB
TypeScript
265 lines
10 KiB
TypeScript
import { useRef, useState, useEffect } from "react";
|
|
import { Bell, Check, LogOut, Settings, UserCircle } from "lucide-react";
|
|
import type { ApiSettings, AuthInfo, AuthTenantMembership, AuthUpdate, LoginResponse } from "../types";
|
|
import HelpMenu from "./HelpMenu";
|
|
import LanguageMenu from "./LanguageMenu";
|
|
import LoginModal from "../features/auth/LoginModal";
|
|
import DismissibleAlert from "../components/DismissibleAlert";
|
|
import { useGuardedNavigate, useUnsavedChanges } from "../components/UnsavedChangesGuard";
|
|
import { apiFetch, isApiError } from "../api/client";
|
|
import { logout, switchTenant } from "../api/auth";
|
|
import { hasAnyScope } from "../utils/permissions";
|
|
import { usePlatformLanguage } from "../i18n/LanguageContext";
|
|
import { usePlatformModules } from "../platform/ModuleContext";
|
|
|
|
type NotificationSummary = {
|
|
unread: number;
|
|
show_unread_badge?: boolean;
|
|
};
|
|
|
|
type Props = {
|
|
settings: ApiSettings;
|
|
auth: AuthInfo | null;
|
|
onSettingsChange: (settings: ApiSettings) => void;
|
|
onAuthChange: (auth: AuthUpdate | null, accessToken?: string) => void;
|
|
maintenanceMode?: {enabled: boolean;message?: string | null;};
|
|
backendReachable?: boolean;
|
|
};
|
|
|
|
export default function Titlebar({ settings, auth, onAuthChange, maintenanceMode, backendReachable = true }: Props) {
|
|
const navigate = useGuardedNavigate();
|
|
const { requestNavigation } = useUnsavedChanges();
|
|
const [accountOpen, setAccountOpen] = useState(false);
|
|
const [tenantOpen, setTenantOpen] = useState(false);
|
|
const [loginOpen, setLoginOpen] = useState(false);
|
|
const [switchingTenantId, setSwitchingTenantId] = useState<string | null>(null);
|
|
const [tenantError, setTenantError] = useState("");
|
|
const [unreadNotificationCount, setUnreadNotificationCount] = useState(0);
|
|
const accountRef = useRef<HTMLDivElement>(null);
|
|
const tenantRef = useRef<HTMLDivElement>(null);
|
|
const { translateText } = usePlatformLanguage();
|
|
const modules = usePlatformModules();
|
|
|
|
const activeTenant = auth?.active_tenant ?? auth?.tenant ?? null;
|
|
const tenants = auth?.tenants ?? (activeTenant ? [activeTenant] : []);
|
|
const displayUserName = auth?.user?.display_name || auth?.user?.email || translateText("i18n:govoplan-core.sign_in.ada2e9e9");
|
|
const canSwitchTenant = tenants.length > 1;
|
|
const canAdministerTenants = hasAnyScope(auth, [
|
|
"system:tenants:read",
|
|
"system:tenants:create",
|
|
"system:tenants:update",
|
|
"system:tenants:suspend"]
|
|
);
|
|
const showTenantControl = Boolean(activeTenant && (canSwitchTenant || canAdministerTenants));
|
|
const notificationsAvailable = modules.some((module) => module.id === "notifications" && module.routes?.some((route) => route.path === "/notifications"));
|
|
const notificationBadgeLabel = unreadNotificationCount > 99 ? "99+" : String(unreadNotificationCount);
|
|
|
|
useEffect(() => {
|
|
function onPointerDown(event: MouseEvent) {
|
|
const target = event.target as Node;
|
|
if (accountRef.current && !accountRef.current.contains(target)) {
|
|
setAccountOpen(false);
|
|
}
|
|
if (tenantRef.current && !tenantRef.current.contains(target)) {
|
|
setTenantOpen(false);
|
|
}
|
|
}
|
|
window.addEventListener("mousedown", onPointerDown);
|
|
return () => window.removeEventListener("mousedown", onPointerDown);
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
if (!auth || !notificationsAvailable) {
|
|
setUnreadNotificationCount(0);
|
|
return;
|
|
}
|
|
|
|
let cancelled = false;
|
|
async function refreshNotificationSummary() {
|
|
try {
|
|
const summary = await apiFetch<NotificationSummary>(settings, "/api/v1/notifications/summary", { cache: "no-store" });
|
|
if (!cancelled) {
|
|
setUnreadNotificationCount(summary.show_unread_badge === false ? 0 : Math.max(0, Number(summary.unread) || 0));
|
|
}
|
|
} catch (error) {
|
|
if (!cancelled) {
|
|
setUnreadNotificationCount(0);
|
|
}
|
|
if (!isApiError(error, 401, 403, 404)) {
|
|
console.error("Failed to load notification summary", error);
|
|
}
|
|
}
|
|
}
|
|
|
|
void refreshNotificationSummary();
|
|
const intervalId = window.setInterval(refreshNotificationSummary, 60_000);
|
|
window.addEventListener("focus", refreshNotificationSummary);
|
|
window.addEventListener("govoplan:notifications-changed", refreshNotificationSummary);
|
|
return () => {
|
|
cancelled = true;
|
|
window.clearInterval(intervalId);
|
|
window.removeEventListener("focus", refreshNotificationSummary);
|
|
window.removeEventListener("govoplan:notifications-changed", refreshNotificationSummary);
|
|
};
|
|
}, [activeTenant?.id, auth?.user?.id, notificationsAvailable, settings.accessToken, settings.apiBaseUrl, settings.apiKey]);
|
|
|
|
function handleLogin(response: LoginResponse) {
|
|
onAuthChange(response, "");
|
|
}
|
|
|
|
async function performLogout() {
|
|
try {
|
|
await logout(settings);
|
|
} catch {
|
|
|
|
// Logout is best effort; clear local session either way.
|
|
}
|
|
onAuthChange(null, "");
|
|
setAccountOpen(false);
|
|
}
|
|
|
|
async function performTenantSelect(tenant: AuthTenantMembership) {
|
|
setSwitchingTenantId(tenant.id);
|
|
setTenantError("");
|
|
try {
|
|
const next = await switchTenant(settings, tenant.id);
|
|
// Keep the current URL. The tenant-keyed route tree reloads in the new
|
|
// context; permission and resource boundaries then retain the page or
|
|
// fall back to the nearest accessible parent.
|
|
onAuthChange(next);
|
|
setTenantOpen(false);
|
|
} catch (error) {
|
|
setTenantError(error instanceof Error ? error.message : translateText("i18n:govoplan-core.tenant_switch_failed.c325b20b"));
|
|
} finally {
|
|
setSwitchingTenantId(null);
|
|
}
|
|
}
|
|
|
|
function handleLogout() {
|
|
requestNavigation(() => {void performLogout();});
|
|
}
|
|
|
|
function handleTenantSelect(tenant: AuthTenantMembership) {
|
|
if (!auth || tenant.id === activeTenant?.id || switchingTenantId) {
|
|
setTenantOpen(false);
|
|
return;
|
|
}
|
|
requestNavigation(() => {void performTenantSelect(tenant);});
|
|
}
|
|
|
|
function handleAccountSettings() {
|
|
setAccountOpen(false);
|
|
navigate("/settings?section=profile");
|
|
}
|
|
|
|
function openMaintenanceSettings() {
|
|
navigate("/admin?section=system-settings");
|
|
}
|
|
|
|
function openNotificationCenter() {
|
|
navigate("/notifications");
|
|
}
|
|
|
|
return (
|
|
<header className="titlebar">
|
|
{!backendReachable ?
|
|
<div
|
|
className="backend-offline-topbar-alert"
|
|
role="status"
|
|
aria-live="polite"
|
|
title="System not reachable / offline!">
|
|
System not reachable / offline!
|
|
</div> :
|
|
maintenanceMode?.enabled &&
|
|
<button
|
|
type="button"
|
|
className="maintenance-topbar-link"
|
|
title={maintenanceMode.message || translateText("i18n:govoplan-core.open_maintenance_mode_settings.99b41249")}
|
|
onClick={openMaintenanceSettings}>
|
|
|
|
{translateText("i18n:govoplan-core.maintenance_mode_enabled.4fb4a37d")}
|
|
</button>
|
|
}
|
|
|
|
{auth && activeTenant && showTenantControl &&
|
|
<div className="tenant-selector" ref={tenantRef}>
|
|
<span className="tenant-label">{translateText("i18n:govoplan-core.tenant_label_prefix")}</span>
|
|
{canSwitchTenant ?
|
|
<>
|
|
<button className="tenant-name-button" onClick={() => setTenantOpen(!tenantOpen)}>
|
|
<strong>{activeTenant.name}</strong>
|
|
<span className="tenant-caret">▾</span>
|
|
</button>
|
|
{tenantOpen &&
|
|
<div className="dropdown-menu tenant-menu">
|
|
{tenants.map((tenant) => {
|
|
const active = tenant.id === activeTenant.id;
|
|
return (
|
|
<button
|
|
key={tenant.id}
|
|
className={`dropdown-item ${active ? "active" : ""}`}
|
|
onClick={() => void handleTenantSelect(tenant)}
|
|
disabled={Boolean(switchingTenantId)}>
|
|
|
|
<span>{switchingTenantId === tenant.id ? translateText("i18n:govoplan-core.switching.ca40b0ec") : tenant.name}</span>
|
|
{active && <Check size={16} />}
|
|
</button>);
|
|
|
|
})}
|
|
{tenantError && <DismissibleAlert tone="danger" compact dismissible={false} className="dropdown-error">{tenantError}</DismissibleAlert>}
|
|
</div>
|
|
}
|
|
</> :
|
|
|
|
<strong>{activeTenant.name}</strong>
|
|
}
|
|
</div>
|
|
}
|
|
|
|
<div className="titlebar-spacer" />
|
|
|
|
<LanguageMenu />
|
|
<HelpMenu auth={auth} />
|
|
|
|
{auth && notificationsAvailable &&
|
|
<button className="titlebar-icon-link titlebar-notification-button" onClick={openNotificationCenter} title={translateText("i18n:govoplan-core.notifications.753a22b2")} aria-label={translateText("i18n:govoplan-core.notifications.753a22b2")}>
|
|
<Bell size={18} />
|
|
{unreadNotificationCount > 0 &&
|
|
<span className="titlebar-notification-badge" aria-label={`${unreadNotificationCount} unread`}>
|
|
{notificationBadgeLabel}
|
|
</span>
|
|
}
|
|
</button>
|
|
}
|
|
|
|
<div className="context-menu-wrap" ref={accountRef}>
|
|
<button className="account-pill" onClick={() => setAccountOpen(!accountOpen)}>
|
|
<UserCircle size={22} />
|
|
<span>{displayUserName}</span>
|
|
<span className="tenant-caret">▾</span>
|
|
</button>
|
|
{accountOpen &&
|
|
<div className="dropdown-menu account-menu">
|
|
{auth ?
|
|
<>
|
|
{auth.user &&
|
|
<div className="account-menu-header">
|
|
<strong>{auth.user.display_name || auth.user.email}</strong>
|
|
<span>{auth.user.email}</span>
|
|
</div>
|
|
}
|
|
<button className="dropdown-item" onClick={handleAccountSettings}><Settings size={16} /> {translateText("i18n:govoplan-core.account_settings.82cf8a5f")}</button>
|
|
<button className="dropdown-item" onClick={handleLogout}><LogOut size={16} /> {translateText("i18n:govoplan-core.sign_out.dc1649a1")}</button>
|
|
</> :
|
|
|
|
<button className="dropdown-item" onClick={() => {setLoginOpen(true);setAccountOpen(false);}}><UserCircle size={16} /> {translateText("i18n:govoplan-core.sign_in.ada2e9e9")}</button>
|
|
}
|
|
</div>
|
|
}
|
|
</div>
|
|
|
|
{loginOpen && <LoginModal settings={settings} onClose={() => setLoginOpen(false)} onLogin={handleLogin} />}
|
|
</header>);
|
|
|
|
}
|