refactor(frontend): category dialog

frontend/src/app-components/buttons/FormButtons.tsx

@@ -0,0 +1,42 @@
+/*
+ * Copyright © 2024 Hexastack. All rights reserved.
+ *
+ * Licensed under the GNU Affero General Public License v3.0 (AGPLv3) with the following additional terms:
+ * 1. The name "Hexabot" is a trademark of Hexastack. You may not use this name in derivative works without express written permission.
+ * 2. All derivative works must include clear attribution to the original creator and software, Hexastack and Hexabot, in a prominent location (e.g., in the software's "About" section, documentation, and README file).
+ */
+
+import CheckIcon from "@mui/icons-material/Check";
+import CloseIcon from "@mui/icons-material/Close";
+import { Button } from "@mui/material";
+
+import { useTranslate } from "@/hooks/useTranslate";
+import { FormButtonsProps } from "@/types/common/dialogs.types";
+
+export const FormButtons = <T,>({
+  onCancel,
+  onConfirm,
+}: FormButtonsProps<T>) => {
+  const { t } = useTranslate();
+
+  return (
+    <>
+      <Button
+        type="submit"
+        variant="contained"
+        onClick={onConfirm}
+        startIcon={<CheckIcon />}
+      >
+        {t("button.submit")}
+      </Button>
+      <Button
+        color="error"
+        variant="outlined"
+        onClick={onCancel}
+        startIcon={<CloseIcon />}
+      >
+        {t("button.cancel")}
+      </Button>
+    </>
+  );
+};

frontend/src/app-components/dialogs/DialogTitle.tsx

