done users and roles page responsive view review nalang ang polish

2026-03-19 16:27:37 +08:00
parent 8c776a5491
commit c9d5faebb0
12 changed files with 262 additions and 85 deletions
--- 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}>
+          <div className={styles.searchBar}>
            <MobileSearchBar />
+          </div>
+
          <button>
            <PlusIcon />
          </button>
--- 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;
--- 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) => {
+          <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>
    </>
  );
--- 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;
--- 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,12 +88,17 @@ const ViewRolePage = () => {
              </div>

              {/* Permissions */}
+              <div
+                className={`${editRoleStyle.userPermissions} ${activeTab !== "permissions" ? editRoleStyle.hiddenMobile : ""}`}
+              >
+                <div className={editRoleStyle.imanginaryDiv}></div>
                <Permissions sampleData={sampleData} />
              </div>
            </div>
          </div>
        </div>
      </div>
+    </div>
  );
 };

--- 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%;
+  }
 }
--- 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,12 +96,17 @@ const AddRolePage = () => {
              </div>

              {/* Permissions */}
+              <div
+                className={`${addRoleStyle.userPermissions} ${activeTab !== "permissions" ? addRoleStyle.hiddenMobile : ""}`}
+              >
+                <div className={addRoleStyle.imanginaryDiv}></div>
                <Permissions />
              </div>
            </div>
          </div>
        </div>
      </div>
+    </div>
  );
 };

--- 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%;
+  }
 }
--- 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,12 +110,17 @@ const ViewUserPage = () => {
                </form>
              </div>
              {/* Permissions */}
+              <div
+                className={`${editUserStyle.userPermissions} ${activeTab !== "permissions" ? editUserStyle.hiddenMobile : ""}`}
+              >
+                <div className={editUserStyle.imanginaryDiv}></div>
                <Permissions sampleData={sampleData} />
              </div>
            </div>
          </div>
        </div>
      </div>
+    </div>
  );
 };

--- 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%;
+  }
 }
--- 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
--- 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) {