Add Expense Date (#26)

* add expense date

* Improve date formatting

* Prettier

* Change field description

---------

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

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}>

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'

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,
@@ -119,6 +122,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"

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' },
   })
 }
 

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.'),

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],