+
+
+ {isLoading && (
+
+ جاري إنشاء الفترة
+
+ )}
+
+
+
+
+
+ );
+}
diff --git a/client/src/components/insert-term/InsertTermPage.scss b/client/src/components/insert-term/InsertTermPage.scss
new file mode 100644
index 00000000..484b6b5a
--- /dev/null
+++ b/client/src/components/insert-term/InsertTermPage.scss
@@ -0,0 +1,28 @@
+.insert-term {
+ &__form {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ gap: 1rem;
+ margin-block: 1rem;
+ direction: rtl;
+
+ .input:nth-child(1),
+ .insert-term__note,
+ .insert-term__btn {
+ grid-column: 1 / 3;
+ }
+
+ .insert-term__note {
+ direction: rtl;
+ font-size: 13px;
+ color: var(--grey-400);
+ }
+ }
+
+ .actions-row {
+ direction: rtl;
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ gap: 1rem;
+ }
+}
diff --git a/client/src/components/update-term-page/UpdateTermPage.jsx b/client/src/components/update-term-page/UpdateTermPage.jsx
new file mode 100644
index 00000000..eba3d313
--- /dev/null
+++ b/client/src/components/update-term-page/UpdateTermPage.jsx
@@ -0,0 +1,128 @@
+import { useEffect, useState } from "react";
+import PageTitle from "../common/PageTitle";
+import TextInput from "../common/Inputs";
+import Button from "../common/Button";
+import CustomCheckbox from "../common/CustomCheckbox";
+import "../insert-term/InsertTermPage.scss";
+import {
+ useUpdateTermMutation,
+ useGetCurTermQuery,
+} from "../../redux/slices/termApiSlice";
+import { toast } from "react-toastify";
+
+export default function UpdateTermPage() {
+ const [termName, setTermName] = useState("");
+ const [termStartDate, setTermStartDate] = useState("");
+ const [termEndDate, setTermEndDate] = useState("");
+ const [understandCheckbox, setUnderstandCheckbox] = useState(false);
+
+ const [updateTerm, { isLoading }] = useUpdateTermMutation();
+
+ const { data, isFetching: isFetchingTerm } = useGetCurTermQuery();
+
+ useEffect(() => {
+ if (data && data.body) {
+ setTermName(data.body.termName);
+ let date = new Date(data.body.startDate).toISOString().split("T")[0];
+ setTermStartDate(date);
+ date = new Date(data.body.endDate).toISOString().split("T")[0];
+ setTermEndDate(date);
+ }
+ }, [data]);
+
+ const handleSubmit = async (e) => {
+ e.preventDefault();
+ // TODO: send request with this info to the server
+ console.log({
+ termName,
+ startDate: termStartDate,
+ endDate: termEndDate,
+ understandCheckbox,
+ });
+ try {
+ const res = updateTerm({
+ termName,
+ startDate: termStartDate,
+ endDate: termEndDate,
+ }).unwrap();
+ if (res.status === 400 || res.status === 500)
+ throw new Error("Something went wrong while updating the term");
+ toast.success("تم تعديل الفترة بنجاح");
+ } catch (err) {
+ console.log(err);
+ toast.error("حدث خطأ أثناء تعديل الفترة");
+ toast.error(JSON.stringify(err));
+ }
+ };
+
+ return (
+