Create expense from receipt (#69)

* Create expense from receipt

* Add modal

* Update README

src/app/groups/[groupId]/expenses/page.tsx

@@ -1,5 +1,6 @@
 import { cached } from '@/app/cached-functions'
 import { ActiveUserModal } from '@/app/groups/[groupId]/expenses/active-user-modal'
+import { CreateFromReceiptButton } from '@/app/groups/[groupId]/expenses/create-from-receipt-button'
 import { ExpenseList } from '@/app/groups/[groupId]/expenses/expense-list'
 import { Button } from '@/components/ui/button'
 import {
@@ -10,7 +11,8 @@ import {
   CardTitle,
 } from '@/components/ui/card'
 import { Skeleton } from '@/components/ui/skeleton'
-import { getGroupExpenses } from '@/lib/api'
+import { getCategories, getGroupExpenses } from '@/lib/api'
+import { env } from '@/lib/env'
 import { Download, Plus } from 'lucide-react'
 import { Metadata } from 'next'
 import Link from 'next/link'
@@ -31,6 +33,8 @@ export default async function GroupExpensesPage({
   const group = await cached.getGroup(groupId)
   if (!group) notFound()
 
+  const categories = await getCategories()
+
   return (
     <>
       <Card className="mb-4 rounded-none -mx-4 border-x-0 sm:border-x sm:rounded-lg sm:mx-0">
@@ -51,6 +55,13 @@ export default async function GroupExpensesPage({
                 <Download className="w-4 h-4" />
               </Link>
             </Button>
+            {env.NEXT_PUBLIC_ENABLE_RECEIPT_EXTRACT && (
+              <CreateFromReceiptButton
+                groupId={groupId}
+                groupCurrency={group.currency}
+                categories={categories}
+              />
+            )}
             <Button asChild size="icon">
               <Link href={`/groups/${groupId}/expenses/create`}>
                 <Plus className="w-4 h-4" />