From a16309c69abc727cb6a24bd90c682c48cf311d6f Mon Sep 17 00:00:00 2001
From: Mo Tarbin <mhed.t91@gmail.com>
Date: Wed, 5 Mar 2025 19:43:32 -0500
Subject: [PATCH] - Support nest sub tasks - Support filters in ChoreGrouper -
 completion window only available if due date selected - Add SortAndGrouping
 Component : support Filter by Assignee - update Notification Switch to align
 left of the text - Support caching filters

---
 src/utils/Chores.jsx                       |  15 +-
 src/views/ChoreEdit/ChoreEdit.jsx          | 120 +++---
 src/views/Chores/MyChores.jsx              |  87 ++--
 src/views/Chores/Sidepanel.jsx             |   2 +-
 src/views/Chores/SortAndGrouping.jsx       | 194 +++++++++
 src/views/Settings/NotificationSetting.jsx |  18 +-
 src/views/User/UserActivities.jsx          |   4 +-
 src/views/components/AddTaskModal.jsx      |  12 +-
 src/views/components/SubTask.jsx           | 451 +++++++++++++++------
 9 files changed, 679 insertions(+), 224 deletions(-)
 create mode 100644 src/views/Chores/SortAndGrouping.jsx

diff --git a/src/utils/Chores.jsx b/src/utils/Chores.jsx
index 4366bfa..729a9ac 100644
--- a/src/utils/Chores.jsx
+++ b/src/utils/Chores.jsx
@@ -3,7 +3,11 @@ import { TASK_COLOR } from './Colors.jsx'
 
 const priorityOrder = [1, 2, 3, 4, 0]
 
-export const ChoresGrouper = (groupBy, chores) => {
+export const ChoresGrouper = (groupBy, chores, filter) => {
+  if (filter) {
+    chores = chores.filter(chore => filter(chore))
+  }
+
   // sort by priority then due date:
   chores.sort(ChoreSorter)
   var groups = []
@@ -172,3 +176,12 @@ export const notInCompletionWindow = chore => {
     moment().add(chore.completionWindow, 'hours') < moment(chore.nextDueDate)
   )
 }
+export const ChoreFilters = userProfile => ({
+  anyone: () => true,
+  assigned_to_me: chore => {
+    return chore.assignedTo && chore.assignedTo === userProfile.id
+  },
+  assigned_to_others: chore => {
+    return chore.assignedTo && chore.assignedTo !== userProfile.id
+  },
+})
diff --git a/src/views/ChoreEdit/ChoreEdit.jsx b/src/views/ChoreEdit/ChoreEdit.jsx
index ddcb853..8b93b44 100644
--- a/src/views/ChoreEdit/ChoreEdit.jsx
+++ b/src/views/ChoreEdit/ChoreEdit.jsx
@@ -208,7 +208,9 @@ const ChoreEdit = () => {
       notificationMetadata: notificationMetadata,
       thingTrigger: thingTrigger,
       points: points < 0 ? null : points,
-      completionWindow: completionWindow < 0 ? null : completionWindow,
+      completionWindow:
+        // if completionWindow is -1 then set it to null or dueDate is null
+        completionWindow < 0 || dueDate === null ? null : completionWindow,
       priority: priority,
     }
     let SaveFunction = CreateChore
@@ -596,62 +598,65 @@ const ChoreEdit = () => {
             <FormHelperText>{errors.dueDate}</FormHelperText>
           </FormControl>
         )}
