done profile dropdown

2026-02-26 11:12:41 +08:00
parent c98177c4ee
commit b1a79b90a1
8 changed files with 151 additions and 27 deletions
--- a/frontend/src/app/components/header/components/HeaderDetails.jsx
+++ b/frontend/src/app/components/header/components/HeaderDetails.jsx
@@ -221,9 +221,56 @@ const HeaderDetails = () => {
        {openProfileDropdown && (
          <div className={profileStyles.dropdownContainer}>
            {/* Settings */}
-            <div className={profileStyles.settingsBtn}></div>
+            <div className={profileStyles.settingsBtn}>
+              {/* Icon */}
+              <div className={profileStyles.btn}>
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width={20}
+                  height={20}
+                  viewBox="0 0 20 20"
+                  fill="none"
+                >
+                  <path
+                    d="M8.60417 3.5975C8.95917 2.13417 11.0408 2.13417 11.3958 3.5975C11.4491 3.81733 11.5535 4.02148 11.7006 4.19333C11.8477 4.36518 12.0332 4.49988 12.2422 4.58645C12.4512 4.67303 12.6776 4.70904 12.9032 4.69156C13.1287 4.67407 13.3469 4.60359 13.54 4.48583C14.8258 3.7025 16.2983 5.17417 15.515 6.46083C15.3974 6.65388 15.327 6.87195 15.3096 7.09731C15.2922 7.32267 15.3281 7.54897 15.4146 7.75782C15.5011 7.96666 15.6356 8.15215 15.8073 8.29921C15.9789 8.44627 16.1829 8.55075 16.4025 8.60417C17.8658 8.95917 17.8658 11.0408 16.4025 11.3958C16.1827 11.4491 15.9785 11.5535 15.8067 11.7006C15.6348 11.8477 15.5001 12.0332 15.4135 12.2422C15.327 12.4512 15.291 12.6776 15.3084 12.9032C15.3259 13.1287 15.3964 13.3469 15.5142 13.54C16.2975 14.8258 14.8258 16.2983 13.5392 15.515C13.3461 15.3974 13.1281 15.327 12.9027 15.3096C12.6773 15.2922 12.451 15.3281 12.2422 15.4146C12.0333 15.5011 11.8479 15.6356 11.7008 15.8073C11.5537 15.9789 11.4492 16.1829 11.3958 16.4025C11.0408 17.8658 8.95917 17.8658 8.60417 16.4025C8.5509 16.1827 8.44648 15.9785 8.29941 15.8067C8.15233 15.6348 7.96676 15.5001 7.75779 15.4135C7.54882 15.327 7.32236 15.291 7.09685 15.3084C6.87133 15.3259 6.65313 15.3964 6.46 15.5142C5.17417 16.2975 3.70167 14.8258 4.485 13.5392C4.60258 13.3461 4.67296 13.1281 4.6904 12.9027C4.70785 12.6773 4.67187 12.451 4.58539 12.2422C4.49892 12.0333 4.36438 11.8479 4.19273 11.7008C4.02107 11.5537 3.81714 11.4492 3.5975 11.3958C2.13417 11.0408 2.13417 8.95917 3.5975 8.60417C3.81733 8.5509 4.02148 8.44648 4.19333 8.29941C4.36518 8.15233 4.49988 7.96676 4.58645 7.75779C4.67303 7.54882 4.70904 7.32236 4.69156 7.09685C4.67407 6.87133 4.60359 6.65313 4.48583 6.46C3.7025 5.17417 5.17417 3.70167 6.46083 4.485C7.29417 4.99167 8.37417 4.54333 8.60417 3.5975Z"
+                    stroke="currentColor"
+                    strokeWidth="1.5"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                  />
+                  <path
+                    d="M7.5 10C7.5 10.663 7.76339 11.2989 8.23223 11.7678C8.70107 12.2366 9.33696 12.5 10 12.5C10.663 12.5 11.2989 12.2366 11.7678 11.7678C12.2366 11.2989 12.5 10.663 12.5 10C12.5 9.33696 12.2366 8.70107 11.7678 8.23223C11.2989 7.76339 10.663 7.5 10 7.5C9.33696 7.5 8.70107 7.76339 8.23223 8.23223C7.76339 8.70107 7.5 9.33696 7.5 10Z"
+                    stroke="currentColor"
+                    strokeWidth="1.5"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                  />
+                </svg>
+              </div>
+              <p>Settings</p>
+            </div>
            {/* Logout */}
-            <div className={profileStyles}></div>
+            <div className={profileStyles.logoutBtn}>
+              {/* Icon */}
+              <div className={profileStyles.btn}>
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width={20}
+                  height={20}
+                  viewBox="0 0 20 20"
+                  fill="none"
+                >
+                  <path
+                    d="M11.5625 6.875V5.3125C11.5625 4.8981 11.3979 4.50067 11.1049 4.20765C10.8118 3.91462 10.4144 3.75 10 3.75H4.53125C4.11685 3.75 3.71942 3.91462 3.4264 4.20765C3.13337 4.50067 2.96875 4.8981 2.96875 5.3125V14.6875C2.96875 15.1019 3.13337 15.4993 3.4264 15.7924C3.71942 16.0854 4.11685 16.25 4.53125 16.25H10C10.4144 16.25 10.8118 16.0854 11.1049 15.7924C11.3979 15.4993 11.5625 15.1019 11.5625 14.6875V13.125M7.65625 10H17.0312M17.0312 10L14.6875 7.65625M17.0312 10L14.6875 12.3437"
+                    stroke="currentColor"
+                    strokeWidth="1.5"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                  />
+                </svg>
+              </div>
+              <p>Logout</p>
+            </div>
          </div>
        )}
      </div>
--- a/frontend/src/app/components/header/components/Organization.module.css
+++ b/frontend/src/app/components/header/components/Organization.module.css
@@ -88,6 +88,7 @@
  box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.25);
  box-shadow: 0 2px 15px 0 color(display-p3 0 0 0 / 0.25);
  position: absolute;
