feat : update module

Deskripsi:
- update announcement and api
- update position and api

No Issue

src/module/announcement/ui/create_announcement.tsx

@@ -0,0 +1,86 @@
+'use client'
+import { LayoutNavbarNew, WARNA } from "@/module/_global";
+import LayoutModal from "@/module/_global/layout/layout_modal";
+import { Box, Button, Group, Stack, Text, Textarea, TextInput } from "@mantine/core";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import toast from "react-hot-toast";
+import { HiOutlineChevronRight } from "react-icons/hi2";
+import { IoIosArrowForward } from "react-icons/io";
+
+export default function CreateAnnouncement() {
+   const [isOpen, setOpen] = useState(false)
+   const router = useRouter()
+
+   function onTrue(val: boolean) {
+      if (val) {
+         toast.success("Sukses! Data tersimpan");
+      }
+      setOpen(false)
+   }
+
+   return (
+      <Box>
+          <LayoutNavbarNew back="" title="Tambah Pengumuman" menu={<></>} />
+         <Stack
+            p={20}
+         >
+            <TextInput
+               size="md" type="text" radius={10} placeholder="Judul Pengumuman" withAsterisk label="Judul" w={"100%"}
+               styles={{
+                  input: {
+                     color: WARNA.biruTua,
+                     borderRadius: WARNA.biruTua,
+                     borderColor: WARNA.biruTua,
+                  },
+               }}
+            />
+            <Textarea
+               size="md"
+               radius={10}
+               w={"100%"}
+               label="Pengumuman"
+               withAsterisk
+               placeholder="Deskripsi Pengumuman"
+               styles={{
+                  input: {
+                     color: WARNA.biruTua,
+                     borderRadius: WARNA.biruTua,
+                     borderColor: WARNA.biruTua,
+                  },
+               }}
+            />
+            <Box pt={10}>
+               <Group justify="space-between" style={{
+                  border: `1px solid ${WARNA.biruTua}`,
+                  padding: 10,
+                  borderRadius: 10
+               }}
+                  onClick={() => router.push("/announcement/create-user")}
+               >
+                  <Text size="sm">
+                     Tambah Anggota
+                  </Text>
+                  <IoIosArrowForward />
+               </Group>
+            </Box>
+         </Stack>
+         <Box mt={30} mx={20}>
+            <Button
+               c={"white"}
+               bg={WARNA.biruTua}
+               size="md"
+               radius={30}
+               fullWidth
+               onClick={() => { setOpen(true) }}
+            >
+               Simpan
+            </Button>
+         </Box>
+         <LayoutModal opened={isOpen} onClose={() => setOpen(false)}
+            description="Apakah Anda yakin ingin menambahkan data?"
+            onYes={(val) => { onTrue(val) }} />
+      </Box>
+
+   )
+}

src/module/announcement/ui/create_users_announcement.tsx

