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

src/Components/Ui/TrashButton.tsx

@@ -0,0 +1,15 @@
+import { Button } from 'antd';
+import { useTranslation } from 'react-i18next';
+import { HiOutlineTrash } from "react-icons/hi2";
+
+const TrashButton = ({name,onClick,icon = true}:{name:string,onClick?:() =>void,icon?:boolean}) => {
+    const {t} = useTranslation();
+  return (
+    <Button className='trash_button' onClick={onClick}>
+        { icon ? <HiOutlineTrash/> : "" }
+        {t(`header.${name}`)}
+    </Button>
+  )
+}
+
+export default TrashButton

src/Layout/Ui/NotFoundPage.tsx

@@ -1,20 +1,26 @@
-import React from "react";
 import { useNavigate } from "react-router-dom";
 import ProtectedRouteProvider from "../../lib/ProtectedRouteProvider";
+import { useTranslation } from "react-i18next";
+import { Button } from "antd";
+import { FaArrowRight } from "react-icons/fa6";
 
 function NotFoundPage() {
   const navigate = useNavigate();
+  const {t} = useTranslation();
+
   return (
     <ProtectedRouteProvider className="not_found_page">
-      <div className="container-not-found">
+
-        <p>
+      <div className="not_found_container">
-          404 <h6>|</h6>This page could not be found
+        <img src="/App/Error.png" alt="Error 404" width={600}/>
-        </p>
+        <h3>{t("practical.sorry_something_went_wrong")}</h3>
-        <div>
+        <p>{t("practical.error_404_Page_not_found._Sorry,_the_page_you_are_looking_for_does_not_exist")}</p>
-          {" "}
+        <Button className="not_found_button" onClick={() => navigate("/", { replace: true })}>
-          <button onClick={() => navigate("/", { replace: true })}>Home</button>
+          <FaArrowRight/>
-        </div>
+          {t("practical.return_to_the_dashboard")}
+        </Button>
       </div>
+
     </ProtectedRouteProvider>
   );
 }

src/Pages/Admin/Notifications/Card.tsx

@@ -0,0 +1,29 @@
+import TrashButton from "../../../Components/Ui/TrashButton"
+import { notifications } from "../../../types/Notifications"
+
+
+const Card = ({name,date,image,id,pop,setPop}:notifications) => {
+    const handleDeleteOne = () => {
+        setPop(pop?.filter((item:any)=> item?.id !== id))
+    }
+    
+  return (
+        <div className="notification_card" key={id}>
+            <div>
+                <img src={image} alt={name} />
+                <div>
+                    <h5>{name}</h5>
+                    <p>{date}</p>
+                </div>
+            </div>
+            <div>
+                <TrashButton 
+                 onClick={handleDeleteOne} 
+                 name="delete"
+                 icon={false}/>
+            </div>
+        </div>  
+    )
+}
+
+export default Card

src/Pages/Admin/Notifications/NotificationArray.ts

@@ -0,0 +1,16 @@
+import { notifications } from "../../../types/Notifications";
+
+export const NotificationArray:notifications[] = [
+    {id:1,name:"تم إضافة تحصيل جديد بواسطة شاون",date:"1/10/2010",image:"/Image/faker_user.png"}, 
+    {id:2,name:"moa",date:"منذ ساعة",image:"/Image/faker_user.png"}, 
+    {id:3,name:"moaz",date:"1/10/2010",image:"/Image/faker_user.png"}, 
+    {id:4,name:"hello",date:"1/10/2010",image:"/Image/faker_user.png"}, 
+    {id:5,name:"nop",date:"1/10/2010",image:"/Image/faker_user.png"}, 
+    {id:6,name:"hey",date:"1/10/2010",image:"/Image/faker_user.png"}, 
+    // {id:2,name:"moaz",date:"1/10/2010",image:"/Image/faker_user.png"}, 
+    // {id:2,name:"moaz",date:"1/10/2010",image:"/Image/faker_user.png"}, 
+    // {id:2,name:"moaz",date:"1/10/2010",image:"/Image/faker_user.png"}, 
+    // {id:2,name:"moaz",date:"1/10/2010",image:"/Image/faker_user.png"}, 
+    // {id:2,name:"moaz",date:"1/10/2010",image:"/Image/faker_user.png"}, 
+
+]