+  z-index: 1;
  top: 100%;
  margin-top: 8px;
  left: 0;
@@ -198,8 +199,10 @@
 .orgList:hover {
  border-radius: 4px;
  background: #3c4159;
+  color: #acb0ff;
  background: color(display-p3 0.2398 0.2548 0.3399);
 }
+
 .orgList {
  display: flex;
  padding: 6px;
@@ -208,6 +211,9 @@
  align-self: stretch;
  border-radius: 4px;
 }
+.orgList:hover .iconTxt p {
+  color: #acb0ff;
+}
 .iconTxt {
  display: flex;
  align-items: center;
--- a/frontend/src/app/components/header/components/Profile.module.css
+++ b/frontend/src/app/components/header/components/Profile.module.css
@@ -77,7 +77,8 @@
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
-  align-self: stretch;
+  width: 100%;
+  left: 0;
  border-radius: 6px;
  background: #2d3144;
  background: color(display-p3 0.1787 0.1913 0.2605);
@@ -86,22 +87,41 @@
  cursor: pointer;
  position: absolute;
  top: 100%;
-  margin-top: 2px;
+  margin-top: 3px;
 }

-.settingsBtn {
-  display: flex;
-  padding: 8px 12px;
-  align-items: center;
-  gap: 10px;
-  align-self: stretch;
-  border-radius: 4px;
-}
+.settingsBtn,
 .logoutBtn {
  display: flex;
  padding: 8px 12px;
  align-items: center;
  gap: 10px;
  align-self: stretch;
+  color: #acb0ff;
  border-radius: 4px;
 }
+.settingsBtn:hover,
+.logoutBtn:hover {
+  background: #3c4159;
+  background: color(display-p3 0.2392 0.2549 0.3412);
+
+  color: #d2d3e1;
+  color: color(display-p3 0.8235 0.8275 0.8784);
+}
+.btn {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 12px;
+}
+
+.settingsBtn,
+.logoutBtn > p {
+  color: #acb0ff;
+  color: color(display-p3 0.678 0.6895 1);
+  font-family: Inter;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+}
--- a/frontend/src/app/roles/styles.module.css
+++ b/frontend/src/app/roles/styles.module.css
@@ -1,5 +1,8 @@
 .tableContainer {
  width: 100%;
+  height: calc(100vh - 170px);
+  position: relative;
+  overflow: auto;
 }

 /* Table */
