From e1ec8a90c1b69adc6a849e958c2c7cd9a5354529 Mon Sep 17 00:00:00 2001
From: Laux Dev <2201104208@student.buksu.edu.ph>
Date: Mon, 16 Mar 2026 10:19:36 +0800
Subject: [PATCH] Fixed

---
 frontend/src/app/agents/card/Card.jsx         | 37 +++++++
 .../src/app/agents/card/styles.module.css     | 42 ++++++++
 frontend/src/app/agents/page.jsx              | 96 +++++++++++--------
 frontend/src/app/agents/styles.module.css     | 39 ++++++++
 .../mobileSearchBar/MobileSearchBar.jsx       | 13 +++
 .../mobileSearchBar/styles.module.css         | 28 ++++++
 .../app/components/topHeader/TopHeader.jsx    |  4 +-
 .../components/topHeader/styles.module.css    |  6 ++
 frontend/src/app/credentials/card/Card.jsx    |  4 +-
 frontend/src/app/credentials/page.jsx         | 10 +-
 frontend/src/app/globals.css                  |  2 +-
 frontend/src/app/hooks/useIsMobile.jsx        | 12 ++-
 frontend/src/app/organization/card/Card.jsx   |  4 +-
 frontend/src/app/organization/page.jsx        | 12 +--
 frontend/src/app/projects/page.jsx            |  9 +-
 .../src/app/projects/project-card/Card.jsx    | 18 ++--
 .../src/app/projects/view/styles.module.css   |  1 +
 17 files changed, 260 insertions(+), 77 deletions(-)
 create mode 100644 frontend/src/app/agents/card/Card.jsx
 create mode 100644 frontend/src/app/agents/card/styles.module.css
 create mode 100644 frontend/src/app/components/mobileSearchBar/MobileSearchBar.jsx
 create mode 100644 frontend/src/app/components/mobileSearchBar/styles.module.css

diff --git a/frontend/src/app/agents/card/Card.jsx b/frontend/src/app/agents/card/Card.jsx
new file mode 100644
index 0000000..83a69c4
--- /dev/null
+++ b/frontend/src/app/agents/card/Card.jsx
@@ -0,0 +1,37 @@
+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}>
+      <div className={styles.cardDetails}>
+        <div className={styles.list}>
+          <p>Name</p>
+          <p>{props?.data?.name}</p>
+        </div>
+        <div className={styles.list}>
+          <p>Endpoint</p>
+          <p>{props?.data?.endPoint}</p>
+        </div>
+        <div className={styles.list}>
+          <p>Type</p>
+          <p>{props?.data?.type}</p>
+        </div>
+        <div className={styles.list}>
+          <p>Proxy Name</p>
+          <p>{props?.data?.proxyName}</p>
+        </div>
+        <div className={styles.list}>
+          <p>Date Created</p>
+          <p>{props?.data?.dateCreated}</p>
+        </div>
+      </div>
+      <div className={styles.cardAction}>
+        <DeleteIcon />
+      </div>
+    </div>
+  );
+};
+
+export default Card;
diff --git a/frontend/src/app/agents/card/styles.module.css b/frontend/src/app/agents/card/styles.module.css
new file mode 100644
index 0000000..6968492
--- /dev/null
+++ b/frontend/src/app/agents/card/styles.module.css
@@ -0,0 +1,42 @@
+.cardContainer {
+  display: flex;
+  padding: 16px 0;
+  align-items: flex-start;
+  gap: 16px;
+  align-self: stretch;
+  border-bottom: 1px solid #2c2d3d;
+}
+.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;
+}
diff --git a/frontend/src/app/agents/page.jsx b/frontend/src/app/agents/page.jsx
index 25891e7..cf12780 100644
--- a/frontend/src/app/agents/page.jsx
+++ b/frontend/src/app/agents/page.jsx
@@ -8,6 +8,10 @@ import { useRouter } from "next/navigation";
 import ActionButton from "../components/actionButton/ActionButton";
 import DeleteIcon from "../components/icons/delete";
 import ViewIcon from "../components/icons/view";
