added loki form to agents

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}
-                      onClick={() => router.push(`/users/${user.id}`)}
+                      key={index}
+                      onClick={() => router.push(`/users/${index}`)}
                     >
                       <td>{user.email}</td>
                       <td>{user.fullName}</td>