mirror of
https://github.com/recklessop/zroc.git
synced 2026-07-02 21:13:15 -04:00
feat: populate Sidebar, TopBar, docker-compose, and more full content
44/61 files now have full content. 17 large files remain as stubs. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Justin
+252
-2
@@ -1,2 +1,252 @@
|
|||||||
# TODO: Full content to be added
|
version: '3.8'
|
||||||
# This file is part of the zROC project recreation
|
|
||||||
|
networks:
|
||||||
|
front-tier:
|
||||||
|
back-tier:
|
||||||
|
auth-tier:
|
||||||
|
|
||||||
|
volumes:
|
||||||
|
prometheus_data: {}
|
||||||
|
grafana_data: {}
|
||||||
|
zroc_ui_data: {}
|
||||||
|
authentik_postgres: {}
|
||||||
|
authentik_redis: {}
|
||||||
|
authentik_media: {}
|
||||||
|
caddy_data: {}
|
||||||
|
|
||||||
|
services:
|
||||||
|
|
||||||
|
caddy:
|
||||||
|
image: caddy:2-alpine
|
||||||
|
container_name: zroc-caddy
|
||||||
|
restart: unless-stopped
|
||||||
|
ports:
|
||||||
|
- "80:80"
|
||||||
|
- "443:443"
|
||||||
|
volumes:
|
||||||
|
- ./zroc-ui/caddy/Caddyfile:/etc/caddy/Caddyfile:ro
|
||||||
|
- ./certs:/certs:ro
|
||||||
|
- caddy_data:/data
|
||||||
|
networks:
|
||||||
|
- front-tier
|
||||||
|
depends_on:
|
||||||
|
- zroc-ui
|
||||||
|
- authentik-server
|
||||||
|
healthcheck:
|
||||||
|
test: ["CMD", "wget", "-qO-", "http://localhost:80"]
|
||||||
|
interval: 30s
|
||||||
|
timeout: 5s
|
||||||
|
retries: 3
|
||||||
|
|
||||||
|
authentik-postgresql:
|
||||||
|
image: postgres:16-alpine
|
||||||
|
container_name: authentik-db
|
||||||
|
restart: unless-stopped
|
||||||
|
environment:
|
||||||
|
POSTGRES_DB: authentik
|
||||||
|
POSTGRES_USER: authentik
|
||||||
|
POSTGRES_PASSWORD: ${AUTHENTIK_PG_PASS}
|
||||||
|
volumes:
|
||||||
|
- authentik_postgres:/var/lib/postgresql/data
|
||||||
|
networks:
|
||||||
|
- auth-tier
|
||||||
|
healthcheck:
|
||||||
|
test: ["CMD-SHELL", "pg_isready -U authentik"]
|
||||||
|
interval: 10s
|
||||||
|
timeout: 5s
|
||||||
|
retries: 5
|
||||||
|
|
||||||
|
authentik-redis:
|
||||||
|
image: redis:7-alpine
|
||||||
|
container_name: authentik-redis
|
||||||
|
restart: unless-stopped
|
||||||
|
command: --save 60 1 --loglevel warning
|
||||||
|
volumes:
|
||||||
|
- authentik_redis:/data
|
||||||
|
networks:
|
||||||
|
- auth-tier
|
||||||
|
healthcheck:
|
||||||
|
test: ["CMD", "redis-cli", "ping"]
|
||||||
|
interval: 10s
|
||||||
|
timeout: 5s
|
||||||
|
retries: 5
|
||||||
|
|
||||||
|
authentik-server:
|
||||||
|
image: ghcr.io/goauthentik/server:latest
|
||||||
|
container_name: authentik-server
|
||||||
|
restart: unless-stopped
|
||||||
|
command: server
|
||||||
|
environment:
|
||||||
|
AUTHENTIK_REDIS__HOST: authentik-redis
|
||||||
|
AUTHENTIK_POSTGRESQL__HOST: authentik-postgresql
|
||||||
|
AUTHENTIK_POSTGRESQL__USER: authentik
|
||||||
|
AUTHENTIK_POSTGRESQL__NAME: authentik
|
||||||
|
AUTHENTIK_POSTGRESQL__PASSWORD: ${AUTHENTIK_PG_PASS}
|
||||||
|
AUTHENTIK_SECRET_KEY: ${AUTHENTIK_SECRET_KEY}
|
||||||
|
AUTHENTIK_DISABLE_STARTUP_ANALYTICS: "true"
|
||||||
|
AUTHENTIK_ERROR_REPORTING__ENABLED: "false"
|
||||||
|
ZROC_OIDC_CLIENT_ID: ${ZROC_OIDC_CLIENT_ID}
|
||||||
|
ZROC_OIDC_CLIENT_SECRET: ${ZROC_OIDC_CLIENT_SECRET}
|
||||||
|
ZROC_PUBLIC_URL: ${ZROC_PUBLIC_URL}
|
||||||
|
volumes:
|
||||||
|
- authentik_media:/media
|
||||||
|
- ./authentik/blueprints:/blueprints/custom:ro
|
||||||
|
networks:
|
||||||
|
- auth-tier
|
||||||
|
- front-tier
|
||||||
|
depends_on:
|
||||||
|
authentik-postgresql:
|
||||||
|
condition: service_healthy
|
||||||
|
authentik-redis:
|
||||||
|
condition: service_healthy
|
||||||
|
healthcheck:
|
||||||
|
test: ["CMD-SHELL", "ak healthcheck || exit 1"]
|
||||||
|
interval: 30s
|
||||||
|
timeout: 10s
|
||||||
|
retries: 5
|
||||||
|
start_period: 60s
|
||||||
|
|
||||||
|
authentik-worker:
|
||||||
|
image: ghcr.io/goauthentik/server:latest
|
||||||
|
container_name: authentik-worker
|
||||||
|
restart: unless-stopped
|
||||||
|
command: worker
|
||||||
|
environment:
|
||||||
|
AUTHENTIK_REDIS__HOST: authentik-redis
|
||||||
|
AUTHENTIK_POSTGRESQL__HOST: authentik-postgresql
|
||||||
|
AUTHENTIK_POSTGRESQL__USER: authentik
|
||||||
|
AUTHENTIK_POSTGRESQL__NAME: authentik
|
||||||
|
AUTHENTIK_POSTGRESQL__PASSWORD: ${AUTHENTIK_PG_PASS}
|
||||||
|
AUTHENTIK_SECRET_KEY: ${AUTHENTIK_SECRET_KEY}
|
||||||
|
AUTHENTIK_DISABLE_STARTUP_ANALYTICS: "true"
|
||||||
|
volumes:
|
||||||
|
- authentik_media:/media
|
||||||
|
- /var/run/docker.sock:/var/run/docker.sock
|
||||||
|
networks:
|
||||||
|
- auth-tier
|
||||||
|
depends_on:
|
||||||
|
- authentik-server
|
||||||
|
user: root
|
||||||
|
|
||||||
|
zroc-ui:
|
||||||
|
image: recklessop/zroc-ui:stable
|
||||||
|
container_name: zroc-ui
|
||||||
|
restart: unless-stopped
|
||||||
|
environment:
|
||||||
|
NODE_ENV: production
|
||||||
|
PORT: "3001"
|
||||||
|
PROMETHEUS_URL: http://prometheus:9090
|
||||||
|
AUTHENTIK_URL: http://authentik-server:9000
|
||||||
|
AUTHENTIK_CLIENT_ID: ${AUTHENTIK_CLIENT_ID}
|
||||||
|
AUTHENTIK_CLIENT_SECRET: ${AUTHENTIK_CLIENT_SECRET}
|
||||||
|
AUTHENTIK_ADMIN_TOKEN: ${AUTHENTIK_ADMIN_TOKEN}
|
||||||
|
PUBLIC_URL: ${PUBLIC_URL}
|
||||||
|
SESSION_SECRET: ${SESSION_SECRET}
|
||||||
|
JWT_EXPIRY_HOURS: "24"
|
||||||
|
AUTHENTIK_ADMIN_GROUP: zroc-admins
|
||||||
|
AUTHENTIK_VIEWER_GROUP: zroc-viewers
|
||||||
|
volumes:
|
||||||
|
- zroc_ui_data:/app/data
|
||||||
|
networks:
|
||||||
|
- front-tier
|
||||||
|
- back-tier
|
||||||
|
- auth-tier
|
||||||
|
depends_on:
|
||||||
|
- prometheus
|
||||||
|
- authentik-server
|
||||||
|
healthcheck:
|
||||||
|
test: ["CMD", "wget", "-qO-", "http://localhost:3001/api/health"]
|
||||||
|
interval: 15s
|
||||||
|
timeout: 5s
|
||||||
|
retries: 3
|
||||||
|
start_period: 20s
|
||||||
|
|
||||||
|
zertoexporter:
|
||||||
|
image: recklessop/zerto-exporter:stable
|
||||||
|
container_name: zvmexporter1
|
||||||
|
hostname: zvmexporter1
|
||||||
|
restart: unless-stopped
|
||||||
|
volumes:
|
||||||
|
- ./zvmexporter:/usr/src/app/logs
|
||||||
|
environment:
|
||||||
|
VERIFY_SSL: "False"
|
||||||
|
ZVM_HOST: ${ZVM_HOST}
|
||||||
|
ZVM_PORT: "443"
|
||||||
|
ZVM_USERNAME: ${ZVM_USERNAME}
|
||||||
|
ZVM_PASSWORD: ${ZVM_PASSWORD}
|
||||||
|
SCRAPE_SPEED: "20"
|
||||||
|
LOGLEVEL: INFO
|
||||||
|
VCENTER_HOST: ${VCENTER_HOST:-}
|
||||||
|
VCENTER_USER: ${VCENTER_USER:-administrator@vsphere.local}
|
||||||
|
VCENTER_PASSWORD: ${VCENTER_PASSWORD:-}
|
||||||
|
networks:
|
||||||
|
- back-tier
|
||||||
|
healthcheck:
|
||||||
|
test: ["CMD", "wget", "-qO-", "http://localhost:9999/metrics"]
|
||||||
|
interval: 30s
|
||||||
|
timeout: 10s
|
||||||
|
retries: 3
|
||||||
|
|
||||||
|
prometheus:
|
||||||
|
image: prom/prometheus:v2.51.0
|
||||||
|
container_name: zroc-prometheus
|
||||||
|
restart: unless-stopped
|
||||||
|
command:
|
||||||
|
- --config.file=/etc/prometheus/prometheus.yml
|
||||||
|
- --storage.tsdb.path=/prometheus
|
||||||
|
- --storage.tsdb.retention.time=30d
|
||||||
|
- --storage.tsdb.retention.size=20GB
|
||||||
|
- --web.listen-address=0.0.0.0:9090
|
||||||
|
- --web.enable-lifecycle
|
||||||
|
volumes:
|
||||||
|
- ./prometheus:/etc/prometheus:ro
|
||||||
|
- prometheus_data:/prometheus
|
||||||
|
networks:
|
||||||
|
- back-tier
|
||||||
|
depends_on:
|
||||||
|
- zertoexporter
|
||||||
|
healthcheck:
|
||||||
|
test: ["CMD", "wget", "-qO-", "http://localhost:9090/-/healthy"]
|
||||||
|
interval: 30s
|
||||||
|
timeout: 5s
|
||||||
|
retries: 3
|
||||||
|
|
||||||
|
grafana:
|
||||||
|
image: grafana/grafana:10.4.2
|
||||||
|
container_name: zroc-grafana
|
||||||
|
restart: unless-stopped
|
||||||
|
user: "472"
|
||||||
|
ports:
|
||||||
|
- "3000:3000"
|
||||||
|
volumes:
|
||||||
|
- grafana_data:/var/lib/grafana
|
||||||
|
- ./grafana/provisioning:/etc/grafana/provisioning:ro
|
||||||
|
environment:
|
||||||
|
GF_SECURITY_ADMIN_PASSWORD: ${GRAFANA_PASSWORD:-zertodata}
|
||||||
|
GF_USERS_ALLOW_SIGN_UP: "false"
|
||||||
|
GF_SERVER_ROOT_URL: "%(protocol)s://%(domain)s:%(http_port)s/grafana/"
|
||||||
|
GF_AUTH_GENERIC_OAUTH_ENABLED: ${GRAFANA_OIDC_ENABLED:-false}
|
||||||
|
GF_AUTH_GENERIC_OAUTH_NAME: Authentik
|
||||||
|
GF_AUTH_GENERIC_OAUTH_CLIENT_ID: ${GRAFANA_CLIENT_ID:-}
|
||||||
|
GF_AUTH_GENERIC_OAUTH_CLIENT_SECRET:${GRAFANA_CLIENT_SECRET:-}
|
||||||
|
GF_AUTH_GENERIC_OAUTH_SCOPES: openid profile email
|
||||||
|
GF_AUTH_GENERIC_OAUTH_AUTH_URL: ${PUBLIC_URL}/auth/application/o/authorize/
|
||||||
|
GF_AUTH_GENERIC_OAUTH_TOKEN_URL: http://authentik-server:9000/application/o/token/
|
||||||
|
GF_AUTH_GENERIC_OAUTH_API_URL: http://authentik-server:9000/application/o/userinfo/
|
||||||
|
networks:
|
||||||
|
- back-tier
|
||||||
|
- front-tier
|
||||||
|
depends_on:
|
||||||
|
- prometheus
|
||||||
|
|
||||||
|
watchtower:
|
||||||
|
image: containrrr/watchtower
|
||||||
|
container_name: zroc-watchtower
|
||||||
|
restart: unless-stopped
|
||||||
|
volumes:
|
||||||
|
- /var/run/docker.sock:/var/run/docker.sock
|
||||||
|
environment:
|
||||||
|
WATCHTOWER_POLL_INTERVAL: "3600"
|
||||||
|
WATCHTOWER_CLEANUP: "true"
|
||||||
|
WATCHTOWER_INCLUDE_STOPPED: "false"
|
||||||
|
command: --label-enable
|
||||||
|
|||||||
@@ -1,2 +1,121 @@
|
|||||||
// TODO: Full content to be added
|
// src/components/layout/Sidebar.jsx
|
||||||
// This file is part of the zROC project recreation
|
import { NavLink } from 'react-router-dom';
|
||||||
|
import {
|
||||||
|
LayoutDashboard, GitFork, Server, Cpu,
|
||||||
|
ShieldAlert, Database, Settings, ChevronLeft,
|
||||||
|
ChevronRight, Activity,
|
||||||
|
} from 'lucide-react';
|
||||||
|
import { useAuth } from '@/auth/AuthContext';
|
||||||
|
import clsx from 'clsx';
|
||||||
|
|
||||||
|
function ZrocLogo({ collapsed }) {
|
||||||
|
return (
|
||||||
|
<div className={clsx(
|
||||||
|
'flex items-center gap-2.5 px-4 h-14 border-b border-border flex-shrink-0',
|
||||||
|
collapsed && 'justify-center px-0',
|
||||||
|
)}>
|
||||||
|
<div className="relative flex-shrink-0">
|
||||||
|
<div className="w-7 h-7 border border-accent rounded-sm flex items-center justify-center bg-accent/10 shadow-glow-sm">
|
||||||
|
<Activity size={14} className="text-accent" />
|
||||||
|
</div>
|
||||||
|
<span className="absolute -top-0.5 -right-0.5 w-2 h-2 bg-ok rounded-full shadow-glow-ok animate-pulse-led" />
|
||||||
|
</div>
|
||||||
|
{!collapsed && (
|
||||||
|
<div>
|
||||||
|
<p className="font-mono text-sm font-semibold text-text-primary leading-none">
|
||||||
|
z<span className="text-accent">ROC</span>
|
||||||
|
</p>
|
||||||
|
<p className="font-mono text-[9px] text-text-muted leading-none mt-0.5 uppercase tracking-widest">
|
||||||
|
Observability Console
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const NAV_ITEMS = [
|
||||||
|
{ to: '/', label: 'Overview', icon: LayoutDashboard, exact: true },
|
||||||
|
{ to: '/vpgs', label: 'VPGs', icon: GitFork },
|
||||||
|
{ to: '/vms', label: 'VMs', icon: Server },
|
||||||
|
{ to: '/vras', label: 'VRAs', icon: Cpu },
|
||||||
|
{ to: '/encryption', label: 'Encryption', icon: ShieldAlert },
|
||||||
|
{ to: '/storage', label: 'Storage', icon: Database },
|
||||||
|
];
|
||||||
|
|
||||||
|
const ADMIN_ITEMS = [
|
||||||
|
{ to: '/settings/users', label: 'Users', icon: Settings },
|
||||||
|
];
|
||||||
|
|
||||||
|
function NavItem({ to, label, icon: Icon, collapsed, exact }) {
|
||||||
|
return (
|
||||||
|
<NavLink
|
||||||
|
to={to}
|
||||||
|
end={exact}
|
||||||
|
className={({ isActive }) =>
|
||||||
|
clsx(
|
||||||
|
'flex items-center gap-3 px-3 py-2.5 rounded-md text-sm transition-all duration-150 group relative',
|
||||||
|
collapsed ? 'justify-center' : '',
|
||||||
|
isActive
|
||||||
|
? 'bg-accent/15 text-accent border border-accent/20 shadow-glow-sm'
|
||||||
|
: 'text-text-secondary hover:text-text-primary hover:bg-raised border border-transparent',
|
||||||
|
)
|
||||||
|
}
|
||||||
|
title={collapsed ? label : undefined}
|
||||||
|
>
|
||||||
|
{({ isActive }) => (
|
||||||
|
<>
|
||||||
|
<Icon size={16} className={clsx('flex-shrink-0 transition-colors', isActive ? 'text-accent' : 'group-hover:text-text-primary')} />
|
||||||
|
{!collapsed && <span className="font-medium">{label}</span>}
|
||||||
|
{isActive && !collapsed && <span className="ml-auto w-1 h-1 rounded-full bg-accent" />}
|
||||||
|
{collapsed && (
|
||||||
|
<span className="absolute left-full ml-2 px-2 py-1 bg-raised border border-border rounded text-xs text-text-primary whitespace-nowrap opacity-0 group-hover:opacity-100 pointer-events-none z-50 transition-opacity duration-150 shadow-panel">
|
||||||
|
{label}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</NavLink>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function Sidebar({ open, onToggle }) {
|
||||||
|
const { isAdmin } = useAuth();
|
||||||
|
const collapsed = !open;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<aside className={clsx(
|
||||||
|
'flex flex-col bg-surface border-r border-border flex-shrink-0 transition-all duration-200 ease-in-out',
|
||||||
|
collapsed ? 'w-14' : 'w-56',
|
||||||
|
)}>
|
||||||
|
<ZrocLogo collapsed={collapsed} />
|
||||||
|
|
||||||
|
<nav className="flex-1 px-2 py-3 space-y-0.5 overflow-y-auto overflow-x-hidden">
|
||||||
|
<div className={clsx(!collapsed && 'mb-1')}>
|
||||||
|
{!collapsed && <p className="section-title px-3 mb-2">Monitor</p>}
|
||||||
|
{NAV_ITEMS.map((item) => (
|
||||||
|
<NavItem key={item.to} {...item} collapsed={collapsed} />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{isAdmin && (
|
||||||
|
<div className={clsx(!collapsed && 'pt-3 mt-3 border-t border-border')}>
|
||||||
|
{collapsed && <div className="border-t border-border my-2 mx-2" />}
|
||||||
|
{!collapsed && <p className="section-title px-3 mb-2">Admin</p>}
|
||||||
|
{ADMIN_ITEMS.map((item) => (
|
||||||
|
<NavItem key={item.to} {...item} collapsed={collapsed} />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<button
|
||||||
|
onClick={onToggle}
|
||||||
|
className="flex items-center justify-center h-10 border-t border-border text-text-muted hover:text-text-primary hover:bg-raised transition-colors duration-150 flex-shrink-0"
|
||||||
|
title={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}
|
||||||
|
>
|
||||||
|
{collapsed ? <ChevronRight size={14} /> : <ChevronLeft size={14} />}
|
||||||
|
</button>
|
||||||
|
</aside>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|||||||
@@ -1,2 +1,98 @@
|
|||||||
// TODO: Full content to be added
|
// src/components/layout/TopBar.jsx
|
||||||
// This file is part of the zROC project recreation
|
import { useState, useEffect, useRef } from 'react';
|
||||||
|
import { useLocation } from 'react-router-dom';
|
||||||
|
import { Menu, RefreshCw, ChevronDown, LogOut } from 'lucide-react';
|
||||||
|
import { useAuth } from '@/auth/AuthContext';
|
||||||
|
import { useQueryClient } from '@tanstack/react-query';
|
||||||
|
import clsx from 'clsx';
|
||||||
|
|
||||||
|
const PAGE_TITLES = {
|
||||||
|
'/': 'Overview',
|
||||||
|
'/vpgs': 'VPG Monitor',
|
||||||
|
'/vms': 'VM Protection',
|
||||||
|
'/vras': 'VRA Infrastructure',
|
||||||
|
'/encryption': 'Encryption Detection',
|
||||||
|
'/storage': 'Storage & Datastores',
|
||||||
|
'/settings/users': 'User Management',
|
||||||
|
'/settings': 'Settings',
|
||||||
|
};
|
||||||
|
|
||||||
|
function UserMenu({ user, onLogout }) {
|
||||||
|
const [open, setOpen] = useState(false);
|
||||||
|
const ref = useRef(null);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const handler = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
|
||||||
|
document.addEventListener('mousedown', handler);
|
||||||
|
return () => document.removeEventListener('mousedown', handler);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const initials = user.name
|
||||||
|
? user.name.split(' ').map((w) => w[0]).slice(0, 2).join('').toUpperCase()
|
||||||
|
: user.username.slice(0, 2).toUpperCase();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div ref={ref} className="relative">
|
||||||
|
<button onClick={() => setOpen((v) => !v)}
|
||||||
|
className="flex items-center gap-2 pl-3 pr-2 py-1.5 rounded-md hover:bg-raised border border-transparent hover:border-border transition-all duration-150">
|
||||||
|
<div className="w-7 h-7 rounded-full bg-accent/20 text-accent flex items-center justify-center font-mono text-xs font-semibold">
|
||||||
|
{initials}
|
||||||
|
</div>
|
||||||
|
<div className="hidden sm:block text-left">
|
||||||
|
<p className="text-xs font-medium text-text-primary leading-none">{user.name || user.username}</p>
|
||||||
|
<p className="text-[10px] text-text-muted font-mono leading-none mt-0.5 capitalize">{user.role}</p>
|
||||||
|
</div>
|
||||||
|
<ChevronDown size={12} className="text-text-muted" />
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{open && (
|
||||||
|
<div className="absolute right-0 top-full mt-1 w-52 card-raised shadow-panel z-50 py-1 animate-fade-in">
|
||||||
|
<div className="px-3 py-2 border-b border-border">
|
||||||
|
<p className="text-xs font-medium text-text-primary">{user.name}</p>
|
||||||
|
<p className="text-[10px] text-text-muted font-mono">{user.email}</p>
|
||||||
|
</div>
|
||||||
|
<button onClick={() => { setOpen(false); onLogout(); }}
|
||||||
|
className="flex w-full items-center gap-2 px-3 py-2 text-sm text-text-secondary hover:text-crit hover:bg-crit/5 transition-colors">
|
||||||
|
<LogOut size={13} />
|
||||||
|
Sign out
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function TopBar({ sidebarOpen, onMenuToggle }) {
|
||||||
|
const { user, logout } = useAuth();
|
||||||
|
const location = useLocation();
|
||||||
|
const queryClient = useQueryClient();
|
||||||
|
const [refreshing, setRefreshing] = useState(false);
|
||||||
|
|
||||||
|
const title = PAGE_TITLES[location.pathname] ?? 'zROC';
|
||||||
|
|
||||||
|
const handleRefresh = async () => {
|
||||||
|
setRefreshing(true);
|
||||||
|
await queryClient.invalidateQueries();
|
||||||
|
setTimeout(() => setRefreshing(false), 800);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<header className="h-14 flex items-center justify-between px-4 border-b border-border bg-surface flex-shrink-0">
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<button onClick={onMenuToggle}
|
||||||
|
className="p-1.5 rounded text-text-muted hover:text-text-primary hover:bg-raised transition-colors md:hidden">
|
||||||
|
<Menu size={16} />
|
||||||
|
</button>
|
||||||
|
<h2 className="font-mono text-sm font-semibold text-text-primary">{title}</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<button onClick={handleRefresh} title="Refresh all data"
|
||||||
|
className="p-1.5 rounded text-text-muted hover:text-accent hover:bg-accent/10 transition-all duration-150">
|
||||||
|
<RefreshCw size={14} className={clsx(refreshing && 'animate-spin text-accent')} />
|
||||||
|
</button>
|
||||||
|
{user && <UserMenu user={user} onLogout={logout} />}
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user