@@ -0,0 +1,148 @@
+"use client"
+import { LayoutNavbarNew, WARNA } from '@/module/_global';
+import { Box, Button, Divider, Flex, Group, Stack, Text } from '@mantine/core';
+import React, { useState } from 'react';
+import { FaCheck } from 'react-icons/fa';
+
+interface GroupData {
+  group: string;
+  divisions: string[];
+}
+
+const groupData: GroupData[] = [
+  {
+    group: "Group 1",
+    divisions: ["Division 1", "Division 2", "Division 3"]
+  },
+  {
+    group: "Group 2",
+    divisions: ["Division 4", "Division 5"]
+  }
+];
+
+interface CheckedState {
+  [key: string]: string[];
+}
+
+export default function CreateUsersAnnouncement() {
+  const [checked, setChecked] = useState<CheckedState>({});
+  const [selectAll, setSelectAll] = useState(false);
+
+  const handleCheck = (group: string, division: string) => {
+    const newChecked = { ...checked };
+    if (newChecked[group]) {
+      if (newChecked[group].includes(division)) {
+        newChecked[group] = newChecked[group].filter(item => item !== division);
+      } else {
+        newChecked[group].push(division);
+      }
+    } else {
+      newChecked[group] = [division];
+    }
+    setChecked(newChecked);
+    console.log(newChecked)
+  };
+
+  const handleGroupCheck = (group: string) => {
+    const newChecked = { ...checked };
+    if (newChecked[group]) {
+      delete newChecked[group];
+    } else {
+      newChecked[group] = groupData.find(item => item.group === group)?.divisions || [];
+    }
+    setChecked(newChecked);
+    console.log(newChecked)
+  };
+
+  const handleSelectAll = () => {
+    setSelectAll(!selectAll);
+    if (!selectAll) {
+      const newChecked: CheckedState = {};
+      groupData.forEach(item => {
+        newChecked[item.group] = item.divisions;
+      });
+      setChecked(newChecked);
+      console.log(newChecked)
+    } else {
+      setChecked({});
+    }
+  };
+
+  return (
+    <div>
+      <LayoutNavbarNew back="" title="Tambah Anggota" menu={<></>} />
+      <Box p={20}>
+        <Group justify='flex-end' mb={20}>
+          <Text
+            onClick={handleSelectAll}
+            style={{
+              cursor: 'pointer',
+              display: 'flex',
+              alignItems: 'center',
+            }}
+            fw={selectAll ? 'bold' : 'normal'}
+          >
+            Pilih Semua
+          </Text>
+        </Group>
+        {groupData.map((item) => (
+          <Stack mb={30} key={item.group}>
+            <Group onClick={() => handleGroupCheck(item.group)} justify='space-between' align='center'>
+              <Text
+                style={{
+                  cursor: 'pointer',
+                  display: 'flex',
+                  alignItems: 'center',
+                }}
+                fw={checked[item.group] && checked[item.group].length === item.divisions.length ? 'bold' : 'normal'}
+              >
+                {item.group}
+              </Text>
+              <Text
+              >
+                {checked[item.group] && checked[item.group].length === item.divisions.length ? <FaCheck style={{ marginRight: 10 }} /> : ""}
+              </Text>
+            </Group>
+            <Divider/>
+            {item.divisions.map((division) => (
+              <Box key={division}>
+                <Text
+                  onClick={() => handleCheck(item.group, division)}
+                  style={{
+                    cursor: 'pointer',
+                    display: 'flex',
+                    alignItems: 'center',
+                    paddingLeft: 20,
+                  }}
+                >
+                  {checked[item.group] && checked[item.group].includes(division) ? <FaCheck style={{ marginRight: 10 }} /> : ""}
+                  {division}
+                </Text>
+                <Box pt={15}>
+                <Divider />
+                  </Box>
+              </Box>
+
+            ))}
+          </Stack>
+        ))}
+
+        <Box mt="xl">
+          <Button
+            color="white"
+            bg={WARNA.biruTua}
+            size="lg"
+            radius={30}
+            fullWidth
+            onClick={() => {
+              ""
+            }}
+          >
+            Simpan
+          </Button>
+        </Box>
+
+      </Box>
+    </div>
+  );
+}

src/module/announcement/ui/detail_announcement.tsx

@@ -0,0 +1,71 @@
+"use client"
+import { API_ADDRESS } from "@/module/_global";
+import { Box, Flex, Grid, Group, Spoiler, Stack, Text } from "@mantine/core";
+import { useShallowEffect } from "@mantine/hooks";
+import { useState } from "react";
+import { BsCardText } from "react-icons/bs";
+import { TfiAnnouncement } from "react-icons/tfi";
+import { IRootAllAnnouncement } from "../lib/type_announcement";
+import { funGetAnnouncementById } from "../lib/api_announcement";
+import toast from "react-hot-toast";
+
+
+
+
+export default function DetailAnnouncement({ id }: { id: string }) {
+   const [isData, setIsData] = useState<IRootAllAnnouncement>()
+
+   async function fetchOneAnnouncement() {
+      try {
+         const res = await funGetAnnouncementById(id)
+         if (res.success) {
+            setIsData(res)
+         } else {
+            toast.error(res.message)
+         }
+
+      } catch (error) {
+         console.error(error)
+        toast.error("Gagal mendapatkan announcement, coba lagi nanti")
+      }
+   }
+
+   useShallowEffect(() => {
+      fetchOneAnnouncement()
+   }, [])
+
+   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'}>{isData?.announcement.title}</Text>
+               </Group>
+               <Grid gutter={'md'}>
+                  <Grid.Col span={1}>
+                     <BsCardText size={25} />
+                  </Grid.Col>
+                  <Grid.Col span={11}>
+                     <Spoiler maxHeight={100} showLabel="Lebih banyak" hideLabel="Lebih sedikit">
+                        <Text>{isData?.announcement.desc}</Text>
+                     </Spoiler>
+                  </Grid.Col>
+               </Grid>
+            </Stack>
+         </Box>
+         <Box my={15} p={20} style={{ borderRadius: 10, border: '1px solid #E5E5E5' }} bg={'white'} >
+            {isData?.allAnnouncementMember.map((v, i) => {
+               return (
+                  <Stack key={i}>
+                     <Text fw={'bold'}>Anggota</Text>
+                     <Flex direction={"column"} gap={10}>
+                        <Text>{v.group}</Text>
+                     </Flex>
+                  </Stack>
+               )
+            })}
+         </Box>
+      </Box>
+   )
+}

