adding delete reports

public/locales/en/translation.json

@@ -12,7 +12,8 @@
         },
         "defaultError": "An error occurred.",
         "defaultSuccess": "Success!",
-        "loading": "Loading..."
+        "loading": "Loading...",
+        "actionNotUndoable": "This action cannot be undone!"
     },
 
     "routes": {
@@ -181,6 +182,13 @@
         },
         "ReportDetailRoute": {
             "title": "Report Details",
+            "actions": {
+                "delete": {
+                    "label": "Delete Report",
+                    "description": "Are you sure you want to delete this report?",
+                    "continueAction": "Delete Report"
+                }
+            },
             "sections": {
                 "information": {
                     "title": "Email Information",

src/route-widgets/ReportDetailRoute/DeleteButton.tsx

@@ -0,0 +1,57 @@
+import {ReactElement, useState} from "react"
+import {
+	Alert,
+	Button,
+	Dialog,
+	DialogActions,
+	DialogContent,
+	DialogContentText,
+	DialogTitle,
+	Typography,
+} from "@mui/material"
+import {useTranslation} from "react-i18next"
+import {MdDelete} from "react-icons/md"
+import {TiCancel} from "react-icons/ti"
+
+export interface DeleteButtonProps {
+	id: string
+}
+
+export default function ReportDetailRoute({id}: DeleteButtonProps): ReactElement {
+	const {t} = useTranslation()
+
+	const [showDeleteDialog, setShowDeleteDialog] = useState<boolean>(false)
+
+	return (
+		<>
+			<Button
+				variant="outlined"
+				color="error"
+				size="small"
+				startIcon={<MdDelete />}
+				onClick={() => setShowDeleteDialog(true)}
+			>
+				{t("routes.ReportDetailRoute.actions.delete.label")}
+			</Button>
+			<Dialog open={showDeleteDialog} onClose={() => setShowDeleteDialog(false)}>
+				<DialogTitle>{t("routes.ReportDetailRoute.actions.delete.label")}</DialogTitle>
+				<DialogContent>
+					<DialogContentText>
+						{t("routes.ReportDetailRoute.actions.delete.description")}
+					</DialogContentText>
+					<DialogContentText color="error">
+						{t("general.actionNotUndoable")}
+					</DialogContentText>
+				</DialogContent>
+				<DialogActions>
+					<Button startIcon={<TiCancel />} onClick={() => setShowDeleteDialog(false)}>
+						{t("general.cancelLabel")}
+					</Button>
+					<Button startIcon={<MdDelete />} color="error">
+						{t("routes.ReportDetailRoute.actions.delete.continueAction")}
+					</Button>
+				</DialogActions>
+			</Dialog>
+		</>
+	)
+}

src/routes/ReportDetailRoute.tsx

@@ -4,12 +4,15 @@ import {useTranslation} from "react-i18next"
 import React, {ReactElement} from "react"
 
 import {useQuery} from "@tanstack/react-query"
-import {List} from "@mui/material"
+import {Button, List} from "@mui/material"
 
 import {DecryptedReportContent, Report} from "~/server-types"
 import {getReport} from "~/apis"
 import {DecryptReport, SimpleOverlayInformation, SimplePageBuilder} from "~/components"
 import {WithEncryptionRequired} from "~/hocs"
+import {BsTrash} from "react-icons/bs"
+import {MdDelete} from "react-icons/md"
+import DeleteButton from "~/route-widgets/ReportDetailRoute/DeleteButton"
 import ProxiedImagesListItem from "~/route-widgets/ReportDetailRoute/ProxiedImagesListItem"
 import QueryResult from "~/components/QueryResult"
 import SinglePixelImageTrackersListItem from "~/route-widgets/ReportDetailRoute/SinglePixelImageTrackersListItem"
@@ -23,7 +26,10 @@ function ReportDetailRoute(): ReactElement {
 	)
 
 	return (
-		<SimplePageBuilder.Page title="Report Details">
+		<SimplePageBuilder.Page
+			title="Report Details"
+			actions={query.data && <DeleteButton id={query.data.id} />}
+		>
 			<QueryResult<Report> query={query}>
 				{encryptedReport => (
 					<DecryptReport encryptedContent={encryptedReport.encryptedContent}>