fixed agents add and view desktop

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

@@ -11,8 +11,8 @@ import Alert from "@/app/components/alerts/Alert";
 import Checkbox from "@/app/components/customCheckbox/Checkbox";
 
 const ViewAgentPage = () => {
-  const [useVpn, setUseVpn] = useState(true);
+  const [useVpn, setUseVpn] = useState(false);
-  const [enableLoki, setEnableLoki] = useState(true);
+  const [enableLoki, setEnableLoki] = useState(false);
   const {
     register,
     handleSubmit,
@@ -90,11 +90,12 @@ const ViewAgentPage = () => {
                     </>
                   }
                 />
-                {/* Agent endpoint */}
+                {useVpn ? (
+                  <>
                     <div className={createAgentStyle.inputContainer}>
                       <div className={createAgentStyle.labelContainer}>
                         <p>Tailscale Device Prefix</p>
-                    {/* <p className={createAgentStyle.required}>*</p> */}
+                        <p className={createAgentStyle.required}>*</p>
                       </div>
                       <TextField
                         placeHolder="doks-onecbdev-agent"
@@ -103,10 +104,11 @@ const ViewAgentPage = () => {
                       />
                       <Prompts show={false} />
                     </div>
+
                     <div className={createAgentStyle.inputContainer}>
                       <div className={createAgentStyle.labelContainer}>
                         <p>Tailscale Port</p>
-                    {/* <p className={createAgentStyle.required}>*</p> */}
+                        <p className={createAgentStyle.required}>*</p>
                       </div>
                       <TextField
                         placeHolder="6969"
@@ -115,10 +117,24 @@ const ViewAgentPage = () => {
                       />
                       <Prompts show={false} />
                     </div>
+                  </>
+                ) : (
+                  <div className={createAgentStyle.inputContainer}>
+                    <div className={createAgentStyle.labelContainer}>
+                      <p>Agent Endpoint</p>
+                      <p className={createAgentStyle.required}>*</p>
+                    </div>
+                    <TextField
+                      placeHolder="e.g., http://agent-01.example.com:8080"
+                      {...register("agentEndpoint", { required: true })}
+                      hasError={!!errors.agentEndpoint}
+                    />
+                    <Prompts show={false} />
+                  </div>
+                )}
               </div>
 
               <div className={createAgentStyle.lokiContainer}>
-                {/* Header */}
                 <div className={createAgentStyle.headerContainer}>
                   <div className={createAgentStyle.headerTxt}>
                     <p>Loki Integration (Optional)</p>

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

@@ -48,7 +48,6 @@ const AddAgentPage = () => {
             onSubmit={handleSubmit(onSubmit)}
           >
             <div className={createAgentStyle.createAgentContainer}>
-              <div className={createAgentStyle.div}></div>
               <div className={createAgentStyle.inputMainContainer}>
                 {/* AGENT FORM */}
                 <div className={createAgentStyle.headerContainer}>
@@ -93,7 +92,35 @@ const AddAgentPage = () => {
                     </>
                   }
                 />
-                {/* Agent endpoint */}
+                {useVpn ? (
+                  <>
+                    <div className={createAgentStyle.inputContainer}>
+                      <div className={createAgentStyle.labelContainer}>
+                        <p>Tailscale Device Prefix</p>
+                        <p className={createAgentStyle.required}>*</p>
+                      </div>
+                      <TextField
+                        placeHolder="doks-onecbdev-agent"
+                        {...register("agentEndpoint", { required: true })}
+                        hasError={!!errors.agentEndpoint}
+                      />
+                      <Prompts show={false} />
+                    </div>
+
+                    <div className={createAgentStyle.inputContainer}>
+                      <div className={createAgentStyle.labelContainer}>
+                        <p>Tailscale Port</p>
+                        <p className={createAgentStyle.required}>*</p>
+                      </div>
+                      <TextField
+                        placeHolder="6969"
+                        {...register("agentEndpoint", { required: true })}
+                        hasError={!!errors.agentEndpoint}
+                      />
+                      <Prompts show={false} />
+                    </div>
+                  </>
+                ) : (
                   <div className={createAgentStyle.inputContainer}>
                     <div className={createAgentStyle.labelContainer}>
                       <p>Agent Endpoint</p>
@@ -106,6 +133,7 @@ const AddAgentPage = () => {
                     />
                     <Prompts show={false} />
                   </div>
+                )}
               </div>
 
               <div className={createAgentStyle.lokiContainer}>

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

@@ -4,7 +4,6 @@
   align-items: flex-start;
   gap: 10px;
   flex: 1 0 0;
-  padding-top: 48px;
   align-self: stretch;
 }
 
@@ -14,9 +13,10 @@
   align-items: flex-start;
   align-self: stretch;
   /* Ibalhin ni ang padding sa formcontainer maoang nasa figma */
+  padding-top: 48px;
   gap: 16px;
   flex: 1 1 auto;
-  height: calc(100vh - 100px - 48px - 110px);
+  height: calc(100vh - 100px - 5px - 110px);
   overflow-y: auto;
   scrollbar-width: none;
 }
@@ -31,17 +31,9 @@
 .headerContainer {
   display: flex;
   align-items: flex-start;
-  gap: 17px;
   align-self: stretch;
 }
-.headerContainer > div {
+
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: flex-start;
-  gap: 5px;
-  flex: 1 0 0;
-}
 .headerTxt > p {
   /* width: 163px; */
   align-self: stretch;