Attach documents to expenses (#64)

* Upload documents to receipts

* Improve documents

* Make the feature opt-in

* Fix file name issue

src/components/expense-form.tsx

@@ -1,6 +1,7 @@
 'use client'
 import { AsyncButton } from '@/components/async-button'
 import { CategorySelector } from '@/components/category-selector'
+import { ExpenseDocumentsInput } from '@/components/expense-documents-input'
 import { SubmitButton } from '@/components/submit-button'
 import { Button } from '@/components/ui/button'
 import {
@@ -83,6 +84,7 @@ export function ExpenseForm({
           })),
           splitMode: expense.splitMode,
           isReimbursement: expense.isReimbursement,
+          documents: expense.documents,
         }
       : searchParams.get('reimbursement')
       ? {
@@ -100,6 +102,7 @@ export function ExpenseForm({
           ],
           isReimbursement: true,
           splitMode: 'EVENLY',
+          documents: [],
         }
       : {
           title: '',
@@ -114,6 +117,7 @@ export function ExpenseForm({
           paidBy: getSelectedPayer(),
           isReimbursement: false,
           splitMode: 'EVENLY',
+          documents: [],
         },
   })
 
@@ -506,6 +510,31 @@ export function ExpenseForm({
           </CardContent>
         </Card>
 
+        {process.env.NEXT_PUBLIC_ENABLE_EXPENSE_DOCUMENTS && (
+          <Card className="mt-4">
+            <CardHeader>
+              <CardTitle className="flex justify-between">
+                <span>Attach documents</span>
+              </CardTitle>
+              <CardDescription>
+                See and attach receipts to the expense.
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <FormField
+                control={form.control}
+                name="documents"
+                render={({ field }) => (
+                  <ExpenseDocumentsInput
+                    documents={field.value}
+                    updateDocuments={field.onChange}
+                  />
+                )}
+              />
+            </CardContent>
+          </Card>
+        )}
+
         <div className="flex mt-4 gap-2">
           <SubmitButton
             loadingContent={isCreate ? <>Creating…</> : <>Saving…</>}