src/Components/CustomFields/SelectTag.tsx

@@ -43,11 +43,13 @@ const SelectTag: React.FC = () => {
     : [];
 
 
-
+      console.log(options);
+console.log(formik?.values?.tags);
 const value = formik?.values?.tags?.map((item: any) => item?.id ?? item) ?? [];
 
 
   const AllOptions = [...options, ...additionalData]
+  console.log(AllOptions);
   
   return (
     <div className="SelectTag">

src/Pages/Admin/Unit/Page.tsx

@@ -8,6 +8,7 @@ import useSetPageTitle from "../../../Hooks/useSetPageTitle";
 import { ModalEnum } from "../../../enums/Model";
 import { useDeleteUnit } from "../../../api/unit";
 import { useGetAllGrade } from "../../../api/grade";
+import { useGetAllCurriculum } from "../../../api/curriculum";
 import PageHeader from "../../../Layout/Dashboard/PageHeader";
 import FilterLayout from "../../../Layout/Dashboard/FilterLayout";
 import FilterForm from "./Model/FilterForm";
@@ -33,10 +34,13 @@ const TableHeader = () => {
   const { data: grade } = useGetAllGrade({
     show: grade_id,
   });
-
+  const { data: Curriculum } = useGetAllCurriculum({
+    show: curriculum_id,
+  });
   const gradeName = grade?.data?.name ?? "";
 
   const SubjectName = Subject?.data?.name ?? "";
+  const CurriculumName = Curriculum?.data?.name ?? "";
   useSetPageTitle(
     t(`page_header.grade`) +
       "/" +
@@ -46,6 +50,10 @@ const TableHeader = () => {
       "/" +
       SubjectName +
       "/" +
+      t("PageTitle.curriculum") +
+      "/" +
+      CurriculumName +
+      "/" +
       t("PageTitle.unit"),
   );
 

src/Pages/Admin/lesson/Page.tsx

@@ -36,10 +36,13 @@ const TableHeader = () => {
   const { data: grade } = useGetAllGrade({
     show: grade_id,
   });
-
+  const { data: Curriculum } = useGetAllCurriculum({
+    show: curriculum_id,
+  });
 
   const gradeName = grade?.data?.name ?? "";
   const SubjectName = Subject?.data?.name ?? "";
+  const CurriculumName = Curriculum?.data?.name ?? "";
   const unitName = unit?.data?.name ?? "";
 
   useSetPageTitle(
@@ -51,6 +54,10 @@ const TableHeader = () => {
       "/" +
       SubjectName +
       "/" +
+      t("PageTitle.curriculum") +
+      "/" +
+      CurriculumName +
+      "/" +
       t("PageTitle.unit") +
       "/" +
       unitName +

src/Pages/Admin/question/AddPage.tsx

@@ -1,5 +1,5 @@
-import React, { Suspense, lazy } from "react";
+import React, { Suspense, lazy, useEffect } from "react";
-import {  Spin } from "antd";
+import { Modal, Spin } from "antd";
 import FormikForm from "../../../Layout/Dashboard/FormikFormModel";
 import {
   getInitialValues,
@@ -27,12 +27,14 @@ const AddPage: React.FC = () => {
   const {
     isBseQuestion,
     setTagsSearch,
+    setObjectToEdit,
     objectToEdit,
   } = useObjectToEdit();
 
+  const { setIsOpen } = useModalState((state) => state);
 
   const [t] = useTranslation();
-  const {  subject_id, lesson_id } =
+  const { unit_id, curriculum_id, grade_id, subject_id, lesson_id } =
     useParams<ParamsEnum>();
   
 

src/Pages/Admin/question/Model/AcceptModal.tsx

@@ -1,9 +1,10 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
-import {  Modal } from "antd";
+import { Input, Modal, Spin } from "antd";
 import { useModalState } from "../../../../zustand/Modal";
 import { ModalEnum } from "../../../../enums/Model";
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
+import { useObjectToEdit } from "../../../../zustand/ObjectToEditState";
 import { QUESTION_OBJECT_KEY } from "../../../../config/AppKey";
 
 const AcceptModal: React.FC = () => {

src/Pages/Admin/question/Model/ModelForm.tsx

@@ -1,9 +1,11 @@
 import { Row } from "reactstrap";
 import ValidationField from "../../../../Components/ValidationField/ValidationField";
 import { useFormikContext } from "formik";
+import ChoiceFields from "./Field/ChoiceFields";
 import { FaCirclePlus } from "react-icons/fa6";
 import { Choice } from "../../../../types/Item";
 import { useTranslation } from "react-i18next";
+import DynamicTags from "./Tags/DynamicTags";
 import { useObjectToEdit } from "../../../../zustand/ObjectToEditState";
 import { useEffect } from "react";
 import Choices from "./Field/Choices";

src/Pages/Admin/question/Model/Tags/DynamicTags.tsx

@@ -0,0 +1,91 @@
+import { useFormikContext } from "formik";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { FaCirclePlus } from "react-icons/fa6";
+import Tag from "./Tag";
+import { useObjectToEdit } from "../../../../../zustand/ObjectToEditState";
+import { useGetAllTag } from "../../../../../api/tags";
+
+const DynamicTags = () => {
+  const formik = useFormikContext<any>();
+  const [t] = useTranslation();
+  const { TagsSearch, setTagsSearch, currentTag } = useObjectToEdit();
+  const { data } = useGetAllTag({
+    name: TagsSearch,
+  });
+  const suggests = data?.data;
+
+  const handleAddChoice = () => {
+    const length = formik?.values?.tags.length;
+    const lastElement = formik?.values?.tags[length - 1]?.name;
+    setTagsSearch;
+    if (lastElement !== "") {
+      formik.setFieldValue("tags", [
+        ...((formik?.values as any)?.tags as any[]),
+
+        {
+          id: length + "_new",
+          name: "",
+          key: length,
+        },
+      ]);
+    } else {
+    }
+  };
+  // console.log(formik?.values);
+  // console.log(currentTag);
+
+  const handleChoice = (item: any) => {
+    const length = formik.values.tags.length;
+    console.log(currentTag);
+
+    formik.setFieldValue(`tags[${currentTag}]`, { ...item, key: length });
+    setTagsSearch(null);
+  };
+
+  // console.log(formik?.values?.tags?.length);
+
+  return (
+    <div className="DynamicTags">
+      {formik?.values?.tags?.length < 1 && (
+        <p className="add_new_button">
+          <FaCirclePlus size={23} onClick={handleAddChoice} />{" "}
+          {t("header.add_tag")}
+        </p>
+      )}
+
+      <div className="tag_container">
+        <div className="tags">
+          {(((formik?.values as any)?.tags as any[]) || []).map(
+            (item: any, index: number) => {
+              return <Tag key={index} index={index} data={item} />;
+            },
+          )}
+        </div>
+
+        {formik?.values?.tags?.length > 0 && (
+          <p className="add_new_button">
+            <FaCirclePlus onClick={handleAddChoice} size={20} />
+          </p>
+        )}
+      </div>
+      {TagsSearch && (
+        <div className="suggests">
+          {suggests?.map((item: any, index: number) => {
+            return (
+              <div
+                className="suggested"
+                key={index}
+                onClick={() => handleChoice(item)}
+              >
+                {item?.name}
+              </div>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default DynamicTags;

src/Pages/Admin/question/Model/Tags/Tag.tsx

@@ -0,0 +1,75 @@
+import { useFormikContext } from "formik";
+import React, { useRef, useEffect } from "react";
+import { useObjectToEdit } from "../../../../../zustand/ObjectToEditState";
+import { FaTrash } from "react-icons/fa";
+
+const Tag = ({ data, index }: { data: any; index: number }) => {
+  const inputRef = useRef<HTMLInputElement>(null);
+  const formik = useFormikContext<any>();
+  const { setTagsSearch, setCurrentTag } = useObjectToEdit();
+  const timeoutRef = useRef<NodeJS.Timeout | null>(null);
+  const DEBOUNCE_DELAY = 500;
+  useEffect(() => {
+    if (inputRef.current) {
+      inputRef.current.style.width = `${(formik?.values?.tags[index]?.name?.length + 1) * 8}px`;
+    }
+  }, [formik?.values?.tags[index]?.name]);
+
+  const handleEditInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    // console.log(e.target.value);
+    formik.setFieldValue(`tags[${index}].name`, e.target.value);
+    // setTagsSearch(e.target.value)
+    formik.setFieldValue(`tags.[${index}]`, {
+      key: index,
+      name: e.target.value,
+      id: `${index}_key`,
+    });
+
+    setCurrentTag(index);
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+
+    timeoutRef.current = setTimeout(() => {
+      setTagsSearch(e.target.value);
+    }, DEBOUNCE_DELAY);
+  };
+
+  const handleInputBlur = () => {
+    // setTagsSearch(null)
+  };
+
+  const handleDeleteChoice = () => {
+    console.log(data);
+
+    // Create a copy of current tags array
+    const currentTags = [...formik.values.tags];
+
+    // Remove the item at the specified index from the array
+    currentTags.splice(index, 1);
+
+    console.log(currentTags); // Log the updated tags array
+
+    // Update formik field value with the updated tags array
+    formik.setFieldValue("tags", currentTags);
+
+    // Reset search state if needed
+    setTagsSearch(null);
+  };
+
+  return (
+    <div className="tag">
+      <input
+        ref={inputRef}
+        className="tagInput"
+        type="text"
+        value={formik?.values?.tags[index]?.name}
+        onChange={handleEditInputChange}
+        onBlur={handleInputBlur}
+      />
+      <FaTrash onClick={handleDeleteChoice} />
+    </div>
+  );
+};
+
+export default Tag;

src/Pages/Admin/question/Model/formUtil.ts

@@ -7,6 +7,7 @@ export const getInitialValues = (objectToEdit: Question): any => {
   const tags = objectToEdit?.tags?.map((item: any, index: number) => {
     return { ...item };
   });
+  console.log(tags);
   
   return {
     id: objectToEdit?.id ?? null,

src/utils/RoleByType.ts

@@ -7,7 +7,9 @@ export const RoleByType = (item: { type?: string }):boolean=>{
     const LocalType = getLocalStorage(USER_KEY)?.type ?? undefined ;
     const isAdmin =  LocalType === UserTypeEnum.ADMIN ;
     const isReSeller =  LocalType === UserTypeEnum.RE_SELLER;
+    const isAdminRoute =  type === UserTypeEnum.ADMIN ;
     const isReSellerRoute =  type === UserTypeEnum.RE_SELLER;
+        console.log(LocalType);
         
     if(!LocalType){
         return false