updated the ui for the mobile view
This commit is contained in:
@@ -5,6 +5,7 @@ import * as XLSX from 'xlsx';
|
||||
import dayjs from 'dayjs';
|
||||
import { useNavigate } from 'react-router';
|
||||
import { useTheme } from '@mui/material/styles';
|
||||
import useMediaQuery from '@mui/material/useMediaQuery';
|
||||
import { enqueueSnackbar } from 'notistack';
|
||||
|
||||
import {
|
||||
@@ -65,6 +66,7 @@ import { MdOutlineCloudUpload } from 'react-icons/md';
|
||||
import Loader from 'components/Loader';
|
||||
import CircularLoader from 'components/CircularLoader';
|
||||
import AnimateButton from 'components/@extended/AnimateButton';
|
||||
import { MobileCard, MobileCardList, MobileField, MobileFieldGrid } from 'components/nearle_components/MobileCard';
|
||||
import './OrdersRedesign.css';
|
||||
|
||||
var utc = require('dayjs/plugin/utc');
|
||||
@@ -88,6 +90,7 @@ const cellBodySx = {
|
||||
const MultipleOrders = () => {
|
||||
const navigate = useNavigate();
|
||||
const theme = useTheme();
|
||||
const isMobile = useMediaQuery(theme.breakpoints.down('md'));
|
||||
const locationRef = useRef(null);
|
||||
const tenantRef = useRef(null);
|
||||
const userid = localStorage.getItem('userid');
|
||||
@@ -711,11 +714,12 @@ const MultipleOrders = () => {
|
||||
<Box
|
||||
className="orders-workspace-bg"
|
||||
sx={{
|
||||
height: 'calc(100vh - 64px)',
|
||||
height: { xs: 'auto', md: 'calc(100vh - 64px)' },
|
||||
minHeight: { xs: 'calc(100vh - 64px)', md: 0 },
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
overflow: 'hidden',
|
||||
p: { xs: 1, sm: 1.25 },
|
||||
overflow: { xs: 'visible', md: 'hidden' },
|
||||
p: { xs: 0.75, sm: 1.25 },
|
||||
gap: 1
|
||||
}}
|
||||
>
|
||||
@@ -752,7 +756,7 @@ const MultipleOrders = () => {
|
||||
<Grid
|
||||
container
|
||||
spacing={1.25}
|
||||
sx={{ flex: 1, minHeight: 0, overflow: 'hidden' }}
|
||||
sx={{ flex: 1, minHeight: 0, overflow: { xs: 'visible', md: 'hidden' } }}
|
||||
>
|
||||
{/* ============================== LEFT 50% : Input fields ============================== */}
|
||||
<Grid
|
||||
@@ -760,13 +764,13 @@ const MultipleOrders = () => {
|
||||
xs={12}
|
||||
md={6}
|
||||
sx={{
|
||||
height: '100%',
|
||||
height: { xs: 'auto', md: '100%' },
|
||||
minHeight: 0,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: 2.25,
|
||||
overflowY: 'auto',
|
||||
pr: 0.75
|
||||
gap: { xs: 1.25, md: 2.25 },
|
||||
overflowY: { xs: 'visible', md: 'auto' },
|
||||
pr: { xs: 0, md: 0.75 }
|
||||
}}
|
||||
>
|
||||
{/* Card: Setup (Location / Client / Business) */}
|
||||
@@ -1283,7 +1287,7 @@ const MultipleOrders = () => {
|
||||
item
|
||||
xs={12}
|
||||
md={6}
|
||||
sx={{ height: '100%', minHeight: 0, display: 'flex', flexDirection: 'column' }}
|
||||
sx={{ height: { xs: 'auto', md: '100%' }, minHeight: 0, display: 'flex', flexDirection: 'column' }}
|
||||
>
|
||||
<Card
|
||||
className="orders-card"
|
||||
@@ -1293,7 +1297,7 @@ const MultipleOrders = () => {
|
||||
flexDirection: 'column',
|
||||
overflow: 'hidden',
|
||||
p: 1.25,
|
||||
maxHeight: 685
|
||||
maxHeight: { xs: 'none', md: 685 }
|
||||
}}
|
||||
>
|
||||
{/* Preview header (sticky inside card) */}
|
||||
@@ -1483,7 +1487,101 @@ const MultipleOrders = () => {
|
||||
|
||||
{/* Scrollable preview body */}
|
||||
<Box sx={{ flex: 1, minHeight: 0, overflow: 'auto' }}>
|
||||
{previewMode === 'drops' && (
|
||||
{previewMode === 'drops' && isMobile && (
|
||||
<MobileCardList sx={{ p: 0 }}>
|
||||
{dropCust.map((customer, index) => (
|
||||
<MobileCard
|
||||
key={customer.customerid || customer.firstname || index}
|
||||
accent="#65387a"
|
||||
header={
|
||||
<Stack direction="row" alignItems="flex-start" justifyContent="space-between" spacing={1}>
|
||||
<Box sx={{ minWidth: 0, flex: 1 }}>
|
||||
<Typography sx={{ fontSize: 14, fontWeight: 700, color: '#1e293b', lineHeight: 1.2 }}>
|
||||
{index + 1}. {customer.firstname}
|
||||
</Typography>
|
||||
<Typography sx={{ fontSize: 12, color: '#64748b', mt: 0.25 }}>
|
||||
{customer.address}
|
||||
</Typography>
|
||||
</Box>
|
||||
<Tooltip title="Remove">
|
||||
<IconButton
|
||||
size="small"
|
||||
onClick={() => handleCheckboxChange1(customer)}
|
||||
sx={{ color: '#ef4444', p: 0.5, flexShrink: 0 }}
|
||||
>
|
||||
<CloseOutlined style={{ fontSize: 14 }} />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
</Stack>
|
||||
}
|
||||
>
|
||||
<MobileFieldGrid columns={2}>
|
||||
<MobileField label="Qty">
|
||||
{uploadType === 0 ? (
|
||||
<Typography sx={{ fontSize: 13, fontWeight: 600, color: '#0f172a' }}>
|
||||
{customer.quantity ?? '—'}
|
||||
</Typography>
|
||||
) : (
|
||||
<TextField
|
||||
size="small"
|
||||
type="number"
|
||||
value={customer.quantity || ''}
|
||||
onChange={(e) => handleQuantityChange(customer.customerid, e.target.value)}
|
||||
inputProps={{ min: 0 }}
|
||||
fullWidth
|
||||
sx={{ '& .MuiOutlinedInput-root': { borderRadius: '8px', height: 34 } }}
|
||||
/>
|
||||
)}
|
||||
</MobileField>
|
||||
<MobileField label="Cash">
|
||||
{uploadType === 0 ? (
|
||||
<Typography sx={{ fontSize: 13, fontWeight: 600, color: '#0f172a' }}>
|
||||
{`₹${Number(customer.collectionamt || 0).toFixed(2)}`}
|
||||
</Typography>
|
||||
) : (
|
||||
<TextField
|
||||
size="small"
|
||||
type="number"
|
||||
value={customer.collectionamt ? customer.collectionamt : ''}
|
||||
placeholder="0"
|
||||
onChange={(e) => {
|
||||
const v = Number(e.target.value);
|
||||
handleCollectionAmtChange(customer.customerid, v > 0 ? v : 0);
|
||||
}}
|
||||
inputProps={{ min: 0 }}
|
||||
InputProps={{
|
||||
startAdornment: <InputAdornment position="start">₹</InputAdornment>
|
||||
}}
|
||||
fullWidth
|
||||
sx={{ '& .MuiOutlinedInput-root': { borderRadius: '8px', height: 34 } }}
|
||||
/>
|
||||
)}
|
||||
</MobileField>
|
||||
<MobileField label="Km" value={customer.distance} />
|
||||
<MobileField label="Charge" align="right">
|
||||
<Typography sx={{ fontSize: 13, fontWeight: 700, color: '#1e293b' }}>
|
||||
₹{Number(customer?.totalcharge || 0).toFixed(2)}
|
||||
</Typography>
|
||||
</MobileField>
|
||||
</MobileFieldGrid>
|
||||
</MobileCard>
|
||||
))}
|
||||
<MobileCard accent="#65387a" sx={{ bgcolor: '#fafbfc' }}>
|
||||
<MobileFieldGrid columns={2}>
|
||||
<MobileField label="Total Qty" value={totalQty} />
|
||||
<MobileField label="Total Cash" value={`₹${Number(totalCash).toFixed(2)}`} />
|
||||
<MobileField label="Total Km" value={totaldist} />
|
||||
<MobileField label="Total Charge" align="right">
|
||||
<Typography sx={{ fontSize: 14, fontWeight: 800, color: '#65387a' }}>
|
||||
₹{Number(totalAmt).toFixed(2)}
|
||||
</Typography>
|
||||
</MobileField>
|
||||
</MobileFieldGrid>
|
||||
</MobileCard>
|
||||
</MobileCardList>
|
||||
)}
|
||||
|
||||
{previewMode === 'drops' && !isMobile && (
|
||||
<TableContainer
|
||||
component={Paper}
|
||||
sx={{ borderRadius: '10px', border: '1px solid #eef2f6', boxShadow: 'none' }}
|
||||
@@ -1604,7 +1702,37 @@ const MultipleOrders = () => {
|
||||
</TableContainer>
|
||||
)}
|
||||
|
||||
{previewMode === 'preview' && (
|
||||
{previewMode === 'preview' && isMobile && (
|
||||
<MobileCardList sx={{ p: 0 }}>
|
||||
{users.map((u, i) => (
|
||||
<MobileCard
|
||||
key={i}
|
||||
accent="#d97706"
|
||||
header={
|
||||
<Box sx={{ minWidth: 0 }}>
|
||||
<Typography sx={{ fontSize: 14, fontWeight: 700, color: '#1e293b', lineHeight: 1.2 }}>
|
||||
{i + 1}. {u.firstname || '—'}
|
||||
</Typography>
|
||||
<Typography sx={{ fontSize: 12, color: '#64748b', mt: 0.25 }}>
|
||||
{u.address || '—'}
|
||||
</Typography>
|
||||
</Box>
|
||||
}
|
||||
>
|
||||
<MobileFieldGrid columns={2}>
|
||||
<MobileField label="Contact" value={u.contactno || '—'} />
|
||||
<MobileField label="Qty" value={u.quantity ?? '—'} />
|
||||
<MobileField
|
||||
label="Cash"
|
||||
value={u.collectionamt != null ? `₹${Number(u.collectionamt).toFixed(2)}` : '—'}
|
||||
/>
|
||||
</MobileFieldGrid>
|
||||
</MobileCard>
|
||||
))}
|
||||
</MobileCardList>
|
||||
)}
|
||||
|
||||
{previewMode === 'preview' && !isMobile && (
|
||||
<TableContainer
|
||||
component={Paper}
|
||||
sx={{ borderRadius: '10px', border: '1px solid #eef2f6', boxShadow: 'none' }}
|
||||
@@ -1819,9 +1947,10 @@ const MultipleOrders = () => {
|
||||
open={isCustomerOpen}
|
||||
onClose={() => setIsCustomerOpen(false)}
|
||||
fullWidth
|
||||
fullScreen={isMobile}
|
||||
sx={{
|
||||
'& .MuiDialog-paper': {
|
||||
borderRadius: '16px',
|
||||
borderRadius: { xs: 0, sm: '16px' },
|
||||
overflow: 'hidden'
|
||||
}
|
||||
}}
|
||||
@@ -1863,7 +1992,7 @@ const MultipleOrders = () => {
|
||||
</Stack>
|
||||
</DialogTitle>
|
||||
<Divider />
|
||||
<DialogContent sx={{ p: 2.5, bgcolor: '#fafbfc', minHeight: 400, maxHeight: 600 }}>
|
||||
<DialogContent sx={{ p: 2.5, bgcolor: '#fafbfc', minHeight: 400, maxHeight: { xs: 'none', sm: 600 } }}>
|
||||
{customerlist?.length === 0 ? (
|
||||
<Stack alignItems="center" justifyContent="center" sx={{ minHeight: 300 }}>
|
||||
<Empty description="No saved customers found for this client" />
|
||||
|
||||
Reference in New Issue
Block a user