#187 && #189

package.json

@@ -3,53 +3,40 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@ant-design/icons": "^5.3.7",
+    "@ant-design/icons": "^5.5.1",
     "@dnd-kit/core": "^6.1.0",
     "@dnd-kit/modifiers": "^7.0.0",
     "@dnd-kit/sortable": "^8.0.0",
     "@dnd-kit/utilities": "^3.2.2",
     "@types/katex": "^0.16.7",
     "@uiw/react-markdown-preview": "^5.1.3",
-    "antd": "^5.17.4",
+    "antd": "^5.21.1",
-    "axios": "^1.7.2",
+    "axios": "^1.7.7",
-    "better-react-mathjax": "^2.0.3",
     "bootstrap": "^5.3.3",
-    "dayjs": "^1.11.11",
+    "dayjs": "^1.11.13",
     "formik": "^2.4.6",
-    "i18next": "^23.11.5",
+    "i18next": "^23.15.1",
-    "install": "^0.13.0",
     "katex": "^0.16.11",
     "leaflet": "^1.9.4",
     "lottie-react": "^2.4.0",
-    "mathjax": "^3.2.2",
-    "mathjax-full": "^3.2.2",
     "mathjs": "^13.1.1",
     "mathml-to-latex": "^1.4.1",
-    "mathml2latex": "^1.1.3",
-    "mml2tex": "^0.0.2",
     "npm": "^10.8.3",
     "react": "^18.3.1",
     "react-beautiful-dnd": "^13.1.1",
     "react-dom": "^18.3.1",
     "react-i18next": "^13.5.0",
     "react-icons": "^4.12.0",
-    "react-intersection-observer": "^9.13.1",
     "react-katex": "^3.0.1",
-    "react-latex": "^2.0.0",
-    "react-latex-next": "^3.0.0",
     "react-leaflet": "^4.2.1",
-    "react-mathjax": "^1.0.1",
-    "react-mathjax-preview": "^2.2.6",
-    "react-mathjax2": "^0.0.2",
     "react-query": "^3.39.3",
-    "react-router-dom": "^6.23.1",
+    "react-router-dom": "^6.26.2",
     "react-toastify": "^9.1.3",
     "react-window": "^1.8.10",
-    "react-window-dynamic": "^1.8.0-alpha.2",
+    "reactstrap": "^9.2.3",
-    "reactstrap": "^9.2.2",
+    "sass": "^1.79.4",
-    "sass": "^1.77.4",
     "yup": "^1.4.0",
-    "zustand": "^4.5.2"
+    "zustand": "^4.5.5"
   },
   "scripts": {
     "start": "vite --port=3000",
@@ -81,26 +68,26 @@
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
-    "@types/node": "^20.14.0",
+    "@types/node": "^20.16.10",
-    "@types/react": "^18.3.3",
+    "@types/react": "^18.3.10",
     "@types/react-beautiful-dnd": "^13.1.8",
     "@types/react-dom": "^18.3.0",
     "@types/react-helmet": "^6.1.11",
     "@types/react-katex": "^3.0.4",
     "@types/react-latex": "^2.0.3",
     "@types/react-window": "^1.8.8",
-    "@vitejs/plugin-legacy": "^5.4.1",
+    "@vitejs/plugin-legacy": "^5.4.2",
-    "@vitejs/plugin-react": "^4.3.0",
+    "@vitejs/plugin-react": "^4.3.1",
     "jest": "^29.7.0",
-    "jsdom": "^24.1.0",
+    "jsdom": "^24.1.3",
-    "prettier": "^3.3.0",
+    "prettier": "^3.3.3",
     "rollup-plugin-visualizer": "^5.12.0",
-    "ts-jest": "^29.1.4",
+    "ts-jest": "^29.2.5",
     "ts-loader": "^9.5.1",
     "typescript": "^4.9.5",
-    "vite": "^5.2.12",
+    "vite": "^5.4.8",
     "vite-plugin-compression": "^0.5.1",
-    "webpack": "^5.93.0",
+    "webpack": "^5.95.0",
     "webpack-cli": "^5.1.4"
   }
 }

src/Components/CustomFields/MathComponent.tsx

