Initial commit with Email Import Wizard and Task Processor updates
This commit is contained in:
@@ -0,0 +1,240 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { Outlet, useNavigate, useLocation } from 'react-router-dom';
|
||||
import { Layout, Menu, Avatar, Dropdown, theme, Typography, Tooltip, Badge } from 'antd';
|
||||
import {
|
||||
InboxOutlined,
|
||||
FileTextOutlined,
|
||||
MailOutlined,
|
||||
SettingOutlined,
|
||||
LogoutOutlined,
|
||||
UserOutlined,
|
||||
EditOutlined,
|
||||
SunOutlined,
|
||||
MoonOutlined,
|
||||
AppstoreOutlined,
|
||||
} from '@ant-design/icons';
|
||||
import { useAuth } from '../auth/AuthContext';
|
||||
import { useTheme } from '../theme/ThemeContext';
|
||||
import { Permission } from '../auth/permissions';
|
||||
import { statsApi, type StatsCounts } from '../api/stats';
|
||||
|
||||
const { Sider, Content } = Layout;
|
||||
const { Text } = Typography;
|
||||
|
||||
type MenuItemDef = {
|
||||
key: string;
|
||||
icon: React.ReactNode;
|
||||
label: string;
|
||||
permission?: Permission;
|
||||
countKey?: keyof StatsCounts;
|
||||
};
|
||||
|
||||
const allMenuItems: MenuItemDef[] = [
|
||||
{ key: '/dashboard', icon: <AppstoreOutlined />, label: 'Dashboard' },
|
||||
{ key: '/inbox', icon: <InboxOutlined />, label: 'Eingangsbox', permission: Permission.VIEW_SCANNER, countKey: 'inbox' },
|
||||
{ key: '/posteingang', icon: <FileTextOutlined />, label: 'Posteingang', permission: Permission.VIEW_INBOX, countKey: 'posteingang' },
|
||||
{ key: '/manuell', icon: <EditOutlined />, label: 'Manuell bearbeiten', permission: Permission.PROCESS_MANUALLY, countKey: 'manuell' },
|
||||
{ key: '/mailpostfach', icon: <MailOutlined />, label: 'Mailpostfach', permission: Permission.VIEW_MAIL, countKey: 'mailpostfach' },
|
||||
{ key: '/settings', icon: <SettingOutlined />, label: 'Einstellungen', permission: Permission.MANAGE_SETTINGS },
|
||||
];
|
||||
|
||||
export default function AppLayout() {
|
||||
const [collapsed, setCollapsed] = useState(false);
|
||||
const navigate = useNavigate();
|
||||
const location = useLocation();
|
||||
const { user, logout, hasPermission, isAuthenticated } = useAuth();
|
||||
const { token: themeToken } = theme.useToken();
|
||||
const { isDark, toggleTheme } = useTheme();
|
||||
|
||||
const [counts, setCounts] = useState<StatsCounts | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (!isAuthenticated) return;
|
||||
|
||||
const fetchCounts = async () => {
|
||||
try {
|
||||
const data = await statsApi.getCounts();
|
||||
setCounts(data);
|
||||
} catch (err) {
|
||||
console.error('Fehler beim Abrufen der Zählerstände:', err);
|
||||
}
|
||||
};
|
||||
|
||||
fetchCounts();
|
||||
const interval = setInterval(fetchCounts, 30000); // 30 Sekunden Polling
|
||||
|
||||
return () => clearInterval(interval);
|
||||
}, [isAuthenticated, location.pathname]); // Update after navigation or auth change
|
||||
|
||||
const menuItems = allMenuItems
|
||||
.filter((item) => !item.permission || hasPermission(item.permission))
|
||||
.map((item) => ({
|
||||
...item,
|
||||
label: (
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', width: '100%', paddingRight: 8 }}>
|
||||
<span>{item.label}</span>
|
||||
{item.countKey && counts && counts[item.countKey] > 0 && !collapsed && (
|
||||
<Badge
|
||||
count={counts[item.countKey]}
|
||||
overflowCount={99}
|
||||
size="small"
|
||||
color={isDark ? themeToken.colorPrimary : '#1677ff'}
|
||||
style={{ transform: 'translateY(-2px)' }}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
),
|
||||
}));
|
||||
|
||||
const selectedKey = menuItems
|
||||
.map((item) => item.key)
|
||||
.filter((key) => location.pathname === key || location.pathname.startsWith(key + '/'))
|
||||
.sort((a, b) => b.length - a.length)[0] || (menuItems[0]?.key ?? '/inbox');
|
||||
|
||||
const siderStyle = isDark
|
||||
? {}
|
||||
: {
|
||||
background: '#f0f2f7',
|
||||
borderRight: '1px solid #e2e4ea',
|
||||
};
|
||||
|
||||
const logoColor = isDark ? '#fff' : '#1a1a2e';
|
||||
const subtleColor = isDark ? '#ffffffa6' : '#4a4a6a';
|
||||
|
||||
return (
|
||||
<Layout style={{ minHeight: '100vh' }}>
|
||||
<Sider
|
||||
width={240}
|
||||
trigger={null}
|
||||
collapsible
|
||||
collapsed={collapsed}
|
||||
theme={isDark ? 'dark' : 'light'}
|
||||
style={{
|
||||
overflow: 'hidden',
|
||||
height: '100vh',
|
||||
position: 'fixed',
|
||||
left: 0,
|
||||
top: 0,
|
||||
bottom: 0,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
...siderStyle,
|
||||
}}
|
||||
>
|
||||
{/* Logo / Collapse-Toggle */}
|
||||
<div
|
||||
onClick={() => setCollapsed(!collapsed)}
|
||||
style={{
|
||||
height: 56,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
cursor: 'pointer',
|
||||
userSelect: 'none',
|
||||
borderBottom: `1px solid ${isDark ? 'rgba(255,255,255,0.08)' : '#e2e4ea'}`,
|
||||
transition: 'background 0.2s',
|
||||
}}
|
||||
onMouseEnter={(e) => (e.currentTarget.style.background = isDark ? 'rgba(255,255,255,0.04)' : 'rgba(0,0,0,0.02)')}
|
||||
onMouseLeave={(e) => (e.currentTarget.style.background = 'transparent')}
|
||||
>
|
||||
<Text strong style={{ color: logoColor, fontSize: collapsed ? 14 : 18, transition: 'font-size 0.2s' }}>
|
||||
{collapsed ? 'PM' : 'Paperless'}
|
||||
</Text>
|
||||
</div>
|
||||
|
||||
{/* Navigation Menu */}
|
||||
<Menu
|
||||
theme={isDark ? 'dark' : 'light'}
|
||||
mode="inline"
|
||||
selectedKeys={[selectedKey]}
|
||||
items={menuItems}
|
||||
onClick={({ key }) => navigate(key)}
|
||||
style={isDark ? { flex: 1 } : { background: 'transparent', flex: 1 }}
|
||||
/>
|
||||
|
||||
{/* Bottom Section: User + Theme Toggle */}
|
||||
<div
|
||||
style={{
|
||||
position: 'absolute',
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
borderTop: `1px solid ${isDark ? 'rgba(255,255,255,0.08)' : '#e2e4ea'}`,
|
||||
padding: collapsed ? '12px 0' : '12px 16px',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: 4,
|
||||
transition: 'padding 0.2s',
|
||||
}}
|
||||
>
|
||||
{/* Theme Toggle */}
|
||||
<Tooltip title={isDark ? 'Light Mode' : 'Dark Mode'} placement="right">
|
||||
<div
|
||||
onClick={toggleTheme}
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: 10,
|
||||
padding: collapsed ? '8px 0' : '8px 12px',
|
||||
borderRadius: 6,
|
||||
cursor: 'pointer',
|
||||
color: subtleColor,
|
||||
justifyContent: collapsed ? 'center' : 'flex-start',
|
||||
transition: 'all 0.2s',
|
||||
}}
|
||||
onMouseEnter={(e) => (e.currentTarget.style.background = isDark ? 'rgba(255,255,255,0.08)' : '#eef1f8')}
|
||||
onMouseLeave={(e) => (e.currentTarget.style.background = 'transparent')}
|
||||
>
|
||||
{isDark ? <SunOutlined style={{ fontSize: 16 }} /> : <MoonOutlined style={{ fontSize: 16 }} />}
|
||||
{!collapsed && <Text style={{ color: subtleColor, fontSize: 13 }}>{isDark ? 'Light Mode' : 'Dark Mode'}</Text>}
|
||||
</div>
|
||||
</Tooltip>
|
||||
|
||||
{/* User Menu */}
|
||||
<Dropdown
|
||||
menu={{
|
||||
items: [
|
||||
{
|
||||
key: 'logout',
|
||||
icon: <LogoutOutlined />,
|
||||
label: 'Abmelden',
|
||||
onClick: () => logout(),
|
||||
},
|
||||
],
|
||||
}}
|
||||
placement="topRight"
|
||||
trigger={['click']}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: 10,
|
||||
padding: collapsed ? '8px 0' : '8px 12px',
|
||||
borderRadius: 6,
|
||||
cursor: 'pointer',
|
||||
justifyContent: collapsed ? 'center' : 'flex-start',
|
||||
transition: 'all 0.2s',
|
||||
}}
|
||||
onMouseEnter={(e) => (e.currentTarget.style.background = isDark ? 'rgba(255,255,255,0.08)' : '#eef1f8')}
|
||||
onMouseLeave={(e) => (e.currentTarget.style.background = 'transparent')}
|
||||
>
|
||||
<Avatar size="small" icon={<UserOutlined />} />
|
||||
{!collapsed && (
|
||||
<Text ellipsis style={{ color: subtleColor, fontSize: 13, maxWidth: 120 }}>
|
||||
{user?.profile?.name || 'Benutzer'}
|
||||
</Text>
|
||||
)}
|
||||
</div>
|
||||
</Dropdown>
|
||||
</div>
|
||||
</Sider>
|
||||
|
||||
<Layout style={{ marginLeft: collapsed ? 80 : 240, transition: 'margin-left 0.2s' }}>
|
||||
<Content style={{ margin: 24, padding: 24, background: themeToken.colorBgContainer, borderRadius: 8 }}>
|
||||
<Outlet />
|
||||
</Content>
|
||||
</Layout>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user