done users and roles page responsive view review nalang ang polish

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>