Finalize CRM transformation, mobile responsiveness, and Qdrant integration
This commit is contained in:
11
src/components/AuthGuard.jsx
Normal file
11
src/components/AuthGuard.jsx
Normal file
@@ -0,0 +1,11 @@
|
||||
import { Navigate, Outlet } from 'react-router-dom';
|
||||
|
||||
export default function AuthGuard({ children }) {
|
||||
const token = localStorage.getItem('auth_token');
|
||||
|
||||
if (!token) {
|
||||
return <Navigate to="/login" replace />;
|
||||
}
|
||||
|
||||
return children || <Outlet />;
|
||||
}
|
||||
@@ -1,17 +0,0 @@
|
||||
import { Card, CardHeader, CardContent, Divider, Box } from '@mui/material';
|
||||
|
||||
// ==============================|| MAIN CARD (titled surface) ||============================== //
|
||||
|
||||
export default function MainCard({ title, action, children, divider = true, contentSx, sx, noPadding = false }) {
|
||||
return (
|
||||
<Card sx={sx}>
|
||||
{title && (
|
||||
<>
|
||||
<CardHeader title={title} action={action} />
|
||||
{divider && <Divider />}
|
||||
</>
|
||||
)}
|
||||
{noPadding ? <Box>{children}</Box> : <CardContent sx={contentSx}>{children}</CardContent>}
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@@ -1,59 +0,0 @@
|
||||
import { Box, Typography, Chip } from '@mui/material';
|
||||
import RoomIcon from '@mui/icons-material/Room';
|
||||
import TwoWheelerIcon from '@mui/icons-material/TwoWheeler';
|
||||
|
||||
// Stylised static "map" surface — pins + red route line. Swap for Leaflet/Google later.
|
||||
export default function MapPlaceholder({ height = 360, pins = [], showRoute = true, label = 'Live Tracking', riders = [] }) {
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
position: 'relative',
|
||||
height,
|
||||
borderRadius: 2,
|
||||
overflow: 'hidden',
|
||||
bgcolor: '#EAEEF3',
|
||||
backgroundImage:
|
||||
'linear-gradient(rgba(0,0,0,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,0.04) 1px, transparent 1px)',
|
||||
backgroundSize: '32px 32px',
|
||||
border: '1px solid',
|
||||
borderColor: 'grey.200'
|
||||
}}
|
||||
>
|
||||
{/* faux roads */}
|
||||
<Box sx={{ position: 'absolute', top: '30%', left: 0, right: 0, height: 8, bgcolor: '#fff', opacity: 0.85 }} />
|
||||
<Box sx={{ position: 'absolute', top: 0, bottom: 0, left: '60%', width: 8, bgcolor: '#fff', opacity: 0.85 }} />
|
||||
<Box sx={{ position: 'absolute', top: '65%', left: 0, right: 0, height: 6, bgcolor: '#fff', opacity: 0.7 }} />
|
||||
|
||||
{showRoute && (
|
||||
<svg style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}>
|
||||
<path d="M 18% 78% Q 45% 50% 78% 22%" fill="none" stroke="#C01227" strokeWidth="3" strokeDasharray="2 8" strokeLinecap="round" />
|
||||
</svg>
|
||||
)}
|
||||
|
||||
{(pins.length ? pins : [
|
||||
{ x: '18%', y: '78%', label: 'Pickup', color: '#00A854' },
|
||||
{ x: '78%', y: '22%', label: 'Drop', color: '#C01227' }
|
||||
]).map((p, i) => (
|
||||
<Box key={i} sx={{ position: 'absolute', left: p.x, top: p.y, transform: 'translate(-50%, -100%)', textAlign: 'center' }}>
|
||||
<RoomIcon sx={{ color: p.color, fontSize: 34, filter: 'drop-shadow(0 2px 3px rgba(0,0,0,0.3))' }} />
|
||||
{p.label && (
|
||||
<Chip size="small" label={p.label} sx={{ bgcolor: '#fff', fontWeight: 600, mt: -0.5 }} />
|
||||
)}
|
||||
</Box>
|
||||
))}
|
||||
|
||||
{riders.map((r, i) => (
|
||||
<Box key={i} sx={{ position: 'absolute', left: r.x, top: r.y, transform: 'translate(-50%, -50%)' }}>
|
||||
<Box sx={{ width: 30, height: 30, borderRadius: '50%', bgcolor: r.active ? '#C01227' : '#8C8C8C', display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: '0 2px 6px rgba(0,0,0,0.3)' }}>
|
||||
<TwoWheelerIcon sx={{ color: '#fff', fontSize: 18 }} />
|
||||
</Box>
|
||||
</Box>
|
||||
))}
|
||||
|
||||
<Chip label={label} size="small" sx={{ position: 'absolute', top: 12, left: 12, bgcolor: '#fff', fontWeight: 600 }} />
|
||||
<Typography variant="caption" sx={{ position: 'absolute', bottom: 8, right: 12, color: 'grey.500' }}>
|
||||
Map data © Doormile demo
|
||||
</Typography>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
)}
|
||||
|
||||
@@ -18,6 +18,16 @@ const MAP = {
|
||||
skipped: { color: 'warning', label: 'Skipped' },
|
||||
failed: { color: 'error', label: 'Failed' },
|
||||
cancelled: { color: 'error', label: 'Cancelled' },
|
||||
// clients (doormile_clients)
|
||||
newclient: { color: 'info', label: 'New Client' },
|
||||
contacted: { color: 'warning', label: 'Contacted' },
|
||||
onboarded: { color: 'success', label: 'Onboarded' },
|
||||
lost: { color: 'error', label: 'Lost' },
|
||||
// team users (doormile_auth)
|
||||
admin: { color: 'primary', label: 'Admin' },
|
||||
rep: { color: 'info', label: 'Rep' },
|
||||
manager: { color: 'success', label: 'Manager' },
|
||||
support: { color: 'warning', label: 'Support' },
|
||||
// riders / tenants
|
||||
online: { color: 'success', label: 'Online' },
|
||||
offline: { color: 'default', label: 'Offline' },
|
||||
@@ -42,7 +52,8 @@ const TONE = {
|
||||
|
||||
export default function StatusChip({ status, size = 'small', label, sx }) {
|
||||
const key = String(status || '').toLowerCase().replace(/\s+/g, '-');
|
||||
const cfg = MAP[key] || { color: 'default', label: status };
|
||||
const humanized = String(status || '').replace(/[_-]+/g, ' ').replace(/\b\w/g, (c) => c.toUpperCase());
|
||||
const cfg = MAP[key] || { color: 'default', label: humanized || status };
|
||||
const tone = TONE[cfg.color] || TONE.default;
|
||||
return (
|
||||
<Chip
|
||||
|
||||
@@ -1,66 +0,0 @@
|
||||
import { Box, useTheme } from '@mui/material';
|
||||
|
||||
// Lightweight dependency-free area/line chart.
|
||||
// series: [{ name, color, data: number[] }], labels: string[]
|
||||
export default function AreaChart({ series = [], labels = [], height = 260 }) {
|
||||
const theme = useTheme();
|
||||
const W = 720;
|
||||
const H = height;
|
||||
const pad = { l: 40, r: 16, t: 16, b: 28 };
|
||||
const innerW = W - pad.l - pad.r;
|
||||
const innerH = H - pad.t - pad.b;
|
||||
|
||||
const all = series.flatMap((s) => s.data);
|
||||
const max = Math.max(...all, 1);
|
||||
const min = 0;
|
||||
const n = labels.length;
|
||||
|
||||
const x = (i) => pad.l + (n <= 1 ? 0 : (i / (n - 1)) * innerW);
|
||||
const y = (v) => pad.t + innerH - ((v - min) / (max - min)) * innerH;
|
||||
|
||||
const ticks = 4;
|
||||
|
||||
return (
|
||||
<Box sx={{ width: '100%', overflow: 'hidden' }}>
|
||||
<svg viewBox={`0 0 ${W} ${H}`} width="100%" height={H} preserveAspectRatio="xMidYMid meet">
|
||||
{Array.from({ length: ticks + 1 }).map((_, i) => {
|
||||
const gy = pad.t + (i / ticks) * innerH;
|
||||
const val = Math.round(max - (i / ticks) * (max - min));
|
||||
return (
|
||||
<g key={i}>
|
||||
<line x1={pad.l} y1={gy} x2={W - pad.r} y2={gy} stroke={theme.palette.grey[200]} strokeWidth="1" />
|
||||
<text x={pad.l - 8} y={gy + 4} textAnchor="end" fontSize="11" fill={theme.palette.grey[500]}>
|
||||
{val}
|
||||
</text>
|
||||
</g>
|
||||
);
|
||||
})}
|
||||
{labels.map((lb, i) => (
|
||||
<text key={lb} x={x(i)} y={H - 8} textAnchor="middle" fontSize="11" fill={theme.palette.grey[500]}>
|
||||
{lb}
|
||||
</text>
|
||||
))}
|
||||
{series.map((s) => {
|
||||
const line = s.data.map((v, i) => `${i === 0 ? 'M' : 'L'} ${x(i)} ${y(v)}`).join(' ');
|
||||
const area = `${line} L ${x(s.data.length - 1)} ${pad.t + innerH} L ${x(0)} ${pad.t + innerH} Z`;
|
||||
const gid = `grad-${s.name.replace(/\s/g, '')}`;
|
||||
return (
|
||||
<g key={s.name}>
|
||||
<defs>
|
||||
<linearGradient id={gid} x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stopColor={s.color} stopOpacity="0.28" />
|
||||
<stop offset="100%" stopColor={s.color} stopOpacity="0" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
{s.fill !== false && <path d={area} fill={`url(#${gid})`} />}
|
||||
<path d={line} fill="none" stroke={s.color} strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" />
|
||||
{s.data.map((v, i) => (
|
||||
<circle key={i} cx={x(i)} cy={y(v)} r="3" fill="#fff" stroke={s.color} strokeWidth="2" />
|
||||
))}
|
||||
</g>
|
||||
);
|
||||
})}
|
||||
</svg>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user