updated the ui for the mobile view
This commit is contained in:
@@ -29,8 +29,11 @@ import {
|
||||
CircularProgress,
|
||||
DialogTitle,
|
||||
FormLabel,
|
||||
DialogActions
|
||||
DialogActions,
|
||||
useMediaQuery,
|
||||
useTheme
|
||||
} from '@mui/material';
|
||||
import { MobileCard, MobileCardList, MobileField, MobileFieldGrid } from 'components/nearle_components/MobileCard';
|
||||
|
||||
import { Autocomplete as Autocomplete1 } from '@mui/material';
|
||||
import { PlusOutlined, DeleteOutlined } from '@ant-design/icons';
|
||||
@@ -178,6 +181,8 @@ const Requests = () => {
|
||||
};
|
||||
|
||||
function EnhancedTable() {
|
||||
const theme = useTheme();
|
||||
const isMobile = useMediaQuery(theme.breakpoints.down('md'));
|
||||
const [order, setOrder] = React.useState('asc');
|
||||
const [orderBy, setOrderBy] = React.useState('calories');
|
||||
const [selected, setSelected] = React.useState([]);
|
||||
@@ -741,9 +746,10 @@ const Requests = () => {
|
||||
open={dialogopen}
|
||||
onClose={dialogclose}
|
||||
scroll={'paper'}
|
||||
// fullScreen
|
||||
fullScreen={isMobile}
|
||||
maxWidth="sm"
|
||||
TransitionComponent={PopupTransition}
|
||||
PaperProps={{ sx: { borderRadius: { xs: 0, sm: 3 } } }}
|
||||
>
|
||||
<DialogTitle>Create Request</DialogTitle>
|
||||
|
||||
@@ -892,7 +898,77 @@ const Requests = () => {
|
||||
width: '100%'
|
||||
}}
|
||||
>
|
||||
<TableContainer sx={{ width: '100%', borderBottom: 1, borderColor: 'divider' }}>
|
||||
{isMobile && (
|
||||
<MobileCardList scroll>
|
||||
{loading &&
|
||||
[0, 1, 2, 3, 4].map((item) => (
|
||||
<MobileCard key={item} accent="#662582">
|
||||
<Stack direction="row" alignItems="center" spacing={1}>
|
||||
<Skeleton variant="circular" width={32} height={32} />
|
||||
<Stack sx={{ flex: 1 }}>
|
||||
<Skeleton animation="wave" width="60%" />
|
||||
<Skeleton animation="wave" width="40%" />
|
||||
</Stack>
|
||||
</Stack>
|
||||
<MobileFieldGrid>
|
||||
<MobileField label="Amount" value={<Skeleton animation="wave" width={50} />} />
|
||||
<MobileField label="Ref No" value={<Skeleton animation="wave" width={50} />} />
|
||||
</MobileFieldGrid>
|
||||
</MobileCard>
|
||||
))}
|
||||
|
||||
{!loading &&
|
||||
visibleRows.map((row, index) => {
|
||||
const isItemSelected = isSelected(row.sno);
|
||||
return (
|
||||
<MobileCard
|
||||
key={row.sno}
|
||||
accent="#662582"
|
||||
selected={isItemSelected}
|
||||
onClick={(event) => handleClick(event, row.sno)}
|
||||
header={
|
||||
<Stack direction="row" alignItems="center" justifyContent="space-between" spacing={1}>
|
||||
<Stack direction="row" alignItems="center" spacing={1} sx={{ minWidth: 0 }}>
|
||||
<Avatar sx={{ width: 32, height: 32, bgcolor: '#66258218', color: '#662582', fontSize: 13 }}>
|
||||
{row.requestor ? String(row.requestor).charAt(0).toUpperCase() : '#'}
|
||||
</Avatar>
|
||||
<Stack sx={{ minWidth: 0 }}>
|
||||
<Typography sx={{ fontSize: 14, fontWeight: 700, color: '#0f172a' }} noWrap>
|
||||
{row.requestor || '—'}
|
||||
</Typography>
|
||||
<Typography sx={{ fontSize: 11, color: '#94a3b8' }} noWrap>
|
||||
#{row.sno}
|
||||
</Typography>
|
||||
</Stack>
|
||||
</Stack>
|
||||
{row.amount != null && (
|
||||
<Chip label={row.amount} size="small" sx={{ bgcolor: '#66258218', color: '#662582', fontWeight: 700 }} />
|
||||
)}
|
||||
</Stack>
|
||||
}
|
||||
>
|
||||
<MobileFieldGrid>
|
||||
<MobileField label="Bank" value={row.bankname} />
|
||||
<MobileField label="Account No" value={row.accountno} />
|
||||
<MobileField label="IFSC" value={row.ifsccode} />
|
||||
<MobileField label="Ref No" value={row.referenceno} />
|
||||
<MobileField label="Reason" value={row.reason} full />
|
||||
</MobileFieldGrid>
|
||||
</MobileCard>
|
||||
);
|
||||
})}
|
||||
|
||||
{!loading && visibleRows.length === 0 && (
|
||||
<Stack alignItems="center" spacing={1.5} sx={{ py: 6 }}>
|
||||
<Avatar sx={{ width: 64, height: 64, bgcolor: '#f1f5f9', color: '#94a3b8' }} />
|
||||
<Typography sx={{ fontSize: 15, fontWeight: 700, color: '#0f172a' }}>No requests to show</Typography>
|
||||
<Typography sx={{ fontSize: 13, color: '#94a3b8' }}>Requests will appear here once available.</Typography>
|
||||
</Stack>
|
||||
)}
|
||||
</MobileCardList>
|
||||
)}
|
||||
|
||||
<TableContainer sx={{ width: '100%', borderBottom: 1, borderColor: 'divider', display: isMobile ? 'none' : 'block' }}>
|
||||
<Table sx={{ minWidth: 750 }} aria-labelledby="tableTitle" size={'medium'}>
|
||||
<EnhancedTableHead
|
||||
numSelected={selected.length}
|
||||
@@ -1727,6 +1803,8 @@ const Requests = () => {
|
||||
);
|
||||
}
|
||||
|
||||
const outerTheme = useTheme();
|
||||
const isMobile = useMediaQuery(outerTheme.breakpoints.down('md'));
|
||||
const [tabvalue, setTabvalue] = useState(0);
|
||||
const [rows, setRows] = useState([]);
|
||||
const [clientapproved, setClientApproved] = useState([]);
|
||||
@@ -1860,10 +1938,16 @@ const Requests = () => {
|
||||
xs={12}
|
||||
// sx={{ mb: -2.25 }}
|
||||
>
|
||||
<Stack direction="row" justifyContent="space-between" alignItems="center">
|
||||
<Stack
|
||||
direction={{ xs: 'column', sm: 'row' }}
|
||||
justifyContent="space-between"
|
||||
alignItems={{ xs: 'stretch', sm: 'center' }}
|
||||
spacing={{ xs: 1.5, sm: 0 }}
|
||||
>
|
||||
<Typography variant="h3">Payment Requests</Typography>
|
||||
<Button
|
||||
variant="contained"
|
||||
fullWidth={isMobile}
|
||||
onClick={() => {
|
||||
// setDialogopen(true)
|
||||
}}
|
||||
@@ -1882,8 +1966,6 @@ const Requests = () => {
|
||||
> */}
|
||||
|
||||
<Stack
|
||||
// direction={{xs:'column',md:'row'}}
|
||||
// alignItems={{xs:'flex-end',md:'center'}}
|
||||
alignItems="center"
|
||||
justifyContent="space-between"
|
||||
direction="row"
|
||||
@@ -1891,7 +1973,9 @@ const Requests = () => {
|
||||
// borderBottom: 1, borderColor: 'divider',
|
||||
p: 2,
|
||||
// m:2,
|
||||
width: '100%'
|
||||
width: '100%',
|
||||
flexWrap: 'wrap',
|
||||
gap: 1
|
||||
}}
|
||||
>
|
||||
<Tabs value={tabvalue} onChange={handleChangetab} variant="scrollable" scrollButtons="auto">
|
||||
@@ -1908,7 +1992,7 @@ const Requests = () => {
|
||||
/>
|
||||
</Tabs>
|
||||
|
||||
<FormControl sx={{ width: 250, display: { xs: 'none', md: 'flex' } }}>
|
||||
<FormControl sx={{ width: { xs: '100%', md: 250 } }}>
|
||||
<OutlinedInput
|
||||
size="small"
|
||||
id="header-search"
|
||||
|
||||
Reference in New Issue
Block a user