Add cancel button on expense form (fixes #92)

2 files changed, 18 insertions, 7 deletions

diff --git a/src/components/expense-form.tsx b/src/components/expense-form.tsx
index 431afc0..fd3f6e2 100644
--- a/src/components/expense-form.tsx
+++ b/src/components/expense-form.tsx
@@ -39,6 +39,7 @@ import { ExpenseFormValues, expenseFormSchema } from '@/lib/schemas'
 import { cn } from '@/lib/utils'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { Save, Trash2 } from 'lucide-react'
+import Link from 'next/link'
 import { useSearchParams } from 'next/navigation'
 import { useState } from 'react'
 import { useForm } from 'react-hook-form'
@@ -583,6 +584,9 @@ export function ExpenseForm({
               Delete
             </AsyncButton>
           )}
+          <Button variant="ghost" asChild>
+            <Link href={`/groups/${group.id}`}>Cancel</Link>
+          </Button>
         </div>
       </form>
     </Form>
diff --git a/src/components/group-form.tsx b/src/components/group-form.tsx
index 27555ec..886070c 100644
--- a/src/components/group-form.tsx
+++ b/src/components/group-form.tsx
@@ -35,6 +35,7 @@ import { getGroup } from '@/lib/api'
 import { GroupFormValues, groupFormSchema } from '@/lib/schemas'
 import { zodResolver } from '@hookform/resolvers/zod'
 import { Save, Trash2 } from 'lucide-react'
+import Link from 'next/link'
 import { useEffect, useState } from 'react'
 import { useFieldArray, useForm } from 'react-hook-form'
 
@@ -272,13 +273,19 @@ export function GroupForm({
           </CardContent>
         </Card>
 
-        <SubmitButton
-          size="lg"
-          loadingContent={group ? 'Saving…' : 'Creating…'}
-          onClick={updateActiveUser}
-        >
-          <Save className="w-4 h-4 mr-2" /> {group ? <>Save</> : <> Create</>}
-        </SubmitButton>
+        <div className="flex mt-4 gap-2">
+          <SubmitButton
+            loadingContent={group ? 'Saving…' : 'Creating…'}
+            onClick={updateActiveUser}
+          >
+            <Save className="w-4 h-4 mr-2" /> {group ? <>Save</> : <> Create</>}
+          </SubmitButton>
+          {!group && (
+            <Button variant="ghost" asChild>
+              <Link href="/groups">Cancel</Link>
+            </Button>
+          )}
+        </div>
       </form>
     </Form>
   )