Doormile/doormile_crm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Finalize CRM transformation, mobile responsiveness, and Qdrant integration

Browse Source
This commit is contained in:
Suriya
2026-06-06 13:31:31 +05:30
parent a162fa89e5
commit 59fc91f034
45 changed files with 2052 additions and 4430 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
src/components/StatCard.jsx
View File

@@ -4,46 +4,74 @@ import ArrowDownwardRoundedIcon from '@mui/icons-material/ArrowDownwardRounded';
// ==============================|| STAT / KPI CARD ||============================== //
export default function StatCard({ title, value, icon: Icon, color = 'primary', trend, caption }) {
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%' }}>
<CardContent>
<Stack direction="row" justifyContent="space-between" alignItems="flex-start">
<Box>
<Typography variant="body2" color="text.secondary" sx={{ fontWeight: 500 }}>
{title}
</Typography>
<Typography variant="h3" sx={{ mt: 0.75, fontWeight: 700, color: 'grey.800' }}>
{value}
</Typography>
</Box>
<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 && (
<Avatar
variant="rounded"
sx={{ bgcolor: `${color}.lighter`, color: `${color}.main`, width: 44, height: 44 }}
<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" />
</Avatar>
</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={0.5} alignItems="center" sx={{ mt: 1.5 }}>
<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: 16, color: 'success.main' }} />
<ArrowUpwardRoundedIcon sx={{ fontSize: 14, color: 'success.dark' }} />
) : (
<ArrowDownwardRoundedIcon sx={{ fontSize: 16, color: 'error.main' }} />
<ArrowDownwardRoundedIcon sx={{ fontSize: 14, color: 'error.dark' }} />
)}
<Typography variant="caption" sx={{ fontWeight: 600, color: trendUp ? 'success.main' : 'error.main' }}>
<Typography variant="caption" sx={{ fontWeight: 700, color: trendUp ? 'success.dark' : 'error.dark' }}>
{Math.abs(trend)}%
</Typography>
</>
</Stack>
)}
{caption && (
<Typography variant="caption" color="text.secondary">
<Typography variant="caption" sx={{ color: 'text.secondary', fontWeight: 600 }}>
{caption}
</Typography>
)}