From 8c5d3ef6c9b598be8a747fe6ff069e3cfb503ace Mon Sep 17 00:00:00 2001
From: sigmaBoei <benzzbarquilla@gmail.com>
Date: Wed, 25 Feb 2026 15:20:26 +0800
Subject: [PATCH] done roles layout

---
 frontend/src/app/roles/page.jsx          | 124 +++++++++++++++++++++++
 frontend/src/app/roles/styles.module.css |  91 +++++++++++++++++
 frontend/src/app/users/page.jsx          |   3 +-
 frontend/src/app/users/styles.module.css |   6 +-
 4 files changed, 222 insertions(+), 2 deletions(-)

diff --git a/frontend/src/app/roles/page.jsx b/frontend/src/app/roles/page.jsx
index e63f19b..8a1e626 100644
--- a/frontend/src/app/roles/page.jsx
+++ b/frontend/src/app/roles/page.jsx
@@ -1,12 +1,136 @@
 import React from "react";
 import TopHeader from "../components/topHeader/TopHeader";
 import globalStyle from "../globalStyle.module.css";
+import styles from "./styles.module.css";
+
 const RolesPage = () => {
+  const sampleData = [
+    {
+      name: "organizatio-owner",
+      orgId: "67160a5ae69144ff19aafb86",
+      permissions: "35 Permissions",
+    },
+    {
+      name: "organizatio-owner",
+      orgId: "67160a5ae69144ff19aafb86",
+      permissions: "35 Permissions",
+    },
+    {
+      name: "organizatio-owner",
+      orgId: "67160a5ae69144ff19aafb86",
+      permissions: "35 Permissions",
+    },
+    {
+      name: "organizatio-owner",
+      orgId: "67160a5ae69144ff19aafb86",
+      permissions: "35 Permissions",
+    },
+    {
+      name: "organizatio-owner",
+      orgId: "67160a5ae69144ff19aafb86",
+      permissions: "35 Permissions",
+    },
+  ];
   return (
     <div className={globalStyle.section}>
       <div className={globalStyle.mainContainer}>
         <div className={globalStyle.container}>
           <TopHeader buttonText="Add Role" topbarTitle="Roles" />
+          {/* Users Table */}
+          <div className={styles.tableContainer}>
+            <table className={styles.table}>
+              <thead className={styles.tableHeader}>
+                <tr>
+                  <th width="30%">Email</th>
+                  <th width="30%">Full Name</th>
+                  <th width="30%">Date Created</th>
+                  <th></th>
+                </tr>
+              </thead>
+              <tbody className={styles.tableBody}>
+                {sampleData.map((data, index) => {
+                  return (
+                    <tr key={index}>
+                      <td>{data.name}</td>
+                      <td>{data.orgId}</td>
+                      <td>{data.permissions}</td>
+                      <td>
+                        <div className={styles.tableActions}>
+                          <button className={styles.viewBtn}>
+                            <svg
+                              xmlns="http://www.w3.org/2000/svg"
+                              width="20"
+                              height="20"
+                              viewBox="0 0 20 20"
+                              fill="none"
+                            >
+                              <path
+                                d="M8.40234 9.99957C8.40234 10.4232 8.57062 10.8294 8.87016 11.129C9.1697 11.4285 9.57596 11.5968 9.99957 11.5968C10.4232 11.5968 10.8294 11.4285 11.129 11.129C11.4285 10.8294 11.5968 10.4232 11.5968 9.99957C11.5968 9.57596 11.4285 9.1697 11.129 8.87016C10.8294 8.57062 10.4232 8.40234 9.99957 8.40234C9.57596 8.40234 9.1697 8.57062 8.87016 8.87016C8.57062 9.1697 8.40234 9.57596 8.40234 9.99957Z"
+                                stroke="currentColor"
+                                strokeLinecap="round"
+                                strokeLinejoin="round"
+                              />
+                              <path
+                                d="M17.1875 9.99967C15.2708 13.1941 12.875 14.7913 10 14.7913C7.125 14.7913 4.72917 13.1941 2.8125 9.99967C4.72917 6.80523 7.125 5.20801 10 5.20801C12.875 5.20801 15.2708 6.80523 17.1875 9.99967Z"
+                                stroke="currentColor"
+                                strokeLinecap="round"
+                                strokeLinejoin="round"
+                              />
+                            </svg>
+                          </button>
+                          <button className={styles.deleteBtn}>
+                            <svg
+                              xmlns="http://www.w3.org/2000/svg"
+                              width="20"
+                              height="20"
+                              viewBox="0 0 20 20"
+                              fill="none"
+                            >
+                              <path
+                                d="M3.61133 6.00684H16.3891"
+                                stroke="currentColor"
+                                strokeWidth="1"
+                                strokeLinecap="round"
+                                strokeLinejoin="round"
+                              />
+                              <path
+                                d="M8.40234 9.20117V13.9928"
+                                stroke="currentColor"
+                                strokeWidth="1"
+                                strokeLinecap="round"
+                                strokeLinejoin="round"
+                              />
+                              <path
+                                d="M11.5977 9.20117V13.9928"
+                                stroke="currentColor"
+                                strokeWidth="1"
+                                strokeLinecap="round"
+                                strokeLinejoin="round"
+                              />
+                              <path
+                                d="M4.41016 6.00684L5.20877 15.5902C5.20877 16.0138 5.37705 16.42 5.67658 16.7196C5.97612 17.0191 6.38238 17.1874 6.80599 17.1874H13.1949C13.6185 17.1874 14.0247 17.0191 14.3243 16.7196C14.6238 16.42 14.7921 16.0138 14.7921 15.5902L15.5907 6.00684"
+                                stroke="currentColor"
+                                strokeWidth="1"
+                                strokeLinecap="round"
+                                strokeLinejoin="round"
+                              />
+                              <path
+                                d="M7.60352 6.00694V3.61111C7.60352 3.39931 7.68765 3.19618 7.83742 3.04641C7.98719 2.89664 8.19032 2.8125 8.40213 2.8125H11.5966C11.8084 2.8125 12.0115 2.89664 12.1613 3.04641C12.311 3.19618 12.3952 3.39931 12.3952 3.61111V6.00694"
+                                stroke="currentColor"
+                                strokeWidth="1"
+                                strokeLinecap="round"
+                                strokeLinejoin="round"
+                              />
+                            </svg>
+                          </button>
+                        </div>
+                      </td>
+                    </tr>
+                  );
+                })}
+              </tbody>
+            </table>
+          </div>
         </div>
       </div>
     </div>
diff --git a/frontend/src/app/roles/styles.module.css b/frontend/src/app/roles/styles.module.css
index e69de29..2a95b1b 100644
--- a/frontend/src/app/roles/styles.module.css
+++ b/frontend/src/app/roles/styles.module.css
@@ -0,0 +1,91 @@
+.tableContainer {
+  width: 100%;
+}
+
+/* Table */
+.table {
+  width: 100%;
+  border-collapse: collapse;
+}
+/* Targets whole header */
+.tableHeader {
+  background: #1c1d2b;
+  border-bottom: 1px solid #212235;
+}
+/* Targets individual header */
+.tableHeader th {
+  align-items: center;
+  gap: 24px;
+  padding: 12px 24px;
+  text-align: left;
+  color: #85869b;
+  color: color(display-p3 0.5216 0.5255 0.6);
+  font-family: Inter;
+  font-size: 13px;
+  font-style: normal;
+  flex: 1 0 0;
+  font-weight: 500;
+  line-height: normal;
+}
+
+/* Targets individual body */
+.tableBody td {
+  padding: 12px 24px;
+  color: #eeeffd;
+  color: color(display-p3 0.9333 0.9373 0.9882);
+  font-family: Inter;
+  font-size: 13px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+}
+
+.tableBody tr {
+  border-bottom: 1px solid rgba(129, 135, 255, 0);
+}
+.tableBody tr:hover {
+  border-bottom: 1px solid rgba(129, 135, 255, 0.25);
+  border-bottom: 1px solid color(display-p3 0.5098 0.5294 1 / 0.25);
+  background: rgba(129, 135, 255, 0.05);
+  background: color(display-p3 0.5098 0.5294 1 / 0.05);
+}
+
+.tableActions {
+  display: flex;
+  width: 100px;
+  justify-content: center;
+  align-items: center;
+  gap: 12px;
+  align-self: stretch;
+}
+.viewBtn,
+.deleteBtn {
+  display: flex;
+  padding: 6px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  aspect-ratio: 1/1;
+  border-radius: 100px;
+  color: #969af9;
+  border: none;
+  border: 1px solid transparent;
+  background: transparent;
+  outline: none;
+  cursor: pointer;
+}
+
+.viewBtn:hover,
+.deleteBtn:hover {
+  border-radius: 100px;
+  color: #fff;
+  color: color(display-p3 1 1 1);
+  border: 1px solid #959aff;
+  border: 1px solid color(display-p3 0.5892 0.6031 0.9766);
+  background: linear-gradient(180deg, #696b95 0%, #20202d 100%);
+  background: linear-gradient(
+    180deg,
+    color(display-p3 0.4118 0.4196 0.5725) 0%,
+    color(display-p3 0.1241 0.1265 0.1725) 100%
+  );
+}
diff --git a/frontend/src/app/users/page.jsx b/frontend/src/app/users/page.jsx
index 990a06a..d3f1c42 100644
--- a/frontend/src/app/users/page.jsx
+++ b/frontend/src/app/users/page.jsx
@@ -2,6 +2,7 @@ import React from "react";
 import TopHeader from "../components/topHeader/TopHeader";
 import globalStyle from "../globalStyle.module.css";
 import styles from "./styles.module.css";
+
 const UsersPage = () => {
   const sampleData = [
     {
@@ -35,7 +36,7 @@ const UsersPage = () => {
       <div className={globalStyle.mainContainer}>
         <div className={globalStyle.container}>
           <TopHeader buttonText="Add User" topbarTitle="Users" />
-          {/* Table */}
+          {/* Users Table */}
           <div className={styles.tableContainer}>
             <table className={styles.table}>
               <thead className={styles.tableHeader}>
diff --git a/frontend/src/app/users/styles.module.css b/frontend/src/app/users/styles.module.css
index bd000eb..2a95b1b 100644
--- a/frontend/src/app/users/styles.module.css
+++ b/frontend/src/app/users/styles.module.css
@@ -16,7 +16,7 @@
 .tableHeader th {
   align-items: center;
   gap: 24px;
-  padding: 13px 24px;
+  padding: 12px 24px;
   text-align: left;
   color: #85869b;
   color: color(display-p3 0.5216 0.5255 0.6);
@@ -39,6 +39,10 @@
   font-weight: 500;
   line-height: normal;
 }
+
+.tableBody tr {
+  border-bottom: 1px solid rgba(129, 135, 255, 0);
+}
 .tableBody tr:hover {
   border-bottom: 1px solid rgba(129, 135, 255, 0.25);
   border-bottom: 1px solid color(display-p3 0.5098 0.5294 1 / 0.25);