src/module/announcement/ui/drawer_announcement.tsx

@@ -0,0 +1,52 @@
+import { WARNA } from '@/module/_global';
+import { Box, Flex, SimpleGrid, Stack, Text } 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 router = useRouter()
+
+   return (
+      <Box>
+         <Stack pt={10}>
+            <SimpleGrid
+               cols={{ base: 3, sm: 3, lg: 3 }}
+            >
+               <Flex justify={'center'} align={'center'} direction={'column'}
+                  style={{
+                     cursor: 'pointer'
+                  }}
+                  onClick={() => {
+                     router.push('/announcement/create')
+                  }}
+               >
+                  <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'}
+                  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/drawer_detail_announcement.tsx

@@ -0,0 +1,52 @@
+import { WARNA } from '@/module/_global';
+import LayoutModal from '@/module/_global/layout/layout_modal';
+import { Box, Flex, SimpleGrid, Stack, Text, } from '@mantine/core';
+import { useRouter } from 'next/navigation';
+import React, { useState } from 'react';
+import toast from 'react-hot-toast';
+import { FaPencil, FaTrash } from 'react-icons/fa6';
+
+export default function DrawerDetailAnnouncement({ onDeleted }: { onDeleted: (val: boolean) => void }) {
+   const router = useRouter()
+   const [isOpen, setOpen] = useState(false)
+
+   function onTrue(val: boolean) {
+      if (val) {
+         toast.success('Sukses! Data terhapus')
+         onDeleted(true)
+      }
+      setOpen(false)
+   }
+   return (
+      <Box>
+         <Stack pt={10}>
+            <SimpleGrid
+               cols={{ base: 3, sm: 3, lg: 3 }}
+            >
+               <Flex style={{ cursor: 'pointer' }} justify={'center'} align={'center'} direction={'column'} onClick={() => setOpen(true)}>
+                  <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')
+               }} style={{ cursor: 'pointer' }}>
+                  <Box>
+                     <FaPencil size={30} color={WARNA.biruTua} />
+                  </Box>
+                  <Box>
+                     <Text c={WARNA.biruTua} ta='center'>Edit</Text>
+                  </Box>
+               </Flex>
+            </SimpleGrid>
+         </Stack>
+         <LayoutModal opened={isOpen} onClose={() => setOpen(false)}
+            description="Apakah Anda yakin ingin menghapus data?"
+            onYes={(val) => { onTrue(val) }} />
+      </Box>
+   );
+}

src/module/announcement/ui/edit_announcement.tsx

@@ -0,0 +1,75 @@
+'use client'
+import { LayoutNavbarNew, WARNA } from "@/module/_global";
+import LayoutModal from "@/module/_global/layout/layout_modal";
+import { Box, Button, Stack, Textarea, TextInput } from "@mantine/core";
+import { useState } from "react";
+import toast from "react-hot-toast";
+import { HiOutlineChevronRight } from "react-icons/hi2";
+
+export default function EditAnnouncement() {
+   const [isOpen, setOpen] = useState(false)
+
+   function onTrue(val: boolean) {
+      if (val) {
+         toast.success("Sukses! Data tersimpan");
+      }
+      setOpen(false)
+   }
+   return (
+      <>
+         <LayoutNavbarNew back="" title="Edit Pengumuman" menu={<></>} />
+         <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
+               onClick={() => { setOpen(true) }}
+            >
+               Simpan
+            </Button>
+         </Box>
+         <LayoutModal opened={isOpen} onClose={() => setOpen(false)}
+            description="Apakah Anda yakin ingin mengubah data?"
+            onYes={(val) => { onTrue(val) }} />
+      </>
+   )
+}

src/module/announcement/ui/list_announcement.tsx

