Merge pull request #19 from bipproduction/amalia/5-jul-24

Amalia/5 jul 24

src/app/(application)/announcement/[id]/page.tsx

@@ -0,0 +1,9 @@
+import { ViewDetailAnnouncement } from "@/module/announcement";
+
+function Page({ params }: { params: { id: string } }) {
+   return (
+      <ViewDetailAnnouncement data={params.id} />
+   )
+}
+
+export default Page;

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

@@ -0,0 +1,9 @@
+import { ViewCreateAnnouncement } from "@/module/announcement";
+
+function Page() {
+   return (
+      <ViewCreateAnnouncement />
+   )
+}
+
+export default Page;

src/app/(application)/announcement/edit/[id]/page.tsx

@@ -0,0 +1,9 @@
+import { ViewEditAnnouncement } from "@/module/announcement";
+
+function Page({ params }: { params: { id: any } }) {
+   return (
+      <ViewEditAnnouncement data={params.id} />
+   )
+}
+
+export default Page;

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

@@ -0,0 +1,9 @@
+import { ViewListAnnouncement } from "@/module/announcement";
+
+function Page() {
+   return (
+      <ViewListAnnouncement/>
+   )
+}
+
+export default Page;

src/module/announcement/component/detail_announcement.tsx

@@ -0,0 +1,37 @@
+import { Box, Group, Stack, Text } from "@mantine/core";
+import { BsCardText } from "react-icons/bs";
+import { TfiAnnouncement } from "react-icons/tfi";
+
+export default function DetailAnnouncement() {
+   return (
+      <Box py={30} px={20}>
+         <Box p={20} style={{ borderRadius: 10, border: '1px solid #E5E5E5' }} bg={'white'} >
+            <Stack>
+               <Group>
+                  <TfiAnnouncement size={25} />
+                  <Text fw={'bold'}>Pengumuman Dinas</Text>
+               </Group>
+               <Group>
+                  <BsCardText size={25} />
+                  <Text>Pengumuman agar menggunakan</Text>
+               </Group>
+            </Stack>
+         </Box>
+         <Box my={15} p={20} style={{ borderRadius: 10, border: '1px solid #E5E5E5' }} bg={'white'} >
+            <Stack>
+               <Text fw={'bold'}>Anggota</Text>
+               <Group>
+                  <Text>LPD</Text>
+               </Group>
+               <Group>
+                  <Text>PKK</Text>
+               </Group>
+               <Group>
+                  <Text>Karang Taruna</Text>
+               </Group>
+            </Stack>
+         </Box>
+      </Box>
+
+   )
+}

src/module/announcement/component/list_announcement.tsx

@@ -0,0 +1,92 @@
+'use client'
+import { isDrawer, LayoutDrawer, WARNA } from '@/module/_global';
+import { ActionIcon, Anchor, Box, Group, Text, TextInput } from '@mantine/core';
+import React from 'react';
+import { TfiAnnouncement } from "react-icons/tfi";
+import { HiMagnifyingGlass } from 'react-icons/hi2';
+import { useRouter } from 'next/navigation';
+
+const dataPengumuman = [
+   {
+      id: 1,
+      name: 'Lembaga Pengkreditan Desa',
+      desc: 'Diharapkan semua untuk melakukan upacara ben...'
+   },
+   {
+      id: 2,
+      name: 'Lembaga Pengkreditan Desa',
+      desc: 'Diharapkan semua untuk melakukan upacara ben...'
+   },
+   {
+      id: 3,
+      name: 'Lembaga Pengkreditan Desa',
+      desc: 'Diharapkan semua untuk melakukan upacara ben...'
+   },
+   {
+      id: 4,
+      name: 'Lembaga Pengkreditan Desa',
+      desc: 'Diharapkan semua untuk melakukan upacara ben...'
+   },
+   {
+      id: 5,
+      name: 'Lembaga Pengkreditan Desa',
+      desc: 'Diharapkan semua untuk melakukan upacara ben...'
+   },
+   {
+      id: 6,
+      name: 'Lembaga Pengkreditan Desa',
+      desc: 'Diharapkan semua untuk melakukan upacara ben...'
+   },
+   {
+      id: 7,
+      name: 'Lembaga Pengkreditan Desa',
+      desc: 'Diharapkan semua untuk melakukan upacara ben...'
+   },
+   {
+      id: 8,
+      name: 'Lembaga Pengkreditan Desa',
+      desc: 'Diharapkan semua untuk melakukan upacara ben...'
+   },
+]
+
+export default function ListAnnouncement() {
+   const router = useRouter()
+   return (
+      <Box p={20}>
+         <TextInput
+            styles={{
+               input: {
+                  color: WARNA.biruTua,
+                  borderRadius: WARNA.biruTua,
+                  borderColor: WARNA.biruTua,
+               },
+            }}
+            size="md"
+            radius={30}
+            leftSection={<HiMagnifyingGlass size={20} />}
+            placeholder="Pencarian"
+         />
+         {dataPengumuman.map((v, i) => {
+            return (
+               <Box pt={20} key={i} onClick={() => {
+                  router.push(`/announcement/${v.id}`)
+               }}>
+                  <Group align='center' style={{
+                     borderBottom: `1px solid #D9D9D9`,
+                     padding: 10,
+                  }} >
+                     <Box>
+                        <ActionIcon variant="light" bg={'#FCAA4B'} size={50} radius={100} aria-label="icon">
+                           <TfiAnnouncement color={WARNA.biruTua} size={25} />
+                        </ActionIcon>
+                     </Box>
+                     <Box>
+                        <Text fw={'bold'} c={WARNA.biruTua}>{v.name}</Text>
+                     </Box>
+                  </Group>
+               </Box>
+            )
+         })}
+      </Box>
+   );
+}

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

