Add Expense Date (#26)

* add expense date

* Improve date formatting

* Prettier

* Change field description

---------

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

1 files changed, 29 insertions, 0 deletions

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