diff --git a/src/app/(application)/position/page.tsx b/src/app/(application)/position/page.tsx index 69da2f2..9dd2f1a 100644 --- a/src/app/(application)/position/page.tsx +++ b/src/app/(application)/position/page.tsx @@ -1,10 +1,9 @@ +import { ViewListPosition } from '@/module/position'; import React from 'react'; function Page() { return ( -
- Page -
+ ); } diff --git a/src/module/_global/layout/layout_drawer.tsx b/src/module/_global/layout/layout_drawer.tsx index 62a997d..df7b558 100644 --- a/src/module/_global/layout/layout_drawer.tsx +++ b/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 ( - {title}} onClose={onClose} position={"bottom"} size={"35%"} + {title}} onClose={onClose} position={"bottom"} size={(size == 'lg') ? '80%' : '30%'} styles={{ content: { backgroundColor: "white", diff --git a/src/module/group/components/ui/navbar_group.tsx b/src/module/group/components/ui/navbar_group.tsx index 2a4b379..f58675d 100644 --- a/src/module/group/components/ui/navbar_group.tsx +++ b/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 ( <> diff --git a/src/module/position/component/tab_list_position.tsx b/src/module/position/component/tab_list_position.tsx new file mode 100644 index 0000000..abfd4d9 --- /dev/null +++ b/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 ( + + + + }> + Aktif + + }> + Tidak Aktif + + + + + + + + + + + + + ); +} + diff --git a/src/module/position/component/ui/drawer_detail_position.tsx b/src/module/position/component/ui/drawer_detail_position.tsx new file mode 100644 index 0000000..f7e031c --- /dev/null +++ b/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 ( + + + + + + + + + Status + + + + setOpenDrawerGroup(true)} + > + + + + + Edit + + + + + + setOpenDrawerGroup(false)} title={'Edit Jabatan'} size="lg"> + + + + + + + + + + ); +} \ No newline at end of file diff --git a/src/module/position/component/ui/list_position_active.tsx b/src/module/position/component/ui/list_position_active.tsx new file mode 100644 index 0000000..e6eb15f --- /dev/null +++ b/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 ( + + } + placeholder="Pencarian" + /> + {dataGroup.map((v, i) => { + return ( + + setOpenDrawer(true)} > + + + + + + + {v.name} + + + + ) + })} + setOpenDrawer(false)} title="LEMBAGA PENGKREDITAN DESA"> + + + + ); +} diff --git a/src/module/position/component/ui/list_position_nonactive.tsx b/src/module/position/component/ui/list_position_nonactive.tsx new file mode 100644 index 0000000..3f73178 --- /dev/null +++ b/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 ( + + } + placeholder="Pencarian" + /> + {dataGroup.map((v, i) => { + return ( + + setOpenDrawer(true)}> + + + + + + + {v.name} + + + + ) + })} + setOpenDrawer(false)} title="LEMBAGA PENGKREDITAN DESA"> + + + + ); +} diff --git a/src/module/position/component/ui/navbar_list_position.tsx b/src/module/position/component/ui/navbar_list_position.tsx new file mode 100644 index 0000000..b77285a --- /dev/null +++ b/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 ( + + + + + + + + Jabatan + + + + openDrawerMenu.set(true)} variant="light" bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings"> + + + + + + + openDrawerMenu.set(false)}> + + + + ); +} \ No newline at end of file diff --git a/src/module/position/index.ts b/src/module/position/index.ts index e69de29..f77009c 100644 --- a/src/module/position/index.ts +++ b/src/module/position/index.ts @@ -0,0 +1,3 @@ +import ViewListPosition from "./view/view_list_position"; + +export { ViewListPosition } \ No newline at end of file diff --git a/src/module/position/view/view_list_position.tsx b/src/module/position/view/view_list_position.tsx new file mode 100644 index 0000000..a74180d --- /dev/null +++ b/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 ( + + + + + ); +} \ No newline at end of file