@@ -0,0 +1,48 @@
+import { isDrawer, LayoutDrawer, WARNA } from '@/module/_global';
+import { useHookstate } from '@hookstate/core';
+import { Box, Button, Center, Flex, Group, SimpleGrid, Stack, Text, TextInput } from '@mantine/core';
+import { useRouter } from 'next/navigation';
+import React, { useState } from 'react';
+import { IoAddCircle } from "react-icons/io5";
+import { RiFilter2Line } from "react-icons/ri";
+
+export default function DrawerAnnouncement() {
+   const openDrawer = useHookstate(isDrawer)
+   const router = useRouter()
+
+   function onCLose() {
+      openDrawer.set(false)
+   }
+   return (
+      <Box>
+         <Stack pt={10}>
+            <SimpleGrid
+               cols={{ base: 3, sm: 3, lg: 3 }}
+            >
+               <Flex justify={'center'} align={'center'} direction={'column'}
+                  onClick={() => {
+                     router.push('/announcement/create')
+                     onCLose()
+                  }}
+               >
+                  <Box>
+                     <IoAddCircle size={30} color={WARNA.biruTua} />
+                  </Box>
+                  <Box>
+                     <Text c={WARNA.biruTua} ta='center'>Tambah Pengumuman</Text>
+                  </Box>
+               </Flex>
+
+               <Flex justify={'center'} align={'center'} direction={'column'} >
+                  <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/component/ui/drawer_detail_announcement.tsx

@@ -0,0 +1,45 @@
+import { isDrawer, LayoutDrawer, WARNA } from '@/module/_global';
+import { useHookstate } from '@hookstate/core';
+import { Box, Button, Center, Flex, Group, SimpleGrid, Stack, Text, TextInput } from '@mantine/core';
+import { useRouter } from 'next/navigation';
+import React, { useState } from 'react';
+import { FaPencil, FaTrash } from 'react-icons/fa6';
+
+export default function DrawerDetailAnnouncement() {
+   const openDrawer = useHookstate(isDrawer)
+   const router = useRouter()
+
+   function onCLose() {
+      openDrawer.set(false)
+   }
+   return (
+      <Box>
+         <Stack pt={10}>
+            <SimpleGrid
+               cols={{ base: 3, sm: 3, lg: 3 }}
+            >
+               <Flex justify={'center'} align={'center'} direction={'column'}>
+                  <Box>
+                     <FaTrash size={30} color={WARNA.biruTua} />
+                  </Box>
+                  <Box>
+                     <Text c={WARNA.biruTua} ta='center'>Hapus</Text>
+                  </Box>
+               </Flex>
+
+               <Flex justify={'center'} align={'center'} direction={'column'} onClick={() => {
+                  router.push('edit/123')
+                  onCLose()
+               }}>
+                  <Box>
+                     <FaPencil size={30} color={WARNA.biruTua} />
+                  </Box>
+                  <Box>
+                     <Text c={WARNA.biruTua} ta='center'>Edit</Text>
+                  </Box>
+               </Flex>
+            </SimpleGrid>
+         </Stack>
+      </Box>
+   );
+}

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

@@ -0,0 +1,37 @@
+"use client"
+import { isDrawer, LayoutDrawer, LayoutIconBack, LayoutNavbarHome, WARNA } from '@/module/_global';
+import { ActionIcon, Box, Drawer, Grid, Group, Text } from '@mantine/core';
+import { useRouter } from 'next/navigation';
+import React from 'react';
+import { HiMenu } from "react-icons/hi";
+import { useHookstate } from '@hookstate/core';
+import DrawerAnnouncement from './drawer_announcement';
+
+export default function NavbarAnnouncement() {
+  const openDrawer = useHookstate(isDrawer)
+  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'}>PENGUMUMAN</Text>
+          </Grid.Col>
+          <Grid.Col span="auto">
+            <Group justify='flex-end'>
+              <ActionIcon onClick={() => openDrawer.set(true)} variant="light" bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
+                <HiMenu size={20} color='white' />
+              </ActionIcon>
+            </Group>
+          </Grid.Col>
+        </Grid>
+      </LayoutNavbarHome>
+      <LayoutDrawer opened={openDrawer.get()} title={'MENU'} onClose={() => openDrawer.set(false)}>
+        <DrawerAnnouncement />
+      </LayoutDrawer>
+    </>
+  );
+}
+

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

@@ -0,0 +1,21 @@
+'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_detail_announcement.tsx

@@ -0,0 +1,34 @@
+'use client'
+import { isDrawer, LayoutDrawer, LayoutIconBack, LayoutNavbarHome, WARNA } from "@/module/_global";
+import { useHookstate } from "@hookstate/core";
+import { ActionIcon, Box, Grid, Group, Text } from "@mantine/core";
+import { HiMenu } from "react-icons/hi";
+import DrawerDetailAnnouncement from "./drawer_detail_announcement";
+
+export default function NavbarDetailAnnouncement() {
+   const openDrawer = useHookstate(isDrawer)
+   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'}>PENGUMUMAN</Text>
+               </Grid.Col>
+               <Grid.Col span="auto">
+                  <Group justify='flex-end'>
+                     <ActionIcon onClick={() => openDrawer.set(true)} variant="light" bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
+                        <HiMenu size={20} color='white' />
+                     </ActionIcon>
+                  </Group>
+               </Grid.Col>
+            </Grid>
+         </LayoutNavbarHome>
+         <LayoutDrawer opened={openDrawer.get()} title={'MENU'} onClose={() => openDrawer.set(false)}>
+            <DrawerDetailAnnouncement />
+         </LayoutDrawer>
+      </Box>
+   )
+}

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

