style : update division
Deskripsi: - add report division - view create anggota division - update drawer detail division - update information division - view edit division - view report division No issue
This commit is contained in:
lukman
@@ -1,25 +1,135 @@
|
||||
import { LayoutNavbarNew, WARNA } from '@/module/_global';
|
||||
import { Box, Text, Title } from '@mantine/core';
|
||||
import React from 'react';
|
||||
"use client"
|
||||
import { LayoutDrawer, LayoutNavbarNew, WARNA } from '@/module/_global';
|
||||
import { ActionIcon, Avatar, Box, Button, Divider, Flex, Group, Modal, SimpleGrid, Text, Title } from '@mantine/core';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import React, { useState } from 'react';
|
||||
import { AiOutlineUserAdd } from 'react-icons/ai';
|
||||
import { FaUserTie } from 'react-icons/fa6';
|
||||
import { HiUserAdd } from 'react-icons/hi';
|
||||
import { IoIosCloseCircle } from 'react-icons/io';
|
||||
import { LuClipboardEdit } from 'react-icons/lu';
|
||||
import { MdAccountCircle } from 'react-icons/md';
|
||||
|
||||
const dataUser = [
|
||||
{
|
||||
id: 1,
|
||||
img: "https://i.pravatar.cc/1000?img=3",
|
||||
name: "Doni Setiawan",
|
||||
role: "Admin"
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
img: "https://i.pravatar.cc/1000?img=10",
|
||||
name: "Ilham Udin",
|
||||
role: "Anggota"
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
img: "https://i.pravatar.cc/1000?img=11",
|
||||
name: "Didin Anang",
|
||||
role: "Anggota"
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
img: "https://i.pravatar.cc/1000?img=21",
|
||||
name: "Angga Saputra",
|
||||
role: "Anggota"
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
img: "https://i.pravatar.cc/1000?img=32",
|
||||
name: "Marcel Widianto",
|
||||
role: "Anggota"
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
img: "https://i.pravatar.cc/1000?img=37",
|
||||
name: "Bagas Nusantara",
|
||||
role: "Anggota"
|
||||
},
|
||||
];
|
||||
|
||||
export default function InformationDivision() {
|
||||
const router = useRouter()
|
||||
const [openDrawer, setDrawer] = useState(false)
|
||||
return (
|
||||
<Box>
|
||||
<LayoutNavbarNew back="/division/1" title=""
|
||||
menu
|
||||
<LayoutNavbarNew back="/division/1" title="divisi kerohanian"
|
||||
menu={
|
||||
<ActionIcon variant="light" onClick={() => {
|
||||
router.push('/division/edit/1')
|
||||
}} bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
|
||||
<LuClipboardEdit size={20} color='white' />
|
||||
</ActionIcon>}
|
||||
/>
|
||||
<Box p={20}>
|
||||
<Title order={3} fw={"bold"} ta={"center"}>DIVISI KEROHANIAN</Title>
|
||||
<Box>
|
||||
<Text fw={"bold"}>Deskripsi Divisi</Text>
|
||||
<Text mt={10} ta={"justify"}>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </Text>
|
||||
</Box>
|
||||
<Divider my={"md"} />
|
||||
<Box mt={20}>
|
||||
<Text fw={"bold"}>Deskripsi</Text>
|
||||
<Box p={20} style={{
|
||||
border: `1px solid ${WARNA.borderBiruMuda}`,
|
||||
borderRadius: 10
|
||||
}}>
|
||||
<Text>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </Text>
|
||||
<Box>
|
||||
<Text>20 Anggota</Text>
|
||||
</Box>
|
||||
<Box mt={15}>
|
||||
<Group align='center' onClick={() => router.push('/division/create-anggota/1')}>
|
||||
<Avatar size="lg">
|
||||
<AiOutlineUserAdd size={30} color={WARNA.biruTua} />
|
||||
</Avatar>
|
||||
<Text>Tambah Anggota</Text>
|
||||
</Group>
|
||||
</Box>
|
||||
<Box pt={10}>
|
||||
<Box mb={10}>
|
||||
{dataUser.map((v, i) => {
|
||||
return (
|
||||
<Box key={i}>
|
||||
<Flex
|
||||
justify={"space-between"}
|
||||
align={"center"}
|
||||
mt={10}
|
||||
onClick={() => setDrawer(true)}
|
||||
>
|
||||
<Group>
|
||||
<Avatar src={v.img} alt="it's me" size="lg" />
|
||||
<Box>
|
||||
<Text c={WARNA.biruTua} fw={"bold"}>
|
||||
{v.name}
|
||||
</Text>
|
||||
</Box>
|
||||
</Group>
|
||||
<Text c={WARNA.biruTua} fw={"bold"}>
|
||||
{v.role}
|
||||
</Text>
|
||||
</Flex>
|
||||
<Box mt={10}>
|
||||
<Divider size={"xs"} />
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
})}
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<LayoutDrawer opened={openDrawer} onClose={() => setDrawer(false)} title="">
|
||||
<Box>
|
||||
<Group align='center' mb={20}>
|
||||
<ActionIcon variant="light" size={60} aria-label="admin" radius="xl">
|
||||
<FaUserTie size={30} color={WARNA.biruTua} />
|
||||
</ActionIcon>
|
||||
<Text c={WARNA.biruTua}>Jadikan Admin</Text>
|
||||
</Group>
|
||||
<Group align='center'>
|
||||
<ActionIcon variant="light" size={60} aria-label="admin" radius="xl">
|
||||
<IoIosCloseCircle size={40} color={WARNA.biruTua} />
|
||||
</ActionIcon>
|
||||
<Text c={WARNA.biruTua}>Keluarkan dari Group</Text>
|
||||
</Group>
|
||||
</Box>
|
||||
</LayoutDrawer>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
80
src/module/division_new/components/report_division_id.tsx
Normal file
80
src/module/division_new/components/report_division_id.tsx
Normal file
@@ -0,0 +1,80 @@
|
||||
"use client"
|
||||
import { LayoutNavbarNew, WARNA } from '@/module/_global';
|
||||
import { Box, Stack } from '@mantine/core';
|
||||
import { DateInput } from '@mantine/dates';
|
||||
import React, { useState } from 'react';
|
||||
import EchartPaiReport from './echart_pai_report';
|
||||
import EchartBarReport from './echart_bar_report';
|
||||
import EventReport from './event_report';
|
||||
import DiscussionReport from './discussion_report';
|
||||
|
||||
export default function ReportDivisionId() {
|
||||
const [value, setValue] = useState<Date | null>(null);
|
||||
return (
|
||||
<Box>
|
||||
<LayoutNavbarNew back="/division/1" title="Report Divisi" menu />
|
||||
<Box p={20}>
|
||||
<Stack>
|
||||
<DateInput
|
||||
value={value}
|
||||
onChange={setValue}
|
||||
radius={10}
|
||||
size="md"
|
||||
required
|
||||
label="Date input"
|
||||
placeholder="Date input"
|
||||
/>
|
||||
<Box pt={10}>
|
||||
<Box
|
||||
bg={"white"}
|
||||
style={{
|
||||
border: `1px solid ${WARNA.borderBiruMuda}`,
|
||||
borderRadius: 10,
|
||||
padding: 10,
|
||||
}}
|
||||
>
|
||||
<EchartPaiReport />
|
||||
</Box>
|
||||
</Box>
|
||||
<Box pt={10}>
|
||||
<Box
|
||||
bg={"white"}
|
||||
style={{
|
||||
border: `1px solid ${WARNA.borderBiruMuda}`,
|
||||
borderRadius: 10,
|
||||
padding: 10,
|
||||
}}
|
||||
>
|
||||
<EchartBarReport />
|
||||
</Box>
|
||||
</Box>
|
||||
<Box pt={10}>
|
||||
<Box
|
||||
bg={"white"}
|
||||
style={{
|
||||
border: `1px solid ${WARNA.borderBiruMuda}`,
|
||||
borderRadius: 10,
|
||||
padding: 10,
|
||||
}}
|
||||
>
|
||||
<EventReport />
|
||||
</Box>
|
||||
</Box>
|
||||
<Box pt={10}>
|
||||
<Box
|
||||
bg={"white"}
|
||||
style={{
|
||||
border: `1px solid ${WARNA.borderBiruMuda}`,
|
||||
borderRadius: 10,
|
||||
padding: 10,
|
||||
}}
|
||||
>
|
||||
<DiscussionReport />
|
||||
</Box>
|
||||
</Box>
|
||||
</Stack>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -12,7 +12,7 @@ export default function DrawerDetailDivision() {
|
||||
<Box>
|
||||
<Stack pt={10}>
|
||||
<SimpleGrid
|
||||
cols={{ base: 3, sm: 3, lg: 3 }}
|
||||
cols={{ base: 2, sm: 2, lg: 3 }}
|
||||
>
|
||||
<Flex onClick={() => router.push('/division/info/1')} justify={'center'} align={'center'} direction={'column'} >
|
||||
<Box>
|
||||
@@ -22,26 +22,6 @@ export default function DrawerDetailDivision() {
|
||||
<Text c={WARNA.biruTua}>Informasi Divisi</Text>
|
||||
</Box>
|
||||
</Flex>
|
||||
<Flex onClick={() => {
|
||||
router.push('/division/edit/1')
|
||||
}} justify={'center'} align={'center'} direction={'column'} >
|
||||
<Box>
|
||||
<FaPencil size={30} color={WARNA.biruTua} />
|
||||
</Box>
|
||||
<Box>
|
||||
<Text c={WARNA.biruTua}>Edit Divisi</Text>
|
||||
</Box>
|
||||
</Flex>
|
||||
<Flex onClick={() => {
|
||||
router.push('/division/edit-anggota/1')
|
||||
}} justify={'center'} align={'center'} direction={'column'} >
|
||||
<Box>
|
||||
<TbReportAnalytics size={30} color={WARNA.biruTua} />
|
||||
</Box>
|
||||
<Box>
|
||||
<Text c={WARNA.biruTua}>Edit Anggota</Text>
|
||||
</Box>
|
||||
</Flex>
|
||||
<Flex onClick={() => {
|
||||
router.push('/division/report/1')
|
||||
}} justify={'center'} align={'center'} direction={'column'} >
|
||||
|
||||
Reference in New Issue
Block a user