Merge pull request #33 from bipproduction/amalia/9-jul-24

Amalia/9 jul 24

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)/detail-feature/page.tsx

@@ -1,10 +0,0 @@
-import { ViewDetailFeature } from '@/module/home';
-import React from 'react';
-
-function Page() {
-  return (
-    <ViewDetailFeature/>
-  );
-}
-
-export default Page;

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

@@ -1,9 +1,13 @@
-import LayoutNavbarHome from '@/module/_global/layout/layout_navbar_home';
-import { ViewHome } from '@/module/home';
-import { Flex, Group, Text } from '@mantine/core';
+import { ViewDetailFeature, ViewHome, ViewNotification, ViewSearch } from '@/module/home';
 import React from 'react';
 
-function Page() {
+function Page({ searchParams }: { searchParams: { cat: string } }) {
+  if (searchParams.cat == "notification")
+    return <ViewNotification />
+  if (searchParams.cat == "search")
+    return <ViewSearch />
+  if (searchParams.cat == "fitur")
+    return <ViewDetailFeature />
   return (
     <>
       <ViewHome />

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/app/(application)/notification/page.tsx

@@ -1,10 +0,0 @@
-import { ViewNotification } from '@/module/notification';
-import React from 'react';
-
-function Page() {
-  return (
-    <ViewNotification />
-  );
-}
-
-export default Page;

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

@@ -1,10 +0,0 @@
-import { ViewSearch } from '@/module/search';
-import React from 'react';
-
-function Page() {
-  return (
-    <ViewSearch/>
-  );
-}
-
-export default Page;

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 }
@@ -12,4 +13,5 @@ export { LayoutNavbarHome }
 export { LayoutIconBack }
 export { LoadingPage }
 export { LayoutDrawer }
-export { LayoutNavbarNew }
+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/announcement/component/ui/navbar_create_announcement.tsx

@@ -1,21 +0,0 @@
-'use client'
-import { LayoutIconBack, LayoutNavbarHome } from "@/module/_global";
-import { Box, Grid, Text } from "@mantine/core";
-
-export default function NavbarCreateAnnouncement() {
-   return (
-      <Box>
-         <LayoutNavbarHome>
-            <Grid justify='center' align='center'>
-               <Grid.Col span="auto">
-                  <LayoutIconBack />
-               </Grid.Col>
-               <Grid.Col span={6}>
-                  <Text ta={'center'} fw={'bold'} c={'white'}>Tambah Pengumuman</Text>
-               </Grid.Col>
-               <Grid.Col span="auto"></Grid.Col>
-            </Grid>
-         </LayoutNavbarHome>
-      </Box>
-   )
-}

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

@@ -1,21 +0,0 @@
-'use client'
-import { LayoutIconBack, LayoutNavbarHome } from "@/module/_global";
-import { Box, Grid, Text } from "@mantine/core";
-
-export default function NavbarEditAnnouncement() {
-   return (
-      <Box>
-         <LayoutNavbarHome>
-            <Grid justify='center' align='center'>
-               <Grid.Col span="auto">
-                  <LayoutIconBack />
-               </Grid.Col>
-               <Grid.Col span={6}>
-                  <Text ta={'center'} fw={'bold'} c={'white'}>Edit Pengumuman</Text>
-               </Grid.Col>
-               <Grid.Col span="auto"></Grid.Col>
-            </Grid>
-         </LayoutNavbarHome>
-      </Box>
-   )
-}

src/module/announcement/view/view_create_announcement.tsx

@@ -1,14 +1,12 @@
 import { LayoutNavbarNew, WARNA } from "@/module/_global";
-import { Box, Stack, TextInput, Button, Textarea } from "@mantine/core";
-import { HiOutlineChevronRight, HiUser } from "react-icons/hi2";
+import { Box } from "@mantine/core";
 import CreateAnnouncement from "../component/create_announcement";
 
 export default function ViewCreateAnnouncement() {
    return (
       <Box>
-         {/* <NavbarCreateAnnouncement /> */}
          <LayoutNavbarNew back="" title="Tambah Pengumuman" menu={<></>} />
-         <CreateAnnouncement/>
+         <CreateAnnouncement />
       </Box>
    )
 }

src/module/announcement/view/view_edit_announcement.tsx

@@ -1,12 +1,10 @@
-import { Box, Button, Stack, Textarea, TextInput } from "@mantine/core";
-import { LayoutNavbarNew, WARNA } from "@/module/_global";
-import { HiOutlineChevronRight } from "react-icons/hi2";
+import { Box } from "@mantine/core";
+import { LayoutNavbarNew } from "@/module/_global";
 import EditAnnouncement from "../component/edit_announcement";
 
 export default function ViewEditAnnouncement({ data }: { data: string }) {
    return (
       <Box>
-         {/* <NavbarEditAnnouncement /> */}
          <LayoutNavbarNew back="" title="Edit Pengumuman" menu={<></>} />
          <EditAnnouncement />
       </Box>

src/module/home/components/features.tsx

@@ -56,7 +56,7 @@ export default function Features() {
               <Text fz={15} c={WARNA.biruTua}>Pengumuman</Text>
             </Center>
           </Box>
-          <Box onClick={() => router.push('detail-feature')}>
+          <Box onClick={() => router.push('/home?cat=fitur')}>
             <Center>
               <ActionIcon variant="gradient"
                 size={68}

src/module/home/components/ui/icon_navbar.tsx

@@ -10,13 +10,13 @@ export default function IconNavbar() {
   return (
     <Box>
       <Group>
-        <ActionIcon onClick={()=> router.push('/search')} variant="light" bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
+        <ActionIcon onClick={() => router.push('/home?cat=search')} variant="light" bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
           <HiMagnifyingGlass size={20} color='white' />
         </ActionIcon>
-        <ActionIcon onClick={()=> router.push('/notification')} variant="light" bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
+        <ActionIcon onClick={() => router.push('/home?cat=notification')} variant="light" bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
           <HiOutlineBell size={20} color='white' />
         </ActionIcon>
-        <ActionIcon onClick={()=> router.push('/profile')} variant="light" bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
+        <ActionIcon onClick={() => router.push('/profile')} variant="light" bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
           <HiOutlineUser size={20} color='white' />
         </ActionIcon>
       </Group>

src/module/home/index.ts

@@ -1,5 +1,9 @@
 import ViewDetailFeature from "./view/view_detail_feature";
 import ViewHome from "./view/view_home";
+import ViewNotification from "./view/view_notification";
+import ViewSearch from "./view/view_search";
 
 export { ViewHome }
-export {ViewDetailFeature}
+export { ViewDetailFeature }
+export { ViewSearch }
+export { ViewNotification }

src/module/home/view/view_detail_feature.tsx

@@ -1,28 +1,17 @@
 'use client'
-import { LayoutNavbarHome, WARNA } from '@/module/_global';
-import { ActionIcon, Box, Center, Grid, Group, SimpleGrid, Text } from '@mantine/core';
+import { LayoutNavbarNew, WARNA } from '@/module/_global';
+import { ActionIcon, Box, Center, SimpleGrid, Text } from '@mantine/core';
 import React from 'react';
 import { HiMiniUserGroup, HiMiniPresentationChartBar, HiMegaphone, HiSquares2X2, HiChevronLeft, HiUserGroup, HiUsers } from "react-icons/hi2";
 import { PiUsersFourFill } from "react-icons/pi";
-import { FaUsersRays, FaUserTie } from "react-icons/fa6";
 import { useRouter } from 'next/navigation';
-import LayoutIconBack from '@/module/_global/layout/layout_icon_back';
+import { FaUserTie } from 'react-icons/fa6';
 
 export default function ViewDetailFeature() {
   const router = useRouter()
   return (
     <>
-      <LayoutNavbarHome>
-        <Grid justify='center' align='center'>
-          <Grid.Col span="auto">
-            <LayoutIconBack back='/home' />
-          </Grid.Col>
-          <Grid.Col span={6}>
-            <Text ta={'center'} fw={'bold'} c={'white'} >SEMUA FITUR</Text>
-          </Grid.Col>
-          <Grid.Col span="auto"></Grid.Col>
-        </Grid>
-      </LayoutNavbarHome>
+      <LayoutNavbarNew back='/home' title='Fitur' menu={<></>} />
       <Box p={20}>
         <Box >
           <SimpleGrid

src/module/home/view/view_home.tsx

@@ -1,7 +1,6 @@
-import { LayoutNavbarHome, WARNA } from '@/module/_global';
-import { ActionIcon, Anchor, Box, Group, rem, Stack, Text } from '@mantine/core';
+import { LayoutNavbarHome } from '@/module/_global';
+import { Box, Group, Stack, Text } from '@mantine/core';
 import React from 'react';
-import { HiMagnifyingGlass, HiOutlineBell, HiOutlineUser } from "react-icons/hi2";
 import Carosole from '../components/carosole';
 import Features from '../components/features';
 import IconNavbar from '../components/ui/icon_navbar';
@@ -14,7 +13,7 @@ export default function ViewHome() {
       <LayoutNavbarHome>
         <Group justify='space-between'>
           <Text fw={'bold'} c={'white'} >Perbekal Darmasaba</Text>
-          <IconNavbar/>
+          <IconNavbar />
         </Group>
       </LayoutNavbarHome>
       <Box p={20}>

src/module/notification/index.ts

@@ -1,3 +0,0 @@
-import ViewNotification from "./view/view_notification";
-
-export {ViewNotification}

src/module/search/index.ts

@@ -1,3 +0,0 @@
-import ViewSearch from "./view/view_search";
-
-export {ViewSearch}

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