@@ -2,10 +2,12 @@ import React from 'react';
 import { BlockMath } from 'react-katex';
 import 'katex/dist/katex.min.css';
 
+
 const LatexPreview = ({ latex }: { latex: string }) => {
   // console.log(latex);
   
     // const sanitizedLatex = latex.replace(/\\_/g, '_');
+    
   return (
     <div>
 

src/Components/CustomFields/SelectTagV2.tsx

@@ -22,13 +22,15 @@ const SelectTagV2: React.FC = () => {
   const NewShapeTags = CurrentTags?.map((item:any)=> {return item?.name ?? item })
   
   const handleChange = (_value: any[],option:any) => {
-    console.log(option,"option");
+    // console.log(option,"option");
-    const NewShapeOption = option?.map((item:any)=> {return ({name:item?.name,id:item?.id})})    
+    console.log(_value);
-    console.log(NewShapeOption);
     
-    formik.setFieldValue("tags", NewShapeOption);
+    // const NewShapeOption = option?.map((item:any)=> {return ({name:item?.name,id:item?.id})})    
-    setSearchValue("");
+    // console.log(NewShapeOption);
-    setFieldValue("");
+    
+    // formik.setFieldValue("tags", NewShapeOption);
+    // setSearchValue("");
+    // setFieldValue("");
   };
 
   const handleSearch = useDebounce((value: string) => {

src/Components/Utils/Filter/useFilter.tsx

@@ -159,7 +159,7 @@ const useFilter = () => {
       <div className="filter-submit-buttons buttons">
         <Button
           className="back_button filter_modal_add_button"
-          type="default"
+          type="primary"
           htmlType="reset"
         >
           {t("practical.reset")}

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

@@ -7,6 +7,7 @@ import { useValidationValidationParamState } from "../../../../Components/Valida
 import { useGetAllUnit } from "../../../../api/unit";
 import { useGetAllSubject } from "../../../../api/subject";
 import { useGetAllLesson } from "../../../../api/lesson";
+import { useGetAllTag } from "../../../../api/tags";
 
 const FilterForm = () => {
 
@@ -15,7 +16,8 @@ const FilterForm = () => {
     GradeName, GradeCurrentPage,
     SubjectName, SubjectCurrentPage,
     UnitName, UnitCurrentPage,
-    LessonName, LessonCurrentPage
+    LessonName, LessonCurrentPage,
+    TagName , TagCurrentPage
 
 
   } = ValidationParamState;
@@ -58,6 +60,17 @@ const FilterForm = () => {
   const canChangeLessonPage = !!Lesson?.links?.next;
   const LessonPage = Lesson?.meta?.currentPage;
 
+
+     /// TagsIds 
+     const { data: Tag, isLoading: isLoadingTag } = useGetAllTag({
+      name: TagName,
+      page: TagCurrentPage
+    });
+    const TagOption = Tag?.data ?? []
+    const canChangeTagPage = !!Tag?.links?.next;
+    const TagPage = Tag?.meta?.currentPage;
+  
+
   return (
     <div>
       <Row>
@@ -97,7 +110,23 @@ const FilterForm = () => {
         />
 
 
+    {/* 
+              TagsIds
+        */}
 
+<ValidationField
+          searchBy="TagName"
+          name="tagsIds"
+          label="tag"
+          type="Search"
+          option={TagOption}
+          isMulti
+          isLoading={isLoadingTag}
+          canChangePage={canChangeTagPage}
+          PageName={"TagCurrentPage"}
+          page={TagPage}
+          
+        />
 
 
         </Col>
@@ -137,6 +166,9 @@ const FilterForm = () => {
           page={LessonPage}
 
         />
+
+       
+
         </Col>
       </Row>
     </div>

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

@@ -1,14 +1,9 @@
 import React, { useEffect } from "react";
-import { Choice } from "../../../../../../types/Item";
 import { Field, useFormikContext } from "formik";
 import { useTranslation } from "react-i18next";
-import { getCharFromNumber } from "../../../../../../utils/getCharFromNumber";
-import TextField from "./TextField";
 import { useObjectToEdit } from "../../../../../../zustand/ObjectToEditState";
-import ImageBoxField from "../../../../../../Components/CustomFields/ImageBoxField/ImageBoxField";
 import { GoTrash } from "react-icons/go";
 import { Popconfirm } from "antd";
-import LaTeXInput from "../../../../../../Components/LatextInput/LaTeXInput";
 import LaTeXInputMemo from "../../../../../../Components/LatextInput/LaTeXInputMemo";
 import ImageBoxFieldMemo from "../../../../../../Components/CustomFields/ImageBoxField/ImageBoxFieldMemo";
 

src/Pages/Admin/question/Model/Malty/components/Question.tsx

@@ -6,6 +6,7 @@ import { FaCirclePlus } from "react-icons/fa6";
 import ValidationField from "../../../../../../Components/ValidationField/ValidationField";
 import MaltySelectTag from "../Tags/MaltySelectTag";
 import { toast } from "react-toastify";
+import SelectTagV2 from "../../../../../../Components/CustomFields/SelectTagV2";
 
 export  const Question: React.FC<any> = React.memo(({ index, data }) => {
   const { values, setFieldValue, ShowHint, t } = data;
@@ -61,6 +62,7 @@ export  const Question: React.FC<any> = React.memo(({ index, data }) => {
           />
         )}
         <MaltySelectTag parent_index={index} />
+       
       </div>
     </div>
   );

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

@@ -13,6 +13,7 @@ import { toast } from "react-toastify";
 import LaTeXInputMemo from "../../../../Components/LatextInput/LaTeXInputMemo";
 import ImageBoxFieldMemo from "../../../../Components/CustomFields/ImageBoxField/ImageBoxFieldMemo";
 import useUnsavedChangesWarning from "../../../../Hooks/useUnsavedChangesWarning";
+import SelectTagV2 from "../../../../Components/CustomFields/SelectTagV2";
 
 const Form = () => {
   const [t] = useTranslation();
@@ -94,7 +95,8 @@ const Form = () => {
 
         />
         }
-        <SelectTag />
+        {/* <SelectTag /> */}
+        <SelectTagV2  />
       </div>
     </Row>
   );

src/Pages/Home/Dummy.tsx

@@ -1,20 +1,7 @@
-import React, { useState } from "react";
+
-import { useTranslation } from "react-i18next";
-import { MathConverter } from "./MathConverter";
-import { BlockMath } from "react-katex";
 const Dummy = () => {
-  const [t] = useTranslation();
-  const sanitizedLatex = ""
-  const [value, setvalue] = useState("")
-  const onChange = (e:any)=>{
-    setvalue(e.target.value)
-  }
   return (
     <div className="DummyHomePage">
-      {/* <input onChange={onChange} type="text" />
-  <BlockMath>
-      {value} 
-        </BlockMath>   */}
     </div>
   );
 };

src/Pages/Home/MathConverter.tsx

@@ -1,56 +0,0 @@
-import React, { useState } from 'react';
-import { MathJax, MathJaxContext } from 'better-react-mathjax';
-
-const convertToLatex = (input: string): string => {
-    // Replace fractions
-    let latex = input.replace(/(\d+)\/(\d+)/g, '\\frac{$1}{$2}');
-    latex = latex.replace(/\(([^()]+)\)\/\(([^()]+)\)/g, '\\frac{($1)}{($2)}');
-    latex = latex.replace(/([^\s()]+)\s*\/\s*([^\s()]+)/g, '\\frac{$1}{$2}');
-  
-    // Handle exponentiation
-    latex = latex.replace(/(\w+)\^(\(.+?\)|\w+)/g, '$1^{ $2 }');
-    latex = latex.replace(/(\w+)\s*\^(\w+)/g, '$1^{ $2 }');
-  
-    // Handle square roots
-    latex = latex.replace(/sqrt\(([^()]+)\)/g, '\\sqrt{$1}');
-  
-    // Replace subscripts
-    latex = latex.replace(/_(\w+)/g, '_{ $1 }');
-    latex = latex.replace(/_([\w+]+)/g, '_{ $1 }');
-  
-    // Add spacing for equations
-    latex = latex.replace(/=/g, ' = ');
-  
-    return latex;
-};
-
-export const MathConverter: React.FC = () => {
-    const config = {
-        loader: { load: ["input/asciimath"] }
-    };
-    
-    const [inputText, setInputText] = useState<string>('u_(n+1)=e.sqrt(u_n)');
-    const [convertedLatex, setConvertedLatex] = useState<string>('');
-
-const handleClick = () => {
-        const latex = convertToLatex(inputText);
-        setConvertedLatex(latex);
-    };
-
-    return (
-        <MathJaxContext config={config}>
-            <div>
-                <h2>LaTeX Preview</h2>
-                <textarea
-                    value={inputText}
-                    onChange={(e) => setInputText(e.target.value)}
-                    rows={10}
-                    cols={50}
-                />
-                <h3>Converted LaTeX:</h3>
-                <MathJax inline={false}>{`$$${convertedLatex}$$`}</MathJax>
-                <button onClick={handleClick}>Convert to LaTeX</button>
-            </div>
-        </MathJaxContext>
-    );
-};

src/Pages/Home/MathMLPreview.tsx

@@ -1,31 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { MathJax, MathJaxContext } from 'better-react-mathjax';
-
-const MathMLPreview = () => {
-  const [mathML, setMathML] = useState('<math xmlns="http://www.w3.org/1998/Math/MathML"><mi>x</mi><mo>=</mo><mn>5</mn></math>');
-
-  useEffect(() => {
-    // Any logic to handle input updates and preview refresh can be added here
-  }, [mathML]);
-
-  return (
-    <div>
-      <textarea
-        value={mathML}
-        onChange={(e) => setMathML(e.target.value)}
-        rows={5}
-        style={{ width: '100%' }}
-      />
-      <MathJaxContext>
-        <div>
-          <h3>Preview:</h3>
-          <MathJax dynamic>
-            <div dangerouslySetInnerHTML={{ __html: mathML }} />
-          </MathJax>
-        </div>
-      </MathJaxContext>
-    </div>
-  );
-};
-
-export default MathMLPreview;

src/Routes.tsx

@@ -63,6 +63,7 @@ import { ParamsEnum } from "./enums/params";
 import { TbCategory } from "react-icons/tb";
 import { UserTypeEnum } from "./enums/UserType";
 import { FaTags } from "react-icons/fa6";
+import { CiSquareQuestion } from "react-icons/ci";
 
 export const menuItems: TMenuItem[] = [
   {
@@ -172,16 +173,16 @@ export const menuItems: TMenuItem[] = [
   //   prevPath: 0,
   // },
 
-  // {
+  {
-  //   header: "page_header.questionBank",
+    header: "page_header.questionBank",
-  //   element: <QuestionBank />,
+    element: <QuestionBank />,
-  //   icon: <CiSquareQuestion />,
+    icon: <CiSquareQuestion />,
-  //   text: "sidebar.questionBank",
+    text: "sidebar.questionBank",
-  //   path: `/${ABILITIES_ENUM?.QUESTION}`,
+    path: `/${ABILITIES_ENUM?.QUESTION}`,
-  //   abilities: ABILITIES_ENUM?.QUESTION,
+    abilities: ABILITIES_ENUM?.QUESTION,
-  //   abilities_value: ABILITIES_VALUES_ENUM.INDEX,
+    abilities_value: ABILITIES_VALUES_ENUM.INDEX,
-  //   prevPath: 0,
+    prevPath: 0,
-  // },
+  },
   {
     header: "page_header.roles",
     element: <Roles />,

src/Styles/Layout/FilterLayout.scss

@@ -2,7 +2,8 @@
   padding: 20px 20px;
   border-radius: 10px 10px 0 0;
   box-shadow: 0px 0px 32px 2px #080F3414;
-
+  max-width: 85vw;
+  overflow: hidden;
   >div {
     display: flex;
     align-items: center;

src/Styles/Layout/PageHeader.scss

@@ -37,6 +37,8 @@
   .PageTitleItems {
     cursor: pointer;
     color: var(--value);
+    max-width: 65vw;
+    overflow: hidden;
   }
 }
 

src/translate/ar.json

@@ -538,7 +538,8 @@
     "contact_number2":"رقم الهاتف الإضافي",
     "lat":"الطول",
     "lng":"العرض",
-    "choose":"حدد"
+    "choose":"حدد",
+    "tag":"كلمات مفتاحية"
   },
   "select": {
     "enums": {