+import useIsMobile from "../hooks/useIsMobile";
+import Card from "./card/Card";
+import SearchIcon from "../components/icons/search";
+import MobileSearchBar from "../components/mobileSearchBar/MobileSearchBar";
 
 const AgentsPage = () => {
   const router = useRouter();
@@ -98,6 +102,7 @@ const AgentsPage = () => {
       dateCreated: "2/11/2026",
     },
   ];
+  const isMobile = useIsMobile();
   return (
     <div className={globalStyle.section}>
       <div className={globalStyle.mainContainer}>
@@ -107,50 +112,59 @@ const AgentsPage = () => {
             topbarTitle="Agents"
             requiredButtons={["title", "add", "search"]}
           />
-          <div className={styles.tableContainer}>
-            <table className={styles.table}>
-              <thead>
-                <tr>
-                  <th width="25%">Name</th>
-                  <th>Endpoint</th>
-                  <th>Type</th>
-                  <th>Proxy Name</th>
-                  <th>Date Created</th>
+          {isMobile ? (
+            <div className={styles.cardContainer}>
+              <MobileSearchBar />
+              {sampleData.map((data, key) => {
+                return <Card data={data} key={key} />;
+              })}
+            </div>
+          ) : (
+            <div className={styles.tableContainer}>
+              <table className={styles.table}>
+                <thead>
+                  <tr>
+                    <th width="25%">Name</th>
+                    <th>Endpoint</th>
+                    <th>Type</th>
+                    <th>Proxy Name</th>
+                    <th>Date Created</th>
 
-                  <th width="10%"></th>
-                </tr>
-              </thead>
+                    <th width="10%"></th>
+                  </tr>
+                </thead>
 
-              <tbody>
-                {sampleData.map((org, index) => {
-                  return (
-                    <tr
-                      key={index}
-                      onClick={() => router.push(`/agents/${org.name}`)}
-                    >
-                      <td>{org.name}</td>
-                      <td>{org.endPoint}</td>
-                      <td>
-                        <div className={styles.type}>{org.type}</div>
-                      </td>
-                      <td>{org.proxyName}</td>
-                      <td>{org.dateCreated}</td>
-                      <td>
-                        <div className={styles.actions}>
-                          <div>
-                            <ActionButton icon={<ViewIcon />} />
+                <tbody>
+                  {sampleData.map((org, index) => {
+                    return (
+                      <tr
+                        key={index}
+                        onClick={() => router.push(`/agents/${org.name}`)}
+                      >
+                        <td>{org.name}</td>
+                        <td>{org.endPoint}</td>
+                        <td>
+                          <div className={styles.type}>{org.type}</div>
+                        </td>
+                        <td>{org.proxyName}</td>
+                        <td>{org.dateCreated}</td>
+                        <td>
+                          <div className={styles.actions}>
+                            <div>
+                              <ActionButton icon={<ViewIcon />} />
+                            </div>
+                            <div>
+                              <ActionButton icon={<DeleteIcon />} />
+                            </div>
                           </div>
-                          <div>
-                            <ActionButton icon={<DeleteIcon />} />
-                          </div>
-                        </div>
-                      </td>
-                    </tr>
-                  );
-                })}
-              </tbody>
-            </table>
-          </div>
+                        </td>
+                      </tr>
+                    );
+                  })}
+                </tbody>
+              </table>
+            </div>
+          )}
         </div>
       </div>
     </div>
diff --git a/frontend/src/app/agents/styles.module.css b/frontend/src/app/agents/styles.module.css
index 2490333..2c9f896 100644
--- a/frontend/src/app/agents/styles.module.css
+++ b/frontend/src/app/agents/styles.module.css
@@ -77,3 +77,42 @@
   gap: 12px;
   align-self: stretch;
 }
+.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;
+}
+.searchBarContainer {
+  display: flex;
+
+  align-items: center;
+  gap: 10px;
+  align-self: stretch;
+  position: relative;
+}
+.searchBarContainer > input {
+  width: 100%;
+  padding: 11px 12px;
+  padding-left: 30px;
+  background-color: transparent;
+  border: none;
+  outline: none;
+  background-color: transparent;
+  color: white;
+  font-family: Inter;
+  font-size: 16px;
+  outline: none;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  caret-color: #575bc7;
+}
+.searchIcon {
+  position: absolute;
+}
diff --git a/frontend/src/app/components/mobileSearchBar/MobileSearchBar.jsx b/frontend/src/app/components/mobileSearchBar/MobileSearchBar.jsx
new file mode 100644
index 0000000..616c8c6
--- /dev/null
+++ b/frontend/src/app/components/mobileSearchBar/MobileSearchBar.jsx
@@ -0,0 +1,13 @@
+import React from "react";
+import styles from "./styles.module.css";
+import SearchIcon from "../icons/search";
+const MobileSearchBar = (props) => {
+  return (
+    <div className={styles.searchBarContainer}>
+      <input type="text" className={styles.searchBar} />
+      <SearchIcon className={styles.searchIcon} />
+    </div>
+  );
+};
+
+export default MobileSearchBar;
diff --git a/frontend/src/app/components/mobileSearchBar/styles.module.css b/frontend/src/app/components/mobileSearchBar/styles.module.css
new file mode 100644
index 0000000..f9d97eb
--- /dev/null
+++ b/frontend/src/app/components/mobileSearchBar/styles.module.css
@@ -0,0 +1,28 @@
+.searchBarContainer {
+  display: flex;
+
+  align-items: center;
+  gap: 10px;
+  align-self: stretch;
+  position: relative;
+}
+.searchBarContainer > input {
+  width: 100%;
+  padding: 11px 12px;
+  padding-left: 30px;
+  background-color: transparent;
+  border: none;
+  outline: none;
+  background-color: transparent;
+  color: white;
+  font-family: Inter;
+  font-size: 16px;
+  outline: none;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  caret-color: #575bc7;
+}
+.searchIcon {
+  position: absolute;
+}
diff --git a/frontend/src/app/components/topHeader/TopHeader.jsx b/frontend/src/app/components/topHeader/TopHeader.jsx
index c2c0bfd..55cb402 100644
--- a/frontend/src/app/components/topHeader/TopHeader.jsx
+++ b/frontend/src/app/components/topHeader/TopHeader.jsx
@@ -59,13 +59,13 @@ const TopHeader = (props) => {
         <div className={styles.actionBar}>
           {props?.requiredButtons.includes("search") && (
             <div className={styles.searchBarContainer}>
-              <SearchBar />
+              {!isMobile && <SearchBar />}
             </div>
           )}
           {props?.requiredButtons.includes("env") && (
             <div className={styles.mngEnvKeyButton}>
               <EnviromentIcon />
-              <p>Manage Env. Key</p>
+              {!isMobile && <p>Manage Env. Key</p>}
             </div>
           )}
           {props?.requiredButtons.includes("add-services") && (
diff --git a/frontend/src/app/components/topHeader/styles.module.css b/frontend/src/app/components/topHeader/styles.module.css
index ad0538a..ed850fb 100644
--- a/frontend/src/app/components/topHeader/styles.module.css
+++ b/frontend/src/app/components/topHeader/styles.module.css
@@ -169,3 +169,9 @@
   line-height: normal;
   z-index: 13;
 }
+@media (max-width: 768px) {
+  .container {
+    background: #21232f00;
+    padding: 16px;
+  }
+}
diff --git a/frontend/src/app/credentials/card/Card.jsx b/frontend/src/app/credentials/card/Card.jsx
index 3c2bc12..cf7088b 100644
--- a/frontend/src/app/credentials/card/Card.jsx
+++ b/frontend/src/app/credentials/card/Card.jsx
@@ -8,11 +8,11 @@ const Card = (props) => {
       <div className={styles.cardDetails}>
         <div className={styles.list}>
           <p>Name</p>
-          <p>mongo tls ca crt</p>
+          <p>{props?.data?.name}</p>
         </div>
         <div className={styles.list}>
           <p>Organization ID</p>
-          <p>67160a5ae69144ff19aafb86</p>
+          <p>{props?.data?.organizationId}</p>
         </div>
       </div>
       <div className={styles.cardAction}>
diff --git a/frontend/src/app/credentials/page.jsx b/frontend/src/app/credentials/page.jsx
index 30a55d8..5ece895 100644
--- a/frontend/src/app/credentials/page.jsx
+++ b/frontend/src/app/credentials/page.jsx
@@ -8,6 +8,7 @@ import SuccessToast from "../components/toast/success/successToast";
 import ActionButton from "../components/actionButton/ActionButton";
 import useIsMobile from "../hooks/useIsMobile";
 import Card from "./card/Card";
+import MobileSearchBar from "../components/mobileSearchBar/MobileSearchBar";
 const CredentialsPage = () => {
   const isMobile = useIsMobile();
   const sampleData = [
@@ -72,11 +73,10 @@ const CredentialsPage = () => {
           />
           {isMobile ? (
             <div className={styles.cardContainer}>
-              <Card />
-              <Card />
-              <Card />
-              <Card />
-              <Card />
+              <MobileSearchBar />
+              {sampleData.map((data, key) => (
+                <Card data={data} key={key} />
+              ))}
             </div>
           ) : (
             <div className={styles.tableContainer}>
diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css
index 2bac78e..2f708a5 100644
--- a/frontend/src/app/globals.css
+++ b/frontend/src/app/globals.css
@@ -55,7 +55,7 @@ a {
 }
 @media (max-width: 900px) {
   :root {
-    --table-font-size: 11px;
+    --table-font-size: 12px;
   }
 }
 @media (max-width: 500px) {
diff --git a/frontend/src/app/hooks/useIsMobile.jsx b/frontend/src/app/hooks/useIsMobile.jsx
index 3ab084c..32b0027 100644
--- a/frontend/src/app/hooks/useIsMobile.jsx
+++ b/frontend/src/app/hooks/useIsMobile.jsx
@@ -1,14 +1,18 @@
 import { useState, useEffect } from "react";
 
 export default function useIsMobile(breakpoint = 768) {
-  const [isMobile, setIsMobile] = useState(window.innerWidth <= breakpoint);
+  const [isMobile, setIsMobile] = useState(false);
 
   useEffect(() => {
-    const handleResize = () => {
+    const checkScreen = () => {
       setIsMobile(window.innerWidth <= breakpoint);
     };
-    window.addEventListener("resize", handleResize);
-    return () => window.removeEventListener("resize", handleResize);
+
+    checkScreen(); // run once on mount
+
+    window.addEventListener("resize", checkScreen);
+
+    return () => window.removeEventListener("resize", checkScreen);
   }, [breakpoint]);
 
   return isMobile;
diff --git a/frontend/src/app/organization/card/Card.jsx b/frontend/src/app/organization/card/Card.jsx
index fa1b170..730e448 100644
--- a/frontend/src/app/organization/card/Card.jsx
+++ b/frontend/src/app/organization/card/Card.jsx
@@ -8,11 +8,11 @@ const Card = (props) => {
       <div className={styles.cardDetails}>
         <div className={styles.list}>
           <p>Organization Name</p>
-          <p>ProjectMoonShot Inc.</p>
+          <p>{props?.data?.organizationName}</p>
         </div>
         <div className={styles.list}>
           <p>Date Created</p>
-          <p>2024-10-21 08:01:30.556 +0000 UTC</p>
+          <p>{props?.data?.dateCreated}</p>
         </div>
       </div>
       <div className={styles.cardAction}>
diff --git a/frontend/src/app/organization/page.jsx b/frontend/src/app/organization/page.jsx
index 6c25a31..8ea1c70 100644
--- a/frontend/src/app/organization/page.jsx
+++ b/frontend/src/app/organization/page.jsx
@@ -8,6 +8,7 @@ import DeleteIcon from "../components/icons/delete";
 import ActionButton from "../components/actionButton/ActionButton";
 import Card from "./card/Card";
 import useIsMobile from "../hooks/useIsMobile";
+import MobileSearchBar from "../components/mobileSearchBar/MobileSearchBar";
 
 const OrganizationPage = () => {
   const isMobile = useIsMobile();
@@ -69,13 +70,10 @@ const OrganizationPage = () => {
           />
           {isMobile ? (
             <div className={styles.cardContainer}>
-              <Card />
-              <Card />
-              <Card />
-              <Card />
-              <Card />
-              <Card />
-              <Card />
+              <MobileSearchBar />
+              {sampleData.map((data, key) => (
+                <Card data={data} key={key} />
+              ))}
             </div>
           ) : (
             <div className={styles.tableContainer}>
diff --git a/frontend/src/app/projects/page.jsx b/frontend/src/app/projects/page.jsx
index ba50b51..d4227ad 100644
--- a/frontend/src/app/projects/page.jsx
+++ b/frontend/src/app/projects/page.jsx
@@ -10,6 +10,7 @@ import ViewIcon from "../components/icons/view";
 import ActionButton from "../components/actionButton/ActionButton";
 import useIsMobile from "../hooks/useIsMobile";
 import Card from "./project-card/Card";
+import MobileSearchBar from "../components/mobileSearchBar/MobileSearchBar";
 const ProjectsPage = () => {
   const router = useRouter();
   const isMobile = useIsMobile();
@@ -182,10 +183,10 @@ const ProjectsPage = () => {
           />
           {isMobile ? (
             <div className={styles.cardContainer}>
-              <Card />
-              <Card />
-              <Card />
-              <Card />
+              <MobileSearchBar />
+              {sampleData.map((data, key) => (
+                <Card data={data} key={key} />
+              ))}
             </div>
           ) : (
             <div className={styles.tableContainer}>
diff --git a/frontend/src/app/projects/project-card/Card.jsx b/frontend/src/app/projects/project-card/Card.jsx
index a6571b0..8f32326 100644
--- a/frontend/src/app/projects/project-card/Card.jsx
+++ b/frontend/src/app/projects/project-card/Card.jsx
@@ -2,38 +2,38 @@ import DeleteIcon from "@/app/components/icons/delete";
 import React from "react";
 import styles from "./styles.module.css";
 
-const Card = () => {
+const Card = (props) => {
   return (
     <div className={styles.cardContainer}>
       <div className={styles.cardDetails}>
         <div className={styles.list}>
           <p>Name</p>
-          <p>DOKS One Cooperative Bank Backend Develop</p>
+          <p>{props?.data?.name}</p>
         </div>
         <div className={styles.list}>
           <p>CPU Used/Limit</p>
           <p>
-            <span className={styles.used}>13500</span> /{" "}
-            <span className={styles.limit}>20000</span>
+            <span className={styles.used}>{props?.data?.cpuUsed}</span> /{" "}
+            <span className={styles.limit}>{props?.data?.cpuLimit}</span>
           </p>
         </div>
         <div className={styles.list}>
           <p>Memory Used/Limit</p>
           <p>
-            <span className={styles.used}>13500</span> /{" "}
-            <span className={styles.limit}>20000</span>
+            <span className={styles.used}>{props?.data?.memoryUsed}</span> /{" "}
+            <span className={styles.limit}>{props?.data?.memoryLimit}</span>
           </p>
         </div>
         <div className={styles.list}>
           <p>Storage Used/Limit</p>
           <p>
-            <span className={styles.used}>10000</span> /{" "}
-            <span className={styles.limit}>1000000</span>
+            <span className={styles.used}>{props?.data?.storageUsed}</span> /{" "}
+            <span className={styles.limit}>{props?.data?.storageLimit}</span>
           </p>
         </div>
         <div className={styles.list}>
           <p>Date Created</p>
-          <p>2025-11-07 01:43:18.313 +0000 UTC</p>
+          <p>{props?.data?.dateCreated}</p>
         </div>
       </div>
       <div className={styles.cardAction}>
diff --git a/frontend/src/app/projects/view/styles.module.css b/frontend/src/app/projects/view/styles.module.css
index 7c09cfd..97d0388 100644
--- a/frontend/src/app/projects/view/styles.module.css
+++ b/frontend/src/app/projects/view/styles.module.css
@@ -177,6 +177,7 @@
   box-shadow: 0 0 10px 0 #000;
   color: black;
   opacity: 0;
+  text-wrap: nowrap;
 }
 .imageText > p {
   height: 100%;