diff --git a/public/App/Error.png b/public/App/Error.png new file mode 100644 index 0000000..dd57bd0 Binary files /dev/null and b/public/App/Error.png differ diff --git a/src/Components/Ui/TrashButton.tsx b/src/Components/Ui/TrashButton.tsx new file mode 100644 index 0000000..3e71e64 --- /dev/null +++ b/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 ( + + ) +} + +export default TrashButton \ No newline at end of file diff --git a/src/Layout/Ui/NotFoundPage.tsx b/src/Layout/Ui/NotFoundPage.tsx index 3fdde04..6a3ec1f 100644 --- a/src/Layout/Ui/NotFoundPage.tsx +++ b/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 ( -
-

- 404

|
This page could not be found -

-
- {" "} - -
+ +
+ Error 404 +

{t("practical.sorry_something_went_wrong")}

+

{t("practical.error_404_Page_not_found._Sorry,_the_page_you_are_looking_for_does_not_exist")}

+
+ ); } diff --git a/src/Pages/Admin/Notifications/Card.tsx b/src/Pages/Admin/Notifications/Card.tsx new file mode 100644 index 0000000..e936b14 --- /dev/null +++ b/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 ( +
+
+ {name} +
+
{name}
+

{date}

+
+
+
+ +
+
+ ) +} + +export default Card \ No newline at end of file diff --git a/src/Pages/Admin/Notifications/NotificationArray.ts b/src/Pages/Admin/Notifications/NotificationArray.ts new file mode 100644 index 0000000..b5b00ed --- /dev/null +++ b/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"}, + +] \ No newline at end of file diff --git a/src/Pages/Admin/Notifications/Page.tsx b/src/Pages/Admin/Notifications/Page.tsx new file mode 100644 index 0000000..46930e6 --- /dev/null +++ b/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 ( +
+
+

{t("header.notifications")}

+ +
+ +
+ {pop?.map((not:notifications)=>( + + ))} +
+
+ ) +} + +export default Page \ No newline at end of file diff --git a/src/Routes.tsx b/src/Routes.tsx index 262931e..745ad8a 100644 --- a/src/Routes.tsx +++ b/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: , + icon: , + text: "sidebar.notifications", + path: `/${ABILITIES_ENUM?.NOTIFICATIONS}`, + abilities: ABILITIES_ENUM?.NOTIFICATIONS, + abilities_value: ABILITIES_VALUES_ENUM.INDEX, + prevPath: 0, + }, /// RESELLER ///// diff --git a/src/Styles/App/App.scss b/src/Styles/App/App.scss index a93134f..f2f303b 100644 --- a/src/Styles/App/App.scss +++ b/src/Styles/App/App.scss @@ -37,41 +37,66 @@ svg { } .not_found_page { - background: black; height: 100vh; display: flex; justify-content: center; - align-items: center; - - p { - color: white; - display: inline; - } - h6 { - display: inline; - margin-inline: 20px; - height: 140px !important; - - width: 20px; - } - .container-not-found { - display: flex; - flex-direction: column; + text-align: center; + padding-top: 30px; + .not_found_container{ + display: flex; flex-direction: column; align-items: center; - div { - display: flex; - justify-content: center; - align-items: center; + gap: 20px; + p{ + color: #6A7287; + font-size: 17px; } - button { + h3{ + font-weight: 900; + } + .not_found_button{ + @include Flex; + width: 240px; + padding: 24px 22px ; + background: var(--primary); + color: var(--white); border: none; - outline: none; - padding: 8px; - border-radius: 10px; - - margin-inline: 30px; + transition: ease-in-out .3s; + &:hover{ + transform: scale(1.05); + background: var(--primary); + color: var(--white); + } } } + // p { + // color: white; + // display: inline; + // } + // h6 { + // display: inline; + // margin-inline: 20px; + // height: 140px !important; + + // 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 */ diff --git a/src/Styles/Pages/index.scss b/src/Styles/Pages/index.scss index 1f410e0..9c48266 100644 --- a/src/Styles/Pages/index.scss +++ b/src/Styles/Pages/index.scss @@ -10,4 +10,5 @@ @import "./Marks.scss"; @import "./exercise.scss"; @import './reSeller.scss'; -@import './InfoCard.scss'; \ No newline at end of file +@import './InfoCard.scss'; +@import './notifications.scss'; \ No newline at end of file diff --git a/src/Styles/Pages/notifications.scss b/src/Styles/Pages/notifications.scss new file mode 100644 index 0000000..7aee571 --- /dev/null +++ b/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; + } +} \ No newline at end of file diff --git a/src/enums/abilities.ts b/src/enums/abilities.ts index e84627a..45e8f6a 100644 --- a/src/enums/abilities.ts +++ b/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", //// } diff --git a/src/translate/ar.json b/src/translate/ar.json index ff51939..fd7002c 100644 --- a/src/translate/ar.json +++ b/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": "قائمة الطلاب", diff --git a/src/types/Notifications.ts b/src/types/Notifications.ts new file mode 100644 index 0000000..f1ed1e2 --- /dev/null +++ b/src/types/Notifications.ts @@ -0,0 +1,6 @@ +export type notifications = { + id:number, + name:string, + date:string, + image:string +}