From 83424d883a7b58db1f2295f863aad59afcc5e0d4 Mon Sep 17 00:00:00 2001
From: hexastack <talebhassan.ikbel@gmail.com>
Date: Mon, 3 Feb 2025 10:39:06 +0100
Subject: [PATCH 01/31] fix: content edit

---
 frontend/src/components/contents/ContentDialog.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/contents/ContentDialog.tsx b/frontend/src/components/contents/ContentDialog.tsx
index 164e69aa..199e7cfa 100644
--- a/frontend/src/components/contents/ContentDialog.tsx
+++ b/frontend/src/components/contents/ContentDialog.tsx
@@ -6,7 +6,6 @@
  * 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 LinkIcon from "@mui/icons-material/Link";
 import {
   Dialog,
@@ -238,7 +237,9 @@ export const ContentDialog: FC<ContentDialogProps> = ({
                   name={contentField.name}
                   control={control}
                   defaultValue={
-                    content ? content["dynamicFields"][contentField.name] : null
+                    content && content["dynamicFields"]
+                      ? content["dynamicFields"][contentField.name]
+                      : null
                   }
                   rules={
                     contentField.name === "title"

From 02c50d76a19c92777714694fef348d6afb5e9d61 Mon Sep 17 00:00:00 2001
From: hexastack <talebhassan.ikbel@gmail.com>
Date: Tue, 4 Feb 2025 14:51:27 +0100
Subject: [PATCH 02/31] fix: update dynamicfields default values

---
 api/src/cms/schemas/content.schema.ts              | 4 ++--
 frontend/src/components/contents/ContentDialog.tsx | 4 +---
 2 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/api/src/cms/schemas/content.schema.ts b/api/src/cms/schemas/content.schema.ts
index bcfa7908..9c98d6f3 100644
--- a/api/src/cms/schemas/content.schema.ts
+++ b/api/src/cms/schemas/content.schema.ts
@@ -1,5 +1,5 @@
 /*
- * Copyright © 2024 Hexastack. All rights reserved.
+ * 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.
@@ -43,7 +43,7 @@ export class ContentStub extends BaseSchema {
   @Prop({ type: Boolean, default: true })
   status: boolean;
 
-  @Prop({ type: mongoose.Schema.Types.Mixed })
+  @Prop({ type: mongoose.Schema.Types.Mixed, default: {} })
   dynamicFields: Record<string, any>;
 
   @Prop({ type: String })
diff --git a/frontend/src/components/contents/ContentDialog.tsx b/frontend/src/components/contents/ContentDialog.tsx
index 199e7cfa..4bd93b07 100644
--- a/frontend/src/components/contents/ContentDialog.tsx
+++ b/frontend/src/components/contents/ContentDialog.tsx
@@ -237,9 +237,7 @@ export const ContentDialog: FC<ContentDialogProps> = ({
                   name={contentField.name}
                   control={control}
                   defaultValue={
-                    content && content["dynamicFields"]
-                      ? content["dynamicFields"][contentField.name]
-                      : null
+                    content ? content["dynamicFields"][contentField.name] : null
                   }
                   rules={
                     contentField.name === "title"

From 8112b80f94cb32e742e246619f4b5b07542588b1 Mon Sep 17 00:00:00 2001
From: hexastack <talebhassan.ikbel@gmail.com>
Date: Tue, 4 Feb 2025 14:53:22 +0100
Subject: [PATCH 03/31] fix: includes the dynamic fields in creation form

---
 .../content-types/ContentTypeDialog.tsx       | 110 +++++++++++-------
 1 file changed, 68 insertions(+), 42 deletions(-)

diff --git a/frontend/src/components/content-types/ContentTypeDialog.tsx b/frontend/src/components/content-types/ContentTypeDialog.tsx
index ebe33bb7..854e4735 100644
--- a/frontend/src/components/content-types/ContentTypeDialog.tsx
+++ b/frontend/src/components/content-types/ContentTypeDialog.tsx
@@ -1,14 +1,16 @@
 /*
- * Copyright © 2024 Hexastack. All rights reserved.
+ * 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 { Dialog, DialogActions, DialogContent } from "@mui/material";
+
+import AddIcon from "@mui/icons-material/Add";
+import { Button, Dialog, DialogActions, DialogContent } from "@mui/material";
 import { FC, useEffect } from "react";
-import { useForm } from "react-hook-form";
+import { useFieldArray, useForm } from "react-hook-form";
 
 import DialogButtons from "@/app-components/buttons/DialogButtons";
 import { DialogTitle } from "@/app-components/dialogs/DialogTitle";
@@ -21,10 +23,10 @@ import { DialogControlProps } from "@/hooks/useDialog";
 import { useToast } from "@/hooks/useToast";
 import { useTranslate } from "@/hooks/useTranslate";
 import { EntityType } from "@/services/types";
-import {
-  IContentType,
-  IContentTypeAttributes,
-} from "@/types/content-type.types";
+import { ContentFieldType, IContentType } from "@/types/content-type.types";
+
+import { FieldInput } from "./components/FieldInput";
+import { FIELDS_FORM_DEFAULT_VALUES, READ_ONLY_FIELDS } from "./constants";
 
 export type ContentTypeDialogProps = DialogControlProps<IContentType>;
 export const ContentTypeDialog: FC<ContentTypeDialogProps> = ({
@@ -37,15 +39,32 @@ export const ContentTypeDialog: FC<ContentTypeDialogProps> = ({
   const {
     handleSubmit,
     register,
+    control,
     reset,
+    setValue,
     formState: { errors },
-  } = useForm<IContentTypeAttributes>({
-    defaultValues: { name: data?.name || "" },
+  } = useForm<Partial<IContentType>>({
+    defaultValues: {
+      name: data?.name || "",
+      fields: data?.fields || FIELDS_FORM_DEFAULT_VALUES,
+    },
   });
-  const CloseAndReset = () => {
-    closeDialog();
-    reset();
-  };
+  const { append, fields, remove } = useFieldArray({
+    name: "fields",
+    control,
+  });
+
+  useEffect(() => {
+    if (data) {
+      reset({
+        name: data.name,
+        fields: data.fields,
+      });
+    } else {
+      reset();
+    }
+  }, [data, reset]);
+
   const { mutateAsync: createContentType } = useCreate(
     EntityType.CONTENT_TYPE,
     {
@@ -70,40 +89,18 @@ export const ContentTypeDialog: FC<ContentTypeDialogProps> = ({
       },
     },
   );
-  const validationRules = {
-    name: {
-      required: t("message.name_is_required"),
-    },
-  };
-  const onSubmitForm = async (params: IContentTypeAttributes) => {
+  const onSubmitForm = async (params) => {
     if (data) {
-      updateContentType({
-        id: data.id,
-        params,
-      });
+      updateContentType({ id: data.id, params });
     } else {
-      createContentType(params);
+      createContentType({ ...params, name: params.name || "" });
     }
   };
 
-  useEffect(() => {
-    if (open) reset();
-  }, [open, reset]);
-
-  useEffect(() => {
-    if (data) {
-      reset({
-        name: data.name,
-      });
-    } else {
-      reset();
-    }
-  }, [data, reset]);
-
   return (
-    <Dialog open={open} fullWidth onClose={CloseAndReset}>
+    <Dialog open={open} fullWidth onClose={closeDialog}>
       <form onSubmit={handleSubmit(onSubmitForm)}>
-        <DialogTitle onClose={CloseAndReset}>
+        <DialogTitle onClose={closeDialog}>
           {data ? t("title.edit_content_type") : t("title.new_content_type")}
         </DialogTitle>
         <DialogContent>
@@ -112,12 +109,41 @@ export const ContentTypeDialog: FC<ContentTypeDialogProps> = ({
               <Input
                 label={t("label.name")}
                 error={!!errors.name}
-                {...register("name", validationRules.name)}
-                helperText={errors.name ? errors.name.message : null}
+                {...register("name", {
+                  required: t("message.name_is_required"),
+                })}
                 required
                 autoFocus
               />
             </ContentItem>
+
+            {fields.map((f, index) => (
+              <ContentItem
+                key={f.id}
+                display="flex"
+                justifyContent="space-between"
+                gap={2}
+              >
+                <FieldInput
+                  setValue={setValue}
+                  control={control}
+                  remove={remove}
+                  index={index}
+                  disabled={READ_ONLY_FIELDS.includes(f.label as any)}
+                />
+              </ContentItem>
+            ))}
+            <ContentItem>
+              <Button
+                startIcon={<AddIcon />}
+                variant="contained"
+                onClick={() =>
+                  append({ label: "", name: "", type: ContentFieldType.TEXT })
+                }
+              >
+                {t("button.add")}
+              </Button>
+            </ContentItem>
           </ContentContainer>
         </DialogContent>
         <DialogActions>

From 9e029674e1fa49221946024f223f1f779172ee54 Mon Sep 17 00:00:00 2001
From: hexastack <talebhassan.ikbel@gmail.com>
Date: Tue, 4 Feb 2025 16:21:31 +0100
Subject: [PATCH 04/31] fix: reset form

---
 .../content-types/ContentTypeDialog.tsx       | 33 ++++++++++---------
 1 file changed, 18 insertions(+), 15 deletions(-)

diff --git a/frontend/src/components/content-types/ContentTypeDialog.tsx b/frontend/src/components/content-types/ContentTypeDialog.tsx
index 854e4735..ca4bfacc 100644
--- a/frontend/src/components/content-types/ContentTypeDialog.tsx
+++ b/frontend/src/components/content-types/ContentTypeDialog.tsx
@@ -6,7 +6,6 @@
  * 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 AddIcon from "@mui/icons-material/Add";
 import { Button, Dialog, DialogActions, DialogContent } from "@mui/material";
 import { FC, useEffect } from "react";
@@ -53,30 +52,34 @@ export const ContentTypeDialog: FC<ContentTypeDialogProps> = ({
     name: "fields",
     control,
   });
+  const CloseAndReset = () => {
+    closeDialog();
+    reset();
+  };
+
+  useEffect(() => {
+    if (open) reset();
+  }, [open, reset]);
 
   useEffect(() => {
     if (data) {
       reset({
         name: data.name,
-        fields: data.fields,
       });
     } else {
       reset();
     }
   }, [data, reset]);
 
-  const { mutateAsync: createContentType } = useCreate(
-    EntityType.CONTENT_TYPE,
-    {
-      onError: (error) => {
-        toast.error(error);
-      },
-      onSuccess: () => {
-        closeDialog();
-        toast.success(t("message.success_save"));
-      },
+  const { mutate: createContentType } = useCreate(EntityType.CONTENT_TYPE, {
+    onError: (error) => {
+      toast.error(error);
     },
-  );
+    onSuccess: () => {
+      closeDialog();
+      toast.success(t("message.success_save"));
+    },
+  });
   const { mutateAsync: updateContentType } = useUpdate(
     EntityType.CONTENT_TYPE,
     {
@@ -98,9 +101,9 @@ export const ContentTypeDialog: FC<ContentTypeDialogProps> = ({
   };
 
   return (
-    <Dialog open={open} fullWidth onClose={closeDialog}>
+    <Dialog open={open} fullWidth onClose={CloseAndReset}>
       <form onSubmit={handleSubmit(onSubmitForm)}>
-        <DialogTitle onClose={closeDialog}>
+        <DialogTitle onClose={CloseAndReset}>
           {data ? t("title.edit_content_type") : t("title.new_content_type")}
         </DialogTitle>
         <DialogContent>

From 044ce6e7250b78c00c6aee942ad1cbf9cd2465da Mon Sep 17 00:00:00 2001
From: hexastack <talebhassan.ikbel@gmail.com>
Date: Tue, 4 Feb 2025 17:07:13 +0100
Subject: [PATCH 05/31] fix: revert accidentally removed snippet

---
 frontend/src/components/content-types/ContentTypeDialog.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/frontend/src/components/content-types/ContentTypeDialog.tsx b/frontend/src/components/content-types/ContentTypeDialog.tsx
index ca4bfacc..c8d05703 100644
--- a/frontend/src/components/content-types/ContentTypeDialog.tsx
+++ b/frontend/src/components/content-types/ContentTypeDialog.tsx
@@ -115,6 +115,7 @@ export const ContentTypeDialog: FC<ContentTypeDialogProps> = ({
                 {...register("name", {
                   required: t("message.name_is_required"),
                 })}
+                helperText={errors.name ? errors.name.message : null}
                 required
                 autoFocus
               />

From fe13e43b6693ecf951cb77e6461e4043e6219809 Mon Sep 17 00:00:00 2001
From: hexastack <talebhassan.ikbel@gmail.com>
Date: Tue, 4 Feb 2025 18:46:16 +0100
Subject: [PATCH 06/31] fix: minor

---
 .../content-types/ContentTypeDialog.tsx       | 31 +++++++++----------
 1 file changed, 15 insertions(+), 16 deletions(-)

diff --git a/frontend/src/components/content-types/ContentTypeDialog.tsx b/frontend/src/components/content-types/ContentTypeDialog.tsx
index c8d05703..c53a093e 100644
--- a/frontend/src/components/content-types/ContentTypeDialog.tsx
+++ b/frontend/src/components/content-types/ContentTypeDialog.tsx
@@ -56,21 +56,6 @@ export const ContentTypeDialog: FC<ContentTypeDialogProps> = ({
     closeDialog();
     reset();
   };
-
-  useEffect(() => {
-    if (open) reset();
-  }, [open, reset]);
-
-  useEffect(() => {
-    if (data) {
-      reset({
-        name: data.name,
-      });
-    } else {
-      reset();
-    }
-  }, [data, reset]);
-
   const { mutate: createContentType } = useCreate(EntityType.CONTENT_TYPE, {
     onError: (error) => {
       toast.error(error);
@@ -96,10 +81,24 @@ export const ContentTypeDialog: FC<ContentTypeDialogProps> = ({
     if (data) {
       updateContentType({ id: data.id, params });
     } else {
-      createContentType({ ...params, name: params.name || "" });
+      createContentType(params);
     }
   };
 
+  useEffect(() => {
+    if (open) reset();
+  }, [open, reset]);
+
+  useEffect(() => {
+    if (data) {
+      reset({
+        name: data.name,
+      });
+    } else {
+      reset();
+    }
+  }, [data, reset]);
+
   return (
     <Dialog open={open} fullWidth onClose={CloseAndReset}>
       <form onSubmit={handleSubmit(onSubmitForm)}>

From 06906c4fcd407342037a38d5368ae781233da0ce Mon Sep 17 00:00:00 2001
From: hexastack <talebhassan.ikbel@gmail.com>
Date: Wed, 5 Feb 2025 10:50:16 +0100
Subject: [PATCH 07/31] feat: use single dialog component for both add and edit
 content type

---
 frontend/public/locales/en/translation.json   |   1 -
 frontend/public/locales/fr/translation.json   |   1 -
 .../content-types/ContentTypeDialog.tsx       |   1 +
 .../EditContentTypeFieldsDialog.tsx           | 219 ------------------
 .../src/components/content-types/index.tsx    |   6 +-
 5 files changed, 4 insertions(+), 224 deletions(-)
 delete mode 100644 frontend/src/components/content-types/EditContentTypeFieldsDialog.tsx

diff --git a/frontend/public/locales/en/translation.json b/frontend/public/locales/en/translation.json
index dd9bad2a..c094ede1 100644
--- a/frontend/public/locales/en/translation.json
+++ b/frontend/public/locales/en/translation.json
@@ -189,7 +189,6 @@
     "entities": "Content Types",
     "new_content_type": "New Content Type",
     "edit_content_type": "Edit Content Type",
-    "manage_fields": "Manage Fields",
     "nodes": "Content",
     "new_node": "New Content",
     "edit_node": "Edit Content",
diff --git a/frontend/public/locales/fr/translation.json b/frontend/public/locales/fr/translation.json
index 7ce2c0dd..881393a0 100644
--- a/frontend/public/locales/fr/translation.json
+++ b/frontend/public/locales/fr/translation.json
@@ -189,7 +189,6 @@
     "entities": "Types de contenu",
     "new_content_type": "Nouveau type de contenu",
     "edit_content_type": "Modifier le type de contenu",
-    "manage_fields": "Gérer les champs",
     "nodes": "Contenu",
     "new_node": "Nouveau contenu",
     "edit_node": "Modifier le contenu",
diff --git a/frontend/src/components/content-types/ContentTypeDialog.tsx b/frontend/src/components/content-types/ContentTypeDialog.tsx
index c53a093e..0d4bcbd9 100644
--- a/frontend/src/components/content-types/ContentTypeDialog.tsx
+++ b/frontend/src/components/content-types/ContentTypeDialog.tsx
@@ -93,6 +93,7 @@ export const ContentTypeDialog: FC<ContentTypeDialogProps> = ({
     if (data) {
       reset({
         name: data.name,
+        fields: data.fields || [],
       });
     } else {
       reset();
diff --git a/frontend/src/components/content-types/EditContentTypeFieldsDialog.tsx b/frontend/src/components/content-types/EditContentTypeFieldsDialog.tsx
deleted file mode 100644
index a2437e75..00000000
--- a/frontend/src/components/content-types/EditContentTypeFieldsDialog.tsx
+++ /dev/null
@@ -1,219 +0,0 @@
-/*
- * 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 AddIcon from "@mui/icons-material/Add";
-import {
-  Button,
-  CircularProgress,
-  Dialog,
-  DialogActions,
-  DialogContent,
-  Stack,
-} from "@mui/material";
-import { useEffect } from "react";
-import { useFieldArray, useForm } from "react-hook-form";
-
-import DialogButtons from "@/app-components/buttons/DialogButtons";
-import {
-  DialogTitle,
-  ContentContainer,
-  ContentItem,
-} from "@/app-components/dialogs";
-import { Input } from "@/app-components/inputs/Input";
-import { useGet } from "@/hooks/crud/useGet";
-import { useUpdate } from "@/hooks/crud/useUpdate";
-import { DialogControlProps } from "@/hooks/useDialog";
-import { useToast } from "@/hooks/useToast";
-import { useTranslate } from "@/hooks/useTranslate";
-import { EntityType } from "@/services/types";
-import { ContentFieldType, IContentType } from "@/types/content-type.types";
-
-import { FieldInput } from "./components/FieldInput";
-import { FIELDS_FORM_DEFAULT_VALUES, READ_ONLY_FIELDS } from "./constants";
-
-export type EditContentTypeDialogFieldsProps = DialogControlProps<IContentType>;
-
-export const EditContentTypeFieldsDialog = ({
-  data: contentType,
-  closeDialog,
-  open,
-}: EditContentTypeDialogFieldsProps) => {
-  const { t } = useTranslate();
-  const { isLoading, data, refetch } = useGet(contentType?.id || "", {
-    entity: EntityType.CONTENT_TYPE,
-  });
-  const { toast } = useToast();
-  const {
-    handleSubmit,
-    control,
-    reset,
-    setValue,
-    register,
-    formState: { errors },
-  } = useForm<Partial<IContentType>>({
-    mode: "onChange",
-    values: {
-      fields: data?.fields,
-      name: data?.name,
-    },
-    defaultValues: {
-      fields: FIELDS_FORM_DEFAULT_VALUES,
-      name: data?.name,
-    },
-  });
-  const { append, fields, replace, remove } = useFieldArray<
-    Pick<IContentType, "fields">,
-    "fields"
-  >({
-    name: "fields",
-    control,
-    keyName: "id",
-    rules: {
-      required: true,
-    },
-  });
-  const validationRules = {
-    name: {
-      required: t("message.name_is_required"),
-    },
-  };
-
-  useEffect(() => {
-    register("fields");
-  }, [register]);
-
-  useEffect(() => {
-    if (data?.fields) {
-      replace(data.fields);
-    }
-  }, [data, replace]);
-
-  useEffect(() => {
-    if (!open) {
-      reset();
-    }
-    if (open) {
-      refetch();
-    }
-  }, [open, reset]);
-
-  useEffect(() => {
-    if (data) {
-      reset({
-        name: data.name,
-        fields: data.fields,
-      });
-    } else {
-      reset();
-    }
-  }, [data, reset]);
-
-  function handleClose() {
-    closeDialog();
-  }
-
-  const { mutateAsync: updateContentType } = useUpdate(
-    EntityType.CONTENT_TYPE,
-    {
-      onError: (error) => {
-        toast.error(`${t("message.internal_server_error")}: ${error}`);
-      },
-      onSuccess: () => {
-        toast.success(t("message.success_save"));
-      },
-    },
-  );
-
-  return (
-    <Dialog
-      open={open}
-      fullWidth
-      maxWidth="xl"
-      sx={{ width: "fit-content", mx: "auto", minWidth: "600px" }}
-      onClose={handleClose}
-    >
-      <DialogTitle onClose={handleClose}>
-        {t("title.manage_fields")}
-      </DialogTitle>
-      <form
-        onSubmit={handleSubmit(async ({ name, fields }) => {
-          if (!!contentType)
-            await updateContentType({
-              id: contentType.id,
-              params: {
-                name,
-                fields,
-              },
-            });
-          handleClose();
-        })}
-      >
-        <DialogContent>
-          <ContentContainer>
-            <ContentItem>
-              <Input
-                label={t("label.name")}
-                error={!!errors.name}
-                {...register("name", validationRules.name)}
-                helperText={errors.name ? errors.name.message : null}
-                required
-                autoFocus
-              />
-            </ContentItem>
-            {!isLoading
-              ? fields.map((f, index) => (
-                  <ContentItem
-                    key={f.id}
-                    justifyContent="space-between"
-                    alignItems="center"
-                    gap={2}
-                    display="flex"
-                  >
-                    <FieldInput
-                      setValue={setValue}
-                      control={control}
-                      remove={remove}
-                      index={index}
-                      disabled={READ_ONLY_FIELDS.includes(f.label as any)}
-                    />
-                  </ContentItem>
-                ))
-              : null}
-            {isLoading ? (
-              <ContentItem>
-                <Stack sx={{ alignItems: "center", placeContent: "center" }}>
-                  <CircularProgress sx={{ color: "primary.main" }} />
-                </Stack>
-              </ContentItem>
-            ) : null}
-            <ContentItem>
-              <Button
-                startIcon={<AddIcon />}
-                variant="contained"
-                onClick={() =>
-                  append({
-                    label: "",
-                    name: "",
-                    type: ContentFieldType.TEXT,
-                  })
-                }
-                disabled={isLoading}
-                sx={{ mx: "auto" }}
-              >
-                {t("button.add")}
-              </Button>
-            </ContentItem>
-          </ContentContainer>
-        </DialogContent>
-        <DialogActions>
-          <DialogButtons closeDialog={closeDialog} />
-        </DialogActions>
-      </form>
-    </Dialog>
-  );
-};
diff --git a/frontend/src/components/content-types/index.tsx b/frontend/src/components/content-types/index.tsx
index 84cf93c0..46ef5638 100644
--- a/frontend/src/components/content-types/index.tsx
+++ b/frontend/src/components/content-types/index.tsx
@@ -1,11 +1,12 @@
 /*
- * Copyright © 2024 Hexastack. All rights reserved.
+ * 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 { faAlignLeft } from "@fortawesome/free-solid-svg-icons";
 import AddIcon from "@mui/icons-material/Add";
 import { Button, Grid, Paper } from "@mui/material";
@@ -33,7 +34,6 @@ import { PermissionAction } from "@/types/permission.types";
 import { getDateTimeFormatter } from "@/utils/date";
 
 import { ContentTypeDialog } from "./ContentTypeDialog";
-import { EditContentTypeFieldsDialog } from "./EditContentTypeFieldsDialog";
 
 export const ContentTypes = () => {
   const { t } = useTranslate();
@@ -125,7 +125,7 @@ export const ContentTypes = () => {
                 deleteContentType(deleteDialogCtl.data);
             }}
           />
-          <EditContentTypeFieldsDialog {...fieldsDialogCtl} />
+          <ContentTypeDialog {...getDisplayDialogs(fieldsDialogCtl)} />
           <Grid padding={2} container>
             <Grid item width="100%">
               <DataGrid

From c9e846e834a5d3c610c8dcd375cb931d9679cfb8 Mon Sep 17 00:00:00 2001
From: hexastack <talebhassan.ikbel@gmail.com>
Date: Wed, 5 Feb 2025 11:41:23 +0100
Subject: [PATCH 08/31] fix: minor

---
 .../content-types/ContentTypeDialog.tsx       | 21 ++++++++-----------
 1 file changed, 9 insertions(+), 12 deletions(-)

diff --git a/frontend/src/components/content-types/ContentTypeDialog.tsx b/frontend/src/components/content-types/ContentTypeDialog.tsx
index 0d4bcbd9..fa7bae18 100644
--- a/frontend/src/components/content-types/ContentTypeDialog.tsx
+++ b/frontend/src/components/content-types/ContentTypeDialog.tsx
@@ -65,18 +65,15 @@ export const ContentTypeDialog: FC<ContentTypeDialogProps> = ({
       toast.success(t("message.success_save"));
     },
   });
-  const { mutateAsync: updateContentType } = useUpdate(
-    EntityType.CONTENT_TYPE,
-    {
-      onError: () => {
-        toast.error(t("message.internal_server_error"));
-      },
-      onSuccess: () => {
-        closeDialog();
-        toast.success(t("message.success_save"));
-      },
+  const { mutate: updateContentType } = useUpdate(EntityType.CONTENT_TYPE, {
+    onError: () => {
+      toast.error(t("message.internal_server_error"));
     },
-  );
+    onSuccess: () => {
+      closeDialog();
+      toast.success(t("message.success_save"));
+    },
+  });
   const onSubmitForm = async (params) => {
     if (data) {
       updateContentType({ id: data.id, params });
@@ -93,7 +90,7 @@ export const ContentTypeDialog: FC<ContentTypeDialogProps> = ({
     if (data) {
       reset({
         name: data.name,
-        fields: data.fields || [],
+        fields: data.fields || FIELDS_FORM_DEFAULT_VALUES,
       });
     } else {
       reset();

From 1b455c9e05e900196e531a3cb5b3ac4aded0a114 Mon Sep 17 00:00:00 2001
From: hexastack <talebhassan.ikbel@gmail.com>
Date: Wed, 5 Feb 2025 15:36:22 +0100
Subject: [PATCH 09/31] fix: error message

---
 frontend/src/components/content-types/ContentTypeDialog.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/content-types/ContentTypeDialog.tsx b/frontend/src/components/content-types/ContentTypeDialog.tsx
index fa7bae18..5dd9c0f3 100644
--- a/frontend/src/components/content-types/ContentTypeDialog.tsx
+++ b/frontend/src/components/content-types/ContentTypeDialog.tsx
@@ -58,7 +58,7 @@ export const ContentTypeDialog: FC<ContentTypeDialogProps> = ({
   };
   const { mutate: createContentType } = useCreate(EntityType.CONTENT_TYPE, {
     onError: (error) => {
-      toast.error(error);
+      toast.error(error.message || t("message.internal_server_error"));
     },
     onSuccess: () => {
       closeDialog();
@@ -66,8 +66,8 @@ export const ContentTypeDialog: FC<ContentTypeDialogProps> = ({
     },
   });
   const { mutate: updateContentType } = useUpdate(EntityType.CONTENT_TYPE, {
-    onError: () => {
-      toast.error(t("message.internal_server_error"));
+    onError: (error) => {
+      toast.error(error.message || t("message.internal_server_error"));
     },
     onSuccess: () => {
       closeDialog();

From 23888c51da7fab37b972439b0352b4ca0e92756c Mon Sep 17 00:00:00 2001
From: hexastack <talebhassan.ikbel@gmail.com>
Date: Wed, 5 Feb 2025 17:03:18 +0100
Subject: [PATCH 10/31] fix: reset form

---
 frontend/src/components/content-types/ContentTypeDialog.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/content-types/ContentTypeDialog.tsx b/frontend/src/components/content-types/ContentTypeDialog.tsx
index 5dd9c0f3..3c248040 100644
--- a/frontend/src/components/content-types/ContentTypeDialog.tsx
+++ b/frontend/src/components/content-types/ContentTypeDialog.tsx
@@ -25,7 +25,7 @@ import { EntityType } from "@/services/types";
 import { ContentFieldType, IContentType } from "@/types/content-type.types";
 
 import { FieldInput } from "./components/FieldInput";
-import { FIELDS_FORM_DEFAULT_VALUES, READ_ONLY_FIELDS } from "./constants";
+import { READ_ONLY_FIELDS } from "./constants";
 
 export type ContentTypeDialogProps = DialogControlProps<IContentType>;
 export const ContentTypeDialog: FC<ContentTypeDialogProps> = ({
@@ -45,7 +45,7 @@ export const ContentTypeDialog: FC<ContentTypeDialogProps> = ({
   } = useForm<Partial<IContentType>>({
     defaultValues: {
       name: data?.name || "",
-      fields: data?.fields || FIELDS_FORM_DEFAULT_VALUES,
+      fields: data?.fields || [],
     },
   });
   const { append, fields, remove } = useFieldArray({
@@ -90,7 +90,7 @@ export const ContentTypeDialog: FC<ContentTypeDialogProps> = ({
     if (data) {
       reset({
         name: data.name,
-        fields: data.fields || FIELDS_FORM_DEFAULT_VALUES,
+        fields: data.fields || [],
       });
     } else {
       reset();

From 0253fe5d2d7d43a09c0d25881e92489230d5ab14 Mon Sep 17 00:00:00 2001
From: yassinedorbozgithub <yassine.dorboz.2022@gmail.com>
Date: Wed, 5 Feb 2025 17:34:26 +0100
Subject: [PATCH 11/31] fix(frontend): add language missing translations

---
 frontend/public/locales/en/translation.json | 2 ++
 frontend/public/locales/fr/translation.json | 2 ++
 2 files changed, 4 insertions(+)

diff --git a/frontend/public/locales/en/translation.json b/frontend/public/locales/en/translation.json
index 5d2a42a6..0de85850 100644
--- a/frontend/public/locales/en/translation.json
+++ b/frontend/public/locales/en/translation.json
@@ -198,6 +198,8 @@
     "import": "Bulk Import",
     "media_library": "Media Library",
     "languages": "Languages",
+    "new_language": "Add Language",
+    "edit_language": "Edit Language",
     "translations": "Translations",
     "update_translation": "Update Translation",
     "broadcast": "Broadcast",
diff --git a/frontend/public/locales/fr/translation.json b/frontend/public/locales/fr/translation.json
index 741e1168..dc47019a 100644
--- a/frontend/public/locales/fr/translation.json
+++ b/frontend/public/locales/fr/translation.json
@@ -198,6 +198,8 @@
     "import": "Importation en masse",
     "media_library": "Bibliothéque Media",
     "languages": "Langues",
+    "new_language": "Nouvelle Langue",
+    "edit_language": "Modifier Langue",
     "translations": "Traductions",
     "update_translation": "Mettre à jour la traduction",
     "broadcast": "Diffusion",

From 48a03500d8af84ccc056a5ae529f9359a8edb201 Mon Sep 17 00:00:00 2001
From: yassinedorbozgithub <yassine.dorboz.2022@gmail.com>
Date: Wed, 5 Feb 2025 17:35:36 +0100
Subject: [PATCH 12/31] refactor(frontend): update language dialogs

---
 .../components/languages/LanguageDialog.tsx   | 150 ------------------
 .../src/components/languages/LanguageForm.tsx | 127 +++++++++++++++
 .../languages/LanguageFormDialog.tsx          |  37 +++++
 frontend/src/components/languages/index.tsx   |  31 ++--
 4 files changed, 177 insertions(+), 168 deletions(-)
 delete mode 100644 frontend/src/components/languages/LanguageDialog.tsx
 create mode 100644 frontend/src/components/languages/LanguageForm.tsx
 create mode 100644 frontend/src/components/languages/LanguageFormDialog.tsx

diff --git a/frontend/src/components/languages/LanguageDialog.tsx b/frontend/src/components/languages/LanguageDialog.tsx
deleted file mode 100644
index 14012bc9..00000000
--- a/frontend/src/components/languages/LanguageDialog.tsx
+++ /dev/null
@@ -1,150 +0,0 @@
-/*
- * 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,
-  FormControlLabel,
-  Switch,
-} from "@mui/material";
-import { FC, useEffect } from "react";
-import { Controller, useForm } from "react-hook-form";
-
-import DialogButtons from "@/app-components/buttons/DialogButtons";
-import { DialogTitle } from "@/app-components/dialogs/DialogTitle";
-import { ContentContainer } from "@/app-components/dialogs/layouts/ContentContainer";
-import { ContentItem } from "@/app-components/dialogs/layouts/ContentItem";
-import { Input } from "@/app-components/inputs/Input";
-import { useCreate } from "@/hooks/crud/useCreate";
-import { useUpdate } from "@/hooks/crud/useUpdate";
-import { DialogControlProps } from "@/hooks/useDialog";
-import { useToast } from "@/hooks/useToast";
-import { useTranslate } from "@/hooks/useTranslate";
-import { EntityType } from "@/services/types";
-import { ILanguage, ILanguageAttributes } from "@/types/language.types";
-
-export type LanguageDialogProps = DialogControlProps<ILanguage>;
-export const LanguageDialog: FC<LanguageDialogProps> = ({
-  open,
-  data,
-  closeDialog,
-  ...rest
-}) => {
-  const { t } = useTranslate();
-  const { toast } = useToast();
-  const { mutateAsync: createLanguage } = useCreate(EntityType.LANGUAGE, {
-    onError: () => {
-      toast.error(t("message.internal_server_error"));
-    },
-    onSuccess() {
-      closeDialog();
-      toast.success(t("message.success_save"));
-    },
-  });
-  const { mutateAsync: updateLanguage } = useUpdate(EntityType.LANGUAGE, {
-    onError: () => {
-      toast.error(t("message.internal_server_error"));
-    },
-    onSuccess() {
-      closeDialog();
-      toast.success(t("message.success_save"));
-    },
-  });
-  const {
-    reset,
-    register,
-    formState: { errors },
-    handleSubmit,
-    control,
-  } = useForm<ILanguageAttributes>({
-    defaultValues: {
-      title: data?.title || "",
-      code: data?.code || "",
-      isRTL: data?.isRTL || false,
-    },
-  });
-  const validationRules = {
-    title: {
-      required: t("message.title_is_required"),
-    },
-    code: {
-      required: t("message.code_is_required"),
-    },
-  };
-  const onSubmitForm = async (params: ILanguageAttributes) => {
-    if (data) {
-      updateLanguage({ id: data.id, params });
-    } else {
-      createLanguage(params);
-    }
-  };
-
-  useEffect(() => {
-    if (open) reset();
-  }, [open, reset]);
-
-  useEffect(() => {
-    if (data) {
-      reset({
-        title: data.title,
-        code: data.code,
-        isRTL: data.isRTL,
-      });
-    } else {
-      reset();
-    }
-  }, [data, reset]);
-
-  return (
-    <Dialog open={open} fullWidth onClose={closeDialog} {...rest}>
-      <form onSubmit={handleSubmit(onSubmitForm)}>
-        <DialogTitle onClose={closeDialog}>
-          {data ? t("title.edit_label") : t("title.new_label")}
-        </DialogTitle>
-        <DialogContent>
-          <ContentContainer>
-            <ContentItem>
-              <Input
-                label={t("label.title")}
-                error={!!errors.title}
-                {...register("title", validationRules.title)}
-                helperText={errors.title ? errors.title.message : null}
-                multiline={true}
-              />
-            </ContentItem>
-            <ContentItem>
-              <Input
-                label={t("label.code")}
-                error={!!errors.code}
-                {...register("code", validationRules.code)}
-                helperText={errors.code ? errors.code.message : null}
-                multiline={true}
-              />
-            </ContentItem>
-            <ContentItem>
-              <Controller
-                name="isRTL"
-                control={control}
-                render={({ field }) => (
-                  <FormControlLabel
-                    control={<Switch {...field} checked={field.value} />}
-                    label={t("label.is_rtl")}
-                  />
-                )}
-              />
-            </ContentItem>
-          </ContentContainer>
-        </DialogContent>
-        <DialogActions>
-          <DialogButtons closeDialog={closeDialog} />
-        </DialogActions>
-      </form>
-    </Dialog>
-  );
-};
diff --git a/frontend/src/components/languages/LanguageForm.tsx b/frontend/src/components/languages/LanguageForm.tsx
new file mode 100644
index 00000000..3f42f074
--- /dev/null
+++ b/frontend/src/components/languages/LanguageForm.tsx
@@ -0,0 +1,127 @@
+/*
+ * 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 { FormControlLabel, Switch } from "@mui/material";
+import { FC, Fragment, useEffect } from "react";
+import { Controller, useForm } from "react-hook-form";
+
+import { ContentContainer, ContentItem } from "@/app-components/dialogs/";
+import { Input } from "@/app-components/inputs/Input";
+import { useCreate } from "@/hooks/crud/useCreate";
+import { useUpdate } from "@/hooks/crud/useUpdate";
+import { useToast } from "@/hooks/useToast";
+import { useTranslate } from "@/hooks/useTranslate";
+import { EntityType } from "@/services/types";
+import { ComponentFormProps } from "@/types/common/dialogs.types";
+import { ILanguage, ILanguageAttributes } from "@/types/language.types";
+
+export const LanguageForm: FC<ComponentFormProps<ILanguage>> = ({
+  data,
+  Wrapper = Fragment,
+  WrapperProps,
+  ...rest
+}) => {
+  const { t } = useTranslate();
+  const { toast } = useToast();
+  const options = {
+    onError: () => {
+      rest.onError?.();
+      toast.error(t("message.internal_server_error"));
+    },
+    onSuccess() {
+      rest.onSuccess?.();
+      toast.success(t("message.success_save"));
+    },
+  };
+  const { mutate: createLanguage } = useCreate(EntityType.LANGUAGE, options);
+  const { mutate: updateLanguage } = useUpdate(EntityType.LANGUAGE, options);
+  const {
+    reset,
+    register,
+    formState: { errors },
+    handleSubmit,
+    control,
+  } = useForm<ILanguageAttributes>({
+    defaultValues: {
+      title: data?.title || "",
+      code: data?.code || "",
+      isRTL: data?.isRTL || false,
+    },
+  });
+  const validationRules = {
+    title: {
+      required: t("message.title_is_required"),
+    },
+    code: {
+      required: t("message.code_is_required"),
+    },
+  };
+  const onSubmitForm = (params: ILanguageAttributes) => {
+    if (data) {
+      updateLanguage({ id: data.id, params });
+    } else {
+      createLanguage(params);
+    }
+  };
+
+  useEffect(() => {
+    if (data) {
+      reset({
+        title: data.title,
+        code: data.code,
+        isRTL: data.isRTL,
+      });
+    } else {
+      reset();
+    }
+  }, [data, reset]);
+
+  return (
+    <Wrapper
+      open={!!WrapperProps?.open}
+      onSubmit={handleSubmit(onSubmitForm)}
+      {...WrapperProps}
+    >
+      <form onSubmit={handleSubmit(onSubmitForm)}>
+        <ContentContainer>
+          <ContentItem>
+            <Input
+              label={t("label.title")}
+              error={!!errors.title}
+              {...register("title", validationRules.title)}
+              multiline={true}
+              autoFocus
+              helperText={errors.title ? errors.title.message : null}
+            />
+          </ContentItem>
+          <ContentItem>
+            <Input
+              label={t("label.code")}
+              error={!!errors.code}
+              {...register("code", validationRules.code)}
+              multiline={true}
+              helperText={errors.code ? errors.code.message : null}
+            />
+          </ContentItem>
+          <ContentItem>
+            <Controller
+              name="isRTL"
+              control={control}
+              render={({ field }) => (
+                <FormControlLabel
+                  control={<Switch {...field} checked={field.value} />}
+                  label={t("label.is_rtl")}
+                />
+              )}
+            />
+          </ContentItem>
+        </ContentContainer>
+      </form>
+    </Wrapper>
+  );
+};
diff --git a/frontend/src/components/languages/LanguageFormDialog.tsx b/frontend/src/components/languages/LanguageFormDialog.tsx
new file mode 100644
index 00000000..007544ba
--- /dev/null
+++ b/frontend/src/components/languages/LanguageFormDialog.tsx
@@ -0,0 +1,37 @@
+/*
+ * 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 { FC } from "react";
+
+import { FormDialog } from "@/app-components/dialogs";
+import { useTranslate } from "@/hooks/useTranslate";
+import { ComponentFormDialogProps } from "@/types/common/dialogs.types";
+import { ILanguage } from "@/types/language.types";
+
+import { LanguageForm } from "./LanguageForm";
+
+export const LanguageFormDialog: FC<ComponentFormDialogProps<ILanguage>> = ({
+  payload,
+  ...rest
+}) => {
+  const { t } = useTranslate();
+
+  return (
+    <LanguageForm
+      data={payload}
+      onSuccess={() => {
+        rest.onClose(true);
+      }}
+      Wrapper={FormDialog}
+      WrapperProps={{
+        title: payload ? t("title.edit_language") : t("title.new_language"),
+        ...rest,
+      }}
+    />
+  );
+};
diff --git a/frontend/src/components/languages/index.tsx b/frontend/src/components/languages/index.tsx
index 2b59a49e..1d914634 100644
--- a/frontend/src/components/languages/index.tsx
+++ b/frontend/src/components/languages/index.tsx
@@ -12,7 +12,7 @@ import { Button, Grid, Paper, Switch } from "@mui/material";
 import { GridColDef } from "@mui/x-data-grid";
 import { useQueryClient } from "react-query";
 
-import { DeleteDialog } from "@/app-components/dialogs/DeleteDialog";
+import { ConfirmDialogBody } from "@/app-components/dialogs";
 import { FilterTextfield } from "@/app-components/inputs/FilterTextfield";
 import {
   ActionColumnLabel,
@@ -24,7 +24,7 @@ import { isSameEntity } from "@/hooks/crud/helpers";
 import { useDelete } from "@/hooks/crud/useDelete";
 import { useFind } from "@/hooks/crud/useFind";
 import { useUpdate } from "@/hooks/crud/useUpdate";
-import { getDisplayDialogs, useDialog } from "@/hooks/useDialog";
+import { useDialogs } from "@/hooks/useDialogs";
 import { useHasPermission } from "@/hooks/useHasPermission";
 import { useSearch } from "@/hooks/useSearch";
 import { useToast } from "@/hooks/useToast";
@@ -35,14 +35,12 @@ import { ILanguage } from "@/types/language.types";
 import { PermissionAction } from "@/types/permission.types";
 import { getDateTimeFormatter } from "@/utils/date";
 
-import { LanguageDialog } from "./LanguageDialog";
+import { LanguageFormDialog } from "./LanguageFormDialog";
 
 export const Languages = () => {
   const { t } = useTranslate();
   const { toast } = useToast();
-  const addDialogCtl = useDialog<ILanguage>(false);
-  const editDialogCtl = useDialog<ILanguage>(false);
-  const deleteDialogCtl = useDialog<string>(false);
+  const dialogs = useDialogs();
   const queryClient = useQueryClient();
   const hasPermission = useHasPermission();
   const { onSearch, searchPayload } = useSearch<ILanguage>({
@@ -75,7 +73,6 @@ export const Languages = () => {
           return isSameEntity(qEntity, EntityType.NLP_SAMPLE);
         },
       });
-      deleteDialogCtl.closeDialog();
       toast.success(t("message.item_delete_success"));
     },
   });
@@ -94,12 +91,18 @@ export const Languages = () => {
     [
       {
         label: ActionColumnLabel.Edit,
-        action: (row) => editDialogCtl.openDialog(row),
+        action: (row) => dialogs.open(LanguageFormDialog, row),
         requires: [PermissionAction.UPDATE],
       },
       {
         label: ActionColumnLabel.Delete,
-        action: (row) => deleteDialogCtl.openDialog(row.id),
+        action: async ({ id }) => {
+          const isConfirmed = await dialogs.confirm(ConfirmDialogBody);
+
+          if (isConfirmed) {
+            deleteLanguage(id);
+          }
+        },
         requires: [PermissionAction.DELETE],
         isDisabled: (row) => row.isDefault,
       },
@@ -182,14 +185,6 @@ export const Languages = () => {
 
   return (
     <Grid container gap={3} flexDirection="column">
-      <LanguageDialog {...getDisplayDialogs(addDialogCtl)} />
-      <LanguageDialog {...getDisplayDialogs(editDialogCtl)} />
-      <DeleteDialog
-        {...deleteDialogCtl}
-        callback={() => {
-          if (deleteDialogCtl?.data) deleteLanguage(deleteDialogCtl.data);
-        }}
-      />
       <PageHeader icon={Flag} title={t("title.languages")}>
         <Grid
           justifyContent="flex-end"
@@ -208,7 +203,7 @@ export const Languages = () => {
                 startIcon={<AddIcon />}
                 variant="contained"
                 sx={{ float: "right" }}
-                onClick={() => addDialogCtl.openDialog()}
+                onClick={() => dialogs.open(LanguageFormDialog, null)}
               >
                 {t("button.add")}
               </Button>

From 708906352490f5bd75e1b49c596f9865ed5310a0 Mon Sep 17 00:00:00 2001
From: yassinedorbozgithub <yassine.dorboz.2022@gmail.com>
Date: Wed, 5 Feb 2025 17:41:59 +0100
Subject: [PATCH 13/31] fix(frontend): lowercase fr language translations

---
 frontend/public/locales/fr/translation.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/public/locales/fr/translation.json b/frontend/public/locales/fr/translation.json
index dc47019a..5de5b964 100644
--- a/frontend/public/locales/fr/translation.json
+++ b/frontend/public/locales/fr/translation.json
@@ -198,8 +198,8 @@
     "import": "Importation en masse",
     "media_library": "Bibliothéque Media",
     "languages": "Langues",
-    "new_language": "Nouvelle Langue",
-    "edit_language": "Modifier Langue",
+    "new_language": "Nouvelle langue",
+    "edit_language": "Modifier langue",
     "translations": "Traductions",
     "update_translation": "Mettre à jour la traduction",
     "broadcast": "Diffusion",

From e0ce9b06d267c081e61a82fe9bd33634cdb65a3c Mon Sep 17 00:00:00 2001
From: yassinedorbozgithub <yassine.dorboz.2022@gmail.com>
Date: Wed, 5 Feb 2025 17:49:09 +0100
Subject: [PATCH 14/31] fix(frontend): edit fr language translations

---
 frontend/public/locales/fr/translation.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/public/locales/fr/translation.json b/frontend/public/locales/fr/translation.json
index 5de5b964..68cbc21d 100644
--- a/frontend/public/locales/fr/translation.json
+++ b/frontend/public/locales/fr/translation.json
@@ -199,7 +199,7 @@
     "media_library": "Bibliothéque Media",
     "languages": "Langues",
     "new_language": "Nouvelle langue",
-    "edit_language": "Modifier langue",
+    "edit_language": "Modifier la langue",
     "translations": "Traductions",
     "update_translation": "Mettre à jour la traduction",
     "broadcast": "Diffusion",

From 9c30e3ebd70e3b58f13a77e2a1f621f1e59330db Mon Sep 17 00:00:00 2001
From: hexastack <talebhassan.ikbel@gmail.com>
Date: Wed, 5 Feb 2025 18:42:13 +0100
Subject: [PATCH 15/31] fix: reset form

---
 .../content-types/ContentTypeDialog.tsx        | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/content-types/ContentTypeDialog.tsx b/frontend/src/components/content-types/ContentTypeDialog.tsx
index 3c248040..91547560 100644
--- a/frontend/src/components/content-types/ContentTypeDialog.tsx
+++ b/frontend/src/components/content-types/ContentTypeDialog.tsx
@@ -25,7 +25,7 @@ import { EntityType } from "@/services/types";
 import { ContentFieldType, IContentType } from "@/types/content-type.types";
 
 import { FieldInput } from "./components/FieldInput";
-import { READ_ONLY_FIELDS } from "./constants";
+import { FIELDS_FORM_DEFAULT_VALUES, READ_ONLY_FIELDS } from "./constants";
 
 export type ContentTypeDialogProps = DialogControlProps<IContentType>;
 export const ContentTypeDialog: FC<ContentTypeDialogProps> = ({
@@ -45,16 +45,20 @@ export const ContentTypeDialog: FC<ContentTypeDialogProps> = ({
   } = useForm<Partial<IContentType>>({
     defaultValues: {
       name: data?.name || "",
-      fields: data?.fields || [],
+      fields: data?.fields || FIELDS_FORM_DEFAULT_VALUES,
     },
   });
-  const { append, fields, remove } = useFieldArray({
+  const { append, fields, remove, replace } = useFieldArray({
     name: "fields",
     control,
   });
   const CloseAndReset = () => {
     closeDialog();
-    reset();
+    reset({
+      name: "",
+      fields: FIELDS_FORM_DEFAULT_VALUES,
+    });
+    replace(FIELDS_FORM_DEFAULT_VALUES);
   };
   const { mutate: createContentType } = useCreate(EntityType.CONTENT_TYPE, {
     onError: (error) => {
@@ -92,10 +96,12 @@ export const ContentTypeDialog: FC<ContentTypeDialogProps> = ({
         name: data.name,
         fields: data.fields || [],
       });
+      replace(data.fields || FIELDS_FORM_DEFAULT_VALUES);
     } else {
-      reset();
+      reset({ name: "", fields: FIELDS_FORM_DEFAULT_VALUES });
+      replace(FIELDS_FORM_DEFAULT_VALUES);
     }
-  }, [data, reset]);
+  }, [open, data, reset, replace]);
 
   return (
     <Dialog open={open} fullWidth onClose={CloseAndReset}>

From 9cf9847457824a8fd34fec6688e0e931e3435b0a Mon Sep 17 00:00:00 2001
From: yassinedorbozgithub <yassine.dorboz.2022@gmail.com>
Date: Thu, 6 Feb 2025 00:39:48 +0100
Subject: [PATCH 16/31] refactor(frontend): update language formDialog

---
 .../languages/LanguageFormDialog.tsx          | 35 ++++++-------------
 1 file changed, 11 insertions(+), 24 deletions(-)

diff --git a/frontend/src/components/languages/LanguageFormDialog.tsx b/frontend/src/components/languages/LanguageFormDialog.tsx
index 007544ba..631202ce 100644
--- a/frontend/src/components/languages/LanguageFormDialog.tsx
+++ b/frontend/src/components/languages/LanguageFormDialog.tsx
@@ -6,32 +6,19 @@
  * 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 { FC } from "react";
-
-import { FormDialog } from "@/app-components/dialogs";
-import { useTranslate } from "@/hooks/useTranslate";
+import { GenericFormDialog } from "@/app-components/dialogs";
 import { ComponentFormDialogProps } from "@/types/common/dialogs.types";
 import { ILanguage } from "@/types/language.types";
 
 import { LanguageForm } from "./LanguageForm";
 
-export const LanguageFormDialog: FC<ComponentFormDialogProps<ILanguage>> = ({
-  payload,
-  ...rest
-}) => {
-  const { t } = useTranslate();
-
-  return (
-    <LanguageForm
-      data={payload}
-      onSuccess={() => {
-        rest.onClose(true);
-      }}
-      Wrapper={FormDialog}
-      WrapperProps={{
-        title: payload ? t("title.edit_language") : t("title.new_language"),
-        ...rest,
-      }}
-    />
-  );
-};
+export const LanguageFormDialog = <T extends ILanguage = ILanguage>(
+  props: ComponentFormDialogProps<T>,
+) => (
+  <GenericFormDialog<T>
+    Form={LanguageForm}
+    addText="title.new_language"
+    editText="title.edit_language"
+    {...props}
+  />
+);

From f27034ec5864e4ebb84488f4d9d58f489e2ade3d Mon Sep 17 00:00:00 2001
From: yassinedorbozgithub <yassine.dorboz.2022@gmail.com>
Date: Thu, 6 Feb 2025 00:57:22 +0100
Subject: [PATCH 17/31] refactor(frontend): update nlpEntity formDialog

---
 .../src/components/nlp/NlpEntityDialog.tsx    | 163 ------------------
 .../components/nlp/components/NlpEntity.tsx   |  99 +++++------
 .../nlp/components/NlpEntityForm.tsx          | 141 +++++++++++++++
 .../nlp/components/NlpEntityFormDialog.tsx    |  24 +++
 4 files changed, 211 insertions(+), 216 deletions(-)
 delete mode 100644 frontend/src/components/nlp/NlpEntityDialog.tsx
 create mode 100644 frontend/src/components/nlp/components/NlpEntityForm.tsx
 create mode 100644 frontend/src/components/nlp/components/NlpEntityFormDialog.tsx

diff --git a/frontend/src/components/nlp/NlpEntityDialog.tsx b/frontend/src/components/nlp/NlpEntityDialog.tsx
deleted file mode 100644
index f330588a..00000000
--- a/frontend/src/components/nlp/NlpEntityDialog.tsx
+++ /dev/null
@@ -1,163 +0,0 @@
-/*
- * 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,
-  FormControl,
-  FormControlLabel,
-  FormLabel,
-  Radio,
-  RadioGroup,
-  DialogContent,
-  DialogActions,
-} from "@mui/material";
-import { FC, useEffect } from "react";
-import { useForm } from "react-hook-form";
-
-import DialogButtons from "@/app-components/buttons/DialogButtons";
-import { DialogTitle } from "@/app-components/dialogs/DialogTitle";
-import { ContentContainer } from "@/app-components/dialogs/layouts/ContentContainer";
-import { ContentItem } from "@/app-components/dialogs/layouts/ContentItem";
-import { Input } from "@/app-components/inputs/Input";
-import { useCreate } from "@/hooks/crud/useCreate";
-import { useUpdate } from "@/hooks/crud/useUpdate";
-import { DialogControlProps } from "@/hooks/useDialog";
-import { useToast } from "@/hooks/useToast";
-import { useTranslate } from "@/hooks/useTranslate";
-import { EntityType } from "@/services/types";
-import {
-  INlpEntity,
-  INlpEntityAttributes,
-  NlpLookups,
-} from "@/types/nlp-entity.types";
-
-export type NlpEntityDialogProps = DialogControlProps<INlpEntity>;
-export const NlpEntityDialog: FC<NlpEntityDialogProps> = ({
-  open,
-  closeDialog,
-  data,
-  ...rest
-}) => {
-  const { t } = useTranslate();
-  const { toast } = useToast();
-  const { mutateAsync: createNlpEntity } = useCreate(EntityType.NLP_ENTITY, {
-    onError: () => {
-      toast.error(t("message.internal_server_error"));
-    },
-    onSuccess: () => {
-      closeDialog();
-      toast.success(t("message.success_save"));
-    },
-  });
-  const { mutateAsync: updateNlpEntity } = useUpdate(EntityType.NLP_ENTITY, {
-    onError: () => {
-      toast.error(t("message.internal_server_error"));
-    },
-    onSuccess: () => {
-      closeDialog();
-      toast.success(t("message.success_save"));
-    },
-  });
-  const {
-    reset,
-    register,
-    formState: { errors },
-    handleSubmit,
-  } = useForm<INlpEntityAttributes>({
-    defaultValues: {
-      name: data?.name || "",
-      doc: data?.doc || "",
-      lookups: data?.lookups || ["keywords"],
-    },
-  });
-  const validationRules = {
-    name: {
-      required: t("message.name_is_required"),
-    },
-    lookups: {},
-    isChecked: {},
-  };
-  const onSubmitForm = async (params: INlpEntityAttributes) => {
-    if (data) {
-      updateNlpEntity({ id: data.id, params });
-    } else {
-      createNlpEntity(params);
-    }
-  };
-
-  useEffect(() => {
-    if (open) reset();
-  }, [open, reset]);
-
-  useEffect(() => {
-    if (data) {
-      reset({
-        name: data.name,
-        doc: data.doc,
-      });
-    } else {
-      reset();
-    }
-  }, [data, reset]);
-
-  return (
-    <Dialog open={open} fullWidth onClose={closeDialog} {...rest}>
-      <form onSubmit={handleSubmit(onSubmitForm)}>
-        <DialogTitle onClose={closeDialog}>
-          {data ? t("title.edit_nlp_entity") : t("title.new_nlp_entity")}
-        </DialogTitle>
-        <DialogContent>
-          <ContentContainer>
-            {!data ? (
-              <ContentItem>
-                <FormControl>
-                  <FormLabel>{t("label.lookup_strategies")}</FormLabel>
-                  <RadioGroup
-                    row
-                    {...register("lookups")}
-                    defaultValue="keywords"
-                  >
-                    {Object.values(NlpLookups).map((nlpLookup, index) => (
-                      <FormControlLabel
-                        key={index}
-                        value={nlpLookup}
-                        control={<Radio {...register("lookups.0")} />}
-                        label={nlpLookup}
-                      />
-                    ))}
-                  </RadioGroup>
-                </FormControl>
-              </ContentItem>
-            ) : null}
-            <ContentItem>
-              <Input
-                label={t("label.name")}
-                error={!!errors.name}
-                {...register("name", validationRules.name)}
-                required
-                autoFocus
-                helperText={errors.name ? errors.name.message : null}
-              />
-            </ContentItem>
-
-            <ContentItem>
-              <Input
-                label={t("label.doc")}
-                {...register("doc")}
-                multiline={true}
-              />
-            </ContentItem>
-          </ContentContainer>
-        </DialogContent>
-        <DialogActions>
-          <DialogButtons closeDialog={closeDialog} />
-        </DialogActions>
-      </form>
-    </Dialog>
-  );
-};
diff --git a/frontend/src/components/nlp/components/NlpEntity.tsx b/frontend/src/components/nlp/components/NlpEntity.tsx
index 4ae9c969..71ef8119 100644
--- a/frontend/src/components/nlp/components/NlpEntity.tsx
+++ b/frontend/src/components/nlp/components/NlpEntity.tsx
@@ -1,11 +1,12 @@
 /*
- * Copyright © 2024 Hexastack. All rights reserved.
+ * 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 AddIcon from "@mui/icons-material/Add";
 import DeleteIcon from "@mui/icons-material/Delete";
 import { Button, Chip, Grid } from "@mui/material";
@@ -13,7 +14,7 @@ import { GridColDef, GridRowSelectionModel } from "@mui/x-data-grid";
 import { useRouter } from "next/router";
 import { useState } from "react";
 
-import { DeleteDialog } from "@/app-components/dialogs";
+import { ConfirmDialogBody } from "@/app-components/dialogs";
 import { FilterTextfield } from "@/app-components/inputs/FilterTextfield";
 import {
   ActionColumnLabel,
@@ -24,7 +25,7 @@ import { DataGrid } from "@/app-components/tables/DataGrid";
 import { useDelete } from "@/hooks/crud/useDelete";
 import { useDeleteMany } from "@/hooks/crud/useDeleteMany";
 import { useFind } from "@/hooks/crud/useFind";
-import { getDisplayDialogs, useDialog } from "@/hooks/useDialog";
+import { useDialogs } from "@/hooks/useDialogs";
 import { useHasPermission } from "@/hooks/useHasPermission";
 import { useSearch } from "@/hooks/useSearch";
 import { useToast } from "@/hooks/useToast";
@@ -34,39 +35,32 @@ import { INlpEntity } from "@/types/nlp-entity.types";
 import { PermissionAction } from "@/types/permission.types";
 import { getDateTimeFormatter } from "@/utils/date";
 
-import { NlpEntityDialog } from "../NlpEntityDialog";
+import { NlpEntityFormDialog } from "./NlpEntityFormDialog";
 
 const NlpEntity = () => {
+  const { t } = useTranslate();
+  const { toast } = useToast();
+  const dialogs = useDialogs();
   const router = useRouter();
-  const deleteEntityDialogCtl = useDialog<string>(false);
   const hasPermission = useHasPermission();
-  const editEntityDialogCtl = useDialog<INlpEntity>(false);
-  const { mutateAsync: deleteNlpEntity } = useDelete(EntityType.NLP_ENTITY, {
+  const { mutate: deleteNlpEntity } = useDelete(EntityType.NLP_ENTITY, {
     onError: () => {
       toast.error(t("message.internal_server_error"));
     },
     onSuccess() {
-      deleteEntityDialogCtl.closeDialog();
       toast.success(t("message.item_delete_success"));
     },
   });
-  const { mutateAsync: deleteNlpEntities } = useDeleteMany(
-    EntityType.NLP_ENTITY,
-    {
-      onError: (error) => {
-        toast.error(error);
-      },
-      onSuccess: () => {
-        deleteEntityDialogCtl.closeDialog();
-        setSelectedNlpEntities([]);
-        toast.success(t("message.item_delete_success"));
-      },
+  const { mutate: deleteNlpEntities } = useDeleteMany(EntityType.NLP_ENTITY, {
+    onError: (error) => {
+      toast.error(error);
     },
-  );
+    onSuccess: () => {
+      setSelectedNlpEntities([]);
+      toast.success(t("message.item_delete_success"));
+    },
+  });
   const [selectedNlpEntities, setSelectedNlpEntities] = useState<string[]>([]);
-  const addDialogCtl = useDialog<INlpEntity>(false);
-  const { t } = useTranslate();
-  const { toast } = useToast();
   const { onSearch, searchPayload } = useSearch<INlpEntity>({
     $or: ["name", "doc"],
   });
@@ -100,12 +94,18 @@ const NlpEntity = () => {
       },
       {
         label: ActionColumnLabel.Edit,
-        action: (row) => editEntityDialogCtl.openDialog(row),
+        action: (row) => dialogs.open(NlpEntityFormDialog, row),
         requires: [PermissionAction.UPDATE],
       },
       {
         label: ActionColumnLabel.Delete,
-        action: (row) => deleteEntityDialogCtl.openDialog(row.id),
+        action: async ({ id }) => {
+          const isConfirmed = await dialogs.confirm(ConfirmDialogBody);
+
+          if (isConfirmed) {
+            deleteNlpEntity(id);
+          }
+        },
         requires: [PermissionAction.DELETE],
       },
     ],
@@ -177,21 +177,6 @@ const NlpEntity = () => {
 
   return (
     <Grid item xs={12}>
-      <NlpEntityDialog {...getDisplayDialogs(addDialogCtl)} />
-      <NlpEntityDialog {...editEntityDialogCtl} />
-      <DeleteDialog
-        {...deleteEntityDialogCtl}
-        callback={() => {
-          if (selectedNlpEntities.length > 0) {
-            deleteNlpEntities(selectedNlpEntities);
-            setSelectedNlpEntities([]);
-            deleteEntityDialogCtl.closeDialog();
-          } else if (deleteEntityDialogCtl.data) {
-            deleteNlpEntity(deleteEntityDialogCtl.data);
-          }
-        }}
-      />
-
       <Grid
         justifyContent="flex-end"
         gap={1}
@@ -209,24 +194,32 @@ const NlpEntity = () => {
               startIcon={<AddIcon />}
               variant="contained"
               sx={{ float: "right" }}
-              onClick={() => addDialogCtl.openDialog()}
+              onClick={() => dialogs.open(NlpEntityFormDialog, null)}
             >
               {t("button.add")}
             </Button>
           </Grid>
         ) : null}
-        {selectedNlpEntities.length > 0 && (
-          <Grid item>
-            <Button
-              startIcon={<DeleteIcon />}
-              variant="contained"
-              color="error"
-              onClick={() => deleteEntityDialogCtl.openDialog(undefined)}
-            >
-              {t("button.delete")}
-            </Button>
-          </Grid>
-        )}
+        <Grid item>
+          <Button
+            startIcon={<DeleteIcon />}
+            variant="contained"
+            color="error"
+            onClick={async () => {
+              const isConfirmed = await dialogs.confirm(ConfirmDialogBody, {
+                mode: "selection",
+                count: selectedNlpEntities.length,
+              });
+
+              if (isConfirmed) {
+                deleteNlpEntities(selectedNlpEntities);
+              }
+            }}
+            disabled={!selectedNlpEntities.length}
+          >
+            {t("button.delete")}
+          </Button>
+        </Grid>
       </Grid>
 
       <Grid mt={3}>
diff --git a/frontend/src/components/nlp/components/NlpEntityForm.tsx b/frontend/src/components/nlp/components/NlpEntityForm.tsx
new file mode 100644
index 00000000..ada67efd
--- /dev/null
+++ b/frontend/src/components/nlp/components/NlpEntityForm.tsx
@@ -0,0 +1,141 @@
+/*
+ * 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 {
+  FormControl,
+  FormControlLabel,
+  FormLabel,
+  Radio,
+  RadioGroup,
+} from "@mui/material";
+import { FC, Fragment, useEffect } from "react";
+import { useForm } from "react-hook-form";
+
+import { ContentContainer, ContentItem } from "@/app-components/dialogs/";
+import { Input } from "@/app-components/inputs/Input";
+import { useCreate } from "@/hooks/crud/useCreate";
+import { useUpdate } from "@/hooks/crud/useUpdate";
+import { useToast } from "@/hooks/useToast";
+import { useTranslate } from "@/hooks/useTranslate";
+import { EntityType } from "@/services/types";
+import { ComponentFormProps } from "@/types/common/dialogs.types";
+import {
+  INlpEntity,
+  INlpEntityAttributes,
+  NlpLookups,
+} from "@/types/nlp-entity.types";
+
+export const NlpEntityVarForm: FC<ComponentFormProps<INlpEntity>> = ({
+  data,
+  Wrapper = Fragment,
+  WrapperProps,
+  ...rest
+}) => {
+  const { t } = useTranslate();
+  const { toast } = useToast();
+  const options = {
+    onError: (error: Error) => {
+      rest.onError?.();
+      toast.error(error.message || t("message.internal_server_error"));
+    },
+    onSuccess: () => {
+      rest.onSuccess?.();
+      toast.success(t("message.success_save"));
+    },
+  };
+  const { mutate: createNlpEntity } = useCreate(EntityType.NLP_ENTITY, options);
+  const { mutate: updateNlpEntity } = useUpdate(EntityType.NLP_ENTITY, options);
+  const {
+    reset,
+    register,
+    formState: { errors },
+    handleSubmit,
+  } = useForm<INlpEntityAttributes>({
+    defaultValues: {
+      name: data?.name || "",
+      doc: data?.doc || "",
+      lookups: data?.lookups || ["keywords"],
+    },
+  });
+  const validationRules = {
+    name: {
+      required: t("message.name_is_required"),
+    },
+    lookups: {},
+    isChecked: {},
+  };
+  const onSubmitForm = (params: INlpEntityAttributes) => {
+    if (data) {
+      updateNlpEntity({ id: data.id, params });
+    } else {
+      createNlpEntity(params);
+    }
+  };
+
+  useEffect(() => {
+    if (data) {
+      reset({
+        name: data.name,
+        doc: data.doc,
+      });
+    } else {
+      reset();
+    }
+  }, [data, reset]);
+
+  return (
+    <Wrapper
+      open={!!WrapperProps?.open}
+      onSubmit={handleSubmit(onSubmitForm)}
+      {...WrapperProps}
+    >
+      <form onSubmit={handleSubmit(onSubmitForm)}>
+        <ContentContainer>
+          {!data ? (
+            <ContentItem>
+              <FormControl>
+                <FormLabel>{t("label.lookup_strategies")}</FormLabel>
+                <RadioGroup
+                  row
+                  {...register("lookups")}
+                  defaultValue="keywords"
+                >
+                  {Object.values(NlpLookups).map((nlpLookup, index) => (
+                    <FormControlLabel
+                      key={index}
+                      value={nlpLookup}
+                      control={<Radio {...register("lookups.0")} />}
+                      label={nlpLookup}
+                    />
+                  ))}
+                </RadioGroup>
+              </FormControl>
+            </ContentItem>
+          ) : null}
+          <ContentItem>
+            <Input
+              label={t("label.name")}
+              error={!!errors.name}
+              {...register("name", validationRules.name)}
+              required
+              autoFocus
+              helperText={errors.name ? errors.name.message : null}
+            />
+          </ContentItem>
+          <ContentItem>
+            <Input
+              label={t("label.doc")}
+              {...register("doc")}
+              multiline={true}
+            />
+          </ContentItem>
+        </ContentContainer>
+      </form>
+    </Wrapper>
+  );
+};
diff --git a/frontend/src/components/nlp/components/NlpEntityFormDialog.tsx b/frontend/src/components/nlp/components/NlpEntityFormDialog.tsx
new file mode 100644
index 00000000..79d53b1d
--- /dev/null
+++ b/frontend/src/components/nlp/components/NlpEntityFormDialog.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 { INlpEntity } from "@/types/nlp-entity.types";
+
+import { NlpEntityVarForm } from "./NlpEntityForm";
+
+export const NlpEntityFormDialog = <T extends INlpEntity = INlpEntity>(
+  props: ComponentFormDialogProps<T>,
+) => (
+  <GenericFormDialog<T>
+    Form={NlpEntityVarForm}
+    addText="title.new_context_var"
+    editText="title.edit_context_var"
+    {...props}
+  />
+);

From fe51f819ac38120f7bce59fd9aa36eed82afcc2b Mon Sep 17 00:00:00 2001
From: yassinedorbozgithub <yassine.dorboz.2022@gmail.com>
Date: Thu, 6 Feb 2025 05:41:51 +0100
Subject: [PATCH 18/31] refactor(frontend): update nlpValue formDialog

---
 .../src/components/nlp/NlpValueDialog.tsx     | 145 ------------------
 .../{NlpValues.tsx => NlpValue.tsx}           | 103 ++++++-------
 .../nlp/components/NlpValueForm.tsx           | 120 +++++++++++++++
 .../nlp/components/NlpValueFormDialog.tsx     |  29 ++++
 frontend/src/components/nlp/index.tsx         |   5 +-
 5 files changed, 198 insertions(+), 204 deletions(-)
 delete mode 100644 frontend/src/components/nlp/NlpValueDialog.tsx
 rename frontend/src/components/nlp/components/{NlpValues.tsx => NlpValue.tsx} (76%)
 create mode 100644 frontend/src/components/nlp/components/NlpValueForm.tsx
 create mode 100644 frontend/src/components/nlp/components/NlpValueFormDialog.tsx

diff --git a/frontend/src/components/nlp/NlpValueDialog.tsx b/frontend/src/components/nlp/NlpValueDialog.tsx
deleted file mode 100644
index 1b5e51c2..00000000
--- a/frontend/src/components/nlp/NlpValueDialog.tsx
+++ /dev/null
@@ -1,145 +0,0 @@
-/*
- * 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 { useRouter } from "next/router";
-import { FC, useEffect } from "react";
-import { Controller, useForm } from "react-hook-form";
-
-import DialogButtons from "@/app-components/buttons/DialogButtons";
-import { DialogTitle } from "@/app-components/dialogs/DialogTitle";
-import { ContentContainer } from "@/app-components/dialogs/layouts/ContentContainer";
-import { ContentItem } from "@/app-components/dialogs/layouts/ContentItem";
-import { Input } from "@/app-components/inputs/Input";
-import MultipleInput from "@/app-components/inputs/MultipleInput";
-import { useCreate } from "@/hooks/crud/useCreate";
-import { useGet } from "@/hooks/crud/useGet";
-import { useUpdate } from "@/hooks/crud/useUpdate";
-import { DialogControlProps } from "@/hooks/useDialog";
-import { useToast } from "@/hooks/useToast";
-import { useTranslate } from "@/hooks/useTranslate";
-import { EntityType, Format } from "@/services/types";
-import { INlpValue, INlpValueAttributes } from "@/types/nlp-value.types";
-
-export type TNlpValueAttributesWithRequiredExpressions = INlpValueAttributes & {
-  expressions: string[];
-};
-
-export type NlpValueDialogProps = DialogControlProps<INlpValue, INlpValue> & {
-  canHaveSynonyms: boolean;
-};
-
-export const NlpValueDialog: FC<NlpValueDialogProps> = ({
-  open,
-  closeDialog,
-  data,
-  canHaveSynonyms,
-  callback,
-}) => {
-  const { t } = useTranslate();
-  const { toast } = useToast();
-  const { query } = useRouter();
-  const { refetch: refetchEntity } = useGet(data?.entity || String(query.id), {
-    entity: EntityType.NLP_ENTITY,
-    format: Format.FULL,
-  });
-  const { mutateAsync: createNlpValue } = useCreate(EntityType.NLP_VALUE, {
-    onError: () => {
-      toast.error(t("message.internal_server_error"));
-    },
-    onSuccess(data) {
-      refetchEntity();
-      closeDialog();
-      toast.success(t("message.success_save"));
-      callback?.(data);
-    },
-  });
-  const { mutateAsync: updateNlpValue } = useUpdate(EntityType.NLP_VALUE, {
-    onError: () => {
-      toast.error(t("message.internal_server_error"));
-    },
-    onSuccess(data) {
-      closeDialog();
-      toast.success(t("message.success_save"));
-      callback?.(data);
-    },
-  });
-  const { reset, register, handleSubmit, control } =
-    useForm<TNlpValueAttributesWithRequiredExpressions>({
-      defaultValues: {
-        value: data?.value || "",
-        expressions: data?.expressions || [],
-      },
-    });
-  const validationRules = {
-    value: {
-      required: t("message.value_is_required"),
-    },
-    name: {},
-    description: {},
-  };
-  const onSubmitForm = async (params: INlpValueAttributes) => {
-    if (data) {
-      updateNlpValue({ id: data.id, params });
-    } else {
-      createNlpValue({ ...params, entity: String(query.id) });
-    }
-  };
-
-  useEffect(() => {
-    if (open) reset();
-  }, [open, reset]);
-
-  useEffect(() => {
-    if (data) {
-      reset({
-        value: data.value,
-        expressions: data.expressions,
-      });
-    } else {
-      reset();
-    }
-  }, [data, reset]);
-
-  return (
-    <Dialog open={open} fullWidth onClose={closeDialog}>
-      <form onSubmit={handleSubmit(onSubmitForm)}>
-        <DialogTitle onClose={closeDialog}>
-          {data ? t("title.edit_nlp_value") : t("title.new_nlp_entity_value")}
-        </DialogTitle>
-        <DialogContent>
-          <ContentContainer>
-            <ContentItem>
-              <Input
-                label={t("placeholder.nlp_value")}
-                required
-                autoFocus
-                {...register("value", validationRules.value)}
-              />
-            </ContentItem>
-
-            {canHaveSynonyms ? (
-              <ContentItem>
-                <Controller
-                  name="expressions"
-                  control={control}
-                  render={({ field }) => (
-                    <MultipleInput label="synonyms" {...field} />
-                  )}
-                />
-              </ContentItem>
-            ) : null}
-          </ContentContainer>
-        </DialogContent>
-        <DialogActions>
-          <DialogButtons closeDialog={closeDialog} />
-        </DialogActions>
-      </form>
-    </Dialog>
-  );
-};
diff --git a/frontend/src/components/nlp/components/NlpValues.tsx b/frontend/src/components/nlp/components/NlpValue.tsx
similarity index 76%
rename from frontend/src/components/nlp/components/NlpValues.tsx
rename to frontend/src/components/nlp/components/NlpValue.tsx
index 74729578..ccdcfcf4 100644
--- a/frontend/src/components/nlp/components/NlpValues.tsx
+++ b/frontend/src/components/nlp/components/NlpValue.tsx
@@ -1,11 +1,12 @@
 /*
- * Copyright © 2024 Hexastack. All rights reserved.
+ * 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 { faGraduationCap } from "@fortawesome/free-solid-svg-icons";
 import AddIcon from "@mui/icons-material/Add";
 import ArrowBackIcon from "@mui/icons-material/ArrowBack";
@@ -15,7 +16,7 @@ import { GridColDef, GridRowSelectionModel } from "@mui/x-data-grid";
 import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
 
-import { DeleteDialog } from "@/app-components/dialogs";
+import { ConfirmDialogBody } from "@/app-components/dialogs";
 import { FilterTextfield } from "@/app-components/inputs/FilterTextfield";
 import {
   ActionColumnLabel,
@@ -27,7 +28,7 @@ import { useDelete } from "@/hooks/crud/useDelete";
 import { useDeleteMany } from "@/hooks/crud/useDeleteMany";
 import { useFind } from "@/hooks/crud/useFind";
 import { useGet } from "@/hooks/crud/useGet";
-import { useDialog } from "@/hooks/useDialog";
+import { useDialogs } from "@/hooks/useDialogs";
 import { useHasPermission } from "@/hooks/useHasPermission";
 import { useSearch } from "@/hooks/useSearch";
 import { useToast } from "@/hooks/useToast";
@@ -39,21 +40,20 @@ import { INlpValue } from "@/types/nlp-value.types";
 import { PermissionAction } from "@/types/permission.types";
 import { getDateTimeFormatter } from "@/utils/date";
 
-import { NlpValueDialog } from "../NlpValueDialog";
+import { NlpValueFormDialog } from "./NlpValueFormDialog";
 
 export const NlpValues = ({ entityId }: { entityId: string }) => {
-  const [direction, setDirection] = useState<"up" | "down">("up");
-  const deleteEntityDialogCtl = useDialog<string>(false);
-  const editValueDialogCtl = useDialog<INlpValue>(false);
-  const addNlpValueDialogCtl = useDialog<INlpValue>(false);
-  const hasPermission = useHasPermission();
-  const router = useRouter();
   const { t } = useTranslate();
   const { toast } = useToast();
+  const dialogs = useDialogs();
+  const router = useRouter();
+  const [direction, setDirection] = useState<"up" | "down">("up");
+  const hasPermission = useHasPermission();
   const { data: nlpEntity, refetch: refetchEntity } = useGet(entityId, {
     entity: EntityType.NLP_ENTITY,
     format: Format.FULL,
   });
+  const canHaveSynonyms = nlpEntity?.lookups?.[0] === NlpLookups.keywords;
   const { onSearch, searchPayload } = useSearch<INlpValue>({
     $eq: [{ entity: entityId }],
     $iLike: ["value"],
@@ -64,37 +64,41 @@ export const NlpValues = ({ entityId }: { entityId: string }) => {
       params: searchPayload,
     },
   );
-  const { mutateAsync: deleteNlpValue } = useDelete(EntityType.NLP_VALUE, {
-    onError: () => {
-      toast.error(t("message.internal_server_error"));
+  const options = {
+    onError: (error: Error) => {
+      toast.error(error.message || t("message.internal_server_error"));
     },
     onSuccess() {
-      deleteEntityDialogCtl.closeDialog();
-      toast.success(t("message.item_delete_success"));
-      refetchEntity();
-    },
-  });
-  const { mutateAsync: deleteNlpValues } = useDeleteMany(EntityType.NLP_VALUE, {
-    onError: (error) => {
-      toast.error(error);
-    },
-    onSuccess: () => {
-      deleteEntityDialogCtl.closeDialog();
-      setSelectedNlpValues([]);
       toast.success(t("message.item_delete_success"));
     },
-  });
+  };
+  const { mutateAsync: deleteNlpValue } = useDelete(
+    EntityType.NLP_VALUE,
+    options,
+  );
+  const { mutate: deleteNlpValues } = useDeleteMany(
+    EntityType.NLP_VALUE,
+    options,
+  );
   const [selectedNlpValues, setSelectedNlpValues] = useState<string[]>([]);
   const actionColumns = useActionColumns<INlpValue>(
     EntityType.NLP_VALUE,
     [
       {
         label: ActionColumnLabel.Edit,
-        action: (row) => editValueDialogCtl.openDialog(row),
+        action: (row) =>
+          dialogs.open(NlpValueFormDialog, { data: row, canHaveSynonyms }),
       },
       {
         label: ActionColumnLabel.Delete,
-        action: (row) => deleteEntityDialogCtl.openDialog(row.id),
+        action: async ({ id }) => {
+          const isConfirmed = await dialogs.confirm(ConfirmDialogBody);
+
+          if (isConfirmed) {
+            await deleteNlpValue(id);
+            refetchEntity();
+          }
+        },
       },
     ],
     t("label.operations"),
@@ -150,7 +154,6 @@ export const NlpValues = ({ entityId }: { entityId: string }) => {
     return setDirection("down");
   }, []);
 
-  const canHaveSynonyms = nlpEntity?.lookups?.[0] === NlpLookups.keywords;
   const handleSelectionChange = (selection: GridRowSelectionModel) => {
     setSelectedNlpValues(selection as string[]);
   };
@@ -198,8 +201,8 @@ export const NlpValues = ({ entityId }: { entityId: string }) => {
                     <Button
                       startIcon={<AddIcon />}
                       variant="contained"
-                      onClick={() => addNlpValueDialogCtl.openDialog()}
                       sx={{ float: "right" }}
+                      onClick={() => dialogs.open(NlpValueFormDialog, null)}
                     >
                       {t("button.add")}
                     </Button>
@@ -210,9 +213,19 @@ export const NlpValues = ({ entityId }: { entityId: string }) => {
                         startIcon={<DeleteIcon />}
                         variant="contained"
                         color="error"
-                        onClick={() =>
-                          deleteEntityDialogCtl.openDialog(undefined)
-                        }
+                        onClick={async () => {
+                          const isConfirmed = await dialogs.confirm(
+                            ConfirmDialogBody,
+                            {
+                              mode: "selection",
+                              count: selectedNlpValues.length,
+                            },
+                          );
+
+                          if (isConfirmed) {
+                            deleteNlpValues(selectedNlpValues);
+                          }
+                        }}
                       >
                         {t("button.delete")}
                       </Button>
@@ -221,30 +234,6 @@ export const NlpValues = ({ entityId }: { entityId: string }) => {
                 </ButtonGroup>
               </Grid>
             </PageHeader>
-            <NlpValueDialog
-              {...addNlpValueDialogCtl}
-              canHaveSynonyms={canHaveSynonyms}
-              callback={() => {
-                refetchEntity();
-              }}
-            />
-            <DeleteDialog
-              {...deleteEntityDialogCtl}
-              callback={() => {
-                if (selectedNlpValues.length > 0) {
-                  deleteNlpValues(selectedNlpValues);
-                  setSelectedNlpValues([]);
-                  deleteEntityDialogCtl.closeDialog();
-                } else if (deleteEntityDialogCtl.data) {
-                  deleteNlpValue(deleteEntityDialogCtl.data);
-                }
-              }}
-            />
-            <NlpValueDialog
-              {...editValueDialogCtl}
-              canHaveSynonyms={canHaveSynonyms}
-              callback={() => {}}
-            />
             <Grid padding={1} marginTop={2} container>
               <DataGrid
                 columns={columns}
diff --git a/frontend/src/components/nlp/components/NlpValueForm.tsx b/frontend/src/components/nlp/components/NlpValueForm.tsx
new file mode 100644
index 00000000..eb16bc96
--- /dev/null
+++ b/frontend/src/components/nlp/components/NlpValueForm.tsx
@@ -0,0 +1,120 @@
+/*
+ * 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 { useRouter } from "next/router";
+import { FC, Fragment, useEffect } from "react";
+import { Controller, useForm } from "react-hook-form";
+
+import { ContentContainer, ContentItem } from "@/app-components/dialogs/";
+import { Input } from "@/app-components/inputs/Input";
+import MultipleInput from "@/app-components/inputs/MultipleInput";
+import { useCreate } from "@/hooks/crud/useCreate";
+import { useGet } from "@/hooks/crud/useGet";
+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 { INlpValue, INlpValueAttributes } from "@/types/nlp-value.types";
+
+export const NlpValueForm: FC<
+  ComponentFormProps<{ data: INlpValue; canHaveSynonyms: boolean }>
+> = ({ data: props, Wrapper = Fragment, WrapperProps, ...rest }) => {
+  const { data, canHaveSynonyms } = props || {};
+  const { t } = useTranslate();
+  const { toast } = useToast();
+  const { query } = useRouter();
+  const { refetch: refetchEntity } = useGet(data?.entity || String(query.id), {
+    entity: EntityType.NLP_ENTITY,
+    format: Format.FULL,
+  });
+  const options = {
+    onError: () => {
+      rest.onError?.();
+      toast.error(t("message.internal_server_error"));
+    },
+    onSuccess() {
+      rest.onSuccess?.();
+      toast.success(t("message.success_save"));
+    },
+  };
+  const { mutateAsync: createNlpValue } = useCreate(
+    EntityType.NLP_VALUE,
+    options,
+  );
+  const { mutate: updateNlpValue } = useUpdate(EntityType.NLP_VALUE, options);
+  const { reset, register, handleSubmit, control } = useForm<
+    INlpValueAttributes & {
+      expressions: string[];
+    }
+  >({
+    defaultValues: {
+      value: data?.value || "",
+      expressions: data?.expressions || [],
+    },
+  });
+  const validationRules = {
+    value: {
+      required: t("message.value_is_required"),
+    },
+    name: {},
+    description: {},
+  };
+  const onSubmitForm = async (params: INlpValueAttributes) => {
+    if (data) {
+      updateNlpValue({ id: data.id, params });
+    } else {
+      await createNlpValue({ ...params, entity: String(query.id) });
+      refetchEntity();
+    }
+  };
+
+  useEffect(() => {
+    if (data) {
+      reset({
+        value: data.value,
+        expressions: data.expressions,
+      });
+    } else {
+      reset();
+    }
+  }, [data, reset]);
+
+  return (
+    <Wrapper
+      open={!!WrapperProps?.open}
+      onSubmit={handleSubmit(onSubmitForm)}
+      {...WrapperProps}
+    >
+      <form onSubmit={handleSubmit(onSubmitForm)}>
+        <ContentContainer>
+          <ContentItem>
+            <Input
+              label={t("placeholder.nlp_value")}
+              required
+              autoFocus
+              {...register("value", validationRules.value)}
+            />
+          </ContentItem>
+
+          {canHaveSynonyms ? (
+            <ContentItem>
+              <Controller
+                name="expressions"
+                control={control}
+                render={({ field }) => (
+                  <MultipleInput label="synonyms" {...field} />
+                )}
+              />
+            </ContentItem>
+          ) : null}
+        </ContentContainer>
+      </form>
+    </Wrapper>
+  );
+};
diff --git a/frontend/src/components/nlp/components/NlpValueFormDialog.tsx b/frontend/src/components/nlp/components/NlpValueFormDialog.tsx
new file mode 100644
index 00000000..a8ef383a
--- /dev/null
+++ b/frontend/src/components/nlp/components/NlpValueFormDialog.tsx
@@ -0,0 +1,29 @@
+/*
+ * 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 { INlpValue } from "@/types/nlp-value.types";
+
+import { NlpValueForm } from "./NlpValueForm";
+
+export const NlpValueFormDialog = <
+  T extends { data: INlpValue; canHaveSynonyms: boolean } = {
+    data: INlpValue;
+    canHaveSynonyms: boolean;
+  },
+>(
+  props: ComponentFormDialogProps<T>,
+) => (
+  <GenericFormDialog<T>
+    Form={NlpValueForm}
+    addText="title.new_nlp_entity_value"
+    editText="title.edit_nlp_value"
+    {...props}
+  />
+);
diff --git a/frontend/src/components/nlp/index.tsx b/frontend/src/components/nlp/index.tsx
index 96f0f08e..b8e7a755 100644
--- a/frontend/src/components/nlp/index.tsx
+++ b/frontend/src/components/nlp/index.tsx
@@ -1,11 +1,12 @@
 /*
- * Copyright © 2024 Hexastack. All rights reserved.
+ * 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 { faGraduationCap } from "@fortawesome/free-solid-svg-icons";
 import { Grid, Paper, Tab, Tabs } from "@mui/material";
 import dynamic from "next/dynamic";
@@ -29,7 +30,7 @@ import {
 import NlpDatasetCounter from "./components/NlpDatasetCounter";
 import NlpSample from "./components/NlpSample";
 import NlpDatasetSample from "./components/NlpTrainForm";
-import { NlpValues } from "./components/NlpValues";
+import { NlpValues } from "./components/NlpValue";
 
 const NlpEntity = dynamic(() => import("./components/NlpEntity"));
 

From d563530ccfb8004e18d4bf8a8937ad3e82f9b1a6 Mon Sep 17 00:00:00 2001
From: hexastack <talebhassan.ikbel@gmail.com>
Date: Thu, 6 Feb 2025 10:36:09 +0100
Subject: [PATCH 19/31] fix: duplicate and empty fields value and typo

---
 frontend/public/locales/en/translation.json   |  3 ++-
 frontend/public/locales/fr/translation.json   |  3 ++-
 .../content-types/ContentTypeDialog.tsx       | 25 ++++++++++++++++---
 .../content-types/components/FieldInput.tsx   |  8 ++++--
 4 files changed, 32 insertions(+), 7 deletions(-)

diff --git a/frontend/public/locales/en/translation.json b/frontend/public/locales/en/translation.json
index 7474b471..5a762558 100644
--- a/frontend/public/locales/en/translation.json
+++ b/frontend/public/locales/en/translation.json
@@ -112,7 +112,8 @@
     "text_is_required": "Text is required",
     "invalid_file_type": "Invalid file type. Please select a file in the supported format.",
     "select_category": "Select a flow",
-    "logout_failed": "Something went wrong during logout"
+    "logout_failed": "Something went wrong during logout",
+    "duplicate_labels_not_allowed": "Duplicate labels are not allowed"
   },
   "menu": {
     "terms": "Terms of Use",
diff --git a/frontend/public/locales/fr/translation.json b/frontend/public/locales/fr/translation.json
index 2bb48ec8..aadde707 100644
--- a/frontend/public/locales/fr/translation.json
+++ b/frontend/public/locales/fr/translation.json
@@ -112,7 +112,8 @@
     "text_is_required": "Texte requis",
     "invalid_file_type": "Type de fichier invalide. Veuillez choisir un fichier dans un format pris en charge.",
     "select_category": "Sélectionner une catégorie",
-    "logout_failed": "Une erreur s'est produite lors de la déconnexion"
+    "logout_failed": "Une erreur s'est produite lors de la déconnexion",
+    "duplicate_labels_not_allowed": "Les étiquettes en double ne sont pas autorisées"
   },
   "menu": {
     "terms": "Conditions d'utilisation",
diff --git a/frontend/src/components/content-types/ContentTypeDialog.tsx b/frontend/src/components/content-types/ContentTypeDialog.tsx
index 91547560..9dada742 100644
--- a/frontend/src/components/content-types/ContentTypeDialog.tsx
+++ b/frontend/src/components/content-types/ContentTypeDialog.tsx
@@ -52,7 +52,7 @@ export const ContentTypeDialog: FC<ContentTypeDialogProps> = ({
     name: "fields",
     control,
   });
-  const CloseAndReset = () => {
+  const closeAndReset = () => {
     closeDialog();
     reset({
       name: "",
@@ -79,6 +79,25 @@ export const ContentTypeDialog: FC<ContentTypeDialogProps> = ({
     },
   });
   const onSubmitForm = async (params) => {
+    const labelCounts: Record<string, number> = params.fields.reduce(
+      (acc, field) => {
+        if (!field.label.trim()) return acc;
+        acc[field.label] = (acc[field.label] || 0) + 1;
+
+        return acc;
+      },
+      {} as Record<string, number>,
+    );
+    const hasDuplicates = Object.values(labelCounts).some(
+      (count: number) => count > 1,
+    );
+
+    if (hasDuplicates) {
+      toast.error(t("message.duplicate_labels_not_allowed"));
+
+      return;
+    }
+
     if (data) {
       updateContentType({ id: data.id, params });
     } else {
@@ -104,9 +123,9 @@ export const ContentTypeDialog: FC<ContentTypeDialogProps> = ({
   }, [open, data, reset, replace]);
 
   return (
-    <Dialog open={open} fullWidth onClose={CloseAndReset}>
+    <Dialog open={open} fullWidth onClose={closeAndReset}>
       <form onSubmit={handleSubmit(onSubmitForm)}>
-        <DialogTitle onClose={CloseAndReset}>
+        <DialogTitle onClose={closeAndReset}>
           {data ? t("title.edit_content_type") : t("title.new_content_type")}
         </DialogTitle>
         <DialogContent>
diff --git a/frontend/src/components/content-types/components/FieldInput.tsx b/frontend/src/components/content-types/components/FieldInput.tsx
index 5d5d5b3c..74455ac4 100644
--- a/frontend/src/components/content-types/components/FieldInput.tsx
+++ b/frontend/src/components/content-types/components/FieldInput.tsx
@@ -1,11 +1,12 @@
 /*
- * Copyright © 2024 Hexastack. All rights reserved.
+ * 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 DeleteOutlineIcon from "@mui/icons-material/DeleteOutline";
 import { MenuItem } from "@mui/material";
 import { useEffect } from "react";
@@ -59,11 +60,14 @@ export const FieldInput = ({
       <Controller
         control={props.control}
         name={`fields.${index}.label`}
-        render={({ field }) => (
+        rules={{ required: t("message.label_is_required") }}
+        render={({ field, fieldState }) => (
           <Input
             disabled={props.disabled}
             {...field}
             label={t("label.label")}
+            error={!!fieldState.error}
+            helperText={fieldState.error?.message}
           />
         )}
       />

From 89d8fae6132e2c822ad7c94bce51af86ddc2c663 Mon Sep 17 00:00:00 2001
From: hexastack <talebhassan.ikbel@gmail.com>
Date: Thu, 6 Feb 2025 11:50:31 +0100
Subject: [PATCH 20/31] fix: reset onclose

---
 .../src/components/content-types/ContentTypeDialog.tsx    | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/content-types/ContentTypeDialog.tsx b/frontend/src/components/content-types/ContentTypeDialog.tsx
index 9dada742..5d362829 100644
--- a/frontend/src/components/content-types/ContentTypeDialog.tsx
+++ b/frontend/src/components/content-types/ContentTypeDialog.tsx
@@ -110,12 +110,14 @@ export const ContentTypeDialog: FC<ContentTypeDialogProps> = ({
   }, [open, reset]);
 
   useEffect(() => {
+    if (!open) return;
+
     if (data) {
       reset({
         name: data.name,
-        fields: data.fields || [],
+        fields: data.fields?.length ? data.fields : FIELDS_FORM_DEFAULT_VALUES,
       });
-      replace(data.fields || FIELDS_FORM_DEFAULT_VALUES);
+      replace(data.fields?.length ? data.fields : FIELDS_FORM_DEFAULT_VALUES);
     } else {
       reset({ name: "", fields: FIELDS_FORM_DEFAULT_VALUES });
       replace(FIELDS_FORM_DEFAULT_VALUES);
@@ -173,7 +175,7 @@ export const ContentTypeDialog: FC<ContentTypeDialogProps> = ({
           </ContentContainer>
         </DialogContent>
         <DialogActions>
-          <DialogButtons closeDialog={closeDialog} />
+          <DialogButtons closeDialog={closeAndReset} />
         </DialogActions>
       </form>
     </Dialog>

From fe2405325f523fdd95015a1dbd8ea364d10a89dc Mon Sep 17 00:00:00 2001
From: yassinedorbozgithub <yassine.dorboz.2022@gmail.com>
Date: Thu, 6 Feb 2025 16:25:08 +0100
Subject: [PATCH 21/31] fix(frontend): replace translations

---
 .../src/components/nlp/components/NlpEntityFormDialog.tsx     | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/nlp/components/NlpEntityFormDialog.tsx b/frontend/src/components/nlp/components/NlpEntityFormDialog.tsx
index 79d53b1d..edf37b5c 100644
--- a/frontend/src/components/nlp/components/NlpEntityFormDialog.tsx
+++ b/frontend/src/components/nlp/components/NlpEntityFormDialog.tsx
@@ -17,8 +17,8 @@ export const NlpEntityFormDialog = <T extends INlpEntity = INlpEntity>(
 ) => (
   <GenericFormDialog<T>
     Form={NlpEntityVarForm}
-    addText="title.new_context_var"
-    editText="title.edit_context_var"
+    addText="title.new_nlp_entity"
+    editText="title.edit_nlp_entity"
     {...props}
   />
 );

From cd31b873fde568bf97c523d32f29af6fe2702f9b Mon Sep 17 00:00:00 2001
From: yassinedorbozgithub <yassine.dorboz.2022@gmail.com>
Date: Thu, 6 Feb 2025 17:06:10 +0100
Subject: [PATCH 22/31] fix(frontend): refactor NLP value logic to use
 synchronous methods

---
 .../components/nlp/components/NlpValue.tsx    | 25 +++++++++----------
 .../nlp/components/NlpValueForm.tsx           | 23 ++++++++++-------
 2 files changed, 26 insertions(+), 22 deletions(-)

diff --git a/frontend/src/components/nlp/components/NlpValue.tsx b/frontend/src/components/nlp/components/NlpValue.tsx
index ccdcfcf4..57dd0462 100644
--- a/frontend/src/components/nlp/components/NlpValue.tsx
+++ b/frontend/src/components/nlp/components/NlpValue.tsx
@@ -6,7 +6,6 @@
  * 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 { faGraduationCap } from "@fortawesome/free-solid-svg-icons";
 import AddIcon from "@mui/icons-material/Add";
 import ArrowBackIcon from "@mui/icons-material/ArrowBack";
@@ -64,22 +63,23 @@ export const NlpValues = ({ entityId }: { entityId: string }) => {
       params: searchPayload,
     },
   );
-  const options = {
+  const { mutate: deleteNlpValue } = useDelete(EntityType.NLP_VALUE, {
+    onError: (error: Error) => {
+      toast.error(error.message || t("message.internal_server_error"));
+    },
+    onSuccess() {
+      refetchEntity();
+      toast.success(t("message.item_delete_success"));
+    },
+  });
+  const { mutate: deleteNlpValues } = useDeleteMany(EntityType.NLP_VALUE, {
     onError: (error: Error) => {
       toast.error(error.message || t("message.internal_server_error"));
     },
     onSuccess() {
       toast.success(t("message.item_delete_success"));
     },
-  };
-  const { mutateAsync: deleteNlpValue } = useDelete(
-    EntityType.NLP_VALUE,
-    options,
-  );
-  const { mutate: deleteNlpValues } = useDeleteMany(
-    EntityType.NLP_VALUE,
-    options,
-  );
+  });
   const [selectedNlpValues, setSelectedNlpValues] = useState<string[]>([]);
   const actionColumns = useActionColumns<INlpValue>(
     EntityType.NLP_VALUE,
@@ -95,8 +95,7 @@ export const NlpValues = ({ entityId }: { entityId: string }) => {
           const isConfirmed = await dialogs.confirm(ConfirmDialogBody);
 
           if (isConfirmed) {
-            await deleteNlpValue(id);
-            refetchEntity();
+            deleteNlpValue(id);
           }
         },
       },
diff --git a/frontend/src/components/nlp/components/NlpValueForm.tsx b/frontend/src/components/nlp/components/NlpValueForm.tsx
index eb16bc96..68bcbe98 100644
--- a/frontend/src/components/nlp/components/NlpValueForm.tsx
+++ b/frontend/src/components/nlp/components/NlpValueForm.tsx
@@ -33,7 +33,18 @@ export const NlpValueForm: FC<
     entity: EntityType.NLP_ENTITY,
     format: Format.FULL,
   });
-  const options = {
+  const { mutate: createNlpValue } = useCreate(EntityType.NLP_VALUE, {
+    onError: () => {
+      rest.onError?.();
+      toast.error(t("message.internal_server_error"));
+    },
+    onSuccess() {
+      rest.onSuccess?.();
+      refetchEntity();
+      toast.success(t("message.success_save"));
+    },
+  });
+  const { mutate: updateNlpValue } = useUpdate(EntityType.NLP_VALUE, {
     onError: () => {
       rest.onError?.();
       toast.error(t("message.internal_server_error"));
@@ -42,12 +53,7 @@ export const NlpValueForm: FC<
       rest.onSuccess?.();
       toast.success(t("message.success_save"));
     },
-  };
-  const { mutateAsync: createNlpValue } = useCreate(
-    EntityType.NLP_VALUE,
-    options,
-  );
-  const { mutate: updateNlpValue } = useUpdate(EntityType.NLP_VALUE, options);
+  });
   const { reset, register, handleSubmit, control } = useForm<
     INlpValueAttributes & {
       expressions: string[];
@@ -69,8 +75,7 @@ export const NlpValueForm: FC<
     if (data) {
       updateNlpValue({ id: data.id, params });
     } else {
-      await createNlpValue({ ...params, entity: String(query.id) });
-      refetchEntity();
+      createNlpValue({ ...params, entity: String(query.id) });
     }
   };
 

From af3d48e638d77901c10319a3a538fd5316619f66 Mon Sep 17 00:00:00 2001
From: yassinedorbozgithub <yassine.dorboz.2022@gmail.com>
Date: Fri, 7 Feb 2025 04:10:22 +0100
Subject: [PATCH 23/31] fix(frontend): add missing translations

---
 frontend/public/locales/en/translation.json | 1 +
 frontend/public/locales/fr/translation.json | 1 +
 2 files changed, 2 insertions(+)

diff --git a/frontend/public/locales/en/translation.json b/frontend/public/locales/en/translation.json
index 0de85850..eb7170da 100644
--- a/frontend/public/locales/en/translation.json
+++ b/frontend/public/locales/en/translation.json
@@ -210,6 +210,7 @@
     "new_label": "New Label",
     "edit_label": "Edit Label",
     "subscribers": "Subscribers",
+    "manage_subscribers": "Manage Subscribers",
     "manage_labels": "Manage Labels",
     "users": "Users",
     "manage_roles": "Manage Roles",
diff --git a/frontend/public/locales/fr/translation.json b/frontend/public/locales/fr/translation.json
index 68cbc21d..4ae0303a 100644
--- a/frontend/public/locales/fr/translation.json
+++ b/frontend/public/locales/fr/translation.json
@@ -210,6 +210,7 @@
     "new_label": "Nouvelle étiquette",
     "edit_label": "Modifier l'étiquette",
     "subscribers": "Abonnés",
+    "manage_subscribers": "Gérer les abonnés",
     "manage_labels": "Gérer les étiquettes",
     "users": "Utilisateurs",
     "manage_roles": "Gérer les rôles",

From 90c7452fc2687203ee8be64b087ed4334e054e86 Mon Sep 17 00:00:00 2001
From: yassinedorbozgithub <yassine.dorboz.2022@gmail.com>
Date: Fri, 7 Feb 2025 04:11:47 +0100
Subject: [PATCH 24/31] refactor(frontend): update subscriber dialogs

---
 .../subscribers/EditSubscriberDialog.tsx      | 146 ------------------
 .../components/subscribers/SubscriberForm.tsx | 124 +++++++++++++++
 .../subscribers/SubscriberFormDialog.tsx      |  23 +++
 frontend/src/components/subscribers/index.tsx |  19 +--
 4 files changed, 152 insertions(+), 160 deletions(-)
 delete mode 100644 frontend/src/components/subscribers/EditSubscriberDialog.tsx
 create mode 100644 frontend/src/components/subscribers/SubscriberForm.tsx
 create mode 100644 frontend/src/components/subscribers/SubscriberFormDialog.tsx

diff --git a/frontend/src/components/subscribers/EditSubscriberDialog.tsx b/frontend/src/components/subscribers/EditSubscriberDialog.tsx
deleted file mode 100644
index 0b2897bf..00000000
--- a/frontend/src/components/subscribers/EditSubscriberDialog.tsx
+++ /dev/null
@@ -1,146 +0,0 @@
-/*
- * 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 {
-  Button,
-  Dialog,
-  DialogActions,
-  DialogContent,
-  Grid,
-} from "@mui/material";
-import Link from "next/link";
-import { useEffect, FC, useState } from "react";
-import { Controller, useForm } from "react-hook-form";
-
-import DialogButtons from "@/app-components/buttons/DialogButtons";
-import { DialogTitle } from "@/app-components/dialogs/DialogTitle";
-import { ContentContainer } from "@/app-components/dialogs/layouts/ContentContainer";
-import { ContentItem } from "@/app-components/dialogs/layouts/ContentItem";
-import AutoCompleteEntitySelect from "@/app-components/inputs/AutoCompleteEntitySelect";
-import { Input } from "@/app-components/inputs/Input";
-import { useUpdate } from "@/hooks/crud/useUpdate";
-import { DialogControlProps } from "@/hooks/useDialog";
-import { useToast } from "@/hooks/useToast";
-import { useTranslate } from "@/hooks/useTranslate";
-import { EntityType, Format } from "@/services/types";
-import { ILabel } from "@/types/label.types";
-import { ISubscriber, ISubscriberAttributes } from "@/types/subscriber.types";
-
-const getFullName = (val: ISubscriber) => `${val.first_name} ${val.last_name}`;
-
-export type EditSubscriberDialogProps = DialogControlProps<{
-  labels: ILabel[];
-  subscriber: ISubscriber;
-}>;
-export const EditSubscriberDialog: FC<EditSubscriberDialogProps> = ({
-  open,
-  data,
-  closeDialog,
-  ...rest
-}) => {
-  const { t } = useTranslate();
-  const { toast } = useToast();
-  const [fullName, setFullName] = useState<string>("");
-  const { mutateAsync: updateSubscriber } = useUpdate(EntityType.SUBSCRIBER, {
-    onError: () => {
-      toast.error(t("message.internal_server_error"));
-    },
-    onSuccess() {
-      closeDialog();
-      toast.success(t("message.success_save"));
-    },
-  });
-  const {
-    reset,
-    control,
-    formState: { errors },
-    handleSubmit,
-  } = useForm<ISubscriberAttributes>();
-  const validationRules = {
-    labels: {},
-  };
-  const onSubmitForm = async (params: ISubscriberAttributes) => {
-    if (data?.subscriber.id)
-      updateSubscriber({ id: data?.subscriber.id, params });
-  };
-
-  useEffect(() => {
-    if (data?.subscriber) setFullName(getFullName(data?.subscriber));
-
-    if (open) {
-      reset({ labels: data?.subscriber?.labels });
-    }
-  }, [open, reset, data]);
-
-  return (
-    <Dialog open={open} fullWidth onClose={closeDialog} {...rest}>
-      <form onSubmit={handleSubmit(onSubmitForm)}>
-        <DialogTitle onClose={closeDialog}>
-          {t("title.manage_labels")}
-        </DialogTitle>
-        <DialogContent>
-          <ContentContainer>
-            <ContentItem>
-              <Input
-                label={t("label.auth_user")}
-                disabled
-                InputProps={{
-                  readOnly: true,
-                }}
-                value={fullName}
-              />
-            </ContentItem>
-            <ContentItem>
-              <Grid container gap="20px">
-                <Grid item xs>
-                  <Controller
-                    name="labels"
-                    rules={validationRules.labels}
-                    control={control}
-                    render={({ field }) => {
-                      const { onChange, ...rest } = field;
-
-                      return (
-                        <AutoCompleteEntitySelect<ILabel>
-                          autoFocus
-                          searchFields={["name"]}
-                          entity={EntityType.LABEL}
-                          format={Format.BASIC}
-                          labelKey="name"
-                          label={t("label.labels")}
-                          multiple
-                          {...field}
-                          error={!!errors.labels}
-                          helperText={
-                            errors.labels ? errors.labels.message : null
-                          }
-                          onChange={(_e, selected) =>
-                            onChange(selected.map(({ id }) => id))
-                          }
-                          {...rest}
-                        />
-                      );
-                    }}
-                  />
-                </Grid>
-                <Grid alignContent="center">
-                  <Link href="/subscribers/labels">
-                    <Button variant="contained">{t("button.manage")}</Button>
-                  </Link>
-                </Grid>
-              </Grid>
-            </ContentItem>
-          </ContentContainer>
-        </DialogContent>
-        <DialogActions>
-          <DialogButtons closeDialog={closeDialog} />
-        </DialogActions>
-      </form>
-    </Dialog>
-  );
-};
diff --git a/frontend/src/components/subscribers/SubscriberForm.tsx b/frontend/src/components/subscribers/SubscriberForm.tsx
new file mode 100644
index 00000000..aa1e2529
--- /dev/null
+++ b/frontend/src/components/subscribers/SubscriberForm.tsx
@@ -0,0 +1,124 @@
+/*
+ * 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 { ILabel } from "@/types/label.types";
+import { ISubscriber, ISubscriberAttributes } from "@/types/subscriber.types";
+
+const getFullName = (subscriber: ISubscriber | null) =>
+  `${subscriber?.first_name} ${subscriber?.last_name}`;
+
+export const SubscriberForm: FC<ComponentFormProps<ISubscriber>> = ({
+  data,
+  Wrapper = Fragment,
+  WrapperProps,
+  ...rest
+}) => {
+  const { t } = useTranslate();
+  const { toast } = useToast();
+  const { mutate: updateSubscriber } = useUpdate(EntityType.SUBSCRIBER, {
+    onError: () => {
+      rest.onError?.();
+      toast.error(t("message.internal_server_error"));
+    },
+    onSuccess() {
+      rest.onSuccess?.();
+      toast.success(t("message.success_save"));
+    },
+  });
+  const {
+    reset,
+    control,
+    formState: { errors },
+    handleSubmit,
+  } = useForm<ISubscriberAttributes>();
+  const onSubmitForm = (params: ISubscriberAttributes) => {
+    if (data?.id) {
+      updateSubscriber({ id: data.id, params });
+    }
+  };
+
+  useEffect(() => {
+    if (data) {
+      reset({ labels: data?.labels });
+    }
+  }, [data, reset]);
+
+  return (
+    <Wrapper
+      open={!!WrapperProps?.open}
+      onSubmit={handleSubmit(onSubmitForm)}
+      {...WrapperProps}
+    >
+      <form onSubmit={handleSubmit(onSubmitForm)}>
+        <ContentContainer>
+          <ContentItem>
+            <Input
+              label={t("label.user")}
+              value={getFullName(data)}
+              disabled
+              InputProps={{
+                readOnly: true,
+              }}
+            />
+          </ContentItem>
+          <ContentItem>
+            <Grid container gap="20px">
+              <Grid item xs>
+                <Controller
+                  name="labels"
+                  render={({ field }) => {
+                    const { onChange, ...rest } = field;
+
+                    return (
+                      <AutoCompleteEntitySelect<ILabel>
+                        autoFocus
+                        searchFields={["name"]}
+                        entity={EntityType.LABEL}
+                        format={Format.BASIC}
+                        labelKey="name"
+                        label={t("label.labels")}
+                        multiple
+                        {...field}
+                        error={!!errors.labels}
+                        helperText={
+                          errors.labels ? errors.labels.message : null
+                        }
+                        onChange={(_e, selected) =>
+                          onChange(selected.map(({ id }) => id))
+                        }
+                        {...rest}
+                      />
+                    );
+                  }}
+                  control={control}
+                />
+              </Grid>
+              <Grid alignContent="center">
+                <Link href="/subscribers/labels">
+                  <Button variant="contained">{t("button.manage")}</Button>
+                </Link>
+              </Grid>
+            </Grid>
+          </ContentItem>
+        </ContentContainer>
+      </form>
+    </Wrapper>
+  );
+};
diff --git a/frontend/src/components/subscribers/SubscriberFormDialog.tsx b/frontend/src/components/subscribers/SubscriberFormDialog.tsx
new file mode 100644
index 00000000..c234ef2a
--- /dev/null
+++ b/frontend/src/components/subscribers/SubscriberFormDialog.tsx
@@ -0,0 +1,23 @@
+/*
+ * 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 { ISubscriber } from "@/types/subscriber.types";
+
+import { SubscriberForm } from "./SubscriberForm";
+
+export const SubscriberFormDialog = <T extends ISubscriber = ISubscriber>(
+  props: ComponentFormDialogProps<T>,
+) => (
+  <GenericFormDialog<T>
+    Form={SubscriberForm}
+    editText="title.manage_subscribers"
+    {...props}
+  />
+);
diff --git a/frontend/src/components/subscribers/index.tsx b/frontend/src/components/subscribers/index.tsx
index ebf4daa0..3ffeff8d 100644
--- a/frontend/src/components/subscribers/index.tsx
+++ b/frontend/src/components/subscribers/index.tsx
@@ -10,7 +10,7 @@ import AccountCircleIcon from "@mui/icons-material/AccountCircle";
 import DeleteIcon from "@mui/icons-material/Close";
 import { Grid, IconButton, MenuItem, Paper } from "@mui/material";
 import { GridColDef } from "@mui/x-data-grid";
-import React, { useState } from "react";
+import { useState } from "react";
 
 import { ChipEntity } from "@/app-components/displays/ChipEntity";
 import { FilterTextfield } from "@/app-components/inputs/FilterTextfield";
@@ -23,23 +23,19 @@ import { renderHeader } from "@/app-components/tables/columns/renderHeader";
 import { buildRenderPicture } from "@/app-components/tables/columns/renderPicture";
 import { DataGrid } from "@/app-components/tables/DataGrid";
 import { useFind } from "@/hooks/crud/useFind";
-import { getDisplayDialogs, useDialog } from "@/hooks/useDialog";
+import { useDialogs } from "@/hooks/useDialogs";
 import { useSearch } from "@/hooks/useSearch";
 import { useTranslate } from "@/hooks/useTranslate";
 import { PageHeader } from "@/layout/content/PageHeader";
 import { EntityType, Format } from "@/services/types";
-import { ILabel } from "@/types/label.types";
 import { ISubscriber } from "@/types/subscriber.types";
 import { getDateTimeFormatter } from "@/utils/date";
 
-import { EditSubscriberDialog } from "./EditSubscriberDialog";
+import { SubscriberFormDialog } from "./SubscriberFormDialog";
 
 export const Subscribers = () => {
   const { t } = useTranslate();
-  const editDialogCtl = useDialog<{
-    labels: ILabel[];
-    subscriber: ISubscriber;
-  }>(false);
+  const dialogs = useDialogs();
   const { data: labels } = useFind(
     {
       entity: EntityType.LABEL,
@@ -155,11 +151,7 @@ export const Subscribers = () => {
       [
         {
           label: ActionColumnLabel.Manage_Labels,
-          action: (row) =>
-            editDialogCtl.openDialog({
-              labels: labels || [],
-              subscriber: row,
-            }),
+          action: (row) => dialogs.open(SubscriberFormDialog, row),
         },
       ],
       t("label.operations"),
@@ -168,7 +160,6 @@ export const Subscribers = () => {
 
   return (
     <Grid container gap={3} flexDirection="column">
-      <EditSubscriberDialog {...getDisplayDialogs(editDialogCtl)} />
       <PageHeader icon={AccountCircleIcon} title={t("title.subscribers")}>
         <Grid
           justifyContent="flex-end"

From c972626a781b723eba48ea6f71b1ccd9f1ac2796 Mon Sep 17 00:00:00 2001
From: yassinedorbozgithub <yassine.dorboz.2022@gmail.com>
Date: Fri, 7 Feb 2025 06:24:52 +0100
Subject: [PATCH 25/31] refactor(frontend): update editUser dialog

---
 .../src/components/users/EditUserDialog.tsx   | 153 ------------------
 .../src/components/users/EditUserForm.tsx     | 134 +++++++++++++++
 .../components/users/EditUserFormDialog.tsx   |  24 +++
 3 files changed, 158 insertions(+), 153 deletions(-)
 delete mode 100644 frontend/src/components/users/EditUserDialog.tsx
 create mode 100644 frontend/src/components/users/EditUserForm.tsx
 create mode 100644 frontend/src/components/users/EditUserFormDialog.tsx

diff --git a/frontend/src/components/users/EditUserDialog.tsx b/frontend/src/components/users/EditUserDialog.tsx
deleted file mode 100644
index 092bad94..00000000
--- a/frontend/src/components/users/EditUserDialog.tsx
+++ /dev/null
@@ -1,153 +0,0 @@
-/*
- * 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 {
-  Button,
-  Dialog,
-  DialogActions,
-  DialogContent,
-  Grid,
-} from "@mui/material";
-import Link from "next/link";
-import { FC, useEffect, useState } from "react";
-import { Controller, useForm } from "react-hook-form";
-
-import DialogButtons from "@/app-components/buttons/DialogButtons";
-import { DialogTitle } from "@/app-components/dialogs/DialogTitle";
-import { ContentContainer } from "@/app-components/dialogs/layouts/ContentContainer";
-import { ContentItem } from "@/app-components/dialogs/layouts/ContentItem";
-import AutoCompleteEntitySelect from "@/app-components/inputs/AutoCompleteEntitySelect";
-import { Input } from "@/app-components/inputs/Input";
-import { useUpdate } from "@/hooks/crud/useUpdate";
-import { DialogControlProps } from "@/hooks/useDialog";
-import { useToast } from "@/hooks/useToast";
-import { useTranslate } from "@/hooks/useTranslate";
-import { EntityType, Format } from "@/services/types";
-import { IRole } from "@/types/role.types";
-import { IUser, IUserAttributes } from "@/types/user.types";
-
-const getFullName = (val: IUser) => `${val.first_name} ${val.last_name}`;
-
-export type EditUserDialogProps = DialogControlProps<{
-  user: IUser;
-  roles: IRole[];
-}>;
-
-export const EditUserDialog: FC<EditUserDialogProps> = ({
-  open,
-  data,
-  closeDialog,
-  ...rest
-}) => {
-  const { t } = useTranslate();
-  const { toast } = useToast();
-  const [fullName, setFullName] = useState<string>("");
-  const { mutateAsync: updateUser } = useUpdate(EntityType.USER, {
-    onError: (error) => {
-      toast.error(error.message || t("message.internal_server_error"));
-    },
-    onSuccess() {
-      closeDialog();
-      toast.success(t("message.success_save"));
-    },
-  });
-  const {
-    handleSubmit,
-    control,
-    reset,
-    formState: { errors },
-  } = useForm<IUserAttributes>({
-    defaultValues: { roles: data?.roles.map((role) => role.id) },
-  });
-  const validationRules = {
-    roles: {
-      required: t("message.roles_is_required"),
-    },
-  };
-  const onSubmitForm = async (params: IUserAttributes) => {
-    if (data?.user.id)
-      updateUser({
-        id: data.user.id,
-        params,
-      });
-  };
-
-  useEffect(() => {
-    if (data?.user) setFullName(getFullName(data?.user));
-
-    if (open) reset({ roles: data?.user?.roles });
-  }, [open, reset, data]);
-
-  return (
-    <Dialog open={open} fullWidth onClose={closeDialog} {...rest}>
-      <form onSubmit={handleSubmit(onSubmitForm)}>
-        <DialogTitle onClose={closeDialog}>
-          {t("title.manage_roles")}
-        </DialogTitle>
-        <DialogContent>
-          <ContentContainer>
-            <ContentItem>
-              <Input
-                disabled
-                label={t("label.auth_user")}
-                value={fullName}
-                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>
-        </DialogContent>
-        <DialogActions>
-          <DialogButtons closeDialog={closeDialog} />
-        </DialogActions>
-      </form>
-    </Dialog>
-  );
-};
diff --git a/frontend/src/components/users/EditUserForm.tsx b/frontend/src/components/users/EditUserForm.tsx
new file mode 100644
index 00000000..51b9f81d
--- /dev/null
+++ b/frontend/src/components/users/EditUserForm.tsx
@@ -0,0 +1,134 @@
+/*
+ * 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>
+  );
+};
diff --git a/frontend/src/components/users/EditUserFormDialog.tsx b/frontend/src/components/users/EditUserFormDialog.tsx
new file mode 100644
index 00000000..fc7cb5a1
--- /dev/null
+++ b/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}
+  />
+);

From 6efc305244ea28a36045eab37bb7cd855ed80d11 Mon Sep 17 00:00:00 2001
From: yassinedorbozgithub <yassine.dorboz.2022@gmail.com>
Date: Fri, 7 Feb 2025 06:25:15 +0100
Subject: [PATCH 26/31] refactor(frontend): update inviteUser dialog

---
 .../app-components/buttons/FormButtons.tsx    |   9 +-
 .../src/app-components/dialogs/FormDialog.tsx |  10 +-
 .../src/components/users/InvitationDialog.tsx | 144 ------------------
 .../src/components/users/InviteUserForm.tsx   | 116 ++++++++++++++
 .../components/users/InviteUserFormDialog.tsx |  25 +++
 frontend/src/components/users/index.tsx       |  28 ++--
 frontend/src/contexts/dialogs.context.tsx     |   1 +
 frontend/src/types/common/dialogs.types.ts    |  30 ++--
 8 files changed, 187 insertions(+), 176 deletions(-)
 delete mode 100644 frontend/src/components/users/InvitationDialog.tsx
 create mode 100644 frontend/src/components/users/InviteUserForm.tsx
 create mode 100644 frontend/src/components/users/InviteUserFormDialog.tsx

diff --git a/frontend/src/app-components/buttons/FormButtons.tsx b/frontend/src/app-components/buttons/FormButtons.tsx
index 469b9cf5..9b277ddb 100644
--- a/frontend/src/app-components/buttons/FormButtons.tsx
+++ b/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>
diff --git a/frontend/src/app-components/dialogs/FormDialog.tsx b/frontend/src/app-components/dialogs/FormDialog.tsx
index 8a5bfe24..97fac8e9 100644
--- a/frontend/src/app-components/dialogs/FormDialog.tsx
+++ b/frontend/src/app-components/dialogs/FormDialog.tsx
@@ -17,16 +17,20 @@ export const FormDialog = ({
   title,
   children,
   onSubmit,
+  cancelButtonProps,
+  confirmButtonProps,
   ...rest
 }: FormDialogProps) => {
-  const handleClose = () => rest.onClose?.({}, "backdropClick");
+  const onCancel = () => rest.onClose?.({}, "backdropClick");
 
   return (
     <Dialog fullWidth {...rest}>
-      <DialogTitle onClose={handleClose}>{title}</DialogTitle>
+      <DialogTitle onClose={onCancel}>{title}</DialogTitle>
       <DialogContent>{children}</DialogContent>
       <DialogActions style={{ padding: "0.5rem" }}>
-        <DialogFormButtons onCancel={handleClose} onSubmit={onSubmit} />
+        <DialogFormButtons
+          {...{ onSubmit, onCancel, confirmButtonProps, cancelButtonProps }}
+        />
       </DialogActions>
     </Dialog>
   );
diff --git a/frontend/src/components/users/InvitationDialog.tsx b/frontend/src/components/users/InvitationDialog.tsx
deleted file mode 100644
index 77458710..00000000
--- a/frontend/src/components/users/InvitationDialog.tsx
+++ /dev/null
@@ -1,144 +0,0 @@
-/*
- * 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 CloseIcon from "@mui/icons-material/Close";
-import SendIcon from "@mui/icons-material/Send";
-import { Button, Dialog, DialogActions, DialogContent } from "@mui/material";
-import { FC, useEffect } from "react";
-import { Controller, useForm } from "react-hook-form";
-
-import { DialogTitle } from "@/app-components/dialogs/DialogTitle";
-import { ContentContainer } from "@/app-components/dialogs/layouts/ContentContainer";
-import { ContentItem } from "@/app-components/dialogs/layouts/ContentItem";
-import AutoCompleteEntitySelect from "@/app-components/inputs/AutoCompleteEntitySelect";
-import { Input } from "@/app-components/inputs/Input";
-import { useSendInvitation } from "@/hooks/entities/invitation-hooks";
-import { DialogControlProps } from "@/hooks/useDialog";
-import { useToast } from "@/hooks/useToast";
-import { useTranslate } from "@/hooks/useTranslate";
-import { useValidationRules } from "@/hooks/useValidationRules";
-import { EntityType, Format } from "@/services/types";
-import { IInvitationAttributes } from "@/types/invitation.types";
-import { IRole } from "@/types/role.types";
-
-const DEFAULT_VALUES: IInvitationAttributes = { email: "", roles: [] };
-
-export type InvitationDialogProps = DialogControlProps<IRole[]>;
-export const InvitationDialog: FC<InvitationDialogProps> = ({
-  open,
-  closeDialog,
-  ...rest
-}) => {
-  const { t } = useTranslate();
-  const { toast } = useToast();
-  const { mutateAsync: sendInvitation } = useSendInvitation({
-    onSuccess: () => {
-      closeDialog();
-      toast.success(t("message.success_invitation_sent"));
-    },
-    onError: () => {
-      toast.error(t("message.internal_server_error"));
-    },
-  });
-  const {
-    handleSubmit,
-    reset,
-    register,
-    control,
-    formState: { errors },
-  } = useForm<IInvitationAttributes>({
-    defaultValues: DEFAULT_VALUES,
-  });
-  const rules = useValidationRules();
-  const validationRules = {
-    email: {
-      ...rules.email,
-      required: t("message.email_is_required"),
-    },
-    roles: {
-      required: t("message.roles_is_required"),
-    },
-  };
-  const onSubmitForm = async (params: IInvitationAttributes) => {
-    sendInvitation(params);
-  };
-
-  useEffect(() => {
-    if (open) reset(DEFAULT_VALUES);
-  }, [open, reset]);
-
-  return (
-    <Dialog open={open} fullWidth onClose={closeDialog} {...rest}>
-      <form onSubmit={handleSubmit(onSubmitForm)}>
-        <DialogTitle onClose={closeDialog}>
-          {t("title.invite_new_user")}
-        </DialogTitle>
-        <DialogContent>
-          <ContentContainer>
-            <ContentItem>
-              <Input
-                label={t("placeholder.email")}
-                error={!!errors.email}
-                required
-                autoFocus
-                {...register("email", validationRules.email)}
-                helperText={errors.email ? errors.email.message : null}
-              />
-            </ContentItem>
-            <ContentItem>
-              <Controller
-                name="roles"
-                rules={validationRules.roles}
-                control={control}
-                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}
-                    />
-                  );
-                }}
-              />
-            </ContentItem>
-          </ContentContainer>
-        </DialogContent>
-        <DialogActions>
-          <Button
-            startIcon={<SendIcon />}
-            variant="contained"
-            type="submit"
-            onClick={handleSubmit(onSubmitForm)}
-          >
-            {t("button.send")}
-          </Button>
-          <Button
-            startIcon={<CloseIcon />}
-            variant="outlined"
-            onClick={closeDialog}
-          >
-            {t("button.cancel")}
-          </Button>
-        </DialogActions>
-      </form>
-    </Dialog>
-  );
-};
diff --git a/frontend/src/components/users/InviteUserForm.tsx b/frontend/src/components/users/InviteUserForm.tsx
new file mode 100644
index 00000000..d4517382
--- /dev/null
+++ b/frontend/src/components/users/InviteUserForm.tsx
@@ -0,0 +1,116 @@
+/*
+ * 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 { FC, Fragment } 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 { useSendInvitation } from "@/hooks/entities/invitation-hooks";
+import { useToast } from "@/hooks/useToast";
+import { useTranslate } from "@/hooks/useTranslate";
+import { useValidationRules } from "@/hooks/useValidationRules";
+import { EntityType, Format } from "@/services/types";
+import { ComponentFormProps } from "@/types/common/dialogs.types";
+import { IInvitationAttributes } from "@/types/invitation.types";
+import { IRole } from "@/types/role.types";
+
+const DEFAULT_VALUES: IInvitationAttributes = { email: "", roles: [] };
+
+export const InviteUserForm: FC<ComponentFormProps<undefined>> = ({
+  Wrapper = Fragment,
+  WrapperProps,
+  ...rest
+}) => {
+  const { t } = useTranslate();
+  const { toast } = useToast();
+  const { mutateAsync: sendInvitation } = useSendInvitation({
+    onSuccess: () => {
+      rest.onSuccess?.();
+      toast.success(t("message.success_invitation_sent"));
+    },
+    onError: () => {
+      rest.onError?.();
+      toast.error(t("message.internal_server_error"));
+    },
+  });
+  const {
+    control,
+    register,
+    formState: { errors },
+    handleSubmit,
+  } = useForm<IInvitationAttributes>({
+    defaultValues: DEFAULT_VALUES,
+  });
+  const rules = useValidationRules();
+  const validationRules = {
+    email: {
+      ...rules.email,
+      required: t("message.email_is_required"),
+    },
+    roles: {
+      required: t("message.roles_is_required"),
+    },
+  };
+  const onSubmitForm = async (params: IInvitationAttributes) => {
+    sendInvitation(params);
+  };
+
+  return (
+    <Wrapper
+      open={!!WrapperProps?.open}
+      onSubmit={handleSubmit(onSubmitForm)}
+      {...WrapperProps}
+    >
+      <form onSubmit={handleSubmit(onSubmitForm)}>
+        <ContentContainer>
+          <ContentItem>
+            <Input
+              label={t("placeholder.email")}
+              error={!!errors.email}
+              required
+              autoFocus
+              {...register("email", validationRules.email)}
+              helperText={errors.email ? errors.email.message : null}
+            />
+          </ContentItem>
+          <ContentItem>
+            <Controller
+              name="roles"
+              rules={validationRules.roles}
+              control={control}
+              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}
+                  />
+                );
+              }}
+            />
+          </ContentItem>
+        </ContentContainer>
+      </form>
+    </Wrapper>
+  );
+};
diff --git a/frontend/src/components/users/InviteUserFormDialog.tsx b/frontend/src/components/users/InviteUserFormDialog.tsx
new file mode 100644
index 00000000..2ceae59b
--- /dev/null
+++ b/frontend/src/components/users/InviteUserFormDialog.tsx
@@ -0,0 +1,25 @@
+/*
+ * 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 SendIcon from "@mui/icons-material/Send";
+
+import { GenericFormDialog } from "@/app-components/dialogs";
+import { ComponentFormDialogProps } from "@/types/common/dialogs.types";
+
+import { InviteUserForm } from "./InviteUserForm";
+
+export const InviteUserFormFormDialog = <T extends undefined = undefined>(
+  props: ComponentFormDialogProps<T>,
+) => (
+  <GenericFormDialog<T>
+    Form={InviteUserForm}
+    addText="title.invite_new_user"
+    confirmButtonProps={{ startIcon: <SendIcon /> }}
+    {...props}
+  />
+);
diff --git a/frontend/src/components/users/index.tsx b/frontend/src/components/users/index.tsx
index fd16366e..caad6fa7 100644
--- a/frontend/src/components/users/index.tsx
+++ b/frontend/src/components/users/index.tsx
@@ -24,7 +24,7 @@ import { useFind } from "@/hooks/crud/useFind";
 import { useUpdate } from "@/hooks/crud/useUpdate";
 import { useAuth } from "@/hooks/useAuth";
 import { useConfig } from "@/hooks/useConfig";
-import { getDisplayDialogs, useDialog } from "@/hooks/useDialog";
+import { useDialogs } from "@/hooks/useDialogs";
 import { useHasPermission } from "@/hooks/useHasPermission";
 import { useSearch } from "@/hooks/useSearch";
 import { useToast } from "@/hooks/useToast";
@@ -32,19 +32,19 @@ import { useTranslate } from "@/hooks/useTranslate";
 import { PageHeader } from "@/layout/content/PageHeader";
 import { EntityType, Format } from "@/services/types";
 import { PermissionAction } from "@/types/permission.types";
-import { IRole } from "@/types/role.types";
 import { IUser } from "@/types/user.types";
 import { getDateTimeFormatter } from "@/utils/date";
 
-import { EditUserDialog } from "./EditUserDialog";
-import { InvitationDialog } from "./InvitationDialog";
+import { CategoryFormDialog } from "./EditUserFormDialog";
+import { InviteUserFormFormDialog } from "./InviteUserFormDialog";
 
 export const Users = () => {
   const { ssoEnabled } = useConfig();
   const { t } = useTranslate();
   const { toast } = useToast();
+  const dialogs = useDialogs();
   const { user } = useAuth();
-  const { mutateAsync: updateUser } = useUpdate(EntityType.USER, {
+  const { mutate: updateUser } = useUpdate(EntityType.USER, {
     onError: (error) => {
       toast.error(error.message || t("message.internal_server_error"));
     },
@@ -52,8 +52,6 @@ export const Users = () => {
       toast.success(t("message.success_save"));
     },
   });
-  const invitationDialogCtl = useDialog<IRole[]>(false);
-  const editDialogCtl = useDialog<{ user: IUser; roles: IRole[] }>(false);
   const hasPermission = useHasPermission();
   const { onSearch, searchPayload } = useSearch<IUser>({
     $or: ["first_name", "last_name", "email"],
@@ -76,9 +74,9 @@ export const Users = () => {
       {
         label: ActionColumnLabel.Manage_Roles,
         action: (row) =>
-          editDialogCtl.openDialog({
-            roles: roles || [],
+          dialogs.open(CategoryFormDialog, {
             user: row,
+            roles: roles || [],
           }),
         requires: [PermissionAction.CREATE],
       },
@@ -151,14 +149,14 @@ export const Users = () => {
             ssoEnabled ||
             !hasPermission(EntityType.USER, PermissionAction.UPDATE)
           }
-          onChange={() => {
+          onChange={() =>
             updateUser({
               id: params.row.id,
               params: {
                 state: !params.row.state,
               },
-            });
-          }}
+            })
+          }
         />
       ),
     },
@@ -189,8 +187,6 @@ export const Users = () => {
 
   return (
     <Grid container gap={3} flexDirection="column">
-      <InvitationDialog {...getDisplayDialogs(invitationDialogCtl)} />
-      <EditUserDialog {...getDisplayDialogs(editDialogCtl)} />
       <PageHeader icon={faUsers} title={t("title.users")}>
         <Grid
           justifyContent="flex-end"
@@ -212,9 +208,7 @@ export const Users = () => {
                 sx={{
                   float: "right",
                 }}
-                onClick={() => {
-                  invitationDialogCtl.openDialog(roles);
-                }}
+                onClick={() => dialogs.open(InviteUserFormFormDialog)}
               >
                 {t("button.invite")}
               </Button>
diff --git a/frontend/src/contexts/dialogs.context.tsx b/frontend/src/contexts/dialogs.context.tsx
index 7daa9027..f849f5ff 100644
--- a/frontend/src/contexts/dialogs.context.tsx
+++ b/frontend/src/contexts/dialogs.context.tsx
@@ -137,6 +137,7 @@ function DialogsProvider(props: DialogProviderProps) {
           onClose={async (result) => {
             await closeDialog(promise, result);
           }}
+          onSubmit={() => {}}
           {...msgProps}
         />
       ))}
diff --git a/frontend/src/types/common/dialogs.types.ts b/frontend/src/types/common/dialogs.types.ts
index 9c884f15..6c756542 100644
--- a/frontend/src/types/common/dialogs.types.ts
+++ b/frontend/src/types/common/dialogs.types.ts
@@ -6,7 +6,7 @@
  * 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 { DialogProps as MuiDialogProps } from "@mui/material";
+import { ButtonProps, DialogProps as MuiDialogProps } from "@mui/material";
 import { BaseSyntheticEvent } from "react";
 
 interface ConfirmDialogExtraOptions {
@@ -24,6 +24,8 @@ export interface OpenDialogOptions<R> extends ConfirmDialogExtraOptions {
    * @returns A promise that resolves when the dialog can be closed.
    */
   onClose?: (result: R) => Promise<void>;
+
+  onSubmit?: (e: BaseSyntheticEvent) => void;
 }
 
 /**
@@ -47,6 +49,8 @@ export interface DialogProps<P = undefined, R = void> {
    * @returns A promise that resolves when the dialog can be fully closed.
    */
   onClose: (result: R) => Promise<void>;
+
+  onSubmit: (e: BaseSyntheticEvent) => void;
 }
 
 export type DialogComponent<P, R> = React.ComponentType<DialogProps<P, R>>;
@@ -142,24 +146,28 @@ export interface DialogProviderProps {
 }
 
 // form dialog
-export interface FormDialogProps extends MuiDialogProps {
+export interface FormDialogProps
+  extends FormButtonsProps,
+    Omit<MuiDialogProps, "onSubmit"> {
   title?: string;
   children?: React.ReactNode;
-  onSubmit: (e: BaseSyntheticEvent) => void;
 }
 
 // form
-export type ComponentFormProps<T> = {
+export interface FormButtonsProps {
+  onSubmit: (e: BaseSyntheticEvent) => void;
+  onCancel?: () => void;
+  cancelButtonProps?: ButtonProps;
+  confirmButtonProps?: ButtonProps;
+}
+
+export type ComponentFormProps<T> = FormButtonsProps & {
   data: T | null;
   onError?: () => void;
   onSuccess?: () => void;
   Wrapper?: React.FC<FormDialogProps>;
-  WrapperProps?: Partial<FormDialogProps>;
+  WrapperProps?: Partial<FormDialogProps> & Partial<FormButtonsProps>;
 };
 
-export interface FormButtonsProps {
-  onCancel?: () => void;
-  onSubmit: (e: BaseSyntheticEvent) => void;
-}
-
-export type ComponentFormDialogProps<T> = DialogProps<T | null, boolean>;
+export type ComponentFormDialogProps<T> = FormButtonsProps &
+  DialogProps<T | null, boolean>;

From b869e823014d328816738070a14b1bfa78c6529d Mon Sep 17 00:00:00 2001
From: yassinedorbozgithub <yassine.dorboz.2022@gmail.com>
Date: Fri, 7 Feb 2025 06:28:33 +0100
Subject: [PATCH 27/31] fix(frontend): update inviteUser form

---
 frontend/src/components/users/InviteUserForm.tsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/users/InviteUserForm.tsx b/frontend/src/components/users/InviteUserForm.tsx
index d4517382..68d677f0 100644
--- a/frontend/src/components/users/InviteUserForm.tsx
+++ b/frontend/src/components/users/InviteUserForm.tsx
@@ -30,7 +30,7 @@ export const InviteUserForm: FC<ComponentFormProps<undefined>> = ({
 }) => {
   const { t } = useTranslate();
   const { toast } = useToast();
-  const { mutateAsync: sendInvitation } = useSendInvitation({
+  const { mutate: sendInvitation } = useSendInvitation({
     onSuccess: () => {
       rest.onSuccess?.();
       toast.success(t("message.success_invitation_sent"));
@@ -58,9 +58,8 @@ export const InviteUserForm: FC<ComponentFormProps<undefined>> = ({
       required: t("message.roles_is_required"),
     },
   };
-  const onSubmitForm = async (params: IInvitationAttributes) => {
+  const onSubmitForm = (params: IInvitationAttributes) =>
     sendInvitation(params);
-  };
 
   return (
     <Wrapper

From dd367faeee23b92fbef1d188ba8974d288bc38f8 Mon Sep 17 00:00:00 2001
From: hexastack <talebhassan.ikbel@gmail.com>
Date: Fri, 7 Feb 2025 08:20:38 +0100
Subject: [PATCH 28/31] revert: undo unnecassary changes

---
 .../components/content-types/ContentTypeDialog.tsx    | 11 +++--------
 1 file changed, 3 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/content-types/ContentTypeDialog.tsx b/frontend/src/components/content-types/ContentTypeDialog.tsx
index 5d362829..735496da 100644
--- a/frontend/src/components/content-types/ContentTypeDialog.tsx
+++ b/frontend/src/components/content-types/ContentTypeDialog.tsx
@@ -48,7 +48,7 @@ export const ContentTypeDialog: FC<ContentTypeDialogProps> = ({
       fields: data?.fields || FIELDS_FORM_DEFAULT_VALUES,
     },
   });
-  const { append, fields, remove, replace } = useFieldArray({
+  const { append, fields, remove } = useFieldArray({
     name: "fields",
     control,
   });
@@ -58,7 +58,6 @@ export const ContentTypeDialog: FC<ContentTypeDialogProps> = ({
       name: "",
       fields: FIELDS_FORM_DEFAULT_VALUES,
     });
-    replace(FIELDS_FORM_DEFAULT_VALUES);
   };
   const { mutate: createContentType } = useCreate(EntityType.CONTENT_TYPE, {
     onError: (error) => {
@@ -110,19 +109,15 @@ export const ContentTypeDialog: FC<ContentTypeDialogProps> = ({
   }, [open, reset]);
 
   useEffect(() => {
-    if (!open) return;
-
     if (data) {
       reset({
         name: data.name,
-        fields: data.fields?.length ? data.fields : FIELDS_FORM_DEFAULT_VALUES,
+        fields: data.fields || FIELDS_FORM_DEFAULT_VALUES,
       });
-      replace(data.fields?.length ? data.fields : FIELDS_FORM_DEFAULT_VALUES);
     } else {
       reset({ name: "", fields: FIELDS_FORM_DEFAULT_VALUES });
-      replace(FIELDS_FORM_DEFAULT_VALUES);
     }
-  }, [open, data, reset, replace]);
+  }, [data, reset]);
 
   return (
     <Dialog open={open} fullWidth onClose={closeAndReset}>

From 71b2c3cf3bea4a4bf157db603b8eb9cba65e5bf3 Mon Sep 17 00:00:00 2001
From: yassinedorbozgithub <yassine.dorboz.2022@gmail.com>
Date: Fri, 7 Feb 2025 10:09:49 +0100
Subject: [PATCH 29/31] fix(frontend): add handleDeleteNlpValues function

---
 .../components/nlp/components/NlpValue.tsx    | 28 +++++++++----------
 1 file changed, 13 insertions(+), 15 deletions(-)

diff --git a/frontend/src/components/nlp/components/NlpValue.tsx b/frontend/src/components/nlp/components/NlpValue.tsx
index 57dd0462..1864eb43 100644
--- a/frontend/src/components/nlp/components/NlpValue.tsx
+++ b/frontend/src/components/nlp/components/NlpValue.tsx
@@ -156,6 +156,16 @@ export const NlpValues = ({ entityId }: { entityId: string }) => {
   const handleSelectionChange = (selection: GridRowSelectionModel) => {
     setSelectedNlpValues(selection as string[]);
   };
+  const handleDeleteNlpValues = async () => {
+    const isConfirmed = await dialogs.confirm(ConfirmDialogBody, {
+      mode: "selection",
+      count: selectedNlpValues.length,
+    });
+
+    if (isConfirmed) {
+      deleteNlpValues(selectedNlpValues);
+    }
+  };
 
   return (
     <Grid container gap={2} flexDirection="column">
@@ -209,22 +219,10 @@ export const NlpValues = ({ entityId }: { entityId: string }) => {
                   {selectedNlpValues.length > 0 && (
                     <Grid item>
                       <Button
-                        startIcon={<DeleteIcon />}
-                        variant="contained"
                         color="error"
-                        onClick={async () => {
-                          const isConfirmed = await dialogs.confirm(
-                            ConfirmDialogBody,
-                            {
-                              mode: "selection",
-                              count: selectedNlpValues.length,
-                            },
-                          );
-
-                          if (isConfirmed) {
-                            deleteNlpValues(selectedNlpValues);
-                          }
-                        }}
+                        variant="contained"
+                        onClick={handleDeleteNlpValues}
+                        startIcon={<DeleteIcon />}
                       >
                         {t("button.delete")}
                       </Button>

From 5c057409b735df15cefd676f99fa91137570a605 Mon Sep 17 00:00:00 2001
From: yassinedorbozgithub <yassine.dorboz.2022@gmail.com>
Date: Fri, 7 Feb 2025 11:38:36 +0100
Subject: [PATCH 30/31] fix(frontend): resolve onSubmit issue

---
 frontend/src/contexts/dialogs.context.tsx  | 1 -
 frontend/src/types/common/dialogs.types.ts | 4 ++--
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/frontend/src/contexts/dialogs.context.tsx b/frontend/src/contexts/dialogs.context.tsx
index 756efb92..753af19f 100644
--- a/frontend/src/contexts/dialogs.context.tsx
+++ b/frontend/src/contexts/dialogs.context.tsx
@@ -137,7 +137,6 @@ function DialogsProvider(props: DialogProviderProps) {
           onClose={async (result) => {
             await closeDialog(promise, result);
           }}
-          onSubmit={() => {}}
           {...msgProps}
         />
       ))}
diff --git a/frontend/src/types/common/dialogs.types.ts b/frontend/src/types/common/dialogs.types.ts
index 4f191c97..64191fc1 100644
--- a/frontend/src/types/common/dialogs.types.ts
+++ b/frontend/src/types/common/dialogs.types.ts
@@ -52,7 +52,7 @@ export interface DialogProps<P = undefined, R = void> {
    */
   onClose: (result: R) => Promise<void>;
 
-  onSubmit: (e: BaseSyntheticEvent) => void;
+  onSubmit?: (e: BaseSyntheticEvent) => void;
 }
 
 export type DialogComponent<P, R> = React.ComponentType<DialogProps<P, R>>;
@@ -157,7 +157,7 @@ export interface FormDialogProps
 
 // form
 export interface FormButtonsProps {
-  onSubmit: (e: BaseSyntheticEvent) => void;
+  onSubmit?: (e: BaseSyntheticEvent) => void;
   onCancel?: () => void;
   cancelButtonProps?: ButtonProps;
   confirmButtonProps?: ButtonProps;

From 12246ae230478c01ec857048aea121dbf9529bf6 Mon Sep 17 00:00:00 2001
From: yassinedorbozgithub <yassine.dorboz.2022@gmail.com>
Date: Fri, 7 Feb 2025 11:52:54 +0100
Subject: [PATCH 31/31] fix(frontend): add curly brackets

---
 frontend/src/components/users/EditUserForm.tsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/users/EditUserForm.tsx b/frontend/src/components/users/EditUserForm.tsx
index 51b9f81d..71ee4187 100644
--- a/frontend/src/components/users/EditUserForm.tsx
+++ b/frontend/src/components/users/EditUserForm.tsx
@@ -59,15 +59,18 @@ export const EditUserForm: FC<ComponentFormProps<EditUserFormData>> = ({
     },
   };
   const onSubmitForm = (params: IUserAttributes) => {
-    if (data?.user.id)
+    if (data?.user.id) {
       updateUser({
         id: data.user.id,
         params,
       });
+    }
   };
 
   useEffect(() => {
-    if (data?.user) reset({ roles: data?.user?.roles });
+    if (data?.user) {
+      reset({ roles: data?.user?.roles });
+    }
   }, [reset, data?.user]);
 
   return (