Make it work

src/app/groups/[groupId]/@modal/expense-modal.tsx

@@ -6,7 +6,7 @@ import {
   DialogTitle,
 } from '@/components/ui/dialog'
 import { useRouter } from 'next/navigation'
-import { ReactNode } from 'react'
+import { ReactNode, useState } from 'react'
 
 export function ExpenseModal({
   children,
@@ -16,9 +16,16 @@ export function ExpenseModal({
   title: ReactNode
 }) {
   const router = useRouter()
+  const [open, setOpen] = useState(true)
 
   return (
-    <Dialog open onOpenChange={() => router.back()}>
+    <Dialog
+      open={open}
+      onOpenChange={(open) => {
+        setOpen(open)
+        if (!open) router.back()
+      }}
+    >
       <DialogContent className="w-full max-w-screen-sm">
         <DialogHeader>
           <DialogTitle>{title}</DialogTitle>

src/app/groups/[groupId]/expenses/actions.ts

@@ -1,13 +1,13 @@
 'use server'
 import { createExpense, deleteExpense, updateExpense } from '@/lib/api'
 import { expenseFormSchema } from '@/lib/schemas'
-import { redirect } from 'next/navigation'
+import { revalidatePath } from 'next/cache'
 
 export async function createExpenseAction(groupId: string, values: unknown) {
   'use server'
   const expenseFormValues = expenseFormSchema.parse(values)
   await createExpense(expenseFormValues, groupId)
-  redirect(`/groups/${groupId}`)
+  revalidatePath(`/groups/${groupId}`, 'layout')
 }
 
 export async function updateExpenseAction(
@@ -18,11 +18,11 @@ export async function updateExpenseAction(
   'use server'
   const expenseFormValues = expenseFormSchema.parse(values)
   await updateExpense(groupId, expenseId, expenseFormValues)
-  redirect(`/groups/${groupId}`)
+  revalidatePath(`/groups/${groupId}`, 'layout')
 }
 
 export async function deleteExpenseAction(groupId: string, expenseId: string) {
   'use server'
   await deleteExpense(expenseId)
-  redirect(`/groups/${groupId}`)
+  revalidatePath(`/groups/${groupId}`, 'layout')
 }

src/app/groups/[groupId]/not-found.tsx

@@ -1,8 +1,5 @@
 'use client'
-import { redirect, useParams } from 'next/navigation'
 
 export default function NotFound() {
-  const { groupId } = useParams()
-  console.log('Not found!', { groupId })
-  redirect(`/groups/${groupId}`)
+  return null
 }

src/app/groups/[groupId]/reimbursement-list.tsx

@@ -37,6 +37,7 @@ export function ReimbursementList({
             <Button variant="link" asChild className="-mx-4 -my-3">
               <Link
                 href={`/groups/${groupId}/expenses/create?reimbursement=yes&from=${reimbursement.from}&to=${reimbursement.to}&amount=${reimbursement.amount}`}
+                scroll={false}
               >
                 Mark as paid
               </Link>