Merge branch 'dev' of https://git.point-dev.net/Karimaldeen/Quiz_dashboard into dev

.vscode/settings.json

@@ -10,8 +10,10 @@
     "Groupbutton",
     "handelnavigate",
     "Karim",
+    "Popconfirm",
     "queryqlent",
     "registraion",
+    "Sellcast",
     "SENDNOTIFICATION",
     "setdateparams",
     "szhsin",

src/Components/CustomFields/ImageBoxField/ImageBoxField.tsx

@@ -63,9 +63,9 @@ const ImageBoxField = ({ name }: any) => {
           <div className="VisibleHidden">hidden</div>
         )}
       </div>
-      <div className="ImageBox">
+      <div className="ImageBox" onClick={handleButtonClick}>
         {imagePreview ? (
-          <img src={imagePreview} alt="Preview" className="imagePreview" />
+          <img src={imagePreview} onClick={handleButtonClick} alt="Preview" className="imagePreview" />
         ) : (
           <ImageIcon onClick={handleButtonClick} className="ImageBoxIcon" />
         )}

src/Components/ValidationField/View/TextField.tsx

@@ -14,10 +14,10 @@ const TextField = ({
   placeholder,
   isDisabled,
   onChange,
-  props,
   no_label,
   label_icon,
   className,
+  ...props
 }: any) => {
   const { formik, isError, errorMsg, t } = useFormField(name, props);
   const TextFilehandleChange = (
@@ -25,6 +25,7 @@ const TextField = ({
   ) => {
     formik.setFieldValue(name, e.target.value);
   };
+
   return (
     <div className={`ValidationField w-100 ${className ?? ""} `}>
       <ValidationFieldLabel
@@ -45,9 +46,10 @@ const TextField = ({
           size="large"
           showCount
           maxLength={1000}
+          autoSize={{ minRows: 4, maxRows: 10 }} 
           onChange={onChange || TextFilehandleChange}
-          style={{ height: 120 }}
           id={name}
+          {...props}
         />
       </ValidationFieldContainer>
     </div>

src/Components/ValidationField/utils/ValidationField.scss

@@ -15,6 +15,8 @@
   .text,
   .ant-form-item {
     margin-bottom: 7px !important;
+    font-weight: bold;
+    font-size: 19px;
     > span {
       color: transparent;
     }
@@ -65,3 +67,15 @@
 .ant-input-textarea-affix-wrapper.ant-input-affix-wrapper {
   height: 120px;
 }
+
+
+
+//// malty select
+/// 
+ .ant-select-multiple{
+   height: auto !important;
+   min-height: 40px;
+   .ant-select-selector{
+    min-height: 40px;
+   }
+ }

src/Components/exercise/Header.tsx

@@ -4,14 +4,16 @@ import { useTranslation } from "react-i18next";
 import { GoArrowSwitch } from "react-icons/go";
 import { useObjectToEdit } from "../../zustand/ObjectToEditState";
 import { QUESTION_OBJECT_KEY } from "../../config/AppKey";
-import { Popover } from "antd";
+import { Popconfirm, Popover } from "antd";
 import { CombinationKeyEnum } from "../../enums/CombinationKeyEnum";
+import { PopconfirmProps } from "antd/lib";
 
 const Header = () => {
   const [t] = useTranslation();
   const { values, setFieldValue, setValues } = useFormikContext<any>();
   const { isBseQuestion, setIsBseQuestion } = useObjectToEdit();
   const { setSavedQuestionData } = useObjectToEdit();
+
   const handleChange = () => {
     setSavedQuestionData(null);
     localStorage.removeItem(QUESTION_OBJECT_KEY);
@@ -26,6 +28,14 @@ const Header = () => {
     }
   };
 
+  const confirm: PopconfirmProps['onConfirm'] = (e) => {
+    console.log(e);
+    setTimeout(() => {
+      handleChange()
+    }, 500);
+    
+  };
+
   const content = (
     <div>
       <p>
@@ -52,10 +62,21 @@ const Header = () => {
         </div>
       </article>
       <div>
-        <GoArrowSwitch onClick={handleChange} className="m-2" />
+      <Popconfirm
+    title={t("header.this_will_un_do_all_your_changes")}
+    okText={t("practical.yes")}
+    cancelText={t("practical.no")}
+    onConfirm={()=>{confirm()}}
+    defaultOpen={false}
+
+  >
+  
+        <GoArrowSwitch className="m-2" />
         {isBseQuestion || values?.isBase === 1
           ? t("header.malty_exercise")
           : t("header.exercise")}
+
+  </Popconfirm>
       </div>
     </header>
   );

src/Hooks/useFormField.tsx

@@ -7,6 +7,7 @@ import { useEffect } from "react";
 
 const useFormField = (name: string, props?: any) => {
   const [field, meta] = useField({ name, ...props });
+  
   const { t } = useTranslation();
   const formik = useFormikContext<any>();
 

src/Layout/Dashboard/DeleteModels.tsx

@@ -73,7 +73,7 @@ const DeleteModels: React.FC<ModalFormProps> = ({
     <Modal
       className="ModalForm"
       centered
-      width={"40vw"}
+      width={"500px"}
       footer={null}
       open={isOpen === ModelEnum}
       onCancel={handleCancel}

src/Layout/Dashboard/FormikFormModel.tsx

@@ -29,6 +29,7 @@ const FormikFormModel: React.FC<FormikFormProps> = ({
       initialValues={initialValues}
       validationSchema={validationSchema}
       onSubmit={handleSubmit}
+      
     >
       {(formik) => {
         useEffect(() => {

src/Layout/Dashboard/PageHeader.tsx

@@ -1,5 +1,4 @@
-import React from "react";
+
-import SearchBar from "../../Components/Ui/SearchBar/SearchBar";
 import { Button } from "antd";
 import { BsPlusCircleFill } from "react-icons/bs";
 import { useNavigate } from "react-router-dom";
@@ -8,8 +7,7 @@ import useModalHandler from "../../utils/useModalHandler";
 import { MdOutlineArrowForwardIos } from "react-icons/md";
 import { deletePathSegments } from "../../utils/deletePathSegments";
 import { getPrevPathRoute } from "../../utils/getPrevPathRoute";
-import { usePageTitleState } from "../../zustand/PageTitleState";
+import PageTitleComponent from "./PageTitle";
-import FillterForm from "../Ui/FillterForm";
 
 const PageHeader = ({
   canAdd,
@@ -35,20 +33,20 @@ const PageHeader = ({
     if (PrevPath === 0) {
       return;
     }
-    navigate(deletePathSegments(location.pathname, PrevPath));
+    // navigate(deletePathSegments(location.pathname, PrevPath));
   };
   const handleNavigateToPage = (location: string) => {
-    navigate(location);
+    // navigate(location);
   };
+
   console.log();
-  const { PageTitle } = usePageTitleState();
   return (
     <div className="page_header">
       <header className="d-flex justify-content-between">
         <span className="page_header_links" onClick={handelNavigate}>
           <h1 className="page_title">{t(`PageTitle.${pageTitle}`)}</h1>
           <span className="page_links">
-            <MdOutlineArrowForwardIos /> {PageTitle}
+            <MdOutlineArrowForwardIos /> <PageTitleComponent/>
           </span>
         </span>
         { addModal ? canAdd && (

src/Layout/Dashboard/PageTitle.tsx

@@ -0,0 +1,30 @@
+import React from 'react'
+import { useLocation, useNavigate } from 'react-router-dom'
+import { usePageTitleState } from '../../zustand/PageTitleState'
+
+const PageTitleComponent = () => {
+
+    const {PageTitle,setPageTitle} = usePageTitleState()
+    const navigate = useNavigate()
+    const location = useLocation()
+    const handleNavigate = (path:string)=>{
+        const currentPath = location.pathname ; 
+        const newPath = currentPath?.split(path)?.[0] + path ;
+            if(newPath !== currentPath){
+                navigate(newPath)
+            }
+    } 
+  return (
+    <div className='PageTitle'>
+        {(Array.isArray(PageTitle) ? PageTitle : [])?.map((item,index)=>{
+            return (
+                <div key={index} className='PageTitleItems' onClick={()=>handleNavigate(item?.path)}>
+                        {item?.name}  /
+                </div>
+            )
+        })}
+    </div>
+  )
+}
+
+export default PageTitleComponent

src/Pages/Admin/Grade/Page.tsx

@@ -20,7 +20,10 @@ const TableHeader = () => {
   const [t] = useTranslation();
   const deleteMutation = useDeleteGrade();
 
-  useSetPageTitle(t(`page_header.grade`));
+  useSetPageTitle([
+    {name:`${t(`page_header.home`)}`, path:"/"},
+    {name:`${t(`page_header.grade`)}`, path:"grade"}
+  ]);
 
   return (
     <div className="TableWithHeader">

src/Pages/Admin/Param/Page.tsx

@@ -18,7 +18,11 @@ const DeleteModalForm = lazy(
 
 const TableHeader = () => {
   const [t] = useTranslation();
-  useSetPageTitle(t(`page_header.param`));
+
+  useSetPageTitle([
+    {name:`${t(`page_header.home`)}`, path:"/"},
+    {name:`${t(`page_header.param`)}`, path:"param"}
+  ]);
   const deleteMutation = useDeleteParam();
   return (
     <div className="TableWithHeader">

src/Pages/Admin/QuestionBank/Model/AddModel.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+import { getInitialValues, getValidationSchema } from "./formUtil";
+import { ModalEnum } from "../../../../enums/Model";
+import LayoutModel from "../../../../Layout/Dashboard/LayoutModel";
+import { QueryStatusEnum } from "../../../../enums/QueryStatus";
+import ModelForm from "./ModelForm";
+import { useAddGrade } from "../../../../api/grade";
+
+const AddModel: React.FC = () => {
+  const { mutate, status } = useAddGrade();
+
+  const handleSubmit = (values: any) => {
+    mutate({
+      ...values,
+    });
+  };
+  return (
+    <>
+      <LayoutModel
+        status={status as QueryStatusEnum}
+        ModelEnum={ModalEnum.GRADE_ADD}
+        modelTitle="grade"
+        handleSubmit={handleSubmit}
+        getInitialValues={getInitialValues({})}
+        getValidationSchema={getValidationSchema}
+      >
+        <ModelForm />
+      </LayoutModel>
+    </>
+  );
+};
+
+export default AddModel;

src/Pages/Admin/QuestionBank/Model/EditModel.tsx

@@ -0,0 +1,38 @@
+import React from "react";
+import { getInitialValues, getValidationSchema } from "./formUtil";
+import { ModalEnum } from "../../../../enums/Model";
+import LayoutModel from "../../../../Layout/Dashboard/LayoutModel";
+import ModelForm from "./ModelForm";
+import { QueryStatusEnum } from "../../../../enums/QueryStatus";
+import { useObjectToEdit } from "../../../../zustand/ObjectToEditState";
+import { useUpdateQuestion } from "../../../../api/Question";
+import { handelImageState } from "../../../../utils/DataToSendImageState";
+
+const EditModel: React.FC = () => {
+  const { mutate, status } = useUpdateQuestion();
+  const { objectToEdit } = useObjectToEdit((state) => state);
+
+  const handleSubmit = (values: any) => {
+    const Data_to_send = { ...values };
+    const handelImage = handelImageState(Data_to_send, "icon");
+    mutate(handelImage);
+  };
+
+  return (
+    <>
+      <LayoutModel
+        status={status as QueryStatusEnum}
+        ModelEnum={ModalEnum.QUESTION_BANK_EDIT}
+        modelTitle="QuestionBank"
+        handleSubmit={handleSubmit}
+        getInitialValues={getInitialValues(objectToEdit)}
+        getValidationSchema={getValidationSchema}
+        isAddModal={false}
+      >
+        <ModelForm />
+      </LayoutModel>
+    </>
+  );
+};
+
+export default EditModel;

src/Pages/Admin/QuestionBank/Model/FilterForm.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import ValidationField from "../../../../Components/ValidationField/ValidationField";
+import { Col, Row } from "reactstrap";
+import { useFormikContext } from "formik";
+
+const FilterForm = () => {
+  const formik = useFormikContext();
+
+  return (
+    <div>
+      <Row>
+        <Col>
+          <ValidationField placeholder="name" label="name" name="name" />
+        </Col>
+      </Row>
+    </div>
+  );
+};
+
+export default FilterForm;

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

@@ -0,0 +1,17 @@
+import { Col, Row } from "reactstrap";
+import ValidationField from "../../../../Components/ValidationField/ValidationField";
+
+const Form = () => {
+  return (
+    <Row className="w-100">
+      <Col>
+        <ValidationField name="name" placeholder="name" label="name" />
+      </Col>
+      <Col>
+        <ValidationField name="icon" type="File" />
+      </Col>
+    </Row>
+  );
+};
+
+export default Form;

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

@@ -0,0 +1,19 @@
+import * as Yup from "yup";
+import { Grade, GradeInitialValues } from "../../../../types/Grade";
+
+export const getInitialValues = (
+  objectToEdit: Partial<Grade>,
+): GradeInitialValues => {
+  return {
+    id: objectToEdit?.id,
+    name: objectToEdit?.name ?? "",
+    icon: objectToEdit?.icon ?? "",
+  };
+};
+
+export const getValidationSchema = () => {
+  // validate input
+  return Yup.object().shape({
+    name: Yup.string().required("validation.required"),
+  });
+};

src/Pages/Admin/QuestionBank/Page.tsx

@@ -0,0 +1,49 @@
+import { useTranslation } from "react-i18next";
+import { lazy, Suspense } from "react";
+import { Spin } from "antd";
+import useSetPageTitle from "../../../Hooks/useSetPageTitle";
+import { ModalEnum } from "../../../enums/Model";
+import { useDeleteQuestion } from "../../../api/Question";
+import PageHeader from "../../../Layout/Dashboard/PageHeader";
+import FilterLayout from "../../../Layout/Dashboard/FilterLayout";
+import FilterForm from "./Model/FilterForm";
+import { canAddQuestionBank } from "../../../utils/hasAbilityFn";
+
+const Table = lazy(() => import("./Table"));
+const AddModalForm = lazy(() => import("./Model/AddModel"));
+const EditModalForm = lazy(() => import("./Model/EditModel"));
+const DeleteModalForm = lazy(
+  () => import("../../../Layout/Dashboard/DeleteModels"),
+);
+
+const TableHeader = () => {
+  const [t] = useTranslation();
+  const deleteMutation = useDeleteQuestion();
+
+
+  useSetPageTitle([
+    {name:`${t(`page_header.home`)}`, path:"/"},
+    {name:`${t(`page_header.Question`)}`, path:"Question"}
+  ]);
+  return (
+    <div className="TableWithHeader">
+      <Suspense fallback={<Spin />}>
+        <PageHeader
+          pageTitle="QuestionBank"
+          ModelAbility={ModalEnum?.QUESTION_BANK_ADD}
+          canAdd={canAddQuestionBank}
+        />
+        <FilterLayout sub_children={<FilterForm />} filterTitle="table.QuestionBank" />
+        <Table />
+        <AddModalForm />
+        <EditModalForm />
+        <DeleteModalForm
+          deleteMutation={deleteMutation}
+          ModelEnum={ModalEnum?.QUESTION_BANK_DELETE}
+        />
+      </Suspense>
+    </div>
+  );
+};
+
+export default TableHeader;

src/Pages/Admin/QuestionBank/Table.tsx

@@ -0,0 +1,18 @@
+import { useColumns } from "./useTableColumns";
+import React from "react";
+import DataTable from "../../../Layout/Dashboard/Table/DataTable";
+import { useGetAllQuestion } from "../../../api/Question";
+import { useFilterState } from "../../../Components/Utils/Filter/FilterState";
+
+const App: React.FC = () => {
+  const { filterState } = useFilterState();
+
+  const response = useGetAllQuestion({
+    pagination: true,
+    ...filterState,
+  });
+
+  return <DataTable response={response} useColumns={useColumns} />;
+};
+
+export default App;

src/Pages/Admin/QuestionBank/useTableColumns.tsx

@@ -0,0 +1,123 @@
+import { TableColumnsType } from "antd";
+import { Question } from "../../../types/Item";
+import { FaPlus } from "react-icons/fa";
+import { ModalEnum } from "../../../enums/Model";
+import { useObjectToEdit } from "../../../zustand/ObjectToEditState";
+import { useTranslation } from "react-i18next";
+import { ABILITIES_ENUM } from "../../../enums/abilities";
+import { useNavigate } from "react-router-dom";
+import { useModalState } from "../../../zustand/Modal";
+import {
+  canAddQuestion,
+  canDeleteQuestion,
+  canEditQuestion,
+} from "../../../utils/hasAbilityFn";
+import ActionButtons from "../../../Components/Table/ActionButtons";
+
+export const useColumns = () => {
+  const { setObjectToEdit } = useObjectToEdit((state) => state);
+  const navigate = useNavigate();
+  const { setIsOpen } = useModalState((state) => state);
+
+  const handelAdd = () => {
+    setObjectToEdit({});
+    navigate(`${ABILITIES_ENUM?.QUESTION}/add`);
+  };
+
+  const handelDelete = (data: any) => {
+    setObjectToEdit(data);
+    setIsOpen(ModalEnum?.QUESTION_DELETE);
+  };
+
+  const handleEdit = (record: any) => {
+    setObjectToEdit(record);
+    navigate(`${ABILITIES_ENUM?.QUESTION}/${record?.id}`);
+  };
+  const [t] = useTranslation();
+
+  const columns: TableColumnsType<Question> = [
+    {
+      title: t("columns.id"),
+      dataIndex: "id",
+      key: "id",
+      align: "center",
+      render: (text, record) => record?.id,
+    },
+    {
+      title: `${t("columns.content")}`,
+      dataIndex: "content",
+      key: "content",
+      align: "center",
+      render: (text, record) => record?.content,
+      ellipsis: true,
+    },
+    {
+      title: `${t("columns.hint")}`,
+      dataIndex: "hint",
+      key: "hint",
+      align: "center",
+      render: (text, record) => {
+        
+        return (
+          <>{record?.hint ?? "karim"}</>
+        );
+      },
+      ellipsis: true,
+    },
+    {
+      title: `${t("columns.tags")}`,
+      dataIndex: "tags",
+      key: "tags",
+      align: "center",
+      
+      render: (text, record) => {
+        const tags = record?.tags?.map((item:any)=>{
+          return item?.name
+        }) ?? [];         
+        return (
+          <div>
+            {tags.length > 0 ? (
+              tags.map((tag, index) => (
+                <span key={index}>
+                  {tag}
+                  {index < tags.length - 1 && ', '} 
+                </span>
+              ))
+            ) : (
+              <span>_</span>
+            )}
+          </div>
+        );
+      },
+      ellipsis: true,
+    },
+    {
+      title: t("columns.question_type"),
+      dataIndex: "isBase",
+      key: "isBase",
+      align: "center",
+      render: (text, record) =>
+        record?.isBase ? t("columns.base_question") : t("columns.normal_question"),
+    },
+
+    {
+      title: "#",
+      key: "actions",
+      align: "center",
+
+      render: (_text, record, index) => {
+        return (
+          <ActionButtons
+            canDelete={canDeleteQuestion}
+            canEdit={canEditQuestion}
+            index={index}
+            onDelete={() => handelDelete(record)}
+            onEdit={() => handleEdit(record)}
+          />
+        );
+      },
+    },
+  ];
+
+  return columns;
+};

src/Pages/Admin/Report/Page.tsx

@@ -21,9 +21,12 @@ const SearchField = lazy(
 );
 
 const TableHeader = () => {
-  const { handel_open_model } = useModalHandler();
   const [t] = useTranslation();
-  useSetPageTitle(t(`page_header.report`));
+
+  useSetPageTitle([
+    {name:`${t(`page_header.home`)}`, path:"/"},
+    {name:`${t(`page_header.report`)}`, path:"report"}
+  ]);
   const deleteMutation = useDeleteTag();
   return (
     <div className="TableWithHeader">

src/Pages/Admin/Reseller/Page.tsx

@@ -24,7 +24,10 @@ const SearchField = lazy(
 
 const TableHeader = () => {
   const [t] = useTranslation();
-  useSetPageTitle(t(`page_header.reseller`));
+  useSetPageTitle([
+    {name:`${t(`page_header.home`)}`, path:"/"},
+    {name:`${t(`page_header.reseller`)}`, path:"reseller"}
+  ]);
   const deleteMutation = useDeleteTag();
   return (
     <div className="TableWithHeader">

src/Pages/Admin/Student/Page.tsx

@@ -20,8 +20,10 @@ const TableHeader = () => {
   const [t] = useTranslation();
   const deleteMutation = useDeleteStudent();
 
-  useSetPageTitle(t(`page_header.student`));
+  useSetPageTitle([
-
+    {name:`${t(`page_header.home`)}`, path:"/"},
+    {name:`${t(`page_header.student`)}`, path:"student"}
+  ]);
   return (
     <div className="TableWithHeader">
       <Suspense fallback={<Spin />}>

src/Pages/Admin/Tags/Page.tsx

@@ -16,14 +16,15 @@ const EditModalForm = lazy(() => import("./Model/EditModel"));
 const DeleteModalForm = lazy(
   () => import("../../../Layout/Dashboard/DeleteModels"),
 );
-const SearchField = lazy(
-  () => import("../../../Components/DataTable/SearchField"),
-);
 
 const TableHeader = () => {
-  const { handel_open_model } = useModalHandler();
   const [t] = useTranslation();
-  useSetPageTitle(t(`page_header.tags`));
+
+  useSetPageTitle([
+    {name:`${t(`page_header.home`)}`, path:"/"},
+    {name:`${t(`page_header.tags`)}`, path:"tag"}
+  ]);
+
   const deleteMutation = useDeleteTag();
   return (
     <div className="TableWithHeader">

src/Pages/Admin/Unit/Page.tsx

@@ -35,15 +35,13 @@ const TableHeader = () => {
   });
 
   const gradeName = grade?.data?.name ?? "";
-
   const SubjectName = Subject?.data?.name ?? "";
-  useSetPageTitle(
+  useSetPageTitle([
-    t(`page_header.grade`) +
+    {name:`${t(`page_header.home`)}`, path:"/"},
-      " / " +
+    {name:`${t(`page_header.grade`)}`, path:"grade"},
-      ` ${t("header.subject_of_class")} (${gradeName})` +
+    {name:` ${t("header.subject_of_class")} (${gradeName})`, path:`grade/${grade_id}`},
-      " / " +
+    {name:SubjectName, path:`subject/${subject_id}`}
-      SubjectName,
+  ]);
-  );
 
   return (
     <div className="TableWithHeader">

src/Pages/Admin/User/Page.tsx

@@ -18,7 +18,10 @@ const DeleteModalForm = lazy(
 
 const TableHeader = () => {
   const [t] = useTranslation();
-  useSetPageTitle(t(`page_header.user`));
+  useSetPageTitle([
+    {name:`${t(`page_header.home`)}`, path:"/"},
+    {name:`${t(`page_header.user`)}`, path:"user"}
+  ]);
   const deleteMutation = useDeleteUser();
   return (
     <div className="TableWithHeader">

src/Pages/Admin/lesson/Page.tsx

@@ -26,7 +26,7 @@ const TableHeader = () => {
   const [t] = useTranslation();
   const deleteMutation = useDeleteLesson();
 
-  const { unit_id, curriculum_id, grade_id, subject_id } =
+  const { unit_id, grade_id, subject_id } =
     useParams<ParamsEnum>();
   const { data: unit } = useGetAllUnit({ show: unit_id });
 
@@ -41,15 +41,15 @@ const TableHeader = () => {
   const SubjectName = Subject?.data?.name ?? "";
   const unitName = unit?.data?.name ?? "";
 
-  useSetPageTitle(
+
-    t(`page_header.grade`) +
+  useSetPageTitle([
-      " / " +
+    {name:`${t(`page_header.home`)}`, path:"/"},
-      ` ${t("header.subject_of_class")} (${gradeName})` +
+    {name:`${t(`page_header.grade`)}`, path:"grade"},
-      " / " +
+    {name:` ${t("header.subject_of_class")} (${gradeName})`, path:`grade/${grade_id}`},
-      SubjectName +
+    {name:SubjectName, path:`subject/${subject_id}`},
-      " / " +
+    {name:unitName, path:`unit/${unit_id}`}
-      unitName,
+  ]);
-  );
+
 
   return (
     <div className="TableWithHeader">

src/Pages/Admin/question/AddPage.tsx

@@ -1,16 +1,15 @@
 import React, { Suspense, lazy, useEffect } from "react";
 import { Spin } from "antd";
-import FormikForm from "../../../Layout/Dashboard/FormikFormModel";
 import {
   getInitialValues,
   getValidationSchema,
   getInitialValuesBase,
   getValidationSchemaBase,
   processTags,
-} from "./Model/formUtil";
+} from "./formUtil";
 import { useAddQuestion, useAddQuestionAsync } from "../../../api/Question";
 import { useTranslation } from "react-i18next";
-import { useNavigate, useParams } from "react-router-dom";
+import { useLocation, useNavigate, useParams } from "react-router-dom";
 import { ParamsEnum } from "../../../enums/params";
 import { useObjectToEdit } from "../../../zustand/ObjectToEditState";
 
@@ -19,9 +18,12 @@ import { Question } from "../../../types/Item";
 import BaseForm from "./Model/Malty/Form";
 import ModelForm from "./Model/ModelForm";
 import { toast } from "react-toastify";
-const AcceptModal = lazy(() => import("./Model/AcceptModal"));
+import { Form, Formik } from "formik";
+import { MdOutlineArrowForwardIos } from "react-icons/md";
 
 const AddPage: React.FC = () => {
+  const location = useLocation();
+
   const { mutateAsync,isLoading:LoadingAsync } = useAddQuestionAsync();
   const { mutate, isLoading, isSuccess } = useAddQuestion();
   const { isBseQuestion, setTagsSearch, objectToEdit, setSuccess } =
@@ -30,12 +32,7 @@ const AddPage: React.FC = () => {
   const [t] = useTranslation();
   const { subject_id, lesson_id } = useParams<ParamsEnum>();
 
-  console.log(objectToEdit, "objectToEdit");
+  const handleSubmit = ( values: any) => {
-
-  const handleSubmit = (
-    values: any,
-    { resetForm }: { resetForm: () => void },
-  ) => {
     const DataToSend = structuredClone(values);
     setTagsSearch(null);
     console.log(1);
@@ -95,17 +92,6 @@ const AddPage: React.FC = () => {
         };
       });
 
-      if (answers?.length > 0) {
-        const isValidAnswers = answers?.some(
-          (answer: any) => answer?.isCorrect === 1,
-        );
-        console.log(!isValidAnswers);
-
-        if (!isValidAnswers) {
-          toast.error(t("validation.at_least_one_answer_should_be_correct"));
-          return;
-        }
-      }
 
       const NewQuestion = {
         ...values,
@@ -122,14 +108,62 @@ const AddPage: React.FC = () => {
     }
   };
 
+
+  const handleValidateSingleQuestion = (values:any)=>{
+      const haveMoreThanOneAnswer =  values?.answers?.length > 1;      
+      const haveOneAnswerRight = haveMoreThanOneAnswer && values?.answers?.some((item:any)=> item?.isCorrect === 1 || item.isCorrect === true )
+      if(!haveMoreThanOneAnswer){
+          toast.error(t("validation.it_should_have_more_than_one_answers")) ;
+          return false ;
+      }
+      if(!haveOneAnswerRight){
+        toast.error(t("validation.it_should_have_more_than_one_correct_answers")) ;
+        return false ;
+    }
+      
+  }
+
+  const handleValidateBaseQuestion = (values: any) => {  
+    const haveAnswers = values?.Questions?.every((Question: any, QuestionsIndex: number) => {
+      const answers = Question?.answers;
+        const haveAnswers = answers?.length > 0;
+      const haveMoreThanOneAnswer = haveAnswers && answers?.length > 1;
+      const haveOneAnswerRight =
+        haveMoreThanOneAnswer && answers?.some((item: any) => item?.isCorrect === 1 || item.isCorrect === true);
+  
+      if (!haveAnswers) {
+        toast.error(t("validation.it_should_have_more_than_one_answers"));
+        return false;
+      }
+  
+      if (!haveMoreThanOneAnswer) {
+        toast.error(t("validation.it_should_have_more_than_one_answers"));
+        return false; 
+      }
+  
+      if (!haveOneAnswerRight) {
+        toast.error(t("validation.it_should_have_more_than_one_correct_answers"));
+        return false;
+      }
+  
+      return true; 
+    });
+  
+    console.log(haveAnswers, "haveAnswers");
+  };
+  
   const navigate = useNavigate();
 
+  const handleNavigateToPage = () => {
+    const cleanedUrl = location.pathname?.replace("/Question/add", "");
+    navigate(cleanedUrl);
+  };
   const handleCancel = () => {
     navigate(-1);
   };
-  const Loading = LoadingAsync || isLoading
+  const Loading = LoadingAsync || isLoading;
+  
   useEffect(() => {
-    console.log("all api success");
     if (isSuccess) {
       setSuccess(true);
     }
@@ -137,19 +171,32 @@ const AddPage: React.FC = () => {
 
   if (isBseQuestion) {
     return (
+      
+      <div className="QuestionPractical">
+      <header>
+      <MdOutlineArrowForwardIos onClick={handleNavigateToPage} />  {t("header.add_new_question")}
+      </header>
+
       <div className="exercise_add">
-        <FormikForm
+        <Formik
-          handleSubmit={handleSubmit}
+        onSubmit={handleSubmit}
-          initialValues={getInitialValuesBase(objectToEdit)}
+        initialValues={getInitialValuesBase({} as any)}
-          validationSchema={getValidationSchemaBase}
+        validationSchema={getValidationSchemaBase}
+        enableReinitialize
         >
+            {({ values,handleSubmit }) => (
+
+<Form className="w-100">
           <main className="w-100 exercise_add_main">
             <Header />
             <BaseForm />
 
             <div className="exercise_add_buttons">
               <div onClick={handleCancel}>{t("practical.back")}</div>
-              <button disabled={Loading} className="relative" type="submit">
+              <button disabled={Loading} className="relative" type="submit" 
+               onClick={()=>{handleValidateBaseQuestion(values) ;handleSubmit(values)}}
+               onSubmit={()=>{handleValidateBaseQuestion(values) ;handleSubmit(values) }}
+              >
                 {t("practical.add")}
 
                 {Loading && (
@@ -160,41 +207,61 @@ const AddPage: React.FC = () => {
               </button>
             </div>
           </main>
-        </FormikForm>
+          </Form>
-        <Suspense fallback={<Spin />}>
+            )}
-          <AcceptModal />
+        </Formik>
-        </Suspense>
+   
       </div>
+      </div>
+
     );
   }
+
   return (
-    <div className="exercise_add">
-      <FormikForm
-        handleSubmit={handleSubmit}
-        initialValues={getInitialValues(objectToEdit)}
-        validationSchema={getValidationSchema}
-      >
-        <main className="w-100 exercise_add_main">
-          <Header />
-          <ModelForm />
 
-          <div className="exercise_add_buttons">
+  <div className="QuestionPractical">
-            <div onClick={handleCancel}>{t("practical.back")}</div>
+        <header>
-            <button disabled={Loading} className="relative" type="submit">
+        <MdOutlineArrowForwardIos onClick={handleNavigateToPage} />  {t("header.add_new_question")}
-              {t("practical.add")}
+        </header>
+<div className="exercise_add">
+     <Formik
+  enableReinitialize={true}
+  initialValues={getInitialValues({} as any)}
+  validationSchema={getValidationSchema}
+  onSubmit={(values) => {
+    handleSubmit(values); 
+  }}
+>
+  {({ values,handleSubmit }) => (
+    <Form className="w-100">
+      <main className="w-100 exercise_add_main">
+        <Header />
+        <ModelForm />
 
-              {Loading && (
+        <div className="exercise_add_buttons">
-                <span className="Spinier_Div">
+          <div onClick={handleCancel}>{t("practical.back")}</div>
-                  <Spin />
+          <button
-                </span>
+            disabled={Loading}
-              )}
+            className="relative"
-            </button>
+            onClick={()=>{handleValidateSingleQuestion(values) ;handleSubmit(values)}}
-          </div>
+            onSubmit={()=>{handleValidateSingleQuestion(values) ;handleSubmit(values) }}
-        </main>
+            type="submit"
-      </FormikForm>
+          >
-      <Suspense fallback={<Spin />}>
+            {t("practical.add")}
-        <AcceptModal />
+
-      </Suspense>
+            {Loading && (
+              <span className="Spinier_Div">
+                <Spin />
+              </span>
+            )}
+          </button>
+        </div>
+      </main>
+    </Form>
+  )}
+</Formik>
+ 
+    </div>
     </div>
   );
 };

src/Pages/Admin/question/EditPage.tsx

@@ -1,13 +1,12 @@
 import React, { useEffect } from "react";
 import { Modal, Spin } from "antd";
-import FormikForm from "../../../Layout/Dashboard/FormikFormModel";
 import {
   getInitialValues,
   getValidationSchema,
   getInitialValuesBase,
   getValidationSchemaBase,
   processTags,
-} from "./Model/formUtil";
+} from "./formUtil";
 import {
   useAddQuestion,
   useDeleteQuestion,
@@ -25,6 +24,8 @@ import BaseForm from "./Model/Malty/Form";
 import { Question } from "../../../types/Item";
 import { toast } from "react-toastify";
 import { deletePathSegments } from "../../../utils/deletePathSegments";
+import { Form, Formik } from "formik";
+import { MdOutlineArrowForwardIos } from "react-icons/md";
 
 const EditPage: React.FC = () => {
   const { subject_id, lesson_id, question_id } = useParams<ParamsEnum>();
@@ -187,6 +188,56 @@ const EditPage: React.FC = () => {
   };
 
 
+  const handleValidateSingleQuestion = (values:any)=>{
+    const haveMoreThanOneAnswer =  values?.answers?.length > 1;      
+    const haveOneAnswerRight = haveMoreThanOneAnswer && values?.answers?.some((item:any)=> item?.isCorrect === 1 || item.isCorrect === true )
+
+    if(!haveMoreThanOneAnswer){
+        toast.error(t("validation.it_should_have_more_than_one_answers")) ;
+        return false ;
+    }
+    if(!haveOneAnswerRight){
+      toast.error(t("validation.it_should_have_more_than_one_correct_answers")) ;
+      return false ;
+  }
+    
+}
+
+const handleValidateBaseQuestion = (values: any) => {  
+  const haveAnswers = values?.Questions?.every((Question: any, QuestionsIndex: number) => {
+    const answers = Question?.answers;
+      const haveAnswers = answers?.length > 0;
+    const haveMoreThanOneAnswer = haveAnswers && answers?.length > 1;
+    const haveOneAnswerRight =
+      haveMoreThanOneAnswer && answers?.some((item: any) => item?.isCorrect === 1 || item.isCorrect === true);
+
+    if (!haveAnswers) {
+      toast.error(t("validation.it_should_have_more_than_one_answers"));
+      return false;
+    }
+
+    if (!haveMoreThanOneAnswer) {
+      toast.error(t("validation.it_should_have_more_than_one_answers"));
+      return false; 
+    }
+
+    if (!haveOneAnswerRight) {
+      toast.error(t("validation.it_should_have_more_than_one_correct_answers"));
+      return false;
+    }
+
+    return true; 
+  });
+
+  console.log(haveAnswers, "haveAnswers");
+};
+
+
+const handleNavigateToPage = () => {
+  const cleanedUrl = location.pathname.replace(/\/Question\/\d+$/, "");
+  navigate(cleanedUrl);
+};
+
   useEffect(() => {
     if (isSuccess) {
       toast.success(t("validation.the_possess_done_successful"));
@@ -201,13 +252,24 @@ const EditPage: React.FC = () => {
   }
   if (objectToEdit?.isBase) {
     return (
+
+      
+    <div className="QuestionPractical">
+    <header>
+    <MdOutlineArrowForwardIos onClick={handleNavigateToPage} />  {t("header.edit_question")}
+    </header>
+
       <div className="exercise_add">
-        <FormikForm
+             <Formik
-          handleSubmit={handleSubmit}
+        onSubmit={handleSubmit}
-          initialValues={getInitialValuesBase(objectToEdit)}
+        initialValues={getInitialValuesBase(objectToEdit)}
-          validationSchema={getValidationSchemaBase}
+        validationSchema={getValidationSchemaBase}
+        enableReinitialize
         >
-          <main className="w-100 exercise_add_main">
+            {({ values,handleSubmit }) => (
+
+<Form className="w-100">
+<main className="w-100 exercise_add_main">
             {/* <Header/> */}
             <header className="exercise_add_header mb-4">
               <div>
@@ -218,8 +280,10 @@ const EditPage: React.FC = () => {
             <BaseForm />
             <div className="exercise_add_buttons">
               <div onClick={handleCancel}>{t("practical.back")}</div>
-              <button disabled={Loading} className="relative" type="submit">
+              <button disabled={Loading} className="relative" type="submit" 
-                {t("practical.edit")}
+               onClick={()=>{handleValidateBaseQuestion(values) ;handleSubmit(values)}}
+               onSubmit={()=>{handleValidateBaseQuestion(values) ;handleSubmit(values) }}
+              >                {t("practical.edit")}
 
                 {Loading && (
                   <span className="Spinier_Div">
@@ -229,19 +293,35 @@ const EditPage: React.FC = () => {
               </button>
             </div>
           </main>
-        </FormikForm>
+ </Form>
+            )}
+        </Formik>
+
+      </div>
       </div>
     );
   }
 
+
   return (
+
+    <div className="QuestionPractical">
+      <header>
+      <MdOutlineArrowForwardIos onClick={handleNavigateToPage} />  {t("header.edit_question")}
+      </header>
     <div className="exercise_add">
-      <FormikForm
+
-        handleSubmit={handleSubmit}
+<Formik
-        initialValues={getInitialValues(objectToEdit)}
+  enableReinitialize={true}
-        validationSchema={getValidationSchema}
+  initialValues={getInitialValues(objectToEdit)}
-      >
+  validationSchema={getValidationSchema}
-        <main className="w-100 exercise_add_main">
+  onSubmit={(values) => {
+    handleSubmit(values); 
+  }}
+>
+  {({ values,handleSubmit }) => (
+    <Form className="w-100">
+  <main className="w-100 exercise_add_main">
           {/* <Header/> */}
           <header className="exercise_add_header mb-4">
             <div>
@@ -252,8 +332,13 @@ const EditPage: React.FC = () => {
           <ModelForm />
           <div className="exercise_add_buttons">
             <div onClick={handleCancel}>{t("practical.back")}</div>
-            <button disabled={Loading} className="relative" type="submit">
+            <button
-              {t("practical.edit")}
+            disabled={Loading}
+            className="relative"
+            onClick={()=>{handleValidateSingleQuestion(values) ;handleSubmit(values)}}
+            onSubmit={()=>{handleValidateSingleQuestion(values) ;handleSubmit(values) }}
+            type="submit"
+          >              {t("practical.edit")}
 
               {Loading && (
                 <span className="Spinier_Div">
@@ -263,8 +348,14 @@ const EditPage: React.FC = () => {
             </button>
           </div>
         </main>
-      </FormikForm>
+
+</Form>
+  )}
+</Formik>
+ 
     </div>
+    </div>
+
   );
 };
 

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

@@ -1,57 +0,0 @@
-import React from "react";
-import { Modal } from "antd";
-import { useModalState } from "../../../../zustand/Modal";
-import { ModalEnum } from "../../../../enums/Model";
-import { useTranslation } from "react-i18next";
-import { useNavigate } from "react-router-dom";
-import { QUESTION_OBJECT_KEY } from "../../../../config/AppKey";
-
-const AcceptModal: React.FC = () => {
-  const { isOpen, setIsOpen } = useModalState((state) => state);
-  const navigate = useNavigate();
-
-  const handleSubmit = () => {
-    localStorage.removeItem(QUESTION_OBJECT_KEY);
-    console.log("Handle submit clicked");
-    setIsOpen("");
-
-    navigate(-1);
-  };
-
-  const handleCancel = () => {
-    setIsOpen("");
-  };
-
-  const [t] = useTranslation();
-  return (
-    <>
-      <Modal
-        className="ModalForm"
-        centered
-        width={"40vw"}
-        footer={null}
-        open={isOpen === ModalEnum?.QUESTION_ACCEPT}
-        onCancel={handleCancel}
-      >
-        <header> {t("practical.accept_back")}</header>
-
-        <main className="main_modal">
-          <div className="ValidationField w-100 mb-5">
-            <label className="text h1 ">
-              {t(
-                "practical.Are you sure you want to go back and not save any changes?",
-              )}{" "}
-            </label>
-          </div>
-
-          <div className="buttons">
-            <div onClick={handleCancel}>{t("practical.cancel")}</div>
-            <div onClick={handleSubmit}>{t("practical.accept")}</div>
-          </div>
-        </main>
-      </Modal>
-    </>
-  );
-};
-
-export default AcceptModal;

src/Pages/Admin/question/Model/Field/ChoiceFields.tsx

@@ -39,6 +39,7 @@ const ChoiceFields = ({ index, data }: { index: number; data: Choice }) => {
           name={index}
           id={`choice_${index + 1}`}
           type="TextArea"
+          
         />
 
         <ImageBoxField name={`answers.${index}.content_image`} />
@@ -50,11 +51,11 @@ const ChoiceFields = ({ index, data }: { index: number; data: Choice }) => {
             name={index}
             type="Checkbox"
           />
-          <p className="delete_question_options">
+          <p className="delete_question_options" onClick={handleDeleteChoice}>
             {t("header.delete_choice")}
             <GoTrash
               className="trash_icon"
-              onClick={handleDeleteChoice}
+              
               size={17}
             />
           </p>
@@ -66,8 +67,10 @@ const ChoiceFields = ({ index, data }: { index: number; data: Choice }) => {
           placeholder="_"
           name={`answers.${index}.hint`}
           label="hint"
-          type="text"
+          type="TextArea"
-          style={{ width: "100%" }}
+          style={{ width: "100%" , height: 60,resize:"none" }}
+          showCount={false}
+          autoSize={{ minRows: 2, maxRows: 10 }} 
         />
       </div>
     </>

src/Pages/Admin/question/Model/Field/Choices.tsx

@@ -36,12 +36,21 @@ const Choices = () => {
   };
 
   return (
-    <DragDropContext onDragEnd={handleDragEnd}>
+    <>
+ {formik?.values?.answers?.map((item: Choice, index: number) => {
+              return (
+                    <div
+                    >
+                      <ChoiceFields index={index} data={item} />
+                    </div>
+              );
+            })}
+
+    {/* <DragDropContext onDragEnd={handleDragEnd}>
       <Droppable droppableId="choices">
         {(provided) => (
           <div {...provided.droppableProps} ref={provided.innerRef}>
             {formik?.values?.answers?.map((item: Choice, index: number) => {
-              // Use a unique identifier for draggableId
               const draggableId = item.name
                 ? item.name.toString()
                 : `item-${index}`;
@@ -67,11 +76,12 @@ const Choices = () => {
                 </Draggable>
               );
             })}
-            {provided.placeholder} {/* Placeholder for spacing */}
+            {provided.placeholder} 
           </div>
         )}
       </Droppable>
-    </DragDropContext>
+    </DragDropContext> */}
+    </>
   );
 };
 

src/Pages/Admin/question/Model/Malty/ChoiceField/CheckboxField.tsx

@@ -1,7 +1,6 @@
 import React from "react";
-import useFormField from "../../../../../../Hooks/useFormField";
+import { Checkbox } from "antd";
-import { Checkbox, Form } from "antd";
+import {  useFormikContext } from "formik";
-import { useFormik, useFormikContext } from "formik";
 import { useTranslation } from "react-i18next";
 const CheckboxField = ({
   name,

src/Pages/Admin/question/Model/Malty/ChoiceField/ChoiceFields.tsx

@@ -6,10 +6,7 @@ import { useTranslation } from "react-i18next";
 import { getCharFromNumber } from "../../../../../../utils/getCharFromNumber";
 import CheckboxField from "./CheckboxField";
 import TextField from "./TextField";
-import File from "./File";
-import { FaTrash } from "react-icons/fa";
 import { toast } from "react-toastify";
-import HintField from "./HintField";
 import ImageBoxField from "../../../../../../Components/CustomFields/ImageBoxField/ImageBoxField";
 import { GoTrash } from "react-icons/go";
 
@@ -72,11 +69,11 @@ const ChoiceFields = ({
             type="Checkbox"
             parent_index={parent_index}
           />
-          <p className="delete_question_options">
+          <p className="delete_question_options" onClick={handleDeleteChoice}>
             {t("header.delete_choice")}
             <GoTrash
               className="trash_icon"
-              onClick={handleDeleteChoice}
+              
               size={17}
             />
           </p>
@@ -89,8 +86,10 @@ const ChoiceFields = ({
           placeholder="_"
           name={`Questions.${parent_index}.answers.${index}.hint`}
           label="hint"
-          type="text"
+          type="TextArea"
-          style={{ width: "100%" }}
+          style={{ width: "100%" , height: 60,resize:"none" }}
+          showCount={false}
+          autoSize={{ minRows: 2, maxRows: 10 }} 
         />
       </div>
     </>

src/Pages/Admin/question/Model/Malty/ChoiceField/Choices.tsx

@@ -44,7 +44,28 @@ const Choices = ({ parent_index }: { parent_index: number }) => {
 
   return (
     <>
-      <DragDropContext onDragEnd={handleDragEnd}>
+
+            <div>
+              {(
+                (formik?.values as any)?.Questions?.[parent_index]?.answers ||
+                []
+              ).map((item: Choice, index: number) => {
+                return (
+                      <div
+      
+                      >
+                        <ChoiceFields
+                          key={index}
+                          parent_index={parent_index}
+                          index={index}
+                          data={item}
+                        />
+                      </div>
+                );
+              })}
+
+            </div>
+      {/* <DragDropContext onDragEnd={handleDragEnd}>
         <Droppable droppableId="choices">
           {(provided) => (
             <div {...provided.droppableProps} ref={provided.innerRef}>
@@ -87,7 +108,7 @@ const Choices = ({ parent_index }: { parent_index: number }) => {
             </div>
           )}
         </Droppable>
-      </DragDropContext>
+      </DragDropContext> */}
     </>
   );
 };

src/Pages/Admin/question/Model/Malty/ChoiceField/File.tsx

@@ -1,88 +0,0 @@
-import { Button, Upload, UploadFile } from "antd";
-import useFormField from "../../../../../../Hooks/useFormField";
-import { UploadOutlined } from "@ant-design/icons";
-import { useMemo } from "react";
-
-const File = ({
-  name,
-  label,
-  onChange,
-  isDisabled,
-  placholder,
-  className,
-  parent_index,
-  props,
-}: any) => {
-  const newName = `Questions[${parent_index}].answers[${name}].answer_image`;
-
-  const { formik, t, isError, errorMsg } = useFormField(newName, props);
-  let imageUrl =
-    formik?.values?.Questions?.[parent_index]?.answers[name]?.answer_image ??
-    null;
-  // console.log(imageUrl);
-
-  const fileList: UploadFile[] = useMemo(() => {
-    if (!imageUrl) return [];
-
-    return [
-      typeof imageUrl === "string"
-        ? {
-            uid: "-1",
-            name: "uploaded-image",
-            status: "done",
-            url: imageUrl,
-            thumbUrl: imageUrl,
-          }
-        : {
-            uid: imageUrl.uid || "-1",
-            name: imageUrl.name || "uploaded-image",
-            status: "done",
-            originFileObj: imageUrl,
-          },
-    ];
-  }, [imageUrl]);
-  // console.log(1);
-
-  const FilehandleChange = (value: any) => {
-    // console.log(value,"filevalue");
-    if (value.fileList.length === 0) {
-      formik.setFieldValue(newName, null);
-    } else {
-      formik.setFieldValue(
-        `Questions[${parent_index}].answers[${name}].answer_image`,
-        value?.file?.originFileObj,
-      );
-    }
-  };
-  const customRequest = async ({ onSuccess, no_label, label_icon }: any) => {
-    onSuccess();
-  };
-  return (
-    <div className={`ValidationField upload_image_button ${className ?? ""} `}>
-      <label htmlFor={name} className="text">
-        {t(`input.${label || name}`)}
-      </label>
-
-      <Upload
-        disabled={isDisabled}
-        listType="picture"
-        maxCount={1}
-        fileList={[...fileList]}
-        onChange={onChange || FilehandleChange}
-        customRequest={customRequest}
-        className={` w-100`}
-      >
-        <Button
-          className={isError ? "isError w-100 " : " w-100"}
-          icon={<UploadOutlined />}
-        >
-          {placholder ?? t("input.Click_to_upload_the_image")}
-        </Button>
-        <div className="Error_color"> {isError ? "required" : ""}</div>
-        {errorMsg}
-      </Upload>
-    </div>
-  );
-};
-
-export default File;

src/Pages/Admin/question/Model/Malty/ChoiceField/HintField.tsx

@@ -1,54 +0,0 @@
-import { Form, Input } from "antd";
-import React from "react";
-import useFormField from "../../../../../../Hooks/useFormField";
-import { MdOutlineEdit } from "react-icons/md";
-import { Field } from "formik";
-
-const HintField = ({
-  name,
-  label,
-  label2,
-  placeholder,
-  isDisabled,
-  onChange,
-  props,
-  parent_index,
-  id,
-  className,
-}: any) => {
-  const newName = `Questions[${parent_index}].answers[${name}].hint`;
-
-  const { formik, isError, errorMsg, t } = useFormField(newName, props);
-  const TextFilehandleChange = (
-    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
-  ) => {
-    // console.log('Change:', e.target.value);
-    formik.setFieldValue(newName, e.target.value);
-  };
-
-  return (
-    <div className={`ValidationField w-100 ${className ?? ""} `}>
-      <label htmlFor={name} className="text">
-        {label2 ? label2 : t(`input.${label ? label : name}`)}
-      </label>
-      <Form.Item
-        hasFeedback
-        validateStatus={isError ? "error" : ""}
-        help={isError ? errorMsg : ""}
-      >
-        <Field
-          as={Input}
-          placeholder={t(`input.${placeholder ? placeholder : name}`)}
-          name={newName}
-          disabled={isDisabled}
-          size="large"
-          onChange={onChange || TextFilehandleChange}
-          style={{ width: 200 }}
-          id={id}
-        />
-      </Form.Item>
-    </div>
-  );
-};
-
-export default React.memo(HintField);

src/Pages/Admin/question/Model/Malty/Form.tsx

@@ -86,6 +86,14 @@ const Form = () => {
     },
   );
 
+
+  useEffect(() => {
+    if (Success) {
+      formik.resetForm()
+      setSuccess(false);
+    }
+  }, [Success]);
+
   return (
     <Row className="w-100 exercise_form_container">
       <div className="exercise_form">
@@ -99,7 +107,7 @@ const Form = () => {
 
         <div></div>
       </div>
-      <div className=" flex "></div>
+      <div className="flex"></div>
 
       {((formik?.values as any)?.Questions || [])?.map(
         (item: Choice, parent_index: number) => {
@@ -132,8 +140,10 @@ const Form = () => {
                   placeholder="_"
                   name={`Questions.${parent_index}.hint`}
                   label="hint_question"
-                  type="text"
+                  type="TextArea"
-                  style={{ width: "100%" }}
+          style={{ width: "100%" , height: 60,resize:"none" }}
+          autoSize={{ minRows: 2, maxRows: 10 }} 
+          showCount={false}
                 />
                 <MaltySelectTag parent_index={parent_index} />
               </div>

src/Pages/Admin/question/Model/Malty/QuestionFIeld/File.tsx

@@ -1,85 +0,0 @@
-import { Button, Upload, UploadFile } from "antd";
-import useFormField from "../../../../../../Hooks/useFormField";
-import { UploadOutlined } from "@ant-design/icons";
-import { useMemo } from "react";
-
-const File = ({
-  name,
-  label,
-  onChange,
-  isDisabled,
-  placholder,
-  className,
-  props,
-}: any) => {
-  const newName = `Questions[${name}].image`;
-
-  const { formik, t, isError, errorMsg } = useFormField(newName, props);
-  let imageUrl = formik?.values?.Questions?.[name]?.image ?? null;
-  // console.log(imageUrl);
-
-  const fileList: UploadFile[] = useMemo(() => {
-    if (!imageUrl) return [];
-
-    return [
-      typeof imageUrl === "string"
-        ? {
-            uid: "-1",
-            name: "uploaded-image",
-            status: "done",
-            url: imageUrl,
-            thumbUrl: imageUrl,
-          }
-        : {
-            uid: imageUrl.uid || "-1",
-            name: imageUrl.name || "uploaded-image",
-            status: "done",
-            originFileObj: imageUrl,
-          },
-    ];
-  }, [imageUrl]);
-  // console.log(1);
-
-  const FilehandleChange = (value: any) => {
-    // console.log(value,"filevalue");
-    if (value.fileList.length === 0) {
-      formik.setFieldValue(newName, null);
-    } else {
-      formik.setFieldValue(
-        `Questions[${name}].image`,
-        value?.file?.originFileObj,
-      );
-    }
-  };
-  const customRequest = async ({ onSuccess, no_label, label_icon }: any) => {
-    onSuccess();
-  };
-  return (
-    <div className={`ValidationField upload_image_button ${className ?? ""} `}>
-      <label htmlFor={name} className="text">
-        {t(`input.${label || name}`)}
-      </label>
-
-      <Upload
-        disabled={isDisabled}
-        listType="picture"
-        maxCount={1}
-        fileList={[...fileList]}
-        onChange={onChange || FilehandleChange}
-        customRequest={customRequest}
-        className={` w-100`}
-      >
-        <Button
-          className={isError ? "isError w-100 " : " w-100"}
-          icon={<UploadOutlined />}
-        >
-          {placholder ?? t("input.Click_to_upload_the_image")}
-        </Button>
-        <div className="Error_color"> {isError ? "required" : ""}</div>
-        {errorMsg}
-      </Upload>
-    </div>
-  );
-};
-
-export default File;

src/Pages/Admin/question/Model/Malty/QuestionFIeld/HintField.tsx

@@ -1,52 +0,0 @@
-import { Form, Input } from "antd";
-import React from "react";
-import useFormField from "../../../../../../Hooks/useFormField";
-import { MdOutlineEdit } from "react-icons/md";
-import { Field } from "formik";
-
-const HintField = ({
-  name,
-  label,
-  label2,
-  placeholder,
-  isDisabled,
-  onChange,
-  props,
-  id,
-  className,
-}: any) => {
-  const newName = `Questions[${name}].hint`;
-  const { formik, isError, errorMsg, t } = useFormField(newName, props);
-  const TextFilehandleChange = (
-    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
-  ) => {
-    // console.log('Change:', e.target.value);
-    formik.setFieldValue(newName, e.target.value);
-  };
-
-  return (
-    <div className={`ValidationField w-100 ${className ?? ""} `}>
-      <label htmlFor={name} className="text">
-        {label2 ? label2 : t(`input.${label ? label : name}`)}
-      </label>
-      <Form.Item
-        hasFeedback
-        validateStatus={isError ? "error" : ""}
-        help={isError ? errorMsg : ""}
-      >
-        <Field
-          as={Input}
-          placeholder={t(`input.${placeholder ? placeholder : name}`)}
-          name={newName}
-          disabled={isDisabled}
-          size="large"
-          onChange={onChange || TextFilehandleChange}
-          style={{ width: 200 }}
-          id={id}
-        />
-      </Form.Item>
-    </div>
-  );
-};
-
-export default React.memo(HintField);

src/Pages/Admin/question/Model/Malty/QuestionFIeld/QuestionFIeld.tsx

@@ -1,16 +1,10 @@
 import React, { useEffect } from "react";
 import { Choice } from "../../../../../../types/Item";
-import ValidationField from "../../../../../../Components/ValidationField/ValidationField";
 import { useFormikContext } from "formik";
 import { useTranslation } from "react-i18next";
 import { getCharFromNumber } from "../../../../../../utils/getCharFromNumber";
 import TextField from "./TextField";
-import File from "./File";
-import { FaTrash } from "react-icons/fa";
 import { useObjectToEdit } from "../../../../../../zustand/ObjectToEditState";
-import { toast } from "react-toastify";
-import CheckboxField from "./CheckboxField";
-import HintField from "./HintField";
 import ImageBoxField from "../../../../../../Components/CustomFields/ImageBoxField/ImageBoxField";
 import { GoTrash } from "react-icons/go";
 
@@ -53,12 +47,12 @@ const QuestionFIeld = ({ index, data }: { index: number; data: Choice }) => {
 
           <ImageBoxField name={`Questions.${index}.content_image`} />
 
-          <div className="answer_status">
+          <div className="answer_status"  onClick={handleDeleteQuestion}>
             <p className="delete_question_options">
               {t("header.delete_question")}
               <GoTrash
                 className="trash_icon"
-                onClick={handleDeleteQuestion}
+               
                 size={17}
               />
             </p>

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

@@ -1,107 +0,0 @@
-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 = ({ parent_index }: { parent_index: number }) => {
-  const formik = useFormikContext<any>();
-  const [t] = useTranslation();
-  const { TagsSearch, setTagsSearch, currentTag, currentParentIndex } =
-    useObjectToEdit();
-  const { data } = useGetAllTag({
-    name: TagsSearch,
-  });
-  const suggests = data?.data;
-
-  const handleAddChoice = () => {
-    const length = formik?.values?.Questions?.[parent_index]?.tags.length;
-    const lastElement =
-      formik?.values?.Questions?.[parent_index]?.tags[length - 1]?.name;
-    setTagsSearch(null);
-
-    if (lastElement !== "") {
-      formik.setFieldValue(`Questions.[${parent_index}].tags`, [
-        ...((formik?.values as any)?.Questions?.[parent_index]?.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?.Questions?.[parent_index]?.tags?.length;
-    console.log(currentTag);
-
-    formik.setFieldValue(`Questions.[${parent_index}].tags[${currentTag}]`, {
-      ...item,
-      key: length,
-    });
-    setTagsSearch(null);
-  };
-
-  // console.log(formik?.values?.tags?.length);
-
-  return (
-    <div className="DynamicTags">
-      {formik?.values?.Questions?.[parent_index]?.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)?.Questions?.[parent_index]
-              ?.tags as any[]) || []
-          ).map((item: any, index: number) => {
-            return (
-              <Tag
-                key={index}
-                parent_index={parent_index}
-                index={index}
-                data={item}
-              />
-            );
-          })}
-        </div>
-
-        {formik?.values?.Questions?.[parent_index]?.tags?.length > 0 && (
-          <p className="add_new_button">
-            <FaCirclePlus onClick={handleAddChoice} size={20} />
-          </p>
-        )}
-      </div>
-      {TagsSearch && currentParentIndex === parent_index && (
-        <div className="suggests">
-          {suggests?.map((item: any, index: number) => {
-            console.log(currentParentIndex === parent_index);
-
-            return (
-              <div
-                className="suggested"
-                key={index}
-                onClick={() => handleChoice(item)}
-              >
-                {item?.name}
-              </div>
-            );
-          })}
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default DynamicTags;

src/Pages/Admin/question/Model/Malty/Tags/MaltySelectTag.tsx

@@ -41,14 +41,10 @@ const MaltySelectTag = ({ parent_index }: { parent_index: number }) => {
       ? [{ id: searchValue, name: searchValue }]
       : [];
 
-  console.log(options);
   const value =
     formik?.values?.Questions[parent_index]?.tags?.map(
       (item: any) => item?.id ?? item,
     ) ?? [];
-  console.log(formik?.values?.Questions[parent_index]);
-
-  console.log(value);
 
   const AllOptions = [...options, ...additionalData];
 

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

@@ -1,80 +0,0 @@
-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,
-  parent_index,
-}: {
-  data: any;
-  index: number;
-  parent_index: number;
-}) => {
-  const inputRef = useRef<HTMLInputElement>(null);
-  const timeoutRef = useRef<NodeJS.Timeout | null>(null);
-  const DEBOUNCE_DELAY = 500;
-  const formik = useFormikContext<any>();
-  const { setTagsSearch, setCurrentTag, setCurrentParentIndex } =
-    useObjectToEdit();
-  console.log(formik?.values?.Questions);
-
-  useEffect(() => {
-    if (inputRef.current) {
-      inputRef.current.style.width = `${(formik?.values?.Questions?.[parent_index]?.tags[index]?.name?.length + 1) * 8}px`;
-    }
-  }, [formik?.values?.Questions?.[parent_index]?.tags[index]?.name]);
-
-  const handleEditInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    // console.log(e.target.value);
-
-    formik.setFieldValue(`Questions.[${parent_index}].tags[${index}]`, {
-      key: parent_index,
-      name: e.target.value,
-      id: `${parent_index}_key`,
-    });
-    setCurrentTag(index);
-    setCurrentParentIndex(parent_index);
-    if (timeoutRef.current) {
-      clearTimeout(timeoutRef.current);
-    }
-
-    timeoutRef.current = setTimeout(() => {
-      setTagsSearch(e.target.value);
-    }, DEBOUNCE_DELAY);
-  };
-
-  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(`Questions.[${parent_index}].tags`, currentTags);
-
-    // Reset search state if needed
-    setTagsSearch(null);
-  };
-
-  return (
-    <div className="tag">
-      <input
-        ref={inputRef}
-        className="tagInput"
-        type="text"
-        value={formik?.values?.Questions?.[parent_index]?.tags[index]?.name}
-        onChange={handleEditInputChange}
-      />
-      <FaTrash onClick={handleDeleteChoice} />
-    </div>
-  );
-};
-
-export default Tag;

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

@@ -20,7 +20,7 @@ const Form = () => {
 
   const handleAddChoice = (fromKeyCombination: boolean = false) => {
     formik.setFieldValue("answers", [
-      ...((formik?.values as any)?.answers as Choice[]),
+      ...(formik?.values?.answers ?? []) ,
       {
         content: null,
         content_image: null,
@@ -42,13 +42,12 @@ const Form = () => {
 
   useEffect(() => {
     if (Success) {
-      formik?.setValues({});
+      formik.resetForm()
-      formik.setErrors({});
       setSuccess(false);
-      console.log(formik.errors);
     }
   }, [Success]);
 
+    
   return (
     <Row className="w-100 exercise_form_container">
       <div className="exercise_form">
@@ -62,7 +61,7 @@ const Form = () => {
       </div>
 
       <Choices />
-      {formik?.values?.answers?.length < 5 && (
+      {(formik?.values?.answers === null || formik?.values?.answers === undefined || formik?.values?.answers?.length < 5) && (
         <p className="add_new_button">
           <FaCirclePlus onClick={() => handleAddChoice()} size={23} />{" "}
           {t("header.add_new_choice")}
@@ -75,8 +74,11 @@ const Form = () => {
           placeholder="_"
           name="hint"
           label="hint_question"
-          type="text"
+          type="TextArea"
-          style={{ width: "100%" }}
+          style={{ width: "100%" , height: 60,resize:"none" }}
+          showCount={false}
+          autoSize={{ minRows: 2, maxRows: 10 }} 
+
         />
         <SelectTag />
       </div>

src/Pages/Admin/question/Page.tsx

@@ -11,7 +11,6 @@ import DeleteModels from "../../../Layout/Dashboard/DeleteModels";
 import { ModalEnum } from "../../../enums/Model";
 import { useGetAllSubject } from "../../../api/subject";
 import { useGetAllGrade } from "../../../api/grade";
-import { useGetAllCurriculum } from "../../../api/curriculum";
 import PageHeader from "../../../Layout/Dashboard/PageHeader";
 import { ABILITIES_ENUM } from "../../../enums/abilities";
 import { canAddQuestion } from "../../../utils/hasAbilityFn";
@@ -43,17 +42,15 @@ const TableHeader = () => {
   const unitName = unit?.data?.name ?? "";
   const LessonName = Lesson?.data?.name ?? "";
 
-  useSetPageTitle(
+  useSetPageTitle([
-    t(`page_header.grade`) +
+    {name:`${t(`page_header.home`)}`, path:"/"},
-      " / " +
+    {name:`${t(`page_header.grade`)}`, path:"grade"},
-      ` ${t("header.subject_of_class")} (${gradeName})` +
+    {name:` ${t("header.subject_of_class")} (${gradeName})`, path:`grade/${grade_id}`},
-      " / " +
+    {name:SubjectName, path:`subject/${subject_id}`},
-      SubjectName +
+    {name:unitName, path:`unit/${unit_id}`},
-      " / " +
+    {name:LessonName, path:`lesson/${lesson_id  }`}
-      unitName +
+  ]);
-      " / " +
+
-      LessonName,
-  );
 
   return (
     <div className="TableWithHeader">

src/Pages/Admin/question/Table.tsx

@@ -11,7 +11,7 @@ const App: React.FC = () => {
   const { filterState } = useFilterState();
 
   const response = useGetAllQuestion({
-    lesson_id: lesson_id,
+    lessonsIds: [lesson_id],
     pagination: true,
     ...filterState,
   });

src/Pages/Admin/question/formUtil.ts

@@ -1,12 +1,12 @@
 import * as Yup from "yup";
-import { Question } from "../../../../types/Item";
+import { Question } from "../../../types/Item";
 import { toast } from "react-toastify";
 
 export const getInitialValues = (objectToEdit: Question): any => {
   const tags = objectToEdit?.tags?.map((item: any, index: number) => {
     return { ...item };
   });
-
+  
   return {
     id: objectToEdit?.id ?? null,
     content: objectToEdit?.content ?? "",
@@ -16,7 +16,7 @@ export const getInitialValues = (objectToEdit: Question): any => {
     hint: objectToEdit?.hint ?? null,
     isBase: 0,
     parent_id: objectToEdit?.parent_id ?? "",
-    answers: objectToEdit?.answers ?? [],
+    answers: objectToEdit?.answers ?? null,
     tags: tags ?? [],
   };
 };
@@ -32,6 +32,15 @@ export const getValidationSchema = () => {
         content_image: Yup.string().nullable(),
         isCorrect: Yup.boolean(),
       }),
+    ).min(2).test(
+      "at-least-one-correct",
+      "At least one answer must be correct",
+      (answers: any) => {
+        return answers?.some(
+          (answer: any) =>
+            answer?.isCorrect === true || answer?.isCorrect === 1,
+        );
+      },
     ),
   });
 };
@@ -42,10 +51,18 @@ export const getInitialValuesBase = (objectToEdit: Question): any => {
       id: tag?.id,
       name: tag?.name,
     }));
-    console.log(item, "item");
+    const newAnswers = item?.answers?.map((item:any)=>{
+      return {
+          ...item,
+          content : item?.content ?? null
 
+      }
+    })
+    console.log(newAnswers,"newAnswers");
+    
     return {
       ...item,
+      answer:newAnswers,
       canAnswersBeShuffled: objectToEdit?.canAnswersBeShuffled ? 1 : 0,
       hint: objectToEdit?.hint ?? "",
       isBase: 0,
@@ -53,7 +70,7 @@ export const getInitialValuesBase = (objectToEdit: Question): any => {
     };
   });
 
-  const questions = newQuestions ?? [];
+  const questions = newQuestions ?? [{answers:[]}];
 
   return {
     id: objectToEdit?.id ?? null,
@@ -84,13 +101,12 @@ export const getValidationSchemaBase = () => {
               answer_image: Yup.string().nullable(),
               isCorrect: Yup.boolean(),
             }),
-          )
+          ).min(2)
           .test(
             "at-least-one-correct",
             "At least one answer must be correct",
             (answers: any) => {
-              console.log(answers, "answers");
+              
-
               return answers.some(
                 (answer: any) =>
                   answer.isCorrect === true || answer.isCorrect === 1,
@@ -98,7 +114,7 @@ export const getValidationSchemaBase = () => {
             },
           ),
       }),
-    ),
+    ).min(1),
   });
 };
 

src/Pages/Admin/question/useTableColumns.tsx

@@ -45,19 +45,59 @@ export const useColumns = () => {
     },
     {
       title: `${t("columns.content")}`,
-      dataIndex: "name",
+      dataIndex: "content",
-      key: "name",
+      key: "content",
       align: "center",
       render: (text, record) => record?.content,
       ellipsis: true,
     },
     {
-      title: t("columns.isBase"),
+      title: `${t("columns.hint")}`,
+      dataIndex: "hint",
+      key: "hint",
+      align: "center",
+      render: (text, record) => {
+        
+        return (
+          <>{record?.hint ?? "_"}</>
+        );
+      },
+      ellipsis: true,
+    },
+    {
+      title: `${t("columns.tags")}`,
+      dataIndex: "tags",
+      key: "tags",
+      align: "center",
+      
+      render: (text, record) => {
+        const tags = record?.tags?.map((item:any)=>{
+          return item?.name
+        }) ?? [];         
+        return (
+          <div>
+            {tags.length > 0 ? (
+              tags.map((tag, index) => (
+                <span key={index}>
+                  {tag}
+                  {index < tags.length - 1 && ', '} 
+                </span>
+              ))
+            ) : (
+              <span>_</span>
+            )}
+          </div>
+        );
+      },
+      ellipsis: true,
+    },
+    {
+      title: t("columns.question_type"),
       dataIndex: "isBase",
       key: "isBase",
       align: "center",
       render: (text, record) =>
-        record?.isBase ? t("practical.yes") : t("practical.no"),
+        record?.isBase ? t("columns.base_question") : t("columns.normal_question"),
     },
 
     {

src/Pages/Admin/subject/Table/Page.tsx

@@ -32,11 +32,15 @@ const TableWithHeader = () => {
   });
 
   const gradeName = grade?.data?.name ?? "";
-  useSetPageTitle(
+
-    t(`page_header.grade`) +
+
-      " / " +
+  useSetPageTitle([
-      ` ${t("header.subject_of_class")} (${gradeName})`,
+    {name:`${t(`page_header.home`)}`, path:"/"},
-  );
+    {name:`${t(`page_header.grade`)}`, path:"grade"},
+    {name:` ${t("header.subject_of_class")} (${gradeName})`, path:`grade/${grade_id}`}
+  ]);
+
+
 
   return (
     <div className="TableWithHeader">

src/Pages/Auth/FormField.tsx

@@ -1,19 +1,7 @@
-import React, { useEffect, useState } from "react";
+import { Form, useFormikContext } from "formik";
-import { Form, Field, useFormikContext } from "formik";
+
-import Image from "../../Components/Ui/Image";
-import { Input } from "antd";
-import AuthSelect from "../../Components/Ui/Custom/AuthSelect";
-// import { useGetAllCycle } from "../../api/cycle";
-// import { useGetAllBranch } from "../../api/branch";
-import { useGetAllTerm } from "../../api/term";
-import { FormValues } from "../../types/Auth";
-import {
-  BRANCH_OBJECT_KEY,
-  CYCLE_OBJECT_KEY,
-  TERM_OBJECT_KEY,
-} from "../../config/AppKey";
-import useFormatAuthDataToSelect from "../../utils/useFormatAuthDataToSelect";
 import { useTranslation } from "react-i18next";
+import ValidationField from "../../Components/ValidationField/ValidationField";
 
 type FormFieldType = {
   isLoading: boolean;
@@ -21,26 +9,18 @@ type FormFieldType = {
 
 const FormField = ({ isLoading }: FormFieldType) => {
   const [t] = useTranslation();
+    const {isValid} = useFormikContext();
+    console.log(isValid,"isValid");
+    
   return (
     <Form className="AuthForm">
       {/* <Image style={{background:"#000"}} src="../App/Logo.png" /> */}
       <h2>{t("تسجيل الدخول إلى حسابك")}</h2>
-      <div className="AuthInput">
-        <label className="form-label" htmlFor="username">
-          {t("input.Username")}
-        </label>
-        <Field
-          placeholder={t("input.Username")}
-          as={Input}
-          type="text"
-          id="username"
-          name="username"
-          className="Input"
-          size="large"
-        />
-      </div>
 
-      <div className="AuthInput">
+      <ValidationField name="username" label="username" />
+
+        <ValidationField name="password" label="password" />
+      {/* <div className="AuthInput">
         <label className="form-label" htmlFor="password">
           {t("input.Password")}
         </label>
@@ -53,9 +33,9 @@ const FormField = ({ isLoading }: FormFieldType) => {
           className="passwordInput"
           size="large"
         />
-      </div>
+      </div> */}
 
-      <button disabled={isLoading} type="submit" className="auth_submit_button">
+      <button disabled={ !isValid || isLoading} type="submit" className="auth_submit_button">
         {t("practical.login")}
       </button>
     </Form>

src/Pages/Auth/LoginForm.tsx

@@ -4,7 +4,7 @@ import useAuthState from "../../zustand/AuthState";
 import useNavigateOnSuccess from "../../Hooks/useNavigateOnSuccess";
 import { useLoginAdmin } from "../../api/auth";
 import FormField from "./FormField";
-import { initialValues } from "./formutils";
+import { initialValues, validationSchema } from "./formutils";
 import { FormValues } from "../../types/Auth";
 import { toast } from "react-toastify";
 import { useTranslation } from "react-i18next";
@@ -39,7 +39,7 @@ const LoginForm = () => {
 
   return (
     <div className="LoginForm">
-      <Formik initialValues={initialValues} onSubmit={handelSubmit}>
+      <Formik initialValues={initialValues} onSubmit={handelSubmit} isInitialValid={false}  validationSchema={validationSchema} >
         {(formikProps) => <FormField isLoading={isLoading} />}
       </Formik>
     </div>

src/Pages/Auth/formutils.ts

@@ -2,8 +2,8 @@ import * as Yup from "yup";
 import { FormValues } from "../../types/Auth";
 
 export const validationSchema = Yup.object().shape({
-  username: Yup.string().required("Username is required"),
+  username: Yup.string().required("validation.required"),
-  password: Yup.string().required("Password is required"),
+  password: Yup.string().required("validation.required").min(8,"validation.Password_must_be_at_least_8_characters_long"),
 });
 
 export const initialValues: FormValues = {

src/Pages/Home/Dummy.tsx

@@ -3,6 +3,8 @@ import { useTranslation } from "react-i18next";
 import { ABILITIES_ENUM } from "../../enums/abilities";
 import useSetPageTitle from "../../Hooks/useSetPageTitle";
 import useFilter from "../../Components/FilterField/components/useFilter";
+import { Button, Popconfirm } from "antd";
+import PageTitle from "../../Layout/Dashboard/PageTitle";
 
 const Dummy = () => {
   const [t] = useTranslation();
@@ -10,8 +12,8 @@ const Dummy = () => {
   const { FilterButton, FilterBody } = useFilter();
   return (
     <div className="DummyHomePage">
-      {/* <FilterButton />
+      <PageTitle/>
-      <FilterBody>karim</FilterBody> */}
+ 
     </div>
   );
 };

src/Routes.tsx

@@ -1,5 +1,5 @@
 import { TCrudRoute, TMenuItem } from "./types/App";
-import { FaHome, FaMoneyBill, FaSellcast } from "react-icons/fa";
+import { FaCashRegister, FaHome, FaMoneyBill, FaPaperclip, FaSellcast, FaTag, FaUser } from "react-icons/fa";
 import React from "react";
 
 const Dummy = React.lazy(() => import("./Pages/Home/Dummy"));
@@ -33,6 +33,7 @@ const EditReSeller = React.lazy(
 const User = React.lazy(() => import("./Pages/Admin/User/Page"));
 
 const Param = React.lazy(() => import("./Pages/Admin/Param/Page"));
+const QuestionBank = React.lazy(() => import("./Pages/Admin/QuestionBank/Page"));
 
 /// RESELLER ///
 const Student_Package = React.lazy(
@@ -44,12 +45,14 @@ import { ABILITIES_ENUM, ABILITIES_VALUES_ENUM } from "./enums/abilities";
 import { ParamsEnum } from "./enums/params";
 import { TbCategory } from "react-icons/tb";
 import { UserTypeEnum } from "./enums/UserType";
+import { FaTags } from "react-icons/fa6";
+import { MdGrade } from "react-icons/md";
 
 export const menuItems: TMenuItem[] = [
   {
     header: "page_header.dashboard",
     element: <Dummy />,
-    icon: <TbCategory />,
+    icon: <FaHome />,
     text: "sidebar.dashboard",
     path: "/",
     abilities: ABILITIES_ENUM?.PASS,
@@ -60,7 +63,7 @@ export const menuItems: TMenuItem[] = [
   {
     header: "page_header.grade",
     element: <Grade />,
-    icon: <FaMoneyBill />,
+    icon: <TbCategory />,
     text: "sidebar.grade",
     path: `/${ABILITIES_ENUM?.GRADE}`,
     abilities: ABILITIES_ENUM?.GRADE,
@@ -70,7 +73,7 @@ export const menuItems: TMenuItem[] = [
   {
     header: "page_header.tags",
     element: <Tags />,
-    icon: <FaMoneyBill />,
+    icon: <FaTags />,
     text: "sidebar.tags",
     path: `/${ABILITIES_ENUM?.TAG}`,
     abilities: ABILITIES_ENUM?.TAG,
@@ -78,9 +81,9 @@ export const menuItems: TMenuItem[] = [
     prevPath: 0,
   },
   {
-    header: "page_header.tags",
+    header: "page_header.report",
     element: <Report />,
-    icon: <FaMoneyBill />,
+    icon: <FaPaperclip />,
     text: "sidebar.report",
     path: `/${ABILITIES_ENUM?.Report}`,
     abilities: ABILITIES_ENUM?.Report,
@@ -90,7 +93,7 @@ export const menuItems: TMenuItem[] = [
   {
     header: "page_header.student",
     element: <Student />,
-    icon: <FaMoneyBill />,
+    icon: <MdGrade />,
     text: "sidebar.student",
     path: `/${ABILITIES_ENUM?.STUDENT}`,
     abilities: ABILITIES_ENUM?.STUDENT,
@@ -100,7 +103,7 @@ export const menuItems: TMenuItem[] = [
   {
     header: "page_header.reSeller",
     element: <ReSeller />,
-    icon: <FaSellcast />,
+    icon: <FaCashRegister />,
     text: "sidebar.reseller",
     path: `/${ABILITIES_ENUM?.RE_SELLER}`,
     abilities: ABILITIES_ENUM?.RE_SELLER,
@@ -110,7 +113,7 @@ export const menuItems: TMenuItem[] = [
   {
     header: "page_header.user",
     element: <User />,
-    icon: <FaSellcast />,
+    icon: <FaUser />,
     text: "sidebar.user",
     path: `/${ABILITIES_ENUM?.USER}`,
     abilities: ABILITIES_ENUM?.USER,
@@ -128,6 +131,18 @@ export const menuItems: TMenuItem[] = [
     prevPath: 0,
   },
 
+  {
+    header: "page_header.questionBank",
+    element: <QuestionBank />,
+    icon: <FaSellcast />,
+    text: "sidebar.questionBank",
+    path: `/${ABILITIES_ENUM?.QUESTION}`,
+    abilities: ABILITIES_ENUM?.QUESTION,
+    abilities_value: ABILITIES_VALUES_ENUM.INDEX,
+    prevPath: 0,
+  },
+
+
   /// RESELLER /////
 
   {

src/Styles/Antd/Mix.scss

@@ -10,12 +10,7 @@
     }
   }
 }
-
+x
-.Popover {
-  .ant-popover-inner {
-    padding: 0 !important;
-  }
-}
 
 .Color_type_checkbox.false {
   .ant-checkbox-checked .ant-checkbox-inner {

src/Styles/Layout/PageHeader.scss

@@ -9,6 +9,9 @@
     }
     .page_links {
       color: var(--opacity);
+      display: flex;
+      align-items: center;
+      gap: 10px;
     }
   }
 }
@@ -16,3 +19,12 @@
 .filter_header_top {
   color: #202c4b;
 }
+
+
+.PageTitle{
+  display: flex;
+    gap: 10px;
+    .PageTitleItems{
+      cursor: pointer;
+    }
+}

src/Styles/Pages/exercise.scss

@@ -41,7 +41,7 @@
   // padding: 2vw;
   .exercise_add_main {
     background: var(--bg);
-    padding: 2vw;
+    padding: 10px 2vw;
   }
   .exercise_add_buttons {
     display: flex;
@@ -127,12 +127,14 @@
   display: flex;
   justify-content: space-between;
   width: 100%;
-  padding: 14px 10px;
+  padding: 14px   20px;
   background: #f2f4f8;
   border-radius: 10px 10px 0 0;
   margin: 0 !important;
   box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.1);
-
+  div{
+    margin-left: 25px;
+  }
   img {
     cursor: pointer;
   }
@@ -144,7 +146,8 @@
 .delete_question_options {
   margin-top: 25px;
   color: var(--warning);
-
+  z-index: 9999;
+  cursor: pointer;
   padding-left: 10px;
   .trash_icon {
     margin-right: 10px !important;
@@ -211,3 +214,44 @@
   transform: translateY(55px);
   z-index: -1;
 }
+
+
+
+.ant-popconfirm .ant-popconfirm-buttons{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    >{
+      flex: 1;
+      min-height: auto;
+      min-width: 30px;
+
+    }
+    .ant-btn{
+      min-height: 30px !important;
+      max-height: 30px !important;
+      min-width: 50px;
+      padding: 5px !important;
+      display: flex;
+      align-items: center;
+      justify-content: center ;
+    
+
+    }
+}
+
+.QuestionPractical{
+  display: flex;
+  flex-direction: column;
+  background: var(--bg);
+  >header{
+    padding: 30px 2vw 10px 2vw;
+  }
+}
+
+.SelectTag{
+  label{
+    font-weight: bold;
+    font-size: 19px;
+  }
+}

src/api/auth.ts

@@ -5,4 +5,4 @@ const API = {
   LOGIN: `login`,
   LOGOUT: `logout`,
 };
-export const useLoginAdmin = () => useAddMutation(KEY, API.LOGIN, false);
+export const useLoginAdmin = () => useAddMutation(KEY, API.LOGIN, true);

src/api/helper/useAxios.ts

@@ -50,6 +50,8 @@ function useAxios() {
       return response;
     },
     function (error) {
+      console.log(error?.response);
+      
       const status = error?.request?.status;
       const errorMsg = error?.response?.data?.message;
       const errorField = error?.response?.data;

src/enums/Model.ts

@@ -186,4 +186,11 @@ export enum ModalEnum {
   Student_Package_EDIT = "Student_Package.edit",
   Student_Package_ADD = "Student_Package.add",
   Student_Package_DELETE = "Student_Package.delete",
+
+
+    ///QuestionBank
+
+    QUESTION_BANK_ADD = "QuestionBank.add",
+    QUESTION_BANK_EDIT = "QuestionBank.edit",
+    QUESTION_BANK_DELETE = "QuestionBank.delete",
 }

src/enums/abilities.ts

@@ -47,6 +47,7 @@ export enum ABILITIES_ENUM {
   User = "user",
   RE_SELLER = "reseller",
   Student_Package = "student_package",
+  QUESTION_BANK = "QuestionBank"
 
   ////
 }

src/translate/ar.json

@@ -46,7 +46,9 @@
     "grade_to_pass_must_be_less_than_max_grade": "يجب أن تكون درجة النجاح أقل من الحد الأقصى للدرجة",
     "max_mark_must_be_greater_than_min_mark_to_pass": "يجب ان تكون اكبر من علامة النجاح",
     "Sorry, the question must have at least one option": "عذرًا، يجب أن يحتوي السؤال على خيار واحد على الأقل",
-    "at_least_one_answer_should_be_correct": "يجب أن تكون إجابة واحدة  صحيحة"
+    "at_least_one_answer_should_be_correct": "يجب أن تكون إجابة واحدة  صحيحة",
+    "it_should_have_more_than_one_answers":"يجب أن يحتوي على أكثر من إجابة",
+    "it_should_have_more_than_one_correct_answers":"يجب أن يحتوي على إجابة صحيحة"
   },
   "header": {
     "register_students": "تسجيل الطلاب",
@@ -123,7 +125,9 @@
     "personal_information": "المعلومات الشخصية",
     "address": "العنوان",
     "attachment": "المرفق",
-    "subject_of_class": "مواد الصف"
+    "subject_of_class": "مواد الصف",
+    "this_will_un_do_all_your_changes":"سوف يؤدي هذا إلى إلغاء جميع تغييراتك",
+    "edit_question":"تعديل سؤال"
   },
   "columns": {
     "id": "الرقم التعريفي",
@@ -183,7 +187,12 @@
     "subject":"المادة",
     "quiz_status":"حالة الاختبار",
     "creator_name":"اسم المنشئ",
-    "created_by":"أنشئ بواسطة"
+    "created_by":"أنشئ بواسطة",
+    "question_type": "نوع تمرين",
+    "base_question": " تمرين متعدد ",
+    "normal_question": " تمرين عادي",
+    "hint":"شرح ",
+    "tags":"كلمات مفتاحية"
   },
   "practical": {
     "to_confirm_deletion_please_re_enter": "لتأكيد الحذف، يرجى إعادة الإدخال",
@@ -749,7 +758,8 @@
     "reseller": "البائعين",
     "param": "معامل",
     "student_package": "حزمة الطالب",
-    "quiz":"الاختبارات"
+    "quiz":"الاختبارات",
+    "questionBank":"بنك الأسئلة"
   },
   "message": {
     "some_thing_went_wrong": "حدث خطأ ما",
@@ -784,17 +794,18 @@
     "grade": "الصفوف",
     "report": "تقرير",
     "tags": "كلمات مفتاحية",
-    "reseller":"البائعين"
+    "reseller":"البائعين",
+    "QuestionBank":"بنك الأسئلة"
   },
   "page_header": {
-    "dashboard": "لوحة القيادة / الصفحة الرئيسية",
+    "home": "لوحة القيادة",
-    "course": " لوحة القيادة / الصفوف  ",
+    "course": " الصفوف  ",
-    "teacher": " لوحة القيادة / المعلمون",
+    "teacher": " المعلمون",
-    "payment": " لوحة القيادة / الدفعات",
+    "payment": " الدفعات",
-    "branch": " لوحة القيادة / الفروع",
+    "branch": " الفروع",
-    "role": " لوحة القيادة / الادوار",
+    "role": " الادوار",
-    "student": " لوحة القيادة / قائمة الطلاب  ",
+    "student": " قائمة الطلاب  ",
-    "admin": " لوحة القيادة / المسؤولون",
+    "admin": " المسؤولون",
     "student_details": "تفاصيل الطالب",
     "create_student": "إنشاء طالب",
     "course_details": "تفاصيل الصف",
@@ -802,32 +813,34 @@
     "student_payment": "دفع الطالب",
     "student_note": "ملاحظات الطالب",
     "student_status": "حالة الطالب",
-    "education_class": "لوحة القيادة / الصفوف / الشعب",
+    "education_class": "الصفوف / الشعب",
-    "education_class_details": " لوحة القيادة / الصفوف / الشعب / تفاصيل الشعبة",
+    "education_class_details": " الصفوف / الشعب / تفاصيل الشعبة",
-    "subject_details": " لوحة القيادة /  تفاصيل المادة  ",
+    "subject_details": "  تفاصيل المادة  ",
-    "cycle": "لوحة القيادة /  السنة دراسية  ",
+    "cycle": " السنة دراسية  ",
-    "term": "لوحة القيادة / الفصل ",
+    "term": "الفصل ",
-    "unit_details": "لوحة القيادة / تفاصيل المادة / تفاصيل الوحدة",
+    "unit_details": "تفاصيل المادة / تفاصيل الوحدة",
-    "lesson_details": "لوحة القيادة / تفاصيل المادة / تفاصيل الوحدة / تفاصيل الدرس",
+    "lesson_details": "تفاصيل المادة / تفاصيل الوحدة / تفاصيل الدرس",
-    "exercise_add": "لوحة القيادة / تفاصيل الدرس  / إضافة تمارين ",
+    "exercise_add": "تفاصيل الدرس  / إضافة تمارين ",
-    "subject": "لوحة القيادة / المادة",
+    "subject": "المادة",
-    "tags": "لوحة القيادة / كلمات مفتاحية",
+    "tags": "كلمات مفتاحية",
-    "Question": "لوحة القيادة /اسئلة ",
+    "Question": "سئلة ",
-    "add_Question": "لوحة القيادة /إضافة اسئلة ",
+    "add_Question": "ضافة اسئلة ",
-    "edit_Question": "لوحة القيادة /تعديل اسئلة ",
+    "edit_Question": "عديل اسئلة ",
-    "grade": "لوحة القيادة / الصفوف",
+    "grade": "الصفوف",
     "report": "تقرير",
-    "users": "لوحة القيادة / المستخدمون",
+    "users": "المستخدمون",
-    "reseller": "  لوحة القيادة / البائعين",
+    "reseller": "  البائعين",
-    "add_reseller": " لوحة القيادة / البائعين / إضافة بائع ",
+    "add_reseller": " البائعين / إضافة بائع ",
     "param": "معامل",
-    "student_package": "حزمة الطالب"
+    "student_package": "حزمة الطالب",
+    "QuestionBank":"بنك الأسئلة"
   },
   "table": {
     "student": "قائمة الطلاب",
     "reseller": "البائعين",
     "grade": "قائمة الصفوف",
-    "subjects": "مواد الصف"
+    "subjects": "مواد الصف",
+    "QuestionBank":"بنك الأسئلة"
   },
   "alphabet": {
     "A": "A",

src/utils/hasAbilityFn.ts

@@ -677,3 +677,25 @@ export const canDeleteStudent_Package = hasAbility(
 );
 
 
+
+
+/// QuestionBank
+
+export const canAddQuestionBank = hasAbility(
+  ABILITIES_ENUM.QUESTION_BANK,
+  ABILITIES_VALUES_ENUM.STORE,
+);
+
+export const canEditQuestionBank = hasAbility(
+  ABILITIES_ENUM.QUESTION_BANK,
+  ABILITIES_VALUES_ENUM.UPDATE,
+);
+export const canDeleteQuestionBank = hasAbility(
+  ABILITIES_ENUM.QUESTION_BANK,
+  ABILITIES_VALUES_ENUM.DELETE,
+);
+
+export const canShowQuestionBank = hasAbility(
+  ABILITIES_ENUM.QUESTION_BANK,
+  ABILITIES_VALUES_ENUM.SHOW,
+);