remove file
This commit is contained in:
karimalden
parent
f5e0bebeb0
commit
a4c3459efa
File diff suppressed because one or more lines are too long
|
|
@ -1,6 +1,7 @@
|
|||
{
|
||||
"name": "my-app",
|
||||
"version": "0.1.0",
|
||||
"type": "module",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@ant-design/icons": "^5.3.7",
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 22 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.1 KiB |
BIN
school-dashboard-exercise.zip
Normal file
BIN
school-dashboard-exercise.zip
Normal file
Binary file not shown.
|
|
@ -39,7 +39,7 @@ const App = () => {
|
|||
routes.map((route: TMenuItem) => {
|
||||
const useAbility = hasAbility(route.abilities, route.abilities_value);
|
||||
const tableHeader = t(`${route?.header}`);
|
||||
// useSetPage_title(tableHeader,route?.path);
|
||||
// useSetPageTitle(tableHeader,route?.path);
|
||||
|
||||
if (useAbility) {
|
||||
return (
|
||||
|
|
@ -80,7 +80,7 @@ const App = () => {
|
|||
{CrudRoute.map((route) => {
|
||||
const useAbility = hasAbility(route.abilities, route.abilities_value);
|
||||
const tableHeader = t(`${route?.header}`);
|
||||
// useSetPage_title(tableHeader,route?.path);
|
||||
// useSetPageTitle(tableHeader,route?.path);
|
||||
|
||||
if (!useAbility) {
|
||||
return false;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
|
|
@ -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"),
|
||||
});
|
||||
};
|
||||
|
|
@ -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>
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
|
|
@ -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("مطلوب"),
|
||||
});
|
||||
};
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
|
|
@ -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 };
|
||||
};
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
|
|
@ -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}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
|
@ -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 /> */
|
||||
}
|
||||
|
|
@ -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;
|
||||
|
|
@ -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,6 +1,5 @@
|
|||
import { useEffect } from 'react';
|
||||
import { setLocalStorageQuestions } from '../utils/setLocalStorageQuestions';
|
||||
import { setLocalStorageBaseQuestions } from '../utils/setLocalStorageBaseQuestions';
|
||||
|
||||
const useSaveOnDisconnect = (noChange: boolean, QUESTION_OBJECT_KEY: string, SavedQuestionData: any) => {
|
||||
useEffect(() => {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
import { useEffect } from "react";
|
||||
import { usePage_titleState } from "../zustand/PageTitleState";
|
||||
|
||||
const useSetPage_title = (title: any) => {
|
||||
const useSetPageTitle = (title: any) => {
|
||||
const setPage_title = usePage_titleState((state) => state.setPage_title);
|
||||
|
||||
useEffect(() => {
|
||||
|
|
@ -9,4 +9,4 @@ const useSetPage_title = (title: any) => {
|
|||
}, [title, setPage_title]);
|
||||
};
|
||||
|
||||
export default useSetPage_title;
|
||||
export default useSetPageTitle;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import { AppRoutes, CrudRoutes } from "../Routes";
|
||||
import { PROJECT_NAME } from "../config/AppKey";
|
||||
|
||||
export const usegetTitleFromRoute = (path: any) => {
|
||||
export const useGetTitleFromRoute = (path: any) => {
|
||||
if (AppRoutes[path]) {
|
||||
return `${PROJECT_NAME} | ${AppRoutes[path]}`;
|
||||
} else if (CrudRoutes[path]) {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import React, { useEffect } from "react";
|
||||
import { usegetTitleFromRoute } from "../../Hooks/usegetTitleFromRoute";
|
||||
import { useGetTitleFromRoute } from "../../Hooks/useGetTitleFromRoute";
|
||||
import { Helmet } from "react-helmet";
|
||||
import { useLocation } from "react-router-dom";
|
||||
import NavBar from "./NavBar";
|
||||
|
|
@ -18,7 +18,7 @@ const Layout = ({
|
|||
return (
|
||||
<>
|
||||
<Helmet>
|
||||
<title>{usegetTitleFromRoute(location.pathname)}</title>
|
||||
<title>{useGetTitleFromRoute(location.pathname)}</title>
|
||||
</Helmet>
|
||||
<div className="Layout">
|
||||
<main className={`${className} Layout_Body`}>
|
||||
|
|
|
|||
|
|
@ -2,14 +2,14 @@ import React from "react";
|
|||
import Image from "../../Components/Ui/Image";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { ABILITIES_ENUM } from "../../enums/abilities";
|
||||
import useSetPage_title from "../../Hooks/useSetPageTitle";
|
||||
import useSetPageTitle from "../../Hooks/useSetPageTitle";
|
||||
|
||||
const Dummy = () => {
|
||||
const [t] = useTranslation();
|
||||
useSetPage_title(`${t(ABILITIES_ENUM?.MAIN_PAGE)} / ${t("dashboard")}`);
|
||||
useSetPageTitle(`${t(ABILITIES_ENUM?.MAIN_PAGE)} / ${t("dashboard")}`);
|
||||
|
||||
return (
|
||||
<div className="DammyHomePage">
|
||||
<div className="DummyHomePage">
|
||||
<Image src="/App/SyriaLogo.webp" />
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
|
|
@ -3,12 +3,12 @@
|
|||
import useModalHandler from "../../utils/useModalHandler";
|
||||
import { ModalEnum } from "../../enums/Model";
|
||||
|
||||
// import useSetPage_title from "../../Hooks/useSetPageTitle";
|
||||
// import useSetPageTitle from "../../Hooks/useSetPageTitle";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { lazy, Suspense } from 'react';
|
||||
import { Spin } from "antd";
|
||||
import { canAddTags } from "../../utils/hasAbilityFn";
|
||||
import useSetPage_title from "../../Hooks/useSetPageTitle";
|
||||
import useSetPageTitle from "../../Hooks/useSetPageTitle";
|
||||
const Table = lazy(() => import('./Table'));
|
||||
const AddModalForm = lazy(() => import('./Model/AddModel'));
|
||||
const EditModalForm = lazy(() => import('./Model/EditModel'));
|
||||
|
|
@ -19,7 +19,7 @@ const SearchField = lazy(() => import('../../Components/DataTable/SearchField'))
|
|||
const TableHeader = () => {
|
||||
const { handel_open_model } = useModalHandler();
|
||||
const [t] = useTranslation();
|
||||
useSetPage_title(
|
||||
useSetPageTitle(
|
||||
t(`page_header.tags`),
|
||||
);
|
||||
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import { Spin } from "antd";
|
|||
import { useParams } from "react-router-dom";
|
||||
import { ParamsEnum } from "../../enums/params";
|
||||
import { useGetAllSubject } from "../../api/subject";
|
||||
import useSetPage_title from "../../Hooks/useSetPageTitle";
|
||||
import useSetPageTitle from "../../Hooks/useSetPageTitle";
|
||||
|
||||
const Table = lazy(() => import('./Table'));
|
||||
const AddModalForm = lazy(() => import('./Model/AddModel'));
|
||||
|
|
@ -23,7 +23,7 @@ const TableHeader = () => {
|
|||
|
||||
const SubjectName = Subject?.data?.name ?? "";
|
||||
|
||||
useSetPage_title(
|
||||
useSetPageTitle(
|
||||
t(`page_header.subject`) +
|
||||
"/" +
|
||||
t(`${SubjectName}`),
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import { useTranslation } from "react-i18next";
|
||||
import { lazy, Suspense } from 'react';
|
||||
import { Spin } from "antd";
|
||||
import useSetPage_title from "../../Hooks/useSetPageTitle";
|
||||
import useSetPageTitle from "../../Hooks/useSetPageTitle";
|
||||
import { useParams } from "react-router-dom";
|
||||
import { ParamsEnum } from "../../enums/params";
|
||||
import { useGetAllUnit } from "../../api/unit";
|
||||
|
|
@ -21,7 +21,7 @@ const TableHeader = () => {
|
|||
|
||||
console.log(unit?.data);
|
||||
|
||||
useSetPage_title(
|
||||
useSetPageTitle(
|
||||
t(`page_header.subject`) +
|
||||
"/" +
|
||||
`${SubjectName}` +
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ import { QUESTION_OBJECT_KEY } from "../../config/AppKey";
|
|||
import useSaveOnDisconnect from "../../Hooks/useSaveOnDisconnect";
|
||||
import { getLocalStorageQuestions } from "../../utils/setLocalStorageQuestions";
|
||||
import { toast } from "react-toastify";
|
||||
import useSetPage_title from "../../Hooks/useSetPageTitle";
|
||||
import useSetPageTitle from "../../Hooks/useSetPageTitle";
|
||||
import { useGetAllUnit } from "../../api/unit";
|
||||
import { useGetAllLesson } from "../../api/lesson";
|
||||
|
||||
|
|
@ -44,7 +44,7 @@ const AddPage: React.FC = () => {
|
|||
const SubjectName = unit?.data?.subject?.name ?? "";
|
||||
const lessonName = lesson?.data?.name ?? "";
|
||||
|
||||
useSetPage_title(
|
||||
useSetPageTitle(
|
||||
t(`page_header.subject`) +
|
||||
"/" +
|
||||
`${SubjectName}` +
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ import Form from './Model/Edit'
|
|||
import BaseForm from './Model/Malty/Edit'
|
||||
import { Question } from "../../types/Item";
|
||||
import { toast } from "react-toastify";
|
||||
import useSetPage_title from "../../Hooks/useSetPageTitle";
|
||||
import useSetPageTitle from "../../Hooks/useSetPageTitle";
|
||||
import { useGetAllUnit } from "../../api/unit";
|
||||
import { useGetAllLesson } from "../../api/lesson";
|
||||
|
||||
|
|
@ -51,7 +51,7 @@ const EditPage: React.FC = () => {
|
|||
const SubjectName = unit?.data?.subject?.name ?? "";
|
||||
const lessonName = lesson?.data?.name ?? "";
|
||||
|
||||
useSetPage_title(
|
||||
useSetPageTitle(
|
||||
t(`page_header.subject`) +
|
||||
"/" +
|
||||
`${SubjectName}` +
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ import DeleteModel from './Model/Delete'
|
|||
import { useParams } from "react-router-dom";
|
||||
import { ParamsEnum } from "../../enums/params";
|
||||
import { useGetAllUnit } from "../../api/unit";
|
||||
import useSetPage_title from "../../Hooks/useSetPageTitle";
|
||||
import useSetPageTitle from "../../Hooks/useSetPageTitle";
|
||||
import { useGetAllLesson } from "../../api/lesson";
|
||||
const Table = lazy(() => import('./Table'));
|
||||
|
||||
|
|
@ -20,7 +20,7 @@ const TableHeader = () => {
|
|||
const SubjectName = unit?.data?.subject?.name ?? "";
|
||||
const lessonName = lesson?.data?.name ?? "";
|
||||
|
||||
useSetPage_title(
|
||||
useSetPageTitle(
|
||||
t(`page_header.subject`) +
|
||||
"/" +
|
||||
`${SubjectName}` +
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ import TablePage from './TablePage';
|
|||
import AddSubjectModalForm from "../Model/AddModel";
|
||||
import EditSubjectModalForm from "../Model/EditModel";
|
||||
import DeleteSubjectModalForm from "../Model/Delete";
|
||||
import useSetPage_title from '../../../Hooks/useSetPageTitle';
|
||||
import useSetPageTitle from '../../../Hooks/useSetPageTitle';
|
||||
import { canAddSubject } from '../../../utils/hasAbilityFn';
|
||||
|
||||
|
||||
|
|
@ -18,7 +18,7 @@ const TableWithHeader = () => {
|
|||
const { handel_open_model } = useModalHandler();
|
||||
const [t] = useTranslation();
|
||||
|
||||
useSetPage_title(
|
||||
useSetPageTitle(
|
||||
t(`page_header.subject`),
|
||||
);
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import React, { useEffect } from "react";
|
||||
import ActiveTabs from "./ActiveTable";
|
||||
import { useButtonState } from "../../../zustand/ButtonState";
|
||||
// import useSetPage_title from "../../../Hooks/useSetPageTitle";
|
||||
// import useSetPageTitle from "../../../Hooks/useSetPageTitle";
|
||||
import { useTranslation } from "react-i18next";
|
||||
// import { ABILITIES_ENUM } from "../../../enums/abilities";
|
||||
|
||||
|
|
@ -11,7 +11,7 @@ const Page = () => {
|
|||
setActiveTab(0);
|
||||
}, []);
|
||||
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}`)}`,
|
||||
// );
|
||||
|
||||
|
|
|
|||
|
|
@ -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-family: "Poppins_Bold";
|
||||
src: url("../../font/Poppins-Bold.ttf") format("truetype"); /* Specify the path to the font file */
|
||||
|
|
|
|||
|
|
@ -213,7 +213,7 @@
|
|||
background: var(--bg);
|
||||
}
|
||||
|
||||
.DammyHomePage {
|
||||
.DummyHomePage {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
display: none !important;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
|
|
@ -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);
|
||||
|
|
@ -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);
|
||||
|
|
@ -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);
|
||||
|
|
@ -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);
|
||||
|
|
@ -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);
|
||||
|
|
@ -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);
|
||||
|
|
@ -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);
|
||||
|
|
@ -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);
|
||||
|
|
@ -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);
|
||||
|
|
@ -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);
|
||||
|
|
@ -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);
|
||||
|
|
@ -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);
|
||||
|
|
@ -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);
|
||||
|
|
@ -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);
|
||||
|
|
@ -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);
|
||||
|
|
@ -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);
|
||||
|
|
@ -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);
|
||||
|
|
@ -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);
|
||||
|
|
@ -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);
|
||||
|
|
@ -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;
|
||||
|
|
@ -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
Loading…
Reference in New Issue
Block a user