style : add group

Deskripsi:
-update list group
- update edit drawer group
- navbar group
- view group

No Issue

src/module/group/components/list_group_active.tsx

@@ -1,9 +1,11 @@
 import { isDrawer, LayoutDrawer, WARNA } from '@/module/_global';
 import { ActionIcon, Box, Group, Text, TextInput } from '@mantine/core';
-import React from 'react';
+import React, { useState } from 'react';
 import { HiOutlineOfficeBuilding } from 'react-icons/hi';
 import { HiMagnifyingGlass } from 'react-icons/hi2';
 import EditDrawerGroup from './ui/edit_drawer_group';
+import { useHookstate } from '@hookstate/core';
+import { useRouter } from 'next/navigation';
 
 const dataGroup = [
   {
@@ -40,9 +42,11 @@ const dataGroup = [
   },
 ]
 
-export default function ListGroup() {
+export default function ListGroupActive() {
+  // const openDrawerEdit = useHookstate(isDrawer)
+  const [openDrawer, setOpenDrawer] = useState(false)
   return (
-    <Box p={20}>
+    <Box pt={20}>
       <TextInput
         styles={{
           input: {
@@ -63,7 +67,7 @@ export default function ListGroup() {
               border: `1px solid ${"#DCEED8"}`,
               padding: 10,
               borderRadius: 10
-            }} >
+            }} onClick={() => setOpenDrawer(true)} >
               <Box>
                 <ActionIcon variant="light" bg={'#DCEED8'} size={50} radius={100} aria-label="icon">
                   <HiOutlineOfficeBuilding color={WARNA.biruTua} size={25} />
@@ -76,9 +80,9 @@ export default function ListGroup() {
           </Box>
         )
       })}
-      {/* <LayoutDrawer opened={openDrawer} onClose={() => setOpenDrawer(false)} title="LEMBAGA PENGKREDITAN DESA">
+      <LayoutDrawer opened={openDrawer} onClose={() => setOpenDrawer(false)} title="LEMBAGA PENGKREDITAN DESA">
         <EditDrawerGroup />
-      </LayoutDrawer> */}
+      </LayoutDrawer>
     </Box>
   );
 }

src/module/group/components/list_group_non_active.tsx

@@ -0,0 +1,85 @@
+import { isDrawer, LayoutDrawer, WARNA } from '@/module/_global';
+import { ActionIcon, Box, Group, Text, TextInput } from '@mantine/core';
+import React, { useState } from 'react';
+import { HiOutlineOfficeBuilding } from 'react-icons/hi';
+import { HiMagnifyingGlass } from 'react-icons/hi2';
+import EditDrawerGroup from './ui/edit_drawer_group';
+
+const dataGroup = [
+  {
+    id: 1,
+    name: 'No Active Desa'
+  },
+  {
+    id: 2,
+    name: 'No Active Desa'
+  },
+  {
+    id: 3,
+    name: 'No Active Desa'
+  },
+  {
+    id: 4,
+    name: 'No Active Desa'
+  },
+  {
+    id: 5,
+    name: 'No Active Desa'
+  },
+  {
+    id: 6,
+    name: 'No Active Desa'
+  },
+  {
+    id: 7,
+    name: 'No Active Desa'
+  },
+  {
+    id: 8,
+    name: 'No Active Desa'
+  },
+]
+
+export default function ListGroupNonActive() {
+  const [openDrawer, setOpenDrawer] = useState(false)
+  return (
+    <Box pt={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
+            }} onClick={() => setOpenDrawer(true)}>
+              <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>
+        )
+      })}
+      <LayoutDrawer opened={openDrawer} onClose={() => setOpenDrawer(false)} title="LEMBAGA PENGKREDITAN DESA">
+        <EditDrawerGroup />
+      </LayoutDrawer>
+    </Box>
+  );
+}

src/module/group/components/tab_list_group.tsx

