Group expenses (#48)

* Group expenses my date

* Group expenses my date

* typescript errors

* prettier

* getExpenseGroup

* update logic to use dayjs

* clean up

compose.yaml

@@ -18,7 +18,7 @@ services:
     volumes:
       - /var/lib/postgresql/data:/var/lib/postgresql/data
     healthcheck:
-      test: ["CMD-SHELL", "pg_isready -U postgres"]
+      test: ['CMD-SHELL', 'pg_isready -U postgres']
       interval: 5s
       timeout: 5s
       retries: 5

package-lock.json

@@ -31,6 +31,7 @@
         "@tailwindcss/typography": "^0.5.10",
         "class-variance-authority": "^0.7.0",
         "clsx": "^2.0.0",
+        "dayjs": "^1.11.10",
         "lucide-react": "^0.290.0",
         "nanoid": "^5.0.4",
         "next": "^14.0.4",
@@ -2583,6 +2584,11 @@
       "dev": true,
       "license": "BSD-2-Clause"
     },
+    "node_modules/dayjs": {
+      "version": "1.11.10",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.10.tgz",
+      "integrity": "sha512-vjAczensTgRcqDERK0SR2XMwsF/tSvnvlv6VcF2GIhg6Sx4yOIt/irsr1RDJsKiIyBzJDpCoXiWWq28MqH2cnQ=="
+    },
     "node_modules/debug": {
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",

package.json

@@ -36,6 +36,7 @@
     "@tailwindcss/typography": "^0.5.10",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
+    "dayjs": "^1.11.10",
     "lucide-react": "^0.290.0",
     "nanoid": "^5.0.4",
     "next": "^14.0.4",

src/app/groups/[groupId]/expenses/expense-list.tsx

@@ -3,7 +3,8 @@ import { CategoryIcon } from '@/app/groups/[groupId]/expenses/category-icon'
 import { Button } from '@/components/ui/button'
 import { getGroupExpenses } from '@/lib/api'
 import { cn } from '@/lib/utils'
-import { Participant } from '@prisma/client'
+import { Expense, Participant } from '@prisma/client'
+import dayjs, { type Dayjs } from 'dayjs'
 import { ChevronRight } from 'lucide-react'
 import Link from 'next/link'
 import { useRouter } from 'next/navigation'
@@ -16,6 +17,46 @@ type Props = {
   groupId: string
 }
 
+const EXPENSE_GROUPS = {
+  THIS_WEEK: 'This week',
+  EARLIER_THIS_MONTH: 'Earlier this month',
+  LAST_MONTH: 'Last month',
+  EARLIER_THIS_YEAR: 'Earlier this year',
+  LAST_YEAR: 'Last year',
+  OLDER: 'Older',
+}
+
+function getExpenseGroup(date: Dayjs, today: Dayjs) {
+  if (today.isSame(date, 'week')) {
+    return EXPENSE_GROUPS.THIS_WEEK
+  } else if (today.isSame(date, 'month')) {
+    return EXPENSE_GROUPS.EARLIER_THIS_MONTH
+  } else if (today.subtract(1, 'month').isSame(date, 'month')) {
+    return EXPENSE_GROUPS.LAST_MONTH
+  } else if (today.isSame(date, 'year')) {
+    return EXPENSE_GROUPS.EARLIER_THIS_YEAR
+  } else if (today.subtract(1, 'year').isSame(date, 'year')) {
+    return EXPENSE_GROUPS.LAST_YEAR
+  } else {
+    return EXPENSE_GROUPS.OLDER
+  }
+}
+
+function getGroupedExpensesByDate(
+  expenses: Awaited<ReturnType<typeof getGroupExpenses>>,
+) {
+  const today = dayjs()
+  return expenses.reduce(
+    (result: { [key: string]: Expense[] }, expense: Expense) => {
+      const expenseGroup = getExpenseGroup(dayjs(expense.expenseDate), today)
+      result[expenseGroup] = result[expenseGroup] ?? []
+      result[expenseGroup].push(expense)
+      return result
+    },
+    {},
+  )
+}
+
 export function ExpenseList({
   expenses,
   currency,
@@ -44,8 +85,18 @@ export function ExpenseList({
   const getParticipant = (id: string) => participants.find((p) => p.id === id)
   const router = useRouter()
 
+  const groupedExpensesByDate = getGroupedExpensesByDate(expenses)
+
   return expenses.length > 0 ? (
-    expenses.map((expense) => (
+    Object.values(EXPENSE_GROUPS).map((expenseGroup: string) => {
+      const groupExpenses = groupedExpensesByDate[expenseGroup]
+      if (!groupExpenses) return null
+      return (
+        <Fragment key={expenseGroup}>
+          <div className={'border-t text-md pl-3 py-2 font-semibold'}>
+            {expenseGroup}
+          </div>
+          {groupExpenses.map((expense: any) => (
             <div
               key={expense.id}
               className={cn(
@@ -61,19 +112,22 @@ export function ExpenseList({
                 className="w-4 h-4 mr-2 mt-0.5 text-muted-foreground"
               />
               <div className="flex-1">
-          <div className={cn('mb-1', expense.isReimbursement && 'italic')}>
+                <div
+                  className={cn('mb-1', expense.isReimbursement && 'italic')}
+                >
                   {expense.title}
                 </div>
                 <div className="text-xs text-muted-foreground">
-            Paid by <strong>{getParticipant(expense.paidById)?.name}</strong>{' '}
-            for{' '}
-            {expense.paidFor.map((paidFor, index) => (
+                  Paid by{' '}
+                  <strong>{getParticipant(expense.paidById)?.name}</strong> for{' '}
+                  {expense.paidFor.map((paidFor: any, index: number) => (
                     <Fragment key={index}>
                       {index !== 0 && <>, </>}
                       <strong>
                         {
-                    participants.find((p) => p.id === paidFor.participantId)
-                      ?.name
+                          participants.find(
+                            (p) => p.id === paidFor.participantId,
+                          )?.name
                         }
                       </strong>
                     </Fragment>
@@ -104,7 +158,10 @@ export function ExpenseList({
                 </Link>
               </Button>
             </div>
-    ))
+          ))}
+        </Fragment>
+      )
+    })
   ) : (
     <p className="px-6 text-sm py-6">
       Your group doesn’t contain any expense yet.{' '}