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

style : update information division

Browse Source
This commit is contained in:
lukman
2024-07-18 14:21:41 +08:00
parent 49bb48fd9f
commit ec8ca5dcc9
6 changed files with 243 additions and 179 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/module/division_new/_division_fitur/document/components/ui/navbar_document_division.tsx
View File

@@ -134,7 +134,7 @@ export default function NavbarDocumentDivision() {
</Box> </Box>
</> </>
)} )}
<LayoutNavbarNew back='/division' title='Divisi kerohanian' <LayoutNavbarNew back='' title='Divisi kerohanian'
menu={ menu={
<ActionIcon onClick={() => setOpen(true)} variant="light" bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings"> <ActionIcon onClick={() => setOpen(true)} variant="light" bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
<HiMenu size={20} color='white' /> <HiMenu size={20} color='white' />

122
src/module/division_new/components/create_anggota_division.tsx Normal file
View File

@@ -0,0 +1,122 @@
"use client"
import { LayoutNavbarNew, WARNA } from '@/module/_global';
import LayoutModal from '@/module/_global/layout/layout_modal';
import { Avatar, Box, Button, Divider, Group, Stack, Text, TextInput } from '@mantine/core';
import { useRouter } from 'next/navigation';
import React, { useState } from 'react';
import toast from 'react-hot-toast';
import { FaCheck } from 'react-icons/fa6';
import { HiMagnifyingGlass } from 'react-icons/hi2';
const dataUser = [
{
id: 1,
img: "https://i.pravatar.cc/1000?img=3",
name: "Doni Setiawan",
},
{
id: 2,
img: "https://i.pravatar.cc/1000?img=10",
name: "Ilham Udin",
},
{
id: 3,
img: "https://i.pravatar.cc/1000?img=11",
name: "Didin Anang",
},
{
id: 4,
img: "https://i.pravatar.cc/1000?img=21",
name: "Angga Saputra",
},
{
id: 5,
img: "https://i.pravatar.cc/1000?img=32",
name: "Marcel Widianto",
},
{
id: 6,
img: "https://i.pravatar.cc/1000?img=37",
name: "Bagas Nusantara",
},
];
export default function CreateAnggotaDivision() {
const router = useRouter()
const [selectedFiles, setSelectedFiles] = useState<Record<number, boolean>>({});
const [isOpen, setOpen] = useState(false)
const handleFileClick = (index: number) => {
setSelectedFiles((prevSelectedFiles) => ({
...prevSelectedFiles,
[index]: !prevSelectedFiles[index],
}));
};
function onTrue(val: boolean) {
if (val) {
toast.success("Sukses! Data tersimpan");
}
setOpen(false)
router.push("/division/info/1")
}
return (
<Box>
<LayoutNavbarNew back="/division/info/1" title="tambah anggota"
menu
/>
<Box p={20}>
<Stack>
<TextInput
styles={{
input: {
color: WARNA.biruTua,
borderRadius: '#A3A3A3',
borderColor: '#A3A3A3',
},
}}
size="md"
radius={30}
leftSection={<HiMagnifyingGlass size={20} />}
placeholder="Pencarian"
/>
</Stack>
<Box mt={20}>
{dataUser.map((v, index) => {
const isSelected = selectedFiles[index];
return (
<Box my={10} key={index} onClick={() => handleFileClick(index)}>
<Group justify='space-between' align='center'>
<Group>
<Avatar src={v.img} alt="it's me" size="lg" />
<Text>{v.name}</Text>
</Group>
{isSelected ? <FaCheck /> : null}
</Group>
<Box mt={10}>
<Divider size={"xs"} />
</Box>
</Box>
)
})}
</Box>
<Box mt="xl">
<Button
color="white"
bg={WARNA.biruTua}
size="lg"
radius={30}
fullWidth
onClick={() => { setOpen(true) }}
>
Simpan
</Button>
</Box>
</Box>
<LayoutModal opened={isOpen} onClose={() => setOpen(false)}
description="Apakah Anda yakin ingin menambahkan data?"
onYes={(val) => { onTrue(val) }} />
</Box>
);
}

61
src/module/division_new/components/edit_division.tsx Normal file
View File

@@ -0,0 +1,61 @@
"use client"
import { LayoutNavbarNew, WARNA } from '@/module/_global';
import LayoutModal from '@/module/_global/layout/layout_modal';
import { Box, Button, Select, Stack, Textarea, TextInput } from '@mantine/core';
import { useRouter } from 'next/navigation';
import React, { useState } from 'react';
import toast from 'react-hot-toast';
export default function EditDivision() {
const [openModal, setOpenModal] = useState(false)
const router = useRouter()
function onTrue(val: boolean) {
if (val) {
toast.success("Sukses! Data tersimpan");
}
setOpenModal(false)
router.push('/division/info/1')
}
return (
<Box>
<LayoutNavbarNew back="/division/info/1" title="Edit Divisi"
menu
/>
<Box p={20}>
<Stack>
<Select
placeholder="Grup"
label="Grup"
size="md"
required
radius={40}
/>
<TextInput
placeholder="Judul"
label="Judul"
size="md"
required
radius={40}
/>
<Textarea placeholder="Deskripsi" label="Deskripsi" size="md" radius={10} />
<Box mt="xl">
<Button
color="white"
bg={WARNA.biruTua}
size="lg"
radius={30}
fullWidth
onClick={() => { setOpenModal(true) }}
>
Simpan
</Button>
</Box>
</Stack>
</Box>
<LayoutModal opened={openModal} onClose={() => setOpenModal(false)} description='Apakah Anda yakin ingin edit data' onYes={(val) => { onTrue(val) }} />
</Box>
)
}

95
src/module/division_new/components/information_division.tsx
View File

@@ -65,50 +65,59 @@ export default function InformationDivision() {
<Box p={20}> <Box p={20}>
<Box> <Box>
<Text fw={"bold"}>Deskripsi Divisi</Text> <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 p={20} bg={"white"} style={{
borderRadius: 10,
border: `1px solid ${WARNA.borderBiruMuda}`,
}}>
<Text 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>
</Box> </Box>
<Divider my={"md"} />
<Box mt={20}> <Box mt={20}>
<Box> <Box p={20} bg={"white"} style={{
<Text>20 Anggota</Text> borderRadius: 10,
</Box> border: `1px solid ${WARNA.borderBiruMuda}`,
<Box mt={15}> }}>
<Group align='center' onClick={() => router.push('/division/create-anggota/1')}> <Box>
<Avatar size="lg"> <Text>20 Anggota</Text>
<AiOutlineUserAdd size={30} color={WARNA.biruTua} /> </Box>
</Avatar> <Box mt={15}>
<Text>Tambah Anggota</Text> <Group align='center' onClick={() => router.push('/division/create-anggota/1')}>
</Group> <Avatar size="lg">
</Box> <AiOutlineUserAdd size={30} color={WARNA.biruTua} />
<Box pt={10}> </Avatar>
<Box mb={10}> <Text>Tambah Anggota</Text>
{dataUser.map((v, i) => { </Group>
return ( </Box>
<Box key={i}> <Box pt={10}>
<Flex <Box mb={10}>
justify={"space-between"} {dataUser.map((v, i) => {
align={"center"} return (
mt={10} <Box key={i}>
onClick={() => setDrawer(true)} <Flex
> justify={"space-between"}
<Group> align={"center"}
<Avatar src={v.img} alt="it's me" size="lg" /> mt={10}
<Box> onClick={() => setDrawer(true)}
<Text c={WARNA.biruTua} fw={"bold"}> >
{v.name} <Group>
</Text> <Avatar src={v.img} alt="it's me" size="lg" />
</Box> <Box>
</Group> <Text c={WARNA.biruTua} fw={"bold"}>
<Text c={WARNA.biruTua} fw={"bold"}> {v.name}
{v.role} </Text>
</Text> </Box>
</Flex> </Group>
<Box mt={10}> <Text c={WARNA.biruTua} fw={"bold"}>
<Divider size={"xs"} /> {v.role}
</Text>
</Flex>
<Box mt={10}>
<Divider size={"xs"} />
</Box>
</Box> </Box>
</Box> );
); })}
})} </Box>
</Box> </Box>
</Box> </Box>
</Box> </Box>
@@ -116,13 +125,13 @@ export default function InformationDivision() {
<LayoutDrawer opened={openDrawer} onClose={() => setDrawer(false)} title=""> <LayoutDrawer opened={openDrawer} onClose={() => setDrawer(false)} title="">
<Box> <Box>
<Group align='center' mb={20}> <Group align='center' mb={20} onClick={() => setDrawer(false)}>
<ActionIcon variant="light" size={60} aria-label="admin" radius="xl"> <ActionIcon variant="light" size={60} aria-label="admin" radius="xl">
<FaUserTie size={30} color={WARNA.biruTua} /> <FaUserTie size={30} color={WARNA.biruTua} />
</ActionIcon> </ActionIcon>
<Text c={WARNA.biruTua}>Jadikan Admin</Text> <Text c={WARNA.biruTua}>Jadikan Admin</Text>
</Group> </Group>
<Group align='center'> <Group align='center' onClick={() => setDrawer(false)}>
<ActionIcon variant="light" size={60} aria-label="admin" radius="xl"> <ActionIcon variant="light" size={60} aria-label="admin" radius="xl">
<IoIosCloseCircle size={40} color={WARNA.biruTua} /> <IoIosCloseCircle size={40} color={WARNA.biruTua} />
</ActionIcon> </ActionIcon>

104
src/module/division_new/view/view_create_anggota_division.tsx
View File

@@ -1,107 +1,11 @@
"use client" import { Box } from '@mantine/core';
import { LayoutNavbarNew, WARNA } from '@/module/_global'; import React from 'react';
import { Avatar, Box, Button, Divider, Group, Stack, Text, TextInput } from '@mantine/core'; import CreateAnggotaDivision from '../components/create_anggota_division';
import { useRouter } from 'next/navigation';
import React, { useState } from 'react';
import { FaCheck } from 'react-icons/fa6';
import { HiMagnifyingGlass } from 'react-icons/hi2';
const dataUser = [
{
id: 1,
img: "https://i.pravatar.cc/1000?img=3",
name: "Doni Setiawan",
},
{
id: 2,
img: "https://i.pravatar.cc/1000?img=10",
name: "Ilham Udin",
},
{
id: 3,
img: "https://i.pravatar.cc/1000?img=11",
name: "Didin Anang",
},
{
id: 4,
img: "https://i.pravatar.cc/1000?img=21",
name: "Angga Saputra",
},
{
id: 5,
img: "https://i.pravatar.cc/1000?img=32",
name: "Marcel Widianto",
},
{
id: 6,
img: "https://i.pravatar.cc/1000?img=37",
name: "Bagas Nusantara",
},
];
export default function ViewCreateAnggotaDivision() { export default function ViewCreateAnggotaDivision() {
const router = useRouter()
const [selectedFiles, setSelectedFiles] = useState<Record<number, boolean>>({});
const handleFileClick = (index: number) => {
setSelectedFiles((prevSelectedFiles) => ({
...prevSelectedFiles,
[index]: !prevSelectedFiles[index],
}));
};
return ( return (
<Box> <Box>
<LayoutNavbarNew back="/division/info/1" title="tambah anggota" <CreateAnggotaDivision/>
menu
/>
<Box p={20}>
<Stack>
<TextInput
styles={{
input: {
color: WARNA.biruTua,
borderRadius: '#A3A3A3',
borderColor: '#A3A3A3',
},
}}
size="md"
radius={30}
leftSection={<HiMagnifyingGlass size={20} />}
placeholder="Pencarian"
/>
</Stack>
<Box mt={20}>
{dataUser.map((v, index) => {
const isSelected = selectedFiles[index];
return (
<Box my={10} key={index} onClick={() => handleFileClick(index)}>
<Group justify='space-between' align='center'>
<Group>
<Avatar src={v.img} alt="it's me" size="lg" />
<Text>{v.name}</Text>
</Group>
{isSelected ? <FaCheck /> : null}
</Group>
<Box mt={10}>
<Divider size={"xs"} />
</Box>
</Box>
)
})}
</Box>
<Box mt="xl">
<Button
color="white"
bg={WARNA.biruTua}
size="lg"
radius={30}
fullWidth
onClick={() => router.push("/division/info/1")}
>
Simpan
</Button>
</Box>
</Box>
</Box> </Box>
); );
} }

38
src/module/division_new/view/view_edit_division.tsx
View File

@@ -1,45 +1,13 @@
"use client"
import { LayoutNavbarNew, WARNA } from '@/module/_global'; import { LayoutNavbarNew, WARNA } from '@/module/_global';
import { Box, Button, Select, Stack, Textarea, TextInput } from '@mantine/core'; import { Box, Button, Select, Stack, Textarea, TextInput } from '@mantine/core';
import React from 'react'; import React from 'react';
import EditDivision from '../components/edit_division';
export default function ViewEditDivision() { export default function ViewEditDivision() {
return ( return (
<Box> <Box>
<LayoutNavbarNew back="/division/info/1" title="Edit Divisi" <EditDivision/>
menu
/>
<Box p={20}>
<Stack>
<Select
placeholder="Grup"
label="Grup"
size="md"
required
radius={40}
/>
<TextInput
placeholder="Judul"
label="Judul"
size="md"
required
radius={40}
/>
<Textarea placeholder="Deskripsi" label="Deskripsi" radius={10} />
<Box mt="xl">
<Button
color="white"
bg={WARNA.biruTua}
size="lg"
radius={30}
fullWidth
onClick={() => ""}
>
Simpan
</Button>
</Box>
</Stack>
</Box>
</Box> </Box>
); );
} }