upd: filter

Deskripsi:
- membuat view global filter
- mengaplikasikan view global filter pada halaman pengumuman dan member

No issues

src/app/(application)/announcement/page.tsx

@@ -1,8 +1,11 @@
+import { ViewFilter } from "@/module/_global";
 import { ViewListAnnouncement } from "@/module/announcement";
 
-function Page() {
+function Page({ searchParams }: { searchParams: { page: string } }) {
+   if (searchParams.page == 'filter')
+      return <ViewFilter />
    return (
-      <ViewListAnnouncement/>
+      <ViewListAnnouncement />
    )
 }
 

src/app/(application)/member/page.tsx

@@ -1,6 +1,10 @@
+import { ViewFilter } from "@/module/_global";
 import { ViewListMember } from "@/module/user/member";
 
-function Page() {
+function Page({ searchParams }: { searchParams: { page: string } }) {
+   if (searchParams.page == "filter")
+      return <ViewFilter />
+      
    return (
       <ViewListMember />
    )

src/module/_global/index.ts

@@ -5,6 +5,7 @@ import LoadingPage from "./layout/layout_loading_page";
 import LayoutLogin from "./layout/layout_login";
 import LayoutNavbarHome from "./layout/layout_navbar_home";
 import LayoutNavbarNew from "./layout/layout_navbar_new";
+import ViewFilter from "./view/view_filter";
 
 export { WARNA }
 export { LayoutLogin }
@@ -13,3 +14,4 @@ export { LayoutIconBack }
 export { LoadingPage }
 export { LayoutDrawer }
 export { LayoutNavbarNew }
+export { ViewFilter }

src/module/_global/view/view_filter.tsx

@@ -0,0 +1,76 @@
+'use client'
+import { Box, Group, Divider, Button, Text } from "@mantine/core";
+import { useState } from "react";
+import { FaCheck } from "react-icons/fa6";
+import { WARNA } from "../fun/WARNA";
+import LayoutNavbarNew from "../layout/layout_navbar_new";
+import { useRouter } from "next/navigation";
+
+const dataFilter = [
+   {
+      id: 1,
+      name: 'Dinas'
+   },
+   {
+      id: 2,
+      name: 'Adat'
+   },
+   {
+      id: 3,
+      name: 'LPD'
+   },
+   {
+      id: 4,
+      name: 'Karang Taruna'
+   },
+   {
+      id: 5,
+      name: 'BPD'
+   },
+   {
+      id: 6,
+      name: 'LPM'
+   },
+]
+export default function ViewFilter() {
+   const [selectedFilter, setSelectedFilter] = useState<string | null>(null);
+
+   const handleFilterClick = (filterName: string) => {
+      setSelectedFilter(filterName);
+   };
+
+   const router = useRouter()
+
+   return (
+      <Box>
+         <LayoutNavbarNew back='' title='Filter' menu />
+         <Box p={20}>
+            {dataFilter.map((filter) => (
+               <Box key={filter.id}>
+                  <Group
+                     justify="space-between"
+                     align="center"
+                     mb={10}
+                     onClick={() => handleFilterClick(filter.name)}
+                  >
+                     <Text fw={selectedFilter === filter.name ? 'bold' : 'normal'}>
+                        {filter.name}
+                     </Text>
+                     {selectedFilter === filter.name && <FaCheck size={25} />}
+                  </Group>
+                  <Divider my={"sm"} />
+               </Box>
+            ))}
+            <Button
+               fullWidth
+               radius={100}
+               size="lg"
+               color={WARNA.biruTua}
+               onClick={() => { router.back() }}
+            >
+               Terapkan
+            </Button>
+         </Box>
+      </Box>
+   );
+}

src/module/announcement/component/ui/drawer_announcement.tsx

@@ -15,6 +15,9 @@ export default function DrawerAnnouncement() {
                cols={{ base: 3, sm: 3, lg: 3 }}
             >
                <Flex justify={'center'} align={'center'} direction={'column'}
+                  style={{
+                     cursor: 'pointer'
+                  }}
                   onClick={() => {
                      router.push('/announcement/create')
                   }}
@@ -27,7 +30,14 @@ export default function DrawerAnnouncement() {
                   </Box>
                </Flex>
 
-               <Flex justify={'center'} align={'center'} direction={'column'} >
+               <Flex justify={'center'} align={'center'} direction={'column'}
+                  style={{
+                     cursor: 'pointer'
+                  }}
+                  onClick={() => {
+                     router.push('/announcement?page=filter')
+                  }}
+               >
                   <Box>
                      <RiFilter2Line size={30} color={WARNA.biruTua} />
                   </Box>

src/module/user/member/component/ui/drawer_list_member.tsx

@@ -32,6 +32,9 @@ export default function DrawerListMember() {
 
                <Flex justify={'center'} align={'center'} direction={'column'}
                   style={{ cursor: 'pointer' }}
+                  onClick={() => {
+                     router.push('/member?page=filter')
+                  }}
                >
                   <Box>
                      <RiFilter2Line size={30} color={WARNA.biruTua} />