add new route navigater

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/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/Page.tsx

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

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/Page.tsx

@@ -42,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/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/Home/Dummy.tsx

@@ -4,6 +4,7 @@ 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();
@@ -11,8 +12,7 @@ const Dummy = () => {
   const { FilterButton, FilterBody } = useFilter();
   return (
     <div className="DummyHomePage">
-      {/* <FilterButton />
+      <PageTitle/>
-      <FilterBody>karim</FilterBody> */}
  
     </div>
   );

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

@@ -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;
   }
@@ -245,4 +247,11 @@
   >header{
     padding: 30px 2vw 10px 2vw;
   }
+}
+
+.SelectTag{
+  label{
+    font-weight: bold;
+    font-size: 19px;
+  }
 }

src/translate/ar.json

@@ -798,14 +798,14 @@
     "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": "تفاصيل الصف",
@@ -813,27 +813,27 @@
     "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": "حزمة الطالب",
-    "QuestionBank":"لوحة القيادة / بنك الأسئلة"
+    "QuestionBank":"بنك الأسئلة"
   },
   "table": {
     "student": "قائمة الطلاب",