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

tambah division api index

Browse Source
This commit is contained in:
bipproduction
2024-07-08 12:31:47 +08:00
parent 3fe18b77a9 55402990ec
commit 76ae478eab
73 changed files with 2379 additions and 602 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
.gitignore vendored
View File

@@ -28,6 +28,9 @@ yarn-error.log*
# local env files # local env files
.env*.local .env*.local
# env
.env
# vercel # vercel
.vercel .vercel

5
package.json
View File

@@ -38,11 +38,14 @@
"embla-carousel-react": "^7.1.0", "embla-carousel-react": "^7.1.0",
"lodash": "^4.17.21", "lodash": "^4.17.21",
"next": "14.2.4", "next": "14.2.4",
"prettier": "^3.3.2",
"react": "^18", "react": "^18",
"react-dom": "^18", "react-dom": "^18",
"react-icons": "^5.2.1", "react-icons": "^5.2.1",
"react-simple-toasts": "^5.10.0", "react-simple-toasts": "^5.10.0",
"recharts": "2" "readdirp": "^3.6.0",
"recharts": "2",
"yargs": "^17.7.2"
}, },
"devDependencies": { "devDependencies": {
"@types/node": "^20.14.9", "@types/node": "^20.14.9",

9
src/app/(application)/announcement/[id]/page.tsx Normal file
View File

@@ -0,0 +1,9 @@
import { ViewDetailAnnouncement } from "@/module/announcement";
function Page({ params }: { params: { id: string } }) {
return (
<ViewDetailAnnouncement data={params.id} />
)
}
export default Page;

9
src/app/(application)/announcement/create/page.tsx Normal file
View File

@@ -0,0 +1,9 @@
import { ViewCreateAnnouncement } from "@/module/announcement";
function Page() {
return (
<ViewCreateAnnouncement />
)
}
export default Page;

9
src/app/(application)/announcement/edit/[id]/page.tsx Normal file
View File

@@ -0,0 +1,9 @@
import { ViewEditAnnouncement } from "@/module/announcement";
function Page({ params }: { params: { id: any } }) {
return (
<ViewEditAnnouncement data={params.id} />
)
}
export default Page;

9
src/app/(application)/announcement/page.tsx Normal file
View File

@@ -0,0 +1,9 @@
import { ViewListAnnouncement } from "@/module/announcement";
function Page() {
return (
<ViewListAnnouncement/>
)
}
export default Page;

10
src/app/(application)/group/page.tsx Normal file
View File

@@ -0,0 +1,10 @@
import { ViewGroup } from '@/module/group';
import React from 'react';
function Page() {
return (
<ViewGroup />
);
}
export default Page;

10
src/app/(application)/member/[id]/page.tsx Normal file
View File

@@ -0,0 +1,10 @@
import { ViewDetailMember } from "@/module/user/member";
function Page({ params }: { params: { id: string } }) {
return (
<ViewDetailMember data={params.id} />
)
}
export default Page;

9
src/app/(application)/member/create/page.tsx Normal file
View File

@@ -0,0 +1,9 @@
import { ViewCreateMember } from "@/module/user/member";
function Page() {
return (
<ViewCreateMember />
);
}
export default Page;

9
src/app/(application)/member/page.tsx Normal file
View File

@@ -0,0 +1,9 @@
import { ViewListMember } from "@/module/user/member";
function Page() {
return (
<ViewListMember />
)
}
export default Page;

10
src/app/(application)/notification/page.tsx Normal file
View File

@@ -0,0 +1,10 @@
import { ViewNotification } from '@/module/notification';
import React from 'react';
function Page() {
return (
<ViewNotification />
);
}
export default Page;

11
src/app/(application)/position/page.tsx Normal file
View File

@@ -0,0 +1,11 @@
import React from 'react';
function Page() {
return (
<div>
Page
</div>
);
}
export default Page;

9
src/app/(application)/profile/edit/page.tsx Normal file
View File

@@ -0,0 +1,9 @@
import { ViewEditProfile } from "@/module/user"
function Page() {
return (
<ViewEditProfile />
)
}
export default Page

10
src/app/(application)/project/page.tsx Normal file
View File

@@ -0,0 +1,10 @@
import { ViewProject } from '@/module/project';
import React from 'react';
function Page() {
return (
<ViewProject />
);
}
export default Page;

6
src/app/layout.tsx
View File

@@ -32,8 +32,10 @@ export default function RootLayout({
</head> </head>
<body className={`${LatoFont.className}`} suppressHydrationWarning> <body className={`${LatoFont.className}`} suppressHydrationWarning>
<MantineProvider> <MantineProvider>
<Box bg={'#252A2F'}> <Box bg={'#252A2F'} pos={"fixed"} w={"100%"} h={"100%"} style={{
<Container h={"100vh"} p={0} size={rem(550)} bg={WARNA.bgWhite}> overflowY: "auto"
}}>
<Container mih={'100vh'} p={0} size={rem(550)} bg={WARNA.bgWhite}>
{children} {children}
</Container> </Container>
</Box> </Box>

5
src/app/loading.tsx Normal file
View File

@@ -0,0 +1,5 @@
import { LoadingPage } from "@/module/_global";
export default function Loading() {
return <LoadingPage />
}

3
src/module/_global/fun/WARNA.ts
View File

@@ -1,5 +1,6 @@
export const WARNA = { export const WARNA = {
bgWhite: "#F4F9FD", bgWhite: "#F4F9FD",
biruTua: "#19345E", biruTua: "#19345E",
bgIcon: "#384288" bgIcon: "#384288",
borderOrange: "#FCAA4B"
} }

10
src/module/_global/index.ts
View File

@@ -1,7 +1,15 @@
import { WARNA } from "./fun/WARNA"; import { WARNA } from "./fun/WARNA";
import LayoutDrawer from "./layout/layout_drawer";
import LayoutIconBack from "./layout/layout_icon_back";
import LoadingPage from "./layout/layout_loading_page";
import LayoutLogin from "./layout/layout_login"; import LayoutLogin from "./layout/layout_login";
import LayoutNavbarHome from "./layout/layout_navbar_home"; import LayoutNavbarHome from "./layout/layout_navbar_home";
import { isDrawer } from "./val/isDrawer";
export { WARNA } export { WARNA }
export { LayoutLogin } export { LayoutLogin }
export {LayoutNavbarHome} export { LayoutNavbarHome }
export { LayoutIconBack }
export { LoadingPage }
export { LayoutDrawer }
export { isDrawer }

20
src/module/_global/layout/layout_drawer.tsx Normal file
View File

@@ -0,0 +1,20 @@
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 }) {
return (
<Box>
<Drawer opened={opened} title={<Text c={WARNA.biruTua} fw={'bold'}>{title}</Text>} onClose={onClose} position={"bottom"} size={"35%"}
styles={{
content: {
backgroundColor: "white",
borderRadius: "20px 20px 0px 0px",
},
}}
>
{children}
</Drawer>
</Box>
);
}

27
src/module/_global/layout/layout_icon_back.tsx Normal file
View File

@@ -0,0 +1,27 @@
'use client'
import { ActionIcon, Box } from '@mantine/core';
import { useRouter } from 'next/navigation';
import React from 'react';
import { HiChevronLeft } from 'react-icons/hi2';
import { WARNA } from '../fun/WARNA';
import _ from 'lodash';
function LayoutIconBack({ back }: { back?: string }) {
const router = useRouter()
return (
<Box>
<ActionIcon variant="light" onClick={() => {
if (!_.isUndefined(back) && !_.isNull(back)) {
return router.push(back)
} else {
return router.back()
}
}} bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
<HiChevronLeft size={20} color='white' />
</ActionIcon>
</Box>
);
}
export default LayoutIconBack;

33
src/module/_global/layout/layout_loading_page.tsx Normal file
View File

@@ -0,0 +1,33 @@
import { Box, Group, Skeleton, Text } from "@mantine/core";
import LayoutNavbarHome from "./layout_navbar_home";
export default function LoadingPage() {
return (
<>
<LayoutNavbarHome>
<Text></Text>
</LayoutNavbarHome>
<Box p={20}>
<Skeleton width={"100%"} height={180} radius={"md"} />
<Group my={20} justify="space-between" grow>
<Skeleton height={50} radius={"md"} />
<Skeleton height={50} radius={"md"} />
<Skeleton height={50} radius={"md"} />
</Group>
<Group my={20} justify="space-between" grow>
<Skeleton height={100} radius={"md"} />
<Skeleton height={100} radius={"md"} />
</Group>
<Group my={20} justify="space-between" grow>
<Skeleton height={100} radius={"md"} />
<Skeleton height={100} radius={"md"} />
</Group>
<Group my={20} justify="space-between" grow>
<Skeleton height={100} radius={"md"} />
<Skeleton height={100} radius={"md"} />
</Group>
</Box>
</>
)
}

5
src/module/_global/layout/layout_navbar_home.tsx
View File

@@ -4,16 +4,15 @@ import { WARNA } from '../fun/WARNA';
export const LayoutNavbarHome = ({ children }: { children: React.ReactNode }) => { export const LayoutNavbarHome = ({ children }: { children: React.ReactNode }) => {
return ( return (
<> <Box pt={25} pl={20} pr={20} m={0} pos={'sticky'} top={0} pb={25} bg={WARNA.biruTua}
<Box pt={25} pl={20} pr={20} m={0} pb={25} bg={WARNA.biruTua}
style={{ style={{
borderBottomLeftRadius: 20, borderBottomLeftRadius: 20,
borderBottomRightRadius: 20, borderBottomRightRadius: 20,
zIndex: 100
}} }}
> >
{children} {children}
</Box> </Box>
</>
); );
} }
export default LayoutNavbarHome export default LayoutNavbarHome

4
src/module/_global/val/isDrawer.ts Normal file
View File

@@ -0,0 +1,4 @@
'use client'
import { hookstate } from '@hookstate/core';
export const isDrawer = hookstate(false)

37
src/module/announcement/component/detail_announcement.tsx Normal file
View File

@@ -0,0 +1,37 @@
import { Box, Group, Stack, Text } from "@mantine/core";
import { BsCardText } from "react-icons/bs";
import { TfiAnnouncement } from "react-icons/tfi";
export default function DetailAnnouncement() {
return (
<Box py={30} px={20}>
<Box p={20} style={{ borderRadius: 10, border: '1px solid #E5E5E5' }} bg={'white'} >
<Stack>
<Group>
<TfiAnnouncement size={25} />
<Text fw={'bold'}>Pengumuman Dinas</Text>
</Group>
<Group>
<BsCardText size={25} />
<Text>Pengumuman agar menggunakan</Text>
</Group>
</Stack>
</Box>
<Box my={15} p={20} style={{ borderRadius: 10, border: '1px solid #E5E5E5' }} bg={'white'} >
<Stack>
<Text fw={'bold'}>Anggota</Text>
<Group>
<Text>LPD</Text>
</Group>
<Group>
<Text>PKK</Text>
</Group>
<Group>
<Text>Karang Taruna</Text>
</Group>
</Stack>
</Box>
</Box>
)
}

92
src/module/announcement/component/list_announcement.tsx Normal file
View File

@@ -0,0 +1,92 @@
'use client'
import { isDrawer, LayoutDrawer, WARNA } from '@/module/_global';
import { ActionIcon, Anchor, Box, Group, Text, TextInput } from '@mantine/core';
import React from 'react';
import { TfiAnnouncement } from "react-icons/tfi";
import { HiMagnifyingGlass } from 'react-icons/hi2';
import { useRouter } from 'next/navigation';
const dataPengumuman = [
{
id: 1,
name: 'Lembaga Pengkreditan Desa',
desc: 'Diharapkan semua untuk melakukan upacara ben...'
},
{
id: 2,
name: 'Lembaga Pengkreditan Desa',
desc: 'Diharapkan semua untuk melakukan upacara ben...'
},
{
id: 3,
name: 'Lembaga Pengkreditan Desa',
desc: 'Diharapkan semua untuk melakukan upacara ben...'
},
{
id: 4,
name: 'Lembaga Pengkreditan Desa',
desc: 'Diharapkan semua untuk melakukan upacara ben...'
},
{
id: 5,
name: 'Lembaga Pengkreditan Desa',
desc: 'Diharapkan semua untuk melakukan upacara ben...'
},
{
id: 6,
name: 'Lembaga Pengkreditan Desa',
desc: 'Diharapkan semua untuk melakukan upacara ben...'
},
{
id: 7,
name: 'Lembaga Pengkreditan Desa',
desc: 'Diharapkan semua untuk melakukan upacara ben...'
},
{
id: 8,
name: 'Lembaga Pengkreditan Desa',
desc: 'Diharapkan semua untuk melakukan upacara ben...'
},
]
export default function ListAnnouncement() {
const router = useRouter()
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"
/>
{dataPengumuman.map((v, i) => {
return (
<Box pt={20} key={i} onClick={() => {
router.push(`/announcement/${v.id}`)
}}>
<Group align='center' style={{
borderBottom: `1px solid #D9D9D9`,
padding: 10,
}} >
<Box>
<ActionIcon variant="light" bg={'#FCAA4B'} size={50} radius={100} aria-label="icon">
<TfiAnnouncement color={WARNA.biruTua} size={25} />
</ActionIcon>
</Box>
<Box>
<Text fw={'bold'} c={WARNA.biruTua}>{v.name}</Text>
</Box>
</Group>
</Box>
)
})}
</Box>
);
}

48
src/module/announcement/component/ui/drawer_announcement.tsx Normal file
View File

@@ -0,0 +1,48 @@
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 { useRouter } from 'next/navigation';
import React, { useState } from 'react';
import { IoAddCircle } from "react-icons/io5";
import { RiFilter2Line } from "react-icons/ri";
export default function DrawerAnnouncement() {
const openDrawer = useHookstate(isDrawer)
const router = useRouter()
function onCLose() {
openDrawer.set(false)
}
return (
<Box>
<Stack pt={10}>
<SimpleGrid
cols={{ base: 3, sm: 3, lg: 3 }}
>
<Flex justify={'center'} align={'center'} direction={'column'}
onClick={() => {
router.push('/announcement/create')
onCLose()
}}
>
<Box>
<IoAddCircle size={30} color={WARNA.biruTua} />
</Box>
<Box>
<Text c={WARNA.biruTua} ta='center'>Tambah Pengumuman</Text>
</Box>
</Flex>
<Flex justify={'center'} align={'center'} direction={'column'} >
<Box>
<RiFilter2Line size={30} color={WARNA.biruTua} />
</Box>
<Box>
<Text c={WARNA.biruTua} ta='center'>Filter</Text>
</Box>
</Flex>
</SimpleGrid>
</Stack>
</Box>
);
}

45
src/module/announcement/component/ui/drawer_detail_announcement.tsx Normal file
View File

@@ -0,0 +1,45 @@
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 { useRouter } from 'next/navigation';
import React, { useState } from 'react';
import { FaPencil, FaTrash } from 'react-icons/fa6';
export default function DrawerDetailAnnouncement() {
const openDrawer = useHookstate(isDrawer)
const router = useRouter()
function onCLose() {
openDrawer.set(false)
}
return (
<Box>
<Stack pt={10}>
<SimpleGrid
cols={{ base: 3, sm: 3, lg: 3 }}
>
<Flex justify={'center'} align={'center'} direction={'column'}>
<Box>
<FaTrash size={30} color={WARNA.biruTua} />
</Box>
<Box>
<Text c={WARNA.biruTua} ta='center'>Hapus</Text>
</Box>
</Flex>
<Flex justify={'center'} align={'center'} direction={'column'} onClick={() => {
router.push('edit/123')
onCLose()
}}>
<Box>
<FaPencil size={30} color={WARNA.biruTua} />
</Box>
<Box>
<Text c={WARNA.biruTua} ta='center'>Edit</Text>
</Box>
</Flex>
</SimpleGrid>
</Stack>
</Box>
);
}

37
src/module/announcement/component/ui/navbar_announcement.tsx Normal file
View File

@@ -0,0 +1,37 @@
"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 { useHookstate } from '@hookstate/core';
import DrawerAnnouncement from './drawer_announcement';
export default function NavbarAnnouncement() {
const openDrawer = useHookstate(isDrawer)
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'}>PENGUMUMAN</Text>
</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">
<HiMenu size={20} color='white' />
</ActionIcon>
</Group>
</Grid.Col>
</Grid>
</LayoutNavbarHome>
<LayoutDrawer opened={openDrawer.get()} title={'MENU'} onClose={() => openDrawer.set(false)}>
<DrawerAnnouncement />
</LayoutDrawer>
</>
);
}

