From 14884f6b3a99113718d466d6e8c8716f6d77c2e1 Mon Sep 17 00:00:00 2001
From: benzbarquilla <benzzbarquilla@gmail.com>
Date: Wed, 18 Mar 2026 17:24:15 +0800
Subject: [PATCH 1/4] done user and role table, and add user

---
 frontend/src/app/components/icons/plus.jsx    |  32 ++++++
 .../app/components/mobileToggleTab/Toggle.jsx |  36 +++++++
 .../mobileToggleTab/styles.module.css         |  56 ++++++++++
 .../navbar/navleft/styles.module.css          |   2 +-
 .../navbar/navright/styles.module.css         |   7 +-
 .../components/permissions/Permissions.jsx    |  44 ++------
 .../components/permissions/styles.module.css  | 100 ++++++++----------
 frontend/src/app/roles/page.jsx               |  26 +++--
 frontend/src/app/roles/role-card/Card.jsx     |   7 +-
 frontend/src/app/roles/styles.module.css      |  32 +++---
 frontend/src/app/users/add/page.jsx           |  37 +++++--
 frontend/src/app/users/add/styles.module.css  |  50 ++++++++-
 frontend/src/app/users/styles.module.css      |   2 -
 .../src/app/users/user-card/styles.module.css |   1 -
 14 files changed, 298 insertions(+), 134 deletions(-)
 create mode 100644 frontend/src/app/components/icons/plus.jsx
 create mode 100644 frontend/src/app/components/mobileToggleTab/Toggle.jsx
 create mode 100644 frontend/src/app/components/mobileToggleTab/styles.module.css

