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

updates on the ui changes regarding the padding and margins on the all pages such as dashboard clients surveys pricing matrix and booking more

Browse Source
This commit is contained in:
dharaneesh-r
2026-07-14 17:18:21 +05:30
parent 808d4a2fdb
commit fd1f6bdd67
7 changed files with 60 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/pages/Dashboard.jsx
View File

@@ -41,7 +41,7 @@ function Panel({ icon: Icon, title, action, color = 'primary', noPadding = false
<Stack
direction="row" spacing={1.5} alignItems="center"
sx={{
px: { xs: 2, sm: 3 }, py: 2, borderBottom: 1, borderColor: 'divider',
px: { xs: 2, sm: 2.5 }, py: 2, borderBottom: 1, borderColor: 'divider',
background: (theme) => `linear-gradient(90deg, ${theme.palette[color].lighter}66 0%, transparent 100%)`
}}
>
@@ -124,9 +124,7 @@ export default function Dashboard() {
{error && <Alert severity="error" sx={{ mb: 2.5 }} action={<Button color="inherit" size="small" onClick={load}>Retry</Button>}>{error}</Alert>}
<Grid container spacing={3}>
<Grid container spacing={2.5}>
<Grid item xs={12} sm={6} lg={3}><StatCard accent title="Total Clients" value={stats.total} icon={ApartmentOutlinedIcon} color="primary" caption="All registered" /></Grid>
<Grid item xs={12} sm={6} lg={3}><StatCard accent title="New Clients" value={stats.newCount} icon={FiberNewOutlinedIcon} color="primary" caption="Awaiting onboarding" /></Grid>
<Grid item xs={12} sm={6} lg={3}><StatCard accent title="Total Parcel Volume" value={stats.parcels.toLocaleString('en-IN')} icon={Inventory2OutlinedIcon} color="primary" caption="Across all clients" /></Grid>
@@ -200,7 +198,7 @@ export default function Dashboard() {
{byType.length === 0 ? (
<EmptyState title="No data" />
) : (
<Stack spacing={2.25}>
<Stack spacing={2}>
{byType.map(([type, count], i) => (
<Box key={type}>
<Stack direction="row" justifyContent="space-between" alignItems="center" sx={{ mb: 0.75 }}>
@@ -231,7 +229,7 @@ export default function Dashboard() {
) : (
<Stack divider={<Divider />} spacing={0}>
{team.slice(0, 6).map((u) => (
<Stack key={u.id} direction="row" spacing={1.5} alignItems="center" sx={{ py: 1.25 }}>
<Stack key={u.id} direction="row" spacing={1.5} alignItems="center" sx={{ py: 1.5 }}>
<UserAvatar name={u.name} size={36} />
<Box sx={{ flexGrow: 1, minWidth: 0 }}>
<Typography variant="subtitle2" sx={{ fontWeight: 600 }}>{u.name}</Typography>

8
src/pages/Settings.jsx
View File

@@ -71,7 +71,7 @@ function Section({ icon: Icon, title, subtitle, color = 'primary', danger = fals
<Stack
direction="row" spacing={1.75} alignItems="center"
sx={{
px: { xs: 2, sm: 3 }, py: 2.25, borderBottom: 1, borderColor: 'divider',
px: { xs: 2, sm: 3 }, py: 2, borderBottom: 1, borderColor: 'divider',
background: (theme) => `linear-gradient(90deg, ${theme.palette[color].lighter}66 0%, ${theme.palette.background.paper} 72%)`
}}
>
@@ -170,7 +170,7 @@ export default function Settings() {
{/* Sidebar */}
<Grid item xs={12} md={3}>
<Stack spacing={2.5} sx={{ position: { md: 'sticky' }, top: { md: 88 } }}>
<Card sx={{ p: 1.5 }}>
<Card sx={{ p: 2 }}>
<Typography variant="overline" sx={{ px: 1, color: 'text.secondary', fontWeight: 700, letterSpacing: 0.6 }}>Preferences</Typography>
<Stack spacing={0.25} sx={{ mt: 0.5 }}>
{NAV.map((item, i) => {
@@ -182,7 +182,7 @@ export default function Settings() {
direction="row" spacing={1.5} alignItems="center"
onClick={() => setTab(i)}
sx={{
px: 1.5, py: 1.25, borderRadius: 2, cursor: 'pointer', position: 'relative',
px: 1.5, py: 1.5, borderRadius: 2, cursor: 'pointer', position: 'relative',
bgcolor: active ? 'primary.lighter' : 'transparent',
transition: 'background-color .15s',
'&:hover': { bgcolor: active ? 'primary.lighter' : 'grey.50' },
@@ -203,7 +203,7 @@ export default function Settings() {
</Stack>
</Card>
<Card sx={{ p: 2.5, bgcolor: 'primary.lighter', borderColor: 'primary.100' }}>
<Card sx={{ p: 2, bgcolor: 'primary.lighter', borderColor: 'primary.100' }}>
<Stack spacing={1.25}>
<Box sx={{ width: 38, height: 38, borderRadius: 2, bgcolor: 'primary.main', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
<HelpOutlineRoundedIcon fontSize="small" />

6
src/pages/bookings/Bookings.jsx
View File

@@ -310,7 +310,7 @@ function BookingFormDialog({ open, onClose, onSave, clients, surveys }) {
</Box>
{formData.parcels.map((parcel, idx) => (
<Grid container spacing={1.5} key={idx} sx={{ mb: 2, alignItems: 'center' }}>
<Grid container spacing={2} key={idx} sx={{ mb: 2, alignItems: 'center' }}>
<Grid item xs={12} sm={3}>
<TextField fullWidth label="Category (e.g. Box)" value={parcel.itemcategory} onChange={handleParcelChange(idx, 'itemcategory')} size="small" />
</Grid>
@@ -334,7 +334,7 @@ function BookingFormDialog({ open, onClose, onSave, clients, surveys }) {
</Grid>
))}
<Box sx={{ display: 'flex', gap: 2, alignItems: 'center', mt: 2, mb: 1 }}>
<Box sx={{ display: 'flex', gap: 2, alignItems: 'center', mb: 1 }}>
<Typography variant="subtitle1" sx={{ fontWeight: 700, color: 'primary.main' }}>Price & Insurance</Typography>
<Button size="small" variant="outlined" onClick={handleCheckPrice}>Check Price Estimate</Button>
</Box>
@@ -402,7 +402,7 @@ function BookingFormDialog({ open, onClose, onSave, clients, surveys }) {
</Grid>
</DialogContent>
<DialogActions sx={{ p: 2 }}>
<DialogActions sx={{ px: 3, py: 2 }}>
<Button onClick={onClose} disabled={saving}>Cancel</Button>
<Button variant="contained" onClick={handleSave} disabled={saving || !formData.customer_phone} sx={{ bgcolor: 'primary.main', '&:hover': { bgcolor: 'primary.dark' } }}>
{saving ? 'Creating...' : 'Create Booking'}

25
src/pages/pricing/Pricing.jsx
View File

@@ -15,6 +15,7 @@ import LocalShippingOutlinedIcon from '@mui/icons-material/LocalShippingOutlined
import PlaceOutlinedIcon from '@mui/icons-material/PlaceOutlined';
import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
import PriceCheckOutlinedIcon from '@mui/icons-material/PriceCheckOutlined';
import PageHeader from '@/components/PageHeader';
import { fetchUsers } from '@/utils/apiClient';
@@ -197,7 +198,7 @@ function PricingFormDialog({ open, onClose, onSave, initialData, isCell = false,
</Grid>
</Grid>
</DialogContent>
<DialogActions sx={{ p: 2, bgcolor: 'grey.50' }}>
<DialogActions sx={{ px: 3, py: 2 }}>
<Button onClick={onClose} disabled={saving} color="inherit">Cancel</Button>
<Button onClick={handleSave} disabled={saving} variant="contained">
{saving ? 'Saving...' : 'Save Rate'}
@@ -313,7 +314,23 @@ export default function Pricing() {
{/* Control Panel */}
<Card sx={{ overflow: 'hidden' }}>
<Stack direction={{ xs: 'column', md: 'row' }} spacing={2} sx={{ p: 2 }} alignItems={{ md: 'center' }}>
<Box
sx={{
px: { xs: 2, sm: 2.5 }, py: 2, borderBottom: 1, borderColor: 'divider',
display: 'flex', alignItems: 'center', gap: 1.5,
background: (theme) => `linear-gradient(90deg, ${theme.palette.primary.lighter}66 0%, ${theme.palette.background.paper} 70%)`
}}
>
<Box sx={{ width: 40, height: 40, borderRadius: 2, bgcolor: 'primary.lighter', color: 'primary.main', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>
<PriceCheckOutlinedIcon fontSize="small" />
</Box>
<Box>
<Typography variant="subtitle1" sx={{ fontWeight: 700, color: 'grey.800', lineHeight: 1.2 }}>Pricing Matrix</Typography>
<Typography variant="caption" color="text.secondary">Manage carrier rates by weight slab and zone</Typography>
</Box>
</Box>
<Stack direction={{ xs: 'column', md: 'row' }} spacing={1.5} sx={{ p: 2 }} alignItems={{ md: 'center' }}>
<TextField
size="small"
placeholder="Search weight slabs…"
@@ -418,8 +435,8 @@ export default function Pricing() {
</Stack>
<Collapse in={locationsOpen} timeout="auto" unmountOnExit>
<Box sx={{ p: 2, pt: 0, borderTop: '1px dashed', borderColor: 'grey.200', bgcolor: 'grey.50' }}>
<Box sx={{ display: 'flex', alignItems: 'center', mb: 1.5, mt: 2 }}>
<Box sx={{ p: 2, borderTop: '1px dashed', borderColor: 'grey.200', bgcolor: 'grey.50' }}>
<Box sx={{ display: 'flex', alignItems: 'center', mb: 1.5 }}>
<PlaceOutlinedIcon sx={{ color: 'primary.main', fontSize: 20, mr: 1 }} />
<Typography variant="caption" sx={{ color: 'grey.600', fontWeight: 700, letterSpacing: 1 }}>ALL SERVICED AREAS:</Typography>
</Box>

8
src/pages/survey/Survey.jsx
View File

@@ -59,7 +59,7 @@ function SectionCard({ icon: Icon, title, children }) {
<Icon sx={{ fontSize: 18, color: 'primary.main' }} />
<Typography variant="overline" sx={{ fontWeight: 700, color: 'grey.800', letterSpacing: 0.6, lineHeight: 1 }}>{title}</Typography>
</Stack>
<Stack spacing={2} sx={{ p: 2 }}>{children}</Stack>
<Stack spacing={1.75} sx={{ p: 2 }}>{children}</Stack>
</Box>
);
}
@@ -371,7 +371,7 @@ function SurveyFormDialog({ open, onClose, onSave, initialData }) {
</Grid>
</Grid>
</DialogContent>
<DialogActions sx={{ p: 2, bgcolor: 'grey.50' }}>
<DialogActions sx={{ px: 3, py: 2 }}>
<Button onClick={onClose} disabled={saving} color="inherit">Cancel</Button>
<Button onClick={handleSave} disabled={saving} variant="contained">
{saving ? 'Saving...' : 'Save Record'}
@@ -388,7 +388,7 @@ function BranchCard({ row, onEdit, onDelete, users }) {
const updater = users.find(u => u.id === row.updated_by);
return (
<Box sx={{ p: 1.5, py: 1.25, borderRadius: 2, border: '1px solid', borderColor: 'divider', bgcolor: 'background.paper', transition: 'border-color 0.2s ease, box-shadow 0.2s ease', '&:hover': { borderColor: 'primary.main', boxShadow: '0 4px 12px rgba(192, 18, 39, 0.05)' } }}>
<Box sx={{ p: 2, borderRadius: 2, border: '1px solid', borderColor: 'divider', bgcolor: 'background.paper', transition: 'border-color 0.2s ease, box-shadow 0.2s ease', '&:hover': { borderColor: 'primary.main', boxShadow: '0 4px 12px rgba(192, 18, 39, 0.05)' } }}>
<Grid
container
spacing={2}
@@ -457,7 +457,7 @@ function BranchCard({ row, onEdit, onDelete, users }) {
</Grid>
<Collapse in={open} timeout="auto" unmountOnExit>
<Box sx={{ mt: 2.5, pt: 2.5, borderTop: '1px dashed', borderColor: 'divider' }}>
<Box sx={{ mt: 2, pt: 2, borderTop: '1px dashed', borderColor: 'divider' }}>
<Grid container spacing={2} alignItems="stretch">
<Grid item xs={12} md={4}>
<SectionCard icon={StorefrontOutlinedIcon} title="ENQUIRY DETAILS">

27
src/pages/team/TeamUsers.jsx
View File

@@ -3,7 +3,7 @@ import {
Card, Stack, Button, TextField, InputAdornment, Box, Tabs, Tab, Chip, Link,
Table, TableBody, TableCell, TableContainer, TableHead, TableRow, IconButton,
TablePagination, Typography, CircularProgress, Alert, Tooltip, Divider, useMediaQuery,
Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions
Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions, Grid
} from '@mui/material';
import { useTheme } from '@mui/material/styles';
import SearchIcon from '@mui/icons-material/Search';
@@ -21,6 +21,7 @@ import ManageAccountsOutlinedIcon from '@mui/icons-material/ManageAccountsOutlin
import PersonOutlineOutlinedIcon from '@mui/icons-material/PersonOutlineOutlined';
import PageHeader from '@/components/PageHeader';
import StatCard from '@/components/StatCard';
import StatusChip from '@/components/StatusChip';
import EmptyState from '@/components/EmptyState';
import UserAvatar from '@/components/UserAvatar';
@@ -85,7 +86,7 @@ function RoleCell({ role }) {
// Mobile presentation of a user row — a self-contained card instead of a wide table row.
function UserCard({ row, index, onEdit, onDelete }) {
return (
<Box sx={{ p: 1.75, borderRadius: 3, border: 1, borderColor: 'divider', bgcolor: 'background.paper' }}>
<Box sx={{ p: 2, borderRadius: 3, border: 1, borderColor: 'divider', bgcolor: 'background.paper' }}>
<Stack direction="row" spacing={1.25} alignItems="flex-start">
<Box sx={{ flexGrow: 1, minWidth: 0 }}>
<UserIdentity name={row.name} email={row.email} role={row.role} />
@@ -165,6 +166,15 @@ export default function TeamUsers() {
return c;
}, [users]);
const roleCounts = useMemo(() => {
const c = { admin: 0, manager: 0, rep: 0, support: 0 };
users.forEach((u) => {
const role = String(u.role || '').toLowerCase();
if (role in c) c[role] += 1;
});
return c;
}, [users]);
const filtered = useMemo(
() =>
users.filter((u) => {
@@ -206,10 +216,17 @@ export default function TeamUsers() {
}
/>
<Grid container spacing={2.5} sx={{ mb: 3 }}>
<Grid item xs={12} sm={6} lg={3}><StatCard accent title="Total Users" value={users.length} icon={GroupsOutlinedIcon} color="primary" caption="All console members" /></Grid>
<Grid item xs={12} sm={6} lg={3}><StatCard accent title="Admins" value={roleCounts.admin} icon={AdminPanelSettingsOutlinedIcon} color="primary" caption="Full access" /></Grid>
<Grid item xs={12} sm={6} lg={3}><StatCard accent title="Managers" value={roleCounts.manager} icon={ManageAccountsOutlinedIcon} color="primary" caption="Team oversight" /></Grid>
<Grid item xs={12} sm={6} lg={3}><StatCard accent title="Reps & Support" value={roleCounts.rep + roleCounts.support} icon={SupportAgentOutlinedIcon} color="primary" caption="Frontline staff" /></Grid>
</Grid>
<Card sx={{ overflow: 'hidden' }}>
<Box
sx={{
px: { xs: 1.75, sm: 2.5 }, py: 2, borderBottom: 1, borderColor: 'divider',
px: { xs: 2, sm: 2.5 }, py: 2, borderBottom: 1, borderColor: 'divider',
display: 'flex', alignItems: 'center', gap: 1.5,
background: (theme) => `linear-gradient(90deg, ${theme.palette.primary.lighter}66 0%, ${theme.palette.background.paper} 70%)`
}}
@@ -223,7 +240,7 @@ export default function TeamUsers() {
</Box>
</Box>
<Stack direction={{ xs: 'column', md: 'row' }} spacing={1.5} sx={{ p: { xs: 1.5, sm: 2 } }} alignItems={{ md: 'center' }}>
<Stack direction={{ xs: 'column', md: 'row' }} spacing={1.5} sx={{ p: 2 }} alignItems={{ md: 'center' }}>
<TextField
size="small" placeholder="Search by name, email, phone…" value={search} onChange={(e) => { setSearch(e.target.value); setPage(0); }}
sx={{ width: { xs: '100%', md: 300 } }}
@@ -255,7 +272,7 @@ export default function TeamUsers() {
) : paged.length === 0 ? (
<EmptyState title="No team users found" caption="Try a different role or search term, or add a user." />
) : isMobile ? (
<Stack spacing={1.25} sx={{ p: { xs: 1.5, sm: 2 } }}>
<Stack spacing={1.5} sx={{ p: 2 }}>
{paged.map((row, i) => (
<UserCard
key={row.id}

4
src/pages/tenants/Tenants.jsx
View File

@@ -140,7 +140,7 @@ function ClientDetail({ row, onEdit }) {
alignItems={{ xs: 'flex-start', sm: 'center' }}
spacing={1.5}
sx={{
px: 2.5, py: 1.75, borderBottom: 1, borderColor: 'divider',
px: { xs: 2, sm: 2.5 }, py: 2, borderBottom: 1, borderColor: 'divider',
background: (theme) => `linear-gradient(90deg, ${theme.palette.primary.lighter}88 0%, ${theme.palette.background.paper} 75%)`
}}
>
@@ -528,7 +528,7 @@ export default function Tenants() {
<Card sx={{ overflow: 'hidden' }}>
<Box
sx={{
px: 2.5, py: 2, borderBottom: 1, borderColor: 'divider',
px: { xs: 2, sm: 2.5 }, py: 2, borderBottom: 1, borderColor: 'divider',
display: 'flex', alignItems: 'center', gap: 1.5,
background: (theme) => `linear-gradient(90deg, ${theme.palette.primary.lighter}66 0%, ${theme.palette.background.paper} 70%)`
}}