21
src/module/announcement/component/ui/navbar_create_announcement.tsx Normal file
View File

@@ -0,0 +1,21 @@
'use client'
import { LayoutIconBack, LayoutNavbarHome } from "@/module/_global";
import { Box, Grid, Text } from "@mantine/core";
export default function NavbarCreateAnnouncement() {
return (
<Box>
<LayoutNavbarHome>
<Grid justify='center' align='center'>
<Grid.Col span="auto">
<LayoutIconBack />
</Grid.Col>
<Grid.Col span={6}>
<Text ta={'center'} fw={'bold'} c={'white'}>Tambah Pengumuman</Text>
</Grid.Col>
<Grid.Col span="auto"></Grid.Col>
</Grid>
</LayoutNavbarHome>
</Box>
)
}

34
src/module/announcement/component/ui/navbar_detail_announcement.tsx Normal file
View File

@@ -0,0 +1,34 @@
'use client'
import { isDrawer, LayoutDrawer, LayoutIconBack, LayoutNavbarHome, WARNA } from "@/module/_global";
import { useHookstate } from "@hookstate/core";
import { ActionIcon, Box, Grid, Group, Text } from "@mantine/core";
import { HiMenu } from "react-icons/hi";
import DrawerDetailAnnouncement from "./drawer_detail_announcement";
export default function NavbarDetailAnnouncement() {
const openDrawer = useHookstate(isDrawer)
return (
<Box>
<LayoutNavbarHome>
<Grid justify='center' align='center'>
<Grid.Col span="auto">
<LayoutIconBack />
</Grid.Col>
<Grid.Col span={6}>
<Text ta={'center'} fw={'bold'} c={'white'}>PENGUMUMAN</Text>
</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">
<HiMenu size={20} color='white' />
</ActionIcon>
</Group>
</Grid.Col>
</Grid>
</LayoutNavbarHome>
<LayoutDrawer opened={openDrawer.get()} title={'MENU'} onClose={() => openDrawer.set(false)}>
<DrawerDetailAnnouncement />
</LayoutDrawer>
</Box>
)
}

