Add NewTripForm and NewTripPage components; implement trip creation functionality and routing

Author: LadyKerr

planventure-api/instance/planventure.db

@@ -12,8 +12,10 @@
   "dependencies": {
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
-    "@mui/material": "^6.2.0",
     "@mui/icons-material": "^6.2.0",
+    "@mui/material": "^6.2.0",
+    "@mui/x-date-pickers": "^7.27.1",
+    "dayjs": "^1.11.13",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-router-dom": "^7.0.2"
@@ -30,4 +32,4 @@
     "globals": "^15.12.0",
     "vite": "^6.0.1"
   }
-}
+}

planventure-client/package-lock.json

@@ -0,0 +1,163 @@
+import { useState } from 'react';
+import { 
+  Box, 
+  TextField, 
+  Button, 
+  Typography, 
+  Alert,
+  Paper
+} from '@mui/material';
+import { DatePicker } from '@mui/x-date-pickers/DatePicker';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import dayjs from 'dayjs';
+import { useNavigate } from 'react-router-dom';
+import { tripService } from '../../services/tripService';
+
+const NewTripForm = () => {
+  const navigate = useNavigate();
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+  const [formData, setFormData] = useState({
+    title: '',
+    destination: '',
+    startDate: dayjs(),
+    endDate: dayjs().add(7, 'day')
+  });
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setLoading(true);
+    setError('');
+
+    try {
+      const tripData = {
+        title: formData.title,
+        destination: formData.destination,
+        start_date: formData.startDate.format('YYYY-MM-DD'),
+        end_date: formData.endDate.format('YYYY-MM-DD'),
+        status: 'Upcoming'
+      };
+
+      const response = await tripService.createTrip(tripData);
+      navigate('/dashboard');
+    } catch (err) {
+      setError(err.message || 'Failed to create trip');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleChange = (e) => {
+    const { name, value } = e.target;
+    setFormData(prev => ({
+      ...prev,
+      [name]: value
+    }));
+  };
+
+  const isDateRangeValid = () => {
+    return formData.endDate.isAfter(formData.startDate) || 
+           formData.endDate.isSame(formData.startDate);
+  };
+
+  const isFormValid = () => {
+    return formData.title && 
+           formData.destination && 
+           isDateRangeValid() &&
+           !loading;
+  };
+
+  return (
+    <Paper elevation={2} sx={{ p: 4, maxWidth: 600, mx: 'auto', mt: 4 }}>
+      <Box
+        component="form"
+        onSubmit={handleSubmit}
+        sx={{
+          display: 'flex',
+          flexDirection: 'column',
+          gap: 3
+        }}
+      >
+        <Typography variant="h5" component="h1" gutterBottom>
+          Plan a New Trip
+        </Typography>
+
+        {error && (
+          <Alert severity="error" sx={{ mb: 2 }}>
+            {error}
+          </Alert>
+        )}
+
+        <TextField
+          fullWidth
+          label="Trip Title"
+          name="title"
+          value={formData.title}
+          onChange={handleChange}
+          required
+        />
+
+        <TextField
+          fullWidth
+          label="Destination"
+          name="destination"
+          value={formData.destination}
+          onChange={handleChange}
+          required
+        />
+
+        <LocalizationProvider dateAdapter={AdapterDayjs}>
+          <DatePicker
+            label="Start Date"
+            value={formData.startDate}
+            onChange={(newValue) => {
+              setFormData(prev => ({ ...prev, startDate: newValue }));
+            }}
+            minDate={dayjs()}
+            slotProps={{
+              textField: { fullWidth: true }
+            }}
+          />
+
+          <DatePicker
+            label="End Date"
+            value={formData.endDate}
+            onChange={(newValue) => {
+              setFormData(prev => ({ ...prev, endDate: newValue }));
+            }}
+            minDate={formData.startDate}
+            slotProps={{
+              textField: { 
+                fullWidth: true,
+                error: !isDateRangeValid(),
+                helperText: !isDateRangeValid() ? 'End date must be after start date' : ''
+              }
+            }}
+          />
+        </LocalizationProvider>
+
+        <Box sx={{ display: 'flex', gap: 2, mt: 2 }}>
+          <Button
+            type="button"
+            variant="outlined"
+            onClick={() => navigate('/dashboard')}
+            sx={{ flex: 1 }}
+          >
+            Cancel
+          </Button>
+          <Button
+            type="submit"
+            variant="contained"
+            disabled={!isFormValid()}
+            sx={{ flex: 1 }}
+          >
+            {loading ? 'Creating...' : 'Create Trip'}
+          </Button>
+        </Box>
+      </Box>
+    </Paper>
+  );
+};
+
+export default NewTripForm;

planventure-client/package.json

@@ -0,0 +1,12 @@
+import { Container } from '@mui/material';
+import NewTripForm from '../components/trips/NewTripForm';
+
+const NewTripPage = () => {
+  return (
+    <Container>
+      <NewTripForm />
+    </Container>
+  );
+};
+
+export default NewTripPage;

planventure-client/src/components/trips/NewTripForm.jsx

@@ -3,6 +3,7 @@ import LoginPage from '../pages/LoginPage';
 import SignUpPage from '../pages/SignUpPage';
 import Dashboard from '../pages/Dashboard';
 import DashboardLayout from '../layouts/DashboardLayout';
+import NewTripPage from '../pages/NewTripPage';
 
 export const publicRoutes = [
   {
@@ -28,4 +29,8 @@ export const protectedRoutes = [
     path: '/trips',
     element: <DashboardLayout><Dashboard /></DashboardLayout>,
   },
+  {
+    path: '/trips/new',
+    element: <DashboardLayout><NewTripPage /></DashboardLayout>,
+  }
 ];