first commit

src/pages/auth/Login.jsx

@@ -0,0 +1,124 @@
+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import {
+  Box,
+  Grid,
+  Card,
+  Stack,
+  Typography,
+  TextField,
+  InputAdornment,
+  IconButton,
+  Button,
+  Checkbox,
+  FormControlLabel,
+  Link
+} from '@mui/material';
+import Visibility from '@mui/icons-material/Visibility';
+import VisibilityOff from '@mui/icons-material/VisibilityOff';
+import BoltIcon from '@mui/icons-material/Bolt';
+import LocalShippingOutlinedIcon from '@mui/icons-material/LocalShippingOutlined';
+import VerifiedOutlinedIcon from '@mui/icons-material/VerifiedOutlined';
+
+import Logo from '@/components/Logo';
+
+export default function Login() {
+  const navigate = useNavigate();
+  const [show, setShow] = useState(false);
+  const [auth, setAuth] = useState('admin@doormile.in');
+  const [pwd, setPwd] = useState('');
+
+  return (
+    <Grid container sx={{ minHeight: '100vh' }}>
+      {/* Brand panel */}
+      <Grid
+        item
+        md={6}
+        sx={{
+          display: { xs: 'none', md: 'flex' },
+          flexDirection: 'column',
+          justifyContent: 'space-between',
+          p: 6,
+          color: '#fff',
+          background: 'linear-gradient(150deg, #C01227 0%, #9E0E20 55%, #7E0B17 100%)',
+          position: 'relative',
+          overflow: 'hidden'
+        }}
+      >
+        <Box sx={{ position: 'absolute', width: 420, height: 420, borderRadius: '50%', bgcolor: 'rgba(255,255,255,0.06)', top: -120, right: -120 }} />
+        <Box sx={{ position: 'absolute', width: 280, height: 280, borderRadius: '50%', bgcolor: 'rgba(255,255,255,0.06)', bottom: -80, left: -60 }} />
+        <Logo onDark />
+        <Box sx={{ position: 'relative' }}>
+          <Typography variant="h2" sx={{ color: '#fff', fontWeight: 800, lineHeight: 1.2 }}>
+            Move every parcel,
+            <br /> on time, every time.
+          </Typography>
+          <Typography sx={{ color: 'rgba(255,255,255,0.85)', mt: 2, maxWidth: 420 }}>
+            The command center for your last-mile operation — orders, riders, pricing and settlements in one corporate console.
+          </Typography>
+          <Stack spacing={1.5} sx={{ mt: 4 }}>
+            {[
+              { icon: BoltIcon, t: 'AI-assisted route optimisation' },
+              { icon: LocalShippingOutlinedIcon, t: 'Real-time rider & delivery tracking' },
+              { icon: VerifiedOutlinedIcon, t: 'Automated client invoicing & payouts' }
+            ].map((f) => (
+              <Stack key={f.t} direction="row" spacing={1.5} alignItems="center">
+                <Box sx={{ width: 34, height: 34, borderRadius: 2, bgcolor: 'rgba(255,255,255,0.16)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+                  <f.icon fontSize="small" />
+                </Box>
+                <Typography sx={{ color: 'rgba(255,255,255,0.92)' }}>{f.t}</Typography>
+              </Stack>
+            ))}
+          </Stack>
+        </Box>
+        <Typography variant="caption" sx={{ color: 'rgba(255,255,255,0.7)' }}>
+          © 2026 Doormile Logistics Pvt. Ltd.
+        </Typography>
+      </Grid>
+
+      {/* Form panel */}
+      <Grid item xs={12} md={6} sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', p: { xs: 3, sm: 6 } }}>
+        <Card sx={{ width: '100%', maxWidth: 420, p: { xs: 3, sm: 4.5 } }}>
+          <Box sx={{ display: { xs: 'flex', md: 'none' }, mb: 2 }}><Logo /></Box>
+          <Typography variant="h3" sx={{ fontWeight: 700 }}>Welcome back</Typography>
+          <Typography variant="body2" color="text.secondary" sx={{ mt: 0.5, mb: 3 }}>
+            Sign in to your Doormile operations account.
+          </Typography>
+
+          <Stack spacing={2.5}>
+            <Box>
+              <Typography variant="subtitle2" sx={{ mb: 0.75 }}>Auth Name</Typography>
+              <TextField fullWidth placeholder="Enter your auth name" value={auth} onChange={(e) => setAuth(e.target.value)} />
+            </Box>
+            <Box>
+              <Typography variant="subtitle2" sx={{ mb: 0.75 }}>Password</Typography>
+              <TextField
+                fullWidth
+                type={show ? 'text' : 'password'}
+                placeholder="Enter your password"
+                value={pwd}
+                onChange={(e) => setPwd(e.target.value)}
+                InputProps={{
+                  endAdornment: (
+                    <InputAdornment position="end">
+                      <IconButton onClick={() => setShow((s) => !s)} edge="end" size="small">
+                        {show ? <VisibilityOff fontSize="small" /> : <Visibility fontSize="small" />}
+                      </IconButton>
+                    </InputAdornment>
+                  )
+                }}
+              />
+            </Box>
+            <Stack direction="row" justifyContent="space-between" alignItems="center">
+              <FormControlLabel control={<Checkbox defaultChecked size="small" />} label={<Typography variant="body2">Remember me</Typography>} />
+              <Link href="#" underline="hover" variant="body2" color="primary">Forgot password?</Link>
+            </Stack>
+            <Button fullWidth size="large" variant="contained" onClick={() => navigate('/dashboard')}>
+              Sign In
+            </Button>
+          </Stack>
+        </Card>
+      </Grid>
+    </Grid>
+  );
+}