feat: remove Administration workspace — keep only Verwaltung + Suche
- Delete all ops page components (ReviewQueue, AIMonitoring, Governance, SourceMonitoring, ActivityTimeline, SignalPipeline) - Remove OPERATIONS workspace from AppShell config, nav order, path detection - Remove all /ops/* routes from App.tsx - Remove WorkspaceType.OPERATIONS from allowedWorkspaces in authService, sessionStore, permissions - Keep MarketIntelligence page (already moved to /supply/market-intelligence) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Benjamin Sutter
@@ -0,0 +1,553 @@
|
||||
import { useEffect } from 'react'
|
||||
import { Outlet, NavLink, useNavigate, useLocation } from 'react-router'
|
||||
import { useLayoutStore } from '../../stores/layoutStore'
|
||||
import { useSessionStore } from '../../stores/sessionStore'
|
||||
import { WorkspaceType } from '../../domain/enums'
|
||||
import {
|
||||
Box,
|
||||
Typography,
|
||||
Avatar,
|
||||
IconButton,
|
||||
Tooltip,
|
||||
Chip,
|
||||
Button,
|
||||
} from '@mui/material'
|
||||
import {
|
||||
LayoutDashboard,
|
||||
Building2,
|
||||
Target,
|
||||
TrendingUp,
|
||||
CheckSquare,
|
||||
Search,
|
||||
List,
|
||||
Columns2,
|
||||
Bookmark,
|
||||
ClipboardList,
|
||||
Activity,
|
||||
Shield,
|
||||
ChevronLeft,
|
||||
ChevronRight,
|
||||
Sparkles,
|
||||
Clock,
|
||||
Radar,
|
||||
ServerCog,
|
||||
GitBranch,
|
||||
} from 'lucide-react'
|
||||
import type { LucideIcon } from 'lucide-react'
|
||||
import { OrganizationContextBadge } from './OrganizationContextBadge'
|
||||
import { UserMenu } from './UserMenu'
|
||||
import { NotificationButton } from './NotificationButton'
|
||||
import { RightContextPanel } from './RightContextPanel'
|
||||
import { CompareTray } from './CompareTray'
|
||||
import { GlobalAIAssistantDrawer, GlobalAIAssistantButton } from '../assistant'
|
||||
import { useAssistantStore } from '../../stores/assistantStore'
|
||||
import { ToastProvider } from '../ui'
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Types
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
interface NavItem {
|
||||
path: string
|
||||
label: string
|
||||
icon: LucideIcon
|
||||
}
|
||||
|
||||
interface WorkspaceConfig {
|
||||
label: string
|
||||
abbreviation: string
|
||||
icon: LucideIcon
|
||||
firstPath: string
|
||||
navItems: NavItem[]
|
||||
chipColor: string
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Workspace configuration
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
const WORKSPACE_CONFIG: Record<WorkspaceType, WorkspaceConfig> = {
|
||||
[WorkspaceType.SUPPLY]: {
|
||||
label: 'Verwaltung',
|
||||
abbreviation: 'VW',
|
||||
icon: Building2,
|
||||
firstPath: '/supply/dashboard',
|
||||
chipColor: '#1e3a5f',
|
||||
navItems: [
|
||||
{ path: '/supply/dashboard', label: 'Übersicht', icon: LayoutDashboard },
|
||||
{ path: '/supply/properties', label: 'Meine Objekte', icon: Building2 },
|
||||
{ path: '/supply/match-center', label: 'Eingehende Bedarfe', icon: Target },
|
||||
{ path: '/supply/future-availability', label: 'Marktchancen', icon: TrendingUp },
|
||||
{ path: '/supply/data-quality', label: 'Datenpflege', icon: CheckSquare },
|
||||
],
|
||||
},
|
||||
[WorkspaceType.DEMAND]: {
|
||||
label: 'Suche',
|
||||
abbreviation: 'SU',
|
||||
icon: Search,
|
||||
firstPath: '/demand/ai-search',
|
||||
chipColor: '#1a7a4a',
|
||||
navItems: [
|
||||
{ path: '/demand/ai-search', label: 'Flächensuche', icon: Search },
|
||||
{ path: '/demand/results', label: 'Ergebnisse', icon: List },
|
||||
{ path: '/demand/compare', label: 'Vergleich', icon: Columns2 },
|
||||
{ path: '/demand/shortlists', label: 'Shortlists', icon: Bookmark },
|
||||
],
|
||||
},
|
||||
[WorkspaceType.OPERATIONS]: {
|
||||
label: 'Administration',
|
||||
abbreviation: 'ADM',
|
||||
icon: Shield,
|
||||
firstPath: '/ops/review-queue',
|
||||
chipColor: '#7c3aed',
|
||||
navItems: [
|
||||
{ path: '/ops/review-queue', label: 'Review Queue', icon: ClipboardList },
|
||||
{ path: '/ops/ai-monitoring', label: 'AI Monitoring', icon: Activity },
|
||||
{ path: '/ops/governance', label: 'Governance', icon: Shield },
|
||||
{ path: '/ops/market-intelligence', label: 'Market Intelligence', icon: Radar },
|
||||
{ path: '/ops/source-monitoring', label: 'Source Monitoring', icon: ServerCog },
|
||||
{ path: '/ops/signal-pipeline', label: 'Signal Pipeline', icon: GitBranch },
|
||||
{ path: '/ops/activity-timeline', label: 'Aktivitäts-Timeline', icon: Clock },
|
||||
],
|
||||
},
|
||||
}
|
||||
|
||||
// Ordered list for rendering workspace tabs
|
||||
const WORKSPACE_ORDER: WorkspaceType[] = [
|
||||
WorkspaceType.SUPPLY,
|
||||
WorkspaceType.DEMAND,
|
||||
WorkspaceType.OPERATIONS,
|
||||
]
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Helpers
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
function getWorkspaceFromPath(pathname: string): WorkspaceType | null {
|
||||
if (pathname.startsWith('/supply')) return WorkspaceType.SUPPLY
|
||||
if (pathname.startsWith('/demand')) return WorkspaceType.DEMAND
|
||||
if (pathname.startsWith('/ops')) return WorkspaceType.OPERATIONS
|
||||
return null
|
||||
}
|
||||
|
||||
function getPageNameFromPath(pathname: string): string {
|
||||
for (const ws of Object.values(WORKSPACE_CONFIG)) {
|
||||
for (const item of ws.navItems) {
|
||||
if (item.path === pathname) return item.label
|
||||
}
|
||||
}
|
||||
// Fallback: last segment, capitalised
|
||||
const segment = pathname.split('/').filter(Boolean).pop() ?? ''
|
||||
return segment.charAt(0).toUpperCase() + segment.slice(1).replace(/-/g, ' ')
|
||||
}
|
||||
|
||||
function getUserInitials(name: string): string {
|
||||
return name
|
||||
.split(' ')
|
||||
.map((n) => n[0])
|
||||
.join('')
|
||||
.toUpperCase()
|
||||
.slice(0, 2)
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Sub-components
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
const SIDEBAR_BG = '#0f1923'
|
||||
const DIVIDER_COLOR = 'rgba(255,255,255,0.08)'
|
||||
const TEXT_MUTED = '#94a3b8'
|
||||
const TEXT_WHITE = '#ffffff'
|
||||
const ACTIVE_BG = 'rgba(255,255,255,0.1)'
|
||||
const NAV_ACTIVE_BG = 'rgba(255,255,255,0.12)'
|
||||
const NAV_HOVER_BG = 'rgba(255,255,255,0.06)'
|
||||
|
||||
interface SidebarProps {
|
||||
collapsed: boolean
|
||||
activeWorkspace: WorkspaceType
|
||||
allowedWorkspaces: WorkspaceType[]
|
||||
onWorkspaceClick: (workspace: WorkspaceType) => void
|
||||
onToggle: () => void
|
||||
userName: string
|
||||
orgName: string
|
||||
}
|
||||
|
||||
function Sidebar({
|
||||
collapsed,
|
||||
activeWorkspace,
|
||||
allowedWorkspaces,
|
||||
onWorkspaceClick,
|
||||
onToggle,
|
||||
userName,
|
||||
orgName,
|
||||
}: SidebarProps) {
|
||||
const config = WORKSPACE_CONFIG[activeWorkspace]
|
||||
const width = collapsed ? 60 : 240
|
||||
const visibleWorkspaces = WORKSPACE_ORDER.filter((ws) => allowedWorkspaces.includes(ws))
|
||||
|
||||
return (
|
||||
<Box
|
||||
component="nav"
|
||||
sx={{
|
||||
width,
|
||||
minWidth: width,
|
||||
flexShrink: 0,
|
||||
height: '100vh',
|
||||
backgroundColor: SIDEBAR_BG,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
transition: 'width 0.2s ease',
|
||||
overflow: 'hidden',
|
||||
}}
|
||||
>
|
||||
{/* Logo area */}
|
||||
<Box
|
||||
sx={{
|
||||
height: 56,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: collapsed ? 'center' : 'flex-start',
|
||||
px: collapsed ? 0 : 2.5,
|
||||
borderBottom: `1px solid ${DIVIDER_COLOR}`,
|
||||
flexShrink: 0,
|
||||
}}
|
||||
>
|
||||
{collapsed ? (
|
||||
<Typography
|
||||
variant="subtitle1"
|
||||
sx={{ color: TEXT_WHITE, fontWeight: 700, letterSpacing: 0.5 }}
|
||||
>
|
||||
PM
|
||||
</Typography>
|
||||
) : (
|
||||
<Box>
|
||||
<Typography
|
||||
variant="subtitle1"
|
||||
sx={{ color: TEXT_WHITE, fontWeight: 700, lineHeight: 1.2 }}
|
||||
>
|
||||
Property
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="caption"
|
||||
sx={{
|
||||
color: '#64b5f6',
|
||||
fontWeight: 600,
|
||||
textTransform: 'uppercase',
|
||||
letterSpacing: 1,
|
||||
fontSize: '0.6rem',
|
||||
}}
|
||||
>
|
||||
Match
|
||||
</Typography>
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
{/* Workspace tabs */}
|
||||
<Box
|
||||
sx={{
|
||||
borderBottom: `1px solid ${DIVIDER_COLOR}`,
|
||||
py: 0.5,
|
||||
px: 0.5,
|
||||
flexShrink: 0,
|
||||
}}
|
||||
>
|
||||
{visibleWorkspaces.map((ws) => {
|
||||
const wsConfig = WORKSPACE_CONFIG[ws]
|
||||
const Icon = wsConfig.icon
|
||||
const isActive = ws === activeWorkspace
|
||||
|
||||
const tabContent = (
|
||||
<Box
|
||||
onClick={() => onWorkspaceClick(ws)}
|
||||
sx={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: 1.25,
|
||||
px: collapsed ? 0 : 1.5,
|
||||
py: 0.75,
|
||||
borderRadius: 1,
|
||||
cursor: 'pointer',
|
||||
justifyContent: collapsed ? 'center' : 'flex-start',
|
||||
backgroundColor: isActive ? ACTIVE_BG : 'transparent',
|
||||
'&:hover': {
|
||||
backgroundColor: isActive ? ACTIVE_BG : NAV_HOVER_BG,
|
||||
},
|
||||
transition: 'background-color 0.15s ease',
|
||||
}}
|
||||
>
|
||||
<Icon size={16} color={isActive ? TEXT_WHITE : TEXT_MUTED} />
|
||||
{!collapsed && (
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{
|
||||
color: isActive ? TEXT_WHITE : TEXT_MUTED,
|
||||
fontWeight: isActive ? 600 : 400,
|
||||
fontSize: '0.8125rem',
|
||||
whiteSpace: 'nowrap',
|
||||
}}
|
||||
>
|
||||
{wsConfig.label}
|
||||
</Typography>
|
||||
)}
|
||||
</Box>
|
||||
)
|
||||
|
||||
return collapsed ? (
|
||||
<Tooltip key={ws} title={wsConfig.label} placement="right">
|
||||
{tabContent}
|
||||
</Tooltip>
|
||||
) : (
|
||||
<Box key={ws}>{tabContent}</Box>
|
||||
)
|
||||
})}
|
||||
</Box>
|
||||
|
||||
{/* Nav items */}
|
||||
<Box sx={{ flex: 1, overflowY: 'auto', py: 0.5 }}>
|
||||
{config.navItems.map((item) => {
|
||||
const Icon = item.icon
|
||||
|
||||
const navContent = (
|
||||
<NavLink
|
||||
to={item.path}
|
||||
style={{ textDecoration: 'none', display: 'block' }}
|
||||
>
|
||||
{({ isActive }) => (
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: 1.25,
|
||||
px: collapsed ? 0 : 1.5,
|
||||
py: 0.75,
|
||||
mx: 0.5,
|
||||
borderRadius: 1,
|
||||
justifyContent: collapsed ? 'center' : 'flex-start',
|
||||
backgroundColor: isActive ? NAV_ACTIVE_BG : 'transparent',
|
||||
'&:hover': {
|
||||
backgroundColor: isActive ? NAV_ACTIVE_BG : NAV_HOVER_BG,
|
||||
},
|
||||
transition: 'background-color 0.15s ease',
|
||||
cursor: 'pointer',
|
||||
}}
|
||||
>
|
||||
<Icon size={16} color={isActive ? TEXT_WHITE : TEXT_MUTED} />
|
||||
{!collapsed && (
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{
|
||||
color: isActive ? TEXT_WHITE : TEXT_MUTED,
|
||||
fontWeight: isActive ? 500 : 400,
|
||||
fontSize: '0.8125rem',
|
||||
whiteSpace: 'nowrap',
|
||||
}}
|
||||
>
|
||||
{item.label}
|
||||
</Typography>
|
||||
)}
|
||||
</Box>
|
||||
)}
|
||||
</NavLink>
|
||||
)
|
||||
|
||||
return collapsed ? (
|
||||
<Tooltip key={item.path} title={item.label} placement="right">
|
||||
<Box>{navContent}</Box>
|
||||
</Tooltip>
|
||||
) : (
|
||||
<Box key={item.path}>{navContent}</Box>
|
||||
)
|
||||
})}
|
||||
</Box>
|
||||
|
||||
{/* Bottom section */}
|
||||
<Box
|
||||
sx={{
|
||||
borderTop: `1px solid ${DIVIDER_COLOR}`,
|
||||
px: collapsed ? 0 : 1.5,
|
||||
py: 1,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: 1,
|
||||
justifyContent: collapsed ? 'center' : 'space-between',
|
||||
flexShrink: 0,
|
||||
}}
|
||||
>
|
||||
{!collapsed && (
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1, minWidth: 0 }}>
|
||||
<Avatar
|
||||
sx={{
|
||||
width: 32,
|
||||
height: 32,
|
||||
fontSize: '0.75rem',
|
||||
bgcolor: '#1e3a5f',
|
||||
flexShrink: 0,
|
||||
}}
|
||||
>
|
||||
{getUserInitials(userName)}
|
||||
</Avatar>
|
||||
<Box sx={{ minWidth: 0 }}>
|
||||
<Typography
|
||||
variant="body2"
|
||||
sx={{
|
||||
color: TEXT_WHITE,
|
||||
fontWeight: 500,
|
||||
fontSize: '0.8125rem',
|
||||
whiteSpace: 'nowrap',
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
}}
|
||||
>
|
||||
{userName}
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="caption"
|
||||
sx={{
|
||||
color: '#64748b',
|
||||
fontSize: '0.7rem',
|
||||
whiteSpace: 'nowrap',
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
display: 'block',
|
||||
}}
|
||||
>
|
||||
{orgName}
|
||||
</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
<IconButton
|
||||
onClick={onToggle}
|
||||
size="small"
|
||||
sx={{ color: '#64748b', flexShrink: 0 }}
|
||||
>
|
||||
{collapsed ? <ChevronRight size={16} /> : <ChevronLeft size={16} />}
|
||||
</IconButton>
|
||||
</Box>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
|
||||
interface TopBarProps {
|
||||
activeWorkspace: WorkspaceType
|
||||
pathname: string
|
||||
}
|
||||
|
||||
function TopBar({ activeWorkspace, pathname }: TopBarProps) {
|
||||
const config = WORKSPACE_CONFIG[activeWorkspace]
|
||||
const pageName = getPageNameFromPath(pathname)
|
||||
const openAssistant = useAssistantStore(s => s.open)
|
||||
|
||||
return (
|
||||
<Box
|
||||
component="header"
|
||||
sx={{
|
||||
height: 56,
|
||||
flexShrink: 0,
|
||||
backgroundColor: '#ffffff',
|
||||
borderBottom: '1px solid #e2e8f0',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
px: 3,
|
||||
}}
|
||||
>
|
||||
{/* Left side */}
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5 }}>
|
||||
<Chip
|
||||
label={config.label}
|
||||
size="small"
|
||||
sx={{
|
||||
backgroundColor: config.chipColor,
|
||||
color: '#ffffff',
|
||||
fontWeight: 600,
|
||||
fontSize: '0.7rem',
|
||||
height: 22,
|
||||
}}
|
||||
/>
|
||||
<Typography
|
||||
variant="body1"
|
||||
sx={{ fontWeight: 500, color: '#1e293b', fontSize: '0.9375rem' }}
|
||||
>
|
||||
{pageName}
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
{/* Right side */}
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
||||
<OrganizationContextBadge />
|
||||
<Button
|
||||
variant="outlined"
|
||||
size="small"
|
||||
startIcon={<Sparkles size={14} />}
|
||||
onClick={openAssistant}
|
||||
sx={{ textTransform: 'none', fontSize: '0.8125rem' }}
|
||||
>
|
||||
AI Assistent
|
||||
</Button>
|
||||
<NotificationButton />
|
||||
<UserMenu />
|
||||
</Box>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// AppShell
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
export function AppShell() {
|
||||
const { activeWorkspace, sidebarCollapsed, setActiveWorkspace, toggleSidebar } =
|
||||
useLayoutStore()
|
||||
const { currentUser } = useSessionStore()
|
||||
const navigate = useNavigate()
|
||||
const location = useLocation()
|
||||
|
||||
// Sync active workspace with URL
|
||||
useEffect(() => {
|
||||
const detected = getWorkspaceFromPath(location.pathname)
|
||||
if (detected && detected !== activeWorkspace) {
|
||||
setActiveWorkspace(detected)
|
||||
}
|
||||
}, [location.pathname, activeWorkspace, setActiveWorkspace])
|
||||
|
||||
const handleWorkspaceClick = (workspace: WorkspaceType) => {
|
||||
setActiveWorkspace(workspace)
|
||||
navigate(WORKSPACE_CONFIG[workspace].firstPath)
|
||||
}
|
||||
|
||||
const userName = currentUser?.name ?? 'User'
|
||||
const orgName = currentUser?.organizationName ?? ''
|
||||
const allowedWorkspaces = currentUser?.allowedWorkspaces ?? WORKSPACE_ORDER
|
||||
|
||||
return (
|
||||
<Box sx={{ display: 'flex', height: '100vh', overflow: 'hidden' }}>
|
||||
<Sidebar
|
||||
collapsed={sidebarCollapsed}
|
||||
activeWorkspace={activeWorkspace}
|
||||
allowedWorkspaces={allowedWorkspaces}
|
||||
onWorkspaceClick={handleWorkspaceClick}
|
||||
onToggle={toggleSidebar}
|
||||
userName={userName}
|
||||
orgName={orgName}
|
||||
/>
|
||||
|
||||
<Box sx={{ flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
|
||||
<TopBar activeWorkspace={activeWorkspace} pathname={location.pathname} />
|
||||
|
||||
<Box component="main" sx={{ flex: 1, overflowY: 'auto' }}>
|
||||
<Outlet />
|
||||
</Box>
|
||||
|
||||
<RightContextPanel />
|
||||
</Box>
|
||||
|
||||
<CompareTray />
|
||||
<GlobalAIAssistantDrawer />
|
||||
<GlobalAIAssistantButton />
|
||||
<ToastProvider />
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,108 @@
|
||||
import { useEffect } from 'react'
|
||||
import { useNavigate, useLocation } from 'react-router'
|
||||
import { Box, Button, IconButton, Typography } from '@mui/material'
|
||||
import { X } from 'lucide-react'
|
||||
import { useCompareStore } from '../../stores/compareStore'
|
||||
import { useLayoutStore } from '../../stores/layoutStore'
|
||||
|
||||
const TYPE_DOT: Record<string, string> = {
|
||||
VERIFIED_PORTFOLIO: '#1e3a5f',
|
||||
EXTERNAL_MARKET: '#d97706',
|
||||
FUTURE_AVAILABILITY: '#7c3aed',
|
||||
}
|
||||
|
||||
export function CompareTray() {
|
||||
const { compareItems, removeFromCompare, clearCompare } = useCompareStore()
|
||||
const { setCompareTrayVisible } = useLayoutStore()
|
||||
const navigate = useNavigate()
|
||||
const location = useLocation()
|
||||
const isDemand = location.pathname.startsWith('/demand')
|
||||
|
||||
useEffect(() => {
|
||||
setCompareTrayVisible(compareItems.length > 0 && isDemand)
|
||||
}, [compareItems.length, setCompareTrayVisible, isDemand])
|
||||
|
||||
if (!isDemand) return null
|
||||
|
||||
const getTitle = (item: (typeof compareItems)[number]) => {
|
||||
if (item.resultType === 'FUTURE_AVAILABILITY') {
|
||||
return (item as any).signal?.companyName ?? (item as any).signal?.locationHint ?? 'Signal'
|
||||
}
|
||||
return (item as any).property?.title ?? `Score ${item.matchScore}`
|
||||
}
|
||||
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
position: 'fixed',
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
zIndex: 1300,
|
||||
height: 56,
|
||||
bgcolor: '#0f1923',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
px: 3,
|
||||
gap: 2,
|
||||
transform: compareItems.length > 0 ? 'translateY(0)' : 'translateY(100%)',
|
||||
transition: 'transform 0.25s ease',
|
||||
}}
|
||||
>
|
||||
<Typography variant="caption" sx={{ color: '#fff', flexShrink: 0 }}>
|
||||
Vergleich ({compareItems.length}/4)
|
||||
</Typography>
|
||||
|
||||
<Box sx={{ flex: 1, display: 'flex', gap: 1, overflow: 'hidden' }}>
|
||||
{compareItems.map((item) => (
|
||||
<Box
|
||||
key={item.matchId}
|
||||
sx={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: 0.75,
|
||||
bgcolor: 'rgba(255,255,255,0.1)',
|
||||
borderRadius: 1,
|
||||
px: 1,
|
||||
py: 0.25,
|
||||
flexShrink: 0,
|
||||
}}
|
||||
>
|
||||
<Box sx={{ width: 6, height: 6, borderRadius: '50%', bgcolor: TYPE_DOT[item.resultType] ?? '#64748b', flexShrink: 0 }} />
|
||||
<Typography variant="caption" sx={{ color: '#fff', maxWidth: 110, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
|
||||
{getTitle(item)}
|
||||
</Typography>
|
||||
<Typography variant="caption" sx={{ color: 'rgba(255,255,255,0.5)', flexShrink: 0 }}>
|
||||
{item.matchScore}
|
||||
</Typography>
|
||||
<IconButton
|
||||
size="small"
|
||||
onClick={() => removeFromCompare(item.matchId)}
|
||||
sx={{ p: 0.25, color: 'rgba(255,255,255,0.5)', '&:hover': { color: '#fff' } }}
|
||||
>
|
||||
<X size={12} />
|
||||
</IconButton>
|
||||
</Box>
|
||||
))}
|
||||
</Box>
|
||||
|
||||
<Button
|
||||
variant="text"
|
||||
size="small"
|
||||
onClick={clearCompare}
|
||||
sx={{ color: 'rgba(255,255,255,0.5)', textTransform: 'none', flexShrink: 0 }}
|
||||
>
|
||||
Alle entfernen
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant="contained"
|
||||
size="small"
|
||||
onClick={() => navigate('/demand/compare')}
|
||||
sx={{ bgcolor: '#1e3a5f', textTransform: 'none', flexShrink: 0, '&:hover': { bgcolor: '#162d4a' } }}
|
||||
>
|
||||
Vergleich starten
|
||||
</Button>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,39 @@
|
||||
import { useState } from 'react'
|
||||
import { Badge, IconButton, Popover, Typography } from '@mui/material'
|
||||
import { Bell } from 'lucide-react'
|
||||
|
||||
export function NotificationButton() {
|
||||
const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null)
|
||||
|
||||
function handleOpen(e: React.MouseEvent<HTMLElement>) {
|
||||
setAnchorEl(e.currentTarget)
|
||||
}
|
||||
|
||||
function handleClose() {
|
||||
setAnchorEl(null)
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<IconButton size="small" sx={{ color: '#64748b' }} onClick={handleOpen}>
|
||||
<Badge badgeContent={0} color="error">
|
||||
<Bell size={20} />
|
||||
</Badge>
|
||||
</IconButton>
|
||||
|
||||
<Popover
|
||||
open={!!anchorEl}
|
||||
anchorEl={anchorEl}
|
||||
onClose={handleClose}
|
||||
anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
|
||||
transformOrigin={{ vertical: 'top', horizontal: 'right' }}
|
||||
slotProps={{ paper: { sx: { width: 280, p: 2 } } }}
|
||||
>
|
||||
<Typography variant="subtitle2" sx={{ mb: 1 }}>Benachrichtigungen</Typography>
|
||||
<Typography variant="caption" sx={{ color: 'text.secondary' }}>
|
||||
Keine neuen Benachrichtigungen
|
||||
</Typography>
|
||||
</Popover>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
import { Chip } from '@mui/material'
|
||||
import { Building2 } from 'lucide-react'
|
||||
import { useSessionStore } from '../../stores/sessionStore'
|
||||
|
||||
export function OrganizationContextBadge() {
|
||||
const { currentUser } = useSessionStore()
|
||||
|
||||
if (!currentUser?.organizationName) return null
|
||||
|
||||
return (
|
||||
<Chip
|
||||
size="small"
|
||||
variant="outlined"
|
||||
icon={<Building2 size={12} color="#64748b" />}
|
||||
label={currentUser.organizationName}
|
||||
sx={{ fontSize: '0.7rem', height: 22, color: '#64748b', borderColor: '#e2e8f0' }}
|
||||
/>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,76 @@
|
||||
import { Box, Breadcrumbs, Typography } from '@mui/material'
|
||||
import type { SxProps, Theme } from '@mui/material'
|
||||
import type { ReactNode } from 'react'
|
||||
import { NavLink } from 'react-router'
|
||||
|
||||
interface BreadcrumbItem {
|
||||
label: string
|
||||
href?: string
|
||||
}
|
||||
|
||||
interface PageHeaderProps {
|
||||
title: string
|
||||
subtitle?: string
|
||||
breadcrumbs?: BreadcrumbItem[]
|
||||
primaryAction?: ReactNode
|
||||
secondaryActions?: ReactNode
|
||||
badge?: ReactNode
|
||||
sx?: SxProps<Theme>
|
||||
}
|
||||
|
||||
export function PageHeader({
|
||||
title,
|
||||
subtitle,
|
||||
breadcrumbs,
|
||||
primaryAction,
|
||||
secondaryActions,
|
||||
badge,
|
||||
sx,
|
||||
}: PageHeaderProps) {
|
||||
return (
|
||||
<Box sx={{ px: 3, py: 2.5, borderBottom: '1px solid #e2e8f0', ...sx }}>
|
||||
{breadcrumbs && breadcrumbs.length > 0 && (
|
||||
<Breadcrumbs separator="/" sx={{ mb: 1 }}>
|
||||
{breadcrumbs.map((crumb) =>
|
||||
crumb.href ? (
|
||||
<NavLink
|
||||
key={crumb.label}
|
||||
to={crumb.href}
|
||||
style={{ textDecoration: 'none', color: '#64748b', fontSize: '0.75rem' }}
|
||||
>
|
||||
{crumb.label}
|
||||
</NavLink>
|
||||
) : (
|
||||
<Typography key={crumb.label} sx={{ fontSize: '0.75rem', color: 'text.secondary' }}>
|
||||
{crumb.label}
|
||||
</Typography>
|
||||
),
|
||||
)}
|
||||
</Breadcrumbs>
|
||||
)}
|
||||
|
||||
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
|
||||
<Box>
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
||||
<Typography variant="h6" sx={{ fontWeight: 600, lineHeight: 1.3 }}>
|
||||
{title}
|
||||
</Typography>
|
||||
{badge}
|
||||
</Box>
|
||||
{subtitle && (
|
||||
<Typography variant="body2" sx={{ color: 'text.secondary', mt: 0.25 }}>
|
||||
{subtitle}
|
||||
</Typography>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
{(primaryAction ?? secondaryActions) && (
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1, flexShrink: 0, ml: 2 }}>
|
||||
{secondaryActions}
|
||||
{primaryAction}
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,70 @@
|
||||
import { Box, Divider, IconButton, Typography } from '@mui/material'
|
||||
import { X } from 'lucide-react'
|
||||
import { useLayoutStore } from '../../stores/layoutStore'
|
||||
import type { RightPanelContentType } from '../../stores/layoutStore'
|
||||
|
||||
const PANEL_TITLES: Record<RightPanelContentType, string> = {
|
||||
ai_context: 'KI Kontext',
|
||||
detail_preview: 'Detail Vorschau',
|
||||
compare_preview: 'Vergleich Vorschau',
|
||||
activity_feed: 'Aktivitäts-Feed',
|
||||
}
|
||||
|
||||
const PANEL_PLACEHOLDERS: Record<RightPanelContentType, string> = {
|
||||
ai_context: 'KI-Kontext wird geladen...',
|
||||
detail_preview: 'Kein Objekt ausgewählt.',
|
||||
compare_preview: 'Vergleichsvorschau nicht verfügbar.',
|
||||
activity_feed: 'Keine Aktivitäten vorhanden.',
|
||||
}
|
||||
|
||||
export function RightContextPanel() {
|
||||
const { isRightPanelOpen, rightPanelContentType, closeRightPanel } = useLayoutStore()
|
||||
|
||||
const title = rightPanelContentType ? PANEL_TITLES[rightPanelContentType] : ''
|
||||
const placeholder = rightPanelContentType ? PANEL_PLACEHOLDERS[rightPanelContentType] : ''
|
||||
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
position: 'fixed',
|
||||
right: 0,
|
||||
top: 56,
|
||||
height: 'calc(100vh - 56px)',
|
||||
width: 320,
|
||||
transform: isRightPanelOpen ? 'translateX(0)' : 'translateX(320px)',
|
||||
transition: 'transform 0.25s ease',
|
||||
bgcolor: '#fff',
|
||||
borderLeft: '1px solid #e2e8f0',
|
||||
boxShadow: '-4px 0 16px rgba(0,0,0,0.08)',
|
||||
zIndex: 1200,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
overflow: 'hidden',
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
height: 48,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
px: 2,
|
||||
flexShrink: 0,
|
||||
}}
|
||||
>
|
||||
<Typography variant="subtitle2" sx={{ fontWeight: 600 }}>{title}</Typography>
|
||||
<IconButton size="small" onClick={closeRightPanel} sx={{ color: '#64748b' }}>
|
||||
<X size={16} />
|
||||
</IconButton>
|
||||
</Box>
|
||||
|
||||
<Divider />
|
||||
|
||||
<Box sx={{ flex: 1, overflowY: 'auto', p: 2 }}>
|
||||
<Typography variant="body2" sx={{ color: 'text.secondary' }}>
|
||||
{placeholder}
|
||||
</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,105 @@
|
||||
import { useState } from 'react'
|
||||
import { useNavigate } from 'react-router'
|
||||
import { Avatar, Box, Divider, IconButton, ListItemIcon, Menu, MenuItem, Typography } from '@mui/material'
|
||||
import { LogOut, Settings, User } from 'lucide-react'
|
||||
import { useSessionStore } from '../../stores/sessionStore'
|
||||
import { useToastStore } from '../../stores/toastStore'
|
||||
import { DemoRoleSwitcher } from '../auth/DemoRoleSwitcher'
|
||||
|
||||
const ROLE_LABELS: Record<string, string> = {
|
||||
SUPER_ADMIN: 'Super Admin',
|
||||
ORGANIZATION_ADMIN: 'Org Admin',
|
||||
PROPERTY_MANAGER: 'Property Manager',
|
||||
REVIEWER: 'Reviewer',
|
||||
OWNER_VIEWER: 'Owner Viewer',
|
||||
DEMAND_USER: 'Demand User',
|
||||
}
|
||||
|
||||
function getUserInitials(name: string): string {
|
||||
return name
|
||||
.split(' ')
|
||||
.map((n) => n[0])
|
||||
.join('')
|
||||
.toUpperCase()
|
||||
.slice(0, 2)
|
||||
}
|
||||
|
||||
export function UserMenu() {
|
||||
const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null)
|
||||
const { currentUser, logout } = useSessionStore()
|
||||
const navigate = useNavigate()
|
||||
const showToast = useToastStore((s) => s.showToast)
|
||||
|
||||
function handleOpen(e: React.MouseEvent<HTMLElement>) {
|
||||
setAnchorEl(e.currentTarget)
|
||||
}
|
||||
|
||||
function handleClose() {
|
||||
setAnchorEl(null)
|
||||
}
|
||||
|
||||
function handleLogout() {
|
||||
handleClose()
|
||||
logout()
|
||||
navigate('/auth/login')
|
||||
}
|
||||
|
||||
const initials = getUserInitials(currentUser?.name ?? 'U')
|
||||
|
||||
return (
|
||||
<>
|
||||
<IconButton onClick={handleOpen} size="small" sx={{ p: 0 }}>
|
||||
<Avatar sx={{ width: 32, height: 32, fontSize: '0.75rem', bgcolor: '#1e3a5f' }}>
|
||||
{initials}
|
||||
</Avatar>
|
||||
</IconButton>
|
||||
|
||||
<Menu
|
||||
anchorEl={anchorEl}
|
||||
open={!!anchorEl}
|
||||
onClose={handleClose}
|
||||
slotProps={{ paper: { sx: { width: 300, mt: 1 } } }}
|
||||
transformOrigin={{ horizontal: 'right', vertical: 'top' }}
|
||||
anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
|
||||
>
|
||||
{/* User info header */}
|
||||
{currentUser && (
|
||||
<Box sx={{ px: 2, py: 1.5 }}>
|
||||
<Typography variant="body2" sx={{ fontWeight: 600 }}>{currentUser.name}</Typography>
|
||||
<Typography variant="caption" sx={{ color: 'text.secondary', display: 'block' }}>
|
||||
{ROLE_LABELS[currentUser.role] ?? currentUser.role}
|
||||
</Typography>
|
||||
<Typography variant="caption" sx={{ color: 'text.secondary', display: 'block' }}>
|
||||
{currentUser.organizationName}
|
||||
</Typography>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
<Divider />
|
||||
|
||||
<MenuItem onClick={() => { handleClose(); showToast('Profilseite ist in Kürze verfügbar.', 'info') }}>
|
||||
<ListItemIcon><User size={16} /></ListItemIcon>
|
||||
Profil
|
||||
</MenuItem>
|
||||
<MenuItem onClick={() => { handleClose(); showToast('Einstellungen sind in Kürze verfügbar.', 'info') }}>
|
||||
<ListItemIcon><Settings size={16} /></ListItemIcon>
|
||||
Einstellungen
|
||||
</MenuItem>
|
||||
|
||||
<Divider />
|
||||
|
||||
{/* Demo role switcher */}
|
||||
<Box sx={{ px: 1, py: 1 }}>
|
||||
<DemoRoleSwitcher />
|
||||
</Box>
|
||||
|
||||
<Divider />
|
||||
|
||||
<MenuItem onClick={handleLogout}>
|
||||
<ListItemIcon><LogOut size={16} /></ListItemIcon>
|
||||
Abmelden
|
||||
</MenuItem>
|
||||
</Menu>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
export { AppShell } from './AppShell'
|
||||
export { PageHeader } from './PageHeader'
|
||||
export { RightContextPanel } from './RightContextPanel'
|
||||
export { CompareTray } from './CompareTray'
|
||||
export { UserMenu } from './UserMenu'
|
||||
export { NotificationButton } from './NotificationButton'
|
||||
export { OrganizationContextBadge } from './OrganizationContextBadge'
|
||||
Reference in New Issue
Block a user