1 files changed, 99 insertions, 0 deletions
diff --git a/src/components/input/ReportEditButton.tsx b/src/components/input/ReportEditButton.tsx
new file mode 100644
index 0000000..b333077
--- /dev/null
+++ b/src/components/input/ReportEditButton.tsx
@@ -0,0 +1,99 @@
+import {
+  AlertDialog,
+  Button,
+  Icon,
+  Menu,
+  MenuItem,
+  MenuTrigger,
+  Modal,
+  Popover,
+  Row,
+  Text,
+} from '@umami/react-zen';
+import { type ReactNode, useState } from 'react';
+import { useMessages } from '@/components/hooks';
+import { useDeleteQuery } from '@/components/hooks/queries/useDeleteQuery';
+import { Edit, MoreHorizontal, Trash } from '@/components/icons';
+
+export function ReportEditButton({
+  id,
+  name,
+  type,
+  children,
+  onDelete,
+}: {
+  id: string;
+  name: string;
+  type: string;
+  onDelete?: () => void;
+  children: ({ close }: { close: () => void }) => ReactNode;
+}) {
+  const { formatMessage, labels, messages } = useMessages();
+  const [showEdit, setShowEdit] = useState(false);
+  const [showDelete, setShowDelete] = useState(false);
+  const { mutateAsync, touch } = useDeleteQuery(`/reports/${id}`);
+
+  const handleAction = (id: any) => {
+    if (id === 'edit') {
+      setShowEdit(true);
+    } else if (id === 'delete') {
+      setShowDelete(true);
+    }
+  };
+
+  const handleClose = () => {
+    setShowEdit(false);
+    setShowDelete(false);
+  };
+
+  const handleDelete = async () => {
+    await mutateAsync(null, {
+      onSuccess: async () => {
+        touch(`reports:${type}`);
+        setShowDelete(false);
+        onDelete?.();
+      },
+    });
+  };
+
+  return (
+    <>
+      <MenuTrigger>
+        <Button variant="quiet">
+          <Icon>
+            <MoreHorizontal />
+          </Icon>
+        </Button>
+        <Popover placement="bottom">
+          <Menu onAction={handleAction}>
+            <MenuItem id="edit">
+              <Icon>
+                <Edit />
+              </Icon>
+              <Text>{formatMessage(labels.edit)}</Text>
+            </MenuItem>
+            <MenuItem id="delete">
+              <Icon>
+                <Trash />
+              </Icon>
+              <Text>{formatMessage(labels.delete)}</Text>
+            </MenuItem>
+          </Menu>
+        </Popover>
+      </MenuTrigger>
+      <Modal isOpen={showEdit || showDelete} isDismissable={true}>
+        {showEdit && children({ close: handleClose })}
+        {showDelete && (
+          <AlertDialog
+            title={formatMessage(labels.delete)}
+            onConfirm={handleDelete}
+            onCancel={handleClose}
+            isDanger
+          >
+            <Row gap="1">{formatMessage(messages.confirmDelete, { target: name })}</Row>
+          </AlertDialog>
+        )}
+      </Modal>
+    </>
+  );
+}