@@ -0,0 +1,89 @@
+'use client'
+import { API_ADDRESS, WARNA } from '@/module/_global';
+import { ActionIcon, Box, Center, Divider, Grid, Group, Spoiler, Text, TextInput } from '@mantine/core';
+import React, { useState } from 'react';
+import { TfiAnnouncement } from "react-icons/tfi";
+import { HiMagnifyingGlass } from 'react-icons/hi2';
+import { useRouter } 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';
+
+
+export default function ListAnnouncement() {
+   const [isData, setIsData] = useState<IListDataAnnouncement[]>([])
+   const [searchQuery, setSearchQuery] = useState('')
+   const router = useRouter()
+
+   const fetchData = async () => {
+      try {
+         const response = await funGetAllAnnouncement('?search=' + searchQuery)
+
+         if (response.success) {
+            setIsData(response?.data)
+         } else {
+            toast.error(response.message);
+         }
+
+      } catch (error) {
+         toast.error("Gagal mendapatkan announcement, coba lagi nanti");
+         console.error(error);
+      }
+   }
+
+   useShallowEffect(() => {
+      fetchData()
+   }, [searchQuery])
+
+   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"
+            onChange={(e) => setSearchQuery(e.target.value)}
+            />
+         {isData.map((v, i) => {
+            return (
+               <Box key={i} mt={15}>
+                  <Box >
+                     <Grid>
+                        <Grid.Col span={2}>
+                           <Center>
+                              <ActionIcon variant="light" bg={'#FCAA4B'} size={50} radius={100} aria-label="icon">
+                                 <TfiAnnouncement color={WARNA.biruTua} size={25} />
+                              </ActionIcon>
+                           </Center>
+                        </Grid.Col>
+                        <Grid.Col span={10}>
+                           <Group justify='space-between' mb={5} onClick={() => {
+                              router.push(`/announcement/${v.id}`)
+                           }}>
+                              <Text fw={'bold'} c={WARNA.biruTua}>{v.title}</Text>
+                              <Text fw={'lighter'} c={WARNA.biruTua} fz={13}>{v.createdAt}</Text>
+                           </Group>
+                           {/* <Text c={WARNA.biruTua} lineClamp={2}>{v.desc}</Text> */}
+                           <Spoiler maxHeight={50} showLabel="Lebih banyak" hideLabel="Lebih sedikit">
+                              <Text c={WARNA.biruTua} onClick={() => {
+                                 router.push(`/announcement/${v.id}`)
+                              }} >{v.desc}</Text>
+                           </Spoiler>
+                        </Grid.Col>
+                     </Grid>
+                  </Box>
+                  <Divider my={15} />
+               </Box>
+            )
+         })}
+      </Box>
+   );
+}

src/module/announcement/ui/navbar_announcement.tsx

@@ -0,0 +1,25 @@
+"use client"
+import { LayoutDrawer, LayoutNavbarNew, WARNA } from '@/module/_global';
+import { ActionIcon } from '@mantine/core';
+import React, { useState } from 'react';
+import { HiMenu } from "react-icons/hi";
+import DrawerAnnouncement from './drawer_announcement';
+
+export default function NavbarAnnouncement() {
+  const [isOpen, setOpen] = useState(false)
+
+  return (
+    <>
+      <LayoutNavbarNew back='/home' title='pengumuman'
+        menu={
+          <ActionIcon onClick={() => setOpen(true)} variant="light" bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
+            <HiMenu size={20} color='white' />
+          </ActionIcon>
+        } />
+      <LayoutDrawer opened={isOpen} title={'Menu'} onClose={() => setOpen(false)}>
+        <DrawerAnnouncement />
+      </LayoutDrawer>
+    </>
+  );
+}
+

src/module/announcement/ui/navbar_detail_announcement.tsx

@@ -0,0 +1,23 @@
+'use client'
+import { LayoutDrawer, LayoutNavbarNew, WARNA } from "@/module/_global";
+import { ActionIcon, Box } from "@mantine/core";
+import { HiMenu } from "react-icons/hi";
+import DrawerDetailAnnouncement from "./drawer_detail_announcement";
+import { useState } from "react";
+
+export default function NavbarDetailAnnouncement() {
+   const [isOpenDrawer, setOpenDrawer] = useState(false)
+   return (
+      <Box>
+         <LayoutNavbarNew back="" title="Pengumuman"
+            menu={
+               <ActionIcon onClick={() => setOpenDrawer(true)} variant="light" bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
+                  <HiMenu size={20} color='white' />
+               </ActionIcon>}
+         />
+         <LayoutDrawer opened={isOpenDrawer} title={'Menu'} onClose={() => setOpenDrawer(false)}>
+            <DrawerDetailAnnouncement onDeleted={() => setOpenDrawer(false)} />
+         </LayoutDrawer>
+      </Box>
+   )
+}

src/module/announcement/ui/view_detail_anouncement.tsx

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