feat:search user table

components/form/login.tsx

@@ -68,6 +68,7 @@ export default function Login() {
     if (!username || !password) {
       error("Username & Password Wajib Diisi !");
     } else {
+      // login dengan otp
       const response = await emailValidation(data);
       if (response?.error) {
         error("Username / Password Tidak Sesuai");
@@ -80,6 +81,7 @@ export default function Login() {
         setNeedOtp(true);
       }
 
+      // login tanpa otp
       // loading();
       // const response = await postSignIn(data);
       // if (response?.error) {
@@ -152,7 +154,6 @@ export default function Login() {
       //   close();
       // }
     }
-    // }
   };
 
   const checkUsername = async () => {

components/table/master-user-table.tsx

@@ -4,12 +4,14 @@ import {
   DeleteIcon,
   DotsYIcon,
   EyeIconMdi,
+  SearchIcon,
 } from "@/components/icons";
 import { error, success } from "@/config/swal";
 import { deleteArticle, getListArticle } from "@/services/article";
 import { deleteMasterUser, listMasterUsers } from "@/services/master-user";
 import { Article, MasterUser } from "@/types/globals";
 import { Button } from "@heroui/button";
+import { Input } from "@heroui/input";
 import {
   Chip,
   ChipProps,
@@ -18,6 +20,8 @@ import {
   DropdownMenu,
   DropdownTrigger,
   Pagination,
+  Select,
+  SelectItem,
   Spinner,
   Table,
   TableBody,
@@ -48,13 +52,22 @@ export default function MasterUserTable() {
   const [user, setUser] = useState<MasterUser[]>([]);
   const [page, setPage] = useState(1);
   const [totalPage, setTotalPage] = useState(1);
+  const [showData, setShowData] = useState("10");
+  const [search, setSearch] = useState("");
+  const [searchType, setSearchType] = useState("username");
 
   useEffect(() => {
     initState();
-  }, [page]);
+  }, [page, showData]);
 
   async function initState() {
-    const res = await listMasterUsers({ page: page, limit: 10 });
+    const res = await listMasterUsers({
+      page: page,
+      limit: Number(showData),
+      fullname: searchType === "fullname" ? search : "",
+      username: searchType === "username" ? search : "",
+      email: searchType === "email" ? search : "",
+    });
     getTableNumber(10, res?.data?.data);
     setTotalPage(res?.data?.meta?.totalPage);
   }
@@ -175,10 +188,85 @@ export default function MasterUserTable() {
     }
   }, []);
 
+  let typingTimer: NodeJS.Timeout;
+  const doneTypingInterval = 1500;
+
+  const handleKeyUp = () => {
+    clearTimeout(typingTimer);
+    typingTimer = setTimeout(doneTyping, doneTypingInterval);
+  };
+
+  const handleKeyDown = () => {
+    clearTimeout(typingTimer);
+  };
+
+  async function doneTyping() {
+    initState();
+  }
+
   return (
     <>
       <div className="mx-3 my-5">
         <div className="flex flex-col items-center rounded-2xl">
+          <div className="flex flex-col md:flex-row gap-3 w-full mb-2">
+            <div className="flex flex-col gap-1 w-full lg:w-1/3">
+              <p className="font-semibold text-sm">Pencarian</p>
+              <Input
+                aria-label="Search"
+                classNames={{
+                  inputWrapper: "bg-default-100",
+                  input: "text-sm",
+                }}
+                labelPlacement="outside"
+                startContent={
+                  <SearchIcon className="text-base text-default-400 pointer-events-none flex-shrink-0" />
+                }
+                type="text"
+                onChange={(e) => setSearch(e.target.value)}
+                onKeyUp={handleKeyUp}
+                onKeyDown={handleKeyDown}
+                endContent={
+                  <Select
+                    label=""
+                    size="sm"
+                    variant="flat"
+                    labelPlacement="outside"
+                    placeholder="Select"
+                    selectedKeys={[searchType]}
+                    className="w-[160px]"
+                    classNames={{ trigger: "border-1" }}
+                    onChange={(e) =>
+                      e.target.value === "" ? "" : setSearchType(e.target.value)
+                    }
+                  >
+                    <SelectItem key="username">Username</SelectItem>
+                    <SelectItem key="fullnamme">Fullname</SelectItem>
+                    <SelectItem key="email">Email</SelectItem>
+                  </Select>
+                }
+              />
+            </div>
+            <div className="flex flex-col gap-1 w-full lg:w-[72px]">
+              <p className="font-semibold text-sm">Data</p>
+              <Select
+                label=""
+                variant="bordered"
+                labelPlacement="outside"
+                placeholder="Select"
+                selectedKeys={[showData]}
+                className="w-full"
+                classNames={{ trigger: "border-1" }}
+                onChange={(e) =>
+                  e.target.value === "" ? "" : setShowData(e.target.value)
+                }
+              >
+                <SelectItem key="5">5</SelectItem>
+                <SelectItem key="10">10</SelectItem>
+                <SelectItem key="25">25</SelectItem>
+                <SelectItem key="50">50</SelectItem>
+              </Select>
+            </div>
+          </div>
           <Table
             // selectionMode="multiple"
             aria-label="micro issue table"

services/master-user.ts

@@ -15,7 +15,12 @@ export async function listMasterUsers(data: any) {
   const headers = {
     "content-type": "application/json",
   };
-  return await httpGet(`/users?page=${data.page}&limit=${data.limit}`, headers);
+  return await httpGet(
+    `/users?page=${data.page}&limit=${data.limit}&username=${
+      data.username || ""
+    }&fullname=${data.fullname || ""}&email=${data.email || ""}`,
+    headers
+  );
 }
 
 export async function createMasterUser(data: any) {