wibu/sistem-desa-mandiri
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update : jabatan

Browse Source 
Deskripsi:
- tambah jabatan
- list jabatan
- edit jabatan

No Issues
This commit is contained in:
amel
2024-07-08 12:26:50 +08:00
parent e2d9763a1d
commit e0b88b2573
11 changed files with 433 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/app/(application)/position/page.tsx
View File

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

4
src/module/_global/layout/layout_drawer.tsx
View File

@@ -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",

2
src/module/group/components/ui/navbar_group.tsx
View File

@@ -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>

38
src/module/position/component/tab_list_position.tsx Normal file
View File

@@ -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>
);
}

92
src/module/position/component/ui/drawer_detail_position.tsx Normal file
View File

@@ -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>
)
}

80
src/module/position/component/ui/drawer_list_position.tsx Normal file
View File

@@ -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>
);
}

85
src/module/position/component/ui/list_position_active.tsx Normal file
View File

@@ -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>
);
}

85
src/module/position/component/ui/list_position_nonactive.tsx Normal file
View File

@@ -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>
);
}

34
src/module/position/component/ui/navbar_list_position.tsx Normal file
View File

@@ -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>
);
}

3
src/module/position/index.ts
View File

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

12
src/module/position/view/view_list_position.tsx Normal file
View File

@@ -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>
);
}