add bulk bill deletion across subsequent months

Implement ability to delete bills from all subsequent months
with toggle option and warning message similar to location deletion.
Includes centered warning box and efficient bulk operations.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

app/ui/BillDeleteForm.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { FC, ReactNode } from "react";
+import { FC, ReactNode, useState } from "react";
 import { Bill, BillingLocation } from "../lib/db-types";
 import { useFormState } from "react-dom";
 import { Main } from "./Main";
@@ -19,6 +19,7 @@ export const BillDeleteForm:FC<BillDeleteFormProps> = ({ bill, location }) => {
     const handleAction = deleteBillById.bind(null, location._id, bill._id, year, month);
     const [ state, dispatch ] = useFormState(handleAction, null);
     const t = useTranslations("bill-delete-form");
+    const [deleteInSubsequentMonths, setDeleteInSubsequentMonths] = useState(false);
 
     return(
         <div className="card card-compact card-bordered min-w-[20em] max-w-[90em] bg-base-100 shadow-s my-1">
@@ -33,9 +34,35 @@ export const BillDeleteForm:FC<BillDeleteFormProps> = ({ bill, location }) => {
                         })
                     }
                     </p>
+                    
+                    <div className="form-control">
+                        <label className="label cursor-pointer justify-center gap-4">
+                            <span className="label-text">{t("delete-in-subsequent-months")}</span> 
+                            <input 
+                                type="checkbox" 
+                                name="deleteInSubsequentMonths" 
+                                className="toggle toggle-error"
+                                checked={deleteInSubsequentMonths}
+                                onChange={(e) => setDeleteInSubsequentMonths(e.target.checked)}
+                            />
+                        </label>
+                    </div>
+                    
+                    {deleteInSubsequentMonths && (
+                        <div className="border-l-4 border-error bg-error/10 p-4 mt-4 rounded-r max-w-[24rem] mx-auto">
+                            <div className="flex items-start gap-3">
+                                <span className="text-xl flex-shrink-0">⚠️</span>
+                                <div className="flex-1 min-w-0">
+                                    <h3 className="font-bold text-error break-words">{t("warning-title")}</h3>
+                                    <div className="text-sm text-error/80 break-words">{t("warning-message")}</div>
+                                </div>
+                            </div>
+                        </div>
+                    )}
+                    
                     <div className="pt-4 text-center">
-                        <button className="btn btn-primary">{t("confirm-button")}</button>
-                        <Link className="btn btn-neutral ml-3" href={`/bill/${location._id}-${bill._id}/edit/`}>{t("cancel-button")}</Link>
+                        <button className="btn btn-primary w-[5.5em]">{t("confirm-button")}</button>
+                        <Link className="btn btn-neutral w-[5.5em] ml-3" href={`/bill/${location._id}-${bill._id}/edit/`}>{t("cancel-button")}</Link>
                     </div>
                 </form>
             </div>