feat : update filter dll

Deskripsi
- position
- project
- announcement
- calneder
- division
- document
- home

No Issue

src/app/api/position/route.ts

@@ -9,9 +9,9 @@ import { NextResponse } from "next/server";
 export async function GET(request: Request) {
     try {
 
-        let grupFix
+        let grup
         const { searchParams } = new URL(request.url);
-        const groupID = searchParams.get('group');
+        const idGroup = searchParams.get("group");
         const active = searchParams.get('active');
         const name = searchParams.get('search')
         const user = await funGetUserByCookies()
@@ -19,15 +19,15 @@ export async function GET(request: Request) {
             return NextResponse.json({ success: false, message: "Anda harus login untuk mengakses ini" }, { status: 401 });
         }
 
-        if (groupID == "null") {
+        if (idGroup == "null" || idGroup == undefined) {
-            grupFix = user.idGroup
+            grup = user.idGroup
-        } else {
+         } else {
-            grupFix = groupID
+            grup = idGroup
-        }
+         }
 
         const cek = await prisma.group.count({
             where: {
-                id: String(grupFix),
+                id: grup,
                 isActive: true
             }
         })
@@ -38,7 +38,7 @@ export async function GET(request: Request) {
 
         const positions = await prisma.position.findMany({
             where: {
-                idGroup: String(grupFix),
+                idGroup: grup,
                 isActive: (active == "true" ? true : false),
                 name: {
                     contains: (name == undefined || name == null) ? "" : name,

src/app/api/project/route.ts

@@ -16,18 +16,25 @@ export async function GET(request: Request) {
 
         const { searchParams } = new URL(request.url);
 
+        let grup
         const name = searchParams.get('search');
         const status = searchParams.get('status');
+        const idGroup = searchParams.get("group");
         const villageId = user.idVillage
-        const groupId = user.idGroup
         const userId = user.id
 
+        if (idGroup == "null" || idGroup == undefined) {
+            grup = user.idGroup
+        } else {
+            grup = idGroup
+        }
+
 
         const data = await prisma.project.findMany({
             where: {
                 isActive: true,
                 idVillage: String(villageId),
-                idGroup: String(groupId),
+                idGroup: grup,
                 createdBy: String(userId),
                 title: {
                     contains: (name == undefined || name == "null") ? "" : name,

src/module/_global/view/view_filter.tsx

@@ -1,5 +1,5 @@
 'use client'
-import { Box, Group, Divider, Button, Text } from "@mantine/core";
+import { Box, Group, Divider, Button, Text, Skeleton, rem } from "@mantine/core";
 import { useEffect, useState } from "react";
 import { FaCheck } from "react-icons/fa6";
 import { WARNA } from "../fun/WARNA";
@@ -13,6 +13,7 @@ export default function ViewFilter({ linkFilter }: { linkFilter: string }) {
    const [selectedFilter, setSelectedFilter] = useState<string | null>(null);
    const [checked, setChecked] = useState<IDataGroup[]>([]);
    const [searchParams, setSearchParams] = useState({ groupId: '' });
+   const [loading, setLoading] = useState(true)
 
    const handleFilterClick = (id: string) => {
       setSelectedFilter(id);
@@ -20,15 +21,19 @@ export default function ViewFilter({ linkFilter }: { linkFilter: string }) {
 
    async function getAllGroupFilter() {
       try {
+         setLoading(true)
          const response = await funGetAllGroup('?active=true')
          if (response.success) {
             setChecked(response.data);
+            setLoading(false)
          } else {
             toast.error(response.message);
          }
       } catch (error) {
          console.error(error);
          toast.error("Gagal mendapatkan grup, coba lagi nanti");
+      } finally {
+         setLoading(false);
       }
    }
 
@@ -48,34 +53,52 @@ export default function ViewFilter({ linkFilter }: { linkFilter: string }) {
       <Box>
          <LayoutNavbarNew back='' title='Filter' menu />
          <Box p={20}>
-            {checked.map((filter) => (
+            {loading ? (
-               <Box key={filter.id}>
+               Array(5)
-                  <Group
+                  .fill(null)
-                     justify="space-between"
+                  .map((_, i) => (
-                     align="center"
+                     <Box key={i}>
-                     mb={10}
+                        <Box>
-                     onClick={() => handleFilterClick(filter.id)}
+                           <Skeleton width={"100%"} mb={15} height={30} radius={"md"} />
-                  >
+                        </Box>
-                     <Text fw={selectedFilter === filter.id ? 'bold' : 'normal'}>
+                     </Box>
-                        {filter.name}
+                  ))
-                     </Text>
+            ) :
-                     {selectedFilter === filter.id && <FaCheck size={25} />}
+               (
-                  </Group>
+                  checked.map((filter) => (
-                  <Divider my={"sm"} />
+                     <Box key={filter.id}>
-               </Box>
+                        <Group
-            ))}
+                           justify="space-between"
-            <Button
+                           align="center"
-               fullWidth
+                           mb={10}
-               radius={100}
+                           onClick={() => handleFilterClick(filter.id)}
-               size="lg"
+                        >
-               color={WARNA.biruTua}
+                           <Text fw={selectedFilter === filter.id ? 'bold' : 'normal'}>
-               onClick={() => {
+                              {filter.name}
-                  router.push(`/${linkFilter}?group=` + selectedFilter)
+                           </Text>
-               }}
+                           {selectedFilter === filter.id && <FaCheck size={25} />}
-            >
+                        </Group>
-               Terapkan
+                        <Divider my={"sm"} />
-            </Button>
+                     </Box>
+                  ))
+               )
+            }
          </Box>
+            <Box pos={'fixed'} bottom={0} p={rem(15)}  w={"100%"} style={{
+               maxWidth: rem(550)
+            }}>
+               <Button
+                  fullWidth
+                  radius={100}
+                  size="lg"
+                  color={WARNA.biruTua}
+                  onClick={() => {
+                     router.push(`/${linkFilter}?group=` + selectedFilter)
+                  }}
+               >
+                  Terapkan
+               </Button>
+            </Box>
       </Box>
    );
 }

src/module/announcement/ui/drawer_announcement.tsx

@@ -29,22 +29,6 @@ export default function DrawerAnnouncement() {
                      <Text c={WARNA.biruTua} ta='center'>Tambah Pengumuman</Text>
                   </Box>
                </Flex>
-
-               <Flex justify={'center'} align={'center'} direction={'column'}
-                  style={{
-                     cursor: 'pointer'
-                  }}
-                  onClick={() => {
-                     router.push('/announcement?page=filter')
-                  }}
-               >
-                  <Box>
-                     <RiFilter2Line size={30} color={WARNA.biruTua} />
-                  </Box>
-                  <Box>
-                     <Text c={WARNA.biruTua} ta='center'>Filter</Text>
-                  </Box>
-               </Flex>
             </SimpleGrid>
          </Stack>
       </Box>

src/module/announcement/ui/list_announcement.tsx

@@ -4,11 +4,12 @@ import { ActionIcon, Box, Center, Divider, Grid, Group, Spoiler, Stack, Text, Te
 import React, { useState } from 'react';
 import { TfiAnnouncement } from "react-icons/tfi";
 import { HiMagnifyingGlass } from 'react-icons/hi2';
-import { useRouter } from 'next/navigation';
+import { useRouter, useSearchParams } from 'next/navigation';
 import { useShallowEffect } from '@mantine/hooks';
 import { IListDataAnnouncement } from '../lib/type_announcement';
 import { funGetAllAnnouncement } from '../lib/api_announcement';
 import toast from 'react-hot-toast';
+import { funGetAllGroup, IDataGroup } from '@/module/group';
 
 
 export default function ListAnnouncement() {

src/module/calender/ui/detail_event_division.tsx

@@ -54,7 +54,7 @@ export default function DetailEventDivision() {
       <Box p={20}>
         {loading
           ?
-          <SkeletonDetailEvent/>
+          <SkeletonDetailEvent />
           :
           <Box style={{
             border: `1px solid ${"#D8D8F1"}`,
@@ -157,28 +157,36 @@ export default function DetailEventDivision() {
                 px={20}
                 pt={20}
               >
-                {isDataAnggota.map((v, i) => {
+                {isLengthMember == 0? (
-                  return (
+                  <Box style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '30vh' }}>
-                    <Flex
+                    <Text c="dimmed" ta={"center"} fs={"italic"}>Tidak ada anggota</Text>
-                      justify={"space-between"}
+                  </Box>
-                      align={"center"}
+                ) :
-                      mb={20}
+                  <Box>
-                      key={i}
+                    {isDataAnggota.map((v, i) => {
-                    >
+                      return (
-                      <Group>
+                        <Flex
-                        <Avatar src={""} alt="it's me" size="lg" />
+                          justify={"space-between"}
-                        <Box>
+                          align={"center"}
-                          <Text c={WARNA.biruTua} fw={"bold"}>
+                          mb={20}
-                            {v.name}
+                          key={i}
-                          </Text>
+                        >
-                          <Text c={"#5A687D"} fz={14}>
+                          <Group>
-                            {v.email}
+                            <Avatar src={""} alt="it's me" size="lg" />
-                          </Text>
+                            <Box>
-                        </Box>
+                              <Text c={WARNA.biruTua} fw={"bold"}>
-                      </Group>
+                                {v.name}
-                    </Flex>
+                              </Text>
-                  );
+                              <Text c={"#5A687D"} fz={14}>
-                })}
+                                {v.email}
+                              </Text>
+                            </Box>
+                          </Group>
+                        </Flex>
+                      );
+                    })}
+                  </Box>
+                }
               </Box>
             </Box>
           </Box>

src/module/discussion/ui/detail_discussion.tsx

@@ -1,5 +1,5 @@
 "use client"
-import { ActionIcon, Avatar, Badge, Box, Center, Divider, Flex, Grid, Group, Skeleton, Spoiler, Text, TextInput } from "@mantine/core";
+import { ActionIcon, Avatar, Badge, Box, Center, Divider, Flex, Grid, Group, Input, rem, Skeleton, Spoiler, Text, TextInput } from "@mantine/core";
 import { SkeletonDetailDiscussionComment, SkeletonDetailDiscussionMember, SkeletonSingle, WARNA } from "@/module/_global";
 import { GrChatOption } from "react-icons/gr";
 import { LuSendHorizonal } from "react-icons/lu";
@@ -64,7 +64,7 @@ export default function DetailDiscussion({ id, idDivision }: { id: string, idDiv
 
 
    return (
-      <>
+      <Box>
          <NavbarDetailDiscussion id={id} status={Number(isData?.status)} idDivision={idDivision} />
          <Box p={20}>
             {isLoad ?
@@ -244,12 +244,13 @@ export default function DetailDiscussion({ id, idDivision }: { id: string, idDiv
                   })
                }
             </Box>
+         </Box>
             {isLoad ?
                <Skeleton width={"100%"} height={50} radius={100} />
                :
-               <Box pos={"fixed"} bottom={0} w={{ base: "90%", md: "35.5%" }} style={{
+               <Box pos={'fixed'} bottom={0} w={"100%"} style={{
-                  zIndex: 999
+                  maxWidth: rem(550)
-               }} bg={WARNA.bgWhite}>
+               }} pl={rem(15)} pr={rem(15)} bg={WARNA.bgWhite}>
                   <Box bg={WARNA.bgWhite} >
                      <Group justify="flex-end">
                         <Text fz={13}>{300 - isComent.length} karakter tersisa</Text>
@@ -291,8 +292,7 @@ export default function DetailDiscussion({ id, idDivision }: { id: string, idDiv
                   </Box>
                </Box>
             }
-         </Box>
+      </Box>
-      </>
    )
 }
 

src/module/division_new/ui/list_division.tsx

@@ -11,6 +11,7 @@ import { useShallowEffect } from '@mantine/hooks';
 import { IDataDivison } from '../lib/type_division';
 import { funGetAllDivision } from '../lib/api_division';
 import toast from 'react-hot-toast';
+import { funGetAllGroup, IDataGroup } from '@/module/group';
 
 export default function ListDivision() {
   const [isList, setIsList] = useState(false)
@@ -58,7 +59,30 @@ export default function ListDivision() {
     fetchData(searchQuery)
   }, [searchQuery])
 
+  const [checked, setChecked] = useState<IDataGroup[]>([]);
 
+  const groupNameMap = (groupId: string) => {
+    const groupName = checked.find((group) => group.id === groupId)?.name;
+    return groupName || '-';
+  };
+
+  async function getAllGroupFilter() {
+    try {
+       const response = await funGetAllGroup('?active=true')
+       if (response.success) {
+          setChecked(response.data);
+       } else {
+          toast.error(response.message);
+       }
+    } catch (error) {
+       console.error(error);
+       toast.error("Gagal mendapatkan grup, coba lagi nanti");
+    }
+  }
+  
+  useShallowEffect(() => {
+    getAllGroupFilter();
+  }, []);
 
   return (
     <Box>
@@ -66,6 +90,7 @@ export default function ListDivision() {
         menu={<ActionIcon variant="light" onClick={() => (setOpenDrawer(true))} bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
           <HiMenu size={20} color='white' />
         </ActionIcon>} />
+       
       <Box p={20}>
         <Grid justify='center' align='center'>
           <Grid.Col span={10}>
@@ -96,6 +121,8 @@ export default function ListDivision() {
           </Grid.Col>
         </Grid>
         <Box pt={20}>
+          {/* {group && <Text>Filter by: {group}</Text>} */}
+          {group && <Text>Filter by: {groupNameMap(group)}</Text>}
           {loading ?
             <>
               <Skeleton width={"100%"} height={100} radius={"md"} />

src/module/document/ui/navbar_document_division.tsx

@@ -1,6 +1,6 @@
 'use client'
 import { LayoutDrawer, LayoutNavbarNew, WARNA } from '@/module/_global';
-import { ActionIcon, Anchor, Box, Breadcrumbs, Button, Checkbox, Divider, Flex, Grid, Group, Indicator, Modal, Select, SimpleGrid, Text, TextInput } from '@mantine/core';
+import { ActionIcon, Anchor, Box, Breadcrumbs, Button, Checkbox, Divider, Flex, Grid, Group, Indicator, Modal, rem, Select, SimpleGrid, Text, TextInput } from '@mantine/core';
 import React, { useState } from 'react';
 import { HiMenu } from 'react-icons/hi';
 import { FcDocument, FcFolder, FcImageFile } from 'react-icons/fc';
@@ -216,7 +216,8 @@ export default function NavbarDocumentDivision() {
     <Box>
       {(selectedFiles.length > 0 || dariSelectAll) && (
         <>
-          <Box h={90} w={{ base: "100%", md: "38.2%" }} bg={WARNA.biruTua} pos={'fixed'} top={0} style={{
+          <Box h={90} bg={WARNA.biruTua} pos={'fixed'} top={0} w={"100%"} style={{
+            maxWidth: rem(550),
             zIndex: 999,
           }}>
             <Flex justify={'space-between'} ml={30} mr={30} align={'center'} h={"100%"}>
@@ -234,7 +235,8 @@ export default function NavbarDocumentDivision() {
               </ActionIcon>
             </Flex>
           </Box>
-          <Box h={70} w={{ base: "100%", md: "38.2%" }} bg={WARNA.biruTua} pos={'fixed'} bottom={0} style={{
+          <Box h={70} bg={WARNA.biruTua} pos={'fixed'} bottom={0} w={"100%"} style={{
+            maxWidth: rem(550),
             zIndex: 999,
           }}>
             <Flex justify={"center"} align={"center"} h={"100%"} w={"100%"}>

src/module/home/lib/type_search.ts

@@ -0,0 +1,16 @@
+export interface IDataUserSearch {
+    id: string
+    name: string
+    email: string
+}
+
+export interface IDataDivisionSearch {
+    id: string
+    title: string
+}
+
+export interface IDataProjectSearch {
+    id: string
+    name: string
+    desc: string
+  }

src/module/home/ui/view_search.tsx

@@ -1,16 +1,17 @@
 "use client"
 import { LayoutNavbarNew, WARNA } from '@/module/_global';
-import { Box, TextInput } from '@mantine/core';
+import { ActionIcon, Box, Divider, Grid, Group, Text, TextInput } from '@mantine/core';
 import React, { useState } from 'react';
-import { HiMagnifyingGlass } from 'react-icons/hi2';
+import { HiMagnifyingGlass, HiMiniUser } from 'react-icons/hi2';
 import { funGetSearchAll } from '../lib/api_search';
 import { useShallowEffect } from '@mantine/hooks';
+import { IDataDivisionSearch, IDataProjectSearch, IDataUserSearch } from '../lib/type_search';
 
 export default function ViewSearch() {
   const [search, setSearch] = useState('');
-  const [dataUser, setDataUser] = useState([]);
+  const [dataUser, setDataUser] = useState<IDataUserSearch[]>([]);
-  const [dataProject, setDataProject] = useState([]);
+  const [dataProject, setDataProject] = useState<IDataDivisionSearch[]>([]);
-  const [dataDivision, setDataDivision] = useState([]);
+  const [dataDivision, setDataDivision] = useState<IDataProjectSearch[]>([]);
 
   async function featchSearch() {
     try {
@@ -25,7 +26,9 @@ export default function ViewSearch() {
   }
 
   useShallowEffect(() => {
-    featchSearch()
+    if (search !== '') {
+      featchSearch()
+    }
   }, [search])
 
   return (
@@ -46,10 +49,117 @@ export default function ViewSearch() {
           placeholder="Pencarian"
           onChange={(e) => setSearch(e.target.value)}
         />
-        {/* <pre>{JSON.stringify(dataUser, null, 1)}</pre>
+        {dataUser.length || dataProject.length || dataDivision.length > 0 ? (
-        <pre>{JSON.stringify(dataProject, null, 1)}</pre>
+
-        <pre>{JSON.stringify(dataDivision, null, 1)}</pre> */}
+          <Box pt={20}>
-        
+            <Box style={{
+              border: `1px solid ${WARNA.borderBiruMuda}`,
+              padding: 10,
+              borderRadius: 10,
+            }}>
+              <Text>ANGGOTA</Text>
+              {dataUser.length > 0 ? (
+                <Box>
+                  {dataUser.map((v, i) => {
+                    return (
+                      <Box key={i}>
+                        <Group align='center' style={{
+                          padding: 10,
+                        }} >
+                          <Box>
+                            <ActionIcon variant="light" bg={WARNA.biruTua} size={50} radius={100} aria-label="icon">
+                              <HiMiniUser color={'white'} size={25} />
+                            </ActionIcon>
+                          </Box>
+                          <Box>
+                            <Text fw={'bold'} c={WARNA.biruTua}>{v.name}</Text>
+                            <Text fw={'lighter'} fz={12}>{v.email}</Text>
+                          </Box>
+                        </Group>
+                        <Divider my={5} />
+                      </Box>
+                    )
+                  })}
+                </Box>
+              ) :
+                <Text>Tidak Ada Anggota</Text>
+              }
+              <Box mt={10}>
+                <Text>DIVISI</Text>
+                <Box style={{
+                  paddingLeft: 20,
+                  paddingRight: 20,
+                  paddingTop: 10,
+                  paddingBottom: 10,
+                  backgroundColor: `#E7EBF1`,
+                  borderRadius: 5
+                }}>
+                  {dataDivision.length > 0 ? (
+                    <Box>
+                      {dataDivision.map((v, i) => {
+                        return (
+                          <Box key={i}>
+                            <Grid justify='center' align='center' mt={15}>
+                              <Grid.Col span={"auto"}>
+                                <ActionIcon variant="light" bg={WARNA.biruTua} size={50} radius={100} aria-label="icon">
+                                  <HiMiniUser color={'white'} size={25} />
+                                </ActionIcon>
+                              </Grid.Col>
+                              <Grid.Col span={10}>
+                                <Text fw={'bold'} c={WARNA.biruTua}>{v.name.toUpperCase()}</Text>
+                              </Grid.Col>
+                            </Grid>
+                            <Text fw={'lighter'} mt={5} mb={10} lineClamp={2}>{v.desc}</Text>
+                            <Divider my={5} />
+                          </Box>
+                        )
+                      })}
+                    </Box>
+                  ) :
+                    <Text>Tidak Ada Divisi</Text>
+                  }
+                </Box>
+              </Box>
+              <Box mt={10}>
+                <Text>KEGIATAN</Text>
+                <Box style={{
+                  paddingLeft: 20,
+                  paddingRight: 20,
+                  paddingTop: 10,
+                  paddingBottom: 10,
+                  backgroundColor: `#E7EBF1`,
+                  borderRadius: 5
+                }}>
+                  {dataProject.length > 0 ? (
+                  <Box>
+                    {dataProject.map((v, i) => {
+                      return (
+                        <Box key={i}>
+                          <Grid justify='center' align='center' mt={10}>
+                            <Grid.Col span={"auto"}>
+                              <ActionIcon variant="light" bg={WARNA.biruTua} size={50} radius={100} aria-label="icon">
+                                <HiMiniUser color={'white'} size={25} />
+                              </ActionIcon>
+                            </Grid.Col>
+                            <Grid.Col span={10}>
+                              <Text fw={'bold'} c={WARNA.biruTua}>{v.title.toUpperCase()}</Text>
+                            </Grid.Col>
+                          </Grid>
+                          <Divider mt={10} />
+                        </Box>
+                      )
+                    })}
+                  </Box>
+                  )
+                  : <Text>Tidak Ada Kegiatan</Text>
+                }
+                </Box>
+              </Box>
+            </Box>
+          </Box>
+        )
+          : null
+        }
       </Box>
     </>
   );

src/module/position/ui/drawer_list_position.tsx

@@ -82,7 +82,7 @@ export default function DrawerListPosition({ onCreated }: { onCreated: (val: boo
                      <Text ta={'center'} c={WARNA.biruTua}>Tambah Jabatan</Text>
                   </Box>
                </Flex>
-               <Flex justify={'center'} align={'center'} direction={'column'} onClick={() => router.push('/position?page=filter')}>
+               <Flex justify={'center'} align={'center'} direction={'column'} onClick={() => router.push('/position?active=true&page=filter')}>
                   <Box>
                      <RiFilter2Line size={30} color={WARNA.biruTua} />
                   </Box>

src/module/position/ui/list_position_active.tsx

@@ -12,6 +12,7 @@ import { funGetAllPosition } from "../lib/api_position";
 import { IDataPosition } from "../lib/type_position";
 import { useHookstate } from "@hookstate/core";
 import { globalRefreshPosition } from "../lib/val_posisition";
+import { funGetAllGroup, IDataGroup } from "@/module/group";
 
 
 export default function ListPositionActive() {
@@ -29,7 +30,7 @@ export default function ListPositionActive() {
 
   async function getAllPosition() {
     try {
-      setDataPosition([]);
+      // setDataPosition([]);
       setLoading(true)
       const res = await funGetAllPosition('?active=' + status + '&group=' + group + '&search=' + searchQuery)
       setDataPosition(res.data);
@@ -46,6 +47,31 @@ export default function ListPositionActive() {
     getAllPosition();
   }, [status, group, searchQuery, refresh.get()])
 
+  const [checked, setChecked] = useState<IDataGroup[]>([]);
+
+  const groupNameMap = (groupId: string) => {
+    const groupName = checked.find((group) => group.id === groupId)?.name;
+    return groupName || '-';
+  };
+
+  async function getAllGroupFilter() {
+    try {
+      const response = await funGetAllGroup('?active=true')
+      if (response.success) {
+        setChecked(response.data);
+      } else {
+        toast.error(response.message);
+      }
+    } catch (error) {
+      console.error(error);
+      toast.error("Gagal mendapatkan grup, coba lagi nanti");
+    }
+  }
+
+  useShallowEffect(() => {
+    getAllGroupFilter();
+  }, []);
+
   return (
     <Box pt={20}>
       <TextInput
@@ -67,51 +93,56 @@ export default function ListPositionActive() {
           <SkeletonSingle />
         </Box>
       )) :
-        _.isEmpty(isDataPosition) ?
+        <Box pt={20}>
-          <Box style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '60vh' }}>
+          {group && <Text>Filter by: {groupNameMap(group)}</Text>}
-             <Text c="dimmed" ta={"center"} fs={"italic"}>Tidak ada jabatan</Text>
+          {isDataPosition.length == 0 ?
-          </Box>
+            <Box style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '60vh' }}>
-          :
+              <Text c="dimmed" ta={"center"} fs={"italic"}>Tidak ada jabatan</Text>
-          isDataPosition.map((v, i) => {
+            </Box>
-            return (
+            :
-              <Box pt={20} key={i}>
+            <Box >
-                <Group
+              {isDataPosition.map((v, i) => {
-                  align="center"
+                return (
-                  style={{
+                  <Box pb={20} key={i}>
-                    border: `1px solid ${"#DCEED8"}`,
+                    <Group
-                    padding: 10,
+                      align="center"
-                    borderRadius: 10,
+                      style={{
-                  }}
+                        border: `1px solid ${"#DCEED8"}`,
-                  onClick={() => {
+                        padding: 10,
-                    setData(v.name);
+                        borderRadius: 10,
-                    setOpenDrawer(true);
+                      }}
-                    setSelectId(v.id);
+                      onClick={() => {
-                    setActive(v.isActive);
+                        setData(v.name);
-                  }}
+                        setOpenDrawer(true);
-                >
+                        setSelectId(v.id);
-                  <Box>
+                        setActive(v.isActive);
-                    <ActionIcon
+                      }}
-                      variant="light"
-                      bg={"#DCEED8"}
-                      size={50}
-                      radius={100}
-                      aria-label="icon"
                     >
-                      <FaUserTie color={WARNA.biruTua} size={25} />
+                      <Box>
-                    </ActionIcon>
+                        <ActionIcon
+                          variant="light"
+                          bg={"#DCEED8"}
+                          size={50}
+                          radius={100}
+                          aria-label="icon"
+                        >
+                          <FaUserTie color={WARNA.biruTua} size={25} />
+                        </ActionIcon>
+                      </Box>
+                      <Box>
+                        <Text fw={"bold"} c={WARNA.biruTua}>
+                          {v.name}
+                        </Text>
+                        <Text fw={"lighter"} fz={12}>
+                          {v.group}
+                        </Text>
+                      </Box>
+                    </Group>
                   </Box>
-                  <Box>
+                );
-                    <Text fw={"bold"} c={WARNA.biruTua}>
+              })}
-                      {v.name}
+            </Box>}
-                    </Text>
+        </Box>
-                    <Text fw={"lighter"} fz={12}>
-                      {v.group}
-                    </Text>
-                  </Box>
-                </Group>
-              </Box>
-            );
-          })
       }
       <LayoutDrawer
         opened={openDrawer}

src/module/position/ui/tab_list_position.tsx

@@ -10,6 +10,7 @@ export default function TabListPosition() {
   const router = useRouter()
   const searchParams = useSearchParams()
   const status = searchParams.get('active')
+  const group = searchParams.get("group");
 
   return (
     <Box p={20}>
@@ -26,7 +27,7 @@ export default function TabListPosition() {
             value="true"
             w={"45%"}
             leftSection={<IoMdCheckmarkCircleOutline style={iconStyle} />}
-            onClick={() => { router.push("/position?active=true") }}
+            onClick={() => { router.push("/position?active=true&group=" + group) }}
           >
             Aktif
           </Tabs.Tab>
@@ -34,7 +35,7 @@ export default function TabListPosition() {
             value="false"
             w={"53%"}
             leftSection={<IoCloseCircleOutline style={iconStyle} />}
-            onClick={() => { router.push("/position?active=false") }}
+            onClick={() => { router.push("/position?active=false&group=" + group) }}
           >
             Tidak Aktif
           </Tabs.Tab>

src/module/project/ui/list_project.tsx

@@ -10,6 +10,7 @@ import { funGetAllProject } from '../lib/api_project';
 import toast from 'react-hot-toast';
 import { useShallowEffect } from '@mantine/hooks';
 import { IDataProject } from '../lib/type_project';
+import { funGetAllGroup, IDataGroup } from '@/module/group';
 
 export default function ListProject() {
   const [isList, setIsList] = useState(false)
@@ -18,6 +19,7 @@ export default function ListProject() {
   const [loading, setLoading] = useState(true);
   const searchParams = useSearchParams()
   const status = searchParams.get('status')
+  const group = searchParams.get('group')
   const [searchQuery, setSearchQuery] = useState('')
 
   const fetchData = async () => {
@@ -25,7 +27,7 @@ export default function ListProject() {
       setData([]);
       setLoading(true);
 
-      const response = await funGetAllProject('?status=' + status + '&search=' + searchQuery)
+      const response = await funGetAllProject('?status=' + status + '&search=' + searchQuery + '&group=' + group)
 
       if (response.success) {
         setData(response?.data)
@@ -51,6 +53,31 @@ export default function ListProject() {
     setIsList(!isList)
   }
 
+  const [checked, setChecked] = useState<IDataGroup[]>([]);
+
+  const groupNameMap = (groupId: string) => {
+    const groupName = checked.find((group) => group.id === groupId)?.name;
+    return groupName || '-';
+  };
+
+  async function getAllGroupFilter() {
+    try {
+       const response = await funGetAllGroup('?active=true')
+       if (response.success) {
+          setChecked(response.data);
+       } else {
+          toast.error(response.message);
+       }
+    } catch (error) {
+       console.error(error);
+       toast.error("Gagal mendapatkan grup, coba lagi nanti");
+    }
+  }
+  
+  useShallowEffect(() => {
+    getAllGroupFilter();
+  }, []);
+
   return (
     <Box mt={20}>
       <Grid justify='center' align='center'>
@@ -82,6 +109,7 @@ export default function ListProject() {
         </Grid.Col>
       </Grid>
       <Box pt={20}>
+      {group && <Text>Filter by: {groupNameMap(group)}</Text>}
         <Box bg={"#DCEED8"} p={10} style={{ borderRadius: 10 }}>
           <Text fw={'bold'} c={WARNA.biruTua}>Total Kegiatan</Text>
           <Flex justify={'center'} align={'center'} h={'100%'}>

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

@@ -7,6 +7,8 @@ import { useEffect, useState } from "react"
 import { HiMagnifyingGlass, HiMiniUser } from "react-icons/hi2"
 import { IListMember } from "../lib/type_member"
 import { funGetAllmember } from "../lib/api_member"
+import { funGetAllGroup, IDataGroup } from "@/module/group"
+import toast from "react-hot-toast"
 
 
 export default function TabListMember() {
@@ -36,6 +38,31 @@ export default function TabListMember() {
       getAllUser()
    }, [status, searchQuery])
 
+   const [checked, setChecked] = useState<IDataGroup[]>([]);
+
+   const groupNameMap = (groupId: string) => {
+      const groupName = checked.find((group) => group.id === groupId)?.name;
+      return groupName || '-';
+   };
+
+   async function getAllGroupFilter() {
+      try {
+         const response = await funGetAllGroup('?active=true')
+         if (response.success) {
+            setChecked(response.data);
+         } else {
+            toast.error(response.message);
+         }
+      } catch (error) {
+         console.error(error);
+         toast.error("Gagal mendapatkan grup, coba lagi nanti");
+      }
+   }
+
+   useShallowEffect(() => {
+      getAllGroupFilter();
+   }, []);
+
    return (
       <>
          <Box>
@@ -63,35 +90,39 @@ export default function TabListMember() {
                      </Box>
                   ))
                :
-               dataMember.length == 0 ?
+               <Box>
-                  <Box style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '60vh' }}>
+                  {group && <Text>Filter by: {groupNameMap(group)}</Text>}
-                     <Text c="dimmed" ta={"center"} fs={"italic"}>Tidak ada anggota</Text>
+                  {dataMember.length == 0 ?
-                  </Box>
+                     <Box style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '60vh' }}>
-                  :
+                        <Text c="dimmed" ta={"center"} fs={"italic"}>Tidak ada anggota</Text>
-                  dataMember.map((v, i) => {
+                     </Box>
-                     return (
+                     :
-                        <Box key={i}>
+                     dataMember.map((v, i) => {
-                           <Box  onClick={() => {
+                        return (
-                              router.push(`/member/${v.id}`)
+                           <Box key={i}>
-                           }}>
+                              <Box onClick={() => {
-                              <Group align='center' style={{
+                                 router.push(`/member/${v.id}`)
-                                 padding: 10,
+                              }}>
-                              }} >
+                                 <Group align='center' style={{
-                                 <Box>
+                                    padding: 10,
-                                    <ActionIcon variant="light" bg={WARNA.biruTua} size={50} radius={100} aria-label="icon">
+                                 }} >
-                                       <HiMiniUser color={'white'} size={25} />
+                                    <Box>
-                                    </ActionIcon>
+                                       <ActionIcon variant="light" bg={WARNA.biruTua} size={50} radius={100} aria-label="icon">
-                                 </Box>
+                                          <HiMiniUser color={'white'} size={25} />
-                                 <Box>
+                                       </ActionIcon>
-                                    <Text fw={'bold'} c={WARNA.biruTua}>{v.name}</Text>
+                                    </Box>
-                                    <Text fw={'lighter'} fz={12}>{v.group + ' - ' + v.position}</Text>
+                                    <Box>
-                                 </Box>
+                                       <Text fw={'bold'} c={WARNA.biruTua}>{v.name}</Text>
-                              </Group>
+                                       <Text fw={'lighter'} fz={12}>{v.group + ' - ' + v.position}</Text>
+                                    </Box>
+                                 </Group>
+                              </Box>
+                              <Divider my={10} />
                            </Box>
-                           <Divider my={10}/>
+                        )
-                        </Box>
+                     })
-                     )
+                  }
-                  })
+               </Box>
             }
          </Box>
       </>