feat: added calendar date time picker for modal event : Steph feng/modal

app/dashboard/dashboard.tsx

@@ -0,0 +1,15 @@
+'use client'
+import React from 'react';
+import Modal from './modal'
+// Import other components as needed, e.g., UserCard, Calendar
+
+const Dashboard = () => {
+  return (
+    <div>
+      <h1>Dashboard</h1>
+      <Modal></Modal>
+    </div>
+  );
+};
+
+export default Dashboard;

app/dashboard/modal.tsx

@@ -0,0 +1,156 @@
+"use client"
+
+/* the modal including calendar date time picker */
+
+import * as React from 'react';
+import Button from '@mui/material/Button';
+import { Dialog, DialogActions, DialogContent, DialogContentText, 
+        DialogTitle, FormControl, InputLabel, OutlinedInput, TextField } from '@mui/material';
+
+import { LocalizationProvider } from '@mui/x-date-pickers';
+import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'
+import '../styles/dashboard.css'
+
+/* Event modal */
+
+const Modal= () => {
+  const [open, setOpen] = React.useState(false);
+
+  const handleClickOpen = () => {
+    setOpen(true);
+  };
+
+  const handleClose = () => {
+    setOpen(false);
+  };
+
+  const sendData = async (data: any) => {
+    try {
+        const response = await fetch("/api/create", {
+            method: "POST",
+            headers: {
+                "Content-Type": "application/json",
+            },
+            body: JSON.stringify(data),
+        })
+
+        if (!response.ok) {
+            throw new Error("Failed to send data to database");
+        }
+
+    } catch (error) {
+        console.error("Error:", error)
+    }
+  }
+
+
+  return (
+    <React.Fragment>
+      <Button variant="outlined" onClick={handleClickOpen}>
+        Create an Event
+      </Button>
+      <Dialog
+        open={open}
+        onClose={handleClose}
+        PaperProps={{
+          component: 'form',
+          onSubmit: (event: React.FormEvent<HTMLFormElement>) => {
+            event.preventDefault();
+            const formData = new FormData(event.currentTarget);
+            const formJson = Object.fromEntries((formData as any).entries());
+            const email = formJson.email;
+
+            console.log(email); /* optional for email input for possible notification */
+            console.log(formJson);
+
+            sendData(formJson);
+            handleClose();
+
+            /* to-do send calendar information to the backend */
+
+          },
+        }}
+      >
+        <DialogTitle>Event Details</DialogTitle>
+
+        <DialogContent>
+        <DialogContentText>
+            Create a Blood for Life Event 
+          </DialogContentText>
+
+        <LocalizationProvider dateAdapter={AdapterDayjs}>
+          <DateTimePicker
+            name="startDate"
+            className="calendar">
+          </DateTimePicker>
+        </LocalizationProvider>
+
+          <TextField
+            autoFocus
+            required
+            id="name"
+            margin='normal'
+            className="event-name"
+            name="name"
+            label="Event Name"
+            type="string"
+            fullWidth
+            variant="standard"
+          />
+
+        <TextField
+            id= "description"
+            name= "description"
+            className="desc-text"
+            label="Description"
+            multiline
+            margin='normal'
+            rows={2}
+            variant="outlined"
+            fullWidth
+            InputLabelProps={{
+              sx: { fontSize: '0.95rem' , color: "#b0b4b8"}, // Adjust padding as needed
+            }}
+        />
+        <TextField
+            autoFocus
+            required
+            margin='normal'
+            id="location"
+            name="location"
+            className="location-text"
+            label="Event Location"
+            type="string"
+            fullWidth
+            variant="standard"
+          />
+        <TextField
+            autoFocus
+            required
+            margin='normal'
+            id="volunteersRequired"
+            name="volunteersRequired"
+            className="volunteers-text"
+            label="Volunteers Required"
+            type="number"
+            variant="standard"
+            style= {{width: "10em"}}
+            inputProps={{
+              step: 1, 
+              min: "0",
+              max: "1000"
+            }}
+          />
+
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={handleClose}>Cancel</Button>
+          <Button type="submit">Confirm</Button>
+        </DialogActions>
+      </Dialog>
+    </React.Fragment>
+  )
+};
+
+export default Modal;

app/dashboard/page.tsx

@@ -0,0 +1,8 @@
+import Image from 'next/image'
+import Dashboard from './dashboard'
+
+export default function Page() {
+  return (
+      <Dashboard></Dashboard>
+  )
+}

app/styles/dashboard.css

@@ -0,0 +1,11 @@
+/* styles for dashboard page */
+
+/* styles for event modal */
+.event-name {
+    padding-bottom: 1em; 
+}
+
+.calendar {
+    padding-bottom: 0.5em;
+    padding-top: 1em; 
+}