Merge pull request #23 from bipproduction/amalia/8-jul-24

update : jabatan

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

@@ -1,10 +1,9 @@
+import { ViewListPosition } from '@/module/position';
 import React from 'react';
 
 function Page() {
   return (
-    <div>
+    <ViewListPosition />
-      Page
-    </div>
   );
 }
 

src/module/_global/layout/layout_drawer.tsx

@@ -2,10 +2,10 @@ import { Box, Drawer, Text } from '@mantine/core';
 import React from 'react';
 import { WARNA } from '../fun/WARNA';
 
-export default function LayoutDrawer({ opened, onClose, title, children }: { children: React.ReactNode, opened: boolean, onClose: () => void, title: React.ReactNode }) {
+export default function LayoutDrawer({ opened, onClose, title, children, size }: { children: React.ReactNode, opened: boolean, size?: string, onClose: () => void, title: React.ReactNode }) {
   return (
     <Box>
-      <Drawer opened={opened} title={<Text c={WARNA.biruTua} fw={'bold'}>{title}</Text>} onClose={onClose} position={"bottom"} size={"35%"}
+      <Drawer opened={opened} title={<Text c={WARNA.biruTua} fw={'bold'}>{title}</Text>} onClose={onClose} position={"bottom"} size={(size == 'lg') ? '80%' : '30%'}
         styles={{
           content: {
             backgroundColor: "white",

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

@@ -1,7 +1,6 @@
 "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 DrawerGroup from './drawer_group';
@@ -9,7 +8,6 @@ import { useHookstate } from '@hookstate/core';
 
 export default function NavbarGroup() {
   const openDrawerMenu = useHookstate(isDrawer)
-  const router = useRouter()
   return (
     <>
       <LayoutNavbarHome>

src/module/position/component/tab_list_position.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 ListPositionActive from './ui/list_position_active';
+import ListPositionNonActive from './ui/list_position_nonactive';
+
+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">
+          <ListPositionActive />
+        </Tabs.Panel>
+
+        <Tabs.Panel value="tidak-aktif">
+          <ListPositionNonActive />
+        </Tabs.Panel>
+      </Tabs>
+    </Box>
+  );
+}
+

src/module/position/component/ui/drawer_detail_position.tsx

@@ -0,0 +1,92 @@
+import { isDrawer, LayoutDrawer, WARNA } from "@/module/_global"
+import { useHookstate } from "@hookstate/core"
+import { Box, Stack, SimpleGrid, Flex, Text, Select, TextInput, Button } from "@mantine/core"
+import router from "next/router"
+import { useState } from "react"
+import { FaPencil } from "react-icons/fa6"
+import { ImUserCheck } from "react-icons/im"
+
+export default function DrawerDetailPosition() {
+   const [openDrawerGroup, setOpenDrawerGroup] = useState(false)
+   const openDrawer = useHookstate(isDrawer)
+   function onCLose() {
+      setOpenDrawerGroup(false)
+      openDrawer.set(false)
+   }
+   return (
+      <Box>
+         <Stack pt={10}>
+            <SimpleGrid
+               cols={{ base: 3, sm: 3, lg: 3 }}
+            >
+               <Flex justify={'center'} align={'center'} direction={'column'}>
+                  <Box>
+                     <ImUserCheck size={30} color={WARNA.biruTua} />
+                  </Box>
+                  <Box>
+                     <Text c={WARNA.biruTua} ta='center'>Status</Text>
+                  </Box>
+               </Flex>
+
+               <Flex justify={'center'} align={'center'} direction={'column'}
+                  onClick={() => setOpenDrawerGroup(true)}
+               >
+                  <Box>
+                     <FaPencil size={30} color={WARNA.biruTua} />
+                  </Box>
+                  <Box>
+                     <Text c={WARNA.biruTua} ta='center'>Edit</Text>
+                  </Box>
+               </Flex>
+            </SimpleGrid>
+         </Stack>
+
+         <LayoutDrawer opened={openDrawerGroup} onClose={() => setOpenDrawerGroup(false)} title={'Edit Jabatan'} size="lg">
+            <Box pt={10}>
+               <Select
+                  label="Grup"
+                  placeholder="Pilih grup"
+                  data={['Dinas', 'Adat', 'LPD']}
+                  size="md"
+                  radius={10}
+                  mb={5}
+                  withAsterisk
+                  styles={{
+                     input: {
+                        color: WARNA.biruTua,
+                        borderRadius: WARNA.biruTua,
+                        borderColor: WARNA.biruTua,
+                     },
+                  }}
+               />
+               <TextInput
+                  label="Jabatan"
+                  styles={{
+                     input: {
+                        color: WARNA.biruTua,
+                        borderRadius: WARNA.biruTua,
+                        borderColor: WARNA.biruTua,
+                     },
+                  }}
+                  my={15}
+                  size="md"
+                  radius={10}
+                  placeholder="Nama Jabatan"
+               />
+               <Box mt={'xl'}>
+                  <Button
+                     c={"white"}
+                     bg={WARNA.biruTua}
+                     size="lg"
+                     radius={30}
+                     fullWidth
+                     onClick={onCLose}
+                  >
+                     EDIT
+                  </Button>
+               </Box>
+            </Box>
+         </LayoutDrawer>
+      </Box>
+   )
+}

src/module/position/component/ui/drawer_list_position.tsx

@@ -0,0 +1,80 @@
+import { isDrawer, WARNA, LayoutDrawer } from "@/module/_global";
+import { useHookstate } from "@hookstate/core";
+import { Box, Stack, SimpleGrid, Flex, TextInput, Button, Text, Select } from "@mantine/core";
+import { useState } from "react";
+import { IoAddCircle } from "react-icons/io5";
+
+export default function DrawerListPosition() {
+   const [openDrawerGroup, setOpenDrawerGroup] = useState(false)
+   const openDrawer = useHookstate(isDrawer)
+
+   function onCLose() {
+      setOpenDrawerGroup(false)
+      openDrawer.set(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 ta={'center'} c={WARNA.biruTua}>Tambah Jabatan</Text>
+                  </Box>
+               </Flex>
+            </SimpleGrid>
+         </Stack>
+         <LayoutDrawer opened={openDrawerGroup} onClose={() => setOpenDrawerGroup(false)} title={'Tambah Jabatan'} size="lg">
+            <Box pt={0}>
+               <Select
+                  label="Grup"
+                  placeholder="Pilih grup"
+                  data={['Dinas', 'Adat', 'LPD']}
+                  size="md"
+                  radius={10}
+                  mb={5}
+                  withAsterisk
+                  styles={{
+                     input: {
+                        color: WARNA.biruTua,
+                        borderRadius: WARNA.biruTua,
+                        borderColor: WARNA.biruTua,
+                     },
+                  }}
+               />
+               <TextInput
+                  label="Jabatan"
+                  styles={{
+                     input: {
+                        color: WARNA.biruTua,
+                        borderRadius: WARNA.biruTua,
+                        borderColor: WARNA.biruTua,
+                     },
+                  }}
+                  my={15}
+                  size="md"
+                  radius={10}
+                  placeholder="Nama Jabatan"
+               />
+               <Box mt={'xl'}>
+                  <Button
+                     c={"white"}
+                     bg={WARNA.biruTua}
+                     size="lg"
+                     radius={30}
+                     fullWidth
+                     onClick={onCLose}
+                  >
+                     MASUK
+                  </Button>
+               </Box>
+            </Box>
+         </LayoutDrawer>
+      </Box>
+   );
+}

src/module/position/component/ui/list_position_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 { FaUserTie } from 'react-icons/fa6';
+import { HiMagnifyingGlass } from 'react-icons/hi2';
+import DrawerDetailPosition from './drawer_detail_position';
+
+const dataGroup = [
+  {
+    id: 1,
+    name: 'Kepala'
+  },
+  {
+    id: 2,
+    name: 'Sekretaris'
+  },
+  {
+    id: 3,
+    name: 'Bendahara'
+  },
+  {
+    id: 4,
+    name: 'Anggota'
+  },
+  {
+    id: 5,
+    name: 'Kepala Urusan Kemasyarakatan'
+  },
+  {
+    id: 6,
+    name: 'Kepala Urusan Pemerintahan'
+  },
+  {
+    id: 7,
+    name: 'Kepala Urusan Kependudukan'
+  },
+  {
+    id: 8,
+    name: 'Anggota'
+  },
+]
+
+export default function ListPositionActive() {
+  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">
+                  <FaUserTie 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">
+        <DrawerDetailPosition />
+      </LayoutDrawer>
+    </Box>
+  );
+}

src/module/position/component/ui/list_position_nonactive.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 { FaUserTie } from 'react-icons/fa6';
+import { HiMagnifyingGlass } from 'react-icons/hi2';
+import DrawerDetailPosition from './drawer_detail_position';
+
+const dataGroup = [
+   {
+      id: 1,
+      name: 'Anggota'
+   },
+   {
+      id: 2,
+      name: 'Anggota'
+   },
+   {
+      id: 3,
+      name: 'Anggota'
+   },
+   {
+      id: 4,
+      name: 'Anggota'
+   },
+   {
+      id: 5,
+      name: 'Anggota'
+   },
+   {
+      id: 6,
+      name: 'Anggota'
+   },
+   {
+      id: 7,
+      name: 'Anggota'
+   },
+   {
+      id: 8,
+      name: 'Anggota'
+   },
+]
+
+export default function ListPositionNonActive() {
+   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">
+                           <FaUserTie 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">
+            <DrawerDetailPosition />
+         </LayoutDrawer>
+      </Box>
+   );
+}

src/module/position/component/ui/navbar_list_position.tsx

@@ -0,0 +1,34 @@
+'use client'
+import { LayoutNavbarHome, LayoutIconBack, WARNA, LayoutDrawer, isDrawer } from "@/module/_global";
+import { useHookstate } from "@hookstate/core";
+import { Grid, Group, ActionIcon, Box, Text } from "@mantine/core";
+import { HiMenu } from "react-icons/hi";
+import DrawerListPosition from "./drawer_list_position";
+
+export default function NavbarListPosition() {
+   const openDrawerMenu = useHookstate(isDrawer)
+   return (
+      <Box>
+         <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'}>Jabatan</Text>
+               </Grid.Col>
+               <Grid.Col span="auto">
+                  <Group justify='flex-end'>
+                     <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={openDrawerMenu.get()} title={'MENU'} onClose={() => openDrawerMenu.set(false)}>
+            <DrawerListPosition />
+         </LayoutDrawer>
+      </Box>
+   );
+}

src/module/position/index.ts

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

src/module/position/view/view_list_position.tsx

@@ -0,0 +1,12 @@
+import { Box } from "@mantine/core";
+import NavbarListPosition from "../component/ui/navbar_list_position";
+import TabListGroup from "../component/tab_list_position";
+
+export default function ViewListPosition() {
+   return (
+      <Box>
+         <NavbarListPosition />
+         <TabListGroup />
+      </Box>
+   );
+}