refactor(frontend): update EditUser & InviteUser dialogs

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

@@ -13,7 +13,12 @@ import { Button, Grid } from "@mui/material";
 import { useTranslate } from "@/hooks/useTranslate";
 import { FormButtonsProps } from "@/types/common/dialogs.types";
 
-export const DialogFormButtons = ({ onCancel, onSubmit }: FormButtonsProps) => {
+export const DialogFormButtons = ({
+  onSubmit,
+  onCancel,
+  cancelButtonProps,
+  confirmButtonProps,
+}: FormButtonsProps) => {
   const { t } = useTranslate();
 
   return (
@@ -28,6 +33,7 @@ export const DialogFormButtons = ({ onCancel, onSubmit }: FormButtonsProps) => {
         variant="outlined"
         onClick={onCancel}
         startIcon={<CloseIcon />}
+        {...cancelButtonProps}
       >
         {t("button.cancel")}
       </Button>
@@ -36,6 +42,7 @@ export const DialogFormButtons = ({ onCancel, onSubmit }: FormButtonsProps) => {
         variant="contained"
         onClick={onSubmit}
         startIcon={<CheckIcon />}
+        {...confirmButtonProps}
       >
         {t("button.submit")}
       </Button>

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

@@ -17,21 +17,21 @@ export const FormDialog = ({
   title,
   children,
   onSubmit,
+  cancelButtonProps,
+  confirmButtonProps,
   ...rest
 }: FormDialogProps) => {
-  const handleClose = () => rest.onClose?.({}, "backdropClick");
-  const dialogActions =
-    rest.hasButtons === false ? null : (
-      <DialogActions style={{ padding: "0.5rem" }}>
-        <DialogFormButtons onCancel={handleClose} onSubmit={onSubmit} />
-      </DialogActions>
-    );
+  const onCancel = () => rest.onClose?.({}, "backdropClick");
 
   return (
     <Dialog fullWidth {...rest}>
-      <DialogTitle onClose={handleClose}>{title}</DialogTitle>
+      <DialogTitle onClose={onCancel}>{title}</DialogTitle>
       <DialogContent>{children}</DialogContent>
-      {dialogActions}
+      <DialogActions style={{ padding: "0.5rem" }}>
+        <DialogFormButtons
+          {...{ onSubmit, onCancel, confirmButtonProps, cancelButtonProps }}
+        />
+      </DialogActions>
     </Dialog>
   );
 };

frontend/src/components/users/EditUserForm.tsx

@@ -0,0 +1,137 @@
+/*
+ * 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, Grid, Link } from "@mui/material";
+import { FC, Fragment, useEffect } from "react";
+import { Controller, useForm } from "react-hook-form";
+
+import { ContentContainer, ContentItem } from "@/app-components/dialogs/";
+import AutoCompleteEntitySelect from "@/app-components/inputs/AutoCompleteEntitySelect";
+import { Input } from "@/app-components/inputs/Input";
+import { useUpdate } from "@/hooks/crud/useUpdate";
+import { useToast } from "@/hooks/useToast";
+import { useTranslate } from "@/hooks/useTranslate";
+import { EntityType, Format } from "@/services/types";
+import { ComponentFormProps } from "@/types/common/dialogs.types";
+import { IRole } from "@/types/role.types";
+import { IUser, IUserAttributes } from "@/types/user.types";
+
+const getFullName = (user?: IUser) => `${user?.first_name} ${user?.last_name}`;
+
+export type EditUserFormData = {
+  user: IUser;
+  roles: IRole[];
+};
+export const EditUserForm: FC<ComponentFormProps<EditUserFormData>> = ({
+  data,
+  Wrapper = Fragment,
+  WrapperProps,
+  ...rest
+}) => {
+  const { t } = useTranslate();
+  const { toast } = useToast();
+  const { mutate: updateUser } = useUpdate(EntityType.USER, {
+    onError: (error) => {
+      rest.onError?.();
+      toast.error(error.message || t("message.internal_server_error"));
+    },
+    onSuccess() {
+      rest.onSuccess?.();
+      toast.success(t("message.success_save"));
+    },
+  });
+  const {
+    reset,
+    control,
+    formState: { errors },
+    handleSubmit,
+  } = useForm<IUserAttributes>({
+    defaultValues: { roles: data?.roles.map((role) => role.id) },
+  });
+  const validationRules = {
+    roles: {
+      required: t("message.roles_is_required"),
+    },
+  };
+  const onSubmitForm = (params: IUserAttributes) => {
+    if (data?.user.id) {
+      updateUser({
+        id: data.user.id,
+        params,
+      });
+    }
+  };
+
+  useEffect(() => {
+    if (data?.user) {
+      reset({ roles: data?.user?.roles });
+    }
+  }, [reset, data?.user]);
+
+  return (
+    <Wrapper
+      open={!!WrapperProps?.open}
+      onSubmit={handleSubmit(onSubmitForm)}
+      {...WrapperProps}
+    >
+      <form onSubmit={handleSubmit(onSubmitForm)}>
+        <ContentContainer>
+          <ContentItem>
+            <Input
+              disabled
+              label={t("label.auth_user")}
+              value={getFullName(data?.user)}
+              InputProps={{
+                readOnly: true,
+              }}
+            />
+          </ContentItem>
+          <ContentItem>
+            <Grid container gap={3}>
+              <Grid item xs>
+                <Controller
+                  name="roles"
+                  rules={validationRules.roles}
+                  control={control}
+                  defaultValue={data?.roles?.map(({ id }) => id) || []}
+                  render={({ field }) => {
+                    const { onChange, ...rest } = field;
+
+                    return (
+                      <AutoCompleteEntitySelect<IRole>
+                        autoFocus
+                        searchFields={["name"]}
+                        entity={EntityType.ROLE}
+                        format={Format.BASIC}
+                        labelKey="name"
+                        label={t("label.roles")}
+                        multiple={true}
+                        {...field}
+                        error={!!errors.roles}
+                        helperText={errors.roles ? errors.roles.message : null}
+                        onChange={(_e, selected) =>
+                          onChange(selected.map(({ id }) => id))
+                        }
+                        {...rest}
+                      />
+                    );
+                  }}
+                />
+              </Grid>
+              <Grid alignContent="center">
+                <Link href="/roles">
+                  <Button variant="contained">{t("button.manage")}</Button>
+                </Link>
+              </Grid>
+            </Grid>
+          </ContentItem>
+        </ContentContainer>
+      </form>
+    </Wrapper>
+  );
+};

frontend/src/components/users/EditUserFormDialog.tsx

@@ -0,0 +1,24 @@
+/*
+ * 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 { GenericFormDialog } from "@/app-components/dialogs";
+import { ComponentFormDialogProps } from "@/types/common/dialogs.types";
+
+import { EditUserForm, EditUserFormData } from "./EditUserForm";
+
+export const CategoryFormDialog = <
+  T extends EditUserFormData = EditUserFormData,
+>(
+  props: ComponentFormDialogProps<T>,
+) => (
+  <GenericFormDialog<T>
+    Form={EditUserForm}
+    editText="title.manage_roles"
+    {...props}
+  />
+);