21
src/module/announcement/component/ui/navbar_edit_announcement.tsx Normal file
View File

@@ -0,0 +1,21 @@
'use client'
import { LayoutIconBack, LayoutNavbarHome } from "@/module/_global";
import { Box, Grid, Text } from "@mantine/core";
export default function NavbarEditAnnouncement() {
return (
<Box>
<LayoutNavbarHome>
<Grid justify='center' align='center'>
<Grid.Col span="auto">
<LayoutIconBack />
</Grid.Col>
<Grid.Col span={6}>
<Text ta={'center'} fw={'bold'} c={'white'}>Edit Pengumuman</Text>
</Grid.Col>
<Grid.Col span="auto"></Grid.Col>
</Grid>
</LayoutNavbarHome>
</Box>
)
}

9
src/module/announcement/index.ts
View File

@@ -0,0 +1,9 @@
import ViewCreateAnnouncement from "./view/view_create_announcement";
import ViewDetailAnnouncement from "./view/view_detail_anouncement";
import ViewEditAnnouncement from "./view/view_edit_announcement";
import ViewListAnnouncement from "./view/view_list_announcement";
export { ViewListAnnouncement }
export { ViewCreateAnnouncement }
export { ViewDetailAnnouncement }
export { ViewEditAnnouncement }

60
src/module/announcement/view/view_create_announcement.tsx Normal file
View File

@@ -0,0 +1,60 @@
import { WARNA } from "@/module/_global";
import { Box, Stack, TextInput, Button, Textarea } from "@mantine/core";
import { HiOutlineChevronRight, HiUser } from "react-icons/hi2";
import NavbarCreateAnnouncement from "../component/ui/navbar_create_announcement";
export default function ViewCreateAnnouncement() {
return (
<Box>
<NavbarCreateAnnouncement />
<Stack
align="center"
justify="center"
gap="xs"
pt={30}
px={20}
>
<TextInput
size="md" type="text" radius={30} placeholder="Judul Pengumuman" withAsterisk label="Judul" w={"100%"}
styles={{
input: {
color: WARNA.biruTua,
borderRadius: WARNA.biruTua,
borderColor: WARNA.biruTua,
},
}}
/>
<Textarea
size="md"
radius={20}
w={"100%"}
label="Pengumuman"
withAsterisk
placeholder="Deskripsi Pengumuman"
styles={{
input: {
color: WARNA.biruTua,
borderRadius: WARNA.biruTua,
borderColor: WARNA.biruTua,
},
}}
/>
<Button rightSection={<HiOutlineChevronRight size={14} />} variant="default" fullWidth radius={30} size="md" mt={10}>
Pilih Anggota
</Button>
</Stack>
<Box mt={30} mx={20}>
<Button
c={"white"}
bg={WARNA.biruTua}
size="md"
radius={30}
fullWidth
>
Simpan
</Button>
</Box>
</Box>
)
}

12
src/module/announcement/view/view_detail_anouncement.tsx Normal file
View File

@@ -0,0 +1,12 @@
import { Box } from "@mantine/core";
import DetailAnnouncement from "../component/detail_announcement";
import NavbarDetailAnnouncement from "../component/ui/navbar_detail_announcement";
export default function ViewDetailAnnouncement({ data }: { data: string }) {
return (
<Box>
<NavbarDetailAnnouncement />
<DetailAnnouncement />
</Box>
)
}

60
src/module/announcement/view/view_edit_announcement.tsx Normal file
View File

