done searchbar but not final

frontend/src/app/agents/[agentsId]/page.jsx

@@ -6,97 +6,193 @@ import TopToolTip from "@/app/components/topToolTip/TopToolTip";
 import globalStyle from "../../globalStyle.module.css";
 import createAgentStyle from "./styles.module.css";
 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 [isChecked, setIsChecked] = useState(false);
+  const [useVpn, setUseVpn] = useState(false);
+  const [enableLoki, setEnableLoki] = useState(false);
+  const isMobile = useIsMobile();
 
-  const handleCheckboxChange = (e) => {
+  const {
-    setIsChecked(e.target.checked);
+    register,
-  };
+    handleSubmit,
+    errors,
+    onSubmit,
+    triggerAlert,
+    setTriggerAlert,
+  } = useAgentForm();
 
   return (
     <div className={globalStyle.section}>
+      {triggerAlert && (
+        <Alert
+          setTriggerAlert={setTriggerAlert}
+          onClick={() => setEditState(true)}
+          title="Create New Agent"
+        />
+      )}
       <div className={globalStyle.mainContainer}>
         <div className={globalStyle.container}>
           <TopHeader
-            buttonText="Save"
+            topbarTitle="View Agent"
-            cancelButtonText="Cancel"
-            topbarTitle="Update Agent"
             state="add"
-            requiredButtons={["update", "title"]}
+            requiredButtons={["edit", "back"]}
           />
           {/* Create agent Container */}
+          <form
+            className={createAgentStyle.formContainer}
+            id="form"
+            onSubmit={handleSubmit(onSubmit)}
+          >
             <div className={createAgentStyle.createAgentContainer}>
-            <TopToolTip />
+              <div className={createAgentStyle.div}></div>
               <div className={createAgentStyle.inputMainContainer}>
-              {/* Header */}
+                {/* AGENT FORM */}
                 <div className={createAgentStyle.headerContainer}>
                   <div className={createAgentStyle.headerTxt}>
-                  <p>Agent Details</p>
+                    {isMobile ? "" : <p>Agent Details</p>}
                   </div>
                 </div>
-              {/* Agent name input */}
                 <div className={createAgentStyle.inputContainer}>
-                {/* Label */}
                   <div className={createAgentStyle.labelContainer}>
                     <p>Agent Name</p>
                     {/* <p className={createAgentStyle.required}>*</p> */}
                   </div>
-                {/* Input Field */}
+                  <TextField
-                <TextField placeHolder="Enter agent name" />
+                    placeHolder="Enter agent name"
+                    {...register("agentName", { required: true })}
+                    hasError={!!errors.agentName}
+                  />
                   <Prompts show={false} />
                 </div>
-              {/* Kubernetes API input */}
                 <div className={createAgentStyle.inputContainer}>
-                {/* Label */}
                   <div className={createAgentStyle.labelContainer}>
                     <p>Kubernetes API Proxy Name</p>
                     {/* <p className={createAgentStyle.required}>*</p> */}
                   </div>
-                {/* Input Field */}
+                  <TextField
-                <TextField placeHolder="Enter proxy name" />
+                    placeHolder="Enter proxy name"
+                    {...register("proxyName", { required: true })}
+                    hasError={!!errors.proxyName}
+                  />
                   <Prompts show={false} />
                 </div>
-              {/* Checkbox */}
+                <Checkbox
-              <div className={createAgentStyle.checkboxMainContainer}>
+                  checked={useVpn}
-                <div className={createAgentStyle.checkboxContainer}>
+                  onChange={(e) => setUseVpn(e.target.checked)}
-                  <div className={createAgentStyle.checkbox}>
+                  label="Use Tailscale VPN"
-                    {/* Checkbox */}
+                  description={
-                    <div className={createAgentStyle.check}>
+                    <>
-                      <input
-                        type="checkbox"
-                        checked={isChecked}
-                        onChange={handleCheckboxChange}
-                        className={createAgentStyle.hiddenCheckbox}
-                      />
-                    </div>
-                    {/* List */}
-                    <div className={createAgentStyle.list}>
-                      <p className={createAgentStyle.placeholderTxt}>
-                        Use Tailscale VPN
-                      </p>
-                      <p className={createAgentStyle.secondaryTxt}>
                       Enable Tailscale for secure private networking. When
-                        enabled, <br /> the endpoint will be automatically
+                      enabled, <br />
-                        resolved from Tailscale.
+                      the endpoint will be automatically resolved from
-                      </p>
+                      Tailscale.
-                    </div>
+                    </>
-                  </div>
+                  }
-                </div>
+                />
-              </div>
+                {useVpn ? (
-              {/* Agent endpoint */}
+                  <>
                     <div className={createAgentStyle.inputContainer}>
-                {/* Label */}
+                      <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.agentInputContainer}>
                     <div className={createAgentStyle.labelContainer}>
                       <p>Agent Endpoint</p>
-                  {/* <p className={createAgentStyle.required}>*</p> */}
+                      <p className={createAgentStyle.required}>*</p>
                     </div>
-                {/* Input Field */}
+                    <TextField
-                <TextField placeHolder="e.g., http://agent-01.example.com:8080" />
+                      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}>
+                <div className={createAgentStyle.headerContainer}>
+                  <div className={createAgentStyle.headerTxt}>
+                    <p>Loki Integration (Optional)</p>
                   </div>
                 </div>
+                <Checkbox
+                  checked={enableLoki}
+                  onChange={(e) => setEnableLoki(e.target.checked)}
+                  label="Enable Loki Logging"
+                  description="Configure Loki for centralized logging and log streaming."
+                />
+
+                {enableLoki && (
+                  <>
+                    <div className={createAgentStyle.inputContainer}>
+                      <div className={createAgentStyle.labelContainer}>
+                        <p>Loki Endpoint</p>
+                        {/* <p className={createAgentStyle.required}>*</p> */}
+                      </div>
+                      <TextField
+                        placeHolder="https://loki.project-moonshot.com/"
+                        {...register("endpoint", { required: true })}
+                        hasError={!!errors.endpoint}
+                      />
+                      <Prompts show={false} />
+                    </div>
+                    <div className={createAgentStyle.inputContainer}>
+                      <div className={createAgentStyle.labelContainer}>
+                        <p>Tenant Name</p>
+                        {/* <p className={createAgentStyle.required}>*</p> */}
+                      </div>
+                      <TextField
+                        placeHolder="doks-dev"
+                        {...register("tenantName", { required: true })}
+                        hasError={!!errors.tenantName}
+                      />
+                      <Prompts show={false} />
+                    </div>
+                    <div className={createAgentStyle.inputContainer}>
+                      <div className={createAgentStyle.labelContainer}>
+                        <p>Password</p>
+                        {/* <p className={createAgentStyle.required}>*</p> */}
+                      </div>
+                      <TextField
+                        placeHolder="Enter Password"
+                        {...register("password", { required: true })}
+                        hasError={!!errors.password}
+                      />
+                      <Prompts show={false} />
+                    </div>
+                  </>
+                )}
+              </div>
+            </div>
+          </form>
         </div>
       </div>
     </div>

frontend/src/app/agents/[agentsId]/styles.module.css

@@ -1,11 +1,23 @@
-.createAgentContainer {
+.formContainer {
   display: flex;
   flex-direction: column;
-  align-items: center;
+  align-items: flex-start;
-  gap: 48px;
+  gap: 10px;
   flex: 1 0 0;
   align-self: stretch;
 }
+.createAgentContainer {
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+  align-self: stretch;
+  gap: 16px;
+  flex: 1 1 auto;
+  padding-top: 48px;
+  height: calc(100vh - 100px - 70px);
+  overflow-y: auto;
+  scrollbar-width: none;
+}
 
 .inputMainContainer {
   display: flex;
@@ -13,16 +25,11 @@
   flex-direction: column;
   align-items: flex-start;
   gap: 24px;
-  border-radius: 8px;
-  height: calc(100vh - 260px);
-  position: relative;
-  overflow: auto;
-  scrollbar-width: none;
 }
 .headerContainer {
   display: flex;
   align-items: flex-start;
-  gap: 17px;
+  gap: 50px;
   align-self: stretch;
 }
 .headerContainer > div {
@@ -34,16 +41,17 @@
   flex: 1 0 0;
 }
 .headerTxt > p {
-  width: 163px;
+  /* width: 163px; */
+  align-self: stretch;
   color: #d2d3e1;
-  color: color(display-p3 0.8235 0.8275 0.8784);
   font-family: Inter;
   font-size: 20px;
   font-style: normal;
   font-weight: 500;
   line-height: normal;
 }
-.inputContainer {
+.inputContainer,
+.agentInputContainer {
   display: flex;
   width: 500px;
   flex-direction: column;
@@ -58,7 +66,6 @@
 }
 .labelContainer > p {
   color: #d2d3e1;
-  color: color(display-p3 0.8235 0.8275 0.8784);
   font-family: Inter;
   font-size: 16px;
   font-style: normal;
@@ -70,112 +77,65 @@
   font-weight: 600;
 }
 
-.checkboxMainContainer {
+.lokiContainer {
   display: flex;
+  width: 100%;
+  width: 548px;
+  padding: 24px;
   flex-direction: column;
   align-items: flex-start;
-  gap: 10px;
+  gap: 24px;
-  align-self: stretch;
-}
-.checkboxContainer {
-  display: flex;
-  align-items: flex-start;
-  align-self: stretch;
-}
-.checkbox {
-  display: flex;
-  padding: var(--Basic-Forms-Checkbox-Input-Sizing-Y-SM, 10px)
-    var(--Basic-Forms-Checkbox-Input-Sizing-X-SM, 12px);
-  align-items: flex-start;
-  gap: var(--Basic-Forms-Checkbox-Gap-Between, 16px);
-  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;
-  padding-top: var(--Basic-Forms-Checkbox-Inline-Y, 4px);
-  align-items: flex-start;
-  gap: var(--Basic-Forms-Checkbox-Inline-Gap-Between, 10px);
-}
-.hiddenCheckbox {
-  appearance: none;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  width: 16px;
-  height: 16px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border-radius: var(--Basic-Forms-Checkbox-Check-Icon-Border-Radius, 4px);
-  border: 1px solid
-    var(--Basic-Forms-Checkbox-Check-Icon-Border-Border-Active-Color, #0067fd);
-  border: 1px solid
-    var(
-      --Basic-Forms-Checkbox-Check-Icon-Border-Border-Active-Color,
-      color(display-p3 0.1451 0.3882 0.9216)
-    );
-  cursor: pointer;
-  position: relative;
-}
-.hiddenCheckbox:checked {
-  border-radius: var(--Basic-Forms-Checkbox-Check-Icon-Border-Radius, 4px);
-  border: 1px solid
-    var(--Basic-Forms-Checkbox-Check-Icon-Border-Border-Active-Color, #0067fd);
-  border: 1px solid
-    var(
-      --Basic-Forms-Checkbox-Check-Icon-Border-Border-Active-Color,
-      color(display-p3 0.1451 0.3882 0.9216)
-    );
-  background: var(
-    --Basic-Forms-Checkbox-Check-Icon-Background-Bg-Active-Color,
-    #0067fd
-  );
-  background: var(
-    --Basic-Forms-Checkbox-Check-Icon-Background-Bg-Active-Color,
-    color(display-p3 0.1451 0.3882 0.9216)
-  );
-}
-.hiddenCheckbox::after {
-  content: "";
-  position: absolute;
-  inset: 0;
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='8' viewBox='0 0 11 8' fill='none'%3E%3Cpath d='M9.83333 0.5L3.41667 6.91667L0.5 4' stroke='white' style='stroke:white;stroke-opacity:1;' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
-  background-repeat: no-repeat;
-  background-position: center;
-  opacity: 0;
-}
-.hiddenCheckbox:checked::after {
-  opacity: 1;
 }
 
-.list {
+@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: 4px;
+    gap: 16px;
-  flex: 1 0 0;
+    padding: 0px;
-}
+    /* align-self: stretch;   */
-.placeholderTxt {
+  }
+  .lokiContainer {
+    display: flex;
+    gap: 16px;
     align-self: stretch;
-  color: #d2d3e1;
+    border-radius: 8px;
-  color: color(display-p3 0.8235 0.8275 0.8784);
+    width: 500px;
-  font-family: Inter;
+    padding: 24px 0 0 0;
+  }
+}
+
+@media (max-width: 768px) {
+  .inputMainContainer {
+    align-self: stretch;
+    width: 100%;
+  }
+  .lokiContainer {
+    width: 100%;
+  }
+  .inputContainer,
+  .agentInputContainer {
+    width: 100%;
+  }
+  .agentInputContainer {
+    padding-top: 8px;
+  }
+  .headerTxt > p {
     font-size: 16px;
-  font-style: normal;
+    font-weight: 400;
-  font-weight: 500;
+  }
-  line-height: 24px; /* 150% */
-  letter-spacing: 0.08px;
-}
-.secondaryTxt {
-  align-self: stretch;
-  color: #697281;
-  color: color(display-p3 0.4196 0.4471 0.502);
-  font-family: Inter;
-  font-size: 14px;
-  font-style: normal;
-  font-weight: 500;
-  line-height: 20px; /* 142.857% */
-  letter-spacing: 0.07px;
 }

frontend/src/app/agents/add/page.jsx

@@ -8,13 +8,13 @@ import createAgentStyle from "./styles.module.css";
 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 [isChecked, setIsChecked] = useState(false);
+  const [useVpn, setUseVpn] = useState(false);
-
+  const [enableLoki, setEnableLoki] = useState(false);
-  const handleCheckboxChange = (e) => {
+  const isMobile = useIsMobile();
-    setIsChecked(e.target.checked);
-  };
   const {
     register,
     handleSubmit,
@@ -42,28 +42,26 @@ const AddAgentPage = () => {
             state="add"
             requiredButtons={["title", "save"]}
           />
+          {isMobile ? "" : <TopToolTip />}
           {/* Create agent Container */}
-          <div className={createAgentStyle.createAgentContainer}>
-            <TopToolTip />
           <form
-              className={createAgentStyle.inputMainContainer}
+            className={createAgentStyle.formContainer}
             id="form"
             onSubmit={handleSubmit(onSubmit)}
           >
-              {/* Header */}
+            <div className={createAgentStyle.createAgentContainer}>
+              <div className={createAgentStyle.inputMainContainer}>
+                {/* AGENT FORM */}
                 <div className={createAgentStyle.headerContainer}>
                   <div className={createAgentStyle.headerTxt}>
-                  <p>Agent Details</p>
+                    {isMobile ? "" : <p>Agent Details</p>}
                   </div>
                 </div>
-              {/* Agent name input */}
                 <div className={createAgentStyle.inputContainer}>
-                {/* Label */}
                   <div className={createAgentStyle.labelContainer}>
                     <p>Agent Name</p>
                     <p className={createAgentStyle.required}>*</p>
                   </div>
-                {/* Input Field */}
                   <TextField
                     placeHolder="Enter agent name"
                     {...register("agentName", { required: true })}
@@ -71,14 +69,11 @@ const AddAgentPage = () => {
                   />
                   <Prompts show={false} />
                 </div>
-              {/* Kubernetes API input */}
                 <div className={createAgentStyle.inputContainer}>
-                {/* Label */}
                   <div className={createAgentStyle.labelContainer}>
                     <p>Kubernetes API Proxy Name</p>
                     <p className={createAgentStyle.required}>*</p>
                   </div>
-                {/* Input Field */}
                   <TextField
                     placeHolder="Enter proxy name"
                     {...register("proxyName", { required: true })}
@@ -86,41 +81,53 @@ const AddAgentPage = () => {
                   />
                   <Prompts show={false} />
                 </div>
-              {/* Checkbox */}
+                <Checkbox
-              <div className={createAgentStyle.checkboxMainContainer}>
+                  checked={useVpn}
-                <div className={createAgentStyle.checkboxContainer}>
+                  onChange={(e) => setUseVpn(e.target.checked)}
-                  <div className={createAgentStyle.checkbox}>
+                  label="Use Tailscale VPN"
-                    {/* Checkbox */}
+                  description={
-                    <div className={createAgentStyle.check}>
+                    <>
-                      <input
-                        type="checkbox"
-                        checked={isChecked}
-                        onChange={handleCheckboxChange}
-                        className={createAgentStyle.hiddenCheckbox}
-                      />
-                    </div>
-                    {/* List */}
-                    <div className={createAgentStyle.list}>
-                      <p className={createAgentStyle.placeholderTxt}>
-                        Use Tailscale VPN
-                      </p>
-                      <p className={createAgentStyle.secondaryTxt}>
                       Enable Tailscale for secure private networking. When
-                        enabled, <br /> the endpoint will be automatically
+                      enabled, <br />
-                        resolved from Tailscale.
+                      the endpoint will be automatically resolved from
-                      </p>
+                      Tailscale.
-                    </div>
+                    </>
-                  </div>
+                  }
-                </div>
+                />
-              </div>
+                {useVpn ? (
-              {/* Agent endpoint */}
+                  <>
                     <div className={createAgentStyle.inputContainer}>
-                {/* Label */}
+                      <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.agentInputContainer}>
                     <div className={createAgentStyle.labelContainer}>
                       <p>Agent Endpoint</p>
                       <p className={createAgentStyle.required}>*</p>
                     </div>
-                {/* Input Field */}
                     <TextField
                       placeHolder="e.g., http://agent-01.example.com:8080"
                       {...register("agentEndpoint", { required: true })}
@@ -128,8 +135,66 @@ const AddAgentPage = () => {
                     />
                     <Prompts show={false} />
                   </div>
-            </form>
+                )}
               </div>
+
+              <div className={createAgentStyle.lokiContainer}>
+                {/* Header */}
+                <div className={createAgentStyle.headerContainer}>
+                  <div className={createAgentStyle.headerTxt}>
+                    <p>Loki Integration (Optional)</p>
+                  </div>
+                </div>
+                <Checkbox
+                  checked={enableLoki}
+                  onChange={(e) => setEnableLoki(e.target.checked)}
+                  label="Enable Loki Logging"
+                  description="Configure Loki for centralized logging and log streaming."
+                />
+
+                {enableLoki && (
+                  <>
+                    <div className={createAgentStyle.inputContainer}>
+                      <div className={createAgentStyle.labelContainer}>
+                        <p>Loki Endpoint</p>
+                        {/* <p className={createAgentStyle.required}>*</p> */}
+                      </div>
+                      <TextField
+                        placeHolder="https://loki.project-moonshot.com/"
+                        {...register("endpoint", { required: true })}
+                        hasError={!!errors.endpoint}
+                      />
+                      <Prompts show={false} />
+                    </div>
+                    <div className={createAgentStyle.inputContainer}>
+                      <div className={createAgentStyle.labelContainer}>
+                        <p>Tenant Name</p>
+                        {/* <p className={createAgentStyle.required}>*</p> */}
+                      </div>
+                      <TextField
+                        placeHolder="doks-dev"
+                        {...register("tenantName", { required: true })}
+                        hasError={!!errors.tenantName}
+                      />
+                      <Prompts show={false} />
+                    </div>
+                    <div className={createAgentStyle.inputContainer}>
+                      <div className={createAgentStyle.labelContainer}>
+                        <p>Password</p>
+                        {/* <p className={createAgentStyle.required}>*</p> */}
+                      </div>
+                      <TextField
+                        placeHolder="Enter Password"
+                        {...register("password", { required: true })}
+                        hasError={!!errors.password}
+                      />
+                      <Prompts show={false} />
+                    </div>
+                  </>
+                )}
+              </div>
+            </div>
+          </form>
         </div>
       </div>
     </div>

frontend/src/app/agents/add/styles.module.css

@@ -1,50 +1,51 @@
-.createAgentContainer {
+.formContainer {
   display: flex;
   flex-direction: column;
-  align-items: center;
+  align-items: flex-start;
-  gap: 48px;
+  gap: 10px;
   flex: 1 0 0;
   align-self: stretch;
 }
 
+.createAgentContainer {
+  display: flex;
+  justify-content: center;
+  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 - 5px - 110px);
+  overflow-y: auto;
+  scrollbar-width: none;
+}
+
 .inputMainContainer {
   display: flex;
   padding: 24px;
   flex-direction: column;
   align-items: flex-start;
   gap: 24px;
-  border-radius: 8px;
-  /* Remove ni kung mo ingon si sir grills */
-  height: calc(100vh - 260px);
-  position: relative;
-  overflow: auto;
-  scrollbar-width: none;
 }
 .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;
+  /* width: 163px; */
+  align-self: stretch;
   color: #d2d3e1;
-  color: color(display-p3 0.8235 0.8275 0.8784);
   font-family: Inter;
   font-size: 20px;
   font-style: normal;
   font-weight: 500;
   line-height: normal;
 }
-.inputContainer {
+.inputContainer,
+.agentInputContainer {
   display: flex;
   width: 500px;
   flex-direction: column;
@@ -59,7 +60,6 @@
 }
 .labelContainer > p {
   color: #d2d3e1;
-  color: color(display-p3 0.8235 0.8275 0.8784);
   font-family: Inter;
   font-size: 16px;
   font-style: normal;
@@ -71,112 +71,64 @@
   font-weight: 600;
 }
 
-.checkboxMainContainer {
+.lokiContainer {
   display: flex;
+  width: 548px;
+  padding: 24px;
   flex-direction: column;
   align-items: flex-start;
-  gap: 10px;
+  gap: 24px;
-  align-self: stretch;
-}
-.checkboxContainer {
-  display: flex;
-  align-items: flex-start;
-  align-self: stretch;
-}
-.checkbox {
-  display: flex;
-  padding: var(--Basic-Forms-Checkbox-Input-Sizing-Y-SM, 10px)
-    var(--Basic-Forms-Checkbox-Input-Sizing-X-SM, 12px);
-  align-items: flex-start;
-  gap: var(--Basic-Forms-Checkbox-Gap-Between, 16px);
-  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;
-  padding-top: var(--Basic-Forms-Checkbox-Inline-Y, 4px);
-  align-items: flex-start;
-  gap: var(--Basic-Forms-Checkbox-Inline-Gap-Between, 10px);
-}
-.hiddenCheckbox {
-  appearance: none;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  width: 16px;
-  height: 16px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border-radius: var(--Basic-Forms-Checkbox-Check-Icon-Border-Radius, 4px);
-  border: 1px solid
-    var(--Basic-Forms-Checkbox-Check-Icon-Border-Border-Active-Color, #0067fd);
-  border: 1px solid
-    var(
-      --Basic-Forms-Checkbox-Check-Icon-Border-Border-Active-Color,
-      color(display-p3 0.1451 0.3882 0.9216)
-    );
-  cursor: pointer;
-  position: relative;
-}
-.hiddenCheckbox:checked {
-  border-radius: var(--Basic-Forms-Checkbox-Check-Icon-Border-Radius, 4px);
-  border: 1px solid
-    var(--Basic-Forms-Checkbox-Check-Icon-Border-Border-Active-Color, #0067fd);
-  border: 1px solid
-    var(
-      --Basic-Forms-Checkbox-Check-Icon-Border-Border-Active-Color,
-      color(display-p3 0.1451 0.3882 0.9216)
-    );
-  background: var(
-    --Basic-Forms-Checkbox-Check-Icon-Background-Bg-Active-Color,
-    #0067fd
-  );
-  background: var(
-    --Basic-Forms-Checkbox-Check-Icon-Background-Bg-Active-Color,
-    color(display-p3 0.1451 0.3882 0.9216)
-  );
-}
-.hiddenCheckbox::after {
-  content: "";
-  position: absolute;
-  inset: 0;
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='8' viewBox='0 0 11 8' fill='none'%3E%3Cpath d='M9.83333 0.5L3.41667 6.91667L0.5 4' stroke='white' style='stroke:white;stroke-opacity:1;' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
-  background-repeat: no-repeat;
-  background-position: center;
-  opacity: 0;
-}
-.hiddenCheckbox:checked::after {
-  opacity: 1;
 }
 
-.list {
+@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: 4px;
+    gap: 16px;
-  flex: 1 0 0;
+    padding: 0px;
-}
+    /* align-self: stretch;   */
-.placeholderTxt {
+  }
+  .lokiContainer {
+    display: flex;
+    gap: 16px;
     align-self: stretch;
-  color: #d2d3e1;
+    border-radius: 8px;
-  color: color(display-p3 0.8235 0.8275 0.8784);
+    width: 500px;
-  font-family: Inter;
+    padding: 24px 0 0 0;
+  }
+}
+
+@media (max-width: 768px) {
+  .inputMainContainer {
+    align-self: stretch;
+    width: 100%;
+  }
+  .lokiContainer {
+    width: 100%;
+  }
+  .inputContainer,
+  .agentInputContainer {
+    width: 100%;
+  }
+  .agentInputContainer {
+    padding-top: 8px;
+  }
+  .headerTxt > p {
     font-size: 16px;
-  font-style: normal;
+    font-weight: 400;
-  font-weight: 500;
+  }
-  line-height: 24px; /* 150% */
-  letter-spacing: 0.08px;
-}
-.secondaryTxt {
-  align-self: stretch;
-  color: #697281;
-  color: color(display-p3 0.4196 0.4471 0.502);
-  font-family: Inter;
-  font-size: 14px;
-  font-style: normal;
-  font-weight: 500;
-  line-height: 20px; /* 142.857% */
-  letter-spacing: 0.07px;
 }

frontend/src/app/agents/card/Card.jsx

@@ -4,7 +4,7 @@ import styles from "./styles.module.css";
 
 const Card = (props) => {
   return (
-    <div className={styles.cardContainer}>
+    <div className={styles.cardContainer} {...props}>
       <div className={styles.cardDetails}>
         <div className={styles.list}>
           <p>Name</p>

frontend/src/app/agents/page.jsx

@@ -117,7 +117,13 @@ const AgentsPage = () => {
             <MobileSearchBar />
             {isMobile &&
               sampleData.map((data, key) => {
-                return <Card data={data} key={key} />;
+                return (
+                  <Card
+                    data={data}
+                    key={key}
+                    onClick={() => router.push(`/agents/${key}`)}
+                  />
+                );
               })}
           </div>
 

frontend/src/app/agents/styles.module.css

@@ -31,7 +31,7 @@
 .tableContainer > table > tbody > tr > td {
   color: #eeeffd;
   font-family: Inter;
-  font-size: 13px;
+  font-size: 0.8rem;
   font-style: normal;
   font-weight: 500;
   line-height: normal;
@@ -65,7 +65,7 @@
 .tableContainer > table > thead > tr > th {
   color: #85869b;
   font-family: Inter;
-  font-size: 13px;
+  font-size: 0.8rem;
   font-style: normal;
   font-weight: 500;
   line-height: normal;
@@ -113,7 +113,7 @@
   outline: none;
   color: white;
   font-family: Inter;
-  font-size: 16px;
+  font-size: 1rem;
   outline: none;
   font-style: normal;
   font-weight: 400;

frontend/src/app/components/alerts/styles.module.css

@@ -75,7 +75,7 @@
 .headers > p {
   color: #fff;
   font-family: Inter;
-  font-size: 20px;
+  font-size: 1.25rem;
   font-style: normal;
   font-weight: 700;
   line-height: normal;
@@ -91,7 +91,7 @@
 .body > p {
   color: #fff;
   font-family: Inter;
-  font-size: 14px;
+  font-size: 0.75rem;
   font-style: normal;
   font-weight: 500;
   line-height: 20px;

frontend/src/app/components/buttons/primarybutton/styles.module.css

@@ -8,7 +8,7 @@
   border: 0.5px solid #8187ff;
   background: rgba(83, 89, 242, 0.25);
   color: white;
-  font-size: 16px;
+  font-size: 1rem;
   font-style: normal;
   font-weight: 500;
   line-height: normal;

frontend/src/app/components/buttons/secondaryButton/styles.module.css

@@ -9,7 +9,7 @@
   border: 0.5px solid #4e537e;
   cursor: pointer;
   color: #d2d3e1;
-  font-size: 16px;
+  font-size: 1rem;
 
   font-style: normal;
   font-weight: 500;

frontend/src/app/components/checkbox/styles.module.css

@@ -1,7 +1,7 @@
 .switch {
   display: flex;
-  width: 53px;
+  width: 50px;
-  height: 33px;
+  height: 30px;
   align-items: center;
   background-color: white;
   cursor: pointer;
@@ -16,8 +16,8 @@
   display: none;
 }
 .knob {
-  width: 25px;
+  width: 22px;
-  height: 25px;
+  height: 22px;
   background-color: #6d6d6d;
   border-radius: 50%;
   display: flex;
@@ -32,7 +32,7 @@
 }
 
 .check:checked + .switch .knob {
-  transform: translateX(78%);
+  transform: translateX(90%);
   background-color: white;
 }
 

frontend/src/app/components/customCheckbox/Checkbox.jsx

@@ -0,0 +1,32 @@
+import React from "react";
+import styles from "./styles.module.css";
+
+const Checkbox = ({ checked, onChange, label, description }) => {
+  return (
+    <>
+      {/* Checkbox */}
+      <div className={styles.checkboxMainContainer}>
+        <div className={styles.checkboxContainer}>
+          <div className={styles.checkbox}>
+            {/* Checkbox */}
+            <div className={styles.check}>
+              <input
+                type="checkbox"
+                checked={checked}
+                onChange={onChange}
+                className={styles.hiddenCheckbox}
+              />
+            </div>
+            {/* List */}
+            <div className={styles.list}>
+              <p className={styles.placeholderTxt}>{label}</p>
+              <p className={styles.secondaryTxt}>{description}</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default Checkbox;

frontend/src/app/components/customCheckbox/styles.module.css

@@ -0,0 +1,88 @@
+.checkboxMainContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 10px;
+  align-self: stretch;
+}
+.checkboxContainer {
+  display: flex;
+  align-items: flex-start;
+  align-self: stretch;
+}
+.checkbox {
+  display: flex;
+  padding: 10px 12px;
+  align-items: flex-start;
+  gap: 16px;
+  flex: 1 0 0;
+  border-radius: 8px;
+  background: #1d1e2a;
+}
+.check {
+  display: flex;
+  padding-top: 4px;
+  align-items: flex-start;
+  gap: 10px;
+}
+.hiddenCheckbox {
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  width: 16px;
+  height: 16px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  position: relative;
+  border-radius: 4px;
+  border: 1px solid #e5e7eb;
+
+  background: #fff;
+}
+.hiddenCheckbox:checked {
+  border-radius: 4px;
+  border: 1px solid #0067fd;
+  background: #0067fd;
+}
+.hiddenCheckbox::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='8' viewBox='0 0 11 8' fill='none'%3E%3Cpath d='M9.83333 0.5L3.41667 6.91667L0.5 4' stroke='white' style='stroke:white;stroke-opacity:1;' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: center;
+  opacity: 0;
+}
+.hiddenCheckbox:checked::after {
+  opacity: 1;
+}
+
+.list {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 4px;
+  flex: 1 0 0;
+}
+.placeholderTxt {
+  align-self: stretch;
+  color: #d2d3e1;
+  font-family: Inter;
+  font-size: 1rem;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 24px;
+  letter-spacing: 0.08px;
+}
+.secondaryTxt {
+  align-self: stretch;
+  color: #697281;
+  font-family: Inter;
+  font-size: 0.75rem;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 20px;
+  letter-spacing: 0.07px;
+}

frontend/src/app/components/fields/styles.module.css

@@ -12,7 +12,7 @@
   background-color: transparent;
   color: white;
   font-family: Inter;
-  font-size: 16px;
+  font-size: 1rem;
   outline: none;
   font-style: normal;
   font-weight: 400;
@@ -27,7 +27,7 @@
 .input:focus::placeholder {
   color: #4b4f6d;
   font-family: Inter;
-  font-size: 16px;
+  font-size: 1rem;
   font-style: normal;
   font-weight: 400;
   line-height: normal;
@@ -38,7 +38,7 @@
 .input::placeholder {
   color: #85869b;
   font-family: Inter;
-  font-size: 16px;
+  font-size: 1rem;
   font-style: normal;
   font-weight: 400;
   line-height: normal;

frontend/src/app/components/icons/check.jsx

@@ -11,8 +11,9 @@ const CheckIcon = (props) => {
       {...props}
     >
       <path
-        d="M4.53125 10L8.4375 13.9062L16.25 6.09375"
+        d="M14.625 6.14583V16.9375L10 13.8542L5.375 16.9375V6.14583C5.375 5.32808 5.69985 4.54382 6.27809 3.96559C6.85632 3.38735 7.64058 3.0625 8.45833 3.0625H11.5417C12.3594 3.0625 13.1437 3.38735 13.7219 3.96559C14.3001 4.54382 14.625 5.32808 14.625 6.14583Z"
         stroke="white"
+        strokeOpacity={1}
         strokeWidth={1.5}
         strokeLinecap="round"
         strokeLinejoin="round"

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;

frontend/src/app/components/icons/search.jsx

@@ -12,7 +12,7 @@ const SearchIcon = (props) => {
     >
       <path
         d="M19.5527 19.5536L14.7064 14.7074M9.16822 16.7847C13.3741 16.7847 16.7837 13.3751 16.7837 9.1692C16.7837 4.96328 13.3741 1.55371 9.16822 1.55371C4.9623 1.55371 1.55273 4.96328 1.55273 9.1692C1.55273 13.3751 4.9623 16.7847 9.16822 16.7847Z"
-        stroke="#858699"
+        stroke="currentColor" //858699
         strokeWidth={1.5}
         strokeLinecap="round"
         strokeLinejoin="round"

frontend/src/app/components/mobileSearchBar/MobileSearchBar.jsx

@@ -1,12 +1,19 @@
-import React from "react";
+import React, { useState } from "react";
 import styles from "./styles.module.css";
 import SearchIcon from "../icons/search";
+
 const MobileSearchBar = (props) => {
+  const [open, setOpen] = useState(false);
   return (
-    <div className={styles.searchBarContainer}>
+    <form className={`${styles.searchBarContainer} ${open ? styles.open : ""}`}>
-      <input type="text" className={styles.searchBar} />
+      <input type="text" placeholder="Search" className={styles.searchBar} />
-      <SearchIcon className={styles.searchIcon} />
+      <div
+        className={styles.searchBtn}
+        onClick={() => setOpen((open) => !open)}
+      >
+        <SearchIcon />
       </div>
+    </form>
   );
 };
 

frontend/src/app/components/mobileSearchBar/styles.module.css

@@ -1,29 +1,68 @@
 .searchBarContainer {
   display: flex;
-
   align-items: center;
   gap: 10px;
   align-self: stretch;
   position: relative;
+  width: 100%;
+  border: 1px solid #31324a00;
+  transition: width 0.35s ease;
 }
-.searchBarContainer > input {
+.searchBar:focus-within {
+  background: #292a36;
+  border-radius: 6px;
+}
+
+.open {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  border-radius: 6px;
+  border: 1px solid #31324a;
+}
+
+.searchBar {
   width: 100%;
   padding: 11px 12px;
   padding-left: 40px;
   background-color: transparent;
   border: none;
+  opacity: 0;
+  transition: opacity 0.35s ease;
   outline: none;
-  background-color: transparent;
+  color: #85869b;
-  color: white;
+  text-align: start;
   font-family: Inter;
   font-size: 18px;
-  outline: none;
   font-style: normal;
   font-weight: 400;
   line-height: normal;
+  letter-spacing: -0.09px;
   caret-color: #575bc7;
 }
-.searchIcon {
+.searchBar::placeholder {
-  position: absolute;
+  color: #85869b;
-  left: 10;
+  text-align: start;
+  font-family: Inter;
+  font-size: 18px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  letter-spacing: -0.09px;
+}
+
+.open > .searchBar {
+  opacity: 1;
+  transition-delay: 0.1s;
+}
+.searchBtn {
+  position: absolute;
+  top: 50%;
+  left: 10px;
+  transform: translateY(-40%);
+  cursor: pointer;
+  color: #858699;
+}
+.searchBtn:hover {
+  color: #959aff;
 }

frontend/src/app/components/mobileToggleTab/Toggle.jsx

@@ -0,0 +1,39 @@
+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}>
+          <div className={styles.searchBar}>
+            <MobileSearchBar />
+          </div>
+
+          <button>
+            <PlusIcon />
+          </button>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Toggle;

frontend/src/app/components/mobileToggleTab/styles.module.css

@@ -0,0 +1,61 @@
+.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;
+    padding: 8px 0;
+  }
+  .searchBar {
+    width: 100%;
+  }
+
+  .container > button {
+    display: flex;
+    padding: 8px;
+    border: none;
+    justify-content: center;
+    align-items: end;
+    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;
+  }
+}

frontend/src/app/components/navbar/Navbar.jsx

@@ -16,6 +16,7 @@ import CredentialsIcon from "../icons/credentials";
 import AgentIcon from "../icons/agent";
 import DownloadIcon from "../icons/download";
 import useNavigations from "@/app/hooks/useNagivation";
+import { usePathname } from "next/navigation";
 
 const Navbar = () => {
   const [triggerDropDown, setTriggerDropDown] = useState(false);
@@ -27,11 +28,15 @@ const Navbar = () => {
     navToHome,
     navToOrganization,
     navToUsers,
-  } = useNavigations();
+  } = useNavigations(setTriggerDropDown);
+
+  const pathname = usePathname();
 
   const isMobile = useIsMobile();
   return (
-    <div className={styles.mainContainer}>
+    <div
+      className={`${styles.mainContainer} ${pathname.includes("/add") ? styles.onAdd : ""}`}
+    >
       {/* Mobile Hamburger Button */}
       <div className={styles.mobileHamburger}>
         <div className={styles.hamburgerMenu}>

frontend/src/app/components/navbar/navleft/HeaderDropdown.jsx

@@ -2,6 +2,7 @@ import React, { useState } from "react";
 import CreateIcon from "../../icons/create";
 import styles from "./styles.module.css";
 import useIsMobile from "@/app/hooks/useIsMobile";
+import SearchIcon from "../../icons/search";
 
 const HeaderDropdown = ({
   setOpen,
@@ -30,7 +31,7 @@ const HeaderDropdown = ({
         </div>
         {/* Search */}
         <div className={styles.srchInputContainer}>
-          <div className={styles.srchInputGroup}>
+          <form className={styles.srchInputGroup}>
             <svg
               xmlns="http://www.w3.org/2000/svg"
               width="18"
@@ -67,7 +68,7 @@ const HeaderDropdown = ({
               id=""
               placeholder="Search"
             />
-          </div>
+          </form>
         </div>
       </div>
 

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;
@@ -255,7 +255,7 @@
     background: linear-gradient(0deg, #2d3143 0%, #191a24 100%);
     border-radius: 0;
     position: fixed;
-    top: 90px;
+    top: 80px;
     left: 0;
     width: 100%;
     margin-top: 0;

frontend/src/app/components/navbar/navright/Profile.jsx

@@ -6,7 +6,6 @@ import useIsMobile from "@/app/hooks/useIsMobile";
 const Profile = () => {
   const isMobile = useIsMobile();
   const [open, setOpen] = useState(false);
-  const [user, setUser] = useState("");
   const sampleData = [
     {
       name: "JM Grills",

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;
@@ -172,7 +169,7 @@
     gap: 16px;
     background: linear-gradient(0deg, #2d3143 0%, #191a24 100%);
     position: fixed;
-    top: 90px;
+    top: 80px;
     left: 0;
     width: 100%;
     margin-top: 0;

frontend/src/app/components/navbar/styles.module.css

@@ -168,4 +168,7 @@
   .hamburgerMenu {
     display: flex;
   }
+  .onAdd {
+    display: none;
+  }
 }

frontend/src/app/components/permissions/Permissions.jsx

@@ -3,54 +3,30 @@ 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>
+            {/* Button ni */}
-                <svg
+            <button>
-                  xmlns="http://www.w3.org/2000/svg"
+              <PlusIcon />
-                  width={24}
+            </button>
-                  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>
 
         {sampleData.length === 0 ? (
-            // Default Message
           <div className={editUserStyle.permissionDefaultState}>
             <p>No permission added yet</p>
           </div>
         ) : (
-            // Sampple Data(static)
+          <div className={editUserStyle.permissionsList}>
-            sampleData.map((perm, index) => {
+            {sampleData.map((perm, index) => {
               return (
                 <div className={editUserStyle.permissions} key={index}>
                   <div className={editUserStyle.permissionsItem}>
@@ -62,9 +38,9 @@ const Permissions = ({ sampleData = [] }) => {
                   </div>
                 </div>
               );
-            })
+            })}
-          )}
           </div>
+        )}
       </div>
     </>
   );

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;
@@ -39,9 +22,7 @@
   align-items: flex-start;
   gap: 5px;
   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,27 +39,26 @@
   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 {
-  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex: 1 0 0;
+  align-self: stretch;
   height: 43.813px;
   padding: 8px 16px;
-  justify-content: center;
-  align-items: center;
-  align-self: stretch;
 }
 .permissionDefaultState p {
   display: flex;
@@ -88,29 +68,28 @@
   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;
 }
-
+.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;
-  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 +100,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 +129,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 {
+@media (max-width: 768px) {
-  display: flex;
+  .permissionsContainer {
-  height: 43.813px;
+    border-radius: 4px;
-  padding: 8px 16px;
+    padding: 0 0 24px 0;
-  justify-content: center;
+  }
-  align-items: center;
+  .permissionsHeader {
+    padding: 12px 16px;
+  }
+
+  .permissionsHeader > p {
+    color: #fff;
+    font-size: 18px;
     align-self: stretch;
-}
+  }
-.permissionDefaultState p {
+
-  display: flex;
+  .svgContainer {
-  justify-content: center;
+    display: none;
-  align-items: center;
+  }
+  .permissionDefaultState {
     gap: 12px;
-  flex: 1 0 0;
     align-self: stretch;
-  color: #85869b;
+    padding: 24px 16px 0 16px;
-  color: color(display-p3 0.5216 0.5255 0.6);
+  }
-  font-family: Inter;
+  .permissionsList {
-  font-size: 16px;
+    padding-top: 16px;
-  font-style: normal;
+  }
-  font-weight: 400;
+  .permissions {
-  line-height: normal;
+    padding: 8px 16px;
+  }
+  .permissionDefaultState > p {
+    font-weight: 500;
+    text-align: center;
+  }
 }

frontend/src/app/components/radio-button/RadioButton.jsx

@@ -0,0 +1,15 @@
+import React from "react";
+import styles from "./styles.module.css";
+const RadioButton = (props) => {
+  return (
+    <div className={styles.container}>
+      <label className={styles.radio}>
+        <input type="radio" {...props} />
+        <span className={styles.custom}></span>
+        <span className={styles.labelText}>{props?.label}</span>
+      </label>
+    </div>
+  );
+};
+
+export default RadioButton;

frontend/src/app/components/radio-button/styles.module.css

@@ -0,0 +1,44 @@
+.radioButtonsContainer > div > div > div {
+  display: flex;
+  padding: 12px 4px;
+  align-items: center;
+  gap: 12px;
+}
+.radio {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  gap: 8px;
+}
+.radio input {
+  display: none;
+}
+
+.radio .custom {
+  width: 20px;
+  height: 20px;
+  border: 2px solid #4b4f6d;
+  border-radius: 50%;
+  position: relative;
+  background-color: #fff;
+}
+
+.radio .custom::after {
+  content: "";
+  width: 10px;
+  height: 10px;
+  background: #5980f1;
+  border-radius: 50%;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%) scale(0);
+}
+
+.radio input:checked + .custom::after {
+  transform: translate(-50%, -50%) scale(1);
+}
+.radio input:not(:checked) + .custom + span,
+.radio input:not(:checked) + .custom + * {
+  color: #85869b;
+}

frontend/src/app/components/searchbar/SearchBar.jsx

@@ -1,5 +1,6 @@
 import React, { useState } from "react";
 import searchBarStyle from "./styles.module.css";
+import SearchIcon from "../icons/search";
 
 const SearchBar = () => {
   const [open, setOpen] = useState(false);
@@ -19,21 +20,7 @@ const SearchBar = () => {
         className={searchBarStyle.searchBtn}
         onClick={() => setOpen((open) => !open)}
       >
-        <svg
+        <SearchIcon />
-          xmlns="http://www.w3.org/2000/svg"
-          width={24}
-          height={24}
-          viewBox="0 0 24 24"
-          fill="none"
-        >
-          <path
-            d="M19.5527 19.5536L14.7064 14.7074M9.16822 16.7847C13.3741 16.7847 16.7837 13.3751 16.7837 9.1692C16.7837 4.96328 13.3741 1.55371 9.16822 1.55371C4.9623 1.55371 1.55273 4.96328 1.55273 9.1692C1.55273 13.3751 4.9623 16.7847 9.16822 16.7847Z"
-            stroke="currentColor"
-            strokeWidth={1.5}
-            strokeLinecap="round"
-            strokeLinejoin="round"
-          />
-        </svg>
       </div>
     </form>
   );

frontend/src/app/components/searchbar/styles.module.css

@@ -2,7 +2,7 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  width: 40px; /*collapse width*/
+  width: 40px;
   border-radius: 6px;
   padding: 6px;
   height: auto;
@@ -10,18 +10,14 @@
   transition: width 0.35s ease;
   position: absolute;
 }
-
 .searchBarContainer:focus-within {
   background: #292a36;
-  background: color(display-p3 0.1608 0.1647 0.2078);
 }
-/* When the searchbar is opened */
 .open {
   width: 260px;
   padding: 6px 6px 6px 12px;
   justify-content: space-between;
   border: 1px solid #31324a;
-  border: 1px solid color(display-p3 0.1922 0.1961 0.2824);
   border-radius: 6px;
 }
 .input {
@@ -32,9 +28,8 @@
   opacity: 0; /*hide input kung collapse*/
   transition: opacity 0.35s ease;
   color: #85869b;
-  color: color(display-p3 0.5216 0.5255 0.6);
   font-family: Inter;
-  font-size: 18px;
+  font-size: 1.18rem;
   font-style: normal;
   font-weight: 400;
   line-height: normal;
@@ -49,10 +44,9 @@
 
 .input::placeholder {
   color: #85869b;
-  color: color(display-p3 0.5216 0.5255 0.6);
   text-align: start;
   font-family: Inter;
-  font-size: 18px;
+  font-size: 1.18rem;
   font-style: normal;
   font-weight: 400;
   line-height: normal;

frontend/src/app/components/sidebar/styles.module.css

@@ -64,18 +64,14 @@
 .logoDescription > p:nth-child(1) {
   color: #fff;
   color: color(display-p3 1 1 1);
-  font-size: 15px;
+  font-size: 0.94rem;
-  font-style: normal;
   font-weight: 500;
   line-height: 18px;
 }
 .logoDescription > p:nth-child(2) {
   color: #85869b;
   color: color(display-p3 0.5216 0.5255 0.6);
-  font-size: 10px;
+  font-size: 0.63rem;
-  font-style: normal;
-  font-weight: 400;
-  line-height: normal;
   letter-spacing: 0.05px;
   align-self: stretch;
 }
@@ -91,11 +87,7 @@
   align-items: center;
   cursor: pointer;
   gap: 16px;
-  font-family: Inter;
+  font-size: 1rem;
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: normal;
   border-left: 2px solid #959aff00;
   align-self: stretch;
 }
@@ -112,11 +104,7 @@
   border-left: 2px solid #959aff;
   background: rgba(149, 154, 255, 0.05);
   color: #959aff;
-  font-family: Inter;
+  font-size: 1rem;
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: normal;
 }
 .active:hover path {
   stroke: #969af9;
@@ -153,11 +141,8 @@
 }
 .navFooterContainer > div > div > p {
   color: #d2d3e1;
-  font-family: Inter;
+  font-size: 1rem;
-  font-size: 16px;
-  font-style: normal;
   font-weight: 500;
-  line-height: normal;
 }
 .collapsed {
   width: 80px;

frontend/src/app/components/toast/success/styles.module.css

@@ -9,7 +9,7 @@
   position: absolute;
   bottom: 25px;
   z-index: 11;
-  right: 20px;
+  right: 10px;
   animation-name: showToast;
   animation-duration: 0.15s;
   animation-timing-function: ease-in-out;
@@ -41,7 +41,7 @@
 .messageContainer p {
   color: #006929;
   font-family: Inter;
-  font-size: 16px;
+  font-size: 1rem;
   font-style: normal;
   font-weight: 500;
   line-height: normal;

frontend/src/app/components/topHeader/TopHeader.jsx

@@ -47,8 +47,12 @@ const TopHeader = (props) => {
           editState={editState}
         />
       )}
-      <div className={styles.container}>
+      <div
-        <div className={styles.title}>
+        className={`${styles.container} ${pathName.includes("/add") ? styles.column : ""}`}
+      >
+        <div
+          className={`${styles.title} ${pathName.includes("/add") ? styles.fullWidth : ""}`}
+        >
           {props.requiredButtons.includes("back") && (
             <div onClick={() => router.back()}>
               <BackIcon />
@@ -56,7 +60,9 @@ const TopHeader = (props) => {
           )}
           <p>{props.topbarTitle}</p>
         </div>
-        <div className={styles.actionBar}>
+        <div
+          className={`${styles.actionBar}  ${pathName.includes("/add") ? styles.fullWidth : ""}`}
+        >
           {props?.requiredButtons.includes("search") && (
             <div className={styles.searchBarContainer}>
               {!isMobile && <SearchBar />}

frontend/src/app/components/topHeader/styles.module.css

@@ -3,6 +3,7 @@
   padding: 24px;
   justify-content: space-between;
   align-items: center;
+
   align-self: stretch;
   background: #21232f;
   transition: all 0.15s;
@@ -46,6 +47,7 @@
   display: flex;
   justify-content: flex-end;
   align-items: center;
+
   gap: 5px;
 }
 .searchBarContainer {
@@ -171,7 +173,19 @@
 }
 @media (max-width: 768px) {
   .container {
-    background: #21232f00;
+    background: linear-gradient(180deg, #1c1d2b 0%, #191a24 100%);
+
     padding: 16px;
   }
+  .column {
+    flex-direction: column;
+    gap: 10px;
+  }
+  .fullWidth {
+    width: 100%;
+    justify-content: flex-start;
+  }
+  .fullWidth > button {
+    width: 100%;
+  }
 }

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

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 #5980f1;
-  border: 2px dashed color(display-p3 0.3804 0.4959 0.9137);
   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;
+  }
+}

frontend/src/app/credentials/card/Card.jsx

@@ -12,7 +12,7 @@ const Card = (props) => {
         </div>
         <div className={styles.list}>
           <p>Organization ID</p>
-          <p>{props?.data?.organizationId}</p>
+          <p>{props?.data?.organizationID}</p>
         </div>
       </div>
       <div className={styles.cardAction}>

frontend/src/app/credentials/styles.module.css

@@ -31,7 +31,7 @@
 .tableContainer > table > tbody > tr > td {
   color: #eeeffd;
   font-family: Inter;
-  font-size: 13px;
+  font-size: 0.8rem;
   font-style: normal;
   font-weight: 500;
   line-height: normal;
@@ -47,7 +47,7 @@
 .tableContainer > table > thead > tr > th {
   color: #85869b;
   font-family: Inter;
-  font-size: 13px;
+  font-size: 0.8rem;
   font-style: normal;
   font-weight: 500;
   line-height: normal;

frontend/src/app/globals.css

@@ -16,7 +16,6 @@ html,
 body {
   max-width: 100vw;
   overflow-x: hidden;
-  font-size: 16px;
 }
 
 body {

frontend/src/app/hooks/useNagivation.jsx

@@ -1,36 +1,22 @@
 import { useRouter } from "next/navigation";
-const useNavigations = () => {
+
+export default function useNavigations(setTriggerDropDown) {
   const router = useRouter();
-  const navToHome = () => {
+
-    router.push("/home");
+  const handleNav = (path) => {
-  };
+    if (setTriggerDropDown) {
-  const navToOrganization = () => {
+      setTriggerDropDown(false);
-    router.push("/organization");
+    }
-  };
+    router.push(path);
-  const navToProject = () => {
-    router.push("/projects");
-  };
-  const navToUsers = () => {
-    router.push("/users");
-  };
-  const navToRoles = () => {
-    router.push("/roles");
-  };
-  const navToCredentials = () => {
-    router.push("/credentials");
-  };
-  const navToAgents = () => {
-    router.push("/agents");
   };
 
   return {
-    navToHome,
+    navToHome: () => handleNav("/home"),
-    navToAgents,
+    navToAgents: () => handleNav("/agents"),
-    navToCredentials,
+    navToCredentials: () => handleNav("/credentials"),
-    navToOrganization,
+    navToProject: () => handleNav("/projects"),
-    navToProject,
+    navToRoles: () => handleNav("/roles"),
-    navToRoles,
+    navToOrganization: () => handleNav("/organization"),
-    navToUsers,
+    navToUsers: () => handleNav("/users"),
   };
-};
+}
-export default useNavigations;

frontend/src/app/organization/add/styles.module.css

@@ -3,7 +3,8 @@
   flex-direction: column;
   align-items: center;
   gap: 48px;
-  flex: 1 0 0;
+
+  height: calc(100vh - 170px);
   align-self: stretch;
 }
 .upperToolTips {
@@ -24,7 +25,7 @@
   color: #191a24;
   text-align: center;
   font-family: Inter;
-  font-size: 16px;
+  font-size: 1rem;
   font-style: normal;
   font-weight: 400;
   line-height: normal;
@@ -107,7 +108,7 @@
 .labels > p {
   color: #d2d3e1;
   font-family: Inter;
-  font-size: 16px;
+  font-size: 1rem;
   font-style: normal;
   font-weight: 400;
   line-height: normal;
@@ -115,7 +116,7 @@
 .labels > p span {
   color: #85869b;
   font-family: Inter;
-  font-size: 16px;
+  font-size: 1rem;
   font-style: normal;
   font-weight: 300;
   line-height: normal;
@@ -136,7 +137,7 @@
 .inputLabel > p {
   color: #d2d3e1;
   font-family: Inter;
-  font-size: 16px;
+  font-size: 1rem;
   font-style: normal;
   font-weight: 400;
   line-height: normal;
@@ -164,7 +165,7 @@
 .prompts > p {
   color: #d49e3d;
   font-family: Inter;
-  font-size: 14px;
+  font-size: 0.85rem;
   font-style: normal;
   font-weight: 400;
   line-height: normal;

frontend/src/app/organization/card/styles.module.css

@@ -23,7 +23,7 @@
 .list p {
   color: #85869b;
   font-family: Inter;
-  font-size: 14px;
+  font-size: 0.85rem;
   font-style: normal;
   font-weight: 400;
   line-height: normal;
@@ -32,7 +32,7 @@
 .list p:nth-child(2) {
   color: #eeeffd;
   font-family: Inter;
-  font-size: 16px;
+  font-size: 1rem;
   font-weight: 500;
 }
 .cardAction {

frontend/src/app/organization/styles.module.css

@@ -30,7 +30,7 @@
 .tableContainer > table > tbody > tr > td {
   color: #eeeffd;
   font-family: Inter;
-  font-size: var(--table-font-size);
+  font-size: 0.8rem;
   font-style: normal;
   font-weight: 500;
   line-height: normal;
@@ -46,7 +46,7 @@
 .tableContainer > table > thead > tr > th {
   color: #85869b;
   font-family: Inter;
-  font-size: var(--table-font-size);
+  font-size: 0.8rem;
   font-style: normal;
   font-weight: 500;
   line-height: normal;

frontend/src/app/projects/add/styles.module.css

@@ -34,7 +34,7 @@
   color: #d2d3e1;
   color: color(display-p3 0.8235 0.8275 0.8784);
   font-family: Inter;
-  font-size: 16px;
+  font-size: 1rem;
   font-style: normal;
   font-weight: 400;
   line-height: normal;
@@ -42,7 +42,7 @@
 .label > p span {
   color: #cfb000;
   font-family: Inter;
-  font-size: 16px;
+  font-size: 1rem;
   font-style: normal;
   font-weight: 600;
   line-height: normal;
@@ -64,7 +64,7 @@
 .prompts > p {
   color: #d49e3d;
   font-family: Inter;
-  font-size: 14px;
+  font-size: 0.85rem;
   font-style: normal;
   font-weight: 400;
   line-height: normal;

frontend/src/app/projects/project-card/styles.module.css

@@ -24,7 +24,7 @@
 .list p {
   color: #85869b;
   font-family: Inter;
-  font-size: 14px;
+  font-size: 0.85rem;
   font-style: normal;
   font-weight: 400;
   line-height: normal;
@@ -33,7 +33,7 @@
 .list p:nth-child(2) {
   color: #eeeffd;
   font-family: Inter;
-  font-size: 16px;
+  font-size: 1rem;
   font-weight: 500;
 }
 .cardAction {

frontend/src/app/projects/styles.module.css

@@ -36,7 +36,7 @@
 .tableContainer > table > tbody > tr > td {
   color: #eeeffd;
   font-family: Inter;
-  font-size: var(--table-font-size);
+  font-size: 0.8rem;
   font-style: normal;
   font-weight: 500;
   line-height: normal;
@@ -52,7 +52,7 @@
 .tableContainer > table > thead > tr > th {
   color: #85869b;
   font-family: Inter;
-  font-size: var(--table-font-size);
+  font-size: 0.8rem;
   font-style: normal;
   font-weight: 500;
   line-height: normal;
@@ -68,7 +68,7 @@
   color: #50d85f;
   font-family: Inter;
 
-  font-size: var(--table-font-size);
+  font-size: 0.8rem;
   font-style: normal;
   font-weight: 500;
   line-height: normal;
@@ -77,7 +77,7 @@
   color: #85869b;
   font-family: Inter;
 
-  font-size: var(--table-font-size);
+  font-size: 0.8rem;
   font-style: normal;
   font-weight: 500;
   line-height: normal;

frontend/src/app/projects/view/AddServicesModal/styles.module.css

@@ -52,7 +52,7 @@
 }
 .header > div > p {
   color: #d2d3e1;
-  font-size: 24px;
+  font-size: 1.5rem;
   font-style: normal;
   font-weight: 500;
   line-height: normal;
@@ -64,7 +64,7 @@
   gap: 4px;
   align-self: stretch;
   color: #85869b;
-  font-size: 14px;
+  font-size: 0.9rem;
   font-style: normal;
   font-weight: 400;
   line-height: normal;
@@ -122,7 +122,7 @@
 }
 .listDetails > p {
   color: #85869b;
-  font-size: 13px;
+  font-size: 0.83rem;
   font-style: normal;
   font-weight: 400;
   line-height: normal;
@@ -135,7 +135,7 @@
 }
 .listDetails > div > p {
   color: #d2d3e1;
-  font-size: 18px;
+  font-size: 1.2rem;
   font-style: normal;
   font-weight: 500;
   line-height: normal;
@@ -153,7 +153,7 @@
 }
 .listDetails > div > div > p {
   color: #d2d3e1;
-  font-size: 14px;
+  font-size: 0.85rem;
   font-style: normal;
   font-weight: 400;
   line-height: normal;

frontend/src/app/projects/view/[servicesId]/LogsModal/styles.module.css

@@ -62,7 +62,7 @@
   align-items: center;
   gap: 10px;
   color: #d2d3e1;
-  font-size: 16px;
+  font-size: 1rem;
   font-style: normal;
   font-weight: 500;
   line-height: normal;
@@ -84,7 +84,7 @@
     "liga" off,
     "clig" off;
   font-family: Inter;
-  font-size: 12px;
+  font-size: 0.7rem;
   font-style: normal;
   font-weight: 500;
   line-height: 22px; /* 183.333% */
@@ -115,10 +115,10 @@
   gap: 12px;
 }
 .autoScroll input[type="checkbox"] {
-  accent-color: #5980f1;
+  accent-color: #4271ff;
   height: 16px;
   width: 16px;
-  background: white;
+  background-color: transparent;
 }
 
 .autoScroll p {

frontend/src/app/projects/view/[servicesId]/page.jsx

@@ -4,21 +4,44 @@ import globalStyle from "@/app/globalStyle.module.css";
 import TopHeader from "@/app/components/topHeader/TopHeader";
 import styles from "./styles.module.css";
 import variableStyles from "./variableStyles.module.css";
-import TextField from "@/app/components/fields/textfield";
 import AddVariableModal from "../variableModals/AddVariableModal/AddVariableModal";
 import AddVolumeModal from "../variableModals/AddVolumes/AddVolumeModal";
 import AddConfigMapModal from "../variableModals/AddConfigMap/AddConfigMapModal";
-import CustomCheckbox from "@/app/components/checkbox/CheckBox";
-import DeleteIcon from "@/app/components/icons/delete";
-import SelectField from "@/app/components/select/SelectField";
-import ActionButton from "@/app/components/actionButton/ActionButton";
 import LogsModal from "./LogsModal/logsModas";
+import ProjectDetails from "./projectDetails";
+import Settings from "./settings";
+import useServicesForm from "@/app/hooks/useServicesForm";
+import useIsMobile from "@/app/hooks/useIsMobile";
 const AddServices = () => {
-  const [triggerVariableDropDown, setTriggerVariableDropDown] = useState(false);
   const [triggerAddVariable, setTriggerAddVariable] = useState(false);
   const [triggerAddVolume, setTriggerAddVolume] = useState(false);
-  const [triggeAddConfigMap, setTriggerAddConfigMap] = useState(false);
+  const [triggerAddConfigMap, setTriggerAddConfigMap] = useState(false);
+  const [isProjectDetails, setIsProjectDetails] = useState(true);
   const [triggerLogsModal, setTriggerLogsModal] = useState(false);
+  const [isEnableIngress, setIsEnableIngress] = useState(false);
+  const isMobile = useIsMobile();
+
+  const {
+    register,
+    handleSubmit,
+    errors,
+    onSubmit,
+    triggerAlert,
+    disableScaling,
+    disableReadiness,
+    disableLiveness,
+    setDisableScaling,
+    setDisableReadiness,
+    setDisableLiveness,
+    setTriggerAlert,
+    minPods,
+    maxPods,
+    readinessPath,
+    readinessPort,
+    livenessPort,
+    livenessPath,
+  } = useServicesForm();
+
   const sampleData = [
     { id: 1, key: "REQUEST_SERVICE_GRPC", value: "request-service:50053" },
     { id: 1, key: "REQUEST_SERVICE_GRPC", value: "request-service:50053" },
@@ -38,7 +61,7 @@ const AddServices = () => {
       {triggerAddVolume && (
         <AddVolumeModal setTriggerAddVolume={setTriggerAddVolume} />
       )}
-      {triggeAddConfigMap && (
+      {triggerAddConfigMap && (
         <AddConfigMapModal setTriggerAddConfigMap={setTriggerAddConfigMap} />
       )}
       <div className={globalStyle.mainContainer}>
@@ -51,352 +74,57 @@ const AddServices = () => {
             requiredButtons={["back", "title", "edit", "download"]}
             setTriggerLogsModal={setTriggerLogsModal}
           />
-          <div className={styles.contentContainer}>
+          <div className={styles.content}>
-            <div className={styles.fieldsContainerCreateNew}>
+            <div className={styles.heading}>
-              <div className={styles.projectDetails}>
-                <div className={styles.projectDetailsHeader}>
-                  <p>Project Details</p>
-                </div>
-                <div className={styles.fieldsCreateNew}>
               <div>
-                    <div>
+                <p
-                      <p>Name</p>
+                  className={`${isProjectDetails ? styles.active : null}`}
-                      <TextField placeHolder="Enter service name" />
+                  onClick={() => setIsProjectDetails(true)}
-                    </div>
+                >
-                    <div>
+                  Project Details
-                      <p>Version</p>
+                </p>
-                      <TextField placeHolder="Service version" />
+                <p
-                    </div>
+                  className={`${!isProjectDetails ? styles.active : null}`}
-                  </div>
+                  onClick={() => setIsProjectDetails(false)}
-                  <div>
+                >
-                    <div>
+                  Settings
-                      <p>
-                        Image <span>(Optional)</span>
                 </p>
-                      <TextField placeHolder="Enter image name" />
               </div>
             </div>
-                  <div>
+            <div className={styles.contentContainer}>
-                    <div>
+              <ProjectDetails
-                      <p>Port</p>
+                className={`${styles.fieldsContainerCreateNew} ${!isMobile || (isProjectDetails && isMobile) ? styles.hasDisplay : styles.noDisplay}`}
-                      <TextField placeHolder="Enter port" />
+                register={register}
-                    </div>
+                handleSubmit={handleSubmit}
-                  </div>
+                errors={errors}
-                  <div>
+                onSubmit={onSubmit}
-                    <div>
+                triggerAlert={triggerAlert}
-                      <p>Ingress</p>
+                disableScaling={disableScaling}
-                      <SelectField
+                disableReadiness={disableReadiness}
-                        label="Select"
+                disableLiveness={disableLiveness}
-                        options={[
+                setDisableScaling={setDisableScaling}
-                          { label: "Option", value: "option" },
+                setDisableReadiness={setDisableReadiness}
-                          { label: "Option 1", value: "option 1" },
+                setDisableLiveness={setDisableLiveness}
-                          { label: "Option 2", value: "option 2" },
+                setTriggerAlert={setTriggerAlert}
-                        ]}
+                minPods={minPods}
+                maxPods={maxPods}
+                readinessPath={readinessPath}
+                readinessPort={readinessPort}
+                livenessPort={livenessPort}
+                livenessPath={livenessPath}
+                setIsEnableIngress={setIsEnableIngress}
+                isEnableIngress={isEnableIngress}
               />
-                    </div>
+              <Settings
-                    <div>
+                className={`${variableStyles.variables} ${!isMobile || (!isProjectDetails && isMobile) ? variableStyles.hasDisplay : variableStyles.noDisplay}`}
-                      <p>Ingress</p>
+                setTriggerAddConfigMap={setTriggerAddConfigMap}
-                      <SelectField
+                setTriggerAddVariable={setTriggerAddVariable}
-                        label="Select"
+                setTriggerAddVolume={setTriggerAddVolume}
-                        options={[
-                          { label: "Option", value: "option" },
-                          { label: "Option 1", value: "option 1" },
-                          { label: "Option 2", value: "option 2" },
-                        ]}
               />
             </div>
           </div>
         </div>
       </div>
-              <div className={styles.resource}>
-                <div className={styles.projectDetailsHeader}>
-                  <p>Resource</p>
-                </div>
-                <div className={styles.resourceFields}>
-                  <div>
-                    <div>
-                      <p>CPU Request (MB)</p>
-                      <TextField placeHolder="250" />
-                    </div>
-                    <div>
-                      <p>CPU Limit (MB)</p>
-                      <TextField placeHolder="250" />
-                    </div>
-                  </div>
-                  <div>
-                    <div>
-                      <p>Memory Request (MB)</p>
-                      <TextField placeHolder="250" />
-                    </div>
-                    <div>
-                      <p>Memory Limit (MB)</p>
-                      <TextField placeHolder="500" />
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div className={styles.additionalDetails}>
-                <div>
-                  <div>
-                    <div className={styles.additionalDetailsHeader}>
-                      <div>
-                        <p>Auto Scaling</p>
-                        <CustomCheckbox id="scalingCheckBox" />
-                      </div>
-                    </div>
-                    <div className={styles.additionalDetailsFields}>
-                      <div>
-                        <div>
-                          <div>
-                            <p>Minimum pods</p>
-
-                            <TextField placeHolder="1" />
-                          </div>
-                          <div>
-                            <p>Maximum pods</p>
-                            <TextField placeHolder="1" />
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-                <div>
-                  <div>
-                    <div className={styles.additionalDetailsHeader}>
-                      <div>
-                        <p>Readiness</p>
-                        <CustomCheckbox id="readiNessCheckBox" />
-                      </div>
-                    </div>
-                    <div className={styles.additionalDetailsFields}>
-                      <div>
-                        <div>
-                          <div>
-                            <p>Readiness Path</p>
-                            <TextField placeHolder="Enter Readiness path" />
-                          </div>
-                          <div>
-                            <p>Readiness Port</p>
-                            <TextField placeHolder="Enter Readiness port" />
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-                <div>
-                  <div>
-                    <div className={styles.additionalDetailsHeader}>
-                      <div>
-                        <p>Liveness</p>
-                        <CustomCheckbox id="liveNessCheckBox" />
-                      </div>
-                    </div>
-                    <div className={styles.additionalDetailsFields}>
-                      <div>
-                        <div>
-                          <div>
-                            <p>Liveness Path</p>
-                            <TextField placeHolder="Enter liveness path" />
-                          </div>
-                          <div>
-                            <p>Liveness Port</p>
-
-                            <TextField placeHolder="Enter liveness port" />
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div className={variableStyles.variables}>
-              <div className={variableStyles.variablesHeader}>
-                <div>
-                  <div className={variableStyles.searchContainer}>
-                    <div className={variableStyles.searchInputGroup}>
-                      <svg
-                        width="20"
-                        height="20"
-                        viewBox="0 0 20 20"
-                        fill="none"
-                      >
-                        <g clipPath="url(#clip0)">
-                          <path
-                            d="M8.66099 16.0271C12.7292 16.0271 16.0271 12.7292 16.0271 8.66099C16.0271 4.59282 12.7292 1.29492 8.66099 1.29492C4.59282 1.29492 1.29492 4.59282 1.29492 8.66099C1.29492 12.7292 4.59282 16.0271 8.66099 16.0271Z"
-                            stroke="currentColor"
-                            strokeWidth="2"
-                            strokeLinecap="round"
-                            strokeLinejoin="round"
-                          />
-                          <path
-                            d="M18.7051 18.7061L14.0176 14.0186"
-                            stroke="currentColor"
-                            strokeWidth="2"
-                            strokeLinecap="round"
-                            strokeLinejoin="round"
-                          />
-                        </g>
-                      </svg>
-                      <input type="text" placeholder="Search" />
-                    </div>
-                  </div>
-                  <div className={variableStyles.variablesHeaderDropDown}>
-                    <div
-                      className={variableStyles.variableHeaderDropdownButton}
-                      onClick={() =>
-                        setTriggerVariableDropDown(!triggerVariableDropDown)
-                      }
-                    >
-                      <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="white"
-                          strokeWidth="2"
-                          strokeLinecap="round"
-                          strokeLinejoin="round"
-                        />
-                        <path
-                          d="M5.29102 12H18.7077"
-                          stroke="white"
-                          strokeWidth="2"
-                          strokeLinecap="round"
-                          strokeLinejoin="round"
-                        />
-                      </svg>
-                    </div>
-                    {triggerVariableDropDown && (
-                      <div className={variableStyles.dropDownContainer}>
-                        <div
-                          onClick={() => {
-                            setTriggerAddVariable(true);
-                            setTriggerVariableDropDown(
-                              !triggerVariableDropDown,
-                            );
-                          }}
-                        >
-                          <p>Environment Variables</p>
-                        </div>
-                        <div
-                          onClick={() => {
-                            setTriggerAddVolume(true);
-                            setTriggerVariableDropDown(
-                              !triggerVariableDropDown,
-                            );
-                          }}
-                        >
-                          <p>Volumes</p>
-                        </div>
-                        <div
-                          onClick={() => {
-                            setTriggerAddConfigMap(true);
-                            setTriggerVariableDropDown(
-                              !triggerVariableDropDown,
-                            );
-                          }}
-                        >
-                          <p>Config Maps</p>
-                        </div>
-                      </div>
-                    )}
-                  </div>
-                </div>
-              </div>
-              <div className={variableStyles.variablesContentContainer}>
-                <div>
-                  <div className={variableStyles.variablesContent}>
-                    <div
-                      className={variableStyles.environmentVariablesContainer}
-                    >
-                      <div
-                        className={variableStyles.environmentVariablesHeader}
-                      >
-                        <p>Environment Variables</p>
-                      </div>
-                      <div className={variableStyles.envVariablesHeader}>
-                        <div>
-                          <p>Key</p>
-                          <p>Value</p>
-                        </div>
-                      </div>
-                      <div className={variableStyles.variableList}>
-                        {/*  <div className={variableStyles.emptyVariableList}>
-                          <div>
-                            <p>No Environment Variables added</p>
-                          </div>
-                        </div> */}
-                        {sampleData.map((data, key) => {
-                          return (
-                            <div className={variableStyles.variable} key={key}>
-                              <p>{data.key}</p>
-                              <p>{data.value}</p>
-                              <ActionButton icon={<DeleteIcon />} />
-                            </div>
-                          );
-                        })}
-                      </div>
-                    </div>
-                  </div>
-                  <div className={variableStyles.variablesContent}>
-                    <div
-                      className={variableStyles.environmentVariablesContainer}
-                    >
-                      <div
-                        className={variableStyles.environmentVariablesHeader}
-                      >
-                        <p>Volumes</p>
-                      </div>
-                      <div className={variableStyles.envVariablesHeader}>
-                        <div>
-                          <p>Name</p>
-                          <p>Path</p>
-                          <p>Size/Type</p>
-                          <p>Access Mode</p>
-                          <p>Storage Class</p>
-                        </div>
-                      </div>
-                      <div className={variableStyles.variableList}>
-                        <div className={variableStyles.emptyVariableList}>
-                          <div>
-                            <p>No volume added</p>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                  <div className={variableStyles.variablesContent}>
-                    <div
-                      className={variableStyles.environmentVariablesContainer}
-                    >
-                      <div
-                        className={variableStyles.environmentVariablesHeader}
-                      >
-                        <p>Config maps</p>
-                      </div>
-
-                      <div className={variableStyles.variableList}>
-                        <div className={variableStyles.emptyVariableList}>
-                          <div>
-                            <p>No config map added</p>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
     </div>
   );
 };

frontend/src/app/projects/view/[servicesId]/projectDetails.jsx

@@ -0,0 +1,323 @@
+"use client";
+import React, { useState } from "react";
+import styles from "./styles.module.css";
+import TextField from "@/app/components/fields/textfield";
+import CustomCheckbox from "@/app/components/checkbox/CheckBox";
+import SelectField from "@/app/components/select/SelectField";
+import RadioButton from "@/app/components/radio-button/RadioButton";
+
+const ProjectDetails = ({
+  register,
+  handleSubmit,
+  errors,
+  onSubmit,
+  triggerAlert,
+  disableScaling,
+  disableReadiness,
+  disableLiveness,
+  setDisableScaling,
+  setDisableReadiness,
+  setDisableLiveness,
+  setTriggerAlert,
+  minPods,
+  maxPods,
+  readinessPath,
+  readinessPort,
+  livenessPort,
+  livenessPath,
+  setIsEnableIngress,
+  isEnableIngress,
+  ...props
+}) => {
+  return (
+    <form {...props} id="form" onSubmit={handleSubmit(onSubmit)}>
+      <div className={styles.projectDetails}>
+        <div className={styles.projectDetailsHeader}>
+          <p>Project Details</p>
+        </div>
+        <div className={styles.fieldsCreateNew}>
+          <div className={styles.inputGroup}>
+            <div>
+              <p>Name</p>
+              <TextField
+                placeHolder="Enter service name"
+                {...register("serviceName", { required: true })}
+                hasError={!!errors.serviceName}
+              />
+            </div>
+            <div>
+              <p>Version</p>
+              <TextField
+                placeHolder="Service version"
+                {...register("serviceVersion", { required: true })}
+                hasError={!!errors.serviceVersion}
+              />
+            </div>
+          </div>
+          <div>
+            <div>
+              <p>
+                Image <span>(Optional)</span>
+              </p>
+              <TextField
+                placeHolder="Enter image name"
+                {...register("imageName", { required: false })}
+                hasError={!!errors.imageName}
+              />
+            </div>
+          </div>
+          <div>
+            <div>
+              <p>Port</p>
+              <TextField
+                placeHolder="Enter port"
+                {...register("port", { required: true })}
+                hasError={!!errors.port}
+              />
+            </div>
+          </div>
+          <div>
+            <div>
+              <p>Ingress</p>
+              <div className={styles.radioButtonContainer}>
+                <div>
+                  <RadioButton
+                    label="Enable"
+                    name="isEnable"
+                    value="true"
+                    checked={isEnableIngress === true}
+                    onChange={(e) =>
+                      setIsEnableIngress(e.target.value === "true")
+                    }
+                  />
+                  <RadioButton
+                    label="Disable"
+                    name="isEnable"
+                    value="false"
+                    checked={isEnableIngress === false}
+                    onChange={(e) =>
+                      setIsEnableIngress(e.target.value === "true")
+                    }
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {isEnableIngress && (
+            <>
+              <div>
+                <div>
+                  <p>Sub Domain</p>
+                  <TextField
+                    placeHolder="Subdomain-"
+                    {...register("subDomain", { required: isEnableIngress })}
+                    hasError={!!errors.imageName}
+                  />
+                </div>
+
+                <div>
+                  <p>Sub Domain</p>
+                  <TextField
+                    placeHolder="Subdomain-"
+                    {...register("subDomain", { required: isEnableIngress })}
+                    hasError={!!errors.imageName}
+                  />
+                </div>
+              </div>
+              <div>
+                <div>
+                  <p>
+                    Allowed Ips <span>(Optional)</span>
+                  </p>
+                  <textarea
+                    className={styles.textarea}
+                    name=""
+                    id=""
+                    placeholder="Enter allowed IP addresses (comma-separated, e.g., 192.168.1.1, 10.0.0.0/24)"
+                  ></textarea>
+                </div>
+              </div>
+            </>
+          )}
+        </div>
+      </div>
+      <div className={styles.resource}>
+        <div className={styles.projectDetailsHeader}>
+          <p>Resource</p>
+        </div>
+        <div className={styles.resourceFields}>
+          <div className={styles.inputGroup}>
+            <div>
+              <p>CPU Request (MB)</p>
+              <TextField
+                placeHolder="250"
+                {...register("cpuRequest", { required: true })}
+                hasError={!!errors.cpuRequest}
+              />
+            </div>
+            <div>
+              <p>CPU Limit (MB)</p>
+              <TextField
+                placeHolder="250"
+                {...register("cpuLimit", { required: true })}
+                hasError={!!errors.cpuLimit}
+              />
+            </div>
+          </div>
+          <div className={styles.inputGroup}>
+            <div>
+              <p>Memory Request (MB)</p>
+              <TextField
+                placeHolder="250"
+                {...register("memoryRequest", { required: true })}
+                hasError={!!errors.memoryRequest}
+              />
+            </div>
+            <div>
+              <p>Memory Limit (MB)</p>
+              <TextField
+                placeHolder="500"
+                {...register("memoryLimit", { required: true })}
+                hasError={!!errors.memoryLimit}
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className={styles.additionalDetails}>
+        <div>
+          <div>
+            <div className={styles.additionalDetailsHeader}>
+              <div>
+                <p>Auto Scaling</p>
+                <CustomCheckbox
+                  id="scalingCheckBox"
+                  setChecked={() => setDisableScaling(!disableScaling)}
+                />
+              </div>
+            </div>
+            <div className={styles.additionalDetailsFields}>
+              <div>
+                <div className={styles.inputGroup}>
+                  <div>
+                    <p>Minimum pods</p>
+
+                    <TextField
+                      placeHolder="1"
+                      disabled={disableScaling}
+                      {...register("minPods", {
+                        required: maxPods.trim() !== "" && !disableScaling,
+                      })}
+                      hasError={!!errors.minPods}
+                    />
+                  </div>
+                  <div>
+                    <p>Maximum pods</p>
+                    <TextField
+                      placeHolder="1"
+                      disabled={disableScaling}
+                      {...register("maxPods", {
+                        required: minPods.trim() !== "" && !disableScaling,
+                      })}
+                      hasError={!!errors.maxPods}
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div>
+          <div>
+            <div className={styles.additionalDetailsHeader}>
+              <div>
+                <p>Readiness</p>
+                <CustomCheckbox
+                  id="readiNessCheckBox"
+                  setChecked={() => setDisableReadiness(!disableReadiness)}
+                />
+              </div>
+            </div>
+            <div className={styles.additionalDetailsFields}>
+              <div>
+                <div className={styles.inputGroup}>
+                  <div>
+                    <p>Readiness Path</p>
+
+                    <TextField
+                      placeHolder="Enter Readiness path"
+                      disabled={disableReadiness}
+                      {...register("readinessPath", {
+                        required:
+                          readinessPort.trim() !== "" && !disableReadiness,
+                      })}
+                      hasError={!!errors.readinessPath}
+                    />
+                  </div>
+                  <div>
+                    <p>Readiness Port</p>
+                    <TextField
+                      placeHolder="Enter Readiness port"
+                      disabled={disableReadiness}
+                      {...register("readinessPort", {
+                        required:
+                          readinessPath.trim() !== "" && !disableReadiness,
+                      })}
+                      hasError={!!errors.readinessPort}
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div>
+          <div>
+            <div className={styles.additionalDetailsHeader}>
+              <div>
+                <p>Liveness</p>
+                <CustomCheckbox
+                  id="liveNessCheckBox"
+                  setChecked={() => setDisableLiveness(!disableLiveness)}
+                />
+              </div>
+            </div>
+            <div className={styles.additionalDetailsFields}>
+              <div>
+                <div className={styles.inputGroup}>
+                  <div>
+                    <p>Liveness Path</p>
+                    <TextField
+                      placeHolder="Enter liveness path"
+                      disabled={disableLiveness}
+                      {...register("livenessPath", {
+                        required:
+                          livenessPort.trim() !== "" && !disableLiveness,
+                      })}
+                      hasError={!!errors.livenessPath}
+                    />
+                  </div>
+                  <div>
+                    <p>Liveness Port</p>
+                    <TextField
+                      placeHolder="Enter liveness port"
+                      disabled={disableLiveness}
+                      {...register("livenessPort", {
+                        required:
+                          livenessPath.trim() !== "" && !disableLiveness,
+                      })}
+                      hasError={!!errors.livenessPort}
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </form>
+  );
+};
+
+export default ProjectDetails;

frontend/src/app/projects/view/[servicesId]/settings.jsx

@@ -0,0 +1,197 @@
+"use client";
+import React, { useState } from "react";
+import variableStyles from "./variableStyles.module.css";
+import DeleteIcon from "@/app/components/icons/delete";
+const Settings = ({
+  setTriggerAddVariable,
+  setTriggerAddVolume,
+  setTriggerAddConfigMap,
+  ...props
+}) => {
+  const [triggerVariableDropDown, setTriggerVariableDropDown] = useState(false);
+  const sampleData = [
+    { id: 1, key: "REQUEST_SERVICE_GRPC", value: "request-service:50053" },
+    {
+      id: 2,
+      key: "DatabaseSettings:ConnectionString",
+      value:
+        "mongodb://databaseAdmin:d2OIxck4DHZgOJNuk1A@129.212.210.84:27017/?authSource=admin",
+    },
+    { id: 1, key: "REQUEST_SERVICE_GRPC", value: "request-service:50053" },
+    {
+      id: 2,
+      key: "DatabaseSettings:ConnectionString",
+      value:
+        "mongodb://databaseAdmin:d2OIxck4DHZgOJNuk1A@129.212.210.84:27017/?authSource=admin",
+    },
+    { id: 1, key: "REQUEST_SERVICE_GRPC", value: "request-service:50053" },
+    {
+      id: 2,
+      key: "DatabaseSettings:ConnectionString",
+      value:
+        "mongodb://databaseAdmin:d2OIxck4DHZgOJNuk1A@129.212.210.84:27017/?authSource=admin",
+    },
+  ];
+  return (
+    <div {...props}>
+      <div className={variableStyles.variablesHeader}>
+        <div>
+          <div className={variableStyles.searchContainer}>
+            <div className={variableStyles.searchInputGroup}>
+              <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
+                <g clipPath="url(#clip0)">
+                  <path
+                    d="M8.66099 16.0271C12.7292 16.0271 16.0271 12.7292 16.0271 8.66099C16.0271 4.59282 12.7292 1.29492 8.66099 1.29492C4.59282 1.29492 1.29492 4.59282 1.29492 8.66099C1.29492 12.7292 4.59282 16.0271 8.66099 16.0271Z"
+                    stroke="currentColor"
+                    strokeWidth="2"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                  />
+                  <path
+                    d="M18.7051 18.7061L14.0176 14.0186"
+                    stroke="currentColor"
+                    strokeWidth="2"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                  />
+                </g>
+              </svg>
+              <input type="text" placeholder="Search" />
+            </div>
+          </div>
+          <div className={variableStyles.variablesHeaderDropDown}>
+            <div
+              className={variableStyles.variableHeaderDropdownButton}
+              onClick={() =>
+                setTriggerVariableDropDown(!triggerVariableDropDown)
+              }
+            >
+              <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="white"
+                  strokeWidth="2"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                />
+                <path
+                  d="M5.29102 12H18.7077"
+                  stroke="white"
+                  strokeWidth="2"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                />
+              </svg>
+            </div>
+            {triggerVariableDropDown && (
+              <div className={variableStyles.dropDownContainer}>
+                <div
+                  onClick={() => {
+                    setTriggerAddVariable(true);
+                    setTriggerVariableDropDown(!triggerVariableDropDown);
+                  }}
+                >
+                  <p>Environment Variables</p>
+                </div>
+                <div
+                  onClick={() => {
+                    setTriggerAddVolume(true);
+                    setTriggerVariableDropDown(!triggerVariableDropDown);
+                  }}
+                >
+                  <p>Volumes</p>
+                </div>
+                <div
+                  onClick={() => {
+                    setTriggerAddConfigMap(true);
+                    setTriggerVariableDropDown(!triggerVariableDropDown);
+                  }}
+                >
+                  <p>Config Maps</p>
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+      <div className={variableStyles.variablesContentContainer}>
+        <div>
+          <div className={variableStyles.variablesContent}>
+            <div className={variableStyles.environmentVariablesContainer}>
+              <div className={variableStyles.environmentVariablesHeader}>
+                <p>Environment Variables</p>
+              </div>
+              <div className={variableStyles.envVariablesHeader}>
+                <div>
+                  <p>Key</p>
+                  <p>Value</p>
+                </div>
+              </div>
+              <div className={variableStyles.variableList}>
+                {/*  <div className={variableStyles.emptyVariableList}>
+                  <div>
+                    <p>No Environment Variables added</p>
+                  </div>
+                </div> */}
+                {sampleData.map((data, key) => {
+                  return (
+                    <div className={variableStyles.variable}>
+                      <p>{data.key}</p>
+                      <p>{data.value}</p>
+                    </div>
+                  );
+                })}
+              </div>
+            </div>
+          </div>
+          <div className={variableStyles.variablesContent}>
+            <div className={variableStyles.environmentVariablesContainer}>
+              <div className={variableStyles.environmentVariablesHeader}>
+                <p>Volumes</p>
+              </div>
+              <div className={variableStyles.envVariablesHeader}>
+                <div>
+                  <p>Name</p>
+                  <p>Path</p>
+                  <p>Size/Type</p>
+                  <p>Access Mode</p>
+                  <p>Storage Class</p>
+                </div>
+              </div>
+              <div className={variableStyles.variableList}>
+                <div className={variableStyles.emptyVariableList}>
+                  <div>
+                    <p>No volume added</p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div className={variableStyles.variablesContent}>
+            <div className={variableStyles.environmentVariablesContainer}>
+              <div className={variableStyles.environmentVariablesHeader}>
+                <p>Config maps</p>
+              </div>
+
+              <div className={variableStyles.variableList}>
+                <div className={variableStyles.emptyVariableList}>
+                  <div>
+                    <p>No config map added</p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Settings;

frontend/src/app/projects/view/[servicesId]/styles.module.css

@@ -1,24 +1,122 @@
+.content {
+  display: flex;
+
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 32px;
+  min-height: 0;
+
+  align-self: stretch;
+}
 .contentContainer {
   display: flex;
   align-items: flex-start;
-  flex: 1 0 0;
+  height: calc(100vh - 240px);
+  flex: 1;
+
   align-self: stretch;
 }
+
+.heading {
+  display: none;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 16px;
+  padding: 0 16px;
+  align-self: stretch;
+  background: #191a24;
+}
+.heading > div {
+  display: flex;
+  align-items: flex-start;
+  gap: 16px;
+  align-self: stretch;
+}
+.heading p {
+  display: flex;
+  padding: 24px 4px 16px 4px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  gap: 5px;
+  color: #85869b;
+  font-family: Inter;
+  font-size: 1.18rem;
+
+  font-weight: 400;
+}
+.heading .active {
+  border-bottom: 1px solid #959aff;
+  color: #959aff;
+}
 .fieldsContainerCreateNew {
   display: flex;
   padding-top: 36px;
   flex-direction: column;
-  width: 550px;
   align-items: flex-start;
   gap: 36px;
   background: #191a24;
-  height: calc(100vh - 175px);
+  height: calc(100vh - 170px);
+  min-height: 0;
+  flex: 1;
   overflow-y: scroll;
   scrollbar-width: none;
 }
+.radioButtonContainer {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  gap: 12px;
+  align-self: stretch;
+}
+.radioButtonContainer > div {
+  display: flex;
+  align-items: flex-start;
+  gap: 24px;
+  padding: 20px 0;
+}
+.textarea {
+  display: flex;
+  height: 120px;
+  padding: 12px;
+  width: 100%;
+  flex-direction: column;
+  align-items: flex-start;
+  background-color: transparent;
+  gap: 10px;
+  align-self: stretch;
+  border-radius: 4px;
+  border: 1px solid #4b4f6d;
+  resize: none;
+  color: #85869b;
+  font-size: 1rem;
+  font-family: inter;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  letter-spacing: 0.16px;
+  outline: none;
+}
+.textarea::placeholder {
+  color: #85869b;
+}
+.textarea:focus {
+  border-radius: 6px;
+  border: 1px solid #959aff;
+  background: rgba(75, 79, 109, 0.25);
+}
+.textarea:focus::placeholder {
+  color: #4b4f6d;
+  font-family: Inter;
+  font-size: 1rem;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+}
 .projectDetails {
   display: flex;
-  padding: 0 36px;
+  padding: 0 20px;
   flex-direction: column;
   align-items: flex-start;
   gap: 10px;
@@ -33,7 +131,7 @@
 }
 .projectDetailsHeader p {
   color: #d2d3e1;
-  font-size: 20px;
+  font-size: 1.25rem;
   font-style: normal;
   font-weight: 500;
   line-height: normal;
@@ -48,7 +146,7 @@
 }
 .resource {
   display: flex;
-  padding: 0 36px;
+  padding: 0 20px;
   flex-direction: column;
   align-items: flex-start;
   align-self: stretch;
@@ -65,7 +163,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  gap: 10px;
+  gap: 8px;
   align-self: stretch;
 }
 
@@ -81,7 +179,7 @@
 .fieldsCreateNew > div > div p,
 .resourceFields > div > div p {
   color: #d2d3e1;
-  font-size: 16px;
+  font-size: 1rem;
   font-style: normal;
   font-weight: 400;
   line-height: normal;
@@ -92,25 +190,6 @@
   color: #85869b;
 }
 
-.fieldsCreateNew > div > div select,
-.resourceFields > div > div select {
-  display: flex;
-  padding: 12px;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 10px;
-  align-self: stretch;
-  border-radius: 4px;
-  border: 1px solid #4b4f6d;
-  background-color: transparent;
-  color: white;
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: normal;
-  letter-spacing: 0.16px;
-}
-
 .repositoryForm {
   display: flex;
   padding: 12px;
@@ -123,7 +202,7 @@
   border: 1px dashed #5980f1;
   color: #5980f1;
   text-align: center;
-  font-size: 16px;
+  font-size: 1rem;
   font-style: normal;
   font-weight: 400;
   line-height: normal;
@@ -174,7 +253,7 @@
 
 .additionalDetailsHeader p {
   color: #d2d3e1;
-  font-size: 20px;
+  font-size: 1.25rem;
   font-style: normal;
   font-weight: 500;
   line-height: normal;
@@ -211,9 +290,44 @@
 }
 .additionalDetailsFields p {
   color: #d2d3e1;
-  font-size: 16px;
+  font-size: 1rem;
   font-style: normal;
   font-weight: 400;
   line-height: normal;
   letter-spacing: 0.16px;
 }
+.noDisplay {
+  display: none;
+}
+.hasDisplay {
+  display: flex;
+}
+@media (max-width: 768px) {
+  .heading {
+    display: flex;
+  }
+  .fieldsContainerCreateNew {
+    height: calc(100vh - 262px);
+  }
+  .content {
+    padding: 0;
+  }
+  .fieldsCreateNew .inputGroup,
+  .additionalDetailsFields > div .inputGroup,
+  .resourceFields .inputGroup {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+  }
+  .fieldsCreateNew .inputGroup div,
+  .additionalDetailsFields > div .inputGroup div,
+  .resourceFields .inputGroup div {
+    width: 100%;
+  }
+  .projectDetailsHeader {
+    display: none;
+  }
+  .fieldsContainerCreateNew {
+    padding-top: 0;
+  }
+}

frontend/src/app/projects/view/[servicesId]/variableStyles.module.css

@@ -2,9 +2,8 @@
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  flex: 1 0 0;
+  flex: 1;
   align-self: stretch;
-
   background: #161720;
 }
 .variablesHeader {
@@ -23,7 +22,7 @@
 }
 .searchContainer > div {
   display: flex;
-  width: 310px;
+  width: 100%;
   padding: 8px 12px;
   align-items: center;
   gap: 9px;
@@ -36,7 +35,7 @@
 .searchInputGroup input {
   color: white;
   font-family: Inter;
-  font-size: 18px;
+  font-size: 0.9rem;
   font-style: normal;
   font-weight: 400;
   line-height: normal;
@@ -103,6 +102,13 @@
   align-self: stretch;
   text-wrap: nowrap;
   width: 100%;
+  border-radius: 4px;
+  color: #acb0ff;
+  font-family: Inter;
+  font-size: 0.9rem;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
 }
 .dropDownContainer > div:hover {
   background: #3c4159;
@@ -114,7 +120,7 @@
   gap: 12px;
   color: #acb0ff;
   font-family: Inter;
-  font-size: 18px;
+  font-size: 0.9rem;
   font-style: normal;
   font-weight: 400;
   line-height: normal;
@@ -145,26 +151,7 @@
   border-radius: 4px;
   background: #1d1e2a;
 }
-.variable {
+
-  display: flex;
-  padding: 8px 0;
-  align-items: center;
-  align-self: stretch;
-  border-bottom: 0.5px solid #2e3042;
-  width: 100%;
-}
-.variable p {
-  display: flex;
-  align-items: center;
-  flex: 1 0 0;
-  align-self: stretch;
-  color: #d2d3e1;
-  font-size: 15px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: normal;
-  letter-spacing: 0.15px;
-}
 .environmentVariablesContainer {
   display: flex;
   min-height: 200px;
@@ -189,23 +176,25 @@
   flex: 1 0 0;
   color: #fff;
   font-family: Inter;
-  font-size: 18px;
+  font-size: 0.9rem;
   font-style: normal;
   font-weight: 500;
   line-height: normal;
 }
 .envVariablesHeader {
   display: flex;
-  flex-direction: column;
+  padding: 12px 24px;
   align-items: flex-start;
+  width: 100%;
   align-self: stretch;
+  flex-direction: column;
+  border-bottom: 1px solid #2c2e3f;
 }
 .envVariablesHeader > div {
   display: flex;
-  padding: 12px 16px;
+
   align-items: flex-start;
   align-self: stretch;
-  border-bottom: 1px solid #2c2e3f;
 }
 .envVariablesHeader > div p {
   display: flex;
@@ -213,23 +202,50 @@
   flex: 1 0 0;
   color: #85869b;
   font-family: Inter;
-  font-size: 15px;
+  font-size: 0.9rem;
   font-style: normal;
   font-weight: 500;
   line-height: normal;
 }
 .variableList {
   display: flex;
-  padding: 0 16px 16px 16px;
+
+  padding: 24px 24px 0 24px;
+
+  padding-bottom: 24px;
   flex-direction: column;
-  align-items: center;
+  align-items: flex-start;
+  gap: 10px;
+  width: 100%;
+  flex: 1 0 0;
+}
+.variable {
+  display: flex;
+  align-items: flex-start;
   align-self: stretch;
+  justify-content: space-between;
+  gap: 5px;
+  width: 100%;
+}
+.variable p {
+  display: flex;
+  align-items: start;
+
+  flex: 1 0 0;
+  align-self: stretch;
+  overflow-wrap: anywhere;
+  color: #d2d3e1;
+  font-size: 0.9rem;
+  font-weight: 400;
+
+  letter-spacing: 0.15px;
 }
 .emptyVariableList {
   display: flex;
   padding: 24px 16px 0 16px;
   flex-direction: column;
   align-items: flex-start;
+  width: 100%;
   gap: 10px;
   flex: 1 0 0;
 }
@@ -237,6 +253,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
+
   align-self: stretch;
 }
 .emptyVariableList > div > div {
@@ -246,8 +263,19 @@
   flex: 1 0 0;
   color: #85869b;
   text-align: center;
-  font-size: 16px;
+  font-size: 1rem;
   font-style: normal;
   font-weight: 500;
   line-height: normal;
 }
+.noDisplay {
+  display: none;
+}
+.hasDisplay {
+  display: flex;
+}
+@media (max-width: 768px) {
+  .variablesContentContainer > div {
+    height: calc(100vh - 342px);
+  }
+}

frontend/src/app/projects/view/add-from-scratch/page.jsx

@@ -3,6 +3,7 @@ import React, { useState } from "react";
 import globalStyle from "@/app/globalStyle.module.css";
 import TopHeader from "@/app/components/topHeader/TopHeader";
 import styles from "./styles.module.css";
+import variableStyles from "./variableStyles.module.css";
 import AddVariableModal from "../variableModals/AddVariableModal/AddVariableModal";
 import AddVolumeModal from "../variableModals/AddVolumes/AddVolumeModal";
 import AddConfigMapModal from "../variableModals/AddConfigMap/AddConfigMapModal";
@@ -10,10 +11,14 @@ import useServicesForm from "@/app/hooks/useServicesForm";
 import Alert from "@/app/components/alerts/Alert";
 import ProjectDetails from "./projectDetails";
 import Settings from "./settings";
+import useIsMobile from "@/app/hooks/useIsMobile";
 const AddServices = () => {
   const [triggerAddVariable, setTriggerAddVariable] = useState(false);
   const [triggerAddVolume, setTriggerAddVolume] = useState(false);
   const [triggerAddConfigMap, setTriggerAddConfigMap] = useState(false);
+  const [isProjectDetails, setIsProjectDetails] = useState(true);
+  const [isEnableIngress, setIsEnableIngress] = useState(false);
+  const isMobile = useIsMobile();
 
   const {
     register,
@@ -66,12 +71,23 @@ const AddServices = () => {
           <div className={styles.content}>
             <div className={styles.heading}>
               <div>
-                <p>Project Details</p>
+                <p
-                <p>Settings</p>
+                  className={`${isProjectDetails ? styles.active : null}`}
+                  onClick={() => setIsProjectDetails(true)}
+                >
+                  Project Details
+                </p>
+                <p
+                  className={`${!isProjectDetails ? styles.active : null}`}
+                  onClick={() => setIsProjectDetails(false)}
+                >
+                  Settings
+                </p>
               </div>
             </div>
             <div className={styles.contentContainer}>
               <ProjectDetails
+                className={`${styles.fieldsContainerCreateNew} ${!isMobile || (isProjectDetails && isMobile) ? styles.hasDisplay : styles.noDisplay}`}
                 register={register}
                 handleSubmit={handleSubmit}
                 errors={errors}
@@ -90,8 +106,11 @@ const AddServices = () => {
                 readinessPort={readinessPort}
                 livenessPort={livenessPort}
                 livenessPath={livenessPath}
+                setIsEnableIngress={setIsEnableIngress}
+                isEnableIngress={isEnableIngress}
               />
               <Settings
+                className={`${variableStyles.variables} ${!isMobile || (!isProjectDetails && isMobile) ? variableStyles.hasDisplay : variableStyles.noDisplay}`}
                 setTriggerAddConfigMap={setTriggerAddConfigMap}
                 setTriggerAddVariable={setTriggerAddVariable}
                 setTriggerAddVolume={setTriggerAddVolume}

frontend/src/app/projects/view/add-from-scratch/projectDetails.jsx

@@ -4,6 +4,7 @@ import styles from "./styles.module.css";
 import TextField from "@/app/components/fields/textfield";
 import CustomCheckbox from "@/app/components/checkbox/CheckBox";
 import SelectField from "@/app/components/select/SelectField";
+import RadioButton from "@/app/components/radio-button/RadioButton";
 
 const ProjectDetails = ({
   register,
@@ -24,14 +25,12 @@ const ProjectDetails = ({
   readinessPort,
   livenessPort,
   livenessPath,
+  setIsEnableIngress,
+  isEnableIngress,
+  ...props
 }) => {
   return (
-    <form
+    <form {...props} id="form" onSubmit={handleSubmit(onSubmit)}>
-      className={styles.fieldsContainerCreateNew}
-      id="form"
-      onSubmit={handleSubmit(onSubmit)}
-    >
-      <div>
       <div className={styles.projectDetails}>
         <div className={styles.projectDetailsHeader}>
           <p>Project Details</p>
@@ -47,7 +46,7 @@ const ProjectDetails = ({
               </label>
             </div>
           </div>
-            <div>
+          <div className={styles.inputGroup}>
             <div>
               <p>Name</p>
               <TextField
@@ -90,17 +89,70 @@ const ProjectDetails = ({
           <div>
             <div>
               <p>Ingress</p>
-                <SelectField
+              <div className={styles.radioButtonContainer}>
-                  label="Select"
+                <div>
-                  options={[
+                  <RadioButton
-                    { label: "Option", value: "option" },
+                    label="Enable"
-                    { label: "Option 1", value: "option 1" },
+                    name="isEnable"
-                    { label: "Option 2", value: "option 2" },
+                    value="true"
-                  ]}
+                    checked={isEnableIngress === true}
+                    onChange={(e) =>
+                      setIsEnableIngress(e.target.value === "true")
+                    }
+                  />
+                  <RadioButton
+                    label="Disable"
+                    name="isEnable"
+                    value="false"
+                    checked={isEnableIngress === false}
+                    onChange={(e) =>
+                      setIsEnableIngress(e.target.value === "true")
+                    }
                   />
                 </div>
+              </div>
+            </div>
+          </div>
+
+          {isEnableIngress && (
+            <>
               <div>
-                <p>Ingress</p>
+                <div>
+                  <p>Sub Domain</p>
+                  <TextField
+                    placeHolder="Subdomain-"
+                    {...register("subDomain", { required: isEnableIngress })}
+                    hasError={!!errors.imageName}
+                  />
+                </div>
+
+                <div>
+                  <p>Sub Domain</p>
+                  <TextField
+                    placeHolder="Subdomain-"
+                    {...register("subDomain", { required: isEnableIngress })}
+                    hasError={!!errors.imageName}
+                  />
+                </div>
+              </div>
+              <div>
+                <div>
+                  <p>
+                    Allowed Ips <span>(Optional)</span>
+                  </p>
+                  <textarea
+                    className={styles.textarea}
+                    name=""
+                    id=""
+                    placeholder="Enter allowed IP addresses (comma-separated, e.g., 192.168.1.1, 10.0.0.0/24)"
+                  ></textarea>
+                </div>
+              </div>
+            </>
+          )}
+          <div>
+            <div>
+              <p>Type</p>
               <SelectField
                 label="Select"
                 options={[
@@ -118,7 +170,7 @@ const ProjectDetails = ({
           <p>Resource</p>
         </div>
         <div className={styles.resourceFields}>
-            <div>
+          <div className={styles.inputGroup}>
             <div>
               <p>CPU Request (MB)</p>
               <TextField
@@ -136,7 +188,7 @@ const ProjectDetails = ({
               />
             </div>
           </div>
-            <div>
+          <div className={styles.inputGroup}>
             <div>
               <p>Memory Request (MB)</p>
               <TextField
@@ -170,7 +222,7 @@ const ProjectDetails = ({
             </div>
             <div className={styles.additionalDetailsFields}>
               <div>
-                  <div>
+                <div className={styles.inputGroup}>
                   <div>
                     <p>Minimum pods</p>
 
@@ -212,7 +264,7 @@ const ProjectDetails = ({
             </div>
             <div className={styles.additionalDetailsFields}>
               <div>
-                  <div>
+                <div className={styles.inputGroup}>
                   <div>
                     <p>Readiness Path</p>
 
@@ -256,7 +308,7 @@ const ProjectDetails = ({
             </div>
             <div className={styles.additionalDetailsFields}>
               <div>
-                  <div>
+                <div className={styles.inputGroup}>
                   <div>
                     <p>Liveness Path</p>
                     <TextField
@@ -287,7 +339,6 @@ const ProjectDetails = ({
           </div>
         </div>
       </div>
-      </div>
     </form>
   );
 };

frontend/src/app/projects/view/add-from-scratch/settings.jsx

@@ -5,11 +5,12 @@ const Settings = ({
   setTriggerAddVariable,
   setTriggerAddVolume,
   setTriggerAddConfigMap,
+  ...props
 }) => {
   const [triggerVariableDropDown, setTriggerVariableDropDown] = useState(false);
 
   return (
-    <div className={variableStyles.variables}>
+    <div {...props}>
       <div className={variableStyles.variablesHeader}>
         <div>
           <div className={variableStyles.searchContainer}>

frontend/src/app/projects/view/add-from-scratch/styles.module.css

@@ -1,23 +1,24 @@
 .content {
   display: flex;
-  padding: 0 16px;
+
   flex-direction: column;
   align-items: flex-start;
-  height: calc(100vh - 170px);
+  gap: 32px;
-  /* ✅ fills remaining space */
   min-height: 0;
+
   align-self: stretch;
 }
 .contentContainer {
   display: flex;
   align-items: flex-start;
+  height: calc(100vh - 240px);
   flex: 1;
-  background-color: red;
+
   align-self: stretch;
 }
 
 .heading {
-  display: flex;
+  display: none;
   flex-direction: column;
   align-items: flex-start;
   gap: 16px;
@@ -40,11 +41,13 @@
   gap: 5px;
   color: #85869b;
   font-family: Inter;
-  font-size: 18px;
+  font-size: 1.18rem;
-  font-style: normal;
+
   font-weight: 400;
-  line-height: normal;
+}
-  letter-spacing: 0.18px;
+.heading .active {
+  border-bottom: 1px solid #959aff;
+  color: #959aff;
 }
 .fieldsContainerCreateNew {
   display: flex;
@@ -53,9 +56,9 @@
   align-items: flex-start;
   gap: 36px;
   background: #191a24;
-  height: 100%;
+  height: calc(100vh - 170px);
   min-height: 0;
-  background-color: red;
+  flex: 1;
   overflow-y: scroll;
   scrollbar-width: none;
 }
@@ -77,7 +80,7 @@
 }
 .projectDetailsHeader p {
   color: #d2d3e1;
-  font-size: 20px;
+  font-size: 1.25rem;
   font-style: normal;
   font-weight: 500;
   line-height: normal;
@@ -90,9 +93,61 @@
   gap: 16px;
   align-self: stretch;
 }
+.radioButtonContainer {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  gap: 12px;
+  align-self: stretch;
+}
+.radioButtonContainer > div {
+  display: flex;
+  align-items: flex-start;
+  gap: 24px;
+  padding: 20px 0;
+}
+.textarea {
+  display: flex;
+  height: 120px;
+  padding: 12px;
+  width: 100%;
+  flex-direction: column;
+  align-items: flex-start;
+  background-color: transparent;
+  gap: 10px;
+  align-self: stretch;
+  border-radius: 4px;
+  border: 1px solid #4b4f6d;
+  resize: none;
+  color: #85869b;
+  font-size: 1rem;
+  font-family: inter;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  letter-spacing: 0.16px;
+  outline: none;
+}
+.textarea::placeholder {
+  color: #85869b;
+}
+.textarea:focus {
+  border-radius: 6px;
+  border: 1px solid #959aff;
+  background: rgba(75, 79, 109, 0.25);
+}
+.textarea:focus::placeholder {
+  color: #4b4f6d;
+  font-family: Inter;
+  font-size: 1rem;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+}
 .resource {
   display: flex;
-  padding: 0 36px;
+  padding: 0 20px;
   flex-direction: column;
   align-items: flex-start;
   align-self: stretch;
@@ -126,13 +181,13 @@
   flex-direction: column;
   justify-content: center;
   align-items: flex-start;
-  gap: 12px;
+  gap: 16px;
   flex: 1 0 0;
 }
 .fieldsCreateNew > div > div p,
 .resourceFields > div > div p {
   color: #d2d3e1;
-  font-size: 16px;
+  font-size: 1rem;
   font-style: normal;
   font-weight: 400;
   line-height: normal;
@@ -155,7 +210,7 @@
   border: 1px dashed #5980f1;
   color: #5980f1;
   text-align: center;
-  font-size: 16px;
+  font-size: 1rem;
   font-style: normal;
   font-weight: 400;
   line-height: normal;
@@ -206,7 +261,7 @@
 
 .additionalDetailsHeader p {
   color: #d2d3e1;
-  font-size: 20px;
+  font-size: 1.25rem;
   font-style: normal;
   font-weight: 500;
   line-height: normal;
@@ -243,9 +298,44 @@
 }
 .additionalDetailsFields p {
   color: #d2d3e1;
-  font-size: 16px;
+  font-size: 1rem;
   font-style: normal;
   font-weight: 400;
   line-height: normal;
   letter-spacing: 0.16px;
 }
+.noDisplay {
+  display: none;
+}
+.hasDisplay {
+  display: flex;
+}
+@media (max-width: 768px) {
+  .heading {
+    display: flex;
+  }
+  .fieldsContainerCreateNew {
+    height: calc(100vh - 262px);
+  }
+  .content {
+    padding: 0;
+  }
+  .fieldsCreateNew .inputGroup,
+  .additionalDetailsFields > div .inputGroup,
+  .resourceFields .inputGroup {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+  }
+  .fieldsCreateNew .inputGroup div,
+  .additionalDetailsFields > div .inputGroup div,
+  .resourceFields .inputGroup div {
+    width: 100%;
+  }
+  .projectDetailsHeader {
+    display: none;
+  }
+  .fieldsContainerCreateNew {
+    padding-top: 0;
+  }
+}

frontend/src/app/projects/view/add-from-scratch/variableStyles.module.css

@@ -2,9 +2,8 @@
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  flex: 1 0 0;
+  flex: 1;
   align-self: stretch;
-
   background: #161720;
 }
 .variablesHeader {
@@ -36,7 +35,7 @@
 .searchInputGroup input {
   color: white;
   font-family: Inter;
-  font-size: 18px;
+  font-size: 1.18rem;
   font-style: normal;
   font-weight: 400;
   line-height: normal;
@@ -106,7 +105,7 @@
   border-radius: 4px;
   color: #acb0ff;
   font-family: Inter;
-  font-size: 18px;
+  font-size: 1.18rem;
   font-style: normal;
   font-weight: 400;
   line-height: normal;
@@ -121,7 +120,7 @@
   gap: 12px;
   color: #acb0ff;
   font-family: Inter;
-  font-size: 18px;
+  font-size: 1.18rem;
   font-style: normal;
   font-weight: 400;
   line-height: normal;
@@ -166,7 +165,7 @@
   flex: 1 0 0;
   align-self: stretch;
   color: #d2d3e1;
-  font-size: 15px;
+  font-size: 0.9rem;
   font-style: normal;
   font-weight: 400;
   line-height: normal;
@@ -196,7 +195,7 @@
   flex: 1 0 0;
   color: #fff;
   font-family: Inter;
-  font-size: 18px;
+  font-size: 1.18rem;
   font-style: normal;
   font-weight: 500;
   line-height: normal;
@@ -220,7 +219,7 @@
   flex: 1 0 0;
   color: #85869b;
   font-family: Inter;
-  font-size: 15px;
+  font-size: 0.93rem;
   font-style: normal;
   font-weight: 500;
   line-height: normal;
@@ -253,8 +252,19 @@
   flex: 1 0 0;
   color: #85869b;
   text-align: center;
-  font-size: 16px;
+  font-size: 1rem;
   font-style: normal;
   font-weight: 500;
   line-height: normal;
 }
+.noDisplay {
+  display: none;
+}
+.hasDisplay {
+  display: flex;
+}
+@media (max-width: 768px) {
+  .variablesContentContainer > div {
+    height: calc(100vh - 342px);
+  }
+}

frontend/src/app/projects/view/page.jsx

@@ -111,10 +111,11 @@ const AddProject = () => {
                 "services-drop-down",
               ]}
             />
-            {isMobile ? (
+
             <div className={styles.cardContainer}>
               <MobileSearchBar />
-                {sampleData.map((data, key) => (
+              {isMobile &&
+                sampleData.map((data, key) => (
                   <Card
                     data={data}
                     key={key}
@@ -122,7 +123,7 @@ const AddProject = () => {
                   />
                 ))}
             </div>
-            ) : (
+
             <div className={styles.tableContainer}>
               <table className={styles.table}>
                 <thead>
@@ -138,7 +139,8 @@ const AddProject = () => {
                   </tr>
                 </thead>
                 <tbody>
-                    {sampleData.map((services, index) => {
+                  {!isMobile &&
+                    sampleData.map((services, index) => {
                       return (
                         <tr
                           key={index}
@@ -383,7 +385,6 @@ const AddProject = () => {
                 </tbody>
               </table>
             </div>
-            )}
           </div>
         </div>
       </div>

frontend/src/app/projects/view/service-card/styles.module.css

@@ -24,7 +24,7 @@
 .list > p {
   color: #85869b;
   font-family: Inter;
-  font-size: 14px;
+  font-size: 0.8rem;
   font-style: normal;
   font-weight: 400;
   line-height: normal;
@@ -34,7 +34,7 @@
 .list > p:nth-child(2) {
   color: #eeeffd;
   font-family: Inter;
-  font-size: 16px;
+  font-size: 1rem;
   font-weight: 500;
 }
 .cardAction {
@@ -63,7 +63,7 @@
   background: rgba(22, 159, 49, 0.05);
   color: #179f31;
   font-family: Inter;
-  font-size: 12px;
+  font-size: 0.63rem;
   font-style: normal;
   font-weight: 500;
   line-height: normal;
@@ -91,7 +91,7 @@
   gap: 4px;
   color: #179f31;
   font-family: Inter;
-  font-size: 10px;
+  font-size: 0.6rem;
   font-style: normal;
   font-weight: 400;
   line-height: normal;

frontend/src/app/projects/view/styles.module.css

@@ -19,7 +19,7 @@
   color: #85869b;
   font-family: Inter;
   z-index: 3;
-  font-size: var(--table-font-size);
+  font-size: 0.8rem;
   font-style: normal;
   font-weight: 500;
   line-height: normal;
@@ -41,7 +41,7 @@
   font-family: Inter;
   overflow-wrap: anywhere;
 
-  font-size: var(--table-font-size);
+  font-size: 0.8rem;
   font-style: normal;
   font-weight: 500;
   line-height: normal;
@@ -78,7 +78,7 @@
   background: rgba(22, 159, 49, 0.05);
   color: #179f31;
   font-family: Inter;
-  font-size: 12px;
+  font-size: 0.65rem;
   font-style: normal;
   font-weight: 500;
   line-height: normal;
@@ -106,7 +106,7 @@
   gap: 4px;
   color: #179f31;
   font-family: Inter;
-  font-size: 10px;
+  font-size: 0.65rem;
   font-style: normal;
   font-weight: 400;
   line-height: normal;
@@ -188,7 +188,7 @@
   opacity: 1;
 }
 .cardContainer {
-  display: flex;
+  display: none;
   padding: 0 16px;
   padding-bottom: 50px;
   height: calc(100vh - 170px);
@@ -198,3 +198,11 @@
   align-self: stretch;
   overflow: auto;
 }
+@media (max-width: 768px) {
+  .cardContainer {
+    display: flex;
+  }
+  .tableContainer {
+    display: none;
+  }
+}

frontend/src/app/projects/view/variableModals/AddConfigMap/AddConfigMapModal.jsx

@@ -4,7 +4,10 @@ import CloseIcon from "@/app/components/icons/close";
 import TextField from "@/app/components/fields/textfield";
 import AddIcon from "@/app/components/icons/add";
 import PrimaryButton from "@/app/components/buttons/primarybutton/PrimaryButton";
+import SelectField from "@/app/components/select/SelectField";
+import RadioButton from "@/app/components/radio-button/RadioButton";
 const AddConfigMapModal = (props) => {
+  const [typeOption, setTypeOption] = useState("raw");
   return (
     <div className={styles.container}>
       <div className={styles.modal}>
@@ -33,21 +36,20 @@ const AddConfigMapModal = (props) => {
                   <div>
                     <p>Type</p>
                     <div>
-                      {" "}
+                      <RadioButton
-                      <div>
+                        name="typeOption"
-                        <label className={styles.radio}>
+                        value="raw"
-                          <input type="radio" name="typeOption" />
+                        checked={typeOption === "raw"}
-                          <span className={styles.custom}></span>
+                        onChange={(e) => setTypeOption(e.target.value)}
-                          Raw
+                        label="Raw"
-                        </label>
+                      />
-                      </div>
+                      <RadioButton
-                      <div>
+                        name="typeOption"
-                        <label className={styles.radio}>
+                        value="credential"
-                          <input type="radio" name="typeOption" />
+                        checked={typeOption === "credential"}
-                          <span className={styles.custom}></span>
+                        onChange={(e) => setTypeOption(e.target.value)}
-                          Credential
+                        label="Credential"
-                        </label>
+                      />
-                      </div>
                     </div>
                   </div>
                 </div>
@@ -57,11 +59,22 @@ const AddConfigMapModal = (props) => {
                       <p>Value</p>
                     </div>
 
+                    {typeOption === "raw" ? (
                       <textarea
                         name=""
                         id=""
                         placeholder="Enter a description"
                       ></textarea>
+                    ) : (
+                      <SelectField
+                        label="Select"
+                        options={[
+                          { label: "Option", value: "option" },
+                          { label: "Option 1", value: "option 1" },
+                          { label: "Option 2", value: "option 2" },
+                        ]}
+                      />
+                    )}
                   </div>
                 </div>
               </div>

frontend/src/app/projects/view/variableModals/AddConfigMap/styles.module.css

@@ -7,13 +7,14 @@
   z-index: 10;
   display: flex;
   align-items: center;
+  padding: 5px;
   justify-content: center;
   background-color: #00000037;
 }
 .modal {
   display: flex;
-  width: 593px;
+  max-width: 593px;
-
+  width: 100%;
   padding: 16px 16px 24px 16px;
   flex-direction: column;
   align-items: flex-start;
@@ -46,7 +47,7 @@
 
 .header > p {
   color: #d2d3e1;
-  font-size: 24px;
+  font-size: 1.5rem;
   font-style: normal;
   font-weight: 500;
   line-height: normal;
@@ -82,7 +83,7 @@
   align-items: flex-start;
   gap: 5px;
   color: #d2d3e1;
-  font-size: 16px;
+  font-size: 1rem;
   font-style: normal;
   font-weight: 500;
   line-height: normal;
@@ -146,7 +147,7 @@
 }
 .verticalInput p {
   color: #d2d3e1;
-  font-size: 16px;
+  font-size: 1rem;
   font-style: normal;
   font-weight: 400;
   line-height: normal;
@@ -167,35 +168,14 @@
   border: 1px solid #4b4f6d;
   resize: none;
   color: #85869b;
-  font-size: 16px;
+  font-size: 1rem;
   font-family: inter;
   font-style: normal;
   font-weight: 400;
   line-height: normal;
   letter-spacing: 0.16px;
 }
-.verticalInput textarea {
+
-  display: flex;
-  height: 120px;
-  padding: 12px;
-  width: 100%;
-  flex-direction: column;
-  align-items: flex-start;
-  background-color: transparent;
-  gap: 10px;
-  align-self: stretch;
-  border-radius: 4px;
-  border: 1px solid #4b4f6d;
-  resize: none;
-  color: #85869b;
-  font-size: 16px;
-  font-family: inter;
-  font-style: normal;
-  font-weight: 400;
-  outline: none;
-  line-height: normal;
-  letter-spacing: 0.16px;
-}
 .verticalInput textarea:focus {
   border-radius: 6px;
   border: 1px solid #959aff;
@@ -204,7 +184,7 @@
 .verticalInput textarea:focus::placeholder {
   color: #4b4f6d;
   font-family: Inter;
-  font-size: 16px;
+  font-size: 1rem;
   font-style: normal;
   font-weight: 400;
   line-height: normal;
@@ -227,7 +207,7 @@
   display: flex;
   align-items: flex-start;
   color: #d2d3e1;
-  font-size: 16px;
+  font-size: 1rem;
   font-style: normal;
   font-weight: 400;
   line-height: normal;
@@ -286,3 +266,12 @@
   gap: 16px;
   align-self: stretch;
 }
+@media (max-width: 768px) {
+  .horizontalInput > div {
+    flex-direction: column;
+    gap: 10px;
+  }
+  .horizontalInput > div > div {
+    width: 100%;
+  }
+}

frontend/src/app/projects/view/variableModals/AddVariableModal/AddVariableModal.jsx

@@ -102,16 +102,24 @@ const AddVariableModal = (props) => {
                       <div className={styles.horizontalInput}>
                         <div>
                           <div>
-                            <p>Protocol</p>
+                            <p>Username</p>
                             <TextField placeHolder="MongoDB" />
                           </div>
                           <div>
-                            <p>Service</p>
+                            <p>Password</p>
                             <TextField placeHolder="Select a service" />
                           </div>
                         </div>
                       </div>
                     </div>
+                    <div className={styles.verticalInput}>
+                      <div>
+                        <div>
+                          <p>Custom Port (Optional)</p>
+                        </div>
+                        <TextField placeHolder="Leave empty to use service’s default port" />
+                      </div>
+                    </div>
                   </>
                 )}
               </div>

frontend/src/app/projects/view/variableModals/AddVariableModal/styles.module.css

@@ -4,6 +4,7 @@
   position: absolute;
   top: 0;
   left: 0;
+  padding: 5px;
   z-index: 10;
   display: flex;
   align-items: center;
@@ -12,8 +13,8 @@
 }
 .modal {
   display: flex;
-  width: 593px;
+  max-width: 593px;
-  height: 566px;
+  width: 100%;
   padding: 16px 16px 24px 16px;
   flex-direction: column;
   align-items: flex-start;
@@ -45,7 +46,7 @@
 
 .header > p {
   color: #d2d3e1;
-  font-size: 24px;
+  font-size: 1.5rem;
   font-style: normal;
   font-weight: 500;
   line-height: normal;
@@ -81,7 +82,7 @@
   align-items: flex-start;
   gap: 5px;
   color: #d2d3e1;
-  font-size: 16px;
+  font-size: 1rem;
   font-style: normal;
   font-weight: 500;
   line-height: normal;
@@ -105,6 +106,9 @@
   align-items: flex-start;
   gap: 16px;
   align-self: stretch;
+  max-height: 400px;
+  overflow-y: scroll;
+  padding: 0px 5px;
 }
 .horizontalInput {
   display: flex;
@@ -145,7 +149,7 @@
 }
 .verticalInput p {
   color: #d2d3e1;
-  font-size: 16px;
+  font-size: 1rem;
   font-style: normal;
   font-weight: 400;
   line-height: normal;
@@ -166,7 +170,7 @@
   border: 1px solid #4b4f6d;
   resize: none;
   color: #85869b;
-  font-size: 16px;
+  font-size: 1rem;
   font-family: inter;
   font-style: normal;
   font-weight: 400;
@@ -182,25 +186,21 @@
 .verticalInput textarea:focus::placeholder {
   color: #4b4f6d;
   font-family: Inter;
-  font-size: 16px;
+  font-size: 1rem;
   font-style: normal;
   font-weight: 400;
   line-height: normal;
 }
 .authenticationContainer {
   display: flex;
-  padding: 12px 12px 32px 12px;
   flex-direction: column;
   justify-content: center;
   align-items: flex-start;
   gap: 16px;
   align-self: stretch;
-  border-radius: 6px;
-  background: #272b3a;
 }
 .authenticationContainer > p {
-  color: #85869b;
+  font-size: 1rem;
-  font-size: 16px;
   font-style: normal;
   font-weight: 400;
   line-height: normal;
@@ -213,3 +213,12 @@
   gap: 16px;
   align-self: stretch;
 }
+@media (max-width: 768px) {
+  .horizontalInput > div {
+    flex-direction: column;
+    gap: 10px;
+  }
+  .horizontalInput > div > div {
+    width: 100%;
+  }
+}

frontend/src/app/projects/view/variableModals/AddVolumes/styles.module.css

@@ -12,8 +12,8 @@
 }
 .modal {
   display: flex;
-  width: 593px;
+  max-width: 593px;
-
+  width: 100%;
   padding: 16px 16px 24px 16px;
   flex-direction: column;
   align-items: flex-start;
@@ -45,7 +45,7 @@
 
 .header > p {
   color: #d2d3e1;
-  font-size: 24px;
+  font-size: 1.5rem;
   font-style: normal;
   font-weight: 500;
   line-height: normal;
@@ -81,7 +81,7 @@
   align-items: flex-start;
   gap: 5px;
   color: #d2d3e1;
-  font-size: 16px;
+  font-size: 1rem;
   font-style: normal;
   font-weight: 500;
   line-height: normal;
@@ -145,7 +145,7 @@
 }
 .verticalInput p {
   color: #d2d3e1;
-  font-size: 16px;
+  font-size: 1rem;
   font-style: normal;
   font-weight: 400;
   line-height: normal;
@@ -166,7 +166,7 @@
   border: 1px solid #4b4f6d;
   resize: none;
   color: #85869b;
-  font-size: 16px;
+  font-size: 1rem;
   font-family: inter;
   font-style: normal;
   font-weight: 400;
@@ -187,7 +187,7 @@
 }
 .authenticationContainer > p {
   color: #85869b;
-  font-size: 16px;
+  font-size: 1rem;
   font-style: normal;
   font-weight: 400;
   line-height: normal;
@@ -200,3 +200,12 @@
   gap: 16px;
   align-self: stretch;
 }
+@media (max-width: 768px) {
+  .horizontalInput > div {
+    flex-direction: column;
+    gap: 10px;
+  }
+  .horizontalInput > div > div {
+    width: 100%;
+  }
+}

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}>
+              <div
-                {/* Header */}
+                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>
   );
 };
 

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;
@@ -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-y: 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;
@@ -94,6 +106,36 @@
   align-self: stretch;
 }
 
-.imanginaryDiv {
+@media (max-width: 950px) {
-  padding: 18px;
+  .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%;
+  }
 }

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}>
+              <div
-                {/* Header */}
+                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>
   );
 };
 

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 {
+@media (max-width: 950px) {
-  padding: 18px;
+  .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%;
+  }
 }

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}
+                      key={index}
-                      onClick={() => router.push(`/roles/${role.id}`)}
+                      onClick={() => router.push(`/roles/${index}`)}
                     >
                       <td>{role.name}</td>
                       <td>{role.orgId}</td>

frontend/src/app/roles/role-card/Card.jsx

@@ -0,0 +1,29 @@
+import DeleteIcon from "@/app/components/icons/delete";
+import React from "react";
+import styles from "./styles.module.css";
+
+const Card = (props) => {
+  return (
+    <div className={styles.cardContainer} {...props}>
+      <div className={styles.cardDetails}>
+        <div className={styles.list}>
+          <p>Name</p>
+          <p>{props?.role?.name}</p>
+        </div>
+        <div className={styles.list}>
+          <p>Organization ID</p>
+          <p>{props?.role?.orgId}</p>
+        </div>
+        <div className={styles.list}>
+          <p>Permissions</p>
+          <p>{props?.role?.permissions}</p>
+        </div>
+      </div>
+      <div className={styles.cardAction}>
+        <DeleteIcon />
+      </div>
+    </div>
+  );
+};
+
+export default Card;

frontend/src/app/roles/role-card/styles.module.css

@@ -0,0 +1,43 @@
+.cardContainer {
+  display: flex;
+  padding: 16px 0;
+  align-items: flex-start;
+  gap: 16px;
+  align-self: stretch;
+  border-bottom: 1px solid #2c2d3d;
+  cursor: pointer;
+}
+.cardDetails {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 8px;
+  flex: 1 0 0;
+}
+.list {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 5px;
+  align-self: stretch;
+}
+.list p {
+  color: #85869b;
+  font-family: Inter;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+}
+
+.list p:nth-child(2) {
+  color: #eeeffd;
+  font-family: Inter;
+  font-size: 16px;
+  font-weight: 500;
+}
+.cardAction {
+  display: flex;
+  align-items: center;
+  gap: 17px;
+}

frontend/src/app/roles/styles.module.css

@@ -22,9 +22,8 @@
   padding: 12px 24px;
   text-align: left;
   color: #85869b;
-  color: color(display-p3 0.5216 0.5255 0.6);
   font-family: Inter;
-  font-size: 13px;
+  font-size: var(--table-font-size);
   font-style: normal;
   flex: 1 0 0;
   font-weight: 500;
@@ -41,9 +40,8 @@
 .tableBody td {
   padding: 12px 24px;
   color: #eeeffd;
-  color: color(display-p3 0.9333 0.9373 0.9882);
   font-family: Inter;
-  font-size: 13px;
+  font-size: var(--table-font-size);
   font-style: normal;
   font-weight: 500;
   line-height: normal;
@@ -55,9 +53,7 @@
 }
 .tableBody tr:hover {
   border-bottom: 1px solid rgba(129, 135, 255, 0.25);
-  border-bottom: 1px solid color(display-p3 0.5098 0.5294 1 / 0.25);
   background: rgba(129, 135, 255, 0.05);
-  background: color(display-p3 0.5098 0.5294 1 / 0.05);
 }
 
 .tableActions {
@@ -68,3 +64,24 @@
   gap: 12px;
   align-self: stretch;
 }
+
+.cardContainer {
+  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;
+  }
+}

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}>
+              <div
-                {/* Header */}
+                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>
   );
 };
 

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

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,7 +8,11 @@ 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 = () => {
+  // Mobile
+  const [activeTab, setActiveTab] = useState("details");
   const {
     register,
     handleSubmit,
@@ -36,24 +40,34 @@ const AddUserPage = () => {
             state="add"
             requiredButtons={["title", "save"]}
           />
+
           <div className={addUserStyle.addUserContainer}>
+            {/* 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}>
+              <div
-                {/* Header */}
+                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"
                   onSubmit={handleSubmit(onSubmit)}
                 >
-                  {/* Role and Dropdown */}
                   <div className={addUserStyle.roleField}>
                     <p>Role</p>
                     <SelectField
@@ -68,11 +82,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 +97,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,12 +113,17 @@ const AddUserPage = () => {
               </div>
 
               {/* Permissions */}
+              <div
+                className={`${addUserStyle.userPermissions} ${activeTab !== "permissions" ? addUserStyle.hiddenMobile : ""}`}
+              >
+                <div className={addUserStyle.imanginaryDiv}></div>
                 <Permissions />
               </div>
             </div>
           </div>
         </div>
       </div>
+    </div>
   );
 };
 

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;
+  height: calc(100vh - 175px);
+  position: relative;
+  overflow: auto;
+  scrollbar-width: none;
+  padding-bottom: 60px;
 }
 .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,37 @@
   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: 0px;
+  }
+  .imanginaryDiv {
+    padding: 5px;
+  }
+  .header {
+    display: none;
+  }
+
+  .userDetails {
+    background: none;
+    padding: 0px 0px 0px 0px;
+    margin-top: 32px;
+  }
+  .userPermissions {
+    height: calc(100vh - 295px);
+  }
+}
+@media (max-width: 768px) {
+  .userDetails {
+    background: none;
+    padding: 0px 0px 0px 0px;
+    width: 100%;
+  }
 }

frontend/src/app/users/page.jsx

@@ -8,25 +8,25 @@ 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 useIsMobile from "../hooks/useIsMobile";
+import MobileSearchBar from "../components/mobileSearchBar/MobileSearchBar";
+import Card from "./user-card/Card";
 
 const UsersPage = () => {
   const router = useRouter();
-
+  const isMobile = useIsMobile();
   const sampleData = [
     {
-      id: 1,
       email: "nino.moonshot@gmail.com",
       fullName: "Nino Paul Cervantes",
       createdAt: "2024-10-21 08:01:31.474 +0000 UTC",
     },
     {
-      id: 2,
       email: "nino.moonshot@gmail.com",
       fullName: "Nino Paul Cervantes",
       createdAt: "2024-10-21 08:01:31.474 +0000 UTC",
     },
     {
-      id: 3,
       email: "nino.moonshot@gmail.com",
       fullName: "Nino Paul Cervantes",
       createdAt: "2024-10-21 08:01:31.474 +0000 UTC",
@@ -42,6 +42,20 @@ const UsersPage = () => {
             topbarTitle="Users"
             requiredButtons={["title", "add", "search"]}
           />
+
+          <div className={styles.cardContainer}>
+            <MobileSearchBar />
+            {sampleData.map((user, index) => {
+              return (
+                <Card
+                  user={user}
+                  key={index}
+                  onClick={() => router.push(`/users/${index}`)}
+                />
+              );
+            })}
+          </div>
+
           <div className={styles.tableContainer}>
             <table className={styles.table}>
               <thead className={styles.tableHeader}>
@@ -56,8 +70,8 @@ const UsersPage = () => {
                 {sampleData.map((user, index) => {
                   return (
                     <tr
-                      key={user.id}
+                      key={index}
-                      onClick={() => router.push(`/users/${user.id}`)}
+                      onClick={() => router.push(`/users/${index}`)}
                     >
                       <td>{user.email}</td>
                       <td>{user.fullName}</td>

frontend/src/app/users/styles.module.css

@@ -4,7 +4,6 @@
   position: relative;
   overflow: auto;
 }
-
 /* Table */
 .table {
   width: 100%;
@@ -22,9 +21,8 @@
   padding: 12px 24px;
   text-align: left;
   color: #85869b;
-  color: color(display-p3 0.5216 0.5255 0.6);
   font-family: Inter;
-  font-size: 13px;
+  font-size: var(--table-font-size);
   font-style: normal;
   flex: 1 0 0;
   font-weight: 500;
@@ -40,9 +38,8 @@
 .tableBody td {
   padding: 12px 24px;
   color: #eeeffd;
-  color: color(display-p3 0.9333 0.9373 0.9882);
   font-family: Inter;
-  font-size: 13px;
+  font-size: var(--table-font-size);
   font-style: normal;
   font-weight: 500;
   line-height: normal;
@@ -54,9 +51,7 @@
 }
 .tableBody tr:hover {
   border-bottom: 1px solid rgba(129, 135, 255, 0.25);
-  border-bottom: 1px solid color(display-p3 0.5098 0.5294 1 / 0.25);
   background: rgba(129, 135, 255, 0.05);
-  background: color(display-p3 0.5098 0.5294 1 / 0.05);
 }
 
 .tableActions {
@@ -67,3 +62,23 @@
   gap: 12px;
   align-self: stretch;
 }
+.cardContainer {
+  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;
+  }
+}

frontend/src/app/users/user-card/Card.jsx

@@ -0,0 +1,29 @@
+import DeleteIcon from "@/app/components/icons/delete";
+import React from "react";
+import styles from "./styles.module.css";
+
+const Card = (props) => {
+  return (
+    <div className={styles.cardContainer} {...props}>
+      <div className={styles.cardDetails}>
+        <div className={styles.list}>
+          <p>Email</p>
+          <p>{props?.user?.email}</p>
+        </div>
+        <div className={styles.list}>
+          <p>Full Name</p>
+          <p>{props?.user?.fullName}</p>
+        </div>
+        <div className={styles.list}>
+          <p>Date Created</p>
+          <p>{props?.user?.createdAt}</p>
+        </div>
+      </div>
+      <div className={styles.cardAction}>
+        <DeleteIcon />
+      </div>
+    </div>
+  );
+};
+
+export default Card;

frontend/src/app/users/user-card/styles.module.css

@@ -0,0 +1,43 @@
+.cardContainer {
+  display: flex;
+  padding: 16px 0;
+  align-items: flex-start;
+  gap: 16px;
+  align-self: stretch;
+  border-bottom: 1px solid #2c2d3d;
+  cursor: pointer;
+}
+.cardDetails {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 8px;
+  flex: 1 0 0;
+}
+.list {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 5px;
+  align-self: stretch;
+}
+.list p {
+  color: #85869b;
+  font-family: Inter;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+}
+
+.list p:nth-child(2) {
+  color: #eeeffd;
+  font-family: Inter;
+  font-size: 16px;
+  font-weight: 500;
+}
+.cardAction {
+  display: flex;
+  align-items: center;
+  gap: 17px;
+}