refactor: Update chore grouping and color constants for improved clarity and organization

src/utils/Chores.jsx

@@ -15,9 +15,10 @@ export const ChoresGrouper = (groupBy, chores, filter) => {
     case 'due_date':
       var groupRaw = {
         Today: [],
-        'In a week': [],
-        'This month': [],
-        Later: [],
+        Tomorrow: [],
+        'Next 7 Days': [],
+        'Later This Month': [],
+        Future: [],
         Overdue: [],
         Anytime: [],
       }
@@ -32,17 +33,24 @@ export const ChoresGrouper = (groupBy, chores, filter) => {
         ) {
           groupRaw['Today'].push(chore)
         } else if (
-          new Date(chore.nextDueDate) <
-            new Date(Date.now() + 7 * 24 * 60 * 60 * 1000) &&
-          new Date(chore.nextDueDate) > new Date()
+          new Date(chore.nextDueDate).toDateString() ===
+          new Date(Date.now() + 24 * 60 * 60 * 1000).toDateString()
         ) {
-          groupRaw['In a week'].push(chore)
+          groupRaw['Tomorrow'].push(chore)
         } else if (
-          new Date(chore.nextDueDate).getMonth() === new Date().getMonth()
+          new Date(chore.nextDueDate) <
+            new Date(Date.now() + 8 * 24 * 60 * 60 * 1000) &&
+          new Date(chore.nextDueDate) >
+            new Date(Date.now() + 24 * 60 * 60 * 1000)
         ) {
-          groupRaw['This month'].push(chore)
+          groupRaw['Next 7 Days'].push(chore)
+        } else if (
+          new Date(chore.nextDueDate).getMonth() === new Date().getMonth() &&
+          new Date(chore.nextDueDate).getFullYear() === new Date().getFullYear()
+        ) {
+          groupRaw['Later This Month'].push(chore)
         } else {
-          groupRaw['Later'].push(chore)
+          groupRaw['Future'].push(chore)
         }
       })
       groups = [
@@ -53,16 +61,25 @@ export const ChoresGrouper = (groupBy, chores, filter) => {
         },
         { name: 'Today', content: groupRaw['Today'], color: TASK_COLOR.TODAY },
         {
-          name: 'In a week',
-          content: groupRaw['In a week'],
-          color: TASK_COLOR.IN_A_WEEK,
+          name: 'Tomorrow',
+          content: groupRaw['Tomorrow'],
+          color: TASK_COLOR.TOMORROW,
         },
         {
-          name: 'This month',
-          content: groupRaw['This month'],
-          color: TASK_COLOR.THIS_MONTH,
+          name: 'Next 7 Days',
+          content: groupRaw['Next 7 Days'],
+          color: TASK_COLOR.NEXT_7_DAYS,
+        },
+        {
+          name: 'Later This Month',
+          content: groupRaw['Later This Month'],
+          color: TASK_COLOR.LATER_THIS_MONTH,
+        },
+        {
+          name: 'Future',
+          content: groupRaw['Future'],
+          color: TASK_COLOR.FUTURE,
         },
-        { name: 'Later', content: groupRaw['Later'], color: TASK_COLOR.LATER },
         {
           name: 'Anytime',
           content: groupRaw['Anytime'],

src/utils/Colors.jsx

@@ -64,10 +64,16 @@ export const TASK_COLOR = {
   // For the calendar
   OVERDUE: '#F03A47',
   TODAY: '#ffc107',
+  TOMORROW: '#4ec1a2',
+  NEXT_7_DAYS: '#00bcd4',
+  LATER_THIS_MONTH: '#b39ddb',
+  FUTURE: '#d7ccc8',
+  ANYTIME: '#90a4ae',
+
+  // Legacy colors for backward compatibility
   IN_A_WEEK: '#4ec1a2',
   THIS_MONTH: '#00bcd4',
   LATER: '#d7ccc8',
-  ANYTIME: '#90a4ae',
 
   // FOR ASSIGNEE:
   ASSIGNED_TO_ME: '#4ec1a2',

src/views/Chores/CompactChoreCard.jsx

@@ -205,13 +205,12 @@ const CompactChoreCard = ({
   // Utility functions
   const getDueDateText = nextDueDate => {
     if (chore.nextDueDate === null) return 'No Due Date'
+    // if due in next 48 hours, we should it in this format : Tomorrow 11:00 AM
     const diff = moment(nextDueDate).diff(moment(), 'hours')
-    if (diff < 24 && diff > 0) {
+    if (diff < 48 && diff > 0) {
       return moment(nextDueDate).calendar().replace(' at', '')
     }
-    if (diff < 0) {
-      return 'Overdue'
-    }
+
     return moment(nextDueDate).fromNow()
   }