Merge pull request #21 from CMP26Projects/homepage-dashboards

⚛️ User Actions Component
CMP26Projects · Dec 24, 2023 · 28c8b9f · 28c8b9f
2 parents 0ebba09 + c66034e
commit 28c8b9f
Show file tree

Hide file tree

Showing 5 changed files with 257 additions and 8 deletions.
diff --git a/client/src/assets/styles/components/Button.scss b/client/src/assets/styles/components/Button.scss
@@ -20,15 +20,24 @@
     color: var(--grey-900);
   }
 
+  &--primary-darker {
+    background-color: var(--primary-200);
+    color: var(--grey-900);
+  }
+
+  &--regular {
+    background-color: var(--grey-800);
+    color: var(--grey-100);
+  }
+
   &--dark {
     background-color: var(--primary-900);
     color: var(--grey-50);
   }
 
   &--medium {
-    a {
-      font-size: 1rem;
-    }
+    font-size: 1rem;
+    padding-inline: 10px;
   }
 
   &--success {

diff --git a/client/src/assets/styles/components/UserActions.scss b/client/src/assets/styles/components/UserActions.scss
@@ -0,0 +1,12 @@
+.userActions {
+  &__container {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 10px;
+    direction: rtl;
+
+    .span-2-cols {
+      grid-column: 1 / span 2;
+    }
+  }
+}
diff --git a/client/src/components/common/UserActions.jsx b/client/src/components/common/UserActions.jsx
@@ -1,8 +1,234 @@
-
 import "../../assets/styles/components/UserActions.scss";
+import Button from "./Button";
+import { useSelector } from "react-redux";
+
+const ActionRoutes = {
+  "Assign Sector Leader": "/assign-sector-leader",
+  "Add Sector": "/add-sector",
+  "Add Scout": "/add-scout",
+  Statistics: "/statistics",
+  "Financial Management": "/financial-management",
+  "Send Notification": "/send-notification",
+  "Edit Scout": "/edit-scout",
+  "Reports and Councils": "/reports-and-councils",
+  Activities: "/activities",
+  Sessions: "/sessions",
+  "Start New Term": "/start-new-term",
+  Sectors: "/sectors",
+  "Record Captain Absence": "/record-captain-absence",
+  "Record Scouts Absence": "/record-scouts-absence",
+  Scores: "/scores",
+  Sector: "/sector",
+};
 
 export default function UserActions() {
+  const { userInfo } = useSelector((state) => state.auth);
+  const { type } = userInfo;
+
+  const GeneralCaptainActions = () => {
+    return (
+      <>
+        <Button
+          linkTo={ActionRoutes["Assign Sector Leader"]}
+          className="Button--medium Button--primary-darker"
+        >
+          تعيين قائد لقطاع
+        </Button>
+        <Button
+          linkTo={ActionRoutes["Add Sector"]}
+          className="Button--medium Button--regular"
+        >
+          إضافة قطاع
+        </Button>
+        <Button
+          linkTo={ActionRoutes["Add Scout"]}
+          className="Button--medium Button--regular"
+        >
+          إضافة كشاف
+        </Button>
+        <Button
+          linkTo={ActionRoutes.Statistics}
+          className="Button--medium Button--regular"
+        >
+          الاحصائيات
+        </Button>
+        <Button
+          linkTo={ActionRoutes["Financial Management"]}
+          className="Button--medium Button--regular"
+        >
+          إدارة الماليات
+        </Button>
+        <Button
+          linkTo={ActionRoutes["Send Notification"]}
+          className="Button--medium Button--regular"
+        >
+          إرسال إشعار
+        </Button>
+        <Button
+          linkTo={ActionRoutes["Sessions"]}
+          className="Button--medium Button--regular"
+        >
+          تعديل كشاف
+        </Button>
+        <Button
+          linkTo={ActionRoutes["Sessions"]}
+          className="Button--medium Button--regular"
+        >
+          التقارير والمجالس
+        </Button>
+        <Button
+          linkTo={ActionRoutes["Sessions"]}
+          className="Button--medium Button--regular"
+        >
+          الأنشطة
+        </Button>
+        <Button
+          linkTo={ActionRoutes["Sessions"]}
+          className="Button--medium Button--regular"
+        >
+          المواضيع
+        </Button>
+        <Button
+          linkTo={ActionRoutes["Sessions"]}
+          className="Button--medium span-2-cols Button--success"
+        >
+          بدء فترة جديدة
+        </Button>
+      </>
+    );
+  };
+
+  const UnitCaptainActions = () => {
+    return (
+      <>
+        <Button
+          linkTo={ActionRoutes["Assign Sector Leader"]}
+          className="Button--medium Button--primary-darker"
+        >
+          تعيين قائد لقطاع
+        </Button>
+        <Button
+          linkTo={ActionRoutes["Statistics"]}
+          className="Button--medium Button--regular"
+        >
+          الاحصائيات
+        </Button>
+        <Button
+          linkTo={ActionRoutes["Send Notification"]}
+          className="Button--medium Button--regular"
+        >
+          إرسال إشعار
+        </Button>
+        <Button
+          linkTo={ActionRoutes["Add Scout"]}
+          className="Button--medium Button--regular"
+        >
+          إضافة كشاف
+        </Button>
+        <Button
+          linkTo={ActionRoutes["Edit Scout"]}
+          className="Button--medium Button--regular"
+        >
+          تعديل كشاف
+        </Button>
+        <Button
+          linkTo={ActionRoutes["Reports and Councils"]}
+          className="Button--medium Button--regular"
+        >
+          التقارير والمجالس
+        </Button>
+        <Button
+          linkTo={ActionRoutes["Activities"]}
+          className="Button--medium Button--regular"
+        >
+          الأنشطة
+        </Button>
+        <Button
+          linkTo={ActionRoutes["Sessions"]}
+          className="Button--medium Button--regular"
+        >
+          المواضيع
+        </Button>
+        <Button
+          linkTo={ActionRoutes["Sectors"]}
+          className="Button--medium span-2-cols Button--regular"
+        >
+          القطاعات
+        </Button>
+        <Button
+          linkTo={ActionRoutes["Record Captain Absence"]}
+          className="Button--medium span-2-cols Button--success"
+        >
+          تسجيل غياب القادة
+        </Button>
+      </>
+    );
+  };
+
+  const RegularCaptainActions = () => {
+    return (
+      <>
+        <Button
+          linkTo={ActionRoutes["Statistics"]}
+          className="Button--medium span-2-cols Button--regular"
+        >
+          الاحصائيات
+        </Button>
+        <Button
+          linkTo={ActionRoutes["Edit Scout"]}
+          className="Button--medium Button--regular"
+        >
+          تعديل كشاف
+        </Button>
+        <Button
+          linkTo={ActionRoutes["Reports and Councils"]}
+          className="Button--medium Button--regular"
+        >
+          التقارير والمجالس
+        </Button>
+        <Button
+          linkTo={ActionRoutes["Activities"]}
+          className="Button--medium Button--regular"
+        >
+          الأنشطة
+        </Button>
+        <Button
+          linkTo={ActionRoutes["Sessions"]}
+          className="Button--medium Button--regular"
+        >
+          المواضيع
+        </Button>
+        <Button
+          linkTo={ActionRoutes["Scores"]}
+          className="Button--medium Button--regular"
+        >
+          تقييم أفراد
+        </Button>
+        <Button
+          linkTo={ActionRoutes["Sector"]}
+          className="Button--medium Button--regular"
+        >
+          القطاع
+        </Button>
+        <Button
+          linkTo={ActionRoutes["Record Scouts Absence"]}
+          className="Button--medium span-2-cols Button--success"
+        >
+          تسجيل غياب الأفراد
+        </Button>
+      </>
+    );
+  };
+
   return (
-    <div>UserActions</div>
-  )
+    <div className="userActions">
+      <div className="userActions__container ">
+        {{
+          general: <GeneralCaptainActions />,
+          unit: <UnitCaptainActions />,
+          regular: <RegularCaptainActions />,
+        }[type] || <p>لا يوجد أي إجراءات متاحة</p>}
+      </div>
+    </div>
+  );
 }
diff --git a/client/src/components/common/nav.jsx b/client/src/components/common/nav.jsx
@@ -39,7 +39,7 @@ export default function Nav() {
 
   const handleLogout = async () => {
     try {
-      const res = await logout().unwrap();
+      await logout().unwrap();
       toast.dark("تم تسجيل الخروج بنجاح");
       dispatch(clearCredentials());
       navigate("/");
@@ -75,6 +75,8 @@ export default function Nav() {
           </div>
         )}
       </div>
+      {isLoading && <p>جاري التحميل...</p>}
+      {error && <p>{error}</p>}
     </nav>
   );
 }

diff --git a/server/database/fillDatabase.sql b/server/database/fillDatabase.sql
@@ -19,5 +19,5 @@ VALUES
     "[email protected]",
     "$2a$10$82orQ3yruIoakCWUg/29KuXBwJlZiezJzxUW.8Ek.Jvc/MPLagDYS",
     "male",
-    "regular"
+    "general"
   ) RETURNING *;