From 1c69f758cba354729afe9ee50fd2d34a615d4b31 Mon Sep 17 00:00:00 2001
From: cindyhjli <cindy.hongjia.li16@gmail.com>
Date: Mon, 27 May 2024 22:00:36 -0400
Subject: [PATCH 1/9] add task modal

---
 frontend/src/App.tsx                          |   4 +-
 .../src/components/pages/tasks/TaskModal.tsx  | 253 ++++++++++++++++++
 .../src/components/pages/tasks/TasksPage.tsx  |   7 +-
 3 files changed, 260 insertions(+), 4 deletions(-)
 create mode 100644 frontend/src/components/pages/tasks/TaskModal.tsx

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 4e361f4d..a88061f6 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -91,9 +91,9 @@ const App = (): React.ReactElement => {
                 <Route
                   path={Routes.TASKS_PAGE}
                   element={
-                    <PrivateRoute>
+                    // <PrivateRoute>
                       <TasksPage />
-                    </PrivateRoute>
+                    // </PrivateRoute>
                   }
                 />
                 <Route
diff --git a/frontend/src/components/pages/tasks/TaskModal.tsx b/frontend/src/components/pages/tasks/TaskModal.tsx
new file mode 100644
index 00000000..6576bc28
--- /dev/null
+++ b/frontend/src/components/pages/tasks/TaskModal.tsx
@@ -0,0 +1,253 @@
+import React, { useState } from "react";
+import {
+  Text,
+  Button,
+  Input,
+  Select,
+  Flex,
+  FormControl,
+  FormLabel,
+  InputRightElement,
+  InputGroup,
+  Checkbox,
+} from "@chakra-ui/react";
+import VisibilityIcon from "@mui/icons-material/Visibility";
+import VisibilityOffIcon from "@mui/icons-material/VisibilityOff";
+import { TbTrash } from "react-icons/tb";
+
+import ModalContainer from "../../common/ModalContainer";
+
+type Props = {
+  isOpen: boolean;
+  setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
+};
+
+const FormField = ({
+  label,
+  value,
+  type = "text",
+  onChange,
+  submitPressed,
+  required = false,
+  isPassword = false,
+  showPassword,
+  setShowPassword,
+}: {
+  label: string;
+  value: string;
+  type?: string;
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  submitPressed: boolean;
+  required?: boolean;
+  isPassword?: boolean;
+  showPassword?: boolean;
+  setShowPassword?: React.Dispatch<React.SetStateAction<boolean>>;
+}) => (
+  <Flex flexDir="column" flex="1">
+    <FormControl isRequired={required}>
+      <FormLabel mb="5px" color="gray.main" fontWeight="700">
+        {label}
+      </FormLabel>
+      <InputGroup>
+        <Input
+          variant="primary"
+          borderColor={submitPressed && !value ? "red.error" : "gray.300"}
+          boxShadow={submitPressed && !value ? "0 0 2px red.error" : "none"}
+          type={
+            isPassword && setShowPassword && !showPassword ? "password" : type
+          }
+          value={value}
+          onChange={onChange}
+        />
+        {isPassword && setShowPassword && (
+          <InputRightElement h="34px">
+            <Button
+              onClick={() => setShowPassword(!showPassword)}
+              bg="transparent"
+              _hover={{ bg: "transparent" }}
+            >
+              {!showPassword ? (
+                <VisibilityIcon fontSize="small" />
+              ) : (
+                <VisibilityOffIcon fontSize="small" />
+              )}
+            </Button>
+          </InputRightElement>
+        )}
+      </InputGroup>
+    </FormControl>
+  </Flex>
+);
+
+const DateInput = ({
+  dueDateTime,
+  setDueDateTime,
+  isAllDay,
+  setIsAllDay,
+  recurrenceFrequency,
+  setRecurrenceFrequency,
+  submitPressed,
+}: {
+  dueDateTime: string;
+  setDueDateTime: React.Dispatch<React.SetStateAction<string>>;
+  isAllDay: boolean;
+  setIsAllDay: React.Dispatch<React.SetStateAction<boolean>>;
+  recurrenceFrequency: string;
+  setRecurrenceFrequency: React.Dispatch<React.SetStateAction<string>>;
+  submitPressed: boolean;
+}) => (
+  <Flex flexDir="column" flex="1">
+    <FormControl isRequired>
+      <FormLabel mb="5px" color="gray.main" fontWeight="700">
+        Due Date
+      </FormLabel>
+      <Flex flexDir="column">
+        <Input
+          variant="primary"
+          mb={3}
+          borderColor={submitPressed && !dueDateTime ? "red.error" : "gray.300"}
+          boxShadow={
+            submitPressed && !dueDateTime ? "0 0 2px red.error" : "none"
+          }
+          type="datetime-local"
+          value={dueDateTime}
+          onChange={(e) => setDueDateTime(e.target.value)}
+        />
+        <Flex alignItems="center">
+          <Checkbox
+            w="200px"
+            isChecked={isAllDay}
+            onChange={(e) => setIsAllDay(e.target.checked)}
+          >
+            All Day
+          </Checkbox>
+          <Select
+            variant="primary"
+            value={recurrenceFrequency}
+            onChange={(e) => setRecurrenceFrequency(e.target.value)}
+            border="solid"
+            borderColor="gray.300"
+          >
+            <option value="daily">Daily</option>
+            <option value="weekly">Weekly</option>
+            <option value="biWeekly">Bi-Weekly</option>
+          </Select>
+        </Flex>
+      </Flex>
+    </FormControl>
+  </Flex>
+);
+
+const TaskModal = ({ isOpen, setIsOpen }: Props): React.ReactElement => {
+  const [title, setTitle] = useState("");
+  const [location, setLocation] = useState("");
+  const [dueDateTime, setDueDateTime] = useState("");
+  const [isAllDay, setIsAllDay] = useState(false);
+  const [recurrenceFrequency, setRecurrenceFrequency] = useState("");
+  const [marillacBucks, setMarillacBucks] = useState("");
+
+  const [submitPressed, setSubmitPressed] = useState(false);
+
+  const handleSubmit = () => {
+    setSubmitPressed(true);
+    if (!title || !location || !dueDateTime || !marillacBucks) {
+      // TODO: Add error handling
+    }
+    // TODO: API call to add task
+  };
+
+  const resetFormState = () => {
+    setTitle("");
+    setLocation("");
+    setDueDateTime("");
+    setIsAllDay(false);
+    setRecurrenceFrequency("");
+    setMarillacBucks("");
+
+    setSubmitPressed(false);
+  };
+
+  const handleMoneyInput = () => {
+    const moneyRegex = /^\d*(\.\d{0,2})?$/;
+
+    // if (value === '' || moneyRegex.test(value)) {
+    //   setValue(value);
+    // }
+  };
+  
+
+  return (
+    <ModalContainer title="" isOpen={isOpen} setIsOpen={setIsOpen}>
+      <Flex justifyContent="space-between" paddingTop="0px">
+        <Text fontWeight="500" fontSize="20">Edit Chore</Text>
+        <Button variant="cancel" onClick={() => {}}>
+          <TbTrash/> Delete
+        </Button>
+      </Flex>
+      <Flex flexDir="column" gap="20px">
+        <FormField
+          label="Task Name"
+          value={title}
+          onChange={(e) => setTitle(e.target.value)}
+          submitPressed={submitPressed}
+          required
+        />
+        <FormLabel color="gray.main" fontWeight="700" mb={0}>
+          Location
+        </FormLabel>
+        <FormControl isRequired mt={0}>
+          <Select
+            variant="primary"
+            value={location}
+            onChange={(e) => setLocation(e.target.value)}
+            border="solid"
+            borderColor="gray.300"
+          >
+            <option value="kitchen">Kitchen</option>
+            <option value="livingRoom">Living Room</option>
+            <option value="washroom">Washroom</option>
+          </Select>
+        </FormControl>
+        <DateInput
+          dueDateTime={dueDateTime}
+          setDueDateTime={setDueDateTime}
+          isAllDay={isAllDay}
+          setIsAllDay={setIsAllDay}
+          recurrenceFrequency={recurrenceFrequency}
+          setRecurrenceFrequency={setRecurrenceFrequency}
+          submitPressed={submitPressed}
+        />
+        <FormField
+          label="Marillac Bucks"
+          value={marillacBucks}
+          type="number"
+          onChange={(e) => setMarillacBucks(e.target.value)}
+          submitPressed={submitPressed}
+          required
+        />
+
+        <Flex justifyContent="flex-end">
+          <Button
+            variant="cancel"
+            mr="8px"
+            onClick={() => {
+              resetFormState();
+              setIsOpen(false);
+            }}
+          >
+            Cancel
+          </Button>
+          <Button variant="primary" onClick={ () => {
+                handleSubmit();
+                setIsOpen(false);
+            }}
+            >
+            Save
+          </Button>
+        </Flex>
+      </Flex>
+    </ModalContainer>
+  );
+};
+
+export default TaskModal;
\ No newline at end of file
diff --git a/frontend/src/components/pages/tasks/TasksPage.tsx b/frontend/src/components/pages/tasks/TasksPage.tsx
index 40215d0d..ee2ecdb0 100644
--- a/frontend/src/components/pages/tasks/TasksPage.tsx
+++ b/frontend/src/components/pages/tasks/TasksPage.tsx
@@ -12,6 +12,7 @@ import {
 } from "@chakra-ui/react";
 import { Add, Search } from "@mui/icons-material";
 
+import TaskModal from "./TaskModal";
 import {
   TaskType,
   Task,
@@ -39,6 +40,7 @@ const TasksPage = (): React.ReactElement => {
   const [optionalTasks, setOptionalTasks] = useState<Task[]>([]);
   const [customTasks, setCustomTasks] = useState<CustomTask[]>([]);
   const [choreTasks, setChoreTasks] = useState<ChoreTask[]>([]);
+  const [isModalOpen, setIsModalOpen] = useState(false);
 
   const [taskType, setTaskType] = useState<TaskType>("REQUIRED");
   const [taskData, setTaskData] = useState<TableData[]>([]);
@@ -126,11 +128,12 @@ const TasksPage = (): React.ReactElement => {
           data={taskData}
           columnInfo={taskDataColumns}
           maxResults={8}
-          onEdit={() => {}}
+          onEdit={() => {setIsModalOpen(true);}}
         />
+        <TaskModal isOpen={isModalOpen} setIsOpen={setIsModalOpen} />
       </Flex>
     </Flex>
   );
 };
-
+ 
 export default TasksPage;

From 0722d12a6425649716af6314bf13c17859173ea7 Mon Sep 17 00:00:00 2001
From: cindyhjli <cindy.hongjia.li16@gmail.com>
Date: Wed, 29 May 2024 21:09:41 -0400
Subject: [PATCH 2/9] fix task modal inputs

---
 frontend/package.json                         |   1 +
 .../src/components/pages/tasks/TaskModal.tsx  | 105 ++++++++++++------
 2 files changed, 73 insertions(+), 33 deletions(-)

diff --git a/frontend/package.json b/frontend/package.json
index dd6f119a..65defb85 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -38,6 +38,7 @@
     "react-bootstrap": "^1.5.2",
     "react-dom": "^18.2.0",
     "react-google-login": "^5.2.2",
+    "react-icons": "^5.2.1",
     "react-json-schema": "^1.2.2",
     "react-jsonschema-form": "^1.8.1",
     "react-router-dom": "^6.4.3",
diff --git a/frontend/src/components/pages/tasks/TaskModal.tsx b/frontend/src/components/pages/tasks/TaskModal.tsx
index 6576bc28..6d80f387 100644
--- a/frontend/src/components/pages/tasks/TaskModal.tsx
+++ b/frontend/src/components/pages/tasks/TaskModal.tsx
@@ -14,6 +14,7 @@ import {
 import VisibilityIcon from "@mui/icons-material/Visibility";
 import VisibilityOffIcon from "@mui/icons-material/VisibilityOff";
 import { TbTrash } from "react-icons/tb";
+import { format } from 'date-fns';
 
 import ModalContainer from "../../common/ModalContainer";
 
@@ -27,6 +28,7 @@ const FormField = ({
   value,
   type = "text",
   onChange,
+  onBlur,
   submitPressed,
   required = false,
   isPassword = false,
@@ -37,6 +39,7 @@ const FormField = ({
   value: string;
   type?: string;
   onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  onBlur?: () => void;
   submitPressed: boolean;
   required?: boolean;
   isPassword?: boolean;
@@ -80,39 +83,64 @@ const FormField = ({
 );
 
 const DateInput = ({
-  dueDateTime,
-  setDueDateTime,
+  dueDate,
+  setDueDate,
+  dueTime,
+  setDueTime,
   isAllDay,
   setIsAllDay,
   recurrenceFrequency,
   setRecurrenceFrequency,
   submitPressed,
 }: {
-  dueDateTime: string;
-  setDueDateTime: React.Dispatch<React.SetStateAction<string>>;
+  dueDate: string;
+  setDueDate: React.Dispatch<React.SetStateAction<string>>;
+  dueTime: string;
+  setDueTime: React.Dispatch<React.SetStateAction<string>>;
   isAllDay: boolean;
   setIsAllDay: React.Dispatch<React.SetStateAction<boolean>>;
   recurrenceFrequency: string;
   setRecurrenceFrequency: React.Dispatch<React.SetStateAction<string>>;
   submitPressed: boolean;
-}) => (
+}) => {
+    const formatDate = (inputDate: Date) => {
+      return format(inputDate, 'yyyy-MM-dd');
+    };
+  
+    return (
   <Flex flexDir="column" flex="1">
     <FormControl isRequired>
       <FormLabel mb="5px" color="gray.main" fontWeight="700">
         Due Date
       </FormLabel>
       <Flex flexDir="column">
-        <Input
-          variant="primary"
-          mb={3}
-          borderColor={submitPressed && !dueDateTime ? "red.error" : "gray.300"}
-          boxShadow={
-            submitPressed && !dueDateTime ? "0 0 2px red.error" : "none"
-          }
-          type="datetime-local"
-          value={dueDateTime}
-          onChange={(e) => setDueDateTime(e.target.value)}
-        />
+        <Flex flexDir="row">
+          <Input
+            variant="primary"
+            mb={3}
+            borderColor={submitPressed && !dueDate ? "red.error" : "gray.300"}
+            boxShadow={
+              submitPressed && !dueDate ? "0 0 2px red.error" : "none"
+            }
+            type="date"
+            value={dueDate ? formatDate(new Date(dueDate)) : ''}
+            width="200px"
+            onChange={(e) => setDueDate(e.target.value)}
+          />
+          <Text paddingX="10px" paddingY="4px">at</Text>
+          <Input
+            variant="primary"
+            mb={3}
+            borderColor={submitPressed && !dueTime ? "red.error" : "gray.300"}
+            boxShadow={
+              submitPressed && !dueTime ? "0 0 2px red.error" : "none"
+            }
+            type="time"
+            value={dueTime}
+            width="200px"
+            onChange={(e) => setDueTime(e.target.value)}
+          />
+        </Flex>
         <Flex alignItems="center">
           <Checkbox
             w="200px"
@@ -137,20 +165,23 @@ const DateInput = ({
     </FormControl>
   </Flex>
 );
+};
 
 const TaskModal = ({ isOpen, setIsOpen }: Props): React.ReactElement => {
   const [title, setTitle] = useState("");
   const [location, setLocation] = useState("");
-  const [dueDateTime, setDueDateTime] = useState("");
+  const [dueDate, setDueDate] = useState("");
+  const [dueTime, setDueTime] = useState("");
   const [isAllDay, setIsAllDay] = useState(false);
   const [recurrenceFrequency, setRecurrenceFrequency] = useState("");
-  const [marillacBucks, setMarillacBucks] = useState("");
+  const [unformattedMarillacBucks, setUnformattedMarillacBucks] = useState('');
+  const [formattedMarillacBucks, setFormattedMarillacBucks] = useState('$');
 
   const [submitPressed, setSubmitPressed] = useState(false);
 
   const handleSubmit = () => {
     setSubmitPressed(true);
-    if (!title || !location || !dueDateTime || !marillacBucks) {
+    if (!title || !location || !dueDate || !dueTime || !formattedMarillacBucks) {
       // TODO: Add error handling
     }
     // TODO: API call to add task
@@ -159,20 +190,26 @@ const TaskModal = ({ isOpen, setIsOpen }: Props): React.ReactElement => {
   const resetFormState = () => {
     setTitle("");
     setLocation("");
-    setDueDateTime("");
+    setDueDate("");
+    setDueTime("");
     setIsAllDay(false);
     setRecurrenceFrequency("");
-    setMarillacBucks("");
+    setUnformattedMarillacBucks("");
+    setFormattedMarillacBucks("$");
 
     setSubmitPressed(false);
   };
 
   const handleMoneyInput = () => {
-    const moneyRegex = /^\d*(\.\d{0,2})?$/;
-
-    // if (value === '' || moneyRegex.test(value)) {
-    //   setValue(value);
-    // }
+    console.log("Marillac bucks field blurred. unformattedMarillacBucks: ", unformattedMarillacBucks);
+    let inputValue = unformattedMarillacBucks.replace(/[^0-9.]/g, ''); // Remove non-numeric and non-period characters
+    
+    if (inputValue) {
+      let numberValue = parseFloat(inputValue).toFixed(2);
+      console.log("rounded numberValue", numberValue);
+      setFormattedMarillacBucks(`$${numberValue}`);
+      console.log("formattedMarillacBucks:", formattedMarillacBucks);
+    }
   };
   
 
@@ -181,7 +218,7 @@ const TaskModal = ({ isOpen, setIsOpen }: Props): React.ReactElement => {
       <Flex justifyContent="space-between" paddingTop="0px">
         <Text fontWeight="500" fontSize="20">Edit Chore</Text>
         <Button variant="cancel" onClick={() => {}}>
-          <TbTrash/> Delete
+          <TbTrash style={{ color: "#E30000" }} /><span style={{ color: "#E30000" }}>&nbsp;Delete</span>
         </Button>
       </Flex>
       <Flex flexDir="column" gap="20px">
@@ -209,8 +246,10 @@ const TaskModal = ({ isOpen, setIsOpen }: Props): React.ReactElement => {
           </Select>
         </FormControl>
         <DateInput
-          dueDateTime={dueDateTime}
-          setDueDateTime={setDueDateTime}
+          dueDate={dueDate}
+          setDueDate={setDueDate}
+          dueTime={dueTime}
+          setDueTime={setDueTime}
           isAllDay={isAllDay}
           setIsAllDay={setIsAllDay}
           recurrenceFrequency={recurrenceFrequency}
@@ -219,13 +258,13 @@ const TaskModal = ({ isOpen, setIsOpen }: Props): React.ReactElement => {
         />
         <FormField
           label="Marillac Bucks"
-          value={marillacBucks}
-          type="number"
-          onChange={(e) => setMarillacBucks(e.target.value)}
+          value={formattedMarillacBucks}
+          type="text"
+          onChange={(e) => setUnformattedMarillacBucks(e.target.value)}
+          onBlur={handleMoneyInput}
           submitPressed={submitPressed}
           required
         />
-
         <Flex justifyContent="flex-end">
           <Button
             variant="cancel"

From 6f6ec57bb6e1288b8bf3a65367637dfa1ed01c26 Mon Sep 17 00:00:00 2001
From: cindyhjli <cindy.hongjia.li16@gmail.com>
Date: Wed, 5 Jun 2024 22:06:50 -0400
Subject: [PATCH 3/9] fix date and time

---
 frontend/package.json                         |   6 +-
 .../src/components/pages/tasks/TaskModal.tsx  | 146 ++++++--
 frontend/yarn.lock                            | 154 ++++++++-
 package-lock.json                             | 320 ++++++++++++++++++
 package.json                                  |   5 +
 5 files changed, 586 insertions(+), 45 deletions(-)
 create mode 100644 package-lock.json
 create mode 100644 package.json

diff --git a/frontend/package.json b/frontend/package.json
index 65defb85..d6721b92 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -10,7 +10,8 @@
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
     "@mui/icons-material": "^5.15.14",
-    "@mui/material": "^5.15.14",
+    "@mui/material": "^5.15.19",
+    "@mui/x-date-pickers": "^7.6.1",
     "@rjsf/bootstrap-4": "^2.5.1",
     "@rjsf/core": "^2.5.1",
     "@testing-library/jest-dom": "^5.11.4",
@@ -27,6 +28,8 @@
     "apollo-upload-client": "^16.0.0",
     "axios": "^1.6.0",
     "bootstrap": "^4.6.0",
+    "date-fns": "^3.6.0",
+    "dayjs": "^1.11.11",
     "framer-motion": "^7.6.12",
     "graphql": "^15.5.0",
     "humps": "^2.0.1",
@@ -36,6 +39,7 @@
     "moment": "^2.30.1",
     "react": "^18.2.0",
     "react-bootstrap": "^1.5.2",
+    "react-date-picker": "^11.0.0",
     "react-dom": "^18.2.0",
     "react-google-login": "^5.2.2",
     "react-icons": "^5.2.1",
diff --git a/frontend/src/components/pages/tasks/TaskModal.tsx b/frontend/src/components/pages/tasks/TaskModal.tsx
index 6d80f387..3d03def3 100644
--- a/frontend/src/components/pages/tasks/TaskModal.tsx
+++ b/frontend/src/components/pages/tasks/TaskModal.tsx
@@ -15,6 +15,10 @@ import VisibilityIcon from "@mui/icons-material/Visibility";
 import VisibilityOffIcon from "@mui/icons-material/VisibilityOff";
 import { TbTrash } from "react-icons/tb";
 import { format } from 'date-fns';
+import dayjs, { Dayjs } from 'dayjs';
+import { DatePicker } from '@mui/x-date-pickers/DatePicker';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 
 import ModalContainer from "../../common/ModalContainer";
 
@@ -61,6 +65,7 @@ const FormField = ({
           }
           value={value}
           onChange={onChange}
+          onBlur={onBlur}
         />
         {isPassword && setShowPassword && (
           <InputRightElement h="34px">
@@ -82,6 +87,28 @@ const FormField = ({
   </Flex>
 );
 
+const generateOptions = () => {
+  const options = [];
+  for (let hour = 0; hour < 24; hour+=1) {
+    for (let minute = 0; minute < 60; minute += 30) {
+      let formattedHour;
+      if (hour === 0) {
+        formattedHour = "12";
+      } else if (hour > 12) {
+        formattedHour = `${hour - 12}`;
+      } else{
+        formattedHour = `${hour}`;
+      }
+      const ampm = hour < 12 ? 'am' : 'pm';
+      const formattedMinute = minute.toString().padStart(2, '0');
+      options.push(`${formattedHour}:${formattedMinute}${ampm}`);
+    }
+  }
+  return options;
+};
+
+const options = generateOptions();
+
 const DateInput = ({
   dueDate,
   setDueDate,
@@ -93,8 +120,8 @@ const DateInput = ({
   setRecurrenceFrequency,
   submitPressed,
 }: {
-  dueDate: string;
-  setDueDate: React.Dispatch<React.SetStateAction<string>>;
+  dueDate: Dayjs | null;
+  setDueDate: React.Dispatch<React.SetStateAction<Dayjs | null>>;
   dueTime: string;
   setDueTime: React.Dispatch<React.SetStateAction<string>>;
   isAllDay: boolean;
@@ -103,11 +130,12 @@ const DateInput = ({
   setRecurrenceFrequency: React.Dispatch<React.SetStateAction<string>>;
   submitPressed: boolean;
 }) => {
-    const formatDate = (inputDate: Date) => {
-      return format(inputDate, 'yyyy-MM-dd');
-    };
-  
-    return (
+  // const [selectedDate, setSelectedDate] = useState<Date | null>(new Date());
+  // const [selectedDate, setSelectedDate] = React.useState<Dayjs | null>(dayjs().startOf('day'));
+
+  const [calendarIsOpen, setCalendarIsOpen] = useState(false);
+
+  return(
   <Flex flexDir="column" flex="1">
     <FormControl isRequired>
       <FormLabel mb="5px" color="gray.main" fontWeight="700">
@@ -115,7 +143,8 @@ const DateInput = ({
       </FormLabel>
       <Flex flexDir="column">
         <Flex flexDir="row">
-          <Input
+            {/* date starts */}
+          {/* <Input
             variant="primary"
             mb={3}
             borderColor={submitPressed && !dueDate ? "red.error" : "gray.300"}
@@ -123,12 +152,72 @@ const DateInput = ({
               submitPressed && !dueDate ? "0 0 2px red.error" : "none"
             }
             type="date"
-            value={dueDate ? formatDate(new Date(dueDate)) : ''}
+            value={dueDate}
             width="200px"
             onChange={(e) => setDueDate(e.target.value)}
-          />
+          /> */}
+          {/* <div>
+            <DatePicker 
+              onChange={(date) => {
+                setSelectedDate(date as Date | null);
+                setCalendarIsOpen(false);
+              }}
+              isOpen={calendarIsOpen}
+              value={selectedDate}
+              format="MMM dd, y" 
+              // shouldOpenCalendar={({ reason }) => reason !== 'focus'}
+              // format="yyyy-MM-dd" 
+              // calendarIcon={null}
+              // clearIcon={null}
+              required
+              closeCalendar
+              // shouldOpenCalendar={() => false}
+            />
+          </div> */}
+          <LocalizationProvider dateAdapter={AdapterDayjs}>
+            <DatePicker
+              // label="Date Picker"
+              // // format="LL"
+              // value={dueDate}
+              // defaultValue={dayjs('2022-04-17')}
+              // onChange={
+              //   (date) => {
+              //     setDueDate(date as Dayjs | null);
+              //   }
+              // }
+              label="Controlled picker"
+              value={dueDate}
+              onChange={(newValue) => setDueDate(newValue)}
+            />
+          </LocalizationProvider>
+
+
+          <LocalizationProvider dateAdapter={AdapterDayjs}>
+            <DatePicker />
+          </LocalizationProvider>
+          
           <Text paddingX="10px" paddingY="4px">at</Text>
-          <Input
+          <Select
+            variant="primary"
+            value={dueTime}
+            onChange={(e) => setDueTime(e.target.value)}
+            border="solid"
+            borderColor={submitPressed && !dueTime ? "red.error" : "gray.300"}
+            boxShadow={
+              submitPressed && !dueTime ? "0 0 2px red.error" : "none"
+            }
+            borderWidth="2px"
+            height="34px"
+            width="200px"
+          >
+            <option value="">Select...</option>
+            {options.map((option, index) => (
+              <option key={index} value={option}>
+                {option}
+              </option>
+            ))}
+          </Select>
+          {/* <Input
             variant="primary"
             mb={3}
             borderColor={submitPressed && !dueTime ? "red.error" : "gray.300"}
@@ -139,7 +228,7 @@ const DateInput = ({
             value={dueTime}
             width="200px"
             onChange={(e) => setDueTime(e.target.value)}
-          />
+          /> */}
         </Flex>
         <Flex alignItems="center">
           <Checkbox
@@ -155,6 +244,8 @@ const DateInput = ({
             onChange={(e) => setRecurrenceFrequency(e.target.value)}
             border="solid"
             borderColor="gray.300"
+            borderWidth="2px"
+            height="34px"
           >
             <option value="daily">Daily</option>
             <option value="weekly">Weekly</option>
@@ -170,18 +261,17 @@ const DateInput = ({
 const TaskModal = ({ isOpen, setIsOpen }: Props): React.ReactElement => {
   const [title, setTitle] = useState("");
   const [location, setLocation] = useState("");
-  const [dueDate, setDueDate] = useState("");
+  const [dueDate, setDueDate] = useState<Dayjs | null>(dayjs().startOf('day'));
   const [dueTime, setDueTime] = useState("");
   const [isAllDay, setIsAllDay] = useState(false);
   const [recurrenceFrequency, setRecurrenceFrequency] = useState("");
-  const [unformattedMarillacBucks, setUnformattedMarillacBucks] = useState('');
-  const [formattedMarillacBucks, setFormattedMarillacBucks] = useState('$');
+  const [marillacBucks, setMarillacBucks] = useState('$ ');
 
   const [submitPressed, setSubmitPressed] = useState(false);
 
   const handleSubmit = () => {
     setSubmitPressed(true);
-    if (!title || !location || !dueDate || !dueTime || !formattedMarillacBucks) {
+    if (!title || !location || !dueDate || !dueTime || !marillacBucks) {
       // TODO: Add error handling
     }
     // TODO: API call to add task
@@ -190,25 +280,21 @@ const TaskModal = ({ isOpen, setIsOpen }: Props): React.ReactElement => {
   const resetFormState = () => {
     setTitle("");
     setLocation("");
-    setDueDate("");
+    setDueDate(dayjs().startOf('day'));
     setDueTime("");
     setIsAllDay(false);
     setRecurrenceFrequency("");
-    setUnformattedMarillacBucks("");
-    setFormattedMarillacBucks("$");
+    setMarillacBucks("$");
 
     setSubmitPressed(false);
   };
 
   const handleMoneyInput = () => {
-    console.log("Marillac bucks field blurred. unformattedMarillacBucks: ", unformattedMarillacBucks);
-    let inputValue = unformattedMarillacBucks.replace(/[^0-9.]/g, ''); // Remove non-numeric and non-period characters
+    const inputValue = marillacBucks.replace(/[^0-9.]/g, ''); // Remove non-numeric and non-period characters
     
     if (inputValue) {
-      let numberValue = parseFloat(inputValue).toFixed(2);
-      console.log("rounded numberValue", numberValue);
-      setFormattedMarillacBucks(`$${numberValue}`);
-      console.log("formattedMarillacBucks:", formattedMarillacBucks);
+      const numberValue = parseFloat(inputValue).toFixed(2);
+      setMarillacBucks(`$${numberValue}`);
     }
   };
   
@@ -229,16 +315,18 @@ const TaskModal = ({ isOpen, setIsOpen }: Props): React.ReactElement => {
           submitPressed={submitPressed}
           required
         />
-        <FormLabel color="gray.main" fontWeight="700" mb={0}>
+        <FormLabel color="gray.main" fontWeight="700" mb={0} pb={0}>
           Location
         </FormLabel>
-        <FormControl isRequired mt={0}>
+        <FormControl isRequired mt={0} pt={0}>
           <Select
             variant="primary"
             value={location}
             onChange={(e) => setLocation(e.target.value)}
             border="solid"
+            borderWidth="2px"
             borderColor="gray.300"
+            height="34px"
           >
             <option value="kitchen">Kitchen</option>
             <option value="livingRoom">Living Room</option>
@@ -258,9 +346,9 @@ const TaskModal = ({ isOpen, setIsOpen }: Props): React.ReactElement => {
         />
         <FormField
           label="Marillac Bucks"
-          value={formattedMarillacBucks}
+          value={marillacBucks}
           type="text"
-          onChange={(e) => setUnformattedMarillacBucks(e.target.value)}
+          onChange={(e) => setMarillacBucks(e.target.value)}
           onBlur={handleMoneyInput}
           submitPressed={submitPressed}
           required
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index d484374e..23c19b64 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -1162,6 +1162,13 @@
   dependencies:
     regenerator-runtime "^0.14.0"
 
+"@babel/runtime@^7.24.6":
+  version "7.24.7"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.24.7.tgz#f4f0d5530e8dbdf59b3451b9b3e594b6ba082e12"
+  integrity sha512-UwgBRMjJP+xv857DCngvqXI3Iq6J4v0wXmwc6sapg+zyhbwmQX67LUEFrkK5tbyJ30jGuG3ZvWpBiB9LCy1kWw==
+  dependencies:
+    regenerator-runtime "^0.14.0"
+
 "@babel/template@^7.22.15", "@babel/template@^7.23.9", "@babel/template@^7.3.3":
   version "7.23.9"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.23.9.tgz#f881d0487cba2828d3259dcb9ef5005a9731011a"
@@ -2704,7 +2711,7 @@
     hey-listen "^1.0.8"
     tslib "^2.3.1"
 
-"@mui/base@5.0.0-beta.40":
+"@mui/base@5.0.0-beta.40", "@mui/base@^5.0.0-beta.40":
   version "5.0.0-beta.40"
   resolved "https://registry.yarnpkg.com/@mui/base/-/base-5.0.0-beta.40.tgz#1f8a782f1fbf3f84a961e954c8176b187de3dae2"
   integrity sha512-I/lGHztkCzvwlXpjD2+SNmvNQvB4227xBXhISPjEaJUXGImOQ9f3D2Yj/T3KasSI/h0MLWy74X0J6clhPmsRbQ==
@@ -2717,10 +2724,10 @@
     clsx "^2.1.0"
     prop-types "^15.8.1"
 
-"@mui/core-downloads-tracker@^5.15.14":
-  version "5.15.14"
-  resolved "https://registry.yarnpkg.com/@mui/core-downloads-tracker/-/core-downloads-tracker-5.15.14.tgz#f7c57b261904831877220182303761c012d05046"
-  integrity sha512-on75VMd0XqZfaQW+9pGjSNiqW+ghc5E2ZSLRBXwcXl/C4YzjfyjrLPhrEpKnR9Uym9KXBvxrhoHfPcczYHweyA==
+"@mui/core-downloads-tracker@^5.15.19":
+  version "5.15.19"
+  resolved "https://registry.yarnpkg.com/@mui/core-downloads-tracker/-/core-downloads-tracker-5.15.19.tgz#7af0025c871f126367a55219486681954e4821d7"
+  integrity sha512-tCHSi/Tomez9ERynFhZRvFO6n9ATyrPs+2N80DMDzp6xDVirbBjEwhPcE+x7Lj+nwYw0SqFkOxyvMP0irnm55w==
 
 "@mui/icons-material@^5.15.14":
   version "5.15.14"
@@ -2729,15 +2736,15 @@
   dependencies:
     "@babel/runtime" "^7.23.9"
 
-"@mui/material@^5.15.14":
-  version "5.15.14"
-  resolved "https://registry.yarnpkg.com/@mui/material/-/material-5.15.14.tgz#a40bd5eccfa9fc925535e1f4d70c6cef77fa3a75"
-  integrity sha512-kEbRw6fASdQ1SQ7LVdWR5OlWV3y7Y54ZxkLzd6LV5tmz+NpO3MJKZXSfgR0LHMP7meKsPiMm4AuzV0pXDpk/BQ==
+"@mui/material@^5.15.19":
+  version "5.15.19"
+  resolved "https://registry.yarnpkg.com/@mui/material/-/material-5.15.19.tgz#a5bd50b6e68cee4ed39ea91dbecede5a020aaa97"
+  integrity sha512-lp5xQBbcRuxNtjpWU0BWZgIrv2XLUz4RJ0RqFXBdESIsKoGCQZ6P3wwU5ZPuj5TjssNiKv9AlM+vHopRxZhvVQ==
   dependencies:
     "@babel/runtime" "^7.23.9"
     "@mui/base" "5.0.0-beta.40"
-    "@mui/core-downloads-tracker" "^5.15.14"
-    "@mui/system" "^5.15.14"
+    "@mui/core-downloads-tracker" "^5.15.19"
+    "@mui/system" "^5.15.15"
     "@mui/types" "^7.2.14"
     "@mui/utils" "^5.15.14"
     "@types/react-transition-group" "^4.4.10"
@@ -2766,10 +2773,10 @@
     csstype "^3.1.3"
     prop-types "^15.8.1"
 
-"@mui/system@^5.15.14":
-  version "5.15.14"
-  resolved "https://registry.yarnpkg.com/@mui/system/-/system-5.15.14.tgz#8a0c6571077eeb6b5f1ff7aa7ff6a3dc4a14200d"
-  integrity sha512-auXLXzUaCSSOLqJXmsAaq7P96VPRXg2Rrz6OHNV7lr+kB8lobUF+/N84Vd9C4G/wvCXYPs5TYuuGBRhcGbiBGg==
+"@mui/system@^5.15.15":
+  version "5.15.15"
+  resolved "https://registry.yarnpkg.com/@mui/system/-/system-5.15.15.tgz#658771b200ce3c4a0f28e58169f02e5e718d1c53"
+  integrity sha512-aulox6N1dnu5PABsfxVGOZffDVmlxPOVgj56HrUnJE8MCSh8lOvvkd47cebIVQQYAjpwieXQXiDPj5pwM40jTQ==
   dependencies:
     "@babel/runtime" "^7.23.9"
     "@mui/private-theming" "^5.15.14"
@@ -2795,6 +2802,20 @@
     prop-types "^15.8.1"
     react-is "^18.2.0"
 
+"@mui/x-date-pickers@^7.6.1":
+  version "7.6.1"
+  resolved "https://registry.yarnpkg.com/@mui/x-date-pickers/-/x-date-pickers-7.6.1.tgz#39aab46e785f885c19d324e637d7312ded6f636d"
+  integrity sha512-erSq5cnOUyBgBmpHnMxIit5yhT3bl/lOaNZKpObvJtvEJetvNA9xWQ7dz/J/AufLzDuvThjusuRD0y+GmeXtiw==
+  dependencies:
+    "@babel/runtime" "^7.24.6"
+    "@mui/base" "^5.0.0-beta.40"
+    "@mui/system" "^5.15.15"
+    "@mui/utils" "^5.15.14"
+    "@types/react-transition-group" "^4.4.10"
+    clsx "^2.1.1"
+    prop-types "^15.8.1"
+    react-transition-group "^4.4.5"
+
 "@nicolo-ribaudo/eslint-scope-5-internals@5.1.1-v1":
   version "5.1.1-v1"
   resolved "https://registry.yarnpkg.com/@nicolo-ribaudo/eslint-scope-5-internals/-/eslint-scope-5-internals-5.1.1-v1.tgz#dbf733a965ca47b1973177dc0bb6c889edcfb129"
@@ -3857,6 +3878,11 @@
     "@webassemblyjs/ast" "1.11.6"
     "@xtuc/long" "4.2.2"
 
+"@wojtekmaj/date-utils@^1.1.3":
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/@wojtekmaj/date-utils/-/date-utils-1.5.1.tgz#c3cd67177ac781cfa5736219d702a55a2aea5f2b"
+  integrity sha512-+i7+JmNiE/3c9FKxzWFi2IjRJ+KzZl1QPu6QNrsgaa2MuBgXvUy4gA1TVzf/JMdIIloB76xSKikTWuyYAIVLww==
+
 "@wry/caches@^1.0.0":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@wry/caches/-/caches-1.0.1.tgz#8641fd3b6e09230b86ce8b93558d44cf1ece7e52"
@@ -4728,6 +4754,11 @@ cliui@^7.0.2:
     strip-ansi "^6.0.0"
     wrap-ansi "^7.0.0"
 
+clsx@^2.0.0, clsx@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.1.1.tgz#eed397c9fd8bd882bfb18deab7102049a2f32999"
+  integrity sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==
+
 clsx@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.1.0.tgz#e851283bcb5c80ee7608db18487433f7b23f77cb"
@@ -5215,6 +5246,16 @@ data-urls@^2.0.0:
     whatwg-mimetype "^2.3.0"
     whatwg-url "^8.0.0"
 
+date-fns@^3.6.0:
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-3.6.0.tgz#f20ca4fe94f8b754951b24240676e8618c0206bf"
+  integrity sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==
+
+dayjs@^1.11.11:
+  version "1.11.11"
+  resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.11.11.tgz#dfe0e9d54c5f8b68ccf8ca5f72ac603e7e5ed59e"
+  integrity sha512-okzr3f11N6WuqYtZSvm+F776mB41wRZMhKP+hc34YdW+KmtYYK9iqvHSwo2k9FEH3fhGXvOPV6yz2IcSrfRUDg==
+
 debug@2.6.9, debug@^2.6.0:
   version "2.6.9"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
@@ -5311,6 +5352,11 @@ destroy@1.2.0:
   resolved "https://registry.yarnpkg.com/destroy/-/destroy-1.2.0.tgz#4803735509ad8be552934c67df614f94e66fa015"
   integrity sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg==
 
+detect-element-overflow@^1.4.0:
+  version "1.4.2"
+  resolved "https://registry.yarnpkg.com/detect-element-overflow/-/detect-element-overflow-1.4.2.tgz#2e48509e5aa07647f4335b5f4f52c146b92f99c5"
+  integrity sha512-4m6cVOtvm/GJLjo7WFkPfwXoEIIbM7GQwIh4WEa4g7IsNi1YzwUsGL5ApNLrrHL29bHeNeQ+/iZhw+YHqgE2Fw==
+
 detect-newline@^3.0.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/detect-newline/-/detect-newline-3.1.0.tgz#576f5dfc63ae1a192ff192d8ad3af6308991b651"
@@ -6482,6 +6528,13 @@ get-symbol-description@^1.0.2:
     es-errors "^1.3.0"
     get-intrinsic "^1.2.4"
 
+get-user-locale@^2.2.1:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/get-user-locale/-/get-user-locale-2.3.2.tgz#d37ae6e670c2b57d23a96fb4d91e04b2059d52cf"
+  integrity sha512-O2GWvQkhnbDoWFUJfaBlDIKUEdND8ATpBXD6KXcbhxlfktyD/d8w6mkzM/IlQEqGZAMz/PW6j6Hv53BiigKLUQ==
+  dependencies:
+    mem "^8.0.0"
+
 glob-parent@^5.1.2, glob-parent@~5.1.2:
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.2.tgz#869832c58034fe68a4093c17dc15e8340d8401c4"
@@ -8214,6 +8267,11 @@ make-dir@^4.0.0:
   dependencies:
     semver "^7.5.3"
 
+make-event-props@^1.6.0:
+  version "1.6.2"
+  resolved "https://registry.yarnpkg.com/make-event-props/-/make-event-props-1.6.2.tgz#c8e0e48eb28b9b808730de38359f6341de7ec5a2"
+  integrity sha512-iDwf7mA03WPiR8QxvcVHmVWEPfMY1RZXerDVNCRYW7dUr2ppH3J58Rwb39/WG39yTZdRSxr3x+2v22tvI0VEvA==
+
 makeerror@1.0.12:
   version "1.0.12"
   resolved "https://registry.yarnpkg.com/makeerror/-/makeerror-1.0.12.tgz#3e5dd2079a82e812e983cc6610c4a2cb0eaa801a"
@@ -8221,6 +8279,13 @@ makeerror@1.0.12:
   dependencies:
     tmpl "1.0.5"
 
+map-age-cleaner@^0.1.3:
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/map-age-cleaner/-/map-age-cleaner-0.1.3.tgz#7d583a7306434c055fe474b0f45078e6e1b4b92a"
+  integrity sha512-bJzx6nMoP6PDLPBFmg7+xRKeFZvFboMrGlxmNj9ClvX53KrmvM5bXFXEWjbz4cz1AFn+jWJ9z/DJSz7hrs0w3w==
+  dependencies:
+    p-defer "^1.0.0"
+
 mdn-data@2.0.14:
   version "2.0.14"
   resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.14.tgz#7113fc4281917d63ce29b43446f701e68c25ba50"
@@ -8236,6 +8301,14 @@ media-typer@0.3.0:
   resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748"
   integrity sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==
 
+mem@^8.0.0:
+  version "8.1.1"
+  resolved "https://registry.yarnpkg.com/mem/-/mem-8.1.1.tgz#cf118b357c65ab7b7e0817bdf00c8062297c0122"
+  integrity sha512-qFCFUDs7U3b8mBDPyz5EToEKoAkgCzqquIgi9nkkR9bixxOVOre+09lbuH7+9Kn2NFpm56M3GUWVbU2hQgdACA==
+  dependencies:
+    map-age-cleaner "^0.1.3"
+    mimic-fn "^3.1.0"
+
 memfs@^3.1.2, memfs@^3.4.3:
   version "3.6.0"
   resolved "https://registry.yarnpkg.com/memfs/-/memfs-3.6.0.tgz#d7a2110f86f79dd950a8b6df6d57bc984aa185f6"
@@ -8293,6 +8366,11 @@ mimic-fn@^2.1.0:
   resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-2.1.0.tgz#7ed2c2ccccaf84d3ffcb7a69b57711fc2083401b"
   integrity sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==
 
+mimic-fn@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-3.1.0.tgz#65755145bbf3e36954b949c16450427451d5ca74"
+  integrity sha512-Ysbi9uYW9hFyfrThdDEQuykN4Ey6BuwPD2kpI5ES/nFTDn/98yxYNLZJcgUAKPT/mcrLLKaGzJR9YVxJrIdASQ==
+
 min-indent@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/min-indent/-/min-indent-1.0.1.tgz#a63f681673b30571fbe8bc25686ae746eefa9869"
@@ -8641,6 +8719,11 @@ optionator@^0.9.3:
     prelude-ls "^1.2.1"
     type-check "^0.4.0"
 
+p-defer@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/p-defer/-/p-defer-1.0.0.tgz#9f6eb182f6c9aa8cd743004a7d4f96b196b0fb0c"
+  integrity sha512-wB3wfAxZpk2AzOfUMJNL+d36xothRSyj8EXOa4f6GMqYDN9BJaaSISbsk+wS9abmnebVw95C2Kb5t85UmpCxuw==
+
 p-limit@^2.0.0, p-limit@^2.2.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-2.3.0.tgz#3dd33c647a214fdfffd835933eb086da0dc21db1"
@@ -9602,6 +9685,16 @@ react-bootstrap@^1.5.2:
     uncontrollable "^7.2.1"
     warning "^4.0.3"
 
+react-calendar@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/react-calendar/-/react-calendar-5.0.0.tgz#cf302db689ee1bba53d92644f7543e12164a7c0e"
+  integrity sha512-bHcE5e5f+VUKLd4R19BGkcSQLpuwjKBVG0fKz74cwPW5xDfNsReHdDbfd4z3mdjuUuZzVtw4Q920mkwK5/ZOEg==
+  dependencies:
+    "@wojtekmaj/date-utils" "^1.1.3"
+    clsx "^2.0.0"
+    get-user-locale "^2.2.1"
+    warning "^4.0.0"
+
 react-clientside-effect@^1.2.6:
   version "1.2.6"
   resolved "https://registry.yarnpkg.com/react-clientside-effect/-/react-clientside-effect-1.2.6.tgz#29f9b14e944a376b03fb650eed2a754dd128ea3a"
@@ -9609,6 +9702,19 @@ react-clientside-effect@^1.2.6:
   dependencies:
     "@babel/runtime" "^7.12.13"
 
+react-date-picker@^11.0.0:
+  version "11.0.0"
+  resolved "https://registry.yarnpkg.com/react-date-picker/-/react-date-picker-11.0.0.tgz#f7dc25e9a679f94ad44f11644ea0fdc541be1834"
+  integrity sha512-l+siu5HSZ/ciGL1293KCAHl4o9aD5rw16V4tB0C43h7QbMv2dWGgj7Dxgt8iztLaPVtEfOt/+sxNiTYw4WVq6A==
+  dependencies:
+    "@wojtekmaj/date-utils" "^1.1.3"
+    clsx "^2.0.0"
+    get-user-locale "^2.2.1"
+    make-event-props "^1.6.0"
+    react-calendar "^5.0.0"
+    react-fit "^2.0.0"
+    update-input-width "^1.4.0"
+
 react-dev-utils@^12.0.1:
   version "12.0.1"
   resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-12.0.1.tgz#ba92edb4a1f379bd46ccd6bcd4e7bc398df33e73"
@@ -9662,6 +9768,14 @@ react-fast-compare@3.2.2:
   resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.2.tgz#929a97a532304ce9fee4bcae44234f1ce2c21d49"
   integrity sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==
 
+react-fit@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/react-fit/-/react-fit-2.0.1.tgz#4bcb4de7aa94c9fdf452b0c63de0889496f50244"
+  integrity sha512-Eip6ALs/+6Jv82Si0I9UnfysdwVlAhkkZRycgmMdnj7jwUg69SVFp84ICxwB8zszkfvJJ2MGAAo9KAYM8ZUykQ==
+  dependencies:
+    detect-element-overflow "^1.4.0"
+    warning "^4.0.0"
+
 react-focus-lock@^2.9.4:
   version "2.11.2"
   resolved "https://registry.yarnpkg.com/react-focus-lock/-/react-focus-lock-2.11.2.tgz#dcc9a0dde630f0b9c694b823066f1b954c024422"
@@ -9689,6 +9803,11 @@ react-icons@^3.10.0:
   dependencies:
     camelcase "^5.0.0"
 
+react-icons@^5.2.1:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-5.2.1.tgz#28c2040917b2a2eda639b0f797bff1888e018e4a"
+  integrity sha512-zdbW5GstTzXaVKvGSyTaBalt7HSfuK5ovrzlpyiWHAFXndXTdd/1hdDHI4xBM1Mn7YriT6aqESucFl9kEXzrdw==
+
 "react-is@^16.12.0 || ^17.0.0 || ^18.0.0", react-is@^18.0.0, react-is@^18.2.0:
   version "18.2.0"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b"
@@ -11227,6 +11346,11 @@ update-browserslist-db@^1.0.13:
     escalade "^3.1.1"
     picocolors "^1.0.0"
 
+update-input-width@^1.4.0:
+  version "1.4.2"
+  resolved "https://registry.yarnpkg.com/update-input-width/-/update-input-width-1.4.2.tgz#49d327a39395185b0fd440b9c3b1d6f81173655c"
+  integrity sha512-/p0XLhrQQQ4bMWD7bL9duYObwYCO1qGr8R19xcMmoMSmXuQ7/1//veUnCObQ7/iW6E2pGS6rFkS4TfH4ur7e/g==
+
 uri-js@^4.2.2:
   version "4.4.1"
   resolved "https://registry.yarnpkg.com/uri-js/-/uri-js-4.4.1.tgz#9b1a52595225859e55f669d928f88c6c57f2a77e"
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 00000000..fe35805f
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,320 @@
+{
+  "name": "marillac-place",
+  "lockfileVersion": 2,
+  "requires": true,
+  "packages": {
+    "": {
+      "dependencies": {
+        "react-datepicker": "^6.9.0"
+      }
+    },
+    "node_modules/@floating-ui/core": {
+      "version": "1.6.2",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.2.tgz",
+      "integrity": "sha512-+2XpQV9LLZeanU4ZevzRnGFg2neDeKHgFLjP6YLW+tly0IvrhqT4u8enLGjLH3qeh85g19xY5rsAusfwTdn5lg==",
+      "dependencies": {
+        "@floating-ui/utils": "^0.2.0"
+      }
+    },
+    "node_modules/@floating-ui/dom": {
+      "version": "1.6.5",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.5.tgz",
+      "integrity": "sha512-Nsdud2X65Dz+1RHjAIP0t8z5e2ff/IRbei6BqFrl1urT8sDVzM1HMQ+R0XcU5ceRfyO3I6ayeqIfh+6Wb8LGTw==",
+      "dependencies": {
+        "@floating-ui/core": "^1.0.0",
+        "@floating-ui/utils": "^0.2.0"
+      }
+    },
+    "node_modules/@floating-ui/react": {
+      "version": "0.26.16",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react/-/react-0.26.16.tgz",
+      "integrity": "sha512-HEf43zxZNAI/E781QIVpYSF3K2VH4TTYZpqecjdsFkjsaU1EbaWcM++kw0HXFffj7gDUcBFevX8s0rQGQpxkow==",
+      "dependencies": {
+        "@floating-ui/react-dom": "^2.1.0",
+        "@floating-ui/utils": "^0.2.0",
+        "tabbable": "^6.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@floating-ui/react-dom": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.0.tgz",
+      "integrity": "sha512-lNzj5EQmEKn5FFKc04+zasr09h/uX8RtJRNj5gUXsSQIXHVWTVh+hVAg1vOMCexkX8EgvemMvIFpQfkosnVNyA==",
+      "dependencies": {
+        "@floating-ui/dom": "^1.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@floating-ui/utils": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.2.tgz",
+      "integrity": "sha512-J4yDIIthosAsRZ5CPYP/jQvUAQtlZTTD/4suA08/FEnlxqW3sKS9iAhgsa9VYLZ6vDHn/ixJgIqRQPotoBjxIw=="
+    },
+    "node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/date-fns": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-3.6.0.tgz",
+      "integrity": "sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/kossnocorp"
+      }
+    },
+    "node_modules/js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
+    },
+    "node_modules/loose-envify": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "dependencies": {
+        "js-tokens": "^3.0.0 || ^4.0.0"
+      },
+      "bin": {
+        "loose-envify": "cli.js"
+      }
+    },
+    "node_modules/object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/prop-types": {
+      "version": "15.8.1",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
+      "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+      "dependencies": {
+        "loose-envify": "^1.4.0",
+        "object-assign": "^4.1.1",
+        "react-is": "^16.13.1"
+      }
+    },
+    "node_modules/react": {
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
+      "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
+      "peer": true,
+      "dependencies": {
+        "loose-envify": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-datepicker": {
+      "version": "6.9.0",
+      "resolved": "https://registry.npmjs.org/react-datepicker/-/react-datepicker-6.9.0.tgz",
+      "integrity": "sha512-QTxuzeem7BUfVFWv+g5WuvzT0c5BPo+XTCNbMTZKSZQLU+cMMwSUHwspaxuIcDlwNcOH0tiJ+bh1fJ2yxOGYWA==",
+      "dependencies": {
+        "@floating-ui/react": "^0.26.2",
+        "clsx": "^2.1.0",
+        "date-fns": "^3.3.1",
+        "prop-types": "^15.7.2",
+        "react-onclickoutside": "^6.13.0"
+      },
+      "peerDependencies": {
+        "react": "^16.9.0 || ^17 || ^18",
+        "react-dom": "^16.9.0 || ^17 || ^18"
+      }
+    },
+    "node_modules/react-dom": {
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
+      "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
+      "peer": true,
+      "dependencies": {
+        "loose-envify": "^1.1.0",
+        "scheduler": "^0.23.2"
+      },
+      "peerDependencies": {
+        "react": "^18.3.1"
+      }
+    },
+    "node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+    },
+    "node_modules/react-onclickoutside": {
+      "version": "6.13.1",
+      "resolved": "https://registry.npmjs.org/react-onclickoutside/-/react-onclickoutside-6.13.1.tgz",
+      "integrity": "sha512-LdrrxK/Yh9zbBQdFbMTXPp3dTSN9B+9YJQucdDu3JNKRrbdU+H+/TVONJoWtOwy4II8Sqf1y/DTI6w/vGPYW0w==",
+      "funding": {
+        "type": "individual",
+        "url": "https://github.com/Pomax/react-onclickoutside/blob/master/FUNDING.md"
+      },
+      "peerDependencies": {
+        "react": "^15.5.x || ^16.x || ^17.x || ^18.x",
+        "react-dom": "^15.5.x || ^16.x || ^17.x || ^18.x"
+      }
+    },
+    "node_modules/scheduler": {
+      "version": "0.23.2",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz",
+      "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==",
+      "peer": true,
+      "dependencies": {
+        "loose-envify": "^1.1.0"
+      }
+    },
+    "node_modules/tabbable": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz",
+      "integrity": "sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew=="
+    }
+  },
+  "dependencies": {
+    "@floating-ui/core": {
+      "version": "1.6.2",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.2.tgz",
+      "integrity": "sha512-+2XpQV9LLZeanU4ZevzRnGFg2neDeKHgFLjP6YLW+tly0IvrhqT4u8enLGjLH3qeh85g19xY5rsAusfwTdn5lg==",
+      "requires": {
+        "@floating-ui/utils": "^0.2.0"
+      }
+    },
+    "@floating-ui/dom": {
+      "version": "1.6.5",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.5.tgz",
+      "integrity": "sha512-Nsdud2X65Dz+1RHjAIP0t8z5e2ff/IRbei6BqFrl1urT8sDVzM1HMQ+R0XcU5ceRfyO3I6ayeqIfh+6Wb8LGTw==",
+      "requires": {
+        "@floating-ui/core": "^1.0.0",
+        "@floating-ui/utils": "^0.2.0"
+      }
+    },
+    "@floating-ui/react": {
+      "version": "0.26.16",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react/-/react-0.26.16.tgz",
+      "integrity": "sha512-HEf43zxZNAI/E781QIVpYSF3K2VH4TTYZpqecjdsFkjsaU1EbaWcM++kw0HXFffj7gDUcBFevX8s0rQGQpxkow==",
+      "requires": {
+        "@floating-ui/react-dom": "^2.1.0",
+        "@floating-ui/utils": "^0.2.0",
+        "tabbable": "^6.0.0"
+      }
+    },
+    "@floating-ui/react-dom": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.0.tgz",
+      "integrity": "sha512-lNzj5EQmEKn5FFKc04+zasr09h/uX8RtJRNj5gUXsSQIXHVWTVh+hVAg1vOMCexkX8EgvemMvIFpQfkosnVNyA==",
+      "requires": {
+        "@floating-ui/dom": "^1.0.0"
+      }
+    },
+    "@floating-ui/utils": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.2.tgz",
+      "integrity": "sha512-J4yDIIthosAsRZ5CPYP/jQvUAQtlZTTD/4suA08/FEnlxqW3sKS9iAhgsa9VYLZ6vDHn/ixJgIqRQPotoBjxIw=="
+    },
+    "clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA=="
+    },
+    "date-fns": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-3.6.0.tgz",
+      "integrity": "sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww=="
+    },
+    "js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
+    },
+    "loose-envify": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "requires": {
+        "js-tokens": "^3.0.0 || ^4.0.0"
+      }
+    },
+    "object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg=="
+    },
+    "prop-types": {
+      "version": "15.8.1",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
+      "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+      "requires": {
+        "loose-envify": "^1.4.0",
+        "object-assign": "^4.1.1",
+        "react-is": "^16.13.1"
+      }
+    },
+    "react": {
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
+      "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
+      "peer": true,
+      "requires": {
+        "loose-envify": "^1.1.0"
+      }
+    },
+    "react-datepicker": {
+      "version": "6.9.0",
+      "resolved": "https://registry.npmjs.org/react-datepicker/-/react-datepicker-6.9.0.tgz",
+      "integrity": "sha512-QTxuzeem7BUfVFWv+g5WuvzT0c5BPo+XTCNbMTZKSZQLU+cMMwSUHwspaxuIcDlwNcOH0tiJ+bh1fJ2yxOGYWA==",
+      "requires": {
+        "@floating-ui/react": "^0.26.2",
+        "clsx": "^2.1.0",
+        "date-fns": "^3.3.1",
+        "prop-types": "^15.7.2",
+        "react-onclickoutside": "^6.13.0"
+      }
+    },
+    "react-dom": {
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
+      "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
+      "peer": true,
+      "requires": {
+        "loose-envify": "^1.1.0",
+        "scheduler": "^0.23.2"
+      }
+    },
+    "react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+    },
+    "react-onclickoutside": {
+      "version": "6.13.1",
+      "resolved": "https://registry.npmjs.org/react-onclickoutside/-/react-onclickoutside-6.13.1.tgz",
+      "integrity": "sha512-LdrrxK/Yh9zbBQdFbMTXPp3dTSN9B+9YJQucdDu3JNKRrbdU+H+/TVONJoWtOwy4II8Sqf1y/DTI6w/vGPYW0w==",
+      "requires": {}
+    },
+    "scheduler": {
+      "version": "0.23.2",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz",
+      "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==",
+      "peer": true,
+      "requires": {
+        "loose-envify": "^1.1.0"
+      }
+    },
+    "tabbable": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz",
+      "integrity": "sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew=="
+    }
+  }
+}
diff --git a/package.json b/package.json
new file mode 100644
index 00000000..62bee7fb
--- /dev/null
+++ b/package.json
@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "react-datepicker": "^6.9.0"
+  }
+}

From bab406a3279a5ea15b50fa24319c101201f7cd73 Mon Sep 17 00:00:00 2001
From: cindyhjli <cindy.hongjia.li16@gmail.com>
Date: Mon, 10 Jun 2024 21:43:14 -0400
Subject: [PATCH 4/9] completed modal with yyyy-mm-dd date format

---
 .../src/components/pages/tasks/TaskModal.tsx  | 57 +++++++++++--------
 1 file changed, 34 insertions(+), 23 deletions(-)

diff --git a/frontend/src/components/pages/tasks/TaskModal.tsx b/frontend/src/components/pages/tasks/TaskModal.tsx
index 3d03def3..31d40d0a 100644
--- a/frontend/src/components/pages/tasks/TaskModal.tsx
+++ b/frontend/src/components/pages/tasks/TaskModal.tsx
@@ -10,15 +10,16 @@ import {
   InputRightElement,
   InputGroup,
   Checkbox,
+  Container,
 } from "@chakra-ui/react";
 import VisibilityIcon from "@mui/icons-material/Visibility";
 import VisibilityOffIcon from "@mui/icons-material/VisibilityOff";
 import { TbTrash } from "react-icons/tb";
-import { format } from 'date-fns';
 import dayjs, { Dayjs } from 'dayjs';
 import { DatePicker } from '@mui/x-date-pickers/DatePicker';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import 'dayjs/locale/de';
 
 import ModalContainer from "../../common/ModalContainer";
 
@@ -120,8 +121,10 @@ const DateInput = ({
   setRecurrenceFrequency,
   submitPressed,
 }: {
-  dueDate: Dayjs | null;
-  setDueDate: React.Dispatch<React.SetStateAction<Dayjs | null>>;
+  // dueDate: Dayjs | null;
+  dueDate: string;
+  // setDueDate: React.Dispatch<React.SetStateAction<Dayjs | null>>;
+  setDueDate: React.Dispatch<React.SetStateAction<string>>;
   dueTime: string;
   setDueTime: React.Dispatch<React.SetStateAction<string>>;
   isAllDay: boolean;
@@ -174,27 +177,33 @@ const DateInput = ({
               // shouldOpenCalendar={() => false}
             />
           </div> */}
-          <LocalizationProvider dateAdapter={AdapterDayjs}>
+          {/* <LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale="de">
+            <DatePicker />
             <DatePicker
-              // label="Date Picker"
-              // // format="LL"
-              // value={dueDate}
-              // defaultValue={dayjs('2022-04-17')}
-              // onChange={
-              //   (date) => {
-              //     setDueDate(date as Dayjs | null);
-              //   }
-              // }
-              label="Controlled picker"
+              label="Date Picker"
+              format="LL"
               value={dueDate}
-              onChange={(newValue) => setDueDate(newValue)}
-            />
-          </LocalizationProvider>
+              defaultValue={dayjs('2022-04-17')}
+              onChange={
+                (date) => {
+                  setDueDate(date);
+                }
+              }
+            />          
+          </LocalizationProvider> */}
 
-
-          <LocalizationProvider dateAdapter={AdapterDayjs}>
-            <DatePicker />
-          </LocalizationProvider>
+          <Input
+            variant="primary"
+            mb={3}
+            borderColor={submitPressed && !dueTime ? "red.error" : "gray.300"}
+            boxShadow={
+              submitPressed && !dueTime ? "0 0 2px red.error" : "none"
+            }
+            type="date"
+            value={dueDate}
+            width="200px"
+            onChange={(e) => setDueDate(e.target.value)}
+          />
           
           <Text paddingX="10px" paddingY="4px">at</Text>
           <Select
@@ -261,7 +270,8 @@ const DateInput = ({
 const TaskModal = ({ isOpen, setIsOpen }: Props): React.ReactElement => {
   const [title, setTitle] = useState("");
   const [location, setLocation] = useState("");
-  const [dueDate, setDueDate] = useState<Dayjs | null>(dayjs().startOf('day'));
+  // const [dueDate, setDueDate] = useState<Dayjs | null>(dayjs().startOf('day'));
+  const [dueDate, setDueDate] = useState("");
   const [dueTime, setDueTime] = useState("");
   const [isAllDay, setIsAllDay] = useState(false);
   const [recurrenceFrequency, setRecurrenceFrequency] = useState("");
@@ -280,7 +290,8 @@ const TaskModal = ({ isOpen, setIsOpen }: Props): React.ReactElement => {
   const resetFormState = () => {
     setTitle("");
     setLocation("");
-    setDueDate(dayjs().startOf('day'));
+    // setDueDate(dayjs().startOf('day'));
+    setDueDate("");
     setDueTime("");
     setIsAllDay(false);
     setRecurrenceFrequency("");

From a699e4421e32ff13ed42e93ad7afbb267eb82701 Mon Sep 17 00:00:00 2001
From: liya-zhu <julia.liya.zhu@gmail.com>
Date: Mon, 24 Jun 2024 21:54:42 -0400
Subject: [PATCH 5/9] Cleaned up code

---
 frontend/package.json                         |   7 +-
 .../src/components/pages/tasks/TaskModal.tsx  |  87 +----
 frontend/yarn.lock                            | 155 +--------
 package-lock.json                             | 320 ------------------
 package.json                                  |   5 -
 5 files changed, 25 insertions(+), 549 deletions(-)
 delete mode 100644 package-lock.json
 delete mode 100644 package.json

diff --git a/frontend/package.json b/frontend/package.json
index d6721b92..dd6f119a 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -10,8 +10,7 @@
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
     "@mui/icons-material": "^5.15.14",
-    "@mui/material": "^5.15.19",
-    "@mui/x-date-pickers": "^7.6.1",
+    "@mui/material": "^5.15.14",
     "@rjsf/bootstrap-4": "^2.5.1",
     "@rjsf/core": "^2.5.1",
     "@testing-library/jest-dom": "^5.11.4",
@@ -28,8 +27,6 @@
     "apollo-upload-client": "^16.0.0",
     "axios": "^1.6.0",
     "bootstrap": "^4.6.0",
-    "date-fns": "^3.6.0",
-    "dayjs": "^1.11.11",
     "framer-motion": "^7.6.12",
     "graphql": "^15.5.0",
     "humps": "^2.0.1",
@@ -39,10 +36,8 @@
     "moment": "^2.30.1",
     "react": "^18.2.0",
     "react-bootstrap": "^1.5.2",
-    "react-date-picker": "^11.0.0",
     "react-dom": "^18.2.0",
     "react-google-login": "^5.2.2",
-    "react-icons": "^5.2.1",
     "react-json-schema": "^1.2.2",
     "react-jsonschema-form": "^1.8.1",
     "react-router-dom": "^6.4.3",
diff --git a/frontend/src/components/pages/tasks/TaskModal.tsx b/frontend/src/components/pages/tasks/TaskModal.tsx
index 31d40d0a..d70e9a3a 100644
--- a/frontend/src/components/pages/tasks/TaskModal.tsx
+++ b/frontend/src/components/pages/tasks/TaskModal.tsx
@@ -15,10 +15,6 @@ import {
 import VisibilityIcon from "@mui/icons-material/Visibility";
 import VisibilityOffIcon from "@mui/icons-material/VisibilityOff";
 import { TbTrash } from "react-icons/tb";
-import dayjs, { Dayjs } from 'dayjs';
-import { DatePicker } from '@mui/x-date-pickers/DatePicker';
-import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
-import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import 'dayjs/locale/de';
 
 import ModalContainer from "../../common/ModalContainer";
@@ -121,9 +117,7 @@ const DateInput = ({
   setRecurrenceFrequency,
   submitPressed,
 }: {
-  // dueDate: Dayjs | null;
   dueDate: string;
-  // setDueDate: React.Dispatch<React.SetStateAction<Dayjs | null>>;
   setDueDate: React.Dispatch<React.SetStateAction<string>>;
   dueTime: string;
   setDueTime: React.Dispatch<React.SetStateAction<string>>;
@@ -133,11 +127,6 @@ const DateInput = ({
   setRecurrenceFrequency: React.Dispatch<React.SetStateAction<string>>;
   submitPressed: boolean;
 }) => {
-  // const [selectedDate, setSelectedDate] = useState<Date | null>(new Date());
-  // const [selectedDate, setSelectedDate] = React.useState<Dayjs | null>(dayjs().startOf('day'));
-
-  const [calendarIsOpen, setCalendarIsOpen] = useState(false);
-
   return(
   <Flex flexDir="column" flex="1">
     <FormControl isRequired>
@@ -145,52 +134,7 @@ const DateInput = ({
         Due Date
       </FormLabel>
       <Flex flexDir="column">
-        <Flex flexDir="row">
-            {/* date starts */}
-          {/* <Input
-            variant="primary"
-            mb={3}
-            borderColor={submitPressed && !dueDate ? "red.error" : "gray.300"}
-            boxShadow={
-              submitPressed && !dueDate ? "0 0 2px red.error" : "none"
-            }
-            type="date"
-            value={dueDate}
-            width="200px"
-            onChange={(e) => setDueDate(e.target.value)}
-          /> */}
-          {/* <div>
-            <DatePicker 
-              onChange={(date) => {
-                setSelectedDate(date as Date | null);
-                setCalendarIsOpen(false);
-              }}
-              isOpen={calendarIsOpen}
-              value={selectedDate}
-              format="MMM dd, y" 
-              // shouldOpenCalendar={({ reason }) => reason !== 'focus'}
-              // format="yyyy-MM-dd" 
-              // calendarIcon={null}
-              // clearIcon={null}
-              required
-              closeCalendar
-              // shouldOpenCalendar={() => false}
-            />
-          </div> */}
-          {/* <LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale="de">
-            <DatePicker />
-            <DatePicker
-              label="Date Picker"
-              format="LL"
-              value={dueDate}
-              defaultValue={dayjs('2022-04-17')}
-              onChange={
-                (date) => {
-                  setDueDate(date);
-                }
-              }
-            />          
-          </LocalizationProvider> */}
+        <Flex flexDir="row">  
 
           <Input
             variant="primary"
@@ -226,18 +170,7 @@ const DateInput = ({
               </option>
             ))}
           </Select>
-          {/* <Input
-            variant="primary"
-            mb={3}
-            borderColor={submitPressed && !dueTime ? "red.error" : "gray.300"}
-            boxShadow={
-              submitPressed && !dueTime ? "0 0 2px red.error" : "none"
-            }
-            type="time"
-            value={dueTime}
-            width="200px"
-            onChange={(e) => setDueTime(e.target.value)}
-          /> */}
+          
         </Flex>
         <Flex alignItems="center">
           <Checkbox
@@ -270,7 +203,6 @@ const DateInput = ({
 const TaskModal = ({ isOpen, setIsOpen }: Props): React.ReactElement => {
   const [title, setTitle] = useState("");
   const [location, setLocation] = useState("");
-  // const [dueDate, setDueDate] = useState<Dayjs | null>(dayjs().startOf('day'));
   const [dueDate, setDueDate] = useState("");
   const [dueTime, setDueTime] = useState("");
   const [isAllDay, setIsAllDay] = useState(false);
@@ -290,7 +222,6 @@ const TaskModal = ({ isOpen, setIsOpen }: Props): React.ReactElement => {
   const resetFormState = () => {
     setTitle("");
     setLocation("");
-    // setDueDate(dayjs().startOf('day'));
     setDueDate("");
     setDueTime("");
     setIsAllDay(false);
@@ -308,16 +239,14 @@ const TaskModal = ({ isOpen, setIsOpen }: Props): React.ReactElement => {
       setMarillacBucks(`$${numberValue}`);
     }
   };
-  
+
+  // delete task api stuff
+  const handleDelete = () => { 
+    
+  }
 
   return (
-    <ModalContainer title="" isOpen={isOpen} setIsOpen={setIsOpen}>
-      <Flex justifyContent="space-between" paddingTop="0px">
-        <Text fontWeight="500" fontSize="20">Edit Chore</Text>
-        <Button variant="cancel" onClick={() => {}}>
-          <TbTrash style={{ color: "#E30000" }} /><span style={{ color: "#E30000" }}>&nbsp;Delete</span>
-        </Button>
-      </Flex>
+    <ModalContainer title="Edit Chore" isOpen={isOpen} setIsOpen={setIsOpen} onDelete={handleDelete}>
       <Flex flexDir="column" gap="20px">
         <FormField
           label="Task Name"
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index 23c19b64..aff5a049 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -1162,13 +1162,6 @@
   dependencies:
     regenerator-runtime "^0.14.0"
 
-"@babel/runtime@^7.24.6":
-  version "7.24.7"
-  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.24.7.tgz#f4f0d5530e8dbdf59b3451b9b3e594b6ba082e12"
-  integrity sha512-UwgBRMjJP+xv857DCngvqXI3Iq6J4v0wXmwc6sapg+zyhbwmQX67LUEFrkK5tbyJ30jGuG3ZvWpBiB9LCy1kWw==
-  dependencies:
-    regenerator-runtime "^0.14.0"
-
 "@babel/template@^7.22.15", "@babel/template@^7.23.9", "@babel/template@^7.3.3":
   version "7.23.9"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.23.9.tgz#f881d0487cba2828d3259dcb9ef5005a9731011a"
@@ -2711,7 +2704,7 @@
     hey-listen "^1.0.8"
     tslib "^2.3.1"
 
-"@mui/base@5.0.0-beta.40", "@mui/base@^5.0.0-beta.40":
+"@mui/base@5.0.0-beta.40":
   version "5.0.0-beta.40"
   resolved "https://registry.yarnpkg.com/@mui/base/-/base-5.0.0-beta.40.tgz#1f8a782f1fbf3f84a961e954c8176b187de3dae2"
   integrity sha512-I/lGHztkCzvwlXpjD2+SNmvNQvB4227xBXhISPjEaJUXGImOQ9f3D2Yj/T3KasSI/h0MLWy74X0J6clhPmsRbQ==
@@ -2724,10 +2717,10 @@
     clsx "^2.1.0"
     prop-types "^15.8.1"
 
-"@mui/core-downloads-tracker@^5.15.19":
-  version "5.15.19"
-  resolved "https://registry.yarnpkg.com/@mui/core-downloads-tracker/-/core-downloads-tracker-5.15.19.tgz#7af0025c871f126367a55219486681954e4821d7"
-  integrity sha512-tCHSi/Tomez9ERynFhZRvFO6n9ATyrPs+2N80DMDzp6xDVirbBjEwhPcE+x7Lj+nwYw0SqFkOxyvMP0irnm55w==
+"@mui/core-downloads-tracker@^5.15.14":
+  version "5.15.14"
+  resolved "https://registry.yarnpkg.com/@mui/core-downloads-tracker/-/core-downloads-tracker-5.15.14.tgz#f7c57b261904831877220182303761c012d05046"
+  integrity sha512-on75VMd0XqZfaQW+9pGjSNiqW+ghc5E2ZSLRBXwcXl/C4YzjfyjrLPhrEpKnR9Uym9KXBvxrhoHfPcczYHweyA==
 
 "@mui/icons-material@^5.15.14":
   version "5.15.14"
@@ -2736,15 +2729,15 @@
   dependencies:
     "@babel/runtime" "^7.23.9"
 
-"@mui/material@^5.15.19":
-  version "5.15.19"
-  resolved "https://registry.yarnpkg.com/@mui/material/-/material-5.15.19.tgz#a5bd50b6e68cee4ed39ea91dbecede5a020aaa97"
-  integrity sha512-lp5xQBbcRuxNtjpWU0BWZgIrv2XLUz4RJ0RqFXBdESIsKoGCQZ6P3wwU5ZPuj5TjssNiKv9AlM+vHopRxZhvVQ==
+"@mui/material@^5.15.14":
+  version "5.15.14"
+  resolved "https://registry.yarnpkg.com/@mui/material/-/material-5.15.14.tgz#a40bd5eccfa9fc925535e1f4d70c6cef77fa3a75"
+  integrity sha512-kEbRw6fASdQ1SQ7LVdWR5OlWV3y7Y54ZxkLzd6LV5tmz+NpO3MJKZXSfgR0LHMP7meKsPiMm4AuzV0pXDpk/BQ==
   dependencies:
     "@babel/runtime" "^7.23.9"
     "@mui/base" "5.0.0-beta.40"
-    "@mui/core-downloads-tracker" "^5.15.19"
-    "@mui/system" "^5.15.15"
+    "@mui/core-downloads-tracker" "^5.15.14"
+    "@mui/system" "^5.15.14"
     "@mui/types" "^7.2.14"
     "@mui/utils" "^5.15.14"
     "@types/react-transition-group" "^4.4.10"
@@ -2773,10 +2766,10 @@
     csstype "^3.1.3"
     prop-types "^15.8.1"
 
-"@mui/system@^5.15.15":
-  version "5.15.15"
-  resolved "https://registry.yarnpkg.com/@mui/system/-/system-5.15.15.tgz#658771b200ce3c4a0f28e58169f02e5e718d1c53"
-  integrity sha512-aulox6N1dnu5PABsfxVGOZffDVmlxPOVgj56HrUnJE8MCSh8lOvvkd47cebIVQQYAjpwieXQXiDPj5pwM40jTQ==
+"@mui/system@^5.15.14":
+  version "5.15.14"
+  resolved "https://registry.yarnpkg.com/@mui/system/-/system-5.15.14.tgz#8a0c6571077eeb6b5f1ff7aa7ff6a3dc4a14200d"
+  integrity sha512-auXLXzUaCSSOLqJXmsAaq7P96VPRXg2Rrz6OHNV7lr+kB8lobUF+/N84Vd9C4G/wvCXYPs5TYuuGBRhcGbiBGg==
   dependencies:
     "@babel/runtime" "^7.23.9"
     "@mui/private-theming" "^5.15.14"
@@ -2802,20 +2795,6 @@
     prop-types "^15.8.1"
     react-is "^18.2.0"
 
-"@mui/x-date-pickers@^7.6.1":
-  version "7.6.1"
-  resolved "https://registry.yarnpkg.com/@mui/x-date-pickers/-/x-date-pickers-7.6.1.tgz#39aab46e785f885c19d324e637d7312ded6f636d"
-  integrity sha512-erSq5cnOUyBgBmpHnMxIit5yhT3bl/lOaNZKpObvJtvEJetvNA9xWQ7dz/J/AufLzDuvThjusuRD0y+GmeXtiw==
-  dependencies:
-    "@babel/runtime" "^7.24.6"
-    "@mui/base" "^5.0.0-beta.40"
-    "@mui/system" "^5.15.15"
-    "@mui/utils" "^5.15.14"
-    "@types/react-transition-group" "^4.4.10"
-    clsx "^2.1.1"
-    prop-types "^15.8.1"
-    react-transition-group "^4.4.5"
-
 "@nicolo-ribaudo/eslint-scope-5-internals@5.1.1-v1":
   version "5.1.1-v1"
   resolved "https://registry.yarnpkg.com/@nicolo-ribaudo/eslint-scope-5-internals/-/eslint-scope-5-internals-5.1.1-v1.tgz#dbf733a965ca47b1973177dc0bb6c889edcfb129"
@@ -3878,11 +3857,6 @@
     "@webassemblyjs/ast" "1.11.6"
     "@xtuc/long" "4.2.2"
 
-"@wojtekmaj/date-utils@^1.1.3":
-  version "1.5.1"
-  resolved "https://registry.yarnpkg.com/@wojtekmaj/date-utils/-/date-utils-1.5.1.tgz#c3cd67177ac781cfa5736219d702a55a2aea5f2b"
-  integrity sha512-+i7+JmNiE/3c9FKxzWFi2IjRJ+KzZl1QPu6QNrsgaa2MuBgXvUy4gA1TVzf/JMdIIloB76xSKikTWuyYAIVLww==
-
 "@wry/caches@^1.0.0":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@wry/caches/-/caches-1.0.1.tgz#8641fd3b6e09230b86ce8b93558d44cf1ece7e52"
@@ -4754,11 +4728,6 @@ cliui@^7.0.2:
     strip-ansi "^6.0.0"
     wrap-ansi "^7.0.0"
 
-clsx@^2.0.0, clsx@^2.1.1:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.1.1.tgz#eed397c9fd8bd882bfb18deab7102049a2f32999"
-  integrity sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==
-
 clsx@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.1.0.tgz#e851283bcb5c80ee7608db18487433f7b23f77cb"
@@ -5246,16 +5215,6 @@ data-urls@^2.0.0:
     whatwg-mimetype "^2.3.0"
     whatwg-url "^8.0.0"
 
-date-fns@^3.6.0:
-  version "3.6.0"
-  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-3.6.0.tgz#f20ca4fe94f8b754951b24240676e8618c0206bf"
-  integrity sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==
-
-dayjs@^1.11.11:
-  version "1.11.11"
-  resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.11.11.tgz#dfe0e9d54c5f8b68ccf8ca5f72ac603e7e5ed59e"
-  integrity sha512-okzr3f11N6WuqYtZSvm+F776mB41wRZMhKP+hc34YdW+KmtYYK9iqvHSwo2k9FEH3fhGXvOPV6yz2IcSrfRUDg==
-
 debug@2.6.9, debug@^2.6.0:
   version "2.6.9"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
@@ -5352,11 +5311,6 @@ destroy@1.2.0:
   resolved "https://registry.yarnpkg.com/destroy/-/destroy-1.2.0.tgz#4803735509ad8be552934c67df614f94e66fa015"
   integrity sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg==
 
-detect-element-overflow@^1.4.0:
-  version "1.4.2"
-  resolved "https://registry.yarnpkg.com/detect-element-overflow/-/detect-element-overflow-1.4.2.tgz#2e48509e5aa07647f4335b5f4f52c146b92f99c5"
-  integrity sha512-4m6cVOtvm/GJLjo7WFkPfwXoEIIbM7GQwIh4WEa4g7IsNi1YzwUsGL5ApNLrrHL29bHeNeQ+/iZhw+YHqgE2Fw==
-
 detect-newline@^3.0.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/detect-newline/-/detect-newline-3.1.0.tgz#576f5dfc63ae1a192ff192d8ad3af6308991b651"
@@ -6528,13 +6482,6 @@ get-symbol-description@^1.0.2:
     es-errors "^1.3.0"
     get-intrinsic "^1.2.4"
 
-get-user-locale@^2.2.1:
-  version "2.3.2"
-  resolved "https://registry.yarnpkg.com/get-user-locale/-/get-user-locale-2.3.2.tgz#d37ae6e670c2b57d23a96fb4d91e04b2059d52cf"
-  integrity sha512-O2GWvQkhnbDoWFUJfaBlDIKUEdND8ATpBXD6KXcbhxlfktyD/d8w6mkzM/IlQEqGZAMz/PW6j6Hv53BiigKLUQ==
-  dependencies:
-    mem "^8.0.0"
-
 glob-parent@^5.1.2, glob-parent@~5.1.2:
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.2.tgz#869832c58034fe68a4093c17dc15e8340d8401c4"
@@ -8267,11 +8214,6 @@ make-dir@^4.0.0:
   dependencies:
     semver "^7.5.3"
 
-make-event-props@^1.6.0:
-  version "1.6.2"
-  resolved "https://registry.yarnpkg.com/make-event-props/-/make-event-props-1.6.2.tgz#c8e0e48eb28b9b808730de38359f6341de7ec5a2"
-  integrity sha512-iDwf7mA03WPiR8QxvcVHmVWEPfMY1RZXerDVNCRYW7dUr2ppH3J58Rwb39/WG39yTZdRSxr3x+2v22tvI0VEvA==
-
 makeerror@1.0.12:
   version "1.0.12"
   resolved "https://registry.yarnpkg.com/makeerror/-/makeerror-1.0.12.tgz#3e5dd2079a82e812e983cc6610c4a2cb0eaa801a"
@@ -8279,13 +8221,6 @@ makeerror@1.0.12:
   dependencies:
     tmpl "1.0.5"
 
-map-age-cleaner@^0.1.3:
-  version "0.1.3"
-  resolved "https://registry.yarnpkg.com/map-age-cleaner/-/map-age-cleaner-0.1.3.tgz#7d583a7306434c055fe474b0f45078e6e1b4b92a"
-  integrity sha512-bJzx6nMoP6PDLPBFmg7+xRKeFZvFboMrGlxmNj9ClvX53KrmvM5bXFXEWjbz4cz1AFn+jWJ9z/DJSz7hrs0w3w==
-  dependencies:
-    p-defer "^1.0.0"
-
 mdn-data@2.0.14:
   version "2.0.14"
   resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.14.tgz#7113fc4281917d63ce29b43446f701e68c25ba50"
@@ -8301,14 +8236,6 @@ media-typer@0.3.0:
   resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748"
   integrity sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==
 
-mem@^8.0.0:
-  version "8.1.1"
-  resolved "https://registry.yarnpkg.com/mem/-/mem-8.1.1.tgz#cf118b357c65ab7b7e0817bdf00c8062297c0122"
-  integrity sha512-qFCFUDs7U3b8mBDPyz5EToEKoAkgCzqquIgi9nkkR9bixxOVOre+09lbuH7+9Kn2NFpm56M3GUWVbU2hQgdACA==
-  dependencies:
-    map-age-cleaner "^0.1.3"
-    mimic-fn "^3.1.0"
-
 memfs@^3.1.2, memfs@^3.4.3:
   version "3.6.0"
   resolved "https://registry.yarnpkg.com/memfs/-/memfs-3.6.0.tgz#d7a2110f86f79dd950a8b6df6d57bc984aa185f6"
@@ -8366,11 +8293,6 @@ mimic-fn@^2.1.0:
   resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-2.1.0.tgz#7ed2c2ccccaf84d3ffcb7a69b57711fc2083401b"
   integrity sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==
 
-mimic-fn@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-3.1.0.tgz#65755145bbf3e36954b949c16450427451d5ca74"
-  integrity sha512-Ysbi9uYW9hFyfrThdDEQuykN4Ey6BuwPD2kpI5ES/nFTDn/98yxYNLZJcgUAKPT/mcrLLKaGzJR9YVxJrIdASQ==
-
 min-indent@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/min-indent/-/min-indent-1.0.1.tgz#a63f681673b30571fbe8bc25686ae746eefa9869"
@@ -8719,11 +8641,6 @@ optionator@^0.9.3:
     prelude-ls "^1.2.1"
     type-check "^0.4.0"
 
-p-defer@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/p-defer/-/p-defer-1.0.0.tgz#9f6eb182f6c9aa8cd743004a7d4f96b196b0fb0c"
-  integrity sha512-wB3wfAxZpk2AzOfUMJNL+d36xothRSyj8EXOa4f6GMqYDN9BJaaSISbsk+wS9abmnebVw95C2Kb5t85UmpCxuw==
-
 p-limit@^2.0.0, p-limit@^2.2.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-2.3.0.tgz#3dd33c647a214fdfffd835933eb086da0dc21db1"
@@ -9685,16 +9602,6 @@ react-bootstrap@^1.5.2:
     uncontrollable "^7.2.1"
     warning "^4.0.3"
 
-react-calendar@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/react-calendar/-/react-calendar-5.0.0.tgz#cf302db689ee1bba53d92644f7543e12164a7c0e"
-  integrity sha512-bHcE5e5f+VUKLd4R19BGkcSQLpuwjKBVG0fKz74cwPW5xDfNsReHdDbfd4z3mdjuUuZzVtw4Q920mkwK5/ZOEg==
-  dependencies:
-    "@wojtekmaj/date-utils" "^1.1.3"
-    clsx "^2.0.0"
-    get-user-locale "^2.2.1"
-    warning "^4.0.0"
-
 react-clientside-effect@^1.2.6:
   version "1.2.6"
   resolved "https://registry.yarnpkg.com/react-clientside-effect/-/react-clientside-effect-1.2.6.tgz#29f9b14e944a376b03fb650eed2a754dd128ea3a"
@@ -9702,19 +9609,6 @@ react-clientside-effect@^1.2.6:
   dependencies:
     "@babel/runtime" "^7.12.13"
 
-react-date-picker@^11.0.0:
-  version "11.0.0"
-  resolved "https://registry.yarnpkg.com/react-date-picker/-/react-date-picker-11.0.0.tgz#f7dc25e9a679f94ad44f11644ea0fdc541be1834"
-  integrity sha512-l+siu5HSZ/ciGL1293KCAHl4o9aD5rw16V4tB0C43h7QbMv2dWGgj7Dxgt8iztLaPVtEfOt/+sxNiTYw4WVq6A==
-  dependencies:
-    "@wojtekmaj/date-utils" "^1.1.3"
-    clsx "^2.0.0"
-    get-user-locale "^2.2.1"
-    make-event-props "^1.6.0"
-    react-calendar "^5.0.0"
-    react-fit "^2.0.0"
-    update-input-width "^1.4.0"
-
 react-dev-utils@^12.0.1:
   version "12.0.1"
   resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-12.0.1.tgz#ba92edb4a1f379bd46ccd6bcd4e7bc398df33e73"
@@ -9768,14 +9662,6 @@ react-fast-compare@3.2.2:
   resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.2.tgz#929a97a532304ce9fee4bcae44234f1ce2c21d49"
   integrity sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==
 
-react-fit@^2.0.0:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/react-fit/-/react-fit-2.0.1.tgz#4bcb4de7aa94c9fdf452b0c63de0889496f50244"
-  integrity sha512-Eip6ALs/+6Jv82Si0I9UnfysdwVlAhkkZRycgmMdnj7jwUg69SVFp84ICxwB8zszkfvJJ2MGAAo9KAYM8ZUykQ==
-  dependencies:
-    detect-element-overflow "^1.4.0"
-    warning "^4.0.0"
-
 react-focus-lock@^2.9.4:
   version "2.11.2"
   resolved "https://registry.yarnpkg.com/react-focus-lock/-/react-focus-lock-2.11.2.tgz#dcc9a0dde630f0b9c694b823066f1b954c024422"
@@ -9803,11 +9689,6 @@ react-icons@^3.10.0:
   dependencies:
     camelcase "^5.0.0"
 
-react-icons@^5.2.1:
-  version "5.2.1"
-  resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-5.2.1.tgz#28c2040917b2a2eda639b0f797bff1888e018e4a"
-  integrity sha512-zdbW5GstTzXaVKvGSyTaBalt7HSfuK5ovrzlpyiWHAFXndXTdd/1hdDHI4xBM1Mn7YriT6aqESucFl9kEXzrdw==
-
 "react-is@^16.12.0 || ^17.0.0 || ^18.0.0", react-is@^18.0.0, react-is@^18.2.0:
   version "18.2.0"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b"
@@ -11346,11 +11227,6 @@ update-browserslist-db@^1.0.13:
     escalade "^3.1.1"
     picocolors "^1.0.0"
 
-update-input-width@^1.4.0:
-  version "1.4.2"
-  resolved "https://registry.yarnpkg.com/update-input-width/-/update-input-width-1.4.2.tgz#49d327a39395185b0fd440b9c3b1d6f81173655c"
-  integrity sha512-/p0XLhrQQQ4bMWD7bL9duYObwYCO1qGr8R19xcMmoMSmXuQ7/1//veUnCObQ7/iW6E2pGS6rFkS4TfH4ur7e/g==
-
 uri-js@^4.2.2:
   version "4.4.1"
   resolved "https://registry.yarnpkg.com/uri-js/-/uri-js-4.4.1.tgz#9b1a52595225859e55f669d928f88c6c57f2a77e"
@@ -12023,3 +11899,4 @@ zen-observable@0.8.15:
   version "0.8.15"
   resolved "https://registry.yarnpkg.com/zen-observable/-/zen-observable-0.8.15.tgz#96415c512d8e3ffd920afd3889604e30b9eaac15"
   integrity sha512-PQ2PC7R9rslx84ndNBZB/Dkv8V8fZEpk83RLgXtYd0fwUgEjseMn1Dgajh2x6S8QbZAFa9p2qVCEuYZNgve0dQ==
+  
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
deleted file mode 100644
index fe35805f..00000000
--- a/package-lock.json
+++ /dev/null
@@ -1,320 +0,0 @@
-{
-  "name": "marillac-place",
-  "lockfileVersion": 2,
-  "requires": true,
-  "packages": {
-    "": {
-      "dependencies": {
-        "react-datepicker": "^6.9.0"
-      }
-    },
-    "node_modules/@floating-ui/core": {
-      "version": "1.6.2",
-      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.2.tgz",
-      "integrity": "sha512-+2XpQV9LLZeanU4ZevzRnGFg2neDeKHgFLjP6YLW+tly0IvrhqT4u8enLGjLH3qeh85g19xY5rsAusfwTdn5lg==",
-      "dependencies": {
-        "@floating-ui/utils": "^0.2.0"
-      }
-    },
-    "node_modules/@floating-ui/dom": {
-      "version": "1.6.5",
-      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.5.tgz",
-      "integrity": "sha512-Nsdud2X65Dz+1RHjAIP0t8z5e2ff/IRbei6BqFrl1urT8sDVzM1HMQ+R0XcU5ceRfyO3I6ayeqIfh+6Wb8LGTw==",
-      "dependencies": {
-        "@floating-ui/core": "^1.0.0",
-        "@floating-ui/utils": "^0.2.0"
-      }
-    },
-    "node_modules/@floating-ui/react": {
-      "version": "0.26.16",
-      "resolved": "https://registry.npmjs.org/@floating-ui/react/-/react-0.26.16.tgz",
-      "integrity": "sha512-HEf43zxZNAI/E781QIVpYSF3K2VH4TTYZpqecjdsFkjsaU1EbaWcM++kw0HXFffj7gDUcBFevX8s0rQGQpxkow==",
-      "dependencies": {
-        "@floating-ui/react-dom": "^2.1.0",
-        "@floating-ui/utils": "^0.2.0",
-        "tabbable": "^6.0.0"
-      },
-      "peerDependencies": {
-        "react": ">=16.8.0",
-        "react-dom": ">=16.8.0"
-      }
-    },
-    "node_modules/@floating-ui/react-dom": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.0.tgz",
-      "integrity": "sha512-lNzj5EQmEKn5FFKc04+zasr09h/uX8RtJRNj5gUXsSQIXHVWTVh+hVAg1vOMCexkX8EgvemMvIFpQfkosnVNyA==",
-      "dependencies": {
-        "@floating-ui/dom": "^1.0.0"
-      },
-      "peerDependencies": {
-        "react": ">=16.8.0",
-        "react-dom": ">=16.8.0"
-      }
-    },
-    "node_modules/@floating-ui/utils": {
-      "version": "0.2.2",
-      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.2.tgz",
-      "integrity": "sha512-J4yDIIthosAsRZ5CPYP/jQvUAQtlZTTD/4suA08/FEnlxqW3sKS9iAhgsa9VYLZ6vDHn/ixJgIqRQPotoBjxIw=="
-    },
-    "node_modules/clsx": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
-      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
-      "engines": {
-        "node": ">=6"
-      }
-    },
-    "node_modules/date-fns": {
-      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-3.6.0.tgz",
-      "integrity": "sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==",
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/kossnocorp"
-      }
-    },
-    "node_modules/js-tokens": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
-      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
-    },
-    "node_modules/loose-envify": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
-      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
-      "dependencies": {
-        "js-tokens": "^3.0.0 || ^4.0.0"
-      },
-      "bin": {
-        "loose-envify": "cli.js"
-      }
-    },
-    "node_modules/object-assign": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
-      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/prop-types": {
-      "version": "15.8.1",
-      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
-      "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
-      "dependencies": {
-        "loose-envify": "^1.4.0",
-        "object-assign": "^4.1.1",
-        "react-is": "^16.13.1"
-      }
-    },
-    "node_modules/react": {
-      "version": "18.3.1",
-      "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
-      "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
-      "peer": true,
-      "dependencies": {
-        "loose-envify": "^1.1.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/react-datepicker": {
-      "version": "6.9.0",
-      "resolved": "https://registry.npmjs.org/react-datepicker/-/react-datepicker-6.9.0.tgz",
-      "integrity": "sha512-QTxuzeem7BUfVFWv+g5WuvzT0c5BPo+XTCNbMTZKSZQLU+cMMwSUHwspaxuIcDlwNcOH0tiJ+bh1fJ2yxOGYWA==",
-      "dependencies": {
-        "@floating-ui/react": "^0.26.2",
-        "clsx": "^2.1.0",
-        "date-fns": "^3.3.1",
-        "prop-types": "^15.7.2",
-        "react-onclickoutside": "^6.13.0"
-      },
-      "peerDependencies": {
-        "react": "^16.9.0 || ^17 || ^18",
-        "react-dom": "^16.9.0 || ^17 || ^18"
-      }
-    },
-    "node_modules/react-dom": {
-      "version": "18.3.1",
-      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
-      "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
-      "peer": true,
-      "dependencies": {
-        "loose-envify": "^1.1.0",
-        "scheduler": "^0.23.2"
-      },
-      "peerDependencies": {
-        "react": "^18.3.1"
-      }
-    },
-    "node_modules/react-is": {
-      "version": "16.13.1",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
-      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
-    },
-    "node_modules/react-onclickoutside": {
-      "version": "6.13.1",
-      "resolved": "https://registry.npmjs.org/react-onclickoutside/-/react-onclickoutside-6.13.1.tgz",
-      "integrity": "sha512-LdrrxK/Yh9zbBQdFbMTXPp3dTSN9B+9YJQucdDu3JNKRrbdU+H+/TVONJoWtOwy4II8Sqf1y/DTI6w/vGPYW0w==",
-      "funding": {
-        "type": "individual",
-        "url": "https://github.com/Pomax/react-onclickoutside/blob/master/FUNDING.md"
-      },
-      "peerDependencies": {
-        "react": "^15.5.x || ^16.x || ^17.x || ^18.x",
-        "react-dom": "^15.5.x || ^16.x || ^17.x || ^18.x"
-      }
-    },
-    "node_modules/scheduler": {
-      "version": "0.23.2",
-      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz",
-      "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==",
-      "peer": true,
-      "dependencies": {
-        "loose-envify": "^1.1.0"
-      }
-    },
-    "node_modules/tabbable": {
-      "version": "6.2.0",
-      "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz",
-      "integrity": "sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew=="
-    }
-  },
-  "dependencies": {
-    "@floating-ui/core": {
-      "version": "1.6.2",
-      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.2.tgz",
-      "integrity": "sha512-+2XpQV9LLZeanU4ZevzRnGFg2neDeKHgFLjP6YLW+tly0IvrhqT4u8enLGjLH3qeh85g19xY5rsAusfwTdn5lg==",
-      "requires": {
-        "@floating-ui/utils": "^0.2.0"
-      }
-    },
-    "@floating-ui/dom": {
-      "version": "1.6.5",
-      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.5.tgz",
-      "integrity": "sha512-Nsdud2X65Dz+1RHjAIP0t8z5e2ff/IRbei6BqFrl1urT8sDVzM1HMQ+R0XcU5ceRfyO3I6ayeqIfh+6Wb8LGTw==",
-      "requires": {
-        "@floating-ui/core": "^1.0.0",
-        "@floating-ui/utils": "^0.2.0"
-      }
-    },
-    "@floating-ui/react": {
-      "version": "0.26.16",
-      "resolved": "https://registry.npmjs.org/@floating-ui/react/-/react-0.26.16.tgz",
-      "integrity": "sha512-HEf43zxZNAI/E781QIVpYSF3K2VH4TTYZpqecjdsFkjsaU1EbaWcM++kw0HXFffj7gDUcBFevX8s0rQGQpxkow==",
-      "requires": {
-        "@floating-ui/react-dom": "^2.1.0",
-        "@floating-ui/utils": "^0.2.0",
-        "tabbable": "^6.0.0"
-      }
-    },
-    "@floating-ui/react-dom": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.0.tgz",
-      "integrity": "sha512-lNzj5EQmEKn5FFKc04+zasr09h/uX8RtJRNj5gUXsSQIXHVWTVh+hVAg1vOMCexkX8EgvemMvIFpQfkosnVNyA==",
-      "requires": {
-        "@floating-ui/dom": "^1.0.0"
-      }
-    },
-    "@floating-ui/utils": {
-      "version": "0.2.2",
-      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.2.tgz",
-      "integrity": "sha512-J4yDIIthosAsRZ5CPYP/jQvUAQtlZTTD/4suA08/FEnlxqW3sKS9iAhgsa9VYLZ6vDHn/ixJgIqRQPotoBjxIw=="
-    },
-    "clsx": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
-      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA=="
-    },
-    "date-fns": {
-      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-3.6.0.tgz",
-      "integrity": "sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww=="
-    },
-    "js-tokens": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
-      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
-    },
-    "loose-envify": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
-      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
-      "requires": {
-        "js-tokens": "^3.0.0 || ^4.0.0"
-      }
-    },
-    "object-assign": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
-      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg=="
-    },
-    "prop-types": {
-      "version": "15.8.1",
-      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
-      "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
-      "requires": {
-        "loose-envify": "^1.4.0",
-        "object-assign": "^4.1.1",
-        "react-is": "^16.13.1"
-      }
-    },
-    "react": {
-      "version": "18.3.1",
-      "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
-      "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
-      "peer": true,
-      "requires": {
-        "loose-envify": "^1.1.0"
-      }
-    },
-    "react-datepicker": {
-      "version": "6.9.0",
-      "resolved": "https://registry.npmjs.org/react-datepicker/-/react-datepicker-6.9.0.tgz",
-      "integrity": "sha512-QTxuzeem7BUfVFWv+g5WuvzT0c5BPo+XTCNbMTZKSZQLU+cMMwSUHwspaxuIcDlwNcOH0tiJ+bh1fJ2yxOGYWA==",
-      "requires": {
-        "@floating-ui/react": "^0.26.2",
-        "clsx": "^2.1.0",
-        "date-fns": "^3.3.1",
-        "prop-types": "^15.7.2",
-        "react-onclickoutside": "^6.13.0"
-      }
-    },
-    "react-dom": {
-      "version": "18.3.1",
-      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
-      "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
-      "peer": true,
-      "requires": {
-        "loose-envify": "^1.1.0",
-        "scheduler": "^0.23.2"
-      }
-    },
-    "react-is": {
-      "version": "16.13.1",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
-      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
-    },
-    "react-onclickoutside": {
-      "version": "6.13.1",
-      "resolved": "https://registry.npmjs.org/react-onclickoutside/-/react-onclickoutside-6.13.1.tgz",
-      "integrity": "sha512-LdrrxK/Yh9zbBQdFbMTXPp3dTSN9B+9YJQucdDu3JNKRrbdU+H+/TVONJoWtOwy4II8Sqf1y/DTI6w/vGPYW0w==",
-      "requires": {}
-    },
-    "scheduler": {
-      "version": "0.23.2",
-      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz",
-      "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==",
-      "peer": true,
-      "requires": {
-        "loose-envify": "^1.1.0"
-      }
-    },
-    "tabbable": {
-      "version": "6.2.0",
-      "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz",
-      "integrity": "sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew=="
-    }
-  }
-}
diff --git a/package.json b/package.json
deleted file mode 100644
index 62bee7fb..00000000
--- a/package.json
+++ /dev/null
@@ -1,5 +0,0 @@
-{
-  "dependencies": {
-    "react-datepicker": "^6.9.0"
-  }
-}

From 69b88143e562ab70ad8173e1cc0da3cf498c85a6 Mon Sep 17 00:00:00 2001
From: KathleenX7 <kxiong1210@gmail.com>
Date: Wed, 3 Jul 2024 20:57:43 -0400
Subject: [PATCH 6/9] finish task modal and make Form Field its own file

---
 frontend/package.json                         |  1 +
 frontend/src/App.tsx                          |  4 +-
 frontend/src/components/common/FormField.tsx  | 86 +++++++++++++++++++
 .../pages/residents/ResidentModal.tsx         | 58 +------------
 .../src/components/pages/tasks/TaskModal.tsx  | 78 +++--------------
 frontend/src/theme/inputs.ts                  |  1 -
 frontend/yarn.lock                            |  6 +-
 7 files changed, 106 insertions(+), 128 deletions(-)
 create mode 100644 frontend/src/components/common/FormField.tsx

diff --git a/frontend/package.json b/frontend/package.json
index dd6f119a..65defb85 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -38,6 +38,7 @@
     "react-bootstrap": "^1.5.2",
     "react-dom": "^18.2.0",
     "react-google-login": "^5.2.2",
+    "react-icons": "^5.2.1",
     "react-json-schema": "^1.2.2",
     "react-jsonschema-form": "^1.8.1",
     "react-router-dom": "^6.4.3",
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index a88061f6..06381ce0 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -115,9 +115,9 @@ const App = (): React.ReactElement => {
                 <Route
                   path={Routes.RESIDENTS_PAGE}
                   element={
-                    <PrivateRoute>
+                    // <PrivateRoute>
                       <ResidentsPage />
-                    </PrivateRoute>
+                    // </PrivateRoute>
                   }
                 />
                 <Route
diff --git a/frontend/src/components/common/FormField.tsx b/frontend/src/components/common/FormField.tsx
new file mode 100644
index 00000000..7fe66327
--- /dev/null
+++ b/frontend/src/components/common/FormField.tsx
@@ -0,0 +1,86 @@
+import React from "react";
+import {
+  Button,
+  Input,
+  Select,
+  Flex,
+  FormControl,
+  FormLabel,
+  InputRightElement,
+  InputGroup,
+  InputLeftElement,
+  Checkbox,
+  Container,
+} from "@chakra-ui/react";
+
+import VisibilityIcon from "@mui/icons-material/Visibility";
+import VisibilityOffIcon from "@mui/icons-material/VisibilityOff";
+
+const FormField = ({
+  label,
+  value,
+  type = "text",
+  onChange,
+  onBlur,
+  submitPressed,
+  required = false,
+  isPassword = false,
+  showPassword,
+  setShowPassword,
+  leftElement
+}: {
+  label: string;
+  value: string;
+  type?: string;
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  onBlur?: () => void;
+  submitPressed: boolean;
+  required?: boolean;
+  isPassword?: boolean;
+  showPassword?: boolean;
+  setShowPassword?: React.Dispatch<React.SetStateAction<boolean>>;
+  leftElement?: string;
+}) => (
+  <Flex flexDir="column" flex="1">
+    <FormControl isRequired={required}>
+      <FormLabel mb="5px" color="gray.main" fontWeight="700">
+        {label}
+      </FormLabel>
+      <InputGroup>
+        {leftElement && <InputLeftElement height='34px' pointerEvents='none' color='black'>
+          <Flex>{leftElement}</Flex>
+        </InputLeftElement>}
+
+        <Input
+          variant="primary"
+          placeholder='Enter amount'
+          borderColor={submitPressed && !value ? "red.error" : "gray.300"}
+          boxShadow={submitPressed && !value ? "0 0 2px red.error" : "none"}
+          type={
+            isPassword && setShowPassword && !showPassword ? "password" : type
+          }
+          value={value}
+          onChange={onChange}
+          onBlur={onBlur}
+        />
+        {isPassword && setShowPassword && (
+          <InputRightElement h="34px">
+            <Button
+              onClick={() => setShowPassword(!showPassword)}
+              bg="transparent"
+              _hover={{ bg: "transparent" }}
+            >
+              {!showPassword ? (
+                <VisibilityIcon fontSize="small" />
+              ) : (
+                <VisibilityOffIcon fontSize="small" />
+              )}
+            </Button>
+          </InputRightElement>
+        )}
+      </InputGroup>
+    </FormControl>
+  </Flex>
+);
+
+export default FormField;
diff --git a/frontend/src/components/pages/residents/ResidentModal.tsx b/frontend/src/components/pages/residents/ResidentModal.tsx
index 9b0915a7..44527c54 100644
--- a/frontend/src/components/pages/residents/ResidentModal.tsx
+++ b/frontend/src/components/pages/residents/ResidentModal.tsx
@@ -13,69 +13,13 @@ import VisibilityIcon from "@mui/icons-material/Visibility";
 import VisibilityOffIcon from "@mui/icons-material/VisibilityOff";
 
 import ModalContainer from "../../common/ModalContainer";
+import FormField from "../../common/FormField";
 
 type Props = {
   isOpen: boolean;
   setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
 };
 
-const FormField = ({
-  label,
-  value,
-  type = "text",
-  onChange,
-  submitPressed,
-  required = false,
-  isPassword = false,
-  showPassword,
-  setShowPassword,
-}: {
-  label: string;
-  value: string;
-  type?: string;
-  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
-  submitPressed: boolean;
-  required?: boolean;
-  isPassword?: boolean;
-  showPassword?: boolean;
-  setShowPassword?: React.Dispatch<React.SetStateAction<boolean>>;
-}) => (
-  <Flex flexDir="column" flex="1">
-    <FormControl isRequired={required}>
-      <FormLabel mb="5px" color="gray.main" fontWeight="700">
-        {label}
-      </FormLabel>
-      <InputGroup>
-        <Input
-          variant="primary"
-          borderColor={submitPressed && !value ? "red.error" : "gray.300"}
-          boxShadow={submitPressed && !value ? "0 0 2px red.error" : "none"}
-          type={
-            isPassword && setShowPassword && !showPassword ? "password" : type
-          }
-          value={value}
-          onChange={onChange}
-        />
-        {isPassword && setShowPassword && (
-          <InputRightElement h="34px">
-            <Button
-              onClick={() => setShowPassword(!showPassword)}
-              bg="transparent"
-              _hover={{ bg: "transparent" }}
-            >
-              {!showPassword ? (
-                <VisibilityIcon fontSize="small" />
-              ) : (
-                <VisibilityOffIcon fontSize="small" />
-              )}
-            </Button>
-          </InputRightElement>
-        )}
-      </InputGroup>
-    </FormControl>
-  </Flex>
-);
-
 const ResidentModal = ({ isOpen, setIsOpen }: Props): React.ReactElement => {
   const [firstName, setFirstName] = useState("");
   const [lastName, setLastName] = useState("");
diff --git a/frontend/src/components/pages/tasks/TaskModal.tsx b/frontend/src/components/pages/tasks/TaskModal.tsx
index d70e9a3a..8f2a91ed 100644
--- a/frontend/src/components/pages/tasks/TaskModal.tsx
+++ b/frontend/src/components/pages/tasks/TaskModal.tsx
@@ -15,75 +15,15 @@ import {
 import VisibilityIcon from "@mui/icons-material/Visibility";
 import VisibilityOffIcon from "@mui/icons-material/VisibilityOff";
 import { TbTrash } from "react-icons/tb";
-import 'dayjs/locale/de';
 
 import ModalContainer from "../../common/ModalContainer";
+import FormField from "../../common/FormField";
 
 type Props = {
   isOpen: boolean;
   setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
 };
 
-const FormField = ({
-  label,
-  value,
-  type = "text",
-  onChange,
-  onBlur,
-  submitPressed,
-  required = false,
-  isPassword = false,
-  showPassword,
-  setShowPassword,
-}: {
-  label: string;
-  value: string;
-  type?: string;
-  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
-  onBlur?: () => void;
-  submitPressed: boolean;
-  required?: boolean;
-  isPassword?: boolean;
-  showPassword?: boolean;
-  setShowPassword?: React.Dispatch<React.SetStateAction<boolean>>;
-}) => (
-  <Flex flexDir="column" flex="1">
-    <FormControl isRequired={required}>
-      <FormLabel mb="5px" color="gray.main" fontWeight="700">
-        {label}
-      </FormLabel>
-      <InputGroup>
-        <Input
-          variant="primary"
-          borderColor={submitPressed && !value ? "red.error" : "gray.300"}
-          boxShadow={submitPressed && !value ? "0 0 2px red.error" : "none"}
-          type={
-            isPassword && setShowPassword && !showPassword ? "password" : type
-          }
-          value={value}
-          onChange={onChange}
-          onBlur={onBlur}
-        />
-        {isPassword && setShowPassword && (
-          <InputRightElement h="34px">
-            <Button
-              onClick={() => setShowPassword(!showPassword)}
-              bg="transparent"
-              _hover={{ bg: "transparent" }}
-            >
-              {!showPassword ? (
-                <VisibilityIcon fontSize="small" />
-              ) : (
-                <VisibilityOffIcon fontSize="small" />
-              )}
-            </Button>
-          </InputRightElement>
-        )}
-      </InputGroup>
-    </FormControl>
-  </Flex>
-);
-
 const generateOptions = () => {
   const options = [];
   for (let hour = 0; hour < 24; hour+=1) {
@@ -177,6 +117,7 @@ const DateInput = ({
             w="200px"
             isChecked={isAllDay}
             onChange={(e) => setIsAllDay(e.target.checked)}
+            m={0}
           >
             All Day
           </Checkbox>
@@ -207,7 +148,7 @@ const TaskModal = ({ isOpen, setIsOpen }: Props): React.ReactElement => {
   const [dueTime, setDueTime] = useState("");
   const [isAllDay, setIsAllDay] = useState(false);
   const [recurrenceFrequency, setRecurrenceFrequency] = useState("");
-  const [marillacBucks, setMarillacBucks] = useState('$ ');
+  const [marillacBucks, setMarillacBucks] = useState('');
 
   const [submitPressed, setSubmitPressed] = useState(false);
 
@@ -226,7 +167,7 @@ const TaskModal = ({ isOpen, setIsOpen }: Props): React.ReactElement => {
     setDueTime("");
     setIsAllDay(false);
     setRecurrenceFrequency("");
-    setMarillacBucks("$");
+    setMarillacBucks("");
 
     setSubmitPressed(false);
   };
@@ -236,7 +177,7 @@ const TaskModal = ({ isOpen, setIsOpen }: Props): React.ReactElement => {
     
     if (inputValue) {
       const numberValue = parseFloat(inputValue).toFixed(2);
-      setMarillacBucks(`$${numberValue}`);
+      setMarillacBucks(numberValue);
     }
   };
 
@@ -255,10 +196,12 @@ const TaskModal = ({ isOpen, setIsOpen }: Props): React.ReactElement => {
           submitPressed={submitPressed}
           required
         />
-        <FormLabel color="gray.main" fontWeight="700" mb={0} pb={0}>
-          Location
-        </FormLabel>
+
         <FormControl isRequired mt={0} pt={0}>
+          <FormLabel mb="5px" color="gray.main" fontWeight="700">
+            Location
+          </FormLabel>
+        
           <Select
             variant="primary"
             value={location}
@@ -291,6 +234,7 @@ const TaskModal = ({ isOpen, setIsOpen }: Props): React.ReactElement => {
           onChange={(e) => setMarillacBucks(e.target.value)}
           onBlur={handleMoneyInput}
           submitPressed={submitPressed}
+          leftElement="$"
           required
         />
         <Flex justifyContent="flex-end">
diff --git a/frontend/src/theme/inputs.ts b/frontend/src/theme/inputs.ts
index ea9324c7..8d4fcaf2 100644
--- a/frontend/src/theme/inputs.ts
+++ b/frontend/src/theme/inputs.ts
@@ -13,7 +13,6 @@ const primaryInput = definePartsStyle({
     height: "34px",
     borderRadius: "8px",
     border: "2px solid #C5C8D8",
-    padding: "8px",
   },
 });
 
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index aff5a049..4388890b 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -9689,6 +9689,11 @@ react-icons@^3.10.0:
   dependencies:
     camelcase "^5.0.0"
 
+react-icons@^5.2.1:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-5.2.1.tgz#28c2040917b2a2eda639b0f797bff1888e018e4a"
+  integrity sha512-zdbW5GstTzXaVKvGSyTaBalt7HSfuK5ovrzlpyiWHAFXndXTdd/1hdDHI4xBM1Mn7YriT6aqESucFl9kEXzrdw==
+
 "react-is@^16.12.0 || ^17.0.0 || ^18.0.0", react-is@^18.0.0, react-is@^18.2.0:
   version "18.2.0"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b"
@@ -11899,4 +11904,3 @@ zen-observable@0.8.15:
   version "0.8.15"
   resolved "https://registry.yarnpkg.com/zen-observable/-/zen-observable-0.8.15.tgz#96415c512d8e3ffd920afd3889604e30b9eaac15"
   integrity sha512-PQ2PC7R9rslx84ndNBZB/Dkv8V8fZEpk83RLgXtYd0fwUgEjseMn1Dgajh2x6S8QbZAFa9p2qVCEuYZNgve0dQ==
-  
\ No newline at end of file

From 2e65dc0b13cd1bd3e85df31a6d2a01ad2ed8e4c2 Mon Sep 17 00:00:00 2001
From: KathleenX7 <kxiong1210@gmail.com>
Date: Wed, 3 Jul 2024 21:00:09 -0400
Subject: [PATCH 7/9] fix accidental comments

---
 frontend/src/App.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 06381ce0..f87c3dd7 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -91,9 +91,9 @@ const App = (): React.ReactElement => {
                 <Route
                   path={Routes.TASKS_PAGE}
                   element={
-                    // <PrivateRoute>
+                    <PrivateRoute>
                       <TasksPage />
-                    // </PrivateRoute>
+                    </PrivateRoute>
                   }
                 />
                 <Route

From a51b21e5bb87d9ad31a5016b6a7dd57893356001 Mon Sep 17 00:00:00 2001
From: liya-zhu <julia.liya.zhu@gmail.com>
Date: Wed, 3 Jul 2024 21:07:23 -0400
Subject: [PATCH 8/9] uncommented private route

---
 frontend/src/App.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index f87c3dd7..4e361f4d 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -115,9 +115,9 @@ const App = (): React.ReactElement => {
                 <Route
                   path={Routes.RESIDENTS_PAGE}
                   element={
-                    // <PrivateRoute>
+                    <PrivateRoute>
                       <ResidentsPage />
-                    // </PrivateRoute>
+                    </PrivateRoute>
                   }
                 />
                 <Route

From b257b5b48bfec054f2fda34bcff12f2a65091764 Mon Sep 17 00:00:00 2001
From: Yaser <yayonoss@gmail.com>
Date: Mon, 8 Jul 2024 19:28:59 -0400
Subject: [PATCH 9/9] Removed unused dependencies & fixed formatting

---
 .../src/components/pages/tasks/TaskModal.tsx  | 178 +++++++++---------
 1 file changed, 87 insertions(+), 91 deletions(-)

diff --git a/frontend/src/components/pages/tasks/TaskModal.tsx b/frontend/src/components/pages/tasks/TaskModal.tsx
index 8f2a91ed..404f0d83 100644
--- a/frontend/src/components/pages/tasks/TaskModal.tsx
+++ b/frontend/src/components/pages/tasks/TaskModal.tsx
@@ -7,14 +7,8 @@ import {
   Flex,
   FormControl,
   FormLabel,
-  InputRightElement,
-  InputGroup,
   Checkbox,
-  Container,
 } from "@chakra-ui/react";
-import VisibilityIcon from "@mui/icons-material/Visibility";
-import VisibilityOffIcon from "@mui/icons-material/VisibilityOff";
-import { TbTrash } from "react-icons/tb";
 
 import ModalContainer from "../../common/ModalContainer";
 import FormField from "../../common/FormField";
@@ -26,18 +20,18 @@ type Props = {
 
 const generateOptions = () => {
   const options = [];
-  for (let hour = 0; hour < 24; hour+=1) {
+  for (let hour = 0; hour < 24; hour += 1) {
     for (let minute = 0; minute < 60; minute += 30) {
       let formattedHour;
       if (hour === 0) {
         formattedHour = "12";
       } else if (hour > 12) {
         formattedHour = `${hour - 12}`;
-      } else{
+      } else {
         formattedHour = `${hour}`;
       }
-      const ampm = hour < 12 ? 'am' : 'pm';
-      const formattedMinute = minute.toString().padStart(2, '0');
+      const ampm = hour < 12 ? "am" : "pm";
+      const formattedMinute = minute.toString().padStart(2, "0");
       options.push(`${formattedHour}:${formattedMinute}${ampm}`);
     }
   }
@@ -67,78 +61,77 @@ const DateInput = ({
   setRecurrenceFrequency: React.Dispatch<React.SetStateAction<string>>;
   submitPressed: boolean;
 }) => {
-  return(
-  <Flex flexDir="column" flex="1">
-    <FormControl isRequired>
-      <FormLabel mb="5px" color="gray.main" fontWeight="700">
-        Due Date
-      </FormLabel>
-      <Flex flexDir="column">
-        <Flex flexDir="row">  
-
-          <Input
-            variant="primary"
-            mb={3}
-            borderColor={submitPressed && !dueTime ? "red.error" : "gray.300"}
-            boxShadow={
-              submitPressed && !dueTime ? "0 0 2px red.error" : "none"
-            }
-            type="date"
-            value={dueDate}
-            width="200px"
-            onChange={(e) => setDueDate(e.target.value)}
-          />
-          
-          <Text paddingX="10px" paddingY="4px">at</Text>
-          <Select
-            variant="primary"
-            value={dueTime}
-            onChange={(e) => setDueTime(e.target.value)}
-            border="solid"
-            borderColor={submitPressed && !dueTime ? "red.error" : "gray.300"}
-            boxShadow={
-              submitPressed && !dueTime ? "0 0 2px red.error" : "none"
-            }
-            borderWidth="2px"
-            height="34px"
-            width="200px"
-          >
-            <option value="">Select...</option>
-            {options.map((option, index) => (
-              <option key={index} value={option}>
-                {option}
-              </option>
-            ))}
-          </Select>
-          
-        </Flex>
-        <Flex alignItems="center">
-          <Checkbox
-            w="200px"
-            isChecked={isAllDay}
-            onChange={(e) => setIsAllDay(e.target.checked)}
-            m={0}
-          >
-            All Day
-          </Checkbox>
-          <Select
-            variant="primary"
-            value={recurrenceFrequency}
-            onChange={(e) => setRecurrenceFrequency(e.target.value)}
-            border="solid"
-            borderColor="gray.300"
-            borderWidth="2px"
-            height="34px"
-          >
-            <option value="daily">Daily</option>
-            <option value="weekly">Weekly</option>
-            <option value="biWeekly">Bi-Weekly</option>
-          </Select>
+  return (
+    <Flex flexDir="column" flex="1">
+      <FormControl isRequired>
+        <FormLabel mb="5px" color="gray.main" fontWeight="700">
+          Due Date
+        </FormLabel>
+        <Flex flexDir="column">
+          <Flex flexDir="row">
+            <Input
+              variant="primary"
+              mb={3}
+              borderColor={submitPressed && !dueTime ? "red.error" : "gray.300"}
+              boxShadow={
+                submitPressed && !dueTime ? "0 0 2px red.error" : "none"
+              }
+              type="date"
+              value={dueDate}
+              width="200px"
+              onChange={(e) => setDueDate(e.target.value)}
+            />
+            <Text paddingX="10px" paddingY="4px">
+              at
+            </Text>
+            <Select
+              variant="primary"
+              value={dueTime}
+              onChange={(e) => setDueTime(e.target.value)}
+              border="solid"
+              borderColor={submitPressed && !dueTime ? "red.error" : "gray.300"}
+              boxShadow={
+                submitPressed && !dueTime ? "0 0 2px red.error" : "none"
+              }
+              borderWidth="2px"
+              height="34px"
+              width="200px"
+            >
+              <option value="">Select...</option>
+              {options.map((option, index) => (
+                <option key={index} value={option}>
+                  {option}
+                </option>
+              ))}
+            </Select>
+          </Flex>
+          <Flex alignItems="center">
+            <Checkbox
+              w="200px"
+              isChecked={isAllDay}
+              onChange={(e) => setIsAllDay(e.target.checked)}
+              m={0}
+            >
+              All Day
+            </Checkbox>
+            <Select
+              variant="primary"
+              value={recurrenceFrequency}
+              onChange={(e) => setRecurrenceFrequency(e.target.value)}
+              border="solid"
+              borderColor="gray.300"
+              borderWidth="2px"
+              height="34px"
+            >
+              <option value="daily">Daily</option>
+              <option value="weekly">Weekly</option>
+              <option value="biWeekly">Bi-Weekly</option>
+            </Select>
+          </Flex>
         </Flex>
-      </Flex>
-    </FormControl>
-  </Flex>
-);
+      </FormControl>
+    </Flex>
+  );
 };
 
 const TaskModal = ({ isOpen, setIsOpen }: Props): React.ReactElement => {
@@ -148,7 +141,7 @@ const TaskModal = ({ isOpen, setIsOpen }: Props): React.ReactElement => {
   const [dueTime, setDueTime] = useState("");
   const [isAllDay, setIsAllDay] = useState(false);
   const [recurrenceFrequency, setRecurrenceFrequency] = useState("");
-  const [marillacBucks, setMarillacBucks] = useState('');
+  const [marillacBucks, setMarillacBucks] = useState("");
 
   const [submitPressed, setSubmitPressed] = useState(false);
 
@@ -173,8 +166,8 @@ const TaskModal = ({ isOpen, setIsOpen }: Props): React.ReactElement => {
   };
 
   const handleMoneyInput = () => {
-    const inputValue = marillacBucks.replace(/[^0-9.]/g, ''); // Remove non-numeric and non-period characters
-    
+    const inputValue = marillacBucks.replace(/[^0-9.]/g, ""); // Remove non-numeric and non-period characters
+
     if (inputValue) {
       const numberValue = parseFloat(inputValue).toFixed(2);
       setMarillacBucks(numberValue);
@@ -182,12 +175,15 @@ const TaskModal = ({ isOpen, setIsOpen }: Props): React.ReactElement => {
   };
 
   // delete task api stuff
-  const handleDelete = () => { 
-    
-  }
+  const handleDelete = () => {};
 
   return (
-    <ModalContainer title="Edit Chore" isOpen={isOpen} setIsOpen={setIsOpen} onDelete={handleDelete}>
+    <ModalContainer 
+      title="Edit Chore"
+      isOpen={isOpen}
+      setIsOpen={setIsOpen}
+      onDelete={handleDelete}
+    >
       <Flex flexDir="column" gap="20px">
         <FormField
           label="Task Name"
@@ -249,8 +245,8 @@ const TaskModal = ({ isOpen, setIsOpen }: Props): React.ReactElement => {
             Cancel
           </Button>
           <Button variant="primary" onClick={ () => {
-                handleSubmit();
-                setIsOpen(false);
+              handleSubmit();
+              setIsOpen(false);
             }}
             >
             Save
@@ -261,4 +257,4 @@ const TaskModal = ({ isOpen, setIsOpen }: Props): React.ReactElement => {
   );
 };
 
-export default TaskModal;
\ No newline at end of file
+export default TaskModal;