src/Pages/Admin/Notifications/Page.tsx

@@ -0,0 +1,41 @@
+import { Divider } from 'antd';
+import { useTranslation } from 'react-i18next'
+import { NotificationArray } from './NotificationArray';
+import { notifications } from '../../../types/Notifications';
+import Card from './Card';
+import TrashButton from '../../../Components/Ui/TrashButton';
+import { useState } from 'react';
+
+const Page = () => {
+    const {t} = useTranslation(); 
+    const [pop, setPop] = useState(NotificationArray)
+
+    const handleDeleteAll = () => {
+        setPop([])
+    }
+    
+  return (
+    <div className='notification_container'>
+        <div className='notification_header'>
+            <h4>{t("header.notifications")}</h4>
+            <TrashButton 
+             onClick={handleDeleteAll} 
+             name='delete_all'/>
+        </div>
+        <Divider/>
+        <div className="notification_body">
+            {pop?.map((not:notifications)=>(
+                <Card
+                 id={not?.id}
+                 name={not?.name} 
+                 date={not?.date} 
+                 pop={pop}
+                 setPop={setPop}
+                 image={not?.image}/>
+            ))}
+        </div>
+    </div>
+  )
+}
+
+export default Page

src/Routes.tsx

@@ -34,6 +34,7 @@ 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"));
+const Notifications = React.lazy(() => import("./Pages/Admin/Notifications/Page"));
 
 /// RESELLER ///
 const Student_Package = React.lazy(
@@ -141,6 +142,16 @@ export const menuItems: TMenuItem[] = [
     abilities_value: ABILITIES_VALUES_ENUM.INDEX,
     prevPath: 0,
   },
+  {
+    header: "page_header.notifications",
+    element: <Notifications />,
+    icon: <FaSellcast />,
+    text: "sidebar.notifications",
+    path: `/${ABILITIES_ENUM?.NOTIFICATIONS}`,
+    abilities: ABILITIES_ENUM?.NOTIFICATIONS,
+    abilities_value: ABILITIES_VALUES_ENUM.INDEX,
+    prevPath: 0,
+  },
 
 
   /// RESELLER /////

src/Styles/App/App.scss

@@ -37,41 +37,66 @@ svg {
 }
 
 .not_found_page {
-  background: black;
   height: 100vh;
   display: flex;
   justify-content: center;
+  text-align: center;
+  padding-top: 30px;
+  .not_found_container{
+    display: flex; flex-direction: column;
     align-items: center;
-
+    gap: 20px;
-  p {
+    p{
-    color: white;
+      color: #6A7287;
-    display: inline;
+      font-size: 17px;
     }
-  h6 {
+    h3{
-    display: inline;
+      font-weight: 900;
-    margin-inline: 20px;
-    height: 140px !important;
-
-    width: 20px;
     }
-  .container-not-found {
+    .not_found_button{
-    display: flex;
+      @include Flex;
-    flex-direction: column;
+      width: 240px;
-    align-items: center;
+      padding: 24px 22px ;
-    div {
+      background: var(--primary);
-      display: flex;
+      color: var(--white);
-      justify-content: center;
-      align-items: center;
-    }
-    button {
       border: none;
-      outline: none;
+      transition: ease-in-out .3s;
-      padding: 8px;
+      &:hover{
-      border-radius: 10px;
+        transform: scale(1.05);
+        background: var(--primary);
+        color: var(--white);
+      }
+    }
+  }
+  // p {
+  //   color: white;
+  //   display: inline;
+  // }
+  // h6 {
+  //   display: inline;
+  //   margin-inline: 20px;
+  //   height: 140px !important;
 
-      margin-inline: 30px;
+  //   width: 20px;
-    }
+  // }
-  }
+  // .container-not-found {
+  //   display: flex;
+  //   flex-direction: column;
+  //   align-items: center;
+  //   div {
+  //     display: flex;
+  //     justify-content: center;
+  //     align-items: center;
+  //   }
+  //   button {
+  //     border: none;
+  //     outline: none;
+  //     padding: 8px;
+  //     border-radius: 10px;
+
+  //     margin-inline: 30px;
+  //   }
+  // }
 }
 
 /* Username */

src/Styles/Pages/index.scss

@@ -11,3 +11,4 @@
 @import "./exercise.scss";
 @import './reSeller.scss';
 @import './InfoCard.scss';
+@import './notifications.scss';

src/Styles/Pages/notifications.scss

@@ -0,0 +1,65 @@
+.notification_container{
+    display: flex; flex-direction: column;
+    width: 96%;
+    margin-inline: auto;
+    padding: 30px 20px ;
+    margin-block: 20px 50px;
+    box-shadow: 2px 2px 8px 3px rgba(0, 0, 0, 0.1);
+    border: 1.5px solid #E9EDF4;
+    border-radius: 10px;
+    .notification_header{
+        display: flex;align-items: center;justify-content: space-between;
+        padding-inline: 20px;
+    }
+    .notification_body{
+        display: flex; flex-direction: column;
+        justify-content: center;
+        padding-inline: 10px ;
+        gap: 30px;
+        // transition: ease-in-out .4s;
+        .notification_card{
+            display: flex; justify-content: space-between;
+            padding: 20px 20px;
+            box-shadow: 2px 2px 8px 2px rgba(0, 0, 0, .05);
+            border: 1.5px solid #E9EDF4;
+            border-radius: 10px;
+            cursor: pointer;
+            >div{
+                display: flex;align-items: center;
+                gap: 14px;
+                img{
+                    width: 70px;
+                }
+                p{
+                    margin-top: 12px;
+                    color: #6A7287;
+                }
+                .trash_button{
+                    visibility: hidden;
+                }
+            }
+            &:hover{
+                .trash_button{
+                    visibility: visible;
+                }
+            }
+        }
+    }
+}
+
+
+.trash_button{
+    background: #E93553;
+    @include Flex;
+    color: var(--white);
+    padding: 20px 23px ;
+    border: none !important;
+    svg{
+        font-size: 22px;
+    }
+    &:hover{
+        background: #E93553 !important;
+        color: var(--white) !important;
+        border: none !important;
+    }
+}

src/enums/abilities.ts

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

src/translate/ar.json

@@ -127,7 +127,10 @@
     "attachment": "المرفق",
     "subject_of_class": "مواد الصف",
     "this_will_un_do_all_your_changes":"سوف يؤدي هذا إلى إلغاء جميع تغييراتك",
-    "edit_question":"تعديل سؤال"
+    "edit_question":"تعديل سؤال",
+    "notifications":"الإشعارات",
+    "delete_all":" حذف الكل",
+    "delete":"حذف"
   },
   "columns": {
     "id": "الرقم التعريفي",
@@ -257,7 +260,10 @@
     "collections":"التحصيلات",
     "collecting_an_amount":"تحصيل مبلغ",
     "governorate":"المحافظة",
-    "id_photo":"صورة الهوية"
+    "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": "",
@@ -781,7 +787,8 @@
     "param": "معامل",
     "student_package": "حزمة الطالب",
     "quiz":"الاختبارات",
-    "questionBank":"بنك الأسئلة"
+    "questionBank":"بنك الأسئلة",
+    "notifications":"الإشعارات"
   },
   "message": {
     "some_thing_went_wrong": "حدث خطأ ما",
@@ -818,7 +825,8 @@
     "tags": "كلمات مفتاحية",
     "reseller":"البائعين",
     "QuestionBank":"بنك الأسئلة",
-    "reseller_details":"تفاصيل البائع"
+    "reseller_details":"تفاصيل البائع",
+    "notifications":"الإشعارات"
   },
   "page_header": {
     "home": "لوحة القيادة",
@@ -857,7 +865,8 @@
     "param": "معامل",
     "student_package": "حزمة الطالب",
     "QuestionBank":"بنك الأسئلة",
-    "reseller_details":"تفاصيل البائع"
+    "reseller_details":"تفاصيل البائع",
+    "notifications":"الإشعارات"
   },
   "table": {
     "student": "قائمة الطلاب",

src/types/Notifications.ts

@@ -0,0 +1,6 @@
+export type notifications = {
+    id:number,
+    name:string,
+    date:string,
+    image:string
+}