Doormile/doormile_console_expresscopy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

updated the ui for the mobile view

Browse Source
This commit is contained in:
Thiru-tenext
2026-06-09 13:12:18 +05:30
parent 8513c7c2ec
commit f18b680247
29 changed files with 3664 additions and 225 deletions
Download Patch File Download Diff File Expand all files Collapse all files

219
src/pages/nearle/clients/Tenants.js
View File

@@ -41,8 +41,10 @@ import {
TablePagination,
Skeleton,
Avatar,
Paper
Paper,
useMediaQuery
} from '@mui/material';
import { MobileCard, MobileCardList, MobileField, MobileFieldGrid } from 'components/nearle_components/MobileCard';
import {
EyeOutlined,
EyeInvisibleOutlined,
@@ -172,6 +174,7 @@ const Clients1 = () => {
const [rowsPerPage, setRowsPerPage] = React.useState(10);
// const [tenantList, settenantList] = useState([]);
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down('md'));
const [isloader, setisloader] = useState(false);
const [appId, setAppId] = useState(0);
const [locaName, setLocoName] = useState('');
@@ -886,6 +889,7 @@ const Clients1 = () => {
>
<TableContainer
sx={{
display: { xs: 'none', md: 'block' },
maxHeight: { xs: 'calc(100vh - 220px)', md: 'calc(100vh - 190px)' },
'&::-webkit-scrollbar': { width: '10px', height: '10px' },
'&::-webkit-scrollbar-thumb': {
@@ -1986,6 +1990,208 @@ const Clients1 = () => {
</TableBody>
</Table>
</TableContainer>
{/* ============================================= || Mobile cards (xs only) || ============================================= */}
{isMobile && (
<MobileCardList scroll sx={{ display: { xs: 'flex', md: 'none' } }}>
{getalltenantsIsLoading && (
<Stack alignItems="center" sx={{ py: 4 }}>
<Skeleton variant="rounded" width="100%" height={96} animation="wave" />
<Skeleton variant="rounded" width="100%" height={96} animation="wave" sx={{ mt: 1.25 }} />
</Stack>
)}
{tenantList?.length == 0 && !isloader ? (
<Stack alignItems="center" spacing={1.5} sx={{ py: 6 }}>
<Avatar sx={{ width: 64, height: 64, bgcolor: soft('#94a3b8'), color: DT.textMuted }}>
<MdGroups size={28} />
</Avatar>
<Typography variant="subtitle1" sx={{ fontWeight: 700, color: DT.textPrimary }}>
No tenants to show
</Typography>
<Typography variant="caption" sx={{ color: DT.textSecondary, textAlign: 'center' }}>
{`No ${activeTabMeta.label.toLowerCase()} tenants for this filter.`}
</Typography>
</Stack>
) : (
tenantList?.map((row, index) => {
const rowStatusKey = value0 === 0 ? 'active' : value0 === 1 ? 'pending' : 'inactive';
const rowStatusMeta = STATUS_META[rowStatusKey];
const RowStatusIcon = rowStatusMeta.icon;
const expanded = openRowIndex1 === index;
return (
<MobileCard
key={row.tenantid ?? index}
accent={rowStatusMeta.color}
header={
<Stack direction="row" alignItems="flex-start" justifyContent="space-between" spacing={1}>
<Stack direction="row" alignItems="center" spacing={1} sx={{ minWidth: 0 }}>
<AccentAvatar color="#6366f1" size={36}>
<MdPersonPin size={18} />
</AccentAvatar>
<Stack sx={{ minWidth: 0 }}>
<Typography variant="subtitle2" sx={{ fontWeight: 800, color: DT.textPrimary }} noWrap>
{row.tenantname}
</Typography>
<Stack
direction="row"
alignItems="center"
spacing={0.5}
sx={{
display: 'inline-flex',
mt: 0.25,
pl: 0.25,
pr: 0.875,
py: 0.125,
borderRadius: 999,
bgcolor: tint(rowStatusMeta.color),
border: `1px solid ${edge(rowStatusMeta.color)}`,
color: rowStatusMeta.color,
alignSelf: 'flex-start'
}}
>
<AccentAvatar color={rowStatusMeta.color} size={16}>
<RowStatusIcon size={10} />
</AccentAvatar>
<Typography sx={{ fontWeight: 800, fontSize: 10, lineHeight: 1 }}>
{rowStatusMeta.label}
</Typography>
</Stack>
</Stack>
</Stack>
<Stack direction="row" spacing={0.5} sx={{ flexShrink: 0 }}>
{value0 == 0 && (
<IconButton
size="small"
sx={{
bgcolor: soft('#ef4444'),
color: '#ef4444',
border: `1px solid ${edge('#ef4444')}`,
'&:hover': { bgcolor: '#ef4444', color: '#fff' }
}}
onClick={() => {
setSelectedCustomer(row);
setSelectedtenid(row.tenantid);
setAppId(row.applocationid);
setTimeout(() => {
tenantupdate(row.tenantid);
}, 100);
}}
>
<StopOutlined style={{ fontSize: 14 }} />
</IconButton>
)}
{value0 == 1 && (
<IconButton
size="small"
sx={{
bgcolor: soft('#f59e0b'),
color: '#f59e0b',
border: `1px solid ${edge('#f59e0b')}`,
'&:hover': { bgcolor: '#f59e0b', color: '#fff' }
}}
onClick={() => {
setSelectedCustomer(row);
setDialogopen(true);
setSelectedtenid(row.tenantid);
setAppId(row.applocationid);
getAppPricing(row.applolcationid);
}}
>
<IssuesCloseOutlined style={{ fontSize: 14 }} />
</IconButton>
)}
{value0 == 2 && (
<IconButton
size="small"
sx={{
bgcolor: soft('#10b981'),
color: '#10b981',
border: `1px solid ${edge('#10b981')}`,
'&:hover': { bgcolor: '#10b981', color: '#fff' }
}}
onClick={() => {
setSelectedCustomer(row);
setSelectedtenid(row.tenantid);
setAppId(row.applocationid);
setTimeout(() => {
tenantupdate(row.tenantid);
}, 100);
}}
>
<FaRegCheckCircle style={{ fontSize: 14 }} />
</IconButton>
)}
<IconButton
size="small"
sx={{
bgcolor: expanded ? '#6366f1' : soft('#6366f1'),
color: expanded ? '#fff' : '#6366f1',
border: `1px solid ${edge('#6366f1')}`,
'&:hover': { bgcolor: '#6366f1', color: '#fff' }
}}
onClick={() => {
setSelectedCustomer(row);
handleCollapseToggle1(index);
setOpenRowIndex2(-1);
setSelectedtenid(row.tenantid);
}}
>
{expanded ? <EyeInvisibleOutlined style={{ fontSize: 14 }} /> : <EyeOutlined style={{ fontSize: 14 }} />}
</IconButton>
{value0 !== 1 && (
<IconButton
size="small"
sx={{
bgcolor: soft('#8b5cf6'),
color: '#8b5cf6',
border: `1px solid ${edge('#8b5cf6')}`,
'&:hover': { bgcolor: '#8b5cf6', color: '#fff' }
}}
onClick={() => {
setSelectedCustomer(row);
setSelectedtenid(row.tenantid);
setAppId(row.applocationid);
getAppPricing(row.applolcationid);
setDialogopen(true);
}}
>
<EditOutlined style={{ fontSize: 14 }} />
</IconButton>
)}
</Stack>
</Stack>
}
>
<MobileFieldGrid>
<MobileField label="Tenant ID" value={`#${row.tenantid}`} />
<MobileField label="Contact" value={row.primarycontact || '—'} />
<MobileField label="Email" value={row.primaryemail || '—'} full />
<MobileField label="Address" full>
<Typography sx={{ fontSize: 13, fontWeight: 600, color: DT.textPrimary }}>
{row.address || '—'}
</Typography>
</MobileField>
</MobileFieldGrid>
{expanded && (
<Box sx={{ mt: 1.25, pt: 1.25, borderTop: `1px solid ${DT.divider}` }}>
<MobileFieldGrid>
<MobileField label="Contact Person" value={row.firstname || '—'} />
<MobileField label="City" value={row.city || '—'} />
<MobileField label="Postcode" value={row.postcode || '—'} />
<MobileField label="Latitude" value={row.latitude || '—'} />
<MobileField label="Longitude" value={row.longitude || '—'} />
</MobileFieldGrid>
</Box>
)}
</MobileCard>
);
})
)}
</MobileCardList>
)}
{/* ============================================= || Pagination| ============================================= */}
{!searchword && tenantList?.length > 0 && (
<>
@@ -2003,7 +2209,16 @@ const Clients1 = () => {
)}
</Paper>
{/* // ==============================||( Client Pricing ) dialog (dialogopen) ||============================== // */}
<Dialog fullWidth={true} open={dialogopen} onClose={dialogclose} scroll={'paper'} maxWidth="sm" TransitionComponent={PopupTransition}>
<Dialog
fullWidth={true}
fullScreen={isMobile}
open={dialogopen}
onClose={dialogclose}
scroll={'paper'}
maxWidth="sm"
TransitionComponent={PopupTransition}
PaperProps={{ sx: { borderRadius: { xs: 0, sm: 3 } } }}
>
<DialogTitle
sx={{
bgcolor: '#662582',

18
src/pages/nearle/clients/createCustomer.js
View File

@@ -1,6 +1,6 @@
import { React, useEffect, useState, useRef } from 'react';
import { useTheme } from '@mui/material/styles';
import { Button, Grid, InputLabel, MenuItem, Select, Stack, TextField, Typography, IconButton, Autocomplete } from '@mui/material';
import { Button, Grid, InputLabel, MenuItem, Select, Stack, TextField, Typography, IconButton, Autocomplete, useMediaQuery } from '@mui/material';
import MainCard from 'components/MainCard';
import axios from 'axios';
import Loader from 'components/Loader';
@@ -12,6 +12,8 @@ import LocationAutocomplete from 'components/nearle_components/LocationAutocompl
import { OpenToast } from 'components/third-party/OpenToast';
const CreateCustomer = () => {
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down('md'));
const [appId, setAppId] = useState(0);
const locationRef = useRef(null);
const [mobilenumber, setMobilenumber] = useState('');
@@ -268,10 +270,10 @@ const CreateCustomer = () => {
<Typography variant="h3">Create Customer</Typography>
</Stack>
</Grid>
<MainCard>
<Grid container spacing={3}>
<MainCard sx={{ p: { xs: 1.5, md: 3 } }}>
<Grid container spacing={{ xs: 2, md: 3 }}>
<Grid item xs={12}>
<Grid container spacing={3}>
<Grid container spacing={{ xs: 2, md: 3 }}>
{/* ===================================================== || Choose location || ===================================================== */}
<Grid item xs={12} md={6}>
<LocationAutocomplete ref={locationRef} locaName={locaName} setAppId={setAppId} setLocoName={setLocoName} sx={{}} />
@@ -491,9 +493,15 @@ const CreateCustomer = () => {
</Grid>
</Grid>
<Grid item xs={12}>
<Stack direction="row" justifyContent="flex-end" alignItems="center" spacing={2}>
<Stack
direction={{ xs: 'column', sm: 'row' }}
justifyContent="flex-end"
alignItems={{ xs: 'stretch', sm: 'center' }}
spacing={2}
>
<Button
variant="contained"
fullWidth={isMobile}
onClick={() => {
if (appId === '') {
opentoast('Select Applocation ');

19
src/pages/nearle/clients/createclient.js
View File

@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react';
// material-ui
import { useTheme } from '@mui/material/styles';
import { Box, Button, FormLabel, Grid, InputLabel, MenuItem, Select, Stack, TextField, Typography } from '@mui/material';
import { Box, Button, FormLabel, Grid, InputLabel, MenuItem, Select, Stack, TextField, Typography, useMediaQuery } from '@mui/material';
// third-party
// import { PatternFormat } from 'react-number-format';
@@ -32,6 +32,7 @@ import { useNavigate } from 'react-router';
const Createclient = () => {
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down('md'));
// const [role, setRole] = useState('');
const [mobilenumber, setMobilenumber] = useState('');
const [emailaddress, setEmailaddress] = useState('');
@@ -299,8 +300,8 @@ const Createclient = () => {
<Typography variant="h3">Create Client</Typography>
</Stack>
</Grid>
<MainCard>
<Grid container spacing={3}>
<MainCard contentSX={{ p: { xs: 1.5, md: 3 } }}>
<Grid container spacing={isMobile ? 2 : 3}>
{/* <Grid item xs={12} sm={4} >
<MainCard title="Personal Information" sx={{ height: '100%' }}>
<Grid container spacing={3}>
@@ -396,8 +397,9 @@ const Createclient = () => {
<MainCard
// title="Contact Information"
sx={{ height: '100%' }}
contentSX={{ p: { xs: 1.5, md: 2.5 } }}
>
<Grid container spacing={3}>
<Grid container spacing={isMobile ? 2 : 3}>
{/* <Grid item xs={12} sm={6}>
<Stack spacing={1.25}>
<InputLabel htmlFor="personal-first-name">Business Name</InputLabel>
@@ -589,8 +591,13 @@ const Createclient = () => {
</MainCard>
</Grid>
<Grid item xs={12}>
<Stack direction="row" justifyContent="flex-end" alignItems="center" spacing={2}>
<Button variant="contained" onClick={() => createprofile()}>
<Stack
direction={{ xs: 'column', sm: 'row' }}
justifyContent="flex-end"
alignItems={{ xs: 'stretch', sm: 'center' }}
spacing={2}
>
<Button variant="contained" onClick={() => createprofile()} fullWidth={isMobile}>
Create
</Button>
</Stack>