changed delete confirmation

frontend/src/locales/de/common.json

@@ -73,6 +73,7 @@
     },
     "loading": "Lade Verträge…",
     "empty": "Keine Verträge gefunden.",
+    "deleteTitle": "Vertrag löschen",
     "deleteConfirm": "Vertrag \"{{title}}\" wirklich löschen?",
     "details": "Details anzeigen",
     "edit": "Bearbeiten",

frontend/src/locales/en/common.json

@@ -73,6 +73,7 @@
     },
     "loading": "Loading contracts…",
     "empty": "No contracts found.",
+    "deleteTitle": "Delete contract",
     "deleteConfirm": "Do you really want to delete \"{{title}}\"?",
     "details": "Show details",
     "edit": "Edit",

frontend/src/routes/ContractsList.tsx

@@ -6,6 +6,11 @@ import {
   Box,
   Button,
   Chip,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  DialogTitle,
   IconButton,
   InputAdornment,
   MenuItem,
@@ -35,6 +40,7 @@ export default function ContractsList() {
   const queryClient = useQueryClient();
   const { showMessage } = useSnackbar();
   const { t } = useTranslation();
+  const [contractToDelete, setContractToDelete] = useState<Contract | null>(null);
 
   const {
     data: contracts,
@@ -87,10 +93,10 @@ export default function ContractsList() {
     onError: (error: Error) => showMessage(error.message ?? t("contracts.deleteError"), "error")
   });
 
-  const handleDelete = (contract: Contract) => {
+  const handleDeleteConfirm = () => {
-    if (window.confirm(t("contracts.deleteConfirm", { title: contract.title }))) {
+    if (!contractToDelete) return;
-      deleteMutation.mutate(contract.id);
+    deleteMutation.mutate(contractToDelete.id);
-    }
+    setContractToDelete(null);
   };
 
   return (
@@ -204,7 +210,7 @@ export default function ContractsList() {
                     </IconButton>
                   </Tooltip>
                   <Tooltip title={t("actions.delete")}>
-                    <IconButton color="error" onClick={() => handleDelete(contract)}>
+                    <IconButton color="error" onClick={() => setContractToDelete(contract)}>
                       <DeleteIcon />
                     </IconButton>
                   </Tooltip>
@@ -214,6 +220,30 @@ export default function ContractsList() {
           </TableBody>
         </Table>
       </Paper>
+
+      <Dialog
+        open={Boolean(contractToDelete)}
+        onClose={() => setContractToDelete(null)}
+        aria-labelledby="delete-contract-title"
+      >
+        <DialogTitle id="delete-contract-title">{t("contracts.deleteTitle")}</DialogTitle>
+        <DialogContent>
+          <DialogContentText>
+            {t("contracts.deleteConfirm", { title: contractToDelete?.title ?? "" })}
+          </DialogContentText>
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={() => setContractToDelete(null)}>{t("actions.cancel")}</Button>
+          <Button
+            color="error"
+            variant="contained"
+            onClick={handleDeleteConfirm}
+            disabled={deleteMutation.isPending}
+          >
+            {t("actions.delete")}
+          </Button>
+        </DialogActions>
+      </Dialog>
     </>
   );
 }