style : update module

Deskripsi:
- add group
- add notification

No issue

src/module/group/components/list_group.tsx

@@ -0,0 +1,80 @@
+import { WARNA } from '@/module/_global';
+import { ActionIcon, Box, Group, Text, TextInput } from '@mantine/core';
+import React from 'react';
+import { HiOutlineOfficeBuilding } from 'react-icons/hi';
+import { HiMagnifyingGlass } from 'react-icons/hi2';
+
+const dataGroup = [
+  {
+    id: 1,
+    name: 'Lembaga Pengkreditan Desa'
+  },
+  {
+    id: 2,
+    name: 'Lembaga Pengkreditan Desa'
+  },
+  {
+    id: 3,
+    name: 'Lembaga Pengkreditan Desa'
+  },
+  {
+    id: 4,
+    name: 'Lembaga Pengkreditan Desa'
+  },
+  {
+    id: 5,
+    name: 'Lembaga Pengkreditan Desa'
+  },
+  {
+    id: 6,
+    name: 'Lembaga Pengkreditan Desa'
+  },
+  {
+    id: 7,
+    name: 'Lembaga Pengkreditan Desa'
+  },
+  {
+    id: 8,
+    name: 'Lembaga Pengkreditan Desa'
+  },
+]
+
+export default function ListGroup() {
+  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"
+      />
+      {dataGroup.map((v, i) => {
+        return (
+          <Box pt={20} key={i}>
+            <Group align='center' style={{
+              border: `1px solid ${"#DCEED8"}`,
+              padding: 10,
+              borderRadius: 10
+            }}>
+              <Box>
+                <ActionIcon variant="light" bg={'#DCEED8'} size={50} radius={100} aria-label="icon">
+                  <HiOutlineOfficeBuilding color={WARNA.biruTua} size={25} />
+                </ActionIcon>
+              </Box>
+              <Box>
+                <Text fw={'bold'} c={WARNA.biruTua}>{v.name}</Text>
+              </Box>
+            </Group>
+          </Box>
+        )
+      })}
+    </Box>
+  );
+}

src/module/group/components/ui/drawer_group.tsx

@@ -0,0 +1,62 @@
+import { isDrawer, LayoutDrawer, WARNA } from '@/module/_global';
+import { Box, Button, Center, Flex, Group, SimpleGrid, Stack, Text, TextInput } from '@mantine/core';
+import { useAtom } from 'jotai';
+import React, { useState } from 'react';
+import { IoAddCircle } from "react-icons/io5";
+
+export default function DrawerGroup() {
+  const [openDrawerGroup, setOpenDrawerGroup] = useState(false)
+  const [openDrawer, setOpenDrawer] = useAtom(isDrawer)
+
+  function onCLose() {
+    setOpenDrawerGroup(false)
+    setOpenDrawer(false)
+  }
+  return (
+    <Box>
+      <Stack pt={10}>
+        <SimpleGrid
+          cols={{ base: 3, sm: 3, lg: 3 }}
+          onClick={() => setOpenDrawerGroup(true)}
+        >
+          <Flex justify={'center'} align={'center'} direction={'column'} >
+            <Box>
+              <IoAddCircle size={30} color={WARNA.biruTua} />
+            </Box>
+            <Box>
+              <Text c={WARNA.biruTua}>Tambah Group</Text>
+            </Box>
+          </Flex>
+        </SimpleGrid>
+      </Stack>
+      <LayoutDrawer opened={openDrawerGroup} onClose={() => setOpenDrawerGroup(false)} title={'TAMBAH GRUP'}>
+        <Box pt={10}>
+          <TextInput
+            styles={{
+              input: {
+                color: WARNA.biruTua,
+                borderRadius: WARNA.biruTua,
+                borderColor: WARNA.biruTua,
+              },
+            }}
+            size="lg"
+            radius={10}
+            placeholder="Tambah Grup"
+          />
+          <Box mt={'xl'}>
+            <Button
+              c={"white"}
+              bg={WARNA.biruTua}
+              size="lg"
+              radius={30}
+              fullWidth
+              onClick={onCLose}
+            >
+              MASUK
+            </Button>
+          </Box>
+          </Box>
+      </LayoutDrawer>
+    </Box>
+  );
+}

src/module/group/components/ui/navbar_group.tsx

@@ -0,0 +1,38 @@
+"use client"
+import { isDrawer, LayoutDrawer, LayoutIconBack, LayoutNavbarHome, WARNA } from '@/module/_global';
+import { ActionIcon, Box, Drawer, Grid, Group, Text } from '@mantine/core';
+import { useAtom } from 'jotai';
+import { useRouter } from 'next/navigation';
+import React, { useState } from 'react';
+import { HiMenu } from "react-icons/hi";
+import DrawerGroup from './drawer_group';
+
+export default function NavbarGroup() {
+  const [openDrawer, setOpenDrawer] = useAtom(isDrawer)
+  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'}>GROUP</Text>
+          </Grid.Col>
+          <Grid.Col span="auto">
+            <Group justify='flex-end'>
+              <ActionIcon onClick={() => setOpenDrawer(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} title={'MENU'} onClose={() => setOpenDrawer(false)}>
+        <DrawerGroup />
+      </LayoutDrawer>
+    </>
+  );
+}
+

src/module/group/index.ts

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

src/module/group/view/view_group.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import NavbarGroup from '../components/ui/navbar_group';
+import { Box } from '@mantine/core';
+import ListGroup from '../components/list_group';
+
+export default function ViewGroup() {
+  return (
+    <Box>
+      <NavbarGroup />
+      <ListGroup />
+    </Box>
+  );
+}
+