feat : update filter dll

Deskripsi - position - project - announcement - calneder - division - document - home No Issue
2024-08-29 15:52:54 +08:00
parent 390c46e2da
commit e2df0beb9f
16 changed files with 444 additions and 175 deletions
--- a/src/app/api/position/route.ts
+++ b/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") {
-            grupFix = user.idGroup
-        } else {
-            grupFix = groupID
-        }
+        if (idGroup == "null" || idGroup == undefined) {
+            grup = user.idGroup
+         } else {
+            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,
--- a/src/app/api/project/route.ts
+++ b/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,
--- a/src/module/_global/view/view_filter.tsx
+++ b/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) => (
-               <Box key={filter.id}>
-                  <Group
-                     justify="space-between"
-                     align="center"
-                     mb={10}
-                     onClick={() => handleFilterClick(filter.id)}
-                  >
-                     <Text fw={selectedFilter === filter.id ? 'bold' : 'normal'}>
-                        {filter.name}
-                     </Text>
-                     {selectedFilter === filter.id && <FaCheck size={25} />}
-                  </Group>
-                  <Divider my={"sm"} />
-               </Box>
-            ))}
-            <Button
-               fullWidth
-               radius={100}
-               size="lg"
-               color={WARNA.biruTua}
-               onClick={() => {
-                  router.push(`/${linkFilter}?group=` + selectedFilter)
-               }}
-            >
-               Terapkan
-            </Button>
+            {loading ? (
+               Array(5)
+                  .fill(null)
+                  .map((_, i) => (
+                     <Box key={i}>
+                        <Box>
+                           <Skeleton width={"100%"} mb={15} height={30} radius={"md"} />
+                        </Box>
+                     </Box>
+                  ))
+            ) :
+               (
+                  checked.map((filter) => (
+                     <Box key={filter.id}>
+                        <Group
+                           justify="space-between"
+                           align="center"
+                           mb={10}
+                           onClick={() => handleFilterClick(filter.id)}
+                        >
+                           <Text fw={selectedFilter === filter.id ? 'bold' : 'normal'}>
+                              {filter.name}
+                           </Text>
+                           {selectedFilter === filter.id && <FaCheck size={25} />}
+                        </Group>
+                        <Divider my={"sm"} />
+                     </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>
   );
 }
--- a/src/module/announcement/ui/drawer_announcement.tsx
+++ b/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>
--- a/src/module/announcement/ui/list_announcement.tsx
+++ b/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() {
--- a/src/module/calender/ui/detail_event_division.tsx
+++ b/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) => {
-                  return (
-                    <Flex
-                      justify={"space-between"}
-                      align={"center"}
-                      mb={20}
-                      key={i}
-                    >
-                      <Group>
-                        <Avatar src={""} alt="it's me" size="lg" />
-                        <Box>
-                          <Text c={WARNA.biruTua} fw={"bold"}>
-                            {v.name}
-                          </Text>
-                          <Text c={"#5A687D"} fz={14}>
-                            {v.email}
-                          </Text>
-                        </Box>
-                      </Group>
-                    </Flex>
-                  );
-                })}
+                {isLengthMember == 0? (
+                  <Box style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '30vh' }}>
+                    <Text c="dimmed" ta={"center"} fs={"italic"}>Tidak ada anggota</Text>
+                  </Box>
+                ) :
+                  <Box>
+                    {isDataAnggota.map((v, i) => {
+                      return (
+                        <Flex
+                          justify={"space-between"}
+                          align={"center"}
+                          mb={20}
+                          key={i}
+                        >
+                          <Group>
+                            <Avatar src={""} alt="it's me" size="lg" />
+                            <Box>
+                              <Text c={WARNA.biruTua} fw={"bold"}>
+                                {v.name}
+                              </Text>
+                              <Text c={"#5A687D"} fz={14}>
+                                {v.email}
+                              </Text>
+                            </Box>
+                          </Group>
+                        </Flex>
+                      );
+                    })}
+                  </Box>
+                }
              </Box>
            </Box>
          </Box>
--- a/src/module/discussion/ui/detail_discussion.tsx
+++ b/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={{
-                  zIndex: 999
-               }} bg={WARNA.bgWhite}>
+               <Box pos={'fixed'} bottom={0} w={"100%"} style={{
+                  maxWidth: rem(550)
+               }} 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>
   )
 }

