Add Expense Date (#26)

* add expense date

* Improve date formatting

* Prettier

* Change field description

---------

Co-authored-by: Sebastien Castiel <sebastien@castiel.me>

6 files changed, 39 insertions, 3 deletions

diff --git a/src/app/groups/[groupId]/expenses/expense-list.tsx b/src/app/groups/[groupId]/expenses/expense-list.tsx
index 798a5f8..7ee8329 100644
--- a/src/app/groups/[groupId]/expenses/expense-list.tsx
+++ b/src/app/groups/[groupId]/expenses/expense-list.tsx
@@ -41,7 +41,10 @@ export function ExpenseList({
             {expense.title}
           </div>
           <div className="text-xs text-muted-foreground">
-            Paid by <strong>{getParticipant(expense.paidById)?.name}</strong>{' '}
+            Paid by <strong>{getParticipant(expense.paidById)?.name}</strong> on{' '}
+            {expense.expenseDate.toLocaleDateString('en-US', {
+              dateStyle: 'medium',
+            })}{' '}
             for{' '}
             {expense.paidFor.map((paidFor, index) => (
               <Fragment key={index}>
diff --git a/src/app/groups/actions.ts b/src/app/groups/actions.ts
index 2d07004..9e8e605 100644
--- a/src/app/groups/actions.ts
+++ b/src/app/groups/actions.ts
@@ -1,5 +1,5 @@
 'use server'
-import { getGroups } from "@/lib/api"
+import { getGroups } from '@/lib/api'
 
 export async function getGroupsAction(groupIds: string[]) {
   'use server'
diff --git a/src/components/expense-form.tsx b/src/components/expense-form.tsx
index 45e34fa..98a8f29 100644
--- a/src/components/expense-form.tsx
+++ b/src/components/expense-form.tsx
@@ -56,6 +56,7 @@ export function ExpenseForm({ group, expense, onSubmit, onDelete }: Props) {
     defaultValues: expense
       ? {
           title: expense.title,
+          expenseDate: expense.expenseDate ?? new Date(),
           amount: String(expense.amount / 100) as unknown as number, // hack
           paidBy: expense.paidById,
           paidFor: expense.paidFor.map(({ participantId, shares }) => ({
@@ -68,6 +69,7 @@ export function ExpenseForm({ group, expense, onSubmit, onDelete }: Props) {
       : searchParams.get('reimbursement')
       ? {
           title: 'Reimbursement',
+          expenseDate: new Date(),
           amount: String(
             (Number(searchParams.get('amount')) || 0) / 100,
           ) as unknown as number, // hack
@@ -81,6 +83,7 @@ export function ExpenseForm({ group, expense, onSubmit, onDelete }: Props) {
         }
       : {
           title: '',
+          expenseDate: new Date(),
           amount: 0,
           paidFor: [],
           isReimbursement: false,
@@ -121,6 +124,32 @@ export function ExpenseForm({ group, expense, onSubmit, onDelete }: Props) {
 
             <FormField
               control={form.control}
+              name="expenseDate"
+              render={({ field }) => (
+                <FormItem className="sm:order-1">
+                  <FormLabel>Expense Date</FormLabel>
+                  <FormControl>
+                    <Input
+                      className="date-base"
+                      type="date"
+                      value={(field.value ?? new Date())
+                        .toISOString()
+                        .substring(0, 10)}
+                      onChange={(event) => {
+                        return field.onChange(new Date(event.target.value))
+                      }}
+                    />
+                  </FormControl>
+                  <FormDescription>
+                    Enter the date the expense was made.
+                  </FormDescription>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
               name="amount"
               render={({ field }) => (
                 <FormItem className="sm:order-3">
diff --git a/src/lib/api.ts b/src/lib/api.ts
index 586a354..6ff55b6 100644
--- a/src/lib/api.ts
+++ b/src/lib/api.ts
@@ -47,6 +47,7 @@ export async function createExpense(
     data: {
       id: randomId(),
       groupId,
+      expenseDate: expenseFormValues.expenseDate,
       amount: expenseFormValues.amount,
       title: expenseFormValues.title,
       paidById: expenseFormValues.paidBy,
@@ -120,6 +121,7 @@ export async function updateExpense(
   return prisma.expense.update({
     where: { id: expenseId },
     data: {
+      expenseDate: expenseFormValues.expenseDate,
       amount: expenseFormValues.amount,
       title: expenseFormValues.title,
       paidById: expenseFormValues.paidBy,
@@ -210,7 +212,7 @@ export async function getGroupExpenses(groupId: string) {
   return prisma.expense.findMany({
     where: { groupId },
     include: { paidFor: { include: { participant: true } }, paidBy: true },
-    orderBy: { createdAt: 'desc' },
+    orderBy: { expenseDate: 'desc' },
   })
 }
 
diff --git a/src/lib/schemas.ts b/src/lib/schemas.ts
index 9b7d428..14b253c 100644
--- a/src/lib/schemas.ts
+++ b/src/lib/schemas.ts
@@ -41,6 +41,7 @@ export type GroupFormValues = z.infer<typeof groupFormSchema>
 
 export const expenseFormSchema = z
   .object({
+    expenseDate: z.coerce.date(),
     title: z
       .string({ required_error: 'Please enter a title.' })
       .min(2, 'Enter at least two characters.'),
diff --git a/src/scripts/migrate.ts b/src/scripts/migrate.ts
index beeecc1..ed1a3a5 100644
--- a/src/scripts/migrate.ts
+++ b/src/scripts/migrate.ts
@@ -80,6 +80,7 @@ async function main() {
           amount: Math.round(expenseRow.amount * 100),
           groupId: groupRow.id,
           title: expenseRow.description,
+          expenseDate: new Date(expenseRow.created_at.toDateString()),
           createdAt: expenseRow.created_at,
           isReimbursement: expenseRow.is_reimbursement === true,
           paidById: participantIdsMapping[expenseRow.paid_by_participant_id],