Benjamin Sutter
d15a13e485
- 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>
65 lines
1.9 KiB
TypeScript
65 lines
1.9 KiB
TypeScript
import { Box, Card, Typography } from '@mui/material'
|
|
import { TrendingUp, TrendingDown } from 'lucide-react'
|
|
import type { SxProps, Theme } from '@mui/material'
|
|
import type { ReactNode } from 'react'
|
|
|
|
interface MetricDelta {
|
|
value: string
|
|
positive: boolean
|
|
}
|
|
|
|
interface MetricCardProps {
|
|
label: string
|
|
value: string | number
|
|
delta?: MetricDelta
|
|
icon?: ReactNode
|
|
color?: string
|
|
sx?: SxProps<Theme>
|
|
}
|
|
|
|
export function MetricCard({ label, value, delta, icon, color = '#1e3a5f', sx }: MetricCardProps) {
|
|
return (
|
|
<Card sx={{ p: 2.5, ...sx }}>
|
|
<Box sx={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between' }}>
|
|
<Box>
|
|
<Typography
|
|
sx={{ fontSize: '0.6875rem', fontWeight: 600, color: 'text.disabled', textTransform: 'uppercase', letterSpacing: '0.08em', mb: 0.5 }}
|
|
>
|
|
{label}
|
|
</Typography>
|
|
<Typography sx={{ fontSize: '1.75rem', fontWeight: 700, color, lineHeight: 1, fontVariantNumeric: 'tabular-nums' }}>
|
|
{value}
|
|
</Typography>
|
|
{delta && (
|
|
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.25, mt: 0.5 }}>
|
|
{delta.positive
|
|
? <TrendingUp size={12} color="#1a7a4a" />
|
|
: <TrendingDown size={12} color="#c0392b" />}
|
|
<Typography
|
|
sx={{ fontSize: '0.75rem', color: delta.positive ? '#1a7a4a' : '#c0392b', fontWeight: 500 }}
|
|
>
|
|
{delta.value}
|
|
</Typography>
|
|
</Box>
|
|
)}
|
|
</Box>
|
|
{icon && (
|
|
<Box
|
|
sx={{
|
|
width: 40,
|
|
height: 40,
|
|
borderRadius: 1.5,
|
|
bgcolor: `${color}18`,
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
}}
|
|
>
|
|
{icon}
|
|
</Box>
|
|
)}
|
|
</Box>
|
|
</Card>
|
|
)
|
|
}
|