feat : update scroll and style

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

No Issue

src/app/api/user/route.ts

@@ -14,6 +14,8 @@ export async function GET(request: Request) {
     const name = searchParams.get('search')
     const idGroup = searchParams.get("group");
     const active = searchParams.get("active");
+    const page = searchParams.get('page');
+    const dataSkip = Number(page) * 5 - 5;
     const user = await funGetUserByCookies()
     if (user.id == undefined) {
       return NextResponse.json({ success: false, message: "Anda harus login untuk mengakses ini" }, { status: 401 });
@@ -36,6 +38,8 @@ export async function GET(request: Request) {
 
 
     const users = await prisma.user.findMany({
+      skip: dataSkip,
+      take: 5,
       where: {
         isActive: active == 'false' ? false : true,
         idGroup: String(fixGroup),

src/module/_global/components/reload_button_top.tsx

@@ -36,7 +36,7 @@ export default function ReloadButtonTop({ onReload, title }: { onReload: () => v
               style={{
                 ...state,
                 zIndex: 999,
-                position: 'absolute',
+                position: 'fixed',
                 top: 90,
                 display: 'flex',
                 justifyContent: 'center',

src/module/project/ui/list_tugas_detail_project.tsx

@@ -171,9 +171,13 @@ export default function ListTugasDetailProject() {
           <Box>
             <Stack pt={10}>
               <SimpleGrid
-                cols={{ base: 3, sm: 3, lg: 3 }}
+                cols={{ base: 2, sm: 3, lg: 3 }}
+                style={{
+                  alignContent: 'flex-start',
+                  alignItems: 'flex-start',
+                }}
               >
-                <Flex onClick={() => { setOpenDrawerStatus(true) }} justify={'center'} align={'center'} direction={'column'} >
+                <Flex onClick={() => { setOpenDrawerStatus(true) }} justify={'center'} align={'center'} direction={'column'}  pb={20}>
                   <Box>
                     <AiOutlineFileDone size={30} color={tema.get().utama} />
                   </Box>

src/module/project/ui/navbar_detail_project.tsx

@@ -59,6 +59,10 @@ export default function NavbarDetailProject() {
           <Stack pt={10}>
             <SimpleGrid
               cols={{ base: 3, sm: 3, lg: 3 }}
+              style={{
+                alignContent: 'flex-start',
+                alignItems: 'flex-start',
+              }}
             >
               <Flex justify={'center'} align={'center'} direction={'column'}
                 style={{
@@ -67,6 +71,7 @@ export default function NavbarDetailProject() {
                 onClick={() => {
                   router.push(param.id + '/add-task')
                 }}
+                pb={20}
               >
                 <Box>
                   <IoAddCircle size={30} color={tema.get().utama} />

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>
         }