Merge pull request #28 from CMP26Projects/homepage-complete-isa

CMP26Projects · Dec 25, 2023 · 27545ec · 27545ec
2 parents 6ce843f + 71dc185
commit 27545ec
Show file tree

Hide file tree

Showing 15 changed files with 432 additions and 45 deletions.
diff --git a/client/src/assets/styles/components/Button.scss b/client/src/assets/styles/components/Button.scss
@@ -45,5 +45,10 @@
     color: var(--grey-900);
   }
 
+  &--danger {
+    background-color: var(--red-500);
+    color: var(--grey-900);
+  }
+
   // TODO: Add more button styles and maybe sizes
 }
diff --git a/client/src/assets/styles/components/InfoSection.scss b/client/src/assets/styles/components/InfoSection.scss
@@ -0,0 +1,30 @@
+.info-section {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: 1fr 1fr;
+  gap: 1rem;
+  direction: rtl;
+  margin-block: 2rem;
+
+  .span-2-cols {
+    grid-column: 1 / span 2;
+  }
+
+  > .info-box {
+    display: flex;
+    flex-direction: column;
+    direction: rtl;
+    align-items: flex-start;
+    justify-content: space-around;
+    padding: 1rem;
+
+    h6:first-child {
+      font-size: 13px;
+    }
+
+    // unset fixed width
+    &.narrow {
+      width: initial;
+    }
+  }
+}
diff --git a/client/src/assets/styles/components/infoBox.scss b/client/src/assets/styles/components/infoBox.scss
@@ -1,35 +1,44 @@
 .info-box {
-    height: 97px;
-    flex-shrink: 0;
-    border-radius: 12px;
-
-    display: flex;
-    flex-direction: column;
-    justify-content: space-around;
-    align-items: end;
-
-    padding-right: 2rem;    
-
-    &.narrow {
-        width: 40%;
-    }
-
-    &.wide {
-        width: 90%;
-    }   
-
-    &.dark {
-
-        background: var(--simnle-grid, linear-gradient(113deg, #1F2A37 6.36%, rgba(31, 42, 55, 0.00) 108.22%));
-    }
-
-    &.purple {
-        background: var(--pur-grid, linear-gradient(115deg, #B773E9 2.95%, #5B1092 95.69%));
-
-    }
-
-    &.colorfull {
-        background: linear-gradient(96deg, #650DA6 -11.62%, #650DA6 -11.61%, #DF1846 119.72%);
-        box-shadow: 4px 5px 103.7px 0px var(--Primary-800, #2B0547);
-    }
-}
+  height: 97px;
+  flex-shrink: 0;
+  border-radius: 12px;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  align-items: end;
+
+  padding-right: 2rem;
+
+  &.narrow {
+    width: 40%;
+  }
+
+  &.wide {
+    width: 90%;
+  }
+
+  &.dark {
+    background: var(
+      --simnle-grid,
+      linear-gradient(113deg, #1f2a37 6.36%, rgba(31, 42, 55, 0) 108.22%)
+    );
+  }
+
+  &.purple {
+    background: var(
+      --pur-grid,
+      linear-gradient(115deg, #b773e9 2.95%, #5b1092 95.69%)
+    );
+  }
+
+  &.colorful {
+    background: linear-gradient(
+      96deg,
+      #650da6 -11.62%,
+      #650da6 -11.61%,
+      #df1846 119.72%
+    );
+    box-shadow: 4px 5px 103.7px 0px var(--Primary-800, #2b0547);
+  }
+}
diff --git a/client/src/components/common/InfoBox.jsx b/client/src/components/common/InfoBox.jsx
@@ -1,11 +1,21 @@
+import PropTypes from "prop-types";
 import "../../assets/styles/components/infoBox.scss";
-const InfoBox = ({ title, value, width = "narrow", color = "dark" }) => {
+
+const InfoBox = ({ title, value, width = "narrow", color = "dark", spans }) => {
+  const spanClass = spans ? "span-2-cols" : "";
   return (
-    <div className={"info-box " + color + " " + width}>
-      <p6>{title}</p6>
-      <p6> {value}</p6>
+    <div className={"info-box " + color + " " + width + " " + spanClass}>
+      <h6>{title}</h6>
+      <h6> {value}</h6>
     </div>
   );
 };
 
+InfoBox.propTypes = {
+  title: PropTypes.string.isRequired,
+  value: PropTypes.any,
+  width: PropTypes.string,
+  color: PropTypes.string,
+};
+
 export default InfoBox;
diff --git a/client/src/components/common/InfoSection.jsx b/client/src/components/common/InfoSection.jsx
@@ -1,5 +1,169 @@
 import "../../assets/styles/components/InfoSection.scss";
+import { useSelector } from "react-redux";
+import InfoBox from "./InfoBox";
+import { useGetCaptainsQuery } from "../../redux/slices/captainsApiSlice";
+import { useGetAbsenceRateQuery } from "../../redux/slices/statsApiSlice";
+import { useGetAllScoutsCountQuery } from "../../redux/slices/scoutApiSlice";
+import { useGetBudgetQuery } from "../../redux/slices/financeApiSlice";
 
 export default function InfoSection() {
-  return <div>InfoSection</div>;
+  const { userInfo } = useSelector((state) => state.auth);
+  const { type } = userInfo;
+
+  const GeneralCaptainInfo = () => {
+    const { data: captains, isFetching } = useGetCaptainsQuery();
+    const captainCount = captains?.body.length;
+
+    const { data: absenceRate, isFetching: isFetchingAbsence } =
+      useGetAbsenceRateQuery();
+
+    const { data: scoutsCount, isFetching: isFetchingScoutsCount } =
+      useGetAllScoutsCountQuery();
+
+    const { data: budget, isFetching: isFetchingBudget } = useGetBudgetQuery();
+
+    return (
+      <>
+        <InfoBox
+          title="محتوى الخزنة"
+          value={
+            isFetchingBudget
+              ? "جاري التحميل"
+              : !budget
+              ? "لا يوجد بيانات"
+              : budget?.body + " جنيه"
+          }
+          color="purple"
+        />
+        <InfoBox
+          title="متوسط نسبة الغياب"
+          value={
+            isFetchingAbsence
+              ? "جاري التحميل"
+              : !absenceRate
+              ? "لا يوجد بيانات"
+              : absenceRate?.body?.absenceRate + "%"
+          }
+          color="dark"
+        />
+        <InfoBox
+          title="عدد الأفراد"
+          value={
+            isFetchingScoutsCount
+              ? "جاري التحميل"
+              : !scoutsCount
+              ? "لا يوجد بيانات"
+              : scoutsCount?.body
+          }
+          color="dark"
+        />
+        <InfoBox
+          title="عدد القادة"
+          value={
+            isFetching
+              ? "جاري التحميل"
+              : !captainCount
+              ? "لا يوجد بيانات"
+              : captainCount
+          }
+          color="dark"
+        />
+      </>
+    );
+  };
+
+  const RegularCaptainInfo = () => {
+    //TODO: ADD UNIT CAPTAIN DATA INSTEAD OF GLOBAL DATA
+    const { data: absenceRate, isFetching: isFetchingAbsence } =
+      useGetAbsenceRateQuery();
+
+    const { data: scoutsCount, isFetching: isFetchingScoutsCount } =
+      useGetAllScoutsCountQuery();
+
+    return (
+      <>
+        <InfoBox
+          title="متوسط نسبة الغياب"
+          value={
+            isFetchingAbsence
+              ? "جاري التحميل"
+              : !absenceRate
+              ? "لا يوجد بيانات"
+              : absenceRate?.body?.absenceRate + "%"
+          }
+          color="dark"
+        />
+        <InfoBox
+          title="عدد الأفراد"
+          value={
+            isFetchingScoutsCount
+              ? "جاري التحميل"
+              : !scoutsCount
+              ? "لا يوجد بيانات"
+              : scoutsCount?.body
+          }
+          color="dark"
+        />
+      </>
+    );
+  };
+
+  const UnitCaptainInfo = () => {
+    //TODO: ADD UNIT CAPTAIN DATA INSTEAD OF GLOBAL DATA
+    const { data: captains, isFetching } = useGetCaptainsQuery();
+    const captainCount = captains?.body.length;
+
+    const { data: absenceRate, isFetching: isFetchingAbsence } =
+      useGetAbsenceRateQuery();
+
+    const { data: scoutsCount, isFetching: isFetchingScoutsCount } =
+      useGetAllScoutsCountQuery();
+
+    return (
+      <>
+        <InfoBox
+          title="متوسط نسبة الغياب"
+          value={
+            isFetchingAbsence
+              ? "جاري التحميل"
+              : !absenceRate
+              ? "لا يوجد بيانات"
+              : absenceRate?.body?.absenceRate + "%"
+          }
+          color="dark"
+          className="span-2-cols"
+        />
+        <InfoBox
+          title="عدد القادة"
+          value={
+            isFetching
+              ? "جاري التحميل"
+              : !captainCount
+              ? "لا يوجد بيانات"
+              : captainCount
+          }
+          color="dark"
+        />
+        <InfoBox
+          title="عدد الأفراد"
+          value={
+            isFetchingScoutsCount
+              ? "جاري التحميل"
+              : !scoutsCount
+              ? "لا يوجد بيانات"
+              : scoutsCount?.body
+          }
+          color="dark"
+        />
+      </>
+    );
+  };
+
+  return (
+    <div className="info-section">
+      {type === "general" && <GeneralCaptainInfo />}
+      {type === "regular" && <RegularCaptainInfo />}
+      {type === "unit" && <UnitCaptainInfo />}
+    </div>
+  );
 }
diff --git a/client/src/components/common/NotificationBox.jsx b/client/src/components/common/NotificationBox.jsx
@@ -1,5 +1,9 @@
 import "../../assets/styles/components/NotificationBox.scss";
 
 export default function NotificationBox() {
-  return <div>NotificationBox</div>;
+  return (
+    <div style={{ textAlign: "center", marginBlock: "1rem" }}>
+      سيتم العمل على هذا القسم قريباً
+    </div>
+  );
 }