Money page

client/src/assets/styles/components/MoneyInfoSection.scss

@@ -0,0 +1,19 @@
+.all-info {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    .table {
+        display: flex;
+        justify-content: center;
+        margin: 0px, 0px;
+        padding: 30px 0;
+    }
+}
+
+
+section {
+    padding-top: 0;
+    padding-bottom: 0;
+}

client/src/assets/styles/components/MoneyPage.scss

@@ -0,0 +1,15 @@
+.money-page {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    direction: rtl;
+    gap: 30px;
+
+    .add-item {
+        width: 95%;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        gap: 20px;
+    }
+}

client/src/components/common/InfoSection.jsx

@@ -6,7 +6,7 @@ import { useGetAbsenceRateQuery } from "../../redux/slices/statsApiSlice";
 import { useGetAllScoutsCountQuery } from "../../redux/slices/scoutApiSlice";
 import { useGetBudgetQuery } from "../../redux/slices/financeApiSlice";
 
-export default function InfoSection() {
+export default function   () {
   const { userInfo } = useSelector((state) => state.auth);
   const { type } = userInfo;
 

client/src/components/moneypage/InfoSectionMoneyPage.jsx

@@ -0,0 +1,107 @@
+import React from "react";
+import {
+  useGetBudgetQuery,
+  useGetCurrentWeekSubscriptionsQuery,
+  useGetExpenseQuery,
+  useGetIncomeQuery,
+} from "../../redux/slices/financeApiSlice";
+import StatisticTable from "../common/StatisticTable";
+import InfoBox from "../common/InfoBox";
+import "../../assets/styles/components/MoneyInfoSection.scss";
+const InfoSectionMoneyPage = () => {
+  const ItemsColNames = [
+    { name: "#" },
+    { name: "الوصف" },
+    { name: "القيمة" },
+    { name: "النوع" },
+  ];
+
+  const { data: budget, isFetching: isFetchingBudget } = useGetBudgetQuery();
+  const { data: income, isFetching: isFetchingIncome } = useGetIncomeQuery();
+  const { data: expense, isFetching: isFetchingExpense } = useGetExpenseQuery();
+  const { data: currentWeekSub, isFetching: isFetchingCurrentWeekSub } =
+    useGetCurrentWeekSubscriptionsQuery();
+  if (budget && !isFetchingBudget) console.log("budget = ", budget);
+  let AllItems = [{}];
+
+  let TotalIncome = 0;
+  if (income && !isFetchingIncome) {
+    console.log("income = ", income);
+    income.body.map((item) => {
+      TotalIncome += item.value;
+      AllItems = [
+        ...AllItems,
+        {
+          date: item.timestamp.split("T")[0],
+          description: item.description ? item.description : "اشتراك",
+          value: item.value,
+          type: "دخل",
+        },
+      ];
+    });
+    console.log(AllItems);
+  }
+
+  let TotalExpense = 0;
+  if (expense && !isFetchingExpense) {
+    console.log("expense = ", expense);
+    expense.body.map((item) => {
+      TotalExpense += item.value;
+      AllItems = [
+        ...AllItems,
+
+        {
+          date: item.timestamp.split("T")[0],
+          description: item.description,
+          value: item.value,
+          type: "خصم",
+        },
+      ];
+    });
+
+    console.log(AllItems);
+  }
+
+  if (!isFetchingCurrentWeekSub) console.log("sub = ", currentWeekSub);
+
+  return (
+    <div className="all-info">
+      <section className="info-section">
+        <InfoBox
+          title="محتوى الخزنة"
+          value={isFetchingBudget ? "جاري التحميل" : budget?.body + " جنيه"}
+          color="purple"
+        />
+        <InfoBox
+          title="اشتراك الاسبوع الحالي"
+          value={
+            isFetchingCurrentWeekSub
+              ? "جاري التحميل"
+              : currentWeekSub?.body + " جنيه"
+          }
+          color="dark"
+        />
+        <InfoBox
+          title="إجمالي الدخل"
+          value={isFetchingIncome ? "جاري التحميل" : TotalIncome + " جنيه"}
+          color="dark"
+        />
+        <InfoBox
+          title="إجمالي الخصوم"
+          value={isFetchingExpense ? "جاري التحميل" : TotalExpense + " جنيه"}
+          color="dark"
+        />
+      </section>
+
+      <section className="table">
+        <StatisticTable
+          title="البنود"
+          columnNames={ItemsColNames}
+          dataRows={AllItems}
+        />
+      </section>
+    </div>
+  );
+};
+
+export default InfoSectionMoneyPage;

client/src/components/moneypage/MoneyPage.jsx

@@ -0,0 +1,84 @@
+import React, { useState } from "react";
+import TextInput, { RadioInput } from "../common/Inputs";
+import PageTitle from "../common/PageTitle";
+import Button from "../common/Button";
+import InfoSectionMoneyPage from "./InfoSectionMoneyPage";
+import { useInsertOtherItemMutation } from "../../redux/slices/financeApiSlice";
+import { toast } from "react-toastify";
+import "../../assets/styles/components/MoneyPage.scss";
+
+const MoneyPage = () => {
+  const [item, setItem] = useState("");
+  const [description, setDiscription] = useState("");
+  const [itemType, setItemType] = useState("");
+
+  const [insertOtherItem, { isLoading: isLoadingInsertingItem }] =
+    useInsertOtherItemMutation();
+
+  const HandleSubmit = async (e) => {
+    e.preventDefault();
+    const newItem = {
+      value: item,
+      type: itemType === "خصم" ? "expense" : itemType === "دخل" ? "income" : "",
+      description: description,
+    };
+
+    try {
+      const res = await insertOtherItem(newItem).unwrap();
+      if (res.status === 400 || res.status === 500)
+        throw new Error("Something went wrong while inserting the item");
+      toast.success("تم إضافة بند بنجاح");
+    } catch (err) {
+      console.log();
+      toast.error("حدث خطأ أثناء إضافة بند");
+      toast.error(JSON.stringify(err));
+    }
+  };
+
+  return (
+    <div className="money-page">
+      <PageTitle title="إدارة الماليات" />
+      <form className="add-item" onSubmit={HandleSubmit}>
+        <h4>أضافة بند</h4>
+        <TextInput
+          type="text"
+          label="القيمة"
+          name="item"
+          placeholder="أضف قيمة"
+          value={item}
+          onChange={(e) => setItem(e.target.value)}
+          required={true}
+        />
+
+        <RadioInput
+          label="النوع"
+          name="itemType"
+          valuesArr={["دخل", "خصم"]}
+          onChange={(e) => setItemType(e.target.value)}
+          required={true}
+        />
+
+        <TextInput
+          type="text"
+          label="الوصف"
+          name="description"
+          placeholder="أضف وصف"
+          value={description}
+          onChange={(e) => setDiscription(e.target.value)}
+          required={false}
+        />
+
+        <Button className="insert-sector__btn Button--medium Button--primary-darker">
+          إضافة
+        </Button>
+      </form>
+
+      <section>
+        <h4 className="section__heading">الماليات</h4>
+        <InfoSectionMoneyPage />
+      </section>
+    </div>
+  );
+};
+
+export default MoneyPage;

client/src/redux/slices/financeApiSlice.js

@@ -11,7 +11,42 @@ export const financeApi = apiSlice.injectEndpoints({
       }),
       providesTags: ["finance"],
     }),
