Add a date when having repeatable frequency type, Fix logo bug

src/views/Authorization/ForgotPasswordView.jsx

@@ -1,4 +1,5 @@
 // create boilerplate for ResetPasswordView:
+import LogoSVG from '@/assets/logo.svg'
 import {
   Box,
   Button,
@@ -12,7 +13,6 @@ import {
 } from '@mui/joy'
 import { useState } from 'react'
 import { useNavigate } from 'react-router-dom'
-
 import { API_URL } from './../../Config'
 
 const ForgotPasswordView = () => {
@@ -105,12 +105,7 @@ const ForgotPasswordView = () => {
           }}
         >
           <Box>
-            <img
-              src='/src/assets/logo.svg'
-              alt='logo'
-              width='128px'
-              height='128px'
-            />
+            <img src={LogoSVG} alt='logo' width='128px' height='128px' />
             {/* <Logo /> */}
             <Typography level='h2'>
               Done

src/views/ChoreEdit/ChoreEdit.jsx

@@ -67,7 +67,7 @@ const ChoreEdit = () => {
   const [frequencyMetadata, setFrequencyMetadata] = useState({})
   const [labels, setLabels] = useState([])
   const [allUserThings, setAllUserThings] = useState([])
-  const [thingTrigger, setThingTrigger] = useState({})
+  const [thingTrigger, setThingTrigger] = useState(null)
   const [isThingValid, setIsThingValid] = useState(false)
 
   const [notificationMetadata, setNotificationMetadata] = useState({})
@@ -459,6 +459,12 @@ const ChoreEdit = () => {
         onFrequencyTypeUpdate={setFrequencyType}
         frequencyMetadata={frequencyMetadata}
         onFrequencyMetadataUpdate={setFrequencyMetadata}
+        onFrequencyTimeUpdate={t => {
+          setFrequencyMetadata({
+            ...frequencyMetadata,
+            time: t,
+          })
+        }}
         frequencyError={errors?.frequency}
         allUserThings={allUserThings}
         onTriggerUpdate={thingUpdate => {

src/views/ChoreEdit/ChoreView.jsx

@@ -10,9 +10,9 @@ import {
 import {
   Box,
   Button,
+  Card,
   Checkbox,
   Container,
-  Divider,
   FormControl,
   Grid,
   Input,
@@ -26,7 +26,7 @@ import {
 } from '@mui/joy'
 import moment from 'moment'
 import { useEffect, useState } from 'react'
-import { useNavigate, useParams, useSearchParams } from 'react-router-dom'
+import { useParams, useSearchParams } from 'react-router-dom'
 import {
   GetAllUsers,
   GetChoreDetailById,
@@ -50,8 +50,6 @@ const ChoreView = () => {
   const { choreId } = useParams()
   const [note, setNote] = useState(null)
 
-  const Navigate = useNavigate()
-
   const [searchParams] = useSearchParams()
 
   const [isPendingCompletion, setIsPendingCompletion] = useState(false)
@@ -128,12 +126,9 @@ const ChoreView = () => {
               chore.lastCompletedDate &&
               moment(chore.lastCompletedDate).fromNow()
               // moment(chore.lastCompletedDate).format('MM/DD/YYYY hh:mm A'))
-            }(
-              ${
-                performers.find(p => p.id === chore.lastCompletedBy)
-                  ?.displayName
-              }
-              )`
+            }(${
+              performers.find(p => p.id === chore.lastCompletedBy)?.displayName
+            })`
           : 'Never',
       },
       {
@@ -234,13 +229,20 @@ const ChoreView = () => {
           ))}
         </Grid>
       </Box>
-      <Divider
+      {/* <Divider
         sx={{
           my: 2,
         }}
-      />
+      /> */}
 
-      <Box>
+      <Card
+        sx={{
+          p: 2,
+          borderRadius: 'md',
+          boxShadow: 'sm',
+          mt: 2,
+        }}
+      >
         <Typography level='title-md'>Additional Notes</Typography>
         <Input
           fullWidth
@@ -260,11 +262,13 @@ const ChoreView = () => {
             my: 1,
           }}
         />
+
         <FormControl size='sm' sx={{ width: 400 }}>
           <Checkbox
             defaultChecked={completedDate !== null}
             checked={completedDate !== null}
             value={completedDate !== null}
+            size='lg'
             onChange={e => {
               if (e.target.checked) {
                 setCompletedDate(
@@ -330,7 +334,7 @@ const ChoreView = () => {
           >
             <Box>Mark as {isPendingCompletion ? 'completed' : 'done'}</Box>
           </Button> */}
-      </Box>
+      </Card>
 
       <Snackbar
         open={isPendingCompletion}

src/views/ChoreEdit/RepeatSection.jsx

@@ -15,6 +15,7 @@ import {
   Select,
   Typography,
 } from '@mui/joy'
+import moment from 'moment'
 import { useContext, useState } from 'react'
 import { UserContext } from '../../contexts/UserContext'
 import { isPlusAccount } from '../../utils/Helpers'
@@ -59,6 +60,7 @@ const RepeatOnSections = ({
   onFrequencyTypeUpdate,
   frequencyMetadata,
   onFrequencyMetadataUpdate,
+  onFrequencyTimeUpdate,
   things,
 }) => {
   const [months, setMonths] = useState({})
@@ -66,10 +68,34 @@ const RepeatOnSections = ({
   const [daysOfTheWeek, setDaysOfTheWeek] = useState({})
   const [monthsOfTheYear, setMonthsOfTheYear] = useState({})
   const [intervalUnit, setIntervalUnit] = useState('days')
+  const [frequancyMetadata, setFrequancyMetadata] = useState({})
+  const [time, setTime] = useState('18:00')
+  const timePickerComponent = (
+    <Grid item sm={12} sx={{ display: 'flex', alignItems: 'center' }}>
+      <Typography level='h5'>At: </Typography>
+      <Input
+        type='time'
+        defaultValue={
+          frequencyMetadata?.time
+            ? moment(frequencyMetadata?.time).format('HH:mm')
+            : '18:00'
+        }
+        onChange={e => {
+          // create new today date with selected time with Timezone:
+          onFrequencyTimeUpdate(
+            moment(
+              moment(new Date()).format('YYYY-MM-DD') + 'T' + e.target.value,
+            ).format(),
+          )
+        }}
+      />
+    </Grid>
+  )
 
   switch (frequencyType) {
     case 'interval':
       return (
+        <>
           <Grid item sm={12} sx={{ display: 'flex', alignItems: 'center' }}>
             <Typography level='h5'>Every: </Typography>
             <Input
@@ -99,9 +125,12 @@ const RepeatOnSections = ({
               ))}
             </Select>
           </Grid>
+          {timePickerComponent}
+        </>
       )
     case 'days_of_the_week':
       return (
+        <>
           <Grid item sm={12} sx={{ display: 'flex', alignItems: 'center' }}>
             <Card>
               <List
@@ -151,9 +180,12 @@ const RepeatOnSections = ({
               </List>
             </Card>
           </Grid>
+          {timePickerComponent}
+        </>
       )
     case 'day_of_the_month':
       return (
+        <>
           <Grid
             item
             sm={12}
@@ -164,31 +196,6 @@ const RepeatOnSections = ({
               justifyContent: 'space-between',
             }}
           >
-          <Box
-            sx={{
-              display: 'flex',
-              alignItems: 'center',
-              mb: 1.5,
-            }}
-          >
-            <Typography>on the </Typography>
-            <Input
-              sx={{ width: '80px' }}
-              type='number'
-              value={frequency}
-              onChange={e => {
-                if (e.target.value < 1) {
-                  e.target.value = 1
-                } else if (e.target.value > 31) {
-                  e.target.value = 31
-                }
-                // setDayOftheMonth(e.target.value)
-
-                onFrequencyUpdate(e.target.value)
-              }}
-            />
-            <Typography>of the following month/s: </Typography>
-          </Box>
             <Card>
               <List
                 orientation='horizontal'
@@ -255,6 +262,33 @@ const RepeatOnSections = ({
               </List>
             </Card>
           </Grid>
+          <Box
+            sx={{
+              display: 'flex',
+              alignItems: 'center',
+              mb: 1.5,
+            }}
+          >
+            <Typography>on the </Typography>
+            <Input
+              sx={{ width: '80px' }}
+              type='number'
+              value={frequency}
+              onChange={e => {
+                if (e.target.value < 1) {
+                  e.target.value = 1
+                } else if (e.target.value > 31) {
+                  e.target.value = 31
+                }
+                // setDayOftheMonth(e.target.value)
+
+                onFrequencyUpdate(e.target.value)
+              }}
+            />
+            <Typography>of the above month/s</Typography>
+          </Box>
+          {timePickerComponent}
+        </>
       )
 
     default:
@@ -269,6 +303,7 @@ const RepeatSection = ({
   onFrequencyTypeUpdate,
   frequencyMetadata,
   onFrequencyMetadataUpdate,
+  onFrequencyTimeUpdate,
   frequencyError,
   allUserThings,
   onTriggerUpdate,
@@ -440,6 +475,7 @@ const RepeatSection = ({
                       onFrequencyTypeUpdate={onFrequencyTypeUpdate}
                       frequencyMetadata={frequencyMetadata || {}}
                       onFrequencyMetadataUpdate={onFrequencyMetadataUpdate}
+                      onFrequencyTimeUpdate={onFrequencyTimeUpdate}
                       things={allUserThings}
                     />
                   </Grid>

src/views/Circles/JoinCircle.jsx

@@ -40,12 +40,6 @@ const JoinCircleView = () => {
             boxShadow: 'md',
           }}
         >
-          {/* <img
-            src='/src/assets/logo.svg'
-            alt='logo'
-            width='128px'
-            height='128px'
-          /> */}
           <Logo />
 
           <Typography level='h2'>