-
-        <FormControl orientation='horizontal'>
-          <Switch
-            checked={completionWindow != -1}
-            onClick={event => {
-              event.preventDefault()
-              if (completionWindow != -1) {
-                setCompletionWindow(-1)
-              } else {
-                setCompletionWindow(1)
-              }
-            }}
-            color={completionWindow !== -1 ? 'success' : 'neutral'}
-            variant={completionWindow !== -1 ? 'solid' : 'outlined'}
-            // endDecorator={points !== -1 ? 'On' : 'Off'}
-            sx={{
-              mr: 2,
-            }}
-          />
-          <div>
-            {/* <FormLabel>Completion window (hours)</FormLabel> */}
-            <Typography level='h5'>Completion window (hours)</Typography>
-
-            <FormHelperText sx={{ mt: 0 }}>
-              {"Set a time window that task can't be completed before"}
-            </FormHelperText>
-          </div>
-        </FormControl>
-        {completionWindow != -1 && (
-          <Card variant='outlined'>
-            <Box
-              sx={{
-                mt: 0,
-                ml: 4,
-              }}
-            >
-              <Typography level='body-sm'>Hours:</Typography>
-
-              <Input
-                type='number'
-                value={completionWindow}
-                sx={{ maxWidth: 100 }}
-                // add min points is 0 and max is 1000
-                slotProps={{
-                  input: {
-                    min: 0,
-                    max: 24 * 7,
-                  },
+        {dueDate && (
+          <>
+            <FormControl orientation='horizontal'>
+              <Switch
+                checked={completionWindow != -1}
+                onClick={event => {
+                  event.preventDefault()
+                  if (completionWindow != -1) {
+                    setCompletionWindow(-1)
+                  } else {
+                    setCompletionWindow(1)
+                  }
                 }}
-                placeholder='Hours'
-                onChange={e => {
-                  setCompletionWindow(parseInt(e.target.value))
+                color={completionWindow !== -1 ? 'success' : 'neutral'}
+                variant={completionWindow !== -1 ? 'solid' : 'outlined'}
+                // endDecorator={points !== -1 ? 'On' : 'Off'}
+                sx={{
+                  mr: 2,
                 }}
               />
-            </Box>
-          </Card>
+              <div>
+                {/* <FormLabel>Completion window (hours)</FormLabel> */}
+                <Typography level='h5'>Completion window (hours)</Typography>
+
+                <FormHelperText sx={{ mt: 0 }}>
+                  {"Set a time window that task can't be completed before"}
+                </FormHelperText>
+              </div>
+            </FormControl>
+            {completionWindow != -1 && (
+              <Card variant='outlined'>
+                <Box
+                  sx={{
+                    mt: 0,
+                    ml: 4,
+                  }}
+                >
+                  <Typography level='body-sm'>Hours:</Typography>
+
+                  <Input
+                    type='number'
+                    value={completionWindow}
+                    sx={{ maxWidth: 100 }}
+                    // add min points is 0 and max is 1000
+                    slotProps={{
+                      input: {
+                        min: 0,
+                        max: 24 * 7,
+                      },
+                    }}
+                    placeholder='Hours'
+                    onChange={e => {
+                      setCompletionWindow(parseInt(e.target.value))
+                    }}
+                  />
+                </Box>
+              </Card>
+            )}
+          </>
         )}
       </Box>
       {!['once', 'no_repeat'].includes(frequencyType) && (
@@ -975,7 +980,12 @@ const ChoreEdit = () => {
               p: 1,
             }}
           >
-            <SubTasks editMode={true} tasks={subTasks} setTasks={setSubTasks} />
+            <SubTasks
+              editMode={true}
+              tasks={subTasks}
+              setTasks={setSubTasks}
+              choreId={choreId}
+            />
           </Card>
         )}
         <FormControl sx={{ mt: 1 }}>
diff --git a/src/views/Chores/MyChores.jsx b/src/views/Chores/MyChores.jsx
index 2a1cf36..94c2fd7 100644
--- a/src/views/Chores/MyChores.jsx
+++ b/src/views/Chores/MyChores.jsx
@@ -44,7 +44,7 @@ import { useLabels } from '../Labels/LabelQueries'
 import ChoreCard from './ChoreCard'
 import IconButtonWithMenu from './IconButtonWithMenu'
 
-import { ChoresGrouper, ChoreSorter } from '../../utils/Chores'
+import { ChoreFilters, ChoresGrouper, ChoreSorter } from '../../utils/Chores'
 import TaskInput from '../components/AddTaskModal'
 import {
   canScheduleNotification,
@@ -52,6 +52,7 @@ import {
 } from './LocalNotificationScheduler'
 import NotificationAccessSnackbar from './NotificationAccessSnackbar'
 import Sidepanel from './Sidepanel'
+import SortAndGrouping from './SortAndGrouping'
 
 const MyChores = () => {
   const { userProfile, setUserProfile } = useContext(UserContext)
@@ -60,7 +61,7 @@ const MyChores = () => {
   const [chores, setChores] = useState([])
   const [archivedChores, setArchivedChores] = useState(null)
   const [filteredChores, setFilteredChores] = useState([])
-  const [selectedFilter, setSelectedFilter] = useState('All')
+  const [searchFilter, setSearchFilter] = useState('All')
   const [choreSections, setChoreSections] = useState([])
   const [activeTextField, setActiveTextField] = useState('task')
   const [taskInputFocus, setTaskInputFocus] = useState(0)
@@ -72,6 +73,9 @@ const MyChores = () => {
   const [openChoreSections, setOpenChoreSections] = useState(
     JSON.parse(localStorage.getItem('openChoreSections')) || {},
   )
+  const [selectedChoreFilter, setSelectedChoreFilter] = useState(
+    JSON.parse(localStorage.getItem('selectedChoreFilter')) || 'anyone',
+  )
   const [searchTerm, setSearchTerm] = useState('')
   const [performers, setPerformers] = useState([])
   const [anchorEl, setAnchorEl] = useState(null)
@@ -172,6 +176,10 @@ const MyChores = () => {
     setOpenChoreSections(value)
     localStorage.setItem('openChoreSections', JSON.stringify(value))
   }
+  const setSelectedChoreFilterWithCache = value => {
+    setSelectedChoreFilter(value)
+    localStorage.setItem('selectedChoreFilter', JSON.stringify(value))
+  }
 
   const updateChores = newChore => {
     const newChores = chores
@@ -179,7 +187,7 @@ const MyChores = () => {
     setChores(newChores)
     setFilteredChores(newChores)
     setChoreSections(ChoresGrouper(selectedChoreSection, newChores))
-    setSelectedFilter('All')
+    setSearchFilter('All')
   }
   const handleMenuOutsideClick = event => {
     if (
@@ -208,14 +216,14 @@ const MyChores = () => {
         ),
       )
       setFilteredChores(labelFiltered)
-      setSelectedFilter('Label: ' + label.name)
+      setSearchFilter('Label: ' + label.name)
     } else if (chipClicked.priority) {
       const priority = chipClicked.priority
       const priorityFiltered = chores.filter(
         chore => chore.priority === priority,
       )
       setFilteredChores(priorityFiltered)
-      setSelectedFilter('Priority: ' + priority)
+      setSearchFilter('Priority: ' + priority)
     }
   }
 
@@ -305,8 +313,8 @@ const MyChores = () => {
   )
 
   const handleSearchChange = e => {
-    if (selectedFilter !== 'All') {
-      setSelectedFilter('All')
+    if (searchFilter !== 'All') {
+      setSearchFilter('All')
     }
     const search = e.target.value
     if (search === '') {
@@ -418,17 +426,28 @@ const MyChores = () => {
               <Search />
             </IconButton>
           )}
-
-          <IconButtonWithMenu
+          <SortAndGrouping
             title='Group by'
             k={'icon-menu-group-by'}
             icon={<Sort />}
-            options={[
-              { name: 'Due Date', value: 'due_date' },
-              { name: 'Priority', value: 'priority' },
-              { name: 'Labels', value: 'labels' },
-            ]}
             selectedItem={selectedChoreSection}
+            selectedFilter={selectedChoreFilter}
+            setFilter={filter => {
+              setSelectedChoreFilterWithCache(filter)
+              const section = ChoresGrouper(
+                selectedChoreSection,
+                chores,
+                ChoreFilters(userProfile)[filter],
+              )
+              setChoreSections(section)
+              setOpenChoreSectionsWithCache(
+                // open all sections by default
+                Object.keys(section).reduce((acc, key) => {
+                  acc[key] = true
+                  return acc
+                }, {}),
+              )
+            }}
             onItemSelect={selected => {
               const section = ChoresGrouper(selected.value, chores)
               setChoreSections(section)
@@ -441,7 +460,7 @@ const MyChores = () => {
                 }, {}),
               )
               setFilteredChores(chores)
-              setSelectedFilter('All')
+              setSearchFilter('All')
             }}
             mouseClickHandler={handleMenuOutsideClick}
           />
@@ -454,12 +473,12 @@ const MyChores = () => {
                 k={'icon-menu-priority-filter'}
                 icon={<PriorityHigh />}
                 options={Priorities}
-                selectedItem={selectedFilter}
+                selectedItem={searchFilter}
                 onItemSelect={selected => {
                   handleLabelFiltering({ priority: selected.value })
                 }}
                 mouseClickHandler={handleMenuOutsideClick}
-                isActive={selectedFilter.startsWith('Priority: ')}
+                isActive={searchFilter.startsWith('Priority: ')}
               />
 
               <IconButtonWithMenu
@@ -467,11 +486,11 @@ const MyChores = () => {
                 label={' Labels'}
                 icon={<Style />}
                 options={userLabels}
-                selectedItem={selectedFilter}
+                selectedItem={searchFilter}
                 onItemSelect={selected => {
                   handleLabelFiltering({ label: selected })
                 }}
-                isActive={selectedFilter.startsWith('Label: ')}
+                isActive={searchFilter.startsWith('Label: ')}
                 mouseClickHandler={handleMenuOutsideClick}
                 useChips
               />
@@ -481,9 +500,7 @@ const MyChores = () => {
                 variant='outlined'
                 startDecorator={<Grain />}
                 color={
-                  selectedFilter &&
-                  FILTERS[selectedFilter] &&
-                  selectedFilter != 'All'
+                  searchFilter && FILTERS[searchFilter] && searchFilter != 'All'
                     ? 'primary'
                     : 'neutral'
                 }
@@ -519,15 +536,13 @@ const MyChores = () => {
                             ? filterFunction(chores, userProfile.id)
                             : filterFunction(chores)
                         setFilteredChores(filteredChores)
-                        setSelectedFilter(filter)
+                        setSearchFilter(filter)
                         handleFilterMenuClose()
                       }}
                     >
                       {filter}
                       <Chip
-                        color={
-                          selectedFilter === filter ? 'primary' : 'neutral'
-                        }
+                        color={searchFilter === filter ? 'primary' : 'neutral'}
                       >
                         {FILTERS[filter].length === 2
                           ? FILTERS[filter](chores, userProfile.id).length
@@ -536,13 +551,13 @@ const MyChores = () => {
                     </MenuItem>
                   ))}
 
-                  {selectedFilter.startsWith('Label: ') ||
-                    (selectedFilter.startsWith('Priority: ') && (
+                  {searchFilter.startsWith('Label: ') ||
+                    (searchFilter.startsWith('Priority: ') && (
                       <MenuItem
                         key={`filter-list-cancel-all-filters`}
                         onClick={() => {
                           setFilteredChores(chores)
-                          setSelectedFilter('All')
+                          setSearchFilter('All')
                         }}
                       >
                         Cancel All Filters
@@ -553,23 +568,23 @@ const MyChores = () => {
             </div>
           </div>
         )}
-        {selectedFilter !== 'All' && (
+        {searchFilter !== 'All' && (
           <Chip
             level='title-md'
             gutterBottom
             color='warning'
-            label={selectedFilter}
+            label={searchFilter}
             onDelete={() => {
               setFilteredChores(chores)
-              setSelectedFilter('All')
+              setSearchFilter('All')
             }}
             endDecorator={<CancelRounded />}
             onClick={() => {
               setFilteredChores(chores)
-              setSelectedFilter('All')
+              setSearchFilter('All')
             }}
           >
-            Current Filter: {selectedFilter}
+            Current Filter: {searchFilter}
           </Chip>
         )}
         {filteredChores.length === 0 && (
@@ -608,7 +623,7 @@ const MyChores = () => {
             )}
           </Box>
         )}
-        {(searchTerm?.length > 0 || selectedFilter !== 'All') &&
+        {(searchTerm?.length > 0 || searchFilter !== 'All') &&
           filteredChores.map(chore => (
             <ChoreCard
               key={`filtered-${chore.id} `}
@@ -620,7 +635,7 @@ const MyChores = () => {
               onChipClick={handleLabelFiltering}
             />
           ))}
-        {searchTerm.length === 0 && selectedFilter === 'All' && (
+        {searchTerm.length === 0 && searchFilter === 'All' && (
           <AccordionGroup transition='0.2s ease' disableDivider>
             {choreSections.map((section, index) => {
               if (section.content.length === 0) return null
diff --git a/src/views/Chores/Sidepanel.jsx b/src/views/Chores/Sidepanel.jsx
index 3e15904..1e83e99 100644
--- a/src/views/Chores/Sidepanel.jsx
+++ b/src/views/Chores/Sidepanel.jsx
@@ -13,7 +13,7 @@ const Sidepanel = ({ chores }) => {
   }, [])
 
   const generateChoreDuePieChartData = chores => {
-    const groups = ChoresGrouper('due_date', chores)
+    const groups = ChoresGrouper('due_date', chores, null)
     return groups
       .map(group => {
         return {
diff --git a/src/views/Chores/SortAndGrouping.jsx b/src/views/Chores/SortAndGrouping.jsx
new file mode 100644
index 0000000..385cb8c
--- /dev/null
+++ b/src/views/Chores/SortAndGrouping.jsx
@@ -0,0 +1,194 @@
+import {
+  Button,
+  Chip,
+  Divider,
+  Menu,
+  MenuItem,
+  Radio,
+  Typography,
+} from '@mui/joy'
+import IconButton from '@mui/joy/IconButton'
+import React, { useEffect, useRef, useState } from 'react'
+import { getTextColorFromBackgroundColor } from '../../utils/Colors.jsx'
+
+const SortAndGrouping = ({
+  label,
+  k,
+  icon,
+  onItemSelect,
+  selectedItem,
+  setSelectedItem,
+  selectedFilter,
+  setFilter,
+  isActive,
+  useChips,
+  title,
+}) => {
+  const [anchorEl, setAnchorEl] = useState(null)
+  const menuRef = useRef(null)
+
+  const handleMenuOpen = event => {
+    setAnchorEl(event.currentTarget)
+  }
+
+  const handleMenuClose = () => {
+    setAnchorEl(null)
+  }
+
+  useEffect(() => {
+    const handleMenuOutsideClick = event => {
+      if (menuRef.current && !menuRef.current.contains(event.target)) {
+        handleMenuClose()
+      }
+    }
+
+    document.addEventListener('mousedown', handleMenuOutsideClick)
+    return () => {
+      document.removeEventListener('mousedown', handleMenuOutsideClick)
+    }
+  }, [])
+
+  return (
+    <>
+      {!label && (
+        <IconButton
+          onClick={handleMenuOpen}
+          variant='outlined'
+          color={isActive ? 'primary' : 'neutral'}
+          size='sm'
+          sx={{
+            height: 24,
+            borderRadius: 24,
+          }}
+        >
+          {icon}
+          {label ? label : null}
+        </IconButton>
+      )}
+      {label && (
+        <Button
+          onClick={handleMenuOpen}
+          variant='outlined'
+          color={isActive ? 'primary' : 'neutral'}
+          size='sm'
+          startDecorator={icon}
+          sx={{
+            height: 24,
+            borderRadius: 24,
+          }}
+        >
+          {label}
+        </Button>
+      )}
+
+      <Menu
+        key={k}
+        ref={menuRef}
+        anchorEl={anchorEl}
+        open={Boolean(anchorEl)}
+        onClose={handleMenuClose}
+        sx={{
+          '& .MuiMenuItem-root': {
+            padding: '8px 16px', // Consistent padding for menu items
+          },
+        }}
+      >
+        <MenuItem key={`${k}-title`} disabled>
+          <Typography level='body-sm' fontWeight='lg'>
+            Group By
+          </Typography>
+        </MenuItem>
+
+        {[
+          { name: 'Due Date', value: 'due_date' },
+          { name: 'Priority', value: 'priority' },
+          { name: 'Labels', value: 'labels' },
+        ].map(item => (
+          <MenuItem
+            key={`${k}-${item?.value}`}
+            onClick={() => {
+              onItemSelect(item)
+              setSelectedItem?.(item.name)
+              handleMenuClose()
+            }}
+          >
+            {useChips ? (
+              <Chip
+                size='sm'
+                sx={{
+                  backgroundColor: item.color ? item.color : null,
+                  color: getTextColorFromBackgroundColor(item.color),
+                  fontWeight: 'md',
+                }}
+              >
+                {item.name}
+              </Chip>
+            ) : (
+              <>
+                {item?.icon}
+                <Typography level='body-sm' sx={{ ml: 1 }}>
+                  {item.name}
+                </Typography>
+              </>
+            )}
+          </MenuItem>
+        ))}
+
+        <Divider />
+
+        <MenuItem key={`${k}-quick-filter`} disabled>
+          <Typography level='body-sm' fontWeight='lg'>
+            Quick Filters
+          </Typography>
+        </MenuItem>
+
+        <MenuItem key={`${k}-assignee-title`} disabled>
+          <Typography level='body-xs' fontWeight='md'>
+            Assigned to:
+          </Typography>
+        </MenuItem>
+
+        <MenuItem
+          key={`${k}-assignee-anyone`}
+          onClick={() => {
+            setFilter('anyone')
+            handleMenuClose()
+          }}
+        >
+          <Radio checked={selectedFilter === 'anyone'} variant='outlined' />
+          <Typography level='body-sm'>Anyone</Typography>
+        </MenuItem>
+
+        <MenuItem
+          key={`${k}-assignee-assigned-to-me`}
+          onClick={() => {
+            setFilter('assigned_to_me')
+            handleMenuClose()
+          }}
+        >
+          <Radio
+            checked={selectedFilter === 'assigned_to_me'}
+            variant='outlined'
+          />
+          <Typography level='body-sm'>Assigned to me</Typography>
+        </MenuItem>
+
+        <MenuItem
+          key={`${k}-assignee-assigned-to-others`}
+          onClick={() => {
+            setFilter('assigned_to_others')
+            handleMenuClose()
+          }}
+        >
+          <Radio
+            checked={selectedFilter === 'assigned_to_others'}
+            variant='outlined'
+          />
+          <Typography level='body-sm'>Assigned to others</Typography>
+        </MenuItem>
+      </Menu>
+    </>
+  )
+}
+
+export default SortAndGrouping
diff --git a/src/views/Settings/NotificationSetting.jsx b/src/views/Settings/NotificationSetting.jsx
index ae8633b..a5abec9 100644
--- a/src/views/Settings/NotificationSetting.jsx
+++ b/src/views/Settings/NotificationSetting.jsx
@@ -173,7 +173,14 @@ const NotificationSetting = () => {
           }}
           color={deviceNotification ? 'success' : 'neutral'}
           variant={deviceNotification ? 'solid' : 'outlined'}
-          sx={{ mr: 1 }}
+          slotProps={{
+            endDecorator: {
+              sx: {
+                minWidth: 24,
+              },
+            },
+          }}
+          sx={{ mr: 2 }}
         />
         <div>
           <FormLabel>Device Notification</FormLabel>
@@ -321,7 +328,6 @@ const NotificationSetting = () => {
 
       <FormControl orientation='horizontal'>
         <Switch
-          sx={{ mr: 1 }}
           checked={chatID !== 0}
           onClick={event => {
             event.preventDefault()
@@ -342,12 +348,14 @@ const NotificationSetting = () => {
           }}
           color={chatID !== 0 ? 'success' : 'neutral'}
           variant={chatID !== 0 ? 'solid' : 'outlined'}
-          // endDecorator={chatID !== 0 ? 'On' : 'Off'}
           slotProps={{
             endDecorator: {
-              sx: {},
+              sx: {
+                minWidth: 24,
+              },
             },
           }}
+          sx={{ mr: 2 }}
         />
         <div>
           <FormLabel>Custom Notification</FormLabel>
@@ -372,7 +380,7 @@ const NotificationSetting = () => {
             <Option value='0'>None</Option>
             <Option value='1'>Telegram</Option>
             <Option value='2'>Pushover</Option>
-            <Option value='3'>Webhook</Option>
+            <Option value='3'>Webhooks</Option>
           </Select>
           {notificationTarget === '1' && (
             <>
diff --git a/src/views/User/UserActivities.jsx b/src/views/User/UserActivities.jsx
index 62ee3e1..1738950 100644
--- a/src/views/User/UserActivities.jsx
+++ b/src/views/User/UserActivities.jsx
@@ -232,7 +232,7 @@ const UserActivites = () => {
   }
 
   const generateChoreDuePieChartData = chores => {
-    const groups = ChoresGrouper('due_date', chores)
+    const groups = ChoresGrouper('due_date', chores, null)
     return groups
       .map(group => {
         return {
@@ -245,7 +245,7 @@ const UserActivites = () => {
       .filter(item => item.value > 0)
   }
   const generateChorePriorityPieChartData = chores => {
-    const groups = ChoresGrouper('priority', chores)
+    const groups = ChoresGrouper('priority', chores, null)
     return groups
       .map(group => {
         return {
diff --git a/src/views/components/AddTaskModal.jsx b/src/views/components/AddTaskModal.jsx
index 30bbba9..99cfa68 100644
--- a/src/views/components/AddTaskModal.jsx
+++ b/src/views/components/AddTaskModal.jsx
@@ -76,12 +76,12 @@ const TaskInput = ({ autoFocus, onChoreUpdate }) => {
   const { userProfile } = useContext(UserContext)
   const navigate = useNavigate()
   const [taskText, setTaskText] = useState('')
-  const debounceParsing = useDebounce(taskText, 300)
+  const debounceParsing = useDebounce(taskText, 30)
   const [taskTitle, setTaskTitle] = useState('')
   const [openModal, setOpenModal] = useState(false)
   const textareaRef = useRef(null)
   const mainInputRef = useRef(null)
-  const [priority, setPriority] = useState('0')
+  const [priority, setPriority] = useState(0)
   const [dueDate, setDueDate] = useState(null)
   const [description, setDescription] = useState(null)
   const [frequency, setFrequency] = useState(null)
@@ -436,7 +436,6 @@ const TaskInput = ({ autoFocus, onChoreUpdate }) => {
       priority: priority || 0,
       status: 0,
       frequencyType: 'once',
-      notificationMetadata: {},
     }
 
     if (frequency) {
@@ -451,7 +450,12 @@ const TaskInput = ({ autoFocus, onChoreUpdate }) => {
 
     CreateChore(chore).then(resp => {
       resp.json().then(data => {
-        onChoreUpdate({ ...chore, id: data.res, nextDueDate: chore.dueDate })
+        if (resp.status !== 200) {
+          console.error('Error creating chore:', data)
+          return
+        } else {
+          onChoreUpdate({ ...chore, id: data.res, nextDueDate: chore.dueDate })
+        }
       })
     })
   }
diff --git a/src/views/components/SubTask.jsx b/src/views/components/SubTask.jsx
index efc1b21..676dbc2 100644
--- a/src/views/components/SubTask.jsx
+++ b/src/views/components/SubTask.jsx
@@ -6,7 +6,15 @@ import {
   verticalListSortingStrategy,
 } from '@dnd-kit/sortable'
 import { CSS } from '@dnd-kit/utilities'
-import { Add, Delete, DragIndicator, Edit } from '@mui/icons-material'
+import {
+  ChevronRight,
+  Delete,
+  DragIndicator,
+  Edit,
+  ExpandMore,
+  KeyboardReturn,
+  PlaylistAdd,
+} from '@mui/icons-material'
 import {
   Box,
   Checkbox,
@@ -19,23 +27,41 @@ import {
 import React, { useState } from 'react'
 import { CompleteSubTask } from '../../utils/Fetcher'
 
-function SortableItem({ task, index, handleToggle, handleDelete, editMode }) {
+function SortableItem({
+  task,
+  index,
+  handleToggle,
+  handleDelete,
+  handleAddSubtask,
+  allTasks,
+  setTasks,
+  level = 0,
+  editMode,
+}) {
   const { attributes, listeners, setNodeRef, transform, transition } =
     useSortable({ id: task.id })
 
+  const [isEditing, setIsEditing] = useState(false)
+  const [editedText, setEditedText] = useState(task.name)
+  const [expanded, setExpanded] = useState(false)
+  const [showAddSubtask, setShowAddSubtask] = useState(false)
+  const [newSubtask, setNewSubtask] = useState('')
+
+  // Find child tasks
+  const childTasks = allTasks.filter(t => t.parentId === task.id)
+  const hasChildren = childTasks.length > 0
+
   const style = {
     transform: CSS.Transform.toString(transform),
     transition,
     display: 'flex',
     alignItems: 'center',
     gap: '0.5rem',
-    flexDirection: { xs: 'column', sm: 'row' }, // Responsive style
+    flexDirection: { xs: 'column', sm: 'row' },
     touchAction: 'none',
+    paddingLeft: `${level * 24}px`,
   }
 
-  const [isEditing, setIsEditing] = useState(false)
-  const [editedText, setEditedText] = useState(task.name)
-
   const handleEdit = () => {
     setIsEditing(true)
   }
@@ -43,146 +69,332 @@ function SortableItem({ task, index, handleToggle, handleDelete, editMode }) {
   const handleSave = () => {
     setIsEditing(false)
     task.name = editedText
+    // Update the task in the parent component
+    setTasks(prevTasks =>
+      prevTasks.map(t => (t.id === task.id ? { ...t, name: editedText } : t)),
+    )
+  }
+
+  const handleExpandClick = () => {
+    setExpanded(!expanded)
+  }
+
+  const handleAddSubtaskClick = () => {
+    setShowAddSubtask(!showAddSubtask)
+  }
+
+  const submitNewSubtask = () => {
+    if (!newSubtask.trim()) return
+
+    handleAddSubtask(task.id, newSubtask)
+    setNewSubtask('')
+    setShowAddSubtask(false)
+    setExpanded(true) // Auto-expand to show the new subtask
+  }
+
+  const handleKeyPress = event => {
+    if (event.key === 'Enter') {
+      submitNewSubtask()
+    }
   }
 
   return (
-    <ListItem ref={setNodeRef} style={style} {...attributes}>
-      {editMode && (
-        <IconButton {...listeners} {...attributes}>
-          <DragIndicator />
-        </IconButton>
-      )}
-      <Box
-        sx={{
-          display: 'flex',
-          alignItems: 'center',
-          gap: 1,
-          flex: 1,
-        }}
-      >
-        {!editMode && (
-          <Checkbox
-            checked={task.completedAt}
-            onChange={() => handleToggle(task.id)}
-            overlay={!editMode}
-          />
+    <>
+      <ListItem ref={setNodeRef} style={style} {...attributes}>
+        {editMode && (
+          <IconButton {...listeners} {...attributes} size='sm'>
+            <DragIndicator />
+          </IconButton>
         )}
+
+        {hasChildren && (
+          <IconButton
+            size='sm'
+            variant='plain'
+            color='neutral'
+            onClick={handleExpandClick}
+          >
+            {expanded ? <ExpandMore /> : <ChevronRight />}
+          </IconButton>
+        )}
+
+        {!hasChildren && level > 0 && (
+          <Box sx={{ width: 28 }} /> // Spacer for alignment not sure of better way for now it's good
+        )}
+
         <Box
           sx={{
-            flex: 1,
-            minHeight: 50,
             display: 'flex',
-            flexDirection: 'column',
-            justifyContent: 'center',
+            alignItems: 'center',
+            gap: 1,
+            flex: 1,
           }}
         >
-          {isEditing ? (
+          {!editMode && (
+            <Checkbox
+              checked={!!task.completedAt}
+              onChange={() => handleToggle(task.id)}
+            />
+          )}
+          <Box
+            sx={{
+              flex: 1,
+              minHeight: 50,
+              display: 'flex',
+              flexDirection: 'column',
+              justifyContent: 'center',
+            }}
+            onClick={() => {
+              if (!editMode) {
+                handleToggle(task.id)
+              }
+            }}
+          >
+            {isEditing ? (
+              <Input
+                value={editedText}
+                onChange={e => setEditedText(e.target.value)}
+                onBlur={handleSave}
+                onKeyPress={e => {
+                  if (e.key === 'Enter') {
+                    handleSave()
+                  }
+                }}
+                autoFocus
+              />
+            ) : (
+              <Typography
+                sx={{
+                  textDecoration: task.completedAt ? 'line-through' : 'none',
+                }}
+                onDoubleClick={handleEdit}
+              >
+                {task.name}
+              </Typography>
+            )}
+            {task.completedAt && (
+              <Typography
+                sx={{
+                  display: { xs: 'block', sm: 'inline' },
+                  color: 'text.secondary',
+                  fontSize: 'sm',
+                }}
+              >
+                {new Date(task.completedAt).toLocaleString()}
+              </Typography>
+            )}
+          </Box>
+        </Box>
+
+        <Box sx={{ display: 'flex', gap: 1 }}>
+          {editMode && (
+            <>
+              <IconButton
+                variant='soft'
+                color='primary'
+                size='sm'
+                onClick={handleAddSubtaskClick}
+                title='Add subtask'
+              >
+                <PlaylistAdd />
+              </IconButton>
+              <IconButton variant='soft' size='sm' onClick={handleEdit}>
+                <Edit />
+              </IconButton>
+              <IconButton
+                variant='soft'
+                color='danger'
+                size='sm'
+                onClick={() => handleDelete(task.id)}
+              >
+                <Delete />
+              </IconButton>
+            </>
+          )}
+        </Box>
+      </ListItem>
+
+      {/* Add subtask input field */}
+      {showAddSubtask && (
+        <ListItem
+          sx={{
+            paddingLeft: `${(level + 1) * 24}px`,
+            paddingTop: 0,
+            paddingBottom: 1,
+          }}
+        >
+          <Box sx={{ display: 'flex', width: '100%', gap: 1 }}>
             <Input
-              value={editedText}
-              onChange={e => setEditedText(e.target.value)}
-              onBlur={handleSave}
-              onKeyPress={e => {
-                if (e.key === 'Enter') {
-                  handleSave()
-                }
-              }}
+              placeholder='Add new subtask...'
+              value={newSubtask}
+              onChange={e => setNewSubtask(e.target.value)}
+              onKeyPress={handleKeyPress}
+              sx={{ flex: 1 }}
               autoFocus
             />
-          ) : (
-            <Typography
-              sx={{
-                textDecoration: task.completedAt ? 'line-through' : 'none',
-              }}
-              onDoubleClick={handleEdit}
-            >
-              {task.name}
-            </Typography>
-          )}
-          {task.completedAt && (
-            <Typography
-              sx={{
-                display: { xs: 'block', sm: 'inline' }, // Responsive style
-                color: 'text.secondary',
-              }}
-            >
-              {new Date(task.completedAt).toLocaleString()}
-            </Typography>
-          )}
-        </Box>
-      </Box>
-      {editMode && (
-        <Box sx={{ display: 'flex', gap: 1 }}>
-          <IconButton variant='soft' onClick={handleEdit}>
-            <Edit />
-          </IconButton>
-          <IconButton
-            variant='soft'
-            color='danger'
-            onClick={() => handleDelete(task.id)}
-          >
-            <Delete />
-          </IconButton>
+            <IconButton onClick={submitNewSubtask} size='sm'>
+              <KeyboardReturn />
+            </IconButton>
+          </Box>
+        </ListItem>
+      )}
+
+      {/* Child tasks */}
+      {hasChildren && expanded && (
+        <Box sx={{ paddingLeft: `${level * 24}px` }}>
+          {childTasks
+            .sort((a, b) => a.orderId - b.orderId)
+            .map((childTask, childIndex) => (
+              <SortableItem
+                key={childTask.id}
+                task={childTask}
+                index={childIndex}
+                handleToggle={handleToggle}
+                handleDelete={handleDelete}
+                handleAddSubtask={handleAddSubtask}
+                allTasks={allTasks}
+                setTasks={setTasks}
+                level={level + 1}
+                editMode={editMode}
+              />
+            ))}
         </Box>
       )}
-    </ListItem>
+    </>
   )
 }
 
-const SubTasks = ({ editMode = true, choreId = 0, tasks, setTasks }) => {
+const SubTasks = ({ editMode = true, choreId = 0, tasks = [], setTasks }) => {
   const [newTask, setNewTask] = useState('')
 
+  const topLevelTasks = tasks.filter(task => task.parentId === null)
+
   const handleToggle = taskId => {
     const updatedTask = tasks.find(task => task.id === taskId)
-    updatedTask.completedAt = updatedTask.completedAt
+    const newCompletedAt = updatedTask.completedAt
       ? null
       : new Date().toISOString()
 
+    // Update the task
     const updatedTasks = tasks.map(task =>
-      task.id === taskId ? updatedTask : task,
+      task.id === taskId ? { ...task, completedAt: newCompletedAt } : task,
     )
-    CompleteSubTask(
-      taskId,
-      Number(choreId),
-      updatedTask.completedAt ? new Date().toISOString() : null,
-    ).then(res => {
+
+    // If completing a task, also complete all child tasks
+    if (newCompletedAt) {
+      const completeChildren = parentId => {
+        const children = updatedTasks.filter(t => t.parentId === parentId)
+        children.forEach(child => {
+          const index = updatedTasks.findIndex(t => t.id === child.id)
+          if (index !== -1) {
+            updatedTasks[index] = {
+              ...updatedTasks[index],
+              completedAt: newCompletedAt,
+            }
+            completeChildren(child.id) // Recursively complete grandchildren
+          }
+        })
+      }
+      completeChildren(taskId)
+    }
+
+    CompleteSubTask(taskId, Number(choreId), newCompletedAt).then(res => {
       if (res.status !== 200) {
         console.log('Error updating task')
         return
       }
     })
+
     setTasks(updatedTasks)
   }
 
   const handleDelete = taskId => {
-    setTasks(tasks.filter(task => task.id !== taskId))
+    // Find all descendant tasks to delete
+    const findDescendants = id => {
+      const descendants = []
+      const children = tasks.filter(t => t.parentId === id)
+
+      children.forEach(child => {
+        descendants.push(child.id)
+        descendants.push(...findDescendants(child.id))
+      })
+
+      return descendants
+    }
+
+    const descendantIds = findDescendants(taskId)
+    const idsToDelete = [taskId, ...descendantIds]
+
+    // Filter out the task and all its descendants
+    const updatedTasks = tasks
+      .filter(task => !idsToDelete.includes(task.id))
+      .map((task, index) => ({
+        ...task,
+        orderId: task.parentId === null ? index : task.orderId,
+      }))
+
+    setTasks(updatedTasks)
   }
 
   const handleAdd = () => {
     if (!newTask.trim()) return
-    setTasks([
-      ...tasks,
-      {
-        name: newTask,
-        completedAt: null,
-        orderId: tasks.length,
-      },
-    ])
+
+    const newTaskObj = {
+      name: newTask,
+      completedAt: null,
+      orderId: topLevelTasks.length,
+      parentId: null,
+      id: (tasks.length + 1) * -1, // Temporary negative ID
+    }
+
+    setTasks([...tasks, newTaskObj])
     setNewTask('')
   }
 
+  const handleAddSubtask = (parentId, name) => {
+    if (!name.trim()) return
+
+    // Find siblings to determine orderId
+    const siblings = tasks.filter(t => t.parentId === parentId)
+
+    const newSubtask = {
+      name,
+      completedAt: null,
+      orderId: siblings.length,
+      parentId,
+      id: (tasks.length + 1) * -1, // Temporary negative ID
+    }
+
+    setTasks([...tasks, newSubtask])
+  }
+
   const onDragEnd = event => {
     const { active, over } = event
-    if (active.id !== over.id) {
-      setTasks(items => {
-        const oldIndex = items.findIndex(item => item.id === active.id)
-        const newIndex = items.findIndex(item => item.id === over.id)
-        const reorderedItems = arrayMove(items, oldIndex, newIndex)
-        return reorderedItems.map((item, index) => ({
-          ...item,
-          orderId: index,
-        }))
+    if (!over || active.id === over.id) return
+
+    setTasks(items => {
+      const oldIndex = items.findIndex(item => item.id === active.id)
+      const newIndex = items.findIndex(item => item.id === over.id)
+
+      if (oldIndex === -1 || newIndex === -1) return items
+
+      const activeItem = items[oldIndex]
+      const overItem = items[newIndex]
+
+      const reorderedItems = arrayMove(items, oldIndex, newIndex)
+
+      const parentId = overItem.parentId
+      const siblings = reorderedItems.filter(item => item.parentId === parentId)
+
+      return reorderedItems.map(item => {
+        if (item.id === activeItem.id) {
+          return { ...item, parentId, orderId: siblings.indexOf(item) }
+        }
+        return item.parentId === parentId
+          ? { ...item, orderId: siblings.indexOf(item) }
+          : item
       })
-    }
+    })
   }
 
   const handleKeyPress = event => {
@@ -191,38 +403,37 @@ const SubTasks = ({ editMode = true, choreId = 0, tasks, setTasks }) => {
     }
   }
 
-  // Sort tasks by orderId before rendering
-  const sortedTasks = [...tasks].sort((a, b) => a.orderId - b.orderId)
-
   return (
     <>
       <DndContext collisionDetection={closestCenter} onDragEnd={onDragEnd}>
-        <SortableContext
-          items={sortedTasks}
-          strategy={verticalListSortingStrategy}
-        >
+        <SortableContext items={tasks} strategy={verticalListSortingStrategy}>
           <List sx={{ padding: 0 }}>
-            {sortedTasks.map((task, index) => (
-              <SortableItem
-                key={task.id}
-                task={task}
-                index={index}
-                handleToggle={handleToggle}
-                handleDelete={handleDelete}
-                editMode={editMode}
-              />
-            ))}
+            {topLevelTasks
+              .sort((a, b) => a.orderId - b.orderId)
+              .map((task, index) => (
+                <SortableItem
+                  key={task.id}
+                  task={task}
+                  index={index}
+                  handleToggle={handleToggle}
+                  handleDelete={handleDelete}
+                  handleAddSubtask={handleAddSubtask}
+                  allTasks={tasks}
+                  setTasks={setTasks}
+                  editMode={editMode}
+                />
+              ))}
             {editMode && (
               <ListItem sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
                 <Input
-                  placeholder='Add new...'
+                  placeholder='Add new task...'
                   value={newTask}
                   onChange={e => setNewTask(e.target.value)}
                   onKeyPress={handleKeyPress}
                   sx={{ flex: 1 }}
                 />
                 <IconButton onClick={handleAdd}>
-                  <Add />
+                  <KeyboardReturn />
                 </IconButton>
               </ListItem>
             )}