updates on the redesign changes
This commit is contained in:
@@ -125,17 +125,21 @@ const pillFieldSx = (color) => ({
|
||||
}
|
||||
});
|
||||
|
||||
// Semantic per-row status palette.
|
||||
// Semantic per-row status palette — colors per brand standard:
|
||||
// green=delivered, amber=pending, blue=created/processing, red=cancelled,
|
||||
// dark-red=failed, purple=on-hold.
|
||||
const ROW_STATUS_META = {
|
||||
created: { label: 'Created', color: '#0ea5e9', icon: MdLocalShipping },
|
||||
created: { label: 'Created', color: '#3b82f6', icon: MdLocalShipping },
|
||||
pending: { label: 'Pending', color: '#f59e0b', icon: MdHourglassEmpty },
|
||||
processing: { label: 'Processing', color: BRAND, icon: MdAccessTime },
|
||||
processing: { label: 'Processing', color: '#3b82f6', icon: MdAccessTime },
|
||||
modified: { label: 'Confirmed', color: '#10b981', icon: MdCheckCircle },
|
||||
confirmed: { label: 'Confirmed', color: '#10b981', icon: MdCheckCircle },
|
||||
ready: { label: 'Accepted', color: '#6366f1', icon: MdCheckCircle },
|
||||
active: { label: 'Picked', color: '#8b5cf6', icon: MdLocalShipping },
|
||||
onhold: { label: 'On Hold', color: '#8b5cf6', icon: MdHistoryToggleOff },
|
||||
closed: { label: 'Closed', color: '#06b6d4', icon: MdCheckCircle },
|
||||
delivered: { label: 'Delivered', color: '#10b981', icon: MdCheckCircle },
|
||||
failed: { label: 'Failed', color: '#991b1b', icon: MdCancel },
|
||||
cancelled: { label: 'Cancelled', color: '#ef4444', icon: MdCancel }
|
||||
};
|
||||
|
||||
@@ -147,6 +151,7 @@ const ORDERS_STATUS_TABS = [
|
||||
{ idx: 3, status: 'cancelled', label: 'Cancelled', color: '#ef4444', icon: MdCancel, countKey: 'cancelled' }
|
||||
];
|
||||
|
||||
// Filled status badge — high-contrast pill (white text on solid color).
|
||||
const StatusBadge = ({ status }) => {
|
||||
const meta = ROW_STATUS_META[String(status || '').toLowerCase()] || {
|
||||
label: status || '—',
|
||||
@@ -160,15 +165,18 @@ const StatusBadge = ({ status }) => {
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
gap: 0.5,
|
||||
px: 1,
|
||||
px: 1.125,
|
||||
py: 0.375,
|
||||
borderRadius: 999,
|
||||
bgcolor: tint(meta.color),
|
||||
border: `1px solid ${edge(meta.color)}`,
|
||||
color: meta.color,
|
||||
bgcolor: meta.color,
|
||||
color: '#fff',
|
||||
fontSize: 11,
|
||||
fontWeight: 800,
|
||||
whiteSpace: 'nowrap'
|
||||
fontWeight: 700,
|
||||
letterSpacing: 0.2,
|
||||
whiteSpace: 'nowrap',
|
||||
minWidth: 86,
|
||||
justifyContent: 'center',
|
||||
boxShadow: `0 1px 2px ${ring(meta.color)}`
|
||||
}}
|
||||
>
|
||||
<Icon size={12} /> {meta.label}
|
||||
@@ -445,13 +453,14 @@ const Orders = () => {
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* ============================================= || Header || ============================================= */}
|
||||
{/* ============================================= || Header (compact) || ============================================= */}
|
||||
<Paper
|
||||
elevation={0}
|
||||
sx={{
|
||||
mb: { xs: 1.5, md: 2 },
|
||||
p: { xs: 1.5, sm: 2, md: 2.5 },
|
||||
borderRadius: DT.radiusCard / 8,
|
||||
mb: { xs: 1, md: 1.25 },
|
||||
px: { xs: 1.5, sm: 2 },
|
||||
py: { xs: 1, sm: 1.25 },
|
||||
borderRadius: 2,
|
||||
border: '1px solid',
|
||||
borderColor: DT.borderSubtle,
|
||||
background: `linear-gradient(135deg, ${tint(BRAND)} 0%, ${tint(BRAND_LIGHT)} 100%)`,
|
||||
@@ -462,43 +471,45 @@ const Orders = () => {
|
||||
direction={{ xs: 'column', sm: 'row' }}
|
||||
alignItems={{ xs: 'flex-start', sm: 'center' }}
|
||||
justifyContent="space-between"
|
||||
spacing={{ xs: 1.5, sm: 2 }}
|
||||
spacing={{ xs: 1, sm: 1.5 }}
|
||||
>
|
||||
<Stack direction="row" alignItems="center" spacing={{ xs: 1.25, sm: 1.75 }}>
|
||||
<Stack direction="row" alignItems="center" spacing={1.25}>
|
||||
<Avatar
|
||||
variant="rounded"
|
||||
sx={{
|
||||
width: { xs: 40, sm: 48 },
|
||||
height: { xs: 40, sm: 48 },
|
||||
width: 36,
|
||||
height: 36,
|
||||
bgcolor: BRAND,
|
||||
color: '#fff',
|
||||
boxShadow: `0 6px 18px ${ring(BRAND)}`
|
||||
borderRadius: 1.5,
|
||||
boxShadow: `0 4px 12px ${ring(BRAND)}`
|
||||
}}
|
||||
>
|
||||
<MdLocalShipping size={22} />
|
||||
<MdLocalShipping size={19} />
|
||||
</Avatar>
|
||||
<Stack>
|
||||
<Stack spacing={0.125}>
|
||||
<Typography
|
||||
variant="h3"
|
||||
sx={{
|
||||
fontWeight: 800,
|
||||
color: DT.textPrimary,
|
||||
lineHeight: 1.1,
|
||||
fontSize: { xs: '1.25rem', sm: '1.5rem', md: '1.75rem' }
|
||||
fontSize: { xs: '1.1rem', sm: '1.25rem', md: '1.375rem' }
|
||||
}}
|
||||
>
|
||||
Orders
|
||||
</Typography>
|
||||
<Stack direction="row" alignItems="center" spacing={0.75} sx={{ mt: 0.5 }}>
|
||||
<Stack direction="row" alignItems="center" spacing={0.75}>
|
||||
<Box
|
||||
sx={{
|
||||
width: 8,
|
||||
height: 8,
|
||||
width: 7,
|
||||
height: 7,
|
||||
borderRadius: '50%',
|
||||
bgcolor: '#10b981',
|
||||
boxShadow: '0 0 0 4px rgba(16,185,129,0.18)'
|
||||
boxShadow: '0 0 0 3px rgba(16,185,129,0.18)'
|
||||
}}
|
||||
/>
|
||||
<Typography variant="caption" sx={{ color: DT.textSecondary, fontWeight: 600 }}>
|
||||
<Typography sx={{ fontSize: 11.5, color: DT.textSecondary, fontWeight: 600 }}>
|
||||
Live · {locoName} · {datestatus}
|
||||
</Typography>
|
||||
</Stack>
|
||||
@@ -563,8 +574,8 @@ const Orders = () => {
|
||||
</Stack>
|
||||
</Paper>
|
||||
|
||||
{/* ============================================= || KPI Cards || ============================================= */}
|
||||
<Grid container spacing={{ xs: 1.25, sm: 1.5, md: 2 }}>
|
||||
{/* ============================================= || KPI Cards (compact) || ============================================= */}
|
||||
<Grid container spacing={{ xs: 1, sm: 1.25, md: 1.5 }}>
|
||||
{kpiCards.map((item) => {
|
||||
const Icon = item.icon;
|
||||
return (
|
||||
@@ -574,14 +585,15 @@ const Orders = () => {
|
||||
sx={{
|
||||
position: 'relative',
|
||||
overflow: 'hidden',
|
||||
p: { xs: 1.25, sm: 1.75, md: 2.25 },
|
||||
borderRadius: DT.radiusCard / 8,
|
||||
px: { xs: 1.25, sm: 1.5 },
|
||||
py: { xs: 0.875, sm: 1.125 },
|
||||
borderRadius: 2,
|
||||
border: '1px solid',
|
||||
borderColor: DT.borderSubtle,
|
||||
background: '#fff',
|
||||
transition: 'transform 0.2s, box-shadow 0.2s, border-color 0.2s',
|
||||
transition: 'transform 0.15s, box-shadow 0.15s, border-color 0.15s',
|
||||
'&:hover': {
|
||||
transform: 'translateY(-3px)',
|
||||
transform: 'translateY(-1px)',
|
||||
boxShadow: DT.shadowMd,
|
||||
borderColor: edge(item.color)
|
||||
}
|
||||
@@ -592,55 +604,59 @@ const Orders = () => {
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
height: 3,
|
||||
background: `linear-gradient(90deg, ${item.color} 0%, ${soft(item.color)} 100%)`
|
||||
bottom: 0,
|
||||
width: 3,
|
||||
background: item.color
|
||||
}}
|
||||
/>
|
||||
<Stack direction="row" alignItems="flex-start" justifyContent="space-between" spacing={1}>
|
||||
<Stack spacing={0.5} sx={{ minWidth: 0, flex: 1 }}>
|
||||
<Stack direction="row" alignItems="center" justifyContent="space-between" spacing={1} sx={{ pl: 0.5 }}>
|
||||
<Stack spacing={0.125} sx={{ minWidth: 0, flex: 1 }}>
|
||||
<Typography
|
||||
variant="caption"
|
||||
sx={{
|
||||
color: DT.textSecondary,
|
||||
fontWeight: 700,
|
||||
letterSpacing: 0.4,
|
||||
textTransform: 'uppercase',
|
||||
fontSize: { xs: 10, sm: 11 },
|
||||
fontSize: 10.5,
|
||||
whiteSpace: 'nowrap',
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis'
|
||||
textOverflow: 'ellipsis',
|
||||
lineHeight: 1.2
|
||||
}}
|
||||
>
|
||||
{item.label}
|
||||
</Typography>
|
||||
<Typography
|
||||
sx={{
|
||||
fontWeight: 800,
|
||||
color: DT.textPrimary,
|
||||
lineHeight: 1.1,
|
||||
fontSize: { xs: '1.25rem', sm: '1.5rem', md: '1.75rem' }
|
||||
}}
|
||||
>
|
||||
{item.value === '' ? <Skeleton sx={{ width: 40 }} animation="wave" /> : item.value}
|
||||
</Typography>
|
||||
{item.percentage != null && (
|
||||
<Typography variant="caption" sx={{ color: DT.textSecondary, fontWeight: 700 }}>
|
||||
{item.percentage}%
|
||||
<Stack direction="row" alignItems="baseline" spacing={0.75}>
|
||||
<Typography
|
||||
sx={{
|
||||
fontWeight: 800,
|
||||
color: DT.textPrimary,
|
||||
lineHeight: 1.15,
|
||||
fontSize: { xs: '0.95rem', sm: '1.1rem', md: '1.2rem' }
|
||||
}}
|
||||
noWrap
|
||||
>
|
||||
{item.value === '' ? <Skeleton sx={{ width: 40 }} animation="wave" /> : item.value}
|
||||
</Typography>
|
||||
)}
|
||||
{item.percentage != null && item.value !== '' && (
|
||||
<Typography sx={{ fontSize: 10.5, color: DT.textMuted, fontWeight: 700 }}>
|
||||
{item.percentage}%
|
||||
</Typography>
|
||||
)}
|
||||
</Stack>
|
||||
</Stack>
|
||||
<Avatar
|
||||
variant="rounded"
|
||||
sx={{
|
||||
width: { xs: 36, sm: 42, md: 48 },
|
||||
height: { xs: 36, sm: 42, md: 48 },
|
||||
width: 30,
|
||||
height: 30,
|
||||
bgcolor: soft(item.color),
|
||||
color: item.color,
|
||||
boxShadow: `inset 0 0 0 1px ${edge(item.color)}`,
|
||||
borderRadius: 1.25,
|
||||
flexShrink: 0
|
||||
}}
|
||||
>
|
||||
<Icon size={20} />
|
||||
<Icon size={15} />
|
||||
</Avatar>
|
||||
</Stack>
|
||||
</Paper>
|
||||
@@ -649,13 +665,13 @@ const Orders = () => {
|
||||
})}
|
||||
</Grid>
|
||||
|
||||
{/* ============================================= || Filter Bar || ============================================= */}
|
||||
{/* ============================================= || Filter Bar (compact) || ============================================= */}
|
||||
<Paper
|
||||
elevation={0}
|
||||
sx={{
|
||||
mt: { xs: 1.5, md: 2 },
|
||||
p: { xs: 1.25, md: 1.75 },
|
||||
borderRadius: DT.radiusCard / 8,
|
||||
mt: { xs: 1, md: 1.25 },
|
||||
p: { xs: 1, md: 1.125 },
|
||||
borderRadius: 2,
|
||||
border: '1px solid',
|
||||
borderColor: DT.borderSubtle,
|
||||
background: '#fff',
|
||||
@@ -751,14 +767,14 @@ const Orders = () => {
|
||||
</Stack>
|
||||
</Paper>
|
||||
|
||||
{/* ============================================= || Status Tabs + Search || ============================================= */}
|
||||
{/* ============================================= || Status Tabs + Search (compact) || ============================================= */}
|
||||
<Paper
|
||||
elevation={0}
|
||||
sx={{
|
||||
mt: { xs: 1.5, md: 2 },
|
||||
p: { xs: 1, md: 1.5 },
|
||||
borderTopLeftRadius: DT.radiusCard / 8,
|
||||
borderTopRightRadius: DT.radiusCard / 8,
|
||||
mt: { xs: 1, md: 1.25 },
|
||||
p: { xs: 0.875, md: 1.125 },
|
||||
borderTopLeftRadius: 2,
|
||||
borderTopRightRadius: 2,
|
||||
borderBottomLeftRadius: 0,
|
||||
borderBottomRightRadius: 0,
|
||||
border: '1px solid',
|
||||
@@ -903,14 +919,14 @@ const Orders = () => {
|
||||
</Stack>
|
||||
</Paper>
|
||||
|
||||
{/* ============================================= || Table || ============================================= */}
|
||||
{/* ============================================= || Table (dense, sticky header) || ============================================= */}
|
||||
<Paper
|
||||
elevation={0}
|
||||
sx={{
|
||||
borderTopLeftRadius: 0,
|
||||
borderTopRightRadius: 0,
|
||||
borderBottomLeftRadius: DT.radiusCard / 8,
|
||||
borderBottomRightRadius: DT.radiusCard / 8,
|
||||
borderBottomLeftRadius: 2,
|
||||
borderBottomRightRadius: 2,
|
||||
border: '1px solid',
|
||||
borderColor: DT.borderSubtle,
|
||||
overflow: 'hidden',
|
||||
@@ -921,7 +937,8 @@ const Orders = () => {
|
||||
onScroll={handleScroll}
|
||||
ref={containerRef}
|
||||
sx={{
|
||||
maxHeight: { xs: 'calc(100vh - 220px)', md: 'calc(100vh - 190px)' },
|
||||
minHeight: 320,
|
||||
maxHeight: { xs: 'calc(100vh - 320px)', md: 'calc(100vh - 290px)' },
|
||||
overflow: 'auto',
|
||||
'&::-webkit-scrollbar': { width: 10, height: 10 },
|
||||
'&::-webkit-scrollbar-thumb': {
|
||||
@@ -932,21 +949,21 @@ const Orders = () => {
|
||||
'&::-webkit-scrollbar-track': { backgroundColor: DT.surfaceAlt }
|
||||
}}
|
||||
>
|
||||
<Table stickyHeader sx={{ minWidth: { xs: 960, md: 1180 } }}>
|
||||
<Table stickyHeader size="small" sx={{ minWidth: { xs: 960, md: 1100 } }}>
|
||||
<TableHead>
|
||||
<TableRow
|
||||
sx={{
|
||||
'& th': {
|
||||
backgroundColor: DT.surfaceAlt,
|
||||
color: DT.textSecondary,
|
||||
fontSize: { xs: 10, md: 11 },
|
||||
fontSize: 10.5,
|
||||
fontWeight: 800,
|
||||
letterSpacing: 0.6,
|
||||
letterSpacing: 0.5,
|
||||
textTransform: 'uppercase',
|
||||
whiteSpace: 'nowrap',
|
||||
borderBottom: `1px solid ${DT.borderSubtle}`,
|
||||
py: { xs: 1, md: 1.25 },
|
||||
px: { xs: 1, md: 1.5 }
|
||||
py: 0.75,
|
||||
px: 1
|
||||
}
|
||||
}}
|
||||
>
|
||||
@@ -967,11 +984,11 @@ const Orders = () => {
|
||||
<TableBody>
|
||||
{(isLoadingGetOrders || loading) &&
|
||||
rows.length === 0 &&
|
||||
[0, 1, 2, 3, 4, 5].map((_, idx) => (
|
||||
Array.from({ length: 10 }).map((_, idx) => (
|
||||
<TableRow key={`sk-${idx}`}>
|
||||
{Array.from({ length: currentStatus === 'created' ? 11 : 10 }).map((__, ci) => (
|
||||
<TableCell key={ci} sx={{ borderBottom: `1px solid ${DT.divider}` }}>
|
||||
<Skeleton animation="wave" />
|
||||
<TableCell key={ci} sx={{ borderBottom: `1px solid ${DT.divider}`, py: 0.625, px: 1 }}>
|
||||
<Skeleton animation="wave" height={20} />
|
||||
</TableCell>
|
||||
))}
|
||||
</TableRow>
|
||||
@@ -979,17 +996,45 @@ const Orders = () => {
|
||||
|
||||
{!isLoadingGetOrders && rows.length === 0 && (
|
||||
<TableRow>
|
||||
<TableCell colSpan={currentStatus === 'created' ? 11 : 10} sx={{ py: 6, borderBottom: 'none' }}>
|
||||
<Stack alignItems="center" spacing={1.5}>
|
||||
<Avatar sx={{ width: 64, height: 64, bgcolor: soft('#94a3b8'), color: DT.textMuted }}>
|
||||
<MdLocalShipping size={28} />
|
||||
<TableCell colSpan={currentStatus === 'created' ? 11 : 10} sx={{ py: 7, borderBottom: 'none' }}>
|
||||
<Stack alignItems="center" spacing={1.25}>
|
||||
<Avatar
|
||||
variant="rounded"
|
||||
sx={{
|
||||
width: 56,
|
||||
height: 56,
|
||||
bgcolor: soft('#94a3b8'),
|
||||
color: DT.textMuted,
|
||||
borderRadius: 2
|
||||
}}
|
||||
>
|
||||
<MdLocalShipping size={26} />
|
||||
</Avatar>
|
||||
<Typography variant="subtitle1" sx={{ fontWeight: 700, color: DT.textPrimary }}>
|
||||
<Typography sx={{ fontWeight: 700, color: DT.textPrimary, fontSize: 14 }}>
|
||||
No {currentStatus} orders
|
||||
</Typography>
|
||||
<Typography variant="caption" sx={{ color: DT.textSecondary }}>
|
||||
{searchword ? 'Try a different keyword.' : 'Adjust the filters above to load orders.'}
|
||||
<Typography sx={{ color: DT.textSecondary, fontSize: 12 }}>
|
||||
{searchword ? 'Try a different keyword or clear the search.' : 'Adjust the location, status, or date range above.'}
|
||||
</Typography>
|
||||
{searchword && (
|
||||
<Button
|
||||
size="small"
|
||||
onClick={() => setSearchword('')}
|
||||
sx={{
|
||||
mt: 0.5,
|
||||
height: 28,
|
||||
textTransform: 'none',
|
||||
fontSize: 12,
|
||||
fontWeight: 700,
|
||||
color: BRAND,
|
||||
borderRadius: 1.25,
|
||||
'&:hover': { bgcolor: tint(BRAND) }
|
||||
}}
|
||||
startIcon={<MdClear size={14} />}
|
||||
>
|
||||
Clear search
|
||||
</Button>
|
||||
)}
|
||||
</Stack>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
@@ -1000,13 +1045,17 @@ const Orders = () => {
|
||||
key={`${row.orderheaderid}-${index}`}
|
||||
sx={{
|
||||
cursor: 'pointer',
|
||||
transition: 'background-color 0.15s',
|
||||
transition: 'background-color 0.12s, box-shadow 0.12s',
|
||||
'& td': {
|
||||
borderBottom: `1px solid ${DT.divider}`,
|
||||
py: { xs: 1, md: 1.25 },
|
||||
px: { xs: 1, md: 1.5 }
|
||||
py: 0.5,
|
||||
px: 1,
|
||||
verticalAlign: 'top'
|
||||
},
|
||||
'&:hover': { backgroundColor: DT.surfaceAlt }
|
||||
'&:hover': {
|
||||
backgroundColor: tint(BRAND),
|
||||
boxShadow: `inset 3px 0 0 ${BRAND}`
|
||||
}
|
||||
}}
|
||||
>
|
||||
<TableCell>
|
||||
@@ -1025,10 +1074,13 @@ const Orders = () => {
|
||||
{row.orderid}
|
||||
</Typography>
|
||||
</Tooltip>
|
||||
<Stack direction="row" spacing={0.75} alignItems="center" sx={{ mt: 0.25 }}>
|
||||
<MdAccessTime size={11} style={{ color: DT.textMuted }} />
|
||||
<Typography sx={{ fontSize: 11, color: DT.textSecondary, fontWeight: 600 }} noWrap>
|
||||
{dayjs(row.pickupslot).format('DD/MM/YYYY')} · {dayjs(row.pickupslot).format('hh:mm A')}
|
||||
<Stack direction="row" spacing={0.5} alignItems="center" sx={{ mt: 0.125 }}>
|
||||
<MdAccessTime size={10} style={{ color: DT.textMuted, flexShrink: 0 }} />
|
||||
<Typography sx={{ fontSize: 10.5, color: DT.textSecondary, fontWeight: 700 }} noWrap>
|
||||
{dayjs(row.pickupslot).format('hh:mm A')}
|
||||
</Typography>
|
||||
<Typography sx={{ fontSize: 10.5, color: DT.textMuted, fontWeight: 600 }} noWrap>
|
||||
· {dayjs(row.pickupslot).format('DD MMM YY')}
|
||||
</Typography>
|
||||
</Stack>
|
||||
</TableCell>
|
||||
@@ -1143,19 +1195,29 @@ const Orders = () => {
|
||||
))}
|
||||
|
||||
{rows.length !== 0 && (
|
||||
<TableRow>
|
||||
<TableCell colSpan={15} rowSpan={3} sx={{ borderBottom: 'none' }}>
|
||||
<div ref={loadMoreRef} style={{ height: 40, textAlign: 'center' }}>
|
||||
{isFetchingNextPage ? (
|
||||
<CircularProgress size={20} sx={{ color: BRAND }} />
|
||||
) : hasNextPage ? (
|
||||
<CircularProgress size={20} sx={{ color: BRAND }} />
|
||||
<TableRow sx={{ '&:hover': { backgroundColor: 'transparent !important' } }}>
|
||||
<TableCell colSpan={currentStatus === 'created' ? 11 : 10} sx={{ borderBottom: 'none', py: 1, bgcolor: DT.surfaceAlt }}>
|
||||
<Stack
|
||||
ref={loadMoreRef}
|
||||
direction="row"
|
||||
alignItems="center"
|
||||
justifyContent="center"
|
||||
spacing={1}
|
||||
sx={{ minHeight: 32 }}
|
||||
>
|
||||
{isFetchingNextPage || hasNextPage ? (
|
||||
<>
|
||||
<CircularProgress size={14} sx={{ color: BRAND }} />
|
||||
<Typography sx={{ fontSize: 11.5, color: DT.textSecondary, fontWeight: 700 }}>
|
||||
Loading more orders…
|
||||
</Typography>
|
||||
</>
|
||||
) : (
|
||||
<Typography variant="caption" sx={{ color: DT.textMuted, fontWeight: 700 }}>
|
||||
No more orders
|
||||
<Typography sx={{ fontSize: 11.5, color: DT.textMuted, fontWeight: 700, letterSpacing: 0.3 }}>
|
||||
{rows.length} order{rows.length === 1 ? '' : 's'} · End of list
|
||||
</Typography>
|
||||
)}
|
||||
</div>
|
||||
</Stack>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user