@@ -8,10 +8,10 @@
 
 import CloseIcon from "@mui/icons-material/Close";
 import {
+  IconButton,
+  DialogTitle as MuiDialogTitle,
   Typography,
   styled,
-  DialogTitle as MuiDialogTitle,
-  IconButton,
 } from "@mui/material";
 
 const StyledDialogTitle = styled(Typography)(() => ({
@@ -24,12 +24,20 @@ export const DialogTitle = ({
   onClose,
 }: {
   children: React.ReactNode;
-  onClose?: () => void;
+  onClose?:
+    | ((event: {}, reason: "backdropClick" | "escapeKeyDown") => void)
+    | undefined;
 }) => (
   <MuiDialogTitle>
     <StyledDialogTitle>{children}</StyledDialogTitle>
-    <IconButton size="small" aria-label="close" onClick={onClose}>
-      <CloseIcon />
-    </IconButton>
+    {onClose && (
+      <IconButton
+        size="small"
+        aria-label="close"
+        onClick={(e) => onClose(e, "backdropClick")}
+      >
+        <CloseIcon />
+      </IconButton>
+    )}
   </MuiDialogTitle>
 );

frontend/src/app-components/dialogs/FormDialog.tsx

@@ -0,0 +1,36 @@
+/*
+ * Copyright © 2024 Hexastack. All rights reserved.
+ *
+ * Licensed under the GNU Affero General Public License v3.0 (AGPLv3) with the following additional terms:
+ * 1. The name "Hexabot" is a trademark of Hexastack. You may not use this name in derivative works without express written permission.
+ * 2. All derivative works must include clear attribution to the original creator and software, Hexastack and Hexabot, in a prominent location (e.g., in the software's "About" section, documentation, and README file).
+ */
+
+import { Dialog, DialogActions, DialogContent } from "@mui/material";
+
+import { DialogTitle } from "@/app-components/dialogs";
+import { FormDialogProps } from "@/types/common/dialogs.types";
+
+import { FormButtons } from "../buttons/FormButtons";
+
+export const FormDialog = <T,>({
+  title,
+  children,
+  onConfirm,
+  ...rest
+}: FormDialogProps<T>) => {
+  return (
+    <Dialog fullWidth {...rest}>
+      <DialogTitle onClose={() => rest.onClose?.({}, "backdropClick")}>
+        {title}
+      </DialogTitle>
+      <DialogContent>{children}</DialogContent>
+      <DialogActions>
+        <FormButtons<T>
+          onCancel={() => rest.onClose?.({}, "backdropClick")}
+          onConfirm={onConfirm}
+        />
+      </DialogActions>
+    </Dialog>
+  );
+};

frontend/src/app-components/dialogs/confirm/ConfirmDialog.tsx

@@ -0,0 +1,56 @@
+/*
+ * Copyright © 2025 Hexastack. All rights reserved.
+ *
+ * Licensed under the GNU Affero General Public License v3.0 (AGPLv3) with the following additional terms:
+ * 1. The name "Hexabot" is a trademark of Hexastack. You may not use this name in derivative works without express written permission.
+ * 2. All derivative works must include clear attribution to the original creator and software, Hexastack and Hexabot, in a prominent location (e.g., in the software's "About" section, documentation, and README file).
+ */
+
+import { Button, Dialog, DialogActions, DialogContent } from "@mui/material";
+import { FC, ReactNode } from "react";
+
+import { ConfirmOptions, DialogProps } from "@/types/common/dialogs.types";
+
+import { DialogTitle } from "../DialogTitle";
+
+import { useDialogLoadingButton } from "./hooks/useDialogLoadingButton";
+
+export interface ConfirmDialogPayload extends ConfirmOptions {
+  msg: ReactNode;
+}
+
+export interface ConfirmDialogProps
+  extends DialogProps<ConfirmDialogPayload, boolean> {}
+
+export const ConfirmDialog: FC<ConfirmDialogProps> = ({ payload, ...rest }) => {
+  const cancelButtonProps = useDialogLoadingButton(() => rest.onClose(false));
+  const okButtonProps = useDialogLoadingButton(() => rest.onClose(true));
+
+  return (
+    <Dialog
+      maxWidth="sm"
+      fullWidth
+      {...rest}
+      onClose={() => rest.onClose(false)}
+    >
+      <DialogTitle onClose={() => rest.onClose(false)}>
+        {payload.title}
+      </DialogTitle>
+      <DialogContent>{payload.msg}</DialogContent>
+      <DialogActions>
+        <Button
+          color={payload.severity || "error"}
+          variant="contained"
+          disabled={!open}
+          autoFocus
+          {...okButtonProps}
+        >
+          {payload.okText}
+        </Button>
+        <Button variant="outlined" disabled={!open} {...cancelButtonProps}>
+          {payload.cancelText}
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+};

frontend/src/app-components/dialogs/confirm/ConfirmDialogBody.tsx

@@ -0,0 +1,27 @@
+/*
+ * Copyright © 2025 Hexastack. All rights reserved.
+ *
+ * Licensed under the GNU Affero General Public License v3.0 (AGPLv3) with the following additional terms:
+ * 1. The name "Hexabot" is a trademark of Hexastack. You may not use this name in derivative works without express written permission.
+ * 2. All derivative works must include clear attribution to the original creator and software, Hexastack and Hexabot, in a prominent location (e.g., in the software's "About" section, documentation, and README file).
+ */
+
+import ErrorIcon from "@mui/icons-material/Error";
+import { Grid, Typography } from "@mui/material";
+
+import { useTranslate } from "@/hooks/useTranslate";
+
+export const ConfirmDialogBody = () => {
+  const { t } = useTranslate();
+
+  return (
+    <Grid container gap={1}>
+      <Grid item height="28px">
+        <ErrorIcon sx={{ fontSize: "28px" }} color="error" />
+      </Grid>
+      <Grid item alignSelf="center">
+        <Typography>{t("message.item_delete_confirm")}</Typography>
+      </Grid>
+    </Grid>
+  );
+};

frontend/src/app-components/dialogs/confirm/hooks/useDialogLoadingButton.ts

@@ -0,0 +1,26 @@
+/*
+ * Copyright © 2025 Hexastack. All rights reserved.
+ *
+ * Licensed under the GNU Affero General Public License v3.0 (AGPLv3) with the following additional terms:
+ * 1. The name "Hexabot" is a trademark of Hexastack. You may not use this name in derivative works without express written permission.
+ * 2. All derivative works must include clear attribution to the original creator and software, Hexastack and Hexabot, in a prominent location (e.g., in the software's "About" section, documentation, and README file).
+ */
+
+import { useState } from "react";
+
+export const useDialogLoadingButton = (onClose: () => Promise<void>) => {
+  const [loading, setLoading] = useState(false);
+  const handleClick = async () => {
+    try {
+      setLoading(true);
+      await onClose();
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return {
+    onClick: handleClick,
+    loading,
+  };
+};

frontend/src/app-components/dialogs/index.ts

@@ -6,7 +6,10 @@
  * 2. All derivative works must include clear attribution to the original creator and software, Hexastack and Hexabot, in a prominent location (e.g., in the software's "About" section, documentation, and README file).
  */
 
+export * from "./confirm/ConfirmDialog";
+export * from "./confirm/ConfirmDialogBody";
 export * from "./DeleteDialog";
 export * from "./DialogTitle";
+export * from "./FormDialog";
 export * from "./layouts/ContentContainer";
 export * from "./layouts/ContentItem";