@@ -28,6 +31,12 @@
  line-height: normal;
 }

+.tableContainer th {
+  background-color: #1c1d2b;
+  top: 0;
+  position: sticky;
+}
+
 /* Targets individual body */
 .tableBody td {
  padding: 12px 24px;
--- a/frontend/src/app/users/[usersId]/page.jsx
+++ b/frontend/src/app/users/[usersId]/page.jsx
@@ -0,0 +1,17 @@
+import React from "react";
+import TopHeader from "@/app/components/topHeader/TopHeader";
+import globalStyle from "../../globalStyle.module.css";
+
+const page = () => {
+  return (
+    <div className={globalStyle.section}>
+      <div className={globalStyle.mainContainer}>
+        <div className={globalStyle.container}>
+          <TopHeader buttonText="Edit" topbarTitle="View" />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default page;
--- a/frontend/src/app/users/add/page.jsx
+++ b/frontend/src/app/users/add/page.jsx
@@ -0,0 +1,17 @@
+import React from "react";
+import TopHeader from "@/app/components/topHeader/TopHeader";
+import globalStyle from "../../globalStyle.module.css";
+
+const page = () => {
+  return (
+    <div className={globalStyle.section}>
+      <div className={globalStyle.mainContainer}>
+        <div className={globalStyle.container}>
+          <TopHeader buttonText="Add" topbarTitle="Add User" />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default page;
--- a/frontend/src/app/users/page.jsx
+++ b/frontend/src/app/users/page.jsx
@@ -1,31 +1,28 @@
+"use client";
 import React from "react";
 import TopHeader from "../components/topHeader/TopHeader";
 import globalStyle from "../globalStyle.module.css";
 import styles from "./styles.module.css";
+import { useRouter } from "next/navigation";

 const UsersPage = () => {
+  const router = useRouter();
+
  const sampleData = [
    {
+      id: 1,
      email: "nino.moonshot@gmail.com",
      fullName: "Nino Paul Cervantes",
      createdAt: "2024-10-21 08:01:31.474 +0000 UTC",
    },
    {
+      id: 2,
      email: "nino.moonshot@gmail.com",
      fullName: "Nino Paul Cervantes",
      createdAt: "2024-10-21 08:01:31.474 +0000 UTC",
    },
    {
-      email: "nino.moonshot@gmail.com",
-      fullName: "Nino Paul Cervantes",
-      createdAt: "2024-10-21 08:01:31.474 +0000 UTC",
-    },
-    {
-      email: "nino.moonshot@gmail.com",
-      fullName: "Nino Paul Cervantes",
-      createdAt: "2024-10-21 08:01:31.474 +0000 UTC",
-    },
-    {
+      id: 3,
      email: "nino.moonshot@gmail.com",
      fullName: "Nino Paul Cervantes",
      createdAt: "2024-10-21 08:01:31.474 +0000 UTC",
@@ -48,12 +45,15 @@ const UsersPage = () => {
                </tr>
              </thead>
              <tbody className={styles.tableBody}>
-                {sampleData.map((data, index) => {
+                {sampleData.map((user, index) => {
                  return (
-                    <tr key={index}>
-                      <td>{data.email}</td>
-                      <td>{data.fullName}</td>
-                      <td>{data.createdAt}</td>
+                    <tr
+                      key={user.id}
+                      onClick={() => router.push(`/users/${user.id}`)}
+                    >
+                      <td>{user.email}</td>
+                      <td>{user.fullName}</td>
+                      <td>{user.createdAt}</td>
                      <td>
                        <div className={styles.tableActions}>
                          <button className={styles.viewBtn}>
--- a/frontend/src/app/users/styles.module.css
+++ b/frontend/src/app/users/styles.module.css
@@ -1,5 +1,8 @@
 .tableContainer {
  width: 100%;
+  height: calc(100vh - 170px);
+  position: relative;
+  overflow: auto;
 }

 /* Table */
@@ -27,6 +30,11 @@
  font-weight: 500;
  line-height: normal;
 }
+.tableContainer th {
+  background-color: #1c1d2b;
+  top: 0;
+  position: sticky;
+}

 /* Targets individual body */
 .tableBody td {