@@ -0,0 +1,21 @@
+'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/index.ts

@@ -0,0 +1,9 @@
+import ViewCreateAnnouncement from "./view/view_create_announcement";
+import ViewDetailAnnouncement from "./view/view_detail_anouncement";
+import ViewEditAnnouncement from "./view/view_edit_announcement";
+import ViewListAnnouncement from "./view/view_list_announcement";
+
+export { ViewListAnnouncement }
+export { ViewCreateAnnouncement }
+export { ViewDetailAnnouncement }
+export { ViewEditAnnouncement }

src/module/announcement/view/view_create_announcement.tsx

@@ -0,0 +1,60 @@
+import { WARNA } from "@/module/_global";
+import { Box, Stack, TextInput, Button, Textarea } from "@mantine/core";
+import { HiOutlineChevronRight, HiUser } from "react-icons/hi2";
+import NavbarCreateAnnouncement from "../component/ui/navbar_create_announcement";
+
+export default function ViewCreateAnnouncement() {
+   return (
+      <Box>
+         <NavbarCreateAnnouncement />
+         <Stack
+            align="center"
+            justify="center"
+            gap="xs"
+            pt={30}
+            px={20}
+         >
+            <TextInput
+               size="md" type="text" radius={30} placeholder="Judul Pengumuman" withAsterisk label="Judul" w={"100%"}
+               styles={{
+                  input: {
+                     color: WARNA.biruTua,
+                     borderRadius: WARNA.biruTua,
+                     borderColor: WARNA.biruTua,
+                  },
+               }}
+            />
+            <Textarea
+               size="md"
+               radius={20}
+               w={"100%"}
+               label="Pengumuman"
+               withAsterisk
+               placeholder="Deskripsi Pengumuman"
+               styles={{
+                  input: {
+                     color: WARNA.biruTua,
+                     borderRadius: WARNA.biruTua,
+                     borderColor: WARNA.biruTua,
+                  },
+               }}
+            />
+
+            <Button rightSection={<HiOutlineChevronRight  size={14} />} variant="default" fullWidth radius={30} size="md" mt={10}>
+               Pilih Anggota
+            </Button>
+         </Stack>
+         <Box mt={30} mx={20}>
+            <Button
+               c={"white"}
+               bg={WARNA.biruTua}
+               size="md"
+               radius={30}
+               fullWidth
+            >
+               Simpan
+            </Button>
+         </Box>
+      </Box>
+   )
+}

