⚛️ Captain profile

client/src/components/captain-profile/CaptainProfile.jsx

@@ -0,0 +1,53 @@
+import { useSelector } from "react-redux";
+import Button from "../common/Button";
+import PageTitle from "../common/PageTitle";
+import "./CaptainProfile.scss";
+
+export default function CaptainProfile() {
+  const { userInfo } = useSelector((state) => state.auth);
+
+  return (
+    <div className="captain-profile">
+      <PageTitle title="الصفحة الشخصية" />
+      <div className="captain-profile__avatar">
+        <img src="./avatar.png" alt="captain avatar" />
+      </div>
+      <h4 className="captain-profile__name">
+        {userInfo.firstName} {userInfo.middleName} {userInfo.lastName}
+      </h4>
+      <h6 className="captain-profile__type">
+        {
+          {
+            general: "قائد / نائب قائد عام",
+            regular: "قائد",
+            unit: "قائد وحدة",
+          }[userInfo.type]
+        }
+      </h6>
+      <div className="captain-profile__info">
+        <h4>وسائل التواصل</h4>
+        <div className="captain-profile__info__item">
+          <h6> رقم التليفون</h6>
+          <p>{userInfo.phoneNumber}</p>
+        </div>
+        <div className="captain-profile__info__item">
+          <h6>البريد الالكتروني</h6>
+          <p>{userInfo.email}</p>
+        </div>
+        <div className="captain-profile__info__item">
+          <h6>القطاعات</h6>
+          <p>
+            {/* TODO: Handle What will be displayed to General and unit captains */}
+            {userInfo.rSectorBaseName
+              ? userInfo.rSectorBaseName + " " + userInfo.rSectorSuffixName
+              : "لا يوجد"}
+          </p>
+        </div>
+        {/* TODO: Add the route for The Button Later */}
+        <Button className="captain-profile__info__btn Button--medium Button--primary">
+          تعديل الصفحة الشخصية
+        </Button>
+      </div>
+    </div>
+  );
+}

client/src/components/captain-profile/CaptainProfile.scss

@@ -0,0 +1,50 @@
+.captain-profile {
+  &__avatar {
+    display: flex;
+    justify-content: center;
+    margin-block: 1rem;
+
+    img {
+      border-radius: 50%;
+    }
+  }
+
+  &__name,
+  &__type {
+    text-align: center;
+    margin-bottom: 1rem;
+  }
+
+  &__type {
+    color: var(--primary-100);
+  }
+
+  &__info {
+    width: 90vw;
+    margin-inline: auto;
+    padding: 20px;
+    background-color: var(--primary-900);
+    border-radius: 30px;
+
+    h4 {
+      text-align: center;
+      margin-bottom: 1rem;
+    }
+
+    &__item {
+      direction: rtl;
+      display: flex;
+      flex-direction: column;
+      gap: 0.5rem;
+      margin-bottom: 2rem;
+
+      h6 {
+        color: var(--primary-200);
+      }
+    }
+    &__btn {
+      margin-inline: auto;
+      display: block;
+    }
+  }
+}

client/src/components/common/nav.jsx

@@ -64,8 +64,7 @@ export default function Nav() {
             <Link onClick={handleLogout}>
               <ArrowLeftOnRectangleIcon className="Nav__icon" />
             </Link>
-            {/* TODO: add route later */}
-            <Link to="/">
+            <Link to="/profile">
               <UserCircleIcon className="Nav__icon" />
             </Link>
             {/* TODO: add route later */}

client/src/routes.jsx

@@ -18,6 +18,7 @@ import PublicLayout from "./components/layout/PublicLayout";
 import TestTypo from "./components/testing/testTypo";
 import TestLayout from "./components/testing/testLayout";
 import Dashboard from "./components/dashboard/Dashboard";
+import CaptainProfile from "./components/captain-profile/CaptainProfile";
 
 function Routes() {
   return (
@@ -28,6 +29,7 @@ function Routes() {
           <Route exact path="/signUp" element={<SignUp />} />
           <Route exact path="/logIn" element={<LogIn />} />
           <Route exact path="/dashboard" element={<Dashboard />} />
+          <Route exact path="/profile" element={<CaptainProfile />} />
         </Route>
 
         {/* Testing Routes */}