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

style : update division new

Browse Source
This commit is contained in:
lukman
2024-07-16 13:34:30 +08:00
parent 2ce299f1f0
commit 54d5cd9155
8 changed files with 386 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
src/module/division_new/_division_fitur/discussion/component/form_create_discussion.tsx
View File

@@ -1,7 +1,7 @@
'use client' 'use client'
import { WARNA } from "@/module/_global"; import { WARNA } from "@/module/_global";
import LayoutModal from "@/module/_global/layout/layout_modal"; import LayoutModal from "@/module/_global/layout/layout_modal";
import { Avatar, Box, Button, Group, Text, Textarea } from "@mantine/core"; import { Avatar, Box, Button, Center, Grid, Group, Text, Textarea } from "@mantine/core";
import { useState } from "react"; import { useState } from "react";
import toast from "react-hot-toast"; import toast from "react-hot-toast";
@@ -18,15 +18,27 @@ export default function FormCreateDiscussion() {
return ( return (
<Box> <Box>
<Box p={20}> <Box p={20}>
<Group> <Grid gutter={2}>
<Avatar src={'https://i.pravatar.cc/1000?img=32'} alt="it's me" size="lg" /> <Grid.Col span={"auto"}>
<Box> <Center>
<Textarea <Avatar src={'https://i.pravatar.cc/1000?img=32'} alt="it's me" size="lg" />
placeholder="Tuliskan apa yang ingin anda diskusikan" </Center>
w={"100%"} </Grid.Col>
/> <Grid.Col span={10}>
</Box> <Box>
</Group> <Textarea
placeholder="Tuliskan apa yang ingin anda diskusikan"
w={"100%"}
styles={{
input: {
border: 'none',
backgroundColor: 'transparent',
}
}}
/>
</Box>
</Grid.Col>
</Grid>
<Box mt="xl"> <Box mt="xl">
<Button <Button
color="white" color="white"

89
src/module/division_new/_division_fitur/document/components/list_documents_division.tsx Normal file
View File

@@ -0,0 +1,89 @@
import { ActionIcon, Box, Checkbox, Divider, Flex, Grid, Group, Text } from '@mantine/core';
import React from 'react';
import { FcDocument, FcFolder, FcImageFile } from "react-icons/fc";
const dataDocuments = [
{
id: 1,
name: 'Administrasi',
date: '18/06/2024 14.00 PM',
icon: <FcFolder size={60} />
},
{
id: 2,
name: 'Administrasi',
date: '18/06/2024 14.00 PM',
icon: <FcFolder size={60} />
},
{
id: 3,
name: 'Administrasi',
date: '18/06/2024 14.00 PM',
icon: <FcFolder size={60} />
},
{
id: 3,
name: 'Berkas Kerja',
date: '18/06/2024 14.00 PM',
icon: <FcDocument size={60} />
},
{
id: 3,
name: 'Berkas Kerja',
date: '18/06/2024 14.00 PM',
icon: <FcDocument size={60} />
},
{
id: 3,
name: 'Image Kegiatan',
date: '18/06/2024 14.00 PM',
icon: <FcImageFile size={60} />
},
{
id: 3,
name: 'Image Pelaksanaan',
date: '18/06/2024 14.00 PM',
icon: <FcImageFile size={60} />
},
]
export default function ListDocumentsDivision() {
return (
<Box>
<Box p={20}>
{dataDocuments.map((v, i) => {
return (
<Box key={i}>
<Box mt={10} mb={10}>
<Grid align='center'>
<Grid.Col span={10}>
<Group gap={20}>
<Box>
{v.icon}
</Box>
<Flex direction={'column'}>
<Text>{v.name}</Text>
<Text fz={10}>{v.date}</Text>
</Flex>
</Group>
</Grid.Col>
<Grid.Col span={2}>
<Group justify='flex-end'>
<Checkbox
color="teal"
radius="lg"
size="md"
/>
</Group>
</Grid.Col>
</Grid>
</Box>
<Divider size="xs" />
</Box>
)
})}
</Box>
</Box>
);
}

117
src/module/division_new/_division_fitur/document/components/ui/drawer_menu_document_division.tsx Normal file
View File

@@ -0,0 +1,117 @@
"use clent"
import { LayoutDrawer, WARNA } from '@/module/_global';
import { ActionIcon, Box, Button, Divider, Flex, Grid, Modal, SimpleGrid, Stack, Text, TextInput } from '@mantine/core';
import { useRouter } from 'next/navigation';
import React, { useState } from 'react';
import toast from 'react-hot-toast';
import { FaFolderClosed, FaRegImage } from 'react-icons/fa6';
import { HiDocumentText } from 'react-icons/hi2';
import { IoAddCircle, IoDocumentText } from 'react-icons/io5';
export default function DrawerMenuDocumentDivision() {
const [openDrawerDocument, setOpenDrawerDocument] = useState(false)
const [openModal, setOpenModal] = useState(false)
const router = useRouter()
function onCreate(val: boolean) {
if (val) {
toast.success("Sukses! Data tersimpan");
}
setOpenDrawerDocument(false)
setOpenModal(false)
router.push('/document')
}
return (
<Box>
<Stack pt={10}>
<SimpleGrid
cols={{ base: 2, sm: 3, lg: 3 }}
onClick={() => setOpenDrawerDocument(true)}
>
<Flex justify={'center'} align={'center'} direction={'column'} >
<Box>
<IoAddCircle size={30} color={WARNA.biruTua} />
</Box>
<Box >
<Text c={WARNA.biruTua}>Tambah Dokumen</Text>
</Box>
</Flex>
</SimpleGrid>
</Stack>
<LayoutDrawer opened={openDrawerDocument} onClose={() => setOpenDrawerDocument(false)} title={''} size='lg' >
<SimpleGrid
cols={{ base: 2, sm: 2, lg: 2 }}
onClick={() => setOpenDrawerDocument(true)}
>
<Flex onClick={() => setOpenModal(true)} justify={'center'} align={'center'} direction={'column'} mb={20} >
<Box>
<ActionIcon variant="filled" color="#DFE8EA" size={61} radius="xl" aria-label="Settings">
<FaFolderClosed size={40} color={WARNA.biruTua} />
</ActionIcon>
</Box>
<Box mt={10}>
<Text c={WARNA.biruTua}>Membuat Folder</Text>
</Box>
</Flex>
<Flex justify={'center'} align={'center'} direction={'column'} mb={20}>
<Box>
<ActionIcon variant="filled" color="#DFE8EA" size={61} radius="xl" aria-label="Settings">
<HiDocumentText size={40} color={WARNA.biruTua} />
</ActionIcon>
</Box>
<Box mt={10}>
<Text c={WARNA.biruTua}>Upload Dokumen</Text>
</Box>
</Flex>
<Flex justify={'center'} align={'center'} direction={'column'} mb={20} >
<Box>
<ActionIcon variant="filled" color="#DFE8EA" size={61} radius="xl" aria-label="Settings">
<FaRegImage size={40} color={WARNA.biruTua} />
</ActionIcon>
</Box>
<Box mt={10}>
<Text c={WARNA.biruTua}>Upload Foto</Text>
</Box>
</Flex>
</SimpleGrid>
</LayoutDrawer>
<Modal styles={{
body: {
borderRadius: 20
},
content: {
borderRadius: 20,
border: `2px solid ${"#828AFC"}`
}
}} opened={openModal} onClose={() => setOpenModal(false)} centered withCloseButton={false}>
<Box p={20}>
<Text ta={"center"} fw={"bold"}>Buat Folder Baru</Text>
<Box mt={20} mb={20}>
<TextInput
styles={{
input: {
color: WARNA.biruTua,
borderRadius: '#828AFC',
borderColor: '#828AFC',
},
}}
size="md"
radius={10}
placeholder="Buat Folder Baru"
/>
</Box>
<Grid mt={40}>
<Grid.Col span={6}>
<Button variant="subtle" fullWidth color='#969494' onClick={() => setOpenModal(false)}>Batalkan</Button>
</Grid.Col>
<Grid.Col span={6}>
<Button variant="subtle" fullWidth color={WARNA.biruTua} onClick={(val) => onCreate(true)}>Membuat</Button>
</Grid.Col>
</Grid>
</Box>
</Modal>
</Box>
);
}

11
src/module/division_new/_division_fitur/document/components/ui/modal_create_folder.tsx Normal file
View File

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

133
src/module/division_new/_division_fitur/document/components/ui/navbar_document_division.tsx Normal file
View File

@@ -0,0 +1,133 @@
'use client'
import { LayoutDrawer, LayoutNavbarNew, WARNA } from '@/module/_global';
import { ActionIcon, Box, Checkbox, Divider, Flex, Grid, Group, Text } from '@mantine/core';
import React, { useState } from 'react';
import { HiMenu } from 'react-icons/hi';
import DrawerMenuDocumentDivision from './drawer_menu_document_division';
import ListDocumentsDivision from '../list_documents_division';
import { FcDocument, FcFolder, FcImageFile } from 'react-icons/fc';
const dataDocuments = [
{
id: 1,
name: 'Administrasi',
date: '18/06/2024 14.00 PM',
icon: <FcFolder size={60} />
},
{
id: 2,
name: 'Administrasi',
date: '18/06/2024 14.00 PM',
icon: <FcFolder size={60} />
},
{
id: 3,
name: 'Administrasi',
date: '18/06/2024 14.00 PM',
icon: <FcFolder size={60} />
},
{
id: 3,
name: 'Berkas Kerja',
date: '18/06/2024 14.00 PM',
icon: <FcDocument size={60} />
},
{
id: 3,
name: 'Berkas Kerja',
date: '18/06/2024 14.00 PM',
icon: <FcDocument size={60} />
},
{
id: 3,
name: 'Image Kegiatan',
date: '18/06/2024 14.00 PM',
icon: <FcImageFile size={60} />
},
{
id: 3,
name: 'Image Pelaksanaan',
date: '18/06/2024 14.00 PM',
icon: <FcImageFile size={60} />
},
{
id: 3,
name: 'Image Pelaksanaan',
date: '18/06/2024 14.00 PM',
icon: <FcImageFile size={60} />
},
]
export default function NavbarDocumentDivision() {
const [isChecked, setIsChecked] = useState(false);
const handleCheckboxChange = () => {
setIsChecked(!isChecked);
};
const [isOpen, setOpen] = useState(false)
return (
<Box>
{isChecked && (
<>
<Box h={90} w={{ base: "100%", md: "38.2%" }} bg={WARNA.biruTua} pos={'fixed'} top={0} style={{
zIndex: 999,
}}>
zxsdsd
</Box>
<Box h={70} w={{ base: "100%", md: "38.2%" }} bg={WARNA.biruTua} pos={'fixed'} bottom={0} style={{
zIndex: 999,
}}>
zxsdsd
</Box>
</>
)}
<LayoutNavbarNew back='/division' title='Divisi kerohanian'
menu={
<ActionIcon onClick={() => setOpen(true)} variant="light" bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
<HiMenu size={20} color='white' />
</ActionIcon>
}
/>
<Box>
<Box p={20} pb={60}>
{dataDocuments.map((v, i) => {
return (
<Box key={i}>
<Box mt={10} mb={10}>
<Grid align='center'>
<Grid.Col span={10}>
<Group gap={20}>
<Box>
{v.icon}
</Box>
<Flex direction={'column'}>
<Text>{v.name}</Text>
<Text fz={10}>{v.date}</Text>
</Flex>
</Group>
</Grid.Col>
<Grid.Col span={2}>
<Group justify='flex-end'>
<Checkbox
color="teal"
radius="lg"
size="md"
checked={isChecked}
onChange={handleCheckboxChange}
/>
</Group>
</Grid.Col>
</Grid>
</Box>
<Divider size="xs" />
</Box>
)
})}
</Box>
</Box>
<LayoutDrawer opened={isOpen} title={'Menu'} onClose={() => setOpen(false)}>
<DrawerMenuDocumentDivision />
</LayoutDrawer>
</Box>
);
}

11
src/module/division_new/_division_fitur/document/view/view_document_division.tsx Normal file
View File

@@ -0,0 +1,11 @@
import { Box } from '@mantine/core';
import React from 'react';
import NavbarDocumentDivision from '../components/ui/navbar_document_division';
export default function ViewDocumentDivision() {
return (
<Box>
<NavbarDocumentDivision/>
</Box>
);
}

2
src/module/division_new/components/detail_division/feature_detail_division.tsx
View File

@@ -52,7 +52,7 @@ export default function FeatureDetailDivision() {
border: `1px solid ${WARNA.bgHijauMuda}`, border: `1px solid ${WARNA.bgHijauMuda}`,
borderRadius: 10, borderRadius: 10,
padding: 10 padding: 10
}} onClick={() => router.push('/documents')}> }} onClick={() => router.push('/document')}>
<Grid justify='center' align='center'> <Grid justify='center' align='center'>
<Grid.Col span={"auto"}> <Grid.Col span={"auto"}>
<ActionIcon variant="filled" <ActionIcon variant="filled"

