updates on the dispatch page and redesigned the maximum pages
This commit is contained in:
288
src/pages/nearle/orders/OrdersRedesign.css
Normal file
288
src/pages/nearle/orders/OrdersRedesign.css
Normal file
@@ -0,0 +1,288 @@
|
||||
/* OrdersRedesign.css — premium aesthetics + micro-animations
|
||||
Ported from xpressconsole; trimmed to only the classes the
|
||||
redesigned multipleOrders.js (and its peers) consume here. */
|
||||
|
||||
/* ---------- Page background ---------- */
|
||||
.orders-workspace-bg {
|
||||
background: linear-gradient(135deg, #f8fafc 0%, #edf2f7 100%) !important;
|
||||
}
|
||||
|
||||
/* ---------- Cards ---------- */
|
||||
.orders-card {
|
||||
background: #ffffff !important;
|
||||
border: 1px solid #eef2f6 !important;
|
||||
border-radius: 12px !important;
|
||||
box-shadow: 0 10px 25px -5px rgba(62, 73, 84, 0.04),
|
||||
0 4px 12px -2px rgba(62, 73, 84, 0.02) !important;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
|
||||
overflow: hidden;
|
||||
}
|
||||
.orders-card:hover {
|
||||
box-shadow: 0 16px 35px -8px rgba(62, 73, 84, 0.08),
|
||||
0 6px 16px -3px rgba(62, 73, 84, 0.03) !important;
|
||||
}
|
||||
|
||||
.orders-card .MuiOutlinedInput-root {
|
||||
font-size: 13px !important;
|
||||
border-radius: 10px !important;
|
||||
}
|
||||
.orders-card .MuiOutlinedInput-input {
|
||||
font-size: 13px !important;
|
||||
padding-top: 9px !important;
|
||||
padding-bottom: 9px !important;
|
||||
}
|
||||
.orders-card .MuiInputLabel-root {
|
||||
font-size: 13px !important;
|
||||
}
|
||||
.orders-card .MuiInputLabel-root.MuiInputLabel-shrink {
|
||||
font-size: 11.5px !important;
|
||||
}
|
||||
|
||||
/* ---------- Section title bar (gradient strip + h-title) ---------- */
|
||||
.section-title-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.section-title-bar::before {
|
||||
content: '';
|
||||
width: 4px;
|
||||
height: 22px;
|
||||
border-radius: 4px;
|
||||
background: linear-gradient(180deg, #1890ff, #096dd9);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.section-title-bar--accent::before {
|
||||
background: linear-gradient(180deg, #a855f7, #65387a);
|
||||
}
|
||||
.section-title-bar .MuiTypography-root {
|
||||
margin-bottom: 0 !important;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
/* ---------- Delivery preferences card ---------- */
|
||||
.delivery-prefs-card {
|
||||
background: linear-gradient(135deg, #ffffff 0%, #fbfcff 100%) !important;
|
||||
border: 1px solid #eef2f6 !important;
|
||||
border-radius: 14px !important;
|
||||
}
|
||||
.delivery-prefs-header {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
margin-bottom: 10px;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 1px solid #f1f5f9;
|
||||
}
|
||||
.delivery-prefs-title {
|
||||
font-size: 14px !important;
|
||||
font-weight: 700 !important;
|
||||
color: #1e293b !important;
|
||||
letter-spacing: -0.01em;
|
||||
line-height: 1.2;
|
||||
}
|
||||
.delivery-prefs-sub {
|
||||
font-size: 10.5px !important;
|
||||
font-weight: 500 !important;
|
||||
color: #94a3b8 !important;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.55px;
|
||||
text-align: right;
|
||||
line-height: 1.2;
|
||||
}
|
||||
.delivery-prefs-row {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
.delivery-prefs-field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 5px;
|
||||
}
|
||||
.delivery-prefs-label {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
font-size: 10.5px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.55px;
|
||||
text-transform: uppercase;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
/* ---------- Pricing summary card ---------- */
|
||||
.pricing-summary-card {
|
||||
background: linear-gradient(135deg, #ffffff 0%, #fafbfc 100%) !important;
|
||||
border: 1px solid #eef2f6 !important;
|
||||
border-radius: 14px !important;
|
||||
padding: 14px 16px !important;
|
||||
}
|
||||
.pricing-header {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
margin-bottom: 10px;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 1px solid #f1f5f9;
|
||||
}
|
||||
.pricing-title {
|
||||
font-size: 14px !important;
|
||||
font-weight: 700 !important;
|
||||
color: #1e293b !important;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
.pricing-subtitle {
|
||||
font-size: 11px !important;
|
||||
font-weight: 500 !important;
|
||||
color: #94a3b8 !important;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.6px;
|
||||
}
|
||||
|
||||
/* ---------- Total charge badge ---------- */
|
||||
.total-charge-badge {
|
||||
background: linear-gradient(135deg, rgba(24, 144, 255, 0.08) 0%, rgba(101, 56, 122, 0.10) 100%);
|
||||
border: 1px solid rgba(101, 56, 122, 0.18);
|
||||
border-radius: 10px;
|
||||
padding: 10px 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
.total-charge-left {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
min-width: 0;
|
||||
}
|
||||
.total-charge-icon {
|
||||
font-size: 13px;
|
||||
color: #65387A;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.total-charge-label {
|
||||
font-size: 11.5px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.6px;
|
||||
color: #65387A;
|
||||
}
|
||||
.total-charge-val {
|
||||
font-size: 20px;
|
||||
font-weight: 800;
|
||||
color: #65387A;
|
||||
line-height: 1.1;
|
||||
letter-spacing: -0.01em;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* ---------- Gradient action button ---------- */
|
||||
.gradient-btn-create {
|
||||
background: linear-gradient(135deg, #1890ff 0%, #65387a 100%) !important;
|
||||
color: #ffffff !important;
|
||||
font-weight: 600 !important;
|
||||
font-size: 13px !important;
|
||||
letter-spacing: 0.01em !important;
|
||||
text-transform: none !important;
|
||||
border-radius: 10px !important;
|
||||
padding: 8px 18px !important;
|
||||
min-height: 38px !important;
|
||||
box-shadow: 0 4px 12px -3px rgba(24, 144, 255, 0.30),
|
||||
0 2px 4px rgba(101, 56, 122, 0.10) !important;
|
||||
transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
|
||||
border: none !important;
|
||||
display: inline-flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
gap: 8px !important;
|
||||
}
|
||||
.gradient-btn-create .MuiButton-startIcon,
|
||||
.gradient-btn-create .MuiButton-endIcon {
|
||||
margin: 0 !important;
|
||||
}
|
||||
.gradient-btn-create:hover {
|
||||
filter: brightness(1.04);
|
||||
box-shadow: 0 8px 18px -4px rgba(24, 144, 255, 0.40),
|
||||
0 3px 8px rgba(101, 56, 122, 0.18) !important;
|
||||
}
|
||||
.gradient-btn-create:active { filter: brightness(0.98); }
|
||||
.gradient-btn-create.Mui-disabled,
|
||||
.gradient-btn-create:disabled {
|
||||
background: #e2e8f0 !important;
|
||||
color: #94a3b8 !important;
|
||||
box-shadow: none !important;
|
||||
cursor: not-allowed !important;
|
||||
}
|
||||
|
||||
/* ---------- Compact header inputs (Location/Client/Business) ---------- */
|
||||
.header-compact-tf .MuiOutlinedInput-root {
|
||||
border-radius: 10px !important;
|
||||
height: 40px !important;
|
||||
padding-left: 10px !important;
|
||||
font-size: 12.5px !important;
|
||||
background: #ffffff;
|
||||
}
|
||||
.header-compact-tf .MuiOutlinedInput-input {
|
||||
padding-top: 6px !important;
|
||||
padding-bottom: 6px !important;
|
||||
font-size: 12.5px !important;
|
||||
}
|
||||
.header-compact-tf .MuiInputLabel-root {
|
||||
font-size: 11.5px !important;
|
||||
letter-spacing: 0.02em;
|
||||
font-weight: 600;
|
||||
color: #64748b !important;
|
||||
}
|
||||
.header-compact-tf .MuiInputLabel-shrink {
|
||||
transform: translate(12px, -7px) scale(0.82) !important;
|
||||
background: #ffffff;
|
||||
padding: 0 4px;
|
||||
}
|
||||
.header-compact-tf .MuiOutlinedInput-notchedOutline { border-color: #e2e8f0; }
|
||||
.header-compact-tf:hover .MuiOutlinedInput-notchedOutline { border-color: #cbd5e1; }
|
||||
.header-compact-tf .Mui-focused .MuiOutlinedInput-notchedOutline { border-width: 1.5px !important; }
|
||||
|
||||
.header-compact-input .MuiAutocomplete-endAdornment {
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
right: 8px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
height: auto;
|
||||
gap: 2px;
|
||||
}
|
||||
.header-compact-input .MuiAutocomplete-endAdornment .MuiSvgIcon-root {
|
||||
font-size: 16px;
|
||||
display: block;
|
||||
}
|
||||
.header-compact-input .MuiAutocomplete-clearIndicator,
|
||||
.header-compact-input .MuiAutocomplete-popupIndicator {
|
||||
padding: 3px !important;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #94a3b8 !important;
|
||||
}
|
||||
.header-compact-input .MuiAutocomplete-clearIndicator:hover,
|
||||
.header-compact-input .MuiAutocomplete-popupIndicator:hover {
|
||||
background: rgba(148, 163, 184, 0.12) !important;
|
||||
color: #475569 !important;
|
||||
}
|
||||
.header-compact-input .MuiAutocomplete-popupIndicator { margin-right: 0; }
|
||||
.header-compact-input .MuiOutlinedInput-root {
|
||||
padding-top: 0 !important;
|
||||
padding-bottom: 0 !important;
|
||||
padding-right: 60px !important;
|
||||
}
|
||||
.header-compact-input .MuiAutocomplete-input {
|
||||
padding: 4px 4px 4px 0 !important;
|
||||
height: auto !important;
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -97,7 +97,91 @@ import {
|
||||
// DeleteTwoTone
|
||||
} from '@ant-design/icons';
|
||||
import { enqueueSnackbar } from 'notistack';
|
||||
import {
|
||||
MdLocalShipping,
|
||||
MdHourglassEmpty,
|
||||
MdCheckCircle,
|
||||
MdCancel,
|
||||
MdAccessTime,
|
||||
MdHistoryToggleOff,
|
||||
MdAssignmentTurnedIn,
|
||||
MdEdit,
|
||||
MdArrowBack,
|
||||
MdReceiptLong
|
||||
} from 'react-icons/md';
|
||||
import { Paper, Box } from '@mui/material';
|
||||
|
||||
// ============================================================================
|
||||
// Design tokens — shared with the rest of the redesigned operator pages.
|
||||
// ============================================================================
|
||||
const DT = {
|
||||
radiusPill: 999,
|
||||
radiusCard: 16,
|
||||
shadowSoft: '0 14px 40px rgba(15, 23, 42, 0.10)',
|
||||
shadowMd: '0 8px 24px rgba(15, 23, 42, 0.08)',
|
||||
shadowPop: '0 18px 50px rgba(15, 23, 42, 0.18)',
|
||||
textPrimary: '#0f172a',
|
||||
textSecondary: '#64748b',
|
||||
textMuted: '#94a3b8',
|
||||
borderSubtle: '#e2e8f0',
|
||||
divider: '#f1f5f9',
|
||||
surface: '#ffffff',
|
||||
surfaceAlt: '#f8fafc'
|
||||
};
|
||||
const dtA = (c, suffix) => `${c}${suffix}`;
|
||||
const tint = (c) => dtA(c, '08');
|
||||
const soft = (c) => dtA(c, '18');
|
||||
const ring = (c) => dtA(c, '26');
|
||||
const edge = (c) => dtA(c, '55');
|
||||
|
||||
const BRAND = '#662582';
|
||||
const BRAND_LIGHT = '#9255AB';
|
||||
|
||||
// Semantic per-status palette — also drives StatusBadge.
|
||||
const STATUS_META = {
|
||||
pending: { label: 'Pending', color: '#f59e0b', icon: MdHourglassEmpty },
|
||||
assigned: { label: 'Assigned', color: '#0ea5e9', icon: MdAssignmentTurnedIn },
|
||||
confirmed: { label: 'Confirmed', color: '#10b981', icon: MdCheckCircle },
|
||||
modified: { label: 'Modified', color: '#06b6d4', icon: MdHistoryToggleOff },
|
||||
processing: { label: 'Processing', color: BRAND, icon: MdAccessTime },
|
||||
active: { label: 'Active', color: '#8b5cf6', icon: MdLocalShipping },
|
||||
closed: { label: 'Closed', color: '#06b6d4', icon: MdCheckCircle },
|
||||
completed: { label: 'Completed', color: '#10b981', icon: MdCheckCircle },
|
||||
cancelled: { label: 'Cancelled', color: '#ef4444', icon: MdCancel }
|
||||
};
|
||||
|
||||
const StatusBadge = ({ status, size = 'md' }) => {
|
||||
if (!status) return null;
|
||||
const meta = STATUS_META[String(status).toLowerCase()] || {
|
||||
label: status,
|
||||
color: DT.textMuted,
|
||||
icon: MdHistoryToggleOff
|
||||
};
|
||||
const Icon = meta.icon;
|
||||
const px = size === 'lg' ? 1.25 : 1;
|
||||
const py = size === 'lg' ? 0.5 : 0.375;
|
||||
const fs = size === 'lg' ? 12 : 11;
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
gap: 0.5,
|
||||
px,
|
||||
py,
|
||||
borderRadius: 999,
|
||||
bgcolor: tint(meta.color),
|
||||
border: `1px solid ${edge(meta.color)}`,
|
||||
color: meta.color,
|
||||
fontSize: fs,
|
||||
fontWeight: 800,
|
||||
whiteSpace: 'nowrap'
|
||||
}}
|
||||
>
|
||||
<Icon size={12} /> {meta.label}
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
const Details = () => {
|
||||
// const [searchParams] = useSearchParams();
|
||||
@@ -854,59 +938,105 @@ const Details = () => {
|
||||
open={open}
|
||||
onClose={() => handleClose(false)}
|
||||
maxWidth="xs"
|
||||
|
||||
PaperProps={{ sx: { borderRadius: 3 } }}
|
||||
>
|
||||
<DialogContent sx={{ mt: 2, my: 1 }}>
|
||||
<Stack alignItems="center" spacing={3.5}>
|
||||
<Avatar color="error" sx={{ width: 72, height: 72, fontSize: '1.75rem' }}>
|
||||
<Box
|
||||
sx={{
|
||||
p: 2.5,
|
||||
background: `linear-gradient(135deg, ${tint('#ef4444')} 0%, ${tint('#f59e0b')} 100%)`,
|
||||
borderBottom: `1px solid ${DT.borderSubtle}`
|
||||
}}
|
||||
>
|
||||
<Stack direction="row" alignItems="center" spacing={1.5}>
|
||||
<Avatar sx={{ bgcolor: '#ef4444', color: '#fff', width: 40, height: 40 }}>
|
||||
<DeleteFilled />
|
||||
</Avatar>
|
||||
<Grid >
|
||||
<Chip label={orderid.slice(4)} variant="combined" color='warning' size='small' />
|
||||
</Grid>
|
||||
<Stack spacing={2}>
|
||||
{/* <Typography variant="h4" align="center">
|
||||
Are you sure you want to cancel this order?
|
||||
</Typography> */}
|
||||
{(invoiceeligible) &&
|
||||
|
||||
|
||||
<Alert color="warning" variant="border" icon={<WarningFilled />}>
|
||||
<AlertTitle>Order is within 24Hrs time frame. The order will be invoiced with standard pricing as agreed.</AlertTitle>
|
||||
{/* <Typography variant="h6"> This is an warning alert.</Typography> */}
|
||||
<Link href='https://thelegendarystaff.com/' target='_blank' >Terms & Condition link</Link>
|
||||
</Alert>
|
||||
}
|
||||
<Typography variant="h4" align="center">
|
||||
Please type in the order number to confirm.
|
||||
<Stack>
|
||||
<Typography variant="h5" sx={{ fontWeight: 800, color: DT.textPrimary }}>
|
||||
Cancel Order
|
||||
</Typography>
|
||||
<Typography variant="caption" sx={{ color: DT.textSecondary, fontWeight: 600 }}>
|
||||
Confirm to permanently cancel this order
|
||||
</Typography>
|
||||
<TextField
|
||||
type='text'
|
||||
onChange={(e) => {
|
||||
console.log(e.target.value)
|
||||
setDeletepassword(e.target.value)
|
||||
}}
|
||||
error={deletepassword !== orderid.slice(4)}
|
||||
// error={true}
|
||||
value={deletepassword}
|
||||
/>
|
||||
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Box>
|
||||
<DialogContent sx={{ pt: 3 }}>
|
||||
<Stack alignItems="center" spacing={2.5}>
|
||||
<Box
|
||||
sx={{
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
gap: 0.5,
|
||||
px: 1.25,
|
||||
py: 0.5,
|
||||
borderRadius: 999,
|
||||
bgcolor: tint('#f59e0b'),
|
||||
border: `1px solid ${edge('#f59e0b')}`,
|
||||
color: '#f59e0b',
|
||||
fontSize: 12,
|
||||
fontWeight: 800
|
||||
}}
|
||||
>
|
||||
<MdReceiptLong size={12} /> {orderid.slice(4)}
|
||||
</Box>
|
||||
|
||||
<Stack direction="row" spacing={2} sx={{ width: 1 }}>
|
||||
<Button fullWidth color="error" variant="contained" onClick={() => {
|
||||
if (deletepassword === orderid.slice(4)) {
|
||||
cancelorder();
|
||||
handleClose(true);
|
||||
}
|
||||
{(invoiceeligible) &&
|
||||
<Alert color="warning" variant="border" icon={<WarningFilled />}>
|
||||
<AlertTitle>Order is within 24Hrs time frame. The order will be invoiced with standard pricing as agreed.</AlertTitle>
|
||||
<Link href='https://thelegendarystaff.com/' target='_blank' >Terms & Condition link</Link>
|
||||
</Alert>
|
||||
}
|
||||
|
||||
}} autoFocus>
|
||||
Yes, Cancel
|
||||
</Button>
|
||||
<Button fullWidth onClick={() => handleClose(false)} color="secondary" variant="outlined">
|
||||
<Typography variant="body1" align="center" sx={{ color: DT.textSecondary, fontWeight: 600 }}>
|
||||
Please type in the order number to confirm.
|
||||
</Typography>
|
||||
<TextField
|
||||
type="text"
|
||||
fullWidth
|
||||
onChange={(e) => setDeletepassword(e.target.value)}
|
||||
error={deletepassword !== orderid.slice(4)}
|
||||
value={deletepassword}
|
||||
placeholder={orderid.slice(4)}
|
||||
/>
|
||||
|
||||
<Stack direction="row" spacing={1.5} sx={{ width: 1 }}>
|
||||
<Button
|
||||
fullWidth
|
||||
onClick={() => handleClose(false)}
|
||||
variant="outlined"
|
||||
sx={{
|
||||
borderRadius: 999,
|
||||
py: 1,
|
||||
borderColor: DT.borderSubtle,
|
||||
color: DT.textSecondary,
|
||||
fontWeight: 700,
|
||||
'&:hover': { borderColor: DT.textSecondary, bgcolor: DT.surfaceAlt }
|
||||
}}
|
||||
>
|
||||
No
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
fullWidth
|
||||
variant="contained"
|
||||
autoFocus
|
||||
onClick={() => {
|
||||
if (deletepassword === orderid.slice(4)) {
|
||||
cancelorder();
|
||||
handleClose(true);
|
||||
}
|
||||
}}
|
||||
sx={{
|
||||
borderRadius: 999,
|
||||
py: 1,
|
||||
bgcolor: '#ef4444',
|
||||
fontWeight: 700,
|
||||
boxShadow: `0 6px 18px ${ring('#ef4444')}`,
|
||||
'&:hover': { bgcolor: '#dc2626' }
|
||||
}}
|
||||
>
|
||||
Yes, Cancel
|
||||
</Button>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</DialogContent>
|
||||
@@ -925,40 +1055,116 @@ const Details = () => {
|
||||
// fullScreen
|
||||
TransitionComponent={PopupTransition}>
|
||||
|
||||
<DialogTitle>
|
||||
<Stack direction={'row'} justifyContent={'space-between'}>
|
||||
<Stack direction={{ sm: 'row', xs: 'column' }} spacing={2} alignItems={'center'}>
|
||||
<Typography variant='h3'>Assign Roles</Typography>
|
||||
|
||||
<Chip label={clientname} variant="light" color="primary" />
|
||||
<DialogTitle
|
||||
sx={{
|
||||
background: `linear-gradient(135deg, ${tint(BRAND)} 0%, ${tint(BRAND_LIGHT)} 100%)`,
|
||||
borderBottom: `1px solid ${DT.borderSubtle}`,
|
||||
p: { xs: 2, sm: 2.5 }
|
||||
}}
|
||||
>
|
||||
<Stack direction={{ xs: 'column', sm: 'row' }} justifyContent="space-between" alignItems={{ xs: 'flex-start', sm: 'center' }} spacing={1.5}>
|
||||
<Stack direction="row" alignItems="center" spacing={1.5}>
|
||||
<Avatar sx={{ bgcolor: BRAND, color: '#fff', width: 40, height: 40, boxShadow: `0 6px 18px ${ring(BRAND)}` }}>
|
||||
<MdAssignmentTurnedIn size={20} />
|
||||
</Avatar>
|
||||
<Stack>
|
||||
<Typography variant="h4" sx={{ fontWeight: 800, color: DT.textPrimary, lineHeight: 1.1 }}>
|
||||
Assign Roles
|
||||
</Typography>
|
||||
<Typography variant="caption" sx={{ color: DT.textSecondary, fontWeight: 600 }}>
|
||||
{clientname} · {currentrole}
|
||||
</Typography>
|
||||
</Stack>
|
||||
</Stack>
|
||||
<Chip label={orderid} variant="combined" color='warning' size={'large'} />
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
gap: 0.5,
|
||||
px: 1.25,
|
||||
py: 0.5,
|
||||
borderRadius: 999,
|
||||
bgcolor: tint('#f59e0b'),
|
||||
border: `1px solid ${edge('#f59e0b')}`,
|
||||
color: '#f59e0b',
|
||||
fontSize: 12,
|
||||
fontWeight: 800
|
||||
}}
|
||||
>
|
||||
<MdReceiptLong size={12} /> {orderid}
|
||||
</Box>
|
||||
</Stack>
|
||||
<Grid container sx={{ p: 1 }} spacing={2}>
|
||||
|
||||
<Grid container sx={{ pt: 2 }} spacing={1.5}>
|
||||
<Grid item sm={6} xs={12}>
|
||||
|
||||
{/* <Chip label={currentrole} variant="combined" color="primary" size='normal' /> */}
|
||||
<Tabs
|
||||
value={tabstatus}
|
||||
// onChange={handleChangetab}
|
||||
onChange={() => setTabstatus((e) => (e === 0) ? 1 : 0)}
|
||||
variant="scrollable" scrollButtons="auto" >
|
||||
{/* <Tab label="All" /> */}
|
||||
<Tab label={currentrole} />
|
||||
</Tabs>
|
||||
<Box
|
||||
onClick={() => setTabstatus((e) => (e === 0 ? 1 : 0))}
|
||||
sx={{
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
gap: 0.75,
|
||||
px: 1.25,
|
||||
py: 0.625,
|
||||
borderRadius: 999,
|
||||
cursor: 'pointer',
|
||||
bgcolor: BRAND,
|
||||
color: '#fff',
|
||||
fontWeight: 800,
|
||||
fontSize: 12,
|
||||
boxShadow: `0 6px 18px ${ring(BRAND)}`
|
||||
}}
|
||||
>
|
||||
<Avatar sx={{ width: 22, height: 22, bgcolor: 'rgba(255,255,255,0.22)', color: '#fff' }}>
|
||||
<MdAssignmentTurnedIn size={12} />
|
||||
</Avatar>
|
||||
{currentrole || 'Role'}
|
||||
</Box>
|
||||
</Grid>
|
||||
<Grid item sm={6} xs={12}>
|
||||
<Stack direction={'row'} justifyContent={{ xs: 'flex-start', sm: 'flex-end' }}
|
||||
// alignItems={{xs:'flex-end',sm:'center'}}
|
||||
sx={{ height: '100%' }} spacing={2}>
|
||||
<Chip sx={{ width: '130px' }} label={`Required:${currentshiftobj.shifts}`} variant="combined" color='primary' size='normal' />
|
||||
<Chip sx={{ width: '130px' }} label={`Assigned: ${currentshiftobj.assigned}`} variant="combined" color='success' size='normal' />
|
||||
<Chip sx={{ width: '130px' }} label={`Remaining: ${currentshiftobj.remaining}`} variant="combined" color='error' size='normal' />
|
||||
|
||||
<Stack direction="row" justifyContent={{ xs: 'flex-start', sm: 'flex-end' }} spacing={1} flexWrap="wrap" useFlexGap>
|
||||
{[
|
||||
{ label: 'Required', value: currentshiftobj.shifts, color: BRAND },
|
||||
{ label: 'Assigned', value: currentshiftobj.assigned, color: '#10b981' },
|
||||
{ label: 'Remaining', value: currentshiftobj.remaining, color: '#ef4444' }
|
||||
].map((c) => (
|
||||
<Box
|
||||
key={c.label}
|
||||
sx={{
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
gap: 0.625,
|
||||
px: 1,
|
||||
py: 0.5,
|
||||
borderRadius: 999,
|
||||
bgcolor: tint(c.color),
|
||||
border: `1px solid ${edge(c.color)}`,
|
||||
color: c.color,
|
||||
fontSize: 11.5,
|
||||
fontWeight: 800
|
||||
}}
|
||||
>
|
||||
{c.label}
|
||||
<Box
|
||||
sx={{
|
||||
minWidth: 22,
|
||||
height: 18,
|
||||
px: 0.5,
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
borderRadius: 999,
|
||||
fontSize: 11,
|
||||
fontWeight: 800,
|
||||
bgcolor: '#fff',
|
||||
color: c.color,
|
||||
border: `1px solid ${edge(c.color)}`
|
||||
}}
|
||||
>
|
||||
{c.value ?? 0}
|
||||
</Box>
|
||||
</Box>
|
||||
))}
|
||||
</Stack>
|
||||
|
||||
</Grid>
|
||||
</Grid>
|
||||
</DialogTitle>
|
||||
@@ -1256,215 +1462,194 @@ const Details = () => {
|
||||
<Typography variant="h3">Details</Typography>
|
||||
</Grid> */}
|
||||
|
||||
<CardActions
|
||||
<Paper
|
||||
elevation={0}
|
||||
sx={{
|
||||
position: 'sticky',
|
||||
top: '60px',
|
||||
// top:0,
|
||||
bgcolor: theme.palette.background.default,
|
||||
zIndex: 1,
|
||||
// borderBottom: `1px solid ${theme.palette.divider}`,
|
||||
width: '100%'
|
||||
zIndex: 5,
|
||||
mb: 2,
|
||||
p: { xs: 1.5, sm: 2, md: 2.5 },
|
||||
borderRadius: DT.radiusCard / 8,
|
||||
border: '1px solid',
|
||||
borderColor: DT.borderSubtle,
|
||||
background: `linear-gradient(135deg, ${tint(BRAND)} 0%, ${tint(BRAND_LIGHT)} 100%)`,
|
||||
boxShadow: DT.shadowMd
|
||||
}}
|
||||
>
|
||||
<Grid item xs={12} >
|
||||
<Stack direction={{ md: 'row', xs: 'column' }} justifyContent="space-between" alignItems="flex-end"
|
||||
sx={{ width: '100%', p: 1 }}
|
||||
>
|
||||
|
||||
<Stack direction='row' spacing={2} alignItems='center'
|
||||
justifyContent='flex-start'
|
||||
sx={{ width: { xs: '100%', md: '0' } }}
|
||||
<Stack
|
||||
direction={{ xs: 'column', md: 'row' }}
|
||||
alignItems={{ xs: 'flex-start', md: 'center' }}
|
||||
justifyContent="space-between"
|
||||
spacing={{ xs: 1.5, md: 2 }}
|
||||
>
|
||||
<Stack direction="row" alignItems="center" spacing={{ xs: 1.25, sm: 1.75 }}>
|
||||
<IconButton
|
||||
onClick={() => history.back()}
|
||||
sx={{
|
||||
bgcolor: '#fff',
|
||||
border: `1px solid ${DT.borderSubtle}`,
|
||||
borderRadius: 999,
|
||||
color: DT.textPrimary,
|
||||
'&:hover': { bgcolor: tint(BRAND), borderColor: edge(BRAND), color: BRAND }
|
||||
}}
|
||||
>
|
||||
|
||||
<IconButton
|
||||
onClick={() => history.back()}
|
||||
// onClick={()=>}
|
||||
<MdArrowBack size={18} />
|
||||
</IconButton>
|
||||
<Avatar
|
||||
sx={{
|
||||
width: { xs: 40, sm: 48 },
|
||||
height: { xs: 40, sm: 48 },
|
||||
bgcolor: BRAND,
|
||||
color: '#fff',
|
||||
boxShadow: `0 6px 18px ${ring(BRAND)}`
|
||||
}}
|
||||
>
|
||||
<MdReceiptLong size={22} />
|
||||
</Avatar>
|
||||
<Stack>
|
||||
<Typography
|
||||
variant="h3"
|
||||
sx={{
|
||||
fontWeight: 800,
|
||||
color: DT.textPrimary,
|
||||
lineHeight: 1.1,
|
||||
fontSize: { xs: '1.25rem', sm: '1.5rem', md: '1.75rem' }
|
||||
}}
|
||||
>
|
||||
<ArrowBackIcon />
|
||||
</IconButton>
|
||||
{/* <Link to="/dashboard">Test me</Link> */}
|
||||
<Stack direction='column' alignItems='flex-start'>
|
||||
<Typography variant="h3">Details</Typography>
|
||||
<Stack direction="row" spacing={1}>
|
||||
{/* <Typography noWrap color="secondary"></Typography> */}
|
||||
<Chip label={(orderid === '') ? <Skeleton sx={{ width: '80px', bgcolor: '#fff9c4' }} animation="wave" /> : orderid} variant="combined" color='warning' size='small' />
|
||||
{/* <Typography variant="subtitle1">Date</Typography> */}
|
||||
{/* <Typography color="secondary">{orderdate}</Typography> */}
|
||||
<Chip label={(orderdate === '') ? <Skeleton sx={{ width: '80px', bgcolor: '#b3e5fc' }} animation="wave" /> : orderdate} variant="combined" color="primary" size='small' />
|
||||
|
||||
|
||||
|
||||
{(orderstatus === 'pending') &&
|
||||
|
||||
<Chip label="Pending" color="error" size="small" />
|
||||
}
|
||||
{(orderstatus === 'cancelled') &&
|
||||
|
||||
|
||||
<Chip label="Cancelled" color="secondary" size="small" />
|
||||
}
|
||||
{(orderstatus === 'completed') &&
|
||||
|
||||
<Chip label="Completed" color="primary" size="small" />
|
||||
}
|
||||
{(orderstatus === 'processing') &&
|
||||
<Chip label="Processing" color="primary" size="small" />
|
||||
}
|
||||
{(orderstatus === 'assigned') &&
|
||||
<Chip label="Assigned" color="warning" size="small" />
|
||||
}
|
||||
{(orderstatus === 'confirmed') &&
|
||||
<Chip label="Confirmed" color="success" size="small" />
|
||||
}
|
||||
|
||||
{(orderstatus === 'active') &&
|
||||
<Chip label="Active" color="info" size="small" />
|
||||
}
|
||||
{(orderstatus === 'closed') &&
|
||||
<Chip label="Closed" color="info" size="small" />
|
||||
}
|
||||
|
||||
{(orderstatus === 'modified') &&
|
||||
<Chip label="Modified"
|
||||
color='secondary' size="small" variant='contained' />
|
||||
}
|
||||
</Stack>
|
||||
</Stack>
|
||||
|
||||
</Stack>
|
||||
|
||||
|
||||
<Stack direction="row" spacing={2}
|
||||
sx={{ mt: { md: 0, xs: 2 } }}
|
||||
>
|
||||
|
||||
{/* <Typography>{dayjs(startdate).$d.toString()}</Typography> */}
|
||||
{/* <Typography>{startdate}</Typography> */}
|
||||
{/* <Typography> {dayjs().$d.toString()}</Typography> */}
|
||||
|
||||
{(((orderstatus === 'pending')
|
||||
|| (orderstatus === 'assigned')
|
||||
|| (orderstatus === 'confirmed')
|
||||
|| (orderstatus === 'modified'))
|
||||
|
||||
|
||||
// && (dayjs(startdate).$d > dayjs().$d)
|
||||
) &&
|
||||
|
||||
|
||||
<Tooltip title='Edit'>
|
||||
|
||||
<Button1
|
||||
variant="outlined"
|
||||
color="info"
|
||||
sx={{ borderRadius: '40px' }}
|
||||
startIcon={<BorderColorIcon color='info' />}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
// if (dayjs(startdate).$d > dayjs().$d) {
|
||||
if (dayjs(dayjs().format('MM-DD-YYYY')).isBefore(dayjs(dayjs(startdate).format('MM-DD-YYYY')))) {
|
||||
navigate(`/editorder`
|
||||
, {
|
||||
state: {
|
||||
orderheaderid: orderheaderid,
|
||||
tenantid: tenantid
|
||||
}
|
||||
}
|
||||
)
|
||||
} else {
|
||||
enqueueSnackbar('Order cannot be edited.\n Order date is not valid at this time',
|
||||
|
||||
{
|
||||
|
||||
variant: 'error', anchorOrigin: { vertical: 'top', horizontal: 'right' },
|
||||
autoHideDuration: 4000,
|
||||
style: { whiteSpace: "pre-line" }
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
}}
|
||||
>
|
||||
Edit Order
|
||||
</Button1>
|
||||
</Tooltip>
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
{/* {(((orderstatus === 'pending')
|
||||
|| (orderstatus === 'modified'))
|
||||
&& assignedpendingcount === 0) &&
|
||||
<>
|
||||
<Button1
|
||||
variant="outlined"
|
||||
color="primary"
|
||||
sx={{ borderRadius: '40px' }}
|
||||
startIcon={<SendIcon />}
|
||||
onClick={() => {
|
||||
fetchassignedstaffs();
|
||||
}}
|
||||
>
|
||||
Notify Staff
|
||||
</Button1>
|
||||
</>
|
||||
} */}
|
||||
{(orderstatus !== 'cancelled' && orderstatus !== '' && orderstatus !== 'completed' && orderstatus !== 'closed') &&
|
||||
<>
|
||||
<Button1
|
||||
variant="outlined"
|
||||
color="error"
|
||||
onClick={() => {
|
||||
console.log(dayjs(startdate).diff(dayjs(), 'm') / 60)
|
||||
if ((dayjs(startdate).diff(dayjs(), 'm') / 60) > 24) {
|
||||
setInvoiceeligible(false)
|
||||
setOpen(true)
|
||||
} else {
|
||||
setInvoiceeligible(true)
|
||||
setOpen(true)
|
||||
|
||||
}
|
||||
|
||||
}}
|
||||
sx={{ borderRadius: '40px', mt: { xs: 2, sm: 0 } }}
|
||||
startIcon={<CancelOutlinedIcon />}
|
||||
>
|
||||
Cancel Order
|
||||
</Button1>
|
||||
</>
|
||||
}
|
||||
{(orderstatus === 'cancelled') &&
|
||||
<>
|
||||
<Chip label={`Order Cancelled on ${cancelleddate}`} variant="combined" color='error' />
|
||||
</>
|
||||
}
|
||||
{/* {(orderstatus === 'completed') &&
|
||||
<Button
|
||||
variant="outlined"
|
||||
color="error"
|
||||
onClick={() => {
|
||||
navigate(`/invoice/create`, {
|
||||
state: {
|
||||
orderheaderid: orderheaderid,
|
||||
tenantid: tenantid
|
||||
}
|
||||
})
|
||||
|
||||
}
|
||||
}
|
||||
sx={{ borderRadius: '40px', mt: { xs: 2, sm: 0 } }}
|
||||
Order Details
|
||||
</Typography>
|
||||
<Stack direction="row" alignItems="center" spacing={0.75} flexWrap="wrap" useFlexGap sx={{ mt: 0.75 }}>
|
||||
<Box
|
||||
sx={{
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
gap: 0.5,
|
||||
px: 1,
|
||||
py: 0.375,
|
||||
borderRadius: 999,
|
||||
bgcolor: tint('#f59e0b'),
|
||||
border: `1px solid ${edge('#f59e0b')}`,
|
||||
color: '#f59e0b',
|
||||
fontSize: 11,
|
||||
fontWeight: 800
|
||||
}}
|
||||
>
|
||||
Raise Invoice
|
||||
</Button>
|
||||
} */}
|
||||
<MdReceiptLong size={11} />
|
||||
{orderid === '' ? <Skeleton sx={{ width: 80 }} animation="wave" /> : orderid}
|
||||
</Box>
|
||||
<Box
|
||||
sx={{
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
gap: 0.5,
|
||||
px: 1,
|
||||
py: 0.375,
|
||||
borderRadius: 999,
|
||||
bgcolor: tint(BRAND),
|
||||
border: `1px solid ${edge(BRAND)}`,
|
||||
color: BRAND,
|
||||
fontSize: 11,
|
||||
fontWeight: 800
|
||||
}}
|
||||
>
|
||||
<MdAccessTime size={11} />
|
||||
{orderdate === '' ? <Skeleton sx={{ width: 80 }} animation="wave" /> : orderdate}
|
||||
</Box>
|
||||
<StatusBadge status={orderstatus} />
|
||||
</Stack>
|
||||
</Stack>
|
||||
|
||||
|
||||
</Stack>
|
||||
</Grid>
|
||||
</CardActions>
|
||||
|
||||
<Stack direction="row" spacing={1.5} alignItems="center" flexWrap="wrap" useFlexGap>
|
||||
{((orderstatus === 'pending') ||
|
||||
(orderstatus === 'assigned') ||
|
||||
(orderstatus === 'confirmed') ||
|
||||
(orderstatus === 'modified')) && (
|
||||
<Tooltip title="Edit">
|
||||
<Button1
|
||||
variant="outlined"
|
||||
sx={{
|
||||
borderRadius: 999,
|
||||
borderColor: edge(BRAND),
|
||||
color: BRAND,
|
||||
fontWeight: 700,
|
||||
px: 2,
|
||||
'&:hover': { borderColor: BRAND, bgcolor: tint(BRAND), boxShadow: `0 0 0 3px ${ring(BRAND)}` }
|
||||
}}
|
||||
startIcon={<MdEdit size={16} />}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
if (dayjs(dayjs().format('MM-DD-YYYY')).isBefore(dayjs(dayjs(startdate).format('MM-DD-YYYY')))) {
|
||||
navigate(`/editorder`, {
|
||||
state: {
|
||||
orderheaderid: orderheaderid,
|
||||
tenantid: tenantid
|
||||
}
|
||||
});
|
||||
} else {
|
||||
enqueueSnackbar('Order cannot be edited.\n Order date is not valid at this time', {
|
||||
variant: 'error',
|
||||
anchorOrigin: { vertical: 'top', horizontal: 'right' },
|
||||
autoHideDuration: 4000,
|
||||
style: { whiteSpace: 'pre-line' }
|
||||
});
|
||||
}
|
||||
}}
|
||||
>
|
||||
Edit Order
|
||||
</Button1>
|
||||
</Tooltip>
|
||||
)}
|
||||
|
||||
{orderstatus !== 'cancelled' && orderstatus !== '' && orderstatus !== 'completed' && orderstatus !== 'closed' && (
|
||||
<Button1
|
||||
variant="outlined"
|
||||
sx={{
|
||||
borderRadius: 999,
|
||||
borderColor: edge('#ef4444'),
|
||||
color: '#ef4444',
|
||||
fontWeight: 700,
|
||||
px: 2,
|
||||
'&:hover': { borderColor: '#ef4444', bgcolor: tint('#ef4444'), boxShadow: `0 0 0 3px ${ring('#ef4444')}` }
|
||||
}}
|
||||
onClick={() => {
|
||||
if ((dayjs(startdate).diff(dayjs(), 'm') / 60) > 24) {
|
||||
setInvoiceeligible(false);
|
||||
setOpen(true);
|
||||
} else {
|
||||
setInvoiceeligible(true);
|
||||
setOpen(true);
|
||||
}
|
||||
}}
|
||||
startIcon={<CancelOutlinedIcon />}
|
||||
>
|
||||
Cancel Order
|
||||
</Button1>
|
||||
)}
|
||||
|
||||
{orderstatus === 'cancelled' && (
|
||||
<Box
|
||||
sx={{
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
gap: 0.5,
|
||||
px: 1.25,
|
||||
py: 0.5,
|
||||
borderRadius: 999,
|
||||
bgcolor: tint('#ef4444'),
|
||||
border: `1px solid ${edge('#ef4444')}`,
|
||||
color: '#ef4444',
|
||||
fontSize: 12,
|
||||
fontWeight: 800
|
||||
}}
|
||||
>
|
||||
<MdCancel size={12} /> Cancelled on {cancelleddate}
|
||||
</Box>
|
||||
)}
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Paper>
|
||||
|
||||
|
||||
{/* Dialog window */}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user