src/module/announcement/view/view_detail_anouncement.tsx

@@ -0,0 +1,12 @@
+import { Box } from "@mantine/core";
+import DetailAnnouncement from "../component/detail_announcement";
+import NavbarDetailAnnouncement from "../component/ui/navbar_detail_announcement";
+
+export default function ViewDetailAnnouncement({ data }: { data: string }) {
+   return (
+      <Box>
+         <NavbarDetailAnnouncement />
+         <DetailAnnouncement />
+      </Box>
+   )
+}

src/module/announcement/view/view_edit_announcement.tsx

@@ -0,0 +1,60 @@
+import { Box, Button, Stack, Textarea, TextInput } from "@mantine/core";
+import NavbarEditAnnouncement from "../component/ui/navbar_edit_announcement";
+import { WARNA } from "@/module/_global";
+import { HiOutlineChevronRight } from "react-icons/hi2";
+
+export default function ViewEditAnnouncement({ data }: { data: string }) {
+   return (
+      <Box>
+         <NavbarEditAnnouncement />
+         <Stack
+            align="center"
+            justify="center"
+            gap="xs"
+            pt={30}
+            px={20}
+         >
+            <TextInput
+               size="md" type="text" radius={30} placeholder="Judul Pengumuman" withAsterisk label="Judul" w={"100%"}
+               styles={{
+                  input: {
+                     color: WARNA.biruTua,
+                     borderRadius: WARNA.biruTua,
+                     borderColor: WARNA.biruTua,
+                  },
+               }}
+            />
+            <Textarea
+               size="md"
+               radius={20}
+               w={"100%"}
+               label="Pengumuman"
+               withAsterisk
+               placeholder="Deskripsi Pengumuman"
+               styles={{
+                  input: {
+                     color: WARNA.biruTua,
+                     borderRadius: WARNA.biruTua,
+                     borderColor: WARNA.biruTua,
+                  },
+               }}
+            />
+
+            <Button rightSection={<HiOutlineChevronRight size={14} />} variant="default" fullWidth radius={30} size="md" mt={10}>
+               Pilih Anggota
+            </Button>
+         </Stack>
+         <Box mt={30} mx={20}>
+            <Button
+               c={"white"}
+               bg={WARNA.biruTua}
+               size="md"
+               radius={30}
+               fullWidth
+            >
+               Simpan
+            </Button>
+         </Box>
+      </Box>
+   )
+}

src/module/announcement/view/view_list_announcement.tsx

@@ -0,0 +1,12 @@
+import { Box } from "@mantine/core";
+import NavbarAnnouncement from "../component/ui/navbar_announcement";
+import ListAnnouncement from "../component/list_announcement";
+
+export default function ViewListAnnouncement() {
+   return (
+      <Box>
+         <NavbarAnnouncement />
+         <ListAnnouncement />
+      </Box>
+   )
+}

src/module/home/components/features.tsx

@@ -42,7 +42,7 @@ export default function Features() {
               <Text fz={15} c={WARNA.biruTua}>Proyek</Text>
             </Center>
           </Box>
-          <Box>
+          <Box onClick={() => router.push('/announcement')}>
             <Center>
               <ActionIcon variant="gradient"
                 size={68}