Merge branch 'dev' of into dev

src/Components/DataTable/SearchFieldWithSelect.tsx

@@ -1,6 +1,7 @@
 import React, { useState, useEffect, useRef } from "react";
-import { IoSearch } from "react-icons/io5";
+// import { IoSearch } from "react-icons/io5";
 import { useNavigate } from "react-router-dom";
+import { LuSearch } from "react-icons/lu";
 
 interface Option {
   label: string;
@@ -60,7 +61,7 @@ const SearchFieldWithSelect: React.FC<Props> = ({
   return (
     <div ref={node} className={`search-field ${isOpen ? "open" : ""}`}>
       <div className="search-header" onClick={toggleDropdown}>
-        {withIcon && <IoSearch className="search__icon" />}
+        {withIcon && <LuSearch className="search__icon" />}
 
         {/* <p className="search__input_text">{placeholder}</p> */}
         <input

src/Components/Filter/OrderBySelect.tsx

@@ -1,6 +1,5 @@
-import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Divider, Select } from "antd";
+import { Select } from "antd";
 import { TbReorder } from "react-icons/tb";
 import { useFilterStateState } from "../../zustand/Filter";
 

src/Components/Layout/Navbar/NavBarRightSide.tsx

@@ -23,9 +23,7 @@ const NavBarRightSide = () => {
   // const translateArray = translateOptions(search_array, t);
 
   const { handel_open_model } = useModalHandler();
-  const handleEdit = () => {
-    handel_open_model(ModalEnum.CHANGE_PASSWORD);
-  };
+
   return (
     <article>
       <span className="header_icons">
@@ -40,6 +38,7 @@ const NavBarRightSide = () => {
           icon={<CiCirclePlus size={25} />}
         />
         <TooltipComp
+          onClick={()=>(Navigate('/notifications'))}
           className="NotificationsIcon"
           note="notification"
           color="#E0E0E0"

src/Components/Layout/Navbar/Tooltip.tsx

@@ -10,11 +10,13 @@ const TooltipComp = ({
   color,
   icon,
   className = "",
+  onClick,
 }: {
   note: string;
   color: string;
   icon: any;
   className?: string;
+  onClick?:() => void
 }) => {
   const [t] = useTranslation();
   const { handel_open_model } = useModalHandler();
@@ -23,11 +25,12 @@ const TooltipComp = ({
     handel_open_model(ModalEnum.CHANGE_PASSWORD);
   };
   return (
-    <div className={className}>
+    <div className={className} onClick={onClick}>
       <Tooltip
         placement="top"
         title={<div onClick={handleEdit}>{t(`header.${note}`)}</div>}
         color={color}
+        
       >
         <div className={`gear `}>{icon}</div>
       </Tooltip>

src/Layout/Dashboard/FilterLayout.tsx

@@ -16,13 +16,15 @@ const FilterLayout = ({
   sub_children,
   search_by = "name",
   width = "500px",
-  haveFilter=true
+  haveFilter = true,
+  haveOrder = true
 }: {
   filterTitle: string;
   sub_children: any;
-  search_by?:string
-  width?:string
-  haveFilter?:boolean
+  search_by?:string;
+  width?:string;
+  haveFilter?:boolean;
+  haveOrder?:boolean
 }) => {
   const { t } = useTranslation();
   const translateArray = translateOptions(search_array, t);
@@ -63,7 +65,7 @@ const FilterLayout = ({
           </span>
 
           <span>
-            <OrderBySelect />
+            {haveOrder && <OrderBySelect />}
           </span>
         </div>
       </div>

src/Pages/Admin/Profile/Form/PasswordDetailsForm.tsx

@@ -1,7 +1,6 @@
 import { useTranslation } from "react-i18next";
 import { FaStore } from "react-icons/fa";
 import ValidationField from "../../../../Components/ValidationField/ValidationField";
-import { CiEdit } from "react-icons/ci";
 import HeaderForm from "./HeaderForm";
 
 const PasswordDetailsForm = () => {

src/Pages/Admin/Reseller/show/Page.tsx

@@ -35,7 +35,6 @@ const TableHeader = () => {
 
   }
   const deleteMutation = useDeleteReseller();
-
   return (
     <div className="TableWithHeader single_student">
       <Suspense fallback={<Spin />}>
@@ -43,8 +42,8 @@ const TableHeader = () => {
           pageTitle="reseller_details"
         />
         <div className="single_student_body">
-          <div className="student_info">
-            <InfoCard 
+          <div className="student_info reseller_info">
+            <InfoCard
               withButton={true} 
               data={ReSellerParamInfo} 
               name={"moaz dawalibi"} 

src/Pages/Admin/Roles/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 { useAddRole } from "../../../../api/role";
+
+const AddModel: React.FC = () => {
+  const { mutate, status } = useAddRole();
+
+  const handleSubmit = (values: any) => {
+    mutate({
+      ...values,
+    });
+  };
+  return (
+    <>
+      <LayoutModel
+        status={status as QueryStatusEnum}
+        ModelEnum={ModalEnum.ROLE_ADD}
+        modelTitle="role"
+        handleSubmit={handleSubmit}
+        getInitialValues={getInitialValues({})}
+        getValidationSchema={getValidationSchema}
+      >
+        <ModelForm />
+      </LayoutModel>
+    </>
+  );
+};
+
+export default AddModel;

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

@@ -0,0 +1,36 @@
+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 { useUpdateRole } from "../../../../api/role";
+
+const EditModel: React.FC = () => {
+  const { mutate, status } = useUpdateRole();
+  const { objectToEdit } = useObjectToEdit((state) => state);
+
+  const handleSubmit = (values: any) => {
+    mutate({
+      ...values,
+    });
+  };
+  return (
+    <>
+      <LayoutModel
+        status={status as QueryStatusEnum}
+        ModelEnum={ModalEnum.ROLE_EDIT}
+        modelTitle="role_details"
+        handleSubmit={handleSubmit}
+        getInitialValues={getInitialValues(objectToEdit)}
+        getValidationSchema={getValidationSchema}
+        isAddModal={false}
+      >
+        <ModelForm />
+      </LayoutModel>
+    </>
+  );
+};
+
+export default EditModel;

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

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

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

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

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

@@ -0,0 +1,13 @@
+import * as Yup from "yup";
+export const getInitialValues = (objectToEdit: any): any => {
+  return {
+    id: objectToEdit?.id ?? null,
+    name: objectToEdit?.name ?? null,
+  };
+};
+
+export const getValidationSchema = () => {
+  return Yup.object().shape({
+    name: Yup.string().required("validation.required"),
+  });
+};

src/Pages/Admin/Roles/Page.tsx

@@ -0,0 +1,52 @@
+import { ModalEnum } from "../../../enums/Model";
+import { useTranslation } from "react-i18next";
+import { lazy, Suspense } from "react";
+import { Spin } from "antd";
+import { canAddRole, canAddTags } from "../../../utils/hasAbilityFn";
+import useSetPageTitle from "../../../Hooks/useSetPageTitle";
+import PageHeader from "../../../Layout/Dashboard/PageHeader";
+import FilterLayout from "../../../Layout/Dashboard/FilterLayout";
+import FilterForm from "./Model/FilterForm";
+import { useDeleteRole } from "../../../api/role";
+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();
+
+  useSetPageTitle([
+    {name:`${t(`page_header.home`)}`, path:"/"},
+    {name:`${t(`page_header.role`)}`, path:"role"}
+  ]);
+
+  const deleteMutation = useDeleteRole();
+  return (
+    <div className="TableWithHeader">
+      <Suspense fallback={<Spin />}>
+        <PageHeader
+          pageTitle="role"
+          ModelAbility={ModalEnum?.ROLE_ADD}
+          canAdd={canAddRole}
+        />
+        <FilterLayout
+          sub_children={<FilterForm />}
+          filterTitle="sidebar.role"
+          haveFilter={false}
+        />
+        <Table />
+        <DeleteModalForm
+          deleteMutation={deleteMutation}
+          ModelEnum={ModalEnum?.ROLE_DELETE}
+        />
+        <AddModalForm />
+        <EditModalForm />
+      </Suspense>
+    </div>
+  );
+};
+
+export default TableHeader;

src/Pages/Admin/Roles/Table.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import { useGetAllTag } from "../../../api/tags";
+import DataTable from "../../../Layout/Dashboard/Table/DataTable";
+import { useColumns } from "./useTableColumns";
+import { useFilterState } from "../../../Components/Utils/Filter/FilterState";
+import { useFilterStateState } from "../../../zustand/Filter";
+import { useGetAllRole } from "../../../api/role";
+const App: React.FC = () => {
+
+  const { filterState } = useFilterState();
+  const { Filter } = useFilterStateState();
+  const name = Filter?.name ; 
+  const sort_by = Filter?.sort_by ; 
+
+  const response = useGetAllRole({
+    pagination: true,
+    name,
+    sort_by,
+    ...filterState,
+  });
+
+  return <DataTable response={response} useColumns={useColumns} />;
+};
+
+export default App;

src/Pages/Admin/Roles/index.tsx

@@ -0,0 +1,17 @@
+import { useColumns } from "./useTableColumns";
+import Table from "./Table";
+
+import { FaPlus } from "react-icons/fa";
+
+import AddModalForm from "./Model/AddModel";
+import EditModalForm from "./Model/EditModel";
+// import DeleteModalForm from "../../";
+
+export {
+  Table,
+  useColumns,
+  AddModalForm,
+  EditModalForm,
+  // DeleteModalForm,
+  FaPlus,
+};

src/Pages/Admin/Roles/useTableColumns.tsx

@@ -0,0 +1,65 @@
+import { TableColumnsType } from "antd";
+import { ModalEnum } from "../../../enums/Model";
+import { useObjectToEdit } from "../../../zustand/ObjectToEditState";
+import { useModalState } from "../../../zustand/Modal";
+import { useTranslation } from "react-i18next";
+import { canDeleteRole,canEditRole } from "../../../utils/hasAbilityFn";
+import ActionButtons from "../../../Components/Table/ActionButtons";
+import { Role } from "../../../types/App";
+
+export const useColumns = () => {
+  const [t] = useTranslation();
+
+  const { setIsOpen } = useModalState((state) => state);
+
+  const { setObjectToEdit } = useObjectToEdit((state) => state);
+  const handelDelete = (record: any) => {
+    setObjectToEdit(record);
+    setIsOpen(ModalEnum?.ROLE_DELETE);
+  };
+  const handleEdit = (record: any) => {
+    setObjectToEdit(record);
+    setIsOpen(ModalEnum?.ROLE_EDIT);
+  };
+
+  const columns: TableColumnsType<Role> = [
+    {
+      title: t("columns.id"),
+      dataIndex: "id",
+      key: "id",
+      align: "center",
+    },
+    {
+      title: t("columns.name"),
+      dataIndex: "name",
+      key: "name",
+      align: "center",
+    },
+    {
+      title: t("columns.created_at"),
+      dataIndex: "created_at",
+      key: "created_at",
+      align: "center",
+    },
+
+    {
+      title: t("columns.procedure"),
+      key: "actions",
+      align: "center",
+      width: "25vw",
+      render: (_text, record, index) => {
+        return (
+          <ActionButtons
+            canDelete={canEditRole}
+            canEdit={canDeleteRole}
+            index={index}
+            onDelete={() => handelDelete(record)}
+            onEdit={() => handleEdit(record)}
+          />
+        );
+      },
+    },
+  ];
+
+  return columns;
+};

src/Routes.tsx

@@ -1,5 +1,7 @@
 import { TCrudRoute, TMenuItem } from "./types/App";
-import { FaCashRegister, FaHome, FaMoneyBill, FaPaperclip, FaSellcast, FaTag, FaUser } from "react-icons/fa";
+import { FaCashRegister, FaHome, FaMoneyBill, FaPaperclip, FaSellcast, FaTag, FaUser,FaUserShield } from "react-icons/fa";
+import { CiSquareQuestion } from "react-icons/ci";
+import { GrGroup } from "react-icons/gr";
 import React from "react";
 
 const Dummy = React.lazy(() => import("./Pages/Home/Dummy"));
@@ -36,6 +38,7 @@ const Param = React.lazy(() => import("./Pages/Admin/Param/Page"));
 const QuestionBank = React.lazy(() => import("./Pages/Admin/QuestionBank/Page"));
 const Notifications = React.lazy(() => import("./Pages/Admin/Notifications/Page"));
 const Profile = React.lazy(() => import("./Pages/Admin/Profile/Page"));
+const Roles = React.lazy(() => import("./Pages/Admin/Roles/Page"));
 
 /// RESELLER ///
 const Student_Package = React.lazy(
@@ -95,7 +98,7 @@ export const menuItems: TMenuItem[] = [
   {
     header: "page_header.student",
     element: <Student />,
-    icon: <MdGrade />,
+    icon: <GrGroup />,
     text: "sidebar.student",
     path: `/${ABILITIES_ENUM?.STUDENT}`,
     abilities: ABILITIES_ENUM?.STUDENT,
@@ -136,7 +139,7 @@ export const menuItems: TMenuItem[] = [
   {
     header: "page_header.questionBank",
     element: <QuestionBank />,
-    icon: <FaSellcast />,
+    icon: <CiSquareQuestion />,
     text: "sidebar.questionBank",
     path: `/${ABILITIES_ENUM?.QUESTION}`,
     abilities: ABILITIES_ENUM?.QUESTION,
@@ -144,12 +147,12 @@ export const menuItems: TMenuItem[] = [
     prevPath: 0,
   },
   {
-    header: "page_header.notifications",
-    element: <Notifications />,
-    icon: <FaSellcast />,
-    text: "sidebar.notifications",
-    path: `/${ABILITIES_ENUM?.NOTIFICATIONS}`,
-    abilities: ABILITIES_ENUM?.NOTIFICATIONS,
+    header: "page_header.roles",
+    element: <Roles />,
+    icon: <FaUserShield />,
+    text: "sidebar.role",
+    path: `/${ABILITIES_ENUM?.ROLE}`,
+    abilities: ABILITIES_ENUM?.ROLE,
     abilities_value: ABILITIES_VALUES_ENUM.INDEX,
     prevPath: 0,
   },
@@ -262,7 +265,15 @@ export const CrudRoute: TCrudRoute[] = [
     abilities: ABILITIES_ENUM?.PROFILE,
     abilities_value: ABILITIES_VALUES_ENUM.INDEX,
     prevPath: 0,
-  }
+  },
+  {
+    header: "page_header.notifications",
+    element: <Notifications />,
+    path: `/${ABILITIES_ENUM?.NOTIFICATIONS}`,
+    abilities: ABILITIES_ENUM?.NOTIFICATIONS,
+    abilities_value: ABILITIES_VALUES_ENUM.INDEX,
+    prevPath: 0,
+  },
 ];
 
 export const AppRoutes: Record<string, string> = Object.fromEntries(

src/Styles/Antd/Model.scss

@@ -54,8 +54,8 @@
         outline: none;
         border: none;
         width: 120px;
-        border-radius: 10px;
-        padding: 10px;
+        border-radius: 7px;
+        padding: 7px;
         font-weight: bold;
         background: var(--primary);
         color: var(--white);

src/Styles/DataTable/FillterNav.scss

@@ -49,7 +49,7 @@
   border: none;
   min-width: 120px;
   border-radius: 6px;
-  padding: 6px 10px;
+  padding: 9px !important;
   font-weight: bold;
   background: var(--primary);
   color: var(--white);

src/Styles/DataTable/SearchField.scss

@@ -1,10 +1,9 @@
 .search-field {
   position: relative;
   z-index: 999;
-  border-radius: 10px;
-  // box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.001);
-  width: 220px;
-  // direction: ltr;
+  border-radius: 8px;
+  width: 280px;
+  direction: ltr;
   color: #6a7287b2;
 }
 .NavBar {
@@ -12,9 +11,14 @@
     color: var(--white) !important;
     background-color: inherit;
     border-radius: 8px;
-    border: 2px solid var(--borderColor);
+    border: 1px solid var(--borderColor);
+    svg{
+      font-size: 24px;
+    }
     input {
       color: #fff !important;
+      text-align: end;
+      font-size: 16px;
     }
   }
 }
@@ -28,7 +32,6 @@
   background-color: var(--bg);
   font-weight: bold;
   border-radius: 10px;
-  // width: 18vw;
   height: 40px;
   transition: 0.5s ease-in-out;
 }

src/Styles/Layout/DataTable.scss

@@ -1,7 +1,7 @@
 .DataTable {
   width: 100%;
   border-radius: 0 0 10px 10px;
-  // box-shadow: 2px 2px 8px 3px rgba(0, 0, 0, 0.1);
+  box-shadow: 2px 2px 8px 3px rgba(0, 0, 0, 0.1);
 }
 
 .ant-table-cell {

src/Styles/Layout/FilterLayout.scss

@@ -1,6 +1,8 @@
 .filter_header {
   padding: 20px 20px;
   border-radius: 10px 10px 0 0;
+  box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.1);
+
   > div {
     display: flex;
     align-items: center;
@@ -30,16 +32,18 @@
     span {
       display: flex;
       align-items: center;
-      color: #6a7287;
+      color: #6A7287;
       .pagination_select,
       .order_by_select,
       .filter_modal_select {
         border: 1px solid var(--opacity);
         border-radius: 10px;
-        // padding-bottom: 46.5px;
         .addition_select_icon {
           font-size: 25px;
         }
+        div{
+          color: #6A7287;
+        }
       }
       p {
         padding-inline: 10px;
@@ -47,8 +51,11 @@
     }
   }
   .search-field {
-    // box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.1);
     border: 1px solid rgba(0, 0, 0, 0.1);
+    .search__input{
+      width: 90%;
+      text-align: end ;  
+    }
     .search__icon {
       color: var(--primary);
     }
@@ -88,4 +95,16 @@
 
 .model_sub_children{
   padding-bottom: 30px;
+}
+.ant-select-selection-search{
+  color: #6A7287 !important;
+  display: none !important;
+
+}
+:where(.css-dev-only-do-not-override-oad6qy).ant-select-single.ant-select-lg .ant-select-selector .ant-select-selection-search{
+  input{
+    
+  }
+}
+:where(.css-dev-only-do-not-override-oad6qy).ant-select-single.ant-select-lg:not(.ant-select-customize-input) .ant-select-selector .ant-select-selection-search-input{
 }

src/Styles/Layout/PageHeader.scss

@@ -17,7 +17,11 @@
 }
 
 .filter_header_top {
-  color: #202c4b;
+  h4{
+    color: var(--secondary);
+    font-weight:600;
+    font-size: 18px;
+  }
 }
 
 

src/Styles/Pages/InfoCard.scss

@@ -120,7 +120,7 @@
                 .address_card {
                     width: 50%;
                     margin-block: 0 !important;
-                    max-height: 17vw;
+                    min-height: 30vh;
                 }
 
                 .info_card {
@@ -131,6 +131,35 @@
             .student_table {
                 width: 100%;
             }
+            .reseller_info{
+                display: flex; flex-wrap: wrap;
+                .address_card,
+                .attachments_card,
+                .info_card{
+                    width: 45%;
+                    div{
+                        span{
+                            font-size: 1.6vw !important;
+                        }
+                        h4{
+                            font-size: 1.8vw;
+                        }
+                        h2{
+                            font-size: 1.6vw !important;
+                        }
+                        h6{
+                            font-size: 1.6vw !important; 
+                        }
+                        p{
+                            font-size: 1.6vw !important;
+                        }
+                    }
+                }
+                .address_card,
+                .attachments_card{
+                    max-height: 40vh !important;
+                }
+            }
         }
     }
 }

src/Styles/Tables/Table.scss

@@ -1,6 +1,6 @@
 .Table,
 .TableWithTabs {
-  @include Shadow;
+  @include Shadow;  
   background: var(--bg);
   border-radius: 10px;
   display: flex;
@@ -48,6 +48,7 @@
 }
 /* pagination */
 .ant-spin-nested-loading ul {
+  
 }
 
 /* Ant tabs tab active */

src/enums/params.ts

@@ -12,4 +12,5 @@ export enum ParamsEnum {
   QUESTION_ID = "question_id",
   CHILDREN_QUESTION_ID = "children_question_id",
   RE_SELLER_ID = "re_seller_id",
+  ROLE_ID = "role_id",
 }

src/translate/ar.json

@@ -47,8 +47,8 @@
     "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": "يجب أن تكون إجابة واحدة  صحيحة",
-    "it_should_have_more_than_one_answers":"يجب أن يحتوي على أكثر من إجابة",
-    "it_should_have_more_than_one_correct_answers":"يجب أن يحتوي على إجابة صحيحة",
+    "it_should_have_more_than_one_answers": "يجب أن يحتوي على أكثر من إجابة",
+    "it_should_have_more_than_one_correct_answers": "يجب أن يحتوي على إجابة صحيحة",
     "File_size_exceeds_2_MB_limit.":"حجم الملف يتجاوز الحد الأقصى البالغ 2 ميجابايت"
   },
   "header": {
@@ -122,20 +122,21 @@
     "sort_by": "ترتيب حسب",
     "filter": "تصفية",
     "per_page": "صف لكل صفحة",
-    "entries": "ادخالات",
+    "entries": "إدخالات",
     "personal_information": "المعلومات الشخصية",
     "address": "العنوان",
     "attachment": "المرفق",
     "subject_of_class": "مواد الصف",
-    "this_will_un_do_all_your_changes":"سوف يؤدي هذا إلى إلغاء جميع تغييراتك",
-    "edit_question":"تعديل سؤال",
-    "notifications":"الإشعارات",
-    "delete_all":" حذف الكل",
-    "delete":"حذف",
-    "attachments":"المرفقات",
-    "password":"كلمة المرور",
-    "edit":"تعديل",
-    "change":"تغيير"
+    "this_will_un_do_all_your_changes": "سوف يؤدي هذا إلى إلغاء جميع تغييراتك",
+    "edit_question": "تعديل سؤال",
+    "notifications": "الإشعارات",
+    "delete_all": " حذف الكل",
+    "delete": "حذف",
+    "attachments": "المرفقات",
+    "password": "كلمة المرور",
+    "edit": "تعديل",
+    "change": "تغيير",
+    "role_list": "قائمة الأدوار"
   },
   "columns": {
     "id": "الرقم التعريفي",
@@ -182,7 +183,7 @@
     "min_mark_to_pass": "علامة النجاح",
     "isBase": "سؤال رئيسي",
     "question_options_count": "عدد الخيارات",
-    "procedure": "اجراء",
+    "procedure": "إجراء",
     "icon": "الايقونة",
     "canAnswersBeShuffled": "يمكن خلط الإجابات",
     "phone_number": "رقم الهاتف",
@@ -190,27 +191,28 @@
     "expiration_date": "تاريخ الالغاء",
     "activation_date": "تاريخ التنشيط",
     "first_name": "الاسم الأول",
-    "quiz_date":"تاريخ الاختبار",
-    "quiz_address":"عنوان الاختبار",
-    "subject":"المادة",
-    "quiz_status":"حالة الاختبار",
-    "creator_name":"اسم المنشئ",
-    "created_by":"أنشئ بواسطة",
+    "quiz_date": "تاريخ الاختبار",
+    "quiz_address": "عنوان الاختبار",
+    "subject": "المادة",
+    "quiz_status": "حالة الاختبار",
+    "creator_name": "اسم المنشئ",
+    "created_by": "أنشئ بواسطة",
     "question_type": "نوع تمرين",
     "base_question": " تمرين متعدد ",
     "normal_question": " تمرين عادي",
-    "hint":"شرح ",
-    "tags":"كلمات مفتاحية",
-    "course":" الصفوف",
-    "student_full_name":"اسم الطالب الثلاثي",
-    "amount_paid":"المبلغ المدفوع",
-    "sale_date":"تاريخ البيع",
-    "grade":"الصف",
-    "package":"حزمة",
-    "ID":"ID",
-    "residual":"المتبقي",
-    "date_of_receipt":"تاريخ الاستلام",
-    "amount":"مبلغ"
+    "hint": "شرح ",
+    "tags": "كلمات مفتاحية",
+    "course": " الصفوف",
+    "student_full_name": "اسم الطالب الثلاثي",
+    "amount_paid": "المبلغ المدفوع",
+    "sale_date": "تاريخ البيع",
+    "grade": "الصف",
+    "package": "حزمة",
+    "ID": "ID",
+    "residual": "المتبقي",
+    "date_of_receipt": "تاريخ الاستلام",
+    "amount": "مبلغ",
+    "created_at": "تم إنشاؤه في"
   },
   "practical": {
     "to_confirm_deletion_please_re_enter": "لتأكيد الحذف، يرجى إعادة الإدخال",
@@ -258,17 +260,17 @@
     "next": "التالي",
     "prev": "السابق",
     "Abbreviations": "الاختصارات",
-    "address":"العنوان",
-    "quiz":"الاختبارات",
-    "hightes_quiz":"اعلى اختبار",
-    "sales":"المبيعات",
-    "collections":"التحصيلات",
-    "collecting_an_amount":"تحصيل مبلغ",
-    "governorate":"المحافظة",
-    "id_photo":"صورة الهوية",
-    "sorry_something_went_wrong":"عفوا ، حدث خطأ ما",
-    "error_404_Page_not_found._Sorry,_the_page_you_are_looking_for_does_not_exist":"خطأ 404 لم يتم العثور على الصفحة. عذرا الصفحة التي تبحث عنها غير موجودة ",
-    "return_to_the_dashboard":"العودة إلى لوحة القيادة"
+    "address": "العنوان",
+    "quiz": "الاختبارات",
+    "hightes_quiz": "اعلى اختبار",
+    "sales": "المبيعات",
+    "collections": "التحصيلات",
+    "collecting_an_amount": "تحصيل مبلغ",
+    "governorate": "المحافظة",
+    "id_photo": "صورة الهوية",
+    "sorry_something_went_wrong": "عفوا ، حدث خطأ ما",
+    "error_404_Page_not_found._Sorry,_the_page_you_are_looking_for_does_not_exist": "خطأ 404 لم يتم العثور على الصفحة. عذرا الصفحة التي تبحث عنها غير موجودة ",
+    "return_to_the_dashboard": "العودة إلى لوحة القيادة"
   },
   "Table": {
     "header": "",
@@ -340,9 +342,11 @@
     "reseller_details": "تفاصيل اعادة البيع",
     "reseller": "البائعين",
     "student_package": "حزمة الطالب",
-    "collection":"تحصيل",
-    "profile":"الملف الشخصي"
-    },
+    "collection": "تحصيل",
+    "profile": "الملف الشخصي",
+    "role_details": "تفاصيل الأدوار",
+    "created_at": "تم إنشاؤه في"
+  },
   "education_class_actions": {
     "Student_Records": "سجلات الطلاب",
     "Attendance": "الحضور",
@@ -457,14 +461,15 @@
     "city": "المحافظة",
     "personal_image": "صورة شخصية",
     "id_image": "صورة الهوية",
-    "grade":"الصفوف",
-    "subject":"المادة",
-    "unit":"الوحدة",
-    "lesson":"الدرس",
-    "date_of_receipt":"تاريخ الاستلام",
-    "amount_value":"قيمة المبلغ",
-    "email_address":"عنوان البريد الإلكتروني",
-    "current_password":"كلمة المرور الحالية"
+    "grade": "الصفوف",
+    "subject": "المادة",
+    "unit": "الوحدة",
+    "lesson": "الدرس",
+    "date_of_receipt": "تاريخ الاستلام",
+    "amount_value": "قيمة المبلغ",
+    "email_address": "عنوان البريد الإلكتروني",
+    "current_password": "كلمة المرور الحالية",
+    "created_at": "تم إنشاؤه في"
   },
   "select": {
     "enums": {
@@ -721,7 +726,6 @@
       "admin": "المسؤول",
       "branchAdmin": "مسؤول الفروع"
     },
-
     "array": {
       "Period": {
         "Today": "اليوم",
@@ -762,7 +766,6 @@
     "waiting": "قيد الانتظار",
     "done": "انتهى"
   },
-
   "sidebar": {
     "dashboard": "لوحة القيادة",
     "course": "الصفوف",
@@ -775,7 +778,7 @@
     "subject_details": "تفاصيل المادة",
     "logout": "تسجيل الخروج",
     "branch": "الفروع",
-    "role": "الادوار",
+    "role": "الأدوار",
     "admin": "المسؤولون",
     "subject": "المواد",
     "tags": "كلمات مفتاحية",
@@ -794,10 +797,10 @@
     "reseller": "البائعين",
     "param": "معامل",
     "student_package": "حزمة الطالب",
-    "quiz":"الاختبارات",
-    "questionBank":"بنك الأسئلة",
-    "notifications":"الإشعارات",
-    "profile":"الملف الشخصي"
+    "quiz": "الاختبارات",
+    "questionBank": "بنك الأسئلة",
+    "notifications": "الإشعارات",
+    "profile": "الملف الشخصي"
   },
   "message": {
     "some_thing_went_wrong": "حدث خطأ ما",
@@ -812,7 +815,7 @@
     "teacher": "المعلمون",
     "payment": "الدفعات",
     "branch": "الفروع",
-    "role": "الادوار",
+    "role": "الأدوار",
     "admin": "المسؤولون",
     "note": "ملاحظات",
     "status": "حالة",
@@ -825,18 +828,18 @@
     "user": "مستخدم",
     "param": "معامل",
     "student_package": "حزمة الطالب",
-    "users":"المستخدمون",
-    "students":"الطلاب",
-    "students_details":"تفاصيل الطلاب",
+    "users": "المستخدمون",
+    "students": "الطلاب",
+    "students_details": "تفاصيل الطلاب",
     "add_reseller": "إضافة بائع",
     "grade": "الصفوف",
     "report": "تقرير",
     "tags": "كلمات مفتاحية",
-    "reseller":"البائعين",
-    "QuestionBank":"بنك الأسئلة",
-    "reseller_details":"تفاصيل البائع",
-    "notifications":"الإشعارات",
-    "profile":"الملف الشخصي"
+    "reseller": "البائعين",
+    "QuestionBank": "بنك الأسئلة",
+    "reseller_details": "تفاصيل البائع",
+    "notifications": "الإشعارات",
+    "profile": "الملف الشخصي"
   },
   "page_header": {
     "home": "لوحة القيادة",
@@ -844,7 +847,7 @@
     "teacher": " المعلمون",
     "payment": " الدفعات",
     "branch": " الفروع",
-    "role": " الادوار",
+    "role": " الأدوار",
     "student": " قائمة الطلاب  ",
     "admin": " المسؤولون",
     "student_details": "تفاصيل الطالب",
@@ -874,17 +877,18 @@
     "add_reseller": " البائعين / إضافة بائع ",
     "param": "معامل",
     "student_package": "حزمة الطالب",
-    "QuestionBank":"بنك الأسئلة",
-    "reseller_details":"تفاصيل البائع",
-    "notifications":"الإشعارات",
-    "profile":"الملف الشخصي"
+    "QuestionBank": "بنك الأسئلة",
+    "reseller_details": "تفاصيل البائع",
+    "notifications": "الإشعارات",
+    "profile": "الملف الشخصي",
+    "user": "مستخدم"
   },
   "table": {
     "student": "قائمة الطلاب",
     "reseller": "البائعين",
     "grade": "قائمة الصفوف",
     "subjects": "مواد الصف",
-    "QuestionBank":"بنك الأسئلة"
+    "QuestionBank": "بنك الأسئلة"
   },
   "alphabet": {
     "A": "A",
@@ -915,4 +919,4 @@
     "Z": "Z"
   },
   "upcoming": ""
-}
+}

src/types/FilterLayout.ts

@@ -0,0 +1,8 @@
+export type FilterLayout = {
+    filterTitle: string;
+    sub_children: any;
+    search_by?:string
+    width?:string
+    haveFilter?:boolean
+  };
+