361 lines
19 KiB
JavaScript
361 lines
19 KiB
JavaScript
import { useState } from 'react';
|
|
import {
|
|
Grid, Card, Box, Stack, TextField, MenuItem, Switch, Button, Typography, Divider,
|
|
Snackbar, Alert, Chip, IconButton, InputAdornment, LinearProgress, Avatar
|
|
} from '@mui/material';
|
|
import SaveOutlinedIcon from '@mui/icons-material/SaveOutlined';
|
|
import TuneOutlinedIcon from '@mui/icons-material/TuneOutlined';
|
|
import NotificationsNoneIcon from '@mui/icons-material/NotificationsNone';
|
|
import LockOutlinedIcon from '@mui/icons-material/LockOutlined';
|
|
import ShieldOutlinedIcon from '@mui/icons-material/ShieldOutlined';
|
|
import CampaignOutlinedIcon from '@mui/icons-material/CampaignOutlined';
|
|
import BusinessOutlinedIcon from '@mui/icons-material/BusinessOutlined';
|
|
import VerifiedOutlinedIcon from '@mui/icons-material/VerifiedOutlined';
|
|
import WarningAmberRoundedIcon from '@mui/icons-material/WarningAmberRounded';
|
|
import HelpOutlineRoundedIcon from '@mui/icons-material/HelpOutlineRounded';
|
|
import LogoutOutlinedIcon from '@mui/icons-material/LogoutOutlined';
|
|
import ChevronRightIcon from '@mui/icons-material/ChevronRight';
|
|
import Visibility from '@mui/icons-material/Visibility';
|
|
import VisibilityOff from '@mui/icons-material/VisibilityOff';
|
|
|
|
import PageHeader from '@/components/PageHeader';
|
|
|
|
const TIMEZONES = ['Asia/Kolkata (IST)', 'Asia/Dubai (GST)', 'UTC', 'America/New_York (EST)'];
|
|
const LANGUAGES = ['English', 'हिन्दी (Hindi)', 'العربية (Arabic)'];
|
|
|
|
const INITIAL_GENERAL = {
|
|
orgName: 'Doormile Technologies',
|
|
supportEmail: 'support@doormile.in',
|
|
contact: '+91 63749 46729',
|
|
timezone: TIMEZONES[0],
|
|
language: LANGUAGES[0]
|
|
};
|
|
const INITIAL_NOTIFY = {
|
|
newClient: true, contractStatus: true, teamAccess: false, databaseSync: true, emailAlerts: true, smsAlerts: false
|
|
};
|
|
const INITIAL_SECURITY = { currentPassword: '', newPassword: '', confirmPassword: '', twoFactor: false };
|
|
|
|
const NAV = [
|
|
{ icon: TuneOutlinedIcon, label: 'General', desc: 'Organisation profile' },
|
|
{ icon: NotificationsNoneIcon, label: 'Notifications', desc: 'Alerts & channels' },
|
|
{ icon: LockOutlinedIcon, label: 'Security', desc: 'Password & 2FA' }
|
|
];
|
|
|
|
const NOTIFY_ROWS = [
|
|
{ k: 'newClient', t: 'New client onboarded', d: 'Notify when a new client is added to the system' },
|
|
{ k: 'contractStatus', t: 'Contract status', d: 'When a client contract becomes active or expires' },
|
|
{ k: 'teamAccess', t: 'Team access', d: 'When a new team member is granted or revoked access' },
|
|
{ k: 'databaseSync', t: 'Database sync', d: 'Alerts for vector database synchronization events' }
|
|
];
|
|
|
|
const STRENGTH = [
|
|
{ label: 'Too weak', color: 'error' },
|
|
{ label: 'Weak', color: 'error' },
|
|
{ label: 'Fair', color: 'warning' },
|
|
{ label: 'Good', color: 'info' },
|
|
{ label: 'Strong', color: 'success' }
|
|
];
|
|
const scorePassword = (pw) => {
|
|
let s = 0;
|
|
if (pw.length >= 8) s++;
|
|
if (/[a-z]/.test(pw) && /[A-Z]/.test(pw)) s++;
|
|
if (/\d/.test(pw)) s++;
|
|
if (/[^A-Za-z0-9]/.test(pw)) s++;
|
|
return s;
|
|
};
|
|
|
|
// Section surface with a tinted icon header band.
|
|
function Section({ icon: Icon, title, subtitle, color = 'primary', danger = false, children }) {
|
|
return (
|
|
<Card sx={danger ? { borderColor: 'error.light' } : undefined}>
|
|
<Stack
|
|
direction="row" spacing={1.75} alignItems="center"
|
|
sx={{
|
|
px: { xs: 2, sm: 3 }, py: 2.25, borderBottom: 1, borderColor: 'divider',
|
|
background: (theme) => `linear-gradient(90deg, ${theme.palette[color].lighter}66 0%, ${theme.palette.background.paper} 72%)`
|
|
}}
|
|
>
|
|
<Box sx={{ width: 40, height: 40, borderRadius: 2, flexShrink: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', bgcolor: `${color}.lighter`, color: `${color}.main` }}>
|
|
<Icon fontSize="small" />
|
|
</Box>
|
|
<Box sx={{ minWidth: 0 }}>
|
|
<Typography variant="subtitle1" sx={{ fontWeight: 700, color: 'grey.800', lineHeight: 1.3 }}>{title}</Typography>
|
|
{subtitle && <Typography variant="caption" color="text.secondary">{subtitle}</Typography>}
|
|
</Box>
|
|
</Stack>
|
|
<Box sx={{ px: { xs: 2, sm: 3 } }}>{children}</Box>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
// Two-column row: label + helper on the left, control on the right.
|
|
function Row({ label, description, children, align = 'center' }) {
|
|
return (
|
|
<Grid
|
|
container spacing={2} alignItems={align}
|
|
sx={{ py: 2.5, borderRadius: 2, transition: 'background-color .15s', '&:hover': { bgcolor: 'grey.50' } }}
|
|
>
|
|
<Grid item xs={12} sm={5}>
|
|
<Typography variant="subtitle2" sx={{ fontWeight: 600, color: 'grey.800' }}>{label}</Typography>
|
|
{description && <Typography variant="caption" color="text.secondary">{description}</Typography>}
|
|
</Grid>
|
|
<Grid item xs={12} sm={7}>{children}</Grid>
|
|
</Grid>
|
|
);
|
|
}
|
|
|
|
const rightAlign = { display: 'flex', justifyContent: { sm: 'flex-end' } };
|
|
|
|
function PasswordField({ label, value, onChange, autoComplete }) {
|
|
const [show, setShow] = useState(false);
|
|
return (
|
|
<TextField
|
|
fullWidth size="small" type={show ? 'text' : 'password'} label={label} value={value} onChange={onChange} autoComplete={autoComplete}
|
|
InputProps={{
|
|
endAdornment: (
|
|
<InputAdornment position="end">
|
|
<IconButton onClick={() => setShow((s) => !s)} edge="end" size="small">
|
|
{show ? <VisibilityOff fontSize="small" /> : <Visibility fontSize="small" />}
|
|
</IconButton>
|
|
</InputAdornment>
|
|
)
|
|
}}
|
|
/>
|
|
);
|
|
}
|
|
|
|
export default function Settings() {
|
|
const [tab, setTab] = useState(0);
|
|
const [toast, setToast] = useState(false);
|
|
const [dirty, setDirty] = useState(false);
|
|
|
|
const [general, setGeneral] = useState(INITIAL_GENERAL);
|
|
const [notify, setNotify] = useState(INITIAL_NOTIFY);
|
|
const [security, setSecurity] = useState(INITIAL_SECURITY);
|
|
|
|
const setG = (k) => (e) => { setGeneral((p) => ({ ...p, [k]: e.target.value })); setDirty(true); };
|
|
const setN = (k) => (e) => { setNotify((p) => ({ ...p, [k]: e.target.checked })); setDirty(true); };
|
|
const setSText = (k) => (e) => { setSecurity((p) => ({ ...p, [k]: e.target.value })); setDirty(true); };
|
|
|
|
const save = () => { setToast(true); setDirty(false); };
|
|
const discard = () => {
|
|
setGeneral(INITIAL_GENERAL);
|
|
setNotify(INITIAL_NOTIFY);
|
|
setSecurity(INITIAL_SECURITY);
|
|
setDirty(false);
|
|
};
|
|
|
|
const pwScore = scorePassword(security.newPassword);
|
|
const pwMeta = STRENGTH[pwScore];
|
|
const mismatch = security.confirmPassword && security.newPassword !== security.confirmPassword;
|
|
|
|
return (
|
|
<>
|
|
<PageHeader
|
|
title="Settings"
|
|
breadcrumbs={[{ label: 'Settings' }]}
|
|
action={
|
|
<Stack
|
|
direction="row" spacing={1.5} alignItems="center" useFlexGap flexWrap="wrap"
|
|
sx={{ width: { xs: '100%', sm: 'auto' }, justifyContent: { xs: 'flex-start', sm: 'flex-end' } }}
|
|
>
|
|
{dirty && <Chip size="small" label="Unsaved changes" sx={{ bgcolor: 'warning.lighter', color: 'warning.dark', fontWeight: 600 }} />}
|
|
<Button variant="outlined" onClick={discard} sx={{ flex: { xs: 1, sm: 'none' } }}>Discard</Button>
|
|
<Button variant="contained" startIcon={<SaveOutlinedIcon />} onClick={save} sx={{ flex: { xs: 1, sm: 'none' } }}>Save Changes</Button>
|
|
</Stack>
|
|
}
|
|
/>
|
|
|
|
<Grid container spacing={2.5}>
|
|
{/* Sidebar */}
|
|
<Grid item xs={12} md={3}>
|
|
<Stack spacing={2.5} sx={{ position: { md: 'sticky' }, top: { md: 88 } }}>
|
|
<Card sx={{ p: 1.5 }}>
|
|
<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) => {
|
|
const active = tab === i;
|
|
const Icon = item.icon;
|
|
return (
|
|
<Stack
|
|
key={item.label}
|
|
direction="row" spacing={1.5} alignItems="center"
|
|
onClick={() => setTab(i)}
|
|
sx={{
|
|
px: 1.5, py: 1.25, borderRadius: 2, cursor: 'pointer', position: 'relative',
|
|
bgcolor: active ? 'primary.lighter' : 'transparent',
|
|
transition: 'background-color .15s',
|
|
'&:hover': { bgcolor: active ? 'primary.lighter' : 'grey.50' },
|
|
'&::before': active ? { content: '""', position: 'absolute', left: 0, top: 9, bottom: 9, width: 3, borderRadius: 3, bgcolor: 'primary.main' } : {}
|
|
}}
|
|
>
|
|
<Box sx={{ width: 34, height: 34, borderRadius: 1.5, flexShrink: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', bgcolor: active ? 'primary.main' : 'grey.100', color: active ? '#fff' : 'grey.600' }}>
|
|
<Icon fontSize="small" />
|
|
</Box>
|
|
<Box sx={{ flexGrow: 1, minWidth: 0 }}>
|
|
<Typography variant="subtitle2" sx={{ fontWeight: 600, color: active ? 'primary.main' : 'grey.800' }}>{item.label}</Typography>
|
|
<Typography variant="caption" color="text.secondary">{item.desc}</Typography>
|
|
</Box>
|
|
<ChevronRightIcon sx={{ fontSize: 18, color: active ? 'primary.main' : 'grey.300' }} />
|
|
</Stack>
|
|
);
|
|
})}
|
|
</Stack>
|
|
</Card>
|
|
|
|
<Card sx={{ p: 2.5, 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" />
|
|
</Box>
|
|
<Box>
|
|
<Typography variant="subtitle2" sx={{ fontWeight: 700, color: 'primary.dark' }}>Need a hand?</Typography>
|
|
<Typography variant="caption" sx={{ color: 'primary.dark', opacity: 0.85 }}>Our team is available 24/7 for operational support.</Typography>
|
|
</Box>
|
|
<Button size="small" variant="contained" sx={{ alignSelf: 'flex-start' }}>Contact support</Button>
|
|
</Stack>
|
|
</Card>
|
|
</Stack>
|
|
</Grid>
|
|
|
|
{/* Content */}
|
|
<Grid item xs={12} md={9}>
|
|
{tab === 0 && (
|
|
<Stack spacing={2.5}>
|
|
{/* Organisation identity banner */}
|
|
<Card sx={{ overflow: 'hidden' }}>
|
|
<Stack
|
|
direction={{ xs: 'column', sm: 'row' }} spacing={2.5} alignItems={{ sm: 'center' }}
|
|
sx={{ p: 3, background: (theme) => `linear-gradient(90deg, ${theme.palette.primary.lighter}88 0%, ${theme.palette.background.paper} 75%)` }}
|
|
>
|
|
<Avatar variant="rounded" sx={{ width: 64, height: 64, bgcolor: 'primary.main', color: '#fff' }}>
|
|
<BusinessOutlinedIcon />
|
|
</Avatar>
|
|
<Box sx={{ flexGrow: 1, minWidth: 0 }}>
|
|
<Stack direction="row" spacing={1} alignItems="center" flexWrap="wrap" useFlexGap>
|
|
<Typography variant="h5" sx={{ fontWeight: 700, color: 'grey.800' }}>{general.orgName}</Typography>
|
|
<Chip size="small" icon={<VerifiedOutlinedIcon sx={{ fontSize: 15, ml: 0.5 }} />} label="Verified" sx={{ fontWeight: 700, bgcolor: 'success.lighter', color: 'success.dark', '& .MuiChip-icon': { color: 'inherit' } }} />
|
|
</Stack>
|
|
<Typography variant="body2" color="text.secondary" sx={{ mt: 0.25 }}>{general.supportEmail} · {general.contact}</Typography>
|
|
</Box>
|
|
<Button variant="outlined" size="small">Change logo</Button>
|
|
</Stack>
|
|
</Card>
|
|
|
|
<Section icon={TuneOutlinedIcon} title="Organisation" subtitle="Profile and regional preferences" color="primary">
|
|
<Stack divider={<Divider />}>
|
|
<Row label="Organisation name" description="Shown on invoices and exports">
|
|
<TextField fullWidth size="small" value={general.orgName} onChange={setG('orgName')} />
|
|
</Row>
|
|
<Row label="Support email" description="Where customer replies are routed">
|
|
<TextField fullWidth size="small" value={general.supportEmail} onChange={setG('supportEmail')} />
|
|
</Row>
|
|
<Row label="Contact number" description="Primary operations line">
|
|
<TextField fullWidth size="small" value={general.contact} onChange={setG('contact')} />
|
|
</Row>
|
|
<Row label="Timezone" description="Used for schedules and reports">
|
|
<TextField select fullWidth size="small" value={general.timezone} onChange={setG('timezone')}>
|
|
{TIMEZONES.map((t) => <MenuItem key={t} value={t}>{t}</MenuItem>)}
|
|
</TextField>
|
|
</Row>
|
|
<Row label="Language" description="Console display language">
|
|
<TextField select fullWidth size="small" value={general.language} onChange={setG('language')}>
|
|
{LANGUAGES.map((l) => <MenuItem key={l} value={l}>{l}</MenuItem>)}
|
|
</TextField>
|
|
</Row>
|
|
</Stack>
|
|
</Section>
|
|
</Stack>
|
|
)}
|
|
|
|
{tab === 1 && (
|
|
<Stack spacing={2.5}>
|
|
<Section icon={NotificationsNoneIcon} title="Notification Preferences" subtitle="Choose what you get alerted about" color="primary">
|
|
<Stack divider={<Divider />}>
|
|
{NOTIFY_ROWS.map((row) => (
|
|
<Row key={row.k} label={row.t} description={row.d}>
|
|
<Box sx={rightAlign}><Switch checked={notify[row.k]} onChange={setN(row.k)} /></Box>
|
|
</Row>
|
|
))}
|
|
</Stack>
|
|
</Section>
|
|
<Section icon={CampaignOutlinedIcon} title="Delivery Channels" subtitle="How alerts reach your team" color="primary">
|
|
<Stack divider={<Divider />}>
|
|
<Row label="Email alerts" description="Send notifications to the support inbox">
|
|
<Box sx={rightAlign}><Switch checked={notify.emailAlerts} onChange={setN('emailAlerts')} /></Box>
|
|
</Row>
|
|
<Row label="SMS alerts" description="Send notifications to the registered mobile">
|
|
<Box sx={rightAlign}><Switch checked={notify.smsAlerts} onChange={setN('smsAlerts')} /></Box>
|
|
</Row>
|
|
</Stack>
|
|
</Section>
|
|
</Stack>
|
|
)}
|
|
|
|
{tab === 2 && (
|
|
<Stack spacing={2.5}>
|
|
<Section icon={LockOutlinedIcon} title="Change Password" subtitle="Use 8+ characters with a mix of letters, numbers & symbols" color="primary">
|
|
<Stack divider={<Divider />}>
|
|
<Row label="Current password" description="Enter your existing password" align="flex-start">
|
|
<PasswordField label="Current password" value={security.currentPassword} onChange={setSText('currentPassword')} autoComplete="current-password" />
|
|
</Row>
|
|
<Row label="New password" description="Choose a strong, unique password" align="flex-start">
|
|
<Box>
|
|
<PasswordField label="New password" value={security.newPassword} onChange={setSText('newPassword')} autoComplete="new-password" />
|
|
{security.newPassword && (
|
|
<Stack direction="row" spacing={1.5} alignItems="center" sx={{ mt: 1 }}>
|
|
<LinearProgress variant="determinate" value={(pwScore / 4) * 100} color={pwMeta.color} sx={{ flexGrow: 1, height: 6, borderRadius: 3 }} />
|
|
<Typography variant="caption" sx={{ fontWeight: 700, color: `${pwMeta.color}.main`, minWidth: 56 }}>{pwMeta.label}</Typography>
|
|
</Stack>
|
|
)}
|
|
</Box>
|
|
</Row>
|
|
<Row label="Confirm new password" description="Re-enter the new password" align="flex-start">
|
|
<Box>
|
|
<PasswordField label="Confirm new password" value={security.confirmPassword} onChange={setSText('confirmPassword')} autoComplete="new-password" />
|
|
{mismatch && <Typography variant="caption" color="error.main" sx={{ mt: 0.75, display: 'block' }}>Passwords do not match</Typography>}
|
|
</Box>
|
|
</Row>
|
|
</Stack>
|
|
</Section>
|
|
|
|
<Section icon={ShieldOutlinedIcon} title="Two-Factor Authentication" subtitle="Add an extra layer of security to your account" color="primary">
|
|
<Row label="Authenticator app" description="Require a one-time code at sign-in for extra security">
|
|
<Stack direction="row" spacing={1.5} alignItems="center" sx={{ justifyContent: { sm: 'flex-end' } }}>
|
|
<Chip
|
|
size="small"
|
|
icon={<ShieldOutlinedIcon sx={{ fontSize: 15, ml: 0.5 }} />}
|
|
label={security.twoFactor ? 'Enabled' : 'Disabled'}
|
|
sx={{ fontWeight: 700, bgcolor: security.twoFactor ? 'success.lighter' : 'grey.100', color: security.twoFactor ? 'success.dark' : 'grey.600', '& .MuiChip-icon': { color: 'inherit' } }}
|
|
/>
|
|
<Switch checked={security.twoFactor} onChange={(e) => { setSecurity((p) => ({ ...p, twoFactor: e.target.checked })); setDirty(true); }} />
|
|
</Stack>
|
|
</Row>
|
|
</Section>
|
|
|
|
<Section icon={WarningAmberRoundedIcon} title="Danger Zone" subtitle="Irreversible and high-impact actions" color="error" danger>
|
|
<Row label="Sign out of all sessions" description="End every active session on all devices">
|
|
<Box sx={rightAlign}>
|
|
<Button variant="outlined" color="error" startIcon={<LogoutOutlinedIcon />} onClick={() => { localStorage.removeItem('auth_token'); window.location.href = '/login'; }}>Sign out everywhere</Button>
|
|
</Box>
|
|
</Row>
|
|
</Section>
|
|
</Stack>
|
|
)}
|
|
</Grid>
|
|
</Grid>
|
|
|
|
<Snackbar
|
|
open={toast}
|
|
autoHideDuration={2500}
|
|
onClose={() => setToast(false)}
|
|
anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
|
|
>
|
|
<Alert severity="success" variant="filled" onClose={() => setToast(false)} sx={{ width: '100%' }}>
|
|
Settings saved successfully.
|
|
</Alert>
|
|
</Snackbar>
|
|
</>
|
|
);
|
|
}
|