report index page , show page and notification page

2024-11-06 12:09:23 +03:00 · 2024-11-06 12:09:23 +03:00 · ecbcbf67cb
commit ecbcbf67cb
parent 547f71f840
31 changed files with 597 additions and 65 deletions
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@ -25,6 +25,7 @@
    "Viewelement",
    "webp",
    "Xmark",
+    "ZAKER",
    "zustand",
    "مطلوب"
  ],
--- a/index.html
+++ b/index.html
@ -14,7 +14,7 @@
    />
    <script type="module" src="/src/index.tsx"></script>

-    <title>NERD DASHBOARD</title>
+    <title>ZAKER DASHBOARD</title>
  </head>
  <body dir="rtl">
    <noscript>You need to enable JavaScript to run this app.</noscript>
--- a/src/Components/Layout/Navbar/NavBarRightSide.tsx
+++ b/src/Components/Layout/Navbar/NavBarRightSide.tsx
@ -38,7 +38,7 @@ const NavBarRightSide = () => {
          icon={<CiCirclePlus size={25} />}
        />
        <TooltipComp
-          // onClick={()=>(Navigate('/notifications'))}
+          onClick={()=>(Navigate('/notifications'))}
          className="NotificationsIcon"
          note="notification"
          color="#E0E0E0"
--- a/src/Pages/Admin/Notifications/AddNotification/Model/AddModel.tsx
+++ b/src/Pages/Admin/Notifications/AddNotification/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 { useAddNotification } from "../../../../../api/notification";
+
+const AddModel: React.FC = () => {
+  const { mutate, status } = useAddNotification();
+
+  const handleSubmit = (values: any) => {
+    mutate({
+      ...values,
+    });
+  };
+  return (
+    <>
+      <LayoutModel
+        status={status as QueryStatusEnum}
+        ModelEnum={ModalEnum.NOTIFICATION_ADD}
+        modelTitle="notification"
+        handleSubmit={handleSubmit}
+        getInitialValues={getInitialValues({})}
+        getValidationSchema={getValidationSchema}
+      >
+        <ModelForm />
+      </LayoutModel>
+    </>
+  );
+};
+
+export default AddModel;
--- a/src/Pages/Admin/Notifications/AddNotification/Model/EditModel.tsx
+++ b/src/Pages/Admin/Notifications/AddNotification/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 { handelImageState } from "../../../../../utils/DataToSendImageState";
+import { useUpdateNotification } from "../../../../../api/notification";
+
+const EditModel: React.FC = () => {
+  const { mutate, status } = useUpdateNotification();
+  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.NOTIFICATION_EDIT}
+        modelTitle="notification"
+        handleSubmit={handleSubmit}
+        getInitialValues={getInitialValues(objectToEdit)}
+        getValidationSchema={getValidationSchema}
+        isAddModal={false}
+      >
+        <ModelForm />
+      </LayoutModel>
+    </>
+  );
+};
+
+export default EditModel;
--- a/src/Pages/Admin/Notifications/AddNotification/Model/FilterForm.tsx
+++ b/src/Pages/Admin/Notifications/AddNotification/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;
--- a/src/Pages/Admin/Notifications/AddNotification/Model/ModelForm.tsx
+++ b/src/Pages/Admin/Notifications/AddNotification/Model/ModelForm.tsx
@ -0,0 +1,20 @@
+import { Col, Row } from "reactstrap";
+import ValidationField from "../../../../../Components/ValidationField/ValidationField";
+
+const Form = () => {
+  return (
+    <Row className="w-100">
+      <Col>
+        <ValidationField name="title" placeholder="title" label="title" />
+        <ValidationField name="body" placeholder="body" label="body" />
+
+      </Col>
+      <Col>
+        <ValidationField name="seen" placeholder="seen" label="seen" />
+        <ValidationField name="notifiable_type" placeholder="notifiable_type" label="notifiable_type" />
+      </Col>
+    </Row>
+  );
+};
+
+export default Form;
--- a/src/Pages/Admin/Notifications/AddNotification/Model/formUtil.ts
+++ b/src/Pages/Admin/Notifications/AddNotification/Model/formUtil.ts
@ -0,0 +1,28 @@
+import * as Yup from "yup";
+import { Grade, GradeInitialValues } from "../../../../../types/Grade";
+import { Notification } from "../../../../../types/Notification";
+
+export const getInitialValues = (
+  objectToEdit: Partial<Notification>,
+): any => {
+  return {
+    id: objectToEdit?.id,
+    title: objectToEdit?.title ?? "",
+    seen: objectToEdit?.seen ?? "",
+    body: objectToEdit?.body ?? "",
+    notifiable_type: objectToEdit?.notifiable_type ?? "",
+
+
+  };
+};
+
+export const getValidationSchema = () => {
+  // validate input
+  return Yup.object().shape({
+    title: Yup.string().required("validation.required"),
+    seen: Yup.string().required("validation.required"),
+    body: Yup.string().required("validation.required"),
+    notifiable_type: Yup.string().required("validation.required"),
+
+  });
+};
--- a/src/Pages/Admin/Notifications/AddNotification/Page.tsx
+++ b/src/Pages/Admin/Notifications/AddNotification/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 PageHeader from "../../../../Layout/Dashboard/PageHeader";
+import FilterLayout from "../../../../Layout/Dashboard/FilterLayout";
+import FilterForm from "./Model/FilterForm";
+import { canAddNotification } from "../../../../utils/hasAbilityFn";
+import { useDeleteNotification } from "../../../../api/notification";
+
+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 = useDeleteNotification();
+
+  useSetPageTitle([
+    {name:`${t(`page_header.home`)}`, path:"/"},
+    {name:`${t(`page_header.notification`)}`, path:"notification"}
+  ]);
+
+  return (
+    <div className="TableWithHeader">
+      <Suspense fallback={<Spin />}>
+        <PageHeader
+          pageTitle="notification"
+          ModelAbility={ModalEnum?.NOTIFICATION_ADD}
+          canAdd={canAddNotification}
+        />
+        <FilterLayout sub_children={<FilterForm />} filterTitle="table.notification" />
+        <Table />
+        <AddModalForm />
+        <EditModalForm />
+        <DeleteModalForm
+          deleteMutation={deleteMutation}
+          ModelEnum={ModalEnum?.NOTIFICATION_DELETE}
+        />
+      </Suspense>
+    </div>
+  );
+};
+
+export default TableHeader;
--- a/src/Pages/Admin/Notifications/AddNotification/Table.tsx
+++ b/src/Pages/Admin/Notifications/AddNotification/Table.tsx
@ -0,0 +1,24 @@
+import { useColumns } from "./useTableColumns";
+import React from "react";
+import DataTable from "../../../../Layout/Dashboard/Table/DataTable";
+import { useFilterState } from "../../../../Components/Utils/Filter/FilterState";
+import { useFilterStateState } from "../../../../zustand/Filter";
+import { useGetAllNotification } from "../../../../api/notification";
+
+const App: React.FC = () => {
+  const { filterState } = useFilterState();
+  const { Filter } = useFilterStateState();
+  const name = Filter?.name ; 
+  const sort_by = Filter?.sort_by ; 
+  
+  const response = useGetAllNotification({
+    pagination: true,
+    ...filterState,
+    name:filterState.name ||  name,
+    sort_by
+  });
+
+  return <DataTable response={response} useColumns={useColumns}  />;
+};
+
+export default App;
--- a/src/Pages/Admin/Notifications/AddNotification/useTableColumns.tsx
+++ b/src/Pages/Admin/Notifications/AddNotification/useTableColumns.tsx
@ -0,0 +1,95 @@
+import { TableColumnsType } from "antd";
+import useModalHandler from "../../../../utils/useModalHandler";
+import { ModalEnum } from "../../../../enums/Model";
+import { useObjectToEdit } from "../../../../zustand/ObjectToEditState";
+import { useTranslation } from "react-i18next";
+import { useNavigate } from "react-router-dom";
+import {
+  canDeleteNotification,
+  canEditNotification,
+} from "../../../../utils/hasAbilityFn";
+import ActionButtons from "../../../../Components/Table/ActionButtons";
+import ColumnsImage from "../../../../Components/Columns/ColumnsImage";
+import { useFilterStateState } from "../../../../zustand/Filter";
+import { Notification } from "../../../../types/Notification";
+
+export const useColumns = () => {
+  const { handel_open_model } = useModalHandler();
+
+  const { setObjectToEdit } = useObjectToEdit((state) => state);
+  const navigate = useNavigate();
+  const { setFilter } = useFilterStateState();
+
+
+  
+  const handelShow = (record: Notification) => {
+    setFilter({})
+    navigate(`${record?.id}`);
+  };
+
+  const handelDelete = (data: Notification) => {
+    setObjectToEdit(data);
+    handel_open_model(ModalEnum?.NOTIFICATION_DELETE);
+  };
+
+  const handleEdit = (record: Notification) => {
+    setObjectToEdit(record);
+    handel_open_model(ModalEnum?.NOTIFICATION_EDIT);
+  };
+  const [t] = useTranslation();
+
+  const columns: TableColumnsType<Notification> = [
+    {
+      title: t("columns.id"),
+      dataIndex: "id",
+      key: "id",
+      align: "center",
+      render: (_text, record) => record?.id,
+    },
+    {
+      title: `${t("columns.body")}`,
+      dataIndex: "body",
+      key: "body",
+      align: "center",
+      render: (_text, record) => record?.body,
+      ellipsis:true
+    },
+    {
+      title: `${t("columns.seen")}`,
+      dataIndex: "seen",
+      key: "seen",
+      align: "center",
+      render: (_text, record) => record?.seen,
+      ellipsis:true
+    },
+    {
+      title: `${t("columns.notifiable_type")}`,
+      dataIndex: "notifiable_type",
+      key: "notifiable_type",
+      align: "center",
+      render: (_text, record) => record?.notifiable_type,
+      ellipsis:true
+    },
+    {
+
+      title: t("columns.procedure"),
+      key: "actions",
+      align: "center",
+      width: "25vw",
+      render: (_text, record, index) => {
+        return (
+          <ActionButtons
+            canDelete={canDeleteNotification}
+            canEdit={canEditNotification}
+            index={index}
+            onDelete={() => handelDelete(record)}
+            onEdit={() => handleEdit(record)}
+            onShow={() => handelShow(record)}
+          />
+        );
+      },
+    },
+  ];
+
+  return columns;
+};
--- a/src/Pages/Admin/Notifications/Page.tsx
+++ b/src/Pages/Admin/Notifications/Page.tsx
@ -27,7 +27,7 @@ const Page = () => {
        <div className='notification_header'>
            <h3>{t("header.notifications")}</h3>
            <TrashButton 
-             onClick={handleDeleteAll} 
+            onClick={handleDeleteAll} 
             name='delete_all'/>
        </div>
        <Divider/>
--- a/src/Pages/Admin/Report/Model/FilterForm.tsx
+++ b/src/Pages/Admin/Report/Model/FilterForm.tsx
@ -1,19 +1,31 @@
 import React from "react";
 import ValidationField from "../../../../Components/ValidationField/ValidationField";
 import { Col, Row } from "reactstrap";
+import { useGetAllStudent } from "../../../../api/student";
+import { useGetAllQuestion } from "../../../../api/Question";

 const FilterForm = () => {
+  const {data:StudentData} = useGetAllStudent();
+  const {data:QuestionData} = useGetAllQuestion();
+
+  console.log(QuestionData?.data);
+  
  return (
    <div>
      <Row>
        <Col>
-          <ValidationField placeholder="name" label="name" name="name" />
-          <ValidationField placeholder="name" label="name" name="name" />
-        </Col>
-        <Col>
-          <ValidationField placeholder="name" label="name" name="name" />
-          <ValidationField placeholder="name" label="name" name="name" />
+          <ValidationField placeholder="content" label="content" name="content" />
+          <ValidationField placeholder="student_name" label="student_name" name="student_id"  type="Select"           
+            option={StudentData?.data?.map((e: any) => ({
+              ...e,
+              fullName: `${e.first_name} ${e.last_name}`
+            }))} 
+            fieldNames={{ 
+              label: "fullName",
+              value: "id"
+            }}/>
        </Col>
+          <ValidationField placeholder="question_content" label="question_content" name="question_id" type="Select" option={QuestionData?.data} fieldNames={{label:"content" ,value:"id"}}  />
      </Row>
    </div>
  );
--- a/src/Pages/Admin/Report/Page.tsx
+++ b/src/Pages/Admin/Report/Page.tsx
@ -33,8 +33,8 @@ const TableHeader = () => {
      <Suspense fallback={<Spin />}>
        <PageHeader
          pageTitle="report"
-          ModelAbility={ModalEnum?.REPORT_ADD}
-          canAdd={canAddReport}
+          // ModelAbility={ModalEnum?.REPORT_ADD}
+          // canAdd={canAddReport}
        />
        <FilterLayout
          sub_children={<FilterForm />}
--- a/src/Pages/Admin/Report/Show/Page.tsx
+++ b/src/Pages/Admin/Report/Show/Page.tsx
@ -0,0 +1,15 @@
+import React from 'react'
+import ReportInfo from './ReportInfo';
+const EditQuestionPage = React.lazy(
+    () => import("../../question/EditPage"),
+  );
+const Page = () => {
+  return (
+    <>
+        <ReportInfo/>
+        <EditQuestionPage/>  
+    </>
+  )
+}
+
+export default Page
--- a/src/Pages/Admin/Report/Show/ReportInfo.tsx
+++ b/src/Pages/Admin/Report/Show/ReportInfo.tsx
@ -0,0 +1,25 @@
+import React from 'react'
+import { useGetAllReport } from '../../../../api/report'
+import { useTranslation } from 'react-i18next'
+import { ParamsEnum } from '../../../../enums/params';
+import { useParams } from 'react-router-dom';
+
+const ReportInfo = () => {
+  const {report_id}  = useParams<ParamsEnum>();
+
+    const {data} = useGetAllReport({
+        show:report_id
+    })
+    const {t} = useTranslation();
+
+  return (
+    <div className='report_info'>
+        <div>
+            <h4>{t("practical.student_name")} : <p>{!!data?.data?.student?.first_name ?data?.data?.student?.first_name + " " + data?.data?.student?.last_name: " "}</p> </h4>
+            <h4>{t("practical.report_content")} : <p>{data?.data?.content}</p> </h4>
+        </div>
+    </div>
+  )
+}
+
+export default ReportInfo
--- a/src/Pages/Admin/Report/useTableColumns.tsx
+++ b/src/Pages/Admin/Report/useTableColumns.tsx
@ -1,11 +1,14 @@
 import { TableColumnsType } from "antd";
-import { report } from "../../../types/Item";
 import { ModalEnum } from "../../../enums/Model";
 import { useObjectToEdit } from "../../../zustand/ObjectToEditState";
 import { useModalState } from "../../../zustand/Modal";
 import { useTranslation } from "react-i18next";
-import { canDeleteReport, canEditReport } from "../../../utils/hasAbilityFn";
+import { canDeleteReport, canEditReport, canShowReport } from "../../../utils/hasAbilityFn";
 import ActionButtons from "../../../Components/Table/ActionButtons";
+import ColumnsImage from "../../../Components/Columns/ColumnsImage";
+import { useFilterStateState } from "../../../zustand/Filter";
+import { useNavigate } from "react-router-dom";
+import { Report } from "../../../types/Report";

 export const useColumns = () => {
  const [t] = useTranslation();
@ -13,26 +16,57 @@ export const useColumns = () => {
  const { setIsOpen } = useModalState((state) => state);

  const { setObjectToEdit } = useObjectToEdit((state) => state);
-  const handelDelete = (record: any) => {
-    setObjectToEdit(record);
-    setIsOpen(ModalEnum?.REPORT_DELETE);
-  };
-  const handleEdit = (record: any) => {
-    setObjectToEdit(record);
-    setIsOpen(ModalEnum?.REPORT_EDIT);
+
+  const navigate = useNavigate();
+  const { setFilter } = useFilterStateState();
+
+  const handelShow = (record: any) => {
+    setFilter({})
+    navigate(`${record?.id+"/"+record?.question?.id}`);
+    console.log(record);
+    
+    
  };

-  const columns: TableColumnsType<report> = [
+  const columns: TableColumnsType<Report> = [
+
    {
-      title: t("columns.id"),
-      dataIndex: "id",
-      key: "id",
+      title: t("columns.content"),
+      dataIndex: "content",
+      key: "content",
      align: "center",
    },
    {
-      title: t("columns.name"),
-      dataIndex: "name",
-      key: "name",
+      title: t("columns.created_at"),
+      dataIndex: "created_at",
+      key: "created_at",
+      align: "center",
+    },
+    // {
+    //   title: t("columns.image"),
+    //   dataIndex: "image",
+    //   key: "image",
+    //   align: "center",
+    //   render: (_text: any, record: Report) => {
+    //     let str = record?.image;
+
+    //     return  <ColumnsImage src={str}/>  ;
+    //   },
+    // },
+    {
+      title: t("columns.question_name"),
+      dataIndex: "question_id",
+      key: "question_id",
+      render: (_text: any, record: any) => record?.question?.content,
+      ellipsis:true,
+      align: "center",
+    },
+
+    {
+      title: t("columns.student_name"),
+      dataIndex: "student_id",
+      key: "student_id",
+      render: (_text: any, record: any) => !!record?.student?.first_name ? record?.student?.first_name + " " +record?.student?.last_name : "" ,
      align: "center",
    },

@ -42,14 +76,15 @@ export const useColumns = () => {
      align: "center",
      width: "25vw",
      render: (_text, record, index) => {
+        
        return (
+          !!record?.question?.id ?
          <ActionButtons
-            canDelete={canEditReport}
-            canEdit={canDeleteReport}
+            canShow={canShowReport}
            index={index}
-            onDelete={() => handelDelete(record)}
-            onEdit={() => handleEdit(record)}
+            onShow={() => handelShow(record)}
          />
+          : " "
        );
      },
    },
--- a/src/Routes.tsx
+++ b/src/Routes.tsx
@ -41,7 +41,9 @@ const EditReSeller = React.lazy(() => import("./Pages/Admin/Reseller/Edit/Page")

 const User = React.lazy(() => import("./Pages/Admin/User/Page"));
 const QuestionBank = React.lazy(() => import("./Pages/Admin/QuestionBank/Page"));
-const Notifications = React.lazy(() => import("./Pages/Admin/Notifications/Page"));
+const AllNotifications = React.lazy(() => import("./Pages/Admin/Notifications/Page"));
+const Notifications = React.lazy(() => import("./Pages/Admin/Notifications/AddNotification/Page"));
+
 const Profile = React.lazy(() => import("./Pages/Admin/Profile/Page"));
 const Setting = React.lazy(() => import("./Pages/Admin/Setting/Page"));

@ -51,6 +53,7 @@ const Roles = React.lazy(() => import("./Pages/Admin/Roles/Page"));
 const Coupon = React.lazy(() => import("./Pages/Admin/Coupon/Page"));

 const Report = React.lazy(() => import("./Pages/Admin/Report/Page"));
+const ShowReport = React.lazy(() => import("./Pages/Admin/Report/Show/Page"));
 const Param = React.lazy(() => import("./Pages/Admin/Param/Page"));

 /// RESELLER ///
@ -69,6 +72,7 @@ import { TbCategory } from "react-icons/tb";
 import { UserTypeEnum } from "./enums/UserType";
 import { FaTags } from "react-icons/fa6";
 import { CiSquareQuestion } from "react-icons/ci";
+import { IoNotifications } from "react-icons/io5";

 export const menuItems: TMenuItem[] = [
  {
@ -156,17 +160,26 @@ export const menuItems: TMenuItem[] = [
    prevPath: 0,
  },

-  // {
-  //   header: "page_header.report",
-  //   element: <Report />,
-  //   icon: <FaPaperclip />,
-  //   text: "sidebar.report",
-  //   path: `/${ABILITIES_ENUM?.Report}`,
-  //   abilities: ABILITIES_ENUM?.Report,
-  //   abilities_value: ABILITIES_VALUES_ENUM.INDEX,
-  //   prevPath: 0,
-  // },
-
+  {
+    header: "page_header.report",
+    element: <Report />,
+    icon: <FaPaperclip />,
+    text: "sidebar.report",
+    path: `/${ABILITIES_ENUM?.Report}`,
+    abilities: ABILITIES_ENUM?.Report,
+    abilities_value: ABILITIES_VALUES_ENUM.INDEX,
+    prevPath: 0,
+  },
+  {
+    header: "page_header.add_notification",
+    element: <Notifications />,
+    icon: <IoNotifications />,
+    text: "sidebar.notification",
+    path: `/add_${ABILITIES_ENUM?.NOTIFICATIONS}`,
+    abilities: ABILITIES_ENUM?.NOTIFICATIONS,
+    abilities_value: ABILITIES_VALUES_ENUM.INDEX,
+    prevPath: 0,
+  },
  // {
  //   header: "page_header.param",
  //   element: <Param />,
@ -358,7 +371,7 @@ export const CrudRoute: TCrudRoute[] = [
  },
  {
    header: "page_header.notifications",
-    element: <Notifications />,
+    element: <AllNotifications />,
    path: `/${ABILITIES_ENUM?.NOTIFICATIONS}`,
    abilities: ABILITIES_ENUM?.NOTIFICATIONS,
    abilities_value: ABILITIES_VALUES_ENUM.INDEX,
@ -416,6 +429,16 @@ export const CrudRoute: TCrudRoute[] = [
    type:UserTypeEnum.RE_SELLER

  },
+
+  {
+    header: "page_header.report",
+    element: <ShowReport />,
+    path: `/${ABILITIES_ENUM?.Report}/:${ParamsEnum?.REPORT_ID}/:${ParamsEnum?.QUESTION_ID}`,
+    abilities: ABILITIES_ENUM?.Report,
+    abilities_value: ABILITIES_VALUES_ENUM.INDEX,
+    prevPath: 0,
+
+  },
 ];

 export const AppRoutes: Record<string, string> = Object.fromEntries(
--- a/src/Styles/Pages/Report.scss
+++ b/src/Styles/Pages/Report.scss
@ -0,0 +1,24 @@
+.report_info{
+    display: flex;align-items: center;
+    width: 98%;
+    margin-inline: auto;
+    margin-block: 10px;
+    div{    
+        padding: 20px;
+        width: 100%;
+        display: flex;
+        // align-items: center;
+        flex-direction: column;
+        gap: 20px;
+        h4{
+            color: var(--text);
+            display: flex;align-items: center;
+            gap: 20px;
+            font-weight: bold;
+            p{
+                font-size: 20px;
+                color: var(--subtext) !important;
+            }
+        }
+    }
+}
--- a/src/Styles/Pages/index.scss
+++ b/src/Styles/Pages/index.scss
@ -16,3 +16,5 @@
@import './collections.scss';
@import './setting.scss';
@import './sales.scss';
+@import './Report.scss';
+
--- a/src/api/config.ts
+++ b/src/api/config.ts
@ -1,4 +1,4 @@
-export const BaseURL = "https://nerd-back.point-dev.net/api/";
-// export const BaseURL = "http://192.168.1.106:8000/api/";
+// export const BaseURL = "https://nerd-back.point-dev.net/api/";
+export const BaseURL = "http://192.168.43.153:8080/api/";

 export const HEADER_KEY = "X-Custom-Query-Key";
--- a/src/api/notification.ts
+++ b/src/api/notification.ts
@ -0,0 +1,20 @@
+import useAddMutation from "./helper/useAddMutation";
+import useDeleteMutation from "./helper/useDeleteMutation";
+import useGetQuery from "./helper/useGetQuery";
+import useUpdateMutation from "./helper/useUpdateMutation";
+
+const API = {
+  GET: "/notification",
+  ADD: "/notification",
+  DELETE: "/notification",
+  UPDATE: "/notification",
+};
+
+const KEY = "notification";
+
+export const useGetAllNotification = (params?: any, options?: any) =>
+  useGetQuery(KEY, API.GET, params, options);
+export const useAddNotification = () => useAddMutation(KEY, API.ADD);
+export const useUpdateNotification = (params?: any) => useUpdateMutation(KEY, API.GET);
+export const useDeleteNotification = (params?: any) =>
+  useDeleteMutation(KEY, API.DELETE);
--- a/src/api/report.ts
+++ b/src/api/report.ts
@ -14,6 +14,9 @@ const KEY = "report";

 export const useGetAllReport = (params?: any, options?: any) =>
  useGetQuery(KEY, API.GET, params, options);
+
+
+
 export const useAddReport = () => useAddMutation(KEY, API.ADD);
 export const useUpdateReport = (params?: any) =>
  useUpdateMutation(KEY, API.GET);
--- a/src/config/AppKey.ts
+++ b/src/config/AppKey.ts
@ -1,4 +1,4 @@
-export const PROJECT_NAME = "SCHOOL_DASHBOARD_EXERCISE";
+export const PROJECT_NAME = "ZAKER_EXERCISE";

 export const LANGUAGE_KEY = PROJECT_NAME + "_LANGUAGE";
 export const Currency = "ل.س";
--- a/src/enums/Model.ts
+++ b/src/enums/Model.ts
@ -249,4 +249,11 @@ export enum ModalEnum {
  Financial_Collection_EDIT = "Financial_Collection.edit",
  Financial_Collection_ADD = "Financial_Collection.add",
  Financial_Collection_DELETE = "Financial_Collection.delete",
+
+    ///NOTIFICATION
+
+    NOTIFICATION_EDIT = "NOTIFICATION.edit",
+    NOTIFICATION_ADD = "NOTIFICATION.add",
+    NOTIFICATION_DELETE = "NOTIFICATION.delete",
+  
 }
--- a/src/enums/params.ts
+++ b/src/enums/params.ts
@ -16,6 +16,7 @@ export enum ParamsEnum {
  CITY_ID = "city_id",
  Collection_ID  = "collection_id",
  Manager_ID  = "manager_id",
+  REPORT_ID = "report_id"
  // RESELLER_ID = "reseller_id",


--- a/src/translate/ar.json
+++ b/src/translate/ar.json
@ -243,7 +243,8 @@
    "unit":"الوحدة",
    "lesson":"الدرس",
    "code":"رمز",
-    "due_to":"صالح الى"
+    "due_to":"صالح الى",
+    "question_name":"اسم السؤال"
  },
  "practical": {
    "to_confirm_deletion_please_re_enter": "لتأكيد الحذف، يرجى إعادة الإدخال",
@ -326,7 +327,9 @@
    "sale":"بيع",
    "financial_collection":"التحصيلات",
    "show_collection":"حصيلة",
-    "does_not_exist_notification":"عذرا لا يوجد إشعارات..."
+    "does_not_exist_notification":"عذرا لا يوجد إشعارات...",
+    "student_name":"اسم الطالب",
+    "report_content":"محتوى التقرير"
  },
  "Table": {
    "header": "",
@ -422,7 +425,8 @@
    "financial_collection":"التحصيلات",
    "show_collection":"حصيلة",
    "city":"مدينة",
-    "financialCollection":"التحصيلات"
+    "financialCollection":"التحصيلات",
+    "notification":"الاشعارات"
  },
  "education_class_actions": {
    "Student_Records": "سجلات الطلاب",
@ -565,7 +569,8 @@
    "activation_date":"تاريخ التنشيط",
    "expiration_date":"تاريخ الالغاء",
    "package":"حزمة",
-    "contact_number":"رقم الهاتف"
+    "contact_number":"رقم الهاتف",
+    "question_content":"محتوى السؤال"
  },
  "select": {
    "enums": {
@ -904,7 +909,8 @@
    "Area":"المنطقة",
    "city":"مدينة",
    "coupon":"قسيمة",
-    "financial_collection":"التحصيلات"
+    "financial_collection":"التحصيلات",
+    "notification":"الاشعارات"
  },
  "message": {
    "some_thing_went_wrong": "حدث خطأ ما",
@ -956,7 +962,8 @@
    "edit_reseller":"تعديل البائع",
    "Coupon":"قسيمة",
    "financial_collection":"التحصيلات",
-    "show_collection":"حصيلة"
+    "show_collection":"حصيلة",
+    "notification":"الاشعارات"
  },
  "page_header": {
    "home": "لوحة القيادة",
@ -1014,7 +1021,8 @@
    "city":"مدينة",
    "questionBank":"بنك الأسئلة",
    "roles":"الدور",
-    "coupon":"قسيمة"
+    "coupon":"قسيمة",
+    "notification":"الاشعارات"
  },
  "table": {
    "student": "قائمة الطلاب",
--- a/src/types/Item.ts
+++ b/src/types/Item.ts
@ -320,11 +320,7 @@ export interface Question {
  meta?:{}
 }

-export type report = {
-  id: number;
-  key?: number;
-  name: string;
-};
+

 export type user = {
  id: number;
--- a/src/types/Notification.ts
+++ b/src/types/Notification.ts
@ -0,0 +1,14 @@
+import { Nullable } from "./App";
+
+// Define the Teacher interface
+
+export interface Notification {
+  id: number; // Unique identifier for the user
+  name: string; // Name of the user
+  title:string;
+  body:string;
+  seen:string;
+  notifiable_type:string;
+
+
+}
--- a/src/types/Report.ts
+++ b/src/types/Report.ts
@ -0,0 +1,13 @@
+import { Nullable } from "./App";
+
+// Define the Teacher interface
+
+
+export type Report = {
+  id: number; // Unique identifier for the user
+  content: string; // Name of the user
+  image: any; // URL of the user's icon
+  question_id: number; // URL of the user's icon
+  student_id: number; // URL of the user's icon
+
+};
--- a/src/utils/hasAbilityFn.ts
+++ b/src/utils/hasAbilityFn.ts
@ -547,12 +547,7 @@ export const canAddStatus =
  hasAbility(ABILITIES_ENUM.ABSENCE, ABILITIES_VALUES_ENUM.STORE) &&
  hasAbility(ABILITIES_ENUM.LATE_ARRIVAL, ABILITIES_VALUES_ENUM.STORE);

-/// notification

-export const canAddNotification = hasAbility(
-  ABILITIES_ENUM.NOTE,
-  ABILITIES_VALUES_ENUM.STORE,
-);

 /// MarksReport

@ -694,6 +689,10 @@ export const canDeleteReport = hasAbility(
  ABILITIES_ENUM.Report,
  ABILITIES_VALUES_ENUM.DELETE,
 );
+export const canShowReport = hasAbility(
+  ABILITIES_ENUM.Report,
+  ABILITIES_VALUES_ENUM.SHOW,
+);

 /// User

@ -845,3 +844,30 @@ export const canShowCollection = hasAbility(
  ABILITIES_ENUM.Collections,
  ABILITIES_VALUES_ENUM.SHOW,
 );
+
+
+
+
+
+///// Notification
+
+export const canAddNotification = hasAbility(
+  ABILITIES_ENUM.EDUCATION_CLASS,
+  ABILITIES_VALUES_ENUM.STORE,
+);
+export const canEditNotification = hasAbility(
+  ABILITIES_ENUM.EDUCATION_CLASS,
+  ABILITIES_VALUES_ENUM.UPDATE,
+);
+export const canDeleteNotification = hasAbility(
+  ABILITIES_ENUM.EDUCATION_CLASS,
+  ABILITIES_VALUES_ENUM.DELETE,
+);
+export const canShowNotification = hasAbility(
+  ABILITIES_ENUM.EDUCATION_CLASS,
+  ABILITIES_VALUES_ENUM.SHOW,
+);
+export const canIndexNotification = hasAbility(
+  ABILITIES_ENUM.EDUCATION_CLASS,
+  ABILITIES_VALUES_ENUM.INDEX,
+);