79 lines
2.5 KiB
JavaScript
79 lines
2.5 KiB
JavaScript
import React from 'react';
|
|
import { Routes, Route } from 'react-router-dom';
|
|
import { Layout, Menu, Typography } from 'antd';
|
|
import { DashboardOutlined, SettingOutlined, BarChartOutlined } from '@ant-design/icons';
|
|
import Dashboard from './components/Dashboard';
|
|
import SystemMetrics from './components/SystemMetrics';
|
|
import Settings from './components/Settings';
|
|
import OfflineMode from './components/OfflineMode';
|
|
import ErrorBoundary from './components/common/ErrorBoundary';
|
|
import { useServiceStatus } from './hooks/useServiceStatus';
|
|
import './App.css';
|
|
|
|
const { Header, Sider, Content } = Layout;
|
|
const { Title } = Typography;
|
|
|
|
function App() {
|
|
const serviceStatus = useServiceStatus();
|
|
|
|
const handleRetry = () => {
|
|
window.location.reload();
|
|
};
|
|
|
|
return (
|
|
<ErrorBoundary>
|
|
<Layout style={{ minHeight: '100vh' }}>
|
|
<Sider width={250} theme="dark">
|
|
<div style={{ padding: '16px', textAlign: 'center' }}>
|
|
<Title level={3} style={{ color: 'white', margin: 0 }}>
|
|
LabFusion
|
|
</Title>
|
|
</div>
|
|
<Menu
|
|
theme="dark"
|
|
mode="inline"
|
|
defaultSelectedKeys={['dashboard']}
|
|
items={[
|
|
{
|
|
key: 'dashboard',
|
|
icon: <DashboardOutlined />,
|
|
label: 'Dashboard',
|
|
},
|
|
{
|
|
key: 'metrics',
|
|
icon: <BarChartOutlined />,
|
|
label: 'System Metrics',
|
|
},
|
|
{
|
|
key: 'settings',
|
|
icon: <SettingOutlined />,
|
|
label: 'Settings',
|
|
},
|
|
]}
|
|
/>
|
|
</Sider>
|
|
<Layout>
|
|
<Header style={{ background: '#fff', padding: '0 24px', boxShadow: '0 2px 8px rgba(0,0,0,0.1)' }}>
|
|
<Title level={4} style={{ margin: 0, lineHeight: '64px' }}>
|
|
Homelab Dashboard
|
|
</Title>
|
|
</Header>
|
|
<Content style={{ margin: '24px', background: '#fff', borderRadius: '8px' }}>
|
|
{serviceStatus.overall === 'offline' && (
|
|
<OfflineMode onRetry={handleRetry} />
|
|
)}
|
|
<Routes>
|
|
<Route path="/" element={<Dashboard />} />
|
|
<Route path="/dashboard" element={<Dashboard />} />
|
|
<Route path="/metrics" element={<SystemMetrics />} />
|
|
<Route path="/settings" element={<Settings />} />
|
|
</Routes>
|
|
</Content>
|
|
</Layout>
|
|
</Layout>
|
|
</ErrorBoundary>
|
|
);
|
|
}
|
|
|
|
export default App;
|