add search to user admin

lib/api/controllers/users/getUsers.ts

@@ -14,7 +14,6 @@ export default async function getUsers() {
         },
       },
       createdAt: true,
-      updatedAt: true,
     },
   });
 

pages/admin.tsx

@@ -11,6 +11,9 @@ interface User extends U {
 export default function Admin() {
   const [users, setUsers] = useState<User[]>();
 
+  const [searchQuery, setSearchQuery] = useState("");
+  const [filteredUsers, setFilteredUsers] = useState<User[]>();
+
   useEffect(() => {
     // fetch users
     fetch("/api/v1/users")
@@ -19,7 +22,8 @@ export default function Admin() {
   }, []);
 
   return (
-    <div className="max-w-5xl mx-auto mt-5 px-5">
+    <div className="max-w-6xl mx-auto p-5">
+      <div className="flex sm:flex-row flex-col justify-between gap-2">
         <div className="gap-2 inline-flex items-center">
           <Link
             href="/dashboard"
@@ -27,14 +31,65 @@ export default function Admin() {
           >
             <i className="bi-chevron-left text-xl"></i>
           </Link>
-        <p className="capitalize text-3xl font-thin inline">
+          <p className="capitalize sm:text-3xl text-2xl font-thin inline">
             User Administration
           </p>
         </div>
 
+        <div className="flex items-center relative justify-between gap-2">
+          <div>
+            <label
+              htmlFor="search-box"
+              className="inline-flex items-center w-fit absolute left-1 pointer-events-none rounded-md p-1 text-primary"
+            >
+              <i className="bi-search"></i>
+            </label>
+
+            <input
+              id="search-box"
+              type="text"
+              placeholder={"Search for Users"}
+              value={searchQuery}
+              onChange={(e) => {
+                setSearchQuery(e.target.value);
+
+                if (users) {
+                  setFilteredUsers(
+                    users.filter((user) =>
+                      JSON.stringify(user)
+                        .toLowerCase()
+                        .includes(e.target.value.toLowerCase())
+                    )
+                  );
+                }
+              }}
+              className="border border-neutral-content bg-base-200 focus:border-primary py-1 rounded-md pl-9 pr-2 w-full max-w-[15rem] md:w-[15rem] md:max-w-full duration-200 outline-none"
+            />
+          </div>
+
+          <div className="flex items-center btn btn-accent dark:border-violet-400 text-white btn-sm px-2 aspect-square relative">
+            <i className="bi-plus text-3xl absolute"></i>
+          </div>
+        </div>
+      </div>
+
       <div className="divider my-3"></div>
 
-      {users && users.length > 0 ? (
+      {filteredUsers && filteredUsers.length > 0 && searchQuery !== "" ? (
+        UserLising(filteredUsers)
+      ) : searchQuery !== "" ? (
+        <p>No users found with the given search query.</p>
+      ) : users && users.length > 0 ? (
+        UserLising(users)
+      ) : (
+        <p>No users found.</p>
+      )}
+    </div>
+  );
+}
+
+const UserLising = (users: User[]) => {
+  return (
     <div className="overflow-x-auto whitespace-nowrap w-full">
       <table className="table table-zebra w-full">
         <thead>
@@ -44,34 +99,32 @@ export default function Admin() {
             {process.env.NEXT_PUBLIC_EMAIL_PROVIDER === "true" && (
               <th>Email</th>
             )}
-                {process.env.NEXT_PUBLIC_STRIPE === "true" && (
+            {process.env.NEXT_PUBLIC_STRIPE === "true" && <th>Subscribed</th>}
-                  <th>Subscribed</th>
-                )}
             <th>Created At</th>
-                <th>Updated At</th>
+            <th></th>
           </tr>
         </thead>
         <tbody>
           {users.map((user, index) => (
             <tr key={user.id}>
-                  <td>{index + 1}</td>
+              <td className="rounded-tl">{index + 1}</td>
               <td>{user.username}</td>
               {process.env.NEXT_PUBLIC_EMAIL_PROVIDER === "true" && (
                 <td>{user.email}</td>
               )}
               {process.env.NEXT_PUBLIC_STRIPE === "true" && (
-                    <td>{user.subscriptions.active ? "Yes" : "No"}</td>
+                <td>{JSON.stringify(user.subscriptions.active)}</td>
               )}
               <td>{new Date(user.createdAt).toLocaleString()}</td>
-                  <td>{new Date(user.updatedAt).toLocaleString()}</td>
+              <td>
+                <button className="btn btn-sm btn-ghost">
+                  <i className="bi bi-trash"></i>
+                </button>
+              </td>
             </tr>
           ))}
         </tbody>
       </table>
     </div>
-      ) : (
-        <p>No users found.</p>
-      )}
-    </div>
   );
-}
+};