@@ -0,0 +1,60 @@
import { Box, Button, Stack, Textarea, TextInput } from "@mantine/core";
import NavbarEditAnnouncement from "../component/ui/navbar_edit_announcement";
import { WARNA } from "@/module/_global";
import { HiOutlineChevronRight } from "react-icons/hi2";
export default function ViewEditAnnouncement({ data }: { data: string }) {
return (
<Box>
<NavbarEditAnnouncement />
<Stack
align="center"
justify="center"
gap="xs"
pt={30}
px={20}
>
<TextInput
size="md" type="text" radius={30} placeholder="Judul Pengumuman" withAsterisk label="Judul" w={"100%"}
styles={{
input: {
color: WARNA.biruTua,
borderRadius: WARNA.biruTua,
borderColor: WARNA.biruTua,
},
}}
/>
<Textarea
size="md"
radius={20}
w={"100%"}
label="Pengumuman"
withAsterisk
placeholder="Deskripsi Pengumuman"
styles={{
input: {
color: WARNA.biruTua,
borderRadius: WARNA.biruTua,
borderColor: WARNA.biruTua,
},
}}
/>
<Button rightSection={<HiOutlineChevronRight size={14} />} variant="default" fullWidth radius={30} size="md" mt={10}>
Pilih Anggota
</Button>
</Stack>
<Box mt={30} mx={20}>
<Button
c={"white"}
bg={WARNA.biruTua}
size="md"
radius={30}
fullWidth
>
Simpan
</Button>
</Box>
</Box>
)
}

12
src/module/announcement/view/view_list_announcement.tsx Normal file
View File

@@ -0,0 +1,12 @@
import { Box } from "@mantine/core";
import NavbarAnnouncement from "../component/ui/navbar_announcement";
import ListAnnouncement from "../component/list_announcement";
export default function ViewListAnnouncement() {
return (
<Box>
<NavbarAnnouncement />
<ListAnnouncement />
</Box>
)
}

23
src/module/division/api/api_division.ts
View File

@@ -1,16 +1,13 @@
type Method = "GET" | "POST" import { API_INDEX } from "./api_index";
type Method = "GET" | "POST";
const listApi = [
{
"page": ""
}
]
export async function apiDivision(req: Request, method: Method) { export async function apiDivision(req: Request, method: Method) {
const { searchParams } = new URL(req.url) const { searchParams } = new URL(req.url);
const page = searchParams.get("page") const path = searchParams.get("path");
const act = API_INDEX.find((v) => v.path === path && v.method === method);
if (!path)
return Response.json({ message: "page not found" }, { status: 404 });
if (act) return act.bin(req);
if (!page) return Response.json({ message: "page not found" }, { status: 404 }) return Response.json({ message: "404" });
}
return Response.json({ message: "ok" })
}

14
src/module/division/api/api_index.ts Normal file
View File

@@ -0,0 +1,14 @@
import { createProject } from "./post/createProject";
import { listProject } from "./get/listProject";
export const API_INDEX = [
{
path: "create-project",
method: "POST",
bin: createProject,
},
{
path: "list-project",
method: "GET",
bin: listProject,
},
];

3
src/module/division/api/get/listProject.ts Normal file
View File

@@ -0,0 +1,3 @@
export function listProject(req: Request) {
return Response.json({ message: "ini adalah project" })
}

3
src/module/division/api/post/createProject.ts Normal file
View File

@@ -0,0 +1,3 @@
export async function createProject(req: Request) {
return Response.json({ message: "success create projects" })
}

84
src/module/group/components/list_group.tsx Normal file
View File

@@ -0,0 +1,84 @@
import { isDrawer, LayoutDrawer, 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';
import EditDrawerGroup from './ui/edit_drawer_group';
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>
)
})}
{/* <LayoutDrawer opened={openDrawer} onClose={() => setOpenDrawer(false)} title="LEMBAGA PENGKREDITAN DESA">
<EditDrawerGroup />
</LayoutDrawer> */}
</Box>
);
}

62
src/module/group/components/ui/drawer_group.tsx Normal file
View File

@@ -0,0 +1,62 @@
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";
export default function DrawerGroup() {
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 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>
);
}

71
src/module/group/components/ui/edit_drawer_group.tsx Normal file
View File

@@ -0,0 +1,71 @@
'use client'
import { isDrawer, LayoutDrawer, WARNA } from '@/module/_global';
import { Box, Button, Center, Flex, Group, SimpleGrid, Stack, Text, TextInput } from '@mantine/core';
import React, { useState } from 'react';
import { IoAddCircle } from "react-icons/io5";
export default function EditDrawerGroup() {
// 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}>Tidak Aktif</Text>
</Box>
</Flex>
<Flex justify={'center'} align={'center'} direction={'column'} >
<Box>
<IoAddCircle size={30} color={WARNA.biruTua} />
</Box>
<Box>
<Text c={WARNA.biruTua}>Edit</Text>
</Box>
</Flex>
</SimpleGrid>
</Stack>
<LayoutDrawer opened={openDrawerGroup} onClose={() => setOpenDrawerGroup(false)} title={'EDIT GRUP'}>
<Box pt={10}>
<TextInput
styles={{
input: {
color: WARNA.biruTua,
borderRadius: WARNA.biruTua,
borderColor: WARNA.biruTua,
},
}}
size="lg"
radius={10}
placeholder="Edit Grup"
/>
<Box mt={'xl'}>
<Button
c={"white"}
bg={WARNA.biruTua}
size="lg"
radius={30}
fullWidth
onClick={onCLose}
>
EDIT
</Button>
</Box>
</Box>
</LayoutDrawer> */}
</Box>
);
}

38
src/module/group/components/ui/navbar_group.tsx Normal file
View File

@@ -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 { useRouter } from 'next/navigation';
import React from 'react';
import { HiMenu } from "react-icons/hi";
import DrawerGroup from './drawer_group';
import { useHookstate } from '@hookstate/core';
export default function NavbarGroup() {
const openDrawer = useHookstate(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={() => openDrawer.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)}>
<DrawerGroup />
</LayoutDrawer>
</>
);
}

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

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

14
src/module/group/view/view_group.tsx Normal file
View File

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

4
src/module/home/components/features.tsx
View File

