feat : update scroll and style

Deskripsi:
- update api
- update globle
- update project
- update user
- update profile

No Issue

src/module/user/member/ui/edit_member.tsx

@@ -178,6 +178,9 @@ export default function EditMember({ id }: { id: string }) {
                      size="150"
                      radius={"100"}
                      src={img}
+                     style={{
+                        border: `1px solid ${"#C1BFBFFF"}`
+                      }}
                   />
                </Indicator>
             }

src/module/user/member/ui/tab_list_member.tsx

@@ -1,9 +1,9 @@
 
-import { globalRole, SkeletonSingle, TEMA, WARNA } from "@/module/_global"
+import { currentScroll, globalRole, SkeletonSingle, TEMA, WARNA } from "@/module/_global"
 import { Box, Text, TextInput, Divider, Avatar, Grid } from "@mantine/core"
 import { useShallowEffect } from "@mantine/hooks"
 import { useRouter, useSearchParams } from "next/navigation"
-import { useState } from "react"
+import { useEffect, useState } from "react"
 import { HiMagnifyingGlass } from "react-icons/hi2"
 import { IListMember } from "../lib/type_member"
 import { funGetAllmember } from "../lib/api_member"
@@ -25,14 +25,24 @@ export default function TabListMember() {
    const [nameGroup, setNameGroup] = useState('')
    const tema = useHookstate(TEMA)
 
+   //scroll
+   const { value: containerRef } = useHookstate(currentScroll);
+   const [isPage, setPage] = useState(1)
 
-   async function getAllUser() {
+
+   async function getAllUser(loading: boolean) {
       try {
          setLoading(true)
-         const res = await funGetAllmember('?active=' + status + '&group=' + group + '&search=' + searchQuery)
+         const res = await funGetAllmember('?active=' + status + '&group=' + group + '&search=' + searchQuery + '&page=' + isPage)
          if (res.success) {
-            setDataMember(res.data)
-            setNameGroup(res.filter.name)
+               if (isPage == 1) {
+                  setDataMember(res.data)
+                  setNameGroup(res.filter.name)
+               } else {
+                  setDataMember([...dataMember, ...res.data])
+                  setNameGroup(res.filter.name)
+               }
+         
          } else {
             toast.error(res.message)
          }
@@ -44,10 +54,40 @@ export default function TabListMember() {
       }
    }
 
+   function onSearch(val:string){
+      setSearchQuery(val)
+      setPage(1)
+   }
+
    useShallowEffect(() => {
-      getAllUser()
+      getAllUser(true)
    }, [status, searchQuery])
 
+   useShallowEffect(() => {
+      getAllUser(false)
+   }, [status, isPage])
+
+   useEffect(() => {
+      const handleScroll = async () => {
+         if (containerRef && containerRef.current) {
+            const scrollTop = containerRef.current.scrollTop;
+            const containerHeight = containerRef.current.clientHeight;
+            const scrollHeight = containerRef.current.scrollHeight;
+
+            if (scrollTop + containerHeight >= scrollHeight) {
+               setPage(isPage + 1)
+            }
+
+         }
+      };
+
+      const container = containerRef?.current;
+      container?.addEventListener("scroll", handleScroll);
+      return () => {
+         container?.removeEventListener("scroll", handleScroll);
+      };
+   }, [containerRef, isPage]);
+
    return (
       <>
          <Box>
@@ -63,7 +103,7 @@ export default function TabListMember() {
                radius={30}
                leftSection={<HiMagnifyingGlass size={20} />}
                placeholder="Pencarian"
-               onChange={(e) => setSearchQuery(e.target.value)}
+               onChange={(e) => onSearch(e.target.value)}
                my={10}
             />
             {loading

src/module/user/profile/ui/edit_profile.tsx

@@ -120,6 +120,9 @@ export default function EditProfile() {
               size="150"
               radius={"100"}
               src={img}
+              style={{
+                border: `1px solid ${"#C1BFBFFF"}`
+              }}
             />
           </Indicator>
         }