84 lines
3.5 KiB
JavaScript
84 lines
3.5 KiB
JavaScript
import { Card, CardContent, Box, Typography, Avatar, Stack } from '@mui/material';
|
|
import ArrowUpwardRoundedIcon from '@mui/icons-material/ArrowUpwardRounded';
|
|
import ArrowDownwardRoundedIcon from '@mui/icons-material/ArrowDownwardRounded';
|
|
|
|
// ==============================|| STAT / KPI CARD ||============================== //
|
|
|
|
export default function StatCard({ title, value, icon: Icon, color = 'primary', trend, caption, accent = false }) {
|
|
const trendUp = typeof trend === 'number' ? trend >= 0 : null;
|
|
|
|
return (
|
|
<Card
|
|
sx={{
|
|
height: '100%',
|
|
position: 'relative',
|
|
overflow: 'hidden',
|
|
borderRadius: 3,
|
|
boxShadow: '0 8px 24px rgba(0,0,0,0.03)',
|
|
border: '1px solid rgba(0,0,0,0.04)',
|
|
transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
|
|
'&:hover': { transform: 'translateY(-4px)', boxShadow: '0 16px 32px rgba(0,0,0,0.06)' },
|
|
background: (theme) => `linear-gradient(145deg, ${theme.palette.background.paper} 0%, ${theme.palette[color].lighter}15 100%)`
|
|
}}
|
|
>
|
|
{Icon && (
|
|
<Box sx={{ position: 'absolute', right: -15, bottom: -15, opacity: 0.04, transform: 'rotate(-15deg)', pointerEvents: 'none' }}>
|
|
<Icon sx={{ fontSize: 110 }} />
|
|
</Box>
|
|
)}
|
|
<CardContent sx={{ p: 2.5, '&:last-child': { pb: 2.5 }, height: '100%', display: 'flex', flexDirection: 'column' }}>
|
|
<Stack direction="row" justifyContent="space-between" alignItems="flex-start" sx={{ mb: 1.5, position: 'relative', zIndex: 2 }}>
|
|
<Typography variant="body2" sx={{ fontWeight: 600, color: 'text.secondary' }}>
|
|
{title}
|
|
</Typography>
|
|
{Icon && (
|
|
<Box
|
|
sx={{
|
|
width: 38,
|
|
height: 38,
|
|
borderRadius: 2,
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
bgcolor: `${color}.lighter`,
|
|
color: `${color}.main`,
|
|
boxShadow: 'inset 0 0 0 1px rgba(0,0,0,0.05)'
|
|
}}
|
|
>
|
|
<Icon fontSize="small" />
|
|
</Box>
|
|
)}
|
|
</Stack>
|
|
|
|
<Box sx={{ flexGrow: 1, position: 'relative', zIndex: 2 }}>
|
|
<Typography variant="h4" sx={{ fontWeight: 800, color: 'grey.900', letterSpacing: '-0.5px', lineHeight: 1 }}>
|
|
{value}
|
|
</Typography>
|
|
</Box>
|
|
|
|
{(trendUp !== null || caption) && (
|
|
<Stack direction="row" spacing={1} alignItems="center" sx={{ mt: 2, pt: 1.5, borderTop: '1px dashed rgba(0,0,0,0.06)', position: 'relative', zIndex: 2 }}>
|
|
{trendUp !== null && (
|
|
<Stack direction="row" spacing={0.25} alignItems="center" sx={{ bgcolor: trendUp ? 'success.lighter' : 'error.lighter', px: 0.75, py: 0.25, borderRadius: 1 }}>
|
|
{trendUp ? (
|
|
<ArrowUpwardRoundedIcon sx={{ fontSize: 14, color: 'success.dark' }} />
|
|
) : (
|
|
<ArrowDownwardRoundedIcon sx={{ fontSize: 14, color: 'error.dark' }} />
|
|
)}
|
|
<Typography variant="caption" sx={{ fontWeight: 700, color: trendUp ? 'success.dark' : 'error.dark' }}>
|
|
{Math.abs(trend)}%
|
|
</Typography>
|
|
</Stack>
|
|
)}
|
|
{caption && (
|
|
<Typography variant="caption" sx={{ color: 'text.secondary', fontWeight: 600 }}>
|
|
{caption}
|
|
</Typography>
|
|
)}
|
|
</Stack>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|