+
+ ) : (
+
+
+ )}
+
+
+
+ );
+};
+
+export default AreaChart;
diff --git a/src/Components/Chart/ColumnChart.tsx b/src/Components/Chart/ColumnChart.tsx
new file mode 100644
index 0000000..805f50a
--- /dev/null
+++ b/src/Components/Chart/ColumnChart.tsx
@@ -0,0 +1,95 @@
+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 (
+
+
+
+
+
+ );
+};
+
+export default ColumnChart;
diff --git a/src/Components/Chart/LineChart.tsx b/src/Components/Chart/LineChart.tsx
new file mode 100644
index 0000000..24d2c1a
--- /dev/null
+++ b/src/Components/Chart/LineChart.tsx
@@ -0,0 +1,61 @@
+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 (
+
+ الغياب المتكرر
+
+
+
+ غياب
+ حضور
+
+
+ }
+ options={[
+ { value: "هذا الأسبوع", label: "هذا الأسبوع" },
+ { value: "هذا الأسبوع", label: "هذا الأسبوع" },
+ { value: "هذا الأسبوع", label: "هذا الأسبوع" },
+ ]}
+ />
+
+
+
+
+
+ );
+};
+
+export default LineChart;
diff --git a/src/Components/Chart/PieChart.tsx b/src/Components/Chart/PieChart.tsx
new file mode 100644
index 0000000..e87356d
--- /dev/null
+++ b/src/Components/Chart/PieChart.tsx
@@ -0,0 +1,38 @@
+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 (
+
+
+
+
+
+ );
+};
+
+export default PieChart;
diff --git a/src/Components/Classes/ClassesSegmented.tsx b/src/Components/Classes/ClassesSegmented.tsx
new file mode 100644
index 0000000..356d4d5
--- /dev/null
+++ b/src/Components/Classes/ClassesSegmented.tsx
@@ -0,0 +1,14 @@
+import React from "react";
+import { Segmented } from "antd";
+
+const ClassesSegmented: React.FC = () => (
+
+
+ );
+
+ const store_course_ability = hasAbility(
+ ABILITIES_ENUM?.COURSE,
+ ABILITIES_VALUES_ENUM?.STORE,
+ );
+
+ return (
+ handel_open_model(ModalEnum?.COURSE_ADD)}>
+ {" "}
+ {t("practical.add")} {t("models.course")}
+
+
+ )}
+
+ );
+};
+
+export default HeaderCardsSection;
diff --git a/src/Components/CustomFields/File.tsx b/src/Components/CustomFields/File.tsx
new file mode 100644
index 0000000..9d596f9
--- /dev/null
+++ b/src/Components/CustomFields/File.tsx
@@ -0,0 +1,71 @@
+import React, { useEffect, useState } from "react";
+import { LoadingOutlined, PlusOutlined } from "@ant-design/icons";
+import { message, Upload } from "antd";
+import type { GetProp, UploadProps } from "antd";
+import { FaImage } from "react-icons/fa";
+import { TbCameraPlus } from "react-icons/tb";
+import { MdOutlineEdit } from "react-icons/md";
+import { useFormikContext } from "formik";
+
+type FileType = Parameters
+ {Courses?.length > 0 &&
+ Courses?.map((item: CourseItem, index: number) => {
+ return (
+
+ {Courses?.length > 4 &&
+ (showAll ? (
+
+ handelnavigate(item)}
+ key={item?.id}
+ className={`CountCard ${!showAll && index >= 6 ? "hidden" : ""}`}
+ >
+
+
+ );
+ })}
+ {item?.name}
++ {item?.student_count} {t("models.student")}{" "} +
+
+
+ );
+
+ return (
+
+
+
+
+ {imageUrl ? (
+ 
+ ) : (
+ uploadButton
+ )}
+ {imageUrl && uploadIcon}
+
+
+ );
+};
+
+export default CustomFile;
diff --git a/src/Components/CustomFields/PdfUploader.tsx b/src/Components/CustomFields/PdfUploader.tsx
new file mode 100644
index 0000000..740223c
--- /dev/null
+++ b/src/Components/CustomFields/PdfUploader.tsx
@@ -0,0 +1,65 @@
+import { Button, Image, Upload, UploadFile } from "antd";
+import useFormField from "../../Hooks/useFormField";
+import { UploadOutlined } from "@ant-design/icons";
+import { ImageBaseURL } from "../../api/config";
+import { useTranslation } from "react-i18next";
+import { FaRegFilePdf } from "react-icons/fa";
+import { useState } from "react";
+
+const PdfUploader = ({
+ name,
+ label,
+ onChange,
+ isDisabled,
+ placholder,
+ className,
+ props,
+}: any) => {
+ const { formik, t, isError } = useFormField(name, props);
+ let FormikName = formik.values[name];
+ const imageUrl = formik.values[name] ? ImageBaseURL + FormikName : "";
+ const [Imageurl, setImageurl] = useState(null);
+
+ const FilehandleChange = (value: any) => {
+ // console.log(value.file.originFileObj, "value.file.originFileObj");
+
+ formik.setFieldValue(name, value.file.originFileObj);
+ setImageurl(value.file.originFileObj);
+ };
+ const customRequest = async ({ onSuccess }: any) => {
+ onSuccess();
+ };
+ const UploadProps = {
+ name: "file",
+ customRequest: customRequest,
+ onChange: FilehandleChange,
+ headers: {
+ authorization: "authorization-text",
+ },
+ };
+ return (
+
+
+ {Imageurl === null ? (
+
+
+
+
+
+ );
+};
+
+export default PdfUploader;
diff --git a/src/Components/CustomFields/Select/CustomSelect.scss b/src/Components/CustomFields/Select/CustomSelect.scss
new file mode 100644
index 0000000..f979d63
--- /dev/null
+++ b/src/Components/CustomFields/Select/CustomSelect.scss
@@ -0,0 +1,119 @@
+.custom-select {
+ position: relative;
+ z-index: 9;
+ color: var(--primary);
+ max-height: 3vw;
+ input {
+ font-weight: normal;
+ color: var(--primary) !important;
+ &::placeholder {
+ color: var(--primary) !important;
+ }
+ }
+ .custom_select_icon {
+ transition: transform 0.3s ease;
+ }
+
+ .custom_select_icon.open {
+ transform: rotate(180deg);
+ }
+
+ .options-list {
+ max-height: 120px;
+ overflow: auto;
+ scroll-behavior: smooth;
+ scroll-padding: 10rem;
+ direction: ltr;
+ color: var(--primary);
+
+ &::-webkit-scrollbar {
+ width: 5px;
+ }
+
+ /* Handle */
+ &::-webkit-scrollbar-thumb {
+ background-color: #999999;
+ border-radius: 5px; /* Adjust border-radius as needed */
+ }
+
+ /* Track */
+ &::-webkit-scrollbar-track {
+ border-radius: 5px; /* Adjust border-radius as needed */
+ background-color: transparent; /* Set to desired background color */
+ }
+ }
+ .options {
+ position: absolute;
+ top: 100%;
+ left: 0;
+ width: 100%;
+ background: var(--bg2);
+ border: 0.2vw solid var(--primary);
+ border-top: none;
+ padding: 0.1vw 0.3vw;
+ direction: rtl;
+
+ border-bottom-right-radius: 15px !important;
+ border-bottom-left-radius: 15px !important;
+
+ z-index: 9;
+ }
+
+ .option {
+ padding: 0.6vw 1vw;
+ cursor: pointer;
+ text-align: center;
+ }
+
+ .option:hover {
+ background-color: #f0f0f0;
+ }
+}
+
+.select-header {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 0.4vw;
+ padding: 0.3vw 1vw;
+ cursor: pointer;
+ background: transparent;
+ color: var(--primary);
+ border: 0.2vw solid var(--primary);
+ font-weight: bold;
+ border-radius: 70px;
+ text-align: center;
+ width: 9vw;
+ height: 2.5vw;
+ transition: 0.5s ease-in-out;
+
+ svg {
+ font-size: 1.6vw;
+ color: var(--primary);
+ }
+ .search-input {
+ font-size: 0.8vw;
+ width: 70%;
+ height: 100%;
+ background-color: transparent !important;
+ outline: none;
+ border: none;
+ }
+}
+
+.custom-select.open .select-header {
+ border-bottom-right-radius: 0 !important;
+ border-bottom-left-radius: 0 !important;
+ border-top-right-radius: 30px !important;
+ border-top-left-radius: 30px !important;
+
+ transition: 0.5s ease-in-out;
+ // background-color: red !important;
+}
+
+.CustomDatePicker {
+ .ant-picker-outlined {
+ max-height: 2.5vw !important;
+ min-height: 2vw !important;
+ }
+}
diff --git a/src/Components/CustomFields/Select/CustomSelect.tsx b/src/Components/CustomFields/Select/CustomSelect.tsx
new file mode 100644
index 0000000..7331870
--- /dev/null
+++ b/src/Components/CustomFields/Select/CustomSelect.tsx
@@ -0,0 +1,98 @@
+import React, { useState, useRef, useEffect } from "react";
+import { IoMdArrowDropdown } from "react-icons/io";
+import { useLocation, useNavigate } from "react-router-dom";
+
+interface Option {
+ label: string;
+ value: string | number;
+}
+
+interface Props {
+ options: Option[];
+ placeholder: string;
+ onChange?: (option: Option) => void;
+ searchBy?: string;
+}
+
+const CustomSelect: React.FCملف الواجب
+