2
src/module/division_new/index.ts
View File

@@ -11,6 +11,7 @@ import ViewCreateDiscussion from "./_division_fitur/discussion/view/view_create_
import ViewDetailDiscussion from "./_division_fitur/discussion/view/view_detail_discussion"; import ViewDetailDiscussion from "./_division_fitur/discussion/view/view_detail_discussion";
import ViewEditDiscussion from "./_division_fitur/discussion/view/view_edit_discussion"; import ViewEditDiscussion from "./_division_fitur/discussion/view/view_edit_discussion";
import ViewListDiscussion from "./_division_fitur/discussion/view/view_list_discussion"; import ViewListDiscussion from "./_division_fitur/discussion/view/view_list_discussion";
import ViewDocumentDivision from "./_division_fitur/document/view/view_document_division";
import ViewCreateTaskDivision from "./_division_fitur/task/view/view_create_division_task"; import ViewCreateTaskDivision from "./_division_fitur/task/view/view_create_division_task";
import ViewDetailDivisionTask from "./_division_fitur/task/view/view_detail_division_task"; import ViewDetailDivisionTask from "./_division_fitur/task/view/view_detail_division_task";
import ViewDivisionTask from "./_division_fitur/task/view/view_division_task"; import ViewDivisionTask from "./_division_fitur/task/view/view_division_task";
@@ -45,4 +46,5 @@ export { ViewListDiscussion }
export { ViewCreateDiscussion } export { ViewCreateDiscussion }
export { ViewDetailDiscussion } export { ViewDetailDiscussion }
export { ViewEditDiscussion } export { ViewEditDiscussion }
export { ViewDocumentDivision }