@@ -28,7 +28,7 @@ export default function Features() {
<Text fz={15} c={WARNA.biruTua}>Divisi</Text> <Text fz={15} c={WARNA.biruTua}>Divisi</Text>
</Center> </Center>
</Box> </Box>
<Box> <Box onClick={() => router.push('/project')}>
<Center> <Center>
<ActionIcon variant="gradient" <ActionIcon variant="gradient"
size={68} size={68}
@@ -42,7 +42,7 @@ export default function Features() {
<Text fz={15} c={WARNA.biruTua}>Proyek</Text> <Text fz={15} c={WARNA.biruTua}>Proyek</Text>
</Center> </Center>
</Box> </Box>
<Box> <Box onClick={() => router.push('/announcement')}>
<Center> <Center>
<ActionIcon variant="gradient" <ActionIcon variant="gradient"
size={68} size={68}

26
src/module/home/components/ui/icon_navbar.tsx Normal file
View File

@@ -0,0 +1,26 @@
"use client"
import { WARNA } from '@/module/_global';
import { ActionIcon, Box, Group } from '@mantine/core';
import { useRouter } from 'next/navigation';
import React from 'react';
import { HiMagnifyingGlass, HiOutlineBell, HiOutlineUser } from 'react-icons/hi2';
export default function IconNavbar() {
const router = useRouter()
return (
<Box>
<Group>
<ActionIcon onClick={()=> router.push('/search')} variant="light" bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
<HiMagnifyingGlass size={20} color='white' />
</ActionIcon>
<ActionIcon onClick={()=> router.push('/notification')} variant="light" bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
<HiOutlineBell size={20} color='white' />
</ActionIcon>
<ActionIcon onClick={()=> router.push('/profile')} variant="light" bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
<HiOutlineUser size={20} color='white' />
</ActionIcon>
</Group>
</Box>
);
}

17
src/module/home/view/view_detail_feature.tsx
View File

@@ -6,6 +6,7 @@ import { HiMiniUserGroup, HiMiniPresentationChartBar, HiMegaphone, HiSquares2X2,
import { PiUsersFourFill } from "react-icons/pi"; import { PiUsersFourFill } from "react-icons/pi";
import { FaUsersRays, FaUserTie } from "react-icons/fa6"; import { FaUsersRays, FaUserTie } from "react-icons/fa6";
import { useRouter } from 'next/navigation'; import { useRouter } from 'next/navigation';
import LayoutIconBack from '@/module/_global/layout/layout_icon_back';
export default function ViewDetailFeature() { export default function ViewDetailFeature() {
const router = useRouter() const router = useRouter()
@@ -13,10 +14,8 @@ export default function ViewDetailFeature() {
<> <>
<LayoutNavbarHome> <LayoutNavbarHome>
<Grid justify='center' align='center'> <Grid justify='center' align='center'>
<Grid.Col span="auto"> <Grid.Col span="auto">
<ActionIcon variant="light" onClick={() => router.push('/home')} bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings"> <LayoutIconBack back='/home' />
<HiChevronLeft size={20} color='white' />
</ActionIcon>
</Grid.Col> </Grid.Col>
<Grid.Col span={6}> <Grid.Col span={6}>
<Text ta={'center'} fw={'bold'} c={'white'} >SEMUA FITUR</Text> <Text ta={'center'} fw={'bold'} c={'white'} >SEMUA FITUR</Text>
@@ -43,7 +42,7 @@ export default function ViewDetailFeature() {
<Text fz={15} c={WARNA.biruTua}>Divisi</Text> <Text fz={15} c={WARNA.biruTua}>Divisi</Text>
</Center> </Center>
</Box> </Box>
<Box> <Box onClick={() => router.push('/project')}>
<Center> <Center>
<ActionIcon variant="gradient" <ActionIcon variant="gradient"
size={68} size={68}
@@ -57,7 +56,7 @@ export default function ViewDetailFeature() {
<Text fz={15} c={WARNA.biruTua}>Proyek</Text> <Text fz={15} c={WARNA.biruTua}>Proyek</Text>
</Center> </Center>
</Box> </Box>
<Box> <Box onClick={() => router.push('/announcement')}>
<Center> <Center>
<ActionIcon variant="gradient" <ActionIcon variant="gradient"
size={68} size={68}
@@ -71,7 +70,7 @@ export default function ViewDetailFeature() {
<Text fz={15} c={WARNA.biruTua}>Pengumuman</Text> <Text fz={15} c={WARNA.biruTua}>Pengumuman</Text>
</Center> </Center>
</Box> </Box>
<Box> <Box onClick={() => router.push('/member')}>
<Center> <Center>
<ActionIcon variant="gradient" <ActionIcon variant="gradient"
size={68} size={68}
@@ -85,7 +84,7 @@ export default function ViewDetailFeature() {
<Text fz={15} c={WARNA.biruTua}>Anggota</Text> <Text fz={15} c={WARNA.biruTua}>Anggota</Text>
</Center> </Center>
</Box> </Box>
<Box> <Box onClick={() => router.push('/group')}>
<Center> <Center>
<ActionIcon variant="gradient" <ActionIcon variant="gradient"
size={68} size={68}
@@ -99,7 +98,7 @@ export default function ViewDetailFeature() {
<Text fz={15} c={WARNA.biruTua}>Group</Text> <Text fz={15} c={WARNA.biruTua}>Group</Text>
</Center> </Center>
</Box> </Box>
<Box> <Box onClick={() => router.push('/position')}>
<Center> <Center>
<ActionIcon variant="gradient" <ActionIcon variant="gradient"
size={68} size={68}

18
src/module/home/view/view_home.tsx
View File

@@ -1,30 +1,20 @@
import { LayoutNavbarHome, WARNA } from '@/module/_global'; import { LayoutNavbarHome, WARNA } from '@/module/_global';
import { ActionIcon, Box, Group, rem, Stack, Text } from '@mantine/core'; import { ActionIcon, Anchor, Box, Group, rem, Stack, Text } from '@mantine/core';
import React from 'react'; import React from 'react';
import { HiMagnifyingGlass, HiOutlineBell, HiOutlineUser } from "react-icons/hi2"; import { HiMagnifyingGlass, HiOutlineBell, HiOutlineUser } from "react-icons/hi2";
import Carosole from '../components/carosole'; import Carosole from '../components/carosole';
import Features from '../components/features'; import Features from '../components/features';
// import { useRouter } from 'next/navigation'; import IconNavbar from '../components/ui/icon_navbar';
export default function ViewHome() { export default function ViewHome() {
// const router = useRouter()
return ( return (
<> <>
<LayoutNavbarHome> <LayoutNavbarHome>
<Group justify='space-between'> <Group justify='space-between'>
<Text fw={'bold'} c={'white'} >Perbekal Darmasaba</Text> <Text fw={'bold'} c={'white'} >Perbekal Darmasaba</Text>
<Group> <IconNavbar/>
{/* <ActionIcon onClick={() => router.push('/search')} variant="light" bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
<HiMagnifyingGlass size={20} color='white' />
</ActionIcon> */}
<ActionIcon variant="light" bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
<HiOutlineBell size={20} color='white' />
</ActionIcon>
<ActionIcon variant="light" bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
<HiOutlineUser size={20} color='white' />
</ActionIcon>
</Group>
</Group> </Group>
</LayoutNavbarHome> </LayoutNavbarHome>
<Box p={20}> <Box p={20}>

94
src/module/notification/components/list_notification.tsx Normal file
View File

@@ -0,0 +1,94 @@
"use client"
import { WARNA } from '@/module/_global';
import { ActionIcon, Box, Center, Grid, Group, Text } from '@mantine/core';
import { useRouter } from 'next/navigation';
import React from 'react';
import { HiUser } from 'react-icons/hi2';
const dataNotification = [
{
id: 1,
title: 'Rapat Kamis',
description: 'Dipta menambahkan berkas di document dan file.',
},
{
id: 2,
title: 'Rapat Jumat',
description: 'Dipta menambahkan berkas di document dan file.',
},
{
id: 3,
title: 'Rapat Senin',
description: 'Dipta menambahkan berkas di document dan file.',
},
{
id: 4,
title: 'Rapat Selasa',
description: 'Dipta menambahkan berkas di document dan file.',
},
{
id: 5,
title: 'Rapat Rabu',
description: 'Dipta menambahkan berkas di document dan file.',
},
{
id: 5,
title: 'Rapat Rabu',
description: 'Dipta menambahkan berkas di document dan file.',
},
{
id: 5,
title: 'Rapat Rabu',
description: 'Dipta menambahkan berkas di document dan file.',
},
{
id: 5,
title: 'Rapat Rabu',
description: 'Dipta menambahkan berkas di document dan file.',
},
{
id: 5,
title: 'Rapat Rabu',
description: 'Dipta menambahkan berkas di document dan file.',
},
{
id: 5,
title: 'Rapat Rabu',
description: 'Dipta menambahkan berkas di document dan file.',
},
{
id: 5,
title: 'Rapat Rabu',
description: 'Dipta menambahkan berkas di document dan file.',
},
]
export default function ListNotification() {
const router = useRouter()
return (
<Box>
{dataNotification.map((v, i) => {
return (
<Grid style={{
border: `1px solid ${WARNA.borderOrange}`,
padding: 15,
borderRadius: 15
}} gutter={1} key={i} mb={"sm"}>
<Grid.Col span={3} pl={'xs'}>
<ActionIcon variant="light" bg={WARNA.biruTua} size={50} radius={100} aria-label="icon">
<HiUser size={30} color='white' />
</ActionIcon>
</Grid.Col>
<Grid.Col span={9}>
<Box>
<Text fw={'bold'} fz={18}>{v.title}</Text>
<Text fz={15}>{v.description}</Text>
</Box>
</Grid.Col>
</Grid>
)
})}
</Box>
);
}

23
src/module/notification/components/ui/navbar_notification.tsx Normal file
View File

@@ -0,0 +1,23 @@
"use client"
import { LayoutIconBack, LayoutNavbarHome } from '@/module/_global';
import { Box, Grid, Text } from '@mantine/core';
import { useRouter } from 'next/navigation';
import React from 'react';
export default function NavbarNotification() {
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'} >NOTIFIKASI</Text>
</Grid.Col>
<Grid.Col span="auto"></Grid.Col>
</Grid>
</LayoutNavbarHome>
);
}

3
src/module/notification/index.ts Normal file
View File

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

16
src/module/notification/view/view_notification.tsx Normal file
View File

@@ -0,0 +1,16 @@
import { LayoutIconBack, LayoutNavbarHome } from '@/module/_global'
import { Box, Grid, Text } from '@mantine/core'
import React from 'react'
import NavbarNotification from '../components/ui/navbar_notification'
import ListNotification from '../components/list_notification'
export default function ViewNotification() {
return (
<Box>
<NavbarNotification />
<Box p={20}>
<ListNotification />
</Box>
</Box>
)
}

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

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

10
src/module/project/view/view_project.tsx Normal file
View File

@@ -0,0 +1,10 @@
import React from 'react';
export default function ViewProject() {
return (
<div>
ViewProject
</div>
);
}

25
src/module/search/components/ui/navbar_search.tsx Normal file
View File

@@ -0,0 +1,25 @@
"use client"
import { LayoutIconBack, LayoutNavbarHome } from '@/module/_global';
import { Box, Grid, Text } from '@mantine/core';
import { useRouter } from 'next/navigation';
import React from 'react';
export default function NavbarSearch() {
const router = useRouter()
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'} >PENCARIAN</Text>
</Grid.Col>
<Grid.Col span="auto"></Grid.Col>
</Grid>
</LayoutNavbarHome>
</Box>
);
}

22
src/module/search/view/view_search.tsx
View File

@@ -1,27 +1,15 @@
'use client'
import { LayoutNavbarHome, WARNA } from '@/module/_global'; import { LayoutIconBack, LayoutNavbarHome, WARNA } from '@/module/_global';
import { ActionIcon, Box, Grid, Text, TextInput } from '@mantine/core'; import { ActionIcon, Box, Grid, Text, TextInput } from '@mantine/core';
import { useRouter } from 'next/navigation'; import { useRouter } from 'next/navigation';
import React from 'react'; import React from 'react';
import { HiChevronLeft, HiMagnifyingGlass } from 'react-icons/hi2'; import { HiChevronLeft, HiMagnifyingGlass } from 'react-icons/hi2';
import NavbarSearch from '../components/ui/navbar_search';
export default function ViewSearch() { export default function ViewSearch() {
const router = useRouter()
return ( return (
<> <>
<LayoutNavbarHome> <NavbarSearch />
<Grid justify='center' align='center'>
<Grid.Col span="auto">
<ActionIcon variant="light" onClick={() => router.push('/home')} bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
<HiChevronLeft size={20} color='white' />
</ActionIcon>
</Grid.Col>
<Grid.Col span={6}>
<Text ta={'center'} fw={'bold'} c={'white'} >PENCARIAN</Text>
</Grid.Col>
<Grid.Col span="auto"></Grid.Col>
</Grid>
</LayoutNavbarHome>
<Box p={20}> <Box p={20}>
<TextInput <TextInput
styles={{ styles={{
@@ -33,7 +21,7 @@ export default function ViewSearch() {
}} }}
size="md" size="md"
radius={30} radius={30}
leftSection={<HiMagnifyingGlass size={20}/>} leftSection={<HiMagnifyingGlass size={20} />}
placeholder="Pencarian" placeholder="Pencarian"
/> />
</Box> </Box>

4
src/module/user/index.ts
View File

@@ -1,3 +1,5 @@
import ViewEditProfile from "./profile/view/view_edit_profile";
import ViewProfile from "./profile/view/view_profile"; import ViewProfile from "./profile/view/view_profile";
export { ViewProfile } export { ViewProfile }
export { ViewEditProfile }

91
src/module/user/member/component/list_member.tsx Normal file
View File

@@ -0,0 +1,91 @@
'use client'
import { isDrawer, LayoutDrawer, WARNA } from '@/module/_global';
import { ActionIcon, Anchor, Box, Group, Text, TextInput } from '@mantine/core';
import React from 'react';
import { HiMagnifyingGlass, HiMiniUser } from 'react-icons/hi2';
import { useRouter } from 'next/navigation';
const dataMember = [
{
id: 1,
name: 'Ali akbar',
desc: 'Perbekel'
},
{
id: 2,
name: 'Fibra Marcell',
desc: 'Kasi Kesejahteraan'
},
{
id: 3,
name: 'Burhan',
desc: 'Kasi Kesejahteraan'
},
{
id: 4,
name: 'Chandra',
desc: 'Kasi Kesejahteraan'
},
{
id: 5,
name: 'Ayu',
desc: 'Kasi Kesejahteraan'
},
{
id: 6,
name: 'Heriawan',
desc: 'Kasi Kesejahteraan'
},
{
id: 7,
name: 'Jinan',
desc: 'Kasi Kesejahteraan'
},
{
id: 8,
name: 'Rizal',
desc: 'Kasi Kesejahteraan'
},
]
export default function ListMember() {
const router = useRouter()
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"
/>
{dataMember.map((v, i) => {
return (
<Box pt={20} key={i} onClick={() => {
router.push(`/member/${v.id}`)
}}>
<Group align='center' style={{
borderBottom: `1px solid #D9D9D9`,
padding: 10,
}} >
<Box>
<ActionIcon variant="light" bg={WARNA.biruTua} size={50} radius={100} aria-label="icon">
<HiMiniUser color={'white'} size={25} />
</ActionIcon>
</Box>
<Box>
<Text fw={'bold'} c={WARNA.biruTua}>{v.name}</Text>
</Box>
</Group>
</Box>
)
})}
</Box>
);
}

48
src/module/user/member/component/ui/drawer_list_member.tsx Normal file
View File

@@ -0,0 +1,48 @@
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 { useRouter } from 'next/navigation';
import React, { useState } from 'react';
import { IoAddCircle } from "react-icons/io5";
import { RiFilter2Line } from 'react-icons/ri';
export default function DrawerListMember() {
const openDrawer = useHookstate(isDrawer)
const router = useRouter()
function onCLose() {
openDrawer.set(false)
}
return (
<Box>
<Stack pt={10}>
<SimpleGrid
cols={{ base: 3, sm: 3, lg: 3 }}
>
<Flex justify={'center'} align={'center'} direction={'column'}
onClick={() => {
router.push('/member/create')
onCLose()
}}
>
<Box>
<IoAddCircle size={30} color={WARNA.biruTua} />
</Box>
<Box>
<Text c={WARNA.biruTua} ta='center'>Tambah Anggota</Text>
</Box>
</Flex>
<Flex justify={'center'} align={'center'} direction={'column'} >
<Box>
<RiFilter2Line size={30} color={WARNA.biruTua} />
</Box>
<Box>
<Text c={WARNA.biruTua} ta='center'>Filter</Text>
</Box>
</Flex>
</SimpleGrid>
</Stack>
</Box>
);
}

23
src/module/user/member/component/ui/navbar_create_member.tsx Normal file
View File

@@ -0,0 +1,23 @@
'use client'
import { LayoutIconBack, LayoutNavbarHome } from '@/module/_global';
import { Box, Grid, Text } from '@mantine/core';
import React from 'react';
export default function NavbarCreateMember() {
return (
<Box>
<LayoutNavbarHome>
<Grid justify='center' align='center'>
<Grid.Col span="auto">
<LayoutIconBack />
</Grid.Col>
<Grid.Col span={6}>
<Text ta={'center'} fw={'bold'} c={'white'}>Tambah Anggota</Text>
</Grid.Col>
<Grid.Col span="auto"></Grid.Col>
</Grid>
</LayoutNavbarHome>
</Box>
);
}

34
src/module/user/member/component/ui/navbar_list_member.tsx Normal file
View File

@@ -0,0 +1,34 @@
'use client'
import { isDrawer, LayoutDrawer, LayoutIconBack, LayoutNavbarHome, WARNA } from "@/module/_global";
import { useHookstate } from "@hookstate/core";
import { ActionIcon, Box, Grid, Group, Text } from "@mantine/core";
import { HiMenu } from "react-icons/hi";
import DrawerListMember from "./drawer_list_member";
export default function NavbarListMember() {
const openDrawer = useHookstate(isDrawer)
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'}>ANGGOTA</Text>
</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">
<HiMenu size={20} color='white' />
</ActionIcon>
</Group>
</Grid.Col>
</Grid>
</LayoutNavbarHome>
<LayoutDrawer opened={openDrawer.get()} title={'MENU'} onClose={() => openDrawer.set(false)}>
<DrawerListMember />
</LayoutDrawer>
</>
)
}

7
src/module/user/member/index.ts
View File

@@ -0,0 +1,7 @@
import ViewCreateMember from "./view/view_create_member";
import ViewDetailMember from "./view/view_detail_member";
import ViewListMember from "./view/view_list_member";
export { ViewListMember }
export { ViewCreateMember }
export { ViewDetailMember }

77
src/module/user/member/view/view_create_member.tsx Normal file
View File

@@ -0,0 +1,77 @@
import { Box, Button, Stack, TextInput } from "@mantine/core";
import NavbarCreateMember from "../component/ui/navbar_create_member";
import { WARNA } from "@/module/_global";
import { HiUser } from "react-icons/hi2";
export default function ViewCreateMember() {
return (
<Box>
<NavbarCreateMember />
<Stack
align="center"
justify="center"
gap="xs"
pt={30}
px={20}
>
<Box bg={WARNA.biruTua} py={30} px={50}
style={{
borderRadius: 10,
}}>
<HiUser size={100} color={WARNA.bgWhite} />
</Box>
<TextInput
size="md" type="number" radius={30} placeholder="NIK" withAsterisk label="NIK" w={"100%"}
styles={{
input: {
color: WARNA.biruTua,
borderRadius: WARNA.biruTua,
borderColor: WARNA.biruTua,
},
}}
/>
<TextInput
size="md" type="text" radius={30} placeholder="Nama" withAsterisk label="Nama" w={"100%"}
styles={{
input: {
color: WARNA.biruTua,
borderRadius: WARNA.biruTua,
borderColor: WARNA.biruTua,
},
}}
/>
<TextInput
size="md" type="email" radius={30} placeholder="Email" withAsterisk label="Email" w={"100%"}
styles={{
input: {
color: WARNA.biruTua,
borderRadius: WARNA.biruTua,
borderColor: WARNA.biruTua,
},
}}
/>
<TextInput
size="md" type="number" radius={30} placeholder="+62...." withAsterisk label="Nomor Telepon" w={"100%"}
styles={{
input: {
color: WARNA.biruTua,
borderRadius: WARNA.biruTua,
borderColor: WARNA.biruTua,
},
}}
/>
</Stack>
<Box mt={30} mx={20}>
<Button
c={"white"}
bg={WARNA.biruTua}
size="md"
radius={30}
fullWidth
>
Simpan
</Button>
</Box>
</Box>
)
}

55
src/module/user/member/view/view_detail_member.tsx Normal file
View File

@@ -0,0 +1,55 @@
import { LayoutNavbarHome, LayoutIconBack, WARNA } from "@/module/_global";
import { ActionIcon, Box, Group, Stack, Text } from "@mantine/core";
import { BsInfo } from "react-icons/bs";
import { FaSquarePhone } from "react-icons/fa6";
import { HiUser } from "react-icons/hi2";
import { MdEmail } from "react-icons/md";
import { RiIdCardFill } from "react-icons/ri";
export default function ViewDetailMember({ data }: { data: string }) {
return (
<Box>
<LayoutNavbarHome>
<Group justify="space-between">
<LayoutIconBack />
<ActionIcon variant="light" bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Info">
<BsInfo size={20} color='white' />
</ActionIcon>
</Group>
<Stack
align="center"
justify="center"
gap="xs"
>
<HiUser size={100} color='white' />
<Text c={'white'} fw={'bold'} fz={25}>Fibra Marcell</Text>
<Text c={'white'} fw={'lighter'} fz={15}>Kepala Urusan Pengembangan</Text>
</Stack>
</LayoutNavbarHome>
<Box p={20}>
<Group justify="space-between" grow py={5}>
<Group>
<RiIdCardFill size={28} />
<Text fz={18}>NIK</Text>
</Group>
<Text fz={18} fw={'bold'} ta={"right"}>513177782899</Text>
</Group>
<Group justify="space-between" grow py={5}>
<Group>
<FaSquarePhone size={28} />
<Text fz={18}>NoTelepon</Text>
</Group>
<Text fz={18} fw={'bold'} ta={"right"}>+62038939293</Text>
</Group>
<Group justify="space-between" grow py={5}>
<Group>
<MdEmail size={28} />
<Text fz={18}>Email</Text>
</Group>
<Text fz={18} fw={'bold'} ta={"right"}>marcel@gmail.com</Text>
</Group>
</Box>
</Box>
)
}

12
src/module/user/member/view/view_list_member.tsx Normal file
View File

@@ -0,0 +1,12 @@
import { Box } from "@mantine/core";
import NavbarListMember from "../component/ui/navbar_list_member";
import ListMember from "../component/list_member";
export default function ViewListMember() {
return (
<Box>
<NavbarListMember />
<ListMember />
</Box>
)
}

23
src/module/user/profile/component/ui/header_edit_profile.tsx Normal file
View File

@@ -0,0 +1,23 @@
'use client'
import { LayoutIconBack, LayoutNavbarHome } from '@/module/_global';
import { Box, Grid, Text } from '@mantine/core';
import React from 'react';
export default function HeaderEditProfile() {
return (
<Box>
<LayoutNavbarHome>
<Grid justify='center' align='center'>
<Grid.Col span="auto">
<LayoutIconBack />
</Grid.Col>
<Grid.Col span={6}>
<Text ta={'center'} fw={'bold'} c={'white'}>EDIT PROFIL</Text>
</Grid.Col>
<Grid.Col span="auto"></Grid.Col>
</Grid>
</LayoutNavbarHome>
</Box>
);
}

14
src/module/user/profile/component/ui/ui_profile.tsx Normal file
View File

@@ -0,0 +1,14 @@
'use client'
import { Group, Text } from "@mantine/core";
import { useRouter } from "next/navigation";
export function InfoTitleProfile() {
const router = useRouter()
return (
<Group justify="space-between" grow py={5}>
<Text fw={'bold'} fz={20}>Informasi</Text>
<Text ta={"right"} c={"blue"} onClick={() => router.push('/profile/edit')}>Edit</Text>
</Group>
)
}

77
src/module/user/profile/view/view_edit_profile.tsx Normal file
View File

@@ -0,0 +1,77 @@
import { WARNA } from "@/module/_global";
import { Box, Button, Stack, TextInput } from "@mantine/core";
import HeaderEditProfile from "../component/ui/header_edit_profile";
import { HiUser } from "react-icons/hi2";
export default function ViewEditProfile() {
return (
<Box>
<HeaderEditProfile />
<Stack
align="center"
justify="center"
gap="xs"
pt={30}
px={20}
>
<Box bg={WARNA.biruTua} py={30} px={50}
style={{
borderRadius: 10,
}}>
<HiUser size={100} color={WARNA.bgWhite} />
</Box>
<TextInput
size="md" type="number" radius={30} placeholder="NIK" withAsterisk label="NIK" w={"100%"}
styles={{
input: {
color: WARNA.biruTua,
borderRadius: WARNA.biruTua,
borderColor: WARNA.biruTua,
},
}}
/>
<TextInput
size="md" type="text" radius={30} placeholder="Nama" withAsterisk label="Nama" w={"100%"}
styles={{
input: {
color: WARNA.biruTua,
borderRadius: WARNA.biruTua,
borderColor: WARNA.biruTua,
},
}}
/>
<TextInput
size="md" type="email" radius={30} placeholder="Email" withAsterisk label="Email" w={"100%"}
styles={{
input: {
color: WARNA.biruTua,
borderRadius: WARNA.biruTua,
borderColor: WARNA.biruTua,
},
}}
/>
<TextInput
size="md" type="number" radius={30} placeholder="+62...." withAsterisk label="Nomor Telepon" w={"100%"}
styles={{
input: {
color: WARNA.biruTua,
borderRadius: WARNA.biruTua,
borderColor: WARNA.biruTua,
},
}}
/>
</Stack>
<Box mt={30} mx={20}>
<Button
c={"white"}
bg={WARNA.biruTua}
size="md"
radius={30}
fullWidth
>
Simpan
</Button>
</Box>
</Box>
)
}

38
src/module/user/profile/view/view_profile.tsx
View File

@@ -1,14 +1,18 @@
import { LayoutNavbarHome, WARNA } from "@/module/_global"; import { LayoutIconBack, LayoutNavbarHome, WARNA } from "@/module/_global";
import { ActionIcon, Group, Stack, Text } from "@mantine/core"; import { ActionIcon, Anchor, Box, Button, Flex, Group, Stack, Text } from "@mantine/core";
import { BsInfo } from "react-icons/bs"; import { BsInfo } from "react-icons/bs";
import { HiUser } from "react-icons/hi2"; import { HiUser } from "react-icons/hi2";
import { RiIdCardFill } from "react-icons/ri";
import { FaSquarePhone } from "react-icons/fa6";
import { MdEmail } from "react-icons/md";
import { InfoTitleProfile } from "../component/ui/ui_profile";
export default function ViewProfile() { export default function ViewProfile() {
return ( return (
<> <>
<LayoutNavbarHome> <LayoutNavbarHome>
<Group justify="space-between"> <Group justify="space-between">
<Text fw={'bold'} c={'white'}>Profile</Text> <LayoutIconBack />
<ActionIcon variant="light" bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Info"> <ActionIcon variant="light" bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Info">
<BsInfo size={20} color='white' /> <BsInfo size={20} color='white' />
</ActionIcon> </ActionIcon>
@@ -18,12 +22,36 @@ export default function ViewProfile() {
justify="center" justify="center"
gap="xs" gap="xs"
> >
<HiUser size={100} color='white' />
<HiUser size={150} color='white' />
<Text c={'white'} fw={'bold'} fz={25}>Fibra Marcell</Text> <Text c={'white'} fw={'bold'} fz={25}>Fibra Marcell</Text>
<Text c={'white'} fw={'lighter'} fz={15}>Kepala Urusan Pengembangan</Text> <Text c={'white'} fw={'lighter'} fz={15}>Kepala Urusan Pengembangan</Text>
</Stack> </Stack>
</LayoutNavbarHome> </LayoutNavbarHome>
<Box p={20}>
<InfoTitleProfile />
<Group justify="space-between" grow py={5}>
<Group>
<RiIdCardFill size={28} />
<Text fz={18}>NIK</Text>
</Group>
<Text fz={18} fw={'bold'} ta={"right"}>513177782899</Text>
</Group>
<Group justify="space-between" grow py={5}>
<Group>
<FaSquarePhone size={28} />
<Text fz={18}>NoTelepon</Text>
</Group>
<Text fz={18} fw={'bold'} ta={"right"}>+62038939293</Text>
</Group>
<Group justify="space-between" grow py={5}>
<Group>
<MdEmail size={28} />
<Text fz={18}>Email</Text>
</Group>
<Text fz={18} fw={'bold'} ta={"right"}>marcel@gmail.com</Text>
</Group>
</Box>
</> </>
) )
} }

52
xgen/index.js Normal file
View File

@@ -0,0 +1,52 @@
const root = process.cwd();
const yargs = require('yargs');
const readdirp = require('readdirp');
const path = require('path');
const _ = require('lodash');
const prettier = require('prettier');
const fs = require('fs')
; (() => {
yargs
.command(
'api-division',
'generate division api',
(yargs) => yargs,
generateDivisionApi
)
.demandCommand(1)
.recommendCommands()
.help()
.argv
})()
async function generateDivisionApi(argv) {
const dir = path.join(root, 'src', 'module', 'division', 'api')
const results = [];
const listImport = []
for await (const entry of readdirp(dir, { fileFilter: ['*.ts', '!api_division.ts', '!api_index.ts'], })) {
const fileName = path.basename(entry.path, '.ts');
const method = entry.path.split('/')[0].toUpperCase();
const importPath = entry.path.replace('.ts', '')
const text = `
{
"path": "${_.kebabCase(fileName)}",
"method": "${method}",
"bin": ${fileName}
}
`
results.push(text);
listImport.push(`import {${fileName}} from "./${importPath}"`)
}
const text = `
${listImport.join('\n')}
export const API_INDEX = [${results.join(',')}]
`
const formatted = await prettier.format(text, { parser: 'typescript' })
fs.writeFileSync(path.join(dir, 'api_index.ts'), formatted)
console.log("success")
}

1127
yarn.lock
View File

File diff suppressed because it is too large Load Diff