form action redirects user to tjhe appropriate year

app/ui/BillDeleteForm.tsx

@@ -0,0 +1,42 @@
+"use client";
+
+import { FC } from "react";
+import { Bill, BillingLocation } from "../lib/db-types";
+import { deleteLocationById } from "../lib/actions/locationActions";
+import { useFormState } from "react-dom";
+import { Main } from "./Main";
+import { gotoHome } from "../lib/actions/navigationActions";
+import { deleteBillById } from "../lib/actions/billActions";
+
+export interface BillDeleteFormProps {
+    bill: Bill,
+    location: BillingLocation
+}
+
+export const BillDeleteForm:FC<BillDeleteFormProps> = ({ bill, location }) =>
+{
+    const handleAction = deleteBillById.bind(null, location._id, bill._id, location.yearMonth.year);
+    const [ state, dispatch ] = useFormState(handleAction, null);
+
+    const handleCancel = () => {
+        gotoHome(`/?year=${location.yearMonth.year}`);
+    };
+
+    return(
+        <Main>
+            <div className="card card-compact card-bordered min-w-[20em] max-w-[90em] bg-base-100 shadow-s my-1">
+                <div className="card-body">
+                    <form action={dispatch}>
+                        <p className="py-6 px-6">
+                            Please confirm deletion of bill “<strong>{bill.name}</strong>” at “<strong>{location.name}</strong>”.
+                        </p>
+                        <div className="pt-4 text-center">
+                          <button className="btn btn-primary">Confim</button>
+                          <button type="button" className="btn btn-neutral ml-3" onClick={handleCancel}>Cancel</button>
+                        </div>
+                    </form>
+                </div>
+            </div>
+        </Main>
+    )
+}