Karimaldeen/school-dashboard-exercise
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

remove file

Browse Source
This commit is contained in:
karimalden 2024-08-07 14:47:50 +03:00
parent f5e0bebeb0
commit a4c3459efa
115 changed files with 33 additions and 4030 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
bundle-analysis.html
View File

File diff suppressed because one or more lines are too long

1
package.json
View File

@ -1,6 +1,7 @@
{ {
"name": "my-app", "name": "my-app",
"version": "0.1.0", "version": "0.1.0",
"type": "module",
"private": true, "private": true,
"dependencies": { "dependencies": {
"@ant-design/icons": "^5.3.7", "@ant-design/icons": "^5.3.7",

BIN
public/App/BackgroundHeader.webp
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 22 KiB

BIN
public/Icon/add_students.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 3.1 KiB

BIN
school-dashboard-exercise.zip Normal file
View File

Binary file not shown.

4
src/App.tsx
View File

@ -39,7 +39,7 @@ const App = () => {
routes.map((route: TMenuItem) => { routes.map((route: TMenuItem) => {
const useAbility = hasAbility(route.abilities, route.abilities_value); const useAbility = hasAbility(route.abilities, route.abilities_value);
const tableHeader = t(`${route?.header}`); const tableHeader = t(`${route?.header}`);
// useSetPage_title(tableHeader,route?.path); // useSetPageTitle(tableHeader,route?.path);
if (useAbility) { if (useAbility) {
return ( return (
@ -80,7 +80,7 @@ const App = () => {
{CrudRoute.map((route) => { {CrudRoute.map((route) => {
const useAbility = hasAbility(route.abilities, route.abilities_value); const useAbility = hasAbility(route.abilities, route.abilities_value);
const tableHeader = t(`${route?.header}`); const tableHeader = t(`${route?.header}`);
// useSetPage_title(tableHeader,route?.path); // useSetPageTitle(tableHeader,route?.path);
if (!useAbility) { if (!useAbility) {
return false; return false;

58
src/Components/Chart/AreaChart.tsx
View File

@ -1,58 +0,0 @@
import React, { useEffect, useRef, useState } from "react";
import ReactApexChart from "react-apexcharts";
const AreaChart: React.FC = () => {
const chartRef = useRef<any>(null); // Ref for the chart component
const [options, setOptions] = useState<any>({
chart: {
type: "area",
toolbar: {
show: false, // Disable the toolbar
},
},
dataLabels: {
enabled: false,
},
stroke: {
curve: "smooth",
},
xaxis: {
type: "datetime",
categories: [
"2018-09-19T00:00:00.000Z",
"2018-09-19T01:30:00.000Z",
"2018-09-19T02:30:00.000Z",
"2018-09-19T03:30:00.000Z",
"2018-09-19T04:30:00.000Z",
"2018-09-19T05:30:00.000Z",
"2018-09-19T06:30:00.000Z",
],
},
tooltip: {
x: {
format: "dd/MM/yy HH:mm",
},
},
});
const [series, setSeries] = useState<any>([
{ name: "series1", data: [31, 40, 28, 51, 42, 109, 100], color: "#FCC43E" },
{ name: "series2", data: [11, 32, 45, 32, 34, 52, 41], color: "#FB7D5B" },
]);
return (
<div className="AreaChart">
<div id="chart">
<ReactApexChart
options={options}
series={series}
type="area"
className="ReactApexChartArea"
height={400}
/>
</div>
<div id="html-dist"></div>
</div>
);
};
export default AreaChart;

95
src/Components/Chart/ColumnChart.tsx
View File

@ -1,95 +0,0 @@
import { Radio, Select } from "antd";
import React, { useState } from "react";
import ReactApexChart from "react-apexcharts";
import { IoMdArrowDropdown } from "react-icons/io";
const ColumnChart: React.FC = () => {
const series = [
{
name: "غياب",
data: [44, 55, 57, 56, 61, 58],
color: "#FB7D5B",
},
{
name: "حضور",
data: [76, 85, 70, 98, 87, 80],
color: "#FCC43E",
},
];
const options: any = {
chart: {
type: "bar",
},
plotOptions: {
bar: {
horizontal: false,
columnWidth: "35%",
endingShape: "rounded",
},
},
dataLabels: {
enabled: false,
},
xaxis: {
categories: ["Feb", "Mar", "Apr", "May", "Jun", "Jul"],
},
// yaxis: {
// title: {
// text: '$ (thousands)'
// }
// },
fill: {
opacity: 1,
colors: ["#FB7D5B", "#FCC43E"], // Red and Green colors
},
tooltip: {
y: {
formatter: function (val: number) {
return val + " طالب";
},
},
},
legend: {
show: false, // Hide the legend
},
};
const [value, setValue] = useState(1);
const handleChangeSelect = (value: string) => {};
return (
<div className="ColumnChart">
<div className="ColumnChart_header">
<span>الغياب المتكرر</span>
<span className="Legend">
<div data-attr="red">غياب</div>
<div>حضور</div>
</span>
<Select
defaultValue="هذا الأسبوع"
onChange={handleChangeSelect}
suffixIcon={<IoMdArrowDropdown size={30} />}
options={[
{ value: "هذا الأسبوع", label: "هذا الأسبوع" },
{ value: "هذا الأسبوع", label: "هذا الأسبوع" },
{ value: "هذا الأسبوع", label: "هذا الأسبوع" },
]}
/>
</div>
<div className="ColumnChartWrapper" id="chart">
<ReactApexChart
options={options}
series={series}
type="bar"
height={"100%"}
/>
</div>
<div id="html-dist"></div>
</div>
);
};
export default ColumnChart;

61
src/Components/Chart/LineChart.tsx
View File

@ -1,61 +0,0 @@
import React from "react";
import Chart from "react-apexcharts";
const LineChart: React.FC = () => {
const series = [
{
name: "Desktops",
data: [10, 41, 35, 51, 49, 62, 69, 91, 148],
},
];
const options: any = {
chart: {
height: 350,
type: "line",
zoom: {
enabled: false,
},
},
dataLabels: {
enabled: false,
},
stroke: {
curve: "straight",
},
title: {
text: "Product Trends by Month",
align: "left",
},
grid: {
row: {
colors: ["#f3f3f3", "transparent"], // takes an array which will be repeated on columns
opacity: 0.5,
},
},
xaxis: {
categories: [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
],
},
};
return (
<div>
<div id="chart">
<Chart options={options} series={series} type="line" height={350} />
</div>
<div id="html-dist"></div>
</div>
);
};
export default LineChart;

38
src/Components/Chart/PieChart.tsx
View File

@ -1,38 +0,0 @@
import React from "react";
import Chart from "react-apexcharts";
const PieChart = () => {
const series = [44, 55, 13] as any;
const options: any = {
series: [44, 55, 13],
chart: {
width: 380,
type: "pie",
},
labels: ["Team A", "Team B", "Team C", "Team D", "Team E"],
legend: {
position: "bottom",
},
responsive: [
{
breakpoint: 480,
options: {
chart: {
width: 200,
},
legend: {
position: "bottom",
},
},
},
],
};
return (
<div id="chart">
<Chart options={options} series={series} type="pie" width={380} />
</div>
);
};
export default PieChart;

14
src/Components/Classes/ClassesSegmented.tsx
View File

@ -1,14 +0,0 @@
import React from "react";
import { Segmented } from "antd";
const ClassesSegmented: React.FC = () => (
<Segmented<string>
options={["الأحد", "اللإثنين", "الثلاثاء", "الأربعاء", "الخميس"]}
onChange={(value) => {}}
className="Segmented"
block
defaultChecked
/>
);
export default ClassesSegmented;

105
src/Components/Course/CourseHeaderSection.tsx
View File

@ -1,105 +0,0 @@
import React, { useState } from "react";
import { FaPlus, FaUser } from "react-icons/fa";
import { IoMdArrowDropdown, IoMdArrowDropup } from "react-icons/io";
import { useNavigate } from "react-router-dom";
import { Popover, Spin } from "antd";
import { CourseItem } from "../../types/Item";
import { ModalEnum } from "../../enums/Model";
import useModalHandler from "../../utils/useModalHandler";
import { FaEllipsis } from "react-icons/fa6";
import { ABILITIES_ENUM, ABILITIES_VALUES_ENUM } from "../../enums/abilities";
import { hasAbility } from "../../utils/hasAbility";
import { useTranslation } from "react-i18next";
const HeaderCardsSection = ({ data, isLoading }: any) => {
const [showAll, setShowAll] = useState<boolean>(false);
const [t] = useTranslation();
const toggleShowAll = () => {
setShowAll(!showAll);
};
const navigate = useNavigate();
const index_eduClass_ability = hasAbility(
ABILITIES_ENUM?.EDUCATION_CLASS,
ABILITIES_VALUES_ENUM?.INDEX,
);
const handelnavigate = (item: CourseItem) => {
if (index_eduClass_ability) {
navigate(
`/${ABILITIES_ENUM?.COURSE}/${item?.id}/${ABILITIES_ENUM?.EDUCATION_CLASS}`,
);
// set_title(item?.name);
}
};
const { handel_open_model } = useModalHandler();
const Courses = data?.data || [];
if (isLoading) {
return <Spin />;
}
const PopoverContent = (
<div className="PopoverContent">
<p onClick={() => handel_open_model(ModalEnum?.COURSE_ADD)}>
{" "}
{t("practical.add")} {t("models.course")} <FaPlus />{" "}
</p>
</div>
);
const store_course_ability = hasAbility(
ABILITIES_ENUM?.COURSE,
ABILITIES_VALUES_ENUM?.STORE,
);
return (
<div className="header_cards_section">
<div className="CountCards">
{Courses?.length > 0 &&
Courses?.map((item: CourseItem, index: number) => {
return (
<div
onClick={() => handelnavigate(item)}
key={item?.id}
className={`CountCard ${!showAll && index >= 6 ? "hidden" : ""}`}
>
<i>
<FaUser />
</i>
<h4>{item?.name}</h4>
<h5>
{item?.student_count} {t("models.student")}{" "}
</h5>
</div>
);
})}
</div>
{Courses?.length > 4 &&
(showAll ? (
<span className="Show_More_Button" onClick={toggleShowAll}>
<IoMdArrowDropup />
</span>
) : (
<span className="Show_More_Button" onClick={toggleShowAll}>
<IoMdArrowDropdown />
</span>
))}
{store_course_ability && (
<Popover
content={PopoverContent}
overlayClassName="Popover"
arrow={false}
placement="bottomRight"
trigger={"click"}
>
<FaEllipsis />
</Popover>
)}
</div>
);
};
export default HeaderCardsSection;

67
src/Components/Division/DivisionsHeaderSection.tsx
View File

@ -1,67 +0,0 @@
import React, { useState } from "react";
import { useModalState } from "../../zustand/Modal";
import { ModalEnum } from "../../enums/Model";
import { FaMoneyBill } from "react-icons/fa";
import { IoMdArrowDropdown, IoMdArrowDropup } from "react-icons/io";
const DivisionsHeaderSection = () => {
const [showAll, setShowAll] = useState<boolean>(false);
const toggleShowAll = () => {
setShowAll(!showAll);
};
const { isOpen, setIsOpen } = useModalState((state) => state);
const handelOpenModal = () => {
setIsOpen(ModalEnum?.DIVISION_ADD);
};
// Define the interface for your data
interface Item {
icon: JSX.Element;
name: string;
}
const data: Item[] = [
{ icon: <FaMoneyBill />, name: "الطالبات" },
{ icon: <FaMoneyBill />, name: "الطالبات" },
{ icon: <FaMoneyBill />, name: "الطالبات" },
{ icon: <FaMoneyBill />, name: "الطالبات" },
{ icon: <FaMoneyBill />, name: "الطالبات" },
{ icon: <FaMoneyBill />, name: "الطالبات" },
{ icon: <FaMoneyBill />, name: "الطالبات" },
{ icon: <FaMoneyBill />, name: "الطالبات" },
];
return (
<div className="Divisions_header_section">
<div className="CountCards">
{data?.map((item: Item, index: number) => {
return (
<div
key={index}
className={`CountCard ${!showAll && index >= 5 ? "hidden" : ""}`}
>
<i>{item?.icon}</i>
<h4>{item?.name}</h4>
</div>
);
})}
</div>
{showAll ? (
<span className="Show_More_Button" onClick={toggleShowAll}>
<IoMdArrowDropup />
</span>
) : (
<span className="Show_More_Button" onClick={toggleShowAll}>
<IoMdArrowDropdown />
</span>
)}
<button className="Add_button" onClick={handelOpenModal}>
إضافة مادة
</button>
</div>
);
};
export default DivisionsHeaderSection;

128
src/Components/EduClass/EduClassHeaderSection.tsx
View File

@ -1,128 +0,0 @@
import React, { useState } from "react";
import { ModalEnum } from "../../enums/Model";
import { FaPlus, FaUser } from "react-icons/fa";
import { IoMdArrowDropdown, IoMdArrowDropup } from "react-icons/io";
import { FaEllipsis } from "react-icons/fa6";
import { Popover, Spin } from "antd";
import { useGetAllEduClass } from "../../api/eduClass";
import { useNavigate, useParams } from "react-router-dom";
import { EduClassItem } from "../../types/Item";
import useModalHandler from "../../utils/useModalHandler";
import { usePage_titleState } from "../../zustand/PageTitleState";
import { hasAbility } from "../../utils/hasAbility";
import { ABILITIES_ENUM, ABILITIES_VALUES_ENUM } from "../../enums/abilities";
import { useTranslation } from "react-i18next";
const HeaderSection = () => {
const [showAll, setShowAll] = useState<boolean>(false);
const toggleShowAll = () => {
setShowAll(!showAll);
};
const { course_id } = useParams();
const { data, isLoading } = useGetAllEduClass({ course_id: course_id });
const eduClass = data?.data || [];
const { set_title } = usePage_titleState((state) => state);
const { handel_open_model } = useModalHandler();
const navigate = useNavigate();
const show_eduClass_ability = hasAbility(
ABILITIES_ENUM?.EDUCATION_CLASS,
ABILITIES_VALUES_ENUM?.SHOW,
);
const handelNavigate = (item: EduClassItem) => {
if (show_eduClass_ability) {
navigate(`${item?.id}`);
set_title(`${item?.name}`);
}
};
const [t] = useTranslation();
const store_eduClass_ability = hasAbility(
ABILITIES_ENUM?.EDUCATION_CLASS,
ABILITIES_VALUES_ENUM?.STORE,
);
const delete_course_ability = hasAbility(
ABILITIES_ENUM?.COURSE,
ABILITIES_VALUES_ENUM?.DELETE,
);
const store_note_ability = hasAbility(
ABILITIES_ENUM?.NOTE,
ABILITIES_VALUES_ENUM?.STORE,
);
const PopoverContent = (
<div className="PopoverContent">
{store_eduClass_ability && (
<p onClick={() => handel_open_model(ModalEnum?.EDUClASS_ADD)}>
{" "}
{t("practical.add")} {t("models.education_class")} <FaPlus />{" "}
</p>
)}
{store_note_ability && (
<p
onClick={() => handel_open_model(ModalEnum?.COURSE_SENDNOTIFICATION)}
>
{" "}
{t("practical.Send_Direct_Notification")}
</p>
)}
{delete_course_ability && (
<p onClick={() => handel_open_model(ModalEnum?.COURSE_DELETE)}>
{" "}
{t("practical.delete")} {t("models.course")}
</p>
)}
</div>
);
if (isLoading) {
return <Spin />;
}
return (
<div className="header_cards_section">
<div className="CountCards">
{eduClass?.map((item: EduClassItem, index: number) => {
return (
<div
onClick={() => handelNavigate(item)}
key={index}
className={`CountCard ${!showAll && index >= 6 ? "hidden" : ""}`}
>
<i>
<FaUser />
</i>
<h4>{item?.name}</h4>
<h5>
{item?.students_count} {t("models.student")}{" "}
</h5>
</div>
);
})}
</div>
{eduClass?.length > 4 &&
(showAll ? (
<span className="Show_More_Button" onClick={toggleShowAll}>
<IoMdArrowDropup />
</span>
) : (
<span className="Show_More_Button" onClick={toggleShowAll}>
<IoMdArrowDropdown />
</span>
))}
<Popover
content={PopoverContent}
overlayClassName="Popover"
arrow={false}
placement="bottomRight"
>
<FaEllipsis />
</Popover>
</div>
);
};
export default HeaderSection;

103
src/Components/EduClass/SingleEduClassHeaderSection.tsx
View File

@ -1,103 +0,0 @@
import React, { useState } from "react";
import { ModalEnum } from "../../enums/Model";
import { FaUser } from "react-icons/fa";
import { IoMdArrowDropdown, IoMdArrowDropup } from "react-icons/io";
import { FaEllipsis } from "react-icons/fa6";
import { Popover } from "antd";
import { useLocation, useNavigate } from "react-router-dom";
import { Item } from "../../types/Item";
import useModalHandler from "../../utils/useModalHandler";
import { useButtonState } from "../../zustand/ButtonState";
import { useObjectToEdit } from "../../zustand/ObjectToEditState";
import { useTranslation } from "react-i18next";
import { ABILITIES_VALUES_ENUM } from "../../enums/abilities";
// import useSetPage_title from "../../Hooks/useSetPageTitle";
import { EduClassComponents } from "../../Pages/EduClass/show/ActiveTable";
import { hasAbility } from "../../utils/hasAbility";
const HeaderSection = () => {
const [showAll, setShowAll] = useState<boolean>(true);
const toggleShowAll = () => {
setShowAll(!showAll);
};
const [t] = useTranslation();
// useSetPage_title(
// `${t(ABILITIES_ENUM?.MAIN_PAGE)} / ${t(`models.${ABILITIES_ENUM.COURSE}`)} / ${t(`models.${ABILITIES_ENUM.EDUCATION_CLASS}`)} / ${t(`input.details`)}`,
// );
const { handel_open_model } = useModalHandler();
const filteredComponents = EduClassComponents?.filter((component) =>
hasAbility(component.abilities, ABILITIES_VALUES_ENUM.INDEX),
);
const PopoverContent = (
<div className="PopoverContent">
<p
onClick={() => handel_open_model(ModalEnum?.EDUClASS_SENDNOTIFICATION)}
>
{" "}
{t("practical.Send_Direct_Notification")}
</p>
<p onClick={() => handel_open_model(ModalEnum?.EDUClASS_DELETE)}>
{" "}
{t("practical.delete")} {t("models.education_class")}
</p>
</div>
);
const [, setActiveButton] = useState(0);
const { setActiveTab, ActiveTab } = useButtonState((state) => state);
const { setParamToSend } = useObjectToEdit();
const location = useLocation();
const navigate = useNavigate();
const handleButtonClick = (index: number) => {
setActiveButton(index);
setActiveTab(index);
setParamToSend({});
navigate(`${location.pathname}`);
};
return (
<div className="header_cards_section">
<div className="CountCards">
{filteredComponents?.map((item: Item, index: number) => {
return (
<div
key={index}
onClick={() => handleButtonClick(index)}
className={`CountCard ${!showAll && index >= 6 ? "hidden" : ""} ${ActiveTab === index ? "active" : ""} `}
>
<i>
<FaUser />
</i>
<h4> {t(`education_class_actions.${item?.name}`)} </h4>
</div>
);
})}
</div>
{filteredComponents?.length > 4 &&
(showAll ? (
<span className="Show_More_Button" onClick={toggleShowAll}>
<IoMdArrowDropup />
</span>
) : (
<span className="Show_More_Button" onClick={toggleShowAll}>
<IoMdArrowDropdown />
</span>
))}
<Popover
content={PopoverContent}
overlayClassName="Popover"
arrow={false}
placement="bottomRight"
>
<FaEllipsis />
</Popover>
</div>
);
};
export default HeaderSection;

21
src/Components/EduClass/student/Add/Form/AttachmentsDetails.tsx
View File

@ -1,21 +0,0 @@
import { Col, Row } from "reactstrap";
import React from "react";
import ValidationField from "../../../../ValidationField/ValidationField";
const AttachmentsDetails = () => {
return (
<Row xs={1} sm={1} md={1} lg={2} xl={2}>
<Col xs="6" sm="6">
<ValidationField
name="attachment1"
type="DropFile"
label="school_document"
/>
{/* <ValidationField name='attachment2' type='DropFile' label='الوثيقة'/> */}
</Col>
<Col xs="6" sm="6"></Col>
</Row>
);
};
export default AttachmentsDetails;

36
src/Components/EduClass/student/Add/Form/ContactDetails.tsx
View File

@ -1,36 +0,0 @@
import { Col, Row } from "reactstrap";
import React from "react";
import ValidationField from "../../../../ValidationField/ValidationField";
const ContactDetails = () => {
return (
<div className="bigRow">
<ValidationField
type="number"
name="phone_number_1"
label="phone_number"
/>
<ValidationField
type="number"
name="phone_number_2"
label="additional_phone_number"
/>
<ValidationField
type="TextArea"
name="address"
label="address"
placeholder="address"
/>
<ValidationField
type="TextArea"
name="notes"
label="note"
placeholder="note"
/>
</div>
);
};
export default ContactDetails;

34
src/Components/EduClass/student/Add/Form/ParentDetails.tsx
View File

@ -1,34 +0,0 @@
import { Col, Row } from "reactstrap";
import React, { useRef } from "react";
import ValidationField from "../../../../ValidationField/ValidationField";
const ParentDetails = () => {
const handelClick = () => {};
return (
<div className="bigRow">
<ValidationField name="father_name" label="father_name" />
<ValidationField name="father_job" label="father_job" />
<ValidationField
type="number"
name="father_phone_number"
label="father_phone_number"
/>
<ValidationField name="mother_name" label="mother_name" />
<ValidationField name="mother_job" label="mother_job" />
<ValidationField
type="number"
name="mother_phone_number"
label="mother_phone_number"
/>
{/* <Col xs="8" sm="8">
</Col> */}
</div>
);
};
export default ParentDetails;

72
src/Components/EduClass/student/Add/Form/PersonalDetails.tsx
View File

@ -1,72 +0,0 @@
import { Col, Row } from "reactstrap";
import React from "react";
import ValidationField from "../../../../ValidationField/ValidationField";
import {
Sex_Select_options_Student,
nationalities,
religion_Select_options,
} from "../../../../../types/App";
const PersonalDetails = () => {
return (
<Row>
<Col xs="8" sm="8">
<ValidationField name="email" label="email" />
<div className="TowValidationItems">
<ValidationField name="first_name" label="first_name" />
<ValidationField name="last_name" label="last_name" />
</div>
<div className="TowValidationItems">
<ValidationField name="username" label="username" />
<ValidationField name="password" label="password" />
</div>
<div className="TowValidationItems">
<ValidationField
name="nationality"
type="LocalSearch"
option={nationalities}
label="nationality"
placeholder="nationality"
/>
<ValidationField
name="religion"
type="Select"
option={religion_Select_options}
no_label
placeholder="religion"
/>
</div>
<div className="TowValidationItems">
<ValidationField
name="birthday"
type="Date"
label="birthday"
placeholder="birthday"
/>
<ValidationField
name="birth_place"
no_label
placeholder="birth_place"
/>
</div>
<ValidationField
name="sex"
label="sex"
type="Select"
option={Sex_Select_options_Student}
placeholder="sex"
/>
</Col>
<Col xs="4" sm="4">
<ValidationField name="image" type="DropFile" label="image" />
</Col>
</Row>
);
};
export default PersonalDetails;

46
src/Components/EduClass/student/Add/Form/Successful.tsx
View File

@ -1,46 +0,0 @@
import React from "react";
import Image from "../../../../Ui/Image";
import { useModalTabsState } from "../../../../../zustand/ModalTabsState";
import { useModalState } from "../../../../../zustand/Modal";
import { useFormikContext } from "formik";
import { useTranslation } from "react-i18next";
const Successful = () => {
const { setActiveTab } = useModalTabsState((state) => state);
const { setIsOpen } = useModalState((state) => state);
const formik = useFormikContext<any>();
const [t] = useTranslation();
return (
<div className="AddedSuccessfully">
<Image src="/DataState/successfully.png" />
<h1> {t("header.Student_added_successfully")} </h1>
<p>
{t(
"header.the_student_has_been_added_Do_you_want_to_add_another_student",
)}
</p>
<div className="TowButton">
<button
onClick={() => {
setActiveTab(0);
formik?.resetForm();
}}
>
{t("header.Add_a_new_student")}
</button>
<button
onClick={() => {
setIsOpen("");
setActiveTab(0);
formik?.resetForm();
}}
>
{t("practical.skip")}
</button>
</div>
</div>
);
};
export default Successful;

80
src/Components/EduClass/student/Add/Model/Modal.tsx
View File

@ -1,80 +0,0 @@
import React, { useEffect } from "react";
import { Modal } from "antd";
import { useModalState } from "../../../../../zustand/Modal";
import FormikForm from "../../../../../Layout/Dashboard/FormikForm";
import ModelBody from "./ModelBody";
import TabsSubmite from "./TabsSubmite";
import { getInitialValues, getValidationSchema } from "./formUtil";
import { ModalEnum } from "../../../../../enums/Model";
import { useAddStudent } from "../../../../../api/student";
import { useParams } from "react-router-dom";
import { useModalTabsState } from "../../../../../zustand/ModalTabsState";
const ModalForm: React.FC = () => {
const { isOpen, setIsOpen } = useModalState((state) => state);
const { mutate, isSuccess, isLoading } = useAddStudent();
const { edu_class_id } = useParams();
const handleSubmit = (values: any) => {
const Data_To_Send = { ...values };
delete Data_To_Send["id"];
Data_To_Send.attachments = [];
if (Data_To_Send.attachment1 !== null) {
Data_To_Send.attachments.push({
name: "attachment1",
file: Data_To_Send.attachment1,
});
}
if (Data_To_Send.attachment2 !== null) {
Data_To_Send.attachments.push({
name: "attachment2",
file: Data_To_Send.attachment2,
});
}
Data_To_Send["edu_class_id"] = edu_class_id;
Data_To_Send["birthday"] = values.birthday?.format(
"YYYY-MM-DD HH:mm:ss.SSS",
);
if (!values?.attachment1) {
delete Data_To_Send["attachments"];
}
// console.log(Data_To_Send);
mutate(Data_To_Send);
};
const { setActiveTab } = useModalTabsState((state) => state);
useEffect(() => {
if (isSuccess) {
setActiveTab(4);
getInitialValues([]);
}
}, [isSuccess, setActiveTab]);
return (
<>
<Modal
className="AddModalForm"
centered
width={"80vw"}
footer={null}
open={isOpen === ModalEnum.STUDENT_ADD}
onOk={() => setIsOpen("")}
onCancel={() => setIsOpen("")}
>
<FormikForm
handleSubmit={handleSubmit}
initialValues={getInitialValues([])}
validationSchema={getValidationSchema}
>
<ModelBody />
<TabsSubmite isLoading={isLoading} steps={4} />
</FormikForm>
</Modal>
</>
);
};
export default ModalForm;

67
src/Components/EduClass/student/Add/Model/ModelBody.tsx
View File

@ -1,67 +0,0 @@
import PersonalDetails from "../Form/PersonalDetails";
import TabsBar from "../../../../Layout/Tabs/TabsBar";
import ActiveTabs from "../../../../Layout/Tabs/ActiveTabs";
import { usePage_titleState } from "../../../../../zustand/PageTitleState";
import ParentDetails from "../Form/ParentDetails";
import ContactDetails from "../Form/ContactDetails";
import AttachmentsDetails from "../Form/AttachmentsDetails";
import Successful from "../Form/Successful";
import { useModalState } from "../../../../../zustand/Modal";
import { useFormikContext } from "formik";
import { useEffect } from "react";
import { useTranslation } from "react-i18next";
const ModelBody = () => {
const { title } = usePage_titleState((state) => state);
const [t] = useTranslation();
const steps = [
{
title: `${t(`practical.Step`)} 1`,
description: t("header.Student_Information"),
component: <PersonalDetails />,
},
{
title: `${t(`practical.Step`)} 2`,
description: t("header.Parent_Information"),
component: <ParentDetails />,
},
{
title: `${t(`practical.Step`)} 3`,
description: t("header.Contact_Information"),
component: <ContactDetails />,
},
{
title: `${t(`practical.Step`)} 4`,
description: t("header.Attachment_Images"),
component: <AttachmentsDetails />,
},
{
title: "hidden",
description: "hidden",
hidden: true,
component: <Successful />,
},
];
const { isOpen } = useModalState((state) => state);
const formik = useFormikContext();
useEffect(() => {
formik.setErrors({});
}, [isOpen === ""]);
return (
<div className="ModelBody">
<TabsBar steps={steps} />
<div className="ModelBodyForm">
<header>
{" "}
{t("practical.add")} {t("models.student")}{" "}
{" " + title === null ? "" : title}{" "}
</header>
<ActiveTabs steps={steps} />
</div>
</div>
);
};
export default ModelBody;

128
src/Components/EduClass/student/Add/Model/TabsSubmite.tsx
View File

@ -1,128 +0,0 @@
import React, { useEffect } from "react";
import { useModalTabsState } from "../../../../../zustand/ModalTabsState";
import { useModalState } from "../../../../../zustand/Modal";
import { useFormikContext } from "formik";
import { toast } from "react-toastify";
import { Spin } from "antd";
import { useTranslation } from "react-i18next";
interface TabsSubmiteProps {
steps: number;
isLoading: boolean;
}
const TabsSubmite: React.FC<TabsSubmiteProps> = ({ steps, isLoading }) => {
const { values, isValid, submitForm } = useFormikContext<any>();
const { ActiveTab, setActiveTab } = useModalTabsState((state) => state);
const IsSubmite = ActiveTab + 1 !== steps;
const {
first_name,
last_name,
username,
password,
nationality,
religion,
birthday,
birth_place,
sex,
} = values;
const {
father_name,
father_job,
father_phone_number,
mother_name,
mother_job,
mother_phone_number,
} = values;
const { address, attachment1 } = values;
const is_1_valued =
first_name &&
username &&
last_name &&
password &&
nationality &&
religion &&
birthday &&
birth_place &&
sex;
const is_2_valued =
father_name &&
father_job &&
father_phone_number &&
mother_name &&
mother_job &&
mother_phone_number;
const is_3_valued = address;
const is_4_valued = attachment1;
const [t] = useTranslation();
function handelNext() {
// console.log("submited");
// console.log(isValid,"isValid");
if (!is_1_valued && Number(ActiveTab) === 0) {
toast.error(t("validation.pleas_fill_all_label"));
return;
}
if (!is_2_valued && Number(ActiveTab) === 1) {
toast.error(t("validation.pleas_fill_all_label"));
return;
}
if (!is_3_valued && Number(ActiveTab) === 2) {
toast.error(t("validation.pleas_fill_all_label"));
return;
}
if (!is_4_valued && Number(ActiveTab) === 3) {
toast.error(t("validation.pleas_fill_all_label"));
return;
}
if (Number(ActiveTab) >= steps) {
return;
}
setActiveTab(Number(ActiveTab) + 1);
}
function handelPre() {
setActiveTab(Number(ActiveTab) - 1);
}
const handleSubmit = () => {
if (isValid) {
submitForm();
} else {
submitForm();
// console.log('Validation errors:', formik.errors);
// setActiveTab(4)
toast.error(t("validation.pleas_fill_all_label"));
}
};
// console.log(ActiveTab,"ActiveTab");
if (ActiveTab === steps) {
return <></>;
}
return (
<div className="SubmitButton">
<div onClick={handelPre}>
{ActiveTab > 0 ? "رجوع للخطوة السابقة" : ""}
</div>
<span
onClick={isLoading ? undefined : IsSubmite ? handelNext : handleSubmit}
{...(!IsSubmite && !isLoading ? { type: "submit" } : {})}
>
{isLoading
? "جار الاضافة ...."
: IsSubmite
? "الخطوة التالية"
: "إضافة الطالب"}
</span>
</div>
);
};
export default TabsSubmite;

76
src/Components/EduClass/student/Add/Model/formUtil.ts
View File

@ -1,76 +0,0 @@
import * as Yup from "yup";
export const getInitialValues = (objectToEdit: any): any => {
return {
id: objectToEdit?.id ?? null,
// username:objectToEdit?.username ?? null ,
email: objectToEdit?.email ?? "",
username: objectToEdit?.username ?? null,
password: objectToEdit?.password ?? null,
notes: objectToEdit?.notes ?? null,
image: objectToEdit?.image ?? null,
nationality: objectToEdit?.nationality ?? null,
birth_place: objectToEdit?.birth_place ?? null,
birthday: objectToEdit?.birthday ?? null,
phone_number_2: objectToEdit?.phone_number_2 ?? null,
phone_number_1: objectToEdit?.phone_number_1 ?? null,
mother_name: objectToEdit?.mother_name ?? null,
father_name: objectToEdit?.father_name ?? null,
last_name: objectToEdit?.last_name ?? null,
first_name: objectToEdit?.first_name ?? null,
religion: objectToEdit?.religion ?? null,
attachments: objectToEdit?.attachments ?? null,
attachment1: objectToEdit?.attachment1 ?? null,
attachment2: objectToEdit?.attachment2 ?? null,
address: objectToEdit?.address ?? null,
father_job: objectToEdit?.father_job ?? null,
mother_phone_number: objectToEdit?.mother_phone_number ?? null,
father_phone_number: objectToEdit?.father_phone_number ?? null,
mother_job: objectToEdit?.mother_job ?? null,
edu_class_id: objectToEdit?.edu_class_id ?? null,
sex: objectToEdit?.sex ?? null,
};
};
export const getValidationSchema = () => {
return Yup.object().shape({
// username: Yup.string().required('Username is required'),
email: Yup.string().email("validation.Invalid_email"),
username: Yup.string().required("validation.required"),
// .required("validation.Email_is_required"),
password: Yup.string()
.required("validation.Password_is_required")
.min(8, "validation.Password_must_be_at_least_8_characters_long"),
// notes: Yup.string(),
// image: Yup.string().required(),
nationality: Yup.string().required("validation.Nationality_is_required"),
address: Yup.string().required("validation.Address_is_required"),
birth_place: Yup.string().required("validation.Place_of_birth_is_required"),
birthday: Yup.string().required("validation.Date_of_birth_is_required"),
// phone_number_2: Yup.number(),
// phone_number_1: Yup.number(),
mother_name: Yup.string().required("validation.Mother's_name_is_required"),
father_name: Yup.string().required("validation.Father's_name_is_required"),
last_name: Yup.string().required("validation.Last_name_is_required"),
first_name: Yup.string().required("validation.First_name_is_required"),
religion: Yup.string().required("validation.Religion_is_required"),
sex: Yup.string().required("validation.Gender_is_required"),
// attachments: Yup.string(),
// attachment1: Yup.string(),
// attachment2: Yup.string(),
// attachment1: Yup.string().required("validation.Attachment1_is_required"),
father_job: Yup.string().required("validation.Father's_job_is_required"),
// mother_phone_number: Yup.string().required(
// "validation.Mother's_phone_number_is_required",
// ),
father_phone_number: Yup.string().required(
"validation.Father's_phone_number_is_required",
),
// mother_job: Yup.string().required("validation.Mother's_job_is_required"),
});
};

48
src/Components/HOC/WithDrawer.tsx
View File

@ -1,48 +0,0 @@
import React, { useState, ReactNode } from "react";
import type { DrawerProps } from "antd";
import { Drawer, Space } from "antd";
interface WithDrawerProps {
button: React.ReactNode;
children: ReactNode;
title: string;
className?: string;
}
const WithDrawer: React.FC<WithDrawerProps> = ({
button,
children,
title = "Basic Drawer",
className,
}) => {
const [open, setOpen] = useState(false);
const [placement, setPlacement] = useState<DrawerProps["placement"]>("right");
return (
<>
<Space>
{React.cloneElement(button as React.ReactElement, {
onClick: () => setOpen(true),
})}
</Space>
<Drawer
title={title}
placement={placement}
closable={false}
onClose={() => setOpen(false)}
open={open}
key={placement}
>
<div className={className}>{children}</div>
</Drawer>
</>
);
};
export default WithDrawer;
// <WithDrawer
// button={<Button type="primary">Open</Button>}
// >
// {/* Your content goes here */}
// </WithDrawer>

28
src/Components/HOC/WithFormik.tsx
View File

@ -1,28 +0,0 @@
import { Form, Formik } from "formik";
import React from "react";
import * as Yup from "yup";
const WithFormik = ({ children }: any) => {
const getInitialValues = () => {
return { name: "" };
};
const getValidationSchema = () => {
return Yup.object().shape({});
};
const handleSubmit = () => {};
return (
<div className="WithFormik">
{
<Formik
onSubmit={handleSubmit}
initialValues={getInitialValues}
validationSchema={getValidationSchema}
>
{(formik) => <Form>{children}</Form>}
</Formik>
}
</div>
);
};
export default WithFormik;

32
src/Components/HOC/withVisibale.tsx
View File

@ -1,32 +0,0 @@
import { useEffect, useRef, useState } from "react";
// This is your Layout Component
const Visibale = ({ children, ...props }: any) => {
const ref = useRef<any>();
const [isVisible, setIsVisible] = useState(false);
useEffect(() => {
const observer = new IntersectionObserver(([entry]) => {
if (isVisible === false) {
setIsVisible(entry.isIntersecting);
}
});
if (ref.current) {
observer.observe(ref.current);
}
return () => {
if (ref.current) {
// eslint-disable-next-line react-hooks/exhaustive-deps
observer.unobserve(ref.current);
}
};
}, [isVisible]); // Empty array ensures effect is only run on mount and unmount
return (
<div ref={ref} {...props}>
{isVisible && children}
</div>
);
};
export default Visibale;

59
src/Components/Home/ActivitySection.tsx
View File

@ -1,59 +0,0 @@
import React from "react";
import Image from "../Ui/Image";
const ActivitySection = () => {
// Static fake data array
const ActivitysData = [
{
id: 1,
image: "/Image/1.png",
info: "3 طالبات حصلوا على جائزة في مسابقة الشطرنج",
time: "منذ 3 ساعات",
},
{
id: 2,
image: "/Image/1.png",
info: "3 طالبات حصلوا على جائزة في مسابقة الشطرنج",
time: "منذ 3 ساعات",
},
{
id: 3,
image: "/Image/1.png",
info: "3 طالبات حصلوا على جائزة في مسابقة الشطرنج",
time: "منذ 3 ساعات",
},
{
id: 4,
image: "/Image/1.png",
info: "3 طالبات حصلوا على جائزة في مسابقة الشطرنج",
time: "منذ 3 ساعات",
},
{
id: 5,
image: "/Image/1.png",
info: "3 طالبات حصلوا على جائزة في مسابقة الشطرنج",
time: "منذ 3 ساعات",
},
];
return (
<div className="ActivitySection">
<header>
<h4>النشاط الطلابي </h4>
</header>
<div className="ActivityScrollerChanger">
<div className="Activitys">
{ActivitysData.map((Activity) => (
<article key={Activity.id}>
<Image src={Activity.image} />
<h5>{Activity.info}</h5>
<p>{Activity?.time}</p>
</article>
))}
</div>
</div>
</div>
);
};
export default ActivitySection;

123
src/Components/Home/CalendarSection.tsx
View File

@ -1,123 +0,0 @@
import React, { useState } from "react";
import dayjs from "dayjs";
import "dayjs/locale/zh-cn";
import type { Dayjs } from "dayjs";
import dayLocaleData from "dayjs/plugin/localeData";
import {
Calendar,
Col,
DatePicker,
Popover,
Radio,
Row,
Select,
Typography,
theme,
} from "antd";
import type { CalendarProps } from "antd";
import { IoMdArrowDropdown } from "react-icons/io";
import { MdOutlineEdit } from "react-icons/md";
import { RiDeleteBin6Fill } from "react-icons/ri";
dayjs.extend(dayLocaleData);
const App: React.FC = () => {
const [year, setYear] = useState<number>(dayjs().year());
const [month, setMonth] = useState<number>(dayjs().month());
const onChangeDatePicker = (value: any) => {
if (value) {
setYear(value.$y); // Extract year from the selected date and update the year state
setMonth(value.$M); // Extract month from the selected date and update the month state
} else {
const today = dayjs(); // Get the current date
setYear(today.year()); // Update the year state to the current year
setMonth(today.month());
}
};
const popoverDays = [
{
day: 10,
month: 3,
year: 2024,
title: "مسابقة الشطرنج الدولية",
time: "الساعة 11",
},
{
day: 22,
month: 3,
year: 2024,
title: "مسابقة الشطرنج الدولية",
time: "الساعة 12",
},
];
const [actionsVisible, setActionsVisible] = useState(0);
const toggleActionsVisibility = (day: number) => {
setActionsVisible(day);
};
const dateCellRender = (value: dayjs.Dayjs) => {
const day = value.date();
const month = value.month() + 1;
const year = value.year();
const matchingDay = popoverDays.find(
(date) => date.day === day && date.month === month && date.year === year,
);
if (matchingDay) {
return (
<Popover
placement="top"
className="CalenderPop"
rootClassName="CalenderPop"
trigger="hover"
content={
<div
className="Calendar_Popover"
onClick={() => toggleActionsVisibility(day)}
>
<h5>{matchingDay.title}</h5>
<h6>{matchingDay.time}</h6>
{actionsVisible === day && ( // Only show actions if actionsVisible is true
<span className="Actions">
<MdOutlineEdit size={22} style={{ color: "#A098AE" }} />
<RiDeleteBin6Fill size={22} style={{ color: "#C11313" }} />
</span>
)}
</div>
}
// open={true}
>
<div className="Calendar_ActiveDiv">{day}</div>
</Popover>
);
}
return <div className="Calendar_Div">{day}</div>;
};
return (
<div className={"CalendarSection"}>
<Calendar
fullscreen={false}
fullCellRender={dateCellRender}
value={dayjs(`${year}-${month + 1}-01`)}
headerRender={() => {
return (
<div className="CalendarHeader">
<h4>تقويم المدرسة</h4>
<DatePicker
suffixIcon={<IoMdArrowDropdown size={30} />}
onChange={(newDate: number) => onChangeDatePicker(newDate)}
picker="month"
/>
</div>
);
}}
/>
</div>
);
};
export default App;

31
src/Components/Home/CountSection.tsx
View File

@ -1,31 +0,0 @@
import React from "react";
import { FaMoneyBill } from "react-icons/fa";
import Image from "../Ui/Image";
const CountSection = () => {
const data = [
{ icon: <FaMoneyBill />, name: "الطالبات", number: 900 },
{ icon: <FaMoneyBill />, name: "الطالبات", number: 900 },
{ icon: <FaMoneyBill />, name: "الطالبات", number: 900 },
{ icon: <FaMoneyBill />, name: "الطالبات", number: 900 },
{ icon: <FaMoneyBill />, name: "الطالبات", number: 900 },
];
return (
<div className="CountSection">
<div className="CountCards">
{data?.map((item: any, index: any) => {
return (
<div key={index} className="CountCard">
<i>{item?.icon}</i>
<h4>{item?.name}</h4>
<h6>{item?.number}</h6>
</div>
);
})}
</div>
<Image src="../Home/HomeCounter.png" />
</div>
);
};
export default CountSection;

82
src/Components/Home/NoteSection.tsx
View File

@ -1,82 +0,0 @@
import React from "react";
import { FaMoneyBill } from "react-icons/fa";
const NoteSection = () => {
// Static fake data array
const notesData = [
{
id: 1,
icon: <FaMoneyBill />,
title: "ملاحظة مالية",
content: [
"الرسوم الدراسية: المبلغ المطلوب من الأهل 200000 ل.س",
"مبلغ أخر: المبلغ المطلوب من الأهل 300000 ل.س",
],
},
{
id: 2,
icon: <FaMoneyBill />,
title: "ملاحظة مالية",
content: [
"الرسوم الدراسية: المبلغ المطلوب من الأهل 200000 ل.س",
"تكلفة أخرى: المبلغ المطلوب من الأهل 150000 ل.س",
"تكلفة أخرى: المبلغ المطلوب من الأهل 150000 ل.س",
"تكلفة أخرى: المبلغ المطلوب من الأهل 150000 ل.س",
],
},
{
id: 3,
icon: <FaMoneyBill />,
title: "ملاحظة مالية",
content: [
"الرسوم الدراسية: المبلغ المطلوب من الأهل 200000 ل.س",
"تكلفة أخرى: المبلغ المطلوب من الأهل 150000 ل.س",
],
},
{
id: 4,
icon: <FaMoneyBill />,
title: "ملاحظة مالية",
content: [
"الرسوم الدراسية: المبلغ المطلوب من الأهل 200000 ل.س",
"تكلفة أخرى: المبلغ المطلوب من الأهل 150000 ل.س",
"تكلفة أخرى: المبلغ المطلوب من الأهل 150000 ل.س",
"تكلفة أخرى: المبلغ المطلوب من الأهل 150000 ل.س",
],
},
{
id: 5,
icon: <FaMoneyBill />,
title: "ملاحظة مالية",
content: [
"الرسوم الدراسية: المبلغ المطلوب من الأهل 200000 ل.س",
"تكلفة أخرى: المبلغ المطلوب من الأهل 150000 ل.س",
],
},
];
return (
<div className="NoteSection">
<header>
<h4>ملاحظات اليوم</h4> <h6>8/3/2021</h6>
</header>
<div className="NoteScrollerChanger">
<div className="Notes">
{notesData.map((note) => (
<article key={note.id}>
<div>
<i>{note.icon}</i>
<h5>{note.title}</h5>
</div>
{note.content.map((item, index) => (
<span key={index}>{item}</span>
))}
</article>
))}
</div>
</div>
</div>
);
};
export default NoteSection;

72
src/Components/Home/StudentSubjects.tsx
View File

@ -1,72 +0,0 @@
import { Progress, Select } from "antd";
import React, { useState } from "react";
import { useTranslation } from "react-i18next";
import { FaLaptop } from "react-icons/fa";
import { IoMdArrowDropdown } from "react-icons/io";
import Image from "../Ui/Image";
const StudentSubjects = () => {
const [selectedOption, setSelectedOption] = useState("هذا الأسبوع");
const Options = [
{ value: "هذا الأسبوع", label: "هذا الأسبوع" },
{ value: "الأسبوع الماضي", label: "الأسبوع الماضي" },
{ value: "الشهر الماضي", label: "الشهر الماضي" },
];
const handleChangeSelect = (value: any) => {
setSelectedOption(value);
// console.log(`Selected ${value}`);
};
const [t] = useTranslation();
// Define static data
const staticData = [
{
SubjectImage: "/Subject/algebra.png",
SubjectName: "طالبات",
StudentSubjectsPercent: 50,
},
{
SubjectImage: "/Subject/flask.png",
SubjectName: "طالبات",
StudentSubjectsPercent: 60,
},
{
SubjectImage: "/Subject/koran.png",
SubjectName: "طالبات",
StudentSubjectsPercent: 70,
},
];
return (
<div className="StudentSubjects">
<header>
<h6>{t("عدد الطالبات")}</h6>
<Select
defaultValue={selectedOption}
onChange={handleChangeSelect}
suffixIcon={<IoMdArrowDropdown size={30} />}
options={Options}
/>
</header>
<main>
{staticData.map((item, index) => (
<div key={index}>
<Progress
type="circle"
size={"small"}
strokeColor={"#0052B4"}
strokeWidth={7}
percent={item?.StudentSubjectsPercent}
/>
<h6>{item.SubjectName}</h6>
<Image src={item?.SubjectImage} />
</div>
))}
</main>
</div>
);
};
export default StudentSubjects;

46
src/Components/Student/Add/Model/Form.tsx
View File

@ -1,46 +0,0 @@
import { Col, Row } from "reactstrap";
import React from "react";
import ValidationField from "../../../../Components/ValidationField/ValidationField";
const Form = () => {
return (
<Row>
<Col xs="8" sm="8">
{" "}
{/* This column will take up 8 units on extra small screens and 6 units on small screens */}
<ValidationField name="الجنس" />
<ValidationField name="الاسم الأول *" />
<ValidationField name="اسم العائلة" />
<div className="TowValidationItems">
<ValidationField name="اسم العائلة" />
<ValidationField name="اسم العائلة" no_label />
</div>
<div className="TowValidationItems">
<ValidationField name="اسم العائلة" type="Select" option={[]} />
<ValidationField name="اسم العائلة" />
</div>
{/* <div className='TowValidationItems'>
<ValidationField name='اسم العائلة'/>
<ValidationField name='اسم العائلة' no_label/>
</div>
<div className='TowValidationItems'>
<ValidationField name='اسم العائلة'/>
<ValidationField name='اسم العائلة' no_label/>
</div> */}
</Col>
<Col xs="4" sm="4">
{" "}
{/* This column will take up 4 units on extra small screens and 6 units on small screens */}
<ValidationField name="DropFile" type="DropFile" label="الصورة *" />
<ValidationField
name="DropFile"
type="DropFile"
label="الوثيقة المدرسية *"
/>
</Col>
</Row>
);
};
export default Form;

38
src/Components/Student/Add/Model/Modal.tsx
View File

@ -1,38 +0,0 @@
import React, { useState } from "react";
import { Modal } from "antd";
import { useModalState } from "../../../../zustand/Modal";
import FormikForm from "../../../../Layout/Dashboard/FormikForm";
import * as Yup from "yup";
import ModelBody from "./ModelBody";
import TabsSubmite from "../../../../Components/Layout/Tabs/TabsSubmite";
import { getInitialValues, getValidationSchema } from "./formUtil";
import { ModalEnum } from "../../../../enums/Model";
const ModalForm: React.FC = () => {
const { isOpen, setIsOpen } = useModalState((state) => state);
return (
<>
<Modal
className="AddModalForm"
centered
width={"80vw"}
footer={null}
open={isOpen === ModalEnum.STUDENT_ADD}
onOk={() => setIsOpen("")}
onCancel={() => setIsOpen("")}
>
<FormikForm
handleSubmit={() => {}}
initialValues={getInitialValues}
validationSchema={getValidationSchema}
>
<ModelBody />
{/* <TabsSubmite steps={5} /> */}
</FormikForm>
</Modal>
</>
);
};
export default ModalForm;

60
src/Components/Student/Add/Model/ModelBody.tsx
View File

@ -1,60 +0,0 @@
import { Divider, Steps } from "antd";
import React, { useState } from "react";
import { useTabsState } from "../../../../zustand/TabsState";
import { useModalTabsState } from "../../../../zustand/ModalTabsState";
import Form from "./Form";
import TabsBar from "../../../../Components/Layout/Tabs/TabsBar";
import ActiveTabs from "../../../../Components/Layout/Tabs/ActiveTabs";
const ModelBody = () => {
const { ActiveTab, setActiveTab } = useModalTabsState((state) => state);
function handelTabClick(index: number) {
setActiveTab(index);
}
const steps = [
{
title: "الخطوة 1",
description: "التفاصيل الشخصية",
component: <Form />,
},
{
title: "الخطوة 2",
description: "التفاصيل الشخصية",
component: <>H2</>,
},
{
title: "الخطوة 3",
description: "التفاصيل الشخصية",
component: <>H2</>,
},
{
title: "الخطوة 4",
description: "التفاصيل الشخصية",
component: <>H2</>,
},
{
title: "الخطوة 5",
description: "التفاصيل الشخصية",
component: <>H2</>,
},
{
title: "الخطوة 5",
description: "التفاصيل الشخصية",
component: <>H2</>,
hidden: true,
},
];
return (
<div className="ModelBody">
<TabsBar steps={steps} />
<div className="ModelBodyForm">
<header>إضافة طالب</header>
<ActiveTabs steps={steps} />
</div>
</div>
);
};
export default ModelBody;

15
src/Components/Student/Add/Model/formUtil.ts
View File

@ -1,15 +0,0 @@
import * as Yup from "yup";
export const getInitialValues = (objectToEdit: any): any => {
return {
id: objectToEdit?.id ?? 0,
name: objectToEdit?.name ?? "",
};
};
export const getValidationSchema = () => {
// validate input
return Yup.object().shape({
name: Yup.string().required("مطلوب"),
});
};

26
src/Components/Student/CountSection.tsx
View File

@ -1,26 +0,0 @@
import React from "react";
import { FaMoneyBill } from "react-icons/fa";
import Image from "../Ui/Image";
const CountSection = () => {
return (
<div className="CountSection">
<div className="CountCards">
{[1, 2, 3, 4, 5]?.map((item: any, index: any) => {
return (
<div key={index} className="CountCard">
<i>
<FaMoneyBill />
</i>
<h4>الطالبات</h4>
<h6>932</h6>
</div>
);
})}
</div>
{/* <Image src='../Home/HomeCounter.png'/> */}
</div>
);
};
export default CountSection;

21
src/Components/Student/DetailsCard.tsx
View File

@ -1,21 +0,0 @@
import React from "react";
import { FaChalkboardTeacher } from "react-icons/fa";
import { IoSchool } from "react-icons/io5";
import { useNavigate } from "react-router-dom";
const DetailsCard = () => {
const navigate = useNavigate();
const handelclick = () => {
navigate("/student/add");
};
return (
<div className="DetailsCard" onClick={() => handelclick()}>
<h6>إضافة طالب</h6>
<div>
<IoSchool />
</div>
</div>
);
};
export default DetailsCard;

56
src/Components/Student/StudentCount.tsx
View File

@ -1,56 +0,0 @@
import { Select } from "antd";
import React, { useState } from "react";
import { useTranslation } from "react-i18next";
import { FaLaptop } from "react-icons/fa";
import { IoMdArrowDropdown } from "react-icons/io";
const StudentCount = () => {
const [selectedOption, setSelectedOption] = useState("هذا الأسبوع");
const Options = [
{ value: "هذا الأسبوع", label: "هذا الأسبوع" },
{ value: "الأسبوع الماضي", label: "الأسبوع الماضي" },
{ value: "الشهر الماضي", label: "الشهر الماضي" },
];
const handleChangeSelect = (value: any) => {
setSelectedOption(value);
// console.log(`Selected ${value}`);
};
const [t] = useTranslation();
// Define static data
const staticData = [
{ studentName: "طالبات الشعبة الأولى 1", studentCount: 50 },
{ studentName: "طالبات الشعبة الأولى 2", studentCount: 60 },
{ studentName: "طالبات الشعبة الأولى 3", studentCount: 70 },
{ studentName: "طالبات الشعبة الأولى 4", studentCount: 80 },
];
return (
<div className="StudentCount">
<header>
<h6>{t("عدد الطالبات")}</h6>
<Select
defaultValue={selectedOption}
onChange={handleChangeSelect}
suffixIcon={<IoMdArrowDropdown size={30} />}
options={Options}
/>
</header>
<main>
{staticData.map((item, index) => (
<div key={index}>
<span>
<h6>{item.studentName}</h6>
<p>{item.studentCount} طالب</p>
</span>
<FaLaptop />
</div>
))}
</main>
</div>
);
};
export default StudentCount;

54
src/Components/Student/activity/MoneyState.tsx
View File

@ -1,54 +0,0 @@
import React from "react";
import { FaMoneyBill } from "react-icons/fa";
import Image from "../../Ui/Image";
import { useNavigate, useParams } from "react-router-dom";
import { useGetOverView } from "../../../api/payment";
import { useTranslation } from "react-i18next";
import { Currency } from "../../../config/AppKey";
import { formatNumber } from "../../../utils/formatNumber";
const MoneyState = () => {
const navigation = useNavigate();
const { student_id } = useParams();
const handelnavigate = () => {
navigation(`payment`);
};
const { data } = useGetOverView({
student_id: student_id,
});
const [t] = useTranslation();
const to_be_paid = Number(data?.data?.to_be_paid) || 0;
const paid = Number(data?.data?.paid) || 0;
const dues = formatNumber(to_be_paid - paid);
return (
<div className="MoneyState">
<header>{t("header.The_student_financial_situation")}</header>
<main>
<button>
{t("select.Payments.dues")} : {dues} {Currency}
</button>
<div>
<div>
<FaMoneyBill />
</div>
<span>
<h6>{t("select.Payments.to_be_paid")}</h6>
<p>
{formatNumber(to_be_paid)} {Currency}
</p>
</span>
</div>
<article>
<span onClick={handelnavigate}>
<Image src="/Icon/cash.png" />
<h5>{t("models.payment")}</h5>
<button>{t("practical.details")}</button>
</span>
</article>
</main>
</div>
);
};
export default MoneyState;

35
src/Components/Test/Test.tsx
View File

@ -1,35 +0,0 @@
import React, { useState } from "react";
function FakeIntegration() {
const [integrationInput, setIntegrationInput] = useState("");
const [integrationResult, setIntegrationResult] = useState("");
const handleSubmit = (event: any) => {
event.preventDefault();
// Simulated integration result
const fakeResult = "∫(x^2)dx = (1/3)x^3 + C";
setIntegrationResult(fakeResult);
};
return (
<div>
<form onSubmit={handleSubmit}>
<input
type="text"
value={integrationInput}
onChange={(e) => setIntegrationInput(e.target.value)}
placeholder="Enter integration expression"
/>
<button type="submit">Calculate</button>
</form>
<div>
<h2>Integration Input:</h2>
<p>{integrationInput}</p>
<h2>Integration Result:</h2>
<p>{integrationResult}</p>
</div>
</div>
);
}
export default FakeIntegration;

56
src/Components/Utils/Theme.tsx
View File

@ -1,56 +0,0 @@
import React, { memo } from "react";
import type { MenuProps } from "antd";
import { Button, Dropdown, Space } from "antd";
import { useTranslation } from "react-i18next";
import { BsFillMoonStarsFill, BsFillSunFill } from "react-icons/bs";
import { useChangeTheme } from "../../Hooks/useChangeTheme";
const Theme: React.FC = () => {
const { currentTheme, changeTheme } = useChangeTheme();
const { t } = useTranslation();
const LightTheme = memo(() => (
<div className="MenuChange" onClick={lightThemeClickHandler}>
<BsFillSunFill />
{t("light")}
</div>
));
const DarkTheme = memo(() => (
<div className="MenuChange" onClick={darkThemeClickHandler}>
<BsFillMoonStarsFill />
{t("dark")}
</div>
));
const lightThemeClickHandler = React.useCallback(() => {
changeTheme("light");
}, [changeTheme]);
const darkThemeClickHandler = React.useCallback(() => {
changeTheme("dark");
}, [changeTheme]);
const items: MenuProps["items"] = [
{
key: "1",
label: <LightTheme />,
},
{
key: "2",
label: <DarkTheme />,
},
];
return (
<Space direction="vertical">
<Dropdown menu={{ items }} placement="top">
<Button>
{currentTheme === "dark" ? <DarkTheme /> : <LightTheme />}
</Button>
</Dropdown>
</Space>
);
};
export default Theme;

60
src/Components/activity/StudentBehavior.tsx
View File

@ -1,60 +0,0 @@
import Image from "../Ui/Image";
import { Student } from "../../types/Item";
import { useNavigate, useParams } from "react-router-dom";
import { useGetStudent } from "../../api/student";
import { useTranslation } from "react-i18next";
const StudentBehavior = () => {
const { student_id } = useParams();
const { data: studentData } = useGetStudent({
show: student_id,
});
const userData: Student | {} = studentData?.data ?? {};
const { positiveNote, warningNote, alertNote } = userData as Student;
const [t] = useTranslation();
const navigate = useNavigate();
const handelnavigate = () => {
navigate(`note`);
};
const Data = [
{
icon: "/Icon/medal.png",
title: t("array.UserInfo.appreciation"),
value: positiveNote,
buttonText: t("practical.show"),
},
{
icon: "/Icon/warning.png",
title: t("array.UserInfo.warning"),
value: warningNote,
buttonText: t("practical.show"),
},
{
icon: "/Icon/Error.png",
title: t("array.UserInfo.alert"),
value: alertNote,
buttonText: t("practical.show"),
},
];
return (
<div className="StudentBehavior">
<header>{t("header.Student_classroom_behavior")}</header>
<main>
{Data.map((item, index) => (
<article key={index} onClick={handelnavigate}>
<Image src={item.icon} />
<div>
<h6>{item.title}</h6>
<p>{item.value}</p>
</div>
<button>{item.buttonText}</button>
</article>
))}
</main>
</div>
);
};
export default StudentBehavior;

97
src/Components/activity/StudentsTime.tsx
View File

@ -1,97 +0,0 @@
import React from "react";
import { getColorName } from "../../Hooks/usePercentage";
import { useNavigate, useParams } from "react-router-dom";
import { useGetStudent } from "../../api/student";
import { Student } from "../../types/Item";
import { useTranslation } from "react-i18next";
interface StudentTimeData {
id: number;
absences: number;
justified: number;
unjustified: number;
totalDays: number;
name: string;
}
const StudentsTime = () => {
const { student_id } = useParams();
const { data: studentData } = useGetStudent({
show: student_id,
});
const userData: Student | {} = studentData?.data ?? {};
const { ealryDeparture, absence, lateArrival } = userData as Student;
const [t] = useTranslation();
const data = [
{
name: t("models.absence"),
id: 1,
absences: absence?.justified + absence?.not_justified,
justified: absence?.justified,
unjustified: absence?.not_justified,
totalDays: absence?.total,
},
{
name: t("models.late_arrival"),
id: 2,
absences: lateArrival?.justified + lateArrival?.not_justified,
justified: lateArrival?.justified,
unjustified: lateArrival?.not_justified,
totalDays: lateArrival?.total,
},
{
name: t("models.earlyDeparture"),
id: 3,
absences: ealryDeparture?.justified + ealryDeparture?.not_justified,
justified: ealryDeparture?.justified,
unjustified: ealryDeparture?.not_justified,
totalDays: ealryDeparture?.total,
},
];
const navigate = useNavigate();
const handel_naviagate = () => {
navigate(`status`);
};
return (
<div className="StudentsTime">
<header>{t("header.student_status")}</header>
<main>
{data?.length > 0 &&
data.map((item: StudentTimeData, index: number) => {
return (
<article key={item.id} onClick={handel_naviagate}>
<span>
<h6>{item?.name}</h6>
<p data-color={getColorName(item.absences)}>
{item.absences}
</p>
</span>
<div>
<span>
<div>
{t("select.Student_Type.justified")}
<span>{item.justified}</span>
</div>
<div>
{t("select.Student_Type.not_justified")}
<span>{item.unjustified}</span>
</div>
</span>
<span>
<div className="StudentsTimeTotal">المجموع</div>
<p>
{item.absences} من {item.totalDays} يوم
</p>
</span>
</div>
</article>
);
})}
</main>
</div>
);
};
export default StudentsTime;

62
src/Components/testInput/MathInput.tsx
View File

@ -1,62 +0,0 @@
import React, { useState, useEffect, useRef } from 'react';
import katex from 'katex';
import 'katex/dist/katex.min.css';
const MathInput: React.FC = () => {
const [latex, setLatex] = useState<string>('f(x) = \\frac{1}{1+e^{-x}}');
const displayRef = useRef<HTMLDivElement>(null);
useEffect(() => {
renderLatex();
}, [latex]);
//// tow input show and edit
const renderLatex = () => {
if (displayRef.current) {
try {
katex.render(latex, displayRef.current, {
throwOnError: false,
displayMode: true,
});
} catch (error) {
console.error('KaTeX rendering error:', error);
displayRef.current.textContent = 'Error rendering LaTeX';
}
}
};
const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
setLatex(event.target.value);
};
return (
<div style={{ padding: '20px' }}>
<input
type="text"
value={latex}
onChange={handleInputChange}
style={{
width: '100%',
padding: '10px',
fontSize: '16px',
border: '1px solid #ccc',
borderRadius: '4px',
fontFamily: 'monospace',
marginBottom: '10px',
}}
/>
<div
ref={displayRef}
style={{
width: '100%',
padding: '10px',
fontSize: '16px',
border: '1px solid #ccc',
borderRadius: '4px',
minHeight: '40px',
}}
/>
</div>
);
};
export default MathInput;

68
src/Components/testInput/MathInputEdatble.tsx
View File

@ -1,68 +0,0 @@
import React, { useState, useEffect, useRef } from 'react';
import katex from 'katex';
import 'katex/dist/katex.min.css';
const MathInput: React.FC = () => {
const [latex, setLatex] = useState<string>('f(x) = \\frac{1}{1+e^{-x}}');
const inputRef = useRef<HTMLDivElement>(null);
const [isEditing, setIsEditing] = useState<boolean>(false);
useEffect(() => {
renderLatex();
}, [latex, isEditing]);
const renderLatex = () => {
if (inputRef.current && !isEditing) {
try {
katex.render(latex, inputRef.current, {
throwOnError: false,
displayMode: true,
});
} catch (error) {
console.error('KaTeX rendering error:', error);
inputRef.current.textContent = 'Error rendering LaTeX';
}
}
};
const handleInput = () => {
if (inputRef.current) {
setLatex(inputRef.current.textContent || '');
}
};
const handleFocus = () => {
setIsEditing(true);
if (inputRef.current) {
inputRef.current.textContent = latex;
}
};
const handleBlur = () => {
setIsEditing(false);
};
return (
<div style={{ padding: '20px' }}>
<div
ref={inputRef}
contentEditable
onInput={handleInput}
onFocus={handleFocus}
onBlur={handleBlur}
style={{
width: '100%',
padding: '10px',
fontSize: '16px',
border: '1px solid #ccc',
borderRadius: '4px',
minHeight: '40px',
fontFamily: isEditing ? 'monospace' : 'inherit',
cursor: 'text',
}}
/>
</div>
);
};
export default MathInput;

23
src/Hooks/useChangeTheme.tsx
View File

@ -1,23 +0,0 @@
import { useCallback, useEffect, useState } from "react";
export const useChangeTheme = () => {
const [currentTheme, setCurrentTheme] = useState(
localStorage.getItem("theme") ?? "light",
);
useEffect(() => {
if (currentTheme === "dark") {
document.body.classList.add("dark");
} else {
document.body.classList.remove("dark");
}
localStorage.setItem("theme", currentTheme);
}, [currentTheme]);
const changeTheme = useCallback((newTheme: any) => {
setCurrentTheme(newTheme);
}, []);
return { currentTheme, changeTheme };
};

18
src/Hooks/useDifferenceData.tsx
View File

@ -1,18 +0,0 @@
import { useState } from "react";
const useDifferenceData = (values: any, data: any) => {
const [newData, setNewData] = useState({});
for (const key in data) {
if (values[key] !== data[key]) {
setNewData((prevData) => ({
...prevData,
[key]: values[key],
}));
}
}
return newData;
};
export default useDifferenceData;

40
src/Hooks/useDisableShortcutsAndRightClick.tsx
View File

@ -1,40 +0,0 @@
import { useEffect } from "react";
const useDisableShortcutsAndRightClick = () => {
useEffect(() => {
const disableShortcutsAndRightClick = (event: Event) => {
// Check for Ctrl+Shift+C or F12
if (
(event as KeyboardEvent).ctrlKey &&
(event as KeyboardEvent).shiftKey &&
((event as KeyboardEvent).key === "C" ||
(event as KeyboardEvent).key === "c" ||
(event as KeyboardEvent).keyCode === 123) /* F12 key code */
) {
event.preventDefault();
}
};
const disableRightClick = (event: MouseEvent) => {
event.preventDefault();
};
document.addEventListener("keydown", disableShortcutsAndRightClick);
document.addEventListener("contextmenu", disableRightClick);
// Attempt to prevent F12 key default behavior
document.addEventListener("keydown", (event) => {
if (event.key === "F12" || event.keyCode === 123) {
event.preventDefault();
return false;
}
});
return () => {
document.removeEventListener("keydown", disableShortcutsAndRightClick);
document.removeEventListener("contextmenu", disableRightClick);
};
}, []);
};
export default useDisableShortcutsAndRightClick;

24
src/Hooks/useLoadingState.tsx
View File

@ -1,24 +0,0 @@
import { useState, useEffect } from "react";
function useLoadingState(
initialValue: boolean,
duration: number,
): [boolean, () => void] {
const [loading, setLoading] = useState<boolean>(initialValue);
useEffect(() => {
const timeoutId = setTimeout(() => {
setLoading(false);
}, duration);
return () => clearTimeout(timeoutId);
}, [duration]);
const resetLoading = () => {
setLoading(true);
};
return [loading, resetLoading];
}
export default useLoadingState;

45
src/Hooks/usePagination.tsx
View File

@ -1,45 +0,0 @@
import { Pagination } from "antd";
import { useLocation, useNavigate, useSearchParams } from "react-router-dom";
export const PaginationBody = ({ data, no_label, label_icon }: any) => {
const navigate = useNavigate();
const location = useLocation();
const pagination = location?.search || "";
const currentPage = parseInt(
new URLSearchParams(location.search).get("page") || "1",
10,
);
const pageSize = parseInt(
new URLSearchParams(location.search).get("per_page") || "8",
10,
);
const [searchParams] = useSearchParams();
const onChange = (page: number, pageSize?: number) => {
navigate(
`?page=${page}&per_page=${pageSize || data?.per_page}&search=${searchParams.get("search")}`,
{ replace: true },
);
};
const onShowSizeChange = (current: number, pageSize: number) => {
navigate(
`?page=${current}&per_page=${pageSize}&search=${searchParams.get("search")}`,
{ replace: true },
);
};
return (
<Pagination
className="text-center mt-3 paginateStyle"
total={data}
showTotal={(total: any) => `Total ${total} items`}
pageSize={pageSize}
pageSizeOptions={[8, 16, 24, 32, 40]}
defaultCurrent={currentPage}
current={currentPage} // Adding this line will set the current page correctly
onChange={onChange}
onShowSizeChange={onShowSizeChange}
/>
);
};

72
src/Hooks/usePercentage.tsx
View File

@ -1,72 +0,0 @@
import { RiArrowLeftDownLine, RiArrowRightUpLine } from "react-icons/ri";
export const PercentageImageSrc = (percentage: number) => {
if (percentage >= 90) {
return "../ArrowType/90.png";
} else if (percentage >= 80) {
return "../ArrowType/80.png";
} else if (percentage >= 60) {
return "../ArrowType/60.png";
} else if (percentage >= 40) {
return "../ArrowType/40.png";
} else if (percentage >= 20) {
return "../ArrowType/20.png";
}
return "";
};
export const getColorName = (percentage: number) => {
if (percentage >= 6) {
return "Red";
} else if (percentage >= 4) {
return "Orange";
} else if (percentage >= 2) {
return "Green";
} else {
return "Green";
}
};
export const getStrokeColor = (percentage: number) => {
if (percentage >= 90) {
return "#87d068"; // Green color
} else if (percentage >= 80) {
return "#87d068"; // Blue color
} else if (percentage >= 60) {
return "#ffec3d"; // Yellow color
} else if (percentage >= 40) {
return "#faad14"; // Orange color
} else if (percentage >= 20) {
return "#f5222d"; // Red color
} else {
return "#f5222d"; // Red color
}
};
export const getPercentageIcon = (percentage: number) => {
if (percentage >= 60) {
return <RiArrowRightUpLine />;
} else if (percentage >= 40) {
return <></>;
} else {
return <RiArrowLeftDownLine />;
}
};
export const getPercentageText = (percentage: number) => {
if (percentage >= 60) {
return "مرتفع";
} else if (percentage >= 40) {
return "متوسط";
} else {
return "منخفض";
}
};
{
/* <RiArrowRightUpLine /> */
}
{
/* <RiArrowLeftDownLine /> */
}

32
src/Hooks/usePreviousRoute.tsx
View File

@ -1,32 +0,0 @@
import { useEffect, useState } from 'react';
import { useLocation, useNavigate } from 'react-router-dom';
const usePreviousPath = () => {
const location = useLocation();
const navigate = useNavigate();
const [previousPath, setPreviousPath] = useState(null);
console.log(previousPath);
useEffect(() => {
// Update the previous path whenever the location changes
const currentPath = location.pathname as any;
setPreviousPath(currentPath);
// Clean up
return () => {
setPreviousPath(null);
};
}, [location]);
const navigateToPreviousPath = () => {
if (previousPath) {
navigate(previousPath);
} else {
navigate(-1); // Fallback to default behavior
}
};
return { navigateToPreviousPath };
};
export default usePreviousPath;

42
src/Hooks/useResponsive.tsx
View File

@ -1,42 +0,0 @@
import { useState, useEffect } from "react";
interface ResponsiveHookProps {
initialState: boolean;
setIs: any;
widthThreshold: number;
}
const useResponsive = ({
initialState,
setIs,
widthThreshold,
}: ResponsiveHookProps) => {
const [windowWidth, setWindowWidth] = useState(window.innerWidth);
const [isBoolean, setIsBoolean] = useState<boolean>(initialState);
useEffect(() => {
const handleResize = () => {
setWindowWidth(window.innerWidth);
};
window.addEventListener("resize", handleResize);
return () => {
window.removeEventListener("resize", handleResize);
};
}, []);
useEffect(() => {
if (windowWidth < widthThreshold && isBoolean) {
setIs(false);
setIsBoolean(false);
} else if (windowWidth >= widthThreshold && !isBoolean) {
setIs(true);
setIsBoolean(true);
}
}, [windowWidth, isBoolean, setIs, widthThreshold]);
return { windowWidth, isBoolean, setIsBoolean };
};
export default useResponsive;

1
src/Hooks/useSaveOnDisconnect.tsx
View File

@ -1,6 +1,5 @@
import { useEffect } from 'react'; import { useEffect } from 'react';
import { setLocalStorageQuestions } from '../utils/setLocalStorageQuestions'; import { setLocalStorageQuestions } from '../utils/setLocalStorageQuestions';
import { setLocalStorageBaseQuestions } from '../utils/setLocalStorageBaseQuestions';
const useSaveOnDisconnect = (noChange: boolean, QUESTION_OBJECT_KEY: string, SavedQuestionData: any) => { const useSaveOnDisconnect = (noChange: boolean, QUESTION_OBJECT_KEY: string, SavedQuestionData: any) => {
useEffect(() => { useEffect(() => {

21
src/Hooks/useSearchResults.tsx
View File

@ -1,21 +0,0 @@
import { useEffect, useState } from "react";
const useSearchResults = (data: any[] | undefined, query: string | null) => {
const [results, setResults] = useState<any[]>([]);
useEffect(() => {
const filteredResults =
data?.filter((item: any) =>
item?.toLowerCase()?.includes(query?.toLowerCase()),
) ?? [];
setResults(filteredResults);
if (results?.length === 0 && query != null && query?.length > 1) {
}
}, [query]);
return results;
};
export default useSearchResults;

4
src/Hooks/useSetPageTitle.ts
View File

@ -1,7 +1,7 @@
import { useEffect } from "react"; import { useEffect } from "react";
import { usePage_titleState } from "../zustand/PageTitleState"; import { usePage_titleState } from "../zustand/PageTitleState";
const useSetPage_title = (title: any) => { const useSetPageTitle = (title: any) => {
const setPage_title = usePage_titleState((state) => state.setPage_title); const setPage_title = usePage_titleState((state) => state.setPage_title);
useEffect(() => { useEffect(() => {
@ -9,4 +9,4 @@ const useSetPage_title = (title: any) => {
}, [title, setPage_title]); }, [title, setPage_title]);
}; };
export default useSetPage_title; export default useSetPageTitle;

2
src/Hooks/usegetTitleFromRoute.tsx
View File

@ -1,7 +1,7 @@
import { AppRoutes, CrudRoutes } from "../Routes"; import { AppRoutes, CrudRoutes } from "../Routes";
import { PROJECT_NAME } from "../config/AppKey"; import { PROJECT_NAME } from "../config/AppKey";
export const usegetTitleFromRoute = (path: any) => { export const useGetTitleFromRoute = (path: any) => {
if (AppRoutes[path]) { if (AppRoutes[path]) {
return `${PROJECT_NAME} | ${AppRoutes[path]}`; return `${PROJECT_NAME} | ${AppRoutes[path]}`;
} else if (CrudRoutes[path]) { } else if (CrudRoutes[path]) {

4
src/Layout/Ui/Layout.tsx
View File

@ -1,5 +1,5 @@
import React, { useEffect } from "react"; import React, { useEffect } from "react";
import { usegetTitleFromRoute } from "../../Hooks/usegetTitleFromRoute"; import { useGetTitleFromRoute } from "../../Hooks/useGetTitleFromRoute";
import { Helmet } from "react-helmet"; import { Helmet } from "react-helmet";
import { useLocation } from "react-router-dom"; import { useLocation } from "react-router-dom";
import NavBar from "./NavBar"; import NavBar from "./NavBar";
@ -18,7 +18,7 @@ const Layout = ({
return ( return (
<> <>
<Helmet> <Helmet>
<title>{usegetTitleFromRoute(location.pathname)}</title> <title>{useGetTitleFromRoute(location.pathname)}</title>
</Helmet> </Helmet>
<div className="Layout"> <div className="Layout">
<main className={`${className} Layout_Body`}> <main className={`${className} Layout_Body`}>

6
src/Pages/Home/Dummy.tsx
View File

@ -2,14 +2,14 @@ import React from "react";
import Image from "../../Components/Ui/Image"; import Image from "../../Components/Ui/Image";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { ABILITIES_ENUM } from "../../enums/abilities"; import { ABILITIES_ENUM } from "../../enums/abilities";
import useSetPage_title from "../../Hooks/useSetPageTitle"; import useSetPageTitle from "../../Hooks/useSetPageTitle";
const Dummy = () => { const Dummy = () => {
const [t] = useTranslation(); const [t] = useTranslation();
useSetPage_title(`${t(ABILITIES_ENUM?.MAIN_PAGE)} / ${t("dashboard")}`); useSetPageTitle(`${t(ABILITIES_ENUM?.MAIN_PAGE)} / ${t("dashboard")}`);
return ( return (
<div className="DammyHomePage"> <div className="DummyHomePage">
<Image src="/App/SyriaLogo.webp" /> <Image src="/App/SyriaLogo.webp" />
</div> </div>
); );

19
src/Pages/Home/Page.tsx
View File

@ -1,19 +0,0 @@
import ChartSection from "./Section/ChartSection";
import NoteSections from "./Section/NoteSections";
import { useTranslation } from "react-i18next";
import { ABILITIES_ENUM } from "../../enums/abilities";
// import useSetPage_title from "../../Hooks/useSetPageTitle";
const Page = () => {
const [t] = useTranslation();
// useSetPage_title(`${t(ABILITIES_ENUM?.MAIN_PAGE)} / ${t("dashboard")}`);
return (
<div className="HomePage">
<ChartSection />
<NoteSections />
</div>
);
};
export default Page;

26
src/Pages/Home/Section/ChartSection.tsx
View File

@ -1,26 +0,0 @@
import React from "react";
import CountSection from "../../../Components/Home/CountSection";
import ColumnChart from "../../../Components/Chart/ColumnChart";
import AreaChart from "../../../Components/Chart/AreaChart";
import StudentSubjects from "../../../Components/Home/StudentSubjects";
import CalendarSection from "../../../Components/Home/CalendarSection";
const ChartSection = () => {
return (
<div className="ChartSection">
<CountSection />
<div className="TowItem">
<ColumnChart />
<CalendarSection />
</div>
<AreaChart />
<div className="TowItem">
<StudentSubjects />
<ColumnChart />
</div>
</div>
);
};
export default ChartSection;

14
src/Pages/Home/Section/NoteSections.tsx
View File

@ -1,14 +0,0 @@
import React from "react";
import NoteSection from "../../../Components/Home/NoteSection";
import ActivitySection from "../../../Components/Home/ActivitySection";
const NoteSections = () => {
return (
<div className="NoteSections">
<NoteSection />
<ActivitySection />
</div>
);
};
export default NoteSections;

6
src/Pages/Tags/Page.tsx
View File

@ -3,12 +3,12 @@
import useModalHandler from "../../utils/useModalHandler"; import useModalHandler from "../../utils/useModalHandler";
import { ModalEnum } from "../../enums/Model"; import { ModalEnum } from "../../enums/Model";
// import useSetPage_title from "../../Hooks/useSetPageTitle"; // import useSetPageTitle from "../../Hooks/useSetPageTitle";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { lazy, Suspense } from 'react'; import { lazy, Suspense } from 'react';
import { Spin } from "antd"; import { Spin } from "antd";
import { canAddTags } from "../../utils/hasAbilityFn"; import { canAddTags } from "../../utils/hasAbilityFn";
import useSetPage_title from "../../Hooks/useSetPageTitle"; import useSetPageTitle from "../../Hooks/useSetPageTitle";
const Table = lazy(() => import('./Table')); const Table = lazy(() => import('./Table'));
const AddModalForm = lazy(() => import('./Model/AddModel')); const AddModalForm = lazy(() => import('./Model/AddModel'));
const EditModalForm = lazy(() => import('./Model/EditModel')); const EditModalForm = lazy(() => import('./Model/EditModel'));
@ -19,7 +19,7 @@ const SearchField = lazy(() => import('../../Components/DataTable/SearchField'))
const TableHeader = () => { const TableHeader = () => {
const { handel_open_model } = useModalHandler(); const { handel_open_model } = useModalHandler();
const [t] = useTranslation(); const [t] = useTranslation();
useSetPage_title( useSetPageTitle(
t(`page_header.tags`), t(`page_header.tags`),
); );

4
src/Pages/Unit/Page.tsx
View File

@ -4,7 +4,7 @@ import { Spin } from "antd";
import { useParams } from "react-router-dom"; import { useParams } from "react-router-dom";
import { ParamsEnum } from "../../enums/params"; import { ParamsEnum } from "../../enums/params";
import { useGetAllSubject } from "../../api/subject"; import { useGetAllSubject } from "../../api/subject";
import useSetPage_title from "../../Hooks/useSetPageTitle"; import useSetPageTitle from "../../Hooks/useSetPageTitle";
const Table = lazy(() => import('./Table')); const Table = lazy(() => import('./Table'));
const AddModalForm = lazy(() => import('./Model/AddModel')); const AddModalForm = lazy(() => import('./Model/AddModel'));
@ -23,7 +23,7 @@ const TableHeader = () => {
const SubjectName = Subject?.data?.name ?? ""; const SubjectName = Subject?.data?.name ?? "";
useSetPage_title( useSetPageTitle(
t(`page_header.subject`) + t(`page_header.subject`) +
"/" + "/" +
t(`${SubjectName}`), t(`${SubjectName}`),

4
src/Pages/lesson/Page.tsx
View File

@ -1,7 +1,7 @@
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { lazy, Suspense } from 'react'; import { lazy, Suspense } from 'react';
import { Spin } from "antd"; import { Spin } from "antd";
import useSetPage_title from "../../Hooks/useSetPageTitle"; import useSetPageTitle from "../../Hooks/useSetPageTitle";
import { useParams } from "react-router-dom"; import { useParams } from "react-router-dom";
import { ParamsEnum } from "../../enums/params"; import { ParamsEnum } from "../../enums/params";
import { useGetAllUnit } from "../../api/unit"; import { useGetAllUnit } from "../../api/unit";
@ -21,7 +21,7 @@ const TableHeader = () => {
console.log(unit?.data); console.log(unit?.data);
useSetPage_title( useSetPageTitle(
t(`page_header.subject`) + t(`page_header.subject`) +
"/" + "/" +
`${SubjectName}` + `${SubjectName}` +

4
src/Pages/question/AddPage.tsx
View File

@ -22,7 +22,7 @@ import { QUESTION_OBJECT_KEY } from "../../config/AppKey";
import useSaveOnDisconnect from "../../Hooks/useSaveOnDisconnect"; import useSaveOnDisconnect from "../../Hooks/useSaveOnDisconnect";
import { getLocalStorageQuestions } from "../../utils/setLocalStorageQuestions"; import { getLocalStorageQuestions } from "../../utils/setLocalStorageQuestions";
import { toast } from "react-toastify"; import { toast } from "react-toastify";
import useSetPage_title from "../../Hooks/useSetPageTitle"; import useSetPageTitle from "../../Hooks/useSetPageTitle";
import { useGetAllUnit } from "../../api/unit"; import { useGetAllUnit } from "../../api/unit";
import { useGetAllLesson } from "../../api/lesson"; import { useGetAllLesson } from "../../api/lesson";
@ -44,7 +44,7 @@ const AddPage: React.FC = () => {
const SubjectName = unit?.data?.subject?.name ?? ""; const SubjectName = unit?.data?.subject?.name ?? "";
const lessonName = lesson?.data?.name ?? ""; const lessonName = lesson?.data?.name ?? "";
useSetPage_title( useSetPageTitle(
t(`page_header.subject`) + t(`page_header.subject`) +
"/" + "/" +
`${SubjectName}` + `${SubjectName}` +

4
src/Pages/question/EditPage.tsx
View File

@ -14,7 +14,7 @@ import Form from './Model/Edit'
import BaseForm from './Model/Malty/Edit' import BaseForm from './Model/Malty/Edit'
import { Question } from "../../types/Item"; import { Question } from "../../types/Item";
import { toast } from "react-toastify"; import { toast } from "react-toastify";
import useSetPage_title from "../../Hooks/useSetPageTitle"; import useSetPageTitle from "../../Hooks/useSetPageTitle";
import { useGetAllUnit } from "../../api/unit"; import { useGetAllUnit } from "../../api/unit";
import { useGetAllLesson } from "../../api/lesson"; import { useGetAllLesson } from "../../api/lesson";
@ -51,7 +51,7 @@ const EditPage: React.FC = () => {
const SubjectName = unit?.data?.subject?.name ?? ""; const SubjectName = unit?.data?.subject?.name ?? "";
const lessonName = lesson?.data?.name ?? ""; const lessonName = lesson?.data?.name ?? "";
useSetPage_title( useSetPageTitle(
t(`page_header.subject`) + t(`page_header.subject`) +
"/" + "/" +
`${SubjectName}` + `${SubjectName}` +

4
src/Pages/question/Page.tsx
View File

@ -5,7 +5,7 @@ import DeleteModel from './Model/Delete'
import { useParams } from "react-router-dom"; import { useParams } from "react-router-dom";
import { ParamsEnum } from "../../enums/params"; import { ParamsEnum } from "../../enums/params";
import { useGetAllUnit } from "../../api/unit"; import { useGetAllUnit } from "../../api/unit";
import useSetPage_title from "../../Hooks/useSetPageTitle"; import useSetPageTitle from "../../Hooks/useSetPageTitle";
import { useGetAllLesson } from "../../api/lesson"; import { useGetAllLesson } from "../../api/lesson";
const Table = lazy(() => import('./Table')); const Table = lazy(() => import('./Table'));
@ -20,7 +20,7 @@ const TableHeader = () => {
const SubjectName = unit?.data?.subject?.name ?? ""; const SubjectName = unit?.data?.subject?.name ?? "";
const lessonName = lesson?.data?.name ?? ""; const lessonName = lesson?.data?.name ?? "";
useSetPage_title( useSetPageTitle(
t(`page_header.subject`) + t(`page_header.subject`) +
"/" + "/" +
`${SubjectName}` + `${SubjectName}` +

4
src/Pages/subject/Table/Page.tsx
View File

@ -9,7 +9,7 @@ import TablePage from './TablePage';
import AddSubjectModalForm from "../Model/AddModel"; import AddSubjectModalForm from "../Model/AddModel";
import EditSubjectModalForm from "../Model/EditModel"; import EditSubjectModalForm from "../Model/EditModel";
import DeleteSubjectModalForm from "../Model/Delete"; import DeleteSubjectModalForm from "../Model/Delete";
import useSetPage_title from '../../../Hooks/useSetPageTitle'; import useSetPageTitle from '../../../Hooks/useSetPageTitle';
import { canAddSubject } from '../../../utils/hasAbilityFn'; import { canAddSubject } from '../../../utils/hasAbilityFn';
@ -18,7 +18,7 @@ const TableWithHeader = () => {
const { handel_open_model } = useModalHandler(); const { handel_open_model } = useModalHandler();
const [t] = useTranslation(); const [t] = useTranslation();
useSetPage_title( useSetPageTitle(
t(`page_header.subject`), t(`page_header.subject`),
); );

4
src/Pages/subject/show/Page.tsx
View File

@ -1,7 +1,7 @@
import React, { useEffect } from "react"; import React, { useEffect } from "react";
import ActiveTabs from "./ActiveTable"; import ActiveTabs from "./ActiveTable";
import { useButtonState } from "../../../zustand/ButtonState"; import { useButtonState } from "../../../zustand/ButtonState";
// import useSetPage_title from "../../../Hooks/useSetPageTitle"; // import useSetPageTitle from "../../../Hooks/useSetPageTitle";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
// import { ABILITIES_ENUM } from "../../../enums/abilities"; // import { ABILITIES_ENUM } from "../../../enums/abilities";
@ -11,7 +11,7 @@ const Page = () => {
setActiveTab(0); setActiveTab(0);
}, []); }, []);
const [t] = useTranslation(); const [t] = useTranslation();
// useSetPage_title( // useSetPageTitle(
// `${t(ABILITIES_ENUM?.MAIN_PAGE)} / ${t(`models.${ABILITIES_ENUM.COURSE}`)} / ${t(`models.${ABILITIES_ENUM.EDUCATION_CLASS}`)} / ${t(`models.${ABILITIES_ENUM.SUBJECT}`)}`, // `${t(ABILITIES_ENUM?.MAIN_PAGE)} / ${t(`models.${ABILITIES_ENUM.COURSE}`)} / ${t(`models.${ABILITIES_ENUM.EDUCATION_CLASS}`)} / ${t(`models.${ABILITIES_ENUM.SUBJECT}`)}`,
// ); // );

8
src/Styles/App/font.scss
View File

@ -1,10 +1,4 @@
@font-face {
font-family: "Poppins";
src: url("../../font/Poppins-Regular.ttf") format("truetype"); /* Specify the path to the font file */
font-display: swap;
font-weight: normal;
font-style: normal;
}
@font-face { @font-face {
font-family: "Poppins_Bold"; font-family: "Poppins_Bold";
src: url("../../font/Poppins-Bold.ttf") format("truetype"); /* Specify the path to the font file */ src: url("../../font/Poppins-Bold.ttf") format("truetype"); /* Specify the path to the font file */

2
src/Styles/Home/Home.scss
View File

@ -213,7 +213,7 @@
background: var(--bg); background: var(--bg);
} }
.DammyHomePage { .DummyHomePage {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;

86
src/Styles/Pages/Division.scss
View File

@ -1,90 +1,4 @@
.Division {
padding: 4%;
display: flex;
flex-direction: column;
gap: 2vw;
.DataTable {
width: 100%;
}
.Divisions_header_section {
display: flex;
padding: 2vw 3vw;
width: 100%;
display: flex;
background: var(--bg);
border-radius: var(--border-radius);
position: relative;
transition: 0.5s ease-in-out;
.CountCards {
display: flex;
flex-wrap: wrap;
gap: 0;
width: 86%;
}
.CountCard {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.3vw;
// margin-bottom: 2vw;
padding-block: 1.3vw;
width: 11vw;
border-radius: var(--border-radius);
transition: 0.4s ease-in-out;
cursor: pointer;
&:hover {
background: #e0e0e0;
transition: 0.4s ease-in-out;
}
h6 {
color: var(--secondary);
font-size: 1.2vw;
font-weight: bold;
}
h4 {
font-size: 1.2vw;
font-weight: 400;
margin-bottom: 0;
font-weight: bold;
}
i {
width: 4vw;
height: 4vw;
border-radius: 50%;
background: var(--primary);
@include Flex;
margin-bottom: 4px;
svg {
color: var(--white);
font-size: 2.4vw;
}
}
}
}
.Add_button {
outline: none;
border: none;
border-radius: 70px;
padding: 1vw 1.4vw;
background: var(--primary);
color: var(--white);
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
font-size: 1.2vw;
height: 3vw;
width: 12vw;
}
}
.hidden { .hidden {
display: none !important; display: none !important;

128
src/Styles/Pages/activity.scss
View File

@ -406,131 +406,3 @@
} }
} }
.StudentCard {
@include Shadow;
border-radius: var(--border-radius);
position: relative;
background: var(--bg);
&::after {
position: absolute;
top: 0;
content: "";
background: url("../../../public/student/student_bg.svg");
background-repeat: no-repeat;
background-size: cover;
height: 8vw;
width: 100%;
border-top-left-radius: var(--border-radius);
border-top-right-radius: var(--border-radius);
z-index: 1;
}
display: flex;
flex-direction: column;
width: 100%;
--chideren-padding: 2vw 3vw;
> main {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
z-index: 4;
padding: var(--chideren-padding);
> div {
> img {
width: 12vw;
margin-bottom: 2vw;
}
h1 {
color: var(--secondary);
font-size: 2vw;
font-weight: bold;
margin-bottom: 0.7vw;
}
h6 {
font-size: 1vw;
color: var(--subtext);
}
}
> span {
> div {
width: 3vw;
height: 3vw;
border-radius: 50%;
background: var(--primary);
@include Flex;
svg {
font-size: 1.5vw;
color: var(--white);
}
}
}
}
> footer {
padding: var(--chideren-padding);
padding-top: 0;
width: 100%;
position: relative;
.FooterDetailsCards {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 2vw;
width: 85%;
}
.FooterDetailsCard {
display: flex;
flex-direction: column;
gap: 0.4vw;
h5 {
color: var(--subtext);
font-size: 1vw;
}
> span {
display: flex;
align-items: center;
justify-content: center;
gap: 0.9vw;
div {
width: 2.5vw;
height: 2.5vw;
border-radius: 50%;
background: var(--utils_color_one);
@include Flex;
svg {
font-size: 1.5vw;
color: var(--white);
}
}
h6 {
color: var(--secondary);
font-weight: bold;
font-size: 1vw;
}
}
}
.footer_see_more {
position: absolute;
left: 4%;
bottom: 35%;
color: var(--primary);
font-size: 1vw;
}
}
}

53
src/Tables/ChartBigCards.tsx
View File

@ -1,53 +0,0 @@
import React from "react";
import { FaFileWord, FaHome } from "react-icons/fa";
import Image from "../Components/Ui/Image";
import { PercentageImageSrc } from "../Hooks/usePercentage";
const ChartBigCards = () => {
// Fake data for demonstration
const fakeData = [
{
percentage: 90,
students: 50,
header: "نسبة الحاصلين على العلامة التامّة",
info: "طالب وطالب",
icon: <FaHome />,
},
{
percentage: 60,
students: 40,
header: "نسبة الحاصلين على العلامة التامّة",
info: "طالب وطالب",
icon: <FaHome />,
},
{
percentage: 20,
students: 30,
header: "نسبة الحاصلين على العلامة التامّة",
info: "طالب وطالب",
icon: <FaHome />,
},
];
return (
<div className="ChartBigCards">
{fakeData.map((data, index) => (
<div key={index} className="ChartBigCard">
<div className="ChartBigCard_Right">
<h4>{data?.header}</h4>
<h5>{`%${data.percentage}`}</h5>
<p>{`${data.students + data?.info}`}</p>
</div>
<div className="ChartBigCard_Mid">
<Image src={PercentageImageSrc(data.percentage)} />
</div>
<div className="ChartBigCard_Left">
<span>{data?.icon}</span>
</div>
</div>
))}
</div>
);
};
export default ChartBigCards;

59
src/Tables/ChartCards.tsx
View File

@ -1,59 +0,0 @@
import React from "react";
import Image from "../Components/Ui/Image";
import { FaFileWord, FaHome } from "react-icons/fa";
const generateFakeData = () => {
const data = [];
for (let i = 0; i < 4; i++) {
const percentage = Math.random() * 100;
const studentCount = Math.floor(Math.random() * 100);
const header = `نسبة الحاصلين على العلامة التامة`;
const info = "طالب وطالب";
const icon = <FaHome />;
data.push({ percentage, studentCount, header, info, icon });
}
return data;
};
const ChartCard = ({ percentage, studentCount, header, info, icon }: any) => {
return (
<div className="ChartCard">
<div className="ChartCard_Right">
<h4>{header}</h4>
<h5>{percentage.toFixed(2)}%</h5>
<p>
{studentCount} {info}
</p>
</div>
<div className="ChartCard_Mid">
<Image src="../Cards/Graph.png" />
</div>
<div className="ChartCard_Left">
<span>
<FaHome />
</span>
</div>
</div>
);
};
const ChartCards = () => {
const data = generateFakeData();
return (
<div className="ChartCards">
{data.map((item: any, index) => (
<ChartCard
key={index}
percentage={item.percentage}
studentCount={item.studentCount}
header={item?.header}
info={item?.info}
/>
))}
</div>
);
};
export default ChartCards;

43
src/Tables/PercentageCard.tsx
View File

@ -1,43 +0,0 @@
import React from "react";
import Image from "../Components/Ui/Image";
import { Progress } from "antd";
import { PercentageImageSrc, getStrokeColor } from "../Hooks/usePercentage";
const PercentageCard = () => {
// Fake data for demonstration
const fakeData = [
{ subject: "رياضيات", percentage: 70 },
{ subject: "علوم", percentage: 50 },
{ subject: "لغة عربية", percentage: 90 },
{ subject: "علوم", percentage: 50 },
{ subject: "علوم", percentage: 20 },
{ subject: "علوم", percentage: 30 },
// Add more fake data as needed
];
return (
<div className="PercentageCards">
{fakeData.map((data, index) => (
<div key={index} className="PercentageCard">
<div className="PercentageCard_Right">
<h6>{data.subject}</h6>
<h4>{`%${data.percentage}`}</h4>
<p>مستوى المادة</p>
</div>
<div className="PercentageCard_Mid">
<Image src={PercentageImageSrc(data.percentage)} />
</div>
<Progress
type="circle"
percent={data.percentage}
size={80}
className="PercentageCard_Left"
strokeColor={getStrokeColor(data.percentage)}
/>
</div>
))}
</div>
);
};
export default PercentageCard;

54
src/Tables/Table.tsx
View File

@ -1,54 +0,0 @@
import { Tabs } from "antd";
import React, { useState } from "react";
import type { TabsProps } from "antd";
import { FaDownload } from "react-icons/fa";
const Table = () => {
const [Activetable, setActivetable] = useState<any>("1");
const items: TabsProps["items"] = [
{
key: "1",
label: "الانحراف المعياري للعلامات",
},
{
key: "2",
label: "نسب النجاح بالمادة في المدارس",
},
{
key: "3",
label: "تصنيف المدارس وفقاً لترتيب نسب النجاح",
},
];
const onChange = (key: string) => {
// console.log(key);
setActivetable(key);
};
return (
<div className="Table">
<div className="table_tabs">
<span>ماالتقرير الذي تريده ؟</span>
<Tabs
className="table_tabs"
defaultActiveKey="1"
items={items}
onChange={onChange}
/>
</div>
<div className="table_header">
<div>
<h6>نسب النجاح في المدارس</h6>
<p>100 مدرسة</p>
</div>
<div>
<button>
<FaDownload /> طباعة
</button>
</div>
</div>
{/* <Page/> */}
</div>
);
};
export default Table;

21
src/api/ability.ts
View File

@ -1,21 +0,0 @@
import useAddMutation from "./helper/useAddMutation";
import useDeleteMutation from "./helper/useDeleteMutation";
import useGetQuery from "./helper/useGetQuery";
import useUpdateMutation from "./helper/useUpdateMutation";
const API = {
GET: "/ability",
ADD: "/ability",
DELETE: "/ability",
UPDATE: "/ability",
};
const KEY = "ability";
export const useGetAllAbility = (params?: any) =>
useGetQuery(KEY, API.GET, params);
export const useAddAbility = () => useAddMutation(KEY, API.ADD);
export const useUpdateAbility = (params?: any) =>
useUpdateMutation(KEY, API.GET);
export const useDeleteAbility = (params?: any) =>
useDeleteMutation(KEY, API.DELETE);

18
src/api/absence.ts
View File

@ -1,18 +0,0 @@
import useAddMutation from "./helper/useAddMutation";
import useGetQuery from "./helper/useGetQuery";
import useUpdateMutation from "./helper/useUpdateMutation";
const API = {
GET: "/absence",
ADD: "/absence",
DELETE: "/absence",
UPDATE: "/absence",
};
const KEY = "absence";
export const useGetAllAbsence = (params?: any, options?: any) =>
useGetQuery(KEY, API.GET, params, options);
export const useAddAbsence = () => useAddMutation(KEY, API.ADD);
export const useUpdateAbsence = (params?: any) =>
useUpdateMutation(KEY, API.GET);

22
src/api/admin.ts
View File

@ -1,22 +0,0 @@
import useDeleteMutation from "./helper/useDeleteMutation";
import useAddMutation from "./helper/useAddMutation";
import useGetQuery from "./helper/useGetQuery";
import useUpdateMutation from "./helper/useUpdateMutation";
const API = {
GET: "/admin",
ADD: "/admin",
DELETE: "/admin",
UPDATE: "/admin",
};
const KEY = "admin";
export const useGetAllAdmin = (params?: any, options?: any) =>
useGetQuery(KEY, API.GET, params, options);
export const useAddAdmin = () => useAddMutation(KEY, API.ADD);
export const useUpdateAdmin = (params?: any) =>
useUpdateMutation(KEY, API.GET);
export const useDeleteAdmin = (params?: any) =>
useDeleteMutation(KEY, API.DELETE);

18
src/api/attendence.ts
View File

@ -1,18 +0,0 @@
import useAddMutation from "./helper/useAddMutation";
import useGetQuery from "./helper/useGetQuery";
import useUpdateMutation from "./helper/useUpdateMutation";
const API = {
GET: "/registrationRecord/attendence",
ADD: "/registrationRecord/attendence",
DELETE: "/registrationRecord/attendence",
UPDATE: "/registrationRecord/attendence",
};
const KEY = "attendence";
export const useGetAllAttendence = (params?: any, options?: any) =>
useGetQuery(KEY, API.GET, params, options);
export const useAddAttendence = () => useAddMutation(KEY, API.ADD);
export const useUpdateAttendence = (params?: any) =>
useUpdateMutation(KEY, API.GET);

21
src/api/branch.ts
View File

@ -1,21 +0,0 @@
import useAddMutation from "./helper/useAddMutation";
import useDeleteMutation from "./helper/useDeleteMutation";
import useGetQuery from "./helper/useGetQuery";
import useUpdateMutation from "./helper/useUpdateMutation";
const API = {
GET: "/branch",
ADD: "/branch",
DELETE: "/branch",
UPDATE: "/branch",
};
const KEY = "branch";
export const useGetAllBranch = (params?: any, options?: any) =>
useGetQuery(KEY, API.GET, params, options);
export const useAddBranch = () => useAddMutation(KEY, API.ADD);
export const useUpdateBranch = (params?: any) =>
useUpdateMutation(KEY, API.GET);
export const useDeleteBranch = (params?: any) =>
useDeleteMutation(KEY, API.DELETE);

21
src/api/cycle.ts
View File

@ -1,21 +0,0 @@
import useAddMutation from "./helper/useAddMutation";
import useDeleteMutation from "./helper/useDeleteMutation";
import useGetQuery from "./helper/useGetQuery";
import useUpdateMutation from "./helper/useUpdateMutation";
const API = {
GET: "/cycle",
ADD: "/cycle",
DELETE: "/cycle",
UPDATE: "/cycle",
};
const KEY = "cycle";
export const useGetAllCycle = (params?: any, options?: any) =>
useGetQuery(KEY, API.GET, params, options);
export const useAddCycle = () => useAddMutation(KEY, API.ADD);
export const useUpdateCycle = (params?: any) =>
useUpdateMutation(KEY, API.GET);
export const useDeleteCycle = (params?: any) =>
useDeleteMutation(KEY, API.DELETE);

21
src/api/earlyDeparture.ts
View File

@ -1,21 +0,0 @@
import useAddMutation from "./helper/useAddMutation";
import useDeleteMutation from "./helper/useDeleteMutation";
import useGetQuery from "./helper/useGetQuery";
import useUpdateMutation from "./helper/useUpdateMutation";
const API = {
GET: "/registrationRecord/earlyDeparture",
ADD: "/earlyDeparture",
DELETE: "/earlyDeparture",
UPDATE: "/earlyDeparture",
};
const KEY = "earlyDeparture";
export const useGetAllEarlyDeparture = (params?: any, options?: any) =>
useGetQuery(KEY, API.GET, params, options);
export const useAddEarlyDeparture = () => useAddMutation(KEY, API.ADD);
export const useUpdateEarlyDeparture = (params?: any) =>
useUpdateMutation(KEY, API.UPDATE, params);
export const useDeleteEarlyDeparture = (params?: any) =>
useDeleteMutation(KEY, API.DELETE);

21
src/api/example.ts
View File

@ -1,21 +0,0 @@
import useAddMutation from "./helper/useAddMutation";
import useDeleteMutation from "./helper/useDeleteMutation";
import useGetQuery from "./helper/useGetQuery";
import useUpdateMutation from "./helper/useUpdateMutation";
const API = {
GET: "/examle",
ADD: "/examle",
DELETE: "/examle",
UPDATE: "/examle",
};
const KEY = "examLE";
export const useGetAllexamle = (params?: any) =>
useGetQuery(KEY, API.GET, params);
export const useAddexamle = () => useAddMutation(KEY, API.ADD);
export const useUpdateexamle = (params?: any) =>
useUpdateMutation(KEY, API.GET);
export const useDeleteexamle = (params?: any) =>
useDeleteMutation(KEY, API.DELETE);

21
src/api/homework.ts
View File

@ -1,21 +0,0 @@
import useAddMutation from "./helper/useAddMutation";
import useDeleteMutation from "./helper/useDeleteMutation";
import useGetQuery from "./helper/useGetQuery";
import useUpdateMutation from "./helper/useUpdateMutation";
const API = {
GET: "/homework",
ADD: "/homework",
DELETE: "/homework",
UPDATE: "/homework",
};
const KEY = "homework";
export const useGetAllHomework = (params?: any) =>
useGetQuery(KEY, API.GET, params);
export const useAddHomework = () => useAddMutation(KEY, API.ADD);
export const useUpdateHomework = (params?: any) =>
useUpdateMutation(KEY, API.UPDATE, params);
export const useDeleteHomework = (params?: any) =>
useDeleteMutation(KEY, API.DELETE);

18
src/api/lateArrival.ts
View File

@ -1,18 +0,0 @@
import useAddMutation from "./helper/useAddMutation";
import useGetQuery from "./helper/useGetQuery";
import useUpdateMutation from "./helper/useUpdateMutation";
const API = {
GET: "/lateArrival",
ADD: "/lateArrival",
DELETE: "/lateArrival",
UPDATE: "/lateArrival",
};
const KEY = "lateArrival";
export const useGetAllLateArrival = (params?: any, options?: any) =>
useGetQuery(KEY, API.GET, params, options);
export const useAddLateArrival = () => useAddMutation(KEY, API.ADD);
export const useUpdateLateArrival = (params?: any) =>
useUpdateMutation(KEY, API.GET);

21
src/api/mark.ts
View File

@ -1,21 +0,0 @@
import useAddMutation from "./helper/useAddMutation";
import useDeleteMutation from "./helper/useDeleteMutation";
import useGetQuery from "./helper/useGetQuery";
import useUpdateMutation from "./helper/useUpdateMutation";
const API = {
GET: "/mark",
ADD: "/mark",
DELETE: "/mark",
UPDATE: "/mark",
};
const KEY = "mark";
export const useGetAllMark = (params?: any, options?: any) =>
useGetQuery(KEY, API.GET, params, options);
export const useAddMark = () => useAddMutation(KEY, API.ADD);
export const useUpdateMark = (params?: any) =>
useUpdateMutation(KEY, API.GET);
export const useDeleteMark = (params?: any) =>
useDeleteMutation(KEY, API.DELETE);

21
src/api/note.ts
View File

@ -1,21 +0,0 @@
import useAddMutation from "./helper/useAddMutation";
import useDeleteMutation from "./helper/useDeleteMutation";
import useGetQuery from "./helper/useGetQuery";
import useUpdateMutation from "./helper/useUpdateMutation";
const API = {
GET: "/note",
ADD: "/note",
DELETE: "/note",
UPDATE: "/note",
};
const KEY = "note";
export const useGetAllNote = (params?: any, options?: any) =>
useGetQuery(KEY, API.GET, params, options);
export const useAddNote = () => useAddMutation(KEY, API.ADD);
export const useUpdateNote = (params?: any) =>
useUpdateMutation(KEY, API.GET);
export const useDeleteNote = (params?: any) =>
useDeleteMutation(KEY, API.DELETE);

26
src/api/payment.ts
View File

@ -1,26 +0,0 @@
import useAddMutation from "./helper/useAddMutation";
import useDeleteMutation from "./helper/useDeleteMutation";
import useGetQuery from "./helper/useGetQuery";
import useUpdateMutation from "./helper/useUpdateMutation";
const API = {
GET: "/payment",
OVERVIEW: "/payment/overview",
ADD: "/payment",
DELETE: "/payment",
UPDATE: "/payment",
};
const KEY = "payment";
export const useGetAllPayment = (params?: any, options?: any) =>
useGetQuery(KEY, API.GET, params, options);
export const useAddPayment = () => useAddMutation(KEY, API.ADD);
export const useUpdatePayment = (params?: any) =>
useUpdateMutation(KEY, API.GET);
export const useDeletePayment = (params?: any) =>
useDeleteMutation(KEY, API.DELETE);
export const useGetOverView = (params?: any, options?: any) =>
useGetQuery(KEY, API.OVERVIEW, params, options);

18
src/api/presence.ts
View File

@ -1,18 +0,0 @@
import useAddMutation from "./helper/useAddMutation";
import useGetQuery from "./helper/useGetQuery";
import useUpdateMutation from "./helper/useUpdateMutation";
const API = {
GET: "/presence",
ADD: "/presence",
DELETE: "/presence",
UPDATE: "/presence",
};
const KEY = "presence";
export const useGetAllPresence = (params?: any, options?: any) =>
useGetQuery(KEY, API.GET, params, options);
export const useAddPresence = () => useAddMutation(KEY, API.ADD);
export const useUpdatePresence = (params?: any) =>
useUpdateMutation(KEY, API.GET);

21
src/api/semantics.ts
View File

@ -1,21 +0,0 @@
import useAddMutation from "./helper/useAddMutation";
import useDeleteMutation from "./helper/useDeleteMutation";
import useGetQuery from "./helper/useGetQuery";
import useUpdateMutation from "./helper/useUpdateMutation";
const API = {
GET: "/semantics",
ADD: "/semantics",
DELETE: "/semantics",
UPDATE: "/semantics",
};
const KEY = "semantics";
export const useGetAllSemantics = (params?: any, options?: any) =>
useGetQuery(KEY, API.GET, params, options);
export const useAddSemantics = () => useAddMutation(KEY, API.ADD);
export const useUpdateSemantics = (params?: any) =>
useUpdateMutation(KEY, API.GET);
export const useDeleteSemantics = (params?: any) =>
useDeleteMutation(KEY, API.DELETE);

22
src/api/session.ts
View File

@ -1,22 +0,0 @@
import useAddMutation from "./helper/useAddMutation";
import useDeleteMutation from "./helper/useDeleteMutation";
import useGetQuery from "./helper/useGetQuery";
import useUpdateMutation from "./helper/useUpdateMutation";
const API = {
GET: "/session",
ADD: "/session",
DELETE: "/session",
UPDATE: "/session",
};
const KEY = "session";
const GetKey = ["session", "session"];
export const useGetAllSession = (params?: any, options?: any) =>
useGetQuery(GetKey, API.GET, params, options);
export const useAddSession = () => useAddMutation(KEY, API.ADD);
export const useUpdateSession = (params?: any) =>
useUpdateMutation(KEY, API.GET);
export const useDeleteSession = (params?: any) =>
useDeleteMutation(KEY, API.DELETE);

21
src/api/sessionContent.ts
View File

@ -1,21 +0,0 @@
import useAddMutation from "./helper/useAddMutation";
import useDeleteMutation from "./helper/useDeleteMutation";
import useGetQuery from "./helper/useGetQuery";
import useUpdateMutation from "./helper/useUpdateMutation";
const API = {
GET: "/sessionContent",
ADD: "/sessionContent",
DELETE: "/sessionContent",
UPDATE: "/sessionContent",
};
const KEY = "sessionContent";
export const useGetAllSessionContent = (params?: any) =>
useGetQuery(KEY, API.GET, params);
export const useAddSessionContent = () => useAddMutation(KEY, API.ADD);
export const useUpdateSessionContent = (params?: any) =>
useUpdateMutation(KEY, API.GET);
export const useDeleteSessionContent = (params?: any) =>
useDeleteMutation(KEY, API.DELETE);

21
src/api/summary.ts
View File

@ -1,21 +0,0 @@
import useAddMutation from "./helper/useAddMutation";
import useDeleteMutation from "./helper/useDeleteMutation";
import useGetQuery from "./helper/useGetQuery";
import useUpdateMutation from "./helper/useUpdateMutation";
const API = {
GET: "/session/summary",
ADD: "/session/summary",
DELETE: "/session/summary",
UPDATE: "/session/summary",
};
const KEY = "summary";
export const useGetAllsummary = (params?: any, options?: any) =>
useGetQuery(KEY, API.GET, params, options);
export const useAddsummary = () => useAddMutation(KEY, API.ADD);
export const useUpdatesummary = (params?: any) =>
useUpdateMutation(KEY, API.GET);
export const useDeletesummary = (params?: any) =>
useDeleteMutation(KEY, API.DELETE);

17
src/api/tes2.ts
View File

@ -1,17 +0,0 @@
import useAddMutation from "./helper/useAddMutation";
import useDeleteMutation from "./helper/useDeleteMutation";
import useGetQuery from "./helper/useGetQuery";
import useUpdateMutation from "./helper/useUpdateMutation";
const API = {
GET: "/tes2",
ADD: "/tes2/create",
UPDATE: "/tes2/update",
DELETE: "/tes2/delete",
};
const KEY = "TES2";
export const useGetTes2 = (params?: any) => useGetQuery(KEY, API.GET, params);
export const useAddTes2 = () => useAddMutation(KEY, API.ADD);
export const useUpdateTes2 = () => useUpdateMutation(KEY, API.UPDATE);
export const useDeleteTes2 = () => useDeleteMutation(KEY, API.DELETE);

47
src/faker/CreateExam.ts
View File

@ -1,47 +0,0 @@
import React, { useEffect } from "react";
import { useAddStudent } from "../api/student";
import { useAddTeacher } from "../api/teacher";
import { useAddExam } from "../api/exam";
// Function to create a student object
const createExam = () => {
const randomNum = Math.floor(Math.random() * 1000); // Generate a random number
const fakeDate = "1970-01-01"; // Placeholder date
const fakeDuration = "00:00"; // Placeholder duration
const formattedDate = fakeDate;
const formattedDuration = fakeDuration;
return {
registration_record_id: "",
title: randomNum,
exam_type_id: "1",
subject_id: "1",
max_grade: randomNum,
grade_to_pass: "2",
name: `name${randomNum}`,
contact_information: `contact_information${randomNum}`,
address: `address${randomNum}`,
date: formattedDate,
duration: formattedDuration,
edu_class_id: 1,
term_id: 2,
};
};
const CreateExam = ({ number_of_user }: { number_of_user: number }) => {
const { mutate } = useAddExam();
useEffect(() => {
for (let index = 0; index < number_of_user; index++) {
const newStudent = createExam();
// Call mutate to add the student
mutate(newStudent);
}
}, [number_of_user, mutate]);
return null; // or return some JSX if needed
};
export default CreateExam;

31
src/faker/CreateTeacher.ts
View File

@ -1,31 +0,0 @@
import React, { useEffect } from "react";
import { useAddStudent } from "../api/student";
import { useAddTeacher } from "../api/teacher";
// Function to create a student object
const createTeacher = () => {
const randomNum = Math.floor(Math.random() * 10000); // Generate a random number
return {
name: `name${randomNum}`,
contact_information: `contact_information${randomNum}`,
address: `address${randomNum}`,
};
};
const CreateTeacher = ({ number_of_user }: { number_of_user: number }) => {
const { mutate } = useAddTeacher();
useEffect(() => {
for (let index = 0; index < number_of_user; index++) {
const newStudent = createTeacher();
// Call mutate to add the student
mutate(newStudent);
}
}, [number_of_user, mutate]);
return null; // or return some JSX if needed
};
export default CreateTeacher;

Some files were not shown because too many files have changed in this diff Show More