+    GetIncome: builder.query({
+      query: () => ({
+        url: `${FINANCE_URL}/income`,
+        method: "GET",
+      }),
+      providesTags: ["finance"],
+    }),
+
+    GetExpense: builder.query({
+      query: () => ({
+        url: `${FINANCE_URL}/expense`,
+        method: "GET",
+      }),
+      providesTags: ["finance"],
+    }),
+    InsertOtherItem: builder.mutation({
+      query: (item) => ({
+        url: `${FINANCE_URL}/otherItem`,
+        method: "POST",
+        body: item,
+      }),
+      invalidatesTags: ["finance"],
+    }),
+    GetCurrentWeekSubscriptions: builder.query({
+      query: () => ({
+        url: `${FINANCE_URL}/subscription/all`,
+        method: "GET",
+      }),
+    }),
   }),
 });
 
-export const { useGetBudgetQuery } = financeApi;
+export const {
+  useGetBudgetQuery,
+  useGetIncomeQuery,
+  useGetExpenseQuery,
+  useInsertOtherItemMutation,
+  useGetCurrentWeekSubscriptionsQuery,
+} = financeApi;

client/src/redux/slices/scoutApiSlice.js

@@ -45,3 +45,4 @@ export const {
   useGetScoutsInSectorQuery,
   useUpdateScoutMutation,
 } = scoutsApi;
+

client/src/routes.jsx

@@ -25,7 +25,7 @@ import InsertSector from "./components/insert-sector/InsertSector";
 import AssignCaptainPage from "./components/assign-captain-page/AssignCaptainPage";
 import InsertScoutPage from "./components/insert-scout/InsertScoutPage";
 import UpdateScoutPage from "./components/update-scout/UpdateScoutPage";
-
+import MoneyPage from "./components/moneypage/MoneyPage";
 function Routes() {
   return (
     <Router>
@@ -42,6 +42,7 @@ function Routes() {
           <Route exact path="/assign-captain" element={<AssignCaptainPage />} />
           <Route exact path="/add-scout" element={<InsertScoutPage />} />
           <Route exact path="/update-scout" element={<UpdateScoutPage />} />
+          <Route exact path="/finance" element={<MoneyPage />} />
         </Route>
 
         {/* Testing Routes */}