Skip to content

feat(dashboard): add stats panel and refresh layout #94

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
thomascolden585-svg wants to merge 1 commit into
base: test
Choose a base branch
from
+139 −62
Open

feat(dashboard): add stats panel and refresh layout #94

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
201 changes: 139 additions & 62 deletions src/pages/DashboardPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,60 @@
import React from 'react';
import { Grid, Stack, Typography } from '@mui/material';
import {
Box,
Divider,
Grid,
Stack,
Typography,
keyframes,
useTheme,
} from '@mui/material';
import {
BlockIndicator,
EventFeed,
MinerRatesTable,
OrderbookDepth,
ReservationsTracker,
StatsPanel,
SwapTracker,
Page,
SEO,
} from '../components';
import { FONTS } from '../theme';

const livePulse = keyframes`
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.45; transform: scale(0.85); }
`;

const DashboardPage: React.FC = () => {
const theme = useTheme();
const isDark = theme.palette.mode === 'dark';

// Mode-aware accents: dark mode uses calmer indigo + emerald with a soft glow;
// light mode keeps the existing royal-blue / neon-green palette.
const accentColor = isDark ? '#5b8def' : theme.palette.primary.main;
const liveDotColor = isDark ? '#10b981' : '#22c55e';
const liveDotGlow = isDark ? `0 0 8px ${liveDotColor}99` : 'none';
const panelBg = isDark ? 'surface.elevated' : 'surface.light';

const panelSx = {
p: { xs: 1.5, sm: 2, md: 2.5 },
borderRadius: 0,
backgroundColor: panelBg,
border: '1px solid',
borderColor: 'divider',
position: 'relative' as const,
'&::before': {
content: '""',
position: 'absolute' as const,
top: 0,
left: 0,
height: 2,
width: 32,
backgroundColor: accentColor,
},
};

return (
<Page>
<SEO
Expand All @@ -29,93 +71,128 @@ const DashboardPage: React.FC = () => {
mx: 'auto',
}}
>
{/* ── Hero ─────────────────────────────────────────────── */}
<Stack
direction="row"
alignItems="center"
direction={{ xs: 'column', sm: 'row' }}
alignItems={{ xs: 'flex-start', sm: 'flex-end' }}
justifyContent="space-between"
sx={{ mb: 2, gap: 2 }}
sx={{ gap: { xs: 1.5, sm: 2 }, mb: { xs: 2, md: 3 } }}
>
<Typography
<Stack spacing={1}>
<Typography
variant="eyebrow"
sx={{
fontFamily: FONTS.mono,
fontSize: '0.7rem',
letterSpacing: '0.2em',
textTransform: 'uppercase',
color: accentColor,
}}
>
Network Activity / SN7
</Typography>
<Typography
component="h1"
sx={{
fontFamily: FONTS.heading,
fontWeight: 700,
letterSpacing: '-0.03em',
lineHeight: 1,
fontSize: { xs: '2rem', sm: '2.5rem', md: '3rem' },
color: 'text.primary',
}}
>
Dashboard
</Typography>
<Typography
sx={{
fontFamily: FONTS.body,
fontSize: { xs: '0.85rem', sm: '0.9rem' },
color: 'text.secondary',
maxWidth: 560,
}}
>
Real-time view of miner rates, orderbook depth, active
reservations, and on-chain swap activity across the Allways
network.
</Typography>
</Stack>

<Stack
direction="row"
alignItems="center"
spacing={1.5}
sx={{
fontFamily: FONTS.mono,
fontSize: '0.7rem',
letterSpacing: '0.12em',
textTransform: 'uppercase',
color: 'text.secondary',
border: '1px solid',
borderColor: 'divider',
backgroundColor: panelBg,
px: 1.5,
py: 0.75,
}}
>
Network Activity
</Typography>
<BlockIndicator />
<Stack direction="row" alignItems="center" spacing={0.75}>
<Box
sx={{
width: 7,
height: 7,
borderRadius: '50%',
backgroundColor: liveDotColor,
boxShadow: liveDotGlow,
animation: `${livePulse} 1.6s ease-in-out infinite`,
}}
/>
<Typography
sx={{
fontFamily: FONTS.mono,
fontSize: '0.65rem',
letterSpacing: '0.18em',
textTransform: 'uppercase',
color: 'text.secondary',
}}
>
Live
</Typography>
</Stack>
<Divider
orientation="vertical"
flexItem
sx={{ borderColor: 'divider' }}
/>
<BlockIndicator />
</Stack>
</Stack>

<Divider sx={{ mb: { xs: 2, md: 3 }, borderColor: 'divider' }} />

{/* ── KPI strip ────────────────────────────────────────── */}
<Box sx={{ mb: { xs: 2, sm: 2.5, md: 3 } }}>
<StatsPanel />
</Box>

{/* ── Main grid ───────────────────────────────────────── */}
<Grid container spacing={{ xs: 2, sm: 2.5, md: 3 }}>
<Grid item xs={12} sm={6}>
<Stack
sx={{
p: { xs: 1.5, sm: 2, md: 2.5 },
height: { xs: 'auto', md: 520 },
borderRadius: 0,
backgroundColor: 'surface.light',
border: '1px solid',
borderColor: 'divider',
}}
>
<Stack sx={{ ...panelSx, height: { xs: 'auto', md: 520 } }}>
<MinerRatesTable />
</Stack>
</Grid>
<Grid item xs={12} sm={6}>
<Stack
sx={{
p: { xs: 1.5, sm: 2, md: 2.5 },
height: { xs: 'auto', md: 520 },
borderRadius: 0,
backgroundColor: 'surface.light',
border: '1px solid',
borderColor: 'divider',
}}
>
<Stack sx={{ ...panelSx, height: { xs: 'auto', md: 520 } }}>
<OrderbookDepth />
</Stack>
</Grid>
<Grid item xs={12}>
<Stack
sx={{
p: { xs: 1.5, sm: 2, md: 2.5 },
borderRadius: 0,
backgroundColor: 'surface.light',
border: '1px solid',
borderColor: 'divider',
}}
>
<Stack sx={panelSx}>
<ReservationsTracker />
</Stack>
</Grid>
<Grid item xs={12} sm={5} md={4}>
<Stack
sx={{
p: { xs: 1.5, sm: 2, md: 2.5 },
height: { xs: 'auto', md: 600 },
borderRadius: 0,
backgroundColor: 'surface.light',
border: '1px solid',
borderColor: 'divider',
}}
>
<Stack sx={{ ...panelSx, height: { xs: 'auto', md: 600 } }}>
<EventFeed />
</Stack>
</Grid>
<Grid item xs={12} sm={7} md={8}>
<Stack
sx={{
p: { xs: 1.5, sm: 2, md: 2.5 },
height: { xs: 'auto', md: 600 },
borderRadius: 0,
backgroundColor: 'surface.light',
border: '1px solid',
borderColor: 'divider',
}}
>
<Stack sx={{ ...panelSx, height: { xs: 'auto', md: 600 } }}>
<SwapTracker />
</Stack>
</Grid>
Expand Down