diff --git a/frontend/src/app/components/icons/plus.jsx b/frontend/src/app/components/icons/plus.jsx
new file mode 100644
index 0000000..d8ca33d
--- /dev/null
+++ b/frontend/src/app/components/icons/plus.jsx
@@ -0,0 +1,32 @@
+import React from "react";
+
+const plus = () => {
+  return (
+    <>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width={24}
+        height={24}
+        viewBox="0 0 24 24"
+        fill="none"
+      >
+        <path
+          d="M12 5.29199V18.7087"
+          stroke="#333649"
+          strokeWidth={2}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M5.29102 12H18.7077"
+          stroke="#333649"
+          strokeWidth={2}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </svg>
+    </>
+  );
+};
+
+export default plus;
diff --git a/frontend/src/app/components/mobileToggleTab/Toggle.jsx b/frontend/src/app/components/mobileToggleTab/Toggle.jsx
new file mode 100644
index 0000000..e4fe140
--- /dev/null
+++ b/frontend/src/app/components/mobileToggleTab/Toggle.jsx
@@ -0,0 +1,36 @@
+import React from "react";
+import styles from "./styles.module.css";
+import MobileSearchBar from "@/app/components/mobileSearchBar/MobileSearchBar";
+import useIsMobile from "@/app/hooks/useIsMobile";
+import PlusIcon from "../icons/plus";
+
+const Toggle = ({ tabs = [], activeTab, onChange }) => {
+  const isMobile = useIsMobile();
+
+  return (
+    <div className={styles.toggleContainer}>
+      <div className={styles.buttonToggles}>
+        {tabs.map((tab) => (
+          <button
+            key={tab.value}
+            className={`${styles.buttonStyle} ${activeTab === tab.value ? styles.active : ""}`}
+            onClick={() => onChange(tab.value)}
+          >
+            {tab.label}
+          </button>
+        ))}
+      </div>
+
+      {isMobile && activeTab === "permissions" && (
+        <div className={styles.container}>
+          <MobileSearchBar />
+          <button>
+            <PlusIcon />
+          </button>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Toggle;
diff --git a/frontend/src/app/components/mobileToggleTab/styles.module.css b/frontend/src/app/components/mobileToggleTab/styles.module.css
new file mode 100644
index 0000000..5d9c2ef
--- /dev/null
+++ b/frontend/src/app/components/mobileToggleTab/styles.module.css
@@ -0,0 +1,56 @@
+.toggleContainer {
+  display: none;
+}
+
+@media (max-width: 950px) {
+  .toggleContainer {
+    display: flex;
+    flex-direction: column;
+    align-self: stretch;
+    gap: 16px;
+  }
+  .buttonToggles {
+    display: flex;
+    align-items: flex-start;
+    gap: 16px;
+    align-self: stretch;
+  }
+  .container {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    flex: 1 0 0;
+  }
+  .container > button {
+    display: flex;
+    padding: 8px;
+    border: none;
+    justify-content: center;
+    align-items: center;
+    gap: 12px;
+    border-radius: 6px;
+    background: #27293b;
+  }
+
+  .buttonStyle {
+    display: flex;
+    background: none;
+    border: none;
+    padding: 24px 4px 16px 4px;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+    gap: 5px;
+    color: #85869b;
+    font-family: Inter;
+    font-size: 18px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: normal;
+    letter-spacing: 0.18px;
+  }
+  .active {
+    border-bottom: 1px solid #959aff;
+    color: #959aff;
+  }
+}
diff --git a/frontend/src/app/components/navbar/navleft/styles.module.css b/frontend/src/app/components/navbar/navleft/styles.module.css
index 09043f0..64bde6c 100644
--- a/frontend/src/app/components/navbar/navleft/styles.module.css
+++ b/frontend/src/app/components/navbar/navleft/styles.module.css
@@ -91,7 +91,7 @@
   background: #2d3143;
   box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.25);
   position: absolute;
-  z-index: 4;
+  z-index: 30;
   top: 100%;
   margin-top: 8px;
   left: 0;
diff --git a/frontend/src/app/components/navbar/navright/styles.module.css b/frontend/src/app/components/navbar/navright/styles.module.css
index 288f9d3..5445557 100644
--- a/frontend/src/app/components/navbar/navright/styles.module.css
+++ b/frontend/src/app/components/navbar/navright/styles.module.css
@@ -16,10 +16,9 @@
   gap: 10px;
   border-radius: 6px;
 }
-.profileBadge:hover {
+.profileBadgeButton:hover {
   border-radius: 6px;
   background: #21232f;
-  background: color(display-p3 0.1294 0.1373 0.1804);
 }
 .nameRole {
   display: flex;
@@ -79,12 +78,10 @@
   left: 0;
   border-radius: 6px;
   background: #2d3144;
-  background: color(display-p3 0.1787 0.1913 0.2605);
   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);
   cursor: pointer;
   position: absolute;
-  z-index: 10;
+  z-index: 30;
   top: 100%;
   margin-top: 3px;
   animation-name: dropDownAnimation;
diff --git a/frontend/src/app/components/permissions/Permissions.jsx b/frontend/src/app/components/permissions/Permissions.jsx
index 51a0519..db5c0e0 100644
--- a/frontend/src/app/components/permissions/Permissions.jsx
+++ b/frontend/src/app/components/permissions/Permissions.jsx
@@ -3,46 +3,24 @@ import DeleteIcon from "../icons/delete";
 import FileIcon from "../icons/file";
 import editUserStyle from "./styles.module.css";
 import React from "react";
+import PlusIcon from "../icons/plus";
 
 const Permissions = ({ sampleData = [] }) => {
   return (
     <>
       {/* Permissions */}
-      <div className={editUserStyle.userPermissions}>
-        {/* Add permissions */}
-        <div className={editUserStyle.imanginaryDiv}></div>
-        <div className={editUserStyle.permissionsContainer}>
-          {/* Header */}
-          <div className={editUserStyle.permissionsHeader}>
-            <p>Permissions</p>
-            <div className={editUserStyle.svgContainer}>
-              <div>
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  width={24}
-                  height={24}
-                  viewBox="0 0 24 24"
-                  fill="none"
-                >
-                  <path
-                    d="M12 5.29199V18.7087"
-                    stroke="#333649"
-                    strokeWidth={2}
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                  />
-                  <path
-                    d="M5.29102 12H18.7077"
-                    stroke="#333649"
-                    strokeWidth={2}
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                  />
-                </svg>
-              </div>
-            </div>
+      <div className={editUserStyle.permissionsContainer}>
+        <div className={editUserStyle.permissionsHeader}>
+          <p>Permissions</p>
+          <div className={editUserStyle.svgContainer}>
+            {/* Button ni */}
+            <button>
+              <PlusIcon />
+            </button>
           </div>
+        </div>
 
+        <div className={editUserStyle.wrapper}>
           {sampleData.length === 0 ? (
             // Default Message
             <div className={editUserStyle.permissionDefaultState}>
diff --git a/frontend/src/app/components/permissions/styles.module.css b/frontend/src/app/components/permissions/styles.module.css
index 891783d..0a567bc 100644
--- a/frontend/src/app/components/permissions/styles.module.css
+++ b/frontend/src/app/components/permissions/styles.module.css
@@ -1,19 +1,3 @@
-.imanginaryDiv {
-  padding: 18px;
-}
-.userPermissions {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  flex: 1 0 0;
-  align-self: stretch;
-  border-radius: 6px;
-  height: calc(100vh - 175px);
-  position: relative;
-  overflow: auto;
-  scrollbar-width: none;
-}
-
 .permissionsContainer {
   display: flex;
   padding: 24px;
@@ -22,7 +6,6 @@
   align-self: stretch;
   border-radius: 6px;
   background: #1d1e2a;
-  background: color(display-p3 0.1138 0.1191 0.1616);
 }
 .permissionsHeader {
   display: flex;
@@ -41,7 +24,6 @@
   flex: 1 0 0;
 
   color: #d2d3e1;
-  color: color(display-p3 0.8235 0.8275 0.8784);
   font-family: Inter;
   font-size: 20px;
   font-style: normal;
@@ -58,21 +40,20 @@
   gap: 5px;
   border-radius: 6px;
   background: #27293b;
-  background: color(display-p3 0.1529 0.1608 0.2275);
 }
 
-.svgContainer > div {
+.svgContainer > button {
   display: flex;
   padding: 8px;
+  border: none;
   justify-content: center;
   align-items: center;
   gap: 12px;
   border-radius: 6px;
   background: #27293b;
-  background: color(display-p3 0.1529 0.1608 0.2275);
 }
 
-.permissionDefaultState {
+.wrapper {
   display: flex;
   height: 43.813px;
   padding: 8px 16px;
@@ -80,6 +61,15 @@
   align-items: center;
   align-self: stretch;
 }
+
+.permissionDefaultState {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 12px;
+  flex: 1 0 0;
+  align-self: stretch;
+}
 .permissionDefaultState p {
   display: flex;
   justify-content: center;
@@ -88,7 +78,6 @@
   flex: 1 0 0;
   align-self: stretch;
   color: #85869b;
-  color: color(display-p3 0.5216 0.5255 0.6);
   font-family: Inter;
   font-size: 16px;
   font-style: normal;
@@ -104,13 +93,10 @@
   align-items: center;
   align-self: stretch;
   border-bottom: 0.5px solid #2e3042;
-  border-bottom: 0.5px solid color(display-p3 0.1831 0.189 0.2535);
 }
 .permissions: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);
 }
 .permissionsItem {
   display: flex;
@@ -121,7 +107,6 @@
 }
 .permissionsItem > p {
   color: #d2d3e1;
-  color: color(display-p3 0.8235 0.8275 0.8784);
   font-family: Inter;
   font-size: 16px;
   font-style: normal;
@@ -151,35 +136,40 @@
   stroke: color(display-p3 1 1 1);
   border-radius: 100px;
   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%
-  );
 }
 
-.permissionDefaultState {
-  display: flex;
-  height: 43.813px;
-  padding: 8px 16px;
-  justify-content: center;
-  align-items: center;
-  align-self: stretch;
-}
-.permissionDefaultState p {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: 12px;
-  flex: 1 0 0;
-  align-self: stretch;
-  color: #85869b;
-  color: color(display-p3 0.5216 0.5255 0.6);
-  font-family: Inter;
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: normal;
+@media (max-width: 768px) {
+  .permissionsContainer {
+    border-radius: 4px;
+    padding: 0 0 24px 0;
+  }
+  .permissionsHeader {
+    padding: 12px 16px;
+  }
+
+  .permissionsHeader > p {
+    color: #fff;
+    font-size: 18px;
+    align-self: stretch;
+  }
+  .svgContainer {
+    display: none;
+  }
+
+  .wrapper {
+    display: flex;
+    padding: 24px 16px 0 16px;
+    align-items: flex-start;
+    align-self: stretch;
+  }
+  .permissionDefaultState {
+    gap: 12px;
+    align-self: stretch;
+  }
+
+  .permissionDefaultState > p {
+    font-weight: 500;
+    text-align: center;
+  }
 }
diff --git a/frontend/src/app/roles/page.jsx b/frontend/src/app/roles/page.jsx
index 45d219e..861dc90 100644
--- a/frontend/src/app/roles/page.jsx
+++ b/frontend/src/app/roles/page.jsx
@@ -9,37 +9,34 @@ import ViewIcon from "../components/icons/view";
 import DeleteIcon from "../components/icons/delete";
 import SuccessToast from "../components/toast/success/successToast";
 import ActionButton from "../components/actionButton/ActionButton";
+import MobileSearchBar from "../components/mobileSearchBar/MobileSearchBar";
+import Card from "./role-card/Card";
 
 const RolesPage = () => {
   const router = useRouter();
 
   const sampleData = [
     {
-      id: 1,
       name: "organization-owner",
       orgId: "67160a5ae69144ff19aafb86",
       permissions: "35 Permissions",
     },
     {
-      id: 2,
       name: "organization-owner",
       orgId: "67160a5ae69144ff19aafb86",
       permissions: "35 Permissions",
     },
     {
-      id: 3,
       name: "organization-owner",
       orgId: "67160a5ae69144ff19aafb86",
       permissions: "35 Permissions",
     },
     {
-      id: 4,
       name: "organization-owner",
       orgId: "67160a5ae69144ff19aafb86",
       permissions: "35 Permissions",
     },
     {
-      id: 5,
       name: "organization-owner",
       orgId: "67160a5ae69144ff19aafb86",
       permissions: "35 Permissions",
@@ -55,6 +52,21 @@ const RolesPage = () => {
             topbarTitle="Roles"
             requiredButtons={["title", "add", "search"]}
           />
+
+          {/* Mobile View */}
+          <div className={styles.cardContainer}>
+            <MobileSearchBar />
+            {sampleData.map((role, index) => {
+              return (
+                <Card
+                  role={role}
+                  key={index}
+                  onClick={() => router.push(`/roles/${index}`)}
+                />
+              );
+            })}
+          </div>
+
           {/* Users Table */}
           <div className={styles.tableContainer}>
             <table className={styles.table}>
@@ -71,8 +83,8 @@ const RolesPage = () => {
                   //role or user?
                   return (
                     <tr
-                      key={role.id}
-                      onClick={() => router.push(`/roles/${role.id}`)}
+                      key={index}
+                      onClick={() => router.push(`/roles/${index}`)}
                     >
                       <td>{role.name}</td>
                       <td>{role.orgId}</td>
diff --git a/frontend/src/app/roles/role-card/Card.jsx b/frontend/src/app/roles/role-card/Card.jsx
index 49cd0be..af1ad11 100644
--- a/frontend/src/app/roles/role-card/Card.jsx
+++ b/frontend/src/app/roles/role-card/Card.jsx
@@ -1,5 +1,6 @@
 import DeleteIcon from "@/app/components/icons/delete";
 import React from "react";
+import styles from "./styles.module.css";
 
 const Card = (props) => {
   return (
@@ -7,15 +8,15 @@ const Card = (props) => {
       <div className={styles.cardDetails}>
         <div className={styles.list}>
           <p>Name</p>
-          <p>{props?.user?.email}</p>
+          <p>{props?.role?.name}</p>
         </div>
         <div className={styles.list}>
           <p>Organization ID</p>
-          <p>{props?.user?.fullName}</p>
+          <p>{props?.role?.orgId}</p>
         </div>
         <div className={styles.list}>
           <p>Permissions</p>
-          <p>{props?.user?.createdAt}</p>
+          <p>{props?.role?.permissions}</p>
         </div>
       </div>
       <div className={styles.cardAction}>
diff --git a/frontend/src/app/roles/styles.module.css b/frontend/src/app/roles/styles.module.css
index 1026fe7..f807d17 100644
--- a/frontend/src/app/roles/styles.module.css
+++ b/frontend/src/app/roles/styles.module.css
@@ -23,7 +23,7 @@
   text-align: left;
   color: #85869b;
   font-family: Inter;
-  font-size: 13px;
+  font-size: var(--table-font-size);
   font-style: normal;
   flex: 1 0 0;
   font-weight: 500;
@@ -41,7 +41,7 @@
   padding: 12px 24px;
   color: #eeeffd;
   font-family: Inter;
-  font-size: 13px;
+  font-size: var(--table-font-size);
   font-style: normal;
   font-weight: 500;
   line-height: normal;
@@ -65,15 +65,23 @@
   align-self: stretch;
 }
 
-/* Mobile */
 .cardContainer {
-  display: flex;
-  padding: 0 16px;
-  padding-bottom: 50px;
-  height: calc(100vh - 170px);
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 12px;
-  align-self: stretch;
-  overflow: auto;
+  display: none;
+}
+
+@media (max-width: 768px) {
+  .cardContainer {
+    display: flex;
+    padding: 0 16px;
+    padding-bottom: 50px;
+    height: calc(100vh - 170px);
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 12px;
+    align-self: stretch;
+    overflow: auto;
+  }
+  .tableContainer {
+    display: none;
+  }
 }
diff --git a/frontend/src/app/users/add/page.jsx b/frontend/src/app/users/add/page.jsx
index 42e6a92..44cd0dc 100644
--- a/frontend/src/app/users/add/page.jsx
+++ b/frontend/src/app/users/add/page.jsx
@@ -1,5 +1,5 @@
 "use client";
-import React from "react";
+import React, { useState } from "react";
 import TopHeader from "@/app/components/topHeader/TopHeader";
 import globalStyle from "../../globalStyle.module.css";
 import addUserStyle from "./styles.module.css";
@@ -8,6 +8,8 @@ import SelectField from "@/app/components/select/SelectField";
 import Permissions from "@/app/components/permissions/Permissions";
 import useUserForm from "@/app/hooks/useUserForm";
 import Alert from "@/app/components/alerts/Alert";
+import Toggle from "@/app/components/mobileToggleTab/Toggle";
+
 const AddUserPage = () => {
   const {
     register,
@@ -18,6 +20,9 @@ const AddUserPage = () => {
     setTriggerAlert,
   } = useUserForm();
 
+  // Mobile
+  const [activeTab, setActiveTab] = useState("details");
+
   return (
     <div className={globalStyle.section}>
       {triggerAlert && (
@@ -36,18 +41,29 @@ const AddUserPage = () => {
             state="add"
             requiredButtons={["title", "save"]}
           />
+
           <div className={addUserStyle.addUserContainer}>
-            {/* Input fields Container  */}
+            {/* Mobile Toggle */}
+            <Toggle
+              activeTab={activeTab}
+              onChange={setActiveTab}
+              tabs={[
+                { label: "User Details", value: "details" },
+                { label: "Permissions", value: "permissions" },
+              ]}
+            />
+            {/* Input fields Container */}
             <div className={addUserStyle.inputFieldContainer}>
               {/* User Details */}
-              <div className={addUserStyle.userDetails}>
-                {/* Header */}
+              <div
+                className={`${addUserStyle.userDetails} ${activeTab !== "details" ? addUserStyle.hiddenMobile : ""}`}
+              >
                 <div className={addUserStyle.header}>
                   <div>
                     <p>User Details</p>
                   </div>
                 </div>
-                {/* Input fields */}
+                {/* Ibalhin ning form na tag */}
                 <form
                   className={addUserStyle.fields}
                   id="form"
@@ -68,11 +84,9 @@ const AddUserPage = () => {
                   {/* Email */}
                   <div className={addUserStyle.inputMainContainer}>
                     <div className={addUserStyle.inputContainer}>
-                      {/* Label */}
                       <div className={addUserStyle.label}>
                         <p>Email</p>
                       </div>
-                      {/* Input field */}
                       <div className={addUserStyle.inputField}>
                         <TextField
                           placeHolder="Enter email"
@@ -85,11 +99,9 @@ const AddUserPage = () => {
                   {/* Full Name */}
                   <div className={addUserStyle.inputMainContainer}>
                     <div className={addUserStyle.inputContainer}>
-                      {/* Label */}
                       <div className={addUserStyle.label}>
                         <p>Full Name</p>
                       </div>
-                      {/* Input field */}
                       <div className={addUserStyle.inputField}>
                         <TextField
                           placeHolder="Enter full name"
@@ -103,7 +115,12 @@ const AddUserPage = () => {
               </div>
 
               {/* Permissions */}
-              <Permissions />
+              <div
+                className={`${addUserStyle.userPermissions} ${activeTab !== "permissions" ? addUserStyle.hiddenMobile : ""}`}
+              >
+                <div className={addUserStyle.imanginaryDiv}></div>
+                <Permissions />
+              </div>
             </div>
           </div>
         </div>
diff --git a/frontend/src/app/users/add/styles.module.css b/frontend/src/app/users/add/styles.module.css
index f03154e..0bab896 100644
--- a/frontend/src/app/users/add/styles.module.css
+++ b/frontend/src/app/users/add/styles.module.css
@@ -22,7 +22,22 @@
   align-items: flex-start;
   border-radius: 6px;
   background: #1d1e2a;
-  background: color(display-p3 0.1137 0.1176 0.1608);
+}
+
+.imanginaryDiv {
+  padding: 18px;
+}
+.userPermissions {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  flex: 1 0 0;
+  align-self: stretch;
+  border-radius: 6px;
+  height: calc(100vh - 175px);
+  position: relative;
+  overflow: auto;
+  scrollbar-width: none;
 }
 .header {
   display: flex;
@@ -42,7 +57,6 @@
 .header > div > p {
   width: 163px;
   color: #d2d3e1;
-  color: color(display-p3 0.8235 0.8275 0.8784);
   font-family: Inter;
   font-size: 20px;
   font-style: normal;
@@ -79,7 +93,6 @@
 }
 .label > p {
   color: #d2d3e1;
-  color: color(display-p3 0.8235 0.8275 0.8784);
   font-family: Inter;
   font-size: 16px;
   font-style: normal;
@@ -100,6 +113,33 @@
   gap: 8px;
   align-self: stretch;
 }
-.imanginaryDiv {
-  padding: 18px;
+
+@media (max-width: 950px) {
+  .hiddenMobile {
+    display: none;
+  }
+  .addUserContainer {
+    align-self: stretch;
+    padding: 0 16px;
+    flex-direction: column;
+    gap: 16px;
+  }
+  .header {
+    display: none;
+  }
+  .userDetails {
+    background: none;
+    padding: 0px 0px 0px 0px;
+    margin-top: 16px;
+  }
+  .imanginaryDiv {
+    display: none;
+  }
+}
+@media (max-width: 768px) {
+  .userDetails {
+    background: none;
+    padding: 0px 0px 0px 0px;
+    width: 100%;
+  }
 }
diff --git a/frontend/src/app/users/styles.module.css b/frontend/src/app/users/styles.module.css
index 464fe49..6d281a0 100644
--- a/frontend/src/app/users/styles.module.css
+++ b/frontend/src/app/users/styles.module.css
@@ -22,7 +22,6 @@
   text-align: left;
   color: #85869b;
   font-family: Inter;
-
   font-size: var(--table-font-size);
   font-style: normal;
   flex: 1 0 0;
@@ -78,7 +77,6 @@
     gap: 12px;
     align-self: stretch;
     overflow: auto;
-    background-color: red;
   }
   .tableContainer {
     display: none;
diff --git a/frontend/src/app/users/user-card/styles.module.css b/frontend/src/app/users/user-card/styles.module.css
index c8b254f..5f16b70 100644
--- a/frontend/src/app/users/user-card/styles.module.css
+++ b/frontend/src/app/users/user-card/styles.module.css
@@ -6,7 +6,6 @@
   align-self: stretch;
   border-bottom: 1px solid #2c2d3d;
   cursor: pointer;
-  background-color: green;
 }
 .cardDetails {
   display: flex;

From 8c776a54915f8612c1487314947983ea4ed290f1 Mon Sep 17 00:00:00 2001
From: benzbarquilla <benzzbarquilla@gmail.com>
Date: Thu, 19 Mar 2026 09:29:25 +0800
Subject: [PATCH 2/4] fixed agents add and view desktop

---
 frontend/src/app/agents/[agentsId]/page.jsx   | 70 ++++++++++++-------
 frontend/src/app/agents/add/page.jsx          | 54 ++++++++++----
 frontend/src/app/agents/add/styles.module.css | 14 +---
 3 files changed, 87 insertions(+), 51 deletions(-)

diff --git a/frontend/src/app/agents/[agentsId]/page.jsx b/frontend/src/app/agents/[agentsId]/page.jsx
index 9d482c0..bf6644d 100644
--- a/frontend/src/app/agents/[agentsId]/page.jsx
+++ b/frontend/src/app/agents/[agentsId]/page.jsx
@@ -11,8 +11,8 @@ import Alert from "@/app/components/alerts/Alert";
 import Checkbox from "@/app/components/customCheckbox/Checkbox";
 
 const ViewAgentPage = () => {
-  const [useVpn, setUseVpn] = useState(true);
-  const [enableLoki, setEnableLoki] = useState(true);
+  const [useVpn, setUseVpn] = useState(false);
+  const [enableLoki, setEnableLoki] = useState(false);
   const {
     register,
     handleSubmit,
@@ -90,35 +90,51 @@ const ViewAgentPage = () => {
                     </>
                   }
                 />
-                {/* Agent endpoint */}
-                <div className={createAgentStyle.inputContainer}>
-                  <div className={createAgentStyle.labelContainer}>
-                    <p>Tailscale Device Prefix</p>
-                    {/* <p className={createAgentStyle.required}>*</p> */}
+                {useVpn ? (
+                  <>
+                    <div className={createAgentStyle.inputContainer}>
+                      <div className={createAgentStyle.labelContainer}>
+                        <p>Tailscale Device Prefix</p>
+                        <p className={createAgentStyle.required}>*</p>
+                      </div>
+                      <TextField
+                        placeHolder="doks-onecbdev-agent"
+                        {...register("agentEndpoint", { required: true })}
+                        hasError={!!errors.agentEndpoint}
+                      />
+                      <Prompts show={false} />
+                    </div>
+
+                    <div className={createAgentStyle.inputContainer}>
+                      <div className={createAgentStyle.labelContainer}>
+                        <p>Tailscale Port</p>
+                        <p className={createAgentStyle.required}>*</p>
+                      </div>
+                      <TextField
+                        placeHolder="6969"
+                        {...register("agentEndpoint", { required: true })}
+                        hasError={!!errors.agentEndpoint}
+                      />
+                      <Prompts show={false} />
+                    </div>
+                  </>
+                ) : (
+                  <div className={createAgentStyle.inputContainer}>
+                    <div className={createAgentStyle.labelContainer}>
+                      <p>Agent Endpoint</p>
+                      <p className={createAgentStyle.required}>*</p>
+                    </div>
+                    <TextField
+                      placeHolder="e.g., http://agent-01.example.com:8080"
+                      {...register("agentEndpoint", { required: true })}
+                      hasError={!!errors.agentEndpoint}
+                    />
+                    <Prompts show={false} />
                   </div>
-                  <TextField
-                    placeHolder="doks-onecbdev-agent"
-                    {...register("agentEndpoint", { required: true })}
-                    hasError={!!errors.agentEndpoint}
-                  />
-                  <Prompts show={false} />
-                </div>
-                <div className={createAgentStyle.inputContainer}>
-                  <div className={createAgentStyle.labelContainer}>
-                    <p>Tailscale Port</p>
-                    {/* <p className={createAgentStyle.required}>*</p> */}
-                  </div>
-                  <TextField
-                    placeHolder="6969"
-                    {...register("agentEndpoint", { required: true })}
-                    hasError={!!errors.agentEndpoint}
-                  />
-                  <Prompts show={false} />
-                </div>
+                )}
               </div>
 
               <div className={createAgentStyle.lokiContainer}>
-                {/* Header */}
                 <div className={createAgentStyle.headerContainer}>
                   <div className={createAgentStyle.headerTxt}>
                     <p>Loki Integration (Optional)</p>
diff --git a/frontend/src/app/agents/add/page.jsx b/frontend/src/app/agents/add/page.jsx
index f9abc0d..d361fdc 100644
--- a/frontend/src/app/agents/add/page.jsx
+++ b/frontend/src/app/agents/add/page.jsx
@@ -48,7 +48,6 @@ const AddAgentPage = () => {
             onSubmit={handleSubmit(onSubmit)}
           >
             <div className={createAgentStyle.createAgentContainer}>
-              <div className={createAgentStyle.div}></div>
               <div className={createAgentStyle.inputMainContainer}>
                 {/* AGENT FORM */}
                 <div className={createAgentStyle.headerContainer}>
@@ -93,19 +92,48 @@ const AddAgentPage = () => {
                     </>
                   }
                 />
-                {/* Agent endpoint */}
-                <div className={createAgentStyle.inputContainer}>
-                  <div className={createAgentStyle.labelContainer}>
-                    <p>Agent Endpoint</p>
-                    <p className={createAgentStyle.required}>*</p>
+                {useVpn ? (
+                  <>
+                    <div className={createAgentStyle.inputContainer}>
+                      <div className={createAgentStyle.labelContainer}>
+                        <p>Tailscale Device Prefix</p>
+                        <p className={createAgentStyle.required}>*</p>
+                      </div>
+                      <TextField
+                        placeHolder="doks-onecbdev-agent"
+                        {...register("agentEndpoint", { required: true })}
+                        hasError={!!errors.agentEndpoint}
+                      />
+                      <Prompts show={false} />
+                    </div>
+
+                    <div className={createAgentStyle.inputContainer}>
+                      <div className={createAgentStyle.labelContainer}>
+                        <p>Tailscale Port</p>
+                        <p className={createAgentStyle.required}>*</p>
+                      </div>
+                      <TextField
+                        placeHolder="6969"
+                        {...register("agentEndpoint", { required: true })}
+                        hasError={!!errors.agentEndpoint}
+                      />
+                      <Prompts show={false} />
+                    </div>
+                  </>
+                ) : (
+                  <div className={createAgentStyle.inputContainer}>
+                    <div className={createAgentStyle.labelContainer}>
+                      <p>Agent Endpoint</p>
+                      <p className={createAgentStyle.required}>*</p>
+                    </div>
+                    <TextField
+                      placeHolder="e.g., http://agent-01.example.com:8080"
+                      {...register("agentEndpoint", { required: true })}
+                      hasError={!!errors.agentEndpoint}
+                    />
+                    <Prompts show={false} />
                   </div>
-                  <TextField
-                    placeHolder="e.g., http://agent-01.example.com:8080"
-                    {...register("agentEndpoint", { required: true })}
-                    hasError={!!errors.agentEndpoint}
-                  />
-                  <Prompts show={false} />
-                </div>
+                )}
               </div>
 
               <div className={createAgentStyle.lokiContainer}>
diff --git a/frontend/src/app/agents/add/styles.module.css b/frontend/src/app/agents/add/styles.module.css
index fd43530..b0b46f1 100644
--- a/frontend/src/app/agents/add/styles.module.css
+++ b/frontend/src/app/agents/add/styles.module.css
@@ -4,7 +4,6 @@
   align-items: flex-start;
   gap: 10px;
   flex: 1 0 0;
-  padding-top: 48px;
   align-self: stretch;
 }
 
@@ -14,9 +13,10 @@
   align-items: flex-start;
   align-self: stretch;
   /* Ibalhin ni ang padding sa formcontainer maoang nasa figma */
+  padding-top: 48px;
   gap: 16px;
   flex: 1 1 auto;
-  height: calc(100vh - 100px - 48px - 110px);
+  height: calc(100vh - 100px - 5px - 110px);
   overflow-y: auto;
   scrollbar-width: none;
 }
@@ -31,17 +31,9 @@
 .headerContainer {
   display: flex;
   align-items: flex-start;
-  gap: 17px;
   align-self: stretch;
 }
-.headerContainer > div {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: flex-start;
-  gap: 5px;
-  flex: 1 0 0;
-}
+
 .headerTxt > p {
   /* width: 163px; */
   align-self: stretch;

From c9d5faebb096da16bd111f070e4cf5a9a81d05e1 Mon Sep 17 00:00:00 2001
From: benzbarquilla <benzzbarquilla@gmail.com>
Date: Thu, 19 Mar 2026 16:27:37 +0800
Subject: [PATCH 3/4] done users and roles page responsive view review nalang
 ang polish

---
 .../app/components/mobileToggleTab/Toggle.jsx |  5 +-
 .../mobileToggleTab/styles.module.css         |  7 ++-
 .../components/permissions/Permissions.jsx    | 22 ++++---
 .../components/permissions/styles.module.css  | 37 +++++-------
 frontend/src/app/roles/[rolesId]/page.jsx     | 32 +++++++---
 .../src/app/roles/[rolesId]/styles.module.css | 53 +++++++++++++++--
 frontend/src/app/roles/add/page.jsx           | 33 +++++++----
 frontend/src/app/roles/add/styles.module.css  | 51 ++++++++++++++--
 frontend/src/app/users/[usersId]/page.jsx     | 29 ++++++++--
 .../src/app/users/[usersId]/styles.module.css | 58 +++++++++++++++++--
 frontend/src/app/users/add/page.jsx           |  6 +-
 frontend/src/app/users/add/styles.module.css  | 14 +++--
 12 files changed, 262 insertions(+), 85 deletions(-)

diff --git a/frontend/src/app/components/mobileToggleTab/Toggle.jsx b/frontend/src/app/components/mobileToggleTab/Toggle.jsx
index e4fe140..14941b4 100644
--- a/frontend/src/app/components/mobileToggleTab/Toggle.jsx
+++ b/frontend/src/app/components/mobileToggleTab/Toggle.jsx
@@ -23,7 +23,10 @@ const Toggle = ({ tabs = [], activeTab, onChange }) => {
 
       {isMobile && activeTab === "permissions" && (
         <div className={styles.container}>
-          <MobileSearchBar />
+          <div className={styles.searchBar}>
+            <MobileSearchBar />
+          </div>
+
           <button>
             <PlusIcon />
           </button>
diff --git a/frontend/src/app/components/mobileToggleTab/styles.module.css b/frontend/src/app/components/mobileToggleTab/styles.module.css
index 5d9c2ef..77d5fd1 100644
--- a/frontend/src/app/components/mobileToggleTab/styles.module.css
+++ b/frontend/src/app/components/mobileToggleTab/styles.module.css
@@ -20,13 +20,18 @@
     align-items: center;
     gap: 16px;
     flex: 1 0 0;
+    padding: 8px 0;
   }
+  .searchBar {
+    width: 100%;
+  }
+
   .container > button {
     display: flex;
     padding: 8px;
     border: none;
     justify-content: center;
-    align-items: center;
+    align-items: end;
     gap: 12px;
     border-radius: 6px;
     background: #27293b;
diff --git a/frontend/src/app/components/permissions/Permissions.jsx b/frontend/src/app/components/permissions/Permissions.jsx
index db5c0e0..c3a2cc2 100644
--- a/frontend/src/app/components/permissions/Permissions.jsx
+++ b/frontend/src/app/components/permissions/Permissions.jsx
@@ -20,15 +20,13 @@ const Permissions = ({ sampleData = [] }) => {
           </div>
         </div>
 
-        <div className={editUserStyle.wrapper}>
-          {sampleData.length === 0 ? (
-            // Default Message
-            <div className={editUserStyle.permissionDefaultState}>
-              <p>No permission added yet</p>
-            </div>
-          ) : (
-            // Sampple Data(static)
-            sampleData.map((perm, index) => {
+        {sampleData.length === 0 ? (
+          <div className={editUserStyle.permissionDefaultState}>
+            <p>No permission added yet</p>
+          </div>
+        ) : (
+          <div className={editUserStyle.permissionsList}>
+            {sampleData.map((perm, index) => {
               return (
                 <div className={editUserStyle.permissions} key={index}>
                   <div className={editUserStyle.permissionsItem}>
@@ -40,9 +38,9 @@ const Permissions = ({ sampleData = [] }) => {
                   </div>
                 </div>
               );
-            })
-          )}
-        </div>
+            })}
+          </div>
+        )}
       </div>
     </>
   );
diff --git a/frontend/src/app/components/permissions/styles.module.css b/frontend/src/app/components/permissions/styles.module.css
index 0a567bc..c83249c 100644
--- a/frontend/src/app/components/permissions/styles.module.css
+++ b/frontend/src/app/components/permissions/styles.module.css
@@ -22,7 +22,6 @@
   align-items: flex-start;
   gap: 5px;
   flex: 1 0 0;
-
   color: #d2d3e1;
   font-family: Inter;
   font-size: 20px;
@@ -53,22 +52,13 @@
   background: #27293b;
 }
 
-.wrapper {
-  display: flex;
-  height: 43.813px;
-  padding: 8px 16px;
-  justify-content: center;
-  align-items: center;
-  align-self: stretch;
-}
-
 .permissionDefaultState {
-  display: flex;
-  justify-content: center;
   align-items: center;
   gap: 12px;
   flex: 1 0 0;
   align-self: stretch;
+  height: 43.813px;
+  padding: 8px 16px;
 }
 .permissionDefaultState p {
   display: flex;
@@ -84,16 +74,19 @@
   font-weight: 400;
   line-height: normal;
 }
-
+.permissionsList {
+  width: 100%;
+}
 .permissions {
   display: flex;
   height: 43.813px;
-  padding: 8px 16px;
+  padding: 8px 8px 8px 16px;
   justify-content: space-between;
   align-items: center;
   align-self: stretch;
   border-bottom: 0.5px solid #2e3042;
 }
+
 .permissions:hover {
   border-bottom: 1px solid rgba(129, 135, 255, 0.25);
   background: rgba(129, 135, 255, 0.05);
@@ -153,21 +146,21 @@
     font-size: 18px;
     align-self: stretch;
   }
+
   .svgContainer {
     display: none;
   }
-
-  .wrapper {
-    display: flex;
-    padding: 24px 16px 0 16px;
-    align-items: flex-start;
-    align-self: stretch;
-  }
   .permissionDefaultState {
     gap: 12px;
     align-self: stretch;
+    padding: 24px 16px 0 16px;
+  }
+  .permissionsList {
+    padding-top: 16px;
+  }
+  .permissions {
+    padding: 8px 16px;
   }
-
   .permissionDefaultState > p {
     font-weight: 500;
     text-align: center;
diff --git a/frontend/src/app/roles/[rolesId]/page.jsx b/frontend/src/app/roles/[rolesId]/page.jsx
index 6db77a2..eb21a41 100644
--- a/frontend/src/app/roles/[rolesId]/page.jsx
+++ b/frontend/src/app/roles/[rolesId]/page.jsx
@@ -1,9 +1,11 @@
-import React from "react";
+"use client";
+import React, { useState } from "react";
 import TopHeader from "@/app/components/topHeader/TopHeader";
 import globalStyle from "../../globalStyle.module.css";
 import editRoleStyle from "./styles.module.css";
 import TextField from "@/app/components/fields/textfield";
 import Permissions from "@/app/components/permissions/Permissions";
+import Toggle from "@/app/components/mobileToggleTab/Toggle";
 
 const ViewRolePage = () => {
   const sampleData = [
@@ -22,6 +24,8 @@ const ViewRolePage = () => {
     { permission: "service.delete" },
     { permission: "service.update" },
   ];
+
+  const [activeTab, setActiveTab] = useState("details");
   return (
     <div className={globalStyle.section}>
       <div className={globalStyle.mainContainer}>
@@ -32,23 +36,30 @@ const ViewRolePage = () => {
             state="view"
             requiredButtons={["back", "title", "edit", "download"]}
           />
-          <div className={editRoleStyle.addRoleContainer}>
+          <div className={editRoleStyle.editRoleContainer}>
+            {/* Mobile Toggle */}
+            <Toggle
+              activeTab={activeTab}
+              onChange={setActiveTab}
+              tabs={[
+                { label: "Role Details", value: "details" },
+                { label: "Permissions", value: "permissions" },
+              ]}
+            />
             {/* Input fields Container  */}
             <div className={editRoleStyle.inputFieldContainer}>
               {/* User Details */}
-              <div className={editRoleStyle.userDetails}>
-                {/* Header */}
+              <div
+                className={`${editRoleStyle.roleDetails} ${activeTab !== "details" ? editRoleStyle.hiddenMobile : ""}`}
+              >
                 <div className={editRoleStyle.header}>
                   <div>
                     <p>Role Details</p>
                   </div>
                 </div>
-                {/* Input fields */}
                 <form className={editRoleStyle.fields}>
-                  {/* Email */}
                   <div className={editRoleStyle.inputMainContainer}>
                     <div className={editRoleStyle.inputContainer}>
-                      {/* Label */}
                       <div className={editRoleStyle.label}>
                         <p>Name</p>
                       </div>
@@ -77,7 +88,12 @@ const ViewRolePage = () => {
               </div>
 
               {/* Permissions */}
-              <Permissions sampleData={sampleData} />
+              <div
+                className={`${editRoleStyle.userPermissions} ${activeTab !== "permissions" ? editRoleStyle.hiddenMobile : ""}`}
+              >
+                <div className={editRoleStyle.imanginaryDiv}></div>
+                <Permissions sampleData={sampleData} />
+              </div>
             </div>
           </div>
         </div>
diff --git a/frontend/src/app/roles/[rolesId]/styles.module.css b/frontend/src/app/roles/[rolesId]/styles.module.css
index 7b9424a..91531f3 100644
--- a/frontend/src/app/roles/[rolesId]/styles.module.css
+++ b/frontend/src/app/roles/[rolesId]/styles.module.css
@@ -1,4 +1,4 @@
-.addRoleContainer {
+.editRoleContainer {
   display: flex;
   padding: 0px 144px 0px 144px;
   align-items: flex-start;
@@ -13,7 +13,7 @@
   flex: 1 0 0;
   align-self: stretch;
 }
-.userDetails {
+.roleDetails {
   display: flex;
   width: 400px;
   padding: 20px 24px 48px 24px;
@@ -23,6 +23,21 @@
   border-radius: 6px;
   background: #1d1e2a;
 }
+.imanginaryDiv {
+  padding: 18px;
+}
+.userPermissions {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  flex: 1 0 0;
+  align-self: stretch;
+  height: calc(100vh - 175px);
+  position: relative;
+  overflow-y: auto;
+  scrollbar-width: none;
+  padding-bottom: 60px;
+}
 .header {
   display: flex;
   padding-bottom: 24px;
@@ -93,6 +108,36 @@
   align-self: stretch;
 }
 
-.imanginaryDiv {
-  padding: 18px;
+@media (max-width: 950px) {
+  .hiddenMobile {
+    display: none;
+  }
+  .editRoleContainer {
+    align-self: stretch;
+    padding: 0 16px;
+    flex-direction: column;
+    gap: 0px;
+  }
+  .imanginaryDiv {
+    padding: 5px;
+  }
+  .header {
+    display: none;
+  }
+  .roleDetails {
+    background: none;
+    padding: 0px 0px 0px 0px;
+    margin-top: 32x;
+  }
+
+  .userPermissions {
+    height: calc(100vh - 295px);
+  }
+}
+@media (max-width: 768px) {
+  .roleDetails {
+    background: none;
+    padding: 0px 0px 0px 0px;
+    width: 100%;
+  }
 }
diff --git a/frontend/src/app/roles/add/page.jsx b/frontend/src/app/roles/add/page.jsx
index 0858539..1e5e91d 100644
--- a/frontend/src/app/roles/add/page.jsx
+++ b/frontend/src/app/roles/add/page.jsx
@@ -1,5 +1,5 @@
 "use client";
-import React from "react";
+import React, { useState } from "react";
 import TopHeader from "@/app/components/topHeader/TopHeader";
 import globalStyle from "../../globalStyle.module.css";
 import addRoleStyle from "./styles.module.css";
@@ -7,8 +7,11 @@ import TextField from "@/app/components/fields/textfield";
 import Permissions from "@/app/components/permissions/Permissions";
 import useUserForm from "@/app/hooks/useUserForm";
 import Alert from "@/app/components/alerts/Alert";
+import Toggle from "@/app/components/mobileToggleTab/Toggle";
 
 const AddRolePage = () => {
+  // Mobile
+  const [activeTab, setActiveTab] = useState("details");
   const {
     register,
     handleSubmit,
@@ -36,30 +39,36 @@ const AddRolePage = () => {
             requiredButtons={["title", "save"]}
           />
           <div className={addRoleStyle.addRoleContainer}>
+            <Toggle
+              activeTab={activeTab}
+              onChange={setActiveTab}
+              tabs={[
+                { label: "Role Details", value: "details" },
+                { label: "Permissions", value: "permissions" },
+              ]}
+            />
             {/* Input fields Container  */}
             <div className={addRoleStyle.inputFieldContainer}>
               {/* User Details */}
-              <div className={addRoleStyle.roleDetails}>
-                {/* Header */}
+              <div
+                className={`${addRoleStyle.roleDetails} ${activeTab !== "details" ? addRoleStyle.hiddenMobile : ""}`}
+              >
                 <div className={addRoleStyle.header}>
                   <div>
                     <p>Role Details</p>
                   </div>
                 </div>
-                {/* Input fields */}
+                {/* Ibalhin ning form na tag */}
                 <form
                   className={addRoleStyle.fields}
                   id="form"
                   onSubmit={handleSubmit(onSubmit)}
                 >
-                  {/* Email */}
                   <div className={addRoleStyle.inputMainContainer}>
                     <div className={addRoleStyle.inputContainer}>
-                      {/* Label */}
                       <div className={addRoleStyle.label}>
                         <p>Name</p>
                       </div>
-                      {/* Input field */}
                       <div className={addRoleStyle.inputField}>
                         <TextField
                           placeHolder="Enter name"
@@ -69,14 +78,11 @@ const AddRolePage = () => {
                       </div>
                     </div>
                   </div>
-                  {/* Full Name */}
                   <div className={addRoleStyle.inputMainContainer}>
                     <div className={addRoleStyle.inputContainer}>
-                      {/* Label */}
                       <div className={addRoleStyle.label}>
                         <p>Organization ID</p>
                       </div>
-                      {/* Input field */}
                       <div className={addRoleStyle.inputField}>
                         <TextField
                           placeHolder="Enter organization ID"
@@ -90,7 +96,12 @@ const AddRolePage = () => {
               </div>
 
               {/* Permissions */}
-              <Permissions />
+              <div
+                className={`${addRoleStyle.userPermissions} ${activeTab !== "permissions" ? addRoleStyle.hiddenMobile : ""}`}
+              >
+                <div className={addRoleStyle.imanginaryDiv}></div>
+                <Permissions />
+              </div>
             </div>
           </div>
         </div>
diff --git a/frontend/src/app/roles/add/styles.module.css b/frontend/src/app/roles/add/styles.module.css
index 197be8b..485a278 100644
--- a/frontend/src/app/roles/add/styles.module.css
+++ b/frontend/src/app/roles/add/styles.module.css
@@ -22,7 +22,21 @@
   align-items: flex-start;
   border-radius: 6px;
   background: #1d1e2a;
-  background: color(display-p3 0.1137 0.1176 0.1608);
+}
+.imanginaryDiv {
+  padding: 18px;
+}
+.userPermissions {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  flex: 1 0 0;
+  align-self: stretch;
+  height: calc(100vh - 175px);
+  position: relative;
+  overflow: auto;
+  scrollbar-width: none;
+  padding-bottom: 60px;
 }
 .header {
   display: flex;
@@ -42,7 +56,6 @@
 .header > div > p {
   width: 163px;
   color: #d2d3e1;
-  color: color(display-p3 0.8235 0.8275 0.8784);
   font-family: Inter;
   font-size: 20px;
   font-style: normal;
@@ -79,7 +92,6 @@
 }
 .label > p {
   color: #d2d3e1;
-  color: color(display-p3 0.8235 0.8275 0.8784);
   font-family: Inter;
   font-size: 16px;
   font-style: normal;
@@ -93,6 +105,35 @@
   gap: 8px;
   align-self: stretch;
 }
-.imanginaryDiv {
-  padding: 18px;
+@media (max-width: 950px) {
+  .hiddenMobile {
+    display: none;
+  }
+  .addRoleContainer {
+    align-self: stretch;
+    padding: 0 16px;
+    flex-direction: column;
+    gap: 0px;
+  }
+  .imanginaryDiv {
+    padding: 5px;
+  }
+  .header {
+    display: none;
+  }
+  .roleDetails {
+    background: none;
+    padding: 0px 0px 0px 0px;
+    margin-top: 32px;
+  }
+  .userPermissions {
+    height: calc(100vh - 295px);
+  }
+}
+@media (max-width: 768px) {
+  .roleDetails {
+    background: none;
+    padding: 0px 0px 0px 0px;
+    width: 100%;
+  }
 }
diff --git a/frontend/src/app/users/[usersId]/page.jsx b/frontend/src/app/users/[usersId]/page.jsx
index 7b79a2b..59bf357 100644
--- a/frontend/src/app/users/[usersId]/page.jsx
+++ b/frontend/src/app/users/[usersId]/page.jsx
@@ -7,6 +7,7 @@ import { useState } from "react";
 import TextField from "@/app/components/fields/textfield";
 import SelectField from "@/app/components/select/SelectField";
 import Permissions from "@/app/components/permissions/Permissions";
+import Toggle from "@/app/components/mobileToggleTab/Toggle";
 
 const ViewUserPage = () => {
   const sampleData = [
@@ -26,6 +27,9 @@ const ViewUserPage = () => {
     { permission: "service.update" },
   ];
 
+  // Mobile
+  const [activeTab, setActiveTab] = useState("details");
+
   return (
     <div className={globalStyle.section}>
       <div className={globalStyle.mainContainer}>
@@ -36,12 +40,22 @@ const ViewUserPage = () => {
             state="view"
             requiredButtons={["back", "title", "edit", "download"]}
           />
-          <div className={editUserStyle.addUserContainer}>
+          <div className={editUserStyle.editUserContainer}>
+            {/* Mobile Toggle */}
+            <Toggle
+              activeTab={activeTab}
+              onChange={setActiveTab}
+              tabs={[
+                { label: "User Details", value: "details" },
+                { label: "Permissions", value: "permissions" },
+              ]}
+            />
             {/* Input fields Container  */}
             <div className={editUserStyle.inputFieldContainer}>
               {/* User Details */}
-              <div className={editUserStyle.userDetails}>
-                {/* Header */}
+              <div
+                className={`${editUserStyle.userDetails} ${activeTab !== "details" ? editUserStyle.hiddenMobile : ""}`}
+              >
                 <div className={editUserStyle.header}>
                   <div>
                     <p>User Details</p>
@@ -61,10 +75,8 @@ const ViewUserPage = () => {
                       ]}
                     />
                   </div>
-                  {/* Email */}
                   <div className={editUserStyle.inputMainContainer}>
                     <div className={editUserStyle.inputContainer}>
-                      {/* Label */}
                       <div className={editUserStyle.label}>
                         <p>Email</p>
                         {/* <p className={editUserStyle.optionalTxt}>(Optional)</p> */}
@@ -98,7 +110,12 @@ const ViewUserPage = () => {
                 </form>
               </div>
               {/* Permissions */}
-              <Permissions sampleData={sampleData} />
+              <div
+                className={`${editUserStyle.userPermissions} ${activeTab !== "permissions" ? editUserStyle.hiddenMobile : ""}`}
+              >
+                <div className={editUserStyle.imanginaryDiv}></div>
+                <Permissions sampleData={sampleData} />
+              </div>
             </div>
           </div>
         </div>
diff --git a/frontend/src/app/users/[usersId]/styles.module.css b/frontend/src/app/users/[usersId]/styles.module.css
index 03a1dc2..4947edc 100644
--- a/frontend/src/app/users/[usersId]/styles.module.css
+++ b/frontend/src/app/users/[usersId]/styles.module.css
@@ -1,11 +1,11 @@
-.addUserContainer {
+.editUserContainer {
   display: flex;
   padding: 0px 144px 0 144px;
-  align-items: flex-start;
+  /* align-items: flex-start; */
   gap: 24px;
   flex: 1 0 0;
   align-self: stretch;
-  position: relative;
+  /* position: relative; */
 }
 .inputFieldContainer {
   display: flex;
@@ -24,6 +24,22 @@
   border-radius: 6px;
   background: #1d1e2a;
 }
+
+.imanginaryDiv {
+  padding: 18px;
+}
+.userPermissions {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  flex: 1 0 0;
+  align-self: stretch;
+  height: calc(100vh - 175px);
+  position: relative;
+  overflow-y: auto;
+  scrollbar-width: none;
+  padding-bottom: 60px;
+}
 .header {
   display: flex;
   padding-bottom: 24px;
@@ -42,7 +58,6 @@
 .header > div > p {
   width: 163px;
   color: #d2d3e1;
-  color: color(display-p3 0.8235 0.8275 0.8784);
   font-family: Inter;
   font-size: 20px;
   font-style: normal;
@@ -113,6 +128,37 @@
   gap: 8px;
   align-self: stretch;
 }
-.imanginaryDiv {
-  padding: 18px;
+
+@media (max-width: 950px) {
+  .hiddenMobile {
+    display: none;
+  }
+  .editUserContainer {
+    align-self: stretch;
+    padding: 0 16px;
+    flex-direction: column;
+    gap: 0px;
+  }
+  .imanginaryDiv {
+    padding: 5px;
+  }
+  .header {
+    display: none;
+  }
+  .userDetails {
+    background: none;
+    padding: 0px 0px 0px 0px;
+    margin-top: 32x;
+  }
+
+  .userPermissions {
+    height: calc(100vh - 295px);
+  }
+}
+@media (max-width: 768px) {
+  .userDetails {
+    background: none;
+    padding: 0px 0px 0px 0px;
+    width: 100%;
+  }
 }
diff --git a/frontend/src/app/users/add/page.jsx b/frontend/src/app/users/add/page.jsx
index 44cd0dc..bb40f7c 100644
--- a/frontend/src/app/users/add/page.jsx
+++ b/frontend/src/app/users/add/page.jsx
@@ -11,6 +11,8 @@ import Alert from "@/app/components/alerts/Alert";
 import Toggle from "@/app/components/mobileToggleTab/Toggle";
 
 const AddUserPage = () => {
+  // Mobile
+  const [activeTab, setActiveTab] = useState("details");
   const {
     register,
     handleSubmit,
@@ -20,9 +22,6 @@ const AddUserPage = () => {
     setTriggerAlert,
   } = useUserForm();
 
-  // Mobile
-  const [activeTab, setActiveTab] = useState("details");
-
   return (
     <div className={globalStyle.section}>
       {triggerAlert && (
@@ -69,7 +68,6 @@ const AddUserPage = () => {
                   id="form"
                   onSubmit={handleSubmit(onSubmit)}
                 >
-                  {/* Role and Dropdown */}
                   <div className={addUserStyle.roleField}>
                     <p>Role</p>
                     <SelectField
diff --git a/frontend/src/app/users/add/styles.module.css b/frontend/src/app/users/add/styles.module.css
index 0bab896..862cb40 100644
--- a/frontend/src/app/users/add/styles.module.css
+++ b/frontend/src/app/users/add/styles.module.css
@@ -33,11 +33,11 @@
   align-items: flex-start;
   flex: 1 0 0;
   align-self: stretch;
-  border-radius: 6px;
   height: calc(100vh - 175px);
   position: relative;
   overflow: auto;
   scrollbar-width: none;
+  padding-bottom: 60px;
 }
 .header {
   display: flex;
@@ -122,18 +122,22 @@
     align-self: stretch;
     padding: 0 16px;
     flex-direction: column;
-    gap: 16px;
+    gap: 0px;
+  }
+  .imanginaryDiv {
+    padding: 5px;
   }
   .header {
     display: none;
   }
+
   .userDetails {
     background: none;
     padding: 0px 0px 0px 0px;
-    margin-top: 16px;
+    margin-top: 32px;
   }
-  .imanginaryDiv {
-    display: none;
+  .userPermissions {
+    height: calc(100vh - 295px);
   }
 }
 @media (max-width: 768px) {

From cc2a18c4d72063f2ccc0f19d29538228693ced7f Mon Sep 17 00:00:00 2001
From: benzbarquilla <benzzbarquilla@gmail.com>
Date: Tue, 24 Mar 2026 17:04:16 +0800
Subject: [PATCH 4/4] done credentials and agents mobile/responsive need review

---
 frontend/src/app/agents/[agentsId]/page.jsx   |  5 +-
 .../app/agents/[agentsId]/styles.module.css   | 54 +++++++++++++++++--
 frontend/src/app/agents/add/page.jsx          |  6 ++-
 frontend/src/app/agents/add/styles.module.css | 49 +++++++++++++++++
 .../customCheckbox/styles.module.css          |  2 -
 frontend/src/app/credentials/add/page.jsx     | 14 +++--
 .../src/app/credentials/add/styles.module.css | 37 +++++++++----
 .../src/app/roles/[rolesId]/styles.module.css |  2 -
 frontend/src/app/roles/add/page.jsx           |  2 +-
 9 files changed, 146 insertions(+), 25 deletions(-)

diff --git a/frontend/src/app/agents/[agentsId]/page.jsx b/frontend/src/app/agents/[agentsId]/page.jsx
index bf6644d..06e1fa7 100644
--- a/frontend/src/app/agents/[agentsId]/page.jsx
+++ b/frontend/src/app/agents/[agentsId]/page.jsx
@@ -9,10 +9,13 @@ import Prompts from "@/app/components/prompts/Prompts";
 import useAgentForm from "@/app/hooks/useAgentForm";
 import Alert from "@/app/components/alerts/Alert";
 import Checkbox from "@/app/components/customCheckbox/Checkbox";
+import useIsMobile from "@/app/hooks/useIsMobile";
 
 const ViewAgentPage = () => {
   const [useVpn, setUseVpn] = useState(false);
   const [enableLoki, setEnableLoki] = useState(false);
+  const isMobile = useIsMobile();
+
   const {
     register,
     handleSubmit,
@@ -50,7 +53,7 @@ const ViewAgentPage = () => {
                 {/* AGENT FORM */}
                 <div className={createAgentStyle.headerContainer}>
                   <div className={createAgentStyle.headerTxt}>
-                    <p>Agent Details</p>
+                    {isMobile ? "" : <p>Agent Details</p>}
                   </div>
                 </div>
                 <div className={createAgentStyle.inputContainer}>
diff --git a/frontend/src/app/agents/[agentsId]/styles.module.css b/frontend/src/app/agents/[agentsId]/styles.module.css
index 14d5251..747bd53 100644
--- a/frontend/src/app/agents/[agentsId]/styles.module.css
+++ b/frontend/src/app/agents/[agentsId]/styles.module.css
@@ -6,7 +6,6 @@
   flex: 1 0 0;
   align-self: stretch;
 }
-
 .createAgentContainer {
   display: flex;
   justify-content: center;
@@ -30,7 +29,7 @@
 .headerContainer {
   display: flex;
   align-items: flex-start;
-  gap: 17px;
+  gap: 50px;
   align-self: stretch;
 }
 .headerContainer > div {
@@ -66,7 +65,6 @@
 }
 .labelContainer > p {
   color: #d2d3e1;
-  color: color(display-p3 0.8235 0.8275 0.8784);
   font-family: Inter;
   font-size: 16px;
   font-style: normal;
@@ -80,9 +78,59 @@
 
 .lokiContainer {
   display: flex;
+  width: 100%;
   width: 548px;
   padding: 24px;
   flex-direction: column;
   align-items: flex-start;
   gap: 24px;
 }
+
+@media (max-width: 1024px) {
+  .createAgentContainer {
+    display: flex;
+    padding: 16px 16px; /*did some math 32 ang orig top*/
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: flex-start;
+    gap: 24px;
+    height: calc(100vh - 100px - 60px);
+    align-self: stretch;
+  }
+  .div {
+    display: none;
+  }
+  .inputMainContainer {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 16px;
+    padding: 0px;
+    /* align-self: stretch;   */
+  }
+  .lokiContainer {
+    display: flex;
+    gap: 16px;
+    align-self: stretch;
+    border-radius: 8px;
+    width: 500px;
+    padding: 24px 0 0 0;
+  }
+}
+
+@media (max-width: 768px) {
+  .inputMainContainer {
+    align-self: stretch;
+    width: 100%;
+  }
+  .lokiContainer {
+    width: 100%;
+  }
+  .inputContainer {
+    width: 100%;
+  }
+  .headerTxt > p {
+    font-size: 16px;
+    font-weight: 400;
+  }
+}
diff --git a/frontend/src/app/agents/add/page.jsx b/frontend/src/app/agents/add/page.jsx
index d361fdc..fda12c8 100644
--- a/frontend/src/app/agents/add/page.jsx
+++ b/frontend/src/app/agents/add/page.jsx
@@ -9,10 +9,12 @@ import Prompts from "@/app/components/prompts/Prompts";
 import useAgentForm from "@/app/hooks/useAgentForm";
 import Alert from "@/app/components/alerts/Alert";
 import Checkbox from "@/app/components/customCheckbox/Checkbox";
+import useIsMobile from "@/app/hooks/useIsMobile";
 
 const AddAgentPage = () => {
   const [useVpn, setUseVpn] = useState(false);
   const [enableLoki, setEnableLoki] = useState(false);
+  const isMobile = useIsMobile();
   const {
     register,
     handleSubmit,
@@ -40,7 +42,7 @@ const AddAgentPage = () => {
             state="add"
             requiredButtons={["title", "save"]}
           />
-          <TopToolTip />
+          {isMobile ? "" : <TopToolTip />}
           {/* Create agent Container */}
           <form
             className={createAgentStyle.formContainer}
@@ -52,7 +54,7 @@ const AddAgentPage = () => {
                 {/* AGENT FORM */}
                 <div className={createAgentStyle.headerContainer}>
                   <div className={createAgentStyle.headerTxt}>
-                    <p>Agent Details</p>
+                    {isMobile ? "" : <p>Agent Details</p>}
                   </div>
                 </div>
                 <div className={createAgentStyle.inputContainer}>
diff --git a/frontend/src/app/agents/add/styles.module.css b/frontend/src/app/agents/add/styles.module.css
index b0b46f1..0814210 100644
--- a/frontend/src/app/agents/add/styles.module.css
+++ b/frontend/src/app/agents/add/styles.module.css
@@ -79,3 +79,52 @@
   align-items: flex-start;
   gap: 24px;
 }
+
+@media (max-width: 1024px) {
+  .createAgentContainer {
+    display: flex;
+    padding: 16px 16px; /*did some math 32 ang orig top*/
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: flex-start;
+    height: calc(100vh - 100px - 5px - 50px);
+    gap: 24px;
+    align-self: stretch;
+  }
+  .div {
+    display: none;
+  }
+  .inputMainContainer {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 16px;
+    padding: 0px;
+    /* align-self: stretch;   */
+  }
+  .lokiContainer {
+    display: flex;
+    gap: 16px;
+    align-self: stretch;
+    border-radius: 8px;
+    width: 500px;
+    padding: 24px 0 0 0;
+  }
+}
+
+@media (max-width: 768px) {
+  .inputMainContainer {
+    align-self: stretch;
+    width: 100%;
+  }
+  .lokiContainer {
+    width: 100%;
+  }
+  .inputContainer {
+    width: 100%;
+  }
+  .headerTxt > p {
+    font-size: 16px;
+    font-weight: 400;
+  }
+}
diff --git a/frontend/src/app/components/customCheckbox/styles.module.css b/frontend/src/app/components/customCheckbox/styles.module.css
index e400c14..ad898f2 100644
--- a/frontend/src/app/components/customCheckbox/styles.module.css
+++ b/frontend/src/app/components/customCheckbox/styles.module.css
@@ -19,7 +19,6 @@
   flex: 1 0 0;
   border-radius: var(--Basic-Forms-Checkbox-Border-Radius, 8px);
   background: #1d1e2a;
-  background: color(display-p3 0.1137 0.1176 0.1608);
 }
 .check {
   display: flex;
@@ -85,7 +84,6 @@
 .placeholderTxt {
   align-self: stretch;
   color: #d2d3e1;
-  color: color(display-p3 0.8235 0.8275 0.8784);
   font-family: Inter;
   font-size: 16px;
   font-style: normal;
diff --git a/frontend/src/app/credentials/add/page.jsx b/frontend/src/app/credentials/add/page.jsx
index ebe2109..8c3fb85 100644
--- a/frontend/src/app/credentials/add/page.jsx
+++ b/frontend/src/app/credentials/add/page.jsx
@@ -8,6 +8,7 @@ import TextField from "@/app/components/fields/textfield";
 import Prompts from "@/app/components/prompts/Prompts";
 import useRoleForm from "@/app/hooks/useRolesForm";
 import Alert from "@/app/components/alerts/Alert";
+import useIsMobile from "@/app/hooks/useIsMobile";
 
 const AddCredentialPage = () => {
   const {
@@ -18,7 +19,10 @@ const AddCredentialPage = () => {
     triggerAlert,
     setTriggerAlert,
   } = useRoleForm();
+
   const [selectedFile, setSelectedFile] = useState(null);
+  const isMobile = useIsMobile();
+
   // Click
   const handleFileChange = (e) => {
     const file = e.target.files[0];
@@ -27,6 +31,7 @@ const AddCredentialPage = () => {
       console.log(file); //send this to backend later
     }
   };
+
   // Drag/Drop
   const handleDrop = (e) => {
     e.preventDefault();
@@ -39,6 +44,7 @@ const AddCredentialPage = () => {
   const handleDragOver = (e) => {
     e.preventDefault();
   };
+
   return (
     <div className={globalStyle.section}>
       {triggerAlert && (
@@ -59,7 +65,7 @@ const AddCredentialPage = () => {
           />
           {/* Create Crediantial Container */}
           <div className={createCredStyle.createCredContainer}>
-            <TopToolTip />
+            {isMobile ? "" : <TopToolTip />}
             <form
               className={createCredStyle.inputFieldContainer}
               id="form"
@@ -81,13 +87,11 @@ const AddCredentialPage = () => {
                   <Prompts show={false} />
                 </div>
               </div>
-              {/* Upload File */}
               <div className={createCredStyle.uploadFile}>
-                {/* Label */}
                 <div className={createCredStyle.label}>
-                  <p>Upload File</p>
+                  <p className={createCredStyle.labelTxt}>Upload File</p>
                   {/* Optional or Required */}
-                  <p className={createCredStyle.optionalTxt}>(Optional)</p>{" "}
+                  {/* <p className={createCredStyle.optionalTxt}>(Optional)</p>{" "} */}
                 </div>
                 {/* Upload File */}
                 <label
diff --git a/frontend/src/app/credentials/add/styles.module.css b/frontend/src/app/credentials/add/styles.module.css
index 7ddf20b..803f263 100644
--- a/frontend/src/app/credentials/add/styles.module.css
+++ b/frontend/src/app/credentials/add/styles.module.css
@@ -22,6 +22,7 @@
   flex-direction: column;
   align-items: flex-start;
   gap: 12px;
+  align-self: stretch;
 }
 .label {
   display: flex;
@@ -31,7 +32,6 @@
 }
 .labelTxt {
   color: #d2d3e1;
-  color: color(display-p3 0.8235 0.8275 0.8784);
   font-family: Inter;
   font-size: 16px;
   font-style: normal;
@@ -60,9 +60,8 @@
 }
 .label > .optionalTxt {
   color: #85869b;
-  color: color(display-p3 0.5216 0.5255 0.6);
   font-family: Inter;
-  font-size: 16 px;
+  font-size: 16px;
   font-style: normal;
   font-weight: 300;
   line-height: normal;
@@ -77,22 +76,18 @@
   gap: 10px;
   align-self: stretch;
   border-radius: 4px;
-  border: 1px dashed #5980f1;
-  border: 2px dashed color(display-p3 0.3804 0.4959 0.9137);
+  border: 2px dashed #5980f1;
   cursor: pointer;
 }
 .upload:hover {
   background: rgba(129, 135, 255, 0.25);
-  background: color(display-p3 0.5098 0.5294 1 / 0.25);
 }
 .upload:hover .chooseTxt {
   color: #fff;
-  color: color(display-p3 1 1 1);
 }
 
 .chooseTxt {
   color: #5980f1;
-  color: color(display-p3 0.3804 0.4959 0.9137);
   text-align: center;
   font-family: Inter;
   font-size: 16px;
@@ -104,7 +99,6 @@
 
 .dragTxt {
   color: #85869b;
-  color: color(display-p3 0.5216 0.5255 0.6);
   text-align: center;
   font-family: Inter;
   font-size: 14px;
@@ -113,3 +107,28 @@
   line-height: normal;
   align-self: stretch;
 }
+
+/* Mobile */
+@media (max-width: 768px) {
+  .createCredContainer {
+    padding: 32px 16px 0 16px;
+    align-items: flex-start;
+    gap: 16px;
+  }
+
+  .inputFieldContainer {
+    display: flex;
+    align-items: flex-start;
+    padding: 0px;
+    gap: 24px;
+    align-self: stretch;
+  }
+
+  .projectName {
+    width: 100%;
+  }
+
+  .upload {
+    height: 100px;
+  }
+}
diff --git a/frontend/src/app/roles/[rolesId]/styles.module.css b/frontend/src/app/roles/[rolesId]/styles.module.css
index 91531f3..e0ad4b9 100644
--- a/frontend/src/app/roles/[rolesId]/styles.module.css
+++ b/frontend/src/app/roles/[rolesId]/styles.module.css
@@ -56,7 +56,6 @@
 .header > div > p {
   width: 163px;
   color: #d2d3e1;
-  color: color(display-p3 0.8235 0.8275 0.8784);
   font-family: Inter;
   font-size: 20px;
   font-style: normal;
@@ -93,7 +92,6 @@
 }
 .label > p {
   color: #d2d3e1;
-  color: color(display-p3 0.8235 0.8275 0.8784);
   font-family: Inter;
   font-size: 16px;
   font-style: normal;
diff --git a/frontend/src/app/roles/add/page.jsx b/frontend/src/app/roles/add/page.jsx
index 1e5e91d..727791f 100644
--- a/frontend/src/app/roles/add/page.jsx
+++ b/frontend/src/app/roles/add/page.jsx
@@ -71,7 +71,7 @@ const AddRolePage = () => {
                       </div>
                       <div className={addRoleStyle.inputField}>
                         <TextField
-                          placeHolder="Enter name"
+                          placeHolder="Enter role name"
                           {...register("roleName", { required: true })}
                           hasError={!!errors.roleName}
                         />