first commit

src/pages/orders/CreateOrder.jsx

@@ -0,0 +1,142 @@
+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import {
+  Grid, Card, CardContent, Stack, Button, TextField, MenuItem, Typography, Divider,
+  Autocomplete, FormControlLabel, Checkbox, Box
+} from '@mui/material';
+import { DatePicker } from '@mui/x-date-pickers/DatePicker';
+import dayjs from 'dayjs';
+import AddIcon from '@mui/icons-material/Add';
+
+import PageHeader from '@/components/PageHeader';
+import { locations, tenantsList, tenants } from '@/data/mock';
+
+const TIME_SLOTS = ['09:00 - 11:00', '11:00 - 13:00', '13:00 - 15:00', '15:00 - 17:00', '17:00 - 19:00'];
+
+const SectionTitle = ({ children }) => (
+  <>
+    <Typography variant="h5" sx={{ fontWeight: 600 }}>{children}</Typography>
+    <Divider sx={{ mt: 1, mb: 2.5 }} />
+  </>
+);
+
+function AddressFields({ saveForLater, onSaveForLater }) {
+  return (
+    <Grid container spacing={2.5}>
+      <Grid item xs={12} md={6}>
+        <TextField fullWidth label="Contact Name" placeholder="Enter contact name" />
+      </Grid>
+      <Grid item xs={12} md={6}>
+        <TextField fullWidth label="Contact Number" placeholder="+91 ..." />
+      </Grid>
+      <Grid item xs={12}>
+        <TextField fullWidth label="Address" placeholder="Enter full address" multiline minRows={2} />
+      </Grid>
+      <Grid item xs={12} md={6}>
+        <TextField fullWidth label="Door No / Street" placeholder="e.g. 24, 1st Cross" />
+      </Grid>
+      <Grid item xs={12} md={6}>
+        <TextField select fullWidth label="Location" defaultValue="">
+          {locations.map((l) => <MenuItem key={l} value={l}>{l}</MenuItem>)}
+        </TextField>
+      </Grid>
+      <Grid item xs={12} md={6}>
+        <TextField fullWidth label="Postcode" placeholder="e.g. 560102" />
+      </Grid>
+      <Grid item xs={12} md={6}>
+        <TextField fullWidth label="Landmark" placeholder="Nearby landmark" />
+      </Grid>
+      <Grid item xs={12}>
+        <FormControlLabel
+          control={<Checkbox checked={saveForLater} onChange={(e) => onSaveForLater(e.target.checked)} />}
+          label="Save for later"
+        />
+      </Grid>
+    </Grid>
+  );
+}
+
+export default function CreateOrder() {
+  const navigate = useNavigate();
+  const [deliveryDate, setDeliveryDate] = useState(dayjs());
+  const [slot, setSlot] = useState('');
+  const [savePickup, setSavePickup] = useState(false);
+  const [saveDrop, setSaveDrop] = useState(false);
+
+  return (
+    <>
+      <PageHeader
+        title="Create Order"
+        breadcrumbs={[{ label: 'Orders', to: '/orders' }, { label: 'Create Order' }]}
+      />
+
+      <Card>
+        <CardContent sx={{ p: { xs: 2, md: 3 } }}>
+          {/* Top row */}
+          <Grid container spacing={2.5} sx={{ mb: 1 }}>
+            <Grid item xs={12} md={4}>
+              <Autocomplete
+                options={locations}
+                renderInput={(params) => <TextField {...params} label="Location" placeholder="Select location" />}
+              />
+            </Grid>
+            <Grid item xs={12} md={4}>
+              <Autocomplete
+                options={tenantsList}
+                renderInput={(params) => <TextField {...params} label="Client" placeholder="Select client" />}
+              />
+            </Grid>
+            <Grid item xs={12} md={4}>
+              <Autocomplete
+                options={tenants.map((t) => `${t.name} — ${t.address}`)}
+                renderInput={(params) => <TextField {...params} label="Business Location" placeholder="Select business location" />}
+              />
+            </Grid>
+          </Grid>
+
+          <Box sx={{ mt: 3 }}>
+            <SectionTitle>Pickup Details</SectionTitle>
+            <AddressFields saveForLater={savePickup} onSaveForLater={setSavePickup} />
+          </Box>
+
+          <Box sx={{ mt: 3 }}>
+            <SectionTitle>Drop Details</SectionTitle>
+            <AddressFields saveForLater={saveDrop} onSaveForLater={setSaveDrop} />
+          </Box>
+
+          <Box sx={{ mt: 3 }}>
+            <SectionTitle>Schedule</SectionTitle>
+            <Grid container spacing={2.5}>
+              <Grid item xs={12} md={6}>
+                <DatePicker
+                  label="Delivery Date"
+                  value={deliveryDate}
+                  onChange={setDeliveryDate}
+                  slotProps={{ textField: { fullWidth: true } }}
+                />
+              </Grid>
+              <Grid item xs={12} md={6}>
+                <TextField select fullWidth label="Pickup Time Slot" value={slot} onChange={(e) => setSlot(e.target.value)}>
+                  {TIME_SLOTS.map((s) => <MenuItem key={s} value={s}>{s}</MenuItem>)}
+                </TextField>
+              </Grid>
+              <Grid item xs={12}>
+                <TextField fullWidth label="Notes" placeholder="Special instructions for this order" multiline minRows={3} />
+              </Grid>
+            </Grid>
+          </Box>
+
+          <Divider sx={{ mt: 3 }} />
+          <Stack direction="row" spacing={1.5} justifyContent="flex-end" sx={{ mt: 2.5 }}>
+            <Button variant="outlined" onClick={() => navigate('/orders')}>
+              Cancel
+            </Button>
+            <Button variant="contained" startIcon={<AddIcon />} onClick={() => navigate('/orders')}>
+              Create Order
+            </Button>
+          </Stack>
+        </CardContent>
+      </Card>
+    </>
+  );
+}