@@ -0,0 +1,38 @@
+'use client'
+import { Box, Tabs, rem } from '@mantine/core';
+import { IoCloseCircleOutline } from "react-icons/io5"
+import { IoMdCheckmarkCircleOutline } from "react-icons/io"
+import ListGroupActive from './list_group_active';
+import ListGroupNonActive from './list_group_non_active';
+
+export default function TabListGroup() {
+  const iconStyle = { width: rem(20), height: rem(20) };
+
+  return (
+    <Box p={20}>
+      <Tabs variant="pills" color='#FF9861' radius="xl" defaultValue="aktif">
+        <Tabs.List bg={"white"} style={{
+          border: `1px solid ${"#EDEDED"}`,
+          padding: 5,
+          borderRadius: 100
+        }}>
+          <Tabs.Tab value="aktif" w={"45%"} leftSection={<IoMdCheckmarkCircleOutline style={iconStyle} />}>
+            Aktif
+          </Tabs.Tab>
+          <Tabs.Tab value="tidak-aktif" w={"53%"} leftSection={<IoCloseCircleOutline style={iconStyle} />}>
+            Tidak Aktif
+          </Tabs.Tab>
+        </Tabs.List>
+
+        <Tabs.Panel value="aktif">
+          <ListGroupActive />
+        </Tabs.Panel>
+
+        <Tabs.Panel value="tidak-aktif">
+          <ListGroupNonActive />
+        </Tabs.Panel>
+      </Tabs>
+    </Box>
+  );
+}
+

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

@@ -1,33 +1,34 @@
 'use client'
 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 React, { useState } from 'react';
-import { IoAddCircle } from "react-icons/io5";
+import { IoAddCircle, IoCloseCircleOutline } from "react-icons/io5";
 
 export default function EditDrawerGroup() {
-  // const [openDrawerGroup, setOpenDrawerGroup] = useState(false)
+  const [openDrawerGroup, setOpenDrawerGroup] = useState(false)
-  // const [openDrawer, setOpenDrawer] = useAtom(isDrawer)
+  const openDrawerEdit = useHookstate(isDrawer)
 
-  // function onCLose() {
+  function onCLose() {
-  //   setOpenDrawerGroup(false)
+    setOpenDrawerGroup(false)
-  //   setOpenDrawer(false)
+    openDrawerEdit.set(false)
-  // }
+  }
   return (
     <Box>
-      {/* <Stack pt={10}>
+      <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} />
+              <IoCloseCircleOutline size={30} color={WARNA.biruTua} />
             </Box>
             <Box>
               <Text c={WARNA.biruTua}>Tidak Aktif</Text>
             </Box>
           </Flex>
-          <Flex justify={'center'} align={'center'} direction={'column'} >
+          <Flex justify={'center'} align={'center'} direction={'column'} onClick={() => setOpenDrawerGroup(true)}>
             <Box>
               <IoAddCircle size={30} color={WARNA.biruTua} />
             </Box>
@@ -64,7 +65,7 @@ export default function EditDrawerGroup() {
             </Button>
           </Box>
         </Box>
-      </LayoutDrawer> */}
+      </LayoutDrawer>
     </Box>
   );
 }

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

@@ -8,7 +8,7 @@ import DrawerGroup from './drawer_group';
 import { useHookstate } from '@hookstate/core';
 
 export default function NavbarGroup() {
-  const openDrawer = useHookstate(isDrawer)
+  const openDrawerMenu = useHookstate(isDrawer)
   const router = useRouter()
   return (
     <>
@@ -22,14 +22,14 @@ export default function NavbarGroup() {
           </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">
+              <ActionIcon onClick={() => openDrawerMenu.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)}>
+      <LayoutDrawer opened={openDrawerMenu.get()} title={'MENU'} onClose={() => openDrawerMenu.set(false)}>
         <DrawerGroup />
       </LayoutDrawer>
     </>

src/module/group/view/view_group.tsx

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