From 80e30deace6a21c07206b3ce84930d5d3eb53b90 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nikola=20Dere=C5=BEi=C4=87?= <nikola.derezic@gmail.com>
Date: Mon, 11 Aug 2025 11:24:09 +0200
Subject: [PATCH] add conditional warning for destructive delete operation
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Added React state to track toggle status and show warning only when enabled
- Implemented modern custom border warning style with left red border and subtle background
- Added responsive width constraints (max-w-[24rem]) and word wrapping for proper layout
- Warning includes ⚠️ emoji and clear messaging about irreversible operation
- Fixed JSON syntax errors in translation files (replaced HTML entities with escaped quotes)
- Enhanced translations: "Also delete" phrasing and detailed warning messages
- Warning appears dynamically when bulk deletion option is activated

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 app/ui/LocationDeleteForm.tsx | 23 +++++++++++++++++++++--
 messages/en.json              |  6 ++++--
 messages/hr.json              |  6 ++++--
 3 files changed, 29 insertions(+), 6 deletions(-)

diff --git a/app/ui/LocationDeleteForm.tsx b/app/ui/LocationDeleteForm.tsx
index 0347b28..c51b456 100644
--- a/app/ui/LocationDeleteForm.tsx
+++ b/app/ui/LocationDeleteForm.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { FC, ReactNode } from "react";
+import { FC, ReactNode, useState } from "react";
 import { BillingLocation } from "../lib/db-types";
 import { deleteLocationById } from "../lib/actions/locationActions";
 import { useFormState } from "react-dom";
@@ -17,6 +17,7 @@ export const LocationDeleteForm:FC<LocationDeleteFormProps> = ({ location }) =>
     const handleAction = deleteLocationById.bind(null, location._id, location.yearMonth);
     const [ , dispatch ] = useFormState(handleAction, null);
     const t = useTranslations("location-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">
@@ -34,9 +35,27 @@ export const LocationDeleteForm:FC<LocationDeleteFormProps> = ({ location }) =>
                     <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" />
+                            <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]">
+                            <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 w-[5.5em]">{t("confirm-button")}</button>
                         <Link className="btn btn-neutral w-[5.5em] ml-3" href={`/location/${location._id}/edit/`}>{t("cancel-button")}</Link>
diff --git a/messages/en.json b/messages/en.json
index 7c61f48..b5566b3 100644
--- a/messages/en.json
+++ b/messages/en.json
@@ -88,10 +88,12 @@
     "back-button": "Back"
   },
   "location-delete-form": {
-    "text": "Please confirm deletion of realestate “<strong>{name}</strong>“.",
+    "text": "Please confirm deletion of realestate \"<strong>{name}</strong>\".",
     "cancel-button": "Cancel",
     "confirm-button": "Confirm",
-    "delete-in-subsequent-months": "Delete in all subsequent months"
+    "delete-in-subsequent-months": "Also delete in all subsequent months",
+    "warning-title": "Warning",
+    "warning-message": "This operation cannot be undone and will delete the location in all future months!"
   },
   "location-edit-form": {
     "location-name-placeholder": "Realestate name",
diff --git a/messages/hr.json b/messages/hr.json
index b4e7bec..1cba01e 100644
--- a/messages/hr.json
+++ b/messages/hr.json
@@ -87,10 +87,12 @@
     "back-button": "Nazad"
   },
   "location-delete-form": {
-    "text": "Molim potvrdi brisanje nekretnine “<strong>{name}</strong>“.",
+    "text": "Molim potvrdi brisanje nekretnine \"<strong>{name}</strong>\".",
     "cancel-button": "Odustani",
     "confirm-button": "Potvrdi",
-    "delete-in-subsequent-months": "Obriši u svim mjesecima koji slijede"
+    "delete-in-subsequent-months": "Također obriši i u svim mjesecima koji slijede",
+    "warning-title": "Upozorenje",
+    "warning-message": "Ova operacija je nepovratna i obrisat će lokaciju u svim mjesecima koji slijede!"
   },
   "location-edit-form": {
     "location-name-placeholder": "Ime nekretnine",