File size: 2,743 Bytes
619120c | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 | import React, { useMemo } from 'react';
import Sidebar from './components/Layout/Sidebar';
import Header from './components/Layout/Header';
import StatsCard from './components/Dashboard/StatsCard';
import UserTable from './components/Dashboard/UserTable';
import NetworkMap from './components/Dashboard/NetworkMap';
import { mockUsers } from './data/mockUsers';
import { Users, Globe2, Activity, RadioReceiver } from 'lucide-react';
function App() {
const stats = useMemo(() => {
return {
total: mockUsers.length,
online: mockUsers.filter(u => u.status === 'Online').length,
roaming: mockUsers.filter(u => u.isRoaming).length,
avgSignal: (mockUsers.reduce((acc, u) => acc + u.signalStrength, 0) / mockUsers.length).toFixed(1)
};
}, []);
return (
<div style={{ display: 'flex', width: '100%', height: '100vh', background: 'var(--bg-app)', color: 'var(--text-main)' }}>
<Sidebar />
<div style={{ flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden', position: 'relative' }}>
{/* Background Grid/Effect */}
<div style={{
position: 'absolute', inset: 0,
backgroundImage: 'linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px)',
backgroundSize: '40px 40px',
pointerEvents: 'none'
}} />
<Header />
<main style={{ flex: 1, padding: 'var(--space-md)', overflowY: 'auto', zIndex: 1 }}>
<div style={{ marginBottom: 'var(--space-xl)' }}>
<h1 className="text-glow" style={{ fontSize: '1.5rem', marginBottom: 'var(--space-xs)' }}>Network Overview</h1>
<p style={{ color: 'var(--text-muted)' }}>Real-time monitoring of GlobeSIM subscriber activities.</p>
</div>
{/* KPI Cards */}
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 'var(--space-md)', marginBottom: 'var(--space-xl)' }}>
<StatsCard title="Total Subscribers" value={stats.total} icon={Users} trend={2.5} />
<StatsCard title="Active Connections" value={stats.online} icon={Activity} trend={5.2} />
<StatsCard title="Roaming Users" value={stats.roaming} icon={Globe2} trend={-1.1} />
<StatsCard title="Avg Signal Strength" value={`${stats.avgSignal}/5`} icon={RadioReceiver} />
</div>
<div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr', gap: 'var(--space-md)', marginBottom: 'var(--space-xl)', height: '500px' }}>
<UserTable users={mockUsers} />
<NetworkMap users={mockUsers} />
</div>
</main>
</div>
</div>
);
}
export default App;
|