--- a/src/module/division_new/ui/list_division.tsx
+++ b/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"} />
--- a/src/module/document/ui/navbar_document_division.tsx
+++ b/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%"}>
--- a/src/module/home/lib/type_search.ts
+++ b/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
+  }
--- a/src/module/home/ui/view_search.tsx
+++ b/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 [dataProject, setDataProject] = useState([]);
-  const [dataDivision, setDataDivision] = useState([]);
+  const [dataUser, setDataUser] = useState<IDataUserSearch[]>([]);
+  const [dataProject, setDataProject] = useState<IDataDivisionSearch[]>([]);
+  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>
-        <pre>{JSON.stringify(dataProject, null, 1)}</pre>
-        <pre>{JSON.stringify(dataDivision, null, 1)}</pre> */}
-        
+        {dataUser.length || dataProject.length || dataDivision.length > 0 ? (
+
+          <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>
    </>
  );
--- a/src/module/position/ui/drawer_list_position.tsx
+++ b/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>
--- a/src/module/position/ui/list_position_active.tsx
+++ b/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 style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '60vh' }}>
-             <Text c="dimmed" ta={"center"} fs={"italic"}>Tidak ada jabatan</Text>
-          </Box>
-          :
-          isDataPosition.map((v, i) => {
-            return (
-              <Box pt={20} key={i}>
-                <Group
-                  align="center"
-                  style={{
-                    border: `1px solid ${"#DCEED8"}`,
-                    padding: 10,
-                    borderRadius: 10,
-                  }}
-                  onClick={() => {
-                    setData(v.name);
-                    setOpenDrawer(true);
-                    setSelectId(v.id);
-                    setActive(v.isActive);
-                  }}
-                >
-                  <Box>
-                    <ActionIcon
-                      variant="light"
-                      bg={"#DCEED8"}
-                      size={50}
-                      radius={100}
-                      aria-label="icon"
+        <Box pt={20}>
+          {group && <Text>Filter by: {groupNameMap(group)}</Text>}
+          {isDataPosition.length == 0 ?
+            <Box style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '60vh' }}>
+              <Text c="dimmed" ta={"center"} fs={"italic"}>Tidak ada jabatan</Text>
+            </Box>
+            :
+            <Box >
+              {isDataPosition.map((v, i) => {
+                return (
+                  <Box pb={20} key={i}>
+                    <Group
+                      align="center"
+                      style={{
+                        border: `1px solid ${"#DCEED8"}`,
+                        padding: 10,
+                        borderRadius: 10,
+                      }}
+                      onClick={() => {
+                        setData(v.name);
+                        setOpenDrawer(true);
+                        setSelectId(v.id);
+                        setActive(v.isActive);
+                      }}
                    >
-                      <FaUserTie color={WARNA.biruTua} size={25} />
-                    </ActionIcon>
+                      <Box>
+                        <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}
-                    </Text>
-                    <Text fw={"lighter"} fz={12}>
-                      {v.group}
-                    </Text>
-                  </Box>
-                </Group>
-              </Box>
-            );
-          })
+                );
+              })}
+            </Box>}
+        </Box>
      }
      <LayoutDrawer
        opened={openDrawer}
--- a/src/module/position/ui/tab_list_position.tsx
+++ b/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>
--- a/src/module/project/ui/list_project.tsx
+++ b/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%'}>
--- a/src/module/user/member/ui/tab_list_member.tsx
+++ b/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 style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '60vh' }}>
-                     <Text c="dimmed" ta={"center"} fs={"italic"}>Tidak ada anggota</Text>
-                  </Box>
-                  :
-                  dataMember.map((v, i) => {
-                     return (
-                        <Box key={i}>
-                           <Box  onClick={() => {
-                              router.push(`/member/${v.id}`)
-                           }}>
-                              <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.group + ' - ' + v.position}</Text>
-                                 </Box>
-                              </Group>
+               <Box>
+                  {group && <Text>Filter by: {groupNameMap(group)}</Text>}
+                  {dataMember.length == 0 ?
+                     <Box style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '60vh' }}>
+                        <Text c="dimmed" ta={"center"} fs={"italic"}>Tidak ada anggota</Text>
+                     </Box>
+                     :
+                     dataMember.map((v, i) => {
+                        return (
+                           <Box key={i}>
+                              <Box onClick={() => {
+                                 router.push(`/member/${v.id}`)
+                              }}>
+                                 <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.group + ' - ' + v.position}</Text>
+                                    </Box>
+                                 </Group>
+                              </Box>
+                              <Divider my={10} />
                           </Box>
-                           <Divider my={10}/>
-                        </Box>
-                     )
-                  })
+                        )
+                     })
+                  }
+               </Box>
            }
         </Box>
      </>